@charset "UTF-8";

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

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

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

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

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

  /* ==== section[data-id="1"] ==== */
  section[data-id='1'] {
    .u-inner {
      grid-template-columns: auto 581px;
      gap: 0 71px;

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

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

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

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

    /* ==== 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: var(--nudge-4);
        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);
      }
    }
  }

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

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

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

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

    .wrap {
      display: block grid;
      gap: 39px;
      margin-block-start: 64px;

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

      section {
        display: block grid;
        grid-template-columns: 200px auto;
        gap: 0 80px;
        padding-block: 80px;
        padding-inline: 80px;
        background: var(--white);
        border-radius: 40px;

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

      h3 {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        font-size: 24px;
        font-weight: 700;
        color: var(--primary);

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

      ul {
        display: block grid;
        grid-template-columns: repeat(2, 1fr);
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        gap: 16px 72px;
        justify-self: flex-start;
        margin-block-start: 2px;

        @media (width <=768px) {
          display: block flex;
          flex-direction: column;
          gap: 0;
          inline-size: 100%;
          margin-block-start: 0;
        }

        &[data-col='1'] {
          display: block flex;
          flex-direction: column;
          gap: 17.5px;

          @media (width <=768px) {
            gap: 0;
          }

          li {
            display: block flex;
            flex-wrap: wrap;
            gap: 23px;

            @media (width <=768px) {
              display: block flow;
              gap: 0;
            }
          }
        }

        li {
          position: relative;
          padding-inline-start: 15px;
          font-size: 18px;

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

          &::before {
            position: absolute;
            inset-block-start: 13px;
            inset-inline-start: 0;
            inline-size: 7px;
            aspect-ratio: 1 / 1;
            content: '';
            background: var(--primary);
            border-radius: calc(infinity * 1px);

            @media (width <=768px) {
              inset-block-start: 2.8vw;
              inset-inline-start: 0;
              inline-size: calc((100 / 390) * 6 * 1vw);
            }
          }
        }

        dl {
          display: block flex;
          gap: 24px;

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

          dt {
            flex-shrink: 0;
          }
        }
      }

      .figure {
        display: block flex;
        flex-wrap: wrap;
        grid-row: 2 / 3;
        grid-column: 1 / 3;
        gap: 32px;
        justify-content: center;
        margin-block-start: 41px;

        @media (width <=768px) {
          display: block grid;
          gap: var(--nudge-2);
          inline-size: 100%;
          margin-block-start: 1vw;
        }

        img {
          max-inline-size: 351px;
          border-radius: 40px;

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

          &.border {
            border: 1px solid var(--gray_road);
          }
        }
      }
    }
  }

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

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

    /* ==== body ==== */
    .body {
      margin-block-start: 49px;
      font-size: 18px;
      text-align: center;

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

    /* ==== contents ==== */
    .contents {
      padding-block: 80px;
      padding-inline: 80px;
      margin-block-start: 66px;
      background: var(--lightblue);
      border-radius: 20px;

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

      ul {
        display: block flex;
        gap: 73px;
        justify-content: center;

        @media (width <=768px) {
          display: block flex;
          flex-direction: column;
          gap: 0;
          inline-size: 100%;
          margin-block-start: 0;
        }

        li {
          position: relative;
          padding-inline-start: 15px;
          font-size: 18px;

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

          &::before {
            position: absolute;
            inset-block-start: 14px;
            inset-inline-start: 0;
            inline-size: 7px;
            aspect-ratio: 1 / 1;
            content: '';
            background: var(--primary);
            border-radius: calc(infinity * 1px);

            @media (width <=768px) {
              inset-block-start: 2.8vw;
              inset-inline-start: 0;
              inline-size: calc((100 / 390) * 6 * 1vw);
            }
          }
        }
      }
    }

    .figure {
      display: block flex;
      flex-wrap: wrap;
      gap: 32px;
      justify-content: center;
      margin-block-start: 41px;

      @media (width <=768px) {
        display: block grid;
        gap: var(--nudge-2);
        inline-size: 100%;
        margin-block-start: var(--nudge-4);
      }

      img {
        max-inline-size: 351px;
        border-radius: 40px;

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

        &.border {
          border: 1px solid var(--gray_road);
        }
      }
    }
  }
}