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

/*----------------------------------------------------------------------------
***                                                                  wrap
----------------------------------------------------------------------------*/
#wrap{}


/*----------------------------------------------------------------------------
***                                                           ファストビュー
----------------------------------------------------------------------------*/
#mainSec{  position: relative; z-index: 1;}
#mainSec::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    opacity: 0.8;
}
#mainSec::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    background-position: center top;
    z-index: -1;
    mix-blend-mode: overlay;
}
#mainSec .mainsectionInner{ padding: 2em 0; max-width: 900px; width: 86%; margin: 0 auto;}
#mainSec h2{font-size: 240.25%;line-height: 1.1;}
#mainSec h2 .text01{ font-size: 68%; color: #fff; text-shadow: none; font-weight: normal;}
#mainSec h2 .text02{ text-shadow: 0 0 0.3em #444, 0 0 2em #fff; color: #edd41f;}
#mainSec h2 .h2SubTxt{ display: block; color: #B2E3E0; font-size: 60.606%; line-height: 1.3em; margin-top: 1em;}
#mainSec ul{ font-size: 145%; margin: 0.7em auto 0; width: 100%; background-color: rgba(255, 255, 255, 0.7);}
#mainSec ul li{margin: 0 0.5em;}
#mainSec ul li img{ margin: 0 0 0.3em 0;}


.bnrSummer{ margin:2em 0;}

/*----------------------------------------------------------------------------
 ***                                                              夏期講習期間
----------------------------------------------------------------------------*/

#formSec .dateBox{text-align: center;}
#formSec .dateBox .dateText .title{font-size: 190%; font-weight: bold; ba}
#formSec .dateBox .dateText .date{ margin-left: 1em; font-size: 190%; color: #00a199; font-weight: bold;}
#formSec .dateBox .dateText .date .text01{font-size: 73%; color: #00a199;}
#formSec .dateBox .dateText .date .text02{ margin-left: 0.5em; padding: 0.05em 0.3em; font-size: 65%; background: #00a199; color:#fff;}
#formSec .dateBox .dateText .date .text03{font-size: 80%; color: #fff;}
#formSec .dateBox .dateText .date .sp_br{display: none;}
#formSec .btn { margin-top: 3em; padding: 0.4em 0.7em; font-size: 119%; text-decoration: none; background: #f7931e; border-radius: 2em; color: #fff; font-weight: bold; box-shadow: 1px 1px 5px #828282;}
#formSec .btn:hover {opacity: 0.7;}
#formSec .btn img{margin: 0 0 0.2em 0.3em;}

/*----------------------------------------------------------------------------
 ***                                                              夏期講習要綱
----------------------------------------------------------------------------*/

#formSec .infoBox{margin-top: 3em; margin-bottom: 5em; border: 1px solid #000; border-radius: 2em; padding: 1.5em 0 3.5em 0;}
#formSec .infoBox .infoBoxInner{width: 90%; margin: 0 auto;}
#formSec .infoBox h4{font-size: 170%; text-align: center; color: #00a199;}
#formSec .infoBox .title{margin-bottom: 0; font-size: 210%; text-align: center; font-weight: bold; background: none;}
#formSec .infoBox .title::before{content: none;}
#formSec .infoBox .subTitle{margin-bottom: 3em; text-align: center;}
#formSec .infoBox .subTitle .text{margin: 0 0.3em; font-size: 114%;font-weight: bold; padding: 0.1em 1em; border: 1px solid #333; border-radius: 0.8em;}
#formSec .infoBox .title .text01{ font-size: 90%;}
#formSec .infoBox .title .text02{ color: #00a199;}
#formSec .infoBox .left{width: 45%; margin-right: 3em;}
#formSec .infoBox .right{width: 45%;}
#formSec .infoBox dl{margin-bottom: 1em;}
#formSec .infoBox dl div{padding: 0 0 1em; margin: 0 0 1em; border-bottom: 2px dotted #9e9e9f; }
#formSec .infoBox dt{ width: 25%; padding: 1em 0.8em; font-size: 95%; text-align: center; color: #fff; background: #8a2963; position: relative;}
#formSec .infoBox dt::before{ content: ""; position: absolute; top: 58%; left: 100%; margin-top: -15px; border: 0.7em solid transparent; border-left: 0.7em solid #8a2963;}
#formSec .infoBox dt span{color: #fff;}
#formSec .infoBox dt .text08{font-size: 66%;}
#formSec .infoBox dt .text08 .breakSp{display: none;}
#formSec .infoBox .priceList{margin: 1.4em 0 1.4em 1.5em; padding: 0; border: none;}
#formSec .infoBox .priceList dd{margin: 0 0 1em ;}
#formSec .infoBox .priceList dd:last-child{margin-bottom: 0;}
#formSec .infoBox dd{margin-left: 1em; font-weight: bold; font-size: 110%; line-height: 1.1;}
#formSec .infoBox dd .text{ line-height: 1.5;}
#formSec .infoBox dd .text01{ font-size: 180%; font-weight: bold;}
#formSec .infoBox dd .text02{ font-size: 59%; font-weight: normal; color: #333333;}
#formSec .infoBox dd .text03{color: #00a199;}
#formSec .infoBox dd .text04{ border-bottom: 5px solid #ed911f;}
#formSec .infoBox dd .text05{ line-height: 4; padding: 0.2em 0.5em; background: #00a199; color: #fff;}
#formSec .infoBox dd .text06{font-weight: bold; color: #727171;}
#formSec .infoBox dd .grade{ font-size: 62%; border: 1px solid; padding: 1em 0.6em;}
#formSec .infoBox dd .price{margin: 0;padding: 0; font-size: 190%; margin-left: 1em; line-height: 0.7; text-align: center; color: #e60012;}
#formSec .infoBox dd .price .tax{font-size: 50%;}
#formSec .infoBox dd .price .text09{font-size: 80%;}
#formSec .infoBox .commitment .listImg img{width: 20%; margin: 1em 0.5em;}
#formSec .infoBox .commitment .text07{ margin-bottom: 2em; text-align: center; font-size: 115%;}
#formSec .infoBox .commitment{text-align: center;}


