/* ============================================================
   動きの言語（REQ-motion-2026-10）。動かす・隠す規則は、すべて html.mo の下に置く。
   mo は motion.js が full・lite のときだけ付ける。JS が動かない・OS の「視差効果を減らす」・停止ボタン・?static では
   mo が無く、ここは何も隠さない（テストで止めるときも .mo を外すだけ）。
   進行度の使い方: html.mo .scene i { animation: bloom 1s linear both; animation-play-state: paused; animation-delay: calc(var(--p) * -1s); }
   （--p は data-mo-scrub の章、--v は data-mo-view の要素にエンジンが書く 0〜1）
   ============================================================ */
:root {
  --mo-out: cubic-bezier(.16, 1, .3, 1);        /* 既定。出て、ぴたっと止まる */
  --mo-inout: cubic-bezier(.65, 0, .35, 1);     /* 位置の入れ替え・往復 */
  --mo-bloom: cubic-bezier(.34, 1.35, .64, 1);  /* 咲く。わずかに行き過ぎて戻る（効かせどころだけ） */
  --mo-t-micro: .24s; --mo-t-ui: .48s; --mo-t-reveal: .9s; --mo-t-hero: 1.4s;
  --mo-stagger-phrase: 100ms; --mo-stagger-char: 36ms; --mo-stagger-card: 100ms;
  --mo-float-y: 28px; --mo-float-t: 1.3s; --mo-float-fade: 1s;
  --mo-float-ease: cubic-bezier(.22,1,.36,1); --mo-float-stagger: 100ms;
}

/* ---------- 出現 ----------
   translate は傾き・ホバーの transform と重ねる。旧 clip・petal も同じ浮き上がり。 */
html.mo :is(.reveal, [data-mo-reveal]) { opacity: 0; translate: 0 var(--mo-float-y);
  transition: opacity var(--mo-float-fade) var(--mo-float-ease), translate var(--mo-float-t) var(--mo-float-ease), scale var(--mo-float-t) var(--mo-float-ease); }
html.mo :is(.reveal, [data-mo-reveal]).mo-in { opacity: 1; translate: none; scale: none; }
html.mo [data-mo-reveal="fade"] { translate: none; }
html.mo :is([data-mo-delay="1"], .reveal[data-d="1"]) { transition-delay: .1s; }
html.mo :is([data-mo-delay="2"], .reveal[data-d="2"]) { transition-delay: .2s; }
html.mo :is([data-mo-delay="3"], .reveal[data-d="3"]) { transition-delay: .3s; }
html.mo :is([data-mo-delay="4"], .reveal[data-d="4"]) { transition-delay: .4s; }
html.mo :is([data-mo-delay="5"], .reveal[data-d="5"]) { transition-delay: .5s; }
html.mo :is([data-mo-delay="6"], .reveal[data-d="6"]) { transition-delay: .6s; }
/* ホームの実績は1列で1件ずつ画面に入るので、横並び用のずらしは要らない。 */
html.mo #works .work-card.reveal { transition-delay: 0s; }
/* lite（データ節約・非力な端末）は透明度だけ。 */
html.mo-lite :is(.reveal, [data-mo-reveal], [data-mo-split] .mo-u):not(.mo-in) { translate: none; scale: none; }
/* 隠れたまま、キーボードのフォーカスが来た要素は待たせずに出す。 */
html.mo :is(.mo-now, .mo-now .mo-u) { transition: none !important; }

/* ---------- 文字の分割（data-mo-split="chars|phrases"） ----------
   単位の箱 .mo-w は折れない。折れる所は <wbr>・空白・和文の閉じの後ろと開きの前だけで、分割の前と同じ。
   .mo-u の --i は要素の中の通し番号。出現は、その要素（または出現の祖先）に .mo-in が付いたとき。 */
html.mo .mo-w { white-space: nowrap; }
/* 分割した要素は、分割前に実際に折れた所（エンジンが入れる br.mo-br）だけで折る。1文字ずつの箱は要素の境目
   （例 「</em>。」）にも折れ目を作り、text-wrap: balance がそこを使って行が変わるため。mo が無いときは br を消す。 */
