@charset "utf-8";

/* ============================================================================
   /demographics/ 属性推定（年齢・性別）ページ

   デザイン差し替えの方針
   --------------------------------------------------------------------------
   1. 色・余白・角丸・フォントは、すべて下の :root のカスタムプロパティに
      集約しています。トーンだけ変えたい場合は :root の書き換えで完結します。
   2. セクションごとに 1 ブロックずつ区切っています。
      ブロック名は vf-<セクション名>__<要素> の BEM 風で、HTML 側の構造と
      1 対 1 で対応しています。HTML を触らずに CSS だけ差し替えられます。
   3. 詳細度は極力 1 段（クラス 1 つ）に抑えています。上書きが容易です。
   4. HTML 側にインラインスタイルはありません。
   ========================================================================= */


/* ============================================================================
   1. デザイントークン
   ========================================================================= */
:root {
	/* --- 配色 ------------------------------------------------------------ */
	--vf-color-text:          #313844;   /* 本文 */
	--vf-color-text-muted:    #64748b;   /* 補足・キャプション */
	--vf-color-text-invert:   #ffffff;
	--vf-color-bg:            #ffffff;   /* ページ地 */
	--vf-color-bg-alt:        #f2f6f9;   /* 1 段沈めた面 */
	--vf-color-bg-soft:       #f7fbff;   /* ごく薄い青みの面（Live Demo・Feature・Specification の背景） */
	--vf-color-border:        #f2f6f9;
	--vf-color-accent:        #eb3155;   /* 主アクセント（文字・罫・番号） */
	--vf-color-accent-dark:   #c81f42;
	--vf-color-accent-soft:   rgba(235, 49, 85, .1);
	--vf-color-secondary:     #003c8d;   /* 動作環境カラム・DeepFilterNet3 カードなどの第 2 アクセント */

	/* --- タイポグラフィ --------------------------------------------------- */
	--vf-font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--vf-font-en:   "Poppins", sans-serif;   /* ailia LLM の英語版 style_en.css に合わせて Inter → Poppins */
	--vf-fs-hero:      clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
	--vf-fs-section:   clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	--vf-fs-card:      clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
	--vf-fs-body:      clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
	--vf-fs-small:     clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem);
	--vf-lh-body:      1.9;
	--vf-lh-tight:     1.45;

	/* --- レイアウト -------------------------------------------------------- */
	--vf-container:      1440px;
	--vf-gutter:         24px;
	--vf-section-pad-y:  clamp(56px, 7vw, 112px);
	--vf-gap:            24px;
	--vf-gap-lg:         48px;

	/* --- 装飾 -------------------------------------------------------------- */
	--vf-radius:       10px;
	--vf-radius-sm:    6px;
	--vf-radius-pill:  999px;
	--vf-shadow:       0 1px 2px rgba(16, 23, 34, .04), 0 8px 24px rgba(16, 23, 34, .06);
	--vf-shadow-hover: 0 2px 4px rgba(16, 23, 34, .06), 0 14px 32px rgba(16, 23, 34, .10);
	--vf-transition:   .2s ease;

	/* --- ヘッダーまわり ------------------------------------------------------
	   共通ヘッダー(/common/header.shtml)の .navArea は position:fixed・
	   z-index:70 で、高さは PC 60px / 1023px 以下 48px。
	   本文はその分だけ下げ、セクションナビはさらにその下に貼り付ける。
	   ---------------------------------------------------------------------- */
	--vf-header-h: 60px;
	--vf-nav-h:    56px;
}

@media (max-width: 1023px) {
	:root { --vf-header-h: 48px; }
}

/* ノートPC以上（1024px〜）:
   1440px 未満は左右余白が --vf-gutter（24px）で固定されたままなのに対し、
   1440px を超えた瞬間に (100vw - 1440px)/2 の余白が付き始め、大画面ほど
   際限なく広がる。そのため、ノートPC幅と大画面とで余白の見え方に大きな
   段差ができてしまう（ユースケース画像のはみ出し量も同様に段差が出る）。
   ここで --vf-gutter 自体を底上げし、1440px 到達後もそのまま加算され
   続けるようにする（上限を切ると 1440px 直後に余白が一度縮んでしまう
   ため、max-width は設定しない）。 */
@media (min-width: 1024px) {
	:root { --vf-gutter: 56px; }
}

/* ノートPC幅では、ヒーローは画像のマスク処理で左側に自然な余白があるため
   現状のままで気にならないが、それ以降のセクション（デモ〜フッター直前）は
   コンテンツがコンテナいっぱいに詰まっており、相対的に余白が窮屈に見える。
   ヒーローには手を付けず、後続セクションだけ --vf-gutter をもう一段広げる。 */
@media (min-width: 1024px) {
	.vf-demo, .vf-usecase, .vf-feature, .vf-bench, .vf-spec, .vf-cta {
		--vf-gutter: 88px;
	}
}


/* ============================================================================
   2. ベース
   ========================================================================= */
/* セクションナビのアンカーリンク（#usecase 等）をクリックした時に、
   瞬間ジャンプではなく滑らかにスクロールさせる。スクロールの実体は
   <html> 要素（ドキュメントのスクロールボックス）に対して指定する必要が
   あるため、.vf（<body>）ではなくここに置く。 */
html { scroll-behavior: smooth; }

