@charset "UTF-8";
/* ==========================================================================
   案D：C案の構造 × B案の組版
   --------------------------------------------------------------------------
   第1幕（横移動）  縦スクロールが横移動になる。地名が通過し、距離計が動く
   転換             横が終わると計器が消え、紙の面が右から入り、軸が縦に戻る
   第2幕（縦）      紙の面と写真の面を交互に置いて、腰を据えて読ませる

   書体の配分（この案の要）
     セリフ（明朝＋Times） … 見出し・キャッチ・巨大地名・和文の地名・本文の大組み
     等幅（mono）          … 座標・距離・目盛り・年月・ラベル・番号
   人が書いた言葉はセリフ、機械が読み取った値は等幅、という分け方で通している。
   数値までセリフにすると tabular-nums が効かず桁が揺れて、計器の説得力が消える。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root{
  /* 書体。和欧混植は font-family の先頭に欧文を置くことで成立する
     （英数字は Times / Helvetica が拾い、和文はその後ろのヒラギノに落ちる） */
  --serif: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
           "Noto Serif JP", "Songti SC", serif;
  --sans:  "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
           "Noto Sans JP", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 文字の大きさ ── 大・中・小の3段しか持たない（ジャンプ率の設計）
       大  … ブロックごとに「版面 ÷ 1行の字数」から引いて決める。
              だからデスクトップ 64〜82px、モバイル 29〜49px と幅がある。
              宣言と区間の一文（計3つ）、入口の社名・第2幕の表紙・奥付の社名だけ
       中  … 1段だけ。サービス名2つと図版の一文
       小  … 9〜13px。計器・座標・番号・ラベル・キャプション・英文の添え
     大の極と小の極のあいだ（デスクトップ 14〜64px、モバイル 15〜28px）には、
     中の1段のほかに何も置かない。**この帯を空けることがジャンプ率そのもの**で、
     中くらいの文字を足すと即座に効き目が消える。足すなら大か小のどちらかに寄せる。

     ■ デスクトップだけ、版面いっぱいから引いてある。
       版面いっぱいの大きさは、腕の長さで見るモバイルでは正しく、1m近く離れて見る
       デスクトップでは過剰になる。画面幅に比例して文字まで拡大すると、
       写真より先に文字が目に入って面が読めなくなるため。
       モバイル側の指定（@media max-width:860px / 560px）は引いていない。
     ■ 大の極を下げたぶん、小の極も 14px から 13px へ一段引いてある
       （英文の添えと奥付の項目）。帯の広さ＝ジャンプ率を保つため。 */
  --fs-mid:   clamp(22px, 2.4vw, 34px);   /* 中。ここに入れてよいのは2種類だけ */
  --fs-en:    clamp(11px, .92vw, 13px);   /* 英文の添え（セリフのイタリック） */
  --fs-meter: 11px;                       /* 計器の値・ラベル・キャプション（モバイルは10px） */

  /* 入口の社名。1440px 幅で 76px、**1行**で流す。
     ここに載っていた宣言のコピー（旧 `.hero__jp`）と同じ大きさなので、
     実効サイズの種類は増えない（1段と入れ替わっただけ）。
     ※ 横長の画面に横長の映像が入る面なので、大きく組むと社名が画を覆う。
       モバイルは面の性格が違い、48.8px の2行組み（下の @media）。
     min(…, 19vh) は背の低い窓で入口の面から溢れないための蓋 */
  --fs-logo:  min(clamp(30px, 5.3vw, 76px), 19vh);

  /* 色。第1幕は暗い面＋計器のアンバー、第2幕は紙面。
     紙面側は4本のトークンで完結している（地色・文字色・文字色の素・アンバー）。
     地色を替えるときはこの4本を替えれば、罫線・ラベル・キャプション・
     図版の裾のグラデーション・メソッドの図の線までまとめて追従する。
     --ink-rgb / --paper-rgb は rgba() に濃度違いで差すための素。

     ■ 地色は青みのある白（#F7F9FB）で確定。
       5種を切り替える仮設UIは削除した（本番に持ち込まないもの）。
       文字色は地に合わせて同じだけ青へ寄せてある（#141a22）。
       地と文字の両方を同じ方向へ振らないと、白い地に黒だけが残って濁る。
       紙の上に一度だけ出るアンバーも、青白の地でくすまない濃さに取り直した。 */
  --paper:     #f7f9fb;
  --paper-rgb: 247,249,251;
  --ink:       #141a22;
  --ink-rgb:   20,26,34;
  --dark:      #08090b;
  --light:     #f4f2ee;
  --ink-dim:   rgba(244,242,238,.54);
  --ink-faint: rgba(244,242,238,.30);
  --line:      rgba(244,242,238,.16);
  --amber:     #ff6a2b;   /* 暗い面の計器 */
  --amber-ink: #b04618;   /* 紙の面に一度だけ出る同じ色（転換の矢印チップ） */

  /* 実測資料の初期値 */
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --t:     .36s;   /* 基本トランジション 0.3〜0.4秒 */
  --t-big: 1.1s;   /* 大きな動き 1.0〜1.9秒 */

  /* 第2幕の左右マージン（全セクション共通の1本） */
  --m: clamp(20px, 5.2vw, 92px);

  /* 第1幕の骨格 */
  --mast-h:  54px;   /* 社名の帯（fixed）が占める高さ */
  --gauge-h: 44px;
  --route-h: 58px;
  --top-h:   calc(var(--mast-h) + var(--gauge-h));
  --edge:    7vw;
  --panel-w: min(58vw, 880px);
  --leg-w:   26vw;
  --intro-w: 34vw;
  /* 一文の区間だけ広い。ただし広げすぎない。
     一文を中の段（34px）に落としたので、版面だけ大きいと字が真ん中に浮く。
     100vw にしないのは、両隣の写真の端を残すため */
  --line-w:  min(48vw, 660px);

  /* 表紙の文字ブロックを下辺からどれだけ離すか */
  --cover-baseline: clamp(22px, 3.6vw, 46px);
}

/* --------------------------------------------------------------------------
   2. 下地
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--dark); -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--dark);
  color:var(--light);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,p,dl,dd,dt,ol,li,figcaption{ margin:0; padding:0; font-weight:400; }
ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
/* ※ ここで max-width:100% を掛けないこと。
   第1幕の写真は 124%、帯は 260% に広げて視差の余白（オーバースキャン）を作っている。
   100% に丸めると動かした分だけ地の色が見えてしまう */
img,video{ display:block; }

/* 和文。palt で仮名を詰める。これが無いと大組みが間延びする */
.jp{ font-feature-settings:"palt" 1; }

/* 和文の中に混ざる欧文。サイズと字間を個別に持たせて重心を揃える */
.lat{
  font-family:var(--serif);
  font-size:.78em; letter-spacing:.06em; opacity:.55; margin-left:1.1em;
}

/* 索引・キャプション用の極小ラベル（等幅ではなくサンセリフ。刷り物の索引の顔） */
.label{
  font-family:var(--sans);
  font-size:var(--fs-meter); line-height:1.4;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(var(--ink-rgb),.55);
  white-space:nowrap;
}
.label--light{ color:rgba(241,239,234,.68); }

/* 計器の値。等幅・桁揃え */
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* 大の極。1440px 幅で 82px、375px 幅で 49px。
   7字の行が版面いっぱいに届く大きさはデスクトップで 148px だが、
   そこから引いてある（モバイルは版面いっぱいのまま）。
   行の字数を変えたら取り直すこと。
   置き場所は第2幕の表紙＝転換の面（.cover__display）の1箇所だけ */
.display{
  font-family:var(--serif);
  font-size:clamp(34px, 5.7vw, 82px);
  line-height:1.16; letter-spacing:.01em;
  font-feature-settings:"palt" 1;
}