/*----------------------------------------------------------------------------
 ***                                                              無料体験の流れ
----------------------------------------------------------------------------*/
#formSec .routeBox{margin-top: 3em;margin-bottom: 5em;}
#formSec .routeBox .routeInner{max-width: 860px;margin: 2em auto; text-shadow: 0px 0px 30px #fff;}
#formSec .routeBox dl{width:171px;position: relative;}
#formSec .routeBox dl::before{content: "▶";display: block;width: 20px;height: 20px;color: #00a199;font-size: 20px;position: absolute;top: 75px;right: -40px;}
#formSec .routeBox dl:last-child::before{display: none;}
#formSec .routeBox dd{font-size: 79%;}
#formSec .routeBox dd span{font-size: 80%;}

/*----------------------------------------------------------------------------
 ***                                                              フォーム
----------------------------------------------------------------------------*/
#formSec .sectionInner{  max-width: 900px; padding:1em 0 3em; width: 90%; margin:0em auto; }
#formSec .formBox { margin-top: 3em;}
#formSec h3 {
    background: #F2F2F2;
    font-size: 162.5%;
    color: #9C2963;
    line-height: 2em;
    position: relative;
    padding-left: 0.7em;
}

#formSec h3::before {
    content: '';
    width: 5px;
    height: calc(2em - 10px);
    background: #00A199;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    margin: auto;
}



