絞り込みサイドバーつきの一覧

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

書き換える項目

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

[絞り込みの項目]

例：カテゴリ（複数選択）、価格帯（範囲）、在庫あり、送料無料

[一覧の内容]

例：商品カードのグリッド

[使用技術]

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

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「絞り込みサイドバーつきの一覧」を実装してください。

## 表示内容
- サイドバー：[絞り込みの項目]
- 一覧：[一覧の内容]
- 一覧の上に、選んだ条件のチップと、件数、「すべてクリア」

## レイアウト
- PC：左にサイドバー（幅 240px）、右に一覧。間隔 32px。サイドバーは position: sticky
- スマホ：サイドバーを隠し、一覧の上に「絞り込み」のボタンを置く。押すと全画面のモーダルで開く
- サイドバーのなかは、項目のグループを縦に並べ、グループごとに開閉できる

## デザイン
- グループの見出し：14px、font-weight 700、色 #1B2A44、右に開閉の山形
- チェックボックスの行：14px、色 #47566E、高さ 36px。右に、その条件に合う件数（12px、色 #8A96AA）
- チェックボックス：18px、角丸 4px、枠線 1.5px solid #CBD5E1。チェック時は背景 #1463F0
- 価格の範囲：2つのつまみのスライダー。線は #DCE4F0、選んだ範囲は #1463F0。下に「¥1,000 〜 ¥5,000」と表示
- 選んだ条件のチップ：高さ 28px、角丸 999px、背景は #1463F0 の9%の淡い色、文字 #1463F0・12px・font-weight 700。右に ✕
- 「すべてクリア」：13px、色 #5F6D84、下線つき

## 動作
- 条件を変えると、一覧をすぐに絞り込む（スマホのモーダルでは、「◯件を表示」のボタンを押してから反映する）
- 同じグループのなかは「どれかに合う」、別のグループどうしは「すべてに合う」で絞り込む
- 該当が0件になる条件は、薄く表示して押せないようにする
- 条件を URL のクエリに反映し、再読み込みしても保たれるようにする
- 該当が0件のときは、「条件に合うものがありません」と「すべてクリア」を表示する

## アクセシビリティ
- サイドバーは form 要素。グループは fieldset / legend
- スライダーは、キーボードの矢印キーで動かせる。数字を直接入力できる欄も用意する
- 件数が変わったら、aria-live="polite" で伝える
- チップの ✕ に aria-label="（条件名）を外す"

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