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

/*----------------------------------------------------------------------------
***                                                                  wrap
----------------------------------------------------------------------------*/

section .sectionInner{width: 90%; padding: 12% 0 6%; margin:0% auto;}

/*----------------------------------------------------------------------------
***                                                           ファストビュー
----------------------------------------------------------------------------*/
#schoolnfoArea{ padding-bottom: 0;}
#schoolnfoArea:after {
    content: "";
    background: url(../images/kousha/img_bg_fv_sp.jpg) no-repeat top;
    /* background-color: #009c941A; */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#schoolnfoArea.bg_diagonal::before{
    content: normal;
}
#messageSec{ position: relative; padding-bottom: 4em;}
#messageSec::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: -2;
    opacity: 0.3;
}

#breadcrumbArea .breadcrumbInner li{font-size: 80%}

#schoolNameSec .sectionInner{ padding: 5% 0; }
#schoolNameSec .schoolNameBox h2 { font-size: 200%;}

#schoolNameSec ul li{ width: 49%;}
#informationSec .sectionInner .summerBannerPc{display: none;}
#informationSec .sectionInner .summerBannerSp{display: block; width: 87%; margin: 0 auto 2em ;}

#informationSec .openNotice{ font-size: 180%; padding: 0.4em 0.5em 0.5em;}
#informationSec .schoolInfo{ display: block;}
#informationSec .mapBox{ margin: 5% 0 0; max-width: 100%;}
#informationSec .mapBox iframe { width: 100%;}
#informationSec .cpnBox{ padding-bottom: 5%; margin:2em 0 0;}
#informationSec .cpnBox p strong{ font-size: 150%;}
#informationSec .cpnBox dl dd:last-of-type span.txtColorPK{ font-size: 250%;}
#informationSec .cpnBox dl.raikoCpn dd:first-of-type::before {
    content: '';
    width: 50%;
    position: absolute;
    right: 0;
    top: -15px;
    background: url(../images/top/img_raikotokuten_bg.png) no-repeat;
    background-size: contain;
    background-position: top 0 right 0;
}

/* #informationSec .cpnBox dl.raikoCpn dd:first-of-type::after {
    content: '';
    width: 50%;
    height: 250%;
    position: absolute;
    right: 0;
    top: -20px;
    background: url(../images/top/img_raikotokuten.png) no-repeat;
    background-size: contain;
    background-position: right;
} */
#informationSec #eventList .slick-list{}
#informationSec .slick-list { width: 100%;}

#eventListCard{ margin-bottom: 3em;}
#eventList .event-card{ width: 90%; margin: 5% auto;}
#eventList .event-contents{ padding: 5% 5% calc(5% + 2em); height: auto;}
#eventList .event-contents .event-c-school { margin: 0; font-size: 100%; }
#eventList .event-contents .event-c-school span{padding: 0.3em 0.5em;  }
#eventList .event-contents .event-c-sub{ margin: 5% 0; font-size: 100%;}
#eventList .event-contents .event-c-ttl{ margin: 5% 0;}
#eventList .event-contents .event-c-txt{ margin: 5% 0 0; font-size: 100%;}

/*----------------------------------------------------------------------------
 ***                                                         messageSec
----------------------------------------------------------------------------*/
#messageSec .messageBox div{ display: block; text-align:center;}
#messageSec .messageBox p{ width: 100%; margin: 5% 0 0;}
.teacherGallery > p{ text-align:left;}

