/*
 * tpc/ のブロックの見た目。方針は docs/design.md（第5版）。
 *
 * 色の役割（theme.json のトークン。ここで値を決めない）
 * - 紺 ink：文字・見出し・モジュールの頭の罫・主なボタン
 * - 生成り paper：ページの背景／囲み panel：サブ情報と「選んだ日の予報」の面
 * - アクセント accent（朱）：「今日」の印とツバメのキャラクターだけ。リンク・枠・強調の飾りには使わない
 * - 混雑の段階 level-1〜5：データの色。空いている側は紺の淡色、普通はグレー、混雑側は朱の淡色〜深い朱
 *
 * 構造の規則
 * - モジュール（.tpc-panel など）＝ 2px の紺の罫 ＋ 見出し（25px）＋ 中身。モジュールどうしは space--module 離す
 * - 中身のブロックどうしは space--block、項目どうしは space--item。同じまとまりほど近く、違うまとまりほど遠く
 * - サブ情報（トップの細いカラム）と選んだ日の予報は「囲み」（面の色。罫線では囲まない）
 * - 細い罫線（1px）はリストの行の区切りにだけ使う
 * - 混雑は天気記号風のアイコン＋段階名（色やアイコンだけにしない）。太字は見出し・施設名・今日の段階だけ
 */
:root {
	--tpc-ink: var(--wp--preset--color--ink);
	--tpc-ink-soft: color-mix(in srgb, var(--wp--preset--color--ink) 78%, var(--wp--preset--color--white));
	--tpc-paper: var(--wp--preset--color--paper);
	--tpc-panel: var(--wp--preset--color--panel);
	--tpc-white: var(--wp--preset--color--white);
	--tpc-accent: var(--wp--preset--color--accent);
	--tpc-rule: var(--wp--preset--color--rule);
	--tpc-sub: var(--wp--preset--color--sub);
	--tpc-l1: var(--wp--preset--color--level-1);
	--tpc-l2: var(--wp--preset--color--level-2);
	--tpc-l3: var(--wp--preset--color--level-3);
	--tpc-l4: var(--wp--preset--color--level-4);
	--tpc-l5: var(--wp--preset--color--level-5);
	--tpc-heading: var(--wp--preset--font-family--heading);
	--tpc-bold: var(--wp--custom--weight--heading);
	--tpc-regular: var(--wp--custom--weight--body);
	--tpc-radius: var(--wp--custom--radius--base);
	--tpc-radius-s: var(--wp--custom--radius--small);
	--tpc-line: var(--wp--custom--line--width) solid var(--tpc-rule);
	--tpc-line-strong: var(--wp--custom--line--strong) solid var(--tpc-ink);
	--tpc-hatch: repeating-linear-gradient(135deg, transparent 0 5px, var(--tpc-rule) 5px 6px);
	--sp-item: var(--wp--custom--space--item);
	--sp-inner: var(--wp--custom--space--inner);
	--sp-block: var(--wp--custom--space--block);
	--sp-group: var(--wp--custom--space--group);
	--sp-module: var(--wp--custom--space--module);
	--sp-box: var(--wp--custom--space--box);
	--fs-small: var(--wp--preset--font-size--small);
	--fs-body: var(--wp--preset--font-size--medium);
	--fs-h3: var(--wp--preset--font-size--large);
	--fs-h2: var(--wp--preset--font-size--x-large);
	--fs-h1: var(--wp--preset--font-size--xx-large);
	--fs-hero: var(--wp--preset--font-size--xxx-large);
}

/* ------------------------------------------------------------------ 混雑の段階の色（塗り --lv-bg、塗りの上の文字 --lv-text、アイコンの線 --wx-line と塗り --wx-fill） */
.tpc-lv0 { --lv-bg: var(--tpc-hatch); --lv-text: var(--tpc-sub); --wx-line: var(--tpc-sub); --wx-fill: transparent; }
.tpc-lv1 { --lv-bg: var(--tpc-l1); --lv-text: var(--tpc-ink); --wx-line: var(--tpc-ink); --wx-fill: var(--tpc-l1); }
.tpc-lv2 { --lv-bg: var(--tpc-l2); --lv-text: var(--tpc-ink); --wx-line: var(--tpc-ink); --wx-fill: var(--tpc-l1); }
.tpc-lv3 { --lv-bg: var(--tpc-l3); --lv-text: var(--tpc-ink); --wx-line: var(--tpc-sub); --wx-fill: var(--tpc-l3); }
.tpc-lv4 { --lv-bg: var(--tpc-l4); --lv-text: var(--tpc-ink); --wx-line: var(--tpc-l5); --wx-fill: var(--tpc-l4); }
.tpc-lv5 { --lv-bg: var(--tpc-l5); --lv-text: var(--tpc-white); --wx-line: var(--tpc-l5); --wx-fill: var(--tpc-l5); }

