/* ==========================================================================
   Kai — 公開サイト スタイル（A-2「縦組み・余白」）

   考え方
   ・本文は画面右の細い列（レール）だけに置き、左は背景アニメーションに譲る。
   ・見出しは明朝の縦書き。本文との間は 1px の罫線だけで仕切る。
   ・面で塗る要素（カード・影・角丸・ピル型ボタン）は使わない。
   ・文字と下敷き（スクリム）の色は、スクロール位置に合わせて
     scene.js が body に流し込む。宇宙では生成り、空から下は藍墨になる。
   ========================================================================== */

:root{
  /* テーマ色（content/shared.php から render_page() が上書きする） */
  --accent:#24406b;
  --accent-deep:#16294a;
  --mark:#c9a24a;          /* 金 — 小さな印だけに使う */
  --mark-deep:#a37f2f;

  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif JP",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans CJK JP",system-ui,sans-serif;

  --rail:660px;            /* 本文レールの最大幅 */
  --rail-pad:clamp(22px,4.2vw,84px);

  /* 明るい景色（空〜海）のときの色。暗い景色の値は scene.js が上書きする。 */
  --ink:#1c2b3f;
  --ink-soft:rgba(28,43,63,.72);
  --ink-faint:rgba(28,43,63,.55);
  --rule:rgba(28,43,63,.20);
  --rule-soft:rgba(28,43,63,.12);
  --field:rgba(255,255,255,.62);
  --scrim:rgba(246,242,232,.82);

  /* JS が更新するスクロール進行度（0=宇宙 → 1=海） */
  --p:0;
  --op-space:1;
  --op-dawn:0;
  --op-sky:0;
  --op-cloud:0;
  --sea-y:100%;
}

/* 文字色と下敷きの色は「途中の色」を作らずに入れ替えるが、
   切り替わりが唐突に見えないよう 0.5 秒かけて溶かす。
   @property で色として登録しておくと、変数でも transition が効く。 */
@property --ink       { syntax:"<color>"; inherits:true; initial-value:#1c2b3f }
@property --ink-soft  { syntax:"<color>"; inherits:true; initial-value:rgba(28,43,63,.72) }
@property --ink-faint { syntax:"<color>"; inherits:true; initial-value:rgba(28,43,63,.55) }
@property --rule      { syntax:"<color>"; inherits:true; initial-value:rgba(28,43,63,.20) }
@property --rule-soft { syntax:"<color>"; inherits:true; initial-value:rgba(28,43,63,.12) }
@property --field     { syntax:"<color>"; inherits:true; initial-value:rgba(255,255,255,.62) }
@property --scrim     { syntax:"<color>"; inherits:true; initial-value:rgba(246,242,232,.86) }

body{transition:--ink .5s linear,--ink-soft .5s linear,--ink-faint .5s linear,
                --rule .5s linear,--rule-soft .5s linear,--field .5s linear,--scrim .5s linear}

/* JS が動く前の一瞬でも色が破綻しないように、宇宙から始まるページは暗い側で始める */
body.page-space-to-sea{
  --ink:#f3f0e8;
  --ink-soft:rgba(243,240,232,.76);
  --ink-faint:rgba(243,240,232,.55);
  --rule:rgba(243,240,232,.26);
  --rule-soft:rgba(243,240,232,.14);
  --field:rgba(243,240,232,.10);
  --scrim:rgba(6,9,20,.78);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:var(--gothic);
  color:var(--ink);line-height:1.95;letter-spacing:.03em;
  font-size:.95rem;
  background:#e9eae4;   /* .scene が読み込まれる前の下地 */
  -webkit-font-smoothing:antialiased;
}

/* 日本語の行の折り返しを、文節の切れ目でそろえる。
   （「目線をそろ／えて」「クリエイティ／ブ」のような途中での改行を防ぐ）

   本文は PHP 側（lib/budoux.php）で文節の切れ目に <wbr> を入れてあるので、
   keep-all で「<wbr> の位置でだけ改行する」ようにする。
   ブラウザの機能に頼らないので、Safari でも同じ見え方になる。
   万一 1文節が1行に収まらないときだけ、break-word が助けに入る。 */
p,li,dd,dt,h1,h2,h3,.hero-subtitle,.section-subtitle,.btn,.menu-note,.hero-badge,
.cta-inner h2,.form-status{
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* 本文レール：画面の右寄り。左はいつも背景が見えている。 */
.container{
  width:min(100%,var(--rail));
  margin-left:auto;margin-right:0;
  padding-left:26px;padding-right:var(--rail-pad);
}

/* 右側だけを薄く沈めて文字を読ませる。色は scene.js が景色に合わせて変える。 */
.rail-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    transparent 24%,
    var(--scrim) 64%,
    var(--scrim) 100%)}

/* ==========================================================================
   キーボード操作
   ========================================================================== */
.skip-link{position:fixed;top:8px;left:8px;z-index:100;padding:10px 18px;
  background:var(--accent-deep);color:#fff;font-weight:700;font-size:.9rem;
  transform:translateY(-160%);transition:transform .18s ease}
.skip-link:focus{transform:none}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:1.5px solid var(--mark);outline-offset:3px}
/* ==========================================================================
   背景アニメーション
   ========================================================================== */
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}

/* --- 連番背景 ---
   読み込めたときだけ表示し、CSS/SVG で描いている「空・雲・奥の海」を隠す。
   ロケット・手前の波・下敷きはこの上に残るので、重なり順の約束は変わらない。 */