/*----------------------------------------------------------------------------
 ***                                                         pageMenu
----------------------------------------------------------------------------*/
.pageMenu ul{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; margin: 0 auto;}
.pageMenu ul li{ width: 50%; margin: 2% auto;}
.pageMenu ul li:nth-child(2){ border-right: 1px solid #707070;}

.msb .pageMenu ul li:nth-child(2){ border: none;}
/*----------------------------------------------------------------------------
 ***                                                          kodawariSec
----------------------------------------------------------------------------*/
#kodawariSec h3 img{ width: 55%;}
#kodawariSec .kodawariCont{ padding: 5%; margin: 2em 0;}
#kodawariSec .kodawariContOther{ padding: 5%; margin: 2em 0;}
#kodawariSec .kodawariContOther .pointBox{ display: block;}
#kodawariSec .kodawariContOther .pointBox dl{ width: 100%; padding: 5%; margin: 13% 0 0;}
#kodawariSec .kodawariCont h4::before{ width: 1em; height: 2em;}
#kodawariSec .kodawariCont h4{ padding-left: 1.7em;}
#kodawariSec .kodawariContOther .txtArea{ margin-bottom: 5%;}
#kodawariSec .kodawariContOther .pointBox dl dt .point{ display: block; width: 25%; left: 5%; top: -2.5em;}

/*----------------------------------------------------------------------------
 ***                                                          planSec
----------------------------------------------------------------------------*/
#planSec .bg_plan{ padding: 5%; margin: 7% auto 0;}
#planSec .bg_plan > p{ text-align:left;}
#planSec .priceTable{width: 100%; overflow-x: scroll; margin: 5% 0 0; padding: 0 0 5%;}
#planSec .priceTable th{width:16%;}
#planSec .priceTable td{padding: 0.4em 0.4em;font-size: 115%;}
#planSec .priceTable .month td{padding: 0.3em 0.5em;font-size: 115%;}
#planSec .priceTable table{ width: 150%; }
#planSec .planTable{ margin-bottom: 7%;}
#planSec .samplePlan .pick_price p .intax{ display: block;}
#planSec .samplePlan .sampleTxt{ margin-bottom: 5%;}

#optionBox h5{ margin-bottom: 5%;}
/* #optionBox dl:nth-of-type(1){ padding: 0 0 5%;} */
#optionBox dt{ line-height: 1.5em;}
#optionBox #ittomoshi .moshiFree{ font-size: 70%;}
#optionBox #nbkoption dd.txtBox{ width: 100%;}
#optionBox .usagi{ top: unset; right: -5%; display: block; width: 22%;}

#costBox .costCon{padding: 2em 1em;}
#costBox .costCon dl dt{font-size: 190%;}

#costBox .costCon .ExpBox{margin: 0 1em 0;}
#costBox .costCon .ExpBox dl{width: 100%;margin: 0.5em 0;padding: 1em;}
#costBox .costCon .ExpBox dl.Adm dt span{padding-left: 20px;}
#costBox .costCon .ExpBox dl.Adm dt span::before{width: 35px;height: 33px;}
#costBox .costCon .ExpBox dl dt span{padding-left: 30px;}
#costBox .costCon .ExpBox dl.month dt span::before{width: 40px;height: 35px;left: -17px;}
#costBox .costCon .ExpBox dl dd{font-size: 250%;margin: 0;}
#costBox .costCon .ExpBox dl.month dd{width: calc(90%/1);margin: 0.2em 0;}
#costBox .costCon .discBox dl{width: 100%;margin: 0.5em 0;}
#costBox .discountSec .discBox{margin: 0 1em 0;}
#costBox .discountSec .discBox dl dt{font-size: 180%;height: auto;}
#costBox .discountSec .discBox dd{font-size: 190%;}

#otameshiBox h4{ padding:5% 7%;}
#otameshiBox h4 span:after{
    content: "";
    width: 3.5em;
    height: 3.5em;
    background: url(../images/top/img_otameshi_txt_f.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -30%;
    top: -75%;
}
#otameshiBox h4 span img{ width: 85%;}
#otameshiBox h4 span img:first-child{ margin:0;}
#otameshiBox .boxInner > div{ padding: 5%;}
#otameshiBox ul{ margin-bottom: 5%;}

/*----------------------------------------------------------------------------
***                                                           入塾の流れ
----------------------------------------------------------------------------*/
#flowSec .sectionInner{ padding:12% 0; }
#flowSec .flowBox > li{ padding: 1em 0; border-bottom:2px solid #f2f2f2;}
#flowSec .flowBox > li::before {
    content: '';
    width: 40px;
    height: 40px;
}
#flowSec .flowBox > li > p{ width: 100%; margin-left: 50px; margin-top: 5%;}
#flowSec .flowBox > li dl{ width: 60%; display: contents;}
#flowSec .flowBox > li dt{ width: 100%;}
#flowSec .flowBox > li dt,
#flowSec .flowBox > li dd{ margin-left: 50px; width: 100%;}
#flowSec .flowBox>li dd{ font-size: 100%;}

#flowSec li:first-child dd.flowconfirmBtnBox{ margin-left: 50px;}
#flowSec li:first-child dd.flowconfirmBtnBox{ width: calc(100% - 50px)}
#flowSec li:first-child div.flowconfirmBtnBox{ margin-left: 50px;}