html.mo .mo-lines { white-space: nowrap; }
.mo-br { display: none; }
html.mo .mo-br { display: inline; }
html.mo .mo-u { display: inline-block; transition: opacity 1s var(--mo-float-ease), translate 1.1s var(--mo-float-ease);
  transition-delay: min(calc(var(--i, 0) * var(--mo-float-stagger)), 600ms); }
html.mo [data-mo-split]:not(.mo-in) .mo-u { opacity: 0; translate: 0 20px; }
/* 分割する見出し自身は動かさず、文節だけを浮かせる（移動距離とずらしを二重にしない）。 */
html.mo [data-mo-split="phrases"][data-mo-reveal] { opacity: 1; translate: none; transition: none; }
html.mo-lite [data-mo-split]:not(.mo-in) .mo-u { translate: none; }

/* ---------- 流れる帯（data-mo-marquee="秒"） ----------
   中の .mo-marquee__track を、エンジンが帯の幅を埋めるだけ複製する（複製は aria-hidden）。全部が同じだけ左へ進むので継ぎ目が出ない。
   継ぎ目の間隔は、track の右の余白で、語の間隔とそろえる。 */
html.mo [data-mo-marquee] { display: flex; overflow: hidden; }
html.mo .mo-marquee__track { flex: none; animation: mo-marquee var(--mo-mq, 30s) linear infinite; }
@keyframes mo-marquee { to { transform: translateX(-100%); } }

