/* ==========================================================================
   Product Pages — Modern Minimal
   ========================================================================== */

:root {
	--swch-accent: #4f46e5;
	--swch-accent-light: #eef2ff;
	--swch-accent-hover: #4338ca;
	--swch-text: #1e293b;
	--swch-text-secondary: #64748b;
	--swch-text-muted: #94a3b8;
	--swch-border: #e2e8f0;
	--swch-border-light: #f1f5f9;
	--swch-bg: #f8fafc;
	--swch-white: #fff;
	--swch-radius: 10px;
	--swch-radius-sm: 6px;
	--swch-radius-lg: 16px;
	--swch-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	--swch-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.06);
	--swch-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -18px rgba(15, 23, 42, 0.16);
	--swch-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 22px 44px -22px rgba(79, 70, 229, 0.3);
	--swch-transition: 0.2s ease;
	--swch-tech-violet: #4338ca;
	--swch-tech-fuchsia: #db2777;
	--swch-tech-cyan: #22d3ee;
}

/* ==========================================================================
   Single Product
   ========================================================================== */

.swch-product-single {
	padding: 48px 0 96px;
}

.swch-product-layout {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 40px;
	align-items: start;
}

/* Main Content */
.swch-product-main {
	min-width: 0;
}

.swch-product-main h1 {
	position: relative;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--swch-text);
	margin: 0 0 24px;
	padding-bottom: 16px;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.swch-product-main h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 2px;
	background: linear-gradient(90deg, var(--swch-tech-violet), var(--swch-tech-fuchsia));
	border-radius: 2px;
}

.swch-product-thumbnail {
	margin-bottom: 28px;
	border-radius: var(--swch-radius);
	overflow: hidden;
	border: 1px solid var(--swch-border);
}

.swch-product-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
}

.swch-product-content {
	line-height: 1.8;
	color: var(--swch-text);
	margin-bottom: 32px;
	font-size: 0.9375rem;
}

/* Changelog */
.swch-product-changelog {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--swch-border);
}

.swch-product-changelog h2 {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--swch-text);
	margin: 0 0 16px;
}

.swch-product-changelog pre {
	background: var(--swch-bg);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius-sm);
	padding: 18px;
	font-size: 0.8125rem;
	line-height: 1.7;
	overflow-x: auto;
	white-space: pre-wrap;
	color: var(--swch-text);
}

/* Sidebar */
.swch-product-sidebar {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.swch-product-buy-card {
	position: relative;
	background: var(--swch-white);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 28px;
	text-align: center;
	overflow: hidden;
}

.swch-product-buy-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--swch-tech-violet), var(--swch-tech-fuchsia));
}

.swch-product-price {
	font-size: 2rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--swch-tech-violet), var(--swch-tech-fuchsia));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 16px;
	letter-spacing: -0.02em;
}

.swch-buy-button {
	display: block;
	width: 100%;
	padding: 14px 24px;
	border-radius: var(--swch-radius-sm);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: none;
	background: linear-gradient(135deg, var(--swch-tech-violet) 0%, var(--swch-tech-fuchsia) 100%);
	color: var(--swch-white);
	box-shadow: 0 8px 24px -8px rgba(79, 70, 229, 0.6);
	transition: transform var(--swch-transition), box-shadow var(--swch-transition);
	line-height: 1.5;
}

.swch-buy-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px -8px rgba(79, 70, 229, 0.7);
	color: var(--swch-white);
}

.swch-buy-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.swch-login-prompt {
	font-size: 0.8125rem;
	color: var(--swch-text-secondary);
	margin-top: 12px;
}

.swch-login-prompt a {
	color: var(--swch-accent);
	font-weight: 600;
	text-decoration: none;
}

.swch-login-prompt a:hover {
	text-decoration: underline;
}

.swch-product-preparing {
	color: var(--swch-text-muted);
	font-size: 0.875rem;
}

/* Product Meta Card */
.swch-product-meta-card {
	background: var(--swch-white);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 22px;
}

.swch-product-meta-card h3 {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--swch-text-muted);
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.swch-product-meta-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.swch-product-meta-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 8px 0;
	border-bottom: 1px solid var(--swch-border-light);
	font-size: 0.8125rem;
}

.swch-product-meta-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.swch-product-meta-list .swch-meta-label {
	color: var(--swch-text-secondary);
	font-size: 0.8125rem;
	text-transform: none;
	letter-spacing: normal;
}

.swch-product-meta-list .swch-meta-value {
	color: var(--swch-text);
	font-weight: 500;
}

.swch-product-meta-list .swch-meta-value a {
	color: var(--swch-accent);
	text-decoration: none;
	font-weight: 500;
}

.swch-product-meta-list .swch-meta-value a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Archive (Product List)
   ----------------------------------------------------------------------------
   トップの「注目のプラグイン」と同じスポットライト型レイアウトを共有する。
   .swch-spotlight* 系のスタイルは front-page.css 側で定義しており、archive でも
   そのまま使えるように theme 側で front-page.css を併読している。ここでは
   archive ページ専用の外枠（コンテナ幅・ヘッダー余白）だけを定義する。
   ========================================================================== */

.swch-product-archive {
	padding: 0 0 96px;
}

/* スポットライト1段あたり 600px + 余白 + 本文 が並ぶため、注目セクション
   （front-page.css）と同じ 1400px まで広げて情報密度を保つ。 */
.swch-product-archive-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}

.swch-product-archive-header {
	margin-bottom: 56px;
}

.swch-product-archive-header .swch-section-title {
	font-size: 1.875rem;
	margin: 0;
}

.swch-product-empty {
	text-align: center;
	padding: 64px 0;
	color: var(--swch-text-muted);
	font-size: 0.9375rem;
}

/* ページネーション（the_posts_pagination）。注目セクションのフッターと
   同じく中央寄せ、リンクはブランド色のチップ風に整える。 */
.swch-product-archive .pagination,
.swch-product-archive .nav-links {
	margin-top: 56px;
	text-align: center;
}

.swch-product-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	margin: 0 4px;
	border-radius: var(--swch-radius-sm);
	border: 1px solid var(--swch-border);
	background: var(--swch-white);
	color: var(--swch-text-secondary);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--swch-transition), color var(--swch-transition), background var(--swch-transition);
}

.swch-product-archive .page-numbers:hover {
	border-color: var(--swch-tech-violet);
	color: var(--swch-tech-violet);
}

.swch-product-archive .page-numbers.current {
	background: linear-gradient(135deg, var(--swch-tech-violet), var(--swch-tech-fuchsia));
	border-color: transparent;
	color: var(--swch-white);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.swch-product-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.swch-product-sidebar {
		position: static;
	}

	.swch-product-main h1 {
		font-size: 1.5rem;
	}

	.swch-product-price {
		font-size: 1.75rem;
	}
}

@media (max-width: 480px) {
	.swch-product-single {
		padding: 32px 0 64px;
	}

	.swch-product-archive {
		padding: 0 0 64px;
	}

	.swch-product-archive-inner {
		padding: 0 16px;
	}

	.swch-product-archive-header {
		margin-bottom: 40px;
	}

	.swch-product-archive-header .swch-section-title {
		font-size: 1.5rem;
	}

	.swch-product-buy-card {
		padding: 20px;
	}
}

