@charset "UTF-8";
/*
Theme Name: traderblack
Theme URI: https://trader.black/
Author: ロジクセルパートナーズ株式会社
Author URI: https://logixcel.co.jp/
Description: trader.black（利食安男の研究室）専用オリジナルテーマ。プラグイン非依存のフルスクラッチ。aiblog と共通の基盤構造（inc/ 分割・動的CTA・会員閲覧制限・GA4）を持ち、配色とカテゴリー定義のみサイト固有。長時間チャートを見る読者を想定し、既定の配色をダークにしている。
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary
Text Domain: traderblack
Tags: blog, trading, finance
*/

/* ==========================================================================
   目次
   1. デザイントークン（配色・タイポ・余白）
   2. リセットと基礎
   3. レイアウト
   4. ヘッダー
   5. フッター
   6. 記事カード・アーカイブ
   7. 記事本文（single）
   8. CTA（カテゴリ a〜e）
   9. 会員関連（Phase 2）
  10. 広告枠（Phase 2）
  11. ページネーション・パーツ
  12. ユーティリティ
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   方針: 「シンプルでスタイリッシュ・目に優しい」
   - 純白 #fff / 純黒 #000 を本文に使わない（眩しさとハレーションを避ける）
   - 本文は少し温かみのあるオフホワイト地 × 濃いグレー文字
   - ダークモードは自動追従（prefers-color-scheme）
   - 行間 1.9 と字間 0.02em で日本語の可読性を優先
   -------------------------------------------------------------------------- */
:root {
	/* 面 */
	--c-bg:            #fbfaf8;
	--c-surface:       #ffffff;
	--c-surface-2:     #f5f4f1;
	--c-line:          #e4e2dd;
	--c-line-soft:     #efedea;

	/* 文字 */
	--c-ink:           #22262b;
	--c-ink-2:         #5d646d;
	--c-ink-3:         #868d96;

	/* アクセント（ティール。金融データの落ち着いた色。彩度は抑える） */
	--c-accent:        #0f766e;
	--c-accent-hover:  #0b5d56;
	--c-accent-soft:   #eaf5f3;
	--c-accent-line:   #bfe0db;
	/* アクセント色の上に載せる文字色。ダークでは背景が明るくなるため黒に切り替える。 */
	--c-on-accent:    #fff;

	/* カテゴリ色（a〜e。彩度を揃えてトーンを統一） */
	--c-cat-a:         #2563a8;   /* 相場分析 */
	--c-cat-b:         #0f766e;   /* 手法・戦略 */
	--c-cat-c:         #7c5cbf;   /* AIとトレード */
	--c-cat-d:         #a0601c;   /* マーケットニュース */
	--c-cat-e:         #686f7b;   /* ツール・口座（広告枠） */

	/* 相場の方向を示す色。日本の慣習に合わせ上昇=赤 / 下落=緑ではなく、
	   国際的なチャート表記（上昇=緑 / 下落=赤）に揃える */
	--c-up:            #15803d;
	--c-down:          #b91c1c;

	/* 状態 */
	--c-ok:            #1c7a4a;
	--c-warn:          #a8611a;
	--c-danger:        #b03f33;

	/* タイポ */
	--f-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic",
	          "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
	--f-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
	--fs-base:  1.0625rem;   /* 17px。本文は16pxより1px上げると日本語が読みやすい */
	--lh-base:  1.9;
	--ls-base:  .02em;

	/* 余白（4の倍数で統一） */
	--sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
	--sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

	/* 形 */
	--r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;
	--shadow-1: 0 1px 2px rgba(34, 38, 43, .05), 0 1px 3px rgba(34, 38, 43, .06);
	--shadow-2: 0 2px 8px rgba(34, 38, 43, .07), 0 1px 3px rgba(34, 38, 43, .05);

	/* 寸法 */
	--w-content: 720px;    /* 本文の最大幅。日本語は全角40字前後が読みやすい */
	--w-wide:    1120px;
	--h-header:  64px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--c-bg:           #16181c;
		--c-surface:      #1d2025;
		--c-surface-2:    #23272d;
		--c-line:         #31363d;
		--c-line-soft:    #282d33;

		--c-ink:          #e2e5e9;
		--c-ink-2:        #a0a7b0;
		--c-ink-3:        #7c848e;

		--c-accent:       #4fd1c5;
		--c-accent-hover: #7ee0d6;
		--c-on-accent:   #0b0f14;
		--c-accent-soft:  #10302c;
		--c-accent-line:  #1f4f49;

		--c-cat-a:        #6aa7e8;
		--c-cat-b:        #4fd1c5;
		--c-cat-c:        #a78bfa;
		--c-cat-d:        #dda055;
		--c-cat-e:        #9aa3b0;

		--c-ok:           #52b483;
		--c-warn:         #d99a4e;
		--c-danger:       #e08074;

		--shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .22);
		--shadow-2: 0 2px 8px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25);
	}
}

