/* =========================================================
   MASA Notion テーマ - メインスタイル
   DESIGN.md 準拠（Notion 日本語版スタイル・ダーク基調）
   ========================================================= */

:root {
	/* Colors */
	--color-bg: #191918;
	--color-surface: #2F2F2F;
	--color-surface-2: #252525;
	--color-text: rgba(255, 255, 255, 0.95);
	--color-text-secondary: rgba(255, 255, 255, 0.6);
	--color-text-disabled: rgba(255, 255, 255, 0.3);
	--color-border: rgba(255, 255, 255, 0.13);
	--color-border-soft: rgba(255, 255, 255, 0.08);
	--color-accent: #2383E2;
	--color-accent-hover: #4a9bea;
	--color-white: #FFFFFF;
	--color-danger: #EB5757;
	--color-warning: #F2C94C;
	--color-success: #6FCF97;

	/* Spacing */
	--sp-xs: 4px;
	--sp-s: 8px;
	--sp-m: 16px;
	--sp-l: 24px;
	--sp-xl: 32px;
	--sp-xxl: 64px;

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Typography */
	--font-family: "Inter", -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif;
	--font-mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* Layout */
	--container-max: 1200px;
	--container-narrow: 860px;
	--container-pad: 32px;

	/* Shadow */
	--shadow-1: 0 1px 3px rgba(0, 0, 0, 0.2);
	--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.3);
	--shadow-3: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   Reset / Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: 16px;
	line-height: 1.75;
	font-feature-settings: "lnum", "locl" 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-break: break-word;
	overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 0 0 var(--sp-m); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-m); }
ul, ol { padding-left: 1.5em; margin: 0 0 var(--sp-m); }
li { margin-bottom: 4px; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--sp-xl) 0; }
blockquote {
	border-left: 3px solid var(--color-border);
	margin: var(--sp-l) 0;
	padding: 4px var(--sp-m);
	color: var(--color-text-secondary);
}
code, pre { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--color-surface); padding: 2px 6px; border-radius: var(--radius-sm); }
pre { background: var(--color-surface); padding: var(--sp-m); border-radius: var(--radius-md); overflow-x: auto; }
pre code { background: transparent; padding: 0; }
table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--sp-l) 0;
	font-size: 15px;
}
th, td {
	border: 1px solid var(--color-border);
	padding: var(--sp-s) var(--sp-m);
	text-align: left;
}
th { background: var(--color-surface); font-weight: 600; }

/* =========================================================
   Skip link
   ========================================================= */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
}
.skip-link:focus {
	left: var(--sp-m);
	top: var(--sp-m);
	background: var(--color-white);
	color: var(--color-bg);
	padding: var(--sp-s) var(--sp-m);
	z-index: 9999;
}

/* =========================================================
   Layout helpers
   ========================================================= */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	width: 100%;
}
.container--narrow { max-width: var(--container-narrow); }

.section {
	padding: var(--sp-xxl) 0;
	border-top: 1px solid var(--color-border-soft);
}
.section:first-of-type { border-top: 0; }

.section-head {
	text-align: center;
	margin-bottom: calc(var(--sp-xxl) - var(--sp-m));
}
.section-eyebrow {
	color: var(--color-text-secondary);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 var(--sp-s);
}
.section-title {
	font-size: 54px;
	line-height: 1.04;
	margin: 0 0 var(--sp-m);
}
.section-lead {
	color: var(--color-text-secondary);
	font-size: 16px;
	margin: 0 auto;
	max-width: 40em;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(25, 25, 24, 0.85);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--color-border-soft);
}
.site-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--sp-m) var(--container-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-l);
}
.site-logo {
	display: inline-flex;
	align-items: center;
	color: var(--color-text);
	font-weight: 600;
}
.site-logo img {
	height: 22px;
	width: auto;
	filter: brightness(0) invert(1);
}
.site-logo__text { font-size: 18px; }

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--sp-l);
}
.nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: var(--sp-l);
	align-items: center;
}
.nav-list li { margin: 0; }
.nav-list a {
	color: var(--color-text);
	font-size: 14px;
	font-weight: 500;
	opacity: 0.85;
	transition: opacity 0.15s;
}
.nav-list a:hover { opacity: 1; }

.nav-cta {
	padding: 6px 14px !important;
	font-size: 14px !important;
}

.nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	justify-content: center;
}
.nav-toggle span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--color-text);
}

