/*
Theme Name: Nazomap Theme
Description: ナゾマップ（UMA・都市伝説・古代文明の伝承・目撃図鑑）専用テーマ。データは Nazomap Core プラグインが管理する。
Version: 0.40.3
Requires at least: 6.5
Requires PHP: 8.2
Author: ナゾマップ
Text Domain: nazomap
*/

/* ========== トークン ========== */
:root {
	--bg: #0c0e13;
	--bg-2: #11141b;
	--surface: #161a23;
	--surface-2: #1d222e;
	--border: #2a3040;
	--text: #e6e8ee;
	--text-2: #b4bbc8;
	--muted: #8a93a4;
	--accent: #d4ad57;
	--accent-2: #7fd1c1;
	--danger: #e06c75;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 6px 24px rgba(0, 0, 0, .35);
	--wrap: 1120px;
	--gutter: 16px;
	--font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, system-ui, sans-serif;
	--font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

	/* カテゴリ色 */
	--c-uma: #6fbf73;
	--c-toshidensetsu: #e06c75;
	--c-kodai: #d9a441;
	--c-ufo: #61afef;
	--c-kaii: #b98ce0;
	--c-yokai: #e39a55;
	--c-confirmed: #d6dde8;
	--c-seirei: #f29ac0;
	--c-shinju: #2ec4b6;
	--c-kisho: #c2a77e;
	--c-ooparts: #c9826b;
	--c-default: #8a93a4;
	--cat: var(--c-default);
}

/* ========== ベース ========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.4; margin: 0 0 .6em; font-weight: 700; }
p, ul, ol, dl, table { margin: 0 0 1.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto;
	padding: 8px 16px; background: var(--accent); color: #111;
}
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ========== ヘッダー ========== */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(12, 14, 19, .92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}
.site-header__bar { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.site-brand { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; margin-right: auto; color: var(--text); }
.site-brand:hover { text-decoration: none; }
.site-brand__name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; letter-spacing: .08em; }
.site-brand__name span { color: var(--accent); }
/* キャッチフレーズ：スマホでは非表示、PCでは1行に省略して表示 */
.site-brand__tagline { display: none; font-size: .68rem; color: var(--muted); letter-spacing: .02em; }
@media (min-width: 900px) {
	.site-brand__tagline { display: block; max-width: 36em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
.site-header .search-form { display: none; }
.menu-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--surface); cursor: pointer; font-size: .85rem; white-space: nowrap; flex-shrink: 0;
}
.menu-toggle__icon, .menu-toggle__icon::before, .menu-toggle__icon::after {
	display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; content: "";
	transition: transform .2s;
}
.menu-toggle__icon { position: relative; }
.menu-toggle__icon::before { position: absolute; top: -5px; }
.menu-toggle__icon::after { position: absolute; top: 5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-5px) rotate(-45deg); }

