@charset "UTF-8";
/*
Theme Name: aiblog
Theme URI: https://appsheet.blog/
Author: ロジクセルパートナーズ株式会社
Author URI: https://logixcel.co.jp/
Description: appsheet.blog 専用オリジナルテーマ。プラグイン非依存のフルスクラッチ。AI自動投稿ハーネス・カテゴリ別動的CTA・会員閲覧制限（Phase 2）・CareBX アカウント連携（Phase 4）を前提に設計。
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary
Text Domain: aiblog
Tags: blog, ai, news
*/

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

/* --------------------------------------------------------------------------
   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:         #6b727b;  /* 1 段濃く（白い地 3.21〜3.35 → 4.66〜4.86。2026-10-14 / D-227） */

	/* アクセント（知的で落ち着いた青。彩度を抑えて目に優しく） */
	--c-accent:        #2563a8;
	--c-accent-hover:  #1d4e85;
	--c-accent-soft:   #eef4fb;
	--c-accent-line:   #cddff1;
	/* アクセント色の上に載せる文字色。ダークでは背景が明るくなるため黒に切り替える。 */
	--c-on-accent:    #fff;

	/* カテゴリ色（a〜e。彩度を揃えてトーンを統一） */
	--c-cat-a:         #2563a8;   /* AI受注開発 */
	--c-cat-b:         #1a7f6b;   /* 便利AIツール */
	--c-cat-c:         #9a5aa8;   /* 医療介護福祉のAI */
	--c-cat-d:         #a0601c;   /* AIニュース */
	--c-cat-e:         #686f7b;   /* アフィリエイト・広告 */

	/* 状態 */
	--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:    1920px;   /* 全体の幅の上限。2026-10-14 に 1120px から広げた（D-218。広い画面で、左右に大きな余白が出ていた）。これより広い画面では、中央に寄る */
	--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:        #818993;  /* 暗い配色（4.32 → 4.62。D-227） */

		--c-accent:       #6aa7e8;
		--c-accent-hover: #8dbdf0;
		--c-on-accent:   #0b0f14;
		--c-accent-soft:  #1a2634;
		--c-accent-line:  #2c3f56;

		--c-cat-a:        #6aa7e8;
		--c-cat-b:        #4fc0a5;
		--c-cat-c:        #c48ed0;
		--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:        #818993;  /* 暗い配色（4.32 → 4.62。D-227） */
	--c-accent:       #6aa7e8;
	--c-accent-hover: #8dbdf0;
	--c-on-accent:   #0b0f14;
	--c-accent-soft:  #1a2634;
	--c-accent-line:  #2c3f56;
	--c-cat-a:        #6aa7e8;
	--c-cat-b:        #4fc0a5;
	--c-cat-c:        #c48ed0;
	--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; }

/* スマホでは、3 列以上の表を「1 行 = 1 つの箱」にして縦に並べる（2026-11-01 / D-252。CEO「スマホで表を見た際に、見にくい」）。
   3 列のままだと、390px の画面で 1 列目が 2〜3 字の幅に潰れ、1 つの枠が 14 行に折れていた（見出しの行が折り返さない指定のため、残りの列に幅が回らない）。
   箱は devceo-core が付ける目印（枠の .devceo-table-stack・見出しの行の .devceo-table-head・各枠の data-label）で組む。
   1 列目を箱の題にし、2 列目からは、その列の見出しの文を小さく添える。2 列の表と、結合した枠のある表は、表のまま（1 列目に幅の下限を持たせる） */
@media (max-width: 600px) {
	.devceo-table-stack .devceo-table-head,
	.devceo-table-stack thead { display: none; }
	.devceo-table-stack table,
	.devceo-table-stack tbody,
	.devceo-table-stack tr,
	.devceo-table-stack th,
	.devceo-table-stack td { display: block; width: auto; }
	.devceo-table-stack table { background: none; }
	.devceo-table-stack tr {
		background: var(--c-surface);
		border: 1px solid var(--c-line);
		border-radius: var(--r-md);
		overflow: hidden;
		margin: 0 0 var(--sp-3);
	}
	.devceo-table-stack th,
	.devceo-table-stack td {
		border: 0;
		border-top: 1px solid var(--c-line-soft);
		padding: var(--sp-2) var(--sp-4);
		white-space: normal;
	}
	.devceo-table-stack tr > :first-child {
		border-top: 0;
		background: var(--c-surface-2);
		font-weight: 650;
	}
	.devceo-table-stack td[data-label]:not(:first-child)::before {
		content: attr(data-label);
		display: block;
		font-size: .8em;
		font-weight: 650;
		color: var(--c-ink-3);
		margin-bottom: .1em;
	}
	.devceo-table-scroll:not(.devceo-table-stack) th { white-space: normal; }
	.devceo-table-scroll:not(.devceo-table-stack) tr > :first-child { min-width: 6em; }
}

