@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;
}

.fs-31{font-size:1.9375rem;}
.fs-33{font-size:2.0625rem;}
.fs-35{font-size:2.1875rem;}
.fs-43{font-size:2.6875rem;}
.fs-61{font-size:3.8125rem;}
.fs-63{font-size:3.9375rem;}
/*----------------------------------------------------------------------------
***                                                           ファストビュー
----------------------------------------------------------------------------*/




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

}

/* 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}
}
/*----------------------------------------------------------------------------
 ***                                                         FVSec
----------------------------------------------------------------------------*/
#FVSec{}
#FVSec .sectionInner{
    width: 100%;
    padding: 0% 0 0%;
    margin: 0% auto;
}
#FVSec .sectionInner .fvBox{
    border-bottom: 5px solid #129a92;
}
#FVSec .sectionInner .fvBox img{}
/*----------------------------------------------------------------------------
 ***                                                         openSchoolSec
----------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
    #openSchoolSec{}
    #openSchoolSec .sectionInner{}
    #openSchoolSec .sectionInner .titleBox{}
    #openSchoolSec .sectionInner .titleBox::after{}
    #openSchoolSec .sectionInner .titleBox h2{}
    #openSchoolSec .sectionInner .titleBox .logo{}
    #openSchoolSec .sectionInner .titleBox h2 .opentitl02{
    font-size: 40px;
} 
    #openSchoolSec .sectionInner .titleBox h2 .opentitl01 {
    font-size: 40px;
}
    #openSchoolSec .sectionInner .titleBox h2 span{
    font-size: 34px;
}
    #openSchoolSec .sectionInner .titleBox h2 .titl01{}
    #openSchoolSec .sectionInner .titleBox h2 .titl02{
    font-size: 38%;
}
   #openSchoolSec .sectionInner .titleBox h2 .titl03{}
    #openSchoolSec .sectionInner .titleBox h2 .titl04{}
    
    #openSchoolSec .sectionInner .openSchoolBox{
        width: 95%;
        padding: 10px 2.5%;
        margin: auto;
    }
   #openSchoolSec .sectionInner .openSchoolBox ul{gap: 0 4%;}

    #openSchoolSec .sectionInner .openSchoolBox ul li{
        font-size: 1.4em;
        gap: 2.5%;
        width: 48%;
    }
    #openSchoolSec .sectionInner .openSchoolBox ul li.schoolN-res{width:100%;gap: 1.2%}
    #openSchoolSec .sectionInner .openSchoolBox ul li span{}
    #openSchoolSec .sectionInner .menubar{}
    #openSchoolSec .sectionInner .menubar p{}
    #openSchoolSec .sectionInner .menubar p:first-child{}
    #openSchoolSec .sectionInner .menubar p a{}
    #openSchoolSec .sectionInner .menubar p a::after{}
    #openSchoolSec .sectionInner .menubar .menuBtn01{}
    #openSchoolSec .sectionInner .menubar .menuBtn02{}
    #openSchoolSec .sectionInner .menubar .menuBtn03{}
}
/*----------------------------------------------------------------------------
 ***                                                         openCPNSec
----------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
    #openCPNSec{}
    #openCPNSec .sectionInner{}
    #openCPNSec .sectionInner .openCPNBox{}
    #openCPNSec .sectionInner .openCPNBox .openCPNh2{}
    #openCPNSec .sectionInner .openCPNBox .novelbox{}
    #openCPNSec .sectionInner .openCPNBox .Memberbox .novtxt01,
    #openCPNSec .sectionInner .openCPNBox .novelbox .novtxt01{}
    #openCPNSec .sectionInner .openCPNBox .novelabout{}
    #openCPNSec .sectionInner .openCPNBox .novelabout .imgnvl{
        width: 33%;
    }
    #openCPNSec .sectionInner .openCPNBox .novelabout .novleft{
        /* width: 78%; */
    }
    #openCPNSec .sectionInner .openCPNBox .novelabout .novleft .novtxt02{}
    #openCPNSec .sectionInner .openCPNBox .novelabout .novleft .novtxt03{}
    #openCPNSec .sectionInner .openCPNBox p .txtfree{}
    #openCPNSec .sectionInner .openCPNBox img{}
    #openCPNSec .sectionInner .openCPNBox .Memberbox .novtxt01{}
    #openCPNSec .sectionInner .openCPNBox .Memberbox .Memberabout{
        flex-wrap: wrap;
    }
    #openCPNSec .sectionInner .openCPNBox .Memberbox .Memberabout .Mleft{}
    #openCPNSec .sectionInner .openCPNBox .Memberbox .Memberabout .Mleft .fs-18{}
    #openCPNSec .sectionInner .openCPNBox .Memberbox .Memberabout .Mcenter{margin: 0 calc(50% - 30px) 0;}
    #openCPNSec .sectionInner .openCPNBox .Memberbox .Memberabout .Mright{}
    #openCPNSec .sectionInner .openCPNBox .Memberbox .Memberabout .Mtxt01{}
    #openCPNSec .sectionInner .openCPNBox .Memberbox .Memberabout .Mtxt02{}
}
/*----------------------------------------------------------------------------
 ***                                                        selectSec
----------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
    #selectSec{}
    #selectSec .sectionInner{}
    #selectSec .sectionInner .titleBox{}
    #selectSec .sectionInner .titleBox h2{}
    #selectSec .sectionInner .selectBox{}
    #selectSec .sectionInner .selectBox ul{}
    #selectSec .sectionInner .selectBox ul li{
    /* padding: 2.5%; */
    font-size: 20px;
}
    #selectSec .sectionInner .selectBox ul li::after{}
    
    
    #selectSec .sectionInner .selectBox ul li span.addressInfo{
    font-size: 12px;
    margin: 8px auto;
}
}
/*----------------------------------------------------------------------------
 ***                                                        schedulSec
----------------------------------------------------------------------------*/
.scheduleSec{}
.scheduleSec .sectionInner{}
.scheduleSec .sectionInner .schttl{}
.scheduleSec .sectionInner .schttl span{}

