/* ============================================================
 * components.css ─ 再利用可能なUIコンポーネント
 * （ボタン・コンテナ・ヘッダー・ナビ等）
 * ============================================================ */

/* ─── Skip Link（アクセシビリティ・キーボード操作用）
       本来の役割：キーボード操作のユーザーが Tab を押すと最初に出てくるリンク。
                   フォーカスすると画面左上に出現し、Enter で main にジャンプ。
       通常表示時は完全に画面外（visually-hidden 方式）。普通のマウスユーザーには見えない。
       Tab フォーカス時のみ画面左上に表示。 ─── */
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	background: var(--color-brand);
	color: var(--color-text-on-brand);
	text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
	position: fixed;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	padding: 8px 16px;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	border-radius: 4px;
	z-index: 9999;
	outline: 2px solid var(--color-brand); /* トンマナ刷新：amber #F4A340 → ブランドティール */
	outline-offset: 2px;
	font-size: 14px;
	font-weight: 700;
}

/* スクリーンリーダー用：視覚的に隠すが SR には読み上げられる */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ─── Container ─── */
.container {
	width: 100%;
	max-width: var(--container-default);
	margin-inline: auto;
	padding-inline: var(--space-5);  /* SP で 24px の左右余白：窮屈さ解消 */
}

@media (max-width: 380px) {
	/* 狭幅端末（iPhone SE 等）では 20px に */
	.container {
		padding-inline: var(--space-4);
	}
}

.container--wide {
	max-width: var(--container-wide);
}

.container--narrow {
	max-width: var(--container-narrow);
}

@media (min-width: 768px) {
	.container {
		padding-inline: var(--space-6);
	}
}

/* ─── Section（共通余白） ─── */
.section {
	padding-block: var(--section-py-mobile);
}

@media (min-width: 1024px) {
	.section {
		padding-block: var(--section-py-desktop);
	}
}


/* ─── LP Conversion System（Hero内診断 + LP別コンバージョンステージ）───
   LPごとに「問い合わせ前に納得したい画面」を変え、同型化を避ける。 */
.lp-geo-hero {
	--lp-opening-accent: var(--color-brand);
	--lp-opening-accent-soft: rgba(6, 123, 123, 0.10);
	--lp-opening-accent-border: rgba(6, 123, 123, 0.30);
}

.lp-ig-hero {
	--lp-opening-accent: var(--color-empathy);
	--lp-opening-accent-soft: rgba(231, 111, 142, 0.12);
	--lp-opening-accent-border: rgba(231, 111, 142, 0.32);
}

.lp-meo-hero {
	--lp-opening-accent: var(--color-accent);
	--lp-opening-accent-soft: rgba(200, 101, 74, 0.12);
	--lp-opening-accent-border: rgba(200, 101, 74, 0.32);
}

.lp-web-hero {
	--lp-opening-accent: var(--color-action);
	--lp-opening-accent-soft: rgba(244, 163, 64, 0.14);
	--lp-opening-accent-border: rgba(244, 163, 64, 0.34);
}

.lp-mc-hero {
	--lp-opening-accent: var(--color-brand);
	--lp-opening-accent-soft: rgba(6, 123, 123, 0.10);
	--lp-opening-accent-border: rgba(6, 123, 123, 0.30);
}

.lp-hero-diagnostic {
	position: relative;
	display: grid;
	gap: var(--space-3);
	padding: clamp(var(--space-4), 3vw, var(--space-5));
	border: 1px solid var(--lp-opening-accent-border, var(--color-border-brand));
	border-radius: var(--radius-lg);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.42) 58%, var(--lp-opening-accent-soft, rgba(6, 123, 123, 0.10)) 100%),
		var(--color-bg-base);
	box-shadow: 0 18px 46px rgba(26, 40, 38, 0.08);
	overflow: hidden;
}

.lp-hero-diagnostic::before {
	content: "";
	position: absolute;
	inset: 10px 10px auto auto;
	width: 92px;
	height: 92px;
	border: 1px solid var(--lp-opening-accent-border, var(--color-border-brand));
	transform: rotate(16deg);
	opacity: 0.45;
	pointer-events: none;
}

.lp-hero-diagnostic > p {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--lp-opening-accent, var(--color-brand));
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
}

.lp-hero-diagnostic ul {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-hero-diagnostic li {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	color: var(--color-text-primary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-relaxed);
}

.lp-hero-diagnostic li::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: 0.55em;
	border-radius: 50%;
	background: var(--lp-opening-accent, var(--color-brand));
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.lp-hero-diagnostic ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* KV診断ボード：ページ別CSSの旧ミニリスト指定より強く、チェック項目として見せる */
.lp-hero-diagnostic.lp-hero-diagnostic {
	gap: var(--space-4);
	padding: clamp(var(--space-4), 2.5vw, var(--space-5));
	border-color: var(--lp-opening-accent-border, var(--color-border-brand));
	border-radius: 14px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72) 54%, var(--lp-opening-accent-soft, rgba(6, 123, 123, 0.10)) 100%),
		var(--color-bg-surface);
	box-shadow: 0 18px 42px rgba(26, 40, 38, 0.10);
}

.lp-hero-diagnostic.lp-hero-diagnostic::before {
	inset: 12px 12px auto auto;
	width: 76px;
	height: 76px;
	opacity: 0.22;
}

.lp-hero-diagnostic.lp-hero-diagnostic > p {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	gap: var(--space-2);
	padding: 0.45em 0.8em;
	border-radius: 999px;
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
	font-size: clamp(0.72rem, 1.4vw, var(--fs-xs));
	line-height: 1;
	box-shadow: 0 10px 24px rgba(6, 123, 123, 0.18);
}

.lp-hero-diagnostic.lp-hero-diagnostic > p::before {
	content: "";
	width: 0.62em;
	height: 0.36em;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg) translateY(-1px);
	flex: 0 0 auto;
}

.lp-hero-diagnostic.lp-hero-diagnostic ul {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--space-3);
}

.lp-hero-diagnostic.lp-hero-diagnostic li {
	position: relative;
	display: block;
	min-height: 64px;
	padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 34px);
	border: 1px solid rgba(6, 123, 123, 0.14);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.78);
	color: var(--color-text-primary);
	font-size: clamp(0.92rem, 1.45vw, var(--fs-sm));
	font-weight: var(--fw-bold);
	line-height: var(--lh-relaxed);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
	overflow-wrap: break-word;
}

.lp-hero-diagnostic.lp-hero-diagnostic li::before {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	margin-top: 0;
	border-radius: 50%;
	border: 2px solid var(--lp-opening-accent, var(--color-brand));
	background: var(--color-bg-dark-primary);
	box-shadow: 0 8px 18px rgba(6, 123, 123, 0.22);
}

.lp-hero-diagnostic.lp-hero-diagnostic li::after {
	content: "";
	position: absolute;
	top: calc(var(--space-4) + 6px);
	left: calc(var(--space-4) + 7px);
	width: 8px;
	height: 5px;
	border-left: 2px solid var(--color-text-dark-primary);
	border-bottom: 2px solid var(--color-text-dark-primary);
	transform: rotate(-45deg);
}