.rule{
  height:1px; background:rgba(var(--ink-rgb),.3);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--t-big) var(--ease);
  transition-delay:var(--rule-delay, 0s);
}
.rule--light{ background:rgba(241,239,234,.32); }
.rule.is-in{ transform:scaleX(1); }

/* 出現の演出は2種類だけ。一度だけ動き、戻しては再生しない */
.ln{ display:block; overflow:hidden; }
.ln-i{
  display:block; transform:translateY(115%);
  transition:transform var(--t-big) var(--ease);
  transition-delay:calc(var(--i, 0) * .09s);
}
[data-reveal-line] .ln-i{ transform:translateY(115%); }
[data-reveal-line].is-in .ln-i{ transform:translateY(0); }

[data-reveal]{
  opacity:0; transform:translateY(8px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   3. 全編に出しっぱなしのもの
   -------------------------------------------------------------------------- */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:baseline; gap:1em;
  padding:clamp(17px,2.4vw,28px) var(--m);
  color:#fff; mix-blend-mode:difference;
  pointer-events:none;
  font-family:var(--sans); font-size:.6875rem;
  letter-spacing:.24em; text-transform:uppercase;
}
.masthead a{ pointer-events:auto; transition:opacity .22s var(--ease); }
/* 唯一のCTAなので、白波のような明るい画の上でも読める濃さを残す */
.masthead__meta{ opacity:.82; }
.masthead__meta:hover{ opacity:1; }

/* 本文の文字が真下を通り抜けるあいだだけ、天面の文字を引く。
   difference で重ねているので、文字と文字が重なると**両方が反転して
   どちらも読めなくなる**（実機で社名と写真のキャプションが潰れて重なった）。
   下地を敷いたり画を暗くしたりはしない。この面が difference だけで
   成立していること自体は変えず、ぶつかる瞬間だけ譲る。
   通過の判定は main.js の mastGuard が持つ（左右それぞれ独立に引く）。 */
.masthead a.is-veiled{ opacity:0; pointer-events:none; }

/* 読み進みの1本。第1幕は移動の進み、第2幕は読みの進み */
.progress{
  position:fixed; top:0; left:0; right:0; z-index:51;
  height:1px; background:rgba(255,255,255,.18);
  mix-blend-mode:difference; pointer-events:none;
}
.progress__i{
  display:block; height:100%; width:0;
  background:rgba(255,255,255,.9);
}

.noscript{
  position:fixed; inset:0; z-index:99; display:grid; place-content:center;
  text-align:center; line-height:2; font-size:13px; background:var(--dark);
}

/* ==========================================================================
   4. 第1幕 ── 横移動
   ========================================================================== */

/* 縦の尺を作る器。高さは main.js が実測から設定する */
.act1{ position:relative; background:var(--dark); }

/* 横移動しているあいだ画面に貼り付く面。
   ※ sticky はスタッキングコンテキストを作るので、この中の
     mix-blend-mode: difference はこの面の内側で完結する（狙いどおり） */
.act1__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:var(--dark);
}

.viewport{ position:absolute; inset:0; overflow:hidden; }

.track{
  position:absolute; top:0; left:0;
  height:100%;
  display:flex; align-items:center;
  padding-left:var(--edge);
  will-change:transform;
  backface-visibility:hidden;
}

/* --- パネル ---
   ※ .panel に transform / filter / opacity / will-change を付けないこと。
     スタッキングコンテキストが生まれ、この面に difference で重ねるものが
     パネルの内側で閉じてしまう（いまは面の中で difference を使っていないが、
     固定の社名がこの上を通るので条件は残っている） */
.panel{
  position:relative; flex:0 0 auto;
  width:var(--panel-w);
  height:calc(100% - var(--top-h) - var(--route-h) - 4vh);
  max-height:760px;
}

.panel__media{ position:absolute; inset:0; overflow:hidden; background:#101216; }
.panel__media img,
.panel__media video{
  position:absolute; top:50%; left:50%;
  width:124%; height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%);
  will-change:transform;
}
/* ログ収録素材（ソニー機）の眠さをCSS側で起こす。豪州のDJI素材は無補正 */
.panel__media[data-grade="log"] img,
.panel__media[data-grade="log"] video{ filter:contrast(1.26) saturate(1.34) brightness(.95); }

/* 映像は静止画の上にフェードインで重ねる（初期表示は静止画だけ）。
   ※ 映像は静止画と同じ層（スクリムより下）に置くこと。main.js は映像を
     scrim の**前**に差し込む（mountHeroVideo）。末尾に足すと映像が
     スクリムを覆い、再生が始まった瞬間に画だけが明るくなる。
     z-index で押さえないのは、.panel__media がスタッキングコンテキストでは
     ないため、ここで z を振ると .hero__body より手前にスクリムが出てしまうから */
.panel__media video{ opacity:0; transition:opacity .9s var(--ease); }
.panel__media video.is-on{ opacity:1; }

.panel__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,9,11,.74) 0%, rgba(8,9,11,.20) 44%, rgba(8,9,11,0) 72%);
}

/* 区切りの計器クラスタ。
   以前ここには巨大なセリフの地名が置いてあったが、それをやめた。
   番号・（変数名）・座標・撮影年月を、同じ大きさ・同じ書体で一列に並べる。
   ひとつの値だけを別格にしない、というのがこの行の決めごと。
   和文の変数名だけはセリフ＝人が書いた言葉、残りは等幅＝機械が読み取った値 */
.panel__meter{
  position:absolute; left:0; right:0; bottom:-2.4em;
  display:flex; gap:.35em 1.5em; align-items:baseline; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--fs-meter); letter-spacing:.1em;
  color:var(--ink-dim);
  will-change:transform;
}
/* 読ませる値（変数名の英字・座標）だけ濃度を上げる。大きさは全部同じ */
.panel__meter-v{ color:var(--light); font-variant-numeric:tabular-nums; }
.panel__meter-no i{ font-style:normal; opacity:.5; }
.panel__meter-jp{
  font-family:var(--serif); font-size:13px; letter-spacing:.2em;
  color:rgba(244,242,238,.92);
}

/* --- 動かした変数の名前（写真の中） ---
   以前この枠には巨大なセリフの地名が載っていた。枠だけを残し、中身を
   地名ではなく「動かした変数」に入れ替えてある。
   difference で写真に焼き付けるのは固定の社名と同じ扱いで、
   面ごと横に通過していく（視差は main.js が factor 38 で送る）。
   （名前をどこに出すかは3つの版を見比べたうえで、写真の中に置くこの形で確定。
     番号だけの版と、写真の外に置く版のコードは削除した）

   ■ 置くのは区切りの面だけ。
     入口には巨大なコピーがあり、そこで同じ大きさの語を出すと面の主役が2つになる。
     区切りの面はもともと写真と11pxしか無いので、この枠が空いている。
   ■ 大きさは入口のコピー（デスクトップ 76px）より一段下の 48px。
     同格にすると「コピーと変数名のどちらが主役か」が濁る。
     **この1段だけが中間帯に入る**（帯の中身は中の段と合わせて2つ）。
   ■ 英字がセリフで大きく、和文が小さく添う。旧地名と同じ組み方。
     和文は 13px（小の極の上端）に揃えてあるので、
     この枠が増やす文字サイズは英字の1つだけ。
   ※ .panel__media に transform / filter / will-change を足さないこと。
     スタッキングコンテキストが生まれると、この difference が面の内側で閉じる */
.panel__var{
  position:absolute; left:0; right:0; bottom:clamp(18px,2.6vw,34px);
  padding:0 clamp(18px,2.4vw,34px);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5em;
  color:#fff; mix-blend-mode:difference;
  pointer-events:none;
}
.panel__var-en{
  font-family:var(--serif);
  font-size:clamp(28px, 3.35vw, 48px);
  line-height:1.02; letter-spacing:.02em;
  white-space:nowrap;
}
.panel__var-jp{
  font-family:var(--serif);
  font-size:13px; letter-spacing:.22em;
}