.vf {
	margin: 0;
	padding-top: var(--vf-header-h);   /* 固定ヘッダーの高さ分 */
	color: var(--vf-color-text);
	background: var(--vf-color-bg);
	font-family: var(--vf-font-base);
	font-size: var(--vf-fs-body);
	line-height: var(--vf-lh-body);
	-webkit-font-smoothing: antialiased;
}

/* 英語版: ailia LLM の style_en.css（.body, .body * { font-family: Poppins }）に
   合わせ、ページ全体のフォントを Poppins に切り替える。<html lang="en"> で判定。 */
.vf:lang(en),
.vf:lang(en) * {
	font-family: var(--vf-font-en);
}

/* 共通ヘッダーの補正。
   /css/header.css はリンクの下線をリセットしておらず、各ページ側で打ち消す作りに
   なっています（/mp/ なども自前の CSS で同じことをしています）。入れないと
   ロゴの「アイリア」に下線が出ます。共通フッターは footer.css 側で解決済み。 */
.navArea a { text-decoration: none; }


/* 要素セレクタのベーススタイルは、このページ自身の領域だけに当てます。
   .vf は <body> に付いているため、`.vf a` のように書くと共通ヘッダー・
   共通フッターのリンクにまで効いてしまいます（ロゴに下線が出るなど）。 */
:is(.vf-sectionnav, .vf-main) *,
:is(.vf-sectionnav, .vf-main) *::before,
:is(.vf-sectionnav, .vf-main) *::after { box-sizing: border-box; }

/* さらに要素セレクタを :where() で包み、詳細度を 0 にしています。
   こうしないと `p`(0-1-1) が `.vf-hero__lead`(0-1-0) のような
   コンポーネント側の指定に競り勝ってしまい、margin や色の上書きが効きません。
   デザイン差し替え時も、クラス 1 つ書けば必ず上書きできる状態を保つための約束です。 */
:is(.vf-sectionnav, .vf-main) :where(h1, h2, h3) {
	margin: 0;
	line-height: var(--vf-lh-tight);
	font-weight: 700;
}

:is(.vf-sectionnav, .vf-main) :where(p)  { margin: 0 0 1.2em; }
:is(.vf-sectionnav, .vf-main) :where(ul, ol, dl) { margin: 0; padding: 0; }
:is(.vf-sectionnav, .vf-main) :where(li) { list-style: none; }

:is(.vf-sectionnav, .vf-main) :where(a) {
	color: var(--vf-color-accent);
	text-decoration: underline;
	text-underline-offset: .18em;
}
:is(.vf-sectionnav, .vf-main) :where(a:hover) { color: var(--vf-color-accent-dark); }

:is(.vf-sectionnav, .vf-main) em { font-style: normal; color: var(--vf-color-accent); }

/* 全セクションの共通コンテナ */
.vf-container {
	width: 100%;
	max-width: var(--vf-container);
	margin-inline: auto;
	padding-inline: var(--vf-gutter);
}

/* セクション見出しの共通パーツ */
.vf-sectionHead { max-width: 58em; margin-bottom: var(--vf-gap-lg); }
.vf-sectionLabel {
	margin: 0 0 .6em;
	font-family: var(--vf-font-en);
	font-size: var(--vf-fs-small);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vf-color-accent);
}
.vf-sectionTitle { font-size: var(--vf-fs-section); }
.vf-sectionLead {
	margin-top: 1.2em;
	margin-bottom: 0;
	color: var(--vf-color-text-muted);
}

/* アンカー着地位置を、固定ヘッダー + セクションナビの下に */
.vf-main [id] { scroll-margin-top: calc(var(--vf-header-h) + var(--vf-nav-h) + 16px); }


/* ============================================================================
   3. ボタン
   ========================================================================= */
.vf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .85em 1.8em;
	border: 2px solid transparent;
	border-radius: var(--vf-radius-pill);
	font-size: var(--vf-fs-body);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--vf-transition), color var(--vf-transition),
	            border-color var(--vf-transition), box-shadow var(--vf-transition);
}
.vf-btn:hover,
.vf-btn:focus-visible { text-decoration: none; }

.vf-btn--lg { padding: 1.05em 2.4em; }

/* ライブデモ導線。このページで最も強い導線なので専用色 */
.vf-btn--demo {
	background: var(--vf-color-accent);
	border-color: var(--vf-color-accent);
	color: var(--vf-color-text-invert);
}
.vf-btn--demo:hover {
	background: var(--vf-color-bg);
	border-color: var(--vf-color-accent);
	color: var(--vf-color-accent);
}

.vf-btn--ghost {
	background: var(--vf-color-bg);
	border-color: var(--vf-color-accent);
	color: var(--vf-color-accent);
}
.vf-btn--ghost:hover {
	background: var(--vf-color-accent);
	border-color: var(--vf-color-accent);
	color: var(--vf-color-text-invert);
}


/* ============================================================================
   4. セクションナビ（sticky・JS 不使用）
   ========================================================================= */
.vf-sectionnav {
	position: sticky;
	top: var(--vf-header-h);
	z-index: 20;   /* 共通ヘッダー(70)より下。メガメニューが上に被る */
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--vf-color-border);
	transition: top .3s ease;
}
/* 共通ヘッダーがスクロールで上に隠れたら、セクションナビもその分だけ
   上に詰めて画面上端に貼り付く（クラスの付け外しは
   /js/header-autohide.js が #header に対して行う）。 */
