/* ============================================================
 * pages/lp-ai-business-system.css
 * AX LPは既存LPフォーマットへ合わせるため、web-marketing-support LPの
 * セクション設計・余白・カード・FAQ・フォームを流用する。
 * ============================================================ */

@import url("./lp-web-marketing-support.css");

:root {
	--lp-ax-radius-md: 0.3125rem;
	--lp-ax-radius-lg: 0.5625rem;
	--lp-ax-radius-xl: 0.8125rem;
	--lp-ax-radius-2xl: 1.125rem;
}

.lp-web-hero__bg-typo span:first-child {
	transform: translateX(-3vw);
}

.lp-web-hero__bg-typo span:last-child {
	transform: translateX(5vw);
}

.lp-web-hero__visual svg text {
	letter-spacing: 0;
}

.lp-web-strength__icon:empty {
	background:
		radial-gradient(circle at 35% 35%, rgba(91, 174, 174, 0.32), transparent 30%),
		radial-gradient(circle at 70% 70%, rgba(201, 136, 95, 0.3), transparent 34%),
		linear-gradient(135deg, rgba(6, 123, 123, 0.16), rgba(255, 255, 255, 0.95));
}

.lp-stage-ax {
	--stage-accent: var(--color-brand, #067B7B);
	--stage-action: var(--color-accent-action, #C9885F);
	--stage-cyan: var(--color-accent-intelligence, #5BAEAE);
	width: min(100%, 560px);
	justify-self: center;
}

.lp-stage-ax__sheet {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: var(--space-4);
	padding: clamp(var(--space-4), 3vw, var(--space-6));
	border: 1px solid rgba(6, 123, 123, 0.18);
	border-radius: var(--lp-ax-radius-2xl);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.58) 62%, rgba(91, 174, 174, 0.10)),
		var(--color-bg-base, #FAF9F7);
	box-shadow: 0 24px 58px rgba(26, 40, 38, 0.12);
}

.lp-stage-ax__sheet::before {
	content: "";
	position: absolute;
	inset: var(--space-3);
	z-index: -1;
	border: 1px dashed rgba(6, 123, 123, 0.18);
	border-radius: var(--lp-ax-radius-xl);
}

.lp-stage-ax__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid rgba(6, 123, 123, 0.14);
}

.lp-stage-ax__header span {
	color: var(--stage-accent);
	font-size: var(--fs-xs);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.lp-stage-ax__header strong {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-full);
	background: rgba(201, 136, 95, 0.14);
	color: var(--color-text-primary);
	font-size: var(--fs-sm);
}

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

.lp-stage-ax__node {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: var(--space-3);
	row-gap: var(--space-1);
	min-height: 92px;
	padding: var(--space-4);
	border: 1px solid rgba(26, 40, 38, 0.08);
	border-radius: var(--lp-ax-radius-lg);
	background: rgba(255, 255, 255, 0.68);
}

.lp-stage-ax__node span {
	display: grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 44px;
	aspect-ratio: 1;
	border-radius: var(--lp-ax-radius-md);
	background: var(--stage-accent);
	color: #fff;
	font-family: var(--font-en);
	font-weight: var(--fw-black);
}

.lp-stage-ax__node strong {
	align-self: end;
	font-size: var(--fs-base);
}

.lp-stage-ax__node p {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
}

.lp-stage-ax__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.lp-stage-ax__split div,
.lp-stage-ax__guard {
	padding: var(--space-3);
	border-radius: var(--lp-ax-radius-lg);
	background: rgba(6, 123, 123, 0.07);
}

.lp-stage-ax__split div:last-child {
	background: rgba(201, 136, 95, 0.12);
}

.lp-stage-ax__split em,
.lp-stage-ax__guard strong {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--color-text-primary);
	font-style: normal;
	font-weight: var(--fw-black);
}

.lp-stage-ax__split span,
.lp-stage-ax__guard span {
	color: var(--color-text-secondary);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
}

.lp-stage-ax__guard {
	border: 1px solid rgba(201, 136, 95, 0.22);
	background: rgba(201, 136, 95, 0.08);
}

@media (min-width: 768px) {
	.lp-stage-ax__flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

.lp-web-issue__title-line,
.lp-ax-why__title-line {
	display: inline-block;
	white-space: nowrap;
}

.lp-ax-issue-board {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.lp-ax-issue-card {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--space-4), 3vw, var(--space-5));
	border: 1px solid rgba(26, 40, 38, 0.10);
	border-radius: var(--lp-ax-radius-xl);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.50)),
		var(--color-bg-surface, #fff);
	box-shadow: 0 14px 34px rgba(26, 40, 38, 0.07);
}

.lp-ax-issue-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--color-brand), var(--color-accent-action));
}