:root[data-theme="dark"] {
	--c-bg:           #16181c;
	--c-surface:      #1d2025;
	--c-surface-2:    #23272d;
	--c-line:         #31363d;
	--c-line-soft:    #282d33;
	--c-ink:          #e2e5e9;
	--c-ink-2:        #a0a7b0;
	--c-ink-3:        #7c848e;
	--c-accent:       #4fd1c5;
	--c-accent-hover: #7ee0d6;
	--c-on-accent:   #0b0f14;
	--c-accent-soft:  #10302c;
	--c-accent-line:  #1f4f49;
	--c-cat-a:        #6aa7e8;
	--c-cat-b:        #4fd1c5;
	--c-cat-c:        #a78bfa;
	--c-cat-d:        #dda055;
	--c-cat-e:        #9aa3b0;
	--c-ok:           #52b483;
	--c-warn:         #d99a4e;
	--c-danger:       #e08074;
	--shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .22);
	--shadow-2: 0 2px 8px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------------------
   2. リセットと基礎
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/*
	 * 横スクロールの保険。
	 * 画面幅を超える要素が1つでも紛れ込むとページ全体が横に動き、
	 * スマートフォンでの読書体験が壊れる。
	 * clip を使う（hidden は position: sticky のヘッダーを機能させなくする）。
	 */
	overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	letter-spacing: var(--ls-base);
	/*
	 * 本文では palt（日本語の詰め組み）を使わない。
	 * palt は約物（句読点・括弧）を詰めるため見出しでは美しいが、
	 * 本文に効かせると読点・句点が隣の文字に寄って見分けにくくなり、
	 * かえって読みづらくなる。詰めるのは見出しとロゴだけにする。
	 */
	font-feature-settings: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
img { vertical-align: middle; }

a {
	color: var(--c-accent);
	text-decoration-color: var(--c-accent-line);
	text-underline-offset: .18em;
	transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--c-accent-hover); text-decoration-color: currentColor; }

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

h1, h2, h3, h4, h5, h6,
.site-brand__name,
.card__title,
.entry-title,
.cta__title {
	line-height: 1.45;
	letter-spacing: -.005em;
	font-weight: 700;
	margin: 0;
	font-feature-settings: "palt" 1;   /* 見出しだけ詰め組みにする */
	/*
	 * 見出しの書体から「Yu Gothic UI」を外す（2026-10-09 / D-174）。
	 * Windows ではこの書体が選ばれ、palt を付けると「」が前後の文字に重なって潰れていた
	 * （「AI入力は「書く時間」」が「AI入力ば書く時間」のように見える。CEO 指摘）。
	 * 「Yu Gothic」なら palt のまま正しく詰まる。Mac（ヒラギノ）とスマホは先頭の書体なので変わらない。
	 * 本文は Yu Gothic UI のまま（Yu Gothic の細い字は Windows の本文では読みにくい）。
	 */
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic,
	             "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
}

p, ul, ol, dl, blockquote, figure, table, pre { margin: 0 0 var(--sp-5); }
ul, ol { padding-left: 1.4em; }
li { margin: .35em 0; }

code, kbd, samp {
	font-family: var(--f-mono);
	font-size: .9em;
	background: var(--c-surface-2);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-sm);
	padding: .1em .38em;
}
pre {
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	padding: var(--sp-4);
	overflow-x: auto;
	line-height: 1.7;
}
pre code { background: none; border: none; padding: 0; }

blockquote {
	border-left: 3px solid var(--c-accent-line);
	padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
	color: var(--c-ink-2);
}

hr { border: none; border-top: 1px solid var(--c-line); margin: var(--sp-7) 0; }

/* テーブルは必ず自前で横スクロールさせる（本文を横に溢れさせない） */
.table-scroll { overflow-x: auto; margin: 0 0 var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md); }
table { border-collapse: collapse; width: 100%; font-size: .94em; background: var(--c-surface); }
th, td { border-bottom: 1px solid var(--c-line-soft); padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; }
th { background: var(--c-surface-2); font-weight: 650; white-space: nowrap; }
tr:last-child td { border-bottom: none; }

