/* 紹介ページのスタイル。
 *
 * # ここだけを触る
 *
 * 紹介ページは唯一、継続的に手が入るページ（価格改定、写真の差し替え、
 * 文言の調整）。partials.html の共通CSSとは分けてある。
 * **あちらを触らない。** 公開プロフィール向けに調整したもので、
 * ここの規則を混ぜると互いに干渉する。
 *
 * # 見た目を作り分ける
 *
 * 公開プロフィールは「紙の名刺を写したもの」で、地は生成り、余白を広く、
 * 中身は左揃えで静かに置く。**こちらは商品を売る面**なので、逆にする。
 * 地は墨黒を大きく使い、生成りを紙のように差す。ネイビーは1か所だけ。
 *
 * # 写真は実物
 *
 * 2026-09-11 に実物の写真が入った（`.shots`）。**寸法は撮れた比そのまま。**
 * 差し替えるときは `img` の width・height も一緒に直す。
 */

/*
  配色は**アプリ側（partials.html）と同じ値**にしてある。

  # なぜ揃えたのか

  以前はここだけ墨黒を地にしていた（「商品を売る面だから名刺のページと
  逆にする」という考え）。**目が痛くなる。**

  アプリ側は端末のテーマに追従する（prefers-color-scheme）。明るい設定の
  人がここからログイン画面へ進むと、**ほぼ黒から生成りへ一気に変わる。**
  紹介ページだけが固定の暗色だったので、片方向にしか起きない。

  見た目で別の場所だと示すのは、地の色でなくてよい（幅・余白・主画像・
  文字の大きさで足りている）。**同じサービスの中で目が慣れ直すのは高い。**

  # 値を写している

  partials.html を読み込まない（あちらは公開プロフィール向けの502行で、
  ここの規則と干渉する）ので、トークンだけを写す。
  **ずれると気づけない**ので、TestIntroPaletteMatchesTheApp が
  突き合わせている。
*/
:root {
  /* 地と面。純白は眩しく疲れるので、わずかに黄み寄り。 */
  --bg: #FBF9F4;
  --surface: #FFFFFF;
  --border: #E4DFD3;
  /* 面そのものの輪郭。**--border は面の中の区切り用で、輪郭には弱い。** */
  --border-strong: #8A857A;

  /* 文字。純黒ではなく墨色。コントラストを強くしすぎない。 */
  --text: #2C2C2A;
  --text-sub: #6E6B63;

  /* 押させたい面とリンクの文字。**主の色そのもの**（2026-09-18）。
     以前はここだけ紺 #1E2A3A だった —— partials.html は同じ名前で朱を
     持っているのに、紹介ページだけリンクと締めのボタンが紺で、
     **頁を跨ぐと押す場所の色が変わっていた**（同じ名前で違う値、という
     いちばん気づきにくい食い違い方）。

     **値を書かず、主の色を指す。** 書き写すと、また片方だけ古くなる。
     明暗の切り替えも --pop 側の1か所で済む（下のダークで --accent を
     上書きしていたのをやめられた）。 */
  --accent-fill: var(--pop-fill);
  --on-accent: var(--on-pop);
  --accent: var(--pop);

  /* 面の輪郭を出すための影。**明暗で強さを変える。**
     暗い地では黒い影が効かないので、ほぼ無くす。 */
  --shadow: rgba(44, 44, 42, 0.10);

  /* 主の色。**アプリと web の --accent / --accent-fill と同じ。**
     （2026-09-15。それまでは朱 #B23A26 で、**ここだけ古いまま残って
     いた** —— 頁を跨ぐと押す場所の色が変わっていた。）

     塗りと文字で値が違う。塗りは名刺版の刷り色そのままで、白文字と
     4.20（AA には届かないが、出るのはボタンとアイコンだけ。
     tokens_test.go の例外に理由がある）。文字は落として 4.68。 */
  --pop: #D4320B;
  --pop-fill: #E8380D;
  --on-pop: #FFFFFF;
  /* 薄い面。**主の色が赤になったぶん、1段明るくした**（2026-09-15）。
     #FDF0EC のままだと赤の字が 4.42 で基準を割る（朱のときは通っていた）。
     いまは 4.62。 */
  /* 主の色の薄い端。**アイコンの地と同じ作り方**（tools/social の
     `ground` が #E8380D を 40% 白へ寄せた値）。斜めの光を CSS で
     組むのに要る。**別の淡い赤を作らない。** */
  --pop-pale: #F1886E;
  /* 帯の地。**明暗で変えない**（--pop-fill と同じ「持ち物の色」の扱い）。
   *
   * 逆L字の帯は `--pop` で塗っていたが、**暗色では --pop が #F08C72 へ
   * 明るく寄る**（文字として読ませるための値）。結果、暗色の帯は
   * #F1886E ↔ #F08C72 のほぼ単色の淡いサーモンになり、**サービスカラーが
   * 画面から消えていた**（2026-09-20 に実測、比の振れ 2.43〜2.51）。
   *
   * 帯は読むものではなく**塗り**なので、明暗で動かさない。値は明色の
   * --pop と同じ #D4320B ——**新しい色は作っていない。** */
  --band: #D4320B;
  --pop-soft: #FEF6F4;
  --pop-shadow: rgba(212, 50, 11, 0.22);
  /* 冒頭に敷く淡い光。**地の色は変えられない**（アプリと共有していて、
     iOS と Android のトークンと突き合わせている）。白い面を上に敷いて
     明るくする。 */
  --wash: rgba(255, 255, 255, 0.86);
  --wash-pop: rgba(212, 50, 11, 0.07);

  /* 節ごとの地。**商品の4色から起こした淡い色だけ。**
     無関係な色を足すと、届くカードとの関係が切れる。
     本文 12.3〜12.6:1、補助 4.67〜4.78:1（暗い側も 13.2 / 5.0）。 */
  /* 地は3つの役だけ。**1節に1色ずつ回さない** — それがいちばん機械的に
     見える（指摘 2026-09-02）。
       生成り（--bg）… 頁の地
       白（--surface）… ほとんどの面
       濃い面（--ground-deep）… 2か所で同じものを使う（回さずに繰り返す）
     強い色は紺のカード1つだけ。朱はボタンと小見出しに残す。 */
  --ground-deep: #EFEDE6;

  /* 群ごとの地。**商品の色から起こした中間の淡色。**
     内容のまとまりごとに変える（1節ごとには回さない）。

     白いカードが浮くだけの濃さが要る（純白との差 1.28〜1.29）。
     **この地の上に置くのは見出しだけ**にしてある —— 補助の文字
     （--text-sub）は 4.16 で AA を切るので、本文はすべて白い面の中。
     墨の本文 10.86〜11.98、朱の小見出し 4.62〜5.10。 */
  /* 円環の面を下げる量。**JS が上のバーを測って上書きする**（orbit.js）。
     ここは既定 —— 宣言が無いと、参照している側の指定ごと捨てられる。 */
  /* 面の丸み。**partials.html の --r-panel と同じ値。**
     紹介ページは intro.css を別に持つので、こちらにも要る
     （リンクの色を両方に書くのと同じ理由）。値を変えるときは両方。 */
  --r-panel: 0.875rem;

  --orbit-top: 0px;

  /* 群の地。**メインカラーから作った一族**（2026-09-21 の指摘：
   * 「メインカラーからぼかしで相性の色を選定してほしい」）。
   *
   * --pop #D4320B の色相 12° を回し、明度 93〜94%・彩度 22〜42% に
   * 落としたもの。**ばらばらに選ばない** —— 同じ作り方なので、隣り
   * 合っても喧嘩せず、主の色とも同じ家系に見える。
   *
   *	shu    12°（主の色そのもの）  買う話
   *	kinari 52°（砂）              物の話
   *	moss  162°（青みの緑）        使う人の話
   *	navy  204°（空）              会社の話
   *
   * 墨（--text）との比は 11.70〜12.59。以前の 10.86〜11.98 より上がった。 */
  --zone-kinari: #F5F3EA; /* 砂 */
  --zone-navy: #ECF1F4;   /* 空 */
  --zone-shu: #F5E9E6;    /* 主の色から */
  --zone-moss: #E9F1EF;   /* 青みの緑 */
  /* 法人の帯は濃い紺。**買う導線と見た目で分ける。** 白抜きで 15.60:1。 */
  --ground-navyband: #16233F;

  /* 見本を載せる面。**種類ごとに変える**（2026-09-12）。
   *
   * # なぜここだけ回すのか
   *
   * 節ごとに地の色を回さないのが決め。ここは節ではなく**見本の面**で、
   * 決めのもう半分「見本を並べる面は、どの見本とも似ていない色にする」が
   * 効く。**ロゴ版のカードは生成りなのに、生成りの地に置いていた** ——
   * Instagram の絵で一度やった失敗と同じ形（記憶にも書いてある）。
   *
   * # なぜ色を付けるのか
   *
   * **物の写真台**として読ませる。淡色より載っているカードが立つ。
   *
   * 「商品の刷り色から起こす（桃や黄を足さない）」という決めとぶつかるが、
   * その決めは**届く物と食い違わせない**ためのもの。台の色は**カードには
   * 一切かからない**ので、見た色が届かないという形にはならない。刷り色の
   * ほうは1色たりとも動かしていない。
   *
   * # 一度蛍光にして、くすませ直した（2026-09-12）
   *
   * Pantone の蛍光（801 / 809 / 802）をそのまま置いたら、**目が痛い**と
   * 指摘を受けた。彩度を落として、明度を中〜高に寄せた「くすみ」の側へ
   * 振り直してある。
   *
   * **下げすぎると消える。** カードが台に沈むと、朱の地に朱のカードを
   * 置いて見本を消した、あの失敗と同じことになる。**台と、その上に載る
   * カードの対比**を測って決めた（`tools/rolecolors`）。
   *
   *   ロゴ版   生成りのカード → くすみブルー   2.11
   *   氏名入り 紺のカード     → くすみサンド   9.69
   *   名刺版   赤のカード     → くすみセージ   2.54
   *
   * 白い面との差も見る（1.6〜2.5）。**台が白に溶けると節が崩れる。**
   *
   * # 明暗で変えない
   *
   * --card-* / --qr-* と同じ理由。**刷り上がりを載せる面**なので、
   * 端末の設定で台の色が変わるように見せない。
   *
   * **名刺版にくすみピンクや橙を当てない。** カードが赤（#E8380D）なので、
   * 同じ色相の面に置くと見本が沈む。
   */
  --art-plain: #8FA8BD;
  --art-named: #D9CAB3;
  --art-meishi: #C2CDB6;

  /* 「使う人」の帯。**1つずつ違う色にする**（2026-09-12 の指示）。
   *
   * # なぜここなのか
   *
   * 頁を開いて最初に動くものなので、**開いた瞬間の印象を作る。**
   * 8つ並ぶ絵が全部同じ色だと、流れているだけで何も足さない。
   *
   * # 字にも付ける
   *
   * はじめは絵だけにしていた（8色の職種名が並ぶと早見表に見えると
   * 考えた）。**指摘を受けて字にも広げた。** くすませたので、並べても
   * 騒がしくならない。
   *
   * # くすませる。ただし読めるところまで
   *
   * 蛍光をそのまま置くと目が痛い。かといって落としすぎると消える ——
   * **これは読む文字**なので、絵より厳しく 4.5:1（WCAG AA）を守る。
   * 明暗それぞれで測った（`tools/rolecolors`）。
   *
   *   ローズ 5.34/8.38   プラム 5.89/8.02   インディゴ 6.37/8.28
   *   ブルー 5.49/9.03   ティール 5.56/9.38  グリーン 5.18/9.55
   *   オリーブ 5.22/9.46  テラコッタ 5.23/8.49  （明/暗）
   *
   * # 明暗で組を分ける
   *
   * 面（--art-*）と違って**こちらは分ける。** 読む文字を1つの値で
   * 両方に通そうとすると、どちらかが 4.5:1 を割る。 */
  /* 絵の URL は頁が渡す。ここは**受け皿**（2026-09-12）。
   *
   * 未定義の変数を参照した宣言は丸ごと捨てられるので、置かないと
   * `mask` ごと消えて**絵が黙って消える**（TestNoUndefinedCSSVariables が
   * 止めた）。none にしてあるので、頁が渡し忘れると**色の四角**が出る。
   * 黙って消えるより、見て分かる形で壊れるほうがよい。 */
  --role-icon: none;

  --role-1: #A44A62;
  --role-2: #7A5288;
  --role-3: #4A5A8C;
  --role-4: #356B8C;
  --role-5: #2F6F66;
  --role-6: #4E7342;
  --role-7: #726A32;
  --role-8: #A25332;

  /* 刷り上がりの色。**印字と同じ値**（printcard.go の colors）。
     見本に使うので、明暗で変えない。 */
  --card-sumi: #1A1A1A;
  --card-kinari: #F2EDE1;
  --card-navy: #16233F;
  --card-shu: #B23A26;

  /* 古い名前を残す（この下の規則が使っている）。 */
  --line: var(--border);
  --paper: var(--surface);
  --paper-text: var(--text);

  /* 書体。**自サイトから配っている**（下の @font-face）。
     絞り込みは tools/subsetfont/subset.py。文言を変えたら作り直す。

     後ろは読み込めなかったときの受け皿。**端末の書体に落ちても
     版面が崩れない**ように、同じ系統（角ゴシック）を並べる。 */
  --font: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

/* 絞り込んだ書体。**このページに出る文字だけ**が入っている（tools/subsetfont が数える）。
 *
 * # display: swap
 *
 * **文字が見えない時間を作らない。** 既定（block）だと、読み込みが
 * 終わるまで文字が消える。売り物の説明が真っ白なのは、書体が
 * 揃わないことより悪い。
 *
 * # unicode-range を書かない
 *
 * 絞り込んだ結果に入っている文字しか使わないので、範囲で切る意味がない。
 * 書くと、範囲に入るのに実体が無い文字で豆腐になる。
 *
 * # ファイル名は道具が付ける
 *
 * 末尾は中身の指紋。/static は immutable で1年キャッシュさせているので、
 * 中身が変われば名前も変わらないと反映されない。**この行は手で直さない。**
 * tools/subsetfont/subset.py が書き換える。
 */
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url(/static/font/zenkaku-regular-ca05b3d7.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url(/static/font/zenkaku-bold-eebf0f05.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
  端末が暗色のとき。**アプリ側と同じ値。**

  ここを持たないと、暗色の人には紹介ページだけが明るく出る
  （揃えた意味が半分になる）。
*/
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1A18;
    --surface: #232320;
    --border: #35342F;
    --border-strong: #7A7770;
    --text: #EDE8DC;
    --text-sub: #948F84;
    /* **--accent はここで上書きしない**（2026-09-18）。
       ライトで --pop を指しているので、下の --pop の切り替えに
       そのまま追従する。書くと出所が2つに戻る。 */
    /* 暗い地では黒い影が見えない。面の差は色で付ける。 */
    --shadow: rgba(0, 0, 0, 0.35);

    /* **塗りは明暗で変えない**（持ち物の色。--accent-fill と同じ扱い）。
       暗い地の上でも 4.15 あり、面の境界としては足りている。
       文字は読むものなので明るい側へ寄せる（暗い地に 7.22）。 */
    --pop: #F08C72;
    --pop-fill: #E8380D;
    /* **明色と同じ値。** 帯は塗りなので明暗で動かさない（上の説明）。 */
    --band: #D4320B;
    --on-pop: #FFFFFF;
    --pop-soft: #2B201D;
    --pop-shadow: rgba(0, 0, 0, 0.40);
    --ground-deep: #201F1D;
    /* 群ごとの地（暗い側）。**同じ順で暗くする。** */
    --zone-kinari: #221F1A;
    --zone-navy: #1A1E26;
    --zone-shu: #241C1A;
    --zone-moss: #1C221A;
    --ground-navyband: #16233F;
    /* 帯の色（暗い側）。**同じ順で明るくする。** 読む文字なので、
       こちらでも 4.5:1 を守る（8.0〜9.6）。 */
    --role-1: #E2A3B0;
    --role-2: #C3A6CE;
    --role-3: #A6B2D8;
    --role-4: #9AC0D6;
    --role-5: #96C8BE;
    --role-6: #ACC89E;
    --role-7: #C9C08C;
    --role-8: #E0A98E;
    /* 暗い側では白を敷かない（眩しくなる）。面の色をわずかに上げる。 */
    --wash: rgba(255, 255, 255, 0.05);
    --wash-pop: rgba(240, 140, 114, 0.07);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* 左右いっぱいの節は 100vw を使う。**縦のスクロールバーの幅を含む**ので、
   そのままだと横にも動く。ここで止める。 */
body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* **2度上げた**（2026-09-09）。既定の 16px、次に 17px。帯を広げると
     文字だけが小さく残って間が抜ける。18px で、離れて見ても読める。 */
  font-size: 1.125rem;
  line-height: 1.85;
  /* 字送りを少し開ける。**名刺のページより広く。**
     売り物の説明は読ませる文章なので、名刺の版面より緩める。 */
  letter-spacing: 0.02em;
}

/*
  頁の器。**1か所で決める。**

  46rem（736px）だった。1440px の画面では画面の半分しか使わず、
  **色の地ばかりが左右に残って「詰まって」見えた**（2026-09-11 の指摘。
  プレーリーカードは 1160px を使っている）。

  広げるときは、中身も一緒に広げること。**器だけ広げると、中身が
  34rem のまま左に溜まる** —— この file で一度やっている（下の
  「見出しの節」の注記）。読む文章は 34rem のまま中央に置く。
*/
:root { --page: 60rem; }

main {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------------------------------------------------------------- 見出し */

/*
  日本語の改行。

  # なぜ指定が要るのか

  既定では**どの文字の間でも折り返す。** 「その場で名刺／が表示されます」
  のように、語の途中で切れる（実際にそうなっていた）。

  auto-phrase は文節で折る。効かない環境では既定に戻るだけで、
  読めなくなることはない。strict は小さいカナや長音の前で折らせない。

  # 行長も効く

  1行が長いほど、折り返しの位置が悪目立ちする。本文は 34rem 前後に
  収める（日本語で1行 30〜40字）。
*/
/*
  リンクの色。**素の a に当てる。**

  # セレクタ列にコメントを挟まない（2026-09-20）

  ここは長いあいだ

  	main p,
  	main li,
  	/*（この説明）*​/
  	a { color: var(--accent); }

  と書かれていた。**CSS のコメントは解析前に消える**ので、実体は
  `main p, main li, a { … }` ——**頁の本文が全部サービスカラーで出て
  いた**（実測：`main p/li` 89個のうち 50個が #D4320B。面の本文は9枚中8枚）。

  直前の行が `main p, main li, h1, h2 { line-break: … }` だった所へ
  `a { color: … }` を差し込んだときの事故で、**この説明文自身が
  「素の a に当てる」と言っている。**

  墨（--text）なら白い面で 13.99。朱は 4.93 で、旗を降ろした側の淡い地
  （--zone-*）では 3.82〜4.22 まで落ちる —— 下の「淡い地の上に置かない」
  が、まさにその状態を警告していた。

  当てていないとブラウザ既定の青（#0000EE）が出て、暗い地に対して
  1.85 : 1 しかない。紹介ページの下端（規約・サポート）がその状態だった。

  --accent（＝主の色）は明るい地で 4.68、白い面で 4.93。**どちらも
  4.5 を超える**（2026-09-18 に紺から変えたとき、実際に出ている地を
  数えて確かめた —— 頁のリンクは全部 --bg か --surface の上にある）。
  暗い側は --pop が明るく寄るので 7.22。

  **淡い地の上に置かない。** 群ごとの淡色（--zone-*）の上では 3.8 まで
  落ちる。あそこに読ませるリンクを足すときは、地のほうを白にすること。
*/
a { color: var(--accent); }

h1, h2 {
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
/* 見出しは行の長さを揃える。**1文字だけ次行に落ちるのを防ぐ。** */
h1, h2 { text-wrap: balance; }

/*
  頭と脚は画面いっぱいに広げる。**本文だけ中央に寄せる。**

  # なぜ幅を揃えないのか

  役割が違う。本文は読ませるものなので行長を 46rem に抑える（広いと目が
  行末から行頭に戻れなくなる）。頭と脚は読む対象ではなく、
  **画面の縁を示すもの**。中央に寄せると、広い画面で「内容が真ん中に
  細く乗っているだけ」に見え、作りかけの印象になる。

  余白は clamp で上限を付ける。**画面幅に比例させたままにしない**
  （4K で見ると左右に 10rem 空き、ロゴが隅に飛ぶ）。
*/
/*
  上のバー。**スクロールしても残す**（2026-09-18）。

  # なぜ固定するのか

  頁は14画面ぶんある。下まで読んだ人が「入る」「戻る」をするには、
  **いちばん上まで戻す必要があった。** 入口が常に目の前にあれば、
  マイページの節を別に置かなくてよくなる（実際に外した）。

  # 地を敷く

  透けたまま固定すると、下を流れる中身と字が重なって読めない。
  地と同じ色で塗る。**影は付けない** —— 頁じゅうに面の重なりを
  作っていないので、ここだけ浮くと別の頁の部品に見える。

  境目には細い線だけを引く。スクロールして中身が下に潜ったことが
  分かればよい。

  # 縦の余白を詰める

  固定したぶん、常に画面を食う。2.5rem のままだと 14画面のうち
  1割近くをバーが占める。上を 1.2rem まで詰めて、下にも同じだけ取る。
*/
.head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 1.2rem clamp(1.5rem, 4vw, 4rem);
  /* ロゴを左、導線を右。 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* **折り返しを許す。** 導線が2つになったので、狭い画面では1行に
     収まらない。押せるものが画面の外へ出るより、ロゴの下へ落ちる
     ほうがよい（gap が縦にも効く）。 */
  flex-wrap: wrap;
  gap: 1rem;
}

/* 右の導線をまとめる。**2つの間は本文の余白より狭く。**
   離すと、別々の場所にある2つに見える。

   折り返したときも右に残す。**margin-left: auto** が要る — 無いと
   2行目の先頭（左）に落ちて、ロゴの真下にぶら下がって見える。 */
.head-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  margin-left: auto;
}

/*
  狭い画面でも**右上に残す**（2026-09-18 に直した）。

  もとは 26rem 以下で1行下に落とし、幅いっぱいに敷いていた。「左に
  不定形の空きができる」を避けるためだったが、**ロゴの下に帯が1本
  増えて、画面の頭が2段になる。** 電話では上端が一番狭い。

  右上は**どの画面でも同じ場所**で、探さずに見つかる。字を詰めれば
  ロゴと同じ行に収まる。
*/
@media (max-width: 26rem) {
  .head { gap: 0.5rem; }
  .head-nav { gap: 0.4rem; }
  .head-nav > a {
    font-size: 0.8125rem;
    padding: 0.5rem 0.7rem;
  }
}

/* ログインへの導線。**主役ではないが、探させない。**

   枠を付けて「押せるもの」だと分かる形にする。地色のままの文字だと、
   本文と同じ扱いに見えて目に留まらない（実際に読み落とされた）。

   塗りは入れない。塗ると「カードを買う」と同じ重さになり、
   このページの目的が2つあるように見える。 */
/* **主の色で枠と字を取る**（2026-09-18）。以前は墨の字に地色の枠で、
   押せるものだとは分かるが**このサービスのものには見えなかった。**
   ヒーローの「無料で始める」（.hero-cta2）と同じ形にして、頁の中で
   副の押しどころが1つの家族に見えるようにした。

   **塗らない。** 塗ると「カードを買う」と同じ重さになり、この頁の
   目的が2つあるように見える（元からの決め）。 */
.head-login {
  flex-shrink: 0;
  color: var(--pop);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.6rem 1rem;
  border: 1px solid var(--pop);
  border-radius: 999px;
  transition: border-color 0.15s, background-color 0.15s;
}
.head-login:hover {
  border-color: var(--pop-fill);
  background: var(--pop-soft);
}
.head-login:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.logo {
  display: block;
  height: auto;
  /* SVG は墨黒で描かれている。明るい地ではそのまま出る。
     **暗色のときだけ白抜きにする**（下の @media）。 */
  opacity: 0.9;
}

/* ---------------------------------------------------------------- 冒頭 */

/* 暗色のときはロゴを白抜きにする。印刷と同じ形をそのまま使う。 */
@media (prefers-color-scheme: dark) {
  .logo { filter: invert(1); }
}

.hero { padding: 3rem 0 0; }
/* **中央揃え**（2026-09-18、ワイヤーフレームに合わせた）。
 * 1列にしたので、左寄せだと広い画面で左半分に溜まる。 */
.hero > .inner { text-align: center; }
.hero .hero-act { justify-content: center; }
.hero .lead, .hero .hero-note { margin-inline: auto; }

/*
  主画像。**文字より先に目に入る大きさにする。**

  絵の中に余白を持たせてあるので、外側に余白を足さない
  （足すと間が抜ける）。
*/
/*
  主画像の帯。**主の色を画面いっぱいに敷く**（2026-09-18）。

  # なぜカードの色を変えないのか

  「カードを主の色にしたい」と言われて一度 BRICK（#B23A26）に替えた。
  **主の色そのものではない** —— 主の色 #E8380D で刷れるのは名刺版だけで、
  ロゴ版には無い色。ここに出しているのはロゴ版（値段のボタンと同じ
  3,480円のほう）なので、替えると**買えない色を売り物の絵に出す**。

  地のほうを主の色にすれば、嘘をつかずに華やかにできる。**生成りと墨の
  2枚は、朱の上でいちばんよく立つ**（リンクを貼ったときに出る絵
  ―― ogp.png ―― で確かめた。朱の地に朱のカードを置くと消える）。

  # 器ではなく地にする

  はじめは絵に角丸の面を付けたが、**面が1枚浮いて見えた** —— 頁の他の
  面（白い card-sec）と同じ形なのに中身が絵だけなので、器が余る。
  左右を切らずに敷けば、器ではなく地になる。

  100vw は**縦のスクロールバーの幅を含む**（323行の注記）。body の
  overflow-x: hidden が受け止める。オービットの帯と同じやり方。

  # 貼られたときの絵と揃える

  X や LINE に貼ると出るのは ogp.png で、**同じ組み**（朱の地・2枚の
  カード）。押して来た人が、同じ絵のある頁に着く。

  # 斜めの光

  アイコン・店頭の絵・SNS の告知と同じ形（両端が薄く、34% で満濃度）。
  3か所で別々に決めない。
*/
.hero-stage {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 2.1rem;
  /* 上下だけ空ける。**左右は空けない**（端まで敷くのが目的）。
     版面の SVG は影のぶん外側に透明な余白を持っているので、少しでよい。 */
  padding: 2.6rem 1rem 3rem;
}

/*
  帯そのもの。**擬似要素に置く。**

  # なぜ背景に直接書かないのか

  上の境目をぼかすのに mask を使う。要素そのものに掛けると**中の絵にも
  掛かる** —— カードの上端が一緒に消える。地だけを別の面に出しておけば、
  絵はそのまま残る。

  # 両端をぼかす

  生成りの地から朱へ、線を引かずに移る。上だけぼかして下を切ったら、
  **片方だけ直し忘れたように見えた**（組んで見つけた）。

  **長さは変える。** 上は 3.5rem、下は 2rem —— 上は見出しから降りて
  くる側なので長く取り、下は次の節が始まる側なので短くする。同じ長さに
  すると、帯の形そのものが無くなって、ただの霞になる。
*/
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      var(--pop-pale) 0%, var(--pop-fill) 34%, var(--pop-pale) 100%);
  /* 上端 3.5rem・下端 2rem で透明から不透明へ。**色を塗って隠さない**
   * —— 地の色を上に重ねる形にすると、頁の光（.hero::before）と合わずに
   * 継ぎ目が出る。 */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, black 3.5rem, black calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0, black 3.5rem, black calc(100% - 2rem), transparent 100%);
  pointer-events: none;
}

