人数で計算する料金カード

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

書き換える項目

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

[プラン名]

例：チームプラン

[1人あたりの料金]

例：月額 800円

[人数による割引]

例：10人以上は1人700円。なければ「なし」

[使用技術]

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

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「人数で計算する料金カード」を実装してください。

## 表示内容
- プラン名：[プラン名]
- 1人あたりの料金：[1人あたりの料金]
- 利用人数（「−」「＋」のボタンと数字の入力欄）
- 計算式（例：800円 × 5人）と、合計の月額
- 人数による割引：[人数による割引]

## レイアウト
- 1枚のカード（最大幅 420px）
- 上から プラン名 → 1人あたりの料金 → 利用人数の行 → 区切り線 → 計算式と合計 → ボタン

## デザイン
- カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px
- プラン名：16px、font-weight 700。1人あたりの料金：24px、font-weight 700
- 利用人数の行：左に「利用人数」、右にステッパー（各ボタン 40×40px、枠線 1px solid #DCE4F0、記号は #1463F0）
- 計算式：13px、色 #5F6D84
- 合計：36px、font-weight 700、色 #1463F0。「/ 月（税込）」は 13px
- 割引が適用されたとき：計算式の横に「10人以上の割引を適用」のラベル（背景は #1463F0 の9%の淡い色、文字 #1463F0）
- ボタン：幅 100%、高さ 48px、角丸 999px、背景 #1463F0、文字 #FFFFFF

## 動作
- 人数を変えると、計算式と合計がすぐに変わる
- 人数は 1〜999 の範囲。範囲外や数字以外が入ったら、範囲内の値に直す
- 金額は3桁ごとにカンマで区切る
- 計算は整数で行い、小数の誤差が出ないようにする

## アクセシビリティ
- 人数の入力欄に label を付け、ボタンには aria-label="人数を1人減らす"「人数を1人増やす」を付ける
- 合計の変化を aria-live="polite" で伝える
- 割引の適用は色だけでなく文字で伝える

## 出力形式
- [使用技術]のコードを1つ出力
- 単価と割引の条件を、1か所の設定にまとめる