@charset "UTF-8";

/* =====================
  header active
===================== */
@layer style {
  [data-page='recruit'] .header ul {
    --active-anchor: --recruit;

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

/* =====================
  message
===================== */
.message {
  padding-block: 177px 0;
  overflow: clip;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 560px 1fr;
    gap: 0 80px;
    align-items: start;

    @media (width > 768px) {
      max-inline-size: 1360px;
    }

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-4);
    }
  }

  /* ==== img ==== */
  .picture {
    position: relative;
    z-index: 1;
    grid-row: 1 / 4;
    grid-column: 1 / 2;

    @media (width <=768px) {
      inline-size: 100%;
      block-size: calc((100 / 390) * 180 * 1vw);
      object-fit: cover;
      object-position: center -20vw;
    }
  }

  /* ==== catch ==== */
  .catch {
    position: relative;
    z-index: 3;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    margin-block-start: 97px;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.5;

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

  /* ==== body ==== */
  .body {
    display: block grid;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    gap: 29px;
    margin-block-start: 41px;

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

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

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

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

      @media (width <=768px) {
        gap: calc((100 / 390) * 45 * 1vw);
        inline-size: calc((100 / 390) * 370 * 1vw);
        block-size: auto;
        aspect-ratio: 1269 / 188;
      }
    }
  }

  /* ==== img ==== */
  .img {
    display: block flex;
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    gap: 31px;
    margin-block-start: 93px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column-reverse;
      gap: var(--nudge-2);
      margin-block-start: 0;
    }

    p {
      font-family: var(--sanserif);
      font-size: 11px;
      color: #acacac;
      word-break: normal;

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

    img {
      flex-shrink: 0;

      @media (width > 768px) {
        translate: 40px 0;
      }
    }
  }
}

/* =====================
  interview
===================== */
.interview {
  padding-block: 147px 142px;
  background: var(--bg2);

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

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

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

  /* ==== interview-wrap ==== */
  .interview-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 35px;
    margin-block-start: 70px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
      margin-block-start: 0;
    }
  }
}

/* =====================
  number
===================== */
.number {
  padding-block: 147px 159px;

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

  ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    inline-size: fit-content;
    margin-block-start: 72px;
    margin-inline: auto;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-2);
      inline-size: 100%;
      margin-block-start: var(--nudge-4);
    }
  }

  li {
    display: block grid;
    gap: 18px;
    justify-content: center;
    padding-block: 40px 27px;
    border: 1px solid #d2d2d2;
    border-radius: 10px;

    @media (width > 768px) {
      inline-size: 347px;
    }

    @media (width <=768px) {
      grid-template-columns: calc((100 / 390) * 80 * 1vw) 1fr;
      gap: 0;
      align-items: flex-start;
      justify-content: flex-start;
      inline-size: 90%;
      padding-block: var(--nudge-3);
      padding-inline: 6vw;
      margin-inline: auto;
      border-radius: calc((100 / 390) * 10 * 1vw);
    }
  }

  li[data-id='4'] .small {
    font-family: var(--sanserif);
    font-weight: 500;
  }

  img {
    margin-inline: auto;

    @media (width <=768px) {
      grid-row: 1 / 4;
      grid-column: 1 / 2;
      inline-size: calc((100 / 390) * 80 * 1vw);
      max-block-size: calc((100 / 390) * 80 * 1vw);
    }
  }

  h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.63;
    color: #111;
    text-align: center;

    @media (width <=768px) {
      grid-row: 1 / 2;
      grid-column: 2 / 3;
      font-size: calc((100 / 390) * 16 * 1vw);
    }
  }

  .unit {
    display: block flex;
    gap: 0;
    align-items: baseline;
    margin-block-start: -10px;
    margin-inline: auto;

    @media (width > 768px) {
      translate: -4px 0;
    }

    @media (width <=768px) {
      grid-row: 2 / 3;
      grid-column: 2 / 3;
      margin-block-start: 0;
    }

    .count {
      margin-block: calc((1em - 1lh) / 2);
      font-family: var(--outfit);
      font-size: 90px;
      font-weight: 500;
      color: #3c6baf;

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

    .small {
      margin-block: calc((1em - 1lh) / 2);
      font-family: var(--yugo);
      font-size: 33px;
      font-weight: 700;
      line-height: 1.8;
      color: #111;
      translate: 9px 0;

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

/* =====================
  jobs
===================== */
.jobs {
  padding-block: 147px 160px;
  background: var(--bg2);

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

  .u-table {
    margin-block-start: 72px;
  }

  .u-anchor {
    margin-block-start: 80px;
    margin-inline: auto;
  }
}