/* ============================================================
   サロウェブ /web/ ピラー — 「静謐な精密」 v3 (Awwwards級モーション)
   .webv2 スコープ限定。tokens.css(寒色)にbind。他ページ無影響。
   - 既定=完全表示(JS無し/検索エンジン/reduced-motionで成立)
   - web-craft.js が .webv2 に .wv-anim を付けた時だけリビール開始
   - compositor-only: transform / opacity / clip-path / translate
   - 旧構造(strength.html等)の .rvx 単体・旧 .wv-float は従来通り動く
   ============================================================ */
.webv2 { --wv-max: 78rem; --ease-exp: cubic-bezier(0.16, 1, 0.3, 1); }
.webv2 .wrap { max-width: var(--wv-max); margin-inline: auto; padding-inline: var(--gutter); }
.webv2 .nb { display: inline-block; }
.webv2 ::selection { background: var(--blue); color: var(--ink); }

/* ---- 空気(質感): 微細な寒色グレイン。fixedで紙のような一枚感 ---- */
.webv2::before {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.18 0 0 0 0 0.24 0 0 0 0 0.26 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px; opacity: 0.05;
}

/* ============================================================
   リビール・エンジン v2
   .rvx        = 単体リビール(従来互換)
   .rvx-group  = 自分は隠れず、直下の子を --i × --dgap でスタッガー
   .rvx-quiet  = 自分は隠れず、専用ルール(表・FAQ)が子を制御
   ============================================================ */
.webv2 .rvx {
  transition: opacity 1s var(--ease-exp) var(--d, 0s),
              transform 1s var(--ease-exp) var(--d, 0s),
              clip-path 1.15s var(--ease-exp) var(--d, 0s);
}
.webv2.wv-anim .rvx:not(.is-in) { opacity: 0; transform: translateY(30px); }

/* 見出し = 下からのマスクワイプ + 微上昇 */
.webv2.wv-anim .wv-h.rvx:not(.is-in) { transform: translateY(20px); clip-path: inset(0 0 100% 0); }
.webv2.wv-anim .wv-h.rvx.is-in { clip-path: inset(-12% 0 -16% 0); }

/* eyebrow の罫線が左から伸びる */
.webv2 .wv-ey::before { transform-origin: left center; transition: transform 0.9s var(--ease-exp) calc(var(--d, 0s) + 0.25s); }
.webv2.wv-anim .wv-ey.rvx:not(.is-in)::before { transform: scaleX(0); }

/* グループ: コンテナは透明化しない */
.webv2.wv-anim .rvx-group:not(.is-in),
.webv2.wv-anim .rvx-quiet:not(.is-in) { opacity: 1; transform: none; }
.webv2 .rvx-group > * {
  --d: calc(var(--dbase, 0ms) + var(--i, 0) * var(--dgap, 80ms));
  transition: opacity var(--rvdur, 0.95s) var(--ease-exp) var(--d),
              transform var(--rvdur, 0.95s) var(--ease-exp) var(--d),
              translate 0.45s var(--ease-exp),
              box-shadow 0.45s var(--ease-exp),
              border-color 0.35s ease;
}
.webv2.wv-anim .rvx-group:not(.is-in) > * { opacity: 0; transform: translateY(30px); }
.webv2 .rvx-group > :nth-child(1)  { --i: 0; }
.webv2 .rvx-group > :nth-child(2)  { --i: 1; }
.webv2 .rvx-group > :nth-child(3)  { --i: 2; }
.webv2 .rvx-group > :nth-child(4)  { --i: 3; }
.webv2 .rvx-group > :nth-child(5)  { --i: 4; }
.webv2 .rvx-group > :nth-child(6)  { --i: 5; }
.webv2 .rvx-group > :nth-child(7)  { --i: 6; }
.webv2 .rvx-group > :nth-child(8)  { --i: 7; }
.webv2 .rvx-group > :nth-child(9)  { --i: 8; }
.webv2 .rvx-group > :nth-child(10) { --i: 9; }
.webv2 .rvx-group > :nth-child(11) { --i: 10; }
.webv2 .rvx-group > :nth-child(12) { --i: 11; }

/* セクション枠・見出し */
.webv2 .wv-sec { padding-block: clamp(4rem, 3rem + 6vw, 9.5rem); position: relative; }
.webv2 .wv-alt { background: var(--cream-dim); }
.webv2 .wv-ey { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; color: var(--terra-deep); text-transform: uppercase; }
.webv2 .wv-ey::before { content: ""; width: 1.6rem; height: 1px; background: var(--terra); }
.webv2 .wv-h { font-family: var(--font-display); font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; color: var(--ink); font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); margin-top: 1rem; font-feature-settings: "palt" 1; text-wrap: balance; }
.webv2 .wv-h em { font-style: normal; color: var(--terra); }
.webv2 .wv-lead { max-width: 40em; color: var(--ink-2); margin-top: 1.1rem; line-height: 1.9; font-size: var(--text-base); }
.webv2 .wv-lead strong { color: var(--ink); font-weight: 700; }
.webv2 .wv-kicker-note { font-size: var(--text-xs); color: var(--ink-3); margin-top: 1rem; }
.webv2 .wv-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; font-size: var(--text-sm); font-weight: 700; color: var(--terra-deep); position: relative; }
.webv2 .wv-link .arr { transition: transform var(--duration-fast) var(--ease-out); }
.webv2 .wv-link:hover .arr { transform: translateX(4px); }
.webv2 .wv-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--terra); transform: scaleX(0); transform-origin: right center; transition: transform 0.5s var(--ease-exp); }
.webv2 .wv-link:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ボタン(スコープ内上書き: 精密なホバー・フォーカス) */
.webv2 .btn { transition: transform 0.32s var(--ease-exp), box-shadow 0.32s var(--ease-exp), background 0.32s ease, border-color 0.32s ease; }
.webv2 .btn-primary { box-shadow: 0 10px 26px -12px rgba(55, 94, 111, 0.5); }
.webv2 .btn-primary:hover { box-shadow: 0 18px 38px -14px rgba(55, 94, 111, 0.55); }
.webv2 .btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

