比較テーブル

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「比較テーブル」の効果を追加してください。

# 追加してほしい効果
比較テーブル（カード & テーブル）
エントリーからエンタープライズまで4プランの機能を比較する表。おすすめプランの列を強調し、✓と×の記号で対応可否がひと目で分かります。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 比較テーブル: 料金プランの機能を比較しおすすめ列を強調 -->
<section class="tb6-wrap">
  <div class="tb6-card">
    <header class="tb6-head">
      <h2 class="tb6-title">プラン機能比較</h2>
      <p class="tb6-hint">すべての機能をひと目で比較できます</p>
    </header>
    <div class="tb6-scroll">
      <table class="tb6-table">
        <caption class="sr-only">4つのプランごとの機能比較。プロプランがおすすめ</caption>
        <thead>
          <tr>
            <th scope="col" class="tb6-corner">機能</th>
            <th scope="col">エントリー</th>
            <th scope="col">スタンダード</th>
            <th scope="col" class="tb6-pop"><span class="tb6-pop__tag">おすすめ</span>プロ</th>
            <th scope="col">エンタープライズ</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">利用ユーザー数</th>
            <td>1名</td><td>5名</td><td class="tb6-pop">20名</td><td>無制限</td>
          </tr>
          <tr>
            <th scope="row">ストレージ容量</th>
            <td>5GB</td><td>50GB</td><td class="tb6-pop">200GB</td><td>無制限</td>
          </tr>
          <tr>
            <th scope="row">サポート対応</th>
            <td>メール</td><td>メール+チャット</td><td class="tb6-pop">優先サポート</td><td>専任担当</td>
          </tr>
          <tr>
            <th scope="row">API連携</th>
            <td class="tb6-no">×</td><td class="tb6-no">×</td><td class="tb6-pop tb6-yes">✓</td><td class="tb6-yes">✓</td>
          </tr>
          <tr>
            <th scope="row">カスタムドメイン</th>
            <td class="tb6-no">×</td><td class="tb6-yes">✓</td><td class="tb6-pop tb6-yes">✓</td><td class="tb6-yes">✓</td>
          </tr>
          <tr>
            <th scope="row">優先アップデート</th>
            <td class="tb6-no">×</td><td class="tb6-no">×</td><td class="tb6-pop tb6-yes">✓</td><td class="tb6-yes">✓</td>
          </tr>
          <tr class="tb6-price-row">
            <th scope="row">月額料金</th>
            <td>¥0</td><td>¥1,980</td><td class="tb6-pop">¥4,980</td><td>お問い合わせ</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

【CSS】
/* 比較テーブル: プラン機能比較・おすすめ列の強調・✓/×表示 */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, sans-serif;
  background: linear-gradient(160deg, #f7f8fc 0%, #eef0f7 100%);
  color: #1c2033;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.tb6-wrap { width: 100%; display: grid; place-items: center; }
.tb6-card {
  width: min(820px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(24, 28, 55, .10), 0 2px 8px rgba(24, 28, 55, .04);
  overflow: hidden;
}
.tb6-head { padding: 20px 24px; border-bottom: 1px solid #eef0f6; }
.tb6-title { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.tb6-hint { margin: 0; font-size: 12px; color: #8b91a7; }

.tb6-scroll { width: 100%; overflow-x: auto; }
.tb6-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 13.5px; text-align: center; }

.tb6-table thead th {
  padding: 14px 16px; background: #12172b; color: #fff; font-weight: 700; font-size: 13px;
  white-space: nowrap; position: relative;
}
.tb6-corner { text-align: left !important; color: #9aa0b4 !important; font-weight: 600 !important; background: #12172b; }
.tb6-table thead th.tb6-pop { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.tb6-pop__tag {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 2px 10px; margin: 0 auto 5px; width: fit-content;
}

.tb6-table tbody th, .tb6-table tbody td { padding: 13px 16px; border-bottom: 1px solid #eef0f6; white-space: nowrap; }
.tb6-table tbody th { text-align: left; font-weight: 600; color: #3a4050; background: #fafbfd; }
.tb6-table tbody tr:last-child th, .tb6-table tbody tr:last-child td { border-bottom: none; }
.tb6-table tbody tr:hover td, .tb6-table tbody tr:hover th { background: #f3f5fb; }

.tb6-pop { background: rgba(99, 102, 241, .06); font-weight: 600; }
.tb6-yes { color: #10b981; font-weight: 800; }
.tb6-no { color: #c8ccd8; }

.tb6-price-row th, .tb6-price-row td { padding-top: 16px; padding-bottom: 16px; font-weight: 800; font-size: 14.5px; color: #1c2033; }
.tb6-price-row td.tb6-pop { color: #4f46e5; }

【JavaScript】
// 比較テーブル: 静的表示のみのため追加のJSは不要

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。