@charset "UTF-8";
/* CSS Document */

@import url("reset.css");

html {font-size: 62.5%;
	/*-webkit-text-size-adjust: 100%;*/
	scroll-behavior: smooth;
}
body {font-size: 1.6em; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;}
.sp_only, .tb_only {display: none!important;}
a:hover {opacity: 0.8;}
.yellow {color: #FFEA00;}
.pink {color: #DE0052;}

.txt22 {font-size: 2.2rem;}
.txt28 {font-size: 2.8rem;}
strong {font-weight: bold;}

@media (min-width: 751px) {
	a[href^="tel:"] {
			pointer-events: none;
			cursor: default;
	}
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

p {font-size:16px; line-height:1.8; text-align: justify; color:#000;}

a {text-decoration:none; color:#1111cc;}
a:hover {text-decoration:underline; color:#2020A6; }
a:hover img {-moz-opacity:0.8; opacity:0.8; filter: alpha(opacity=80); background:#ffffff;}
#header #logo a:hover img {-moz-opacity:1; opacity:1; filter: alpha(opacity=100); background:none;}

img {
    max-width: 100%;
    height:auto;
}

.left {float:left;}
.right {float:right;}

.pc_br {display:block;}

.sp_only img,
img.sp_only {width: 100%;}

@media screen and (min-width:769px){
.tablet_only {display:none;}
.tb_br {display:block;}
}

@media screen and (min-width:741px){
.sp_only {display:none;}
.pc_br {display:block;}

.left {float:left;}
.right {float:right;}
}
@media screen and (max-width:740px){
/*.head_free {display:none;}*/
.sp_only {display:block;}

	
	
}

/*--------------------------------------------------------------------------------------------
　　全ページ 共通部分
--------------------------------------------------------------------------------------------*/
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","HiraKakuPro-W3", "メイリオ",Meiryo, "ＭＳ Ｐゴシック" ,Arial,Helvetica,sans-serif;
	background:url(../images/common/bg.png) repeat top left;
}
#header_wrapper {width:100%;
  background-color: #fff;
  position: relative;
	border-bottom: solid 2px #E8E8E8;
}
/*#header_wrapper::before {
  content: "";
  width: 100%;
  height: 30px;
  position: absolute;
  top: 0;
  background: #FA7E19 none;
}*/

#header {
  max-width:960px;
  margin:0 auto;
  position: relative;
}
#container {width: 100%; background:#fff; padding:30px 2.5%;}
#container .inner {width: 960px; margin:0 auto;}
#container #contents {width: 660px; float:left;}
#container .main {width: 656px; background:#FFF; border:solid 2px #E5E5E1; margin-bottom:20px;padding:0 2.5% 20px;}
#container .main:last-child {margin-bottom:0;}
aside.top {width:280px; float:right;}



@media screen and (max-width:960px){
#container .inner {width: 100%; margin:0;}
#container #contents {width:72%;}
#container .main {width:100%; margin:0 0 3%;}
aside.top {width:26%; float:right;}
}


@media screen and (max-width:768px){
#container #contents {float:none; width:100%;}
#container .main {width:100%; margin:0 0 3%;}
aside.top {float:none; width:100%; margin:0 ;}
aside.top img {width:100%;}
/*#header_wrapper::before {content: none;}*/

}
@media screen and (max-width:740px){
#header_wrapper::before {content: none;}
#container .main {width:100%; margin:0 0 5%;padding:0 4% 20px;}
}

#footer {clear:both;}

/* ページの先頭へ */
#totop {position:fixed; bottom:130px; right:20px; z-index:11;}
#totop a {display:block; width:60px; height:60px; background:url(../images/common/totop.png) no-repeat left top; text-indent:-9999px; overflow:hidden;}
#totop a:hover {-moz-opacity:0.8; opacity:0.8; filter: alpha(opacity=80);}
* html #totop a {display:none;}



/* ヘッダー ============================================================= */
#header {display: flex; justify-content: space-between; align-items: center; padding: 20px 0; position: relative;}

#header h1 {text-align: center; font-size:90%; padding:55px 0 0 0; line-height:1.1; color:#FA7E19; margin-right:12px;}
#header h1 span{
  font-size: 120%;
  font-weight: bold;
}
#header #logo {/*max-width: 464px;*/max-width: 430px;}
#header ul.head_free {display: flex; flex-wrap: wrap; width: 30%; /*width: 47%;*/ align-items: center; right: 0;}
#header ul.head_free li {margin:0 0 0 10px;}
#header ul.head_free li:first-child {width: 100%;}
#header ul.head_free li:nth-child(2) {width: 42%;/*width: 24%;*/}
#header ul.head_free li:nth-child(3) {width: 18%;}
#header ul.head_free li img {width: 100%;}


#header ul li.head_data a {color:#fff; background-color:#FA7E19; padding:20px 15px; font-size:18px; display: block; font-weight: bold;}


#header ul li.head_contact a {color:#FFF000; background-color:#EA0070; /*padding:12px 15px;*/ padding:16px 20px; font-size:18px; font-weight: bold;text-align: center;line-height: 1.3; display: block; white-space: nowrap;}
#header ul li.head_contact a:hover {
  text-decoration:none;
  opacity: 0.8;
}
/*@media screen and (max-width:950px){
	#header ul.head_free {width: 44%;}
}*/

/* グローバルナビ ============================================================= */
#nav_wrapper {width:100%; background:#036EB2;}
/*#nav_wrapper:before {display: block; content:""; background: #0063b0;
background: -moz-linear-gradient(left, #E41962 0%, #0063b0 100%);
background: -webkit-gradient(linear, left center, right center, from(#E41962), to(#0063b0));
background: -webkit-linear-gradient(left, #E41962 0%, #0063b0 100%);
background: -o-linear-gradient(left, #E41962 0%, #0063b0 100%);
background: linear-gradient(to right, #E41962 0%, #0063b0 100%); 
 height: 2px;
}*/
@media screen and (min-width:741px){
/*p#menu {display:none;}*/
#sp_nav {display:none;}
#nav_btn {display:none;}
#nav {max-width: 960px; margin:0 auto;}
#nav ul {display: table; table-layout: auto; width: 100%; position: relative;}
#nav ul li.hover,#nav ul li:hover {position: relative;}
#nav ul li {text-align:center; display: table-cell; width:16%; line-height:1.4; vertical-align: middle;}
/*#nav ul li:nth-child(2) {text-align:center; display: table-cell; width:20%; line-height:1.4;}*/

/*#nav ul li:hover {background:#FA7E19;}*/
#nav ul li a {display:block; color:#FFF; text-decoration:none; padding:28px 2px 28px 5px; letter-spacing:0.06em; font-size:100%; line-height:1.0; font-weight:bold;}
/*#nav ul li:first-child a {border:0;}*/
	
#nav ul li a.cate small {font-size:74%; color:#E6F1F7;}
#nav ul li ul {visibility: hidden; position: absolute; top: 100%; left: 0; background: #E4E4E4; -moz-opacity:0.90; opacity:0.90; filter: alpha(opacity=90); z-index:98;}
#nav ul li ul a, #nav ul li:first-child ul a {padding:0; width:100%; display:block; border-bottom:1px dotted #666;}
#nav ul li ul a li {padding:0 0 12px 10px; width:100%; height:15px; text-indent:0px; color:#000; font-size:84%; line-height:1.4; text-shadow:1px 1px 0 #FFF; border-bottom: 1px solid #FFF; border:0; text-align:left; letter-spacing:0;}
#nav ul li ul a li:first-child {padding:12px 0 12px 10px;}
#nav ul li ul a:hover, #nav ul li ul a:hover li {width:100%; background:#FA7E19; -moz-opacity:1; opacity:1; filter: alpha(opacity=100);}
#nav ul li ul a li span {text-indent:0; background:url(../images/common/arrow2.gif) no-repeat left center; background-size:6px; padding-left:10px;}
}
@media screen and (max-width:960px){
#nav ul li a {font-size:80%;}

}
@media screen and (max-width:768px){
#nav ul li a {font-size:88%;}
#nav ul li ul {display:none;}
}
@media screen and (max-width:768px){

#nav {position: absolute; top:80px; right:0; margin:0 2% 0 2%; padding:5% 5% 1% 5%; display: none; clear: both; z-index:99; width:96%; 
	background-image: linear-gradient(90deg, #00164a, #0068b6 50%, #036eb7);
}
	
#nav:after { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
#nav:after { border-color: rgba(243, 233, 235, 0); border-bottom-color:#96BD2C; border-width:0 6px 14px 6px; right: 5%; }
#nav ul {display: block;}
#nav ul li {display: block; margin-bottom:5%; width: 100%;}
#nav ul li a {color:#FFF; text-decoration: none; font-size:90%;}
#nav ul li a.cate {background:#FFF; color:#333; font-weight:bold; display:block; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; line-height:1.3; text-align: center;}
#nav ul li a span {display: block; background:url(../images/common/arrow1.gif) no-repeat 4% center; background-size:6px; padding:0 2%;}
#nav ul li ul {position:relative; display:block;}
#nav ul li ul li {margin-bottom:0;}
#nav ul li.hover ul,#nav ul li:hover ul {visibility:visible;}
#nav ul li.hover ul li,#nav ul li:hover ul {visibility:visible;}
#nav ul li ul a {text-decoration:underline;}
#nav ul li ul a li span {background:url(../images/common/arrow3.gif) no-repeat 4% center; background-size:6px; padding:4% 2% 4% 8%;}

#nav_btn {border-left:1px solid #96BD2C; margin-bottom:8%;}
#nav_btn ul li {border-right:1px solid #96BD2C; border-bottom:1px solid #96BD2C; /*width:32.9%;*/ width:100%; float:left; margin:0; padding:0; line-height:1;}
#nav_btn ul li img {width:100%; padding:0; margin:0; vertical-align:top;}

#sp_nav {border-top:1px solid #FFF; border-right:1px solid #FFF; box-shadow: 0 2px 6px #999; width: 100%; background:#F1E537;}
#sp_nav ul {width: 100%;}
#sp_nav ul li {text-align:center; float:left; width:49.8%; border-left:1px solid #FFF; border-bottom:1px solid #FFF; line-height:1.2;}
#sp_nav ul li a {display:block; color:#333; text-decoration:none; padding:8% 0; font-size:90%;}
#sp_nav ul li a small {font-size:70%; color:#E6F1F7;}
}
@media screen and (max-width:750px){
	#nav ul li a.cate {padding: 5%; margin-left: 0;}
	#nav {top:74px;}
}
@media screen and (max-width:740px){
	#nav {padding:5% 5% 1% 5%;}
}


@media screen and (min-width:769px){p#menu {display:none;}}

@media screen and (max-width:905px){
  #header h1 {
    display: none;
  }

}

@media screen and (min-width:904px){
.kousya {display: none;}
}

@media screen and (max-width:903px)
{
    #header #logo img{width: 96%;margin-left: 3%;}
 .kousya {margin: -2% 0 0 3%; color:#FA7E19; font-weight: bold;text-align: center;font-size:12px;}
  .kousya span{color:#FA7E19; font-weight: bold;font-size:10px;}
  }
/*@media screen and (max-width:880px){
	#header ul.head_free {width: 42%;}
}*/

@media screen and (max-width:768px)
{
 .kousya { padding: 3%  0; color:#FA7E19; font-weight: bold;text-align: center;font-size:15px;}
  .kousya span{color:#FA7E19; font-weight: bold;font-size:11px;}
  #header #logo {margin:10px 0 5px 5%; width: 100%;}
	/*#header ul.head_free li:first-child {width: 100%; margin-right: 5%;}
	#header ul.head_free {width: 32%;}
	#header ul.head_free li {margin:2px 0 0 0;}
	#header ul.head_free li img {width: 100%;}*/
	#header #logo img{width: 100%; margin-left: 0%;}
	/*.btn_other {display: none;}*/ 
  ./*head_contact{display: none;}*/
}
/* SP ヘッダー */
@media screen and (max-width:768px){
	#header_wrapper {position:relative; background:#FFF; /*padding:2% 0 0 0;*/padding:0 0 0 0;}
	#header {display: block; padding: 2px 0 0 0;}
	#header h1 {display:none;}
	#header #logo {width:80%; margin:2% 0 2% 10px;　/*margin:1% 0 2% 10px;*/}
	#header ul {clear:both; float:none; margin:0; width:100%; border-top:1px solid #CCC; border-bottom:1px solid #CCC; display: none;}
	#header ul li {margin:0 0 0 3%; border:0; border-radius:0; background:none; display: inline-block;}
	#header ul li:hover {background:none;}
	#header ul li a {font-size:80%; margin:0; padding:12px; color:#555;text-decoration:none;display:inline-block; position: relative;}
	#header ul li a:before {content:""; display: block; width: 0;
    height: 0;
    border-top: solid 6px transparent;
    border-right: solid 6px transparent;
    border-bottom: solid 6px transparent;
    border-left: solid 6px #EA0070;
	position: absolute; left:0; top: 50%;
	transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
	}
	#header ul li a span {font-size:100%; vertical-align:middle; color:#E41962;}
	/*#header ul.head_free {width: 81%;} 
	#header ul.head_free li:first-child {margin-right: 0; margin-left: 4%;} */
	p#menu {width:50px; float:right; margin-top:2%; margin-right:2%; margin-bottom:2%}
	p#menu img {width:100%;}
}
/* PC ヘッダー */
@media screen and (min-width:769px){
	#header ul {display: flex; flex-wrap: wrap; width: 44%; align-items: center; right: 0; justify-content: space-between;}
	#header ul li {width: 31%;}
	#header ul li a {color:#FFF; background:#E98400; padding:16px 0; font-size:18px; display: block; font-weight: bold; text-align: center;}
	#header ul li a:hover {text-decoration:none; opacity: 0.8;}
}

/* ヘッダーのボタン スマホのみ */
@media(max-width:768px) {
/*  .pc_only{
    display: none;
  }*/
}
@media screen and (min-width:751px) and (max-width:768px){
  .pc_only.tb{
    display: block;
  }
}
/* 採用ボタン スマホのみ ここまで */



/* フッター ============================================================= */
#footer_wrapper {width:100%;}
#copyright {font-size: 10px; padding:30px 20px; text-align: center;}

/*#footer_wrapper .inner {
  width: 960px;
  margin: 0 auto;
}*/

/*#footer_wrapper:before {display: block; content:""; background: #0063b0;
background: -moz-linear-gradient(left, #E41962 0%, #0063b0 100%);
background: -webkit-gradient(linear, left center, right center, from(#E41962), to(#0063b0));
background: -webkit-linear-gradient(left, #E41962 0%, #0063b0 100%);
background: -o-linear-gradient(left, #E41962 0%, #0063b0 100%);
background: linear-gradient(to right, #E41962 0%, #0063b0 100%); 
 height: 2px;
}*/

@media screen and (max-width:768px){
#footer {padding:4%; width:92%; margin: 0 auto 120px;}
#footer_menu {width:100%; margin:0 0 15px 0;}
#footer_sitemap {width: 100%; float: left; margin-bottom:50px;}
}

@media screen and (max-width:740px){
/*#footer {padding:4% 0 4% 4%; width:92%; margin: 0 auto;}
#footer_menu {font-size:93%;}
#footer_menu li {float:none; padding-bottom:10px;}
#footer_sitemap {width:100%;}
#footer_sitemap div {width: 50%; float:left;}
#footer_sitemap div li a {font-size:83%;}
#footer_group {margin:0 0 12% 0;}
#footer_group ul li {font-size:106%; float:none; margin: 4% 0;}
#footer_group ul li a {border:0;}
#footer_area {margin:0 0 12% 0;}
#footer_area p {margin-bottom:3%;}*/
#copyright {margin-bottom:40px; padding:20px;}

/* ページの先頭へ戻るボタン(2016/8/10追加) ============================================= */
#totop {
	opacity:0.85;
	position:fixed; left:0; bottom:0; width:100%;
	text-align:center;
	background:#036EB2;
	border-top:1px solid #FFF;

	box-shadow:0 0 10px rgba(0,0,0,0.4);
	-moz-box-shadow:0 0 10px rgba(0,0,0,0.4);
	-webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
	-o-box-shadow:0 0 10px rgba(0,0,0,0.4);
	-ms-box-shadow:0 0 10px rgba(0,0,0,0.4);
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	padding:0;
}
#totop a {
	height:40px; padding:15px 0 0 0;
	text-decoration:none; color:#FFF; font-size:13px; font-weight:bold; display:block;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	background:none;
	border:0;
	text-indent:0;
	width:100%;
	text-align:center;
}
#totop:hover {background:#036EB2; opacity:1;}
#totop:hover a {background:#036EB2; opacity:1;}
}



/*--------------------------------------------------------------------------------------------
　　スマホのフッターボタン
--------------------------------------------------------------------------------------------*/
.nav_footer {display: none;}

/*--------------------------------------------------------------------------------------------
		movie_bnr
--------------------------------------------------------------------------------------------*/
#movie {max-width: 860px; margin: 0 auto;}
#movie video {width: 100%;}

.modal-area.video_box {width: auto; max-width: 740px; background: #000;}
.modal-area.video_box video {width: 100%;}
#movie {text-align: center;}
#movie img {box-shadow: 1px 1px 3px rgba(0,0,0,0.9); margin: 50px auto 80px;}
@media (max-width: 870px) {
	#movie img {width: 90%;}
}
@media (max-width: 750px) {
	.modal-area .plainmodal-close {right: -5px;}
}


/* メインビジュアル
------------------------------ */

#mainvisual{
	padding: 60px 0 40px 0;
	/* background-color: #F1E537; */
}

#mainvisual img{
  width:100%;
  vertical-align:bottom;
}

#mainvisual .slick-prev { left: 25px; z-index: 1;}
#mainvisual .slick-next { right: 25px; }
#mainvisual .slick-prev:before,
#mainvisual .slick-next:before { font-size: 28px; }


@media screen and (max-width:768px) {
	#mainvisual{
		padding: 40px 0 10px 0;
	}
}

@media screen and (max-width:740px) {
#mainvisual{ padding: 8% 0 2% 0; margin-top: 0; }
#mainvisual .slick-prev { left: 2%; z-index: 1;}
#mainvisual .slick-next { right: 2%; }
#mainvisual .slick-prev:before,
#mainvisual .slick-next:before { font-size: 20px; }
}

.news_text {text-align: center; padding: 5%;}
.news_text a {font-size: 2.0rem; text-align: center; border-bottom: solid 1px #1111cc; line-height: 1.6;}
.news_text a:hover {text-decoration: none;}

/*---------------
　  clearfix
---------------*/
.clearfix:after {
	 visibility: hidden;
	 display: block;
	 font-size: 0;
	 content: " ";
	 clear: both;
	 height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*---------------------------
　　特長
---------------------------*/
/*#point {width: 100%; background: #FFF5FA; padding: 50px 0;}
#point h2 {text-align: center; font-weight: bold;; margin-bottom: 30px; font-size: 3.0rem; line-height: 1.2;}
#point h2 strong {color: #E41962;}
#point .inner {width: 100%; max-width: 960px; margin: 0 auto; }
#point .inner ul {position: relative; display: flex; margin-top: 40px;}
#point .inner ul li {width: 33%;}
#point .bnr_area {margin: 4% auto; max-width: 750px;}
*/
/*---------------------------
　　必要な理由
---------------------------*/
#reason {padding: 80px 0;}
#reason .inner {width: 100%; max-width: 860px; margin: 0 auto; background: #FFFCEB; border-radius: 16px; padding: 40px; position: relative;}
#reason .inner:before {
	content:"";
	position: absolute;
	display: block;
	width: 198px;
	height: 262px;
	background: url(../images/top/bg_img34.png) no-repeat left top;
	left: -60px; 
	top: -140px;	
}
#reason .inner:after {
	content:"";
	position: absolute;
	display: block;
	width: 180px;
	height: 200px;
	background: url(../images/top/bg_img56.png) no-repeat right top;
	right: -54px; 
	top: -20px;	
}
#reason h2 {color: #333; font-size: 2.8rem; font-weight: bold; text-align: center;}
#reason h2 strong {color: #FFEA00;}
#reason dl {padding: 0 40px;}
#reason dl dt {font-size: 2.3rem; line-height: 1.4; font-weight: bold; color: #0063AB; margin: 40px 0 10px 0; position: relative; padding-left: 30px; counter-increment: number 1;}
#reason dl dt:before {
	content: counter(number) " ";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	color: #C0C0C0;
	top:-10px;
	left:-20px;
	font-size: 5.8rem;
	font-weight: 500;
}
#reason dl dt strong {background:linear-gradient(transparent 76%, #FFEA00 76%); line-height: 1;}
#reason dl dd {font-size: 1.6rem; line-height: 1.5; position: relative; padding-left: 30px; text-align: justify;}

