アラートAlert

「アラート（Alert）」を実装してください。

## これは何か
その場に出しっぱなしにする、状態の知らせ。成功・注意・エラーを色とアイコンで区別する。

## 使いどころ
- 送信の結果を、ページの上部で伝えたいとき
- 設定の不備など、対処するまで出しておきたいとき

## 実装の要件
- role="alert" か role="status" + アイコン + 見出し + 本文
- 種類は 成功 / 注意 / エラー の3つまでに絞る
- 赤を使いすぎない。全部が警告に見えると、どれも見なくなる
- 色だけで種類を分けない。アイコンと「エラー」「完了」の文字を入れる
- 本文が「エラーが発生しました」だけでは何もできない。次にどうするかを書く

## アクセシビリティの要件
- エラーなど、すぐ知らせる必要があるものは role="alert"
- 完了の知らせは role="status" にする。role="alert" は読み上げを割り込ませるので使いすぎない
- 文字と背景のコントラストを 4.5:1 以上にする。薄い背景色に薄い文字を置かない

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

```html
<!-- 実際に出すときは role="alert" を付ける。
     この見本は最初から置いてあるので、開いた瞬間に読み上げへ割り込まないよう外している -->
<div class="x-alert">
  <i class="fa-solid fa-triangle-exclamation x-alert__i" aria-hidden="true"></i>
  <div>
    <p class="x-alert__t">送信できませんでした</p>
    <p class="x-alert__b">メールアドレスの形式をご確認のうえ、もう一度お試しください。</p>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-alert,
.x-alert *:not([class*="fa-"]),
.x-alert *:not([class*="fa-"])::before,
.x-alert *: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-alert {
  display: flex;
  gap: 10px;
  width: 258px;
  padding: 12px 14px;
  border: 1px solid #f1b5b5;
  border-radius: 8px;
  background: #fdf1f1;
}
.x-alert__i {
  color: #b91c1c;
  font-size: 14px;
  line-height: 1.5;
}
.x-alert__t {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: #8f1616;
}
.x-alert__b {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #5c2020;
}
```

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