/*!
Theme Name: AI-PLEX
Theme URI: https://ai-plex.jp/
Author: TetsuroMawatari
Description: AIテックブログ「AI-PLEX」オリジナルテーマ。design_handoff_ai_plex/ のハンドオフ仕様に基づく _s (underscores) ベースの実装。
Version: 1.0.125
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ai-plex
Tags: blog, custom-menu, featured-images
*/

/* =========================================================================
   1. デザイントークン (design.md §1)
   ========================================================================= */
:root {
	--bg: #fafaf7;
	--ink: #16181d;
	--blue: #2447e8;
	--violet: #7c3aed;
	--purple: #a855f7;
	--blue-light: #5577ff;
	--violet-light: #a78bfa;
	--purple-light: #c084fc;
	--text-sub: #5c584d;
	--text-muted: #8a8677;
	--text-faint: #a09b8c;
	--border: #e6e3da;
	--border-light: #eceadf;
	--border-input: #d9d5ca;
	--header-input-bg: #23262e;
	--header-input-border: #3a3e48;
	--header-input-text: #8a8f9c;
	--amazon: #ffa41c;
	--rss: #f59e0b;
	--required: #e0457b;
	--grad-h: linear-gradient(90deg, #2447e8, #a855f7);
	--grad-v: linear-gradient(180deg, #2447e8, #a855f7);
	--font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; /* 2026-10-21: 表示速度のため日本語Webフォント(IBM Plex Sans JP・61ファイル/587KB)を廃止し端末標準に(運営者GO・案C) */
	--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

/* =========================================================================
   2. ベース
   ========================================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 14.5px; /* 2026-09-11運営者指示: PC全般を拡大(13.5→14→14.5px) */
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
}

/* フッターを常に画面下端へ (コンテンツが短いページ対策) */
.site {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

.site-content-wrap {
	width: 100%;
	flex: 1;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--blue);
	text-decoration: none;
}

a:hover {
	color: #1a5cab;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.5;
	margin: 0;
	font-weight: 700;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* _s 由来のユーティリティ */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip-path: none;
	color: var(--ink);
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
}

/* 共通部品 */
.meta-sep {
	margin: 0 6px;
	color: var(--text-faint);
}

.badge-gradient,
.badge-new {
	display: inline-block;
	background: var(--grad-h);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.5px;
	border-radius: 999px;
	padding: 3px 10px;
	line-height: 1.6;
}

/* NEW=黄色の点+文字・背景なし(2026-10-02運営者決定A案)、カテゴリ=紫グラデ */
.badge-new {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	color: var(--ink);
	font-weight: 600;
	letter-spacing: 1px;
	padding: 0;
	border-radius: 0;
}

.badge-new::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ffc400;
	flex: none;
}

.hero-badge-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.btn-black,
.btn-outline {
	display: inline-block;
	border-radius: 999px;
	padding: 10px 26px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
}

.btn-black {
	background: var(--ink);
	color: #fff;
}

.btn-black:hover {
	background: #000;
	color: #fff;
}

.btn-outline {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--border-input);
}

.btn-outline:hover {
	color: var(--blue);
}

.btn-amazon {
	display: inline-block;
	background: var(--amazon);
	color: var(--ink);
	font-weight: 700;
	font-size: 12px;
	border-radius: 999px;
	padding: 7px 18px;
	line-height: 1.6;
}

.btn-amazon:hover {
	color: var(--ink);
	filter: brightness(0.95);
}

/* グラデ左バー見出し (border-image禁止 → background実装。design.md §1) */
.gradient-bar-heading,
.entry-content h2 {
	background: var(--grad-v) left top / 4px 100% no-repeat;
	padding-left: 18px;
}

/* =========================================================================
   3. ヘッダー (design.md §3)
   ========================================================================= */
.site-header {
	background: var(--ink);
}

.site-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 18px 48px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.site-wordmark {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 2.5px;
	color: #fff;
	white-space: nowrap;
}

.site-tagline {
	font-size: 18px; /* 2026-09-20運営者指示: 12pxの1.5倍に拡大(SPは従来どおり11px) */
	color: #e8eaef; /* 2026-09-20運営者指示: ほんの少しだけ落とした白(ロゴの純白よりわずかに控えめ。#8a8f9c→#b8bdc9→#e8eaefの変遷) */
	border-left: 1px solid var(--header-input-border);
	padding-left: 14px;
	line-height: 1.5;
}

/* 中間幅で折り返す場合は「、」の後ろで改行し、語の途中で切らない(2026-10-14: PC文言を「〜解説しています。」に延長) */
.site-tagline > span {
	display: inline-block;
}

.site-header-tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-search-field {
	background: var(--header-input-bg);
	border: 1px solid var(--header-input-border);
	border-radius: 999px;
	color: #fff;
	font-family: var(--font-sans);
	font-size: 12px;
	padding: 7px 16px;
	width: 180px;
	outline: none;
}

.header-search-field::placeholder {
	color: var(--header-input-text);
}

.header-search-toggle {
	display: none; /* PCは入力欄を常時表示、トグルはSPのみ */
}

/* ヘッダーの𝕏ボタンは撤去(2026-09-20運営者指示: ✕=閉じるに誤認されるため) */

/* カテゴリタブ (TOPのみ) */
.category-tabs {
	background: var(--ink);
	border-top: 1px solid var(--header-input-border);
	position: relative; /* 右端の「まだ続く」表示用(2026-09-20) */
}

