@charset "utf-8";
/* CSS Document */
/*font*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700;900&display=swap');

/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body { overflow: hidden;}
#wrap {}

.pcNone{ display:none;}
.spNone{ display:block;}
.dispFlex{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}

/*----------------------------------------------------------------------------
 ***                                                              contentsArea
----------------------------------------------------------------------------*/
#contentsArea { max-width:950px; margin:0 auto;}

/*----------------------------------------------------------------------------
 ***                                                                frontPage
----------------------------------------------------------------------------*/
/*font*/
.frontPage body, .frontPage h1, .frontPage h2, .frontPage h3, .frontPage td, .frontPage th, .frontPage p, .frontPage li{
	font-family: YuMincho, 'Yu Mincho', serif;
}

.contentsInner{ max-width: 950px; margin: 0 auto;}
.notosans{ font-family: 'Noto Sans JP', sans-serif;}
.hiragino-serif {font-family:'Hiragino Mincho Pro',serif;}
.bg_main{background-image: url("../images/bg_main.png"); background-position: center;}
.bg{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position:relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}
.bg:before{
	content: "";
	position: absolute;
	top: 1%; 
	width: 100%;
	height: 98%; 
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.8) 70%,rgba(255,255,255,0) 100%);
	z-index: -1;
}
.bg_white{position: relative;}
.bg_white:before{
	content: "";
	position: absolute;
	top: 0; 
	width: 100%;
	height: 100%; 
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 20%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(255,255,255,0.8) 80%,rgba(255,255,255,0) 100%);
	z-index: -1;
}

.bg04.bg_white:before{top: 3%; height: 62%;}
.bg02{background-image: url("../images/bg02.jpg");}
.bg03{background-image: url("../images/bg03.jpg");}
.bg04{background-image: url("../images/bg04.jpg");}

