@charset "UTF-8";

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

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

  position: relative;
  block-size: var(--_block-size);

  /* ==== swiper-slide ==== */
  .swiper-slide {
    position: relative;
  }

  .swiper-slide[data-color='white'] {
    :where(.catch, [lang='en']) {
      color: white;
    }

    .anchor {
      color: var(--color-text-primary);
      background-color: white;

      &::after {
        background-color: var(--primary);
        background-image: url('../img/_common/icon/arrow_white.svg');
        border-color: var(--primary);
      }

      @media (any-hover: hover) {
        &:hover {
          color: var(--white);
          background: var(--primary);
          border-color: var(--primary);

          &::after {
            background-color: var(--white);
            background-image: url('../img/_common/icon/arrow_blue.svg');
            border-color: var(--white);
          }
        }
      }
    }

    .scroll {
      &::before {
        background-color: var(--white);
      }

      span::before {
        background: white;
      }
    }
  }

  .swiper-slide[data-id='3'] {
    @media (width <=768px) {
      background: white;
    }
  }

  /* ==== picture ==== */
  picture {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    pointer-events: none;
  }

  /* ==== inner ==== */
  .inner {
    position: relative;
    z-index: 2;
    display: block grid;
    align-content: flex-start;
    align-items: flex-start;
    block-size: 100%;
    padding-block-start: 496px;
    padding-inline: 80px;

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

  /* ==== catch ==== */
  .catch {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.4;

    @media (width > 768px) {
      letter-spacing: 1.44px;
    }

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

  /* ==== lang="en" ==== */
  [lang='en'] {
    margin-block-start: 15px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;

    @media (width > 768px) {
      letter-spacing: 1.08px;
    }

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

  /* ==== anchor ==== */
  .anchor {
    display: block flex;
    gap: 20px;
    align-items: center;
    inline-size: fit-content;
    padding-block: 6px 10px;
    padding-inline: 30px;
    margin-block-start: 38px;
    font-weight: 700;
    color: white;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-style: solid;
    text-decoration-color: currentcolor;
    text-underline-offset: 11px;
    background: var(--primary);
    border: 2px solid white;
    border-radius: 10px;
    transition:
      color 250ms ease 0s,
      border-color 250ms ease 0s,
      background-color 250ms ease 0s;
    will-change: color, background-color, border-color;

    @media (width <=768px) {
      gap: 4vw;
      padding-block: 1.4vw 3.1vw;
      padding-inline: 4.1vw;
      margin-block-start: 5vw;
      font-size: calc((100 / 390) * 14 * 1vw);
      text-underline-offset: calc((100 / 390) * 11 * 1vw);
      border-radius: calc((100 / 390) * 10 * 1vw);
    }

    &::after {
      inline-size: 44px;
      aspect-ratio: 1 / 1;
      content: '';
      background-color: var(--white);
      background-image: url('../img/_common/icon/arrow_blue.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px;
      border: 2px solid var(--white);
      border-radius: 6px;
      translate: 0 2px;
      transition:
        background-color 250ms ease 0s,
        background-image 250ms ease 0s,
        border-color 250ms ease 0s;
      will-change: background-color, background-image, border-color;

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

    @media (any-hover: hover) {
      &:hover {
        color: var(--primary);
        background-color: white;
        border-color: var(--primary);

        &::after {
          background-color: var(--primary);
          background-image: url('../img/_common/icon/arrow_white.svg');
          border-color: var(--primary);
        }
      }
    }
  }

  /* ==== .scroll ==== */
  .scroll {
    inset-block-end: 80px;
    inset-inline: unset;
    inset-inline-end: 41.5px;
    translate: unset;

    @media (width <=768px) {
      inset-block-end: calc((100 / 390) * 16 * 1vw);
      inset-inline-end: calc((100 / 390) * 16 * 1vw);
      gap: 3vw;
      justify-content: center;
    }

    &::before {
      inline-size: 10px;
      block-size: unset;
      aspect-ratio: 10 / 53;
      content: '';
      background-color: var(--primary);
      mask-image: var(--icon-scroll);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;

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

    span {
      position: relative;
      display: block flow;
      inline-size: 1px;
      block-size: 40px;
      margin-inline: auto;
      background: transparent;
      translate: 0 0;

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

        /* translate: -1vw 0; */
      }

      &::before {
        position: absolute;
        inset: 0;
        content: '';
        background: var(--primary);
        animation: scroll-move-color 2s cubic-bezier(1, 0, 0, 1) infinite;
      }
    }
  }
}

/* =====================
  about
===================== */
.about {
  padding-block: 96px 78px;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 594px auto;

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

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

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

  /* ==== img ==== */
  .img {
    display: block grid;
    grid-row: 1 / 6;
    grid-column: 2 / 3;
    gap: 32px;
    align-content: flex-start;
    margin-block-start: 27px;

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

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

    img {
      border-radius: 40px;

      @media (width <=768px) {
        border-radius: calc((100 / 390) * 40 * 1vw);
      }

      &[data-id='1'] {
        grid-row: 1 / 2;
        grid-column: 1 / 3;

        @media (width <=768px) {
          translate: -2vw 0;
        }
      }

      &[data-id='2'] {
        grid-row: 2 / 3;
        grid-column: 1 / 2;

        @media (width > 768px) {
          margin-inline-start: 48px;
        }

        @media (width <=768px) {
          translate: 2vw 0;
        }
      }

      &[data-id='3'] {
        grid-row: 2 / 3;
        grid-column: 2 / 3;

        @media (width <=768px) {
          translate: 2vw 0;
        }
      }
    }
  }

  /* ==== catch ==== */
  .catch {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    margin-block-start: 43px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.9;

    @media (width > 768px) {
      letter-spacing: 0.96px;
    }

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

  /* ==== body ==== */
  .body {
    display: block grid;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    gap: 15.7px;
    margin-block-start: 35px;
    font-size: 18px;
    line-height: 1.9;

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

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    margin-block-start: 46px;

    @media (width <=768px) {
      margin-block-start: var(--nudge-5);
      margin-inline: auto;
    }
  }

  /* ==== figure ==== */
  .figure {
    display: block grid;
    place-content: center;
    inline-size: 1440px;
    block-size: 642px;
    margin-block-start: 58px;
    margin-inline: auto;
    text-align: center;
    background-image: url('../img/top/about/figure-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    @media (width <=768px) {
      inline-size: 100%;
      block-size: 100%;
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: var(--nudge-5);
    }
  }
}

/* =====================
  products
===================== */
.products {
  padding-block: 96px 120px;
  background: var(--primary);
  border-radius: 40px;

  @media (width <=768px) {
    padding-block: 7.4vw;
    border-radius: calc((100 / 390) * 40 * 1vw);
  }

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

    .u-hgroup {
      @media (width > 768px) {
        .title {
          translate: 4px 0;
        }
      }
    }
  }

  /* ==== body ==== */
  .body {
    margin-block-start: 48px;
    font-size: 18px;
    line-height: 1.9;
    color: white;
    text-align: center;

    @media (width > 768px) {
      span {
        display: inline-flex;
        translate: -9px 0;
      }
    }

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

  /* ==== ul ==== */
  ul {
    display: block grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-block-start: 64px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-4);
      margin-block-start: var(--nudge-5);
      border-radius: calc((100 / 390) * 40 * 1vw);
    }

    li {
      position: relative;
      display: block grid;
      padding-block: 80px 87px;
      padding-inline: 40px;
      background: white;
      border-radius: 24px;

      @media (width <=768px) {
        padding-block: var(--nudge-5);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        border-radius: calc((100 / 390) * 24 * 1vw);
      }

      h3 {
        display: block flex;
        align-items: center;
        justify-content: space-between;
        margin-block-start: 58px;
        font-family: var(--noto);
        font-size: 18px;
        line-height: 1.9;

        @media (width <=768px) {
          gap: calc((100 / 390) * 16 * 1vw);
          margin-block-start: var(--nudge-3);
          font-size: calc((100 / 390) * 17 * 1vw);
          text-underline-offset: calc((100 / 390) * 12 * 1vw);
        }

        &::after {
          inline-size: 42px;
          aspect-ratio: 1 / 1;
          content: '';
          background-color: var(--primary);
          background-image: url('../img/_common/icon/arrow_white.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: 14px;
          border: 3px solid var(--primary);
          border-radius: 6px;
          transition: background 250ms ease 0s;

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

          @media (width <=768px) {
            inline-size: calc((100 / 390) * 30 * 1vw);
            background-size: calc((100 / 390) * 10 * 1vw);
            border-radius: calc((100 / 390) * 6 * 1vw);
            translate: 0 calc((100 / 390) * 2 * 1vw);
          }
        }
      }

      /* ==== img ==== */
      .img {
        margin-inline: auto;
        overflow: hidden;
        border-radius: 40px;

        @media (width <=768px) {
          border-radius: calc((100 / 390) * 40 * 1vw);
        }

        img {
          transition: scale 250ms ease 0s;
        }
      }

      /* ==== a ==== */
      a {
        position: absolute;
        inset: 0;
        z-index: 2;
      }

      @media (any-hover: hover) {
        &:hover {
          .img img {
            scale: 1.05;
          }

          h3::after {
            background-color: var(--white);
            background-image: url('../img/_common/icon/arrow_blue.svg');
          }
        }
      }
    }
  }
}

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

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    counter-reset: number;
  }

  /* ==== catch ==== */
  .catch {
    margin-block-start: 48px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.9;
    color: var(--primary);

    @media (width > 768px) {
      letter-spacing: 0.96px;
    }

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

  /* ==== section ==== */
  section {
    position: relative;
    display: block grid;
    grid-template-columns: 342px 1fr;
    gap: 0 67px;
    padding-block: 96px 86px;
    padding-inline: 93px 143px;
    margin-block-start: 80px;
    background: var(--lightblue);
    border-radius: 40px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
      padding-block: var(--nudge-4);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: var(--nudge-5);
      border-radius: calc((100 / 390) * 40 * 1vw);
    }

    &::before {
      position: absolute;
      inset-block-start: 41px;
      inset-inline-end: 40px;
      margin-block: calc((1em - 1lh) / 2);
      font-family: var(--title);
      font-size: 88px;
      font-weight: 400;
      line-height: 1;
      color: var(--primary);
      content: counter(number, decimal-leading-zero);
      counter-increment: number;

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

    &::after {
      position: absolute;
      inset-block-end: 62px;
      inset-inline-end: 40px;
      inline-size: 42px;
      aspect-ratio: 1 / 1;
      content: '';
      background-color: var(--primary);
      background-image: url('../img/_common/icon/arrow_white.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px;
      border: 3px solid var(--primary);
      border-radius: 6px;
      transition: background 250ms ease 0s;

      @media (width <=768px) {
        inset-block-end: 17%;
        inset-inline-end: 4vw;
        inline-size: calc((100 / 390) * 30 * 1vw);
        background-size: calc((100 / 390) * 10 * 1vw);
        border-radius: calc((100 / 390) * 6 * 1vw);
      }
    }

    /* ==== u-hgroup2 ==== */
    .u-hgroup2 {
      grid-row: 1 / 2;
      grid-column: 2 / 3;
      margin-block-start: 38px;

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

    /* ==== img ==== */
    img {
      grid-row: 1 / 4;
      grid-column: 1 / 2;

      @media (width <=768px) {
        display: block flow;
        inline-size: 80%;
        margin-block-start: var(--nudge-3);
        margin-inline: auto;
      }
    }

    /* ==== p ==== */
    p {
      margin-block-start: 31px;
      font-size: 18px;
      line-height: 1.9;

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

    &+section {
      margin-block-start: 40px;
    }

    @media (width > 768px) {
      &[data-id='2'] {
        padding-block-end: 64px;

        img {
          translate: -12px -16px;
        }
      }
    }

    a {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: block;
    }

    @media (any-hover: hover) {
      &:hover {
        &::after {
          background-color: var(--white);
          background-image: url('../img/_common/icon/arrow_blue.svg');
        }
      }
    }
  }
}

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

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

  /* ==== u-inner ==== */
  .u-inner {
    padding-block: 80px;
    padding-inline: 80px;
    background-image: url('../img/top/recruit/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 32px;

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

  /* ==== wrap ==== */
  .wrap {
    display: block grid;
    padding-block: 64px;
    padding-inline: 48px;
    background: white;
    border-radius: 32px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      padding-block: var(--nudge-4) var(--nudge-6);
      padding-inline: calc((100 / 390) * 22 * 1vw);
      border-radius: calc((100 / 390) * 32 * 1vw);
    }
  }

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

  /* ==== img ==== */
  .img {
    position: relative;
    display: block grid;
    grid-row: 2 / 6;
    grid-column: 2 / 3;
    justify-content: flex-end;
    margin-block-start: 78px;

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

    img {
      border-radius: 40px;

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

    @media (width > 768px) {
      [data-id='2'] {
        position: absolute;
        inset-block-start: -340px;
        inset-inline-start: -51px;
        pointer-events: none;
      }
    }

    @media (width <=768px) {
      [data-id='2'] {
        position: absolute;
        inset-block-end: -12vw;
        inset-inline-end: 3vw;
        inline-size: 40vw;
        margin-inline: auto 0;
      }
    }
  }

  /* ==== catch ==== */
  .catch {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    margin-block-start: 49px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.9;

    @media (width > 768px) {
      letter-spacing: 0.96px;
    }

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

  /* ==== body ==== */
  .body {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    margin-block-start: 40px;
    font-size: 18px;
    line-height: 1.9;

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

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    margin-block-start: 46px;

    @media (width <=768px) {
      margin-block-start: var(--nudge-4);
      margin-inline: auto;
    }
  }
}

/* =====================
  sdgs
===================== */
.sdgs {
  padding-block: 72px 71px;
  background-image: url('../img/top/sdgs/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

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

  @media (width > 1441px) {
    background-image: url('../img/top/sdgs/bg_wide.webp');
  }

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 650px auto;
    gap: 0 41px;
    align-items: flex-start;
    padding-block: 78px;
    padding-inline: 78px 67px;
    border: 2px solid var(--white);
    border-radius: 40px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
      padding-block: var(--nudge-4) var(--nudge-6);
      padding-inline: calc((100 / 390) * 32 * 1vw);
      border-radius: calc((100 / 390) * 40 * 1vw);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    inline-size: fit-content;
    margin-block-start: 52px;

    @media (width <=768px) {
      margin-block-start: 0;
      margin-inline: auto;
      text-align: center;

      [lang='en'] {
        margin-inline: auto;
        text-align: center;
      }
    }
  }

  /* ==== catch ==== */
  .catch {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin-block-start: 49px;
    font-size: 18px;

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

  /* ==== img ==== */
  .img {
    position: relative;
    grid-row: 1 / 5;
    grid-column: 1 / 2;

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

    .picture {
      border-radius: 40px;

      @media (width <=768px) {
        border-radius: calc((100 / 390) * 40 * 1vw);
      }
    }

    /* ==== list ==== */
    .list {
      position: relative;
      z-index: 2;
      display: block flex;
      gap: 16px;
      justify-content: end;
      margin-block-start: -42px;

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

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

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

    @media (width <=768px) {
      margin-block-start: var(--nudge-4);
      margin-inline: auto;
    }
  }
}

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

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: auto 852px;
    gap: 0 85px;
    align-items: center;

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

    @media (width <=768px) {
      grid-template-columns: 1fr auto;
      gap: 0;
    }
  }

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

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    margin-block-start: 46px;

    @media (width <=768px) {
      grid-row: 1 / 2;
      grid-column: 2 / 3;
      margin-block-start: 0;
    }
  }

  /* ==== ul ==== */
  ul {
    display: block grid;
    grid-template-columns: auto 1fr;
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    align-items: start;
    margin-block-start: 1px;

    @media (width <=768px) {
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      margin-block-start: 8vw;
    }

    li {
      position: relative;
      display: block grid;
      grid-template-columns: subgrid;
      grid-column: span 2;
      gap: 33px;
      align-items: center;
      padding-block: 31.6px;
      padding-inline: 0;
      border-block-start: 1px solid var(--gray_road);
      border-block-end: 1px solid transparent;
      transition: all 250ms ease 0s;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: 0;
        align-items: start;
        justify-content: start;
        padding-block: 3.7vw;
        padding-inline: calc((100 / 390) * 16 * 1vw);

        &:first-child {
          border-block-start-color: transparent;
        }
      }

      &:last-child {
        border-block-end-color: var(--gray_road);
      }

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

          &::after {
            transform: translateX(25%);
          }
        }
      }

      time {
        font-family: var(--title);
        font-weight: 400;
        color: var(--text_gray);

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

      p {
        font-size: 18px;
        word-break: break-all;

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

      a {
        position: absolute;
        inset: 0;
        z-index: 2;
      }
    }
  }
}

/* =====================
  animation
===================== */
[data-parallax='fade'] {
  opacity: 0;
  filter: blur(1rem);
  transition: all 1000ms var(--slideInBezier) var(--_delay, 0ms);

  &.on {
    opacity: 1;
    filter: blur(0);
  }
}

[data-parallax='slideUp'] {
  --_transition: transform 1s var(--slideInBezier), opacity 0.4s var(--slideInBezier);

  opacity: 0;
  transform: translateY(1.5rem);
  transition: var(--_transition);
  transition-delay: var(--_delay, 200ms), var(--_delay, 200ms);
  will-change: transform, opacity;

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