/* --- 入口 --- */
.panel--hero{ width:min(78vw, 1180px); }
.panel--hero .panel__media{ background:#0b1016; }

.hero__body{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 clamp(20px,3.4vw,46px) var(--cover-baseline);
  will-change:transform;
}
/* 入口に置くのは社名だけ。
   宣言のコピー（動かせる変数は、必ずある。）は最初の区間へ降ろしてある。
   ■ セリフで組む。人が書いた言葉はセリフ、という書体の配分どおりで、
     欧文が主・和文が従という並べ方は奥付の社名と同じ型。
   ■ 大きさは --fs-logo（デスクトップ76px・1行／モバイル48.8px・2行。:root の注記）。
   ■ 字間を詰めているのは、欧文14字を大きく組むと語が散って見えるため
     （奥付の社名と同じ -.018em 前後に合わせてある） */
.hero__name{
  margin:0 0 .5em;
  font-family:var(--serif);
  font-size:var(--fs-logo);
  line-height:1.02; letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 2px 46px rgba(0,0,0,.55);
}
/* デスクトップは1行で流す。モバイルだけ2行に積む（下の @media） */
/* 和文の社名。小の極（計器と同じ段）で、社名の下に静かに添える。
   ※ 影は「にじませる1枚」ではなく「締める1枚＋にじませる1枚」の2枚重ね。
     入口の画は下辺が岩肌で、細かい明暗が細い線を食う。
     ぼかしだけでは 11px の字が岩に沈むので、1〜2px の締まった影を足してある
     （画そのものを暗くする方向には振らない。画が先に目に入る状態を保つため） */
.hero__name-jp{
  margin:0;
  font-family:var(--serif);
  font-size:var(--fs-meter);
  letter-spacing:.2em; color:rgba(255,255,255,.9);
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 1px 20px rgba(0,0,0,.75);
}
/* 「何のページか」の手掛かり。説明を足さず、やっていることの柱だけを置く */
.hero__tags{
  display:flex; align-items:center; gap:.9em;
  margin-top:clamp(14px,2vw,22px);
  padding-top:clamp(12px,1.8vw,18px);
  border-top:1px solid rgba(255,255,255,.24);
  max-width:min(480px,72%);
  font-family:var(--sans); font-size:var(--fs-meter); letter-spacing:.22em;
  color:#fff;
  /* 岩肌の上で細い線が食われるので、締まった影とにじませる影を重ねる。
     この1行は「何のページか」を伝える唯一の説明なので、必ず読めること。
     ■ 3枚目（0 0 9px）は日の当たった岩肌のための追加。ここは入口の文字の中で
       いちばん低い位置にあり、**画の中でいちばん明るい斜面と重なる**。
       実測で、字面にかかる画素の 22.5%（デスクトップ1440）が
       白文字とのコントラスト 3:1 を割っていた。
       画そのものを暗くする方向には振らない（画が先に目に入る状態を保つため）ので、
       字のまわりだけを締める影を1枚足して持たせている。 */
  text-shadow:0 1px 2px rgba(0,0,0,.92), 0 0 9px rgba(0,0,0,.9), 0 1px 20px rgba(0,0,0,.75);
}

/* --- 送る向きの手掛かり ---
   以前は「↓SCROLL = →TRAVEL」と説明する図解を置いていた。旅の比喩をやめて
   図解ごと外し、矢印1本にしてある。

   ■ 矢印は **↓（実際に手を動かす向き）**。
     以前は横移動を予告して → を出していたが、操作そのものは縦スクロールなので、
     唯一の手掛かりが誤った指示として読めていた（「右へ送れ」に見える）。
   ■ 横に続いていることは、40px 送れば画が横に流れることで自明になる。
     加えて、隣の面の端・下の進捗インジケータ・横一列のルーラーが常時出ている。
     矢印が横を指さなくても、横移動が伝わらなくなることはない。
   ■ 80px 送ると消える。初見の一拍だけを受け持つ */
.cue{
  position:absolute; right:clamp(20px,3.4vw,46px); bottom:clamp(24px,3.6vw,48px);
  display:grid; place-items:center;
  width:38px; height:38px;
  background:rgba(8,9,11,.62);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(244,242,238,.18);
  transition:opacity .5s var(--ease);
}
.cue.is-off{ opacity:0; }
.cue__arrow{
  font-family:var(--mono); font-size:14px; line-height:1;
  color:var(--amber);
  animation:cueH 1.8s var(--ease) infinite;
}
.cue__arrow--down{ animation-name:cueV; }
@keyframes cueH{ 0%,55%,100%{ transform:translateX(-2px); } 25%{ transform:translateX(4px); } }
@keyframes cueV{ 0%,55%,100%{ transform:translateY(-2px); } 25%{ transform:translateY(4px); } }

/* --- 移動区間 ---
   ■ 左右の余白は**すべての区間に同じだけ**取る。
     トラックは面と区間を隙間なく並べているので、余白を持たない区間は
     中身が両隣の写真の切り口にそのまま触れ、黒地に置いた文字が
     「写真に貼り付いた付属物」に見える（PROGRESS の一覧で顕著だった）。
     ここで空けておくと、区間の中身は黒地に浮いて見える。
     量は一文の区間に元から入れていたものと同じ値で通してある */
.leg{
  position:relative; flex:0 0 auto;
  width:var(--leg-w);
  height:calc(100% - var(--top-h) - var(--route-h) - 4vh);
  max-height:760px;
  padding:0 clamp(12px,1.6vw,24px);
  display:flex; flex-direction:column; justify-content:center;
}

/* 真俯瞰のカットを横一本に切ると、経路の線に見える */
.leg__strip{
  position:relative; height:74px; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.leg__strip img{
  position:absolute; top:50%; left:var(--focus,50%);
  width:260%; height:auto; min-height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%);
  opacity:.62;
  will-change:transform;
}
.leg__dist{
  display:flex; align-items:center; gap:.8em; margin-top:14px;
  font-family:var(--mono); font-size:var(--fs-meter); letter-spacing:.1em; color:var(--ink-dim);
}
.leg__dist b{ color:var(--amber); font-weight:400; font-variant-numeric:tabular-nums; }

/* 区間に置く一文。第1幕に3箇所あり（先頭の宣言・区切り02の後・区切り03の後）、扱いは同じ。
   両隣に写真が見えている状態で読ませる。説明は足さない。

   ■ 大きさは中の段（デスクトップ 34px）。大の極では置かない。
     第1幕の区切りは4枚とも英字の変数名（48px）で通っている。そこへ和文を
     大の極（64px）で挟むと、**その面だけ言語も大きさも違う異物**として立ち、
     英字 → 突然の和文 → 英字、という並びが唐突に読める。
     周りの変数名より一段小さく置くと、流れの中に収まって「区間に置かれた
     つぶやき」として読める。**新しい段は作っていない**（締めの一文・
     サービス名と同じ中の段に寄せてある）。
   ■ 字を小さくしたぶん、区間の幅も 74vw から詰めてある。版面だけ広いままだと
     一文が真ん中に浮いて、かえって間延びする。
   ■ 左右の余白は .leg に統合した（区間はすべて同じだけ空ける） */
.leg--line{ width:var(--line-w); }
/* 宣言の面（第1幕の先頭）は帯も進み幅の読みも持たないので、下の余白が要らない */
.leg--lead .leg__line{ margin-bottom:0; }
.leg__line{ margin-bottom:clamp(16px,2vw,26px); }
.leg__line-jp{
  margin:0;
  font-family:var(--serif); font-feature-settings:"palt" 1;
  font-size:var(--fs-mid);
  line-height:1.5; letter-spacing:.045em;
  color:rgba(255,255,255,.96);
}
.leg__line-jp span{ display:block; }
/* デスクトップは前2つを続けて1行に流す。copy.js の jp は割った配列のままで、
   **文言も配列も触っていない。**
     動かせる変数は、必ずある。   （1行）
   モバイルは配列どおり2行（下の @media で block に戻す）。
   版面 295px には13字が入らないので、割り方を画面幅で出し分けている */
.leg__line-jp span:nth-child(1),
.leg__line-jp span:nth-child(2){ display:inline; }

/* 3つに割ってある一文（動かないと思っていた／ものほど、／効く。）だけは、
   **1つめで改行して、2つめと3つめを1行に流す。**
       動かないと思っていた
       ものほど、効く。
   画面幅によらず同じ割り方にしてある。デスクトップだけ前2つを流す上の規則も、
   モバイルだけ全部を折る下の規則も、ここで打ち消す（属性の分だけ詳細度が高い）。
   最長行は10字で、モバイルの版面 295px に 28.9px で収まる。
   文言そのものは1字も変えていない */
.leg__line-jp[data-parts="3"] span:nth-child(1){ display:block; }
.leg__line-jp[data-parts="3"] span:nth-child(2),
.leg__line-jp[data-parts="3"] span:nth-child(3){ display:inline; }

/* 宣言の2行目（事業にも、生き方にも。）。宣言にしか出ない。
   ■ **説明文ではなく宣言の一部**なので、和文セリフのまま・ほぼ白で置く。
     英文の添え（イタリック・減光）とは色と書体で別のものだと分かる。
   ■ 大きさは 14px＝**小の極の上端で、既にある段**（矢印チップと同じ）。
     ここに 20px 級を新しく作ると中間帯が2つから3つに増えて、
     34px と 13px の落差で持たせているジャンプ率が鈍る。
     1行目（34px）より小さく、英文（13px）より大きい、という順序は保っている。
   ■ 1行目との間は詰める。空けると2行が別々の文に見え、宣言が2つあるように読める */
.leg__line-jp2{
  margin:.5em 0 0;
  font-family:var(--serif); font-feature-settings:"palt" 1;
  font-size:14px;
  line-height:1.5; letter-spacing:.14em;
  color:rgba(255,255,255,.92);
}
.leg__line-en{
  margin:1.1em 0 0;
  font-family:var(--serif); font-style:italic;
  font-size:var(--fs-en); letter-spacing:.03em;
  color:var(--ink-dim);
}
/* 区間が広くなったぶん、帯の 260% オーバースキャンでは 1920px 版が伸びて眠くなる。
   一文の区間だけ倍率を落として、視差に要る余白は確保したまま解像度を保つ */
.leg--line .leg__strip img{ width:150%; }

/* 導入区間：これから何区切りを通るのか、目標値がいくつかを先に見せる（見通しの担保）。
   画像を置かないので、ファーストビューに載る画は入口の1枚だけになる */
.leg--intro{ width:var(--intro-w); }
.leg__brief{
  display:grid; gap:.6em;
  font-family:var(--mono); font-size:var(--fs-meter); letter-spacing:.1em; color:var(--ink-dim);
}
.leg__brief b{ color:var(--light); font-weight:400; font-variant-numeric:tabular-nums; }
.leg__brief-title{
  font-family:var(--sans); font-size:var(--fs-meter); letter-spacing:.24em;
  color:var(--amber); margin-bottom:.3em;
}
.leg__brief-list{ color:var(--ink-faint); line-height:1.9; }

/* --- 到着（転換の面）＝ 第2幕の表紙 ---
   紙の色をした最後の1枚が右から入ってくる。
   ここで計器が消え、軸が縦に戻り、そのまま第2幕の表紙になる。

   ※ 置く言葉は「感覚ではなく、構造で伸ばす。」の1つだけ。
     以前はこの面に「分解すれば、動かせる。」があり、少し送った先の
     01 Statement に別の大組みが立っていたので、**紙の表紙が2枚続いて見えていた。**
     ③を第1幕の区間へ移して面が空いたところへ、第2幕の表紙を引き上げてある。
     表紙は1枚になり、紙が押し出してきた先がそのまま第2幕の入口になった。
   ※ 数値は置かない（動きが止まった紙の上に数字だけが残ると文脈が切れる）。
   ※ **矢印チップはこの面には置かない。**
     入口のチップを ↓（実際に手を動かす向き）に直したことで、
     「→ が ↓ になって返る」という向きの対比が成立しなくなった。
     同じ ↓ をもう一度出しても「まだ下がある」という案内板にしかならず、
     第2幕の面に唯一 UI の部品が残ることにもなる。
     姿勢が変わったことは、紙が押し出す・計器が引く・表紙が立ち上がる・
     溜め、の4つが受け持つ（表紙の出現がチップの代わりになっている）。
     ── 紙の上にアンバーを1点だけ残したいなら、
     buildGate に cue--gate を戻すのが最小の差し戻しになる */
.panel--gate{
  height:100%; max-height:none;
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--top-h) + 2vh) clamp(24px,7vw,110px) calc(var(--route-h) + 2vh);
}

