@charset "UTF-8";

/* =====================
  header active
===================== */
@layer style {
  [data-page='interview'] .header ul {
    --active-anchor: --recruit;

    &::before {
      opacity: 1;
    }
  }
}

.u-bg {
  &::after {
    inset-block-start: 368px;

    @media (width <=768px) {
      inset-block-start: 51.4vw;
    }
  }
}

/* =====================
  mv
===================== */
.mv {
  position: relative;
  padding-block: 16px 0;
  margin-block-start: var(--header-height);

  @media (width <=768px) {
    padding-block: var(--nudge-2) 0;
  }

  .u-breadcrumb {
    @media (width <=768px) {
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    li:last-child {
      font-weight: 600;
    }
  }

  .u-inner {
    padding-block-start: 30px;
    padding-inline: 80px;

    @media (width <=768px) {
      padding-block-start: var(--nudge-2);
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }
  }

  .wrap {
    position: relative;
    z-index: 2;
    block-size: 486px;

    @media (width <=768px) {
      block-size: calc((100 / 390) * 250 * 1vw);
    }

    p {
      padding-block-start: 101px;
      font-size: 34px;
      font-weight: 700;
      line-height: 2.25;
      color: #111;

      @media (width <=768px) {
        padding-block-start: 17vw;
        font-size: calc((100 / 390) * 17 * 1vw);
      }

      span {
        padding-block: 9px;
        padding-inline: 21px;
        background: white;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;

        @media (width <=768px) {
          padding-block: calc((100 / 390) * 3 * 1vw);
          padding-inline: calc((100 / 390) * 8 * 1vw);
        }
      }
    }
  }

  .text {
    display: block grid;
    margin-block-start: 70px;

    @media (width <=768px) {
      padding-inline: 0;
      margin-block-start: var(--nudge-2);
    }

    .division {
      display: block flex;
      gap: 21px;
      inline-size: fit-content;
      padding-block: 4px;
      padding-inline: 14px;
      font-size: 20px;
      color: white;
      background: var(--primary);

      @media (width <=768px) {
        gap: var(--nudge-2);
        padding-block: 0;
        padding-inline: calc((100 / 390) * 8 * 1vw);
        font-size: calc((100 / 390) * 14 * 1vw);
      }
    }

    .title {
      display: block flex;
      gap: 0;
      align-items: baseline;
      margin-block-start: -30px;

      @media (width <=768px) {
        gap: 0;
        margin-block-start: calc((100 / 390) * -3 * 1vw);
      }

      .name {
        font-family: var(--oswald);
        font-size: 80px;
        font-weight: 600;
        letter-spacing: 2.4px;

        @media (width <=768px) {
          font-size: calc((100 / 390) * 35 * 1vw);
        }
      }

      .year {
        @media (width <=768px) {
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }
    }
  }

  /* ==== img ==== */
  .img {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    inline-size: 100%;
    block-size: 486px;
    translate: -50% 0;

    @media (width <=768px) {
      block-size: calc((100 / 390) * 250 * 1vw);
    }

    img {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      object-fit: cover;
      object-position: center top;
      translate: -50% -50%;

      @media (width <=768px) {
        object-position: -59vw top;
      }
    }
  }
}

/* =====================
  interview
===================== */
.interview {
  padding-block: 90px 160px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block flow;

    @media (width > 768px) {
      padding-inline: 160px;
    }
  }

  /* ==== dl ==== */
  dl {
    display: block grid;
    gap: 31px;
    counter-reset: number;

    @media (width <=768px) {
      gap: var(--nudge-3);
    }

    dt {
      position: relative;
      display: block flex;
      align-items: center;
      padding-block: 20.2px;
      padding-inline: 122px 16px;
      font-size: 22px;
      font-weight: 700;
      color: white;
      background: #3c6baf;

      @media (width <=768px) {
        padding-block: 2.3vw;
        padding-inline: 16.3vw 16px;
        font-size: calc((100 / 390) * 15 * 1vw);
      }

      &::before {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: block grid;
        flex-shrink: 0;
        place-content: center;
        inline-size: 80px;
        block-size: 100%;
        font-family: var(--oswald);
        font-size: 31px;
        font-weight: 700;
        line-height: 1;
        color: white;
        content: 'Q' counter(number);
        counter-increment: number;
        background: var(--primary);
        border-inline-end: 2px solid white;

        @media (width <=768px) {
          inline-size: calc((100 / 390) * 42.9 * 1vw);
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }
    }

    dd {
      padding-block: 30px;
      padding-inline: 81px 16px;

      @media (width <=768px) {
        padding-block: 3.3vw;
        padding-inline: 16.3vw 5vw;
      }
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    margin-block-start: 60px;
    margin-inline: auto;

    @media (width <=768px) {
      margin-block-start: var(--nudge-5);
    }
  }
}