@charset "utf-8";

.policy {
  main::before {
    position: absolute;
    top: 153px;
    left: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    content: '';
    background-image: url('../img/common/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  @media not all and (width >=768px) {
    main::before {
      top: -42vw;
      background-image: url('../img/common/bg_sp.webp');
      background-size: contain;
    }
  }

  & section {
    max-inline-size: 1060px;
    padding-block: 76px 144px;
    margin-inline: auto;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 95 * 1vw) calc((100 / 750) * 144 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    :where(p, li) {
      font-size: 15px;
      line-height: 1.73;
    }

    & article.unit {
      :where(h2, h3, caption) {
        font-weight: bold;
        text-align: left;
      }

      margin-block-end: 40px;

      h2 {
        position: relative;
        padding-block-end: 2px;
        font-size: 20px;
        border-block-end: 1px solid #cfcfcf;

        &::before {
          position: absolute;
          bottom: 0;
          display: block;
          inline-size: 60px;
          block-size: 3px;
          content: '';
          background: var(--blue);
          translate: 0 50%;
        }
      }

      h2 + p {
        margin-block-start: 21px;
      }

      p + .wrap {
        margin-block-start: calc((100 / 750) * 60 * 1vw);
      }

      ol {
        counter-reset: number;
      }

      li {
        &::before {
          content: '（' counter(number) '）';
          counter-increment: number;
        }
      }

      table {
        inline-size: 100%;
        vertical-align: middle;

        caption {
          margin-block-end: 0.2em;
        }

        :where(th, td) {
          padding-block: 11.4px;
          padding-inline: 19.4px;
          vertical-align: middle;
          border: 1px solid #c3c4c7;

          @media not all and (width >=768px) {
            padding-block: 3.6vw;
            padding-inline: 2.7vw;
          }
        }

        th {
          max-inline-size: 65px;

          @media not all and (width >=768px) {
            inline-size: 22vw;
            max-inline-size: 22vw;
          }

          font-weight: bold;
          white-space: nowrap;
          background: #eee;
        }

        td {
          @media not all and (width >=768px) {
            a {
              color: var(--blue);
              text-decoration: underline;
            }
          }
        }
      }

      @media not all and (width >= 768px) {
        :where(p, li) {
          font-size: calc((100 / 750) * 26 * 1vw);
        }

        margin-block-end: calc((100 / 750) * 60 * 1vw);

        h2::before {
          inline-size: calc((100 / 750) * 60 * 1vw);
          block-size: calc((100 / 750) * 3 * 1vw);
        }

        :where(th, td) {
          font-size: calc((100 / 750) * 24 * 1vw);
        }

        td {
          a {
            color: var(--red);
            text-decoration: underline;
          }
        }
      }
    }

    @media not all and (width >= 768px) {
      article.unit :is(h2, h3, caption) {
        font-size: calc((100 / 750) * 30 * 1vw);
      }
    }

    article.unit h3 {
      margin-block-end: 10px;
      font-size: 18px;
      color: var(--blue);
    }

    @media not all and (width >= 768px) {
      article.unit h3 {
        margin-block-end: calc((100 / 750) * 30 * 1vw);
        font-size: calc((100 / 750) * 30 * 1vw);
      }
    }

    article.unit .wrap {
      margin-block-end: 38px;
    }

    article.unit p + .wrap {
      margin-block-start: 37px;
    }

    @media not all and (width >= 768px) {
      article.unit .wrap {
        margin-block-end: calc((100 / 750) * 60 * 1vw);
      }

      article.unit p + .wrap {
        margin-block-start: calc((100 / 750) * 60 * 1vw);
      }
    }

    article.unit ol {
      counter-reset: number;
    }

    article.unit li::before {
      content: '（' counter(number) '）';
      counter-increment: number;
    }

    article.unit table {
      inline-size: 100%;
      vertical-align: middle;
      table-layout: fixed;
    }

    article.unit caption {
      margin-block-end: 0.5em;
    }

    article.unit :where(th, td) {
      padding-block: 0.5em;
      padding-inline: 1em;
      font-size: 15px;
      vertical-align: middle;
      border: 1px solid #c3c4c7;
    }

    @media not all and (width >= 768px) {
      article.unit :where(th, td) {
        font-size: calc((100 / 750) * 24 * 1vw);
      }
    }

    @media not all and (width >= 768px) {
      article.unit td a {
        color: var(--red);
        text-decoration: underline;
      }
    }
  }
}