/* =================================================================
 * V-Gateソリューション LP — スタイル
 * 既存サイト（c-m-d.co.jp / Avada）に統一：白基調＋オレンジ＋Work Sans。
 * すべて .vnet-lp 配下にスコープし、既存テーマと衝突させない。
 * ================================================================= */

/* =================================================================
 * ページタイトルバーを非表示にしてSVGヒーローを最上部に表示
 * このCSSはVNET LPページにのみ読み込まれる（他ページに影響しない）
 * ================================================================= */
.fusion-page-title-bar-wrapper,
.fusion-page-title-bar,
#fusion-page-title-bar,
.fusion-page-title-row{
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* コンテンツ上部の余白もゼロに */
#main,
.fusion-content-area,
#wrapper #main,
.post-content{
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* =================================================================
 * 横スクロール完全封止
 * このCSSはVNET LPページのみ読み込まれる（functions.php の is_page_template 参照）。
 * html / body / Avadaラッパーをまとめて封じ、スマホでの左右ゆれを防止する。
 * ================================================================= */
/* このCSSはVNET LPページにのみ読み込まれる（他ページに影響しない） */
/* ⚠️横スクロール防止は LP自身のコンテナ（.vnet-lp）にのみ適用する。
   html / body / Avadaラッパー（.fusion-*）に overflow や position:relative を
   強制すると、Avada のスティッキーヘッダーとモバイルメニュー（ハンバーガー）が
   開かなくなるため、ここではグローバル指定を一切行わない。
   （横ゆれは下部の .vnet-lp{ overflow-x: hidden } /* ── ヘッダーをトップページと同一にする ── */
/* ロゴ画像を小さく（Avadaの全セレクターパターンに対応） */
で封じている） */


#wrapper .fusion-logo img,
#wrapper .fusion-logo-link img,
#wrapper img.fusion-standard-logo,
#wrapper img.fusion-retina-logo,
.fusion-header .fusion-logo img,
.fusion-header .fusion-logo-link img{
	max-height: 42px !important;
	height: 42px !important;
	width: auto !important;
}

/* ヘッダーの縦パディングをトップページに合わせる */
#wrapper .fusion-header .fusion-row{
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* ロゴのテキスト折り返しを防ぐ */
#wrapper .fusion-logo,
#wrapper .fusion-logo-link{
	line-height: 1 !important;
}
#wrapper .fusion-logo a{
	display: flex !important;
	align-items: center !important;
}