@media (min-width: 1024px) {
	.lp-hero-diagnostic.lp-hero-diagnostic ul {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

.lp-conversion-stage {
	--stage-accent: var(--color-brand);
	--stage-accent-soft: rgba(6, 123, 123, 0.10);
	--stage-accent-border: rgba(6, 123, 123, 0.34);
	--stage-accent-ink: var(--color-brand-900);
	position: relative;
	padding-block: var(--space-9);
	background:
		repeating-linear-gradient(135deg, rgba(26, 40, 38, 0.045) 0 1px, transparent 1px 18px),
		linear-gradient(120deg, rgba(255, 255, 255, 0.88) 0%, rgba(250, 249, 247, 0.94) 52%, var(--stage-accent-soft) 100%),
		var(--color-bg-primary);
	border-block: 1px solid var(--stage-accent-border);
	overflow: hidden;
	isolation: isolate;
}

.lp-conversion-stage::before,
.lp-conversion-stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.lp-conversion-stage::before {
	inset: var(--space-5) auto auto 6%;
	width: 220px;
	height: 220px;
	border: 1px solid var(--stage-accent-border);
	clip-path: polygon(0 0, 100% 14%, 82% 100%, 8% 82%);
	transform: rotate(-8deg);
	opacity: 0.42;
}

.lp-conversion-stage::after {
	right: 0;
	bottom: var(--space-6);
	width: min(42vw, 560px);
	height: 96px;
	background:
		linear-gradient(90deg, transparent 0 10%, var(--stage-accent) 10% 18%, transparent 18% 24%, var(--stage-accent) 24% 30%, transparent 30% 100%);
	opacity: 0.10;
}

.lp-conversion-stage--geo {
	--stage-accent: var(--color-brand);
	--stage-accent-soft: rgba(6, 123, 123, 0.10);
	--stage-accent-border: rgba(6, 123, 123, 0.34);
	--stage-accent-ink: var(--color-brand-900);
}

.lp-conversion-stage--ig {
	--stage-accent: var(--color-empathy);
	--stage-accent-soft: rgba(231, 111, 142, 0.12);
	--stage-accent-border: rgba(231, 111, 142, 0.34);
	--stage-accent-ink: var(--color-empathy-900);
}

.lp-conversion-stage--meo {
	--stage-accent: var(--color-accent);
	--stage-accent-soft: rgba(200, 101, 74, 0.12);
	--stage-accent-border: rgba(200, 101, 74, 0.34);
	--stage-accent-ink: var(--color-accent-900);
}

.lp-conversion-stage--web {
	--stage-accent: var(--color-action);
	--stage-accent-soft: rgba(244, 163, 64, 0.14);
	--stage-accent-border: rgba(244, 163, 64, 0.36);
	--stage-accent-ink: var(--color-action-900);
}

.lp-conversion-stage--mc {
	--stage-accent: var(--color-intelligence);
	--stage-accent-soft: rgba(20, 212, 212, 0.10);
	--stage-accent-border: rgba(20, 212, 212, 0.30);
	--stage-accent-ink: var(--color-brand-900);
}

.lp-conversion-stage__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-7);
	align-items: center;
}

@media (min-width: 1024px) {
	.lp-conversion-stage__inner {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		gap: var(--space-9);
	}
}

.lp-conversion-stage__copy {
	min-width: 0;
}

.lp-conversion-stage__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	color: var(--stage-accent-ink);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
}

.lp-conversion-stage__eyebrow::before {
	content: "";
	width: 42px;
	height: 3px;
	background: var(--stage-accent);
}

.lp-conversion-stage__title {
	margin: 0;
	color: var(--color-text-primary);
	font-size: var(--fs-4xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: 0;
	font-feature-settings: "palt";
}

.lp-conversion-stage__lead {
	margin: var(--space-5) 0 0;
	color: var(--color-text-secondary);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	line-height: var(--lh-loose);
}

.lp-conversion-stage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.lp-conversion-stage__visual {
	position: relative;
	min-width: 0;
	min-height: 360px;
}

@media (min-width: 1024px) {
	.lp-conversion-stage__title {
		font-size: var(--fs-6xl);
	}

	.lp-conversion-stage__lead {
		font-size: var(--fs-lg);
	}
}

.lp-stage-geo {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(160px, 0.65fr);
	gap: var(--space-4);
	align-items: stretch;
}

.lp-stage-geo__answer {
	position: relative;
	padding: var(--space-5);
	border: 1px solid var(--color-border-dark-default);
	border-radius: 8px;
	background:
		linear-gradient(160deg, rgba(20, 212, 212, 0.16), transparent 36%),
		linear-gradient(145deg, var(--color-bg-dark-primary), var(--color-bg-dark-surface));
	box-shadow: 0 24px 54px rgba(10, 20, 20, 0.22);
	overflow: hidden;
}

.lp-stage-geo__answer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 18px;
	background: repeating-linear-gradient(90deg, var(--stage-accent) 0 28px, transparent 28px 42px);
	opacity: 0.42;
}

.lp-stage-geo__bar,
.lp-stage-geo__citations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.lp-stage-geo__bar {
	justify-content: space-between;
	margin-top: var(--space-4);
	color: var(--color-text-dark-secondary);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.lp-stage-geo__question {
	margin: var(--space-5) 0 var(--space-3);
	padding: var(--space-3);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--color-text-dark-primary);
	font-weight: var(--fw-bold);
	line-height: var(--lh-relaxed);
}

.lp-stage-geo__response {
	margin: 0;
	color: var(--color-text-dark-secondary);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

.lp-stage-geo__citations {
	margin-top: var(--space-5);
}

.lp-stage-geo__citations span {
	padding: 7px 10px;
	border: 1px solid rgba(20, 212, 212, 0.28);
	border-radius: 999px;
	color: var(--color-text-dark-primary);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.lp-stage-geo__signals {
	display: grid;
	gap: var(--space-3);
}

.lp-stage-geo__signals div {
	padding: var(--space-4);
	border: 1px solid var(--stage-accent-border);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.82);
	color: var(--color-text-primary);
	box-shadow: 0 12px 28px rgba(26, 40, 38, 0.08);
}

.lp-stage-geo__signals strong,
.lp-stage-geo__signals span {
	display: block;
}

.lp-stage-geo__signals strong {
	color: var(--stage-accent-ink);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-sm);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wide);
}

.lp-stage-geo__signals span {
	margin-top: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--fs-xs);
	line-height: var(--lh-relaxed);
}

.lp-stage-ig {
	display: grid;
	grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1fr);
	gap: var(--space-5);
	align-items: center;
}

.lp-stage-ig__phone {
	position: relative;
	width: min(100%, 280px);
	aspect-ratio: 9 / 16;
	padding: var(--space-5) var(--space-4);
	border: 8px solid var(--color-bg-dark-primary);
	border-radius: 28px;
	background:
		linear-gradient(180deg, rgba(231, 111, 142, 0.18), transparent 42%),
		var(--color-bg-dark-surface);
	box-shadow: 0 26px 52px rgba(110, 31, 54, 0.22);
	justify-self: center;
}

.lp-stage-ig__phone::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	width: 72px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	transform: translateX(-50%);
}

.lp-stage-ig__search,
.lp-stage-ig__profile,
.lp-stage-ig__dm {
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.10);
	color: var(--color-text-dark-primary);
}

.lp-stage-ig__search {
	margin-top: var(--space-5);
	padding: var(--space-3);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.lp-stage-ig__post-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.lp-stage-ig__post-grid span {
	display: block;
	aspect-ratio: 1;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--color-empathy), var(--color-action));
}

.lp-stage-ig__post-grid span:nth-child(2) {
	background: linear-gradient(135deg, var(--color-brand), var(--color-intelligence));
}

.lp-stage-ig__post-grid span:nth-child(3) {
	background: linear-gradient(135deg, var(--color-accent), var(--color-empathy));
}

.lp-stage-ig__post-grid span:nth-child(4) {
	background: linear-gradient(135deg, var(--color-action), var(--color-bg-primary));
}

.lp-stage-ig__profile {
	margin-top: var(--space-3);
	padding: var(--space-3);
}

.lp-stage-ig__profile strong,
.lp-stage-ig__profile span {
	display: block;
}

.lp-stage-ig__profile strong {
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
}

.lp-stage-ig__profile span {
	margin-top: var(--space-1);
	color: var(--color-text-dark-secondary);
	font-size: var(--fs-xs);
}

.lp-stage-ig__dm {
	margin-top: var(--space-3);
	padding: var(--space-3);
	background: var(--color-empathy);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	text-align: center;
}

.lp-stage-ig__flow {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-stage-ig__flow li {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-4);
	border: 1px solid var(--stage-accent-border);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 14px 30px rgba(26, 40, 38, 0.07);
}

.lp-stage-ig__flow li > span {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--stage-accent);
	color: var(--color-text-on-brand);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	grid-row: 1 / 3;
}

.lp-stage-ig__flow strong,
.lp-stage-ig__flow em {
	display: block;
	font-style: normal;
}

.lp-stage-ig__flow strong {
	color: var(--color-text-primary);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-lg);
	font-weight: var(--fw-extrabold);
	grid-column: 2;
}

.lp-stage-ig__flow em {
	grid-column: 2;
	margin-top: var(--space-1);
	color: var(--color-text-secondary);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.lp-stage-meo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(210px, 0.76fr);
	gap: var(--space-4);
	align-items: end;
}

.lp-stage-meo__map {
	position: relative;
	min-height: 320px;
	border: 1px solid rgba(200, 101, 74, 0.30);
	border-radius: 8px;
	background:
		linear-gradient(90deg, rgba(6, 123, 123, 0.12) 1px, transparent 1px),
		linear-gradient(0deg, rgba(6, 123, 123, 0.12) 1px, transparent 1px),
		linear-gradient(135deg, rgba(200, 101, 74, 0.20), rgba(255, 255, 255, 0.70));
	background-size: 42px 42px, 42px 42px, auto;
	box-shadow: 0 22px 48px rgba(92, 43, 31, 0.14);
}

