/* ============================================================
   話し相手ネット / 第一版(hanashiaite.net)
   全ページ共通のスタイルシート。1 本だけ。
   ------------------------------------------------------------
   書体は 3 種類だけ。役割を固定する(混ぜない)。明朝は 1 件も使わない。
     ・Zen Kaku Gothic New = 見出し(700/900)・本文・箇条書き・表・ボタン
     ・Zen Maru Gothic     = 丸みを出す所(吹き出し・注記・数字と単位・札)
     ・Outfit              = 英字のラベル(READING / VOICES / STATUS など)
   ------------------------------------------------------------
   色
     ・地はほぼ白 #FFFFFF。淡い灰 #F7F7F7 / 生成り #F8F2EE / 淡い桃 #FDEEF2 は
       「面の変化をつける帯」として部分的にだけ使う。白がいちばん多い面。
     ・文字は茶墨 #3F342D 1 色でほぼ全部。
     ・差し色は 2 色だけ。増やさない。
         橙   #E2751F = 「行動」= ボタン・選択中の札・強調の帯
         コーラル #F2809B = 「人と気持ち」= 印象節の面・人まわりの札・図の差し色
     ・濃茶 #3F342D の「面」はページ全体で締めの節 1 か所だけ。
     ・青は 1 箇所も使わない。
   ------------------------------------------------------------
   ★コントラストの床(読み手は 40〜50 代が中心)。
     通常の文字 4.5:1 / 24px 超・18.66px 超の太字 3:1 を 1 か所も割らない。
     明るい差し色は白の上で比が出ない(橙 3.09 / コーラル 2.52)。
       ・面(背景)にするとき      → #E2751F / #F2809B。載せる文字は #241C17(5.42 / 6.65)
       ・薄い面の上の小さい文字  → 濃い橙 #A4430F / 濃いコーラル #B0335C
       ・濃茶の面の上            → #F0A05A
     明るい橙・明るいコーラルは、小さい文字の色には 1 か所も使わない。
   ------------------------------------------------------------
   出現演出の約束(社内実測の地雷。緩めない):
     ・隠すのに opacity と scale(0) を使わない
       → 持ち上げ = translate / 覆い = clip-path
     ・IntersectionObserver を使わない
       → clip-path を持つ要素は交差比が永久に 0 になり、節が丸ごと出てこない
     ・隠す側は :where(html.js) の中に置く
       → JS が落ちたら本文は全部出る。html.js .rise と書くと .rise.seen に
         詳細度で勝ってしまい、今度は永久に出ない
     ・触る演出は必ず @media(hover:hover) の中(指の画面で :hover が居座るため)
     ・ループは translate / scale / rotate、ホバーは transform に分ける
     ・#main と body に clip-path を付けない(固定・粘着の子孫が画面から消える)
   ------------------------------------------------------------
   横あふれ:
     html / body に overflow-x:clip も hidden も書かない。
     書くと「横あふれ 0」を測る定規が原理的に 0 しか返さなくなる(実測済)。
     はみ出す可能性のある飾りは、その節の中の器に overflow:hidden で閉じ込める。

   ★★ 格子の列は必ず minmax(0,1fr) で書く。1fr と書いてはいけない。
      1fr は minmax(auto,1fr) と同じで、中身の「これ以上縮められない幅」を
      そのまま列の下限にする。中に aspect-ratio と min-height を両方持つ器
      (図の帯など)があると、その 2 つから逆算された幅が列の下限になり、
      画面より広い列ができる。
      実測(2026-09-02): .doc-fig に aspect-ratio:24/7 + min-height:140px を
      置いたら、320px 幅で本文の柱が 462px になり 178px はみ出した。
      → 器の高さは height で直接決める。aspect-ratio と min-height を
        同じ器に同時に書かない。
   ------------------------------------------------------------
   面の並び(同じ色を隣り合わせにしない):
     トップ   白 / 灰 / 白 / 生成り / 白 / 生成り / 白 / コーラル / 白 / 灰 / 生成り / 濃茶
     読みもの 白(パンくず) / 生成りか灰(見出しの器) / 白(本文) / 灰(次に読むもの) / 白(足元)
   ============================================================ */

/* ---------- 1. 土台 ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light;font-size:calc(16px * var(--fs,1));-webkit-text-size-adjust:100%}
html.fs-l{--fs:1.16}
html.fs-x{--fs:1.32}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.95;letter-spacing:.02em}
img{display:block;width:100%;height:100%;object-fit:cover}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
figure{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:700;letter-spacing:.01em}
h1,h2,.big{font-weight:900}
p,ul,ol,dl,dd,dt,table{margin:0}
ul,ol{padding:0;list-style:none}
main p,main li,main dd,main dt,main h1,main h2,main h3{word-break:auto-phrase}

:root{
  --bg:#ffffff;
  --white:#ffffff;
  --mist:#f7f7f7;
  --cream:#f8f2ee;
  --blush:#fdeef2;
  --blush-2:#fbc9d6;
  --deep:#3f342d;
  --ink:#3f342d;
  --muted:#6b5b4e;
  --line:#3f342d26;
  --line2:#3f342d14;
  --hair:#b0335c33;
  --orange:#e2751f;
  --orange-h:#d26a1b;
  --orange-t:#a4430f;
  --orange-l:#f0a05a;
  --coral:#f2809b;
  --coral-t:#b0335c;
  --on-accent:#241c17;
  --cream-d:#f6efe8;
  --muted-d:#d8c9bc;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Zen Kaku Gothic New",sans-serif;
  --en:"Outfit","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --ease:cubic-bezier(.16,.7,.24,1);
  --h1:clamp(26px,5vw,64px);
  --h2:clamp(23px,3.7vw,48px);
  --h3:clamp(19px,1.9vw,1.7rem);
  --h4:clamp(17px,1.4vw,1.28rem);
  --pad:clamp(18px,5vw,80px);
  --gap:clamp(40px,5vw,84px);
}

.wrap{width:100%;max-width:1180px;margin-inline:auto}
.skip{position:absolute;top:-200px;left:8px;z-index:200;background:#fff;color:#000;padding:12px 16px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--orange-t);outline-offset:3px}
.closing :focus-visible{outline-color:var(--orange-l)}

/* ---------- 2. 出現演出 ----------
   合図は site.js が scroll + requestAnimationFrame で自分で作る。
   IntersectionObserver は使わない(clip-path を持つ要素から永久に見えない)。 */
:where(html.js) .rise{translate:0 26px;clip-path:inset(0 0 100% 0)}
:where(html.js) .wipe{clip-path:inset(0 0 100% 0)}
:where(html.js) .lift{translate:0 22px}
.rise.seen,.lift.seen{translate:none}
.rise.seen,.wipe.seen{clip-path:inset(0)}
html.anim .rise.seen{transition:translate .82s var(--ease) var(--d,0s),clip-path .82s var(--ease) var(--d,0s)}
html.anim .wipe.seen{transition:clip-path .95s var(--ease) var(--d,0s)}
html.anim .lift.seen{transition:translate .82s var(--ease) var(--d,0s)}
/* 開き切ったら clip-path を捨てる。持ったままだと後ろの静的な兄弟より上に描かれ、
   触れる部品の当たり判定と、focus の枠まで切ってしまう。 */
.rise.done,.wipe.done{clip-path:none}

/* ---------- 3. ヘッダー ----------
   position:fixed を使わず sticky にする。fixed は clip-path を持つ祖先が
   1 つでもできた瞬間に画面から消えるため。
   ★パンくずは追従の外に置く(狭い画面で貼りつく帯が高くなりすぎるため)。 */
.topbar{position:sticky;top:0;z-index:60}
.head{display:flex;align-items:center;gap:clamp(10px,2vw,28px);
  background:var(--white);border-bottom:1px solid var(--line);
  padding:10px var(--pad);white-space:nowrap}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brandmark{width:34px;height:34px;fill:none;stroke:var(--coral-t);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.brandmark .bm-ring{stroke:var(--coral);opacity:.7;transform-box:view-box;transform-origin:17px 17px;
  animation:breathe 5.6s ease-in-out infinite}
.brand span{font-weight:900;font-size:1.125rem;line-height:1.2;letter-spacing:.06em}
.nav{display:flex;gap:clamp(10px,1.6vw,24px);margin-left:auto;font-size:1rem}
.nav a{padding:6px 2px;border-bottom:2px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--coral)}
.tools{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);margin-left:auto}
.nav+.tools{margin-left:0}
.fsize{display:flex;align-items:center;gap:6px}
.fslabel{font-size:.9375rem;letter-spacing:.1em;color:var(--muted)}
.fsize button{border:1px solid var(--line);border-radius:999px;padding:5px 11px;
  font-size:1rem;line-height:1.3;background:var(--mist)}