.mobile-nav {
	display: none;
	padding: var(--sp-m) var(--container-pad);
	border-top: 1px solid var(--color-border-soft);
}
.mobile-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.mobile-nav-list li { margin: 0; }
.mobile-nav-list a {
	display: block;
	color: var(--color-text);
	padding: 12px 0;
	font-size: 16px;
	font-weight: 500;
	border-bottom: 1px solid var(--color-border-soft);
}
.mobile-nav-cta {
	margin-top: var(--sp-m);
	display: block;
	text-align: center;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: var(--radius-md);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
	min-height: 44px;
	text-decoration: none;
	white-space: nowrap;
}
.btn--primary {
	background: var(--color-white);
	color: var(--color-bg);
}
.btn--primary:hover {
	background: #e8e8e8;
	color: var(--color-bg);
	transform: translateY(-1px);
}
.btn--ghost {
	background: transparent;
	color: var(--color-text);
	border-color: rgba(255, 255, 255, 0.2);
}
.btn--ghost:hover {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--color-text);
}
.btn--accent {
	background: var(--color-accent);
	color: var(--color-white);
}
.btn--accent:hover {
	background: var(--color-accent-hover);
	color: var(--color-white);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
	padding: calc(var(--sp-xxl) + var(--sp-xl)) 0 var(--sp-xxl);
	background:
		radial-gradient(1200px 600px at 50% -200px, rgba(35, 131, 226, 0.18), transparent 60%),
		var(--color-bg);
}
.hero__inner { text-align: center; }
.hero__eyebrow {
	color: var(--color-text-secondary);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--sp-m);
}
.hero__title {
	font-size: 64px;
	line-height: 1.05;
	margin: 0 0 var(--sp-l);
	letter-spacing: -0.02em;
}
.hero__title-accent {
	background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hero__lead {
	color: var(--color-text-secondary);
	font-size: 18px;
	line-height: 1.8;
	max-width: 40em;
	margin: 0 auto var(--sp-xl);
}
.hero__cta {
	display: flex;
	gap: var(--sp-m);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--sp-xxl);
}
.hero__meta {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: var(--sp-xl);
	justify-content: center;
	flex-wrap: wrap;
	color: var(--color-text-secondary);
	font-size: 13px;
}
.hero__meta li { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.hero__meta span {
	color: var(--color-text);
	font-size: 22px;
	font-weight: 700;
}

/* =========================================================
   Cards
   ========================================================= */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--sp-l);
}
.card {
	display: block;
	background: var(--color-surface);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	padding: var(--sp-l);
	color: var(--color-text);
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
	box-shadow: var(--shadow-1);
	position: relative;
	min-height: 210px;
}
.card:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: var(--shadow-2);
	color: var(--color-text);
}
.card__tag {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.1em;
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-text-secondary);
	padding: 3px 8px;
	border-radius: 999px;
	margin-bottom: var(--sp-m);
	text-transform: uppercase;
}
.card__tag--new {
	background: var(--color-accent);
	color: var(--color-white);
}
.card__title {
	font-size: 18px;
	margin: 0 0 var(--sp-s);
}
.card__desc {
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 1.7;
	margin: 0 0 var(--sp-m);
}
.card__price {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.01em;
}
.card__price span {
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-secondary);
	margin-left: 4px;
}

/* =========================================================
   Persona grid (事業課題から選ぶ)
   ========================================================= */
.persona-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sp-l);
}
.persona-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	padding: var(--sp-xl);
	color: var(--color-text);
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
	box-shadow: var(--shadow-1);
}
.persona-card:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: var(--shadow-2);
	color: var(--color-text);
}
.persona-card__icon {
	font-size: 36px;
	line-height: 1;
	margin-bottom: var(--sp-m);
}
.persona-card__title {
	font-size: 20px;
	margin: 0 0 var(--sp-s);
	letter-spacing: -0.01em;
}
.persona-card__desc {
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 1.75;
	margin: 0 0 var(--sp-m);
	flex-grow: 1;
}
.persona-card__tags {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sp-m);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.persona-card__tags li {
	font-size: 11px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--color-border-soft);
	border-radius: 999px;
	padding: 3px 10px;
	color: var(--color-text-secondary);
	margin: 0;
}
.persona-card__cta {
	color: var(--color-accent);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.persona-card:hover .persona-card__cta {
	color: var(--color-accent-hover);
}

/* =========================================================
   Philosophy columns
   ========================================================= */
.philosophy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-xl);
}
.philosophy-col {
	padding: var(--sp-xl);
	background: var(--color-surface-2);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
}
.philosophy-col__title {
	font-size: 18px;
	line-height: 1.45;
	margin: 0 0 var(--sp-m);
	padding-bottom: var(--sp-m);
	border-bottom: 1px solid var(--color-border-soft);
}
.philosophy-col p {
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 1.85;
	margin: 0 0 var(--sp-s);
}
.philosophy-col p:last-child { margin-bottom: 0; }
.philosophy-col strong {
	color: var(--color-text);
	border-bottom: 2px solid rgba(35, 131, 226, 0.5);
	padding-bottom: 1px;
}

