@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/policy/mv.png');

    @media (width <= 768px) {
      background-image: url('../img/policy/mv_2x.png');
    }
  }

  /* =====================
    Policy
  ===================== */
  .policy {
    padding-block-start: 114px;
    padding-block-end: 113px;

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

    .policy-contents {
      padding-inline: 150px;
      display: block grid;
      gap: 60px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
        gap: calc((100 / 390) * 38 * 1vw);
      }

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

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

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

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

        &:has(h3) {
          gap: 14px;

          @media (width <= 768px) {
            gap: calc((100 / 390) * 14 * 1vw);
          }
        }
        &:has(ol) {
          gap: 0;
          & > p {
            margin-block-start: 16px;

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

        &.first {
          margin-block-start: 8px;

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

        /* ==== h2 ==== */
        & h2 {
          position: relative;
          font-size: 32px;
          font-weight: 600;
          letter-spacing: 0.96px;
          color: var(--primary);

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

        /* ==== h3 ==== */
        & h3 {
          font-size: 24px;
          font-weight: 600;
          letter-spacing: 0.72px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 18 * 1vw);
            letter-spacing: calc((100 / 390) * 0.54 * 1vw);
          }
          &.attention {
            font-size: 16px;
            letter-spacing: 0.48px;
            margin-block-start: 11px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 16 * 1vw);
              letter-spacing: calc((100 / 390) * 0.48 * 1vw);
              margin-block-start: calc((100 / 390) * 12 * 1vw);
            }
          }
        }

        & p {
          line-height: 1.8;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 16 * 1vw);
          }
        }
        & ol {
          line-height: 1.8;

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

        /* ==== table ==== */
        & table {
          width: 704px;

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

          & :where(th, td) {
            padding-block: 11px;
            padding-inline: 16px;
            border: 1px solid #a1a2ac;

            @media (width <= 768px) {
              padding-block: calc((100 / 390) * 11 * 1vw);
              padding-inline: calc((100 / 390) * 14 * 1vw) calc((100 / 390) * 12 * 1vw);
              border: 1px solid #a1a2ac;
            }
          }

          & th {
            inline-size: 184px;
            font-weight: 600;
            background: #f3e8d8;
            vertical-align: top;

            @media (width <= 768px) {
              color: #2a2a2a;
              inline-size: calc((100 / 390) * 111 * 1vw);
            }
          }
        }
      }
    }
  }
}