/* ============================================================
   ヒーロー
   ============================================================ */
.webv2 .wv-hero { padding-top: clamp(2rem, 1rem + 3vw, 4.5rem); padding-bottom: clamp(3rem, 2rem + 5vw, 7rem); overflow: hidden; position: relative; }
.webv2 .wv-hero::before { content: ""; position: absolute; top: -18%; right: -14%; width: 54vw; height: 54vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: radial-gradient(circle at 42% 40%, var(--rose-bg), transparent 68%); pointer-events: none; animation: wv-drift 34s ease-in-out infinite alternate; }
.webv2 .wv-hero::after { content: ""; position: absolute; bottom: -24%; left: -10%; width: 42vw; height: 42vw; max-width: 560px; max-height: 560px; border-radius: 50%; background: radial-gradient(circle at 55% 45%, var(--sage-bg), transparent 66%); pointer-events: none; animation: wv-drift 34s ease-in-out -17s infinite alternate-reverse; }
@keyframes wv-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-3%, 3.5%, 0); } }
.webv2 .wv-hero-in { position: relative; z-index: 1; }
.webv2 .wv-vlabel { position: absolute; top: clamp(2rem, 8vw, 5rem); left: clamp(0.2rem, 1vw, 1rem); writing-mode: vertical-rl; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.5em; color: var(--ink-3); opacity: 0.8; z-index: 1; }
.webv2.wv-anim .wv-vlabel { animation: wv-vlab 1.7s var(--ease-exp) 0.7s both; }
@keyframes wv-vlab { from { clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(0 0 -6% 0); opacity: 0.8; } }
.webv2 .wv-hero-ey { color: var(--terra); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; }
.webv2 .wv-hero-ey::before { content: "✦"; margin-right: 0.5rem; }
/* 行マスク1行に収まる寸法(11文字×1em+字送りが列幅を超えない) — 中折れ厳禁
   〜960px=1カラム(4vw勾配) / 961px〜=2カラム(列幅に合わせ勾配を緩める) */
.webv2 .wv-hero-h1 { font-family: var(--font-display); font-weight: 700; line-height: 1.32; letter-spacing: 0.015em; color: var(--ink); font-size: clamp(1.9rem, 0.85rem + 4vw, 3.35rem); margin-top: 1.3rem; font-feature-settings: "palt" 1; }
@media (min-width: 961px) { .webv2 .wv-hero-h1 { font-size: clamp(2.5rem, 1.05rem + 2.55vw, 3.35rem); } }
.webv2 .wv-hero-h1 em { font-style: normal; color: var(--terra); }
/* H1 行マスク: 既定は表示。wv-anim時のみ隠す(JS無しで見える=LCP安全) */
.webv2 .wv-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.webv2 .wv-line > span { display: block; transition: transform 1.1s var(--ease-exp); }
.webv2.wv-anim .wv-hero-h1:not(.is-in) .wv-line > span { transform: translateY(112%); }
.webv2 .wv-hero-h1 .wv-line:nth-child(1) > span { transition-delay: 0.16s; }
.webv2 .wv-hero-h1 .wv-line:nth-child(2) > span { transition-delay: 0.28s; }
.webv2 .wv-hero-lead { margin-top: 1.6rem; max-width: 34em; color: var(--ink-2); font-size: var(--text-md); line-height: 1.85; }
.webv2 .wv-hero-lead strong { color: var(--terra); font-weight: 700; }
.webv2 .wv-hero-ctas { margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.webv2 .wv-hero-note { font-size: var(--text-xs); color: var(--ink-2); margin-top: 1rem; letter-spacing: 0.02em; }
/* 入場の振り付け(遅延タイムライン) */
.webv2 .wv-hero-x .wv-hero-ey   { --d: 60ms; }
.webv2 .wv-hero-x .wv-hero-lead { --d: 480ms; }
.webv2 .wv-hero-x .wv-hero-ctas { --d: 600ms; }
.webv2 .wv-hero-x .wv-hero-note { --d: 720ms; }
.webv2 .wv-hero-x .wv-hero-figs  { --dbase: 820ms; --dgap: 95ms; }
.webv2 .wv-hero-x .wv-hero-stage { --dbase: 380ms; --dgap: 180ms; --rvdur: 1.3s; }
/* ヒーロー数字ミニバンド */
.webv2 .wv-hero-figs { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; border-top: 2px dotted var(--line); padding-top: 1.4rem; }
.webv2 .wv-fig b { font-family: var(--font-num); font-weight: 700; font-size: var(--text-lg); color: var(--terra); display: block; line-height: 1; }
.webv2 .wv-fig span { font-size: var(--text-xs); color: var(--ink-2); letter-spacing: 0.06em; }
/* ヒーロー 2カラム + 浮遊する実HPプレビュー */
.webv2 .wv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.webv2 .wv-hero-stage { position: relative; min-height: clamp(300px, 32vw, 460px); }
.webv2 .wv-hero-stage::before { content: ""; position: absolute; inset: 6% -6% -8% 8%; background: radial-gradient(60% 60% at 60% 40%, var(--blue), transparent 72%); opacity: 0.35; border-radius: 50%; filter: blur(6px); }
/* 旧構造互換(.wv-float 直下に画像を持つページ用) */
.webv2 .wv-float { position: absolute; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-float); border: 1px solid var(--line); background: var(--cream-2); animation: wv-float 7s ease-in-out infinite; }
.webv2 .wv-fchrome { display: flex; gap: 0.3rem; padding: 0.45rem 0.6rem; background: var(--cream-dim); border-bottom: 1px solid var(--line-soft); }
.webv2 .wv-fchrome i { width: 6px; height: 6px; border-radius: 50%; }
.webv2 .wv-fchrome i:nth-child(1) { background: var(--rose); }
.webv2 .wv-fchrome i:nth-child(2) { background: var(--sage); }
.webv2 .wv-fchrome i:nth-child(3) { background: var(--blue); }
.webv2 .wv-float img { width: 100%; height: auto; display: block; }
.webv2 .wv-float.f1 { width: 68%; top: 0; right: 0; z-index: 3; }
.webv2 .wv-float.f2 { width: 55%; bottom: 0; left: 0; z-index: 2; animation-delay: -2.3s; }
.webv2 .wv-float.f3 { width: 44%; top: 42%; left: 27%; z-index: 1; opacity: 0.97; animation-delay: -4.6s; }
@keyframes wv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* 新構造(wv-hero-x): 外側=視差レイヤー / 内側=カード+浮遊。三層が独立して動く */
.webv2 .wv-hero-x .wv-float { border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; animation: none; will-change: transform; }
.webv2 .wv-hero-x .wv-float-in { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-float); border: 1px solid var(--line); background: var(--cream-2); animation: wv-bob 11s ease-in-out infinite; }
.webv2 .wv-hero-x .f1 .wv-float-in { animation-delay: -1.4s; }
.webv2 .wv-hero-x .f2 .wv-float-in { animation-delay: -4.9s; animation-duration: 12.5s; }
.webv2 .wv-hero-x .f3 .wv-float-in { animation-delay: -8.2s; animation-duration: 9.5s; }
@keyframes wv-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(0.35deg); } }
.webv2 .wv-hero-x .wv-float-in img { width: 100%; height: auto; display: block; }
/* 入場: 深い位置からゆっくり浮上 */
.webv2.wv-anim .wv-hero-x .wv-hero-stage:not(.is-in) > .wv-float { opacity: 0; transform: translateY(58px) scale(0.94); }