.scheduleSec .sectionInner .titleBox{}
.scheduleSec .sectionInner .titleBox h2{}
.scheduleSec .sectionInner .titleBox h2 p{}
.scheduleSec .sectionInner .description{}
.scheduleSec .sectionInner .schedulBox{}
.scheduleSec .sectionInner .schedulBox dl{}
.scheduleSec .sectionInner .schedulBox .sch-item{}
.scheduleSec .sectionInner .schedulBox .sch-item dt{}
.scheduleSec .sectionInner .schedulBox .sch-item dd{}

/*----------------------------------------------------------------------------
 ***                                                        SchoolSec
----------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
    .SchoolSec{}
    .SchoolSec .sectionInner{    }
    .SchoolSec .sectionInner .titleBox{}
    .SchoolSec .sectionInner .titleBox h2{}
    .SchoolSec .sectionInner .schoolInfo{}
    .SchoolSec .sectionInner .schoolInfo .info-item{}
    .SchoolSec .sectionInner .schoolInfo .info-item dl{}
    .SchoolSec .sectionInner .schoolInfo .info-item dt{}
    .SchoolSec .sectionInner .schoolInfo .info-item dd{}

    .SchoolSec .sectionInner .schoolInfo .info-item .telFD{}
    .SchoolSec .sectionInner .schoolInfo .info-item .telFD a{}
    .SchoolSec .sectionInner .schoolInfo .info-item .telFD span{}
    .SchoolSec .sectionInner .schoolInfo .info-item .telFD span a{}

    .classMessage dt{}
    .classMessage dt::before {}
    .classMessage dd{}
    .Map{}
    .Map iframe{}
    .Map dt{}
    .Map dt::before {}
    .Map dd{}
    .SchoolSec .sectionInner .schoolImg{}
    .SchoolSec .sectionInner .schoolImg .slider-container{}
    .SchoolSec .sectionInner .schoolImg .slider-container .slideType{}
    .SchoolSec .sectionInner .schoolImg .slider-container .slideType ul{}
    .SchoolSec .sectionInner .schoolImg .slider-container .slideType ul li{}
    .SchoolSec .sectionInner .schoolImg .slider-container .slideType ul li img{}
}

/*----------------------------------------------------------------------------
 ***                                                         commitmentSec
----------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
    #commitmentSec{}
    #commitmentSec .sectionInner{}
    #commitmentSec .sectionInner .titleBox{}
    
    #commitmentSec .sectionInner .titleBox h2{}
    #commitmentSec .sectionInner .titleBox .description{}
    #commitmentSec .sectionInner .commitmentInner{}
    #commitmentSec .sectionInner .commitmentInner p{}
    #commitmentSec .sectionInner .commitmentInner .commitmentBox{}
    #commitmentSec .sectionInner .commitmentInner .commitmentBox .sub-titleBox{}
    #commitmentSec .commitmentInner .commitmentBox .sub-titleBox::before{
        font-size: 21px;
        width: 36px;
        height: 36px;
        top: 15px;
        left: 10vw;
    }
    #commitmentSec .sectionInner .commitmentInner .commitmentBox .sub-titleBox h3{}
    #commitmentSec .sectionInner .commitmentInner .commitmentBox .sub-titleBox .description{}
    
    #commitmentSec .sectionInner .commitmentInner .commitmentBox .sub-titleBox .description span{}
    #commitmentSec .sectionInner .commitmentInner .commitmentInfo{}
    #commitmentSec .sectionInner .commitmentInner .commitmentInfo img{}
    #commitmentSec .sectionInner .commitmentInner .commitmentInfo p{}
    #commitmentSec .sectionInner .commitmentInner .comAbout{}
    #commitmentSec .sectionInner .commitmentInner .comAbout .comBtn{}
    #commitmentSec .sectionInner .commitmentInner .comAbout .comBtn a{}
    #commitmentSec .sectionInner .commitmentInner .comAbout .comBtn .more::before{}
    #commitmentSec .sectionInner .commitmentInner .comAbout .comBtn a::before{}
    #commitmentSec .sectionInner .commitmentInner .comAbout .comBtn a::after{}
    #commitmentSec .sectionInner .commitmentInner .comAbout .comBtn .room::after{}
}


@media screen and (max-width: 400px){
    #commitmentSec .commitmentInner .commitmentBox .sub-titleBox::before{
        left: 8px;
    }
}
/*----------------------------------------------------------------------------
 ***                                                         schoolInfoSec
----------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
        
    .schoolInfoSec .sectionInner{}
    
    .schoolInfoSec .schoolInfoBox h3{}
    .schoolInfoSec .schoolInfoBox .title{}
    .schoolInfoSec .schoolInfoBox h3{}
    .schoolInfoSec .schoolInfoBox .newOpen{}
    .schoolInfoSec .schoolInfoBox .heading{}
    
    .schoolInfoSec .schoolInfoBox .infoList .schoolabout{}
    .schoolInfoSec .schoolInfoBox .infoList .schoolabout dt{}
    .schoolInfoSec .schoolInfoBox .infoList .schoolabout dd{}
    .schoolInfoSec .schoolInfoBox .infoList .schoolabout .phoneNum{}
    .schoolInfoSec .schoolInfoBox .infoList .openTime{}
    .schoolInfoSec .schoolInfoBox .infoList .openTime table tr{}
    .schoolInfoSec .schoolInfoBox .infoList .openTime table td{}
    .schoolInfoSec .schoolInfoBox .infoList .openTime table td:first-child{}
    
    .schoolInfoSec .schoolImg{}
    .schoolInfoSec .Inside{}
    .schoolInfoSec .slick-arrow,
    #freeSpaceSec .slick-arrow{}
    
    .slick-prev,
    .slick-next{}
    .schoolInfoSec .slick-prev{}
    .schoolInfoSec .slick-next{
    right: 5px;
}

    
    .schoolInfoSec .sliderArea ,
    #freeSpaceSec .sliderArea{}
    .schoolInfoSec .slick-list,
    #freeSpaceSec .slick-list{}
    .schoolInfoSec .sliderArea .w300,
    #freeSpaceSec .sliderArea .w300{}
    .schoolInfoSec .slick-slide ,
    #freeSpaceSec .slick-slide{}
    .schoolInfoSec .slick-slide img, 
    #freeSpaceSec .slick-slide img{}
    .schoolInfoSec .slick-prev,
    #freeSpaceSec .slick-prev{}
    .schoolInfoSec .slick-prev:before,
    .schoolInfoSec .slick-next:before,
    #freeSpaceSec .slick-prev:before,
    #freeSpaceSec .slick-next:before{}
    .schoolInfoSec .slick-slide{}
    .schoolInfoSec .slick-active{}
    .schoolInfoSec .slick-current{}
    .schoolInfoSec .thumb,
    #freeSpaceSec .thumb{}
    .schoolInfoSec .thumb .slick-slide,
    #freeSpaceSec .thumb .slick-slide{}
    .schoolInfoSec .thumb .slick-slide:hover,
    #freeSpaceSec .thumb .slick-slide:hover{}
    
    .schoolInfoSec .slick-dots li button:before,
    #freeSpaceSec .slick-dots li button:before{}
    
    .schoolInfoSec .slick-dots{}
    #freeSpaceSec .slick-dots{}

}


/*スライド*/
.slick-arrow{ z-index: 2; }
    .slick-prev{ left: 10%; color: #333;} 
    .slick-next{ right: 10%; color: #333 }
#videoModal .videoClassBox  .double-slider{
    background-color: #f2f2f2;
    border-radius: 1em;
}
#videoModal .videoClassBox  .double-slider .text-slider .txt{
    font-size: 120%;
    font-weight: bold;
    text-align: center;
    padding: 1.5em 0 3em;
}
#videoModal .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 .freeBase .slick-prev, 
#freeSpaceSec .freeBase .slick-next {
    top: 0;
    border-top:2px solid #fff;
    border-right: 2px solid #fff;
}
#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 .freeBase .slick-prev{left:3%;}
#freeSpaceSec .freeBase .slick-next{right:3%;}
#freeSpaceSec .slick-dots {
    position: absolute;
    top: -7%;
    height: 0em;
}
#freeSpaceSec .freeBase .slick-dots{
    top:97%;
}
#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 .freeBase .slick-dots li button:before{
    bottom:0;
}

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

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

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




