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

@media screen and (max-width:640px) { 
#wrap{width:90%;margin:0 1%;}
#headerArea{width:100%;}
.wakuBox{width:100%;}
.wakuBoxInner{width:100%;}
.wakuBoxNoBack{width:100%;}
.wakuBoxNoBackInner{width:100%;}
#headerTitle h1 {font-size: 70%;font-weight: normal;width: 100%;line-height: 1.2em;}
#headerImgInner #introTxt{width: 100%;}
#headerImgInner .main_txt{ width:50%; font-size:87%; color:#595757; line-height:1.55em;}

.targetContents p{margin:8px 15px 0 0;width:100%;font-size: 105%;}
.main_service .floatL{ width:100%;}
.main_service .floatL .service_list{ width:100%;}

#FlowSec .reasonTxt{ width: 100%;margin-left: 20px;float: left;margin-right: 41px;}
#FlowSec .frame li p{ float: left; width: 9%; padding:20px 41px; margin:0;}
#FlowSec .frame li p.last_li{ float: left; width: 9%; padding:30px 41px; margin:0;}
#FlowSec .frame li p.tel_form{float: left; width: 9%; padding:43px 40px; margin:0;}
#FlowSec .frame li dl{width:79%; }
#FlowSec .frame li dl.first_li{width:49%;}
#FlowSec .frame li dt.first_li{ width:100%;}
#FlowSec .frame li .tel_form{width:25%;}
#FlowSec .frame li p.flow_tel{ width:20%;}
#FlowSec .frame li p.flow_form{ width:20%;}

#ConversionArea .areaInner{width: 100%;}
#ConversionArea .areaInner p {width:100%;}
    
#sLBox h2{height:auto;}
#sLBox .sectionInner{background: #00a1c9;width: 97%;margin: 0 1%;padding: 20px 12px;}
#sLBox table{width: 100%;}
#sLBox #corseTd li{width:100%;} 
#privacy {width: 100%;}

#footerArea{ width:100%;}
#footerLogo{width:100%; float:none; }
#footerTel{width:100%; float:none; }
#headerImg img{width:100%; height:auto;}
}
/*----------------------------------------------------------------------------
 ***                                                              SP対応用
----------------------------------------------------------------------------*/
.spbr{ display: none;}
.pcbr{ display:block;}


/*----------------------------------------------------------------------------
***                                                                Container
----------------------------------------------------------------------------*/
body { margin:14px 0 0 0; padding: 0;}
#wrap { width:100%;}
.spbr{ display:none;}

.wakuBox{width:100%;background: url(../images/line.png) repeat-x bottom;padding-bottom: 1px;margin-bottom: 36px;clear:both;}
.wakuBoxInner{width:1100px;margin:0 auto;}
.wakuBoxNoBack{width:100%;padding-bottom: 1px;clear:both;}
.wakuBoxNoBackInner{width:960px;margin:0 auto;}
/*----------------------------------------------------------------------------
***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea {width: 1100px;}
#headerAreaInner {margin-bottom: 8px;}
#headerTitle { float:left;}
#headerTitle h1 {font-size: 70%;font-weight: normal;width: 100%;line-height: 1.2em;}
#headerTitle p {margin-top: 5px;}
#headerTel {float: right; width: 32%;}
#headerImg {background: url(../images/back_mainb.png) no-repeat ; height: 535px; padding: 3em; position: relative; background-size: cover; box-sizing: border-box;}
#usagiImg{position: absolute;bottom:1.5em; left: 3em;}
.pc_usagi{ display:block;}	

.main_image_sp{ display:none;}

#headerImg h2 { margin-bottom: 10px; }
/*#headerImgInner p{ font-size:145%;}*/
#headerImgInner p span{ color:#e61673;}
#headerImgInner #introTxt{font-size:134%;background-color: #e61673;color: #fff;padding: 6px 0 2px 15px;line-height: 1.2em;margin-bottom: 9px;width: 250px;}
#headerImgInner .sub_title{	font-size:110%; margin:0 0 2px 0;}
#headerImgInner .main_txt{ width:556px; font-size:100%; color:#595757; line-height:1.55em;}
#headerImgInner ul{}
#headerImgInner ul li{float: left;margin-left: 1px;}
#headerImgInner ul li.title_li {margin-right: 2px;}
#headerImgInner ul :first-child{ margin-left:0;}

