@charset "UTF-8";

/* =====================
  .mv
===================== */
.u-mv {
  .nav {
    .img {
      background-image: url('../img/recruit/mv-bg.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;

      @media print, screen and (width >=768px) {
        background-attachment: fixed;
      }

      @media not all and (width >=768px) {
        background-image: url('../img/recruit/mv-bg_sp.webp');
      }
    }
  }
}

/* =====================
  インタビュー
===================== */
.interview-box {
  position: relative;
  display: grid;
  align-items: flex-end;
  aspect-ratio: 315 / 404;
  overflow: hidden;

  & img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    object-fit: cover;
    translate: -50% -50%;
  }

  .text {
    display: grid;
    gap: 7px;
    align-items: flex-start;
    justify-content: flex-start;
    padding-block: 23px;
    padding-inline: 15px;
    color: white;
    background: linear-gradient(180deg, rgb(16 16 18 / 0%) 0%, rgb(16 16 18 / 70%) 100%);

    @media not all and (width >=768px) {
      gap: 0.4vw;
      padding-block: 3.3vw;
      padding-inline: 2.5vw;
      font-size: calc((100 / 750) * 20 * 1vw);
    }

    .unit[data-id='1'] {
      align-items: flex-end;
    }

    .unit[data-id='2'] {
      display: grid;
      grid-auto-flow: column;
      align-items: baseline;
      justify-content: flex-start;
      margin-block: calc((1em - 1lh) / 2);

      .item[data-id='1'] {
        margin-block: calc((1em - 1lh) / 2);
        font-family: Alatsi, serif;
        font-size: 40px;
        font-weight: 400;
        letter-spacing: 1.2px;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 50 * 1vw);
        }
      }

      .item[data-id='2'] {
        margin-block: calc((1em - 1lh) / 2);
        font-weight: bold;
      }
    }
  }

  & a {
    position: absolute;
    z-index: 2;
    inline-size: 100%;
    block-size: 100%;
  }
}

