Cookie同意バナーCookie consent banner

「Cookie同意バナー（Cookie consent banner）」を実装してください。

## これは何か
Cookie や解析タグを使ってよいかを、訪問者に選んでもらうための知らせ。「同意する」と「拒否する」を同じ重みで並べる。

## 使いどころ
- アクセス解析や広告のタグが、訪問者の情報を外部へ送るサイト
- EU など、事前の同意が求められる地域から訪問者が来るサイト

## 実装の要件
- section[aria-labelledby] > h2 + p（説明と詳細ページへのリンク）+ 同じ見た目の button 2つ（拒否・同意）+ 項目別の設定を開く button
- 実際のページでは position: fixed; left: 16px; right: 16px; bottom: 16px で下端に出し、max-width で覆う面積を抑える
- 選んだ結果を保存し、次の訪問では出さない。変更はフッターの「Cookie の設定」から開けるようにする
- 同意を得るまで、解析・広告のタグを読み込まない
- 「同意する」だけを目立たせ、「拒否する」を小さな文字や設定画面の奥に隠さない。同じ大きさ・同じ見た目で並べる
- 項目ごとの選択肢（解析・広告など）を最初からチェック済みにしない。欧州司法裁判所（CJEU）は、あらかじめチェックされた欄では有効な同意にならないと判断している（2019年の Planet49 事件）
- 同意を得る前に、解析や広告のタグを読み込まない。先に動いていたら、ボタンは飾りになる
- 選んだあとも、フッターなどの「Cookie の設定」からいつでも変更・撤回できるようにする。GDPR は、同意の撤回を同意と同じくらい簡単にするよう求めている
- 日本では改正電気通信事業法の外部送信規律（2023年6月16日施行）が、SNS・検索・ニュースや情報の配信など一定のサービスを提供する事業者に、外部へ送る情報・送信先・利用目的の通知または公表を求めている。同意の取得は必須ではない。EU の GDPR と ePrivacy 指令は、必要不可欠なもの以外の Cookie に事前の同意を求める
- ここに書いたのは法的な助言ではない。対象になる法律と必要な表示は、事業の内容と利用者のいる地域で変わる

## アクセシビリティの要件
- HTML では body の先頭に近い位置に置く。見た目を下端に固定しても、末尾に置くとキーボードや読み上げの利用者が最後まで気づかない
- 操作を妨げない作りなら、見出しを aria-labelledby で結んだ section にする。選ぶまで他を操作させない作りにするなら、モーダルのダイアログとして作る（フォーカスを閉じ込め、背景を inert にする）
- 固定表示のバナーで、フォーカスの移ったリンクや入力欄を覆い隠さない（WCAG 2.2 の 2.4.11 隠されないフォーカス（最低限））。表示中は本文の下に余白を足す
- ボタンの名前は「すべて拒否する」「すべて同意する」のように、押した結果が分かる言葉にする。「OK」だけにしない
- 暗い地の上のフォーカス枠は明るい色にして、3:1 以上を確保する

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<!-- 実際のページでは画面の下端に固定する（CSS のコメント参照）。見本は流れの中に置いている -->
<section class="x-cookie-banner" aria-labelledby="x-cookie-banner-t">
  <h2 class="x-cookie-banner__t" id="x-cookie-banner-t">Cookie の利用について</h2>
  <p class="x-cookie-banner__p">
    アクセス解析と広告のために Cookie を使います。同意しなくても、サイトはそのまま使えます。
    <a class="x-cookie-banner__a" href="/privacy/#cookie">詳しく見る</a>
  </p>
  <div class="x-cookie-banner__row">
    <!-- 「拒否」と「同意」は同じ見た目・同じ大きさにする。片方だけ目立たせない -->
    <button class="x-cookie-banner__b" type="button">すべて拒否する</button>
    <button class="x-cookie-banner__b" type="button">すべて同意する</button>
  </div>
  <button class="x-cookie-banner__s" type="button">項目を選んで設定する</button>
</section>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-cookie-banner,
.x-cookie-banner *:not([class*="fa-"]),
.x-cookie-banner *:not([class*="fa-"])::before,
.x-cookie-banner *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

/* 実際のページでは画面の下端に固定する。
   position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100;
   max-width を決めて、本文を覆う面積を小さく保つ */
.x-cookie-banner {
  width: 320px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #1b2028;
  color: #fff;
}
.x-cookie-banner__t {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}
.x-cookie-banner__p {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.6;
}
.x-cookie-banner__a {
  color: #bcd0ff;
  text-decoration: underline;
}
.x-cookie-banner__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* 拒否と同意で同じクラスを使う。色・大きさ・位置の重みを揃えるため */
.x-cookie-banner__b {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #fff;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.x-cookie-banner__s {
  display: block;
  min-height: 32px;
  margin: 6px auto 0;
  padding: 0 8px;
  border: 0;
  background: none;
  color: #bcd0ff;
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
}
/* 暗い地の上なので、フォーカス枠は明るい色にする（既定の青では 3:1 に届かない） */
.x-cookie-banner__a:focus-visible,
.x-cookie-banner__b:focus-visible,
.x-cookie-banner__s:focus-visible {
  outline: 2px solid #bcd0ff;
  outline-offset: 2px;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。