/* タブが横に隠れているときだけ右端にフェード+「›」を出す(判定はjs/theme.js。2026-09-20運営者GO・Codexレビュー対応) */
.category-tabs::after {
	content: "›";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10px;
	/* タブ下線ゾーン(5px)+グリフの下寄り分を補正して上下中央に(2026-09-20運営者指摘) */
	padding-bottom: 12px;
	font-size: 20px;
	line-height: 1;
	color: #b8bdc9;
	background: linear-gradient(90deg, rgba(22, 24, 29, 0), #16181d 65%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}

.category-tabs.tabs-scrollable::after {
	opacity: 1;
}

.category-tabs-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 48px;
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scrollbar-width: none; /* スクロールバー非表示(スワイプは可能) */
	-ms-overflow-style: none;
}

.category-tabs-inner::-webkit-scrollbar {
	display: none;
}

.category-tab {
	color: var(--header-input-text);
	font-size: 13px;
	font-weight: 600;
	padding: 12px 2px;
	white-space: nowrap;
	border-bottom: 5px solid transparent; /* 太さはis-activeと揃える(切替時のガタつき防止)。2026-08-28に2px→5px(運営者指示: 分かりづらい) */
}

.category-tab:hover {
	color: #fff;
}

.category-tab.is-active {
	color: var(--blue-light);
	border-image: none;
	border-bottom: 5px solid;
	border-color: var(--purple);
}

/* =========================================================================
   4. レイアウト
   ========================================================================= */
.site-content-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 48px 64px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}

.no-sidebar .site-content-wrap,
.site-content-narrow {
	display: block;
}

.site-content-narrow .site-main {
	max-width: 760px;
	margin: 0 auto;
}

.site-content-contact .site-main {
	max-width: 640px;
}

/* =========================================================================
   5. パンくず
   ========================================================================= */
.breadcrumb {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-faint);
	margin-bottom: 22px;
}

.breadcrumb a {
	color: var(--text-faint);
}

.breadcrumb a:hover {
	color: var(--blue);
}

.breadcrumb-sep {
	margin: 0 4px;
}

/* =========================================================================
   6. TOP: ヒーロー (2026-08-16改訂: 画像とテキストを重ねない分割カード)
   ========================================================================= */
/* ヒーロー: 画像は左カラムにアイキャッチと同比率(1200:630)でぴったり収める。
   本文側をline-clampで画像より低く抑えることで、隙間・トリミングの両方をゼロにする
   (2026-08-22運営者決定: 表示枠の比率は全箇所でアイキャッチと揃える) */
.hero {
	/* 2026-08-29運営者決定: PCも縦積み(画像上・本文下)に変更。
	   旧2カラムグリッドは中間幅で「画像が比率維持のため幅を要求→本文列が押し潰される」事故があった */
	display: block;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 8px;
}

.hero-media {
	display: block; /* span要素のため明示(グリッド時代は自動ブロック化されていた) */
	position: relative;
	aspect-ratio: 1200 / 630;
	min-height: 0;
	min-width: 0;
}

.hero-image,
.hero-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* 枠と画像が同比率なので実質無トリミング */
	display: block;
}

.hero-placeholder {
	background: linear-gradient(135deg, #141028, #2447e8 55%, #a855f7);
}

.hero-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	padding: 24px 28px;
	min-width: 0;
}