/* ==========================================================================
   Plugin Sales LP  (single-wp_plugin.php) + Developer sub-page
   ==========================================================================
   既存トークン（:root 冒頭）を再利用。.swch-lp 配下にスコープして
   front-page.css と衝突しないようにする（front-page では本ファイル未読込）。
   ========================================================================== */

.swch-lp {
	color: var(--swch-text);
	padding-bottom: 80px;
}

/* Buttons (front-page.css と視覚的に統一。.swch-lp スコープ) */
.swch-lp .swch-btn {
	display: inline-block;
	padding: 13px 26px;
	border-radius: var(--swch-radius-sm);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform var(--swch-transition), background var(--swch-transition), color var(--swch-transition), border-color var(--swch-transition), box-shadow var(--swch-transition);
	line-height: 1.5;
}

.swch-lp .swch-btn-primary {
	background: linear-gradient(135deg, var(--swch-tech-violet) 0%, var(--swch-tech-fuchsia) 100%);
	background-origin: border-box;
	background-clip: border-box;
	color: var(--swch-white);
	box-shadow: 0 8px 24px -8px rgba(79, 70, 229, 0.6);
}

.swch-lp .swch-btn-primary:hover {
	color: var(--swch-white);
	transform: translateY(-1px);
	box-shadow: 0 12px 28px -8px rgba(79, 70, 229, 0.7);
}

.swch-lp .swch-btn-primary.is-disabled {
	background: var(--swch-text-muted);
	box-shadow: none;
	cursor: default;
	pointer-events: none;
}

.swch-lp .swch-btn-outline {
	background: transparent;
	color: var(--swch-tech-violet);
	border-color: var(--swch-tech-violet);
}

.swch-lp .swch-btn-outline:hover {
	background: var(--swch-tech-violet);
	color: var(--swch-white);
}

/* Hero */
.swch-lp-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 80px 24px 64px;
	background: linear-gradient(135deg, var(--swch-tech-navy, #0b1020) 0%, #1e1b4b 55%, var(--swch-tech-violet) 120%);
	color: var(--swch-white);
	overflow: hidden;
}

.swch-lp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse at 50% 0%, #000 35%, transparent 75%);
}

.swch-lp-hero-inner {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.swch-lp-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--swch-tech-cyan, #22d3ee);
	margin-bottom: 14px;
}

.swch-lp-title {
	font-size: clamp(1.9rem, 4vw, 2.85rem);
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 16px;
	color: var(--swch-white);
}

.swch-lp-tagline {
	font-size: 1.05rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.82);
	max-width: 680px;
	margin: 0 auto 28px;
}

.swch-lp-hero-ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
}

/* 無料版DLボタン（ヒーロー上）。暗背景のグラデーション上では outline の
   violet 文字が沈むので、薄いグラス調に上書き。視認性は確保しつつ主CTAの
   邪魔をしない。 */
.swch-lp-hero .swch-btn-free-zip {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	flex: 0 0 auto;
}

.swch-lp-hero .swch-btn-free-zip:hover {
	background: rgba(255, 255, 255, 0.16);
	color: var(--swch-white);
	border-color: rgba(255, 255, 255, 0.5);
}

/* 無料版DLが並んだ時は購入ボタンを伸ばして主導線を強調する。
   :has() が効かないブラウザでは grow されないだけ（崩れない）。 */
.swch-lp-hero-ctas:has(.swch-btn-free-zip) .swch-btn-primary {
	flex: 1 1 auto;
}

.swch-lp-login-prompt {
	margin-top: 16px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
}

.swch-lp-login-prompt a,
.swch-lp-buy-card .swch-lp-login-prompt a {
	color: var(--swch-tech-cyan, #22d3ee);
	text-decoration: underline;
}

/* 各購入CTA近くの規約同意・返品の小さな注記。基底は明背景（購入カード）
   向けの控えめな配色。ヒーロー／CTAバンドの暗背景では下で上書きする。 */
.swch-lp-cta-legal {
	margin-top: 12px;
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--swch-text-muted);
}

.swch-lp-cta-legal a {
	color: var(--swch-accent);
	text-decoration: underline;
}

.swch-lp-hero .swch-lp-cta-legal,
.swch-lp-cta-band .swch-lp-cta-legal {
	color: rgba(255, 255, 255, 0.62);
}

.swch-lp-hero .swch-lp-cta-legal a,
.swch-lp-cta-band .swch-lp-cta-legal a {
	color: var(--swch-tech-cyan, #22d3ee);
}

/* 下部固定バー（モバイル含む）では、価格＋ボタンの行の下に
   全幅で折り返して表示する（flex-wrap 前提）。横パネル時は下で上書き。 */
.swch-lp-buy-card .swch-lp-cta-legal {
	flex-basis: 100%;
	width: 100%;
	margin: 2px 0 0;
	text-align: center;
	font-size: 0.7rem;
	line-height: 1.5;
}

/* Layout */
.swch-lp-layout {
	max-width: 1000px;
	margin: 0 auto;
	padding: 72px 24px 0;
}

.swch-lp-main {
	min-width: 0;
}

.swch-lp-section {
	margin: 0 0 96px;
}

.swch-lp-h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 36px;
	padding-bottom: 16px;
	letter-spacing: -0.01em;
	border-bottom: 1px solid var(--swch-border);
}

.swch-lp-hero-image {
	margin: 0 0 56px;
	border-radius: var(--swch-radius);
	overflow: hidden;
	border: 1px solid var(--swch-border);
}

.swch-lp-hero-image img {
	display: block;
	width: 100%;
	height: auto;
}

.swch-lp-body {
	font-size: 1rem;
	line-height: 1.9;
}

.swch-lp-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2em 0 .8em; }
.swch-lp-body h3 { font-size: 1.2rem; font-weight: 700; margin: 1.6em 0 .6em; }
.swch-lp-body ul,
.swch-lp-body ol { padding-left: 1.4em; margin: 1em 0; }
.swch-lp-body li { margin: .4em 0; }
.swch-lp-body img { max-width: 100%; height: auto; border-radius: var(--swch-radius-sm); }

/* Screenshots */
.swch-lp-shot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

.swch-lp-shot {
	margin: 0;
	border-radius: var(--swch-radius);
	overflow: hidden;
	border: 1px solid var(--swch-border);
	background: var(--swch-white);
}

.swch-lp-shot img,
.swch-lp-shot video {
	display: block;
	width: 100%;
	height: auto;
}

/* ギャラリーの遅延動画も読み込み前に枠を確保（プレースホルダと同じ比率）。 */
.swch-lp-shot video {
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: contain;
	background: var(--swch-bg);
}

.swch-lp-shot figcaption {
	padding: 10px 14px;
	font-size: 0.8125rem;
	color: var(--swch-text-secondary);
	border-top: 1px solid var(--swch-border-light);
}

.swch-lp-shot.is-placeholder .swch-lp-shot-ph {
	aspect-ratio: 16 / 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	text-align: center;
	background: var(--swch-bg);
	border: 1px dashed var(--swch-border);
	color: var(--swch-text-secondary);
}

.swch-lp-shot-ph-no { font-weight: 800; font-size: 1.1rem; color: var(--swch-accent); }
.swch-lp-shot-ph-label { font-weight: 600; font-size: 0.9rem; }
.swch-lp-shot-ph-note { font-size: 0.75rem; color: var(--swch-text-muted); max-width: 240px; line-height: 1.5; }