/* スクリーンリーダー専用 */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--c-accent); color: var(--c-on-accent);
	padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--r-md) 0;
}
/* ★color を指定し直す理由★
   .skip-link は通常画面外にあり、Tab キーで :focus になったときだけ表示される。
   ここに color: #fff が直書きされていたため、後勝ちでダークモードの
   --c-on-accent（#0b0f14）を上書きし、明るいアクセント背景に白文字が乗っていた。
   agy の実機測定でダークモードの AA 不合格を検出（2026-10-02 / D-052）。
   変数を明示的に指定して、ライト・ダークのどちらでも正しい文字色にする。 */
.skip-link:focus { left: 0; color: var(--c-on-accent); }

/* --------------------------------------------------------------------------
   3. レイアウト
   -------------------------------------------------------------------------- */
.wrap      { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--narrow { max-width: var(--w-content); }

.site-main { padding-block: var(--sp-7) var(--sp-8); min-height: 60vh; }

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-7);
}
@media (min-width: 960px) {
	.layout--with-sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--sp-7);
		align-items: start;
	}
}

/* --------------------------------------------------------------------------
   3b. 記事ページの左列の目次（2026-10-09 / CEO 指示・D-172）

   logixcel.co.jp の左列の目次（読んでいる見出しが光る）と同じ使い方を、このテーマの見た目で。
   - 1280px 以上の記事ページで、本文に目次（devceo-core の .devceo-toc）があるときだけ 3 列にする
   - 3 列は :has() で最初の描画から組んでおき、assets/js/toc-rail.js が目次を左列へ写す。
     読み込み後に列が増えて本文の位置がずれる（レイアウトシフト）のを避けるため
   - 左列を出したら本文中の目次は隠す（同じ目次が 2 つ並ばないように）
   - 狭い画面・:has() に対応しないブラウザ・JS が無いときは、これまでどおり本文中の目次だけ
   -------------------------------------------------------------------------- */
.toc-rail { display: none; }

@media (min-width: 1280px) {
	/* 3 列にしても本文の幅が足りるよう、記事ページだけ横幅を広げる */
	.js .wrap:has(> .layout--with-sidebar .entry-content .devceo-toc) { max-width: 1440px; }

	.js .layout--with-sidebar:has(.entry-content .devceo-toc) {
		grid-template-columns: 220px minmax(0, 1fr) 300px;
		gap: var(--sp-6);
	}
	.js .layout--with-sidebar:has(.entry-content .devceo-toc) > div      { grid-column: 2; grid-row: 1; }
	.js .layout--with-sidebar:has(.entry-content .devceo-toc) > .sidebar { grid-column: 3; grid-row: 1; }

	.js .layout--with-sidebar > .toc-rail {
		display: block;
		grid-column: 1; grid-row: 1;
		position: sticky; top: calc(var(--h-header) + var(--sp-5));
		max-height: calc(100vh - var(--h-header) - var(--sp-7));
		overflow-y: auto; overscroll-behavior: contain;
	}
	.js .layout--with-sidebar:has(> .toc-rail) .entry-content .devceo-toc { display: none; }
}

.toc-rail__inner {
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line); border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
}
.toc-rail__title { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: var(--c-ink-3); margin: 0 0 var(--sp-3); }
.toc-rail ul { list-style: none; margin: 0; padding: 0; }
.toc-rail li { margin: 0; }
.toc-rail ul ul { margin-left: var(--sp-3); }
.toc-rail a {
	display: block;
	padding: .45em .6em;
	border-left: 2px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0;
	font-size: .8125rem; line-height: 1.55;
	color: var(--c-ink-2); text-decoration: none;
}
.toc-rail ul ul a { font-size: .78125rem; }
.toc-rail a:hover { color: var(--c-accent); background: var(--c-surface-2); }
.toc-rail a.is-active {
	color: var(--c-accent); font-weight: 700;
	background: var(--c-accent-soft); border-left-color: var(--c-accent);
}
@media (prefers-reduced-motion: no-preference) {
	.toc-rail a { transition: background-color .15s ease, color .15s ease; }
}

/* 目次から飛んだ見出しが、上の固定ヘッダーに隠れないようにする（左列・本文中の目次の両方） */
.entry-content :is(h2, h3) { scroll-margin-top: calc(var(--h-header) + var(--sp-5)); }

/* --------------------------------------------------------------------------
   4. ヘッダー
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--c-bg) 88%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--c-line);
}
@supports not (backdrop-filter: blur(1px)) {
	.site-header { background: var(--c-bg); }
}

.site-header__inner {
	min-height: var(--h-header);
	display: flex; align-items: center; gap: var(--sp-5);
}

.site-brand { display: flex; align-items: baseline; gap: var(--sp-3); text-decoration: none; color: inherit; margin-right: auto; }
.site-brand:hover { color: inherit; }
.site-brand__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.site-brand__tagline { font-size: .75rem; color: var(--c-ink-3); letter-spacing: .04em; }
@media (max-width: 599px) { .site-brand__tagline { display: none; } }

/*
 * min-width: 0 が必須。
 * flex アイテムの min-width は既定が auto で、中身の最小幅（最長の項目）より縮まない。
 * これを 0 にしないと overflow-x: auto が効かず、
 * ナビがヘッダーを押し広げてページ全体が横スクロールしてしまう。
 */
