/* =========================================================
   クロリ見出しデザイン（H2 / H3 / H4）
   - コラム詳細ページの本文見出しには自動で適用
   - 他のページでは class「chlori-h2 / chlori-h3 / chlori-h4」で同じデザイン
     （ブロックパターン「クロリ見出し」またはショートコード [chlori_h2] などで挿入）
   ※ サイトの追加CSSに強い見出し指定があるため !important で上書きしています
   ========================================================= */

/* 共通リセット */
.single-column .entry-body :is(h2, h3, h4),
:is(h2.chlori-h2, h3.chlori-h3, h4.chlori-h4) {
  position: relative !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  color: #17191c !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}
.single-column .entry-body :is(h2, h3, h4)::before,
.single-column .entry-body :is(h2, h3, h4)::after,
:is(h2.chlori-h2, h3.chlori-h3, h4.chlori-h4)::before,
:is(h2.chlori-h2, h3.chlori-h3, h4.chlori-h4)::after {
  content: none !important;
}

/* H2：薄グレー背景＋左にオレンジのバー */
.single-column .entry-body h2,
h2.chlori-h2 {
  margin: 64px 0 28px !important;
  padding: 18px 24px 18px 28px !important;
  border-radius: 6px !important;
  background: #f6f7f8 !important;
  font-size: clamp(20px, 2.4vw, 24px) !important;
}
.single-column .entry-body h2::before,
h2.chlori-h2::before {
  content: "" !important;
  position: absolute !important;
  top: 16px !important;
  bottom: 16px !important;
  left: 0 !important;
  width: 5px !important;
  height: auto !important;
  border-radius: 0 3px 3px 0 !important;
  background: #f4a219 !important;
}

/* H3：下線（左だけオレンジ） */
.single-column .entry-body h3,
h3.chlori-h3 {
  margin: 48px 0 22px !important;
  padding: 0 0 12px !important;
  border-bottom: 2px solid #e7e9ec !important;
  font-size: clamp(18px, 2vw, 21px) !important;
}
.single-column .entry-body h3::after,
h3.chlori-h3::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -2px !important;
  width: 64px !important;
  height: 2px !important;
  background: #f4a219 !important;
}

/* H4：左にオレンジの丸 */
.single-column .entry-body h4,
h4.chlori-h4 {
  margin: 36px 0 16px !important;
  padding: 0 0 0 22px !important;
  font-size: 17px !important;
}
.single-column .entry-body h4::before,
h4.chlori-h4::before {
  content: "" !important;
  position: absolute !important;
  top: .55em !important;
  left: 2px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #f4a219 !important;
}

/* 記事・ページの先頭にある見出しは上の余白を詰める */
:is(h2.chlori-h2, h3.chlori-h3, h4.chlori-h4):first-child { margin-top: 0 !important; }

@media (max-width: 600px) {
  .single-column .entry-body h2,
  h2.chlori-h2 { margin-top: 48px !important; padding: 14px 16px 14px 20px !important; }
  .single-column .entry-body h2::before,
  h2.chlori-h2::before { top: 12px !important; bottom: 12px !important; }
}