/*----------------------------------------------------------------------------
 ***                                                    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  .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  .subTitle{margin-top: 1.7em;}
#classSec .infoBox  .subTitle{
    margin: 1em 0 0.7em;
    line-height: 1.3;
}
#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 small{
    margin-top: 0.5em;
    line-height: 1.4;
    display: block;
    font-size: 95%;
}
#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;
    margin: 2em 0;
}
#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 .priceItem .month{
    /* margin: 0.6em 0.3em 0 0; */
    /* font-size: 13px; */
}
#priceSec .greadBox .freeBase .priceList  .price {line-height: 1.3;/* font-size: 10px; */}


#priceSec .greadBox .freeBase .priceList  .price .tax{
display: block;
font-size:85%;
}


#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;
    /* font-size: 0.5em; */
}
#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 .priceBox .regular,#priceSec .priceBox .freeBase,#priceSec .priceBox .coaching{
    text-align: center;
    margin: 3.5em 0;
}
#priceSec .priceBox .heading{
    font-size: 170%;
    display: inline-block;
    padding: 0.2em 1.5em;
    border-radius: 1em;
    line-height: 1;
    color: #fff;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
    width: 90%;
}
#priceSec .priceBox .coaching .plus{
    margin: 0.4em 0 1.9em;
    padding:0.5em 0;
    color: rgb(0,161,153);
    text-align:center;
}
#priceSec .priceBox .coaching .plusTxt{
    margin: 1.9em 0 1.3em;
    font-size: 110%;
    text-align:center;
    font-weight: bold;
}
#priceSec .priceBox .coaching .plusTxt span{
    margin:0 0.2em;
}
#priceSec .priceBox .coaching .orange{
    width:45%;
    padding: 0.4em 1.4em;
    background-color:#ed7f4f;
    color:#fff;
    border-radius:3em;
}
#priceSec .priceBox .coaching .sum{
    color:#00a199;
}
#priceSec .priceBox .coaching .class{
    padding:0.2em 1em;
    color:#00a199;
    background-color:rgb(0,161,153,0.15);
    border:2px solid #00a199;
    border-radius: 0.4em;
}
#priceSec .priceBox .coaching .class{
    
}
#priceSec .priceBox .coaching .heading{
    background-color:#ed7f4f;
}

