/**
 * single-post.css ─ 投稿（コラム / お知らせ / ラボノート）共通スタイル
 *
 * 読み込み順序：tokens → base → components → about（Final CTA 借用）→ single-post
 *
 * クラス命名：
 * - 共通：.single-post / .single-post__*
 * - コラム：.single-post--column
 * - お知らせ：.single-post--info
 * - ラボノート：.single-post--ailab
 * - 本文内装飾（独自class）：.coletlab-callout / .coletlab-marker / .coletlab-faq / .coletlab-list
 *
 * 過去記事の SWELL 由来 class は functions.php で .coletlab-* に置換されてから本 CSS が当たる前提。
 * 詳細：/docs/single-post-class-mapping.md
 *
 * AIっぽい callout box 禁止ルール準拠：背景塗り + 全周枠線 + 左 4px brand バー の組合せは使用しない。
 * callout 系は「細い 2px 縦線 + 左アイコン」のプルクオート寄り構造で実装。
 */

/* ============================================================
 * 1. レイアウト：2カラム（PC）/ 1カラム（SP）
 * ============================================================ */

.single-post {
	position: relative;
	background: var(--color-bg-base);
}

/* 投稿ページ全域の p は親幅に合わせる。
   著者紹介・会社紹介・関連カード・サイドバー等も、文章幅を局所的に絞らない。 */
.single-post p,
.single-post__sidebar p {
	max-width: none;
}

.single-post__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--space-4);
	padding-top: var(--space-5);
	padding-bottom: var(--space-6);
}

@media (min-width: 1024px) {
	.single-post__container {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--space-9);
		padding-inline: var(--space-6);
		padding-top: var(--space-6);
		padding-bottom: var(--space-8);
		align-items: stretch;  /* サイドバーをメインカラム高さに合わせて stretch（sticky 追従範囲を広げる） */
	}
}

.single-post--column .single-post__container,
.single-post--info .single-post__container,
.single-post--ailab .single-post__container {
	max-width: var(--container-wide);
}

.single-post__main {
	min-width: 0;
}

.single-post__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	min-height: 100%;  /* メインカラムと同じ高さに伸ばす（sticky の追従範囲を広げる） */
}

/* sidebar-sticky-zone は HTML 上の最下層に物理配置済み。
   PC で position: sticky で追従、SP では普通フローで最下層に表示。 */
.sidebar-sticky-zone {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.sidebar-sticky-zone {
		position: sticky;
		top: calc(var(--header-height, 64px) + var(--space-3));
	}
}

/* ============================================================
 * 2. 読了進捗バー（画面上部固定・JS で width 操作）
 * ============================================================ */

.single-post__progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 999;
	background: transparent;
	pointer-events: none;
}

.single-post__progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--color-brand) 0%, #5BAEAE 100%);
	transition: width 0.1s ease-out;
}

/* ============================================================
 * 4. アイキャッチ（コラムのみ）
 * ============================================================ */

.single-post__featured {
	margin-bottom: var(--space-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--color-bg-surface);
}

.single-post__featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
 * 5. 記事ヘッダー（タイトル / カテゴリ / 投稿日 / 更新日 / タグ / 読了時間）
 * ============================================================ */

.single-post__header {
	margin-bottom: var(--space-7);
}

.single-post__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.single-post__category {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background: rgba(6, 123, 123, 0.08);
	border: 1px solid rgba(6, 123, 123, 0.5);
	border-radius: 999px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	text-decoration: none;
	letter-spacing: 0.04em;
	transition: all 0.2s;
	min-height: 28px;
}

.single-post__category:hover {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
}

.single-post__title {
	/* SP 30px / PC 40px。SP h1 32〜44px の下限近くを確保（CLAUDE.md 1章末準拠） */
	font-size: clamp(1.875rem, 6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	margin: 0 0 var(--space-4);
	font-feature-settings: "palt";
}

.single-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	padding-block: var(--space-3);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	align-items: center;
}

.single-post__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.single-post__meta-icon {
	width: 14px;
	height: 14px;
	fill: var(--color-text-muted);
	flex-shrink: 0;
}

.single-post__meta-label {
	color: var(--color-text-muted);
	font-weight: 500;
}

.single-post__meta strong {
	color: var(--color-text-primary);
	font-weight: 700;
}

.single-post__updated strong {
	color: var(--color-brand);
}

.single-post__reading-time {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: rgba(201, 136, 95, 0.14);
	border-radius: 4px;
	color: #9E6743;
	font-weight: 700;
}

.single-post__tags {
	margin-top: var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.single-post__tag {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	text-decoration: none;
	padding: 4px 8px;
	border-radius: 4px;
	transition: all 0.2s;
	min-height: 28px;
	display: inline-flex;
	align-items: center;
}

.single-post__tag::before {
	content: "#";
	opacity: 0.6;
	margin-right: 2px;
}

.single-post__tag:hover {
	background: var(--color-bg-surface);
	color: var(--color-brand);
}

/* ============================================================
 * 6. 著者ブロック（コラムのみ）
 * ============================================================ */

.single-post__author {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	padding: var(--space-4) 0;
	background: transparent;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0;
	margin-bottom: var(--space-5);
	position: relative;
}

/* 著者ブロック上端の POP ドットも撤去（読書を邪魔しないシンプルな上下罫線のみに） */

.single-post__author-avatar {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #067B7B 0%, #5BAEAE 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-dark-primary);
	font-family: var(--font-sans-latin);
	font-weight: 800;
	font-size: 1.25rem;
}

/* img を入れる場合：グラデ背景を白基調にして、ロゴが正しく見えるように */
.single-post__author-avatar:has(img) {
	background: var(--color-bg-base, #FFFFFF);
	color: transparent;
}

.single-post__author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;  /* ロゴの形を完全に表示（cover だと端が切れる可能性） */
	padding: 4px;  /* 円の中で少し余白を取り、ロゴの輪郭を呼吸させる */
	box-sizing: border-box;
}

.single-post__author-body {
	flex: 1;
	min-width: 0;
}

.single-post__author-meta {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.single-post__author-name {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0;
}

.single-post__author-role {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	margin: 0;
}

.single-post__author-bio {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: 1.65;
	margin: 0;
}

.single-post__author--footer {
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-6);
	margin-top: var(--space-7);
	margin-bottom: var(--space-5);
	gap: var(--space-4);
}

@media (min-width: 600px) {
	.single-post__author--footer {
		flex-direction: row;
		align-items: flex-start;
	}
}

.single-post__author--footer .single-post__author-avatar {
	width: 80px;
	height: 80px;
	font-size: 1.75rem;
}

.single-post__author--footer .single-post__author-bio {
	font-size: var(--fs-base);
	line-height: 1.85;
}

.single-post__author-sns {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.single-post__author-sns a {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	color: var(--color-text-secondary);
	transition: all 0.2s;
}

.single-post__author-sns a:hover {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
}

.single-post__author-sns svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ============================================================
 * 7. 会社紹介（コラム上部）
 * ─ 「会社概要を見る」をリンク文字ではなく明示的なボタンに
 * ─ 下に余白＋区切り線で本文と分離
 * ============================================================ */

.single-post__company-intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: rgba(6, 123, 123, 0.05);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-7);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
}

.single-post__company-intro-text {
	margin: 0;
	line-height: 1.75;
	max-width: none;
}

.single-post__company-intro-text strong {
	color: var(--color-text-primary);
	font-weight: 700;
}

/* 会社概要への遷移ボタン（リンク文字より明示的に） */
.single-post__company-intro-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	padding: var(--space-2) var(--space-4);
	background: var(--color-bg-base);
	border: 1px solid var(--color-brand);
	border-radius: 999px;
	color: var(--color-brand);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s;
	min-height: 36px;
	letter-spacing: 0.04em;
}

.single-post__company-intro-link:hover {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
}

.single-post__company-intro-link::after {
	content: "→";
	transition: transform 0.2s;
	font-weight: 700;
}

.single-post__company-intro-link:hover::after {
	transform: translateX(2px);
}

/* ============================================================
 * 8. 目次（TOC）
 * ============================================================ */

/* 目次：上下罫線＋大組み構成。
   ─ 上部にしっかりスペースを取り、本文導入と分離 */
.single-post__toc {
	background: transparent;
	border-radius: 0;
	padding: var(--space-5) 0;
	margin-top: var(--space-8) !important;
	margin-bottom: var(--space-7);
	border-top: 2px solid var(--color-brand);
	border-bottom: 2px solid var(--color-brand);
	position: relative;
}

/* 目次右上の5色ドット装飾も撤去（読書集中のため装飾を整理） */

.single-post__toc-title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-4);
}

.single-post__toc-title::before {
	content: "";
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23067B7B'><path d='M3 4h18v2H3V4zm0 7h12v2H3v-2zm0 7h18v2H3v-2z'/></svg>") center / contain no-repeat;
}

.single-post__toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: toc-counter;
}

.single-post__toc-list > li {
	counter-increment: toc-counter;
	margin-bottom: var(--space-1);
	font-size: var(--fs-sm);
}

.single-post__toc-list a {
	display: flex;
	gap: var(--space-2);
	color: var(--color-text-secondary);
	text-decoration: none;
	padding: 6px 0;
	line-height: 1.5;
	transition: color 0.2s;
	min-height: 32px;
	align-items: flex-start;
}

.single-post__toc-list > li > a::before {
	content: counter(toc-counter, decimal-leading-zero);
	font-family: var(--font-sans-latin);
	font-weight: 800;
	color: var(--color-brand);
	flex-shrink: 0;
	min-width: 28px;
}

.single-post__toc-list a:hover {
	color: var(--color-brand);
}

.single-post__toc-list a.is-active {
	color: var(--color-brand);
	font-weight: 700;
}

/* ============================================================
 * 9. 本文タイポグラフィ
 * ============================================================ */

/* 本文：読みやすさ優先のチューニング
   ・PC: font-size 17px / line-height 1.95 / letter-spacing 0.02em
   ・SP: font-size 16px / line-height 1.75（CLAUDE.md 本文行間 1.7〜1.8 基準）
   ・標準は max-width 760px。コラム / お知らせ / ラボノート single は固定ページ幅へ寄せるため後続で解除 */
.single-post__body {
	font-size: 1.0625rem;  /* 17px */
	line-height: 1.95;
	letter-spacing: 0.02em;
	color: var(--color-text-primary);
	max-width: 760px;
	counter-reset: h2-counter;
}

.single-post--column .single-post__body,
.single-post--info .single-post__body,
.single-post--ailab .single-post__body {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 767px) {
	.single-post__body {
		font-size: 1rem;  /* 16px */
		line-height: 1.75;
		letter-spacing: 0.015em;
	}
}

.single-post__body > * + * {
	margin-top: var(--space-4);
}

/* ─── h2：POP な装飾SVG＋大きめテキスト＋章番号＋下に5色ドット
       border-bottom 1px の地味な装飾は撤去し、
       固定ページの section 見出しと同じ世界観で書き直す。 */
.single-post__body h2,
.single-post__body .wp-block-heading[class*="wp-block-heading"]:not(h3):not(h4):not(h5):not(h6):not(.coletlab-faq__q) {
	position: relative;
	font-size: clamp(1.625rem, 5vw, 2.125rem);  /* 26〜34px：固定ページと同等の大きさ */
	font-weight: 800;
	line-height: 1.35;
	color: var(--color-text-primary);
	margin-top: var(--space-10);
	margin-bottom: var(--space-5);
	padding: var(--space-3) 0;
	border: 0;
	letter-spacing: -0.02em;
	font-feature-settings: "palt";
	scroll-margin-top: calc(var(--header-height, 64px) + var(--space-3));
	counter-increment: h2-counter;
	counter-reset: h3-counter;  /* h2 ごとに h3 番号をリセット */
}

/* h2 の前に章番号オーバーラインを配置（H.01 / H.02 …） */
.single-post__body h2::before {
	content: "H." counter(h2-counter, decimal-leading-zero);
	display: block;
	font-family: var(--font-sans-latin);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--color-brand);
	margin-bottom: var(--space-2);
}