.hero-title {
	color: var(--ink);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero:hover .hero-title {
	color: var(--blue);
}

.hero-excerpt {
	color: var(--text-sub);
	font-size: 14.5px;
	line-height: 1.8;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero-meta {
	color: var(--text-faint);
	font-family: var(--font-mono);
	font-size: 12px;
}

/* カテゴリTOPの1件目(B案・2026-10-17): 十分な幅があるときだけ左に図解・右に本文。
   中間幅で本文列が押し潰された過去の事故(2026-08-29)を避けるため、狭い幅は縦積みのまま */
@media (min-width: 1100px) {
	.hero-split {
		display: grid;
		grid-template-columns: 56% 1fr;
		align-items: center;
	}
	.hero-split .hero-body {
		padding: 18px 24px;
	}
	.hero-split .hero-title {
		font-size: 21px;
	}
	/* 本文側が図解より高くなると上下に白帯が出るため、抜粋は1行に(2026-10-17。タイトルは3行まで読ませる) */
	.hero-split .hero-excerpt {
		-webkit-line-clamp: 1;
	}
}

/* 中間幅(1100〜1279px)は本文側が図解より高くなり上下に白帯が出るため、抜粋を隠しタイトルを2行に(2026-10-17運営者決定) */
@media (min-width: 1100px) and (max-width: 1279px) {
	.hero-split .hero-excerpt {
		display: none;
	}
	.hero-split .hero-body {
		padding: 12px 22px;
		gap: 10px;
	}
	.hero-split .hero-title {
		-webkit-line-clamp: 3; /* 抜粋を隠す代わりにタイトルは3行まで(運営者指示: 2行では意味が伝わらない) */
	}
}

.archive-header + .hero,
.post-list + .hero {
	margin: 20px 0 8px; /* 新着順・人気順ボタンとの間を広く(2026-10-17運営者指示: 4→20px) */
}

/* =========================================================================
   7. 記事リスト (TOP・一覧共通)
   ========================================================================= */
.post-list-item {
	display: flex;
	gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--border-light);
}

.post-list-thumb {
	flex-shrink: 0;
	align-self: center; /* 親flexのstretchで比率が崩れるのを防ぐ */
	width: 220px;
	aspect-ratio: 1200 / 630; /* アイキャッチと同比率(トリミングしない) */
	height: auto;
	border-radius: 12px;
	overflow: hidden;
}

.post-list-thumb img,
.thumb-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.thumb-placeholder {
	background: linear-gradient(135deg, #141028, #2447e8 55%, #a855f7);
}

.post-list-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.post-list-meta-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.post-list-category {
	display: inline-block;
	background: var(--grad-h);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.5px;
	border-radius: 999px;
	padding: 3px 10px;
	line-height: 1.6;
}

.post-list-title {
	font-size: 20px;
	line-height: 1.5;
}

.post-list-title a {
	color: var(--ink);
}

.post-list-title a:hover {
	color: var(--blue);
}

.post-list-excerpt {
	color: var(--text-sub);
	font-size: 14px;
}

.post-list-meta {
	color: var(--text-faint);
	font-family: var(--font-mono);
	font-size: 11.5px;
	margin-top: auto;
}

/* =========================================================================
   8. スポンサー枠 (contents.md §3)
   ========================================================================= */
.sponsor-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 16px;
	margin: 28px 0;
}

.sponsor-label {
	font-family: var(--font-mono);
	font-size: 9.5px;
	color: var(--text-faint);
	letter-spacing: 1px;
	margin-bottom: 10px;
}

.sponsor-placeholder-v {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.sponsor-placeholder-h {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sponsor-cover {
	width: 96px;
	height: 128px;
	border-radius: 6px;
	background: linear-gradient(135deg, #e6e3da, #d9d5ca);
}

.sponsor-cover-sm {
	width: 52px;
	height: 68px;
	flex-shrink: 0;
}

.sponsor-title {
	font-size: 13px;
	font-weight: 700;
}

.sponsor-desc {
	font-size: 11.5px;
	color: var(--text-sub);
}

.sponsor-text {
	min-width: 0;
	flex: 1;
}

.sponsor-card-sticky {
	position: sticky;
	top: 24px;
}

/* リスト内ミニスポンサー(TOP 5本目と6本目の間。2026-09-21運営者指示でPC・SP共通化) */
.sponsor-mini-sp {
	padding: 16px 0;
	border-bottom: 1px solid var(--border-light);
}

/* =========================================================================
   9. サイドバー (design.md §5)
   ========================================================================= */
.sidebar {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sidebar .sponsor-card {
	margin: 0;
}

.sidebar-heading,
.section-heading {
	font-size: 15px;
	font-weight: 700;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 8px;
	margin-bottom: 14px;
}

.popular-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.popular-item {
	display: flex;
	gap: 12px;
	align-items: baseline;
}

.popular-num {
	font-family: var(--font-mono);
	font-size: 18px;
	font-weight: 700;
	flex-shrink: 0;
}

/* 1位→5位で青→紫のグラデーション(件数を変えたらここも段数を合わせること。2026-09-20に10件→5件へ縮小・5段に再配分) */
.popular-rank-1 .popular-num { color: #2447e8; }
.popular-rank-2 .popular-num { color: #454aec; }
.popular-rank-3 .popular-num { color: #664ef0; }
.popular-rank-4 .popular-num { color: #8751f3; }
.popular-rank-5 .popular-num { color: #a855f7; }

.popular-item a {
	color: var(--ink);
	font-size: 14px;
	line-height: 1.6;
}

.popular-item a:hover {
	color: var(--blue);
}

.tag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tag-chip {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--border-input);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 12.5px;
	color: var(--text-sub);
}

.tag-chip:hover {
	color: var(--blue);
	border-color: var(--blue);
}

.tag-chip a {
	color: inherit;
}

.line-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid var(--border-light);
	font-size: 13px;
}

.line-list a {
	color: var(--ink);
}

.line-list a:hover {
	color: var(--blue);
}

.line-list-count {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-faint);
}

/* Xフォロー枠(TOP記事リスト下。2026-09-20運営者GO):
   黒地×白ボタン=X公式配色で「Xの枠」と一目で分かるように。ヘッダー𝕏撤去後の唯一のフォロー導線 */
.x-follow-sp {
	display: none; /* SP用(最下部)。SPでのみ表示(2026-10-23 TOP→2026-10-24 記事・カテゴリ等の全ページに拡大・運営者指示) */
}

.x-follow-card {
	margin: 32px 0 0; /* 2026-09-23運営者指示: 上を狭く(48→32)・下を広く(-20→0、後続post-navの36pxがそのまま効く) */
	background: var(--ink);
	border-radius: 14px;
	padding: 28px 20px 26px;
	text-align: center;
}

.x-follow-logo {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	margin-bottom: 8px;
}

.x-follow-title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 6px;
	text-wrap: balance; /* 折り返す幅でも2行を均等に(「ます」だけの行を防ぐ) */
}

.x-follow-sub {
	font-size: 13px;
	color: var(--header-input-text);
	margin-bottom: 18px;
}

.x-follow-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	padding: 11px 28px;
	border-radius: 999px;
}

.x-follow-btn:hover {
	color: var(--ink);
	background: #e8eaef;
}


/* =========================================================================
   10. ページネーション
   ========================================================================= */
.pagination-wrap,
.navigation.pagination {
	margin-top: 32px;
}

.pagination-wrap,
.navigation.pagination .nav-links {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.page-numbers {
	min-width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--border-input);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 13px;
}

.page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.page-numbers.dots {
	border: none;
	background: transparent;
}

a.page-numbers:hover {
	color: var(--blue);
	border-color: var(--blue);
}

/* =========================================================================
   11. 記事ページ (design.md §6b)
   ========================================================================= */
.category-pill {
	/* ヒーロー等のbadge-gradientと同スタイルに統一 (2026-08-23運営者決定) */
	display: inline-block;
	background: var(--grad-h);
	color: #fff;
	font-family: var(--font-mono);
	letter-spacing: 0.5px;
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 14px;
}

.entry-new {
	/* 記事ページのNEW: category-pillと同サイズ */
	padding: 4px 0;
	font-size: 11px;
	margin: 0 0 14px 10px;
	vertical-align: top;
}

.entry-header .category-pill {
	vertical-align: top;
}

.category-pill:hover {
	color: #fff;
	opacity: 0.85;
}

.single-article .entry-title {
	font-size: 30px;
	line-height: 1.45;
	margin-bottom: 12px;
}

.entry-meta,
.entry-modified {
	color: var(--text-faint);
	font-family: var(--font-mono);
	font-size: 12px;
	margin-bottom: 20px;
}

.entry-eyecatch {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 28px;
}

/* 記事ヘッダーの2カラムグリッド(A案)は2026-09-20のアイキャッチ表示廃止に伴い撤去 */

/* 目次 */
.toc {
	border: 1px dashed var(--border-input);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 32px;
	background: #fff;
}

.toc-label {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 10px;
	cursor: default; /* PCは常時展開でクリック無効果 */
}

.toc ol {
	list-style: decimal;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.toc a {
	color: var(--text-sub);
	font-size: 14.5px;
}

.toc a:hover {
	color: var(--blue);
}

/* 本文 */
.entry-content {
	font-size: 16px; /* 2026-09-11運営者指示: PC本文を読みやすく(13.5→15→16px) */
	line-height: 1.9;
	color: var(--text-sub);
}

.entry-content h2 {
	color: var(--ink);
	font-size: 22px;
	margin: 40px 0 16px;
}

.entry-content h3 {
	color: var(--ink);
	font-size: 18px;
	margin: 32px 0 12px;
}

.entry-content p {
	margin: 0 0 1.4em;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.4em;
	padding-left: 24px;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content a {
	text-decoration: underline;
}

.entry-content img {
	border-radius: 12px;
}

/* 本文図解(ローカル工程で挿入。agents/local-image.md) */
.entry-content figure.body-figure {
	margin: 0 0 1.4em;
}

.entry-content figure.body-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--border-light);
}

.entry-content pre,
.entry-content code {
	font-family: var(--font-mono);
	font-size: 12.5px;
}

.entry-content pre {
	background: #f1f0ea;
	border: 1px solid var(--border-light);
	border-radius: 12px;
	padding: 18px 20px;
	overflow-x: auto;
	line-height: 1.7;
}

.entry-content :not(pre) > code {
	background: #f1f0ea;
	border-radius: 4px;
	padding: 2px 6px;
}

.entry-content blockquote {
	margin: 0 0 1.4em;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--border-input);
	color: var(--text-muted);
}

.entry-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 1.4em;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--border);
	padding: 8px 12px;
	text-align: left;
}

.entry-content th {
	background: #f1f0ea;
	color: var(--ink);
}

/* 記事末尾のタグ */
.entry-tags {
	margin-top: 28px;
}

/* いいねボタン */
.like-block {
	margin-top: 36px;
	text-align: center;
}

.like-lead {
	margin-bottom: 10px;
	font-size: 13px;
	color: var(--text-muted);
}

.like-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 26px; /* 2026-10-17運営者指示: ひとまわり小さく(約0.8倍。旧 15px 33px/21px=9/14の1.5倍化) */
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 600;
	color: var(--violet);
	background: #fff;
	border: 1.5px solid var(--violet-light);
	border-radius: 999px;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.like-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(124, 58, 237, 0.18);
}

.like-icon::before {
	content: "♡";
	font-size: 21px;
	line-height: 1;
}

.like-count {
	font-family: var(--font-mono);
	font-size: 17px;
}

.like-button.is-liked {
	color: #fff;
	background: var(--grad-h);
	border-color: transparent;
	cursor: default;
}

.like-button.is-liked .like-icon::before {
	content: "♥";
	display: inline-block;
	animation: like-pop 0.35s ease;
}

@keyframes like-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.45); }
	100% { transform: scale(1); }
}

