/*
Theme Name: Ticot Light
Theme URI: https://ticot.net/
Author: Ticot
Author URI: https://ticot.net/
Description: 白基調・モノクロの高速テーマ。日本語Webフォントを使わず（追加読込0KB）、影・角丸・グラデーションを排して、読みやすさと表示速度を最優先に設計しています。SEO（メタ情報・OGP・構造化データ）、Googleアナリティクス、広告枠の管理をプラグインなしでテーマ内に実装。サイドバーは追従します。
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ticot
Tags: blog, news, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks

================================================================
 目次
 01. トークン（色・余白・文字）
 02. リセット
 03. ヘッダー / ナビ
 04. 検索オーバーレイ / ドロワー
 05. 広告
 06. レイアウト
 07. 記事一覧
 08. サイドバー
 09. 記事ページ
 10. 一覧・検索結果
 11. 404
 12. コメント
 13. フッター / 補助UI
 14. WordPress 標準クラス
 15. レスポンシブ
 16. 印刷
================================================================
*/

/* ==============================================================
   01. トークン
   ============================================================== */
:root {
	/* 色：白と墨。操作系にだけ藍鼠を1色 */
	--paper: #FFFFFF;
	--soft: #F7F7F8;
	--soft-2: #FBFBFC;
	--ink: #101114;
	--ink-2: #4E535B;
	--ink-3: #71767E;
	--line: #E4E5E9;
	--line-2: #EFF0F2;
	--accent: #3E5163;
	--accent-w: #EEF1F4;

	/* 余白：4の倍数 */
	--s1: 4px;
	--s2: 8px;
	--s3: 16px;
	--s4: 24px;
	--s5: 40px;
	--s6: 64px;
	--s7: 96px;
	--s8: 144px;

	/* 文字：流体スケール */
	--t-xs: 11.5px;
	--t-sm: 12.5px;
	--t-base: 13.5px;
	--t-body: clamp(16px, 0.35vw + 15.2px, 17px);
	--t-h3: clamp(16px, 0.6vw + 14.5px, 18px);
	--t-h2: clamp(18px, 0.9vw + 15.5px, 21px);
	--t-lead: clamp(20px, 2.1vw + 13px, 29px);
	--t-h1: clamp(22px, 2.4vw + 14px, 32px);

	--lh-body: 2.05;
	--col: 1160px;

	/* Webフォントは読み込まない。OS標準の和文ゴシックのみ */
	--f: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
	--f-num: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ==============================================================
   02. リセット
   ============================================================== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f);
	/* 和文の追い込み。約物のアキを詰めて締まって見せる */
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* 禁則処理 */
	line-break: strict;
	word-break: normal;
	overflow-wrap: anywhere;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* 数字だけ等幅にして、件数や番号の桁を揃える */
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--accent-w); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; overflow: hidden; position: absolute !important;
	word-wrap: normal !important;
}

.skip {
	position: absolute; left: var(--s3); top: -60px; z-index: 999;
	background: var(--ink); color: #fff; font-size: var(--t-sm);
	padding: 12px 20px; transition: top .15s;
}
.skip:focus { top: var(--s3); }

.wrap { max-width: var(--col); margin: 0 auto; padding: 0 var(--s4); }

/* ==============================================================
   03. ヘッダー / ナビ
   ============================================================== */
.prog {
	position: fixed; top: 0; left: 0; height: 2px;
	background: var(--ink); width: 0; z-index: 80;
	transition: width .1s linear;
}

.hd {
	position: sticky; top: 0; z-index: 70;
	background: var(--paper); border-bottom: 1px solid var(--line);
}
.hd-in { display: flex; align-items: center; gap: var(--s4); min-height: 60px; }

.logo {
	font-weight: 700; font-size: 20px; letter-spacing: -.032em;
	display: flex; align-items: baseline; gap: 2px; padding: 8px 0; flex: none;
}
.logo i { width: 5px; height: 5px; background: var(--accent); display: inline-block; }
.logo small {
	font-weight: 400; font-size: var(--t-xs); color: var(--ink-3);
	margin-left: var(--s2); letter-spacing: 0;
}
.logo-img img { max-height: 34px; width: auto; }

