3 プラン（中央強調）料金表
Free・Pro・Business の3プランを横並びにし、中央の Pro に「人気」バッジを付けて強調した料金表です。中央カードだけ pr-3__c--on クラスで transform:scale(1.04) と濃いボーダー・影を加え、視線を集めています。
このパーツの使いどころと実装ポイント
Free・Pro・Business の3プランを横並びにし、中央の Pro に「人気」バッジを付けて強調した料金表です。中央カードだけ pr-3__c--on クラスで transform:scale(1.04) と濃いボーダー・影を加え、視線を集めています。各カードは料金表示・機能リスト（<ul>）・申込ボタンという共通フォーマットなので、横に並べたときに比較しやすいのが利点です。
向いている場面
SaaS やサブスクリプション型サービスの料金ページ、オンライン会員サービス、コワーキングや教室の月額プランなど、価格帯を3段階で提示したい場面の定番です。「無料で試す→主力プラン→法人向け」という王道の階段設計に当てはめやすい構成です。
カスタマイズと注意点
差し替えどころは各プラン名・金額・機能リスト・ボタン文言です。強調したいプランがPro以外なら pr-3__c--on を付け替えてください。中央プランの機能を1つ多めに見せると「お得感」が伝わります。注意点として、scale で拡大した中央カードはスマホで隣とぶつかりやすいため、狭い画面では縦積みにして拡大を解除する指定が無難です。価格は税込・税別を明記し、機能リストはプラン間で項目順を揃えると比較が崩れません。
よくある質問
強調するプランを変えられますか？
できます。pr-3__c--on クラスを目立たせたいカードに移すだけで、拡大・濃いボーダー・影・人気バッジが切り替わります。最も売りたい主力プランに付けるのが基本です。
プラン数を2つや4つにできますか？
可能です。カード要素を増減し、grid-template-columns の列数を合わせてください。ただし4つ以上は横幅が窮屈になるため、機能の文字量を減らすかスマホで縦積みにする調整が必要です。