@charset "UTF-8";

main .contents {
  padding-block: 0 159px;

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

  /* ==== .u-inner ==== */
  .u-inner {
    @media (width <= 768px) {
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }

  /* =====================
    introduction
  ===================== */
  .wrapper:has(section[data-url='introduction']) {
    padding-block: 0;
    background: linear-gradient(0deg, #e6fcff 0%, #bdeaf1 85.88%);
  }

  section[data-url='introduction'] {
    inline-size: 1300px;
    block-size: 512px;
    padding-block-start: 91px;
    margin-inline: auto;
    background-image: url('../img/recruit/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    @media (width > 768px) {
      text-align: center;
    }

    @media (width <= 768px) {
      inline-size: 100%;
      block-size: calc((100 / 750) * 1464 * 1vw);
      padding-block-start: 12.8vw;
      padding-inline-start: 8.2vw;
      background-image: url('../img/recruit/bg_sp.webp');
    }

    & p {
      margin-block: calc((1em - 1lh) / 2);

      @media (width > 768px) {
        & + p {
          margin-block-start: 7px;
        }
      }
    }

    & .lead {
      font-size: 36px;
      font-weight: 600;

      @media (width <= 768px) {
        inline-size: calc((100 / 750) * 336 * 1vw);
        font-size: calc((100 / 750) * 48 * 1vw);
        line-height: 1.6;
      }
    }

    & .body {
      margin-block-start: 47px;

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

      & [data-id='1'] {
        @media (width <= 768px) {
          inline-size: calc((100 / 750) * 332 * 1vw);
        }
      }

      & [data-id='2'] {
        @media (width <= 768px) {
          inline-size: calc((100 / 750) * 497 * 1vw);
          margin-block-start: 4.1vw;
        }
      }

      & [data-id='3'] {
        margin-block-start: 36px;

        @media (width <= 768px) {
          inline-size: calc((100 / 750) * 644 * 1vw);
          padding-inline-start: calc((100 / 750) * 94 * 1vw);
          margin-block-start: 4vw;
        }
      }

      & [data-id='4'] {
        @media (width <= 768px) {
          inline-size: calc((100 / 750) * 640 * 1vw);
          padding-inline-start: calc((100 / 750) * 300 * 1vw);
          margin-block-start: 3.9vw;
        }
      }

      & [data-id='5'] {
        @media (width > 768px) {
          display: contents;
          display: inline;
        }

        @media (width <= 768px) {
          display: block;
          inline-size: calc((100 / 750) * 344 * 1vw);
          padding-left: 7.5vw;
          margin-block-start: 2.4vw;
        }
      }

      & [data-id='6'] {
        @media (width <= 768px) {
          inline-size: calc((100 / 750) * 656 * 1vw);
          padding-inline-start: 59vw;
          margin-block-start: 4.4vw;
        }
      }
    }
  }

  /* =====================
    requirement
  ===================== */
  section[data-url='requirement'] {
    padding-block: 105px 128px;
    background: #e6fcff;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 80 * 1vw) calc((100 / 750) * 109 * 1vw);
    }

    /* ==== inner ==== */
    .inner {
      padding-block: 74px 78px;
      padding-inline: 80px;
      background: white;
      border-radius: 40px;

      @media (width <= 768px) {
        padding-block: 10.4vw;
        padding-inline: 5.4vw;
        border-radius: calc((100 / 750) * 40 * 1vw);

        .u-title {
          [lang='en'] {
            font-size: calc((100 / 750) * 72 * 1vw);
          }

          .line {
            translate: 0 -2vw;
          }

          .title {
            margin-block-start: calc((100 / 750) * -3 * 1vw);
          }
        }
      }

      /* ==== table ==== */
      & table {
        inline-size: 960px;
        margin-block-start: 87px;
        margin-inline: auto;

        @media (width <= 768px) {
          inline-size: 100%;
          margin-block-start: calc((100 / 750) * 82 * 1vw);
        }

        & :where(th, td) {
          padding-block: 39px;
          padding-inline: 40px;
          vertical-align: middle;
          border-block: 1px solid #d9d9d9;

          @media (width <= 768px) {
            padding-block: calc((100 / 750) * 39 * 1vw);
            padding-inline: calc((100 / 750) * 24 * 1vw);
          }
        }

        & th {
          inline-size: 280px;
          font-weight: 700;

          @media (width <= 768px) {
            inline-size: 26vw;
          }
        }

        & td {
          font-weight: 400;
        }
      }
    }
  }

  /* =====================
    flow
  ===================== */
  section[data-url='flow'] {
    padding-block: 77px 0;
    background: linear-gradient(180deg, #e6fcff 0%, #bdeaf1 85.88%);

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 40 * 1vw) 0;
    }

    /* ==== inner ==== */
    .u-inner {
      /* ==== flow-list ==== */
      .flow-list {
        display: grid;
        grid-auto-columns: auto auto 1fr auto;
        justify-content: flex-start;
        padding-inline: 40px;
        margin-block: 93px 60px;
        margin-inline: auto;
        counter-reset: number;

        @media not all and (width >=768px) {
          grid-auto-columns: auto 1fr auto;
          padding-inline: calc((100 / 750) * 0 * 1vw);
          margin-block: calc((100 / 750) * 95 * 1vw) 7.7vw;
        }

        & li {
          position: relative;
          display: grid;
          grid-template-columns: subgrid;
          grid-column: span 3;
          gap: 34px 59px;
          align-items: center;
          padding-block: 30px;
          padding-inline: 30px;
          margin-block: calc((1em - 1lh) / 2);
          background: white;
          border-radius: calc(infinity * 1px);

          @media not all and (width >=768px) {
            gap: 1.6vw 4.7vw;
            padding-block: 7.3vw 5.2vw;
            padding-inline: 5.3vw;
            padding-right: 0;
            border-radius: calc((100 / 750) * 100 * 1vw);
          }

          & + li {
            margin-block-start: 94px;

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

        & li::before {
          display: flex;
          grid-row: 1 / 3;
          justify-content: center;
          inline-size: 140px;
          aspect-ratio: 1 / 1;
          padding-block-start: 36px;
          margin-inline-end: 0;
          font-family: var(--lalezar);
          font-size: 64px;
          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 {
            grid-row: 1 / 4;
            grid-column: 1 / 2;
            inline-size: calc((100 / 750) * 160 * 1vw);
            padding-block-start: 6.4vw;
            font-size: calc((100 / 750) * 64 * 1vw);
          }
        }

        & li::after {
          display: block;
          grid-row: 1 / 3;
          inline-size: 155px;
          block-size: 131px;
          content: '';
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          translate: 5px 0;
        }

        @media (width <= 768px) {
          & li::after {
            grid-row: 3 / 3;
            grid-column: 2 / 3;
            inline-size: calc((100 / 750) * 203 * 1vw);
            block-size: calc((100 / 750) * 151 * 1vw);
            margin-inline: auto;
            translate: -1.6vw -0.9vw;
          }
        }

        & 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 {
          align-self: flex-end;
          margin-block: calc((1em - 1lh) / 2);
          font-size: 32px;
          font-weight: bold;
          color: var(--primary);

          @media not all and (width >=768px) {
            grid-row: 1 / 2;
            grid-column: 2 / 3;
            align-self: flex-start;
            font-size: calc((100 / 750) * 36 * 1vw);
            line-height: 1.6;
          }
        }

        p {
          display: grid;
          grid-row: 2 / 2;
          align-self: flex-start;
          margin-block: calc((1em - 1lh) / 2);
          translate: 0 -11px;

          @media not all and (width >=768px) {
            grid-row: 2 / 3;
            grid-column: 2 / 3;
            padding-inline-end: 2vw;
            margin-block-start: calc((100 / 750) * 7 * 1vw);
            line-height: 1.79;
            translate: 0 0;
          }
        }

        .arrow {
          position: absolute;
          inset-block-end: -64px;
          inset-inline-start: 50%;
          inline-size: 60px;
          block-size: 30px;
          background: var(--secondary);
          clip-path: polygon(0 0, 100% 0%, 50% 100%);
          translate: -50% 0;

          @media (width <= 768px) {
            inset-block-end: calc((100 / 750) * 77 * -1 * 1vw);
            inline-size: calc((100 / 750) * 60 * 1vw);
            block-size: calc((100 / 750) * 30 * 1vw);
          }
        }
      }

      /* ==== anchor ==== */
      .anchor {
        position: relative;
        z-index: 2;
        margin-block-start: 72px;

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

        .u-anchor {
          margin-inline: auto;

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

        &::after {
          position: absolute;
          inset-block-start: -124px;
          inset-inline-end: 10px;
          inline-size: 248px;
          block-size: 350px;
          content: '';
          background-image: url('../img/recruit/flow/illust.webp');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }

        @media (width <= 768px) {
          &::after {
            inset: unset;
            inset-block-start: -25.4vw;
            inset-inline-start: -4.1vw;
            inline-size: calc((100 / 750) * 301 * 1vw);
            block-size: calc((100 / 750) * 427 * 1vw);
            content: '';
            background-image: url('../img/recruit/flow/illust_sp.webp');
          }
        }
      }
    }
  }
}