/* 絵は帯の上に。**位置を持たせて重ね順を決める**（擬似要素より後ろの
   要素が上に来る。z-index を足すと頁の光と積み重ねが絡む）。 */
.hero-stage > .hero-card { position: relative; }

.hero-card {
  display: block;
  width: 100%;
  max-width: 42rem;
  height: auto;
  /* **中央に置く。** 買う導線の真下なので、左寄せだとボタンと軸が
     揃わない。 */
  margin-inline: auto;
}

/*
  見本の公開ページへの案内。**絵の真下に置く。**

  # なぜ枠を付けないのか

  ヒーローには既に塗りのボタン（買う）と枠のボタン（無料で始める）が
  ある。**3つ目の枠を足すと、どれを押すのか決まらない。** ここは
  「押しどころ」ではなく「確かめ道」なので、素のリンクにする
  （押せるものは3つの役、という決めのうちの「素の a」）。

  # 箇条書きにしない

  1本しか置かない。`<ul>` に `<li>` 1つを入れると、**CSS が当たらない
  一瞬に行頭の黒丸が出る**（消しているのは list-style だけなので、
  スタイルが届かなければ既定に戻る）。中央寄せは下の grid が持つ。

  # 色は素の a のまま

  主の色になっている（2026-09-18 に --accent を朱へ揃えたため）。
  **ここで色を指定しない** —— 頁じゅうのリンクと同じ扱いにしておく。
  押しどころと見分けが付くのは、塗りと枠を持たないから。
*/
.hero-samples {
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.hero-samples-lead {
  /* section p の共通指定（margin: 0 auto 1rem）を上書きする。
   * **下の余白は grid の gap が持つ**（二重に空ける）。 */
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-sub);
}

/* 2行目だけ朱。**同じ大きさのまま色を変える。**
   大きさで差を付けると、折り返しの位置で釣り合いが崩れる。 */
h1 span + span { color: var(--pop); }
/* 面の見出しも同じ規則（2026-09-20）。**行ごとに span を持つ。**
   「かざすと、／**名刺が渡せる。**」の2行目を主の色にする。 */
.orbit-panel h1 span,
.orbit-panel h2 span { display: block; }
.orbit-panel h1 span + span,
.orbit-panel h2 span + span { color: var(--pop); }

h1 {
  margin: 0;
  /* 画面幅に沿わせる。仮の値。写真が決まったら釣り合いを見て詰める。 */
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-wrap: balance;
  /*
    句読点のぶん右へ寄せる（2026-09-18）。

    # なぜ要るのか

    「、」「。」は**字面が小さく、右側に大きな空きを持つ。** ブラウザは
    送り幅で中央に置くので、**見えているインクは真ん中より左**に来る。

    52px で測った実測：

      かざすと、      送り幅 260 / インク右端 225 → 右の余り 35px
      名刺が渡せる。  送り幅 364 / インク右端 330 → 右の余り 34px

    左の余りは 1〜3px しかないので、差の半分だけ左へ寄って見える。
    ボタンもリードも末尾に句読点が無く光学的に中央なので、**見出しだけ
    が左にずれて見える**（指摘を受けて測った）。

    量は (34 − 2) / 2 / 52 ≒ 0.31em。**2行とも余りが同じ**なので、
    1つの値で揃う。字の大きさが変わっても比率は変わらない。

    transform を使うのは、padding だと text-wrap: balance の折り返し
    判定に入る幅が変わるため。**見た目だけを動かす。**
  */
  transform: translateX(0.31em);
}

/*
  見出しの折り返しを句の境目だけに限る。

  # なぜ要るのか

  日本語には語の区切りに空白が無いので、**どこでも切れる。** そのうえ
  text-wrap: balance は行の長さを均そうとするため、実機（iOS Safari）では
  6文字ずつに割られ、「かざすと、名」／「刺が渡せる。」になった。

  Chrome は句点で切っていたので手元では再現しない。**実装ごとの選び方に
  任せない。**

  # なぜ inline-block なのか

  inline-block の中では折り返さないので、切れるのは span の間だけになる。
  balance も、その境目しか選べない。

  # 1つの句が入りきらないとき

  文字を送って収める（overflow-wrap）。**横にはみ出させない。** 語の中で
  切れるのは避けたいことだが、画面から出るほうが悪い（読めない）。
  利用者が文字を大きくしている場合に効く。
*/
h1 span {
  display: inline-block;
  overflow-wrap: anywhere;
}

.lead {
  margin: 1.5rem 0 0;
  font-size: 1.0625rem;
  color: var(--text-sub);
  max-width: 30rem;
}

/* ---------------------------------------------------------------- 節 */

section { padding: 4rem 0 0; }

h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 節の見出しは中央に置いて大きく。**カードの中で頭に立たせる。**
 *
 * 以前は本文と同じ左揃えで、大きさも 1.25rem だった。**節の切り替わりが
 * 文字の大きさでしか出ない**ので、下まで同じ調子で続いて見えた。
 *
 * 中央に置くのは見出しと、その上のラベルだけ。**本文は左揃えのまま**
 * （日本語の長い文を中央寄せにすると、行頭が揃わず読みにくい）。 */
.card-sec h2,
.card-sec .eyebrow-line,
.card-sec .eyebrow,
.bizcard h2,
.bizcard .biz-label {
  text-align: center;
}
/* 法人のカードも見出しを中央に。**中の段も中央に寄せる**
   （見出しだけ中央だと、軸が2つできる）。 */
.bizcard > .inner { max-width: none; text-align: center; }
/* **中身も中央。** 見出しと札とボタンが中央で、本文だけ左端から始まって
   いた（2026-09-12 の指摘）。1文ずつ span で切ってあるので、中央でも
   行頭が散らばらない。 */
.bizcard p { margin-inline: auto; text-align: center; }

/* 副の行き先（マイページへ・法人プランを見る）は**中央に置く。**
 *
 * 見出しを中央にしたので、左端に置くとカードの中に軸が2つできる。
 * **左右いっぱいに伸ばすのは「買う」だけ** —— この頁でいちばん
 * 押させたいものと、そうでないものを形で分ける。 */
/* 副の行き先は中央に置く。**指定は下の .entry-btn / .biz-btn 本体で
   行う** —— ここに書いても、後ろの `margin: 1.25rem 0 0` に消される
   （2026-09-09 に消された）。 */

/* 出資者の節は中央に。**見出しだけ中央で、中身が左にあると軸が2つ。** */
.fundask { text-align: center; }
.sponsors { justify-content: center; }
.card-sec h2 {
  font-size: 1.75rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.card-sec .eyebrow-line { margin-bottom: 0.75rem; }
@media (max-width: 30rem) {
  .card-sec h2 { font-size: 1.4375rem; }
  /* **説明の字も落とす**（2026-09-11 の指摘 ── スマホで下まで送るのが
     大変だった）。題は読ませる、説明は読み飛ばせる大きさにする。
     1文ずつ改行しているので、字を落としても行の頭は揃ったままになる。 */
  /* **見出し直下の説明にも効かせる**（2026-09-11。`.card-sec` の中だけに
     掛けていて、いちばん上の説明が大きいままだった）。 */
  .card-sec p,
  .card-sec li,
  .lead { font-size: 0.9375rem; line-height: 1.75; }
  .card-sec .note { font-size: 0.8125rem; }
  /* 段の間も詰める。**字だけ小さくすると、余白が目立って余計に長く見える。** */
  .card-sec p { margin-bottom: 0.8rem; }

  /* **絵も詰める**（2026-09-11）。スマホでの長さ（8.9画面ぶん）は、
     字よりも絵が占めていた。手順の絵と商品の絵に上限を置く。
     小さくしても何の絵かは分かる（カード・スマホ・QR のどれか）。 */
  .step-list .step-art-scene img { max-height: 11rem; width: auto; }
  /* **カードの絵には高さの上限を置かない**（2026-09-11 の指摘）。
     9rem に抑えると、幅が 238px にしかならず、**段の幅（318px）との差が
     左右の白い余りとして出た。** 場面の絵は幅いっぱいに出ているので、
     この1枚だけが引っ込んで見える。幅は段が決めるので、上限は要らない。 */
  .step-art-qr svg { width: 6.5rem; height: 6.5rem; }
  .price-img { max-width: 9rem; }
}

/* 読む文章の幅は変えない（34rem。1行が長いと目が戻れない）。
   **器の中で中央に置く** —— 見出しは中央なので、左詰めのままだと
   器を広げたぶんだけ軸が2つに割れる。 */
section p { margin: 0 auto 1rem; max-width: 34rem; }

.note {
  color: var(--text-sub);
  font-size: 0.875rem;
}

/* 生成りの面。**1か所だけ紙にする。** 全部を紙にすると、
   墨黒を地にした意味が消える。 */
/*
  紙色の面。**角を丸める。**

  以前は左右に画面いっぱいまで伸ばした角の立った帯だった。地色との
  境目が直線で切れるので、印刷物の断ち落としのように見えていた。

  角を丸めると、面が「置かれたもの」に見える。余白も詰めた
  （帯の中に文章が3つしかないのに、上下 2.5rem は空きすぎ）。
*/
/* 地と同じ色系の面。**枠で立てる。**
   地が明るくなったので、生成りを敷いても「紙を差した」ようには見えない
   （地との差が出ない）。アプリ側のパネルと同じ作りに寄せる。 */
.band {
  margin: 3.5rem 0 0;
  padding: 1.75rem 1.75rem 2rem;
  border-radius: 1rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.band h2 { margin-top: 0; }
/* 帯の中は行が詰まって見えるので、少し空ける。 */
.band p { margin: 0.9rem 0 0; }
.band .note {
  color: var(--text-sub);
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- 写真
 *
 * 実物の写真（2026-09-11）。**ここまでは全部、こちらが描いた絵だった**
 * —— 版面のSVG、アプリの画面、線画。描いた絵は「こう刷るつもり」までしか
 * 言えない。**刷り上がりを見せられるのは写真だけ。**
 *
 * # 地に溶かさない
 *
 * 写真の地は黒に近い。紹介ページの地は生成りなので、そのまま置くと
 * 四角い黒が唐突に出る。**角を丸めて影を敷き、「置かれた写真」にする。**
 *
 * # 文字は写真の上に置く
 *
 * 以前は小さい写真を横に並べ、下に説明を1行書いていた。**写真が図版に
 * なる。** 横幅いっぱいの帯にして、短い1行を写真の上に置くと、写真
 * そのものが節の主役になる（プレーリーカードの作りを見て直した）。
 *
 * # 文字は上、刻印は下
 *
 * **左下は刻印（tapuda）の場所。** 文字をそこに置くと、見せたいものを
 * 文字で隠す。上に置き、暗幕も上からだけ掛ける。
 *
 * # 帯の比を CSS で決める
 *
 * 元は 3:2（1500×1000）。広い画面では 2:1 に切って帯にし、狭い画面では
 * 3:2 のまま出す。**画像を2枚用意しない** —— 同じ写真の切り方が2か所に
 * 分かれると、片方だけ差し替わる。
 *
 * 帯にすると上下が落ちるので、`object-position` で位置を決める。
 * **既定の中央のままだと、カードの上端か刻印のどちらかが切れる。**
 *
 * `aspect-ratio` を CSS で決めるので、`img` の width・height は元の比を
 * 書いておく（読み込み中に下の文章が飛ばないため）。
 *
 * # 色は版面に寄せる
 *
 * 撮ったままの朱は照明のぶん明るく、すぐ下の STEP の版面（#B23A26）と
 * 並ぶと**別の商品に見えた。** 面の平均が版面の値に来るように寄せてある。
 */

.shots {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
}

.shot {
  position: relative;
  margin: 0;
  border-radius: 0.875rem;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow);
}

.shot img {
  display: block;
  width: 100%;
  /* **`height: auto` を消さない。** `img` の height 属性がそのまま高さに
     効いて（1000px）、写真が拡大されて出た。 */
  height: auto;
  /* 広い画面は帯。**元の比のまま出すと縦に伸びすぎて、1枚で画面が
     埋まる。** 下に寄せて刻印を入れる。 */
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center 35%;
}

/* 文字の下だけ暗くする。**写真の明るさは場所によって違う**ので、
   置く側を暗いところに寄せたうえで、保険を掛ける（白文字が乗る）。

   **薄く、狭く。** 最初は左半分に 0.55 まで掛けたら、朱の面が濁って
   別の色に見えた。商品の色を見せる写真なので、暗幕は文字の高さまでにする。 */
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.24) 24%, rgba(0, 0, 0, 0) 50%);
}

.shot figcaption {
  position: absolute;
  z-index: 1;
  top: clamp(1rem, 3vw, 1.75rem);
  left: clamp(1.25rem, 4vw, 2.5rem);
  right: clamp(1.25rem, 4vw, 2.5rem);
  color: #FFFFFF;
  font-size: clamp(1.0625rem, 2.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  /* 写真の粒の上でも輪郭が残るように。 */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* 切れる場所を句の境目だけに限る（見出しと同じ扱い）。**日本語は語の
   区切りに空白が無いので、放っておくと「実際に／刷って」で割れる。** */
.shot figcaption span { display: inline-block; }

@media (max-width: 40rem) {
  /* 狭い画面では帯にしない。**2:1 のまま縮めると、カードが指の爪ほどに
     なる。** 元の比で出す（刻印もそのまま入る）。 */
  .shot img { aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------------- 価格 */

/*
  価格。**2つを並べて比べさせる。**

  以前は横線で区切った縦の並びだった。上下に積むと、比べるのに目が
  往復する。買うかどうかの判断は2つの差で決まるので、横に置く。

  狭い画面では縦に積む（横に2つだと1つが窮屈になる）。
*/
.prices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) {
  /* **横に並べない。** 1商品1行にして、絵を大きく見せる（2枚並べると
     絵も文字も半分になり、値段の話が通らない）。 */
  .prices { grid-template-columns: 1fr; gap: 1.5rem; }
}

/*
  価格の面。**地と同じ色では枠線だけになり、地に溶ける。**

  面を敷いて、影で少し持ち上げる。枠線も1段濃くする（--border は
  面の中の区切り用で、面そのものの輪郭には弱い）。
*/
/*
  商品の絵。**幅に追従させ、縦は比で決まる。**

  # スマホで縦に伸びないようにする

  価格の面が2つ縦に並ぶので、絵をそのまま入れると1画面を超える。
  **狭い画面では絵を小さく**して、名前と値段が同時に見えるようにする。

  aspect-ratio を置くのは、読み込み前に高さを確保するため。**無いと
  絵が出た瞬間に下がずれる**（値段を読んでいる最中に動く）。
*/
.price-img {
  display: block;
  width: 100%;
  max-width: 12rem;
  height: auto;
  aspect-ratio: 95 / 65;
  margin: 0 0 1rem;
}
/* **狭い画面で絵を浮かせる指定は落とした**（2026-09-02）。
 *
 * 1商品1行にしたときに残っていて、絵が絶対配置のまま文字の上に重なった
 * （商品名と説明が絵の後ろに隠れた）。いまは色地の枠に収まっているので、
 * 浮かせる必要が無い。 */

.price {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.875rem;
  box-shadow: 0 2px 6px var(--shadow);
  display: flex;
  flex-direction: column;
}

/* 名前を上、金額を下に置く。**横並びだと、名前が長い側で金額が落ちる。** */
.price-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* 商品名。**値段より先に目に入る大きさにする**（2026-09-12 の指摘）。
   以前は本文と同じ大きさの太字で、絵と値段に挟まれて埋もれていた。
   色はサービスの朱（押しどころではないので、塗らずに文字色だけ）。 */
.price-name {
  display: block;
  /* **面の字の階段に繋ぐ**（2026-09-20）。`.reach-list` で直したのと
   * 同じ繋ぎ忘れがここに残っていた —— 面の本文が 12px まで縮むのに
   * 商品名だけ 18px 固定で、狭い幅で2行に折れて価格の表を
   * 186→239px に膨らませ、**SE3 で唯一の「買う」枚を壊していた。**
   * 面の外では :root の既定（0.95rem）× 1.18 ＝ ほぼ 18px で変わらない。 */
  font-size: calc(var(--orbit-fs-body) * 1.18);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--pop);
  margin-bottom: 0.15rem;
}

.price-yen {
  font-size: 1.5rem;
  font-weight: 700;
  /* 数字を等幅に。**価格が縦に並ぶので桁を揃える。** */
  font-variant-numeric: tabular-nums;
}
.price-yen small { font-size: 0.875rem; font-weight: 400; margin-left: 0.15rem; }

.price-desc {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--text-sub);
}

/*
  買う前の警告。**説明文と見た目で分ける**（2026-09-18 の指摘）。

  # なぜ朱ではないのか

  朱は「押すとここから出る」の色。警告に使うと、**制約の行がいちばん
  押したそうに見える。** 地を薄い朱（--pop-soft）にして左に朱の帯を
  立てるだけにし、字は本文の色のまま読ませる。

  # 色だけに頼らない

  頭の「ご注意：」は本文に書いてある（CSS の ::before で足していない）
  ので、色が出ない環境でも、読み上げでも、警告だと分かる。
*/
.price-caution {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--pop-soft);
  border-left: 3px solid var(--pop);
  border-radius: 0 4px 4px 0;
}

/* 準備中のものは薄くする。**消さない**（近日出ることが伝わる）。
 *
 * **絵の面には掛けない**（2026-09-12）。絵の側は札と薄さを自前で持って
 * いるので、行ごと薄くすると二重に掛かって札まで読めなくなる。 */
.price-soon .plan-body { opacity: 0.62; }

/* 準備中のものは沈める。**消さない。**
   出すつもりがあることは伝えたほうがよい。 */
.price-soon .price-name { color: var(--text-sub); }

.tag {
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--text-sub);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 購入 */

.buy { padding: 3.5rem 0 0; }

/* ネイビーはここだけ。**押させたい面が1つだと分かる形にする。** */
.cta {
  display: block;
  /* **器いっぱいには伸ばさない。** 器を 60rem に広げたら、締めのボタンが
     960px の棒になった（2026-09-11）。押しどころは、押せる形に見える
     大きさで留める。 */
  max-width: 26rem;
  margin-inline: auto;
  padding: 1.15rem 1.5rem;
  background: var(--accent-fill);
  color: var(--on-accent);
  border: 1px solid var(--accent-fill);
  border-radius: 0.5rem;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  /* **このページでいちばん押させたいもの。** 影で持ち上げる。 */
  box-shadow: 0 2px 6px var(--shadow);
}
/* 押したときの変化は明暗で作る。**別の色を持ち込まない。** */
.cta:hover { filter: brightness(1.15); }
.cta:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* 止まっているときのボタン。**形は残して、押せないことを示す。**
   消すと「売っていないサービス」に見える。 */
/*
  止めているときのボタン。**形は残して、押せないことを示す。**

  以前は塗りなし・点線だったので、明るい地では消えていた
  （何が置いてあるのか分からない）。面を敷いて輪郭を出す。

  **押せるようには見せない。** 塗りは地に近い面のままで、押させたい面
  （--accent-fill）とは明らかに違う。点線と薄い文字も残す。
*/
.cta-off {
  background: var(--surface);
  color: var(--text-sub);
  border-color: var(--border-strong);
  border-style: dashed;
  box-shadow: none;
  cursor: default;
}

/*
  止めている理由の1文。**ボタンと同じ幅の中で中央に置く。**

  section p の max-width: 34rem が効いていて、ボタン（43rem）より狭い枠の
  中で中央寄せになっていた。見た目には「少し左に寄った文字」で、
  中央寄せの指定が入っていることが分かりにくい。

  本文の行長を抑える規則は読ませる文章のためのもので、ボタンに添える
  1文には要らない。
*/
.paused-note {
  max-width: none;
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-sub);
}

/* ---------------------------------------------------------------- 脚 */

/* 脚も画面いっぱい。**区切りの線が画面を横切る**ので、本文が終わった
   ことが分かる（中央だけの線は、まだ続きがあるように見える）。 */
.foot {
  margin: 5rem 0 0;
  padding: 2rem clamp(1.5rem, 4vw, 4rem) 3rem;
  border-top: 1px solid var(--line);
}
/* トラックを出しているときは**詰める**（2026-09-20 の指摘：
   「区切り線から背景メインカラーまで謎の余白がある」）。
   5rem は縦の頁の節と節のあいだの間合い。トラックの最後は**主の色の
   帯で終わる**ので、そこから 80px の白が空くと「何か抜けている」
   ように見える。 */
.orbit-on .foot { margin-top: 1.5rem; }

.legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
}
.legal a { color: var(--text-sub); text-decoration: none; }
.legal a:hover { color: var(--text); text-decoration: underline; }

.mark {
  margin: 2rem 0 0;
  color: var(--text-sub);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: no-preference) {
  .cta, .legal a { transition: background-color 0.15s ease, color 0.15s ease; }
}

/* ---------------------------------------------------- スクロールで現れる
 *
 * # JavaScript は使えない
 *
 * CSP が `default-src 'none'` で `script_src` を持たない。**このページで
 * スクリプトは1行も動かない。** 監視して class を付ける普通の作りは
 * 取れないので、CSS のスクロール駆動アニメーションで組む
 * （animation-timeline: view()）。
 *
 * # 既定は「見えている」
 *
 * いちばん大事な点。**opacity: 0 を素で書かない。**
 *
 * 対応していないブラウザ（いまの Firefox など）でそれを書くと、
 * 中身が最初から最後まで出ない。売り物の説明が真っ白なページになり、
 * こちらの画面では再現しないので気づけない。
 *
 * 消える指定はキーフレームの中だけに置き、@supports で囲う。効かない
 * 環境では**最初から見えているだけ**になる。
 *
 * # 動きを止めたい人には出さない
 *
 * prefers-reduced-motion は端末の設定。**目が回る人がいる。**
 *
 * # 冒頭には掛けない
 *
 * 最初の画面はすでに見えている位置なので、掛けても一瞬ちらつくだけ。
 * 現れて意味があるのは、下から入ってくるものだけ。
 */
@keyframes intro-reveal {
  from {
    opacity: 0;
    /* 動かす量は控える。**大きく動かすと安っぽくなる。**
       紙の面が下から起き上がる程度。 */
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /*
      掛ける先。**節ごとではなく、目に入る塊ごと。**
      節に掛けると見出しと中身が一緒に動いて、塊が大きすぎる。
    */
    /*
      **画面いっぱいの節そのものには掛けない。** あちらは
      transform: translateX(-50%) で外へ出しているので、動きの
      transform に上書きされて位置が飛ぶ（実際に右へ590pxずれた）。
      掛ける先は中身（.inner）にする。
    */
    /*
      **大きな器には掛けない**（2026-09-18）。

      iPhone で「速くスクロールするとカクカクする」と言われて調べた。
      視差効果を減らす設定を入れると滑らかになったので、動きが原因と
      分かった。

      opacity を動かす器は、**中身をまるごと別の面に焼いてから重ねる**
      ことになる。掛けていた先のうち2つが大きすぎた ——

        .full > .inner        1,100px・子孫 71
        .card-sec > .inner    1,166px・子孫 43・影 6

      速く送ると、この器がいくつも同時に範囲に入る。頁の下半分には
      連動する要素が8つ並んでいるので、そこがいちばん出やすい。

      **小さいものだけ残す。** 見出し（42px）と値段の札（286px）なら
      焼き直しても軽い。器ごと持ち上げる動きは無くなるが、**読む前に
      画面が詰まるより、出方が地味なほうがよい。**
    */
    .prices > li,
    .step-list > li,
    section > h2,
    section > .note {
      animation: intro-reveal linear both;
      animation-timeline: view();
      /* entry 5% で始め、cover 22% で終える。**画面の下端に触れてから
         少し入ったところで完了する。** 読み始める位置に来たときには
         止まっていること（動いている文字は読めない）。 */
      animation-range: entry 5% cover 22%;
    }
    /*
      価格の2枚は少しずらす。**同時に出ると1枚の板に見える。**
      2枚目だけ範囲を後ろにずらして、わずかに遅れて揃う。
    */
    .prices > li:nth-child(2) {
      animation-range: entry 12% cover 28%;
    }
    /* 手順は左から順に。**3つ同時だと1枚の板に見える。** */
    .step-list > li:nth-child(2) { animation-range: entry 10% cover 27%; }
    .step-list > li:nth-child(3) { animation-range: entry 15% cover 32%; }
  }
}

/* ---------------------------------------------------------------- 冒頭の部品
 *
 * # なぜ足したのか
 *
 * 「白と黒だけで堅い」という指摘（2026-09-01）。**色は増やさず**、
 * 商品にある朱を差し色に上げ、形（丸み）と並べ方で軽くする。
 *
 * 値段は冒頭のボタンに入れる。**下の「価格」まで下がらないと値段が
 * 分からない**状態だと、迷った人はそこまで来ない。
 */
.eyebrow {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--pop-soft);
  color: var(--pop);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 冒頭のボタン。**丸くする。** 角のあるボタンは書類に見える。 */
/* 押しどころを2つ並べる。
 *
 * # 幅を揃える（2026-09-18 の指摘）
 *
 * 「カードを買う 3,480円〜」は値段のぶん長く、「無料で始める」より
 * 広い。中央に置いても**対の重心が左へずれて見える**（「左によってる
 * 気がする」）。
 *
 * **長いほうに合わせて等幅にする。** grid の 1fr を2本にすると、
 * 中身の長さに関係なく同じ幅になる。
 *
 * 折り返したら1本にする。**縦に積んだときも幅は揃う。**
 */
