#interview-detail {
  /*====================================================
  COMMON
  ====================================================*/
  .inner {
    position: relative;
    width: 1100px;
  }
  .breadcrumb {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }
  @media screen and (max-width: 767px) {
    --inner-width: 86.66666667%;
    .inner {
      max-width: var(--inner-width);
    }
  }

  /*====================================================
  MV
  ====================================================*/
  #mv {
    /* デフォルト色 */
    --type-color: #727171;
    /* タイプごとの色設定 */
    &.--standard,
    &.--teens,
    &.--kids {
      --type-color: #004fa8;
    }
    &.--instructor {
      --type-color: #000;
    }
    &.--parent {
      --type-color: #268360;
    }
    &.--other {
      --type-color: #79488b;
    }

    font-size: 16px;
    position: relative;
    overflow: hidden;
    color: #fff;
    font-weight: 700;

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
    }
    &::before {
      width: 50vw;
      height: 100%;
      right: 0;
      top: 0;
      background-color: var(--type-color);
    }
    &::after {
      width: 100vw;
      height: 4.375em;
      left: 0;
      top: 0;
      background-color: #fff;
    }
    .inner {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        width: 12em;
        height: 100%;
        top: 0;
        transform: translateX(-50%);
        background-color: var(--type-color);
        border-radius: 0 0 9999px 9999px;
      }
    }
    .mv__image {
      width: 50%;
      position: relative;
      z-index: 2;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
    .mv__texts {
      width: calc(50% - 7rem);
      padding-top: 8em;
    }
    .mv__title {
      font-size: 1.875em;
      width: fit-content;
      position: relative;
      margin-bottom: 3em;
    }
    .mv__title_ja {
      position: relative;
      z-index: 2;
      color: #000;
      &:where(.--instructor &) {
        color: #fff;
      }
    }
    .mv__title_en {
      font-family: 'Outfit', sans-serif;
      position: absolute;
      display: block;
      top: 50%;
      transform: translateY(-50%);
      left: calc(100% - 0.44em);
      white-space: nowrap;
      font-size: 3.22466667em;
      letter-spacing: 0.02em;
      opacity: 0.1;
      color: #fff;
    }
    .mv__copy {
      font-size: 2.375em;
      line-height: 1.44;
      border-bottom: 2px solid #fff;
      padding-bottom: 0.9em;
      margin-bottom: 0.4em;
    }
    .mv__type {
      font-size: 1.875em;
      font-weight: 600;
    }
    @media screen and (min-width: 768px) and (max-width: 1158px) {
      font-size: 1.38169257vw;
    }
    @media screen and (max-width: 767px) {
      font-size: 4.26666667vw;
      background-color: #fff;
      .inner {
        flex-direction: column;
        max-width: 100%;
        &::before {
          content: none;
        }
      }
      .mv__image {
        width: 100%;
      }
      .mv__title {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        column-gap: 0.2em;
        align-items: flex-end;
        z-index: 3;

        &.pc_display {
          display: none;
        }
      }
      .mv__title_ja {
        top: 0;
        writing-mode: vertical-rl;
        font-size: 1rem;
        transform: translateY(-1.2em);
        opacity: 0.75;
      }
      .mv__title_en {
        opacity: 1;
        font-size: 5.607rem;
        writing-mode: vertical-rl;
        z-index: 2;
        transform: translateY(-0.06em);
        line-height: 0.68;
        position: static;
      }
      .mv__texts {
        width: var(--inner-width);
        margin-inline: auto;
        padding-block: 6.2vw 6.2vw;
        &::before {
          content: '';
          display: block;
          position: absolute;
          width: 118.79733333vw;
          height: 100%;
          bottom: 0;
          left: -0.8vw;
          border-bottom-left-radius: 10.66666667vw;
          background-color: var(--type-color);
        }
      }
      .mv__texts_inner {
        position: relative;
        z-index: 2;
      }
      .mv__copy {
        font-size: 2.2rem;
        line-height: 1.5;
        padding-inline: 2vw;
        padding-bottom: 4vw;
        border-bottom-width: 1px;
        margin-bottom: 2vw;
      }
      .mv__type {
        font-size: 1.7rem;
        padding-inline: 2vw;
      }
    }
  }

  /*====================================================
  INTERVIEW
  ====================================================*/
  #interview {
    padding-bottom: 10rem;
    overflow: hidden;
    .interview__message {
      width: 50%;
      padding-block: 9.4rem 0;
    }
    .interview__message_title {
      flex-direction: column;
      align-items: center;
      font-size: 4.239rem;
      line-height: 1.4;
      margin-bottom: 0.3em;
    }
    .interview__message_title_ja {
      font-size: 0.44656759em;
    }
    .interview__message_title_en {
      font-family: 'Rowdies', sans-serif;
      color: var(--color-orange);
    }
    .interview__message_intro {
      text-align: center;
      color: var(--color-orange);
      font-size: 2.145rem;
      line-height: 1.429;
      font-weight: 700;
      width: fit-content;
      margin-inline: auto;
      position: relative;
      &::before,
      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 3px;
        bottom: 0;
        height: calc(100% + 0.9em);
        background-color: var(--color-orange);
        transform-origin: bottom;
      }
      &::before {
        right: calc(100% + 0.8em);
        transform: rotate(-30deg);
      }
      &::after {
        left: calc(100% + 0.8em);
        transform: rotate(30deg);
      }
    }
    .interview__message_content {
      margin-top: 5.6rem;
      width: 80%;
      margin-inline: auto;
      position: relative;
      background-color: #fff;
      border: 2px solid var(--color-orange);
      border-radius: var(--border-radius-size);
      --triangle-size: 3.2rem;
      --border-radius-size: 1.9rem;
      &::before,
      &::after {
        content: '';
        display: block;
        position: absolute;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(100% - 1px);
      }
      &::before {
        background-color: var(--color-orange);
        width: calc(var(--triangle-size) + 4px);
        height: calc(var(--triangle-size) + 4px);
      }
      &::after {
        background-color: #fff;
        width: var(--triangle-size);
        height: var(--triangle-size);
      }
    }
    .interview__message_content_inner {
      position: relative;
      z-index: 3;
      padding: 3.4rem 4.6rem 4.4rem;
      flex-direction: column;
      row-gap: 3.8rem;
      z-index: 3;
      position: relative;
      background-color: #fff;
      border-radius: var(--border-radius-size);
    }
    .interview__message_content_text {
      font-size: 1.8rem;
      line-height: 1.567;
    }
    .interview__message_button_wrap {
      width: 80%;
      margin-inline: auto;
    }
    .interview__message_button {
      font-size: 1.8rem;
      width: fit-content;
      align-items: center;
      margin-left: auto;
      background-color: var(--color-orange);
      border-radius: 9999px;
      color: #fff;
      column-gap: 0.7em;
      padding: 0.56em 1em;
      margin-top: 2em;
    }
    .interview__message_button_arrow {
      width: 1.5em;
    }
    .interview__qa {
      width: 50%;
      background-color: #fff;
      border-bottom-left-radius: 3rem;
      position: relative;
      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #fff;
        top: 0;
        left: 100%;
      }
    }
    .interview__qa_inner {
      padding-block: 8rem 12rem;
      width: calc(100% - 7rem);
      margin-left: auto;
      overflow: hidden;
    }
    .interview__qa_q {
      font-size: 2.2rem;
      font-weight: 600;
      color: var(--color-orange);
      width: calc(100% - 3em);
      margin-left: auto;
      position: relative;
      margin-bottom: 0.9em;
      &:where(.interview__qa_a + &) {
        margin-top: 2em;
      }

      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 50vw;
        height: 2px;
        background-color: var(--color-orange);
        top: 0.8em;
        transform: translateY(-50%);
        right: calc(100% + 0.6em);
      }
    }
    .interview__qa_a {
      font-size: 1.8rem;
      line-height: 1.563;
      font-weight: 400;
    }
    @media screen and (max-width: 767px) {
      padding-bottom: 20vw;
      .inner {
        flex-direction: column-reverse;
        max-width: 100%;
      }
      .interview__qa {
        width: 100%;
        border-bottom-left-radius: 0;
      }
      .interview__qa_inner {
        width: var(--inner-width);
        margin-inline: auto;
        padding-block: 12vw 17vw;
      }
      .interview__qa_q {
        font-size: 1.7rem;
        line-height: 1.5;
        width: calc(100% - 1.8em);
        margin-bottom: 0.6em;

        &::before {
          height: 1px;
          right: calc(100% + 0.3em);
        }
      }
      .interview__qa_a {
        font-size: 1.4rem;
        line-height: 1.675;
      }
      .interview__message {
        width: 100%;
        padding-top: 14vw;
      }
      .interview__message_title {
        font-size: 3.359rem;
      }
      .interview__message_intro {
        font-size: 1.7rem;
        &::before,
        &::after {
          width: 2px;
        }
      }
      .interview__message_content {
        --triangle-size: 6vw;
        --border-radius-size: 3vw;
        width: var(--inner-width);
        margin-top: 10vw;
      }
      .interview__message_content_text {
        font-size: 1.4rem;
        line-height: 1.675;
      }
      .interview__message_content_inner {
        padding: 7vw 5vw 5vw;
        row-gap: 12vw;
      }
      .interview__message_button_wrap {
        width: var(--inner-width);
      }
      .interview__message_button {
        margin-inline: auto;
        font-size: 1.5rem;
      }
    }
  }
}