.site-nav { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.site-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--sp-1); }
.site-nav li { margin: 0; }
.site-nav a {
	display: inline-block;
	padding: var(--sp-2) var(--sp-3);
	font-size: .875rem; font-weight: 600;
	color: var(--c-ink-2); text-decoration: none;
	border-radius: var(--r-sm);
	white-space: nowrap;   /* 項目名を折り返させない */
}
.site-nav a:hover { color: var(--c-ink); background: var(--c-surface-2); }
.site-nav .current-menu-item > a,
.site-nav .current-cat > a { color: var(--c-accent); }

/*
 * モバイル（899px 以下）のナビ。
 *
 * 2026-10-08 に CEO 指示でハンバーガーメニューにした（D-169）。
 * それまでは D-024 の判断で「2 段目に横スクロール」だったが、320px 幅では
 * 5 項目中 2 個しか見えず、残りがあることに気づきにくかった。
 *
 * JavaScript が動かないときは、従来どおり 2 段目の横スクロールで全項目に届く。
 * <html class="js">（inc/enqueue.php が描画前に付ける）のときだけ畳む。
 */
@media (max-width: 899px) {
	.site-header__inner { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-2); }
	.site-nav {
		order: 3; width: 100%; min-width: 0;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.site-nav::-webkit-scrollbar { display: none; }
	.site-nav a { padding-inline: var(--sp-2); }

	/* ここからハンバーガー（JS が動くときだけ） */
	.js .site-header__inner { row-gap: 0; }
	.js .site-nav { display: none; overflow: visible; }
	.js .site-header.is-nav-open .site-nav {
		display: block;
		max-height: calc(100dvh - var(--h-header));
		overflow-y: auto; overscroll-behavior: contain;
		border-top: 1px solid var(--c-line);
		padding-block: var(--sp-2) var(--sp-3);
	}
	.js .site-nav ul { flex-direction: column; gap: 2px; }
	.js .site-nav a {
		display: flex; align-items: center;
		min-height: 48px; padding: 0 var(--sp-3);
		font-size: 1rem; color: var(--c-ink);
		border-radius: var(--r-md);
		white-space: normal;
	}
	.js .site-nav .current-menu-item > a,
	.js .site-nav .current-cat > a { color: var(--c-accent); background: var(--c-accent-soft); }

	.js .nav-toggle { display: inline-grid; }
	/* 指で押しやすい 44px 角。下にある .theme-toggle / .nav-toggle の 34px に勝たせるため .site-header を前に付ける */
	.site-header .theme-toggle, .site-header .nav-toggle { width: 44px; height: 44px; }
}

.nav-toggle {
	display: none;   /* PC と、JS が動かないときは出さない */
	flex: none; place-items: center;
	width: 34px; height: 34px;
	border: 1px solid var(--c-line); border-radius: var(--r-sm);
	background: var(--c-surface); color: var(--c-ink);
	cursor: pointer; padding: 0;
}
.nav-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.theme-toggle {
	flex: none;
	display: inline-grid; place-items: center;
	width: 34px; height: 34px;
	border: 1px solid var(--c-line); border-radius: var(--r-sm);
	background: var(--c-surface); color: var(--c-ink-2);
	cursor: pointer; padding: 0;
}
.theme-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* --------------------------------------------------------------------------
   5. フッター
   -------------------------------------------------------------------------- */
.site-footer {
	border-top: 1px solid var(--c-line);
	background: var(--c-surface);
	padding-block: var(--sp-7) var(--sp-6);
	font-size: .875rem;
	color: var(--c-ink-2);
}
.site-footer__cols {
	display: grid; gap: var(--sp-6);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: .8125rem; letter-spacing: .06em; color: var(--c-ink-3); margin-bottom: var(--sp-3); text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .4em 0; }
.site-footer a { color: var(--c-ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__bottom {
	margin-top: var(--sp-6); padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line-soft);
	display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
	align-items: center; justify-content: space-between;
	font-size: .8125rem; color: var(--c-ink-3);
}

/* --------------------------------------------------------------------------
   6. 記事カード・アーカイブ
   -------------------------------------------------------------------------- */
.page-head { margin-bottom: var(--sp-6); }
.page-head__title { font-size: clamp(1.5rem, 4vw, 1.875rem); }
.page-head__desc { color: var(--c-ink-2); font-size: .9375rem; margin-top: var(--sp-2); }

.post-list { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .post-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
	margin: 0;
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--c-accent-line); }
@media (hover: hover) { .card:hover { transform: translateY(-1px); } }