/* ============================================================
   利益シミュレーション(ダークパネル)
   ============================================================ */
.webv2 .wv-sim { background: var(--dark); color: var(--dark-text); border-radius: clamp(20px, 3vw, 36px); margin-inline: clamp(0.5rem, 1.5vw, 1.25rem); overflow: hidden; }
.webv2 .wv-sim .wv-ey { color: var(--blue); }
.webv2 .wv-sim .wv-ey::before { background: var(--blue); }
.webv2 .wv-sim .wv-h { color: var(--dark-text); }
.webv2 .wv-sim .wv-h em { color: var(--blue); }
/* ダークパネル共通: 粉青のオーブがゆっくり漂う */
.webv2 .wv-sim::before, .webv2 .wv-price::before, .webv2 .wv-cta::before {
  content: ""; position: absolute; width: 46rem; height: 46rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 208, 223, 0.14), transparent 64%);
  top: -16rem; right: -12rem; pointer-events: none;
  animation: wv-orb 30s ease-in-out infinite alternate;
}
.webv2 .wv-cta::before { right: auto; left: -14rem; top: auto; bottom: -20rem; }
@keyframes wv-orb { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-5rem, 4rem, 0); } }
.webv2 .wv-sim .wrap, .webv2 .wv-price .wrap, .webv2 .wv-cta .wrap { position: relative; z-index: 1; }
.webv2 .wv-sim-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: 2.5rem; }
.webv2 .wv-sim-controls { display: grid; gap: 1.6rem; }
.webv2 .wv-ctrl label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); color: var(--dark-dim); margin-bottom: 0.6rem; }
.webv2 .wv-ctrl label b { font-family: var(--font-num); font-weight: 700; font-size: var(--text-md); color: var(--dark-text); }
.webv2 .wv-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: var(--dark-line); outline: none; }
.webv2 .wv-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); cursor: pointer; border: 3px solid var(--dark); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.webv2 .wv-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); cursor: pointer; border: 3px solid var(--dark); }
.webv2 .wv-sim-out { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); }
.webv2 .wv-sim-out-label { font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--dark-dim); }
.webv2 .wv-sim-amount { font-family: var(--font-num); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4rem); color: var(--blue); line-height: 1.05; margin: 0.5rem 0; letter-spacing: -0.01em; display: flex; }
.webv2 .wv-sim-amount .yen { font-size: 0.5em; margin-right: 0.1em; color: var(--dark-text); }
.webv2 .wv-sim-amount .to { font-size: 0.5em; color: var(--dark-dim); margin: 0 0.15em; }
.webv2 .wv-sim-amount { transition: opacity 0.8s ease 0.2s, transform 1s var(--ease-exp) 0.2s; }
.webv2.wv-anim .wv-sim .rvx:not(.is-in) .wv-sim-amount { opacity: 0; transform: translateY(18px) scale(0.97); }
.webv2 .wv-sim-sub { font-size: var(--text-sm); color: var(--dark-dim); line-height: 1.7; }
.webv2 .wv-sim-note { font-size: var(--text-xs); color: var(--dark-dim); opacity: 0.85; margin-top: 1.2rem; line-height: 1.6; }
.webv2 .wv-sim-levers { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.webv2 .wv-sim-levers span { font-size: 0.72rem; color: var(--dark-text); background: rgba(238, 243, 243, 0.1); border-radius: 99px; padding: 0.3em 0.9em; transition: opacity 0.6s ease calc(0.35s + var(--li, 0) * 100ms), transform 0.7s var(--ease-exp) calc(0.35s + var(--li, 0) * 100ms); }
.webv2 .wv-sim-levers span:nth-child(2) { --li: 1; }
.webv2 .wv-sim-levers span:nth-child(3) { --li: 2; }
.webv2.wv-anim .wv-sim .rvx:not(.is-in) .wv-sim-levers span { opacity: 0; transform: translateY(12px); }

/* ============================================================
   3本柱(儲けの導線) — 罫線が左から走る
   ============================================================ */
.webv2 .wv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: 2.5rem; }
.webv2 .wv-pillar { position: relative; padding-top: 1.6rem; }
.webv2 .wv-pillar::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--terra); transform-origin: left center; transition: transform 1.25s var(--ease-exp) calc(var(--d, 0s) + 130ms); }
.webv2 .wv-pillar:nth-child(2)::before { background: var(--rose-deep); }
.webv2 .wv-pillar:nth-child(3)::before { background: var(--sage-deep); }
.webv2 .wv-pillar:nth-child(5)::before { background: var(--rose-deep); }
.webv2 .wv-pillar:nth-child(6)::before { background: var(--sage-deep); }
.webv2.wv-anim .rvx-group:not(.is-in) > .wv-pillar::before { transform: scaleX(0); }
.webv2 .wv-pillar-no { font-family: var(--font-num); font-weight: 700; font-size: var(--text-sm); color: var(--terra-deep); }
.webv2 .wv-pillar-t { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 0.4rem 0 0.6rem; color: var(--ink); }
.webv2 .wv-pillar-b { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.8; }
.webv2 .wv-pillar-b strong { color: var(--ink); }