/* スクリーンリーダー専用 */
.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. レイアウト
   -------------------------------------------------------------------------- */
/* 左右の余白は、広い画面ほど少し広げる（スマホ 24px → 1920px の画面で 54px）。
   CEO（10-14）:「30px位は、余白列をいれてください。両端にです」。全体を端まで広げたら（D-218）、内容が画面の端に寄りすぎた */
.wrap      { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: clamp(var(--sp-5), 2.8vw, 54px); }
.wrap--narrow { max-width: var(--w-content); padding-inline: var(--sp-5); }
/* 記事ページで、左列の目次を出さないとき（本文に目次が無い・JS が無い）は、本文とサイドバーの 2 列になる。
   全体を広げると、本文の 1 行が長くなりすぎるので、もとの幅（1120px）で止める。左列の目次を出すときの幅は、3b の節（2026-10-14 / D-218） */
.wrap:has(> .layout--with-sidebar .entry-content) { max-width: 1120px; }

.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 {
		/* サイドバーは 300px から。広い画面では、少し広げる（1920px で 400px / 2026-10-14 D-218） */
		grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 400px);
		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; }
}

/* 広い画面（1440px より上）の記事ページ（2026-10-14 / D-218）
   CEO（10-14）:「左右両サイドの余白の分は広げてください」。それまでは、全体が 1440px で止まり、1920px の画面で左右が 240px ずつ空いていた。
   全体の幅の上限を広げる。本文は 808px（1440px の画面のときの幅。1 行 約 46 文字）のままにして、残りを、左列の目次とサイドバーに分ける。
   本文まで広げると、1 行が長くなりすぎる。 */
@media (min-width: 1441px) {
	.js .wrap:has(> .layout--with-sidebar .entry-content .devceo-toc) { max-width: var(--w-wide); }
	.js .layout--with-sidebar:has(.entry-content .devceo-toc) {
		grid-template-columns: minmax(220px, 1fr) minmax(0, 808px) minmax(300px, 1.2fr);
	}
}

.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);
}

/* フッターの下段のリンク（2026-10-14 / D-213）。「運営者情報」と「プライバシーポリシー」を横に並べる。
   右下の「先頭へ戻る」ボタン（48px と余白）は、画面の右端に固定されている。画面が 1280px より狭いと、
   右寄せのリンクがボタンの下に入って、押せなかった（768px で、リンクの幅の 40% が重なる）。ボタンのぶん、右を空ける */
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
/* 2026-10-14 / D-218: 画面の幅によらず空ける。全体を端まで広げたら、広い画面でもリンクがボタンの下に入った（CEO の指摘。1905px で重なりを測った） */
.site-footer__bottom { padding-right: 64px; }

/* --------------------------------------------------------------------------
   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; }
/* 記事のカードは、置かれた場所の幅に応じて、1〜3 列（2026-10-14 / D-218。CEO「最大3列のレスポンシブにしてください」。それまでは 2 列まで）。
   1 枚の最小の幅（--card-min）が入るだけ並べる。最小の幅を、場所の幅の 1/3 より小さくしないので、3 列を超えては並ばない。
   画面の幅ではなく、場所の幅で決まる。記事ページの本文の中の一覧（幅 808px まで）は、2 列のまま。 */
@media (min-width: 640px) {
	.post-list--grid {
		--card-min: 270px;
		grid-template-columns: repeat(auto-fill, minmax(max(var(--card-min), (100% - 2 * var(--sp-5)) / 3), 1fr));
	}
}
@media (min-width: 1024px) { .post-list--grid { --card-min: 300px; } }

/* いちばん新しい 1 本（全幅のカード。home.php の .post-list__lead）は、広い場所では、画像を左・文を右に並べる
   （2026-10-15 / D-228。CEO「画像表示が大きすぎて見にくいため、一番上の投稿カードを、左に画像、右にテキストのカードレイアウトに」）。
   全幅のまま 16:9 の画像を出すと、1920px の画面で画像の高さが 750px を超えていた。trader.black（D-218）と同じ広さから、同じ割合で並べる。
   画像の無い記事（.card__thumb-fallback。画像の枠を隠す）は、並べずに、これまでの形のまま */