.nav { margin-left: auto; }
.nav .nav-list { display: flex; gap: var(--s4); }
.nav .nav-list a {
	display: block; font-size: var(--t-base); color: var(--ink-2);
	padding: 19px 0; border-bottom: 1px solid transparent; margin-bottom: -1px;
	transition: color .12s, border-color .12s;
}
.nav .nav-list a:hover,
.nav .nav-list a[aria-current],
.nav .nav-list .current-menu-item > a,
.nav .nav-list .current-cat > a { color: var(--ink); border-color: var(--ink); }

.hd-btns { display: flex; gap: var(--s2); align-items: center; }
.iconbtn {
	min-width: 44px; height: 44px; display: grid; place-items: center;
	color: var(--ink-2); font-size: var(--t-base); line-height: 1;
}
.iconbtn:hover { color: var(--ink); }
.burger { display: none; font-size: 17px; }

/* ==============================================================
   04. 検索オーバーレイ / ドロワー
   ============================================================== */
.ov {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(16, 17, 20, .28); opacity: 0; transition: opacity .15s;
}
.ov.on { opacity: 1; }
.ovbox { background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--s5) 0; }
.ovbox .in { max-width: 640px; margin: 0 auto; padding: 0 var(--s4); }
.ovbox .field {
	display: flex; align-items: center; gap: var(--s3);
	border-bottom: 1px solid var(--ink); padding-bottom: var(--s3);
}
.ovbox .field input {
	flex: 1; font-size: 19px; border: 0; outline: 0; background: none;
	color: var(--ink); min-width: 0; padding: 4px 0;
}
.ovbox .field input::placeholder { color: var(--ink-3); }
.ovbox .close { font-size: var(--t-sm); color: var(--ink-3); padding: 8px; white-space: nowrap; }
.ovbox .close:hover { color: var(--ink); }
.ovbox h5 { font-size: var(--t-xs); letter-spacing: .16em; color: var(--ink-3); margin: var(--s4) 0 var(--s2); font-weight: 400; }
.ovbox .kw { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ovbox .kw a {
	font-size: var(--t-sm); color: var(--ink-2);
	border: 1px solid var(--line); padding: 9px 14px;
}
.ovbox .kw a:hover { border-color: var(--ink); color: var(--ink); }

.dw {
	position: fixed; inset: 0; z-index: 210;
	background: rgba(16, 17, 20, .28); opacity: 0; transition: opacity .2s;
}
.dw.on { opacity: 1; }
.dw-in {
	position: absolute; right: 0; top: 0; bottom: 0;
	width: min(320px, 86%); background: var(--paper);
	padding: var(--s4); overflow: auto; border-left: 1px solid var(--line);
	transform: translateX(100%); transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.dw.on .dw-in { transform: none; }
.dw-in .top {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: var(--s4); border-bottom: 1px solid var(--line);
}
.dw-in h5 { font-size: var(--t-xs); letter-spacing: .16em; color: var(--ink-3); margin: var(--s5) 0 var(--s2); font-weight: 400; }
.dw-in nav a,
.dw-in .dw-menu a {
	display: flex; align-items: center; justify-content: space-between;
	font-size: 15px; padding: 15px 0; border-bottom: 1px solid var(--line-2);
}
.dw-in nav a span { font-size: var(--t-xs); color: var(--ink-3); }

/* ==============================================================
   05. 広告
   高さを先に確保して、読み込み後にレイアウトが動かないようにする（CLS 0）
   ============================================================== */
/*
 * 重要：.ad を flex / grid にしてはいけません。
 * AdSense の <ins class="adsbygoogle"> は幅の指定を持たないため、
 * flex アイテムになると幅が 0 に潰れ、広告が一切表示されなくなります。
 * （status=done なのに 0x0 になる典型的な症状）
 * そのため block レイアウトで組み、ins には明示的に width:100% を与えます。
 */
.ad {
	/* 背景色は敷かない。広告が配信されなかったときに灰色の箱だけが残るのを避ける */
	background: transparent;
	display: block;
	color: var(--ink-3); font-size: var(--t-sm);
	text-align: center; padding: var(--s3);
	line-height: 1.7;
}
.ad > * { max-width: 100%; }
/* サイドバーの広告は左右余白なし。300px の枠をそのまま使えるようにする */
.side .adblock--flush .ad { padding-left: 0; padding-right: 0; }
.ad ins.adsbygoogle,
.ad .adsbygoogle {
	display: block !important;
	width: 100% !important;
	margin: 0 auto;
}
/* 広告本体は中央に。プレースホルダ文言用 */
.ad .l { display: block; font-size: 10px; letter-spacing: .2em; color: #B3B7BD; }

.adblock { margin: var(--s5) 0; }
.adblock--flush { margin: 0; }
.adblock .cap {
	font-size: 10px; letter-spacing: .18em; color: var(--ink-3);
	text-align: center; padding-bottom: var(--s2);
}
.adblock .cap:empty { display: none; }

/* AdSense が広告を配信できなかった枠は、ラベルごと畳む。
   （在庫切れのとき data-ad-status="unfilled" が付く） */
.adblock:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.anchor:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
/* :has() が使えないブラウザ、および「処理されないまま空だった」枠は JS で畳む */
.adblock.is-empty,
.anchor.is-empty { display: none !important; }

.ad-lb { min-height: 104px; }    /* 728×90 / 320×100 */
.ad-rect { min-height: 280px; }  /* 300×250 */
.ad-half { min-height: 600px; }  /* 300×600 */
.side .ad ins.adsbygoogle { max-width: 336px; }
.ad-in { min-height: 250px; }    /* 記事内 */

/* 記事内の広告だけ本文幅より広く出して視認性を上げる */
.body .adblock { max-width: none; margin: var(--s6) 0; }  /* 本文中は広めのまま */
.body .adblock .ad { width: 100%; }

/* スマホ下部アンカー */
.anchor {
	display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 76;
	background: var(--paper); border-top: 1px solid var(--line);
	padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
}
.anchor .ad { min-height: 54px; padding: 4px; background: none; display: block; }
.anchor.is-hidden { display: none !important; }
.anchor-close {
	position: absolute; right: 6px; top: -22px;
	width: 26px; height: 22px; background: var(--paper);
	border: 1px solid var(--line); border-bottom: 0;
	font-size: 13px; line-height: 1; color: var(--ink-3);
}

/* ==============================================================
   06. レイアウト
   ============================================================== */
.grid {
	display: grid; grid-template-columns: minmax(0, 1fr) 336px;
	gap: var(--s6); padding: var(--s6) 0 var(--s6);
	/* align-items は stretch のまま。サイドバーを本文と同じ高さに伸ばすことで、
	   .sticky が追従できる「余白」を親の中に確保する。 */
	align-items: stretch;
}
/* グリッド項目が中身の最小幅で押し広げられるのを防ぐ */
.grid > * { min-width: 0; }

.sec {
	display: flex; align-items: baseline; gap: var(--s3);
	margin: var(--s6) 0 var(--s1); padding-bottom: var(--s2);
	border-bottom: 1px solid var(--ink);
}
.sec h2 { font-size: var(--t-base); font-weight: 700; letter-spacing: .02em; }
.sec .c { font-size: var(--t-sm); color: var(--ink-3); }
.sec a.all {
	margin-left: auto; font-size: var(--t-sm); color: var(--ink-2);
	border-bottom: 1px solid var(--line); padding-bottom: 1px;
}
.sec a.all:hover { color: var(--ink); border-color: var(--ink); }

/* 画像プレースホルダ（アイキャッチ未設定でも高さが決まる） */
.ph { position: relative; overflow: hidden; background: var(--soft); }
.ph::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(135deg, #DFE1E5, #B9BDC4);
}
.ph.has-img::after { display: none; }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* ==============================================================
   07. 記事一覧
   ============================================================== */
.lead { display: block; }
.lead figure { margin: 0; }
.lead .ph { aspect-ratio: 16 / 9; }
.lead .m {
	display: flex; gap: var(--s3); align-items: baseline;
	margin-top: var(--s4); font-size: var(--t-sm); color: var(--ink-3);
}
.cat { color: var(--ink); font-weight: 700; }
.lead h2 {
	font-size: var(--t-lead); font-weight: 700; line-height: 1.58;
	letter-spacing: -.022em; margin-top: var(--s2); max-width: 24em;
}
.lead:hover h2 {
	text-decoration: underline; text-underline-offset: 5px;
	text-decoration-thickness: 1px; text-decoration-color: var(--ink-3);
}
.lead p {
	font-size: var(--t-base); line-height: 2; color: var(--ink-2);
	margin-top: var(--s3); max-width: 40em;
}

.list li { border-bottom: 1px solid var(--line-2); }
.list a {
	display: grid; grid-template-columns: minmax(0, 1fr) 168px;
	gap: var(--s4); padding: var(--s4) 0; align-items: start;
}
.list .ph { aspect-ratio: 16 / 10; }
.list .m {
	display: flex; gap: var(--s3); align-items: baseline;
	font-size: var(--t-sm); color: var(--ink-3);
}
.list h3 {
	font-size: var(--t-h3); font-weight: 700; line-height: 1.68;
	margin-top: var(--s2); letter-spacing: -.012em;
}
.list a:hover h3 {
	text-decoration: underline; text-underline-offset: 4px;
	text-decoration-thickness: 1px; text-decoration-color: var(--ink-3);
}
.list p {
	font-size: var(--t-sm); line-height: 1.95; color: var(--ink-2);
	margin-top: var(--s2);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.empty, .empty-state { padding: var(--s6) 0; font-size: var(--t-base); color: var(--ink-2); line-height: 2; }
.empty-state .sub { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s2); }

/* ==============================================================
   08. サイドバー
   ============================================================== */
.side { display: flex; flex-direction: column; gap: var(--s5); align-self: stretch; }
/* 追従ブロックより上の要素は自然な高さのままにする */
.side > *:not(.sticky) { flex: 0 0 auto; }

.w h4 {
	font-size: var(--t-xs); letter-spacing: .18em; color: var(--ink-3);
	padding-bottom: var(--s2); border-bottom: 1px solid var(--ink);
	margin-bottom: var(--s1); font-weight: 400;
}

.pop li { border-bottom: 1px solid var(--line-2); }
.pop a {
	display: grid; grid-template-columns: 20px minmax(0, 1fr);
	gap: var(--s3); padding: 13px 0; align-items: baseline;
}
.rk { font-size: var(--t-xs); color: var(--ink-3); }
.pop .pt { font-size: var(--t-base); line-height: 1.75; }
.pop a:hover .pt {
	text-decoration: underline; text-underline-offset: 3px;
	text-decoration-color: var(--ink-3);
}

.cats a {
	display: flex; justify-content: space-between; align-items: baseline;
	font-size: var(--t-base); padding: 12px 0;
	border-bottom: 1px solid var(--line-2); color: var(--ink-2);
}
.cats a span { font-size: var(--t-xs); color: var(--ink-3); }
.cats a:hover { color: var(--ink); }

/* サイドバー追従。ここが「スクロールしても残る」領域。
   300×600 のように画面より背の高い枠は、JS が top をマイナスに調整して
   「下端が画面に収まったところで止まる」動きにする（js/main.js の fixSticky）。 */
.sticky {
	position: sticky; top: 80px;
	/* 横方向は必ず伸ばす。start にすると中身の幅に潰れて広告が出なくなる */
	align-self: stretch; width: 100%;
	display: flex; flex-direction: column; gap: var(--s5);
	margin-bottom: auto;
}

/* ウィジェットの既定見た目 */
/* ブロックウィジェット（WP5.8以降）は h2/h3 で見出しを出すので、まとめて整える */
.side .widget h2,
.side .widget h3,
.side .widget .wp-block-heading,
.side .widget-title {
	font-size: var(--t-xs); letter-spacing: .18em; color: var(--ink-3);
	padding-bottom: var(--s2); border-bottom: 1px solid var(--ink);
	margin-bottom: var(--s1); font-weight: 400;
}
.side .widget p { font-size: var(--t-sm); line-height: 1.95; color: var(--ink-2); }
.widget ul { font-size: var(--t-base); }
.widget ul li { border-bottom: 1px solid var(--line-2); }
.widget ul li a { display: block; padding: 12px 0; color: var(--ink-2); line-height: 1.7; }
.widget ul li a:hover { color: var(--ink); }
.widget select { width: 100%; padding: 10px; border: 1px solid var(--line); background: var(--paper); }

/* ==============================================================
   09. 記事ページ
   ============================================================== */
.crumb {
	font-size: var(--t-sm); color: var(--ink-3);
	display: flex; gap: var(--s2); flex-wrap: wrap; align-items: baseline;
}
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.art h1 {
	font-size: var(--t-h1); font-weight: 700; line-height: 1.54;
	letter-spacing: -.026em; margin-top: var(--s3); max-width: 21em;
}
.art .lede {
	font-size: var(--t-base); line-height: 2.05; color: var(--ink-2);
	margin-top: var(--s3); max-width: 36em;
}
.art .stamp {
	display: flex; gap: var(--s4); flex-wrap: wrap;
	font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s4);
	padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.art .stamp a:hover { color: var(--ink); }
.art > figure { margin: var(--s5) 0 0; }
.art > figure .ph { aspect-ratio: 16 / 9; }
figcaption { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s2); line-height: 1.75; }

.toc {
	margin-top: var(--s5); padding: var(--s4) 0;
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.toc h4 { font-size: var(--t-xs); letter-spacing: .18em; color: var(--ink-3); margin-bottom: var(--s2); font-weight: 400; }
.toc ol { counter-reset: t; }
.toc li {
	counter-increment: t; padding: 6px 0 6px 28px; position: relative;
	font-size: var(--t-base); line-height: 1.75;
}
.toc li::before {
	content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: 6px;
	font-family: var(--f-num); font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em;
}
.toc a { color: var(--ink-2); border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--ink); border-color: var(--ink); }

/* --- 本文 --- */
.body {
	font-size: var(--t-body); line-height: var(--lh-body);
	letter-spacing: .012em; margin-top: var(--s6);
}
.body > * { max-width: 38em; }
.body > .adblock,
.body > figure,
.body > .wp-block-image,
.body > .wp-block-table,
.body > .wp-block-embed,
.body > .alignwide,
.body > .alignfull { max-width: none; }

.body p { margin: 1.6em 0; }
.body a { border-bottom: 1px solid var(--ink-3); padding-bottom: 1px; }
.body a:hover { color: var(--accent); border-color: var(--accent); }

.body h2 {
	font-size: var(--t-h2); font-weight: 700; line-height: 1.6;
	margin: 2.8em 0 .9em; padding-bottom: 11px;
	border-bottom: 1px solid var(--ink); letter-spacing: -.014em;
	scroll-margin-top: 80px;
}
.body h3 {
	font-size: var(--t-h3); font-weight: 700; margin: 2.3em 0 .6em;
	letter-spacing: -.008em; scroll-margin-top: 80px;
}
.body h4 { font-size: 15.5px; font-weight: 700; margin: 2em 0 .5em; }

.body ul, .body ol { margin: 1.5em 0; }
.body ul li { padding-left: 22px; position: relative; margin: .55em 0; list-style: none; }
.body ul li::before {
	content: ""; position: absolute; left: 0; top: .95em;
	width: 11px; height: 1px; background: var(--ink-3);
}
.body ol { counter-reset: n; }
.body ol li { counter-increment: n; padding-left: 28px; position: relative; margin: .55em 0; list-style: none; }
.body ol li::before {
	content: counter(n) "."; position: absolute; left: 0;
	font-family: var(--f-num); font-size: .86em; color: var(--ink-3);
}

.body figure { margin: 2.6em 0; }
.body figure img { width: 100%; }

.body blockquote {
	margin: 2.4em 0; padding: 0 0 0 var(--s4);
	border-left: 2px solid var(--ink);
	font-size: 15.5px; line-height: 2; color: var(--ink-2);
}
.body blockquote cite {
	display: block; font-size: var(--t-sm); color: var(--ink-3);
	font-style: normal; margin-top: var(--s2);
}

.body table { border-collapse: collapse; width: 100%; font-size: var(--t-base); }
.body th, .body td {
	padding: 13px 16px; border-bottom: 1px solid var(--line);
	text-align: left; line-height: 1.75;
}
.body thead th { border-bottom: 1px solid var(--ink); font-weight: 700; white-space: nowrap; }
.body tbody th { font-weight: 700; white-space: nowrap; color: var(--ink-2); }

.body pre {
	background: var(--soft); padding: var(--s4); overflow-x: auto;
	font-size: 13px; line-height: 1.8; margin: 2em 0;
}
.body code {
	background: var(--soft); padding: 2px 6px; font-size: .92em;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.body pre code { background: none; padding: 0; }

.body hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }

/* --- タグ / シェア / 著者 --- */
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.tags a {
	font-size: var(--t-sm); color: var(--ink-2); border: 1px solid var(--line);
	padding: 8px 14px; min-height: 36px; display: inline-flex; align-items: center;
}
.tags a:hover { border-color: var(--ink); color: var(--ink); }

.share {
	display: flex; gap: var(--s4); margin-top: var(--s5);
	padding-top: var(--s4); border-top: 1px solid var(--ink);
	font-size: var(--t-sm); color: var(--ink-2); flex-wrap: wrap;
}
.share a, .share button {
	border-bottom: 1px solid transparent; padding: 10px 0;
	font-size: var(--t-sm); color: var(--ink-2);
}
.share a:hover, .share button:hover { color: var(--ink); border-color: var(--ink); }
.share .done { color: var(--accent); border-color: var(--accent); }

.author {
	display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s4);
	margin-top: var(--s6); padding: var(--s4) 0;
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.author .av { width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--soft); }
.author .av img { width: 100%; height: 100%; border-radius: 50%; }
.author .n { font-size: var(--t-base); font-weight: 700; }
.author p { font-size: var(--t-sm); line-height: 1.95; color: var(--ink-2); margin-top: var(--s2); }

/* ※ 以前ここにあった .next 系のスタイルは削除しました。
   WordPress のページ送りリンク <a class="next page-numbers"> と
   クラス名が衝突し、「次へ」だけが下にずれる原因になっていたためです。
   関連記事は .sec + .list（一覧と同じ体裁）で表示します。 */

/* ==============================================================
   10. 一覧・検索結果
   ============================================================== */
.cat-hd h1 {
	font-size: clamp(21px, 1.7vw + 15px, 27px); font-weight: 700;
	letter-spacing: -.022em; margin-top: var(--s3);
}
.cat-hd .n { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s2); }
.cat-hd p {
	font-size: var(--t-base); line-height: 2; color: var(--ink-2);
	margin-top: var(--s3); max-width: 38em;
}
.subs {
	display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4);
	padding-bottom: var(--s2); border-bottom: 1px solid var(--ink);
}
.subs a {
	font-size: var(--t-base); color: var(--ink-2);
	padding: 10px 0 3px; border-bottom: 1px solid transparent;
}
.subs a.on, .subs a:hover { color: var(--ink); border-color: var(--ink); }