/* =========================================================
   Industry blocks on top page
   ========================================================= */
.industry-block {
	margin-bottom: var(--sp-xl);
}
.industry-block__title {
	font-size: 16px;
	color: var(--color-text-secondary);
	font-weight: 500;
	margin: 0 0 var(--sp-m);
	padding-left: var(--sp-s);
	border-left: 3px solid var(--color-accent);
	letter-spacing: 0.02em;
}
.section--industries .industry-list {
	margin: 0;
}

/* =========================================================
   Feature grid
   ========================================================= */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-xl);
}
.feature {
	padding: var(--sp-l);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	background: var(--color-surface-2);
}
.feature__num {
	font-size: 32px;
	font-weight: 700;
	color: var(--color-text-secondary);
	margin: 0 0 var(--sp-m);
	line-height: 1;
	letter-spacing: -0.02em;
}
.feature__title {
	font-size: 18px;
	margin: 0 0 var(--sp-s);
}
.feature__desc {
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 1.75;
	margin: 0;
}

/* =========================================================
   CTA box
   ========================================================= */
.cta-box {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--sp-xxl) var(--sp-xl);
	text-align: center;
}
.cta-box__title {
	font-size: 32px;
	margin: 0 0 var(--sp-m);
}
.cta-box__desc {
	color: var(--color-text-secondary);
	margin: 0 0 var(--sp-xl);
}

/* =========================================================
   Page header / body
   ========================================================= */
.page-header {
	padding: calc(var(--sp-xxl) + var(--sp-xl)) 0 var(--sp-xl);
	background:
		radial-gradient(800px 400px at 50% -100px, rgba(35, 131, 226, 0.12), transparent 60%),
		var(--color-bg);
	border-bottom: 1px solid var(--color-border-soft);
}
.page-title {
	font-size: 44px;
	line-height: 1.2;
	margin: 0;
	letter-spacing: -0.02em;
}
.post-header__date {
	color: var(--color-text-secondary);
	font-size: 13px;
	margin-bottom: var(--sp-s);
	display: block;
}

.page-body {
	padding: var(--sp-xxl) 0;
}
.page-body h2 {
	font-size: 32px;
	margin-top: var(--sp-xxl);
	margin-bottom: var(--sp-m);
	padding-bottom: var(--sp-s);
	border-bottom: 1px solid var(--color-border-soft);
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 {
	font-size: 22px;
	margin-top: var(--sp-xl);
	margin-bottom: var(--sp-m);
}
.page-body h4 {
	font-size: 18px;
	margin-top: var(--sp-l);
}
.page-body ul, .page-body ol { line-height: 1.8; }
.page-body img {
	border-radius: var(--radius-md);
	margin: var(--sp-l) 0;
}

/* =========================================================
   Blog listing
   ========================================================= */
.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sp-l);
}
.post-card {
	background: var(--color-surface-2);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s, border-color 0.15s;
}
.post-card:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.2);
}
.post-card__thumb img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}
.post-card__body { padding: var(--sp-l); }
.post-card__date {
	color: var(--color-text-secondary);
	font-size: 12px;
	display: block;
	margin-bottom: var(--sp-s);
}
.post-card__title {
	font-size: 18px;
	margin: 0 0 var(--sp-s);
}
.post-card__title a {
	color: var(--color-text);
}
.post-card__title a:hover { color: var(--color-accent-hover); }
.post-card__excerpt {
	color: var(--color-text-secondary);
	font-size: 14px;
	margin: 0;
}
.no-posts {
	text-align: center;
	color: var(--color-text-secondary);
	padding: var(--sp-xxl) 0;
}
.pagination {
	margin-top: var(--sp-xxl);
	text-align: center;
}
.pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 4px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 14px;
}
.pagination .current {
	background: var(--color-white);
	color: var(--color-bg);
	border-color: var(--color-white);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
	background: #101010;
	border-top: 1px solid var(--color-border-soft);
	padding: var(--sp-xxl) 0 var(--sp-l);
	margin-top: var(--sp-xxl);
}
.site-footer__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad) var(--sp-xl);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--sp-xl);
}
.site-footer__brand {}
.footer-logo {
	height: 24px;
	width: auto;
	filter: brightness(0) invert(1);
	margin-bottom: var(--sp-m);
}
.footer-logo__text { font-size: 18px; font-weight: 600; display: block; margin-bottom: var(--sp-m); }
.footer-tagline {
	color: var(--color-text-secondary);
	font-size: 14px;
	margin: 0 0 var(--sp-m);
}
.footer-contact-line {
	color: var(--color-text-secondary);
	font-size: 13px;
	margin: 0;
}
.footer-contact-line a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