/* 混雑アイコン（天気記号風） */
.tpc-wx { flex: none; width: 22px; height: 22px; color: var(--wx-line, var(--tpc-ink)); }
.tpc-wx .f { fill: var(--wx-fill, transparent); }
.tpc-wx .p { fill: var(--tpc-paper); }
/* 塗りの上のアイコン（混雑の塗りは深い朱なので線を白にする） */
.tpc-day.tpc-lv5 .tpc-wx,
.tpc-week__day.tpc-lv5 .tpc-wx,
.tpc-scale .tpc-lv5 .tpc-wx { --wx-line: var(--tpc-white); --wx-fill: transparent; }

/* 段階のラベル（アイコン＋段階名） */
.tpc-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--tpc-ink); font-size: 14px; line-height: 1.4; white-space: nowrap; }
.tpc-chip.tpc-lv5 { color: var(--tpc-l5); }
.tpc-chip.tpc-lv0 { color: var(--tpc-sub); }

/* ------------------------------------------------------------------ 「今日」の印（アクセントの役割 1） */
.tpc-today-tag {
	display: inline-block; margin-right: 6px; padding: 0 6px;
	background: var(--tpc-accent); color: var(--tpc-white);
	font-size: 12px; line-height: 1.6; letter-spacing: .04em; border-radius: var(--tpc-radius-s);
	vertical-align: .1em;
}

/* ------------------------------------------------------------------ ツバメのキャラクター（アクセントの役割 2） */
.tpc-swallow { display: block; flex: none; overflow: visible; }
.tpc-swallow__ink { fill: var(--tpc-ink); }
.tpc-swallow__wing { fill: var(--tpc-ink-soft); }
.tpc-swallow__belly { fill: var(--tpc-white); stroke: var(--tpc-ink); stroke-width: 2; }
.tpc-swallow__throat, .tpc-swallow__sun { fill: var(--tpc-accent); }
.tpc-swallow__cheek { fill: var(--tpc-l4); }
.tpc-swallow__eye { fill: var(--tpc-white); }
.tpc-swallow__closed { fill: none; stroke: var(--tpc-white); stroke-width: 2.4; stroke-linecap: round; }
.tpc-swallow__trail { fill: none; stroke: var(--tpc-sub); stroke-width: 3; stroke-linecap: round; }
.tpc-swallow__wire { fill: none; stroke: var(--tpc-sub); stroke-width: 2.4; stroke-linecap: round; }
.tpc-swallow.is-fly { width: 44px; height: 35px; }
.tpc-swallow.is-rest { width: 96px; height: 77px; }

/* トップの見出しと大きなツバメ（ページで一番目立つ1か所） */
.tpc-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-block); }
.tpc-hero__text > * { margin: 0; }
.tpc-hero__text > * + * { margin-top: var(--sp-inner); }
.tpc-hero .tpc-hero__title { font-size: var(--fs-hero); line-height: 1.3; letter-spacing: .02em; }
.tpc-mascot { margin: 0; }
.tpc-mascot .tpc-swallow { width: 240px; height: 192px; animation: tpc-glide .9s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes tpc-glide {
	from { opacity: 0; transform: translate(-56px, 24px) rotate(-10deg); }
	to { opacity: 1; transform: none; }
}
@media (max-width: 599px) {
	/* スマホ：見出しとツバメを横に並べ、説明文はその下に全幅で */
	.tpc-hero { gap: var(--sp-inner) var(--sp-item); }
	.tpc-hero__text { display: contents; }
	.tpc-hero .tpc-hero__title { grid-column: 1; grid-row: 1; font-size: var(--fs-h2); }
	.tpc-hero .tpc-mascot { grid-column: 2; grid-row: 1; }
	.tpc-hero .lede { grid-column: 1 / -1; margin: 0; }
	.tpc-mascot .tpc-swallow { width: 120px; height: 96px; }
}

/* ------------------------------------------------------------------ モジュール */
.tpc-panel { margin: 0; padding-top: var(--sp-inner); border-top: var(--tpc-line-strong); }
.tpc-panel > :last-child { margin-bottom: 0; }
/* モジュールの中で、中身のあとに来る見出しは、まとまりの間隔をあける */
.tpc-panel > * + .tpc-h { margin-top: var(--sp-group); }
.tpc-h {
	font-family: var(--tpc-heading);
	font-weight: var(--tpc-bold);
	font-size: var(--fs-h2);
	line-height: 1.35;
	margin: 0 0 var(--sp-inner);
	text-wrap: balance;
}
h3.tpc-h, h4.tpc-h { font-size: var(--fs-h3); margin-bottom: var(--sp-item); }
.tpc-subh { font-family: var(--tpc-heading); font-weight: var(--tpc-bold); font-size: var(--fs-body); margin: 0 0 var(--sp-item); }
@media (max-width: 599px) {
	.tpc-h { font-size: var(--fs-h3); }
	h3.tpc-h, h4.tpc-h { font-size: var(--fs-body); }
}

/* 見出しの行（ツバメ＋見出し＋日付、右端に更新日時） */
.tpc-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-item) 12px; margin: 0 0 var(--sp-block); }
.tpc-head .tpc-h { margin: 0; }
.tpc-head__date { margin: 0; font-size: 14px; color: var(--tpc-sub); font-variant-numeric: tabular-nums; }
.tpc-updated { margin: 0 0 0 auto; font-size: var(--fs-small); color: var(--tpc-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 補足・空の表示 */
.tpc-note { font-size: var(--fs-small); color: var(--tpc-sub); margin: var(--sp-inner) 0 0; line-height: 1.75; }
.tpc-small { font-size: 14px; margin: var(--sp-inner) 0 0; }
.tpc-muted { color: var(--tpc-sub); }
.tpc-preparing { color: var(--tpc-sub); font-size: 14px; margin: 0; }
.tpc-editor-note { font-size: var(--fs-small); color: var(--tpc-sub); }
.tpc-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tpc-icon { flex: none; vertical-align: -3px; }
.tpc-nowrap { white-space: nowrap; }
.tpc-num { font-variant-numeric: tabular-nums; }
.tpc-empty { display: flex; align-items: center; gap: var(--sp-block); padding: var(--sp-inner) 0; }
.tpc-empty p { margin: 0; font-size: var(--fs-body); }

/* 囲み（サブ情報・選んだ日の予報）：面の色で区切る。中の見出しは一段小さく、頭の罫は付けない */
.tpc-split__side > .tpc-panel,
.tpc-day-detail,
.tpc-status {
	background: var(--tpc-panel);
	border: 0;
	border-radius: var(--tpc-radius);
	padding: var(--sp-box);
}
.tpc-split__side .tpc-h { font-size: var(--fs-h3); }

/* ボタン：主なボタンは紺の面、控えめなボタンは紺の線 */
.tpc-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sp-inner) 0 0; }
.tpc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 10px 20px;
	background: var(--tpc-ink); color: var(--tpc-white) !important; text-decoration: none !important;
	font-size: 15px; line-height: 1.35;
	border: var(--wp--custom--line--width) solid var(--tpc-ink); border-radius: var(--tpc-radius);
}
.tpc-btn:hover { background: var(--tpc-ink-soft); }
.tpc-btn.is-sub { background: transparent; color: var(--tpc-ink) !important; }
.tpc-btn.is-sub:hover { background: var(--tpc-white); }

