/* セクション見出し（.cside-section-heading）
 * 何を補うか: このクラスにはこれまでCSSが無く、見た目が各ブロックのインライン指定に
 * 依存していた。そのためページごとに太さや色がずれた（実測：トップ400 / 下層500）。
 * 値の出どころを1か所へ集めるための受け皿。値は案件側（カスタマイザーの追加CSS）で入れる。
 *
 * 注意1: ブロックにインライン指定が残っている見出しは、そちらが優先される。
 *        このCSSを効かせるには、ブロック側の font-weight / color を外す必要がある。
 * 注意2: SWELLが .post_content .is-style-section_ttl{color:inherit} を持つ（特異度 0,2,0）。
 *        .cside-section-heading 単独（0,1,0）では負けるため、同じ文脈で受ける。
 *
 * 戻し方: このファイルの読み込みを functions.php から外す。
 */
:root{
  --csh-size: clamp(28px, 2.5vw, 36px);
  --csh-weight: 400;
  --csh-lh: 1.5;
  --csh-color: inherit;
  --csh-color-invert: #ffffff;

  /* 見出しの上に置く英字ラベル */
  --csl-size: 12px;
  --csl-weight: 600;
  --csl-spacing: .16em;
  --csl-color: #b5935d;
  --csl-color-invert: #d8c59a;
}

.post_content .cside-section-heading{
  font-size: var(--csh-size);
  font-weight: var(--csh-weight);
  line-height: var(--csh-lh);
  color: var(--csh-color);
}

/* 濃い背景の上に置く見出し */
.post_content .cside-section-heading.-invert{
  color: var(--csh-color-invert);
}

/* 見出しの上に置く英字ラベル（.cside-section-label）
 * 寄せは見出しに合わせてブロック側で指定する（トップページの法則）。
 * ここでは見た目だけを持つ。 */
.post_content .cside-section-label{
  color: var(--csl-color);
  font-size: var(--csl-size);
  font-weight: var(--csl-weight);
  letter-spacing: var(--csl-spacing);
}

.post_content .cside-section-label.-invert{
  color: var(--csl-color-invert);
}