.lp-stage-meo__map::before {
	content: "";
	position: absolute;
	inset: 22% 12% 26% 18%;
	border: 6px solid rgba(200, 101, 74, 0.34);
	border-right-color: transparent;
	border-radius: 42% 58% 48% 52%;
	transform: rotate(-12deg);
}

.lp-stage-meo__pin {
	position: absolute;
	width: 28px;
	height: 28px;
	border: 4px solid #FFFFFF;
	border-radius: 50% 50% 50% 0;
	background: var(--stage-accent);
	box-shadow: 0 10px 22px rgba(92, 43, 31, 0.20);
	transform: rotate(-45deg);
}

.lp-stage-meo__pin::after {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: #FFFFFF;
}

.lp-stage-meo__pin--main {
	left: 48%;
	top: 34%;
	width: 40px;
	height: 40px;
}

.lp-stage-meo__pin--sub {
	left: 22%;
	top: 58%;
	background: var(--color-brand);
}

.lp-stage-meo__pin--tiny {
	right: 18%;
	top: 18%;
	background: var(--color-action);
}

.lp-stage-meo__pack {
	position: relative;
	margin-left: -56px;
	padding: var(--space-5);
	border: 1px solid rgba(26, 40, 38, 0.12);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.90);
	box-shadow: 0 26px 54px rgba(26, 40, 38, 0.16);
}

.lp-stage-meo__shop strong,
.lp-stage-meo__shop span,
.lp-stage-meo__shop em {
	display: block;
}

.lp-stage-meo__shop strong {
	color: var(--color-text-primary);
	font-size: var(--fs-xl);
	font-weight: var(--fw-extrabold);
}

.lp-stage-meo__shop span {
	margin-top: var(--space-2);
	color: var(--stage-accent-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.lp-stage-meo__shop em {
	margin-top: var(--space-1);
	color: var(--color-text-secondary);
	font-size: var(--fs-xs);
	font-style: normal;
}

.lp-stage-meo__actions,
.lp-stage-meo__checks {
	display: grid;
	gap: var(--space-2);
}

.lp-stage-meo__actions {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--space-4);
}

.lp-stage-meo__actions span,
.lp-stage-meo__checks span {
	border-radius: 8px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-align: center;
}

.lp-stage-meo__actions span {
	padding: var(--space-2);
	background: var(--stage-accent);
	color: var(--color-text-on-accent);
}

.lp-stage-meo__checks {
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lp-stage-meo__checks span {
	padding: var(--space-3);
	border: 1px solid var(--stage-accent-border);
	background: rgba(255, 255, 255, 0.74);
	color: var(--color-text-primary);
}

.lp-stage-web {
	display: grid;
	gap: var(--space-4);
}

.lp-stage-web__board {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3);
	align-items: end;
	padding: var(--space-4);
	border: 1px solid rgba(244, 163, 64, 0.32);
	border-radius: 8px;
	background:
		linear-gradient(90deg, rgba(244, 163, 64, 0.16) 0 1px, transparent 1px),
		linear-gradient(0deg, rgba(244, 163, 64, 0.12) 0 1px, transparent 1px),
		rgba(255, 255, 255, 0.74);
	background-size: 40px 40px;
	box-shadow: 0 24px 50px rgba(122, 74, 10, 0.12);
}

.lp-stage-web__lane {
	display: flex;
	min-height: 178px;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-2);
	padding: var(--space-4);
	border: 1px solid rgba(26, 40, 38, 0.10);
	border-radius: 8px;
	background: #FFFFFF;
}

.lp-stage-web__lane:nth-child(2) {
	min-height: 214px;
}

.lp-stage-web__lane:nth-child(3) {
	min-height: 250px;
}

.lp-stage-web__lane:nth-child(4) {
	min-height: 286px;
}

.lp-stage-web__lane--now {
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
}

.lp-stage-web__lane strong,
.lp-stage-web__lane span {
	display: block;
}

.lp-stage-web__lane strong {
	color: inherit;
	font-family: var(--font-sans-latin);
	font-size: var(--fs-lg);
	font-weight: var(--fw-extrabold);
}

.lp-stage-web__lane span {
	color: inherit;
	font-size: var(--fs-xs);
	line-height: var(--lh-relaxed);
	opacity: 0.78;
}

.lp-stage-web__matrix {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

.lp-stage-web__matrix div {
	padding: var(--space-4);
	border: 1px solid rgba(26, 40, 38, 0.10);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.78);
}

.lp-stage-web__matrix strong,
.lp-stage-web__matrix span {
	display: block;
}

.lp-stage-web__matrix strong {
	color: var(--stage-accent-ink);
	font-family: var(--font-sans-latin);
	font-weight: var(--fw-extrabold);
}

.lp-stage-web__matrix span {
	margin-top: var(--space-1);
	color: var(--color-text-secondary);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.lp-stage-mc {
	display: grid;
	gap: var(--space-4);
}

.lp-stage-mc__header,
.lp-stage-mc__columns div,
.lp-stage-mc__rhythm span {
	border-radius: 8px;
}

.lp-stage-mc__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-5);
	background:
		linear-gradient(135deg, rgba(20, 212, 212, 0.20), transparent 42%),
		var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
}

.lp-stage-mc__header span {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.lp-stage-mc__header strong {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xl);
	font-weight: var(--fw-extrabold);
}

.lp-stage-mc__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}

.lp-stage-mc__columns div {
	position: relative;
	min-height: 180px;
	padding: var(--space-4);
	border: 1px solid var(--stage-accent-border);
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 18px 36px rgba(6, 101, 101, 0.10);
}

.lp-stage-mc__columns div::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background: var(--stage-accent);
}

.lp-stage-mc__columns strong,
.lp-stage-mc__columns span {
	display: block;
}

.lp-stage-mc__columns strong {
	margin-top: var(--space-3);
	color: var(--stage-accent-ink);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xl);
	font-weight: var(--fw-extrabold);
}

