@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;
    }
  }
}

.u-breadcrumb {
  @media (width <=768px) {
    flex-wrap: nowrap;
    justify-content: start;
    overflow-x: scroll;

    >li {
      flex-shrink: 0;
    }
  }
}

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

  @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);
      }
    }

    /* ==== catch ==== */
    .catch {
      grid-row: 1 / 2;
      grid-column: 1 /2;
      font-size: 32px;
      font-weight: 700;
      color: var(--primary);

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

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

    /* ==== body ==== */
    .body {
      display: block grid;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      gap: 24px;
      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: 0;
        border-radius: calc((100 / 390) * 40 * 1vw);
      }
    }
  }

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

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

    /* ==== ul ==== */
    ul {
      display: block grid;
      gap: 42px;

      @media (width <=768px) {
        gap: var(--nudge-4);
        inline-size: 100%;
        margin-inline: auto;
      }

      li {
        display: block grid;
        gap: 32px;
        padding-block: 47px;
        padding-inline: 80px;
        background-image: url('../img/vision/bg.webp');
        background-position: center;
        background-size: cover;
        border-radius: 40px;

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

      .head {
        display: block flex;
        gap: 31px;
        align-items: center;
        justify-content: center;

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

          img {
            flex-shrink: 0;
            max-inline-size: calc((100 / 390) * 60 * 1vw);
            max-block-size: calc((100 / 390) * 60 * 1vw);
            object-fit: contain;
          }
        }

        h2 {
          font-size: 24px;
          font-weight: 500;
          color: var(--primary);

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

      .body {
        display: block grid;
        gap: 16px;
        padding-block: 39px;
        font-size: 18px;
        text-align: center;
        background: var(--white);
        border-radius: 20px;

        @media (width <=768px) {
          gap: 1.5em;
          padding-block: calc((100 / 390) * 22 * 1vw);
          padding-inline: calc((100 / 390) * 8 * 1vw);
          font-size: calc((100 / 390) * 15 * 1vw);
          border-radius: calc((100 / 390) * 20 * 1vw);
        }

        p {
          line-height: 1.9;

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

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

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

    .u-inner {
      grid-template-columns: 405px auto;
      gap: 0 89px;

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

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

    /* ==== catch ==== */
    .catch {
      grid-row: 1 / 2;
      grid-column: 2 / 3;
      font-size: 32px;
      font-weight: 700;
      color: var(--primary);

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

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

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

      @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: 1 / 2;
      border-radius: 40px;

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