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


body{
    background:#DBF9F3;
}
body div#wrap{
    min-width:500px;
    width:500px; margin:0 auto;
    border-left:#eee solid 10px;
    border-right:#eee solid 10px;
    background:#FFF;
    z-index:0;
}


/*----------------------------------------------------------------------------
 ***                                                         titleSec
----------------------------------------------------------------------------*/
#titleSec{}
#titleSec .titleBox{
}
#titleSec .titleBox .heading{
    font-size: 30px;
    text-align: center;
}
#titleSec .titleBox .description{
    text-align: center;
    font-size: 16px;
    margin: 0 auto 0.7em;
}

#titleSec .selectBox{
    padding: 1em 5%;
    background: var(--COLOR-RED);
}
#titleSec .selectBox .sub-titleBox{
    margin-bottom: 0.5em;
}
#titleSec .selectBox .sub-titleBox h3{
    font-size: 16px;
    text-align: center;
    color: #fff;
}
#titleSec .selectBox .sub-titleBox p{}
#titleSec .selectBox .schoolChoice{}
#titleSec .selectBox .schoolChoice #priceChange{}
#titleSec .selectBox .schoolChoice #priceChange ul{}
#titleSec .selectBox .schoolChoice #priceChange ul li{
    text-align: center;
}
#titleSec .selectBox .schoolChoice #priceChange select{
    width: calc(80% +  20px);
    padding: 10px;
    border-radius: 7px;
    font-size: 16px;
}

/*----------------------------------------------------------------------------
 ***                                                         planSec
----------------------------------------------------------------------------*/
#planSec{
    /* padding: 6% 0% 0% 0%; */
}
#planSec h2{
    color: #403957;
    font-size: 30px;
    text-align: center;
}
#planSec h3{ font-size: 200%;}
#planSec h4 {font-size: 167.5%;margin-bottom: 0em;/* padding-left: 1em; */position: relative;}

#planSec .sectionInner{}
#planSec .sectionInner .SoloBox{}
#planSec .RoomBox h3,
#planSec .sectionInner .SoloBox h3{
    padding: 4px 8px;
    background: #403957;
    color:
    #fff;
    font-size: 20px;
    margin-bottom: 1.1em;
    text-align: center;
}
#planSec .sectionInner .SoloBox 
#planSec .sectionInner{}
#planSec .sectionInner {
    padding: 4% 0% 0% 0%;
}
#planSec p.floatR {float: right;width: 42%;margin-left: 3%;}
#planSec dl {/* margin-bottom: 5%; *//* flex-direction: column; */}

#planSec .priceDetail dl{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
#planSec dt {font-size: 120%;font-weight: bold;margin-bottom: 1%;}
#planSec dd {line-height: 1.6em;}
#planSec dd.floatL {float: left;margin-right: 3%;width: 20%;}
#planSec #standard {margin-bottom: 8%;}

#planSec #standard .contentBox{width:95%;margin: 2em auto;}
#planSec #standard .content{width:100%;margin-bottom: 0.75em;}
#planSec #standard .content .contentList li{width: 30%;font-size: 100%;}
#planSec #standard .content .contentList li{
    width: 30%;
    font-size: 93%;
    line-height: 1;
    font-weight: bold;
    margin: 0 0.1em;
    padding: 0.5em 0.5em 0.5em 0.6em;
    text-align: center;
    border-radius: 0.4em;
    display: flex;
    align-items: center;
    display: grid;
}
#planSec #standard .content .contentList .freeBase{
    background-color: rgb(235,87,87,0.15);
    border: 2px solid #eb5757;
    color: #eb5757;
    font-size: 95%;
}
#planSec #standard .content .contentList .times{
    width:5%;
    padding:0;
}
#planSec #standard .content .contentList .management{
    background-color: #f2c94c;
}
#planSec #standard .content .contentList .class{
    background-color: rgb(0,161,153,0.15);
    border: 2px solid #00a199;
    color: #00a199;
}
#planSec #standard .content .contentList .test{
    background-color: rgb(249,172,0,0.15);
    color: #f9ac00;
    border: 2px solid #f9ac00;
    margin: 0;
}
#planSec #standard .content .contentList .special{
    background-color: rgb(237,127,79,0.15);
    border: 2px solid #ed7f4f;
    color: #ed7f4f;
    margin: 0;
    margin-left: -0.1em;
    border-radius: 0 0.4em 0.4em 0;
    width: 20%;
}
#planSec #standard .content .contentList .video{background-color: rgb(91,132,81,0.15);border: 2px solid #5b8451;color: #5b8451;}
#planSec #standard .content .contentList .plan{background-color: rgb(78,76,108,0.15);border: 2px solid #4e4c6c;color: #4e4c6c;}










