/*
Theme Name: Site Kobo Maxine
Theme URI: https://github.com/key-dev/wp-production-base
Author: key_dev
Author URI: https://github.com/key-dev
Description: サイト工房マクシーン ローカルWP向けブロックテーマ。Caldera(Refero)ベースの独自デザインシステム v0.6.0（ブログ基盤を実装: 一覧・カテゴリ・記事テンプレート、パンくず、目次、関連記事、記事下CTA、記事の構造化データとアイキャッチOGP）。
Version: 0.7.4
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: own-inbound-site
Tags: full-site-editing, block-theme
*/

/* ==============================================
 * Caldera Design System Tokens（サイト工房マクシーン）
 * 参照: design-lab/maxine/tokens.css
 * ============================================== */

:root {
	/* 2026-07-29 の配色見直し。ベージュ地（#e8e1d3）が画面の4割を占めて全体が
	   沈んでいたため、背景をほぼ白まで明るくしてコントラストを上げた。
	   本文色は温かみのある黒（#1c1613）から寒色寄りの Ink Teal へ振り、
	   コーラルが CTA だけで効く構造にしている（コーラル自体は据え置き）。 */
	--maxine-ember: #e76f51;
	--maxine-plasma: #264653;
	--maxine-sulfur: #f6e8b1;
	--maxine-limestone: #ffffff;
	--maxine-pumice: #faf8f4;
	--maxine-obsidian: #1d3a44;
	--maxine-chalk: #ffffff;
	--maxine-warmgray: #5c574f;

	/* 派生色。もとは assets/css/maxine.css の --mx-* 側だけに直値で置かれていて、
	   同じ役割の色が2箇所で別名管理になっていた（2026-07-29 に正本をこちらへ寄せた）。
	   --maxine-text-sub は補助テキストで --maxine-warmgray と役割が重複していたため、
	   配色見直しのタイミングで warmgray の値へ統合した（旧 #7a736a は薄すぎた）。 */
	--maxine-obsidian-deep: #122730;
	--maxine-ember-deep: #c85a3f;
	--maxine-hairline: #e8e2d6;
	--maxine-text-sub: var(--maxine-warmgray);

	--maxine-font-display-en: 'Bebas Neue', 'Anton', ui-sans-serif, sans-serif;
	--maxine-font-display-jp: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
	--maxine-font-body: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;

	--maxine-radius-cards: 40px;
	--maxine-radius-buttons: 40px;
	--maxine-radius-pills: 800px;
	--maxine-radius-inputs: 100px;

	--maxine-space-16: 16px;
	--maxine-space-24: 24px;
	--maxine-space-32: 32px;
	--maxine-space-40: 40px;
	--maxine-space-56: 56px;
	--maxine-space-64: 64px;
	--maxine-space-80: 80px;
}

/* ==============================================
 * 基盤
 * ============================================== */

body {
	background: var(--maxine-pumice);
	color: var(--maxine-obsidian);
	font-family: var(--maxine-font-body);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
}

/* ==============================================
 * 主要コンポーネント（CTA / Nav / Card / Tag 他）
 * ============================================== */

/* Primary CTA — Ember filled pill */
.maxine-cta-primary,
a.maxine-cta-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--maxine-ember);
	color: var(--maxine-chalk);
	border: none;
	border-radius: var(--maxine-radius-pills);
	padding: 14px 28px;
	font-family: var(--maxine-font-body);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease;
}
.maxine-cta-primary:hover { transform: translateY(-1px); color: var(--maxine-chalk); }
.maxine-cta-primary--lg { padding: 18px 36px; font-size: 18px; }

/* Secondary Pill — dashed outline */
.maxine-cta-secondary,
a.maxine-cta-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--maxine-obsidian);
	border: 1.5px dashed var(--maxine-obsidian);
	border-radius: var(--maxine-radius-buttons);
	padding: 14px 28px;
	font-family: var(--maxine-font-body);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
}
.maxine-cta-secondary:hover { color: var(--maxine-obsidian); }

/* Ghost link (nav) */
.maxine-link-ghost,
a.maxine-link-ghost {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: var(--maxine-obsidian);
	border: none;
	border-radius: var(--maxine-radius-pills);
	padding: 6px 14px;
	font-family: var(--maxine-font-body);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
}

/* Nav container — Limestone pill */
.maxine-nav-container {
	background: var(--maxine-limestone);
	border-radius: var(--maxine-radius-pills);
	padding: 8px 12px 8px 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.maxine-nav-inline { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Brand mark（マウンテンアイコン） */
.maxine-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--maxine-obsidian);
	text-decoration: none;
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 20px;
}
.maxine-brand:hover { color: var(--maxine-obsidian); }
.maxine-brand-mark {
	width: 28px; height: 28px;
	background: var(--maxine-ember);
	clip-path: polygon(50% 15%, 100% 85%, 0% 85%);
	flex-shrink: 0;
}

/* Halftone hero — orange dots on violet→ember gradient */
.maxine-halftone {
	border-radius: var(--maxine-radius-cards);
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(circle, var(--maxine-ember) 22%, transparent 23%) 0 0 / 14px 14px,
		linear-gradient(135deg, var(--maxine-plasma) 0%, var(--maxine-ember) 100%);
}

/* Stat feature card — Ember bg */
.maxine-stat-card {
	background: var(--maxine-ember);
	color: var(--maxine-chalk);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-40);
	display: flex;
	flex-direction: column;
	gap: var(--maxine-space-16);
}
.maxine-stat-card__label {
	font-family: var(--maxine-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
}
.maxine-stat-card__value {
	font-family: var(--maxine-font-display-en);
	font-weight: 400;
	font-size: 64px;
	line-height: 1;
	letter-spacing: 0.02em;
}
.maxine-stat-card__value .unit {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 24px;
	margin-left: 4px;
	letter-spacing: 0;
}

/* Content / Work card — Limestone */
.maxine-work-card {
	background: var(--maxine-limestone);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-32);
	display: flex;
	flex-direction: column;
	gap: var(--maxine-space-16);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease;
}
.maxine-work-card:hover { transform: translateY(-4px); color: inherit; }
.maxine-work-card__thumb {
	/* サムネ実寸は 1920×約1200（≒16:10）。4:3 で切ると左右が各 8% ほど落ち、
	   モックのキャッチ左端（「数字のことは任せて」等）が欠ける。撮影比に合わせる。 */
	aspect-ratio: 16 / 10;
	border-radius: 20px;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
.maxine-work-card__title {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 20px;
	line-height: 1.4;
	margin: 0;
}
.maxine-work-card__sample {
	font-size: 14px;
	color: var(--maxine-obsidian);
	opacity: 0.7;
	margin: -8px 0 0;
}
.maxine-work-card__desc {
	font-size: 14px;
	color: var(--maxine-obsidian);
	opacity: 0.85;
	margin: 0;
	line-height: 1.6;
}

/* Category tag — Sulfur pill */
.maxine-tag {
	display: inline-flex;
	align-items: center;
	background: var(--maxine-sulfur);
	color: var(--maxine-obsidian);
	border-radius: var(--maxine-radius-pills);
	padding: 4px 12px;
	font-family: var(--maxine-font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.05em;
	width: fit-content;
}

/* Flow step */
.maxine-flow-step {
	background: var(--maxine-limestone);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-32);
}
.maxine-flow-step__num {
	font-family: var(--maxine-font-display-en);
	font-weight: 400;
	font-size: 48px;
	line-height: 1;
	color: var(--maxine-ember);
	margin-bottom: var(--maxine-space-16);
}
.maxine-flow-step__title {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 18px;
	margin: 0 0 8px;
	line-height: 1.4;
}
.maxine-flow-step__desc {
	font-size: 14px;
	margin: 0;
	color: var(--maxine-obsidian);
	opacity: 0.85;
	line-height: 1.6;
}

/* FAQ */
.maxine-faq-item {
	padding: var(--maxine-space-24) 0;
	border-top: 1.5px dotted var(--maxine-obsidian);
}
.maxine-faq-item__q {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 18px;
	margin: 0 0 8px;
	line-height: 1.4;
	display: flex;
	gap: 8px;
	align-items: baseline;
}
.maxine-faq-item__q::before {
	content: "Q.";
	color: var(--maxine-ember);
	font-family: var(--maxine-font-display-en);
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
}
.maxine-faq-item__a {
	font-size: 14px;
	margin: 0;
	color: var(--maxine-obsidian);
	opacity: 0.85;
	line-height: 1.7;
}

/* Halftone canvas section wrapper */
.maxine-halftone-section {
	background: var(--maxine-pumice);
	background-image: radial-gradient(circle, rgba(28,22,19,0.08) 12%, transparent 13%);
	background-size: 20px 20px;
	border-radius: var(--maxine-radius-cards);
	/* 内側 64px だとカード左端が 108px になり、他セクション（44px）と縦のラインが揃わない。
	   パネルの囲み感は残しつつ差を詰める。 */
	padding: var(--maxine-space-80) var(--maxine-space-40);
	margin: var(--maxine-space-80) 0;
}

/* Footer big CTA — Ember block */
.maxine-footer-cta {
	background: var(--maxine-ember);
	color: var(--maxine-chalk);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-56) var(--maxine-space-64);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--maxine-space-32);
	flex-wrap: wrap;
	margin: var(--maxine-space-80) 0;
}
.maxine-footer-cta h2 {
	color: var(--maxine-chalk);
	margin: 0;
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 36px;
	line-height: 1.3;
	flex: 1 1 auto;
	white-space: nowrap;
}
.maxine-footer-cta .maxine-cta-primary {
	background: var(--maxine-obsidian);
	color: var(--maxine-chalk);
}

