@charset "UTF-8";
/* CSS Document */

/*==================
 ▼ブレイクポイントのルール▼
 -スマホを基本設計にする-
 *〜539px：SP縦
 *640px〜 PC
==================*/

/* ----------------------------------------------------------------------
ベースの記述 (SP基準)
----------------------------------------------------------------------*/


/*非表示・表示  ----------------------------------*/

.sp_none{ display:none;}



body {  
	font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
               'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */
               Meiryo,                      /* Windowsのメイリオ */
               sans-serif;
	fonr-size:16px;	
	line-height: 1.5em;
	}

a:link,
a:hover,
a:visited
{text-decoration: none; color: #000;}

/* ハンバーガーメニュー　*/

#header {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  z-index: 999;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
}
#gNav a:hover {
  color: #999;
}
nav li a {
  font-size: 13px;
  letter-spacing: 0.2em;
}

	
 #header {
    padding: 10px 0;
    height: 50px;
  }
  .h_cv {
    max-width: 80%;
	width: 80%;
    position: absolute;
    top:10px;
    right:10px;
    z-index: 999;
	display: flex;
	  -js-display: flex;
	justify-content: space-between;
	align-items: center;
  }

.h_cv div.h_serch{width: 40%;}
.h_cv div.h_taiken {width: 60%;}
.h_taiken .btn{ height: 30px; padding:0.5em 0.5em 0.5em 1.5em; line-height: 1.2em; width: calc(100% - 2em);}
.h_serch { height: 30px;  text-align: center; }
.h_serch img{height: 1em; width: auto; margin-right: 0.5em; padding-top: 0.25em;}

/*ページ内リンク固定ナビ調整*/	
#whatwp,
#curriclum,	
#price{
margin-top: -70px;	
padding-top: 70px;
}
	


  #gNav .nav {
    overflow-y: auto;
  }
  .mean-nav .container {
    padding: 0;
  }
  nav li .fa {
    display: none;
  }

/*背景　----------------------------------*/
.bg_line {
	background-image: url(../images/bg_area.png);
	background-repeat: repeat;
}



/*見出し  ----------------------------------*/

body #main_img h1{ margin: 0; padding: 0; }
h1 img {width: 100%; margin: 0; padding: 0;}
h2{ font-size: 2.625em;/*42px*/}
h2 .cv_btn{ font-size: 2.625em;/*42px*/}
h3{ font-size: 2em;/*32px*/}





/*共通----------------------------------*/

.wrap{ width: 100%;}


body.wrap .section{ width: 100%; margin: auto auto;}
.content{ width: 89.76%; margin: 0 auto; padding-top: 30px;}

