@charset "UTF-8";

/* =====================
  Interview
===================== */
body[data-id='interview'] {
  .main {
    /* =====================
    MV
  ===================== */
    .u-mv {
      &::after {
        background-image: url('../img/recruit/interview/mv.png');
      }
    }

    /* =====================
      Interview-list
    ===================== */
    .interview {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/recruit/interview/bg.png');
      inline-size: 100%;
      min-block-size: 1258px;
      padding-block: 120px;

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

      .interview-list_wrap {
        .interview-list {
          display: block grid;
          grid-template-columns: repeat(3, auto);
          gap: 56px 60px;
          justify-content: center;

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

          .item {
            .anchor {
              inline-size: 360px;
              block-size: 481px;

              @media only screen and (width <=768px) {
                inline-size: calc((100 / 390) * 320 * 1vw);
                block-size: unset;
                aspect-ratio: 360 / 481;
              }

              &::before {
                content: '';
                display: block flow;
                inline-size: 50px;
                aspect-ratio: 1/1;
                border-radius: 50rem;
                border: solid 1px #102647;
                background-color: rgba(255, 255, 255, 0.6);
                position: absolute;
                bottom: 24px;
                right: 24px;
              }

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

              &::after {
                content: '';
                inline-size: 50px;
                aspect-ratio: 50 / 8;
                mask-repeat: no-repeat;
                mask-size: contain;
                mask-position: center;
                mask-image: var(--icon-arrow);
                background-color: var(--primary);
                flex-shrink: 0;
                position: absolute;
                bottom: 49px;
                right: 43px;
              }

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

/* =====================
  Interview 個別
===================== */
body[data-id='interview_detail'] {
  .main {
    /* ==== MV ==== */
    .mv {
      position: relative;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      inline-size: 100%;
      min-block-size: 500px;
      margin-block-start: 90px;

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

      .u-inner {
        position: relative;
        min-block-size: 500px;
        padding-block-start: 80px;

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

        .img {
          inline-size: 400px;
          block-size: 460px;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 3;

          @media only screen and (width <=768px) {
            inline-size: calc((100 / 390) * 200 * 1vw);
            block-size: unset;
            aspect-ratio: 400/460;
          }
        }

        .wrap {
          inline-size: 930px;
          background: rgba(255, 255, 255, 0.8);
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(5px);
          margin-inline: auto 40px;
          padding-inline: 56px;
          padding-block: 48px 46px;

          @media only screen and (width <=768px) {
            -webkit-backdrop-filter: blur(calc((100 / 390) * 10 * 1vw));
            backdrop-filter: blur(calc((100 / 390) * 5 * 1vw));
            inline-size: 100%;
            padding-inline: calc((100 / 390) * 24 * 1vw);
            padding-block: calc((100 / 390) * 40 * 1vw);
            margin-inline: auto;
          }

          .catch {
            font-family: var(--serif);
            font-size: 32px;
            font-weight: 500;
            line-height: 1.6;
            color: #102647;

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

          .info {
            margin-block-start: 24px;
            border-block-start: 1px solid #102647;
            padding-block-start: 25px;
            display: block grid;
            grid-template-columns: repeat(2, max-content);
            justify-content: end;
            column-gap: 8px;

            @media only screen and (width <=768px) {
              margin-block-start: calc((100 / 390) * 24 * 1vw);
              padding-block-start: calc((100 / 390) * 24 * 1vw);
              grid-template-columns: 1fr;
              justify-items: end;
              column-gap: unset;
            }

            .name {
              grid-area: 1/1/3/2;
              background: linear-gradient(90deg, #61b14b 0%, #288ba2 100%);
              font-family: var(--serif);
              font-size: 56px;
              font-weight: bold;
              line-height: 1.1;
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;

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

            .busyo {
              grid-area: 1/2/2/3;

              @media only screen and (width <=768px) {
                grid-area: 2/1/3/2;
                margin-block-start: 1em;
              }

              & span {
                margin-inline-start: 1em;
              }
            }

            .nyusya {
              grid-area: 2/2/3/3;

              @media only screen and (width <=768px) {
                grid-area: 3/1/4/2;
              }

              & span {
                margin-inline-start: 1em;
              }
            }
          }
        }
      }

      .breadcrumb {
        position: absolute;
        bottom: 22px;
        right: 0;

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

    /* ==== Interview ==== */
    .interview {
      position: relative;
      padding-block-start: 120px;
      padding-block-end: 120px;
      background-color: #f6f6f6;

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

      .u-inner {
        .qa_list {
          display: block grid;
          grid-template-columns: repeat(2, 1fr);
          justify-content: center;
          gap: 32px;
          padding-inline: 40px;

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

          .item {
            position: relative;
            background-color: #fff;
            padding-inline: 48px;
            padding-block: 40px;

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

            .question {
              position: relative;
              inline-size: fit-content;
              font-size: 18px;
              font-weight: 600;
              background: linear-gradient(90deg, #61b14b 0%, #288ba2 100%);
              color: #fff;
              border-radius: 50rem;
              padding-inline: 40px;
              padding-block: 8px;

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

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

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

    /* ==== List ==== */
    .interview_list {
      position: relative;
      padding-block-start: 80px;
      padding-block-end: 120px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/recruit/interview/list_bg.png');
      inline-size: 100%;
      min-block-size: 720px;
      overflow: hidden;

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

      .wrap {
        display: block grid;
        grid-template-columns: 233px auto;
        align-items: start;
        column-gap: 88px;
        padding-inline: 40px 0;

        @media only screen and (width <=768px) {
          grid-template-columns: 1fr;
          padding-inline: 0;
          column-gap: unset;
        }

        .u-hgroup {
          grid-area: 1/1/2/2;
          margin-block-start: 163px;

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

        .interview-controller {
          grid-area: 2/1/3/2;
          margin-block-start: 117px;

          @media only screen and (width <=768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 48 * 1vw);
          }

          .controll-btn {
            gap: 40px;

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

        .interview-list_wrap {
          grid-area: 1/2/3/3;

          @media only screen and (width <=768px) {
            grid-area: 2/1/3/2;
          }
        }
      }

      /* ==== interview-list ==== */
      .interview-list_wrap {
        margin-block-start: 40px;
        clip-path: inset(0 -50vw 0 0);

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

        .interview-list {
          align-items: center;
        }

        .swiper-slide {
          block-size: 401px !important;

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

          a {
            width: inherit;
            block-size: inherit;
            display: block grid;
          }
        }

        .swiper-slide-active {
          @media (width > 768px) {
            width: 360px !important;
            block-size: 481px !important;
          }

          a {
            width: inherit;
            block-size: inherit;
            display: block grid;
          }
        }

        .interview-list {
          .item {
            position: relative;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center bottom;
          }
        }
      }
    }

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

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

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

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

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