@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    &::before {
      background-image: url('../img/policy/mv.png');
    }
    @media (width <= 768px) {
      &::before {
        background-image: url('../img/policy/mv_2x.png');
      }
    }
  }
  /* =====================
    Policy
  ===================== */
  .policy {
    padding-block: 102px;

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

    .policy-contents {
      display: block grid;
      gap: 42px;

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

      /* ==== article ==== */
      & article {
        display: block grid;
        gap: 42px;
        &:has(h3) {
          gap: 39px;
        }

        @media (width <= 768px) {
          gap: calc((100 / 750) * 42 * 1vw);

          &:has(h3) {
            gap: calc((100 / 750) * 40 * 1vw);
          }
        }
      }

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

        &:has(h3) {
          gap: 0;
          & p {
            margin-top: 9px;
          }
        }

        @media (width <= 768px) {
          gap: calc((100 / 750) * 21 * 1vw);
        }
        &.mgt {
          margin-block-start: 10px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 10 * 1vw);
          }
        }
        &:first-of-type {
          & h2 {
            border-bottom: solid 2px #ffed00;
          }
        }

        @media (width <= 768px) {
          &:first-of-type {
            & h2 {
              border-bottom: solid calc((100 / 750) * 4 * 1vw) #ffed00;
            }
          }
          &:has(h3) {
            & p {
              margin-block-start: calc((100 / 750) * 15 * 1vw);
            }
          }
        }
      }

      /* ==== h2 ==== */
      & h2 {
        position: relative;
        font-size: 23px;
        font-weight: 500;
        color: #4d4d4d;
        padding-bottom: 11px;
        border-bottom: solid 1px #ffed00;

        @media (width <= 768px) {
          padding-block-end: calc((100 / 750) * 20 * 1vw);
          font-size: calc((100 / 750) * 34 * 1vw);
        }
      }

      /* ==== h3 ==== */
      & h3 {
        font-size: 20px;
        font-weight: 500;
        color: #767676;

        @media (width <= 768px) {
          font-size: calc((100 / 750) * 32 * 1vw);
        }
        &.mgt {
          margin-block-start: 36px;

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

      /* ==== p ==== */
      & p {
        @media (width <= 768px) {
          line-height: 1.9;
        }
      }

      /* ==== ol ==== */
      & ol {
        display: block grid;

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

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

        @media (width <= 768px) {
          width: 100%;
          margin-block-start: calc((100 / 750) * 26 * 1vw);
          .pb {
            & :where(th, td) {
              padding-block: calc((100 / 750) * 55 * 1vw);
            }
          }
        }

        & :where(th, td) {
          padding-block: 16px;
          padding-inline: 48px;
          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) * 44 * 1vw);
            vertical-align: middle;
          }
        }

        & th {
          inline-size: 240px;
          font-weight: 700;
          background: #fffbcd;

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