/*wrap*/
.frontPage img{width: 220px; height: auto;}
.btn{text-align: center;}
.btn img{width: 500px;}
.btn a:hover{opacity: 0.7;}
.frontPage h2{text-align: center; font-size: 2.4em; color: #42210B; margin-bottom: 0.6em; font-family: 'Noto Serif JP', serif, 'Hiragino Mincho Pro'; font-weight: 900}
.borderYellow{position: relative; z-index: 0;background: linear-gradient(transparent 70%, #FFFF00 70%);}
.colorRed{color: red;font-size: 105%;}
.contents{padding: 60px 0 0;}
.contents.mainSec {padding-top: 60px;}
.contents02{padding: 75px 0;}

.frontPage .topSec{	
	height: 550px;
	background: #F1EDE6;
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%); 
	padding: 0;
}
.frontPage .topSec:before{
	background-image: url("../images/bg_top.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat; 
	position: absolute;
	content: "";
	height: 82%; 
	width: 100%;
}
.frontPage .topSec:after{background: #F1EDE6; position: absolute; content: "";height: 140px; width:100% ;bottom: 0;}
.frontPage .topSec .contentsInner{padding-top: 70px;position: relative;}
/* .frontPage .topSec .contentsInner:before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 40px 40px 0 40px;
	border-color: #F1EDE6 transparent transparent transparent;
	position: absolute;
	bottom: -40px;
	left: 0;
	right: 0;
	margin: auto;
} */
.frontPage .topBox{	position: relative; z-index: 1;}
.frontPage .topBox .btn{margin: 20px auto;}
.frontPage .topBox p{text-align: center; color: #603813;margin-top: 0.2em;margin-bottom: 0em;}
.frontPage .topBox .txt_top{font-size: 1.4em; font-weight: 600;margin-top: 3em;}
.frontPage .topBox .txt_top .borderYellow{font-size: 1.2em; font-weight: 600; margin-left: 3em; line-height: 2em;}
.frontPage .topBox .txt_top img{width: 115px; margin-left: 0.5em; margin-bottom: 0.5em;}
.frontPage .topBox .topBox_topic{justify-content: center;}
.frontPage .topBox .topBox_topic li{ margin: 0 8px; background: #F1EDE6; border: solid 6px #603813; text-align: center; width: 125px; height: 125px; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #603813; margin-top: -5px;}
.frontPage .topBox .topBox_topic li p{margin: 0 auto; font-size: 0.9em;line-height: 1.2em;font-weight: 500;}
.frontPage .topBox .topBox_topic li .ttl{margin: 1em auto 0.6em;}
.frontPage .topBox .topBox_topic li span{font-size: 1.5em; font-weight: 900; font-family: 'Noto Serif JP', serif, 'Hiragino Mincho Pro'; line-height: 1.2em;}
.frontPage .ttl_top01 img{width: 465px}
.frontPage .ttl_top02{position: absolute; top: -78px; left: -30px;}
.frontPage .ttl_top03{position: absolute; top: 40px; right: -15px;}
.frontPage .ttl_top03 img{width: 250px;}

.frontPage .topBox .priceInner{width: 60%;padding: 1em 0;margin: 0 auto;}
.frontPage .topBox #appBtnBox ul{width: 95%;margin: 0.5em auto 1em;background: #fff;padding:1em;border-radius: 15px; }
.frontPage .topBox #appBtnBox li{width: 36%;}
.frontPage .topBox #appBtnBox li img{width: 100%;}
.frontPage .topBox .priceInner .txtSizeSS {font-size:100%; }


/*--アプリ留学でデキること--*/
.frontPage .mainSec{}
.frontPage .mainSec .dekirukoto{background-image: url("../images/img_main00.png"); width: 90%; height: 290px;background-size: contain;background-position: center;background-repeat: no-repeat;margin: 0 auto 2em;}
.frontPage .mainSec ul{padding: 4.8em 0 0em 6.8em;}
.frontPage .mainSec li{font-size: 1.5em; font-weight: 700;font-family: 'Noto Serif JP', serif, 'Hiragino Mincho Pro'; margin-bottom: 0.6em;}
.frontPage .mainSec li:before{background-image: url("../images/img_check01.png"); background-repeat: no-repeat;content: "";display: inline-block;width: 1.5em;height: 1.5em;background-size: contain; padding-right: 0.7em;vertical-align: bottom;}
.frontPage .mainSec li:nth-child(2):before{background-image: url("../images/img_check02.png");}
.frontPage .mainSec li:nth-child(3):before{background-image: url("../images/img_check03.png");}


/*--英語漬けの5ステップ--*/
.frontPage .stepSec .stepBox{margin: 20px auto; position: relative;}
.frontPage .stepSec .stepBox:before{content: ""; position: absolute; border: dashed 1px #42210B; height: 105%; left: 13%; z-index: -1;}
.frontPage .stepSec .stepBox05:before{ border:none;}
.frontPage .stepSec .ttl_step{width: 80%; margin: 0 auto;background-image: url("../images/ttl_step.png");background-size: 100%;padding: 0.3em 0.6em 0.6em;}
.frontPage .stepSec .ttl_step img{width: 13%;margin-right: 1%;padding-right: 2%;border-right: solid 1px #fff;}
.frontPage .stepSec .ttl_step span{padding-top: 1%;color: #fff;font-size: 140%;font-weight: bold;vertical-align: sub;font-family: 'Noto Serif JP', serif, 'Hiragino Mincho Pro';}
.frontPage .stepSec .list_step{justify-content: center; align-items: flex-end;}
.frontPage .stepSec .list_step p{margin: 10px 10px;}
.frontPage .stepSec .list_step04{margin-left: 300px;}
.frontPage .stepSec .list_step04 .img_step04_02{width: 50%;}
.frontPage .stepSec .list_step05{/*justify-content: flex-end; */width: 83%; margin: 20px auto 30px;}
.frontPage .stepSec .list_step05 li{font-size: 1em; width: 42%; height: auto; margin: 10px 0 0 10px; background: #F1EDE6; padding: 25px;}
.frontPage .stepSec .list_step05 dd{margin-top: -0.5em; font-size: 1.1em;}
.frontPage .stepSec .list_step05 dt{font-size: 1.4em; font-weight: 900; margin-bottom: 0.8em;color: #42210B; font-family: 'Noto Serif JP', serif, 'Hiragino Mincho Pro';}
.frontPage .stepSec .txt_step05{text-align: center; font-size: 2em; font-weight: 900; color: #42210B;font-family: 'Noto Serif JP', serif, 'Hiragino Mincho Pro';margin-bottom: 2em;}


/*--英語が上達しやすい！その理由--*/
.frontPage .topicSec .topicBox{background: #f1ede6;padding: 40px 90px; margin-bottom: 20px;}
.frontPage .topicSec .topicBox h3{font-size: 1.9em;font-family: 'Noto Serif JP', serif, 'Hiragino Mincho Pro'; font-weight: 900;margin-bottom: 0.5em;}
.frontPage .topicSec .topicBox p{font-size: 1.2em;}
.frontPage .topicSec .topicBox h3,
.frontPage .topicSec .topicBox p{text-align: center;}

.frontPage .topicSec .topicBox_white01,
.frontPage .topicSec .topicBox_white02,
.frontPage .topicSec .topicBox_white03{background: #fff; padding: 30px 40px; margin-top: 20px; position: relative;}

.frontPage .topicSec .topicBox_white01 {position: inherit;}
.frontPage .topicSec .topicBox_white01 ul{/*justify-content: space-between;*/ margin: 0 auto;}
.frontPage .topicSec .topicBox_white01 li {position: relative;margin: 2.5em 0.6em 0;}
.frontPage .topicSec .topicBox_white01 li:nth-child(2){margin: 0 1em; z-index: 1;}
.frontPage .topicSec .topicBox_white01 li img{width: 170px;}
.frontPage .topicSec .topicBox_white01 li p{position: absolute;}
.frontPage .topicSec .topicBox_white01 li p img{width:70%;}
.frontPage .topicSec .topicBox_white01 .fukidashi01{text-align: left; bottom: 0; left: -5em;}
.frontPage .topicSec .topicBox_white01 .fukidashi02{text-align: right; top: 1em; right: -2.5em;}
.frontPage .topicSec .topicBox_white01 .fukidashi03{text-align: right; top: 2.5em; right: -3.5em;}

.frontPage .topicSec .topicBox_white02{padding-top: 65px;}
.frontPage .topicSec .topicBox_white02 p{text-align: left;width: 64%;}
.frontPage .topicSec .topicBox_white02 p img{margin: 0; position: absolute; bottom: 0; right: 5%}

.frontPage .topicSec .topicBox_white03 {padding-bottom: 0;}
.frontPage .topicSec .topicBox_white03 p{margin: 0; letter-spacing: -0.07em}
.frontPage .topicSec .topicBox_white03 img{width: 35%;}
.frontPage .topicSec .topicBox_white03 .fukidashi04{position: absolute; text-align: right; top: 12%; left: -4%;}
.frontPage .topicSec .topicBox_white03 .fukidashi05{position: absolute; text-align: left; bottom: 3%; right: -4%;}
.frontPage .topicSec .topicBox_white03 .fukidashi04 img,
.frontPage .topicSec .topicBox_white03 .fukidashi05 img{width: 50%;}


/*--priceBox--*/
.frontPage .priceBox .price{color: #D12222;font-size: 2.5em;line-height: 1em;margin-top: 0.5em;}
.frontPage .priceBox .price strong{font-size: 1.3em; vertical-align: top; padding-left: 0.1em;}
.frontPage .priceBox .price span{font-size: 0.5em;}
.frontPage .priceBox .price .kome{font-size: 0.4em;color: #42210B; font-weight: bold;}
.frontPage .priceBox .atari{border: 3px solid #D12222; border-radius: 5px; padding: 0.2em 0.3em 0.3em; line-height: 1em; font-size: 190%; margin: 0.5em; margin-left: 2em;}
.frontPage .priceBox .atari span{font-size: 0.53em; font-weight: bold;}
.frontPage .priceBox .atari strong{padding-left: 0;}

.frontPage .txtOtameshi{font-weight: bold;text-align: center;position: relative;margin: 0 auto 2em auto;padding: 0em 0 0em 0em;font-size: 160%;}
.frontPage .txtOtameshi .kikan{font-size:70%; }
.frontPage .txtOtameshi .cnp_txt{color: #DC0003;font-weight: bold;font-size: 150%;margin-left: 0em;}
.frontPage .txtOtameshi .big_txt{font-size: 140%;}
.frontPage #bottomAreaInner .txtSizeSS{font-size: 120%;}


/*--解き進めれば、さらなる難問にもチャレンジできる！--*/
.frontPage .dojoSec{margin: 6em 0 0;}
.frontPage .dojoSec h2{letter-spacing: -0.05em;}
.frontPage .dojoSec .txt{text-align: center; font-size: 1.2em; font-weight: 500; margin-bottom: 1.2em;}
.frontPage .dojoSec .btnList{justify-content: center; margin-bottom: 40px;}
.frontPage .dojoSec .btnList li{margin: 0 10px;}
.frontPage .dojoSec .btnList img{width: 320px}
.frontPage .dojoSec .dojoBox{background: #fff; width: 750px; margin: 0 auto 40px;}
.frontPage .dojoSec .dojoBox h3{background: #42210B; padding: 0.8em 2em; margin: 0 auto;}
.frontPage .dojoSec .dojoBox .dojoBoxInner{padding: 2em ; font-size: 1.2em;}
.frontPage .dojoSec .dojoBox p{margin: 0;}
.frontPage .dojoSec .dojoBox .img img{width: 100%;}
.frontPage .dojoSec .dojoBox .otherBox{align-items: center; justify-content: center;}
.frontPage .dojoSec .dojoBox .txt_other{width: 60%;}
.frontPage .dojoSec .dojoBox .txt_other.w100{width: 100%; margin-bottom: 1em;}
.frontPage .dojoSec .dojoBox .img_other{padding: 0 0 3% 2%;margin: 0;}
.frontPage .dojoSec .dojoBox .img_other img{width: 255px;}
.frontPage .dojoSec .dojoBox .ttl_other {background: #736357; color: #fff; font-weight: 600;margin: 1.5em auto 0;padding: 1em 1em 0.8em;}
.frontPage .dojoSec .dojoBox dl{margin: 1em auto 1.5em;}
.frontPage .dojoSec .dojoBox dt{margin-bottom: 0.2em;}
.frontPage .dojoSec .dojoBox dd{border-bottom: dashed 1px #736357;margin-bottom: 0.8em;padding-left: 0.9em;}
.frontPage .dojoSec .dojoBox03 img {width: 100%;}

.frontPage #bottomArea {padding-top: 46px;}
.frontPage #bottomArea .priceInner{margin: 0 auto;width: 650px;}
.frontPage #bottomArea .txt{color: #42210B; font-size: 1.4em; margin: 0 0 0 2em; position: relative; z-index: 1;}
.frontPage #bottomArea .priceBox{margin: 0 auto 1.5em;width: 100%;padding: 0;padding: 0.5em 0 0.1em;}
.frontPage #bottomArea .price{color: #D12222; font-size: 3em; line-height: 0.8em;margin: 25px auto 20px;text-align: center;}
.frontPage #bottomArea .price strong{font-size: 1.3em; vertical-align: top; padding-left: 0.1em;}
.frontPage #bottomArea .price span{font-size: 0.5em;}
.frontPage #bottomArea .price .kome{font-size: 0.4em;color: #42210B;}
.frontPage #bottomArea .img_fee02{ width: 120px; margin-left: 0.5em;margin-top: -0.5em;}
.frontPage #bottomArea p{font-size: 2.3em;font-weight: 600;text-align: center;margin-bottom: 15px;}
#box_policy{justify-content: center;align-items: center;background-color: #000; width: 100%; padding: 1em 0;}
#box_policy li{margin: 0 1em; padding: 0; text-align: center; width: 10em;}
#box_policy li:first-child {width: 25em;font-size: 130%;}
#box_policy li a{color: #fff;}
#bottomAreaInner h2{margin-top: 37px;}
#footerCopyright{background: #000 !important;}

#footerArea{font-size: 74%;}

#risusapuSec {background: url("../images/img_contents32_back.png") bottom center no-repeat; /*margin-top: 110px;*/ margin-bottom: -8px; padding-top: 1px;}
#risusapuSec .risusapuInner{ margin-top: -30px;}
#risusapuSec .risusapuInner img{ margin: 0 auto; padding-left: 3em; width: auto;}

/*----------------------------------------------------------------------------
 ***                                                     voice
----------------------------------------------------------------------------*/
#voice{max-width:950px; margin:0px auto 4em auto;  }
#voice .voiceBox_all{padding: 60px 0 30px 0; }
#voice .voiceBoxSec{display: flex;justify-content: space-between;align-items: stretch;flex-wrap: wrap;}
#voice .voiceBox{ margin:10px 3px 40px 3px; background: #FBE7EE;padding:15px 20px 10px 20px;width: 43%;position: relative;border-radius: 10px;}
#voice .voiceBox::before{
	content: "";
    position: absolute;
    bottom: -1.8em;
    left: 3em;
    margin-top: -1em;
    border-top: 35px solid #FBE7EE;
    border-left: 50px solid transparent;
    border-right: 0px solid transparent;
    transform: rotate(0deg);}

#voice .voiceBox:last-child{border-bottom: none;}
#voice .voiceBox p.ttl{font-size: 20px;font-weight: bold;border-bottom: 1px solid #222;padding-bottom: 5px;}
#voice .voiceBox p{font-size: 16px;}
#voice .voiceBox p span{font-size: 14px;margin-top: 10px;display: inline-block;line-height: 1.3;}



@keyframes flash {0%,100%{background-color:#ff0; color: #4b3524;} 50%{background-color:#fff; color: #4b3524;}}

@media (max-width: 1025px) and (min-width: 415px){
	.frontPage .topSec .contentsInner{padding-top: 100px;}
	.frontPage .ttl_top01 img{width: 350px;}
	.frontPage .ttl_top03 img{width: 180px;}
	.frontPage .ttl_top03{top: 120px;right: 0;}
	.frontPage .ttl_top02 img{width: 185px;}
	.frontPage .ttl_top02{top:-9px;left: -10px; }
	.frontPage .mainSec ul{padding: 5.2em 0 0 3.8em;}
	.frontPage .mainSec li{font-size: 1.3em;}
	.frontPage .stepSec .list_step04{margin-left: 140px;}
	.frontPage .stepSec .list_step05{width: 95%;}
	.frontPage .stepSec .list_step05 li{width: 40%;margin: 10px 10px}
	.frontPage .priceBox{width: 75%;}
	.frontPage .topicSec .topicBox{padding: 40px; }
	.frontPage .topicSec .topicBox_white02{padding-top: 30px;}
	.frontPage .dojoSec h2{font-size: 1.9em;}
	#box_policy li:first-child{width: 45em;}
}