/* Dotted divider */
.maxine-divider-v {
	width: 0;
	align-self: stretch;
	border-left: 1.5px dotted var(--maxine-obsidian);
	height: 20px;
	margin: 0 4px;
}

/* Hero */
.maxine-hero {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--maxine-space-56);
	align-items: center;
	padding: var(--maxine-space-56) 0 var(--maxine-space-80);
}
/* Hero — 全面タイポ版（v0.3.6：左右キャラ + 背景アニメ） */
.maxine-hero-section--typo .maxine-hero-canvas { display: none; }
.maxine-hero-section--typo .maxine-hero-ghost { display: none; }
.maxine-hero--typo {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 20px 0 16px;
	grid-template-columns: none;
	position: relative;
	z-index: 2;
}
/* 静岡らしさ SVG シルエット（富士山+茶畑+雲） */
.mx-shizuoka {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.9;
}

/* sticky ヘッダーの下にアンカー先が潜らないようにする */
#faq, #works { scroll-margin-top: 110px; }

/* Sticky ヘッダー */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(232, 225, 211, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
header.wp-block-template-part .mx-site-header {
	transition: padding 0.25s ease;
}
/* stage-row: タイポ画像を中心にした relative container、マスコットは absolute で絡ませる */
.maxine-hero__stage-row {
	position: relative;
	display: block;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}
.maxine-hero__stage-center {
	position: relative;
	display: block;
	width: 100%;
	max-width: 640px;
}
.mx-mascot-side, .mx-mascot-center {
	position: absolute;
	object-fit: contain;
	filter: drop-shadow(0 12px 20px rgba(28, 22, 19, 0.16));
	will-change: transform;
	z-index: 3;
	pointer-events: none;
}
/* フジさん: タイポ画像の左下（左辺に絡む） */
.mx-mascot-side--left {
	width: 150px;
	height: auto;
	left: -70px;
	bottom: -18px;
	animation: mx-sway 6s ease-in-out infinite;
	transform-origin: 50% 90%;
}
/* コウちゃん: タイポ画像の右下（右辺に絡む） */
.mx-mascot-side--right {
	width: 150px;
	height: auto;
	right: -70px;
	bottom: -18px;
	animation: mx-bounce 3.6s ease-in-out infinite;
}
/* マクシーン: タイポ画像の右上（斜め上に飛び出す） */
.mx-mascot-center {
	width: 110px;
	height: auto;
	top: -50px;
	right: -30px;
	animation: mx-float-main 4.5s ease-in-out infinite;
}

/* 背景アニメ層 — blob drift + wave + floating dots */
.mx-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.mx-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
	will-change: transform;
}
.mx-blob--a { top: -12%; left: -6%; width: 480px; height: 480px; background: rgba(231, 111, 81, 0.5); animation: mx-blob-drift-a 20s ease-in-out infinite; }
.mx-blob--b { bottom: -14%; right: -8%; width: 420px; height: 420px; background: rgba(246, 195, 65, 0.55); animation: mx-blob-drift-b 24s ease-in-out infinite; }
.mx-blob--c { top: 35%; left: 45%; width: 360px; height: 360px; background: rgba(231, 111, 81, 0.25); animation: mx-blob-drift-c 28s ease-in-out infinite; }
@keyframes mx-blob-drift-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(80px, 40px) scale(1.08); }
	66% { transform: translate(-40px, 80px) scale(0.95); }
}
@keyframes mx-blob-drift-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-70px, -60px) scale(1.1); }
}
@keyframes mx-blob-drift-c {
	0%, 100% { transform: translate(-50%, -50%) scale(1); left: 45%; top: 35%; }
	50% { transform: translate(-50%, -50%) scale(1.15); left: 55%; top: 50%; }
}
.mx-wave {
	position: absolute;
	width: 60%;
	height: 40px;
	opacity: 0.6;
	will-change: transform;
}
.mx-wave--a { top: 22%; left: -10%; animation: mx-wave-drift 16s linear infinite; }
.mx-wave--b { bottom: 20%; right: -10%; animation: mx-wave-drift 22s linear infinite reverse; }
@keyframes mx-wave-drift {
	from { transform: translateX(0); }
	to { transform: translateX(30%); }
}
.mx-dot {
	position: absolute;
	border-radius: 50%;
	background: rgba(231, 111, 81, 0.45);
	will-change: transform;
}
.mx-dot--1 { width: 10px; height: 10px; top: 18%; left: 12%; animation: mx-dot-drift 8s ease-in-out infinite; }
.mx-dot--2 { width: 6px; height: 6px; top: 68%; left: 18%; background: rgba(246,195,65,0.6); animation: mx-dot-drift 10s ease-in-out infinite 1s; }
.mx-dot--3 { width: 12px; height: 12px; top: 30%; right: 14%; animation: mx-dot-drift 7s ease-in-out infinite 2s; }
.mx-dot--4 { width: 8px; height: 8px; bottom: 22%; right: 22%; background: rgba(246,195,65,0.55); animation: mx-dot-drift 9s ease-in-out infinite 1.5s; }
.mx-dot--5 { width: 5px; height: 5px; top: 50%; left: 8%; animation: mx-dot-drift 11s ease-in-out infinite 3s; }
.mx-dot--6 { width: 7px; height: 7px; top: 12%; right: 40%; animation: mx-dot-drift 12s ease-in-out infinite 2.5s; }
@keyframes mx-dot-drift {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(20px, -30px); }
}
@media (prefers-reduced-motion: reduce) {
	.mx-blob, .mx-wave, .mx-dot { animation: none !important; }
}
.maxine-hero--typo .maxine-hero__label { margin-bottom: 0; }
.maxine-hero__title--typo {
	margin: 0;
	max-width: 640px;
	width: 100%;
	line-height: 0;
}
.maxine-hero__title--typo img.mx-hero-typo {
	display: block;
	width: 100%;
	height: auto;
	max-width: 640px;
	margin: 0 auto;
	opacity: 0;
	transform: translateY(24px) scale(0.94);
	animation: mx-typo-intro 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards, mx-typo-float 6.5s ease-in-out 1.4s infinite;
	will-change: transform, opacity;
}
@keyframes mx-typo-intro {
	from { opacity: 0; transform: translateY(28px) scale(0.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mx-typo-float {
	0%, 100% { transform: translateY(0) rotate(-0.4deg); }
	50% { transform: translateY(-8px) rotate(0.4deg); }
}
.maxine-hero--typo .maxine-hero__lead {
	max-width: 640px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.85;
	/* 旧 maxine.css の .mx-hero-lead が #7a736a を当てており、Pumice 背景 + 富士山
	   シルエットの上でコントラスト 3.3:1 まで落ちていた。価格・納期を伝える主要文なので
	   Warmgray (#5c574f・約5.2:1) まで濃くして AA を確保する。 */
	color: var(--maxine-warmgray);
	font-weight: 500;
	/* 旧 .mx-hero-lead の word-break:keep-all で狭幅時に親幅を超えていた */
	max-width: min(640px, 100%);
	word-break: normal;
	overflow-wrap: anywhere;
}
.maxine-hero--typo .maxine-hero__actions {
	justify-content: center;
	margin-top: 8px;
}
.maxine-hero__mascots {
	display: flex;
	gap: 32px;
	align-items: flex-end;
	justify-content: center;
	margin-top: 20px;
}
.mx-mascot-small {
	width: 140px;
	height: 140px;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(28, 22, 19, 0.14));
	will-change: transform;
}
.mx-mascot-small--main {
	width: 180px;
	height: 180px;
	filter: drop-shadow(0 16px 24px rgba(28, 22, 19, 0.18));
	animation: mx-float-main 4.5s ease-in-out infinite;
}
.mx-mascot-small--left {
	animation: mx-sway 6s ease-in-out infinite;
	transform-origin: 50% 90%;
}
.mx-mascot-small--right {
	animation: mx-bounce 3.6s ease-in-out infinite;
}

/* Hero 周辺装飾 (typo版) */
.mx-hero-deco {
	position: absolute;
	width: 32px;
	height: 32px;
	z-index: 1;
	opacity: 0.9;
	animation: mx-spark-twinkle 2.6s ease-in-out infinite;
}
.mx-hero-deco--tl { top: 60px; left: 6vw; animation-delay: 0s; }
.mx-hero-deco--tr { top: 100px; right: 8vw; width: 24px; height: 24px; animation-delay: 0.8s; }
.mx-hero-deco--bl { bottom: 140px; left: 10vw; width: 22px; height: 22px; animation-delay: 1.4s; }
.maxine-hero__title { margin: 0 0 var(--maxine-space-24); }
.maxine-hero__title .en {
	display: block;
	font-family: var(--maxine-font-display-en);
	font-weight: 400;
	font-size: 96px;
	line-height: 1;
	letter-spacing: 0.03em;
	margin-bottom: 12px;
	color: var(--maxine-obsidian);
}
.maxine-hero__title .jp {
	display: block;
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 52px;
	line-height: 1.15;
	letter-spacing: 0.005em;
	color: var(--maxine-obsidian);
	white-space: nowrap;
}
/* Hero title v2 —「静岡から全国へ / もっと気軽にサイト制作を」 */
.maxine-hero__title--v2 .jp-lead {
	display: inline-block;
	font-family: var(--maxine-font-display-jp);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--maxine-ember);
	background: rgba(231, 111, 81, 0.08);
	padding: 4px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}
.maxine-hero__title--v2 .jp-main {
	display: block;
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 58px;
	line-height: 1.18;
	letter-spacing: 0.005em;
	color: var(--maxine-obsidian);
	white-space: normal;
}
.maxine-hero__title--v2 .jp-main-row { display: block; white-space: nowrap; }

/* Hero title — GPT生成タイポグラフィ画像版 */
.maxine-hero__title--img {
	margin: 0 0 var(--maxine-space-24);
	max-width: 640px;
}
.maxine-hero__title--img img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 640px;
}
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.maxine-hero__lead {
	max-width: 620px;
	margin: 0 0 var(--maxine-space-32);
	font-size: 16px;
	line-height: 1.75;
}
.maxine-hero__actions { display: flex; gap: var(--maxine-space-16); flex-wrap: wrap; }

