/**
 * 静的診療カレンダー — 1セル2行（Grid）: .c-cal-two-row + .c-cal-daynum / .c-cal-daynote
 * 土曜の数字色は列位置（td:nth-child(7)）。土曜セルは基本 9:00-16:00 のため背景を凡例の短時間帯色で塗る（休診は holiday-all が優先）。
 * 当日は .c-cal-daynum に .today（青枠・青字）。
 * 注記（.c-cal-daynote）は左揃え・赤・太字。SP のみ字サイズを一段抑える（メディアクエリ）。
 * セルは注記の有無で min-height を共通（下段 .c-cal-daynote に最低高さ）し、週ごとの行のばらつきを抑える。
 * 当月グリッドに含まれる前月・翌月のマスは、休診ピンク／土曜帯のみ淡色（--xo-holiday-all-other-month 等）。
 */
.sec12 .c-clinic-calendar {
	--c-cal-line: #c8c8c8;
	--c-cal-caption: #333;
	--xo-holiday-all: #fddde6;
	--xo-holiday-regular: #bad9f4;
	/* 当月グリッド内の前月・翌月セル用（休診ピンク／土曜帯を薄く） */
	--xo-holiday-all-other-month: #fae9ef;
	--xo-holiday-regular-other-month: #dcebf9;
	--c-cal-note-band: #e8e8e8;
	--c-cal-cell-default: #fff;
	--c-cal-active: #1e6bd9;
	font-family: var(--font-main);
	overflow: auto;
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.sec12 .c-clinic-calendar td,
.sec12 .c-clinic-calendar th {
	padding: 0 !important;
}

.sec12 .c-clinic-calendar table {
	background-color: transparent;
	border-collapse: separate;
	border-spacing: 0;
	color: #333;
	margin: 0;
	padding: 0;
	table-layout: fixed;
	width: 100%;
}

.sec12 .c-clinic-calendar table.xo-month {
	border: 1px solid var(--c-cal-line);
	border-right-width: 0;
	margin: 0 0 8px;
	padding: 0;
}

.sec12 .c-clinic-calendar table.xo-month td,
.sec12 .c-clinic-calendar table.xo-month th {
	background-color: #fff;
	border: 1px solid var(--c-cal-line);
	padding: 0;
}

.sec12 .c-clinic-calendar table.xo-month caption {
	caption-side: top;
}

.sec12 .c-clinic-calendar table.xo-month .month-header {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	margin: 4px 0;
}

.sec12 .c-clinic-calendar table.xo-month .month-header > .calendar-caption {
	flex-grow: 1;
	text-align: center;
	color: var(--c-cal-caption);
	font-size: calc(15px + 2pt);
}

.sec12 .c-clinic-calendar table.xo-month button {
	background-color: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: #45851a;
	cursor: pointer;
	margin: 0;
	overflow: hidden;
	padding: 6px;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

.sec12 .c-clinic-calendar table.xo-month button .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
}

.sec12 .c-clinic-calendar table.xo-month button[disabled] {
	cursor: default;
	opacity: 0.35;
}

.sec12 .c-clinic-calendar table.xo-month > thead th {
	border-width: 0 1px 0 0;
	color: #333;
	font-size: calc(15px + 2pt);
	font-weight: 700;
	padding: 1px 0;
	text-align: center;
}

.sec12 .c-clinic-calendar table.xo-month > thead th.sunday {
	color: #d00;
}

.sec12 .c-clinic-calendar table.xo-month > thead th.saturday {
	color: #00d;
}

.sec12 .c-clinic-calendar table.xo-month .month-week {
	border: 0;
	overflow: visible;
	padding: 0;
	width: 100%;
}

.sec12 .c-clinic-calendar table.xo-month > tbody > tr > td.month-week {
	padding: 0 !important;
	vertical-align: top !important;
}

.sec12 .c-clinic-calendar table.xo-month .month-week table {
	border: 0;
	margin: 0;
	padding: 0;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname {
	width: 100%;
	border-width: 1px 0 0 1px;
	border-collapse: collapse;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname td {
	border-width: 1px 1px 0 0;
	padding: 0;
	vertical-align: top;
}

/* 凡例3色は td に敷く（セル高さいっぱいに下地がつながる） */
.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td {
	background-color: var(--c-cal-cell-default);
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:has(> .c-cal-two-row.holiday-all) {
	background-color: var(--xo-holiday-all) !important;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:nth-child(7):has(> .c-cal-two-row:not(.holiday-all)) {
	background-color: var(--xo-holiday-regular);
}

/* 注記あり — td を 50% : 50%（凡例色 / グレー）。div より下に白 td が見えないようにする */
.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:not(:nth-child(7)):has(> .c-cal-two-row:not(.holiday-all)):has(.c-cal-daynote:not(:empty)) {
	background: linear-gradient(
		to bottom,
		var(--c-cal-cell-default) 0%,
		var(--c-cal-cell-default) 50%,
		var(--c-cal-note-band) 50%,
		var(--c-cal-note-band) 100%
	) !important;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:nth-child(7):has(> .c-cal-two-row:not(.holiday-all)):has(.c-cal-daynote:not(:empty)) {
	background: linear-gradient(
		to bottom,
		var(--xo-holiday-regular) 0%,
		var(--xo-holiday-regular) 50%,
		var(--c-cal-note-band) 50%,
		var(--c-cal-note-band) 100%
	) !important;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:has(> .c-cal-two-row.holiday-all):has(.c-cal-daynote:not(:empty)) {
	background: linear-gradient(
		to bottom,
		var(--xo-holiday-all) 0%,
		var(--xo-holiday-all) 50%,
		var(--c-cal-note-band) 50%,
		var(--c-cal-note-band) 100%
	) !important;
}

/* 他月セル — 休診・土曜帯の下地のみ薄く（当月より一段トーンを抑える） */
.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:has(> .c-cal-two-row.other-month.holiday-all) {
	background-color: var(--xo-holiday-all-other-month) !important;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:nth-child(7):has(> .c-cal-two-row.other-month:not(.holiday-all)) {
	background-color: var(--xo-holiday-regular-other-month);
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:nth-child(7):has(> .c-cal-two-row.other-month:not(.holiday-all)):has(.c-cal-daynote:not(:empty)) {
	background: linear-gradient(
		to bottom,
		var(--xo-holiday-regular-other-month) 0%,
		var(--xo-holiday-regular-other-month) 50%,
		var(--c-cal-note-band) 50%,
		var(--c-cal-note-band) 100%
	) !important;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:has(> .c-cal-two-row.other-month.holiday-all):has(.c-cal-daynote:not(:empty)) {
	background: linear-gradient(
		to bottom,
		var(--xo-holiday-all-other-month) 0%,
		var(--xo-holiday-all-other-month) 50%,
		var(--c-cal-note-band) 50%,
		var(--c-cal-note-band) 100%
	) !important;
}

/* 2行セル — 注記の有無で行高が変わらないよう、下段を常に確保（min-height） */
.sec12 .c-clinic-calendar table.xo-month .month-dayname td > div.c-cal-two-row {
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto minmax(1.7em, auto);
	align-items: stretch;
	align-content: start;
	gap: 2px;
	min-height: 3.45em;
	padding: 6px 4px;
	text-align: right;
	color: #333;
	background-color: transparent;
	border-radius: 0;
}

/* 注記あり — td グラデに合わせて padding のみ調整（高さルールは共通のまま） */
.sec12 .c-clinic-calendar table.xo-month .month-dayname td > div.c-cal-two-row:has(.c-cal-daynote:not(:empty)) {
	gap: 0;
	min-height: 3.45em;
	height: 100%;
	padding: 0;
	overflow: hidden;
	border-radius: 0;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:has(.c-cal-two-row .c-cal-daynote:not(:empty)) {
	height: 100%;
}

.sec12 .c-clinic-calendar .c-cal-daynum {
	display: block;
	font-size: calc(15px + 2pt) !important;
	line-height: 1.35 !important;
	font-weight: 400;
	text-align: right;
	color: inherit;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname td > div.c-cal-two-row:has(.c-cal-daynote:not(:empty)) .c-cal-daynum {
	padding: 6px 4px 2px 4px;
}

.sec12 .c-clinic-calendar .c-cal-daynote {
	display: block;
	font-size: calc(11px + 2pt);
	line-height: 1.35;
	text-align: left;
	font-weight: 700;
	word-break: break-word;
	color: #d00;
	min-height: 1.7em;
	box-sizing: border-box;
	border-radius: 0;
}

/* 下半分のグレーは親の linear-gradient で 5:5 指定（ここは透明のまま） */
.sec12 .c-clinic-calendar .c-cal-daynote:not(:empty) {
	background: transparent;
	margin: 0;
	padding: 4px 4px 6px 4px;
	align-self: stretch;
	min-height: 1.7em;
}

/* 日曜列・土曜列の日付の色（HTML のクラスに依存しない） */
.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:nth-child(1) .c-cal-daynum {
	color: #d00;
}

.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:nth-child(7) .c-cal-daynum {
	color: #00d;
}

/* 当日 — .today は JS が .c-cal-daynum に付与 */
.sec12 .c-clinic-calendar .c-cal-daynum.today {
	display: inline-block;
	margin: 0 0 0 auto;
	padding: 2px 8px;
	min-width: 1.5em;
	text-align: center !important;
	font-weight: 700;
	color: var(--c-cal-active) !important;
	-webkit-text-fill-color: var(--c-cal-active);
	border: 2px solid var(--c-cal-active);
	border-radius: 4px;
	background-color: transparent !important;
	box-sizing: border-box;
}

.sec12 .c-clinic-calendar .xo-month-wrap.c-cal-month--hidden {
	display: none !important;
}

.sec12 .c-clinic-calendar .xo-months.c-cal-months--single {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.sec12 .c-clinic-calendar .xo-months.c-cal-months--single .xo-month-wrap .month-prev,
.sec12 .c-clinic-calendar .xo-months.c-cal-months--single .xo-month-wrap .month-next {
	visibility: visible !important;
}

.sec12 .schedule .c-clinic-calendar .holiday-titles {
	display: flex;
	flex-wrap: wrap;
	row-gap: 8px;
}

.sec12 .c-clinic-calendar p.holiday-title {
	font-size: calc(14px + 2pt);
	margin: 0;
	padding: 2px 0;
	vertical-align: middle;
}

.sec12 .c-clinic-calendar p.holiday-title .c-cal-legend-swatch {
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	margin: 0 6px 0 0;
	padding: 0;
	border: 1px solid var(--c-cal-line);
	box-sizing: border-box;
}

.sec12 .c-clinic-calendar p.holiday-title .c-cal-legend-swatch--closed {
	background-color: #fddde6;
}

.sec12 .c-clinic-calendar p.holiday-title .c-cal-legend-swatch--slot-full {
	background-color: #ffffff;
}

.sec12 .c-clinic-calendar p.holiday-title .c-cal-legend-swatch--slot-short {
	background-color: #bad9f4;
}

/* SP — フォントを一段落とす（750px は responsive.css と揃える） */
@media screen and (max-width: 750px) {
	.sec12 .c-clinic-calendar table.xo-month .month-header > .calendar-caption {
		font-size: calc((15px + 2pt) * 0.88);
	}

	.sec12 .c-clinic-calendar table.xo-month > thead th {
		font-size: calc((15px + 2pt) * 0.88);
	}

	.sec12 .c-clinic-calendar .c-cal-daynum {
		font-size: calc((15px + 2pt) * 0.88) !important;
	}

	/* 補足テキストのみ SP で約30%小さく（全体の 0.88 と併用） */
	.sec12 .c-clinic-calendar .c-cal-daynote {
		font-size: calc((11px + 2pt) * 0.7 * 0.88);
	}

	.sec12 .c-clinic-calendar p.holiday-title {
		font-size: calc((14px + 2pt) * 0.88);
	}

	.sec12 .c-clinic-calendar table.xo-month button {
		width: 42px;
		height: 42px;
		padding: 5px;
	}

	.sec12 .c-clinic-calendar table.xo-month button .dashicons {
		font-size: 23px;
		width: 23px;
		height: 23px;
	}

	/* 当月外マス — 日付数字だけ薄く（td の背景はそのまま） */
	.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td > div.other-month .c-cal-daynum {
		color: #737373 !important;
	}

	.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:nth-child(1) > div.other-month .c-cal-daynum {
		color: #c07070 !important;
	}

	.sec12 .c-clinic-calendar table.xo-month .month-dayname tr.dayname td:nth-child(7) > div.other-month .c-cal-daynum {
		color: #5f73b8 !important;
	}

	.sec12 .c-clinic-calendar table.xo-month .month-dayname td > div.other-month .c-cal-daynum.today {
		color: var(--c-cal-active) !important;
		-webkit-text-fill-color: var(--c-cal-active);
	}
}