@charset "utf-8";

.header .inner,
#footer .inner{position:relative; max-width: var(--width-inner); padding: 0 50px; margin: 0 auto; box-sizing: content-box;}


#subVisual{color: #fff; text-align: center; padding: 220px 0 70px; line-height: 1.15; display: none; position: relative;}
#subVisual .bg{background: url('../img/common/sub1.jpg') center center no-repeat; background-size:cover;  position: absolute; left: 0; top:0; width: 100%; height: 100%}
#subT{font-size: 44px; position: relative; z-index: 1}
#location{display: flex; justify-content:center; margin: 25px 0 -10px;}
#location > li{position: relative; padding: 0 25px}
#location a{display: block;}
#location .dep{position: absolute; left: 0; top:100%; width: 100%; min-width: 158px; text-align: left; background: #fff; color: #333; border:1px solid #ccc; z-index: 9}
#location > li > a{padding: 10px 40px 10px 0; position: relative;}
/* #location > li > a:after{position: absolute; right: 0; top:50%;    display: block; width: 7px; height: 7px; border-top: 1px solid #fff; border-left: 1px solid #fff; transform: translateY(-50%) rotate(-135deg); vertical-align: middle; content: ''; margin-top: -3px;} */
#location > li:not(:last-child):after{position: absolute; right: 0; top:50%; width: 1px; height: 10px; content: ''; margin-top: -5px; background: #fff}
#location .home{padding: 10px 40px 10px 0; background: url('../img/common/ico-home.png') left center no-repeat; display: block; white-space: nowrap; overflow: hidden; text-indent: -999px}

#location .dep{display: none;}
#location .dep li:not(:last-child){border-bottom: 1px solid #ccc;}
#location .dep a{padding: 10px 25px}
#location .dep a:hover,#location .dep a:focus{background: #f1f1f1}

#subPage{display: block; max-width:1920px; margin: 0 auto; padding: 100px 0 100px}
#leftMenu{width: 240px; margin-right: 80px; display: none; color: #444; flex-shrink: 0;}
#leftMenu .top{background: var(--navy); color: #fff; line-height: 1.15; font-weight: 700; text-align: left; padding: 50px 10px 45px; text-align: center;}
#leftMenu .eng{color: #5b6b86; display: block;margin-top: 10px;}
#leftMenu .t{font-size: 1.375em; letter-spacing: 0;}
#leftMenu .dep > li{border-bottom: 1px solid var(--ddd)}
#leftMenu .dep a{display: block; padding: 20px; position: relative;}
#leftMenu .dep .active a{color: var(--navy); background: #eee; font-weight: 700; word-break: keep-all;}

/* #leftMenu .dep .active a:after {background: var(--navy);} */
#leftMenu .dep .active a:after{width: 10px; height: 2px; top:50%; margin-top: -1px; content: ''; position: absolute; right: 20px}
#pageStart{flex:1;}

.sub1 #subVisual,.sub2 #subVisual,.sub3 #subVisual,.sub4 #subVisual,
.sub1 #leftMenu,.sub2 #leftMenu,.sub3 #leftMenu,.sub4 #leftMenu{display: block;}
.sub1 #subPage,.sub2 #subPage,.sub3 #subPage,.sub4 #subPage{display: flex; padding: 50px 80px 100px;}

/* sub_contents */
.sub_contents.sub5,
.sub_contents.sub6{padding-top:150px;}
.sub_contents.sub5 #subPage,
.sub_contents.sub6 #subPage{padding-top:100px;}

/* mypage */
.mypage_renew{margin-top:48px;}

