iPad向けナビゲーションレール

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

書き換える項目

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

[メニュー項目]

3〜6個。例：ホーム、さがす、予約、お気に入り、マイページ

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはタブレット向けUIに詳しいフロントエンドエンジニアです。
以下の条件で「iPad向けナビゲーションレール」を実装してください。

## 表示内容
- メニュー：[メニュー項目]（各項目はアイコン＋ラベル）

## 画面幅ごとの表示（同じHTMLをCSSで切り替える）
- 768px未満（スマホ）：画面下端に固定するボトムナビゲーション（高さ 56px + env(safe-area-inset-bottom)）
- 768px〜1199px（iPadの縦向き・横向き）：画面左端に固定するナビゲーションレール
- 1200px以上（PC）：幅 240px のサイドバー。アイコンの右にラベルを横並びで表示する

## レールのレイアウト
- 幅 80px、高さ 100dvh、画面の左端に固定。背景 #FFFFFF、右端に 1px solid #E2E8F0
- 上部にロゴマーク（32px）、その下 24px からメニューを縦に並べる
- 各項目：幅 64px、高さ 64px、中央揃えで、アイコンの下にラベル
- 項目同士の間隔 4px
- 本文エリアは、レールの幅ぶん左に余白をとる

## デザイン
- アイコン：24px の線画（stroke-width 1.75）。インラインSVGで用意する
- ラベル：11px、アイコンの下 4px。省略せずに必ず表示する
- 通常：色 #5F6D84
- hover（マウスやトラックパッドをつないだ場合）：背景 #F4F6FA、角丸 16px
- 現在のページ：アイコンの後ろに 幅 56px・高さ 32px・角丸 9999px の背景（#EBF2FF）、色 #1463F0、ラベルを font-weight 700 に

## 動作
- タップ領域は 48×48px 以上にする
- 画面を回転させても、レールの位置と選択中の表示が変わらないようにする
- iPadの画面分割（Split View）で幅が 768px 未満になったら、ボトムナビゲーションに切り替わる
- 項目が画面の高さに収まらない場合は、レールの中だけ縦にスクロールする

## アクセシビリティ
- nav 要素に aria-label="メインメニュー" を付ける
- 各項目は a 要素。現在のページには aria-current="page"
- アイコンは aria-hidden="true"
- 外付けキーボードで操作できるよう、focus-visible のスタイルを用意する

## 出力形式
- [使用技術]のコードを1つ出力
- 幅の切り替えの数値はCSS変数かコメントでまとめ、あとから調整しやすくする
- アイコンの差し替え方と、項目数の目安（3〜6個）をコメントで説明