@charset "utf-8";
@media screen and (min-width: 845px) {
  /* -----------------
  mainvisual
  ------------------ */
  .hero {
    position: relative;
    width: 100%;
    height: 80vh;
    .wrapper {
      position: absolute;
      width: 40%;
      top: 35%;
      left: 10%;
    }
    .image {
      position: absolute;
      right: 0;
    }
  }
  /* -------------
  section reason
  -------------- */
  .reason {
    .item {
      width: 50%;
    }
    .item-teacher {
      transform: translateX(190%);
    }
    .sliding.item-teacher {
      transform: translateX(100%);
    }
  }
  /* -------------
  section voice
  -------------- */
  .voice {
    .flex {
      flex-direction: row;
      align-items: center;
    }
    .image {
      width: 120px;
    }
    .text::after {
      border: 15px solid transparent;
      border-left: 15px solid var(--color-blue);
      left: calc(100% + 13px);
      bottom: 15%;
    }
    .reverse {
      flex-direction: row-reverse;
      .text::after {
        border: 15px solid transparent;
        border-right: 15px solid var(--color-blue);
        left: -15px;
        bottom: 15%;
      }
    }
  }
  /* -------------
  section summary
  -------------- */
  .summary {
    .grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  /* -------------
  section cta
  -------------- */
  .cta {
    .blank {
      display: none;
    }
  }
  /* -------------
  footer
  -------------- */
  .footer {
    .grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}
@media screen and (min-width: 960px) {
  /* 404.html　------------ */
  #not-found {
    height: 60vh;
    text-align: center;
  }
}
@media screen and (min-width: 1200px) {
  .hero {
    width: 80%;
    margin: 0 auto;
    height: clamp(45.5rem, 18.5rem + 36vw, 50rem);
  }
}