.hero-act {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-content: center;
  gap: 0.9rem 1.25rem;
  margin: 1.5rem 0 0;
  /* 広い画面で伸びすぎないように。**2つ分の上限。** */
  max-width: 30rem;
  margin-inline: auto;
}
@media (max-width: 26rem) {
  .hero-act { grid-template-columns: minmax(0, 1fr); }
}
.hero-cta {
  /* **19px の太字**（2026-09-20）。
   *
   * 白抜き × --pop-fill は 4.20 で、AA の本文基準 4.5 に届かない。
   * tokens_test.go:140-176 がこの 4.19 を通した条件を書いている ——
   * 「**18.66px 以上の太字なら 3.0 が基準**。主のボタンは太字で 19px に
   * してある（web の .submit）」。紹介ページの .hero-cta は 17px で、
   * **その条件だけ外れていた**（検査はトークンの値しか見ないので
   * 気づけない、とそのコメント自身が書いている）。
   *
   * 色は変えずに、条件のほうを満たす。実測で面からは溢れない。 */
  font-size: 1.1875rem;
  display: flex;
  align-items: baseline;
  /* 等幅にしたので、中身は中央に。**左詰めだと札の中で軸がずれる。** */
  justify-content: center;
  gap: 0.7em;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  background: var(--pop-fill);
  color: var(--on-pop);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 16px var(--pop-shadow);
}
/* 無料で始める。**枠だけの副。**
 *
 * 塗りは「買う」の1つだけにする（2つ塗ると、どちらを押すのか決まらない）。
 * 大きさは塗りのほうと揃える ── 隣に並ぶので、小さいと「おまけ」に見える。
 *
 * 色は朱（--pop）。明るい地で 5.66、暗い地で 6.04（機械で測った）。
 */
.hero-cta2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  border: 1px solid var(--pop);
  border-radius: 999px;
  /* **枠のボタンは地を白で塗る**（2026-09-20 に規則として決めた）。
   * 透明だと後ろの地が透けて、面の上でボタンの形が消える。
   * .orbit-cta2 は先に白にしてあったので、こちらを揃える。 */
  background: var(--surface);
  color: var(--pop);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
}
.hero-cta2:hover { background: var(--pop-soft); }

.hero-cta-off {
  background: var(--surface);
  color: var(--text-sub);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: default;
}
/* 値段はボタンの中。**別行に置くと、押す前に読まれない。** */
/* 値段。**薄くしない・小さくしない**（2026-09-20）。
 * `opacity: 0.92` が掛かっていて、白抜き × --pop-fill の 4.20 が
 * **3.75 まで落ちていた** ——**ボタンの中でいちばん読ませたい数字が、
 * いちばん薄い。** 大きさも本体に揃える（下の 1.1875rem = 19px）。 */
.hero-cta em { font-style: normal; font-size: inherit; opacity: 1; }
/* **2列にまたがらせる**（2026-09-18）。.hero-act を2列の格子にしたとき
   （ボタンの幅を揃えるため）、この断りも**片方の列に落ちていた** ——
   幅 230px しか無く、「カードが無くても、QRで / 名刺を渡せます。」と
   文の途中で折り返して、左のボタンの下に寄っていた。 */
.hero-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-sub);
}

/* 使う人。**役割で見せる。**
 *
 * いまのページには業種の話が1つも無い。名刺を配る人が「自分のことだ」
 * と分かる手掛かりが無いと、業務用の道具に見える。
 */
.who {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
}
.who li {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text);
}

/* ---------------------------------------------------------------- 色の見本
 *
 * **色を選べること自体が楽しい部分**で、しかも実在する（刷れる）。
 * 名前は出さない — 伝統色名は初めて見る人にも印刷業者にも通じない。
 * 見本と符号で示す（画面に色名を出さない、という決まり）。
 */
.colors {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.25rem 0 0;
  padding: 0;
}
.colors li { width: 5.25rem; }
.colors i {
  display: block;
  height: 3.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
}
.colors code {
  display: block;
  margin: 0.4rem 0 0;
  font-size: 0.6875rem;
  color: var(--text-sub);
  letter-spacing: 0.02em;
}
.sw-sumi { background: var(--card-sumi); }
.sw-kinari { background: var(--card-kinari); }
.sw-navy { background: var(--card-navy); }
.sw-shu { background: var(--card-shu); }
/* 重ねは生成りの地に紺の四角。**1枚で2色**なので斜めに割る。 */
.sw-kasane {
  background: linear-gradient(135deg, var(--card-kinari) 62%, var(--card-navy) 62%);
}

/* ---------------------------------------------------------------- 締めの面
 *
 * 紺の面で閉じる。**最後にもう一度、買う場所を出す。**
 * 白い地のまま終わると、どこで終わったのか分からない。
 */
/* 締めの面。**紺で閉じると重い**という指摘（2026-09-01）。
   薄い朱の面にして、字は本文の色のまま。**押させたいものだけが色を持つ。**
   本文 12.56:1、補助 4.78:1、朱の字 5.35:1（暗い側も 12.94 / 4.91 / 5.49）。 */
.close {
  /* **一括指定にしない。** margin: … 0 0 は .full の左マージン（画面
     いっぱいに出すための 50%）を打ち消す。実際に右へずれた。 */
  margin-top: 3.5rem;
  padding: 2.25rem 1.75rem 2.5rem;
  border-radius: 1.5rem;
  background: var(--pop-soft);
  color: var(--text);
}
.close h2 { color: var(--text); }
.close p { color: var(--text-sub); }
.close .cta {
  background: var(--pop-fill);
  color: var(--on-pop);
  border-color: var(--pop-fill);
  border-radius: 999px;
  box-shadow: 0 6px 16px var(--pop-shadow);
}

/* 価格の面も丸くする。**冒頭のボタンと同じ丸み**に寄せる。 */
.price { border-radius: 1.25rem; }
.price-tag {
  align-self: flex-start;
  margin: 0.6rem 0 0;
  padding: 0.25rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--pop-soft);
  color: var(--pop);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- 明るくする
 *
 * 「もう少し明るく」という指摘（2026-09-01）。**地の色は動かせない**
 * （アプリ・iOS・Android と突き合わせている）ので、
 *
 *	冒頭に白い光を敷く
 *	節の面を白にして、白い面積を増やす
 *	丸みを大きくして、空気を入れる
 *
 * の3つで上げる。色は増やしていない。
 */
.hero {
  position: relative;
  padding-top: 1.5rem;
}
/* 光は擬似要素で敷く。**中身より後ろ**（字の上に薄い膜を掛けない）。 */
.hero::before {
  content: "";
  position: absolute;
  inset: -6rem -50vw 30%;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 30% 30%, var(--wash-pop) 0%, transparent 70%),
    radial-gradient(90% 80% at 50% 20%, var(--wash) 0%, transparent 72%);
  pointer-events: none;
}

/* 節を白い面に載せる。**地が続くと沈む。** */
.panel {
  margin: 3.5rem 0 0;
  padding: 2rem 1.75rem 2.25rem;
  border-radius: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.panel > h2 { margin-top: 0; }
/* 狭い画面では面の余白を詰める。**面の中に面を置くと幅が減り、
   文字が3〜4字で折れる**（価格の説明が実際にそうなった）。 */
@media (max-width: 30rem) {
  .panel { padding: 1.5rem 1.125rem 1.75rem; }
  .close { padding: 1.75rem 1.25rem 2rem; }
}

/* 面の丸みを揃える。**角が立つと書類に見える。** */
.band { border-radius: 1.5rem; }
.price { border-radius: 1.25rem; }

/* ---------------------------------------------------------------- 動き
 *
 * # JavaScript は使えない
 *
 * CSP が `default-src 'none'`。**このページでスクリプトは1行も動かない。**
 * 他社の同種のサイトは JS で動かしているが、こちらは CSS だけで組む。
 * 緩めない — 一度緩めた前例を根拠にさらに緩める、をやらない。
 *
 * # 動きを止めている人には出さない
 *
 * すべて prefers-reduced-motion の中に置く。**目が回る人がいる。**
 * 外に出すと、設定を無視して動く。
 *
 * # 既定は「止まって見えている」
 *
 * 対応していないブラウザでも、中身は最初から見えているだけになる。
 * opacity: 0 や translate を素で書かない（現れる仕掛けと同じ考え方）。
 */

/* 使う人の帯。**流れる。** 画面に入りきらない数を見せる。 */
.who-belt {
  margin: 1.75rem 0 0;
  display: flex;
  gap: 0.5rem;
  overflow: hidden;
  /* 上下に破線（2026-09-18、ワイヤーフレームに合わせた）。
   * **帯だと形で分かる。** 線が無いと、流れている字が本文の続きに
   * 見える。 */
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  padding: 0.7rem 0;
  /* 端を溶かす。**切り口が見えると、途切れて見える。** */
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.who-belt .who {
  margin: 0;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

@keyframes intro-belt {
  from { transform: none; }
  /* 2つ並べた片方ぶんだけ動かす。**そこで折り返すと繋がって見える。**
     幅は中身で決まるので、割合ではなく片方の幅（100%）で書く。 */
  to { transform: translateX(calc(-100% - 0.5rem)); }
}

/*
  名刺の絵。**持ち上げて、置く。**

  # 動きが小さすぎた（2026-09-15）

  0.6rem（約 10px）を 7 秒で往復していた。**動いていることに気づかない。**
  画面を見ている時間より周期のほうが長いので、止まっているように見える。

  1.2rem（約 19px）に倍にして、傾きも 0.35°→1.2° に。**上がりきった所で
  少し待つ**（40〜60% を同じ姿勢にする）ので、往復ではなく「持ち上げて、
  置く」に読める。同じ振れ幅でも、止まる瞬間があるほうが目に入る。

  周期は 7s → 6s。**振れ幅を上げたぶん速くしないと、間延びする。**

  大きく動かすと安っぽくなる、という決めは変えていない。**紙が一枚
  浮くくらい**までで、回したり跳ねさせたりはしない。
*/
@keyframes intro-float {
  0%   { transform: none; }
  40%  { transform: translateY(-1.2rem) rotate(-1.2deg); }
  60%  { transform: translateY(-1.2rem) rotate(-1.2deg); }
  100% { transform: none; }
}

/* 色の見本。**入ってくるときに1枚ずつ遅らせる。** 同時だと板に見える。 */
@keyframes intro-swatch {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .who-belt .who {
    animation: intro-belt 38s linear infinite;
  }
  /* **触っても止めない**（2026-09-09 の指摘）。
     以前は hover で止めていた。指の端末は除いていたが、
     「タップしたりマウスを近づけると止まる」のが気になるという指摘。
     読ませるための帯ではなく、**流れていること自体が見どころ**なので、
     止まる必要が無い。動きを止めたい人には下の reduce で応える。 */

  .hero-card { animation: intro-float 6s ease-in-out infinite; }

  /*
    面の中では**上下に同じだけ揺れる**（2026-09-21 の指摘：「PC だと
    画像が中央より上目にある気がする」）。

    `intro-float` は 0 → -1.2rem → 0 の**片道**で、しかも 40〜60% は
    上がったまま止まる。縦に長い頁では紙が一枚持ち上がって見えてよいが、
    **面の中では素の位置＝中央**なので、平均すると常に中央より上に居る
    ことになる。実測で上端が -15px（面からはみ出す）、下が +7px。

    振れ幅を半分にして、中央を挟んで上下に振る。**動きは残す** ——
    止めると、頁と面で同じ絵の性格が変わる。
  */
  @keyframes orbit-float {
    0%   { transform: translateY(0.6rem); }
    40%  { transform: translateY(-0.6rem) rotate(-0.8deg); }
    60%  { transform: translateY(-0.6rem) rotate(-0.8deg); }
    100% { transform: translateY(0.6rem); }
  }
  .orbit-on .orbit-panel .hero-card { animation-name: orbit-float; }

  /* 押せるものは、触ると少し持ち上がる。 */
  .hero-cta, .cta {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .hero-cta:hover, .cta:hover { transform: translateY(-2px); }
  .hero-cta:active, .cta:active { transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 見本は入ってくるときに1枚ずつ。**5枚が順に揃う。** */
    .colors li {
      animation: intro-swatch linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    .colors li:nth-child(2) { animation-range: entry 14% cover 34%; }
    .colors li:nth-child(3) { animation-range: entry 18% cover 38%; }
    .colors li:nth-child(4) { animation-range: entry 22% cover 42%; }
    .colors li:nth-child(5) { animation-range: entry 26% cover 46%; }

    /* 2つの面（仕事・趣味）も、左右で少しずらす。 */
    .two-cols > div { animation: intro-reveal linear both; animation-timeline: view(); }
    .two-cols > div:nth-child(1) { animation-range: entry 6% cover 24%; }
    .two-cols > div:nth-child(2) { animation-range: entry 12% cover 30%; }
  }
}

/* 仕事と趣味の2列。**狭い画面では縦。** */
.two-cols {
  display: grid;
  gap: 1.25rem;
  margin: 1rem 0 0;
}
.two-cols h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: var(--pop);
}
.two-cols p { margin: 0; color: var(--text-sub); line-height: 1.9; }
@media (min-width: 40rem) {
  .two-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ---------------------------------------------------------------- 左右いっぱい
 *
 * # なぜ要るのか
 *
 * 中央の段に収めると、**流れているものが途中で切れて見える。** 帯は
 * 画面の端から端まで通っていないと、動きが途中で止まった絵になる。
 *
 * main の幅を変えずに、節だけ外へ出す。**幅の計算を1か所に閉じる。**
 */
.full {
  /* **親の余白に左右されない出し方。** margin-inline: calc(50% - 50vw) は
     親に padding があると左だけずれる（実際にずれた）。
     中央を基準に置いてから、画面の半分ぶん戻す。 */
  width: 100vw;
  max-width: 100vw;
  /* 親の中央を基準に置いて、自分の幅の半分だけ戻す。**left と margin の
     組み合わせは親の padding で崩れる**（実際に崩れた）。transform は
     自分の幅（100vw）を基準にするので、親の余白に左右されない。 */
  margin-left: 50%;
  transform: translateX(-50%);
}
.full > .inner {
  margin-inline: auto;
  padding-inline: 1.25rem;
  max-width: 34rem;
}

/* 意匠の節。**地は淡いまま。**
 *
 * 一度ここを朱にして戻した（2026-09-09）。**朱のカード（BRICK）が地に
 * 溶けて消えた** —— 10種のうち1つが見えなくなる。墨や紺にしても同じ
 * ことが起きる（その色のカードが消える）。
 *
 * **見本を並べる面は、どの見本とも似ていない色でなければならない。**
 * Instagram の絵で同じことを一度学んでいる（生成りの地に生成りの
 * カードが見えなかった）。
 */
/* 意匠の節は**カードに入れない。**
 *
 * 流れる帯を画面の端まで出したいが、カードは `overflow: hidden` で
 * 縁で切る（そのために付けてある）。**帯を入れると縁で止まる。**
 *
 * 見出しだけを中央に置いて、帯は群の地の上を流す。 */
.designs-sec {
  margin-top: 2.5rem;
  padding: 0;
}
.designs-sec > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: center;
}
.designs-sec > .inner .note { max-width: none; }
.designs-sec h2 {
  font-size: 1.75rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
@media (max-width: 30rem) {
  .designs-sec h2 { font-size: 1.4375rem; }
}

/* 流す帯。使う人の帯と同じ作り。 */
.belt {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.design-row {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
}
.design-row li { flex: 0 0 auto; text-align: center; }
.design-row img {
  display: block;
  width: 10.75rem;
  height: auto;
  border-radius: 0.625rem;
  /*
    枠は **--border ではなく --border-strong**（2026-09-20）。

    意匠13種は白 #FFFFFF から墨 #1A1A1A まであり、**どんな地を選んでも
    必ずどれかが地と同じ色になる**（最善の地でも最小 1.70）。地の色では
    解けないので、枠で解く。

    絵は枠の無いべた塗りの SVG（design-white.svg は `<rect fill="#FFFFFF">`
    だけ）。**絵そのものに縁が無いので、CSS の枠が唯一の輪郭。**

    --border #E4DFD3 では、地に対して 1.14〜1.33、いちばん明るい見本
    （WHITE・IVORY・SAND）に対しても 1.08〜1.33 —— **事実上ゼロ**だった。
    円環の面（--zone-kinari #F2EDE1）に IVORY（同じ #F2EDE1）を並べて
    いて、**比 1.00 で完全に消えていた。**

    --border-strong #8A857A でも**足りない** —— 苔・紺・朱の地で 2.85〜2.87、
    SAND STRIPE #E3D6BC に対して 2.56。**手で計算して 3.67 と思っていたが、
    測る地を白と生成りだけにしていた。**

    --text-sub #6E6B63 なら最小 3.70（地 4.13〜5.32、明るい見本
    3.70〜5.32）。非テキストの基準 3:1 を、明暗の両方で満たす。
  */
  border: 1px solid var(--text-sub);
  box-shadow: 0 6px 14px var(--shadow);
  background: var(--surface);
}
.design-row code {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  color: var(--text-sub);
}

@keyframes intro-belt-designs {
  from { transform: none; }
  to { transform: translateX(calc(-100% - 1rem)); }
}

@media (prefers-reduced-motion: no-preference) {
  .designs .design-row { animation: intro-belt-designs 46s linear infinite; }
  /* **指では止めない**（上と同じ理由）。 */
}

/* 使う人の札。**1つずつ色を変える。** 5色の中で回すので、色は増えない。
 * 地は淡くして、字は本文の色のまま（読める側に倒す）。 */
.who li:nth-child(4n + 1) { border-color: var(--pop); }
.who li:nth-child(4n + 2) { border-color: var(--card-navy); }
.who li:nth-child(4n + 3) { border-color: var(--border-strong); }
.who li:nth-child(4n) { border-color: var(--pop); }
.who li { font-weight: 700; }

/* ---------------------------------------------------------------- 節ごとの地
 *
 * # なぜ変えるのか
 *
 * 「生成り一色だと機械が作った感じがする」という指摘（2026-09-02）。
 * **節ごとに地を変えると、読む区切りが色で分かる。**
 *
 * # 増やす色は商品から起こす
 *
 * 淡い紺と淡い墨だけ。**桃や黄を足さない** — 商品にない色を出すと、
 * 届いたカードとの関係が切れる。
 */
/* 群（zone）。**内容のまとまりごとに地を変える。**
 *
 * 名前は .band にしない —— **同じ名前の規則が既にあった**（誰も使って
 * いない残りものだが、先に定義されているので勝ってしまう。2026-09-09 に
 * 一度衝突させた）。
 *
 * 節ごとに1色ずつ回さない（それがいちばん機械的に見える、という指摘を
 * 受けている）。**「使いかた」「選ぶ」「持っている人」「締め」**の
 * 4つのまとまりで変える。
 *
 * この地の上に置くのは見出しだけ。**本文はすべて白いカードの中**
 * （補助の文字は中間の淡色に対して 4.16 で AA を切る）。
 */
.zone {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 2.5rem 0 3rem;
}
.zone > * {
  /* 中身は読む幅に戻す。**地だけが画面いっぱい。** */
  margin-inline: auto;
}

/* 群ごとの絵。**線だけの薄い絵を1つ置く。**
 *
 * # なぜ置けるのか
 *
 * カードは --page で中央に置くので、広い画面では**地が両側に残る。**
 * そこに置けば、文字にも見本にも重ならない。
 *
 * # 狭い画面では出さない
 *
 * 残る地が無くなり、カードの下に潜って邪魔になるだけ。
 *
 * 押せるものではないので、読み上げにも出さない（背景として置く）。
 */
.zone { position: relative; overflow: hidden; }
.zone::before {
  content: "";
  position: absolute;
  /* **カードの外に収まる大きさにする。** 器を 60rem に広げたので、
     15rem ではカードの下に潜った（2026-09-11）。 */
  width: 11rem;
  height: 11rem;
  background-repeat: no-repeat;
  background-size: contain;
  /* **薄く。** 地との差が出すぎると、地の色そのものが読めなくなる。 */
  opacity: 0.22;
  pointer-events: none;
}
/* **カードの幅ぶん外に置けないなら、出さない。** 器を 60rem に広げた
   ので、以前の 68rem では絵がカードの下に潜った。 */
@media (max-width: 84rem) {
  .zone::before { display: none; }
}
/* 置く場所は群ごとに変える。**同じ隅に続けると、模様に見える。** */
.zone-kinari::before {
  background-image: url("img/zone/tap.svg");
  top: 3rem; right: 1.5rem;
}
.zone-moss::before {
  background-image: url("img/zone/choose.svg");
  bottom: 2.5rem; left: 1.5rem;
}
.zone-navy::before {
  background-image: url("img/zone/people.svg");
  top: 4rem; left: 1.5rem;
}
.zone-shu::before {
  background-image: url("img/zone/mail.svg");
  bottom: 3rem; right: 1.5rem;
}
/* 切れ目をぼかす。**面の境目に線が出ないようにする**（2026-09-09 の指摘）。
 *
 * 群ごとに「前の群の色」と「自分の色」を持って、上端 7rem で移る。
 * 最後の群は下端でも頁の地へ戻す（そのあとに白いカードが1つ乗る）。
 *
 * **順番はここに書いてある通りに並んでいる必要がある。** 前の色が
 * 合っていないと、境目に段差が出る。 */
.zone-kinari {
  --zone-from: var(--bg);
  --zone-own: var(--zone-kinari);
}
.zone-moss {
  --zone-from: var(--zone-kinari);
  --zone-own: var(--zone-moss);
}
.zone-navy {
  --zone-from: var(--zone-moss);
  --zone-own: var(--zone-navy);
}
.zone-shu {
  --zone-from: var(--zone-navy);
  --zone-own: var(--zone-shu);
}
.zone-kinari, .zone-moss, .zone-navy {
  background-image: linear-gradient(to bottom,
    var(--zone-from), var(--zone-own) 7rem, var(--zone-own));
}
/* 最後の群は下端も戻す。 */
.zone-shu {
  background-image: linear-gradient(to bottom,
    var(--zone-from), var(--zone-own) 7rem,
    var(--zone-own) calc(100% - 7rem), var(--bg));
}
/* **横の余白は群に持たせない**（2026-09-11）。
   以前はここで 1rem を足していたが、カード側でも `calc(100% - 2rem)` を
   持つようになったので、狭い画面だけ 2rem になっていた ——
   群の外にあるカード（支援・お知らせ）は 1rem なので、**同じ画面で
   2種類の余白**が並んでいた。
   群に padding があると流れる帯もずれる（この file の3つの注意書き）。 */
@media (max-width: 30rem) {
  .zone { padding: 1.75rem 0 2.25rem; }
}

.ground-deep { background: var(--ground-deep); }
.ground-white { background: var(--surface); }
/* 生成り。**白との交互に使う**（帯の切り替わりを出すため）。 */
.ground-cream { background: var(--bg); }

/* 朱の面。**文字は白抜き。** 小さい字でも 5.96:1 で通る。 */
.ground-pop {
  background: var(--pop-fill);
  color: var(--on-pop);
}
.ground-pop h2,
.ground-pop p,
.ground-pop .note,
.ground-pop .colorname,
.ground-pop .colorhex { color: var(--on-pop); }
/* 小見出しのラベルは、朱の上では白の枠にする。 */
.ground-pop .eyebrow-line { color: var(--on-pop); }
/* 朱の面のリンク。**素の a は紺なので、朱の上では 1.3:1 しかない。**
   いまこの面にリンクは無いが、足したときに読めない形を残さない。 */
.ground-pop a { color: var(--on-pop); text-decoration: underline; }
.ground-pop .eyebrow-line::after { background: rgba(255, 255, 255, 0.5); }

/* 帯の間は空けない。**面が続くことで区切りになる**（2026-09-09）。
   以前は節ごとに 3.5rem 空けてカードを浮かせていた。 */
.ground-deep, .ground-white, .ground-cream, .ground-pop {
  margin-top: 0;
}
/* 帯の中身は中央の段に戻す。**地だけが画面いっぱい。** */
.full > .inner { max-width: 34rem; }

/* 帯にしたので、面としての枠と丸みは落とす。 */
.ground-deep, .ground-white { border: none; }
/* 締めの面は帯になった。左右の余白は .inner が持つ。 */
.close { padding-left: 0; padding-right: 0; }

/* 意匠の名前。**符号は残す**（正確さのため、小さく下に）。 */
.design-row b {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text);
}
.design-row code { margin: 0.15rem 0 0; font-size: 0.625rem; }

/* ---------------------------------------------------------------- 手順
 *
 * **買ったあと何をするのかを、値段より先に見せる。** 「設定が大変そう」で
 * 止まる人がいる。段は3つしかないことを数字で示す。
 */
.step-list {
  list-style: none;
  /* 器（--page）まで広げない。**絵は中央・文は左端**という組み方なので、
     広げると絵と文が離れて、右側が空く（器を 60rem にして実際にそうなった。
     2026-09-11）。段の幅はここで留める。 */
  max-width: 46rem;
  margin: 1.5rem auto 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}
.step-no {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pop);
}
.step-list h3 {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}
.step-list p { margin: 0; color: var(--text-sub); line-height: 1.9; }
/* 1つの step を縦に積む（2026-09-10）。
 *
 * 番号 → 絵 → 題 → 文。**絵は器の幅いっぱい。**
 *
 * 3列にしたら1行が12字になり、絵を左に寄せたら絵が 176px になった。
 * どちらもカードが小さくなる。**縦に積めば絵に幅を全部使える。**
 */
.step-list { gap: 2.5rem; }
.step-list .step-art {
  height: auto;
  margin: 0.5rem 0 1rem;
}
.step-art img, .step-art svg { max-height: none; }
/* 場面は横長（1200×700）。**器の幅いっぱいに。**
 *
 * `.step-art img` の `width: auto` と同じ強さでは負ける（あちらが後ろ）。
 * **クラスを1つ足して上を行く**（2026-09-10。同じ形で3度負けている）。 */
.step-list .step-art-scene img { width: 100%; height: auto; }
/* カードは真っ直ぐ置く（2026-09-10 の指摘）。
 *
 * 場面の中のカードは傾けている（動きのある絵なので、置いてあるように
 * 見せたい）。**この1枚は商品そのものを見せる絵**なので、傾けると
 * かえって読みにくい。 */
.step-list .step-art-card img {
  /* 場面の絵と同じく**段の幅いっぱい。** 74% にしていたので、
     狭い画面では左右が白く余っていた（2026-09-11 の指摘）。
     広い画面での大きさは max-width が決める（従来と同じ 34rem）。 */
  width: 100%;
  max-width: 34rem;
  height: auto;
}
/* QR は正方形。**小さすぎると読み取れない**ので、8rem 以上を保つ。 */
.step-art-qr svg { width: 8.5rem; height: 8.5rem; color: var(--text); }


/* ---------------------------------------------------------------- 価格の行
 *
 * **1商品1行。** 色地に絵、白地に文字と値段とボタン。
 * 絵を小さく添えるより、物として見せたほうが値段の話が通る。
 */
.plan {
  display: grid;
  padding: 0;
  overflow: hidden;
}
/* 絵の面。**カードだけを置く。**
 *
 * 一度アピールの一言を重ねたが、外した（2026-09-12）。**見せたいのは物**
 * で、文字を置くとそのぶん絵が小さくなる。言葉は右の欄が持っている。
 *
 * 地は種類ごと（--art-*）。**既定を持たない** —— 種類を足して規則を
 * 足し忘れたら、面が透けて下の白が出る。**見て分かる形で壊す**ほうが、
 * それらしい色で出るより早く気づける（`TestEveryProductHasArtColor` が
 * 先に止めるが、機械が壊れたときの受け皿）。 */
.plan-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.25rem;
}
.plan-art-plain { background: var(--art-plain); }
.plan-art-named { background: var(--art-named); }
.plan-art-meishi { background: var(--art-meishi); }

/* 絵の大きさ。**横は面の幅いっぱい**（従来と同じ 17rem）。 */
.plan-art .price-img {
  position: static;
  width: 100%;
  max-width: 17rem;
  height: auto;
  margin: 0;
}

/* 縦の絵は高さで決める。**幅で決めると入らない。**
 *
 * 同じ 17rem を当てると高さが 26rem 近くになり、行が縦に伸びる。高さを
 * 先に決めて幅は比に任せると、**横より少し背の高い1枚**に収まる
 * （縦が選べることは絵の形で伝わってほしいので、横と同じ高さには
 * 揃えない。2026-09-12 の指示）。
 *
 * 縦かどうかは商品の定義が言う（ArtIsPortrait）。**種類の名前で書かない**
 * ので、絵を横に差し替えたら規則のほうも自然に外れる。
 *
 * object-fit は狭い画面のため。max-width が効いて幅が縮んだときに、
 * 高さだけ残って横に潰れるのを防ぐ。 */
.plan-art .price-img-portrait {
  width: auto;
  height: 16rem;
  max-width: 100%;
  object-fit: contain;
}

/* 準備中。**絵の面に置く**（2026-09-12）。
 *
 * 値段の欄に小さく添えていたので、**絵を見て「買える」と思ってから
 * 気づく順**になっていた。買えないことは、物を見るのと同時に分かる
 * ほうがよい。
 *
 * # 角に置く、カードの上には被せない
 *
 * 中央に重ねると、**何が違う商品なのかを見せる**という絵の役目を
 * 札が潰す（名前が入る場所が分からないと、値段の差が読めない）。
 *
 * # カードは薄くしない
 *
 * 半透明にしていたが、やめた（2026-09-12）。**地が濃いので、下の色と
 * 混ざって別の色に見える** —— 赤い名刺版が緑の面の上でオリーブ色に
 * なっていた。買えないことを伝えるために、**売っている色を偽ることに
 * なる。** 薄くするのは右の欄（文字）だけで足りる。 */
.plan-soon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--card-sumi);
  color: var(--card-kinari);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.plan-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.plan-body .price-yen { margin-top: 0.25rem; }
/* 商品ごとに買う。**どれを買うのかを押す場所で決める。** */
.plan-buy {
  margin-top: 0.75rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  /* 字が 15px 太字なので「大きい字」に当たらない。**白抜きで 4.5 が要る。**
   *
   * `--pop` は**暗い配色で #F08C72 に明るく振ってある**（字の色としての
   * 値）。塗りの地に使うと暗色で **2.41** まで落ちる ——商品を枚に割った
   * ことで、このボタンが初めて面に出たので顕在化した。
   * `--band` は明暗で動かない #D4320B（帯と同じ「持ち物の色」）で、
   * **どちらの配色でも 4.93。** */
  background: var(--band);
  color: var(--on-pop);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 6px 16px var(--pop-shadow);
}
@media (min-width: 40rem) {
  .plan { grid-template-columns: 1fr 1.1fr; align-items: stretch; }
}

/* ---------------------------------------------------------------- 法人
 *
 * **下に大きく。** 上のバーと脚の小さいリンクだけでは探せない。
 * 濃い紺で、買う導線と見た目を分ける。
 */
.biz { background: var(--ground-navyband); }
.biz .inner { color: var(--on-pop); }
.biz h2 { color: var(--on-pop); margin-top: 0.35rem; }
.biz p { color: var(--card-kinari); line-height: 1.9; }
.biz-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--card-kinari);
  opacity: 0.85;
}
.biz-btn {
  display: block;
  width: fit-content;
  margin: 1.25rem auto 0;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  background: var(--on-pop);
  color: var(--ground-navyband);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
}

