@charset "UTF-8";

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

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

  /* =====================
    Policy
  ===================== */
  .policy {
    padding-block-start: 104px;
    padding-block-end: 120px;

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

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

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

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

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

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

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

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

          @media (width <= 768px) {
            gap: calc((100 / 390) * 12 * 1vw);
          }
        }
        &:has(ol) {
          gap: 0;
          & > p {
            margin-block-start: 9px;

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

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

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

        /* ==== h2 ==== */
        & h2 {
          position: relative;
          font-size: 20px;
          font-weight: 500;
          padding-block-end: 11px;
          border-block-end: 1px solid #cecece;

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

        /* ==== h3 ==== */
        & h3 {
          font-size: 18px;
          font-weight: 500;
          color: #22327e;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 16 * 1vw);
          }
          &.attention {
            margin-block-start: 23px;

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

        & p {
          line-height: 1.8;

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

        /* ==== table ==== */
        & table {
          width: 1120px;
          margin-block-start: 9px;

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

          & :where(th, td) {
            padding-block: 20px;
            padding-inline: 24px;
            border: 1px solid #cecece;

            @media (width <= 768px) {
              padding-block: calc((100 / 390) * 9.5 * 1vw);
              padding-inline: calc((100 / 390) * 15 * 1vw);
              border: 1px solid #cecece;
              line-height: 2;
            }
          }

          & th {
            inline-size: 232px;
            font-weight: 500;
            background-color: #eaf2f6;
            vertical-align: top;

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