/* ============================================================
   速さ(実測) — このセクションだけ「速い」動き
   ============================================================ */
.webv2 .wv-speed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.webv2 .wv-speed-col { --dgap: 70ms; --rvdur: 0.5s; }
.webv2 .wv-speed-stat { display: flex; align-items: baseline; gap: 0.6rem; }
.webv2.wv-anim .wv-speed-col:not(.is-in) > .wv-speed-stat { transform: translateY(14px) scale(0.97); }
.webv2 .wv-speed-num { font-family: var(--font-num); font-weight: 700; font-size: clamp(3.5rem, 2rem + 7vw, 6.5rem); color: var(--terra); line-height: 0.9; letter-spacing: -0.02em; }
.webv2 .wv-speed-unit { font-family: var(--font-num); font-weight: 700; font-size: var(--text-xl); color: var(--ink-2); }
/* 0.1秒で走り切るライン(体感装置)。表示は0.12s=ほぼ実測値 */
.webv2 .wv-speed-line { height: 2px; margin-top: 1.1rem; border-radius: 2px; background: linear-gradient(90deg, var(--terra), var(--blue) 82%, transparent); transform-origin: left center; }
.webv2 .rvx-group > .wv-speed-line { transition: transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1) 0.55s; }
.webv2.wv-anim .wv-speed-col:not(.is-in) > .wv-speed-line { opacity: 1; transform: scaleX(0); }
.webv2 .wv-speed-cap { font-size: var(--text-sm); color: var(--ink-2); margin-top: 1rem; line-height: 1.8; }
.webv2 .wv-speed-rows { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.webv2 .wv-speed-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.webv2 .wv-speed-row b { font-family: var(--font-num); color: var(--ink); }
.webv2 .wv-speed-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-xs); font-weight: 700; color: var(--sage-deep); background: var(--sage-bg); border-radius: 99px; padding: 0.3em 0.9em; }
.webv2 .wv-speed-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-deep); animation: wv-pulse 2.8s ease-in-out infinite; }
@keyframes wv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.78); } }

/* ============================================================
   予約が自社に帰る — ノード→矢印の順に流れて見える
   ============================================================ */
.webv2 .wv-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 2.5rem; position: relative; --dgap: 170ms; }
.webv2 .wv-flow-node { text-align: center; padding: 1.6rem 1rem; position: relative; }
.webv2 .wv-flow-node::after { content: "→"; position: absolute; right: -0.4em; top: 50%; transform: translateY(-50%); color: var(--terra); font-family: var(--font-num); font-weight: 700; font-size: 1.4rem; transition: opacity 0.55s var(--ease-exp) calc(var(--d, 0s) + 0.3s), transform 0.55s var(--ease-exp) calc(var(--d, 0s) + 0.3s); }
.webv2.wv-anim .rvx-group:not(.is-in) > .wv-flow-node::after { opacity: 0; transform: translate(-10px, -50%); }
.webv2 .wv-flow-node:last-child::after { display: none; }
.webv2 .wv-flow-ic { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--terra-deep); }
.webv2 .wv-flow-t { font-weight: 700; font-size: var(--text-sm); margin: 0.5rem 0 0.3rem; color: var(--ink); }
.webv2 .wv-flow-b { font-size: var(--text-xs); color: var(--ink-2); line-height: 1.6; }

/* ============================================================
   動く制作実績カルーセル — 質感と物理(スクロール連動はJS)
   ============================================================ */
.webv2 .wv-marquee { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1.1rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); --dgap: 160ms; --rvdur: 1.15s; }
.webv2 .wv-mrow { overflow: hidden; }
.webv2 .wv-track { display: flex; width: max-content; will-change: transform; }
.webv2 .wv-mL .wv-track { animation: wv-scroll-l 68s linear infinite; }
.webv2 .wv-mR .wv-track { animation: wv-scroll-r 82s linear infinite; }
.webv2 .wv-marquee:hover .wv-track { animation-play-state: paused; }
@keyframes wv-scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wv-scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.webv2 .wv-card { flex: none; width: clamp(232px, 26vw, 352px); margin-right: 1.25rem; background: var(--cream-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); transition: translate 0.5s var(--ease-exp), box-shadow 0.5s var(--ease-exp), border-color 0.35s ease; }
.webv2 .wv-card:hover { translate: 0 -5px; box-shadow: 0 6px 14px rgba(47, 58, 61, 0.07), 0 26px 56px -20px rgba(71, 121, 141, 0.36); border-color: rgba(71, 121, 141, 0.35); }
.webv2 .wv-card-chrome { display: flex; align-items: center; gap: 0.34rem; padding: 0.5rem 0.75rem; background: var(--cream-dim); border-bottom: 1px solid var(--line-soft); }
.webv2 .wv-card-chrome i { width: 7px; height: 7px; border-radius: 50%; }
.webv2 .wv-card-chrome i:nth-child(1) { background: var(--rose); }
.webv2 .wv-card-chrome i:nth-child(2) { background: var(--sage); }
.webv2 .wv-card-chrome i:nth-child(3) { background: var(--blue); }
.webv2 .wv-card-url { margin-left: 0.45rem; font-family: var(--font-num); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webv2 .wv-card-shot { aspect-ratio: 16/9; overflow: hidden; background: var(--ink); }
.webv2 .wv-card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 5s var(--ease-exp); }
.webv2 .wv-card:hover .wv-card-shot img { transform: scale(1.05); }

