/* 読み込みの動き 8 案の共通の土台（r79・2026-10-18）：読み込みの後に出る「最初の画面」と、読み込みの面の決まり。
   - 最初の画面は 10/18 に決まった物：案 A（巨大な社名と大きな映像）・余白は S2「ロゴの物差し」・合言葉は EB Garamond の斜体・BLUTE の時間帯の映像 4 本。
     元は r78_hero/rough/A/index.html の <style>（?space=2 の形）。切り替え（data-space）はやめ、S2 の値を :root と各部品に直に書いた。
   - 読む順：kit/base.css（部品の形・色・字。r78 の kit の写しから約束の一行だけ外した物）→ このファイル。
   - 形：#page は最初の画面だけ（.bar・h1.lockup・.motto・.motion・.visual）。#page の下の端＝映像の下の端＋映像の下の余白（--v-bot）。
     本人の文（.statement 1 つ）・相談のボタン（.cta）・次の節（.next-ph）は、#page のすぐ後の section.after に入れる。
     見た目と位置は案 A の ?space=2 と同じ（tools/cmp_hero.py で画素を比べる）。
   - 縛り（inventory.md 4-1）：#page とその親に transform・opacity・filter を付けない。状態は html の class だけ。8 案の動きは各案のページに書く。 */

/* ════ 余白の物差し S2「ロゴの物差し」（spacing/system.md 3 章）════
   G＝横組みの「記号と文字の間」＝ロゴの幅 × 3.8615%＝100vw × 3.5847%（左右の余白を G にした時）。1440 で G＝51.6px・ロゴの幅 1336.8px。
   最初の画面の余白は G の分数・倍数で、画面の幅に比例する。小さい画面は下限で止める。画面の高さ（vh）では余白を変えない（高さの差は映像の高さが吸う）。
   帯の中・ボタンの中は部品なので 8 の段のまま。文の段どうしの間は字面（1em の箱）どうしで測る。 */
:root{
  --G:max(16px, 3.5847vw);
  --Gv:max(36px, var(--G));        /* 縦の G（群の間）。1004px より広い画面では G と同じ */
  --s-2:max(12px, calc(var(--G) / 3));
  --s-3:max(12px, calc(var(--G) / 2));
  --s-5:max(16px, var(--G));
  --s-7:max(64px, calc(var(--G) * 3));
  --s-8:max(96px, calc(var(--G) * 4));
  --bar-ink:50px;                  /* 帯の中で見えている物の下の端（「相談する」36px を帯 64px の上下の真ん中に置いた下の端） */
  --g:var(--s-5);                  /* 左右の余白＝G（ロゴの幅＝100vw − 2G） */
  --sp-top:max(32px, calc(var(--G) - (var(--bar-h) - var(--bar-ink))));  /* 帯の下の端 → ロゴの上の端（帯の中身の下の端からロゴまでを G に。下限 32） */
  --sp-m:var(--s-2);               /* ロゴの字のベースライン → 合言葉のキャップの上（⅓G） */
  --sp-v:var(--Gv);                /* 合言葉のベースライン → 映像の上（縦の G） */
  --sp-vb:var(--s-5);              /* 映像の下 → 最初の画面の下（目安 G。映像が高さの下限の時は 16px まで縮む） */
  --sp-s:var(--s-7);               /* 映像の下 → 本人の文（3G） */
  --sp-lead:var(--Gv);             /* 1 行目 → 5 行（縦の G） */
  --sp-close:max(24px, var(--s-3));/* 5 行 → 締め（縦に積む時。½G） */
  --sp-cta:max(24px, var(--s-3));  /* 締め → 主のボタン（½G） */
  --sp-end:var(--s-8);             /* ボタンの下 → 次の節（4G） */
  --sp-col:max(16px, var(--s-3));  /* 列の間（½G） */

  /* 案 A の式（#page と .after の両方が使うので :root に置く） */
  --cg:var(--sp-col);                                /* 列の間 */
  --W:calc(100vw - 2 * var(--g));                    /* 中身の幅＝ロゴの幅（スクロールバーの幅は数えない） */
  --lock-top:var(--sp-top);
  --lock-h:calc(var(--W) * .133792);                 /* ロゴの高さ＝幅 × 85.62 / 639.96 */
  --ms:clamp(17px,2.22vw,42px);                      /* 合言葉の字の大きさ（1440 で 32px） */
  --m-cap:.65;                                       /* 合言葉（EB Garamond）のキャップの高さ（em）。text-box で上下を字面に詰めた時の箱の高さ */
  --m-mt:calc(var(--sp-m) - var(--W) * .022126);     /* 合言葉の上のマージン（ロゴの外枠の下の端から。平らな字のベースラインで取った値） */
  --v-gap:var(--sp-v);
  --v-bot:var(--sp-vb);
  --above:calc(var(--bar-h) + var(--lock-top) + var(--lock-h) + var(--m-mt) + var(--ms) * var(--m-cap) + var(--v-gap));
  --st-lead:clamp(26px,3.05vw,56px);
  --st-body:clamp(15px,1.11vw,18px);
  --st-close:clamp(16px,1.32vw,22px);
  --s-gap:calc(var(--sp-s) - .25 * var(--st-lead));  /* 映像の下 → 本人の文の 1 行目（字面の上） */
}
@media (max-width:767px){:root{--st-lead:22px;--st-close:16px}}