#header.header--hidden ~ .vf-sectionnav {
	top: 0;
}
.vf-sectionnav__inner {
	display: flex;
	align-items: center;
	gap: var(--vf-gap);
	min-height: var(--vf-nav-h);
}
.vf-sectionnav__label {
	font-weight: 700;
	white-space: nowrap;
	/* 「属性推定」ラベルを #top へのリンクにしても、見た目は今まで通りの
	   ただのラベルのまま（他のナビリンクのようなピンク下線にはしない）。 */
	color: inherit;
	text-decoration: none;
}
.vf-sectionnav__label:hover { color: var(--vf-color-accent); }
/* デスクトップ / iPad: HTML 側で <details open> にしてあるため、
   ネイティブに常に展開された状態。<details> 自体を flex:1 1 auto にして
   残りスペースを吸収させ、CTA を右端に押し出す。<details> に
   display:contents を使わないのは、Safari など一部ブラウザで
   <details> の display:contents が信頼できず、ボックスが縮んで
   CTA がメニューにくっついてしまうため。 */
.vf-sectionnav__menu {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}
.vf-sectionnav__toggle { display: none; }
.vf-sectionnav__list {
	display: flex;
	gap: 1.5em;
	overflow-x: auto;
	scrollbar-width: none;
}
.vf-sectionnav__list::-webkit-scrollbar { display: none; }
.vf-sectionnav__list a {
	display: block;
	padding: .4em 0;
	color: var(--vf-color-text-muted);
	font-size: var(--vf-fs-small);
	text-decoration: none;
	white-space: nowrap;
}
.vf-sectionnav__list a:hover { color: var(--vf-color-accent); }
.vf-sectionnav__cta {
	flex: 0 0 auto;
	padding: .55em 1.2em;
	font-size: var(--vf-fs-small);
}

/* タブレット（iPad 含む）: ラベルを畳んで、メニューと CTA の間に
   余裕を持たせる。ハンバーガー化はしない（768px 以上は横並びのまま）。 */
@media (max-width: 767px) {
	.vf-sectionnav__label { display: none; }
}

/* モバイル（スマートフォン）: <details> を通常のブロックに戻し、
   ハンバーガーとして開閉させる。「ブラウザで試す」CTA は常時表示のまま。
   HTML には open 属性が既定で入っているため、JS が効かない場合は
   常時展開表示にフォールバックする（機能は壊れない）。
   599px までに絞っているのは、iPad mini（縦持ちで幅 744px）まで
   含めた iPad 全機種で、これまで通りの横並びメニューを保つため。 */
@media (max-width: 599px) {
	.vf-sectionnav__inner { justify-content: flex-start; }

	.vf-sectionnav__menu { display: block; flex: 0 0 auto; }
	.vf-sectionnav__cta  { margin-left: auto; }

	.vf-sectionnav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-inline-start: calc(-1 * (44px - 18px) / 2);
		list-style: none;
		cursor: pointer;
		color: var(--vf-color-text);
		-webkit-tap-highlight-color: transparent;
	}
	.vf-sectionnav__toggle::marker { content: ""; }
	.vf-sectionnav__toggle::-webkit-details-marker { display: none; }
	.vf-sectionnav__toggle:focus-visible {
		outline: 2px solid var(--vf-color-accent);
		outline-offset: 2px;
	}

	.vf-sectionnav__toggle-bars,
	.vf-sectionnav__toggle-bars::before,
	.vf-sectionnav__toggle-bars::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
	}
	.vf-sectionnav__toggle-bars { position: relative; }
	.vf-sectionnav__toggle-bars::before,
	.vf-sectionnav__toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
		transition: transform var(--vf-transition), top var(--vf-transition), opacity var(--vf-transition);
	}
	.vf-sectionnav__toggle-bars::before { top: -6px; }
	.vf-sectionnav__toggle-bars::after  { top: 6px; }
	.vf-sectionnav__menu[open] .vf-sectionnav__toggle-bars { background: transparent; }
	.vf-sectionnav__menu[open] .vf-sectionnav__toggle-bars::before { top: 0; transform: rotate(45deg); }
	.vf-sectionnav__menu[open] .vf-sectionnav__toggle-bars::after  { top: 0; transform: rotate(-45deg); }

	.vf-sectionnav__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--vf-color-bg);
		border-bottom: 1px solid var(--vf-color-border);
		padding: 0 var(--vf-gutter) .5em;
		overflow: visible;
	}
	.vf-sectionnav__menu[open] .vf-sectionnav__list { display: flex; }
	.vf-sectionnav__list a {
		padding: .9em 0;
		border-top: 1px solid var(--vf-color-border);
	}
}

/* 英語版はラベルが長く（Use Cases / Features / Model Comparison /
   Specification）、実測したところ 767px でもまだ横並びメニューが
   窮屈で、"Specification" が CTA ボタンに重なって切れてしまう。
   1023px まで広げても、このバー自体の --vf-gutter は 56px しかない
   （他セクションの 88px と違い .vf-sectionnav は対象外）ため、
   1024px 前後ではまだ幅が足りず、隠れた横スクロールに逃げてしまい
   "Specification" が実質見えなくなる。1200px まで広げて確実な余白を持たせる。
   日本語版の閾値（599px、iPad mini を横並びのまま保つ意図がある）は変えない。
   ルール自体は上のブロックと同一で、対象幅とセレクタだけが違う。 */
