@charset "UTF-8";

/* =====================
  header active
===================== */
@layer style {
  .header .nav>ul {
    --active-anchor: --recruit;

    &::before {
      opacity: 1;
    }
  }
}

:where(.u-mv) {
  @media (width <=768px) {
    .picture {
      object-position: -32vw 2vw;
    }
  }
}

/* =====================
  main
===================== */
.main:not(:has(.section-anchor)) {
  padding-block-end: 120px;

  @media (width <=768px) {
    padding-block-end: var(--nudge-7);
  }
}

/* =====================
  message
===================== */
.message {
  position: relative;
  padding-block: 185px 150px;
  margin-block-end: 120px;
  overflow: clip;

  @media (width <=768px) {
    padding-block: 25vw 0;
    margin-block-end: 4vw;
  }

  /* ==== u-marquee ==== */
  .u-marquee {
    position: absolute;
    inset-block-start: 36px;
    inset-inline-start: 0;
    display: block flex;
    gap: 20px;
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    pointer-events: none;

    @media (width <=768px) {
      inset-block-start: 4.4vw;
      gap: 3vw;
    }

    &::before,
    &::after {
      display: block flow;
      flex-shrink: 0;
      inline-size: 1859px;
      aspect-ratio: 1859 / 70;
      content: '';
      background-image: url('../img/recruit/text.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      animation: marquee 200s linear infinite;

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

  /* ==== u-inner ==== */
  .u-inner {
    position: relative;
    display: block grid;
  }

  /* ==== catch ==== */
  .catch {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);

    @media (width > 768px) {
      padding-inline-start: 480px;
    }

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

  /* ==== body ==== */
  .body {
    display: block grid;
    gap: 11px;
    margin-block-start: 40px;
    font-size: 18px;

    @media (width > 768px) {
      padding-inline: 612px 100px;
      line-height: 1.9;
    }

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

  /* ==== deco ==== */
  .deco {
    position: absolute;
    pointer-events: none;

    @media (width > 768px) {
      &[data-id='1'] {
        inset-block-start: -49px;
        inset-inline-end: 120px;
      }

      &[data-id='2'] {
        inset-block-end: -105px;
        inset-inline-start: 0;
      }

      &[data-id='3'] {
        inset-block-end: -145px;
        inset-inline-end: 0;
      }
    }

    @media (width <=768px) {
      &[data-id='1'] {
        inset-block-start: -5vw;
        inset-inline-end: 4vw;
        inline-size: calc((100 / 390) * 90 * 1vw);
      }

      &[data-id='2'] {
        inset-block-end: 10vw;
        inset-inline-start: 7vw;
        inline-size: 34vw;
      }

      &[data-id='3'] {
        inset-block-end: 107vw;
        inset-inline-end: 7vw;
        inline-size: 32vw;
      }
    }
  }

  /* ==== img ==== */
  .img {
    position: absolute;
    inset-block-start: 23px;
    inset-inline-start: 16px;
    pointer-events: none;

    @media (width <=768px) {
      position: relative;
      inset: unset;
      margin-block-start: 13vw;
    }

    img {
      border-radius: 40px;

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

      &:last-child {
        position: relative;
        inset-block-start: 279px;
        inset-inline-start: -114px;

        @media (width <=768px) {
          inset-block-start: -18vw;
          inset-inline-start: -4vw;
          z-index: 2;
          display: block flow;
          inline-size: 50%;
          margin-inline: auto 0;
        }
      }
    }
  }
}

/* =====================
  requirement
===================== */
.requirement {
  padding-block: 120px;
  background-image: url('../img/recruit/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 40px;

  @media (width <=768px) {
    padding-block: var(--nudge-7) var(--nudge-5);
    border-radius: calc((100 / 390) * 40 * 1vw);
  }

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

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

/* =====================
  .section-anchor
===================== */
.section-anchor {
  padding-block: 80px 120px;

  @media (width <=768px) {
    padding-block: var(--nudge-7) var(--nudge-7);
  }

  /* ==== u-inner ==== */
  .u-inner {
    @media (width > 768px) {
      padding-inline: 80px;
    }
  }

  /* ==== anchor ==== */
  .anchor {
    display: block grid;
    grid-template-columns: 132px auto;
    gap: 0 52px;
    justify-content: center;
    padding-block: 42px 38px;
    background: var(--primary);
    border-radius: 40px;

    @media (width <=768px) {
      grid-template-columns: auto auto;
      gap: 4vw 7vw;
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      padding-block: calc((100 / 390) * 36 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    img {
      grid-row: 1 / 4;
      grid-column: 1 / 2;

      @media (width <=768px) {
        grid-row: 1 / 2;
        inline-size: 14vw;
        margin-inline: auto 0;
      }
    }

    p {
      grid-row: 1 / 2;
      grid-column: 2 / 3;
      margin-block-start: 10px;
      font-size: 20px;
      color: white;

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

    .u-anchor {
      padding-block: 8px 10px;
      padding-inline: 32px;
      margin-block-start: 25px;
      background: var(--lightblue);
      border-radius: 10px;

      @media (width > 768px) {
        font-size: 16px;
        text-underline-offset: 9px;
      }

      @media (width <=768px) {
        grid-row: 2 / 3;
        grid-column: 1 / 3;
        padding-block: 3vw 4.3vw;
        padding-inline: calc((100 / 390) * 32 * 1vw);
        margin-block-start: 0;
        border-radius: calc((100 / 390) * 10 * 1vw);
      }
    }
  }
}