/* h2 の下にティール×コッパーのドット（POP な区切り） */
.single-post__body h2::after {
	content: "";
	display: block;
	margin-top: var(--space-3);
	width: 80px;
	height: 8px;
	background-image:
		radial-gradient(circle, #067B7B 3.5px, transparent 4px),
		radial-gradient(circle, #C9885F 3.5px, transparent 4px),
		radial-gradient(circle, #5BAEAE 3.5px, transparent 4px),
		radial-gradient(circle, #C9885F 3.5px, transparent 4px),
		radial-gradient(circle, #067B7B 3.5px, transparent 4px);
	background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
	background-position: 0 center, 14px center, 28px center, 42px center, 56px center;
	background-repeat: no-repeat;
}

/* ─── h3：番号付き円形マーカー＋テキスト＋下線
       上下の余白を増やして読みやすく（H2ほどではないが十分な間隔） */
.single-post__body h3 {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	font-size: clamp(1.125rem, 3.2vw, 1.375rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text-primary);
	margin-top: var(--space-8);  /* 32px：旧28pxから増やして読みやすく */
	margin-bottom: var(--space-5);  /* 20px：旧16pxから増やして本文と分離 */
	padding-left: 0;
	padding-bottom: var(--space-2);
	border-left: none;
	border-bottom: 1px solid rgba(6, 123, 123, 0.18);
	scroll-margin-top: calc(var(--header-height, 64px) + var(--space-3));
	counter-increment: h3-counter;
}

/* 番号付き円形マーカー（h2 配下で連番） */
.single-post__body h2 + h3::before,
.single-post__body h3::before {
	content: counter(h3-counter, decimal);
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, var(--color-brand) 0%, #5BAEAE 100%);
	color: var(--color-text-dark-primary);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans-latin);
	font-weight: 800;
	font-size: 0.875rem;
	align-self: center;
	box-shadow: 0 2px 8px rgba(6, 123, 123, 0.2);
}

/* h4：本文 17px より一段大きく見出しらしく */
.single-post__body h4 {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-text-primary);
	margin-top: var(--space-6);
	margin-bottom: var(--space-3);
	letter-spacing: -0.01em;
}

/* p：段落間に余白を増やして息継ぎを確保（読みやすさ改善） */
.single-post__body p {
	margin: 0 0 var(--space-5);  /* 20px：旧16pxから増やして息継ぎを広く */
	line-height: 1.95;
	letter-spacing: 0.02em;
	max-width: none;
}

.single-post__body p:last-child {
	margin-bottom: 0;
}

.single-post__body strong {
	font-weight: 700;
	color: var(--color-text-primary);
}

.single-post__body em {
	font-style: italic;
	color: var(--color-brand);
}

/* リンク：本文中のリンクは控えめな下線でリンク識別性を確保。
   ─ 色＋weight だけだと strong との差が弱くリンク認識性が低いため、underline-offset で品位を保ちつつ下線復帰
   ─ .btn 系（中間CTA等）は btn のスタイルを尊重するため :not で除外 */
.single-post__body a:not([class*="btn"]) {
	color: var(--color-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(6, 123, 123, 0.4);
	transition: color 0.2s, text-decoration-color 0.2s;
	word-break: break-word;
	font-weight: 600;
}

.single-post__body a:not([class*="btn"]):hover {
	color: #9E6743;
	text-decoration-color: currentColor;
}

/* 引用 blockquote */
.single-post__body blockquote {
	position: relative;
	margin: var(--space-6) 0;
	padding: var(--space-3) var(--space-5);
	border-left: 3px solid var(--color-brand);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	font-style: italic;
}

.single-post__body blockquote::before {
	content: "“";
	position: absolute;
	top: -10px;
	left: 4px;
	font-size: 3rem;
	font-family: serif;
	color: var(--color-brand);
	opacity: 0.4;
	line-height: 1;
}

/* code */
.single-post__body code:not(pre code) {
	background: var(--color-bg-surface);
	padding: 2px 8px;
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 0.9em;
	color: #9E6743;
}

.single-post__body pre {
	background: #1A2826;
	color: var(--color-text-dark-primary);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	overflow-x: auto;
	font-size: var(--fs-sm);
	line-height: 1.7;
	margin: var(--space-5) 0;
}

.single-post__body pre code {
	font-family: var(--font-mono);
	background: transparent;
	color: inherit;
}

/* ============================================================
 * 10. リスト（標準 ul/ol + .coletlab-list--under-dashed）
 * ============================================================ */

.single-post__body ul,
.single-post__body ol {
	margin: var(--space-4) 0;
	padding-left: 0;
}

/* 標準 ul（クラスなし） */
.single-post__body ul:not([class]),
.single-post__body .wp-block-list:not([class*="coletlab"]) {
	list-style: none;
}

.single-post__body ul:not([class]) > li,
.single-post__body .wp-block-list:not([class*="coletlab"]) > li {
	position: relative;
	padding-left: var(--space-5);
	margin-bottom: var(--space-2);
	line-height: 1.85;
}

.single-post__body ul:not([class]) > li::before,
.single-post__body .wp-block-list:not([class*="coletlab"]) > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.7em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-brand);
}

/* ol（番号付き）
   ─ 目次（.single-post__toc-list）には適用しない（独自スタイルで上書き）
   ─ :not() で除外することで、目次のカウンタと衝突しない */
.single-post__body ol:not(.single-post__toc-list) {
	list-style: none;
	counter-reset: ol-counter;
}

.single-post__body ol:not(.single-post__toc-list) > li {
	counter-increment: ol-counter;
	position: relative;
	padding-left: var(--space-7);
	margin-bottom: var(--space-3);
	line-height: 1.85;
	min-height: 28px;
}

.single-post__body ol:not(.single-post__toc-list) > li::before {
	content: counter(ol-counter);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
	font-family: var(--font-sans-latin);
	font-weight: 800;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* 破線下線リスト（旧 -list-under-dashed） */
.single-post__body .coletlab-list--under-dashed {
	list-style: none;
	padding-left: 0;
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-5);
	margin: var(--space-5) 0;
}

.single-post__body .coletlab-list--under-dashed > li {
	padding: var(--space-3) 0;
	padding-left: var(--space-5);
	border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
	position: relative;
	margin-bottom: 0;
	line-height: 1.7;
}

.single-post__body .coletlab-list--under-dashed > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: calc(var(--space-3) + 0.55em);
	width: 8px;
	height: 8px;
	background: #C9885F;
	transform: rotate(45deg);
}

.single-post__body .coletlab-list--under-dashed > li:last-child {
	border-bottom: none;
}

.single-post__body .coletlab-list--under-dashed > li strong {
	color: var(--color-brand);
}

/* ============================================================
 * 11. 画像（wp-block-image）
 * ============================================================ */

.single-post__body .wp-block-image {
	margin: var(--space-6) 0;
	text-align: center;
}

.single-post__body .wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	display: inline-block;
}

.single-post__body figcaption {
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	text-align: center;
	line-height: 1.6;
}

/* ============================================================
 * 12. テーブル（wp-block-table）
 * ============================================================ */

.single-post__body .wp-block-table {
	margin: var(--space-6) 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius-md);
}

.single-post__body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	background: var(--color-bg-base);
	min-width: 480px;
}

.single-post__body .wp-block-table th,
.single-post__body .wp-block-table td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	vertical-align: top;
	/* WP core block-library の `.wp-block-table td, th { border: 1px solid; }`
	   （border-color: currentColor）を確実に打ち消すため、border: none → border-bottom 単体で上書き。 */
	border: none;
	border-bottom: 1px solid rgba(7, 38, 38, 0.10);
	line-height: 1.6;
}

/* ヘッダー行（th セル）共通スタイル
 *  - 標準ブロックエディタで「ヘッダー行 ON」→ thead > tr > th として出力される
 *  - SWELL 時代に投稿された記事は thead を持たず、tbody > tr:first-child > th として
 *    出力されるパターンが多い。両方に同じ見た目を当てる。 */
.single-post__body .wp-block-table thead th,
.single-post__body .wp-block-table tbody tr:first-child > th {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
	font-weight: 700;
	letter-spacing: 0.04em;
	border: none;
	border-bottom: 2px solid var(--color-brand);
}

/* WP コア wp-block-library の `thead { border-bottom: 3px solid; }` `tfoot { border-top: 3px solid; }`
   を打ち消す。テーマ側の境界線は thead th / tbody td の border-bottom で個別に持つ。 */
.single-post__body .wp-block-table thead,
.single-post__body .wp-block-table tfoot {
	border: none;
}

.single-post__body .wp-block-table tbody tr:last-child th,
.single-post__body .wp-block-table tbody tr:last-child td {
	border-bottom: none;
}

/* 縞模様：thead がある場合は tbody の偶数行、thead が無い（tbody先頭がth行）場合は
 *  ヘッダー行を1行目として数えて 3行目, 5行目 ... を縞にしたい。
 *  CSS で「先頭が th 行か td 行か」を区別するには :has() が便利。 */
.single-post__body .wp-block-table tbody tr:nth-child(even) {
	background: var(--color-bg-surface);
}
/* tbody 先頭が th 行のテーブル（旧 SWELL 構造）では奇数行を縞にする */
.single-post__body .wp-block-table tbody:has(> tr:first-child > th) tr:nth-child(odd):not(:first-child) {
	background: var(--color-bg-surface);
}
.single-post__body .wp-block-table tbody:has(> tr:first-child > th) tr:nth-child(even) {
	background: transparent;
}

/* ============================================================
 * 13. coletlab-callout（注釈ブロック）
 *
 * デザイン方針：
 * ・左にアイコン（電球 / 警告三角）
 * ・角丸四角形＋薄い背景色（POINT は Teal 薄、CAUTION は Amber 薄）
 * ・ラベルや POP ドットなどの追加装飾はなし（シンプルに）
 * ============================================================ */

.single-post__body .coletlab-callout {
	position: relative;
	margin: var(--space-6) 0;
	padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 36px + var(--space-3));
	border-radius: var(--radius-lg);
	border: 0;
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--color-text-primary);
}

/* アイコン：左に円形で position: absolute 配置（<p>直下の混在テキストを破壊しないため flex は使わない） */
.single-post__body .coletlab-callout::before {
	content: "";
	position: absolute;
	left: var(--space-5);
	top: var(--space-4);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--color-bg-surface);
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: center;
}

@media (max-width: 480px) {
	.single-post__body .coletlab-callout {
		padding-left: calc(var(--space-4) + 32px + var(--space-2));
		padding-right: var(--space-4);
	}
	.single-post__body .coletlab-callout::before {
		left: var(--space-4);
		width: 32px;
		height: 32px;
		background-size: 18px 18px;
	}
}

/* POINT：Teal 系 */
.single-post__body .coletlab-callout--point {
	background: rgba(6, 123, 123, 0.08);
}

.single-post__body .coletlab-callout--point::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26A7 7 0 0 0 12 2z'/></svg>");
}

/* CAUTION：コッパー系 */
.single-post__body .coletlab-callout--caution {
	background: rgba(201, 136, 95, 0.16);
}

.single-post__body .coletlab-callout--caution::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E6743' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}

.single-post__body .coletlab-callout-body {
	flex: 1;
	min-width: 0;
}

.single-post__body .coletlab-callout p {
	margin: 0;
}

.single-post__body .coletlab-callout p + p {
	margin-top: var(--space-2);
}

.single-post__body .coletlab-callout strong {
	color: var(--color-text-primary);
	font-weight: 700;
}

/* ============================================================
 * 14. coletlab-marker（蛍光ペンマーカー・コッパー半透明）
 * ============================================================ */

.single-post__body .coletlab-marker {
	background-image: linear-gradient(transparent 60%, rgba(201, 136, 95, 0.40) 60%);
	padding-inline: 2px;
	font-weight: 700;
	color: var(--color-text-primary);
	border-radius: 0;
}

.single-post__body .coletlab-marker--amber {
	background-image: linear-gradient(transparent 60%, rgba(201, 136, 95, 0.40) 60%);
}

.single-post__body .coletlab-marker--rose {
	background-image: linear-gradient(transparent 60%, rgba(158, 103, 67, 0.30) 60%);
}

.single-post__body .coletlab-marker--cyan {
	background-image: linear-gradient(transparent 60%, rgba(91, 174, 174, 0.34) 60%);
}

/* ============================================================
 * 15. coletlab-faq（アコーディオン）
 * ============================================================ */

