@charset "UTF-8";

.main {
  /* =====================
    Policy
  ===================== */
  .policy {
    padding-block-start: 148px;
    padding-block-end: 160px;

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

    .policy-contents {
      margin-block-start: 72px;
      display: block grid;
      gap: 39.6px;

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

      /* ==== article ==== */
      & article {
        display: block grid;
        gap: 39px;

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

      /* ==== section ==== */
      & section {
        display: block grid;
        gap: 10px;

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

        /* ==== h2 ==== */
        & h2 {
          position: relative;
          font-size: 18px;
          font-weight: bold;
          color: var(--primary);

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

        /* ==== P ==== */

        & p {
          font-size: 15px;
          color: #111;

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

        /* ==== ol ==== */
        & ol {
          font-size: 15px;
          color: #111;

          & li {
            padding-inline-start: 1em;
            text-indent: -1em;
          }

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