メガメニューつきヘッダー

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

書き換える項目

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

[サービス名]

ロゴ部分に表示する名前

[メニュー項目]

ヘッダーに並べる項目。例：サービス、導入事例、料金、会社情報

[パネルの中身]

開く項目ごとに、グループ名とリンクを箇条書きで

[使用技術]

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

あなたはアクセシビリティに詳しいフロントエンドエンジニアです。
以下の条件で「メガメニューつきヘッダー」を実装してください。

## 表示内容
- 左：ロゴ（テキスト「[サービス名]」で代用）
- 右：メニュー [メニュー項目]
- メガメニューのパネルの中身：
[パネルの中身]

## ヘッダーのデザイン
- 高さ 72px、背景 #FFFFFF、下端に 1px solid #E2E8F0、画面上部に固定（position: sticky）
- コンテンツ最大幅 1200px、左右 padding 24px
- メニュー文字：15px、font-weight 500、色 #1B2A44、項目間の間隔 32px
- パネルを持つ項目には、文字の右に小さな下向き矢印（10px）を付ける
- 開いている項目は文字色 #1463F0、矢印を上向きに回転（150ms）

## パネルのデザイン
- ヘッダーの直下に、画面の横幅いっぱいで開く。中身は最大幅 1200px に収める
- 背景 #FFFFFF、下端に 1px solid #E2E8F0、影 0 16px 32px rgba(27,42,68,.08)
- 上下の padding 40px。グループを3〜4列のグリッドで並べる（列の間隔 40px）
- グループ名：13px、font-weight 700、色 #5F6D84、下に 12px の余白
- リンク：15px、色 #1B2A44、行の高さ 40px。hover で文字色 #1463F0
- 開くときは 150ms でフェードインし、上から 4px だけ動かす

## 動作
- マウス：メニュー項目に hover して 100ms 後に開く。項目からパネルへカーソルを移す間に閉じないようにする
- クリックやタップでも開閉できるようにする（hover だけに頼らない）
- パネルの外をクリックするか、Escapeキーで閉じる。別の項目を開いたら、前のパネルは閉じる

## スマホ・タブレット（1024px未満）
- メニューをハンバーガーボタンにまとめ、パネルの中身は縦に開くアコーディオンで表示する

## アクセシビリティ
- パネルを開く項目は button 要素にし、aria-expanded と aria-controls を付ける
- パネルが閉じているときは、中のリンクに Tab キーで移動できないようにする
- Escapeキーで閉じたら、フォーカスを元のボタンに戻す
- prefers-reduced-motion: reduce のときはアニメーションを無効にする

## 出力形式
- [使用技術]のコードを1つ出力
- メニューの内容はデータ（配列）にまとめ、項目やリンクを増やしやすくする