/* フォーム */
#formSec form .inputBox{
	max-width:860px;
	margin:2em auto;
}
#formSec form .inputBox h3{ font-size:200%; position:relative;}
#formSec form .inputBox h3:after{
	content:"";
	width:100%;
	height:1px;
	margin:0.5em auto 0;
	background:-o-linear-gradient(right, #ccc 0%, #ccc 75%, #9C2963 75%, #9C2963 100%);
	background:-webkit-gradient(linear, right top, left top, from(#ccc), color-stop(75%, #ccc), color-stop(75%, #9C2963), to(#9C2963));
	background:linear-gradient(-90deg, #ccc 0%, #ccc 75%, #9C2963 75%, #9C2963 100%); 
	background: -webkit-linear-gradient(180deg, #ccc 0%, #ccc 75%, #9C2963 75%, #9C2963 100%);
	display:block;
}
#formSec form .inputBox ul{ margin:0 auto 3.5em;}
#formSec form .inputBox .inputItemList{ position:relative;}
#formSec form .inputBox .inputItemList:after{
	content:"";
	width:100%;
	height:1px;
	background:-o-linear-gradient(right, #ccc 0%, #ccc 75%, #9C2963 75%, #9C2963 100%);
	background:-webkit-gradient(linear, right top, left top, from(#ccc), color-stop(75%, #ccc), color-stop(75%, #9C2963), to(#9C2963));
	background:linear-gradient(-90deg, #ccc 0%, #ccc 75%, #9C2963 75%, #9C2963 100%); 
	background: -webkit-linear-gradient(180deg, #ccc 0%, #ccc 75%, #9C2963 75%, #9C2963 100%);
	display:block;
}
#formSec form .inputBox .inputItemList dl{ padding:1.5em 0;}
/*----------------------------------------------------------------------------*/
#formSec form .inputBox .inputItemList dt,
#formSec form .inputBox .inputItemList dd{ font-size:87.5%; color: #4D4D4D;}
#formSec form .inputBox .inputItemList dd * { color: #4D4D4D;}
/*----------------------------------------------------------------------------*/
#formSec form .inputBox .inputItemList dt{ width:25%; padding:0 1em 0 0; line-height:2em;}
#formSec form .inputBox .inputItemList dt .textNote{ text-align:right; color:#ff0000; float:right;}
#formSec form .inputBox .inputItemList dd{ width:75%; padding:0 2em 0 4em;}
#formSec form .inputBox .inputItemList dd ul{ margin:0;}
#formSec form .inputBox .inputItemList dd ul li{ margin:0.5em 0; font-weight:bold;}
#formSec form .inputBox .inputItemList dd .radioItem{ display:none;}
#formSec form .inputBox .inputItemList dd .radioItem + label{
	padding-left:25px;
	position:relative;
}
#formSec form .inputBox .inputItemList dd .radioItem + label::before{
	content:"";
	display:block;
	position:absolute;
	top:5px;
	left:0;
	width:15px;
	height:15px;
	border:1px solid #999;
	border-radius:50%;
}
#formSec form .inputBox .inputItemList dd .radioItem:checked + label{ color:#00a199;}
#formSec form .inputBox .inputItemList dd .radioItem:checked + label::after{
	content:"";
	display:block;
	position:absolute;
	top:8px;
	left:3px;
	width:11px;
	height:11px;
	background:#00a199;
	border-radius:50%;
}

/* ラヂオボタン */
#formSec form .inputBox .checkItem{ display:none;}
#formSec form .inputBox .checkParts{ padding-left:2em; position:relative; margin:0;}
#formSec form .inputBox .checkParts::before {
    content:"";
    display:block;
    width:1em;
    height:1em;
    border:1px solid #999999;
    background-color:#FFF;
    position:absolute;
    top:0.25em;
    left:0;
}
#formSec form .inputBox .checkItem:checked + .checkParts::after {
    content:"";
    display:block;
    width:0.4em;
    height:0.8em;
	border-bottom:3px solid #9C2963;
	border-right:3px solid #9C2963;
    position:absolute;
    top:0.2em;
    left:0.3em;
	-webkit-transform:rotate(45deg);
	    -ms-transform:rotate(45deg);
	        transform:rotate(45deg);
}
#formSec form .inputBox .inputItemList dd.trialCheckBox div:first-child{ width: 10em;}


#formSec form .inputBox .inputItemList dd .inputItem{ width:100%; border:none; border-radius:5px; padding:0.5em; background-color:#f5f5f5; font-size:100%; font-weight:500;}
#formSec form .inputBox .inputItemList dd .inputItem::-webkit-input-placeholder{ font-size:112.5%;}
#formSec form .inputBox .inputItemList dd .inputItem::-moz-placeholder{ font-size:112.5%;}
#formSec form .inputBox .inputItemList dd .inputItem:-ms-input-placeholder{ font-size:112.5%;}
#formSec form .inputBox .inputItemList dd .inputItem::-ms-input-placeholder{ font-size:112.5%;}
#formSec form .inputBox .inputItemList dd .inputItem::placeholder{ font-size:112.5%;}
#formSec form .inputBox .inputItemList .inputNameBox dd{ padding:0 0 0 1.5em;}
#formSec form .inputBox .inputItemList .inputNameBox dd input{ width:40%; margin:0 1em 0 0.5em;}
#formSec form .inputBox .inputItemList .inputNameBox dd span{width: 2.1em;margin: 0.5em 0 0;}
#formSec form .inputBox .inputItemList dd span{ display:block; margin:0.5em auto 0;}
#formSec form .inputBox .inputItemList dd #schools{ width:40%; border:1px solid #666;}
#formSec form .inputBox .inputItemList dd #howold{ width:30%; border:1px solid #666;}
#formSec form .inputBox .inputItemList dd #post{ width:40%;}
#formSec form .inputBox .inputItemList dd #auto-addr{ color:#666; margin:0 1em; border:1px solid #666; padding:0.2em 1em; border-radius:3px; cursor:pointer;}
#formSec form .inputBox #submit-area{}
#formSec form .inputBox .sendBtn{ text-align:center; margin:0 auto;}
#formSec form .inputBox .sendBtn button{
	max-width:300px;
	width:100%;
	margin:1.5em auto;
	position:relative;
	background-color:#9C2963;
	color:#fff;
	font-weight:bold;
	padding:0.6em;
	border-radius:100px;
	display:block;
	text-decoration:none;
	border:none;
	letter-spacing:1px;
	cursor:pointer;
    font-size: 137.5%;
    line-height: 1.2em;
}
#formSec form .inputBox .sendBtn button:hover{ opacity:0.6;}
#formSec form .inputBox .commonBtn{ text-align:center; margin:0 auto;}
#formSec form .inputBox .commonBtn a{
	max-width:240px;
	width:100%;
	margin:1.5em auto;
	position:relative;
	font-weight:bold;
	padding:0.4em;
	border-radius:100px;
	display:block;
	text-decoration:none;
	letter-spacing:1px;
	border:1px solid #9C2963;
	color:#9C2963;
	overflow:hidden;
	z-index:0;
    font-size: 106.25%;
}
#formSec form .inputBox .commonBtn a:before{
	content:"";
    position:absolute;
    width:100%;
    height:100%;
    left:0;
	right:0;
	bottom:0;
	background-color:#ccc;
    background-image:-webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #fff),color-stop(.75, #fff), color-stop(.75, transparent),to(transparent));
    -webkit-background-size:7px;
	background-image:-o-linear-gradient( 135deg, #ccc 25%, #fff 25%, #fff 50%, #ccc 50%, #ccc 75%, #fff 75%, #fff);
	background-image:linear-gradient( -45deg, #ccc 25%, #fff 25%, #fff 50%, #ccc 50%, #ccc 75%, #fff 75%, #fff);
	background-size:7px 7px;
	background-attachment:fixed;
	z-index:-1;
	opacity:0.3;
}
#formSec form .inputBox #submit-area p.tac { font-size: 87.5%; color: #4D4D4D; margin-top: 3em;}

#formSec form .inputBox #submit-area .privacy_check{ text-align:center;}
#formSec form .inputBox #submit-area .privacy_check label{ padding: 0;}
#formSec form .inputBox #submit-area .privacy_check input[type="checkbox"] { vertical-align: middle; margin-right: 0.5em;}

#formSec form .inputBox input[type="radio"]{margin-top:5px;margin-right: 5px;}
#formSec form .inputBox .inquiry dd p{margin: 0; font-size: 115%;}
#formSec form #otameshiBtn{ margin-top: 1em;}
#formSec form #otameshiTxt{ background: #efefef; padding:10px; margin-left: 1.5em; margin-top: 0.5em; font-size: 85%;}
#formSec form #otameshiTxt span{ color: #ff1759; display:inline-block; margin:0 ;}
#formSec form #otameshiTxt a{ color: #6668B7; margin-left: 0.5em;}
#formSec form #otameshiTxt a:link,
#formSec form #otameshiTxt a:visited{ color: #6668B7;}


/*----------------------------------------------------------------------------
 ***                                                            コンファーム
----------------------------------------------------------------------------*/
#confirmSec{}
#confirmSec .sectionInner {
	max-width: 1000px;
	padding: 3em 0 3em;
	width: 90%;
	margin: 0em auto;
}
#confirmSec p.tac{ font-size: 100%; margin:1em auto;}
#confirmSec #confirmArea{ max-width:800px; margin:2em auto; padding:0 2em;}
#confirmSec #confirmArea .inputItemList{ position:relative;}
#confirmSec #confirmArea .inputItemList:after{
	content:"";
	width:100%;
	height:1px;
	background:-o-linear-gradient(right, #ccc 0%, #ccc 75%, #9C2963 75%, #9C2963 100%);
	background:-webkit-gradient(linear, right top, left top, from(#ccc), color-stop(75%, #ccc), color-stop(75%, #9C2963), to(#9C2963));
	background:linear-gradient(-90deg, #ccc 0%, #ccc 75%, #9C2963 75%, #9C2963 100%); 
	background: -webkit-linear-gradient(180deg, #ccc 0%, #ccc 75%, #9C2963 75%, #9C2963 100%);
	display:block;
}
#confirmSec #confirmArea .inputItemList dl{ padding:1em 0;}
/*----------------------------------------------------------------------------*/
#confirmSec #confirmArea .inputItemList dt,
#confirmSec #confirmArea .inputItemList dd{ font-size: 87.5%; color: #4D4D4D;}
#confirmSec #confirmArea .inputItemList dd * { color: #4D4D4D;}
/*----------------------------------------------------------------------------*/
#confirmSec #confirmArea .inputItemList dt{ width:25%; padding:0;}
#confirmSec #confirmArea .inputItemList dd{ width:75%; padding:0 2em;}
#confirmSec #confirmArea #submit-area{}
#confirmSec #submit-area .sendBtn{ text-align:center; margin:0 1.5em;}
#confirmSec #submit-area .sendBtn button{
	max-width:300px;
	width:100%;
	margin:1.5em auto;
	position:relative;
	background-color:#9C2963;
	color:#fff;
	font-size: 137.5%;
	font-weight:bold;
	padding:0.6em 3em;
	border-radius:100px;
	display:block;
	text-decoration:none;
	border:none;
	letter-spacing:1px;
	cursor:pointer;
}
#confirmSec #submit-area .sendBtn button:hover{ opacity:0.6;}
#confirmSec #submit-area .backBtn{ text-align:center; margin:0 1.5em;}
#confirmSec #submit-area .backBtn a{
	max-width:240px;
	width:100%;
	margin:1.5em auto;
	position:relative;
	font-size: 106.25%;
	font-weight:bold;
	padding:0.4em 1em;
	border-radius:100px;
	display:block;
	text-decoration:none;
	letter-spacing:1px;
	border:1px solid #9C2963;
	color:#9C2963;
	overflow:hidden;
	z-index:0;
}
#confirmSec #submit-area .backBtn a:before{
	content:"";
    position:absolute;
    width:100%;
    height:100%;
    left:0;
	right:0;
	bottom:0;
	background-color:#ccc;
    background-image:-webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #fff),color-stop(.75, #fff), color-stop(.75, transparent),to(transparent));
    -webkit-background-size:7px;
	background-image:-o-linear-gradient( 135deg, #ccc 25%, #fff 25%, #fff 50%, #ccc 50%, #ccc 75%, #fff 75%, #fff);
	background-image:linear-gradient( -45deg, #ccc 25%, #fff 25%, #fff 50%, #ccc 50%, #ccc 75%, #fff 75%, #fff);
	background-size:7px 7px;
	background-attachment:fixed;
	z-index:-1;
	opacity:0.3;
}


/*----------------------------------------------------------------------------
 ***                                                            完了画面
----------------------------------------------------------------------------*/
#thanksSec{}
#thanksSec .sectionInner {
	max-width: 1000px;
	padding: 3em 0 3em;
	width: 90%;
	margin: 0em auto;
}
#thanksSec .messageBox{ max-width:1000px; margin:0 auto;}
#thanksSec .messageBox h3{ text-align:center; font-size:225%; margin:1em auto; color:#00A199;}
#thanksSec .messageBox p{ text-align:center; margin:0.5em auto; font-size:100%;}
#thanksSec .messageBox .infoBox{ max-width:700px; margin:2em auto; padding:2em; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
#thanksSec .messageBox .infoBox dt.logoImg a{ }

#thanksSec .messageBox .infoBox dd{ font-size:150%; font-weight:bold; padding:0 1em; line-height:1.4em;}
#thanksSec .messageBox .infoBox dd a{ color:#000; text-decoration:none;}
#thanksSec .messageBox .infoBox dd a:hover{ color:#9C2963;}
#thanksSec .messageBox .infoBox dd span{ display:block; font-size:66.6666%; font-weight:500;}
#thanksSec .messageBox .commonBtn{ text-align:center; margin:0 auto;}
#thanksSec .messageBox .commonBtn a{
	max-width:200px;
    width:100%;
    margin:1.5em auto;
    position:relative;
    background-color:#9C2963;
    color:#fff;
    font-size:125%;
    font-weight:500;
    padding:0.6em;
    border-radius:100px;
    display:block;
    text-decoration:none;
    letter-spacing:1px;
}

/* 950px以下*/
@media screen and (max-width:950px){
	
}