.single-post__body .coletlab-faq {
	margin: var(--space-6) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* FAQ：AIっぽい全周枠線＋角丸＋背景の box 構造を撤去。
   上下罫線で区切るシンプルな構成に。is-open 時は左に POP なアクセントを表示。 */
.single-post__body .coletlab-faq__item {
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background: transparent;
	border-bottom: 1px solid rgba(0, 0, 0, 0.10);
	transition: background 0.2s;
}

.single-post__body .coletlab-faq__item:first-child {
	border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.single-post__body .coletlab-faq__item.is-open {
	background: rgba(6, 123, 123, 0.03);
}

.single-post__body .coletlab-faq__q {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--color-text-primary);
	cursor: pointer;
	position: relative;
	margin: 0;
	line-height: 1.5;
	min-height: 56px;
	user-select: none;
	border: 0;
	padding-right: calc(var(--space-5) + 32px);
}

/* h3 タグだった場合の上書き */
.single-post__body h3.coletlab-faq__q {
	border: 0;
	padding-left: var(--space-5);
}

/* Q マーク（LP FAQ と統一・円形） */
.single-post__body .coletlab-faq__q::before {
	content: "Q";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
	font-family: var(--font-sans-latin);
	font-weight: 800;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

/* 開閉アイコン（+ → ×） */
.single-post__body .coletlab-faq__q::after {
	content: "";
	position: absolute;
	right: var(--space-5);
	top: 50%;
	width: 16px;
	height: 16px;
	background:
		linear-gradient(var(--color-brand), var(--color-brand)) center / 100% 2px no-repeat,
		linear-gradient(var(--color-brand), var(--color-brand)) center / 2px 100% no-repeat;
	transform: translateY(-50%);
	transition: transform 0.3s;
}

.single-post__body .coletlab-faq__item.is-open .coletlab-faq__q::after {
	transform: translateY(-50%) rotate(45deg);
}

.single-post__body .coletlab-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.3s;
	padding-inline: var(--space-5);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: 1.85;
}

.single-post__body .coletlab-faq__item.is-open .coletlab-faq__a {
	max-height: 1000px;
	padding-block: var(--space-3) var(--space-5);
	border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.single-post__body .coletlab-faq__a p {
	margin: 0;
}

.single-post__body .coletlab-faq__a p + p {
	margin-top: var(--space-2);
}

/* ============================================================
 * 16. 文中CTA（カテゴリで自動出し分け）
 * ============================================================ */

/* 文中CTA：AIっぽい塗り＋border-left 6px ボックス構造を撤去。
   固定ページと同じく、装飾SVG＋大きめテキスト＋POP ドットの構成に再設計。 */
.single-post__inline-cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5) 0;
	margin: var(--space-8) 0;
	background: transparent;
	border-radius: 0;
	border-top: 1px dashed rgba(6, 123, 123, 0.4);
	border-bottom: 1px dashed rgba(6, 123, 123, 0.4);
	position: relative;
	text-decoration: none;
	color: inherit;
}

@media (min-width: 600px) {
	.single-post__inline-cta {
		flex-direction: row;
		align-items: center;
		gap: var(--space-5);
	}
}

/* 上端の POP ドット装飾は撤去（過剰装飾を整理） */

.single-post__inline-cta__icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-brand);
	background: transparent;
	border-radius: 0;
	position: relative;
}

/* アイコン背後にカラフルな円形装飾 */
.single-post__inline-cta__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 30%, rgba(201, 136, 95, 0.18), transparent 70%),
				radial-gradient(circle at 70% 70%, rgba(6, 123, 123, 0.18), transparent 70%);
	border-radius: 50%;
}

.single-post__inline-cta__icon svg {
	width: 36px;
	height: 36px;
	fill: currentColor;
	position: relative;
	z-index: 1;
}

.single-post__inline-cta__body {
	flex: 1;
	min-width: 0;
}

.single-post__inline-cta__label {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 4px;
}

.single-post__inline-cta__title {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 var(--space-1);
	line-height: 1.4;
}

.single-post__inline-cta__desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.6;
}

.single-post__inline-cta__btn {
	flex-shrink: 0;
	align-self: stretch;
	/* btn--sm の fs-sm（14px）を上書き：本文中の CTA は 16px 以上で視認性確保（CLAUDE.md 1章末） */
	font-size: var(--fs-base);
}

@media (min-width: 600px) {
	.single-post__inline-cta__btn {
		align-self: center;
	}
}

/* ============================================================
 * 16.5 記事末尾：カテゴリ別LP誘導バナー（読了後の決定版）
 * ============================================================
 * カテゴリ→LP マップ（coletlab_get_category_to_lp_map）で振り分けた
 * 主役LPへ、読了者を1枚で送る。本文中の inline-cta は廃し、ここへ統合。
 * AIっぽい callout（角丸＋塗り＋全周枠＋左強調枠＋大padding）は避け、
 * LP画像を伴うサービスバナーとして見せる。 */

.single-post__next-lp {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: var(--space-8) 0;
	padding: var(--space-5);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: 16px;
}

.single-post__next-lp__visual {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--color-bg-elevated);
}

.single-post__next-lp__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.single-post__next-lp__label {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-2);
}

.single-post__next-lp__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.4;
	margin: 0 0 var(--space-2);
}

.single-post__next-lp__desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin: 0 0 var(--space-4);
}

.single-post__next-lp__btn {
	width: 100%;
}

@media (min-width: 600px) {
	.single-post__next-lp {
		flex-direction: row;
		align-items: center;
		gap: var(--space-6);
		padding: var(--space-6);
	}
	.single-post__next-lp__visual {
		flex-shrink: 0;
		width: 240px;
		aspect-ratio: 4 / 3;
	}
	.single-post__next-lp__body {
		flex: 1;
		min-width: 0;
	}
	.single-post__next-lp__btn {
		width: auto;
	}
}

/* ============================================================
 * 17. SNS シェアボタン
 * ============================================================ */

.single-post__share {
	margin: var(--space-7) 0;
	padding: var(--space-5) 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.single-post__share-title {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-3);
}

.single-post__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	margin: 0;
}

.single-post__share-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--color-bg-base);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	color: var(--color-text-primary);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	min-height: 48px;  /* CLAUDE.md タップ領域 48px 基準 */
	transition: all 0.2s;
}

.single-post__share-btn:hover {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
	border-color: var(--color-brand);
}

.single-post__share-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* PC 大画面のみ：左サイド縦型 floating */
.single-post__share-floating {
	display: none;
}

@media (min-width: 1280px) {
	.single-post__share-floating {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		position: fixed;
		left: var(--space-5);
		top: 50%;
		transform: translateY(-50%);
		z-index: 50;
	}

	.single-post__share-floating .single-post__share-btn {
		width: 48px;
		height: 48px;
		padding: 0;
		justify-content: center;
	}

	.single-post__share-floating .single-post__share-btn span {
		display: none;
	}
}

/* ============================================================
 * 18. CTA カード3枚（記事末尾）
 * ============================================================ */

.single-post__cta-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: var(--space-7) 0;
}

/* タブレット（768〜1023px）：2 カラムにして 1 カラム幅を確保 */
@media (min-width: 768px) {
	.single-post__cta-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.single-post__cta-card--code-check {
		grid-column: span 2;
	}
}

/* PC（1024px〜）：3 カラムに展開 */
@media (min-width: 1024px) {
	.single-post__cta-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* カードが 1 枚だけ残った場合（ローンチ前の非表示時など）は中央寄せで間延びを防ぐ。
   :has 未対応ブラウザは従来どおり左寄せにフォールバック（崩れではない）。 */
.single-post__cta-cards:has(> a:only-child) {
	grid-template-columns: minmax(0, 400px);
	justify-content: center;
}

.single-post__cta-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-5);
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--color-text-primary);
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
	min-height: 200px;
}

/* CTA カード上端にティール→コッパーの2色グラデーションのアクセントライン（固定ページの section ヘッダーと同じトーン） */
.single-post__cta-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #067B7B 0%, #C9885F 100%);
}

/* highlight / line 版はオーバーラップしないようグラデを上に重ねない */
.single-post__cta-card--highlight::before,
.single-post__cta-card--line::before,
.single-post__cta-card--code-check::before {
	background: linear-gradient(90deg, var(--color-accent-700) 0%, var(--color-bg-surface) 50%, var(--color-accent-700) 100%);
	opacity: 0.5;
}

.single-post__cta-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.single-post__cta-card-icon {
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-3);
	color: var(--color-brand);
}

.single-post__cta-card-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.single-post__cta-card-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin: 0 0 var(--space-2);
	line-height: 1.4;
	color: var(--color-text-primary);
}

/* highlight / line バリエーションは見出し色を白に明示（黒のままだと背景に負ける） */
.single-post__cta-card--highlight .single-post__cta-card-title,
.single-post__cta-card--line .single-post__cta-card-title,
.single-post__cta-card--code-check .single-post__cta-card-title {
	color: var(--color-text-dark-primary);
}

.single-post__cta-card-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	margin: 0 0 auto;
	line-height: 1.6;
}

.single-post__cta-card-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.08em;
}

.single-post__cta-card--highlight {
	background: linear-gradient(135deg, var(--color-brand) 0%, #054F4F 100%);
	color: var(--color-text-dark-primary);
}

.single-post__cta-card--highlight .single-post__cta-card-icon {
	color: #C9885F;
}

.single-post__cta-card--highlight .single-post__cta-card-desc {
	color: rgba(244, 250, 249, 0.85);
}

.single-post__cta-card--highlight .single-post__cta-card-arrow {
	color: #C9885F;
}

.single-post__cta-card--line {
	background: linear-gradient(135deg, #06C755 0%, #04A444 100%);
	color: white;
}

.single-post__cta-card--line .single-post__cta-card-icon,
.single-post__cta-card--line .single-post__cta-card-arrow {
	color: white;
}

.single-post__cta-card--line .single-post__cta-card-desc {
	color: rgba(255, 255, 255, 0.85);
}

.single-post__cta-card--code-check {
	background:
		radial-gradient(circle at 86% 18%, rgba(201, 136, 95, 0.34) 0%, transparent 34%),
		linear-gradient(135deg, #0A1414 0%, #067B7B 56%, #C9885F 100%);
	color: var(--color-text-dark-primary);
}

@media (min-width: 1024px) {
	.single-post__cta-card--code-check {
		grid-column: span 2;
	}
}

.single-post__cta-card--code-check .single-post__cta-card-icon,
.single-post__cta-card--code-check .single-post__cta-card-arrow {
	color: #C9885F;
}

.single-post__cta-card--code-check .single-post__cta-card-desc {
	color: rgba(244, 250, 249, 0.86);
}

/* ============================================================
 * 19. 「次に読む」記事（大きく1件）
 * ============================================================ */

.single-post__next {
	margin: var(--space-8) 0 var(--space-5);
}

.single-post__next-label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-3);
}

.single-post__next-label::before {
	content: "";
	width: 32px;
	height: 6px;
	background-image:
		radial-gradient(circle, #067B7B 2.5px, transparent 3px),
		radial-gradient(circle, #C9885F 2.5px, transparent 3px),
		radial-gradient(circle, #5BAEAE 2.5px, transparent 3px),
		radial-gradient(circle, #C9885F 2.5px, transparent 3px);
	background-size: 8px 6px, 8px 6px, 8px 6px, 8px 6px;
	background-position: 0 center, 8px center, 16px center, 24px center;
	background-repeat: no-repeat;
}

.single-post__next-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text-primary);
	transition: transform 0.3s;
}

@media (min-width: 600px) {
	.single-post__next-card {
		grid-template-columns: 280px 1fr;
	}
}

.single-post__next-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.single-post__next-card-image {
	aspect-ratio: 16 / 9;
	background: var(--color-bg-elevated);
	overflow: hidden;
}

.single-post__next-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-post__next-card-body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.single-post__next-card-cat {
	display: inline-flex;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.08em;
}

.single-post__next-card-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
	color: var(--color-text-primary);
}

.single-post__next-card-meta {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	margin-top: auto;
}

/* ============================================================
 * 20. 関連記事リスト
 * ============================================================ */

.single-post__related {
	margin: var(--space-8) 0;
}

/* 関連記事タイトル：ティール→コッパーの2色グラデのライン（POPドット重ねの過剰装飾は撤去） */
.single-post__related-title {
	font-size: clamp(1.25rem, 3.6vw, 1.5rem);
	font-weight: 800;
	color: var(--color-text-primary);
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: none;
	position: relative;
	letter-spacing: -0.01em;
}

.single-post__related-title::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, #067B7B 0%, #C9885F 100%);
	border-radius: 2px;
}

.single-post__related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 600px) {
	.single-post__related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.single-post__related-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.single-post__related-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text-primary);
	transition: transform 0.3s;
}

