body.page,
body.single {
  main {
    /* h2見出しブロック */
    h2.wp-block-heading {
      position: relative;
      font-size: 24px;
      font-weight: 900;
      border-bottom: 1px solid #e3e3e3;
      padding-left: 28px;
      padding-right: 28px;
      padding-bottom: 15px;
      @media screen and (max-width: 750px) {
        font-size: 18px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 8px;
      }
      &::before {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        background-color: var(--primary-color);
        width: 100px;
        height: 1px;
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }
    /* h3見出しブロック */
    h3.wp-block-heading {
      position: relative;
      font-size: 20px;
      font-weight: 900;
      padding-left: 15px;
      @media screen and (max-width: 750px) {
        font-size: 16px;
      }
      &::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 0;
        background-color: var(--primary-color);
        width: 6px;
        height: 6px;
        border-radius: 10px;
        @media screen and (max-width: 750px) {
          top: 9px;
        }
      }
      + * {
        margin-top: 10px;
        @media screen and (max-width: 750px) {
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }

    /* 段落テキストブロック */
    p {
      line-height: 1.625;
      font-weight: 500;
      /* 管理画面より、テキストサイズを「XL」にした場合の文字サイズ指定 */
      &.has-x-large-font-size {
        font-size: 28px !important;
        @media screen and (max-width: 750px) {
          font-size: 20px !important;
        }
      }
      /* 管理画面より、テキストサイズを「L」にした場合の文字サイズ指定 */
      &.has-large-font-size {
        font-size: 24px !important;
        @media screen and (max-width: 750px) {
          font-size: 18px !important;
        }
      }
      /* 管理画面より、テキストサイズを「M」にした場合の文字サイズ指定 */
      &.has-medium-font-size {
        font-size: 20px !important;
        @media screen and (max-width: 750px) {
          font-size: 16px !important;
        }
      }
      /* 管理画面より、テキストサイズを「S」にした場合の文字サイズ指定 */
      &.has-small-font-size {
        font-size: 16px !important;
        @media screen and (max-width: 750px) {
          font-size: 14px !important;
        }
      }
      /* fontawesomeプラグインでアイコンをテキストに追加した際横並び指定 */
      &:has(.wp-rich-text-font-awesome-icon.wp-font-awesome-icon) {
        display: flex;
        align-items: center;
      }
      &.has-text-align-center:has(.wp-rich-text-font-awesome-icon.wp-font-awesome-icon) {
        justify-content: center;
      }
      strong {
        font-weight: 900;
      }
      a {
        display: inline-block;
        color: #2271b1;
        width: fit-content;
        word-break: break-all;
        text-decoration: underline;
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-list {
        margin-top: 12px;
        @media screen and (max-width: 750px) {
          margin-top: 8px;
        }
      }
      /* 流れの説明で使用している矢印アイコンと組み合わせた場合の余白の指定 */
      + .flow_image {
        margin-top: 10px;
        @media screen and (max-width: 750px) {
          margin-top: 5px;
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }

    /* font awesomeプラグインで設定したアイコンからブロックまでの余白 */
    .wp-rich-text-font-awesome-icon.wp-font-awesome-icon {
      margin-left: 10px;
    }

    /* カラムブロック */
    .wp-block-columns {
      margin-bottom: 0;
      /* 解説動画（分割版）およびスライド集専用追加CSSクラス */
      &.commentary_video {
        gap: 20px;
        @media screen and (max-width: 830px) {
          flex-direction: column;
          gap: 10px;
        }
        .wp-block-column:first-child {
          flex: 0 1 470px;
          @media screen and (max-width: 830px) {
            flex: 1;
          }
        }
        .wp-block-column:last-child {
          display: flex;
          align-items: center;
          gap: 12px;
          flex: 1;
          @media screen and (max-width: 830px) {
            justify-content: end;
            gap: 14px;
          }
          .wp-block-image {
            margin-top: 0 !important;
            img {
              @media screen and (max-width: 830px) {
                width: 126px;
              }
            }
          }
        }
      }
      /* 動画付きリンクテキスト専用追加CSSクラス */
      &.video-content-block {
        gap: 0 10px;
        @media screen and (max-width: 750px) {
          display: grid;
          gap: 5px;
        }
        .wp-block-column {
          flex: 0 0 auto;
          width: fit-content;
          @media screen and (max-width: 750px) {
            &:not(:first-child) {
              margin-left: auto;
            }
          }
          .wp-block-image {
            img {
              @media screen and (max-width: 750px) {
                width: 126px;
              }
            }
          }
        }
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-columns {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }

    /* 背景ブロック */
    .has-background {
      &:has(.wp-block-media-text__media) {
        padding: 40px;
        @media screen and (max-width: 750px) {
          padding: 30px 20px;
        }
      }
      border-radius: 30px;
      padding: 60px;
      @media screen and (max-width: 750px) {
        border-radius: 15px;
        padding: 30px 20px;
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }

    /* 画像ブロック */
    .wp-block-image {
      /* 管理画面より、画像を「角丸」に設定時の指定 */
      &.is-style-rounded {
        img {
          border-radius: 30px;
          @media screen and (max-width: 750px) {
            border-radius: 15px;
          }
        }
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      /* 流れの説明で使用している矢印アイコンの幅指定 */
      &.flow_image {
        figure {
          width: 19px;
          @media screen and (max-width: 750px) {
            width: 15x;
          }
        }
        + * {
          margin-top: 10px;
          @media screen and (max-width: 750px) {
            margin-top: 5px;
          }
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }

    /* 詳細ブロック（アコーディオン） */
    .wp-block-details {
      background-color: var(--secondary-color);
      border-radius: 30px;
      padding: 22px 24px 26px;
      @media screen and (max-width: 750px) {
        border-radius: 15px;
        padding: 13px 15px 15px;
      }
      &[open] {
        summary {
          &::before {
            rotate: 90deg;
          }
        }
      }
      summary {
        position: relative;
        font-size: 24px;
        font-weight: bold;
        padding-inline: 40px;
        letter-spacing: 0.04em;
        line-height: 1.36;
        @media screen and (max-width: 750px) {
          font-size: 17px;
          padding-inline: 25px;
          line-height: 1.4;
        }
        &::marker {
          content: none;
        }
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          translate: 0 -50%;
          transition: all 0.3s;
          background-image: url('../images/subpages/icon_accordion.svg');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          width: 33px;
          height: 33px;
          @media screen and (max-width: 750px) {
            width: 22px;
            height: 22px;
          }
        }
        + * {
          background-color: #fff;
          border-radius: 20px;
          margin-top: 13px;
          padding: 24px;
          @media screen and (max-width: 750px) {
            border-radius: 10px;
            margin-top: 12px;
            padding: 12px;
          }
        }
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-details {
        margin-top: 20px;
        @media screen and (max-width: 750px) {
          margin-top: 10px;
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }

    /* 箇条書きブロック */
    .wp-block-list {
      font-size: 18px;
      @media screen and (max-width: 750px) {
        font-size: 16px;
      }
      li {
        position: relative;
        font-weight: 500;
        letter-spacing: 0.02em;
        &:has(.wp-rich-text-font-awesome-icon.wp-font-awesome-icon) {
          display: flex;
          align-items: center;
        }
        a {
          width: fit-content;
          text-decoration: underline;
          color: #2271b1;
        }
        + li,
        + .wp-block-list {
          margin-top: 8px;
          @media screen and (max-width: 750px) {
            margin-top: 10px;
          }
        }
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }
    /* 箇条書きブロック(ulの場合のドットスタイル) */
    ul.wp-block-list {
      padding-left: 12px;
      li::before {
        content: '';
        position: absolute;
        top: 13px;
        left: -12px;
        background-color: var(--primary-color);
        border-radius: 100px;
        width: 5px;
        height: 5px;
        @media screen and (max-width: 750px) {
          top: 11px;
        }
      }
    }
    /* 箇条書きブロック(olの場合の数字スタイル) */
    ol.wp-block-list {
      padding-left: 20px;
      counter-reset: item;
      li::before {
        content: counter(item) '.';
        counter-increment: item;
        position: absolute;
        left: -17px;
      }
    }

    /* テーブルブロック */
    .wp-block-table {
      font-weight: 500;
      table {
        table-layout: auto;
        tbody {
          tr {
            border-bottom: 1px dashed #d9d9d9;
            + tr {
              td {
                &:first-child {
                  @media screen and (max-width: 750px) {
                    padding-top: 20px;
                  }
                }
              }
            }
            td {
              border: none;
              padding: 0;
              vertical-align: middle;
              padding-block: 25.5px;
              font-size: 18px;
              @media screen and (max-width: 750px) {
                font-size: 16px;
              }
              + td {
                padding-left: 25.5px;
                @media screen and (max-width: 750px) {
                  padding-left: 0;
                }
              }
              &:first-child {
                white-space: nowrap;
                width: 1px;
                padding-left: 0;
                padding-right: 25.5px;
                @media screen and (max-width: 750px) {
                  white-space: wrap;
                  width: auto;
                  margin-top: 0;
                  padding-bottom: 0;
                }
              }
              @media screen and (max-width: 750px) {
                display: block;
                padding-block: 0 19px;
                margin-top: 8px;
              }
            }
            &:first-child td {
              padding-top: 0;
            }
          }
        }
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }

    /* メディアとテキストブロック */
    .wp-block-media-text {
      grid-template-columns: auto auto !important;
      gap: 40px;
      justify-content: center;
      @media screen and (max-width: 750px) {
        grid-template-columns: 1fr !important;
        border-radius: 15px;
        padding: 30px 20px;
      }
      .wp-block-media-text__content {
        padding-inline: 0;
        @media screen and (max-width: 750px) {
          grid-column: 1;
          grid-row: 1;
        }
      }
      .wp-block-media-text__media {
        @media screen and (max-width: 750px) {
          grid-column: auto;
          grid-row: auto;
          margin-inline: auto;
        }
        img {
          width: 100%;
          max-width: 415px;
        }
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }

    /* グリッドブロック */
    .wp-block-group {
      gap: 30px;
      justify-content: center;
      @media screen and (max-width: 750px) {
        gap: 15px;
      }
      .wp-block-group {
        width: 100%;
        &:has(.wp-block-group-vk-link) {
          transition: all 0.3s;
          @media (hover: hover) {
            &:hover {
              opacity: 0.6;
            }
          }
        }
        &.is-layout-grid {
          display: block;
          &.has-background {
            border-radius: 20px;
            @media screen and (max-width: 750px) {
              border-radius: 10px;
            }
          }
          p {
            font-size: 24px;
            font-weight: 900;
            margin-top: 10px;
            @media screen and (max-width: 750px) {
              font-size: 17px;
              margin-top: 5px;
            }
            + a {
              margin-top: 0;
            }
          }
          .wp-block-image {
            width: 100%;
            max-width: 200px;
            margin-inline: auto;
            @media screen and (max-width: 750px) {
              width: 100%;
            }
            img {
              aspect-ratio: 1/1;
              object-fit: contain;
            }
          }
        }
        + .wp-block-group {
          margin-top: 0;
          @media screen and (max-width: 750px) {
          }
        }
      }

      /* グリッドブロック 2カラム設定専用追加CSSクラス */
      &.column_2 {
        grid-template-columns: repeat(2, minmax(0, 400px));
        @media screen and (max-width: 750px) {
          grid-template-columns: repeat(2, minmax(0, 145px));
        }
        .wp-block-group {
          padding: 30px 20px 42.5px;
          max-width: 400px;
          @media screen and (max-width: 750px) {
            padding: 15px 22.5px;
            max-width: 145px;
          }
          /* 最後のグリッドブロック要素を中央寄せにする追加CSSクラス */
          &.last_block_center {
            grid-column: span 2;
            justify-self: center;
          }
        }
        /* フレイル予防啓発宣言専用追加CSSクラス */
        .adjust_text {
          @media screen and (max-width: 750px) {
            font-size: 16px !important;
          }
        }
      }

      /* グリッドブロック 3カラム設定専用追加CSSクラス */
      &.column_3 {
        grid-template-columns: repeat(3, minmax(0, 240px));
        @media screen and (max-width: 750px) {
          grid-template-columns: repeat(2, minmax(0, 145px));
        }
        .wp-block-group {
          padding: 30px 20px 41px;
          max-width: 240px;
          @media screen and (max-width: 750px) {
            padding: 20px 22.5px 26.5px;
            max-width: 145px;
          }
          /* 2つのグリッドブロック要素を中央寄せにする追加CSSクラス */
          &.block_center {
            left: 5%;
            transform: translateX(50%);
            @media screen and (max-width: 750px) {
              left: auto;
              transform: none;
              & + .block_center {
                grid-column: span 2;
                justify-self: center;
              }
            }
          }
          &.is-layout-grid {
            /* アドバイザリー委員会専用追加CSSクラス */
            .adjust_text {
              margin-top: 0;
              line-height: 1.2;
              @media screen and (max-width: 750px) {
                font-size: 14px;
              }
            }
            .wp-block-image {
              img {
                border-radius: 0;
              }
            }
          }
        }
      }

      /* グリッドブロックに背景色がある場合のみ反映 */
      &.has-background {
        padding: 60px 30px;
        @media screen and (max-width: 750px) {
          padding: 30px 20px;
        }
      }
      + * {
        margin-top: 30px;
        @media screen and (max-width: 750px) {
          margin-top: 20px;
        }
      }
      + .wp-block-separator {
        margin-block: 16px;
      }
    }

    /* 区切り線ブロック */
    .wp-block-separator {
      padding: 0;
      border-radius: 0;
      + * {
        margin-top: 0;
      }
    }
  }
}

body.sitemap {
  .contents {
    a {
      /* サイトマップのみリンクテキスト下線なし */
      text-decoration: none !important;
      /* サイトマップのみリンクテキスト文字色なし */
      color: var(--text-color) !important;
    }
  }
  /* SPでの要素間の余白とブロック間の余白の差分をなくすため指定 */
  .wp-block-columns {
    + .wp-block-columns {
      @media screen and (max-width: 750px) {
        /* SPでの要素間の余白とブロック間の余白の差分をなくすため指定 */
        margin-top: 2em !important;
      }
    }
  }
  /* サイトマップのリスト内の文字サイズを小さく */
  .wp-block-list {
    font-size: 16px !important;
    @media screen and (max-width: 750px) {
      font-size: 14px !important;
    }
    li {
      &::before {
        top: 10px !important;
      }
    }
  }
}

/* サイトポリシーのみh3ブロック下余白広め */
body.sitepolicy {
  h3.wp-block-heading {
    + p {
      margin-top: 30px;
      @media screen and (max-width: 750px) {
        margin-top: 20px;
      }
    }
  }
}

/* 管理画面より、VKblocksによるインライン文字サイズによるフォントサイズの設定 */
/* S */
span.vk_inline-font-size[data-fontsize='12px'] {
  font-size: 16px !important;
  @media screen and (max-width: 750px) {
    font-size: 14px !important;
  }
}
/* M */
span.vk_inline-font-size[data-fontsize='16px'] {
  font-size: 20px !important;
  @media screen and (max-width: 750px) {
    font-size: 16px !important;
  }
}
/* L */
span.vk_inline-font-size[data-fontsize='18px'] {
  font-size: 24px !important;
  @media screen and (max-width: 750px) {
    font-size: 18px !important;
  }
}
/* XL */
span.vk_inline-font-size[data-fontsize='21px'] {
  font-size: 28px !important;
  @media screen and (max-width: 750px) {
    font-size: 20px !important;
  }
}
