/*
Theme Name: FX Kuraberu Child
Theme URI: https://fx-kuraberu.jp/
Description: FXクラベル（fx-kuraberu.jp）用 Astra 子テーマ。デザインシステムは本ファイルに実装する。
Author: UUO株式会社
Template: astra
Version: 0.2.0
Text Domain: fx-kuraberu-child
*/

/* ============================================================
   FXクラベル デザインシステム v0.2.0「トラスト・ネイビー / カーム」
   (2026-07-23 ユーザー選定: 配色A × M2モダン・カード × 低彩度)
   ルール:
   - 色は「ネイビー濃淡＋グレー＋白」のみ。金(--fxk-gold)はCTA限定
   - 区切りは罫線でなく余白とカード(白地+ソフトシャドウ)で作る
   - コンポーネントは .fxk- 接頭辞。余白は8pxスケールから取る
   構成: 1) トークン → 2) ベース → 3) 見出し → 4) カード部品 →
         5) 比較表 → 6) バッジ → 7) メリデメ → 8) CTA
   ============================================================ */

/* ---------- 1) デザイントークン ---------- */
:root {
	--fxk-navy: #1B3A6B;
	--fxk-navy-deep: #0F2547;
	--fxk-navy-soft: #3D5E96;
	--fxk-canvas: #F7F9FC;   /* ページ地 */
	--fxk-wash: #EDF2FA;     /* ネイビーの淡地 */
	--fxk-line: #DDE5F0;
	--fxk-hairline: #ECF0F6;
	--fxk-ink: #1C2634;
	--fxk-sub: #64748B;
	--fxk-gray-wash: #EEF1F5; /* 低評価・デメリット用の無彩色淡地 */
	/* 金はCTA限定（サイト唯一のアクセント色） */
	--fxk-gold: #B98A2E;
	--fxk-gold-bright: #D4A93C;
	--fxk-gold-hover: #9A7222;
	/* 形状・影・余白(8pxベース) */
	--fxk-radius: 20px;
	--fxk-radius-s: 12px;
	--fxk-card-shadow: 0 1px 2px rgba(18, 42, 82, .04), 0 12px 32px -12px rgba(18, 42, 82, .10);
	--fxk-gap-xs: 8px;
	--fxk-gap-s: 14px;
	--fxk-gap-m: 20px;
	--fxk-gap-l: 32px;
	--fxk-gap-xl: 56px;
}

/* ---------- 2) ベース ---------- */
body {
	background: var(--fxk-canvas);
	color: var(--fxk-ink);
	font-feature-settings: "palt";
}

.entry-content {
	font-size: 16px;
	line-height: 2.0;
	letter-spacing: 0.03em;
}

.entry-content p {
	margin-bottom: var(--fxk-gap-m);
}

.entry-content a {
	color: var(--fxk-navy);
	text-decoration-color: var(--fxk-line);
	text-underline-offset: 3px;
}

.entry-content a:hover {
	color: var(--fxk-navy-soft);
}

/* ---------- 3) 見出し ---------- */
.entry-content h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: var(--fxk-gap-xl) 0 22px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--fxk-navy-deep);
}

.entry-content h2::before {
	content: "";
	flex: 0 0 10px;
	height: 28px;
	border-radius: 5px;
	background: linear-gradient(180deg, var(--fxk-navy-soft), var(--fxk-navy));
}

.entry-content h3 {
	margin: 40px 0 16px;
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--fxk-navy-deep);
}

.entry-content h4 {
	margin: var(--fxk-gap-l) 0 var(--fxk-gap-xs);
	font-size: 16.5px;
	font-weight: 700;
	color: var(--fxk-ink);
}

/* ---------- 4) カード部品（結論・注意） ---------- */
.fxk-box {
	margin: 26px 0;
	padding: 26px 28px;
	border-radius: var(--fxk-radius);
	background: #fff;
	font-size: 15px;
	line-height: 1.95;
	box-shadow: var(--fxk-card-shadow);
}

.fxk-box .fxk-ttl {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
	background: var(--fxk-wash);
	color: var(--fxk-navy);
}

