見出しHeading

「見出し（Heading）」を実装してください。

## これは何か
内容のまとまりに付ける題。大きさではなく、階層で h1〜h6 を選ぶ。

## 使いどころ
- 話題の切れ目を示すとき
- 目次や検索結果に拾わせたいとき

## 実装の要件
- h1〜h6 を階層で選ぶ。見た目の大きさは CSS の役目
- 装飾はCSSの擬似要素で描く
- 見た目を大きくしたいだけで h タグを使わない。大きさは CSS で決める
- h1 はページに1つ。ページの主題を表す
- レベルを飛ばさない。h2 の次に h4 を置くと、階層が壊れる

## アクセシビリティの要件
- 見出しだけを拾って読む人がいる。見出しの文字だけで内容が推測できるようにする
- レベルを飛ばさない。支援技術は見出しの階層でページを移動する
- 見出しに装飾の記号（■ ◆）を文字として入れない。読み上げられてしまう

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-heading">
  <h2 class="x-heading__h2">料金について</h2>
  <h3 class="x-heading__h3">初期費用</h3>
  <p class="x-heading__p">初期費用はかかりません。</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-heading,
.x-heading *:not([class*="fa-"]),
.x-heading *:not([class*="fa-"])::before,
.x-heading *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-heading {
  width: 228px;
  padding: 12px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
}
.x-heading__h2 {
  margin: 0 0 8px;
  padding-left: 9px;
  border-left: 3px solid #1d4ed8;
  font-size: 14px;
  line-height: 1.4;
  /* 見出しタグに頼らず、このクラスだけで同じ見え方にする */
  font-weight: 700;
}
.x-heading__h3 {
  margin: 0 0 4px;
  font-size: 12px;
  color: #606a7b;
  font-weight: 700;
}
.x-heading__p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.75;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。