@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .mv {
    position: relative;
    margin-block-start: 84px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/interview/mv_bg.png');
    inline-size: calc(100% - 80px);
    min-block-size: 480px;
    margin-inline-start: 80px;
    border-radius: 20px 0 0 20px;
    overflow: hidden;

    @media (width <= 768px) {
      background-size: 100% auto;
      background-position: top center;
      background-image: url('../img/recruit/interview/mv_bg_2x.png');
      min-block-size: calc((100 / 390) * 366 * 1vw);
      margin-block-start: calc((100 / 390) * 80 * 1vw);
      margin-inline-start: calc((100 / 390) * 16 * 1vw);
      inline-size: calc(100% - calc((100 / 390) * 16 * 1vw));
      border-radius: calc((100 / 390) * 10 * 1vw) 0 0 calc((100 / 390) * 10 * 1vw);
    }

    .u-h1-title {
      position: absolute;
      top: 64px;
      left: 80px;
      z-index: 5;

      @media (width <= 768px) {
        top: calc((100 / 390) * 26 * 1vw);
        left: calc((100 / 390) * 32 * 1vw);
      }

      & span[lang='en'] {
        font-family: var(--title);
        font-size: 24px;
        color: #fff;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 20 * 1vw);
        }
      }
      .title {
        font-family: var(--yumin);
        font-size: 34px;
        font-weight: 600;
        letter-spacing: 1.02px;
        color: #fff;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 24 * 1vw);
          letter-spacing: calc((100 / 390) * 0.72 * 1vw);
        }
      }
    }
    .u-inner {
      position: relative;
      padding-inline: 290px 80px;
      min-block-size: 480px;
      display: block flex;

      @media (width <= 768px) {
        flex-direction: column;
        padding-inline: 0;
        gap: calc((100 / 390) * 20 * 1vw);
      }
      .staff-image {
        display: block flow;
        flex-shrink: 0;

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

      .staff-info {
        position: relative;
        padding-block-start: 118px;

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

        .staff-description {
          font-family: var(--yumin);
          font-size: 32px;
          font-weight: 600;
          color: #fff;
          line-height: 2;

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

        .staff-name_wrap {
          display: block flex;
          align-items: baseline;
          gap: 16px;
          border-left: 1px solid #fff;
          padding-inline-start: 24px;
          margin-block-start: 26px;

          @media (width <= 768px) {
            gap: calc((100 / 390) * 12 * 1vw);
            padding-inline-start: calc((100 / 390) * 16 * 1vw);
            margin-block-start: calc((100 / 390) * 6 * 1vw);
            color: #1b57af;
            border-left: 1px solid #1b57af;
          }

          .staff-name {
            font-family: var(--title);
            font-size: 56px;
            font-weight: 500;
            line-height: 1.2;
            color: #fff;

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

          .staff-position {
            color: #fff;

            @media (width <= 768px) {
              color: #1b57af;
            }
          }
        }
      }
    }
    .breadcrumb {
      position: absolute;
      right: 0;
      bottom: 40px;

      @media (width <= 768px) {
        bottom: unset;
        top: calc((100 / 390) * 316 * 1vw);
      }
    }
  }

  /* =====================
    インタビュー
  ===================== */
  .interview {
    padding-block-start: 104px;

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

    .qa_wrap {
      border-radius: 20px;
      padding-block-end: 80px;
      padding-inline: 64px 80px;
      display: block flex;
      gap: 60px;

      @media (width <= 768px) {
        flex-direction: column;
        padding-block-end: calc((100 / 390) * 40 * 1vw);
        padding-inline: calc((100 / 390) * 24 * 1vw);
        gap: calc((100 / 390) * 40 * 1vw);
      }
    }

    .picture {
      flex-shrink: 0;
      position: sticky;
      top: 0;
      left: 0;
      inline-size: 408px;
      block-size: 100%;
      padding-block-start: 80px;

      @media (width <= 768px) {
        position: relative;
        top: unset;
        left: unset;
        inline-size: calc((100 / 390) * 294 * 1vw);
        padding-block-start: calc((100 / 390) * 39 * 1vw);

        & img {
          inline-size: calc((100 / 390) * 294 * 1vw);
        }
      }
    }

    .qa_list {
      margin-block-start: 80px;

      @media (width <= 768px) {
        margin-block-start: 0;
      }
      & > li {
        background-color: #fff;
        border-radius: 20px;
        padding-inline: 64px;
        padding-block: 40px 57px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 24 * 1vw);
          padding-block: calc((100 / 390) * 26 * 1vw) calc((100 / 390) * 25 * 1vw);
          border-radius: calc((100 / 390) * 10 * 1vw);
        }

        & + li {
          margin-block-start: 48px;

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

        .question {
          font-family: var(--yumin);
          font-size: 24px;
          font-weight: 600;
          color: #1b57af;
          display: block flex;
          align-items: baseline;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 18 * 1vw);
            flex-direction: column;
            gap: calc((100 / 390) * 7 * 1vw);
          }

          .q-no {
            display: block flow;
            font-family: var(--title);
            font-size: 36px;
            font-weight: 500;
            margin-inline-end: 16px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 26 * 1vw);
              margin-inline-end: 0;
              line-height: 1;
            }
          }
        }

        .answer {
          margin-block-start: 20px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 8 * 1vw);
          }
        }
      }
    }
  }
  .list-swiper_wrap {
    position: relative;
    padding-inline: 120px;

    @media (width <= 768px) {
      display: none;
    }
    .swiper {
      margin-block-start: 118px;

      .staff-name_wrap {
        display: flex;
        align-items: baseline;
        gap: 16px;
        padding-inline-start: 16px;

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

        .staff-name {
          font-family: var(--title);
          font-size: 32px;
          font-weight: 500;
          color: #549fd6;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 28 * 1vw);
            line-height: 1.4;
          }
        }
        .staff-position {
          font-size: 15px;
          color: #141414;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 13 * 1vw);
          }
        }
      }
    }
    /* ナビゲーションボタン */
    .controll-btn_wrap {
      position: absolute;
      inline-size: 100%;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: block flex;
      justify-content: space-between;
      z-index: 12;

      @media (width <= 768px) {
        justify-content: end;
        top: calc((100 / 390) * 266 * 1vw);
        right: calc((100 / 390) * 72 * 1vw);
        gap: calc((100 / 390) * 12 * 1vw);
      }
      .controll-btn {
        position: relative;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(to bottom, #549fd6 0%, #1b57af 100%);
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: block grid;
        place-content: center;
        left: unset;
        right: unset;
        &:after {
          content: '';
          display: block flow;
          inline-size: 24px;
          block-size: 14px;
          background-image: url('../img/_common/btn_arrow.svg');
        }
        &.swiper-button-prev {
          background: linear-gradient(to bottom, #1b57af 0%, #549fd6 100%);
          &:after {
            transform: scale(-1);
          }
        }

        @media (width <= 768px) {
          width: calc((100 / 390) * 50 * 1vw);
          height: calc((100 / 390) * 50 * 1vw);
          &:after {
            inline-size: calc((100 / 390) * 24 * 1vw);
            block-size: calc((100 / 390) * 14 * 1vw);
          }
        }
      }
    }
  }
}