キャプションCaption

「キャプション（Caption）」を実装してください。

## これは何か
画像や表の近くに添える短い説明。何が写っているか、どこから取ったかを書く。

## 使いどころ
- 写真の状況や撮影日を添えるとき
- 図や表の出典を示すとき

## 実装の要件
- figure > (img + figcaption) の構成
- 本文より1〜2px 小さく、色は本文より薄い程度に留める
- alt の代わりにしない。キャプションは全員に見える説明、alt は画像が見えない人への説明
- 本文と同じ大きさにすると、どちらが主役か分からなくなる
- 薄すぎる灰色は読めない。コントラストを確保する

## アクセシビリティの要件
- figure と figcaption を対で使い、画像と説明の関係を示す
- キャプションに書いた内容を alt で繰り返さない。二重に読み上げられる
- 文字色のコントラストを 4.5:1 以上にする

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

```html
<figure class="x-caption">
  <div class="x-caption__f" aria-hidden="true"><i class="fa-regular fa-image"></i></div>
  <figcaption class="x-caption__c">2026年9月の勉強会の様子（会場で撮影）</figcaption>
</figure>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-caption,
.x-caption *:not([class*="fa-"]),
.x-caption *:not([class*="fa-"])::before,
.x-caption *: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-caption {
  width: 192px;
  margin: 0;
}
.x-caption__f {
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 18px;
}
.x-caption__c {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.7;
  color: #4a5464;
}
```

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