/* 受賞水準への改善サンプル（2026-10-01）。site.css の上に重ねる。文言・書体・配色の基調は変えない。
   採否を選べるよう、改善を15の部品に分け、URL の ?off=名前,名前 で1つずつ外せる（html に off-名前 が付く）。
   名前: rings fiber pointer ripple hour glyph depth（表紙）／thread reveal lead phrase hover（章）／fab（スマホ）／detail（細部）。
   採用が決まったら、外す部品のコードを消して再ZIPする。常に効くのは「是正」（コントラスト・ルビ・タップ領域）のみ。 */

:root {
  /* 文字に使う金。装飾の線は従来の --gold のまま、文字だけ紙の上で4.5:1を超える濃さにする。 */
  --gold-text: #7a5e2a;
  --gold-soft: rgba(156, 127, 67, .5);
}

/* ── 是正（常に効く）: コントラスト・ルビ・タップ領域 ── */
.vertical-lettering em { color: var(--gold-text); }
.cover rt, .vertical-lettering rt, .prose .signature rt { font-size: 11px; }
/* 概要表の電話リンク: 見た目は変えず、押せる範囲だけ縦に広げる。 */
.spec a { position: relative; }
.spec a::before { content: ""; position: absolute; inset: -12px -8px; }

/* ════════ thread: 読み進みの糸 ════════
   PC（紙の束）: 右列の縦線に金の糸が伸び、章の目盛り（細い輪）が現在地を示す。それ以外: 画面の上端に読み進みの細い金の線。 */
.thread { display: none; }
/* 金の絹糸: ごく細かい撚り目（3pxごとの、ほとんど気づかない明暗）と、上から下へ深まる金。ときどき淡い光沢が糸を流れ落ちる。
   伸びは引き伸ばさず（撚り目が伸び縮みしないよう）、上から順に見せる。 */
:root {
  --silk-twist: repeating-linear-gradient(to bottom, rgba(255, 244, 214, .16) 0, rgba(255, 244, 214, 0) 1.5px, rgba(255, 244, 214, .16) 3px);
  --silk-gold: linear-gradient(to bottom, #b4924f, var(--gold) 60%, #8f7038);
}
.thread-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background:
    linear-gradient(to bottom, rgba(255, 246, 222, 0), rgba(255, 246, 222, .95) 50%, rgba(255, 246, 222, 0)) 0 -200px / 1px 200px no-repeat,
    var(--silk-twist), var(--silk-gold);
  clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0);
  animation: silk-sheen 8s var(--ease) infinite;
}
@keyframes silk-sheen {
  from { background-position: 0 -200px, 0 0, 0 0; }
  55%, to { background-position: 0 calc(100% + 200px), 0 0, 0 0; }
}
/* 糸の先: いま読んでいる位置に、柔らかな金のにじみ（糸がそこまで紡がれてきた先端）。 */
.thread::after {
  content: ""; position: absolute; left: -3px; width: 7px; height: 34px; pointer-events: none;
  top: calc(var(--p, 0) * 100%); transform: translateY(-100%);
  background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(214, 178, 105, .5), rgba(214, 178, 105, 0) 70%);
}
/* 章の目盛り＝結び玉: ごく細い輪の中に、小さな金の芯。中心は縦線（幅1px）の真上に置く。
   読み終えた章では輪が金になり芯が灯る。いまの章では輪が少し大きく、到着の瞬間に光の輪が一度だけ広がり、その後ゆっくり呼吸する。 */
/* ●はページごとに育つ: 1つ目は外の輪だけ、2つ目から内側に細い輪が1本ずつ加わり（最後の頁で4重）、大きさも少しずつ増す。
   内側の輪の色は --ring-c で外の輪と同じように、読み終えた章・いまの章で金に変わる。 */