/* ---------------------------------------------------------------- 節の直し
 *
 * 「下の余白が無い」「見出しも横いっぱいに」という指摘（2026-09-02）。
 */

/* 帯の上下の余白を増やす。**詰まって見えていた**（とくに法人の帯で
   ボタンが下端に張り付いた）。 */
.ground-deep, .ground-white, .biz {
  padding-top: 3rem;
  padding-bottom: 3.25rem;
}
/* 帯の中身の最後の要素は、下の余白を持たない（帯の padding が持つ）。 */
.full > .inner > :last-child { margin-bottom: 0; }

/* 見出しの節も画面いっぱい。**地は生成りのまま**で、光だけ敷く。 */
.hero { padding-top: 1rem; padding-bottom: 2.5rem; }
.hero > .inner { position: relative; }
.hero::before { inset: -6rem 0 30%; }

/* 節の小見出し。**英語で小さく。** 色の変わり目に合わせて置くと、
   節が始まったことが分かる。 */
.eyebrow-line {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pop);
}

/* 「◯◯だけ」の札。**符号の下に小さく。**
 *
 * 意匠は10も並ぶので、**添え物は列の形を変えない大きさ**にする
 * （1つだけ背が高くなると、流れている帯で段がガタつく）。 */
.design-only {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pop);
}

/* 価格の節。地が砂色になったので、行の白を際立たせる。 */
.prices-sec .plan { background: var(--surface); }

/* ---------------------------------------------------------------- 幅
 *
 * 「中央に寄って幅が狭い」という指摘（2026-09-02）。
 *
 * **読む文章の幅は変えない**（34rem。1行が長いと目が戻れない）。
 * 変えるのは**並べるもの**の幅 — 手順の3列、価格の行、意匠の見出し。
 * 文章だけを狭いまま、器を広げる。
 */
.full > .inner { max-width: 60rem; }
/* 文章は読める幅に留める。**器が広くなっても行は伸ばさない。** */
.full > .inner > p,
.full > .inner > .note,
.step-list p,
.two-cols p,
.biz p { max-width: 34rem; }
main { max-width: 60rem; }

/* 手順の絵。**実物を3つ**（刷り上がりのカード・アプリの画面・本物のQR）。
 *
 * # なぜ高さを揃えるのか
 *
 * 3つの形がまるで違う（横長のカード・縦長の端末・正方形のQR）。
 * **入る枠の高さを同じにして、中で下に揃える。** 揃えないと、
 * 見出しの位置が3列でばらばらになる。
 */
.step-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 0 1rem;
}
.step-art img, .step-art svg {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
/* カードには影を添える。**物として置きたい**（枠だけだと図に見える）。 */
.step-art-card img {
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(44, 44, 42, 0.10),
              0 10px 24px rgba(44, 44, 42, 0.14);
}

/* 価格の行は器の幅いっぱいに使う。 */
.prices { max-width: none; }

/* もう持っている人の入口。**買う導線と色を分ける。**
   塗らない（枠のボタン）— 買うほうが主で、こちらは戻ってくる人の道。 */
.entry-btn {
  /* **中央に置く。** 見出しを中央にしたので、左端だとカードの中に軸が
     2つできる。左右いっぱいに伸ばすのは「買う」だけ —— いちばん
     押させたいものと、そうでないものを形で分ける。 */
  display: block;
  width: fit-content;
  margin: 1.25rem auto 0;
  padding: 0.95rem 1.75rem;
  border-radius: 999px;
  background: var(--surface);
  /* **枠と字を主の色に**（2026-09-18）。灰の枠に墨の字だと、押せる
     ものではあっても「このサービスの押しどころ」には見えなかった。
     ヒーローの副ボタンと同じ形。**塗らない**のは上と同じ理由。 */
  border: 1px solid var(--pop);
  color: var(--pop);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
}

/* アプリの置き場。**2つ横に並べる。**
 *
 * QR は小さくてよい（読み取る距離が近い）。**枠を付けない** ——
 * 白い面の上に黒の模様が乗るので、それ自体が図として立つ。 */
/* **2つを横に並べる。** 以前は flex + wrap で、狭い画面では幅が
   足りずに縦へ落ちていた（2026-09-12 の指摘）。縦に積むと、2つ目が
   画面の外に出る。格子にして、狭い画面でも必ず2列に収める。 */
.apps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  justify-items: center;
  gap: 2rem 1rem;
  max-width: 30rem;
  margin-inline: auto;
}
.apps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.app-for {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-sub);
}
.app-qr { width: 8.5rem; }
.app-qr svg { display: block; width: 100%; height: auto; color: var(--text); }
/* 公式のバッジ。**高さを揃える。** 比はそれぞれ違う（Apple 109×40、
   Google 270×80）ので、幅ではなく高さで合わせる。**画像は加工しない。**

   高さを1つの値で持つ。**余白の規定が高さから出る**ので、別々に書くと
   ずれる（2026-09-20 まで左右 4px しか取っておらず、規定の 10px を
   割っていた）。 */
.storebadge { display: block; --badge-h: 2.6rem; }
/* **加工しない。** 角丸・影・色・比のどれも変えない（商標のアートワーク）。
   `.orbit-panel img` のような後から来る指定に負けないよう、ここで戻す。 */
.storebadge img, .apps img {
  border-radius: 0 !important;
  box-shadow: none !important;
}
/*
  **規定は、どの指定にも負けてはいけない。**

  `.orbit-on .orbit-panel img`（面の写真のための `margin: 0` /
  `max-height: 11svh` / `width: auto`）はセレクタが img なのでバッジにも
  当たり、**余白が消え、Google のバッジが 40px ではなく 52.9px で出て
  いた**（2026-09-20 に実測）。セレクタの強さで追いかけるのをやめて、
  ここで止める。**!important はこの商標のアートワークだけの例外。**
*/
.storebadge img {
  display: block;
  height: var(--badge-h) !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  /* **まわりに高さの 1/4 の余白**（Apple・Google の両方が同じ定め）。
     上下だけ・左右だけ、ではなく四方。 */
  margin: calc(var(--badge-h) / 4) !important;
}
/* 狭い画面でも出す（2026-09-09 の指摘）。
 *
 * 一度隠した（同じ端末で見ているなら押すほうが速い、という理屈）。
 * **手元の端末で見て、別の端末に入れることもある**（家族の分を入れる、
 * 相手に見せて入れてもらう）。小さくして残す。 */
@media (max-width: 30rem) {
  .app-qr { width: 7rem; }
  .apps { gap: 1.5rem 0.75rem; }
  /* 2列に収まるように少し小さく。**規定の最小（40px 相当）は割らない。** */
  /* **2.5rem = 40px。** Apple は「画面上 40px 以上」。以前は 2.4rem
     （38.4px）で、コメントに「規定の最小は割らない」と書いてあるのに
     実際は割っていた（2026-09-20 に実測で判明）。 */
  .storebadge { --badge-h: 2.5rem; }
}

/*
  面の中のアプリ（2026-09-20 にトラックへ戻した）。

  **規定を満たしたまま入れる**のが条件。バッジは高さ 40px 以上、
  まわりに高さの 1/4（10px）の余白、加工なし。縮めるくらいなら
  入れない —— 一度それで外へ出した。

  狭い画面では**1つずつ縦に**。横2列にすると、Google のバッジが
  40px の高さで 135px、余白を足して 155px 要るので、
  375px の端末（面の幅 311）では2列に入らない。
*/
.orbit-on .orbit-panel .apps {
  margin: 0; /* 段は .orbit-panel の gap が持つ（二重に足さない） */
  max-width: none;
  gap: 1rem;
}
@media (max-width: 43rem) {
  /* **左端を揃える。** 素の .apps は `justify-items: center`（節では
     中央に2列で置く）。面では1列なので、そのままだと**行ごとに幅が
     違うぶん左がずれる** —— Google のバッジのほうが 26px 広いので、
     QR が 13px ずれて出ていた（実測）。面の組みは左寄せが規則。 */
  .orbit-on .orbit-panel .apps {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 0.6rem;
  }
  /* QR を左、札とバッジを右。**QR は別の端末に入れる人のためのもの**
     （2026-09-09 の指摘で狭い画面でも残すと決めた）。縦に積むと
     2つで 370px 使うので、横に組んで 178px に収める。 */
  .orbit-on .orbit-panel .apps li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "qr for" "qr badge";
    align-items: center;
    justify-items: start;
    gap: 0.3rem 0.6rem;
  }
  .orbit-on .orbit-panel .app-qr { grid-area: qr; width: 5rem; }
  .orbit-on .orbit-panel .app-for { grid-area: for; align-self: end; }
  .orbit-on .orbit-panel .storebadge { grid-area: badge; align-self: start; }
}

/*
  商品の枚（2026-09-20）。**1商品に1枚**（06-1 / 06-2 / 06-3）。

  もとは1枚に3つを表で並べていたので、狭い画面では絵を伏せるしか
  なかった ——**物を売る頁で物が見えない。** 1枚に割ると版面をまるごと
  使えるので、絵も値段も買う導線も同じ枚に置ける。

  見出し（商品名）と説明は面が持っている（orbit.go の withProducts）。
  ここは**絵・断り・値段と押しどころ**だけ。
*/
/* **絵が残りを吸う**（2026-09-20）。
 *
 * 絵の高さを版面の比で決めていたが、**枚ごとに字の量が違う。**
 * 名刺版だけ断り書き（112px）があり、実データで 126px 溢れた。
 * 比は「その枚に何が載っているか」を見ていない。
 * 字は自然な高さ・**絵だけが余りを取る**。`object-fit: contain` なので
 * 縮んでも欠けない。 */
/* **面の幅いっぱいに**（2026-09-21）。面は `align-items: flex-start`
   なので、升目は中身に合わせて縮んでいた —— 名刺版で **101×74**、
   その中の絵は 85×58 まで落ちていた（「名刺版の画像がスマホだとかなり
   小さい」の正体はこれ。比でも max-height でもなく、**横に伸びて
   いなかった**）。 */
.orbit-on .orbit-panel > .prodshot-art {
  flex: 1 1 auto;
  /* **下限を上げる**（84 → 96px、2026-09-21）。横に伸ばしても、
     名刺版は高さのほうが先に尽きる（余りが 74px しか残らない）ので、
     絵は 85×58 のままだった。断り書きを2行に詰めて、商品名の級数を
     落としたぶんをここへ回す。 */
  min-height: 96px;
  align-self: stretch;
  width: 100%;
}
/* 商品名は**見出しではなく品名**（2026-09-21）。ヒーローと同じ級数で
   組んでいたので「tapuda Card（名刺版）」が2行 69px を使い、その枚で
   いちばん見せたい絵の席を食っていた。 */
.orbit-on .orbit-panel[data-orbit-slug="product"] > h2 {
  font-size: calc(var(--orbit-fs-head) * 0.82);
}
.prodshot-art {
  margin: 0;
  min-height: 0;
  display: block;
  position: relative;
  /* **升目の形をここで決める。** 名刺版だけ縦長（191×289）なので、
     中身に決めさせると枚ごとに高さが変わる。4:3 に contain で入れると、
     横長は横いっぱい・縦長は縦いっぱいで揃う。 */
  aspect-ratio: 4 / 3;
  /* **高さは版面から決める**（2026-09-20）。比だけだと幅からしか
     決まらず、**版面の高さを一度も見ていなかった** —— 断り書きのある
     名刺版で 51px 溢れて目盛りの帯に重なった。 */
  /* 比は**上限としてだけ**（横長になりすぎない）。高さは上の flex が
     余りから決める。**下限を入れる** —— 字が多い枚でも絵が消えない。 */
  flex: 1 1 auto;
  min-height: 84px;
  max-height: calc(var(--orbit-ph-in) * 0.45);
  padding: 0.5rem;
  border-radius: var(--r-panel, 0.875rem);
}
/* **`.plan-art` と同じ強さでは勝てない。**
 * 升目は `class="prodshot-art plan-art plan-art-*"` で両方に当たり、
 * `.orbit-on .orbit-panel .plan-art img`（`max-height: 15svh` /
 * `width: auto`）と**同じ (0,3,1)** ——後ろにある向こうが勝つ。
 * 実測で絵が 190×130（15svh）に潰れ、623px の升目の左上に貼りついて
 * いた。クラスを1つ足して強くする。 */
/* 縦長の商品（名刺版 191×289）。**比では縛らない**（2026-09-21）。
   3:4 にしたら、余りの高さ（134px）から幅が 100px に決まって
   **かえって小さくなった。** 幅は版面いっぱい、高さは余り、絵は
   その中で contain —— 縦長の絵は高さいっぱいに立つ。 */

.prodshot-art:has(.price-img-portrait) { aspect-ratio: auto; }

/* 断りは**本文より小さく**（2026-09-21）。名刺版だけ 112px 使っていて、
   そのぶん絵の席が減っていた。読ませる一文なので消さずに詰める。 */
.orbit-on .orbit-panel .price-caution {
  font-size: calc(var(--orbit-fs-body) * 0.86);
}
/* 札は**別の行に、太く**（2026-09-21 の指摘：「『：』を使うと文章の
   一部みたいになる」）。`.lines` の中の span は1行ずつなので、b も
   block にして行を持たせる。 */
.price-caution b {
  display: block;
  font-weight: 700;
  color: var(--pop);
}

.orbit-on .orbit-panel .prodshot-art.plan-art img {
  /* 面の絵の既定（max-height: 15svh）はこの枚には当てない。**絵が主。**
   * `max-width` も外す —— `.plan-art .price-img` の 17rem（272px）が
   * 残っていて、広い画面で**升目 623px の左上に小さく貼りつく**形に
   * なっていた（実測）。 */
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: none;
  max-width: none;
}
/* トピックの枚（2026-09-20）。**新しい2件だけ。** 絵と日付と題。
   一覧は「ぜんぶ見る」で送る。 */
.orbit-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--orbit-gap);
  width: 100%;
}
/* **絵が上、字が下**（2026-09-20 の指摘：「スマホだとサムネイルが
   小さすぎる」）。横に並べると絵は 5.5rem（88px）までしか取れない。
   縦に積めば面の幅いっぱい（282px）—— 3.2倍。 */
.orbit-topics a {
  display: grid;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--text);
}
.orbit-topics img,
.orbit-topic-blank {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-panel, 0.875rem);
  background: var(--bg);
}
/* 面の中では `.orbit-on .orbit-panel img`（`max-height: 11svh` /
   `width: auto`）が後から当たる。**11svh = 72px** に抑えられて、
   16:9 から幅が 129px に決まっていた —— 面は 282px あるのに半分も
   使っていない（2026-09-21 の実測）。ここで戻す。 */
.orbit-on .orbit-panel .orbit-topics img,
.orbit-on .orbit-panel .orbit-topic-blank {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
}
.orbit-topic-body { display: grid; gap: 0.15rem; }
.orbit-topic-body time {
  font-size: calc(var(--orbit-fs-body) * 0.82);
  color: var(--text-sub);
}
.orbit-topic-title {
  font-size: var(--orbit-fs-body);
  font-weight: 700;
  line-height: 1.4;
}

.prodshot-note {
  margin: 0;
  font-size: calc(var(--orbit-fs-body) * 0.86);
  color: var(--text-sub);
}
.prodshot-buy {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
/* 版面が足りない画面は升目を低く。**絵は残す**（この枚は絵が主）。 */
.orbit-tiny .prodshot-art { aspect-ratio: 3 / 2; }

/* 目盛りを**組ごとに束ねる**（2026-09-20）。

   06 を「値段」と「商品の絵」の2枚に分けたので、**同じ話の続きだと
   分かる必要がある。** 番号は通しのまま（小円は 45px 角しかなく、
   「06-1」を入れると 8px 相当まで落ちる）。束の切れ目だけ広くする。

   小円の間隔は**触らない** —— あれは「1本の道を走る玉」に見えることが
   要るので、組ごとに詰めると道に見えなくなる。 */
.orbit-prog i[data-orbit-newgroup] { margin-left: 6px; }

/* ================================================================ オービット
 *
 * # 縦積みが土台
 *
 * **JS が落ちても、旗を降ろしても、動きを止めている人にも、同じ中身が
 * 届く。** ここに書いてあるのは「回さないときの形」で、回すのは
 * orbit.js が class を付けてから。
 *
 * この順で効く:
 *   1. 素の CSS        … 8枚が縦に並ぶ（いまここ）
 *   2. .orbit-on が付く … 円環になる（JS が動いたときだけ）
 *   3. reduce          … 2 を打ち消す
 */
/* 既定値を置く。**未定義の変数を参照した宣言は丸ごと捨てられる。**
 * JS が書き込むまでのあいだ、宣言そのものが消えないようにする。
 * （--w-prose は partials.html の :root にあるが、この表だけを見る
 *   検査に合わせてここにも置く。値は同じ。） */
.orbit-track {
  --orbit-track-h: auto;
  /* 面（右下だけ丸い角丸のパネル）と、その中の版面。 */
  --orbit-pw: 0px; --orbit-ph: 0px; --orbit-rc: 0px;
  --orbit-px: 0px; --orbit-ptop: 0px;
  --orbit-pw-in: 100%; --orbit-ph-in: auto;
  /* 目盛りの帯（面の左下。右下の角丸を避けて幅を決める）。 */
  --orbit-bar-x: 0px; --orbit-bar-w: 60px;
  --orbit-meta-y: 0px;
  --orbit-sd: 64px; --orbit-gap: 8px;
  /* 話が変わる所の段。**同じ話の中の段（--orbit-gap）の2倍。**
     面の中の段はこの2値だけ（2026-09-20）。 */
  --orbit-gap-lg: 16px;
  /* 止まる位置の1区切り＝1枚ぶんの送り量（JS が書く）。 */
  --orbit-step-h: 50svh;
  --orbit-slot: 0px; --orbit-slotx: 0px; --orbit-sloty: 0px;
  --orbit-n: 8;
  --orbit-fs-head: 1.25rem; --orbit-fs-body: 0.95rem;
  --orbit-fs-kicker: 0.7rem;
  --orbit-fs-dotno: 0.8rem; --orbit-fs-dotlabel: 0.6rem;
  --orbit-dx: 0px; --orbit-dy: 0px;
  --orbit-dw: 64px; --orbit-dh: 64px; --orbit-dt: 0; --orbit-dl: 1; --orbit-dr: 50%; --orbit-ds: 1; --orbit-do: 1;
  --orbit-br: 50% 50% 50% 50% / 50% 50% 50% 50%;
  /* 面と帯の境目の溶かし幅。**弧にも同じだけ掛かる。** */
  --orbit-soft: 12px;
  --orbit-o: 1;
  --w-prose: 34rem;
  margin: 0;
  padding: 0;
}
.orbit-stage { display: block; }
.orbit-big { display: flex; flex-direction: column; gap: 3rem; }
.orbit-panel {
  max-width: var(--w-prose);
  margin-inline: auto;
  padding: 0 1.25rem;
}
.orbit-kicker {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-sub);
  margin-bottom: 0.5rem;
}
.orbit-panel h1,
.orbit-panel h2 { margin: 0 0 0.6rem; line-height: 1.5; }
.orbit-panel p { margin: 0; line-height: 1.9; }
/* 流れる帯は**面の幅に収める**（2026-09-20）。
 *
 * 画面いっぱいの細工を解く規則は `.orbit-on` 付きで書いてあったので、
 * **落ちた形（prefers-reduced-motion / JS 無効）では当たらない。**
 * `.belt` の min-content は 1,907px あり、面を 544px まで押し広げて
 * いた（画面は 390px）。`body { overflow-x: hidden }` のおかげで横へは
 * スクロールしないが、**代わりに右 178px が黙って切り落とされる** ——
 * 写真の右端と本文の続きが画面の外に出ていた（実測）。
 *
 * 縦積みは**土台**なので、旗の有無に関わらず収まる必要がある。 */
/* 面そのものも**縮めるようにする。** flex の子は既定で min-content より
 * 小さくならないので、帯の中の長い列が面を 544px（max-width いっぱい）
 * まで押し広げ、342px の器からはみ出していた。 */
/* 面そのものも**縮めるようにする**（2026-09-20）。
 *
 * `margin-inline: auto` が入っているので、**flex の子の伸縮（stretch）が
 * 無効になり**、面は自分の最大幅＝`--w-prose`（544px）を取っていた。
 * 器は 342px なので、**右 202px が黙って切り落とされる**（縦積みでも
 * 落ちた形でも同じ）。`width: 100%` を足せば min(100%, 544) になる。 */
.orbit-panel { width: 100%; min-width: 0; }

.orbit-panel .belt,
.orbit-panel .who-belt {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  /* **中身を幅の計算から外す。** 帯の中は 1,300〜1,900px の列で、
     これが面の min-content を押し上げていた（`min-width: 0` だけでは
     足りない —— 面の側が中身の最小幅を見に行く）。流れる帯なので
     切るのは元から正しい。 */
  overflow: hidden;
}

/* 面に1枚だけ置く絵（2026-09-21）。**余りを取る。**
   `.orbit-on .orbit-panel img` の `max-height: 11svh`（72px）に当たると、
   法人と支援の枚で **120〜250px 空いたまま 72px の絵**になる。
   商品の升目と同じ考え方で、字は自然な高さ・絵が残りを取る。 */
.orbit-on .orbit-panel > img.orbit-art {
  flex: 1 1 auto;
  min-height: 60px;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}
/* SE3（版面 339）の法人だけは席が無い。**実測で残りが 16px** ——
   下限 60px が効いて 20px 溢れ、目盛りの帯に 9px 重なっていた。
   この枚は見出し・説明・囲み2つ・押しどころで既に埋まっている。
   **絵を薄く伸ばして残すより、落とす。** 支援の枚は同じ狭さでも
   184px 取れるので残す（字が少ない）。 */
.orbit-tiny .orbit-panel[data-orbit-slug="business"] > img.orbit-art {
  display: none;
}

.orbit-panel img {
  display: block;
  width: 100%;
  height: auto;
  /* **バッジには当てない。** `.orbit-panel img` は面の写真のための
     指定だが、セレクタが img なので**ストアのバッジにも当たっていた**
     （2026-09-20 に判明）。Apple は「灰色の枠線はアートワークの一部で
     変更しない」、Google は「いかなる調整もしない」と定めている。
     角を削るのは明確な違反。 */
  border-radius: 12px;
  margin-top: 1.25rem;
}
.orbit-panel .entry-btn { margin-top: 1.25rem; }
/* 小円は**回っているときだけ**意味を持つ。縦積みでは見出しが既に
   並んでいるので出さない。 */
