@charset "UTF-8";

.main {
  /* =====================
    introduction
  ===================== */
  .introduction {
    position: relative;
    padding-block: 173px 83px;
    overflow: clip;

    @media (width <= 768px) {
      padding-block: 16vw 8vw;
      overflow: visible;
    }

    &::after {
      position: absolute;
      inset-block-start: 120px;
      inset-inline: 0;
      z-index: 1;
      inline-size: 100%;
      block-size: 450px;
      pointer-events: none;
      content: '';
      background-color: var(--bg);
    }

    @media (width <= 768px) {
      &::after {
        inset-block-start: 46vw;
        block-size: 76vw;
      }
    }

    /* ==== inner ==== */
    .u-inner {
      position: relative;
      z-index: 2;
      display: block grid;

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

      /* ==== picture ==== */
      .picture {
        margin-inline: auto 0;

        @media (width <= 768px) {
          grid-row: 2 / 3;
          margin-inline: auto;
        }
      }

      /* ==== lead ==== */
      .lead {
        position: absolute;
        inset-block-start: 51px;
        inset-inline-start: 0;
        display: block grid;
        font-family: var(--yumin);
        font-size: 40px;
        font-weight: 600;

        @media (width <= 768px) {
          position: relative;
          inset: unset;
          grid-row: 1 / 2;
          justify-content: center;
          font-size: calc((100 / 390) * 21 * 1vw);
          line-height: 1.4;
        }

        & span {
          padding-inline-start: calc(var(--_index) * 2em);
        }
      }

      /* ==== description ==== */
      .description {
        position: absolute;
        inset-block-start: 225px;
        inset-inline-start: 0;
        max-inline-size: 330px;

        @media (width <= 768px) {
          position: relative;
          inset: unset;
          grid-row: 3 / 4;
          align-self: flex-start;
          max-inline-size: 100%;
          padding-inline: calc((100 / 390) * 16 * 1vw);
        }
      }
    }
  }

  /* =====================
    message
  ===================== */
  .message {
    padding-block: 71px 160px;
    overflow: clip;

    @media (width <= 768px) {
      padding-block: 16vw;
    }

    /* ==== inner ==== */
    .u-inner {
      display: block grid;
      grid-auto-flow: column;
      gap: 0 85px;
      align-items: flex-start;
      margin-block-end: 67px;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: calc((100 / 390) * 16 * 1vw);
        margin-block-end: 0;
      }
    }

    /* ==== description ==== */
    .description {
      padding-block: 14px 0;
      margin-block: calc((1em - 1lh) / 2);

      @media (width <= 768px) {
        padding-block: 4vw 8vw;
      }
    }

    /* ==== picture ==== */
    .picture {
      display: block flex;
      gap: 10px;
      animation: marquee 180s linear 0s infinite normal none running;

      @media (width <= 768px) {
        gap: calc((100 / 390) * 10 * 1vw);
        block-size: calc((100 / 390) * 200 * 1vw);
        animation-duration: 30s;

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

      & picture {
        flex-shrink: 0;
      }
    }
  }

  /* =====================
    requirement
  ===================== */
  .requirement {
    padding-block: 150px 160px;
    background: var(--bg);

    @media (width <= 768px) {
      padding-block: 16vw 8vw;
    }

    /* ==== u-head ==== */
    .u-head {
      margin-block-end: 65px;

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

    /* ==== u-table ==== */
    .u-table {
      margin-block-end: 61px;

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

    /* ==== u-anchor ==== */
    .u-anchor {
      margin-inline: auto;
    }
  }

  /* =====================
    flow
  ===================== */
  .flow {
    padding-block: 150px 160px;

    @media (width <= 768px) {
      padding-block: 16vw 8vw;
    }

    /* ==== u-head ==== */
    .u-head {
      margin-block-end: 63px;
    }

    /* ==== ol ==== */
    & ol {
      display: grid;
      grid-auto-columns: auto auto 1fr auto;
      justify-content: flex-start;
      padding-inline: 40px;
      margin-block-end: 60px;
      margin-inline: auto;
      counter-reset: number;

      @media not all and (width >=768px) {
        grid-auto-columns: auto 1fr auto;
      }

      @media not all and (width >=768px) {
        padding-inline: calc((100 / 390) * 0 * 1vw);
        margin-block: 8vw;
      }

      & li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 4;
        gap: 32px;
        align-items: center;
        padding-block: 20px 18px;
        padding-right: 30px;
        border-top: 1px solid #d2d2d2;
        border-bottom: 1px solid transparent;

        @media not all and (width >=768px) {
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          grid-column: span 3;
          gap: 1.6vw 3.9vw;
          padding-block: 3.4vw;
          padding-right: 0;
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
        }

        &:last-child {
          border-block-end-color: #d2d2d2;
        }
      }

      & li::before {
        display: grid;
        place-content: center;
        inline-size: 130px;
        aspect-ratio: 1 / 1;
        padding-block-start: 22px;
        margin-inline-end: 0;
        font-family: var(--oswald);
        font-size: 45px;
        color: white;
        content: '0' counter(number);
        counter-increment: number;
        background-image: url('../img/recruit/flow/step.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

      @media not all and (width >=768px) {
        & li::before {
          display: flex;
          grid-row: 1 / 3;
          inline-size: calc((100 / 390) * 60 * 1vw);
          padding-block-start: 5.4vw;
          font-size: calc((100 / 390) * 18 * 1vw);
        }
      }

      & li::after {
        display: block;
        inline-size: 84px;
        aspect-ratio: 84 / 104;
        content: '';
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

      @media not all and (width >=768px) {
        & li::after {
          grid-row: 1 / 3;
          inline-size: calc((100 / 390) * 40 * 1vw);
        }
      }

      & li[data-id='1']::after {
        background-image: url('../img/recruit/flow/01.svg');
      }

      & li[data-id='2']::after {
        background-image: url('../img/recruit/flow/02.svg');
      }

      & li[data-id='3']::after {
        background-image: url('../img/recruit/flow/03.svg');
      }

      & li[data-id='4']::after {
        background-image: url('../img/recruit/flow/04.svg');
      }

      h3 {
        margin-right: 32px;
        font-size: 22px;
        font-weight: bold;
        color: var(--deepblue);

        @media not all and (width >=768px) {
          align-self: flex-start;
          margin-right: 0;
          font-size: calc((100 / 390) * 16 * 1vw);
          line-height: 1.6;
        }
      }

      p {
        font-size: 14px;

        @media not all and (width >=768px) {
          display: grid;
          grid-row: 2 / 2;
          grid-column: 2 / 2;
          font-size: calc((100 / 390) * 12 * 1vw);
          line-height: 1.79;
        }
      }
    }

    /* ==== u-anchor ==== */
    .u-anchor {
      margin-inline: auto;
    }
  }
}