@charset "UTF-8";

/* =====================
  c-head
===================== */
.c-head {
  padding-block-end: 20px;
  font-size: 22px;
  font-weight: 500;
  border-bottom: 1px solid var(--gray100, #d1d1d1);

  @media only screen and (width <= 768px) {
    padding-block-end: calc((100 / 390) * 15 * 1vw);
    font-size: calc((100 / 390) * 18 * 1vw);
  }
}

/* =====================
  information
===================== */
.information {
  padding-block: 96px;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 65 * 1vw);
  }

  /* ==== contents ==== */
  .contents {
    display: block grid;
    gap: 38px;
    padding-block: 51px 64px;
    padding-inline: 48px;
    border-radius: 20px;

    @media only screen and (width <= 768px) {
      gap: 6.1vw;
      padding-block: calc((100 / 390) * 36 * 1vw) calc((100 / 390) * 49 * 1vw);
      padding-inline: calc((100 / 390) * 25 * 1vw);
      border-radius: calc((100 / 390) * 20 * 1vw);
    }

    & h2 {
      font-size: 22px;
      font-weight: 500;

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

    .u-arrow {
      @media (width > 768px) {
        padding-block: 7.8px;
      }

      @media only screen and (width <= 768px) {
        padding-block: 2.2vw;
        translate: 0 -3vw;

        &::after {
          inline-size: 3.2vw;
        }
      }
    }
  }
}

