フォームつきのファーストビュー

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

書き換える項目

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

[キャッチコピー]

例：予約の電話対応を、半分に。

[特徴]

チェックマークつきで並べる短い文を3つ

[フォームの見出し]

例：資料を無料でダウンロード

[フォームの項目]

3つまで。例：会社名、お名前、メールアドレス

[ボタン文言]

例：資料を受け取る

[使用技術]

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

あなたはLP制作とフォームUIに詳しいフロントエンドエンジニアです。
以下の条件で「フォームつきのファーストビュー」を実装してください。

## 表示内容
### 左（コピー）
- メイン見出し：[キャッチコピー]
- 特徴（チェックマークつきの箇条書き）：[特徴]

### 右（フォーム）
- フォームの見出し：[フォームの見出し]
- 入力項目（すべて必須）：[フォームの項目]
- 送信ボタン：[ボタン文言]
- ボタンの下の注記：「個人情報の取り扱いについて」へのリンクを含む1文

## レイアウト
- PC：2カラム（コピー 6 : フォーム 5）、縦方向は中央揃え、カラム間 64px
- コンテンツ最大幅 1120px、上下の padding 80px
- 960px未満：1カラム。コピー → フォームの順で、間隔 32px。上下の padding 48px
- スマホでは特徴の箇条書きを、フォームの下に移してもよい（フォームを早く見せるため）

## デザイン
- 背景：#F7F9FC
- 見出し：clamp(28px, 4.2vw, 44px)、font-weight 700、line-height 1.35、色 #1B2A44
- 特徴：16px、line-height 1.7、色 #1B2A44、項目間 12px、見出しの下 28px。左に直径 22px の丸（背景 #EBF2FF）とチェックマーク（#1463F0）
- フォームのカード：背景 #FFFFFF、角丸 16px、padding 32px（スマホ 24px）、影 0 16px 48px rgba(27,42,68,.10)
- フォームの見出し：20px、font-weight 700、下に 20px の余白
- ラベル：13px、font-weight 700。入力欄：高さ 48px、角丸 10px、枠線 1px solid #E2E8F0、フォント 16px、項目間 16px
- フォーカス時：枠線を #1463F0 にし、同色20%透明度の3pxリング
- 送信ボタン：幅100%、高さ 52px、角丸 10px、背景 #1463F0、文字 #FFFFFF・16px・font-weight 700
- 注記：12px、色 #5F6D84、中央揃え、ボタンの下 12px

## 入力チェック
- 送信時に未入力とメール形式の誤りを確認し、該当欄の下にメッセージ（13px、色 #C2410C）を出す
- 最初のエラー項目にフォーカスを移す
- 送信中はボタンを無効にして、二重送信を防ぐ

## アクセシビリティ
- 見出しは h1、フォームの見出しは h2
- すべての入力欄に label を関連付け、autocomplete 属性（organization、name、email など）を付ける
- エラーは aria-invalid と aria-describedby で関連付け、色だけで伝えない
- チェックマークは装飾として aria-hidden="true" を付ける

## 出力形式
- [使用技術]のコードを1つ出力
- サーバーへの送信処理は含めず、送信成功時の表示までを実装
- 項目を増やすと申し込みが減りやすいことを踏まえ、項目数の目安をコメントで補足