@charset "UTF-8";

/* =====================
  components
===================== */

/* ==== c-head ==== */
.c-head {
  inline-size: fit-content;
  padding-block: 2px 5px;
  padding-inline: 22px;
  font-size: 24px;
  font-weight: 500;
  color: var(--black);
  text-indent: 1px;
  border-block: 10px solid #fff9c8;

  @media only screen and (width <= 768px) {
    padding-block: 0.2vw 0;
    padding-inline: 4.2vw;
    font-size: calc((100 / 390) * 16 * 1vw);
    line-height: 1.7;
    text-indent: -0.1vw;
    border-block: calc((100 / 390) * 8 * 1vw) solid #fff9c8;
  }
}

/* =====================
  mv
===================== */
.mv {
  --_block-size: 840px;

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

  position: relative;
  inline-size: 100%;
  block-size: calc(100lvh + 0px);
  min-block-size: var(--_block-size);
  overflow: clip;

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

  /* ==== picture ==== */
  .picture {
    position: absolute;
    inset: 0;

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  /* ==== inner ==== */
  .inner {
    display: block grid;
    grid-auto-rows: min-content;
    align-items: flex-start;
    min-block-size: var(--_block-size);
    padding-block: 223px 30px;
    padding-inline: 80px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      display: flex;
      flex-direction: column;
      grid-auto-rows: min-content;
      align-items: flex-end;
      align-self: flex-end;
      justify-content: flex-end;
      padding-block: calc((100 / 390) * 0 * 1vw) 39.2vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    /* ==== catch-en ==== */
    .catch-en {
      align-self: flex-start;
      max-inline-size: 574px;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 64px;
      font-weight: 600;
      line-height: 1.2;
      color: var(--primary);
      letter-spacing: 1.92px;

      @media only screen and (width <= 768px) {
        max-inline-size: 80vw;
        padding-inline: 0 6vw;
        font-size: calc((100 / 390) * 32 * 1vw);
        line-height: 1.1;
        letter-spacing: calc((100 / 390) * 0.96 * 1vw);
      }
    }

    /* ==== catch ==== */
    .catch {
      align-self: flex-start;
      margin-block: 27px;
      font-size: 24px;
      font-weight: 600;
      line-height: 1.5;
      color: var(--primary);

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

    /* ==== show-up-text ==== */
    .show-up-text {
      position: relative;
      display: block flow;
      overflow: hidden;

      span.char {
        opacity: 0;
      }

      &.on {
        span.char {
          display: inline-block;
          overflow: clip;
          white-space: nowrap;
          opacity: 0;
          translate: 0 100%;
          animation: show-up-text 350ms cubic-bezier(0, 0.6, 0.4, 1) 4000ms 1 alternate forwards running;
        }
      }
    }

    /* ==== anchor ==== */
    .anchor {
      position: absolute;
      inset-block-end: 106px;
      inset-inline-start: 80px;
      display: block flex;
      gap: 24px;
      align-self: flex-start;

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

      & a {
        display: block grid;
        grid-template-columns: 1fr auto;
        gap: 12px 41px;
        padding-block: 27px;
        padding-inline: 30px 32px;
        border-radius: 20px;
        transition: all 250ms ease 0s;

        @media only screen and (width <= 768px) {
          display: block flex;
          gap: calc((100 / 390) * 16 * 1vw);
          align-items: center;
          padding-block: calc((100 / 390) * 13.9 * 1vw);
          padding-inline: calc((100 / 390) * 30.5 * 1vw);
          border-radius: calc((100 / 390) * 10 * 1vw);
        }

        .title {
          grid-area: 1 / 1 / 2 / 2;
          margin-block: calc((1em - 1lh) / 2);
          font-size: 24px;
          font-weight: 500;
          line-height: 1;

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

        & span[lang='en'] {
          grid-area: 2 / 1 / 3 / 2;
          margin-block: calc((1em - 1lh) / 2);
          font-size: 15px;
          font-weight: 600;
          line-height: 1;

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

        &::after {
          grid-area: 1 / 2 / 3 / 3;
          inline-size: 43px;
          aspect-ratio: 1 / 1;
          content: '';
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          translate: 2px 4px;
        }

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

        &[data-id='requirements'] {
          color: var(--main);
          background: rgb(255 255 255 / 60%);
          border: 2px solid var(--main);

          @media only screen and (width <= 768px) {
            background: rgb(255 255 255 / 90%);
          }

          &::after {
            background-image: url('../img/_common/icon/arrow-circle-main.svg');
          }

          @media (any-hover: hover) {
            &:hover {
              background: white;
            }
          }
        }

        &[data-id='entry'] {
          color: var(--white);
          background: rgb(68 186 222 / 60%);
          border: 2px solid var(--white);

          @media only screen and (width <= 768px) {
            background: rgb(68 186 222 / 90%);
          }

          &::after {
            background-image: url('../img/_common/icon/arrow-circle-white-white.svg');
          }

          @media (any-hover: hover) {
            &:hover {
              background: var(--d_sky);
            }
          }
        }
      }
    }
  }
}

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

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 61 * 1vw) 16.2vw;
    background-image: url('../img/recruit/message/bg_sp.webp');
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-rows: min-content 1fr;
    gap: 23px 139px;
    padding-inline: 40px;

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

    .img {
      position: relative;
      grid-row: span 2;
      grid-column-start: 1;
      margin-block-start: 19px;

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

      & [data-id='1'] {
        border-radius: 30px;

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

      & [data-id='2'] {
        display: block;
        margin-block-start: -72px;
        margin-inline: auto -61px;
        border-radius: 20px;

        @media only screen and (width <= 768px) {
          inline-size: calc((100 / 390) * 184 * 1vw);
          margin-block-start: -11vw;
          margin-inline: auto 0.1vw;
          border-radius: calc((100 / 390) * 20 * 1vw);
        }
      }
    }

    .head {
      grid-column-start: 2;
      font-size: 32px;
      font-weight: 500;

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

    .u-anchor {
      grid-column-start: 2;
    }

    .body {
      grid-column-start: 2;
      color: var(--black);

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

      & p {
        font-size: 18px;
        line-height: 2;

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

      & p + p {
        margin-block-start: 36px;

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

/* =====================
  environment
===================== */
.environment {
  padding-block: 91px 96px;

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

  /* ==== u-inner ==== */
  .u-inner {
    position: relative;
    display: block grid;
    gap: 61px;
    padding-inline: 72px;

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

      .u-hgroup {
        margin-inline-start: calc((100 / 390) * 20 * 1vw);
      }
    }
  }

  /* ==== contents ==== */
  .contents {
    position: relative;
    padding-block: 0;
    padding-inline: 5px;

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

    &::before,
    &::after {
      position: absolute;
      display: block flow;
      inline-size: 640px;
      block-size: 687px;
      pointer-events: none;
      content: '';
    }

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

    &::before {
      inset-block-start: 19px;
      inset-inline-end: -33px;
      border-block-start: 2px solid var(--grey02);
      border-inline-end: 2px solid var(--grey02);
    }

    &::after {
      inset-block-end: 0;
      inset-inline-start: -32px;
      border-block-end: 2px solid var(--grey02);
      border-inline-start: 2px solid var(--grey02);
    }

    & ul {
      display: block grid;
      gap: 56px;
      padding-block-end: 112px;
      padding-inline: 132px;
      margin-block-start: 62px;

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

    & li {
      display: block grid;
      grid-auto-rows: min-content;
      grid-auto-columns: 150px 1fr;
      gap: 0 21px;

      @media only screen and (width <= 768px) {
        grid-auto-columns: calc((100 / 390) * 70 * 1vw) 1fr;
        gap: 0 calc((100 / 390) * 24 * 1vw);
      }

      &:nth-child(3) {
        @media only screen and (width <= 768px) {
          translate: -1vw 0;
        }
      }

      .point {
        display: block grid;
        grid-row: span 2;
        grid-column-start: 1;
        gap: 9px;
        place-content: center;
        inline-size: 115px;
        aspect-ratio: 1 / 1;
        color: var(--blue);
        text-align: center;
        background: var(--grey02);
        border-radius: calc(infinity * 1px);

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

        & span {
          font-size: 24px;
          line-height: 1;

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

        & span[lang='en'] {
          font-family: var(--title);
          font-size: 16px;
          font-weight: 500;
          line-height: 1;

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

      .catch {
        grid-column-start: 2;
        align-self: flex-start;
        margin-block-start: -4px;
        font-size: 20px;
        font-weight: 500;
        color: var(--main);

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

      .body {
        grid-column-start: 2;
        align-self: flex-start;
        padding-inline-end: 46px;
        font-size: 18px;
        line-height: 2;
        color: var(--black);

        @media only screen and (width <= 768px) {
          padding-inline-end: 2.6vw;
          font-size: calc((100 / 390) * 15 * 1vw);
          line-height: 1.8;
        }
      }

      &[data-id='4'] {
        .body {
          @media (width > 768px) {
            padding-inline-end: 0;
          }
        }
      }
    }
  }
}

/* =====================
  number
===================== */
.number {
  padding-block: 0 97px;
  padding-inline: 120px;

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

  /* ==== c-head ==== */
  .c-head {
    @media (width > 768px) {
      padding-block: 3px 5px;
      padding-inline: 19px;
      margin-block-start: 29px;
      text-indent: 1px;
    }
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 0 25px;
    align-items: flex-start;
    padding-block: 88px;
    padding-inline: 80px;
    background: var(--grey02);

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

  /* ==== body ==== */
  .body {
    margin-block-start: 45px;
    font-size: 18px;
    color: var(--black);

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

  /* ==== grid ==== */
  @media (width > 768px) {
    .c-head {
      grid-area: 1 / 1 / 2 / 4;
    }

    .body {
      grid-area: 2 / 1 / 4 / 4;
      align-self: flex-start;
      color: var(--black);
    }

    & li[data-id='1'] {
      grid-area: 3 / 1 / 4 / 3;
      inline-size: 330px;
    }

    & li[data-id='2'] {
      grid-area: 3 / 3 / 4 / 4;
      inline-size: 330px;
    }

    & li[data-id='3'] {
      grid-area: 3 / 4 / 4 / 5;
      inline-size: 330px;
    }

    & li[data-id='4'] {
      grid-area: 1 / 3 / 3 / 5;
    }
  }

  ul {
    display: contents;

    @media only screen and (width <= 768px) {
      display: block grid;
      gap: 4vw;
      margin-block-start: 10.6vw;
    }

    & li {
      display: grid;
      gap: 0;
      padding-block: 33px 28px;
      padding-inline: 25px;
      background: #fff;
      border: 4px solid var(--sub, #fee847);
      border-radius: 20px;

      @media only screen and (width <= 768px) {
        padding-block: 6.3vw 5.5vw;
        padding-inline: 25px;
        border: calc((100 / 390) * 4 * 1vw) solid var(--sub, #fee847);
        border-radius: calc((100 / 390) * 20 * 1vw);
      }

      /* ==== head ==== */
      .head {
        display: block grid;
        gap: 7px;
        justify-content: center;
        text-align: center;

        @media only screen and (width <= 768px) {
          gap: 1.8vw;
        }

        & h4 {
          font-size: 20px;
          font-weight: 500;
          line-height: 1;

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

        & span[lang='en'] {
          font-family: var(--sans-serif);
          font-size: 15px;
          font-weight: 500;
          line-height: 1;
          color: var(--grey);
          text-align: center;
          translate: 0 -2px;

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

      /* ==== p ==== */
      & p {
        padding-inline: 13px;
        color: var(--black);

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

      /* ==== unit ==== */
      .unit {
        display: block flex;
        gap: 4px;
        align-items: baseline;
        justify-content: center;
        inline-size: fit-content;
        margin-block-start: 11px;
        margin-inline: auto;

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

      /* ==== num ==== */
      .num {
        font-family: var(--title);
        font-size: 80px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--blue);

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

      /* ==== small ==== */
      .small {
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--blue);

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

    @media (width > 768px) {
      & li[data-id='1'] {
        inline-size: 330px;

        .unit {
          translate: 3px -1px;

          .num {
            inline-size: 86px;
            text-align: right;
          }

          & img {
            translate: -5px 5px;
          }
        }
      }

      & li[data-id='2'] {
        inline-size: 330px;

        .unit {
          translate: 1px -1px;

          & img:first-child {
            translate: -12px 6px;
          }

          & img:last-child {
            translate: 13px 6px;
          }
        }
      }

      & li[data-id='3'] {
        inline-size: 330px;

        .unit {
          translate: 8px -1px;

          & img {
            translate: -16px 6px;
          }
        }
      }

      & li[data-id='4'] {
        display: block grid;
        gap: 0;
        justify-self: flex-end;
        inline-size: 580px;
        padding-block: 28px;
        padding-inline: 56px 37px;
        margin-block-end: 25px;

        .head {
          grid-column: 2;
          margin-block-start: 19px;
        }

        .unit {
          grid-column: 2;
          gap: 4px;
          margin-block-start: 9.7px;
          translate: 9px 0;

          .num {
            inline-size: 86px;
            text-align: right;
          }

          & img {
            translate: -17px 6px;
          }
        }

        & p {
          grid-column: 2;
          padding-inline: 0;
          font-size: 16px;
          text-align: center;
        }

        & > img {
          grid-row: 1 / span 4;
          grid-column: 1;
        }
      }
    }

    @media only screen and (width <= 768px) {
      & li[data-id='1'] {
        .unit {
          gap: 1.2vw;
          translate: calc((100 / 390) * 2.4 * 1vw) 0.1vw;

          .num {
            inline-size: 86px;
            text-align: right;
          }

          & img {
            translate: -5px 5px;
          }
        }
      }

      & li[data-id='2'] {
        .unit {
          translate: 0.8vw -0.2vw;

          & img:first-child {
            translate: -2.5vw 1.7vw;
          }

          & img:last-child {
            translate: 2.3vw 6px;
          }
        }

        & p {
          padding-inline: 2.8vw;
        }
      }

      & li[data-id='3'] {
        .unit {
          translate: 2.2vw -0.2vw;

          & img {
            translate: -3.4vw 1.7vw;
          }
        }

        & p {
          padding-inline: 2.8vw;
        }
      }

      & li[data-id='4'] {
        padding-block: 6.3vw 7vw;

        .unit {
          translate: 2.2vw -0.2vw;

          & img {
            translate: -3.4vw 1.7vw;
          }
        }

        & p {
          text-align: center;
        }

        & > img {
          margin-block-start: 4.6vw;
          margin-inline: auto;
        }
      }
    }
  }
}

/* =====================
  interview
===================== */
.interview {
  padding-block: 90px 118px;
  background: #fffad3;

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

  .u-inner {
    position: relative;

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

  .u-hgroup {
    margin-inline-start: 28px;

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

  /* ==== swiper ==== */
  .swiper {
    margin-block-start: -93px;

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

  .swiper-controller {
    position: absolute;
    inset-block-start: 155px;
    inset-inline-start: 80px;
    z-index: 3;
    display: block flex;
    gap: 40px;

    @media only screen and (width <= 768px) {
      inset: unset;
      inset-block-start: 3.5vw;
      inset-inline: 63.4vw 8.2vw;
      z-index: 4;
      gap: calc((100 / 390) * 32 * 1vw);
    }

    & button {
      display: block grid;
      inline-size: 46px;
      aspect-ratio: 1 / 1;

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

      &::after {
        display: block;
        content: '';
        background-image: url('../img/_common/icon/arrow-circle-grey.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }

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

      &.next::after {
        rotate: 180deg;
      }
    }
  }

  /* ==== wrap ==== */
  .wrap {
    position: relative;
    z-index: 2;
    overflow: clip;
    pointer-events: none;

    /* ==== head ==== */
    .head {
      position: relative;
      pointer-events: none;

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

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

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

      .catch {
        position: absolute;
        inset-block-start: 111px;
        inset-inline-start: 890px;

        @media only screen and (width <= 768px) {
          inset-block-start: 58.7vw;
          inset-inline-start: 0;
        }

        & p {
          display: inline;
          inline-size: fit-content;
          padding-block: 12px;
          padding-inline: 30px 35px;
          font-size: 24px;
          font-weight: 500;
          line-height: 3.1;
          background: white;
          border-radius: 10px;
          -webkit-box-decoration-break: clone;
          box-decoration-break: clone;

          @media only screen and (width <= 768px) {
            padding-block: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 12 * 1vw);
            padding-inline: 6.2vw;
            font-size: calc((100 / 390) * 16 * 1vw);
            line-height: 3.3;
            border-radius: calc((100 / 390) * 10 * 1vw);
          }
        }
      }
    }

    /* ==== body ==== */
    .body {
      padding-block: 40px 41px;
      padding-inline: 40px 50px;
      margin-block-start: -120px;

      @media (width > 768px) {
        background: white;
      }

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

      .position {
        display: block grid;
        grid-auto-rows: min-content;
        gap: 8px;
        inline-size: fit-content;
        margin-inline-start: 147px;
        font-size: 18px;
        color: var(--blue);

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

        .unit {
          display: block flex;
          flex-wrap: wrap;
          gap: 24px;
          align-items: baseline;
          line-height: 1;

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

        .name {
          margin-block: calc((1em - 1lh) / 2);
          font-family: var(--title);
          font-size: 64px;
          font-weight: 700;
          line-height: 1;

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

        .division {
          align-self: flex-start;
          margin-block: calc((1em - 1lh) / 2);
          line-height: 1;
        }
      }

      /* ==== qa ==== */
      .qa {
        display: block flex;
        flex-wrap: wrap;
        gap: 32px;
        justify-content: space-between;
        margin-block-start: 76px;

        @media only screen and (width <= 768px) {
          gap: 4vw;
          inline-size: 100%;
          padding-block: 8.1vw 12.1vw;
          padding-inline: calc((100 / 390) * 16 * 1vw);
          margin-block-start: 13.7vw;
          background: white;
        }

        & li {
          display: block grid;
          gap: 14px;
          inline-size: calc(50% - 16px);
          padding-block: 43px 51px;
          padding-inline: 40px;
          background: var(--grey03, #f5f5f5);
          border-radius: 20px;

          @media only screen and (width <= 768px) {
            gap: 3.9vw;
            inline-size: 100%;
            padding-block: 4.7vw 4.4vw;
            padding-inline: calc((100 / 390) * 16 * 1vw);
            border-radius: calc((100 / 390) * 20 * 1vw);
          }

          @media (width > 768px) {
            &[data-type='large'] {
              inline-size: 100%;

              .question::before {
                font-family: var(--sans-serif);
                translate: 0 -3px;
              }

              .answer {
                padding-inline-start: 5px;
              }

              .answer::before {
                translate: -3px -13px;
              }
            }
          }

          .question {
            position: relative;
            display: block flex;
            gap: 16px;
            align-items: center;
            padding-block-start: 9px;
            padding-inline-start: 0;
            font-size: 20px;
            font-weight: 500;
            line-height: 1.5;
            color: var(--blue);

            @media only screen and (width <= 768px) {
              gap: 4vw;
              padding-block-start: 1.6vw;
              padding-inline: 10.2vw 4vw;
              font-size: calc((100 / 390) * 16 * 1vw);
              line-height: 1.6;
            }

            &::before {
              flex-shrink: 0;
              font-family: var(--title);
              font-size: 48px;
              font-weight: 500;
              line-height: 1;
              color: #c0c0c0;
              content: 'Q';
              translate: 0 2px;
            }

            @media only screen and (width <= 768px) {
              &::before {
                position: absolute;
                inset-block-start: 0;
                inset-inline-start: 0;
                font-size: calc((100 / 390) * 36 * 1vw);
              }
            }
          }

          .answer {
            position: relative;
            display: block flex;
            gap: 18px;
            align-items: center;
            font-size: 18px;
            line-height: 1.8;
            color: var(--black);

            @media only screen and (width <= 768px) {
              align-items: baseline;
              padding-inline-start: 10.2vw;
              font-size: calc((100 / 390) * 15 * 1vw);
            }

            &::before {
              flex-shrink: 0;
              font-family: var(--title);
              font-size: 48px;
              font-weight: 500;
              line-height: 1;
              color: #a2e4f9;
              content: 'A';
              translate: 1px 2px;
            }

            @media only screen and (width <= 768px) {
              &::before {
                position: absolute;
                inset-block-start: 0.8vw;
                inset-inline-start: 0;
                font-size: calc((100 / 390) * 36 * 1vw);

                /* translate: 0.2vw 3.5vw; */
              }
            }
          }
        }
      }
    }
  }
}

/* =====================
  parallax
===================== */
:root {
  --_transition: transform 1s ease, opacity 0.4s ease;
}

.js-parallax {
  opacity: 0;
  transform: translateY(1.75em);
  transition: var(--_transition);
  transition-delay: var(--_delay, 200ms), var(--_delay, 200ms);
  will-change: transform, opacity;

  &.on {
    opacity: 1;
    transform: translateY(0);
  }
}