/* ============================================================
   bento 価値タイル
   ============================================================ */
.webv2 .wv-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.7rem, 1.5vw, 1.1rem); margin-top: 2.5rem; --dgap: 65ms; }
.webv2 .wv-tile { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.3rem, 2vw, 1.8rem); display: flex; flex-direction: column; gap: 0.4rem; }
.webv2 .wv-tile:hover { translate: 0 -4px; box-shadow: var(--shadow-card); border-color: rgba(71, 121, 141, 0.4); }
.webv2 .wv-tile.big { grid-column: span 2; grid-row: span 2; justify-content: flex-end; background: linear-gradient(160deg, var(--rose-bg), var(--cream-2)); }
.webv2 .wv-tile.wide { grid-column: span 2; }
.webv2 .wv-tile-k { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--terra-deep); }
.webv2 .wv-tile-v { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--ink); line-height: 1.3; }
.webv2 .wv-tile.big .wv-tile-v { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.webv2 .wv-tile-b { font-size: var(--text-xs); color: var(--ink-2); line-height: 1.7; }
.webv2 .wv-tile-soon { align-self: flex-start; font-size: 0.62rem; font-weight: 700; color: var(--terra-deep); background: var(--rose-bg); border-radius: 99px; padding: 0.15em 0.7em; }

/* ============================================================
   料金(ダークパネル) — 行が順に灯る
   ============================================================ */
.webv2 .wv-price { background: var(--dark); color: var(--dark-text); border-radius: clamp(20px, 3vw, 36px); margin-inline: clamp(0.5rem, 1.5vw, 1.25rem); overflow: hidden; }
.webv2 .wv-price .wv-ey { color: var(--blue); } .webv2 .wv-price .wv-ey::before { background: var(--blue); }
.webv2 .wv-price .wv-h { color: var(--dark-text); } .webv2 .wv-price .wv-h em { color: var(--blue); }
.webv2 .wv-tablewrap tr { transition: opacity 0.75s ease calc(var(--ti, 0) * 70ms + 100ms); }
.webv2.wv-anim .wv-tablewrap:not(.is-in) tr { opacity: 0; }
.webv2 .wv-tablewrap thead tr { --ti: 0; }
.webv2 .wv-tablewrap tbody tr:nth-child(1) { --ti: 1; }
.webv2 .wv-tablewrap tbody tr:nth-child(2) { --ti: 2; }
.webv2 .wv-tablewrap tbody tr:nth-child(3) { --ti: 3; }
.webv2 .wv-tablewrap tbody tr:nth-child(4) { --ti: 4; }
.webv2 .wv-tablewrap tbody tr:nth-child(5) { --ti: 5; }
.webv2 .wv-tablewrap tbody tr:nth-child(6) { --ti: 6; }
.webv2 .wv-tablewrap tbody tr:nth-child(7) { --ti: 7; }
.webv2 .wv-price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: 2.5rem; }
.webv2 .wv-pcol { border: 1px solid var(--dark-line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.2rem); background: var(--dark-2); }
.webv2 .wv-pcol.us { border: 2px solid var(--blue); position: relative; }
.webv2 .wv-pcol.us::before { content: "サロウェブ"; position: absolute; top: -0.9em; left: 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; background: var(--blue); color: var(--dark); padding: 0.1em 1em; border-radius: 99px; }
.webv2 .wv-pcol-t { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--dark-dim); margin-bottom: 1rem; }
.webv2 .wv-pcol-big { font-family: var(--font-num); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.5vw, 3.2rem); color: var(--dark-text); line-height: 1; }
.webv2 .wv-pcol.us .wv-pcol-big { color: var(--blue); }
.webv2 .wv-pcol-sub { font-size: var(--text-xs); color: var(--dark-dim); margin-top: 0.5rem; line-height: 1.6; }
.webv2 .wv-pcol-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.2rem; }
.webv2 .wv-pcol-list span { font-size: 0.7rem; color: var(--dark-text); background: rgba(238, 243, 243, 0.1); border-radius: 99px; padding: 0.28em 0.85em; }
.webv2 .wv-price-note { font-size: var(--text-xs); color: var(--dark-dim); margin-top: 1.6rem; line-height: 1.6; }

/* ---- 信頼(顔+ストーリー+拠点) 旧互換 ---- */
.webv2 .wv-trust { background: var(--rose-bg); }
.webv2 .wv-trust-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.webv2 .wv-portrait { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-float); background: var(--cream-2); border: 1px solid var(--line); aspect-ratio: 3/4; }
.webv2 .wv-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: saturate(0.9) contrast(1.02); mix-blend-mode: multiply; }
.webv2 .wv-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(71, 121, 141, 0.14)); pointer-events: none; }
.webv2 .wv-trust-role { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; color: var(--terra-deep); }
.webv2 .wv-trust-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 0.4rem 0 0.2rem; color: var(--ink); }
.webv2 .wv-trust-name span { font-size: 0.6em; color: var(--ink-3); font-family: var(--font-num); margin-left: 0.5em; letter-spacing: 0.1em; }
.webv2 .wv-trust-msg { font-size: var(--text-base); color: var(--ink-2); line-height: 1.95; margin-top: 1rem; max-width: 34em; }
.webv2 .wv-trust-msg strong { color: var(--ink); }
.webv2 .wv-trust-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.webv2 .wv-trust-meta span { font-size: var(--text-xs); color: var(--ink-2); background: var(--cream-2); border: 1px solid var(--line); border-radius: 99px; padding: 0.35em 1em; }