.lp-stage-mc__columns span {
	margin-top: var(--space-3);
	color: var(--color-text-secondary);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

.lp-stage-mc__rhythm {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.lp-stage-mc__rhythm span {
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

@media (max-width: 1023px) {
	.lp-conversion-stage {
		padding-block: var(--space-8);
	}

	.lp-conversion-stage__visual {
		min-height: auto;
	}

	.lp-stage-geo,
	.lp-stage-ig,
	.lp-stage-meo {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-stage-meo__pack {
		margin-left: 0;
	}

	.lp-stage-web__board {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-stage-web__lane,
	.lp-stage-web__lane:nth-child(2),
	.lp-stage-web__lane:nth-child(3),
	.lp-stage-web__lane:nth-child(4) {
		min-height: 150px;
	}
}

@media (max-width: 767px) {
	.lp-hero-diagnostic {
		border-radius: var(--radius-md);
	}

	.lp-hero-diagnostic ul {
		gap: var(--space-2);
	}

	.lp-conversion-stage {
		padding-block: var(--space-7);
	}

	.lp-conversion-stage::before {
		width: 150px;
		height: 150px;
		opacity: 0.28;
	}

	.lp-conversion-stage__inner {
		gap: var(--space-6);
	}

	.lp-conversion-stage__title {
		font-size: var(--fs-3xl);
	}

	.lp-conversion-stage__lead {
		font-size: var(--fs-base);
	}

	.lp-conversion-stage__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.lp-conversion-stage__actions .btn {
		width: 100%;
	}

	.lp-stage-geo__signals,
	.lp-stage-meo__checks,
	.lp-stage-web__board,
	.lp-stage-web__matrix,
	.lp-stage-mc__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-stage-ig__phone {
		width: min(100%, 250px);
	}
}

/* ─── SP（〜767px）共通：セクション余白の最適化（48〜72pxレンジ） ─── */
@media (max-width: 767px) {
	/* PC で var(--space-9)=96px / var(--space-10)=128px が指定されている
	   セクションは SP では詰めすぎず空けすぎない 56〜72px に圧縮し、
	   モバイルファーストの「リズム」を作る */
	.bento,
	.strengths,
	.case-study,
	.ai-lab,
	.news-column,
	.about-manifesto,
	.about-message,
	.about-info,
	.about-business,
	.about-clients,
	.about-access,
	.about-vision,
	.services-bento,
	.services-detail,
	.services-strengths,
	.services-faq {
		padding-block: var(--space-8);  /* 64px：詰まらず・空きすぎず */
	}

	/* セクション headers の下マージンを SP で詰める（タイトル→本文の距離感を引き締め） */
	.bento__header,
	.strengths__header,
	.case-study__header,
	.ai-lab__header,
	.about-manifesto__header,
	.about-message__header,
	.about-info__header,
	.about-business__header,
	.about-clients__header,
	.about-access__header,
	.about-vision__header,
	.services-bento__header,
	.services-detail__header,
	.services-strengths__header,
	.services-faq__header {
		margin-bottom: var(--space-6);  /* 32px */
	}
}

/* ─── Buttons ─── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-6);
	font-family: inherit;
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tight);
	line-height: 1;
	border-radius: 2px;  /* 建築製図・編集トーンに合わせ角を立てる（旧 6px 角丸→ほぼ角） */
	min-height: 48px;  /* タップ領域 44px+ を全ボタンで保証 */
	transition:
		background var(--duration-fast) var(--ease-in-out-quart),
		color      var(--duration-fast) var(--ease-in-out-quart),
		border     var(--duration-fast) var(--ease-in-out-quart),
		transform  var(--duration-fast) var(--ease-out-expo);
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
}

/* SP（〜767px）：ボタンの可読性・タップ感をワンランク引き上げ */
@media (max-width: 767px) {
	.btn {
		font-size: var(--fs-base);  /* 16px 維持。最低ラインを保つ */
		min-height: 52px;            /* タップ精度を上げる */
		padding-inline: var(--space-5);
		max-width: 100%;
		white-space: normal;
		line-height: 1.35;
		text-align: center;
	}

	.btn--lg {
		font-size: var(--fs-lg);     /* 18px */
		min-height: 56px;
	}

	.btn--ghost {
		min-height: 44px;
		padding-inline: var(--space-3);
	}
}

.btn:focus-visible {
	outline-offset: 4px;
}

/* Primary：ブランドティール塗り */
.btn--primary {
	background: var(--color-brand);
	color: var(--color-text-on-brand);
}

.btn--primary:hover {
	background: var(--color-brand-700);
	transform: translateY(-2px);
	color: var(--color-text-on-brand);
}

/* Secondary：アウトライン */
.btn--secondary {
	background: transparent;
	color: var(--color-text-primary);
	border-color: var(--color-border-default);
}

.btn--secondary:hover {
	border-color: var(--color-brand);
	background: var(--color-glass-brand);
	color: var(--color-text-primary);
}

/* Ghost：テキストリンク */
.btn--ghost {
	background: transparent;
	color: var(--color-text-secondary);
	padding: var(--space-3) var(--space-4);
}

.btn--ghost:hover {
	color: var(--color-brand);
}

.btn--ghost::after {
	content: " →";
	transition: transform var(--duration-fast) var(--ease-spring);
	display: inline-block;
}

.btn--ghost:hover::after {
	transform: translateX(4px);
}

/* Accent：コッパー塗り（CTA/温度感を出したい時）
   白文字とのコントラスト確保のため、塗りは濃いコッパー(--color-accent-700 #9E6743 / 白上4.69:1=AA)を使う。
   明るいコッパー #C9885F + 白文字は 2.93:1 で AA 不適合のため塗りには使わない。 */
.btn--accent {
	background: var(--color-accent-700);
	color: var(--color-text-on-accent);
}

.btn--accent:hover {
	background: var(--color-accent-900);
	transform: translateY(-2px);
	color: var(--color-text-on-accent);
}

/* Size variants */
.btn--lg {
	padding: var(--space-5) var(--space-7);
	font-size: var(--fs-lg);
}

.btn--sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-sm);
}

/* ─── Site Header ─── */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-header);
	background: rgba(250, 249, 247, 0.88);
	backdrop-filter: blur(var(--blur-md));
	-webkit-backdrop-filter: blur(var(--blur-md));
	border-bottom: 1px solid rgba(6, 123, 123, 0.12);
	box-shadow: none;
	transition: transform var(--duration-base) var(--ease-out-expo);
}

/* SP では不透明度を上げて、本文の濃色見出しの透けを防止 */
@media (max-width: 767px) {
	.site-header {
		background: rgba(250, 249, 247, 0.96);
	}
}

.site-header[data-hidden="true"] {
	transform: translateY(-100%);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	height: 64px;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (min-width: 768px) {
	.site-header__inner {
		padding-inline: var(--space-6);
	}
}

/* Logo */
.site-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
	transition: opacity var(--duration-fast) var(--ease-out-expo);
}

.site-logo:hover {
	opacity: 0.75;
}

.site-logo img,
.site-logo svg {
	height: 26px;
	width: auto;
	display: block;
}

@media (min-width: 768px) {
	.site-logo img,
	.site-logo svg {
		height: 28px;
	}
}

/* Global Nav */
.global-nav {
	display: none;
	flex: 1;
	justify-content: center;
}

@media (min-width: 1024px) {
	.global-nav {
		display: flex;
	}
}

.global-nav__list {
	display: flex;
	gap: var(--space-7);
	align-items: center;
}

/* 各ナビ項目：英語ラベル（上）+ 日本語（下）の縦並び */
.global-nav__list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: var(--space-2) 0;
	color: var(--color-text-secondary);
	transition: color var(--duration-fast) var(--ease-out-expo);
	position: relative;
}

.global-nav__en {
	font-family: var(--font-sans-latin);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	line-height: 1;
	opacity: 0.85;
	transition: opacity var(--duration-fast) var(--ease-out-expo);
}

.global-nav__ja {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tight);
	line-height: 1.2;
}

/* Hover：日本語が白く、英語ラベルが鮮やかに */
.global-nav__list a:hover {
	color: var(--color-text-primary);
}

.global-nav__list a:hover .global-nav__en {
	opacity: 1;
	color: var(--color-brand-500);
}

/* 現在ページ表示（aria-current） */
.global-nav__list a[aria-current="page"] {
	color: var(--color-text-primary);
}

.global-nav__list a[aria-current="page"] .global-nav__en {
	opacity: 1;
}

.global-nav__list a[aria-current="page"]::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	background: var(--color-brand);
	border-radius: var(--radius-full);
}

/* ─── Dropdown（Service用、デスクトップのみ） ─── */
.global-nav__list > li.has-dropdown {
	position: relative;
}

/* Service リンクの右側に小さな chevron ▾ */
.global-nav__list > li.has-dropdown > a::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
	pointer-events: auto;
}

.global-nav__list > li.has-dropdown > a > .global-nav__chevron {
	display: inline-block;
	margin-left: 4px;
	font-size: 9px;
	color: var(--color-brand-300);
	transition: transform var(--duration-fast) var(--ease-out-expo);
	opacity: 0.8;
	transform: translateY(1px);
}

.global-nav__list > li.has-dropdown:hover > a > .global-nav__chevron,
.global-nav__list > li.has-dropdown:focus-within > a > .global-nav__chevron {
	transform: rotate(180deg) translateY(-1px);
	opacity: 1;
}

/* ドロップダウン本体（左寄せ・2カラム・コンパクト） */
.global-nav__dropdown {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	transform: translateY(-8px);
	min-width: 460px;
	/* viewport 右端を超えないように上限を設ける（1024px 付近のはみ出し対策） */
	max-width: calc(100vw - var(--space-6) * 2);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	padding: var(--space-5);
	/* トンマナ刷新：box-shadow とブランドグローを全廃し、フラットな罫線で区切る */
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity    var(--duration-base) var(--ease-out-expo),
		visibility var(--duration-base) var(--ease-out-expo),
		transform  var(--duration-base) var(--ease-out-expo);
	z-index: var(--z-dropdown);
}

.global-nav__list > li.has-dropdown:hover > .global-nav__dropdown,
.global-nav__list > li.has-dropdown:focus-within > .global-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.global-nav__dropdown-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.global-nav__dropdown-label {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-border-subtle);
}

.global-nav__dropdown ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	padding: 0;
}

.global-nav__dropdown ul a {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	text-align: left;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-sans-jp);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tight);
	line-height: 1.4;
	border-radius: var(--radius-sm);
	transition:
		color      var(--duration-fast) var(--ease-out-expo),
		background var(--duration-fast) var(--ease-out-expo),
		transform  var(--duration-fast) var(--ease-spring);
}

.global-nav__dropdown ul a:hover {
	color: var(--color-text-primary);
	background: var(--color-glass-brand);
	transform: translateX(4px);
}

/* 右側ナビ項目（AI Lab=4番目 / Column=5番目）のドロップダウンは右端基準にし、
   viewport 右端からはみ出さないようにする（1024px 付近対策） */
.global-nav__list > li.has-dropdown:nth-child(4) > .global-nav__dropdown,
.global-nav__list > li.has-dropdown:nth-child(5) > .global-nav__dropdown {
	left: auto;
	right: 0;
}