@media (max-width: 1200px) {
	.vf--en .vf-sectionnav__inner { justify-content: flex-start; }

	.vf--en .vf-sectionnav__menu { display: block; flex: 0 0 auto; }
	.vf--en .vf-sectionnav__cta  { margin-left: auto; }

	.vf--en .vf-sectionnav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-inline-start: calc(-1 * (44px - 18px) / 2);
		list-style: none;
		cursor: pointer;
		color: var(--vf-color-text);
		-webkit-tap-highlight-color: transparent;
	}
	.vf--en .vf-sectionnav__toggle::marker { content: ""; }
	.vf--en .vf-sectionnav__toggle::-webkit-details-marker { display: none; }
	.vf--en .vf-sectionnav__toggle:focus-visible {
		outline: 2px solid var(--vf-color-accent);
		outline-offset: 2px;
	}

	.vf--en .vf-sectionnav__toggle-bars,
	.vf--en .vf-sectionnav__toggle-bars::before,
	.vf--en .vf-sectionnav__toggle-bars::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
	}
	.vf--en .vf-sectionnav__toggle-bars { position: relative; }
	.vf--en .vf-sectionnav__toggle-bars::before,
	.vf--en .vf-sectionnav__toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
		transition: transform var(--vf-transition), top var(--vf-transition), opacity var(--vf-transition);
	}
	.vf--en .vf-sectionnav__toggle-bars::before { top: -6px; }
	.vf--en .vf-sectionnav__toggle-bars::after  { top: 6px; }
	.vf--en .vf-sectionnav__menu[open] .vf-sectionnav__toggle-bars { background: transparent; }
	.vf--en .vf-sectionnav__menu[open] .vf-sectionnav__toggle-bars::before { top: 0; transform: rotate(45deg); }
	.vf--en .vf-sectionnav__menu[open] .vf-sectionnav__toggle-bars::after  { top: 0; transform: rotate(-45deg); }

	.vf--en .vf-sectionnav__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--vf-color-bg);
		border-bottom: 1px solid var(--vf-color-border);
		padding: 0 var(--vf-gutter) .5em;
		overflow: visible;
	}
	.vf--en .vf-sectionnav__menu[open] .vf-sectionnav__list { display: flex; }
	.vf--en .vf-sectionnav__list a {
		padding: .9em 0;
		border-top: 1px solid var(--vf-color-border);
	}
}


/* ============================================================================
   5. HERO
   ========================================================================= */
.vf-hero {
	position: relative;
	padding-block: var(--vf-section-pad-y);
	background: linear-gradient(180deg, var(--vf-color-bg-alt) 0%, var(--vf-color-bg) 100%);
	overflow: hidden;
}
.vf-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* Figma: 写真の上に #014aac の単色レイヤーを mix-blend-mode: soft-light で
   重ねているだけ（CSS マスクではない）。写真自体に元々ある空・雲の抜けが
   フェード効果を作っている。
   demographics 側にあったヒーロー画像のフェードイン演出
   （dg-hero-bg-fade）と同種の演出をこちらの構成にも適用する。 */
.vf-hero__figure {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	animation: vf-hero-figure-fade 1.4s ease forwards;
	animation-delay: .2s;
}
@keyframes vf-hero-figure-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.vf-hero__tint {
	position: absolute;
	inset: 0;
	background: #014aac;
	mix-blend-mode: soft-light;
}
.vf-hero__wave {
	position: absolute;
	left: 54.5%;
	top: 39.5%;
	width: 41%;
	height: 21%;
	object-fit: contain;
	opacity: .7;
}
.vf-hero__sine {
	position: absolute;
	left: 59.6%;
	top: 54.2%;
	width: 42%;
	height: 42%;
	object-fit: contain;
}
.vf-hero__inner { position: relative; }
.vf-hero__eyebrow {
	margin: 0 0 1.2em;
	font-family: var(--vf-font-en);
	font-size: var(--vf-fs-small);
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--vf-color-accent);
}
.vf-hero__title {
	font-size: var(--vf-fs-hero);
	font-weight: 900;
	letter-spacing: -.01em;
}
.vf-hero__lead {
	max-width: 44em;
	margin-top: 1.6em;
	color: var(--vf-color-text-muted);
}
.vf-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: .6em 1em;
	margin-bottom: 2.4em;
}
.vf-hero__points li {
	padding: .5em 1.1em;
	background: var(--vf-color-bg);
	border: 1px solid var(--vf-color-accent);
	border-radius: var(--vf-radius-sm);
	font-size: var(--vf-fs-small);
	line-height: 1.5;
}
.vf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vf-gap);
}

/* モバイル: 4 つのタグ（.vf-hero__points）はボタンのように大きく見えるため、
   スマートフォン幅ではひとまわり小さくする（角丸は PC と共通で --vf-radius-sm）。 */
@media (max-width: 599px) {
	.vf-hero__points li {
		padding: .35em .75em;
		font-size: .75rem;
	}
}


/* ============================================================================
   6. ライブデモ
   ========================================================================= */