.card__thumb { display: block; aspect-ratio: 16 / 9; background: var(--c-surface-2); overflow: hidden; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }

/*
 * アイキャッチ未設定のカード。
 * 自動投稿では画像が無い記事が出るため、灰色の空白ではなく
 * カテゴリー色の淡い面を敷いて一覧の見栄えを保つ。
 * 色は付与された cat-badge--x クラスの currentColor から取る。
 */
/*
 * ★opacity を要素全体に掛けないこと（2026-10-07 変更）★
 * 以前は .card__thumb-fallback 自体に opacity:.16 を掛けていた。
 * そこへ利食安男を入れたら、**キャラクターまで一緒に薄くなって見えなくなった**。
 * 色の面は ::before に移し、透過はそちらだけに掛ける。
 */
.card__thumb-fallback {
	position: relative; display: flex; width: 100%; height: 100%;
	align-items: flex-end; justify-content: center;
	background: var(--c-surface-2);
	overflow: hidden;
}
.card__thumb-fallback::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(135deg, currentColor 0%, transparent 65%);
	opacity: .16;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .card__thumb-fallback::before { opacity: .22; }
}
:root[data-theme="dark"] .card__thumb-fallback::before { opacity: .22; }

/*
 * 利食安男は面の上に置く。
 *
 * ★既存の .card__thumb img より詳細度を上げること★
 * 439 行目に `.card__thumb img { width:100%; height:100%; object-fit:cover }` があり、
 * これはアイキャッチ写真を枠いっぱいに敷くための指定。
 * 同じ枠の中にキャラクターを入れると**その指定を受けて引き伸ばされ、はみ出す**
 * （2026-10-07 の最初の実装で実際にそうなった）。
 * 親クラスを付けた形で上書きして、比率を保ったまま収める。
 */
.card__thumb .card__thumb-char {
	position: relative; z-index: 1;
	width: auto; height: 84%;
	max-height: 100%; max-width: 70%;
	object-fit: contain; object-position: bottom center;
	margin-bottom: 0;
}
.card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.card__title { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--c-accent); }
.card__excerpt { font-size: .9375rem; color: var(--c-ink-2); line-height: 1.8; margin: 0; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); font-size: .78125rem; color: var(--c-ink-3); }

/* カテゴリバッジ。色は inc/categories.php が付けるクラスで切り替える */
.cat-badge {
	display: inline-block;
	font-size: .75rem; font-weight: 700; letter-spacing: .02em;   /* 11.5px → 12px（D-169） */
	padding: .15em .6em; border-radius: 999px;
	text-decoration: none; white-space: nowrap;
	border: 1px solid currentColor;
}
/* ★hover の背景に currentColor を使わない理由★
   元は `.cat-badge:hover { color: #fff; background: currentColor; }` だった。
   ダークモードでは明るいカテゴリー色の上に白文字が乗り、5 色すべて AA 不合格
   （2.23〜2.58:1）だったため color を var(--c-on-accent) に変えた。

   ところが **currentColor はその要素自身の color の“計算後の値”** を指す。
   同じルール内で color を書き換えると background も同じ色に追従し、
   バッジが文字の見えない塗り潰しの塊になる。
   （2026-10-02、この書き換えで実際に両サイトを壊し、agy の実機検証で検出 / D-053）

   そこで背景はカテゴリークラス側で**色を名指し**する。
   currentColor に頼らないので、color を何に変えても背景は動かない。 */
.cat-badge:hover { color: var(--c-on-accent); }

.cat-badge--a { color: var(--c-cat-a); }
.cat-badge--b { color: var(--c-cat-b); }
.cat-badge--c { color: var(--c-cat-c); }
.cat-badge--d { color: var(--c-cat-d); }
.cat-badge--e { color: var(--c-cat-e); }

.cat-badge--a:hover { background: var(--c-cat-a); }
.cat-badge--b:hover { background: var(--c-cat-b); }
.cat-badge--c:hover { background: var(--c-cat-c); }
.cat-badge--d:hover { background: var(--c-cat-d); }
.cat-badge--e:hover { background: var(--c-cat-e); }

/* --------------------------------------------------------------------------
   7. 記事本文（single）
   -------------------------------------------------------------------------- */
.entry-header { margin-bottom: var(--sp-6); }
.entry-title { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.4; margin-bottom: var(--sp-4); }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: .8125rem; color: var(--c-ink-3); }
.entry-thumb { margin: var(--sp-5) 0 var(--sp-6); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface-2); }

