body { font-family: sans-serif; margin: 2em; background: #f9f9f9; }
header { background: #2c3e50; color: #fff; padding: 1em; border-radius: 8px; margin-bottom: 2em; }
.calendar-nav {
  display: flex;
  justify-content: space-between; /* 左右に分ける */
  align-items: center; /* 垂直方向を中央揃え */
  margin: 1em 0;
}
.navigation-button {
  background: #eaf6ff; /* 青系 */
  color: #2980b9;
  border: 1px solid #2980b9;
}

/* 詳細表示ボタン */
.detail-button {
  background: #fff4e6; /* オレンジ系 */
  color: #d35400;
  border: 1px solid #d35400;
}

/* 共通のボタンスタイル */
.calendar-nav button {
  padding: 0.5em 1em;
  font-size: 1em;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 0.5em;
}

.calendar-nav button:hover {
  opacity: 0.8; /* ホバー時の視覚効果 */
}
.calendar-nav #currentMonth {
  flex-grow: 1; /* 左端に固定 */
  text-align: left; /* 左寄せ */
  font-size: 1.2em; /* フォントサイズを大きくする */
  font-weight: bold; /* 太字にする（オプション） */
}
/* .calendar-nav span { font-weight: bold; font-size: 1.2em; } */
table.calendar { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #ccc; }
table.calendar th, table.calendar td { width: 14.2%; text-align: center; padding: 0.7em 0.2em; border: 1px solid #e0e0e0; }
table.calendar th { background: #eaf6ff; }
table.calendar td.reserved { background: #e1f0ff; color: #1565c0; font-weight: bold; }
table.calendar td.holiday {
    background: #e6ffe6;   /* 明るい緑 */
    color: #228B22;        /* 濃い緑 */
    font-weight: bold;
}
table.calendar td.holiday-reserved {
    background: linear-gradient(135deg, #e6ffe6 60%, #e1f0ff 100%);
    color: #1565c0;
    font-weight: bold;
    border: 2px solid #228B22;
}
.reserve-detail { margin-top: 1em; background: #f4f8fb; padding: 1em; border-radius: 6px; min-height: 2em; }
.reserve-icon {
  font-size: 1.2em;
  display: inline-block;
  margin-top: 0.2em;
}
.reserve-detail-mini {
  font-size: 0.7em;
  margin-top: 0.2em;
  word-break: break-all;
}
.selected {
  background-color: #ffe082 !important; /* 例: 明るい黄色 */
  border: 2px solid #ff9800 !important;
}
table.calendar td.selected {
  background-color: #ffe082 !important;
  border: 2px solid #ff9800 !important;
}
table.calendar td.selected,
table.calendar td.reserved.selected,
table.calendar td.holiday.selected,
table.calendar td.holiday-reserved.selected {
  background-color: #ffe082 !important;
  border: 2px solid #ff9800 !important;
  color: #222 !important;
}

/* 予約内容のスタイル */
.reserved, .holiday-reserved {
  font-size: 0.8em; /* 文字サイズを休日名と統一 */
  color: #333; /* 文字色を調整 */
}

.reserved span, .holiday-reserved span {
  font-size: 0.8em; /* 休日名や予約内容のフォントサイズを調整 */
  display: block; /* 各要素を改行して表示 */
}

/* 休日の日付と名前のスタイル */
.holiday, .holiday-reserved {
  color: #d9534f; /* 休日の日付と名前の色（例: 赤色） */
  font-weight: bold; /* 強調表示 */
  font-size: 1em; /* 日付と名前の文字サイズを統一 */
}

.holiday span, .holiday-reserved span {
  color: inherit; /* 親要素の色を継承 */
  font-size: 0.8em; /* 休日名のフォントサイズを調整 */
  display: inline; /* 要素をインライン表示に変更 */
  margin: 0; /* 要素間の余白を完全に削除 */
  padding: 0; /* 要素間のパディングを完全に削除 */
  line-height: 1; /* 行間を詰める */
}

/* 予約情報やアイコンのスタイル */
.reserved span, .holiday-reserved span.reservation, .holiday-reserved span.icon {
  color: inherit; /* 親要素の色を継承 */
  font-size: 0.8em; /* 予約情報やアイコンのフォントサイズを休日名と統一 */
  display: inline; /* 要素をインライン表示に変更 */
  margin: 0; /* 要素間の余白を完全に削除 */
  padding: 0; /* 要素間のパディングを完全に削除 */
  line-height: 1; /* 行間を詰める */
}

/* 日付のスタイル */
.holiday, .holiday-reserved, .reserved {
  text-align: center; /* 中央揃え */
  line-height: 1; /* 行間を詰める */
  margin: 0; /* 外側の余白を削除 */
  padding: 0; /* 内側の余白を削除 */
}

/* 全てのセルの日付のスタイルを統一 */
.calendar td {
  font-size: 1em; /* 日付の文字サイズを統一 */
  text-align: center; /* 中央揃え */
  line-height: 1.2; /* 行間を調整 */
  padding: 0; /* 内側の余白を削除 */
  margin: 0; /* 外側の余白を削除 */
}

/* 休日と平日のスタイルを統一 */
.holiday, .holiday-reserved, .reserved {
  font-size: inherit; /* 親要素のフォントサイズを継承 */
  text-align: center; /* 中央揃え */
  line-height: inherit; /* 親要素の行間を継承 */
  margin: 0; /* 外側の余白を削除 */
  padding: 0; /* 内側の余白を削除 */
}

/* 休日名や予約情報のスタイル */
.holiday span, .holiday-reserved span, .reserved span {
  font-size: 0.8em; /* 休日名や予約情報のフォントサイズを統一 */
  display: inline-block; /* インラインブロックで表示 */
  margin: 0; /* 要素間の余白を削除 */
  padding: 0; /* 要素間のパディングを削除 */
  line-height: 1; /* 行間を詰める */
  vertical-align: middle; /* 要素を中央揃え */
}

/* 予約情報やアイコンのスタイル */
.holiday-reserved span.reservation, .holiday-reserved span.icon {
  font-size: 0.8em; /* 予約情報やアイコンのフォントサイズを休日名と統一 */
  display: inline-block; /* インラインブロックで表示 */
  margin: 0; /* 要素間の余白を削除 */
  padding: 0; /* 要素間のパディングを削除 */
  line-height: 1; /* 行間を詰める */
  vertical-align: middle; /* 要素を中央揃え */
}

@media (max-width: 600px) {
    table.calendar th, table.calendar td { font-size: 0.9em; padding: 0.4em 0.1em; }
    .calendar-nav {
    flex-direction: row !important;
    gap: 0.3em;
    justify-content: center;
    align-items: center;
    }
    .calendar-nav button {
    font-size: 0.9em;
    padding: 0.3em 0.5em;
    min-width: 3.5em;
    margin-left: 0.2em; /* ボタン間隔を狭める */
    }
    .calendar-reserve-item {
    font-size: 0.7em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
    margin: 0 auto;
    }
  .calendar-nav #currentMonth {
    font-size: 1em; /* フォントサイズを小さくする */
  }
}
@media (max-width: 480px) {
  .calendar-nav button {
    font-size: 0.8em;
    padding: 0.2em 0.4em;
  }
  .calendar-nav #currentMonth {
    font-size: 0.9em;
  }
}