@charset "UTF-8";

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

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

  /* =====================
    Policy
  ===================== */
  .policy {
    padding-block: 104px 34px;

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

    .policy-contents {
      display: block grid;
      gap: calc(34px + var(--leading-trim));

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

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

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

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

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

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

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

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

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

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

        /* ==== h2 ==== */
        & h2 {
          position: relative;
          font-size: 22px;
          font-weight: 500;
          line-height: 1.9;
          padding-block-end: 11px;
          border-bottom: solid 1px #e1e1e1;

          @media (width <= 768px) {
            font-size: calc((100 / 750) * 34 * 1vw);
            padding-block-end: calc((100 / 750) * 17 * 1vw);
            border-bottom: solid calc((100 / 750) * 4 * 1vw) #e1e1e1;
          }
        }

        /* ==== h3 ==== */
        & h3 {
          font-size: 20px;
          font-weight: 500;
          line-height: 1.9;
          color: #61d7db;

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

        /* ==== p ==== */
        & p {
          line-height: 1.9;
        }

        /* ==== ol ==== */
        & ol {
          & li {
            line-height: 1.9;
          }
        }

        /* ==== table ==== */
        & table {
          width: 1059px;
          line-height: 1.9;
          margin-block-start: 15px;
          margin-block-end: 12px;

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

          & :where(th, td) {
            padding-block: calc(22px + var(--leading-trim));
            padding-inline: 48px;
            border: 1px solid #6a6a6a;

            @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;
              border: 1px solid #999999;
            }
          }

          & th {
            inline-size: 240px;
            font-weight: 500;
            background: #cfcfcf;

            @media (width <= 768px) {
              inline-size: calc((100 / 750) * 174 * 1vw);
              vertical-align: middle;
              text-align: center;
            }
          }

          & td {
            @media (width <= 768px) {
              padding-inline: calc((100 / 750) * 46 * 1vw);
            }
          }
        }
      }
    }
  }
}