/* Section intro */
.maxine-section-intro {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--maxine-space-32);
	margin-bottom: var(--maxine-space-40);
	flex-wrap: wrap;
}

/* Grid utilities */
.maxine-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--maxine-space-16); }
.maxine-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--maxine-space-24); }
.maxine-works-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--maxine-space-64);
	align-items: end;
	margin-bottom: var(--maxine-space-40);
}
.maxine-works-intro--stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--maxine-space-24);
	margin-bottom: var(--maxine-space-56);
}
.maxine-works-intro__sub {
	font-size: 17px;
	line-height: 1.85;
	margin: 0;
	max-width: 640px;
	color: var(--maxine-obsidian);
}
.maxine-works-intro__cta { margin-top: var(--maxine-space-16); }
.maxine-flow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--maxine-space-24); }
.maxine-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--maxine-space-32); }

.maxine-h-2xl--nowrap { white-space: nowrap; }

/* Display heading utility */
.maxine-h-2xl {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 56px;
	line-height: 1.15;
	letter-spacing: 0.005em;
	margin: 0;
}
.maxine-h-lg {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: 0.005em;
	margin: 0;
}

/* Hero stage — マスコット舞台 */
.maxine-hero__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 560px;
	margin-left: auto;
}
.mx-stage-blob {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	animation: mx-blob-morph 12s ease-in-out infinite;
	transform-origin: center;
}
@keyframes mx-blob-morph {
	0%, 100% { transform: scale(1) rotate(0deg); }
	33% { transform: scale(1.05) rotate(4deg); }
	66% { transform: scale(0.98) rotate(-3deg); }
}
.mx-mascot { position: absolute; user-select: none; pointer-events: none; will-change: transform; }
.mx-mascot--main {
	top: 22%; left: 50%; transform: translateX(-50%);
	width: 62%; max-width: 320px; height: auto;
	z-index: 3;
	filter: drop-shadow(0 20px 32px rgba(28, 22, 19, 0.18));
	animation: mx-float-main 4.5s ease-in-out infinite;
}
.mx-mascot--sub-left {
	top: 42%; left: 2%;
	width: 34%; max-width: 200px; height: auto;
	z-index: 2;
	filter: drop-shadow(0 12px 20px rgba(28, 22, 19, 0.14));
	animation: mx-sway 6s ease-in-out infinite;
	transform-origin: 50% 90%;
}
.mx-mascot--sub-right {
	top: 55%; right: 2%;
	width: 34%; max-width: 200px; height: auto;
	z-index: 2;
	filter: drop-shadow(0 12px 20px rgba(28, 22, 19, 0.14));
	animation: mx-bounce 3.6s ease-in-out infinite;
}
@keyframes mx-float-main {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, -12px); }
}
@keyframes mx-sway {
	0%, 100% { transform: rotate(-4deg); }
	50% { transform: rotate(4deg); }
}
@keyframes mx-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

.mx-bubble {
	position: absolute;
	background: #fff;
	border: 2px solid var(--maxine-ember);
	color: var(--maxine-ember);
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 16px;
	padding: 8px 16px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 6px 14px rgba(28, 22, 19, 0.12);
	z-index: 5;
	animation: mx-bubble-pop 4s ease-in-out infinite;
}
.mx-bubble::after {
	content: "";
	position: absolute;
	width: 12px; height: 12px;
	background: #fff;
	border-right: 2px solid var(--maxine-ember);
	border-bottom: 2px solid var(--maxine-ember);
	transform: rotate(45deg);
}
.mx-bubble--a { top: 8%; left: 6%; animation-delay: 0s; }
.mx-bubble--a::after { bottom: -8px; left: 22px; }
.mx-bubble--b { top: 6%; right: 4%; animation-delay: 0.6s; }
.mx-bubble--b::after { bottom: -8px; right: 22px; }
.mx-bubble--c { bottom: 12%; left: 50%; transform: translateX(-50%); animation-delay: 1.2s; }
.mx-bubble--c::after { top: -8px; left: 50%; transform: translateX(-50%) rotate(-135deg); background: #fff; border-right: none; border-bottom: none; border-left: 2px solid var(--maxine-ember); border-top: 2px solid var(--maxine-ember); }
@keyframes mx-bubble-pop {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-6px) scale(1.04); }
}
.mx-bubble--c { animation-name: mx-bubble-pop-c; }
@keyframes mx-bubble-pop-c {
	0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
	50% { transform: translateX(-50%) translateY(-6px) scale(1.04); }
}