.site-nav { display: none; padding: 8px 0 16px; }
.site-nav.is-open { display: block; }
@media (max-width: 899px) {
	/* 固定ヘッダーより長いメニューも、画面内で最後までスクロールできるようにする。 */
	.site-nav.is-open {
		max-height: calc(100vh - 60px);
		max-height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
	}
	body.admin-bar .site-nav.is-open {
		max-height: calc(100vh - 106px);
		max-height: calc(100dvh - 106px - env(safe-area-inset-bottom, 0px));
	}
}
.site-nav .search-form { display: flex; margin-bottom: 12px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li a {
	display: block; padding: 10px 4px; color: var(--text); border-bottom: 1px solid var(--border);
}
.site-nav li a:hover { color: var(--accent); text-decoration: none; }
.site-nav .current-menu-item > a, .site-nav .is-current > a { color: var(--accent); }

@media (min-width: 900px) {
	.menu-toggle { display: none; }
	.site-header .site-header__bar .search-form { display: flex; width: 280px; }
	.site-nav { display: block !important; padding: 0 0 6px; }
	.site-nav .search-form { display: none; }
	.site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
	.site-nav li a { border: 0; padding: 6px 0; font-size: .92rem; color: var(--text-2); }
}

/* サブメニュー（スマホ：下に広がる／PC：クリック・ホバーで開くパネル） */
.site-nav .menu-item-has-children { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.site-nav .menu-item-has-children > a { grid-column: 1; }
.submenu-toggle {
	grid-column: 2; display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--text-2); cursor: pointer;
}
.submenu-toggle::before {
	content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.menu-item-has-children.is-open > .submenu-toggle::before { transform: translateY(2px) rotate(-135deg); }
.site-nav .sub-menu { display: none; grid-column: 1 / -1; padding: 0 0 6px 14px; }
.site-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
.site-nav .sub-menu a { font-size: .92rem; padding: 8px 4px; color: var(--text-2); }
.site-nav .is-current-group > a, .site-nav .current-menu-ancestor > a, .site-nav .current-menu-parent > a { color: var(--accent); }

@media (min-width: 900px) {
	.site-nav .menu { flex-wrap: nowrap; gap: 4px 26px; }
	/* 英語版のメニューはサブメニューなしの横並びなので折り返す（日本語版の nowrap で文字が縦に潰れないように） */
	.site-nav .menu--flat { flex-wrap: wrap; gap: 4px 20px; }
	.site-nav .menu--flat > li > a { white-space: nowrap; }
	.site-nav .menu-item-has-children { display: flex; align-items: center; gap: 2px; }
	.site-nav .menu-item-has-children > a { padding: 6px 0; }
	.submenu-toggle { width: 22px; height: 28px; }
	.submenu-toggle::before { width: 6px; height: 6px; }
	.site-nav .sub-menu {
		position: absolute; top: 100%; left: -12px; z-index: 60;
		min-width: 220px; padding: 8px; margin: 0;
		background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
	}
	.site-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
	.site-nav .sub-menu--wide { min-width: 440px; }
	.site-nav .menu-item-has-children.is-open > .sub-menu--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
	.site-nav .sub-menu li a { display: block; padding: 7px 10px; border-radius: 6px; font-size: .9rem; color: var(--text-2); white-space: nowrap; }
	.site-nav .sub-menu li a:hover { background: var(--surface); color: var(--accent); }
	.site-nav .sub-menu .is-current > a, .site-nav .sub-menu .current-menu-item > a { color: var(--accent); }
}
@media (min-width: 900px) and (hover: hover) {
	/* マウスでは、乗せるだけでも開く（キーボードは focus-within で開く）。 */
	.site-nav .menu-item-has-children:hover > .sub-menu,
	.site-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
	.site-nav .menu-item-has-children:hover > .sub-menu--wide,
	.site-nav .menu-item-has-children:focus-within > .sub-menu--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
	.site-nav .menu-item-has-children:hover > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
}

/* ========== 検索フォーム ========== */
.search-form { display: flex; gap: 0; width: 100%; }
.search-form input[type="search"] {
	flex: 1; min-width: 0; padding: 8px 12px;
	background: var(--surface); border: 1px solid var(--border); border-right: 0;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.search-form button {
	padding: 8px 14px; border: 1px solid var(--accent); background: var(--accent); color: #15120a;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer; font-weight: 700;
}

/* ========== 共通パーツ ========== */
.site-main { padding: 20px 0 48px; min-height: 60vh; }
.breadcrumb { font-size: .78rem; color: var(--muted); margin: 0 0 16px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 4px; color: var(--border); }
.breadcrumb a { color: var(--text-2); }

.page-header { margin-bottom: 20px; }
.page-title { font-family: var(--font-serif); font-size: 1.6rem; letter-spacing: .04em; margin-bottom: .3em; }
.page-lead { color: var(--text-2); margin: 0; font-size: .95rem; }

.section { margin: 40px 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.section__title { font-family: var(--font-serif); font-size: 1.25rem; margin: 0; letter-spacing: .04em; }
.section__title::before { content: "◆"; color: var(--accent); margin-right: 8px; font-size: .8em; }
.section__more { font-size: .85rem; white-space: nowrap; }

.nazo-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 20px; border-radius: 999px; border: 1px solid var(--border);
	background: var(--surface-2); color: var(--text); font-weight: 700; cursor: pointer; font-size: .92rem;
}
.nazo-btn:hover { text-decoration: none; border-color: var(--accent); }
.nazo-btn--primary { background: var(--accent); border-color: var(--accent); color: #15120a; }
.nazo-btn--primary:hover { filter: brightness(1.08); }

.nazo-badge {
	display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700;
	background: color-mix(in srgb, var(--cat) 18%, transparent); color: var(--cat);
	border: 1px solid color-mix(in srgb, var(--cat) 45%, transparent);
	line-height: 1.7; white-space: nowrap;
}
a.nazo-badge:hover { text-decoration: none; filter: brightness(1.15); }
.nazo-tag { display: inline-block; padding: 2px 10px; margin: 0 6px 6px 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: .8rem; }

/* カテゴリ色の割当（既定値は :root の --cat。子要素は継承する） */
.is-cat-uma { --cat: var(--c-uma); }
.is-cat-toshidensetsu { --cat: var(--c-toshidensetsu); }
.is-cat-kodai { --cat: var(--c-kodai); }
.is-cat-ufo { --cat: var(--c-ufo); }
.is-cat-kaii { --cat: var(--c-kaii); }
.is-cat-yokai { --cat: var(--c-yokai); }
.is-cat-confirmed { --cat: var(--c-confirmed); }
.is-cat-seirei { --cat: var(--c-seirei); }
.is-cat-shinju { --cat: var(--c-shinju); }
.is-cat-kisho { --cat: var(--c-kisho); }
.is-cat-ooparts { --cat: var(--c-ooparts); }

/* ========== カード ========== */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.nazo-card {
	position: relative; border-radius: var(--radius); padding: 2px;
	background: linear-gradient(145deg, var(--cat), var(--border) 40%, var(--border) 60%, color-mix(in srgb, var(--cat) 55%, transparent));
	box-shadow: var(--shadow);
	transition: transform .2s ease;
}
.nazo-card:hover { transform: translateY(-3px); }
.nazo-card.rarity-5 { background: linear-gradient(145deg, #f3d47a, #8a6a23 30%, #3a2f15 50%, #8a6a23 70%, #f3d47a); }
.nazo-card__link { display: flex; flex-direction: column; height: 100%; border-radius: calc(var(--radius) - 2px); background: var(--surface); color: var(--text); overflow: hidden; }
.nazo-card__link:hover { text-decoration: none; }
.nazo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 10px 6px; }
.nazo-card__rarity { color: var(--accent); font-size: .72rem; letter-spacing: -.05em; white-space: nowrap; }
.nazo-card__rarity .off { color: var(--border); }
.nazo-card__art { position: relative; aspect-ratio: 4 / 3; margin: 0 8px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); }
.nazo-card__art img { width: 100%; height: 100%; object-fit: cover; }
.nazo-art-placeholder {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	background:
		radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--cat) 35%, transparent), transparent 60%),
		radial-gradient(circle at 75% 80%, color-mix(in srgb, var(--cat) 20%, transparent), transparent 55%),
		var(--bg-2);
	font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700;
	color: color-mix(in srgb, var(--cat) 80%, #fff); text-shadow: 0 0 18px color-mix(in srgb, var(--cat) 60%, transparent);
}
.nazo-card__body { padding: 8px 10px 12px; display: flex; flex-direction: column; flex: 1; }
.nazo-card__name { font-family: var(--font-serif); font-size: 1.02rem; margin: 0; line-height: 1.35; }
.nazo-card__kana { font-size: .7rem; color: var(--muted); margin: 0 0 8px; }

/* ステータスバー */
.nazo-stats { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3px 6px; margin: auto 0 0; font-size: .68rem; }
.nazo-stats dt { color: var(--text-2); white-space: nowrap; }
.nazo-stats dd { margin: 0; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.nazo-stats dd span { display: block; height: 100%; width: calc(var(--v) * 20%); background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 60%, #000), var(--cat)); border-radius: 3px; }
.nazo-stats dd.num { height: auto; overflow: visible; background: none; border-radius: 0; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.4; }
.nazo-stats--lg { font-size: .85rem; gap: 8px 10px; }
.nazo-stats--lg dd:not(.num) { height: 10px; border-radius: 5px; }

/* ========== 一覧アイテム ========== */
.entry-list { display: grid; gap: 12px; }
@media (min-width: 900px) { .entry-list { grid-template-columns: 1fr 1fr; gap: 16px; } }
.nazo-item {
	display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px;
	background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cat);
	border-radius: var(--radius-sm);
}
@media (min-width: 600px) { .nazo-item { grid-template-columns: 140px 1fr; } }
.nazo-item__art { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.nazo-item__art img { width: 100%; height: 100%; object-fit: cover; }
.nazo-item__art .nazo-art-placeholder { font-size: 1.8rem; }
.nazo-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 2px; font-size: .75rem; color: var(--muted); }
.nazo-item__title { font-family: var(--font-serif); font-size: 1.08rem; margin: 0; }
.nazo-item__title a { color: var(--text); }
.nazo-item__kana { font-size: .72rem; color: var(--muted); margin: 0 0 4px; }
.nazo-item__summary { font-size: .85rem; color: var(--text-2); margin: 0; line-height: 1.65;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ========== フィルタ ========== */
.filter-bar {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; padding: 12px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
@media (min-width: 900px) { .filter-bar { grid-template-columns: repeat(4, 1fr) auto; align-items: end; } }
.filter-bar label { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 2px; }
.filter-bar select {
	width: 100%; padding: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px;
}
.filter-bar__actions { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (min-width: 900px) { .filter-bar__actions { grid-column: auto; } }
.filter-bar__actions .nazo-btn { padding: 8px 16px; }
.result-count { font-size: .85rem; color: var(--muted); margin-bottom: 12px; }

/* ========== ページ送り ========== */
.pagination { margin: 32px 0 0; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #15120a; font-weight: 700; }
.pagination a.page-numbers:hover { border-color: var(--accent); text-decoration: none; }

/* ========== フロントページ ========== */
.hero { padding: 36px 0 12px; text-align: center; }
.hero__title { font-family: var(--font-serif); font-size: clamp(1.9rem, 7vw, 3rem); letter-spacing: .12em; margin-bottom: .2em; }
.hero__title span { color: var(--accent); }
.hero__lead { color: var(--text-2); font-size: .95rem; margin: 0 auto 20px; max-width: 36em; }
.hero .search-form { max-width: 520px; margin: 0 auto; }
.hero .search-form input[type="search"] { padding: 12px 16px; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }

.daily { display: grid; gap: 20px; align-items: center; padding: 20px; background: linear-gradient(135deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); }
@media (min-width: 700px) { .daily { grid-template-columns: 240px 1fr; } }
.daily .nazo-card { max-width: 260px; margin: 0 auto; width: 100%; }
.daily__label { color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .1em; margin-bottom: 4px; }
.daily__title { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: .3em; }
.daily__summary { color: var(--text-2); }

.cat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-tile {
	display: block; padding: 16px; border-radius: var(--radius); color: var(--text);
	background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 22%, var(--surface)), var(--surface) 70%);
	border: 1px solid color-mix(in srgb, var(--cat) 35%, var(--border));
}
.cat-tile:hover { text-decoration: none; border-color: var(--cat); }
.cat-tile__name { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--cat); margin-bottom: 4px; }
.cat-tile__count { font-family: var(--font); font-size: .75rem; color: var(--muted); font-weight: 400; }
.cat-tile__desc { font-size: .78rem; color: var(--text-2); line-height: 1.6; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.about-box { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.about-box p:last-child { margin-bottom: 0; }

/* ========== 図鑑詳細 ========== */
.entry-hero { display: grid; gap: 24px; margin-bottom: 28px; }
@media (min-width: 800px) { .entry-hero { grid-template-columns: 300px 1fr; align-items: start; } }
.entry-hero .nazo-card { max-width: 300px; margin: 0 auto; width: 100%; }
.entry-hero .nazo-card:hover { transform: none; }
.entry-title { font-family: var(--font-serif); font-size: clamp(1.6rem, 5vw, 2.2rem); letter-spacing: .04em; margin-bottom: .1em; }
.entry-kana { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
.entry-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.entry-summary { font-size: 1.02rem; padding: 14px 16px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 16px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec-table th, .spec-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.spec-table th { width: 7.5em; color: var(--muted); font-weight: 400; white-space: nowrap; }
.image-credit { font-size: .7rem; color: var(--muted); margin-top: 6px; text-align: center; }

.entry-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.entry-content { font-size: 1rem; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 {
	font-family: var(--font-serif); font-size: 1.3rem; margin: 2em 0 .8em; padding: 8px 0 8px 14px;
	border-left: 4px solid var(--accent); background: linear-gradient(90deg, var(--surface), transparent);
}
.entry-content h3 { font-size: 1.1rem; margin: 1.6em 0 .6em; padding-bottom: 4px; border-bottom: 1px dashed var(--border); }
.entry-content blockquote { margin: 1.5em 0; padding: 12px 16px; border-left: 3px solid var(--border); background: var(--bg-2); color: var(--text-2); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.entry-content th, .entry-content td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.entry-content th { background: var(--surface); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content figure { margin: 1.5em 0; }
.entry-content figcaption { font-size: .8rem; color: var(--muted); text-align: center; }

.sources { font-size: .85rem; }
.sources ol { padding-left: 1.4em; color: var(--text-2); }
.sources li { margin-bottom: 4px; }

.notice-box { padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-radius: var(--radius-sm); font-size: .82rem; color: var(--text-2); }
.notice-box strong { color: var(--text); }

.entry-tags { margin-top: 24px; }

/* ========== 固定ページ ========== */
.page-content { max-width: 800px; }
.page-content h2 { font-size: 1.2rem; margin: 2em 0 .8em; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.page-content table { width: 100%; border-collapse: collapse; }
.page-content th, .page-content td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.page-content th { width: 9em; color: var(--muted); font-weight: 400; }

/* ========== フォーム ========== */
.nazo-form { max-width: 640px; margin-top: 24px; }
.nazo-form__row label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.nazo-form__row input[type="text"], .nazo-form__row input[type="email"], .nazo-form__row input[type="url"], .nazo-form__row textarea {
	width: 100%; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.nazo-form__row--check label { font-weight: 400; }
.nazo-form__req { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: .68rem; border-radius: 4px; background: var(--danger); color: #fff; vertical-align: middle; font-weight: 700; }
.nazo-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nazo-notice { padding: 12px 16px; border-radius: var(--radius-sm); margin: 16px 0; }
.nazo-notice ul { margin: 0; padding-left: 1.2em; }
.nazo-notice--success { background: color-mix(in srgb, var(--c-uma) 15%, var(--surface)); border: 1px solid var(--c-uma); }
.nazo-notice--error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border: 1px solid var(--danger); }

/* ========== 広告枠 ========== */
.ad-slot { width: 100%; max-width: 100%; overflow: hidden; margin: 28px auto; text-align: center; min-height: 100px; }
.ad-slot__label { display: block; font-size: .65rem; color: var(--muted); letter-spacing: .1em; margin-bottom: 4px; }
.card-grid .ad-slot, .entry-list .ad-slot { grid-column: 1 / -1; margin: 8px 0; }

/* ========== 空・404 ========== */
.empty { padding: 40px 16px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-2); }
.empty .search-form { max-width: 420px; margin: 16px auto 0; }

/* ========== フッター ========== */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 32px 0 24px; font-size: .85rem; color: var(--muted); }
.site-footer__cols { display: grid; gap: 24px; }
@media (min-width: 700px) { .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: .9rem; color: var(--text); margin-bottom: 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 4px; }
.site-footer a { color: var(--text-2); }
.site-footer__note { font-size: .75rem; line-height: 1.7; }
/* 公式SNS（template-parts/sns.php） */
.site-footer__sns { margin-top: 24px; text-align: center; }
.site-footer__sns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.site-footer__sns a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: .88rem; }
.site-footer__sns a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.site-footer__copy { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; font-size: .75rem; }

/* ========== WordPress 標準クラス ========== */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: .8rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ========== 人物事典 ========== */
.person-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.person-header__label { color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .15em; margin: 0 0 4px; }
.person-header .entry-kana { margin-bottom: 8px; }
.person-meta { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.person-meta li { padding: 2px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: .8rem; }
.person-bio { max-width: 800px; }

.kana-index { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kana-index a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 700;
}
.kana-index a:hover { border-color: var(--accent); text-decoration: none; }

.person-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .person-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.person-tile {
	display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
	background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); color: var(--text);
}
.person-tile:hover { text-decoration: none; border-color: var(--accent); }
.person-tile__name { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; }
.person-tile__kana { font-size: .72rem; color: var(--muted); }
.person-tile__meta { font-size: .8rem; color: var(--text-2); }
.person-tile__count { font-size: .72rem; color: var(--accent); margin-top: 2px; }

.person-links { list-style: none; margin: 0; padding: 0; }
.person-links li { margin-bottom: 2px; }
.person-links__role { margin-left: 6px; font-size: .78rem; color: var(--muted); }

/* ========== 地図・地点 ========== */
.nazo-map { position: relative; width: 100%; height: 320px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); z-index: 0; }
.nazo-map--large { height: 60vh; min-height: 380px; max-height: 640px; }
.nazo-map--medium { height: 420px; }
.nazo-map--small { height: 300px; }
.nazo-map__status { position: absolute; left: 10px; bottom: 10px; z-index: 500; padding: 2px 10px; border-radius: 999px; background: rgba(12,14,19,.85); color: var(--text-2); font-size: .75rem; pointer-events: none; }
/* 地理院タイルを暗い色調に加工（出典表記は地図右下） */
.nazomap-tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
.leaflet-container { font-family: var(--font); background: var(--bg-2); }
.leaflet-control-attribution { background: rgba(12,14,19,.8) !important; color: var(--muted) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 12px 14px; line-height: 1.5; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.nazo-popup { display: flex; flex-direction: column; gap: 3px; min-width: 180px; }
.nazo-popup__cat { align-self: flex-start; padding: 0 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--cat); border: 1px solid var(--cat); }
.nazo-popup__name { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: var(--text) !important; }
.nazo-popup__entry { font-size: .85rem; color: var(--accent-2) !important; }
.nazo-popup__meta { font-size: .75rem; color: var(--muted); }
.nazo-popup__more { font-size: .8rem; color: var(--accent) !important; }
.filter-bar--map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 599px) { .filter-bar--map { grid-template-columns: 1fr 1fr; } }

.map-notice { margin: 0 0 20px; padding: 10px 14px; border-left: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .8rem; }
.map-notice p { margin: 0 0 4px; }
.map-notice p:last-child { margin: 0; }
.map-notice__warn strong { color: var(--danger); margin-right: 6px; }
.map-notice__sub { color: var(--muted); font-size: .72rem; }
.map-notice__sub a { color: var(--text-2); }

.pref-regions { display: grid; gap: 14px; }
.pref-region__name { font-size: .8rem; color: var(--muted); margin: 0 0 6px; font-weight: 700; letter-spacing: .08em; }
.pref-grid { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pref-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: .85rem; }
.pref-chip:hover { text-decoration: none; border-color: var(--accent); }
.pref-chip.is-empty { color: var(--muted); }
.pref-chip__count { padding: 0 7px; border-radius: 999px; background: var(--accent); color: #15120a; font-size: .7rem; font-weight: 700; }
.map-link { margin: 24px 0; }

.loc-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .loc-list { grid-template-columns: 1fr 1fr; } }
.loc-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cat); border-radius: var(--radius-sm); }
.loc-item__name { font-weight: 700; color: var(--text); }
.loc-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.entry-spots { margin: 8px 0 24px; }
.entry-spots .section__title { margin-bottom: 12px; }
.spot-body { margin-top: 8px; }
.map-entry__box { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* ========== ランキング ========== */
.rank-box { max-width: 440px; margin-top: 16px; padding: 16px; background: linear-gradient(135deg, rgba(214, 173, 80, .09), var(--surface) 70%); border: 1px solid rgba(214, 173, 80, .55); border-radius: var(--radius); }
.rank-box__title { font-size: .95rem; color: var(--accent); letter-spacing: .05em; margin: 0 0 10px; }
.rank-box__open {
	display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
	background: linear-gradient(135deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.rank-box__open:hover { border-color: var(--accent); }
.rank-box__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rank-box__list { display: flex; flex-direction: column; gap: 4px; }
.rank-box__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rank-box__name { font-weight: 700; }
.rank-box__rank { color: var(--text-2); white-space: nowrap; }
.rank-box__rank b { font-size: 1.35rem; font-family: var(--font-serif); color: var(--text); margin-right: 1px; }
.rank-box__empty { font-size: .85rem; color: var(--text-2); }
.rank-box__cta { align-self: flex-end; margin-top: 6px; padding: 8px 16px; min-height: 44px; display: inline-flex; align-items: center; font-size: .9rem; font-weight: 700; color: var(--bg); background: var(--accent); border-radius: var(--radius-sm); }
.rank-box__more { margin: 8px 0 0; font-size: .75rem; color: var(--muted); }
.rank-box__more a { margin-left: 6px; }
.is-rank-1 { --medal: #f3d47a; }
.is-rank-2 { --medal: #c9d1dc; }
.is-rank-3 { --medal: #d49a6a; }
.rank-box__rank.is-rank-1 b, .rank-box__rank.is-rank-2 b, .rank-box__rank.is-rank-3 b { color: var(--medal); }

/* 応援ダイアログ */
.nazo-modal {
	width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; overflow: auto;
	background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.nazo-modal::backdrop { background: rgba(0, 0, 0, .7); }
.nazo-modal__inner { position: relative; padding: 20px 16px 16px; }
.nazo-modal__close { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0; background: none; color: var(--muted); font-size: 1.6rem; cursor: pointer; }
.nazo-modal__title { font-family: var(--font-serif); font-size: 1.15rem; margin: 0 36px 4px 0; }
.nazo-modal__lead { font-size: .82rem; color: var(--text-2); margin: 0 0 12px; }
.nazo-modal__ts { margin: 0 0 12px; }
.nazo-modal__msg { min-height: 1.4em; margin: 0 0 8px; font-size: .85rem; font-weight: 700; color: var(--c-uma); }
.nazo-modal__msg.is-error { color: var(--danger); }
.nazo-modal__note { margin: 12px 0 0; font-size: .72rem; color: var(--muted); }
.nazo-vote-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nazo-vote-list__item {
	display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "name rank btn" "name count btn";
	align-items: center; gap: 0 10px; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.nazo-vote-list__name { grid-area: name; font-weight: 700; color: var(--text); }
.nazo-vote-list__rank { grid-area: rank; font-size: .8rem; color: var(--text-2); text-align: right; white-space: nowrap; }
.nazo-vote-list__rank.is-rank-1, .nazo-vote-list__rank.is-rank-2, .nazo-vote-list__rank.is-rank-3 { color: var(--medal); font-weight: 700; }
.nazo-vote-list__count { grid-area: count; font-size: .72rem; color: var(--muted); text-align: right; white-space: nowrap; }
.nazo-vote-list__btn { grid-area: btn; padding: 8px 14px; font-size: .82rem; }
.nazo-vote-list__btn:disabled { opacity: .6; cursor: default; }
.nazo-vote-list__loading { padding: 16px; text-align: center; color: var(--muted); }
.nazo-toast {
	position: fixed; left: 50%; bottom: 20px; z-index: 1000; transform: translateX(-50%); max-width: calc(100% - 32px);
	padding: 10px 18px; border-radius: 999px; background: var(--c-uma); color: #0c0e13; font-size: .85rem; font-weight: 700; box-shadow: var(--shadow);
}
.nazo-toast.is-error { background: var(--danger); color: #fff; }

/* ランキングページ */
.rank-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--border); }
.rank-tabs__tab { padding: 8px 18px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 700; }
.rank-tabs__tab:hover { text-decoration: none; color: var(--text); }
.rank-tabs__tab.is-current { color: var(--accent); border-bottom-color: var(--accent); }
.rank-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.rank-cats .pref-chip.is-current { border-color: var(--accent); color: var(--accent); }
.rank-switch { display: flex; gap: 6px; margin: 0 0 16px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: thin; }
.rank-switch__item { flex-shrink: 0; padding: 4px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: .85rem; white-space: nowrap; }
.rank-switch__item:hover { text-decoration: none; border-color: var(--accent); }
.rank-switch__item.is-current { background: var(--accent); border-color: var(--accent); color: #15120a; font-weight: 700; }

.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rank-item {
	display: grid; grid-template-columns: 52px 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
	background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cat); border-radius: var(--radius-sm);
}
@media (min-width: 600px) { .rank-item { grid-template-columns: 64px 112px minmax(0, 1fr) auto; } }
.rank-item__no { text-align: center; color: var(--text-2); font-size: .8rem; white-space: nowrap; }
.rank-item__no b { font-family: var(--font-serif); font-size: 1.6rem; color: var(--text); }
.rank-item.is-rank-1 .rank-item__no b, .rank-item.is-rank-2 .rank-item__no b, .rank-item.is-rank-3 .rank-item__no b { color: var(--medal); font-size: 2rem; }
.rank-item.is-rank-1 { background: linear-gradient(90deg, color-mix(in srgb, #f3d47a 12%, var(--surface)), var(--surface) 60%); }
.rank-item__art { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.rank-item__art img { width: 100%; height: 100%; object-fit: cover; }
.rank-item__art .nazo-art-placeholder { font-size: 1.5rem; }
.rank-item__body { min-width: 0; }
.rank-item__title { font-family: var(--font-serif); font-size: 1.02rem; margin: 2px 0 0; }
.rank-item__title a { color: var(--text); }
.rank-item__score { font-size: .8rem; color: var(--accent); font-weight: 700; }
.rank-item__vote { padding: 8px 14px; font-size: .82rem; }
.rank-item__vote:disabled { opacity: .6; cursor: default; }
@media (max-width: 420px) {
	.rank-item { grid-template-columns: 44px minmax(0, 1fr) auto; }
	.rank-item__art { display: none; }
}
.rank-list__ad { list-style: none; }
.rank-updated { margin: 20px 0 0; font-size: .75rem; color: var(--muted); }

.ranking-tiles { display: grid; gap: 12px; }
@media (min-width: 600px) { .ranking-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ranking-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ranking-tile { display: flex; flex-direction: column; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ranking-tile__name { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 2px; }
.ranking-tile__name a { color: var(--text); }
.ranking-tile__desc { font-size: .78rem; color: var(--muted); margin: 0 0 10px; }
.ranking-tile__list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.ranking-tile__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.ranking-tile__no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: .75rem; font-weight: 700; }
.ranking-tile__list .is-rank-1 .ranking-tile__no, .ranking-tile__list .is-rank-2 .ranking-tile__no, .ranking-tile__list .is-rank-3 .ranking-tile__no { background: var(--medal); color: #15120a; }
.ranking-tile__entry { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-tile__score { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.ranking-tile__empty { font-size: .82rem; color: var(--muted); margin: 0 0 10px; }
.ranking-tile__more { margin-top: auto; font-size: .82rem; align-self: flex-end; }

/* ========== コメント ========== */
.comments { margin: 8px 0 16px; }
.comments .section__title { margin-bottom: 12px; }
.comments__empty { padding: 14px 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-2); font-size: .9rem; }
.comment-list, .comment-replies { list-style: none; margin: 0; padding: 0; }
.comment-list { display: grid; gap: 10px; margin-bottom: 20px; }
.comment-replies { display: grid; gap: 8px; margin: 8px 0 0 16px; padding-left: 12px; border-left: 2px solid var(--border); }
@media (min-width: 600px) { .comment-replies { margin-left: 28px; } }
.comment { padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.comment--removed { margin: 0; color: var(--muted); font-size: .85rem; font-style: italic; }
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .78rem; color: var(--muted); }
.comment__name { font-weight: 700; color: var(--text); font-size: .88rem; }
.comment__uid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.comment__body { margin: 6px 0 8px; font-size: .95rem; line-height: 1.75; }
.comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .78rem; }
.comment__btn { padding: 2px 6px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .78rem; list-style: none; }
.comment__btn:hover { color: var(--text); }
.comment__report summary::-webkit-details-marker { display: none; }
.comment__report[open] summary { color: var(--danger); }
.comment__report-box { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 4px; }
.comment__report-box select { padding: 2px 6px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; font-size: .78rem; }
.comment__like.is-liked { color: var(--danger); }
.comment__like:disabled { cursor: default; }
.comment__reported { color: var(--muted); }
.comment-form { max-width: none; margin-top: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.comment-form__title { font-size: 1rem; margin: 0 0 12px; }
.comment-form__reply { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 10px; background: var(--bg-2); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: .85rem; }
.comment-form__reply[hidden] { display: none; }
.comment-form__count { display: block; text-align: right; font-size: .72rem; color: var(--muted); }
.comment-form__note { font-size: .75rem; color: var(--muted); line-height: 1.7; }
.comment-form .nazo-form__submit { margin-bottom: 4px; }
.comment-form__msg { min-height: 1.4em; margin: 0; font-size: .88rem; font-weight: 700; color: var(--c-uma); }
.comment-form__msg.is-error { color: var(--danger); }

/* ========== 投稿フォーム ========== */
.nazo-form__row select { width: 100%; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.nazo-form__help { display: block; margin-top: 2px; font-size: .75rem; color: var(--muted); }
.submit-form { max-width: 720px; }
.submit-form__cols { display: grid; gap: 0 16px; }
@media (min-width: 600px) { .submit-form__cols { grid-template-columns: 1fr 1fr; } }
.submit-choices { display: grid; gap: 12px; margin-bottom: 24px; }
@media (min-width: 700px) { .submit-choices { grid-template-columns: 1fr 1fr; } }
.submit-choice { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); color: var(--text); }
.submit-choice:hover { text-decoration: none; border-color: var(--accent); }
.submit-choice__title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.submit-choice__desc { font-size: .88rem; color: var(--text-2); }
.submit-rules { max-width: 720px; margin-top: 32px; padding: 14px 18px; background: color-mix(in srgb, var(--danger) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-radius: var(--radius-sm); font-size: .85rem; color: var(--text-2); }
.submit-rules__title { font-size: 1rem; color: var(--text); margin: 0 0 8px; }
.submit-rules ul { padding-left: 1.2em; margin-bottom: 8px; }
.submit-rules strong { color: var(--text); }
.submit-rules p { margin: 0; }
.submit-cta { margin: 0; padding: 12px 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: .88rem; color: var(--text-2); }
.submit-cta a { margin-left: 6px; font-weight: 700; }

/* ========== 地図の表示範囲（日本／世界） ========== */
.map-scope { display: inline-flex; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.map-scope__btn { padding: 6px 18px; border: 0; background: var(--surface); color: var(--text-2); font-weight: 700; cursor: pointer; font-size: .85rem; }
.map-scope__btn[aria-pressed="true"] { background: var(--accent); color: #15120a; }
.nazo-form__row[hidden] { display: none; }

/* ========== アフィリエイト（PR） ========== */
.aff-box { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.aff-box__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
.aff-box__pr { display: inline-block; padding: 0 6px; border: 1px solid var(--muted); border-radius: 3px; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .05em; line-height: 1.6; }
.aff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aff-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.aff-item:last-child { border-bottom: 0; }
.aff-item__name { font-weight: 700; font-size: .92rem; }
.aff-item__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.aff-btn { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #111; }
.aff-btn:hover { text-decoration: none; filter: brightness(1.08); }
.aff-box--top { margin: 0 0 24px; }
.aff-box--top .aff-item { padding: 6px 0; }
.page-header + .aff-box--top { margin-top: 4px; }
.aff-btn--amazon { background: #f3b33d; }
.aff-btn--rakuten { background: #e0565b; color: #fff; }
.aff-btn--booking { background: #3a7bd5; color: #fff; }
.aff-box__note { margin: 8px 0 0; font-size: .7rem; color: var(--muted); }
.aff-box--travel { margin: 0 0 20px; }
.site-footer__disclosure { margin-top: 16px; text-align: center; }

/* ========== 掲示板 ========== */
.bbs-boards { overflow-x: auto; scrollbar-width: thin; }
.bbs-boards .rank-tabs__tab { flex-shrink: 0; white-space: nowrap; padding: 8px 14px; }
.bbs-board-desc { margin: 0 0 16px; font-size: .85rem; color: var(--text-2); }
.bbs-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.bbs-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bbs-item__title { font-weight: 700; font-size: 1rem; color: var(--text); }
.bbs-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); }

/* ========== 動画 ========== */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.video-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.video-card__play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; }
.video-card__play img { width: 100%; height: 100%; object-fit: cover; }
.video-card__icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(0, 0, 0, .7); transition: background .2s; }
.video-card__icon::after { content: ""; position: absolute; left: 26px; top: 12px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.video-card__play:hover .video-card__icon, .video-card__play:focus-visible .video-card__icon { background: #e00; }
.video-card__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.video-card__title { margin: 0; font-size: .92rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-card__title a { color: var(--text); }
.video-card__meta { margin: 0; font-size: .75rem; color: var(--muted); }
.video-card__entry { align-self: flex-start; }
.video-note { margin: 16px 0 0; font-size: .72rem; color: var(--muted); }
.entry-videos .section__title { margin-bottom: 12px; }

/* ========== 特集 ========== */
.feature-grid { display: grid; gap: 14px; }
@media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-card__link { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: var(--text); }
.feature-card__link:hover { text-decoration: none; border-color: var(--accent); }
.feature-card__art { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-2); overflow: hidden; }
.feature-card__art img { width: 100%; height: 100%; object-fit: cover; }
.feature-card__art .nazo-art-placeholder { font-size: 1.6rem; }
.feature-card__label { position: absolute; left: 10px; top: 10px; padding: 1px 10px; border-radius: 999px; background: var(--accent); color: #15120a; font-size: .72rem; font-weight: 700; }
.feature-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.feature-card__title { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 700; line-height: 1.45; }
.feature-card__excerpt { font-size: .82rem; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feature-card__date { font-size: .72rem; color: var(--muted); }
.feature { max-width: 800px; margin: 0 auto; }
.feature__header { margin-bottom: 24px; }
.feature__date { font-size: .8rem; color: var(--muted); margin: 0 0 12px; }
.feature__hero { margin: 16px 0 0; border-radius: var(--radius); overflow: hidden; }
.feature__hero img { width: 100%; height: auto; display: block; }
.feature__content { margin-bottom: 24px; }
.feature-toc { margin: 24px 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.feature-toc__title { margin: 0 0 6px; font-weight: 700; font-size: .9rem; color: var(--accent); }
.feature-toc ol { margin: 0; padding-left: 1.4em; font-size: .9rem; }
.feature-toc li { margin: 2px 0; }
.feature-entry { margin: 20px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cat); border-radius: var(--radius-sm); }
.entry-content .feature-entry__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; font-family: var(--font-serif); font-size: 1.2rem; }
.feature-entry__title a { color: var(--text); }
.feature-entry__rank { display: inline-block; padding: 2px 10px; border-radius: 6px; background: var(--accent); color: #15120a; font-family: var(--font); font-size: .85rem; font-weight: 700; }
.feature-entry__body { display: grid; gap: 14px; }
@media (min-width: 600px) { .feature-entry__body { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.feature-entry__art { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); }
.feature-entry__art img { width: 100%; height: 100%; object-fit: cover; }
.feature-entry__kana { margin: 0 0 4px; font-size: .78rem; color: var(--muted); }
.feature-entry__summary { margin: 0 0 10px; font-size: .95rem; }
.feature-entry__more { margin: 10px 0 0; font-size: .85rem; }
.entry-content .feature-rank { list-style: none; padding: 0; }
.feature-cards { margin: 20px 0; }
.feature-warning { padding: 8px 12px; border: 1px dashed var(--danger); color: var(--danger); font-size: .85rem; }

/* ========== よく読まれている項目 ========== */
.popular-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .popular-list { grid-template-columns: 1fr 1fr; } }
.popular-list__item { display: grid; grid-template-columns: 28px 64px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cat); border-radius: var(--radius-sm); }
.popular-list__no { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--accent); text-align: center; }
.popular-list__art { aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--bg-2); }
.popular-list__art img { width: 100%; height: 100%; object-fit: cover; }
.popular-list__art .nazo-art-placeholder { font-size: 1.1rem; }
.popular-list__body { display: flex; flex-direction: column; min-width: 0; }
.popular-list__title { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popular-list__cat { font-size: .72rem; color: var(--muted); }

/* ========== 検索の候補表示 ========== */
.search-form.has-suggest { position: relative; }
.search-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); text-align: left; max-height: 70vh; overflow-y: auto; }
.search-suggest[hidden] { display: none; }
.search-suggest li a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; color: var(--text); }
.search-suggest li a:hover, .search-suggest li[aria-selected="true"] a { background: var(--surface-2); text-decoration: none; }
.search-suggest img, .search-suggest__ph { flex-shrink: 0; width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
.search-suggest__ph { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cat) 25%, var(--bg-2)); color: var(--cat); font-family: var(--font-serif); font-weight: 700; }
.search-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.search-suggest__title { font-weight: 700; font-size: .92rem; }
.search-suggest__meta { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest__more a { justify-content: center; font-size: .82rem; color: var(--accent-2) !important; }

/* ========== ナゾ検定・ナゾ診断 ========== */
.quiz { max-width: 720px; margin: 0 auto; }
.quiz-card { padding: 20px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.quiz-start { text-align: center; }
.quiz-start__lead { color: var(--text-2); }
.quiz-start__main .nazo-btn { padding: 14px 28px; font-size: 1rem; }
.quiz-start__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.quiz-start__cats .pref-chip { cursor: pointer; font: inherit; font-size: .85rem; }
.quiz-loading { padding: 40px 16px; text-align: center; color: var(--muted); }
.quiz-progress { margin: 0 0 6px; font-size: .8rem; color: var(--muted); }
.quiz-bar { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin-bottom: 16px; }
.quiz-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.quiz-q { font-family: var(--font-serif); font-size: 1.2rem; margin: 0 0 12px; }
.quiz-q:focus { outline: none; }
.quiz-quote { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--bg-2); color: var(--text-2); font-size: .95rem; }
.quiz-choices { display: grid; gap: 8px; }
@media (min-width: 600px) { .quiz-choices { grid-template-columns: 1fr 1fr; } .quiz-choices--wide { grid-template-columns: 1fr; } }
.quiz-choice { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.quiz-choice:hover:not(:disabled) { border-color: var(--accent); }
.quiz-choice:disabled { cursor: default; opacity: .7; }
.quiz-choice.is-correct { opacity: 1; border-color: var(--c-uma); background: color-mix(in srgb, var(--c-uma) 20%, var(--surface-2)); }
.quiz-choice.is-wrong { opacity: 1; border-color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, var(--surface-2)); }
.quiz-feedback { margin-top: 14px; }
.quiz-judge { margin: 0 0 6px; font-weight: 700; font-size: 1.05rem; }
.quiz-judge.is-ok { color: var(--c-uma); }
.quiz-judge.is-ng { color: var(--danger); }
.quiz-judge span { color: var(--text); font-size: .9rem; margin-left: 6px; }
.quiz-explain { font-size: .85rem; color: var(--text-2); }
.quiz-result { text-align: center; }
.quiz-result__label { margin: 0; font-size: .8rem; color: var(--accent); font-weight: 700; letter-spacing: .08em; }
.quiz-result__score { margin: 0; color: var(--text-2); }
.quiz-result__title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: var(--accent); margin: 4px 0 12px; }
.quiz-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.quiz-share__x { background: #000; border-color: #444; }
.quiz-share__line { background: #06c755; border-color: #06c755; color: #fff; }
.quiz-result__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.quiz-review__title { font-size: 1rem; margin: 24px 0 8px; text-align: left; }
.quiz-review { text-align: left; padding-left: 1.4em; font-size: .88rem; }
.quiz-review li { margin-bottom: 10px; }
.quiz-review li.is-ng .quiz-review__mark { color: var(--danger); }
.quiz-review li.is-ok .quiz-review__mark { color: var(--c-uma); }
.quiz-review small { color: var(--muted); }
.shindan-result__img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 12px; border-radius: var(--radius-sm); border: 2px solid var(--cat); }
.shindan-result__type { font-weight: 700; }
.shindan-result__summary { font-size: .9rem; color: var(--text-2); }
.shindan-result .nazo-stats { max-width: 360px; margin: 0 auto 16px; text-align: left; }
.quiz-about { max-width: 720px; margin-left: auto; margin-right: auto; font-size: .9rem; color: var(--text-2); }
.play-tiles { display: grid; gap: 12px; }
@media (min-width: 700px) { .play-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .play-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.play-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--text); }
.play-tile:hover { text-decoration: none; border-color: var(--accent); }
.play-tile__title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.play-tile__desc { font-size: .82rem; color: var(--text-2); }

/* ========== コメント・掲示板の画像 ========== */
.comment__images { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; padding: 0; list-style: none; }
.comment__images a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.comment__images img { display: block; width: 120px; height: 120px; object-fit: cover; }
@media (min-width: 600px) { .comment__images img { width: 160px; height: 160px; } }
.img-picker { position: relative; }
.img-picker__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.img-picker .img-picker__btn { display: inline-flex; gap: 4px; margin: 0; cursor: pointer; font-size: .85rem; font-weight: 700; padding: 8px 14px; }
.img-picker:focus-within .img-picker__btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.img-picker.is-full .img-picker__btn { opacity: .5; pointer-events: none; }
.img-picker__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.img-picker__list:empty { display: none; }
.img-picker__item { position: relative; }
.img-picker__item img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.img-picker__remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .9rem; line-height: 1; cursor: pointer; }
.img-picker__msg { margin: 4px 0 0; font-size: .8rem; color: var(--danger); }
.img-picker__msg:empty { display: none; }
.img-picker__note { margin: 6px 0 0; font-size: .72rem; color: var(--muted); line-height: 1.7; }

/* ========== 近くの伝承地 ========== */
.near-box { margin: 16px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.near-box__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.near-box__title { margin: 0; font-size: 1.05rem; }
.near-box__note { margin: 8px 0 0; font-size: .75rem; color: var(--muted); line-height: 1.7; }
.near-box__msg { margin: 8px 0 0; font-size: .85rem; color: var(--text-2); }
.near-box__msg:empty { display: none; }
.near-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.near-list:empty { display: none; }
.near-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.near-item__km { flex: 0 0 auto; min-width: 4.5em; font-weight: 700; color: var(--accent); font-size: .9rem; }
.near-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.near-item__cat { align-self: flex-start; padding: 0 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #15120a; background: var(--cat); }
.near-item__name { font-weight: 700; }
.near-item__meta { font-size: .78rem; color: var(--muted); }

/* ========== ナゾ暦 ========== */
.page-kicker { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); }
.koyomi-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.koyomi-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--cat); border-radius: var(--radius); }
@media (min-width: 600px) { .koyomi-item { grid-template-columns: 140px minmax(0, 1fr); } }
.koyomi-item__art { display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-2); }
.koyomi-item__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.koyomi-item__note { margin: 0 0 4px; font-size: .82rem; font-weight: 700; color: var(--accent); }
.koyomi-item__title { margin: 0 0 4px; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.koyomi-item__summary { margin: 0; font-size: .85rem; color: var(--text-2); line-height: 1.7; }
.koyomi-empty, .koyomi-upcoming { color: var(--text-2); }
.koyomi-upcoming .pref-chip { margin: 0 4px 4px 0; }
.koyomi-note { margin-top: 12px; font-size: .75rem; color: var(--muted); }
.koyomi-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0; }
.koyomi-months { display: grid; gap: 14px; }
@media (min-width: 600px) { .koyomi-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .koyomi-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.koyomi-month { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.koyomi-month__title { margin: 0 0 8px; font-size: 1rem; display: flex; align-items: baseline; gap: 8px; }
.koyomi-month__count { font-size: .75rem; color: var(--accent); font-weight: 700; }
.koyomi-days { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.koyomi-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 6px; font-size: .78rem; color: var(--muted); }
.koyomi-day.has-items { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); color: var(--text); font-weight: 700; }
.koyomi-day.has-items:hover { background: var(--accent); color: #15120a; text-decoration: none; }
.koyomi-day.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.koyomi-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.koyomi-chips a { font-weight: 700; margin-right: 6px; }
.koyomi-chips__note { font-size: .82rem; color: var(--text-2); }

/* ========== ナゾ図鑑コレクション ========== */
.nazo-item { position: relative; }
.nazo-card.is-found .nazo-card__body::after, .nazo-item.is-found::after { content: "発見済"; position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #15120a; font-size: .66rem; font-weight: 700; pointer-events: none; }
.col-summary { margin-bottom: 16px; padding: 18px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius); }
.col-summary__label { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); }
.col-summary__title { margin: 2px 0 6px; font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; }
.col-summary__nums { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; }
.col-summary__pct { margin-left: 8px; color: var(--accent); }
.col-summary__note { margin: 10px 0 0; font-size: .72rem; color: var(--muted); line-height: 1.7; }
.col-summary__warn { margin: 8px 0 0; font-size: .82rem; color: var(--danger); }
.col-bar { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.col-bar span { display: block; width: 0; height: 100%; background: var(--cat, var(--accent)); transition: width .6s ease; }
.col-bar--main { height: 10px; max-width: 420px; margin: 0 auto; }
.col-bar--main span { background: var(--accent); }
.col-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.col-group { margin: 0 0 20px; }
.col-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.col-group__title { margin: 0; font-size: 1.1rem; border-left: 4px solid var(--cat); padding-left: 8px; }
.col-group__count { font-size: .85rem; font-weight: 700; color: var(--text-2); }
.col-group.is-complete .col-group__count::after { content: " ★COMPLETE"; color: var(--accent); }
.col-grid { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.col-card { display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; }
.col-card:hover { text-decoration: none; }
.col-card__art { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); border: 1px solid var(--border); }
.col-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-card__name { font-size: .72rem; line-height: 1.4; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.col-card:not(.is-found) .col-card__art > * { filter: brightness(0) saturate(0); opacity: .55; }
.col-card:not(.is-found) .col-card__name { color: var(--muted); }
.col-card.is-found .col-card__art { border-color: var(--cat, var(--accent)); }
.col-page[data-filter="found"] .col-card:not(.is-found), .col-page[data-filter="unfound"] .col-card.is-found { display: none; }
.col-reset { margin: 24px 0; text-align: center; }
.col-toast { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); font-size: .85rem; line-height: 1.5; transition: opacity .4s, transform .4s; }
.col-toast__text { flex: 1 1 12em; min-width: 0; }
.col-toast.is-hiding { opacity: 0; transform: translateY(10px); }
.col-toast__icon { color: var(--accent); }
.col-toast__link { font-weight: 700; white-space: nowrap; }
.col-toast__close { border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 0 2px; }

/* ========== ナゾ年表 ========== */
.nenpyo-eras { margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.nenpyo-era { position: relative; margin: 0 0 20px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.nenpyo-era::before { content: ""; position: absolute; left: -27px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); }
.nenpyo-era__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.nenpyo-era__title { margin: 0; font-family: var(--font-serif); font-size: 1.3rem; }
.nenpyo-era__range { font-size: .8rem; color: var(--muted); }
.nenpyo-era__count { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--accent); }
.nenpyo-era__lead { margin: 6px 0 10px; font-size: .88rem; color: var(--text-2); line-height: 1.7; }
.nenpyo-era__picks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .nenpyo-era__picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nenpyo-era__picks a { display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.nenpyo-era__picks a:hover { text-decoration: none; color: var(--accent); }
.nenpyo-era__art { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); border-bottom: 3px solid var(--cat); }
.nenpyo-era__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nenpyo-era__name { font-size: .82rem; font-weight: 700; }
.nenpyo-era__more { margin: 10px 0 0; text-align: right; font-size: .85rem; }
.nenpyo-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.nenpyo-filter .pref-chip.is-current { background: var(--accent); color: #15120a; border-color: var(--accent); }
.nenpyo-line { margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.nenpyo-line__item { position: relative; margin: 0 0 14px; }
.nenpyo-line__item::before { content: ""; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--cat); border: 2px solid var(--bg); }
.nenpyo-line__when { display: inline-block; margin-bottom: 4px; font-size: .8rem; font-weight: 700; color: var(--accent); }
.nenpyo-link { display: inline-block; margin-left: 8px; font-size: .82rem; }
.nenpyo-filter .pref-chip.is-current .pref-chip__count { background: #15120a; color: var(--accent); }

/* トップ：時代から探す */
.era-tiles { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: era; }
@media (min-width: 700px) { .era-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.era-tile { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius); color: var(--text); }
a.era-tile:hover { text-decoration: none; border-color: var(--accent); }
.era-tile.is-empty { opacity: .5; }
.era-tile__name { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; }
.era-tile__range { font-size: .72rem; color: var(--muted); }
.era-tile__count { margin-top: 4px; font-size: .8rem; font-weight: 700; color: var(--accent); }

/* ========== VS対決 ========== */
.vs-header { text-align: center; }
.vs-question { margin: 6px 0 0; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.vs-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
.vs-side { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.vs-side .nazo-card { width: 100%; max-width: 280px; margin: 0 auto; }
.vs-side__more { text-align: center; font-size: .8rem; }
.vs-vote { width: 100%; padding: 12px 8px; font-size: .9rem; white-space: normal; }
.vs-mark { align-self: center; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #15120a; font-weight: 900; font-size: 1.1rem; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
@media (min-width: 700px) { .vs-mark { width: 76px; height: 76px; font-size: 1.6rem; } }
.vs-battle.is-voted .vs-vote { opacity: .5; }
.vs-ts { margin: 12px auto 0; text-align: center; }
.vs-msg { margin: 12px 0 0; text-align: center; font-weight: 700; color: var(--accent); }
.vs-msg.is-error { color: var(--danger); }
.vs-msg:empty { display: none; }
.vs-results { display: grid; gap: 10px; max-width: 640px; margin: 16px auto 0; }
.vs-result { display: grid; grid-template-columns: 7em minmax(0, 1fr) 3.5em 4em; align-items: center; gap: 8px; font-size: .88rem; }
.vs-result__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-result__bar { height: 14px; border-radius: 7px; background: var(--bg-2); overflow: hidden; }
.vs-result__bar span { display: block; width: 0; height: 100%; background: var(--cat); transition: width .8s ease; }
.vs-result__pct { font-weight: 900; font-size: 1.05rem; text-align: right; }
.vs-result__count { color: var(--muted); font-size: .78rem; }
.vs-result.is-mine .vs-result__name::after { content: " ✓"; color: var(--accent); }
.vs-result.is-win .vs-result__pct { color: var(--accent); }
.vs-total { margin: 10px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }
.vs-total:empty { display: none; }
.vs-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.vs-note { font-size: .75rem; color: var(--muted); text-align: center; }
.vs-list { display: grid; gap: 10px; }
@media (min-width: 900px) { .vs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vs-list--compact { grid-template-columns: 1fr; } }
.vs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "a vs b" "meta meta meta"; align-items: center; gap: 8px 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.vs-row:hover { text-decoration: none; border-color: var(--accent); }
.vs-row__side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.vs-row__side:first-child { grid-area: a; }
.vs-row__side:nth-child(3) { grid-area: b; }
.vs-row__art { display: block; width: 100%; max-width: 140px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); border-bottom: 3px solid var(--cat); }
.vs-row__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-row__name { font-size: .85rem; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vs-row__vs { grid-area: vs; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #15120a; font-weight: 900; font-size: .85rem; }
.vs-row__meta { grid-area: meta; display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; }
.vs-row__q { font-weight: 700; color: var(--accent); }
.vs-row__total { color: var(--muted); }
.entry-vs { margin-top: 14px; }
.entry-vs__title { margin: 0 0 6px; font-size: .85rem; font-weight: 700; color: var(--text-2); }

/* ========== シェアボタン ========== */
.share-box { margin: 14px 0 0; }
.share-box__label { margin: 0 0 6px; font-size: .78rem; font-weight: 700; color: var(--text-2); }
.share-box__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.share-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: .8rem; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; }
.share-btn:hover { text-decoration: none; border-color: var(--accent); }
.share-btn--x { background: #000; border-color: #444; color: #fff; }
.share-btn--line { background: #06c755; border-color: #06c755; color: #fff; }
.share-btn--copy.is-done { border-color: var(--accent); color: var(--accent); }
.entry-hero .share-box { max-width: 300px; margin-left: auto; margin-right: auto; }
.col-summary .share-box { display: flex; flex-direction: column; align-items: center; }
.feature .share-box { margin: 24px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* ========== ナゾ相関図 ========== */
.is-cat-person { --cat: var(--accent); }
.szu-t-fight { color: #e06c75; } .szu-t-bond { color: #d4ad57; } .szu-t-kin { color: #b98ce0; } .szu-t-origin { color: #7fd1c1; } .szu-t-rel { color: var(--muted); }
.szu-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.szu-bar__sp { flex: 1; }
.szu-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.szu-chip i { width: 18px; height: 3px; border-radius: 2px; background: currentColor; }
.szu-chip[aria-pressed="false"] { opacity: .4; }
.szu-stage { position: relative; background: radial-gradient(ellipse at 50% 40%, #1a1f2b 0%, var(--bg-2) 70%); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; height: min(72vh, 680px); min-height: 420px; touch-action: none; }
.szu-stage svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
.szu-stage svg.is-dragging { cursor: grabbing; }
.szu-note { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.szu-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.szu-zoom button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: rgba(22, 26, 35, .9); color: var(--text); font-size: 18px; cursor: pointer; }
.szu-cluster { fill: rgba(255, 255, 255, .025); stroke: rgba(255, 255, 255, .07); stroke-dasharray: 4 6; }
.szu-cluster-label { fill: var(--muted); font-size: 13px; letter-spacing: .2em; }
.szu-edge path { fill: none; stroke-width: 2.2; transition: opacity .3s, stroke-width .3s; }
.szu-lbl rect { fill: #0f1219; stroke-width: 1; }
.szu-lbl text { fill: var(--text-2); }
.szu-edge--fight path { stroke: #e06c75; } .szu-edge--fight rect { stroke: #e06c75; }
.szu-edge--bond path { stroke: #d4ad57; } .szu-edge--bond rect { stroke: #d4ad57; }
.szu-edge--origin path { stroke: #7fd1c1; stroke-dasharray: 6 5; } .szu-edge--origin rect { stroke: #7fd1c1; }
.szu-edge--kin path { stroke: #b98ce0; stroke-dasharray: 2 5; stroke-linecap: round; } .szu-edge--kin rect { stroke: #b98ce0; }
.szu-edge--rel path { stroke: #5d6576; } .szu-edge--rel rect { stroke: #5d6576; }
.szu-edge.is-hidden { display: none; }
.szu-edge.is-hl path { stroke-width: 4; }
.szu-node { cursor: pointer; transition: opacity .3s; outline: none; }
.szu-bg { fill: var(--surface); }
.szu-ring { fill: none; stroke: var(--cat); stroke-width: 3; transition: stroke-width .2s; }
.szu-node--person .szu-ring { stroke-dasharray: 5 4; }
.szu-node--thing .szu-ring { stroke: var(--c-default); }
.szu-glyph { font-family: var(--font-serif); font-weight: 700; fill: var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.szu-name { font-size: 15px; font-weight: 700; fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--bg-2); stroke-width: 5px; pointer-events: none; }
.szu-sub { font-size: 11px; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--bg-2); stroke-width: 4px; pointer-events: none; }
.is-portrait .szu-name { font-size: 21px; }
.is-portrait .szu-sub { font-size: 14px; }
.szu-node:hover .szu-ring, .szu-node:focus-visible .szu-ring, .szu-node.is-active .szu-ring { stroke-width: 5; }
.szu-halo { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.szu-node.is-active .szu-halo { opacity: 1; animation: szu-pulse 1.6s ease-out infinite; }
@keyframes szu-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.szu-node.is-dim, .szu-edge.is-dim { opacity: .12; }
.szu-panel { position: absolute; right: 12px; top: 56px; width: min(320px, calc(100% - 24px)); max-height: calc(100% - 68px); overflow: auto; background: rgba(17, 20, 27, .96); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); }
.szu-panel__close { position: absolute; right: 8px; top: 4px; background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; }
.szu-panel__cat { font-size: 12px; font-weight: 700; color: var(--cat); }
.szu-panel__name { font-family: var(--font-serif); font-size: 22px; margin: 0; }
.szu-panel__sum { font-size: 14px; color: var(--text-2); margin: 6px 0 10px; }
.szu-panel__rels { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.szu-panel__rels li { padding: 4px 0; border-top: 1px solid var(--border); }
.szu-panel__rels b { font-weight: 400; }
.szu-panel__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.szu-story { position: absolute; left: 12px; bottom: 12px; width: min(420px, calc(100% - 24px)); background: rgba(17, 20, 27, .94); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 12px; box-shadow: var(--shadow); }
.szu-story__step { font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.szu-story__title { font-family: var(--font-serif); font-size: 19px; margin: 2px 0 4px; }
.szu-story__text { font-size: 14px; color: var(--text-2); margin: 0 0 10px; }
.szu-story__nav { display: flex; align-items: center; gap: 8px; }
.szu-story__dots { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.szu-story__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.szu-story__dots span.on { background: var(--accent); }
.szu-panel[hidden], .szu-story[hidden], .szu-panel [hidden] { display: none; }
@media (max-width: 599px) {
	.szu-stage { height: 78vh; }
	.szu-chip { padding: 2px 10px; font-size: 12px; }
	.szu-bar__sp { flex-basis: 100%; height: 0; }
	.szu-story-start { width: 100%; }
	.szu-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 60%; border-radius: 14px 14px 0 0; }
	.szu-story { left: 8px; right: 8px; bottom: 8px; width: auto; }
}
.szu-draft { font-size: 13px; color: var(--danger); border: 1px solid var(--danger); border-radius: 6px; padding: 0 6px; vertical-align: middle; }
.szu-rel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.szu-rel-list li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 14px; }
.szu-rel-list small { display: block; color: var(--muted); margin-top: 2px; }
.szu-arrow { display: inline-block; font-size: 12px; padding: 0 8px; border-radius: 999px; margin: 0 6px; border: 1px solid; line-height: 1.7; }
.szu-story-list { margin: 0; padding-left: 1.4em; }
.szu-story-list li { margin-bottom: 10px; }
.szu-story-list p { margin: 2px 0 0; color: var(--text-2); font-size: 14px; }
.szu-chips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.szu-chips-list a { display: inline-block; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 14px; font-size: 14px; text-decoration: none; }
/* 一覧 */
.szu-themes { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.szu-theme-card { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; }
.szu-theme-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.szu-theme-card__faces { display: flex; margin-bottom: 4px; }
.szu-face { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--cat); background: var(--surface-2); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 22px; margin-right: -12px; box-shadow: 0 0 0 3px var(--surface); }
.szu-face img { width: 100%; height: 100%; object-fit: cover; }
.szu-theme-card__title { font-family: var(--font-serif); font-size: 21px; font-weight: 700; }
.szu-theme-card__lead { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.szu-theme-card__meta { font-size: 12px; color: var(--muted); margin-top: auto; }
/* 図鑑ページの「つながり」 */
.entry-tsunagari { margin: 40px 0; }
.szu-ego { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-top: 8px; }
.szu-ego.is-loading { opacity: .6; }
.szu-ego__trail { font-size: 13px; color: var(--muted); min-height: 1.8em; }
.szu-ego__trail button { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.szu-ego svg { width: 100%; height: auto; aspect-ratio: 600 / 420; max-height: 440px; display: block; opacity: 0; transition: opacity .35s; }
.szu-ego svg.is-in { opacity: 1; }
.szu-ego .szu-name, .szu-ego .szu-sub { stroke: var(--surface); }
.szu-ego .szu-node.is-center .szu-ring { stroke-width: 5; }
.szu-ego .szu-node:not(.is-link):not(.is-center) { cursor: default; }
.szu-ego__info { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.szu-ego__name { font-family: var(--font-serif); font-size: 18px; font-weight: 700; margin: 0; }
.szu-ego__cat { font-family: var(--font); font-size: 12px; color: var(--cat); margin-right: 8px; }
.szu-ego__sum { font-size: 14px; color: var(--text-2); margin: 4px 0 8px; }
.szu-ego__list { margin-top: 8px; font-size: 14px; }
.szu-ego__list summary { cursor: pointer; color: var(--muted); }
.szu-ego__list ul { margin: 6px 0 0; padding-left: 1.2em; }
.szu-in-themes { font-size: 14px; margin-top: 10px; }


/* ========== 英語版 ========== */
.lang-switch { flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.lang-switch:hover { border-color: var(--accent); color: var(--text); }
.en-ja-note { font-size: 13px; color: var(--muted); margin-top: 12px; }
.en-about { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.en-about p { color: var(--text-2); }
.en-cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pref-chip.is-current { border-color: var(--accent); color: var(--accent); }

/* 検証記事への読者投票 */
.kensho-votes { margin: 2.5rem 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.kensho-votes__items { display: grid; gap: .75rem; margin: 1rem 0; }
.kensho-votes__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .8rem; border: 1px solid var(--border); border-radius: 8px; }
.kensho-votes__row strong { flex: 1 1 180px; }
.kensho-votes__row button:disabled { opacity: .65; cursor: default; }
.kensho-votes__auth { margin: 1rem 0; }
.kensho-votes__message { min-height: 1.5em; }

/* 検証室の読者投票ランキング */
.kensho-ranking { margin-top: 48px; }
.kensho-ranking__entry { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: center; }
.kensho-ranking__entry img { width: 60px; height: 45px; object-fit: cover; border-radius: 4px; }
.kensho-ranking__entry span { overflow-wrap: anywhere; }
.kensho-ranking__tile .ranking-tile__list { gap: 12px; }
@media (max-width: 480px) { .kensho-ranking__entry { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; } .kensho-ranking__entry img { width: 48px; height: 36px; } }

.kensho-ranking { scroll-margin-top: 180px; }
.kensho-ranking__entry { white-space: normal; text-overflow: clip; }

/* ご当地ナゾ巡り */

.tour-intro{padding:24px;border-left:4px solid #d6af51;background:#171d28;border-radius:12px;margin:24px 0}.tour-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.tour-card,.tour-place{padding:24px;background:#171d28;border:1px solid #30394a;border-radius:14px}.tour-card h2{margin:12px 0;font-size:1.3rem}.tour-tag{color:#d6af51;font-weight:bold;letter-spacing:.08em}.tour-place{margin:16px 0}.tour-place h3{margin-top:0}.tour-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.tour-links a{padding:9px 16px;border:1px solid #d6af51;border-radius:25px;text-decoration:none}.tour-note{padding:16px;background:#202533;border-radius:8px;font-size:.92rem}.tour-nav{display:flex;gap:16px;flex-wrap:wrap}.tour-map-list li{margin:12px 0}@media(max-width:640px){.tour-grid{grid-template-columns:1fr}.tour-card,.tour-place,.tour-intro{padding:18px}.tour-links a{font-size:.9rem}}

/* ご当地ナゾ巡りのメイン画像：スマートフォンでも全体を表示 */
.tour-hero{margin:24px 0}.tour-hero img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid #30394a}.tour-hero figcaption{margin-top:8px;color:#a8b4c9;font-size:.8rem}


/* 地域パネルのイメージ画像 */
.tour-card__art{display:block;margin:0 0 18px;border-radius:10px;overflow:hidden;background:#10141d}.tour-card__art img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .2s}.tour-card__art:hover img{transform:scale(1.025)}.tour-card__art:focus-visible{outline:3px solid #d6af51;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tour-card__art img{transition:none}.tour-card__art:hover img{transform:none}}


/* Category page banners */
.category-banner{margin:24px 0;width:100%}.category-banner img{display:block;width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;border-radius:14px;border:1px solid var(--border,#30394a)}.category-banner figcaption{margin-top:6px;font-size:.75rem;color:var(--text-2,#a8b4c9)}

/* トップタイトル画像：文字を切らず全体を表示 */
.hero__title--image{line-height:0;margin:0 auto 24px;max-width:560px}.hero__title--image img{display:block;width:100%;height:auto;border-radius:14px}
@media (min-width:800px){.hero__title--image{max-width:none}}



/* 発見済ラベルは名前の右側に置き、ステータスの数値を避ける。 */
.nazo-card__body { position: relative; }
.nazo-card.is-found .nazo-card__body::after { top: 8px; right: 10px; bottom: auto; }
.nazo-card.is-found .nazo-card__name, .nazo-card.is-found .nazo-card__kana { padding-right: 60px; }

/* 一覧はPCで右上、スマホでは96px幅の画像の下へ表示。 */
.nazo-item.is-found::after { top: 12px; right: 12px; bottom: auto; }
.nazo-item.is-found .nazo-item__meta { padding-right: 60px; }
@media (max-width: 599px) {
 .nazo-item.is-found::after { top: 96px; left: 12px; right: auto; }
 .nazo-item.is-found .nazo-item__meta { padding-right: 0; }
 .nazo-item.is-found { min-height: 130px; }
}

/* ========== ナゾのデータ（/data/） ========== */
.data-updated { color: var(--muted); font-size: .8rem; margin: 8px 0 0; }
.data-section { margin: 32px 0; }
.data-section h2 { font-size: 1.25rem; margin: 0 0 12px; padding-left: 10px; border-left: 4px solid var(--accent); }
.data-section h3 { font-size: 1rem; margin: 20px 0 8px; color: var(--text-2); }
.data-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.data-summary li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; text-align: center; }
.data-summary strong { display: block; font-size: 1.6rem; color: var(--accent); line-height: 1.3; }
.data-summary span { font-size: .8rem; color: var(--text-2); }
.data-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 24px 0; padding: 0; list-style: none; }
.data-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .2s; }
.data-card a:hover { border-color: var(--accent); }
.data-card__name { font-weight: 700; font-size: 1.05rem; }
.data-card__point { color: var(--accent); font-size: .9rem; }
.data-card__lead { color: var(--text-2); font-size: .82rem; }
.data-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.data-bar { display: grid; grid-template-columns: minmax(84px, 9em) 1fr auto; align-items: center; gap: 10px; font-size: .9rem; }
.data-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.data-bar__label a { color: var(--text); }
.data-bar__track { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.data-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--cat, var(--accent)) 55%, #000), var(--cat, var(--accent))); border-radius: 7px; }
.data-bar:not([class*="is-cat-"]) .data-bar__fill { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #000), var(--accent)); }
.data-bar__value { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.data-bars--compact .data-bar { grid-template-columns: 5.5em 1fr auto; font-size: .82rem; }
.data-bars--compact .data-bar__label { color: var(--accent); letter-spacing: -1px; }
.data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.data-grid__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.data-grid__item h3 { margin: 0 0 8px; }
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.data-table th, .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.data-table thead th { background: var(--surface-2); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.data-table tbody th { white-space: nowrap; color: var(--text); }
.data-table--matrix td { text-align: center; background: color-mix(in srgb, var(--cat) calc(var(--v, 0) * 55%), transparent); font-variant-numeric: tabular-nums; }
.data-table--matrix thead th { text-align: center; }
.data-th-cat { color: var(--cat); }
.data-zero { color: var(--muted); }
.data-total, .data-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.is-high { color: var(--accent); font-weight: 700; }
.data-table td.is-low { color: var(--accent-2); }
.data-chip { display: inline-block; margin: 0 4px 4px 0; padding: 0 8px; border-radius: 999px; font-size: .78rem; background: color-mix(in srgb, var(--cat, var(--accent)) 18%, transparent); color: var(--cat, var(--accent)); border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 45%, transparent); white-space: nowrap; }
.data-insights { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.data-insights--grid { list-style: none; padding: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.data-examples { display: block; color: var(--muted); font-size: .85rem; }
.data-examples a { color: var(--cat, var(--text-2)); }
.data-examples--list { line-height: 2; }
.data-commentary { margin-top: 16px; padding: 14px 16px; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.data-commentary p { margin: 0 0 10px; }
.data-commentary p:last-child { margin-bottom: 0; }
.data-note-small { color: var(--muted); font-size: .8rem; margin: 8px 0 0; }
.data-callout { margin-top: 16px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--border)); border-radius: var(--radius-sm); }
.data-callout h3 { margin-top: 0; }
.data-more { margin: 24px 0; text-align: right; }
.data-others ul { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0; list-style: none; }
@media (max-width: 600px) {
	.data-bar { grid-template-columns: 6.5em 1fr auto; font-size: .82rem; gap: 6px; }
	.data-summary strong { font-size: 1.3rem; }
}