種類を選んでから入力するフォーム

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

書き換える項目

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

[お問い合わせの種類]

3〜5個。例：サービスについて／お見積り／採用／その他

[種類ごとの追加項目]

例：お見積り→ご予算・希望納期、採用→希望職種

[送信先]

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

[使用技術]

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

あなたはフォームUIに詳しいフロントエンドエンジニアです。
以下の条件で、「種類を選んでから入力するお問い合わせフォーム」を実装してください。

## 目的
- 最初に種類を選んでもらい、その種類に必要な項目だけを表示して入力の負担を減らす
- 受け取る側が、種類ごとに担当へ振り分けやすくする

## 項目
1. お問い合わせの種類（必須、1つだけ選択）：[お問い合わせの種類]
2. 種類ごとの追加項目：[種類ごとの追加項目]
3. お名前（必須、テキスト）
4. メールアドレス（必須、email）
5. お問い合わせ内容（必須、テキストエリア、1000文字まで）
6. 送信ボタン「送信する」

## 動作
- 種類は、横に並んだボタン型の選択肢から1つ選ぶ（スマホでは折り返す）
- 種類を選ぶと、その種類の追加項目だけが表示される。選び直すと追加項目も切り替わる
- 表示されていない追加項目は、入力チェックと送信内容の対象から外す
- 種類を選ぶ前でも、共通項目（お名前・メール・内容）は表示しておく

## デザイン
- フォーム最大幅 640px、中央配置、背景 #FFFFFF、角丸 12px、枠線 1px solid #E2E8F0、padding 32px（スマホ 20px）
- ラベル：14px、font-weight 700、色 #1B2A44。必須項目には「必須」バッジ（12px、背景 #EBF2FF、文字色 #1463F0）
- 種類のボタン：高さ 44px、左右の余白 18px、角丸 9999px、枠線 1px solid #E2E8F0、文字 14px・色 #47566E、ボタン間 8px
- 選択中のボタン：枠線と文字を #1463F0、背景 #EBF2FF、font-weight 700
- 入力欄：高さ 48px、角丸 10px、枠線 1px solid #E2E8F0、フォント 16px
- フォーカス時：枠線を #1463F0 にし、同色20%透明度の3pxリング
- 項目間の間隔 24px。追加項目は、表示されるときに 150ms でふわっと現れる
- 送信ボタン：幅100%、高さ 52px、背景 #1463F0、文字 #FFFFFF、角丸 10px

## 入力チェック
- 送信時に、種類の未選択・未入力・メール形式の誤りを確認する
- エラー時は該当欄の下にメッセージ（13px、色 #C2410C）を出し、最初のエラー項目にフォーカスを移す

## アクセシビリティ
- 種類の選択肢は、fieldset と legend で囲んだラジオボタンとして実装する（見た目だけボタン型にする）
- キーボードの矢印キーで選択肢を移動できるようにする
- 追加項目が切り替わったことが、スクリーンリーダーにも伝わるようにする
- prefers-reduced-motion: reduce のときはアニメーションを無効にする

## 出力形式
- [使用技術]のコードを1つ出力（action="[送信先]"）
- 種類と追加項目の対応は、設定用のデータ（配列やオブジェクト）にまとめ、あとから増やせるようにする
- サーバー送信処理は含めない