@charset "utf-8";

.inner{height: 320rem; background: url('../img/sub/sub_vis.jpg') no-repeat top center / cover; text-align: center; color: #fff; padding-top: 136rem;}
.inner h2{font-size: 37rem; font-weight: 800; margin-bottom: 20rem;}


#snb{width: 250rem;}


/* .sub_wrap > .article > .top{display: flex; justify-content: space-between; align-items: center; height: 120rem;}
.sub_wrap > .article > .top h3{font-size: 32rem; font-weight: 400;  font-family: 'esamanru';} */

#snb h2{color: #fff; font-family: 'esamanru'; font-weight: 400; font-size: 28rem; background: #183770; display: flex; align-items: center; border-radius: 0 50rem 0 0; position: relative;}
#snb h2::before{position: absolute; content: ""; background: #183770; height: 100%; width: 250rem; left: -250rem; top: 0;}
#snb h2 span{position: relative;  padding-left:  40rem;}
#snb h2 span::before{position: absolute; content: ""; width: 7rem; height: 7rem; border-radius: 50rem; left: 10rem; top: 16rem; background: #fff;}

#snb .depth1{margin-top: 20rem;}

#snb .depth1 > li > a{display: block; border: 1px solid #e1e5f1; padding: 14rem 17rem; border-radius: 10rem; background: #f5f7fb; margin-bottom: 10rem; position: relative;}
#snb .depth1 > li > a.bef::before{position: absolute; content: ""; background: url('../img/sub/snb_plus.png') no-repeat center center / cover; width: 15px; height: 15px; right: 20rem; top: 21rem;}

#snb .depth1 > li > a.on::before{background-image: url('../img/sub/snb_arrow.png');}

#snb .depth1 > li > a.on{border: 2px solid #0b1f45; background: #fff; color: #0b1f45; font-weight: 700;}
#snb .depth2{display: none; margin: 20rem 13rem;}
#snb .depth2 > li > a{display: block; margin:  10rem 0; font-size: 16rem; position: relative; padding-left: 14rem;}
#snb .depth2 > li > a::before{position: absolute; content: ""; width: 4rem; height: 4rem; background: #9da7c2; border-radius: 50rem; left: 0; top: 10rem;}
#snb .depth2 > li > a.on{font-weight: 700; color: #073370; text-decoration: underline;}
#snb .depth2 > li > a.on::before{background: #073370;}

#snb  a[target="_blank"] span{display: inline-block; padding-right: 20rem; background: url('../img/layout/blank_bl.png') no-repeat right;}
#snb  .depth3 > li > a[target="_blank"] > span{background-image: url('../img/layout/blank_wh.png');}

.loca{display: flex; justify-content: center; align-items: center;} 
.loca a{display: block; font-weight: 300; color: #fff; font-size: 16rem; padding-left: 24rem; margin-left: 24rem; position: relative;}
.loca a.home{text-indent: -9999px; background: url('../img/sub/home.png') no-repeat center center; width: 19rem; padding-left: 0; padding-left: 0;}
.loca a::before{position: absolute; content: ""; background: url('../img/sub/loca_arrow.png') no-repeat; width: 5px; height: 9px; left: 0; top: 9px;}
/* .loca a:last-child:before{display: none;} */
.loca a.home{margin-left: 0;}
.loca a.home::before{display: none;}

#snb h2, .sub_wrap .right{height: 140rem;}
.sub_wrap{display: flex; justify-content: space-between;  margin-top: -140rem;}
.sub_wrap .right{display: flex; justify-content: space-between; align-items: center;}

.sub_wrap .loca_wrap h3{color: #fff; font-size: 32rem; font-weight: 400; font-family:'esamanru'; margin-top: 14rem;}
.sub_wrap > .article{width: calc(100% - 350rem);}

.util,.zoom{display: flex; align-items: center;}
.zoom{margin-right: 40rem;}
.zoom > a{display: block; text-indent: -9999px; background: #eff4f5; width: 28rem; height: 28rem; border-radius: 5rem; position: relative;}
.zoom > a::before{position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: url('../img/sub/util.png') no-repeat; background-position: -5px -8px;}
.zoom > a.minus::before{background-position: -29px -8px;}
.zoom > span{margin: 0 20rem;}

.share_wrap{position: relative;}
.sns_wrap{position: absolute; width: 45px; top: 56px; left: 0; background: #fff;border: 1px solid #323232; padding: 8rem 0; z-index: 100; border-radius: 14rem;}
.sns_wrap a{display: block; padding: 10rem; position: relative;font-size: 15rem; border-bottom: 1px dotted #ddd; text-indent: -9999px;}
.sns_wrap a:last-child{border-bottom: none;}
.sns_wrap a::before{position: absolute; content: ""; background: url('../img/sub/share_sns.png') no-repeat;width: 25px;height: 25px; left: 9px; top: 7px;}
.sns_wrap a.facebook::before{background-position-x: -25px;}
.sns_wrap a.twitter::before{background-position-x: -50px;}
.sns_wrap a.band::before{background-position-x: -75px;}

.util .share, .util .print{display: inline-block; position: relative;text-indent: -9999px; width: 45px; height: 45px;}
.util .share{margin-right: 14rem;}
.util .share::before, .util .print::before{position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background: url('../img/sub/util.png'); background-position: 5px -2px; border-radius: 14rem; border: 1px solid #fff;}
.util > a.print::before{background-position-x: -53px;}



@media all and (max-width: 1380px){
    #snb h2{font-size: 25rem;}
    .loca_wrap{flex-wrap: wrap;}
    .loca_wrap .loca{width: 100%; margin-bottom: 20rem;}
}
@media all and (max-width: 1250px){
    .inner{padding-left: 0; border-radius: 0;}
    #snb{display: none;}
    .sub_wrap > .article{width: 100%;}

}
@media all and (max-width: 950px){
    .inner{height: 260rem;}
}
@media all and (max-width: 600px){
    .zoom{margin-right: 20rem;}
    .zoom > span{margin: 0 10rem; font-size: 15rem;}
    .sub_wrap .loca_wrap h3{font-size: 28rem;}
}
@media all and (max-width: 340px){
    .zoom{display: none;}
}