.fsize button[aria-pressed="true"]{background:var(--orange);color:var(--on-accent);border-color:var(--orange)}
/* ★電話番号のボタンは第一版では 1 つも置かない。同じ場所に読みものへの導線を置く。 */
.readbtn{display:flex;align-items:center;gap:10px;background:var(--orange);color:var(--on-accent);
  border-radius:999px;padding:9px 20px 9px 16px}
.readbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.readbtn b{display:block;font-size:1.0625rem;line-height:1.25;letter-spacing:.04em;font-weight:700}
@media(hover:hover){
  .nav a{transition:border-color .3s ease,color .3s ease}
  .nav a:hover{border-bottom-color:var(--coral)}
  .fsize button{transition:background-color .3s ease,color .3s ease}
  .fsize button:hover{background:var(--cream)}
  .readbtn{transition:background-color .35s ease}
  .readbtn:hover{background:var(--orange-h)}
}
/* パンくず。追従の外(ここから下は普通に流れる)。 */
.crumbs{background:var(--white);border-bottom:1px solid var(--line2);
  padding:11px var(--pad)}
.crumbs ol{max-width:1180px;margin-inline:auto;display:flex;flex-wrap:wrap;
  align-items:center;gap:4px 10px;font-size:1rem;line-height:1.6;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:10px;min-width:0}