#planSec #free {}
#planSec #free .spacing {/* letter-spacing: -0.11em; */}
#planSec .priceTtlBox {
    border: 1px solid #c9caca;
    background: -o-linear-gradient(bottom, rgba(254, 254, 254, 1) 0%, rgba(231, 231, 231, 1) 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(254, 254, 254, 1)), to(rgba(231, 231, 231, 1)));
    background: linear-gradient(0deg, rgba(254, 254, 254, 1) 0%, rgba(231, 231, 231, 1) 100%);
    padding: 3%;
    border-radius: 5px;
}

#planSec .jmk .priceTtlBox {
    margin-bottom: 1em;
}
#planSec .priceTtlBox .priceTtlBoxInner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
#planSec .priceTtlBox h4 {font-weight: bold;font-size: 160%;line-height: 1.2em;color: #3e3a39;border-bottom: 1px solid #CCC;}
#planSec .priceTtlBox h4 span {color: #e61673;font-size: 65%;font-weight: normal;}
#planSec .priceTtlBox .priceTime {margin: 0.5em 0 0;}
#planSec .priceTtlBox .priceTime * {line-height: 1.2em;font-size: 90%;color: #3e3a39;font-weight: normal;text-align: center;}
#planSec .priceTtlBox .priceTime dt {
    margin-right: 0.3em;
}
#planSec .priceTtlBox .priceTime dd::before {content: '/';display: inline-block;width: 20px;}

#planSec .priceTtlBox .priceTime dd:nth-of-type(1)::before {
    content: normal;
    display: inline-block;
    width: 1em;
}
#planSec .priceTtlBox .priceDetail {-webkit-box-orient: vertical;-webkit-box-direction: normal; -ms-flex-direction: column;flex-direction: column;
    margin: 0.4em 0;
    -webkit-box-orient: inherit;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.6em 0 0.4em;
    gap: 6px 1em;
}

#planSec .priceTtlBox .priceDetail dt {background: #e61673;color: #FFF;padding: 0.2em 0.5em 0;margin-right: 0.5em;font-weight: normal;line-height: 1.4em;font-size: 85%;}
#planSec .priceTtlBox .priceDetail dd {color: #3e3a39;font-size: 85%;padding: 0 0.5em;}
#planSec .priceTtlBox .priceDetail dl:last-child { margin: 0;}
#planSec #frPlan h4 span {color: #2271bc;letter-spacing: -0.03em;}
#planSec #frPlan .priceDetail dt { background: #2271bc;}
#planSec #frPlan .priceDetail dd {letter-spacing: -0.03em;}

#planSec .priceTtlBox .priceDetail dl dt{text-align: center;margin-right: 0;padding: 0.2em 0.5em 0;}


#planSec .SoloBox.asmo{}
#planSec .SoloBox.asmo .priceInfo{
    width: 100%;
}
#planSec .SoloBox.asmo .priceDetail{
    -webkit-box-orient: inherit;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.6em 0 0.4em;
    gap: 6px 1em;
}
#planSec .SoloBox.asmo .priceDetail dl{
}
#planSec .SoloBox.asmo .priceDetail dl dt{background:var(--COLOR-GREEN);}

#planSec .SoloBox.asmo .titleBox {}
#planSec .SoloBox.asmo .titleBox h4{
    width: 100%;
}
#planSec .SoloBox.asmo .titleBox p{
    font-size: 14px;
    color:var(--COLOR-GREEN);
}
#planSec .SoloBox.asmo .targetSchool{color:var(--COLOR-GREEN);font-size:80%;margin: 0em auto 0;text-align: center;}





#planSec .RoomBox{
    margin: 3em auto 0;
}
#planSec .RoomBox .regularBox{
    /* display: flex; */
    /* justify-content: left; */
    /* flex-wrap: wrap; */
}