/* 著者カード (コンパクト) */
.author-card {
	margin-top: 36px;
}

.author-card .section-heading {
	margin-bottom: 14px; /* 2026-09-14運営者指示: 他セクションと同じ標準値に統一(10px→14px) */
}

.author-card-body {
	display: flex;
	align-items: center;
	gap: 14px;
	/* 2026-09-20運営者決定(最終形): 白カード+薄枠+角丸の名刺風。
	   経緯: グレー箱(8/28〜)→直置き(9/20昼)→白カード(9/20夜・シェアカードと様式を入替) */
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 18px 20px;
}

.author-avatar {
	flex-shrink: 0;
}

.author-avatar img {
	/* 2026-09-20運営者指示: 丸抜き(border-radius:999px)を廃止し元画像のまま表示 */
	width: 54px; /* 44px→66px(2026-08-28)→54px(2026-10-20運営者指示: ひと回り小さく) */
	height: 54px;
	background: #fff;
}

.author-name {
	display: flex;
	align-items: center; /* 名前とXボタンを上下中央で揃える(2026-08-28運営者指示) */
	gap: 10px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1; /* 本文の行高(1.85)だと名前がボタンより上に浮いて見えるため(2026-08-28運営者指摘) */
	margin-bottom: 9px; /* 紹介文との間隔を確保(2026-08-28運営者指摘: くっつきすぎ) */
}

.author-name-text {
	/* 光学補正(2026-08-28運営者指摘): 英大文字はem枠の上側に描かれるため、枠は中央でも文字が上に見える。
	   ボタンの和文ラベルと視覚的な中心を合わせるためのnudge */
	transform: translateY(1.5px);
}

.author-bio {
	font-size: 12.5px; /* 2026-09-22運営者指示: PCも一段小さく(13.5→12.5。SPと同サイズに) */
	line-height: 1.7;
	color: rgba(22, 24, 29, 0.78); /* グレー地に合わせて濃いめ(2026-08-28) */
}

/* 著者のXリンク(2026-08-28)・ホームページリンク(同日追加) */
.author-x-link,
.author-home-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 12px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: var(--ink); /* 黒地×白文字(2026-08-28運営者指示。Xアイコンは currentColor で自動反転) */
	border: 1px solid var(--ink);
	border-radius: 999px;
	vertical-align: middle;
	transition: background 0.15s ease, color 0.15s ease;
}

.author-x-link:hover {
	background: #000;
	color: #fff;
}

/* ホームページは控えめなテキストリンク(2026-10-03運営者指示: 青ピルは目立ちすぎ) */
.author-home-link {
	color: var(--text-muted);
	background: none;
	border: 0;
	padding: 0;
	font-weight: 500;
}

.author-home-link:hover {
	background: none;
	color: var(--blue);
	text-decoration: underline;
}

.author-x-link svg,
.author-home-link svg {
	width: 11px;
	height: 11px;
}