.hit { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s2); }
.hit b { color: var(--ink); font-weight: 700; }
mark { background: var(--accent-w); color: inherit; padding: 0 2px; }

.searchbox { margin-top: var(--s4); max-width: 30em; }
.searchform { display: flex; gap: var(--s2); border-bottom: 1px solid var(--ink); }
.searchform input {
	flex: 1; border: 0; outline: 0; background: none;
	font-size: var(--t-base); padding: 12px 0; min-width: 0;
}
.searchform button { font-size: var(--t-sm); color: var(--ink-2); padding: 0 var(--s2); }
.searchform button:hover { color: var(--ink); }

/* ページ送り
   WordPress が出力する実際のマークアップ：
   <nav class="navigation pagination"><div class="nav-links">
     <span class="page-numbers current">1</span>
     <a class="page-numbers">2</a>
     <span class="page-numbers dots">…</span>
     <a class="next page-numbers">次へ</a>
   </div></nav>
   nav 自体を flex にすると、中の nav-links がブロックのままで縦積みになるため、
   flex は必ず .nav-links 側にかける。 */
.navigation.pagination,
.navigation.posts-navigation {
	margin-top: var(--s6);
}
.navigation .nav-links {
	display: flex; flex-wrap: wrap;
	gap: var(--s2); justify-content: center; align-items: center;
}
.page-numbers {
	min-width: 44px; height: 44px; padding: 0 14px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: var(--t-base); line-height: 1;
	color: var(--ink-2); border: 1px solid var(--line);
	transition: border-color .12s, color .12s, background-color .12s;
}
.page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.page-numbers.current {
	background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700;
}
.page-numbers.dots {
	border-color: transparent; min-width: 24px; padding: 0;
	color: var(--ink-3); letter-spacing: .1em;
}
.page-numbers.dots:hover { border-color: transparent; color: var(--ink-3); }
.page-numbers.prev,
.page-numbers.next { padding: 0 18px; }

