@charset "utf-8";
@import url('components.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

html { height: -webkit-fill-available; }
body { min-height: 100vh; min-height: -webkit-fill-available; font-family: 'Roboto Condensed', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; }
a { text-decoration: none; }

#container { position: relative; }
.common_desc { font-size:1.8rem; margin-bottom:20px; }

/* header */
header .usability { background: #F0F0F0; display: flex; justify-content: flex-end; padding: 5px 40px; }
.usability .translation { font-size: 14px; line-height: 25px; color: #2b2b2b; padding: 0 5px; }
.usability .fontsize p { display: inline-block; font-size: 14px; line-height: 25px; color: #2b2b2b; padding: 0 5px; }
.usability .sitecolor p { display: inline-block; font-size: 14px; line-height: 25px; color: #2b2b2b; padding: 0 5px; }
.usability ul { display: inline-block; margin: 0 0 0 10px; white-space: nowrap; }
.usability li { display: inline-block; margin: 0 5px 0 0; white-space: nowrap; }
.usability li span, .usability li a { display: block; font-size: 14px; color: #2b2b2b; line-height: 25px; padding: 0 5px; background: #fff; cursor: pointer; }
.usability li span i, .usability li a i { color: #2b2b2b; }
.usability li span.colorN { background: #fff;}
.usability li span.colorB { background: #00f; border-color:#00d; color: #fff; }
.usability li span.colorY { background: #ff0; border-color:#dd0; }
.usability li span.colorK { background: #222; border-color:#000; color: #fff; }

body.normal { background: #fff; }
body.blue { background: #00f; }
body.blue * { color:#fff;}
body.yellow { background: #ff0; }
body.yellow * { color:#000;}
body.kuro { background: #000; }
body.kuro * { color:#fff; }

.common_link { text-decoration:underline; color:#026EB8;}
.common_link:hover { text-decoration:none;}


.logo { float: left; padding: 10px 40px; }
.logo a { display: block; }
.logo img { width: 288px; }
.logo { float: left; padding: 10px 40px; }
.subNav { width: calc( 100% - 400px ); float: right; }
.subNavInr01 { display: flex; justify-content: flex-end; padding: 10px 40px 10px 0; }
.subNavInr01 .english { padding: 0 40px 0 0; line-height: 32px; vertical-align: middle; }
.subNavInr01 .english a { display: inline-block; font-size: 1.6rem; line-height: 32px; vertical-align: middle; }
.subNavInr01 .english i { font-size: 20px; color: #6F6F6F; line-height: 20px; margin: 0 5px 0 0; vertical-align: middle; }
.subNavInr01 .searchBox { width: 360px; height:30px;}
.gsc-input-box { border: 1px solid #C1C1C1 !important; }
.gsib_a { padding: 4px 9px !important; }
.gsc-search-button-v2 { padding: 8px 27px !important; }
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus { border-color: #6F6F6F !important; background-color: #6F6F6F !important; }
form.gsc-search-box { margin-bottom: 0 !important; }
.subNavInr02 { display: flex; justify-content: flex-end; padding: 0 40px 0 0; }
.subNavInr02 li { margin: 0 0 0 10px; }
.subNavInr02 li a { display: block; font-size: 2.0rem; width: 300px; padding: 10px; border-radius: 4px 4px 0 0; background: #F0F0F0; color: #2B2B2B; text-align: center; }
.subNavInr02 li a span { vertical-align:baseline; }
.general .subNavInr02 .generalNav a { background: #026EB8; color: #fff; font-weight: 700; }
.subNavInr02 .generalNav a:hover { background: #026EB8; color: #fff; font-weight: 700; }
.general .navList.businessNav { display: none; }
.business .subNavInr02 .businessNav a { background: #6F6F6F; color: #fff; font-weight: 700; }
.subNavInr02 .businessNav a:hover { background: #6F6F6F; color: #fff; font-weight: 700; }
.general .subNavInr02 .generalNav a span,
.business .subNavInr02 .businessNav a span,
.subNavInr02 .generalNav a:hover span,
.subNavInr02 .businessNav a:hover span { color: #fff; font-weight: 700; }
.business .navList.generalNav { display: none; }


/* nav */
.nav-continr { transition: all 0.3s; }
.nav-continr .language_change { display:none; }
.general .globalNav { border-top: 2px solid #026EB8; border-bottom: 1px solid #026EB8; }
.business .globalNav { border-top: 2px solid #6F6F6F; border-bottom: 1px solid #6F6F6F; }
.navList { display: flex; flex-wrap: wrap; }
.navList > li { width: calc( 100% / 6 ); padding: 0; position: relative; }
.navList > li > a { position: relative; display: block; text-align: center; padding: 10px 0 0;}
.navList > li > .hvArea { position: relative; display: block; text-align: center; padding: 10px 0 0; }
.navList > li span { position: relative; display: inline-block; font-size: 16px; font-weight: 700; line-height: 30px; text-align: center; padding: 5px 0; }
.general .navList > li span::before,
.general .navList > li span::after { border-bottom: solid 5px #026EB8; bottom: 0; content: ""; display: block; position: absolute; transition: all .3s ease; -webkit-transition: all .3s ease; width: 0;}
.business .navList > li span::before,
.business .navList > li span::after { border-bottom: solid 5px #6F6F6F; bottom: 0; content: ""; display: block; position: absolute; transition: all .3s ease; -webkit-transition: all .3s ease; width: 0;}
.navList > li span::before { left: 50%; }
.navList > li span::after { right: 50%; }
.navList > li:hover { cursor: pointer; }
.navList > li:hover span::before,
.navList > li:hover span::after { width: 50%; }
.navList > li .icon { width: 35px; height: 35px; margin: 0 auto; /* transition: all 0.3s;*/ }
.general .navInr { position: absolute; top: 85px; right: 0; background: #026EB8; z-index: 888; padding: 0; width: 20em; }
.business .navInr { position: absolute; top: 85px; left: 0; background: #6F6F6F; z-index: 888; padding: 0; width: 20em; }
.navInr > li { border-bottom: 1px solid rgba(255,255,255,0.5); }
.general .navInr > li a { position: relative; display: block; text-decoration: none; transition: all 0.3s; }
.business .navInr > li a { position: relative; display: block; text-decoration: none; transition: all 0.3s; }
.navInr > li a p { display: block; font-size: 1.4em; font-weight: 700; color: #fff; text-align: left; padding: 10px; word-break:break-all; }
.general .navInr > li a:hover { background: #1382cf; }
.business .navInr > li a:hover { background: #898989; }
.navInr { display: none; }
.menuBox { display: none; }
#nav-close { display: none; } 
.nav-unshown { display:none; }
.globalNav .spShow { display: none; }

body.stick .header_nav { height: 115px; }
body.stick .subNavInr02 { position: fixed; top: 0; left: 0; width: 100%; padding: 0 10px; background: #fff; z-index: 999; }
body.stick .subNavInr02 li { margin: 0; width: 50%; padding: 0 10px 0; }
body.stick .subNavInr02 li a { font-size: 16px; line-height: 30px; width: 100%; padding: 0; border-radius: 5px 5px 0 0; }
body.stick .nav-continr { position: fixed; top: 30px; left: 0; width: 100%; background: #fff; z-index: 999; }
body.stick .nav-continr .navList > li .icon { width:25px; height: 25px; }
body.stick .nav-continr .navList > li span { line-height:20px; font-size:14px; }
body.stick .navInr { top:63px; }
body.stick .navList > li > a, body.stick .business .navList > li > .hvArea { padding-top:8px; }

/* banner */
.general .bannerCont { background: #F0F0F0; border-bottom: 1px solid #C1C1C1; }
.business .bannerCont { position: relative; background: #F0F0F0; border-bottom: 1px solid #C1C1C1;  border-top: 1px solid #6f6f6f; }
.business .bannerList:before { display: block; content: ''; width: 60px; height: 20px; background: url(/static/images/common/line_icon_g.svg) no-repeat center bottom; background-size: contain; position: absolute; left: 5vw; top: -20px; }
.bannerList { position: relative; max-width: 1200px; margin: 0 auto; padding: 50px 5vw 30px; display: flex; align-items: center; justify-content: flex-start; list-style: none; flex-wrap: wrap; }
.bannerList li { width: calc(( 100% - 60px ) / 4 ); margin: 0 20px 20px 0; }
.bannerList li:nth-child(4n) { margin-right: 0; }
.bannerList li a { display: block; }
.bannerList li img { width: 100%; }

.bannerCont2 { border-top: 1px solid #026EB8; background:#fff;}
.business .bannerCont2 { display:none;}
.bannerCont2 .bannerList2 { position: relative; max-width: 1200px; margin: 0 auto; padding: 50px 5vw; display: flex; align-items: center; justify-content: flex-start; list-style: none; flex-wrap: wrap;}
.general .bannerCont2 .bannerList2:before { display: block; content: ''; width: 60px; height: 20px; background: url(/static/images/common/line_icon_b.svg) no-repeat center bottom; background-size: contain; position: absolute; left: 5vw; top: -20px; }
.bannerCont2 .bannerList2 li { width:calc( ( 100% - 80px ) / 3 ); margin-right:40px;}
.bannerCont2 .bannerList2 li:nth-of-type(3n) { margin-right:0;}
.bannerCont2 .bannerList2 li:nth-of-type(n + 4) { margin-top:40px;}
.bannerCont2 .bannerList2 li img { max-width: 100%;}
.bannerCont2 .bannerList2 li a { transition:0.3s; display:block;}
.bannerCont2 .bannerList2 li a:hover { opacity:0.7;}

.banner_full { margin:40px 0; }
.banner_full a { display:block; }
.banner_full a img { max-width:100%;}

.banner_medium { width:700px; margin:0 auto; }
.banner_medium a img { max-width:100%; transition:0.2s}
.banner_medium a img:hover { opacity:0.7;}


.general .btnList li { width: calc(( 100% - 80px ) / 3 ); border: 1px solid #c1c1c1; border-radius: 4px; overflow: hidden; margin: 0 40px 0 0; }
.general .btnList li:last-child { margin-right: 0; }
.general .btnList li a { display: block; transition: all 0.3s; }
.general .btnList li a:hover { background: #026EB8; opacity: 0.8; }
.general .btnList li a p { position: relative; display: block; font-size: 1.8em; font-weight: 700; line-height: 30px; padding: 10px; text-align: center; }
.general .btnList li a p:before { position: absolute; top: 10px; right: 10px; color: #026EB8; font-weight: 900; content: "\f105"; transition: all 0.3s; }
.general .btnList li a:hover p { color: #fff; }
.general .btnList li a:hover p:before { color: #fff; }



/* footer */
.footerInr { padding: 50px 10vw; border-bottom: 1px solid #C1C1C1; background: url(/static/images/common/line_icon_lg.svg) no-repeat left bottom; background-size: 72vw 24vw; }
.footerInr .footCont { padding: 0 0 30px; }
.footerInr .prof { float: left; width: 50%; }
.footerInr .prof dt { font-size: 2.4em; line-height: 1.2; font-weight: 700; padding: 0 0 10px; }
.footerInr .prof dd { font-size: 1.6em; line-height: 2; }
.footerInr .usability { float: right; width: 50%; }
.footerInr .usability .fontsize { text-align: right; padding: 0 0 10px; }
.footerInr .usability .sitecolor { text-align: right; }
.footerInr .usability .fontsize p { width: 100px; text-align: left; }
.footerInr .usability .sitecolor p { width: 100px; text-align: left; }
.footerInr .usability ul { width: 140px; text-align: right; }
.footerInr .usability li span, .footerInr .usability li a { background: #F0F0F0; }
.footerInr .usability li span.colorN { background: #F0F0F0;}
.footerInr .usability li span.colorB { background: #00f; border-color:#00d; color: #fff; }
.footerInr .usability li span.colorY { background: #ff0; border-color:#dd0; }
.footerInr .usability li span.colorK { background: #222; border-color:#000; color: #fff; }

.general .categoryTop a { position: relative; display: block; width: 100%; text-align: center; font-size: 1.6em; font-weight: 700; line-height: 30px; padding: 10px 20px 10px 10px; border: 1px solid #026EB8; border-radius: 4px; box-sizing: border-box; transition: all 0.3s; }
.general .categoryTop a:before { position: absolute; top: 10px; right: 10px; color: #026EB8; font-weight: 900; content: "\f105"; transition: all 0.3s; }
.general .categoryTop a:hover { background: #026EB8; color: #fff; font-weight: 700; }
.general .categoryTop a:hover:before { color: #fff; }
.business .categoryTop a { position: relative; display: block; width: 100%; text-align: center; font-size: 1.6em; font-weight: 700; line-height: 30px; padding: 10px 20px 10px 10px; border: 1px solid #6F6F6F; border-radius: 4px; box-sizing: border-box; transition: all 0.3s; }
.business .categoryTop a:before { position: absolute; top: 10px; right: 10px; color: #6F6F6F; font-weight: 900; content: "\f105"; transition: all 0.3s; }
.business .categoryTop a:hover { background: #6F6F6F; color: #fff; font-weight: 700; }
.business .categoryTop a:hover:before { color: #fff; }

.sitemapCont { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.generalCont { width: calc(( 100% - 20px ) / 2 ); margin-right: 20px; }
.businessCont { width: calc(( 100% - 20px ) / 2 ); }
.siteList { padding: 20px 0 0; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.siteList .siteListInr { width: 50%; }
.siteList .siteListInr dl { padding: 0 0 10px; }
.siteList .siteListInr dl a { color: #6F6F6F; transition: all 0.3s; }
.siteList .siteListInr dl a:hover { text-decoration: underline; }
.siteList .siteListInr dt { font-size: 1.6em; color: #6F6F6F; padding: 0 0 8px; }
.siteList .siteListInr dt a i { font-size: 14px; color: #6F6F6F; margin-left: 5px; }
.siteList .siteListInr dd { font-size: 1.4em; color: #6F6F6F; padding: 0 0 8px; }
.siteList .siteListInr dd:before { content: '- '; }
.siteList .siteListInr dd.child { padding: 0 0 8px 16px; }

.copyCont { padding: 30px 5vw; }
.copyCont .footNav { float: left; }
.copyCont .footNav li { display: inline-block; padding: 0 30px 0 0; }
.copyCont .footNav li a { display: block; font-size: 1.4em; color: #6F6F6F; transition: all 0.3s; }
.copyCont .footNav li a:hover { text-decoration: underline; }
.copyCont .copyright { float: right; font-size: 1.4em; color: #6F6F6F; }

.general .pageTop { position: fixed; bottom: 5vw; right: 2vw; z-index: 99; }
.general .pageTop a { display: block; background: #026EB8; padding: 25px; border-radius: 50%; text-align: center; box-shadow: 3px 6px 12px rgba(0,0,0,0.3); transition: all 0.3s; }
.general .pageTop a:hover { opacity: 0.8; padding: 22px 25px 28px; box-shadow: 3px 6px 8px rgba(0,0,0,0.3); }
.general .pageTop a i { font-size: 16px; width: 20px; height: 20px; line-height: 20px; color: #fff; }
.business .pageTop { position: fixed; bottom: 5vw; right: 2vw; z-index: 99; }
.business .pageTop a { display: block; background: #6F6F6F; padding: 25px; border-radius: 50%; text-align: center; box-shadow: 3px 6px 12px rgba(0,0,0,0.3); transition: all 0.3s; }
.business .pageTop a:hover { opacity: 0.8; padding: 22px 25px 28px; box-shadow: 3px 6px 8px rgba(0,0,0,0.3); }
.business .pageTop a i { font-size: 16px; width: 20px; height: 20px; line-height: 20px; color: #fff; }

.pageTit { position: relative; }
.pageTit h1 { font-size: 3.2em; font-weight: 700; text-align: center; line-height: 50px; padding: 50px 0; color: #fff; }
.pagetitInr { background: rgba(43,43,43,0.2); background-size: cover; }
.breadCrumb { position: absolute; top: 10px; right: 10px; text-align: right; }
.breadCrumb li { display: inline-block; padding: 0 0 0 20px; }
.breadCrumb li:first-child { padding: 0; }
.breadCrumb li:after { display: inline-block; padding: 0 0 0 20px; content: '/'; font-size: 12px; line-height: 15px; color: #fff; }
.breadCrumb li:last-child:after { display: none; }
.breadCrumb li a { display: inline-block; }
.breadCrumb li span { display: inline-block; font-size: 12px; line-height: 15px; color: #fff; }
.breadCrumb li a span { text-decoration: underline; }

.content { padding: 50px 5vw; max-width: 1200px; margin: 0 auto; }

.general .accordionHeader { font-size: 2.8em; line-height: 50px; font-weight: 700; padding: 20px 0; border-top: 1px solid #026EB8; text-align: left; position: relative; z-index: +1; cursor: pointer; transition-duration: 0.2s; }
.general .accordionHeader:hover { opacity: 0.8; }
.general .accordionHeader .i_box { display: flex; justify-content: center; align-items: center; position: absolute; top: 20px; right: 0; width: 50px; height: 50px; border-radius: 4px; border: 1px solid #026EB8; box-sizing: border-box; transform-origin: center center; transition-duration: 0.2s; }
.general .accordionHeader .i_box .one_i { display: block; width: 20px; height: 20px; transform-origin: center center; transition-duration: 0.2s; position: relative; }
.general .accordionHeader.open .i_box .one_i { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.general .accordionHeader .i_box .one_i:after { display: flex; content: ''; background: #026EB8; width: 20px; height: 2px; position: absolute; top: 9px; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); transform-origin: center center; }
.general .accordionHeader .i_box .one_i:before { display: flex; content: ''; background: #026EB8; width: 2px; height: 20px; position: absolute; top: 0; left: 9px; -webkit-transform: rotate(0deg); transform: rotate(0deg); transform-origin: center center; }
.general .accordionHeader.open .i_box .one_i:before { content: none; }
.general .accordionHeader.open .i_box .one_i:after { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.general .accordionInner { display: none; padding: 0 0 50px; box-sizing: border-box; }
.general .accordionHeader.open ~ .accordionInner { display: block; }
.business .accordionHeader { font-size: 2.8em; line-height: 50px; font-weight: 700; padding: 20px 0; border-top: 1px solid #6F6F6F; text-align: left; position: relative; z-index: +1; cursor: pointer; transition-duration: 0.2s; }
.business .accordionHeader:hover { opacity: 0.8; }
.business .accordionHeader .i_box { display: flex; justify-content: center; align-items: center; position: absolute; top: 20px; right: 0; width: 50px; height: 50px; border-radius: 4px; border: 1px solid #6F6F6F; box-sizing: border-box; transform-origin: center center; transition-duration: 0.2s; }
.business .accordionHeader .i_box .one_i { display: block; width: 20px; height: 20px; transform-origin: center center; transition-duration: 0.2s; position: relative; }
.business .accordionHeader.open .i_box .one_i { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.business .accordionHeader .i_box .one_i:after { display: flex; content: ''; background: #6F6F6F; width: 20px; height: 2px; position: absolute; top: 9px; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); transform-origin: center center; }
.business .accordionHeader .i_box .one_i:before { display: flex; content: ''; background: #6F6F6F; width: 2px; height: 20px; position: absolute; top: 0; left: 9px; -webkit-transform: rotate(0deg); transform: rotate(0deg); transform-origin: center center; }
.business .accordionHeader.open .i_box .one_i:before { content: none; }
.business .accordionHeader.open .i_box .one_i:after { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.business .accordionInner { display: none; padding: 0 0 50px; box-sizing: border-box; }
.business .accordionHeader.open ~ .accordionInner { display: block; }

.dataTable { border-collapse:collapse; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; width: 100%; }
.dataTable th.lv03 { text-align: center; background: #ccc; vertical-align: middle; }
.dataTable th.lv02 { text-align: center; background: #DEDEDE; vertical-align: middle; }
.dataTable th { font-size: 1.6em; font-weight: 700; line-height: 1.75; text-align: left; background: #F0F0F0; border-top: 1px solid #ccc; border-right: 1px solid #ccc; vertical-align: top; padding: 10px; }
.dataTable td { font-size: 1.6em; line-height: 1.75; text-align: left; border-top: 1px solid #ccc; border-right: 1px solid #ccc; vertical-align: middle; padding: 10px; }

.headline03 { position: relative; font-size: 2.4em; line-height: 30px; padding: 0 0 0 15px; margin: 0 auto 20px; }
.general .headline03 { border-left: 5px solid #026EB8; }
.business .headline03 { border-left: 5px solid #6F6F6F; }
.headline03 span { display: inline-block; width: 30px; height: 30px; line-height: 30px; border: 1px solid #e60012; border-radius: 50%; color: #e60012; font-weight: 700; margin: 0 5px; text-align: center; }

.general .headline04 { font-size: 2.0em; line-height: 1.2; padding: 0 0 10px; margin: 0 auto; color: #026EB8; }
.business .headline04 { font-size: 2.0em; line-height: 1.2; padding: 0 0 10px; margin: 0 auto; color: #6F6F6F; }

strong { font-weight: 700; }


.en * { word-break:break-word; }
.en .logo img { width: 168px; }
.en  .navInr { width: 30em; }
.anchor_point { display:block; padding-top:80px; margin-top:-80px; }



/* ───────────────────────────────────────────────────────────────────────────
 1200px以下の動作
─────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width:1200px){
  .subNavInr02 li a { font-size: 1.8rem; width: 250px; }
  .footerInr { padding: 60px 5vw 80px; }
  .breadCrumb li { padding: 0 0 0 15px; }
  .breadCrumb li:after { padding: 0 0 0 15px; }

.banner_medium { width:80%;}

}

/* ───────────────────────────────────────────────────────────────────────────
 1023px以下の動作
─────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width:1023px){
  header .usability { padding: 5px 20px; display: block; text-align: center; }

  .usability .translation { display: block; font-size: 13px; text-align: center; }
  .usability .fontsize { display: inline-block; }
  .usability .sitecolor { display: inline-block; }
  .logo { padding: 10px 0 10px 20px; }
  .logo img { width: 216px; }
  .en .logo img { width: auto; height: 58px; }

  .nav-continr .language_change { display:block; font-size:1.6em; margin-bottom: 20px;}
  .nav-continr .language_change i { margin-right:5px;}

  .subNavInr01, body.stick .subNavInr02 { display:none;}
  .subNavInr02 { padding: 0 10px 0 0; height: 80px; align-items:flex-end;}
  .subNavInr02 li { margin-left: 5px; }
  .subNavInr02 li a {font-size: 1.6rem; width: 200px; padding: 8px; }

  .general .menuBox { display: block; width: 60px; height: 60px; float: right; position: relative; z-index: 9999; background: #026EB8; }
  .business .menuBox { display: block; width: 60px; height: 60px; float: right; position: relative; z-index: 9999; background: #6F6F6F; }
  .menuBox:hover { cursor: pointer; }
  .menuBtn { display: block; position: absolute; top: 29px; right: 15px; width: 30px; height: 2px; background: #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
  .menuBtn:before { content: ''; position: absolute; width: 30px; height: 2px; background: #fff; top: -10px; right: 0; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
  .menuBtn:after { content: ''; position: absolute; width: 30px; height: 2px; background: #fff; bottom: -10px; right: 0; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
  .menuBtn.active { background: transparent; }
  .menuBtn.active:before { -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); top: 0; right: 0; }
  .menuBtn.active:after { -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); bottom: 0; right: 0; }
  .header_nav { display: block; padding: 0; position: fixed; top: 0; right: 0; z-index: 888; }
  #nav-content { display: block; position: absolute; width: 400px; height: 100vh; top: 0; right: 0; padding: 0; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; transition: .3s ease-in-out; -webkit-transform: translateX(120%); transform: translateX(120%); background: #fff; z-index: 8888; }
  .nav-continr { display: block; width: 100%; height: 100%; overflow: scroll; padding: 60px 3vw; }
  #nav-input:checked ~ #nav-content { -webkit-transform: translateX(0); transform: translateX(0); }
  #nav-input:checked ~ .menuCover { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 8887; }
  #nav-input:checked ~ .menuCover .menuCoverLabel { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 8887; background: rgba(3,3,3,.5); display: block; cursor: pointer; }
  .globalNav .spShow { display: block; }
  .navList { display: block; }
  .navList > li .icon { display: inline-block; padding: 10px 5px; width: 35px; height: 45px; }
  .navList > li .icon img { width: 25px; height: 25px; }
  .navList > li > a { padding: 0; text-align: left; }
  .navList > li > .hvArea { padding: 0; text-align: left; }
  .general .navInr { display: block; position: static; padding: 0; width: 100%; }
  .business .navInr { display: block; position: static; padding: 0; width: 100%; }
  .navInr > li { float: none; width: 100%; padding: 0; border-top: 1px solid #DEDEDE; }
  .navInr > li a .thumb { display: none; }
  .generalNav.navList > li { width: 100%; border-bottom: 1px solid #026EB8; }
  .generalNav.navList > li span { display: inline-block; padding: 10px 5px; font-size: 1.5em; text-align: left; color: #026EB8; }
  .generalNav.navList a { position: relative; }
  .generalNav.navList a:after { line-height: 1; display: block; content: ''; width: 6px; height: 10px; position: absolute; top: 17px; right: 10px; }
  .generalNav.navList a:after { background: url(/static/images/common/arrow_right_b.svg); background-size: cover; }
  .generalNav .navInr > li a p { position: static; background: transparent; font-size: 1.5em; line-height: 25px; font-weight: 500; padding: 10px 10px 10px 20px; text-align: left; color: #026EB8; }
  .general .navInr { background: #fff; }
  .general .globalNav { border-top: none; border-bottom: none; padding: 0; border-top: 1px solid #026EB8; }
  .generalNavTit { border-bottom: 1px solid #026EB8; }
  .generalNavTit a { display: block; font-size: 1.6em; line-height: 25px; font-weight: 700; padding: 10px 5px; text-align: left; color: #026EB8; position: relative; }
  .generalNavTit a:after { line-height: 1; display: block; content: ''; width: 6px; height: 10px; position: absolute; top: 17px; right: 10px; }
  .generalNavTit a:after { background: url(/static/images/common/arrow_right_b.svg); background-size: cover; }
  .general .navList > li span::before, .general .navList > li span::after { display: none; }
  .general .navList.businessNav { display: block; }
  .businessNav.navList > li { width: 100%; border-bottom: 1px solid #6F6F6F; }
  .businessNav.navList > li span { display: inline-block; padding: 10px 5px; font-size: 1.5em; text-align: left; color: #6F6F6F; }
  .businessNav.navList a { position: relative; }
  .businessNav.navList a:after { line-height: 1; display: block; content: ''; width: 6px; height: 10px; position: absolute; top: 17px; right: 10px; }
  .businessNav.navList a:after { background: url(/static/images/common/arrow_right_g.svg); background-size: cover; }
  .businessNav .navInr > li a p { position: static; background: transparent; font-size: 1.5em; line-height: 25px; font-weight: 500; padding: 10px 10px 10px 20px; text-align: left; color: #6F6F6F; }
  .business .navInr { background: #fff; }
  .business .globalNav { border-top: none; border-bottom: none; padding: 0; border-top: 1px solid #6F6F6F; }
  .businessNavTit { border-bottom: 1px solid #6F6F6F; }
  .businessNavTit a { display: block; font-size: 1.6em; line-height: 25px; font-weight: 700; padding: 10px 5px; text-align: left; color: #6F6F6F; position: relative; }
  .businessNavTit a:after { line-height: 1; display: block; content: ''; width: 6px; height: 10px; position: absolute; top: 17px; right: 10px; }
  .businessNavTit a:after { background: url(/static/images/common/arrow_right_g.svg); background-size: cover; }
  .business .navList > li span::before, .business .navList > li span::after { display: none; }
  .business .navList.generalNav { display: block; }
  .general .navInr > li a:hover { background: transparent; }
  .business .navInr > li a:hover { background: transparent; }
  .footerInr { padding: 50px 5vw; }
  .footerInr .usability { text-align: right; }
  .footerInr .prof dt { font-size: 2.0em; }
  .footerInr .prof dd { font-size: 1.4em; }
  .footerInr .footCont { padding: 0 0 40px; }
  .siteList .siteListInr dt { font-size: 1.5em; }
  .siteList .siteListInr dd { font-size: 1.3em; }
  .copyCont .footNav li a { font-size: 1.3em; }
  .copyCont .copyright { font-size: 1.3em; }
  .general .pageTop { bottom: 6vw; }
  .general .pageTop a { padding: 20px; }
  .general .pageTop a:hover { padding: 17px 20px 23px; }
  .business .pageTop { bottom: 6vw; }
  .business .pageTop a { padding: 20px; }
  .business .pageTop a:hover { padding: 17px 20px 23px; }
  .bannerList { padding: 40px 20px 30px; }
  .bannerList li { width: calc(( 100% - 30px ) / 4 ); margin: 0 10px 10px 0; }
  .breadCrumb li { padding: 0 0 0 10px; }
  .breadCrumb li:after { padding: 0 0 0 10px; }
  .general .accordionHeader { font-size: 2.4em; }
  .business .accordionHeader { font-size: 2.4em; }
  .headline03 { font-size: 2.0em; margin: 0 0 15px; }
  .general .headline04 { font-size: 1.8em; }

  .bannerCont2 .bannerList2 { padding:40px 5vw;}
  .bannerCont2 .bannerList2 li { width:calc( ( 100% - 20px ) / 3 ); margin-right:10px;}

}

/* ───────────────────────────────────────────────────────────────────────────
 767px以下の動作
─────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width:767px){
  header .usability { padding: 0; }
  .usability .translation { font-size: 10px; line-height: 15px; padding: 5px 70px 5px 5vw; text-align: left; }
  header .usability .fontsize { display: none; }
  header .usability .sitecolor { display: none; }
  .logo { padding: 10px 0 10px 15px; }
  .logo img { width: 144px; }
  .en .logo img { width: auto; height: 40px; }
  .subNav { width:auto;}
  .subNavInr02 { padding: 0 70px 0 0; height: 60px;}
  .subNavInr02 li a { font-size: 13px; width: 100px; padding: 12px 8px; }

  #nav-content { width: 100vw; }
  .nav-continr { padding: 60px 5vw; }
  .bannerList { }
  .bannerList li { width: calc( ( 100% - 10px ) / 2 ); margin: 0 10px 10px 0; }
  .bannerList li:nth-of-type(2n) { margin-right:0;}
  .banner_full { margin:20px 0; }

  .footerInr .prof { float: none; width: 100%; }
  .footerInr .prof dt { font-size: 2.4em; text-align: center; }
  .footerInr .prof dd { font-size: 1.6em; text-align: center; }
  .footerInr .usability { float: none; width: 100%; text-align: center; padding: 30px 0 0; }
  .sitemapCont { display: block; }
  .generalCont { width: 100%; margin-right: 0; }
  .businessCont { width: 100%; }
  .siteList { display: none; }
  .categoryTop { margin: 0 0 10px; }
  .copyCont .footNav { float: none; text-align: center; padding: 0 0 20px; }
  .copyCont .footNav li a { font-size: 1.4em; }
  .copyCont .copyright { float: none; text-align: center; font-size: 1.4em; }
  .general .pageTop { right: 5vw; }
  .general .pageTop a { padding: 15px; }
  .general .pageTop a:hover { padding: 15px; }
  .business .pageTop { right: 5vw; }
  .business .pageTop a { padding: 15px; }
  .business .pageTop a:hover { padding: 15px; }
  .content { padding: 40px 5vw; }
  .general .accordionHeader { font-size: 2.0em; line-height: 35px; padding: 20px 50px 20px 0; }
  .general .accordionHeader .i_box { width: 45px; height: 45px; top: 15px; }
  .general .accordionHeader .i_box .one_i { width: 15px; height: 15px; }
  .general .accordionHeader .i_box .one_i:after { width: 15px; top: 7px; }
  .general .accordionHeader .i_box .one_i:before { height: 15px; left: 7px; }
  .general .accordionInner { padding: 0 0 40px; }
  .business .accordionHeader { font-size: 2.0em; line-height: 35px; padding: 20px 50px 20px 0; }
  .business .accordionHeader .i_box { width: 45px; height: 45px; top: 15px; }
  .business .accordionHeader .i_box .one_i { width: 15px; height: 15px; }
  .business .accordionHeader .i_box .one_i:after { width: 15px; top: 7px; }
  .business .accordionHeader .i_box .one_i:before { height: 15px; left: 7px; }
  .business .accordionInner { padding: 0 0 40px; }
  .headline03 { font-size: 1.8em; }
  .dataTable th.lv02 { font-size: 1.4em; padding: 10px 5px; }
  .dataTable th { font-size: 1.4em; padding: 10px 5px; }
  .dataTable td { font-size: 1.4em; padding: 10px 5px; }

  .bannerCont2 .bannerList2 { display:block;}
  .bannerCont2 .bannerList2 li { width:auto; margin-right:0;}
  .bannerCont2 .bannerList2 li + li { margin-top: 10px;}

}


/* ───────────────────────────────────────────────────────────────────────────
 480px以下の動作
─────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width:480px){
  .subNavInr02 li a { font-size:11px; width: 60px; padding:10px 0;}
  .subNavInr02 li a span { display:block; line-height:1; text-align: center;}
}