/* 関連記事 */
.related-posts {
	margin-top: 40px;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.related-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.related-thumb {
	display: block;
	aspect-ratio: 1200 / 630; /* アイキャッチと同比率 */
	border-radius: 12px;
	overflow: hidden;
}

.related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-title {
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.related-card:hover .related-title {
	color: var(--blue);
}

.related-date {
	color: var(--text-faint);
	font-family: var(--font-mono);
	font-size: 11px;
}

/* 前後記事ナビ */
.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 36px; /* 上の横棒(border-top)は2026-09-23運営者指示で撤去 */
	font-size: 13px;
	font-weight: 600;
}

.post-nav-next {
	margin-left: auto;
	text-align: right;
}

/* =========================================================================
   12. 一覧ページ (design.md §7a)
   ========================================================================= */
.archive-header {
	margin-bottom: 8px;
}

.archive-title {
	font-size: 30px;
	line-height: 1.4;
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.archive-count {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-faint);
}

.archive-description {
	color: var(--text-sub);
	font-size: 13.5px;
	margin-top: 12px;
}

.sort-toggle {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}

.sort-pill {
	border: 1px solid var(--border-input);
	border-radius: 999px;
	background: #fff;
	color: var(--text-sub);
	font-size: 12px;
	padding: 5px 16px;
}

.sort-pill.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* 0件時の表示 (並び替えボタンとの間隔を確保) */
.no-results {
	margin-top: 44px;
}

.no-results .page-title {
	font-size: 18px;
	margin-bottom: 10px;
}

.no-results .search-form {
	max-width: 480px;
	margin-top: 18px;
}

/* =========================================================================
   13. 静的ページ・お問い合わせ (design.md §8)
   ========================================================================= */
.static-page .entry-title,
.contact-page .entry-title {
	font-size: 30px;
	margin-bottom: 10px;
}

.contact-lead {
	color: var(--text-sub);
	font-size: 13.5px;
	margin-bottom: 28px;
}

.contact-cta-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 24px;
	margin-top: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.contact-cta-text {
	font-size: 13.5px;
	font-weight: 600;
}

/* フォーム (Contact Form 7 上書き含む) */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="url"],
.entry-content select,
.entry-content textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--border-input);
	border-radius: 10px;
	padding: 10px 14px;
	font-family: var(--font-sans);
	font-size: 13.5px;
	color: var(--ink);
}

.entry-content input:focus,
.entry-content select:focus,
.entry-content textarea:focus {
	outline: none;
	border-color: var(--blue);
}

.entry-content input[type="submit"],
.entry-content button[type="submit"] {
	background: var(--grad-h);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 36px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	width: auto;
}

.entry-content input[type="submit"]:hover,
.entry-content button[type="submit"]:hover {
	filter: brightness(0.94);
}

/* 無効状態の送信ボタン (通常は acceptance_as_validation: on のため発生しないが保険) */
.entry-content input[type="submit"]:disabled,
.entry-content button[type="submit"]:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.required-badge,
.entry-content .wpcf7-form .required {
	display: inline-block;
	background: var(--required);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	border-radius: 4px;
	padding: 1px 6px;
	margin-left: 6px;
	vertical-align: 1px;
	line-height: 1.7;
}

/* Contact Form 7 (8b/9b) */
.form-field {
	margin: 0 0 20px;
}

.form-field br {
	display: none; /* CF7の自動brでラベルと入力欄の間が空くのを防ぐ */
}

.form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 7px;
}

.entry-content .form-field p {
	margin: 0;
}

.entry-content .wpcf7-form textarea {
	min-height: 180px;
	resize: vertical;
}

.entry-content .wpcf7-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235c584d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.form-accept {
	margin: 24px 0;
	font-size: 13px;
	color: var(--text-sub);
}

.form-accept a {
	text-decoration: underline;
}

.form-accept input[type="checkbox"] {
	width: 15px;
	height: 15px;
	accent-color: var(--blue);
	margin-right: 6px;
	vertical-align: -2px;
}

.form-accept .wpcf7-list-item {
	margin: 0;
}

.form-submit {
	margin: 0;
}

.entry-content .wpcf7-not-valid-tip {
	color: var(--required);
	font-size: 11.5px;
	margin-top: 5px;
	display: block;
}

.entry-content .wpcf7-response-output {
	border: 1px solid var(--border-input);
	border-radius: 10px;
	padding: 12px 16px;
	margin: 24px 0 0;
	font-size: 13px;
}

.entry-content .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--blue);
	color: var(--blue);
}

.entry-content .wpcf7-form.invalid .wpcf7-response-output,
.entry-content .wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--required);
	color: var(--required);
}

.entry-content .wpcf7-spinner {
	margin: 0 0 0 12px;
}

@media (max-width: 768px) {
	.entry-content .wpcf7-form input[type="submit"],
	.entry-content .wpcf7-form button[type="submit"] {
		width: 100%;
	}
}

/* =========================================================================
   13.5 カテゴリ一覧・タグ一覧ハブページ
   ========================================================================= */
.hub-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 28px;
}

.hub-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px 22px;
}

.hub-card:hover .hub-card-name {
	color: var(--blue);
}

.hub-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.hub-card-name {
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
}

.hub-card-count {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--text-faint);
	flex-shrink: 0;
}

.hub-card-desc {
	color: var(--text-sub);
	font-size: 12.5px;
	line-height: 1.7;
}

.tag-chips-hub {
	margin-top: 28px;
}

.tag-chip-count {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--text-faint);
	margin-left: 6px;
}

