/* テーブル全体のスタイル */
table {
  width: 100%; /* テーブルの幅をページ全体に広げる */
  border-collapse: collapse; /* セルの境界線をまとめる */
  margin: 20px 0; /* 上下の余白 */
  font-family: Arial, sans-serif; /* フォントファミリー */
  color: #333; /* テキストの色 */
  background: #fff; /* 背景色 */
}

/* テーブルのヘッダー */
th {
  background-color: #f2f2f2; /* ヘッダーの背景色 */
  color: #333; /* ヘッダーのテキスト色 */
  font-weight: bold; /* 文字を太字に */
  text-align: left; /* 左揃え */
  padding: 12px 15px; /* 内側の余白 */
}

/* テーブルのセル */
td {
  padding: 10px 15px; /* 内側の余白 */
  border-bottom: 1px solid #ddd; /* 下境界線 */
}

/* セルのホバー効果 */
td:hover {
  background-color: #f5f5f5; /* ホバー時の背景色 */
}

/* ゼブラストライプのスタイル */
tr:nth-child(odd) {
  background-color: #fafafa; /* 奇数行の背景色 */
}

/* 最後のセルの下線を消す */
td:last-child {
  border-bottom: none;
}

/* レスポンシブデザイン：画面が小さくなったときのテーブルスタイル */
@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto; /* 横スクロールを有効に */
  }
  th, td {
    white-space: nowrap; /* セルのテキストを改行しない */
  }
}