@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: 104px;

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

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

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

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

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

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

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

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

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

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

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

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

        /* ==== h2 ==== */
        & h2 {
          position: relative;
          font-family: var(--yumin);
          font-size: 22px;
          font-weight: 600;
          padding-block-end: 11px;
          border-bottom: solid 1px #cfcfcf;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 18 * 1vw);
            padding-block-end: calc((100 / 390) * 7 * 1vw);
            border-bottom: solid calc((100 / 390) * 1 * 1vw) #9c9c9c;
          }
        }

        /* ==== h3 ==== */
        & h3 {
          font-family: var(--yumin);
          font-size: 20px;
          font-weight: 600;
          color: #1b57af;

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

        & p {
          @media (width <= 768px) {
            line-height: 2;
          }
        }
        & ol {
          & li {
            @media (width <= 768px) {
              line-height: 2;
            }
          }
        }

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

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

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

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 14 * 1vw);
              padding-block: calc((100 / 390) * 12 * 1vw);
              padding-inline: calc((100 / 390) * 14 * 1vw) calc((100 / 390) * 12 * 1vw);
              border: 1px solid #cfcfcf;
              line-height: 1.6;
            }
          }

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

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