入力しやすいお問い合わせフォーム

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

書き換える項目

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

[送信先]

フォームのaction。未定なら「#」のまま

[使用技術]

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

あなたはフォームUIに詳しいフロントエンドエンジニアです。
以下の条件で、お問い合わせフォームを実装してください。

## 項目
1. お名前（必須、テキスト）
2. メールアドレス（必須、email）
3. お問い合わせ内容（必須、テキストエリア、1000文字まで）
4. 送信ボタン「送信する」

## レイアウト・デザイン
- フォーム最大幅 560px、中央配置、背景 #FFFFFF、角丸 12px、枠線 1px solid #E2E8F0、padding 32px（スマホ 20px）
- ラベルは入力欄の上。ラベル 14px・font-weight 700・色 #1B2A44
- 必須項目はラベル横に「必須」バッジ（文字 12px、背景 #EBF2FF、文字色 #1463F0）
- 入力欄：高さ 48px、角丸 10px、枠線 1px solid #E2E8F0、フォント 16px（iOSでズームしない）
- フォーカス時：枠線を #1463F0 にし、同色20%透明度の3pxリング
- 項目間の間隔 24px
- 送信ボタン：幅100%、高さ 52px、背景 #1463F0、文字 #FFFFFF、角丸 10px

## 入力チェック
- 送信時に未入力・メール形式の誤りをチェック
- エラー時は該当欄の枠線を #C2410C にし、欄の下にエラーメッセージ（13px）
- 最初のエラー項目にフォーカスを移す
- テキストエリアの下に「残り◯文字」を表示

## アクセシビリティ
- すべての入力欄に <label for> を関連付ける
- 必須は required と aria-required、エラーは aria-invalid と aria-describedby で関連付ける
- エラーメッセージ領域は aria-live="polite"
- 色だけでエラーを伝えない（アイコンや文言を併用）

## 出力形式
- [使用技術]のコードを1つ出力（action="[送信先]"）
- サーバー送信処理は含めず、送信成功時の表示例（「送信しました」）までを実装