@charset "UTF-8";

.c-course{
  background:#e8f8da;
  margin-top:29.3333333333vw;
  margin-bottom:29.3333333333vw;
  position:relative;
}
@media screen and (min-width: 768px){

  .c-course{
    margin-top:110px;
    margin-bottom:110px;
  }
}

.c-course::before{
  content:"";
  width:100%;
  height:calc(16vw + 4px);
  background:url(../images/c-course/03_parts09_3x.webp) no-repeat center/100% 100%;
  position:absolute;
  bottom:calc(100% - 2px);
  left:50%;
  transform:translateX(-50%) rotate(-180deg) matrix(-1, 0, 0, 1, 0, 0);
}
@media screen and (min-width: 768px){

  .c-course::before{
    height:76px;
  }
}

.c-course::after{
  content:"";
  width:100%;
  height:calc(16vw + 4px);
  background:url(../images/c-course/03_parts09_3x.webp) no-repeat center/100% 100%;
  position:absolute;
  top:calc(100% - 2px);
  left:50%;
  transform:translateX(-50%);
}
@media screen and (min-width: 768px){

  .c-course::after{
    height:76px;
  }
}

.c-course__btn{
  margin-top:25px;
}

.c-course__btn > a{
  color:#222;
  box-shadow:rgba(0, 0, 0, 0.15) 2px 2px 1px;
  display:flex;
  justify-content:center;
  align-items:center;
  width:auto;
  width:280px;
  height:50px;
  margin:0 auto;
  border-radius:25px;
  letter-spacing:0.1em;
  font-weight:600;
}
@media screen and (min-width: 768px){

  .c-course__btn > a{
    width:400px;
    height:70px;
    border-radius:45px;
    font-size:1.25em;
  }
}

.c-course__btn > a.oyako{
  background:#fabf13;
}

.c-course__btn > a.children{
  background:#ff6fcc;
}

.c-course__btn > a.elementary{
  background:#437ce0;
}

.c-course__btn > a.middleSchool{
  background:#ff573a;
}

.c-course__btn > a.highschool{
  background:#ff9300;
}

.c-course__btn > a.prep{
  background:#69d6de;
}

.c-course__btn > a.online{
  background:#69d6de;
}

.c-course__inner{
  width:89.3333333333vw;
  padding-top:10px;
  padding-bottom:30px;
  margin:0 auto;
}
@media screen and (min-width: 768px){

  .c-course__inner{
    overflow:hidden;
    max-width:900px;
  }
}

.c-course__ttl{
  text-align:center;
  color:#000;
  font-size:1.5em;
  font-weight:700;
  line-height:1.705em;
  letter-spacing:0.05em;
  margin:0 auto;
  position:relative;
}

.c-course__desc{
  width:100%;
  font-size:1.125em;
  font-weight:500;
  line-height:160%;
  letter-spacing:0.45px;
  margin:50px auto 0;
}
@media screen and (min-width: 768px){

  .c-course__desc{
    text-align:center;
  }
}

.c-course__nav{
  width:300px;
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:30px auto 0;
}
@media screen and (min-width: 768px){

  .c-course__nav{
    width:660px;
  }
}

.c-course__nav + nav{
  border-top:1px solid #5bb647;
  padding-top:4vw;
  margin-top:4vw;
}
@media screen and (min-width: 768px){

  .c-course__nav + nav{
    padding-top:15px;
    margin-top:15px;
    justify-content:left;
  }
}

.c-course__navItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:140px;
  height:44px;
  border-radius:22px;
  background:#fff;
  border:2px solid;
  padding-left:25px;
  padding-right:10px;
}
@media screen and (min-width: 768px){

  .c-course__navItem{
    width:210px;
    height:66px;
    border-radius:70px;
    cursor:pointer;
    transition:all 0.4s ease;
  }

  .c-course__navItem:hover{
    opacity:0.6;
  }
}

.c-course__navItem.item1{
  border-color:#fabf13;
}

.c-course__navItem.item2{
  border-color:#ff6fcc;
}

.c-course__navItem.item3{
  border-color:#437ce0;
}

.c-course__navItem.item4{
  border-color:#ff573a;
}

