アクセント付きボーダーテーブル

<div class="border-accent-table_wrapper">
  <h2 class="border-accent-table_title">プラン別機能一覧</h2>
  <table class="border-accent-table">
    <thead>
      <tr>
        <th>プラン</th>
        <th>月額</th>
        <th>容量</th>
        <th>サポート</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ベーシック</td>
        <td>¥980</td>
        <td>10GB</td>
        <td>メールのみ</td>
      </tr>
      <tr>
        <td>スタンダード</td>
        <td>¥1,980</td>
        <td>100GB</td>
        <td>メール・チャット</td>
      </tr>
      <tr>
        <td>プロフェッショナル</td>
        <td>¥3,980</td>
        <td>1TB</td>
        <td>24時間対応</td>
      </tr>
    </tbody>
  </table>
</div>

.border-accent-table_wrapper {
  max-width: 900px;
  margin: 60px auto;
  font-family: 'Helvetica Neue', sans-serif;
}

.border-accent-table_title {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #222;
  text-align: center;
}

.border-accent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: center;
  background-color: #fff;
  border-top: 3px solid #4f46e5; /* 上のアクセント線 */
  border-bottom: 3px solid #4f46e5; /* 下のアクセント線 */
}

.border-accent-table thead th {
  background-color: #f3f4f6;
  color: #333;
  padding: 14px 12px;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
}

.border-accent-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid #eee;
  color: #444;
}

.border-accent-table tbody tr:hover {
  background-color: #f9f9ff;
}