/* FAQ accordion */
.swch-lp-faq-list { display: flex; flex-direction: column; gap: 14px; }

.swch-lp-faq-item {
	background: var(--swch-white);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	overflow: hidden;
	transition: border-color var(--swch-transition);
}

.swch-lp-faq-item[open] {
	border-color: var(--swch-accent);
}

.swch-lp-faq-q {
	padding: 22px 52px 22px 26px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--swch-text);
	line-height: 1.55;
	list-style: none;
	cursor: pointer;
	position: relative;
}

.swch-lp-faq-q::-webkit-details-marker { display: none; }

.swch-lp-faq-q::after {
	content: "+";
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
	color: var(--swch-accent);
	transition: transform var(--swch-transition);
}

.swch-lp-faq-item[open] .swch-lp-faq-q::after { content: "−"; }

.swch-lp-faq-a {
	padding: 0 26px 24px;
	font-size: 0.9rem;
	line-height: 1.8;
	color: var(--swch-text-secondary);
}

.swch-lp-faq-a p { margin: 0 0 .6em; }

/* プラグイン共通 FAQ の見出し（通常 FAQ の下に区切って表示）。 */
.swch-lp-faq-subhead {
	margin: 30px 0 14px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--swch-text);
}

/* Changelog */
.swch-lp-changelog pre {
	background: var(--swch-tech-navy, #0b1020);
	color: #e2e8f0;
	padding: 20px;
	border-radius: var(--swch-radius);
	overflow-x: auto;
	font-size: 0.8125rem;
	line-height: 1.7;
	white-space: pre-wrap;
}

/* Dev CTA on LP */
.swch-lp-devcta {
	background: var(--swch-accent-light);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 28px;
}

.swch-lp-devcta h2 {
	border: 0;
	padding: 0;
	font-size: 1.2rem;
	margin-bottom: 8px;
}

.swch-lp-devcta h2::after { display: none; }

.swch-lp-devcta p { margin: 0 0 16px; color: var(--swch-text-secondary); }

/* Sidebar → 全画面で「画面下固定の購入バー」に統一。
   横スティッキー列を廃しコンテンツを全幅に。バー背景は全幅、中身は
   コンテンツ幅(1000px)に揃えて中央寄せ。付随情報カード（バージョン等）は
   非表示（本文「動作環境」「変更履歴」「開発者の方へ」で確認できる）。 */
.swch-lp-sidebar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 50;
	background: var(--swch-white);
	border-top: 1px solid var(--swch-border);
	box-shadow: 0 -6px 24px -8px rgba(15, 23, 42, 0.2);
	transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
}

/* JS（lp-cta-reveal.js）が表示を管理するときだけ隠す。ヒーローが画面外に
   出たら .is-active が付いて出現する。JS 無効時は本クラスが付かず常時表示。 */