@media (max-width: 768px) {
	.hub-list {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   14. 404 (design.md §8c)
   ========================================================================= */
.error-404-main {
	text-align: center;
	padding: 40px 0 20px;
}

.error-404-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

.error-404-number {
	font-family: var(--font-mono);
	font-size: 76px;
	font-weight: 700;
	line-height: 1.1;
	background: var(--grad-h);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 8px;
}

.error-404-title {
	font-size: 22px;
	margin-bottom: 14px;
}

.error-404-desc {
	color: var(--text-sub);
	font-size: 13.5px;
	margin-bottom: 28px;
}

.error-404-search {
	max-width: 420px;
	margin: 0 auto 24px;
}

.search-form {
	display: flex;
	gap: 8px;
}

.search-field {
	flex: 1;
	background: #fff;
	border: 1px solid var(--border-input);
	border-radius: 10px;
	padding: 10px 14px;
	font-family: var(--font-sans);
	font-size: 13.5px;
}

.search-field:focus {
	outline: none;
	border-color: var(--blue);
}

.search-submit {
	background: var(--ink);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 0 16px;
	cursor: pointer;
}

.error-404-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* =========================================================================
   15. フッター (design.md §4)
   ========================================================================= */
.site-footer {
	background: var(--ink);
	color: var(--header-input-text); /* 2026-09-10運営者承認: 暖色グレーが金っぽいためヘッダーと同じニュートラルグレーに */
	margin-top: auto; /* flexカラム内で下端に張り付く */
}

.site-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 26px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.site-brand-footer .site-wordmark {
	font-size: 15px;
	letter-spacing: 2px;
}

.footer-menu-list {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	font-size: 12px;
}

.footer-menu-list a {
	color: var(--header-input-text);
}

.footer-menu-list a:hover {
	color: #fff;
}

.footer-menu-list .footer-rss {
	color: var(--rss);
}

/* SPで「お問い合わせ」の後ろを改行するための区切り(PCでは非表示。2026-08-28) */
.footer-menu-break {
	display: none;
}

/* =========================================================================
   17. レスポンシブ (768px で1カラム化。design.md §7)
   ========================================================================= */
@media (max-width: 768px) {

	body {
		font-size: 14.5px;
	}


	/* SPでもサイドバー(本文下に積まれる)のカテゴリ下スポンサーを表示する(2026-09-22運営者指示。
	   旧: 重複防止で全面非表示=2026-08-22。現在サイドバー内は縦型1枠のみで重複しないため解除) */

	/* 著者プロフィール本文: SPは一段小さく(2026-09-22運営者指示) */
	.author-bio {
		font-size: 12.5px;
	}

	/* Xフォロー枠: SPは見出し14pxで1行に(320pxのみbalanceの均等2行) */
	.x-follow-title {
		font-size: 14px;
	}


	/* ヘッダー(2026-09-20夜・最終: タグラインはロゴの右・自由折り返しの2行。
	   11pxを375pxで2行に収めるため左右余白・gapを詰めて幅を回収) */
	.site-header-inner {
		padding: 12px 8px;
		gap: 8px; /* 縦棒の左余白(2026-09-21運営者指示: 区切り線の左右を広く) */
	}

	.site-wordmark {
		font-size: 21px; /* 2026-09-21運営者指示: ロゴを大きく(18→21px。タグラインを1段落として釣り合い) */
		letter-spacing: 1.5px;
	}

	.site-brand .logo-mark {
		width: 48px;
		height: 37px;
	}

	.site-brand {
		gap: 6px;
	}

	.site-header-tools {
		gap: 4px;
	}

	/* タグラインはロゴの右・「、」の後ろで固定改行の2行(2026-09-21運営者指示)。
	   spanをblock化して改行位置を固定。13.5pxが375pxで各行が折り返さない最大値(実測)。
	   320pxは幅不足で各行が折れ4行になるが例外幅として許容 */
	.site-tagline {
		font-size: 12px; /* 2026-09-21運営者指示: もう少し小さく+縦棒余白拡大と両立(375px・2行維持の実測値) */
		padding-left: 10px; /* 縦棒の右余白 */
		line-height: 1.45;
		min-width: 0;
		flex: 1;
	}

	.site-tagline > span {
		display: block;
	}

	/* 「AI担当者さん向けに」で1文字増えたため、狭いスマホ(〜370px)は少しだけ小さくして2行を保つ(2026-10-17) */
	@media (max-width: 370px) {
		.site-tagline {
			font-size: 11px;
			letter-spacing: -0.02em;
		}
	}

	/* SPの2行表示では「、」だけ落とす(2026-09-21運営者指示。「！」は表示・PC1行では両方表示) */
	.site-tagline .tagline-pc-only {
		display: none;
	}


	/* SPの検索: 常時表示はやめてトグル式に(2026-09-20運営者承認。旧: display:noneで検索不能だった) */
	.site-header-inner {
		position: relative;
	}

	.header-search-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: 1px solid var(--header-input-border);
		border-radius: 8px;
		background: none;
		color: #fff;
		padding: 0;
		position: relative;
		z-index: 30; /* 検索オーバーレイより手前に置き、開閉トグルとして働かせる */
	}

	.header-search {
		display: none;
	}

	.site-header.search-open .header-search {
		display: flex;
		align-items: center;
		position: absolute;
		inset: 0;
		padding: 8px 14px 8px 18px; /* 入力欄を右端まで伸ばし、×アイコンはその中に重ねる */
		background: var(--ink);
		z-index: 20;
	}

	.site-header.search-open .header-search-field {
		width: 100%;
		font-size: 16px; /* 16px未満だとiOSがフォーカス時に拡大するため */
		padding-right: 44px; /* 入力欄内の×アイコン分 */
	}

	/* 開いている間はトグルを枠なしの×にして入力欄の中に馴染ませる(2026-09-20運営者指摘: 枠付き虫眼鏡が入力欄に重なって見えた) */
	.header-search-toggle .icon-close {
		display: none;
	}

	.site-header.search-open .header-search-toggle {
		border-color: transparent;
		background: none;
		color: var(--header-input-text);
	}

	.site-header.search-open .header-search-toggle .icon-search {
		display: none;
	}

	.site-header.search-open .header-search-toggle .icon-close {
		display: block;
	}

	.category-tabs {
		border-top: none;
		padding-bottom: 12px;
	}

	.category-tabs-inner {
		padding: 0 18px;
		gap: 8px;
	}

	.category-tab {
		border: 1px solid var(--header-input-border);
		border-radius: 999px;
		padding: 5px 14px;
		font-size: 11.5px;
	}

	.category-tab.is-active {
		background: var(--grad-h);
		border: none; /* 透明ボーダー+グラデ背景だと角丸の縁がにじむため撤去 */
		padding: 6px 15px; /* ボーダー1px分を補填して他チップとサイズを揃える */
		color: #fff;
	}

	/* レイアウト */
	.site-content-wrap {
		display: block;
		padding: 20px 18px 48px;
	}

	.sidebar {
		margin-top: 40px;
	}

	/* Xフォロー枠: SPはサイドバーの後(最下部)の方だけ表示(2026-10-23 TOP、2026-10-24 全ページ・運営者指示) */
	.x-follow-pc {
		display: none;
	}

	.x-follow-sp {
		display: block;
		margin-top: 40px;
	}

	.sponsor-card-sticky {
		position: static;
	}

	/* ヒーロー: SPは縦積みカード */
	.hero {
		grid-template-columns: 1fr;
		border-radius: 12px;
	}

	/* SP: aspect-ratio+align-self:stretchの組合せをiOS Safariが高さ0に解釈する事故があるため、
	   画像を通常フロー(静的配置)に戻し、img自身の縦横比(width/height属性)で高さを出す */
	.hero-media {
		min-height: 0;
		aspect-ratio: 1200 / 630; /* 画像なし時のプレースホルダ用に維持 */
		align-self: auto;
	}

	.hero-image {
		position: static;
		height: auto;
	}

	.hero-body {
		padding: 16px 18px 18px;
		gap: 8px;
	}

	.hero-title {
		font-size: 17px;
	}

	.hero-excerpt {
		display: none;
	}

	/* 横長スポンサーカード: SPはボタンを下段全幅に(テキストの極端な折り返し防止) */
	.sponsor-card-horizontal .sponsor-placeholder-h,
	.sponsor-card-horizontal .sponsor-body > div:first-child {
		flex-wrap: wrap;
	}

	.sponsor-card-horizontal .sponsor-placeholder-h .btn-amazon {
		flex: 1 1 100%;
		text-align: center;
		margin-top: 6px;
	}

	.sponsor-card-horizontal .sponsor-title {
		font-size: 12.5px;
		line-height: 1.6;
	}

	.sponsor-card-horizontal .sponsor-desc {
		font-size: 11px;
	}

	/* 記事リスト */
	.post-list-item {
		gap: 14px;
		padding: 16px 0;
	}

	.post-list-thumb {
		width: 100px; /* 2026-09-20: タイトルの可読域を広げるため110pxから縮小 */
		height: auto;
		aspect-ratio: 1200 / 630; /* SPでも比率は変えない */
		border-radius: 10px;
	}

	.post-list-title {
		font-size: 15px; /* 2026-09-20: 本文16pxとのバランスで13.5pxから拡大 */
	}

	.post-list-excerpt {
		display: none; /* 抜粋はPCのみ (contents.md §4) */
	}

	/* カテゴリTOPの1件目(hero-split)はSPでは拡大せず、2件目以降の一覧と同じ見た目に(2026-10-17運営者指示) */
	.hero.hero-split {
		display: flex;
		gap: 14px;
		padding: 16px 0;
		margin: 0;
		background: none;
		border: 0;
		border-bottom: 1px solid var(--border-light);
		border-radius: 0;
		overflow: visible;
	}
	.hero-split .hero-media {
		flex-shrink: 0;
		align-self: center;
		width: 100px;
		border-radius: 10px;
		overflow: hidden;
	}
	.hero-split .hero-body {
		padding: 0;
		gap: 6px;
		justify-content: flex-start;
	}
	.hero-split .hero-title {
		font-size: 15px;
		line-height: 1.5;
		-webkit-line-clamp: unset;
		display: block;
	}
	.hero-split .hero-meta {
		font-size: 11.5px;
	}

	/* SPの目次は折りたたみ(2026-09-20運営者承認: 本文到達を早める。開閉はjs/theme.js) */
	.toc {
		padding: 14px 18px;
		margin-bottom: 24px;
	}

	.toc-label {
		cursor: pointer;
		position: relative;
		margin-bottom: 0;
		padding-right: 20px;
	}

	.toc-label::after {
		content: "";
		position: absolute;
		right: 4px;
		top: 50%;
		width: 7px;
		height: 7px;
		border-right: 2px solid var(--text-sub);
		border-bottom: 2px solid var(--text-sub);
		transform: translateY(-70%) rotate(45deg);
		transition: transform 0.2s;
	}

	.toc.toc-open .toc-label::after {
		transform: translateY(-30%) rotate(225deg);
	}

	.toc ol {
		display: none;
	}

	.toc.toc-open ol {
		display: flex;
		margin-top: 10px;
	}

	/* 見出し・記事 */
	.single-article .entry-title,
	.archive-title,
	.static-page .entry-title,
	.contact-page .entry-title {
		font-size: 21px;
	}

	/* スマホの読みやすさ標準に引き上げ(2026-09-11運営者指示: 14.5pxは小さい) */
	.entry-content {
		font-size: 16px;
	}

	.entry-content h2 {
		font-size: 20px;
	}

	.entry-content h3 {
		font-size: 18px;
	}

	.related-grid {
		grid-template-columns: 1fr;
	}

	/* ページャ */
	.page-numbers {
		min-width: 34px;
		height: 34px;
		border-radius: 9px;
	}

	/* 404 */
	.error-404-number {
		font-size: 56px;
	}

	.error-404-logo .logo-mark {
		width: 84px;
		height: 66px;
	}

	.error-404-actions .btn-black,
	.error-404-actions .btn-outline {
		width: 100%;
		text-align: center;
	}

	/* フッター: 中央揃え */
	.site-footer-inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding: 22px 18px;
	}

	.footer-menu-list {
		justify-content: center;
		/* 行間は6px: 区切り要素(footer-menu-break)を挟むと行間gapが2回入るため、
		   半分にして合計12px相当の行間にする(2026-08-28運営者指示) */
		gap: 6px 18px;
	}

	.footer-menu-break {
		display: block;
		flex-basis: 100%;
		height: 0;
	}
}