/* *********************
  recruitページ
********************* */
.recruit {
  .u-mv {
    & img {
      object-position: top center;
    }

    @media print, screen and (width >=768px) {
      padding-block-start: 64px;
    }
  }

  /* =====================
    message
  ===================== */
  section[data-type='message'] {
    position: relative;
    padding-block: 128px 461px;
    overflow: hidden;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 47 * 1vw) 53.4vw;
    }

    .u-inner {
      position: relative;
      display: grid;
      grid-auto-flow: column;
      max-inline-size: 1300px;

      @media not all and (width >=768px) {
        max-inline-size: 100%;
      }

      .text {
        inline-size: 510px;
        padding-inline-start: 90px;

        @media not all and (width >=768px) {
          inline-size: 100%;
          padding-block-start: 77.7vw;
          padding-inline: calc((100 / 750) * 40 * 1vw);
        }
      }

      & h2 {
        margin-block: calc((1em - 1lh) / 2);
        font-size: 30px;
        font-weight: bold;
        line-height: 1.6;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 40 * 1vw);
        }

        & span {
          display: block;
        }
      }

      & p {
        margin-block-start: 45px;

        @media not all and (width >=768px) {
          margin-block-start: calc((100 / 750) * 45 * 1vw);
          font-size: calc((100 / 750) * 26 * 1vw);
          line-height: 1.76;
        }
      }

      .img {
        position: absolute;
        top: 2px;
        right: 0;
        inline-size: 720px;
        block-size: 705px;
        pointer-events: none;

        @media not all and (width >=768px) {
          top: 0;
          inline-size: calc((100 / 750) * 710 * 1vw);
          block-size: calc((100 / 750) * 515 * 1vw);
        }

        .inner {
          position: relative;
          block-size: inherit;

          & img {
            position: absolute;
            top: 0;
            left: 0;

            @media not all and (width >=768px) {
              right: 0;
              left: unset;
              inline-size: calc((100 / 750) * 526 * 1vw);
            }

            &[data-id='2'] {
              top: 434px;
              left: -250px;

              @media not all and (width >=768px) {
                top: calc((100 / 750) * 316 * 1vw);
                left: calc((100 / 750) * -1 * 1vw);
                inline-size: calc((100 / 750) * 241 * 1vw);
              }
            }

            &[data-id='3'] {
              top: 588px;
              left: 33px;

              @media not all and (width >=768px) {
                top: calc((100 / 750) * 430 * 1vw);
                left: calc((100 / 750) * 208 * 1vw);
                inline-size: calc((100 / 750) * 88 * 1vw);
              }
            }
          }
        }
      }

      .decoration[data-id='1'] {
        position: absolute;
        top: 538px;
        left: -202px;
        z-index: -1;
        block-size: auto;
        max-block-size: 173px;

        @media not all and (width >=768px) {
          top: 153vw;
          left: 0;
          block-size: auto;
          max-block-size: calc((100 / 750) * 670 * 1vw);
        }
      }

      &::after {
        position: absolute;
        top: 404px;
        right: 48px;
        z-index: 2;
        display: block;
        inline-size: 454px;
        aspect-ratio: 454 / 324;
        pointer-events: none;
        content: '';
        background-image: url('../img/recruit/message/text.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

      @media not all and (width >=768px) {
        &::after {
          top: 38.1vw;
          right: 3vw;
          inline-size: calc((100 / 750) * 345 * 1vw);
        }
      }
    }
  }

  /* =====================
    interview
  ===================== */
  section[data-type='interview'] {
    position: relative;
    padding-block: 124px 130px;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 121 * 1vw) calc((100 / 750) * 130 * 1vw);
    }

    overflow: hidden;
    background-image: url('../img/recruit/interview/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .swiper-container {
      margin-block-start: 51px;
      overflow: unset;
      clip-path: inset(0 -50vw 0 0);

      @media not all and (width >=768px) {
        margin-block-start: 6.2vw;
        overflow: hidden;
        clip-path: unset;
      }

      .swiper-slide {
        transition: filter 350ms ease 0s;
      }
    }

    .swiper-wrapper {
      @media (any-hover: hover) {
        &:hover {
          .swiper-slide {
            filter: grayscale(1);
          }
        }
      }

      .swiper-slide {
        @media not all and (width >=768px) {
          display: grid;
        }

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

    .u-anchor {
      max-inline-size: 368px;
      margin-block-start: 61px;
      margin-inline: auto;

      @media not all and (width >=768px) {
        max-inline-size: calc((100 / 750) * 544 * 1vw);
        margin-block-start: calc((100 / 750) * 61 * 1vw);
      }
    }
  }

  /* =====================
    number
  ===================== */
  section[data-type='number'] {
    padding-block: 123px 70px;

    @media not all and (width >=768px) {
      padding-block: 15.4vw 17.6vw;
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    & hgroup {
      margin-block-end: 41px;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 41 * 1vw);
      }
    }

    .unit[data-id='1'] {
      margin-block-end: 48px;
      text-align: center;

      @media not all and (width >=768px) {
        margin-block-end: 5.7vw;
        font-size: calc((100 / 750) * 26 * 1vw);
        line-height: 1.78;
        text-align: left;
      }
    }

    & dl {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      justify-content: center;
      margin-block-end: 60px;

      @media not all and (width >=768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: calc((100 / 750) * 10 * 1vw);
        margin-block-end: 0;
      }

      .wrap {
        padding-block: 38px 27px;
        border: 1px solid #d2d2d2;
        border-radius: 10px;

        @media not all and (width >=768px) {
          padding-block: calc((100 / 750) * 38 * 1vw) calc((100 / 750) * 27 * 1vw);
          border-radius: calc((100 / 750) * 10 * 1vw);
        }

        & dt {
          display: grid;
          gap: 20px;
          align-items: center;
          justify-content: center;
          text-align: center;

          @media not all and (width >=768px) {
            gap: calc((100 / 750) * 20 * 1vw);
          }

          & img {
            display: block;
            margin-inline: auto;

            @media not all and (width >=768px) {
              inline-size: calc((100 / 750) * 100 * 1vw);
            }
          }

          & h3 {
            font-size: 22px;
            font-weight: bold;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 22 * 1vw);
            }
          }
        }

        & dd {
          margin-block: calc((1em - 1lh) / 2);

          strong {
            font-family: var(--title);
            font-weight: 500;
            line-height: 1;
            color: var(--blue);
          }

          span {
            font-weight: bold;
          }
        }
      }

      .wrap[data-id='1'] {
        & dd {
          display: grid;
          grid-auto-flow: column;
          gap: 7px;
          align-items: baseline;
          justify-content: center;
          margin-block-start: 3px;
          line-height: 1;

          @media not all and (width >=768px) {
            margin-block-start: 0;
          }

          strong {
            font-size: 90px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 90 * 1vw);
            }
          }

          span {
            font-size: 33px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 33 * 1vw);
            }
          }
        }
      }

      .wrap[data-id='2'] {
        & dt {
          @media not all and (width >=768px) {
            & img {
              inline-size: calc((100 / 750) * 130 * 1vw);
            }
          }
        }

        & dd {
          display: grid;
          grid-auto-flow: column;
          gap: 22px;
          justify-content: center;
          margin-block-start: 10px;

          @media not all and (width >=768px) {
            gap: calc((100 / 750) * 19 * 1vw);
            margin-block-start: 1.2vw;
          }

          .item {
            display: grid;
            grid-auto-flow: column;
            gap: 1px;
            align-items: baseline;
            justify-content: center;
            font-weight: bold;
            line-height: 1;

            @media not all and (width >=768px) {
              gap: calc((100 / 750) * 1 * 1vw);
            }
          }

          span {
            font-size: 25px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 25 * 1vw);
            }
          }

          strong {
            font-size: 40px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 40 * 1vw);
            }
          }
        }
      }

      .wrap[data-id='3'] {
        & dd {
          display: grid;
          grid-auto-flow: column;
          gap: 5px;
          align-items: baseline;
          justify-content: center;
          margin-block-start: 3px;

          @media not all and (width >=768px) {
            margin-block-start: 0;
          }

          & strong {
            font-size: 90px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 90 * 1vw);
            }
          }

          span {
            font-size: 33px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 33 * 1vw);
            }
          }
        }
      }

      .wrap[data-id='4'] {
        & dt {
          @media not all and (width >=768px) {
            & img {
              inline-size: calc((100 / 750) * 110 * 1vw);
            }
          }
        }

        & dd {
          display: grid;
          grid-auto-flow: column;
          align-items: baseline;
          justify-content: center;
          margin-block-start: 4px;

          @media not all and (width >=768px) {
            margin-block-start: 1vw;
          }

          strong {
            font-size: 70px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 70 * 1vw);
            }

            span {
              font-size: 50px;

              @media not all and (width >=768px) {
                font-size: calc((100 / 750) * 50 * 1vw);
              }
            }
          }

          span {
            font-size: 33px;
            translate: 8px 0;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 33 * 1vw);
              translate: 0 0;
            }
          }
        }
      }

      .wrap[data-id='5'] {
        & dt {
          gap: 10px;

          @media not all and (width >=768px) {
            gap: calc((100 / 750) * 10 * 1vw);

            & img {
              inline-size: calc((100 / 750) * 49 * 1vw);
            }
          }
        }

        & dd {
          display: grid;
          grid-template-columns: auto auto auto;
          gap: 0 5px;
          align-items: baseline;
          justify-content: center;
          margin-block-start: 0;
          translate: 0 -8px;

          @media not all and (width >=768px) {
            gap: 0 calc((100 / 750) * 5 * 1vw);
            translate: 0 -1vw;
          }

          strong {
            font-size: 90px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 90 * 1vw);
            }
          }

          span {
            font-size: 33px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 33 * 1vw);
            }
          }

          small {
            display: block;
            grid-column: 1 / -1;
            margin-block: calc((1em - 1lh) / 2);
            font-size: 14px;
            text-align: center;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 14 * 1vw);
            }
          }
        }
      }

      .wrap[data-id='6'] {
        & dd {
          display: grid;
          grid-auto-flow: column;
          gap: 5px;
          align-items: baseline;
          justify-content: center;
          margin-block-start: 2px;

          @media not all and (width >=768px) {
            gap: calc((100 / 750) * 5 * 1vw);
            margin-block-start: 4px;
          }

          & strong {
            font-size: 90px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 90 * 1vw);
            }
          }

          & span {
            font-size: 33px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 33 * 1vw);
            }
          }
        }
      }
    }
  }

  /* =====================
    requirements
  ===================== */
  section[data-id='requirements'] {
    padding-block: 123px 129px;
    background: #e9f1f2;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 119 * 1vw) calc((100 / 750) * 132 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    .u-table {
      margin-block-start: 60px;

      @media not all and (width >=768px) {
        margin-block-start: calc((100 / 750) * 0 * 1vw);
      }
    }

    .no-recruitment {
      padding-block: 100px 0;
      font-weight: bold;
      text-align: center;

      @media not all and (width >=768px) {
        padding-block: calc((100 / 750) * 80 * 1vw) 0;
      }
    }

    .u-anchor {
      max-inline-size: 304px;
      margin-block-start: 60px;
      margin-inline: auto;

      @media not all and (width >=768px) {
        max-inline-size: calc((100 / 750) * 450 * 1vw);
        margin-block-start: calc((100 / 750) * 60 * 1vw);
      }
    }
  }

  /* =====================
    flow
  ===================== */
  section[data-id='flow'] {
    padding-block: 123px 183px;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 115 * 1vw) calc((100 / 750) * 211 * 1vw);
    }

    & ol {
      display: grid;
      grid-auto-columns: auto auto 1fr auto;
      justify-content: flex-start;
      padding-inline: 60px;
      margin-block: 49px 60px;
      margin-inline: auto;
      counter-reset: number;

      @media not all and (width >=768px) {
        grid-auto-columns: auto 1fr auto;
      }

      @media not all and (width >=768px) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
        margin-block: calc((100 / 750) * 52 * 1vw) 7.7vw;
      }

      & li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 4;
        gap: 32px;
        align-items: center;
        padding-block: 20px;
        padding-right: 30px;
        border-top: 1px solid #d2d2d2;
        border-bottom: 1px solid transparent;

        @media not all and (width >=768px) {
          grid-column: span 3;
          gap: 1.6vw 3.9vw;
          padding-block: 6.7vw 5.2vw;
          padding-right: 0;
        }

        &:last-child {
          border-block-end-color: #d2d2d2;
        }
      }

      & li::before {
        display: grid;
        place-content: center;
        inline-size: 130px;
        aspect-ratio: 1 / 1;
        padding-block-start: 22px;
        margin-inline-end: 0;
        font-family: var(--title);
        font-size: 45px;
        color: white;
        content: '0' counter(number);
        counter-increment: number;
        background-image: url('../img/recruit/flow/step.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

      @media not all and (width >=768px) {
        & li::before {
          display: flex;
          grid-row: 1 / 3;
          inline-size: calc((100 / 750) * 130 * 1vw);
          padding-block-start: 5.4vw;
          font-size: calc((100 / 750) * 40.85 * 1vw);
        }
      }

      & li::after {
        display: block;
        inline-size: 84px;
        aspect-ratio: 84 / 104;
        content: '';
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

      @media not all and (width >=768px) {
        & li::after {
          grid-row: 1 / 3;
        }
      }

      & li[data-id='1']::after {
        background-image: url('../img/recruit/flow/01.svg');
      }

      @media not all and (width >=768px) {
        & li[data-id='1']::after {
          inline-size: calc((100 / 750) * 105 * 1vw);
        }
      }

      & li[data-id='2']::after {
        background-image: url('../img/recruit/flow/02.svg');
      }

      @media not all and (width >=768px) {
        & li[data-id='2']::after {
          inline-size: calc((100 / 750) * 105 * 1vw);
        }
      }

      & li[data-id='3']::after {
        background-image: url('../img/recruit/flow/03.svg');
      }

      @media not all and (width >=768px) {
        & li[data-id='3']::after {
          inline-size: calc((100 / 750) * 105 * 1vw);
        }
      }

      & li[data-id='4']::after {
        background-image: url('../img/recruit/flow/04.svg');
      }

      @media not all and (width >=768px) {
        & li[data-id='4']::after {
          inline-size: calc((100 / 750) * 105 * 1vw);
        }
      }

      h3 {
        margin-right: 32px;
        font-size: 22px;
        font-weight: bold;
        color: var(--deepblue);

        @media not all and (width >=768px) {
          align-self: flex-start;
          margin-right: 0;
          font-size: calc((100 / 750) * 36 * 1vw);
          line-height: 1.6;
        }
      }

      p {
        font-size: 14px;

        @media not all and (width >=768px) {
          display: grid;
          grid-row: 2 / 2;
          grid-column: 2 / 2;
          font-size: calc((100 / 750) * 24 * 1vw);
          line-height: 1.79;
        }
      }
    }

    .u-anchor {
      max-inline-size: 304px;
      margin-block-start: 60px;
      margin-inline: auto;

      @media not all and (width >=768px) {
        max-inline-size: calc((100 / 750) * 448 * 1vw);
        margin-block-start: calc((100 / 750) * 0 * 1vw);
      }
    }
  }
}