/* AI Lab ドロップダウンは1グループ（3項目）のみのため1カラムで十分。
   不要に幅を取らないよう、2カラム強制を解除して狭める */
.global-nav__list > li.has-dropdown:nth-child(4) > .global-nav__dropdown {
	grid-template-columns: 1fr;
	min-width: 240px;
}

/* 1024〜1279px：6項目＋ロゴ＋CTAが窮屈になるため、ナビ間 gap を詰める
   （1280px 以上は従来どおり --space-7 を維持） */
@media (min-width: 1024px) and (max-width: 1279px) {
	.global-nav__list {
		gap: var(--space-5);
	}
}

/* モバイルではドロップダウン非表示（後日アコーディオン化） */
@media (max-width: 1023px) {
	.global-nav__dropdown,
	.global-nav__chevron {
		display: none;
	}
}

/* ─── ユーティリティ：SPだけ改行を入れたいとき ─── */
/* デフォルト（SP）では <br> を有効に表示し、md(768px) 以上で打ち消す */
@media (min-width: 768px) {
	.br-sp {
		display: none;
	}
}

/* ─── ユーティリティ：PCだけ改行を入れたいとき ─── */
/* デフォルト（SP/タブレット）では非表示、lg(1024px) 以上で改行有効 */
.br-pc {
	display: none;
}

@media (min-width: 1024px) {
	.br-pc {
		display: inline;
	}
}

/* Header CTA */
.site-header__cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* ヘッダーCTAは存在感を出すため、btn--sm の左右paddingを広げて背景幅を確保
   （でぐ指摘・2026-06-03）。グローバルの .btn--sm は変えずヘッダー限定で上書き。 */
.site-header__cta .btn {
	padding-inline: var(--space-6);
}

/* SP・タブレット（〜1023px）ではハンバーガーメニューに集約するため非表示 */
@media (max-width: 1023px) {
	.site-header__cta {
		display: none;
	}
}

/* ─── Section共通：英語オーバーライン ─── */
.section-overline {
	display: inline-block;
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-300);
	margin-bottom: var(--space-4);
	position: relative;
	padding-left: var(--space-5);
}

.section-overline::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--space-4);
	height: 1px;
	background: var(--color-brand-300);
	transform: translateY(-50%);
}

/* ─── Section Label（連番 + 装飾線 + 英ラベル） ─── */
.section-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	font-family: var(--font-sans-latin);
}

.section-label--center {
	margin-inline: auto;
}

.section-label__num {
	font-size: var(--fs-base);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-tight);
	color: var(--color-brand);
	font-feature-settings: "tnum";
	line-height: 1;
}

.section-label__line {
	display: block;
	width: 36px;
	height: 1px;
	background: linear-gradient(
		90deg,
		var(--color-brand) 0%,
		transparent 100%
	);
}

.section-label__en {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-300);
}

/* SP（〜767px）：section-label は SP では section-label__num の存在感を維持しつつ、
   全体としてコンパクトに */
@media (max-width: 767px) {
	.section-label {
		gap: var(--space-2);
		margin-bottom: var(--space-4);
	}

	.section-label__line {
		width: 24px;
	}
}

/* ─── Background Mega Typography（全セクション共通） ─── */
.bg-mega-typo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-sans-latin);
	font-size: clamp(4rem, 13vw, 13rem);
	font-weight: 900;
	color: var(--color-text-primary);
	opacity: 0.045;
	letter-spacing: 0;
	white-space: nowrap;
	z-index: var(--z-behind);
	user-select: none;
	overflow: hidden;
	will-change: transform;
}

/* SP（〜767px）では更に控えめに（テキスト可読性優先）
   ただし完全に消さず、装飾としてうっすら認知できるレベル */
@media (max-width: 767px) {
	.bg-mega-typo {
		opacity: 0.035;
		font-size: clamp(3.5rem, 16vw, 6rem);
	}
}

.bg-mega-typo span {
	display: block;
}

.bg-mega-typo span:first-child {
	transform: translateX(-12%);
}

.bg-mega-typo span:last-child {
	transform: translateX(12%);
}

/* セクション内背景タイポの色バリエーション */
.bg-mega-typo--brand span:last-child {
	color: var(--color-brand);
	opacity: 0.5;
}

.bg-mega-typo--empathy span:last-child {
	color: var(--color-empathy);
	opacity: 0.4;
}

.bg-mega-typo--single {
	justify-content: center;
}

.bg-mega-typo--single span {
	transform: none !important;
}

/* ─── セクション境界の細罫線 ─── */
/* トンマナ刷新：発光グラデーションを撤去し、ティール低alphaのフラットな細罫線に */
.section-glow-line {
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: rgba(6, 123, 123, 0.12);
	pointer-events: none;
	z-index: var(--z-base);
}

/* セクション見出し（共通） */
.section-title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
}

/* SP（〜767px）：display-md (clamp) のSP値が大きすぎず小さすぎない
   28〜32pxレンジに収まるよう、各ページのh2を一括調整。
   個別ページCSSが上書きする場合はそちらが優先される */
@media (max-width: 767px) {
	.bento__title,
	.strengths__title,
	.case-study__title,
	.ai-lab__title,
	.about-manifesto__title,
	.about-message__title,
	.about-info__title,
	.about-business__title,
	.about-clients__title,
	.about-access__title,
	.about-vision__title,
	.services-bento__title,
	.services-strengths__title,
	.services-faq__title {
		font-size: clamp(1.75rem, 7.5vw, 2.125rem);  /* 28〜34px */
		line-height: 1.25;
	}
}

.section-title__break {
	display: block;
}

.section-title__accent {
	color: var(--color-brand-300);
}

/* ─── スクロール出現アニメーション（v2 強化版） ─── */
.reveal {
	opacity: 0;
	transform: translateY(32px) scale(0.985);
	transition:
		opacity   720ms var(--ease-out-expo),
		transform 720ms var(--ease-out-expo);
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* バリエーション：左から */
.reveal--from-left {
	transform: translate3d(-40px, 0, 0);
}
.reveal--from-left.is-visible {
	transform: translate3d(0, 0, 0);
}

/* バリエーション：右から */
.reveal--from-right {
	transform: translate3d(40px, 0, 0);
}
.reveal--from-right.is-visible {
	transform: translate3d(0, 0, 0);
}

/* バリエーション：拡大フェード（カード・SVG向け） */
.reveal--scale {
	transform: scale(0.94);
}
.reveal--scale.is-visible {
	transform: scale(1);
}

/* バリエーション：ぼかしクリア（タイトル向け） */
.reveal--blur {
	filter: blur(8px);
	transition:
		opacity   720ms var(--ease-out-expo),
		transform 720ms var(--ease-out-expo),
		filter    600ms var(--ease-out-expo);
}
.reveal--blur.is-visible {
	filter: blur(0);
}

/* 段階差 delay：data-delay="1"〜"6" */
.reveal[data-delay="1"] { transition-delay: 0.06s; }
.reveal[data-delay="2"] { transition-delay: 0.12s; }
.reveal[data-delay="3"] { transition-delay: 0.18s; }
.reveal[data-delay="4"] { transition-delay: 0.24s; }
.reveal[data-delay="5"] { transition-delay: 0.30s; }
.reveal[data-delay="6"] { transition-delay: 0.36s; }

/* SP（〜767px）：reveal アニメは少し軽快に・移動量を小さく
   モバイルではゆっくりすぎる演出は重く感じるため、距離と時間を圧縮 */
@media (max-width: 767px) {
	.reveal {
		transform: translateY(20px) scale(0.99);
		transition:
			opacity   520ms var(--ease-out-expo),
			transform 520ms var(--ease-out-expo);
	}

	.reveal--from-left {
		transform: translate3d(-24px, 0, 0);
	}

	.reveal--from-right {
		transform: translate3d(24px, 0, 0);
	}

	/* SP では段階差 delay を短く詰める：もたつき感を解消 */
	.reveal[data-delay="1"] { transition-delay: 0.04s; }
	.reveal[data-delay="2"] { transition-delay: 0.08s; }
	.reveal[data-delay="3"] { transition-delay: 0.12s; }
	.reveal[data-delay="4"] { transition-delay: 0.16s; }
	.reveal[data-delay="5"] { transition-delay: 0.20s; }
	.reveal[data-delay="6"] { transition-delay: 0.24s; }
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal--from-left,
	.reveal--from-right,
	.reveal--scale,
	.reveal--blur {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* Mobile menu toggle */
.menu-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 48px;
	min-height: 48px;
	padding: var(--space-2);
	margin-right: calc(var(--space-2) * -1);
	border-radius: var(--radius-md);
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-text-primary);
	border-radius: var(--radius-full);
	transition: transform var(--duration-fast) var(--ease-spring);
}

@media (min-width: 1024px) {
	.menu-toggle {
		display: none;
	}
}

/* ハンバーガー → X 字変形（メニュー開時） */
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
 * Mobile Menu（オーバーレイ・SP/タブレット用）
 * ============================================================ */

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 90;  /* site-header(100想定)より下、back-to-top より上 */
	background:
		linear-gradient(180deg, rgba(250, 249, 247, 0.98) 0%, rgba(234, 243, 241, 0.98) 100%);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition:
		opacity    var(--duration-base) var(--ease-out-expo),
		visibility var(--duration-base) var(--ease-out-expo),
		transform  var(--duration-base) var(--ease-out-expo);
}

