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

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

section .sectionInner{  max-width: 1100px; padding:3em 0; width: 90%; margin:0em auto; }
section .sectionInner h3{ font-size: 206.25%;}

#breadcrumbArea{}
#breadcrumbArea .breadcrumbInner{max-width: 1100px;padding:0.5em 0; width: 90%; margin:0em auto;}
#breadcrumbArea .breadcrumbInner li{font-size: 13px;}
#breadcrumbArea .breadcrumbInner li a{color: #231815;}
#breadcrumbArea .breadcrumbInner li:not(:last-child):after{
	content: "";
    display: inline-block;
    border: 0.4em solid transparent;
    border-left: 9px solid #00A199;
    border-right: 0em solid transparent;
    width: 0;
    height: 0;
    margin: 0 0.8em 0 1em;
}

.msb .confirmBtnBox

.confirmBtnBox{ margin:4em 0 0;}
.confirmBtnBox p{ font-size: 162.5%;}
.confirmBtnBox a{color: #fff;text-decoration:none;/* display: inline-block; */}
.confirmBtnBox ul{margin: 1em auto 0;}
.confirmBtnBox li{margin: 0.3em;text-align: center;z-index: 0;width: 15rem;font-size:110.75%; }
.confirmBtnBox .telBtn{width: 100%;}
.confirmBtnBox .telBtn strong{font-size: 150.75%;width: 100%;}
.confirmBtnBox .telBtn strong::before{content: '';
    display: inline-block;
    background: url(../images/kodawari/icon_tel.png) no-repeat;
    background-size: contain;
    width: 24px;
    height: 40px;
    vertical-align: middle;
    margin-right: 0.2em;}
.confirmBtnBox .telBtn span{display: block;font-size: 68.75%;margin-top: -1em;width: 100%;}
.confirmBtnBox .telBtn a{ display: inline-block;font-size: 120%; line-height: 1;}


.msb .confirmBtnBox{
    background-color: #f0f2f2;
    position: relative;
}
.msb .confirmBtnBox .sectionInner{padding: 3em 0 2em;}

.msb .confirmBtnBox p{margin-top: 0; font-weight: bold; text-align: center; position: relative;line-height: 1.2;}
.msb .confirmBtnBox .contentLeft,
.msb .confirmBtnBox .contentRight{
    position: absolute;
    width: 7%;
   top: 4.1em;

}
.msb .confirmBtnBox .contentLeft{
   
    left: 2.8em;
    transform: rotate(-12deg);
}
.msb .confirmBtnBox .contentRight{
    right: 2.8em;
    transform: rotate(12deg);
}

.msb .confirmBtnBox p span{
    font-size: 100%;
    color: #000;
}
.msb .confirmBtnBox ul .trialBtn{display: contents;}
.msb .confirmBtnBox .trialBtn a{
    margin: 0 auto;
    font-size: 155%;
    background: linear-gradient(180deg, #ee8823 0%, #ee8823 50%, #e2801f 50%, #e2801f 100%);
    border-radius: 0.2em;
    position: relative;
}
.msb .confirmBtnBox .trialBtn a::before,
.msb .confirmBtnBox .trialBtn a::after{
 content: "";
    position: absolute;
    top: 50%;
    right: 3%;
    width: 0.7em;
    height: 3px;
    border-radius: 10002px;
    background-color: rgba(255, 255, 255, 0.6);
    transform-origin: calc(100%) 50%;
}
.msb .confirmBtnBox .requestBtn a::after,
.msb .confirmBtnBox .requestBtn a::before{
   content: "";
    position: absolute;
    top: 50%;
    right: 6%;
    width: 0.8em;
    height: 3px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.6);
    transform-origin: calc(100%) 50%;

}
.msb .confirmBtnBox .trialBtn a::before,
.msb .confirmBtnBox .requestBtn a::before{
  transform: rotate(45deg);
}

.msb .confirmBtnBox .trialBtn a::after,
.msb .confirmBtnBox .requestBtn a::after {
  transform: rotate(-45deg);
}
.msb .confirmBtnBox ul .requestBtn{width: 90%;
    text-align: center;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;}
.msb .confirmBtnBox ul .requestBtn a{ 
    border-radius: 0.2em;
    background: linear-gradient(180deg, #4ecddb 0%, #4ecddb 50%, #4ac3cc 50%, #4ac3cc 100%);
    position: relative;
    font-size: 140%;
}
.msb .confirmBtnBox ul .telBtn{width: 90%; margin-left: auto;
    margin-right: auto;
    margin-top: 1.3em;}
    .msb .confirmBtnBox ul .telBtn a{font-size: 140%;}
.msb .confirmBtnBox ul .telBtn .number{display: block;font-size: 75%;}
.msb .confirmBtnBox ul .telBtn .number .strong{font-size: 120%; font-weight: bold; display: contents;}
.msb .confirmBtnBox ul .telBtn .day{color: #333;}


/*----------------------------------------------------------------------------
***                                                           ファストビュー
----------------------------------------------------------------------------*/

.msb{position: relative;}
.msb #schoolNameSec {position: relative; padding: 2em 0 13em; background: url(../images/kousha/kitasenzu_msb/fv_bg.jpg) no-repeat center / cover ; z-index: -1;}
.msb #schoolNameSec::before{
    content: "";
    background: url(../images/kousha/kitasenzu_msb/fv_illust.png) no-repeat center;
    z-index: 0;

}
#schoolNameSec .sectionInner{ padding: 2em;}
#schoolNameSec .schoolNameBox{ position: relative;}
#schoolNameSec .schoolNameBox h2 {
    position: absolute;
    top: 0;
    left: 45%;
    font-size: 225%;
    white-space: nowrap;
}
.msb #schoolNameSec .schoolNameBox h2 {
    position: static;
    font-size: 230%;
    text-align: center;
    color: #fff;
}
#schoolNameSec .schoolNameBox .logoArea {
width: 42%;
    border-right: 3px solid #009c94;
    margin-right: 3%;
    padding-right: 3%;
}
.msb #schoolNameSec .schoolNameBox .logoArea{
    margin: 0;
    width: 100%;
    border: none;
}

#schoolNameSec .schoolNameBox .NameArea { margin-top: 3.5em; width: 55%; display: flex; flex-direction: column;}
/* #schoolNameSec .schoolNameBox .NameArea h2{ font-size: 225%;} */
 #schoolNameSec .schoolNameBox .NameArea .koushaName{order: 2;line-height: 1.2;}
#schoolNameSec .schoolNameBox .NameArea p { font-size: 87.5%;}
#schoolNameSec .schoolNameBox .NameArea .newOpen{
    font-size: 140%;
    color: #fff;
    text-align: center;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
    order: 1;
    margin-bottom: 0;
    margin-top: 0;
}

#schoolNameSec .schoolNameBox .NameArea{}
#schoolNameSec ul{ margin: 2em 0 0;}
#schoolNameSec ul li{ width: 24%; }

/* 1000px以下*/
@media screen and (max-width:1000px) {
#schoolnfoArea:after{ height: 50%;}
}

/* 800px以下*/
@media screen and (max-width:800px){
    #schoolNameSec .schoolNameBox{ display: block;}
    #schoolNameSec .schoolNameBox .NameArea{ width: 100%; margin-top: 3%;}
    #schoolNameSec ul li{ margin: 0 0 2%;}
    .mushikosugi #schoolNameSec .schoolNameBox h2{ position: absolute; left: 0; top: unset;}
    .mushikosugi #schoolNameSec .schoolNameBox .NameArea{ margin-top: 3.5em}
}

.msb #schoolNameSec .sectionInner{padding: 0;}
.msb #schoolNameSec .schoolNameBox{position: relative;}
.msb #schoolNameSec .schoolNameBox .NameArea{width: 80%; margin: 0 auto;background: rgba(37, 37, 37, 0.9);padding: 0.5em 0 0.7em;}
.msb #schoolNameSec .fv_img{
    position: absolute;
    top: 22%;
    z-index: -1;
   
}