/* =====================
  feature
===================== */
.feature {
  padding-block: 11px 89px;

  @media only screen and (width <= 768px) {
    padding-block: 1vw 13vw;
    overflow: clip;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 48px;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 40 * 1vw);
    }
  }

  /* ==== img ==== */
  .img {
    display: block flex;
    flex-wrap: wrap;
    gap: 40px;

    @media only screen and (width <= 768px) {
      display: block flex;
      gap: calc((100 / 390) * 24 * 1vw);

      & :nth-child(1 of img) {
        inline-size: calc((100 / 390) * 198 * 1vw);
      }

      & :nth-child(2 of img) {
        inline-size: calc((100 / 390) * 136 * 1vw);
      }
    }
  }

  /* ==== table ==== */
  & table {
    & :where(th, td) {
      padding-block: 15px 14.3px;
      padding-inline: 23px;
      border: 1px solid var(--gray100);

      @media only screen and (width <= 768px) {
        padding-block: 2.9vw 2.96vw;
        padding-inline: 3.9vw;
        font-size: calc((100 / 390) * 14 * 1vw);
      }
    }

    & thead {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;

      & th {
        font-weight: 500;
        background: var(--bg_gray, #f5f5f5);

        &:nth-child(1 of th) {
          inline-size: 215px;

          @media only screen and (width <= 768px) {
            inline-size: calc((100 / 390) * 113 * 1vw);
          }
        }

        &:nth-child(2 of th) {
          inline-size: 367px;

          @media only screen and (width <= 768px) {
            inline-size: calc((100 / 390) * 247 * 1vw);
          }
        }
      }
    }

    & tbody {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
  }

  /* ==== attention ==== */
  .attention {
    display: block grid;
    margin-block-start: -25px;
    font-size: 15px;

    @media only screen and (width <= 768px) {
      padding-inline-end: calc((100 / 390) * 16 * 1vw);
      margin-block-start: -5.7vw;
      font-size: calc((100 / 390) * 13 * 1vw);
    }
  }
}

/* =====================
  seal
===================== */
.seal {
  padding-block: 11px 100px;

  @media only screen and (width <= 768px) {
    padding-block: 2.8vw 16vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 48px;

    @media only screen and (width <= 768px) {
      gap: 11.7vw;
    }
  }

  /* ==== 画像付き ==== */
  & section[data-id='1'] {
    margin-block-start: 7px;

    @media only screen and (width <= 768px) {
      margin-block-start: 0;
    }

    & ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px 40px;

      @media only screen and (width <= 768px) {
        gap: 10.1vw;
      }

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

      /* ==== li ==== */
      & li {
        display: block grid;
        gap: 22px;

        @media only screen and (width <= 768px) {
          gap: 4.1vw;
        }
      }

      /* ==== picture ==== */
      .picture {
        margin-block: calc((1em - 1lh) / 2) 3px;
      }

      /* ==== h2 ==== */
      & h2 {
        margin-block: calc((1em - 1lh) / 2);
        font-size: 20px;
        font-weight: 500;
        color: var(--blue);

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

      /* ==== p ==== */
      & p {
        margin-block: calc((1em - 1lh) / 2);

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

  /* ==== 画像なし ==== */
  & section[data-id='2'] {
    margin-block-start: 4px;

    @media only screen and (width <= 768px) {
      margin-block-start: 0.3vw;
    }

    /* ==== ul ==== */
    & ul {
      display: block grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      padding-block: 1px;
      padding-inline: 1px;

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

    /* ==== li ==== */
    & li {
      display: block grid;
      gap: 5px;
      padding-block: 12px 15px;
      padding-inline: 22px;
      box-shadow: 0 0 0 1px var(--gray100);

      @media only screen and (width <= 768px) {
        gap: 0.4vw;
        padding-block: 2.6vw 3vw;
        padding-inline: 4vw;
      }

      /* ==== h2 ==== */
      & h2 {
        font-size: 20px;
        font-weight: 500;
        color: var(--blue);

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

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

  /* ==== attention ==== */
  .attention {
    margin-block-start: -25px;
    font-size: 15px;

    @media only screen and (width <= 768px) {
      margin-block-start: -7.2vw;
      font-size: calc((100 / 390) * 13 * 1vw);
    }
  }
}

/* =====================
  surface
===================== */
.surface {
  padding-block: 0 100px;

  @media only screen and (width <= 768px) {
    padding-block: 0 17.5vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    /* ==== ul ==== */
    & ul {
      display: block grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      padding-block: 1px;
      padding-inline: 1px;
      margin-block-start: 48px;

      @media only screen and (width <= 768px) {
        display: block flex;
        flex-direction: column;
        margin-block-start: 10vw;
      }
    }

    /* ==== li ==== */
    & li {
      display: block grid;
      gap: 7px;
      padding-block: 15px;
      padding-inline: 22px;
      box-shadow: 0 0 0 1px var(--gray100);

      @media only screen and (width <= 768px) {
        gap: 1.4vw;
        padding-block: 3.3vw 2.8vw;
        padding-inline: 2.7vw;
      }

      /* ==== h2 ==== */
      & h2 {
        position: relative;
        padding-inline-start: 16px;
        font-weight: 500;

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

        &::before {
          position: absolute;
          inset-block-start: 11px;
          inset-inline-start: 1px;
          display: block flow;
          inline-size: 8px;
          aspect-ratio: 1 / 1;
          content: '';
          background: var(--lightblue);
          border-radius: calc(infinity * 1px);
        }

        @media only screen and (width <= 768px) {
          &::before {
            inset-block-start: 2.7vw;
            inset-inline-start: 1.2vw;
            inline-size: calc((100 / 390) * 7 * 1vw);
          }
        }
      }

      /* ==== p ==== */
      & p {
        @media only screen and (width <= 768px) {
          padding-inline: 1vw;
          font-size: calc((100 / 390) * 15 * 1vw);
          line-height: 2;
        }
      }
    }
  }
}

/* =====================
  kalrez
===================== */
.kalrez {
  padding-block: 6px 21px;

  @media only screen and (width <= 768px) {
    padding-block: 0 2vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 325px 875px;
    gap: 50px 80px;
    align-items: center;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 10vw;
      align-items: flex-start;
    }

    /* ==== .title ==== */
    .title {
      grid-row: 1 / 2;
      grid-column: 1 / 3;

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

    /* ==== picture ==== */
    .picture {
      grid-row: 2 / 3;
      grid-column: 1 / 2;

      @media only screen and (width <= 768px) {
        inline-size: calc((100 / 390) * 262 * 1vw);
        margin-inline: auto;
      }
    }

    /* ==== body ==== */
    .body {
      line-height: 2;

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

      @media only screen and (width <= 768px) {
        margin-block-start: -2.1vw;
        font-size: calc((100 / 390) * 15 * 1vw);
      }
    }
  }
}