.vf-demo {
	padding-block: var(--vf-section-pad-y);
	background: var(--vf-color-bg-soft);
}

.vf-demo__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(64px, 12vw, 200px);
	align-items: start;
}
.vf-demo__text { color: var(--vf-color-text-muted); }
.vf-demo__text strong { color: var(--vf-color-text); }
.vf-demo__figure {
	display: flex;
	justify-content: flex-end;
}
/* Figma 実寸: カード 532×523.77（ほぼ正方形）。テキスト側の高さに
   合わせて引き伸ばさず、本来の大きさのまま表示する。 */
.vf-demo__placeholder {
	max-width: 532px;
	width: 100%;
	height: 523px;
	padding: 24px;
	border-radius: var(--vf-radius);
	background: var(--vf-color-bg);
	box-shadow: 0 4px 7.5px rgba(0, 60, 141, .05);
	text-align: center;
}
.vf-demo__placeholderText {
	display: block;
	margin: 4px 0 12px;
	font-family: var(--vf-font-en);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: .2em;
	color: var(--vf-color-text);
}
.vf-demo__shot {
	position: relative;
	margin-bottom: 16px;
	height: 199px;
	border-radius: var(--vf-radius-sm);
	overflow: hidden;
	/* Figma 実測: #F7FBFF（固定色）。同じ色を使う箇所は全てこの値に統一する */
	background: var(--vf-color-bg-soft);
	box-shadow: inset 0 4px 15px rgba(0, 60, 141, .05);
}
.vf-demo__shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.vf-demo__credit {
	margin: 0 0 10px;
	font-size: var(--vf-fs-small);
	line-height: 1.3;
	color: var(--vf-color-text-muted);
}
.vf-demo__specs { text-align: left; }
.vf-demo__specs li {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: .55em 0;
	border-top: 1px solid rgba(100, 116, 139, .15);
	font-size: var(--vf-fs-small);
	line-height: 1.6;
}
.vf-demo__specs span { color: var(--vf-color-text); font-weight: 700; white-space: nowrap; }
.vf-demo__specs b    { color: var(--vf-color-text-muted); font-weight: 400; text-align: right; }

@media (max-width: 899px) {
	.vf-demo__inner { grid-template-columns: 1fr; }
	.vf-demo__figure { justify-content: center; }
}


/* ============================================================================
   7. ユースケース
   ========================================================================= */
.vf-usecase { padding-block: var(--vf-section-pad-y); }

.vf-usecase__list {
	display: flex;
	flex-direction: column;
	gap: var(--vf-gap-lg);
}
.vf-usecase__item {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 160px;
	align-items: stretch;
	padding-top: var(--vf-gap-lg);
}
.vf-usecase__item:first-child { padding-top: 0; }
.vf-usecase__content { order: 1; }
.vf-usecase__figure   { order: 2; max-width: 420px; }
.vf-usecase__item:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.vf-usecase__item:nth-child(even) .vf-usecase__content {
	order: 2;
}
.vf-usecase__item:nth-child(even) .vf-usecase__figure   { order: 1; }

.vf-usecase__figure {
	display: grid;
	align-items: center;
	justify-items: center;
}

/* イラストはすべて自分でサイズ調整済み（実寸を編集して4枚のバランスを
   手動で揃えた）とのことなので、CSS 側は画像ごとの個別サイズ指定をやめ、
   4枚とも同じ扱い（02 で使っていたのと同じ処理）に統一する：
   自然な比率のまま表示し、テキスト側の幅は変えずに画像だけを
   外側へ少しはみ出させて大きく見せる。 */
.vf-usecase__figure img {
	display: block;
	width: auto;
	max-width: 420px;
	height: auto;
}
/* 通常配置（01・03）: イラストは右側 → 外側（右）へはみ出す */
.vf-usecase__item:nth-child(odd) .vf-usecase__figure {
	margin-right: -72px;
}
/* ミラー配置（02・04）: イラストは左側 → 外側（左）へはみ出す */
.vf-usecase__item:nth-child(even) .vf-usecase__figure {
	margin-left: -72px;
}

.vf-usecase__num {
	font-family: var(--vf-font-base);
	font-size: clamp(3rem, 1.5rem + 5vw, 6rem);
	font-weight: 900;
	line-height: 1;
	margin-bottom: -.15em;
	color: rgba(235, 49, 85, .2);
}
.vf-usecase__title { font-size: var(--vf-fs-section); }
.vf-usecase__catch {
	margin: .8em 0 1.4em;
	font-size: var(--vf-fs-card);
	font-weight: 700;
	color: var(--vf-color-accent);
}
.vf-usecase__text { color: var(--vf-color-text-muted); }

.vf-usecase__bullets {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin-bottom: 1.8em;
}
.vf-usecase__bullets li {
	position: relative;
	padding-left: 1.5em;
	font-size: var(--vf-fs-small);
	line-height: 1.8;
}
.vf-usecase__bullets li::before {
	content: "";
	position: absolute;
	top: .72em;
	left: .1em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--vf-color-accent);
}

.vf-usecase__why {
	margin: 0;
	padding: 1.4em 1.6em;
	border-radius: var(--vf-radius);
	background: var(--vf-color-bg-soft);
	font-size: var(--vf-fs-small);
	line-height: 1.9;
	color: var(--vf-color-text-muted);
}
.vf-usecase__why b {
	display: block;
	margin-bottom: .4em;
	color: var(--vf-color-text);
}