/*----------------------------------------------------------------------------
 ***                                                         aboutSec
----------------------------------------------------------------------------*/
#aboutSec{
    background: rgba(240, 242, 242, 0.9);
}
#aboutSec .sectionInner{padding: 1.5em 0 0;}
#aboutSec .aboutBox h3{
   font-size: 220%;
    text-align: center;
    line-height: 1.14;
}
#aboutSec .aboutBox .features{width: 90%;margin-top: 1.1em; margin-left: auto;margin-right: auto;}
#aboutSec .aboutBox .features .heading{
    margin-bottom: 0.4em;
    padding: 0.2em 0;
    font-size: 170%;
    text-align: center;
    background: #00a199;
    color: #fff;
    border: #fff 1.2px solid;
}
#aboutSec .aboutBox .features .featuresList{}
#aboutSec .aboutBox .features .featuresList .featuresItem{
   background-color: #00a199;
   border: #fff 1.2px solid;
    color: #fff;
    text-align: center;
    width: 33%;
    margin-right: 0.5em;
    padding: 1em 0;
    font-size: 130%;
}
#aboutSec .aboutBox .features .featuresList .featuresItem:last-child{
    margin-right: 0;
}
#aboutSec .aboutBox .features .featuresList .featuresItem img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}
#aboutSec .aboutBox .features .featuresList .featuresItem:last-child img{
    width: 50%;
}

#aboutSec .aboutBox .price{color: #4d4d4d;}
#aboutSec .aboutBox .price .priceList{
    margin-top: 2em;
}
#aboutSec .aboutBox .price .priceList div{
    width: 31%;
    padding: 0 0.7em;
    border-right: 1px solid #ccc;

}
#aboutSec .aboutBox .price .priceList div:last-child{
    padding-right: 0;
    border-right: none;
}
#aboutSec .aboutBox .price .priceList div:first-child{
    padding-left: 0;
}
#aboutSec .aboutBox .price .gread{
    margin-bottom: 0;
    font-size: 100%;
    text-align: center;
    font-weight: bold;
    color: #4d4d4d;
    background-color: #b2e3e0;
    border: #fff 2px solid;
    border-radius: 1em;
}
#aboutSec .aboutBox .price .monthly{
    margin-top: 0;
    font-size: 130%;
    font-weight: bold;
    color: #4d4d4d;
    text-align: center;
    line-height: 1;
}
#aboutSec .aboutBox .price .monthly .month{font-size: 70%;line-height: 1.6;font-weight: normal;}
#aboutSec .aboutBox .price .monthly .tax{font-size: 60%; font-weight: normal;}
#aboutSec .aboutBox .price .attention{margin-top: 0;font-size: 70%; text-align: center;color: #4d4d4d;}

#aboutSec .aboutBox .explanation .heading{
    margin: 1.5em 0 0;
    padding: 0.6em 0 ;
    font-size: 120%;
    line-height: 1.4;
    text-align: center;
    font-weight: bold;
    color: #00A199; 
    background-color: #fff;
}
#aboutSec .aboutBox .explanation .text{
    margin: 1.4em 0 0;
    font-size: 99%;
}
#aboutSec .aboutBox .explanation .explanationImg img{
    width: 49%;
    display: flex;
    align-items: center;

}
#aboutSec .aboutBox .explanation .explanationImg img:first-child{


}

/*----------------------------------------------------------------------------
 ***                                                         schoolInfoSec
----------------------------------------------------------------------------*/
#schoolInfoSec .sectionInner {padding: 2em 0;}

#schoolInfoSec .schoolInfoBox h3{font-size: 255%; text-align: center; color: #00A199;}
#schoolInfoSec .schoolInfoBox .title{display: flex; flex-direction: column;}
#schoolInfoSec .schoolInfoBox h3{order: 2;line-height: 0.9em;margin-bottom: 0.7em;}
#schoolInfoSec .schoolInfoBox .newOpen{color: #ed911f; order: 1;margin: 0; text-align: center;font-size: 120%;}
#schoolInfoSec .schoolInfoBox .heading{
    font-size: 120%;
    text-align: center;
    background-color: #00A199; 
    color: #fff;}

#schoolInfoSec .schoolInfoBox .infoList .schoolabout{
    width: 59%;
}
#schoolInfoSec .schoolInfoBox .infoList .schoolabout dt{
    color: #00A199;
    border-bottom: 1px solid #00A199;
}
#schoolInfoSec .schoolInfoBox .infoList .schoolabout dd{
    margin-bottom: 0;
}
#schoolInfoSec .schoolInfoBox .infoList .schoolabout .phoneNum{
    font-size: 130%;
    font-weight: bold; 
    color: #3266cd;}
#schoolInfoSec .schoolInfoBox .infoList .openTime{
    width:35%;
}
#schoolInfoSec .schoolInfoBox .infoList .openTime table tr{
    width: 100%;
    font-size: 85%;
}
#schoolInfoSec .schoolInfoBox .infoList .openTime table td{
    padding: 0.5em 1.7em;
    text-align: center;
}
#schoolInfoSec .schoolInfoBox .infoList .openTime table td:first-child{
    padding: 0.3em 0.4em;
    background-color: #f7f9f8;
}


/*----------------------------------------------------------------------------
 ***                                                         freeSpaceSec
----------------------------------------------------------------------------*/
#freeSpaceSec{
    background: url(../images/kousha/kitasenzu_msb/freespace_bg.jpg) no-repeat top / contain;

}
#freeSpaceSec .sectionInner{
    padding-top: 3em;
}

#freeSpaceSec .titleBox .title{
    font-size: 210%;
     text-align: center;
}
#freeSpaceSec .titleBox .subTitle{
    color: #00a199;
    font-size: 110%;
     text-align: center;
}
#freeSpaceSec .infoBox{
    position: relative;
    padding-bottom: 2em;
    border-bottom: 1px solid #f2f2f2;
}
#freeSpaceSec .infoBox .infoList{
   margin-right: 0;
}
#freeSpaceSec .infoBox .infoList li{
    position: absolute;
    text-align: center;
    margin-bottom: 0.2em;
    width: 37%;
    font-size: 120%;
    color: #fff;
    border-radius: 1em;
    border: 1px solid #fff;
}
#freeSpaceSec .infoBox .infoList .infoItem1{
    background-color: #f2994a;
    top: 17%;
    right: 0;
}
#freeSpaceSec .infoBox .infoList .infoItem2{
    background-color: #f2c94c;
    top: 24%;
    right: 0;
}
#freeSpaceSec .infoBox .infoList .infoItem3{
    background-color: #56cc9d;
    top: 31%;
    right: 0;
}
#freeSpaceSec .infoBox img{
    margin-bottom: 1em;
}

#freeSpaceSec .videoClassBox{
    margin-top: 2em;
}



/*スライド*/
.slick-arrow{ z-index: 2; }
    .slick-prev{ left: 10%; color: #333;} 
    .slick-next{ right: 10%; color: #333 }
#freeSpaceSec .videoClassBox  .double-slider{
    background-color: #f2f2f2;
    border-radius: 1em;
}
#freeSpaceSec .videoClassBox  .double-slider .text-slider .txt{
    font-size: 120%;
    font-weight: bold;
    text-align: center;
    padding: 1.5em 0 3em;
}
#freeSpaceSec .videoClassBox  .double-slider .container img{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

#freeSpaceSec .slick-prev, 
#freeSpaceSec .slick-next {
    position: absolute;
    top: 38%;
    cursor: pointer;
    outline: none;
    border-top:2px solid #8E8E8E;
    border-right: 2px solid #8E8E8E;
    height: 25px;
    width: 25px;
	z-index: 2;
}
#freeSpaceSec .slick-prev { left: 6%; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg);}
#freeSpaceSec .slick-next { right: 6%;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}