.entry-content { font-size: 1.0625rem; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 {
	font-size: 1.375rem;
	margin: var(--sp-7) 0 var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: 2px solid var(--c-accent-line);
}
.entry-content h3 { font-size: 1.1875rem; margin: var(--sp-6) 0 var(--sp-3); }
.entry-content h4 { font-size: 1.0625rem; margin: var(--sp-5) 0 var(--sp-3); color: var(--c-ink-2); }
.entry-content p { margin-bottom: var(--sp-5); }
.entry-content img { border-radius: var(--r-md); }
.entry-content figure { margin: var(--sp-6) 0; }
.entry-content figcaption { font-size: .8125rem; color: var(--c-ink-3); margin-top: var(--sp-2); text-align: center; }
.entry-content ul, .entry-content ol { margin-bottom: var(--sp-5); }

.entry-footer { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.entry-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.entry-tags a {
	font-size: .8125rem; color: var(--c-ink-2); text-decoration: none;
	background: var(--c-surface-2); border: 1px solid var(--c-line);
	padding: .15em .7em; border-radius: 999px;
}
.entry-tags a:hover { color: var(--c-accent); border-color: var(--c-accent-line); }

/* 記事ナビ（前後） */
.post-nav { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a {
	display: block; padding: var(--sp-4);
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
	text-decoration: none; color: inherit;
}
.post-nav a:hover { border-color: var(--c-accent-line); color: inherit; }
.post-nav__label { display: block; font-size: .75rem; color: var(--c-ink-3); margin-bottom: var(--sp-1); }
.post-nav__title { font-size: .9375rem; font-weight: 600; }
.post-nav__next { text-align: right; }

/* --------------------------------------------------------------------------
   8. CTA（カテゴリ a〜e）
   -------------------------------------------------------------------------- */
.cta {
	margin: var(--sp-7) 0 0;
	padding: var(--sp-5);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-accent);
	border-radius: var(--r-md);
	background: var(--c-surface);
	box-shadow: var(--shadow-1);
}
.cta__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--c-ink-3); margin-bottom: var(--sp-2); }
.cta__title { font-size: 1.125rem; margin-bottom: var(--sp-3); }
.cta__body { font-size: .9375rem; color: var(--c-ink-2); margin-bottom: var(--sp-4); }
.cta__body > *:last-child { margin-bottom: 0; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.cta--a { border-left-color: var(--c-cat-a); }
.cta--b { border-left-color: var(--c-cat-b); }
.cta--c { border-left-color: var(--c-cat-c); }
.cta--d { border-left-color: var(--c-cat-d); }
.cta--e { border-left-color: var(--c-cat-e); }

.btn {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	padding: .6em 1.25em;
	font-size: .9375rem; font-weight: 650; line-height: 1.4;
	border-radius: var(--r-sm); border: 1px solid transparent;
	text-decoration: none; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.btn--ghost { background: transparent; color: var(--c-accent); border-color: var(--c-accent-line); }
.btn--ghost:hover { background: var(--c-accent-soft); color: var(--c-accent-hover); }
.btn--block { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   9. 会員関連（Phase 2 で中身を実装。器だけ先に用意する）
   -------------------------------------------------------------------------- */
.paywall {
	position: relative;
	margin-top: calc(var(--sp-6) * -1);
	padding: var(--sp-7) var(--sp-5) var(--sp-6);
	text-align: center;
	background: linear-gradient(to bottom, transparent, var(--c-surface) 18%);
}
.paywall::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--sp-6);
	background: linear-gradient(to bottom, transparent, var(--c-bg));
	pointer-events: none;
}
.paywall__inner {
	max-width: 520px; margin-inline: auto;
	border: 1px solid var(--c-accent-line); border-radius: var(--r-lg);
	background: var(--c-accent-soft);
	padding: var(--sp-6) var(--sp-5);
}
.paywall__title { font-size: 1.1875rem; margin-bottom: var(--sp-3); }
.paywall__benefits { text-align: left; font-size: .9375rem; color: var(--c-ink-2); margin: 0 0 var(--sp-5); padding-left: 1.3em; }
.paywall__price { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--sp-1); }
.paywall__price small { font-size: .8125rem; font-weight: 400; color: var(--c-ink-3); }
.paywall__note { font-size: .78125rem; color: var(--c-ink-3); margin-top: var(--sp-3); }

.member-badge {
	display: inline-flex; align-items: center; gap: .35em;
	font-size: .71875rem; font-weight: 700;
	color: var(--c-ok); border: 1px solid currentColor;
	padding: .1em .55em; border-radius: 999px;
}