.crumbs li+li::before{content:"";width:6px;height:6px;flex:0 0 auto;
  border-top:1.5px solid #3f342d59;border-right:1.5px solid #3f342d59;rotate:45deg}
.crumbs a{color:var(--muted)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:700}
@media(hover:hover){.crumbs a{transition:color .3s ease}.crumbs a:hover{color:var(--coral-t)}}
/* ★飛び先の見出しが、追従ヘッダーの下に潜らないようにする。
   .topbar の高さは 画面幅 と 文字サイズ で動くので、JS が実測して --topbar-h に入れる。
   下の受け皿は JS が動かなかったときのため(標準の文字サイズで測った値)。 */
html{--topbar-h:60px}
@media(max-width:760px){html{--topbar-h:116px}}
@media(max-width:430px){html{--topbar-h:160px}}
html{scroll-padding-top:calc(var(--topbar-h) + 12px)}

/* ---------- 4. 節の共通部品 ---------- */
main>section{padding:clamp(64px,8vw,140px) var(--pad)}
.sec-head{display:grid;gap:clamp(14px,1.6vw,22px);max-width:1180px;margin-bottom:var(--gap)}
.sec-head h2{max-width:22em}
.eyebrow{font-family:var(--en);font-size:.8125rem;line-height:1.5;letter-spacing:.24em;
  color:var(--orange-t);font-weight:600}
.eyebrow.o{color:var(--orange-l)}
.stumble-copy .eyebrow.o{color:var(--coral-t)}
h2{font-size:var(--h2);line-height:1.42}
h3{font-size:var(--h3);line-height:1.5}
.big{font-size:var(--h1);line-height:1.38}
.ln{display:block}
.lead{font-size:1.0625rem;line-height:2.05;max-width:44em}
.note{font-family:var(--round);font-size:1.0625rem;line-height:1.95;color:var(--muted)}
.deep{background:var(--cream);color:var(--ink)}
.deep .lead,.deep .note{color:var(--muted)}

/* 器(画像が入る枠)。比は必ず figure 側に持たせる。
   img に aspect-ratio を書いても、img{height:100%} が
   引き伸ばされた親の高さに解決して打ち消す(実測済)。 */
.ph{background:var(--tone,#ede0d3);overflow:hidden;position:relative}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,#ffffff20,#00000010)}
.ph>img{position:relative;z-index:1}
.ph-a{--tone:#e6d4c3}
.ph-b{--tone:#dfd0c4}
.ph-c{--tone:#ecdccc}
.ph-d{--tone:#4a3d34}
.ph-e{--tone:#f1e4d9}

.cta{display:inline-flex;align-items:center;gap:14px;justify-self:start;
  border-radius:999px;padding:17px 30px;background:var(--orange);color:var(--on-accent);
  font-size:1.0625rem;line-height:1.4;font-weight:700}
.cta svg{width:32px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cta.hollow{background:none;color:var(--ink);border:1px solid var(--ink)}
.deep .cta.hollow{color:var(--ink);border-color:var(--ink)}
@media(hover:hover){
  .cta{transition:background-color .35s ease,color .35s ease}
  .cta svg{transition:translate .35s var(--ease)}
  .cta:hover{background:var(--orange-h)}
  .cta.hollow:hover{background:var(--ink);color:#fff}
  .cta:hover svg{translate:6px 0}
}

/* ---------- 5. ヒーロー(トップ) ----------
   ▼版面の規律
     ・位置も大きさも、宣言した格子からしか取らない。
         外の格子 = 12 列。左の文章 = 1〜6 列 / 右の人物 = 7〜12 列。
         中の格子 = .88fr / 1fr / .88fr。
     ・余白は 3 段だけ(--hs1 / --hs2 / --hs3)。
     ・文字の大きさは 3 段だけ = 見出し var(--h1) / 本文 1.0625rem / 札 .8125rem。
   ▼動き 1: 読み込み時(1 回だけ)
     0.06s 文章がまとまって立ち上がる / 0.20s 帯が左から右へ伸びる
     0.34 / 0.48 / 0.62s 人が左から順に、帯の上に立ち上がる
   ▼動き 2: 会話(読み込みが終わってから)
     1.15s 真ん中の人が話しはじめる → 左 → 右 → くり返し */
.hero{position:relative;background:var(--white);padding:0;
  --hs1:clamp(8px,1vw,14px);--hs2:clamp(20px,2.4vw,32px);--hs3:clamp(36px,5vw,72px)}
.hero-in{max-width:calc(1180px + var(--pad) * 2);margin-inline:auto;
  padding:var(--hs3) var(--pad) 0;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hs2);
  align-items:end;min-height:min(58vh,560px)}
.hero-copy{grid-column:1 / span 6;display:grid;gap:var(--hs2);padding-bottom:var(--hs3);
  animation:heroCopyIn .86s var(--ease) .06s backwards}
.hero-copy .eyebrow{font-size:1.0625rem;letter-spacing:.12em;color:var(--coral-t)}
.hero-copy h1{font-size:var(--h1);line-height:1.36;color:var(--ink)}
.hero-lead{font-size:1.0625rem;line-height:1.95;color:var(--muted);max-width:30em}
.hero-status{display:flex;align-items:center;gap:var(--hs1);
  font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.hero-status .statustext{min-width:0}
.dot{flex:0 0 auto;width:11px;height:11px;border-radius:999px;background:var(--coral);
  animation:pulse 3.4s var(--ease) infinite}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hs2)}
.hero-sub{font-size:1.0625rem;line-height:1.6;border-bottom:1px solid var(--line)}

.hero-stage{grid-column:7 / span 6;display:grid;
  grid-template-columns:.88fr 1fr .88fr;column-gap:var(--hs1);align-items:end}
/* 吹き出しの行。列は 3 等分(人物側の .88fr / 1fr / .88fr ではない)。
   .88fr のままだと 901〜980px で両端の吹き出しだけ 8px 足りず、
   宣言していない位置で折り返す(実測)。 */
.hero-says{grid-column:1 / -1;grid-row:1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--hs1);
  align-items:end;margin-bottom:var(--hs1)}
.hero-say{grid-row:1;justify-self:center;width:fit-content;max-width:100%;min-width:0;
  position:relative;background:var(--white);border:1px solid var(--hair);
  border-radius:20px;padding:var(--hs1) clamp(8px,1vw,20px);letter-spacing:0;
  font-family:var(--round);font-size:1.0625rem;line-height:1.6;
  color:var(--ink);text-align:center;
  /* ★word-break は必ず normal に戻す。main p の auto-phrase のままだと
     器より広い最小幅を持ち、max-width:100% が効かない(実測)。 */
  word-break:normal;overflow-wrap:anywhere}
.hero-say:nth-of-type(1){grid-column:1}
.hero-say:nth-of-type(2){grid-column:2}
.hero-say:nth-of-type(3){grid-column:3}
.hero-say::after{content:"";position:absolute;left:var(--tail,50%);bottom:-6px;
  width:11px;height:11px;background:var(--white);
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  translate:-50% 0;rotate:45deg}
/* 隠す側は :where(html.js) の中。★開いた側の inset は負の値。
   0 にすると器の外にある尻尾が切れる。 */
:where(html.js) .hero-say{clip-path:inset(0 0 100% 0);translate:0 7px}
.hero-say.on{clip-path:inset(-14px);translate:none}
html.anim .hero-say{transition:clip-path .5s var(--ease),translate .5s var(--ease)}

.hero-fig{grid-row:2;position:relative;overflow:hidden;width:100%;
  aspect-ratio:2 / var(--ar,3.48);background:var(--white);
  transform-origin:50% 100%;
  animation:heroFigIn .78s var(--ease) var(--d,.34s) backwards}
html.anim .hero-fig{transition:scale .55s var(--ease)}
.hero-fig.talking{scale:1.05;z-index:2}
/* ★中央そろえは transform で書く。translate(個別プロパティ)で書いてはいけない。
   rigchar 側が translate で体を揺らしており、同じプロパティに書くと
   揺れが始まった瞬間に -50% が消えて絵が右へ半分ずれる。 */
.hero-fig > .rigchar{position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  width:auto;max-width:none;height:calc(100% * var(--z,1))}
/* --ar = viewBox の 高さ ÷ 幅 × 2(器の比が 2:--ar のため)。
   リグの SVG は余白ゼロで切ってある(上下左右の余白 いずれも 0.1% 未満)。 */
.hero-fig:nth-of-type(1){--d:.34s;--z:1;--ar:3.629}
.hero-fig:nth-of-type(2){--d:.48s;--z:1;--ar:3.828}
.hero-fig:nth-of-type(3){--d:.62s;--z:1;--ar:3.896}

/* いまの状況の帯。飾りではなく「準備中である」ことそのものを持たせる。 */
.hero-band{background:var(--blush);animation:heroBandIn .9s var(--ease) .2s backwards}
.hero-facts{max-width:calc(1180px + var(--pad) * 2);margin-inline:auto;
  padding:var(--hs2) var(--pad);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hs2)}
.hero-fact{display:grid;gap:var(--hs1);align-content:start}
.hero-fact + .hero-fact{border-left:1px solid var(--line);padding-left:var(--hs2)}
.hero-fact dt{font-family:var(--en);font-size:.8125rem;line-height:1.5;letter-spacing:.16em;
  font-weight:600;color:var(--coral-t)}
.hero-fact dd{font-size:1.0625rem;line-height:1.5;font-weight:700;color:var(--ink)}

@media(hover:hover){
  .hero-sub{transition:border-color .3s ease,color .3s ease}
  .hero-sub:hover{border-bottom-color:var(--coral);color:var(--coral-t)}
}
@media(max-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr);row-gap:var(--hs3);
    align-items:start;min-height:0}
  .hero-copy{grid-column:1;padding-bottom:0}
  .hero-stage{grid-column:1;max-width:520px;margin-inline:auto;width:100%}
}
@media(max-width:680px){
  .hero-facts{grid-template-columns:minmax(0,1fr);gap:var(--hs1)}
  .hero-fact{grid-template-columns:auto minmax(0,1fr);column-gap:var(--hs2);
    align-items:baseline}
  .hero-fact dd{justify-self:end}
  .hero-fact + .hero-fact{border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:var(--hs1)}
}
@media(max-width:520px){
  .hero-says{grid-template-columns:minmax(0,1fr)}
  /* ★詳細度をそろえること。.hero-say{grid-column:1} だけだと
     上の :nth-of-type(2){grid-column:2} に負け、宣言していない列に落ちる。 */
  .hero-say:nth-of-type(1),.hero-say:nth-of-type(2),.hero-say:nth-of-type(3){
    grid-column:1;grid-row:1}
  .hero-say{width:100%;justify-self:stretch;padding-inline:var(--hs1)}
  .hero-say:nth-of-type(1){--tail:16%}
  .hero-say:nth-of-type(2){--tail:50%}
  .hero-say:nth-of-type(3){--tail:84%}
}
/* 動きを減らす設定では、輪を回さない = 3 つとも出したままにする。
   ここを書かないと、隠す側の clip-path だけが静的に残って永久に出てこない。 */
@media(prefers-reduced-motion:reduce){
  .hero-say{clip-path:none!important;translate:none!important}
}
@keyframes heroCopyIn{from{translate:0 22px;clip-path:inset(0 0 100% 0)}
  to{translate:0 0;clip-path:inset(0)}}
@keyframes heroFigIn{from{translate:0 14px;clip-path:inset(100% 0 0 0)}
  to{translate:0 0;clip-path:inset(0)}}
@keyframes heroBandIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* ---------- 6. 読みもの(トップの主役) ----------
   ★第一版はここが主役。1 本を大きく出し、残りを格子で並べる。 */
.reading{background:var(--mist)}
.feat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(12px,1.6vw,24px);align-items:stretch;
  background:var(--white);border-radius:32px;overflow:hidden;
  border:1px solid var(--line2);margin-bottom:clamp(22px,2.6vw,40px)}
.feat-fig{grid-column:1/span 5;grid-row:1;width:100%;position:relative;
  min-height:clamp(220px,26vw,340px)}
.feat-body{grid-column:6/-1;grid-row:1;display:grid;gap:clamp(10px,1.2vw,16px);
  align-content:center;
  padding:clamp(24px,3vw,52px) clamp(22px,3vw,52px) clamp(24px,3vw,52px) clamp(18px,2vw,34px)}
.feat-body h3{font-size:var(--h2);line-height:1.44}
.feat-body p{font-size:1.0625rem;line-height:1.95;color:var(--muted);max-width:34em}
.feat-mark{display:inline-flex;align-items:center;gap:9px;justify-self:start;
  background:var(--blush);border-radius:999px;padding:7px 16px;
  font-family:var(--round);font-size:1rem;line-height:1.5;color:var(--coral-t)}
.feat-go{display:inline-flex;align-items:center;gap:12px;justify-self:start;
  font-weight:700;border-bottom:2px solid var(--orange);padding-bottom:3px}
.feat-go svg{width:28px;height:11px;fill:none;stroke:var(--orange-t);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){
  .feat-fig>img{transition:transform .7s var(--ease)}
  .feat:hover .feat-fig>img{transform:scale(1.04)}
  .feat-go svg{transition:translate .35s var(--ease)}
  .feat:hover .feat-go svg{translate:6px 0}
}
@media(max-width:820px){
  .feat-fig{grid-column:1/-1;min-height:0;height:clamp(190px,44vw,300px)}
  .feat-body{grid-column:1/-1;grid-row:2;padding:clamp(22px,4vw,34px)}
}

.tagbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(22px,2.6vw,36px)}
.tagbar button{border:1px solid var(--line);border-radius:999px;padding:10px 19px;
  font-size:1.0625rem;line-height:1.5;background:var(--white)}
.tagbar button[aria-pressed="true"]{background:var(--orange);color:var(--on-accent);border-color:var(--orange)}
.arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.art{background:var(--white);border-radius:26px;overflow:hidden;display:grid;
  grid-template-rows:auto 1fr;border:1px solid var(--line2)}
.art.off{display:none}
.art-thumb{width:100%;height:clamp(112px,15vw,150px);background:var(--blush);
  border-bottom:1px solid var(--line2)}
.art-thumb svg{width:100%;height:100%}
.art-body{padding:clamp(20px,2.2vw,30px);display:grid;gap:11px;align-content:start}
.art-tag{font-size:1.0625rem;line-height:1.5;color:var(--coral-t)}
.art h3{font-size:var(--h4);line-height:1.65}
.art-meta{font-family:var(--round);font-size:1.0625rem;line-height:1.5;color:var(--muted)}
.colmore{display:flex;justify-content:center;margin-top:clamp(24px,3vw,44px)}
@media(hover:hover){
  .art{transition:transform .5s var(--ease),box-shadow .5s ease}
  .art:hover{transform:translateY(-6px);box-shadow:0 14px 30px #b0335c1f}
  .tagbar button{transition:background-color .3s ease}
  .tagbar button:hover{background:var(--blush)}
}
@media(max-width:940px){.arts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.arts{grid-template-columns:minmax(0,1fr)}}

/* ---------- 7. 群像(たとえば、こんな話から) ---------- */
.voices{background:var(--white);padding-inline:0;overflow:hidden}
.voices .sec-head,.voices .vfoot,.voices .vfaces{padding-inline:var(--pad)}
.voices .sec-head{margin-inline:auto}
.vfaces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,38px);margin-inline:auto;margin-bottom:var(--gap);
  align-items:start;max-width:calc(1180px + var(--pad) * 2)}
.vface{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.6vw,22px);
  justify-items:center;align-content:start}
/* 4 人を一直線に並べない。2 番目と 4 番目を下げて、波の高さをつくる。 */
.vface:nth-child(2n){margin-top:clamp(16px,2.6vw,44px)}
.vface::before{content:"";grid-area:1/1;width:min(100%,236px);aspect-ratio:1/1;
  border-radius:50%;background:var(--disc,var(--blush));
  translate:clamp(6px,.9vw,13px) clamp(8px,1.1vw,15px)}