/* iPad（縦・横）: 2 カラムだと窮屈なため、1 カラムに畳んで
   常に「テキスト→画像」の順にする。767px 未満の演出調整とは
   分離し、レイアウト構造だけをここで先に決める。 */
@media (max-width: 1023px) {
	.vf-usecase__item,
	.vf-usecase__item:nth-child(even) {
		grid-template-columns: 1fr;
		gap: var(--vf-gap-lg);
	}
	.vf-usecase__item .vf-usecase__content,
	.vf-usecase__item .vf-usecase__figure,
	.vf-usecase__item:nth-child(even) .vf-usecase__content,
	.vf-usecase__item:nth-child(even) .vf-usecase__figure {
		order: initial;
	}
	.vf-usecase__item:nth-child(even) .vf-usecase__content,
	.vf-usecase__item:nth-child(even) .vf-usecase__why {
		text-align: left;
	}
	.vf-usecase__item:nth-child(even) .vf-usecase__bullets {
		width: auto;
		margin-left: 0;
	}
	.vf-usecase__item:nth-child(even) .vf-usecase__bullets li {
		padding-left: 1.5em;
		padding-right: 0;
	}
	.vf-usecase__item:nth-child(even) .vf-usecase__bullets li::before {
		left: .1em;
		right: auto;
	}
	.vf-usecase__figure img {
		width: 100%;
		max-width: 420px;
		height: auto;
	}
	.vf-usecase__item:nth-child(odd) .vf-usecase__figure,
	.vf-usecase__item:nth-child(even) .vf-usecase__figure {
		margin-left: auto;
		margin-right: auto;
	}
}

/* 767px 未満: 1023px ブロックのレイアウト構造はそのまま、
   さらに詰める必要がある差分だけをここに書く（重複させない）。 */
@media (max-width: 767px) {
	.vf-usecase__item,
	.vf-usecase__item:nth-child(even) { gap: 2em; }
	.vf-usecase__num  { font-size: 3rem; margin-bottom: -.1em; }
	.vf-usecase__why  { width: 100%; }
	.vf-usecase__item .vf-usecase__num.vf-reveal,
	.vf-usecase__item .vf-usecase__title.vf-reveal,
	.vf-usecase__item .vf-usecase__catch.vf-reveal,
	.vf-usecase__item .vf-usecase__text.vf-reveal,
	.vf-usecase__item .vf-usecase__bullets.vf-reveal,
	.vf-usecase__item .vf-usecase__why.vf-reveal,
	.vf-usecase__item .vf-usecase__figure.vf-reveal {
		transform: translateY(16px);
	}
	.vf-usecase__item .vf-reveal.is-visible { transform: translateY(0); }
	.vf-usecase__figure img { max-width: 340px; }
}


/* ============================================================================
   8. 特徴
   ========================================================================= */
.vf-feature {
	padding-block: var(--vf-section-pad-y);
	background: var(--vf-color-bg-soft);
}
.vf-feature__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vf-gap);
}
@media (max-width: 1023px) {
	.vf-feature__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
	.vf-feature__grid { grid-template-columns: 1fr; }
}
.vf-feature__card {
	padding: clamp(24px, 3vw, 40px);
	background: var(--vf-color-bg);
	border: 3px solid var(--vf-color-secondary);
	border-radius: var(--vf-radius);
	box-shadow: 0 1px 4px rgba(0, 60, 141, .15);
}
.vf-feature__card.vf-reveal {
	transition: opacity .85s ease, transform .95s cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--vf-transition);
}
.vf-feature__card.vf-reveal:hover {
	transition: transform .45s cubic-bezier(.34, 1.2, .4, 1), box-shadow .45s ease-out;
	transition-delay: 0s !important;
	transform: translateY(-10px);
	box-shadow: 0 10px 20px rgba(0, 60, 141, .2);
}
/* 情報量の多いカードを 1 枚だけ全幅にしたいとき用 */
.vf-feature__card--wide { grid-column: 1 / -1; }

.vf-feature__title {
	margin-bottom: .9em;
	font-size: var(--vf-fs-card);
}
.vf-feature__text {
	margin-bottom: 1em;
	color: var(--vf-color-text-muted);
	font-size: var(--vf-fs-small);
	line-height: 1.95;
}
.vf-feature__text:last-child { margin-bottom: 0; }
.vf-feature__text strong { color: var(--vf-color-text); }


/* ============================================================================
   9. ベンチマーク
   ========================================================================= */
.vf-bench { padding-block: var(--vf-section-pad-y); }

.vf-bench__tableWrap {
	overflow-x: auto;
	margin-bottom: var(--vf-gap-lg);
	-webkit-overflow-scrolling: touch;
}
.vf-bench__table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	font-size: var(--vf-fs-small);
	line-height: 1.6;
}
.vf-bench__table caption {
	margin-bottom: 1em;
	text-align: left;
	color: var(--vf-color-text-muted);
}
.vf-bench__table th,
.vf-bench__table td {
	padding: .95em 1em;
	text-align: right;
	vertical-align: middle;
}

/* 区切り線は tbody 境界（= モデルの切れ目）に引く。
   セルごとに border-bottom を引くと、rowspan のセルだけ線が途切れて崩れて見える。 */
