/*--------------------------------------------------------------
# メインビジュアル
--------------------------------------------------------------*/
.home_main_visual {
  aspect-ratio: 1 / 1;
  background: url(/assets/img/home_mv_sp.jpg) no-repeat right top / cover;
  @media (min-width: 768px) {
    aspect-ratio: 1920 / 735;
    background: url(/assets/img/home_mv.jpg) no-repeat right top / cover;
  }
}
/*--------------------------------------------------------------
# Prime Englishで「使える」英語を身につける！
--------------------------------------------------------------*/
#home_first {
  padding: 7rem 2rem;
  background: url(/assets//img/home_first_bg.png) no-repeat center / cover;

  .inner {
    padding: 1.5em;
    background: #FFF;
    @media (min-width: 768px) {
      padding: 7rem 3rem;
    }

    .home_first_title {
      font-size: var(--fs-sec-title);
      text-align: center;
      word-break: keep-all;
      overflow-wrap: anywhere;
      margin-bottom: 1em;
    }
    & p {
      @media (min-width: 768px) {
        text-align: center;
      }
      + p {
        margin-top: 1em;
      }
    }
  }
}
/*--------------------------------------------------------------
# Prime Englishの特徴
--------------------------------------------------------------*/
#home_feature {
  padding: 5rem 0;
  @media (min-width: 768px) {
    padding: 11rem 0;
  }

  .section_title::before {
    width: min(12vw,6.4rem);
    aspect-ratio: 64.3 / 37.7;
    background-image: url(/assets/img/icon_feature.png);
  }
  .point_list {
    @media (min-width: 992px) {
      display: flex;
      justify-content: space-between;
    }

    & li {
      font-weight: 700;
      text-align: center;
      margin-bottom: 5rem;
      padding: 0 1em 1.5em;
      border: 3px solid;
      @media (min-width: 992px) {
        display: flex;
        flex-direction: column;
        width: 32%;
        margin-bottom: 0;
      }
      &::before {
        display: block;
        content: "";
        width: min(70%,11.4rem);
        aspect-ratio: 114 / 32;
        margin: 0 auto;
        position: relative;
        top: -1.8rem;
      }

      .title {
        font-size:var(--fs-large);
        line-height: 1.5;
        word-break: keep-all;
        overflow-wrap: anywhere;
        margin-bottom: 0.7em;
      }
      .text {
        text-align: left;
        line-height: 1.5;
        max-width: 47rem;
        margin: 0.5em auto 1.5em;
      }
      &:nth-child(1) {
        background: var(--pale-pink);
        border-color: var(--accent-pink);

        &::before {
          background: url(/assets/img/home_point1.png) no-repeat center / contain;
        }
      }
      &:nth-child(2) {
        background: var(--pale-orange);
        border-color: var(--accent-orange);

        &::before {
          background: url(/assets/img/home_point2.png) no-repeat center / contain;
        }
      }
      &:nth-child(3) {
        background: var(--pale-green);
        border-color: var(--accent-green);

        &::before {
          background: url(/assets/img/home_point3.png) no-repeat center / contain;
        }
      }

      & a {
        display: inline-block;
        color: var(--main-blue);
        margin: auto 0 0;

        &::after {
          display: inline-block;
          content: "";
          width: 0;
          height: 0;
          margin-left: 3rem;
          border: 4px solid transparent;
          border-left: 5px solid var(--main-blue);
        }
        &:hover {
          letter-spacing: 0.3em;
        }
      }
    }
  }
}
/*--------------------------------------------------------------
# コース紹介・講師紹介
--------------------------------------------------------------*/
#home_index {
  padding: 7rem 0;
  @media (min-width: 768px) {
    padding: 10rem 0;
  }
  .content_block {
    @media (min-width: 768px) {
      display: flex;
      justify-content: space-between;
    }

    .item {
      margin-bottom: 3rem;
      @media (min-width: 768px) {
        width: 47.6%;
      }
  
      .img_box {
        text-align: center;
        position: relative;
        bottom: -4rem;
        z-index: 3;
  
        & img {
          max-width: 90%;
        }
      }
      & a {
        display: block;
        color: #FFF;
        text-align: center;
        line-height: 3;
        position: relative;
        
        &::before {
          display: block;
          content: "";
          width: 100%;
          aspect-ratio: 610 / 407;
          background-size: 100%;
          background-position: center;
          transition: 0.4s all ease;
        }
        &::after {
          border-left-color: #FFF;
        }
        &:hover {
          letter-spacing: 0.3em;

          &::before {
            background-size: 110%;
          }
        }
      }
    }
    .item.course {
      & a {
        background: #DF8821;
  
        &::before {
          background-image: url(/assets/img/home_course_img.jpg);
        }
      }
    }
    .item.teacher {
      a {
        background: #43B5C4;
  
        &::before {
          background-image: url(/assets/img/home_teacher_img.jpg);
        }
      }
    }  
  }
}
/*--------------------------------------------------------------
# 生徒・保護者の声
--------------------------------------------------------------*/
#home_voice .section_title::before {
  width: min(12vw, 4rem);
  aspect-ratio: 43 / 40;
  background-image: url(/assets/img/icon_voice.png);
}
/*--------------------------------------------------------------
# よくある質問
--------------------------------------------------------------*/
#home_faq {
  padding: 8rem 0;
  @media (min-width: 768px) {
    padding: 15rem 0;
  }

  .section_title::before {
    width: min(12vw, 6rem);
    aspect-ratio: 60 / 42.2;
    background-image: url(/assets/img/icon_faq.png);
  }
}
/*--------------------------------------------------------------
# お知らせ・コラム
--------------------------------------------------------------*/
#home_info {
  .inner {
    @media (min-width: 768px) {
      display: flex;
      justify-content: space-between;
    }
    & section {
      margin-bottom: 3rem;
      @media (min-width: 768px) {
        width: 48%;
      }
  
      .info_title {
        text-align: center;
        position: relative;
        bottom: -4.7rem;
  
        & img {
          max-width: 90%;
        }
      }
      .content_block {
        padding: 2rem 2rem 0;
        @media (min-width: 768px) {
          display: flex;
          flex-direction: column;
          height: 87%;
          padding: 5rem 2rem 0;
        }
  
        .post_list {
          min-height: 20rem;
          padding: 2rem 3rem 0;
          background: #FFF;
          @media (min-width: 768px) {
            flex-grow: 1;
            padding: 0 2.5rem;
          }
  
          & li {
            border-bottom: 1px solid #BCBCBC;
  
            & a {
              display: block;
              color: var(--fc-base);
              padding: 1.5em 0.5em;
  
              &:hover {
                background: rgba(0,0,0,0.1);
              }
            }
            .text {
              @media (min-width: 1028px) {
                display: flex;
                gap: 7%;
              }
            }
          }
        }
        & p {
          text-align: center;
          margin-top: 4rem;
          padding: 1em 0.5em;
          background: #FFF;
        }
        .read {
          display: block;
          color: #FFF;
          text-align: center;
          line-height: 3;
          position: relative;
  
          &::after {
            border-left-color: #FFF;
          }
          &:hover {
            letter-spacing: 0.3em;
          }
        }
      }
      .content_block.news {
        background: #F36557;
      }
      .content_block.column {
        background: #9ABA41;
      }
    }
  }
} 
/*--------------------------------------------------------------
# アクセス
--------------------------------------------------------------*/
#home_access {
  padding: 7rem 0;
  @media (min-width: 768px) {
    padding: 15rem 0 14.7rem;
  }

  .section_title::before {
    width: min(12vw, 5.8rem);
    aspect-ratio: 58 / 54;
    background-image: url(/assets/img/icon_access.png);
  }
  & p {
    text-align: center;
    margin-top: 1em;
    line-height: 1.5;

    span:nth-child(1) {
      display: inline-block;
      margin-right: 3em;
    }
  }
}