/* ------------------------------------------------------------------ ページの頭 */
.tpc-pr { font-size: var(--fs-small); color: var(--tpc-sub); margin: 0; }
.tpc-crumb { font-size: var(--fs-small); color: var(--tpc-sub); margin: 0; }
.tpc-crumb a { color: var(--tpc-sub); }
.tpc-heading { margin: 0; }
.tpc-heading__title {
	font-family: var(--tpc-heading);
	font-weight: var(--tpc-bold);
	font-size: var(--fs-h1);
	line-height: 1.35;
	margin: 0;
	letter-spacing: .02em;
	text-wrap: balance;
}
.tpc-heading__lede { color: var(--tpc-sub); font-size: 14px; line-height: 1.8; margin: var(--sp-item) 0 0; }
@media (max-width: 599px) {
	.tpc-heading__title { font-size: var(--fs-h2); }
}
.tpc-status { font-size: 14px; }
.tpc-status p { margin: 0; }
.tpc-status p + p { margin-top: var(--sp-item); }
.tpc-status.is-closed { box-shadow: inset 4px 0 0 var(--tpc-l5); }

/* ------------------------------------------------------------------ 今日のひとこと・お知らせ・季節のモチーフ */
.tpc-daynote { margin: 0; padding: 2px 0 2px var(--sp-inner); border-left: 4px solid var(--tpc-ink); }
.tpc-daynote__date { margin: 0; font-size: var(--fs-small); color: var(--tpc-sub); font-variant-numeric: tabular-nums; }
.tpc-daynote__text { margin: 2px 0 0; font-size: var(--fs-body); line-height: 1.75; }

.tpc-notices__list { list-style: none; margin: 0; padding: 0; }
.tpc-notices__list li { display: grid; gap: 2px; padding: 10px 0; border-top: var(--tpc-line); font-size: 14px; line-height: 1.6; }
.tpc-notices__list li:first-child { border-top: 0; padding-top: 0; }
.tpc-notices__list time { color: var(--tpc-sub); font-size: var(--fs-small); }

.tpc-season { display: inline-flex; flex: none; color: var(--tpc-ink); }
.tpc-season svg { width: 20px; height: 20px; }
.tpc-season .f { fill: var(--tpc-l2); }
.tpc-season .p { fill: var(--tpc-paper); }
.tpc-season.is-spring .f, .tpc-season.is-autumn .f { fill: var(--tpc-l4); }

