@charset "utf-8";

/*


スマホページ用


*/


@media only screen and (max-width:768px){


	/*リセット*/
	* {box-sizing: border-box;}
	img{ width:100%; height:auto;}
	
	/*表示・非表示*/
	.sp_none{ display:none !important;}
	.sp_only{ display:block;}
	.sp_on{display:block;}
	
	/*リンクのを有効（TEL）*/
	.sp_tel{ pointer-events: inherit; /*pointer-events: auto;*/}
	
	#bg{background:none;}

		
	/*幅関係*/
	#container{
		width:96%;
		margin:0 2% !important;
	}

	.page_top,
	#foot_navi,
	#copyright,
	#contents2c #main,
	#sidebar{
		width:100% ;
	}			

		
	/* ヘッダー */

	#header{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-bottom:1em;
	}
	#header #logo,
	#header #logo_r{
		float:none;
		margin: 0;
	}
	#header h1{
		width: 100%;
		height:auto;
		line-height:auto;
		font-size:13px;
		padding:0.3em;;
		text-align: center;
		}
	#header #logo{
		width: 44%;
		}
	#header #logo_r{
		width: 48%;
		padding-top:4px;
		}	
	
	#header .top_rec{
		float:right;
		padding-top:5px;
		}	

	
	
	
	/*　*/
	#navi{ display:none;}


	/* SPナビ*/
	.sp-navi,
	.hamburger{ display:block;}
	
	.sp-navi{
	  position: fixed;
	  right: -320px; /* 隠す */
	  top: 0;
	  width: 300px; /* スマホに収まるくらい */
	  height: 100vh;
	  padding-top: 30px;
	  background-color: #FFF;
	  transition: all .6s;
	  z-index: 200;
	  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	}

	.hamburger{
	  position: absolute;
	  right: 10px;
	  top: 10px;
	  width: 36px;
	  height: 30px;
	  cursor: pointer;
	  z-index: 300;
	}

	

	.sp-navi__list {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
	.sp-navi__list li {
	  text-align: left;
	  padding: 0 14px;
	}
	.sp-navi__list li a {
	  display: block;
	  padding: 8px 5px;
	  border-bottom: 1px solid rgba(0,0,0, 0.1) ;
	  text-decoration: none;
	  color: #333;
	  font-size:15px;
	}
	.sp-navi__list li a:hover {
	  background-color: #eee;

	}

	.hamburger__line {
	  position: absolute;
	  left: 8px;
	  width: 24px;
	  height: 2px;
	  background-color: #000;
	  transition: all .6s;
	}
	.hamburger__line--1 {
	  top: 14px;
	}
	.hamburger__line--2 {
	  top: 22px;
	}
	.hamburger__line--3 {
	  top: 30px;
	}
	.black-bg {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100vw;
	  height: 100vh;
	  z-index: 100;
	  background-color: #000;
	  opacity: 0;
	  visibility: hidden;
	  transition: all .6s;
	  cursor: pointer;
	}

	/* 表示された時用のCSS */
	.nav-open .sp-navi {
	  right: 0;
	}
	.nav-open .black-bg {
	  opacity: .8;
	  visibility: visible;
	}
	.nav-open .hamburger__line--1 {
	  transform: rotate(45deg);
	  top: 20px;
	}
	.nav-open .hamburger__line--2 {
	  width: 0;
	  left: 50%;
	}
	.nav-open .hamburger__line--3 {
	  transform: rotate(-45deg);
	  top: 20px;
	}

		
		
		/* フッター */
	
	#footer{
		height: auto;
		background-position: center bottom ;
		padding: 3% 3% 100px 3%;
	}
	
	.page_top{
		display: none;
	}

	
	#copyright{
		text-align:center;
		padding: 3%;
	}
		
		
	#foot_navi{
	padding-bottom: 3%; }
	#foot_navi ul{}
	#foot_navi ul li{
	}
	#foot_navi ul li a{
	display: block;
	width: 100%;
	}



	/*　フッター固定（お問い合わせボタン）*/
	.foot-fixed{
		display: block;
		position: fixed;
		width:100%;
		bottom:0;
		left:0;
	}
	.foot-fixed ul{
		display: flex;
		justify-content: space-between;
		
		list-style-type: none;
		
	}
	.foot-fixed ul li{
		width: 100%;
		border-right: 1px solid #64A3B3;
	}
	.foot-fixed ul li a{
		display: block;
		background: #34869C;
		padding: 0.7em 0 0.5em 0;
		text-align: center;
	}
	.foot-fixed ul li img{
		width: auto;
		height: 30px;
	}
	.foot-fixed ul li.icon-pagetop{
		width: 70%;
	}
	.foot-fixed ul li.icon-pagetop a{
		background: #64A3B3;
	}



	/* サイドバー　*/
	#sidebar{}
	#sidebar ul{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	#sidebar ul li{
		width:49%;
		margin-bottom: 2%;
	}
	
	#sidebar ul li.sp_w100{
		width: 100%;
	}
	#sidebar ul li img{
		vertical-align:bottom;
	}

	#sidebar ul.side_course_list{}
	#sidebar ul.side_course_list li{
		width: 100%;
		margin-bottom: 0;
	}
	

	#sidebar .bnr ul li{
	margin-bottom:5px;
	}
	

	/* タイトル */

	#contents2c #main h3{

		background-image: linear-gradient(180deg, rgba(247, 247, 247, 1), rgba(229, 229, 229, 1));

		padding:17px 0 14px 50px;
		padding-left: 50px;
		color:#000;
		font-weight:bold;
		font-size:20px;
		position: relative;
		
		border: 1px solid #CCC;
		
	}

	#contents2c #main h3:after{
		/*content: url(../images/common/icon-h3.png);*/
		content:"";
		background: url(../images/common/icon-h3.png) no-repeat 0 2px;
		background-size: auto 100%;
		display: inline-block;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 5px;
		left: -1px;
		z-index: 10;
		
		
	}

	

	/* TOP */

	/*　スライド 高さを自動で調整 */
	#image-navigation{
		background:none;
		border:none;
		padding:0;
		position: relative;
		height: auto;
		
	}
	#image-navigation:before{
		content: "";
		display: block;
		padding-top:38%; /* 比率（970:371）   */
	}

	#image-navigation .navi-image{
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
	}
	#image-navigation .navi ul{
		top:0;
		left:0;
	}
	
	
	#top{}
	#top_main{}
	#top_main .left,
	#top_main .right{
	width:100%;}


	

	.top_course_bnr,
	.top_course_bnr2{
		display: block;
		margin-top:1em;
		}
	.top_course_bnr ul,
	.top_course_bnr2 ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top:0;
		}

	.top_course_bnr ul li,
	.top_course_bnr2 ul li{
		width: 49%;
		float:none;
		margin-right:0;
		margin-bottom:2%;
		}






	#top_main .right{				}
	#top_main .right .bnr{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

	}
	#top_main .right .bnr p{
		width: 49%;
		margin-bottom: 1%;
	}
	#top_main .right .bnr p.sp_w100{
		width: 100%;
	}

	#top_main .right .bnr p.side_recruit{
		width: 100%;
		margin-bottom: 20px;
	}


	#news{
		/*background:url(../images/top/icon-news.png) no-repeat;*/
		background-image: linear-gradient(180deg, rgba(247, 247, 247, 1), rgba(229, 229, 229, 1));
		width: 100%;
		height: 100%;

		padding: 0;
		margin:3px 0 2em 3px;
		
		/*padding:2px 10px 10px 22px ;*/
		position: relative;
		
		border-radius: 7px;
		border: 1px solid #CCC;

		}

	#news::after{
		content: url(../images/top/icon-news.png);
		position: absolute;
		top: -3px;
		left: -3px;
		
	}
	#news .scroll{
		height:280px;
		width:100%;
		}
	
	#news .ichiran{
		/*height: 22px;
		width:136px;
		float:right;
		text-align:right;*/
		}

	#news table{
		width:90%;
		margin: 5% 2% 5% 8%;
		}
	#news table td{ padding:1%; }

	#news table td:nth-child(1){width: 30%; }
	#news table td.txt{width: 70%; }
	#news .txt img{ width:25px; /*margin-right: 6px; vertical-align:  middle; */}
	
	#news p{ width: 100% !important; }
	#news p.date{
		display: block;
		height: auto;
		width: 100% !important;
		word-break: keep-all;
		display: inline-block;
		padding:5px;
		}
	

	

	.box_news{
		/*background:url(../images/top/icon-news.png) no-repeat;*/
		background-image: linear-gradient(180deg, rgba(247, 247, 247, 1), rgba(229, 229, 229, 1));
		width: 100%;
		height: 100%;

		padding: 0;
		margin:3px 0 2em 3px;
		
		/*padding:2px 10px 10px 22px ;*/
		position: relative;
		
		border-radius: 7px;
		border: 1px solid #CCC;

		}

	.box_news::after{
		content: url(../images/top/icon-news.png);
		position: absolute;
		top: -3px;
		left: -3px;
		
	}
	.box_news .scroll{
		height:250px;
		width:100%;
		}
	
	.box_news .ichiran{
		/*height: 22px;
		width:136px;
		float:right;
		text-align:right;*/
		}

	.box_news table{
		width:90%;
		margin: 5% 2% 5% 8%;
		}
	.box_news table td{ padding:1%; }

	.box_news table td:nth-child(1){width: 30%; }
	.box_news table td.txt{width: 70%; }
	.box_news .txt img{ width:25px; /*margin-right: 6px; vertical-align:  middle; */}
	
	.box_news p{ width: 100% !important; }
	.box_news p.date{
		display: block;
		height: auto;
		width: 100% !important;
		word-break: keep-all;
		display: inline-block;
		padding:5px;
		}
		
	
	/*　コース紹介　*/
	
	#point{}
	
	#point .page_navi{}
	#point .page_navi table{
		width: 100%;
		border: 5px solid #3891A3;
	}
	#point .page_navi table th,
	#point .page_navi table td{
		display:block;
		width: 100%;
	}
	#point .page_navi table th{
		border-top:0;
		border-bottom:0;
	}
	
	
	#point .tbl_time{
		width: 100%;
	}
		
	#point .tbl_simple{
		width: 100%;
	}

	#point .tbl_simple th,
	#point .tbl_simple td{
		display:block;
		width: 100%;
	}
	
	
	#point .tbl_simple th{ border-width:0 1px ;}
	#point .tbl_simple tr:nth-child(1) th{ border-top-width: 1px;	}

	/*吹き出しタイトル*/
	.title-sys{ text-align: center; }
	.title-sys img{ width: 80%; }

	
	/*授業料*/
	.tbl_tuition{ width: 100%;}
	
	
	/* こだわり　*/
	#kodawari{}
	#kodawari .clrFix{}
	#kodawari .clrFix .left{
		
	}
	#kodawari .clrFix .left,
	#kodawari .clrFix .right{
		float: none;
		width:100%;
		
	}

	/*少し画像を拡大する*/
	.kodawari-title{overflow: hidden;	}
	.kodawari-title img{ width: 110%; }
	
	/*イメージ画像の上下を非表示*/
	#kodawari .pic p{
		max-height: 300px;
		overflow: hidden;
		/*object-fit:cover;*/
		position: relative;
	}
	#kodawari .pic p img{
		margin-top:-33%;
	}

	
	/*　学塾のシステム　*/
	
	/*チェックリスト（教養）*/
	.box_check{}
	.box_check{
		/*background:url(../images/common/bg_check_m.jpg) repeat-y;*/
		background-image: linear-gradient(180deg, rgba(247, 247, 247, 1), rgba(229, 229, 229, 1));
		width: 100%;
		height: 100%;
		
		padding:0 0 1% 0;
		margin:3px 0 2em 3px;
		
		
		position: relative;
		border-radius: 7px;
		border: 1px solid #CCC;
		
		
	}



	.box_check:after{
		/*content: url(../images/common/icon-check.png);*/
		
		content:"";
		background: url(../images/common/icon-check.png) no-repeat;
		display: inline-block;
		background-size: auto 100%;
		width: 50px;
		height: 50px;
		
		
		position: absolute;
		top: -3px;
		left: -3px;
		
	}

	.box_check .st{
		background:none;
		height:30px;
	}
	#contents2c #main .box_check h3{
		/*background:none;
		padding:0 !important;*/
		font-size:21px !important;
		margin:0px 0 10px 0  !important;
		border: 0;
		text-align: center;

		}

	#contents2c #main .box_check h3:after{
		display:none;
	}
	
	/*　チェックリスト */
	.box_check ul{
		list-style-type:none;
		margin:0 20px 20px 25px;
	}
	
	.box_check ul li{}
	.box_check .sub{
		margin:0 15px 0 25px;
	}


	
	
	
	
	/* 採用情報　*/

	.senior .senior_face {
		text-align: center;
		float: none;
		margin: auto;
		margin-bottom: 1em;

	}

	.senior .senior_txt {
	float: none;
	padding:2%;
	width:100%;
}

	
	/* */

	.t_name{
		text-align: center;
		background: #FFFFE7;
		padding: 1%;

	}

	.senior .senior_txt p{
		font-size: 14px;
		line-height: 1.6em;
		}


	.r_line{
		width:100%;
	}


	
	table.tbl_rec{
		width: 96%;
		border-collapse: collapse;
		background:#fff;
		text-align: left;
		line-height: 1.5;
		border-top: 1px solid #a2c2e6;
		border-left: 3px solid #000040;
		margin-top:20px;
		margin-bottom:20px;
		}

	.tbl_rec th,
	.tbl_rec td{
		display: block;
		width: 100%;

		}
	.tbl_rec th{ padding: 0.6em 0.5em 0.4em 0.5em ; }
	.tbl_rec td{ padding: 0.6em 0.5em 0.6em 0.5em ; }


