@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/recruit/mv.png');

    @media (width <= 768px) {
      background-image: url('../img/recruit/mv_2x.png');
    }
  }
  /* =====================
    message
  ===================== */
  .message {
    position: relative;
    padding-block-start: 91px;
    padding-block-end: 120px;

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

    .u-inner {
      display: block flex;
      align-items: center;
      gap: 96px;

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

      .wrap {
        .content-catch {
          margin-block-start: 53px;

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

        .description {
          margin-block-start: 42px;

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

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

  /* =====================
    requirement
  ===================== */
  .requirement {
    position: relative;
    padding-block-start: 90px;
    padding-block-end: 127px;

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

    .u-table {
      margin-block-start: 62px;

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

  /* =====================
    interview
  ===================== */
  .interview {
    position: relative;
    padding-block-start: 91px;
    padding-block-end: 110px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 62 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }
    .u-inner {
      & > .description {
        margin-block-start: 35px;

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

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

        & > li[data-id='1'] {
          margin-block-start: 128px;
        }
        & > li[data-id='2'] {
          margin-block-start: 64px;
        }

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 40 * 1vw);
          & > li[data-id='1'] {
            margin-block-start: 0;
          }
          & > li[data-id='2'] {
            margin-block-start: 0;
          }
        }
      }
    }
  }

  /* =====================
    number
  ===================== */
  .number {
    position: relative;
    padding-block-start: 91px;
    padding-block-end: 128px;

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

    .number-list {
      display: block grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-block-start: 62px;

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

      .box {
        border: solid 1px #3f3f3f;
        background-color: #fff;
        padding-inline: 48px;
        padding-block: 31px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        inline-size: 400px;
        block-size: 237px;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 358 * 1vw);
          block-size: calc((100 / 390) * 188 * 1vw);
          padding-inline: calc((100 / 390) * 47 * 1vw);
          padding-block: calc((100 / 390) * 26 * 1vw);
        }

        .number-title {
          position: relative;
          font-size: 18px;
          font-weight: 500;
          display: block flex;
          align-items: center;
          justify-content: center;
          gap: 16px;
          &::before,
          &::after {
            content: '';
            display: block flow;
            inline-size: 56px;
            block-size: 1px;
            background-color: var(--primary);
          }

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 16 * 1vw);
            gap: calc((100 / 390) * 16 * 1vw);
            &::before,
            &::after {
              inline-size: calc((100 / 390) * 56 * 1vw);
            }
          }
        }
        .numbers {
          margin-block-start: 24px;
          text-align: right;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 14 * 1vw);
          }
          .num {
            font-family: var(--yumin);
            font-size: 80px;
            font-weight: 600;
            color: var(--primary);

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 64 * 1vw);
            }
          }
          .tani {
            display: inline-block;
            font-family: var(--sanserif);
            font-size: 28px;
            color: #222;
            margin-inline-start: 9px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 24 * 1vw);
              margin-inline-start: calc((100 / 390) * 9 * 1vw);
            }
          }
          .dot {
            font-size: 48px;

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

            &::before {
              content: '.';
              display: inline-block;
            }
          }
        }

        .gender-ratio {
          display: block flex;
          align-items: center;
          justify-content: end;
          gap: 19px;

          @media (width <= 768px) {
            gap: calc((100 / 390) * 16 * 1vw);
          }
          .ratio {
            font-family: var(--sanserif);
            font-size: 48px;
            margin-block-end: 20px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 48 * 1vw);
              margin-block-end: calc((100 / 390) * 20 * 1vw);
            }
          }
        }

        &[data-id='1'] {
          background-image: url('../img/recruit/number_01.png');
        }
        &[data-id='2'] {
          background-image: url('../img/recruit/number_02.png');
        }
        &[data-id='3'] {
          background-image: url('../img/recruit/number_03.png');
        }
        &[data-id='4'] {
          background-image: url('../img/recruit/number_04.png');
        }
        &[data-id='5'] {
          background-image: url('../img/recruit/number_05.png');
        }
        &[data-id='6'] {
          background-image: url('../img/recruit/number_06.png');
        }

        @media only screen and (width <= 768px) {
          &[data-id='1'] {
            background-image: url('../img/recruit/number_01_2x.png');
          }
          &[data-id='2'] {
            background-image: url('../img/recruit/number_02_2x.png');
          }
          &[data-id='3'] {
            background-image: url('../img/recruit/number_03_2x.png');
          }
          &[data-id='4'] {
            background-image: url('../img/recruit/number_04_2x.png');
          }
          &[data-id='5'] {
            background-image: url('../img/recruit/number_05_2x.png');
          }
          &[data-id='6'] {
            background-image: url('../img/recruit/number_06_2x.png');
          }
        }
      }
    }
  }

  /* =====================
    entry-btn
  ===================== */
  .entry-btn {
    position: relative;
    padding-block-start: 104px;
    padding-block-end: 128px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 72 * 1vw);
      padding-block-end: calc((100 / 390) * 80 * 1vw);
    }
    .btn {
      display: block flow;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/recruit/btn_bg.png');
      inline-size: 1280px;
      block-size: 286px;
      color: #fff;
      padding-inline: 80px;
      padding-block: 67px 70px;

      @media (width <= 768px) {
        background-image: url('../img/recruit/btn_bg_2x.png');
        inline-size: calc((100 / 390) * 358 * 1vw);
        block-size: calc((100 / 390) * 246 * 1vw);
        padding-inline: calc((100 / 390) * 24 * 1vw);
        padding-block: calc((100 / 390) * 48 * 1vw);
      }
      .description {
        grid-area: 2/1/3/2;
        margin-block-start: 20px;

        @media (width <= 768px) {
          grid-area: 2/1/3/3;
          margin-block-start: calc((100 / 390) * 15 * 1vw);
        }
      }
    }
    .u-arrow {
      display: block grid;
      grid-template-columns: auto max-content;
      align-items: center;
      &::before,
      &::after {
        grid-area: 1/2/3/3;
      }
      &::before {
        inline-size: 25px;
        right: 10px;
      }
      &::after {
        inline-size: 48px;
      }

      @media (width <= 768px) {
        grid-template-columns: auto calc((100 / 390) * 28 * 1vw);
        &::before,
        &::after {
          grid-area: 1/2/2/3;
        }
        &::before {
          inline-size: calc((100 / 390) * 12 * 1vw);
          right: calc((100 / 390) * 10 * 1vw);
        }
        &::after {
          inline-size: calc((100 / 390) * 28 * 1vw);
        }
      }
    }
  }
}