.swch-lp-sidebar.swch-cta-managed {
	transform: translateY(120%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.swch-lp-sidebar.swch-cta-managed.is-active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.swch-lp-sidebar { transition: none; }
}

/* プラグイン情報・動作状況（Laravel 連携データ）。購入カードの下に置く
   （sticky 時と同じ位置）。基底（下部固定バー時）は非表示にし、横パネル
   時（min-width:1680px）のみ表示する。同じ情報は本文「動作環境」
   「変更履歴」に既出のため、下部バー時に出さなくても欠落しない。 */

.swch-lp-buy-card {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 12px 24px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.swch-lp-price {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
	white-space: nowrap;
	color: var(--swch-text);
}

.swch-lp-buy-card .swch-btn {
	margin-left: auto;
	min-width: 240px;
	text-align: center;
}

/* サイドバー（下部固定バー／横パネル）の購入ボタンはヒーローの violet→fuchsia
   だと白背景上で派手すぎるため、ヘッダーと同系統のダークネイビーグラデに差し替え。
   サイト全体のダークUIと馴染ませつつ、CTA としての存在感は確保する。 */
.swch-lp .swch-lp-buy-card .swch-btn-primary {
	background: linear-gradient(180deg, var(--swch-tech-navy-2, #111a3a) 0%, var(--swch-tech-navy, #0b1020) 100%);
	box-shadow: 0 6px 18px -8px rgba(11, 16, 32, 0.55);
}

.swch-lp .swch-lp-buy-card .swch-btn-primary:hover {
	box-shadow: 0 10px 22px -8px rgba(11, 16, 32, 0.65);
}

.swch-lp-buy-card .swch-lp-login-prompt { display: none; }

.swch-lp-preparing {
	margin: 0 auto;
	text-align: center;
	color: var(--swch-text-muted);
	font-weight: 600;
}

.swch-lp-meta-card { display: none; }

/* 無料版ダウンロード（サイドバー内）。下部固定バー時は全幅で折り返して
   購入CTAの下に小さく表示。横パネル時は通常の左寄せに戻す。 */
.swch-lp-buy-card .swch-lp-free-zip {
	flex-basis: 100%;
	width: 100%;
	margin: 0;
	text-align: center;
	font-size: 0.78rem;
	line-height: 1.5;
}

.swch-lp-buy-card .swch-lp-free-zip a {
	color: var(--swch-accent);
	text-decoration: underline;
}

.swch-lp-buy-card .swch-lp-free-zip a:hover {
	text-decoration: none;
}

/* 関連ページ導線（使い方ガイド / 開発者向け）。下部固定バー時は購入バーの
   下に横並びで表示し、バー最下段として safe-area ぶんの余白を持たせる。
   横パネル時（min-width:1680px）は縦並びに切替（下で上書き）。 */
.swch-lp-sidebar-nav {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	gap: 10px;
	padding: 10px 24px calc(10px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--swch-border);
}

.swch-lp-sidebar-nav .swch-btn {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	font-size: 0.8rem;
	text-align: center;
}

.swch-lp-meta-card h3 {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 14px;
}

.swch-lp-meta-list { list-style: none; margin: 0; padding: 0; }

.swch-lp-meta-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	font-size: 0.85rem;
	border-bottom: 1px solid var(--swch-border-light);
}

.swch-lp-meta-list li:last-child { border-bottom: 0; }
.swch-lp-meta-list .swch-meta-label { color: var(--swch-text-secondary); }
.swch-lp-meta-list .swch-meta-value { font-weight: 600; }
.swch-lp-meta-list .swch-meta-value a { color: var(--swch-accent); text-decoration: none; }
.swch-lp-meta-list .swch-meta-value a:hover { text-decoration: underline; }

/* ==========================================================================
   Doc sub-pages  (single-wp_plugin-dev.php / single-wp_plugin-guide.php)

   開発者向け（.swch-dev-*）と使い方ガイド（.swch-guide-*）の共通ドキュメント
   レイアウト。同じ見た目を共有し、テンプレート側のクラス名のみ分ける。
   ========================================================================== */

.swch-dev-inner,
.swch-guide-inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 40px 24px 0;
}

.swch-dev-breadcrumb,
.swch-guide-breadcrumb {
	font-size: 0.8125rem;
	color: var(--swch-text-muted);
	margin-bottom: 24px;
}

.swch-dev-breadcrumb a,
.swch-guide-breadcrumb a { color: var(--swch-text-secondary); text-decoration: none; }
.swch-dev-breadcrumb a:hover,
.swch-guide-breadcrumb a:hover { color: var(--swch-accent); }
.swch-dev-breadcrumb span,
.swch-guide-breadcrumb span { margin: 0 8px; }

.swch-dev-header,
.swch-guide-header {
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 2px solid var(--swch-border-light);
}

.swch-dev-header .swch-lp-title,
.swch-guide-header .swch-lp-title {
	color: var(--swch-text);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 8px 0 12px;
}

.swch-dev-lead,
.swch-guide-lead { color: var(--swch-text-secondary); line-height: 1.8; margin: 0; }

.swch-dev-doc,
.swch-guide-doc { font-size: 0.95rem; line-height: 1.85; color: var(--swch-text); }

.swch-dev-doc h2,
.swch-guide-doc h2 {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 5em 0 .7em;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--swch-border);
}

.swch-dev-doc h2 .swch-guide-step,
.swch-guide-doc h2 .swch-guide-step {
	display: inline-block;
	margin-right: .5em;
	padding: 2px 10px;
	background: var(--swch-accent-light);
	color: var(--swch-accent-hover);
	border-radius: var(--swch-radius-sm);
	font-size: 0.95em;
	font-weight: 700;
	letter-spacing: .03em;
	vertical-align: baseline;
}

.swch-dev-doc h3,
.swch-guide-doc h3 { font-size: 1.05rem; font-weight: 700; margin: 2.4em 0 .3em; }
.swch-dev-doc h2 + h3,
.swch-guide-doc h2 + h3 { margin-top: .6em; }
.swch-dev-doc p,
.swch-guide-doc p { margin: 0 0 1em; }
.swch-dev-doc ul, .swch-dev-doc ol,
.swch-guide-doc ul, .swch-guide-doc ol { padding-left: 1.5em; margin: 1em 0; }
.swch-dev-doc ul,
.swch-guide-doc ul { list-style: disc; }
.swch-dev-doc ol,
.swch-guide-doc ol {
	list-style: decimal;
	padding: 1em 1.4em 1em 2.6em;
	background: var(--swch-white, #fff);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
}
.swch-dev-doc li,
.swch-guide-doc li { margin: .4em 0; padding-left: .25em; }
.swch-dev-doc ol > li::marker,
.swch-guide-doc ol > li::marker {
	color: var(--swch-accent);
	font-weight: 700;
}
.swch-dev-doc ul > li::marker,
.swch-guide-doc ul > li::marker { color: var(--swch-accent); }

.swch-dev-doc code,
.swch-guide-doc code {
	background: var(--swch-accent-light);
	color: var(--swch-accent-hover);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.875em;
}

.swch-dev-doc pre,
.swch-guide-doc pre {
	background: var(--swch-tech-navy, #0b1020);
	color: #e2e8f0;
	padding: 18px 20px;
	border-radius: var(--swch-radius);
	overflow-x: auto;
	font-size: 0.8125rem;
	line-height: 1.7;
	margin: 1.2em 0;
}

.swch-dev-doc pre code,
.swch-guide-doc pre code { background: none; color: inherit; padding: 0; }

.swch-dev-doc .swch-guide-note,
.swch-guide-doc .swch-guide-note,
.swch-dev-doc .swch-guide-caution,
.swch-guide-doc .swch-guide-caution {
	margin: 1.4em 0;
	padding: 14px 18px;
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	color: var(--swch-text);
}

.swch-dev-doc .swch-guide-note,
.swch-guide-doc .swch-guide-note {
	background: #f5f7ff;
}

.swch-dev-doc .swch-guide-caution,
.swch-guide-doc .swch-guide-caution {
	background: #fefaf2;
}

.swch-dev-doc .swch-guide-note::before,
.swch-guide-doc .swch-guide-note::before,
.swch-dev-doc .swch-guide-caution::before,
.swch-guide-doc .swch-guide-caution::before {
	display: inline-block;
	margin-right: .6em;
	padding: 1px 8px;
	border-radius: var(--swch-radius-sm);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: .08em;
	vertical-align: 2px;
}

.swch-dev-doc .swch-guide-note::before,
.swch-guide-doc .swch-guide-note::before {
	content: "TIPS";
	background: #6366f1;
}

.swch-dev-doc .swch-guide-caution::before,
.swch-guide-doc .swch-guide-caution::before {
	content: "NOTE";
	background: #f59e0b;
}

.swch-dev-doc .swch-guide-note :last-child,
.swch-guide-doc .swch-guide-note :last-child,
.swch-dev-doc .swch-guide-caution :last-child,
.swch-guide-doc .swch-guide-caution :last-child { margin-bottom: 0; }

/* 「表示されるタブ」など、各パターンの構成を示すコンパクトな注記行。 */
.swch-dev-doc .swch-guide-tablist,
.swch-guide-doc .swch-guide-tablist {
	margin: 0 0 1em;
	padding: 8px 14px;
	background: var(--swch-border-light);
	border-left: 3px solid var(--swch-accent);
	border-radius: var(--swch-radius-sm);
	font-size: 0.86em;
	color: var(--swch-text-secondary);
}

.swch-dev-doc .swch-guide-tablist strong,
.swch-guide-doc .swch-guide-tablist strong { color: var(--swch-text); font-weight: 700; }

.swch-dev-doc .swch-guide-intro,
.swch-guide-doc .swch-guide-intro {
	margin: 0 0 1.4em;
	padding: 16px 20px;
	background: #fdf2f8;
	border: 1px solid #fbcfe8;
	border-radius: var(--swch-radius);
	color: var(--swch-text);
}

.swch-dev-doc .swch-guide-intro :last-child,
.swch-guide-doc .swch-guide-intro :last-child { margin-bottom: 0; }

.swch-dev-doc .swch-guide-faq-more,
.swch-guide-doc .swch-guide-faq-more { margin-top: 3em; text-align: center; }

.swch-dev-doc table,
.swch-guide-doc table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
	font-size: 0.875rem;
	background: var(--swch-white);
}

.swch-dev-doc th,
.swch-dev-doc td,
.swch-guide-doc th,
.swch-guide-doc td {
	border: 1px solid var(--swch-border);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

.swch-dev-doc th,
.swch-guide-doc th { background: var(--swch-border-light); font-weight: 700; }

.swch-dev-empty,
.swch-guide-empty {
	background: var(--swch-accent-light);
	border: 1px dashed var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 24px;
	color: var(--swch-text-secondary);
}

.swch-dev-foot,
.swch-guide-foot {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--swch-border-light);
}

/* --------------------------------------------------------------------------
   Guide: 右側 sticky 目次レイアウト（single-wp_plugin-guide.php）

   目次があるときだけ 2 カラム化。aside は DOM 上 article より前に置き、
   デスクトップは grid で右カラムへ、狭幅では本文上に積む。
   -------------------------------------------------------------------------- */

.swch-guide-inner.has-toc { max-width: 1160px; }

.swch-guide-layout { display: block; }

.swch-guide-inner.has-toc .swch-guide-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 232px;
	gap: 56px;
	align-items: start;
}

.swch-guide-inner.has-toc .swch-guide-doc {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

/* sticky は grid アイテム自身に掛ける。包含ブロックが grid コンテナ
   （= 本文と同じ高さの行）になるため移動量が確保され、実際に追従する。
   内側要素に sticky を掛けると align-items:start で wrap が内容高に
   縮み、移動量ゼロで「効かない」状態になるので注意。 */
.swch-guide-inner.has-toc .swch-guide-toc-wrap {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	position: sticky;
	top: 112px;
	max-height: calc(100vh - 144px);
	overflow-y: auto;
}

.swch-guide-toc {
	padding-left: 18px;
	border-left: 1px solid var(--swch-border-light);
}

.swch-guide-toc-title {
	margin: 0 0 12px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--swch-text-muted);
}

.swch-guide-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.swch-guide-toc-list li { margin: 0; }

.swch-guide-toc-list a {
	display: block;
	padding: 6px 0 6px 12px;
	margin-left: -13px;
	border-left: 2px solid transparent;
	color: var(--swch-text-secondary);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}

.swch-guide-toc-list a:hover { color: var(--swch-accent); }

/* スクロールスパイ（guide-toc.js）で付与。表示中セクションを強調。 */
.swch-guide-toc-list a.is-current {
	color: var(--swch-accent);
	font-weight: 700;
	border-left-color: var(--swch-accent);
}

/* アンカー移動時、固定ヘッダーに見出しが隠れないための余白。 */
.swch-guide-doc h2 { scroll-margin-top: 88px; }

@media (max-width: 960px) {
	.swch-guide-inner.has-toc { max-width: 880px; }
	.swch-guide-inner.has-toc .swch-guide-layout { display: block; }

	.swch-guide-inner.has-toc .swch-guide-toc-wrap {
		position: static;
		max-height: none;
		overflow: visible;
		margin-bottom: 32px;
	}

	.swch-guide-toc {
		padding: 16px 18px;
		border-left: 0;
		border: 1px solid var(--swch-border-light);
		border-radius: var(--swch-radius);
		background: var(--swch-bg);
	}
}

/* 画面下固定バーぶん、本文末尾に余白を確保（最後のセクションが隠れない）。
   guide / dev サブページは固定バーが無いので控えめでよい。 */
.swch-lp { padding-bottom: 88px; }

/* LP のみ固定フッターが「価格＋ボタン＋規約注記＋関連ページ導線」で背が
   高くなるため、本文末尾の余白を広めに取る（guide/dev は除外）。 */
.swch-lp:not(.swch-guide):not(.swch-dev) { padding-bottom: 184px; }

/* Responsive */
@media (max-width: 600px) {
	.swch-lp-hero { padding: 56px 20px 44px; }
	.swch-lp-layout { padding: 36px 20px 0; }
	.swch-lp-hero-ctas { flex-direction: column; }
	.swch-lp-hero-ctas .swch-btn { width: 100%; text-align: center; }

	/* 購入バー：狭幅では価格＋ボタンを詰め、ボタンを伸縮させる。 */
	.swch-lp-buy-card { gap: 12px; padding-left: 16px; padding-right: 16px; }
	.swch-lp-price { font-size: 1.2rem; }
	.swch-lp-buy-card .swch-btn { margin-left: 0; flex: 1; min-width: 0; }
}

/* 画面幅に余裕がある場合のみ、購入カードを「横の固定パネル」に切替。
   コンテンツ(最大1000px・中央)の右ガター（余白）に fixed で浮かせるので、
   本文幅は狭めない。ガターにパネルが収まる十分な幅のときだけ有効化する
   （収まらない幅では下部固定バーのまま）。閾値はパネル幅280px＋余白を
   ガターに収めるための値。狭めたい場合は min-width / left を調整。 */
@media (min-width: 1680px) {
	.swch-lp-sidebar {
		position: fixed;
		left: calc(50% + 500px + 28px);
		right: auto;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		width: 280px;
		max-height: calc(100vh - 48px);
		overflow: auto;
		background: var(--swch-white);
		border: 1px solid var(--swch-border);
		border-radius: var(--swch-radius);
		box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.22);
	}

	/* 横パネルは縦中央寄せ(translateY(-50%))を保ったまま出現させる
	   （基底の translateY(120%) を上書き。opacity/visibility は基底を継承）。 */
	.swch-lp-sidebar.swch-cta-managed {
		transform: translateY(-50%) translateX(16px);
	}

	.swch-lp-sidebar.swch-cta-managed.is-active {
		transform: translateY(-50%) translateX(0);
	}

	.swch-lp-buy-card {
		max-width: none;
		margin: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 24px;
	}

	.swch-lp-price {
		font-size: 1.85rem;
		margin: 0 0 4px;
	}

	.swch-lp-buy-card .swch-btn {
		margin-left: 0;
		min-width: 0;
		width: 100%;
	}

	/* 横パネルでは余白があるので要ログイン注記を表示。 */
	.swch-lp-buy-card .swch-lp-login-prompt {
		display: block;
		margin-top: 12px;
		text-align: center;
	}

	/* 横パネル（縦並び）では全幅折り返し指定を解除して通常表示に戻す。 */
	.swch-lp-buy-card .swch-lp-cta-legal {
		display: block;
		flex: 0 0 auto;
		width: auto;
		margin-top: 10px;
		font-size: 0.72rem;
		text-align: center;
	}

	/* 無料版DLリンクも横パネルでは通常表示に戻す（中央寄せのまま）。 */
	.swch-lp-buy-card .swch-lp-free-zip {
		flex: 0 0 auto;
		width: auto;
		margin-top: 4px;
		font-size: 0.82rem;
	}

	/* 横パネルには元から情報表（使い方/開発者向けリンク含む）があるため、
	   関連ページ導線ボタンは出さない（下部固定バー専用）。 */
	.swch-lp-sidebar-nav { display: none; }

	/* 横パネル時のみ、購入カードの下に情報表を区切って表示（sticky 時と同等）。 */
	.swch-lp-meta-card {
		display: block;
		padding: 18px 24px 22px;
		border-top: 1px solid var(--swch-border-light);
	}

	/* 下部バーが無くなるぶん、本文末尾の余白を通常量に戻す
	   （LP 側は高詳細度で上書きしているので同詳細度で戻す）。 */
	.swch-lp,
	.swch-lp:not(.swch-guide):not(.swch-dev) { padding-bottom: 40px; }
}

