引用Blockquote

「引用（Blockquote）」を実装してください。

## これは何か
他の文章をそのまま載せるときに使う囲み。どこから取ったかを必ず添える。

## 使いどころ
- 出典のある文章を、そのままの形で示したいとき
- 利用者の声やレビューを載せるとき

## 実装の要件
- figure > blockquote + figcaption の構成。figcaption の中で作品名を指すときだけ cite を使う
- 引用符は ::before で描く
- 出典を書かない引用はしない。どこの言葉か分からないと信用されない
- 装飾の大きな引用符を文字として入れない。読み上げられる
- 自分の文章を目立たせるために引用の見た目を使わない。読み手が混乱する

## アクセシビリティの要件
- blockquote 要素を使い、出典は figcaption に書く。cite 要素は書名・記事名など作品の題名にだけ使い、人名には使わない
- 装飾の引用符は CSS の擬似要素で描く。擬似要素に aria-hidden は付けられないので、content: "“" / "" のように代替テキストを空にする
- 短い引用は q 要素でもよい

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

```html
<figure class="x-blockquote">
  <blockquote class="x-blockquote__b">
    名前が共有されていないと、指摘は必ず往復する。
  </blockquote>
  <figcaption class="x-blockquote__c">— <cite>現場のUIレビュー</cite></figcaption>
</figure>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-blockquote,
.x-blockquote *:not([class*="fa-"]),
.x-blockquote *:not([class*="fa-"])::before,
.x-blockquote *: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-blockquote {
  width: 232px;
  margin: 0;
}
.x-blockquote__b {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #cfd4dc;
  background: #fff;
  font-size: 12px;
  line-height: 1.8;
}
.x-blockquote__c {
  margin-top: 6px;
  padding-left: 15px;
  font-size: 11px;
  color: #606a7b;
}
.x-blockquote__c cite {
  font-style: normal;
}
```

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