.vnet-lp{
	/* --- モバイル横スクロール防止（Avadaラッパーを越えて溢れる問題を封じる） --- */
	overflow-x: hidden;

	/* --- デザイントークン（c-m-d.co.jp Avada公式パレットの実値に一致） --- */
	--vnet-orange: #ee7700;        /* awb-color4 = primary（唯一のアクセント） */
	--vnet-orange-strong: #d76a00; /* hover用にわずかに暗く */
	--vnet-orange-soft: #fdf0e2;   /* オレンジ極薄（アイコン地） */
	--vnet-ink: #292b37;           /* awb-color8（見出し最濃） */
	--vnet-ink-2: #333645;         /* awb-color7（濃グレー） */
	--vnet-body: #5e6276;          /* awb-color6（本文） */
	--vnet-muted: #9fa0ab;         /* awb-color5（補助） */
	--vnet-line: #dddddd;          /* awb-color3（罫線） */
	--vnet-bg: #ffffff;            /* awb-color1 */
	--vnet-bg-alt: #f3f4f6;        /* awb-color2（薄グレー背景） */
	--vnet-danger: #d22d26;        /* 障害表現（機能色） */

	--vnet-radius: 12px;
	--vnet-shadow: 0 10px 30px rgba(34, 38, 51, .08);
	--vnet-shadow-sm: 0 4px 14px rgba(34, 38, 51, .06);
	--vnet-maxw: 1140px;

	font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
	color: var(--vnet-body);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

.vnet-lp *,
.vnet-lp *::before,
.vnet-lp *::after{
	box-sizing: border-box;
}

.vnet-container{
	width: 100%;
	max-width: var(--vnet-maxw);
	margin-inline: auto;
	padding-inline: 24px;
}

/* --- 見出し共通 --- */
.vnet-head{
	text-align: center;
	max-width: 760px;
	margin: 0 auto 48px;
}
.vnet-eyebrow{
	color: var(--vnet-orange);
	font-weight: 700;
	letter-spacing: .14em;
	font-size: .8rem;
	margin: 0 0 12px;
	text-transform: uppercase;
}
.vnet-h2{
	color: var(--vnet-ink);
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 16px;
}
.vnet-lead{
	color: var(--vnet-body);
	font-size: 1.02rem;
	margin: 0;
}
.vnet-tag{
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 16px;
	color: #fff;
}
.vnet-tag--software{ background: var(--vnet-ink-2); }
.vnet-tag--hardware{ background: var(--vnet-ink-2); }

/* --- ボタン --- */
.vnet-btn{
	display: inline-block;
	font-weight: 700;
	font-size: .98rem;
	line-height: 1;
	padding: 16px 30px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.vnet-btn--primary{
	background: var(--vnet-orange);
	color: #fff;
}
.vnet-btn--primary:hover{
	background: var(--vnet-orange-strong);
	transform: translateY(-2px);
}
.vnet-btn--lg{ padding: 18px 40px; font-size: 1.05rem; }
.vnet-btn--ghost{
	background: transparent;
	color: var(--vnet-ink);
	border-color: var(--vnet-line);
	padding: 10px 20px;
	font-size: .85rem;
}
.vnet-btn--ghost:hover{ border-color: var(--vnet-orange); color: var(--vnet-orange); }

/* =================================================================
 * ファーストビュー（スライダー）
 * ================================================================= */
.vnet-hero{
	position: relative;
	overflow: hidden;
	background: var(--vnet-bg-alt);
}
.vnet-hero__track{
	display: flex;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.vnet-hero__slide{
	position: relative;
	flex: 0 0 100%;
	min-height: clamp(440px, 60vh, 620px);
	display: flex;
	align-items: center;
	padding: 64px 24px;
	background-position: center;
	background-size: cover;
}
/* 濃グレー帯（/work/準拠）。画像未指定時のデフォルト背景。 */
.vnet-hero__slide--overview{ background-color: #292b37; background-image: linear-gradient(120deg, #21232e 0%, #333645 100%); }
.vnet-hero__slide--software{ background-color: #292b37; background-image: linear-gradient(120deg, #24262f 0%, #353849 100%); }
.vnet-hero__slide--hardware{ background-color: #292b37; background-image: linear-gradient(120deg, #21232e 0%, #313446 100%); }
/* 背景画像指定時：暗色オーバーレイで白テキストの可読性を確保 */
.vnet-hero__slide.has-bg::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(33, 35, 46, .94) 0%, rgba(33, 35, 46, .72) 45%, rgba(33, 35, 46, .4) 100%);
	pointer-events: none;
}
.vnet-hero__inner{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--vnet-maxw);
	margin-inline: auto;
}
.vnet-hero__eyebrow{
	color: var(--vnet-orange);
	font-weight: 700;
	letter-spacing: .14em;
	font-size: .82rem;
	margin: 0 0 16px;
}
.vnet-hero__title{
	color: #ffffff;
	font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 20px;
	max-width: 18em;
}
.vnet-hero__lead{
	color: rgba(255, 255, 255, .82);
	font-size: clamp(1rem, .95rem + .4vw, 1.15rem);
	max-width: 40em;
	margin: 0 0 32px;
}
/* ナビ矢印 */
.vnet-hero__nav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	box-shadow: var(--vnet-shadow-sm);
	color: var(--vnet-ink);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background-color .2s ease, color .2s ease;
}
.vnet-hero__nav:hover{ background: var(--vnet-orange); color: #fff; }
.vnet-hero__nav--prev{ left: 16px; }
.vnet-hero__nav--next{ right: 16px; }
/* ドット */
.vnet-hero__dots{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	display: flex;
	justify-content: center;
	gap: 10px;
	z-index: 2;
}
.vnet-hero__dot{
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .4);
	cursor: pointer;
	padding: 0;
	transition: background-color .2s ease, transform .2s ease;
}
.vnet-hero__dot.is-active{
	background: var(--vnet-orange);
	transform: scale(1.25);
}

/* =================================================================
 * セクション共通
 * ================================================================= */
.vnet-section{ padding: clamp(56px, 8vw, 100px) 0; }
/* 帯リズム（/work/準拠）：淡色 ↔ 濃グレー を交互に */
.vnet-section--problems{ background: var(--vnet-bg-alt); }   /* 淡色 */
.vnet-section--hardware{ background: var(--vnet-bg); }       /* 白 */
.vnet-section--cta{ background: var(--vnet-ink); }           /* 最濃 */
/* 濃グレー帯（software / advantage に付与） */
.vnet-section--dark{ background: var(--vnet-ink-2); }        /* #333645 */
.vnet-section--darker{ background: var(--vnet-ink); }        /* #292b37 */
.vnet-section--dark .vnet-h2,
.vnet-section--darker .vnet-h2,
.vnet-section--dark .vnet-card__title,
.vnet-section--darker .vnet-card__title,
.vnet-section--dark .vnet-badge__title,
.vnet-section--darker .vnet-badge__title{ color: #ffffff; }
.vnet-section--dark .vnet-lead,
.vnet-section--darker .vnet-lead,
.vnet-section--dark .vnet-card__desc,
.vnet-section--darker .vnet-card__desc,
.vnet-section--dark .vnet-badge__desc,
.vnet-section--darker .vnet-badge__desc{ color: rgba(255, 255, 255, .78); }
.vnet-section--dark .vnet-card,
.vnet-section--darker .vnet-card,
.vnet-section--dark .vnet-badge,
.vnet-section--darker .vnet-badge{
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}
.vnet-section--dark .vnet-tag,
.vnet-section--darker .vnet-tag{ background: var(--vnet-orange); }

/* グリッド */
.vnet-grid{
	display: grid;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vnet-grid--4{ grid-template-columns: repeat(4, 1fr); }
.vnet-grid--3{ grid-template-columns: repeat(3, 1fr); }
.vnet-grid--2{ grid-template-columns: repeat(2, 1fr); }

/* カード */
.vnet-card{
	background: #fff;
	border: 1px solid var(--vnet-line);
	border-radius: var(--vnet-radius);
	padding: 32px 26px;
	box-shadow: var(--vnet-shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease;
}
.vnet-card:hover{
	transform: translateY(-4px);
	box-shadow: var(--vnet-shadow);
}
.vnet-card__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--vnet-orange-soft);
	color: var(--vnet-orange);
	margin-bottom: 18px;
}
.vnet-card--problem .vnet-card__icon{ background: var(--vnet-bg-alt); color: var(--vnet-ink-2); }
.vnet-card__title{
	color: var(--vnet-ink);
	font-size: 1.12rem;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.5;
}
.vnet-card__desc{ font-size: .95rem; margin: 0; }
.vnet-icon{ width: 28px; height: 28px; }

.vnet-figure{
	margin: 0 0 48px;        /* auto→0：コンテナ全幅を使う */
	max-width: 100%;          /* 640px の制限を解除 */
	text-align: center;
}
.vnet-figure img{
	max-width: 100%;
	height: auto;
	background: #fff;
	border: 1px solid var(--vnet-line);
	border-radius: var(--vnet-radius);
	padding: 16px;
	box-shadow: var(--vnet-shadow-sm);
}
.vnet-figure figcaption{
	margin-top: 12px;
	font-size: .88rem;
	color: var(--vnet-muted);
}
/* 製品写真（V-Gate実機）：図版は小さめに中央寄せ */
.vnet-figure--product{
	max-width: 380px;
	margin-inline: auto;
}
.vnet-figure--product img{
	padding: 18px 24px;
}

/* バッジ（アドバンテージ） */
.vnet-grid--badges{ max-width: 880px; margin-inline: auto; }
.vnet-badge{
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--vnet-line);
	border-left: 4px solid var(--vnet-orange);
	border-radius: var(--vnet-radius);
	padding: 28px 30px;
	box-shadow: var(--vnet-shadow-sm);
}
.vnet-badge__icon{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--vnet-orange-soft);
	color: var(--vnet-orange);
}
.vnet-badge__title{ color: var(--vnet-ink); font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; }
.vnet-badge__desc{ font-size: .92rem; margin: 0; }

/* =================================================================
 * 統合解説（V-Gateソリューション ＝ ソフト × ハード）
 * ================================================================= */
.vnet-section--solution{ background: var(--vnet-bg-alt); }
.vnet-merge{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 16px;
	max-width: 1000px;
	margin: 0 auto;
}
.vnet-merge__card{
	flex: 1 1 240px;
	max-width: 300px;
	background: #fff;
	border: 1px solid var(--vnet-line);
	border-radius: var(--vnet-radius);
	padding: 30px 24px;
	text-align: center;
	box-shadow: var(--vnet-shadow-sm);
}
.vnet-merge__card--result{
	border: 2px solid var(--vnet-orange);
	background: var(--vnet-orange-soft);
	box-shadow: var(--vnet-shadow);
}
.vnet-merge__op{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 800;
	color: var(--vnet-orange);
	flex: 0 0 auto;
}
.vnet-merge__tag{
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--vnet-muted);
	margin-bottom: 12px;
}
.vnet-merge__card--result .vnet-merge__tag{ color: var(--vnet-orange-strong); }
.vnet-merge__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--vnet-orange-soft);
	color: var(--vnet-orange);
	margin-bottom: 14px;
}
.vnet-merge__card--result .vnet-merge__icon{ background: #fff; }
.vnet-merge__title{
	color: var(--vnet-ink);
	font-size: 1.12rem;
	font-weight: 700;
	margin: 0 0 8px;
}
.vnet-merge__desc{ font-size: .92rem; margin: 0; color: var(--vnet-body); }

.vnet-benefits{
	list-style: none;
	margin: 36px auto 0;
	padding: 0;
	max-width: 920px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 28px;
}
.vnet-benefits__item{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .96rem;
	font-weight: 600;
	color: var(--vnet-ink);
}
.vnet-benefits__check{
	display: inline-flex;
	color: var(--vnet-orange);
}
.vnet-benefits__check .vnet-icon{ width: 20px; height: 20px; }

/* CTA */
.vnet-cta{ text-align: center; max-width: 760px; }
.vnet-cta__title{ color: #fff; }
.vnet-cta__lead{ color: rgba(255, 255, 255, .8); margin-bottom: 32px; }
.vnet-cta__actions{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}
/* 暗いCTA帯ではゴーストボタンを白系に */
.vnet-section--cta .vnet-btn--ghost{
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
}
.vnet-section--cta .vnet-btn--ghost:hover{
	color: var(--vnet-orange);
	border-color: var(--vnet-orange);
	background: rgba(255, 255, 255, .04);
}

/* =================================================================
 * SVGヒーロービジュアル（スライダーの外・独立セクション）
 * 親コンテナ(#main / fusion-row等)のパディングを除去して全幅表示
 * このCSSはVNET LPページにのみ読み込まれる
 * ================================================================= */
/* Avadaの #main / コンテンツラッパーのサイドパディングをLP専用で除去 */
#wrapper #main,
#wrapper #main.clearfix,
#wrapper .fusion-content-wrap,
#wrapper .fusion-main-tc,
#main .post-content,
.vnet-lp{
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.vnet-svg-hero{
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	overflow: hidden;
	line-height: 0;
	display: block;
	background: #181a28;
}
.vnet-svg-hero__img{
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}
/* 再生ボタン：オレンジ塗りで目立たせる */

/* 一時停止状態：薄いオレンジ輪郭に切り替え */


/* =================================================================
 * レスポンシブ
 * ================================================================= */
@media (max-width: 980px){
	.vnet-grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.vnet-grid--3,
.vnet-grid--2{ grid-template-columns: 1fr; }
	.vnet-hero__slide{ min-height: 420px; padding: 56px 20px; }
	.vnet-hero__nav{ width: 40px; height: 40px; font-size: 1.5rem; }
	.vnet-badge{ flex-direction: column; gap: 14px; }

	/* 統合セクション：縦積み（カード → + → カード → = → カード） */
.vnet-merge{ flex-direction: column; align-items: center; gap: 10px; }
	.vnet-merge__card{ width: 100%; max-width: 380px; }
	.vnet-merge__op{ padding: 2px 0; }
	/* CTAボタンはモバイルで横幅を揃えて縦並び */
.vnet-cta__actions{ flex-direction: column; align-items: center; }
	.vnet-cta__actions .vnet-btn{ width: 100%; max-width: 320px; text-align: center; }

	/* ヒーロー：スマホではナビボタンをドット横（下部中央）へ移動 */
.vnet-hero__slide{
		padding-bottom: 80px; /* ボタン＋ドット分の下部余白を確保 */
	}
	.vnet-hero__nav{
		top: auto;
		bottom: 18px;
		transform: none;
		width: 36px;
		height: 36px;
		font-size: 1.3rem;
	}
	.vnet-hero__nav--prev{
		left: calc(50% - 64px); /* ドット左隣 */
		right: auto;
	}
	.vnet-hero__nav--next{
		right: calc(50% - 64px); /* ドット右隣 */
		left: auto;
	}
	.vnet-hero__dots{
		bottom: 24px; /* ボタンと同じ高さに揃える */
	}

	/* コンテナの横パディングをスマホで縮小 */
.vnet-container{
		padding-inline: 16px;
	}
}
@media (max-width: 480px) {
	.vnet-grid--4{ grid-template-columns: 1fr; }
	/* スマホでは大見出しを縮めて折り返しを抑える（clamp下限1.9remの上書き） */
.vnet-hero__title{ font-size: clamp(1.4rem, 1rem + 2.5vw, 1.7rem); line-height: 1.34; }
	.vnet-h2{ font-size: clamp(1.35rem, 1.05rem + 1.8vw, 1.7rem); }
	.vnet-hero__lead{ font-size: .95rem; }
	/* 製品写真はスマホで上限を少し下げて中央に収める */
.vnet-figure--product{ max-width: 300px; }
	.vnet-figure--product img{ padding: 14px 18px; }
	/* セクション上下の余白をスマホ向けに圧縮 */
.vnet-section{ padding-block: 48px; }
}

/* =================================================================
 * モーション低減（アクセシビリティ）
 * ================================================================= */
@media (prefers-reduced-motion: reduce){
	.vnet-hero__track{ transition: none; }
	.vnet-card{ transition: none; }
}

/* =================================================================
 * VPNとの違い（比較表）  ※rev2営業コピー
 * ================================================================= */
.vnet-section--compare{ background: #f3f4f6; }
.vnet-cmp{
	margin-top: 30px;
	border: 1px solid #d6dbe0;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
.vnet-cmp__row{
	display: grid;
	grid-template-columns: 0.9fr 1.05fr 1.25fr;
}
.vnet-cmp__row + .vnet-cmp__row{ border-top: 1px solid #e6e9ed; }
.vnet-cmp__cell{
	padding: 13px 16px;
	font-size: 0.95rem;
	line-height: 1.65;
}
.vnet-cmp__cell--axis{
	font-weight: 700;
	color: #292b37;
	background: #eceef1;
	display: flex;
	align-items: center;
}
.vnet-cmp__cell--vpn{ color: #6b7280; border-left: 1px solid #e6e9ed; }
.vnet-cmp__cell--vgate{
	color: #23262f;
	font-weight: 600;
	background: #fff7ef;
	border-left: 1px solid #e6e9ed;
}
.vnet-cmp__row--head .vnet-cmp__cell{
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
}
.vnet-cmp__row--head .vnet-cmp__cell--axis{ background: #1e2029; color: #fff; }
.vnet-cmp__row--head .vnet-cmp__cell--vpn{ background: #333645; color: #cfd3da; }
.vnet-cmp__row--head .vnet-cmp__cell--vgate{ background: #ee7700; color: #fff; }
.vnet-cmp__label{ display: none; }

@media (max-width: 720px) {
	.vnet-cmp__row{ grid-template-columns: 1fr; }
	.vnet-cmp__row--head{ display: none; }
	.vnet-cmp__cell{ border-left: 0 !important; }
	.vnet-cmp__cell--axis{
		background: #292b37;
		color: #fff;
		font-size: 1rem;
		padding: 11px 16px;
	}
	.vnet-cmp__cell--vpn,
.vnet-cmp__cell--vgate{ border-top: 1px solid #e6e9ed; }
	.vnet-cmp__label{
		display: inline-block;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		padding: 1px 9px;
		border-radius: 999px;
		margin-right: 9px;
	}
	.vnet-cmp__cell--vpn .vnet-cmp__label{ background: #e6e9ed; color: #6b7280; }
	.vnet-cmp__cell--vgate .vnet-cmp__label{ background: #ee7700; color: #fff; }
}

/* ===== VD:BEGIN 自動生成（tools/build-vd-assets.js）ここから下は手で編集しない ===== */
.vd-scope{
  /* --- 基調（モノクローム） --- */
  --paper:#ffffff;
  --ink:#000000;
  --graphite:#6e6e6e;
  --ash:#a8a8a8;
  --rule:#e4e4e4;
  --mist:#f4f6f8;

  /* --- C.M.D コーポレートカラー（暫定値。確定後はこの3行のみ差し替え） --- */
  --ci-deep:#0f2b46;
  --ci-mid:#2e6e9e;
  --ci-lite:#5ba7d6;
  --ci-pale:#9fd4ef;
  --ci-alert:#c0392b;

  --grad:linear-gradient(135deg,var(--ci-deep) 0%,var(--ci-mid) 55%,var(--ci-lite) 100%);
  --grad-deep:linear-gradient(135deg,#06121f 0%,var(--ci-deep) 45%,#1d4d75 100%);

  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Meiryo UI",Meiryo,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Yu Gothic",monospace;
  --gut:clamp(20px,5vw,64px);
}
.vd-scope *{box-sizing:border-box}
.vd-scope{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.vd-scope{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.9;
  font-feature-settings:"palt" 1;letter-spacing:.01em;overflow-x:hidden;
}
.vd-scope .wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.vd-scope a{color:inherit}
.vd-scope :focus-visible{outline:2px solid var(--ci-mid);outline-offset:3px}
.vd-scope h1,.vd-scope h2,.vd-scope h3{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.4}
.vd-scope p{margin:0}
.vd-scope .tbd{font-family:var(--mono);font-size:.82em;color:var(--graphite);border-bottom:1px dotted var(--ash)}
@keyframes ping{
  0%{opacity:0;transform:scale(.86)}
  22%{opacity:.85}
  70%{opacity:0}
  100%{opacity:0;transform:scale(1.14)}
}
.vd-scope .demo-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-top:2px solid var(--ink);padding-top:22px}
.vd-scope .demo-head h2{font-size:clamp(19px,2.4vw,26px)}
.vd-scope .demo-head p{font-size:13px;color:var(--graphite);max-width:38ch}

.vd-scope .topo{margin-top:40px;display:grid;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto;
  grid-template-rows:auto auto;align-items:center;row-gap:30px}
.vd-scope .node{border:1px solid var(--ink);padding:14px 16px;background:var(--paper);min-width:108px;text-align:center;
  transition:border-color .3s,color .3s,box-shadow .3s}
.vd-scope .node .t{font-size:13px;font-weight:700;line-height:1.5;display:block}
.vd-scope .node .s{font-size:10.5px;color:var(--graphite);font-family:var(--mono);margin-top:4px;display:block}
.vd-scope .node.tall{grid-row:1 / span 2;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.vd-scope .node.dim{border-color:var(--rule);color:var(--ash)}
.vd-scope .node.dim .s{color:var(--ash)}
.vd-scope .node.live{border-color:var(--ci-mid);box-shadow:0 0 0 3px rgba(46,110,158,.13)}
.vd-scope .node.hurt{border-color:var(--ci-alert);box-shadow:0 0 0 3px rgba(192,57,43,.13)}
.vd-scope .node.hurt .t{color:var(--ci-alert)}

.vd-scope .node.gate{padding:24px 18px;border:0;background:var(--grad);color:#fff;position:relative}
.vd-scope .node.gate .s{color:rgba(255,255,255,.72)}
.vd-scope .node.gate .t{font-size:17px;letter-spacing:-.02em}
.vd-scope .node.gate::before{
  content:"";position:absolute;inset:-6px;border:1px solid var(--rule);z-index:-1;
}
.vd-scope .node.gate .beat{
  display:block;width:7px;height:7px;border-radius:50%;background:#fff;margin:10px auto 0;opacity:.9
}
.vd-scope .pulse .node.gate .beat{animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.28;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

.vd-scope .node.cloudnode{border:0;background:transparent;padding:0;min-width:150px}
.vd-scope .node.cloudnode img{display:block;width:150px;height:auto;margin:0 auto;transition:opacity .35s}
.vd-scope .node.cloudnode .t{margin-top:8px}
.vd-scope .pulse .node.cloudnode img{animation:drift 7s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.vd-scope .node .devimg{display:block;width:74px;height:auto;margin:0 auto 8px;
  filter:grayscale(1) contrast(.9) opacity(.42);transition:filter .45s}
.vd-scope .node.live .devimg{filter:none}
.vd-scope .node.hurt .devimg{filter:grayscale(1) opacity(.5)}

.vd-scope .preset{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.vd-scope .preset .plabel{font-size:11px;font-family:var(--mono);color:var(--graphite);letter-spacing:.06em}
.vd-scope .preset button{font-size:12.5px;font-weight:700;padding:8px 15px;border:1px solid var(--rule);
  background:var(--paper);color:var(--graphite)}
.vd-scope .preset button:hover{border-color:var(--ink);background:var(--paper);color:var(--ink)}
.vd-scope .preset button.on{background:var(--grad);border-color:transparent;color:#fff}
.vd-scope .preset button.on:hover{color:#fff;filter:brightness(1.1)}

.vd-scope .link{position:relative;height:36px;display:flex;align-items:center}
.vd-scope .link .wire{width:100%;height:3px;background:var(--rule);transition:clip-path .5s ease-out,background .3s,height .2s}
.vd-scope .link .lbl{position:absolute;left:50%;top:-1px;transform:translate(-50%,-100%);
  font-size:10px;font-family:var(--mono);color:var(--graphite);white-space:nowrap;transition:color .3s}
.vd-scope .link .mark-x{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  width:19px;height:19px;background:var(--paper);display:none;transition:transform .28s cubic-bezier(.2,1.5,.4,1)}
.vd-scope .link .mark-x::before,.vd-scope .link .mark-x::after{content:"";position:absolute;left:1px;top:8.5px;width:17px;height:2px;background:var(--ci-alert)}
.vd-scope .link .mark-x::before{transform:rotate(45deg)}
.vd-scope .link .mark-x::after{transform:rotate(-45deg)}

.vd-scope .link.standby .wire{height:1px;background:var(--ash)}
.vd-scope .link.standby .lbl{color:var(--ash)}

.vd-scope .link.active .wire{
  height:4px;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.92) 0 6px,transparent 6px 24px),
    var(--grad);
  background-size:24px 100%,100% 100%;
  background-repeat:repeat-x,no-repeat;
  clip-path:inset(0 0 0 0);
}
.vd-scope .pulse .link.active .wire{animation:flowx 1.05s linear infinite}
@keyframes flowx{from{background-position:0 0,0 0}to{background-position:-24px 0,0 0}}
.vd-scope .link.active .lbl{color:var(--ci-deep)}
.vd-scope .link.arming .wire{clip-path:inset(0 100% 0 0)}

.vd-scope .link.cut .wire{height:1px;background:var(--ash);clip-path:inset(0 0 0 0)}
.vd-scope .link.cut .mark-x{display:block;transform:translate(-50%,-50%) scale(1)}
.vd-scope .link.cut .lbl{color:var(--ci-alert)}

.vd-scope .link.flood .wire{
  height:11px;
  background-image:repeating-linear-gradient(45deg,var(--ci-alert) 0 4px,#fff 4px 8px);
  background-size:11.4px 11.4px;
  border-top:1px solid var(--ci-alert);border-bottom:1px solid var(--ci-alert);
  clip-path:inset(0 0 0 0);
}
.vd-scope .pulse .link.flood .wire{animation:floodx .55s linear infinite}
@keyframes floodx{from{background-position:0 0}to{background-position:-11.4px 0}}
.vd-scope .link.flood .lbl{color:var(--ci-alert);font-weight:700}

.vd-scope .readout{margin-top:40px;border:1px solid var(--ink);display:grid;grid-template-columns:.85fr 1.15fr}
.vd-scope .rt-state{border-right:1px solid var(--rule);padding:20px 22px;background:var(--mist)}
.vd-scope .rt-log{padding:20px 22px}
.vd-scope .rt-title{font-size:10.5px;font-family:var(--mono);color:var(--graphite);margin-bottom:13px;letter-spacing:.06em}
.vd-scope .kv{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12.5px;
  padding:6px 0;border-bottom:1px dotted var(--rule)}
.vd-scope .kv .k{color:var(--graphite)}
.vd-scope .kv .v{font-weight:700;text-align:right;transition:color .3s}
.vd-scope .kv .v.alert{color:var(--ci-alert)}
.vd-scope .kv .v.good{color:var(--ci-deep)}

.vd-scope .gauge{margin-top:18px}
.vd-scope .gauge .glabel{font-size:10.5px;font-family:var(--mono);color:var(--graphite);display:flex;justify-content:space-between}
.vd-scope .gauge .bar{position:relative;height:12px;background:#e2e7ec;margin-top:7px;overflow:hidden}
.vd-scope .gauge .fill{position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--grad);transition:width .8s ease-out,background .4s}
.vd-scope .gauge .fill.alert{background:linear-gradient(90deg,#8c2a20,var(--ci-alert))}
.vd-scope .gauge .thr{position:absolute;left:70%;top:-3px;bottom:-3px;width:1px;background:var(--ink)}
.vd-scope .gauge .thr::after{content:"しきい値";position:absolute;left:4px;top:-16px;font-size:9.5px;font-family:var(--mono);color:var(--ink);white-space:nowrap}
.vd-scope .gauge .cap{margin-top:16px;font-size:10.5px;color:var(--graphite);line-height:1.7}

.vd-scope #vd-log{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12.5px;min-height:186px}
.vd-scope #vd-log li{padding:5px 0 5px 24px;position:relative;line-height:1.75;animation:linein .34s ease-out both}
.vd-scope #vd-log li::before{content:attr(data-n);position:absolute;left:0;top:5px;color:var(--ci-mid);font-size:11px;font-weight:700}
.vd-scope #vd-log li.note{color:var(--graphite)}
.vd-scope #vd-log li.note::before{color:var(--ash)}
.vd-scope #vd-log li.warn::before{color:var(--ci-alert)}
@keyframes linein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.vd-scope .ctrl{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vd-scope button{font-family:inherit;font-size:13.5px;font-weight:700;padding:12px 19px;cursor:pointer;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.vd-scope button:hover{background:var(--ink);color:var(--paper)}
.vd-scope button.alert{border-color:var(--ci-alert);color:var(--ci-alert)}
.vd-scope button.alert:hover{background:var(--ci-alert);color:#fff}
.vd-scope button.primary{background:var(--grad);border-color:transparent;color:#fff}
.vd-scope button.primary:hover{filter:brightness(1.12)}
.vd-scope button[disabled]{border-color:var(--rule);color:var(--ash);background:var(--paper);cursor:default;filter:none}
.vd-scope .disclaimer{margin-top:16px;font-size:11.5px;color:var(--graphite);line-height:1.8;max-width:74ch}

.vd-scope section{padding:clamp(56px,9vw,112px) 0}
.vd-scope .sec-title{font-size:clamp(22px,3.3vw,34px);max-width:24ch}
.vd-scope .sec-lede{margin-top:22px;max-width:60ch;color:var(--graphite)}
.vd-scope .rule-top{border-top:1px solid var(--rule)}

.vd-scope .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}

.vd-scope table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:26px}
.vd-scope caption{text-align:left;font-size:11.5px;color:var(--graphite);padding-bottom:10px;font-family:var(--mono)}
.vd-scope th,.vd-scope td{text-align:left;vertical-align:top;padding:13px 14px;border-bottom:1px solid var(--rule)}
.vd-scope thead th{border-bottom:2px solid var(--ink);font-size:12px}
.vd-scope thead th:last-child{color:var(--ci-deep)}
.vd-scope tbody th{font-weight:700;width:24%}
.vd-scope td{color:var(--graphite)}
.vd-scope td.now{color:var(--ci-deep);font-weight:700}

.vd-scope .scan{border:1px solid var(--ink);padding:22px 24px;font-family:var(--mono);font-size:12.5px;line-height:2;background:#0b1119;color:#c9d4de}
.vd-scope .scan .cmd{color:#fff;font-weight:700}
.vd-scope .scan .ok{color:#fff}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.vd-scope .badge{display:inline-block;padding:6px 13px;font-size:11.5px;font-family:var(--mono);margin-top:26px;
  border:1px solid var(--ci-mid);color:var(--ci-deep)}

.vd-scope .spec-note{margin-top:22px;font-size:13px;color:var(--graphite);max-width:64ch}
.vd-scope .install{margin-top:34px;border-left:3px solid var(--ci-alert);padding:8px 0 8px 20px;font-size:14px;max-width:66ch}

.vd-scope footer{background:var(--ci-deep);color:rgba(255,255,255,.66);padding:38px 0 56px;font-size:12px}
.vd-scope footer p{max-width:54ch;line-height:1.9}

.vd-scope .noc{margin-top:46px;background:#070c13;border:1px solid #1b2634;color:#c2d0e0;padding:22px 24px 20px}
.vd-scope .noc-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid #1b2634;padding-bottom:14px;margin-bottom:20px}
.vd-scope .noc-head h3{font-size:11px;letter-spacing:.16em;color:#7d8da1;font-family:var(--mono);text-transform:uppercase}
.vd-scope .noc .pill{font-family:var(--mono);font-size:10.5px;color:#7d8da1;border:1px solid #1b2634;
  padding:4px 11px;display:flex;align-items:center;gap:7px}
.vd-scope .noc .pill b{color:#dbe6f2;font-weight:500}
.vd-scope .noc .pill.right{margin-left:auto}
.vd-scope .noc .dot{width:7px;height:7px;border-radius:50%;background:#37455a;flex:none}
.vd-scope .noc .dot.on{background:var(--ci-lite);box-shadow:0 0 9px var(--ci-lite)}
.vd-scope .noc .dot.err{background:var(--ci-alert);box-shadow:0 0 9px var(--ci-alert)}
.vd-scope .pulse .noc .dot.on,.vd-scope .pulse .noc .dot.err{animation:beat 1.7s ease-in-out infinite}
.vd-scope .noc .alarm{display:none;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  color:var(--ci-alert);border:1px solid var(--ci-alert);background:rgba(192,57,43,.1);padding:4px 12px}
.vd-scope .noc .alarm.show{display:flex}
.vd-scope .pulse .noc .alarm.show{animation:blink2 1s steps(2,end) infinite}
@keyframes blink2{50%{opacity:.4}}

.vd-scope .noc-grid{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:18px;align-items:start}
.vd-scope .ncard{background:#0c1219;border:1px solid #1b2634;padding:15px 16px 13px;position:relative}
.vd-scope .ncard .accent{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ci-mid)}
.vd-scope .ncard.sub .accent{background:var(--ci-pale)}
.vd-scope .ncard h4{font-size:10.5px;letter-spacing:.14em;color:#7d8da1;font-family:var(--mono);
  display:flex;align-items:center;gap:8px;text-transform:uppercase}
.vd-scope .ncard .st{margin-left:auto;font-family:var(--mono);font-size:9.5px;padding:2px 7px;
  color:#7d8da1;background:rgba(125,141,161,.13);letter-spacing:.04em}
.vd-scope .ncard .st.up{color:var(--ci-lite);background:rgba(91,167,214,.14)}
.vd-scope .ncard .cap{font-family:var(--mono);font-size:9.5px;color:#5b6b7f;margin-top:10px;letter-spacing:.04em}
.vd-scope .spark{width:100%;height:52px;display:block;margin-top:10px}

.vd-scope .core{background:#0c1219;border:1px solid #1b2634;padding:15px 12px 12px}
.vd-scope .core h4{font-size:10.5px;letter-spacing:.14em;color:#7d8da1;font-family:var(--mono);
  text-align:center;text-transform:uppercase}
.vd-scope .flow{width:100%;height:250px;display:block;margin-top:4px}
.vd-scope .flow .lnk{fill:none;stroke-linecap:round;transition:stroke-width .55s ease,opacity .55s ease,stroke .4s}
.vd-scope .flow #vd-p1{stroke:var(--ci-mid);stroke-dasharray:6 6}
.vd-scope .flow #vd-p2{stroke:var(--ci-pale);stroke-dasharray:6 6}
.vd-scope .flow #vd-pv{stroke:#ffffff;stroke-dasharray:6 6}
.vd-scope .flow #vd-pd{stroke:var(--ci-alert);stroke-dasharray:4 8}
.vd-scope .pulse .flow .lnk{animation:dashmove 1.15s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-24}}
.vd-scope .flow #vd-corehex{fill:#111a24;stroke:var(--ci-lite);stroke-width:1.6;transition:stroke .45s}
.vd-scope .flow.hot #vd-corehex{stroke:var(--ci-alert)}
.vd-scope .flow text{font-family:var(--mono)}

.vd-scope .ratiobar{height:7px;background:var(--ci-alert);margin-top:14px;border:1px solid #1b2634;overflow:hidden}
.vd-scope .ratiobar i{display:block;height:100%;background:linear-gradient(90deg,var(--ci-mid),var(--ci-lite));
  width:97%;transition:width .6s ease}
.vd-scope .ratiolab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;
  color:#5b6b7f;margin-top:8px;letter-spacing:.1em}
.vd-scope .ratiolab .v{color:#dbe6f2}
.vd-scope .ratiolab .d{color:var(--ci-alert)}

.vd-scope .nhist{grid-column:1 / -1;background:#0c1219;border:1px solid #1b2634;padding:15px 16px 13px}
.vd-scope .nhist h4{font-size:10.5px;letter-spacing:.14em;color:#7d8da1;font-family:var(--mono);text-transform:uppercase}
.vd-scope .hist{width:100%;height:120px;display:block;margin-top:8px}
.vd-scope .legend{display:flex;gap:18px;font-family:var(--mono);font-size:10px;color:#5b6b7f;margin-top:9px}
.vd-scope .legend span{display:flex;align-items:center;gap:6px}
.vd-scope .swatch{width:11px;height:3px;display:inline-block}

.vd-scope .noc-foot{margin-top:18px;border-top:1px solid #1b2634;padding-top:14px;
  font-family:var(--mono);font-size:10px;color:#5b6b7f;line-height:1.85}
.vd-scope .noc-foot b{color:#9aabbd}
@media (max-width:900px){.vd-scope .noc-grid{grid-template-columns:1fr}}

/* ================= responsive ================= */
@media (max-width:900px){
  .vd-scope .split{grid-template-columns:1fr}
  .vd-scope .readout{grid-template-columns:1fr}
  .vd-scope .rt-state{border-right:0;border-bottom:1px solid var(--rule)}
}
@media (max-width:680px){
  .vd-scope .topo{grid-template-columns:1fr 1fr;grid-template-rows:repeat(7,auto);row-gap:0}
  .vd-scope .node{width:100%}
  .vd-scope .node.tall{grid-row:auto}
  .vd-scope .node.cloudnode img{width:120px}
  .vd-scope .link{height:46px;justify-content:center}
  .vd-scope .link .wire{width:4px;height:100%}
  .vd-scope .link.standby .wire,.vd-scope .link.cut .wire{width:1px;height:100%}
  .vd-scope .link.active .wire{
    width:4px;height:100%;
    background-image:linear-gradient(180deg,rgba(255,255,255,.92) 0 6px,transparent 6px 24px),var(--grad);
    background-size:100% 24px,100% 100%;background-repeat:repeat-y,no-repeat;
  }
  .vd-scope .pulse .link.active .wire{animation:flowy 1.05s linear infinite}
  @keyframes flowy{from{background-position:0 0,0 0}to{background-position:0 -24px,0 0}}
  .vd-scope .link.arming .wire{clip-path:inset(0 0 100% 0)}
  .vd-scope .link.flood .wire{width:11px;height:100%;border:0;border-left:1px solid var(--ci-alert);border-right:1px solid var(--ci-alert)}
  .vd-scope .pulse .link.flood .wire{animation:floody .55s linear infinite}
  @keyframes floody{from{background-position:0 0}to{background-position:0 -11.4px}}
  .vd-scope .link .lbl{left:auto;right:2px;top:50%;transform:translate(0,-50%)}
  .vd-scope #vd-n-lan,.vd-scope #vd-l-lan,.vd-scope #vd-n-gate,.vd-scope #vd-n-net{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .vd-scope{scroll-behavior:auto}
  .vd-scope *,.vd-scope *::before,.vd-scope *::after{animation:none !important;transition:none !important}
}
/* ===== VD:END 自動生成ここまで ===== */
/* =================================================================
 * VD区間の後に置く手書きの補正（自動生成の対象外）
 * ================================================================= */
/* 移植元はデモ見出しを <h2> にしていたが、当LPではセクション見出しが既に
 * <h2>（「V-Gate」）のため、デモ見出しは <h3> が正しい階層になる。
 * 元CSSの .demo-head h2 が当たらなくなるので、同じ指定を h3 にも与える。 */
.vd-scope .demo-head h3{ font-size: clamp(19px, 2.4vw, 26px); }

/* =================================================================
 * 途中CTA（コンパクトな問い合わせ導線）
 * 最下部の正式CTA（.vnet-section--cta）とは別物。
 * .vnet-section は使わない。セクション同士の上下100pxが二重にかかって
 * 間延びするため、専用の控えめな余白を持たせている。
 * ================================================================= */
.vnet-inline-cta{
	background: var(--vnet-bg);
	padding: clamp(20px, 3vw, 32px) 0;
}
/* カードは .vnet-container の内側に置く。__inner に直接スタイルを当てると
 * コンテナの padding-inline がカードの外側余白を兼ねてしまい、
 * スマホ（padding 16px）でカードの罫線が画面端に接してしまう。 */
.vnet-inline-cta__card{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px 28px;
	padding: clamp(20px, 2.6vw, 26px) clamp(20px, 2.4vw, 28px);
	background: var(--vnet-bg-alt);
	border: 1px solid var(--vnet-line);
	border-left: 4px solid var(--vnet-orange);
	border-radius: var(--vnet-radius);
}
.vnet-inline-cta__body{ flex: 1 1 320px; min-width: 0; }
.vnet-inline-cta__title{
	margin: 0 0 6px;
	color: var(--vnet-ink);
	font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
	font-weight: 700;
	line-height: 1.5;
}
.vnet-inline-cta__lead{
	margin: 0;
	color: var(--vnet-body);
	font-size: .92rem;
	line-height: 1.7;
}
.vnet-inline-cta__btn{
	flex: 0 0 auto;
	padding: 14px 26px;
	font-size: .93rem;
	white-space: nowrap;
}
@media (max-width: 600px){
	.vnet-inline-cta__card{ flex-direction: column; align-items: flex-start; }
	/* 縦積みでは flex-basis が「高さ」として効いてしまうので解除する */
	.vnet-inline-cta__body{ flex: 0 0 auto; width: 100%; }
	.vnet-inline-cta__btn{ width: 100%; text-align: center; white-space: normal; }
}

/* Monitor パネルの見出しはコンソール調で text-transform:uppercase を掛けているが、
 * 製品名だけは正式表記（V-Gate）で見せる。見出し全体の大文字化は変えない。
 * ※ VD区間の中（.vd-scope .noc-head h3）は自動生成なので、ここで上書きする。 */
.vd-scope .vd-brand{ text-transform: none; }

/* =================================================================
 * ADVANTAGE 上端の区切り罫（2026-09-11 CoreMirror 案B）
 * ADVANTAGE を ISSUES の上へ移した結果、ヒーロー終端（#292b37→#333645）と
 * ADVANTAGE の地色（#333645）が暗色同士で接し、境界が弱くなる。
 * 背景色は変えず、3pxのオレンジ罫だけで区切る。
 * ================================================================= */
.vnet-section--advantage{ border-top: 3px solid var(--vnet-orange); }

/* 製品写真の補足表記。キャプションの下に1段小さく置く。 */
.vnet-figure__note{
	display: block;
	margin-top: 4px;
	font-size: .78rem;
	line-height: 1.6;
	color: var(--vnet-muted);
}

/* =================================================================
 * 紹介動画ブロック（2026-09-18 追加・VD自動生成の対象外／手書き補正）
 *   配置・見せ方・音声UIは NEO 確定ブリーフに準拠。
 *   ① ambient = 初期ミュート自動再生 ＋ 音声トグル（HERO直下・60秒）
 *   ② feature = ポスター ＋ 中央の再生ボタン（INTEGRATED直後・約3分）
 * ================================================================= */
.vnet-videoblock{ padding: clamp(28px, 5vw, 56px) 0; background: var(--vnet-bg); }
.vnet-videoblock--feature{ background: var(--vnet-bg-alt); }

.vnet-video__notice{
	display: flex; align-items: center; justify-content: center; gap: .4em;
	margin: 0 auto 14px; max-width: 960px;
	font-size: .86rem; line-height: 1.5; color: var(--vnet-body);
	text-align: center;
}

.vnet-video{ margin: 0 auto; max-width: 960px; }
.vnet-video__frame{
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--vnet-radius);
	overflow: hidden;
	box-shadow: var(--vnet-shadow);
}
/* aspect-ratio 非対応ブラウザの保険（16:9 の高さを padding で確保） */
@supports not (aspect-ratio: 16 / 9){
	.vnet-video__frame{ height: 0; padding-top: 56.25%; }
}
.vnet-video__el{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block; object-fit: cover;
	background: #000;
}

/* ① ambient：音声トグル（既定は中央・音ON後は隅へ退避） */
.vnet-video__toggle{
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex; align-items: center; gap: .4em;
	padding: .7em 1.3em;
	font-size: clamp(14px, 1.6vw, 16px); font-weight: 600; line-height: 1;
	color: #fff;
	background: rgba(41, 43, 55, .72);
	border: 1.5px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	cursor: pointer;
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	transition: background .15s ease, transform .15s ease;
	z-index: 3;
}
.vnet-video__toggle:hover{ background: var(--vnet-orange); border-color: var(--vnet-orange); }
.vnet-video__toggle:focus-visible{ outline: 3px solid var(--vnet-orange); outline-offset: 2px; }
.vnet-video.is-unmuted .vnet-video__toggle{
	left: auto; top: auto; right: 12px; bottom: 52px;
	transform: none;
	padding: .5em .9em; font-size: 13px;
	background: rgba(41, 43, 55, .6);
}

/* ② feature：ポスター上の大きな再生ボタン */
.vnet-video__play{
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px;
	width: 100%; height: 100%;
	color: #fff;
	background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45));
	border: 0; cursor: pointer;
	z-index: 3;
}
.vnet-video__play-ico{
	position: relative;
	width: 74px; height: 74px; border-radius: 50%;
	background: var(--vnet-orange);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
	transition: transform .15s ease, background .15s ease;
}
.vnet-video__play-ico::after{
	content: ""; position: absolute; left: 54%; top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid; border-width: 15px 0 15px 25px;
	border-color: transparent transparent transparent #fff;
}
.vnet-video__play:hover .vnet-video__play-ico{ transform: scale(1.06); background: var(--vnet-orange-strong); }
.vnet-video__play:focus-visible{ outline: 3px solid var(--vnet-orange); outline-offset: -4px; }
.vnet-video__play-label{
	font-size: clamp(14px, 1.8vw, 17px); font-weight: 600; line-height: 1.4;
	text-align: center; padding: 0 16px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.vnet-video.is-playing .vnet-video__play{ display: none; }

@media (max-width: 520px){
	.vnet-video__play-ico{ width: 60px; height: 60px; }
	.vnet-video__play-ico::after{ border-width: 12px 0 12px 20px; }
	.vnet-video.is-unmuted .vnet-video__toggle{ bottom: 46px; }
}

/* =================================================================
 * 表現修正 2026-09-18（CoreMirror FINAL APPROVED）追加分・VD自動生成の対象外
 *   #0 併用前提ブロック（ADVANTAGE直後）／#10「見えない」定義注記（HERO導入文の直後）
 * ================================================================= */
/* #0 併用前提 */
.vnet-section--combine{ padding: clamp(32px, 5vw, 56px) 0; background: var(--vnet-bg); }
.vnet-combine__line{
	max-width: 860px; margin: 0 auto; text-align: center;
	color: var(--vnet-ink-2); line-height: 1.9;
	font-size: clamp(15px, 2vw, 18px);
}
.vnet-combine__line:first-child{ font-weight: 700; }
.vnet-combine__line + .vnet-combine__line{
	margin-top: 10px; color: var(--vnet-body);
	font-size: clamp(14px, 1.8vw, 16px);
}

/* #10 「見えない」定義注記（HERO導入スライドのみ・白文字の上に小さく） */
.vnet-hero__note{
	margin: 12px 0 4px; max-width: 42em;
	font-size: clamp(12px, 1.4vw, 13.5px); line-height: 1.7;
	color: rgba(255, 255, 255, .82);
	border-left: 2px solid rgba(255, 255, 255, .35);
	padding-left: 10px;
}