@charset "UTF-8";
/* --- 1. カレンダーテーブルの基本設定 --- */
.matrix-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
/* ヘッダー(曜日)の調整 */
.matrix-table thead tr th {
	padding: 0.4rem 0.2rem;
	border: 1px solid var(--border-color);
	text-align: center;
}
/* カレンダーセル (td) の基本調整 */
.matrix-table tbody tr td {
	height: 5rem;
	padding: 0.3rem 0; /* vertical-align: top; を削除 (2-3-C) */
	border: 1px solid var(--border-color);
	font-size: 1rem;
	line-height: 1.3;
}
/* --- 2. セル内のレイアウト設定 (Flexbox化) --- */
/* 日付とイベントがある日のセル (position: relativeの基準) */
.matrix-table tbody tr td.day {
	text-align: left;
	padding: 0.3rem;
	position: relative;
	vertical-align: top;
	background-color: var(--white-color);
	color: var(--text-color);
}
/* 日付とアイコンをまとめるコンテナ */
.matrix-table tbody tr td.day .day-header {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0.1rem;
}
/* 日付の配置 */
.matrix-table tbody tr td.day .date-number {
	flex-shrink: 0;
	margin-right: 0.3rem;
	line-height: 1;
	font-size: 1.1rem;
	font-weight: bold;
}
/* イベント名の配置 (改行して次の行へ) */
.matrix-table tbody tr td.day .event-label.event-name-row,
.matrix-table tbody tr td.day .event-name {
	display: block;
	width: 100%;
	border-radius: 0.3rem;
	font-size: 0.85rem;
	line-height: 1.4;
	font-weight: normal;
	color: var(--link-color);
	text-align: left;
	padding: 0.1rem 0.2rem;
	overflow: hidden;
}
/* アイコンのスタイリングと絶対配置 */
.matrix-table tbody tr td.day .event-icon {
	width: 1rem;
	height: 1rem;
	margin: 0;
	vertical-align: middle;
}
/* アイコンコンテナをセルの右上に絶対配置 */
.matrix-table tbody tr td.day .icon-row {
	position: absolute;
	top: 0.1rem;
	right: 0.3rem;
}
/* --- 3. テーマ・状態による設定 (色分け/休館日) --- */
.matrix-table tbody tr td.closed-day {
	background-color: var(--tcal-gray);
	color: #9d9087;
}
/* イベントのある日のセル背景色 (テーマカラー) */
.matrix-table tbody tr td.event-y {
	background-color: var(--tcal-yellow);
}
.matrix-table tbody tr td.event-g {
	background-color: var(--tcal-green);
}
.matrix-table tbody tr td.event-p {
	background-color: var(--tcal-pink);
}
.matrix-table tbody tr td.event-b {
	background-color: var(--tcal-blue);
}
/* --- 4. イベント詳細テーブルの調整 --- */
.details-table-section h3 {
	margin-bottom: 0.5rem;
}
.details-table {
	font-size: 0.95rem;
	line-height: 1.4;
}
/* 詳細テーブルのセル幅調整 */
.details-table th,
.details-table td {
	vertical-align: top;
}
.details-table .date-col {
	width: 10%;
}
.details-table .time-col {
	width: 12%;
	/*	white-space: nowrap; */
}
.details-table .event-name-col {
	width: 18%;
	font-weight: bold;
}
.details-table .price-col {
	width: 13%;
	line-height: 1.2;
}
.details-table .reserve-col {
	width: 13%;
	line-height: 1.2;
	text-align: center;
}
.details-table .detail-col {
	width: 34%;
	text-align: left;
}
/* 予約欄の「要予約」など注意を促すテキストに太字適用 */
.details-table .reserve-col .text-att {
	font-weight: bold;
}
/* --- 5. アイコン凡例の調整 (カレンダー直下配置) --- */
/* 凡例行の見た目を設定 (枠線・背景の非表示) */
.matrix-table tbody tr.icon-legend-row td {
	/* 上の線だけ残し、他を非表示 */
	border-top: 1px solid var(--border-color);
	border-left: none;
	border-right: none;
	border-bottom: none;
	background: transparent; /* 縦幅を抑えるため上下のpaddingを削る */
	padding: 0.3rem 0.5rem;
	height: auto;
	text-align: left;
}
/* アイコンと説明を横並びにするレイアウト */
.icon-legend-simple {
	display: flex; /* 凡例全体をフレックスで制御 */
	flex-wrap: wrap; /* 項目間の横の間隔を広げ視認性を高める */
	gap: 0 1.5rem;
	font-size: 0.8rem; /* さらに小さくして縦幅を抑える */
	line-height: 1;
}
/* 説明項目の設定 (各アイテム) */
.legend-item {
	flex-shrink: 0;
	display: inline-flex; /* アイコンとラベルを横並びにする */
	align-items: center;
}
.legend-icon {
	width: 0.9rem; /* アイコンも少し小さく */
	height: 0.9rem;
	margin-right: 0.2rem;
	vertical-align: middle;
}
.legend-label {
	white-space: nowrap; /* 項目内で改行しない */
	font-weight: normal; /* 太字から通常字に */
}