/* 1. テーブルの幅を固定し、列幅を均等に設定 */
.calendar-table {
  width: 100%;             /* テーブル全体の幅を親要素に対して100%にする */
  border-collapse: collapse; /* セルの境界線を一つにまとめる (見栄え改善のため) */
  table-layout: fixed;     /* ⭐︎ これが重要: 列の内容の長さに影響されず、幅を均等にする */
}

/* 2. <th>と<td>要素全体のスタイルを調整 */
.calendar-table th,
.calendar-table td {
  text-align: center;      /* 文字を中央揃えにする */
  padding: 8px;            /* セルの内側に適度な余白を追加 */
  border: 1px solid #ccc;  /* セルの境界線を追加 (見栄え改善のため) */
}

/* 3. ユーザー提供の個別のスタイルを適用 */
.calendar-table .sun {
  font-weight: 700;
  color: #e23a3a; /* 日曜日の曜日ヘッダー */
}
.calendar-table .sat {
  font-weight: 700;
  color: #3a45e2; /* 土曜日の曜日ヘッダー */
}

/* 日付やステータスの赤い文字 */
.calendar-table .sun-text {
  font-weight: 700;
  color: #e23a3a;
}
/* 日付やステータスの青い文字 */
.calendar-table .sat-text {
  font-weight: 700;
  color: #3a45e2;
}