/* ---------- ポインタ（細かいポインタ・full だけ。値はエンジンが書く） ---------- */
/* スポット光: --mx・--my は要素の左上からの位置。要素は position を持つこと（カードは relative）。::before を使う要素は要素側で描く。 */
html.mo [data-mo-spot] { isolation: isolate; }
html.mo [data-mo-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 169, 106, .18), transparent 70%); transition: opacity var(--mo-t-ui) var(--mo-out); }
html.mo [data-mo-spot]:hover::before { opacity: 1; }
/* 傾き（±6°まで）。will-change はホバーの間だけ。 */
html.mo [data-mo-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
html.mo [data-mo-tilt]:hover { will-change: transform; }
/* 磁石（±12px まで）。translate で寄せるので、ボタンのホバーの transform と重なる。出現の translate より後に効かせる。 */
html.mo [data-mo-magnet][data-mo-magnet] { translate: var(--tx, 0px) var(--ty, 0px); }
/* カーソル（data-mo-cursor があるページだけ）。リンク・ボタンの上で大きく、data-mo-cursor の上ではその文字を出す。 */
html.mo .mo-cursor { position: fixed; left: 0; top: 0; z-index: 9990; pointer-events: none; opacity: 0;
  transform: translate3d(var(--x, -99px), var(--y, -99px), 0); transition: opacity var(--mo-t-micro); }
html.mo .mo-cursor.is-on { opacity: 1; }
html.mo .mo-cursor__ring { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border: 1px solid var(--gold); border-radius: 50%;
  transition: scale var(--mo-t-ui) var(--mo-out), background-color var(--mo-t-ui), border-color var(--mo-t-ui); }
html.mo .mo-cursor__label { position: absolute; left: 0; top: 0; translate: -50% -50%; opacity: 0; transition: opacity var(--mo-t-micro);
  font-family: var(--f-caps); font-size: .62rem; letter-spacing: .24em; color: var(--paper); white-space: nowrap; }
html.mo .mo-cursor.is-link .mo-cursor__ring { scale: 1.5; }
html.mo .mo-cursor.is-label .mo-cursor__ring { scale: 2.4; border-color: transparent; background: rgba(22, 24, 26, .86); }
html.mo .mo-cursor.is-label .mo-cursor__label { opacity: 1; }

/* ---------- ヒーローの導入（R6・R15）: is-loaded から2.4秒以内 ----------
   合図 mo-hero-go・終わり mo-hero-done（2.6秒後）はエンジンが付ける。分割し直しは --mo-t で続きから。
   エンブレムは LCP なので隠さない。mo-pre は <head> の印（エンジンより先の描画で文字が一度見えるのを防ぐ。JS が止まっても4.8秒で見える）。 */
html.mo-pre .hero :is(.eyebrow, #hero-title, .hero__sub, .hero__cta > *, .hero__ring),
html.mo:not(.mo-lite):not(.mo-hero-go) .hero :is(.eyebrow, #hero-title .mo-u, .hero__sub, .hero__cta > *, .hero__ring),
html.mo-lite:not(.mo-hero-go) .hero__inner { opacity: 0; }
html.mo-pre .hero__emblem, html.mo:not(.mo-lite):not(.mo-hero-go) .hero__emblem { scale: .94; filter: brightness(.7); }
html.mo-pre .hero :is(.eyebrow, #hero-title, .hero__sub, .hero__cta > *, .hero__ring, .hero__emblem) { animation: mo-safe .4s var(--mo-out) 4.8s forwards; }
@keyframes mo-safe { to { opacity: 1; scale: none; filter: none; } }
/* 見出しは切り抜かず、18px 下から浮かせる。 */
html.mo #hero-title .mo-u { transition: none; opacity: 1; translate: none; }
html.mo:not(.mo-lite):not(.mo-hero-done) #hero-title { position: relative; }
html.mo.mo-hero-go:not(.mo-lite):not(.mo-hero-done) .hero__emblem { animation: mo-emblem .9s var(--mo-bloom) backwards; }
html.mo.mo-hero-go:not(.mo-lite):not(.mo-hero-done) .hero__ring circle { animation: mo-draw .9s var(--mo-inout) backwards; }
html.mo.mo-hero-go:not(.mo-lite):not(.mo-hero-done) #hero-title .mo-u {
  animation: mo-rise 1s var(--mo-float-ease) calc(200ms + min(var(--i, 0) * var(--mo-stagger-char), 600ms) - var(--mo-t, 0ms)) backwards; }
html.mo.mo-hero-go:not(.mo-lite):not(.mo-hero-done) #hero-title .en .mo-u { animation-name: mo-en; animation-delay: calc(700ms + min((var(--i, 0) - var(--mo-en-start, 0)) * var(--mo-stagger-char), 600ms) - var(--mo-t, 0ms)); }
html.mo.mo-hero-go:not(.mo-lite):not(.mo-hero-done) .hero .eyebrow { animation: mo-up 1.3s var(--mo-float-ease) .6s backwards; }
html.mo.mo-hero-go:not(.mo-lite):not(.mo-hero-done) .hero :is(.hero__sub, .hero__cta > *) { animation: mo-up 1.2s var(--mo-float-ease) .95s backwards; }
html.mo.mo-hero-go:not(.mo-lite):not(.mo-hero-done) .hero__cta > :nth-child(2) { animation-delay: 1.05s; }
/* 金の光が見出しの箱の中を一度だけ走る（screen: 白い文字は白のまま、間の夜だけがほのかに明るむ）。 */
html.mo.mo-hero-go:not(.mo-lite):not(.mo-hero-done) #hero-title::after { content: ""; position: absolute; left: 0; top: 0; width: 24%; height: 100%;
  pointer-events: none; background: radial-gradient(closest-side, rgba(222, 196, 143, .3), rgba(222, 196, 143, .08) 60%, transparent);
  mix-blend-mode: screen; translate: -105% 0; animation: mo-sheen .7s var(--mo-inout) .8s both; }
/* lite: 分割せず、透明度だけ。 */
html.mo-lite.mo-hero-go:not(.mo-hero-done) .hero__inner { animation: mo-fade .5s var(--mo-out) backwards; }
/* キーボードで先に届いたボタンは待たせない（隠しの :is() が #id の詳細度を持つので !important）。 */
html.mo .hero__cta > :focus-visible { animation: none !important; opacity: 1 !important; }
@keyframes mo-emblem { from { scale: .94; filter: brightness(.7); } }
@keyframes mo-draw { from { stroke-dashoffset: 1; } }
@keyframes mo-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes mo-en { from { opacity: 0; filter: blur(6px); translate: 0 18px; } }
@keyframes mo-up { from { opacity: 0; translate: 0 28px; } 77% { opacity: 1; } }
@keyframes mo-sheen { to { translate: 425% 0; } }
@keyframes mo-fade { from { opacity: 0; } }

/* ---------- オーロラ（R7）: 漂いは full だけ。画面の外（.mo-away）では止め、シェーダー（data-gl="on"）が浮かんだら消す ---------- */
html.mo:not(.mo-lite) .hero__aurora i { animation: mo-drift1 34s var(--mo-inout) infinite alternate; }
html.mo:not(.mo-lite) .hero__aurora i:nth-child(2) { animation-name: mo-drift2; animation-duration: 27s; }
html.mo:not(.mo-lite) .hero__aurora i:nth-child(3) { animation-name: mo-drift3; animation-duration: 40s; }
html.mo .hero.mo-away .hero__aurora i { animation-play-state: paused; }
html.mo .hero__gl { opacity: 0; transition: opacity 1.4s var(--mo-inout); }
html.mo .hero[data-gl="on"] .hero__gl { opacity: 1; }
html.mo .hero[data-gl="on"] .hero__aurora { opacity: 0; visibility: hidden; transition: opacity 1.4s var(--mo-inout), visibility 0s linear 1.4s; }
@keyframes mo-drift1 { to { translate: 16% 12%; scale: 1.16; } }
@keyframes mo-drift2 { to { translate: -14% 16%; scale: .88; } }
@keyframes mo-drift3 { to { translate: 8% -12%; scale: 1.12; } }

/* ---------- 夜明けの帯の合言葉: 帯が入る間に字間を開きながら少し大きくなり、--v 約.45 で今の見た目 ----------
   字の形は .mo-g（aria-hidden・::before の attr）が描き、本文は透明で残す（読み上げ・コピー・大きさ。strong に aria-label は付けられない）。 */
.mo-gx { position: relative; }
.mo-gt { color: transparent; text-shadow: none; }
.mo-g { position: absolute; inset: 0; }
.mo-g i { display: inline-block; font-style: normal; }
.mo-g i::before { content: attr(data-c); }
html.mo:not(.mo-lite) .mo-gx[data-mo-view] { --k: clamp(0, (var(--v, 1) - .06) * 2.6, 1); scale: calc(.86 + .14 * var(--k)); }
html.mo:not(.mo-lite) .mo-g i { translate: calc((var(--i) - (var(--n) - 1) / 2) * -.12em * (1 - var(--k))) 0; }

/* ---------- 停止ボタン（フッターの小さな文字リンクの並び。押すと「視差効果を減らす」と同じ静かな表示） ----------
   文字の行の高さは変えず、見えない当たり判定で押せる領域を44px以上にする。左のスイッチで状態を見せ、読み上げは aria-pressed。 */
.mo-toggle { position: relative; display: inline-flex; align-items: center; gap: .55em; white-space: nowrap; }
.mo-toggle::before { content: ""; flex: none; width: 24px; height: 14px; border: 1px solid currentColor; border-radius: 7px;
  background: radial-gradient(circle at 6px 50%, currentColor 3px, transparent 3.5px); }
.mo-toggle[aria-pressed="true"]::before { border-color: var(--lilac-d); background: radial-gradient(circle at 16px 50%, var(--paper) 3px, transparent 3.5px) var(--lilac-d); }
.mo-toggle:hover { color: var(--ink); }
.mo-toggle::after { content: ""; position: absolute; inset: -11px -6px; }
/* 止めたときは、ほかの続く動き（滑らかなスクロール・ヒーローの光の呼吸）も止める。OS の設定のときは styles.css が止める。 */
html:is([data-mo="reduced"], [data-mo="off"]) { scroll-behavior: auto; }
html:is([data-mo="reduced"], [data-mo="off"]) .hero__glow::before { animation: none; }

/* ---------- 章（T3） ---------- */
html.mo [data-mo-delay="1"] { --mo-order: 1; }
html.mo [data-mo-delay="2"] { --mo-order: 2; }
html.mo [data-mo-delay="3"] { --mo-order: 3; }
html.mo [data-mo-delay="4"] { --mo-order: 4; }
html.mo [data-mo-delay="5"] { --mo-order: 5; }
html.mo [data-mo-delay="6"] { --mo-order: 6; }
html.mo .eyebrow[data-mo-reveal]::before, html.mo .eyebrow[data-mo-reveal]::after { transform: scaleX(0); transform-origin: center; transition: transform var(--mo-t-reveal) var(--mo-out); }
html.mo .eyebrow[data-mo-reveal].mo-in::before, html.mo .eyebrow[data-mo-reveal].mo-in::after { transform: scaleX(1); }
html.mo:not(.mo-lite) #works .work-card__media > :is(img, video) { transform: translateY(calc((.5 - var(--v, .5)) * 24px)) scale(1.14); }
html.mo #services .service-row__cta .arrow { transform-origin: left; transition: transform var(--mo-t-micro) var(--mo-out); }
html.mo #services .service-row__cta:is(:hover, :focus-visible) .arrow { transform: scaleX(1.25); }
html.mo:not(.mo-lite) #pricing .mo-in .price-badge i { animation: mo-badge .7s var(--mo-inout) .2s both; }
@keyframes mo-badge { from { opacity: 0; transform: translateX(-100%); } 40% { opacity: 1; } to { opacity: 0; transform: translateX(100%); } }
html.mo-lite [data-mo-spot]::before { display: none; }
@media (hover: none), (pointer: coarse) {
  html.mo [data-mo-spot]::before { display: none; }
  html.mo [data-mo-tilt] { transform: none; }
}

/* ---------- 進め方の夜の舞台（T4・R8） ----------
   章を 200svh にして .scene__pin を固定（sticky）。固定の間、エンジンが #process に --p（0〜1）を書き、花・空・4段階は
   止めたアニメーションの delay に --p を渡して動かす（linear。緩急は値の配分）。620px 未満の低い画面は固定せず通常の並び（--dark: 0）。 */
.scene__sky, .scene__flower, .scene__dots { display: none; }
#process[data-dark] { --dark: 0; }
/* 暗い場面の上の章の目印（motion.js が付け外す） */
html .rail.is-on-dark .rail__no { color: #faf8f4db; }
html .rail.is-on-dark .is-current .rail__no { color: var(--gold-l); }
html .rail.is-on-dark .rail__label { color: var(--paper); }
html .rail.is-on-dark .rail__bloom { color: var(--lilac); }
@supports (height: 1svh) { /* svh が無い古い端末では、固定せず通常の並びのまま（4段階が隠れたままにならない） */
@media (min-height: 620px) {
  html.mo .scene__sky, html.mo .scene__flower, html.mo .scene__dots { display: block; }
  html.mo #process[data-dark] { --dark: 1; }
  html.mo #process { height: 200svh; padding: 0; }
  /* 紙色の帯から夜へ、段差なく */
  html.mo #process::before { content: ""; position: absolute; inset: -56px 0 auto; height: 56px; background: linear-gradient(rgba(11, 8, 18, 0), var(--scene-night)); }
  html.mo .scene__pin { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow-x: clip; color: var(--paper); }
  /* 空は夜 → 濃い紫 → 夜明けの重ね。透明度だけを動かす。下端は iOS のツールバー分（lvh−svh）伸ばす */
  html.mo .scene__sky { position: absolute; inset: 0; bottom: calc(100svh - 100lvh); z-index: -1; pointer-events: none;
    background: radial-gradient(70% 55% at 50% 40%, rgba(58, 44, 85, .38), transparent 72%), var(--scene-night); }
  html.mo .scene__sky i { position: absolute; inset: 0; }
  html.mo .scene__sky .scene__dusk { animation-name: mo-dusk; background: linear-gradient(180deg, var(--scene-night-2), #2a2044 52%, var(--scene-dusk)); }
  html.mo .scene__sky .scene__dawn { animation-name: mo-dawn;
    background: radial-gradient(130% 30% at 50% 106%, rgba(222, 196, 143, .5), rgba(173, 143, 198, .36) 50%, transparent 78%), linear-gradient(180deg, transparent 88%, var(--paper-2)); }
  /* 動くもの共通: 1s・linear・止める。位置は delay = (--d − --p) 秒（OS の1ms化を受けない）。名前は下で付ける */
  html.mo :is(.scene__sky i, .scene__flower svg, .process-step) { animation: 1s linear both paused; animation-duration: 1s !important; animation-delay: calc((var(--d, 0) - var(--p, 0)) * 1s); }

  /* 見出し → 花 → 4段階 → 目印（縦）。981px 以上は左に文字・右に花 */
  html.mo .scene__stage { height: 100%; padding-block: clamp(96px, 12svh, 116px) clamp(48px, 13svh, 120px); display: grid; align-content: center; grid-template: "head" auto "flower" minmax(132px, 1fr) "steps" auto "dots" auto / minmax(0, 1fr); }
  html.mo .scene__stage > .section__head { grid-area: head; margin: 0; }
  html.mo #process .display { color: var(--paper); }
  html.mo #process .eyebrow { color: var(--gold-l); }
  html.mo #process .lead { margin-top: .7rem; color: #faf8f4cc; }
  html.mo .scene__flower { grid-area: flower; position: relative; min-height: 0; margin-block: clamp(6px, 1.6svh, 18px); }
  html.mo .scene__flower svg, html.mo :is(.scene__outer, .scene__inner) { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  /* 花: 蕾（細く・重なる）から扇状に開いて満開へ。花びら（1枚ずつの svg の箱）は --a0 から --da だけ回る。内側の星は遅れて開く。
     SVG の中の要素を動かすと毎コマ SVG のレイアウトが起きるので、動かすのは箱ごと（html の transform と同じ扱い）。 */
  html.mo :is(.scene__outer, .scene__inner) svg { animation-name: mo-petal; }
  html.mo .scene__flower svg:nth-child(1) { --k: 1; }
  html.mo .scene__flower svg:nth-child(2) { --k: 2; }
  html.mo .scene__flower svg:nth-child(3) { --k: 3; }
  html.mo .scene__flower svg:nth-child(4) { --k: 4; }
  html.mo .scene__outer svg { --a0: calc((var(--k) - 2.5) * 9.4deg); --da: calc((var(--k) - 1) * 45deg - var(--a0)); }
  html.mo .scene__inner svg { --d: .06; --a0: calc((var(--k) - 2.5) * 6deg); --da: calc((var(--k) - 1) * 45deg + 22.5deg - var(--a0)); }
  html.mo .scene__outer ellipse { fill: url(#scene-petal); stroke: #ad8fc6; stroke-opacity: .55; stroke-width: 1.8; }
  html.mo .scene__inner ellipse { fill: url(#scene-petal-gold); stroke: #dec48f; stroke-opacity: .6; stroke-width: 1.5; }
  html.mo .scene__flower .scene__glow { animation-name: mo-glow; }
  html.mo .scene__flower .scene__heart { animation-name: mo-heart; }
  html.mo .scene__flower .scene__burst { animation-name: mo-burst; } /* 終わり: 中心から金の光の輪が広がる */
  html.mo-lite :is(.scene__inner, .scene__burst) { display: none; } /* lite は層を減らす */

  /* 4段階: 同じ場所に重ね、--p の四分の一ごとに1つだけ濃くする。入れ替え（出る → 入る）は境目の手前で終える */
  html.mo #process .process { grid-area: steps; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: clamp(14px, 3.6svh, 40px); }
  html.mo #process .process-step { grid-area: 1 / 1; display: grid; grid-template: "no h" auto "word word" auto "text text" auto / auto minmax(0, 1fr); align-items: baseline; align-content: start; column-gap: 14px;
    padding: 0; border: 0; animation-name: mo-step; --d: -.05; }
  html.mo #process .process-step:nth-child(2) { --d: .2; }
  html.mo #process .process-step:nth-child(3) { --d: .45; }
  html.mo #process .process-step:nth-child(4) { --d: .7; animation-name: mo-step-last; }
  html.mo #process .process-step::after, html.mo #process .process-step__bloom { display: none; }
  html.mo #process .process-step__body { display: contents; }
  html.mo #process .process-step__no { grid-area: no; font-size: clamp(1.9rem, 2.4vw + 1svh, 2.7rem); }
  html.mo #process .process-step h3 { grid-area: h; margin: 0; font-size: 1.05rem; color: var(--paper); }
  html.mo #process .process-step h3 .en { color: #cbb4df; }
  html.mo #process .process-step .process-step__word { grid-area: word; margin: .15rem 0 .5rem; font-size: clamp(1.9rem, 3.2vw + 1svh, 3.3rem); color: var(--paper); }
  html.mo #process .process-step__body > p:last-child { grid-area: text; margin: 0; max-width: 34em; font-size: clamp(.92rem, .5vw + .5svh + .5rem, 1.02rem); color: #faf8f4db; }

  /* 進行の目印: 通った区間だけ金が伸びる */
  html.mo .scene__stage > .scene__dots { grid-area: dots; display: flex; align-items: center; width: min(100%, 340px); margin-top: clamp(14px, 3.2svh, 30px); }
  html.mo .scene__dots i { position: relative; flex: 1 1 0; height: 1px; margin-right: 12px; background: #faf8f438; }
  html.mo .scene__dots i:nth-child(2) { --s: .25; }
  html.mo .scene__dots i:nth-child(3) { --s: .5; }
  html.mo .scene__dots i:nth-child(4) { --s: .75; margin-right: 0; }
  html.mo .scene__dots i::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(clamp(0, calc((var(--p, 0) - var(--s, 0)) * 4), 1)); }
  html.mo .scene__dots i::after { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; rotate: 45deg; background: var(--gold); opacity: clamp(.3, calc(.3 + (var(--p, 0) - var(--s, 0) + .02) * 30), 1); }
}
@media (min-height: 620px) and (max-width: 760px) { html.mo .scene__stage { padding-bottom: 100px; } } /* 固定ボタンの分 */
@media (min-height: 620px) and (max-height: 700px) and (max-width: 980px) {
  html.mo #process .lead { display: none; }
  html.mo .scene__stage { grid-template: "head" auto "flower" minmax(100px, 1fr) "steps" auto "dots" auto / minmax(0, 1fr); }
  html.mo #process .process-step__body > p:last-child { font-size: .9rem; }
}
@media (min-height: 620px) and (min-width: 981px) {
  html.mo .scene__stage { padding-block: clamp(96px, 12svh, 116px) clamp(28px, 7svh, 72px); column-gap: clamp(32px, 5vw, 72px);
    grid-template: ". flower" minmax(0, 1fr) "head flower" auto "steps flower" auto "dots flower" auto ". flower" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1.04fr); }
  html.mo .scene__flower { align-self: center; justify-self: center; width: min(112%, 80svh); aspect-ratio: 1; margin: 0; }
}
}
@keyframes mo-dusk { 0%, 8% { opacity: 0; } 44%, 100% { opacity: 1; } }
@keyframes mo-dawn { 0%, 48% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mo-petal {
  0% { transform: rotate(var(--a0)) scale(.29, .64); opacity: .36; }
  12% { transform: rotate(calc(var(--a0) + var(--da) * .03)) scale(.31, .66); opacity: .4; }
  30% { transform: rotate(calc(var(--a0) + var(--da) * .2)) scale(.43, .73); opacity: .56; }
  46% { transform: rotate(calc(var(--a0) + var(--da) * .52)) scale(.63, .8); opacity: .8; }
  62% { transform: rotate(calc(var(--a0) + var(--da) * .84)) scale(.87, .91); opacity: 1; }
  76% { transform: rotate(calc(var(--a0) + var(--da) * 1.03)) scale(1.04, 1.01); }
  88%, 100% { transform: rotate(calc(var(--a0) + var(--da))) scale(1, 1); opacity: 1; }
}
@keyframes mo-glow { 0%, 30% { opacity: 0; scale: .3; } 70% { opacity: .75; scale: .8; } 90% { opacity: 1; scale: 1; } 100% { opacity: .85; scale: 1.04; } }
@keyframes mo-heart { 0% { opacity: .3; scale: .5; } 50% { opacity: .55; scale: .8; } 84% { opacity: 1; scale: 1.25; } 100% { opacity: 1; scale: 1; } }
@keyframes mo-burst { 0%, 84% { opacity: 0; scale: .4; } 93% { opacity: .9; scale: 1.15; } 100% { opacity: .3; scale: 1.95; } }
@keyframes mo-step { 0% { opacity: 0; translate: 0 14px; } 4%, 21% { opacity: 1; translate: 0 0; } 25%, 100% { opacity: 0; translate: 0 -14px; } }
@keyframes mo-step-last { 0% { opacity: 0; translate: 0 14px; } 4%, 100% { opacity: 1; translate: 0 0; } }

/* T5: header and subpages. */
.mo-progress { display: none; }
html.mo .site-header { transition: transform var(--mo-t-ui) var(--mo-out); }
html.mo .site-header.mo-hidden { transform: translateY(-100%); }
html.mo .site-header:focus-within { transform: none; }
html.mo .mo-progress { display: block; position: absolute; inset: 0 0 auto; height: 2px; pointer-events: none; background: linear-gradient(90deg,var(--gold),var(--lilac)); transform-origin: left; transform: scaleX(var(--prog,0)); }
html.mo [data-mo-auto="reading"] [data-mo-reveal] { translate: none; transition-delay: 0s; }