.mx-spark { position: absolute; width: 28px; height: 28px; z-index: 4; opacity: 0.85; animation: mx-spark-twinkle 2.4s ease-in-out infinite; }
.mx-spark--a { top: 30%; right: 12%; animation-delay: 0s; }
.mx-spark--b { top: 60%; left: 8%; width: 20px; height: 20px; animation-delay: 0.7s; }
.mx-spark--c { top: 18%; left: 40%; width: 24px; height: 24px; animation-delay: 1.4s; }
@keyframes mx-spark-twinkle {
	0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.3; }
	50% { transform: scale(1.1) rotate(180deg); opacity: 0.95; }
}

.mx-stage-dot { position: absolute; border-radius: 50%; background: rgba(231, 111, 81, 0.22); z-index: 1; }
.mx-stage-dot--a { width: 10px; height: 10px; top: 20%; right: 20%; animation: mx-dot-float 5s ease-in-out infinite; }
.mx-stage-dot--b { width: 6px; height: 6px; top: 70%; left: 20%; animation: mx-dot-float 6s ease-in-out infinite reverse; }
.mx-stage-dot--c { width: 14px; height: 14px; top: 78%; right: 24%; background: rgba(246,195,65,0.35); animation: mx-dot-float 7s ease-in-out infinite; }
@keyframes mx-dot-float {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(8px, -12px); }
}

@media (prefers-reduced-motion: reduce) {
	.mx-mascot, .mx-bubble, .mx-spark, .mx-stage-dot, .mx-stage-blob { animation: none !important; }
}

/* Responsive */
@media (max-width: 960px) {
	.maxine-hero { grid-template-columns: 1fr; }
	.maxine-hero__title .en { font-size: 64px; }
	.maxine-hero__title .jp { font-size: 30px; white-space: nowrap; }
	.maxine-hero__title--v2 .jp-lead { font-size: 18px; padding: 3px 12px; margin-bottom: 12px; }
	.maxine-hero__title--v2 .jp-main { font-size: 34px; }
	.maxine-hero__stage { max-width: 360px; margin: 0 auto; }
	.mx-bubble { font-size: 13px; padding: 6px 12px; }
	.maxine-hero--typo { padding: 32px 0 72px; gap: 20px; }
	.maxine-hero__title--typo { max-width: 100%; }
	.maxine-hero__mascots { gap: 12px; margin-top: 12px; }
	.mx-mascot-small { width: 88px; height: 88px; }
	.mx-mascot-small--main { width: 112px; height: 112px; }
	/* SP: マスコット絶対配置を SP サイズに縮小、はみ出しを内側に寄せる */
	.maxine-hero__stage-row { max-width: 100%; }
	.maxine-hero__stage-center { max-width: 100%; }
	.mx-mascot-side--left { width: 80px; left: -8px; bottom: -12px; }
	.mx-mascot-side--right { width: 80px; right: -8px; bottom: -12px; }
	.mx-mascot-center { width: 64px; top: -20px; right: -4px; }
	.mx-blob--a { width: 280px; height: 280px; }
	.mx-blob--b { width: 240px; height: 240px; }
	.mx-blob--c { width: 220px; height: 220px; }
	.mx-wave { width: 80%; height: 30px; }
	.mx-hero-deco--tl { top: 40px; left: 4vw; width: 22px; height: 22px; }
	.mx-hero-deco--tr { top: 60px; right: 4vw; width: 18px; height: 18px; }
	.mx-hero-deco--bl { bottom: 100px; left: 4vw; width: 16px; height: 16px; }
	.maxine-stat-row { grid-template-columns: repeat(2, 1fr); }
	.maxine-works-grid { grid-template-columns: 1fr; }
	.maxine-flow-steps { grid-template-columns: repeat(2, 1fr); }
	.maxine-faq-grid { grid-template-columns: 1fr; }
	.maxine-pricing-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
	.maxine-halftone-section { padding: var(--maxine-space-40) var(--maxine-space-24); }
	/* SP の文字サイズは vw 連動にする。固定 px + 固定 <br> だと 390px に合わせた改行が
	   360px / 320px で 1〜2 文字のぶら下がりに化けるため（幅ごとに 1 行の文字数が変わる）。
	   上限は PC 相当、下限はタイポ正本のフォント床 12px。 */
	.maxine-hero--typo .maxine-hero__lead { font-size: clamp(13px, 4vw, 17px); }
	.maxine-works-intro .maxine-h-2xl { font-size: clamp(23px, 7.6vw, 30px); }
	.maxine-works-intro__sub { font-size: clamp(13px, 4.3vw, 17px); }
	.maxine-footer-cta__note { font-size: clamp(12px, 3.8vw, 15px); }
	.maxine-works-intro { grid-template-columns: 1fr; gap: var(--maxine-space-24); }
	.maxine-footer-cta { padding: var(--maxine-space-40) var(--maxine-space-24); }
	.maxine-footer-cta h2 { font-size: clamp(19px, 6.6vw, 32px); white-space: normal; }
	.maxine-stat-card { padding: 24px; }
	.maxine-stat-card__label { white-space: nowrap; }
	.maxine-stat-card__value { font-size: 44px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
	.maxine-stat-card__value .unit { white-space: nowrap; font-size: 20px; margin-left: 0; }
	.maxine-h-2xl { font-size: 30px; }
	.maxine-h-2xl--nowrap { white-space: normal; }
	.maxine-h-lg { font-size: 24px; }
}

/* さらに狭い SP (< 400px) */
@media (max-width: 400px) {
	.maxine-hero__title .en { font-size: 52px; }
	.maxine-hero__title .jp { font-size: 26px; }
	.maxine-hero__title--v2 .jp-main { font-size: 28px; }
}

/* ==============================================
 * pricing 補助（既存維持）
 * ============================================== */

/* pricing: 金額の途中改行防止（例: 「3〜5万 / 円」の折返し） */
.pricing-amount {
	white-space: nowrap;
}

/* ==============================================
 * Hero 演出（canvas ノードネット + ゴースト WEB + 回転バッジ + マーキー・2026-07-22）
 * ============================================== */

.maxine-hero-section { position: relative; overflow: hidden; }

.maxine-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.85;
}

.maxine-hero-ghost {
	position: absolute;
	right: -2vw;
	top: 40px;
	font-family: "Bebas Neue", "Inter", sans-serif;
	font-weight: 400;
	font-size: 300px;
	line-height: 0.85;
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 2px var(--maxine-ember);
	opacity: 0.18;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

.maxine-badge-spin {
	position: absolute;
	right: 4vw;
	top: 380px;
	width: 128px;
	height: 128px;
	z-index: 5;
	/* 「60秒で概算がわかる →」と読めるのに押せない状態だったため、見積もりへのリンクにした */
	display: block;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.maxine-badge-spin:hover { transform: scale(1.06); }
.maxine-badge-spin:focus-visible {
	outline: 2px solid var(--maxine-ember);
	outline-offset: 6px;
	border-radius: 50%;
}
@media (max-width: 960px) {
	.maxine-badge-spin { display: none; }
}
.maxine-badge-spin svg { width: 100%; height: 100%; overflow: visible; }
.maxine-badge-spin .ring {
	animation: maxine-spin 14s linear infinite;
	transform-origin: 50% 50%;
}
.maxine-badge-spin text {
	font-family: "Inter", "Noto Sans JP", sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	fill: var(--maxine-ember);
}
.maxine-badge-spin .core { fill: var(--maxine-ember); }

@keyframes maxine-spin { to { transform: rotate(360deg); } }

.maxine-hero-marquee {
	border-top: 1.5px solid var(--maxine-obsidian);
	border-bottom: 1.5px solid var(--maxine-obsidian);
	overflow: hidden;
	padding: 16px 0;
	background: var(--maxine-limestone);
	position: relative;
	z-index: 3;
}
.maxine-marquee-track {
	display: flex;
	gap: 48px;
	width: max-content;
	animation: maxine-marquee 26s linear infinite;
	font-family: "Bebas Neue", "Inter", sans-serif;
}
.maxine-marquee-track span {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: var(--maxine-obsidian);
}
.maxine-marquee-track span.mx-o {
	color: transparent;
	-webkit-text-stroke: 1px var(--maxine-ember);
}

@keyframes maxine-marquee {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.maxine-marquee-track,
	.maxine-badge-spin .ring { animation: none; }
}

@media (max-width: 960px) {
	.maxine-hero-ghost { font-size: 180px; right: -6vw; top: 20px; opacity: 0.14; }
	.maxine-badge-spin { display: none; }
	.maxine-marquee-track span { font-size: 18px; }
}

/* ==============================================
 * マスコット（マクシーン / フジさん / コウちゃん・2026-07-22 追加）
 * ============================================== */

.maxine-hero__label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 var(--maxine-space-24);
	padding: 6px 16px 6px 6px;
	background: var(--maxine-limestone);
	border: 1.5px solid var(--maxine-obsidian);
	border-radius: 999px;
	font-family: var(--maxine-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.35;
	color: var(--maxine-obsidian);
}
.maxine-hero__mascot {
	width: 44px;
	height: 44px;
	display: block;
	flex-shrink: 0;
}

.maxine-section-intro--with-mascot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--maxine-space-24);
	flex-wrap: wrap;
}
.maxine-mascot {
	width: 140px;
	height: 140px;
	display: block;
	flex-shrink: 0;
}
.maxine-mascot--flow {
	transform: rotate(-4deg);
}
.maxine-mascot--about {
	transform: rotate(3deg);
}

