@charset "utf-8";
@import url(/_jbassem/css/common.css);

:root {
    --lan_Gradation:linear-gradient(90deg, #d3e1f9,#d3e1f9,#d3e1f9,#dbd2ea);
}

html, body {font-family:'Open Sans',Helvetica,'华文细黑',STXihei,'微软雅黑','Microsoft YaHei',Arial,sans-serif; font-weight:400;}

#container {padding-top: 221px;}
.stickmenu {border-top: 1px solid rgba(0,0,0,0.09);}
.stickmenu.sticky {border-top:none}
body.sub #header::before {display: none;}

.stickmenu .wrap_container {flex-wrap: wrap; justify-content: left;}
#Menu3.localNavi{width:100%}
.localNavi > ul > li > a {   line-height: 70px;  height: 70px; letter-spacing: -0.05em;}

.stickmenu .logo_wrap{display: none;margin:5px 0; }

.logo_wrap { flex: 0 1 auto; margin:25px auto; width:100%;}
.logo_wrap .logo h1 {justify-content: center;}
.logo_wrap .logo h1 img {margin-top: 5px;}
.logo_wrap .logo h1 strong{ font-size: 150%; font-weight: 700; }

.mobile_menu .logo h1 strong { font-size: 130%; }

.stickmenu .logo_wrap{display: none;}
.stickmenu.sticky .logo h1 strong {font-size: 140%}
.stickmenu.sticky .logo_wrap, .mobile_menu .logo_wrap {    margin-top: 4px;}
.stickmenu.sticky .logo h1 strong span {line-height: 18px; }

.menu_wrap { background-image:none;}



.sub_visual {background: var(--lan_Gradation); position: relative; overflow: hidden;}
.sub_visual::before {content: ''; position: absolute; left: 0; top:0; bottom:0; right: 0; background-image: url(/_jbjapanese/images/sub/sub_visual.png); background-repeat: no-repeat; background-position: left center; background-size: auto 100%;}
.sub_visual::after {content: ''; position: absolute; top:-250px; right: -300px; width: 663px; height: 660px; background-image: url(/_jbjapanese/images/main/patten01.png); background-repeat: no-repeat; background-position: left center; background-size: auto 100%;}

.sub_visual .wrap_container{position: relative; z-index: 1;}
.sub_visual .visual_txt{padding: 5% 0 5% 50%;}
.sub_visual .visual_txt strong{font-weight: 800; font-size: 220%; text-transform:uppercase; color:#222; padding-bottom: 20px; display: block;}
.sub_visual .visual_txt strong span{color: #0042af; }
.sub_visual .visual_txt p{font-weight: 500; font-size: 120%;}

.content_title .page_option { bottom: 40%;}


#footer .logo {display: inline-block; margin-bottom: 20px;}
#footer .logo h1 strong { color:#eee}
#footer {text-align: center; background-color: #2f343e;}

.top_nav, .top_nav > ul > li > a {font-family:'Roboto';}


@media only screen and (max-width:1300px){
    #container {padding-top: 100px;}
    .stickmenu {border-top:none}
    .logo_wrap{display: none}
    .stickmenu .logo_wrap{display: block}
    .logo_wrap{ flex: 0 1 180px; margin-top: 0px; }
    .stickmenu .logo h1 strong {font-size: 160%;}
    .stickmenu .logo h1 strong span{ line-height: 18px; }
    .stickmenu .logo_wrap, .stickmenu.sticky .logo_wrap {    margin-top: 0px;}
}
@media only screen and (max-width:1200px){
    .sub_visual {font-size: 90%;}
    .sub_visual::before {background-position: -150px center; }
    .sub_visual .visual_txt{padding: 50px 0 50px 50%;}
    .sub_visual .visual_txt p{ font-size: 90%;}
}




@media only screen and (max-width: 760px) {
    .content_title .page_option { bottom: auto; }
    .content_title h2 {font-size: 140%; margin-bottom:10px;}
    .stickmenu .logo h1 strong {font-size: 140%;}

}


@media only screen and (max-width:700px){
    .sub_visual {height: 150px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    .sub_visual::before {background-position: -300px center; }
    .sub_visual .visual_txt{text-align: center; padding: 0 50px;}
    .sub_visual .visual_txt strong {padding-bottom: 10px; font-size: 180%;}

}