@property --ring-c { syntax: '<color>'; inherits: true; initial-value: rgba(156, 127, 67, .55); }
.tick {
  --d: 11px; --ring-c: rgba(156, 127, 67, .55);
  position: absolute; left: .5px; top: calc(var(--at, 0) * 100%); width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); box-sizing: border-box;
  border: 1px solid var(--ring-c); border-radius: 50%; background: var(--paper);
  transition: --ring-c .8s var(--ease), transform .7s var(--ease-out);
}
.tick:nth-of-type(2) { --d: 14px; background: radial-gradient(circle, transparent 0, transparent 3.15px, var(--ring-c) 3.75px, var(--ring-c) 4.25px, transparent 4.85px), var(--paper); }
.tick:nth-of-type(3) { --d: 18px; background: radial-gradient(circle, transparent 0, transparent 2.65px, var(--ring-c) 3.25px, var(--ring-c) 3.75px, transparent 4.35px, transparent 5.15px, var(--ring-c) 5.75px, var(--ring-c) 6.25px, transparent 6.85px), var(--paper); }
.tick:nth-of-type(4) { --d: 22px; background: radial-gradient(circle, transparent 0, transparent 2.15px, var(--ring-c) 2.75px, var(--ring-c) 3.25px, transparent 3.85px, transparent 4.65px, var(--ring-c) 5.25px, var(--ring-c) 5.75px, transparent 6.35px, transparent 7.15px, var(--ring-c) 7.75px, var(--ring-c) 8.25px, transparent 8.85px), var(--paper); }
.tick::before { content: ""; position: absolute; inset: -18px; }
.tick::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e3c98f, var(--gold) 60%, #7f6230);
  transform: scale(0); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1);   /* わずかに弾んで定まる */
}
.tick.is-past { --ring-c: var(--gold); }
.tick.is-past::after { transform: scale(1); }
.tick.is-here { transform: scale(1.3); --ring-c: var(--gold); animation: tick-arrive 1.6s var(--ease-out), tick-breathe 5s var(--ease) 1.6s infinite alternate; }
.tick.is-here::after { transform: scale(1.35); }
.tick:hover { --ring-c: var(--gold); transform: scale(1.18); }
.tick.is-here:hover { transform: scale(1.4); }
.tick:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }
@keyframes tick-arrive { from { box-shadow: 0 0 0 0 rgba(176, 140, 70, .45); } to { box-shadow: 0 0 0 12px rgba(176, 140, 70, 0); } }
@keyframes tick-breathe { from { box-shadow: 0 0 0 2px rgba(156, 127, 67, .06); } to { box-shadow: 0 0 0 6px rgba(156, 127, 67, .13); } }
.progress {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform-origin: left center; transform: scaleX(var(--p, 0)); opacity: .9;
}
@media (min-width: 1024px) and (min-height: 640px) {
  html.has-motion:not(.no-sheets) .thread { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
  html.has-motion:not(.no-sheets) .progress { display: none; }
}
html.off-thread .thread, html.off-thread .progress { display: none !important; }
/* 表紙で止まっている間は、縦線と目盛りと右列の花を見せず、大きな輪だけを主役にする。
   下へスクロールし始めると（motion.js が html に is-scrolled を付ける）、糸が静かに現れ、花がふわりと浮き上がる。 */
@media (min-width: 1024px) and (min-height: 640px) {
  html.has-motion:not(.no-sheets) .spine::before,
  html.has-motion:not(.no-sheets) .thread { transition: opacity 1.4s var(--ease); }
  html.has-motion:not(.no-sheets) .badge-study { transition: opacity 1.6s var(--ease), translate 1.8s var(--ease-out), visibility 0s; }
  html.has-motion:not(.no-sheets):not(.is-scrolled) .spine::before,
  html.has-motion:not(.no-sheets):not(.is-scrolled) .thread { opacity: 0; }
  html.has-motion:not(.no-sheets):not(.is-scrolled) .thread { pointer-events: none; }
  /* 花は表紙では見せない（うっすら残すと「消えかけ」に見えるため）。隠れている間はキーボードでも選ばれない。 */
  html.has-motion:not(.no-sheets):not(.is-scrolled) .badge-study {
    opacity: 0; translate: 0 14px; visibility: hidden;
    transition: opacity 1.2s var(--ease), translate 1.4s var(--ease-out), visibility 0s linear 1.2s;
  }
}

/* ════════ silk: 横線も縦線と同じ「金の絹糸」の質感にそろえる ════════
   表紙の短い金の線・章見出しの金の線・電話番号の下線・「地図で場所を見る」の下線。
   電話番号と地図の下線は、現れた時と触れた時に、淡い光沢が左から右へ一度だけ流れる。 */
:root {
  --silk-twist-x: repeating-linear-gradient(to right, rgba(255, 244, 214, .16) 0, rgba(255, 244, 214, 0) 1.5px, rgba(255, 244, 214, .16) 3px);
  --silk-gold-x: linear-gradient(to right, #b4924f, var(--gold) 60%, #8f7038);
  --silk-sheen-x: linear-gradient(to right, rgba(255, 246, 222, 0), rgba(255, 246, 222, .95) 50%, rgba(255, 246, 222, 0));
}
html:not(.off-detail) .cover .hairline { background: var(--silk-twist-x), var(--silk-gold-x); }
@media (min-width: 821px) {
  html:not(.off-detail) .chapter-title::before { background: var(--silk-twist), var(--silk-gold); }
}
@media (max-width: 820px) {
  html:not(.off-detail) .chapter-title::after {
    background: var(--silk-twist-x), linear-gradient(90deg, var(--gold), var(--rule) 24%, transparent);
  }
}
html:not(.off-detail) .closing .tel::after {
  background: var(--silk-sheen-x) -140px 0 / 140px 1px no-repeat, var(--silk-twist-x), var(--silk-gold-x);
}
html.has-motion:not(.off-detail) .closing.is-reached .tel::after { animation: silk-sheen-x 1.8s var(--ease) 1.7s; }
html:not(.off-detail) .closing .tel:hover::after,
html:not(.off-detail) .closing .tel:focus-visible::after { animation: silk-sheen-x-touch 1.4s var(--ease); }
html:not(.off-detail) .closing .map {
  border-bottom-color: transparent;
  background: var(--silk-sheen-x) -100px 100% / 100px 1px no-repeat,
              var(--silk-twist-x) 0 100% / 100% 1px no-repeat,
              var(--silk-gold-x) 0 100% / 100% 1px no-repeat;
}
html:not(.off-detail) .closing .map:hover,
html:not(.off-detail) .closing .map:focus-visible { border-bottom-color: transparent; animation: silk-sheen-map 1.2s var(--ease); }
@keyframes silk-sheen-x { from { background-position: -140px 0, 0 0, 0 0; } to { background-position: calc(100% + 140px) 0, 0 0, 0 0; } }
@keyframes silk-sheen-x-touch { from { background-position: -140px 0, 0 0, 0 0; } to { background-position: calc(100% + 140px) 0, 0 0, 0 0; } }
@keyframes silk-sheen-map { from { background-position: -100px 100%, 0 100%, 0 100%; } to { background-position: calc(100% + 100px) 100%, 0 100%, 0 100%; } }

/* ════════ reveal: 章内の登場（has-motion の時だけ。HTML の data-reveal が対象） ════════
   下から10pxだけ静かに立ち上がる。0.9秒以内に読める濃さになり、文字を長く薄いままにしない。 */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}
html.has-motion:not(.off-reveal) [data-reveal] { opacity: 0; }
html.has-motion:not(.off-reveal) [data-reveal].is-in { animation: rise .9s var(--ease-out) var(--d, 0s) both; }
html.has-motion:not(.off-reveal) [data-reveal].is-done { opacity: 1; animation: none; }
/* 概要表は行そのものでなく、行の中の2つのセルを動かす（表の行に変形を掛けると描画が不安定な環境があるため）。 */
html.has-motion:not(.off-reveal) .spec tr[data-reveal] { opacity: 1; border-bottom-color: transparent; transition: border-color 1.2s var(--ease) .1s; }
html.has-motion:not(.off-reveal) .spec tr[data-reveal].is-in,
html.has-motion:not(.off-reveal) .spec tr[data-reveal].is-done { animation: none; border-bottom-color: var(--rule); }
html.has-motion:not(.off-reveal) .spec tr[data-reveal] > * { opacity: 0; }
html.has-motion:not(.off-reveal) .spec tr[data-reveal].is-in > * { animation: rise .9s var(--ease-out) var(--d, 0s) both; }
html.has-motion:not(.off-reveal) .spec tr[data-reveal].is-in > :last-child { animation-delay: calc(var(--d, 0s) + .08s); }
html.has-motion:not(.off-reveal) .spec tr[data-reveal].is-done > * { opacity: 1; animation: none; }
/* 業務の行: 区切り線が左から引かれる。 */
html.has-motion:not(.off-reveal) .works li {
  border-bottom-color: transparent;
  background: linear-gradient(var(--gold), var(--gold)) left bottom / 0 1px no-repeat,
              linear-gradient(var(--rule), var(--rule)) left bottom / 0 1px no-repeat;
  transition: background-size 1.2s var(--ease-out) .1s;
}
html.has-motion:not(.off-reveal) .works li.is-in,
html.has-motion:not(.off-reveal) .works li.is-done { background-size: 0 1px, 100% 1px; }
html.has-motion:not(.off-reveal) .works li.is-done { transition: background-size .9s var(--ease-out); }

/* ════════ hover: 触れた時の応答 ════════
   業務の行: 区切り線が左から金に染まる。概要表の行: 区切り線が金を帯びる。電話番号: 字間がほんの少し開く。 */
html:not(.off-hover) .works li {
  background: linear-gradient(var(--gold), var(--gold)) left bottom / 0 1px no-repeat;
  transition: background-size .9s var(--ease-out);
}
html:not(.off-hover) .works li:hover, html:not(.off-hover) .works li:focus-within { background-size: 100% 1px; }
html:not(.off-hover) .works li h3, html:not(.off-hover) .works li p { transition: color .5s var(--ease); }
html:not(.off-hover) .works li:hover h3 { color: var(--green-d); }
html:not(.off-hover) .works li:hover p { color: var(--body); }
html.has-motion:not(.off-reveal):not(.off-hover) .works li.is-done:hover,
html.has-motion:not(.off-reveal):not(.off-hover) .works li.is-done:focus-within { background-size: 100% 1px, 100% 1px; }
html:not(.off-hover) .spec tr { transition: border-color .6s var(--ease); }
html:not(.off-hover) .spec tr:hover,
html.has-motion:not(.off-reveal):not(.off-hover) .spec tr.is-done:hover { border-bottom-color: var(--gold-soft); }
.closing .tel { transition: font-size 1.05s var(--ease-out), margin 1.05s var(--ease-out), letter-spacing .9s var(--ease-out), color .3s var(--ease); }
html:not(.off-hover) .closing .tel:hover, html:not(.off-hover) .closing .tel:focus-visible { letter-spacing: .125em; }

/* ════════ glyph: 表紙見出しの1字ずつの登場（choreo.js が1字ずつ span に包む） ════════
   墨が紙に滲むように、わずかにぼけた状態から1字ずつ定まる。外すと従来の「3行が順に現れる」登場になる。 */
html.has-motion:not(.off-glyph) .cover .h1-line { opacity: 1; transform: none; transition: none; }
html.has-motion:not(.off-glyph) .cover .ch {
  display: inline-block; opacity: 0; transform: translate3d(0, .42em, 0); filter: blur(.14em);
  transition: opacity 1.2s var(--ease-out) calc(var(--i, 0) * 62ms + 120ms),
              transform 1.5s var(--ease-out) calc(var(--i, 0) * 62ms + 120ms),
              filter 1.2s var(--ease-out) calc(var(--i, 0) * 62ms + 120ms);
}
html.has-motion.is-loaded:not(.off-glyph) .cover .ch { opacity: 1; transform: none; filter: none; }
html.has-motion:not(.off-glyph) .cover .sub { transition-delay: 1.5s; }
html.has-motion:not(.off-glyph) .cover .hairline { transition-delay: 1.3s; }
html.has-motion:not(.off-glyph) .cover .cover-nav { transition-delay: 1.8s; }

/* ════════ depth: 表紙の奥行き ════════
   次の紙が重なる間、表紙のコピーはゆっくり上へ退き（紙より遅い）、輪は昇りながら淡くなる（輪は background.js）。 */
@media (min-width: 1024px) and (min-height: 640px) {
  html.has-motion:not(.no-sheets):not(.off-depth) .cover h1,
  html.has-motion:not(.no-sheets):not(.off-depth) .cover .hairline,
  html.has-motion:not(.no-sheets):not(.off-depth) .cover .sub { translate: 0 calc(var(--shade, 0) * -56px); }
}

/* ════════ fab: スマホの電話ボタン ════════
   読み進める間だけ右下に現れる。電話番号の最終ページが画面に出ている間・表紙の間は隠れる。 */
.call-fab { display: none; }
@media (max-width: 820px) {
  .call-fab {
    display: grid; place-items: center; position: fixed; z-index: 40;
    right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
    width: 56px; height: 56px; border-radius: 50%; color: var(--green); text-decoration: none;
    background: rgba(247, 245, 239, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 0 0 1px var(--gold-soft), 0 12px 26px -16px rgba(21, 41, 31, .5);
    opacity: 0; transform: translate3d(0, 12px, 0) scale(.92); pointer-events: none;
    transition: opacity .5s var(--ease), transform .7s var(--ease-out), box-shadow .3s var(--ease);
  }
  .call-fab::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(156, 127, 67, .26); pointer-events: none; }
  .call-fab:active { box-shadow: 0 0 0 1px var(--gold), 0 6px 16px -12px rgba(21, 41, 31, .5); }
  .call-fab:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
  html[data-chapter]:not([data-chapter="top"]):not([data-chapter="contact"]) .call-fab { opacity: 1; transform: none; pointer-events: auto; }
}
html.off-fab .call-fab { display: none !important; }

/* ════════ lead: 書体の強弱 ════════
   ごあいさつの最初の1文を、本文（17px）より一段大きい24px・緑で置く。章の入口で視線が止まり、続く本文が読み物として落ち着く。 */
html:not(.off-lead) .prose .lead {
  margin-bottom: 1.9em; font-size: 24px; line-height: 2; letter-spacing: .07em; color: var(--green);
  text-align: left; text-justify: auto;
}
@media (max-width: 820px) { html:not(.off-lead) .prose .lead { font-size: 19px; line-height: 2; margin-bottom: 1.7em; } }
@media (min-width: 1024px) and (min-height: 640px) and (max-height: 799px) { html.has-motion:not(.no-sheets):not(.off-lead) .prose .lead { margin-bottom: 1.4em; } }

/* ════════ phrase: 日本語の改行（対応ブラウザのみ。非対応は従来どおり） ════════
   文節の途中（「ご／相談」など）で行が切れないようにし、行末の1字残りも避ける。 */
html:not(.off-phrase) .prose p, html:not(.off-phrase) .works p,
html:not(.off-phrase) .map-caption, html:not(.off-phrase) .closing .hours { word-break: auto-phrase; text-wrap: pretty; }
html:not(.off-phrase) .prose .lead, html:not(.off-phrase) .cover h1 { text-wrap: balance; }
/* 文節で折り返す時は両端揃えにしない。行が文節の切れ目で短く終わると、両端揃えが字間を大きく空けてしまう（スマホ幅で目立つ）。 */
@supports (word-break: auto-phrase) {
  html:not(.off-phrase) .prose p:not(.signature) { text-align: start; text-justify: auto; }
}

/* ════════ detail: 細部 ════════
   選択した文字の色・細いスクロールバー・押した時の手応え。 */
html:not(.off-detail) ::selection { background: rgba(156, 127, 67, .24); color: var(--green-d); }
html:not(.off-detail) { scrollbar-width: thin; scrollbar-color: rgba(156, 127, 67, .55) var(--paper); }
html:not(.off-detail) .cover-nav a:active, html:not(.off-detail) .vertical-brand:active { opacity: .7; }
html:not(.off-detail) .closing .tel:active, html:not(.off-detail) .closing .map:active { opacity: .75; }

/* ── 印刷・動きを減らす設定 ── */
@media print {
  [data-reveal], [data-reveal] > * { opacity: 1 !important; animation: none !important; transform: none !important; }
  .progress, .call-fab, .thread { display: none !important; }
  .cover .ch { opacity: 1 !important; transform: none !important; filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-preview) .thread-fill, html:not(.motion-preview) .progress { transition: none; }
  html:not(.motion-preview) .thread-fill, html:not(.motion-preview) .tick,
  html:not(.motion-preview) .closing .tel::after,
  html:not(.motion-preview) .closing .map { animation: none !important; }}

/* ════════ target: 押しやすさ ════════
   概要表の電話番号は文字の高さ（約26px）しか押せる範囲がなかった。見た目と行の高さは変えず、
   透明な範囲を上下に10pxずつ広げて46px（スマホで押しやすい44px以上）にする。 */
.spec a { position: relative; }
.spec a::after { content: ""; position: absolute; inset: -10px -6px; }

/* ════════ tuck: 電話ボタンの控え ════════
   スマホで下へ読み進めている間は電話ボタンを控え、本文の行末を隠さない。少し上へ戻すとすぐ現れる（?off=tuck で常に表示）。 */
@media (max-width: 820px) {
  html[data-chapter].fab-tucked:not(.off-tuck) .call-fab { opacity: 0; transform: translate3d(0, 12px, 0) scale(.92); pointer-events: none; }
}

/* ════════ scale: 文字の段（白銀比） ════════
   PCと同じ白銀比の段（12・14・17・20・24。隣の段は約1.19倍、2段で√2倍）にスマホもそろえる。
   スマホの本文は、ごあいさつ（16px）と業務・概要（17px）で違っていたので17pxに統一する。章の見出し24px・小見出し20px・
   見出し文20pxで強弱をはっきりさせる。段から外れていた15px（目次・署名）は14pxへ。?off=scale で従来の大きさ。 */
html:not(.off-scale) .prose p.signature, html:not(.off-scale) .vertical-lettering em { font-size: 14px; }
@media (max-width: 820px) {
  html:not(.off-scale) .chapter-title { font-size: 24px; letter-spacing: .16em; }
  html:not(.off-scale) .prose p { font-size: 17px; line-height: 2; }
  html:not(.off-scale) .works h3 { font-size: 20px; letter-spacing: .14em; }
  html:not(.off-scale) .cover .sub { font-size: 20px; }
  html:not(.off-scale) .cover-nav a { font-size: 14px; }
  html:not(.off-lead):not(.off-scale) .prose .lead { font-size: 20px; }
}
@media (max-width: 350px) {
  html:not(.off-scale) .cover .sub { font-size: 17px; }
  html:not(.off-scale) .cover .kicker { font-size: 12px; }
}

/* ════════ close: 最後の頁の締め方（光の回帰） ════════
   表紙で迎えた窓の光（陽だまり）が、最後の頁にも同じ向き（右上）から静かに差し込む。水の輪は描かない（水は静まり、光だけが残る）。
   色は訪れた人の現地時刻で変わる（motion.js が --eve=0〜1 を渡す。朝は白く、夕方は金色を帯びる）。円や線は足さない。
   従来の中央の楕円の光（どの頁にもありそうな周辺減光）は使わない。?off=close で従来どおり。 */
html:not(.off-close) .closing { position: relative; isolation: isolate; }
html.has-motion:not(.no-sheets):not(.off-close) .closing { background-image: var(--grain); }
html:not(.off-close) .closing::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 44%; top: -8%; width: 52%; height: 80%; border-radius: 18% / 22%;
  background: color-mix(in srgb, rgb(255, 251, 240) calc(100% - var(--eve, 0) * 100%), rgb(255, 240, 212));
  filter: blur(60px); transform: skewX(-18deg) rotate(-4deg); opacity: .95;
}
@media (max-width: 820px) {
  /* スマホでは最後の頁が画面の途中から始まるので、光を上端から離し、紙の縁で光が水平に切れて見えないようにする。 */
  html:not(.off-close) .closing::before { left: 34%; top: 16%; width: 70%; height: 50%; filter: blur(40px); }
}
html.has-motion:not(.off-close) .closing::before { opacity: 0; transition: opacity 2.8s var(--ease) .4s; }
html.has-motion:not(.off-close) .closing.is-reached::before { opacity: .95; }

