見出し（component）の命名規則とコーディングルール

/*--- 見出しフォント指定 ---*/
.theme-fo-base {
  :is(.main-visual,.contents,.side,.foot) {
    .component {
      &.heading {
        &:is(
          .hd_custom01,
          .hd_custom02
        ) {
          :is(h1,h2,h3,h4,h5) {
            font-family: $title_font_family;
            font-weight: $hd_font_weight;
            line-height: $hd_line_height;
            letter-spacing: $hd_letter_spacing;
            @include breakpoint-sp {
              overflow-wrap: break-word;
            }
          }
          h1 {
            font-size: $site_h1_fontsize;
            @include breakpoint-sp {
              font-size: calc(#{$site_h1_fontsize} - 18px);
            }
          }
             （　…　一部省略）
        /*--- カスタム見出し ---*/
        // カスタム見出し01（下層ページで使用する見出しを入れる）
        &.hd_custom01 {
          :is(h1,h2,h3,h4,h5) {
                  …　以下省略

変数の記述箇所

//見出し
$hd_line_height: 1.5; //見出し用line-height（行間）
$hd_letter_spacing: $base_letter_spacing; //見出し用 letter-spacing（文字間）
$hd_font_weight: bold; //見出し用
$hd_font_strong: normal; //見出し用（編集画面の「.strong」に対応）
$title_font_family: inherit; //サイト内見出しのフォントファミリー
$site_h1_fontsize: 46px; //サイト内（ブログコンテンツを除く）の見出しh1のフォントサイズ（PC）
$site_h2_fontsize: 36px; //サイト内（ブログコンテンツを除く）の見出しh2のフォントサイズ（PC）
$site_h3_fontsize: 24px; //サイト内（ブログコンテンツを除く）の見出しh3のフォントサイズ（PC）
$site_h4_fontsize: 22px; //サイト内（ブログコンテンツを除く）の見出しh4のフォントサイズ（PC）
$site_h5_fontsize: 20px; //サイト内（ブログコンテンツを除く）の見出しh5のフォントサイズ（PC）

/*----------------------------------
    heading（見出し）
----------------------------------*/

//デザインパーツ
.component {
  //見出し下余白条件分岐用
  &:not(:root:root:root:root) {
    &.heading[data-designpart-id] {
      &:has(+ .component) {
        :is(h1,h2,h3) {
          @include margin-property(bottom,32px);
        }
        :is(h4,h5) {
          @include margin-property(bottom,24px);
        }
      }
    }
  }
   ～
}

/*----------------------------------
    heading（見出し）
----------------------------------*/

//デザインパーツ
.component {

   ～
  &:not(:root:root:root:root:root) {
    // 見出し全体（例：自由にカスタマイズしてください）
    &.heading[data-designpart-id] {
      :is(h1,h2,h3,h4,h5) {}
    }
    //デザインパーツ
    &.heading {
      &.hd_custom01 {
        :is(h1,h2,h3,h4,h5) {}
      }
      &.mt0_hd {
        margin-top: 0;
      }
      &.mainClr_hd {
        --fo-heading-main-color: var(--fo-main-color);
      }
      &.subClr_hd {
        --fo-heading-main-color: var(--fo-sub-color);
      }
      &.accentClr_hd {
        --fo-heading-main-color: var(--fo-accent-color);
      }
    }
  }
}

/*--- 見出しフォント指定 ---*/
.theme-fo-base {
  :is(.main-visual,.contents,.side,.foot) {
    .component {
      &.heading {
        &:is(
          .hd_custom01,
          .hd_custom02
        ) {
          :is(h1,h2,h3,h4,h5) {
            font-family: $title_font_family;
            font-weight: $hd_font_weight;
            line-height: $hd_line_height;
            letter-spacing: $hd_letter_spacing;
            @include breakpoint-sp {
              overflow-wrap: break-word;
            }
          }
          h1 {
             （　…　一部省略）
        /*--- カスタム見出し ---*/
        // カスタム見出し01
        &.hd_custom01 {
          :is(h1,h2,h3,h4,h5) {
            display: inline-block;
            position: relative;
            margin-bottom: 1em;
            &::before {
              content: "";
             （　…　一部省略）
        // カスタム見出し02 下にボーダー付き
                  …　以下省略