#priceSec .regular .heading{
    background-color: #00a199;
}
#priceSec .freeBase{
    background-color: #edf9f8;
    padding: 1.5em 1em;
}
#priceSec .freeBase .heading{color: #eb5757;border-left: 5px solid #eb5757;border-radius: 0;padding: 0 0 0 0.4em;width: 55%;}
#priceSec .freeBase table{background-color:#fff;margin-top: 0.6em;margin-top: 1em;}
#priceSec .priceBox .heading span{
    font-size: 75%;
    color: #fff;
}
#priceSec .priceBox .freeBase .heading span{
    color: #eb5757;
}
#priceSec .priceBox .content{
    margin: 1.9em 0 1em;
}
#priceSec .priceBox .freeBase .content{
    margin: 1.4em 0 1em;
}
#priceSec .priceBox .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;
    /* font-size: 0.5em; */
}

#priceSec .priceBox .coaching .content .contentList li{
    width: 26%;
    line-height: 1.2;
    padding: 0.3em 0em;
}
#priceSec .priceBox .coaching .content .contentList .times{
    width: 3%;
    padding: 0;
}

#priceSec .priceBox .content .contentList .freeBase{
    background-color: rgb(235,87,87,0.15);
    border: 2px solid #eb5757;
    color: #eb5757;
    font-size: 95%;
}
#priceSec .priceBox .content .contentList .times{
    width:5%;
    padding:0;
}
#priceSec .priceBox .content .contentList .management{
    background-color: #f2c94c;
}
#priceSec .priceBox .content .contentList .class{
    background-color: rgb(0,161,153,0.15);
    border: 2px solid #00a199;
    color: #00a199;
}
#priceSec .priceBox .content .contentList .test{
    background-color: rgb(249,172,0,0.15);
    color: #f9ac00;
    border: 2px solid #f9ac00;
    margin: 0;
}
}