/* ============================================================
   FAQ — 一問ずつ静かに + 開閉に呼吸
   ============================================================ */
.webv2 .wv-faqwrap .faq-item { transition: opacity 0.8s var(--ease-exp) calc(var(--fi, 0) * 70ms), transform 0.8s var(--ease-exp) calc(var(--fi, 0) * 70ms); }
.webv2.wv-anim .wv-faqwrap:not(.is-in) .faq-item { opacity: 0; transform: translateY(18px); }
.webv2 .wv-faqwrap .faq-item:nth-child(2) { --fi: 1; }
.webv2 .wv-faqwrap .faq-item:nth-child(3) { --fi: 2; }
.webv2 .wv-faqwrap .faq-item:nth-child(4) { --fi: 3; }
.webv2 .wv-faqwrap .faq-item:nth-child(5) { --fi: 4; }
.webv2 .wv-faqwrap .faq-item:nth-child(6) { --fi: 5; }
.webv2 .wv-faqwrap .faq-item:nth-child(7) { --fi: 6; }
.webv2 .wv-faqwrap .faq-item:nth-child(8) { --fi: 7; }
.webv2 .wv-faqwrap .faq-item:nth-child(9) { --fi: 8; }
.webv2 .faq-item[open] .faq-answer { animation: wv-faq-in 0.45s var(--ease-exp); }
@keyframes wv-faq-in { from { opacity: 0; transform: translateY(-5px); } }
/* 旧 .wv-faq 互換 */
.webv2 .wv-faq { max-width: 52rem; }
.webv2 .wv-faq details { border-bottom: 1px solid var(--line); }
.webv2 .wv-faq summary { list-style: none; cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0.2rem; font-weight: 700; font-size: var(--text-md); color: var(--ink); position: relative; }
.webv2 .wv-faq summary::-webkit-details-marker { display: none; }
.webv2 .wv-faq summary::after { content: "+"; position: absolute; right: 0.4rem; top: 1.2rem; font-family: var(--font-num); font-weight: 400; font-size: 1.4rem; color: var(--terra); transition: transform var(--duration-fast); }
.webv2 .wv-faq details[open] summary::after { content: "−"; }
.webv2 .wv-faq .wv-faq-a { padding: 0 2.5rem 1.4rem 0.2rem; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.9; }

/* ============================================================
   最終CTA(cta-bandクラス併用でSSG自動CTA抑制・寒色ダーク)
   ============================================================ */
.webv2 .wv-cta { text-align: center; background: var(--dark); color: var(--dark-text); overflow: hidden; }
.webv2 .wv-cta .wv-h { max-width: 22em; margin-inline: auto; color: var(--dark-text); }
.webv2 .wv-cta .wv-h em { color: var(--blue); }
.webv2 .wv-cta-btns { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.webv2 .wv-cta-sub { font-size: var(--text-xs); color: var(--dark-dim); margin-top: 1rem; }
.webv2 .wv-cta .btn-ghost { border-color: var(--dark-line); color: var(--dark-text); background: transparent; }
.webv2 .wv-cta .btn-ghost:hover { border-color: var(--dark-dim); }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 960px) {
  .webv2 .wv-sim-grid, .webv2 .wv-speed-grid, .webv2 .wv-price-cols, .webv2 .wv-trust-grid, .webv2 .wv-hero-grid { grid-template-columns: 1fr; }
  .webv2 .wv-hero-stage { min-height: 280px; max-width: 440px; margin-top: 1.5rem; margin-inline: auto; }
  .webv2 .wv-pillars { grid-template-columns: 1fr; gap: 1.4rem; }
  .webv2 .wv-portrait { max-width: 320px; }
  .webv2 .wv-vlabel { display: none; }
  .webv2 .wv-bento { grid-template-columns: repeat(2, 1fr); }
  .webv2 .wv-tile.big { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 600px) {
  .webv2 .wv-flow { grid-template-columns: 1fr; }
  .webv2 .wv-flow-node::after { content: "↓"; right: 50%; top: auto; bottom: -0.6em; transform: translateY(0) translateX(50%); }
  .webv2.wv-anim .rvx-group:not(.is-in) > .wv-flow-node::after { transform: translateY(-8px) translateX(50%); }
  .webv2 .wv-bento { grid-template-columns: 1fr; }
  .webv2 .wv-tile.big, .webv2 .wv-tile.wide { grid-column: auto; }
  .webv2 .wv-hero-figs { gap: 1rem 1.6rem; }
}

/* ============================================================
   prefers-reduced-motion: 全モーション停止・全要素表示で成立
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .webv2 *, .webv2 *::before, .webv2 *::after { animation: none !important; transition: none !important; }
  /* wv-anim 起因の隠し状態をすべて解除(途中でreduceに切り替えた場合も成立) */
  .webv2 .rvx, .webv2 .rvx-group > *, .webv2 .wv-float,
  .webv2 .wv-tablewrap tr, .webv2 .wv-faqwrap .faq-item,
  .webv2 .wv-sim-amount, .webv2 .wv-sim-levers span,
  .webv2 .wv-flow-node::after { opacity: 1 !important; }
  .webv2 .rvx, .webv2 .rvx-group > *, .webv2 .wv-float,
  .webv2 .wv-tablewrap tr, .webv2 .wv-faqwrap .faq-item,
  .webv2 .wv-sim-amount, .webv2 .wv-sim-levers span,
  .webv2 .wv-line > span, .webv2 .wv-speed-line,
  .webv2 .wv-ey::before, .webv2 .wv-pillar::before { transform: none !important; clip-path: none !important; }
  .webv2 .wv-mR .wv-track { transform: translateX(-25%); }
  .webv2::before { display: none; }
}