/* キーボードで焦点を移した時、固定の帯（64px）の下に焦点の物が隠れないように（WCAG 2.4.11。10/19 夜の講評：下の節から Shift+Tab で止める印へ戻ると帯の下に入った） */
html{scroll-padding-top:calc(var(--bar-h) + 12px)}

/* ── 帯（部品なので 8 の段。左右の余白だけ G） ── */
.bar{gap:24px}
.bar-nav{gap:32px}
@media (max-width:1099px){.bar{gap:16px}.bar-nav{gap:16px}}
@media (max-width:767px){.bar{gap:12px}}

/* ════ #page：最初の画面だけ ════
   帯（fixed・64px）の下に、ロゴ（1 行目）→ 合言葉（2 行目）→ 映像と、その左上の角の止める印（3 行目）。
   高さは中身で決まる（min-height は付けない）：下の端＝映像の下の端＋ --v-bot。映像の高さは画面の大きさだけで CSS が決める（読み込みの後に変わらない） */
.page{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-content:start;
  min-height:0;padding-bottom:var(--v-bot)}
.lockup{grid-column:1/-1;grid-row:1;margin-top:var(--lock-top)}
/* 合言葉（10/18 Tomo「1がいいかな」＝ EB Garamond の斜体）：B の縦の線（字の箱の左から .18em）を、ロゴの b の縦の線（ロゴの幅の 23.594%）にそろえる。
   上下は字面に詰める（キャップの上〜ベースライン） */
.motto{grid-column:1/-1;grid-row:2;justify-self:start;margin:var(--m-mt) 0 0 calc(23.594% - .18em);
  font-size:var(--ms);line-height:1;text-box:trim-both cap alphabetic}
/* 止めるボタン（10/19 夜。Tomo さん「『動きを止める』と停止ボタンは不要」→ 映像を自動で動かす時の止める手段（WCAG 2.2.2）を確かめて「小さな印だけ残す」）。
   字は見せない（読み上げの名前「動きを止める」は残す）。映像の左上の角に 36px の丸い印だけを置く：映像の上の端は、収まる形でもはみ出す形でも最初の画面に入る。
   右下の Google の印と、右寄りの BLUTE には掛からない。映像の端からの空きは ⅓G（--s-2）。
   置き場の切り替え（r80 の比べるページ。html[data-pausepos]）：tl＝映像の左上（既定）・tr＝映像の右上・row＝合言葉の行の右の端（前の置き場。字を消して印だけ） */
.motion{grid-column:1/-1;grid-row:3;justify-self:start;align-self:start;position:relative;inset:auto;z-index:2;   /* inset:auto＝kit の top・left 12px を消す */
  margin:calc(var(--v-gap) + var(--s-2)) 0 0 var(--s-2);
  width:36px;height:36px;min-height:36px;padding:0;gap:0;justify-content:center;border-radius:50%;
  background:rgba(242,242,239,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);transition:background-color .2s,color .2s}