#freeSpaceSec .slick-dots {
    position: absolute;
    top: -7%;
    height: 0em;
}
#freeSpaceSec .slick-dots li button:before {
    font-family: 'slick';
    font-size: 10px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '●';
    text-align: center;

    opacity: .25;
    color: #00a199;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#freeSpaceSec .slick-dots li.slick-active button:before {
    opacity: .75;
    color: #00a199;
}

#freeSpaceSec .slick-dotted.slick-slider{
    position: relative;
}

#freeSpaceSec .slick-list{
    position: static;
}

#freeSpaceSec .caption-display {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding: 0 10px;
        }

        /* 個々の見出しのスタイル */
      #freeSpaceSec  .caption-display .caption-item {
            font-size: 83%;
    margin-top: -2em;
            color: #999;
            font-weight: bold;
            transition: color 0.3s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


#freeSpaceSec .videoClassBox .heading ,#learningManagementSec .testBox .heading ,#learningManagementSec .coachingBox .heading {
    display: flex;
    flex-direction: column;
    margin-top: 2em;
}

#freeSpaceSec .videoClassBox .heading .title,#learningManagementSec .testBox .heading .title,#learningManagementSec .coachingBox .heading .title{
    font-size: 160%;
    color: #333333;
    text-align: center;
    order: 2;
}

#freeSpaceSec .videoClassBox .heading .title .icon,#learningManagementSec .testBox .heading .title .icon,#learningManagementSec .coachingBox .heading .title .icon{
    width: 6%;
    margin-top: -0.2em;
    margin-right: 0.2em;
}
#freeSpaceSec .videoClassBox .heading .subTitle,#learningManagementSec .testBox .heading .subTitle,#learningManagementSec .coachingBox .heading .subTitle{
    margin-bottom: 0;
    color: #912a5e;
    text-align: center;
    font-weight: bold;
    order: 1;
}
#freeSpaceSec .videoClassBox .strong,#learningManagementSec .testBox .strong,#learningManagementSec .coachingBox .strong{
    font-weight: bold;
}




/*----------------------------------------------------------------------------
 ***                                                    learningManagementSec
----------------------------------------------------------------------------*/

#learningManagementSec .titleBox,
#classSec .titleBox {display: flex; flex-direction: column; margin-bottom: 1em;}
#learningManagementSec .titleBox .title,
#classSec .titleBox .title{ font-size: 200%; text-align: center; order: 2;}
#classSec .titleBox .title span{display: block;font-size: 70%; line-height: 0.4;}
#learningManagementSec .titleBox .subTitle,
#classSec .titleBox .subTitle{color: #00A199;font-size: 120%; line-height: 0; text-align: center; order: 3;}
#learningManagementSec .titleBox .point,
#classSec .titleBox .point{
    background-color: #f2c94c;
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 0em 0.6em;
    border-radius: 0.5em;
    color: #fff;
    text-align: center;
    order: 1;
}
#learningManagementSec { background: url(../images/kousha/kitasenzu_msb/lms_bg.jpg) no-repeat top / contain; margin-bottom: 2em;}

#learningManagementSec .infoBox{border-bottom: 1px solid #f2f2f2; padding-bottom: 2.5em;}
#learningManagementSec .infoBox .speechBubble{
    text-align: center;
    font-weight: bold;
     position: relative;
  display: inline-block;
  margin: 1.5em auto 2em;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
 filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .2));
  /* box-shadow: 0 0 8px gray; */
  background: #fff;
  border-radius: 0.5em;
  display: block;
    width: 75%;
    }
    #learningManagementSec .infoBox .speechBubble::before{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 16px solid transparent;
    /* border-top: 17px solid gray; */
    }
    #learningManagementSec .infoBox .speechBubble::after{
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    margin-left: -13px;
    border: 14px solid transparent;
    border-top: 14px solid #fff;
    z-index: 1;
    }
#learningManagementSec .infoBox .speechBubble ul li  span{color: #00A199;}
#learningManagementSec .infoBox .speechBubble ul li{
    font-size: 120%;
    text-align: center;
}

/*----------------------------------------------------------------------------
 ***                                                         classSecSec
----------------------------------------------------------------------------*/
#classSec { background: url(../images/kousha/kitasenzu_msb/class_bg.jpg) no-repeat top / contain; background-size: 100%; margin-bottom: 2em;}
#classSec .titleBox .subTitle{margin-top: 1.7em;}
#classSec .infoBox .infoList{
    flex-direction: row;
    flex-wrap: wrap;
}
#classSec .infoBox .infoList .infoItem{width: 49%; margin-top: 0.7em; color: #912a5e;text-align: center; font-weight: bold;}

/*----------------------------------------------------------------------------
 ***                                                         priceSec
----------------------------------------------------------------------------*/
#priceSec .titleBox{margin-bottom: 1em;}
#priceSec .titleBox .title{
    font-size: 230%;
    text-align: center;
    line-height: 1.2;

}
#priceSec .titleBox .subTitle{
    font-size: 110%;
    font-weight: bold;
    color: #00A199;
    text-align: center;
}
#priceSec .titleBox .baseFee .tax{
    font-size: 72%;

}
#priceSec .titleBox .baseFee p{
    border-bottom: 1px solid #808080;
}

#priceSec .greadBox{
    padding-top: 1em;
    border-top: 1px solid #e6e6e6;
}
#priceSec .greadBox h5{
    font-size: 160%;
    text-align: center;
}
#priceSec .greadBox .freeBase .heading{
    padding: 0.4em 0;
    text-align: center;
    color: #fff;
    background-color: #eb5757;
    border-radius: 2em;
}
#priceSec .greadBox .freeBase .heading  span{
    font-size: 85%;
    color: #fff;
}
#priceSec .greadBox .freeBase .text{
    font-size: 130%;
    line-height: 1.1;
    text-align: center;
    font-weight: bold;
}
#priceSec .greadBox .freeBase .text .textColor{
    display: block;
    font-size: 75%;
    color: #00A199;
}
#priceSec .greadBox .freeBase .priceList{
    padding: 0.5em 0.4em 0.4em;
    border: 1px solid #ccc;
}
#priceSec .greadBox .freeBase .priceList .priceItem{
width: 45%;
font-weight: bold;
}
#priceSec .greadBox .freeBase .priceList .priceItem .month{
    margin: 0.6em 0.3em 0 0;
}
#priceSec .greadBox .freeBase .priceList  .price {
line-height: 1.3;
}
#priceSec .greadBox .freeBase .priceList  .price .num{
    font-size: 160%;
}
#priceSec .greadBox .freeBase .priceList  .price .tax{
display: block;
font-size:85%;
}

#priceSec .greadBox .freeBase .priceList .content{
   width: 52%;
}
#priceSec .greadBox  .priceList .content .contentList li{
    width: 25%;
    line-height: 1;
    margin: 0 0.1em;
    padding: 0.5em 0.5em 0.5em 0.6em;
    text-align: center;
    color: #fff;
    border-radius: 0.4em;
    display: flex;
    align-items: center;
    display: grid;
}
#priceSec .greadBox  .priceList .content .contentList .freeBase{
    background-color: #eb5757;
}
#priceSec .greadBox  .priceList .content .contentList .management{
    background-color: #f2c94c;
}
#priceSec .greadBox  .priceList .content .contentList .class{
    background-color: #00a199;
}
#priceSec .greadBox  .priceList .content .contentList .video{
background-color: #4e4c6c;
}

#priceSec .greadBox  .priceList .content .contentList .content-off{
    background-color: #e6e6e6;
}

#priceSec .greadBox .regular .heading{
    margin-top: 1.5em;
    text-align: center;
    color: #fff;
    background-color: #00a199;
    border-radius: 1em;
}
#priceSec .greadBox .regular .heading span{
    font-size: 80%;
    color: #fff;
}
#priceSec .greadBox .regular .text{
  font-size: 70%;
    text-align: center;
    margin: 0 0 1em;
}
#priceSec .greadBox .regular .priceList .priceItem{
    border: 1px solid #333;
    padding: 0.7em 0.2em;
}
#priceSec .greadBox .regular .priceList .priceItem:nth-child(2){
    border-top: none;
    border-bottom: none;
    padding: 0.7em 0.2em;
}