/* ------------------------------------------------------------------ 施設ページの頭：今日・明日・今週末とカレンダー */
.tpc-sheet { container: sheet / inline-size; }
.tpc-sheet > * { margin: 0 !important; }
.tpc-sheet > * + * { margin-top: var(--sp-group) !important; }
.tpc-today {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-block) var(--sp-inner);
	padding-top: var(--sp-inner); border-top: var(--tpc-line-strong);
}
.tpc-today > * { margin: 0 !important; }
.tpc-today > .is-large { grid-column: 1 / -1; }
.tpc-score { min-width: 0; }
.tpc-score p { margin: 0; }
.tpc-score__when { font-size: var(--fs-small); color: var(--tpc-sub); font-variant-numeric: tabular-nums; }
.tpc-score__main { display: flex; align-items: center; gap: 10px; margin-top: 4px !important; }
.tpc-score__main .tpc-wx { width: 1.1em; height: 1.1em; }
/* 今日の段階はページの主役なので見出しと同じ太さにする */
.tpc-score.is-large .tpc-score__main { font-size: var(--fs-hero); }
.tpc-score.is-large .tpc-word { font-family: var(--tpc-heading); font-weight: var(--tpc-bold); }
.tpc-score.is-small .tpc-score__main { font-size: var(--fs-h3); gap: 6px; }
.tpc-word { line-height: 1.2; white-space: nowrap; }
.tpc-score.tpc-lv5 .tpc-word { color: var(--tpc-l5); }
.tpc-score__comment { font-size: var(--fs-body); margin-top: var(--sp-item) !important; }
.tpc-score.is-small .tpc-score__comment { display: none; }
.tpc-score__num { font-size: var(--fs-small); color: var(--tpc-sub); margin-top: 2px !important; font-variant-numeric: tabular-nums; }
.tpc-score.is-small { padding-top: var(--sp-inner); border-top: var(--tpc-line); }
@container sheet (min-width: 680px) {
	.tpc-today { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
	.tpc-today > .is-large { grid-column: auto; }
	.tpc-score.is-small { padding-top: 0; border-top: 0; padding-left: var(--sp-inner); border-left: var(--tpc-line); }
}
@media (max-width: 599px) {
	.tpc-score.is-large .tpc-score__main { font-size: var(--fs-h1); }
	.tpc-score.is-small .tpc-score__main { font-size: var(--fs-body); }
}

/* ------------------------------------------------------------------ 選んだ日の予報（囲み） */
.tpc-day-detail { transition: opacity .15s ease; }
.tpc-day-detail.is-loading { opacity: .45; }
.tpc-day-detail > * { margin-block: 0 !important; }
.tpc-day-detail > * + * { margin-block-start: var(--sp-block) !important; }
/* 囲みの中のモジュールは、頭の罫を細くする */
.tpc-day-detail .tpc-panel { padding-top: var(--sp-inner); border-top: var(--tpc-line); }
.tpc-day-detail .tpc-h { font-size: var(--fs-body); margin-bottom: var(--sp-item); }

/* 日付と段階 */
.tpc-score.is-detail { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-item) 12px; }
.tpc-score__date { font-family: var(--tpc-heading); font-weight: var(--tpc-bold); font-size: var(--fs-h3); color: var(--tpc-ink); font-variant-numeric: tabular-nums; }
.tpc-score__noun { font-size: 14px; color: var(--tpc-sub); margin-left: 4px; white-space: nowrap; }
.tpc-score.is-detail .tpc-score__main { margin: 0 !important; }
.tpc-score.is-detail .tpc-chip { font-family: var(--tpc-heading); font-weight: var(--tpc-bold); font-size: var(--fs-h3); gap: 6px; }
.tpc-score.is-detail .tpc-chip .tpc-wx { width: 30px; height: 30px; }
.tpc-score.is-detail .tpc-score__comment { flex-basis: 100%; margin: 0 !important; font-size: 14px; }

.tpc-reasons { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tpc-reasons li {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 14px; line-height: 1.4; background: var(--tpc-paper); border-radius: var(--tpc-radius); padding: 5px 10px 5px 8px;
}
.tpc-reasons li .tpc-icon { color: var(--tpc-sub); }

.tpc-facts { margin: 0; }
.tpc-facts > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: var(--tpc-line); }
.tpc-facts > div:first-child { border-top: 0; padding-top: 0; }
/* 開館と天気は続けて1つの表に見せる */
.tpc-day-detail > .tpc-open + .tpc-weather { margin-top: 0 !important; }
.tpc-open + .tpc-weather > div:first-child { border-top: var(--tpc-line); padding-top: 10px; }
.tpc-facts dt { font-size: 14px; color: var(--tpc-sub); display: flex; align-items: center; gap: 6px; }
.tpc-facts dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.tpc-source { font-size: 12px; color: var(--tpc-sub); white-space: nowrap; }

.tpc-cta { padding-top: var(--sp-inner); border-top: var(--tpc-line); }
.tpc-cta__heading { font-family: var(--tpc-heading); font-weight: var(--tpc-bold); font-size: var(--fs-body); margin: 0; text-wrap: balance; }
.tpc-cta__note { font-size: 14px; margin: 4px 0 0; }
.tpc-cta .tpc-buttons { margin-top: 12px; }

