@charset "UTF-8";

/* =====================
  contents
===================== */
.main > .contents {
  position: relative;

  .u-bg {
    inset-block-start: 908px;

    @media (width <= 768px) {
      inset-block-start: 206vw;
    }
  }
}

/* =====================
  policy-contents
===================== */
.policy-contents {
  position: relative;
  z-index: 2;
  display: block grid;
  gap: 42px;
  padding-block: 188px 177px;
  margin-block-start: 0;
  margin-inline: auto;
  border-radius: 20px;

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

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

    @media (width <= 768px) {
      gap: 11.6vw;
      padding-block: 0;
      font-size: calc((100 / 390) * 18 * 1vw);
    }
  }

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

    &:has(h2) {
      margin-block-end: 9.6px;

      @media only screen and (width <= 768px) {
        margin-block-end: 0;
      }
    }

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

      @media (width <= 768px) {
        gap: 5.4vw;
      }
    }

    @media (width <= 768px) {
      gap: 8.5vw;
    }
  }

  /* ==== h2 ==== */
  & h2 {
    position: relative;
    padding-block-end: 12px;
    margin-block: calc((1em - 1lh) / 2);
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    border-block-end: 1px solid var(--smoke);

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

      @media (width <= 768px) {
        padding-block-end: 1.5vw;
      }
    }
  }

  /* ==== h3 ==== */
  & h3 {
    position: relative;
    margin-block: calc((1em - 1lh) / 2);
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;

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

      &::before {
        inset-block-start: 1vw;
        inline-size: calc((100 / 390) * 4 * 1vw);
      }
    }
  }

  /* ==== p ==== */
  & p {
    margin-block: calc((1em - 1lh) / 2);

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

  /* ==== ol ==== */
  & ol {
    display: block grid;
    gap: 13.1px;
    margin-block: 10px calc((1em - 1lh) / 2);
    translate: 0 -19px;

    & li {
      margin-block: calc((1em - 1lh) / 2);
    }

    @media (width <= 768px) {
      gap: 2.9vw;
      margin-block: -1.6vw calc((1em - 1lh) / 2);
      font-size: calc((100 / 390) * 15 * 1vw);
      translate: 0;
    }
  }

  /* ==== h4 ==== */
  & h4 {
    display: block flow;
    margin-block: 23px 17px;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-align: left;

    @media (width <= 768px) {
      inline-size: 100%;
      margin-block: calc((100 / 390) * 17 * 1vw) 3.5vw;
      font-size: calc((100 / 390) * 16 * 1vw);
      white-space: nowrap;
    }
  }

  /* ==== table ==== */
  & table {
    max-inline-size: 1120px;
    margin-block: -16px 9px;

    @media (width <= 768px) {
      inline-size: 100%;
      margin-block: -4.2vw -2.6vw;
      font-size: calc((100 / 390) * 14 * 1vw);
      table-layout: fixed;
    }

    & :where(th, td) {
      padding-block: 19.8px;
      padding-inline: 22.5px;
      font-weight: normal;
      vertical-align: top;
      border: 1px solid #b7b7b7;

      @media (width <= 768px) {
        padding-block: 2.4vw;
        padding-inline: 3.7vw;
        font-size: calc((100 / 390) * 15 * 1vw);
        line-height: 2 !important;
        vertical-align: middle;
      }
    }

    & th {
      inline-size: 232px;
      font-weight: 500;
      background: #e0e0e0;

      @media (width <= 768px) {
        inline-size: calc((100 / 370) * 86.8 * 1vw);
        vertical-align: top;
      }
    }

    & td {
      line-height: 1.6;

      @media (width <= 768px) {
        padding-inline: 3.8vw;
        font-size: calc((100 / 390) * 15 * 1vw);
        word-break: break-all;

        & a {
          text-decoration: underline;
        }
      }
    }
  }
}