#Room h4{position: relative;padding-left: 1em;}
#Room h4::before {content: "■";position:absolute;left: 0em;}

#planSec .RoomBox .regularBox h4 span,
#planSec .RoomBox .regularBox h4{
    color: #d3684e;
}
#planSec .RoomBox .premiumBox h4 span,
#planSec .RoomBox .premiumBox h4{
    color: #533767;
}
#planSec .RoomBox .lightBox h4 span,
#planSec .RoomBox .lightBox h4{
    color: #999899;
}

#planSec .RoomBox .regularBox h4 span{}
#planSec .RoomBox p{}

#planSec .RoomBox .pre-txt{font-weight: bold;padding-left: 0.25em;}
#planSec .RoomBox .pre-txt .preBox{display: flex;}
#planSec .RoomBox .pre-txt .preBox{/* margin:0; */margin: 2% 0% 0% 0%;align-items: baseline;}
#planSec .RoomBox .pre-txt .preBox .preMember{font-size: 100%;}
#planSec .RoomBox .pre-txt .preBox .prePrice{font-size: 120%;line-height: 1.4;}
#planSec .RoomBox .pre-txt .preBox .prePrice span{
    font-size: 70%;
}


#planSec .RoomBox .content{
    display: flex;
}
#planSec .RoomBox .content{width:100%;margin-top: 2em;}
#planSec .RoomBox .content li{width: 30%;font-size: 100%;}
#planSec .RoomBox .freeBase .content .contentList{justify-content:center}

#planSec .RoomBox .freeBase .content{margin: 1.5em 0 0.9em;}

#planSec .RoomBox .content{
    margin: 0.6em 0 1em;
}
#planSec .RoomBox .freeBase .content{
    margin: 1.4em 0 1em;
}

#planSec .content p{text-align: center;line-height: 1.2em;margin: 0em 0 0em 0;}


#planSec .lightBox{}
#planSec .lightBox .lightFixedBox{
}
#planSec .lightBox .FixedBox{
    width: 46%;
}
#planSec .lightBox .FixedBox .MonthlyFe{
    border: 2px solid #999899;
    /* text-align: center; */
}
#planSec .lightBox .FixedBox .MonthlyFe .title{
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    color: #999899;
    border-bottom: 2px solid #999899;
    margin: 0.3em 0 0em 0;
}
#planSec .lightBox .FixedBox .MonthlyFe .title span{
    color: #00aca4;
}
#planSec .lightBox .FixedBox .MonthlyFe .about .Monttl{
    background-color: #999899;
    margin: 0em 0 0em 0;
    padding: 1.5em 0.5em 1.5em 0.5em;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
}
#planSec .lightBox .FixedBox .MonthlyFe .about{
    justify-content: space-between;
    align-items: center;
}
#planSec .lightBox .FixedBox .MonthlyFe .about .Monpraice{
    font-size: 16px;
    font-weight: bold;
    padding: 0em 0.5em 0em 0em;
    margin: 0em 0 0em 0;
}
#planSec .lightBox .FixedBox .MonthlyFe .about .Monpraice span{
    font-size: 23px;
}
#planSec .RoomBox .lightBox .content div {
    width: 48%;
    line-height: 1;
    padding: 0.7em 0em;
}
#planSec .RoomBox .lightBox .content .times {
    width: 6.66%;
}

/* 料金画像 */
.priceImgBox{margin-bottom:3em;}
.priceImgBox.active .selectAnker{display:none;}
.priceImgBox .selectAnker{
    text-align: center;
}
.priceImgBox .selectAnker a{
    position: relative;
    background: var(--COLOR-RED);
    color: #fff;
    font-weight:bold;
    padding: 1em 3em;
    border-radius:10px;
}
.priceImgBox .selectAnker a:hover{}
.priceImgBox .selectAnker a:before{content:"";background:url("../images/icon_place.png");background-size: contain;background-repeat: no-repeat;background-position-x: center;display: inline-block;width: 18px;height: 1.2em;vertical-align: sub;margin-right: 4px;}
@media screen and (max-width: 767px) {

    #planSec .RoomBox .studyBox{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #standard dl.clear{
    margin-bottom: 10%;
}
.priceImgBox p{
    text-align: center;
}
    
}