@charset "UTF-8";

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

  /* =====================
      message
    ===================== */
  .message {
    position: relative;
    padding-block-start: 222px;
    padding-block-end: 251px;

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

    .wrap {
      position: relative;
      display: block flex;
      align-items: start;
      justify-content: space-between;
      gap: 49px;

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

      &::before {
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/recruit/message_title.svg');
        inline-size: 401px;
        block-size: 277px;
        position: absolute;
        top: -174px;
        left: -56px;
        pointer-events: none;
      }

      @media only screen and (width <= 768px) {
        &::before {
          inline-size: calc((100 / 390) * 230 * 1vw);
          block-size: auto;
          aspect-ratio: 401/277;
          top: calc((100 / 390) * -99 * 1vw);
          left: calc((100 / 390) * 0 * 1vw);
        }
      }

      .img {
        flex-shrink: 0;
        display: block flow;

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

      .unit {
        position: relative;

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

        .catch {
          font-family: var(--serif);
          font-size: 38px;
          font-weight: 600;
          line-height: 1.4;

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

        .description {
          margin-block-start: 2.5em;
        }
      }
    }
  }

  /* =====================
      jobs
    ===================== */
  .jobs {
    padding-block: 0 52px;

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

    &::after {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: 100% 200px;
      background-position: center;
      background-image: url('../img/_common/section_wave.svg');
      inline-size: 100%;
      min-block-size: 200px;
      position: absolute;
      bottom: -200px;
      left: 0;
      transform: scale(-1);
      pointer-events: none;
    }

    @media only screen and (width <= 768px) {
      &::after {
        background-size: 100% calc((100 / 390) * 54 * 1vw);
        background-position: center;
        background-image: url('../img/_common/section_wave_2x.svg');
        inline-size: 100%;
        min-block-size: calc((100 / 390) * 54 * 1vw);
        position: absolute;
        bottom: calc((100 / 390) * -54 * 1vw);
      }
    }

    .wrap {
      margin-block-start: 50px;
      margin-inline: 40px;

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

    .description {
      margin-block: 80px;
      text-align: center;

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

    .u-anchor {
      margin-block-start: 60px;

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

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

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

    .flow_list {
      margin-inline: 40px;
      margin-block-start: 51px;
      display: block grid;
      counter-reset: number;

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

      .item {
        position: relative;
        display: block grid;
        grid-template-columns: 130px 150px 1fr 130px;
        align-items: center;
        padding-block: 19.5px;
        padding-inline: 0 48px;
        gap: 30px;
        border-block-start: 1px solid #d2d2d2;

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

        .no {
          position: relative;
          inline-size: 130px;
          aspect-ratio: 1/1;
          background-color: var(--primary);
          font-family: var(--title);
          font-weight: 500;
          letter-spacing: 2.4px;
          color: #fff;
          border-radius: 10px;
          text-align: center;
          display: block grid;
          grid-template-rows: repeat(2, max-content);
          align-items: center;
          place-content: center;

          @media only screen and (width <= 768px) {
            grid-area: 1/1/2/2;
            inline-size: calc((100 / 390) * 100 * 1vw);
            letter-spacing: calc((100 / 390) * 2.4 * 1vw);
            border-radius: calc((100 / 390) * 10 * 1vw);
            line-height: 1;
            row-gap: calc((100 / 390) * 4 * 1vw);
          }

          &::after {
            content: '0' counter(number);
            counter-increment: number;
            display: block flow;
            font-family: var(--number);
            font-size: 45px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: unset;
            text-align: center;
          }

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

        .title {
          font-size: 22px;
          font-weight: bold;
          color: var(--primary);

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

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

        .img {
          @media only screen and (width <=768px) {
            inline-size: calc((100 / 390) * 100 * 1vw);
            grid-area: 1/3/2/4;
            margin-inline: auto;
          }
        }

        &:last-child {
          border-block-end: 1px solid #d2d2d2;
        }
      }
    }

    .u-anchor {
      margin-block-start: 60px;

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