@charset "UTF-8";

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

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

:where(.u-mv) {
  @media (width <=768px) {
    .picture {
    }
  }
}

/* =====================
  .u-local-nav
===================== */
.u-local-nav {
  padding-block: 119px 79px;

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

/* =====================
  .u-point-section
===================== */
.u-point-section {
  padding-block: 120px;
  background-image: url('../img/diagram/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

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

  .box {
    margin-block-start: 24px;

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

    .u-inner {
      padding-block: 40px;
      padding-inline: 80px;
      background: var(--primary);
      border-radius: 40px;

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

      h3 {
        font-size: 24px;
        color: white;
        text-align: center;

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

      .contents {
        padding-block: 50px 48px;
        margin-block-start: 31px;
        background: white;
        border-radius: 40px;

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

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

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

          li {
            position: relative;
            display: block flex;
            gap: 5px;
            align-items: baseline;
            padding-inline-start: 22px;
            font-size: 20px;

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

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

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

            &::after {
              font-size: 16px;
              content: '様';

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

/* =====================
  overview
===================== */
.overview {
  padding-block: 121px;

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

  /* ==== wrap ==== */
  .wrap {
    padding-block: 80px;
    padding-inline: 80px;
    margin-block-start: 48px;
    background: var(--lightblue);
    border-radius: 40px;

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

  /* ==== contents ==== */
  .contents {
    display: block grid;
    gap: 104px;
    padding-block: 80px;
    padding-inline: 80px;
    background: white;
    border-radius: 40px;

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

    /* ==== h3 ==== */
    h3 {
      font-size: 24px;
      color: var(--primary);

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

    /* ==== p ==== */
    h4,
    p {
      font-size: 18px;
      line-height: 1.9;

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

    /* ==== section ==== */
    section {
      display: block grid;

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

    /* ==== ul ==== */
    ul {
      padding-inline: 17px 38px;
      font-size: 18px;

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

      li {
        line-height: 1.9;

        @media (width <=768px) {
          --_indent: 3.6vw;

          padding-inline-start: var(--_indent);
          text-indent: calc(-1 * var(--_indent));
        }
      }
    }
  }

  /* =====================
    section1
  ===================== */
  .c-section[data-id='1'] {
    gap: 0 130px;
    align-items: center;

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

    h3 {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      padding-block-start: 13px;

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

    p {
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      align-self: flex-start;

      @media (width > 768px) {
        translate: 0 5px;
      }

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

    img {
      grid-row: 1 / 3;
      grid-column: 2 / 3;

      @media (width <=768px) {
        inline-size: 70%;
      }
    }
  }

  /* =====================
    section2
  ===================== */
  .c-section[data-id='2'] {
    grid-template-columns: auto 337px;
    align-items: center;

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

    h3 {
      grid-row: 1 / 2;
      grid-column: 1 / 3;
    }

    .text {
      display: block grid;
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      gap: 23px;
      margin-block-start: 23px;

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

      .item {
        position: relative;
        padding-inline-start: 15px;

        @media (width <=768px) {
          padding-inline-start: 5.2vw;
        }

        &::before {
          position: absolute;
          inset-block-start: 11px;
          inset-inline-start: 1px;
          inline-size: 13px;
          aspect-ratio: 1 / 1;
          content: '';
          background-image: url('../img/diagram/icon.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;

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

    .img {
      display: block grid;
      grid-row: 2 / 3;
      grid-column: 2 / 3;
      gap: 16px;
      align-items: center;
      justify-content: center;
      margin-block-start: 45px;

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

      img {
        margin-inline: auto;
      }
    }
  }

  /* =====================
    section3
  ===================== */
  .c-section[data-id='3'] {
    p {
      margin-block-start: 23px;

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

    img {
      margin-block-start: 48px;
      margin-inline: auto;

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

  /* =====================
    section4
  ===================== */
  .c-section[data-id='4'] {
    grid-template-columns: auto 502px;
    gap: 0 42px;

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

    h3 {
      grid-row: 1 / 2;
      grid-column: 1 / 3;
    }

    p {
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      padding-inline-end: 3px;
      margin-block-start: 23px;

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

    img {
      grid-row: 2 / 3;
      grid-column: 2 / 3;
      margin-block-start: 18px;

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

    .anchor {
      display: block grid;
      grid-row: 3 / 4;
      grid-column: 1 / 3;
      inline-size: fit-content;
      margin-block-start: -18px;

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

        .u-anchor {
          margin-inline: auto;
        }
      }
    }

    small {
      font-size: 15px;

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

  /* =====================
    section05
  ===================== */
  .c-section[data-id='5'] {
    p {
      margin-block-start: 23px;

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

    img {
      margin-block-start: 48px;
      margin-inline: auto;

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

    .box {
      inline-size: fit-content;
      padding-block: 24px 21px;
      padding-inline: 49px;
      margin-block-start: 48px;
      margin-inline: auto;
      border: 1px solid var(--gray_road, #d9d9d9);
      border-radius: 20px;

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

      p {
        margin-block-start: 0;
        font-size: 15px;

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

        @media (width > 768px) {
          translate: -3px 0;
        }
      }

      ul {
        padding-inline: 0;
        font-size: 15px;

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

        @media (width > 768px) {
          margin-block-start: -1px;
          translate: -2px 0;
        }
      }
    }
  }
}

/* =====================
  system
===================== */
.system {
  padding-block: 0 122px;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 564px auto;
    gap: 0 32px;

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

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    margin-block-end: 48px;

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

  /* ==== table ==== */
  .table {
    h3 {
      font-size: 20px;
      color: var(--primary);

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

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

    table {
      inline-size: 100%;
      margin-block-start: 9px;
      table-layout: fixed;

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

      thead th {
        background: var(--gray_road);
      }

      thead th:first-child {
        inline-size: 170px;

        @media (width <=768px) {
          inline-size: 27vw;
        }
      }

      th,
      td {
        padding-block: 7.3px;
        padding-inline: 22px;
        font-size: 16px;
        line-height: 1.9;
        vertical-align: middle;
        border: 1px solid var(--text_gray);

        @media (width <=768px) {
          padding-block: 1.8vw;
          padding-inline: 2.6vw;
          font-size: calc((100 / 390) * 14 * 1vw);
          line-height: 1.5;
        }

        small {
          font-size: 14px;

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

          &[data-size='small'] {
            font-size: 12px;

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

  /* ==== ul ==== */
  ul {
    display: grid;
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    gap: 1px;
    margin-block-start: 16px;
    font-size: 13px;

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

    li {
      position: relative;

      span:first-child {
        position: absolute;
        display: block flow;
      }

      span:last-child {
        display: block flow;
        padding-inline-start: 32px;

        @media (width <=768px) {
          padding-inline-start: 7vw;
        }
      }
    }
  }
}

/* ==== link-area ==== */
.link-area {
  padding-block: 3px 119px;

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

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

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

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

    img {
      grid-row: 1 / 3;
      grid-column: 1 / 2;

      @media (width <=768px) {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        translate: 1vw 1vw;
      }
    }

    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) * 20 * 1vw);
        margin-block-start: var(--nudge-3);
        border-radius: calc((100 / 390) * 10 * 1vw);
      }
    }
  }
}