@charset "utf-8";
@media screen and (max-width: 767px) {
/*
============================================================
啓明舎夏期講習コンテンツ　スマホ上書き
============================================================
*/
.pc{display: none;}
.tb{display: none;}
.sp{display: block;}

	
/* ---------------------------------------------------------
■ 動く背景
--------------------------------------------------------- */
.bg_pattern{
	animation: none;
}

.bg_pattern img{
	animation: none;
}

/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */
#page-top {
	display: none;
}
	
/* ---------------------------------------------------------
■ お問い合わせ
--------------------------------------------------------- */
	.sp_apply{
		display: block;
		position: fixed;
		top:20px;
		right:80px;
		width:140px;
		z-index: 20;
	}
	.sp_apply a{
		display: inline-block;
		width: 100%;
		height: 100%;
		color: #fff;
		font-size: 15px;
		background: #21ade5;
		border-radius: 3px;
		padding: 8px 0;
		filter: drop-shadow(2px 2px 5px rgba(0,0,0,.15));
	}
	.sp_apply a::after {
		content: "";
		position: absolute;
		right: 15px;
		width: 6px;
		height: 6px;
  		top: 50%;
  		transform: translateY(-50%) rotate(-45deg);
  		border-right: 2px solid #fff;
  		border-bottom: 2px solid #fff;
	}
	
	
	
/* ---------------------------------------------------------
■ MVエリア
--------------------------------------------------------- */
#logo.textlogo{
	line-height: 0;
	padding:50px 0 0;
}
#logo.textlogo img{
	width:100%;
}

	
	
/* ---------------------------------------------------------
■ トップボタンエリア
--------------------------------------------------------- */
.top_btn_area{
	width: 100%;
	margin: auto;
	padding:30px 0;
}
	
.top_btn_area {
	width: 100%;
	min-width: 480px;
}
	
.top_btn_wrap{
	width: 80%;
	min-width: 480px;
}

.top_btn_wrap span{
	display: block;	
}
	
.top_btn_wrap.apply a{
		width: 80%;
		font-size: 20px;
	}
	
.top_btn_wrap.fst a{
	width: calc((96% - 57px) / 3);
	font-size: 16px;
	letter-spacing:-0.04em;
	padding-right: 15px;
}
.top_btn_wrap.scd a{
	font-size: 18px;
	width: calc((96% - 18px) / 3);
}

.top_btn_wrap a.s_start{
	margin-left: 0;
}
.top_btn_wrap a.s_last{
	margin-right: 0;
}
.top_btn_wrap.scd .tit{
  font-size: 24px;
}
/* ---------------------------------------------------------
■ 公開説明会
--------------------------------------------------------- */
#open {
    padding: 4% 0 0; 
}

#open:before {
    height: 10%;
}

#open:after {
    height: 4%;
    bottom: -4%;
}    
    
    
#open .left,#open .right{
    float: none;
    width: 90%;
    margin: 0 auto;
}
   
#open .open_tx .right img:last-child{
    margin: 20px auto 0;
    max-width: none;
}
  
.note{
  width: 95%;
  margin: auto;
  font-size: 100%;
}

/* ---------------------------------------------------------
■ リード
--------------------------------------------------------- */
	
.lead_banner_area{

}
.lead_banner-oricon{

}
.lead_banner-ambassador{
	padding:0;
}
	
	
	
#lead .tx .right{
	padding: 10px 0 0;
}
	
#lead .tx .right ul li{
	float: none;
	width: 100%;
}
	
#lead .tx .right img{
	width: 60%;
}
	
#lead .tx .right img.img_tx{
	margin-top: 0;
	float: none;
}

/* ---------------------------------------------------------
■ 教師紹介
--------------------------------------------------------- */

#teacher_area{
	width:100%;
}
	
ul.teacher-slider{
	width: 100%;
}
	
ul.teacher-slider li a:hover img{
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}
/* ---------------------------------------------------------
■ 夏期講習タイトル
--------------------------------------------------------- */
.summer {
	margin-bottom: 0px;
}
	
.summer .contents{
	margin: 0 auto 20px;
}

.summer_nav {
	position: static;
}
	
/* ---------------------------------------------------------
■ 学年のリード
--------------------------------------------------------- */
.s_lead {
	position: static;
	margin: 15px auto 0;
}
	
.s_lead .left {
	width: 100%;
	height: auto;
	float: none;
}


.s_lead .right {
	float: none;
	width: 100%;
	position: static;
}

.s_lead .right p{
	position: static;
	height: auto;
	width: 80%;
	margin: 0 auto;
	-ms-transform: translateY(0%);
	-webkit-transform : translateY(0%);
	transform : translateY(0%);
}
	
#s2 {
	padding:20px 0 0;
}

/* ---------------------------------------------------------
■ 学年の詳細
--------------------------------------------------------- */
.about .left{
	width: 100%;
	float: none;
}

.about .right{
	width: 100%;
	float: none;
}
	
#s3 .about_tx,#s6 .about_tx{
	width: 100%;
}


/*カリキュラム*/
.hougan table thead {
    display: none;
}
	
.hougan table tr th.th_kamoku{
    display: block;
	width: 100%;
 }
	
.hougan table tr td {
    display: block;
	width: 100%;
}

.hougan table tr td ul{
	margin-top: 5px;
}
	
.hougan table tr td:before {
	content: attr(aria-label);
    display: block;
	width: 100%;
	background: #d8edeb;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	text-align: center;
}
	
/*金額*/
/*.hougan table.price tr td{
	display: inline-block;
	width: 50%;
}*/
	

/* ---------------------------------------------------------
■ ボタン
--------------------------------------------------------- */

.btn_area {
	width: 100%;
}

.btn_area .left{
	width: 100%;
	float: none;
	margin-bottom: 10px;
}

.btn_area .right{
	width: 100%;
	float: none;
}

/* ---------------------------------------------------------
■ ライトボックス
--------------------------------------------------------- */
.lightbox img{ 
	width: 100%;
}
    
 	
}

@media screen and (max-width: 520px) {
	
	.top_btn_area.blue {
		margin-bottom: -2px;
	}
	.top_btn_area {
		width: 100%;
		min-width: auto;
	}
	.top_btn_wrap{
		width:calc(100% - 40px);
		min-width: auto;
	}
	.top_btn_wrap.fst a,
	.top_btn_wrap.scd a{
		font-size: 14px;
	}
	.top_btn_wrap a::after{
		width:7px;
		height:7px;
	}
	.top_btn_wrap.apply a{
		width:88%;
		margin: 5px auto ;
		font-size: 18px;
	}
	.top_btn_wrap.fst a {
		width: calc((96% - 12px) / 3);
		padding: 8px 0 8px;
		filter: drop-shadow(2px 2px 3px rgba(0,0,0,.2));
	}
	.top_btn_wrap.fst a::after {
		display: block;
		margin:2px auto 4px;
		position: relative;
		width: 9px;
		height: 9px;
		right:auto;
		top:auto;
		transform:rotate(45deg);
	}

}

@media screen and (max-width: 374px) {
	.top_btn_wrap.apply a{
		width:100%;
		font-size: 17px;
	}
}