/* スターターテンプレ 基本スタイル — 「ミニマル・洗練」デザインシステム
   汎用の配色/余白トークン(:root)+ 再利用コンポーネント群。
   クラス名は極力汎用。各PJはこれを土台に style.css を拡張する。 */

:root {
	/* ベースカラー: ほぼ白基調。ベタ塗り一色を避け、余白と極薄トーンで階層を作る */
	--color-bg: #ffffff;
	--color-bg-subtle: #f7f7f6;
	--color-surface: #ffffff;
	--color-text: #2b2b2b;
	--color-text-muted: #8a8a86;
	--color-hairline: rgba(0,0,0,.08);
	--color-hairline-strong: rgba(0,0,0,.14);
	--color-border: var(--color-hairline); /* no=11 Step0: 未定義だった枠線トークンを正規化(諸説枠/指数区切り/ハブ下線/書籍枠の8箇所復旧) */

	/* アクセントは基本1色に絞る(改善提案#01=藍/インディゴで確定 2026-07-12) */
	--color-accent: #2A4B8D;       /* 深藍。リンク/ボタン/アクティブ/ランク等 機能色すべて */
	--color-accent-dark: #1B315E;  /* hover/押下・見出し補助 */
	--color-accent-tint: #EEF1F9;  /* 薄トーン背景 */
	--color-gold: #B7892F;         /* 金。非機能の差し色のみ(ロゴ細部・top3メダル)。リンク/本文/ボタンには使わない */
	--color-danger: #c0392b;

	/* 見出し用の明朝スタック(Webフォント不使用=LCP/CWV配慮)。世界観は見出しと余白で出す */
	--font-serif: "Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
	--font-gothic: "Hiragino Kaku Gothic ProN","Meiryo",sans-serif;

	/* 余白・角丸(控えめ) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 20px;
	--space-5: 32px;
	--space-6: 48px;
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-pill: 999px;

	--shadow-card: none;
	--content-max-width: 960px;
}

* { box-sizing: border-box; }

body {
	font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	margin: 0;
	padding: 0;
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0 0 var(--space-3) 0; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: .01em; margin-bottom: var(--space-4); }
h3 { font-size: 16px; font-weight: 700; margin-top: var(--space-5); margin-bottom: var(--space-3); }
p { color: var(--color-text); }

/* 見出しの世界観づくり: 公開ページの大見出し(h2/.hero_title)と記事セクション見出し(.content直下h3)のみ明朝。
   本文・数値・UIラベル・コンパクトなコンポーネント見出し・管理画面はゴシック維持(可読性/小サイズ潰れ回避)。 */
h2, .hero_title, .content > h3 { font-family: var(--font-serif); letter-spacing: .02em; }
.kanri_admin h2, .kanri_admin .content > h3 { font-family: var(--font-gothic); letter-spacing: normal; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ヘッダー: ベタ塗りではなく1本のヘアラインで区切る */
.site_header {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-hairline);
	padding: var(--space-3) var(--space-5);
	position: relative;
}
.site_header h1 { font-size: 18px; font-weight: 700; margin: 0 0 6px 0; letter-spacing: .01em; }
.site_header .kanri_login_info { position: absolute; top: var(--space-3); right: var(--space-5); margin: 0; font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.3; }
@media (max-width: 600px) {
	.site_header .kanri_login_info { position: static; text-align: right; }
}
.site_header h1 a { color: var(--color-text); }
.site_logo { display: inline-flex; align-items: center; gap: 8px; }
.site_logo:hover { text-decoration: none; }
.site_logo_mark { width: 32px; height: 32px; flex-shrink: 0; display: block; }
.site_logo_text { font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.site_header nav ul.navi_base { display: flex; gap: var(--space-4); }
.site_header nav ul.navi_base a { color: var(--color-text-muted); font-size: 13px; }
.site_header nav ul.navi_base a:hover { color: var(--color-accent); text-decoration: none; }

/* 管理画面ヘッダーのドロップダウン(#g_navi内、マスタ関連)。
   #g_naviのulは公開ヘッダと同じ nav ul.navi_base セレクタで横並び・トンマナが揃うため、
   ここではac_menu/ac_listの開閉挙動のみ追加定義する */
.site_header #g_navi ul.navi_base { flex-wrap: wrap; }
.site_header #g_navi ul.navi_base > li { position: relative; }
.site_header #g_navi .ac_menu { cursor: pointer; }
.site_header #g_navi .ac_list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 160px;
	background: var(--color-surface);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
	padding: var(--space-2) 0;
	z-index: 20;
}
.site_header #g_navi ul.navi_base > li:hover > .ac_list { display: block; }
.site_header #g_navi .ac_list ul { display: flex; flex-direction: column; }
.site_header #g_navi .ac_list li { padding: 0; }
.site_header #g_navi .ac_list a { display: block; padding: var(--space-2) var(--space-3); font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.site_header #g_navi .ac_list a:hover { background: var(--color-bg-subtle); color: var(--color-accent); text-decoration: none; }

/* 管理画面: リスト表示テーブルの詰め(公開ページはtable_listクラスを使用しないため管理画面のみに影響) */
.content table.table_list th, .content table.table_list td { padding: 5px 8px; border: 1px solid var(--color-hairline); }
.content table.table_list th { font-size: 12px; white-space: nowrap; font-weight: 400; background: var(--color-accent); color: #fff; }
.content table.table_list td { font-size: 11px; line-height: 15px; }

.content { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-6) var(--space-5); }

/* 管理画面共通レイアウト(#g_naviを持つヘッダー=管理画面のみ。公開サイトのcontentは960px中央寄せのまま変更しない) */
.kanri_admin .content { max-width: 1280px; margin: 0; padding-top: var(--space-3); }
.kanri_admin .content textarea { width: 100%; box-sizing: border-box; max-width: 1000px; }

/* 管理画面: 入力/編集フォームのラベル幅統一 */
.kanri_form > div { margin-bottom: 6px; }
.kanri_form label { display: inline-block; width: 160px; vertical-align: top; font-weight: 600; }

.pankuzu ul { display: flex; gap: 6px; font-size: 12px; color: var(--color-text-muted); flex-wrap: wrap; margin-bottom: var(--space-5); }
.pankuzu li:not(:last-child)::after { content: "›"; margin-left: 6px; }
/* no=(kaizen#4): パンくず視覚統一。.breadcrumb_min(公開12ページで使用・従来CSS未定義=無スタイル)に
   .pankuzu相当の体裁を付与。マークアップ(inline<nav>＋＞区切り)は無改変=回帰ほぼ0。区切り記号＞は
   マークアップ内の既存テキストをそのまま使う(pankuzuの›とは字形が異なるが両者ともパンくず区切り)。 */
.breadcrumb_min { font-size: 12px; color: var(--color-text-muted); margin-bottom: var(--space-5); line-height: 1.6; }
.breadcrumb_min a { color: var(--color-text-muted); }
.breadcrumb_min a:hover { color: var(--color-text); text-decoration: underline; }

/* ============================
   トップページ: ヒーロー(比較を主役化)
   ============================ */
.hero {
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-hairline);
}
.hero_title { font-size: 28px; font-weight: 700; letter-spacing: .01em; margin-bottom: var(--space-2); }
.hero_lead { color: var(--color-text-muted); font-size: 14px; margin-bottom: var(--space-4); max-width: 46em; }
.hero_compare_form { margin-top: var(--space-4); }

