@charset "utf-8";

@media screen and (max-width: 767px) {
/*
============================================================
2019年度0次募集　コンテンツ　スマホ上書き
============================================================
*/	
.sp {
    display: block;
}	
.sp_none {
    display: none;
}	
.pc {
    display: none;
}
	
body {
	font-size: 13px;
	line-height: 1.6;
}
    
.left,.right {
    float: none;
} 
    
/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */
#page-top {
    bottom: 5px;
    right: 5px;
}    
	
/* ---------------------------------------------------------
■ ヘッダー
--------------------------------------------------------- */
header {
	background-size: 48px 13px;
}
	
header #head_btnbox_tb {
    height: 50px;
}	
	
header #head_btnbox_tb img {
    max-width: 50px;
}
	
header #head_logo img {
    max-width: 154px;
}
	
/*ヘッダーgif*/	
header #head_img {
	width: 90%;
	max-width: 458px;
}
header #head_img img{
	width: 100%;
}
header #head_img img.head_tx{
	z-index: 3;
	position: absolute;
	width: 41%;
	top :3%;
	right :25%;
}

/* ---------------------------------------------------------
■ mvエリア
--------------------------------------------------------- */
#mv_area {
    margin-top: 50px;
} 
    
/* ---------------------------------------------------------
■ 公開説明会
--------------------------------------------------------- */
#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;
}    

/* ---------------------------------------------------------
■ 公説下のキャンペーン
--------------------------------------------------------- */
.mv_campaign{
  padding-top: 20px;
  clear: both;
}

/* ---------------------------------------------------------
■ オンライン授業
--------------------------------------------------------- */    


#online .box_wrap{
    width: 100%;
}
    
#online .tx_btn{
    width: 100%;
    height: 60px;
    border-radius: 30px;
    font-size: 18px;
    margin: 20px auto;
}

#online .tx_btn p{
    background-size: 12px auto;
    padding-left: 20px;
}    

#online .online .left{width: 100%;}
#online .online .left p{margin-top: 5px;}
#online .online .right{
    width: 70%;
    margin: 5px auto 0;
    float: none;
}

#online .online .left2{
  width: 100%;
  float: none;}
#online .online .left2 p{
  margin-bottom: 10px;}
#online .online .right2{
  width: 100%;
  float:none;
  }



/* ---------------------------------------------------------
■ 学力向上へのこだわり
--------------------------------------------------------- */ 
/*共通*/       
.ability_base {
    padding: 20px;
 }
    
.ability_base .layout_box{
   display: flex;
   flex-wrap:wrap;
}

.ability_base .layout_box .left{order:2; margin-top: 10px;}     
.ability_base .layout_box .right{order:1;}

#ability .box_wrap{
    width: 100%;
}
    
#ability .tx_btn{
    width: 100%;
    height: 60px;
    border-radius: 30px;
    font-size: 18px;
    margin: 20px auto;
}

#ability .tx_btn p{
    background-size: 12px auto;
    padding-left: 20px;
}    
    
    
/*seebe*/
#seebe{
    background: none;
}    
    
#seebe .left{width: 100%;}
#seebe .left p{margin-top: 0;}
#seebe .right{
    width: 70%;
    margin: 5px auto 0;
}
 
/*ヴィーナレット*/
#venulet{
    background: none;
}
    
#venulet .left{width: 100%;}
#venulet .left p{margin-top: 0;}
#venulet .right{
    width: 60%;
    margin: 5px auto 0;
}
       
/* ---------------------------------------------------------
■ 教師へのこだわり
--------------------------------------------------------- */
#teacher {
    background-size: 300px auto;
}    
/*1列3人に*/
#teacher ul li{
    width: 33%;
}

#teacher ul li:nth-child(4n){
	margin-right: 0.5%;
}  
    
#teacher ul li:nth-child(3n){
	margin-right: 0;
}     
        
    
/* ---------------------------------------------------------
■ 価格へのこだわり
--------------------------------------------------------- */    
.price_img{
    margin-top: 0;
    padding: 20px;
}
 
 .price_img .left,.price_img .right{
    width: 100%;
}

.price_img p:nth-child(2){
    margin: 10px auto 0;
}    
/* ---------------------------------------------------------
■ 同時受付中・教室紹介
--------------------------------------------------------- */
.andmore .left,.andmore .right{
    width: 100%;
}
    
.andmore .left{
    margin-bottom: 40px;
}   
    
