バナーNotification banner

「バナー（Notification banner）」を実装してください。

## これは何か
ページの上端に横いっぱいで出す帯状の知らせ。メンテナンス予告やキャンペーンの告知に使う。

## 使いどころ
- 全ページの利用者に等しく伝える必要があるとき
- 期限のある告知を、目立つが邪魔にならない形で置きたいとき

## 実装の要件
- ページ最上部に置く。閉じるボタンを持ち、閉じた状態を localStorage に残す
- 閉じられるようにする。閉じたことを覚えておかないと、毎回出て嫌われる
- 固定表示にすると、狭い画面で本文の領域を奪う
- 広告と見分けが付かない見た目にすると読み飛ばされる

## アクセシビリティの要件
- 閉じるボタンに aria-label（「お知らせを閉じる」）を付ける
- 重要な告知は role="status" で伝える。装飾的な告知には role を付けない
- 閉じた状態を保存し、次の訪問で再表示しない

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

```html
<div class="x-banner" role="status">
  <p class="x-banner__t">9月30日 2:00〜4:00 にメンテナンスを行います。</p>
  <button class="x-banner__x" type="button" aria-label="お知らせを閉じる">
    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
  </button>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-banner,
.x-banner *:not([class*="fa-"]),
.x-banner *:not([class*="fa-"])::before,
.x-banner *: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-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 268px;
  padding: 8px 8px 8px 14px;
  border-radius: 8px;
  background: #1d4ed8;
  color: #fff;
}
.x-banner__t {
  flex: 1 1 auto;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
}
.x-banner__x {
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #fff;
  cursor: pointer;
}
```

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