/* css/motion.css — index.html 専用（共有 CSS は 197 ページが読むので触らない）。読込は pricing.css の直後。
動かすのは transform / translate / opacity だけ。隠すルールは状態クラス付き、既定は「見える」。根拠は js/motion.js */
/* ---------- A-0. 入場アニメの保険（2026-09-04）----------
css/style.css のヒーロー7要素は opacity:0 が既定で、heroDateIn が完走して
初めて見える。この作りだと、アニメの時計が進まないと主CTAが永久に透明になる。
実際「上に戻ったらボタン2つだけ消えている」という報告があり、
.hero-cta-group の computed opacity が 0、heroDateIn は running のまま
currentTime 0 で止まっていることを確認した。
motion.css 冒頭の方針（隠すルールは状態クラス付き、既定は見える）に
style.css 側が反しているが、あちらは 124 ページが読む共有CSSなので触らない。
ここ（index 専用）で、入場が終わる時刻を過ぎたら表示を確定させる。
アニメーションは通常の宣言より強いので !important が要る。
mo-shown は js/motion.js が 3.5s で付ける（いちばん遅い入場は 3s）。 */
html.mo-shown .hero-label,
html.mo-shown .hero-title-group,
html.mo-shown .hero-cta-group,
html.mo-shown .hero-sidebar,
html.mo-shown .hero-bottom-bar,
html.mo-shown .hero-date-img,
html.mo-shown .hero-subtitle-text,
html.mo-shown .hero-tagline,
html.mo-shown .hero-scroll{ opacity:1 !important; }
/* ---------- A-1. 進捗バー（width → scaleX） ---------- */
#scrollProgress{ width:100%; transform:scaleX(0); transform-origin:0 50%; will-change:transform; }
/* 画面外セクション（.is-off は motion.js の IO）では背景ブロブを止める */
.lp-sec.is-off .lp-deco .float,
.lp-pain.is-off .lp-deco .float{ animation-play-state:paused; }
/* ============================================================
A-2. 幕が上がる起点とヒーローの左右収束
html.mo-wait（head の inline script。600ms／1.5s で必ず外す）→ is-ready（幕が上がる）→ mo-done（motion.js）
is-revisit＝同セッション2回目。既定（クラス無し）= 表示・translate 0。opacity は触らない
============================================================ */
html.is-revisit #loadingOverlay{ display:none; }
html.is-ready #loadingOverlay{ opacity:0; visibility:hidden; pointer-events:none; }
/* 内側スタガーの短縮（delay だけ上書き。幕 .48s の後、主 CTA が 1 秒以内） */
.hero-title-group{ animation-delay:.05s; }
.hero-cta-group{ animation-delay:.45s; }
.hero-sidebar, .hero-bottom-bar{ animation-delay:.8s; }
.hero-scroll{ animation-delay:1s; }
@media (prefers-reduced-motion:no-preference){
html.mo-wait .hero-title-group, html.mo-wait .hero-cta-group,
html.mo-wait .hero-sidebar, html.mo-wait .hero-bottom-bar, html.mo-wait .hero-scroll{ animation-play-state:paused; }
/* 左右収束は個別プロパティ translate だけ（main.js が transform を毎フレーム書く） */
html.mo-wait .hero-content{ translate:-40px 0; }
html.mo-wait #heroMovie{ translate:40px 0; }
html.is-ready:not(.mo-done) .hero-content,
html.is-ready:not(.mo-done) #heroMovie{ transition:translate .6s cubic-bezier(.16,1,.3,1); }
/* ローダーは上へ抜ける幕。visibility は終了時に切替（無いと瞬時に消える） */
html.is-ready #loadingOverlay, #loadingOverlay.hidden{
transform:translateY(-100%);
transition:transform .48s cubic-bezier(.16,1,.3,1), opacity .48s ease, visibility 0s linear .48s;
}
.loading-bar-inner{ width:100%; transform-origin:0 50%; animation:hkBar .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes hkBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (max-width:768px){
html.mo-wait .hero-content{ translate:-24px 0; }
html.mo-wait #heroMovie, html.is-ready #heroMovie{ translate:0 0; transition:none; }
}
}
@media (prefers-reduced-motion:reduce){
html.mo-wait .hero-content, html.mo-wait #heroMovie{ translate:0 0; }
}
@media (scripting:none){
#loadingOverlay{ display:none; }
}
/* ============================================================
A-3. 方向つきの出現（.lp-reveal に .from-l / .from-r）
隠す側は必ず :not(.in)（home.css:538 の .lp-reveal.in と同じ詳細度 (0,2,0) なので）
============================================================ */
.lp-reveal.from-l:not(.in){ transform:translateX(-32px); }
.lp-reveal.from-r:not(.in){ transform:translateX(32px); }
.lp-sec-head.lp-reveal:not(.in){ transform:translateY(44px); }
.lp-sec-head.lp-reveal.in{ transition-duration:.55s; }
/* 横スライド中の横スクロール防止（両軸 clip。overflow-x だけだと hidden に丸められる） */
.lp-sec{ overflow:clip; }
@media (max-width:768px){
.lp-reveal.from-l:not(.in), .lp-reveal.from-r:not(.in){ transform:translateY(20px); }
}
@media (prefers-reduced-motion:reduce){
.lp-reveal.from-l, .lp-reveal.from-r, .lp-sec-head.lp-reveal{ transform:none !important; }
}
@media (scripting:none){
.lp-reveal.from-l, .lp-reveal.from-r, .lp-sec-head.lp-reveal{ transform:none !important; }
}
/* ============================================================
A-4. セクション見出しの透かし英字（motion.js が aria-hidden で注入。JS 無効なら存在しない）
センタリングは left/right＋text-align（translate は GSAP の transform と加算されるので書かない）。
top:-.85em で大文字の下端が見出し箱の上端の 1.5px 上。上限 96px は上パディング 72px に収まる値
============================================================ */
.lp-sec-head > .mo-wm, #lp-greeting .lp-container > .mo-wm{
position:absolute; top:-.85em; left:0; right:0; z-index:0;
text-align:center; font-family:var(--font-en,'Archivo',sans-serif); font-weight:800;
font-size:clamp(56px,7.5vw,96px); letter-spacing:-.02em; line-height:1; white-space:nowrap;
color:rgba(22,51,92,.05); pointer-events:none; user-select:none;
}
.lp-sec.alt .mo-wm{ color:rgba(22,51,92,.06); }
#lp-greeting .lp-greet{ position:relative; z-index:1; }
/* 足す前に減らす: 透かしを置いた見出しは点線リングを減らす */
.lp-sec-head.has-wm::before{ opacity:.5; }
.lp-sec-head.has-wm::after{ display:none; }
@media (max-width:768px){
.lp-sec-head > .mo-wm, #lp-greeting .lp-container > .mo-wm{ font-size:clamp(56px,7.5vw,64px); }
}
/* 動き（PC・no-preference のみ）は motion.js の gsap.matchMedia が scrub で x:-24→24 */
/* ============================================================
A-5. ナビ「ヒーロー上は透明→通過後は白」。html.on-hero は motion.js が付ける。既定は白（読める）
============================================================ */
.header{ transition:transform .4s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)), background-color .25s ease; }
.main-nav{ transition:background-color .25s ease, border-color .25s ease; }
.header-logo span span, .header-top-links a, .header-trust-badge{ transition:color .25s ease; }
html.on-hero .header{ background-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
html.on-hero .main-nav{ background-color:transparent; border-top-color:transparent; }
html.on-hero .header-logo span span{ color:#fff !important; }
html.on-hero .header-logo img{ background:#fff; padding:2px; border-radius:4px; }
html.on-hero .header-top-links a, html.on-hero .header-top-links a:hover,
html.on-hero .header-trust-badge,
html.on-hero .util-link:not(.util-cta), html.on-hero .util-link:not(.util-cta):hover,
html.on-hero .nav-trigger, html.on-hero .nav-item:hover .nav-trigger, html.on-hero .nav-item.active .nav-trigger{ color:#fff; }
html.on-hero .header-top-links > :not(:first-child)::before{ color:rgba(255,255,255,.6); }
html.on-hero .header-top-links a::after, html.on-hero .nav-trigger::after{ background:#fff; }
html.on-hero .hamburger span{ background:#fff; }
/* ヘッダーが透明なあいだの下敷き（2026-09-08）。
動画のコマによっては白文字が 1.78:1 まで落ちるので、暗さの下限をここで作る。
上ほど濃く、下に向かって消える。動画そのものの見え方はほとんど変えない。
幕はヘッダーの背面に敷き、中身（ロゴ・ナビ）は前に出す。 */
html.on-hero .header{ position:fixed; }
html.on-hero .header::before{
content:""; position:absolute; inset:0 0 -56px 0; pointer-events:none; z-index:0;
/* ナビ行はヘッダーの下半分にあるので、下端まで濃さを保ち、消えるのはヘッダーの外。
実測（最悪のコマ）：0.45 で 4.79:1、0.50 で 5.45:1。下端を 0.50 に置いた。 */
background:linear-gradient(180deg,
rgba(9,18,34,.62) 0%, rgba(9,18,34,.50) 63%, rgba(9,18,34,0) 100%);
}
html.on-hero .header > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ html.on-hero .header::before{ transition:none; } }
/* ============================================================
B-1. #mission の静止ウォーターマーク（motion.js が .ms-wrap の最初の子に注入）
============================================================ */
.ms-wrap{ position:relative; }
.ms-wrap > .mo-wm-static{
position:absolute; top:-.85em; left:0; right:0; z-index:0;
text-align:center; font-family:var(--font-en,'Archivo',sans-serif); font-weight:800;
font-size:clamp(64px,8vw,100px); letter-spacing:-.02em; line-height:1; white-space:nowrap;
color:rgba(22,51,92,.045); pointer-events:none; user-select:none;
}
.ms-label, .ms-head, .ms-body, .ms-cards, .ms-sign{ position:relative; z-index:1; }
/* ============================================================
B-2. 無限マーキー（#lp-ba。本物6枚＋aria-hidden の複製6枚を -50% で流す）
gap ではなく li の margin-right で刻む（12枚の半分＝ちょうど6枚ぶんになり継ぎ目が飛ばない）
============================================================ */
.mo-strip{ overflow:hidden; margin:28px 0 0; }
.mo-strip-track{ display:flex; width:max-content; margin:0; padding:0; list-style:none; }
.mo-strip li{ width:240px; margin-right:14px; aspect-ratio:16/9; border:1px solid var(--pLine,#d7e0ec); flex:none; background:#fff; }
.mo-strip a{ display:block; height:100%; }
.mo-strip a:focus-visible{ outline-offset:-3px; }
.mo-strip img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.mo-strip-track{ animation:moStrip 60s linear infinite; }
.mo-strip:hover .mo-strip-track, .mo-strip:focus-within .mo-strip-track, .mo-strip.is-off .mo-strip-track{ animation-play-state:paused; }
}
@keyframes moStrip{ to{ transform:translateX(-50%); } }
/* hover の無い端末と reduce は、指で送る帯（複製は出さない） */
@media (hover:none){
.mo-strip{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.mo-strip li{ scroll-snap-align:start; width:180px; }
.mo-strip [aria-hidden="true"]{ display:none; }
}
@media (prefers-reduced-motion:reduce){
.mo-strip{ overflow-x:auto; scroll-snap-type:x mandatory; }
.mo-strip [aria-hidden="true"]{ display:none; }
}
/* B-3. ヒーロー動画のインジケータと音声ボタン ── 2026-09-04 に削除。
動画を4本の切り替えから1本にまとめたので、切り替える対象も、
鳴らす音も無くなった（音は素材4本のうち2本にしか無く、2秒で切ると使えない）。
生成していた js/motion.js の [9] と、index.html のボタンも同時に外してある。
css/home.css に残っていた .hero-movie-sound の見た目も削除ずみ。 */
/* ============================================================
B-4. 二次リンクのホバーワイプ（.mo-wipe は motion.js が付与。scaleX、文字色は変えない）
紺 #16335c on #fde9d9 は約 11:1。ヒーロー内の白文字は白 .14。.ba2-more は対象外（白文字の下に来ると落ちる）
============================================================ */
.mo-wipe{ position:relative; isolation:isolate; overflow:hidden; }
.mo-wipe::before{ content:''; position:absolute; inset:0; background:#fde9d9; transform:scaleX(0); transform-origin:left; z-index:-1; }
.hero .mo-wipe::before{ background:rgba(255,255,255,.14); }
.rz-link.mo-wipe::before{ background:rgba(22,51,92,.06); }
@media (hover:hover){ .mo-wipe:hover::before, .nx-card:hover .nx-go.mo-wipe::before{ transform:scaleX(1); } }
.mo-wipe:focus-visible::before, .nx-card:focus-visible .nx-go.mo-wipe::before, .mo-wipe:active::before{ transform:scaleX(1); }
@media (prefers-reduced-motion:no-preference){ .mo-wipe::before{ transition:transform .28s cubic-bezier(.16,1,.3,1); } }
/* B-5. エンドカード（#lp-contact）は GSAP の from で動かす。CSS で隠さない（GSAP 未読込なら全文表示） */
/* FAQ の「答えを見る」（home.css:382 は橙 12px＝白地 2.97:1）。A-1 で出現待ちを外して常時見えるようになったので、index だけ濃い橙 12.5px にする（5.09:1） */
.lp-acc summary .more{ color:#b5501a; font-size:12.5px; }
/* 代表あいさつの見出しの橙（19px 太字＝大きい文字は 3:1 が要る。#e8762e は 2.97:1）。同じく A-3 で親の出現待ちを外して常時見えるため、index だけ少し濃くする */
.lp-greet .gh em{ color:#dc691f; }
/* ===== H. ヒーロー全画面背景動画（2026-09-03 白倉採用）=====
右カラムの枠をやめ、同じ video#heroMovieVid をヒーロー全面の背景にする。DOM は動かさず CSS だけ。
輪番・音声ボタン・切替ドット・データセーバー分岐（#heroMovieJs / hkHero / motion.js）はそのまま。
z-order（.hero を isolate）: video(-2) → 動画の上の紺スクリム(-1) → .hero-bg(1: 既存の左スクリムと格子)
→ 文字(5) → 音声ボタン・ドット(6)。粒子キャンバスと図形は動画の上では雑音なので消す。 */
.hero{ isolation:isolate; }
.hero-layout{ position:static; z-index:auto; }
.hero-movie{ position:absolute; inset:0; z-index:auto; flex:none; display:block; pointer-events:none; }
.hero-movie-frame{ position:static; width:auto; max-width:none; aspect-ratio:auto; background:transparent; border:0; overflow:visible; }
.hero-movie-frame::after{ display:none; }
.hero-movie-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; display:block; }
/* 動画の上の紺スクリム：上＝透明ヘッダーの白文字用、下＝下部バーと SCROLL 用、全面＝3px のドットスクリーン（参考サイトと同じ手法） */
.hero-movie::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
linear-gradient(180deg, rgba(9,20,40,.88) 0, rgba(9,20,40,.46) 120px, rgba(9,20,40,0) 280px),
linear-gradient(0deg, rgba(9,20,40,.86) 0, rgba(9,20,40,.4) 24%, rgba(9,20,40,0) 46%),
radial-gradient(circle at 1px 1px, rgba(9,20,40,.4) 1px, transparent 1.6px) 0 0/3px 3px; }
/* 既存の紺ベタ背景を透明にして動画を見せる。左スクリム（::before 0.92→0）と格子（::after）はそのまま生きる */
.hero-bg{ pointer-events:none; }
.hero-bg-generated{ background:transparent; animation:none; }
#heroCanvas, .hero-shapes{ display:none; }
.hero-content{ position:relative; z-index:5; }
/* 幕が上がったら、ゆっくり寄る（transform のみ・6秒）。A-2 の左右収束は文字側だけにし、背景は動かさない */
html.mo-wait .hero-movie-frame video{ transform:scale(1.06); }
html.is-ready .hero-movie-frame video{ transform:scale(1); }
html.mo-wait #heroMovie, html.is-ready:not(.mo-done) #heroMovie{ translate:0 0; transition:none; }
@media (prefers-reduced-motion:no-preference){ .hero-movie-frame video{ transition:transform 6s cubic-bezier(.16,1,.3,1); } }
@media (prefers-reduced-motion:reduce){ .hero-movie-frame video{ transform:none; } }
@media (max-width:768px){
/* スマホは文字が全面に重なるので、全体をもう一段落とす */
.hero-movie::after{ background:
linear-gradient(180deg, rgba(9,20,40,.9) 0, rgba(9,20,40,.55) 90px, rgba(9,20,40,.22) 240px),
linear-gradient(0deg, rgba(9,20,40,.9) 0, rgba(9,20,40,.55) 30%, rgba(9,20,40,.18) 60%),
linear-gradient(rgba(9,20,40,.42), rgba(9,20,40,.42)),
radial-gradient(circle at 1px 1px, rgba(9,20,40,.45) 1px, transparent 1.6px) 0 0/3px 3px; }
}
/* ===== P. 画面外セクションのレイアウトを後回し（2026-09-03 性能改善）=====
ページ全体（約1万px）の style/layout が初回表示の主コストだった（Lighthouse の Style & Layout 2.6〜4.0s@CPU4倍）。
画面に近づくまで描画を省く。仮の高さは content-box の実測値（1440px / 390px。padding は別に足される）。
auto を付けているので一度描画したら実寸を覚える。motion.js は contentvisibilityautostatechange で ScrollTrigger を測り直し、
ハッシュ移動の直後は着地を測り直す（[12]）。出現演出（IO）は描画されたときに発火する */
@supports (content-visibility:auto){
.lp-sec, .lp-final, .footer{ content-visibility:auto; contain-intrinsic-size:auto 700px; }
#mission{ contain-intrinsic-size:auto 578px; } #lp-results{ contain-intrinsic-size:auto 1726px; } #lp-voice{ contain-intrinsic-size:auto 707px; }
#lp-ba{ contain-intrinsic-size:auto 1335px; } #lp-price{ contain-intrinsic-size:auto 1078px; } #next{ contain-intrinsic-size:auto 600px; }
#lp-faq{ contain-intrinsic-size:auto 672px; } #lp-greeting{ contain-intrinsic-size:auto 266px; } #lp-contact{ contain-intrinsic-size:auto 563px; } .footer{ contain-intrinsic-size:auto 727px; }
@media (max-width:768px){
#mission{ contain-intrinsic-size:auto 890px; } #lp-results{ contain-intrinsic-size:auto 2704px; } #lp-voice{ contain-intrinsic-size:auto 838px; }
#lp-ba{ contain-intrinsic-size:auto 1872px; } #lp-price{ contain-intrinsic-size:auto 2170px; } #next{ contain-intrinsic-size:auto 1023px; }
#lp-faq{ contain-intrinsic-size:auto 730px; } #lp-greeting{ contain-intrinsic-size:auto 447px; } #lp-contact{ contain-intrinsic-size:auto 874px; } .footer{ contain-intrinsic-size:auto 1383px; }
}
}
/* ===== H2. sticky ヒーロー（依頼書 C-2・白倉了承 2026-09-03）=====
PC かつ reduced-motion でないときだけ、ヒーロー（全画面動画）を画面に留め、次のセクションが上に乗って幕のように覆う。
ヒーローの親は body なので sticky は最後まで効くが、ヒーローを離れたら（html.on-hero が外れたら）visibility で消して
描画・Tab 順から外す。JS が無い（mo-js が付かない）場合は普通に流れる。後続セクションは不透明にして動画が透けないように */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
.hero{ position:sticky; top:0; z-index:0; }
.pos-strip, .lp-sec, .lp-final, .footer{ position:relative; z-index:1; }
.lp-sec:not(.alt){ background:#fff; }
html.mo-js:not(.on-hero) .hero{ visibility:hidden; }
}
/* ===== C-1. 実績図のライトボックス（motion.js [13] が