/* ------------------------------------------------------------------ 週間予報（記事で使う） */
.tpc-week { margin: 0; }
.tpc-week__lead { font-size: var(--fs-small); color: var(--tpc-sub); margin: 0 0 var(--sp-item); }
.tpc-week__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.tpc-week__day {
	all: unset; box-sizing: border-box; cursor: pointer; text-align: center; min-width: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px;
	min-height: 70px; padding: 6px 2px; border-radius: var(--tpc-radius-s);
	background: var(--lv-bg, transparent); color: var(--lv-text, var(--tpc-ink));
	font-variant-numeric: tabular-nums;
}
.tpc-week__day .tpc-wx { width: 18px; height: 18px; }
.tpc-week__day.is-closed { background: var(--tpc-hatch); color: var(--tpc-sub); box-shadow: inset 0 0 0 1px var(--tpc-rule); }
.tpc-week__day.is-none { cursor: default; background: transparent; color: var(--tpc-sub); box-shadow: inset 0 0 0 1px var(--tpc-rule); }
.tpc-week__d { font-size: 12px; line-height: 1.3; }
.tpc-week__t { font-size: 12px; line-height: 1.2; }
.tpc-week__day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tpc-paper), 0 0 0 2px var(--tpc-ink); }
.tpc-week__day:focus-visible { outline: 2px solid var(--tpc-ink); outline-offset: 4px; }

/* ------------------------------------------------------------------ 混雑予報カレンダー */
.tpc-calendar { margin: 0; }
.tpc-sheet > .tpc-calendar { padding-top: var(--sp-inner); border-top: var(--tpc-line-strong); }
.tpc-calendar > .tpc-h { margin-bottom: var(--sp-inner); }
.tpc-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-item); margin-bottom: 12px; }
.tpc-cal-head__label { font-family: var(--tpc-heading); font-weight: var(--tpc-bold); font-size: var(--fs-h3); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tpc-cal-nav {
	all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap;
	min-height: 40px; padding: 8px 14px; border-radius: var(--tpc-radius);
	font-size: 14px; color: var(--tpc-ink);
	border: var(--wp--custom--line--width) solid var(--tpc-ink);
}
.tpc-cal-nav:hover:not([disabled]) { background: var(--tpc-white); }
.tpc-cal-nav[disabled] { color: var(--tpc-rule); border-color: var(--tpc-rule); cursor: default; }
.tpc-cal-nav:focus-visible { outline: 2px solid var(--tpc-ink); outline-offset: 3px; }
.tpc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; align-content: start; }
.tpc-cal[hidden] { display: none; }
.tpc-cal__dow { font-size: var(--fs-small); text-align: center; color: var(--tpc-sub); padding: 2px 0 6px; }
.tpc-cal__dow.is-sun, .tpc-cal__dow.is-sat { color: var(--tpc-ink); }
.tpc-cal__pad { min-height: 62px; }
.tpc-day {
	all: unset; box-sizing: border-box; cursor: pointer; min-width: 0; position: relative;
	display: flex; flex-direction: column; justify-content: space-between; align-items: center;
	min-height: 62px; padding: 5px 3px 6px; border-radius: var(--tpc-radius-s);
	background: var(--lv-bg, transparent); color: var(--lv-text, var(--tpc-ink));
	line-height: 1;
	transition: transform .08s ease;
}
.tpc-day:active { transform: scale(.96); }
.tpc-day__n { align-self: flex-start; font-size: 14px; font-variant-numeric: tabular-nums; }
.tpc-day__n.is-hol::after { content: "祝"; font-size: 10px; margin-left: 2px; vertical-align: 2px; }
/* 今日のセル：上辺に朱の帯 */
.tpc-day.is-today::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tpc-accent); border-radius: var(--tpc-radius-s) var(--tpc-radius-s) 0 0; }
.tpc-day .tpc-wx { width: 16px; height: 16px; }
.tpc-day__w { font-size: 11px; white-space: nowrap; text-align: center; }
.tpc-day.is-closed { background: var(--tpc-hatch); color: var(--tpc-sub); box-shadow: inset 0 0 0 1px var(--tpc-rule); }
.tpc-day.is-none { cursor: default; background: transparent; color: var(--tpc-sub); box-shadow: inset 0 0 0 1px var(--tpc-rule); }
/* 選んだ日：塗りは残して紺の枠で示す */
.tpc-day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tpc-paper), 0 0 0 2px var(--tpc-ink); z-index: 1; }
.tpc-day:focus-visible { outline: 2px solid var(--tpc-ink); outline-offset: 4px; z-index: 2; }
@media (min-width: 600px) {
	.tpc-cal { gap: 4px; }
	.tpc-day, .tpc-cal__pad { min-height: 72px; }
	.tpc-day { padding: 8px 6px; }
	.tpc-day__n { font-size: 16px; }
	.tpc-day .tpc-wx { width: 20px; height: 20px; }
	.tpc-day__w { font-size: var(--fs-small); }
}