.lp-ax-issue-card__tag {
	display: inline-flex;
	margin-bottom: var(--space-3);
	color: var(--color-brand);
	font-family: var(--font-en);
	font-size: var(--fs-xs);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.lp-ax-issue-card h3 {
	margin: 0 0 var(--space-3);
	font-size: clamp(1.12rem, 2.4vw, 1.45rem);
	line-height: 1.45;
}

.lp-ax-issue-card ul {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-ax-issue-card li {
	position: relative;
	padding-left: 1.15em;
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}

.lp-ax-issue-card li::before {
	content: "";
	position: absolute;
	top: 0.75em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent-action);
}

.lp-ax-issue-note {
	margin: var(--space-5) 0 0;
	padding: var(--space-4) 0 0;
	border-top: 1px solid rgba(6, 123, 123, 0.16);
	color: var(--color-text-primary);
	font-size: clamp(1rem, 1.7vw, 1.18rem);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-relaxed);
}

@media (min-width: 900px) {
	.lp-ax-issue-board {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lp-ax-plans__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.lp-ax-plan {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: var(--space-3);
	padding: clamp(var(--space-4), 3vw, var(--space-5));
	border: 1px solid rgba(6, 123, 123, 0.14);
	border-radius: var(--lp-ax-radius-xl);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.52)),
		var(--color-bg-surface, #fff);
	box-shadow: 0 16px 38px rgba(26, 40, 38, 0.08);
	transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-out-expo);
}

.lp-ax-plan::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--color-brand);
}

.lp-ax-plan > * {
	position: relative;
	z-index: 2;
}

.lp-ax-plan--featured {
	border-color: rgba(201, 136, 95, 0.72);
	background:
		radial-gradient(circle at 15% 0%, rgba(201, 136, 95, 0.26), transparent 34%),
		radial-gradient(circle at 95% 18%, rgba(158, 103, 67, 0.18), transparent 32%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(201, 136, 95, 0.15)),
		var(--color-bg-surface, #fff);
	box-shadow:
		0 28px 70px rgba(201, 136, 95, 0.20),
		0 18px 46px rgba(26, 40, 38, 0.12),
		0 0 0 5px rgba(201, 136, 95, 0.10);
}

.lp-ax-plan--featured::before {
	height: 7px;
	background: linear-gradient(90deg, var(--color-accent-action), var(--color-accent-empathy), var(--color-brand));
}

.lp-ax-plan--featured::after {
	content: "RECOMMENDED";
	position: absolute;
	top: 20px;
	right: -44px;
	z-index: 1;
	width: 170px;
	padding: 6px 0;
	transform: rotate(36deg);
	background: var(--color-brand);
	color: #fff;
	font-family: var(--font-en);
	font-size: 0.62rem;
	font-weight: var(--fw-black);
	letter-spacing: 0.08em;
	text-align: center;
}

.lp-ax-plan__badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

.lp-ax-plan__badge,
.lp-ax-plan__label {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	min-height: 28px;
	padding: 0 var(--space-2);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.lp-ax-plan__label {
	border: 1px solid rgba(6, 123, 123, 0.18);
	color: var(--color-brand);
}

.lp-ax-plan__badge {
	position: relative;
	gap: 7px;
	min-height: 34px;
	padding-inline: var(--space-3);
	border: 1px solid rgba(10, 20, 20, 0.92);
	background: #0A1414;
	color: #fff;
	box-shadow: 0 12px 24px rgba(10, 20, 20, 0.22);
}

.lp-ax-plan__badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28);
}

.lp-ax-plan__badge-note {
	color: var(--color-brand);
	font-size: var(--fs-xs);
	font-weight: var(--fw-black);
}

.lp-ax-plan__fit {
	margin: 0;
	color: var(--color-brand);
	font-size: clamp(1rem, 2vw, 1.15rem);
	font-weight: var(--fw-black);
	line-height: 1.55;
}

.lp-ax-plan__title {
	margin: 0;
	font-size: clamp(1.22rem, 2.4vw, 1.6rem);
	line-height: 1.35;
}

.lp-ax-plan__price {
	margin: 0;
	color: var(--color-brand);
	font-size: clamp(1.75rem, 3.6vw, 2.35rem);
	font-weight: var(--fw-black);
	line-height: 1.1;
}

.lp-ax-plan__price span {
	margin-left: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
}

.lp-ax-plan__desc {
	margin: 0;
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}

.lp-ax-plan__items {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-3) 0 0;
	border-top: 1px solid rgba(26, 40, 38, 0.08);
	list-style: none;
}

.lp-ax-plan__items li {
	position: relative;
	padding-left: 1.15em;
	color: var(--color-text-primary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-normal);
}

.lp-ax-plan__items li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-brand);
}

.lp-ax-plans__note {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
	padding: 0;
	border: 0;
	background: transparent;
}

