@charset "UTF-8";

/* =====================
  main
===================== */
.main::before {
  position: absolute;
  inset-block-start: var(--header-height);
  inset-inline: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 2254px;
  height: 2254px;
  pointer-events: none;
  content: '';
  background-image: url('../img/recruit/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media (width <=768px) {
    inset-block-start: 0;
    height: calc((100 / 390) * 4208 / 2 * 1vw);
    background-image: url('../img/recruit/bg_sp.webp');
  }
}

/* =====================
  message
===================== */
.message {
  padding-block: 222px 268px;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 522px 1fr;
    align-content: start;
    align-items: start;

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

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

  /* ==== img ==== */
  .img {
    position: relative;
    display: block grid;
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    align-items: end;

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

      [data-id='1'] {
        inline-size: 67vw;
      }
    }

    [data-id='2'] {
      position: absolute;
      inset-block-end: -175px;
      inset-inline-end: 0;

      @media (width <=768px) {
        inset-block-end: -8vw;
        inset-inline-end: calc((100 / 390) * 0 * 1vw);
        inline-size: 46vw;
      }
    }

    &::before {
      position: absolute;
      inset-block-start: -159px;
      inset-inline-start: -81px;
      z-index: 2;
      font-family: var(--title);
      font-size: 160px;
      font-weight: 300;
      line-height: 0.75;
      color: #e5f4e4;
      white-space: pre;
      pointer-events: none;
      content: 'PRIDE IN\A CRAFT';

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

  /* ==== .catch ==== */
  .catch {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    margin-block-start: 93px;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 1.7px;

    @media (width <=768px) {
      inline-size: 100%;
      margin-block-start: 16vw;
      font-size: calc((100 / 390) * 24 * 1vw);
      text-align: center;
      letter-spacing: calc((100 / 390) * 1.7 * 1vw);
    }
  }

  /* ==== body ==== */
  .body {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin-block-start: 25px;
    font-size: 18px;
    line-height: 2.4;

    @media (width <=768px) {
      inline-size: 100%;
      margin-block-start: calc((100 / 390) * 24 * 1vw);
      font-size: calc((100 / 390) * 15 * 1vw);
      text-align: center;
    }
  }
}

/* =====================
  interview
===================== */
.interview {
  padding-block: 146px 161px;
  overflow: clip;
  background: white;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-template-columns: auto 1fr;
    gap: 38px 90px;

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

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

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  /* ==== body ==== */
  .body {
    br {
      @media (width <=768px) {
        display: none;
      }
    }
  }

  /* ====  slider ==== */
  .slider {
    grid-row: 2 / 3;
    grid-column: 1 / 3;

    @media (width > 768px) {
      clip-path: inset(0 -50vw 0 0);
    }
  }

  .swiper {
    @media (width > 768px) {
      overflow: unset;
    }
  }

  .slider {
    @media (any-hover: hover) {
      &:hover {
        .u-interview {
          filter: grayscale(1);
          transition: filter 250ms ease 0s;
        }
      }
    }

    .u-interview {
      @media (any-hover: hover) {
        &:hover {
          filter: grayscale(0);
        }
      }
    }
  }

  /* ==== controller ==== */
  .controller {
    display: block grid;
    grid-template-columns: 1fr auto auto;
    gap: 25px;
    align-items: center;
    justify-content: center;
    inline-size: 1120px;
    margin-block-start: 51px;
    margin-inline: auto;

    @media (width <=768px) {
      gap: calc((100 / 390) * 10 * 1vw);
      inline-size: 100%;
      margin-block-start: calc((100 / 390) * 20 * 1vw);
    }

    .pagination {
      inset: unset;
      display: grid;
      grid-auto-flow: column;

      span {
        display: block;
        inline-size: initial;
        block-size: 3px;
        margin: unset;
        background: #dcdcdc;
        border-radius: unset;
        opacity: 1;

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

      span.swiper-pagination-bullet-active {
        background: #888;
      }
    }

    button:is(.prev) {
      @media (width > 768px) {
        translate: 5px 0;
      }
    }

    button:is(.prev, .next) {
      inline-size: 60px;
      aspect-ratio: 1 / 1;
      background-image: url('../img/_common/arrow-circle.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;

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

    button.next {
      transform: rotate(180deg);
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    margin-block-start: 23px;
    margin-inline: auto;

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

/* =====================
  number
===================== */
.number {
  padding-block: 145px 161px;
  background-image: url('../img/recruit/number/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media (width > 768px) {
    background-attachment: fixed;
  }

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-template-columns: auto 1fr;
    gap: 0 98px;

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

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

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  /* ==== description ==== */
  .description {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    margin-block-start: 39px;
    color: white;

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

  /* ==== list ==== */
  & ul {
    display: block grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    gap: 30px;
    inline-size: 100%;
    max-inline-size: 1116px;
    margin-block-start: 12px;
    margin-inline: auto;
    translate: -2px 0;

    @media only screen and (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 24 * 1vw);
      max-inline-size: 95%;
      margin-block-start: var(--nudge-3);
      translate: 0;
    }

    &>li {
      display: block grid;
      gap: 42px 0;
      align-content: flex-start;
      align-items: start;
      padding-block: 5px 17px;
      padding-inline: 5px;
      background: white;
      border-radius: 10px;

      @media (width <=768px) {
        gap: 7vw 0;
        padding-block: calc((100 / 390) * 8 * 1vw) 9vw;
        padding-inline: calc((100 / 390) * 8 * 1vw);
        border-radius: calc((100 / 390) * 5 * 1vw);
      }

      &>img {
        display: block flow;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        place-self: flex-start center;
        translate: -5px -13px;

        @media only screen and (width <=768px) {
          inline-size: calc((100 / 390) * 70 * 1vw);
          max-block-size: calc((100 / 390) * 70 * 1vw);
          margin-inline: auto;
          object-fit: contain;
          translate: -6vw 0;
        }
      }

      &:has(.num:nth-child(2)) .unit {
        display: block flex;
        gap: 18px;
        justify-content: center;
        margin-block-start: 13px;

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

        .num {
          display: block flex;
          gap: 4px;
          align-items: baseline;

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

        .count {
          inline-size: 46.93px;
          font-size: 40px;
          text-align: right;

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

        .before {
          font-size: 24px;
          font-weight: 500;

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

        .small {
          font-family: var(--yugo);
          font-size: 25px;

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

    /* ==== h3 ==== */
    & h3 {
      grid-row: 1 / 2;
      grid-column: 1 / 3;
      align-self: flex-start;
      padding-block: 7px;
      padding-inline: 20px;
      font-size: 20px;
      font-weight: 500;
      color: white;
      background: var(--primary);
      border-radius: 10px;

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

    /* ==== unit ==== */
    .unit {
      display: block flex;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      gap: 9px;
      align-items: baseline;
      align-self: flex-start;
      inline-size: fit-content;
      padding-inline-start: 24px;

      @media (width <=768px) {
        gap: 1vw;
        padding-inline-start: calc((100 / 390) * 35 * 1vw);
      }
    }

    /* ==== num ==== */
    .small {
      font-size: 33px;
      font-weight: 700;

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

    .count {
      font-family: Outfit, sans-serif;
      font-size: 90px;
      font-weight: 500;
      line-height: 1;
      vertical-align: top;
      color: var(--primary);
      text-align: justify;

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

    li[data-id='2'] {
      gap: 0;

      .unit {
        display: block grid;
        gap: 0;
        align-self: flex-start;
        margin-block-start: 35px;

        .wrap {
          display: block flex;
          gap: 4px;
          align-items: baseline;
          justify-content: center;

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

        .title {
          font-size: 25px;
          font-weight: 700;
        }

        .count {
          font-size: 40px;
          font-weight: 600;
        }

        .small {
          font-size: 25px;
        }
      }

      img {
        align-self: center;
        margin-block-start: 43px;
      }
    }

    @media (width > 768px) {
      li[data-id='3'] {
        .unit {
          gap: 6px;
          padding-inline-start: 27px;
          margin-block-start: -5px;
        }

        .count {
          font-size: 82px;
          font-weight: 500;

          /* font-feature-settings: 'tnum' 1; */

          /* font-variant: tabular-nums; */
        }

        .small {
          translate: 0 3px;
        }

        &>img {
          translate: -18px -13px;
        }
      }

      li[data-id='4'] {
        .unit {
          gap: 6px;
          padding-inline-start: 27px;
          margin-block-start: -5px;
        }

        .count {
          font-size: 82px;
          font-weight: 500;
        }

        .small {
          font-size: 30px;
          translate: 0 1px;
        }

        &>img {
          translate: -11px -13px;
        }
      }

      li[data-id='6'] {
        .unit {
          gap: 6px;
          padding-inline-start: 27px;
          margin-block-start: -5px;
        }

        .count {
          font-size: 82px;
          font-weight: 500;
        }

        .small {
          font-size: 30px;
          translate: 0 1px;
        }

        &>img {
          translate: -9px -13px;
        }
      }
    }

    li[data-id='5'] {
      .unit {
        display: block grid;
        gap: 0;

        @media (width > 768px) {
          padding-inline-start: 26px;
          margin-block-start: -20px;
        }
      }

      .wrap {
        display: block flex;
        gap: 5px;
        align-items: baseline;

        @media (width <=768px) {
          gap: var(--nudge-1);
        }
      }

      .title {
        font-size: 30px;
        font-weight: 700;

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

      .count {
        @media (width > 768px) {
          font-size: 82px;
        }

        font-weight: 500;
      }

      .small {
        @media (width > 768px) {
          font-size: 30px;
          translate: 0 1px;
        }
      }

      p {
        font-family: var(--yugo);
        font-size: 13px;
        font-weight: 500;

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

      @media (width > 768px) {
        &>img {
          translate: -13px -13px;
        }
      }
    }
  }
}

/* =====================
  requirements
===================== */
.requirements {
  padding-block: 146px 115px;

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

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

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

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

  /* ==== .u-anchor ==== */
  .u-anchor {
    margin-block-start: 2px;

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

/* =====================
  flow
===================== */
.flow {
  position: relative;
  padding-block: 145px 159px;
  background: var(--bg-light-green);

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

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

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

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

  /* ==== .flow-list ==== */
  .flow-list {
    @media (width > 768px) {
      inline-size: 1040px;
    }

    @media (width <=768px) {
      display: grid;
      grid-auto-columns: auto 1fr auto;
      margin-block-start: calc((100 / 390) * 34 * 1vw);
      margin-inline: 0;
    }

    & li {
      display: block grid;
      grid-template-columns: 130px 150px 1fr 130px;
      gap: 30px;
      align-items: center;
      padding-block: 19.5px;
      padding-inline-end: 20px;
      border-block-start: 1px solid #d2d2d2;

      @media (width <=768px) {
        display: grid;
        grid-template-rows: max-content max-content;
        grid-template-columns: unset;
        grid-column: span 3;
        gap: 1.6vw 3.9vw;
        padding-block: 6.7vw 5.2vw;
        padding-right: 0;
      }

      &:last-child {
        border-block-end: 1px solid #d2d2d2;
      }

      .no {
        inline-size: 130px;
        block-size: 130px;
        padding-block-start: 36px;
        font-family: Oswald, sans-serif;
        font-size: 45px;
        font-weight: 500;
        color: white;
        text-align: center;
        background-image: url('../img/recruit/flow/step.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        @media (width <=768px) {
          grid-row: 1/3;
          inline-size: calc((100 / 390) * 68 * 1vw);
          block-size: calc((100 / 390) * 68 * 1vw);
          padding-block-start: 5.4vw;
          font-size: calc((100 / 390) * 21 * 1vw);
        }
      }

      .title {
        font-family: var(--yugo);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.36;
        color: var(--primary);

        @media (width <=768px) {
          grid-row: 1/2;
          align-self: flex-end;
          font-size: calc((100 / 390) * 16 * 1vw);
          line-height: 1.5;
        }
      }

      .description {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.86;

        @media (width <=768px) {
          grid-row: 2/3;
          align-self: f;
          align-self: flex-start;
          margin-block-start: calc((100 / 390) * 0 * 1vw);
          font-size: calc((100 / 390) * 12 * 1vw);
        }
      }

      .picture {
        @media (width <=768px) {
          grid-row: 1/3;
          inline-size: 13vw;

          img {
            inline-size: calc((100 / 390) * 110 * 1vw);
            block-size: calc((100 / 390) * 130 * 1vw);
          }
        }
      }
    }

    & li[data-id='2'] .picture {
      translate: 11px 0;
    }

    & li[data-id='3'] .picture {
      translate: 7px 0;
    }
  }

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

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