/* カレンダー全体のスタイル */
.calendar-table {
  width: 100%;
  max-width: 400px; /* カレンダーの最大幅 */
  margin: 20px auto;
  border-collapse: collapse;
  background-color: white;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  color: #333;
}

.calendar-cards {
  display: grid;
}

/* ヘッダー（曜日）のスタイル */
.calendar-table th {
  background-color: #f8f8f8;
  padding: 10px 0;
  font-size: 0.85rem;
  border-bottom: 2px solid #eee;
}

/* 日付セルのスタイル */
.calendar-table td {
  padding: 12px 0;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.95rem;
}

/* 定休日（class="off"）のスタイル */
.calendar-table td.off {
  background-color: #fff0f0; /* 薄い赤系統の背景 */
  color: #d93025; /* 濃い赤の文字 */
  font-weight: bold;
  position: relative;
}

/* 土日の色調整 */
.calendar-table th:first-child {
  color: #d93025;
} /* 日曜 */
.calendar-table th:last-child {
  color: #1a73e8;
} /* 土曜 */

/*カレンダタイトル*/
.calendar-title {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

/* レスポンシブ調整 */
@media (max-width: 480px) {
  .calendar-table td {
    padding: 8px 0;
    font-size: 0.85rem;
  }
}