:root,
:host {
  --spacing: 0.25rem;
  --space-0: 0;
  --space-1: calc(var(--spacing) * 1.25);
  --space-2: calc(var(--spacing) * 2.5);
  --space-3: calc(var(--spacing) * 3.75);
  --space-4: calc(var(--spacing) * 6.25);
  --space-5: calc(var(--spacing) * 7.5);
  --space-6: calc(var(--spacing) * 8.5);
  --space-7: calc(var(--spacing) * 10);
  --space-8: calc(var(--spacing) * 15);
  --space-9: calc(var(--spacing) * 20);
  --space-10: calc(var(--spacing) * 25);
  --space-11: calc(var(--spacing) * 30);
  --space-12: calc(var(--spacing) * 42.5);
  --side-padding: 40px;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-1 {
  margin-bottom: var(--space-1) !important;
}

.u-mb-2 {
  margin-bottom: var(--space-2) !important;
}

.u-mb-3 {
  margin-bottom: var(--space-3) !important;
}

.u-mb-4 {
  margin-bottom: var(--space-4) !important;
}

.u-mb-5 {
  margin-bottom: var(--space-5) !important;
}

.u-mb-6 {
  margin-bottom: var(--space-6) !important;
}

.u-mb-7 {
  margin-bottom: var(--space-7) !important;
}

.u-mb-8 {
  margin-bottom: var(--space-8) !important;
}

.u-mb-9 {
  margin-bottom: var(--space-9) !important;
}

.u-mb-10 {
  margin-bottom: var(--space-10) !important;
}

.u-mb-11 {
  margin-bottom: var(--space-11) !important;
}

.u-mb-12 {
  margin-bottom: var(--space-12) !important;
}

.topics_contents {
  > * {
    margin-bottom: 30px;

    &:last-child {
      margin-bottom: 0;
    }

    &:has(+ h2),
    &:has(+ h3),
    &:has(+ .is-style-border),
    &:has(+ .wp-block-flexible-table-block-table) {
      margin-bottom: 60px;

      @media (max-width: 700px) {
        margin-bottom: 40px;
      }
    }
  }

  > .wp-block-image {
    margin-bottom: 60px;

    @media (max-width: 700px) {
      margin-bottom: 40px;
    }
  }

  .aligncenter {
    text-align: center;
  }

  .alignright {
    text-align: right;
  }

  ul {
    li {
      position: relative;
      padding-left: 20px;

      @media (max-width: 700px) {
        padding-left: 1.6rem;
        line-height: 1.8;
      }

      + li {
        margin-top: 0.8em;

        @media (max-width: 700px) {
          margin-top: 0.2em;
        }
      }

      &::before {
        position: absolute;
        top: calc(0.9em - 6px);
        left: 0;
        display: block;
        width: 8px;
        height: 8px;
        content: "";
        background-color: #d9175e;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        border-radius: 50%;

        @media (max-width: 700px) {
          top: calc(1em - 0.6rem);
          width: 0.8rem;
          height: 0.8rem;
        }
      }
    }
  }

  a {
    color: #d9175e;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-decoration: underline;

    .no-touchevents &:hover {
      text-decoration: none;
    }
  }

  .is-style-border {
    padding: 25px;
    border: 3px solid #c3c3c3;

    @media (max-width: 700px) {
      padding: 15px;
      border-width: 2px;
    }
  }

  .has-fixed-layout {
    display: block;
    width: 100%;

    tbody {
      display: block;
    }

    tr {
      display: block;
      border-top: 1px solid;
      border-bottom: 1px solid;

      @media (min-width: 701px) {
        display: flex;
      }

      + tr {
        border-top: none;
      }

      th {
        position: relative;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: center;
        width: 260px;
        font-weight: normal;
        vertical-align: middle;
        text-align: left;

        @media (min-width: 701px) {
          padding-top: 2rem;
          padding-right: 2rem;
          padding-bottom: 2rem;
          padding-left: 12px;

          &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            height: calc(100% - 40px);
            margin: auto 0;
            content: "";
            border-right: 1px solid #c3c3c3;
          }
        }

        @media (max-width: 700px) {
          padding-top: 1.2rem;
          padding-bottom: 1.2rem;
          line-height: 1.6;
        }
      }

      td {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;

        @media (min-width: 701px) {
          padding-top: 2rem;
          padding-right: 20px;
          padding-bottom: 2rem;
          padding-left: 30px;
        }

        @media (max-width: 700px) {
          position: relative;
          padding-top: 0;
          padding-bottom: 1.2rem;
          padding-left: 1em;
          line-height: 1.6;

          &::before {
            position: absolute;
            top: 0.2em;
            left: 0;
            height: 1em;
            margin: auto 0;
            content: "";
            border-left: 1px solid #c3c3c3;
          }
        }
      }
    }
  }
}