#priceSec .priceBox .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%;
}
#priceSec .priceBox .content .contentList .video{background-color: rgb(91,132,81,0.15);border: 2px solid #5b8451;color: #5b8451;}
#priceSec .priceBox .content .contentList .solopl{background-color: rgb(78,76,108,0.15);border: 2px solid #4e4c6c;color: #4e4c6c;}
#priceSec .priceBox .text{
    text-align: center;
    font-size: 100%;
    line-height: 1.4;
    margin: 0.3em 0 0;
}
#priceSec .priceBox .tableBox{
    overflow-x:scroll;
}
#priceSec .priceBox .tableBox table{width: 140%;}
#priceSec .priceBox .tableBox  .txtL{
    color: #fff;
    font-size:130%;
}
#priceSec .priceBox table{margin: 1.4em 0 0.7em;width: 100%;}
#priceSec .freeBase table{background-color:#fff;margin-top: 0.6em;margin-top: 1em;}
#priceSec .priceBox .freeBase .text{
    margin: 0 0 0.1em;
}

#priceSec .priceBox table thead .minutes th{
    font-size: 100%;
    color: #fff;
    padding: 3px;
}
#priceSec .priceBox table thead .minutes .mtm50{
    background-color: #aa6695;
}
#priceSec .priceBox table thead .minutes .mtm100{
    background-color: #8a2963;
}
#priceSec .priceBox table thead .times{
    width:25%;
}
#priceSec .priceBox table thead .times th{
    background-color:#999;
    color:#fff;
    padding: 4px;
}
#priceSec .priceBox .tableBox table thead .minutes th:first-child{
    color:#000;
    font-weight:normal;
}
#priceSec .priceBox .content .contentList .content-off{
    background-color: #e6e6e6;
}