a.btn_link_school {color:#FFF000; background:#EA0070; padding:20px 0; font-size:20px; display: block; font-weight: bold; text-align: center; border-radius: 10px; position: relative; max-width: 320px; margin: 50px auto;}
a.btn_link_school:before {content:""; display: block; width: 0;
    height: 0;
    border-top: solid 6px transparent;
    border-right: solid 6px transparent;
    border-bottom: solid 6px transparent;
    border-left: solid 6px #EEE;
	position: absolute; right:5px; top: 50%;
	transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
	}
a.btn_link_school:hover {text-decoration: none;}

/*---------------------------
　　マイクラについて
---------------------------*/
#minecraft {background: #EEE; width: 100%; padding: 70px 0;}
#minecraft ul {display: flex; max-width: 960px; width: 100%; margin: 0 auto; justify-content: space-between;}
#minecraft ul li {width: 49%; background: #FFF; padding: 25px; border-radius: 14px; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); font-weight: bold;}
#minecraft h2 {background: #0063AA; color: #FFF; font-size: 2.4rem; padding: 15px; margin-bottom: 20px; position: relative;}
#minecraft li h2:after {content:""; display: block; width: 86px; height: 102px; background: url(../images/top/img_mine01.png) no-repeat center top; position: absolute; top:-30px; right: 0; background-size: contain;}
#minecraft li:last-child h2:after {width: 64px; height: 102px; background: url(../images/top/img_mine02.png) no-repeat center top; top:-30px; right: 0; background-size: contain;}
#minecraft h2 strong {color: #FFEF00;}

/*---------------------------
　　コース案内
---------------------------*/
#course {padding: 80px 0;}
#course .inner {width: 100%; max-width: 940px; margin: 0 auto;}
#course h2 {color: #333; font-size: 2.8rem; font-weight: bold; text-align: center;}
#course h3 {color: #333; font-size: 2.2rem; font-weight: bold; text-align: center; padding: 30px 0; line-height: 1.2;}
#course h3 strong {color: #E41962;}

.course_box {padding:10px; background: #94C649; margin-bottom: 30px;}
.course_box#beginner {background: #D44F96;}
.course_box#medium {background: #9B4086;}
.course_box#advanced {background: #4E3D94;}

.course_box h4 {color: #FFF; text-align: center; font-size: 3.0rem; font-weight: bold; padding: 20px;}
.course_box .level {background: #698E31; text-align: center;}
.course_box#beginner .level {background: #98346D;}
.course_box#medium .level {background: #702661;}
.course_box#advanced .level {background: #35246B;}
.course_box .level p {font-size: 1.8rem; display: inline-block; margin: 0 auto; color: #FFF; padding: 5px; font-weight: bold;}
.course_box .level p .recommend {font-size: 2.6rem; color: #FFEF00; font-weight: bold;}

.course_box .inner {background: #EAF4DB url(../images/top/course_img11.png) no-repeat 98% top; background-size: 36%; padding: 20px 40px;}
.course_box#beginner .inner {background: #F6DCEA url(../images/top/course_img12.png) no-repeat 98% 20px; background-size: 36%;}
.course_box#medium .inner {background: #EBD9E7 url(../images/top/course_img13.png) no-repeat 98% 40px; background-size: 36%;}
.course_box#advanced .inner {background: #DCD8EA url(../images/top/course_img14.png) no-repeat 98% 40px; background-size: 36%;}

.course_box p.txt {font-size: 1.6rem; color: #698E31; font-weight: bold; margin-bottom: 10px; max-width: 62%;}
.course_box#beginner p.txt {color: #98346D;}
.course_box#medium p.txt {color: #702661;}
.course_box#advanced p.txt {color: #35246B;}

.course_box .point p.ttl {position: relative; color: #7DB718; font-size: 1.6rem; font-weight: bold;}
.course_box#beginner .point p.ttl {color: #D44F96;}
.course_box#medium .point p.ttl {color: #A049B2;}
.course_box#advanced .point p.ttl {color: #6964CC;}

.course_box .point p.ttl::after {
border-bottom: 1px dotted rgb(114, 114, 114);
    content: "";
    position: absolute;
    left: 38%;
    transform: translateX(-50%);
    width: 50%;
		top: calc(50% - 2px);
}

.course_box .point p.detail {position: relative; font-size: 1.8rem; font-weight: bold; padding-left: 1em;}
.course_box .point p.detail:before {position: absolute; display: block; content:"■"; font-size: 1.8rem; font-weight: bold; color: #7DB718; left: 0;}
.course_box#beginner .point p.detail:before {color: #D44F96;}
.course_box#medium .point p.detail:before {color: #CA6CD8;}
.course_box#advanced .point p.detail:before {color: #877EE0;}

.course_box .ability {display: table; width: 100%; margin-top: 10px;}
.course_box .ability dt {background: #898989; color: #FFF; display: table-cell; width: 14%; padding: 10px; text-align: center; min-width: 8em; vertical-align: middle;}
.course_box .ability dd {background: #FFF; color: #4D8E24; display: table-cell; padding: 10px; font-weight: bold; letter-spacing: -1px;}
.course_box#beginner .ability dd {color: #D44F96;}
.course_box#medium .ability dd {color: #751484;}
.course_box#advanced .ability dd {color: #2F1F86;}

/*---------------------------
　　保護者・生徒の声
---------------------------*/
#voice {background: #FFFCEB; width: 100%; padding: 50px 0;}
#voice h2 {color: #333; font-size: 2.8rem; font-weight: bold; text-align: center; margin-bottom: 50px;}
#voice .inner ul {display: flex; flex-wrap: wrap; max-width: 960px; width: 100%; margin: 0 auto; justify-content: space-between;}
#voice .inner ul li {width: 48%; margin-bottom: 70px; font-weight: bold; position: relative; min-height: 306px;}
#voice .inner ul li img {display: block; position: absolute; width: 80%;}
#voice .inner ul li img.scene {width: 80%; margin-top: 80px;}
#voice .inner ul li img.txt {top:0; right: 0; width:52%;}
#voice .inner ul li:nth-child(2) img.txt {width:44%; right: 20px;}
#voice .inner ul li:nth-child(3) img.txt {width:80%;}
#voice .inner ul li:nth-child(4) img.txt {width:66%;}
#voice .inner ul li:nth-child(5) img.txt,#voice .inner ul li:nth-child(6) img.txt {width:42%; right: 50px;}

/*---------------------------
　　お客様の声
---------------------------*/
#comment {background: #FFFCEB; width: 100%; padding: 80px 0 50px 0;}
#comment h2 {color: #333; font-size: 2.8rem; font-weight: bold; text-align: center; margin-bottom: 50px;}
#comment .inner {background: #FFF; /*padding: 25px 25px 0;*/ padding: 25px 25px; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); max-width: 960px; width: 100%; margin: 80px auto 50px auto;}
#comment .inner.parent {margin: 50px auto; position: relative;}
#comment .inner h3 {background: #EB6D7B; padding: 15px 0 15px 30px; color: #FFF; font-size: 2.4rem; margin-bottom: 30px; font-weight: bold;}
#comment .inner.parent h3 {background: #4E7DB8;}
#comment .inner dl {padding: 0 20px; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#comment .inner dl dt {width: 14%; font-size: 1.8rem; margin-bottom: 50px; line-height: 1.2; font-weight: bold; color: #333; text-align: center; position: relative; padding-top :52px;}
#comment .inner dl dt:before {
	content: '';
	background: url("../images/top/ico_parents.jpg") no-repeat center center;
  position: absolute;
  display: block;
  width: 48px;
  height: 48px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#comment .inner dl dt.student_voice:before {
	background: url("../images/top/ico_student.jpg") no-repeat center center;
}

#comment .inner dl dd {width: 83%; font-size: 1.8rem; padding: 30px 30px 30px 20px; margin-bottom: 50px; line-height: 1.2; font-weight: bold; text-align: justify; background: #efefef; border-radius: 10px; position: relative;}
#comment .inner dl dd::before{	
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: -15px;
  top: 22px;
  border-left: 25px solid #efefef;
  border-top: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
}
/* 白い半円 */
#comment .inner dl dd::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: -25px;
  top: 40px;
  border-left: 25px solid #ffffff;
  border-top: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

#comment .inner dl dd span {display: block; padding-left: 1em; text-indent: -1em;}
#comment .inner dl dd.first {max-width: 51%; margin-right: 32%;}
/*#comment .inner.parent dl dt {width: 16%; position: relative;}
#comment .inner.parent dl dd {width: 84%; color: #2F70B2; position: relative;}*/
#comment .inner.student, #comment .inner.parent {position: relative;}
#comment .inner.student:after {content: ""; display: block; position: absolute; right: 1px; top: 1px; width: 30%; height: 0; padding-top: 20%; background: url("../images/top/img_come_student.jpg") no-repeat center right; background-size: contain;}
#comment .inner.parent:after {content: ""; display: block; position: absolute; right: 1px; top: 1px; width: 30%; height: 0; padding-top: 20%; background: url("../images/top/img_come_parent.jpg") no-repeat center right; background-size: contain;}


/*---------------------------
　　無料体験
---------------------------*/
/* 通常時 */
/*h2.free_trial_ttl {color: #333; font-size: 2.8rem; font-weight: bold; text-align: center; margin: 100px auto 50px auto;}
#free_trial {max-width: 900px; width: 100%; margin: 50px auto; background: #EAF8F9; padding-bottom: 50px;}*/

#free_trial h2 {font-size: 2.8rem; font-weight: bold; text-align: center; color: #333; margin:50px 0 30px 0;}
#free_trial .contact_area h2, .contact_area h2.ttl {
	color: #E98400; 
	font-size: 2.2rem; 
	padding: 40px 15px 0; 
	margin:0; 
	line-height: 1.2; 
	text-align: center; 
	font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact_area h2.ttl::before,
.contact_area h2.ttl::after {
  content: '';
  display: block;
  width: 28%;
  height: 2px;
  background: #E98400;
}
.contact_area h2.ttl::before {
  margin-right: 1em;
}
.contact_area h2.ttl::after {
  margin-left: 1em;
}

.contact_area {background: #FFF8E7; border: solid 1px #E98400; max-width: 900px; margin: 30px auto 0; padding-bottom: 30px;}
.contact_area ul {display: flex; flex-wrap: wrap; align-items: center; right: 0; justify-content: space-between;  margin: 30px 80px 0;}
.contact_area ul li {width: 48%; margin-bottom: 20px;}
.contact_area ul li a {color:#FFF; background:#E98400; padding:20px 0; font-size:20px; display: block; font-weight: bold; text-align: center; border-radius: 10px; position: relative;}
.contact_area ul li a:before {content:""; display: block; width: 0;
    height: 0;
    border-top: solid 6px transparent;
    border-right: solid 6px transparent;
    border-bottom: solid 6px transparent;
    border-left: solid 6px #EEE;
	position: absolute; right:5px; top: 50%;
	transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
	}
.contact_area ul li a:hover {text-decoration: none;}

/*---------------------------
　　教室案内
---------------------------*/
/*.school {background: #EEE; padding: 80px 0;}
.school p.text {text-align: center; margin-bottom: 40px; font-weight: 800;}
.school p.text .kouju {color: #005BAA;}*/


@media screen and (max-width:930px){
	/*.class_list table tr td.address {width: 55%;}*/
	.class_list .btn_link:last-child {margin-top: 6px;}
}
/*@media screen and (max-width:890px){
	.class_list table tr td.name {width: 35%;}
}*/
@media screen and (max-width:750px){
	.class_list {padding: 25px 2% 2% 2%;}
	.class_list table {display: block;}
	.class_list table tr td, .class_list table tr, .class_list table tbody {width: 100%; display:block;}
	.class_list table tr td.name {width: 100%; padding-bottom: 5px; padding-left: 5%;}
	.class_list table tr td.address {width: 100%; padding: 5px 5%;}	
	.class_list table tr td.link {width: 100%; padding: 0 1.5% 24px 1.5%; text-align: center;}
	.class_list table tr td.tel_num {width: 100%; padding: 0 5% 20px;}
	.class_list .btn_link {padding: 10px 0; width: 45%; margin-left: 4px; margin-right: 4px;}
	.class_list table tr:nth-child(2n) {background: #EEE;}
}

.ex_text {text-align: center; padding: 50px 2%;}
.ex_text p {text-indent: -1em; padding-left: 1em; font-size: 1.2rem; text-align: justify; margin: 0 auto; display: inline-block;}

/*---------------------------
　　よくあるご質問
---------------------------*/
#faq {background: #FFF5FA; padding: 80px 0;}
#faq .inner {width: 100%; max-width: 940px; margin: 0 auto;}
#faq h2 {font-size: 3.0rem; font-weight: bold; text-align: center; color: #333; margin-bottom: 50px;}
.box_faq {background: #FFF; padding: 50px; width: 100%; border-radius: 14px; margin-bottom: 20px; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); font-weight: bold; position: relative;}

.box_faq#num1 {background: #FFF url(../images/top/img_qa01.png) no-repeat 95% 20px; background-size: 15%; position: relative;}
.box_faq#num1:after {content:""; position: absolute; display: block; background: url(../images/top/img_qa012.png) no-repeat center right; right:0; bottom:30px; width: 54%; height: 220px; background-size: contain;}

.box_faq#num2:after {content:""; position: absolute; display: block; background: url(../images/top/img_qa02.png) no-repeat center center; right:0; bottom:30px; width: 40%; height: 220px; background-size: contain;}
.box_faq#num3:after {content:""; position: absolute; display: block; background: url(../images/top/img_qa03.png) no-repeat center center; right:0; bottom:30px; width: 40%; height: 300px; background-size: contain;}




.box_faq h3.qes {position: relative; font-size: 2.6rem; line-height: 1.2; color: #0063B1; font-weight: bold; padding-left: 3em; margin-bottom: 40px;}
.box_faq h3.qes:before {content:"Q"; position: absolute; display: block; font-size: 5.6rem; line-height: 1.2; color: #0063B1; left:0; top: -5px;}
.box_faq .ans {width: 62%;}
.box_faq#num1 .ans {width: 48%;}

.box_faq .ans h3 {position: relative; font-size: 2.6rem; line-height: 1.2; color: #E51962; font-weight: bold; padding-left: 3em; margin-bottom: 20px;}
.box_faq .ans h3:before {content:"A"; position: absolute; display: block; font-size: 5.6rem; line-height: 1.2; color: #E51962; left:0; top: -5px;}
.box_faq .ans p {text-align: justify;}



@media screen and (max-width:960px){
#reason .inner:before {
	width: 158px;
	height: 222px;
	background-size: contain;
	left: 20px; 
	top: -120px;	
	}
	#reason .inner:after {
		width: 150px;
		height: 180px;
		background-size: contain;
		right:0; 
		top: -60px;	
	}
	.box_faq {width: 94%; margin: 0 auto 30px;}
}
@media screen and (max-width:920px){
	.tb_only {display: block!important;}
}
@media screen and (max-width:880px){
	.box_faq .ans, .box_faq#num1 .ans{width: 100%;}
	.box_faq {padding-bottom: 50px;}
	.box_faq p {width: 52%;}
	.box_faq#num1 {padding-bottom: 380px;}
	.box_faq#num1:after {background: url(../images/top/img_qa012.png) no-repeat center center; bottom:30px; width: 100%; height: 320px; background-size: contain;}
	.box_faq#num1 p {width: 100%;}
	.box_faq#num2:after {width: 46%; height: 180px;}	
}

@media screen and (max-width:768px){
	#point .inner ul {display: block;}
	#point .inner ul li {width: 80%; margin: 0 auto;}
	#minecraft ul {display: block; width: 92%;}
	#minecraft ul li {width: 100%;}
	#minecraft ul li:last-child {margin-top: 20px;}
	.box_faq p {width: 100%;}
	.box_faq {padding-bottom: 380px;}
	.box_faq#num2:after {width: 96%; height: 280px;}
	.box_faq#num3:after {width: 96%; height: 360px;}
	.contact_area {max-width: 96%; margin: 30px 2% 0;/* padding-bottom: 10px;*/}
	.contact_area ul {display: flex; margin: 30px 2% 0;}
	#comment .inner {margin: 100px 5% 50px 5%; width:90%;}
	#comment .inner.student:after, #comment .inner.parent:after{width: 150px; padding-top: 96px;}
	#comment .inner dl {display: block;}
	#comment .inner dl dt {width: 100%; display: block; background: #efefef; border-radius: 10px 10px 0 0; text-align: left; padding-left: 10%; padding-top: 30px; margin-bottom: 0; padding-bottom: 3px;}
	#comment .inner dl dt:before,#comment .inner dl dt.student_voice:before {
		width: 24px;
		height: 24px;
		background-size: contain;
		top: 54%;
		left: 5%;
		transform: translateX(0);
	}	
	#comment .inner dl dd {width: 100%; display: block; border-radius: 0 0 10px 10px; padding: 20px 20px 20px 10px;}
	#comment .inner dl dd.first {max-width: 100%; display: block; margin-right: 0%;}
	
	#free_trial table {border-left: none; border-top: solid 2px #999;}
	#free_trial table tr th {display: block; width: 100%; border-bottom: dashed 1px #999; border-right: none;}	
	#free_trial table tr td {line-height: 1.4; display: block; width: 100%; border-bottom: solid 2px #999; border-right: none; padding-top: 0;}
	#free_trial table tr td.date {border-bottom: none; padding: 15px 10px 5px 10px;}
	
	.contact_area h2.ttl .pc_only {display: none;}
}
@media screen and (max-width:750px){
	.pc_only{display: none;}
	.sp_only {display: block!important;}	
	.tb_only {display: none!important;}
	#point h2, #course h2, #free_trial h2 {font-size: 2.6rem;}
	#point .bnr_area {margin: 4%;}
	#minecraft h2 {font-size:1.8rem;}
	#minecraft li h2:after {width: 56px; height: 72px; top:-10px;}
	#minecraft li:last-child h2:after {width: 39px; height: 77px; background: url(../images/top/img_mine02.png) no-repeat right top; top:-10px; right: 0; background-size: contain;}
	
	#course h3 {font-size: 2.0rem;}	
	.course_box {margin-bottom: 50px;}
	.course_box h4 {font-size: 2.6rem; padding: 20px;}	
	.course_box .level p {font-size: 1.6rem;}
	.course_box .level p .recommend {font-size: 2.0rem; display: block; text-align: center;}
	
	.course_box .inner {background-position: center bottom; background-size: 90%; padding: 20px 5% 50% 5%;}	
	.course_box#beginner .inner {background: #F6DCEA url(../images/top/course_img02.png) no-repeat center bottom; background-size: 90%;}
	.course_box#medium .inner {background: #EBD9E7 url(../images/top/course_img03.png) no-repeat center 98%; background-size: 90%; padding: 20px 5% 56% 5%;}
	.course_box#advanced .inner {background: #DCD8EA url(../images/top/course_img04.png) no-repeat center 98%; background-size: 90%; padding: 20px 5% 56% 5%;}

	.course_box p.txt {line-height: 1.4; max-width: 100%;}
	.course_box .point p.ttl {position: relative; color: #7DB718; font-size: 1.6rem; font-weight: bold;}

	.course_box .point p.ttl::after {left: 68%; width: 70%;}
	.course_box .point p.detail {font-size: 1.6rem; padding-left: 1em; line-height: 1.6; margin-bottom: 10px;}
	.course_box .point p.detail:before {font-size: 1.6rem; font-weight: bold;}

	.course_box .ability {display: block; width: 100%; margin-top: 10px;}
	.course_box .ability dt {display: block; width: 100%;}
	.course_box .ability dd {display: block; line-height: 1.8; padding: 10px 20px;}	
	
	#reason {padding: 30px 3%;}
	#reason .inner {padding: 20px 10px;}
	#reason .inner:before {background-size: 50%; top: -50px; left: -5px;}
	#reason .inner:after {background-size: 50%; top: 40px; right: 0;}
	#reason h2 {font-size: 2.4rem;}
	#reason dl {padding: 10px;}
	#reason dl dt {padding-left: 24px; font-size: 2.0rem; text-align: justify; margin: 20px 0 10px 0; letter-spacing: -2px;}
	#reason dl dd {padding-left: 24px;}
	#reason dl dt:before {left: -10px;}
	
	#voice	{padding-top: 80px;}
	#voice .inner ul {display: block; /*margin: 0 5%;*/}
	#voice .inner ul li {width: 88%; margin: 0 auto 70px auto; min-height: 306px;}
	#voice .inner ul li:nth-child(2) img.txt {right: 0;}
	/*#voice .inner ul li:nth-child(3) img.txt {width:80%;}
	#voice .inner ul li:nth-child(4) img.txt {width:66%;}*/
	#voice .inner ul li:nth-child(5) img.txt,#voice .inner ul li:nth-child(6) img.txt {right: 0;}
	#comment .inner {margin: 50px 5% 20px 5%; width:90%; padding: 3%}
	#comment .inner h3 {padding: 15px 0 15px 20px; font-size: 1.8rem; margin-bottom: 30px;}
	#comment .inner dl {padding: 3%;}
	#comment .inner dl dt, #comment .inner.parent dl dt {display: block; width: 100%; font-size: 1.6rem; /*margin-bottom: 10px;*/ line-height: 1.2;}
	#comment .inner dl dd, #comment .inner.parent dl dd {display: block; width: 100%; font-size: 1.6rem; margin-bottom: 30px; line-height: 1.6;}
	
	#comment .inner dl dt {padding-left: 54px;}
	#comment .inner dl dd::before{	
		left: -11px;
		top: 22px;
		border-left: 21px solid #efefef;
		border-top: 21px solid transparent;
		border-right: 21px solid transparent;
		border-bottom: 21px solid transparent;
	}
	/* 白い半円 */
	#comment .inner dl dd::after {
		left: -19px;
		top: 40px;
		border-left: 19px solid #ffffff;
		border-top: 19px solid transparent;
		border-right: 19px solid transparent;
		border-bottom: 19px solid transparent;
	}
	
	#free_trial .bnr_area {margin: 4% 6%;}
	#free_trial p {font-size: 2.0rem;}
	#free_trial .btn a {width: 92%; margin: 30px auto; }
	
	#free_trial .inner {padding:8% 4%; max-width: 92%; width: 92%; margin: 40px auto 0 auto; border-radius: 30px;}
	
	.contact_area {padding-bottom: 0;}
	.contact_area ul li {width: 49%;}
	.contact_area ul li a {font-size:16px;}
	.contact_area ul li a:before {right:0;
	border-top: solid 4px transparent;
    border-right: solid 4px transparent;
    border-bottom: solid 4px transparent;
    border-left: solid 4px #EEE;}
	#free_trial .contact_area h2, .contact_area h2.ttl {
		padding: 25px 15px 0;
		font-size: 1.6rem;
	}	
	.contact_area h2.ttl::before,
	.contact_area h2.ttl::after {
		width: 24%;
	}
	
	#free_trial a.btn_link {position: relative; background: #666; margin: 0 auto; color: #FFF; font-weight: bold; font-size: 1.5rem; text-align: center; display: inline-block; padding: 10px 30px; margin-left: 20px; border-radius: 10px;}
	#free_trial a.btn_link:before {
		position: absolute;
		content: "";
		width: 6px;
		height: 6px;
		border-top: 1px solid #FFF;
		border-right: 1px solid #FFF;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top:42%;
		right: 10px;
	}	
	
	.school {padding: 40px 0;}
	.school .inner {width: 94%; margin: 0 auto;}
	.school_list {display: block;}
	.school p.txt22 {text-align: justify; padding: 2%; margin-bottom: 20px;}
	.school_list li {padding: 30px; width: 100%; margin-bottom: 16px;}
	.school_list li:last-child {margin-bottom: 0;}
	.ex_text p {font-size: 1.2rem; text-align: left;}
	
	.box_faq {padding: 8% 6% 380px 6%;}
	.box_faq h3.qes {position: relative; font-size: 2.0rem; line-height: 1.2; color: #0063B1; font-weight: bold; padding-left: 3em; margin-bottom: 40px;}
	.box_faq h3.qes:before {font-size: 5.6rem; line-height: 1.2; top: -10px;}
	
	.box_faq .ans h3 {font-size: 2.0rem; padding-left: 3em; margin-bottom: 20px;}
	.box_faq .ans h3:before {font-size: 5.6rem; top: -10px;}
	
	.box_faq#num1 {padding-bottom: 280px; background-image: none;}
	.box_faq#num2 {padding-bottom: 300px;}
	.box_faq#num1:after {background: url(../images/top/img_qa012.png) no-repeat center center; bottom:0; width: 96%; height: 260px; background-size: contain;}
	
	a.btn_link_school {max-width: 90%;}
}
@media screen and (max-width:420px){
	#voice .inner ul li {min-height: 230px;}
}

	#comment .inner.parent:after {background-image: url("images/top/img_come_student.jpg");}
	#comment .inner.parent h3 {background: #EB6D7B;}
	#free_trial table tr td {line-height: 1.6;}
	.news_text p {font-size: 120%; text-align: center; margin-bottom: 10px; line-height: 1.4;}
	.news_text p strong {background: #FF0;}
/*	#comment .inner.parent dl dd {color: #EB6D7B;}
	#comment .inner.parent dl dt, #comment .inner.parent dl dd {margin-bottom: 36px;}*/
	.school .text strong {color: #F00;}
	#free_trial p.text2 {font-size: 100%; text-align: left; padding: 20px 0 10px;}
	@media (max-width: 768px) {
		#free_trial table {border-top: none;}
		#free_trial table tr th {border-bottom:dashed 1px #CCC; border-top: solid 1px #666;}
		#free_trial table tr td {margin-bottom: 10px;}
	}
	@media (max-width: 750px) {
		/*#comment .inner.parent dl dt {margin-bottom: 5px;}*/
		#comment .inner.parent h3 {font-size: 100%; padding-left: 14px;}
	}
	.emergency_info {max-width: 770px; margin: 50px auto 0;}
	.emergency_info p {margin-bottom: 50px; text-align: center;}
	.emergency_info p strong {color: #F00;}
	@media(max-width:750px) {
	.emergency_info p {text-align: justify; padding: 5%;}
	}





.top_inner {width: 100%; max-width: 960px; margin: 0 auto;}
.mar_top100 {margin-top: 100px;}
@media screen and (max-width:960px){
	.mar_top100 {margin-top: 8%;}
}