.footer-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 2;
	gap: var(--sp-m);
}
.footer-nav-list li { margin: 0 0 8px; break-inside: avoid; }
.footer-nav-list a {
	color: var(--color-text-secondary);
	font-size: 14px;
}
.footer-nav-list a:hover { color: var(--color-text); }

.site-footer__copy {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--sp-m) var(--container-pad) 0;
	border-top: 1px solid var(--color-border-soft);
}
.site-footer__copy small {
	color: var(--color-text-disabled);
	font-size: 12px;
}

/* =========================================================
   Service page specific
   ========================================================= */
.service-hero {
	background: var(--color-surface-2);
	padding: var(--sp-xl);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border-soft);
	margin-bottom: var(--sp-xl);
}
.price-table {
	width: 100%;
	margin: var(--sp-l) 0;
}
.price-table th,
.price-table td {
	padding: var(--sp-m);
	font-size: 15px;
}
.price-table .price-cell {
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
}
.price-table .price-cell small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--color-text-secondary);
}

.check-list {
	list-style: none;
	padding: 0;
	margin: var(--sp-l) 0;
}
.check-list li {
	position: relative;
	padding-left: 28px;
	margin-bottom: var(--sp-s);
	line-height: 1.75;
}
.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 16px;
	height: 16px;
	background: var(--color-success);
	border-radius: 50%;
	box-shadow: inset 0 0 0 4px var(--color-bg);
}

.info-box {
	background: rgba(35, 131, 226, 0.08);
	border: 1px solid rgba(35, 131, 226, 0.3);
	border-radius: var(--radius-md);
	padding: var(--sp-m) var(--sp-l);
	margin: var(--sp-l) 0;
}
.info-box strong { color: var(--color-accent); }

/* =========================================================
   AI LP specific
   ========================================================= */