#conAreaTop { margin: 3.5em 2em 0;}
#conAreaTop p.contents_tel{ float:left; margin:6px 0 0 145px;}
#conAreaTop p.contents_form{ float:right; }

/*----------------------------------------------------------------------------
***                                                       Header - gNavi
----------------------------------------------------------------------------*/
#gnavi{}
#gnavi li{}
#gnavi{}

/*----------------------------------------------------------------------------
***                                                       btnBoxInner
----------------------------------------------------------------------------*/
.btnBoxInner {width: 1100px;margin: 2.4em auto 2.8em;border-top: dashed 3px #dcdedd;border-bottom: dashed 3px #dcdedd;padding:1.7em 0 2em;}
.btnBoxInner ul{gap:1.15em;}
.btnBoxInner .btnTtl{font-size: 230%;line-height: 1.2;font-weight: bold;margin-bottom: 0.4em;}
.btnBoxInner .btnTtl .txtSmall{font-size: 56%;font-weight: 300;}
.btnBoxInner .btnTtl .txtSmall .underO{background: linear-gradient(transparent 50%,rgba(252,188,129,1) 60%);}

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






/*----------------------------------------------------------------------------
***                                                              mainsection
----------------------------------------------------------------------------*/
.mainSection {}
.mainSectionInner {}


/*----------------------------------------------------------------------------
***                                                                section h3
----------------------------------------------------------------------------*/

.section { margin-bottom:48px;}
.section h3 { 
font-size: 290%;
line-height: 1.0em;
height: 78px;
margin-bottom: 13px;
text-align: center;
}
.section h3 span{font-size:70%;/* font-weight:100; */}


/*----------------------------------------------------------------------------
***                                                             ServiceSec
----------------------------------------------------------------------------*/

.targetContents{float: left; padding: 1.5em; width: 68%;}
.targetContents h4{font-size: 140%;font-weight: bold;line-height: 1.3em;padding-left:92px;padding-top:3px;}
.targetContents p{margin:8px 15px 0 0;width:620px;font-size: 105%;}

/*.targetContents dl {
padding-bottom: 1px;
margin-bottom: 8px;
margin-top:2px;
}
.targetContents dt { 
font-size: 140%;
font-weight: bold;
line-height: 1.3em;
margin-top:3px;
margin-left:92px;
}
.targetContents dd {
margin:8px 15px 0 0;
width:620px;
font-size: 105%;
}*/

.targetContents p{ }

.targetImg{margin: 1.5em 1.5em 0 0;}


.main_service{border: #DCDDDD solid 1px; border-radius: 10px; background-color:#F7F8F8; margin:5px 15px 0 19px;}
.main_service .floatL{ width:620px; float:left; padding:12px 0 12px 20px;}
.main_service .floatL h4{ margin-top:18px; float:left;}
.main_service .floatL .service_list{ width:510px; float:right; font-size:90%; line-height:1.6em; margin-top:5px;}

.main_service .form_btn_S{ float:right; padding:7px 25px 0 0; display:block;}
.sp_form_btn_S{ display:none;}

#display_open01{float:right; padding:5px 15px 0 0;}
#display_open01 span{ color:#E61673; font-size:75%; font-weight:normal; margin-left:3px;}
#display_close01{ float:right;}
#display_close01 span{ color:#E61673; font-size:64%; font-weight:normal; margin-left:3px;}

#closeSec01{border: #DCDDDD solid 1px; border-radius: 10px; margin:20px 15px 0 19px; padding:25px 20px 20px 20px; float: left; width: 92%;}
#closeSec01 h4{ /*font-size:140%;*/ border-bottom: #9FA0A0 dotted 1px; padding-left:10px; margin-bottom:10px; padding-bottom: 5px;}
#closeSec01 dl{padding-left:10px;}
#closeSec01 dt{ font-size:110%;}
#closeSec01 dd{ padding:0 15px; margin-bottom:10px; font-size:97%; color:#595757;}
#closeSec01 p{padding-left:10px; font-size:85%;}


#display_open02{float:right; padding:5px 15px 0 0;}
#display_open02 span{ color:#E61673; font-size:75%; font-weight:normal; margin-left:3px;}
#display_close02{ float:right;}
#display_close02 span{ color:#E61673; font-size:64%; font-weight:normal; margin-left:3px;}

#closeSec02{border: #DCDDDD solid 1px; border-radius: 10px; margin:20px 15px 0 19px; padding:25px 20px 10px 20px; float: left; width: 92%;}
#closeSec02 h4{ /*font-size:140%;*/ border-bottom: #9FA0A0 dotted 1px; padding-left:10px; margin-bottom:10px; padding-bottom: 5px;}
#closeSec02 dl{padding-left:10px;}
#closeSec02 dt{ font-size:110%;}
#closeSec02 dd{ padding:0 15px; margin-bottom:10px; font-size:97%; color:#595757;}
#closeSec02 dd li{color:#595757;}
#closeSec02 p{padding-left:10px; font-size:85%;}



#display_open03{float:right; padding:5px 15px 0 0;}
#display_open03 span{ color:#E61673; font-size:75%; font-weight:normal; margin-left:3px;}
#display_close03{ float:right;}
#display_close03 span{ color:#E61673; font-size:64%; font-weight:normal; margin-left:3px;}

#closeSec03{border: #DCDDDD solid 1px; border-radius: 10px; margin:20px 15px 0 19px; padding:25px 20px 10px 20px; float: left; width: 92%;}
#closeSec03 h4{ /*font-size:140%;*/ border-bottom: #9FA0A0 dotted 1px; padding-left:10px; margin-bottom:10px; padding-bottom: 5px;}
#closeSec03 dl{padding-left:10px;}
#closeSec03 dt{ font-size:110%;}
#closeSec03 dd{ padding:0 15px; margin-bottom:10px; font-size:97%; color:#595757;}
#closeSec03 dd li{color:#595757;}
#closeSec03 p{padding-left:10px; font-size:85%;}


#University {margin-top:0;}
#University h3{background: url(../images/sec_title_back01_b.png) no-repeat; padding:17px 0 0 40px; margin:0;height: 45px;text-align:left;color: #fff;font-size: 210%;height: 45px;}
#University h3 span{/* margin-left:64px; */vertical-align: middle;/* font-size: 65%; */}
#University .targetContents h4{background: url(../images/txt_example01.png) top left no-repeat; }

#Middle_High{}
#Middle_High h3{ background: url(../images/sec_title_back02_b.png) no-repeat;padding:17px 0 0 40px; margin:0; text-align:left; color: #fff; font-size: 210%; height: 49px;}
#Middle_High h3 .txtDetail{margin-left:63px;vertical-align: middle;font-size: 65%;} 
#Middle_High .targetContents h4{background: url(../images/txt_example02.png) top left no-repeat;}

#Middle_High_Online{}
#Middle_High_Online h3{ background: url(../images/sec_title_back02_1_b.png) no-repeat;padding:17px 0 0 40px; margin:0; text-align:left; color: #fff; font-size: 210%; height: 49px;}
#Middle_High_Online h3 .txtDetail{margin-left: 31px;vertical-align: middle;font-size: 65%;} 
#Middle_High_Online .targetContents h4{background: url(../images/txt_example02_1.png) top left no-repeat;}

#Elementary{}
#Elementary h3{background: url(../images/sec_title_back03_b.png) no-repeat;padding:17px 0 0 40px;margin:0;text-align:left;color: #fff;font-size: 210%;height: 49px;}
#Elementary h3 .txtDetail{margin-left:65px; vertical-align: middle; font-size: 65%;}
#Elementary .targetContents h4{background: url(../images/txt_example03.png) top left no-repeat;}

#Elementary02{}
#Elementary02 h3{background: url(../images/sec_title_back05_b.png) no-repeat;padding:17px 0 0 40px;margin:0;text-align:left;color: #fff;font-size: 210%;height: 49px;}
#Elementary02 h3 .txtDetail{margin-left:65px; vertical-align: middle; font-size: 65%;}
#Elementary02 .targetContents h4{background: url(../images/txt_example05.png) top left no-repeat;}

#Uursery{}
#Uursery h3{ background: url(../images/sec_title_back04_b.png) no-repeat;padding:17px 0 0 40px; margin:0; text-align:left; color: #fff; font-size: 210%; height: 49px;}
#Uursery h3 .txtDetail{margin-left:59px; vertical-align: middle; font-size: 65%;}
#Uursery .targetContents h4{background: url(../images/txt_example04.png) top left no-repeat;}

/*----------------------------------------------------------------------------
***                                                                ReasonSec
----------------------------------------------------------------------------*/

#FlowSec { }
#FlowSec .sectionInner .section{ margin-bottom: 24px;}
#FlowSec h2{font-size: 290%;line-height: 1.0em;height: 78px;margin-bottom: 13px;text-align: center;}
#FlowSec h2 span{font-size:70%;}
#FlowSec h3 {	}
#FlowSec h3 {height: 58px;	color: #fff;padding:22px 0 0 80px;font-size:180%;font-weight: bold;}

#FlowSec .reasonTxt{ width: 660px;margin-left: 20px;float: left;margin-right: 41px;}
#FlowSec .reasonTxt p{ font-size:110%; line-height: 1.5em;}
#FlowSec .reasonImg{float: right;margin: 8px 34px 0 0;}

#FlowSec .frame{ margin: 0 15px 0 19px; }
#FlowSec ul{background: url(../images/back_flow_title.png) top left no-repeat; background-size: 17% 100%; border:#F39800 solid 1px;}
#FlowSec .frame li{float: none; border-bottom:#F39800 solid 1px;}
#FlowSec .frame li.last_li{ border-bottom:none;}
#FlowSec .frame li p{ float: left; width: 9%; padding:20px 41px; margin:0;}
#FlowSec .frame li p.last_li{ float: left; width: 9%; padding:30px 41px; margin:0;}
#FlowSec .frame li p.tel_form{float: left; width: 9%; padding:43px 40px; margin:0;}
#FlowSec .frame li dl{ float:left; width:79%; margin:16px 0 19px 25px; }
#FlowSec .frame li dl.first_li{ float:left; width:49%; margin:20px 0 20px 25px; }
#FlowSec .frame li dt{font-size:135%; color:#F39800;}
#FlowSec .frame li dt.first_li{ width:100%; float:left; }

#FlowSec .frame li .tel_form{width:25%; float:right; margin: 17px 25px 11px 0;}
#FlowSec .frame li p.flow_tel{ width:20%; padding:0; float:none; margin-bottom:3px;}
#FlowSec .frame li p.flow_form{ width:20%; padding:0; float:none;}

#FlowSec .frame li dd{}
#FlowSec .frame li dd.first_li{ width:100%; float:left;}
#FlowSec .frame li dd.small_txt{ float:left; font-size:85%; margin-top:10px;}

#FlowSec .frame .first_li{}
#FlowSec .frame .last_li{}

/*#FlowSec .frame .frame_title{ width:18%; background: linear-gradient(#F39800, #F8B62D) center left; float:left;}*/

/*----------------------------------------------------------------------------
***                                                            ConversionArea
----------------------------------------------------------------------------*/
#ConversionArea{ background: url(../images/back_con.png) bottom center no-repeat;height: 133px;margin-bottom: 24px;}
#ConversionArea .areaInner{width: 960px;margin: 0 auto;position: relative;}
#ConversionArea .areaInner #usagi{float: none;position: relative;top: -39px; }
#ConversionArea .areaInner #usagi p{ width:auto;}
#ConversionArea .areaInner p { float: right; width:770px; margin-top: 14px;}
#ConversionArea .areaInner p img{ margin-right:21px;}



/*----------------------------------------------------------------------------
***                                                                  sLBox
----------------------------------------------------------------------------*/
#confPage #sLBox .sectionInner{ background:#CCC;}
#confPage #sLBox h2{ font-size:30px; text-align:center; margin-bottom:20px;}

#thanksPage #sLBox h2{ font-size:30px; text-align:center; margin-bottom:20px;}
#thanksPage #sLBox .sectionInner{ background:#00A1C9;}
#thanksPage #thanksTxtBox{ background:#FFF; padding:20px 50px;}

#sLBox{ margin-bottom:25px;}
#sLBox h3{}
#sLBox h2{font-size: 290%;line-height: 1.0em;height: 78px;margin-bottom: 13px;text-align: center;}
#sLBox .sectionInner{ background: #00a1c9;width: 1050px;margin: 0 auto;padding: 20px 12px; box-sizing: border-box;}

#formTable{     }

#sLBox table{ background: #fff;border-collapse: collapse;margin: 0 auto;width: 922px;border: none;}
#sLBox table tr{} 
#sLBox table th,#sLBox table td{border-left:none; border-right:none;}
#sLBox table th{text-align: left;width: 150px;padding-left: 40px;line-height:1.5em;}
#sLBox table td{ padding: 10px 0 10px 15px;}

#sLBox table input{ padding: 3px;}

#sLBox table label{ vertical-align: sub;}
#sLBox #corseTd li{ float: left;width:315px;} 
#sLBox ul li{ padding: 10px 0 ;vertical-align:bottom;} 
#sLBox ul li input{ vertical-align: -0.15em;} 
#sLBox ul li span{ font-size:90%;} 
#privacy {width: 960px;margin: 0 auto;padding-top: 10px;}

#submit-area{ margin-top:20px;}
#submit-area .tac input {    padding: 10px 35px;}
/*----------------------------------------------------------------------------
***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea{ width:960px; margin:0 auto;border-top: 1px solid #ccc;padding-top: 18px;}
#footerAreaInner {}

#footerAreaLink{}
#footerAreaLogo {}
#footerTxt{}
#footerCopyright{}


#footerLogo{width:250px; float:left; }
#footerTel{width:299px; float:Right; }


/*----------------------------------------------------------------------------
***                                                              ページトップ
----------------------------------------------------------------------------*/
.pagetop {
text-align: right;
margin-top: 5px;
margin-bottom: 10px;
clear: both;
}


/*----------------------------------------------------------------------------
***                                                              rightsection
----------------------------------------------------------------------------*/
.rightSection {}
.rightSectionInner {}
.rightSection .section {}


/*----------------------------------------------------------------------------
***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea{ }
#footerAreaInner {}
#footerAreaLink{}
#footerAreaLogo {}
#footerTxt{}
#footerCopyright{}




/*----------------------------------------------------------------------------
***                                                              ページトップ
----------------------------------------------------------------------------*/
.pagetop {text-align: right;margin-top: 5px;margin-bottom: 10px;clear: both;}


/*----------------------------------------------------------------------------
 ***                                                                   section
----------------------------------------------------------------------------*/
.section {}
.sectionInner {}

#University h3 .ttlService,
#Middle_High h3 .ttlService,
#Middle_High_Online h3 .ttlService,
#Elementary h3 .ttlService,
#Elementary02 h3 .ttlService,
#Uursery h3 .ttlService{font-size: 83%;line-height: 1.2em;height: auto; width: 15em;}

#University h3 .txtDetail,
#Middle_High h3 .txtDetail,
#Middle_High_Online h3 .txtDetail,
#Elementary h3 .txtDetail,
#Elementary02 h3 .txtDetail,
#Uursery h3 .txtDetail{margin-left:8em;vertical-align: middle;font-size: 65%;line-height: 0px;display: inline-block;font-weight: 100;}


#University h3,
#Middle_High h3,
#Middle_High_Online h3,
#Elementary h3,
#Elementary02 h3,
#Uursery h3{padding: 5px 0 3px 40px;font-size: 180%;height: 60px; background-size: cover; display: flex; justify-content: flex-start; align-items: center;border-radius: 0.5em 0.5em 0 0;}


/*----------------------------------------------------------------------------
***                                                         Q&A
----------------------------------------------------------------------------*/
#qaSec h2{font-size: 290%;line-height: 1.0em;height: 78px;margin-bottom: 13px;text-align: center;}
#qaSec .ttl {font-size: 200%; padding: 0;}
#qaSec .text01{color: #9C9CC6;}
#qaSec .sectionInner{margin-top: 0; padding: 0 1em;}
#qaSec .sectionInner .qa_contentsBox dl{}
#qaSec .sectionInner .qa_contentsBox dt{background: #D0D0EA;color: #464454;border: solid 1px #686868;border-bottom: none;font-size: 110%;padding: 1em 1em 1em 4em;position:relative;}
#qaSec .sectionInner .qa_contentsBox dt img{margin-right: 10px;}
#qaSec .sectionInner .qa_contentsBox dd{padding: 1em 1em 1em 4em;font-size: 110%;margin-bottom: 2em;border: solid 1px #686868;border-top: none;position:relative;}
#qaSec .sectionInner .qa_contentsBox dd img{margin-right: 10px;margin-bottom: 5px;}
#qaSec .sectionInner .qa_contentsBox dt:before{content:"Q.";display:block;position:absolute;top: 50%;left: 1em;transform: translate(0, -50%);font-size:150%;color:#665E96;}
#qaSec .sectionInner .qa_contentsBox dd:before{content:"A.";display:block;position:absolute;top: 50%;left: 1em;transform: translate(0, -50%);font-size:150%;color:#FF64B5;}