固定メニューと重ならないスマホ用フッター

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

書き換える項目

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

[サービス名]

コピーライトに表示する名前

[固定メニューの項目]

4〜5個。例：ホーム、さがす、カート、マイページ

[フッターのリンク]

例：ご利用ガイド、利用規約、プライバシー

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「固定メニューと重ならないスマホ用フッター」を実装してください。

## 表示内容
- フッター：リンク（[フッターのリンク]）、コピーライト（© 年 [サービス名]）
- 固定メニュー：[固定メニューの項目]（それぞれアイコンと文言）

## 固定メニュー
- position: fixed で画面の下端に固定する。高さ 56px
- iPhoneのホームバーを避けるため、padding-bottom に env(safe-area-inset-bottom) を足す
- 項目を等間隔に並べ、アイコン（24px）の下に文言（10px）
- 背景 #FFFFFF、上に 1px solid #E2E8F0
- 現在のページ：アイコンと文言の色 #1463F0、font-weight 700。それ以外は #5F6D84
- 768px 以上では表示しない

## フッター
- 背景 #F7F9FC、上端に 1px solid #E2E8F0
- リンク：13px、色 #5F6D84、中央揃えで折り返す
- コピーライト：12px、色 #5F6D84
- 下の padding を、固定メニューの高さぶん広くする：calc(24px + 56px + env(safe-area-inset-bottom))
- 固定メニューの高さはCSS変数（--tabbar-height）にまとめ、フッターと固定メニューの両方で使う

## 動作
- 入力欄にフォーカスしている間は、固定メニューを隠す（キーボードの上に重ならないようにする）
- ページ内リンクで移動したとき、移動先が固定メニューに隠れないよう scroll-padding-bottom を指定する

## アクセシビリティ
- 固定メニューは nav 要素（aria-label="メインメニュー"）、フッターのリンクは別の nav 要素（aria-label="フッターメニュー"）にして区別する
- 現在のページには aria-current="page"
- アイコンは aria-hidden="true"
- タップ領域は 44×44px 以上
- HTMLの順番は、フッター → 固定メニュー とし、キーボードで最後にメニューへ到達できるようにする

## 出力形式
- [使用技術]のコードを1つ出力