チェックマーク付き・機能比較表

<div class="feature-table_wrapper">
  <h2 class="feature-table_title">各プランの対応機能一覧</h2>
  <table class="feature-table">
    <thead>
      <tr>
        <th>機能</th>
        <th>ライト</th>
        <th>スタンダード</th>
        <th>プレミアム</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ユーザー管理</td>
        <td>✔</td>
        <td>✔</td>
        <td>✔</td>
      </tr>
      <tr>
        <td>アクセス解析</td>
        <td>✘</td>
        <td>✔</td>
        <td>✔</td>
      </tr>
      <tr>
        <td>ファイル共有</td>
        <td>✘</td>
        <td>✘</td>
        <td>✔</td>
      </tr>
      <tr>
        <td>24時間サポート</td>
        <td>✘</td>
        <td>✘</td>
        <td>✔</td>
      </tr>
    </tbody>
  </table>
</div>

.feature-table_wrapper {
  max-width: 900px;
  margin: 60px auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  background: #fff;
}

.feature-table_title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #333;
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 15px;
  color: #333;
}

.feature-table thead th {
  background-color: #4f46e5;
  color: #fff;
  padding: 12px;
}

.feature-table tbody td,
.feature-table tbody th {
  padding: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.feature-table tbody td:first-child {
  text-align: left;
  font-weight: bold;
  background: #f9fafb;
}

.feature-table td {
  font-size: 16px;
}

.feature-table td::after {
  display: inline-block;
  margin-left: 5px;
}

.feature-table td:contains('✔') {
  color: #10b981; /* green */
  font-weight: bold;
}

.feature-table td:contains('✘') {
  color: #ef4444; /* red */
  font-weight: bold;
}