#priceSec .greadBox .regular .priceList .priceItem .price{
width: 28%;
}

#priceSec .greadBox .regular .priceList .priceItem .content{
    width: 45%;
    margin-top: 2.6em;

}
#priceSec .greadBox .regular .priceList .supplement{
    text-align: right;
    border: 1px solid #333;
    border-top: none;
}
#priceSec .greadBox .regular .priceList .supplement p{
    margin: 0;
    padding: 0.2em 0.7em;
    text-align: right;
    font-size: 95%;
}
#priceSec .greadBox .regular .priceList .priceItem .content li{
    font-size: 65%;
    padding: 1em 0.6em 1em 0.7em;
    margin-top: -3.9em;
}
#priceSec .greadBox .regular .priceList .priceItem .price .month{
   width: 25%;
    font-size: 80%;
    margin-right: -0.7em;
    font-weight: normal;
    margin-top: 0.6em;
}
#priceSec .greadBox .regular .priceList .priceItem .price p:last-child{
    width: 80%;
    font-size: 130%;
    text-align: center;
    line-height: 1.1;
    font-weight: bold;
}

#priceSec .greadBox .regular .priceList .priceItem .price p:last-child .tax{
    font-size: 65%;
    display: block;
    font-weight:normal;
}

#priceSec .greadBox .regular .priceList .priceItem .text .time{
    display: block;
}
#priceSec .greadBox .regular .priceList{
    position: relative;
}
#priceSec .greadBox .regular .priceList img{
    position: absolute;
    top: 0;
    left: 5%;
}


 .pentagon-container {
            /* margin-bottom: -30px; 重ねるための余白 */
            color: #fff;
        }

         /* .pentagon::before{
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
         }
         .pentagon::after{
            clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
            background-color: #333;
         } */

        .color-1 {
            /* clip-pathで五角形を生成 */
            position: relative;
            clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 89%, 0% 70%);
            background-color: #3b94a3;
            width: 25%;
            position: absolute;
            top: 0%;
            left: 2%;
            z-index: 3;
        }
        
        .color-2 {
            /* clip-pathで五角形を生成 */
            position: relative;
            clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 88%, 0% 70%);
            background-color: #3b7c92;
            width: 25%;
            position: absolute;
            top: 20%;
            left: 2%;
            z-index: 2;
        }
        .color-3 {
            /* clip-pathで五角形を生成 */
            position: relative;
            clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 88%, 0% 70%);
            background-color: #465790;
            width: 25%;
            position: absolute;
            top: 56%;
            left: 2%;
            z-index: 1;
        }
        .pentagon .txt{
            transform: scale(0.95);
            clip-path: polygon(0% 0%, 100% 0%, 100% 69%, 50% 87%, 0% 69%);
            background-color: #fff;
            font-size: 82%;
    padding: 3.5em 0em 3em;
    text-align: center;
    margin: 0;
    line-height: 1.2;
    font-weight: bold;
        }
        .pentagon .txt .textColor{
            color: #00a199;
        }
        .pentagon .txt .time{
            display: block;
            font-weight: normal;
                font-size: 85%;
        }
        .color-1 .txt{
            padding-top: 1.5em;
        }


        .pentagon-teal {
            color: white;
        }
        .hight  .color-3{
            top: 52%;
        }

/*----------------------------------------------------------------------------
 ***                                                         snsSec
----------------------------------------------------------------------------*/
#sns .sectionInner{
    border-bottom: 2px solid #f2f2f2;
}
#sns .title{
    margin-bottom: 0.6em;
    font-size: 206%;
    text-align: center;
}
#sns .snsList .snsItem{
    text-align: left;
}
#sns .snsList .snsItem a{
   width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    padding: 0.5em;
    font-size: 150%;
    text-align: center;
    font-weight: bold;
    color: #912a5e;
    border: 4px solid #ddd;
    display: block;
    text-align: center;
}
#sns .snsList .snsItem a{
    
}
#sns .snsList .snsItem img{
    width: 15%;
    margin-right:2em;
}
#sns .snsList .tiktok img{
   margin-left: -1.3em;
}
#sns .snsList .x img{
    margin-left: -4em;
    width: 13%;
}

/*----------------------------------------------------------------------------
 ***                                                         informationSec
----------------------------------------------------------------------------*/
#informationSec{ max-width: 1100px; margin: 0 auto ;  background: #FFF;}
#informationSec .sectionInner{max-width: 1100px; padding:3em 0; width: 90%; margin:0em auto ;}
#informationSec .sectionInner .summerBannerPc{ display: block; width: 87%; margin: 0 auto 2em}
#informationSec .sectionInner .summerBannerSp{ display: none;}

#informationSec .schoolInfo { margin-bottom: 2.5em;}
#informationSec .schoolInfo dl{ margin:0.3em 0;}
#informationSec .schoolInfo dt{ font-size: 125%;}
#informationSec .schoolInfo .school_tel dd a {
    font-size: 187.5%;
    color: #333333;
    font-weight: bold;
    line-height: 1.3em;
}

#informationSec .schoolInfo .school_tel dd a{ }
#informationSec .schoolInfo .school_tel span{ color:#ff3399; font-weight:bold; display:block; margin-top:0.5em;}
#informationSec .schoolInfo .school_tel span a{font-weight:normal; margin-top:-0.1em; display:block; font-size: 160%;}

#informationSec .schoolInfo .noteTxt{ font-size: 87.5%; line-height: 1.5em; display: block;}
#informationSec .mapBox{ max-width: 460px; overflow: hidden; margin-left: 1em;}

#informationSec .slick-list {
    padding: 0 0px;
    max-width: 860px;
    margin: 0px auto;
    width: 90%;
}
#informationSec .slick-prev, 
#informationSec .slick-next {
    position: absolute;
    top: calc( 50% - 12.5px );
    cursor: pointer;
    outline: none;
    border-top:7px solid #8E8E8E;
    border-right: 7px solid #8E8E8E;
    height: 25px;
    width: 25px;
	z-index: 2;
}
#informationSec .slick-prev { left: 2%; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg);}
#informationSec .slick-next { right: 2%;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
#informationSec .slick-dots{ bottom: 0;}
#informationSec.slick-slider{ margin-bottom: calc( 2em + 30px );}
#informationSec .slick-dots li{ width: 15px; height: 15px; margin: 0 3px;}
#informationSec .slick-dots li button:before{ font-size: 13px; color: #FFF; opacity: 1;}
#informationSec .slick-dots li.slick-active button:before{ color: #555;}

#photoGallery{ margin: 3em 0;}
#eventList{ margin: 3em 0;}
#eventList p{ font-size: 156.25%; margin: 0 0 0.3m;}

#eventListCard{ margin-bottom: 5em; -ms-flex-wrap:wrap; flex-wrap:wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
#eventListCard:after {
    content: "";
    display: block;
    width: 24%;
    /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}
#eventListCard:before {
    content: "";
    display: block;
    width: 24%;
    /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}

#eventListCard a{ display: block; width: 100%; height: 100%;}
#eventListCard a:hover{ text-decoration: none; opacity: 0.6; -webkit-transition: 1s all; -o-transition: 1s all; transition: 1s all;}
#eventList .event-card{ width: 24%; margin: 10px 0; height: auto; position: relative; background: #FFF; -webkit-box-shadow: 0px 0px 10px #bfbfbf7a; box-shadow: 0px 0px 10px #bfbfbf7a;}
#eventList .event-card .event-img{ overflow: hidden;}
#eventList .event-card:hover .event-img img { -webkit-transition: 1s all; -o-transition: 1s all; transition: 1s all; -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}
#eventList .event-contents{ padding: 10px; height: 300px;}
#eventList .event-contents .event-c-school { font-size: 87.5%; line-height: 1em; margin: 5px 0 0; }
#eventList .event-contents .event-c-school span{border: 1px solid #00a199; border-radius: 7px; padding: 5px 10px; color: #00a199; display: inline-block; }
#eventList .event-contents .event-c-sub{ font-size: 87.5%; font-weight: bold; line-height: 1em; margin: 10px 0;}
#eventList .event-contents .event-c-sub span{ color: #686868;}
#eventList .event-contents .event-c-sub span:first-of-type{  border-right:2px solid #eaeaea; padding-right: 5px; margin-right: 5px;}
#eventList .event-contents .event-c-sub span{ display: inline-block;}
#eventList .event-contents .event-c-ttl{ font-size: 125%; font-weight: bold; margin: 10px 0; }
#eventList .event-contents .event-c-txt{ font-size: 87.5%; color: #828282; margin: 10px 0 0;}

