縦ラインアクセント付き・シンプルフラットテーブル

<div class="line-table_wrapper">
  <h2 class="line-table_title">コース内容比較</h2>
  <table class="line-table">
    <thead>
      <tr>
        <th>コース名</th>
        <th>対象</th>
        <th>価格</th>
        <th>特徴</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>スタート</td>
        <td>初心者</td>
        <td>¥5,000</td>
        <td>入門内容が中心</td>
      </tr>
      <tr>
        <td>ステップアップ</td>
        <td>中級者</td>
        <td>¥10,000</td>
        <td>応用演習つき</td>
      </tr>
      <tr>
        <td>マスター</td>
        <td>上級者</td>
        <td>¥15,000</td>
        <td>実務向け課題あり</td>
      </tr>
    </tbody>
  </table>
</div>

.line-table_wrapper {
  max-width: 900px;
  margin: 60px auto;
  font-family: 'Segoe UI', sans-serif;
}

.line-table_title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 5px solid #10b981; /* 緑の縦ライン */
  color: #222;
}

.line-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

.line-table thead th {
  background-color: #ecfdf5; /* 淡いグリーン */
  color: #065f46;
  text-align: left;
  padding: 14px 18px;
  font-weight: 600;
  border-bottom: 2px solid #a7f3d0;
}

.line-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
}

.line-table tbody tr:hover td {
  background-color: #f9f9f9;
}