#priceSec .priceBox  table td{width: 20%;vertical-align: middle;padding: 5px 0px;}
#priceSec .priceBox  .null{background-color:rgb(162,165,165,0.6);}
#priceSec .priceBox  .elementary{background-color:rgb(59,148,163,0.6);}
#priceSec .priceBox  .junior{background-color:rgb(59,124,146,0.6);}
#priceSec .priceBox  .hight{background-color:rgb(70,87,144,0.6);}
#priceSec .priceBox  .elementary,#priceSec .priceBox  .junior,#priceSec .priceBox  .hight{font-weight:bold;text-align:center;font-size: 120%;}
#priceSec .priceBox td{text-align:center;font-size: 130%;font-weight:bold;line-height:1.2;padding}
#priceSec .priceBox  table td:first-child{font-weight:normal;font-size: 100%;}
#priceSec .priceBox .tableBox  table td:first-child{width:10%;}
#priceSec .priceBox  .txtL{font-weight:bold;text-align:center;font-size: 99%;color: #00a199;}
#priceSec .priceBox .yen{font-size: 70%;line-height:1;}
#priceSec .priceBox .tax{font-size: 70%;line-height:1;font-weight:normal;display: block;}
#priceSec .priceBox .dispB{font-size: 100%;}
#priceSec .priceBox .attention{color: #252525;text-align: left;font-size: 90%;margin: 0.3em auto 0;margin-top: 0.3em;line-height: 1.2;padding:0;}
#priceSec .priceBox .attention::before{
    content:"◎";
    font-size: 1em;
    vertical-align: top;
}
#priceSec .priceBox .content .contentList .test span{
    margin:0;
    padding:0;
    margin-bottom:0.2em;
    color: #f9ac00;
}

 .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: center;
}
#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%;
}
#sns .snsList .line{
    margin-top: 3.5em;
}
#sns .snsList .line a{
    color: #06c755;
}
#sns .snsList .line img{
   margin-right: 0.5em;
    width: 12%;
}

