2カラムのお問い合わせページ

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

書き換える項目

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

[会社名・サービス名]

例：株式会社サンプル

[電話番号]

例：03-0000-0000。載せない場合はこの行を削除

[受付時間]

例：平日 10:00〜18:00

[返信の目安]

例：2営業日以内

[使用技術]

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

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で、[会社名・サービス名]の「お問い合わせページ」を実装してください。

## 目的
- フォームを送る前に、返信の目安と別の連絡手段が分かるようにする
- 入力項目を必要最小限にして、途中でやめる人を減らす

## 表示内容
### 左カラム（案内）
- 英字ラベル「CONTACT」と、見出し「お問い合わせ」
- 案内文：「ご質問・ご相談は、フォームまたはお電話でお寄せください。[返信の目安]にご返信します。」
- 電話番号：[電話番号]
- 受付時間：[受付時間]

### 右カラム（フォーム）
1. お名前（必須、テキスト）
2. メールアドレス（必須、email）
3. お問い合わせ内容（必須、テキストエリア、1000文字まで）
4. 「個人情報の取り扱いに同意する」チェックボックス（必須、プライバシーポリシーへのリンクつき）
5. 送信ボタン「送信する」

## レイアウト
- コンテンツ最大幅 1040px、中央配置。上下の余白 96px（スマホ 56px）
- PC：左 5 : 右 7 の2カラム、カラム間 64px。左カラムは上揃え
- 768px未満：1カラム。案内 → フォームの順で、間隔 40px

## デザイン
- 英字ラベル：12px、font-weight 700、letter-spacing 0.2em、色 #1463F0
- 見出し：PC 32px / スマホ 26px、font-weight 700、色 #1B2A44
- 案内文：15px、line-height 1.9、色 #5F6D84
- 電話番号：28px、font-weight 700、色 #1B2A44。受付時間は 13px、色 #5F6D84
- フォーム：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 32px（スマホ 20px）
- ラベル：14px、font-weight 700。必須項目には「必須」バッジ（12px、背景 #EBF2FF、文字色 #1463F0）
- 入力欄：高さ 48px、角丸 10px、枠線 1px solid #E2E8F0、フォント 16px。テキストエリアは高さ 160px
- フォーカス時：枠線を #1463F0 にし、同色20%透明度の3pxリング
- 項目間の間隔 24px
- 送信ボタン：幅100%、高さ 52px、背景 #1463F0、文字 #FFFFFF、角丸 10px、font-weight 700

## 入力チェック
- 送信時に、未入力・メール形式の誤り・同意のチェックもれを確認する
- エラー時は該当欄の枠線を #C2410C にし、欄の下に具体的な直し方を書いたメッセージ（13px）を出す
- 最初のエラー項目にフォーカスを移す
- 送信中はボタンを無効にし、文言を「送信中…」に変えて二重送信を防ぐ

## アクセシビリティ
- 見出しは h1。フォームは form 要素で、すべての入力欄に label を関連付ける
- 電話番号は a 要素の tel: リンクにする
- 必須は required と aria-required、エラーは aria-invalid と aria-describedby で関連付ける
- 色だけでエラーを伝えない（文言を併用する）

## 出力形式
- [使用技術]で、このページ1つぶんのコードを出力
- サーバーへの送信処理は含めず、送信成功時に完了メッセージへ切り替えるところまでを実装
- 迷惑送信の対策（非表示のダミー項目など）を入れる場所をコメントで示す