#menu_recruit{
  width: 96%;
  height: auto;
  margin-left: 2%;
}

#menu_recruit li{
  width: 30%;
  margin-bottom:10px;
}


/*働き方紹介*/
	
.example_detail {
    max-width: 100%;

}

.example_check {
	width: 94%;
}

	
.example_month {
  width: 100%; 
}	
	
	
	
	/* お問い合わせ　*/
	

	#contact{}
	
	#contact input[type="text"]{}
	
	input.sizeSSS{ width:38px;}
	input.sizeSS{ width:60px;}
	input.sizeS{ width:40%;}
	input.sizeM{ width:100%;}
	input.sizeL{ width:100%;}
	
	#contact select{
		padding: 4px;
		width: 100% ; }

	
	.tbl_form{ 
		width: 100%;
		margin: 0;
		border-collapse: collapse;
	}
	.tbl_form th,
	.tbl_form td{
		display: block;
		width: 100%;
		}
	.tbl_form th{
		text-align:left !important;
		border-width: 0 1px;
	}
	.tbl_form tr:nth-child(1) th{
		border-top-width:1px;
	}
	
	.tbl_form th{ padding:0.5em; }
	.tbl_form td{ padding:1em; }
	
	.tbl_form td table{ width: 100%; }
	
	.tbl_form td lable{ display: inline-block; }


	

	/*　卒業生の声　*/

	.koe2 .koe2_face {
		float: none;
		width: 200px;
		text-align: center;
		margin: auto auto 1em auto;

	}

	.koe2 .koe2_txt {
		float: none;
		width:96%;
		margin: 0 2%;
	}


	.koe2 .koe2_txt p{
		font-family:Georgia;
		text-align: left;
		font-size: 15px;
		line-height: 1.6em;
		}

	.pic_list .single{ width:48%; height: auto; }
	.line{
		width:100%;
		/*height:20px;
		border-bottom:2px solid #007b43;
		margin-bottom:20px;*/
	}
	

	
	/* オンライン　*/
	
	.online_type_group,
	.online_type_private,
	.online_solve_copy,
	.online_solve_img,
	.online_plan_movie,
	.online_plan_movie iframe,
	.online_price_area table,
	.online_introduction_area table
    {
    	width: 100%;
	}
	

	.online_title{
    font-size: 6vw;
	}

	.online_price_head_copy{
    font-size: 11vw;
	}

	.online_price_head_copy span{
		font-size: 8vw;
	}

	.online_price_head_copy span.online_price_head_copy_s{
		font-size: 10vw;
	}

	
	.online_plan_movie{ }
	.online_message_img.fR{
		float: none;
		margin: auto;
		text-align:center;
	}
	.online_message_name{
		text-align:center;
	}
	
	.online_introduction_area table{}
	.online_introduction_area table th,
	.online_introduction_area table td{
		display: block;
		width: 100%;
		padding: 1em;
		
	}
	.online_introduction_area table th{
		border-width: 0 1px;
	}
	.online_introduction_area table tr:nth-child(1) th{
		border-top-width: 1px;
	}


	.online_voice_area{}

	.online_voice_copy{
		width: 100%;
		position: relative;
	}

	.online_voice_img{
		width: 100%;
		text-align: center;
		
	}
	.online_voice_img img{
		width:90%;
		margin-bottom: 1em;
	}

	.online_flow_box{
		display: flex;
    }
	
	.online_flow_pic{
		
	}
	.online_flow_pic img{
		width: 60px;
		height: auto;
	}

	.online_flow_copy{
		font-size: 22px;
	}

	.online_step_img,
	.online_step_copy{
		width: 100%;
	}

	.online_plan_teacher{
		align-content:stretch;
		background: #348AA1;
	}
	.online_plan_teacher_copy{
		height: auto;margin: 0;
		
	}

	

/* 768px ここまで　*/
}




@media only screen and (max-width: 600px){
	
	
	
}




/* 幅414px以下から iphone6& plus
------------------------------------------------------------*/
@media only screen and (max-width: 414px){


}


/*  iphone7 etc.
------------------------------------------------------------*/
@media only screen and (max-width: 375px){

	
}

/*  iphone5 etc.
------------------------------------------------------------*/
@media only screen and (max-width: 320px){


	


}