/* 資格マップ 基本スタイル — 案C「ミニマル・洗練」 */

: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);

	/* アクセントは基本1色に絞る */
	--color-accent: #2f74d1;
	--color-accent-dark: #1f5299;
	--color-accent-tint: #eef4fc;
	--color-danger: #c0392b;

	/* 余白・角丸(控えめ) */
	--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); }

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中央寄せのまま変更しない) */
body:has(#g_navi) .content { max-width: 1280px; margin: 0; padding-top: var(--space-3); }
body:has(#g_navi) .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; }

/* ============================
   トップページ: ヒーロー(比較を主役化)
   ============================ */
.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); }

/* ============================
   分野バッジ・分野アイコン
   控えめな線+アイコンで識別する(ベタ塗りは避ける)
   ============================ */
.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); }

/* ============================
   トップページ: 分野カード
   ============================ */
.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; }

/* ============================
   資格一覧
   ============================ */
.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); }

.shikaku_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;
}
.shikaku_list_item_check { padding-top: 4px; }
.shikaku_list_item_check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-accent); }
.shikaku_list_item_body { flex: 1; min-width: 0; }
.shikaku_list_item_head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px; }
.shikaku_list_item h3 { margin: 4px 0; font-size: 15px; font-weight: 700; }
.shikaku_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); }
.nando_star { color: var(--color-accent); letter-spacing: 1px; opacity: .8; }
.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-4) 0;
	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_shikaku_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; }

/* ロードマップ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); }

/* 独自指数の根拠ボックス(資格詳細。要約カード直後) */
.score_reason_box {
	background: var(--color-accent-tint);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin: var(--space-4) 0;
}
.score_reason_title { margin-top: 0; margin-bottom: var(--space-3); font-size: 15px; }
.score_reason_list { list-style: none; margin: 0; padding: 0; }
.score_reason_list li { font-size: 13px; line-height: 1.7; margin-bottom: var(--space-2); }
.score_reason_label { font-weight: 700; color: var(--color-accent-dark); }
.score_reason_note { margin: var(--space-2) 0 0; font-size: 11px; color: var(--color-text-muted); }

/* よくある質問(資格詳細。活かし方の後) */
.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_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);
}

/* ============================
   お問い合わせフォーム
   ============================ */
.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; }
}

/* ============================
   指数ランキング
   ============================ */
.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-accent); border-color: var(--color-accent); 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; }