.post-list__lead { grid-column: 1 / -1; }
@media (min-width: 1280px) {
	.post-list__lead > .card:has(> .card__thumb > img) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
}

/* 記事のカードを少し小さくし、カードの間を広げる（2026-10-15 / D-228。CEO「記事カードの大きさを全体的にもう少し小さくしていいです。その分、カード間の隙間が広がるように」）。
   カードの間（--card-gap）: 1 列のときは 24px のまま、640px 以上で 32px、1024px 以上で 48px、1440px 以上で 64px（それまではどの幅も 24px）。最大 3 列の決まりは同じで、広げた分だけ 1 枚の幅が狭くなる。
   1 枚の最小の幅（--card-min）は、1024px 以上で 300px → 260px（1024px で 1 列 619px → 2 列 285px、1366px で 2 列 459px → 3 列 282px）。
   カードの中: 余白を少し詰め、題 17px → 16px、抜粋 15px → 14px、抜粋は 3 行まで（それより長い分は … で切る）。先頭の 1 本（.post-list__lead）は、目立たせるため、中の大きさは前のまま */
.post-list--grid { --card-gap: var(--sp-5); gap: var(--card-gap); }
@media (min-width: 640px) {
	.post-list--grid {
		--card-gap: var(--sp-6);
		grid-template-columns: repeat(auto-fill, minmax(max(var(--card-min), (100% - 2 * var(--card-gap)) / 3), 1fr));
	}
}
@media (min-width: 1024px) { .post-list--grid { --card-gap: var(--sp-7); --card-min: 260px; } }
@media (min-width: 1440px) { .post-list--grid { --card-gap: var(--sp-8); } }
.post-list--grid > .card .card__body { padding: .875rem 1.125rem 1.125rem; }
.post-list--grid > .card .card__title { font-size: 1rem; }
.post-list--grid > .card .card__excerpt {
	font-size: .875rem;
	line-height: 1.75;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.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 から取る。
 */
.card__thumb-fallback {
	display: block; width: 100%; height: 100%;
	background:
		linear-gradient(135deg, currentColor 0%, transparent 65%),
		var(--c-surface-2);
	opacity: .16;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .card__thumb-fallback { opacity: .22; }
}
:root[data-theme="dark"] .card__thumb-fallback { opacity: .22; }

/*
 * 画像の無いカードは、上の淡い面（16:9）を出さず、上辺にカテゴリ色の帯を付ける
 * （CEO 承認 2026-10-08 / カード ab-card-noimage-20261008 / D-169）。
 * 自動投稿の記事は画像が無いため、スマホで 1 画面に 1 枚強しか入らなかった
 * （トップの長さ スマホ 6,657 → 5,104px / PC 3,431 → 2,290px）。
 * PHP は今までどおり代替の面を出し、CSS だけで畳む。:has() が効かない
 * ブラウザでは上の淡い面のまま表示される。
 */
.card__thumb:has(> .card__thumb-fallback) { display: none; }
.card:has(.card__thumb-fallback) { border-top: 3px solid var(--c-line); }
.card:has(.card__thumb-fallback.cat-badge--a) { border-top-color: var(--c-cat-a); }
.card:has(.card__thumb-fallback.cat-badge--b) { border-top-color: var(--c-cat-b); }
.card:has(.card__thumb-fallback.cat-badge--c) { border-top-color: var(--c-cat-c); }
.card:has(.card__thumb-fallback.cat-badge--d) { border-top-color: var(--c-cat-d); }
.card:has(.card__thumb-fallback.cat-badge--e) { border-top-color: var(--c-cat-e); }
.card:has(.card__thumb-fallback) .card__title { font-size: 1.125rem; line-height: 1.55; }
.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; }
}

/*
 * サイドバーの一覧（カテゴリー・最近の記事）を、区切りのある行にする（2026-10-14 / D-222。CEO の画面からの指示）。
 * それまでは文字だけが並び、重ねたときも文字の色が変わるだけで、どの行を指しているかが分かりにくかった。
 * 行ごとに区切りの線を引き、一覧を薄い枠で囲む。重ねた行は、行全体の背景と左の線で示す。
 * リンクの並んだ一覧だけに効かせる（会員の案内の箇条書きは、リンクが無いので外れる）。404 のページの一覧は .sidebar の外なので、変わらない。
 */
