@import url('main.css');
@import url('socialbuttons_sp.css');
@import url('em.css');
@import url('em_sp.css');
@import url('tokushu.css');
@import url('special.css');
@import url('index.css');

/*======================================= 共通 =======================================*/
#scholarship{
  font-feature-settings: "palt";
}
#scholarship,.sliderBlock{
  max-width:960px;
  margin: 0 auto;
}
/*======================================= KVエリア・紹介文 =======================================*/

.content{
  max-width:960px;
  margin: 0 auto;
}
#syugakushien{
  width:100%;
  background: #ffffff;
}
@media screen and (min-width:960px){
  .pcNone{
    display:none;
  }
  /*=== kvArea ===================================*/
  .kvArea{
    width:100%;
    max-height: 360px;
    background: #5ec7e2; 
    background: -moz-linear-gradient(top,  #5ec7e2 13%, #ffffde 100%); 
    background: -webkit-linear-gradient(top,  #5ec7e2 13%,#ffffde 100%); 
    background: linear-gradient(to bottom,  #5ec7e2 13%,#ffffde 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ec7e2', endColorstr='#ffffde',GradientType=0 );
    border-bottom: 85px solid #fff;
  }
  
  .kv{
    display:flex;
    flex-wrap:nowrap;
    justify-content: space-between;
    padding:32px 0 0 0;
  }
  
  
  .kv picture,.kv picture img{
    width:100%;
  }
  .kvArea{
    width:100%;
    max-height: 360px;
  }

  /*=== leadArea ===================================*/
  .leadArea{
    padding:4rem 0;
  }
  
  .leadBox{
    border:3px solid #7DBEFF;
    background: #ffffff;
    border-radius:16px;
    position:relative;
    margin-bottom:40px;
  }
  
  .leadBox::before{
    content:url('../../../img/page/special/syugakushien/leadArea_arrow.svg');
    display: block;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  
  .lead{
    max-width:720px;
    margin: 0 auto;
    padding:1rem;
    display:flex;
    position:relative;
  }
  
  .lead_1{
    background: #CC4081;
    width: 185px;
    height: 185px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    position: absolute;
    top: -40px;
    left: 0;
    transform: rotate(-10deg);
  }
  
  .lead_1 p{
    font-weight:900;
    color:#ffffff;
    font-size:2.2rem;
  }
  
  .lead_1 span{
    font-weight:900;
    font-size:3.8rem;
  }
  
  .lead_2{
    padding:2rem 0 2rem 200px;
  }
  
  .lead_2 p{
    color:#777777;
    font-weight:900;
    font-size:2.75rem;
    line-height:1.5;
  }
  
  .lead_2 p span{
    color:#F6A431;
    border-bottom:#7DBEFF 3px solid;
  }
  
  .bar{
    background: #24B3D8;
    padding:1rem;
  }
  
  .bar h3{
    color:#ffffff;
    text-align: center;
    font-size:35px;
  }
  
  .linkBtnList{
    max-width:800px;
    margin: 2rem auto;
    padding:1rem;
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
  }
  
  .linkBox{
    width:49%;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .link_1,.link_2{
    margin:2rem 0 2rem 0;
    font-weight:900;
    position:relative;
  }
  
  .link_1::before,.link_2::before{
    content:url('../../../img/page/special/syugakushien/notice.svg');
    display: block;
    position:absolute;
    top: -18px;
    left: -20px;
  }
  
  .link_1 span,.link_2 span{
    font-size:2.2rem;
    color:#373737;
  }
  
  .linkBtn{
    margin:0 0 0 1rem;
  }
  
  .linkBtn a{
    display: block;
    padding:1rem 2rem;
    background: #1FB9A3;
    box-shadow:rgba(13,123,107,1) 0 6px 0;
    border-radius:8px;
    color:#ffffff;
    font-weight:900;
  }
/*=== aboutArea ===================================*/
  .aboutBg{
    background: #E8F9F7;
    padding:4rem 0;
  }

  .aboutAreaTitle h3{
    max-width: 800px;
    margin: 0 auto;
    background: #1FB9A3;
    border-radius: 8px 8px 0 0;
    color: #ffffff;
    text-align: center;
    padding: 2rem 1rem 1.5rem 1rem;
    font-size: 2.5rem;
  }

  .pageBox{
    background: #ffffff;
    border-radius:8px;
    width:100%;
    padding:2rem;
    margin-bottom:4rem;
  }

  .pageBoxTtl{
    display:flex;
    justify-content: center;
    align-items:center;
  }

  .pageBoxTtl h4{
    color:#24B3D8;
    text-align: center;
    font-size:2rem;
    background: linear-gradient(transparent 60%, #FFFF8D 0%);
    display: inline;
  }
  
  .pageBox{
    background: #ffffff;
    border-radius:8px;
    width:100%;
    padding:2rem;
  }

  .aboutTtl{
    display:flex;
    justify-content: center;
    align-items:center;
    margin:2rem 0 2rem 0;
  }

  .aboutTtl h4{
    color:#24B3D8;
    text-align: center;
    font-size:2rem;
    background: linear-gradient(transparent 60%, #FFFF8D 0%);
    display: inline;
  }

  .aboutText{
    margin:2rem 0;
    line-height:1.6;
  }

  .aboutImg{
    display:flex;
    justify-content: center;
    align-items:center;
  }

  .labeledBox{
    background: #ffffff;
    border-radius:8px;
    width:100%;
    margin:2rem 0 4rem 0;
    padding:2rem;
    position:relative;
  }

  .labeledBox:before{
    content:url('../../../img/page/special/syugakushien/label_gradation.svg');
    display: block;
    width:60px;
    height:60px;
    position:absolute;
    top:-4px;
    left:-4px;
  }

  .questionTtl{
    display:flex;
    justify-content: center;
    align-items: center;
    margin:2rem 0 4rem 0;
  }

  .questionTtl picture{
    margin-bottom:2rem;
  }

  .questionTtl p{
    display: inline-block;
    background: linear-gradient(transparent 60%, #FFFF8D 0%);
    color:#24B3D8;
    text-align: center;
    font-size:2rem;
    font-weight: 900;
  }

  .answerText{
    font-size:1.8rem;
    font-weight:900;
    text-align: center;
    margin-bottom:4rem;
  }

  .tableBlock tr,.tableBlock td{
    border: 1px solid #24B3D8;
    border-collapse:collapse;
  }

  .tableBlock table{
    width:100%;
    max-width:800px;
    margin: 0 auto;
  }

  .tdTitle{
    width:10%;
    color:#ffffff;
    font-weight:900;
    background: #24B3D8;
    text-align: center;
    vertical-align: middle;
    padding:2rem 2rem;
  }

  .terms_1,.terms_2{
    width:80%;
    text-align: center;
    vertical-align: middle;
    font-weight:900;
    padding: 1rem;
  }

  .blueText{
    color:#24B3D8;
  }

  .orangeText{
    color:#F6A431;
  }

  .tableDetail{
    padding:1rem;
  }

  .tableDetail p{
    font-size: 1.2rem;
    font-weight: 900;
  }

  .tableDetail ul li{
    margin-top:0.5rem;
    font-size:1.2rem;
  }
  .q1Image{
    display:flex;
    justify-content: center;
    align-items:center;
    padding:2rem 0;
  }
  
  .greenBg{
    background:#EBF9F0;
  }

  .otherLink{
    width:100%;
    padding:3rem;
  }

  .popText{
    width:100%;
    border-bottom:2px solid #037E27;
    padding:1rem;
    display:flex;
    justify-content: center;
    align-items:center;
  }
  
  .popText p{
    text-align: center;
    color:#037E27;
    font-weight:900;
    font-size:1.8rem;
    position:relative;
    display: inline;
  }

  .popText p:before{
    content:"";
    display: block;
    width:4px;
    height:26px;
    position:absolute;
    top: -2px;
    left: -20px;
    transform:rotate(-16deg);
    background:#037E27;
  }

  .popText p:after{
    content:"";
    display: block;
    width:4px;
    height:26px;
    position:absolute;
    top: -2px;
    right: -20px;
    transform:rotate(-164deg);
    background:#037E27;
  }
  .catchText{
    color:#808080;
    font-weight:900;
    text-align: center;
    margin:2rem 0;
  }

  .otherLinkBox{
    width:80%;
    margin:0 auto;
    display:flex;
    justify-content: space-around;
  }

  .checkListBox{
    border:2px solid #24B3D8;
    border-radius:8px;
    background: #ffffff;
    max-width:710px;
    margin:0 auto;
    padding:2rem 6rem;
  }

  .checkListBox ul{
    display:flex;
    flex-wrap:wrap;
  }

  .checkListBox ul li{
    margin:0 2rem 2rem 2rem;
    position:relative;
    color:#373737;
    font-weight:900;
  }

  .checkListBox ul li:last-child{
    margin:0 2rem 0 2rem;
  }

  .checkListBox ul li::before{
    content:url('../../../img/page/special/syugakushien/checkbox.svg');
    position:absolute;
    top:0;
    left:-2rem;
  }

  .comparisonTable{
    display:flex;
    justify-content: space-between;
    margin:5rem 0 0 0;
  }

  .comparisonBox_1,.comparisonBox_2{
    width:49%;
  }

  .comparisonBox_1 .caseBox,
  .comparisonBox_2 .caseBox{
    background: #24B3D8;
    width: 90%;
    margin: 0 auto;
    padding: 1rem;
    border-radius:8px;
    display:flex;
    justify-content: center;
    position:relative;
  }

  .comparisonBox_1 .caseBox:before,
  .comparisonBox_2 .caseBox:before{
    content:"";
    background:url('../../../img/page/special/syugakushien/sampleA_img@2x.png');
    background-size:cover;
    display: block;
    width: 70px;
    height: 70px;
    position:absolute;
    bottom:0;
    left: -20px;
  }

  .comparisonBox_2 .caseBox:before{
    background:url('../../../img/page/special/syugakushien/sampleB_img@2x.png');
    background-size:cover;
  }

  .comparisonBox_1 .caseBox p,
  .comparisonBox_2 .caseBox p{
    color:#FFFF8D;
    font-weight:900;
    font-size:1.2rem;
    margin-left:2rem;
  }

  .caseTable{
    margin:1rem 0;
  }

  .caseTable table{
    width:100%;
    border:2px solid #24B3D8;
  }

  .caseTable table tr{
    border-bottom:1px solid #24B3D8;
  }

  .caseTable table td{
    padding:1rem;
  }

  .caseTable table td.label1{
    background: #C3EAF5;
    text-align: center;
    color:#0887A8;
    font-weight:900;
  }

  .caseTable table td.label2{
    text-align: center;
    color:#0887A8;
    font-weight:900;
  }

  .caseTable table td.cost{
    background: #ffffff;
    text-align: center;
    color:#0887A8;
    font-weight:900;
  }

  .caseTable table td.cost span{
    font-size:2rem;
  }
  .caseAtt{
    font-size:1.2rem;
    line-height: 1.6;
    font-weight:900;
    color:#808080;
    margin-bottom: 4rem;
  }

  .caseImgBox{
    display:flex;
    justify-content: center;
    max-width:800px;
    margin: 0 auto;
  }

  .caseAttWrap{
    max-width:740px;
    margin: 0 auto 4rem auto;
  }

  .catchTextBlack{
    display:flex;
    justify-content: center;
  }

  .catchTextBlack p{
    color:#373737;
    font-weight: 900;
    text-align: center;
    position: relative;
    display: inline-block;
    padding:0 1rem;
  }

  .catchTextBlack p::before{
    content:"";
    display:block;
    width:2px;
    height:20px;
    position: absolute;
    top: 0;
    left: 0;
    background: #373737;
    transform: rotate(-10deg);
  }

  .catchTextBlack p::after{
    content:"";
    display:block;
    width:2px;
    height:20px;
    position: absolute;
    top: 0;
    right: 0;
    background: #373737;
    transform: rotate(10deg);
  }

  .limitedTtl{
    color:#CC4081;
    margin:1rem 0;
    text-align: center;
    font-size:2rem;
    font-weight:900;
  }

  /*=== scheduleArea ===================================*/
  .scheduleArea{
    margin:2rem 0 0 0;
  }

  .scheduleBox{
    display:flex;
    justify-content:space-between;
    margin:0 0 2rem 0;
  }

  .scheduleLabel{
    background: #CC4081;
    width:128px;
    padding:.5rem 1rem 0 1rem;
    display:flex;
    justify-content: center;
    align-items:center;
    position:relative;
    z-index:1;
    margin:0 0 28px 0;
  }

  .scheduleLabel::after{
    content:"";
    display: block;
    width:0;
    height:0;
    border-style: solid;
    border-width: 30px 64px 0 64px;
    border-color: #CC4081 transparent transparent transparent;
    position:absolute;
    bottom:-29px;
    z-index:-1;
  }
  
  .scheduleLabelText{
    text-align: center;
    line-height:1.4;
    font-size:2rem;
    font-weight: 900;
    color:#ffffff;
    min-height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scheduleContent{
    display:flex;
    background: #ffffff;
    border:2px solid #CC4081;
    width: 82%;
  }

  .scheduleTtl{
    background: #FFC2DE;
    display:flex;
    justify-content: center;
    align-items:center;
    padding: 1rem;
    width: 35%;
  }
  .scheduleTtl p{
    color:#CC4081;
    font-weight: 900;
    font-size:1.6rem;
  }

  .scheduleContentText{
    width:65%;
    padding: 1rem;
    display:flex;
    justify-content:flex-start;
    align-items:center;
  }
  
  .scheduleContentText p{
    color:#808080;
    line-height:1.4;
    font-size: 1.2rem;
    font-weight: 900;
  }

  .checkList li{
    margin:0 2rem 1rem 2rem;
    position:relative;
    color:#808080;
    font-size: 1.2rem;
    font-weight: 900;
  }

  .checkList li:last-child{
    margin:0 2rem 0 2rem;
  }

  .checkList li::before{
    content:url('../../../img/page/special/syugakushien/checkbox.svg');
    position:absolute;
    top:0;
    left:-2rem;
  }

  /*=== searchArea =================================*/
  #searchArea{
    padding:4rem 0 0 0;
  }
  .searchAreaTitle h3{
    max-width: 800px;
    margin: 0 auto;
    background: #1FB9A3;
    border-radius: 8px 8px 0 0;
    color: #ffffff;
    text-align: center;
    padding: 2rem 1rem 1.5rem 1rem;
    font-size: 2.5rem;
  }

  .searchBg{
    width:100%;
    background:url('../../../img/page/special/syugakushien/searchbg.svg');
    background-repeat:repeat;
    padding:4rem 0;
  }

  .japanAreaList ul{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding:2rem 0 4rem 0;
  }

  .japanAreaList ul li{
    width:21%;
    margin-bottom:2rem;
  }

  .japanAreaList ul li a{
    display:block;
    color:#ffffff;
    background: #ffffff;
    border-radius:8px;
    text-align: center;
    font-weight:900;
    padding:1rem 1rem;
    box-shadow:0 3px 0 #1FB9A3;
  }

  .japanAreaList ul li.area_A a{background:#33ABE5;}
  .japanAreaList ul li.area_B a{background:#60B05B;}
  .japanAreaList ul li.area_C a{background:#2BA9AB;}
  .japanAreaList ul li.area_D a{background:#A7C94F;}
  .japanAreaList ul li.area_E a{background:#FCB549;}
  .japanAreaList ul li.area_F a{background:#E6512C;}
  .japanAreaList ul li.area_G a{background:#EDA1BF;}
  .japanAreaList ul li.area_H a{background:#E08653;}

  .japanAreaList ul li a.noLink{
    cursor:default;
    display:block;
    background:#C5D6D4;
    color:#B5B5B5
  }

  .japanAreaList ul li a.noLink:hover{
    opacity: 1;
  }

  .areaTitle{
    width:100%;
    background:#1FB9A3;
    margin-bottom:2rem;
    padding:1rem 0 0.5rem 0;
  }

  .areaName{
    color:#ffffff;
    border-bottom:2px solid #ffffff;
    padding:0rem 1rem 0.5rem 1rem;
    font-weight:900;
  }

  .schoolLink,.schoolLink2{
    background: #ffffff;
    border:2px solid #1FB9A3;
    border-radius:8px;
    margin:0 0 2rem 0;
    padding:2rem;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  .schoolLinkImg{
    width:30%;
  }

  .schoolLinkImg img{
    object-fit:cover;
    width:100%;
    height:205px;
  }

  .schoolLinkImg img:before{
    display:none;
  }

  .schoolInfo{
    width:64%;
    margin:0 0;
  }
  .schoolName{
    margin:0 0;
  }
  .schoolName p{
    font-size:1.8rem;
    font-weight:900;
    color:#373737;
    margin-bottom:1rem;
  }

  .schoolArea p{
    color:#808080;
    font-size:1rem;
    margin-bottom:1rem;
  }

  .schoolCaption p{
    font-size:1.2rem;
    line-height:1.6;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .schoolCaption p.schoolCaptionText.no_ct{
    -webkit-line-clamp: initial;
    overflow: visible;
  }

  .schoolCaption p.schoolCaptionText{
    position:relative;
    margin:0 0 1rem 0;
  }

  .moreLeadBtn{
    margin: 1rem 0;
    padding: 0;
    display:flex;
    justify-content: flex-end;
  }

  .moreLeadBtn a{
    font-size:1.2rem;
    color:#1FB9A3;
  }

  .schoolCourse{
    margin:2rem 0 0 0;
    padding: 2rem 1rem 2rem 1rem;
    border-top:1px solid #1FB9A3;
    border-bottom:1px solid #1FB9A3;
    position:relative;
  }

  .schoolCourse ul li{
    color:#1FB9A3;
    margin-bottom:1rem;
  }

  .schoolCourse ul li:last-child{
    margin-bottom:0;
  }

  .schoolCourseTtl{
    position:absolute;
    top:-18px;
    left:0;
    background: #ffffff;
    padding:1rem 1rem 1rem 0;
  }

  .schoolCourseTtl p{
    color:#373737;
    font-size:1.4rem;
    font-weight:900;
  }

  .btnList{
    display:flex;
    justify-content: flex-end;
    width: 100%;
  }

  .btnList ul{
    display:flex;
    justify-content: center;
    flex-direction:column;
  }

  .btnList ul li{
    text-align: center;
    display:flex;
    justify-content: center;
  }

  .requestBtn,.syousaiBtn{
    display: block;
  }

  .schoolCourse,.schoolTopic{
    width:48%;

  }

  .schoolLink .schoolCourse{
    width: 73%;
  }

  .schoolTopic{
    display:flex;
    justify-content: center;
    align-items:center;
  }

  
  .schoolTopic p{
    line-height:1.6;
    font-size:1.2rem;
  }

  .btnList2{
    width:100%;
    margin-top:2rem;
  }

  .btnList2 ul{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
  }

  .btnList2 ul li{
    width:24%;
    margin:0 0 0 0;
  }

  .btnList2 ul li a{
    display: block;
    background: #F6A431;
    color:#ffffff;
    border-radius:8px;
    padding:1rem;
    text-align: center;
  }

  .btnList2 ul li a.schoolLinkbtn2{
    background: #EA5A5A;
  }
}
@media screen and (max-width:960px){
  .spNone{
    display:none;
  }
  /*=== kvArea ===================================*/
  .kvArea{
    width:100%;
    max-height: 360px;
    background: #5ec7e2; 
    background: -moz-linear-gradient(top,  #5ec7e2 13%, #ffffde 100%); 
    background: -webkit-linear-gradient(top,  #5ec7e2 13%,#ffffde 100%); 
    background: linear-gradient(to bottom,  #5ec7e2 13%,#ffffde 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ec7e2', endColorstr='#ffffde',GradientType=0 );
    max-height: initial;
    border-bottom: 0 solid #fff;
  }
  
  .kv{
    display:flex;
    flex-wrap:nowrap;
    justify-content: space-between;
    padding:32px 0 0 0;
  } 
  
  .kv picture,.kv picture img{
    width:100%;
  }

   /*=== leadArea ===================================*/
   .leadArea{
    padding:4rem 20px;
  }

  .leadBox{
    border:3px solid #7DBEFF;
    background: #ffffff;
    border-radius:16px;
    position:relative;
    margin-bottom:40px;
  }
  
  .leadBox::before{
    content:url('../../../img/page/special/syugakushien/leadArea_arrow.svg');
    display: block;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  
  .lead{
    max-width:720px;
    margin: 0 auto;
    padding:1rem;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    position:relative;
  }

  .lead_1{
    background: #CC4081;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: absolute;
    top: -60px;
    left: 30%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: rotate(-10deg);
  }
  
  .lead_1 p{
    font-weight:900;
    color:#ffffff;
    font-size:2rem;
  }
  
  .lead_1 span{
    font-weight:900;
    font-size:3.2rem;
  }
  
  .lead_2{
    padding:8rem 0 2rem 0;
    display: flex;
    justify-content: center;
  }
  
  .lead_2 p{
    color:#777777;
    font-weight:900;
    font-size:2rem;
    line-height:1.5;
  }
  
  .lead_2 p br{
    display:none;
  }

  .lead_2 p span{
    color:#F6A431;
    border-bottom:#7DBEFF 3px solid;
  }
  
  .bar{
    background: #24B3D8;
    padding:1rem;
  }
  
  .bar h3{
    color:#ffffff;
    text-align: center;
    font-size:20px;
  }
  
  .linkBtnList{
    max-width:800px;
    margin: 2rem auto;
    padding:1rem;
    display:flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap:wrap;
  }
  
  .linkBox{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 5rem;
  }

  .linkBox:not(first-child){
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 3rem;
  }

  .link_1,.link_2{
    margin:0 0 1rem 0;
    font-weight:900;
    position:relative;
  }
  
  .link_1::before,.link_2::before{
    content:url('../../../img/page/special/syugakushien/notice.svg');
    display: block;
    position:absolute;
    top: -18px;
    left: -20px;
  }
  
  .link_1 span,.link_2 span{
    font-size:2.2rem;
    color:#373737;
  }
  
  .linkBtn{
    width:80%;
    margin:0 0 0 0;
  }
  
  .linkBtn a{
    display: block;
    padding:1rem 2rem;
    text-align: center;
    background: #1FB9A3;
    box-shadow:rgba(13,123,107,1) 0 6px 0;
    border-radius:8px;
    color:#ffffff;
    font-weight:900;
    font-size:1.8rem;
  }

  .aboutBg{
    background: #E8F9F7;
    padding:4rem 1rem;
  }

  .aboutAreaTitle h3{
    width:80%;
    max-width: 800px;
    margin: 0 auto;
    background: #1FB9A3;
    border-radius: 8px 8px 0 0;
    color: #ffffff;
    text-align: center;
    padding: 2rem 1rem 1.5rem 1rem;
    font-size: 2.5rem;
  }

  .pageBox{
    background: #ffffff;
    border-radius:8px;
    width:100%;
    padding:2rem;
  }

  .lineTtl{
    margin:2rem 0 2rem 0;
  }

  .lineTtl h4{
    color:#24B3D8;
    text-align: center;
    font-size:2rem;
    background: linear-gradient(transparent 60%, #FFFF8D 0%);
    display: inline;
  }

  .aboutText{
    margin:2rem 0;
    line-height:1.6;
  }

  .aboutImg{
    display:flex;
    justify-content: center;
    align-items:center;
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
  }

  
  .labeledBox{
    background: #ffffff;
    border-radius:8px;
    width:100%;
    margin:4rem 0 4rem 0;
    padding:2rem;
    position:relative;
  }

  .labeledBox:before{
    content:url('../../../img/page/special/syugakushien/label_gradation.svg');
    display: block;
    width:60px;
    height:60px;
    position:absolute;
    top:-4px;
    left:-4px;
  }

  .questionTtl{
    width: 100%;
    margin:2rem 0 4rem 0;
  }

  .questionTtl picture{
    margin-bottom:2rem;
    display: block;
    text-align: center;
  }
  .questionTtl picture img{
    width:65px;
  }
  .lineTtl{
    text-align: center;
  }
  .lineTtl p{
    display: inline;
    background: linear-gradient(transparent 60%, #FFFF8D 0%);
    color:#24B3D8;
    text-align: center;
    line-height:1.6;
    font-size:2rem;
    font-weight: 900;
  }

  .answerText{
    font-size:1.8rem;
    font-weight:900;
    text-align: center;
    line-height: 1.6;
    margin-bottom:4rem;
  }

  .tableBlock tr,.tableBlock td{
    border: 1px solid #24B3D8;
    border-collapse:collapse;
  }

  .tableBlock table{
    width:100%;
    max-width:800px;
    margin: 0 auto;
  }

  .tdTitle{
    width:10%;
    color:#ffffff;
    font-weight:900;
    background: #24B3D8;
    text-align: center;
    vertical-align: middle;
    padding:2rem 2rem;
  }

  .terms_1,.terms_2{
    width:80%;
    text-align: center;
    vertical-align: middle;
    font-weight:900;
    padding: 1rem;
  }

  .blueText{
    color:#24B3D8;
  }

  .orangeText{
    color:#F6A431;
  }

  .tableDetail{
    padding:1rem;
  }

  .tableDetail p{
    font-size: 1.2rem;
    font-weight: 900;
  }

  .tableDetail ul li{
    margin-top:0.5rem;
    font-size:1.2rem;
  }
  .q1Image{
    display:flex;
    justify-content: center;
    align-items:center;
    padding:2rem 0;
    max-width:500px;
    text-align:center;
    margin: 0 auto;
  }
  
  .greenBg{
    background:#EBF9F0;
  }

  .otherLink{
    width:100%;
    padding:3rem;
  }

  .popText{
    width:100%;
    border-bottom:2px solid #037E27;
    padding:1rem;
    display:flex;
    justify-content: center;
    align-items:center;
  }
  
  .popText p{
    text-align: center;
    color:#037E27;
    font-weight:900;
    font-size:1.8rem;
    position:relative;
    display: inline;
  }

  .popText p:before{
    content:"";
    display: block;
    width:4px;
    height:18px;
    position:absolute;
    top: -2px;
    left: -20px;
    transform:rotate(-16deg);
    background:#037E27;
  }

  .popText p:after{
    content:"";
    display: block;
    width:4px;
    height:18px;
    position:absolute;
    top: -2px;
    right: -20px;
    transform:rotate(-164deg);
    background:#037E27;
  }
  .catchText{
    color:#808080;
    font-weight:900;
    font-size:1.2rem;
    text-align: center;
    margin:2rem 0;
    line-height:1.6;
  }

  .otherLinkBox{
    width:100%;
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }

  
  .checkListBox{
    border:2px solid #24B3D8;
    border-radius:8px;
    background: #ffffff;
    max-width:710px;
    margin:0 auto;
    padding:2rem 2rem;
  }

  .checkListBox ul{
    display:flex;
    flex-wrap:wrap;
  }

  .checkListBox ul li{
    margin:0 2rem 2rem 2rem;
    position:relative;
    color:#373737;
    font-weight:900;
  }

  .checkListBox ul li:last-child{
    margin:0 2rem 0 2rem;
  }

  .checkListBox ul li::before{
    content:url('../../../img/page/special/syugakushien/checkbox.svg');
    position:absolute;
    top:0;
    left:-2rem;
  }

  .comparisonTable{
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin:5rem 0 0 0;
  }

  .comparisonBox_1{
    width:100%;
    margin-bottom:5rem;
  }

  .comparisonBox_2{
    width:100%;
    margin-bottom:0;
  }

  .comparisonBox_1 .caseBox,
  .comparisonBox_2 .caseBox{
    background: #24B3D8;
    width: 90%;
    margin: 0 auto;
    padding: 1rem;
    border-radius:8px;
    display:flex;
    justify-content: center;
    position:relative;
  }

  .comparisonBox_1 .caseBox:before,
  .comparisonBox_2 .caseBox:before{
    content:"";
    background:url('../../../img/page/special/syugakushien/sampleA_img@2x.png');
    background-size:cover;
    display: block;
    width: 70px;
    height: 70px;
    position:absolute;
    bottom:0;
    left: -20px;
  }

  .comparisonBox_2 .caseBox:before{
    background:url('../../../img/page/special/syugakushien/sampleB_img@2x.png');
    background-size:cover;
  }

  .comparisonBox_1 .caseBox p,
  .comparisonBox_2 .caseBox p{
    color:#FFFF8D;
    font-weight:900;
    font-size:1.2rem;
    margin-left:2rem;
    text-align: center;
  }

  .caseTable{
    margin:1rem 0;
  }

  .caseTable table{
    width:100%;
    border:2px solid #24B3D8;
  }

  .caseTable table tr{
    border-bottom:1px solid #24B3D8;
  }

  .caseTable table td{
    padding:1rem;
  }

  .caseTable table td.label1{
    background: #C3EAF5;
    text-align: center;
    color:#0887A8;
    font-weight:900;
  }

  .caseTable table td.label2{
    background: #EAF6F9;
    text-align: center;
    color:#0887A8;
    font-weight:900;
  }

  .caseTable table td.cost{
    background: #ffffff;
    text-align: center;
    color:#0887A8;
    font-weight:900;
  }

  .caseTable table td.cost span{
    font-size:2rem;
  }

  .caseAtt{
    font-size:1.2rem;
    font-weight:800;
    line-height:1.6;
    color:#808080;
    margin-bottom: 4rem;
  }

  .caseAttWrap{
    margin: 0 auto 4rem auto;
  }

  .caseImgBox{
    width:100%;
    overflow-x: scroll;
    scrollbar-color: #24B3D8 #e0e0e0;
    padding:1rem;
  }
  
  .caseImgBox img{
    width:100%;
    min-width:695px;
    max-width:initial;
  }

  .catchTextBlack{
    display:flex;
    justify-content: center;
  }

  .catchTextBlack p{
    color:#373737;
    font-weight: 900;
    text-align: center;
    position: relative;
    display: inline-block;
    padding:0 1rem;
  }

  .catchTextBlack p::before{
    content:"";
    display:block;
    width:2px;
    height:20px;
    position: absolute;
    top: 0;
    left: 0;
    background: #373737;
    transform: rotate(-10deg);
  }

  .catchTextBlack p::after{
    content:"";
    display:block;
    width:2px;
    height:20px;
    position: absolute;
    top: 0;
    right: 0;
    background: #373737;
    transform: rotate(10deg);
  }

  .limitedTtl{
    color:#CC4081;
    margin:1rem 0;
    text-align: center;
    font-size:2rem;
    font-weight:900;
  }

  /*=== scheduleArea ===================================*/
  .scheduleArea{
    margin:2rem 0 0 0;
  }

  .scheduleBox{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    margin:0 0 2rem 0;
  }

  .scheduleLabel{
    background: #CC4081;
    width:100px;
    padding:.5rem 1rem 0 1rem;
    display:flex;
    justify-content: center;
    align-items:center;
    position:relative;
    z-index:1;
    margin:0 0 28px 0;
  }

  .scheduleLabel::after{
    content:"";
    display: block;
    width:0;
    height:0;
    border-style: solid;
    border-width: 30px 50px 0 50px;
    border-color: #CC4081 transparent transparent transparent;
    position:absolute;
    bottom:-29px;
    z-index:-1;
  }
  
  .scheduleLabelText{
    text-align: center;
    line-height:1.4;
    font-size:2rem;
    font-weight: 900;
    color:#ffffff;
    min-height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scheduleContent{
    display:flex;
    flex-direction:column;
    justify-content:center;
    background: #ffffff;
    border:2px solid #CC4081;
    width: 100%;
    margin:2rem 0 2rem 0;
  }

  .scheduleTtl{
    background: #FFC2DE;
    display:flex;
    justify-content: center;
    align-items:center;
    padding: 1rem;
    width: 100%;
  }
  .scheduleTtl p{
    color:#CC4081;
    font-weight: 900;
    font-size:1.6rem;
  }

  .scheduleContentText{
    width:100%;
    padding: 1rem;
    display:flex;
    justify-content:flex-start;
    align-items:center;
  }
  
  .scheduleContentText p{
    color:#808080;
    line-height:1.4;
    font-size: 1.2rem;
    font-weight: 900;
  }

  .checkList li{
    margin:0 2rem 1rem 2rem;
    position:relative;
    color:#808080;
    font-size: 1.2rem;
    font-weight: 900;
  }

  .checkList li:last-child{
    margin:0 2rem 0 2rem;
  }

  .checkList li::before{
    content:url('../../../img/page/special/syugakushien/checkbox.svg');
    position:absolute;
    top:0;
    left:-2rem;
  }

  /*=== searchArea =================================*/
  #searchArea{
    padding:4rem 0 0 0;
  }
  .searchAreaTitle h3{
    max-width: 800px;
    margin: 0 auto;
    background: #1FB9A3;
    border-radius: 8px 8px 0 0;
    color: #ffffff;
    text-align: center;
    padding: 2rem 1rem 1.5rem 1rem;
    font-size: 2.5rem;
  }

  .searchBg{
    width:100%;
    background:url('../../../img/page/special/syugakushien/searchbg.svg');
    background-repeat:repeat;
    padding:4rem 10px;
  }

  .japanAreaList ul{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding:2rem 0 2rem 0;
  }

  .japanAreaList ul li{
    width:47%;
    margin-bottom:1.5rem;
  }

  .japanAreaList ul li a{
    display:block;
    color:#ffffff;
    background: #ffffff;
    border-radius:8px;
    text-align: center;
    font-weight:900;
    padding:1rem 1rem;
    box-shadow:0 3px 0 #1FB9A3;
  }

  .japanAreaList ul li.area_A a{background:#33ABE5;}
  .japanAreaList ul li.area_B a{background:#60B05B;}
  .japanAreaList ul li.area_C a{background:#2BA9AB;}
  .japanAreaList ul li.area_D a{background:#A7C94F;}
  .japanAreaList ul li.area_E a{background:#FCB549;}
  .japanAreaList ul li.area_F a{background:#E6512C;}
  .japanAreaList ul li.area_G a{background:#EDA1BF;}
  .japanAreaList ul li.area_H a{background:#E08653;}

  .japanAreaList ul li a.noLink{
    cursor:default;
    display:block;
    background:#C5D6D4;
    color:#B5B5B5
  }

  .japanAreaList ul li a.noLink:hover{
    opacity: 1;
  }

  .areaTitle{
    width:100%;
    background:#1FB9A3;
    margin-bottom:2rem;
    padding:1rem 0 0.5rem 0;
  }

  .areaName{
    color:#ffffff;
    border-bottom:2px solid #ffffff;
    padding:0rem 1rem 0.5rem 1rem;
    font-weight:900;
  }

  .schoolLink,.schoolLink2{
    background: #ffffff;
    border:2px solid #1FB9A3;
    border-radius:8px;
    margin:0 0 2rem 0;
    padding:2rem;
  }

  .schoolInfo{
    margin:2rem 0;
  }

  .schoolLinkImg{
    width:100%;
  }

  .schoolLinkImg img{
    object-fit:cover;
    width:100%;
    height:205px;
  }

  .schoolName{
    margin:2rem 0;
  }

  .schoolName p{
    color:#373737;
    font-weight: 900;
    font-size:1.8rem;
  }

  .schoolArea{
    margin-bottom:1.2rem;
  }

  .schoolArea p{
    font-size:1.2rem;
  }

  .schoolCourse{
    margin:2rem 0 2rem 0;
    padding: 2rem 1rem 2rem 1rem;
    border-top:1px solid #1FB9A3;
    border-bottom:1px solid #1FB9A3;
    position:relative;
  }

  .schoolCourse ul li{
    color:#1FB9A3;
    margin-bottom:1rem;
  }

  .schoolCourse ul li:last-child{
    margin-bottom:0;
  }

  .schoolCaption p{
    font-size:1.2rem;
    line-height:1.6;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .schoolCourseTtl{
    position:absolute;
    top:-18px;
    left:0;
    background: #ffffff;
    padding:1rem 1rem 1rem 0;
  }

  .schoolCourseTtl p{
    color:#373737;
    font-size:1.4rem;
    font-weight:900;
  }

  .btnList ul{
    display:flex;
    justify-content: center;
    flex-direction:column;
  }

  .btnList ul li{
    text-align: center;
    display:flex;
    justify-content: center;
  }

  .requestBtn,.syousaiBtn{
    display: block;
  }

  .schoolTopic p{
    line-height:1.6;
    font-size:1.2rem;
  }

  .btnList2{
    margin-top:2rem;
  }

  .btnList2 ul{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
  }

  .btnList2 ul li{
    width:47%;
    margin:2rem 0 0 0;
  }

  .btnList2 ul li a{
    display: block;
    background: #F6A431;
    color:#ffffff;
    border-radius:8px;
    padding:1rem;
    text-align: center;
  }

  .btnList2 ul li a.schoolLinkbtn2{
    background: #EA5A5A;
  }

  .moreLeadBtn{
    margin: 1rem 0;
    padding: 0;
    display:flex;
    justify-content: flex-end;
  }

  .moreLeadBtn a{
    font-size:1.4rem;
    font-weight:700;
    color:#1FB9A3;
  }
}

@media screen and (max-width:340px) {
  .lead_1{
    position: absolute;
    top: -40px;
    left: 26%;
  }
}

/*otherBlock*/
@media screen and (min-width:960px){
  .otherBlock{
    background: #F6FEFA;
    padding:3rem 2rem 1rem 2rem;
  }

  .otherTitle{
    border-bottom:3px solid #008300;
    text-align: center;
  }

  .otherTitle p{
    font-weight: 700;
  }

  .otherTitle h3{
    font-weight:700;
    font-size:2.4rem;
    margin:1rem;
    color:#008300;
  }

  .otherList{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin:2rem auto;
  }

  .otherContentBlock{
    border-radius:8px;
    margin:0 0 2rem 0;
  }
  
  .otherContentBlock{
    width:49%;
    background: #ffffff;
    border:2px solid #008300;
    display:flex;
  }

  .otherContent{
    display:flex;
    justify-content:space-between;
    padding:1rem;
  }

  .otherContentImg{
    width:30%;
  }

  .otherContentText{
    width: 60%;
  }

  .otherContentText h5{
    font-size:1.6rem;
    color:#008300;
    margin-bottom:1rem;
  }

  .otherContentText p{
    font-size:1.2rem;
  }
  
}

@media screen and (max-width:960px){
  .otherBlock{
    background: #F6FEFA;
    padding:4rem 1rem;
  }

  .otherTitle{
    border-bottom:3px solid #008300;
    text-align: center;
  }

  .otherTitle p{
    font-weight: 700;
  }

  .otherTitle h3{
    font-weight:700;
    font-size:2.4rem;
    margin:1rem;
    color:#008300;
  }

  .otherList{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    width:94%;
    margin:2rem auto;
  }

  .otherContentBlock{
    background: #ffffff;
    border:2px solid #008300;
    border-radius:8px;
    margin:2rem 0 0 0;
    padding: 2rem 2rem;
    width:100%;
    display:flex;
    justify-content: space-between;
  }
  
  .otherContentBlock a{
    display: block;
  }

  .otherContent{
    display:flex;
    justify-content: space-between;
  }

  .otherContentImg{
    width:30%;
  }

  .otherContentText{
    width: 64%;
  }
  .otherContentText h5{
    color:#008300;
    font-size:1.8rem;
    margin:0 0 1rem 0;
  }

  .otherContentText p{
    line-height:1.6;
  }
}

.schoolLinkList ul{
  list-style:none;
  margin: 0;
  padding: 0;
}

.schoolLinkList .btnList{
  margin:1rem 0 0 0;
  display: flex;
  justify-content:flex-end;
}

@media screen and (max-width:960px) {
  .schoolLinkList .btnList{
    margin:1rem 0 0 0;
    display: flex;
    justify-content:center;
  }
}

.schoolLinkList .btnList .addBtn{
  max-width: 192px;
  margin: 0 0 1rem 4px;
}

.schoolLinkList .btnList .detailBtn{
  max-width:200px;
  margin-bottom:1rem;
}
.schoolLinkList .btnList .addBtn a{
  width:100%;
  display: block;
  background:#ea5a5a;
  text-decoration:none;
  /* border-radius:8px; */
  padding:1rem 10px 1rem 2.95rem;
  text-align: center;
  color:#ffffff;
  font-size:1.2rem;
  font-family:Yu Gothic,meiryo,sans-serif;
  font-weight:bold;
  position:relative;
}

.schoolLinkList .btnList .addBtn a .free{
  color:#ea5a5a;
  font-size:1rem;
  background:yellow;
  margin:0.5rem;
  padding:0 0.25rem;
  position:relative;
}

.schoolLinkList .btnList .addBtn a .paid{
  color:#ea5a5a;
  font-size:1rem;
  background:white;
  margin:0.5rem;
  padding:0 0.25rem;
  position:relative;
}

.schoolLinkList .btnList .addBtn a::before{
  content:"";
  position:absolute;
  top: 50%;
  left:8%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  display: block;
  color:#ffffff;
  width: 1.15em;
  height: 1.15em;
  border: none;
  background: var(--svgPumpWhite);
}