補足ボックスCallout

「補足ボックス（Callout）」を実装してください。

## これは何か
本文の流れから少し浮かせて、補足や注意を目立たせる枠。ヒント・注意・警告で色を変えることが多い。

## 使いどころ
- 本文を読み飛ばしても伝えたい注意があるとき
- 手順の途中で、つまずきやすい点を先回りして伝えるとき

## 実装の要件
- aside か div に、アイコン + 種類の文字 + 本文 を置く
- 種類ごとの色は2〜3種類に絞る
- 1ページに何個も置くと、どれも読まれなくなる。1画面に1つまで
- 色だけで種類を分けない。アイコンと見出しの文字で「注意」「補足」を示す
- 本文と同じことを繰り返すだけの枠は削る

## アクセシビリティの要件
- アイコンは aria-hidden にし、種類は文字で示す（「注意:」など）
- 色のコントラストを 4.5:1 以上にする。薄い背景に薄い文字を置かない
- 補足なら role="note" でよい。読み飛ばされては困る警告は、本文の中の見出し付き段落にする

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

```html
<aside class="x-callout">
  <i class="fa-solid fa-circle-info x-callout__i" aria-hidden="true"></i>
  <div>
    <p class="x-callout__t">補足</p>
    <p class="x-callout__b">設定の反映には最大5分かかります。</p>
  </div>
</aside>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-callout,
.x-callout *:not([class*="fa-"]),
.x-callout *:not([class*="fa-"])::before,
.x-callout *: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-callout {
  display: flex;
  gap: 10px;
  width: 250px;
  padding: 12px 14px;
  border: 1px solid #c7d2fe;
  border-left: 4px solid #1d4ed8;
  border-radius: 8px;
  background: #eef2ff;
}
.x-callout__i {
  color: #1d4ed8;
  font-size: 14px;
  line-height: 1.5;
}
.x-callout__t {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1d4ed8;
}
.x-callout__b {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #1b2028;
}
```

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