/* =========================================================================
   SNSシェア (2026-08-28 v1.0.37)
   記事末尾のシェアカード + スマホ下部の追従シェアバー
   ========================================================================= */
.share-card {
	margin-top: 26px;
	padding: 24px 0 26px;
	/* 2026-09-20運営者決定: 白カード+枠をやめ直置きに(白カードの役は著者カードへ入替) */
	text-align: center;
	/* ボタン列の4列⇔2列切替はビューポートでなくカード自身の幅で判定する(サイドバー有無で本文幅が変わるため) */
	container-type: inline-size;
}

.share-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
}

.share-card .like-button {
	margin: 12px 0 6px; /* 見出し直下にいいね(2026-09-20運営者指示) */
}

.share-sub {
	margin: 24px 0 16px; /* 2026-09-21運営者指示: いいねボタンとの間をもう少し広く(10→24px) */
	font-size: 12.5px;
	color: var(--text-muted);
}

.share-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.share-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	color: #fff;
}

.share-btn svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.share-x { background: #0f1419; }
.share-hatena { background: #00a4de; }
.share-line { background: #06c755; }
/* コピーはブランド紫(2026-09-20運営者決定・A案: 他ボタンと同じ白文字ベタ塗りに統一。
   旧: 灰色ベタ+黒文字=道具のニュートラル路線は廃止。押下後の「コピーしました!」ローズピンクは維持 */
.share-copy {
	background: var(--violet);
	color: #fff;
	border: 1.5px solid transparent; /* 他ボタンと高さを揃えるため枠ぶんを透明で確保 */
}

.share-copy:hover {
	color: #fff; /* 紫ベタ化に伴い白のまま(2026-09-20) */
}

.share-copy.is-copied {
	background: var(--required); /* ローズピンク(2026-08-28運営者指定): 成功表示をブランド色で */
	color: #fff;
	border-color: transparent;
}

.share-b-mark { font-size: 15px; font-weight: 700; }
.share-line-mark { font-size: 12px; font-weight: 700; }
.share-copy-label.is-sp { display: none; }

/* カードが狭いときは2×2に(3+1の中途半端な折り返しを構造的に防ぐ) */
@container (max-width: 640px) {
	.share-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* さらに狭いときはラベル短縮+文字を少し小さく */
@container (max-width: 360px) {
	.share-btn {
		font-size: 13px;
		padding: 12px 8px;
	}

	.share-copy-label.is-pc { display: none; }
	.share-copy-label.is-sp { display: inline; }
}

/* SP追従バー(PCでは非表示) */
.sp-share-bar { display: none; }

@media (max-width: 600px) {
	/* 著者カード: 名前の後ろで改行(2026-09-10運営者指示: ボタンが途中で折り返して崩れるため) */
	.author-name {
		flex-wrap: wrap;
	}

	.author-name .author-name-text {
		flex-basis: 100%;
	}

	.sp-share-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.96);
		border-top: 1px solid var(--border);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		transform: translateY(110%);
		transition: transform 0.25s ease;
	}

	.sp-share-bar.is-visible {
		transform: translateY(0);
	}

	.sp-bar-btn,
	.sp-bar-like {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding: 2px 8px;
		font-family: var(--font-sans);
		font-size: 10px;
		color: var(--text-sub);
		background: none;
		border: none;
		text-decoration: none;
		cursor: pointer;
	}

	.sp-bar-btn svg,
	.sp-bar-like svg {
		width: 22px;
		height: 22px;
	}

	.sp-bar-like { color: var(--violet); }

	.sp-bar-like.is-liked svg path {
		fill: var(--violet);
	}

	/* バーの高さぶん、フッター最下部が隠れないようにする */
	.single .site-footer {
		padding-bottom: 72px;
	}
}


/* =========================================================================
   2026-10-19 記事ページの回遊対策(運営者指示)
   ========================================================================= */
/* 本文途中の「あわせて読みたい」 */
.entry-content .inline-related {
	margin: 32px 0;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
}
.inline-related-label {
	margin: 0 0 8px !important;
	font-size: 12px;
	font-weight: 700;
	color: var(--violet);
	letter-spacing: 0.05em;
}
.entry-content .inline-related-card {
	display: flex;
	flex-direction: row; /* .related-card(縦積み)を上書き */
	text-align: left;
	gap: 14px;
	align-items: center;
	color: var(--ink);
	text-decoration: none;
}
.inline-related-thumb {
	flex-shrink: 0;
	width: 160px;
	aspect-ratio: 1200 / 630;
	border-radius: 8px;
	overflow: hidden;
}
.inline-related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}
.inline-related-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}
.entry-content .inline-related-card:hover .inline-related-title {
	color: var(--blue);
}
@media (max-width: 768px) {
	.inline-related-thumb {
		width: 100px;
	}
	.inline-related-title {
		font-size: 14px;
	}
}