.sidebar .widget ul:not(.recent-cards):has(> li > a) {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li {
	position: relative;
	display: flex; align-items: baseline; gap: .4em;
	margin: 0;
	border-top: 1px solid var(--c-line-soft);
	transition: background-color .15s ease;
}
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li:first-child { border-top: 0; }
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li > a {
	flex: 1 1 auto;
	display: block;
	padding: .7em .9em;
	line-height: 1.55;
}
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li > .u-small { flex: 0 0 auto; padding-right: .9em; }  /* カテゴリーの件数 */
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li::before {
	content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
	background: transparent; transition: background-color .15s ease;
}
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li:hover,
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li:focus-within { background: var(--c-accent-soft); }
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li:hover > a,
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li:focus-within > a { color: var(--c-accent); }
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li:hover::before,
.sidebar .widget ul:not(.recent-cards):has(> li > a) > li:focus-within::before { background: var(--c-accent); }

/*
 * 最近の記事を、見出し画像つきのカードにする（2026-10-24 / D-245。CEO の画面からの指示）。
 * 1 枚の高さは、それまでの行の約 2 倍（画像 64px・題は 2 行まで）。カードどうしは少し離して並べる。
 */
.sidebar .recent-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sidebar .recent-cards > li { margin: 0; }
.sidebar .recent-cards a {
	display: flex; align-items: center; gap: var(--sp-3);
	min-height: 84px; padding: 10px var(--sp-3);
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
	color: var(--c-ink-2); text-decoration: none; font-size: .875rem; line-height: 1.55;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sidebar .recent-cards a:hover,
.sidebar .recent-cards a:focus-visible { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); }
.recent-cards__img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--c-surface-2); }
.recent-cards__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/*
 * サイドバーの広告のカード（2026-10-24 / D-245。CEO の画面からの指示「最近の記事の下に、違和感が出ないように」）。
 * 最近の記事のカードと同じ枠・同じ間隔で、すぐ下に縦に並べる（最大 3 枚。1 段目 記事に合う広告・2 段目 AI の選定・3 段目 CEO の指示で AI が選定 / D-246）。
 * 1 枚ずつ右上に「PR」を付ける（ステマ規制・A8 の PR の表記。枠全体の「PR」の見出しは隠す）。
 * 箱の中身（案件名・説明・ボタン）は共通プラグイン（devceo-core の affiliate.php）が組む。カード全体を押せる（ボタンのリンクを広げる）。説明は 1 行。
 */
.sidebar .ad-slot[data-slot="sidebar"] {
	margin: var(--sp-2) 0 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left;
	display: grid; gap: var(--sp-2);
}
.sidebar .ad-slot[data-slot="sidebar"] > .ad-slot__label { display: none; }
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff {
	position: relative;
	min-height: 84px; padding: 10px var(--sp-3);
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
	transition: border-color .15s ease, background-color .15s ease;
}
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff:hover,
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff:focus-within { border-color: var(--c-accent); background: var(--c-accent-soft); }
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff__pr {
	position: absolute; top: 9px; right: var(--sp-3);
	padding: 0 .5em; border: 1px solid var(--c-line); border-radius: 999px;
	font-size: .6875rem; line-height: 1.5; letter-spacing: .04em; color: var(--c-ink-3); background: var(--c-surface);
}
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff__name {
	margin: 0 3.2em .1em 0; font-size: .875rem; line-height: 1.55;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff__desc {
	margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--c-ink-3);
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;   /* 1 行（カードの高さを最近の記事と同じくらいに。CEO の指示） */
}
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff__btn {
	display: inline; min-height: 0; padding: 0; line-height: 1.5; border-radius: 0;
	background: none; color: var(--c-accent); font-size: .8125rem; font-weight: 700;
}
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff__btn::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff__btn::after { content: " ›"; }
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff__btn:hover,
.sidebar .ad-slot[data-slot="sidebar"] .devceo-aff__btn:focus-visible { background: none; color: var(--c-accent); text-decoration: underline; }

/*
 * 共有ボタンを、見出し画像の左下に重ねる（2026-10-24 / D-245。CEO の画面からの指示「高さを節約」）。
 * 共通プラグイン（devceo-core の share.php）が本文の頭に足す共有ボタンの列を、見出し画像の下端へ引き上げる。
 * 並びは「見出し画像（左下に共有ボタン）→ 広告を含みます（右寄せ・広告のある記事だけ）→ 本文」。
 * 見出し画像が無い記事・運営者のログイン中（間に広告の枠の案内が入る）は、これまでどおり本文の頭に出る（画像の直後のときだけ効く）。
 */