/* ==== 仕上げ第3波 (2026-07-07 Fable) — トップ(.wv-top)限定のリッチ化。strength.html等の旧構造には影響させない ==== */
.wv-top .wv-pillar {
  background: linear-gradient(180deg, #fff, #fbfdfd);
  border: 0; border-radius: 16px;
  padding: 1.8rem 1.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(31, 51, 60, .07), 0 14px 34px -26px rgba(31, 51, 60, .35);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}
.wv-top .wv-pillar:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(71, 121, 141, .26), 0 22px 44px -24px rgba(31, 51, 60, .35);
}
.wv-top .wv-pillar-no {
  font-variant-numeric: tabular-nums;
  color: rgba(71, 121, 141, .5);
  letter-spacing: .16em;
}
.wv-top .wv-tile {
  background: linear-gradient(180deg, #fff, #fbfdfd);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(31, 51, 60, .07), 0 12px 30px -26px rgba(31, 51, 60, .32);
}
.wv-top .wv-fig { position: relative; }
.wv-top .wv-fig + .wv-fig::before {
  content: ""; position: absolute; left: -1.1rem; top: 15%; bottom: 15%;
  width: 1px; background: rgba(31, 51, 60, .14);
}
.wv-top .wv-fig b { font-variant-numeric: tabular-nums; }
/* 比較表: 素のtable→設計された面 */
.wv-top .wv-price table { box-shadow: 0 0 0 1px rgba(31, 51, 60, .08), 0 18px 40px -30px rgba(31, 51, 60, .4); border-radius: 14px; }
.wv-top .wv-price tbody tr { transition: background .25s; }
.wv-top .wv-price tbody tr:hover { background: rgba(176, 208, 223, .1); }
@media (prefers-reduced-motion: reduce) {
  .wv-top .wv-pillar, .wv-top .wv-pillar:hover { transform: none; }
}

/* ================================================================
   WV3 (2026-07-07 Fable) — 枠の解体。FVを全画面ダークの編集的シーンへ。
   ワイヤーフレームの形状は保存しない。コピーとDOM部材のみ流用。
   ================================================================ */
/* ダークFVの没入を切らない: トップのみ視覚パンくず非表示（JSON-LDは維持） */
main:has(.wv-top) > .wrap:first-child .breadcrumb { display: none; }
main:has(.wv-top) { padding-top: 72px !important; }

.wv-top .wv-hero {
  min-height: 94vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: calc(72px + 3.5rem) 0 0;
  background:
    radial-gradient(1200px 700px at 78% 30%, rgba(71, 121, 141, .55), transparent 62%),
    linear-gradient(rgba(238, 243, 243, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 243, 243, .035) 1px, transparent 1px),
    var(--dark, #1f333c);
  background-size: auto, 88px 88px, 88px 88px, auto;
  color: #eef3f3;
}
.wv-top .wv-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wv-top .wv-vlabel {
  color: rgba(176, 208, 223, .5);
  letter-spacing: .44em;
  z-index: 4;
}
.wv-top .wv-hero-in { position: relative; z-index: 2; width: 100%; }
.wv-top .wv-hero-grid { display: block; position: relative; }
.wv-top .wv-hero-copy { position: relative; z-index: 3; max-width: 700px; }
.wv-top .wv-hero-ey {
  color: rgba(176, 208, 223, .85);
  font-size: .72rem; letter-spacing: .26em; font-weight: 700;
  border-top: 1px solid rgba(238, 243, 243, .2);
  padding-top: 1.1rem;
}
.wv-top .wv-hero-h1 {
  font-size: clamp(2.05rem, .8rem + 3.7vw, 4.3rem);
  line-height: 1.18; letter-spacing: .03em;
  color: #f2f6f7;
  margin: 1.5rem 0 1.7rem;
  word-break: keep-all;
  font-weight: 800;
  font-feature-settings: "palt";
}
.wv-top .wv-h { font-feature-settings: "palt"; letter-spacing: .025em; }
.wv-top .wv-hero-h1 em { color: var(--powder, #b0d0df); font-style: normal; position: relative; display: inline-block; }
.wv-top .wv-hero-h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em;
  height: 1px; background: rgba(176, 208, 223, .7);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1) 1.2s;
}
.wv-top .wv-hero-h1.is-in em::after, .wv-top .is-in .wv-hero-h1 em::after { transform: scaleX(1); }
.wv-top .wv-hero-lead { color: rgba(238, 243, 243, .74); max-width: 33em; }
.wv-top .wv-hero-note { color: rgba(238, 243, 243, .45); }
.wv-top .wv-hero .btn-primary { background: #f2f6f7; color: var(--dark, #1f333c); border-color: transparent; }
.wv-top .wv-hero .btn-primary:hover { background: var(--powder, #b0d0df); }
.wv-top .wv-hero .btn-ghost { border-color: rgba(238, 243, 243, .35); color: #eef3f3; }

/* 実績画面の奥行きスタック（右奥へ連なる） */
.wv-top .wv-hero-stage {
  position: absolute; right: -4%; top: 42%;
  transform: translateY(-50%);
  width: 58%; max-width: 900px; aspect-ratio: 16 / 10;
  z-index: 1; pointer-events: none;
}
.wv-top .wv-hero-stage::before {
  content: ""; position: absolute; inset: -12%;
  background: radial-gradient(closest-side, rgba(176, 208, 223, .22), transparent 70%);
  filter: blur(6px);
}
.wv-top .wv-float { position: absolute; }
.wv-top .wv-float img { width: 100%; height: auto; display: block; }
.wv-top .wv-float-in {
  border-radius: 10px; overflow: hidden; background: #0f1c22;
  box-shadow: 0 70px 130px -50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(238, 243, 243, .1);
}
.wv-top .f1 { width: 62%; right: 0; top: 4%; z-index: 3; }
.wv-top .f1 .wv-float-in { transform: rotateY(-8deg) rotateX(2deg); }
.wv-top .f2 { width: 44%; left: 0; top: 34%; z-index: 2; opacity: .8; }
.wv-top .f2 .wv-float-in { transform: rotateY(-10deg) scale(.96); }
.wv-top .f3 { width: 38%; right: 6%; top: 64%; z-index: 1; opacity: .55; }
.wv-top .f3 .wv-float-in { transform: rotateY(-12deg) scale(.9); }

/* 数字帯: ヘアラインのフルグリッド */
.wv-top .wv-hero-figs {
  margin-top: 5rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid rgba(238, 243, 243, .16);
}
.wv-top .wv-fig { padding: 1.5rem 1.2rem 2.2rem; }
.wv-top .wv-fig + .wv-fig::before { left: 0; top: 18%; bottom: 18%; background: rgba(238, 243, 243, .14); }
.wv-top .wv-fig b {
  display: block;
  font-family: var(--font-display, serif);
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  color: #f2f6f7; line-height: 1.1; margin-bottom: .4rem;
}
.wv-top .wv-fig span { color: rgba(238, 243, 243, .55); font-size: .72rem; letter-spacing: .1em; }

@media (max-width: 960px) {
  .wv-top .wv-hero { min-height: 0; padding-bottom: 0; }
  .wv-top .wv-hero-stage {
    position: relative; right: auto; top: auto; transform: none;
    width: 100%; max-width: none; aspect-ratio: 16 / 11;
    margin-top: 2.8rem;
  }
  .wv-top .f1 { width: 74%; right: 0; top: 0; }
  .wv-top .f2 { width: 56%; right: auto; left: 0; top: 36%; }
  .wv-top .f3 { display: none; }
  .wv-top .wv-hero-figs { grid-template-columns: repeat(2, 1fr); margin-top: 2.6rem; }
  .wv-top .wv-fig { padding: 1.1rem 1rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wv-top .wv-hero-h1 em::after { transition: none; transform: scaleX(1); }
}

/* ================================================================
   WV4 (2026-07-07 Fable) — FV=制作実績が流れる壁。一番目を引く資産を最初の画面へ。
   回収ラインはパネルをやめ、静かなエディトリアルの一文に（ライト地）。
   ================================================================ */
.wv-top .wv-hero .wv-wall {
  position: absolute; inset: -10% -6%;
  display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
  transform: rotate(-4deg);
  z-index: 0;
}
.wv-top .wv-wall-row {
  display: flex; gap: 1.4rem; width: max-content;
  animation: wvDrift 75s linear infinite;
  will-change: transform;
}
.wv-top .wv-wall-rev { animation-direction: reverse; animation-duration: 95s; }
.wv-top .wv-wcard {
  margin: 0; width: 380px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(238, 243, 243, .07);
}
.wv-top .wv-wcard img { width: 100%; height: auto; display: block; filter: saturate(.55) brightness(.62) contrast(1.05); }
@keyframes wvDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 文字を立たせるスクリム（壁の上・コピーの下）
   ⚠ 旧webv2のオーブ(::before/::after=54vw円)を完全打ち消しすること */
.wv-top .wv-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  width: auto; height: auto; max-width: none; max-height: none;
  border-radius: 0; animation: none; filter: none;
  background:
    linear-gradient(90deg, rgba(31, 51, 60, .97) 0%, rgba(31, 51, 60, .9) 34%, rgba(31, 51, 60, .5) 68%, rgba(31, 51, 60, .66) 100%),
    linear-gradient(180deg, rgba(31, 51, 60, .5), transparent 28%, transparent 60%, rgba(31, 51, 60, .85));
}
.wv-top .wv-hero::after {
  inset: 0; width: auto; height: auto; max-width: none; max-height: none;
  border-radius: 0; animation: none;
}
.wv-top .wv-hero .btn-ghost { background: rgba(31, 51, 60, .38); backdrop-filter: blur(4px); }
.wv-top .wv-vlabel { position: relative; }

@media (max-width: 960px) {
  .wv-top .wv-wcard { width: 240px; }
  .wv-top .wv-hero::before {
    background:
      linear-gradient(90deg, rgba(31, 51, 60, .93), rgba(31, 51, 60, .88)),
      linear-gradient(180deg, rgba(31, 51, 60, .4), transparent 30%, transparent 60%, rgba(31, 51, 60, .85));
  }
}
@media (prefers-reduced-motion: reduce) {
  .wv-top .wv-wall-row { animation: none; }
}

/* --- 回収ライン: ライト地のエディトリアル --- */
.wv-top .wv-sim { background: var(--cream, #f5f7f6); }
.wv-top .wv-sim .wv-ey { color: var(--terra, #47798d); }
.wv-top .wv-sim .wv-h { color: var(--ink, #1f333c); }
.wv-top .wv-sim .wv-h em { color: var(--terra, #47798d); font-style: normal; }
.wv-top .wv-payline-lead { color: var(--ink-2, #44555e); max-width: 44em; }
.wv-top .wv-payline {
  display: flex; flex-wrap: wrap;
  margin: 2.2rem 0 1.2rem;
  border-top: 1px solid rgba(31, 51, 60, .14);
  border-bottom: 1px solid rgba(31, 51, 60, .14);
}
.wv-top .wv-payline span {
  padding: 1.05rem 1.7rem;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-1, #26363e);
}
.wv-top .wv-payline span:first-child { padding-left: .2rem; }
.wv-top .wv-payline span + span { border-left: 1px solid rgba(31, 51, 60, .14); }
.wv-top .wv-sim .wv-sim-note { color: var(--ink-3, #6b7a82); font-size: var(--text-xs); }