/* 凡例：5段階のアイコンと塗り */
.tpc-scale {
	list-style: none; margin: var(--sp-inner) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px;
	font-size: var(--fs-small); line-height: 1.3; text-align: center;
}
.tpc-scale li { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--lv-bg); color: var(--lv-text); padding: 6px 4px; border-radius: var(--tpc-radius-s); white-space: nowrap; }
.tpc-scale li .tpc-wx { width: 16px; height: 16px; }
.tpc-scale li.is-closed { background: var(--tpc-hatch); color: var(--tpc-sub); box-shadow: inset 0 0 0 1px var(--tpc-rule); }
@container sheet (min-width: 640px) {
	.tpc-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ 段組 */
/* 施設ページ：左にカレンダー、右に選んだ日の予報（囲み） */
.tpc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-group); }
.tpc-layout > * { margin: 0 !important; }
@media (min-width: 860px) {
	.tpc-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-group); align-items: start; }
	.tpc-layout > .tpc-day-detail { position: sticky; top: var(--sp-inner); }
	.admin-bar .tpc-layout > .tpc-day-detail { top: 48px; }
}
/* 中身のない段組（データのない施設など）は出さない（余白が二重にならないように） */
:is(.tpc-grid2, .tpc-split__side):not(:has(> *)) { display: none; }
/* 2つのモジュールを横に並べる */
.tpc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-module) var(--sp-group); }
.tpc-grid2 > * { margin: 0 !important; }
@media (min-width: 860px) {
	.tpc-grid2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}
/* トップ：メインを広く、サブを細く。高さはそろえない。スマホはメイン→サブの順に1段 */
.tpc-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-module) 0; }
.tpc-split > * { margin: 0 !important; }
.tpc-split__main > *, .tpc-split__side > * { margin: 0 !important; }
.tpc-split__main > * + * { margin-top: var(--sp-module) !important; }
.tpc-split__main > .tpc-daynote + * { margin-top: var(--sp-group) !important; }
.tpc-split__side > * + * { margin-top: var(--sp-block) !important; }
@media (min-width: 860px) {
	.tpc-split { grid-template-columns: minmax(0, 1fr) 320px; gap: 0 56px; align-items: start; }
}

/* ------------------------------------------------------------------ ホテル */
.tpc-hotels__list { list-style: none; margin: 0; padding: 0; }
.tpc-hotel { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: var(--tpc-line); }
.tpc-hotels__list > li:first-child .tpc-hotel, .tpc-hotels__list > .tpc-hotel:first-child { border-top: 0; padding-top: 0; }
.tpc-hotel-card .tpc-hotel { border-top: 0; padding-top: 0; grid-template-columns: 96px minmax(0, 1fr); }
.tpc-hotel__ph { width: 64px; height: 64px; object-fit: cover; border-radius: var(--tpc-radius); background: var(--tpc-l3); }
.tpc-hotel-card .tpc-hotel__ph { width: 96px; height: 96px; }
.tpc-hotel__ph.is-empty { display: grid; place-items: center; color: var(--tpc-sub); }
.tpc-hotel__body p { margin: 0; }
.tpc-hotel__name { font-weight: var(--tpc-bold); line-height: 1.5; }
.tpc-hotel__meta { font-size: var(--fs-small); color: var(--tpc-sub); }
.tpc-hotel__av { margin-top: 2px !important; }
.tpc-hotel__price { font-size: 18px; font-variant-numeric: tabular-nums; }
.tpc-hotel__full { font-size: 14px; color: var(--tpc-l5); }
.tpc-hotel__vacant { font-size: 14px; }
.tpc-hotel__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px !important; font-size: 14px; }
.tpc-hotel-card__text { margin: 12px 0 0; }
.tpc-credit { font-size: 12px; color: var(--tpc-sub); margin: 10px 0 0; }
.tpc-credit a { color: var(--tpc-sub); }

