@charset "UTF-8";

/* =====================
  message
===================== */
.message {
  padding-block: 91px 107px;
  overflow: clip;
  color: white;

  @media only screen and (width <= 768px) {
    padding-block: 15.4vw 19.2vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    position: relative;
    display: block grid;
    gap: 20px;

    @media only screen and (width <= 768px) {
      position: relative;
      gap: 20px;
    }
  }

  /* ==== .img ==== */
  .img {
    pointer-events: none;

    @media only screen and (width <= 768px) {
      position: relative;
      padding-block-start: 35px;
    }

    /* ==== picture ==== */
    .picture {
      position: absolute;
      display: block flow;

      @media only screen and (width <= 768px) {
        position: relative;
        display: block flex;
      }
    }

    & [data-id='1'] {
      inset-block-start: 128px;
      inset-inline-start: 0;

      @media only screen and (width <= 768px) {
        inset: unset;
        inline-size: calc((100 / 390) * 212 * 1vw);
        aspect-ratio: 1 / 1;
      }
    }

    & [data-id='2'] {
      inset-block-start: -11px;
      inset-inline-end: -41px;

      @media only screen and (width <= 768px) {
        position: absolute;
        inset: unset;
        inset-block-start: 0;
        inset-inline-end: 0;
        inline-size: calc((100 / 390) * 138 * 1vw);
        aspect-ratio: 1 / 1;
        translate: 0 -11.6vw;
      }
    }
  }

  /* ==== text ==== */
  .text {
    display: block grid;
    gap: 32px;
    max-inline-size: 680px;
    margin-block-start: -45px;
    margin-inline: auto;
    translate: 118px 0;

    @media only screen and (width <= 768px) {
      gap: 6.7vw;
      max-inline-size: 100%;
      margin-block-start: 5.7vw;
      translate: unset;
    }
  }

  /* ==== .catch ==== */
  .catch {
    font-size: 26px;
    font-weight: 500;

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

  /* ==== .body ==== */
  .body {
    line-height: 2;

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

  /* ==== marquee ==== */
  .marquee {
    display: block flex;
    grid-area: 3 / 1 / 5 / 3;
    gap: 16px;
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);

    &::before,
    &::after {
      display: block flow;
      flex-shrink: 0;
      content: '';
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    &[data-id='1'] {
      margin-block-start: 120px;

      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 16 * 1vw);
        margin-block-start: 10vw;
      }
    }

    &[data-id='1']::before,
    &[data-id='1']::after {
      inline-size: 3499px;
      block-size: 60px;
      background-image: url('../img/recruit/text.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      animation: marquee 400s linear 0s infinite normal none running;
    }

    @media only screen and (width <= 768px) {
      &[data-id='1']::before,
      &[data-id='1']::after {
        inline-size: calc((100 / 390) * 1814 / 2 * 1vw);
        block-size: calc((100 / 390) * 97 / 2 * 1vw);
        background-image: url('../img/recruit/text_sp.png');
        animation: marquee 200s linear 0s infinite normal none running;
      }
    }
  }
}

/* =====================
  requirement
===================== */
.requirement {
  padding-block: 91px 120px;

  @media only screen and (width <= 768px) {
    padding-block: 15.4vw 20.7vw;
  }

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

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 24 * 1vw);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    & [lang='en'] {
      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 40 * 1vw);
      }
    }

    & .title {
      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 15 * 1vw);
      }
    }
  }

  /* ==== address ==== */
  .address {
    display: block flex;
    gap: 15px;

    @media only screen and (width <= 768px) {
      display: block grid;
      gap: 0;
      padding-inline-end: 10vw;
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    margin-block-start: 26px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      margin-block-start: 6vw;
    }
  }
}