/* ============================================================
   MUKIAI トップのヒーロー（hero-proto-v6 の <style> 42〜74行を切り出し）
   v6 から変えた所：
     1. :root の変数（--gl --text --navy --blue --cyan --ease-*）を .hero の中に移した。--header-h は top.css の値を使う
     2. --gl を、ヘッダーと同じ左端にそろえた（v6 は clamp(20px,5vw,72px)。1440 では同じ 72px。1920 ではヘッダーのロゴの真下に来る）
     3. クラス名：.btn → .hero-btn（top.css の .btn とぶつかる）、.tide → .hero-tide（top.css の潮の光 .tide とぶつかる）
     4. .cta と .text-link は .hero の中だけに効くようにした
     5. 静止画の場所：assets/hero/ → このファイルの隣の hero/（assets/v2/hero/）
     6. .next（仮の次の面）・.site-header・.perf・.clean は切り出していない（トップ側にある）
   v6.1（元の版は hero.v6.css）：[v6.1] の印の行
     ・静止画（月が昇る前の絵）を最初から敷く。3D が出たら上にクロスフェードで重なる（最初の黒画面をなくす）
     ・潮の文字の出る前の状態（傾き 7 度、上端がわずかに見える位置）
     ・overflow-clip-margin が効かないブラウザ用の切り抜き
     ・スマホ：文字の下に月の通り道を空ける
   ============================================================ */