.orbit-dots { display: none; }

/* ---------------------------------------------------------------- 回す
 *
 * `.orbit-on` は orbit.js が付ける。**素の CSS では一切効かない。**
 */
.orbit-on .orbit-track {
  /* 高さ ＝ (N-1) × 画面 × 0.8 ＋ 画面。**JS が書き込む。** */
  height: var(--orbit-track-h);
  position: relative;
  /* **画面の幅いっぱいに出す**（2026-09-18、dev で見つけた）。
   *
   * main は 60rem で止まっている。そのままだと**円の左端が画面の中に
   * 入ってしまい**、「左からはみ出す」形にならない。小円も器の右端で
   * 切れる。
   *
   * JS の幾何は vw（画面幅）で計算しているので、**器も画面幅に
   * 揃える**。ここがずれると、計算と見た目が合わない。 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
}
.orbit-on .orbit-stage {
  position: sticky;
  /* **上のバーのぶん下げる**（2026-09-18）。バーを固定したので、
   * 0 のままだと円の頭（ABOUT などの小さな英字）がバーの裏に入る。
   * 高さは JS が測って --orbit-top に書く（狭い画面ではバーが
   * 2行になるので、決め打ちにしない）。 */
  top: var(--orbit-top, 0px);
  /* **svh にする**（2026-09-18）。
   *
   * iOS の 100vh は**ツールバーが隠れている側**の高さなので、
   * ツールバーが出入りするたびに面の高さが変わり、スクロール中に
   * 上下へブレる。svh は出ている側で固定なので動かない。
   *
   * vh を先に書いて残す —— svh を知らないブラウザはこちらを使う。 */
  height: calc(100vh - var(--orbit-top, 0px));
  height: calc(100svh - var(--orbit-top, 0px));
  width: 100vw;
  overflow: hidden;
  /*
    地は**主の色**（2026-09-20）。パネルの右と下を走る逆L字の帯が、
    この地の見えている部分。

    # なぜここなら塗れるのか

    **帯の上には文字も見本も載っていない。** 面に塗ると、本文 3.33／
    補助 1.27／RED の見本 1.00／MOSS 1.04／BRICK 1.42／買うボタン 1.00 と、
    通る組み合わせがほぼ無い（グラデーションでも救えない —— 最悪値は
    必ず濃い端に出る）。載っているのは SCROLL の字・その縦線・小円の枠の
    3つだけで、どれも反転すれば済む。

    # べた塗りにしない

    **左上と右下が薄いグラデーション**（2026-09-20 に規則として決めた）。
    135deg の 0% が左上、100% が右下。

    **新しい1本を作らない。** これはアイコン・OGP・SNS・新聞広告・
    ヒーローの帯で共有している既存の1本と同じ組み立て（--pop-pale →
    --pop-fill → --pop-pale）。6本目を作った瞬間に「生成された」に見える。

    # --pop-fill ではなく --pop を端に置く

    SCROLL は 9px の小さな字で、白抜きの基準は 4.5。--pop-fill #E8380D
    だと 4.20 で届かない（あれはボタンとアイコンにだけ許している例外）。
    --pop #D4320B なら 4.93。**濃い側を --pop で止める。**
  */
  /*
    # 四隅から淡くする（2026-09-20）

    135deg の1本だと「斜めのベタな帯」に見え、**色がはっきりしすぎる**
    という指摘を受けた。**四隅それぞれから光を回す。**

    使う色は今までと同じ2つ（--pop-pale → --pop）。**新しい色を足さない**
    —— この帯はアイコン・OGP・SNS・新聞広告・ヒーローと共有している1本で、
    6本目を作った瞬間に「生成された」に見える。**並べ方だけ変える。**

    副えて**小円が読みやすくなる。** 135deg は右上から左下へ一様に淡く
    なるので、道の後半で白い小円が背景に溶けていた（実測で比 3.17 まで
    落ちる）。四隅だと中央が濃いまま残るので **3.67〜4.99** に上がる
    （非文字の下限は 3.0）。
  */
  background-color: var(--band);
  background-image:
    radial-gradient(140% 100% at 0% 0%, var(--pop-pale), transparent 55%),
    radial-gradient(140% 100% at 100% 0%, var(--pop-pale), transparent 55%),
    radial-gradient(140% 100% at 100% 100%, var(--pop-pale), transparent 55%),
    radial-gradient(140% 100% at 0% 100%, var(--pop-pale), transparent 55%);
}

/* 止まる位置の目印。**触る端末だけ効かせる。**
 *
 * # なぜ OS に任せるのか（2026-09-18）
 *
 * iOS は指を離したあとも慣性で動かし続ける。そこへ JS が
 * `window.scrollTo` で割り込むと取り合いになり、**指の動きと画面が
 * ずれて「すこぶる操作性が悪い」**状態になる。
 *
 * CSS の scroll-snap は **OS 自身が止める**ので、慣性と喧嘩しない。
 * JS 側は触る端末で吸着を切る（orbit.js）。
 *
 * **proximity にする。** mandatory だと、円環の外（ヒーローや価格）へ
 * 抜けようとしたときにも引き戻される。
 */
.orbit-stops { display: none; }
@media (pointer: coarse) {
  .orbit-on .orbit-stops {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .orbit-on .orbit-stops i {
    display: block;
    /* **1枚ぶんの送り量そのもの**（2026-09-20）。
     *
     * `100% / N` にしていたが、トラックの高さは `(N-1)×vh×step + vh` で、
     * **N で割っても 1枚ぶん（vh×step）にはならない。** 実測（N=9,
     * vh=604, step=0.5）で止まる位置が 0/335/671… に対し、面の位置は
     * 0/302/604…。**9枚目で 268px ＝ 1枚ぶんの 89% ずれる。**
     * 吸着が効いた途端に面と面の中間へ引きずり込まれる値だった。
     * JS が書く --orbit-step-h を使う。 */
    height: var(--orbit-step-h, 50svh);
    scroll-snap-align: start;
  }
  /* **`.orbit-on` は html 自身に付く**（orbit.js の root）。
   * `html:has(.orbit-on .orbit-stops)` は「html の子孫である .orbit-on の
   * 子孫の .orbit-stops」を探すので、**html 自身は候補にならず、一度も
   * 当たっていなかった**（実測 `matches()` が false、
   * `scrollSnapType` は "none"）。触る端末では JS 側も吸着を切っている
   * ので、**吸着が二重に無い状態**だった。 */
  .orbit-on:has(.orbit-stops) { scroll-snap-type: y proximity; }
  /* 小円を押して運んでいるあいだだけ切る。**切らないと、出発点が
     いちばん近い止まり位置なので引き戻される**（01 から 09 を押すと
     01 に戻る、という形で出た）。JS が 900ms で外す。 */
  .orbit-on.orbit-jump:has(.orbit-stops) { scroll-snap-type: none; }
}
/* 面の中の札（ABOUT / NO APP …）は**出さない**（2026-09-20 の指摘：
   「ABOUT とかタイトルが上と下に出ていて重複じゃないか」）。

   面の左下の `.orbit-side-key` が**同じ語を、より大きい字で**出していて、
   そちらは番号（01）と進行の目盛りも持っている。上の札は語を繰り返す
   だけで、しかも 9px ——**小さいほうが面の中にあった。**
   小円の aria-label も同じ語を持っているので、読み上げでも失わない。 */
.orbit-on .orbit-panel > .orbit-kicker { display: none; }

/* 面と帯の境目をぼかす（2026-09-20 の指摘：「メイン枠がはっきりしすぎ」）。

   面（白）と帯（朱）が**線で切り替わる**ので、紙が置いてあるというより
   板をはめ込んだように見えていた。面と同じ形・同じ色のものを**ぼかして
   下に敷く**と、白→淡い朱→朱と段が増えて、縁が紙の毛羽に近くなる。

   寸法は JS が書いている面の値（--orbit-pw / --orbit-ph / --orbit-rc）を
   そのまま読む。**別の形を作らない**ので、面と必ず一致する。 */
/* **これが面の地そのもの**（2026-09-21）。下敷きではなくなった。

   もとは面の後ろに同じ形を薄く敷いてぼかす「にじみ」で、面自身は
   不透明なまま縁が立っていた。そこで面に遮り（右から 20px・下から
   20px の線形）を掛けたが、**弧のまん中には届かない** —— 遮りは辺から
   の距離で薄くなるのに、弧は辺から内側へ逃げる（半径 rc の弧の 45° は
   右辺から rc×0.29、実寸 30px 以上）。「直線だけ柔らかく、角だけ硬い」
   という見え方の正体はこれ（2026-09-21 の指摘）。

   **塗りをこちらへ移して、こちらをぼかす。** ぼかしは形に沿うので、
   直線でも弧でも同じだけ溶ける。面（.orbit-big）は字を持つ器に徹する
   ——**字のある要素をぼかさない。**

   左と上は画面の端なので、ぼけた縁が見えないよう外へ逃がす（器の
   overflow: hidden が切る）。右下の角の位置は動かさない。 */
.orbit-on .orbit-stage::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--orbit-soft));
  top: calc(-1 * var(--orbit-soft));
  width: calc(var(--orbit-pw) + var(--orbit-soft));
  height: calc(var(--orbit-ph) + var(--orbit-soft));
  border-radius: 0 0 var(--orbit-rc) 0;
  /* 地は群の色。**四隅から紙の白を回す**（帯と同じ組み立て）。
     .orbit-big から丸ごと移した ——**出どころを2つにしない。** */
  background-color: var(--orbit-zone, var(--surface));
  background-image:
    radial-gradient(130% 95% at 0% 0%, var(--surface), transparent 55%),
    radial-gradient(130% 95% at 100% 0%, var(--surface), transparent 55%),
    radial-gradient(130% 95% at 100% 100%, var(--surface), transparent 55%),
    radial-gradient(130% 95% at 0% 100%, var(--surface), transparent 55%);
  filter: blur(var(--orbit-soft));
  z-index: 0;
  pointer-events: none;
}

.orbit-on .orbit-big {
  display: block;
  position: absolute;
  z-index: 1;
  /* **画面の左上に密着。** 右と下に、小円が通る帯ぶんだけ空ける。
     右下の角だけ大きく丸める（左上・右上・左下は直角）。

     **角丸と小円の軌道は同心。** 軌道半径 = 角丸 + すき間 + 小円の半径
     （orbit.js）。片方だけ値を変えると、小円がカーブをなぞらなくなる。 */
  left: 0;
  top: 0;
  width: var(--orbit-pw);
  height: var(--orbit-ph);
  border-radius: 0 0 var(--orbit-rc) 0;
  /*
    地は**紙（白）1色**（2026-09-20）。群ごとに変えない。

    # なぜやめたか

    円だったころは群の色が小さな円の塗りだった。パネルにしてほぼ全画面に
    なったので、**8枚で4回、画面全部の色が変わる。** 記憶の「1節に1色ずつ
    順番に当てるのが、いちばん機械が作った感じに見える」に、**面の大きさが
    変わった時点で抵触した。** 同じトークンを使っているのに効果が逆。

    # 読めていなかった

    中身をパネルへ寄せたので、補助の文字が淡色の地に直接載った。実測で
    キッカー（--pop）が 4.22/3.85/3.85/3.82、補助（--text-sub）が
    4.56/4.15/4.16/4.13 ——**8枚中5枚で AA を割っていた。** 紙に戻すと
    5.32 / 4.93 になる。

    # 群はどこで示すか

    地ではなく、進行のバー（.orbit-prog）と小円の並び、キッカーの語。
    **全画面の地が変わるのは、それを言うには強すぎる手段だった。**

    --zone-* のトークンは消さない —— 旗を降ろした縦の頁が使っている
    （TestIntroGroupsCarryTheGround）。
  */
  /*
    地は**群ごとの淡色**（2026-09-20 に戻した）。

    # 一度やめた理由と、それが消えた理由

    「中身をパネルへ寄せたので補助の文字が淡色の地に直接載り、実測で
    キッカー 4.22/3.85/3.85/3.82、補助 4.56/4.15/4.16/4.13 ——**8枚中
    5枚で AA を割っていた**」としてやめた。**その字が朱だったのが
    原因**で、同じ日に「本文が朱で出ていた」という不具合として直した
    （`main p, main li,` がリンクの色指定に入っていた）。墨なら
    --zone-* の上で 10.86〜11.98 あり、割らない。

    # 左上と右下を薄く

    帯と同じ規則（利用者の決め）。地を群の色で塗り、**左上と右下から
    紙の白を回す。** 新しい色は作らず、--zone-* と --surface の2つだけ。

    ヒーロー（Zone 空）は **--zone-none = 紙のまま。**
  */
  background-color: var(--orbit-zone, var(--surface));
  /* **四隅から薄く**（2026-09-21 の指摘）。帯と同じ組み立てにする ——
     地を群の色で塗り、四隅から紙の白を回す。新しい色は作らない。 */
  background-image:
    radial-gradient(130% 95% at 0% 0%, var(--surface), transparent 55%),
    radial-gradient(130% 95% at 100% 0%, var(--surface), transparent 55%),
    radial-gradient(130% 95% at 100% 100%, var(--surface), transparent 55%),
    radial-gradient(130% 95% at 0% 100%, var(--surface), transparent 55%);
  /* **輪郭は朱**（2026-09-18）。--border は地との差が小さく、暗い配色で
   * 円が背景に同化していた（#35342F と #1A1A18）。
   *
   * 塗らずに線だけ。**塗ると押しどころに見える**（円は押せない）。 */
  /* **線ではなく面。** 円のときは塗ると押しどころに見えたので線だけに
     していたが、角丸のパネルは「紙が1枚置いてある」形なので塗る。
     影で浮かせる（線を足すと窓のように見える）。 */
  border: 0;
  box-shadow: 0 12px 44px var(--shadow, rgba(0, 0, 0, 0.06));
  overflow: hidden;
  gap: 0;
  /*
    **縁そのものを溶かす**（利用者の依頼：「メインと逆L字の背景の
    境目をグラデーションのようにぼかしてほしい」）。

    下に同じ形をぼかして敷く手は入れてあるが、**それだけでは外側
    15px がやわらぐだけ**で、面の白は不透明のまま縁が立っていた
    （実測：x=324 で白 → x=327 で朱、一気）。

    面に触れているのは**右と下**（左と上は画面の端）。その2辺だけ、
    外へ向かって透かす。中身は縁から 22px 内側（--orbit-px）に
    あるので、字には掛からない。
  */
  /* **地はここが持たない**（2026-09-21）。持たせてぼかすと、
     `.orbit-panel` がこの要素の**子**なので字まで一緒にぼけた
     （実際にそうなって、面が全部すりガラスになった）。
     塗りは下の `.orbit-stage::before` が持ち、そちらをぼかす。 */
  background-color: transparent;
  background-image: none;
}
.orbit-on .orbit-panel {
  position: absolute;
  /* **左上寄せ。** 中央に置くと円に内接する正方形しか使えず、
     直径の 0.707 倍が上限になる。上端を中心より少し上に置き、その
     高さの半弦から幅を出すと3割以上広がる（JS が計算して書く）。 */
  left: var(--orbit-px);
  top: var(--orbit-ptop);
  width: var(--orbit-pw-in);
  /*
    版面の高さ。**JS が書いているのに、使っていなかった**（2026-09-20）。
    面の下には目盛りの帯のぶんを空けてあるのに、中身がそこまで伸びて
    重なっていた（03 の見本の名前と目盛りが重なった）。

    切り落とさない —— 溢れたら見えるようにしておき、**中の部品の側を
    小さくして収める**（下の .design-row / img）。 */
  max-height: var(--orbit-ph-in);
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--orbit-gap);
  /*
    **子を縮ませない**（2026-09-20）。

    上の max-height を足したら、縦並びの flex なので**子が縮んで潰れた**
    —— 意匠の帯が高さ0になって消えていた。しかも潰れるせいで「収まって
    いる」と測れてしまい、**溢れを見落とす**。

    縮まない形にしておけば、溢れたら溢れたまま出る。切り落とすのは
    面（.orbit-big の overflow: hidden）の仕事で、こちらは測って直す。
  */
  /* 重ねて置き、回転に合わせて入れ替える。
     **display:none にしない**（検索に載る・読み上げに残る）。
     **素の規則では薄くしない** —— 対応していないブラウザで中身が
     出なくなる（TestIntroRevealFailsToVisible）。ここは
     `.orbit-on` の付いた側なので、JS が動いているときだけ効く。
     既定は 1 なので、JS が変数を書くまでは全部が見える側に倒れる。

     **filter: opacity() ではなく素の opacity**（2026-09-18）。
     見た目は同じだが、filter はフィルタの経路を通るので合成器の
     単純なアルファより重い。ここは JS が8枚ぶん毎フレーム書き換える
     場所なので、その差がそのまま毎フレームの費用になる。 */
  opacity: var(--orbit-o, 1);
  pointer-events: none;
}
/* 押せるのは、ほぼ正面のものだけ。**消さない**（薄いまま重なっている）。 */
.orbit-on .orbit-panel[data-orbit-show] { pointer-events: auto; }
/* キッカー（NO APP など）。**サービスの朱（--pop）。**
 *
 * 押しどころではないので**塗らず、文字色だけ**（価格の商品名と同じ
 * 扱い）。円の中でいちばん小さい字なので、色が付いていないと地に
 * 埋もれて読み飛ばされる。 */
.orbit-on .orbit-kicker {
  font-size: var(--orbit-fs-kicker);
  margin: 0;
  color: var(--pop);
  letter-spacing: 0.22em;
}
/* 見出しは**墨のまま**（2026-09-18）。
 *
 * サービスの朱にしたくなるが、**暗い配色で 3.20 しか出ない**
 * （#D4320B / #232320）。見出しは大きい字なので基準の 3.0 は超えるが、
 * 墨の 12.89 と比べて明らかに読みにくい。
 *
 * **朱は小さい字と線に使う。** 円の中でいちばん読ませたいのは見出しで、
 * そこを弱くする理由が無い。キッカー・番号・枠が朱なので、色は既に
 * 足りている。 */
/* **見出しは h1 にも当てる**（2026-09-21）。オービットが出ていると
   きのヒーローだけ h1 で、残りは h2 —— 頁の中で見出しの頂点が1つ
   だけになるようにした。見え方は同じでなければいけない。 */
.orbit-on .orbit-panel h1,
.orbit-on .orbit-panel h2 { font-size: var(--orbit-fs-head); margin: 0; }
.orbit-on .orbit-panel p { font-size: var(--orbit-fs-body); }
/* 円の中の絵。**高さで抑える。**
 *
 * # なぜ SP で小さくするのか（2026-09-18）
 *
 * 絵が円の縁からはみ出していた。**円は下に向かって狭まる。** 文字の塊
 * の幅は上端（中心より少し上）の半弦から出しているが、絵はその下に
 * 積まれるので、**絵が置かれる高さでは円がもっと細い。**
 *
 * 390×844 で測ると、24vh だと下端 y=470 で円は x −13〜215、塊は
 * 20〜281 で **66px はみ出す。** 15vh なら収まる。
 *
 * 幅ではなく高さで抑える。幅で抑えると、縦長の端末で画面の半分以上を
 * 占めて字が押し出される。 */
