@charset "UTF-8";

/* =====================
  message
===================== */
.message {
  position: relative;
  z-index: 3;
  margin-block-start: 147px;

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

  /* deco */
  &::before {
    position: absolute;
    inset-block-start: -130px;
    inset-inline-end: 49.5vw;
    inline-size: 1128px;
    block-size: 668px;
    pointer-events: none;
    content: '';
    background-image: url('../img/recruit/message/illust01.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  @media (width < 1200px) {
    &::before {
      inset-inline-start: -400px;
      inset-inline-end: unset;
    }
  }

  @media (width <= 768px) {
    &::before {
      inset-block-start: -12vw;
      inset-inline-start: -21vw;
      inline-size: calc((100 / 390) * 320 * 1vw);
      block-size: unset;
      aspect-ratio: 1128 / 668;
      opacity: 0.7;
    }
  }

  /* ==== unit1 ==== */
  .unit[data-id='1'] {
    padding-block: 162px 222px;
    margin-inline-end: 40px;
    color: white;
    background: linear-gradient(140deg, #6e6ef8 -4.42%, #1818a8 95.8%);
    border-radius: 0 40px 0 0;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 48 * 1vw) 14vw;
      margin-inline-end: calc((100 / 390) * 20 * 1vw);
      border-radius: 0 calc((100 / 390) * 20 * 1vw) 0 0;
    }

    /* ==== item ==== */
    .item {
      position: relative;
      z-index: 2;
      inline-size: 780px;
      padding-inline-start: 66px;
      margin-inline: auto;

      @media (width <= 768px) {
        inline-size: 100%;
        padding-inline: calc((100 / 390) * 20 * 1vw);
      }

      /* ==== lead ==== */
      .lead {
        font-size: 44px;
        font-weight: 500;

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

      /* ==== body ==== */
      .body {
        margin-block-start: 38px;
        font-size: 18px;

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

        & p {
          line-height: 2.2;

          & + p {
            margin-block-start: 41px;

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

  /* ==== unit2 ==== */
  .unit[data-id='2'] {
    position: relative;
    z-index: 3;
    block-size: 430px;
    pointer-events: none;
    background-image: url('../img/recruit/message/01.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

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

    &::before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 13px;
      inline-size: 913px;
      block-size: 128px;
      content: '';
      background-image: url('../img/recruit/message/text.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      translate: 0 -50%;
    }

    @media (width <= 768px) {
      &::before {
        inset-inline-start: 2vw;
        inline-size: calc((100 / 390) * 320 * 1vw);
        block-size: unset;
        aspect-ratio: 913/ 128;
      }
    }

    &::after {
      position: absolute;
      inset-block-start: -598px;
      inset-inline-end: 0;
      inline-size: 471px;
      block-size: 725px;
      content: '';
      background-image: url('../img/recruit/message/illust02.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media (width <= 768px) {
      &::after {
        display: none;
      }
    }

    /* ==== picture ==== */
    .u-inner {
      position: relative;
      block-size: 560px;

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

    .picture {
      position: absolute;
      inset-block-start: 354px;
      inset-inline-start: 0;
      z-index: 2;

      @media (width > 768px) {
        inline-size: 410px;
        block-size: 560px;
      }

      @media (width <= 768px) {
        inset-block-start: 21vw;
        display: none;
        inline-size: unset;
        max-inline-size: unset;
        block-size: auto;
        aspect-ratio: 410 / 560;
      }
    }
  }

  /* ==== unit3 ==== */
  .unit[data-id='3'] {
    overflow: hidden;

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;
      grid-template-columns: 410px auto;
      gap: 80px;

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

      /* ==== text ==== */
      .text {
        padding-block: 75px;
        margin-inline: 0 calc(50% - 50cqi);

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

        /* ==== h2 ==== */
        & h2 {
          padding-block-end: 5px;
          font-family: var(--yugo);
          font-size: 25px;
          font-weight: 700;
          color: var(--text-primary);
          border-block-end: 1px dashed #8b8b8b;

          @media (width <= 768px) {
            padding-block-end: calc((100 / 390) * 2 * 1vw);
            font-size: calc((100 / 390) * 20 * 1vw);
            text-align: center;
          }
        }

        /* ==== p ==== */
        & p {
          padding-block-start: 44px;
          color: #000;

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

  .unit[data-id='4'] {
    max-inline-size: 1440px;
    margin-inline: auto;

    /* ==== picture ==== */
    .picture {
      @media (width > 768px) {
        display: block flow;
        inline-size: 413px;
        margin-block-start: -19px;
        margin-inline: auto 0;
      }
    }
  }
}

/* =====================
requirements
===================== */
.requirements {
  padding-block: 150px 157px;
  background: white;

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

  /* ==== list ==== */
  .list {
    display: block grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding-inline: 40px;
    margin-block-start: 51px;

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

    & > li {
      & h3 {
        display: block flex;
        gap: 10px;
        align-items: center;
        padding-block: 18px;
        padding-inline: 28px;
        margin-block-end: 30px;
        font-size: 20px;
        font-weight: bold;
        color: #111;
        background: #d1e0eb;
        border-radius: 10px;

        @media (width <= 768px) {
          gap: calc((100 / 390) * 6 * 1vw);
          padding-block: calc((100 / 390) * 7 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          margin-block-end: calc((100 / 390) * 20 * 1vw);
          font-size: calc((100 / 390) * 16 * 1vw);
          border-radius: calc((100 / 390) * 5 * 1vw);
        }

        &::before {
          display: block flow;
          inline-size: 18px;
          aspect-ratio: 18 / 16;
          content: '';
          background-image: url('../img/business/list.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }

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

      & .picture {
        margin-block-end: 30px;

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

      & h4 {
        color: #111;
      }

      & ul {
        margin-block-start: 0;

        & li {
          padding-left: 1em;
          margin-block-start: 0.5px;
          margin-inline-start: 5px;
          text-indent: -1em;

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

          &::before {
            content: '・';
          }
        }
      }
    }
  }

  /* ==== u-table ==== */
  .u-table {
    margin-block-start: 58px;

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

  /* ==== u-anchor ==== */
  .u-anchor {
    margin-block-start: 58px;
    margin-inline: auto;

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

/* =====================
    flow
  ===================== */
.flow {
  padding-block: 151px 196px;

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

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

  /* ==== ol ==== */
  & ol {
    display: grid;
    grid-auto-columns: auto auto 1fr auto;
    justify-content: flex-start;
    padding-inline: 103px;
    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: 30px;
      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(--primary);

      @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;
      translate: 8px 0;

      @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;
  }
}