#eventList .event-link {
    position: absolute;
    left: 50%;
    bottom: 1.5em;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    color: #8b2963;
    font-size: 75%;
    margin-left: -1em;
}
#eventList .event-link:after {
    content: '';
    width: 5px;
    height: 5px;
    border: 0;
    border-top: solid 1px #8b2963;
    border-right: solid 1px #8b2963;
    position: absolute;
    top: 50%;
    right: -20px;
    margin-top: -3px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



#cpnList{ margin: 4em 0 0;}
#cpnList > div{ margin: 1.5em 0;}
#cpnList p{ font-size: 156.25%; margin: 0 0 0.3m;}
#cpnList .eventBnrBox{ max-width: 860px; margin: 1.5em auto 0;}

/*　開校校舎用 */
#informationSec .openNotice {
    color: #e4881f;
    border: 1px solid #e4881f;
    padding: 0.3em 0.5em 0.2em;
    font-size: 250%;
    font-weight: bold;
    line-height: 1.2em;
    margin-bottom: 1em;
}
#informationSec .openNotice * { color: #e4881f;}
#informationSec .openNotice .smallTxt{ font-size: 50%; font-weight: normal; vertical-align: middle;margin-right: 0.3em;margin-bottom: 0.3em;display: inline-block;}
#informationSec .openNotice .weekTxt{ line-height: 1.75em; margin-bottom: 0.3em; margin-right: 0.3em; font-size: 60%; color: #FFF; vertical-align: middle; background: #e4881f; text-align:center; border-radius: 100vh; width: 1.8em; height: 1.8em; display: inline-block;}

#informationSec .cpnBox{ background: #edf9f8; margin: 2.5em 0 0; padding-bottom:1em;}
#informationSec .cpnBox p strong{ display: block; background: #01ACA4; color: #FFF; font-size: 175%; padding:0.5em;}
#informationSec .cpnBox div{ padding: 1em 2em;}
#informationSec .cpnBox dl{  padding:0 1em; width: 90%;}
#informationSec .cpnBox dl:first-child{ border-right:2px dashed #FFF;}
#informationSec .cpnBox dl dt{ border-bottom:2px solid #01ACA4; color: #01ACA4; padding: 0.3em; font-size: 162.5%; margin-bottom: 15px;}
#informationSec .cpnBox dl dd:first-of-type { position: relative; text-align:left;}
#informationSec .cpnBox dl dd:first-of-type span{ font-size: 125%;}
#informationSec .cpnBox dl dd:last-of-type{ font-weight: bold; margin-top: 15px; text-align:left;}
#informationSec .cpnBox dl dd:last-of-type span:not(.txtColorPK) { background: #FFF; display:inline-block; padding: 1em; color: #333333; font-size: 87.5%; line-height: 1.4em; margin-right: 0.5em;}
#informationSec .cpnBox dl dd:last-of-type span.txtColorPK{ font-size: 300%;}
#informationSec .cpnBox dl.raikoCpn dd:first-of-type::before {
    content: '';
    width: 176px;
    height: 127px;
    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: 176px;
    height: 135px;
    position: absolute;
    right: 0;
    top: -25px;
    background: url(../images/top/img_raikotokuten.png) no-repeat;
    background-size: contain;
} */
#informationSec .cpnBox dl.raikoCpn dd:first-of-type{ padding-right: 180px;}
#informationSec .cpnBox dl.raikoCpn dd:last-of-type{ font-size:197.25%; z-index: 1; position: relative;}
#informationSec .cpnBox dl.raikoCpn dd:last-of-type span.txtColorPK{ font-size: 115%; line-height: 1.4em; display:inline-block; line-height: 1em;}



/* 1000px以下*/
@media screen and (max-width:1000px){
    #eventList .event-card{ width: 48%;}
}

/* 800px以下*/
@media screen and (max-width:900px){
    #informationSec .cpnBox div{ display: block; padding:5%;}
    #informationSec .cpnBox dl:first-child{ border-right: none; border-bottom: 1px dashed #CCC; padding: 0 0 5%;}
    #informationSec .cpnBox dl{ width: 100%; padding: 5% 0 5%;}
    
}

/*----------------------------------------------------------------------------
 ***                                                         messageSec
----------------------------------------------------------------------------*/
#messageSec{}
#messageSec h3{ font-size: 200%; }
#messageSec .sectionInner{ max-width: 1100px; width: auto; padding: 3em 0 0;}
#messageSec .sectionInner .bg_messageSec{ background: #FFF; max-width: 1100px; padding: 3em; margin: 3em auto 0;}
#messageSec .messageBox{ margin: 0 0 3em;}
#messageSec .messageBox p{ max-width: 800px; margin: 0 0 0 1em;}
#messageSec .messageBox div{ }
#messageSec h4{font-size: 156.25%; margin-bottom: 1em;}

.teacherGallery{ }
.teacherGallery .flexBox{ max-width: 790px; margin: 0 auto;}
/* .teacherGallery .flexBox:after {
    content: "";
    display: block;
    width: 230px;
    height: 0;
} */
.teacherGallery li{ width: 230px; margin: 0.5em;}
.teacherGallery > p{ margin: 1em 0 2em;}
.teacherGallery dl * { width: 100%;}
.teacherGallery dl dt{ font-size: 125%; margin: 0.5em 0;}
.teacherGallery dl dd span{ margin-right: 0.5em;}
.teacherGallery dl dd.order03{ margin: 0 0 0.5em; font-weight: bold;}
.teacherGallery dl dd.order04{ font-size: 87.5%;}


