@charset "UTF-8";

/* =====================
  introduction
===================== */
.introduction {
  position: relative;
  padding-block: 111px;

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

  &::before {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-end: 0;
    inline-size: 480px;
    block-size: 636px;
    pointer-events: none;
    content: '';
    background-image: url('../img/recruit/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  @media only screen and (width <= 768px) {
    &::before {
      inset-block-start: calc((100 / 390) * 26 * 1vw);
      inline-size: calc((100 / 390) * 473 / 2 * 1vw);
      block-size: calc((100 / 390) * 668 / 2 * 1vw);
      background-image: url('../img/recruit/bg_sp.webp');
    }
  }

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

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: unset;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== catch ==== */
  .catch {
    position: relative;
    z-index: 2;
    display: block grid;
    grid-area: 1 / 2 / 2 / 3;
    padding-inline-start: 0;
    margin-block-start: 15px;
    font-size: 32px;
    text-decoration: underline solid var(--primary) 4px;
    text-underline-offset: 6.72px;
    translate: -41px 0;

    @media only screen and (width <= 768px) {
      margin-block-start: 0;
      font-size: calc((100 / 390) * 29 * 1vw);
      text-decoration: underline solid var(--primary) calc((100 / 390) * 3.625 * 1vw);
      text-underline-offset: calc((100 / 390) * 6.09 * 1vw);
      translate: 0 0;
    }

    &::before {
      position: absolute;
      inset-block-start: -111px;
      inset-inline-start: -150px;
      inline-size: 227px;
      block-size: 143px;
      pointer-events: none;
      content: '';
      background-image: url('../img/recruit/text.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-block-start: -16.6vw;
        inset-inline-start: -6.7vw;
        inline-size: calc((100 / 390) * 283 / 2 * 1vw);
        block-size: calc((100 / 390) * 137 / 2 * 1vw);
        background-image: url('../img/recruit/text_sp.webp');
      }
    }
  }

  /* ==== text ==== */
  .text {
    display: block grid;
    grid-area: 2 / 2 / 3 / 3;
    gap: 24px;
    max-inline-size: 560px;
    padding-inline: 29px 0;

    @media only screen and (width <= 768px) {
      gap: 6vw;
      max-inline-size: 100%;
      padding-inline: 0;
      margin-block-start: 8.7vw;
    }

    .body {
      line-height: 2;
    }
  }

  /* ==== picture ==== */
  .picture {
    position: relative;
    display: block grid;
    grid-area: 1 / 1 / 3 / 2;
    block-size: 624px;
    translate: -80px 0;

    @media only screen and (width <= 768px) {
      block-size: calc((100 / 390) * 311.13 * 1vw);
      margin-block-start: calc((100 / 390) * 50 * 1vw);
      translate: unset;
    }

    & img {
      position: relative;

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

    & img + img {
      position: absolute;
      inset-inline-end: 0;
      z-index: 2;
      align-self: flex-end;
      translate: 67px 0;

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

/* =====================
  schedule
===================== */
.schedule {
  padding-block: 88px;

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

  /* ==== .u-inner ==== */
  .u-inner {
    padding-inline: 40px;

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

  /* ==== contents ==== */
  .contents {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-block-start: 46px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 40 * 1vw);
      margin-block-start: calc((100 / 390) * 46 * 1vw);
    }

    /* ==== section ==== */
    & section {
      padding-block: 16px 15px;
      padding-inline: 16px;
      background: white;
      border-radius: 8px;

      @media only screen and (width <= 768px) {
        padding-block: calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        border-radius: calc((100 / 390) * 8 * 1vw);
      }

      /* ==== h3 ==== */
      & h3 {
        display: block grid;
        place-content: center;
        padding-block: 3.2px;
        font-size: 18px;
        font-weight: 700;
        color: white;
        letter-spacing: 1.08px;
        background: var(--primary);

        @media only screen and (width <= 768px) {
          padding-block: calc((100 / 390) * 2.9 * 1vw);
          font-size: calc((100 / 390) * 18 * 1vw);
          letter-spacing: calc((100 / 390) * 1.08 * 1vw);
        }
      }

      /* ==== dl ==== */
      & dl {
        display: block grid;
        grid-template-columns: 112px 1fr;
        gap: 16px 0;
        margin-block-start: 16px;

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

        /* ==== .tr ==== */
        .tr {
          position: relative;
          display: block grid;
          grid-template-columns: subgrid;
          grid-column: 1 / -1;
        }

        /* ==== dt ==== */
        & dt {
          position: relative;
          padding-block-start: 14px;
          font-family: var(--outfit);
          font-size: 18px;
          font-weight: 500;
          letter-spacing: 0.54px;

          @media only screen and (width <= 768px) {
            padding-block-start: calc((100 / 390) * 14 * 1vw);
            padding-inline-start: 0.8vw;
            font-size: calc((100 / 390) * 16 * 1vw);
            letter-spacing: calc((100 / 390) * 0.48 * 1vw);
          }

          &::after {
            position: absolute;
            inset-block-start: 20px;
            inset-inline-end: 19px;
            display: block flow;
            inline-size: 19px;
            aspect-ratio: 1 / 1;
            content: '';
            background: var(--primary);
            border-radius: calc(infinity * 1px);
          }

          @media only screen and (width <= 768px) {
            &::after {
              inset-block-start: 5.6vw;
              inset-inline-end: 5vw;
              inline-size: calc((100 / 390) * 14 * 1vw);
            }
          }
        }

        .tr:not(:last-child) dt::before {
          position: absolute;
          inset-block-start: 30px;
          inset-inline-end: 27px;
          display: block;
          inline-size: 3px;
          block-size: 120%;
          content: '';
          background: var(--primary);
        }

        @media only screen and (width <= 768px) {
          .tr:not(:last-child) dt::before {
            inset-block-start: 7vw;
            inset-inline-end: 6.34vw;
            inline-size: calc((100 / 390) * 3 * 1vw);
            block-size: calc(110% + calc((100 / 390) * 14 * 1vw));
          }
        }

        /* ==== ul ==== */
        & ul {
          display: block grid;
          gap: 16px;

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

          & li {
            padding-block: 16px;
            padding-inline: 8px;
            font-weight: 500;
            line-height: 1.7;
            letter-spacing: 0.96px;
            background: var(--bg);
            border-radius: 8px;

            @media only screen and (width <= 768px) {
              padding-block: calc((100 / 390) * 16 * 1vw);
              padding-inline: calc((100 / 390) * 8 * 1vw);
              letter-spacing: calc((100 / 390) * 0.96 * 1vw);
              border-radius: calc((100 / 390) * 8 * 1vw);
            }
          }
        }
      }
    }

    & section:nth-child(2) {
      @media only screen and (width <= 768px) {
        padding-block-end: calc((100 / 390) * 23 * 1vw);
      }

      & dl {
        gap: 21px 0;
        margin-block-start: 21px;

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

        & ul {
          gap: 21px;

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

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

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 100.8 * 1vw) 0;
  }

  /* ==== u-inner ==== */
  .u-inner {
    position: relative;
    max-inline-size: 1200px;
    padding-block: 54px 96px;
    padding-inline: 39px;
    background: white;
    border: 1px solid var(--primary);

    @media only screen and (width <= 768px) {
      padding-block: 8.6vw 0;
      padding-inline: calc((100 / 390) * 16 * 1vw);
      border: calc((100 / 390) * 1 * 1vw) solid var(--primary);
      border-inline-start: 0;
      border-inline-end: 0;
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    @media only screen and (width <= 768px) {
      gap: 2.2vw;

      & span {
        line-height: 1.2;
        word-break: keep-all;
      }
    }
  }

  /* ==== catch ==== */
  .catch {
    display: block grid;
    gap: 2px;
    justify-content: flex-end;
    inline-size: fit-content;
    padding-inline-start: 24px;
    margin-block-start: 53px;
    font-size: 28px;
    font-weight: 500;
    text-align: right;

    @media only screen and (width <= 768px) {
      grid-template-rows: auto auto;
      grid-template-columns: 100%;
      gap: 1.8vw;
      justify-content: flex-start;
      inline-size: unset;
      padding-inline-start: unset;
      margin-block-start: calc((100 / 390) * 28.8 * 1vw);
      font-size: calc((100 / 390) * 28 * 1vw);
      text-align: left;
    }

    & small {
      font-size: 19px;
      line-height: 1;
      translate: 32px 0;

      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 19 * 1vw);
        text-align: right;
        translate: unset;
      }
    }
  }

  /* ==== body ==== */
  .body {
    max-inline-size: 585px;
    padding-inline-start: 24px;
    margin-block-start: 30px;

    @media only screen and (width <= 768px) {
      max-inline-size: unset;
      padding-inline-start: 0;
      margin-block-start: calc((100 / 390) * 30 * 1vw);
    }
  }

  /* ==== figure ==== */
  & figure {
    position: absolute;
    inset-block-start: -50px;
    inset-inline-end: -42px;
    display: block grid;

    @media only screen and (width <= 768px) {
      position: unset;
      margin-block-start: -4.9vw;
      translate: 0;
      translate: 0 23.3vw;
    }

    & img {
      border: 1px solid var(--primary);

      @media only screen and (width <= 768px) {
        display: block flow;
        inline-size: calc((100 / 390) * 322.858 * 1vw);
        margin-inline: auto;
        border: calc((100 / 390) * 1 * 1vw) solid var(--primary);
      }
    }

    & figcaption {
      font-size: 15px;
      text-align: center;

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

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

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 200 * 1vw) 104px;
  }

  /* ==== u-inner ==== */
  .u-inner {
    position: relative;
    max-inline-size: 1200px;
  }

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

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

  /* ==== anchor ==== */
  .anchor {
    position: relative;
    display: block grid;
    grid-template-columns: auto auto 1fr;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    max-inline-size: 736px;
    padding-block: 63px 56px;
    padding-inline: 80px;
    margin-block-start: 104px;
    margin-inline: auto;
    color: white;
    background-image: url('../img/recruit/banner.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media only screen and (width <= 768px) {
      gap: 0;
      max-inline-size: calc((100 / 390) * 350 * 1vw);
      padding-block: 13.7vw 12.4vw;
      padding-inline: 4vw;
      margin-block-start: 26.9vw;
      background-image: url('../img/recruit/banner_sp.webp');
    }

    /* ==== a ==== */
    &:has(a) {
      transition: all 250ms ease 0s;

      @media (any-hover: hover) {
        &:hover {
          opacity: 0.7;
        }
      }
    }

    /* ==== circle ==== */
    &::before,
    &::after {
      position: absolute;
      display: block flow;
      content: '';
    }

    &::before {
      inset-block-start: 50.7%;
      inset-inline-end: 42px;
      inline-size: 75px;
      aspect-ratio: 1 / 1;
      border: 1px solid white;
      border-radius: calc(infinity * 1px);
      translate: 0 -50%;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-block-start: 49.7%;
        inset-inline-end: calc((100 / 390) * 16 * 1vw);
        inline-size: calc((100 / 390) * 75 * 1vw);
      }
    }

    &::after {
      inset-block-start: 47.7%;
      inset-inline-end: 69px;
      inline-size: 20px;
      aspect-ratio: 20 / 12;
      background-color: currentcolor;
      mask-image: var(--icon-arrow-triangle);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    @media only screen and (width <= 768px) {
      &::after {
        inset-block-start: 47%;
        inset-inline-end: calc((100 / 390) * 43.5 * 1vw);
        inline-size: calc((100 / 390) * 20 * 1vw);
      }
    }

    /* ==== hgroup ==== */
    & hgroup {
      display: block grid;
      gap: 4px;

      & h3 {
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--yumin);
        font-size: 20px;
        font-weight: 600;

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

      & [lang='en'] {
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--outfit);
        font-size: 56px;
        font-weight: 400;
        line-height: 1;

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

    /* ==== body ==== */
    .body {
      display: block grid;
      align-self: flex-start;
      margin-block-start: 7px;

      @media only screen and (width <= 768px) {
        display: none;
      }
    }

    /* ==== a ==== */
    & a {
      position: absolute;
      inset: 0 auto;
      z-index: 2;
      display: block flow;
      inline-size: 100%;
      block-size: 100%;
    }
  }
}