.c-course__navItem.item5{
  border-color:#ff9300;
}

.c-course__navItem.item6{
  border-color:#69d6de;
}

.c-course__navItem.item7{
  border-color:#69d6de;
}

.c-course__navBtn{
  color:#222;
  font-size:1em;
  font-weight:700;
  line-height:1;
  width:100%;
  height:100%;
  position:relative;
}
@media screen and (min-width: 768px){

  .c-course__navBtn{
    font-size:1.3em;
    cursor:pointer;
  }
}

.c-course__navBtn:hover{
  text-decoration:none;
}

.c-course__navBtn span{
  width:14px;
  display:block;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
}
@media screen and (min-width: 768px){

  .c-course__navBtn span{
    width:21px;
    right:4px;
  }

  .c-course__navBtn span img{
    width:100%;
  }
}

.c-course__swiper{
  margin-top:50px;
}

.c-course__card{
  width:89.3333333333vw;
  padding:40px 9px;
  border-radius:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
  margin:0 auto;
  background:#fff;
}
@media screen and (min-width: 768px){

  .c-course__card{
    width:780px;
    padding:40px 65px;
  }
}

.c-course__card h3{
  width:295px;
  border-radius:24px;
  background:#fff;
  text-align:center;
  font-size:18px;
  font-weight:700;
  line-height:1;
  text-align:center;
  border:2px solid;
  padding:15px 10px;
}

.c-course__card h3.card1{
  color:#fabf13;
  border-color:#fabf13;
}

.c-course__card h3.card2{
  color:#ff6fcc;
  border-color:#ff6fcc;
}

.c-course__card h3.card3{
  color:#437ce0;
  border-color:#437ce0;
}

.c-course__card h3.card4{
  color:#ff573a;
  border-color:#ff573a;
}

.c-course__card h3.card5{
  color:#ff9300;
  border-color:#ff9300;
}

.c-course__card h3.card6{
  color:#69d6de;
  border-color:#69d6de;
}

.c-course__card__info{
  width:68vw;
  border-top:1px solid;
  border-bottom:1px solid;
  margin:0 auto;
}
@media screen and (min-width: 768px){

  .c-course__card__info{
    width:385px;
  }
}

.c-course__card__info.card1{
  border-color:#fabf13;
}

.c-course__card__info.card2{
  border-color:#ff6fcc;
}

.c-course__card__info.card3{
  border-color:#437ce0;
}

.c-course__card__info.card4{
  border-color:#ff573a;
}

.c-course__card__info.card5{
  border-color:#ff9300;
}

.c-course__card__info.card6{
  border-color:#69d6de;
}

.c-course__card__info span{
  display:block;
  text-align:center;
  font-size:12px;
  font-weight:500;
  line-height:1;
  padding:8px 0 7px;
}
@media screen and (min-width: 768px){

  .c-course__card__info span{
    font-size:14px;
  }
}

.c-course__card__info span + span{
  border-top:1px solid;
}

.c-course__card__info span + span.card1{
  border-color:#fabf13;
}

.c-course__card__info span + span.card2{
  border-color:#ff6fcc;
}

.c-course__card__info span + span.card3{
  border-color:#437ce0;
}

.c-course__card__info span + span.card4{
  border-color:#ff573a;
}

.c-course__card__info span + span.card5{
  border-color:#ff9300;
}

.c-course__card__info span + span.card6{
  border-color:#69d6de;
}

.c-course__card__lead{
  width:68vw;
  font-size:15px;
  font-weight:400;
  line-height:200%;
  margin:0 auto;
}
@media screen and (min-width: 768px){

  .c-course__card__lead{
    width:100%;
    font-size:16px;
  }
}

.c-course__card__hosoku{
  color:#69d6de;
  text-align:center;
  font-size:13px;
  font-weight:700;
  line-height:1;
  margin:-15px auto -20px;
}
@media screen and (min-width: 768px){

  .c-course__card__hosoku{
    font-size:14px;
  }
}

.c-course h4{
  text-align:center;
  font-size:18px;
  font-weight:700;
  line-height:140%;
  width:68vw;
  padding-bottom:10px;
  margin:0 auto;
  position:relative;
}
@media screen and (min-width: 768px){

  .c-course h4{
    width:100%;
  }
}