/*
  面の中の価格。**カードのまま積まない**（2026-09-20）。

  狭い幅では .prices が縦に積まれ、**3枚で 1041px** になっていた
  （版面は 452px）。面は画面1つぶんしかないので収まらない。
  **入れ子スクロールは作らない**という決めがあるので、組み方で畳む。

  絵と説明を伏せ、名前・値段・買うを**1行**に並べる。買う画面へ行けば
  絵も説明もある（押す前に要るのは「いくら」だけ）。
*/
/*
  広い画面は**3列で、絵を残す**（2026-09-20）。

  はじめ全部を字の行に畳んだが、**「文字より画像で目を引く」**という
  規則に反していた。商品の絵は買う前にいちばん見たいもの。縦に積むと
  溢れるので、横に3つ並べて絵を小さくする。

  狭い画面だけ行に畳む（参照実装の「SP の価格は3行に畳む」と同じ）。
*/
.orbit-on .orbit-panel .prices {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
.orbit-on .orbit-panel .price {
  padding: 0.7rem;
  border-radius: 0.6rem;
}
.orbit-on .orbit-panel .plan-art { min-height: 0; }
/* **商品の絵を大きく。** 塗りのボタン3つとバッジを外したぶんを、
   いちばん見たいものへ回す（6.5svh → 15svh、2倍以上）。 */
.orbit-on .orbit-panel .plan-art img { max-height: 15svh; width: auto; }

/*
  **塗りは面に1つ。** 「これを買う」が3つ横に並んでいた（.plan-buy は
  --pop-fill）。記憶の「主は1画面に1つ」が3回破れていて、しかも
  「全体としての買う」がどこにも無かった。

  値段の枚では**買う口を1つにまとめる。** 種類を連れて行く仕掛け
  （/order?template=）は失うが、買う画面の1段目が種類を選ぶ段なので、
  失うのは1手であって行き止まりではない。
*/
/* 値段の表の中の「これを買う」×3 は伏せる（**主は1画面に1つ**）。
   商品ごとの枚（.prodshot）は1枚に1つしか無いので、そちらは出す。 */
.orbit-on .orbit-panel .prices .plan-buy { display: none; }
.orbit-on .orbit-panel .prices-buy {
  /* 塗りは**濃い側（--pop）**（2026-09-20）。面の中ではこのボタンの字が
   * 12px 太字＝「大きい字」に当たらないので、白抜きに要るのは 4.5。
   * --pop-fill #E8380D は 4.20、--pop #D4320B は 4.93。
   * **帯で既にやった判断と同じ**（intro.css の .orbit-stage：
   * 「濃い側を --pop で止める」）。新しい色は作らない。 */
  background: var(--pop);
  display: inline-block;
  /* **幅いっぱいに伸ばさない。** 全幅の段に置くので、そのままだと
     画面の端から端まで伸びて帯のように見える。 */
  justify-self: start;
  width: fit-content;
  margin-top: 0.8rem;
  background: var(--pop-fill);
  color: var(--on-pop);
  border-radius: 999px;
  padding: 0.8rem 1.8rem;
  font-weight: 700;
  text-decoration: none;
  font-size: var(--orbit-fs-body);
}

@media (max-width: 43rem) {
  .orbit-on .orbit-panel .prices { grid-template-columns: 1fr; gap: 0; }
  .orbit-on .orbit-panel .price {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border: 0;
    border-bottom: 1px dashed var(--border-strong);
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  /* **値段の表の中だけ**（2026-09-20 に絞った）。
     `.orbit-on .orbit-panel .plan-art` と書いていたので、**商品の絵
     だけの枚（.prodshot）にも当たって幅0で消えていた。**
     絵を大きく出すために分けた枚なのに、分ける前の逃げが効いていた。 */
  .orbit-on .orbit-panel .prices .plan-art { display: contents; }
  .orbit-on .orbit-panel .prices .plan-art > :not(.plan-soon) { display: none; }
  .orbit-on .orbit-panel .plan-body { display: contents; }
}
/* **値段の表の中だけ**（2026-09-20 に絞った）。
   限定せずに書いていたので、商品ごとの枚（.prodshot）の断り書きも
   消えていた ——「ご注意：表の印刷は後から直せません。」が
   **サイト全体のどこにも出ない**状態だった。order.go のコメント自身が
   「最も読み飛ばされて困る一文」と書いている。
   すぐ上の .plan-art で同じ間違いを直したのに、隣の2行を直し忘れた。 */
.orbit-on .orbit-panel .prices .price-desc,
.orbit-on .orbit-panel .prices .price-caution { display: none; }
/*
  絵は伏せるが、**「準備中」の札は残す**（2026-09-20）。

  札は絵の上に載せてある（.plan-soon は .plan-art の中）。絵ごと伏せたら
  **値段も理由も無い行**になり、売っていない商品が「名前だけ」で並んだ。
  絵を潰して札だけを出す。
*/
/* **値段の表の中だけ**（2026-09-20 に絞った）。商品ごとの枚
   （.prodshot）は `display: block` + `aspect-ratio` なので、格子でも
   フレックスでもない ——`justify-self` が効かず、静的配置の札が台の
   下へ 22px はみ出して値段の行に重なる。あちらは絵を伏せていないので、
   札は絵の上に載せたまま（position: absolute）でよい。 */
.orbit-on .orbit-panel .prices .plan-soon {
  position: static;
  justify-self: end;
  padding: 0.15rem 0.6rem;
  font-size: 0.6875rem;
}
/* 値段も**字の階段に繋ぐ**。1rem 固定だと、本文 12px の画面で 16px
   （1.33倍）のまま残る。 */
.orbit-on .orbit-panel .price-yen {
  margin: 0;
  font-size: calc(var(--orbit-fs-body) * 1.15);
}
.orbit-on .orbit-panel .plan-buy {
  font-size: var(--orbit-fs-body);
  /* 指で押せる高さ。em で組んでいるので、本文が縮むと 46px まで落ちる。 */
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  margin-top: 0;
}

/*
  ヒーローの下の2行は面に出さない（2026-09-20）。

  「送料は価格に含まれます」は 06 の値段の枚が、「カードが無くても
  QRで渡せます」は 02 が言っている。**節に分かれていたときは離れて
  いたので両方あってよかった**が、面に寄せると近すぎる。
*/
.orbit-on .orbit-panel .hero-note { display: none; }

/*
  狭い画面では、ヒーローのカードの絵を面に出さない（2026-09-20）。

  01 は見出し・2行・ボタン2つ・絵・見本への行き先・職種の帯を持つ。
  実測で版面 452 に対して 774 あり、**絵と帯が面の外（主の色の帯の上）へ
  溢れていた。** 入れ子スクロールは作らない決めなので、狭いときは
  いちばん役の軽いものを落とす。

  **絵は 03「刷り上がりの実物」が写真で見せている。** 広い画面では
  残す（新聞の広告にもカードが写っているので、照合の手掛かりになる）。
*/
/*
  面の中のカードの絵。**帯をやめて、紙の上に置く**（2026-09-20）。

  .hero-stage は縦の頁のための部品で、画面いっぱいに広げた帯
  （width: 100vw / margin-left: calc(50% - 50vw)）の上に絵を載せている。
  面の中に入れると2つ壊れる。

  1. **位置** —— 50% - 50vw が面を基準に計算され、**面の外へはみ出す**
  2. **地の色** —— ::before が外の帯と**同じグラデーションをもう1枚**敷く。
     1画面にサービスカラーのグラデーションが2枚になり、色が喧嘩する

  面の地は紙（白）で、強い色は外の帯1つだけ、という決めに戻す。
  **絵は紙の上に置く。** 帯は外に1本だけ。
*/
.orbit-on .orbit-panel .hero-stage {
  /* **右の段に置く**（2026-09-20）。
   *
   * 以前は `position: absolute; right: 3%` で右へ浮かせていた。面から
   * はみ出すのを避けるための逃げだったが、**版面を直した今は要らない。**
   * しかも浮かせているせいで、**この面だけ右の中身が 789.9px から
   * 始まり**、他の7枚（619.9px）と揃っていなかった。
   *
   * 格子の右段に入れれば、他の枚と同じ位置に自動で揃う。
   *
   * **画面いっぱいの細工を解く。** 素の .hero-stage は頁のために
   * `width: 100vw` + `margin-left: calc(50% - 50vw)` を持っていて、
   * これを残すと右が 2131.9px ——面（1243.2px）を 888px 突き抜ける
   * （帯のときと同じ踏み方。解き忘れがこれで3つめ）。 */
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.orbit-on .orbit-panel .hero-stage::before { display: none; }
.orbit-on .orbit-panel .hero-stage img {
  width: 100%;
  max-height: none;
}
/* 狭い画面では右に置く場所が無い。**出さない**（03 が写真で見せる）。 */
@media (max-width: 43rem) {
  /* **スマホでも絵を出す**（2026-09-20 に戻した）。
   *
   * 「03 が写真で見せる」という理由で伏せていたが、**03 に着くのは
   * 3回払ったあと。** 実物を売るページの最初の画面が全部文字になって
   * いた ——「文字より画像で目を引く」という決めに正面から反する。
   *
   * 版面 419px に対し 01 の中身は 299px。**120px 空いている**ので入る。
   * 版面が足りない画面（.orbit-tight）だけは、これまでどおり伏せる。 */
  .orbit-on .orbit-panel .hero-stage {
    order: 9;
    /* **押しどころから離す**（2026-09-20 の指摘：「無料で始めるに
       揺れる画像が被ってるかも」）。実測で絵の上端 323px に対し
       「無料で始める」の下端が 322px ——**1px 差で接していた。**
       絵の中身は箱より 9px 上へ出るので、その分も見込む。 */
    /* 段は他と同じ「話が変わる所」の値にする（直書きをやめた）。 */
    margin-top: calc(var(--orbit-gap-lg) - var(--orbit-gap) + 8px);
    /* **絵が余りを取る**（2026-09-20 の指摘：「01 の画像がかなり
       小さい。計算している余白がかなり大きいんじゃない？」）。
       実測で版面 413 に対し中身 384、**41px 余らせたまま絵を 66px に
       抑えていた**（`max-height: 10svh`）。上限で抑えるのをやめて、
       商品の枚と同じく**残りを絵に渡す。** */
    flex: 1 1 auto;
    min-height: 0;
  }
  /* **箱に幅を持たせる**（2026-09-21）。箱が `width: auto`、絵が
     `width: auto; height: 100%` で**互いを参照して縮み**、95×62 に
     なっていた（版面 282 の3分の1）。箱を幅いっぱいにして、絵を
     その中で contain する。 */
  .orbit-on .orbit-panel > .hero-stage { width: 100%; }
  .orbit-on .orbit-panel .hero-stage img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: left center;
  }
  /* **ヒーローだけ縦の中央へ**（2026-09-21 の指摘：「要素が上に固まって
     いる気がする」）。

     絵は横幅で頭打ちになる ——`object-fit: contain` の絵は面の幅
     （282px）から高さが決まるので、背の高い端末で器だけ伸びても
     **絵は 186px より大きくならない。** 伸びたぶんは器の中の空きに
     なり、実測で 390×844 のとき絵の上下に 64px ずつ余っていた。
     字と押しどころは上に詰まったまま、絵だけが空きの中に浮く。

     器を絵の高さに戻して（flex を伸ばさない）、**余りを塊の上下へ
     等分する。** 版面が足りない画面では `safe` が効いて上寄せに戻るので、
     SE3（残り 0px）では今までと1px も変わらない ——**溢れる側では
     中央寄せをしない。**

     **狭い画面だけ。** PC では面が格子になり、`justify-content` は
     横（段）の意味になる —— 同じ1行が**段をまとめて中央へ寄せる**
     別の指定に化ける。 */
  .orbit-on .orbit-panel[data-orbit-slug="hero"] {
    justify-content: safe center;
  }
  .orbit-on .orbit-panel[data-orbit-slug="hero"] > .hero-stage {
    flex: 0 1 auto;
  }

  /* **SE3 でも出す**（2026-09-21）。「入らない」と書いて落としていたが、
     それは絵を比で組んでいたころの話。いまは残りを絵に渡すので、
     375×553 でも **84px 余っていた** —— 実際には落とした結果、
     版面のまん中に**84px の空白の穴**が空いていた（実測）。
     「文字より画像」が最も効くのがいちばん狭い画面なのに、そこだけ
     絵が無い状態になっていた。 */
  .orbit-tiny .orbit-panel .hero-stage { display: block; min-height: 56px; }
  /*
    **狭い画面では縦に中央へ寄せる**（2026-09-20）。

    面は画面のほぼ全部を使うのに、中身は上の3分の1で終わる（実測で
    版面 609px に対して 250px）。**残りが全部空白**で、「残念」に見えて
    いた原因。

    「左上寄せ」の決めは**横長の器で内接正方形しか使えなかった円**への
    答えで、縦長の器の話ではない。左寄せは保ったまま、縦だけ中央へ。
  */
  .orbit-on .orbit-panel {
    /* **器の真ん中ではなく、版面の真ん中へ**（2026-09-20）。
     *
     * `top: 50%` + `translateY(-50%)` にしていたが、これは**器**の
     * 中央に置く形。上の空き（24px）と下の空き（帯のぶん 100px）は
     * 同じではないので、中央に置くと中身が下へ 38px ずれ、
     * **版面には収まっているのに目盛りの帯と重なる。**
     * 実機の絵で「読み取れない端末でも…」が 02 に重なって見つけた。
     *
     * 面の高さを版面そのものにして、中で縦中央に寄せる。これなら
     * 下の空きが効く。溢れたときは上端から置く（safe center）——
     * 中央のままだと上へも溢れ、見出しが器の外へ出る。 */
    top: var(--orbit-ptop);
    transform: none;
    height: var(--orbit-ph-in);
    max-height: var(--orbit-ph-in);
    /* **上端から積む**（2026-09-20 に中央寄せをやめた）。
     * 中央寄せにすると、中身の量が枚ごとに違うぶん**見出しの上端が
     * 24〜139px（115px幅）で飛ぶ。** PC 側は `align-content: start` で
     * 全枚 117px に揃っていて、**同じ頁で逆の判断を2つ持っていた。**
     * 「面の上3分の1で終わって残りが空白」への答えは中央寄せではなく、
     * 中身を増やすか絵を大きくするほう。 */
    justify-content: flex-start;
  }
}

/*
  面の中では、ヒーローの部品の間を詰める（2026-09-20）。

  節に置いていたときの余白（1.4〜1.75rem）は、**上下に流れる頁**の
  ためのもの。面は1画面ぶんしかないので、同じ余白だと中身が下から
  溢れる。左寄せにするのも面の組み（節では中央寄せ）。
*/
/*
  「渡された相手の画面は、こう見えます／名刺の見本を開く」（2026-09-20）。

  **行き先をボタンにする。** 素のリンクだと地味で、面の中で押しどころに
  見えなかった。塗りは「カードを買う」1つのままなので、**枠のボタン**
  （.orbit-cta2 と同じ役・同じ形）にする。

  添える1文は小さく。**主張ではなく、ボタンの説明。**
*/
.orbit-on .orbit-panel .hero-samples {
  margin-top: calc(var(--orbit-gap-lg) - var(--orbit-gap));
  grid-auto-flow: column;
  justify-content: start;
  justify-items: start;
  align-items: center;
  gap: 0.6rem;
}
.orbit-on .orbit-panel .hero-samples-lead {
  font-size: calc(var(--orbit-fs-body) * 0.86);
  color: var(--text-sub);
  margin: 0;
}
.orbit-on .orbit-panel .hero-samples a {
  display: inline-block;
  border: 1.5px solid var(--pop);
  color: var(--pop);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-size: calc(var(--orbit-fs-body) * 0.92);
  font-weight: 700;
  text-decoration: none;
}
.orbit-on .orbit-panel .hero-samples a:hover { background: var(--pop-soft); }
/* 面の中の押しどころ。**枠のボタンは淡い地で塗る**（2026-09-20 の指摘）。
 *
 * 面を紙（白）にしたので、白で塗った枠のボタンは「枠だけ」に見えていた
 * （「スケルトンボタンがまだ使われてる？」）。--pop-soft は**主の色の
 * 字が 4.62 で通る唯一の淡い地**（--zone-shu は 3.82 で落ちる）。
 * 新しい色は作らない。 */
/* **地は白に戻す**（2026-09-20）。「この枠のボタンは基本、背景白」と
 * 決めたのに、面の中だけ --pop-soft(#FEF6F4) で上書きしていた ——
 * **同じファイルに、ぶつかる決めが2つ書いてある**状態だった。
 *
 * 「スケルトンに見える」への答えは地を塗ることではなく、**紙が1枚
 * 浮いている形**にすること。枠は残したまま、影を1段だけ足す。 */
.orbit-on .orbit-panel .orbit-cta2,
.orbit-on .orbit-panel .hero-cta2,
.orbit-on .orbit-panel .entry-btn,
.orbit-on .orbit-panel .hero-samples a {
  background: var(--surface);
  box-shadow: 0 1px 3px var(--shadow, rgba(0, 0, 0, 0.06));
  /* **指で押せる高さ**（2026-09-20）。内側の余白を em で組んでいるので、
   * 面の本文が縮むと一緒に縮み、実測で 35〜42px まで落ちていた
   * （Apple 44pt / Google 48dp のどちらも未達）。**絶対値で下限を置く。**
   * 電話が主なので、厳しい側の 48 に合わせる。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.orbit-on .orbit-panel .orbit-cta2:hover,
.orbit-on .orbit-panel .hero-cta2:hover,
.orbit-on .orbit-panel .entry-btn:hover,
.orbit-on .orbit-panel .hero-samples a:hover { background: var(--surface); }
/* 職種の帯は**意匠の帯と同じ扱い**（2026-09-20 の指摘）。
   角丸を避ける幅（上の .belt と同じ式）に収め、面の下端から離す。 */
.orbit-on .orbit-panel .who-belt {
  margin-top: 0.5rem;
  padding: 0.2rem 0;
}
/* 面の中では**横に並べる。** 節では縦に積んでよかったが、面は1画面
   ぶんしかないので、積むと下から溢れる（実測 +116px）。 */
.orbit-on .orbit-panel .hero-act {
  /* **話が変わる所は1段大きく。** 本文→押しどころ。 */
  margin-top: calc(var(--orbit-gap-lg) - var(--orbit-gap));
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  /* **左端を揃える**（2026-09-20）。素の .hero-act は
   * `max-width: 30rem` + `margin-inline: auto` で中央に寄せている
   * （頁のヒーローは中央揃えなので）。面は左寄せが規則なのに外し
   * 忘れていて、**PC で押しどころだけ 69px 字下げされていた**
   * （左段 563.9px に 425.1px の中身を中央寄せ＝ずれ 69.4px）。
   * 狭い画面では段が 281.6px しかなく 30rem に届かないので、
   * ずれが出ず気づけなかった。 */
  max-width: none;
  margin-inline: 0;
  justify-content: flex-start;
}
.orbit-on .orbit-panel .hero-act > * { margin: 0; }
/*
  **2つのボタンを同じ大きさにする**（2026-09-20 の指摘）。

  「カードを買う」には値段（<em>）が入るので字数が違い、狭い画面で
  並べると大きさがばらついて見えた。**高さと最小幅を揃える。**
  塗りと枠という役の違いは色で出ているので、形まで変える必要はない。
*/
.orbit-on .orbit-panel .hero-cta,
.orbit-on .orbit-panel .hero-cta-off,
.orbit-on .orbit-panel .hero-cta2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 3rem;
  min-width: 11.5rem;
  padding: 0.6rem 1.4rem;
  box-sizing: border-box;
  text-align: center;
}
.orbit-on .orbit-panel > * { flex-shrink: 0; }
/* 見本への行き先も1行に。 */
.orbit-on .orbit-panel .hero-samples {
  grid-auto-flow: column;
  justify-content: start;
  align-items: baseline;
  gap: 0.6rem;
}

/*
  「いま試せます」のQRは面に出さない（2026-09-20）。

  **01 の「名刺の見本を開く」と役が同じ。** 節に分かれていたときは
  離れていたので両方あってよかったが、面に寄せると2枚目に同じ誘いが
  並ぶ。高さも 246px あり、版面の半分を使っていた。
*/
.orbit-on .orbit-panel .reach-try { display: none; }

/*
  アプリの案内は面では詰める（2026-09-20）。

  節では**別の端末で入れる人**のために QR を添えている。面は価格と同じ
  枚に載るので、そのままだと 246px 溢れた。**バッジは残す**（公式の絵を
  そのまま置く、という決め）。QR だけ伏せ、横に並べる。
*/


/* 面の中の見本。**節に出すときより小さく。** 面には見出し・文章・写真も
   載るので、節と同じ 10.75rem だと版面の高さを超える。 */
.orbit-on .orbit-panel .design-row img {
  width: 7rem;
  border-radius: 0.4rem;
}
/* 色番号は**面では出さない**（2026-09-20）。9px の字を 46秒で流れ続ける
   帯の上に載せていた —— **止まっていても読めない大きさ。**
   このファイルは小円の札を「読めない字は飾りにしかならない」として
   落としている（狭い画面）。同じ基準をここにも当てる。
   意匠の名前（IVORY / NAVY …）は残るので、選ぶ手がかりは消えない。 */
.orbit-on .orbit-panel .design-row code { display: none; }
.orbit-on .orbit-panel .belt.designs { margin-top: 0.5rem; }
/*
  帯は**右下の角丸を避ける幅**に収める（2026-09-20）。

  面いっぱいに敷くと、下のほうにある帯の右端が**角丸に切られる** ——
  見本が1枚、弧で削れた形で止まって見える。角丸の半径ぶん詰めれば、
  カーブに掛からない。

  目盛りの帯が半弦から右端を出しているのと同じ考え方で、こちらは
  高さが枚ごとに違うので**半径ぶん**という安全側で引く。
*/
.orbit-on .orbit-panel .belt,
.orbit-on .orbit-panel .who-belt {
  /* **画面いっぱいの細工を、面の中では解く**（2026-09-20）。
   *
   * `.who-belt` は節のために `width: 100vw` と
   * `margin-left: calc(50% - 50vw)` を持っている（頁では帯を画面の端まで
   * 流すため）。**面の中では、その負のマージンが面の外へ引っぱる** ——
   * 390px の端末で左端が -32.2px、つまり**面より 54px 左から始まって
   * いた。** 意匠の帯（`.designs-sec .belt`）は節の子孫セレクタなので
   * 面では当たらず、そちらだけ 22px から始まる。**2本の帯の開始位置が
   * 54px ずれて見えていたのはこれ。**
   *
   * max-width だけ上書きして、width と margin を外し忘れていた。 */
  /* **左は画面の端まで**（2026-09-21 の指摘：「流れる系は左右に余白
     なしで流せないだろうか？左右のぼかしは入れて」）。
     版面の内側（22px）から始めると、流れているものが**そこで生まれて
     そこで消える**ように見える。左の余白ぶんだけ外へ出して、端は
     ぼかしで抜く ——「画面の外から来て、外へ行く」。
     右は版面の端まで（そこから先は逆L字の帯）。 */
  width: calc(100% + var(--orbit-px, 0px));
  margin-left: calc(-1 * var(--orbit-px, 0px));
  margin-right: 0;
  /* 端のぼかし。切り口が出ないように、左右とも 1割で抜く。 */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  /* **版面の幅いっぱい。** 以前は角丸を避けるため `- RC*0.7` を引いて
   * いたが、**版面がもう角丸ぶんを確保している**（pbot が帯の高さと
   * 角丸を見て決まる）ので二重引きだった。実測で帯の右端は角丸の
   * 限界まで 84〜90px 余っていて、面より 68px 手前で白く終わっていた。
   *
   * 流れる帯が途中で終わると**続きが無いように見える** ——
   * 節のほうで画面の端まで流している理由がそれ。面でも端まで流す。 */
  max-width: none;
}

/*
  機種の一覧は**横に並べる**（2026-09-20）。

  縦に積むと 236px を使い、02 が版面（413px）から溢れていた。3項目とも
  1行の説明なので、横に並べても読める。狭い画面では縦に戻す。
*/
/*
  **面は2段組みを既定にする**（2026-09-20）。

  # 溢れと空きは同じ1つの原因

  版面は約 970 × 413px ——**2.4 : 1 の横長**。そこへ縦1列で積んでいた
  ので、下から溢れて右が空いていた。01 の溢れと BUSINESS の空きは
  別々の不具合ではない。

  見出しは 2行で 141px＝**版面の34%**を使う。大きく出すと決めた（頁の
  題でもあるので）ばかりなので、削れない。**横へ逃がす。**

	左 … 札・見出し・1文・押しどころ（主張）
	右 … 絵・一覧・表（根拠）

  # 「左上寄せ」に反しない

  あの決めは円時代の「中央に置くと内接正方形しか使えない」への答えで、
  **中身の起点を左上に置く話。1列で積む話ではない。** 2段組みでも起点は
  左上のまま。

  狭い画面では1列に戻す（横に割ると1語ずつ折り返す）。
*/
@media (min-width: 43rem) {
  .orbit-on .orbit-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-content: start;
    align-items: start;
  }
  /* 左の段 …… 札・見出し・1文・押しどころ。 */
  .orbit-on .orbit-panel > .orbit-kicker,
  .orbit-on .orbit-panel > h1,
  .orbit-on .orbit-panel > h2,
  .orbit-on .orbit-panel > p,
  .orbit-on .orbit-panel > .lead,
  .orbit-on .orbit-panel > .hero-act,
  .orbit-on .orbit-panel > .orbit-cta,
  .orbit-on .orbit-panel > .orbit-cta2 { grid-column: 1; }
  /* 右の段 …… 根拠。**行をまたいで縦に伸ばす。** */
  .orbit-on .orbit-panel > .hero-samples,
  .orbit-on .orbit-panel > .orbit-two,
  .orbit-on .orbit-panel > .hero-stage,
  .orbit-on .orbit-panel > .reach { grid-column: 2; }
  /* 商品の枚は**左に言葉と押しどころ、右に絵**（他の枚と同じ形）。
   *
   * 1つの div に包んでいたときは中身がまるごと右の段へ行き、
   * **左半分が 300px 以上空いていた**（押しどころも右上に寄って、
   * 視線の流れと逆になっていた）。
   *
   * 絵は高さで決める —— 比を幅から出すと、広い段（623px）で 467px に
   * なって版面（492px）を突き抜ける。 */
  .orbit-on .orbit-panel > .prodshot-art {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    aspect-ratio: auto;
    /* **版面の高さいっぱい**（2026-09-21 の指摘：「PC 版のロゴ版・
       氏名版・名刺版は画像の高さをもう少し広げれないかな？右下に余白が
       多い気がして」）。
       30svh（261px）で止めていたので、版面 492px に対して**下に 231px
       空いていた。** 右の段には絵しか置かないので、絵が取ってよい。 */
    height: var(--orbit-ph-in);
    max-height: var(--orbit-ph-in);
  }
  .orbit-on .orbit-panel > .price-caution,
  .orbit-on .orbit-panel > .prodshot-buy,
  .orbit-on .orbit-panel > .prodshot-note { grid-column: 1; }
  /* 01 の名刺の絵は**行をまたいで縦の中央**（03 の写真と同じ置き方）。
   *
   * **`1 / -1` は使えない。** 明示的な行（grid-template-rows）を置いて
   * いないので `-1` は1本目の線を指し、結果は「1行目だけ」。絵が1行目を
   * 405.8px に膨らませ、**見出しが 393px 下へ押されていた**
   * （2026-09-20 に実測。左段が空で始まり、押しどころが面の外へ出た）。
   * 03 と同じく `span` で数える —— 左段は札・見出し・空の段落・
   * 1文・押しどころの5つ。 */
  .orbit-on .orbit-panel > .hero-stage {
    grid-row: 1 / span 5;
    align-self: center;
    justify-self: stretch;
    /* **端まで使わない**（2026-09-21 の指摘：「PC だと画像が中央より
       上目にある気がする」）。

       絵が版面の高さいっぱい（406px）だったので、上下に逃げ場が無い。
       そこへ下の浮き（intro-float）が重なると、**絵が上へはみ出して
       下にだけ隙間ができる** —— 実測で上端が -15px、下が +7px。
       中央に置いてあるのに、上に寄って見えていたのはこれ。

       少し詰めて、浮きの行き先を作る。 */
    /* **割合は段の高さに対して。** `--orbit-ph-in`（492px）で切ろうと
       したら効かなかった —— PC の面は中身で決まるので 406px しかなく、
       その 84%（413px）は面より大きい。**器ではなく、いま居る枠で測る。** */
    /* **`max-height` ではなく `height`。** 上限だけを置いても、中の絵の
       `max-height: 100%` が**効かない** —— 割合の上限は、親の高さが
       `auto` のとき `none` として扱われる（実測：器は 341px に縮んだのに
       絵は 406px のままで、下へ 32px はみ出した）。高さを決めてしまえば、
       中の割合が解ける。 */
    height: 84%;
  }
  .orbit-on .orbit-panel > .hero-stage img {
    /* 比を保つ。**`fill` だと版面の比に引き伸ばされる。** */
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
  /* 面に1枚だけ置く絵（法人・支援）。**右の段に、縦の中央。**
   *
   * 置き場所を書いていなかったので自動で流れ、**支援の枚で 623×478 が
   * 2行目に入って版面を 152px 突き抜け、押しどころは 232px 外**へ
   * 出ていた（PC で実測。スマホは1列なので出なかった）。
   * 1行目から数えて縦に伸ばし、上限を版面に切る。 */
  .orbit-on .orbit-panel > img.orbit-art {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
    width: 100%;
    height: auto;
    max-height: var(--orbit-ph-in);
    min-height: 0;
  }
  /* トピックは**全幅で2件並べる**（2026-09-21）。
   *
   * 見出しと説明を落としたので、左の段に置くものが押しどころしか
   * 残らない。右半分だけに記事を積むと、左が 560px 空く。
   * 記事そのものが主なので、横いっぱいに2件。 */
  .orbit-on .orbit-panel > .orbit-topics {
    grid-column: 1 / -1;
    /* **記事の数だけ並ぶ。** `repeat(2, 1fr)` だと1本のときに 621px まで
       伸びて、絵だけが大きい頁になる（dev で実測）。上限を置いて、
       余った幅は空けておく ——**中身が無い所に中身を広げない。** */
    grid-template-columns: repeat(auto-fit, minmax(18rem, 26rem));
    justify-content: start;
    gap: var(--orbit-gap-lg);
  }
  /* 絵が伸びすぎないように。残りは日付と題と押しどころが使う。 */
  .orbit-on .orbit-panel .orbit-topics img,
  .orbit-on .orbit-panel .orbit-topic-blank {
    max-height: calc(var(--orbit-ph-in) * 0.62);
  }
  /* 全幅で使うもの …… 流す帯・横3列の表。 */
  .orbit-on .orbit-panel > .belt,
  .orbit-on .orbit-panel > .who-belt,
  .orbit-on .orbit-panel > .orbit-steps,
  .orbit-on .orbit-panel > .prices,
  .orbit-on .orbit-panel > .prices-buy { grid-column: 1 / -1; }
}

/*
  02 は**2段組み**にする（2026-09-20）。

  見出しと1文だけだと右半分がまるごと空いていた（「右側にスペースが
  広くなっている」という指摘）。機種の一覧から下を右へ移すと、面の幅を
  使い切って、左は主張・右は詳細という読み順になる。

  狭い画面では1列に戻す（横に割ると1語ずつ折り返す）。
*/
@media (min-width: 43rem) {
  /* 段の割りは**既定のまま。** 上の `.orbit-on .orbit-panel` と同じ値を
     書き写していたので、**片方だけ直すと枚ごとに右段の始まりがずれる**
     （実際 designs がそうなっていた）。出どころは1つにする。 */
  /* 左の段 …… 札・見出し・1文。 */
  .orbit-on .orbit-panel[data-orbit-slug="devices"] > .orbit-kicker,
  .orbit-on .orbit-panel[data-orbit-slug="devices"] > h2,
  .orbit-on .orbit-panel[data-orbit-slug="devices"] > p {
    grid-column: 1;
  }
  /* 右の段 …… 機種の一覧から下。 */
  .orbit-on .orbit-panel[data-orbit-slug="devices"] > .reach {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }
  .orbit-on .orbit-panel[data-orbit-slug="devices"] .reach-list { gap: 0.9rem; }

  /*
    03 も2段組み。**写真を右へ大きく出す**（2026-09-20）。

    写真は「刷り上がりの実物」そのもので、この枚でいちばん見せたいもの。
    左に小さく置くと右が空いたままになる（「右側にスペースが広い」）。

    意匠の帯は**2段にまたがって下**。横に流れるものなので、片側に
    閉じ込めると流れる幅が足りない。
  */
  .orbit-on .orbit-panel[data-orbit-slug="designs"] {
    display: grid;
    /* 段の割りは**既定（0.95 / 1.05）のまま。** ここだけ 1:1 に
       していたので、**左段が 30px 広く、右段の始まりが他の枚と
       29.7px ずれていた**（2026-09-20 に実測）。しかもこの枚の狙いは
       「写真を右へ大きく」なので、右段を狭める 1:1 は**逆**だった。 */
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-content: start;
  }
  .orbit-on .orbit-panel[data-orbit-slug="designs"] > .orbit-kicker,
  .orbit-on .orbit-panel[data-orbit-slug="designs"] > h2,
  .orbit-on .orbit-panel[data-orbit-slug="designs"] > p {
    grid-column: 1;
  }
  .orbit-on .orbit-panel[data-orbit-slug="designs"] > img {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    /*
      **写真で箱を満たす**（2026-09-20）。

      `contain` + `max-height` で組んでいたので、箱は右段いっぱい
      （623×295）なのに**写真は中で letterbox されて 442px 幅**。
      左右に 90px ずつ透明な余白ができ、**箱の端と写真の端が揃わず、
      角丸も見えていなかった**（丸めているのは箱の角）。

      比を決めて `cover` にすると、写真が箱をぴったり満たす。
      **1.9:1 は「上下を 21% 切る」比。** 写真のカードは画面の
      12〜85% にあるので、21%（上下 10.5% ずつ）なら欠けない。
      これ以上横長にするとカードの上辺を削る。
    */
    aspect-ratio: 1.9 / 1;
    height: auto;
    max-height: none;
    object-fit: cover;
    /* 丸みは書かない。**`.orbit-panel img` の 12px に揃える**
       （2026-09-20）。ここだけ 0.6rem=9.6px で、面 14px・絵 12px に
       続く**3つめの値**を作っていた。 */
  }
  .orbit-on .orbit-panel[data-orbit-slug="designs"] > .belt {
    grid-column: 1 / -1;
    /* **右端も版面まで。** ここだけ角丸ぶんを引いていたので、PC で
       意匠の帯が職種の帯より 157px 手前で終わっていた（実測）。
       角丸の余裕は 215px あり、引く必要が無い。 */
    max-width: var(--orbit-pw-in);
  }
}

/*
  面に寄せた節の見出しは出さない（2026-09-20）。

  節をそのまま持ち上げているので、**節の見出しと面の見出しが二重に出る**
  （「トピックの中にトピックがある」）。面の見出しは orbitCard が持って
  いるので、節側の札と見出しを伏せる。

  **雛形は1つのまま。** 旗を降ろして節として出すときは、見出しが要る。
*/
.orbit-on .orbit-panel .card-sec > .inner > .eyebrow-line,
.orbit-on .orbit-panel .card-sec > .inner > h2 { display: none; }
/* 掲載は面の中で小見出しとして残す（トピックとは別の話なので、
   見出しが無いと続きに見える）。 */
.orbit-on .orbit-panel .media-sec > .inner > h2 {
  display: block;
  font-size: calc(var(--orbit-fs-body) * 1.05);
  margin: 0.6rem 0 0.3rem;
}
/* **`.card-sec {` と書かない。** TestIntroGroupsCarryTheGround は
   原文の最初の `.card-sec {` を読むので、ここが先に来ると別の規則を
   検査してしまう（2026-09-20 に踏んだ）。並びの最後を .inner にする。 */
.orbit-on .orbit-panel .card-sec,
.orbit-on .orbit-panel .card-sec > .inner { margin: 0; padding: 0; max-width: none; }

/* 狭い画面。**写真は文章の下**（2段に割ると1語ずつ折り返す）。
   面の幅からはみ出さないよう、幅で抑える。 */
@media (max-width: 43rem) {
  .orbit-on .orbit-panel[data-orbit-slug="designs"] > img {
    width: 100%;
    max-width: 100%;
    /* 狭い画面も同じ比。**切る量を変えない** —— 高さで詰めると
       切る量が増えて、カードの上辺が欠ける。 */
    aspect-ratio: 1.9 / 1;
    height: auto;
    max-height: none;
    object-fit: cover;
  }
  /* 版面が足りない画面では、**幅を詰めて高さを下げる。**
     比は保つので、切る量は変わらない。 */
  .orbit-tight .orbit-panel[data-orbit-slug="designs"] > img { max-width: 68%; }
}

.orbit-on .orbit-panel img {
  margin: 0;
  max-height: 11vh;
  max-height: 11svh;
  max-width: 100%;
  width: auto;
}
@media (min-width: 43rem) {
  .orbit-on .orbit-panel img { max-height: 34vh; max-height: 34svh; }
}
/* 円の中の押しどころ。**ヒーローの札と同じ形。**
 *
 * 塗り（orbit-cta）は「買う」だけ。枠（orbit-cta2）は「法人」。
 * 大きさは円の直径に追従させる（字と同じ扱い）。 */
.orbit-cta, .orbit-cta2 {
  display: inline-block;
  margin: 0;
  padding: 0.75em 1.5em;
  border-radius: 999px;
  font-size: var(--orbit-fs-body);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.orbit-cta {
  background: var(--pop-fill);
  color: var(--on-pop);
}
.orbit-cta2 {
  /* **段の幅いっぱいに伸ばさない。** 2段組みにしたので、そのままだと
     左の段いっぱいに伸びて帯に見える。 */
  justify-self: start;
  width: fit-content;
  border: 1.5px solid var(--pop);
  color: var(--pop);
  /* **地を塗る**（2026-09-18）。枠だけだと群の色が透けて、円の地の上で
   * ボタンの形が消える。押しどころは**面として立っている**必要がある。
   * 塗りは1つ（買う）のままなので、こちらは頁の地の色で塗る。 */
  background: var(--surface);
}

/* 面の中に置く組み。**節から持ち上げたものは節の規則をそのまま使う**
 * （.who-belt・.prices・.belt.designs など）。ここは円環でしか使わない
 * 2つだけ。 */

/* 買う→かざす→渡す。**横3段。** 縦に積むと面の下が余る。 */
.orbit-steps {
  list-style: none;
  margin: 0; /* 段は .orbit-panel の gap が持つ（二重に足さない） */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  width: 100%;
  /* **面の幅をそのまま使う**（2026-09-20）。46rem で止めていたので、
     2段組みにしたあと3枚が細くなり、字が折り返して背が伸びていた。 */
  max-width: none;
}
/* **枠で囲んだカードにする**（2026-09-20 の指摘）。
   段が字だけで並んでいると、3つで1つの手順だと読めなかった。 */
.orbit-steps li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem;
  /* **丸みは面の規則に揃える**（--r-panel 0.875rem）。2026-09-20 に
     0.6rem で作ってしまい、**その日に決めた「面の作りは1つ」を自分で
     破っていた。** 枠は細線・地は生成りにして、「紙の上にもう1枚薄い
     紙が置いてある」形にする（白い面に白いカードは影だけでは立たない）。 */
  border: 1px solid var(--border);
  border-radius: var(--r-panel, 0.875rem);
  background: var(--bg);
}
.orbit-steps b {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--pop);
}
.orbit-steps strong {
  font-size: calc(var(--orbit-fs-body) * 1.08);
  color: var(--text);
  line-height: 1.5;
}
.orbit-steps span {
  font-size: calc(var(--orbit-fs-body) * 0.92);
  color: var(--text-sub);
  line-height: 1.8;
}
/* 狭い画面は縦。**3列のままだと1語ずつ折り返す。** */
@media (max-width: 43rem) {
  .orbit-steps { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* 仕事と趣味。**2列。** */
.orbit-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  max-width: none;
  margin-top: 0; /* 段は .orbit-panel の gap が持つ（二重に足さない） */
}
/* こちらも枠で囲む。**HOW と同じ形**にして、読み方を揃える。 */
.orbit-two > div {
  padding: 0.85rem 0.95rem;
  /* **04 と同じ作り。** 面によって作りが違うのを作らない。 */
  border: 1px solid var(--border);
  border-radius: var(--r-panel, 0.875rem);
  background: var(--bg);
}
/* 紺の濃い面。**頁でここ1枚だけ**（法人の話。決めの復元）。
   濃い地の上では字を反転する。 */
.orbit-two > .orbit-deep {
  background: var(--ground-navyband);
  border-color: var(--ground-navyband);
}
.orbit-two > .orbit-deep b { color: var(--on-pop); }
.orbit-two > .orbit-deep p { color: var(--on-pop); opacity: 0.86; }

.orbit-two b {
  display: block;
  font-size: calc(var(--orbit-fs-body) * 1.05);
  color: var(--pop);
  margin-bottom: 0.3rem;
}
.orbit-two p {
  font-size: calc(var(--orbit-fs-body) * 0.92);
  color: var(--text-sub);
  line-height: 1.85;
}
@media (max-width: 43rem) {
  .orbit-two { grid-template-columns: 1fr; gap: 0.9rem; }
}

/*
  狭い画面で版面に収めるための詰め（2026-09-20）。

  # なぜ狭い画面だけ別に詰めるのか

  面の中の余白は rem で置いてある＝**画面が小さくなっても縮まない。**
  いっぽう版面は `innerHeight − 固定費` で、固定費は 390幅で 233px
  ——844 の 28% だが 553（SE）では 42%。**画面が小さいほど、余白の
  占める割合が上がる。** 字は --orbit-fs-body で縮むのに余白が縮まない
  ので、狭い画面ほど「字が小さいのに入らない」形になっていた。

  **面の外（縦積み・動きを止めている人）には当てない。** あちらは
  頁の高さが自由なので、詰める理由がない。
*/
@media (max-width: 43rem) {
  .orbit-on .orbit-panel .reach { gap: 0.5rem; margin-top: 0.6rem; }
  .orbit-on .orbit-panel .reach-list { gap: 0.4rem; }
  .orbit-on .orbit-panel .orbit-steps { gap: 0.5rem; }
  .orbit-on .orbit-panel .orbit-steps li { padding: 0.5rem 0.7rem; }
  .orbit-on .orbit-panel .orbit-two { gap: 0.3rem; }
  .orbit-on .orbit-panel .orbit-two > div { padding: 0.45rem 0.7rem; }
  /* ここの説明は**落とさない** —— 「仕事で」「趣味で」だけでは何も
     言っていないことになる（機種の名前や STEP の動詞とは違う）。
     詰めるのは枠の内側だけ。 */
  /* バーの上下。**ここを 1rem 詰めると版面が 16px 増える** ——
     面の中を削るより先に、面の外から取る。 */
  .orbit-on .head { padding-top: 0.7rem; padding-bottom: 0.7rem; }

  /*
    行送りを詰める（2026-09-20）。

    面の本文は 1.9 で組んである。**広い画面では 20px の字に対する
    1.9 なので読みやすい**が、狭い画面の字は下限の 12px。
    12px の 1.9 は行間が字より広く、**間延びして見えるうえ、折り返し
    1行ごとに 23px 使う。** 狭い画面だけ 1.6 に落とす。

    **伏せるより先にここを削る。** 伏せると、古い iPhone の人は
    「自分の機種でどうすればいいか」を読めなくなる ——
    この面がいちばん答えなければいけない問い（orbit.go の Slug の印）。
  */
  /* 見出しの行送り。**表示用の字に 1.5 は広い。** 2行の見出しが
     版面の 18% を使っていた。1.35 で 2行あたり 11px 戻る。 */
  .orbit-on .orbit-panel h1,
  .orbit-on .orbit-panel h2 { line-height: 1.35; }
  .orbit-on .orbit-panel p,
  .orbit-on .orbit-panel .reach-list li,
  .orbit-on .orbit-panel .reach-list span,
  .orbit-on .orbit-panel .orbit-steps li,
  .orbit-on .orbit-panel .orbit-steps span,
  .orbit-on .orbit-panel .orbit-two p { line-height: 1.6; }

  /* 見本の枠の前置き。**押せるものの札が同じことを言っている**
     （「名刺の見本を開く」）ので、狭い画面では出さない。 */
  .orbit-on .orbit-panel .hero-samples-lead { display: none; }



  /* STEP n を見出しの**前に置く**。上に載せると、3つの枠それぞれが
     1行ぶん（21px）を番号だけに使う。横に並べれば 0。
     番号は主の色・小さい字のままなので、見出しと混ざらない。 */
  /* 機種名と説明は**上下のまま。** 1行に畳むのを試したが、機種名が
     長い（「NFC 対応の Android」）ので折り返しが増え、**畳んだほうが
     39px 高くなった**（2026-09-20 に実測）。手順（STEP n）は番号が
     短いので畳むほうが減る —— **同じ手が同じように効くとは限らない。** */

  .orbit-on .orbit-panel .orbit-steps li { display: block; }
  .orbit-on .orbit-panel .orbit-steps b {
    display: inline;
    margin-right: 0.5em;
  }
  .orbit-on .orbit-panel .orbit-steps strong { display: inline; }
  /* 説明は行を変える。**番号と見出しだけを1行に畳む。** */
  .orbit-on .orbit-panel .orbit-steps span { display: block; }
}

/*
  版面がどうしても足りない画面（.orbit-tight、JS が測って付ける）。

  # どこで足りなくなるか

  固定費（バー・帯・上下の空き）は 390×659 で 240px ——画面の 36%。
  同じ幅でも SE（375×553）では 43% になる。**画面が小さいほど固定費の
  割合が上がるのに、面の中の余白と字は下限で止まっている。**
  上の詰めを全部当てても、SE では 02 が 125px 溢れる。

  # ここで初めて中身を伏せる

  伏せる順は「同じことを2回言っている > 補いの1文 > 本体」。
  **機種の名前と逃げ道（QRコード）は残す** —— この面の問いは
  「自分の機種で使えるか」で、名前がそれに答えている。落とすのは
  開き方の説明で、読めなくても**カードの裏のQRで必ず渡せる**（残す方）。
*/
/*
  補いの1文は**狭い画面では出さない**（2026-09-20 に .orbit-tight 限定から
  引き上げ）。

  # なぜ落とすほうを選ぶか

  本文を 12px から上げるための席を、ここから取る。16px で測ると
  `.reach`（機種3種＋説明＋逃げ道）だけで **321px ＝ 版面の 77%**、
  手順の3枚で 274px。**説明を落とすと 02 は 511→337px、04 は 441→305px。**

  9/23 に新聞から来る読者を主に置くなら、**「小さい字で詳しい」より
  「読める字で要点」**。落とすのは開き方の説明で、
  **機種の名前と逃げ道（裏面のQR）は残す** —— この面の問い
  「自分の機種で使えるか」には、名前だけで答えられている。
*/
@media (max-width: 43rem) {
  /* **機種の説明は伏せる。** 実機の svh（390×659）で出すと 02 が
     87px 溢れて目盛りの帯に重なる（実測）。 */
  .orbit-on .orbit-panel .reach-list span { display: none; }
  /* **手順の説明は出す**（2026-09-20 に戻した）。
     一緒に伏せていたが、測ると実機でも 24px 余る —— 伏せる理由が
     無かった。版面が足りない画面だけ落とす。 */
  .orbit-tight .orbit-panel .orbit-steps span { display: none; }
}

/* 公転軌道の点線は外した（2026-09-20）。**円のための部品**で、逆L字の
 * 軌道には当てられない（道は直線と四分円で、閉じた輪ではない）。
 * 起点の輪（.orbit-slot）だけ残す。 */
.orbit-ring { display: none !important; }

/* 吸われる位置の枠。**起点に置いたまま動かない。** */
.orbit-slot { display: none; }
/* 起点の破線は**外した**（2026-09-21 の指摘）。頂点で小円が円になり、
   札が一点に潰れるようになったので、**止まる場所は形で分かる。** */
.orbit-on .orbit-slot { display: none; }
.orbit-on .orbit-slot-off {
  display: block;
  position: absolute;
  left: var(--orbit-slotx);
  top: var(--orbit-sloty);
  width: var(--orbit-slot);
  height: var(--orbit-slot);
  border: 1px dashed var(--pop);
  opacity: 0.6;
  /* 小円に合わせる（上の 28% と同じ考え方。枠のほうが一回り大きい）。 */
  border-radius: 24%;
  pointer-events: none;
  z-index: 2;
}

/* いま何枚目か。**面の左下**（2026-09-20）。
 *
 * （以前ここには「右・縦中央。PC だけ」と書いてあった。**置き場所を
 * 面の左下へ移した時点で古い。** 狭い画面でも出す —— 小円は狭い画面
 * では番号だけになり、見出しの語はここにしか無い。）
 *
 * 以前は画面の右端・縦中央に置いていたが、**そこは小円が通る道**に
 * なった。面の中へ移し、右下の角丸を避けた幅に収める（幅は JS が
 * 半弦から出して --orbit-bar-w に書く）。
 *
 * **小円だけでは目的の枚に辿り着けない**ので、これは飾りではない。 */
.orbit-side { display: none; }
.orbit-on .orbit-side {
  display: block;
  position: absolute;
  left: var(--orbit-bar-x);
  bottom: var(--orbit-meta-y);
  width: var(--orbit-bar-w);
  z-index: 6;
  text-align: left;
}
.orbit-side-no {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: var(--text-sub);
}
/* **字の階段に繋ぐ**（2026-09-20）。面の本文が 12px まで縮む狭い
 * 画面で、ここだけ 15px のまま帯を高くしていた。帯の高さは版面から
 * 引かれるので、**そのぶん中身の置ける高さが減っていた。** */
.orbit-side-key {
  font-size: calc(var(--orbit-fs-body) * 1.05);
  letter-spacing: 0.14em;
  color: var(--pop);
}
/* 8本の目盛り。**いまの1本だけ太く濃い。** */
/* 横一列。**枚数ぶんを等分**して、いまの位置までを濃くする。 */
.orbit-prog {
  margin-top: 0.45rem;
  display: flex;
  gap: 4px;
}
.orbit-prog i {
  display: block;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.3s;
}
.orbit-prog i[data-orbit-on] {
  background: var(--pop);
}

/* 版面が足りない画面では、帯を**横に寝かせる**（2026-09-20）。
   番号と見出しを1行に並べると帯が 25px 低くなり、**その 25px は
   そのまま版面に戻る**（pbot は帯の高さを測って出している）。

   `.orbit-on .orbit-side` と同じ強さなので、**必ずこちらを後に置く。**
   前に置くと当たらない（2026-09-20 に一度踏んだ）。 */
.orbit-tight .orbit-side {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
}
.orbit-tight .orbit-prog { flex: 1 0 100%; margin-top: 0.25rem; }

/* いま何枚目か（左下）と、送れること（右下）。
 * **縦積みでは出さない** —— 回っていないので意味を持たない。 */
.orbit-mark, .orbit-hint { display: none; }
/* **左下の番号は外した**（2026-09-20）。面の左下に置いた目盛り
 * （.orbit-side）が番号も見出しも出すので、同じことを2か所で言う形に
 * なっていた。札そのものは読み上げ用に HTML に残す。 */
.orbit-on .orbit-mark {
  display: none;
  position: absolute;
  left: 1.25rem;
  bottom: 0.75rem;
  margin: 0;
  z-index: 6;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--text-sub);
}
.orbit-on .orbit-mark b {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pop);
}
.orbit-on .orbit-mark span { margin-left: 0.4em; }
/* **帯から降ろした**（2026-09-20）。
 *
 * 9px の白抜きを帯の右下に置いていたが、そこは帯のいちばん淡い所で
 * **実測の比 1.91**（必要なのは 4.5）。しかも帯全体に対して 3:1 を
 * 取れる色は、機械で解くと**ほぼ黒しかない** —— 白でも墨でも、濃い端か
 * 淡い端のどちらかで必ず落ちる。**この帯に文字は載らない。**
 *
 * `aria-hidden="true"` の飾りで、「まだ続く」は面の左下の目盛り
 * （.orbit-prog）と、帯を走る番号付きの列が既に言っている。 */