.single-post__related-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.single-post__related-card-image {
	aspect-ratio: 16 / 9;
	background: var(--color-bg-elevated);
}

.single-post__related-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-post__related-card-body {
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.single-post__related-card-cat {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.08em;
}

.single-post__related-card-title {
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

.single-post__related-card-meta {
	font-size: 0.6875rem;
	color: var(--color-text-secondary);
	margin-top: auto;
}

/* お知らせ用：リスト型・コンパクト */
.single-post--info .single-post__related-grid {
	grid-template-columns: 1fr;
	gap: 0;
}

.single-post--info .single-post__related-card {
	flex-direction: row;
	background: transparent;
	padding: var(--space-4) 0;  /* タップ領域 48px+ 確保のため縦余白を増やす */
	min-height: 56px;
	/* 汎用カードの実線全周枠（pages-creative）を打ち消し、破線の下罫線だけのリストに戻す。
	   これがないと各行が箱になり、左右padding 0 でタイトルが枠線に密着して見える（でぐ指摘・2026-06-03）。 */
	border: 0;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
	border-radius: 0;
	align-items: center;
	gap: var(--space-3);
}

.single-post--info .single-post__related-card:hover {
	transform: none;
	box-shadow: none;
	background: var(--color-bg-surface);
	padding-inline: var(--space-3);
}

.single-post--info .single-post__related-card-image {
	display: none;
}

.single-post--info .single-post__related-card-body {
	padding: 0;
	flex-direction: row;
	gap: var(--space-3);
	align-items: center;
}

/* ============================================================
 * 21. サイドバー
 * ============================================================ */

.sidebar-block {
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	position: relative;
}

/* ============================================================
 * サイドバー：検索ボックス（最上部）
 * ============================================================ */

.sidebar-search-block {
	background: linear-gradient(135deg, var(--color-brand) 0%, #054F4F 100%);
	color: var(--color-text-dark-primary);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}

.sidebar-search-block::before {
	display: none;  /* グラデ背景には POP ドット不要 */
}

.sidebar-search {
	display: flex;
	gap: 4px;
	align-items: stretch;
}

.sidebar-search__input {
	flex: 1;
	min-width: 0;
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	font-size: var(--fs-base);  /* iOS Safari の自動ズーム抑制（16px 以上） */
	background: rgba(255, 255, 255, 0.95);
	color: var(--color-text-primary);
	min-height: 44px;
}

.sidebar-search__input::placeholder {
	color: var(--color-text-muted);
}

.sidebar-search__input:focus {
	outline: 2px solid #067B7B;
	outline-offset: 1px;
}

.sidebar-search__btn {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: #5BAEAE;
	color: var(--color-text-primary);
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.sidebar-search__btn:hover {
	background: var(--color-bg-surface);
}

.sidebar-search__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.sidebar-search__hint {
	margin: var(--space-2) 0 0;
	font-size: 0.6875rem;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
}

/* ============================================================
 * サイドバー：タグクラウド
 * ============================================================ */

.sidebar-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.sidebar-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: var(--fs-xs);
	background: var(--color-bg-base);
	color: var(--color-text-secondary);
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.2s;
	min-height: 28px;
	font-weight: 500;
}

.sidebar-tag::before {
	content: "#";
	opacity: 0.5;
	margin-right: 2px;
}

.sidebar-tag:hover {
	background: rgba(201, 136, 95, 0.15);
	color: var(--color-text-primary);
}

.sidebar-tag--lg {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text-primary);
	background: rgba(6, 123, 123, 0.10);
	min-height: 32px;
}

.sidebar-tag--md {
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
}

.sidebar-block__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* サイドバー：著者ミニ */
.sidebar-author {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-2);
}

.sidebar-author__avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(135deg, #067B7B 0%, #5BAEAE 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-dark-primary);
	font-family: var(--font-sans-latin);
	font-weight: 800;
	font-size: 1.75rem;
}

.sidebar-author__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sidebar-author__name {
	font-weight: 700;
	font-size: var(--fs-sm);
	margin: 0;
	color: var(--color-text-primary);
}

.sidebar-author__role {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	margin: 0;
}

.sidebar-author__bio {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	line-height: 1.65;
	margin: var(--space-2) 0 0;
}

/* サイドバー：目次 */
.sidebar-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--fs-xs);
}

.sidebar-toc__list li {
	margin-bottom: 4px;
}

.sidebar-toc__list a {
	display: block;
	color: var(--color-text-secondary);
	text-decoration: none;
	padding: 6px 0 6px var(--space-3);
	border-left: 2px solid transparent;
	transition: all 0.2s;
	line-height: 1.4;
	min-height: 32px;
}

.sidebar-toc__list a:hover,
.sidebar-toc__list a.is-active {
	color: var(--color-brand);
	border-left-color: var(--color-brand);
	background: rgba(6, 123, 123, 0.08);
}

/* サイドバー：AI Lab + サービス + LINE のリンク集
   ─ サービス毎に左ボーダーを5色配色して固定ページのトーンと揃える */
.sidebar-links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* サービス系リンクの左に色アクセント（ティール×コッパーの2色で交互） */
.sidebar-link[href="/lp/ai-geo-writing/"]    { box-shadow: inset 3px 0 0 #5BAEAE; }
.sidebar-link[href="/lp/bizboot-meo/"]        { box-shadow: inset 3px 0 0 #9E6743; }
.sidebar-link[href="/lp/instagram-marketing/"]{ box-shadow: inset 3px 0 0 #C9885F; }
.sidebar-link[href="/lp/web-marketing-support/"] { box-shadow: inset 3px 0 0 #C9885F; }
.sidebar-link[href="/lp/marketing-copilot/"]  { box-shadow: inset 3px 0 0 #067B7B; }
.sidebar-link[href="/resources/"]             { box-shadow: inset 3px 0 0 #C9885F; }

.sidebar-link[href="/lp/ai-geo-writing/"]:hover,
.sidebar-link[href="/lp/bizboot-meo/"]:hover,
.sidebar-link[href="/lp/instagram-marketing/"]:hover,
.sidebar-link[href="/lp/web-marketing-support/"]:hover,
.sidebar-link[href="/lp/marketing-copilot/"]:hover,
.sidebar-link[href="/resources/"]:hover {
	box-shadow: inset 3px 0 0 var(--color-bg-surface);
}

.sidebar-link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	background: var(--color-bg-base);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--color-text-primary);
	font-size: var(--fs-sm);
	font-weight: 600;
	transition: all 0.2s;
	min-height: 56px;
}

.sidebar-link:hover {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
	transform: translateX(2px);
}

.sidebar-link__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-brand);
	transition: color 0.2s;
}

.sidebar-link:hover .sidebar-link__icon {
	color: #C9885F;
}

.sidebar-link__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.sidebar-link__body {
	flex: 1;
	min-width: 0;
}

.sidebar-link__title {
	display: block;
	font-weight: 700;
	line-height: 1.3;
	font-size: var(--fs-sm);
}

.sidebar-link__desc {
	display: block;
	font-size: 0.6875rem;
	color: var(--color-text-secondary);
	font-weight: 400;
	margin-top: 2px;
	line-height: 1.4;
}

.sidebar-link:hover .sidebar-link__desc {
	color: rgba(244, 250, 249, 0.8);
}

.sidebar-link--highlight {
	background: linear-gradient(135deg, var(--color-brand) 0%, #054F4F 100%);
	color: var(--color-text-dark-primary);
}

.sidebar-link--highlight .sidebar-link__icon {
	color: #C9885F;
}

.sidebar-link--highlight .sidebar-link__desc {
	color: rgba(244, 250, 249, 0.8);
}

.sidebar-link--line {
	background: #06C755;
	color: white;
}

.sidebar-link--line .sidebar-link__icon {
	color: white;
}

.sidebar-link--line .sidebar-link__desc {
	color: rgba(255, 255, 255, 0.85);
}

.sidebar-link--line:hover {
	background: #04A444;
	color: white;
}

.sidebar-link--code-check {
	background:
		radial-gradient(circle at 88% 12%, rgba(201, 136, 95, 0.26) 0%, transparent 38%),
		linear-gradient(135deg, #0A1414 0%, #067B7B 62%, #C9885F 100%);
	color: var(--color-text-dark-primary);
	box-shadow: 0 10px 24px rgba(6, 123, 123, 0.14);
}

/* 追従サイドバー先頭：社内AI活用研修バナー
   コード健診（コッパー強め）とは色配分を変え、ティール基調で差別化する。 */
.sidebar-training {
	display: block;
	padding: var(--space-5);
	border-radius: 14px;
	background:
		radial-gradient(circle at 86% 8%, rgba(201, 136, 95, 0.20) 0%, transparent 44%),
		linear-gradient(150deg, #0A1414 0%, #054F4F 58%, #067B7B 100%);
	color: var(--color-text-dark-primary);
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(6, 123, 123, 0.16);
	transition: transform 0.2s, box-shadow 0.2s;
}

.sidebar-training:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(6, 123, 123, 0.24);
}

.sidebar-training__label {
	display: block;
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #C9885F;
	margin-bottom: var(--space-2);
}

.sidebar-training__title {
	display: block;
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: var(--space-2);
}

.sidebar-training__desc {
	display: block;
	font-size: var(--fs-sm);
	line-height: 1.7;
	color: rgba(244, 250, 249, 0.82);
	margin-bottom: var(--space-4);
}

.sidebar-training__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text-dark-primary);
}

.sidebar-training__cta span {
	transition: transform 0.2s;
}

.sidebar-training:hover .sidebar-training__cta span {
	transform: translateX(4px);
}

.sidebar-link--code-check .sidebar-link__icon,
.sidebar-link--code-check:hover .sidebar-link__icon {
	color: #C9885F;
}

.sidebar-link--code-check .sidebar-link__desc,
.sidebar-link--code-check:hover .sidebar-link__desc {
	color: rgba(244, 250, 249, 0.82);
}

.sidebar-link--code-check:hover {
	background:
		radial-gradient(circle at 88% 12%, rgba(201, 136, 95, 0.34) 0%, transparent 38%),
		linear-gradient(135deg, #0A1414 0%, #066565 52%, #DDB293 100%);
	color: var(--color-text-dark-primary);
}

.sidebar-links__group-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.sidebar-links__group-label:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* サイドバー：ランキング */
.sidebar-ranking {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: rank-counter;
}

.sidebar-ranking li {
	counter-increment: rank-counter;
	position: relative;
	padding: var(--space-3) 0 var(--space-3) var(--space-7);
	border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
	font-size: var(--fs-xs);
}

.sidebar-ranking li:last-child {
	border-bottom: none;
}

.sidebar-ranking li::before {
	content: counter(rank-counter);
	position: absolute;
	left: 0;
	top: var(--space-3);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-bg-elevated);
	color: var(--color-text-secondary);
	font-family: var(--font-sans-latin);
	font-weight: 800;
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sidebar-ranking li:nth-child(1)::before {
	background: #C9885F;
	color: var(--color-text-dark-primary);
}

.sidebar-ranking li:nth-child(2)::before {
	background: #5BAEAE;
	color: var(--color-text-dark-primary);
}

.sidebar-ranking li:nth-child(3)::before {
	background: #9E6743;
	color: var(--color-text-dark-primary);
}

.sidebar-ranking a {
	color: var(--color-text-primary);
	text-decoration: none;
	display: block;
	line-height: 1.5;
	transition: color 0.2s;
}

.sidebar-ranking a:hover {
	color: var(--color-brand);
}

.sidebar-ranking__cat {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.625rem;
	color: var(--color-brand);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 1px 6px;
	background: rgba(6, 123, 123, 0.08);
	border-radius: 3px;
}

/* サイドバー：新着 */
.sidebar-recent {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-recent li {
	padding: var(--space-3) 0;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
	font-size: var(--fs-xs);
}

.sidebar-recent li:last-child {
	border-bottom: none;
}

.sidebar-recent a {
	color: var(--color-text-primary);
	text-decoration: none;
	line-height: 1.5;
	display: block;
	transition: color 0.2s;
}

.sidebar-recent a:hover {
	color: var(--color-brand);
}

.sidebar-recent__date {
	display: block;
	font-size: 0.625rem;
	color: var(--color-text-muted);
	margin-bottom: 2px;
	font-family: var(--font-sans-latin);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* 新着のカテゴリチップ（ランキングと同じ仕様） */
.sidebar-recent__cat {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.625rem;
	color: var(--color-brand);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 1px 6px;
	background: rgba(6, 123, 123, 0.08);
	border-radius: 3px;
}

/* サイドバー：カテゴリ一覧 */
.sidebar-cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.sidebar-cats a {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: var(--fs-xs);
	background: var(--color-bg-base);
	color: var(--color-text-secondary);
	border-radius: 999px;
	text-decoration: none;
	transition: all 0.2s;
	min-height: 28px;
}

.sidebar-cats a:hover {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
}

.sidebar-cats__count {
	margin-left: 4px;
	font-size: 0.625rem;
	opacity: 0.7;
	font-family: var(--font-sans-latin);
	font-weight: 700;
}

/* ============================================================
 * 22. お知らせ用：軽量化（コラム要素を非表示）
 * ============================================================ */

.single-post--info .single-post__featured,
.single-post--info .single-post__author,
.single-post--info .single-post__company-intro,
.single-post--info .single-post__toc,
.single-post--info .single-post__inline-cta,
.single-post--info .single-post__cta-cards,
.single-post--info .single-post__share-floating,
.single-post--info .sidebar-author,
.single-post--info .sidebar-toc,
.single-post--info .sidebar-ranking-block {
	display: none;
}

/* ============================================================
 * 23. レスポンシブ・タップ・モーション
 * ============================================================ */

@media (hover: none) {
	.single-post__related-card:hover,
	.single-post__cta-card:hover,
	.single-post__next-card:hover,
	.sidebar-link:hover {
		transform: none;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-post__progress-bar,
	.single-post__related-card,
	.single-post__cta-card,
	.single-post__next-card,
	.sidebar-link,
	.coletlab-faq__item,
	.coletlab-faq__a,
	.coletlab-faq__q::after,
	.single-post__share-btn {
		transition: none !important;
		animation: none !important;
	}
}

@media (max-width: 767px) {
	/* SP の container padding は base 定義（行35-45：padding-top: 64px + space-6）を尊重し、
	   ここで上書きしない。 */

	.single-post__author {
		padding: var(--space-4);
	}

	.single-post__inline-cta {
		margin: var(--space-6) 0;
	}

	.single-post__share-floating {
		display: none !important;
	}
}

/* ============================================================================
 * AI Lab / ラボの棚 用追加スタイル
 *  - コラム単独（.single-post__*）レイアウトを土台に、動画ヒーロー・PDF DL・
 *    配布資料 CTA・章番号 h2・SWELL 互換 class・コピーボタンなどを追加
 * ============================================================================ */

/* ─── h1 サブタイトル ─── */
.single-post__title-sub {
	display: block;
	margin-top: var(--space-2);
	font-size: 0.55em;
	font-weight: 600;
	color: var(--color-text-secondary);
	letter-spacing: 0;
}

.single-post__video-len {
	color: var(--color-text-secondary);
}
.single-post__video-len strong {
	color: var(--color-text-primary);
	font-weight: 600;
}

/* ─── 動画ヒーロー（YouTube サムネ → クリックで iframe 起動）
   ─ SP で横はみ出ししないよう、すべての子に width/max-width 100% を強制 ─ */
.single-post__video {
	margin: 0 0 var(--space-6);
	background: #000;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.single-post__video,
.single-post__video * {
	min-width: 0;
}

.single-post__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.single-post__video-thumb {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 100%;
	cursor: pointer;
	display: block;
	background: #000;
	overflow: hidden;
	border: 0;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.single-post__video-thumb img {
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--ease-out-expo);
}

.single-post__video-thumb:hover img {
	transform: scale(1.04);
}

.single-post__video-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
}

.single-post__video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s var(--ease-out-expo);
}

.single-post__video-thumb:hover .single-post__video-play {
	transform: translate(-50%, -50%) scale(1.1);
}

.single-post__video-play svg {
	width: 32px;
	height: 32px;
	fill: var(--color-brand);
	margin-left: 4px;
}

.single-post__video-meta {
	position: absolute;
	bottom: var(--space-4);
	left: var(--space-4);
	right: var(--space-4);
	color: #FFFFFF;
	z-index: 1;
}

.single-post__video-channel {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.9;
}

.single-post__video-channel::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #FF0000;
}

.single-post__video-title {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.4;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
	.single-post__video-title {
		font-size: var(--fs-lg);
	}
}

/* ─── 配布資料 CTA（AI Lab 記事冒頭） ─── */
.single-post__resource-cta {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-5);
	background: linear-gradient(135deg, var(--color-glass-brand), var(--color-glass-default));
	border: 1px solid var(--color-border-brand);
	border-radius: var(--radius-lg);
	margin: var(--space-5) 0 var(--space-6);
	text-decoration: none;
	color: var(--color-text-primary);
	transition: all 0.3s var(--ease-out-expo);
}

.single-post__resource-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -10px rgba(6, 123, 123, 0.25);
}

.single-post__resource-cta-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: var(--color-brand);
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-post__resource-cta-icon svg {
	width: 24px;
	height: 24px;
	fill: var(--color-text-dark-primary);
}

.single-post__resource-cta-body {
	flex: 1;
	min-width: 0;
}

.single-post__resource-cta-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.single-post__resource-cta-title {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.4;
	margin: 0 0 4px;
}

.single-post__resource-cta-desc {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.5;
}

.single-post__resource-cta-arrow {
	flex-shrink: 0;
	color: var(--color-brand);
	font-size: var(--fs-lg);
	font-weight: 700;
}

/* ─── PDF ダウンロード CTA（ラボの棚資料・記事冒頭） ─── */
.single-post__download {
	margin: var(--space-5) 0 var(--space-6);
}

.single-post__download-card {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-6);
	background: linear-gradient(135deg, var(--color-glass-brand), var(--color-glass-default));
	border: 1px solid var(--color-border-brand);
	border-radius: var(--radius-lg);
	flex-direction: column;
}

@media (min-width: 600px) {
	.single-post__download-card {
		flex-direction: row;
	}
}

.single-post__download-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--color-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
}

