お知らせバー付きのヘッダー

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[お知らせの文言]

例：5月31日まで、全品送料無料

[リンクの文言]

例：くわしく見る

[サービス名]

ロゴ部分に表示する名前

[使用技術]

例：HTML/CSS + JavaScript、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「お知らせバー付きのヘッダー」を実装してください。

## 表示内容
- お知らせバー：[お知らせの文言]、リンク：[リンクの文言]、右端に閉じるボタン（×）
- その下に、ロゴ（[サービス名]）とメニューを持つ通常のヘッダー（簡単なものでよい）

## デザイン
- バー：高さ 40px、背景 #1463F0、文字 #FFFFFF・13px・font-weight 700、中央揃え
- リンク：下線付き、文言の右に 12px あけて置く
- 閉じるボタン：右端から 12px、32×32px、アイコンは白の「×」（16px）
- 文言が長くてスマホで1行に収まらない場合は、2行まで折り返す（高さは自動）

## 動作
- 閉じるボタンを押すと、バーを高さ 0 にたたんで非表示にする（0.2秒）
- 閉じたことを localStorage に保存し、次回は表示しない。お知らせの内容が変わったら再び表示できるよう、保存するキーにお知らせのIDを含める
- localStorage が使えない環境でも、エラーにならないようにする
- 表示・非表示の切り替えでページがガタつかないよう、初回の描画前に状態を判定する方法をコメントで補足する

## アクセシビリティ
- バーは role="region" と aria-label="お知らせ" を付ける
- 閉じるボタンは button 要素で、aria-label="お知らせを閉じる"
- 白い文字と #1463F0 のコントラスト比 4.5:1 以上
- たたむ動きは prefers-reduced-motion で無効化

## 出力形式
- [使用技術]のコードを1つ出力
- お知らせのID・文言・リンク先を、1か所の設定にまとめる