.scene-sequence{position:absolute;inset:0;width:100%;height:100%;display:block}
/* カイロ：連番の海が出ているときは、ロケット用に描いていた手前の波と光の筋はしまう */
body.page-sea .scene.seq-on :is(.scene-sea-front,.scene-glints){display:none}
/* 水面の波紋（カイロ。ripples.js が描く） */
.scene-ripples{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.scene.seq-on .scene-sky,
.scene.seq-on .scene-dawn,
.scene.seq-on .scene-stars,
.scene.seq-on .scene-earth,
.scene.seq-on .scene-clouds,
.scene.seq-on .scene-sea-back{display:none}

/* 3層のグラデーションを重ね、透明度をスクロールで切り替える */
.scene-sky{position:absolute;inset:0;
  background:linear-gradient(180deg,#cfe0e2 0%,#e6eae1 36%,#f3ecd9 64%,#e2d3b6 100%)}
.scene-sky::before,.scene-sky::after{content:"";position:absolute;inset:0}
.scene-sky::before{opacity:var(--op-sky);
  background:
    /* 地平線側に乳白色の霞。高さは --haze-y でゆっくり動く */
    linear-gradient(180deg,transparent 0%,transparent calc(var(--haze-y,62%) - 22%),
                    rgba(238,243,240,.55) var(--haze-y,62%),rgba(244,246,240,.8) 100%),
    /* 天頂側は低彩度の濃い青 */
    linear-gradient(180deg,#2f5d8c 0%,#5f92b4 30%,#9cc2d2 62%,#cfdfdf 86%,#e7eee9 100%)}
.scene-sky::after{opacity:var(--op-space);
  background:radial-gradient(120% 80% at 50% 0%,#1a2340 0%,#0d1226 55%,#060812 100%)}

/* 薄明（夜明けの空）。宇宙と青空の橋渡し。
   地平線の近くにだけ細い琥珀の散乱帯を置き、上空には紫紺のベールを重ねる。 */
.scene-dawn{position:absolute;inset:0;opacity:var(--op-dawn);
  background:linear-gradient(180deg,#0e1732 0%,#1e2a55 24%,#3c3f70 46%,#6b5a7c 66%,
                             #a97a76 82%,#d59f76 94%,#e6b98d 100%)}
.scene-dawn::before,.scene-dawn::after{content:"";position:absolute;inset:0}
/* 上空の紫紺のベール */
.scene-dawn::before{
  background:linear-gradient(180deg,rgba(38,30,74,.55) 0%,rgba(52,44,92,.28) 34%,transparent 62%)}
/* 地平線の琥珀の帯（この案でいちばん記憶に残る一点） */
.scene-dawn::after{
  background:
    linear-gradient(180deg,transparent 0%,transparent 76%,
      rgba(255,196,122,.10) 84%,rgba(255,205,132,.34) 90%,
      rgba(255,222,166,.52) 93%,rgba(255,201,128,.24) 96%,transparent 100%),
    radial-gradient(120% 26% at 34% 93%,rgba(255,214,150,.42) 0%,transparent 70%)}

/* 画面全体にごく薄い粒状感。帯状のムラ（バンディング）を消すためのもの。
   画像ファイルは足さず、SVGのノイズを data URI で埋め込んでいる。 */
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}

.scene-stars{position:absolute;inset:0;width:100%;height:100%;opacity:var(--op-space)}

/* --- 地球の縁 --- */
.scene-earth{position:absolute;left:50%;top:var(--earth-y,64vh);
  width:180vw;height:180vw;transform:translateX(-50%);
  opacity:var(--op-space);pointer-events:none}
.earth-body,.earth-glow{position:absolute;inset:0;border-radius:50%}
.earth-body{
  background:
    /* 上端（昼側）だけ明るく、下へ行くほど夜側へ落ちる */
    radial-gradient(120% 46% at 42% 0%,
      rgba(146,196,228,.62) 0%,rgba(70,124,170,.5) 22%,
      rgba(28,62,102,.55) 46%,rgba(10,24,48,.7) 72%,rgba(5,10,22,.9) 100%),
    #050a16;
  box-shadow:inset 0 10px 46px rgba(160,210,245,.28)}
/* 大気の光の輪。地球の縁だけを細く光らせる。 */
.earth-glow{
  box-shadow:0 0 0 1.5px rgba(168,216,250,.7),
             0 -2px 18px 3px rgba(130,190,240,.5),
             0 -6px 54px 16px rgba(88,150,215,.28)}

/* --- 雲 --- */
.scene-clouds{position:absolute;inset:0;opacity:var(--op-cloud)}

/* 雲は「下面の影／本体／上縁の抜け」の3枚重ね。
   遠景・中景・近景で、ぼかし・濃さ・流れる速さ・視差の量を変えている。 */
.cloud{position:absolute}
.cloud-under{fill:#9fb6c4;opacity:.55}
.cloud-body {fill:#f4f7f3;opacity:.95}
.cloud-top  {fill:#ffffff;opacity:.75}

/* 視差の量は --par に入れ、drift のキーフレームの中で使う。
   （animation と transform が競合しないようにするため） */
.cloud-far  {filter:blur(12px) saturate(.85);opacity:.5; --par:var(--par-far,0px)}
.cloud-mid  {filter:blur(7px);              opacity:.75;--par:var(--par-mid,0px)}
.cloud-near {filter:blur(3px) contrast(1.06);opacity:.95;--par:var(--par-near,0px)}

/* 横に流れる動きは残す（スクロールを止めても景色が生きているように見せるため）。
   視差は内側の <path> ではなく、外側の translateY で足している。 */
.cloud-1{width:52vw;top:6%;  left:-14%; animation:drift 64s linear infinite}
.cloud-2{width:36vw;top:26%; left:58%;  animation:drift 78s linear infinite reverse}
.cloud-3{width:62vw;top:46%; left:-22%; animation:drift 46s linear infinite}
.cloud-4{width:32vw;top:64%; left:66%;  animation:drift 92s linear infinite reverse}
.cloud-5{width:44vw;top:78%; left:4%;   animation:drift 52s linear infinite}
.cloud-6{width:28vw;top:16%; left:30%;  animation:drift 86s linear infinite reverse}
@keyframes drift{from{transform:translateX(-16vw) translateY(var(--par,0px))}
                   to{transform:translateX(116vw) translateY(var(--par,0px))}}

/* --- ロケット ---
   拡大縮小と回転の基準を「機体の足元」に置いているので、
   scene.js は「足元をどこに置くか」だけを決めれば着水位置が決まる。 */
.scene-rocket{
  position:absolute;left:50%;top:0;width:clamp(72px,6.6vw,96px);
  transform:translate(calc(-50% + var(--rocket-x,0px)),var(--rocket-y,10vh))
            rotate(var(--rocket-rot,0deg)) scale(var(--rocket-scale,1));
  transform-origin:50% 100%;
  opacity:var(--rocket-op,1);will-change:transform;
}
.scene-rocket svg{width:100%;height:auto;overflow:visible;display:block}
.rocket-inner{display:block;position:relative}

/* グラデーションの色をテーマ色に合わせる（SVG の <stop> にも変数が効く） */
.rk-stop-accent{stop-color:var(--accent)}
.rk-stop-deep{stop-color:var(--accent-deep)}

.rk-halo{fill:url(#rk-halo)}
.rk-hull{fill:url(#rk-hull)}
.rk-shade{fill:url(#rk-shade)}
.rk-nose{fill:url(#rk-nose)}
.rk-nose-hi{fill:#fff;opacity:.22}
.rk-ring{fill:var(--mark)}
.rk-ring-soft{fill:var(--mark);opacity:.55}
.rk-seam{stroke:rgba(20,32,46,.22);stroke-width:1.1;fill:none;stroke-linecap:round}
.rk-rivet{fill:rgba(20,32,46,.24)}
.rk-shine{fill:url(#rk-shine)}
.rk-fin{fill:url(#rk-fin)}
.rk-fin-dark{fill:var(--accent-deep)}
.rk-fin-edge{fill:var(--mark);opacity:.85}
.rk-skirt{fill:url(#rk-skirt)}
.rk-bell{fill:url(#rk-bell)}
.rk-bell-rib{stroke:rgba(255,255,255,.22);stroke-width:1;fill:none}
.rk-throat{fill:#141c26}
.rk-rcs{fill:#6d7c8c}
.rk-window-rim{fill:url(#rk-rim)}
.rk-window-glass{fill:url(#rk-glass)}
.rk-window-spec{fill:#fff;opacity:.55}

.rocket-flame{opacity:var(--flame-op,1);transform-origin:60px 240px;
  animation:flicker .16s infinite alternate}
.flame-glow{fill:url(#rk-fglow)}
.flame-outer{fill:url(#rk-flame)}
.flame-core{fill:url(#rk-core)}
.flame-hot{fill:#fff;opacity:.85}
@keyframes flicker{from{transform:scaleY(.86) scaleX(.95)}to{transform:scaleY(1.12) scaleX(1.03)}}

/* --- ロケットが受ける環境光 ---
   宇宙では青白いリムライト、薄明では片側だけ橙、海面近くでは下面に青緑。
   色と濃さは scene.js が --env-l / --env-r に流し込む。 */
.rk-art{image-rendering:auto}
/* 機体のシルエットだけに、まわりの景色の色を乗せる。左右で色を変えている。 */
.rk-env-wash{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,var(--env-l,transparent),transparent 46%,
                             transparent 54%,var(--env-r,transparent));
  -webkit-mask:url(../images/rocket.png) center/contain no-repeat;
          mask:url(../images/rocket.png) center/contain no-repeat;
}

/* --- 水面の反射（きらめきと筋） --- */
.scene-glints{position:absolute;left:0;right:0;bottom:0;height:38vh;
  transform:translateY(var(--sea-y));opacity:var(--glint-op,0);pointer-events:none}
.glint{position:absolute;border-radius:50%;background:var(--glint-color,rgba(255,255,255,.5));
  filter:blur(3px);animation:glint-sway 7s ease-in-out infinite alternate}
.streak{position:absolute;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  filter:blur(1px);animation:glint-sway 5.5s ease-in-out infinite alternate-reverse}
.g1{left:12%;top:66%;width:6vw;height:13px}   .g2{left:26%;top:72%;width:4vw;height:10px}
.g3{left:5%; top:79%;width:8vw;height:15px}   .g4{left:34%;top:83%;width:5vw;height:11px}
.g5{left:17%;top:88%;width:7vw;height:14px}   .g6{left:44%;top:75%;width:4vw;height:9px}
.s1{left:8%;top:69%;width:18vw} .s2{left:22%;top:81%;width:13vw} .s3{left:4%;top:91%;width:22vw}
@keyframes glint-sway{from{transform:translateX(-6px) scaleX(.92)}
                        to{transform:translateX(6px)  scaleX(1.08)}}

/* --- 逆噴射が水面を照らす光 --- */
.water-glow{position:absolute;left:50%;bottom:-6px;width:210px;height:56px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  opacity:var(--water-glow-op,0);
  background:radial-gradient(closest-side,rgba(255,190,110,.85),rgba(255,150,70,.28) 55%,transparent 100%);
  filter:blur(7px)}

/* --- 着水の飛沫。個数は固定で、出す／出さないだけを切り替える --- */
.spray{position:absolute;left:50%;bottom:6px;width:0;height:0;pointer-events:none;
  opacity:var(--spray-op,0)}
.spray i{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;
  background:rgba(252,254,255,.98);box-shadow:0 0 0 1px rgba(60,106,124,.35);
  transform:rotate(var(--a)) translateY(calc(var(--d) * -1 * var(--spray-t,0)))
            scale(calc(1 - .45 * var(--spray-t,0)));
  transition:transform .5s cubic-bezier(.2,.8,.3,1) var(--t)}
.spray i:nth-child(even){width:5px;height:5px}

/* --- 着水したロケットの映り込み --- */
.rocket-reflection{position:absolute;left:50%;top:0;width:clamp(46px,5.2vw,76px);
  transform:translate(calc(-50% + var(--rocket-x,0px)),var(--refl-y,120vh))
            scale(var(--rocket-scale,1));
  transform-origin:50% 0;opacity:var(--refl-op,0);pointer-events:none}
.rocket-reflection .refl{display:block;margin:0 auto;border-radius:50%;
  background:rgba(244,249,252,.9);filter:blur(2.5px);
  animation:refl-sway 4.6s ease-in-out infinite alternate}
.rocket-reflection .r1{width:74%;height:10px;margin-bottom:6px;opacity:.75}
.rocket-reflection .r2{width:96%;height:8px;margin-bottom:8px;opacity:.5;animation-delay:-1.4s}
.rocket-reflection .r3{width:58%;height:7px;opacity:.32;animation-delay:-2.8s}
@keyframes refl-sway{from{transform:translateX(-5px) scaleX(.9)}
                       to{transform:translateX(5px)  scaleX(1.1)}}

/* 着水したときだけ出る波紋 */
.rocket-splash{opacity:var(--splash-op,0);fill:none;
  stroke:rgba(244,241,232,.9);stroke-width:2.5}
.rocket-splash ellipse:last-child{stroke:rgba(255,255,255,.5);stroke-width:2}

/* 着水後のゆれ。着水直後は大きく揺れ、4秒かけて小さな定常揺れへ落ち着く。 */
.scene-rocket.landed .rocket-inner{
  animation:bob-settle 4s cubic-bezier(.25,.6,.3,1) 1 forwards,
            bob 4.2s ease-in-out 4s infinite alternate}
@keyframes bob-settle{
    0%{transform:translateY(-9px) rotate(-5deg)}
   22%{transform:translateY(7px)  rotate(4deg)}
   46%{transform:translateY(-5px) rotate(-2.6deg)}
   70%{transform:translateY(4px)  rotate(1.8deg)}
  100%{transform:translateY(-3px) rotate(-1.6deg)}}
@keyframes bob{from{transform:translateY(-3px) rotate(-1.6deg)}
                 to{transform:translateY(3px)  rotate(1.6deg)}}

/* --- 海 --- */
.scene-sea{position:absolute;left:0;right:0;bottom:0;height:38vh;
  transform:translateY(var(--sea-y));will-change:transform}
/* 波は左右に揺らすので、少し大きめに描いて端に隙間ができないようにする */
.scene-sea svg{width:108%;height:100%;margin-left:-4%}
.wave-back{fill:#7ba5ad;opacity:.55;animation:swell 9s ease-in-out infinite alternate}
.wf-1{stop-color:var(--wave-1,#66889a)}
.wf-2{stop-color:var(--wave-2,#4b6f80)}
.wf-3{stop-color:var(--wave-3,#33566a)}
.wave-front{fill:url(#wf);opacity:.94;animation:swell 6.5s ease-in-out infinite alternate-reverse}
.wave-crest{fill:none;stroke:var(--wave-crest,rgba(255,255,255,.34));stroke-width:2.5;
  animation:swell 6.5s ease-in-out infinite alternate-reverse}
@keyframes swell{from{transform:translate(-2%,6px)}to{transform:translate(2%,-6px)}}

@media (prefers-reduced-motion:reduce){
  .cloud,.rocket-flame,.wave-back,.wave-front,.wave-crest,.glint,.streak,.rocket-reflection .refl,
  .scene-rocket.landed .rocket-inner{animation:none}
  .spray{display:none}
  body{transition:none}
}

/* スマホでは重い処理を減らす */
@media (max-width:768px){
  .scene-earth{width:250vw;height:250vw}
  .cloud-far{filter:blur(8px)}
  .cloud-mid{filter:blur(5px)}
  .cloud-near{filter:blur(2px)}
  .scene::after{display:none}                 /* 粒状感は小さい画面では効かない */
  .spray i:nth-child(n+7){display:none}       /* 飛沫は6個まで */
  .rocket-reflection .r3{display:none}        /* 映り込みは2段まで */
  .g4,.g5,.g6,.s3{display:none}
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
/* スクロールすると、背後の本文が透けないように下敷きを敷く */
.site-header.scrolled{border-bottom-color:var(--rule-soft);background:var(--scrim);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-header .container{width:100%;max-width:100%;
  padding-left:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:78px;transition:height .3s}
.site-header.scrolled .header-inner{height:62px}
.brand{display:flex;align-items:center;gap:10px;flex:none;
  font-family:var(--mincho);font-size:1.06rem;letter-spacing:.16em}
.brand-logo{height:34px;width:auto;transition:height .3s}
.site-header.scrolled .brand-logo{height:28px}
.header-right{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}

/* 2事業の切り替えタブ — 塗らず、下の細い金の線だけで現在地を示す */
.tab-switch{display:flex;gap:2px}
.tab{padding:7px 14px;font-size:.83rem;letter-spacing:.06em;color:var(--ink-faint);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink);border-bottom-color:var(--mark)}

.site-nav{display:flex;gap:clamp(14px,1.8vw,26px)}
.site-nav a{position:relative;font-size:.83rem;letter-spacing:.06em;color:var(--ink-faint);
  padding:4px 0;transition:color .2s}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--mark);transition:width .25s}
.site-nav a:hover{color:var(--ink)}
.site-nav a:hover::after{width:100%}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{width:22px;height:1.5px;background:var(--ink);transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-nav{display:none;flex-direction:column;background:var(--scrim);
  border-bottom:1px solid var(--rule-soft)}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:15px 24px;border-top:1px solid var(--rule-soft);color:var(--ink-soft);font-size:.9rem}
.mobile-nav .mobile-tab{font-family:var(--mincho);color:var(--ink)}
.mobile-nav .mobile-tab.is-active{box-shadow:inset 3px 0 0 var(--mark)}

/* ==========================================================================
   セクションの骨格 — 縦書きの見出し ｜ 1px の罫線 ｜ 横組みの本文
   ========================================================================== */
.section{padding:clamp(58px,8.5vh,104px) 0;position:relative}
.section>.container{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:min-content 1fr;
  column-gap:clamp(20px,2.6vw,38px);
}
.section-subtitle{grid-column:2;grid-row:1}
.section-body{grid-column:2;grid-row:2}

.section-head{
  grid-column:1;grid-row:1 / 3;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
  padding-right:clamp(16px,2.1vw,30px);
  background:linear-gradient(180deg,transparent,var(--rule) 9%,var(--rule) 91%,transparent)
             right/1px 100% no-repeat;
}
.section-title{
  font-family:var(--mincho);font-weight:500;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:clamp(1.12rem,1.55vw,1.36rem);
  letter-spacing:.22em;line-height:2.05;
  max-height:24em;              /* 長い見出しはここで2行に折り返す */
}
.section-subtitle{margin-bottom:26px;color:var(--ink-soft);font-size:.86rem;letter-spacing:.05em}
.section-body{min-width:0}

/* ==========================================================================
   ボタン — 面で塗らず、四角い印＋下線のテキストリンクにする
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:11px;
  font-size:.88rem;letter-spacing:.06em;
  padding-bottom:9px;border-bottom:1px solid var(--rule);
  transition:border-color .2s,color .2s}
.btn::before{content:"";flex:none;width:7px;height:7px;background:var(--rule);transition:background .2s}
.btn:hover{border-bottom-color:var(--ink)}
.btn-primary{color:var(--ink);border-bottom-color:var(--ink-faint)}
.btn-primary::before{background:var(--mark)}
.btn-ghost,.btn-light{color:var(--ink-soft)}
.btn:hover::before{background:var(--mark)}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.hero{position:relative;padding:clamp(96px,15vh,150px) 0 clamp(80px,12vh,120px)}
.hero-inner{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(22px,3vw,44px);align-items:center;
}
.hero-body{grid-column:2;grid-row:1}
.hero-title{
  grid-column:1;grid-row:1;align-self:center;
  font-family:var(--mincho);font-weight:500;
  writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;
  font-size:clamp(1.4rem,2.5vw,1.85rem);letter-spacing:.26em;line-height:2.1;
  padding-right:clamp(18px,2.4vw,34px);
  background:linear-gradient(180deg,transparent,var(--rule) 8%,var(--rule) 92%,transparent)
             right/1px 100% no-repeat;
}
.hero-badge{display:block;margin-bottom:20px;font-family:var(--mincho);
  font-size:.76rem;letter-spacing:.3em;color:var(--ink-faint)}
.hero-subtitle{font-size:.9rem;line-height:2.15;color:var(--ink-soft)}
.hero-actions{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.hero-actions .btn{width:100%;max-width:270px;justify-content:flex-start}
.scroll-hint{display:block;margin-top:44px;font-family:var(--mincho);
  font-size:.68rem;letter-spacing:.34em;color:var(--ink-faint)}
.scroll-hint::after{content:"";display:block;width:1px;height:34px;margin-top:12px;
  background:linear-gradient(180deg,var(--rule),transparent)}

/* ==========================================================================
   一覧系（理念 / できること / 実績 / 施術の流れ / メニュー）
   すべて「髪の毛のような罫線で区切った行」に統一する
   ========================================================================== */
.feature-icon,.service-icon{display:none}   /* 記号アイコンは使わない */

.feature-grid,.service-grid,.works-grid,.step-list,.menu-list{
  display:flex;flex-direction:column;list-style:none}
.feature-item,.service-card,.work-card,.step-item,.menu-item{
  padding:19px 0;border-top:1px solid var(--rule-soft);
  background:none;border-radius:0;box-shadow:none}
.feature-item:first-child,.service-card:first-child,.work-card:first-child,
.step-item:first-child,.menu-item:first-child{border-top-color:var(--rule)}
.feature-grid,.service-grid,.works-grid,.step-list,.menu-list{
  border-bottom:1px solid var(--rule)}

.feature-item h3,.service-card h3,.work-body h3,.step-body h3,.menu-main h3{
  font-family:var(--mincho);font-weight:700;font-size:1rem;letter-spacing:.08em;
  margin-bottom:5px;color:var(--ink)}
.feature-item p,.service-card>p,.work-body p,.step-body p,.menu-main p{
  color:var(--ink-soft);font-size:.83rem;line-height:2.05}

.service-points{list-style:none;margin-top:11px;display:flex;flex-wrap:wrap;gap:6px 18px}
.service-points li{position:relative;padding-left:13px;font-size:.78rem;color:var(--ink-faint)}
.service-points li::before{content:"";position:absolute;left:0;top:.72em;
  width:5px;height:5px;background:var(--mark);opacity:.8}

/* 実績：サムネイルは右端に置く。画像が無い行があっても見出しの左端が揃う。 */
.work-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:start;color:inherit}
.work-body{grid-column:1;grid-row:1}
.work-thumb{grid-column:2;grid-row:1;
  width:104px;aspect-ratio:1;background-size:cover;background-position:center;
  border:1px solid var(--rule-soft)}
.work-thumb-empty{display:none}
.work-tag{display:block;margin-bottom:7px;font-family:var(--mincho);
  font-size:.7rem;letter-spacing:.2em;color:var(--mark-deep)}

/* 施術の流れ：明朝の数字を左に置く */
.step-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:baseline}
.step-num{font-family:var(--mincho);font-size:.8rem;letter-spacing:.1em;color:var(--mark-deep);
  width:1.4em;text-align:right}

/* メニュー：右端に時間と料金 */
.menu-item{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.menu-meta{flex:none;display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.menu-duration{font-size:.75rem;color:var(--ink-faint);letter-spacing:.08em}
.menu-price{font-family:var(--mincho);font-size:1.05rem;letter-spacing:.06em;color:var(--ink)}
.menu-note{margin-top:20px;font-size:.78rem;line-height:2;color:var(--ink-faint)}

/* ==========================================================================
   はじめまして / 本文
   ========================================================================== */
.about-inner{display:grid;grid-template-columns:1fr;gap:26px}
.about:has(.about-media) .about-inner{grid-template-columns:200px minmax(0,1fr);align-items:start}
.about-media img{width:100%;object-fit:cover;border:1px solid var(--rule-soft)}
.about-text p,.richtext-inner p{color:var(--ink-soft);font-size:.87rem;line-height:2.15;margin-bottom:15px}
.about-text p:last-child,.richtext-inner p:last-child{margin-bottom:0}
.about-text .section-title{writing-mode:horizontal-tb;font-size:1.05rem;letter-spacing:.1em;margin-bottom:14px}

/* ==========================================================================
   サロン情報
   ========================================================================== */
.info-inner{display:grid;grid-template-columns:1fr;gap:28px}
.info-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 22px}
.info-list dt{padding:13px 0;font-family:var(--mincho);font-size:.78rem;letter-spacing:.16em;
  color:var(--ink-faint);border-top:1px solid var(--rule-soft);white-space:nowrap}
.info-list dd{padding:13px 0;color:var(--ink-soft);font-size:.85rem;border-top:1px solid var(--rule-soft)}
.info-list dt:first-of-type,.info-list dd:first-of-type{border-top-color:var(--rule)}
.info-map{position:relative;aspect-ratio:4/3;border:1px solid var(--rule-soft)}
.info-map iframe{width:100%;height:100%;border:0;display:block}
.info-map-link{position:absolute;right:0;bottom:-30px;font-size:.76rem;letter-spacing:.06em;
  color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:3px}
.info-map-link:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ==========================================================================
   CTA / お問い合わせ
   ========================================================================== */
.cta-inner h2{font-family:var(--mincho);font-weight:500;
  font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:.14em;line-height:1.95;margin-bottom:16px}
.cta-inner p{color:var(--ink-soft);font-size:.86rem;line-height:2.15;margin-bottom:28px}
.cta-inner .btn{max-width:270px}

.contact-form{position:relative;display:flex;flex-direction:column;gap:20px}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form label{display:flex;flex-direction:column;gap:8px;
  font-size:.78rem;letter-spacing:.1em;color:var(--ink-soft)}
.contact-form .form-label{display:inline-flex;align-items:baseline;font-family:var(--mincho)}
.contact-form input,.contact-form textarea{
  padding:11px 12px;border:0;border-bottom:1px solid var(--rule);background:var(--field);
  font-family:inherit;font-size:.9rem;color:var(--ink);width:100%;
  transition:border-color .15s,background .15s}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-bottom-color:var(--mark)}
.contact-form textarea{resize:vertical;line-height:1.9}
.contact-form .req{font-size:.66rem;color:var(--mark-deep);letter-spacing:.1em;margin-left:8px}
.contact-form .form-foot{margin-top:6px}
.contact-form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .form-status{font-size:.85rem;min-height:1.2em}
.contact-form .form-status.ok{color:#2f6f4f}
.contact-form .form-status.err{color:#a33b30}
.contact-form.sent>label,.contact-form.sent .form-row,.contact-form.sent .form-foot{display:none}
.contact-form button.btn{background:none;border:0;border-bottom:1px solid var(--ink-faint);
  cursor:pointer;font-family:inherit;color:var(--ink)}

/* ==========================================================================
   フッター / 進捗バー
   ========================================================================== */
.site-footer{padding:44px 0 56px}
.site-footer p{color:var(--ink-faint);font-size:.76rem;letter-spacing:.16em;
  font-family:var(--mincho);text-align:right}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:var(--mark);transition:width .1s linear}

/* ==========================================================================
   背景画像を指定したセクション
   ========================================================================== */
.has-bg{position:relative;overflow:hidden;background:transparent}
.bg-slides,.bg-overlay{position:absolute;inset:0;z-index:0}
.bg-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease}
.bg-slide.is-active{opacity:1}
.bg-overlay{z-index:1}
.has-bg>.container,.has-bg>.hero-inner{position:relative;z-index:2}
.text-light{--ink:#f3f0e8;--ink-soft:rgba(243,240,232,.8);--ink-faint:rgba(243,240,232,.6);
  --rule:rgba(243,240,232,.28);--rule-soft:rgba(243,240,232,.16)}

/* ==========================================================================
   スクロールで出現
   ========================================================================== */
.section .section-head,.section .section-subtitle,.section .feature-item,.section .service-card,
.section .work-card,.section .step-item,.section .menu-item,.section .info-list,.section .info-map,
.section .about-media,.section .about-text,.section .cta-inner,.section .contact-inner,
.section .contact-form,.section .richtext-inner{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}
.section.in .section-head,.section.in .section-subtitle,.section.in .feature-item,
.section.in .service-card,.section.in .work-card,.section.in .step-item,.section.in .menu-item,
.section.in .info-list,.section.in .info-map,.section.in .about-media,.section.in .about-text,
.section.in .cta-inner,.section.in .contact-inner,.section.in .contact-form,
.section.in .richtext-inner{opacity:1;transform:none}
.section.in :is(.feature-item,.service-card,.work-card,.step-item,.menu-item):nth-child(2){transition-delay:.07s}
.section.in :is(.feature-item,.service-card,.work-card,.step-item,.menu-item):nth-child(3){transition-delay:.14s}
.section.in :is(.service-card,.step-item,.menu-item):nth-child(4){transition-delay:.21s}
.hero-inner.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.hero-inner.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .section [class],.hero-inner{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   レスポンシブ
   狭い画面では縦書きをやめ、横組みの見出し＋全幅の1列に切り替える。
   ========================================================================== */
@media (max-width:1000px){
  :root{--rail:100%}
  .container{padding-left:clamp(20px,4vw,32px);padding-right:clamp(20px,4vw,32px)}
  .site-nav{display:none}
  .nav-toggle{display:flex}
}
@media (max-width:900px){
  .section>.container,.hero-inner{display:block}
  .section-body,.hero-body{min-width:0}
  .section-head{display:block;background:none;padding:0 0 14px;margin-bottom:22px;
    border-bottom:1px solid var(--rule)}
  .section-title{writing-mode:horizontal-tb;max-height:none;
    font-size:1.22rem;letter-spacing:.12em;line-height:1.75}
  .hero-title{writing-mode:horizontal-tb;white-space:normal;background:none;padding:0 0 22px;
    font-size:clamp(1.5rem,6vw,2rem);letter-spacing:.1em;line-height:1.85}
  .about:has(.about-media) .about-inner{grid-template-columns:1fr}
  .about-media{max-width:220px}
  .tab-switch{display:none}   /* タブはハンバーガーメニューの中に出す */
  .header-inner{height:64px;gap:12px}
  /* 背景を上半分に残したいので、スクリムは下から立ち上げる。
     最下部（着水する海）はまた薄くして、ロケットが見えるようにする。 */
  /* 狭い画面では下敷きが縦方向になるため、着水するロケットまで覆ってしまう。
     ロケットが降りてくる左下だけ、下敷きに柔らかい穴を開けて素の水面を見せる。
     文字はこの位置にはほとんど来ない。 */
  .rail-scrim{background:linear-gradient(180deg,
    transparent 0%,var(--scrim) 24%,var(--scrim) 80%,transparent 100%)}
  .scene.at-sea .rail-scrim{
    -webkit-mask:radial-gradient(150px 190px at 26% 88%,
      transparent 0%,transparent 42%,#000 100%);
            mask:radial-gradient(150px 190px at 26% 88%,
      transparent 0%,transparent 42%,#000 100%);
  }
}
@media (max-width:560px){
  .contact-form .form-row{grid-template-columns:1fr}
  .work-card{grid-template-columns:1fr}
  .work-thumb{grid-column:1;grid-row:2;width:100%;max-width:200px;margin-top:14px}
  .menu-item{flex-direction:column;gap:8px}
  .menu-meta{text-align:left;flex-direction:row;align-items:baseline;gap:14px}
  .info-list{grid-template-columns:1fr;gap:0}
  .info-list dd{border-top:none;padding-top:0}
  .info-list dt{padding-bottom:4px}
  .hero-actions .btn,.cta-inner .btn{max-width:100%}
}


/* ==========================================================================
   動画：トップのイントロ（案1）／セクション区切りの帯（案2）
   ========================================================================== */
.intro{position:fixed;inset:0;z-index:200;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--intro-bg,#000206);cursor:pointer;
  transition:opacity 1.1s ease,visibility 1.1s step-end;
  /* JS が動かなかったときの保険：14秒で必ず消える */
  animation:intro-failsafe .01s 14s forwards}
.intro.is-out{opacity:0;visibility:hidden;pointer-events:none}
.intro-video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.intro.is-playing .intro-video{opacity:1}
/* 縦長の画面では、多面体が収まる大きさにする（cover だと左右が大きく切れる） */
@media (max-aspect-ratio:1/1){
  .intro-video{flex:0 0 auto;width:min(190vw,170vh);height:auto;max-width:none;object-fit:contain}
}
.intro-skip{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(18px,4vh,40px);
  padding:8px 2px;background:none;border:0;border-bottom:1px solid rgba(246,242,232,.32);
  color:rgba(246,242,232,.7);font:inherit;font-size:12px;letter-spacing:.26em;cursor:pointer}
.intro-skip:hover,.intro-skip:focus-visible{color:#f6f2e8;border-color:var(--mark,#c9a24a);outline:none}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
/* 景色の映像（カイロのイントロなど）は、縦長の画面でも画面いっぱいに出す */
@media (max-aspect-ratio:1/1){
  .intro--cover .intro-video{flex:1 1 auto;width:100%;height:100%;object-fit:cover}
}
.no-intro .intro{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* 区切りの帯。右のレールを抜けて全幅。上下は背景に溶かして「区切り」に見せる */
.video-band{position:relative;margin:clamp(24px,6vh,72px) 0;overflow:hidden;
  aspect-ratio:21/10;max-height:82vh;background:#07101f;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.video-band__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-band__caption{position:absolute;left:0;right:0;bottom:14%;text-align:center;margin:0;
  font-family:var(--mincho);color:#f6f2e8;letter-spacing:.24em;font-size:clamp(15px,1.6vw,22px);
  text-shadow:0 1px 18px rgba(0,0,0,.55)}
@media (max-width:760px){.video-band{aspect-ratio:16/10}}


/* ==========================================================================
   宇宙（トップページ：body.page-cosmos）
   イントロ（光の一点 → 金の線 → 多面体）と区切りの動画（星と星を結ぶ星座）と同じ世界にそろえる。
   ・深い紺の宇宙。金は「線」と「小さな印」だけに使う（面では塗らない）
   ・ヒーローには、イントロの最後のコマの多面体がそのまま残り、左の軌道の輪の中心へ移って落ち着く
   ・スクロールに合わせて、画面の縁を回るように星座の線が引かれていく
   動きは assets/js/cosmos.js。
   ========================================================================== */
body.page-cosmos{
  --ink:#efe9da;
  --ink-soft:rgba(239,233,218,.74);
  --ink-faint:rgba(239,233,218,.52);
  --rule:rgba(239,233,218,.22);
  --rule-soft:rgba(239,233,218,.11);
  --field:rgba(239,233,218,.06);
  --scrim:rgba(2,5,12,.84);
  --mark-deep:#d9b56c;          /* 暗い地では濃い金が沈むので、明るい金に寄せる */
  --cs-gold:rgba(232,190,112,.55);
  --cs-gold-thin:rgba(232,190,112,.26);
  background:#01040a;
}

/* ---- 背景 ---- */
.scene-cosmos{background:#01040a}
.cs-nebula{position:absolute;inset:0;
  background:
    radial-gradient(48vmax 34vmax at 24% 44%,rgba(36,70,140,.30),transparent 70%),
    radial-gradient(40vmax 26vmax at 70% 78%,rgba(70,40,120,.18),transparent 72%),
    radial-gradient(36vmax 24vmax at 88% 12%,rgba(30,62,120,.20),transparent 70%)}
.cs-stars{position:absolute;left:0;top:-12vh;width:100%;height:124vh;display:block}
.cs-stars--far {transform:translate3d(0,calc(var(--p,0) * -4vh),0)}
.cs-stars--near{transform:translate3d(0,calc(var(--p,0) * -11vh),0)}
.cs-twinkles i{position:absolute;width:2px;height:2px;border-radius:50%;background:#f6f2e8;
  box-shadow:0 0 6px 1px rgba(246,242,232,.55);opacity:.15;
  animation:cs-twinkle 4.2s ease-in-out infinite alternate}
.cs-twinkles i:nth-child(3n){background:#ffd9a6;box-shadow:0 0 6px 1px rgba(255,200,130,.5);animation-duration:5.6s}
.cs-twinkles i:nth-child(4n){animation-duration:3.4s}
@keyframes cs-twinkle{from{opacity:.12}to{opacity:.9}}

.cs-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cs-orbit,.cs-line{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:1 1;stroke-dashoffset:0}
.cs-orbit{stroke:var(--cs-gold-thin)}
.cs-line{stroke:var(--cs-gold)}
.cs-lines.is-ready :is(.cs-orbit,.cs-line){stroke-dashoffset:1}   /* JS が動いたときだけ「未描画」から始める */
.cs-satellite{fill:#ffd99a;transform-box:view-box;transform-origin:330px 430px;
  animation:cs-orbit 70s linear infinite;filter:drop-shadow(0 0 4px rgba(255,200,120,.9))}
@keyframes cs-orbit{to{transform:rotate(360deg)}}
.cs-star__core{fill:#fff3dc}
.cs-star__glow{fill:rgba(255,206,130,.22)}
.cs-lines.is-ready .cs-star{opacity:.18;transition:opacity .9s ease}
.cs-lines.is-ready .cs-star.is-on{opacity:1}
.cs-vignette{position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 40%,rgba(1,4,10,.5) 70%,rgba(1,4,10,.55) 100%),
    radial-gradient(140% 110% at 35% 45%,transparent 55%,rgba(0,2,6,.75) 100%)}

/* ---- ヒーローの多面体 ----
   イントロの動画と同じ大きさ・同じ位置から始まり、イントロが溶けきってから輪の中心へ移る。
   黒い余白は screen で抜く（宇宙の地に光だけが残る）。 */
.hero-orb{position:absolute;left:0;top:0;width:100%;height:100vh;overflow:hidden;
  pointer-events:none}   /* z-index を付けると重なりの層が分かれ、screen が背景に効かなくなる */
.hero-orb img{position:absolute;max-width:none;
  left:var(--orb-x,24vw);top:var(--orb-y,48vh);width:var(--orb-size,min(48vh,34vw));height:auto;
  transform:translate(-50%,-50%);mix-blend-mode:screen;
  transition:left 1.5s cubic-bezier(.6,.05,.25,1) .9s,top 1.5s cubic-bezier(.6,.05,.25,1) .9s,
             width 1.5s cubic-bezier(.6,.05,.25,1) .9s,opacity 1.5s ease .9s;
  animation:orb-breathe 5.5s ease-in-out infinite alternate}
@keyframes orb-breathe{from{filter:brightness(.9)}to{filter:brightness(1.1)}}
/* イントロが流れている間：動画の多面体とぴったり重なる位置（object-fit:cover と同じ計算） */
html:not(.intro-done):not(.no-intro) .hero-orb img{left:50%;top:50%;width:max(56.25vw,100vh)}
@media (max-aspect-ratio:1/1){
  html:not(.intro-done):not(.no-intro) .hero-orb img{width:min(106.9vw,95.6vh)}
}

/* ヒーローの文字は、多面体が落ち着いてから出す */
html:not(.intro-done):not(.no-intro) body.page-cosmos .hero-inner{opacity:0;transform:translateY(20px);
  animation:hero-failsafe .01s 13s forwards}   /* JS が動かなかったときの保険 */
@keyframes hero-failsafe{to{opacity:1;transform:none}}
html.intro-done body.page-cosmos .hero-inner.reveal{transition-delay:1.9s}
body.page-cosmos .hero{min-height:100vh;display:flex;align-items:center}
body.page-cosmos .hero>.container{width:min(100%,var(--rail))}

/* ---- 見出しに通し番号（星表の番号のように） ---- */
body.page-cosmos main{counter-reset:cs}
body.page-cosmos .section-head{flex-direction:column;gap:16px}
body.page-cosmos .section-head::before{counter-increment:cs;content:counter(cs,decimal-leading-zero);
  font-family:var(--mincho);font-size:.72rem;letter-spacing:.2em;color:var(--mark);line-height:1}

/* ---- 行の頭に、金の短い線と星（線の端の印） ---- */
body.page-cosmos :is(.feature-item,.service-card,.work-card,.step-item){position:relative}
body.page-cosmos :is(.feature-item,.service-card,.work-card,.step-item)::after{
  content:"";position:absolute;left:0;top:-1px;width:22px;height:1px;
  background:linear-gradient(90deg,var(--mark),rgba(201,162,74,0))}
body.page-cosmos :is(.feature-item,.service-card,.work-card,.step-item)::before{
  content:"";position:absolute;left:-2px;top:-3px;width:5px;height:5px;border-radius:50%;
  background:#ffe6b8;box-shadow:0 0 6px 1px rgba(255,200,120,.65)}

body.page-cosmos .contact-form .form-status.ok{color:#9fd8b4}
body.page-cosmos .contact-form .form-status.err{color:#f2a596}

/* ---- 区切りの帯：動画の地と同じ色にして、上下を宇宙に溶かす ---- */
body.page-cosmos .video-band{background:#000206}

@media (max-width:900px){
  /* 狭い画面：多面体は右下に大きく薄く置き、文字の邪魔をしない */
  .hero-orb img{left:84vw;top:93vh;width:min(88vw,60vh);opacity:.36}
  html:not(.intro-done):not(.no-intro) .hero-orb img{opacity:1}
  .cs-vignette{background:
    linear-gradient(180deg,rgba(1,4,10,.15),rgba(1,4,10,.5)),
    radial-gradient(140% 110% at 35% 45%,transparent 55%,rgba(0,2,6,.75) 100%)}
  body.page-cosmos .hero{min-height:calc(100vh - 64px)}
  body.page-cosmos{--cs-gold:rgba(232,190,112,.34)}   /* 文字の後ろを通るので控えめに */
  body.page-cosmos .section-head{display:flex;flex-direction:row;align-items:baseline;
    justify-content:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .hero-orb img{transition:none;animation:none}
  .cs-stars{transform:none}
  .cs-twinkles i,.cs-satellite{animation:none}
}