/* 表紙の組み。**面のまん中に置く。**
   索引・大組み・罫・英文の順で、01 Statement の面から
   そのまま持ち上げてある（上下の余白だけ、この面の高さに合わせて詰めた）。
   大組みの中心が画面の中心にほぼ重なるように、
   索引ぶんの上の高さと、罫＋英文ぶんの下の高さを釣り合わせている。
   ここを崩すと、コピーが画面の下に落ちて「入った瞬間に見えない」状態に戻る */
.cover{ max-width:min(1040px, 100%); }
.cover__index{ margin-bottom:clamp(30px,5vh,62px); }
.cover__display{ margin-bottom:clamp(30px,4.6vh,58px); }
/* ch は自身の font-size 基準で解決されるため使わない（大見出しが切れる） */
.cover__rule{ width:min(520px,100%); }
.cover__en{
  margin-top:clamp(18px,2.6vh,32px);
  font-family:var(--serif); font-style:italic;
  font-size:var(--fs-en);
  line-height:1.55; letter-spacing:.03em;
  color:rgba(var(--ink-rgb),.72);
}

/* 到着した瞬間に表紙が立ち上がる。
   **溜め（画面高の0.42倍）に入る前に出しきる。**
   溜めは「到着の面を読む時間」なので、そのあいだは何も動かないまま
   表紙が据わっているのが正しい。出現を溜めの後ろへ回すと、
   紙に入った直後の画面が空になり「最後まで行ったらいきなり出てくる」感じが消える。
   遅れは --d（索引と英文）と --rule-delay（罫）で、いちばん遅い英文が
   0.42秒 + 0.7秒 ＝ 到着から約1.1秒で出そろう */
.panel--gate [data-gate-fade]{
  opacity:0; transform:translateY(8px);
  transition:opacity .7s var(--ease) var(--d,.28s), transform .7s var(--ease) var(--d,.28s);
}
.panel--gate.is-in [data-gate-fade]{ opacity:1; transform:none; }
/* 大組みは1行ずつマスクからせり上がる。第2幕のほかの大組みと同じ出方 */
.panel--gate .cover__display .ln-i{ transition-delay:.06s; }
.panel--gate .cover__display .ln:nth-child(2) .ln-i{ transition-delay:.15s; }
.panel--gate .cover__display .ln:nth-child(3) .ln-i{ transition-delay:.24s; }
.panel--gate.is-in .cover__display .ln-i{ transform:translateY(0); }
.panel--gate.is-in .cover__rule{ transform:scaleX(1); }