@media (max-width: 640px) {
	.maxine-hero__label { font-size: 12px; gap: 8px; padding: 4px 12px 4px 4px; }
	.maxine-hero__mascot { width: 32px; height: 32px; }
	.maxine-section-intro--with-mascot { gap: 12px; }
	.maxine-mascot { width: 96px; height: 96px; }
}

/* ==============================================
 * Hero: 業種3ブラウザフレーム動画（2026-07-22 追加）
 * ============================================== */

.maxine-hero__videos {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1fr;
	gap: 10px;
	align-items: center;
}

.maxine-bframe {
	background: var(--maxine-obsidian);
	border-radius: 14px;
	padding: 6px 6px 8px;
	overflow: hidden;
	box-shadow: 0 20px 40px -20px rgba(28, 22, 19, 0.35);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	transform: rotate(-1.2deg);
}
.maxine-bframe:nth-child(3) { transform: rotate(1.4deg); }
.maxine-bframe--mid {
	transform: translateY(-16px) rotate(0deg) scale(1.04);
	z-index: 2;
	box-shadow: 0 28px 56px -20px rgba(28, 22, 19, 0.45);
}
.maxine-bframe:hover { transform: translateY(-4px) rotate(0deg) scale(1.02); z-index: 3; }
.maxine-bframe--mid:hover { transform: translateY(-20px) rotate(0deg) scale(1.06); }

.maxine-bframe__bar {
	display: flex;
	gap: 4px;
	padding: 4px 6px 8px;
	align-items: center;
}
.maxine-bframe__bar i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	display: block;
}
.maxine-bframe__bar i:nth-child(1) { background: #ff5f57; }
.maxine-bframe__bar i:nth-child(2) { background: #febc2e; }
.maxine-bframe__bar i:nth-child(3) { background: #28c840; }

.maxine-bframe video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 14;
	object-fit: cover;
	object-position: top center;
	border-radius: 6px;
	background: var(--maxine-limestone);
}

@media (max-width: 960px) {
	.maxine-hero__videos { grid-template-columns: 1fr 1.2fr 1fr; gap: 6px; }
	.maxine-bframe video { aspect-ratio: 9 / 13; }
	.maxine-bframe--mid { transform: translateY(-8px) scale(1.02); }
	.maxine-bframe { border-radius: 10px; padding: 4px 4px 6px; }
	.maxine-bframe__bar i { width: 5px; height: 5px; }
	.maxine-bframe__bar { padding: 3px 4px 6px; gap: 3px; }
}

/* SP専用改行ユーティリティ（PC で改行させない <br class="sp-only">） */
@media (min-width: 961px) {
	br.sp-only { display: none; }
}

/* ==============================================
 * GSAP アニメーションの初期状態（.mx-js が html についた時のみ）
 * SP では JS 発火のタイミングによっては見えない状態が続くリスクがあるため、
 * 初期非表示は PC (961px以上) のみに限定して SP は最初から表示する
 * ============================================== */

@media (min-width: 961px) {
	.mx-js .mx-hero-lead,
	.mx-js .mx-hero-actions {
		opacity: 0;
		transform: translateY(18px);
	}
	.mx-js .mx-rv {
		opacity: 0;
		transform: translateY(20px);
	}
	.mx-js .mx-rv-frame {
		opacity: 0;
		transform: translateY(26px) rotate(-1deg);
	}
	.mx-js .mx-rv-frame.maxine-bframe--mid {
		transform: translateY(26px) scale(1.04);
	}
}

/* mx-char セグメントは inline-block（yPercent 変形のため） */
.mx-char {
	display: inline-block;
	will-change: transform, opacity;
}

/* 語中分断防止ユーティリティ（複合語を丸ごと nowrap） */
.nowrap { white-space: nowrap; }

/* pricing 比較表: SP で横スクロールヒント表示 */
@media (max-width: 640px) {
	.maxine-sp-hint { display: block !important; }
}

/* ==============================================
 * Contact Form 7（サイト共通デザインに合わせる・色は Ember へ）
 * ============================================== */

.wpcf7 form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wpcf7 form > label {
	font-weight: 900;
	font-size: 15px;
	color: var(--maxine-obsidian);
	font-family: var(--maxine-font-body);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 14px 18px;
	border: 1.5px solid var(--maxine-obsidian);
	border-radius: 12px;
	background: var(--maxine-chalk);
	font-size: 16px;
	font-weight: 500;
	font-family: inherit;
	color: var(--maxine-obsidian);
	box-sizing: border-box;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--maxine-ember);
	outline-offset: 1px;
	border-color: var(--maxine-ember);
}

.wpcf7 textarea {
	min-height: 200px;
	resize: vertical;
}

.wpcf7 .wpcf7-submit {
	align-self: flex-start;
	padding: 14px 32px;
	background: var(--maxine-ember);
	color: var(--maxine-chalk);
	border: none;
	border-radius: var(--maxine-radius-pills);
	font-size: 16px;
	font-weight: 500;
	font-family: var(--maxine-font-body);
	cursor: pointer;
}

.wpcf7 .wpcf7-submit:hover {
	background: #d55a3d;
}

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

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 13px;
	color: #b02020;
	margin-top: 4px;
	font-weight: 500;
}

.wpcf7 .wpcf7-response-output {
	margin: 0;
	padding: 14px 16px;
	border-radius: 12px;
	border-width: 1px;
}

/* 成功と失敗を色で区別する。どちらも薄いピンクの角丸だったため、
   文章を読むまで成否が分からなかった（2026-07-26 UAT m-2）。 */
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--maxine-plasma);
	background: #eaf2f2;
	color: #1d3a44;
	font-weight: 700;
}
.wpcf7 form.sent .wpcf7-response-output::before {
	content: "✓ ";
	font-weight: 900;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #b02020;
	background: #fbecec;
	color: #7a1414;
}

/* ==============================================
 * ヘッダー: SP はドロワー（details/summary・JS 不要）
 * 旧実装は nav 4項目 + CTA を flex-wrap で折り返していたため、
 * SP のファーストビュー上部 250px 前後をヘッダーが占有していた。
 * ============================================== */

.maxine-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--maxine-space-24);
}
.maxine-nav-container { position: relative; }

/* トグルは checkbox + label（details は閉状態のコンテンツを display で戻せないブラウザがあるため不採用） */
.maxine-nav-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
/* 屋号・CTA は PC でフル表記、SP（960px 以下）で短縮表記へ差し替える。
   390px 幅では「ロゴ + ハンバーガー + CTA」がフル表記だと 1 行に収まらず、
   ロゴが 1 文字ずつ縦積みになった上でページ全体が横スクロールする。 */