.vf-bench__table thead th {
	border-bottom: 2px solid var(--vf-color-bg);
	background: var(--vf-color-accent);
	color: var(--vf-color-text-invert);
	font-weight: 700;
	white-space: nowrap;
}
.vf-bench__table thead th:first-child { border-top-left-radius: var(--vf-radius); }
.vf-bench__table thead th:last-child  { border-top-right-radius: var(--vf-radius); }
.vf-bench__table tbody + tbody { border-top: 1px solid var(--vf-color-border); }
/* グループ内（マスクなし / マスクあり）の細い区切り */
.vf-bench__table tbody tr + tr td { border-top: 1px solid var(--vf-color-border); }

/* 左寄せにするのはモデル名と条件の 2 列だけ。
   2 行目には <th> が無く nth-child が 1 つずれるため、位置ではなくクラスで指定する。 */
.vf-bench__table thead th:first-child,
.vf-bench__table tbody th { text-align: left; }
.vf-bench__table tbody th { font-weight: 700; }
.vf-bench__table .vf-bench__cond { text-align: left; white-space: nowrap; }

.vf-bench__table .is-ours { background: var(--vf-color-accent-soft); }
.vf-bench__table .is-best { font-weight: 700; color: var(--vf-color-accent); }

.vf-bench__disclaimer {
	margin: 0;
	padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 32px);
	background: var(--vf-color-bg-soft);
	border-radius: var(--vf-radius);
	font-size: var(--vf-fs-small);
	line-height: 1.9;
	color: var(--vf-color-text-muted);
}


/* ============================================================================
   10. 仕様
   ========================================================================= */
.vf-spec {
	padding-block: var(--vf-section-pad-y);
	background: var(--vf-color-bg-soft);
}
.vf-spec__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vf-gap);
}
@media (max-width: 899px) {
	.vf-spec__cols { grid-template-columns: 1fr; }
}
.vf-spec__col {
	padding: clamp(24px, 3vw, 36px);
	background: var(--vf-color-bg);
	border: 3px solid var(--vf-color-secondary);
	border-radius: var(--vf-radius);
}
.vf-spec__col.vf-reveal {
	transition: opacity .85s ease, transform .95s cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--vf-transition);
}
.vf-spec__col.vf-reveal:hover {
	transition: transform .45s cubic-bezier(.34, 1.2, .4, 1), box-shadow .45s ease-out;
	transition-delay: 0s !important;
	transform: translateY(-10px);
	box-shadow: 0 10px 20px rgba(16, 23, 34, .16);
}

.vf-spec__colTitle {
	margin-bottom: 1.2em;
	padding-bottom: .7em;
	border-bottom: 2px solid currentColor;
	color: var(--vf-color-secondary);
	font-size: var(--vf-fs-card);
}

/* 処理パイプライン（連番リスト） */
.vf-spec__flow { counter-reset: vfflow; }
.vf-spec__flow li {
	counter-increment: vfflow;
	position: relative;
	padding: 0 0 1.4em 2.6em;
	font-size: var(--vf-fs-small);
	line-height: 1.7;
}
.vf-spec__flow li::before {
	content: counter(vfflow);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: var(--vf-color-secondary);
	color: var(--vf-color-text-invert);
	font-family: var(--vf-font-en);
	font-size: .8em;
	font-weight: 700;
}
/* 手順をつなぐ縦線 */
.vf-spec__flow li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2.1em;
	left: .92em;
	bottom: .2em;
	width: 1px;
	background: rgba(0, 60, 141, .15);
}
.vf-spec__flow b    { display: block; }
.vf-spec__flow span { color: var(--vf-color-text-muted); }

/* 定義リスト */
.vf-spec__list {
	display: grid;
	grid-template-columns: minmax(6em, auto) minmax(0, 1fr);
	font-size: var(--vf-fs-small);
	line-height: 1.7;
}
.vf-spec__list dt,
.vf-spec__list dd {
	margin: 0;
	padding: .75em 0;
	border-top: 1px solid rgba(0, 60, 141, .1);
}
.vf-spec__list dt { padding-right: 1em; font-weight: 700; }
.vf-spec__list dd { color: var(--vf-color-text-muted); }
.vf-spec__list dt:first-of-type,
.vf-spec__list dt:first-of-type + dd { border-top: 0; }

.vf-spec__note {
	margin: 1.4em 0 0;
	font-size: var(--vf-fs-small);
	line-height: 1.85;
	color: var(--vf-color-text-muted);
}


/* ============================================================================
   11. CTA
   ========================================================================= */
.vf-cta {
	padding-block: var(--vf-section-pad-y);
	background: var(--vf-color-bg);
}
.vf-cta__inner { max-width: 58em; text-align: center; }
.vf-cta__title { font-size: var(--vf-fs-section); }
.vf-cta__text {
	margin-top: 1.4em;
	margin-bottom: 2.4em;
	color: var(--vf-color-text-muted);
}
.vf-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vf-gap);
}



/* ============================================================================
   13. スクロール演出（軽いバウンス）
   ========================================================================= */