.single-post__download-icon svg {
	width: 28px;
	height: 28px;
	fill: var(--color-text-dark-primary);
}

.single-post__download-body {
	flex: 1;
	min-width: 0;
}

.single-post__download-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.single-post__download-title {
	font-size: var(--fs-lg);
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 var(--space-2);
	color: var(--color-text-primary);
}

.single-post__download-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin: 0 0 var(--space-3);
}

.single-post__download-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
}

.single-post__download-actions .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

/* パスワード入力フォーム */
.single-post__password-form {
	margin-top: var(--space-4);
	padding: var(--space-4);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
}

.single-post__password-label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-2);
	letter-spacing: 0.04em;
}

.single-post__password-row {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.single-post__password-input {
	flex: 1;
	min-width: 200px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);
	font-size: var(--fs-base);
	font-family: var(--font-mono, monospace);
	background: var(--color-bg-base);
	color: var(--color-text-primary);
	min-height: 44px;
}

.single-post__password-input:focus {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
}

.single-post__password-help {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin: var(--space-2) 0 0;
	line-height: 1.6;
}

/* ─── 動画とのセット案内（ラボの棚資料） ─── */
.single-post__pair-note {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4);
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
	margin: var(--space-5) 0;
}

.single-post__pair-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #FF0000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-post__pair-icon svg {
	width: 22px;
	height: 22px;
	fill: #FFFFFF;
}

.single-post__pair-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.single-post__pair-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: 1.7;
	margin: 0;
}

/* ─── 本文：ai-lab-* 独自 class（ラボの棚資料の本文） ─── */
.single-post__body .ai-lab-meta {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.single-post__body .ai-lab-lede {
	font-size: var(--fs-lg);
	line-height: 1.75;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-4);
	text-wrap: pretty;
}

.single-post__body .ai-lab-video-link {
	font-size: var(--fs-sm);
	margin-bottom: var(--space-5);
}

.single-post__body .ai-lab-video-link a {
	font-weight: 700;
}

/* 章番号付き h2（ai-lab-num） ─ 旧ハードコード（span.ai-lab-num）対応 */
.single-post__body h2:has(.ai-lab-num) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
}

.single-post__body .ai-lab-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 56px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-intelligence) 100%);
	color: var(--color-text-dark-primary);
	font-family: var(--font-mono, monospace);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.single-post__body .ai-lab-num {
		min-width: 48px;
		height: 48px;
		font-size: 1.25rem;
	}
}

/* 章番号は post_content の <span class="ai-lab-num">00</span> をそのまま表示。
   CSS counter による ::before 自動付与は削除（preview 元の構造に戻す）。 */

.single-post__body .ai-lab-section {
	scroll-margin-top: calc(var(--header-height, 64px) + var(--space-3));
}

.single-post__body .ai-lab-section + .ai-lab-section {
	margin-top: var(--space-7);
}

.single-post__body .ai-lab-substep {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-top: var(--space-5);
	margin-bottom: var(--space-2);
}

/* スクリーンショット（クリックで原寸） */
.single-post__body .ai-lab-screenshot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-4) 0;
	padding: 0;
}

.single-post__body .ai-lab-screenshot a {
	display: block;
	flex: 1 1 240px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	transition: all 0.3s var(--ease-out-expo);
	text-decoration: none;
}

.single-post__body .ai-lab-screenshot a:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.12);
	border-color: var(--color-border-brand);
}

.single-post__body .ai-lab-screenshot img {
	display: block;
	width: 100%;
	height: auto;
}

.single-post__body .ai-lab-caption {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin: var(--space-2) 0 var(--space-4);
	line-height: 1.6;
}

.single-post__body .ai-lab-hr {
	border: 0;
	border-top: 1px dashed var(--color-border-default);
	margin: var(--space-7) 0;
	background: transparent;
	height: 0;
}

/* 注意ボックス */
.single-post__body .ai-lab-caution {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4) var(--space-5);
	background: rgba(201, 136, 95, 0.08);
	border-radius: var(--radius-md);
	margin: var(--space-4) 0;
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.single-post__body .ai-lab-caution__label {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-2);
	background: var(--color-action);
	color: var(--color-text-primary);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ハイライト */
.single-post__body .ai-lab-highlight {
	position: relative;
	padding: var(--space-4) var(--space-5);
	border-left: 3px solid var(--color-brand);
	background: transparent;
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.65;
	color: var(--color-text-primary);
	margin: var(--space-5) 0;
}

/* テーブル */
.single-post__body .ai-lab-table {
	margin: var(--space-4) 0;
	overflow-x: auto;
}

.single-post__body .ai-lab-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-bg-base);
	border-radius: var(--radius-md);
	overflow: hidden;
	font-size: var(--fs-sm);
}

.single-post__body .ai-lab-table thead {
	background: linear-gradient(135deg, var(--color-glass-brand), var(--color-glass-default));
}

.single-post__body .ai-lab-table th {
	padding: var(--space-3);
	text-align: left;
	font-weight: 700;
	color: var(--color-text-primary);
	border-bottom: 2px solid var(--color-border-brand);
	font-size: var(--fs-sm);
}

.single-post__body .ai-lab-table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border-subtle);
	color: var(--color-text-secondary);
}

.single-post__body .ai-lab-table tbody tr:last-child td {
	border-bottom: 0;
}