/* 上下に送れる、という印。**字をやめて形にした**（2026-09-20）。
 *
 * 「SCROLL」を 9px の白抜きで置いていたが、そこは帯のいちばん淡い所で
 * **実測の比 1.91**（必要なのは 4.5）。帯全体に対して 3:1 を取れる色は
 * 機械で解くとほぼ黒しかない —— **この帯に白い文字は載らない。**
 * 墨なら淡い所で 6.18〜8.64 あるので、形を墨で描く。 */
.orbit-on .orbit-hint {
  display: block;
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  margin: 0;
  z-index: 6;
  /* **白**（2026-09-21 の指示：「SCROLL は白にして」）。
   *
   * 右下は四隅の規則でいちばん淡い所なので、白は地に対して 1.9 しか
   * 取れない。**飾り**（aria-hidden の印で、同じことは左下の目盛りが
   * 言っている）なので 1.4.11 の対象ではないが、消えては困るので
   * 影を1枚敷く。矢印も字も同じ filter で拾える。 */
  color: #fff;
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.38));
  pointer-events: none;
}
.orbit-on .orbit-hint {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}
.orbit-on .orbit-hint svg { display: block; }
/* 字も戻す（2026-09-20 の指摘：「SCROLL の文字も」）。
   **色は墨。** 白抜きは帯のいちばん淡い所で 1.91 だったので外した経緯が
   ある —— 墨なら 6.18〜8.64。11px（今日 9px を潰した下限）。 */
.orbit-on .orbit-hint span {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  line-height: 1;
}

/* 小円。**番号と札だけ。** */
.orbit-on .orbit-dots { display: block; }
/* 群ごとの地。**縦に並べた頁と同じ4色を使う**（--zone-*）。
 *
 * 円環は同じ中身を別の見せ方にしたものなので、**色まで別にすると
 * 2つの頁になる。** 新しい色相は足さない。
 *
 * 大円と小円の両方に当てる。片方だけだと、回っている最中にどちらが
 * いまの群なのかが読めない。
 *
 * 暗色でも同じ変数を見る（--zone-* は暗い側の値を持っている）。 */
.orbit-panel[data-orbit-zone="kinari"],
.orbit-dot[data-orbit-zone="kinari"],
/* 群の色。**JS が .orbit-big に data-orbit-zone を書く**（面が変わる
   たびに）。長いあいだ `var(--orbit-zone)` を読む場所が無く、死んで
   いた（2026-09-20 に地として使うようにした）。 */
/* **器に持たせる**（2026-09-21）。小円は面の兄弟なので、面に書いた
   変数は届かない。器に書けば面も小円も同じ色を読める。 */
.orbit-stage[data-orbit-zone="kinari"] { --orbit-zone: var(--zone-kinari); }
.orbit-stage[data-orbit-zone="shu"] { --orbit-zone: var(--zone-shu); }
.orbit-stage[data-orbit-zone="navy"] { --orbit-zone: var(--zone-navy); }
.orbit-stage[data-orbit-zone="moss"] { --orbit-zone: var(--zone-moss); }
.orbit-stage[data-orbit-zone=""] { --orbit-zone: var(--surface); }
.orbit-panel[data-orbit-zone="moss"],
.orbit-dot[data-orbit-zone="moss"],
.orbit-big[data-orbit-zone="moss"] { --orbit-zone: var(--zone-moss); }
.orbit-panel[data-orbit-zone="navy"],
.orbit-dot[data-orbit-zone="navy"],
.orbit-big[data-orbit-zone="navy"] { --orbit-zone: var(--zone-navy); }

.orbit-dot {
  position: absolute;
  /* **大円の線より前に出す。** 小円の中を大円の輪郭が横切っていた
   * （2026-09-18）。被せるのはよいが、中に線が見えると小円が
   * 「穴」ではなく「透けた板」に見える。
   *
   * 地（--surface）で塗ってあるので、前に出せば線は隠れる。 */
  z-index: 4;
  /* **道なりに形が変わる**（2026-09-20）。右の直線では縦長、下の直線
     では横長、弧のあいだは中間。JS が道の進み具合から出して書く。 */
  width: var(--orbit-dw, var(--orbit-sd));
  height: var(--orbit-dh, var(--orbit-sd));
  margin: 0;
  padding: 0;
  /*
    **角丸の四角にする**（2026-09-20 の指摘）。

    円だったころの名残で丸くしていたが、面が角丸の四角になったので
    **形が2種類**になっていた。狭い画面ほど小円が大きく出るので、
    その食い違いが目に付く。

    丸みは面と同じ考え方（辺の長さに対する比）で、カードの角にも寄る。
  */
  /* **角丸の長方形**（2026-09-20 の指摘）。真円 → 角丸の四角 → 真円 →
     角丸の長方形、と見て決め直してきた所。楕円だと道なりに伸び縮みした
     ときに形の印象が変わりすぎるので、丸みを固定の長さで持つ。
     **起点では円**（JS が --orbit-dr を SD/2 まで持ち上げる）——
     止まる場所と通り道が形で分かれる。
     当たり判定（::after）も同じ値を使う ——**形を片方だけ変えない。**

     **角ごとに変える**（2026-09-21 の指摘：「もっとヌルヌル動く感じに
     したい。長方形すぎるのか…カーブに沿って形が変わる感じが理想。
     スクイーズやスライムのような」）。4角を1つの値で回していたので、
     どれだけ伸び縮みしても「角丸の長方形」の枠を出られなかった。
     JS が進む側の2角をふくらませ、後ろの2角を締めて --orbit-br に書く。 */
  border-radius: var(--orbit-br, var(--orbit-dr, 0.9rem));
  /*
    小円は**紙（白）。枠は反転して白**（2026-09-20）。

    帯を主の色で塗ったので、枠を --border-strong のままにすると 1.14 で
    消える。**塗りが白なら帯に対して 4.93 で立つ**ので、枠は輪郭の線
    ではなく「紙の縁」として白で置く。

    群の色はもう使わない。パネルと同じ理由（地で群を言うのをやめた）。
  */
  /*
    **地は墨、縁は白**（2026-09-20）。

    もとは面と同じ白で、縁も白。**紙が2種類**あるうえ、薄くなると
    番号（朱）と円（白）のあいだの比が潰れた —— 実測で 05 以降は
    **1.85〜1.89 ＝ 読めない。** 見える人だけが押せない形だった。

    墨にすると、白い番号との比が **13.99**（0.62 まで薄めても 5.10）。
    帯に対しては**濃い端は白い縁が、淡い端は墨の身が**持つので、
    どちらか一方は必ず 3.0 を超える（片方だけだと必ずどこかで消える）。
    届く商品（生成りの表／墨の裏）とも揃う。
  */
  border: 1.5px solid var(--on-pop);
  /* **地は面と同じ**（2026-09-21 の指摘）。節ごとに面の色が変わるので、
     小円だけ白のままだと「別の部品」に見える。 */
  background: var(--orbit-zone, var(--surface));
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  cursor: pointer;
  /* 位置は transform だけで動かす。**left/top を毎フレーム書かない。** */
  left: 0;
  top: 0;
  transform: translate3d(var(--orbit-dx), var(--orbit-dy), 0)
             scale(var(--orbit-ds, 1));
  opacity: var(--orbit-do, 0.5);
  transition: opacity 0.2s linear;
}
/* **当たり判定を一回り大きく。** SP で取りこぼす。
 * 押せる範囲も四角に揃える（小円は border-radius: 28%）。
 * **コメントだけ書いて値を変えていなかった**（2026-09-20 に発見）。
 * 一回り大きい枠なので、同じ見た目の丸みには 28% より小さい値が要る。 */
.orbit-dot::after {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border-radius: var(--orbit-br, var(--orbit-dr, 0.9rem));
}
/* いま正面のもの。**線を朱にする**（参照実装の `.mini.on`）。
 * 他は灰のままなので、どれが開いているか一目で分かる。 */
/* いま正面のもの。**帯の上なので --pop では消える**（1.17）。墨で囲む
   （白い小円に対して 13.99、帯に対しても十分）。 */
/* いま正面のものは**反転**（紙に朱の番号）。明暗のどちらでも印が残る
   —— 以前の `border-color: var(--text)` は、暗色で縁と地の比が 1.22 に
   なり、**どれが開いているか分からなくなっていた。** */
/* いま正面のものは**縁を墨に**。明暗のどちらでも印が残る —— 以前は
   暗色で縁と地の比が 1.22 になり、どれが開いているか分からなかった。 */