/* --------------------------------------------------------------------------
  10. 広告枠（Phase 2。有料会員には出力自体を行わない）
   -------------------------------------------------------------------------- */
.ad-slot {
	margin: var(--sp-6) 0;
	padding: var(--sp-4);
	border: 1px dashed var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-surface-2);
	text-align: center;
}
.ad-slot__label { display: block; font-size: .6875rem; letter-spacing: .08em; color: var(--c-ink-3); margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
  11. ページネーション・パーツ
   -------------------------------------------------------------------------- */
.pagination { margin-top: var(--sp-7); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 38px; height: 38px; padding-inline: var(--sp-2);
	border: 1px solid var(--c-line); border-radius: var(--r-sm);
	background: var(--c-surface); color: var(--c-ink-2);
	text-decoration: none; font-size: .9375rem;
}
.pagination .page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination .page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.pagination .dots { border-color: transparent; background: none; }

.widget { margin-bottom: var(--sp-6); }
.widget__title { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); margin-bottom: var(--sp-3); }
.widget ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.widget li { margin: .5em 0; }
/*
 * スコープを ul 内に限定する。
 * `.widget a` と書くと詳細度 (0,1,1) がボタンの `.btn--primary` (0,1,0) に勝ってしまい、
 * サイドバー内のボタンの文字色が上書きされて読めなくなる。
 */
.widget ul a { color: var(--c-ink-2); text-decoration: none; }
.widget ul a:hover { color: var(--c-accent); }

/*
 * スマホでは一覧のリンクを 44px の高さにする（2026-10-08 / D-169）。
 * 文字の高さ（約 20px）のままだと、指で隣の行を押してしまいやすい。
 * PC はマウスで細かく指せるので今のままにする。
 */
@media (max-width: 899px) {
	.widget li, .site-footer li { margin: 0; }
	.widget ul a, .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
}

.search-form { display: flex; gap: var(--sp-2); }
.search-form input[type="search"] {
	flex: 1 1 auto; min-width: 0;
	/* 16px 未満だと iPhone はタップした瞬間に画面を拡大する（2026-10-08 / D-168） */
	padding: .5em .75em; font: inherit; font-size: 1rem;
	color: var(--c-ink); background: var(--c-surface);
	border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.search-form input[type="search"]:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; border-color: var(--c-accent); }

.notice {
	padding: var(--sp-4);
	border: 1px solid var(--c-line); border-left: 3px solid var(--c-ink-3);
	border-radius: var(--r-md); background: var(--c-surface);
	font-size: .9375rem; color: var(--c-ink-2);
}

/* --------------------------------------------------------------------------
  12. ユーティリティ
   -------------------------------------------------------------------------- */
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-center { text-align: center; }
.u-muted { color: var(--c-ink-2); }
.u-small { font-size: .875rem; }