/* ==========================================================================
   LP 本文コンポーネント（lp.php / .swch-lp-body 配下）
   --------------------------------------------------------------------------
   コンバージョン＋AI検索向けの図解・カード・ステップ等。すべて .swch-lp に
   スコープし、既存トークン（:root）を再利用。front-page では未読込。
   ========================================================================== */

.swch-lp-body .swch-lp-block { margin: 0 0 104px; }

.swch-lp-body .swch-lp-block > h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 36px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--swch-border);
	letter-spacing: -0.01em;
}

.swch-lp-body .swch-lp-block > p { margin: 0 0 24px; }

/* Lead */
.swch-lp-body .swch-lp-lead {
	font-size: 1.15rem;
	line-height: 1.8;
	color: var(--swch-text);
	background: var(--swch-bg);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 40px 44px;
	margin: 0 0 80px;
}

.swch-lp-body .swch-lp-fineprint {
	font-size: 0.82rem;
	color: var(--swch-text-muted);
}

/* チェックリスト（余白 0 の枠カード）直後の注記は詰まって見えるため上に余白を足す。 */
.swch-lp-body .swch-lp-checklist + .swch-lp-fineprint {
	margin-top: 14px;
}

/* 課題 → 解決 比較 */
.swch-lp-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.swch-lp-compare-col {
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 32px 32px 28px;
	background: var(--swch-white);
}

