@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    &::before {
      background-image: url('../img/recruit/mv.png');
    }
    @media (width <= 768px) {
      &::before {
        background-image: url('../img/recruit/mv_2x.png');
      }
    }
  }
  /* =====================
    求職者へのメッセージ
  ===================== */
  .message {
    position: relative;
    padding-block: 101px 104px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 94 * 1vw) calc((100 / 750) * 106 * 1vw);
    }
    .inner {
      inline-size: 1300px;
      padding-inline: 0 93px;
      margin-inline: auto;
      display: block grid;
      grid-template-columns: max-content auto;
      column-gap: 60px;

      @media (width <= 768px) {
        inline-size: 100%;
        grid-template-columns: 1fr;
        column-gap: 0;
        padding-inline: calc((100 / 750) * 40 * 1vw);
        row-gap: calc((100 / 750) * 47 * 1vw);
      }
      .picture {
        grid-column: 1/2;
        grid-row: 1/3;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 1/2;
          margin-inline: calc(50% - 50vw) 0;
          & > img {
            width: calc((100 / 750) * 710 * 1vw);
          }
        }
      }
      .u-h2-title {
        gap: 0;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 2/3;
          gap: calc((100 / 750) * 20 * 1vw);
        }
      }
      .description {
        margin-block-start: 20px;
        grid-column: 2/3;
        grid-row: 2/3;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 750) * 23 * 1vw);
          grid-column: 1/2;
          grid-row: 3/4;
        }
      }
    }
  }

  /* =====================
    募集要項
  ===================== */
  .requirements {
    position: relative;
    padding-block: 101px 105px;
    background-color: #fffde8;

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

    .inner {
      inline-size: 1300px;
      margin-inline: auto;
      padding-inline: 170px;

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

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

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

        .tr {
          dd {
            & div {
              & span {
                display: block flow;
              }
              & + div {
                margin-block-start: 29px;

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

  /* =====================
    採用の流れ
  ===================== */
  .flow {
    position: relative;
    padding-block: 104px 104px;

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

    .flow-list {
      display: block grid;
      grid-template-columns: repeat(4, 220px);
      column-gap: 80px;
      margin-block-start: 160px;
      counter-reset: number 0;

      @media (width <= 768px) {
        grid-template-columns: auto;
        margin-block-start: calc((100 / 750) * 213 * 1vw);
        padding-inline: calc((100 / 750) * 40 * 1vw);
        column-gap: 0;
      }

      & > li {
        position: relative;
        background-color: #d9d9d9;
        display: block grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        justify-items: center;
        padding-inline: 30px;
        padding-block: 77px 22px;

        &::before {
          content: 'STEP';
          display: block flow;
          transform: rotate(-32.5deg);
          font-family: var(--title);
          font-size: 32px;
          font-weight: bold;
          font-style: italic;
          text-align: left;
          color: #ffed00;
          position: absolute;
          top: -85px;
          left: 41px;
        }
        &::after {
          counter-increment: number 1;
          content: counter(number);
          display: block grid;
          place-content: center;
          background-color: #ffed00;
          inline-size: 74px;
          aspect-ratio: 1/1;
          border-radius: 50rem;
          font-family: var(--title);
          font-style: italic;
          font-size: 36px;
          font-weight: bold;
          text-align: center;
          color: #4d4d4d;
          position: absolute;
          top: -42px;
          left: 50%;
          transform: translateX(-50%);
        }

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

          &::before {
            font-size: calc((100 / 750) * 48 * 1vw);
            top: calc((100 / 750) * -137 * 1vw);
            left: calc((100 / 750) * 171 * 1vw);
          }
          &::after {
            inline-size: calc((100 / 750) * 160 * 1vw);
            font-size: calc((100 / 750) * 56 * 1vw);
            top: calc((100 / 750) * -80 * 1vw);
          }
          & + li {
            margin-block-start: calc((100 / 750) * 245 * 1vw);
          }
        }

        .title {
          font-size: 32px;
          font-weight: bold;

          @media (width <= 768px) {
            font-size: calc((100 / 750) * 40 * 1vw);
          }
        }
        .description {
          position: relative;
          margin-block-start: 20px;

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

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

            img {
              width: calc((100 / 750) * 200 * 1vw);
            }
          }
        }
        &:not(:first-child) {
          .description {
            &::after {
              content: '';
              display: block flow;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../img/_common/polygon.svg');
              inline-size: 30px;
              block-size: 52px;
              position: absolute;
              top: 41%;
              left: -80px;
              transform: translateY(-50%);
            }
          }
          @media (width <= 768px) {
            .description {
              &::after {
                inline-size: calc((100 / 750) * 48 * 1vw);
                block-size: calc((100 / 750) * 82 * 1vw);
                top: calc((100 / 750) * -425 * 1vw);
                left: 50%;
                transform: translateX(-50%) rotate(90deg);
              }
            }
          }
        }
      }
    }
    .u-anchor {
      margin-inline: auto;
      margin-block-start: 56px;

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