/* 840px以下*/
@media screen and (max-width:840px) {
    .teacherGallery .flexBox{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
}

/* 1100px以下*/
@media screen and (max-width:1100px) {
    #messageSec .messageBox p{ width: 80%;}

    
}

/*----------------------------------------------------------------------------
 ***                                                         pageMenu
----------------------------------------------------------------------------*/
.pageMenu{ background: #efefef; border-top:3px solid #009b93;}
.pageMenu ul{ max-width: 1100px; width: 90%; padding: 1.5em 0; margin: 0 auto 3em;}
.pageMenu ul li{width: 30%; border-left:1px solid #707070; font-size: 125%; }
.pageMenu ul li:last-child{border-right: 1px solid #707070;}
.pageMenu ul li a:link,
.pageMenu ul li a:visited{ color: #231815; text-decoration: none;}


.msb .pageMenu{margin-top: 2em; background-color: #fff; border-top: none;}
.msb .pageMenu ul li{border: none;}
.msb .pageMenu .titleBox{display: flex; flex-direction: column;}
.msb .pageMenu .title{
    font-size: 200%;
    text-align: center;
    color: #00A199;
    order: 2;
}
.msb .pageMenu .titleBox .subTitle{
    margin-bottom: 0.3em;
    color: #00a199;
    font-size: 170%;
    text-align: center;
    line-height: 0.3;
    order: 1;
}

.msb .pageMenu ul li{
    width: 23%;
}

.msb .pageMenu ul li a{
    display: block;
    text-align: center;
    font-size: 80%;
    position: relative;
    padding: 1em 0 2.5em;
    text-align: center;
    line-height: 0.7;
    box-shadow: 0 0 8px gray;
    border-radius: 0.3em;
}


.msb .pageMenu ul li:nth-child(3) a{
    padding: 1em 0 2.1em;
}



.msb .pageMenu ul li a::before {
    content: "";
    position: absolute;
    display: block;
    bottom: 0.5em;
    left: calc(50% - 0.5em - 0.5px);
    width: 1em;
    height: 1em;
    border-right: 1px solid #4D4D4D;
    border-bottom: 1px solid #4D4D4D;
    transform-origin: center;
    opacity: 1;
}
.msb .pageMenu ul li a::before{
    transform: rotate(45deg);
}
.msb .pageMenu ul li a::after{
      transform: rotate(-45deg);
}


.msb .pageMenu ul li img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
    width: 30%;
}
.msb .pageMenu ul li:nth-child(2) img{
    width: 25%;
    margin-bottom: 0.3em;
}


/*----------------------------------------------------------------------------
 ***                                                         kodawariSec
----------------------------------------------------------------------------*/
#kodawariSec{}
#kodawariSec h3{ font-size: 200%; margin-bottom: 1em;}
#kodawariSec .kodawariCont {
    background: #FFF;
    padding: 3em;
    margin: 3em 0;
    border: 1px solid #1a1a1a;
}
#kodawariSec .sectionInner > p strong{ font-size: 175%;}
#kodawariSec .sectionInner > p strong span{ font-size: 115%;}
#kodawariSec .kodawariCont .txtArea{ max-width: 590px; }
#kodawariSec .kodawariCont h4::before{
    content: '';
    width: 42px;
    height: 82px;
    background: url(../images/kousha/img_kodawari_icon01.jpg) no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
}
#kodawariSec .kodawariCont:nth-of-type(2) h4::before { background: url(../images/kousha/img_kodawari_icon02.jpg) no-repeat center center/cover;}
#kodawariSec .kodawariCont:nth-of-type(3) h4::before { background: url(../images/kousha/img_kodawari_icon03.jpg) no-repeat center center/cover;}
#kodawariSec .kodawariCont h4{ margin-bottom: 0.5em; position: relative; padding-left: 52px; font-size: 200%; line-height: 1.2em; border-bottom:2px solid #CCC; padding-bottom: 0.5em;}
#kodawariSec .kodawariCont strong{ display: inline-block; position: relative; padding: 0.2em 0.5em;}
#kodawariSec .kodawariCont strong::before,
#kodawariSec .kodawariCont strong::after {
    content: '';
    width: 15px;
    height: 22px;
    position: absolute;
}
#kodawariSec .kodawariCont strong::before {
    border-left: solid 4px #9C2963;
    border-top: solid 4px #9C2963;
    top: 0;
    left: 0;
}
#kodawariSec .kodawariCont strong::after {
    border-right: solid 4px #9C2963;
    border-bottom: solid 4px #9C2963;
    bottom: 0;
    right: 0;
}
#kodawariSec .kodawariCont h4 > span{ font-size: 60%;}
#kodawariSec .kodawariContOther {
    background: #9393931A;
    padding: 3em;
    margin: 3em 0;
}
#kodawariSec .kodawariContOther .txtArea{ max-width: 590px; }
#kodawariSec .kodawariContOther h4{ margin-bottom: 0.8em; font-size: 200%; line-height: 1.2em; border-bottom:2px solid #b3b3b3; padding-bottom: 0.5em;}
#kodawariSec .kodawariContOther p strong{ font-size: 137.5%;}
#kodawariSec .kodawariContOther .pointBox{ width: 100%;}
#kodawariSec .kodawariContOther .pointBox dl{ background: #FFF; width: 49%; position: relative; padding: 2em; margin: 4em 0 0;}
#kodawariSec .kodawariContOther .pointBox dl dt{ margin-bottom: 0.8em;}
#kodawariSec .kodawariContOther .pointBox dl dt strong{ font-size: 150%; line-height: 1.5em;}
#kodawariSec .kodawariContOther .pointBox dl dt .point {
    position: absolute;
    top: -2em;
    left: 2em;
}

/* 1200px以下*/
@media screen and (max-width:1200px) {
    #kodawariSec .kodawariCont .txtArea {width: 50%;}
    #kodawariSec .kodawariContOther .txtArea {width: 50%;}
}

/* 990px以下*/
@media screen and (max-width:990px) {
    #kodawariSec .kodawariCont{ display: block;}
    #kodawariSec .kodawariCont .txtArea {width: 100%;}
    #kodawariSec .kodawariContOther{ display: block;}
    #kodawariSec .kodawariContOther .txtArea {width: 100%;}
}

/*----------------------------------------------------------------------------
 ***                                                         planSec
----------------------------------------------------------------------------*/
#planSec{}
#planSec .bg_plan {
    background: #FFF;
    max-width: 1100px;
    padding: 3em;
    margin: 3em auto 0;
}
#planSec h3{ font-size: 200%;}
#planSec h4 { font-size: 156.25%; margin-bottom: 2em;}
#planSec .bnrBox{ margin-top: 2em;}
#planSec .planDetailCon{ margin: 3em 0 0;}
#planSec .planDetailBox{ max-width: 900px; margin: 0 auto;}
#planSec .planTable dl{ border-bottom:1px dashed #CCC; padding-bottom: 0.5em; margin-bottom: 0.5em;}
#planSec .planTable dt{ background: #8a2963; color: #FFF; width: 7.5em; padding: 0.3em 0; margin-right: 0.8em;}
#planSec .planTable dd{ font-size: 112.5%; line-height: 1.8em; }
#planSec .planTable dd span{ font-size: 80%;}
#planSec .samplePlan{ width: 60%; margin-left: 1.5em;}
#planSec .samplePlan .pair{ margin: 0 0 1em;}
#planSec .samplePlan .sampleTxt{ font-size: 112.5%; margin-bottom: 2em; display: block;}
#planSec .samplePlan .sampleTxt span { background: #595959; color: #FFF; font-size: 87.5%; padding: 0.3em 0.8em; margin-right: 0.5em;}
#planSec .samplePlan .pair_ttl{border-left: 10px solid #9c2963;border-bottom: 1px solid #9c2963;font-size: 137.5%;padding-left:0.5em; padding-bottom:0.5em; font-weight: bold;}
#planSec .samplePlan .pair_ttl .sub_txt{font-weight: normal;font-size: 80%;}
#planSec .samplePlan .pick_price p{font-size: 105%; text-align: right; margin-top: 0.5em;}
#planSec .samplePlan .pick_price p .redtxt{font-size: 200%;color: #c1272d;font-weight: bold;padding-left: 0.2em; padding-left: 1em;}
#planSec .samplePlan .pick_price p .font_M{font-size: 80%;color:#c1272d; }
#planSec .samplePlan .pick_price p .intax{text-align: end;font-size: 85%; margin-left: 0.5em;}

#planSec .priceTable table{ width: 100%;}
#planSec .priceTable { margin: 2em 0;}
#planSec .priceTable th{width:14%; color: #fff; font-size: 112.5%;}
#planSec .priceTable .time td:nth-of-type(1){ background: #8a2963; font-weight: bold;}
#planSec .priceTable tr:nth-child(1) th{background: #fff;}
#planSec .priceTable tr:nth-child(3) th,
#planSec .priceTable tr:nth-child(4) th{background: #85dfdb;}
#planSec .priceTable tr:nth-child(5) th,
#planSec .priceTable tr:nth-child(6) th,
#planSec .priceTable tr:nth-child(7) th{background: #3dc9c2;}
#planSec .priceTable tr:nth-child(8) th,
#planSec .priceTable tr:nth-child(9) th,
#planSec .priceTable tr:nth-child(10) th{background: #00958e;}

#planSec .priceTable td{text-align: center;padding: 0.5em 0;font-size: 130%;line-height: 1.3;}
#planSec .priceTable td:nth-of-type(1),
#planSec .priceTable td:nth-of-type(2){ width: 25%;}
#planSec .priceTable td:nth-of-type(3),
#planSec .priceTable td:nth-of-type(4){ width: 18%;}

