@charset "UTF-8";

.main {
  :where(p, li, dt, dd, th, td) {
    line-height: 1.73;

    @media (width <= 768px) {
      line-height: 1.77;
    }
  }
  .policy {
    padding-block: 130px;
    font-size: 15px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 92 * 1vw) calc((100 / 750) * 132 * 1vw);
      font-size: calc((100 / 750) * 26 * 1vw);
    }
    .policy-contents {
      padding-inline: 30px;
      display: block grid;
      gap: calc(44.5px + var(--leading-trim));

      @media (width <= 768px) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
        gap: calc(calc((100 / 750) * 61 * 1vw) + var(--leading-trim));
      }

      /* ==== article ==== */
      & article {
        display: block grid;
        gap: calc(43.6px + var(--leading-trim));

        @media (width <= 768px) {
          gap: calc(calc((100 / 750) * 59 * 1vw) + var(--leading-trim));
        }
      }

      /* ==== section ==== */
      & section {
        display: block grid;
        gap: calc(27px + var(--leading-trim));

        @media (width <= 768px) {
          gap: calc(calc((100 / 750) * 40 * 1vw) + var(--leading-trim));
        }

        &:has(h3) {
          gap: calc(20px + var(--leading-trim));

          @media (width <= 768px) {
            gap: calc(calc((100 / 750) * 30 * 1vw) + var(--leading-trim));
          }
        }
        &:has(ol) {
          gap: 0;
          & > p {
            margin-block-start: calc(21px + var(--leading-trim));

            @media (width <= 768px) {
              margin-block-start: calc(calc((100 / 750) * 32 * 1vw) + var(--leading-trim));
            }
          }
        }
        &:has(table) {
          gap: 0;
        }

        /* ==== h2 ==== */
        & h2 {
          position: relative;
          font-size: 20px;
          font-weight: bold;
          padding-block-end: 4px;
          border-bottom: solid 1px #cfcfcf;

          &::after {
            content: '';
            display: block flow;
            inline-size: 60px;
            block-size: 3px;
            background-color: #172f49;
            position: absolute;
            bottom: -2px;
            left: 0;
            pointer-events: none;
          }
          @media (width <= 768px) {
            font-size: calc((100 / 750) * 30 * 1vw);
            padding-block-end: calc((100 / 750) * 7 * 1vw);

            &::after {
              inline-size: calc((100 / 750) * 60 * 1vw);
              block-size: calc((100 / 750) * 6 * 1vw);
              bottom: calc((100 / 750) * -3 * 1vw);
            }
          }
        }

        /* ==== h3 ==== */
        & h3 {
          font-size: 18px;
          font-weight: bold;
          line-height: 1.44;
          color: #172f49;

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

          &.attention {
            font-size: 16px;
            font-weight: bold;
            line-height: 1.75;
            color: #111;

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

        /* ==== table ==== */
        & table {
          width: 100%;
          line-height: 1.9;
          margin-block-start: 4px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 8 * 1vw);
          }

          & :where(th, td) {
            padding-block: calc(17.6px + var(--leading-trim));
            padding-inline: 20px;
            border: 1px solid #c3c4c7;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 24 * 1vw);
              padding-block: calc((100 / 750) * 27 * 1vw);
              padding-inline: calc((100 / 750) * 20 * 1vw);
              vertical-align: middle;
            }
          }

          & th {
            inline-size: 169px;
            font-weight: bold;
            background: #eee;

            @media (width <= 768px) {
              inline-size: calc((100 / 750) * 169 * 1vw);
            }
          }
        }
      }
    }
  }
}