/*--------------------------------------------------------------
# 共通
--------------------------------------------------------------*/
.page_top .section_title {
  color: var(--key-color);
  font-size: clamp( 1.8rem, calc( 1.087912087912088rem + 1.9780219780219779vw ), 3.6rem );
  &::after {
    display: block;
    color: var(--fc-base);
    content: attr(data-title);
    font-family: 'Noto Sans JP', Meiryo, "メイリオ", YuGothic, sans-serif;
    font-size: var(--fs-normal);
    text-transform: capitalize;
    letter-spacing: 0.1em;
  }
}
/*--------------------------------------------------------------
# メインビジュアル
--------------------------------------------------------------*/
#main_visual {
  aspect-ratio: 750 / 418;
  background: url(/assets/img/home/main_visual.jpg) no-repeat right / cover;
  position: relative;
}
#main_visual .text {
  font-family: var(--ff-maru);
  font-size: clamp( 2rem, calc( 1.076923076923077rem + 2.564102564102564vw ), 6rem );
  letter-spacing: 0.1em;
  margin-bottom: 0;
  position: absolute;
  left: 5.5%;
  bottom: 7.5%;

  & strong {
    padding: 0 0.1em;
    background: #FFF;
  }

  .text_color {
    color: var(--key-color);
  }
}
/*--------------------------------------------------------------
イベントバナー
--------------------------------------------------------------*/
#home_event .section_title {
  display: none;
}
#home_event .content_block {
  display: none;
  text-align: center;
}
/*--------------------------------------------------------------
頭も心もぐんぐん伸びるプログラミング教室
--------------------------------------------------------------*/
#home_message {
  background: url(/assets/img/course/scratch.jpg) no-repeat center / cover;
}
#home_message .inner {
  padding: 7.8% 15%;
  max-width: 96rem;
  background: rgba(156,69,237,0.8);
  @media (min-width:768px) {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
}
#home_message .message_title {
  font-family: var(--ff-maru);
  font-size: var(--fs-page-title);
  .back_color {
    background: #FFF;
  }
  .text_color {
    color: var(--key-color);
  }
}
#home_message .text {
  color: #FFF;
  font-family: var(--ff-maru);
  font-size: var(--fs-large);
  word-break: keep-all;
  overflow-wrap: anywhere;
  max-width: 19em;
}
/*--------------------------------------------------------------
清和ラボで身につく６つのチカラ
--------------------------------------------------------------*/
#home_skill {
  background: url(/assets/img/bk_dna.png) repeat;
}
#home_skill .inner::before {
  display: block;
  content: "";
  width: min(80%,75.6rem);
  aspect-ratio: 756 / 520;
  margin: 0 auto;
  background: url(/assets/img/home/skill_illust.png) no-repeat center / contain;
  @media (min-width:768px) {
    position: relative;
    bottom: -6rem;
  }
}
#home_skill .title_wrap {
  width: fit-content;
  margin: 0 auto 7rem;
  padding: 0 1rem;
  position: relative;
  @media (min-width:768px) {
    margin: 0 auto 10rem;
    padding: 0 3.9rem;
  }
  &::before {
    content: "";
    width: 0.3rem;
    height: 100%;
    background: var(--fc-base);
    position: absolute;
    top: 0;
    right: 100%;
    transform: rotate(-20deg);
    transform-origin: bottom;
  }
  &::after {
    content: "";
    width: 0.3rem;
    height: 100%;
    background: var(--fc-base);
    position: absolute;
    top: 0;
    left: 100%;
    transform: rotate(20deg);
    transform-origin: bottom;
  }
  .skill_title {
    font-family: var(--ff-maru);
    font-size: var(--fs-page-title);
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
    filter: drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF);

    .text_color {
      color: var(--key-color);
    }
  }
  .text {
    font-family: var(--ff-maru);
    font-size: clamp( 1.4rem, calc( 1.123076923076923rem + 0.7692307692307693vw ), 2.1rem );
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.1em;
  }
}
#home_skill .content_block {
  display: flex;
  flex-wrap: wrap;
  counter-reset: count 0;
  justify-content: center;
  gap: 3%;
  background: none;
}
#home_skill dl.item {
  display: flex;
  flex-direction: column-reverse;
  counter-increment: count 1;
  width: max(48.5%,19rem);
  margin-bottom: 6%;
  perspective: 1000px;
  position: relative;
  @media (min-width:768px) {
    width: max(31.3%,26.5rem);
  }

  &::before {
    display: inline-flex;
    content: counter(count);
    color: #FFF;
    font-size: clamp( 1.8rem, calc( 1.087912087912088rem + 1.9780219780219779vw ), 3.6rem );
    justify-content: center;
    align-items: center;
    width: 22%;
    aspect-ratio: 1 / 1;
    background: #FF8F44;
    border: 1px solid #FFF;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }

  & dt {
    font-family: var(--ff-maru);
    font-size: var(--fs-sec-title);
    text-align: center;
    margin-top: 0.5em;
    filter: drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF)
            drop-shadow(0 0 1px #FFF);
  }
  & dd {
    align-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #FFF;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.6s;
    transform-style: preserve-3d;
    position: relative;

    &::after {
      content: "＋";
      font-size: 200%;
      position: absolute;
      bottom: 0.2em;
      left: 50%;
      transition: all 0.6s;
      transform: translateX(-50%);
      @media (min-width:1200px) {
        bottom: 0.5em;
      }
    }
    .illust {
      backface-visibility: hidden;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .text {
      color: #FFF;
      font-size: clamp( 1.2rem, calc( 1.0417582417582418rem + 0.43956043956043955vw ), 1.6rem );
      width: 70%;
      line-height: 1.5;
      backface-visibility: hidden;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotateY(180deg);
      @media (min-width:1200px) {
        width: 67%;
      }
    }
  }
}
#home_skill  .role.is_flipped {
  transform: rotateY(180deg);
  background: #FF8F44;

  &::after {
    color: #FFF;
  }
}
/*--------------------------------------------------------------
コース紹介
--------------------------------------------------------------*/
#home_course {
  background: url(/assets/img/bk_kikagaku.png) repeat;
}
#home_course .index_wrap {
  padding: 5rem 0;
  background: url(/assets/img/bk_kikagaku.png) repeat;
  @media (min-width:768px) {
    padding: 10rem 0;
  }
  .column2_img_text {
    padding-bottom: 3rem;
    @media (min-width:768px) {
      padding-bottom: 2.5%;
    }
  }
}
#home_course .age {
  color: var(--key-color);
  font-family: var(--ff-maru);
  font-size: clamp( 1.4rem, calc( 1.0043956043956044rem + 1.098901098901099vw ), 2.4rem );
  margin-bottom: 0;
}
#home_course .course_title {
  font-size: clamp( 2rem, calc( 1.3670329670329672rem + 1.7582417582417582vw ), 3.6rem );
  font-family: var(--ff-maru);
  margin-bottom: 0.5em;
}
#home_course .text {
  margin-bottom: 1.4em;
}