/* 競合対策: 中立性訴求(講座を売らない/データのみ基準) */
.neutral_note { display: inline-block; font-size: 12px; font-weight: 600; color: var(--color-accent-dark); background: var(--color-accent-tint); border-radius: var(--radius-pill); padding: 4px 12px; margin-bottom: var(--space-4); }
.neutral_note_small { font-size: 12px; color: var(--color-text-muted); margin-bottom: var(--space-3); }

/* 競合対策: データ出典・更新日の軽量注記 */
.data_source_note { font-size: 11px; color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-4); }

/* ============================
   分野バッジ・分野アイコン
   控えめな線+アイコンで識別する(ベタ塗りは避ける)
   ※ 分野=偉人の分野(mst_meisho kbn=2)。控えめな線+アイコンで識別する
   ============================ */
.bunya_icon { color: var(--bunya-color, var(--color-accent)); flex-shrink: 0; }

.bunya_badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 6px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
	color: var(--bunya-color, var(--color-text-muted));
	background: transparent;
	border: 1px solid var(--color-hairline-strong);
	line-height: 1.6;
}
a.bunya_badge:hover { text-decoration: none; border-color: var(--bunya-color, var(--color-hairline-strong)); }
.bunya_badge .bunya_icon { width: 18px; height: 18px; color: var(--bunya-color, var(--color-accent)); }

