@charset "UTF-8";

.main {
  .u-mv {
    &::before {
      background-image: url('../../img/recruit/interview/mv.png');
    }
  }

  /* =====================
    interview
  ===================== */
  .interviewlist {
    position: relative;
    padding-block: 136px 64px;
    background: linear-gradient(180deg, #001636 15.73%, #002f4e 57.86%, #0c7db5 100%);

    @media only screen and (width <=768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
    }

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      inline-size: 100%;
      min-block-size: 1632px;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/interview/interview_bg.png');
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
    }

    @media only screen and (width <=768px) {
      &::before {
        min-block-size: calc((100 / 390) * 1632 * 1vw);
      }
    }

    .u-inner {
      position: relative;

      &>.description {
        margin-block-start: 24px;
        font-size: 20px;
        color: #fff;
        text-align: center;

        @media only screen and (width <=768px) {
          margin-block-start: 0;
          font-size: calc((100 / 390) * 18 * 1vw);
        }
      }

      .list {
        position: relative;
        display: block grid;
        grid-template-columns: repeat(3, 402px);
        gap: 48px 37px;
        align-items: center;
        justify-content: space-between;
        margin-block-start: 80px;
        overflow: clip;

        @media only screen and (width <=768px) {
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 32 * 1vw) 0;
          margin-block-start: calc((100 / 390) * 64 * 1vw);
        }

        .item {
          background: white;

          :is(span[lang='en'], .year, .division p, .comment span) {
            inline-size: fit-content;
            background: var(--gradation);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .anchor {
            display: block grid;
            grid-template-rows: repeat(auto-fit, minmax(0, min-content));
            padding-block: 16px 24px;
            padding-inline: 16px;

            @media only screen and (width <=768px) {
              padding-block: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 24 * 1vw);
              padding-inline: calc((100 / 390) * 16 * 1vw);
            }

            span[lang='en'] {
              padding-inline: 16px;
              margin-block-start: 16px;
              font-family: var(--title);
              font-size: 32px;
              font-weight: 400;
              line-height: 1.5;
              word-break: break-all;

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

            .img {
              inline-size: 370px;
              block-size: 420px;
              overflow: hidden;

              @media only screen and (width <=768px) {
                inline-size: calc((100 / 390) * 322 * 1vw);
                block-size: auto;
              }

              img {
                transition: all 250ms ease 0s;

                @media (width <=768px) {
                  inline-size: 100%;
                  max-block-size: calc((100 / 390) * 320 * 1vw);
                  object-fit: cover;
                }
              }
            }

            .status {
              display: block grid;
              padding-inline: 16px;
              margin-block-start: -3px;
              font-family: 'Noto Sans JP', sans-serif;
              font-size: 16px;

              @media (width <=768px) {
                padding-inline: var(--nudge-1);
                margin-block-start: -1vw;
                font-size: calc((100 / 390) * 13 * 1vw);

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

              .division {
                display: block flex;
                gap: 8px;

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

                p {
                  display: block flex;
                  gap: 9px;

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

                p+p::before {
                  content: '/';
                }
              }
            }

            .comment {
              position: relative;
              padding-block-start: 15px;
              margin-block-start: 13px;
              margin-inline: 16px;
              font-size: 24px;
              border-block-start: 1px solid var(--main);
              border-image: var(--gradation) 1;

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

                br {
                  display: none;
                }
              }

              span {
                display: block flow;
                line-height: 1.5;
              }
            }

            @media (any-hover: hover) {
              &:hover {
                & img {
                  scale: 1.1;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* =====================
  個別ページ
===================== */
body[data-unique='recruit-interview-detail'] {
  .main {
    .mv {
      position: relative;
      inline-size: 100%;
      min-block-size: 600px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;

      @media only screen and (width <=768px) {
        min-block-size: calc((100 / 390) * 740 * 1vw);
        background-position: bottom right;
        background-size: auto calc((100 / 390) * 400 * 1vw);

        &::before {
          position: absolute;
          inset: 0;
          pointer-events: none;
          content: '';
          background: linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 50%, #fff 54%);
        }
      }

      &::after {
        position: absolute;
        inset: 0;
        pointer-events: none;
        content: '';
        background: linear-gradient(0deg, #001636 2.21%, rgb(0 22 54 / 30%) 15.38%, rgb(255 255 255 / 0%) 40.52%);
      }

      .u-inner {
        padding-block-start: 164px;
        padding-inline: 40px;

        @media only screen and (width <=768px) {
          padding-block-start: calc((100 / 390) * 80 * 1vw);
          padding-inline: calc((100 / 390) * 24 * 1vw);
        }

        .wrap {
          .catch {
            position: relative;
            font-size: 36px;
            font-weight: 600;
            line-height: 1.5;

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

            &::after {
              position: absolute;
              bottom: -22px;
              left: calc(-1 * (50vw - 50% + 40px));
              inline-size: calc(560px + (50vw - 50%));
              block-size: 1px;
              content: '';
              background: linear-gradient(to right, #001636, #0c7db5);
            }

            @media only screen and (width <=768px) {
              &::after {
                bottom: calc((100 / 390) * -22 * 1vw);
                left: calc((100 / 390) * -24 * 1vw);
                inline-size: calc((100 / 390) * 366 * 1vw);
              }
            }
          }

          .unit {
            margin-block-start: 82px;

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

            .name {
              margin-block-start: 8px;
              font-family: var(--title);
              font-size: 32px;

              @media only screen and (width <=768px) {
                margin-block-start: calc((100 / 390) * 8 * 1vw);
                font-size: calc((100 / 390) * 24 * 1vw);
              }
            }
          }
        }
      }
    }

    .interview {
      position: relative;
      padding-block: 160px 126px;
      background: linear-gradient(180deg, #001636 15.73%, #002f4e 57.86%, #0c7db5 100%);

      @media only screen and (width <=768px) {
        padding-block: calc((100 / 390) * 80 * 1vw);
      }

      /* =====================
        コンテンツ
      ===================== */
      .qa-list {
        display: grid;
        grid-template-columns: 540px 1fr 540px;
        padding-block: 99px 88px;
        padding-inline: 80px;
        counter-reset: number;
        background-color: #fff;

        @media only screen and (width <=768px) {
          grid-template-columns: 1fr;
          padding-block: calc((100 / 390) * 64 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
        }

        .unit {
          display: grid;
          grid-template-rows: auto auto;
          grid-template-columns: subgrid;
          grid-column: 1 / -1;

          @media only screen and (width <=768px) {
            display: block flow;
          }

          &+.unit {
            margin-block-start: 46px;

            @media only screen and (width <=768px) {
              margin-block-start: 0;
            }
          }
        }

        /* Q5のunitだけ1行 */
        .unit[data-layout='items-only']:has(.item[data-id='5']) {
          grid-template-rows: auto;
        }

        .unit[data-layout='img-first'] {
          .img {
            grid-row: 1 / 3;
            grid-column: 1;
            align-self: center;
          }

          .item {
            grid-column: 3;
          }
        }

        .unit[data-layout='item-first'] {
          .item {
            grid-column: 1;
          }

          .img {
            grid-row: 1 / 3;
            grid-column: 3;
            align-self: center;
          }
        }

        .unit[data-layout='items-only'] {
          .item:first-child {
            grid-column: 1;
          }

          .item:last-child {
            grid-column: 3;
          }
        }

        .unit[data-layout='item-first'] {
          .item {
            grid-column: 1;
          }

          .img {
            grid-row: 1 / 3;
            grid-column: 3;
            align-self: center;
          }
        }

        .img {
          /* 幅はグリッドトラックに任せる */
          inline-size: 100%;

          img {
            display: block;
            inline-size: 100%;
            block-size: auto;
          }
        }

        .item {
          display: grid;
          grid-template-rows: subgrid;
          grid-row: 1 / 3;
          padding-inline: 24px;

          @media only screen and (width <=768px) {
            padding-inline: 0;
          }
        }

        .question {
          position: relative;
          padding-block: 48px 8px;
          font-size: 24px;
          font-weight: 500;
          color: #001636;
          text-align: center;

          @media only screen and (width <=768px) {
            padding-block: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 8 * 1vw);
            font-size: calc((100 / 390) * 18 * 1vw);
          }

          &::before {
            display: grid;
            place-content: center;
            font-family: var(--title);
            font-size: 32px;
            font-weight: 500;
            line-height: 1;
            text-align: center;
            content: 'Q' counter(number);
            counter-increment: number;
          }

          @media only screen and (width <=768px) {
            &::before {
              font-size: calc((100 / 390) * 24 * 1vw);
            }
          }

          &::after {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            inline-size: 100%;
            block-size: 1px;
            content: '';
            background: linear-gradient(180deg, #001636 0%, #0c7db5 100%);
          }
        }

        .answer {
          padding-block: 32px 48px;
          padding-inline: 6px;

          @media only screen and (width <=768px) {
            padding-block: calc((100 / 390) * 24 * 1vw);
            padding-inline: calc((100 / 390) * 6 * 1vw);
          }
        }

        .unit[data-layout='img-first'] {
          .item {
            justify-self: end;
            inline-size: 520px;

            @media only screen and (width <=768px) {
              inline-size: unset;
            }
          }
        }

        .unit[data-layout='item-first'] {
          .item {
            justify-self: start;
            inline-size: 520px;

            @media only screen and (width <=768px) {
              inline-size: unset;
            }
          }
        }

        .unit[data-layout='items-only'] .item:first-child {
          justify-self: start;
          max-inline-size: 520px;

          @media only screen and (width <=768px) {
            max-inline-size: unset;
          }
        }

        .unit[data-layout='items-only'] .item:last-child {
          justify-self: end;
          max-inline-size: 520px;

          @media only screen and (width <=768px) {
            max-inline-size: unset;
          }
        }

        /* Q5のunit: 1行のみ */
        .unit[data-layout='item-full'] {
          grid-template-rows: auto;
        }

        /* Q5のitem */
        .unit[data-layout='item-full'] {
          .item {
            display: block;
            grid-row: 1;
            grid-column: 1 / -1;
            max-inline-size: 100%;
            padding-block: 48px;
            text-align: center;

            @media only screen and (width <=768px) {
              padding-block: calc((100 / 390) * 48 * 1vw);
              text-align: left;
            }

            .question {
              padding-block: 0 8px;
            }
          }
        }

        /* 全幅画像 */
        .img[data-id='3'] {
          grid-column: 1 / -1;
          inline-size: 100%;
          margin-block-start: -18px;

          @media only screen and (width <=768px) {
            margin-block-start: 0;
          }
        }
      }

      /* =====================
        list
      ===================== */

      .staff-list {
        padding-block: 160px 0;

        @media only screen and (width <=768px) {
          padding-block: calc((100 / 390) * 80 * 1vw) 0;
        }

        /* ==== list ==== */
        .list {
          position: relative;
          margin-block-start: 56px;
          overflow: clip;

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

          .item {
            display: block grid;
            grid-template-rows: repeat(auto-fit, minmax(0, min-content));
            padding-block: 16px 24px;
            padding-inline: 16px;
            background: white;

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

            :is(span[lang='en'], .year, .division p, .comment span) {
              inline-size: fit-content;
              background: var(--gradation);
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            span[lang='en'] {
              padding-inline: 16px;
              margin-block-start: 16px;
              font-family: var(--title);
              font-size: 32px;
              font-weight: 400;
              line-height: 1.5;
              word-break: break-all;

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

            .img {
              img {
                inline-size: 100%;
                object-fit: cover;
              }
            }

            img {
              @media (width <=768px) {
                inline-size: 100%;
                max-block-size: calc((100 / 390) * 320 * 1vw);
                object-fit: cover;
              }
            }

            .status {
              display: block grid;
              padding-inline: 16px;
              margin-block-start: -3px;
              font-family: 'Noto Sans JP', sans-serif;
              font-size: 16px;

              @media (width <=768px) {
                padding-inline: var(--nudge-1);
                margin-block-start: -1vw;
                font-size: calc((100 / 390) * 13 * 1vw);

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

              .division {
                display: block flex;
                gap: 8px;

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

                p {
                  display: block flex;
                  gap: 9px;

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

                p+p::before {
                  content: '/';
                }
              }
            }

            .comment {
              position: relative;
              padding-block-start: 15px;
              margin-block-start: 13px;
              margin-inline: 16px;
              font-size: 24px;
              border-block-start: 1px solid var(--main);
              border-image: var(--gradation) 1;

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

                br {
                  display: none;
                }
              }

              span {
                display: block flow;
                line-height: 1.5;
              }
            }
          }
        }

        .anchor {
          @media (any-hover: hover) {
            &:hover {
              .img {
                overflow: clip;

                & img {
                  scale: 1.1;
                  transition: all 250ms ease 0s;
                }
              }
            }
          }
        }

        .control {
          display: block flex;
          gap: 134px;
          justify-content: center;
          margin-block-start: 56px;

          @media only screen and (width <=768px) {
            flex-direction: column;
            gap: calc((100 / 390) * 32 * 1vw);
            align-items: center;
            margin-block-start: calc((100 / 390) * 56 * 1vw);

            .u-anchor {
              margin-inline: auto;
            }
          }
        }

        /* ==== swiper-controller ==== */
        .swiper-controller {
          position: relative;
          z-index: 2;
          display: block flex;
          gap: 32px;
          inline-size: fit-content;
          pointer-events: none;

          @media only screen and (width <=768px) {
            gap: calc((100 / 390) * 16 * 1vw);
          }

          :where(.next, .prev) {
            position: relative;
            z-index: 2;
            display: block grid;
            place-content: center;
            inline-size: 60px;
            block-size: 60px;
            color: white;
            pointer-events: auto;
            border: 1px solid #fff;
            border-radius: calc(infinity * 1px);

            @media only screen and (width <=768px) {
              inline-size: calc((100 / 390) * 40 * 1vw);
              block-size: calc((100 / 390) * 40 * 1vw);
            }

            &::after {
              inline-size: 18px;
              aspect-ratio: 1/1;
              content: '';
              background-color: currentcolor;
              mask-image: var(--icon-arrow);
              mask-repeat: no-repeat;
              mask-position: center;
              mask-size: contain;
            }

            @media only screen and (width <=768px) {
              &::after {
                inline-size: calc((100 / 390) * 16 * 1vw);
              }
            }
          }

          .prev::after {
            transform: rotate(-135deg);
          }

          .next::after {
            transform: rotate(45deg);
          }
        }
      }
    }

    &[data-id='01'] {
      .mv {
        background-image: url('../../img/recruit/interview/interview_part/01/mv.png');
      }
    }

    &[data-id='02'] {
      .mv {
        background-image: url('../../img/recruit/interview/interview_part/02/mv.png');
      }
    }

    &[data-id='03'] {
      .mv {
        background-image: url('../../img/recruit/interview/interview_part/03/mv.png');
      }
    }

    &[data-id='04'] {
      .mv {
        background-image: url('../../img/recruit/interview/interview_part/04/mv.png');
      }
    }

    &[data-id='05'] {
      .mv {
        background-image: url('../../img/recruit/interview/interview_part/05/mv.png');
      }
    }

    &[data-id='06'] {
      .mv {
        background-image: url('../../img/recruit/interview/interview_part/06/mv.png');
      }
    }
  }
}