@media (min-width:768px) {
  #home_course img {
    height: 100%;
    object-fit: cover;
  }
  #home_course .btn_wrap {
    text-align: right;
  }
}
/*--------------------------------------------------------------
合格実績
--------------------------------------------------------------*/
#home_results {
  background-image: url(/assets/img/bk_kamifubuki_left.png), url(/assets/img/bk_kamifubuki_right.png);
  background-repeat: repeat-y;
  background-size: 30.8% auto, 20.7% auto;
  background-position: left, right;
  @media (min-width:768px) {
    background-size: 38.8% auto, 28.7% auto;
  }
}
#home_results .content_block + .content_block {
  margin-top: 6rem;
  @media (min-width:768px) {
    margin-top: 10rem;
  }
}
#home_results .block_title {
  font-size: clamp( 1.6rem, calc( 1.2835164835164836rem + 0.8791208791208791vw ), 2.4rem );
  text-align: center;
  margin: 0 auto;
  gap: 0.3em;

  &::before {
    display: inline-block;
    content: "";
    width: 1em;
    height: 1em;
    margin: 0 0.3em -0.1em 0;
    background: url(/assets/img/icon_check.svg) no-repeat center / contain;
  }
}
#home_results .note {
  text-align: center;
  margin: 0;
}
#home_results .results_list {
  list-style: none;
  width: min(calc(100% - 8rem),60rem);
  margin: 3rem auto;

  & li {
    font-family: var(--ff-maru);
    font-size: var(--fs-large);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.1em;
    padding: 0.6em 0;

    &:nth-child(odd) {
      background: var(--key-color-pale);
    }
    &:nth-child(even) {
      background: var(--back-purple);
    }
    & small {
      display: inline-block;
      font-family: inheit;
      font-size: 76%;
      font-weight: 400;
      margin-left: 0.5em;
    }
  }
}
#home_results .results_list.exam {
  position: relative;

  &::after {
    display: block;
    content:"";
    height: 100%;
    aspect-ratio: 42 / 190;
    background: url(/assets/img/home/level_arrow.png) no-repeat center / contain;
    position: absolute;
    top: 0;
    left: 101%;
  }
}
#home_results .official_site {
  text-align: center;

  & a {
    color: var(--fc-base);
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}
/*--------------------------------------------------------------
保護者の声
--------------------------------------------------------------*/
#home_voice {
  background: var(--back-purple);
}
#home_voice .voice_list {
  list-style: none;
  @media (min-width:768px) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6rem 5%;
  }
  .item {
    @media (min-width:768px) {
      width: calc(90% / 3);
    }
    & img {
      display: block;
      width: min(86%,30rem);
      margin: 0 auto 2rem;
    }
    .course {
      display: inline-block;
      color: #FFF;
      font-size: 1.2rem;
      margin-bottom: 1em;
      padding: 0.2em 1em;
      background: var(--key-color);
    }
    .title {
      font-family: var(--ff-maru);
      font-size: var(--fs-large);
      letter-spacing: 0.1em;
      margin-bottom: 0.4em;
    }
    + .item {
      margin-top: 6rem;
      @media (min-width:768px) {
        margin-top: 0;
      }
    }
  }
}
/*--------------------------------------------------------------
お知らせ
--------------------------------------------------------------*/
#home_information ul {
  max-width: 100rem;
  min-height: 20rem;
  margin: 0 auto 7rem;
  background: #FFF;
  @media (min-width: 768px) {
    padding: 0 3rem;
  }

  & li {
    list-style: none;
    border-bottom: 1px solid #BCBCBC;

    & a {
      display: block;
      color: var(--fc-base);
      padding: 1.5em 0.5em;

      .text {
        @media (min-width: 768px) {
          display: flex;
          gap: 1.5rem 7%;
        }

        .post_title {
          line-height: 1.5;
          margin: 0.5em 0 0;
          @media (min-width:768px) {
            margin-top: 0;
          }
        }
      }
      &:hover {
        background: rgba(0,0,0,0.1);
      }  
    }
  }
}