/* 注意・リスク喚起(淡地・影なしで区別) */
.fxk-box--caution {
	background: var(--fxk-wash);
	box-shadow: none;
}

.fxk-box--caution .fxk-ttl {
	background: #fff;
	color: var(--fxk-navy-deep);
}

/* ---------- 5) 比較表カード ---------- */
.fxk-tbl-card {
	background: #fff;
	border-radius: var(--fxk-radius);
	padding: 10px 18px;
	margin: 26px 0;
	box-shadow: var(--fxk-card-shadow);
	overflow-x: auto;
}

.fxk-tbl-card table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14.5px;
	margin: 0;
}

.fxk-tbl-card thead th {
	font-size: 12px;
	font-weight: 600;
	color: var(--fxk-sub);
	letter-spacing: .06em;
	text-align: center;
	padding: 16px 12px 10px;
	border: none;
	border-bottom: 1px solid var(--fxk-hairline);
	background: transparent;
}

.fxk-tbl-card thead th:first-child { text-align: left; }

.fxk-tbl-card tbody th {
	text-align: left;
	font-weight: 700;
	padding: 16px 12px 16px 0;
	white-space: nowrap;
	border: none;
	background: transparent;
}

.fxk-tbl-card tbody td {
	text-align: center;
	padding: 16px 12px;
	border: none;
}

.fxk-tbl-card tbody tr + tr th,
.fxk-tbl-card tbody tr + tr td {
	border-top: 1px solid var(--fxk-hairline);
}

.fxk-tbl-card tbody tr { transition: background .15s; }
.fxk-tbl-card tbody tr:hover { background: var(--fxk-canvas); }

/* ---------- 6) 評価バッジ（ネイビー階調のみ・色を増やさない） ---------- */
.fxk-bdg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 5px 12px;
	font-weight: 700;
	font-size: 13px;
	border-radius: 999px;
}

.fxk-bdg--good { color: #fff; background: var(--fxk-navy); }
.fxk-bdg--mid  { color: var(--fxk-navy); background: var(--fxk-wash); }
.fxk-bdg--bad  { color: var(--fxk-sub); background: var(--fxk-gray-wash); }

/* ---------- 7) メリット・デメリット ---------- */
.fxk-md {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 26px 0;
}

.fxk-md .fxk-md__col {
	background: #fff;
	border-radius: var(--fxk-radius);
	padding: 20px 24px;
	font-size: 14.5px;
	line-height: 2;
	box-shadow: var(--fxk-card-shadow);
}

.fxk-md .fxk-md__hd {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.fxk-md .fxk-md__col--m .fxk-md__hd { background: var(--fxk-wash); color: var(--fxk-navy); }
.fxk-md .fxk-md__col--d .fxk-md__hd { background: var(--fxk-gray-wash); color: var(--fxk-sub); }

.fxk-md ul { list-style: none; margin: 0; padding: 0; }
.fxk-md li { padding-left: 20px; position: relative; }
.fxk-md .fxk-md__col--m li::before { content: "＋"; position: absolute; left: 0; color: var(--fxk-navy); font-weight: 700; }
.fxk-md .fxk-md__col--d li::before { content: "－"; position: absolute; left: 0; color: var(--fxk-sub); font-weight: 700; }

@media (max-width: 560px) {
	.fxk-md { grid-template-columns: 1fr; }
}

/* ---------- 8) CTA（サイト唯一の「金」） ---------- */
.fxk-cta-area { text-align: center; margin: 36px 0; }

.fxk-cta {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 52px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--fxk-gold-bright), var(--fxk-gold) 60%, #A87B24);
	box-shadow: 0 12px 28px -10px rgba(185, 138, 46, .5);
	transition: transform .15s, box-shadow .15s;
}

.fxk-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -10px rgba(185, 138, 46, .6);
	color: #fff;
}

.fxk-cta::after { content: "→"; margin-left: 10px; font-weight: 400; }

.fxk-cta small {
	display: block;
	font-weight: 500;
	font-size: 10.5px;
	opacity: .9;
	margin-top: 3px;
	letter-spacing: .03em;
}