/* 種別バッジ: 色+縁取り形状の両方で区別(アクセシビリティ配慮)。ヘアライン基調 */
.shubetsu_badge {
	display: inline-block;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 600;
	background: transparent;
	color: var(--color-text-muted);
}
.shubetsu_badge.shubetsu-1 { border: 1px solid var(--color-text); border-radius: var(--radius-sm); color: var(--color-text); }
.shubetsu_badge.shubetsu-2 { border: 1px dashed var(--color-text-muted); border-radius: var(--radius-lg); }
.shubetsu_badge.shubetsu-3 { border: 1px dotted var(--color-text-muted); border-radius: var(--radius-pill); }

/* ============================
   偉人カード グリッド(No.77 一覧ビジュアル刷新 Phase1)
   OGP画像をビジュアルにした画像カードのレスポンシブグリッド
   ============================ */
.ijin_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--space-4);
	margin: var(--space-4) 0 var(--space-5);
}
.ijin_card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-md);
	overflow: hidden;
	color: var(--color-text);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ijin_card:hover {
	text-decoration: none;
	border-color: var(--color-hairline-strong);
	box-shadow: 0 4px 14px rgba(0,0,0,.10);
	transform: translateY(-2px);
}
.ijin_card_thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-bg-subtle);
}
/* 肖像サムネが無い人物のフォールバック: 種別カラータイル+頭文字モノグラム */
.ijin_card_thumb.is_tile { display: flex; align-items: center; justify-content: center; }
.ijin_tile_mono {
	font-family: "Yu Mincho", "YuMincho", serif;
	font-size: 3rem;
	font-weight: 700;
	color: rgba(255,255,255,.60);
	line-height: 1;
	user-select: none;
}
.ijin_tile-1 { background: linear-gradient(135deg, #B5852B, #6F4E14); } /* 君主=金 */
.ijin_tile-2 { background: linear-gradient(135deg, #7E5A93, #47325A); } /* 文人=紫 */
.ijin_tile-3 { background: linear-gradient(135deg, #2E8390, #17454E); } /* 科学者=青緑 */
.ijin_tile-4 { background: linear-gradient(135deg, #3D6BA6, #223F63); } /* 思想家=藍(UI藍#2A4B8Dと分離・縹寄り) */
.ijin_tile-5 { background: linear-gradient(135deg, #B14B37, #632318); } /* 武将=朱 */
.ijin_tile-6 { background: linear-gradient(135deg, #B85670, #6A2C3C); } /* 芸術家=薔薇(紅梅と分離・深赤薔薇) */
.ijin_tile-7 { background: linear-gradient(135deg, #D585A5, #7A3F57); } /* 后妃・姫=紅梅(薔薇より高明度の淡紅) */
.ijin_card_thumb img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	display: block;
}
/* no=(kaizen#1): 人物詳細本文の肖像。カードのタイル資産(ijin_tile-N/ijin_tile_mono)を流用。
   float回避の左寄せブロック(後続のバッジ/summary_card_gridと干渉しない)。first-view=LCP候補。 */
.ijin_detail_portrait {
	width: 200px;
	max-width: 50%;
	aspect-ratio: 1 / 1;
	margin: 0 0 var(--space-4);
	border-radius: 8px;
	overflow: hidden;
}
/* ★背景は肖像あり(プレースホルダ)のみ。is_tile時に指定すると .ijin_tile-N(前方定義・同詳細度)を
   ソース順で上書きしグラデが消える(qa差し戻し)。:not(.is_tile)で順序非依存にする。 */
.ijin_detail_portrait:not(.is_tile) { background: var(--color-bg-subtle); }
.ijin_detail_portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ijin_detail_portrait.is_tile { display: flex; align-items: center; justify-content: center; }
@media (max-width: 600px) { .ijin_detail_portrait { width: 160px; max-width: 45%; } }
/* 画像左上のオーバーレイ種別バッジ。画像上でも読めるよう半透明サーフェスを敷く */
.ijin_card_badge {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	display: inline-block;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(255,255,255,.90);
	color: var(--color-text-muted);
	border: 1px solid var(--color-hairline-strong);
	border-radius: var(--radius-sm);
	backdrop-filter: saturate(1.2);
}
.ijin_card_badge.shubetsu-1 { border-color: var(--color-text); color: var(--color-text); }
.ijin_card_badge.shubetsu-2 { border-style: dashed; border-radius: var(--radius-lg); }
.ijin_card_badge.shubetsu-3 { border-style: dotted; border-radius: var(--radius-pill); }
/* no=11 Batch2: 種別4-7もバッジ形状を定義(色に依存せず縁形状+テキストで識別=a11y。7分類体系と整合) */
.ijin_card_badge.shubetsu-4 { border-style: double; border-radius: var(--radius-sm); }
.ijin_card_badge.shubetsu-5 { border-style: solid; border-radius: var(--radius-lg); }
.ijin_card_badge.shubetsu-6 { border-style: dashed; border-radius: var(--radius-pill); }
.ijin_card_badge.shubetsu-7 { border-style: dotted; border-radius: var(--radius-lg); }
.ijin_card_body {
	flex: 1;
	padding: var(--space-3);
}
.ijin_card_body h3 {
	margin: 0 0 var(--space-1);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	/* no=11 Batch2: タイトル2行clamp+2行分の高さ確保=カード高さ揃えの根治 */
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ijin_card_lead {
	margin: 0;
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================
   トップページ: 分野カード
   ============================ */
.bunya_card_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1px;
	background: var(--color-hairline);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.bunya_card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-surface);
	padding: var(--space-5) var(--space-2);
	text-align: center;
	color: var(--color-text);
	transition: background-color .15s ease;
}
.bunya_card:hover { text-decoration: none; background: var(--color-bg-subtle); }
.bunya_card .bunya_icon { width: 40px; height: 40px; color: var(--bunya-color, var(--color-accent)); }
.bunya_card_name { font-size: 12px; font-weight: 600; color: var(--color-text); }

.recent_list_item {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-hairline);
	padding: var(--space-4) 2px;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.recent_list_item:last-child { border-bottom: none; }

/* ============================
   一覧(list_item)
   ============================ */
.filter_form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: end;
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
}
.filter_form_group { display: flex; flex-direction: column; gap: 4px; }
.filter_form_group label { font-size: 11px; color: var(--color-text-muted); }
.filter_form select { padding: 6px 8px; border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }

/* 50音インデックス */
.kana_index { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-4); }
.kana_index_item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-hairline-strong);
	color: var(--color-text-muted);
	font-size: 12px;
}
.kana_index_item:hover { text-decoration: none; border-color: var(--color-accent); color: var(--color-accent); }
.kana_index_item.is_active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.kana_index_item.is_active .kana_index_count { color: rgba(255,255,255,.8); }
.kana_index_item.is_disabled { color: var(--color-hairline-strong); pointer-events: none; }
.kana_index_count { font-size: 10px; color: var(--color-text-muted); }

.list_item {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-hairline);
	padding: var(--space-4) var(--space-1);
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}
.list_item_check { padding-top: 4px; }
.list_item_check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-accent); }
.list_item_body { flex: 1; min-width: 0; }
.list_item_head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px; }
.list_item h3 { margin: 4px 0; font-size: 15px; font-weight: 700; }
.list_item_meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 12px; color: var(--color-text-muted); align-items: center; }

/* 割合バー: 細く単色で抑えたトーン(諸説の割合表示などに流用可) */
.rate_bar { display: inline-flex; align-items: center; gap: 6px; }
.rate_bar_outer { display: inline-block; width: 64px; height: 4px; background: var(--color-hairline-strong); border-radius: var(--radius-pill); overflow: hidden; }
.rate_bar_inner { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); }
.rate_bar_num { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.rate_na { color: var(--color-text-muted); }

/* 比較チェックボックス用フローティングバー: 白ベース+アクセントはボタンのみ */
.compare_float_bar {
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--color-surface);
	color: var(--color-text);
	border-top: 1px solid var(--color-hairline-strong);
	padding: var(--space-3) var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: var(--space-5) calc(var(--space-5) * -1) calc(var(--space-6) * -1);
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: transform .2s ease, opacity .2s ease;
	box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.compare_float_bar.is_active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.compare_float_bar_text { font-size: 13px; color: var(--color-text-muted); }
.compare_float_bar .btn_compare {
	background: var(--color-accent);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	padding: 8px 18px;
	font-weight: 600;
	cursor: pointer;
}
.compare_float_bar .btn_compare:disabled { opacity: .4; cursor: not-allowed; }

/* インフィード広告枠(AdSense準備。レイアウト確保のみ) */
.ad_slot {
	background: var(--color-bg-subtle);
	border: 1px dashed var(--color-hairline-strong);
	border-radius: var(--radius-md);
	min-height: 90px;
	margin: var(--space-5) 0; /* no=11 Batch2: 参加UI等との距離を32pxへ(誤クリック防止・no=80配置設計と整合) */
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	font-size: 11px;
}
.ad_slot::after { content: "広告枠"; }

/* ============================
   詳細ページ
   ============================ */

/* 要約カード(時代/王朝/在位・分野/生没年などを一目で) */
.summary_card_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--color-hairline);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: var(--space-4) 0 var(--space-3);
}
.summary_card {
	background: var(--color-surface);
	padding: var(--space-4) var(--space-3);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.summary_card_label { font-size: 11px; color: var(--color-text-muted); }
.summary_card_value { font-size: 20px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.summary_ranking_link { font-size: 12px; margin-bottom: var(--space-5); }
.score_star { color: var(--color-accent); letter-spacing: 1px; opacity: .8; }

.hikaku_table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.hikaku_table th, .hikaku_table td { padding: 10px 14px; border-bottom: 1px solid var(--color-hairline); text-align: left; font-weight: 400; }
.hikaku_table th { color: var(--color-text-muted); font-size: 12px; font-weight: 600; width: 30%; white-space: nowrap; }
.hikaku_table td.hikaku_best { font-weight: 700; color: var(--color-accent); }

.related_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--color-hairline); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); overflow: hidden; }
.related_card {
	position: relative;
	display: block;
	background: var(--color-surface);
	padding: var(--space-4);
	color: var(--color-text);
	transition: background-color .15s ease;
}
.related_card:hover { text-decoration: none; background: var(--color-bg-subtle); }
.related_card .vs_badge {
	display: inline-block;
	color: var(--color-accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 4px;
}
.related_card_kanren { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.related_card_name { font-weight: 700; }
/* 回遊(P-a): related見出しの「◯◯の偉人をすべて見る」facetハブ導線。h3内で控えめなインラインリンク。 */
.see_all_link { font-size: 13px; font-weight: 400; color: var(--color-text-muted); margin-left: 8px; white-space: nowrap; }
.see_all_link:hover { color: var(--color-text); text-decoration: underline; }

/* ロードマップCTA枠(企画は未実装、枠のみ先行設置) */
.roadmap_cta {
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin: var(--space-4) 0;
}
.roadmap_cta_label {
	display: inline-block;
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	margin-bottom: 8px;
}
.roadmap_cta_text { margin: 0; font-size: 13px; color: var(--color-text-muted); }

/* (旧テンプレ由来の未使用ボックスは撤去。偉人の指数methodologyは .shisu_method を使う) */

/* よくある質問(詳細ページ) */
.faq_list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq_item {
	background: var(--color-surface);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
}
.faq_q { margin: 0 0 var(--space-2); font-size: 14px; font-weight: 700; }
.faq_q::before { content: "Q. "; color: var(--color-accent); }
.faq_a { margin: 0; font-size: 13px; line-height: 1.7; color: var(--color-text); }
.faq_a::before { content: "A. "; color: var(--color-text-muted); font-weight: 700; }

/* ============================
   比較(hikaku)
   ============================ */
.hikaku_select_form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); background: var(--color-bg-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.hikaku_select_form_group { display: flex; flex-direction: column; gap: 4px; }
.hikaku_select_form_group label { font-size: 11px; color: var(--color-text-muted); }
.hikaku_select_form select { padding: 6px 8px; border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); min-width: 220px; background: var(--color-surface); color: var(--color-text); }
/* 分野→項目の連動2段セレクト(hikaku.php)。ジャンルselectは項目selectより一段小さく・控えめに */
.hikaku_select_pair { gap: 4px; }
.hikaku_select_pair select:first-of-type { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }

.hikaku_recirculate_cta {
	margin-top: var(--space-5);
	text-align: center;
	padding: var(--space-5);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
}
.hikaku_recirculate_cta p { color: var(--color-text-muted); font-size: 13px; }

/* 汎用ボタン(既存.btn_compare以外、テンプレ内btn btn-primary等の見た目調整) */
.btn.btn-primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
}
/* セカンダリボタン(アクセント枠線・トップのランキング導線等) */
.btn.btn-secondary {
	background: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.btn.btn-secondary:hover { background: var(--color-accent-tint); color: var(--color-accent-dark); }
.hero_actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================
   お問い合わせフォーム
   ============================ */
.contact_form { max-width: 560px; display: flex; flex-direction: column; gap: var(--space-4); }
.contact_form_group { display: flex; flex-direction: column; gap: 4px; }
.contact_form_group label { font-size: 13px; font-weight: 600; }
.required_mark { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; color: #fff; background: var(--color-danger); border-radius: var(--radius-sm); padding: 1px 6px; vertical-align: middle; }
.contact_form input[type="text"], .contact_form input[type="email"], .contact_form textarea {
	padding: 8px 10px;
	border: 1px solid var(--color-hairline-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font-family: inherit;
	font-size: 14px;
}
.contact_form textarea { resize: vertical; }
.contact_form_honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* フッター */
.site_footer {
	text-align: center;
	padding: var(--space-6) var(--space-5);
	color: var(--color-text-muted);
	font-size: 11px;
	border-top: 1px solid var(--color-hairline);
	margin-top: var(--space-6);
}
.footer_disclaimer {
	max-width: 640px;
	margin: 0 auto 12px;
	line-height: 1.6;
}

/* ============================
   レスポンシブ
   ============================ */
@media (max-width: 600px) {
	.content { padding: var(--space-5) var(--space-4); }
	.hikaku_table { display: block; overflow-x: auto; white-space: nowrap; }
	.bunya_card_grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
	.compare_float_bar { flex-direction: column; align-items: stretch; text-align: center; }
	.site_logo_mark { width: 26px; height: 26px; }
	.site_logo_text { font-size: 16px; }
	.hero_title { font-size: 22px; }
	.summary_card_grid { grid-template-columns: repeat(2, 1fr); }
	.hikaku_select_form select { min-width: 0; width: 100%; }
	.ranking_tabs { flex-wrap: wrap; }
	.ijin_grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
}

/* ============================
   指数ランキング
   ============================ */
.ranking_tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.ranking_tab {
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-hairline-strong);
	color: var(--color-text-muted);
	font-size: 13px;
	font-weight: 600;
}
.ranking_tab:hover { text-decoration: none; border-color: var(--color-accent); color: var(--color-accent); }
.ranking_tab.is_active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.ranking_bunya_filter { margin-bottom: var(--space-5); }
.ranking_bunya_filter select { padding: 6px 8px; border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }

.ranking_list_item {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-hairline);
	padding: var(--space-4) var(--space-1);
}
.ranking_rank {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--color-hairline-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	color: var(--color-text-muted);
}
.ranking_rank.is_top3 { background: var(--color-gold); border-color: var(--color-gold); color: #fff; }
.ranking_list_item_body { flex: 1; min-width: 0; }
.ranking_list_item_body h3 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; }
.ranking_score { font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.ranking_reason { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.ranking_score_sub { font-size: 11px; color: var(--color-text-muted); font-weight: 400; margin-left: 4px; }
/* E-E-A-T(出典・最終更新・運営者)ブロック */
.ijin_eeat { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--color-hairline); }
.ijin_eeat h3 { margin-top: 0; font-size: 14px; }
.ijin_eeat .data_source_note { margin-bottom: var(--space-2); }

.ranking_subtabs { margin-top: calc(-1 * var(--space-2)); }
.ranking_subtabs .ranking_tab { font-size: 12px; padding: 4px 10px; }

/* ===== 推し(参加型Ph.1) ===== */
.oshi_box { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-4) 0; }
.oshi_btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 18px;
	border: 1px solid var(--color-accent);
	background: var(--color-bg);
	color: var(--color-accent);
	border-radius: var(--radius-pill);
	font-weight: 700; font-size: 14px; line-height: 1;
	cursor: pointer;
	transition: background .15s, color .15s, box-shadow .15s;
}
.oshi_btn:hover { background: var(--color-accent-tint); }
.oshi_btn:disabled { opacity: .6; cursor: default; }
.oshi_btn .oshi_btn_icon { font-size: 15px; }
.oshi_btn.is_oshi { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.oshi_btn.is_oshi:hover { background: var(--color-accent-dark); }
.oshi_count { font-size: 13px; color: var(--color-text-muted); }
.oshi_count strong { color: var(--color-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.oshi_honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== 多軸評価☆(参加型Ph.1) ===== */
.vote_box { display: flex; flex-direction: column; gap: 6px; margin: var(--space-3) 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-bg-subtle); border-radius: var(--radius-md); }
.vote_box_title { font-size: 12px; font-weight: 700; color: var(--color-text-muted); margin: 0 0 2px; }
.vote_row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.vote_label { font-size: 13px; font-weight: 700; color: var(--color-text); min-width: 5em; }
.vote_stars { display: inline-flex; }
.vote_star {
	background: none; border: 0; margin: 0;
	font-size: 22px; line-height: 1; cursor: pointer;
	color: var(--color-hairline-strong);
	transition: color .1s;
	/* no=11 Batch2: 最小44×44pxのタップ領域(誤タップ回避・a11y)。星グリフは22pxのまま中央寄せ */
	min-width: 44px; min-height: 44px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
}
.vote_star.is_on { color: var(--color-accent); }
.vote_star:disabled { cursor: default; }
.vote_stat { font-size: 13px; color: var(--color-text-muted); }
.vote_stat strong { color: var(--color-accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* #08 構造化「諸説」投票(設計_諸説投票_Ph1拡張.md v4)。%バーは非表示で開始 */
.setsu_box { margin: var(--space-3) 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-bg-subtle); border-radius: var(--radius-md); }
.setsu_ronten_title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.setsu_ronten_summary { font-size: 13px; color: var(--color-text-muted); margin: 0 0 var(--space-3); line-height: 1.7; }
.setsu_vote_q { font-size: 13px; font-weight: 700; margin: 0 0 var(--space-2); }
.setsu_vote_hint { font-size: 11px; font-weight: 400; color: var(--color-text-muted); margin-left: 4px; }
.setsu_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.setsu_card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--color-bg); transition: border-color .15s, background .15s; }
.setsu_card.is_picked { border-color: var(--color-accent); background: var(--color-accent-tint); }
.setsu_pick { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 2px 0; font: inherit; }
.setsu_pick:disabled { cursor: default; opacity: .7; }
.setsu_pick_mark { visibility: hidden; color: var(--color-accent); font-weight: 700; }
.setsu_card.is_picked .setsu_pick_mark { visibility: visible; }
.setsu_name { font-weight: 700; font-size: 14px; }
.setsu_badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.setsu_badge.status-1 { background: var(--color-accent); color: #fff; }
.setsu_badge.status-2 { background: var(--color-accent-tint); color: var(--color-accent-dark); }
.setsu_badge.status-3 { background: var(--color-bg-subtle); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.setsu_summary { font-size: 13px; color: var(--color-text); margin: 4px 0 2px; line-height: 1.7; }
.setsu_source { font-size: 12px; color: var(--color-text-muted); margin: 0; }
.setsu_source a { color: var(--color-text-muted); text-decoration: underline; }
.setsu_note { font-size: 12px; color: var(--color-text-muted); margin: var(--space-3) 0 0; }
.setsu_more { font-size: 13px; margin: var(--space-2) 0 0; }
.ronten_suffix { font-size: 15px; font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }
.ronten_summary { font-size: 14px; line-height: 1.8; margin: 0 0 var(--space-4); }
.ronten_backlink { font-size: 13px; margin: var(--space-4) 0 0; }

/* 指数A: 治世・活動スパン指数(差別化指数設計_no26)。ijin.php バッジ + ijin_shisu.php ランキング */
.span_badge { margin: var(--space-3) 0; }
.span_badge a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--color-accent-tint); border: 1px solid var(--color-accent); border-radius: 999px; text-decoration: none; color: var(--color-text); font-size: 13px; }
.span_badge a:hover { background: var(--color-accent); color: #fff; }
.span_badge a:hover strong { color: #fff; }
.span_badge_metric strong { color: var(--color-accent-dark); font-size: 15px; font-variant-numeric: tabular-nums; }
.span_badge_rank { color: var(--color-text-muted); }
.span_badge_rank strong { color: var(--color-accent-dark); font-variant-numeric: tabular-nums; }
.shisu_lead { font-size: 14px; line-height: 1.8; margin: 0 0 var(--space-4); }
.shisu_tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--space-4); border-bottom: 2px solid var(--color-border); }
.shisu_tab { border: 0; background: transparent; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 13px; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.shisu_tab.is_active { color: var(--color-accent); box-shadow: inset 0 -2px 0 var(--color-accent); }
.shisu_panel.is_hidden { display: none; }
.shisu_metric_note { font-size: 12px; color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.shisu_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.shisu_row { display: flex; align-items: baseline; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.shisu_rank { flex: 0 0 auto; min-width: 2.4em; text-align: right; font-weight: 700; font-size: 18px; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.shisu_rank_unit { font-size: 11px; font-weight: 400; color: var(--color-text-muted); margin-left: 1px; }
.shisu_main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shisu_name { font-weight: 700; font-size: 15px; }
.shisu_span { font-weight: 700; color: var(--color-accent-dark); font-variant-numeric: tabular-nums; }
.shisu_est { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--color-bg-subtle); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.shisu_genkyo { font-size: 12px; color: var(--color-text-muted); }
.shisu_ev { font-size: 11px; color: var(--color-text-muted); }
.shisu_method { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-subtle); border-radius: var(--radius-md); }
.shisu_method h3 { margin-top: 0; }
.shisu_method ul { margin: 0; padding-left: 1.2em; }
.shisu_method li { font-size: 13px; line-height: 1.8; margin-bottom: 6px; }

/* D2: 参加0件は生の「0」を出さず参加CTAへ(差別化ブリーフ D2・「参加型が死んで見える」是正) */
.oshi_count_cta, .vote_stat_cta { display: none; color: var(--color-accent-dark); font-weight: 700; }
.oshi_count.is_zero .oshi_count_num, .vote_stat.is_zero .vote_stat_num { display: none; }
.oshi_count.is_zero .oshi_count_cta, .vote_stat.is_zero .vote_stat_cta { display: inline; }

/* D5 二層トーン: 動の層(参加UI=推し/評価/諸説)に軽モーション。史実(年表/家系図/解説/指数)は静のまま(no=11) */
.oshi_btn, .setsu_pick, .vote_star { transition: transform .12s ease, background .15s ease, color .15s ease; }
.oshi_btn:active, .setsu_pick:active, .vote_star:active { transform: scale(.94); }
@keyframes ijin_count_pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
#oshi_count.is_pop, .vote_count.is_pop { display: inline-block; animation: ijin_count_pop .35s ease; }
@media (prefers-reduced-motion: reduce) { .oshi_btn:active, .setsu_pick:active, .vote_star:active { transform: none; } #oshi_count.is_pop, .vote_count.is_pop { animation: none; } }

/* 集約ハブページ(jidai/oukyo/bungou・no=64 #07-5) */
.hub_group { margin: 0 0 var(--space-5); }
.hub_group h3 { margin: var(--space-4) 0 var(--space-2); padding-bottom: 4px; border-bottom: 1px solid var(--color-border); }
.hub_count { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-left: 4px; }
.hub_nav { font-size: 13px; margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.hub_nav a { margin-right: 4px; }
.hub_more { font-size: 13px; margin: var(--space-2) 0 0; }

/* 楽天ブックス アフィリエイト枠(案A・可逆: C_RAKUTEN_AFF_ID 未設定なら非描画) */
.book_aff { margin: var(--space-5) 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-subtle, #f7f5f0); border: 1px solid var(--color-border); border-radius: 6px; }
.book_aff h3 { margin: 0 0 var(--space-2); }
.book_aff_pr { font-size: 11px; font-weight: 400; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 3px; padding: 0 4px; vertical-align: middle; }
.book_aff_list { list-style: none; margin: 0; padding: 0; }
.book_aff_list li { margin: 0 0 6px; }
.book_aff_link { display: inline-block; }
.book_aff_note { font-size: 12px; color: var(--color-text-muted); margin: var(--space-2) 0 0; }