.swch-lp-compare-col.is-solution {
	border-color: var(--swch-accent);
}

.swch-lp-compare-h {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 22px;
	color: var(--swch-text-muted);
}

.swch-lp-compare-col.is-solution .swch-lp-compare-h {
	color: var(--swch-accent);
}

.swch-lp-body .swch-lp-compare-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.swch-lp-body .swch-lp-compare-col li {
	position: relative;
	margin: 0;
	padding: 12px 0 12px 26px;
	font-size: 0.92rem;
	line-height: 1.75;
	border-bottom: 1px solid var(--swch-border-light);
}

.swch-lp-body .swch-lp-compare-col li:last-child { border-bottom: 0; }

.swch-lp-body .swch-lp-compare-col li::before {
	position: absolute;
	left: 0;
	top: 12px;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.75;
}

.swch-lp-body .swch-lp-compare-col.is-problem li::before {
	content: "✕";
	color: var(--swch-text-muted);
}

.swch-lp-body .swch-lp-compare-col.is-solution li::before {
	content: "✓";
	color: var(--swch-accent);
}

/* 手順ステップ */
.swch-lp-body ol.swch-lp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.swch-lp-body .swch-lp-step {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 24px;
	align-items: start;
	background: var(--swch-white);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 30px 32px;
	margin: 0;
}

.swch-lp-step-no {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--swch-accent);
	border: 1px solid var(--swch-accent);
}

.swch-lp-body .swch-lp-step-body h3 { margin: 4px 0 8px; font-size: 1.1rem; font-weight: 700; }
.swch-lp-body .swch-lp-step-body p { margin: 0 0 12px; }
.swch-lp-body .swch-lp-step-body p:last-child { margin-bottom: 0; }

/* 公開ステップのタブ（都道府県 / 市町村）。JS 無効時はタブ列を隠し、
   両パネルを見出し付きで縦に並べて全手順を閲覧できる。JS が .is-enhanced を
   付けた時だけタブ列を出し、1 パネルずつ表示する（.swch-lp-figslider と同方針）。 */
.swch-lp-tabs-nav { display: none; }

.swch-lp-tabs.is-enhanced .swch-lp-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--swch-border);
}

.swch-lp-body .swch-lp-tab {
	appearance: none;
	-webkit-appearance: none;
	margin: 0 0 -1px;
	padding: 12px 22px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--swch-text-secondary);
	cursor: pointer;
	transition: color var(--swch-transition), border-color var(--swch-transition);
}

.swch-lp-body .swch-lp-tab:hover { color: var(--swch-text); }

.swch-lp-body .swch-lp-tab[aria-selected="true"] {
	color: var(--swch-accent);
	border-bottom-color: var(--swch-accent);
}