/* --- 計器 --- */
.gauge{
  position:absolute; top:var(--mast-h); left:0; right:0; z-index:6;
  height:var(--gauge-h);
  display:flex; align-items:center; gap:clamp(12px,2.2vw,28px);
  padding:0 var(--m);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.gauge__ruler{ position:relative; flex:1 1 auto; height:38px; min-width:0; }
/* canvas は属性値の幅がレイアウトに効いて列を押し広げるので、絶対配置で計算から外す */
.gauge__ruler canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.gauge__cursor{
  position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:var(--amber); transform:translateX(-.5px);
}
.gauge__cursor::before{
  content:""; position:absolute; top:0; left:50%;
  width:0; height:0; transform:translateX(-50%);
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--amber);
}
/* 読みは「現在値 ／ ∞」の対。分母があることで、
   何かに向かって進んでいることだけが伝わる（何に向かうのかは書かない）。
   分母は目標であって上限ではないので、数値を置いていない */
.gauge__odo{
  flex:0 0 auto; display:flex; align-items:baseline; gap:.35em;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.gauge__odo-num{ font-size:13px; letter-spacing:.02em; }
.gauge__odo-total{ font-size:var(--fs-meter); color:var(--ink-faint); letter-spacing:.06em; }

/* ∞ の字面あわせ。等幅の ∞ は数字より背が低く、そのまま置くと分母だけ沈む。
   起こすのに font-size を使わず transform で拡げているのは、
   **文字サイズの段を1つも増やさないため**（大・中・小の3段しか持たない設計）。
   記号の見かけの大きさだけを変えて、実効サイズは親のまま保つ。
   字間は数字用の .06em が効くと記号が痩せるので 0 に戻す */
.inf{
  display:inline-block;
  transform:scale(1.32);
  transform-origin:50% 62%;
  margin:0 .16em;
  letter-spacing:0;
  font-style:normal;
}

/* 現在値と ∞ を分ける記号。**分数線ではない。**
   前後をたっぷり空け、線自体を薄くして「割る」ではなく「区切る」に見せる。
   この読みの下に水平の罫線を引くと分数に読めてしまうので、近くに線を置かないこと */
.odo-sep{
  display:inline-block;
  margin:0 .72em;
  opacity:.4;
  font-style:normal; letter-spacing:0;
}

/* --- 経路 --- */
.route{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  height:var(--route-h);
  padding:0 clamp(14px,2.4vw,26px);
  display:flex; flex-direction:column; justify-content:center;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.route__line{ position:relative; height:1px; background:var(--line); margin:0 clamp(34px,5vw,90px) 10px; }
.route__done{ position:absolute; left:0; top:0; height:1px; background:var(--amber); width:0; }
.route__stops{ position:relative; height:14px; margin:0 clamp(34px,5vw,90px); }
.route__stop{
  position:absolute; top:-16px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  color:var(--ink-faint); white-space:nowrap;
  transition:color var(--t) var(--ease);
}
.route__stop::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--dark); border:1px solid var(--ink-faint);
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.route__stop:hover{ color:var(--light); }
.route__stop.is-past::before{ border-color:var(--amber); }
.route__stop.is-now{ color:var(--light); }
.route__stop.is-now::before{ background:var(--amber); border-color:var(--amber); transform:scale(1.5); }

/* 到着したら計器と経路を引く。「移動が終わった」ことを画面から消して伝える */
.act1__stage.is-arrived .gauge{ opacity:0; transform:translateY(-8px); pointer-events:none; }
.act1__stage.is-arrived .route{ opacity:0; transform:translateY(8px); pointer-events:none; }

/* 第1幕が上へ抜けていくあいだ、到着の面の中身だけを引く。
   紙の色は残るので第2幕の紙面と継ぎ目なく繋がり、
   到着の文字が社名の帯とすれ違って重なる事故も起きない。
   --exit はスクロール位置の関数なので、止めればその濃度で静止する */
.panel--gate > *{ opacity:calc(1 - var(--exit, 0)); }

/* ==========================================================================
   5. 第2幕 ── 縦スクロール
   ========================================================================== */

/* --- 紙面 ---
   ■ 縦の余白は一度詰めてある。
     紙面の面が続くと、面と面のあいだの空白が積み上がって間延びする。
     切り替わりが分かるだけの間は残しつつ、上下の padding・索引の下・
     面の最低高さの3つをまとめて引いた。**面の切り替えは地色と罫が担っており、
     空白の量で示す必要はない。** */
.sheet{
  position:relative;
  background:var(--paper); color:var(--ink);
  padding:clamp(72px,10vh,132px) var(--m) clamp(78px,11vh,146px);
}
.sheet__index{ margin-bottom:clamp(34px,6vh,74px); }

/* ※ 第2幕の表紙（01 Statement）は独立した面をやめ、
   転換の面がそのまま引き受けている（上の .cover を見ること）。
   紙が押し出してきた先に表紙があるので、ここに面を戻すと表紙が2枚に戻る。 */

.practice{ min-height:92vh; display:flex; flex-direction:column; justify-content:center; }
/* 章題は小の極へ落とし、索引と2行1組の柱にした。
   ここを大きく組むと 50px 級の中間サイズが1つ増えて、
   サービス名との差が消える。この面で大きくするのはサービス名の側 */
.practice .sheet__index{ margin-bottom:.9em; }
.practice__head{
  font-family:var(--sans);
  font-size:var(--fs-meter);
  letter-spacing:.24em; line-height:1.4;
  color:rgba(var(--ink-rgb),.82);
  margin-bottom:clamp(52px,9vh,120px);
  font-feature-settings:"palt" 1;
}
.item{
  display:grid;
  grid-template-columns:clamp(64px,9vw,132px) minmax(0,1fr);
  column-gap:clamp(20px,3vw,56px); row-gap:.35em;
  align-items:start;
  padding:clamp(34px,5.5vh,62px) 0;
}
.item .rule{ grid-column:1 / -1; margin-bottom:clamp(30px,5vh,56px); }
.item__no{ grid-column:1; align-self:start; padding-top:.55em; }
/* 中の段。サイト全体でこの大きさを使うのは3箇所だけ
   ── サービス名2つ・締めの一文・樹形図の根 */
.item__jp{
  grid-column:2;
  font-family:var(--serif);
  font-size:var(--fs-mid);
  line-height:1.45; letter-spacing:.045em;
  font-feature-settings:"palt" 1;
}
.item__en{
  grid-column:2; margin-top:.5em;
  font-size:var(--fs-meter); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(var(--ink-rgb),.48);
}
/* 何を頼めるかが分かる粒度の項目。名詞句で止め、説明文は付けない。
   小の極に置くのは、領域名（中の段）との差で「見出しと索引」の関係を作るため。
   2段組みにして版面の右半分が空かないようにしてある */
.item__list{
  grid-column:2; margin-top:clamp(18px,2.4vh,26px);
  list-style:none; padding:0;
  display:grid; gap:.62em clamp(24px,3vw,48px);
  grid-template-columns:repeat(2, minmax(0,1fr));
  max-width:min(820px,100%);
  font-family:var(--serif);
  font-size:var(--fs-en);
  line-height:1.5; letter-spacing:.06em;
  color:rgba(var(--ink-rgb),.66);
}

/* --- 方法（メソッドの図） ---
   「では、どうやって動かすのか」に、言葉ではなく図で応える面。
   手つきを6つに分けて 3列 × 2行 で並べる。
     上段  分解する ／ 効く一点を見つける ／ 仮説を立てる      見つける工程
     下段  割に合うかを見る ／ どこに賭けるかを決める ／ 動かす  決めて動かす工程

   ■ 名前は小の極（--fs-en）のセリフ1行だけ。**説明文を付けないこと。**
     説明は図の側が持っている。ここに文を足すと、フレームワークが読み物になる。
   ■ 図の造形の規約は main.js の METHOD_FIGS に書いてある。
     線は 1px 固定（vector-effect）で紙面のほかの罫と同じ太さ、
     色は使わず濃度2段だけ、という2点がこの面をページに馴染ませている */
.method{ min-height:88vh; display:flex; flex-direction:column; justify-content:center; }
.method .sheet__index{ margin-bottom:clamp(30px,5vh,62px); }

/* 幅を張りきらない。版面いっぱいに広げるとセルが 300px を超え、
   点が器に比例して太って blob に見える（線は vector-effect で 1px 固定だが、
   点は図の一部として拡大する規約なので、セルの上限がそのまま図の上限になる）。
   セル 250px ＝ 3列で 820px が上限。

   ■ **索引ごと版面の中央に置く。** 上限が 820px あるところへ版面が 1,290px
     （1440幅）〜1,736px（1920幅）あるので、左に寄せると右に 545〜1,008px の
     余白が空いて、面がまるごと左半分に落ちて見える（実機で指摘された）。
     索引だけを左端に残すと今度は索引が塊から離れるので、**索引と図を同じ幅の
     1つの柱として扱い、柱ごと中央に置く**。左揃えの関係は柱の中で保たれる。
   ※ width を明示すること。flex の子に auto マージンだけ付けると stretch が外れ、
     中身の幅まで縮んで図が版面の真ん中で小さくまとまる */
.method .sheet__index{ width:min(820px,100%); margin-inline:auto; }
.methods{
  /* 地（前提として置かれているもの）と、効いている要素。この2段しか使わない */
  --m-dim:rgba(var(--ink-rgb),.26);
  --m-ink:rgba(var(--ink-rgb),.80);
  width:min(820px,100%); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:clamp(18px,2.6vw,40px);
  row-gap:clamp(26px,4vh,50px);
}
.methods__cell{
  display:flex; flex-direction:column;
  /* 6つが順に現れる。--i はセルの並び順（main.js が差す）。
     transition 自体は [data-reveal] の1本で、ここは遅らせているだけ */
  transition-delay:calc(var(--i, 0) * .1s);
}
/* 各セルの上の1本。3つ並ぶと行の帯に見え、行が2つあることが線で分かる */
.methods__rule{ display:block; height:1px; background:rgba(var(--ink-rgb),.3); }
/* 図の器は正方形。セルの幅がそのまま一辺になる */
.methods__fig{ padding:clamp(14px,2vw,26px) 0 clamp(12px,1.8vw,22px); }
.methods__name{
  font-family:var(--serif); font-feature-settings:"palt" 1;
  font-size:var(--fs-en); letter-spacing:.08em; line-height:1.5;
  color:var(--ink);
}

/* 図。120×120 の器に、5×5 の格子の上でだけ形を置く。
   ※ 線の太さは vector-effect で 1px に固定してある。器が拡大されても太らないので、
     紙面のほかの罫線と同じ太さで並ぶ。点だけは器に比例して拡大する
     （節点は図の一部、線は紙の罫、という扱い） */
.mfig{ display:block; width:100%; height:auto; overflow:visible; }
.mfig .mf-l{
  fill:none; stroke:var(--m-dim);
  stroke-width:1; vector-effect:non-scaling-stroke;
}
.mfig .mf-l--d{ stroke-dasharray:3 3; }         /* 破線＝未確定・退いた経路 */
.mfig .mf-p{ fill:var(--m-dim); stroke:none; }  /* 実点＝確かにあるもの */
.mfig .mf-p--o,                                  /* 空点＝まだ無いもの・退いたもの */
.mfig .mf-o{                                     /* 輪＝そこに目を留めた印 */
  fill:var(--paper); stroke:var(--m-dim);
  stroke-width:1; vector-effect:non-scaling-stroke;
}
.mfig .mf-o{ fill:none; }
/* 効いている要素。各図に1組だけ置く */
.mfig .mf-key .mf-l{ stroke:var(--m-ink); }
.mfig .mf-key .mf-p{ fill:var(--m-ink); }
.mfig .mf-key .mf-p--o{ stroke:var(--m-ink); fill:var(--paper); }
.mfig .mf-key .mf-o{ stroke:var(--m-ink); }

/* 6面とも「器が出る → 効く要素が載る」という同じ拍子で現れる。
   スクロール位置に毎フレーム追従させず、面に入った一度きりで組み上げる */
.mf-key{
  opacity:0;
  transition:opacity .7s var(--ease);
  transition-delay:calc(var(--i, 0) * .1s + .32s);
}
.methods__cell.is-in .mf-key{ opacity:1; }

/* --- 図版 ---
   116vh から詰めてある。1画面を超える画は、送っても送っても同じ画のままになり、
   下のメソッドの面へ着くまでが遠い。1画面弱に収めると、
   画のあとに図が来ることが1回のスクロールで分かる */
.plate{
  position:relative;
  height:clamp(440px,88vh,820px);
  overflow:hidden; background:var(--dark);
}
.plate__media{
  position:absolute; inset:0;
  /* スクロール位置の関数。止めればその位置で静止する */
  transform:scale(calc(1.07 - var(--p, .5) * .07));
}
.plate__media img,
.pin__media img,
.colophon__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--pos, 50% 50%);
  filter:var(--filter, none);
}
.plate.is-dark::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(6,8,12,.36) 0%, rgba(6,8,12,0) 26%, rgba(6,8,12,.1) 44%, rgba(6,8,12,.78) 100%);
}
.plate.is-light::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(var(--paper-rgb),0) 60%, rgba(var(--paper-rgb),.38) 100%);
}
.plate__caption{
  position:absolute; left:var(--m); right:var(--m);
  bottom:clamp(34px,6vh,68px);
  display:flex; gap:clamp(18px,3vw,44px); align-items:baseline;
  z-index:2;
}
.plate__place{ opacity:.78; }
/* 索引・キャプションの既定は紙面用の黒。写真の面では明暗で持ち替える */
.plate.is-dark .label{ color:rgba(241,239,234,.72); }
.plate.is-light .label{ color:rgba(20,19,15,.86); }
.plate.is-light .plate__place{ opacity:.82; }