/* WordPress 標準クラス */
.alignleft  { float: left;  margin: 0 var(--sp-5) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.sticky .card { border-color: var(--c-accent-line); }

@media print {
	.site-header, .site-footer, .cta, .ad-slot, .paywall, .post-nav, .pagination, .theme-toggle { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
}

/* --------------------------------------------------------------------------
  13. 画像（ロゴ・利食安男）   2026-10-07 追加
  ------------------------------------------------------------------------- */

/*
 * ヘッダーのロゴ。
 * サイト名のテキストは残したまま、その左に置く。
 * 高さで揃えるのは、SVG の比率がばらついても行の高さが動かないようにするため。
 */
.site-brand__logo {
	height: 30px; width: auto; flex: 0 0 auto;
	display: block;
}
@media (max-width: 599px) {
	/* 狭い画面ではロゴを少し小さく。サイト名が折り返すのを避ける */
	.site-brand__logo { height: 24px; }
}

/*
 * ★ロゴは明暗で差し替える★
 * このテーマはライトが既定（--c-bg: #fbfaf8）で、ダークは自動追従。
 * 白ロゴだけを置くとライトで消える（2026-10-07 に実際にそうなった）。
 * img の src は CSS で変えられないので、両方出してどちらかを隠す。
 * 既定はライト用（原色）を見せる。
 */
.site-brand__logo--dark { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-brand__logo--light { display: none; }
	:root:not([data-theme="light"]) .site-brand__logo--dark  { display: block; }
}
:root[data-theme="dark"] .site-brand__logo--light { display: none; }
:root[data-theme="dark"] .site-brand__logo--dark  { display: block; }
/* 利用者が明示的にライトを選んだときは、ダーク環境でも原色に戻す */
:root[data-theme="light"] .site-brand__logo--light { display: block; }
:root[data-theme="light"] .site-brand__logo--dark  { display: none; }

/*
 * トップのヒーロー。
 * 文章と利食安男を横に並べ、狭い画面では縦に積む。
 */
.page-head--hero {
	display: flex; align-items: center; gap: var(--sp-5);
	flex-wrap: wrap;
}
.page-head--hero .page-head__text { flex: 1 1 18rem; min-width: 0; }
.page-head__char { flex: 0 0 auto; height: auto; }

/*
 * トップの利食安男と、その下の自己紹介（2026-10-07 追加 / CEO 指示）。
 *
 * ★figure で包んだので、並び替えの対象が変わった★
 * それまで .page-head__char は .page-head--hero の直下の子だったので、
 * 狭い画面での order 指定が直接効いていた。
 * いまは .hero-char の中に入ったため、**order は .hero-char に掛けないと効かない。**
 * 包むときに一緒に直さないと、スマホで絵が先頭に戻って本文が押し下げられる。
 */
.hero-char {
	flex: 0 0 auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	max-width: 15rem;
}

.hero-char__intro {
	font-size: .75rem;
	line-height: 1.75;
	color: var(--c-ink-3);
	text-align: left;
	border-top: 1px solid var(--c-line);
	padding-top: var(--sp-2);
}

.hero-char__name {
	display: block;
	font-size: .875rem;
	color: var(--c-ink-2);
}

/* 読みを小さく添える */
.hero-char__ruby {
	display: block;
	font-size: .6875rem;
	color: var(--c-ink-3);
	margin-bottom: .25rem;
}

/* 落ちの一行。前の 3 行と少し離して、オチとして読ませる */
.hero-char__like {
	display: inline-block;
	margin-top: .35rem;
	color: var(--c-ink-2);
}

@media (max-width: 599px) {
	/*
	 * 狭い画面では順序を入れ替えて、見出しを先に読ませる。
	 * 絵が先頭に来ると、本題にたどり着くまでスクロールが要る。
	 */
	.page-head--hero { gap: var(--sp-4); }
	.page-head--hero .page-head__text { order: 1; }
	.page-head--hero .hero-char { order: 2; margin-inline: auto; max-width: 18rem; }
	.hero-char__intro { text-align: center; }
}

/* 404 は絵を上に置く。状況を一目で伝える役割なので先に見せる */
.page-head--with-char { text-align: center; }
.page-head--with-char .page-head__char { margin: 0 auto var(--sp-4); }

/* 検索 0 件。控えめに添えるだけなので横並び */
.notice--with-char {
	display: flex; align-items: center; gap: var(--sp-4);
}
.notice__char { flex: 0 0 auto; height: auto; }
@media (max-width: 479px) {
	.notice--with-char { flex-direction: column; text-align: center; }
}

/*
 * 利食安男の共通設定。
 * GIF をそのまま置くと端末によって引き伸ばされるので、比率を固定する。
 */
.tbk-char, .card__thumb-char, .page-head__char, .notice__char {
	max-width: 100%;
}

/*
 * 動きを減らす設定の利用者には、動く画像を見せない。
 * GIF は CSS では止められないので、静止版へ差し替える。
 * ★ここで指定するファイル名は inc/images.php の tbk_character_src() と対になっている。
 *   ポーズを増やしたら両方に足すこと。
 */
@media (prefers-reduced-motion: reduce) {
	.page-head--hero .page-head__char { content: url("assets/img/char/greet.png"); }
	.page-head--with-char .page-head__char { content: url("assets/img/char/loss.png"); }
}

/* --------------------------------------------------------------------------
   ページの先頭へ戻るボタン（2026-10-09 / CEO 指示・D-172）
   600px 以上スクロールしたら右下に出す（assets/js/to-top.js）。JS が無いときは常に出ている。
   z-index はヘッダー（50）より下。開いたメニューの上に重ならないように。
   -------------------------------------------------------------------------- */
.to-top {
	position: fixed; z-index: 40;
	right: max(var(--sp-4), env(safe-area-inset-right));
	bottom: max(var(--sp-4), env(safe-area-inset-bottom));
	display: grid; place-items: center;
	width: 48px; height: 48px;
	border: 1px solid var(--c-line); border-radius: 999px;
	background: var(--c-surface); color: var(--c-ink-2);
	box-shadow: var(--shadow-2);
	text-decoration: none;
}
.to-top:hover { color: var(--c-accent); border-color: var(--c-accent); }
.to-top svg { width: 20px; height: 20px; }
.js .to-top { opacity: 0; visibility: hidden; transform: translateY(8px); }
.js .to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: no-preference) {
	.to-top { transition: opacity .2s ease, transform .2s ease, visibility .2s, color .15s ease, border-color .15s ease; }
}
@media print { .to-top { display: none; } }