/* 奥付の事務所名から先頭へ戻れる（読み終えた人の帰り道。文字は増やさない）。押せる範囲は上下に広げる。 */
.footer-inner .name a { position: relative; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.footer-inner .name a::after { content: ""; position: absolute; inset: -14px -8px; }
.footer-inner .name a:hover { border-bottom-color: var(--gold); }
.footer-inner .name a:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }

/* ════════ focus: 見えない部品をキーボードで選ばせない ════════
   花と同じく、表紙で隠している縦線と目盛り、隠れている間の電話ボタンは、キーボードの順番から外す（visibility）。
   薄れる動きはそのまま（visibility は薄れ終わってから切り替え、現れる時はすぐ戻す）。 */
@media (min-width: 1024px) and (min-height: 640px) {
  html.has-motion:not(.no-sheets) .thread { transition: opacity 1.4s var(--ease), visibility 0s; }
  html.has-motion:not(.no-sheets):not(.is-scrolled) .thread { visibility: hidden; transition: opacity 1.4s var(--ease), visibility 0s linear 1.4s; }
}
@media (max-width: 820px) {
  .call-fab { visibility: hidden; transition: opacity .5s var(--ease), transform .7s var(--ease-out), box-shadow .3s var(--ease), visibility 0s linear .5s; }
  html[data-chapter]:not([data-chapter="top"]):not([data-chapter="contact"]) .call-fab { visibility: visible; transition-delay: 0s; }
  html[data-chapter].fab-tucked:not(.off-tuck) .call-fab { visibility: hidden; transition-delay: 0s, 0s, 0s, .5s; }
}