/* ==========================================================
 📘 table.css
 対応HTML：table.html（テーブルデザインページ）
 デザイン内容：表デザイン5種
 ----------------------------------------------------------
 ① シンプル
 ② ゼブラ
 ③ ヘッダー強調
 ④ グラデーションヘッダー
 ⑤ 枠付き表
========================================================== */

/* ===== 共通基本設定 ===== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  text-align: left;
  font-size: 0.95em;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px 12px;
}

/* ===== ① シンプル ===== */
.sample-table th {
  background: #FFF3E0;
  color: #E65100;
}
.sample-table tr:nth-child(even) {
  background: #f9f9f9;
}

/* ===== ② ゼブラ（同上：sample-table再利用） ===== */
/* 同じクラスを流用するため変更不要 */

/* ===== ③ ヘッダー強調 ===== */
.table-strong th {
  background: #E65100;
  color: #fff;
  border: 1px solid #E65100;
}
.table-strong td {
  border: 1px solid #ddd;
}

/* ===== ④ グラデーションヘッダー ===== */
.table-grad th {
  background: linear-gradient(90deg, #F57C00, #E65100);
  color: #fff;
  border: 1px solid #E65100;
}
.table-grad td {
  border: 1px solid #ddd;
}

/* ===== ⑤ 枠付き（外枠＋罫線） ===== */
.table-border {
  border: 2px solid #E65100;
  border-collapse: collapse;
}
.table-border th {
  background: #FFE0B2;
  color: #E65100;
  border: 1px solid #E65100;
}
.table-border td {
  border: 1px solid #E65100;
}