.motion::after{content:"";position:absolute;inset:-4px;border-radius:50%}   /* 押せる所だけ 44px に広げる（見た目は 36px のまま。iOS の目安 44pt） */
@media (hover:hover){.motion:hover{background:rgba(242,242,239,.96)}}         /* 載せた時だけ（スマホで押した後に明るいまま残らないように） */
/* 焦点の輪：映像の暗い所・柄の上でも見えるよう、青い輪の内と外に紙の色を 2px ずつ（輪と下の映像の比が 3:1 に届かなかった。10/19 夜の講評） */
.motion:focus-visible,html[data-tod] .motion:focus-visible{outline:2px solid var(--blue);outline-offset:2px;box-shadow:0 0 0 6px var(--paper)}
/* 昼と夜で目立ち方をそろえる（丸とまわりの映像の明るさの比が、昼 1.05〜1.29・夜 5.9〜8.4 と大きく違った）：明るい映像には 1px の淡い縁、夜は丸を薄く */
html[data-tod="day"] .motion,html[data-tod="morning"] .motion{box-shadow:0 0 0 1px rgba(32,32,32,.10)}
html[data-tod="night"] .motion{background:rgba(242,242,239,.55)}
.motion svg{width:16px;height:16px}           /* 16 の格子のまま（一時停止の 2 本の棒は 3px 幅・間 2px で画素にそろう） */
.motion .motion-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-pausepos="tr"] .motion{justify-self:end;margin:calc(var(--v-gap) + var(--s-2)) var(--s-2) 0 0}
/* 前の置き場（合言葉の行の右の端）：印の真ん中を合言葉の字面（キャップの上〜ベースライン）の真ん中に、印の高さを合言葉のキャップの高さに。
   行の高さを増やさないよう、上は大きく負のマージンで逃がし、下の端（＝合言葉のベースライン）から上げて置く */
html[data-pausepos="row"] .motion{grid-row:2;justify-self:end;align-self:end;width:32px;height:32px;min-height:32px;
  margin:-100px 0 calc(var(--ms) * var(--m-cap) / 2 - 16px) 0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:var(--sub)}
html[data-pausepos="row"] .motion svg{width:max(12px,calc(var(--ms) * var(--m-cap)));height:max(12px,calc(var(--ms) * var(--m-cap)))}
html[data-pausepos="row"] .motion:focus-visible{outline-offset:0;box-shadow:none}
@media (hover:hover){html[data-pausepos="row"] .motion:hover{background:none;color:var(--ink)}}
.visual{grid-column:1/-1;grid-row:3;justify-self:stretch;aspect-ratio:auto;margin-top:var(--v-gap);
  /* 映像の高さと切り方（案 A の 5 巡目の式そのまま。r78_hero/rough/A/index.html の .visual の注を見る）
     - BLUTE の耳の先は 4 本の全部の絵でいちばん高い所が絵の上から 19.8%。Google の印は横 88.5〜92.7%・縦 79.6〜87.0%。
     - 横に長い箱：見える高さは絵の 70.5% 以上（下限＝幅 × 0.5625 × 0.705）。縦に近い箱：縦横比 1.3 より縦長にしない（上限＝幅 ÷ 1.3）、--vx 82%。
     - (1) 収まる形：高さは最初の画面の残り（下に --v-bot）。下限を割る時は下限。(2) はみ出す形：最初の画面の下の端の向こうへ続き、印は全部下の端の 16px 下より先。
     - 切り替えの印 --v-L：0＝収まる、100000px＝はみ出す。切り方（--vy）は px で持つ */
  --rh:calc(var(--W) * .5625);
  --v-floor:calc(var(--rh) * .705);
  --v-cap:calc(var(--W) * .7692);
  --v-fit:calc(100svh - var(--above) - var(--v-bot));
  /* r82（10/20 に決定）：--v-L は 0 か 100000px のどちらかだけ（round(up)）。前の式 clamp(0px,(差) * 1000000,100000px) は、差が 0〜0.1px の時に間の値になり、
     絵が数千 px 上へずれて映像の箱が空になった（864×580 で object-position「82% -4576px」・1604×980 など。tools/mark_grid.py） */
  --v-L:clamp(0px,round(up,var(--v-floor) - (100svh - var(--above)) + 16px,1px) * 100000,100000px);
  --v-crop:clamp(0px,var(--rh) * .796 - (100svh - var(--above)) - 16px,var(--rh) * .18);
  --v-h:max(calc(clamp(var(--v-floor),var(--v-fit),var(--v-cap)) - var(--v-L)),min(calc(var(--rh) * .885 - var(--v-crop)),var(--v-L)));
  height:var(--v-h);
  --vx:82%;--vy:max(calc((min(var(--v-h),var(--rh)) - var(--rh)) * .61 - var(--v-L)),calc(var(--v-L) - 100000px - var(--v-crop)));--vr:3px}
