@charset "utf-8";
@import url(/_jbassem/css/common.css);
:root {
    --teenager_color:#e45759;
}


#header {background-color: transparent;}
body.sub #header::before {display: none;}

.top_area:before {background: #efdbdd !important; }
#header:hover {background-color: #fff}
#container {background-color: #fffafa; background-image: url(/_jbteenager/images/sub/patten_dot.png); padding-top: 0;}
#content {font-family: var(--scdream_font); padding-top: 0; margin-top: -40px;}

.menu_wrap { background-image:none; background-color: #fffafa;}

#Menu3.localNavi{width:70%}
.localNavi > ul > li > a {font-family: var(--jalnan_font); text-shadow: 0px 0px 7px rgba(255,255,255,1);}
.localNavi > ul > li > a:before {background-color: var(--teenager_color);}
.localNavi > ul > li > ul > li > a {font-family: var(--scdream_font); font-weight: 500; ;}

.logo_wrap { flex: 0 1 240px; margin-top: 30px;}
.logo_wrap .logo h1 img {margin-top: 5px;}
.logo_wrap .logo h1 strong { font-size: 140%; font-weight: 700; font-family: var(--jalnan_font); }
.logo_wrap .logo h1 strong span{ font-size: 70%; line-height: 30px; font-weight: 500; font-family: var(--default_font); color:#444}

.mobile_logo h1 strong { font-family: var(--jalnan_font); }
.mobile_logo h1 strong span{font-size: 13px; font-family: var(--default_font);  font-weight: 500; color:#666}

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


.content_title .page_option > ul > li > button{ background-color: #857072; color:#fff; font-size: 15px;}

#content .snb .sub_title{ background-image: url(/_jbteenager/images/sub/sub_title_bg.jpg); font-family: var(--jalnan_font);  }
.content_title h2 {font-family: var(--jalnan_font);  }


.subMenu > ul > li { border: 1px solid #e2d3d4; } 
.subMenu .parents > li.active {border: 1px solid #e0787a; }

.childMenu ul li a {border: 1px solid #e2d3d4; ;}
.childMenu ul li.active a {  background: #fbf3f3; border: 1px solid #d1b5b5; }

.sub_visual { padding-bottom: 18%; background-color: #857072; padding-top: 195px; position: relative; background-image: url(/_jbteenager/images/sub/visual_bg.jpg); -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; background-position: top center; }

.wave_mask {background-color: #fffafa; background-image: url(/_jbteenager/images/sub/patten_dot.png); position: absolute;  overflow: hidden; width: 100%; height: 60%; bottom:-10px; 
-webkit-mask-image: url("/_jbteenager/images/main/wave.svg");
-webkit-mask-size:100%;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center bottom;

mask-image: url("/_jbteenager/images/main/wave.svg");
mask-size:100%;
mask-repeat:no-repeat;
mask-position:center bottom;
mask-border-outset: 2rem;
}

.visual_txt {font-family: var(--jalnan_font); font-size: 140%; color: #111; line-height: 40px; display: block; position: absolute; padding-top: 3%; padding-left: 17%;}
.visual_txt strong span{ font-size: 150%; color: var(--teenager_color);}



@media only screen and (max-width:1300px){
    .sub_visual {  padding-top: 100px; padding-bottom: 25%;  }

    .logo_wrap{ flex: 0 1 180px; margin-top: 0px; }
    .stickmenu .logo h1 strong {font-size: 130%;}
    .stickmenu .logo h1 strong span{ line-height: 18px; }
    .stickmenu .logo_wrap, .stickmenu.sticky .logo_wrap {    margin-top: 0px;}
    .stickmenu { background-color: transparent}
    
}

@media only screen and (max-width: 760px) {
    .content_title h2 {    margin-bottom: 10px;}
    .sub_visual {  padding-bottom: 220px  }
    .visual_txt {padding-top: 40px; padding-left: 5%; font-size: 100%; line-height: 25px;}

    #content {margin-top: -20px;}

}