/* 記事内のページ分割（wp_link_pages） */
.pager--inline { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s5); flex-wrap: wrap; }
.pager--inline a,
.pager--inline > span {
	min-width: 44px; height: 44px; padding: 0 14px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: var(--t-base); border: 1px solid var(--line); color: var(--ink-2);
}
.pager--inline > span { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ==============================================================
   11. 404
   ============================================================== */
.nf { padding: var(--s8) 0 var(--s6); text-align: center; max-width: 34em; margin: 0 auto; }
.nf .code {
	font-size: clamp(48px, 6vw + 24px, 84px); font-weight: 700;
	letter-spacing: -.05em; color: #D2D5DA; line-height: 1;
}
.nf h1 {
	font-size: clamp(19px, 1.4vw + 14px, 24px); font-weight: 700;
	margin: var(--s4) auto 0; letter-spacing: -.02em; max-width: 16em; line-height: 1.65;
}
.nf p { font-size: var(--t-base); line-height: 2.05; color: var(--ink-2); margin-top: var(--s3); }
.nf .acts { display: flex; gap: var(--s4); justify-content: center; margin-top: var(--s5); flex-wrap: wrap; }
.nf .acts a {
	font-size: var(--t-base); min-height: 44px; display: inline-flex; align-items: center;
	border-bottom: 1px solid var(--ink); padding: 0 2px;
}
.nf .acts a:hover { color: var(--accent); border-color: var(--accent); }
.nf-ad { max-width: 728px; margin: 0 auto; }
.nf-list { max-width: 720px; margin: 0 auto; padding-bottom: var(--s7); }

/* ==============================================================
   12. コメント
   ============================================================== */
.comments-area { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--ink); }
.comments-area h2, .comments-area h3 { font-size: var(--t-base); font-weight: 700; margin-bottom: var(--s4); }
.comment-list li { padding: var(--s4) 0; border-bottom: 1px solid var(--line-2); }
.comment-list .children { padding-left: var(--s4); }
.comment-meta { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s2); }
.comment-content { font-size: var(--t-base); line-height: 1.95; }
.comment-form label { display: block; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: 6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; border: 1px solid var(--line); background: var(--paper);
	padding: 12px; font-size: var(--t-base); margin-bottom: var(--s3);
}
.comment-form .submit {
	border: 1px solid var(--ink); background: var(--ink); color: #fff;
	padding: 13px 28px; font-size: var(--t-base); cursor: pointer; min-height: 44px;
}
.comment-form .submit:hover { background: var(--accent); border-color: var(--accent); }
.comment-notes, .comment-form .logged-in-as {
	font-size: var(--t-sm); color: var(--ink-3); line-height: 1.9; margin-bottom: var(--s3);
}
.comment-reply-title { font-size: var(--t-base); font-weight: 700; margin-bottom: var(--s3); }
.comment-list .comment-author { font-size: var(--t-base); font-weight: 700; }
.comment-list .comment-author img { display: inline-block; vertical-align: middle; margin-right: var(--s2); border-radius: 50%; }
.comment-list .reply { font-size: var(--t-sm); margin-top: var(--s2); }
.comment-list .reply a { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.comment-list .reply a:hover { color: var(--ink); border-color: var(--ink); }
.no-comments { font-size: var(--t-sm); color: var(--ink-3); padding: var(--s4) 0; }
.comment-form-cookies-consent { display: flex; gap: var(--s2); align-items: flex-start; margin-bottom: var(--s3); }
.comment-form-cookies-consent label { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* ==============================================================
   13. フッター / 補助UI
   ============================================================== */
.ft { border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s5); margin-top: var(--s6); }
.ft-in { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: var(--s6); }
.ft h5 {
	font-weight: 700; font-size: 19px; letter-spacing: -.032em;
	margin-bottom: var(--s2); display: flex; align-items: baseline; gap: 2px;
}
.ft h5 i { width: 5px; height: 5px; background: var(--accent); display: inline-block; }
.ft p { font-size: var(--t-sm); line-height: 2; color: var(--ink-2); max-width: 26em; }
.ft h6 { font-size: var(--t-xs); letter-spacing: .18em; color: var(--ink-3); margin-bottom: var(--s2); font-weight: 400; }
.ft-nav a { display: block; font-size: var(--t-sm); padding: 7px 0; color: var(--ink-2); }
.ft-nav a:hover { color: var(--ink); }
.ft-nav ul, .ft-nav li { list-style: none; }
.ft-nav li::marker { content: none; }
.ft-b {
	margin-top: var(--s6); font-size: var(--t-xs); color: var(--ink-3);
	letter-spacing: .06em; display: flex; gap: var(--s4); flex-wrap: wrap; align-items: baseline;
}

.totop {
	position: fixed; right: var(--s4); bottom: var(--s4); z-index: 75;
	width: 44px; height: 44px; background: var(--paper);
	border: 1px solid var(--line); display: none; place-items: center;
	font-size: 13px; color: var(--ink-2);
}
.totop.on { display: grid; }
.totop:hover { border-color: var(--ink); color: var(--ink); }

/* ==============================================================
   14. WordPress 標準クラス
   ============================================================== */
.alignleft { float: left; margin: .5em var(--s4) var(--s3) 0; }
.alignright { float: right; margin: .5em 0 var(--s3) var(--s4); }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignwide { width: 100%; }
.alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption {
	font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s2); line-height: 1.75;
}
.sticky-post { display: block; }
.wp-block-table { overflow-x: auto; }
.wp-block-quote { margin: 2.4em 0; padding-left: var(--s4); border-left: 2px solid var(--ink); }
.wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }
.wp-block-button__link {
	display: inline-block; background: var(--ink); color: #fff;
	padding: 14px 28px; font-size: var(--t-base); border-bottom: 0;
}
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 2.4em 0; }
.gallery-item { margin: 0; }