@media (max-width:767px){
  /* スマホ：映像は画面の端から端まで、4:3 に切って右へ寄せる（BLUTE の左に余白を残し、印は右の端から 15px 内側） */
  .visual{height:auto;aspect-ratio:4/3;max-width:none;margin-inline:calc(-1 * var(--g));--vx:82%;--vy:50%;--vr:0px}
  /* 止める印：映像は画面の端から端まで（上の負のマージン）なので、印は映像の端ではなく文字の列（左右の余白 G）にそろえ、上の空きも G
     （⅓G＝12px だと、印の端がロゴの記号や本人の文の左の端より 4px 外に出た。10/19 夜の講評） */
  .motion,html[data-pausepos="tr"] .motion{margin:calc(var(--v-gap) + var(--g)) 0 0 0}
  html[data-pausepos="row"] .motion{width:24px;height:24px;min-height:24px;margin:-100px 0 calc(var(--ms) * var(--m-cap) / 2 - 12px) 0}
  /* ── r82（2026-10-20。10/20 に Tomo さんがおすすめの形で決定。切り替えは外した）：767px 以下でも、Google の印が最初の画面の下の端で切れないように ──
     前の形は上の 4:3 だけ（max-height なし）。4:3 の箱は絵を高さで合わせる（横を切る）ので、印は箱の上から 79.6〜87.0% に来る。
     767×680〜740・600×560〜610 などで、印の一部だけが最初の画面に入った（r78 の marksweep_phone）。
     決まり（PC の 2 つの形と同じ）：印と最初の画面の下の端の間を、上でも下でも 16px 以上空ける。
     - 4:3 のままで決まりを満たす大きさ（ほとんどのスマホの縦の画面）は 4:3 のまま（映像の所は前の形と画素の差 0。390×844 など）。
     - 満たさない帯（印の上の端が下の端の 16px 下より上・印の下の端が下の端の 16px 上より下）の時だけ、箱の高さの上限を
       「印の下の端＝最初の画面の下の端 − 16px」の高さにして、印を最初の画面に全部入れる（箱は横長になり、絵は小さく、左が少し多く見える）。
       箱は 16:9 より横長にしない（それより低くすると絵の上下が切れ始めるため。幅 320px 以上ではこの下限に当たらない）。
     - 4:3 の箱の高さは 100vw から出す（ロゴの幅の式 --W と同じ。スクロールバーが幅を取る PC のブラウザでは、印と下の端の間が最大 12px ほど縮む見込み。計算からの推測で、測っていない） */
  .visual{
    --h43:calc(100vw * .75);                                                            /* 4:3 の箱の高さ */
    --room:calc(100svh - var(--above));                                                  /* 映像の上の端 → 最初の画面の下の端 */
    --z-lo:clamp(0px,round(up,var(--h43) * .796 - 16px - var(--room),1px) * 100000,100000px);   /* 4:3 で印が全部、下の端の 16px 下より先 → 100000px（上限を外す）。round(up) で 0 か 100000px だけにする（上の --v-L と同じ） */
    --z-hi:clamp(0px,round(up,var(--room) - var(--h43) * .870 - 16px,1px) * 100000,100000px);   /* 4:3 で印が全部、下の端の 16px 上より上 → 100000px（上限を外す） */
    max-height:calc((var(--room) - 16px) / .870 + var(--z-lo) + var(--z-hi));
    min-height:calc(100vw * .5625)}
}

/* ════ .after：#page のすぐ後（最初の画面の外。スマホ・縦長のタブレットでは本人の文の頭が最初の画面に入る）════
   #page と同じ 12 列。本人の文の 1 行目の字面は、映像の下の端から 3G（--s-gap）。#page の下の --v-bot を引いた分を本人の文の上に空ける */
