.container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr); /* 7列に設定 */
	gap: 10px;
	width: 100%; /* 親コンテナの幅に合わせる */
}

.day {
	border: 1px solid #ccc;
	padding: 10px;
	min-height: 100px; /* 日付のマスの高さ */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* 左上に寄せる */
}

.weekday {
	border: 1px solid #ccc;
	padding: 10px;
	height: 50px; /* 曜日のマスの高さを半分に設定 */
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center; /* 垂直方向中央揃え */
	align-items: center; /* 水平方向中央揃え */
}

textarea {
	width: 100%; /* テキストエリアを親要素の幅いっぱいに広げる */
}

.schedule {
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	margin-top: 5px; /* 日付の下にスペースを追加 */
	padding: 5px;
	width: 100%; /* スケジュールをマスの幅いっぱいに広げる */
}

.schedule form {
	display: none; /* フォームはデフォルトで非表示 */
}

.day:hover .schedule form {
	display: block; /* ホバー時にフォームを表示 */
}

.day .font-bold {
	margin-bottom: 5px;
}

.weekday:nth-child(1),
.day:nth-child(1) .font-bold, /* 日曜の色を赤に */
.weekday:nth-child(8),
.day:nth-child(8) .font-bold,
.weekday:nth-child(15),
.day:nth-child(15) .font-bold,
.weekday:nth-child(22),
.day:nth-child(22) .font-bold,
.weekday:nth-child(29),
.day:nth-child(29) .font-bold,
.weekday:nth-child(36),
.day:nth-child(36) .font-bold {
	color: red;
}

.weekday:nth-child(7),
.day:nth-child(7) .font-bold, /* 土曜の色を青に */
.weekday:nth-child(14),
.day:nth-child(14) .font-bold,
.weekday:nth-child(21),
.day:nth-child(21) .font-bold,
.weekday:nth-child(28),
.day:nth-child(28) .font-bold,
.weekday:nth-child(35),
.day:nth-child(35) .font-bold {
	color: blue;
}

/* 今日の日付の枠の色を赤にする */
.bg-red-100 {
	background-color: #ffe6e6;
}

.border-red-500 {
	border-color: #f56565;
}