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

/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea{}


/*----------------------------------------------------------------------------
 ***                                                              contentsArea
----------------------------------------------------------------------------*/
#contentsArea{}
#contentsAreaInner{}


/*----------------------------------------------------------------------------
 ***                                                              mainsection
----------------------------------------------------------------------------*/
.mainSection{ margin-bottom:4em; position:relative;}
/*.mainSection:after{
	content: "";
	border-top: 30px solid #FFF;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	position: absolute;
	left: calc(50% - 30px);
	bottom: calc(-4em - 28px);
}*/
.mainSectionInner{ max-width:1000px; margin:0 auto; border:1px solid #e6e6e6; border-radius:20px;}
.mainSection h3{}

.secBox{}
.secBox > .sectionInner{}


/*----------------------------------------------------------------------------
 ***                                                              mainImgSec
----------------------------------------------------------------------------*/
#mainImgSec{ background:url(../intro/images/mainImg.png) center top no-repeat; background-size:auto 100%;}
#mainImgSecInner{}
#mainImgSec h2{}
#mainImgSec h2 span{}
#mainImgSec p{}

/*----------------------------------------------------------------------------
 ***                                                              mainImgSec2
----------------------------------------------------------------------------*/
#mainImgSec2{ background:url(../price/images/mainImg.png) left top no-repeat; background-size:auto 100%;}
#mainImgSec2Inner{ position:relative;}
#mainImgSec2 h2{}
#mainImgSec2 h2 span{}
#mainImgSec2 p{ position:absolute; right:40px; bottom:-40px;}


/*----------------------------------------------------------------------------
 ***                                                              introSec
----------------------------------------------------------------------------*/
#introSec{ background-color:#0DA367;}
#introSec::after{ border-top:30px solid #0DA367;}
#introSec .sectionInner{}
#introSec h3{}
#introSec h3 span{}
#introSec p{ margin-bottom:0;}
#introSec ul{ justify-content:space-around; margin-bottom:0.5em; flex-wrap:wrap;}
#introSec li{ cursor:pointer;margin-bottom: 1em;}
#introSec li a{ text-decoration:none;}

.courseListBox{ width:465px; box-shadow:0px 0px 4px rgba(0,0,0,0.5); background-color:#FFF; border-radius:10px; position:relative;}
.courseListBox dl{ padding:13px 0 0 15px;}
.courseListBox dt{ font-size:162.5%; color:#000; margin-bottom:8px; font-feature-settings: "palt";}


.courseListBox dd:nth-of-type(1){ font-size:81.25%; color:#666; margin-bottom:8px;}
.courseListBox dd:nth-of-type(1) span{color:#ED1C24;font-weight: bold;font-size: 120%;}
.courseListBox dd:nth-of-type(2){ font-weight:bold; color:#000; margin-bottom:0.7em;}
.courseListBox dd:nth-of-type(2) span{ font-size:270%; color:#F00;}
.courseListBox dd:nth-of-type(2) .txtSizePrice{ margin-left:0.2em;}
.courseListBox dd:nth-of-type(2) .txtSizeYen{ font-size:200%;}
.courseListBox dd:nth-of-type(2) .tax_in{font-size: 120%;color: #666;padding-left: 3.8em;}
/*.courseListBox dd:nth-of-type(2) .txtSizeS{ color:#000; font-size:80%;}*/
.courseListBox p{}

.bottomText{ font-size:81.25%; border-radius:0 0 10px 10px; padding:0.1em 0 0.2em 25px;}
.bottomText a{ color:#FFF; text-decoration:none;}
.bottomText img{ vertical-align:-1px; margin-left:5px;}
.posi_CLB{ margin-bottom:0; position:absolute; bottom:-7px; transform:scale(0.9)}

#reverseBox,
#standardBox{}

#reverseBox #susumekata{ margin-bottom: 39px;}
#reverseBox .bottomText{ background-color:#C1669E;}
#reverseBox .posi_CLB{ right:0px;}
#reverseBox #teacher img{margin-right:-6px; margin-bottom:-1px;}
#reverseBox #girl img{margin-right: 62px;}
#standardBox{}
#standardBox .bottomText{ background-color:#97005D;}
#standardBox .posi_CLB{ right:9px;}
.bottomText{ padding: 5px 0 5px 15px;}
#difficultyBox #nankan{margin-bottom: 39px;}
#difficultyBox .bottomText{ background-color:#662D8A;padding-left: 45px;}
#difficultyBox .posi_CLB{ right:0px;}
#difficultyBox .newtag{position: absolute;top: -5%;left: -5%;}



#plussection .bottomText{ background-color: #9E76B4;padding-left: 45px;}
#plussection .posi_CLB{ right:0px;}



/*----------------------------------------------------------------------------
***                                                              programSec
----------------------------------------------------------------------------*/
#programSec{ padding-top:4.5em;}
#programSecInner{}
#programSec h3{}
.titleComment{}

#programSec .tableBox{ max-width:795px; margin:0 auto; padding-bottom:0em; position:relative;}
/*#programSec .tableBox::after{
	content: "";
	border-top: 30px solid #FFF;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	position: absolute;
	left: calc(50% - 20px);
	bottom: -30px;
}*/
#programSec table{ width:100%;}
#programSec tr{}
#programSec th{ padding:0.4em 0; width:130px;}
#programSec th:first-child{ width:225px; border-top:none; border-right:none; position:relative;}
#programSec th a{ display:block; position:relative;}
#programSec th a:hover{ opacity:0.5;}
#programSec th a::before{ content:""; width:21px; height:21px; background:url(../course/images/icon_contents01.png) left top no-repeat; background-size:100%; position:absolute; bottom:0; right:20px;}
#programSec td{ text-align:center; vertical-align:middle;}
#programSec td span{ font-size:30px; font-weight:900; color:#75B8B9;}
#programSec td .font_red{ color: #F00; font-weight: bold; font-size: 175%; line-height: 1.5em;}
#programSec td .font_s{ font-size: 100%; color: #666;}
#programSec td .kome_{ font-size:30px; font-weight:900; color:#0DA567; display: inline-block; padding-top: 20px;}
#programSec td p{ font-size:10px; font-weight:500; color:#000;text-align: center;}
/*#programSec dl .font_b{ font-size: 150%; color: #3EB9BC;}*/
.tuition-label{ color: #3EB9BC; font-size: 143%; padding: 6px 0 0 8px;}

#programSec tr:nth-of-type(1){}
#programSec tr:nth-of-type(1) th{ font-size:137.5%; line-height:1em; padding:0.5em 0 0.3em;}
#programSec tr:nth-of-type(1) th a{ color:#FFF; text-decoration:none;}
#programSec tr:nth-of-type(1) th a::before{ content:none;}
#programSec tr:nth-of-type(1) th span{ font-size:59%; font-weight:normal;}
#programSec tr:nth-of-type(1) th img{ margin-left:0.5em;}

.bgColor_Black{ background-color:#000; border:none;}
.bgColor_Brown{ background-color:#C1669E; color: #FFF;}
.bgColor_Red-brown{ background-color:#97005D; color: #FFF; border-radius: 0 20px 0 0;}
.bgColor_purple-brown{ background-color:#662D8A; color: #FFF;}
.bgColor_purple{ background-color:#9E76B4; border:none;}

.tableBox .bgColor_Black,
.tableBox .bgColor_Brown,
.tableBox .bgColor_Red-brown,
.tableBox .bgColor_Red-brown{ border-bottom:2px solid #000;}
.tableBox .bgColor_purple-brown,
.tableBox .bgColor_purple{ border-bottom:2px solid #000;}
.tableBox .bgColor_Black{ border-radius:20px 0 0 0;}
.tableBox .bgColor_purple{ border-radius:0 20px 0 0;}
.tableBox .bgColor_Red-brown{ border-radius:0 20px 0 0;}

#programSec .chusyaku{ font-size:small;padding-left: 100px;}

#programSec th dl{ float:left; padding:0.6em 0 0 1.5em;}
#programSec th dt{ font-size:118.75%; margin-bottom:0.3em;}
#programSec th dt img { margin-bottom:0.3em;}
#programSec th dd{ font-size:87.5%; font-weight:normal;}
#programSec th p{ float:right; padding-right:45px;}
#spImg24h { margin-right: -15px;}
#programSec .mantomanBtn td:nth-of-type(3) span,#programSec .refundBtn td:nth-of-type(3) span{color:#F15A24; }

.mantomanBtn{}
.managemantBtn{}
.stepBtn{}
.selfBtn{}
.supportBtn{}
.optionBtn{}




/*----------------------------------------------------------------------------
***                                                               detailSec
----------------------------------------------------------------------------*/
#detailSec{ padding:3em 0; background-color:#f0f0f0; border-radius: 0 0 10px 10px; margin-top: 2em;}
#detailSecInner{ max-width:1000px; margin:0 34px 0 34px; padding-top:30px; background-color:#FFF; border-radius:10px;}

.detailBox{ border-bottom:1px dotted #cacaca; margin:0 30px 45px;}
.detailBox h4{ float:left; font-size:150%;}
.detailBox h5{ font-size:118.75%; margin-bottom:1em; padding-top:0.2em;}
.detailBox .kome{ font-size:118.75%; margin-bottom:2em; padding-top:0.2em;}


.courseSpan{ float:right; font-weight:normal; margin-top: -0.1em;}
.courseSpan2{ float:right; font-weight:normal; margin-top: -0.4em;}
.courseSpan span{ font-size:63.158%; color:#FFF; padding:0.3em 0.4em 0.4em; margin-right: 0.3em; border-radius:2px;display: inline-block;}
.courseSpan span:last-child{ margin-right:0;}
.courseSpan2 span{ font-size:63.158%; color:#FFF; padding:0.3em 0.4em 0.4em; margin-right: 0.3em; border-radius:2px;display: inline-block;}
.courseSpan2 span:last-child{ margin-right:0;}
.courseSpan p{ font-size:78%; color:#000; margin-top: 5px;}
.courseSpan .reverse{}
.courseSpan .standard{}
.courseSpan .study{}

.detailBoxRight{ padding-left:200px;}
.detailBoxRight dl{}
.detailBoxRight dt{}
.detailBoxRight dd{ font-size:81.25%; color:#4d4d4d; line-height:1.5em;text-align: justify; margin-bottom: 43px;}
.detailBoxRight ul{}
.detailBoxRight li{}

.commentText{ font-size:87.5%; color:#4d4d4d; line-height:1.5em; margin-bottom:1em;}

.detailBoxRight_Left{ float:left;}
.detailBoxRight_Right{ float:right; padding-bottom: 25px;}
#manabiAid img{ margin-right:0.6em;}

.bgColor_gray{ /*background-color:#f9f9f9; border-radius:10px; padding:20px;*/}

/*#mantomanBox{}
#mantomanBox .detailBoxRight_Left{ border-top:1px solid #000;}
#mantomanBox .detailBoxRight_Left dl{ width:485px; border-bottom:1px solid #999; padding:0.6em 0;}
#mantomanBox .detailBoxRight_Left dt{ float:left; width:60px; text-align:center;}
#mantomanBox .detailBoxRight_Left dd{}*/

#managemantBox{}
#managemantBox .detailBoxRight_Left{ float:left; width:380px;}
#managemantBox .detailBoxRight_Left dt{ font-size:112.5%; margin-bottom:0.5em;}
#managemantBox .detailBoxRight_Left dd{}
#managemantBox .tokka_mendan{padding: 1em 0;border-top: 2px dotted #999;margin-top: 1.5em;}
#managemantBox .tokka_mendan .tk_title{font-size:112.5%;font-weight: bold; margin-bottom:0.5em;}
#managemantBox .tokka_mendan .tk_txt{font-size: 81.25%;color: #4D4D4D;line-height: 1.5em;}
#managemantBox .tokka_mendan .tk_big{font-size: 110%;font-weight: bold;border-bottom: solid #999 1px; color: #FF3135;}
#managemantBox .tokka_mendan .tk_small{font-size: 90%;}

#stepBox{}
#stepBox .detailBoxRight_Left{ float:left; width:380px;}
#stepBox .detailBoxRight_Left dt{ font-size:112.5%; margin-bottom:0.5em;}
#stepBox .detailBoxRight_Left dd{}
#stepBox .tokka_mendan{padding: 1em 0;border-top: 2px dotted #999;margin-top: 1.5em;}
#stepBox .tokka_mendan .tk_title{font-size:112.5%;font-weight: bold; margin-bottom:0.5em;}
#stepBox .tokka_mendan .tk_txt{font-size: 81.25%;color: #4D4D4D;line-height: 1.5em;}
#stepBox .tokka_mendan .tk_big{font-size: 110%;font-weight: bold;border-bottom: solid #999 1px; color: #FF3135;}
#stepBox .tokka_mendan .tk_small{font-size: 90%;}

#mantomanBox{}
#mantomanBox .detailBoxRight_Left{ float:left; width:380px;}
#mantomanBox .detailBoxRight_Left dt{ font-size:112.5%; margin-bottom:0.5em;}
#mantomanBox .detailBoxRight_Left dd{}
#mantomanBox .tokka_mendan{padding: 1em 0;border-top: 2px dotted #999;margin-top: 1.5em;}
#mantomanBox .tokka_mendan .tk_title{font-size:112.5%;font-weight: bold; margin-bottom:0.5em;}
#mantomanBox .tokka_mendan .tk_txt{font-size: 81.25%;color: #4D4D4D;line-height: 1.5em;}
#mantomanBox .tokka_mendan .tk_big{font-size: 110%;font-weight: bold;border-bottom: solid #999 1px; color: #FF3135;}
#mantomanBox .tokka_mendan .tk_small{font-size: 90%;}

#supportBox{}
#supportBox .detailBoxRight_Left{ float:left; width:380px;}
#supportBox .detailBoxRight_Left dt{ font-size:112.5%; margin-bottom:0.5em;}
#supportBox .detailBoxRight_Left dd{}
#supportBox .tokka_mendan{padding: 1em 0;border-top: 2px dotted #999;margin-top: 1.5em;}
#supportBox .tokka_mendan .tk_title{font-size:112.5%;font-weight: bold; margin-bottom:0.5em;}
#supportBox .tokka_mendan .tk_txt{font-size: 81.25%;color: #4D4D4D;line-height: 1.5em;}
#supportBox .tokka_mendan .tk_big{font-size: 110%;font-weight: bold;border-bottom: solid #999 1px; color: #FF3135;}
#supportBox .tokka_mendan .tk_small{font-size: 90%;}


/*#stepBox{}
#stepBox .bgColor_gray{}
#stepBox .bgColor_gray ul{}
#stepBox .bgColor_gray li{ margin-bottom:20px;}
#stepBox .bgColor_gray li:last-child{ margin-bottom:0;}
#stepBox .bgColor_gray .detailBoxRight_Left{}
#stepBox .bgColor_gray .detailBoxRight_Left dt{ font-size:112.5%; margin-bottom:0.5em;}
#stepBox .bgColor_gray .detailBoxRight_Right{ float: right; padding-bottom: 25px;}
#stepBox .bgColor_gray .detailBoxRight_Right dt{ background:url(../course/images/icon_contents05.png) left 40% no-repeat; background-size:auto 100%; padding-left:1.2em; margin-bottom:0.4em;}
#stepBox .bgColor_gray .detailBoxRight_Right dd{ font-size:81.25%; color:#4d4d4d; line-height:1.5em;}*/


#selfBox{}
#selfBox .dispFlex{ margin-bottom:0.2em; justify-content: space-between;}
#selfBox .dispFlex li{}
#selfBox .tar{ font-size:75%; color:#4d4d4d;}

/*#supportBox{}
#supportBox .bgColor_gray{}
#supportBox .bgColor_gray ul{}
#supportBox .bgColor_gray li{ margin-bottom:20px;}
#supportBox .bgColor_gray .detailBoxRight_Right{}
#supportBox .bgColor_gray .detailBoxRight_Left{ max-width:480px;}
#supportBox .bgColor_gray .detailBoxRight_Left dt{ background:url(../course/images/icon_contents06.png) left 40% no-repeat; background-size:auto 100%; padding-left:1.2em; margin-bottom:0.4em;}
#supportBox .bgColor_gray .detailBoxRight_Left dt span{ font-size:75%; color:#FFF; background-color:#93bc3b; border-radius:5px; padding:0.1em 0.5em 0.2em; margin-left:1em; vertical-align:0.2em;}
#supportBox .bgColor_gray .detailBoxRight_Left dd{}
#supportBox .bgColor_gray .detailBoxRight_Left dd:nth-of-type(1){ margin-bottom:1em;}
#supportBox .bgColor_White{ background-color:#FFF; padding:10px 8px 12px; border-radius:5px;}
#supportBox .bgColor_White ul{}
#supportBox .bgColor_White li{ margin-bottom:0;}
#supportBox .bgColor_White p{}
#supportBox .bgColor_White p img{}
#supportBox .bgColor_White p span{}
#supportBox .bgColor_White p .textColor_Orange{}*/

#refundBox{}
#refundBox .refund_conditions{font-weight: bold;padding-left: 1em;}
#refundBox .refund_conditions .bg_orange{ font-size:78%; color:#FFF; background-color:#EA5A24; border-radius:5px; padding:0.1em 0.5em 0.2em; margin-left:1em; vertical-align:0.2em;}
#refundBox .bgColor_White{ background-color:#FFF; padding:15px 20px 12px; border-radius:5px;margin: 0.5em 0;}
#refundBox .bgColor_White p{border-bottom: 1px solid #ccc;font-size: 88.25%;margin-bottom: 1em;padding-bottom: 0.2em;}
#refundBox .no_refund{text-align: end;font-size: 81.25%;}



#optionBox{}
#optionBox .bgColor_gray{}
#optionBox .bgColor_gray .detailBoxRight_Left{}
#optionBox .bgColor_gray .detailBoxRight_Right{ width:560px;}
#optionBox .bgColor_gray .detailBoxRight_Right p{ font-size:81.25%; line-height:1.5em; margin-bottom:0.6em;}
#optionBox .bgColor_gray .detailBoxRight_Right ul{ flex-wrap:wrap;}
#optionBox .bgColor_gray .detailBoxRight_Right li{
	width:50%;
	font-size:81.25%;
	background:url(../course/images/icon_contents07.png) left 40% no-repeat;
	background-size:6% auto;
	padding:0.2em 0 0.3em 1.3em;
	margin-bottom:0.2em;
}

#detailSec .txtBtn{ width:350px; margin:0 auto 3em;}
#detailSec .txtBtn a{}
#detailSec .txtBtn a:hover{}
#detailSec .txtBtn .txtBtnLink{}

#detailSec .formBox{ background-color:#20cec0; padding:2em 0; border-radius: 0 0 10px 10px;}
#detailSec .formBox ul{ display:flex; justify-content:center;}
#detailSec .formBox li{ margin-right:15px;}
#detailSec .formBox li:first-child{ margin-right:1em;}



/*----------------------------------------------------------------------------
***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea{}
#footerAreaInner{}
#footerArea a{}