@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .mv {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/interview/mv_bg.png');
    inline-size: 100%;
    block-size: 667px;
    padding-block-start: 169px;
    padding-inline: 80px;

    @media (width <= 768px) {
      background-image: url('../img/recruit/interview/mv_bg_2x.png');
      block-size: calc((100 / 390) * 734 * 1vw);
      padding-block-start: calc((100 / 390) * 130 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    .wrap {
      padding-inline: 80px;
      display: block grid;
      grid-template-columns: auto max-content;
      gap: 104px;

      @media (width <= 768px) {
        padding-inline: 0;
        grid-template-columns: 1fr;
        gap: calc((100 / 390) * 28 * 1vw);
      }

      .staff-info_wrap {
        color: #fff;
        margin-block-start: 46px;

        @media (width <= 768px) {
          grid-area: 2/1/3/2;
          margin-block-start: 0;
        }
        .catch {
          font-family: var(--yumin);
          font-size: 32px;
          font-weight: 600;
          line-height: 2;
          border-bottom: 1px solid #fff;
          padding-block-end: 113px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 22 * 1vw);
            padding-block-end: calc((100 / 390) * 17 * 1vw);
          }
        }
        .staff-info {
          display: block flex;
          align-items: center;
          gap: 24px;
          margin-block-start: 20px;

          @media (width <= 768px) {
            gap: calc((100 / 390) * 20 * 1vw);
            margin-block-start: calc((100 / 390) * 8 * 1vw);
          }
          .staff-name {
            font-family: var(--title);
            font-size: 48px;
            margin-block-start: 12px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 40 * 1vw);
            }
          }
          .info_wrap {
            line-height: 1.8;
            .staff-department {
              font-size: 15px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 13 * 1vw);
              }
            }
          }
        }
      }
      .picture {
        display: block flow;
        flex-shrink: 0;

        @media (width <= 768px) {
          & img {
            inline-size: calc((100 / 390) * 358 * 1vw);
          }
        }
      }
    }

    .breadcrumb {
      margin-block-start: 56px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 36 * 1vw);
      }
    }
  }
  /* =====================
    interview
  ===================== */
  .interview {
    position: relative;
    padding-block-start: 104px;
    padding-block-end: 110px;

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

    .question-list {
      counter-reset: number;
      .question {
        padding-inline: 40px;
        padding-block: 32px 31px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 24 * 1vw);
          padding-block: calc((100 / 390) * 22 * 1vw) calc((100 / 390) * 24 * 1vw);
        }
        & > dl {
          & > dt {
            position: relative;
            font-family: var(--yumin);
            font-size: 20px;
            font-weight: 600;
            border-bottom: solid 1px #b8b8b8;
            padding-block-end: 14px;
            display: block flex;
            gap: 16px;

            &::before {
              counter-increment: number;
              content: 'Q' counter(number);
              display: block flow;
              font-family: var(--yumin);
              font-size: 20px;
              font-weight: 600;
              color: var(--primary);
              flex-shrink: 0;
            }

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 17 * 1vw);
              padding-block-end: calc((100 / 390) * 8 * 1vw);
              gap: calc((100 / 390) * 8 * 1vw);
              line-height: 2;

              &::before {
                font-size: calc((100 / 390) * 17 * 1vw);
              }
            }
          }
          & > dd {
            margin-block-start: 21px;
            line-height: 2;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 14 * 1vw);
            }
          }
        }
        & + .question {
          margin-block-start: 48px;

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

    .interview-list {
      margin-block-start: 129px;

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