/* --- ピン留め（見せ場。サイト全体で1箇所・1,200px） --- */
.pin{ position:relative; height:calc(100svh + 1200px); background:var(--dark); }
.pin__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.pin__media{ position:absolute; inset:0; transform:scale(calc(1 + var(--pin, 0) * .07)); }
.pin.is-dark .pin__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(6,8,12,.44) 0%, rgba(6,8,12,.16) 34%, rgba(6,8,12,.16) 66%, rgba(6,8,12,.5) 100%);
}
.pin.is-light .pin__scrim{ position:absolute; inset:0; background:rgba(238,234,226,.3); }
.pin.is-light .pin__cap{ color:rgba(20,19,15,.94); }
.pin.is-light .pin__en{ color:rgba(20,19,15,.58); }
.pin.is-light .label{ color:rgba(20,19,15,.6); }
.pin.is-light .pin__bar{ background:rgba(20,19,15,.22); }
.pin.is-light .pin__bar-i{ background:rgba(20,19,15,.8); }

.pin__index{ position:absolute; top:clamp(84px,13vh,130px); left:var(--m); }
.pin__credit{ position:absolute; bottom:clamp(34px,6vh,68px); left:var(--m); }
.pin__captions{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:0 var(--m); text-align:center;
}
/* サイトの締め。**小さく置く。** 中の段（1440px 幅で34px）で組み、
   第2幕の主コピー「感覚ではなく、構造で伸ばす。」（82px）より一段下に置く。

   ■ なぜ大きくしないのか
     最後にみんなが見る一言だが、大きく叫ぶと押し付けになり、
     視座が上がった感じが出ない。**小さく置くから余韻になる。**
     字の大小は「重要度」ではなく「話し方」を決めている、という扱いで通す。
     画面いっぱいの写真の上に、小さい一文と 11px のラベルだけが載る状態が正しい。
     **ここを大組みにすると、事業の面の宣言と役割が入れ替わる。**
   ■ 改行は text-wrap:balance に任せる。手で割っていないので、
     文言を変えても行の取り方を取り直す必要がない */
