@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, footer, header,menu, nav, output, ruby, section, summary{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline} html{ overflow-y: scroll;height: 100%} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{ display: block} img{ border: 0} body{ color: #000; font-family: objektiv-mk1, source-han-sans-cjk-ja, sans-serif; font-weight: 300; font-style: normal; /*"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif*/; font-feature-settings: "pkna" 1; -moz-osx-font-smoothing: grayscale; font-size: 16px; line-height: 1.6} *, *:before, *:after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box} *:focus{outline: none}
ol, ul{ list-style-type: none}
header, footer, main, section, article, .inner{ clear: both}
img{ vertical-align: bottom; /*pointer-events: none; -webkit-user-drag: none*/}
.col{ display: flex; display: -webkit-flex; width: 100%}
header a, footer a{ text-decoration: none}
strong{ font-weight: bold}


/* -----

HEADER

------------------------------------*/
nav{ border-bottom: 1px solid #1667ac; font-weight: 400}
.site-header{ background: rgba(255,255,255,1); padding: 0px; position: fixed; top: 0; left: 0; transition: .5s; width: 100%; z-index: 999}
.site-header.hide{ transform: translateY(-100%)}
#menu-navibtn { display: none; cursor: pointer; cursor: hand}
#navi input { display: none}

@media screen and (min-width: 768px){
  header{ /*text-align: center*/}
  #navi #navibtn{ display: none}
  .headinfo{ width: 90%; margin: 40px auto; justify-content: space-between}
  .query .headcontact a{ color: #000; border-bottom: 3px solid #1667ac; font-size: .9em; padding-bottom: 5px}
  .query .headcontact a i{ color: #1667ac; padding-left: 4px}
  .queryand{ gap: 15px}
  .queryand img{ width: 22px}
  .logo{ /*padding: 40px 0*/}
  .gnav{ position: relative; justify-content: center; margin: 0 auto 20px; gap: 4%}
  .gnav a:hover, .headcontact a:hover{ color: #1667ac}
  .gnav li a{ position: relative; display: inline-block; color: #000; padding: 6px 0px}
  .gnav > li:not(:nth-child(4)) a::after,
  .gnav li li a::after{ position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 3px; background: #1667ac; transform: scale(0, 1); transform-origin: left top; transition: transform .3s}
  .gnav li a:hover::after{ transform: scale(1, 1)}
  /*.gnav > li:nth-child(4) > a{ background: #e4eef4; padding: 6px 2em 8px; border-radius: 4px}*/
  .gnav li{ display: inline-block/*; margin: 0 1.5em*/}
  .gnav li ul{ visibility: hidden; opacity: 0; z-index: 1; flex-wrap: wrap; position: absolute;  top: 40px; left: 0; box-sizing: border-box; gap: 4%; background: #f0f0f0; -webkit-transition: all .2s ease; transition: all .2s ease; padding: 0 20% 20px}
  .gnav li li{ margin-top: 1em}
  .gnav > li:hover ul{ top: 45px; visibility: visible; opacity: 1}
  .gnav .pd, .headnav2{display: none}
}
@media screen and (min-width: 1280px){.headinfo{ width: 1280px}}
@media screen and (min-width:768px) and ( max-width:850px){ .gnav > li{ font-size: 13px}}
@media screen and (max-width: 767px){
  header img{ width: 85px}
  .logo{ margin: 15px}
  #navi { background: #fff; width: 100%}
  .hnav .pd { display: inline-block; width: 100%}
  .hnav li { position: relative; white-space: nowrap}
  .hnav, .headnav2, .query{ display: none}
  .hnav li a { display: inline-block; text-decoration: none}
  .hnav > li a { padding: 15px 5px 15px 5%; color: #fff/*#1667ac*/}
  .hnav li li a{ padding: 15px 2% 15px 8%; display: flex}
  .hnav > li{ border-bottom: 1px solid #3e7fb7}
  .hnav .pd i{ font-size: 1.2em; color: #9abcd9}
  .hnav > li:nth-child(5){ background: #3e7fb7}
  #menu-navibtn:checked ~ #navi { position: fixed; overflow-y: scroll; overflow-x: hidden; height: 100vh; background: #5a90be; }
  #menu-navibtn:checked ~ * .hnav,
  #menu-navibtn:checked ~ * .headnav2{ display: block; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards}
  #menu-navibtn:checked ~ * .hnav > li { max-height: inherit; overflow-y: visible}
  .hnav li label:hover { cursor: pointer; cursor: hand}
  .hnav li ul { margin-left: initial; position: relative; flex-direction: column}
  .hnav li ul li { display: none}
  .hnav input[type="checkbox"]:checked ~ label ~ ul > li { max-height: inherit; overflow-y: visible; display: block; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards}
  .angletoggle:before { content: "\f107"}
  #navi input[type="checkbox"]:checked ~ label .pd .angletoggle:before { content: "\f106"}
  #navi #navibtn { display: block; position: absolute; top: 6px; right: 10px}
  #navibtn span { display: block; width: 42px; height: 42px}
  #navibtn span span { display: block; overflow: hidden; width: 1px; height: 1px}
  #navibtn span span::before, #navibtn span span::after, #navibtn span::after{ position: absolute; left:0; content:""; width: 33px; height: 2px; background-color: #5a90be; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
  #navibtn span span::before{ top:8px}
  #menu-navibtn:checked ~ #navi label#navibtn span span::before{ top:19px; background: #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
  #navibtn span span::after{ top:19px}
  #navibtn span::after{ bottom:10px;}
  #menu-navibtn:checked ~ #navi label#navibtn span span::after,
  #menu-navibtn:checked ~ #navi label#navibtn > span::after{ bottom:21px; background: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
}
ul.headnav2links{ width: 90%; margin: 40px auto 10px}
ul.headnav2links li{ margin-top: 40px}
ul.headnav2links a{ color: #fff; }
ul.headnav2links a i{ margin-right: 7px}
ul.headnav2links li:nth-child(3) img{ width: 20px}
@keyframes fadeIn { 0% { display: none; opacity: 0} 1% { display: block; opacity: 0} 100% { display: block; opacity: 1}}



/* -----

FOOTER

------------------------------------*/
footer{ padding: 60px 0 5px; background: #f2f2f2; font-size: 87.5%}
footer a{ color: #222; text-decoration: none}
footer a:hover{ opacity: .7}
footer ul{ flex-wrap: wrap; margin-bottom: 2em}
footer .faic{ font-size: 2em; margin-bottom: 10px}
.fnav > li{ width: 20%; margin-top: 1em}
.fnav li li{ margin: 10px 0 0 .5em; width: 100%}
.fnav li li:before{ content: "-"; margin-right: 5px}
footer dl{ margin-bottom: 2em}
footer dl ul{ margin: 10px 0 30px}
.foot1, .foot2{ gap: 3%}
.foot2 li{ margin-bottom: 5px}
.fnavf{ font-size: .85em; color: #1667ac; letter-spacing: .1em}
.copyright{ color: #999; font-size: .9em}
@media screen and (max-width: 767px){
  .fnav li{ width: 50%}
  .foot2{ flex-direction: column}
  .foot1{ gap: 6%}
}


/* -----

ICON

------------------------------------*/
.icon,
.icon-duotone::before,
.icon-duotone::after{ display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased}
.icon-duotone{ position: relative; padding-left: 1.42em;
  /* make space for the width of the absolutely positioned icon */}
.icon-duotone::before,
.icon-duotone::after{ font: var(--fa-font-duotone); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.25em; text-align: center;
  /* position both layers of the icon to the left, set our fixed-width width, horizontally center layers, and then vertically align them so they flex with different line heights */}
.icon-duotone::before{ color: var(--fa-primary-color, inherit); opacity: 1; opacity: var(--fa-primary-opacity, 1.0)}
.icon-duotone::after{ color: var(--fa-secondary-color, inherit); opacity: var(--fa-secondary-opacity, 0.4)}

.iconar{ color: #1667ac; font-weight: 400}
.iconar::before{ content: "\f061"}
.iconar::after { content: "\f061\f061"}
.hl-brand::before, .hl-brand::after{ top: .77em}
.hl-brand::before{ content: "\f061"; color: #1667ac; font-weight: 400}
.hl-brand::after{ content: "\f061\f061"; color: #1667ac; font-weight: 400}
.topcol_icon{ flex-wrap :wrap; margin: 50px 0}
.topcol_icon i{ font-size: 2.6em; margin-bottom: 10px; color: /*#0088bd*/#317ecc}
.topcol_icon1 h2{ margin-right: 0!important}
.txlk a[href$=".pdf"]::before, .i-pdf::before, .relatedlks a[href$=".pdf"]::before{ font: var(--fa-font-light); content: "\f1c1"; margin-right: 3px; color: #1667ac; font-size: 1.3em}
.txlk a:not(.bottomsns)[target=_blank]:not(.i-pdf)::after, .relatedlks a[target="_blank"]:not([href$=".pdf"])::after, a[target=_blank] .ruby::after, .blanklk a::after{ font: var(--fa-font-light); content: "\f08e"; margin: 0 2px 2px 6px; color: #1667ac; font-size: .9em; display: inline-block}






/* -----

MAIN

------------------------------------*/
main{ padding-top: 158px; background: #fff}
main a{ color: #222; text-decoration: none}
main a:hover{ opacity: .7}
main p:not(table p, ul li p:last-child, .item-dt p){ margin: 0 0 1.5em}
.inner{ width: 90%; margin: 0 auto}
.txlk a, dl.relatedlks a{ /*text-decoration-line: underline; text-decoration-color: #1667ac*/ border-bottom: 1px solid #1667ac}
.txlk a img{ border: 0; vertical-align: middle}
article{ margin-bottom: 80px}
.center{ text-align: center}
.right{ text-align: right}
.notes{ font-size: .8em; display: block; line-height: 1.6; margin-top: 5px}
.red{ color: #f00}
.bg1{ background: #f0f0f0; padding: 60px 0}
.bg2{ background: #317ecc; padding: 60px 0}

.img-wide{ width: 100%; margin-bottom: 1.5em}
.img-wide img{ width: 100%; max-width: 1200px;}
.img-center, .img-centers{ margin: 0 auto 1.5em; text-align: center}
.img-left{ margin: 0 0 1.5em}
.img-center img, .img-left img{ width: auto}
.boxline{ border: 1px solid #ddd; padding: 10px}

ul.ulid{ list-style: disc outside; margin: .3em 0 1.5em 1.3em}
ul.ulid li{ margin-bottom: .5em}
ol.olid{ padding-left: 20px; margin: 0 0 1.5em}
ol.olid li{ margin: 0; padding: 0; list-style: decimal; margin-bottom: 0.8em;}


.totop{ display: block; margin: 60px 0; text-align: center; font-size: .9em }
.totop a{ border: 1px solid #1667ac; padding: 10px 2em; border-radius: 6px;}

main h2, main h3{ font-family: objektiv-mk1, sans-serif; font-weight: 400; font-style: normal; line-height: 1.3}
h2.h2topss{ font-size: 1.9em; margin: 0 0 .7em}
.hl-brand, .hl-art-l{ font-size: 1.4em; margin: 0 0 .6em}
.hl-art-m{ font-size: 1.3em; margin: 0 0 .6em}
.hl-art-s{ font-size: 1.15em; margin: 0 0 .6em}

/* HEADLINE */
h1.headline-l{ font-size: 1.9em; margin-bottom: 1em; line-height: 1.4}
h1.headline-l .h1contname{ color: #1667ac; font-size: 50%; display: block; margin-bottom: 5px; letter-spacing: .05em}
h1.headline-l .h1ruby{ font-size: 65%; vertical-align: text-bottom; margin-left: 10px}
.headline-m{ font-size: 1.5em; margin-bottom: 1em}
.headline-s{ font-size: 1.3em; margin-bottom: .5em}
h2.brandname{ font-size: 1em; margin-bottom: 1em}
h2.h2gradient{ margin-bottom: 1.8em;}
h2.h2gradient span{ font-size: 1.6em; padding: 0 0 10px; background-image: linear-gradient(135deg, #cbe5ff 0%, #83baec 100%); background-repeat: no-repeat; background-size: 100% 3px; background-position: bottom; display: inline-block}
.outline{ margin-top: 1em}
.ruby{ font-size: .55em; letter-spacing: .1em; display: block; margin-top: 6px}


dl.dltopics{ flex-wrap: wrap}
dl.dltopics dt, dl.dltopics dd{ margin: 0 0 15px; border-bottom: 1px solid #e8e8e8; padding: 0 0 15px}
dl.dltopics dt{ width: 14%; padding-left: 1%}
dl.dltopics dd{ width: 85%}







/* flow */
ul.ulflow li{ margin: 0 auto 30px; width: 70%; padding: 2%; -webkit-border-radius: 4px; border-radius: 4px; position: relative}
ul.ulflow li:not(:last-child):after{ position: absolute; left: 50%}
ul.ulflow li:last-child:after { border: none}
ul.ulflow-b1 li { border: 1px solid #448ec0}
ul.ulflow-b1 li:not(:last-child):after { font: var(--fa-font-regular); content: "\f063"; color: #448ec0; bottom: -23px}

/* img＋テキスト2列組み */
.col2ph{ justify-content: space-between; align-items: flex-start}
.col2ph img{ width: 100%}
.col2ph1{ width: 66%/*; margin-bottom: 0; text-align: left*/}
.col2ph2{ width: 30%}
.col2ph3{ width: 78%; text-align: left!important}
.col2ph4{ width: 18%}





.videoinc{ margin: 20px 0 40px; text-align: center}
.videoinc iframe{ width: 769px; height: 433px}

/* 写真、アイコン列組
-----------------------------*/
.topcol2{ gap: 20px 5%; align-items: center}
.topcol2 .topcol2t{ width: 45%; line-height: 1.8}
.topcol2 .topcol2p{ width: 50%}
.topcol3, .topcol4{ gap: 50px 4%; flex-wrap :wrap}
.topcol3 li{ width: 30.6%}
.plead{ width: 95%; margin: 2.5% auto 0}
.topcol3 li p{ width: 95%; margin: 0 auto}
.topcol4 li{ width: 22%}
.topcol2 img, .topcol3 img, .topcol4 img{ width: 100%; margin: 0 auto}
.topcol3dic li img{ height: 100px; object-fit: cover}

/* accordion */
summary{ display: block} /* Specify anything other than "display:list-item" to remove the default triangle icon */
summary::-webkit-details-marker { display: none} /* Remove the default triangle icon displayed in Safari */
.summary_inner{ cursor: pointer; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px; background: #448ec0; color: #fff}
.ocicon{ display: block; position: relative; width: 24px; margin-left: 6px; flex-shrink: 0; transform-origin: center 43%; transition: transform 0.2s}
details.is-opened .ocicon{ transform: rotate(180deg)}
details{ margin-bottom: 3px}
.ocicon::before, .ocicon::after{ content: ""; position: absolute; display: block; width: 15px; height: 2px; background:#fff}
.ocicon::before{ left: 0; transform: rotate(45deg)}
.ocicon::after{ right: 0; transform: rotate(-45deg)}
.dcont{ overflow: hidden; background-color: #f7f9fb} /* If you set padding to the tag directly under "details", it will behave incorrectly, so do not specify it here. */
.dcont_inner{ padding: 20px; display: flex; flex-direction: column; gap: 16px}

.dictionarynote{ color: #666; margin-top: 5px}

/* breadcrumb, SNS*/
.main-header, .main-header-visual{ margin-bottom: 50px}
.mainvisual{ text-align: center}
.mainvisual img{ width: 100%; padding-top: 10px}
.main-footer{ padding: 10px 0}
ul.breadcrumbs{ margin: 30px 0;/*margin-bottom: 30px;*/ font-size: .80em; flex-wrap: wrap}
.main-footer ul.breadcrumbs{ margin-bottom: 0}
ul.breadcrumbs li:not(:first-child)::before{ content: "/"; margin: 0 8px; color: #666; font-weight: bold}
ul.breadcrumbs li a{ color: #666; text-decoration: none; border-bottom: 1px solid #ccc}
ul.breadcrumbs li a:hover{ border: none}
dl.relatedlks dt{ font-size: .8em; letter-spacing: .05em; color: #3473a8; margin-bottom: 10px}
dl.relatedlks dd{ margin: 0 0 10px}
.bottomsns{ justify-content: flex-end; gap: 10px; margin-bottom: 10px; font-size: 1.3em; line-height: 1!important}
.bottomsns a{ border: none; color: #717477}


/*
.topcol_icon1 .fa-store::before{ color: #ffd326 !important}
.topcol_icon1 .fa-cart-shopping::before{ color: #2dff02 !important}
*/
.topcol_icon2, .topcol_icon1{ gap: 60px 10%}
.topcol_icon1 li{ width: 100%; text-align: center; color: #fff}
.topcol_icon2 li{ width: 45%; text-align: center}
.topcol_icon1 i, .topcol_icon1 h2, .topcol_icon1 a{ color: #fff}
.topcol_icon1 a{ border: 1px solid #fff; padding: 10px 30px 10px 35px; border-radius: 4px; background: #0053a8}
.topcol_icon1 a::before, .topcol_icon1 a::after{ left: 10px}
.topcol_icon li a:hover{ opacity: .7; text-decoration: none;}

.labotopcol2{ gap: 5%; margin-top: 30px}
.labotopcol2 .labotopcol2t{ width: 50%; line-height: 1.8}
.labotopcol2 .labotopcol2p{ width: 45%; padding-bottom: 10px}
.labotopcol2 img{ width: 100%}

@media screen and (min-width: 1280px){.inner{ width: 1280px}}
@media screen and (min-width: 768px){.main-footer{ display: none}}
@media screen and (min-width: 2001px) { .mainvisual img{ width: 2000px}}
@media screen and (max-width: 600px) {
  h2.h2topss{ font-size: 1.7em}

}
@media screen and (max-width: 767px){
  main{ padding-top: 56px}
  article{ margin-bottom: 50px}
  .main-header{ padding: 30px 0 0}
  .main-header .breadcrumbs, .main-header-visual .breadcrumbs, .aboutwrap1 .breadcrumbs{ display: none}
  .mainvisual img{ padding: 0 0 20px}

  .img-center img, .img-left img{ width: 100%}
  .img-centers img{ width: auto}
  h1.headline-l{ font-size: 1.7em}
  h2.h2gradient span{ font-size: 1.3em}
  .hl-brand{ font-size: 1.1em}
  .bg1, .bg2{ padding: 40px 0}

  .labotopcol2{ flex-direction: column}
  .labotopcol2 .labotopcol2t, .labotopcol2 .labotopcol2p{ width: 100%}
  .frr{ flex-direction: column-reverse!important}

  .topcol2{ flex-direction: column}
  .topcol2 .topcol2t, .topcol2 .topcol2p, .topcol_icon2 li{ width: 100%}
  .topcol3{ gap: 30px 3%}
  .topcol3 li{ width: 48.5%}
  .topcol3 li p{ font-size: .95em}
  .topcol4{ gap: 30px 5%}
  .topcol4 li{ width: 47.5%}

  dl.dltopics{ flex-direction: column}
  dl.dltopics dt, dl.dltopics dd{ width: 100%}
  dl.dltopics dt{ border-bottom: none; padding: 0; margin: 0; font-size: .8em}

  ul.ulflow li { width: 95%}
  .col2ph{ flex-flow: column}
  .col2ph2{ width: 60%; margin: 0 auto 20px}
  .col2ph4{ width: 40%; margin: 0 auto 20px}
  .col2ph1, .col2ph3{ width: 100%}

  .videoinc { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden}
  .videoinc iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%}

}