Cookie同意バナー

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

書き換える項目

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

[説明文]

例：当サイトでは、利便性向上と利用状況の分析のためにCookieを使用しています。

[Cookieの種類]

例：必須、分析、広告

[プライバシーポリシーのURL]

例：/privacy

[使用技術]

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

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「Cookie同意バナー」を実装してください。

## 表示内容
- 説明文：[説明文]
- リンク：「プライバシーポリシー」（[プライバシーポリシーのURL]）
- ボタン：「設定」「拒否する」「同意する」
- 設定の画面：[Cookieの種類] ごとの説明と、オン／オフのスイッチ。「選択した内容で保存」のボタン

## レイアウト
- 画面の下に固定。左右と下に 16px の余白を空けたカード型。最大幅 880px、中央配置
- PC：左に説明文、右にボタンを横並び。スマホ：説明文 → ボタン（縦並び）
- ページの内容を覆いすぎない高さにする

## デザイン
- バナー：背景 #FFFFFF、角丸 12px、padding 16px 20px、影 0 8px 32px rgba(27,42,68,0.18)
- 説明文：13px、line-height 1.7、色 #47566E。リンクは #1463F0・下線つき
- 「同意する」：高さ 40px、左右padding 20px、角丸 999px、背景 #1463F0、文字 #FFFFFF・14px・font-weight 700
- 「拒否する」：同じ大きさ、背景 #FFFFFF、枠線 1px solid #1463F0、文字 #1463F0
- 「設定」：同じ高さ、背景 #FFFFFF、枠線 1px solid #CBD5E1、文字 #47566E

## 動作
- はじめて訪れたとき、または選択が保存されていないときに表示する
- 選択の結果を保存し、次回からは表示しない。フッターなどから設定を開き直せる関数を用意する
- 「必須」のCookieはオフにできない（スイッチを無効にし、理由を添える）
- 同意の状態を返す関数を用意し、同意があるときだけ計測などのスクリプトを読み込めるようにする
- 選択する前に、分析や広告のCookieを使わない

## 注意点
- 「同意する」と「拒否する」を、同じ押しやすさにする（拒否だけを小さく・薄くしない）
- スイッチの初期状態は、必須以外をオフにする
- 必要な対応は国や地域の法令によって異なるため、公開前に専門家の確認が必要であることをコメントで明記する

## アクセシビリティ
- role="region" と aria-label="Cookieの利用について" を付ける
- 後ろのページの操作をさまたげない（フォーカスを閉じ込めない）
- スイッチは role="switch" と aria-checked で実装する

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