.maxine-brand__short,
.maxine-nav-cta__short { display: none; }

/* ナビが5項目になった 2026-07-30 以降、屋号をフル表記のまま並べると 1100px 付近で
   ヘッダーが2段に折り返す（屋号 約300px + ナビ 約550px + CTA 約200px が入らない）。
   ドロワーへ落とす前に屋号だけ短縮表記へ切り替えて、ナビを出せる幅を稼ぐ。
   960px 以下はドロワーになるため、実質 961〜1100px の帯だけが対象。
   **この指定は上の `.maxine-brand__short { display:none }` より後ろに置くこと**
   （前に置くと同詳細度で後勝ちされ、屋号が長短とも消えて三角マークだけになる）。 */
@media (max-width: 1100px) {
	.maxine-brand__long { display: none; }
	.maxine-brand__short { display: inline; }
}

/* ドロワー限定の項目（2026-08-08 追加）。
   UAT で3体とも「お問い合わせ・運営者情報がメニューに無い」と指摘されたが、
   インラインナビに2項目とも足すと7項目になり、屋号を短縮しても1行に収まらない。
   利用頻度の高い「お問い合わせ」だけインラインへ出し、「運営者情報」は
   縦積みで余裕があるドロワー側だけに出す（PC ではフッターから辿れる）。
   非表示指定は `.maxine-link-ghost` の定義より後ろに置くこと（詳細度が同じで後勝ちのため）。 */
.maxine-nav-inline .maxine-nav-drawer-only { display: none; }
.maxine-nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 8px 14px;
	border-radius: var(--maxine-radius-pills);
	font-size: 14px;
	font-weight: 700;
	color: var(--maxine-obsidian);
	user-select: none;
}
.maxine-nav-toggle__bars {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 2px;
	background: var(--maxine-obsidian);
	border-radius: 2px;
}
.maxine-nav-toggle__bars::before,
.maxine-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--maxine-obsidian);
	border-radius: 2px;
	transition: transform 0.2s ease;
}
.maxine-nav-toggle__bars::before { top: -6px; }
.maxine-nav-toggle__bars::after { top: 6px; }
.maxine-nav-checkbox:checked + .maxine-nav-toggle .maxine-nav-toggle__bars { background: transparent; }
.maxine-nav-checkbox:checked + .maxine-nav-toggle .maxine-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.maxine-nav-checkbox:checked + .maxine-nav-toggle .maxine-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
.maxine-nav-checkbox:focus-visible + .maxine-nav-toggle {
	outline: 2px solid var(--maxine-ember);
	outline-offset: 2px;
}

/* SP: トグル + ドロップダウン（PC は既定のインラインナビのまま）
   境界は 2026-07-30 に 960px → 1000px へ引き上げた。ナビが5項目になり、
   980px では屋号（短縮表記）+ ナビ + CTA が1行に入らず CTA が2段目へ落ちていたため。
   実測で1行に収まる下限が 1000px（余白8px）。 */
@media (max-width: 1000px) {
	.maxine-nav-toggle { display: inline-flex; }
	.maxine-nav-inline { display: none; }
	.maxine-nav-checkbox:checked ~ .maxine-nav-inline {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: calc(100% + 12px);
		right: 0;
		min-width: 200px;
		padding: 8px;
		background: var(--maxine-limestone);
		border-radius: 20px;
		box-shadow: 0 12px 32px rgba(28, 22, 19, 0.16);
		z-index: 60;
	}
	.maxine-nav-checkbox:checked ~ .maxine-nav-inline .maxine-link-ghost {
		display: block;
		padding: 12px 14px;
		border-radius: 12px;
	}
	.maxine-nav-checkbox:checked ~ .maxine-nav-inline .maxine-divider-v { display: none; }
	/* ドロワーでは「運営者情報」も出す（インラインでは幅が足りず隠している項目） */
	.maxine-nav-checkbox:checked ~ .maxine-nav-inline .maxine-nav-drawer-only { display: block; }
	/* 390px 幅で「ロゴ + ハンバーガー + 見積もりCTA」が1行に収まる寸法に詰める。
	   緩めるとロゴが折り返して1文字ずつ縦積みになる。 */
	.maxine-header-row { gap: 12px; }
	.maxine-brand { font-size: 16px; white-space: nowrap; flex-shrink: 0; gap: 8px; }
	.maxine-brand-mark { width: 24px; height: 24px; }
	.maxine-nav-container { padding: 6px 8px; gap: 4px; flex-wrap: nowrap; }
	.maxine-nav-toggle { padding: 8px 10px; }
	.maxine-nav-toggle__text { display: none; }
	.maxine-nav-cta { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
	.maxine-nav-cta__long { display: none; }
	.maxine-nav-cta__short { display: inline; }
}

/* 320px 級（iPhone SE 第1世代相当）でも横スクロールを出さない */
@media (max-width: 340px) {
	.maxine-header-row { gap: 8px; }
	.maxine-brand { font-size: 15px; }
	.maxine-nav-container { padding: 5px 6px; }
	.maxine-nav-toggle { padding: 8px 6px; }
	.maxine-nav-cta { padding: 8px 12px; font-size: 12px; }
	/* 内側 24px のままだと CTA 見出しが 20.4px を要求し、下限 19px でも 1 文字あふれる */
	.maxine-footer-cta { padding: var(--maxine-space-32) var(--maxine-space-16); }
}

/* ==============================================
 * フッターCTA: 見出し + 補足 + ボタンの3点構成
 * ============================================== */

.maxine-footer-cta__body { flex: 1 1 auto; }
.maxine-footer-cta__note {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.92);
}
.maxine-footer-cta__btn {
	flex: 0 0 auto;
	box-shadow: 0 10px 24px rgba(28, 22, 19, 0.22);
}
.maxine-footer-cta__btn:hover { box-shadow: 0 14px 30px rgba(28, 22, 19, 0.3); }

@media (max-width: 960px) {
	.maxine-footer-cta__note { font-size: 14px; }
	/* box-sizing を明示しないと pill の左右 padding 36px 分だけ親からはみ出す */
	.maxine-footer-cta__btn { width: 100%; box-sizing: border-box; }
}

/* ==============================================
 * 2026-07-26 UAT 修正
 * ============================================== */

/* お問い合わせフォームの外枠（他ページのカードと同じ見え方に揃える） */
.maxine-contact-card {
	background: var(--maxine-limestone);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-40);
}
@media (max-width: 960px) {
	.maxine-contact-card { padding: var(--maxine-space-24); border-radius: 24px; }
}

/* LINE 友だち追加（お問い合わせページ・フォームの上）
   フォーム入力を面倒に感じる層の受け皿。ボタン画像は LINE 公式が配布しているものを
   そのまま使う（改変不可）。src が外部ホストなので、読み込み前の高さゼロで
   レイアウトが飛ばないよう width / height を明示している（実体は 232×72 の2倍解像度）。 */
.maxine-contact-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--maxine-space-24);
	flex-wrap: wrap;
	background: var(--maxine-limestone);
	border: 1.5px dotted var(--maxine-obsidian);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-32);
	margin-bottom: var(--maxine-space-24);
}
.maxine-contact-line__lead {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}
.maxine-contact-line__note {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.75;
}
/* 公式ボタン画像は高さ36px 固定で改変できないため、リンク側に上下 padding を足して
   タップ領域を 44px 以上にする（layout-qa の Apple HIG 基準）。
   inline-flex にしているのは、インライン画像の baseline 分の余白を下に残さないため。 */
.maxine-contact-line__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding-block: 4px;
}
.maxine-contact-line__actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
/* QR は「PC で見ていて、追加はスマホでしたい人」のためだけに置く。
   lin.ee のリンクを PC で押すと LINE の英語 QR ページへ飛ばされるので、
   遷移させずにその場で読み取れるようにしている（2026-08-05 に遷移先を実測）。
   スマホでは自分の画面の QR を自分で読み取れないため、出さずにボタンだけ残す。
   カード背景が白（limestone）なので、QR 画像の余白がそのままクワイエットゾーンになる。 */