.deco_size_s{font-size: 80%;}
.deco_color{color:#34699B; font-size: 120%; font-weight: bold;}
.marker{
  background: linear-gradient(transparent 85%, #F0D74B 0%);
  display: inline;
  padding: 0 10px 10px;
}

#main_img{ padding-top: 70px;}
#main_img img{width: 100%; height: auto;}

h2.content_title{
	font-weight: bold; font-size:1.250em;/*20px*/
	text-align: center; line-height: 2em;
	margin-bottom: 20px;
	color:#3C5C80;}
.title_tokucyo{margin-top: 30px;}

/*fadein  ---------------------------------- */

	.sa { opacity: 0; transition: all .5s ease-out; }
	.sa.show { opacity: 1; transform: none; }
	.sa--up { transform: translate(0, 100px);}


/* goto-top ---------------------------------- */

	#goto-top {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 999;
		width: 55px;
		height: 55px;
		cursor: pointer;
		background:url(../images/gotop.png) no-repeat center center;
	}

	#goto-top:hover { opacity: 0.5; }
	#goto-top:visited { opacity: 1; }

	@media only screen and (-webkit-min-device-pixel-ratio: 2),
		   (min-resolution: 2dppx)  {
			#goto-top{
			 background:url(../images/gotop@2x.png) no-repeat center center;
				background-size:50px 50px;
			}
	}

/*CVエリア----------------------------------*/

.cv_area{
	width: 100%;
	margin-top: 10px;
	display: flex;  -js-display: flex;  flex-wrap: wrap;
	justify-content: center;
	padding-top:25px;
	padding-botoom:25px;
	background-image: url(../images/bg_area.png);
	background-repeat: repeat;
	position: relative;
}

.cv_area_last{margin-top: 50px;}

	.cv_box{
		max-width:90%;
		background: #FFFFFF;
		border-radius: 5px;
		display: flex;
		-js-display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: 25px;
	}

		h2.cv_title{width: 80%; text-align: center; margin:20px auto;  font-size:1.2em; line-height: 2em; color:#3C5C80; }

		.cv_btn{
			display: flex;
			-js-display: flex;
			justify-content: center;
			flex-wrap: wrap;
			width: 80%;
			padding-bottom: 25px;
		}
		
	.cv_btn li{ list-style: none; width: 100%;}

			.btn,
			.btn:visited{
				display: inline-block;
				padding: 0;
				text-decoration: none;
				width: 100%;
				height: 80%;
				display: flex;  -js-display: flex;  align-items: center;
				justify-content: center;
			}



			/*ヘッダー用*/
			.square_btn{
				background: linear-gradient(#DE6A78 50%, #D36572 50%);/*ボタン色*/
				color: #FFFFFF;
				font-weight: bold;
				border-radius: 3em;
			}
			.square_btn:hover{ opacity: 0.5;} 


			/*CVエリア用*/
			.btn_taiken{margin:0 0 2em 0;}
			.btn_search{margin:0 0 20px 0;}

			.btn_taiken a,
			.btn_search a{color: #FFFEEE; width: 100%; padding: 1em 0 1em 0; border-radius: 5em;}

			/*無料体験*/
			.btn_taiken a{
				background:linear-gradient(#DE6A78 50%, #D36572 50%);/*ボタン色*/
				color: #FFFFFF;
				font-weight: bold;
			}


			/*近くの教室を探す*/
			.btn_search a{
				background: linear-gradient(#376A99 50%, #315F89 50%);/*ボタン色*/
				color: #FFFFFF;
				font-weight: bold;
			}
			a:hover{opacity: 0.5;}


			.cv_img{vertical-align:middle;margin:0 0.3em 0 0.5em;}


/* 導入----------------------------------*/

ul.ch1_2{
	display: flex;
	-js-display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	line-height: 1.9em;
	 
}

ul.ch1_2 li{ width: 100%; list-style: none;}
ul.revers li.what_txt {line-break: normal; word-wrap: break-word; word-break: break-all;}
ul.ch1_2 li img{width: 100%;}

ul.ch1_2 li ul li{margin-bottom: 1em;}

.wp_column{ 
	border: 4px solid #D7E1EB;
	border-radius: 5px;
	padding: 30px;
}
h3.wp_title{font-weight: bold; font-size: 1.250em; color: #3C5C80; margin-bottom: 1em; width: 100%; text-align: center;}

.column_box{
	display: flex;
	-js-display: flex;
	justify-content: center;
	flex-wrap: wrap-reverse;
	}

.wp_txt{width: 100%; line-height:1.9em;}
.wp_img{width: 100%; text-align: center; margin-bottom: 1em;}

/* カリキュラム ----------------------------------*/

h3.curriclum_title{ text-align: center; line-height: 1.8em; margin-top: 0;}

.table_caption{margin-top: 1.5em; line-height: 1.5em; margin-bottom: 0;}

.scroll{
	overflow-x:scroll;
	max-width: 539px;
	overflow: auto;
	margin-bottom:1em;
	}
.scroll::-webkit-scrollbar{height:10px;}/*バーの太さ*/
.scroll::-webkit-scrollbar-track{background:#EEEEEE;}/*バーの背景色*/
.scroll::-webkit-scrollbar-thumb{background:#666666; border-radius: 5px;}/*バーの色*/
.scroll::-webkit-scrollbar-thumb:horizontal{background:#666666; border-radius: 5px;}
table::-webkit-overflow-scrolling: touch;

table{ 
		table-layout: fixed;
		min-width: 100%;
		overflow: auto;
        white-space: nowrap;
        display:block;
        width:auto;
	margin-top: 0.5em;
	
	}
	table th,
	table tr,
	table td{ border:1px solid #595757;
			white-space: nowrap;
			padding: 0.2em;
		line-height: 1.3em;
		vertical-align:middle;
		text-align: center;
	}

	table th{ background: #9E9E9F; }
	table td.sticky{
		background: #EEEEEE;
		position: -webkit-sticky;
		position: sticky;
		left: 0;
		z-index: 1;
		font-size: 90%;
		text-align: left;
	}
		th.course{ background:#E06977; color: #FFFFFF;}
		tr.course,
		td.course{background: #F8E1E4;}


	#curriclum ul.ch1_2 li img {width: 100%; margin-top: 1.5em;}
	#curriclum ul.ch1_2 {display: flex; -js-display: flex; flex-wrap:wrap-reverse;}



	/*特徴*/

ul.point_box{ text-align: center;}
ul.point_box li{list-style: none; }
ul.point_box li.point_col{
	border: 4px solid #D7E1EB;
	border-radius: 10px;
	padding: 30px;
	margin-bottom: 1em;} 

li.point_ph{font-size: 1.250em;color:#3C5C80; font-weight: bold; }
	li.point_ph .point_name{ margin-bottom: 1em;}
	.point_ph .marker{
	  background: linear-gradient(transparent 85%, #D7E1EB 0%);
	  display: inline;
	  padding: 0 10px 10px;
	}
li.point_ph  .point_title{ margin-bottom: 1em; line-height: 1.3em;}

li.point_txt{line-height: 1.8em;}
li.point_txt a:link,
li.point_txt a:visited{ color: #E06977; text-decoration: underline;}
li.point_txt a:hover{ color: #E06977; text-decoration: none;}


/* 価格 ----------------------------------*/

.price_box {
    padding:2em 1em;
	display: flex;  -js-display: flex;  justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 25px;
	border: 4px solid #D7E1EB;
	border-radius: 10px;
	padding: 30px;
	font-size: 16px;
	
}

.price_box .box-title {
    line-height: 1;
    font-size: 0.625em; 
    color: #000;
    font-weight: bold;
	line-height: 1.5em;
}

.price{text-align: center; width: 100%;}
span.price_lesson{ 
	display: inline-block;  
	padding-bottom: 0.5em;  
	margin-bottom: 0.5em; 
	text-align: center; 
	font-weight: bold; 
	font-size: 2em;/*32px*/ 
	border-bottom: 1px dotted #bab9b9;
	width: 100%; 
	color: #3C5C80;
	
	}
.price_lesson img{vertical-align: middle; margin-bottom: 0.5em;}

.price_enrollment{display: flex;  -js-display: flex;  justify-content: space-around; flex-wrap: wrap; width: 100%;}
.deco_box{background:#34699B; padding: 0.2em; display: inline-block; color: #ffffff; margin-right: 0.5em;}

.price_attention{text-align: center; margin: auto auto; margin-top:1.5em; font-size: 0.813em; line-height: 1.4em;}



/* 諦めないで〜 ----------------------------------*/

.intro_box{ width: 90%;}
.intro_img img{ display: none;}
.intro_txt{text-align: center; line-height: 1.8em; margin-bottom: 1.5em;}

/*フッター ----------------------------------*/

footer{width:100%; }
footer nav{width: 90%; margin: auto auto;  text-align: center; margin-top: 40px;}
footer ul{list-style: none;}
ul.fotter_link{
	display: flex;  -js-display: flex;
	flex-wrap: wrap;
	justify-content:center;
	margin-top: 1em;
	margin-bottom: 80px;
}
ul.fotter_link li:first-child{width: 100%;}
ul.fotter_link li{ padding: 1em;  text-align: center; }

ul.fotter_link li a{display: block; width: 100%; height: 100%;}


/*----------------------------------------------------------
------------
レスポンシブの設定 (PC用スタイル)
---------------------------------------------------------------------- */
 /*　画面サイズが640pxからはここを読み込む　*/

@media screen and (min-width: 640px)  {
	
	/*非表示・表示*/
	.pc_none{  display:none;}
	.sp_none{  display:inline-block;}

	.wrap{ width: 100%; min-width: 1170px;}
	
	
/*CVボタン _______________________________*/
.btn,
.btn:visited{
    border-radius: 25px;
	color: #FFFFFF;
	
	}
	
/*共通 ______________________________________________________________*/
	
h2.content_title{ font-weight: bold; font-size: 2.1em;/*33px*/ text-align: center; margin-bottom: 40px;  line-height: 2em;
color:#3C5C80; }
.title_tokucyo{margin-top: 50px;}
	
	.content{line-height: 1.8em;}

	/*メニュー _______________________________*/

/* ハンバーガーメニュー　 _______________________________*/

#header {  box-shadow: 0px 5px 15px rgba(0,0,0,0.2);}
nav li a {
  font-size: 16px;
	font-weight: bold;
}

 #header {
    padding: 0;
    height: 87px;
  }
	.container{
	 max-width: 1170px;
	width: 100%;
	height: 100%;
	 margin: auto auto;
	display: flex;
	-js-display: flex;
	align-items: center;
		justify-content: space-around;
	}
	
	#h_top{
		max-width: 1170px;
		width: 90%;
		height: 100%;
		display: flex; 
		-js-display: flex;
		align-items: center;
	}	
	.container .h_nav{
		width: 66.6666%;
		max-width: 779px;
		height: 100%;
	} 
	
	
	.container  .h_nav ul{
		height: 100%;
		display: flex;
		-js-display: flex;
		justify-content: space-around;
		align-items: center;
		min-height: 87px;
	}
	
	.h_nav ul li a{height: 100%; }
	
	.h_cv {
	  width: auto;
		width: 50%;
		position: relative;
		top:0;
		right: 0;
		justify-content: space-around;
  }
	.h_cv div{width: 100%;}
	.h_taiken .btn{max-width: 350px;}
	.h_taiken{padding-left: 1.5em;}
	.h_taiken .btn img{ width:50%; height: auto;}
	.h_serch { font-weight:bold;}
 	
/*ページ内リンク固定ナビ調整*/	
#whatwp,
#curriclum,	
#price{
margin-top: -30px;	
padding-top: 30px;
}
	

	body.wrap section{ max-width: 1170px; width: 100%; margin: auto auto;}
	.content{ max-width: 1140px; width: 89.76%; padding-top: 30px;}
	
	#main_img{
		padding-top: 87px;
		min-width: 100%;
		display: flex;
		-js-display: flex;
		justify-content: center;
		background-repeat: repeat;
		}
	
	#main_img img{ 
		max-width: 1140px;
		width: 100%;
		height: 100%;
		margin: auto auto;
		padding: 0;}

/*CVエリア_______________________________*/

.cv_area{ 
	width: 100%;
	margin-bottom:40px;
	margin-top: 30px;
	padding:50px 0 50px 0;
}
	
.cv_area_last{margin-top: 120px;}	
	
	
.cv_box{ 
	background-color: #ffffff;
	border-radius: 10px;
	max-width: 1140px;
	width: 89.76%;
	margin: 0 auto;
	padding: 50px 0 50px 0; 
	}
	
	h2.cv_title{ font-size: 26px; 
			margin-bottom: 30px;
			margin-top: 0;}

		.cv_btn{
			display: flex;
			-js-display: flex;
			justify-content: center;
			flex-wrap: wrap;
			width: 80%;
			padding-bottom: 25px;
			padding-top: 30px;
		}
		
	.cv_btn li{ 
		list-style: none; 
		width: 50%;
		display: flex;
		-js-display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		font-size: 26px;
	}

			.btn,
			.btn:visited{
				display: inline-block;
				padding: 0;
				text-decoration: none;
				width: 100%;
				height: 80%;
				display: flex;  -js-display: flex;  align-items: center;
				justify-content: center;
			}


			/*CVエリア用*/
			.btn_taiken,
			.btn_search{margin:0; display: flex; -js-display: flex; justify-content: center;}

			.btn_taiken a,
			.btn_search a{
				color: #FFFEEE; 
				width: 95%; 
				padding: 1em 0 1em 0; 
				border-radius: 5em;
				text-align: center;
			}

			/*無料体験*/
			.btn_taiken a{
			}


			/*近くの教室を探す*/
			.btn_search a{
			}


			.cv_img{vertical-align:middle;margin:0 0.3em 0 0.5em;}


/* 導入  ______________________________*/
	

ul.ch1_2{
	width: 100%;
}

ul.ch1_2 li{
	width: 100%; 
	text-align: left;
	}
	
ul.ch1_2 li ul,
ul.ch1_2 li ul.revers{
	display: flex;
	-js-display: flex;
	justify-content: space-between;
	width: 100%;}
	
	ul.ch1_2 li ul.revers li.what_txt{order:2; padding-left:1.5em;}
	ul.ch1_2 li ul.revers li.what_ph{order:1; width: 100%;}
	
	ul.ch1_2 li ul li.what_txt {padding-right:1.5em;}
	ul.ch1_2 li ul li.what_ph{width: 100%;}
	
	 
.wp_column{ 
	border: 5px solid #D7E1EB;
	border-radius: 15px;
	padding: 30px;
	margin-top:30px;
}
h3.wp_title{font-size: 26px; margin-bottom: 0.5em; text-align: left;}

.column_box{
	display: flex;
	-js-display: flex;
	justify-content:space-between;
	flex-wrap: wrap-reverse;
	}

.wp_txt{width: 75%; line-height:2em;}
.wp_img{width: 25%; margin-bottom: 0;}
	
	
/* カリキュラム-_______________________________*/

	h3.curriclum_title{margin-top: -30px;}
	
	.table_caption{ text-align: right;}
	
table th,
table tr,
table td{ 
		padding: 0.5em;
}
	
	table{width:100%;}
	.scroll{
	max-width: 1140px;
	margin: 0.5em 0 2em 0;
	width: 100%;
}
	#curriclum ul.ch1_2 li img {width: 100%; margin-top: 0;}
	#curriclum ul.ch1_2 {display: flex; -js-display: flex; justify-content: space-between; flex-wrap: wrap;}
	#curriclum ul.ch1_2 li{width: 50%;}
	#curriclum ul.ch1_2 li.curriclum_txt { width: 62%;}
	#curriclum ul.ch1_2 li.curriclum_ph { width: 36%;}
	
	
	/*特徴*/

ul.point_box{ 
	display: flex;
	-js-display: flex; 
	flex-wrap: wrap;
	justify-content: space-between;}
	
	ul.point_box li.point_col{ width:24.5%;}
	
/* 値段_______________________________*/
	
	.price_box {
	width: auto;
	max-width: 600px;
	margin:0 auto 50px auto;
	padding: 50px;
	border: 11px solid #D7E1EB;
	}
	.price_box .box-title {font-size: 0.625em; margin-right: 0.5em;}
	.price_lesson img{ margin: 0;}
	
	span.price_lesson{font-size: 2.625em;/*42px*/ width: 80%;}
	.price_enrollment{ width: 70%; font-weight: bold; font-size: 1.500em;/*24px*/}
	
	div.price_enrollment span.deco_box{ margin-right: 0.5em; font-weight:normal; font-size: 0.7em;/*16px*/}
	.price_attention{margin-top: 1em; font-size: 1em;} 
	


/* 諦めないで〜 _______________________________*/
	
.intro_box{ 
	width: 80%;
	display: flex;
	-js-display: flex;
	justify-content: space-between;
	margin-bottom: 1.5em;
	
	}

	
.intro_txt{text-align: left; margin-bottom:0; max-width:70%; margin-right: 2%; line-height: 1.9em;}
.intro_img {width: 30%;}
.intro_img img{ display: block; width: 100%;}


	
/*フッター _______________________________*/

footer{ width: 100%; min-width: 1170px; }
footer ul.fotter_nav{ width: 89.76%;  max-width: 1140px; margin: auto auto; display: flex;  -js-display: flex;  justify-content:space-around; align-items: center; margin-bottom: 30px; margin-top: -20px; }
	li.footer_logo{width:30%;}
	li.footer_txt{width:60%;}
	ul.fotter_nav li.footer_logo img{margin: 0; width: 100%; height: auto;}
	ul.fotter_link{align-items: center;  margin: 0; justify-content:flex-start; width: 100%;}
	ul.fotter_link li:first-child{width:auto;}	
	nav ul.fotter_link li a{font-weight:normal; text-decoration: underline;}
	nav ul.fotter_link li a:hover{text-decoration:none;}
}