<div class="sample03">
<h3>デフォルトのタイトル</h3>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...</p>
</div>
<div class="sample04">
<h3>カラーを上書きされたタイトル</h3>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...</p>

/* グローバル変数 */
:root {
  --color01:#0056f7;
}
/* デフォルトのh3カラーとアイコン */
h3 {
  color: var(--color01);
}
h3::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background: var(--color01);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* タイトルのカラーの上書き */
.sample04 h3 {
  --color01:#ffa07a;
  color: var(--color01);
}