body.menu-open .mobile-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* デスクトップでは完全非表示 */
@media (min-width: 1024px) {
	.mobile-menu {
		display: none !important;
	}
}

/* メニュー開いている時は背景スクロールロック */
body.menu-open {
	overflow: hidden;
}

.mobile-menu__inner {
	max-width: 560px;
	margin-inline: auto;
	padding: 96px var(--space-5) var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.mobile-menu__item {
	border-bottom: 1px solid var(--color-border-subtle);
}

.mobile-menu__link,
.mobile-menu__expand {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	width: 100%;
	background: transparent;
	border: none;
	color: var(--color-text-primary);
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.mobile-menu__link:hover,
.mobile-menu__expand:hover {
	color: var(--color-brand);
}

.mobile-menu__en {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight);
}

.mobile-menu__ja {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
}

.mobile-menu__chevron {
	margin-left: auto;
	color: var(--color-text-secondary);
	transition: transform var(--duration-fast) var(--ease-out-expo);
}

.mobile-menu__expand[aria-expanded="true"] .mobile-menu__chevron {
	transform: rotate(180deg);
	color: var(--color-brand-300);
}

/* 親リンク + chevron 開閉ボタンの 2 ペイン構成
   （「事業領域」のように親ページ /services/ に飛びたい場合に使用） */
.mobile-menu__row {
	display: flex;
	align-items: stretch;
	gap: var(--space-2);
}

.mobile-menu__link--parent {
	flex: 1 1 auto;
	min-width: 0;
}

.mobile-menu__expand--icon {
	flex: 0 0 auto;
	width: 48px;
	min-height: 48px;
	padding: var(--space-3) 0;
	/* ▼を48pxタップ領域の右端に寄せ、他項目（margin-left:auto）の▼と縦位置を揃える */
	justify-content: flex-end;
	align-items: center;
}

.mobile-menu__expand--icon .mobile-menu__chevron {
	margin-left: 0;
}

.mobile-menu__sub {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--space-3) var(--space-4);
	display: none;
}

/* 旧構造：button 直下に sub */
.mobile-menu__expand[aria-expanded="true"] + .mobile-menu__sub {
	display: block;
}

/* 新構造：row 内の expand button が開かれていたら、同じ li 内の sub を開く */
.mobile-menu__item--has-children:has(.mobile-menu__expand[aria-expanded="true"]) > .mobile-menu__sub {
	display: block;
}

.mobile-menu__sub li {
	padding: 0;
}

.mobile-menu__sub a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-text-secondary);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.mobile-menu__sub a:hover {
	color: var(--color-brand-300);
}

.mobile-menu__sub-divider {
	margin-top: var(--space-3);
	padding-top: var(--space-2) !important;
	border-top: 1px solid var(--color-border-subtle);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	pointer-events: none;
}

.mobile-menu__cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

/* ============================================================
 * ヒーロー部分浮遊アニメの共通キーフレーム
 * （contact 方式：SVG 内の特定要素のみがふわふわする）
 * 各ページで .hero-decor-* クラスを SVG 内要素に付与して使用。
 * ============================================================ */
@keyframes hero-decor-float-y {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@keyframes hero-decor-float-y-slow {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@keyframes hero-decor-spark-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.18); opacity: 0.75; }
}

@keyframes hero-decor-spark-pulse-soft {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50%      { transform: scale(1.1); opacity: 1; }
}

@keyframes hero-decor-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(2px, -4px); }
}

/* ─── home MV 用に追加（2026-05-04）：呼吸／まばたき／矢印フロー／棒伸縮／背景円拍動／付箋ゆれ ─── */

/* AIキャラクター本体のゆっくりした呼吸（生きている感） */
@keyframes hero-decor-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.018); }
}

/* AIキャラクターの目のまばたき：5秒に1回・短く瞬く */
@keyframes hero-decor-blink {
	0%, 88%, 100% { transform: scaleY(1); }
	92%           { transform: scaleY(0.08); }
	96%           { transform: scaleY(1); }
}

/* 戦略付箋スタックの微小ゆれ（風で軽く揺れる程度） */
@keyframes hero-decor-sway {
	0%, 100% { transform: rotate(-0.4deg); }
	50%      { transform: rotate(0.6deg); }
}

/* 棒グラフの棒が下からのびる（成果が育つ） */
@keyframes hero-decor-bar-grow {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(1.06); }
}

/* 背景の柔らかい円が拍動（オーラのように） */
@keyframes hero-decor-bg-pulse {
	0%, 100% { transform: scale(1); opacity: 0.06; }
	50%      { transform: scale(1.04); opacity: 0.10; }
}

/* 矢印の点線が流れる（Strategy → Implement → Results の連続感） */
@keyframes hero-decor-arrow-flow {
	0%   { stroke-dashoffset: 18; }
	100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.hero-decor-float    { animation: hero-decor-float-y      4s ease-in-out infinite;        transform-origin: center; transform-box: fill-box; }
	.hero-decor-float-2  { animation: hero-decor-float-y-slow 4.6s ease-in-out 0.6s infinite; transform-origin: center; transform-box: fill-box; }
	.hero-decor-spark    { animation: hero-decor-spark-pulse  3.2s ease-in-out infinite;       transform-origin: center; transform-box: fill-box; }
	.hero-decor-spark-2  { animation: hero-decor-spark-pulse-soft 4s ease-in-out 1.2s infinite; transform-origin: center; transform-box: fill-box; }
	.hero-decor-drift    { animation: hero-decor-drift        5s ease-in-out infinite;         transform-origin: center; transform-box: fill-box; }

	/* home MV の追加アニメ（2026-05-04） */
	.hero-decor-breathe  { animation: hero-decor-breathe   4.4s ease-in-out infinite;            transform-origin: center; transform-box: fill-box; }
	.hero-decor-blink    { animation: hero-decor-blink     5s   ease-in-out 0.4s infinite;       transform-origin: center; transform-box: fill-box; }
	.hero-decor-sway     { animation: hero-decor-sway      6s   ease-in-out infinite;            transform-origin: center; transform-box: fill-box; }
	.hero-decor-bar-grow { animation: hero-decor-bar-grow  3.6s ease-in-out infinite;            transform-origin: bottom; transform-box: fill-box; }
	.hero-decor-bg-pulse { animation: hero-decor-bg-pulse  6s   ease-in-out infinite;            transform-origin: center; transform-box: fill-box; }
	.hero-decor-arrow-flow {
		stroke-dasharray: 6 12;
		animation: hero-decor-arrow-flow 1.8s linear infinite;
	}
}


.mobile-menu__cta .btn {
	width: 100%;
	justify-content: center;
}


/* ============================================================
 * Back to Top Button（右下固定）
 * ============================================================ */

.back-to-top {
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: var(--z-sticky);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-brand);
	color: var(--color-text-on-brand);
	border: 1px solid var(--color-brand-300);
	border-radius: var(--radius-sm);
	box-shadow: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity    var(--duration-base) var(--ease-out-expo),
		visibility var(--duration-base) var(--ease-out-expo),
		transform  var(--duration-fast) var(--ease-spring),
		background var(--duration-fast) var(--ease-out-expo);
}

/* SP・タブレットでも Back to Top ボタンを表示。SP は固定 CTA / メニュートグルが
   下部にある場合があるので位置を少し上げて干渉を避ける。 */
@media (min-width: 768px) {
	.back-to-top {
		bottom: 24px;
		right: 24px;
		width: 48px;
		height: 48px;
	}
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	transform: translateY(-4px);
	background: var(--color-brand-700);
}

.back-to-top:focus-visible {
	outline: 2px solid var(--color-brand-300);
	outline-offset: 4px;
}

