@charset "UTF-8";

/* =====================
  header active
===================== */
@layer style {
  .header .nav>ul {
    --active-anchor: --business;

    &::before {
      opacity: 1;
    }
  }
}

/* =====================
  article
===================== */
.article[data-id='1'] {
  padding-block: 119px;

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

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

  /* ==== body ==== */
  .body {
    display: block grid;
    gap: 24px;
    font-size: 18px;
    text-align: center;

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

    p {
      line-height: 1.9;
    }

    strong {
      font-size: 32px;
      font-weight: 700;
      color: var(--primary);

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

        br {
          display: none;
        }
      }
    }
  }

  /* ==== ol ==== */
  ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-block-start: 79px;
    counter-reset: number;

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

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

    li {
      position: relative;
      display: block grid;
      align-content: flex-start;
      padding-block: 80px 63px;
      padding-inline: 40px;
      background: var(--lightblue);
      border-radius: 40px;

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

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

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

      &::after {
        position: absolute;
        inset-block-end: 81px;
        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: 11%;
          inset-inline-end: 8vw;
          inline-size: calc((100 / 390) * 30 * 1vw);
          background-size: calc((100 / 390) * 10 * 1vw);
          border-radius: calc((100 / 390) * 6 * 1vw);
        }
      }

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

        @media (width <=768px) {
          display: block flow;
          inline-size: 73%;
          margin-inline: auto;
        }
      }

      hgroup {
        margin-block-start: 39px;

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

      a {
        position: absolute;
        inset: 0;
        display: block flow;
      }

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