@charset "utf-8";
/************************************************************************
 * filename : sub_common.css
 * description :subPage common style
 * date : 2017.08.17
************************************************************************/

/* sub common */
.header_btm .inner{width:1440px;}
.header_btm{background:rgba(255,255,255,.4) }
.m_nav_open .header_btm{background:#fff}
.header_btm .lnb li a{color:#fff;}
.dark .header_btm .lnb li a{color:#000}
.header_btm h1 a img.light,
.dark .header_btm h1 a img.dark{display: block;}
.m_nav_open .header_btm h1 a img.dark{display: block !important;}
.header_btm h1 a img.dark,
.dark .header_btm h1 a img.light{display: none;}
.m_nav_open .header_btm h1 a img.light{display: none !important;}
.mobile_menu_btn a{transition:.3s}
.mobile_menu_btn a span,
.dark .header_btm{background: #fff;}
.dark .mobile_menu_btn a span{background: #000;}


.footer_menu ul li{margin-left: 30px;}

.sub_visual{height: 420px;position: relative;width:100%;display: table;text-align: center}
.sub_visual_bg{position: absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;background-repeat: no-repeat;background-size:cover;background-position: center center;z-index: -1}
.sub_visual_text{display: table-cell;width:100%;vertical-align: middle;color:#fff;font-size:58px;font-weight: 600;letter-spacing: 5px}
.sub_visual_text strong{line-height: normal;letter-spacing: -1px;display: block;margin-bottom: 15px;}
.sub_visual_text .bar{height: 1px;width: 140px;background: #fff;}
.sub_visual_sub_text{line-height: 24px;font-size:16px;color:#fff;font-weight: 400;letter-spacing: -0.5px;margin-top: 20px;display: inline-block;border-bottom: 1px solid #fff;padding-bottom: 4px;}
.sub_visual_sub_text br.m{display: none}
.sub_menu{background: #494949;text-align: center;position: relative;z-index: 1;height: 50px;}
.sub_menu ul{border-bottom: 1px solid #626262;display:block;clear: both}
.sub_menu ul>li{float: left;width: 25%;position: relative}
.sub_menu ul>li>strong{display: block}
.sub_menu ul>li>strong.home img{margin-top:14px}
.sub_menu ul>li>strong.depth{background-repeat: no-repeat;background-image: url(/static_resources/images/junoacademy/sub/subMenu_arr_down.png);background-position:80% center;}
.sub_menu ul>li>strong.depth.open{background-image: url(/static_resources/images/junohair/sub/subMenu_arr_up.png);}
.sub_menu ul>li>strong a{display: block;color:#bebebf;height: 50px;line-height: 50px;box-sizing: border-box;border-right: 1px solid #626262;font-size:16px;border-bottom: 1px solid #626262;}
.sub_menu ul>li.cur>strong a{border-bottom: 5px solid #ed1c24;color:#fff}
.sub_menu ul>li:hover>strong a{color:#fff}
.sub_menu ul>li:first-child>strong a{border-left: 1px solid #626262;}
.sub_menu ul li dl{position: absolute;left:0;right:0;top:50px;display: none}
.sub_menu ul li dl a{display: block;font-size:16px;color:#bebebf;font-size:16px;height: 50px;line-height: 50px;background: #494949;border-left: 1px solid #626262;border-right: 1px solid #626262;border-bottom: 1px solid #626262;}
.sub_menu ul li dl dd:hover a{color:#fff}

.section_tit{text-align: center;margin:50px auto 0 auto; display: none}
.section_tit .tit{font-size:35px;color:#333;font-weight: 700;display: block;line-height: normal}
.section_content{overflow: hidden;position: relative;text-align: left;opacity: 0;filter: alpha(opacity=0);transition:.7s;transform: translateY(40px)}
.section_content.fadeInUp{opacity: 1;filter: alpha(opacity=100); transform: translate(0)}
br.m{display: none}

.location{text-align: right; margin-bottom: 20px;}
.location ul{overflow: hidden;display: inline-block;}
.location ul li{float: left;font-size:16px;color:#a7a5a6;line-height: 50px}
.location ul li.home{width: 20px;box-sizing: border-box;height: 50px;}
.location ul li.home img{width: 100%;padding-top: 16.5px;}
.location ul li.arr{margin:0 11px}
.location ul li.cur{color:#231f20;font-weight: 600}

/* mediaquery */
@media all and (max-width:1440px){
	.header_btm .inner{width:1150px}
	.footer_menu ul li{margin-left: 50px;}
}
@media all and (max-width:1150px){
	.footer_menu ul li{margin-left: 30px;}
	.header_btm .inner,
	.inner{width:1024px}
}
@media all and (max-width:1024px){
	#container{padding-top: 0;}
	.header_btm .inner,
	.inner{width:768px}
	.sub_menu ul>li>strong.depth{background-position: 140px center}
	.location ul li{font-size:15px}
	.section_tit{margin:30px auto 0 auto}
	#reservation .section_tit .bar{height: 40px;margin:20px auto}
}
@media all and (max-width:768px){
	.header_btm{background: #fff !important;}
	.header_btm h1 a img.dark{display: block !important;}
	.header_btm h1 a img.light{display: none !important;}
	.mobile_menu_btn a span{background: #000 !important;}

	.header_btm .inner,
	.inner{width:95%}
	.sub_visual{height: 200px;margin-top: 54px;}
	.sub_visual_text{font-size:30px;line-height: normal;padding-left: 5%;padding-right: 5%;}
	.sub_visual_sub_text {margin-top: 4px;font-size: 15px;line-height: 20px;padding-bottom: 1px}
	.sub_visual_sub_text br.m{display: block}
	.sub_menu{display: none}
	.section_tit{margin:35px auto 0 auto}
	.section_tit .tit{font-size:28px;}

	.section_content{word-break: keep-all;width:90%;margin-left:auto;margin-right:auto}
	.section_content br.p{display: none;}
	.section_content br.m{display: block;}

	.location ul li{font-size:13px;}
	.location ul li.arr{margin:0 8px}
	.location ul li.home img{width: 15px;margin-bottom: -1px;}

	.section_tit{margin:18px auto}
}