3カラム料金表（中央強調）

このパーツの使いどころと実装ポイント

このパーツは、3つのプランを並べて中央のおすすめプランを強調する料金表です。display:grid の repeat(3,1fr) で3列を均等に並べ、中央カードにだけ --featured 修飾子を付けてグラデーション背景・transform:scale(1.04) による拡大・「人気」バッジを与え、視線が自然と真ん中へ向かう設計です。各プランは「プラン名・価格・機能リスト（ul/li）・CTA ボタン」という同じ構造を共有し、価格は通貨記号・金額・税表記を span で分けて細かく装飾できるようにしています。

向いている場面

• Web 制作・コンサルの「ライト／スタンダード／プレミアム」提案
• SaaS やサブスクの月額プラン比較
• サロン・スクールのコース料金、保守・運用プランの提示

カスタマイズと注意点

強調したいプランを変えたいときは --featured を付けるカードを差し替えるだけで済みます。機能リストは li を足し引きして調整しますが、3プランの行数が揃わないと高さがバラつくため、align-items:start の挙動を踏まえて項目数を近づけると見栄えが整います。価格は税抜・税込のどちらか明記し、誤解を招かないようにしてください。中央カードは scale で拡大しているぶん、モバイルでは縦積みになると拡大が悪目立ちすることがあるので、その場合は scale を解除すると安定します。金額や契約条件は確約にならない表現にとどめるのが安全です。