.back-to-top svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: opacity var(--duration-base), visibility var(--duration-base);
	}
	.back-to-top:hover {
		transform: none;
	}

	/* グローバルボタンの hover transform を一括停止 */
	.btn--primary:hover,
	.btn--secondary:hover,
	.btn--ghost:hover,
	.btn--ghost:hover::after,
	.btn--accent:hover {
		transform: none !important;
	}
}


/* ============================================================
 * Section Decor（テキスト密度が高いセクションに視覚アクセント）
 * 各ページのセクションヘッダー横や、コンテンツ密度の高い箇所に
 * <span class="section-decor section-decor--a/b/c" aria-hidden="true"></span>
 * を配置して使う。背景画像として小さく装飾。
 * ============================================================ */
.section-decor {
	display: block;
	position: absolute;
	width: 96px;
	height: 96px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	/* トンマナ刷新：主張を弱めるため opacity を低減（旧5色SVGはファイル側で別途対応） */
	opacity: 0.45;
	z-index: 0;
}

.section-decor--a {
	background-image: url("../img/geo/section_decor_a.svg");
}

.section-decor--b {
	background-image: url("../img/geo/section_decor_b.svg");
}

.section-decor--c {
	background-image: url("../img/geo/section_decor_c.svg");
}

/* 配置プリセット：右上 / 左上 / 右下 / 左下 */
.section-decor--top-right    { top: -16px;    right: 0; }
.section-decor--top-left     { top: -16px;    left: 0; }
.section-decor--bottom-right { bottom: -16px; right: 0; }
.section-decor--bottom-left  { bottom: -16px; left: 0; }

/* SP（〜767px）：表示は維持しつつサイズと不透明度を最適化。
   SP では section-label / 見出しが上部左にあるため、装飾は右上のままでも
   テキストと水平に被らない。上質な装飾としての存在感を確保 */
@media (max-width: 767px) {
	.section-decor {
		width: 64px;
		height: 64px;
		opacity: 0.4;  /* トンマナ刷新：装飾の主張を弱める */
	}

	/* 余白に余裕がない SP では、上端を画面内に収め overflow を防ぐ */
	.section-decor--top-right,
	.section-decor--top-left {
		top: 4px;
	}

	.section-decor--bottom-right,
	.section-decor--bottom-left {
		bottom: 4px;
	}
}

/* トンマナ刷新（継承ルール9）：6秒の無限フロートアニメは撤去。
   装飾SVGは静的配置とし、過度なモーションを与えない */


/* ============================================================
 * Site Footer
 * ============================================================ */

.site-footer {
	position: relative;
	background:
		linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-primary) 58%, var(--color-bg-surface) 100%);
	border-top: 1px solid rgba(6, 123, 123, 0.14);
	margin-top: var(--space-9);
	color: var(--color-text-secondary);
	overflow: hidden;
	isolation: isolate;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(6, 123, 123, 0.36), transparent);
	pointer-events: none;
}

.site-footer__inner {
	padding-block: var(--space-8) var(--space-6);
}

@media (min-width: 768px) {
	.site-footer__inner {
		padding-block: var(--space-9) var(--space-6);
	}
}

@media (min-width: 1024px) {
	.site-footer__inner {
		padding-block: var(--space-10) var(--space-7);
	}
}

/* メイングリッド（4カラム） */
.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-7);
	}
}

@media (min-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
		gap: var(--space-8);
	}
}

/* 列1：ブランド */
.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.site-footer__logo {
	display: inline-block;
	line-height: 0;
	transition: opacity var(--duration-fast) var(--ease-out-expo);
}

.site-footer__logo:hover {
	opacity: 0.7;
}

.site-footer__logo img {
	height: 28px;
	width: auto;
	display: block;
}

.site-footer__tagline {
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: var(--lh-snug);
}

.site-footer__tagline-en {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-700);
}

.site-footer__tagline-ja {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
}

.site-footer__address {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: var(--lh-loose);
	font-style: normal;
}

.site-footer__address a {
	color: var(--color-text-secondary);
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.site-footer__address a:hover {
	color: var(--color-brand);
}

/* 列2-4：ナビゲーション群 */
.site-footer__nav-title {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-700);
	margin-bottom: var(--space-4);
}

.site-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__nav-list a {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	letter-spacing: var(--ls-tight);
	transition: color var(--duration-fast) var(--ease-out-expo);
	display: inline-block;
	padding-block: 4px;  /* タップ領域確保（SPでもPCでも安全） */
}

.site-footer__nav-list a:hover {
	color: var(--color-brand);
}

/* 列4：AI Lab + SNS */
.site-footer__channels {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* SNS アイコン群 */
.site-footer__sns {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.site-footer__sns-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(6, 123, 123, 0.14);
	color: var(--color-text-secondary);
	transition:
		color        var(--duration-fast) var(--ease-out-expo),
		border-color var(--duration-fast) var(--ease-out-expo),
		background   var(--duration-fast) var(--ease-out-expo),
		transform    var(--duration-fast) var(--ease-spring);
}

.site-footer__sns-icon svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.site-footer__sns-icon:hover {
	color: var(--color-text-on-brand);
	background: var(--color-brand);
	border-color: var(--color-brand);
	transform: translateY(-2px);
}

/* ──── 最下段：法的リンク + コピーライト ──── */
.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: var(--space-5);
	border-top: 1px solid rgba(6, 123, 123, 0.12);
	align-items: center;
	text-align: center;
}

@media (min-width: 768px) {
	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
}

.site-footer__legal {
	display: flex;
	gap: var(--space-5);
	flex-wrap: wrap;
	justify-content: center;
}

.site-footer__legal a {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-tight);
	transition: color var(--duration-fast) var(--ease-out-expo);
}

@media (max-width: 1023px) {
	.site-footer__nav-list a,
	.site-footer__legal a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.site-footer__sns-icon {
		width: 44px;
		height: 44px;
	}
}

.site-footer__legal a:hover {
	color: var(--color-brand);
}

.site-footer__copyright {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-wide);
}

/* ============================================================
 * ページパンくず（固定ページ用：about / services / works / contact / privacy）
 * - 他のページコンテンツと同じコンテナ幅に収める（左端を揃える）
 * - site-header（fixed 64px）分の余白を padding-top で内包
 * - 現在地は brand カラー、リンクはホバーで下線アニメ、ホームに家アイコン
 * ============================================================ */

:root {
	--breadcrumb-top-offset: calc(var(--header-height, 64px) + var(--space-3));
	--breadcrumb-bottom-gap: var(--space-1);
	--page-hero-top-offset: calc(var(--header-height, 64px) + var(--space-6));
}

@media (min-width: 1024px) {
	:root {
		--breadcrumb-top-offset: calc(var(--header-height, 64px) + var(--space-4));
		--breadcrumb-bottom-gap: var(--space-2);
		--page-hero-top-offset: calc(var(--header-height, 64px) + var(--space-6));
	}
}

/* パンくずを表示するページ：パンくずが site-header 分の余白を担うため、
   ヒーロー側の --page-hero-top-offset から header 分を取り除き、
   純粋なヒーロー上余白だけにする（ヘッダー分の重複を避ける）。 */
body.page,
body.error404 {
	--page-hero-top-offset: var(--space-4);
}

@media (min-width: 1024px) {
	body.page,
	body.error404 {
		--page-hero-top-offset: var(--space-5);
	}
}

.breadcrumb {
	/* site-header__inner と完全一致：max-width / margin / padding を揃えることで
	   ヘッダーロゴの左足のラインと breadcrumb の左端が画面上で同じ位置に来る。 */
	position: relative;
	isolation: isolate;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--space-4);
	padding-top: var(--breadcrumb-top-offset);
	padding-bottom: var(--breadcrumb-bottom-gap);
}

.breadcrumb::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: transparent;
	pointer-events: none;
}

@media (min-width: 768px) {
	.breadcrumb {
		padding-inline: var(--space-6);
	}
}

.breadcrumb__list {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
	align-items: center;
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* 各項目（リンク・最終要素・セパレータ）は意味の切れ目で改行されるよう個別に nowrap */
.breadcrumb__list > * {
	white-space: nowrap;
}

/* リンク：通常時は薄め色、ホバーで brand カラー＋下線アニメ */
.breadcrumb__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-text-secondary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
	padding-block: 2px;
}

.breadcrumb__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.25s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

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

.breadcrumb__list a:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* ホーム（最初のリンク）には家アイコン */
.breadcrumb__list li:first-child a::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12 12 3l9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12 12 3l9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>") center/contain no-repeat;
	display: inline-block;
	flex-shrink: 0;
}

