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

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

:where(.u-mv) {
  @media (width <=768px) {
    .picture {
      object-position: -55vw 4vw;
    }
  }
}

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

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

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

  /* ==== u-hgroup ==== */
  .u-hgroup {
    @media (width > 768px) {
      padding-inline: 170px;
    }

    @media (width <=768px) {
      white-space: nowrap;
    }
  }

  /* ==== body ==== */
  .body {
    margin-block-start: 47px;
    font-size: 18px;
    line-height: 1.9;

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

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

  /* ==== img ==== */
  .img {
    display: block grid;
    place-content: center;
    padding-block: 71px;
    margin-block-start: 63px;
    margin-inline: auto;
    border: 1px solid var(--gray_road);
    border-radius: 40px;

    @media (width > 768px) {
      inline-size: 914px;
    }

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

  /* ==== section ==== */
  section {
    display: block grid;
    margin-block-start: 136px;

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

    h3 {
      font-size: 32px;
      line-height: 1.9;
      text-align: center;

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

    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      margin-block-start: 56px;
      counter-reset: number;

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

      li {
        display: block grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
        gap: 29px;
        align-items: center;
        padding-block: 56px;
        padding-inline: 48px;
        background: var(--lightblue);
        border-radius: 40px;

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

      h4 {
        display: block grid;
        gap: 6px;
        font-size: 24px;
        color: var(--primary);
        text-align: center;

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

        &::before {
          display: block grid;
          margin-block: calc((1em - 1lh) / 2);
          font-family: var(--title);
          font-size: 20px;
          font-weight: 400;
          color: var(--text_gray);
          content: 'ACTION ' counter(number, decimal-leading-zero);
          counter-increment: number;

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

      @scope (li) to (.icon) {
        img {
          display: block flow;
          inline-size: 100%;
          margin-block-start: 0;
          margin-inline: auto;
          border-radius: 40px;

          @media (width > 768px) {
            inline-size: 468px;
          }

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

      p {
        font-size: 18px;
        line-height: 1.9;

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

      .icon {
        display: block flex;
        gap: 16px;
        justify-content: center;

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

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

  @scope (section) to (ul) {
    p {
      margin-block-start: 32px;
      font-size: 18px;
      line-height: 1.9;
      text-align: center;

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