@charset "UTF-8";

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

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

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

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

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

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

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

  /* ==== data-id="1" ==== */
  section[data-id='1'] {
    padding-block-end: 120px;

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

    .u-inner {
      grid-template-columns: auto 581px;
      gap: 0 73px;

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

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

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

      @media (width > 768px) {
        margin-block-start: 8px;
      }
    }

    /* ==== body ==== */
    .body {
      display: block grid;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      gap: 23px;
      margin-block-start: 48px;
      font-size: 18px;

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

      p {
        line-height: 1.9;
      }
    }

    /* ==== img ==== */
    img {
      grid-row: 1 / 4;
      grid-column: 2 / 3;
      border-radius: 40px;

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

  /* ==== data-id="2" ==== */
  section[data-id='2'] {
    padding-block: 121px;
    background: var(--lightblue);

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

    /* ==== ul ==== */
    ul {
      display: block flex;
      gap: 64px;
      justify-content: center;
      inline-size: fit-content;
      margin-inline: auto;
      font-size: 20px;
      color: var(--primary);

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

      li {
        position: relative;
      }

      li+li::before {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: -33px;
        display: block flow;
        inline-size: 1px;
        block-size: 100%;
        content: '';
        background: var(--text_gray);
        translate: 0 -50%;

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

    /* ==== p ==== */
    p {
      margin-block-start: 50px;
      font-size: 18px;
      text-align: center;

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

    /* ==== figure ==== */
    .figure {
      display: block flex;
      gap: 73px;
      justify-content: center;
      inline-size: fit-content;
      margin-block-start: 49px;
      margin-inline: auto;

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

      img {
        border-radius: 40px;

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

  /* ==== data-id="3" ==== */
  section[data-id='3'] {
    padding-block: 119px 0;

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

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

    /* ==== anchor ==== */
    .anchor {
      display: block grid;
      grid-template-columns: 132px auto;
      gap: 0 80px;
      justify-content: center;
      padding-block: 42px;
      background: var(--primary);
      border-radius: 40px;

      @media (width <=768px) {
        grid-template-columns: 16vw auto;
        gap: 0;
        inline-size: 100%;
        padding-block: calc((100 / 390) * 36 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

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

      p {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        font-size: 20px;
        color: white;

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

      .u-anchor {
        padding-block: 8px 10px;
        padding-inline: 32px;
        margin-block-start: 25px;
        background: var(--lightblue);
        border-radius: 10px;

        @media (width > 768px) {
          font-size: 16px;
          text-underline-offset: 9px;
        }

        @media (width <=768px) {
          grid-row: 2 / 3;
          grid-column: 1 / 3;
          padding-block: 3vw 4.3vw;
          padding-inline: calc((100 / 390) * 32 * 1vw);
          margin-block-start: var(--nudge-3);
          border-radius: calc((100 / 390) * 10 * 1vw);
        }
      }
    }
  }
}