/* 効果リスト OK / Warn */
.single-post__body .ai-lab-effects {
	list-style: none;
	margin: var(--space-3) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.single-post__body .ai-lab-effects li {
	position: relative;
	padding-left: 28px;
	line-height: 1.7;
	font-size: var(--fs-sm);
}

.single-post__body .ai-lab-effects__ok::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.single-post__body .ai-lab-effects__warn::before {
	content: '!';
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-action);
	color: var(--color-text-primary);
	font-size: 0.75rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* リスト */
.single-post__body .ai-lab-list {
	margin: var(--space-3) 0;
	padding-left: var(--space-5);
}

.single-post__body .ai-lab-list li {
	margin-bottom: var(--space-2);
	line-height: 1.85;
}

.single-post__body .ai-lab-list--ordered {
	list-style: decimal;
}

/* コードブロック with コピーボタン */
.single-post__body .ai-lab-code-wrap {
	position: relative;
	background: #14201F;
	border-radius: var(--radius-md);
	overflow: hidden;
	margin: var(--space-4) 0;
	border: 1px solid rgba(6, 123, 123, 0.25);
}

.single-post__body .ai-lab-copy-btn {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	padding: 8px var(--space-3);
	background: var(--color-bg-base);
	color: var(--color-text-primary);
	border: 0;
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
	cursor: pointer;
	z-index: 2;
	transition: all 0.2s;
	min-height: 32px;
	font-family: inherit;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.single-post__body .ai-lab-copy-btn:hover {
	background: var(--color-action);
}

.single-post__body .ai-lab-copy-btn.is-copied {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
}

.single-post__body .ai-lab-code-wrap .hcb_wrap {
	overflow-x: auto;
	padding: var(--space-5);
	padding-top: calc(var(--space-5) + 28px);
}

.single-post__body .ai-lab-code-wrap pre {
	margin: 0;
	background: transparent;
	color: #E8F0F0;
	font-family: var(--font-mono, "JetBrains Mono", Consolas, Menlo, monospace);
	font-size: 0.85rem;
	line-height: 1.7;
	white-space: pre;
	tab-size: 2;
}

.single-post__body .ai-lab-code-wrap code {
	font-family: inherit;
	color: inherit;
	background: transparent;
	padding: 0;
}

/* 参考・出典セクション */
.single-post__body .ai-lab-references {
	margin-top: var(--space-7);
	padding: var(--space-5);
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
}

.single-post__body .ai-lab-references h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	font-size: var(--fs-xl);
}

.single-post__body .ai-lab-references .ai-lab-num {
	min-width: 40px;
	height: 40px;
	font-size: var(--fs-base);
}

/* ─── SWELL 由来 class（the_content フィルターで coletlab-* に置換予定）
   ─ <p> 直下にテキストノードと <strong> が混在するため flex は使わない（崩れる）
   ─ ::before のラベルは absolute 配置 */

/* 注意ボックス */
.single-post__body .is-style-big_icon_caution {
	position: relative;
	padding: var(--space-4) var(--space-5);
	padding-top: calc(var(--space-4) + 26px);
	background: rgba(201, 136, 95, 0.08);
	border-radius: var(--radius-md);
	margin: var(--space-4) 0;
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.single-post__body .is-style-big_icon_caution::before {
	content: '注意';
	position: absolute;
	left: var(--space-5);
	top: var(--space-3);
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-2);
	background: var(--color-action);
	color: var(--color-text-primary);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	height: fit-content;
}

/* ポイントボックス */
.single-post__body .is-style-big_icon_point {
	position: relative;
	padding: var(--space-4) var(--space-5);
	border-left: 3px solid var(--color-brand);
	background: var(--color-glass-brand);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--fs-base);
	line-height: 1.75;
	color: var(--color-text-primary);
	margin: var(--space-5) 0;
}

.single-post__body .is-style-big_icon_point::before {
	content: 'POINT';
	display: block;
	font-size: var(--fs-xs);
	font-weight: 800;
	color: var(--color-brand);
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}

/* マーカー */
.single-post__body .swl-marker.mark_yellow {
	background: linear-gradient(transparent 60%, rgba(201, 136, 95, 0.32) 60%);
	font-weight: 700;
	padding: 0 2px;
}

/* WP 画像 */
.single-post__body .wp-block-image {
	margin: var(--space-5) 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
}

.single-post__body .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.single-post__body .wp-block-image figcaption {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	background: var(--color-bg-surface);
	margin: 0;
}

/* WP 標準リスト（wp-block-list）：
   §10 で .wp-block-list:not([class*="coletlab"]) > li::before の緑マーカーを定義済み。
   ここで list-style: disc/decimal を当ててしまうとブラウザ標準マーカーと二重表示になるため
   list-style: none を強制する。padding-left も §10 の li 側で制御する。 */
.single-post__body ul.wp-block-list:not(.coletlab-list--under-dashed),
.single-post__body ol.wp-block-list:not(.coletlab-list--under-dashed) {
	list-style: none;
	padding-left: 0;
	margin: var(--space-4) 0;
}

.single-post__body ul.wp-block-list li,
.single-post__body ol.wp-block-list li {
	margin-bottom: var(--space-2);
	line-height: 1.85;
}

/* ============================================================================
 * カラーモディファイア（ページ判別用）
 *  - .single-post                   → コラム（既定・Teal #067B7B）
 *  - .single-post.single-post--ailab    → AI Lab 記事（ティール #067B7B / 知性）
 *  - .single-post.single-post--resource → ラボの棚 配布資料（コッパー #C9885F / 行動）
 *
 *  目立つアクセント要素（カテゴリチップ・更新日色・hover 色・章番号・
 *  POINT ボックスのアクセント・サイドバー検索の背景グラデ）だけ色分けし、
 *  リンク・h2/h3 など本文タイポは Teal 共通（識別しやすさ＋統一感の両立）。
 * ============================================================================ */

/* ─── AI Lab 記事：Cyan アクセント ─── */
.single-post--ailab .single-post__category {
	background: var(--color-intelligence);
	color: var(--color-text-primary);
}

.single-post--ailab .single-post__updated strong {
	color: #067B7B;
}

.single-post--ailab .single-post__share-btn:hover {
	background: var(--color-intelligence);
	border-color: var(--color-intelligence);
	color: var(--color-text-primary);
}

.single-post--ailab .single-post__related-card-cat,
.single-post--ailab .single-post__next-card-cat {
	color: #067B7B;
}

.single-post--ailab .sidebar-block__title {
	color: #067B7B;
}

.single-post--ailab .sidebar-search-block {
	background: linear-gradient(135deg, var(--color-intelligence) 0%, #5BAEAE 100%);
}

.single-post--ailab .sidebar-search__btn {
	background: var(--color-bg-surface);
	color: var(--color-intelligence-700, #067B7B);
}

.single-post--ailab .single-post__body .ai-lab-num {
	background: linear-gradient(135deg, var(--color-intelligence) 0%, var(--color-brand) 100%);
}

.single-post--ailab .single-post__body .coletlab-callout--point {
	background: rgba(6, 123, 123, 0.10);
}

.single-post--ailab .single-post__body .coletlab-callout--point::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26A7 7 0 0 0 12 2z'/></svg>");
}

.single-post--ailab .single-post__body .coletlab-faq__q::before {
	background: var(--color-intelligence);
}

.single-post--ailab .single-post__body .coletlab-list--under-dashed > li::before {
	background: var(--color-intelligence);
}

.single-post--ailab .single-post__body .ai-lab-substep {
	color: #067B7B;
}

.single-post--ailab .single-post__cta-card-icon {
	color: #066565;  /* intelligence-900：薄ベージュ背景上で最大視認性 */
}

.single-post--ailab .single-post__cta-card-arrow {
	color: #5BAEAE;
}

/* highlight（30分相談）と line（LINE）は色付き背景のため、アイコン・矢印は白を維持 */
.single-post--ailab .single-post__cta-card--highlight .single-post__cta-card-icon,
.single-post--ailab .single-post__cta-card--highlight .single-post__cta-card-arrow,
.single-post--ailab .single-post__cta-card--line .single-post__cta-card-icon,
.single-post--ailab .single-post__cta-card--line .single-post__cta-card-arrow {
	color: var(--color-text-dark-primary);
}

.single-post--ailab .single-post__inline-cta {
	border-color: rgba(6, 123, 123, 0.45);
	background: linear-gradient(135deg, rgba(6, 123, 123, 0.08), transparent);
}

.single-post--ailab .single-post__inline-cta__label {
	color: #067B7B;
}

.single-post--ailab .single-post__resource-cta {
	border-color: rgba(6, 123, 123, 0.45);
	background: linear-gradient(135deg, rgba(6, 123, 123, 0.08), var(--color-glass-default));
}

.single-post--ailab .single-post__resource-cta-icon {
	background: var(--color-intelligence);
}

.single-post--ailab .single-post__resource-cta-label,
.single-post--ailab .single-post__resource-cta-arrow {
	color: #067B7B;
}

/* ─── ラボの棚 配布資料：Amber アクセント ─── */
.single-post--resource .single-post__category {
	background: var(--color-action);
	color: var(--color-text-primary);
}

.single-post--resource .single-post__updated strong {
	color: #9E6743;
}

.single-post--resource .single-post__share-btn:hover {
	background: var(--color-action);
	border-color: var(--color-action);
	color: var(--color-text-primary);
}

.single-post--resource .single-post__related-card-cat,
.single-post--resource .single-post__next-card-cat {
	color: #9E6743;
}

.single-post--resource .sidebar-block__title {
	color: #9E6743;
}

.single-post--resource .sidebar-search-block {
	background: linear-gradient(135deg, var(--color-action) 0%, #9E6743 100%);
	color: var(--color-text-primary);
}

.single-post--resource .sidebar-search__btn {
	background: var(--color-bg-surface);
	color: #9E6743;
}

.single-post--resource .single-post__body .ai-lab-num {
	background: linear-gradient(135deg, var(--color-action) 0%, #9E6743 100%);
	color: var(--color-text-primary);
}

.single-post--resource .single-post__body .coletlab-callout--point {
	background: rgba(201, 136, 95, 0.12);
}

.single-post--resource .single-post__body .coletlab-callout--point::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E6743' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26A7 7 0 0 0 12 2z'/></svg>");
}

.single-post--resource .single-post__body .coletlab-faq__q::before {
	background: var(--color-action);
	color: var(--color-text-primary);
}

.single-post--resource .single-post__body .coletlab-list--under-dashed > li::before {
	background: var(--color-action);
}

.single-post--resource .single-post__body .ai-lab-substep {
	color: #9E6743;
}

.single-post--resource .single-post__cta-card-icon {
	color: #5E3D27;  /* action-900：薄ベージュ背景上で最大視認性 */
}

.single-post--resource .single-post__cta-card-icon svg {
	fill: currentColor;
}

/* highlight（30分相談）と line（LINE）は色付き背景のため、アイコン・矢印は白を維持 */
.single-post--resource .single-post__cta-card--highlight .single-post__cta-card-icon,
.single-post--resource .single-post__cta-card--highlight .single-post__cta-card-arrow,
.single-post--resource .single-post__cta-card--line .single-post__cta-card-icon,
.single-post--resource .single-post__cta-card--line .single-post__cta-card-arrow {
	color: var(--color-text-dark-primary);
}

.single-post--resource .single-post__cta-card-arrow {
	color: #9E6743;
}

.single-post--resource .single-post__inline-cta {
	border-color: rgba(201, 136, 95, 0.45);
	background: linear-gradient(135deg, rgba(201, 136, 95, 0.10), transparent);
}

.single-post--resource .single-post__inline-cta__label {
	color: #9E6743;
}

.single-post--resource .single-post__download-icon {
	background: var(--color-action);
}

.single-post--resource .single-post__download-icon svg {
	fill: var(--color-text-primary);
}

.single-post--resource .single-post__download-card {
	background: linear-gradient(135deg, rgba(201, 136, 95, 0.10), var(--color-glass-default));
	border-color: rgba(201, 136, 95, 0.45);
}

.single-post--resource .single-post__download-label,
.single-post--resource .single-post__pair-label {
	color: #9E6743;
}

.single-post--resource .single-post__pair-icon {
	background: var(--color-action);
}

.single-post--resource .single-post__pair-icon svg {
	fill: var(--color-text-primary);
}

/* ============================================================================
 * SP/タブレット 仕上げ補正（responsive 検査の指摘反映）
 * ============================================================================ */

/* ─── ai-lab-num を持つ h2：コラム標準の H.01 章番号 + 5色ドットを抑制
       （ai-lab-num スパンが章番号として機能するため重複防止） ─── */
.single-post__body h2:has(.ai-lab-num) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
}

.single-post__body h2:has(.ai-lab-num)::before { content: none; }
.single-post__body h2:has(.ai-lab-num)::after { display: none; }

/* ─── h1 サブタイトル：SP でも確実に読める下限固定 ─── */
.single-post__title-sub {
	font-size: clamp(0.875rem, 3vw, 1rem);
}

/* ─── 動画ヒーロー：SP では再生ボタンと meta が重ならないよう meta を下端寄せ＋短縮 ─── */
@media (max-width: 480px) {
	.single-post__video-meta {
		bottom: var(--space-3);
		left: var(--space-3);
		right: var(--space-3);
	}
	.single-post__video-title {
		font-size: var(--fs-sm);
		line-height: 1.35;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.single-post__video-play {
		width: 64px;
		height: 64px;
	}
	.single-post__video-play svg {
		width: 26px;
		height: 26px;
	}
}

/* ─── コードブロック：SP では font-size を下げて視認性向上 ─── */
@media (max-width: 600px) {
	.single-post__body .ai-lab-code-wrap pre {
		font-size: 0.78rem;
		line-height: 1.65;
	}
	.single-post__body .ai-lab-code-wrap .hcb_wrap {
		padding: var(--space-4);
		padding-top: calc(var(--space-4) + 32px);
	}
	.single-post__body .ai-lab-copy-btn {
		top: var(--space-2);
		right: var(--space-2);
		padding: 6px var(--space-2);
		font-size: 0.7rem;
	}
}

/* ─── 著者ブロック footer：SP 内側 padding 縮小 ─── */
@media (max-width: 599px) {
	.single-post__author--footer {
		padding: var(--space-5) var(--space-4);
	}
}

/* ─── パスワード入力フォーム：SP では input/btn とも 100% 幅 ─── */
@media (max-width: 480px) {
	.single-post__password-row {
		flex-direction: column;
	}
	.single-post__password-input {
		min-width: 100%;
		width: 100%;
	}
	.single-post__password-row .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ─── ペア案内（資料 → AI Lab 記事へ）：SP では縦並び＋アイコンを左端 ─── */
@media (max-width: 480px) {
	.single-post__pair-note {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}
}

/* ─── PDF DL ボタンと LINE ボタン：SP では縦並び＋フル幅 ─── */
@media (max-width: 599px) {
	.single-post__download-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.single-post__download-actions .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================
 * Resource = 資料モード（ラボの棚配布資料）
 *
 * 設計方針
 * ・1カラム / 横幅広め（YouTube 画面収録用に 1080px 想定）
 * ・本文も全幅活用（読みやすさ < 動画映え）
 * ・章番号は h2 の「上」に丸バッジで配置（インラインでは見づらい）
 * ・図版・表・コードブロックはコンテナ幅いっぱい
 * ・全体に丸み・shadow・amber アクセントで「可愛らしさ」を担保
 * ・最初のアイキャッチ動画ブロックなし（h1 タイトル → 本文へ直行）
 * ============================================================ */

/* ─── 1カラム化＋横幅拡張・タブレットも余白広めに ─── */
.single-post--resource .single-post__container {
	display: block;
	max-width: 1080px;
	margin-inline: auto;
	gap: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.single-post--resource .single-post__container {
		padding-inline: var(--space-5);   /* タブレット 16 → 24px に拡張 */
	}
}

@media (min-width: 1024px) {
	.single-post--resource .single-post__container {
		max-width: 1080px;
		grid-template-columns: 1fr;
	}
}

.single-post--resource .single-post__main {
	max-width: 100%;
}

/* ─── 本文 .single-post__body の max-width: 760px を解除（資料モードは全幅） ─── */
.single-post--resource .single-post__body {
	max-width: 100%;
	width: 100%;
}

/* ─── h2 の ::after（コラム用 5色ドット）は資料モードで非表示。
       ::before は資料モードで章番号バッジに使うので無効化しない。 ─── */
.single-post--resource .single-post__body h2.wp-block-heading::after,
.single-post--resource .single-post__body h2::after {
	content: none !important;
	display: none !important;
}

/* ─── h1 タイトル（brand teal をベースカラーに） ─── */
.single-post--resource .single-post__title {
	font-family: var(--font-serif-jp);
	font-size: clamp(1.75rem, 5.5vw, 2.75rem);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-5);
	text-align: left;
	font-feature-settings: "palt";
}

.single-post--resource .single-post__title::before {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-300) 100%);
	border-radius: 2px;
	margin-bottom: var(--space-5);
}

/* ─── h2 章タイトル ─── */
.single-post--resource .single-post__body h2.wp-block-heading,
.single-post--resource .single-post__body h2 {
	display: block;
	font-family: var(--font-serif-jp);
	font-size: clamp(1.625rem, 4.5vw, 2.25rem);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: var(--space-9) 0 var(--space-6);   /* 拡大：上 64px → 96px / 下 24px → 32px */
	padding-top: var(--space-7);                /* 32px → 48px */
	border-top: 1px solid var(--color-border-subtle);
	font-feature-settings: "palt";
}

/* 1章目（00 はじめに）の上には罫線を入れない */
.single-post--resource .single-post__body .ai-lab-section:first-of-type h2 {
	border-top: none;
	padding-top: 0;
	margin-top: var(--space-3);
}

/* ─── 章番号 .ai-lab-num：丸バッジ（brand teal グラデ） ─── */
.single-post--resource .single-post__body .ai-lab-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-brand-100) 0%, var(--color-brand-300) 100%);
	border: 2px solid var(--color-brand);
	color: var(--color-brand-900);
	font-family: var(--font-sans-latin);
	font-size: 1.375rem;
	font-weight: 900;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	margin: 0 0 var(--space-4) 0;
	vertical-align: baseline;
	box-shadow: 0 4px 12px -4px rgba(6, 123, 123, 0.30);
	opacity: 1;
}