.bg-black{background: #333 !important; color: #fff}
.bg-navy{background: var(--navy) !important; color: #fff}
.bg-navy_r{border:1px solid var(--navy); color: var(--navy); background: #fff}
.bg-navy2{background: var(--blue3) !important; color: #fff}
.bg-black_r{background: #fff; border:1px solid #ddd; color: #333}
.bg-grey{background: #eee !important; color: #333}
.bg-orange{background: var(--orange) !important; color: #fff}
.bg-blue{background-color: var(--blue) !important; color: #fff}
.bg-blue_r{border:1px solid var(--blue) !important; color: var(--blue)}
.bg-light{background: #fbfbfb; color: #333; border-radius:3px; border:1px solid #ddd}
.bg-black6{background: #666 !important; color: #fff}
.bg-black6.check {background: #00b4eb !important;}
.bg-white{background: #fff !important}

.color-red{color: #be3333}
.color-blue{color:var(--blue)}
.color-blue2{color:var(--blue2)}
.color-black{color: #333}
.color-white{color: #fff !important}
.color-link{color: #0018ff; word-break:break-all}
.color-link:hover,.color-link:focus{text-decoration: underline;}
.color-black6{color: #666}
.color-orange{color: #FA9819}

/* footer */
#footer{background: #010101; font-family: var(--font-aggro); font-size: 1rem; font-weight:300; color: #fff;}
#footer .top .inner,
#footer .bot .inner {display: flex; align-items:center; flex-wrap:wrap;}
#footer .bot .inner {align-items:flex-start; }

#footer .top {padding: 36px 0; }
#footer .link {flex:1; min-width:0;}
#footer .link > *{position: relative}
#footer .link > *:not(:last-child){margin-right: 14px; padding-right: 15px;}
#footer .link > *:not(:last-child):after{content: ''; width: 1px; height: 12px; background: #64758D; content: ''; right: 0; top:50%; margin-top: -6px; position: absolute;}

#footer .f-sns{display: flex}
#footer .f-sns a{width: 28px; height: 28px; white-space: nowrap; overflow: hidden; text-indent: -999px; background: url('') center center no-repeat;}
#footer .f-sns .f{background-image: url('../img/common/f-f.png')}
#footer .f-sns .i{background-image: url('../img/common/f-i.png')}
#footer .f-sns .b{background-image: url('../img/common/f-b.png')}
#footer .f-sns .y{background-image: url('../img/common/f-y.png')}
#footer .f-sns .k{background-image: url('../img/common/f-k.png')}
#footer .f-sns .in{background-image: url('../img/common/f-in.png')}
#footer .f-sns a:not(:first-child){margin-left: 20px;}

#footer .bot {padding:36px 0 63px; border-top: 1px solid rgba(255, 255, 255, 0.30); }
#footer .logo{margin-right:48px;}
#footer .info{flex:1; min-width:0; margin-right:38px;}
#footer .add{display:flex; flex-wrap:wrap; font-weight:300;}
#footer .add span{position: relative; }
#footer .add span:not(:last-child){margin-right: 10px; padding-right: 13px;}
#footer .add span:not(:last-child):after{content: ''; width: 3px; height: 3px; background: #838a92; content: ''; border-radius:50%; right: 0; top:50%; margin-top: -1px; position: absolute;}
#footer .copy{margin-top: 20px; font-size: 1rem; }

#footer .etc{display: flex; gap:10px; }
#footer .etc > *{display: flex; align-items: center; width: 196px; height: 55px; background: url('') 23px center no-repeat; padding:0 20px 0 51px;border: 1px solid #535c66; border-radius: 5px;}
#footer .etc > *.e{background-image: url('../img/common/foot-e.png')}
#footer .etc > *.d{background-image: url('../img/common/foot-d.png')}

#goTop{width: 100px; height: 105px; border:1px solid #838a92; border-top: 0; border-bottom: 0; color: inherit; font-size: 14px; font-weight: 500;}
#goTop:before{display: block; width: 10px; height: 10px; border-top: 2px solid #838a92; border-left: 2px solid #838a92; transform: rotate(45deg); vertical-align: middle; content: ''; margin: 0 auto 1px;}

.scroll-custom::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scroll-custom::-webkit-scrollbar-track {
    background-color: #ddd;
    border-radius: 5px;
}
.scroll-custom::-webkit-scrollbar-thumb {
    background-color: #878787;
    border-radius: 5px;
}

body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
body::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,.5);
    border-radius: 5px;
    display: none;
}
body::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.8);
    border-radius: 5px;
}

.inner{max-width:1440px; margin: 0 auto;}
.inner-f{max-width:100%; padding:0;}

/* header */
.header{position: relative;}
.allmenu_w{position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding-top: 150px; display: none; z-index: 999; background-color: rgba(38, 18, 0, 0.9); }

.allmenu_w .flex{padding-top: 50px;}
.allmenu_w .flex a{font-family: var(--font-aggro); font-size: 20px; }

.allmenu_w .flex > li{display:flex; padding: 24px 0; }
.allmenu_w .flex > li > a{position:relative; flex:none; width:200px; color: #fff; font-weight: 500; line-height: 1.3;}
.allmenu_w .flex > li > a:hover,
.allmenu_w .flex > li > a:focus{text-decoration:underline; text-underline-offset: 10px;}
.allmenu_w .dep{ display:flex; flex-wrap:wrap; gap:40px 20px; width:100%;color: #9fa3ad;}
.allmenu_w .dep > li{ position: relative; width:270px; font-weight:300;}
.allmenu_w .dep a:hover,
.allmenu_w .dep a:focus{color: #fff;}

.f14{font-size: 14px;}