レスポンシブ・カード化

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「レスポンシブ・カード化」の効果を追加してください。

# 追加してほしい効果
レスポンシブ・カード化（カード & テーブル）
注文一覧を画面幅に応じて表示切替するテーブル。広い画面は通常の表、スマホ幅では各行がラベル付きカードに変わり、狭い画面でも崩れません。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- レスポンシブ・カード化テーブル: 狭い画面では各行がカードに変わる注文一覧 -->
<section class="tb5-wrap">
  <div class="tb5-card">
    <header class="tb5-head">
      <h2 class="tb5-title">注文一覧</h2>
      <p class="tb5-hint">画面幅に応じて表示が切り替わります</p>
    </header>
    <table class="tb5-table">
      <caption class="sr-only">注文番号ごとの顧客・商品・数量・金額・状態</caption>
      <thead>
        <tr>
          <th scope="col">注文番号</th>
          <th scope="col">顧客名</th>
          <th scope="col">商品</th>
          <th scope="col" class="tb5-num">数量</th>
          <th scope="col" class="tb5-num">金額</th>
          <th scope="col">状態</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row" data-label="注文番号">#A1023</th>
          <td data-label="顧客名">岡田 玲奈</td>
          <td data-label="商品">ノートPC 13インチ</td>
          <td class="tb5-num" data-label="数量">1</td>
          <td class="tb5-num" data-label="金額">¥128,000</td>
          <td data-label="状態"><span class="tb5-badge tb5-badge--shipped">発送済み</span></td>
        </tr>
        <tr>
          <th scope="row" data-label="注文番号">#A1024</th>
          <td data-label="顧客名">松本 大和</td>
          <td data-label="商品">ワイヤレスマウス</td>
          <td class="tb5-num" data-label="数量">2</td>
          <td class="tb5-num" data-label="金額">¥6,400</td>
          <td data-label="状態"><span class="tb5-badge tb5-badge--prep">準備中</span></td>
        </tr>
        <tr>
          <th scope="row" data-label="注文番号">#A1025</th>
          <td data-label="顧客名">小林 葵</td>
          <td data-label="商品">4Kモニター</td>
          <td class="tb5-num" data-label="数量">1</td>
          <td class="tb5-num" data-label="金額">¥32,800</td>
          <td data-label="状態"><span class="tb5-badge tb5-badge--shipped">発送済み</span></td>
        </tr>
        <tr>
          <th scope="row" data-label="注文番号">#A1026</th>
          <td data-label="顧客名">加藤 悠斗</td>
          <td data-label="商品">メカニカルキーボード</td>
          <td class="tb5-num" data-label="数量">1</td>
          <td class="tb5-num" data-label="金額">¥9,800</td>
          <td data-label="状態"><span class="tb5-badge tb5-badge--cancel">キャンセル</span></td>
        </tr>
        <tr>
          <th scope="row" data-label="注文番号">#A1027</th>
          <td data-label="顧客名">木村 花音</td>
          <td data-label="商品">デスクライト</td>
          <td class="tb5-num" data-label="数量">3</td>
          <td class="tb5-num" data-label="金額">¥16,200</td>
          <td data-label="状態"><span class="tb5-badge tb5-badge--shipped">発送済み</span></td>
        </tr>
        <tr>
          <th scope="row" data-label="注文番号">#A1028</th>
          <td data-label="顧客名">斎藤 蓮</td>
          <td data-label="商品">ウェブカメラ</td>
          <td class="tb5-num" data-label="数量">1</td>
          <td class="tb5-num" data-label="金額">¥7,200</td>
          <td data-label="状態"><span class="tb5-badge tb5-badge--prep">準備中</span></td>
        </tr>
        <tr>
          <th scope="row" data-label="注文番号">#A1029</th>
          <td data-label="顧客名">中村 蓮</td>
          <td data-label="商品">モバイルバッテリー</td>
          <td class="tb5-num" data-label="数量">2</td>
          <td class="tb5-num" data-label="金額">¥7,960</td>
          <td data-label="状態"><span class="tb5-badge tb5-badge--shipped">発送済み</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

【CSS】
/* レスポンシブ・カード化テーブル: 広い画面は表、狭い画面はdata-labelでカード化 */
* { 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;
}

.tb5-wrap { width: 100%; display: grid; place-items: center; }
.tb5-card {
  width: min(760px, 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;
  padding-bottom: 6px;
}
.tb5-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid #eef0f6;
}
.tb5-title { margin: 0; font-size: 17px; font-weight: 800; }
.tb5-hint { margin: 0; font-size: 12px; color: #8b91a7; }

.tb5-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.tb5-table thead th {
  text-align: left; padding: 12px 24px; background: #12172b; color: #fff; font-weight: 700;
  font-size: 12.5px; letter-spacing: .02em; white-space: nowrap;
}
.tb5-table thead th.tb5-num { text-align: right; }

.tb5-table tbody th, .tb5-table tbody td {
  padding: 13px 24px; border-bottom: 1px solid #eef0f6; text-align: left; font-weight: 400; white-space: nowrap;
}
.tb5-table tbody th { font-weight: 700; color: #1c2033; }
.tb5-table tbody tr:last-child th, .tb5-table tbody tr:last-child td { border-bottom: none; }
.tb5-table tbody tr:hover th, .tb5-table tbody tr:hover td { background: #f7f8ff; }
.tb5-num { text-align: right; font-variant-numeric: tabular-nums; }

.tb5-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.tb5-badge--shipped { background: rgba(16, 185, 129, .12); color: #0a8a5f; }
.tb5-badge--prep { background: rgba(59, 130, 246, .12); color: #2563eb; }
.tb5-badge--cancel { background: rgba(148, 157, 178, .16); color: #5b6377; }

/* --- 狭い画面: 各行をカード化 --- */
@media (max-width: 640px) {
  .tb5-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .tb5-table, .tb5-table tbody, .tb5-table tr { display: block; width: 100%; }
  .tb5-table tbody { padding: 8px 12px 14px; }
  .tb5-table tr {
    display: block; margin: 10px 0; padding: 14px 16px 6px; border: 1px solid #eef0f6; border-radius: 14px;
    box-shadow: 0 8px 20px rgba(24, 28, 55, .05);
  }
  .tb5-table tbody tr:hover th, .tb5-table tbody tr:hover td { background: transparent; }
  .tb5-table th, .tb5-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 8px 0; border-bottom: 1px dashed #f0f1f7; text-align: right; white-space: normal;
  }
  .tb5-table tr > *:last-child { border-bottom: none; }
  .tb5-table th[scope="row"] { font-size: 14.5px; }
  .tb5-table th::before,
  .tb5-table td::before {
    content: attr(data-label); font-weight: 600; color: #8b91a7; text-align: left; white-space: nowrap;
  }
}

【JavaScript】
// レスポンシブ・カード化テーブル: 切替はCSSメディアクエリのみのため追加のJSは不要

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

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