@charset "UTF-8";

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

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

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

/* =====================
  .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/management/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  .contents:has(small) {
    gap: 23px;

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

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

      font-size: 14px;
      line-height: 1.9;

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

  @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: 105px;
    padding-block: 79px;
    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: 2px 0;
      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));
        }
      }
    }
  }

  .column-area {
    padding-block: 40px 38px;
    padding-inline: 80px;
    margin-block-start: 47px;
    color: white;
    background: var(--primary, #00529f);
    border: 1px solid var(--primary, #00529f);
    border-radius: 40px;

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

    h4 {
      position: relative;
      display: block flex;
      align-items: center;
      justify-content: space-between;
      padding-block-end: 8px;
      padding-inline: 7px 87px;
      font-size: 24px;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: 2vw;
        align-items: flex-start;
        font-size: calc((100 / 390) * 20 * 1vw);

        span:first-child {
          margin-block: calc((1em - 1lh) / 2);
        }
      }

      &::before {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 7px;
        inline-size: 91.3%;
        content: '';
        border-block-start: 2px dashed white;

        @media (width <=768px) {
          inset-inline-start: 3vw;
          inline-size: 82.3%;
        }
      }

      &::after {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 7px;
        inline-size: 52px;
        aspect-ratio: 52 / 54;
        content: '';
        background-image: url('../img/management/pen.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        @media (width <=768px) {
          inset-block: unset;
          inset-block-end: 0.6vw;
          inset-inline-end: 1vw;
          inline-size: calc((100 / 390) * 30 * 1vw);
        }
      }

      span+span {
        font-size: 16px;
        color: var(--text_gray);

        @media (width <=768px) {
          margin-block: calc((1em - 1lh) / 2);
          font-size: 12px;
        }
      }
    }

    p {
      padding-inline: 7px;
      margin-block-start: 15px;
      font-size: 18px;
      line-height: 1.9;

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

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

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

    img {
      margin-inline: auto;

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

  .c-section-inner {
    display: block grid;
    grid-template-columns: 450px auto;
    gap: 0 30px;
    padding-inline: 48px;
    margin-block-start: 48px;

    @media (width <=768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 0 3vw;
      padding-inline: 0;
      margin-block-start: var(--nudge-1);
    }

    .text {
      grid-row: 1 / 2;
      grid-column: 2 / 3;

      @media (width <=768px) {
        grid-column: 1 / 3;
      }
    }

    img[data-id='1'] {
      grid-row: 1 / 3;
      grid-column: 1 / 2;

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

    img[data-id='2'] {
      grid-row: 2 / 3;
      grid-column: 2 / 3;

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

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

    img {
      border-radius: 20px;

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

  .c-section[data-id='2'] {
    .text {
      display: block grid;

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

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

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

  /* =====================
    section3
  ===================== */
  .c-section[data-id='3'] {
    @media (width > 768px) {
      margin-block-start: -19px;
    }

    p {
      margin-block-start: 48px;

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

    .anchor {
      display: block grid;
      gap: 2px;
      inline-size: fit-content;
      margin-block-start: 32px;
      margin-inline: auto 0;

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

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

  /* =====================
    section4
  ===================== */
  .c-section[data-id='4'] {
    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
    }

    p {
      margin-block-start: 49px;

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

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

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

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

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

  /* =====================
    section06
  ===================== */
  .c-section[data-id='6'] {
    img {
      margin-block-start: 47px;
      margin-inline: auto;

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

    p {
      margin-block-start: 47px;

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

  /* =====================
    section06
  ===================== */
  .c-section[data-id='7'] {
    img {
      margin-block-start: 47px;
      margin-inline: auto;

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

    .body {
      display: block grid;
      gap: 16px;
      margin-block-start: 47px;

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

/* =====================
  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: 169px;

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

      th,
      td {
        padding-block: 7.3px;
        padding-inline: 23px;
        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);
      }
    }
  }
}

/* =====================
  video-area
===================== */
.video-area {
  padding-block: 87px 75px;

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

  iframe {
    display: block flow;
    inline-size: 800px;
    margin-inline: auto;

    @media (width > 768px) {
      block-size: 447.67px;
    }

    @media (width <=768px) {
      inline-size: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
  }
}