/* ------------------------------------------------------------------ イベント・価格・商品・まとめ */
.tpc-events__list { list-style: none; margin: 0; padding: 0; }
.tpc-events__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-inner); padding: 11px 0; border-top: var(--tpc-line); }
.tpc-events__list li:first-child { border-top: 0; padding-top: 0; }
.tpc-day-detail .tpc-events__list li { padding: 7px 0; font-size: 14px; }
.tpc-events__per { color: var(--tpc-sub); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tpc-badge { font-size: 12px; color: var(--tpc-sub); margin-right: var(--sp-item); border: var(--tpc-line); border-radius: var(--tpc-radius-s); padding: 1px 6px; }

.tpc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tpc-table th, .tpc-table td { text-align: left; padding: 10px 6px; border-top: var(--tpc-line); vertical-align: middle; }
.tpc-table thead th { border-top: 0; border-bottom: var(--tpc-line); font-size: var(--fs-small); color: var(--tpc-sub); font-weight: var(--tpc-regular); }
.tpc-table tbody tr:first-child td { border-top: 0; }
.tpc-prices thead th:last-child { text-align: right; }
.tpc-table .tpc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpc-table td a { font-weight: var(--tpc-bold); }
.tpc-short { display: none; }
@media (max-width: 599px) {
	.tpc-full { display: none; }
	.tpc-short { display: inline; }
	.tpc-spot-table .tpc-table th, .tpc-spot-table .tpc-table td { padding: 10px 3px; }
	.tpc-spot-table .tpc-table td:not(:first-child), .tpc-spot-table .tpc-table th:not(:first-child) { width: 4.8em; text-align: center; }
	.tpc-spot-table .tpc-chip { flex-direction: column; gap: 0; font-size: 12px; }
}
.tpc-summary p { margin: 0; line-height: 1.9; }
.tpc-summary p + p { margin-top: var(--sp-inner); }

.tpc-offers__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tpc-offers__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tpc-offer__type { font-size: 14px; color: var(--tpc-sub); min-width: 11em; }

/* ------------------------------------------------------------------ 基本情報・よくある質問・お問い合わせ */
.tpc-info__dl { display: grid; grid-template-columns: 7em minmax(0, 1fr); margin: 0; font-size: 15px; }
.tpc-info__dl dt, .tpc-info__dl dd { padding: 10px 0; border-top: var(--tpc-line); margin: 0; }
.tpc-info__dl > :nth-child(-n+2) { border-top: 0; padding-top: 0; }
.tpc-info__dl dt { color: var(--tpc-sub); font-size: 14px; }
.tpc-map { height: 260px; margin-top: var(--sp-block); border-radius: var(--tpc-radius); overflow: hidden; background: var(--tpc-l3); }
.tpc-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.tpc-faq__list { display: grid; gap: 0; }
.tpc-faq__item { padding: var(--sp-inner) 0; border-top: var(--tpc-line); }
.tpc-faq__item:first-child { border-top: 0; padding-top: 0; }
.tpc-faq .tpc-faq__q {
	font-family: var(--tpc-heading);
	font-weight: var(--tpc-bold);
	font-size: var(--fs-body);
	line-height: 1.5;
	margin: 0 0 6px;
	text-wrap: balance;
}
.tpc-faq__a { margin: 0; font-size: 15px; line-height: 1.85; }
.tpc-faq__a a { white-space: nowrap; }

.tpc-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-item) 14px; padding: var(--sp-box); background: var(--tpc-panel); border-radius: var(--tpc-radius); font-size: 17px; }
.tpc-contact__label { font-size: 14px; color: var(--tpc-sub); }
.tpc-contact__mail { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 施設の行・ランキング */
.tpc-related__list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-group); }
@media (min-width: 860px) {
	.tpc-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tpc-spotrow {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 2px; border-bottom: var(--tpc-line);
	text-decoration: none !important; color: var(--tpc-ink) !important; min-width: 0;
}
.tpc-spotrow:hover { background: var(--tpc-white); }
.tpc-spotrow:hover .tpc-spotrow__name { text-decoration: underline; text-underline-offset: .22em; }
.tpc-spotrow__cat { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--tpc-ink); }
.tpc-spotrow__cat .tpc-cat { width: 24px; height: 24px; }
.tpc-spotrow__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tpc-spotrow__name { font-weight: var(--tpc-bold); line-height: 1.5; }
.tpc-spotrow__sub { font-size: var(--fs-small); color: var(--tpc-sub); }
/* 予報の根拠（予想の計算時に保存した理由、最大2つ） */
.tpc-spotrow__why { font-size: var(--fs-small); line-height: 1.5; margin-top: 4px; display: flex; align-items: baseline; gap: 6px; }
.tpc-spotrow__why::before { content: "根拠"; content: "根拠" / ""; flex: none; font-size: 11px; line-height: 1.5; color: var(--tpc-sub); background: var(--tpc-panel); border-radius: var(--tpc-radius-s); padding: 0 5px; }
.tpc-spotrow__lvl { display: flex; align-items: center; gap: 4px 12px; flex: none; }
.tpc-spotrow__when { font-size: var(--fs-small); color: var(--tpc-sub); }
.tpc-spotrow .tpc-chip { min-width: 7.6em; }
@media (max-width: 599px) {
	.tpc-spotrow .tpc-chip { min-width: 0; }
	/* スマホのランキングは2段：上に施設名・所在地・根拠、下に混雑アイコンと段階名（施設名を狭くしない） */
	.tpc-rank .tpc-spotrow { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 10px; align-items: start; }
	.tpc-rank .tpc-spotrow::before, .tpc-rank .tpc-spotrow__cat { grid-row: 1 / span 2; }
	.tpc-rank .tpc-spotrow__body, .tpc-rank .tpc-spotrow__lvl { grid-column: 3; }
	.tpc-rank .tpc-spotrow__lvl { justify-content: flex-start; }
}