.school .sub_tit{
    width: 100%;
    margin-top: 5px;
}
    
/*教室紹介*/   
.school_box{
    display: flex;
    flex-wrap: wrap;
}    
    
.school_box .right{
    padding-top: 0;
    width: 145px;
    order: 1;
    margin: 0 auto;
}
    
.school_box .tel{
    width: 100%;
    order: 2;
}     

.school_box .left{
    padding-top: 0;
    margin: 0;
    width: 100%;
    order: 3;
}      





/* ---------------------------------------------------------
■ フッター
--------------------------------------------------------- */
.foot_contents .left,.foot_contents .right{
	width: 90%;
    margin: 0 auto 10px;
}
    
footer .bnr{
    width: 98%;
}
	
	
/* ---------------------------------------------------------
■ Youtube　area
--------------------------------------------------------- */
	#nagashima_yt{
		width: 90vw;
	}

/* ---------------------------------------------------------
■ オリコンエリア
--------------------------------------------------------- */
	.oricon_btnarea{
		padding:0 20px 20px;
	}
	.oricon_btnarea .tx_btn{
		width: 100%;
		height: 60px;
	}
	.oricon_btnarea .tx_btn p{
		background-size: 12px auto;
		padding-left: 20px;
		font-size: 18px;
  }
    
}


/* ---------------------------------------------------------
■ アイフォン対応
--------------------------------------------------------- */
@media screen and (max-width: 570px) {
    
h2{ font-size: 24px;}    
    
.tx_btn p{
    width: 95%;
    background-size: 4px auto;
    background-position: 4px 50%;
    padding-left: 6px;
    font-size: 16px;
} 
  
.lightbox .name{ 
    font-size: 22px;
}    
.lightbox .name .ruby{ 
    width: 100%;
    display: block;
    font-size: 14px;
}    

/* ---------------------------------------------------------
■ オンライン授業
--------------------------------------------------------- */
    
#online .box_wrap .box{
    width: 100%;
    border: none;
    margin-bottom: 5px;
}
    
#online .box_wrap figure{
    width: 30%;
} 
    
#online .box_wrap figure img{
    float: left;
}     

#online .box_wrap .box .box_tx{
    background: rgba(255,255,255,0.7);
    width: 100%;
    padding: 3px 5px;
    clear: both;
    overflow: hidden;
}

#online .box_wrap .box .box_tx p{
    font-size: 12px;
    margin-top: 15px;
}
    
#online .box_wrap .box .box_tx:after{
    display: none;
}     


/* ---------------------------------------------------------
■ 学力向上へのこだわり
--------------------------------------------------------- */
    
#ability .box_wrap .box{
    width: 100%;
    border: none;
    margin-bottom: 5px;
}
    
#ability .box_wrap figure{
    width: 30%;
} 
    
#ability .box_wrap figure img{
    float: left;
}     

#ability .box_wrap .box .box_tx{
    background: rgba(255,255,255,0.7);
    width: 70%;
    float: right;
    padding: 3px 5px;
}

#ability .box_wrap .box .box_tx p{
    font-size: 12px;
}
    
#ability .box_wrap .box .box_tx:after{
    display: none;
}     

/* ---------------------------------------------------------
■ 教師へのこだわり
--------------------------------------------------------- */
#teacher {
    background-size: 250px auto;
}     
    
/*1列2人に*/
#teacher ul li{
    width: 49.7%;
}

#teacher ul li:nth-child(3n){
	margin-right: 0.5%;
}  
    
#teacher ul li:nth-child(even){
	margin-right: 0;
}      

#teacher ul li .tx .more{
    font-size: 14px;
} 
    
#teacher ul li .tx .more:after{
    background-size: auto 8px;
    background-position: right 60%;
    padding-right: 8px;
}    
/* ---------------------------------------------------------
■ 価格へのこだわり
--------------------------------------------------------- */
#price {
    background-size: 250px auto;
} 
    
    

/* ---------------------------------------------------------
■ フッター
--------------------------------------------------------- */    
.foot_tx{
	font-size: 16px;
}
	
/* ---------------------------------------------------------
■ オリコンエリア
--------------------------------------------------------- */
	.oricon_btnarea{
		padding:10px 20px 20px;
	}
	.oricon_btnarea .tx_btn{
		width: 100%;
		height: 50px;
	}
	.oricon_btnarea .tx_btn p{
		background-position: 20px 50%;
		padding-left: 17px;
		font-size: 15px;
  }
	
	
}