.maxine-contact-line__qr { display: none; }
@media (min-width: 701px) {
	.maxine-contact-line__qr {
		display: block;
		text-align: center;
	}
	.maxine-contact-line__qr img {
		display: block;
		width: 140px;
		height: 140px;
	}
	/* 折り返しはブラウザ任せにせず <br> で決める。max-width を QR 幅に合わせると
	   「〜てくだ / さい。」のような語中分断が出るため、幅は文が収まるところまで取る。 */
	.maxine-contact-line__qr-note {
		margin: 8px 0 0;
		max-width: 180px;
		font-size: 13px;
		line-height: 1.6;
	}
}
@media (max-width: 700px) {
	.maxine-contact-line {
		padding: var(--maxine-space-24);
		border-radius: 24px;
	}
	.maxine-contact-line__actions { align-self: flex-start; }
	.maxine-contact-line__btn { align-self: flex-start; }
}

/* 運営者情報などの2列テーブルは、SP で縦積みにする。
   1列目に width:180px を直書きしているため、375px 幅だと2列目が数十pxまで潰れ、
   値が1文字ずつ縦に折り返して読めなくなっていた（2026-07-26 UAT C-1）。 */
@media (max-width: 700px) {
	.maxine-stack-table,
	.maxine-stack-table tbody,
	.maxine-stack-table tr,
	.maxine-stack-table td {
		display: block;
		width: auto !important;
	}
	.maxine-stack-table tr {
		padding: 12px 0;
		border-bottom: 1px dotted var(--maxine-obsidian);
	}
	.maxine-stack-table tr:last-child { border-bottom: none; }
	.maxine-stack-table td { padding: 0 !important; border-bottom: none !important; }
	.maxine-stack-table td:first-child {
		font-size: 13px;
		color: var(--maxine-warmgray);
		margin-bottom: 4px;
	}
}

/* 横スクロールする表は、1列目（項目名）を固定して値と対応が取れるようにする */
.maxine-pricing-table th:first-child,
.maxine-pricing-table td:first-child,
.maxine-opt-table td:first-child {
	position: sticky;
	left: 0;
	background: var(--maxine-limestone);
	z-index: 1;
}

/* CF7: 未入力・形式エラーの該当欄を目で分かるようにする */
.wpcf7 .wpcf7-not-valid {
	border-color: #b02020 !important;
	background: #fdf6f6;
}
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #b02020;
}

/* ==============================================
 * 右下の相談ボタン（全ページ常駐）
 * マークアップは includes/floating-cta.php
 * ============================================== */

.mx-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font-family: var(--maxine-font-body);
}

/* 閉じている間のボタン。マスコットが顔を出しているだけの小さい丸 */
.mx-fab__toggle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid var(--maxine-obsidian);
	background: var(--maxine-chalk);
	box-shadow: 0 8px 22px rgba(28, 22, 19, 0.18);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mx-fab__toggle:hover { box-shadow: 0 12px 28px rgba(28, 22, 19, 0.26); }
.mx-fab__mascot {
	width: 34px;
	height: 34px;
	object-fit: contain;
	display: block;
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mx-fab__toggle-text {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.04em;
	color: var(--maxine-obsidian);
	line-height: 1;
}

/* 開いたときにマスコットがひと跳ねする */
.mx-fab[data-open="true"] .mx-fab__mascot { transform: translateY(-3px) rotate(-6deg); }

/* 展開する2つのリンク */
.mx-fab__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	/* 閉じている間は行送りぶんの高さも持たせない。
	   visibility: hidden も必ず添えること。opacity だけだと要素は生きたままで、
	   閉じているのに Tab キーでリンクへフォーカスが入る（読み上げ環境でも読まれる）。 */
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}
.mx-fab[data-open="true"] .mx-fab__items {
	max-height: 200px;
	overflow: visible;
	visibility: visible;
	pointer-events: auto;
}

.mx-fab__item {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--maxine-radius-pills);
	color: var(--maxine-chalk);
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(28, 22, 19, 0.18);
	/* 閉じている間は右へ引っ込めておき、開くと滑り出す */
	opacity: 0;
	transform: translateX(12px) scale(0.96);
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.mx-fab__item:hover { color: var(--maxine-chalk); }
.mx-fab[data-open="true"] .mx-fab__item { opacity: 1; transform: none; }
/* 下（メール）から順に出したいので、上の LINE をわずかに遅らせる */
.mx-fab[data-open="true"] .mx-fab__items > li:first-child .mx-fab__item { transition-delay: 0.06s; }

.mx-fab__item--line { background: #06c755; }
.mx-fab__item--mail { background: var(--maxine-ember); }

/* 初回だけ出す吹き出し */
.mx-fab__bubble {
	max-width: 220px;
	padding: 10px 14px;
	border-radius: 16px 16px 4px 16px;
	background: var(--maxine-obsidian);
	color: var(--maxine-chalk);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	box-shadow: 0 8px 22px rgba(28, 22, 19, 0.22);
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	/* 出ていない間は高さを取らない */
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
}
.mx-fab__bubble[data-show="true"] { opacity: 1; transform: none; }

@media (max-width: 700px) {
	.mx-fab { right: 14px; bottom: 14px; }
	.mx-fab__toggle { width: 58px; height: 58px; }
	.mx-fab__mascot { width: 30px; height: 30px; }
	.mx-fab__item { height: 44px; font-size: 13px; padding: 0 16px; }
	.mx-fab__bubble { max-width: 190px; font-size: 12px; }
}

/* 動きを減らす設定の環境では、位置だけ変えて動かさない */
@media (prefers-reduced-motion: reduce) {
	.mx-fab__mascot,
	.mx-fab__item,
	.mx-fab__bubble { transition: none; }
}

/* ==============================================
 * ブログ（一覧・カテゴリ・記事）
 * 2026-07-30 v0.6.0 新設。
 * それまで home.html / single.html / archive.html は WordPress 初期の
 * ボイラープレートのままで、本番の /blog/ は「Welcome」の
 * プレースホルダーが公開されていた。
 * 下層ページと同じ見え方（1400px の内枠・大見出し・角丸カード）に揃える。
 * ============================================== */

/* --- 一覧まわり --- */
.maxine-blog-lead {
	max-width: 860px;
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--maxine-warmgray);
}

/* カテゴリの並び。core/categories が ul.wp-block-categories を出す */
.maxine-blog-terms {
	margin: 0 0 var(--maxine-space-40);
}
.maxine-blog-terms ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.maxine-blog-terms li { margin: 0; }
.maxine-blog-terms a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 18px;
	border: 1.5px solid var(--maxine-hairline);
	border-radius: var(--maxine-radius-pills);
	background: var(--maxine-limestone);
	color: var(--maxine-obsidian);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.maxine-blog-terms a:hover {
	border-color: var(--maxine-ember);
	color: var(--maxine-obsidian);
}

.maxine-blog-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--maxine-space-32);
	margin: 0;
	padding: 0;
}
/* post-template は li を挟む。カードの高さを揃えるため li 側も伸ばす */
.maxine-blog-grid > li {
	margin: 0;
	display: flex;
}
.maxine-blog-grid > li > .maxine-blog-card { flex: 1; }
.maxine-blog-card {
	background: var(--maxine-limestone);
	border: 1px solid var(--maxine-hairline);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-24);
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	transition: transform 0.2s ease;
}
.maxine-blog-card:hover { transform: translateY(-4px); }
.maxine-blog-card__thumb {
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
}
.maxine-blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.maxine-blog-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
	color: var(--maxine-warmgray);
}
.maxine-blog-card__meta .wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	background: var(--maxine-sulfur);
	color: var(--maxine-obsidian);
	border-radius: var(--maxine-radius-pills);
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}
.maxine-blog-card__title {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 19px;
	line-height: 1.5;
	margin: 0;
}
.maxine-blog-card__title a {
	color: var(--maxine-obsidian);
	text-decoration: none;
}
.maxine-blog-card__title a:hover { text-decoration: underline; }
.maxine-blog-card__excerpt {
	font-size: 14px;
	line-height: 1.8;
	color: var(--maxine-warmgray);
	margin: 0;
}
.maxine-blog-card__excerpt .wp-block-post-excerpt__more-text { display: none; }

