@font-face {
  font-family: 'SF Pro Rounded';
  font-weight: 900;
  src: url('../fonts/SF-Pro-Rounded-Heavy-26.otf');
}

body {
  font-family: sans-serif;
  padding: 20px;
}

header .logo {
  font-family: 'SF Pro Rounded';
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 30px;
  font-weight: 900;
  gap: 10px;
}

/* テーブル全体のスタイル */
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; /* セルのテキストを改行しない */
  }
}