:root {
  --colorRed: #e26b6b;
  --colorBlue: #4cb0de;
  --colorGreen: #61cb82;
  --colorMonochrome: #737375;
}
/* CSS Reset */
.calendar * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
/* 全体のスタイル */
.calendar {
  width: 100%;
  max-width: 800px; /* 基本サイズ */
  margin: 20px auto;
  border: 1px solid #ddd;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* サイズによるカレンダー調整 */
.calendar.small {
  max-width: 400px; /* 小さいサイズ */
}
.calendar.middle {
  max-width: 800px; /* 中くらいのサイズ */
}
.calendar.large {
  max-width: 1200px; /* 大きいサイズ */
}
/* カレンダーヘッダーのスタイル */
.calendar .header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  color: #fff;
  border-bottom: rgba(255, 255, 255, 0.5) solid 1px;
  box-sizing: border-box;
}
.calendar.small .header {
  padding: 10px;
}
.calendar.red .header {
  background-color: var(--colorRed); /* Red */
}
.calendar.blue .header {
  background-color: var(--colorBlue); /* Blue */
}
.calendar.green .header {
  background-color: var(--colorGreen); /* Green */
}
.calendar.monochrome .header {
  background-color: var(--colorMonochrome); /* Grey */
}
.calendar .header button {
  background-color: #fff;
  color: inherit;
  border: none;
  padding: 8px 15px 6px 15px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.calendar.small .header button {
  font-size: 12px;
  padding: 7px 10px 5px 10px;
}
.calendar.large .header button {
  font-size: 16px;
}
.calendar.red .header button {
  color: var(--colorRed); /* Red */
}
.calendar.blue .header button {
  color: var(--colorBlue); /* Blue */
}
.calendar.green .header button {
  color: var(--colorGreen); /* Green */
}
.calendar.monochrome .header button {
  color: var(--colorMonochrome); /* Grey */
}
.calendar .header button:hover {
  background-color: #f0f0f0;
}
.calendar.red .header button:hover {
  background-color: #ffcccc;
}
.calendar.blue .header button:hover {
  background-color: #e3f2fd;
}
.calendar.green .header button:hover {
  background-color: #c8e6c9;
}
.calendar.monochrome .header button:hover {
  background-color: #e0e0e0;
}
.calendar .calendar-title {
  display: block;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  flex-grow: 1;
  line-height: 1.2;
}
.calendar.small .calendar-title {
  font-size: 16px;
}
.calendar.large .calendar-title span {
  font-size: 26px;
}
/* カレンダーテーブルのスタイル */
.calendar .calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
  background: #ffffff;
  ;
  border-collapse: collapse;
  border-spacing: 0;
  overflow: visible;
  box-sizing: border-box;
}
.calendar .calendar-table thead th {
  padding: 8px 3px 6px 3px !important;
}
.calendar .calendar-table thead th:not(:last-of-type) {
  border-right: rgba(255, 255, 255, 0.5) solid 1px;
}
.calendar.red .calendar-table {
  border: var(--colorRed) solid 1px;
}
.calendar.blue .calendar-table {
  border: var(--colorBlue) solid 1px;
}
.calendar.green .calendar-table {
  border: var(--colorGreen) solid 1px;
}
.calendar.monochrome .calendar-table {
  border: var(--colorMonochrome) solid 1px;
}
.calendar .calendar-table th, .calendar .calendar-table td {
  border: 1px solid #ddd;
  padding: 10px 3px 8px 3px !important;
  text-align: center;
  transition: background-color 0.3s;
}
.calendar .calendar-table th {
  background-color: #f0f0f0;
  color: #333;
}
.calendar .calendar-table.red {}
.calendar.red .calendar-table th {
  background-color: var(--colorRed);
  color: #fff;
}
.calendar.blue .calendar-table th {
  background-color: var(--colorBlue);
  color: #fff;
}
.calendar.green .calendar-table th {
  background-color: var(--colorGreen);
  color: #fff;
}
.calendar.monochrome .calendar-table th {
  background-color: var(--colorMonochrome);
  color: #fff;
}
.calendar .calendar-table td {
  background-color: #fff;
  color: #333;
  position: relative;
}
.calendar .calendar-table td.empty {
  background-color: #f7f7f7;
}
.calendar .calendar-table td:hover {
  background-color: #f0f0f0;
}
/* 日曜日のスタイル */
.calendar .calendar-table td.sunday {
  color: #ff0000; /* 赤文字 */
}
/* 休日のスタイル */
.calendar .calendar-table td.holiday {
  background-color: #ffebeb; /* 薄い赤色 */
  color: #ff0000; /* 赤文字 */
}
.calendar .calendar-table td .cal-date {
  line-height: 1.2;
}
.calendar .calendar-table td .cal-date + * {
  margin: 0 0 3px 0;
}
/* イベントラベルのスタイル */
.calendar .event-label {
  border-radius: 4px;
  line-height: 1.2;
  padding: 3px;
  display: block;
  margin-top: 5px;
  font-size: 12px; /* デフォルトのフォントサイズ */
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer; /* カーソルをポインターに変更 */
}
.calendar.red .event-label {
  background-color: #ffebee;
  border: 1px solid var(--colorRed);
  color: var(--colorRed);
}
.calendar.blue .event-label {
  background-color: #e3f2fd;
  border: 1px solid var(--colorBlue);
  color: var(--colorBlue);
}
.calendar.green .event-label {
  background-color: #e8f5e9;
  border: 1px solid var(--colorGreen);
  color: var(--colorGreen);
}
.calendar.monochrome .event-label {
  background-color: #f5f5f5;
  border: 1px solid var(--colorMonochrome);
  color: var(--colorMonochrome);
}
/* カレンダーサイズによるイベントラベルのフォントサイズ調整 */
.calendar.small .event-label {
  font-size: 10px; /* 小さいサイズのカレンダー用フォントサイズ */
}
.calendar.middle .event-label {
  font-size: 12px; /* 中くらいのサイズのカレンダー用フォントサイズ */
}
.calendar.large .event-label {
  font-size: 14px; /* 大きいサイズのカレンダー用フォントサイズ */
}
.calendar .event-label:hover {
  background-color: #e0e0e0;
  color: #000;
}
/* カレンダーサイズのスタイル */
.calendar.small .calendar-table th, .calendar.small .calendar-table td {
  font-size: 12px;
}
.calendar.middle .calendar-table th, .calendar.middle .calendar-table td {
  font-size: 14px;
}
.calendar.large .calendar-table th, .calendar.large .calendar-table td {
  font-size: 16px;
}
/* カレンダーの色設定 */
.calendar.red .calendar-table th, .calendar.red .calendar-table td {
  border-color: var(--colorRed);
}
.calendar.blue .calendar-table th, .calendar.blue .calendar-table td {
  border-color: var(--colorBlue);
}
.calendar.green .calendar-table th, .calendar.green .calendar-table td {
  border-color: var(--colorGreen);
}
.calendar.monochrome .calendar-table th, .calendar.monochrome .calendar-table td {
  border-color: var(--colorMonochrome);
}
/* モバイル対応 */
@media (max-width: 600px) {
  .calendar .header {
    padding: 12px;
  }
  .calendar .calendar-title {
    font-size: 20px;
  }
  .calendar.large .calendar-title {
    font-size: 22px;
  }
  .calendar .calendar-table th, .calendar .calendar-table td {
    padding: 5px;
    font-size: 12px;
  }
  .calendar.large .event-label {
    font-size: 13px;
  }
}
/* 祝日祝日のテキストスタイル */
.calendar .calendar-table td .holiday-text {
  font-size: 13px; /* デフォルトサイズを少し小さく */
  color: #d32f2f; /* 祝日のテキストカラー（例: 赤） */
  font-weight: bold; /* 文字を太字に */
  line-height: 1.2;
}
.calendar .calendar-table td .holiday-text:empty {
  margin: 0;
}
/* カレンダーサイズによるフォントサイズの調整 */
.calendar.small .calendar-table td .holiday-text {
  font-size: 11px; /* 小さいカレンダーの場合のフォントサイズ */
}
.calendar.middle .calendar-table td .holiday-text {
  font-size: 13px; /* 中くらいのカレンダーの場合のフォントサイズ */
}
.calendar.large .calendar-table td .holiday-text {
  font-size: 14px; /* 大きいカレンダーの場合のフォントサイズ */
}
/* ローディングインジケーターのスタイル */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: #333;
}