.c-course h4::after{
  content:"";
  width:100%;
  height:8px;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
}
@media screen and (min-width: 768px){

  .c-course h4::after{
    height:10px;
  }
}

.c-course__oyako{
  width:100%;
}

.c-course__oyako__ttl::after{
  background:url(../images/c-course/08_1_03.svg) no-repeat center/contain;
}

.c-course__oyako__detail{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  height:162px;
  width:78.6666666667vw;
  margin:13px auto 0;
}
@media screen and (min-width: 768px){

  .c-course__oyako__detail{
    width:100%;
  }
}

.c-course__oyako__detail p{
  width:48vw;
  font-size:14px;
  font-weight:400;
  line-height:210%;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-color:#fabf13;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
@media screen and (min-width: 768px){

  .c-course__oyako__detail p{
    width:100%;
    font-size:16px;
  }
}

.c-course__oyako__detailImg1{
  width:99px;
  display:flex;
  justify-content:center;
}
@media screen and (min-width: 768px){

  .c-course__oyako__detailImg1{
    width:120px;
  }
}

.c-course__oyako__detailImg2{
  width:150px;
  display:flex;
  justify-content:center;
}
@media screen and (min-width: 768px){

  .c-course__oyako__detailImg2{
    margin-left:auto;
  }
}

.c-course__oyako__detail2{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  height:142px;
  width:78.6666666667vw;
  margin:13px auto 0;
}
@media screen and (min-width: 768px){

  .c-course__oyako__detail2{
    width:92%;
  }
}

.c-course__oyako__detail2 p{
  width:34.6666666667vw;
  font-size:14px;
  font-weight:400;
  line-height:210%;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-color:#fabf13;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
@media screen and (min-width: 768px){

  .c-course__oyako__detail2 p{
    width:405px;
    font-size:16px;
  }
}

.c-course__children__ttl::after{
  background:url(../images/c-course/08_2_01.svg) no-repeat center/contain;
}

.c-course__children__detail p{
  width:78.6666666667vw;
  margin:10px auto 0;
  font-size:14px;
  font-weight:400;
  line-height:210%;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-color:#ff6fcc;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
@media screen and (min-width: 768px){

  .c-course__children__detail p{
    width:100%;
    font-size:16px;
  }
}

.c-course__children__detailImg1{
  width:280px;
  margin:13px auto 0;
}

.c-course__children__detailImg2{
  width:230px;
  margin:10px auto 0;
}

.c-course__elementary{
  width:100%;
  position:relative;
}

.c-course__elementary__ttl::after{
  background:url(../images/c-course/08_3_01.svg) no-repeat center/contain;
}

.c-course__elementary__detail{
  position:relative;
  width:78.6666666667vw;
  margin:18px auto 0;
}
@media screen and (min-width: 768px){

  .c-course__elementary__detail{
    width:100%;
  }
}

.c-course__elementary__detail p{
  font-size:14px;
  font-weight:400;
  line-height:210%;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-color:#437ce0;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
  margin-top:10px;
}
@media screen and (min-width: 768px){

  .c-course__elementary__detail p{
    text-align:center;
    font-size:16px;
  }
}

.c-course__elementary__detailImg1{
  width:285px;
  margin:0 auto;
}

.c-course__elementary__detailImg2{
  width:230px;
  margin:0 auto;
}

.c-course__middleSchool__detail{
  width:78.6666666667vw;
  margin:-10px auto 0;
}
@media screen and (min-width: 768px){

  .c-course__middleSchool__detail{
    width:100%;
  }
}

.c-course__middleSchool__detailImg1{
  width:285px;
  border-radius:30px;
  overflow:hidden;
  margin:0 auto;
}
@media screen and (min-width: 768px){

  .c-course__middleSchool__detailImg1{
    width:285px;
  }
}

.c-course__middleSchool__detailImg2{
  width:230px;
  margin:20px auto 0;
}
@media screen and (min-width: 768px){

  .c-course__middleSchool__detailImg2{
    width:230px;
  }
}

.c-course__highschool__detail{
  width:295px;
  margin:-10px auto 0;
}
@media screen and (min-width: 768px){

  .c-course__highschool__detail{
    width:100%;
  }
}

.c-course__highschool__detailImg1{
  width:285px;
  border-radius:30px;
  overflow:hidden;
  margin:0 auto;
}
@media screen and (min-width: 768px){

  .c-course__highschool__detailImg1{
    width:285px;
  }
}

.c-course__highschool__detailImg2{
  width:230px;
  margin:20px auto 0;
}
@media screen and (min-width: 768px){

  .c-course__highschool__detailImg2{
    width:230px;
  }
}

.c-course__fee{
  width:78.6666666667vw;
  margin:0 auto;
}
@media screen and (min-width: 768px){

  .c-course__fee{
    width:100%;
  }
}

.c-course__fee h4{
  width:100%;
  text-align:center;
  border-bottom:2px solid;
  font-size:16px;
  font-weight:700;
  line-height:1;
  padding-bottom:15px;
}
@media screen and (min-width: 768px){

  .c-course__fee h4{
    width:250px;
    font-size:18px;
  }
}

.c-course__fee.card1 h4{
  border-bottom-color:#fabf13;
}

.c-course__fee.card2 h4{
  border-bottom-color:#ff6fcc;
}

.c-course__fee.card3 h4{
  border-bottom-color:#437ce0;
}

.c-course__fee.card4 h4{
  border-bottom-color:#ff573a;
}

.c-course__fee.card5 h4{
  border-bottom-color:#ff9300;
}

.c-course__fee.card6 h4{
  border-bottom-color:#69d6de;
}
@media screen and (min-width: 768px){

  .c-course__fee__cont{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:3px;
    margin-top:30px;
  }
}

.c-course__fee dl{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px;
}
@media screen and (min-width: 768px){

  .c-course__fee dl{
    width:calc(50% - 1.5px);
    margin-top:0;
    gap:3px;
  }
}

.c-course__fee dl + dl{
  margin-top:3px;
}
@media screen and (min-width: 768px){

  .c-course__fee dl + dl{
    margin-top:0;
  }
}

.c-course__fee dl dt{
  display:flex;
  align-items:center;
  width:38.1333333333vw;
  min-height:33px;
  color:#fff;
  font-size:11px;
  font-weight:500;
  line-height:160%;
  letter-spacing:0.05em;
  padding:6px 0 6px 15px;
}
@media screen and (min-width: 768px){

  .c-course__fee dl dt{
    font-size:13px;
    min-height:40px;
    height:100%;
  }
}

.c-course__fee dl dt.card1{
  background:#fabf13;
}

.c-course__fee dl dt.card2{
  background:#ff6fcc;
}

.c-course__fee dl dt.card3{
  background:#437ce0;
}

.c-course__fee dl dt.card4{
  background:#ff573a;
}

.c-course__fee dl dt.card5{
  background:#ff9300;
}

.c-course__fee dl dt.card6{
  background:#69d6de;
}

.c-course__fee dl dd{
  background:#f6f6f6;
  width:39.7333333333vw;
  min-height:33px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  text-align:right;
  font-size:13px;
  font-weight:500;
  line-height:160%;
  letter-spacing:0.05em;
  padding:6px 10px;
}
@media screen and (min-width: 768px){

  .c-course__fee dl dd{
    font-size:15px;
    min-height:40px;
    height:100%;
    padding:0;
  }
}

.c-course__fee dl dd.height{
  height:48px;
}
@media screen and (min-width: 768px){

  .c-course__fee dl dd.height{
    height:100%;
  }
}

.c-course__fee small{
  display:block;
  font-size:10px;
  font-weight:400;
  line-height:160%;
  margin-top:10px;
}
@media screen and (min-width: 768px){

  .c-course__fee small{
    font-size:12px;
  }
}

.c-course__prepImg{
  width:285px;
  border-radius:30px;
  overflow:hidden;
  margin:0 auto;
}

.c-course__onlineImg{
  width:285px;
  border-radius:30px;
  overflow:hidden;
  margin:0 auto;
}

.c-course .swiper-pagination{
  position:static;
  margin-top:16px;
}

.c-course .swiper-pagination-bullet-active{
  background:#5bb647;
}

.c-course .btnBox{
  margin-top:16px;
}