.lp-ax-plans__notice {
	position: relative;
	display: grid;
	gap: var(--space-2);
	padding: clamp(var(--space-4), 3vw, var(--space-5));
	border: 1px solid rgba(26, 40, 38, 0.10);
	border-radius: var(--lp-ax-radius-xl);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(234, 243, 241, 0.62)),
		var(--color-bg-surface, #fff);
	box-shadow: 0 16px 36px rgba(26, 40, 38, 0.07);
}

.lp-ax-plans__notice::before {
	content: "";
	position: absolute;
	top: clamp(var(--space-4), 3vw, var(--space-5));
	left: clamp(var(--space-4), 3vw, var(--space-5));
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-accent-action);
	box-shadow: 0 0 0 8px rgba(201, 136, 95, 0.14);
}

.lp-ax-plans__notice-label {
	display: block;
	padding-left: 1.55rem;
	color: var(--color-brand);
	font-family: var(--font-en);
	font-size: var(--fs-xs);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.lp-ax-plans__notice h3 {
	margin: 0;
	color: var(--color-text-primary);
	font-size: clamp(1.08rem, 2vw, 1.32rem);
	font-weight: var(--fw-black);
	line-height: 1.45;
}

.lp-ax-plans__notice p {
	margin: 0;
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}

@media (min-width: 768px) {
	.lp-ax-plans__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-ax-plan--featured {
		transform: translateY(-8px);
	}

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

.lp-web-roadmap__title {
	font-size: clamp(2rem, 5.2vw, 4.2rem);
	font-weight: var(--fw-black);
	line-height: 1.18;
}

.lp-ax-why {
	position: relative;
	overflow: hidden;
	padding-block: clamp(var(--space-8), 9vw, var(--space-10));
	background: var(--color-bg-primary);
}

.lp-ax-why__inner,
.lp-ax-why__header {
	display: grid;
	gap: var(--space-6);
}

.lp-ax-why__title {
	margin: 0;
	font-size: clamp(2rem, 5.2vw, 4.2rem);
	font-weight: var(--fw-black);
	line-height: 1.18;
}

.lp-ax-why__lead {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: clamp(1rem, 1.7vw, 1.2rem);
	line-height: var(--lh-relaxed);
}

.lp-ax-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.lp-ax-why-card {
	padding: clamp(var(--space-4), 3vw, var(--space-5));
	border: 1px solid rgba(26, 40, 38, 0.10);
	border-radius: var(--lp-ax-radius-xl);
	background: rgba(255, 255, 255, 0.70);
	box-shadow: 0 14px 34px rgba(26, 40, 38, 0.07);
}

.lp-ax-why-card__num {
	display: block;
	margin-bottom: var(--space-3);
	color: var(--color-brand);
	font-family: var(--font-en);
	font-size: var(--fs-sm);
	font-weight: var(--fw-black);
}

.lp-ax-why-card h3 {
	margin: 0 0 var(--space-3);
	font-size: clamp(1.1rem, 2vw, 1.42rem);
	line-height: 1.45;
}

.lp-ax-why-card p {
	margin: 0;
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}

.lp-hero-diagnostic,
.lp-web-scope,
.lp-web-strength,
.lp-web-faq__item,
.lp-web-promise__card,
.contact-form,
.lp-web-form,
.wpcf7-form,
.contact-form__input,
.contact-form__textarea,
.contact-form__topic-option,
.lp-web-order__points li,
.lp-web-service__scope-block,
.lp-web-thanks-info__card {
	border-radius: var(--lp-ax-radius-lg);
}

.lp-web-order__points-num {
	border-radius: var(--lp-ax-radius-md);
}

@media (min-width: 900px) {
	.lp-ax-why__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* ════════════════════════════════════════════════════════════
 * クロスリンク帯：AI業務パスポート（/ai-literacy-training/）への控えめな導線
 *  2026-06-01 追加。AX本体の主CTAを弱めないよう、塗りボタンにせず
 *  細罫線の帯＋テキストリンク（サブ扱い）。LP既存の温色トンマナに準拠。
 * ════════════════════════════════════════════════════════════ */
.lp-crosslink-band { padding-block: var(--space-6); }
.lp-crosslink-band > .container { position: relative; }

.lp-crosslink {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-6);
	padding: var(--space-5) var(--space-6);
	border: 1px solid var(--color-border-subtle);
	background: var(--color-bg-surface);
}
.lp-crosslink--inset { margin-top: var(--space-7); }
.lp-crosslink__text {
	margin: 0;
	max-width: 62ch;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}
.lp-crosslink__link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding-block: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
	border-bottom: 1px solid var(--color-border-brand);
}
.lp-crosslink__link span { transition: transform var(--duration-fast) var(--ease-spring); }
.lp-crosslink__link:hover { color: var(--color-brand-700); }
.lp-crosslink__link:hover span { transform: translateX(4px); }

@media (max-width: 640px) {
	.lp-crosslink { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}