/* ─── ai-lab-section ラッパー：章間にゆとりを持たせる ─── */
.single-post--resource .single-post__body .ai-lab-section {
	margin-bottom: var(--space-9);   /* 48px → 96px */
}

/* 参考・出典セクション直前のセクション（04）の margin-bottom を打ち消し */
.single-post--resource .single-post__body .ai-lab-section:has(+ .ai-lab-references) {
	margin-bottom: 0;
}

/* 参考・出典セクション本体：上罫線で軽く区切るだけ。背景・padding はコラム共通から外す */
.single-post--resource .single-post__body .ai-lab-section.ai-lab-references {
	margin: var(--space-5) 0 var(--space-3);
	padding: var(--space-5) 0 0;            /* コラム共通の padding: 24px 全方向 → 上だけ */
	background: none;                        /* コラム共通の薄ベージュ背景を削除 */
	border-top: 1px solid var(--color-border-subtle);
	border-radius: 0;                        /* コラム共通の角丸も解除 */
}

/* references 内の h2 はミニ見出し扱い（章番号バッジは表示するが上罫線・上余白なし） */
.single-post--resource .single-post__body .ai-lab-section.ai-lab-references h2 {
	margin: 0 0 var(--space-3);
	padding-top: 0;
	border-top: none;
}

@media (min-width: 1024px) {
	.single-post--resource .single-post__body .ai-lab-section {
		margin-bottom: var(--space-10);   /* PC は更に大きく 128px */
	}
	.single-post--resource .single-post__body .ai-lab-section.ai-lab-references {
		margin-bottom: var(--space-7);
	}
}

/* ─── h3 節タイトル：左にミニドット＋下に細い brand-100 罫線（シンプル）
       NG禁止セット（角丸＋border-left＋塗り背景）は使わない ─── */
.single-post--resource .single-post__body h3.wp-block-heading,
.single-post--resource .single-post__body h3 {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	font-family: var(--font-serif-jp);
	font-size: clamp(1.25rem, 3.5vw, 1.5rem);   /* 20〜24px */
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin: var(--space-7) 0 var(--space-4);    /* 上 48px / 下 16px */
	padding: 0 0 var(--space-3);                 /* 下罫線との間隔 12px */
	border-bottom: 2px solid var(--color-brand-100);
	border-left: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-snug);
}

.single-post--resource .single-post__body h3.wp-block-heading::before,
.single-post--resource .single-post__body h3::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-brand);
	flex-shrink: 0;
	transform: translateY(-2px);
	box-shadow: 0 0 0 4px var(--color-brand-100);
	margin-right: var(--space-1);
}

/* ─── h4 / h5 はサブ節 ─── */
.single-post--resource .single-post__body h4.wp-block-heading,
.single-post--resource .single-post__body h4 {
	font-family: var(--font-serif-jp);
	font-size: 1.1875rem;                        /* 19px */
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin: var(--space-7) 0 var(--space-4);    /* 上 48px / 下 16px */
	padding-bottom: var(--space-3);              /* 罫線まで 12px */
	border-bottom: 1px dashed var(--color-brand-300);
}

/* ─── h5：本文より小さく、h4 より小さく。控えめだが読みやすいサイズ ─── */
.single-post--resource .single-post__body h5.wp-block-heading,
.single-post--resource .single-post__body h5 {
	display: block;
	font-family: var(--font-serif-jp);
	font-size: 1.125rem;              /* 18px */
	font-weight: var(--fw-bold);
	color: var(--color-brand-700);
	margin: var(--space-1) 0 var(--space-1);
	padding: 0;
	border: none;
	background: none;
	letter-spacing: var(--ls-tight);
	line-height: 1.5;
}

.single-post--resource .single-post__body h5.wp-block-heading::before,
.single-post--resource .single-post__body h5::before {
	content: "▸";
	display: inline-block;
	margin-right: 4px;
	color: var(--color-brand);
	font-weight: 700;
	font-size: 0.85em;
	transform: translateY(-1px);
}

/* ai-lab-substep（ラテン文字の小ラベル）：通常 h5 より小さく、強調感は維持 */
.single-post--resource .single-post__body h5.ai-lab-substep {
	display: block;
	font-family: var(--font-sans-latin);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-700);
	margin: var(--space-1) 0 var(--space-1);
	padding: 0;
	background: none;
	border: none;
}

/* ─── 本文 p：横幅広め（YouTube 画面映え重視）。base.css の 65ch 制約を解除
       ※ 動画撮影で見やすくするため、本文 19px / 行間 2.0 / 段落間にゆとり ─── */
.single-post--resource .single-post__body p {
	max-width: none;
	font-size: 1.1875rem;     /* 19px */
	line-height: 2.0;          /* 1.95 → 2.0（行間ゆとり） */
	margin: 0 0 var(--space-5); /* 16px → 24px（段落間ゆとり） */
	color: var(--color-text-primary);
}

@media (max-width: 767px) {
	.single-post--resource .single-post__body p {
		font-size: 1.0625rem;  /* SP 17px */
		line-height: 1.85;
	}
}

.single-post--resource .single-post__body p.ai-lab-lede {
	font-size: 1.375rem;   /* 22px（旧 18px） */
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin: var(--space-3) 0 var(--space-4);
	line-height: 1.7;
}

.single-post--resource .single-post__body p.ai-lab-video-link {
	margin-bottom: var(--space-4);
}

.single-post--resource .single-post__body p.ai-lab-video-link a {
	color: var(--color-brand-700);
	font-weight: var(--fw-bold);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.single-post--resource .single-post__body p.ai-lab-caption {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

/* ─── ハイライト：プルクオート型（背景・枠線なし／引用符SVG＋大きめ太字）
       ※「角丸＋左border-left＋塗り背景」のNGセットは禁止（forbidden_callout_patterns_2026-05-04）
       ※ 上の amber 系と被らないよう brand (teal) 系で配色 ─── */
.single-post--resource .single-post__body p.ai-lab-highlight {
	position: relative;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: var(--space-5) var(--space-2) var(--space-5) var(--space-8);
	margin: var(--space-8) 0;     /* 48px → 64px（前後にゆとり） */
	font-family: var(--font-sans-jp);
	font-weight: var(--fw-bold);
	font-size: clamp(1.125rem, 3vw, 1.5rem);  /* 18〜24px に強化 */
	line-height: 1.55;
	color: var(--color-brand-900);
	letter-spacing: var(--ls-tight);
}

.single-post--resource .single-post__body p.ai-lab-highlight::before {
	content: "“";
	position: absolute;
	left: 0;
	top: -0.18em;
	font-family: var(--font-sans-latin);
	font-size: 4rem;
	line-height: 1;
	color: var(--color-brand);
	opacity: 0.65;
	font-weight: 900;
}

.single-post--resource .single-post__body p.ai-lab-highlight strong {
	color: var(--color-brand);
	background: linear-gradient(180deg, transparent 65%, var(--color-brand-100) 65%);
	padding: 0 0.06em;
}

/* ─── 注意 callout：丸みカード化＋影 ─── */
/* ─── 注意 callout：display: block にして label をテキストのインラインに流す
       （旧 flex 構造だと label と本文が別カラムに分離する問題を解消） ─── */
.single-post--resource .single-post__body .ai-lab-caution {
	display: block;
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-brand);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-5);
	margin: var(--space-5) 0;
	font-size: 1.0625rem;
	line-height: 1.85;
	color: var(--color-text-primary);
	box-shadow: var(--shadow-sm);
}