.pin__cap{
  margin:0; max-width:min(760px,74vw);
  font-family:var(--serif);
  font-size:var(--fs-mid);
  line-height:1.95; letter-spacing:.085em;
  color:#fff;
  font-feature-settings:"palt" 1;
  text-wrap:balance;
}
.pin__en{
  margin:1.2em 0 0;
  font-family:var(--serif); font-style:italic;
  font-size:var(--fs-en); letter-spacing:.03em;
  color:rgba(255,255,255,.62);
}
.pin__bar{
  position:absolute; right:var(--m); bottom:clamp(38px,6vh,72px);
  width:min(280px,42vw); height:1px; background:rgba(255,255,255,.24);
}
.pin__bar-i{
  display:block; height:100%; background:rgba(255,255,255,.85);
  transform:scaleX(var(--pin, 0)); transform-origin:left center;
}

/* --- 奥付 --- */
.colophon{
  position:relative; min-height:92svh; overflow:hidden;
  background:var(--dark); display:flex;
}
.colophon__media{ position:absolute; inset:0; }
/* ※ 沈めるグラデーションは ::after にまとめてある。
   ::before は擬似要素の描画順で .colophon__media（実要素）より下に来るため、
   写真に隠れて効かない。上下方向と左右方向を1枚に重ねて掛ける。
   左側だけ沈めるのは、右の海岸線を開けたまま残すため */
.colophon::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right,  rgba(8,9,12,.66) 0%, rgba(8,9,12,.38) 46%, rgba(8,9,12,0) 78%),
    linear-gradient(to bottom, rgba(8,9,12,.70) 0%, rgba(8,9,12,.46) 32%, rgba(8,9,12,.86) 100%);
}
.colophon__inner{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column;
  padding:clamp(84px,14vh,160px) var(--m) clamp(34px,6vh,64px);
}
.colophon__index{ margin-bottom:auto; }
/* 大の極。1440px 幅で 74px（375px 幅では2行に折れて 43px）。
   引く量が他の4箇所より小さいのは、ここだけ欧文24字で字面が細く、
   同じだけ引くと奥付の版面に対して痩せて見えるため */
.colophon__name{
  font-family:var(--serif);
  font-size:clamp(28px,5.15vw,74px);
  line-height:1.04; letter-spacing:-.018em;
  color:#fff; margin-top:clamp(48px,9vh,110px);
}
.colophon__name-jp{
  margin-top:1.1em;
  font-family:var(--serif);
  font-size:var(--fs-meter);
  letter-spacing:.2em; color:rgba(241,239,234,.7);
}
.colophon .rule{ margin:clamp(34px,6vh,66px) 0 clamp(28px,4.5vh,48px); }
.colophon__list{ display:grid; gap:clamp(18px,3vh,30px); }
.colophon__row{
  display:grid;
  grid-template-columns:clamp(88px,12vw,168px) minmax(0,1fr);
  gap:clamp(14px,2.4vw,36px); align-items:baseline;
}
.colophon__row dt{ padding-top:.35em; }
/* 社名を大の極まで上げた分、代表名と連絡先は小の極へ落とす。
   同じ面の中で極端な差がつくのが狙い。
   13px はデスクトップ・モバイル共通（小の極の上端）*/