/* ==============================================================
   15. レスポンシブ
   ============================================================== */
@media (max-width: 1000px) {
	.grid { grid-template-columns: 1fr; gap: var(--s6); }
	.sticky { position: static; }
	.side { gap: var(--s5); }
}

@media (max-width: 782px) {
	:root { --s6: 40px; --s7: 56px; --s8: 96px; }

	.wrap { padding: 0 var(--s3); }
	.nav { display: none; }
	.burger { display: grid; }
	.anchor { display: block; }
	.totop { display: none !important; }

	.grid { padding: var(--s5) 0 var(--s6); }
	.logo small { display: none; }

	.list a { grid-template-columns: minmax(0, 1fr) 100px; gap: var(--s3); padding: var(--s3) 0; }
	.list p { display: none; }

	.body > * { max-width: none; }
	/* 表は横スクロールで逃がす */
	.body table { display: block; overflow-x: auto; white-space: nowrap; }
	.body th, .body td { white-space: normal; min-width: 8em; }

	.art .stamp { gap: var(--s3); }
	/* パンくずの最後（記事タイトル）は長くなりがちなので1行に省略 */
	.crumb > span:last-child {
		max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.author { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3); }
	.author .av { width: 44px; height: 44px; }

	.ft-in { grid-template-columns: 1fr; gap: var(--s5); }
	.gallery { grid-template-columns: repeat(2, 1fr); }

	/* 下部アンカーぶんの余白 */
	.ft { padding-bottom: calc(var(--s5) + 70px); }
}

@media (max-width: 480px) {
	.list a { grid-template-columns: minmax(0, 1fr) 88px; }
	.share { gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}

/* ==============================================================
   16. 印刷
   ============================================================== */
@media print {
	.hd, .side, .adblock, .anchor, .totop, .share, .next, .prog,
	.ft, .tags, .ov, .dw, .skip, .comments-area { display: none !important; }
	.grid { display: block; padding: 0; }
	.body { font-size: 11pt; line-height: 1.8; }
	.body > * { max-width: none; }
	a { text-decoration: none; color: #000; }
	.body a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}