.maxine-blog-empty {
	font-size: 15px;
	line-height: 1.9;
	color: var(--maxine-warmgray);
	background: var(--maxine-pumice);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-40);
	text-align: center;
}

.maxine-blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: var(--maxine-space-56);
}
.maxine-blog-pagination a,
.maxine-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--maxine-radius-pills);
	font-size: 15px;
	text-decoration: none;
	color: var(--maxine-obsidian);
}
.maxine-blog-pagination .page-numbers.current {
	background: var(--maxine-ember);
	color: var(--maxine-chalk);
}

.maxine-archive-title { margin-bottom: 8px; }

.maxine-blog-search { margin: 0 0 var(--maxine-space-40); max-width: 560px; }

/* --- パンくず --- */
.maxine-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--maxine-warmgray);
	margin: 0 0 var(--maxine-space-24);
}
.maxine-breadcrumb a {
	color: var(--maxine-warmgray);
	text-decoration: none;
	padding: 4px 0;
}
.maxine-breadcrumb a:hover { text-decoration: underline; }
.maxine-breadcrumb__sep { opacity: 0.5; }
.maxine-breadcrumb__current {
	color: var(--maxine-obsidian);
	/* 長い記事名でパンくずが何行にもならないように1行で省略する */
	max-width: 22em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- 記事本体 --- */
.maxine-post__inner {
	max-width: 820px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}
.maxine-post__title {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: clamp(26px, 5vw, 38px);
	line-height: 1.4;
	margin: 0 0 var(--maxine-space-16);
}
.maxine-post__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
	color: var(--maxine-warmgray);
	margin-bottom: var(--maxine-space-24);
}
.maxine-post__meta .wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	background: var(--maxine-sulfur);
	color: var(--maxine-obsidian);
	border-radius: var(--maxine-radius-pills);
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}
/* 読了時間。日付の隣に置くので、点で区切って別情報だと分かるようにする */
.maxine-post__readtime {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	color: var(--maxine-warmgray);
}
.maxine-post__readtime::before {
	content: '';
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	margin-right: 10px;
	opacity: 0.6;
}
.maxine-post__thumb {
	margin: 0 0 var(--maxine-space-40);
	border-radius: var(--maxine-radius-cards);
	overflow: hidden;
}
.maxine-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.maxine-post__body { font-size: 16px; line-height: 1.95; }
.maxine-post__body > * { margin-top: 1.6em; margin-bottom: 1.6em; }
/* h2 の飾りは既存の clay バー（maxine.css の
   .wp-block-post-content :is(h1,h2)::before）に任せる。
   下線を足すと装飾が二重になるためここでは付けない。 */
.maxine-post__body h2 {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: clamp(21px, 3.4vw, 26px);
	line-height: 1.5;
	margin-top: 2.6em;
	scroll-margin-top: 90px;
}
.maxine-post__body h3 {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: clamp(18px, 2.8vw, 21px);
	line-height: 1.55;
	margin-top: 2.2em;
	scroll-margin-top: 90px;
}
.maxine-post__body ul,
.maxine-post__body ol { padding-left: 1.4em; }
.maxine-post__body li { margin-bottom: 0.6em; }
.maxine-post__body img { border-radius: 24px; }
.maxine-post__body blockquote {
	border-left: 4px solid var(--maxine-hairline);
	padding: 4px 0 4px 20px;
	color: var(--maxine-warmgray);
	margin-left: 0;
}
.maxine-post__body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.maxine-post__body th,
.maxine-post__body td {
	border: 1px solid var(--maxine-hairline);
	padding: 12px;
	text-align: left;
}
.maxine-post__body th { background: var(--maxine-pumice); }
/* 表が長いときに本文ごと横スクロールしないよう、表だけを横に流す */
.maxine-post__body .wp-block-table { overflow-x: auto; }
/* 最小幅がないと、狭い画面で列が潰れて1セルが1文字ずつの縦読みになる
   （運営者情報の表で 2026-07-26 UAT Critical になったのと同じ症状）。
   最低幅を保って横スワイプさせ、見出し行と1列目のラベルは語中で折らない。 */
.maxine-post__body .wp-block-table table { min-width: 620px; }
.maxine-post__body th,
.maxine-post__body td:first-child { white-space: nowrap; }

/* --- 目次 --- */
.maxine-toc {
	background: var(--maxine-pumice);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-24) var(--maxine-space-32);
	margin-bottom: var(--maxine-space-40);
}
.maxine-toc__title {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 16px;
	margin: 0 0 8px;
}
/* 目次は本文の中に差し込むため、.maxine-post__body ul / li の指定
   （padding-left 1.4em・項目下マージン）が効いてしまう。打ち消す。 */
.maxine-toc__list,
.maxine-post__body .maxine-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.maxine-toc__item,
.maxine-post__body .maxine-toc__item { margin: 0; }
.maxine-toc__item a {
	display: block;
	padding: 8px 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--maxine-obsidian);
	text-decoration: none;
}
.maxine-toc__item a:hover { text-decoration: underline; }
.maxine-toc__item--h3 a { padding-left: 1.2em; font-size: 13.5px; color: var(--maxine-warmgray); }

/* --- 記事下 CTA --- */
.maxine-post-cta {
	background: var(--maxine-sulfur);
	border-radius: var(--maxine-radius-cards);
	padding: var(--maxine-space-40);
	margin-top: var(--maxine-space-64);
	/* 本文が左揃えなので、CTA だけ中央に寄せて「本文の終わり」を視覚的に区切る。
	   左揃えのままだとボタンが左下に固まり、カード右側が大きく空いて見える。
	   記事途中の CTA（.mx-inline-cta）とも揃えている。 */
	text-align: center;
}
.maxine-post-cta__lead {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: clamp(18px, 3vw, 22px);
	line-height: 1.5;
	margin: 0 0 12px;
}
.maxine-post-cta__body {
	font-size: 15px;
	line-height: 1.9;
	margin: 0 0 var(--maxine-space-24);
}
.maxine-post-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

/* --- 関連記事 --- */
.maxine-related { margin-top: var(--maxine-space-64); }
.maxine-related__heading {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: clamp(19px, 3vw, 23px);
	margin: 0 0 var(--maxine-space-24);
	border: none;
	padding: 0;
}
.maxine-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--maxine-space-24);
}
.maxine-related__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: var(--maxine-obsidian);
}
.maxine-related__thumb {
	display: block;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.maxine-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.maxine-related__date { font-size: 13px; color: var(--maxine-warmgray); }
.maxine-related__title {
	font-family: var(--maxine-font-display-jp);
	font-weight: 900;
	font-size: 15px;
	line-height: 1.6;
}
.maxine-related__card:hover .maxine-related__title { text-decoration: underline; }

/* --- タブレット・スマホ --- */
@media (max-width: 960px) {
	.maxine-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.maxine-blog-grid { grid-template-columns: 1fr; }
	.maxine-related__grid { grid-template-columns: 1fr; }
	/* サムネがある記事だけ横並びにする。サムネが無いと
	   日付とタイトルが左右に離れて読みにくくなるため */
	.maxine-related__card:has(.maxine-related__thumb) {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}
	.maxine-related__thumb { flex: 0 0 108px; }
	.maxine-post__inner { padding-left: 16px; padding-right: 16px; }
	.maxine-post-cta { padding: var(--maxine-space-24); }
	.maxine-toc { padding: var(--maxine-space-24); }
	.maxine-post-cta__actions .maxine-cta-primary,
	.maxine-post-cta__actions .maxine-cta-secondary { width: 100%; }
	/* 幅が狭いと省略が効きすぎて何も読めなくなるため、現在地は折り返す */
	.maxine-breadcrumb__current { max-width: 100%; white-space: normal; }
}

/* フッターナビのタップ領域
 * 14px のテキストリンクが並ぶだけで高さ 20px 前後しかなく、
 * layout-qa が全ページで error（24px 未満）を出していた既存の課題。
 * 見た目の間隔は gap で取っているので、当たり判定だけを 44px へ広げる。 */
.mx-footer-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}