同意チェックつきの送信エリア

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

書き換える項目

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

[利用目的]

例：お問い合わせへの回答のため

[ポリシーのページ]

例：/privacy

[ボタン文言]

例：同意して送信する

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはフォームのUIに詳しいフロントエンドエンジニアです。
以下の条件で「同意チェックつきの送信エリア」を実装してください。

## 表示内容
- 枠のなかに、個人情報の取り扱いの要点：
  - 利用目的：[利用目的]
  - 「くわしくはプライバシーポリシーをご確認ください」（リンク先：[ポリシーのページ]）
- チェックボックス：「プライバシーポリシーに同意する」
- 送信ボタン：[ボタン文言]

## デザイン
- 要点の枠：背景 #F7F9FC、枠線 1px solid #E2E8F0、角丸 8px、padding 16px、文字 13px・line-height 1.8・色 #47566E
- チェックボックス：20×20px、枠線 2px solid #CBD5E1、角丸 4px。チェック時は背景 #1463F0・白いチェックマーク
- チェックボックスの文言：15px、font-weight 700。行全体（高さ 44px 以上）を押せるようにする
- 送信ボタン：幅 100%（最大 320px）、高さ 52px、角丸 999px。有効時は背景 #1463F0・文字 #FFFFFF、無効時は背景 #E2E8F0・文字 #8A96AA

## 動作
- チェックを入れるまで、送信ボタンは押せない状態にする
- 押せない状態のボタンの下に「同意にチェックを入れると送信できます」と表示する
- プライバシーポリシーのリンクは新しいタブで開き、入力内容が消えないようにする

## アクセシビリティ
- 標準の input type="checkbox" を使い、見た目だけを整える（要素を隠すときは、キーボードで操作できる状態を保つ）
- 送信ボタンは aria-disabled を使ってフォーカスできるようにし、理由を aria-describedby で関連付ける
- リンクには、新しいタブで開くことが分かる表示を付ける

## 出力形式
- [使用技術]のコードを1つ出力
- 最初からチェック済みの状態にはしない、という注意をコメントに書く