.after{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-content:start;padding-inline:var(--g)}
.statement .ph{white-space:nowrap}                 /* 句の途中で折り返さない（字は変えない）。いちばん長い句が入らない 359px 以下の画面では外す */
@media (max-width:359px){.statement .ph{white-space:normal}}
.statement{grid-column:1/-1;grid-row:1;margin-top:calc(var(--s-gap) - var(--v-bot));max-width:none}
.statement .st-lead{line-height:1.5;letter-spacing:.01em;text-wrap:balance;max-width:25em}
.statement .st-lead .p{vertical-align:.1em}       /* 小さくした助詞（0.8em）を仮想ボディの中ほどへ上げる */
.statement .st-list{line-height:1.9}
.statement .lat,.btn .lat{line-height:1}           /* 欧文の行の箱が行送りを押し広げないように */
.statement .st-close{font-size:var(--st-close);line-height:1.75;letter-spacing:.02em;text-wrap:balance}
@media (min-width:1100px){
  /* 本人の文は 1 つの塊のまま、.after の 12 列と行を借りて組む（subgrid）：1 行目は 11 列まで、5 行は左の 8 列、締めとボタンは右の 4 列（1100〜1179 は 7 列と 5 列） */
  .after{--split:9}
  .statement{grid-row:1/span 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
  .statement .st-lead{grid-column:1/12;grid-row:1}
  .statement .st-list{grid-column:1/var(--split);grid-row:2/span 3;margin-top:calc(var(--sp-lead) - .25 * var(--st-lead) - var(--li-half,.45) * var(--st-body))}
  .statement .st-close{grid-column:var(--split)/-1;grid-row:2;margin-top:calc(var(--sp-lead) - .25 * var(--st-lead) - .375 * var(--st-close));align-self:start}
  .cta{grid-column:var(--split)/-1;grid-row:3;align-self:start;justify-self:start;margin-top:calc(var(--sp-cta) - .375 * var(--st-close));
    display:grid;grid-template-columns:max-content}
  .cta-main{justify-items:stretch}
  .cta .btn{justify-content:space-between}
  .next-ph{grid-row:5}
}
@media (min-width:1100px) and (max-width:1179px){.after{--split:8}}
.cta{gap:12px 14px}
@media (max-width:1099px){
  .statement .st-list{margin-top:calc(var(--sp-lead) - .25 * var(--st-lead) - var(--li-half,.45) * var(--st-body))}
  .statement .st-close{margin-top:calc(var(--sp-close) - var(--li-half,.45) * var(--st-body) - .375 * var(--st-close))}
  .cta{grid-column:1/-1;grid-row:2;margin-top:calc(var(--sp-cta) - .375 * var(--st-close))}
  .next-ph{grid-row:3}
}
@media (max-width:767px){
  .cta{flex-direction:column;align-items:stretch}
  .cta-main{justify-items:stretch}
  .cta .btn{justify-content:space-between}
}
/* ════ r82（2026-10-20）本人の文と相談のボタンの文字組み：項目ごとの切り替え（html[data-tf-*]）════
   TYPOGRAPHY_RULES の基本 10 項目と和文組版で点検した項目ごとに、前の値（prev など）と案を残す。字は 1 字も変えない（tools/statement_check.py）。
   値を付けるのは site/index.html の head の script（# か ? の tf-<項目>=<値>。tf=prev で全部前の形、tf=rec で全部おすすめ。何もなければおすすめ）。
   ★＝おすすめ。前の値の時は、この塊の規則は何も効かない（上の規則のまま）。直した所の数と理由は notes.json */

/* (a) 行頭の始め括弧 data-tf-bracket：prev（二分の詰め -.5em。細い「の縦の線が 0.17em 内側）／optical★（-.64em。ほかの行の字面の左の端にそろえる。TYPOGRAPHY_RULES 2.4）
       1 行目の「こんなの欲しい」の「（いつも行頭）と、締めの頭の「だけ。文中の括弧（5 行の（ など）は二分の詰めのまま */
html[data-tf-bracket="optical"] .statement .st-lead .ph > .kk-o:first-child,
html[data-tf-bracket="optical"] .statement .st-close > .ph:first-child > .pl:first-child > .kk-o:first-child{margin-left:-.64em}

/* (b) 和欧間 data-tf-autospace：none（前。アキなし・字の形で 0.06〜0.30em）／auto★（ブラウザの自動のアキ text-autospace＝1/8 字）／quarter（四分＝1/4 字）
       quarter は、和文の字が後ろに続く欧文・数字（site/index.html の span.lat.wa：LINE｜ミ・Web｜ア・AI｜エ・EC｜サ・CAD｜向・30｜分）の後ろにだけ、和文の字の 1/4 の幅を空ける。
       中黒・括弧・読点・半角スペース（「LINE で」）の隣には入れない（.wa を付けていない）。前に和文が来る欧文は本人の文にない。
       行末に来る時は空きが行の外に出ないよう、.wa の欧文と後ろの字の間で折り返さない（tools/wa_probe.py で確かめる） */
@property --jem{syntax:'<length>';inherits:true;initial-value:16px}
html[data-tf-autospace="auto"] .statement,html[data-tf-autospace="auto"] .cta{text-autospace:normal}
html[data-tf-autospace="quarter"] .statement p,html[data-tf-autospace="quarter"] .cta .btn{--jem:1em}   /* 和文の字の大きさ（.lat は 1.03〜1.1em なので、その外の段で量る） */
html[data-tf-autospace="quarter"] .wa{margin-right:calc(var(--jem) * .25)}

/* (c) 欧文の大きさ data-tf-latsize：大文字の高さ ÷ 仮名の高さ（その書体の仮名 92 字の字面の高さの真ん中の値。TYPOGRAPHY_RULES 2.2 は 0.9〜0.95）
       prev（1 行目・ボタン 1.1em＝0.96、5 行・締め 1.06em＝0.95）／093★（1.06em・1.03em＝0.93）／090（1.03em・1.0em＝0.90） */
html[data-tf-latsize="093"] .statement .lat,html[data-tf-latsize="093"] .btn .lat{font-size:1.06em}
html[data-tf-latsize="093"] .statement .st-list .lat,html[data-tf-latsize="093"] .statement .st-close .lat{font-size:1.03em}
html[data-tf-latsize="090"] .statement .lat,html[data-tf-latsize="090"] .btn .lat{font-size:1.03em}
html[data-tf-latsize="090"] .statement .st-list .lat,html[data-tf-latsize="090"] .statement .st-close .lat{font-size:1em}

/* (d) 5 行の行の間 data-tf-listlh：prev（行送り 1.9em だけ。折り返した行と次の箇条が同じ間）／group★（箇条の中 1.65em・箇条どうし +0.25em。1 行の箇条どうしの送りは 1.9em のまま）
       段の間の式の「行間の半分」も 0.45em → 0.325em に替え、字面どうしの空きは前のまま */
html[data-tf-listlh="group"] .statement{--li-half:.325}
html[data-tf-listlh="group"] .statement .st-list{line-height:1.65}
html[data-tf-listlh="group"] .statement .st-li + .st-li{margin-top:.25em}

/* (e) 箇条の印 data-tf-mark：prev（印の箱 .8em の真ん中。印のインクは 0.4em 内側・印→字 0.25em）
       ／edge★（印の字面を 1 行目の A と同じ左の端に。字は 0.55em 内側から・印→字 0.4em）
       ／hang（箇条の字の頭を左の端にそろえ、印は左の余白へぶら下げる。印→字 0.4em。スマホでは印が画面の端から 8px ほどの所） */
html[data-tf-mark="edge"] .statement .st-list{--st-mk:.55em}
html[data-tf-mark="edge"] .statement .st-mk{text-align:left;position:relative;left:-.38em}
html[data-tf-mark="hang"] .statement .st-li{padding-left:0;text-indent:0}
html[data-tf-mark="hang"] .statement .st-mk{width:.55em;margin-left:-.55em;text-align:left;position:relative;left:-.38em}

/* (f) 句の折り返し data-tf-wrap：prev（・でつないだ語が「Webアプリ・／スマホアプリ）」と分かれる・「広告）」だけの行・359px 以下は句の途中で切れる）
       ／phrase★（.pl の語を行の途中で分けない。359px 以下も 1 行目は句を保ち、いちばん長い句（形にする小さなスタジオです。）が入る大きさまで字を小さくする（320 で 22→20.6px）。
       締めは長い句の中の読点の後（「毎日のこの作業、／なんとかならない？」から、）だけで折り返す） */
html[data-tf-wrap="phrase"] .statement .pl{white-space:nowrap}
@media (max-width:359px){
  html[data-tf-wrap="phrase"] .statement .st-lead .ph{white-space:nowrap}
  html[data-tf-wrap="phrase"]{--st-lead:min(22px,calc((100vw - 2 * var(--g)) / 14))}
  html[data-tf-wrap="phrase"] .statement .st-close .ph{white-space:nowrap}
  html[data-tf-wrap="phrase"] .statement .st-close .ph:has(> .pl){white-space:normal}
}

/* (g) 左右の列の間（1100px 以上）data-tf-gutter：prev（列の間 ½G だけ。1165px で 21px＝1.4 字まで寄った）／2em（本文の 2 字以上）／3em★（3 字以上。2 字では 1195px で行末の「）」と右の列の頭の「が寄って見えた） */
@media (min-width:1100px){
  html[data-tf-gutter="2em"] .statement .st-list{padding-right:max(0px,calc(2em - var(--cg)))}
  html[data-tf-gutter="3em"] .statement .st-list{padding-right:max(0px,calc(3em - var(--cg)))}
}

/* (h) 相談のボタンの間 data-tf-ctagap：12（前。注→LINE のボタン 12px＝字面 15.6px で、主のボタン→注 11.3px とほとんど同じ）／16★（字面 19.6px。注が上のボタンに付いて見える） */
html[data-tf-ctagap="16"] .cta{row-gap:16px}

/* (i) 狭い画面のボタンの字 data-tf-btnwrap：prev（320px で「30分のミーティングを申し込／む」と 1 字だけ落ちる）
       ／phrase★（420px 以下は句の境で折り返す。359px 以下はボタンの左右の内側の余白を 24・22 → 20・18px、注の頭も 20px。320px では「30分のミーティングを／申し込む」） */
@media (max-width:420px){html[data-tf-btnwrap="phrase"] .cta .btn{word-break:auto-phrase}}
@media (max-width:359px){
  html[data-tf-btnwrap="phrase"] .cta .btn{padding:0 18px 0 20px}
  html[data-tf-btnwrap="phrase"] .cta-note{padding-left:20px}
}

/* 次の節（灰色の箱）：ボタンの下から 4G。幅は .after の中身の幅（左右 G） */
.next-ph{grid-column:1/-1;margin:var(--sp-end) 0 var(--g)}

/* ════ 読み込みの面（8 案で共通）════
   JS が動いて head の script が ld-on を付けた時だけ出す。読み込み中（ld-block）は押す・指を受け取り、下のページへ渡さない */
.ld-overlay{display:none}
html.ld-on .ld-overlay{display:block}
html.ld-block .ld-overlay{pointer-events:auto}
@media (prefers-reduced-motion:reduce){html:not(.ld-force) .ld-overlay{display:none!important}}
/* JS が動き出すまでの一瞬に、#page の外（.after。スマホでは本人の文の頭が最初の画面に入る）が見えてしまわないように。
   #page の側は各案の <style> が同じ形で隠している。JS が動き出した後（ld-js）の .after の隠す・出すは各案が決める */
html.ld-on.is-loading:not(.ld-js) .after{visibility:hidden}
@media (prefers-reduced-motion:reduce){html.ld-on:not(.ld-force):not(.ld-js) .after{visibility:visible}}

/* 試作の札（読み込みの動きを見る時だけ。比べるページの中では出さない） */
.proto-ctrl{position:fixed;left:var(--g,16px);top:calc(12px + env(safe-area-inset-top,0px));z-index:50;display:flex;gap:6px}   /* 10/19：右下だと映像と Google の印に重なった（案3・5・6・8 の担当の指摘）。帯の左の空きへ */
html.is-scrolled .proto-ctrl{display:none}
.proto-ctrl button{font:500 12px/1 var(--jp);border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:99px;padding:10px 14px;min-height:40px;cursor:pointer}
.proto-ctrl button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}