/*----------------------------------------------------------------------------
 ***                                                         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 0em;}
.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: 185%;
    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: 1;
    box-shadow: 0 0 8px gray;
    border-radius: 0.3em;
}


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


.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;
}

.msb .confirmBtnBox .contentLeft,
.msb .confirmBtnBox .contentRight{
    top: 3em;
}
.msb .confirmBtnBox .contentLeft{
    left: 2.1em;
}
.msb .confirmBtnBox .contentRight{
    right: 2.1em;
}
/*----------------------------------------------------------------------------
 ***                                                         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
----------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
#planSec{}
#planSec h2{}
#planSec .sectionInner{}
#planSec .sectionInner .SoloBox{}
#planSec .RoonBox h3,
#planSec .sectionInner .SoloBox h3{}
#planSec .sectionInner .SoloBox 
#planSec .sectionInner{}
#planSec .sectionInner{}
#planSec p.floatR{}
#planSec dl{}
#planSec dt{}
#planSec .priceMember{
    font-size: 80%;
}
#planSec .pricePrice{
    font-size: 120%;
}
#planSec .pricePrice span{
    font-size: 9px;
}
#planSec dd{}
#planSec dd.floatL{}
#planSec #standard{}
#planSec #free {}
#planSec #free .spacing{}
#planSec .priceTtlBox{}
#planSec .priceTtlBox h4 {}
#planSec .priceTtlBox h4 span{}
#planSec .priceTtlBox .priceTime{}
#planSec .priceTtlBox .priceTime *{}
#planSec .priceTtlBox .priceTime dt{}
#planSec .priceTtlBox .priceTime dd::before{}

#planSec .priceTtlBox .priceTime dd:nth-of-type(1)::before{}
#planSec .priceTtlBox .priceDetail {}
#planSec .priceTtlBox .priceDetail dt{}
#planSec .priceTtlBox .priceDetail dd{}
#planSec .priceTtlBox .priceDetail dl:last-child{}
#planSec #frPlan h4 span{}
#planSec #frPlan .priceDetail dt{}
#planSec #frPlan .priceDetail dd{}

#planSec .RoonBox{}
#planSec .RoonBox .regularBox{margin-bottom: 2.5em;}
#planSec .RoonBox .premiumBox{margin-bottom: 2.5em;}
#planSec .RoonBox .content{flex-wrap:wrap;gap: 10px 2%;justify-content: center;margin: 1em 0 1em;}
#Room h4{}
#Room h4::before{}

#planSec .RoonBox .regularBox h4 span,
#planSec .RoonBox .regularBox h4{}
#planSec .RoonBox .premiumBox h4 span,
#planSec .RoonBox .premiumBox h4{}
#planSec .RoonBox .lightBox h4 span,
#planSec .RoonBox .lightBox h4{}

#planSec .RoonBox .regularBox h4 span{}
#planSec .RoonBox p{}
#planSec .RoonBox .pre-txt{}
#planSec .RoonBox .content{}
#planSec .RoonBox .content{}
#planSec .RoonBox .content li{}
#planSec .RoonBox .freeBase .content .contentList{}

#planSec .RoonBox .freeBase .content{}
#planSec .schoolList a::after{}

#planSec .greadBox  .priceList .content li{}
#planSec .greadBox  .priceList .content .freeBase{}
#planSec .greadBox  .priceList .content .management{}
#planSec .greadBox  .priceList .content .class{}
#planSec .greadBox  .priceList .content .video{}
#planSec .RoonBox .content{}
#planSec .RoonBox .freeBase .content{}
#planSec .RoonBox .content div{}
#planSec .RoonBoxg .content .times{}

    
#planSec .RoonBox .content .card{
    width: 48%;
}
#planSec .RoonBox .content .freeBase{}
#planSec .RoonBox .content .times{
    display: none;
}
#planSec .RoonBox .content .management{}
#planSec .RoonBox .content .class{}
#planSec .RoonBox .content .test{}
#planSec .RoonBox .content .special{}

#planSec .RoonBox .content .reservedBase{}

#planSec .RoonBox .content .reservedBase .title .res01{}





#planSec .RoonBox .content .reservedBase .title .res02{}

#planSec .RoonBox .content .video{}
#planSec .RoonBox .content .solopl{}
#planSec .RoonBox .content .content-off{}
#planSec .content .test span{}
#planSec .content p{}
#planSec .content .title{}
#planSec .content .title span{}
#planSec .content .badge{
    width: 80%;
    margin: 4px auto;
}
#planSec .content .badge02{
    width: 80%;
    margin: auto;
}
#planSec .content .badge02 span{}

#planSec .content .video .title{}
#planSec .content .test .title{}
#planSec .content .solopl .title{}

#planSec .content .tub{}
#planSec .content .drink{}
#planSec .content .drink02{}

#planSec .lightBox{}

#planSec .lightBox .lightFixedBox{
    margin-top: 0em;
}
#planSec .lightBox .FixedBox{
    width: 100%;
}
#planSec .lightBox .FixedBox .MonthlyFe{}
#planSec .lightBox .FixedBox .MonthlyFe .title{}
#planSec .lightBox .FixedBox .MonthlyFe .title span{}
#planSec .lightBox .FixedBox .MonthlyFe .about .Monttl{
    width: auto;
    margin: auto;
    padding: .35em 2em;
    line-height: 1;
}
#planSec .lightBox .FixedBox .MonthlyFe .about{
    flex-wrap: wrap;
    margin-top: 10px;
}
#planSec .lightBox .FixedBox .MonthlyFe .about .Monpraice{
    width: 100%;
    /* display: block; */
    padding: 0;
    text-align: center;
}
#planSec .lightBox .FixedBox .MonthlyFe .about .Monpraice span{}
#planSec .RoonBox .lightBox .content div {}
#planSec .RoonBox .lightBox .content{
    flex-wrap: wrap;
    flex: 1;
    display: flex;
    gap: 10px 2%;
    width: 95%;
    margin: 1em auto;
}
#planSec .RoonBox .lightBox .content .card {
    width: 48%;
}
#planSec .RoonBox .lightBox .content .times{
    width: 100%;
}

}



/* =================================
   モーダル
================================= */

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal.is-open {
    display: block;
}

/* 背景 */
.modalOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
}

/* ポップアップ本体 */
.modalContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: #fff;
    overflow-y: auto;
    padding: 40px 30px 30px;
    box-sizing: border-box;
}

