@charset "UTF-8";

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

    @media (width <= 768px) {
      background-image: url('../img/recruit/mv_sp.png');
    }
  }

  /* =====================
    message
  ===================== */
  .message {
    padding-block: 104px 95px;

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

    .u-inner {
      position: relative;

      &::before {
        content: '';
        background-size: contain;
        background-position: center top;
        background-repeat: no-repeat;
        background-image: url('../img/recruit/message.png');
        inline-size: 788px;
        block-size: 446px;
        position: absolute;
        top: 30px;
        left: -70px;
        pointer-events: none;
      }

      @media (width <= 768px) {
        &::before {
          background-image: url('../img/recruit/message_sp.png');
          inline-size: 100%;
          block-size: calc((100 / 750) * 424 * 1vw);
          top: unset;
          bottom: calc((100 / 750) * -500 * 1vw);
          left: 0;
        }
      }

      .message_wrap {
        position: relative;
        z-index: 3;
        inline-size: 456px;
        margin-inline: auto 70px;

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

        .title {
          font-size: 24px;
          font-weight: 500;
          line-height: 1;
          color: #61d7db;

          .box {
            margin-inline: 12px;
          }

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

            .box {
              margin-inline: calc((100 / 750) * 12 * 1vw);
              padding-inline: 0.4em;
              padding-block: 0.35em;
            }
          }
        }

        .description {
          line-height: 1.9;
          margin-block-start: 52px;

          & + .description {
            margin-block-start: 1.8em;
          }

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

        .left-in-catch {
          position: absolute;
          bottom: 59px;
          left: -289px;
          z-index: 5;

          @media (width <= 768px) {
            left: unset;
            bottom: calc((100 / 750) * -480 * 1vw);
            right: calc((100 / 750) * 52 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    requirements
  ===================== */
  .requirements {
    padding-block: 104px 40px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 120 * 1vw) calc((100 / 750) * 47 * 1vw);
    }
    .u-inner {
      @media (width <= 768px) {
        padding-inline: calc((100 / 750) * 20 * 1vw);
      }
      .req_wrap {
        background-color: #edfeff;
        margin-inline: 70px;
        padding-inline: 70px;
        padding-block: 51px 61px;

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

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

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 56 * 1vw);
          }
        }
      }
      .u-anchor {
        margin-block-start: 56px;
        margin-inline: auto;

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