/* *********************
  interviewページ
********************* */
.interview {
  main::before {
    position: absolute;
    top: 153px;
    left: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    content: '';
    background-image: url('../img/common/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  @media not all and (width >=768px) {
    main::before {
      top: -42vw;
      background-image: url('../img/common/bg_sp.webp');
      background-size: contain;
    }
  }

  & section[data-type='list'] {
    padding-block: 69px 183px;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 89 * 1vw) calc((100 / 750) * 212 * 1vw);
    }

    & ul {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      justify-content: center;
      padding-inline: 11px;
      margin-block: 123px 0;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 20 * 1vw);
        padding-inline: calc((100 / 750) * 50 * 1vw);
        margin-block: calc((100 / 750) * 119 * 1vw) calc((100 / 750) * 0 * 1vw);
      }

      & li {
        inline-size: 315px;

        @media not all and (width >=768px) {
          inline-size: calc((100 / 750) * 315 * 1vw);
        }
      }
    }

    .u-anchor {
      max-inline-size: 338px;
      margin-block-start: 130px;
      margin-inline: auto;

      @media not all and (width >=768px) {
        max-inline-size: calc((100 / 750) * 500 * 1vw);
        margin-block-start: calc((100 / 750) * 130 * 1vw);
      }
    }
  }
}