/* ×ボタン */
.modalClose {
    position: absolute;
    top: 10px;
    right: 15px;

    width: 35px;
    height: 35px;

    border: 0;
    background: none;

    font-size: 32px;
    line-height: 1;
    font-weight: 300;

    cursor: pointer;
    z-index: 10;
}




#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;
    width: 50px;
    height: 50px;
}
#flowSec .flowBox > li:nth-child(1)::before{}
#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{}

/* 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;
	}
}







/* 407px以下*/
@media screen and (max-width:470px){
    #priceSec .greadBox .freeBase .priceList .price .vat {
    font-size: 9px;
    font-weight: normal;
}
#priceSec .greadBox .freeBase .priceList .priceItem .month p {
    font-size: 9px;
}
.expbox .expFlex .exppl .exptxt .expvat {
    font-size: 8px;
}
.expbox .expttl .expheading {
    padding: 0.2em 0;
}
#priceSec .greadBox .freeBase .priceList .vatFlex {
    width: 50%;
}
#priceSec .greadBox .freeBase .priceList{
    padding: 0.5em 0.4em 0.4em;
    border: 1px solid #ccc;
}
#priceSec .greadBox .freeBase .priceList .priceItem{width: 53%;font-weight: bold;}
#priceSec .greadBox .freeBase .priceList .content{
   width: 47%;
}
#priceSec .greadBox .freeBase .priceList  .price .num{
    font-size: 130%;
}




    #priceSec .greadBox .regular .priceList .price .vat {
    font-size: 9px;
    font-weight: normal;
}
#priceSec .greadBox .regular .priceList .priceItem .month p {
    font-size: 9px;
}

#priceSec .greadBox .regular .priceList .vatFlex {
    width: 50%;
}
#priceSec .greadBox .regular .priceList{
    padding: 0.5em 0.4em 0.4em;
    border: 1px solid #ccc;
}
#priceSec .greadBox .regular .priceList .priceItem{/* width: 53%; *//* font-weight: bold; */}
#priceSec .greadBox .regular .priceList .content{
   width: 47%;
}
#priceSec .greadBox .regular .priceList  .price .num{
    font-size: 130%;
}


    
    
}


/*----------------------------------------------------------------------------
***                                                        固定お問い合わせCTA
----------------------------------------------------------------------------*/

#fixedContact {
    display: none;
}

@media screen and (max-width: 765px) {

    #fixedContact {
        display: flex;
        position: fixed;
        z-index: 9999;
        left: 0;
        bottom: -70px;
        width: 100%;
        height: 44px;
        padding: 5px;
        box-sizing: border-box;
        background: #fff;
        gap: 4px;
        transition: bottom 0.3s ease;
    }

    #fixedContact.is-show {
        bottom: 0;
    }

    #fixedContact a {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        border-radius: 5px;
    }

    /* 無料体験 */
    #fixedContact .fixedContact__trial {
        flex: 1;
        background: #d71955;
        font-size: 19px;
    }

    /* 資料請求 */
    #fixedContact .fixedContact__request {
        flex: 1;
        background: #e89324;
        font-size: 19px;
    }

    /* 電話 */
    #fixedContact .fixedContact__tel {
        width: 55px;
        background: #00a199;
        font-size: 24px;
    }
      #fixedContact .fixedContact__tel img{
    width: 40%;
    height: auto;
}
     header .headerInner h1 img {
        width: 150px;
        height: auto;
    }
    

}


@media screen and (max-width: 765px) {

    /* FV通過後のヘッダー */
    header.header--compact {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9998;
    }



    header.header--compact .headerInner {
        padding-right: 36px;
    }

    header.header--compact .headerInner h1 {
        width: 32%;
    }

    header.header--compact .headerInner h1 img {
        width: 145px;
        height: auto;
    }

    body.fixedContact-active {
        padding-bottom: 65px;
    }

 /* FV通過後：ヘッダーを少しだけ小さく */
    header.header--compact .headerInner {
        min-height: 40px;
    }
 header.header--compact h1 {
    line-height: 1.1em;
}

header.header--compact .logoSubTxt {
    margin: 0.6em 0 -1.3em;
}

header.header--compact #menuBtn {top: 0%;
}

}