.calendar {
    width: 150px; /* 横幅を少し小さく */
    height: 150px; /* 高さを少し短く */
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow: hidden;
}

.calendar-header {
    color: white;
    padding: 8px;
    font-size: 18px;
    font-weight: bold;
}

.calendar-body {
    padding: 5px; /* 内側のパディングを少し減らす */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calendar-date {
    font-size: 40px; /* 日付のフォントサイズを少し小さく */
    font-weight: bold;
    color: #333;
    margin: 0;
}

.calendar-weekday {
    font-size: 14px; /* 曜日も少し小さく */
    color: #666;
}

/* ★ここだけ変更★ 曜日ごとに `calendar-header` の背景色を変える */

/* 月曜日 → 黄 */
.calendar-header.monday {
    background: #ffd700;
}

/* 火曜日 → 赤 */
.calendar-header.tuesday {
    background: #ff3b3b;
}

/* 水曜日 → 水色 */
.calendar-header.wednesday {
    background: #00bfff;
}

/* 木曜日 → 緑 */
.calendar-header.thursday {
    background: #32cd32;
}

/* 金曜日 → 黄 */
.calendar-header.friday {
    background: #ffd700;
}

/* 土曜日 → 青 */
.calendar-header.saturday {
    background: #1e90ff;
}

/* 日曜日 → オレンジ */
.calendar-header.sunday {
    background: #ffa500;
}