検索窓が主役のファーストビュー

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

書き換える項目

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

[キャッチコピー]

例：行きたいお店が、すぐ見つかる。

[検索条件]

2〜3個。例：エリア、ジャンル、日付

[人気のキーワード]

4〜6個。例：渋谷、個室、ランチ、当日予約

[検索結果のURL]

例：/search

[使用技術]

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

あなたは検索UIに詳しいWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「検索窓が主役のファーストビュー」を実装してください。

## 表示内容
- メイン見出し：[キャッチコピー]
- 検索フォーム：条件 [検索条件] と、検索ボタン「検索する」
- 人気のキーワード：[人気のキーワード]（押すと、その言葉で検索した結果へ移動する）

## レイアウト
- すべて中央揃えで、上から 見出し → 検索フォーム → 人気のキーワード
- コンテンツ最大幅 880px、上下の padding PC 96px / スマホ 48px
- PC：検索条件と検索ボタンを横1行に並べ、1つの大きな枠にまとめる
- 768px未満：検索条件を縦に積み、検索ボタンを一番下に幅100%で置く

## デザイン
- 背景：#EBF2FF
- 見出し：clamp(28px, 4.5vw, 44px)、font-weight 700、line-height 1.35、色 #1B2A44
- 検索フォームの枠：背景 #FFFFFF、角丸 9999px（スマホは 16px）、padding 8px、影 0 12px 32px rgba(27,42,68,.10)、見出しの下 32px
- 各条件：高さ 56px、左右の padding 20px。上に小さなラベル（11px、色 #5F6D84）、下に入力欄（16px、色 #1B2A44）
- 条件の間は 1px solid #E2E8F0 の縦線で区切る（スマホは横線）
- 検索ボタン：高さ 56px、左右の padding 32px、角丸 9999px、背景 #1463F0、文字 #FFFFFF・16px・font-weight 700、虫めがねのアイコン（18px）つき
- 人気のキーワード：検索フォームの下 20px。「人気：」の文字（13px、色 #5F6D84）に続けて、チップ型のリンクを並べる
- チップ：高さ 32px、左右の padding 14px、角丸 9999px、背景 #FFFFFF、文字 13px、色 #47566E。hover で文字色 #1463F0

## 動作
- form 要素の送信で [検索結果のURL] に移動する（JavaScriptが動かなくても検索できるようにする）
- 何も入力せずに検索した場合は、すべての結果を表示するページへ進む（エラーにしない）
- フォーカス中の条件は、枠の中で背景を #F7F9FC にして、どこに入力しているかを示す
- 選択式の条件（エリアなど）は select 要素、日付は input type="date" を使う

## アクセシビリティ
- 見出しは h1
- 検索フォームに role="search" を付け、すべての入力欄に label を関連付ける（見た目の小さなラベルを label 要素にする）
- 入力欄のフォントは 16px 以上にして、iOSで画面がズームしないようにする
- 人気のキーワードは ul / li でマークアップする
- フォーカスリングを、枠の角丸に沿って表示する

## 出力形式
- [使用技術]のコードを1つ出力
- 検索条件を増減するときの変更箇所をコメントで説明