#planSec .priceTable td .en{font-size: 90%;}
#planSec .priceTable td .intax{display: block;font-size: 65%;}
#planSec .priceTable .time td{color: #fff;background: #666;font-size: 112.5%;padding: 0.3em 1.5em;}
#planSec .priceTable .month td{color: #fff;background: #979797;font-size: 16px;padding: 0.3em 1.5em;}
#planSec .priceTable tr:hover{ background: #9c29630f;}
#planSec .noteTxt{ font-size: 87.5%; margin: 0;}

#optionBox{ margin: 2em 0;}
#optionBox .boxInner{ background: #edf9f8; position: relative; padding: 2em 2em 3em; border-radius: 15px;}
#optionBox h5{ font-size: 187.5%; margin-bottom: 1em;}
#optionBox h5::before{
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url(../images/kousha/img_option02.png) no-repeat center center/cover;
    margin-right: 0.4em;
    margin-bottom: -0.1em;
}
#optionBox .boxInner > p{ margin: 1em 0 2em;}
/* #optionBox .boxInner::before{
    content: '';
    background: url(../images/top/img_option02.png) no-repeat center center/cover;
    width: 44px;
    height: 44px;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
} */

#optionBox .flexBox{ position: relative;}
#optionBox .flexBox::before{
    content: '';
    width: 1px;
    height: 100%;
    border-right: dashed 3px #FFF ;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#optionBox dl{ width: 47%;}
#optionBox dt{ position: relative; font-size: 137.5%; margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom:2px solid #bababa;}
#optionBox dt span { font-size: 90.909%; font-weight: normal;}
#optionBox dt span.font-14{ font-size: 63.65%; font-weight: normal; display: block; line-height: 1em;}
#optionBox dt::before{
    content: '';
    display: inline-block ;
    background: url(../images/kousha/img_option01.png) no-repeat center center/cover;
    width: 44px;
    height: 44px;
    margin-right: 0.5em;
}
#optionBox #nbkoption dt::before {
    content: '';
    display: inline-block;
    background: url(../images/top/logo_square_nbk.jpg) no-repeat center center/cover;
    width: 44px;
    height: 44px;
    margin-right: 0.5em;
}
#optionBox dd.txtBox{ font-size: 87.5%; margin-bottom: 1.8em; position: relative;}
#optionBox .usagi{ position: absolute;top: -55px;right: -100px;}
#optionBox #nbkoption dd.txtBox{width: 83%;}
#optionBox #ittomoshi .moshiFree {
    background: #00aca4;
    color: #FFF;
    padding: 0.1em 0.3em;
    position: absolute;
    bottom: 0.7em;
    right: 0;
    line-height: 1.5em;
    font-size: 82%;
}

#costBox .costCon{border-radius: 1.5em;padding: 2em 2%; z-index: 1;}
#costBox .costCon::before{border-radius: 1.5em;}
#costBox .costCon{margin-top: 0em;}
#costBox .costCon dl{background: #fff;border-radius: 1em;padding: 1em 4%;}
#costBox .costCon dl.month{padding: 1em 2%;}
#costBox .costCon dl dt{text-align: center;font-size:170%; }
#costBox .costCon .ExpBox{margin:1em 1em 0;}
#costBox .costCon .ExpBox dl dt span{position: relative;display: inline-block;padding-left: 10px;}
#costBox .costCon .ExpBox dl.Adm dt span{padding-left: 25px;}
#costBox .costCon .ExpBox dl.Adm dt span::before{
	content: "";
	background: url("../images/plan/icon_03.png")no-repeat;
	width: 40px;
	height: 39px;
	display: block;
	position: absolute;
	top: 3px;
	left: -20px;
	background-size: cover;}
#costBox .costCon .ExpBox dl.month dt{width: 100%;}
#costBox .costCon .ExpBox dl.month dt span::before{
	content: "";
	background: url("../images/plan/icon_04.png")no-repeat;
	width: 45px;
	height: 43px;
	display: block;
	position: absolute;
	top: 0;
	left: -45px;
	background-size: cover;}
#costBox .costCon .ExpBox dl dd {text-align: center;font-size:200%;color: #c1272d; font-weight: bold;line-height: 1.4;margin: 10px 5px;}
#costBox .costCon .ExpBox dl dd div{ color: #C1272D; line-height: 1em;}
#costBox .costCon .ExpBox dl dd span{font-size: 45%;color: #c1272d;font-weight: normal;}
#costBox .costCon .ExpBox dl dd span.intax{display: block;}
#costBox .costCon .ExpBox dl dd span.school{color: #232323;padding-right: 0.3em;padding-bottom: 1.5em;}
#costBox .costCon .ExpBox dl.month dd{width: calc(90%/3);}

#costBox .discountSec{margin-top: 2em;}
#costBox .discountSec .discBox{margin:1em 1em 0;}
#costBox .discountSec .discBox dl{margin: 0 1em; width: 50%;}
#costBox .discountSec .discBox dl dt{font-size: 150%;line-height: 1.4;height: 55px;}
#costBox .discountSec .discBox dl.bro dt span{display: block;font-size: 60%;font-weight: normal;}
#costBox .discountSec .discBox dd{font-size: 150%;color: #c1272d;font-weight: bold;line-height: 1.3;margin-top: 5px;text-align: center;}
#costBox .discountSec .discBox dd span{font-weight: normal;font-size: 70%;color: #c1272d;}

#otameshiBox{}
#otameshiBox{ padding: 2.5em 0 0;}
#otameshiBox .boxInner{ background: #F6FAFD; }
#otameshiBox h4{ background: url(../images/top/img_otameshi01.jpg) no-repeat; background-size: cover; padding:1.3em 0 1em 5.5em;}
#otameshiBox h4 span{ position: relative;}
#otameshiBox h4 span img:first-child{ margin-right: 0.4em;}
#otameshiBox h4 span:after{
    content: "";
    width: 87px;
    height: 87px;
    background: url(../images/top/img_otameshi_txt_f.png) no-repeat;
    background-size: contain;
    position: absolute;
    left:-100px;
    top:-60px;

}
#otameshiBox .boxInner > div{ padding:1.5em 3em ;}
#otameshiBox ul{ margin: 0 0 1.5em;}
#otameshiBox li{ color: #4980AD; font-size:125%; margin-bottom: 0.5em; text-indent: -1.7em; padding-left: 1.7em;}
#otameshiBox li span{ color: #FF1759;}
#otameshiBox li::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background: url(../images/top/img_otameshi02.png) no-repeat;
    background-size: 100%;
    margin-right: 0.5em;
    vertical-align: middle;
}
#otameshiBox .shosaiBtn{ background: #4980AD; width: 24em; margin: 1.5em auto 1em;}

@media screen and (max-width:1070px) {
    #costBox .costCon{padding: 2em 1em;}
	#costBox .costCon dl{margin: 0.5em 0;padding: 1em 1.5em;}
}

/* 910px以下*/
@media screen and (max-width:910px) {
    #optionBox .flexBox{ display: block;}
    #optionBox dl:nth-of-type(1){ margin: 7% 0 15%;}
    #optionBox dl{ width: 100%;  margin: 7% 0;}
    #optionBox dd.txtBox{ font-size: 100%;}
    #optionBox .flexBox::before{
        border-right: none;
        border-bottom: dashed 3px #FFF;
        position: absolute;
        top: 51%;
        left: 0;
        transform: translateY(-51%);
        -webkit-transform: translateY(-51%);
        -ms-transform: translateY(-51%);
        width: 100%;
        height: 1px;
    }
    #otameshiBox h4{ padding:1.3em 1em 1em; padding-left: 0;}
    #otameshiBox h4 span{ padding-left: 0;}
    #otameshiBox .shosaiBtn{ width: 100%;}
    #otameshiBox .shosaiBtn br{ display: block;}    
}

/* 800px以下*/
@media screen and (max-width:800px) {
    #planSec .planDetailBox{ display: block;}
    #planSec .samplePlan{ width: 100%; margin:5% 0;}
}