.hero{
  --navy:#1A2B5F; --text:#F5F7FC; --blue:#3B82F6; --cyan:#06B6D4;
  --gl:max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  --ease-reveal:cubic-bezier(0.4,0.1,0,1); --ease-out-hover:cubic-bezier(0.4,0.1,0,1);
}
.hero{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;background:#03060E;color:#fff;z-index:1}
.hero-frame{position:absolute;inset:0;overflow:hidden;background:#03060E;transform-origin:50% 60%;will-change:transform}
#stage{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;opacity:0;transition:opacity .45s ease}   /* [v6.1] 静止画の上に重ねる */
#stage.is-on{opacity:1}
.hero-dim{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
/* [v6.1] 静止画を最初から敷く（月が昇る前の絵）。3D のキャンバスはこの上に 0.45 秒で重なる。
   reduced-motion・WebGL 非対応（.is-static）のときは、月が昇ったあとの絵に替える */
.hero-static{position:absolute;inset:0;z-index:0;display:block;pointer-events:none;background:#03060E url(hero/v61_first_pc.jpg) right bottom/cover no-repeat}
.hero.is-static .hero-static{background-image:url(hero/v61_still_pc.jpg)}
@media (max-width:760px){.hero-static{background-image:url(hero/v61_first_sp.jpg);background-position:center bottom}.hero.is-static .hero-static{background-image:url(hero/v61_still_sp.jpg)}}

/* 文字は3つだけ：呼びかけ・見出し・予約ボタン（LINE は小さな文字リンク） */
.hero-copy{position:absolute;left:var(--gl);top:clamp(150px,24vh,270px);z-index:2;will-change:transform,opacity}
.hero-call{font-size:clamp(14px,1.1vw,16px);font-weight:500;color:rgba(245,247,252,.72);letter-spacing:.03em;line-height:1.5}
.ttl{margin-top:clamp(14px,1.6vh,22px);font-weight:500;font-size:clamp(56px,11.1vw,200px);line-height:1.12;letter-spacing:-.02em;color:var(--text);
  text-shadow:0 0 2px rgba(3,6,14,.5),0 0 18px rgba(3,6,14,.35)}   /* [v6.1] 見出しが「向き合って、／共に進む。」（6字と5字）になったので大きくした。1440 で 160px。[v9] 月が文字の裏を通るので、ごく薄い影で縁を立てる（hero.js の runTide の SH0 と同じ値） */
.ttl .l{display:block;white-space:nowrap}
/* [v9] 字の箱で切り抜くのをやめた（下から上がる動きをやめたので不要。残すとぼけのにじみが箱の縁で切れる） */
.ttl .ch{display:inline-block;vertical-align:top;padding-top:.04em}
.ttl .ch>i{display:inline-block;font-style:normal;transform-origin:50% 100%}
.hero .cta{display:flex;align-items:center;gap:30px;margin-top:clamp(28px,4.4vh,48px);flex-wrap:wrap}
.hero-btn{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:17px 28px 17px 30px;border-radius:6px;background:#F5F7FC;color:var(--navy);font-weight:700;font-size:16px;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.hero-btn::after{content:"";width:18px;height:1.5px;background:currentColor;transition:width .4s var(--ease-out-hover)}
.hero-btn:hover::after{width:30px}
.hero .text-link{position:relative;color:rgba(245,247,252,.82);font-size:14px;font-weight:500;text-decoration:none;padding-bottom:4px}
.hero .text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(245,247,252,.35)}
.hero .text-link::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .5s var(--ease-out-hover);z-index:1}
.hero .text-link:hover{color:#fff}.hero .text-link:hover::before{width:100%}
@media (max-width:760px){
  .hero{min-height:640px}
  .hero-copy{top:calc(var(--header-h) + 36px);right:var(--gl)}
  .ttl{font-size:min(15.5vw,calc((100vw - 40px)/6.15))}   /* [v6.1] 390 で 57px */
  .hero .cta{gap:20px}
}
/* 潮の文字：出る前の状態（JS が動く前に付く。reduced-motion と再訪では付けない） */
.hero-tide .ttl .ch>i{opacity:0;filter:blur(14px);transform:translateY(.6em)}   /* [perf 2026-10-11] runTide の最初のキーフレームと同じ（0.6em 下、ぼけ 14px）。灰青と傾きはやめた */
.hero-tide .cta{opacity:0}
/* [v6.1] hero.js が文字を1字ずつに分けるまでは、見出しを隠しておく（最初の描画で見出しが一瞬見えていた） */
.hero-tide .ttl:not(.is-split) .l{visibility:hidden}
/* [v6.1] 小さい1行は JS を待たずに、開いて 0.15 秒後から出す（1em せり上がる） */
.hero-tide .hero-call{animation:heroCall .55s cubic-bezier(0.16,1,0.3,1) .05s both}   /* [perf] .8s/.15s → .55s/.05s。見出しと同じ減速 */
@keyframes heroCall{from{opacity:0;transform:translateY(.8em)}to{opacity:1;transform:none}}

/* ============================================================
   [v8 2026-10-11] 開く瞬間の演出（hero.js の buildIntroUI と M.introUI が動かす）
   ・読み込み中（3D が出る前）は、演出の最初の絵と同じ月面の静止画を敷く（tex/intro_moon_*.jpg）
   ・演出の間は、見出し・ボタン・ヘッダーを隠す。着地すると hero.js が .intro-done を付け、いままでどおり潮の文字で出る
   ・reduced-motion では index-v2.html の先読みの1行が .hero-tide を付けないので、ここは全部効かない（いまの静止状態から始まる）
   ============================================================ */
.hero.hero-tide:not(.intro-done) .hero-static{background-image:url(tex/intro_moon_v9_pc.jpg);background-position:center}   /* [v9] 引きの定義と光が変わったので、最初の絵を撮り直した（v8 の intro_moon_pc.jpg は残してある） */
@media (max-width:760px){.hero.hero-tide:not(.intro-done) .hero-static{background-image:url(tex/intro_moon_v9_sp.jpg);background-position:center}}
/* [perf 2026-10-11] 着地したあと 3D が出ているときは、下の静止画は見えない。v61_first に差し替えると 74KB を読み、開いて約 9 秒の所で LCP がその絵に付け替わっていた */
.hero.intro-done .hero-frame:has(#stage.is-on) .hero-static{background-image:none}
.hero.hero-tide:not(.intro-done) .hero-copy{visibility:hidden}
.hero-tide:not(.intro-done) .hero-call{animation:none;opacity:0}
html:has(#hero.hero-tide:not(.intro-done)) .site-header{opacity:0;pointer-events:none}
html:has(#hero.hero-tide:not(.intro-done)) .sound-pill{visibility:hidden}
html:has(#hero.hero-tide.intro-done) .site-header{animation:hiFadeIn .9s ease .2s both}
@keyframes hiFadeIn{from{opacity:0}to{opacity:1}}

/* [v9] 飾りは四隅の細い枠と英字 1 行だけ。照準・走査線・横縞（スキャンライン）・計器の数字は代表の注文 (E) で外した。
   毎フレームの CSS 変数はやめ、hero.js が時刻表どおりにクラスを付ける（is-on：枠と暗幕／sub-on：英字／is-out：全部消える）。動きは transition だけ */
.hero-intro{position:absolute;inset:0;z-index:3;pointer-events:none;color:#EAF0FA;overflow:hidden;
  --mono:"SFMono-Regular",Consolas,"Roboto Mono",Menlo,"Liberation Mono",monospace;--hi-c:rgba(190,215,255,.78);--hi-g:max(20px,var(--gl,20px))}
.hero.intro-done .hero-intro{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
/* 文字の下だけ暗くする（月面は明るいので）。文 2 が消えるときに一緒に引く */
.hi-scrim{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  background:linear-gradient(to top,rgba(3,6,14,.80) 0%,rgba(3,6,14,.42) 34%,rgba(3,6,14,0) 62%),radial-gradient(120% 90% at 50% 45%,rgba(3,6,14,0) 55%,rgba(3,6,14,.55) 100%)}
.hero-intro.is-on .hi-scrim{opacity:1}
.hero-intro.is-out .hi-scrim{opacity:0;transition-duration:1.4s}
.hi-frame{position:absolute;inset:clamp(14px,2.2vw,28px);top:calc(var(--header-h,72px) * .5);opacity:0;transition:opacity .4s ease}
.hi-frame i{position:absolute;width:22px;height:22px;border:0 solid var(--hi-c)}
.hi-frame .tl{left:0;top:0;border-left-width:1px;border-top-width:1px}.hi-frame .tr{right:0;top:0;border-right-width:1px;border-top-width:1px}
.hi-frame .bl{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}.hi-frame .br{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.hero-intro.is-on .hi-frame{opacity:.35}
.hero-intro.is-out .hi-frame{opacity:0;transition-duration:.42s}
.hi-copy{position:absolute;left:var(--hi-g);right:var(--hi-g);bottom:clamp(64px,15vh,150px)}
.hi-sub{margin:0 0 18px;min-height:1.7em;font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--hi-c);white-space:nowrap;opacity:0;transition:opacity .5s ease}
.hero-intro.sub-on .hi-sub{opacity:.7}
.hero-intro.is-out .hi-sub{opacity:0;transition-duration:.42s}
/* 2 つの文は同じ場所に重ねて置く（文 1 が消えてから文 2 が出る）。下端をそろえる */
.hi-ttl{display:grid;font-weight:700;font-size:clamp(44px,6.6vw,118px);line-height:1.22;letter-spacing:0;color:#F5F7FC;text-shadow:0 0 28px rgba(3,6,14,.65),0 0 2px rgba(3,6,14,.5)}
.hi-ttl .hs{grid-area:1/1;align-self:end;margin:0}
.hi-ttl .hl{display:block;white-space:nowrap}
.hi-ttl .hc{display:inline-block;width:1em;opacity:0;will-change:filter,transform,opacity}   /* 出る前は見えない。動きは hero.js の Web Animations */
@media (max-width:760px){
  .hi-ttl{font-size:min(46px,calc((100vw - 40px) / 8.2))}   /* 8 字の行（「お客様に対して、」）が入る大きさ */
  .hi-sub{font-size:10px;letter-spacing:.16em;margin-bottom:12px}
  .hi-copy{bottom:clamp(56px,13vh,120px)}
}