.orbit-dot[data-orbit-here] { border-color: var(--text); }
/* いま正面のものは**記号を朱に。** 縁の墨と合わせて2つの手がかり。 */
.orbit-dot[data-orbit-here] .orbit-dot-icon,
.orbit-dot[data-orbit-here] .orbit-dot-frac { color: var(--pop); }

/* 小円の中身は**記号**（2026-09-21 の指摘：「やっぱり日本語が小円で
   気持ち悪いかも。意味のわかるロゴで表現できないだろうか」）。

   日本語をやめた経緯：45px の円に2〜4字を入れるため、道なりに縦書きと
   横書きを入れ替える仕掛けを持っていた（`writing-mode` は補間できない
   ので、頂点で一点に潰してから切り替える）。仕掛けが要るということは
   **その字はそこに収まっていない**ということで、実際に頂点では4字目が
   切れていた。記号は向きを持たないので、仕掛けごと要らなくなる。

   大きさは**直径に追従**（％にしない）。小円は動くあいだ楕円に伸びる
   ので、％で持つと**記号まで一緒に歪む。** 歪むのは器だけでよい。 */
.orbit-dot-icon {
  width: calc(var(--orbit-sd, 45px) * 0.46);
  height: calc(var(--orbit-sd, 45px) * 0.46);
  color: var(--text);
  flex: none;
}
/* 商品の3枚だけは分数（2026-09-21 の指摘：「06 は 1/3 みたいにロゴ自体
   に」）。同じ物を売る枚なので、同じ記号では何枚目か分からない。 */
.orbit-dot-frac {
  font-size: calc(var(--orbit-sd, 45px) * 0.30);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
/* 英字は**円の外、いつも下**（2026-09-21 の指摘：「小円の ABOUT とかは
   円の下固定で。横でも。文字は白にして」）。

   中に入れると「HOW IT WORKS」が2行になって記号の席が無くなる。外に
   置けば長さに縛られない。**縦の道でも横の道でも下に固定**するので、
   目は「円 → その下の語」という1つの読み方だけを覚えればよい。 */
.orbit-dot-en { display: none; }
@media (min-width: 43rem) {
  .orbit-dot-en {
    display: block;
    position: absolute;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    /* **白**（2026-09-21 の指示）。円の下に固定したので、字が乗るのは
     * 帯の内側だけ —— 円の左に置いていたときのように、長い語が白い面へ
     * はみ出して消えることはない。淡い所でも落ちないよう影を1枚。 */
    color: #fff;
    opacity: 0.85;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    pointer-events: none;
  }
  /* **縦の道でも横の道でも、円の下。**
   *
   * 縦の道で「円の左」に置いたら、長い札（HOW IT WORKS / FOR EVERYONE）が
   * 帯の左端を越えて**面の中身に重なった**（PC で STEP 3 の枠の上に
   * 乗っていた）。横へ伸ばすと必ずどこかで当たる。下に置けば、長さは
   * 帯の幅とだけ競う。**道によって出る場所を変えない。** */
  .orbit-dot .orbit-dot-en {
    top: calc(100% + 0.3rem);
    left: 50%;
    transform: translateX(-50%);
  }
  /* いま正面のものだけ、はっきり。 */
  .orbit-dot[data-orbit-here] .orbit-dot-en { opacity: 0.95; }
}

/* ---------------------------------------------------------------- 止める
 *
 * **動きを止めている人には円にしない。** フォールバックではなく、
 * 必須の代替経路（縦積みで全部読める）。
 */
@media (prefers-reduced-motion: reduce) {
  .orbit-on .orbit-track { height: auto; }
  .orbit-on .orbit-stage { position: static; height: auto; overflow: visible; }
  .orbit-on .orbit-big {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    border: 0;
  }
  .orbit-on .orbit-panel {
    position: static;
    max-width: var(--w-prose);
    margin-inline: auto;
    padding: 0 1.25rem;
    width: auto;
    opacity: 1;
    pointer-events: auto;
  }
  .orbit-on .orbit-dots { display: none; }
}

/* トピック。**横に送って読む記事のカード。**
 *
 * # 流さない
 *
 * 出資者のロゴは5つ以上で自動的に流れるが、こちらは流さない。
 * ロゴは「在ること」が伝われば足りるのに対し、**トピックは読ませる**ので、
 * 勝手に動くと読めない。指で送る。
 *
 * # JavaScript を使わない
 *
 * CSP は `default-src 'none'` のままにする決め。送りは overflow-x と
 * scroll-snap だけで足りる。 */
.topiclist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0 0 0.75rem;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  /* 1枚ずつ止まる。**途中で止まると次があることが分からない。** */
  scroll-snap-type: x mandatory;
  /* 端まで送ったときに、最後の1枚が画面の端に触らないように。 */
  scroll-padding-inline: 0.25rem;
  /* 送れることを、影ではなく**次の1枚の端**で伝える。 */
  -webkit-overflow-scrolling: touch;
}
.topiccard {
  flex: 0 0 min(19rem, 78%);
  scroll-snap-align: start;
}
.topiccard a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  /* **リンク色にしない。** カード全体が押しどころなので、下線と青字を
   * 出すと題だけが押せるように見える（`docs/設計/…` の押しどころの規則）。 */
  color: inherit;
  text-decoration: none;
}
.topiccard a:hover { border-color: var(--border-strong); }
.topicthumb {
  display: block;
  width: 100%;
  /* **比を固定する。** 絵ごとに違う比のまま並べると、カードの高さが
   * ばらついて横並びが階段になる。 */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--bg);
}
.topicthumb-blank { background: var(--bg); }
.topiccard-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem 1.1rem;
}
.topiccard-body time { font-size: 0.8rem; color: var(--text-sub); }
.topiccard-title { font-weight: 700; line-height: 1.5; }
.topiccard-lead {
  font-size: 0.85rem;
  color: var(--text-sub);
  line-height: 1.7;
}

/* 掲載。**媒体の名前と日付と、記事への行き先。**
 *
 * ロゴは任意（許諾が要る）。**無くても形が崩れないように**、名前を
 * 主にして組む。 */
.media {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
}
.media li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.media-logo { height: 2rem; width: auto; max-width: 12rem; display: block; }
.media-name { font-weight: 700; }
.media-on {
  font-size: 0.8125rem;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.media .entry-btn { margin: 0.25rem 0 0; }

/* お知らせ（紹介ページの抜粋）。**日付と題だけ。**
 *
 * 本文は出さない —— ここは「動いている」ことが伝わればよい場所で、
 * 読ませる場所ではない（全部は /news）。 */
.newsbrief {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  text-align: left;
  max-width: 34rem;
  margin-inline: auto;
}
.newsbrief li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}
.newsbrief li:last-child { border-bottom: 1px solid var(--border); }
.newsbrief time {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.newsbrief-title { flex: 1 1 14rem; font-weight: 700; }

/* 法人の帯は「面」にする。**画面の端まで伸ばさない**（2026-09-02 の指摘）。
 * 左右に余白を残して囲むと、他の帯と役割が違うことが形で分かる
 * （買う話ではなく、別の相手に向けた案内）。
 */
.bizcard {
  /* 群の中では、他のカードと同じ幅・同じ置き方にする。
     **入れないと群の幅いっぱいに広がって、隣のカードと形が揃わない**
     （2026-09-09 に群を作って気づいた）。 */
  max-width: min(var(--page), calc(100% - 2rem));
  margin-inline: auto;
  margin-top: 1.5rem;
  padding: 2.75rem clamp(2rem, 4vw, 3.5rem) 3rem;
  border-radius: 1.5rem;
  /* **濃い紺のまま**（2026-09-18 に一度 --zone-navy へ替えて戻した）。
   *
   * 円環の BUSINESS と同じ色にしようとしたが、**このカードの字は白**
   * なので、淡い紺（#DCE4F0）に載せると読めなくなった。円環の面は
   * 黒い字なので同じ色を共有できない。
   *
   * 同じ話であることは、色相（紺）が同じことで足りている。 */
  background: var(--ground-navyband);
  overflow: hidden;
}
/* **中央に置く。** 器（60rem）より狭い 42rem の段なので、`margin: 0` の
   ままだと左に寄る —— 中の文字も札もボタンも、カードの中心から
   120px ほど左にずれていた（2026-09-12 の指摘）。 */
.bizcard > .inner { max-width: 42rem; margin-inline: auto; padding: 0; }
@media (max-width: 30rem) {
  .bizcard {
    padding: 2rem 1.25rem 2.25rem;
    border-radius: 1.25rem;
    margin-top: 1.25rem;
  }
}

/* ---------------------------------------------------------------- 節はカード
 *
 * **帯（画面の端まで）ではなく、左右に余白を残した幅広のカード**にする
 * という好み（2026-09-02）。囲まれていると、節の始まりと終わりが形で
 * 分かる。見出しの節だけは横いっぱいのまま（あちらは地が続いていて、
 * 囲む縁が無いほうが広く見える）。
 */
/* 節は画面いっぱいの帯。**カードの形をやめた**（2026-09-09）。
 *
 * # なぜ変えたのか
 *
 * 角丸の白いカードを縦に積んでいた。**広い画面では、両側に地色が
 * 大きく残って中身が細い柱になる。** 節の切り替わりもカードの隙間で
 * しか出ないので、下まで同じ形が続いて見える。
 *
 * 帯にすると、**面そのものが区切りになる。** 印刷物の見開きに近い。
 *
 * # 中の行は伸ばさない
 *
 * 器が広くなっても、読む行は 34rem に留める（1行が長いと目が戻れない）。
 * 器と行幅を分けて持つ。
 */
.card-sec {
  /* **カードの形に戻した**（2026-09-09）。地は後ろの群（.band）が持つ。
     一度この節そのものを帯にしたが、面の切り替えだけでは
     「まとまり」が出なかった。内容の群を地で分け、群の中は白い
     カードを並べる。 */
  width: auto;
  /* 器と同じ幅。**ここに数字を書かない** —— 2か所で決めていると、
     器だけ広げてもカードが広がらない（2026-09-11 に一度そうなった）。

     **左右の余白は自分で持つ。** 群（.zone）は画面いっぱいに出るので、
     幅が器に届かないところ（736〜960px）ではカードが画面の端に触って
     いた。群に padding を足す手もあるが、**流れる帯が親の padding で
     ずれる**（この file に注意書きが3つある）ので、こちら側で持つ。 */
  max-width: min(var(--page), calc(100% - 2rem));
  margin: 1.5rem auto 0;
  transform: none;
  padding: 2.75rem clamp(2rem, 4vw, 3.5rem) 3rem;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--surface);
  /* **地との差が 1.28 しかない。** 縁と影で浮かせる。 */
  border: 1px solid rgba(44, 44, 42, 0.07);
  box-shadow: 0 1px 2px rgba(44, 44, 42, 0.05),
              0 10px 24px rgba(44, 44, 42, 0.07);
}
.card-sec > .inner {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* 中の文章は読める幅に留める。**器が広くなっても行は伸ばさない。**
 *
 * 見出しを中央にしたので、説明文も中央に置く（2026-09-09 の指摘）。
 * **幅は残す** —— 中央に寄せても、1行が長いと目が行頭に戻れない。
 * 器の中で中央に置くために margin も自動にする。 */
.card-sec > .inner > p,
.card-sec > .inner > .note {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

/* .inner を持たないカード（出資者の節）も同じ扱いにする。
 *
 * **`text-align: center` だけでは中央にならない。** 枠が 34rem に絞られて
 * いて、左に寄った枠の中で中央になる（`.paused-note` と同じ形で外した。
 * 2026-09-09 に2度目）。枠ごと中央に置く。 */
.card-sec > p,
.card-sec > .note,
.card-sec > .lead {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

/* ボタンに添える1文だけは幅を外す。
 *
 * **`.paused-note { max-width: none }` では勝てない。** 上の
 * `.card-sec > .inner > p` のほうが詳細度が高く（0,3,1 対 0,1,0）、
 * 34rem に絞られてボタンより狭い枠の中で中央になっていた ——
 * 少し左に寄って見えた（2026-09-09 に2度指摘された）。 */
.card-sec > .inner > .paused-note,
.card-sec > .inner > .hero-note { max-width: none; }
.card-sec > .inner > :last-child { margin-bottom: 0; }
@media (max-width: 30rem) {
  .card-sec {
    padding: 2rem 1.25rem 2.25rem;
    border-radius: 1.25rem;
    margin-top: 1.25rem;
  }
}

/* 群の外に置くカード。**左右の余白を自分で持つ。**
 *
 * 群（.zone）は狭い画面で左右に 1rem の余白を持つので、中のカードは
 * 端に触らない。**群の外にあるカードには、その余白が無い**（出資者の
 * 節が画面の端に触っていた。2026-09-09 の指摘）。 */
/* アプリの節は**地を塗らない。** card-sec-standalone は余白のために
   借りているだけで、朱の地は出資者の節のためのもの。2枚続けて朱にすると
   どちらが何の話か分からなくなる。 */
.apps-sec.card-sec-standalone { background: var(--surface); }

.card-sec-standalone {
  max-width: min(var(--page), calc(100% - 2rem));
  /* **地を持たせる**（2026-09-18）。白いカードのまま頁の終わりに置くと、
   * 上の節と見分けが付かず、支援の話が埋もれていた。
   *
   * 色は群の4色のうち、まだ使っていない朱。**新しい色相を足さない。** */
  background: var(--zone-shu);
}
/* 流れる帯は**画面の端まで**。カードや読む幅で切らない。
 *
 * 器（46rem）に収めると、そこで途切れる（実際に 735px で切れた）。
 * **流れているものが途中で終わると、続きが無いように見える。**
 * 意匠の帯と「使う人」の帯の両方に当てる。 */
.designs-sec .belt,
.who-belt {
  width: 100vw;
  max-width: 100vw;
  /* **transform を使わない。**
   *
   * 「中央に置いてから半分戻す」（margin-left:50% + translateX(-50%)）は
   * この2つには効かなかった。**使う人の帯は格子の升目**（.hero > .inner が
   * min-width:56rem で grid）で、percentage の margin が升目の幅を基準に
   * 解くので、画面の中央には来ない。実際に半画面ぶん左へずれて、
   * 右の途中から流れてくる形になった（2026-09-09）。
   *
   * `50% - 50vw` は、器が画面の中央にある限り**必要な負の値そのもの**に
   * なる（器の左端までの距離）。基準が器の幅と画面の幅だけなので、
   * 格子でも効く。 */
  margin-left: calc(50% - 50vw);
  margin-right: 0;
}

/* ---------------------------------------------------------------- 使う人の帯
 *
 * 指摘（2026-09-02）で3つ直した。
 *
 *	枠を消す … 8つ並ぶと枠だけが目立つ
 *	幅を広げる … 読む文章の幅（34rem）に収めていたので窮屈だった
 *	絵を添える … 字だけだと目が文字列として流す
 */
/* **ここで margin-left を 0 に戻さない。**
 *
 * 上の規則（画面いっぱいに出す）が `margin-left: 50%` を使っている。
 * ここで打ち消すと、transform だけが残って**帯が半画面ぶん左へずれる**
 * —— 左が切れ、右の途中から流れてくる形になった（2026-09-09 の指摘）。
 *
 * この file には同じ趣旨の注意が既に2か所ある（`.designs-sec` と `.full`）。
 * **3度目。** 幅と位置を後から上書きしない。 */
.who li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.2rem;
  border: none;
  background: none;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.875rem;
  /* 字にも色を当てる（2026-09-12）。**絵だけだと、色が変わったことに
     気づかない**という指摘を受けた。受け皿は本文の色。 */
  color: var(--role-ink, var(--text));
  white-space: nowrap;
}
/* 絵。**マスクで敷く。**
 *
 * `<img>` では色を変えられない。外から読む SVG は別の文書なので、中の
 * currentColor は頁の色を継がない。**`.who li img { color: … }` と
 * 書いてあったが、一度も効いていなかった**（絵は黒のままだった）。
 *
 * URL は頁が渡す（--role-icon）。**指紋（?v=）を落とさないため** ——
 * ここに直接書くと、絵を作り直したときに1年間キャッシュが残る。 */
.role-ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  background-color: var(--role-ink, var(--text));
  -webkit-mask: var(--role-icon) center / contain no-repeat;
  mask: var(--role-icon) center / contain no-repeat;
}

/* 色は並び順で当てる。**頁側に色を書かない** —— 3組を繰り返す帯なので、
   組ごとに書くと1つずれただけで色が食い違う。 */
.who li:nth-child(1) { --role-ink: var(--role-1); }
.who li:nth-child(2) { --role-ink: var(--role-2); }
.who li:nth-child(3) { --role-ink: var(--role-3); }
.who li:nth-child(4) { --role-ink: var(--role-4); }
.who li:nth-child(5) { --role-ink: var(--role-5); }
.who li:nth-child(6) { --role-ink: var(--role-6); }
.who li:nth-child(7) { --role-ink: var(--role-7); }
.who li:nth-child(8) { --role-ink: var(--role-8); }
/* 枠を消したので、間を空けて区切る。 */
.who { gap: 1.5rem; }
.who-belt { gap: 1.5rem; }

/* ---------------------------------------------------------------- 見出しの節
 *
 * **2列をやめた**（2026-09-18）。
 *
 * もとは「カードの絵も文言も左に寄って見える」という指摘に応えて、広い
 * 画面で文章を左・絵を右に置いていた。ワイヤーフレームは**1列・中央
 * 揃え**で、絵は買う導線の真下。
 *
 * 2列だと、**押しどころと物が横に並んで、目の動きが2本になる。**
 * 縦に積めば「読む → 押す → 物を見る」の1本で済む。
 *
 * 左に溜まる問題は、中身を中央に寄せることで解いている（下の .hero）。
 */
@media (min-width: 56rem) {
  .hero > .inner { max-width: 44rem; }
}

/*
  対応端末の節。**値段のすぐ後に置く不安の打ち消し**（2026-09-18）。

  # 枠で囲まない

  同じ面に「読めるもの3つ」と「読めないときの逃げ道」を置く。枠を足すと
  3つのほうが表に見えて、逃げ道が注釈に落ちる。**同じ重さで並べる。**
*/
.reach {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.reach-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.reach-list li {
  display: grid;
  gap: 0.15rem;
  padding-left: 0.85rem;
  /* 主の色の細い柱。**印を文字で足さない**（機種名の頭に記号が付くと、
     読み上げが毎行それを読む）。 */
  border-left: 2px solid var(--pop);
}

/* 機種名。**本文より強く、見出しより弱く。**
 *
 * **字の階段に繋ぐ**（2026-09-20）。面（オービット）の中では本文が
 * --orbit-fs-body まで縮むのに、ここだけ素の rem で置いていたので、
 * **機種一覧だけが本文より 3px 大きいまま**だった。狭い画面で
 * 02 NO APP が版面を 194px 溢れていた原因の 128px がこれ。
 * 隣の `.orbit-steps` は最初から calc() で組んであり、**こちらだけ
 * 繋ぎ忘れていた。**
 *
 * 面の外（縦積み・動きを止めている人）では --orbit-fs-body は
 * :root の既定 0.95rem なので、**これまでと同じ大きさで出る。** */
.reach-list strong {
  font-weight: 700;
  font-size: var(--orbit-fs-body);
  color: var(--text);
}

.reach-list span {
  font-size: calc(var(--orbit-fs-body) * 0.92);
  color: var(--text-sub);
}

/* 逃げ道。**薄くしない。** ここに当たる人がいちばん不安なので、
   本文と同じ濃さで読ませる。 */
.reach-fallback {
  margin: 0;
  font-size: var(--orbit-fs-body);
  color: var(--text);
}

/*
  その場で試す欄。**QRを左、言葉を右。**

  狭い画面では縦に積む（QRが小さくなると読み取れない）。
*/
.reach-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}

.reach-qr { width: 7.5rem; flex: none; }
.reach-qr svg { display: block; width: 100%; height: auto; color: var(--text); }

.reach-try-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text);
  /* 器の幅いっぱいに伸ばさない。**QRの隣で1行が長すぎると読みにくい。** */
  max-width: 24rem;
}

/* 白い面は枠ではなく影で。**枠が並ぶと図表に見える。** */
.ground-white {
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow), 0 12px 28px var(--shadow);
}
/* 締めの面。**朱は塗らない**（ボタンだけが色を持つ）。 */
.close .cta { background: var(--pop-fill); color: var(--on-pop); border-color: var(--pop-fill); }
/* 朱の面では反転する。**この行が上の指定より後に来る必要がある**
   （同じ強さなら後ろが勝つ。前に置いて負けた。2026-09-09）。
   朱の地に朱のボタンは、面と同じ色で輪郭が消える。 */
.ground-pop.close .cta,
.ground-pop .cta {
  background: var(--on-pop);
  color: var(--pop-fill);
  border-color: var(--on-pop);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
/* 止めているときは、白の枠だけにする（押せないことを見た目で言う）。 */
.ground-pop .cta-off {
  background: transparent;
  color: var(--on-pop);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}
.ground-pop .paused-note { color: var(--on-pop); }

/* ---------------------------------------------------------------- 折り返し
 *
 * # 日本語はどこでも切れる
 *
 * 語の区切りに空白が無いので、既定では文の途中で平気に割れる
 * （「入れてもらう／もの、登録して」のように読みの塊が壊れる）。
 *
 * `word-break: auto-phrase` は**文節で切る**（ブラウザが内蔵の解析で
 * 判断する）。見出しには既に当てていたので、本文にも広げる。
 * 対応していないブラウザでは、今までどおりどこでも切れるだけ。
 *
 * `line-break: strict` は行頭に来てはいけない字（、。ー ゃ）の扱いを
 * 厳しくする。
 */
p, li, h3, dt, dd, figcaption, .lead, .note, .price-desc {
  line-break: strict;
  word-break: auto-phrase;
  /* 最後の行に1語だけ落ちるのを避ける。**対応していない環境では
     何も起きない**（今までどおりの折り返し）。 */
  text-wrap: pretty;
}

/* 1文=1行。**「。」で改行する**（2026-09-09 の指摘）。
 *
 * span を block にすると、折り返しの均し（word-break: auto-phrase）が
 * **文ごとに効く** —— 2文が繋がっていると、1文目の途中で折れて
 * 2文目が食い込む。br より、文の単位が構造として残る。
 *
 * 1文が長くて折り返すときは、その中では今までどおり文節で切れる。 */
.lines span { display: block; }

/* 短い札とボタンは折らない。**2行になった瞬間に形が崩れる。** */
.hero-cta, .cta, .biz-btn, .entry-btn, .plan-buy,
.eyebrow, .eyebrow-line, .step-no, .tag, .price-tag {
  white-space: nowrap;
}
/* 手順の見出しは文節で切る（3列に入るので折り返しが出る）。 */
.step-list h3, .two-cols h3 { word-break: auto-phrase; text-wrap: balance; }

/* 上のバーのボタン。**薄くて気づかない**という指摘（2026-09-02）。
 * 朱の枠にする — 買うボタン（塗り）とは重さを分けたまま、目に入る。
 */
.head-login {
  border-color: var(--pop);
  color: var(--pop);
  font-weight: 700;
}

/* ---------------------------------------------------------- 出資者の掲示
 *
 * # 置き場所を間違えた（2026-09-07）
 *
 * 最初は partials.html の共通CSSに書いた。**このページは partials.html を
 * 読み込まない**（冒頭のとおり分けてある）ので、ロゴが原寸のまま縦に
 * 積まれていた。ビルドも検査も通るので気づけない。
 * `TestSponsorStyleLivesWithTheIntroPage` が2度目を防ぐ。
 *
 * # 絵の大きさを揃える
 *
 * ロゴは縦横比がまちまちなので、**高さで揃えて幅は内容なりにする**
 * （横長のロゴだけが大きく見えるのを防ぐ）。
 *
 * **色も枠も付けない。** 地の上にロゴをそのまま置く。枠や影を足すと、
 * こちらの装飾が相手のロゴに掛かる。
 */
.sponsors {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-end;
}
.sponsors li {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.sponsors img { height: 2.75rem; width: auto; max-width: 12rem; display: block; }
.sponsors span { font-size: 0.75rem; color: var(--text-sub); }

/* ------------------------------------------------------ 横に流す（5つ以上）
 *
 * # なぜ流すのか
 *
 * 数が増えると1行に収まらず、折り返して**縦に伸びる**。1行に固定して
 * 横へ送る。流し始める枚数は Go 側（`sponsorFlowFrom`）が決める。
 *
 * # 作りは上の帯（.who-belt）と同じ
 *
 * 同じ並びを2つ横に置き、**片方の幅ぶん左へ動かす。** そこで折り返すと
 * 繋がって見える。間隔は親の gap で作り、動かす量に足す（幅は中身で
 * 決まるので、割合ではなく片方の幅で書く）。
 *
 * 違うのは速さの決め方。**枚数で変わる。** 一定の秒数にすると、増える
 * ほど速く流れる。一周の秒数は Go 側が `--flow-secs` で渡す。
 */
.sponsorflow {
  /* 既定の一周。**ここに定義を置く。** Go 側が style 属性で上書きする
     ので普段は使われないが、**未定義の変数を参照した宣言は丸ごと捨て
     られる**ので、CSS 単独でも成り立たせておく（`var(…, 35s)` の形だと
     TestNoUndefinedCSSVariables が拾えない）。 */
  --flow-secs: 35s;
  margin: 1.25rem 0 0;
  display: flex;
  gap: 2rem;
  overflow: hidden;
  /* 端を溶かす。**切り口が見えると、途切れて見える。** */
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.sponsorflow .sponsors { margin: 0; flex: 0 0 auto; flex-wrap: nowrap; }

@keyframes sponsor-flow {
  from { transform: none; }
  to { transform: translateX(calc(-100% - 2rem)); }
}

@media (prefers-reduced-motion: no-preference) {
  .sponsorflow .sponsors {
    animation: sponsor-flow var(--flow-secs) linear infinite;
  }
  /* **触っても止めない**（2026-09-09 の指摘。他の帯と同じ扱い）。
     ロゴは何度も回ってくるので、止めなくても読める。 */
}

/* **動きを止める設定のときは、折り返して全部見せる。**
 * 1行に固定したまま動きだけ止めると、右にあるロゴへ辿り着けない
 * （このページには横にスクロールできる場所が無い）。 */
@media (prefers-reduced-motion: reduce) {
  .sponsorflow { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .sponsorflow .sponsors { flex-wrap: wrap; }
  .sponsors.ghost { display: none; }
}

/* 出資の募集。**頼みなので、静かに1行で置く。**
 * 買う導線（朱の塗り）とは重さを分ける —— この頁の仕事はカードを
 * 売ることで、募集はその隣にある別の役目。 */
.fundask {
  margin: 1.25rem 0 0;
  font-size: 0.95rem;
  color: var(--text-sub);
}