.vf-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .85s ease, transform .95s cubic-bezier(.34, 1.56, .64, 1);
}
.vf-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.vf-feature__grid .vf-feature__card:nth-child(1) { transition-delay: 0s; }
.vf-feature__grid .vf-feature__card:nth-child(2) { transition-delay: .1s; }
.vf-feature__grid .vf-feature__card:nth-child(3) { transition-delay: .2s; }
.vf-feature__grid .vf-feature__card:nth-child(4) { transition-delay: .1s; }
.vf-feature__grid .vf-feature__card:nth-child(5) { transition-delay: .2s; }
.vf-feature__grid .vf-feature__card:nth-child(6) { transition-delay: .3s; }
.vf-spec__cols .vf-spec__col:nth-child(1) { transition-delay: 0s; }
.vf-spec__cols .vf-spec__col:nth-child(2) { transition-delay: .1s; }
.vf-spec__cols .vf-spec__col:nth-child(3) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
	.vf * { transition: none !important; }
	html, .vf { scroll-behavior: auto; }
	.vf-reveal { opacity: 1; transform: none; }
	.vf-hero__figure { animation: none; opacity: 1; }
}


/* ============================================================================
   12. voicefilter 固有の調整（Figma デザインに合わせた差分）
   hero の背景は「写真＋#014aac の soft-light 単色オーバーレイ＋波形2本」
   という Figma の構成に合わせて上で個別に定義済み。ここでは残りの差分
   だけを上書きする：hero のタグは半透明白地＋赤文字
   （base は不透明白地＋本文色）、特徴アイコンが円形バッジ。
   ========================================================================= */

.vf-hero__points li {
	background: rgba(255, 255, 255, .85);
	color: var(--vf-color-accent);
	font-weight: 700;
}
.vf-hero__points li strong { font-weight: 700; }

/* --- 特徴: アイコンを円形バッジに（画像ではなく inline SVG + currentColor） --- */
.vf-feature__iconBadge {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	border-radius: 50%;
	border: 2px solid currentColor;
	color: var(--vf-color-secondary);
}
.vf-feature__iconBadge svg,
.vf-feature__iconBadge img { width: 40px; height: 40px; }

/* ============================================================================
   13. モデル比較カード（ailia Voice Filter / DeepFilterNet3）
   ========================================================================= */
.vf-models {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--vf-gap);
	margin-bottom: var(--vf-gap-lg);
}
@media (max-width: 899px) {
	.vf-models { grid-template-columns: 1fr; }
}
.vf-models__card {
	padding: clamp(24px, 3vw, 36px);
	background: var(--vf-color-bg);
	border: 3px solid var(--vf-color-accent);
	border-radius: var(--vf-radius);
}
.vf-models__card--dfn { border-color: var(--vf-color-secondary); }

.vf-models__badge {
	display: inline-block;
	margin: 0 0 1em;
	padding: .35em 1em;
	border-radius: var(--vf-radius-pill);
	background: var(--vf-color-accent);
	color: var(--vf-color-text-invert);
	font-size: var(--vf-fs-small);
	font-weight: 700;
}
.vf-models__card--dfn .vf-models__badge {
	background: var(--vf-color-secondary);
	color: var(--vf-color-text-invert);
}
.vf-models__name {
	margin-bottom: .3em;
	font-family: var(--vf-font-en);
	font-size: var(--vf-fs-section);
}
.vf-models__reco {
	margin-bottom: 1em;
	color: var(--vf-color-text-muted);
	font-weight: 700;
	font-size: var(--vf-fs-small);
}
.vf-models__text {
	margin-bottom: 1.4em;
	color: var(--vf-color-text-muted);
	font-size: var(--vf-fs-small);
	line-height: 1.9;
}
.vf-models__spec {
	display: grid;
	grid-template-columns: minmax(6em, auto) minmax(0, 1fr);
	font-size: var(--vf-fs-small);
	line-height: 1.7;
}
.vf-models__spec dt,
.vf-models__spec dd {
	margin: 0;
	padding: .6em 0;
	border-top: 1px solid rgba(49, 56, 68, .1);
}
.vf-models__spec dt { font-weight: 700; padding-right: 1em; }
.vf-models__spec dd { color: var(--vf-color-text-muted); }
.vf-models__spec dt:first-of-type,
.vf-models__spec dt:first-of-type + dd { border-top: 0; }

/* --- 比較レコメンド（1話者 / 複数話者） ----------------------------------- */
.vf-bench__reco {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--vf-gap);
	margin-bottom: var(--vf-gap-lg);
}
@media (max-width: 899px) {
	.vf-bench__reco { grid-template-columns: 1fr; }
}
.vf-bench__recoItem {
	padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 32px);
	border-radius: var(--vf-radius);
	background: var(--vf-color-bg-soft);
	border-left: 4px solid var(--vf-color-accent);
}
.vf-bench__recoCond {
	margin: 0 0 .4em;
	font-size: var(--vf-fs-small);
	color: var(--vf-color-text-muted);
}
.vf-bench__recoModel {
	margin: 0 0 .8em;
	font-size: var(--vf-fs-card);
	font-weight: 700;
	color: var(--vf-color-accent);
}
.vf-bench__recoItem--dfn { border-left-color: var(--vf-color-secondary); }
.vf-bench__recoItem--dfn .vf-bench__recoModel { color: var(--vf-color-secondary); }
.vf-bench__recoText {
	margin: 0;
	font-size: var(--vf-fs-small);
	line-height: 1.9;
	color: var(--vf-color-text-muted);
}