/* 関連記事はサイドバー先頭(人気記事の上)へ(2026-10-25運営者指示。旧 .related-posts-top=記事末タグ直後は廃止) */
.sidebar-related.related-posts {
	margin-top: 0;
}

.sidebar-related .related-grid {
	grid-template-columns: 1fr; /* 300px幅の縦1列 */
	gap: 16px;
}

/* SNSから来た人への一言 */
.social-welcome {
	margin: 0 0 14px;
	padding: 8px 12px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--text-sub);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
}
.social-welcome a {
	margin-left: 6px;
	font-weight: 700;
	white-space: nowrap;
}

/* 記事冒頭の「この記事のポイント」(2026-10-19 試験導入: 記事2602。2026-10-24 ラベルを「要点」→「ポイント」に変更・クラス名は不変) */
.entry-content .key-points {
	margin: 20px 0 28px;
	padding: 16px 20px 14px;
	background: #fff;
	border: 1px solid var(--violet-light);
	border-left: 4px solid var(--violet);
	border-radius: 0 12px 12px 0;
}
.entry-content .key-points-label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--violet);
	letter-spacing: 0.05em;
}
.entry-content .key-points ul {
	margin: 0;
	padding-left: 1.2em;
}
.entry-content .key-points li {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.7;
}
.entry-content .key-points li:last-child {
	margin-bottom: 0;
}
@media (max-width: 768px) {
	.entry-content .key-points {
		padding: 14px 16px 12px;
	}
	.entry-content .key-points li {
		font-size: 14.5px;
	}
}