/*----------------------------------------------------------------------------
***                                                           入塾の流れ
----------------------------------------------------------------------------*/
#flowSec{ }

#flowSec .flowBox{ max-width: 800px; margin:0 auto;}
#flowSec .sectionInner{ padding:2em 0 3em;}
#flowSec .flowBox > li{ border-top:2px solid #f2f2f2; padding:1em; position: relative;}
#flowSec .flowBox > li > p{margin:0;}
#flowSec .flowBox > li dl{  width: calc( 100% - 170px); }
#flowSec .flowBox > li:first-child dl{ width: calc( 100% - 385px);}
/* #flowSec .flowBox > li:first-child dl{ width: 100%;} */
#flowSec .flowBox > li:first-child dt{ width: 100%;}
#flowSec .flowBox > li:first-child dd:first-of-type{ width: 100%;}

#flowSec .flowBox > li::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
}
#flowSec .flowBox > li:nth-child(1)::before{ background: url(../images/top/icon_flow01.jpg) no-repeat; background-size: contain; }
#flowSec .flowBox > li:nth-child(2)::before{ background: url(../images/top/icon_flow02.jpg) no-repeat; background-size: contain; }
#flowSec .flowBox > li:nth-child(3)::before{ background: url(../images/top/icon_flow03.jpg) no-repeat; background-size: contain; }
#flowSec .flowBox > li:nth-child(4)::before{ background: url(../images/top/icon_flow04.jpg) no-repeat; background-size: contain; }
#flowSec .flowBox > li:nth-child(5)::before{ background: url(../images/top/icon_flow05.jpg) no-repeat; background-size: contain; }
#flowSec .flowBox > li dt,
#flowSec .flowBox > li dd{ margin-left: 75px;}
#flowSec .flowBox > li dt{ font-size: 137.5%; margin-bottom: 0.2em;}
#flowSec .flowBox > li div{ font-size: 75%;}

#flowSec .flowBox > li dd{ font-size: 75%;}
#flowSec li:first-child div.flowconfirmBtnBox{ max-width: 366px; font-size: 100%; margin:0 ;}
#flowSec li:first-child div.flowconfirmBtnBox li{ margin: 0.3em; text-align: center; z-index: 0;}
.msb #flowSec li:first-child div.flowconfirmBtnBox li{width: 45%;}
.msb #flowSec li:first-child div.flowconfirmBtnBox .telBtn{width: 100%;}
#flowSec li:first-child div.flowconfirmBtnBox a{ text-decoration: none;}
#flowSec li:first-child div.flowconfirmBtnBox .telBtn{ width: 100%; }
#flowSec li:first-child div.flowconfirmBtnBox .telBtn a{ display: inline-block;}
#flowSec li:first-child div.flowconfirmBtnBox .telBtn strong{ color: #333; font-size: 187.5%;}
#flowSec li:first-child div.flowconfirmBtnBox .telBtn strong::before {
	content: '';
	display: inline-block;
	background: url(../images/top/icon_tel.jpg) no-repeat;
	background-size: contain;
	width: 16px;
	height: 24px;
	vertical-align: middle;
	margin-right:0.2em;

}
#flowSec li:first-child div.flowconfirmBtnBox .telBtn span {
    color: #333;
    font-size: 75%;
    display: block;
    margin-left: 0.1em;
    line-height: 1em;
    /*text-align: right;*/
}
#flowSec li:first-child div.flowconfirmBtnBox .requestBtn{ }
#flowSec li:first-child div.flowconfirmBtnBox .requestBtn a {
    min-width: 11em;
	display: block;
	width: auto;
	background: #f7931e;
	border-radius: 100vh;
	padding: 0.4em 0.8em;
	color: #FFF;
	font-weight: 700;
	font-size: 93.75%;
    border-bottom: solid 3px #CCC;
}
#flowSec li:first-child div.flowconfirmBtnBox .trialBtn a {
	display: block;
	width: auto;
	background: #ff1759;
	border-radius: 100vh;
	padding: 0.4em 3.8em;
	color: #FFF;
	font-weight: 700;
	font-size: 93.75%;
    border-bottom: solid 3px #CCC;
}
.msb #flowSec li:first-child div.flowconfirmBtnBox .requestBtn a {
    min-width: 0;
	display: block;
	width: auto;
	background: #f7931e;
	border-radius: 100vh;
	padding: 0.4em 0.8em;
	color: #FFF;
	font-weight: 700;
	font-size: 140%;
    border-bottom: solid 3px #CCC;
}
.msb #flowSec li:first-child div.flowconfirmBtnBox .trialBtn a {
	display: block;
	width: auto;
	background: #ff1759;
	border-radius: 100vh;
	padding: 0.4em 0.8em;
	color: #FFF;
	font-weight: 700;
	font-size: 140%;
    border-bottom: solid 3px #CCC;
}

/* 750px以下*/
@media screen and (max-width:750px) {
    #flowSec .flowBox > li:first-child{ display: block;}
    #flowSec .flowBox > li:first-child dl{ width:100%;}
    #flowSec .flowBox > li:first-child dt{ width: calc(100% - 50px);}
    #flowSec .flowBox > li:first-child dd:first-of-type{ width: calc(100% - 50px);}
    #flowSec li:first-child div.flowconfirmBtnBox{ margin:1em auto; margin-left: 75px;}

}
#flowSec .sectionInner{ padding:12% 0; }
#flowSec .flowBox > li{ padding: 1em 0; }
#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;}

/* PC*/
@media screen and (min-width:600px) {
	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;
	}
}




/* PC版にハンバーガーが有る場合*/

header nav.naviBox > ul{ width:100%; margin:0 auto; padding:2em; display:block;}
header nav.naviBox > ul > li{ max-width:400px; text-align:center; margin:2em auto; padding:0; font-size:150%; color:#999;}
header nav.naviBox > ul > li:not(:last-child){ border:none;}
header nav.naviBox > ul > li a{ color:#fff; padding:0.5em; width:100%; text-decoration:none; -webkit-transition:color .4s; -o-transition:color .4s; transition:color .4s; position:relative;}
header nav.naviBox > ul > li.formBtn a{ background:none; padding:0.5em; font-size:100%;}
header nav.naviBox > ul > li.formBtn a:after{ content:normal;}
header nav.naviBox > ul > li.schools{ margin: 2em 0 1em; }
header nav.naviBox > ul > li.schoolsList{ margin: 0; text-align:left; width:470px; margin:0 auto;}
header nav.naviBox > ul > li.schoolsList a{ padding-left: 1.5em;}
header nav.naviBox > ul > li.schoolsList a::before{
	content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		width: 1em;
		height: 2px;
		background-color: #FFF;
}
header nav.naviBox > ul > li.schoolsList span{  font-size: 80%; color: #FFF; margin-left: 0.5em;}

header nav.naviBox .snsLi{ position: relative; margin:1em auto 0 ;}
header nav.naviBox .snsLi:last-child:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -2em;
	margin: auto;
	width: 2.5em;
	height: 2px;
	background-color: #FFF;
}
header nav.naviBox .snsLi img{ margin-right: 0.8em;}
header nav.naviBox .snsLi:first-of-type{ border-top: 1px dashed #FFF; padding-top: 1em;}
header nav.naviBox .telLi{ font-size:133.333%;}
header nav.naviBox .telLi dl{ background-color:#fff; border-radius:10px; padding:1em; margin:1em auto;}
header nav.naviBox .telLi dt{ font-weight:500;}
header nav.naviBox .telLi dd a{ color:#00a199; font-size:135%; font-weight:500; padding:0.2em 0 0.6em;}
header nav.naviBox .telLi dd ul{ padding:0.5em 0;}
header nav.naviBox .telLi dd li{ font-size:87.5%; border:none; color:#333;}
header nav.naviBox .telLi dd li span{ width:6em;}
header nav.naviBox .telLi dd:last-of-type{ border-top:1px solid #b5b5b5;}