.page-body--ai { padding: 0 0 var(--sp-xxl); }
.page-body--ai > *:not(.ai-hero):not(.cta-box) {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}
.page-body--ai > h2 { margin-top: var(--sp-xxl); }
.page-body--ai .cta-box {
	max-width: calc(var(--container-max) - 64px);
	margin-left: auto;
	margin-right: auto;
}
.ai-hero {
	background:
		radial-gradient(1000px 500px at 80% 0%, rgba(35, 131, 226, 0.22), transparent 60%),
		radial-gradient(600px 400px at 10% 20%, rgba(111, 207, 151, 0.12), transparent 60%),
		var(--color-bg);
	padding: calc(var(--sp-xxl) + var(--sp-xl)) 0;
	text-align: center;
}
.ai-hero__badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(35, 131, 226, 0.15);
	border: 1px solid rgba(35, 131, 226, 0.4);
	color: var(--color-accent);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: var(--sp-m);
	letter-spacing: 0.08em;
}
.ai-hero__title {
	font-size: 64px;
	line-height: 1.1;
	margin: 0 0 var(--sp-l);
	letter-spacing: -0.02em;
}
.ai-hero__title-accent {
	background: linear-gradient(90deg, #2383E2, #6FCF97);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ai-hero__lead {
	color: var(--color-text-secondary);
	font-size: 18px;
	line-height: 1.8;
	max-width: 42em;
	margin: 0 auto var(--sp-xl);
}

.lead-large {
	font-size: 18px;
	line-height: 1.85;
	color: var(--color-text);
	max-width: 44em;
	margin: var(--sp-m) 0 var(--sp-xl);
}
.lead-large strong {
	color: var(--color-white);
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 2px;
}
.br-sp { display: none; }
@media (max-width: 768px) {
	.br-sp { display: inline; }
	.lead-large { font-size: 16px; }
}

.shift-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--sp-l);
	margin: var(--sp-xl) 0;
}
.shift-card {
	background: var(--color-surface-2);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	padding: var(--sp-l);
	min-height: 180px;
}
.shift-card--old {
	opacity: 0.7;
	border-style: dashed;
}
.shift-card--new {
	background: linear-gradient(180deg, rgba(35, 131, 226, 0.1), var(--color-surface) 70%);
	border-color: rgba(35, 131, 226, 0.4);
	box-shadow: 0 8px 24px rgba(35, 131, 226, 0.1);
}
.shift-card__eyebrow {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	margin: 0 0 var(--sp-s);
}
.shift-card__title {
	font-size: 22px;
	margin: 0 0 var(--sp-s);
}
.shift-card--new .shift-card__title {
	color: var(--color-accent);
}
.shift-card__desc {
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 1.75;
	margin: 0;
}
.shift-card__desc strong {
	color: var(--color-text);
}
.shift-arrow {
	font-size: 40px;
	color: var(--color-accent);
	font-weight: 300;
	text-align: center;
}
@media (max-width: 768px) {
	.shift-grid { grid-template-columns: 1fr; }
	.shift-arrow { transform: rotate(90deg); }
}

.ai-problem-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-m);
	margin: var(--sp-xl) 0;
}
.ai-problem {
	background: var(--color-surface-2);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	padding: var(--sp-l);
}
.ai-problem__icon {
	font-size: 32px;
	margin-bottom: var(--sp-s);
}
.ai-problem__title {
	font-size: 16px;
	margin: 0 0 var(--sp-s);
}
.ai-problem__desc {
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 1.75;
	margin: 0;
}

.plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-l);
	margin: var(--sp-xl) 0;
}
.plan {
	background: var(--color-surface);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	padding: var(--sp-xl);
	position: relative;
}
.plan--featured {
	border-color: var(--color-accent);
	background: linear-gradient(180deg, rgba(35, 131, 226, 0.08), var(--color-surface) 70%);
}
.plan__badge {
	position: absolute;
	top: -12px;
	left: var(--sp-l);
	background: var(--color-accent);
	color: var(--color-white);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
}
.plan__name {
	font-size: 18px;
	margin: 0 0 var(--sp-s);
}
.plan__price {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	margin: 0 0 4px;
	letter-spacing: -0.02em;
}
.plan__price small {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text-secondary);
	margin-left: 4px;
}
.plan__price-note {
	font-size: 12px;
	color: var(--color-text-secondary);
	margin: 0 0 var(--sp-m);
}
.plan__desc {
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 1.7;
	margin: 0 0 var(--sp-m);
	padding-top: var(--sp-m);
	border-top: 1px solid var(--color-border-soft);
}
.plan__features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sp-l);
}
.plan__features li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	line-height: 1.65;
	margin-bottom: 6px;
}
.plan__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 12px;
	background: var(--color-success);
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px var(--color-surface);
}
.plan__details {
	margin: 0 0 var(--sp-m);
	padding: var(--sp-s) var(--sp-m);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.02);
	font-size: 13px;
}
.plan__details summary {
	cursor: pointer;
	color: var(--color-accent);
	font-weight: 500;
	list-style: none;
	padding: 4px 0;
}
.plan__details summary::-webkit-details-marker { display: none; }
.plan__details summary::before {
	content: "▸ ";
	display: inline-block;
	transition: transform 0.15s;
}
.plan__details[open] summary::before {
	content: "▾ ";
}
.plan__details > div {
	padding-top: var(--sp-s);
}
.plan__details p {
	margin: 0 0 var(--sp-s);
	color: var(--color-text-secondary);
	font-size: 13px;
	line-height: 1.65;
}
.plan__details strong {
	color: var(--color-text);
	display: block;
	margin-bottom: 2px;
}