.vface:nth-child(2){--disc:var(--cream)}
.vface:nth-child(3){--disc:#f7ecdf}
.vface:nth-child(4){--disc:var(--blush)}
.vpic{grid-area:1/1;z-index:1;width:min(100%,236px);aspect-ratio:1/1;
  border-radius:50%;overflow:hidden;position:relative;background:var(--tone,#f1e4d9)}
.vsay{grid-area:2/1;position:relative;background:var(--white);
  border:1px solid var(--hair);border-radius:22px;
  padding:clamp(14px,1.5vw,19px) clamp(16px,1.7vw,22px);
  font-family:var(--round);font-size:1.0625rem;line-height:1.75;text-align:center}
/* 尻尾は必ず話し手(上の丸)を向ける。 */
.vsay::before{content:"";position:absolute;left:50%;top:-8px;width:14px;height:14px;
  background:var(--white);border-left:1px solid var(--hair);border-top:1px solid var(--hair);
  translate:-50% 0;rotate:45deg}
:where(html.js) .vface{animation:vfloat 7.2s ease-in-out var(--vd,0s) infinite}
.vface:nth-child(2){--vd:-1.8s}
.vface:nth-child(3){--vd:-3.6s}
.vface:nth-child(4){--vd:-5.4s}

.marq{overflow:hidden;padding-block:clamp(8px,1.1vw,14px)}
.marq+.marq{margin-top:clamp(8px,1.1vw,16px)}
.track{display:flex;width:max-content}
:where(html.js) .track{animation:flow 58s linear infinite}
:where(html.js) .marq.rev .track{animation-name:flowrev;animation-duration:68s}
.row{display:flex;gap:clamp(12px,1.4vw,22px);padding-inline:clamp(6px,.7vw,11px)}
.vchip{flex:0 0 auto;display:flex;align-items:center;gap:11px;white-space:nowrap;
  background:var(--white);border:1px solid var(--hair);border-radius:999px;
  padding:clamp(12px,1.3vw,16px) clamp(20px,2.1vw,28px);
  font-family:var(--round);font-size:1.0625rem;line-height:1.6}
.vchip::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:999px;
  background:var(--dot,var(--coral))}
.row .vchip:nth-child(2n){background:var(--blush);border-color:#0000}
.row .vchip:nth-child(3n){--dot:var(--orange)}

.vfoot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:var(--gap);
  max-width:1180px;margin-inline:auto}
/* 波の仕切り。線の上を、光の点が左から右へ流れる。
   ★点は「線そのもの」を破線の 1 点として描いている。座標を別に持たないので、
     どの画面幅でも線から浮かない。長さ 1220.1775 は getTotalLength() の実測値。 */
.vdiv{width:100%;height:34px;margin-top:10px}
.vdiv path{fill:none}
.vd-line{stroke:var(--coral);stroke-width:1.6;opacity:.7}
.vd-glow{stroke:var(--coral);stroke-width:19;stroke-linecap:round;
  stroke-dasharray:.01 610.0888;vector-effect:non-scaling-stroke;
  animation:vdrun 11s linear infinite,orbglow 2.3s ease-in-out infinite}
.vd-dot{stroke:var(--coral-t);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:.01 610.0888;vector-effect:non-scaling-stroke;
  animation:vdrun 11s linear infinite,orbcore 2.3s ease-in-out infinite}
@keyframes vdrun{from{stroke-dashoffset:0}to{stroke-dashoffset:-610.0888px}}
/* 明滅。0 まで落とさない(opacity:0 の要素は検査から外れる)。 */
@keyframes orbglow{0%,100%{opacity:.13}50%{opacity:.4}}
@keyframes orbcore{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes vfloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(hover:hover){
  .marq:hover .track{animation-play-state:paused}
  .vpic{transition:transform .5s var(--ease)}
  .vface:hover .vpic{transform:translateY(-6px)}
}
@media(max-width:900px){
  .vfaces{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,34px)}
  .vface:nth-child(2n){margin-top:0}
  .vface:nth-child(3),.vface:nth-child(4){margin-top:clamp(10px,3vw,26px)}
}
@media(max-width:430px){
  .vfaces{grid-template-columns:minmax(0,1fr)}
  .vface:nth-child(n){margin-top:0}
  .vface::before,.vpic{width:min(100%,208px)}
}

/* ---------- 8. こんなときに ---------- */
.scenes{background:var(--cream)}
.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px)}
.scene{background:var(--white);border:1px solid var(--line2);border-radius:26px;
  padding:clamp(24px,2.8vw,40px);display:grid;gap:15px;align-content:start}
.ico{width:clamp(52px,5vw,66px)}
.ico svg{width:100%;height:auto}
.scene p{font-size:1.0625rem;line-height:1.95;color:var(--muted)}

/* ---------- 8-B. 画像の器(こんなときに / 3つの約束 で共通) ----------
   (1) 器をつくる … 画像を器の幅いっぱいに敷かない。12 列のうち 9 列だけを使う。
   (2) 平面を破る … 面をずらして敷き、その上に別の絵と白い札を重ねる。
   (3) 奥行きをつくる … 器を overflow:hidden にして、中の絵だけを動かす(.pxl)。
   ★重ねる側には必ず position:relative + z-index を付ける。
     clip-path を持つ器は後ろの静的な兄弟より上に描かれるため。 */
.showcase{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto clamp(26px,3.4vw,56px);
  column-gap:clamp(12px,1.6vw,24px);margin-top:var(--gap)}
.showcase::before{content:"";grid-column:1/span 8;grid-row:1/-1;
  background:var(--blush);border-radius:30px;margin-top:clamp(30px,4vw,64px)}
.sc-fig{grid-column:4/-1;grid-row:1;width:100%;aspect-ratio:16/9;
  border-radius:30px;overflow:hidden;position:relative;z-index:1}