.tpc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--sp-inner); }
.tpc-tabs button {
	all: unset; box-sizing: border-box; cursor: pointer; min-height: 40px; padding: 8px 14px; white-space: nowrap;
	border-radius: var(--tpc-radius); font-size: 14px; color: var(--tpc-ink); font-variant-numeric: tabular-nums;
	border: var(--wp--custom--line--width) solid var(--tpc-rule);
}
.tpc-tabs button:hover { border-color: var(--tpc-ink); }
.tpc-tabs button[aria-pressed="true"] { background: var(--tpc-ink); color: var(--tpc-white); border-color: var(--tpc-ink); }
.tpc-tabs button:focus-visible { outline: 2px solid var(--tpc-ink); outline-offset: 3px; }
.tpc-filters { display: flex; gap: var(--sp-item) var(--sp-block); flex-wrap: wrap; margin: 0 0 var(--sp-block); }
.tpc-filter { font-size: 14px; color: var(--tpc-sub); display: inline-flex; align-items: center; gap: var(--sp-item); white-space: nowrap; }
.tpc-filter select {
	font: inherit; color: var(--tpc-ink); padding: 6px 10px; min-height: 40px;
	border: var(--wp--custom--line--width) solid var(--tpc-rule); border-radius: var(--tpc-radius); background: var(--tpc-white);
}
.tpc-ranking__list { transition: opacity .15s ease; min-height: 120px; }
.tpc-ranking.is-loading .tpc-ranking__list { opacity: .45; }
.tpc-ranking__order { margin: 0; padding-bottom: 6px; border-bottom: var(--tpc-line); font-size: var(--fs-small); color: var(--tpc-sub); }
/* 条件に合う施設の5段階の割合（予報の帯） */
.tpc-mix { margin: 0 0 var(--sp-block); }
.tpc-mix__lead { font-size: var(--fs-small); color: var(--tpc-sub); margin: 0 0 var(--sp-item); }
.tpc-mix__bar { display: flex; gap: 2px; height: 12px; }
.tpc-mix__bar span { min-width: 4px; background: var(--lv-bg); }
.tpc-mix__bar span:first-child { border-radius: var(--tpc-radius-s) 0 0 var(--tpc-radius-s); }
.tpc-mix__bar span:last-child { border-radius: 0 var(--tpc-radius-s) var(--tpc-radius-s) 0; }
.tpc-mix__legend { list-style: none; margin: var(--sp-item) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--sp-block); }
.tpc-mix__legend li { display: inline-flex; align-items: center; gap: 6px; }
.tpc-mix__legend li.is-zero { opacity: .5; }
.tpc-mix__legend .tpc-chip { font-size: var(--fs-small); }
.tpc-mix__legend .tpc-wx { width: 18px; height: 18px; }
.tpc-mix__n { font-size: 14px; min-width: 2ch; }
.tpc-mix__n::after { content: "か所"; font-size: 12px; color: var(--tpc-sub); margin-left: 1px; }
.tpc-rank { list-style: none; margin: 0; padding: 0; counter-reset: tpc-rank; }
.tpc-rank li { counter-increment: tpc-rank; }
/* 順位の番号。1位は紺の面 */
.tpc-rank .tpc-spotrow::before {
	content: counter(tpc-rank); flex: none; width: 28px; height: 28px; border-radius: var(--tpc-radius-s);
	display: grid; place-items: center;
	border: var(--tpc-line); color: var(--tpc-ink);
	font-size: 14px; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.tpc-rank li:first-child .tpc-spotrow::before { background: var(--tpc-ink); border-color: var(--tpc-ink); color: var(--tpc-white); }

/* カテゴリ・都道府県 */
.tpc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tpc-chips a {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px;
	border-radius: var(--tpc-radius); text-decoration: none; color: var(--tpc-ink);
	font-size: 15px; white-space: nowrap;
	background: var(--tpc-white);
}
.tpc-chips a:hover { box-shadow: inset 0 0 0 1px var(--tpc-ink); }
.tpc-chips .tpc-cat { width: 20px; height: 20px; }
.tpc-chips__n { font-size: 12px; color: var(--tpc-sub); font-variant-numeric: tabular-nums; }
.tpc-area-index .tpc-h { margin-bottom: var(--sp-inner); }
.tpc-area-index .tpc-chips.is-categories + .tpc-h { margin-top: var(--sp-group); }
.tpc-area-index__region { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--sp-item); align-items: start; padding: 12px 0; border-top: var(--tpc-line); }
.tpc-area-index .tpc-h + .tpc-area-index__region { border-top: 0; padding-top: 0; }
.tpc-area-index__label { margin: 9px 0 0; font-size: 14px; color: var(--tpc-sub); }
.tpc-area-index.is-compact .tpc-area-index__region { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tpc-area-index.is-compact .tpc-area-index__label { margin: 0; }
/* 細いカラムでは、カテゴリは縦に並べ、都道府県は小さく */
.tpc-split__side .tpc-chips.is-categories { flex-direction: column; }
.tpc-split__side .tpc-chips.is-categories .tpc-chips__n { margin-left: auto; }
.tpc-split__side .tpc-area-index__region .tpc-chips a { min-height: 34px; padding: 4px 10px; font-size: 14px; }
@media (max-width: 599px) {
	.tpc-area-index__region { grid-template-columns: minmax(0, 1fr); gap: var(--sp-item); }
	.tpc-area-index__label { margin: 0; }
}

/* ------------------------------------------------------------------ 広告枠 */
.tpc-ad { position: relative; padding-top: 18px; overflow: hidden; }
.tpc-ad__label { position: absolute; top: 0; left: 0; font-size: 11px; color: var(--tpc-sub); }
.tpc-ad.is-placeholder {
	display: grid; place-items: center; padding: 0; border-radius: var(--tpc-radius);
	border: var(--wp--custom--line--width) dashed var(--tpc-rule); color: var(--tpc-sub); font-size: var(--fs-small);
}

/* ------------------------------------------------------------------ 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
	.tpc-day-detail, .tpc-ranking__list, .tpc-day { transition: none; }
	.tpc-day:active { transform: none; }
	.tpc-mascot .tpc-swallow { animation: none; }
}