.flow-steps {
	counter-reset: step;
	list-style: none;
	padding: 0;
	margin: var(--sp-xl) 0;
	display: grid;
	gap: var(--sp-m);
}
.flow-steps li {
	counter-increment: step;
	background: var(--color-surface-2);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	padding: var(--sp-l);
	padding-left: calc(var(--sp-xxl) + var(--sp-m));
	position: relative;
}
.flow-steps li::before {
	content: "0" counter(step);
	position: absolute;
	left: var(--sp-l);
	top: var(--sp-l);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-accent);
	line-height: 1;
}
.flow-steps h4 {
	margin: 0 0 var(--sp-s);
	font-size: 16px;
}
.flow-steps p {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 14px;
	line-height: 1.7;
}

.faq {
	border-top: 1px solid var(--color-border-soft);
}
.faq details {
	border-bottom: 1px solid var(--color-border-soft);
	padding: var(--sp-m) 0;
}
.faq summary {
	font-weight: 600;
	cursor: pointer;
	padding-left: 28px;
	position: relative;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
	content: "Q";
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: 700;
}
.faq details[open] summary { color: var(--color-text); }
.faq-answer {
	padding: var(--sp-m) 0 0 28px;
	color: var(--color-text-secondary);
	position: relative;
}
.faq-answer::before {
	content: "A";
	position: absolute;
	left: 0;
	top: var(--sp-m);
	color: var(--color-success);
	font-weight: 700;
}

.industry-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--sp-s);
	list-style: none;
	padding: 0;
	margin: var(--sp-l) 0;
}
.industry-list li {
	background: var(--color-surface-2);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-md);
	padding: 10px;
	text-align: center;
	font-size: 13px;
	margin: 0;
}

/* =========================================================
   Contact Form 7 (ダーク化)
   ========================================================= */
.wpcf7 {
	margin-top: var(--sp-xl);
}
.wpcf7 p { margin: 0; }
.wpcf7-form label {
	display: block;
	margin-bottom: var(--sp-s);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	padding: 10px 12px;
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	min-height: 44px;
	margin-bottom: var(--sp-m);
	transition: border-color 0.15s;
}
.wpcf7-form textarea { min-height: 140px; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.15);
}
.wpcf7-form .wpcf7-acceptance {
	margin: var(--sp-m) 0;
}
.wpcf7-form input[type="submit"] {
	background: var(--color-white);
	color: var(--color-bg);
	border: 0;
	border-radius: var(--radius-md);
	padding: 12px 32px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	min-height: 48px;
	margin-top: var(--sp-m);
	transition: transform 0.12s, background 0.15s;
}
.wpcf7-form input[type="submit"]:hover {
	background: #e8e8e8;
	transform: translateY(-1px);
}
.wpcf7-spinner { filter: invert(1); }
.wpcf7-not-valid-tip {
	color: var(--color-danger);
	font-size: 12px;
	display: block;
	margin-top: -8px;
	margin-bottom: var(--sp-s);
}
.wpcf7-response-output {
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md) !important;
	padding: var(--sp-m) !important;
	margin-top: var(--sp-l) !important;
	color: var(--color-text);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
	.section-title { font-size: 40px; }
	.hero__title { font-size: 48px; }
	.ai-hero__title { font-size: 48px; }
	.page-title { font-size: 36px; }
}

@media (max-width: 768px) {
	:root {
		--container-pad: 20px;
		--sp-xxl: 48px;
	}
	body { font-size: 15px; }
	.hero { padding: var(--sp-xxl) 0; }
	.hero__title { font-size: 36px; }
	.hero__lead { font-size: 16px; }
	.section-title { font-size: 32px; }
	.ai-hero__title { font-size: 36px; }
	.page-title { font-size: 28px; }
	.cta-box__title { font-size: 24px; }

	.nav-list, .nav-cta { display: none; }
	.nav-toggle { display: flex; }
	.mobile-nav[aria-hidden="false"],
	.mobile-nav.is-open { display: block; }

	.card-grid,
	.feature-grid,
	.plan-grid,
	.ai-problem-grid { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; }
	.footer-nav-list { columns: 2; }

	.hero__meta { gap: var(--sp-m); font-size: 12px; }
	.hero__meta span { font-size: 18px; }

	.page-body h2 { font-size: 24px; }
	.page-body h3 { font-size: 18px; }
}

@media (max-width: 480px) {
	.hero__cta { flex-direction: column; }
	.hero__cta .btn { width: 100%; }
	.price-table { font-size: 13px; }
	.price-table th, .price-table td { padding: 8px; }
}