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

/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body {
}
#wrap {font-size: 16px;
}



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



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


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

#pageTitleLpInner{display: flex; align-items: center; justify-content: space-between; padding-right: 15%;}
#pageTitleLpInner h2{position: static; line-height: 1;}
#pageTitleLpInner #moushikomiBox{position: static;}

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

.conTopSec .h3Box h3{}


.conTopSec{ position:relative;}
.conTopSec #usagiBox{
	position: absolute;
	top: -10px;
	right: 40px;
}

#oderSec{ margin-bottom:30px;}
#conTopImg{ margin: 10px 0 0 25px;}
#oderSec .h3Box{ float:left; width:594px;padding: 10px 0 6px;}
#oderSec .sectionInner{ float:left; width:570px;padding-bottom: 1.3em;}
#oderSec .floatL{margin-right: 15px;}

.pinkTxt{color: #F978B9;}
.bigTxt {
    font-size: 1.2em;
    line-height: 1.3;
}
.titleleftBox{}

#oderSec ul{ float:left; width:324px;}
#oderSec li{ background:url(../common_images/back_contents02.png) left 50% no-repeat; border-bottom:#999 dotted 1px; padding:4px 0 1px 36px; font-size:18px;}



#planBox{}
#planBox h4{ font-size:20px; line-height:1.2em; color:#54B6BB; background-repeat:no-repeat; background-position: left top; padding-left:50px; height:42px; padding-top:2px;}
#planBox h4 span{ font-size:14px; line-height:1.2em;}

#planBox .section{ margin-top:10px;}
#planBox .sectionInner{ margin:15px 0 0 0; width:235px; float:left;}
#planBox p{ color:#E7227E;}
#koteiPSec{ float:left; width:330px; padding-right:20px; border-right:#CCC dotted 1px;}
#freePSec { float:right; width:330px;}
#koteiPSec h4{ background-image:url(../jhs/images/img_contents03.png);}
#freePSec h4{ background-image:url(../jhs/images/img_contents04.png);}
#priceTP{ text-align:left; color:#4D4D4D; margin-top:-50px; margin-bottom:20px;}

/*-- 2006追加分css --*/
.curriculumBox .boxInner{margin: 0 auto; background-image: url("../online/images/img_curriculumBack.png") ;background-repeat: no-repeat;}
.curriculumBox .boxInner ul{width: 600px; margin: 1em auto 0;}
.curriculumBox .ueBox dl{width: 276px; padding: 1.7em 0 0.5em;}
.curriculumBox .ueBox{display: flex; justify-content: space-between;}
.curriculumBox .ueBox .hanasu p{margin-top: -2px;}
.curriculumBox .ueBox .hanasu dd{height: 217px; display: flex;flex-flow: column; justify-content: space-between;}

.curriculumBox .shitaBox dl{width: 600px;display: flex;justify-content: space-between;align-items: flex-end;padding-bottom: 1.7em;}
.curriculumBox .shitaBox .hidari{width: 276px;}
.curriculumBox dt p{font-size: 17px; color: #ED3580; font-weight: bold;}
.curriculumBox dd p{font-size: 12px;}

.phonicsBox{margin-top: -2.7em;}
.phonicsBox img{margin-bottom: 1.5em;}

.spstep{display: none;}

/*2006追加分--*/

#okotaeSec{}
#okotaeSec h4{ color:#E7227E; font-size:16px;}
#okotaeSec .section .sectionInner{ margin:0; float:left; width:500px;}


#topBox{}
 


.topfont{ font-size: 14px;
    height: 22px;
    display: inline-block;
    /* width: 30%; */
    line-height: 1;}

#pageTitleLpInner .sabTtl{color: #ff7bac;
    font-size: 13px;
    margin: 0px 0 0 20px;
}

#pageTitleLpInner .ttlBox{display: flex; flex-direction: column-reverse;}
#pageTitleLpInner .ttlBox p{padding: 0;}

#pageTitleLp #moushikomiBox{ left: 540px;}
.mainSection h3 {background: lightseagreen;padding: 5px 0 0 15px;}

.section .borderTtl{font-weight: bold;font-size: 18px;background: linear-gradient(transparent 50%,#ffff8e 50%);}
.section .borderTxt{background: linear-gradient(transparent 50%,#ffff8e 50%);}
.section .txtRight{width: 41%;}
.section .innerBox{ border: 4px solid #20b2aa;padding: 15px 25px;border-radius: 10px;margin: 20px 0 0;font-size: 15px;}

.mainSection .section .sectionInner {margin: 15px 0 0;}
.mainSection .section{width: 710px;}

.section .pointBox{}

.section .channelBox{ background-color: #ffeef9;padding: 25px 30px;}
.section .boxTtl{font-weight: bold;font-size: 15px;width: 80%;text-align: center;margin: 0 auto;color: #00B2BC;margin-bottom: 15px;}
.section .ttlImg{width: 36%;margin: auto;margin-bottom: 20px;}

.section .innerTtl{background-color: #FFF;padding: 20px;margin-bottom: 20px;}

.section .channelBox .floatL{width: 60%;}

#oderSec{background-image: url(../online/images/img_contents01.jpg);  
background-repeat: no-repeat;  
background-position: bottom right;padding: 20px;}

.conTopSec .h3Box{border-left: none;}

.moushikomiBox{border: none;padding: 0;margin-bottom: 50px;width: 710px;margin-top: 50px;}
.moushikomiBox .btnTxt{font-size: 16px;padding-left: 13px;}

.kidsBtn{margin: 0;} 
.kidsBtn img{width: 100%;}

.section .topImg{width: 70%;margin: auto;}
.section .topImg img{width: 90%; margin: auto;}

.planBox img{width: 93%;}
.planBox{margin-bottom: 0em;}

.section .pointSection{margin-bottom: 30px; flex-wrap: wrap; justify-content: space-around;}
.section .pointSection .pointBox{width: 230px;}

.section .hissuBox{margin: auto;width: 91%;}
.section .rightBorder{border-right: 2px dotted #cecece;padding: 0 15px;}

.section .listBox{max-width:670px; margin:0 auto;}
.section .listBox .listItem{background:#b3e4e5;margin: 0 0 1em;line-height: 1;padding: 1em 1em;border-radius: 20px;position: relative;font-weight: bold;font-size: 115%;width: auto;padding-left: 6em;}
.section .listBox .listItem .txtStep{position:absolute;left:1em;color:#00b2bc;font-weight: bold;font-size: 113%; top: 50%; transform: translateY(-50%);}
.section .listBox .listItem.step5{background:#fcb9d4;margin: 0 0 2em;color: #e7227e;}
.section .listBox .listItem.step5 .txtStep{color:#f9629f;}
.section .listBox .listItem .listInner{font-size: 0.9em;
    background-color: #FFF;
    /* width: 45px; */
    padding: 5px 15px;
    /* margin: 0 0 0 210px; */
	border-radius: 20px;
	color: #20b2aa;
    position: absolute;
    top: 50%;
    right: 1.5em;
    transform: translateY(-50%);
}
.section .listBox .listItem .smallTxt{font-size: 0.8em; /* margin-left: 1.5em; */}

.planBox .leftImg{    position: absolute;}

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




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




/*----------------------------------------------------------------------------
 ***                                                              ページトップ
----------------------------------------------------------------------------*/
.pagetop {
}

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