.swch-lp-body .swch-lp-tab:focus-visible {
	outline: 2px solid var(--swch-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* パネル見出し: JS 無効時のみ各手順の頭に出す（タブ有効時はタブが兼ねる）。 */
.swch-lp-body .swch-lp-tabpanel-title { margin: 0 0 16px; font-size: 1.15rem; font-weight: 700; }
.swch-lp-tabs.is-enhanced .swch-lp-tabpanel-title { display: none; }

/* JS 無効時に縦並びになる 2 パネルの間隔。 */
.swch-lp-tabpanel + .swch-lp-tabpanel { margin-top: 44px; }
.swch-lp-tabs.is-enhanced .swch-lp-tabpanel + .swch-lp-tabpanel { margin-top: 0; }

.swch-lp-tabpanel[hidden] { display: none; }

.swch-lp-body pre.swch-lp-code {
	background: var(--swch-tech-navy, #0b1020);
	color: #e2e8f0;
	padding: 14px 18px;
	border-radius: var(--swch-radius-sm);
	font-size: 0.85rem;
	overflow-x: auto;
	margin: 0 0 12px;
}

.swch-lp-body pre.swch-lp-code code { background: none; color: inherit; padding: 0; }

/* 仕組みフロー図 */
.swch-lp-flow {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 18px;
}

.swch-lp-flow-node {
	flex: 1 1 150px;
	min-width: 140px;
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	background: var(--swch-white);
	padding: 16px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
}

.swch-lp-flow-node.is-key {
	border-color: var(--swch-accent);
	color: var(--swch-accent);
}

.swch-lp-flow-k { font-weight: 700; font-size: 0.95rem; }
.swch-lp-flow-d { font-size: 0.78rem; color: var(--swch-text-secondary); }
.swch-lp-flow-node.is-key .swch-lp-flow-d { color: var(--swch-text-secondary); }

.swch-lp-flow-arrow {
	display: flex;
	align-items: center;
	color: var(--swch-text-muted);
	font-size: 1.1rem;
	font-weight: 700;
}

/* 機能グリッド */
.swch-lp-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.swch-lp-feature {
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 26px;
	background: var(--swch-white);
}

.swch-lp-body .swch-lp-feature h3 {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 700;
}

.swch-lp-body .swch-lp-feature p { margin: 0; font-size: 0.875rem; color: var(--swch-text-secondary); line-height: 1.7; }

/* 集計イメージ（指標カード＋ファネル） */
.swch-lp-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0 0 20px;
}

.swch-lp-metric {
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	background: var(--swch-white);
	padding: 24px 16px;
	text-align: center;
}

.swch-lp-metric.is-accent {
	border-color: var(--swch-accent);
}

.swch-lp-metric-v { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.swch-lp-metric.is-accent .swch-lp-metric-v { color: var(--swch-accent); }
.swch-lp-metric-l { display: block; font-size: 0.75rem; color: var(--swch-text-secondary); margin-top: 6px; }

.swch-lp-funnel {
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	background: var(--swch-white);
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.swch-lp-funnel-row { display: grid; grid-template-columns: 56px 1fr 48px; align-items: center; gap: 12px; }
.swch-lp-funnel-lab { font-size: 0.8rem; color: var(--swch-text-secondary); }

.swch-lp-funnel-bar {
	height: 10px;
	border-radius: 5px;
	background: var(--swch-accent);
	min-width: 6px;
}

.swch-lp-funnel-bar.is-drop { background: var(--swch-text-muted); }
.swch-lp-funnel-pct { font-size: 0.8rem; font-weight: 700; text-align: right; }

/* チェックリスト */
.swch-lp-body ul.swch-lp-checklist {
	list-style: none;
	margin: 0;
	padding: 8px 30px;
	background: var(--swch-white);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
}

.swch-lp-body .swch-lp-checklist li {
	position: relative;
	padding: 16px 0 16px 28px;
	border-bottom: 1px solid var(--swch-border-light);
	line-height: 1.75;
	font-size: 0.94rem;
}

.swch-lp-body .swch-lp-checklist li:last-child { border-bottom: 0; }

.swch-lp-body .swch-lp-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 16px;
	color: var(--swch-accent);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.75;
}

/* ユースケース */
.swch-lp-usecases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.swch-lp-usecase {
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 26px;
	background: var(--swch-white);
}

.swch-lp-body .swch-lp-usecase h3 { margin: 0 0 6px; font-size: 0.98rem; font-weight: 700; }
.swch-lp-body .swch-lp-usecase p { margin: 0; font-size: 0.86rem; color: var(--swch-text-secondary); line-height: 1.65; }

/* コールアウト */
.swch-lp-callout {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--swch-radius);
	padding: 28px 30px;
	font-size: 0.92rem;
	line-height: 1.9;
	color: var(--swch-text);
}

/* 動作環境 */
.swch-lp-body ul.swch-lp-env {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}

.swch-lp-body .swch-lp-env li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	padding: 18px 22px;
	background: var(--swch-white);
	margin: 0;
	font-size: 0.9rem;
}

.swch-lp-env li span { color: var(--swch-text-secondary); }
.swch-lp-env li strong { font-weight: 700; }

/* 本文インライン画像スロット。
   前後の本文と明確に切り離すため「枠＋影＋マット＋キャプション帯」で
   1枚の図版カードとして見せる（境界をはっきりさせる）。 */
.swch-lp-body .swch-lp-figure {
	margin: 36px 0;
	padding: 8px;
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	overflow: hidden;
	background: var(--swch-bg);
	box-shadow: var(--swch-shadow-card);
}

.swch-lp-body .swch-lp-figure img,
.swch-lp-body .swch-lp-figure video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* 遅延読み込み動画は src 挿入前に高さ0になりレイアウトシフトするため、
   16:9 の枠を先に確保しておく（読み込み後は contain で内側にフィット）。 */
.swch-lp-body .swch-lp-figure video {
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: contain;
	background: var(--swch-bg);
}

/* 縦長スクショ（例: エディタの候補パネル）は高さを抑えて中央寄せ。
   実画像のみ対象で、撮影前のプレースホルダ（.swch-lp-figph・16:9）には影響しない。
   利用側は figure を .swch-lp-fig-tall でラップする（オプトイン）。 */
.swch-lp-body .swch-lp-fig-tall .swch-lp-figure img {
	width: auto;
	max-width: 100%;
	max-height: 620px;
	margin-inline: auto;
}

/* 図版であることが一目でわかるキャプション帯（画像アイコン＋説明）。 */
.swch-lp-body .swch-lp-figure figcaption {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px -8px -8px;
	padding: 9px 14px;
	font-size: 0.8rem;
	color: var(--swch-text-secondary);
	background: var(--swch-white);
	border-top: 1px solid var(--swch-border);
}

.swch-lp-body .swch-lp-figure figcaption::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2394a3b8'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Ccircle%20cx='8.5'%20cy='9.5'%20r='1.5'/%3E%3Cpath%20d='M21%2015l-5-5L5%2020'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* プレースホルダは内側の破線ボックス自体が「画像枠」なので、
   カードの影・マットは付けず二重枠を避ける。 */
.swch-lp-body .swch-lp-figure.is-ph {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.swch-lp-figph {
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	text-align: center;
	border: 1px dashed var(--swch-border);
	border-radius: var(--swch-radius);
	background: var(--swch-bg);
	color: var(--swch-text-secondary);
}

.swch-lp-figph-badge {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--swch-white);
	background: var(--swch-text-muted);
	padding: 3px 10px;
	border-radius: 999px;
}

.swch-lp-figph-cap { font-weight: 700; font-size: 0.92rem; color: var(--swch-text); }
.swch-lp-figph-note { font-size: 0.78rem; color: var(--swch-text-secondary); max-width: 460px; line-height: 1.6; }
.swch-lp-figph-file { font-size: 0.72rem; color: var(--swch-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* 使い方ガイド本文の図版（guide.php の $swch_guide_fig）。LP 図版と同じ見た目を
   .swch-guide-doc 配下に独立スコープで定義する。プレースホルダ内側は共通の
   .swch-lp-figph*（グローバル）を再利用する。 */
.swch-guide-doc .swch-guide-figure {
	margin: 24px 0;
	padding: 8px;
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	overflow: hidden;
	background: var(--swch-bg);
	box-shadow: var(--swch-shadow-card);
}

.swch-guide-doc .swch-guide-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.swch-guide-doc .swch-guide-figure figcaption {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px -8px -8px;
	padding: 9px 14px;
	font-size: 0.8rem;
	color: var(--swch-text-secondary);
	background: var(--swch-white);
	border-top: 1px solid var(--swch-border);
}

.swch-guide-doc .swch-guide-figure figcaption::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2394a3b8'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Ccircle%20cx='8.5'%20cy='9.5'%20r='1.5'/%3E%3Cpath%20d='M21%2015l-5-5L5%2020'/%3E%3C/svg%3E") center / contain no-repeat;
}

.swch-guide-doc .swch-guide-figure.is-ph {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* 本文インライン画像スライダー（タブ別キャプチャを1枠で見せる）。
   JS 無効でも横スクロール（scroll-snap）で全カット閲覧でき、操作 UI は
   JS が .is-enhanced を付けた時のみ表示する（プログレッシブ・エンハンスメント）。 */
.swch-lp-body .swch-lp-figslider {
	position: relative;
	margin: 36px 0;
}

.swch-lp-figslider-viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.swch-lp-figslider.is-enhanced .swch-lp-figslider-viewport {
	scrollbar-width: none;
}

.swch-lp-figslider.is-enhanced .swch-lp-figslider-viewport::-webkit-scrollbar {
	display: none;
}

/* `.swch-lp-body ul/ol/li` の既定 padding-left / margin を上書きするため
   本文セレクタと同じ詳細度（要素＋クラス）で指定する。残ると横スクロール
   の起点がずれて隣のカットが覗く。 */
.swch-lp-body ul.swch-lp-figslider-track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swch-lp-body li.swch-lp-figslide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

/* スライダー内は1枚＝1画面で見せる（隣のカットを覗かせない）。
   角丸・枠・マット・キャプション帯は通常の図版カードと共通。横スクロール
   枠で左右が切れる影だけ外す。
   カットごとに画像の縦横比が違うと高さがバラついて見づらいので、
   図版カードを縦フレックスにして「画像エリア＝固定比率（プレースホルダ
   /動画と同じ16:9）・中央フィット」「キャプション＝常に下端」に揃える。 */
.swch-lp-body .swch-lp-figslide .swch-lp-figure {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: 0;
	height: 100%;
	box-shadow: none;
}

.swch-lp-body .swch-lp-figslide .swch-lp-figure img {
	flex: 1 1 auto;
	min-height: 0;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: contain;
	object-position: center;
	background: var(--swch-bg);
}

.swch-lp-body .swch-lp-figslide .swch-lp-figure figcaption {
	flex: none;
	margin-top: auto;
}

.swch-lp-figslider-nav,
.swch-lp-figslider-dots {
	display: none;
}

.swch-lp-figslider.is-enhanced .swch-lp-figslider-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--swch-text);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--swch-border);
	border-radius: 999px;
	box-shadow: var(--swch-shadow-card);
	cursor: pointer;
	transition: background var(--swch-transition), opacity var(--swch-transition);
}

.swch-lp-figslider-ico {
	display: block;
	width: 18px;
	height: 18px;
}

.swch-lp-figslider-nav.is-prev { left: 12px; }
.swch-lp-figslider-nav.is-next { right: 12px; }
.swch-lp-figslider-nav.is-next .swch-lp-figslider-ico { transform: rotate(180deg); }
.swch-lp-figslider-nav:hover { background: var(--swch-white); }

.swch-lp-figslider-nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.swch-lp-figslider.is-enhanced .swch-lp-figslider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.swch-lp-figslider-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--swch-border);
	cursor: pointer;
	transition: background var(--swch-transition), transform var(--swch-transition);
}