.entry-thumb:has(+ .entry-content > .devceo-share--top:first-child) { margin-bottom: 0; }
.entry-thumb + .entry-content > .devceo-share--top:first-child {
	position: relative; z-index: 2;
	justify-content: flex-start;
	margin: -56px 0 28px !important;
	padding-left: 12px !important;
}
.entry-thumb + .entry-content > .devceo-share--top:first-child .devceo-share__toggle { box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important; }
.entry-thumb + .entry-content > .devceo-share--top:first-child .devceo-share__menu { left: 12px; right: auto; }

.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; }
}

/* --------------------------------------------------------------------------
   ページの先頭へ戻るボタン（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; } }

/* --------------------------------------------------------------------------
  13. トナリ（キャラクター。2026-10-13 / CEO 承認・D-204・D-207）
      絵そのものは inc/tonari.php が SVG で出す。ここは色と置き方だけ。
      色はテーマの変数から取るので、明るい / 暗い配色にそのまま追従する。
   -------------------------------------------------------------------------- */
:root {
	--tonari-body: var(--c-accent);
	--tonari-eye:  var(--c-surface);
	--tonari-dot:  #e3a13a;
	--tonari-ring: var(--c-bg);   /* 新着の印のふち。置く場所の地の色に合わせて上書きする */
}
.tonari { display: inline-block; flex: none; vertical-align: middle; }
.tonari__body { fill: var(--tonari-body); }
.tonari__eye, .tonari__typing { fill: var(--tonari-eye); }
.tonari__eye-line { stroke: var(--tonari-eye); }
.tonari__dot { fill: var(--tonari-dot); stroke: var(--tonari-ring); }
.tonari__dot--hollow { fill: var(--tonari-ring); stroke: var(--tonari-dot); }

/* まばたき（大きく 1 つだけ出す所で）。動きを減らす設定のときは止める */
@keyframes tonari-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.tonari__eyes--blink { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .tonari__eyes--blink { animation: tonari-blink 5.2s infinite; } }

/* 見出しの横に置く（トップ・カテゴリー・404）。
   横に並べるので、スマホでも見出しの位置は下がらない（縦に積まない） */
.page-head--tonari { display: flex; align-items: center; gap: var(--sp-4); }
.page-head--tonari > div { min-width: 0; }
/* 横並びにすると、最後の段落の下の余白が外へ逃げなくなり、見出しの箱が 24px 高くなる。消す */
.page-head--tonari > div > :last-child { margin-bottom: 0; }
.tonari-fig { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.tonari-fig__name { font-size: .6875rem; letter-spacing: .08em; color: var(--c-ink-3); line-height: 1.4; }

/* カテゴリーの色の淡い地に載せる（カテゴリーのページの冒頭） */
.tonari-tile {
	display: grid; place-items: center; flex: none;
	width: 64px; height: 64px; border-radius: var(--r-lg);
	background: var(--c-accent-soft); --tonari-ring: var(--c-accent-soft);
}
.tonari-tile--a { --tonari-tint: var(--c-cat-a); }
.tonari-tile--b { --tonari-tint: var(--c-cat-b); }
.tonari-tile--c { --tonari-tint: var(--c-cat-c); }
.tonari-tile--d { --tonari-tint: var(--c-cat-d); }
.tonari-tile--e { --tonari-tint: var(--c-cat-e); }
.tonari-tile[class*="tonari-tile--"] {
	background: color-mix(in srgb, var(--tonari-tint) 16%, var(--c-surface));
	--tonari-ring: color-mix(in srgb, var(--tonari-tint) 16%, var(--c-surface));
}

@media (max-width: 480px) {
	.page-head--tonari { gap: var(--sp-3); align-items: flex-start; }
	.page-head--tonari .tonari-fig .tonari { width: 52px; height: 52px; }
	.tonari-tile { width: 52px; height: 52px; }
	.tonari-tile .tonari { width: 36px; height: 36px; }
}

/* お知らせの枠の中（検索結果が 0 件のとき）・見出しの頭（記事の下の「ほかの記事」） */
.notice--tonari { display: flex; align-items: center; gap: var(--sp-3); --tonari-ring: var(--c-surface); }
.tonari-heading { display: flex; align-items: center; gap: var(--sp-2); }