/* セパレータ：chevron 風の SVG マスク（HTML 内の "›" 文字は font-size:0 で非表示にし、::before で SVG を描画） */
.breadcrumb__sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	color: var(--color-brand);
	opacity: 0.55;
	font-size: 0;
}

.breadcrumb__sep::before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
}

/* 現在地（最終要素）は brand カラー＋太字 */
.breadcrumb__list [aria-current="page"] {
	color: var(--color-brand);
	font-weight: 700;
	/* 最終要素（ページ名）は長文時に折返しを許可 */
	white-space: normal;
	word-break: break-word;
}


/* ============================================================
 * Contact Form 7（メイン /contact/ ＋ LP群）共通スタイル
 *
 * - CF7 が出力するラジオ・同意チェック・送信ボタンを、
 *   preview の `.contact-form__topic-option` 等のカード型に揃える。
 * - 各ページ専用 CSS（contact.css / lp-*.css）の上書きを許容するため
 *   `components.css` に共通スタイルとして配置。
 * - JS（functions.php の coletlab_cf7_radio_descs）で <label> に
 *   `.contact-form__topic-option` クラスを付与し、desc を挿入する。
 * ============================================================ */

/* ─── ラジオ：preview 構造に揃える DOM 透過 + grid ─── */

/* CF7 出力時：外側 .contact-form__topic-options の grid を解除して、
   内側 .wpcf7-radio を grid container にする */
.contact-form__topic-options:has(.wpcf7-radio) {
	display: block;
}

.contact-form__topic-options .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.contact-form__topic-options .wpcf7-radio {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	width: 100%;
}

@media (min-width: 768px) {
	.contact-form__topic-options .wpcf7-radio {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* grid item を flex で stretch して、内部の label が grid セル全高を占めるように */
.contact-form__topic-options .wpcf7-list-item {
	margin: 0;
	display: flex;
	align-items: stretch;
}

/* JS で `.contact-form__topic-option` クラスが付くカード型 label を全高化 + flex 化 */
.contact-form__topic-options .wpcf7-list-item > label {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	min-height: 60px;
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		border-color var(--duration-fast) var(--ease-out-expo),
		background   var(--duration-fast) var(--ease-out-expo);
}

.contact-form__topic-options .wpcf7-list-item > label:hover {
	border-color: var(--color-border-strong);
}

@media (hover: none) {
	.contact-form__topic-options .wpcf7-list-item > label:hover {
		border-color: var(--color-border-default);
	}
}

/* カスタムラジオドット（::before）。preview の `.contact-form__topic-option::before` と同等 */
.contact-form__topic-options .wpcf7-list-item > label::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 2px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	background: var(--color-bg-primary);
	transition:
		border-color var(--duration-fast) var(--ease-out-expo),
		box-shadow   var(--duration-fast) var(--ease-out-expo);
}

/* 選択状態：枠＋背景＋ドット内側 */
.contact-form__topic-options .wpcf7-list-item > label:has(input[type="radio"]:checked) {
	border-color: var(--color-brand);
	background: var(--color-glass-brand);
}

.contact-form__topic-options .wpcf7-list-item > label:has(input[type="radio"]:checked)::before {
	border-color: var(--color-brand);
	box-shadow: inset 0 0 0 5px var(--color-brand);
}

/* キーボードフォーカス */
.contact-form__topic-options .wpcf7-list-item > label:focus-within {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(6, 123, 123, 0.15);
	outline: none;
}

/* CF7 出力の input は a11y 用に隠す */
.contact-form__topic-options .wpcf7-list-item input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* タイトル要素：JS で .contact-form__topic-option-title を併用付与済み */
.contact-form__topic-options .wpcf7-list-item-label {
	display: block;
}


/* ─── 同意チェック（[acceptance]）─── */
.contact-form__field--consent .wpcf7-acceptance,
.contact-form__field--consent .wpcf7-form-control-wrap {
	display: block;
}

.contact-form__field--consent .wpcf7-list-item {
	margin: 0;
	display: block;
}

.contact-form__field--consent .wpcf7-list-item > label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	cursor: pointer;
	font-size: var(--fs-base);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
}

.contact-form__field--consent .wpcf7-list-item > label input[type="checkbox"] {
	margin-top: 4px;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--color-brand);
}

.contact-form__field--consent .wpcf7-list-item-label a {
	color: var(--color-brand);
	text-decoration: underline;
}


/* ─── 送信ボタン群（CF7 add Confirm の [confirm][back][submit]）
   <input type="submit"> / <input type="button"> として出力されるため、
   appearance を解除して `.btn` のスタイルを正しく適用する。 ─── */

.contact-form__submit {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	margin-top: var(--space-5);
}

.contact-form__submit input[type="submit"],
.contact-form__submit input[type="button"] {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	cursor: pointer;
}

/* `.btn` クラスが付いた input はそのまま `.btn` の見た目を継承させる。
   `.btn` 側の box-shadow / border / background / color 等が input にも当たる。
   念のため input 固有のリセットを補強。 */
.contact-form__submit input.btn {
	background-clip: padding-box;
	text-transform: none;
	letter-spacing: var(--ls-tight);
}

.contact-form__submit input.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* CF7 add Confirm 用の hidden 制御を上書き：force-hide で確認/送信を切り替えるが、
   .btn の display: inline-flex を維持しつつ visibility 切り替え */
.contact-form__submit input.wpcf7c-force-hide {
	display: none;
}


/* ─── CF7 add Confirm 関連のメッセージ ─── */

.wpcf7-confirm-message {
	background: var(--color-glass-brand);
	border-left: 3px solid var(--color-brand);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-4);
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
}

.wpcf7-response-output {
	margin: var(--space-4) 0 !important;
	padding: var(--space-3) var(--space-4) !important;
	border: 1px solid var(--color-border-default) !important;
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--color-brand) !important;
	background: var(--color-glass-brand);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--color-accent-empathy) !important;
	background: rgba(231, 111, 142, 0.08);
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--fs-sm);
	color: var(--color-accent-empathy);
}

.wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--color-accent-empathy) !important;
}

/* ============================================================
 * Paged（2ページ目以降）共通：ヘッダー被り防止
 * ============================================================
 * memory: wp_archive_pagination_rules_2026-05-04
 * 2ページ目以降は Hero / Bento の導入部を is_paged() で非表示にしているため、
 * main 直下の最初の要素がヘッダー（fixed）に埋もれてしまう。
 * body.paged のときだけ main に上部余白を確保する。
 * Hero がある 1 ページ目には影響しない（body.paged が付かないため）。
 */
body.paged main {
	padding-top: calc(var(--header-height, 64px) + var(--space-5));
}

@media (min-width: 1024px) {
	body.paged main {
		padding-top: calc(var(--header-height, 64px) + var(--space-6));
	}
}


/* ════════════════════════════════════════════════════════════
 * 外部リンク / 別タブリンクのアイコン（全ページ共通・2026-06-01）
 *   target="_blank" のテキストリンクに ↗ を付与し「サイト外／別タブで開く」を明示する。
 *   ボタン(.btn)・SNSアイコン・シェアボタン・カード/バナー/セル・LINE CTA など、
 *   既にアイコンや独自体裁を持つものは class 部分一致で除外（二重表示を防ぐ）。
 *   個別に出したくない場合は <a> に .no-ext-icon を付ける。
 *   アイコンは currentColor のマスクなので、リンク色（ライト/ダーク/ホバー）に自動追従。
 * ════════════════════════════════════════════════════════════ */
a[target="_blank"]:not(.no-ext-icon):not([class*="btn"]):not([class*="card"]):not([class*="banner"]):not([class*="cell"]):not([class*="sns"]):not([class*="cta"]):not([class*="share"]):not([class*="--line"])::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.22em;
	vertical-align: -0.04em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5'/%3E%3Cpath d='M6.4 5H11v4.6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5'/%3E%3Cpath d='M6.4 5H11v4.6'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.7;
}

/* ────────────────────────────────────────────────
 * section-spark：editorial採番を維持したまま、セクション右上に点で添える軽い装飾。
 *   撤去済みの機械的 section-decor は復活させず、現行パレット（ティール＋くすみ）で新規。
 *   面は作らず、コンテンツに重ならない右上コーナーへ控えめに置く（2026-06-02）。
 * ──────────────────────────────────────────────── */
.section-spark {
	position: absolute;
	top: var(--space-6);
	right: var(--space-5);
	width: 40px;
	height: 40px;
	opacity: 0.85;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}
@media (max-width: 767px) {
	.section-spark {
		width: 30px;
		height: 30px;
		top: var(--space-5);
		right: var(--space-4);
	}
}