.swch-lp-figslider-dot:hover { background: var(--swch-text-muted); }

.swch-lp-figslider-dot.is-active {
	background: var(--swch-accent);
	transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
	.swch-lp-figslider-viewport { scroll-behavior: auto; }
}

/* 本文画像のクリック拡大（ライトボックス）。
   操作可能化は JS のみ（assets/js/lp-lightbox.js が is-zoomable を付与）。 */
.swch-lp-body .swch-lp-figure img.is-zoomable { cursor: zoom-in; }

.swch-lp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 23, 42, 0.88);
}

.swch-lp-lightbox[hidden] { display: none; }

.swch-lp-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	cursor: zoom-out;
}

.swch-lp-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--swch-text);
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 999px;
	box-shadow: var(--swch-shadow-card);
	cursor: pointer;
	transition: background var(--swch-transition);
}

.swch-lp-lightbox-close:hover { background: var(--swch-white); }
.swch-lp-lightbox-close svg { display: block; width: 20px; height: 20px; }

.swch-lp-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--swch-text);
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 999px;
	box-shadow: var(--swch-shadow-card);
	cursor: pointer;
	transition: background var(--swch-transition);
}

.swch-lp-lightbox-nav:hover { background: var(--swch-white); }
.swch-lp-lightbox-nav.is-prev { left: 16px; }
.swch-lp-lightbox-nav.is-next { right: 16px; }
.swch-lp-lightbox-nav svg { display: block; width: 20px; height: 20px; }
.swch-lp-lightbox-nav.is-next svg { transform: rotate(180deg); }

body.swch-lp-lightbox-open { overflow: hidden; }

/* 末尾の購入CTAバンド */
.swch-lp-cta-band {
	text-align: center;
	color: var(--swch-white);
	background: var(--swch-tech-navy, #0b1020);
	border-radius: var(--swch-radius);
	padding: 56px 32px;
}

.swch-lp-cta-h { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; margin: 0 0 10px; color: var(--swch-white); }
.swch-lp-cta-sub { font-size: 0.98rem; color: rgba(255, 255, 255, 0.82); margin: 0 0 22px; }
.swch-lp-cta-band .swch-btn { min-width: 240px; }
.swch-lp-cta-note { margin-top: 14px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }
.swch-lp-cta-note a { color: var(--swch-tech-cyan, #22d3ee); text-decoration: underline; }

/* 機能カード: ジョブ三層（課題 → できること → 仕組み・制約） */
.swch-lp-body .swch-lp-feature h3 { margin: 0 0 14px; }
.swch-lp-body .swch-lp-feature p + p { margin-top: 16px; }

.swch-lp-body .swch-lp-feature p strong {
	display: block;
	margin: 0 0 4px;
	color: var(--swch-accent);
	font-weight: 700;
}

/* 段落の先頭 <strong> はラベル（上のブロック表示）。文中の <strong> は
   強調なのでインラインに戻す（ブロック化で改行・着色が乱れるのを防ぐ）。 */
.swch-lp-body .swch-lp-feature p strong:not(:first-child) {
	display: inline;
	margin: 0;
	color: inherit;
}

/* 散文（ナラティブ）カード: 見出し＋自然な一段落で見せる。ラベルを持たず、
   文中の <strong> はすべてインラインの強調にする。 */
.swch-lp-body .swch-lp-feature.is-prose p strong {
	display: inline;
	margin: 0;
	color: inherit;
	font-weight: 700;
}

/* 比較表 / 実例表（中立・一般名。単色・ヘアラインのみ） */
/* 単色・ヘアラインだけだと地の背景に同化するので、ラップ自体を
   白カード（枠＋角丸＋カード影）として浮かせ、表だと一目で分かるようにする。
   表自身の外枠はラップが担うので二重枠を避けて外す。 */
.swch-lp-body .swch-lp-vs-wrap {
	overflow-x: auto;
	margin: 0 0 16px;
	-webkit-overflow-scrolling: touch;
	background: var(--swch-white);
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	box-shadow: var(--swch-shadow-card);
}

.swch-lp-body table.swch-lp-vs {
	width: 100%;
	min-width: 800px;
	border-collapse: collapse;
	font-size: 0.9rem;
	background: var(--swch-white);
}

.swch-lp-body .swch-lp-vs th,
.swch-lp-body .swch-lp-vs td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
	line-height: 1.7;
	border-bottom: 1px solid var(--swch-border-light);
}

.swch-lp-body .swch-lp-vs thead th {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--swch-text);
	background: #f7f7f7;
	border-bottom: 1px solid var(--swch-border);
	white-space: nowrap;
}

.swch-lp-body .swch-lp-vs tbody tr:last-child td,
.swch-lp-body .swch-lp-vs tbody tr:last-child th { border-bottom: 0; }

.swch-lp-body .swch-lp-vs th[scope="row"] {
	font-weight: 700;
	color: var(--swch-text);
	background: #f7f7f7;
	white-space: nowrap;
}

/* 列バンドの強調はなし。本プラグイン列はヘッダー見出しの文字色だけ
   accent にして「自社の列」と分かるようにする（背景は他 th と同じ）。 */
.swch-lp-body .swch-lp-vs thead th.swch-vs-self { color: var(--swch-accent); }

/* 具体例ブロック: ラベル付きで「用例」と一目で分かるコールアウト。
   accent の「具体例」タグが上枠に乗る（fieldset の legend 風）。 */
.swch-lp-body .swch-lp-example {
	position: relative;
	margin: 48px 0;
	padding: 32px 30px 30px;
	border: 1px solid var(--swch-accent);
	border-radius: var(--swch-radius);
	background: var(--swch-accent-light);
}

.swch-lp-body .swch-lp-example::before {
	content: "具体例";
	position: absolute;
	top: 0;
	left: 24px;
	transform: translateY(-50%);
	padding: 5px 16px;
	background: var(--swch-accent);
	color: var(--swch-white);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	border-radius: 999px;
}

.swch-lp-body .swch-lp-example > :first-child { margin-top: 0; }
.swch-lp-body .swch-lp-example > :last-child { margin-bottom: 0; }

.swch-lp-body .swch-lp-example > h3 {
	margin: 0 0 14px;
	font-size: 1.1rem;
	font-weight: 700;
}

/* 段落間隔を一定にし、白カード上の余白も既定マージン依存にしない */
.swch-lp-body .swch-lp-example p { margin: 0 0 20px; }

/* 内側の表・リストは白カードでコールアウト上に重ね、用例らしい層にする */
.swch-lp-body .swch-lp-example table.swch-lp-vs { background: var(--swch-white); min-width: 0; }

/* Responsive */
@media (max-width: 720px) {
	.swch-lp-compare,
	.swch-lp-metrics { grid-template-columns: 1fr 1fr; }
	.swch-lp-flow-arrow { transform: rotate(90deg); width: 100%; justify-content: center; }
	.swch-lp-flow-node { flex-basis: 100%; }
	.swch-lp-features { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.swch-lp-compare,
	.swch-lp-metrics { grid-template-columns: 1fr; }
	.swch-lp-body .swch-lp-step { grid-template-columns: 36px 1fr; gap: 12px; padding: 18px; }
	.swch-lp-step-no { width: 32px; height: 32px; font-size: 0.95rem; }
	.swch-lp-body .swch-lp-lead { font-size: 1.02rem; padding: 18px; }
}