.single-post--resource .single-post__body .ai-lab-caution__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 2px 10px;
	margin-right: var(--space-2);
	background: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-700) 100%);
	color: var(--color-text-on-brand);
	font-size: var(--fs-xs); /* 11px→12px：本文中のラベル。最低フォントサイズ確保 */
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	border-radius: var(--radius-full);
	vertical-align: 0.12em;   /* 本文の baseline に揃える */
}

/* ─── 図版（スクショ）：本文より広く・コンテナ幅いっぱい・上下にゆとり ─── */
.single-post--resource .single-post__body p.ai-lab-screenshot {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: none;
	width: 100%;
	margin: var(--space-7) 0;       /* 24px → 48px */
	/* 旧 <a>（画像リンク）が担っていたカード枠をコンテナ側へ移設（画像リンク廃止・2026-06-01） */
	padding: var(--space-3);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* ラボの棚の図版は画像リンク（<a>）を廃止。枠は p.ai-lab-screenshot 側へ移設済み。 */

.single-post--resource .single-post__body p.ai-lab-screenshot img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-md);
	max-width: 100%;
}

/* ─── リスト（ai-lab-list）：brand チップ風 bullet ＋ ゆとり ─── */
.single-post--resource .single-post__body ul.ai-lab-list,
.single-post--resource .single-post__body ol.ai-lab-list {
	list-style: none;
	padding-left: 0;
	margin: var(--space-4) 0 var(--space-5);   /* 上余白も追加 */
	display: flex;
	flex-direction: column;
	gap: var(--space-3);                        /* 8px → 12px（行間ゆとり） */
}

.single-post--resource .single-post__body ul.ai-lab-list > li,
.single-post--resource .single-post__body ol.ai-lab-list > li {
	position: relative;
	padding-left: var(--space-6);
	font-size: 1.1875rem;  /* 19px（本文と揃える） */
	line-height: 1.85;
	color: var(--color-text-primary);
}

@media (max-width: 767px) {
	.single-post--resource .single-post__body ul.ai-lab-list > li,
	.single-post--resource .single-post__body ol.ai-lab-list > li {
		font-size: 1.0625rem;  /* SP 17px */
	}
}

.single-post--resource .single-post__body ul.ai-lab-list > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.55em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-brand);
	border: 2px solid var(--color-brand-100);
}

.single-post--resource .single-post__body ol.ai-lab-list--ordered {
	counter-reset: resource-ol;
}

.single-post--resource .single-post__body ol.ai-lab-list--ordered > li {
	counter-increment: resource-ol;
	padding-left: var(--space-7);
}

.single-post--resource .single-post__body ol.ai-lab-list--ordered > li::before {
	content: counter(resource-ol);
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-brand-100);
	color: var(--color-brand-900);
	font-family: var(--font-sans-latin);
	font-weight: 900;
	font-size: var(--fs-sm);
	letter-spacing: 0;
	border: none;
	transform: none;
}

/* ─── テーブル：黒背景ヘッダ・丸みカード化・上下にゆとり ─── */
.single-post--resource .single-post__body figure.wp-block-table,
.single-post--resource .single-post__body .ai-lab-table {
	margin: var(--space-7) 0;    /* 24px → 48px */
	max-width: none;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.single-post--resource .single-post__body figure.wp-block-table table,
.single-post--resource .single-post__body .ai-lab-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;  /* 16px（旧 14px） */
	background: var(--color-bg-base);
	overflow: hidden;
	border-radius: var(--radius-lg);
}

@media (max-width: 767px) {
	.single-post--resource .single-post__body figure.wp-block-table table,
	.single-post--resource .single-post__body .ai-lab-table table {
		font-size: 0.9375rem;  /* SP 15px */
	}
}

.single-post--resource .single-post__body figure.wp-block-table thead,
.single-post--resource .single-post__body .ai-lab-table thead {
	background: linear-gradient(135deg, var(--color-bg-dark-primary) 0%, var(--color-bg-dark-surface) 100%);
}

.single-post--resource .single-post__body figure.wp-block-table thead th,
.single-post--resource .single-post__body .ai-lab-table thead th {
	color: var(--color-text-on-brand);
	font-weight: var(--fw-bold);
	padding: var(--space-3) var(--space-4);
	text-align: left;
	letter-spacing: 0.02em;
}

.single-post--resource .single-post__body figure.wp-block-table tbody td,
.single-post--resource .single-post__body .ai-lab-table tbody td {
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
	color: var(--color-text-primary);
	vertical-align: top;
}

.single-post--resource .single-post__body figure.wp-block-table tbody tr:nth-child(even),
.single-post--resource .single-post__body .ai-lab-table tbody tr:nth-child(even) {
	background: var(--color-bg-surface);
}

/* ─── コードブロック：カード化・丸み・影・上下にゆとり ─── */
.single-post--resource .single-post__body .ai-lab-code-wrap {
	position: relative;
	margin: var(--space-7) 0;    /* 24px → 48px */
	max-width: none;
	width: 100%;
}

.single-post--resource .single-post__body .ai-lab-code-wrap .hcb_wrap {
	background: var(--color-bg-dark-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-4) var(--space-5);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: var(--shadow-md);
}

.single-post--resource .single-post__body .ai-lab-code-wrap pre {
	margin: 0;
	padding: 0;
	background: transparent;
	max-width: none;
}

.single-post--resource .single-post__body .ai-lab-code-wrap pre code {
	display: block;
	font-family: var(--font-mono);
	font-size: 15px;  /* 旧 13px → 15px（動画撮影で読めるサイズ） */
	line-height: 1.75;
	color: var(--color-text-dark-primary);
	white-space: pre;
	tab-size: 2;
}

@media (max-width: 767px) {
	.single-post--resource .single-post__body .ai-lab-code-wrap pre code {
		font-size: 13px;
	}
}

.single-post--resource .single-post__body .ai-lab-copy-btn {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	background: var(--color-brand);
	color: var(--color-text-on-brand);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-3);
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background var(--duration-fast), transform var(--duration-fast);
	z-index: 1;
	min-height: 32px;
	box-shadow: 0 2px 8px rgba(6, 123, 123, 0.35);
}

.single-post--resource .single-post__body .ai-lab-copy-btn:hover {
	background: var(--color-brand-700);
	color: var(--color-text-on-brand);
	transform: translateY(-1px);
}

@media (hover: none) {
	.single-post--resource .single-post__body .ai-lab-copy-btn:hover {
		transform: none;
	}
}

.single-post--resource .single-post__body .ai-lab-copy-btn.is-copied {
	background: var(--color-action);
	color: var(--color-text-primary);
}

/* ─── 一時チャットの効果（OK / warn 混在リスト） ─── */
.single-post--resource .single-post__body .ai-lab-effects {
	list-style: none;
	padding: 0;
	margin: var(--space-3) 0 var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.single-post--resource .single-post__body .ai-lab-effects > li {
	position: relative;
	padding: var(--space-2) var(--space-3) var(--space-2) var(--space-7);
	font-size: 1.125rem;  /* 18px（旧 16px） */
	line-height: 1.7;
	color: var(--color-text-primary);
	border-radius: var(--radius-md);
}

.single-post--resource .single-post__body .ai-lab-effects > li::before {
	content: "";
	position: absolute;
	left: var(--space-2);
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
}

.single-post--resource .single-post__body .ai-lab-effects__ok {
	background: var(--color-glass-brand);
}

.single-post--resource .single-post__body .ai-lab-effects__ok::before {
	background-color: var(--color-brand-100);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23054F4F'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

.single-post--resource .single-post__body .ai-lab-effects__warn {
	background: var(--color-action-100);
}

.single-post--resource .single-post__body .ai-lab-effects__warn::before {
	background-color: var(--color-bg-base);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A4A0A'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

/* ─── ai-lab-hr（破線セパレータ）：h2 上罫線と二重なので非表示 ─── */
.single-post--resource .single-post__body hr.ai-lab-hr {
	display: none;
}

/* ─── 参考・出典セクション：通常リストより字を小さく ─── */
.single-post--resource .single-post__body .ai-lab-references ul.ai-lab-list > li {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
}

.single-post--resource .single-post__body .ai-lab-references ul.ai-lab-list > li a {
	color: var(--color-text-primary);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ============================================================
 * Resource = SP/タブレット最終調整（モバイルファースト品質担保）
 * 2026-05-05 追加
 * ============================================================ */

@media (max-width: 600px) {
	/* 章番号バッジ：56→48に縮小（SP画面で過大にならないように） */
	.single-post--resource .single-post__body .ai-lab-num {
		width: 48px;
		height: 48px;
		font-size: 1.25rem;          /* 20px */
		margin-bottom: var(--space-3);
	}

	/* ハイライト：引用符と padding-left を SP では縮小 */
	.single-post--resource .single-post__body p.ai-lab-highlight {
		padding: var(--space-4) 0 var(--space-4) var(--space-6);
		margin: var(--space-6) 0;
	}

	.single-post--resource .single-post__body p.ai-lab-highlight::before {
		font-size: 3rem;
		top: -0.12em;
	}

	/* ai-lab-effects li：padding-left を縮小（アイコン 24→20px・left 4） */
	.single-post--resource .single-post__body .ai-lab-effects > li {
		padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-2) + 24px);
		font-size: 1rem;             /* 16px */
	}
	.single-post--resource .single-post__body .ai-lab-effects > li::before {
		left: var(--space-1);
		width: 22px;
		height: 22px;
		background-size: 12px 12px;
	}

	/* h2 章タイトル：SP では上余白を更に圧縮（PC は維持） */
	.single-post--resource .single-post__body h2.wp-block-heading,
	.single-post--resource .single-post__body h2 {
		margin-top: var(--space-7);
		padding-top: var(--space-5);
	}

	/* h3：SP では上余白を圧縮 */
	.single-post--resource .single-post__body h3.wp-block-heading,
	.single-post--resource .single-post__body h3 {
		margin-top: var(--space-5);
	}

	/* ai-lab-section：SP では章間余白を圧縮（PC は 96/128px のまま） */
	.single-post--resource .single-post__body .ai-lab-section {
		margin-bottom: var(--space-7);   /* SP は 48px */
	}

	/* テーブル padding：SP ではコンパクトに */
	.single-post--resource .single-post__body figure.wp-block-table thead th,
	.single-post--resource .single-post__body .ai-lab-table thead th,
	.single-post--resource .single-post__body figure.wp-block-table tbody td,
	.single-post--resource .single-post__body .ai-lab-table tbody td {
		padding: var(--space-2) var(--space-3);
	}

	/* コードブロックの padding：SP で広げすぎず */
	.single-post--resource .single-post__body .ai-lab-code-wrap .hcb_wrap {
		padding: var(--space-5) var(--space-3) var(--space-4);
	}

	/* 注意 callout：SP で padding 縮小・label を別行に */
	.single-post--resource .single-post__body .ai-lab-caution {
		padding: var(--space-3) var(--space-4);
		font-size: 1rem;
		line-height: 1.75;
	}

	.single-post--resource .single-post__body .ai-lab-caution__label {
		display: inline-block;
		margin-right: var(--space-2);
		margin-bottom: 2px;
		font-size: var(--fs-xs); /* 10px→12px：SPでも本文中ラベルの可読性を確保 */
		min-width: 48px;
	}

	/* リード文 SP：22→18px */
	.single-post--resource .single-post__body p.ai-lab-lede {
		font-size: 1.125rem;
		line-height: 1.6;
	}

	/* h1 タイトル：SP の上下余白を圧縮 */
	.single-post--resource .single-post__title {
		margin-bottom: var(--space-4);
	}
	.single-post--resource .single-post__title::before {
		width: 48px;
		height: 3px;
		margin-bottom: var(--space-3);
	}
}

/* ============================================================
 * 記事画像の角丸を 2px に統一（継承ルール2「角丸長方形にしない」準拠・2026-06-01）
 * アイキャッチ／本文挿入画像／図版を、カード・罫線・製図と同じ 2px に揃える。
 * ※ ラボノートのアイキャッチも .single-post__featured を共用するため、ここで一括適用。
 * ============================================================ */
.single-post__featured,
.single-post__body .wp-block-image,
.single-post__body .wp-block-image img,
.single-post__body .ai-lab-screenshot a,
.single-post__body .ai-lab-screenshot img,
.single-post--resource .single-post__body p.ai-lab-screenshot,
.single-post--resource .single-post__body p.ai-lab-screenshot img {
	border-radius: var(--radius-sm);
}