リード文Lead

「リード文（Lead）」を実装してください。

## これは何か
見出しのすぐ下に置く、内容を要約した数行。読むかどうかをここで判断してもらう。

## 使いどころ
- 長い記事の冒頭で、何が書いてあるかを先に伝えるとき
- 一覧から来た人に、このページで合っているか確かめてもらうとき

## 実装の要件
- 見出しの直後の p 要素。本文より少し大きく、色をやや薄くする程度に留める
- 本文の最初の段落をそのまま流用しない。要約になっていないと読む意味がない
- 長くしない。3行を超えると、結局読まれない
- 本文より大きくしすぎると、見出しとの区別が付かなくなる

## アクセシビリティの要件
- 見出しの直後に置く。装飾のためだけに離さない
- 文字を大きくするなら、コントラストも保つ。薄い灰色の大きな文字は読みにくい

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

```html
<div class="x-lead">
  <h2 class="x-lead__h">パーツの名前を揃える</h2>
  <p class="x-lead__p">呼び名がそろうと、指摘が一度で伝わります。よくある言い換えを整理しました。</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-lead,
.x-lead *:not([class*="fa-"]),
.x-lead *:not([class*="fa-"])::before,
.x-lead *: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-lead {
  width: 236px;
}
.x-lead__h {
  margin: 0 0 6px;
  font-size: 14px;
  /* 見出しタグに頼らず、このクラスだけで同じ見え方にする */
  font-weight: 700;
}
.x-lead__p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: #4a5464;
}
```

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