/* ============================================================
   Agent Readiness X — 差分スタイル
   （p-sxr-* は assets/sales-x-ray/style.css を継承。ここは新規UIだけ）
   ============================================================ */

:root {
	/* グローバルデザイントークンへ接続（独自色のハードコードを廃しブランド統一） */
	--arx-primary: var(--accent, #007a8a);
	--arx-primary-dark: var(--accent-dark, #006064);
	--arx-ink: var(--ink, #0B1220);
	--arx-ink-soft: var(--color-text-2, #2D3E50);
	--arx-mute: var(--color-text-light, #475569);
	--arx-surface: var(--color-surface, #fff);
	--arx-surface-alt: var(--color-bg, #F6F8FB);
	--arx-border: var(--color-border, rgba(15, 23, 42, 0.10));
	--arx-metal: var(--metal, #C8A45D);
	--arx-metal-soft: var(--metal-soft, #E5D4A8);
	--arx-green: #16a34a;
	--arx-yellow: #d97706;
	--arx-red: #dc2626;
	/* リッチ化派生: ティール→ゴールド金属のグラデ枠＋多層シャドウ */
	--arx-frame: linear-gradient(135deg, var(--arx-primary) 0%, var(--arx-metal) 62%, var(--arx-metal-soft) 100%);
	--arx-shadow-soft: var(--shadow-1, 0 6px 20px rgba(11, 18, 32, 0.10));
	--arx-shadow-lift: var(--shadow-2, 0 20px 60px rgba(11, 18, 32, 0.18));
}

/* ---------- 入力フォーム ---------- */
.p-arx-form { display: block; }
.p-arx-field { display: block; margin-bottom: 20px; }
.p-arx-field textarea {
	width: 100%;
	margin-top: 8px;
	padding: 16px 18px;
	font-size: 1.6rem;
	line-height: 1.7;
	border: 2px solid var(--arx-border);
	border-radius: 14px;
	background: var(--arx-surface);
	box-shadow: inset 0 1px 2px rgba(11, 18, 32, 0.04);
	resize: vertical;
	font-family: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.p-arx-field textarea:focus {
	outline: none;
	border-color: var(--arx-primary);
	box-shadow: 0 0 0 4px rgba(0, 122, 138, 0.12), inset 0 1px 2px rgba(11, 18, 32, 0.04);
}

/* ---------- データ種別チップ ---------- */
.p-arx-chips { border: 0; padding: 0; margin: 0 0 22px; }
.p-arx-chips legend {
	/* フォーム枠(.p-sxr-form)が navy→teal の暗背景のため、凡例は明色に（暗地に暗文字の修正・2026-06-25） */
	font-size: 1.4rem; font-weight: 700; color: #eaf7f9;
	margin-bottom: 12px; padding: 0;
}
.p-arx-chips__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
@media (max-width: 768px) { .p-arx-chips__grid { grid-template-columns: 1fr; } }
.p-arx-chip {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "emoji label" "emoji desc";
	column-gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 2px solid var(--arx-border);
	border-radius: 14px;
	background: var(--arx-surface);
	cursor: pointer;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.p-arx-chip:hover { border-color: var(--arx-primary); transform: translateY(-2px); box-shadow: var(--arx-shadow-soft); }
.p-arx-chip input { position: absolute; opacity: 0; pointer-events: none; }
.p-arx-chip__emoji { grid-area: emoji; font-size: 2.2rem; line-height: 1; }
.p-arx-chip__label { grid-area: label; font-weight: 700; font-size: 1.45rem; color: var(--arx-ink); }
.p-arx-chip__desc  { grid-area: desc; font-size: 1.15rem; color: var(--color-text-2, #4a6a7a); line-height: 1.5; }
.p-arx-chip:has(input:checked) {
	border-color: transparent;
	/* 不透明な白下地 + ティール微染め + ゴールド金属枠（暗いデモ背景でも文字を維持） */
	background:
		linear-gradient(rgba(0, 122, 138, 0.07), rgba(0, 122, 138, 0.07)) padding-box,
		linear-gradient(var(--arx-surface), var(--arx-surface)) padding-box,
		var(--arx-frame) border-box;
	box-shadow: var(--arx-shadow-soft);
}
.p-arx-chip:has(input:checked)::after {
	content: "✓";
	position: absolute; top: 8px; right: 12px;
	color: var(--arx-primary); font-weight: 900; font-size: 1.6rem;
}
.p-arx-submit { margin-top: 4px; }

/* ---------- 一次CTAの配色（2026-06-25・暗地に暗文字＝判読不能の修正） ----------
   c-button--primary は当ページのCSSに配色定義が無く、UA既定の暗文字に落ちていた。
   送信ボタン(暗いフォーム枠の上)・「登録して設計図を見る」(暗いリード枠の上)が
   背景に溶けていたため、ブランド塗り＋白文字の塗りCTAに統一。
   .p-arx-page スコープ＝共有 sales-x-ray(Account Intelligence) には不干渉。 */
.p-arx-page .c-button--primary {
	/* ⚠️ --arx-primary は trust テーマで明シアン #00d9ff に解決され、白文字が低コントラスト(≈1.5:1)になる。
	   そのためトークンに頼らず深いティールを直接指定し、白文字を AA 域(≈4.5〜6:1)に。テキストシャドウで仕上げ保証。 */
	background: linear-gradient(135deg, #005f6e 0%, #00788a 100%);
	color: #fff;
	border: 0;
	padding-inline: clamp(20px, 3vw, 30px);
	text-shadow: 0 1px 2px rgba(0, 20, 28, .45);
	box-shadow: 0 12px 30px rgba(0, 70, 82, .42);
	transition: filter .18s ease, box-shadow .18s ease, transform .18s ease;
}
.p-arx-page .c-button--primary span { color: #fff; }
.p-arx-page .c-button--primary svg { stroke: currentColor; }
.p-arx-page .c-button--primary:hover {
	filter: brightness(1.06);
	box-shadow: 0 16px 38px rgba(0, 122, 138, .48);
	transform: translateY(-1px);
}
.p-arx-page .c-button--primary:active { transform: translateY(0); }
.p-arx-page .c-button--primary:disabled { filter: none; box-shadow: 0 8px 20px rgba(0, 122, 138, .28); }

/* ---------- スコアカード（無料・スクショの主役） ---------- */
.p-arx-score {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 24px;
	align-items: center;
	margin: 28px 0;
	padding: 32px 34px;
	border-radius: 24px;
	/* luminous: 白基調＋内側の微発光、ティール→ゴールド金属のグラデ枠 */
	border: 2px solid transparent;
	background:
		radial-gradient(130% 110% at 0% 0%, rgba(0, 122, 138, 0.10), transparent 55%) padding-box,
		linear-gradient(150deg, #ffffff 0%, #f4fafc 100%) padding-box,
		var(--arx-frame) border-box;
	box-shadow: var(--arx-shadow-lift), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}
@media (max-width: 768px) { .p-arx-score { grid-template-columns: 1fr; text-align: center; } }
.p-arx-score__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 1.25rem; font-weight: 700; letter-spacing: .04em;
	color: var(--arx-mute); margin: 0 0 8px;
}
.p-arx-score__eyebrow::before {
	content: ""; width: 18px; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, var(--arx-primary), var(--arx-metal));
}
.p-arx-score__num {
	display: flex; align-items: baseline; gap: 6px;
	font-family: var(--font-en, sans-serif);
	font-weight: 900; line-height: 1;
}
@media (max-width: 768px) { .p-arx-score__num { justify-content: center; } }
.p-arx-score__num span { font-size: 7.2rem; }
.p-arx-score__num small { font-size: 2.2rem; color: var(--arx-mute); font-weight: 700; }
.p-arx-score__num.is-green  span { color: var(--arx-green); }
.p-arx-score__num.is-yellow span { color: var(--arx-yellow); }
.p-arx-score__num.is-red    span { color: var(--arx-red); }
.p-arx-score__badge {
	display: inline-block; margin: 10px 0 6px;
	padding: 6px 16px; border-radius: 50px;
	font-weight: 800; font-size: 1.35rem;
}
.p-arx-score__badge.is-green  { background: rgba(22,163,74,0.12);  color: var(--arx-green); }
.p-arx-score__badge.is-yellow { background: rgba(217,119,6,0.12);  color: var(--arx-yellow); }
.p-arx-score__badge.is-red    { background: rgba(220,38,38,0.12);  color: var(--arx-red); }
.p-arx-score__dt { font-size: 1.2rem; color: var(--arx-mute); margin: 8px 0 0; }
.p-arx-score__badge.is-green  { box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.22); }
.p-arx-score__badge.is-yellow { box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.22); }
.p-arx-score__badge.is-red    { box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.22); }

/* ---------- 6軸レーダー ---------- */
.p-arx-radar { width: 100%; max-width: 320px; height: auto; margin: 0 auto; display: block; }
.p-arx-radar__grid  { fill: none; stroke: rgba(15,23,42,0.10); stroke-width: 1; }
.p-arx-radar__spoke { stroke: rgba(15,23,42,0.10); stroke-width: 1; }
.p-arx-radar__area  { fill: rgba(0,122,138,0.22); stroke: var(--arx-primary); stroke-width: 2; }
.p-arx-radar__label { fill: var(--arx-ink); font-size: 11px; font-weight: 700; }

/* ---------- 詳細ガードレール設計図（ゲート対象） ---------- */
.p-arx-detail {
	position: relative;
	margin: 24px 0;
	padding: 24px 28px;
	border-radius: 20px;
	background: var(--arx-surface);
	border: 1px solid var(--arx-border);
	box-shadow: var(--arx-shadow-soft);
}
.p-arx-detail__head {
	font-size: 1.7rem; font-weight: 800; color: var(--arx-ink);
	margin-bottom: 14px;
}
.p-arx-detail__body.is-locked {
	filter: blur(7px);
	user-select: none;
	pointer-events: none;
	min-height: 180px;
	max-height: 240px;
	overflow: hidden;
}
.p-arx-detail__lock {
	position: absolute; inset: 60px 16px 16px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.92) 60%);
	border-radius: 16px;
}
.p-arx-detail__lock-card {
	max-width: 460px; text-align: center; padding: 28px 26px;
	border: 2px solid transparent;
	border-radius: 18px;
	background:
		linear-gradient(var(--arx-surface), var(--arx-surface)) padding-box,
		var(--arx-frame) border-box;
	box-shadow: var(--arx-shadow-lift);
}
.p-arx-detail__lock-icon {
	font-size: 2.8rem; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 66px; height: 66px; margin-bottom: 6px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 164, 93, 0.20), rgba(0, 122, 138, 0.10) 68%, transparent 80%);
}
.p-arx-detail__lock-title { font-size: 1.8rem; font-weight: 800; color: var(--arx-ink); margin: 8px 0; }
.p-arx-detail__lock-text { font-size: 1.35rem; color: var(--arx-mute); line-height: 1.7; margin-bottom: 16px; }

/* ---------- チェックリスト ---------- */
.p-arx-checklist { list-style: none; padding: 0; margin: 12px 0; }
.p-arx-check {
	position: relative; padding: 8px 8px 8px 34px; margin: 4px 0;
	border-radius: 8px; background: rgba(0,122,138,0.04);
	font-size: 1.4rem; line-height: 1.6;
}
.p-arx-check::before {
	content: "☐"; position: absolute; left: 10px; top: 7px;
	color: var(--color-text-2, #4a6a7a); font-size: 1.5rem;
}
.p-arx-check.is-on::before { content: "✅"; }

/* ---------- アクションボタン群 ---------- */
.p-arx-actions {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin-top: 20px;
}
.p-arx-actions .c-button { font-size: 1.35rem; }

/* ============================================================
   監査エージェント・グリッド: 3カラム（和田指示 2026-06-25・以前作ったツールと同じ収まりに）
   3体を1段に3枚で収める（roi撤去で2段目の余りが消えクリーンな一列に）。各カードが広く長文も読みやすい。
   .p-arx-page スコープで Account Intelligence は不干渉。
   ============================================================ */
.p-arx-page .p-sxr-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .p-arx-page .p-sxr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .p-arx-page .p-sxr-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ✦ MAGIC LAYER — Agent Readiness X
   既存デザインシステム(--sxr-* / --arx-*)の上に「魔法の瞬間」を足す追加レイヤー。
   HTML構造・テキスト・JSON-LD には一切触れない（SEO非破壊・presentationのみ）。
   .is-reveal は app.js がスコア確定時に付与。reduced-motion / モバイルで自動的に静かになる。
   ============================================================ */

/* ---- ① 起動儀式（カードが時間差で立ち上がる「波打つ」入場）は和田指示で撤去（2026-06-25）
        3体は最終位置に静かに表示する＝波のうねりは出さない。
        待機/監査中の dot・進捗・スキャンシマーは sales-x-ray 基盤側で従来どおり機能する。 ---- */

/* ---- ② チップの手応え: 選択時に微ポップ ---- */
.p-arx-chip:has(input:checked) { animation: arx-chip-pop .26s cubic-bezier(.2,1.4,.4,1); }
@keyframes arx-chip-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.045) translateY(-2px); }
	100% { transform: scale(1); }
}

/* ============================================================
   ③ クライマックス: スコア提示の「魔法」
   ============================================================ */
.p-arx-score { position: relative; overflow: hidden; isolation: isolate; }

/* 帯色のオーラ（登場時にふわっと点り、収束する） */
.p-arx-score::before {
	content: "";
	position: absolute; z-index: -1;
	width: 560px; height: 560px;
	left: -80px; top: 50%;
	transform: translateY(-50%) scale(.55);
	border-radius: 50%;
	background: radial-gradient(circle at center, var(--arx-aura, rgba(0,122,138,.18)), transparent 68%);
	opacity: 0;
	transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,0,1);
	pointer-events: none;
}
.p-arx-score.is-reveal::before { opacity: 1; transform: translateY(-50%) scale(1); }
.p-arx-score.is-green  { --arx-aura: rgba(22,163,74,.22); }
.p-arx-score.is-yellow { --arx-aura: rgba(217,119,6,.22); }
.p-arx-score.is-red    { --arx-aura: rgba(220,38,38,.20); }

/* カード本体の登場（.is-animating＝可視タブでのみJSが付与。非表示タブでは静止＝最終可視のまま） */
.p-arx-score.is-reveal.is-animating { animation: arx-card-in .7s cubic-bezier(.2,.7,0,1) both; }
@keyframes arx-card-in {
	from { opacity: 0; transform: translateY(18px) scale(.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 数字: 帯色の発光 + カウントアップ着地のポップ（tabular-numsで桁の揺れを防ぐ） */
.p-arx-score__num span {
	font-variant-numeric: tabular-nums;
	filter: drop-shadow(0 6px 18px var(--arx-aura, rgba(0,122,138,.18)));
}
.p-arx-score.is-reveal.is-animating .p-arx-score__num span { animation: arx-num-pop .6s cubic-bezier(.2,1.25,.4,1) .04s both; }
@keyframes arx-num-pop {
	0%   { transform: scale(.82); }
	62%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}

/* 安全度メーター（0 → スコア% へ満ちていく） */
.p-arx-score__meter {
	height: 10px; max-width: 320px;
	margin: 16px 0 2px;
	border-radius: 999px;
	background: rgba(15,23,42,.07);
	overflow: hidden;
}
@media (max-width: 768px) { .p-arx-score__meter { margin-inline: auto; } }
.p-arx-score__meter-fill {
	height: 100%; width: 0; border-radius: inherit;
	background: linear-gradient(90deg, var(--arx-primary), #00bfa5);
}
.p-arx-score__meter-fill.is-green  { background: linear-gradient(90deg, #15803d, #34d399); }
.p-arx-score__meter-fill.is-yellow { background: linear-gradient(90deg, #b45309, #fbbf24); }
.p-arx-score__meter-fill.is-red    { background: linear-gradient(90deg, #b91c1c, #f87171); }
.p-arx-score.is-reveal .p-arx-score__meter-fill {
	width: var(--target, 0%);
	transition: width 1.15s cubic-bezier(.2,.7,0,1) .15s;
	box-shadow: 0 0 14px var(--arx-aura, rgba(0,122,138,.2));
}

/* 6軸レーダー: 面が中心から展開する */
.p-arx-radar__area { transform-box: fill-box; transform-origin: center; }
.p-arx-score.is-reveal.is-animating .p-arx-radar__area { animation: arx-radar-draw .9s cubic-bezier(.2,.7,0,1) .28s both; }
@keyframes arx-radar-draw {
	0%   { transform: scale(.06); opacity: 0; }
	70%  { opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* バッジ: カウントアップ着地後にポップイン */
.p-arx-score.is-reveal.is-animating .p-arx-score__badge { animation: arx-badge-in .5s cubic-bezier(.2,1.2,.4,1) .9s both; }
@keyframes arx-badge-in {
	from { opacity: 0; transform: translateY(7px) scale(.92); }
	to   { opacity: 1; transform: none; }
}

/* ---- reduced-motion: 動きを止め、最終状態だけ見せる ---- */
@media (prefers-reduced-motion: reduce) {
	.p-arx-page .p-sxr-grid > .p-sxr-agent,
	.p-arx-chip:has(input:checked),
	.p-arx-score.is-reveal,
	.p-arx-score.is-reveal .p-arx-score__num span,
	.p-arx-score.is-reveal .p-arx-radar__area,
	.p-arx-score.is-reveal .p-arx-score__badge { animation: none !important; }
	.p-arx-score::before { opacity: 1 !important; transform: translateY(-50%) scale(1) !important; transition: none !important; }
	.p-arx-score.is-reveal .p-arx-score__meter-fill { width: var(--target, 0%); transition: none !important; }
}

/* ============================================================
   ✦✦ MOTION+ レイヤー（2026-06-21）— 動きをさらにリッチに
   既存マジックレイヤーの上に「稼働してる感」の premium な動きを足す。
   バウンス/派手は無し（デザイン契約: restrained）。finite か一過性stateに限定。
   末尾の reduced-motion ガードで全停止。HTML/JSON-LD不変。
   ============================================================ */

/* ① 監査中エージェント: スキャンするシマー（"今解析している"ライブ感） */
.p-arx-page .p-sxr-agent[data-status="running"] { position: relative; --arx-scan-tint: rgba(0,122,138,.12); }
.p-arx-page .p-sxr-agent[data-status="running"]::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
	background: linear-gradient(105deg, transparent 40%, var(--arx-scan-tint) 50%, transparent 60%);
	background-size: 250% 100%;
	animation: arx-scan 2.1s linear infinite;
}
@keyframes arx-scan { from { background-position: 135% 0; } to { background-position: -135% 0; } }

/* （進捗バーのシマーは sales-x-ray 基盤の .p-sxr-progress__fill::after が既に提供＝重複追加しない） */

/* ③ 眉のティック: 0→18px に描かれて現れる */
.p-arx-score.is-reveal.is-animating .p-arx-score__eyebrow::before {
	animation: arx-tick-draw .5s cubic-bezier(.2,.7,0,1) .12s both;
}
@keyframes arx-tick-draw { from { width: 0; opacity: 0; } to { width: 18px; opacity: 1; } }

/* ④ 安全度メーター: 充填後に光のシマーが一度走る */
.p-arx-score__meter-fill { position: relative; overflow: hidden; }
.p-arx-score.is-reveal .p-arx-score__meter-fill::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
	transform: translateX(-120%);
	animation: arx-meter-shimmer 1.2s cubic-bezier(.2,.7,0,1) 1.15s 1 both;
}
@keyframes arx-meter-shimmer { to { transform: translateX(120%); } }

/* ⑤ レーダー・スイープ: 確定時にレーダー針が一度ぐるり走査して消える（thematic） */
.p-arx-radar__sweep {
	stroke: var(--arx-primary); stroke-width: 2; stroke-linecap: round; opacity: 0;
	transform-box: view-box; transform-origin: 150px 120px;
	filter: drop-shadow(0 0 4px var(--arx-aura, rgba(0,122,138,.35)));
}
.p-arx-score.is-reveal.is-animating .p-arx-radar__sweep {
	animation: arx-radar-sweep 1.35s cubic-bezier(.3,0,.2,1) .35s 1 both;
}
@keyframes arx-radar-sweep {
	0%   { opacity: 0; transform: rotate(-92deg); }
	14%  { opacity: .9; }
	88%  { opacity: .5; }
	100% { opacity: 0; transform: rotate(268deg); }
}

/* ⑥ スコアカードのオーラ: ごく微かに呼吸（ambient・低速低振幅で"生きてる"質感） */
.p-arx-score.is-reveal::before { animation: arx-aura-breathe 7s ease-in-out 1.5s infinite; }
@keyframes arx-aura-breathe {
	0%, 100% { transform: translateY(-50%) scale(1);    opacity: 1; }
	50%      { transform: translateY(-50%) scale(1.045); opacity: .86; }
}

/* ---- MOTION+ も reduced-motion で静止（最終状態のみ） ---- */
@media (prefers-reduced-motion: reduce) {
	.p-arx-page .p-sxr-agent[data-status="running"]::after,
	.p-arx-score.is-reveal .p-arx-score__meter-fill::after { display: none !important; }
	.p-arx-score.is-reveal.is-animating .p-arx-score__eyebrow::before,
	.p-arx-score.is-reveal.is-animating .p-arx-radar__sweep,
	.p-arx-score.is-reveal::before { animation: none !important; }
	.p-arx-radar__sweep { opacity: 0 !important; }
}

/* ============================================================
   ✦ リード解放セクションの可読性（2026-06-21・「見にくい」対応）
   元の明るいシアン地(#0099cc)＋白文字は WCAG AA 未達(白/#0099cc≒2.9:1)。
   深いブランド地(navy→teal)に差し替えて白文字を映えさせる(≒6.8:1)。
   AR-X だけに適用（共有 sales-x-ray base は変更しない）。
   ============================================================ */
aside.p-sxr-lead.p-arx-lead {
	background: linear-gradient(135deg, #0a1626 0%, #0d2f3a 46%, #00566a 100%);
	box-shadow: var(--shadow-2, 0 30px 60px -22px rgba(11, 18, 32, 0.45));
}
/* グリッドの白線オーバーレイは暗地で目立ちすぎるので右上だけ薄く残す */
aside.p-sxr-lead.p-arx-lead::before { mask-image: radial-gradient(ellipse at top right, rgba(0, 0, 0, .55), transparent 70%); opacity: .6; }
/* 本文・リンクのコントラストを底上げ */
aside.p-arx-lead .p-sxr-lead__copy p { color: rgba(255, 255, 255, 0.92); }
aside.p-arx-lead .p-sxr-lead__copy a { color: #fff; text-decoration-color: var(--arx-metal, #C8A45D); text-underline-offset: 3px; }
/* 入力フォームのパネルを暗地でも分かるよう少し持ち上げる */
aside.p-arx-lead .p-sxr-lead__form { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }

/* ============================================================
   ✦✦✦ LUMINOUS UNIFY (2026-06-21) — 和田指示「ページ全体を luminous で統一」
   スコアカードの premium 質感（--arx-frame 金属ヘアライン / 微発光ウォッシュ / 多層シャドウ）を
   intro バレット・3体 role・3STEPS・FAQ・比較表へ波及させ、ページ全体を一体感のある質感に。
   - 全セレクタを .p-arx-page にスコープ＝共有 sales-x-ray(Account Intelligence) には不干渉
   - テキスト色・padding・radius は base のまま＝レイアウト/コントラスト非破壊
   - HTML / JSON-LD は不変（presentation のみ）。動きは増やさない（transition のみ）
   ============================================================ */

/* 共通 luminous カード地（スコアカードと同じ signature・ウォッシュは薄め） */
.p-arx-page .p-sxr-bullets li,
.p-arx-page .p-sxr-roles .p-sxr-role,
.p-arx-page .p-sxr-steps li {
	border: 1.5px solid transparent;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(0, 122, 138, 0.07), transparent 56%) padding-box,
		linear-gradient(160deg, #ffffff 0%, #f5fbfc 100%) padding-box,
		var(--arx-frame) border-box;
	box-shadow: var(--arx-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.p-arx-page .p-sxr-bullets li:hover,
.p-arx-page .p-sxr-roles .p-sxr-role:hover,
.p-arx-page .p-sxr-steps li:hover {
	box-shadow: var(--arx-shadow-lift), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* 統合(strategist) role は主役級＝ゴールド寄りの発光＋やや太い金属枠 */
.p-arx-page .p-sxr-role--strategist {
	border: 2px solid transparent;
	background:
		radial-gradient(120% 130% at 0% 0%, rgba(200, 164, 93, 0.12), transparent 60%) padding-box,
		linear-gradient(150deg, #ffffff 0%, #fbf7ee 100%) padding-box,
		var(--arx-frame) border-box;
	box-shadow: var(--arx-shadow-lift);
}

/* FAQ: 行が多いので控えめ＝hover で縁が灯り、開いた質問だけ金属フレームで強調 */
.p-arx-page .p-sxr-faq__item {
	border: 1.5px solid var(--arx-border);
	transition: box-shadow .2s ease, border-color .2s ease;
}
.p-arx-page .p-sxr-faq__item:hover { border-color: rgba(0, 122, 138, 0.35); }
.p-arx-page .p-sxr-faq__item[open] {
	border-color: transparent;
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		var(--arx-frame) border-box;
	box-shadow: var(--arx-shadow-soft);
}

/* 比較表: 枠を金属化＋ヘッダ自社列を紫→ブランド(ティール→ゴールド)へ再着色 */
.p-arx-page .p-sxr-compare__wrap {
	border: 1.5px solid transparent;
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		var(--arx-frame) border-box;
	box-shadow: var(--arx-shadow-lift);
}
.p-arx-page .p-sxr-compare thead th.p-sxr-compare__us {
	/* trust の --accent/--metal は明シアン＝白文字が AA 未達。深いブランド地に固定し白文字を映えさせる(≒6.8〜18:1) */
	background: linear-gradient(135deg, #0a1626 0%, #0d2f3a 50%, #00566a 100%);
	color: #fff;
	border-bottom: 2px solid var(--arx-metal, #00BCD4);
}
.p-arx-page .p-sxr-compare__us {
	background: rgba(0, 122, 138, 0.08);
}

/* ステータスピル(守りのマルチエージェント診断…)も金属ヘアラインで上質に */
.p-arx-page .p-sxr-status {
	border: 1px solid transparent;
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		var(--arx-frame) border-box;
	box-shadow: var(--arx-shadow-soft);
}

/* ============================================================
   ✦✦✦✦✦ REVEAL+ MOTION (2026-06-25) — 和田指示「動きの見せ方をすごく」
   配色は元のまま。スコア確定クライマックスの“見せ方”だけ強化＝
   Account Intelligence と動きで差別化する。
   - .p-arx-page スコープ ＝ sales-x-ray(Account Intelligence) に不干渉
   - 一過性 state .is-reveal.is-animating に限定（常時アニメ無し）
   - 配色は既存トークン/スコア色(--arx-aura)のみ＝色は変えない
   - 末尾 reduced-motion ガードで全停止・HTML/JSON-LD/テキスト不変
   ============================================================ */

/* ① 判定バッジ: 確定時に衝撃波リングが一度広がり“決まる” */
.p-arx-page .p-arx-score__badge { position: relative; }
.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-score__badge::after {
	content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
	border: 2px solid var(--arx-aura, rgba(0, 122, 138, .5));
	animation: arx-badge-shock .72s cubic-bezier(.2, .7, 0, 1) 1.02s 1 both;
}
@keyframes arx-badge-shock {
	0%   { opacity: 0;   transform: scale(.92); }
	28%  { opacity: .85; }
	100% { opacity: 0;   transform: scale(1.65); }
}

/* ② 6軸ラベル: 各次元が順に“スキャンイン”（6視点で解析している感） */
.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-radar__label {
	opacity: 0; animation: arx-axis-in .4s ease both;
}
.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-radar__label:nth-of-type(1) { animation-delay: .50s; }
.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-radar__label:nth-of-type(2) { animation-delay: .59s; }
.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-radar__label:nth-of-type(3) { animation-delay: .68s; }
.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-radar__label:nth-of-type(4) { animation-delay: .77s; }
.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-radar__label:nth-of-type(5) { animation-delay: .86s; }
.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-radar__label:nth-of-type(6) { animation-delay: .95s; }
@keyframes arx-axis-in { from { opacity: 0; } to { opacity: 1; } }

/* ③ レーダー・ping: 中心から探知の波紋が一度広がる（探知の“すごい”瞬間） */
.p-arx-page .p-arx-score__radar { position: relative; }
.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-score__radar::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
	margin: -8px 0 0 -8px; border-radius: 50%;
	border: 2px solid var(--arx-aura, rgba(0, 122, 138, .6));
	pointer-events: none;
	animation: arx-radar-ping 1.1s cubic-bezier(.2, .7, 0, 1) .5s 1 both;
}
@keyframes arx-radar-ping {
	0%   { opacity: .8; transform: scale(.3); }
	100% { opacity: 0;  transform: scale(7); }
}

/* ---- REVEAL+ も reduced-motion で静止（最終状態のみ） ---- */
@media (prefers-reduced-motion: reduce) {
	.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-score__badge::after,
	.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-score__radar::before { display: none !important; }
	.p-arx-page .p-arx-score.is-reveal.is-animating .p-arx-radar__label { opacity: 1 !important; animation: none !important; }
}

/* ============================================================
   ✦ CONTRAST FIXES (2026-06-26) — 実機 computed-contrast 監査で検出
   明シアン(--sxr-accent #00d9ff / --sxr-accent-dark #0099cc)が明るい地に載って
   低コントラスト(1.5〜3.3:1)だった箇所を、深いティールへ。配色のみ＝
   HTML/JSON-LD/レイアウト不変（SEO非破壊）。.p-arx-page スコープ＝
   共有 sales-x-ray(Account Intelligence) には不干渉。
   ============================================================ */
/* ① 小ラベル: eyebrow(DEMO/HOW IT WORKS…) / #01·#02·#03 / SYNTHESIS / 進捗% を #006e8f(≈5:1+) */
.p-arx-page .p-sxr-h2 small,
.p-arx-page .p-sxr-agent__num,
.p-arx-page .p-sxr-strategist__label,
.p-arx-page .p-sxr-progress__pct { color: #006e8f; }

/* ② 監査結果テーブルの見出しセル: #0099cc on 白(3.27) → #00566a(AA) */
.p-arx-page .p-sxr-md th { color: #00566a; }

/* ③ リード解放フォームの送信ボタン: AR-Xが span を白字化する一方 base が白グラデ地のまま
   ＝白文字×白ボタンで不可視だった。AR-Xのティール一次CTAに再スキンし可視化＆統一。 */
aside.p-arx-lead .p-sxr-lead__submit {
	background: linear-gradient(135deg, #005f6e 0%, #00788a 100%) !important;
	color: #fff !important;
}
aside.p-arx-lead .p-sxr-lead__submit svg { stroke: #fff; }


/* ============================================================
   新フロー（2026-07-03）: モザイク先出し + メールゲート + 生成中プレミアム帯
   スコアは実データから即算出し、数字はモザイク（ぼかし）で先出し。
   詳細設計図はメール登録後に生成・表示＋メール返却。全て .p-arx-page スコープ。
   ============================================================ */

/* ---------- STEP A: モザイク先出し + メールゲート ---------- */
.p-arx-teaser { margin-top: 26px; }
.p-arx-teaser__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 22px;
	align-items: stretch;
}
@media (max-width: 860px) { .p-arx-teaser__grid { grid-template-columns: 1fr; } }

/* 左: 診断結果プレビュー（プレミアム暗地・数字はモザイク） */
.p-arx-teaser__preview {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	padding: 26px 26px 30px;
	color: #eaf7f9;
	background:
		radial-gradient(120% 120% at 12% 0%, rgba(0, 122, 138, 0.35), transparent 60%),
		linear-gradient(155deg, #0a1626 0%, #0d2f3a 55%, #00566a 100%);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: var(--arx-shadow-lift);
}
.p-arx-teaser__eyebrow {
	font-size: 1.15rem; font-weight: 700; letter-spacing: .04em;
	color: var(--arx-metal-soft); margin: 0 0 10px;
}
.p-arx-teaser__scoreline { display: flex; align-items: baseline; gap: 8px; }
.p-arx-teaser__num {
	font-size: 6.4rem; font-weight: 900; line-height: 1;
	font-variant-numeric: tabular-nums;
	/* 実スコアをモザイク（ぼかし）で先出し＝色・桁感は伝わるが確定値は登録後 */
	filter: blur(9px);
	opacity: .92;
	text-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
	user-select: none;
}
.p-arx-teaser__scoreline small { font-size: 1.8rem; color: #b9d9de; filter: blur(1px); }
.p-arx-teaser__badge {
	margin-left: auto;
	font-size: 1.15rem; font-weight: 800;
	padding: 5px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #eaf7f9;
}
.p-arx-teaser__meter {
	margin: 16px 0 12px; height: 12px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.14); overflow: hidden;
}
.p-arx-teaser__meter-fill {
	height: 100%; width: 0; border-radius: 999px;
	background: linear-gradient(90deg, #35d6c2, #00bcd4);
	transition: width .9s cubic-bezier(.22,.61,.36,1);
	filter: blur(1.5px);
}
.p-arx-teaser__meter-fill.is-green  { background: linear-gradient(90deg, #34d399, #16a34a); }
.p-arx-teaser__meter-fill.is-yellow { background: linear-gradient(90deg, #fbbf24, #d97706); }
.p-arx-teaser__meter-fill.is-red    { background: linear-gradient(90deg, #fb7185, #dc2626); }
.p-arx-teaser__dt { font-size: 1.2rem; color: #cfe8ec; margin: 0; }
.p-arx-teaser__mosaic {
	display: grid; gap: 9px; margin: 20px 0 6px;
	filter: blur(5px); opacity: .55;
}
.p-arx-teaser__mosaic span {
	display: block; height: 11px; border-radius: 6px;
	background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
}
.p-arx-teaser__veil {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 22px 18px 20px;
	text-align: center;
	background: linear-gradient(to top, rgba(6, 15, 24, 0.92) 40%, rgba(6, 15, 24, 0));
	font-size: 1.3rem; line-height: 1.6; color: #eaf7f9;
}
.p-arx-teaser__veil p { margin: 6px 0 0; }
.p-arx-teaser__lockicon { font-size: 2.6rem; display: inline-block; }

/* 右: メールゲート（=リード確保） */
.p-arx-gate {
	border-radius: 18px;
	padding: 26px 26px 24px;
	background: var(--arx-surface);
	border: 1px solid transparent;
	background:
		linear-gradient(var(--arx-surface), var(--arx-surface)) padding-box,
		var(--arx-frame) border-box;
	box-shadow: var(--arx-shadow-lift);
}
.p-arx-gate__eyebrow { font-size: 1.2rem; font-weight: 800; color: var(--arx-primary); margin: 0 0 6px; letter-spacing: .02em; }
.p-arx-gate__title { font-size: 2.1rem; line-height: 1.4; color: var(--arx-ink); margin: 0 0 10px; }
.p-arx-gate__title strong { color: var(--arx-primary-dark); }
.p-arx-gate__lead { font-size: 1.35rem; line-height: 1.75; color: var(--arx-ink-soft); margin: 0 0 18px; }
.p-arx-gate__lead strong { color: var(--arx-ink); }
.p-arx-gate__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 520px) { .p-arx-gate__row { grid-template-columns: 1fr; } }
.p-arx-gate__form label > span { display: block; font-size: 1.2rem; font-weight: 700; color: var(--arx-ink-soft); margin-bottom: 5px; }
.p-arx-gate__form label em { color: var(--arx-red); font-style: normal; }
.p-arx-gate__form input[type="text"],
.p-arx-gate__form input[type="email"],
.p-arx-gate__form textarea {
	width: 100%; padding: 11px 13px; font-size: 1.45rem;
	border: 2px solid var(--arx-border); border-radius: 11px;
	background: var(--arx-surface); font-family: inherit;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.p-arx-gate__form input:focus,
.p-arx-gate__form textarea:focus {
	outline: none; border-color: var(--arx-primary);
	box-shadow: 0 0 0 4px rgba(0, 122, 138, 0.12);
}
.p-arx-gate__more { margin: 4px 0 14px; }
.p-arx-gate__more > summary {
	cursor: pointer; font-size: 1.25rem; font-weight: 700;
	color: var(--arx-primary); padding: 8px 0; list-style: none;
}
.p-arx-gate__more > summary::-webkit-details-marker { display: none; }
.p-arx-gate__more > summary::before { content: "＋ "; font-weight: 900; }
.p-arx-gate__more[open] > summary::before { content: "－ "; }
.p-arx-gate__more .p-sxr-lead__interests { margin: 6px 0 12px; }
.p-arx-gate__more .p-sxr-lead__interests legend { font-size: 1.2rem; font-weight: 700; color: var(--arx-ink-soft); margin-bottom: 8px; }
.p-arx-gate__more .p-sxr-lead__interests label { display: flex; gap: 8px; align-items: center; font-size: 1.3rem; color: var(--arx-ink-soft); padding: 4px 0; }
.p-arx-gate__submit { width: 100%; justify-content: center; margin-top: 4px; }
.p-arx-gate__note { font-size: 1.15rem; line-height: 1.6; color: var(--arx-mute); margin: 12px 0 0; }
.p-arx-gate__note.is-err { color: var(--arx-red); font-weight: 700; }

/* ---------- STEP B: 生成中プレミアム帯 ---------- */
.p-arx-gen {
	position: relative; overflow: hidden;
	border-radius: 18px; padding: 26px 26px 22px; margin-bottom: 22px;
	color: #eaf7f9;
	background:
		radial-gradient(130% 120% at 88% 0%, rgba(0, 188, 212, 0.28), transparent 55%),
		linear-gradient(150deg, #0a1626 0%, #0d2f3a 60%, #00566a 100%);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: var(--arx-shadow-lift);
}
.p-arx-gen__badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 1.2rem; font-weight: 800; letter-spacing: .02em;
	padding: 5px 13px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--arx-metal-soft);
}
.p-arx-gen__pulse {
	width: 9px; height: 9px; border-radius: 50%;
	background: #35d6c2; box-shadow: 0 0 0 0 rgba(53, 214, 194, 0.6);
	animation: arxPulse 1.6s ease-out infinite;
}
@keyframes arxPulse {
	0%   { box-shadow: 0 0 0 0 rgba(53, 214, 194, 0.55); }
	70%  { box-shadow: 0 0 0 10px rgba(53, 214, 194, 0); }
	100% { box-shadow: 0 0 0 0 rgba(53, 214, 194, 0); }
}
.p-arx-gen__title { font-size: 2.2rem; line-height: 1.4; margin: 14px 0 8px; color: #fff; }
.p-arx-gen__lead { font-size: 1.35rem; line-height: 1.75; color: #cfe8ec; margin: 0 0 18px; }
.p-arx-gen__lead strong { color: #fff; }
.p-arx-gen__slides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 640px) { .p-arx-gen__slides { grid-template-columns: 1fr; } }
.p-arx-gen__slide {
	position: relative; overflow: hidden;
	border-radius: 12px; padding: 14px; min-height: 118px;
	background: linear-gradient(160deg, #ffffff 0%, #eef6f7 100%);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 10px 30px rgba(6, 15, 24, 0.35);
	display: flex; flex-direction: column; gap: 8px;
}
.p-arx-gen__slide::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 66%);
	transform: translateX(-120%);
	animation: arxShimmer 2.4s ease-in-out infinite;
}
.p-arx-gen__slide:nth-child(2)::after { animation-delay: .5s; }
.p-arx-gen__slide:nth-child(3)::after { animation-delay: 1s; }
@keyframes arxShimmer { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(120%); } }
.p-arx-gen__slide-bar { display: block; height: 10px; width: 56%; border-radius: 5px; background: var(--arx-frame); }
.p-arx-gen__slide-line { display: block; height: 7px; border-radius: 4px; background: rgba(11, 18, 32, 0.14); }
.p-arx-gen__slide-chart { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: auto; }
.p-arx-gen__slide-chart i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--arx-primary), var(--arx-metal)); }
.p-arx-gen__slide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: auto; }
.p-arx-gen__slide-grid i { height: 15px; border-radius: 4px; background: rgba(0, 122, 138, 0.18); }
.p-arx-gen__slide-ring {
	width: 44px; height: 44px; border-radius: 50%; margin: 4px auto auto;
	background: conic-gradient(var(--arx-primary) 0 62%, rgba(11,18,32,0.10) 62% 100%);
	-webkit-mask: radial-gradient(circle 13px at center, transparent 98%, #000 100%);
	        mask: radial-gradient(circle 13px at center, transparent 98%, #000 100%);
}

/* ---------- メール返却の確認 ---------- */
.p-arx-delivered {
	display: flex; gap: 12px; align-items: flex-start;
	margin: 18px 0 4px; padding: 15px 18px;
	border-radius: 14px;
	background: rgba(0, 122, 138, 0.07);
	border: 1px solid rgba(0, 122, 138, 0.22);
}
.p-arx-delivered__icon { font-size: 2rem; line-height: 1.2; }
.p-arx-delivered__text { font-size: 1.35rem; line-height: 1.7; color: var(--arx-ink-soft); }
.p-arx-delivered__text strong { display: block; color: var(--arx-ink); margin-bottom: 2px; }

/* ---------- reduced-motion 尊重（design-system 契約） ---------- */
@media (prefers-reduced-motion: reduce) {
	.p-arx-gen__pulse,
	.p-arx-gen__slide::after { animation: none; }
	.p-arx-teaser__meter-fill { transition: none; }
}