.colophon__row dd{
  margin:0; font-family:var(--serif);
  font-size:13px; letter-spacing:.09em;
  color:rgba(255,255,255,.92);
}
.colophon__romaji{ color:#fff; }
/* 撮影クレジットの地名・年。**写真のキャプションと同じ顔で置く**
   （`.plate__place` や `.pin__credit` と同じ文字列の種類なので、
   同じ .label ＝サンセリフの索引の顔で通す。ここだけ等幅にすると、
   同じものが面によって別の書体で出ることになる）。
   和文の下に行を替えて添える */
.colophon__credit-loc{ display:block; margin-top:.7em; letter-spacing:.14em; }
/* 拠点。撮影クレジットの地名と同じ顔で揃える（どちらも地名なので扱いを分けない） */
.colophon__base{ letter-spacing:.14em; }
/* 連絡先は .lat の減光を戻す。ここだけは読ませる必要がある */
.colophon__mail{
  opacity:.94;
  border-bottom:1px solid rgba(255,255,255,.32);
  padding-bottom:.14em; letter-spacing:.04em;
  transition:border-color var(--t) var(--ease);
}
.colophon__mail:hover{ border-color:rgba(255,255,255,.9); }
.colophon__end{ margin-top:clamp(56px,10vh,120px); }

/* ==========================================================================
   6. モバイル（375×812 を最重要環境として組む）
   横に進む構造はそのまま。パネルを画面幅いっぱいに寄せ、
   隣のパネルの端が常に見えるようにして「横に続いている」ことを示す
   ========================================================================== */
@media (max-width: 860px){
  :root{
    --mast-h:  44px;
    --gauge-h: 34px;
    --route-h: 42px;
    --edge:    20px;
    --panel-w: calc(100vw - 68px);
    --leg-w:   56vw;
    --intro-w: 74vw;
    /* 一文の区間だけ広げる。両隣の写真の端は 28px ずつ残る */
    --line-w:  calc(100vw - 56px);
    --m:       20px;
    --fs-meter: 10px;
    /* 入口の社名。版面 267px に「Nomad」の5字を届かせると
       2行組み（Nomad ／ Creative）で 48.8px になり、奥付の社名（モバイルで
       2行に折って 43px）と同じ組み方になる。
       この値は第2幕の表紙（.display のモバイル 48.8px）と同じ段に重なるので、
       実効サイズの種類は増えない */
    --fs-logo: min(clamp(30px, 13vw, 96px), 19vh);
  }

  .masthead{ padding:14px 20px; font-size:.625rem; letter-spacing:.18em; }

  .panel--hero{ width:calc(100vw - 40px); }

  /* 375px では計器のクラスタが2行になり、面の下に垂らすと進捗インジケータに触る。
     モバイルだけ面の内側（暗いスクリムの上）に置く */
  .panel__meter{
    gap:.3em .9em; letter-spacing:.08em;
    left:14px; right:14px; bottom:14px;
    text-shadow:0 1px 12px rgba(0,0,0,.85);
  }
  .panel__meter-jp{ font-size:12px; letter-spacing:.16em; }

  /* 写真の中の変数名は、面の内側にある計器のクラスタの上へ逃がす。
     英字は 375px の版面（279px）に「WHERE YOU LIVE」が1行で収まる大きさ */
  .panel__var{ left:14px; right:14px; padding:0; bottom:56px; gap:.45em; }
  .panel__var-en{ font-size:clamp(22px,7vw,34px); }
  .panel__var-jp{ font-size:12px; letter-spacing:.16em; }

  /* 社名は版面 267px に収まらないので2行に積む（Nomad ／ Creative）。
     折れることを前提に大きく組んであるのは奥付の社名と同じ扱い。
     2行ぶん積むので行間はデスクトップより詰める */
  .hero__name{ line-height:.96; margin-bottom:.44em; }
  .hero__name span{ display:block; }
  .hero__name-jp{ letter-spacing:.16em; }
  .hero__tags{ max-width:none; letter-spacing:.16em; margin-top:12px; padding-top:10px; }

  /* 矢印チップは入口の右下だと親指と重なるので上寄せにする */
  .cue{ right:auto; left:20px; bottom:auto; top:clamp(54px,15vw,88px); width:34px; height:34px; }

  .gauge{ padding:0 16px; gap:12px; }
  .gauge__ruler{ height:24px; }
  .gauge__odo-num{ font-size:12px; }

  .leg__strip{ height:52px; }
  .leg__brief-list{ display:none; }   /* 74vw では羅列が3行に割れるので落とす */
  /* 版面 295px に「思っていたものほど、」の10字を届かせる。
     **モバイルの一文はデスクトップのように下げていない。**
     腕の長さで見るモバイルでは、写真の中の変数名（26px）とほぼ同じ大きさで
     並ぶので、デスクトップで起きていた「その面だけ大きい」異物感が出ない */
  .leg__line-jp{ font-size:min(clamp(22px,7.7vw,56px), 12vh); line-height:1.2; }
  /* モバイルは行を割ったまま。版面 295px に15字は入らず、2行に組むと 20px 級まで
     しか上げられない（10字に割ると 29px まで上がる）。割る位置は連体修飾の
     切れ目（〜思っていた／ものほど、）で、文言そのものは1字も変えていない */
  .leg__line-jp span:nth-child(1),
  .leg__line-jp span:nth-child(2){ display:block; }

  .panel--gate{ padding:calc(var(--top-h) + 14px) 22px calc(var(--route-h) + 14px); }

  .route__stop{ font-size:0; gap:0; }
  .route__stop::before{ width:6px; height:6px; }
  .route__stops{ height:8px; margin:0 24px; }
  .route__line{ margin:0 24px 8px; }

  /* 第2幕 */
  .item{ grid-template-columns:clamp(44px,13vw,64px) minmax(0,1fr); }
  /* 版面 335px では2段組みが1段あたり150px になって語が折れるので1段に戻す */
  .item__list{ grid-template-columns:minmax(0,1fr); gap:.7em; }

  /* メソッドの図。**3列2行のままにする。**
     上段＝見つける工程／下段＝決めて動かす工程、という並びが意味を持っているので、
     2列3行に組み替えると対が崩れる。
     335px の版面では1辺が 100px 級になるが、図は5点の格子しか使っていないので
     この大きさでも形は読める。字間と余白だけ詰める。
     名前は「どこに賭けるかを決める」だけ2行に折れるので、
     行の高さを2行ぶんで固定して6つの底を揃える */
  .methods{ column-gap:10px; row-gap:clamp(22px,3.4vh,34px); }
  .methods__name{ letter-spacing:.02em; min-height:3em; }
  .methods__fig{ padding:10px 0 8px; }
}

@media (max-width: 560px){
  /* 版面 335px に「感覚ではなく、」の7字を届かせる */
  .display{ font-size:clamp(30px,13vw,72px); line-height:1.2; }
  /* 社名は1行に収まらないので2行に折る（そのぶん大きく組める） */
  .colophon__name{ font-size:clamp(26px,11.5vw,46px); }
  .practice{ min-height:auto; }

  .plate{ height:clamp(460px,84vh,700px); }
  .plate__caption{ flex-direction:column; gap:6px; }

  .pin{ height:calc(100svh + 900px); }
  .pin__cap{ max-width:none; letter-spacing:.05em; line-height:2.05; }
  /* 375px では撮影地の表記が右まで伸びて進行バーとぶつかるので、バーを一段上げる */
  .pin__bar{ width:min(160px,44vw); bottom:calc(clamp(34px,6vh,68px) + 30px); }

  .colophon__row{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .colophon__row dt{ padding-top:0; }
  .lat{ display:block; margin-left:0; margin-top:.5em; font-size:.82em; }
  /* 連絡先だけは縮めない。行内のままにして、下線が段いっぱいに伸びるのも防ぐ */
  .colophon__mail{ display:inline; font-size:1em; }
}

/* ==========================================================================
   7. 動きを減らす設定（prefers-reduced-motion: reduce）
   第1幕の横移動そのものを止め、縦積みの普通のページに戻す。
   中身は同じで、体験だけ静かになる。
   ※ メディアクエリではなく html[data-motion="reduce"] で切り替える。
     JS側の分岐と条件を1つにまとめるため（?rm=1 でも手動で入る）
   ========================================================================== */
html[data-motion="reduce"] .act1{ height:auto !important; }
html[data-motion="reduce"] .act1__stage{ position:static; height:auto; overflow:visible; }
html[data-motion="reduce"] .viewport{ position:static; overflow:visible; }
html[data-motion="reduce"] .track{
  position:static; display:block; height:auto;
  transform:none !important;
  padding:calc(var(--mast-h) + 40px) var(--m) clamp(56px,9vw,120px);
  max-width:1100px; margin:0 auto;
}
html[data-motion="reduce"] .panel,
html[data-motion="reduce"] .leg{
  width:100% !important; max-width:none;
  height:auto; max-height:none;
  margin:0 0 clamp(48px,8vw,104px);
}
/* 画は箱として流し、地名と座標はその下に置く。
   横移動のときのように画へ重ねると、動きが無い分だけ読みづらくなる */
html[data-motion="reduce"] .panel__media{
  position:relative; inset:auto;
  width:100%; aspect-ratio:3 / 2;
}
html[data-motion="reduce"] .panel--hero .panel__media{ aspect-ratio:16 / 9; }
html[data-motion="reduce"] .panel__media img,
html[data-motion="reduce"] .panel__media video{
  position:absolute; top:0; left:0;
  width:100%; height:100%; transform:none !important;
}
html[data-motion="reduce"] .panel__meter,
html[data-motion="reduce"] .panel__var,
html[data-motion="reduce"] .hero__body,
html[data-motion="reduce"] .leg__strip img{ transform:none !important; }
/* 写真の中の変数名は、静かな版でも画の中に残す（枠ごと画に属しているため）。
   .panel__media が relative に変わるので、位置の基準は画のままになる */
html[data-motion="reduce"] .panel__var{ bottom:clamp(14px,3vw,28px); }
/* 画の下に計器のクラスタを1行で置く（横移動のときのように画へ重ねない） */
html[data-motion="reduce"] .panel__meter{
  position:static; margin-top:1.1em; left:auto; right:auto; bottom:auto;
  text-shadow:none;
}
html[data-motion="reduce"] .panel--hero .hero__body{ position:absolute; }
html[data-motion="reduce"] .panel--gate{
  background:var(--paper); color:var(--ink);
  padding:clamp(36px,7vw,72px) clamp(24px,6vw,64px);
}
html[data-motion="reduce"] .leg{ display:block; }
html[data-motion="reduce"] .leg__strip{ height:56px; }
html[data-motion="reduce"] .leg__strip img{
  position:absolute; top:0; left:0;
  width:100%; height:100%; min-height:0; object-fit:cover;
}
/* 計器・進捗インジケータ・向きの矢印は横移動があってこそのものなので、
   静かな版では出さない。進捗の値は各区間の .leg__dist と導入のブリーフに残る */
html[data-motion="reduce"] .gauge,
html[data-motion="reduce"] .route,
html[data-motion="reduce"] .cue,
html[data-motion="reduce"] .progress{ display:none; }
/* 転換の面（＝第2幕の表紙）は、静かな版でも組み上がった形で置く。
   .rule は既定が scaleX(0) なので、ここで戻さないと罫が出ない */
html[data-motion="reduce"] .panel--gate .ln-i,
html[data-motion="reduce"] .panel--gate .rule,
html[data-motion="reduce"] .panel--gate [data-gate-fade]{ transform:none !important; opacity:1 !important; }

/* メソッドの図は、静かな版では最初から組み上がった形で置く。
   図が言っていることは動きではなく形の側にあるので、内容は落ちない */
html[data-motion="reduce"] .mf-key{ opacity:1 !important; }
html[data-motion="reduce"] .methods__cell{ transition-delay:0s !important; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration:.001s !important; animation-duration:.001s !important; }
  .plate__media,.pin__media{ transform:none !important; }
  .ln-i{ transform:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .rule{ transform:scaleX(1) !important; }
  .mf-key{ opacity:1 !important; }
  .methods__cell{ transition-delay:0s !important; }
}