.sc-inset{grid-column:1/span 4;grid-row:1/-1;align-self:end;
  width:100%;aspect-ratio:5/4;border-radius:26px;overflow:hidden;
  position:relative;z-index:3;border:clamp(6px,.7vw,9px) solid var(--white);
  box-shadow:0 18px 40px #3f342d24}
.sc-cap{grid-column:6/span 7;grid-row:1/-1;align-self:end;justify-self:end;
  position:relative;z-index:3;max-width:32em;
  background:var(--white);border-radius:24px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,32px);
  box-shadow:0 16px 36px #3f342d1a;display:grid;gap:6px}
.sc-cap-h{font-family:var(--round);font-weight:700;font-size:var(--h4);
  line-height:1.55;color:var(--ink)}
.sc-cap-b{font-size:1.0625rem;line-height:1.8;color:var(--muted)}
/* 奥行き。器の中で絵だけを動かす。JS が --px を入れる。
   JS が落ちても --px は 0 のまま = 絵は中央に収まる(欠けない)。 */
.pxl>img{position:absolute;top:50%;left:50%;width:100%;height:126%;
  max-width:none;object-fit:cover;
  translate:-50% calc(-50% + var(--px,0%))}
@media(hover:hover){
  .scene{transition:transform .5s var(--ease),border-color .5s ease}
  .scene:hover{transform:translateY(-6px);border-color:var(--coral)}
  .scene .ico{transition:transform .55s var(--ease)}
  .scene:hover .ico{transform:rotate(-5deg)}
  .sc-inset{transition:transform .6s var(--ease)}
  .showcase:hover .sc-inset{transform:translateY(-6px)}
}
@media(max-width:900px){.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .showcase{grid-template-rows:auto auto auto}
  .showcase::before{display:none}
  .sc-fig{grid-column:1/-1;grid-row:1;aspect-ratio:16/10}
  .sc-inset{grid-column:1/span 6;grid-row:2;align-self:start;
    margin-top:calc(-1 * clamp(34px,8vw,64px))}
  .sc-cap{grid-column:1/-1;grid-row:3;justify-self:stretch;max-width:none;
    margin-top:clamp(16px,3vw,24px)}
}
@media(max-width:600px){.scene-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 9. 3つの約束 ---------- */
.assure{background:var(--white)}
.assure-lay{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.assure-copy{display:grid;gap:clamp(14px,1.6vw,22px);align-content:start}
/* ★見出しの 1 行が器に収まる大きさに止める。器はページで最も狭い柱なので、
   共通の --h2 のままだと 1001px 以上で「宣言していない位置」で折れる(実測)。 */
.assure-copy h2{font-size:clamp(23px,3.1vw,40px)}
/* 額装。★ずらす面は器の「中」に置く(padding で場所を作る)。
   負の余白で外へ出すと、狭い画面で節の余白より外に出て横あふれになる。 */
.pframe{--po:clamp(10px,1.6vw,22px);position:relative;
  padding:0 var(--po) var(--po) 0;margin-top:clamp(14px,1.8vw,24px)}
.pframe::before{content:"";position:absolute;inset:var(--po) 0 0 var(--po);
  background:var(--blush);border-radius:30px;z-index:0}
.pframe .sc-fig{grid-column:auto;grid-row:auto;position:relative;z-index:1;
  width:100%;aspect-ratio:3/2;border-radius:30px;overflow:hidden;
  border:clamp(7px,.9vw,11px) solid var(--white);
  box-shadow:0 16px 38px #3f342d1c}
.pframe-label{position:relative;z-index:2;
  margin-top:clamp(12px,1.4vw,18px);display:flex;gap:12px;align-items:flex-start;
  font-family:var(--round);font-size:1.0625rem;line-height:1.8;color:var(--muted)}
.pframe-label::before{content:"";flex:0 0 auto;width:22px;height:2px;
  margin-top:.9em;background:var(--coral)}
.assure-list{display:grid;gap:clamp(14px,1.8vw,24px);counter-reset:as}
.assure-list li{counter-increment:as;background:var(--blush);border-radius:28px;
  padding:clamp(24px,2.8vw,40px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,28px);
  align-items:start;border-left:4px solid var(--coral)}
.big-ico{grid-row:1/3;width:clamp(64px,6.4vw,92px)}
.big-ico svg{width:100%;height:auto}
.assure-list h3::before{content:"0" counter(as);display:block;
  font-family:var(--en);font-size:.8125rem;font-weight:600;letter-spacing:.2em;
  color:var(--coral-t);margin-bottom:6px}
.assure-list p{grid-column:2;font-size:1.0625rem;line-height:1.95;color:var(--muted)}
@media(max-width:980px){
  .assure-lay{grid-template-columns:minmax(0,1fr)}
  .big-ico{grid-row:auto}
  .assure-list li{grid-template-columns:minmax(0,1fr)}
  .assure-list p{grid-column:1}
}

/* ---------- 10. 印象節(うまく話せなくて構いません) ---------- */
.stumble{position:relative;overflow:hidden;padding:0}
.band-shot{width:100%;aspect-ratio:21/9;min-height:260px}
.stumble-copy{position:relative;z-index:3;margin-top:clamp(-140px,-9vw,-60px);
  background:var(--cream);border-radius:32px 32px 0 0;
  padding:clamp(34px,4.4vw,70px) clamp(22px,3.4vw,64px) clamp(44px,5vw,80px);
  display:grid;gap:clamp(14px,1.8vw,26px);max-width:1180px;margin-inline:auto}
.stumble h2{color:var(--ink)}
/* 波。点は線に沿って左から右へ流れる。
   ・経路は波の path そのもの。座標を別に持たないので線から浮かない。
   ・path 全長 1638.3391 は getTotalLength() の実測値。3 等分(546.113)。
   ・止めるのは CSS の animation なので、動きを減らす設定で必ず止まる。 */
.wavey{position:relative;z-index:2;width:100%;height:clamp(78px,9vw,140px);
  margin-top:-2px;background:var(--cream)}
.wavey path{fill:none;stroke-linecap:round}
.wv-back{stroke:#ecdfd6;stroke-width:9}
.wv-front{stroke:var(--coral);stroke-width:2.2}
.wv-flow{animation:wave 26s linear infinite}
.wv-glow{stroke:var(--coral);stroke-width:20;stroke-dasharray:.01 546.113;
  animation:wvrun 9s linear infinite,orbglow 2.1s ease-in-out infinite}
.wv-dot{stroke:var(--coral-t);stroke-width:7.5;stroke-dasharray:.01 546.113;
  animation:wvrun 9s linear infinite,orbcore 2.1s ease-in-out infinite}
@keyframes wvrun{from{stroke-dashoffset:0}to{stroke-dashoffset:-546.113px}}
.stumble-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,40px);border-top:1px solid var(--line);padding-top:clamp(20px,2.4vw,34px)}
.stumble-pts dt{font-weight:700;font-size:var(--h3);line-height:1.4;
  color:var(--coral-t);margin-bottom:8px}
.stumble-pts dd{font-size:1.0625rem;line-height:1.9;color:var(--muted)}
@media(max-width:820px){
  .band-shot{aspect-ratio:3/2;min-height:0}
  .stumble-copy{border-radius:0;margin-top:-40px}
  .stumble-pts{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* ---------- 11. いま決まっていること / まだ決まっていないこと ----------
   ★第一版で「料金」「受付時間」の節を置き換えた場所。数字は 1 つも書かない。 */
.prep{background:var(--white)}
.prep-lay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,36px);align-items:start}
.ledger{border-radius:30px;padding:clamp(26px,3.2vw,46px);
  display:grid;gap:clamp(14px,1.6vw,20px);align-content:start}
.ledger.fixed{background:var(--cream);border-left:4px solid var(--orange)}
.ledger.open{background:var(--mist);border-left:4px solid var(--coral)}
.ledger h3{font-size:var(--h3);line-height:1.45}
.ledger-mark{font-family:var(--en);font-size:.8125rem;font-weight:600;letter-spacing:.2em}
.ledger.fixed .ledger-mark{color:var(--orange-t)}
.ledger.open .ledger-mark{color:var(--coral-t)}
.ledger ul{display:grid;gap:13px}
.ledger li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;
  align-items:start;font-size:1.0625rem;line-height:1.85}
.ledger li svg{width:21px;height:21px;margin-top:.42em;
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ledger.fixed li svg{stroke:var(--orange-t)}
.ledger.open li svg{stroke:var(--coral-t)}
.prep-note{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;
  border-top:1px solid var(--line);padding-top:clamp(18px,2.2vw,30px);
  margin-top:clamp(4px,1vw,12px)}
.prep-note::before{content:"";flex:0 0 auto;width:26px;height:2px;margin-top:1em;
  background:var(--orange)}
/* 進み具合の帯。SVG にすると狭い画面で文字が読めなくなるので、HTML で組む。 */
.prep-track{grid-column:1/-1;margin-top:clamp(16px,2.2vw,30px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(10px,1.4vw,20px)}
.prep-track li{position:relative;padding-top:32px;
  font-size:1rem;line-height:1.6;color:var(--muted)}
.prep-track li::before{content:"";position:absolute;left:0;
  right:calc(-1 * clamp(10px,1.4vw,20px));top:8px;height:2px;background:#3f342d1f}
.prep-track li:last-child::before{right:0}
.prep-track li.done::before{background:var(--orange)}
.prep-track li.now::before{background:linear-gradient(90deg,var(--orange),#3f342d1f)}
.prep-track .pt-dot{position:absolute;left:0;top:0;width:18px;height:18px;
  border-radius:999px;background:var(--white);border:3px solid #3f342d40}
.prep-track li.done .pt-dot{border-color:var(--orange)}
.prep-track li.now .pt-dot{border-color:var(--orange);background:var(--orange);
  animation:pulse 3s var(--ease) infinite}
.prep-track li b{display:block;font-weight:700;color:var(--ink);
  font-size:1.0625rem;line-height:1.5}
@media(max-width:760px){
  .prep-track{grid-template-columns:minmax(0,1fr);column-gap:0}
  .prep-track li{padding:0 0 clamp(16px,3.4vw,26px) 36px}
  .prep-track li:last-child{padding-bottom:0}
  .prep-track li::before{left:8px;right:auto;top:20px;bottom:0;width:2px;height:auto}
  .prep-track li.now::before{background:linear-gradient(180deg,var(--orange),#3f342d1f)}
  .prep-track li:last-child::before{display:none}
  .prep-track .pt-dot{top:2px}
}
@media(max-width:820px){.prep-lay{grid-template-columns:minmax(0,1fr)}}

/* ---------- 12. 印象節(もしもし) ----------
   ★コーラルの「面」。ページで唯一、色が主役になる節。
   明るい差し色の上の文字は必ず --on-accent(6.65:1)。--muted は 1 か所も置かない。 */
.hush{background:var(--coral);color:var(--on-accent);position:relative;overflow:hidden}
.hush .lead,.hush .note{color:var(--on-accent)}
.hush-in{display:grid;gap:clamp(16px,2vw,28px);justify-items:center;text-align:center;
  position:relative;z-index:2}
.hush h2{max-width:17em}
.hush .lead{max-width:34em}
.breathfig{width:clamp(120px,14vw,196px)}
.breathfig svg{width:100%;height:auto}
.bf-ring{fill:none;stroke:#ffffff;stroke-width:1.8;opacity:.7;
  transform-box:view-box;transform-origin:100px 100px}
.bf-r1{animation:ringout 6.4s ease-out infinite}
.bf-r2{animation:ringout 6.4s ease-out 1.6s infinite}
.bf-r3{animation:ringout 6.4s ease-out 3.2s infinite}
.bf-core{fill:#ffffff;transform-box:view-box;transform-origin:100px 100px;
  animation:breathe 6.4s ease-in-out infinite}
/* ★広がる輪(.bf-ring)は「動きそのもの」なので線のまま残す。
   中の絵は面で描く。 */
.bf-face{fill:var(--on-accent)}

/* ---------- 13. 聞く人を、これから選びます ----------
   ★実在しないスタッフを並べない。選ぶときの基準だけを書く節に置き換えてある。 */
.criteria{background:var(--white)}
.crit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,32px)}
.crit{display:grid;gap:clamp(14px,1.6vw,20px);align-content:start;
  background:var(--mist);border-radius:28px;padding:clamp(24px,2.8vw,42px)}
.crit-art{width:100%;height:clamp(130px,15vw,200px);border-radius:20px;
  background:var(--blush);overflow:hidden}
.crit-art svg{width:100%;height:100%}
.crit-no{font-family:var(--en);font-size:.8125rem;font-weight:600;letter-spacing:.2em;
  color:var(--coral-t)}
.crit h3{font-size:var(--h3);line-height:1.45}
.crit p{font-size:1.0625rem;line-height:1.95;color:var(--muted)}
.crit-foot{margin-top:clamp(24px,3vw,44px);display:flex;flex-wrap:wrap;gap:14px;
  align-items:center}
@media(hover:hover){
  .crit{transition:transform .5s var(--ease)}
  .crit:hover{transform:translateY(-6px)}
}
@media(max-width:900px){.crit-grid{grid-template-columns:minmax(0,1fr);gap:clamp(16px,3vw,26px)}}

/* ---------- 14. よくある質問 ---------- */
.faq{background:var(--mist)}
.qalist{display:grid;gap:12px;max-width:1180px}
.qa{max-width:940px;background:var(--white);border:1px solid var(--line2);
  border-radius:24px;overflow:hidden}
.q{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  padding:clamp(18px,2.2vw,26px);font-size:1.0625rem;line-height:1.7;font-weight:700}
.q svg{flex:0 0 auto;margin-left:auto;width:20px;height:20px;fill:none;stroke:var(--coral-t);
  stroke-width:1.9;stroke-linecap:round}
.q .vbar{transform-box:view-box;transform-origin:10px 10px;transition:rotate .35s var(--ease)}
.qa:not(.shut) .q .vbar{rotate:90deg}
.a{padding:0 clamp(18px,2.2vw,26px) clamp(20px,2.2vw,28px);font-size:1.0625rem;line-height:2;
  color:var(--muted);max-width:52em}
.qa.shut .a{display:none}
@media(hover:hover){.q{transition:background-color .3s ease}.q:hover{background:var(--cream)}}

/* ---------- 15. 無料の相談窓口 ---------- */
.public{background:var(--cream)}
.pub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.pub{background:var(--white);border:1px solid var(--line2);border-left:4px solid var(--coral);
  border-radius:24px;padding:clamp(24px,2.8vw,40px);display:grid;gap:14px;align-content:start}
.pub p{font-size:1.0625rem;line-height:1.95;color:var(--muted)}
.pub-foot{margin-top:clamp(24px,3vw,44px);display:flex;justify-content:center}
@media(hover:hover){
  .pub{transition:transform .5s var(--ease)}
  a.pub:hover{transform:translateY(-6px)}
}
@media(max-width:860px){.pub-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 16. 締めの印象節 ----------
   ★ここがページで唯一の「濃茶の面」。 */
.closing{position:relative;overflow:hidden;padding:0;background:var(--deep)}
.close-shot{width:100%;aspect-ratio:16/9;min-height:min(62vh,560px)}
/* ★文字は必ず「濃い無地の面」の上に置く。写真の上のグラデーションにすると、
   上端の文字が透明な部分に乗る = 差し込む写真しだいで読めるかが変わる。 */
.close-in{position:absolute;inset:auto 0 0;z-index:3;display:grid;justify-items:center;
  gap:clamp(14px,1.8vw,26px);text-align:center;
  padding:clamp(30px,4vw,64px) var(--pad) clamp(34px,4.4vw,70px);
  background:var(--deep)}
.close-in::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:clamp(80px,13vw,190px);pointer-events:none;
  background:linear-gradient(180deg,#3f342d00,#3f342d)}
.close-in h2{color:#fff;font-size:var(--h1);line-height:1.36}
.close-go{display:inline-flex;align-items:center;gap:14px;background:var(--orange);
  color:var(--on-accent);border-radius:999px;padding:17px 34px;font-weight:700;
  font-size:1.0625rem;line-height:1.4}
.close-go svg{width:32px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.close-sub{font-size:1.0625rem;line-height:1.8;color:var(--muted-d)}
.close-ring{position:absolute;z-index:2;left:50%;top:5%;translate:-50% 0;
  width:min(560px,86vw);height:auto;fill:none;stroke:#ffffff40;stroke-width:1.1;pointer-events:none}
.close-ring circle{transform-box:view-box;transform-origin:150px 150px}
.close-ring .cr1{animation:ringout 8s ease-out infinite}
.close-ring .cr2{animation:ringout 8s ease-out 2s infinite}
.close-ring .cr3{animation:ringout 8s ease-out 4s infinite}
@media(hover:hover){
  .close-go{transition:background-color .35s ease}
  .close-go:hover{background:var(--orange-h)}
  .close-go svg{transition:translate .35s var(--ease)}
  .close-go:hover svg{translate:6px 0}
}
@media(max-width:820px){
  .closing{display:grid}
  .close-shot{aspect-ratio:1/1;min-height:0;max-height:52vh}
  .close-in{position:static;background:var(--deep)}
  .close-ring{top:auto;bottom:46%}
}

/* ---------- 17. 足元 ---------- */
.foot{background:var(--white);border-top:4px solid var(--orange);
  padding:clamp(48px,5.4vw,90px) var(--pad) clamp(28px,3vw,44px)}
.foot-lay{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,48px);max-width:1180px;margin-inline:auto}
.foot-brand{display:grid;gap:14px;align-content:start}
.foot-brand .brand span{font-size:1.25rem}
.foot-brand p{font-size:1.0625rem;line-height:1.9;color:var(--muted);max-width:24em}
.foot-col h3{font-size:1.0625rem;font-weight:700;line-height:1.6;
  letter-spacing:.08em;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.foot-col li{margin-bottom:11px;font-size:1.0625rem;line-height:1.7}
.foot-col a{color:var(--muted)}
.foot-end{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;
  border-top:1px solid var(--line);margin-top:clamp(28px,3.4vw,52px);padding-top:20px;
  font-size:.9375rem;line-height:1.7;color:var(--muted);max-width:1180px;margin-inline:auto}
@media(hover:hover){
  .foot-col a{transition:color .3s ease}
  .foot-col a:hover{color:var(--coral-t)}
}
@media(max-width:900px){.foot-lay{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.foot-lay{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   18. 読みものページ(1 本の記事 / 一覧)
   ------------------------------------------------------------
   ★全ページを同じ顔にしない。器は 3 通り(kv-a / kv-b / kv-c)、
     本文の部品は 7 種類。どれをどう並べるかはページごとに違う。
   ★器の面はどれも白ではない。白にすると次の .doc(白)と溶けて、
     見出しと本文がひとつの面に見えてしまう。
   ============================================================ */
.kv{padding:clamp(40px,5vw,88px) var(--pad) clamp(34px,4.4vw,72px)}
.kv-in{max-width:1180px;margin-inline:auto}
.kv h1{font-size:var(--h2);line-height:1.44;color:var(--ink)}
.kv .kv-lead{font-size:1.0625rem;line-height:2.05;color:var(--muted);max-width:40em}
.kv-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  font-family:var(--round);font-size:1rem;line-height:1.6;color:var(--muted)}
.kv-tag{background:var(--blush);border-radius:999px;padding:6px 15px;color:var(--coral-t)}
.kv-art svg{width:100%;height:100%}
/* ★図はすべて「面」で描く。輪郭線を 1 本も持たない(人物のイラストと同じ作法)。
   色は svglib.py が fill 属性で直に書く。ここで色を上書きしない。
   飾りの丸だけ、ゆっくり上下させる。動きを止めても丸はそのまま見える。 */
.kd-a{animation:kfloat 9s ease-in-out infinite}
.kd-b{animation:kfloat 11.5s ease-in-out 1.2s infinite}

/* 器 A = 左に言葉、右に大きな図 */
.kv-a{background:var(--cream)}
.kv-a .kv-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.4vw,60px);align-items:center}
.kv-a .kv-copy{display:grid;gap:clamp(13px,1.5vw,20px);align-content:start}
.kv-a .kv-art{width:100%;height:clamp(210px,26vw,340px);border-radius:30px;
  overflow:hidden;background:var(--white)}
@media(max-width:820px){
  .kv-a .kv-in{grid-template-columns:minmax(0,1fr)}
  .kv-a .kv-art{height:clamp(180px,42vw,280px)}
}

/* 器 B = 図が全幅の帯、その下に言葉 */
.kv-b{background:var(--cream);padding-inline:0;padding-top:0}
.kv-b .kv-in{padding-inline:var(--pad)}
.kv-b .kv-band{width:100%;height:clamp(150px,20vw,300px);overflow:hidden;
  background:var(--blush);margin-bottom:clamp(24px,3vw,46px)}
.kv-b .kv-band svg{width:100%;height:100%}
.kv-b .kv-copy{display:grid;gap:clamp(13px,1.5vw,20px);max-width:44em}

/* 器 C = 額装した図が左、言葉が右 */
.kv-c{background:var(--mist)}
.kv-c .kv-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,3.6vw,64px);align-items:center}
.kv-c .kv-frame{--po:clamp(10px,1.5vw,20px);position:relative;
  padding:0 var(--po) var(--po) 0}
.kv-c .kv-frame::before{content:"";position:absolute;inset:var(--po) 0 0 var(--po);
  background:var(--blush);border-radius:28px;z-index:0}
.kv-c .kv-art{position:relative;z-index:1;width:100%;height:clamp(220px,24vw,330px);
  border-radius:28px;overflow:hidden;background:var(--white);
  border:clamp(7px,.9vw,11px) solid var(--white);box-shadow:0 16px 38px #3f342d1c}
.kv-c .kv-copy{display:grid;gap:clamp(13px,1.5vw,20px);align-content:start}
@media(max-width:820px){
  .kv-c .kv-in{grid-template-columns:minmax(0,1fr)}
  .kv-c .kv-art{height:clamp(190px,44vw,300px)}
}

/* --- 本文 --- */
.doc{background:var(--white);padding:clamp(44px,5.4vw,96px) var(--pad)}
.doc-in{max-width:1180px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);
  gap:clamp(28px,4vw,72px);align-items:start}
.doc-body{display:grid;gap:clamp(26px,3vw,46px);min-width:0;max-width:46em}
.doc-body h2{font-size:var(--h3);line-height:1.5;
  padding-bottom:12px;border-bottom:2px solid var(--orange)}
.doc-body h3{font-size:var(--h4);line-height:1.6;color:var(--coral-t)}
.doc-sec{display:grid;gap:clamp(13px,1.5vw,20px)}
.doc-sec p{font-size:1.0625rem;line-height:2.05}

/* 本文の部品 1: 箇条書きのカード */
.doc-cards{display:grid;gap:12px}
.doc-cards li{background:var(--mist);border-radius:22px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:start;
  font-size:1.0625rem;line-height:1.9}
.doc-cards li svg{width:21px;height:21px;margin-top:.42em;fill:none;
  stroke:var(--coral-t);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.doc-cards b{display:block;font-weight:700}

/* 本文の部品 2: 2 つを並べて比べる */
.doc-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.doc-compare>div{border-radius:24px;padding:clamp(20px,2.3vw,30px);
  display:grid;gap:10px;align-content:start}
.doc-compare>div:first-child{background:var(--cream);border-top:4px solid var(--orange)}
.doc-compare>div:last-child{background:var(--blush);border-top:4px solid var(--coral)}
.doc-compare h3{font-size:var(--h4);color:var(--ink)}
.doc-compare p{font-size:1.0625rem;line-height:1.9;color:var(--muted)}
@media(max-width:640px){.doc-compare{grid-template-columns:minmax(0,1fr)}}

/* 本文の部品 3: 引き出した一文 */
.doc-pull{position:relative;background:var(--cream);border-radius:28px;
  padding:clamp(24px,3vw,44px) clamp(24px,3vw,48px);
  font-family:var(--round);font-size:var(--h4);line-height:1.85;font-weight:700}
.doc-pull::before{content:"";position:absolute;left:0;top:clamp(24px,3vw,44px);
  bottom:clamp(24px,3vw,44px);width:4px;border-radius:999px;background:var(--coral)}

/* 本文の部品 4: 手順 */
.doc-steps{display:grid;gap:14px;counter-reset:ds}
.doc-steps li{counter-increment:ds;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  background:var(--white);border:1px solid var(--line2);border-radius:22px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  font-size:1.0625rem;line-height:1.9}
.doc-steps li::before{content:counter(ds);display:grid;place-items:center;
  width:34px;height:34px;border-radius:999px;background:var(--orange);
  color:var(--on-accent);font-family:var(--en);font-weight:600;font-size:1rem;line-height:1}
.doc-steps b{display:block;font-weight:700}

/* 本文の部品 5: 先に言っておくこと(注意の面) */
.doc-caution{background:var(--blush);border-radius:26px;
  padding:clamp(22px,2.6vw,36px) clamp(22px,2.8vw,40px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.doc-caution svg{width:clamp(34px,3.4vw,46px);height:auto}
.doc-caution h3{font-size:var(--h4);color:var(--ink);margin-bottom:8px}
.doc-caution p{font-size:1.0625rem;line-height:1.95;color:var(--muted)}

/* 本文の部品 6: 図(節の途中に置く)
   ★高さは height で直接決める。aspect-ratio と min-height を同時に書くと
     格子の列の下限が中身から逆算されて画面より広くなる(実測)。 */
.doc-fig{border-radius:26px;overflow:hidden;background:var(--mist);
  width:100%;height:clamp(120px,22vw,240px)}
.doc-fig svg{width:100%;height:100%}
.doc-figcap{font-family:var(--round);font-size:1rem;line-height:1.8;color:var(--muted);
  display:flex;gap:12px;align-items:flex-start;margin-top:10px}
.doc-figcap::before{content:"";flex:0 0 auto;width:22px;height:2px;margin-top:.9em;
  background:var(--coral)}

/* 本文の部品 7: まだ書かれていない本文の受け皿 */
.doc-slot{border:2px dashed #3f342d33;border-radius:26px;
  padding:clamp(22px,2.6vw,36px);display:grid;gap:10px;background:var(--mist)}
.doc-slot p{font-size:1.0625rem;line-height:1.9;color:var(--muted)}
.doc-slot b{color:var(--ink)}

/* 本文の部品 8: 本文の中のリンク
   ★土台の a{color:inherit;text-decoration:none} のままだと、本文に置いた
     リンクが地の文と見分けられない(実測: 色も線も付かない)。
     本文の中だけ、色と下線を戻す。右の柱・次に読むもの・足元には当てない。 */
.doc-body p a,.doc-body li a,.doc-body h3 a{
  color:var(--orange-t);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:.28em;text-decoration-color:#a4430f66}
@media(hover:hover){
  .doc-body p a,.doc-body li a{transition:color .3s ease,text-decoration-color .3s ease}
  .doc-body p a:hover,.doc-body li a:hover{
    color:var(--coral-t);text-decoration-color:var(--coral)}
}

/* 右の柱 */
.doc-side{display:grid;gap:clamp(16px,2vw,26px);align-content:start;
  position:sticky;top:calc(var(--topbar-h) + 20px)}
.side-box{background:var(--mist);border-radius:26px;padding:clamp(20px,2.2vw,30px);
  display:grid;gap:13px;align-content:start}
.side-box h2{font-size:1.0625rem;font-weight:700;line-height:1.6;letter-spacing:.06em;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.side-box li{font-size:1.0625rem;line-height:1.75;margin-bottom:10px}
.side-box a{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.side-box a::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.72em;
  border-top:1.5px solid var(--coral);border-right:1.5px solid var(--coral);rotate:45deg}
.side-note{background:var(--blush);border-radius:26px;padding:clamp(20px,2.2vw,30px);
  font-size:1.0625rem;line-height:1.9}
.side-note b{display:block;margin-bottom:8px}
@media(hover:hover){.side-box a{transition:color .3s ease}.side-box a:hover{color:var(--coral-t)}}
@media(max-width:1000px){
  .doc-in{grid-template-columns:minmax(0,1fr)}
  .doc-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:660px){.doc-side{grid-template-columns:minmax(0,1fr)}}

/* 次に読むもの */
.next{background:var(--mist)}
.next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.next-card{background:var(--white);border:1px solid var(--line2);border-radius:26px;
  padding:clamp(22px,2.4vw,34px);display:grid;gap:11px;align-content:start}
.next-card .art-tag{font-size:1rem}
.next-card h3{font-size:var(--h4);line-height:1.65}
.next-card .go{display:flex;align-items:center;gap:10px;color:var(--orange-t);
  font-size:1rem;line-height:1.5;font-weight:700}
.next-card .go svg{width:24px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){
  .next-card{transition:transform .5s var(--ease),box-shadow .5s ease}
  .next-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px #b0335c1f}
  .next-card .go svg{transition:translate .35s var(--ease)}
  .next-card:hover .go svg{translate:6px 0}
}
@media(max-width:900px){.next-grid{grid-template-columns:minmax(0,1fr)}}

/* 一覧ページ(読みもの / 相談できる場所) */
.listing{background:var(--white)}
.grouphead{display:grid;gap:10px;margin:var(--gap) 0 clamp(18px,2.2vw,30px)}
.grouphead.first{margin-top:0}
.grouphead h2{font-size:var(--h3);line-height:1.5;
  padding-bottom:12px;border-bottom:2px solid var(--coral)}
.grouphead p{font-size:1.0625rem;line-height:1.95;color:var(--muted);max-width:44em}

/* ---------- 19. 折り返し(共通) ---------- */
@media(max-width:1180px){.nav{display:none}}
@media(max-width:760px){
  .head{flex-wrap:wrap;row-gap:10px}
  /* ★道具の並びは折り返させる。折り返さないと、320px + 文字「特大」で
     読みものへのボタンが 33.5px はみ出す(実測)。 */
  .tools{width:100%;justify-content:space-between;margin-left:0;
    flex-wrap:wrap;row-gap:10px}
  .stumble-copy{margin-top:-28px}
}
@media(max-width:430px){
  .fslabel{display:none}
  .fsize button{padding:5px 9px}
  .readbtn{padding:9px 15px}
  .readbtn b{font-size:1rem}
}

/* ---------- 20. 動きの定義 ---------- */
@keyframes breathe{0%,100%{scale:1}50%{scale:1.14}}
@keyframes pulse{0%,100%{scale:1}50%{scale:1.35}}
@keyframes wave{from{translate:0 0}to{translate:300px 0}}
@keyframes kfloat{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes flow{from{translate:0 0}to{translate:-50% 0}}
@keyframes flowrev{from{translate:-50% 0}to{translate:0 0}}
/* 広がる輪。終わりを 0 にすると、その一瞬だけ opacity:0 の要素が生まれる。
   数え方の事故を起こさないよう .01 で止める(見た目は同じ)。 */
@keyframes ringout{0%{scale:.34;opacity:.85}70%{opacity:.12}100%{scale:1;opacity:.01}}

/* ---------- 21. 動きを減らす設定 ----------
   名指しにしない。1 本の総当たりにする。
   ただし animation:none は「素の姿が見えない動き」を消してしまうので、
   隠す指定は同じセレクタで個別に解除する。 */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.wipe,.lift{translate:none!important;clip-path:none!important}
}

/* ★画面の外にある節は動きを止める。
   animation の一括指定は animation-play-state を running へ戻すため、
   この規則は必ずファイルの末尾 + id を含む長いセレクタ + !important で置く。 */
html body div#main main section.rest,
html body div#main main section.rest *{animation-play-state:paused!important}

/* ============================================================
   22. リグ(口パク / まばたき / ゆれ)
   トップのヒーローに貼る 3 体だけが使う。
     ・opacity / transform:scale(0) は使わない(要素の箱を消さない)
     ・クラス名・keyframes 名はすべて r09- / r10- / r11- の一意接頭辞
     ・動きを止めたときは元絵そのままが出る
   ============================================================ */
.r09{display:block;width:100%;height:auto}
@keyframes r09-sway{0%,100%{translate:0 0}50%{translate:0 -2.4px}}
.r09{animation:r09-sway 4300ms ease-in-out -1700ms infinite}
@keyframes r09-blink{0%,93.4%{scale:1 1}94.8%,96.0%{scale:1 0.42}97.4%,100%{scale:1 1}}
.r09-eye{animation:r09-blink 5300ms linear -1100ms infinite}
@keyframes r09-talk{0%{scale:1 0.18} 6%{scale:1 0.94} 13%{scale:1 0.42} 19%{scale:1 0.16} 26%{scale:1 0.58} 33%{scale:1 0.22} 40%{scale:1 0.88} 47%{scale:1 0.36} 54%{scale:1 0.15} 61%{scale:1 0.66} 69%{scale:1 0.26} 76%{scale:1 0.96} 83%{scale:1 0.44} 90%{scale:1 0.2} 95%{scale:1 0.54} 100%{scale:1 0.18}}
.r09.is-talking .r09-mouth{animation:r09-talk 1130ms linear infinite}

.r10{display:block;width:100%;height:auto}
@keyframes r10-sway{0%,100%{translate:0 0}50%{translate:0 -2.2px}}
.r10{animation:r10-sway 5100ms ease-in-out -3300ms infinite}
@keyframes r10-blink{0%,93.4%{scale:1 1}94.8%,96.0%{scale:1 0.4}97.4%,100%{scale:1 1}}
.r10-eye{animation:r10-blink 6100ms linear -3900ms infinite}
@keyframes r10-talk{0%{scale:1 0.16} 7%{scale:1 0.88} 14%{scale:1 0.38} 21%{scale:1 0.2} 27%{scale:1 0.62} 34%{scale:1 0.17} 41%{scale:1 0.92} 49%{scale:1 0.46} 56%{scale:1 0.22} 63%{scale:1 0.74} 70%{scale:1 0.19} 77%{scale:1 0.9} 85%{scale:1 0.4} 91%{scale:1 0.15} 96%{scale:1 0.6} 100%{scale:1 0.16}}
.r10.is-talking .r10-mouth{animation:r10-talk 1010ms linear infinite}

.r11{display:block;width:100%;height:auto}
@keyframes r11-sway{0%,100%{translate:0 0}50%{translate:0 -2.7px}}
.r11{animation:r11-sway 3800ms ease-in-out -600ms infinite}
@keyframes r11-blink{0%,93.4%{scale:1 1}94.8%,96.0%{scale:1 0.38}97.4%,100%{scale:1 1}}
.r11-eye{animation:r11-blink 4500ms linear -2600ms infinite}
@keyframes r11-talk{0%{scale:1 0.2} 5%{scale:1 0.9} 12%{scale:1 0.46} 18%{scale:1 0.15} 25%{scale:1 0.55} 32%{scale:1 0.24} 39%{scale:1 0.86} 46%{scale:1 0.32} 53%{scale:1 0.18} 60%{scale:1 0.7} 67%{scale:1 0.28} 74%{scale:1 0.94} 82%{scale:1 0.38} 89%{scale:1 0.17} 95%{scale:1 0.62} 100%{scale:1 0.2}}
.r11.is-talking .r11-mouth{animation:r11-talk 1210ms linear infinite}

/* 動きを減らす設定の人には全部止める。止めた状態 = 元絵そのまま。 */
@media (prefers-reduced-motion: reduce){
  .r09,.r09 *,.r09 *::before,.r09 *::after,
  .r10,.r10 *,.r10 *::before,.r10 *::after,
  .r11,.r11 *,.r11 *::before,.r11 *::after{
    animation:none !important;transition:none !important}
}

/* 本文の部品 9: 窓口の要点(番号・受付時間・料金・公式サイト)
   ★数字はここでしか出さない。公式ページで 1 文字ずつ照合した値だけを置く。
   ★dt / dd の 2 列は狭い画面で 1 列に落とす。番号は折り返させない。 */
.doc-desk{background:var(--cream);border:1px solid var(--line2);border-radius:26px;
  padding:clamp(22px,2.6vw,34px) clamp(22px,2.8vw,36px);display:grid;gap:15px}
.doc-desk h3{font-size:var(--h4);line-height:1.6;color:var(--ink)}
.doc-desk dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px 20px;
  font-size:1.0625rem;line-height:1.85;margin:0}
.doc-desk dt{font-weight:700;color:var(--coral-t);white-space:nowrap}
.doc-desk dd{min-width:0;margin:0}
.doc-desk .num{display:block;font-family:var(--en);font-size:var(--h3);font-weight:600;
  letter-spacing:.03em;line-height:1.35;color:var(--ink)}
@media(max-width:600px){
  .doc-desk dl{grid-template-columns:minmax(0,1fr);gap:4px 0}
  .doc-desk dt{margin-top:12px}
}

/* 本文の部品 10: いつの値かを書く札。窓口を載せたページには必ず置く。 */
.doc-stamp{background:var(--mist);border-radius:22px;
  padding:clamp(16px,1.9vw,22px) clamp(18px,2.1vw,26px);
  font-size:1rem;line-height:1.9;color:var(--muted)}
.doc-stamp b{color:var(--ink)}

/* 窓口の番号を箇条書きのカードの中に置くとき。器が小さいので 1 段落とす。 */
.doc-cards .num{display:block;font-family:var(--en);font-size:var(--h4);font-weight:600;
  letter-spacing:.03em;line-height:1.5;color:var(--ink)}

/* 固有名詞の途中で折り返させない札。
   ★word-break:auto-phrase は「よりそいホットライン」を より|そい で割る(実測)。
     割られると別の語に見える。割ってはいけない最小の単位だけを包む。 */
.nb{word-break:keep-all}

/* いつの値かを書く札の中のリンクにも、色と下線を戻す。
   ★実測: .doc-body p a / li a / h3 a だけでは div 直下の a に当たらず、
     地の文と同じ色・下線なしになる = リンクに見えない。
     「最新は公式サイトで」の行がまさにそれだった。 */
.doc-body .doc-stamp a{color:var(--orange-t);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:.28em;text-decoration-color:#a4430f66}
@media(hover:hover){
  .doc-body .doc-stamp a{transition:color .3s ease,text-decoration-color .3s ease}
  .doc-body .doc-stamp a:hover{color:var(--coral-t);text-decoration-color:var(--coral)}
}