.interview[data-type='detail'] {
  section[data-type='detail'] {
    padding-block: 47px 183px;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 47 * 1vw) calc((100 / 750) * 212 * 1vw);
    }

    .wrap {
      display: grid;
      grid-auto-flow: column;
      align-items: flex-start;
      justify-content: space-between;

      @media not all and (width >=768px) {
        grid-auto-flow: row;
        justify-content: stretch;
      }

      .text {
        display: grid;
        gap: 0;
        padding-block-start: 137px;
        margin-block: calc((1em - 1lh) / 2);

        @media not all and (width >=768px) {
          padding-block-start: calc((100 / 750) * 20 * 1vw);
          padding-inline: calc((100 / 750) * 40 * 1vw);
        }
      }

      .unit[data-id='1'] {
        display: grid;
        grid-auto-flow: column;
        gap: 5px;
        align-items: center;
        justify-content: flex-start;
        font-size: 20px;
        font-weight: 700;

        @media not all and (width >=768px) {
          gap: 0.8vw;
          font-size: calc((100 / 750) * 24 * 1vw);
        }
      }

      .unit[data-id='2'] {
        display: grid;
        grid-auto-flow: column;
        gap: 26px;
        align-items: baseline;
        justify-content: flex-start;
        margin-block-start: 48px;
        font-weight: bold;

        @media not all and (width >=768px) {
          gap: calc((100 / 750) * 33 * 1vw);
          margin-block-start: calc((100 / 750) * 26 * 1vw);
          font-size: calc((100 / 750) * 24 * 1vw);
        }

        & h1 {
          font-family: Alatsi, sans-serif;
          font-size: 120px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 3.6px;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 120 * 1vw);
            letter-spacing: calc((100 / 750) * 3.6 * 1vw);
          }
        }
      }

      .unit[data-id='3'] {
        margin-block-start: 12px;
        font-size: 30px;
        font-weight: bold;
        line-height: 1.6;
        white-space: break-spaces;

        @media not all and (width >=768px) {
          margin-block-start: calc((100 / 750) * 27 * 1vw);
          font-size: calc((100 / 750) * 40 * 1vw);
        }
      }

      @media not all and (width >=768px) {
        .img {
          align-self: center;
          margin-block-start: 7.5vw;
          margin-inline: auto;

          & img {
            width: 75vw;
            height: auto;
          }
        }
      }
    }

    .qa {
      display: grid;
      gap: 30px;
      padding-inline: 60px;
      margin-block-start: 99px;
      counter-reset: number;

      @media not all and (width >=768px) {
        gap: 1.6vw;
        padding-inline: calc((100 / 750) * 40 * 1vw);
        margin-block-start: calc((100 / 750) * 129 * 1vw);
      }

      .item {
        counter-increment: number;

        .question {
          position: relative;
          display: grid;
          grid-auto-flow: column;
          gap: 22px;
          align-items: center;
          justify-content: flex-start;
          font-size: 24px;
          font-weight: bold;
          color: var(--blue);

          @media not all and (width >=768px) {
            grid-template-rows: auto;
            grid-template-columns: auto 1fr;
            gap: 3.2vw;
            font-size: calc((100 / 750) * 30 * 1vw);

            p {
              line-height: 1.26;
            }
          }

          &::before {
            display: grid;
            place-content: center;
            inline-size: 70px;
            aspect-ratio: 1 / 1;
            font-family: var(--title);
            font-size: 31px;
            font-weight: 700;
            line-height: 1;
            color: white;
            letter-spacing: 3.1px;
            content: 'Q' counter(number);
            background: var(--blue);
            border-radius: calc(infinity * 1px);
          }

          @media not all and (width >=768px) {
            &::before {
              inline-size: calc((100 / 750) * 90 * 1vw);
              font-size: calc((100 / 750) * 38 * 1vw);
              letter-spacing: calc((100 / 750) * 3.8 * 1vw);
            }
          }

          &::after {
            position: absolute;
            bottom: 4px;
            left: 0;
            inline-size: 100%;
            block-size: 1px;
            content: '';
            background: var(--blue);
            clip-path: inset(0 0 0 20px);
          }

          @media not all and (width >=768px) {
            &::after {
              inset: unset;
              grid-row: -1 / -1;
              grid-column: 1 / -1;
              margin-block-start: 3.1vw;
              clip-path: unset;
            }
          }
        }

        .answer {
          padding-block: 20px;
          padding-inline: 92px 0;

          @media not all and (width >=768px) {
            padding-block: calc((100 / 750) * 42 * 1vw) 4.7vw;
            padding-inline: 0;
            font-size: calc((100 / 750) * 26 * 1vw);

            & p {
              line-height: 1.76;
            }
          }
        }
      }
    }

    .u-anchor {
      max-inline-size: 274px;
      margin-block-start: 98px;
      margin-inline: auto;

      @media not all and (width >=768px) {
        max-inline-size: calc((100 / 750) * 400 * 1vw);
        margin-block-start: calc((100 / 750) * 75 * 1vw);
      }
    }
  }
}