/* 諏澤克行税理士事務所 HP — 紙の束版・光の微調整（2026-09-23）
   微調整: 表紙に窓から差す朝の光（background.js）。最後の頁では、光の帯が右列を下から上へ撫で、通った所から溶けるように消える。
   従来の上書き用CSS 8枚を1枚に統合。文言・書体・配色は従来のまま。
   基本は通常の縦長ページ。PC（幅1024px以上・高さ640px以上）で動きが有効な時だけ、
   表紙と各章を1枚ずつの紙として重ねる（スクロールは奪わない）。 */

@font-face {
  font-family: "Office Soft Mincho Kana";
  src: url("fonts/OfficeSoftMinchoKana-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #1f3d33;
  --green-d: #15291f;
  --ink: #161815;
  --body: #26332b;
  --mute: #505b51;
  --paper: #f7f5ef;
  --band: #e4e5dc;
  --rule: #ddd8ca;
  --gold: #9c7f43;
  --mincho: "Office Soft Mincho Kana", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  /* 格子: 枠1120px・左右余白56px・右列150px・本文との間64px・見出し列120px・本文640px・項目名180px
     文字: 本文17pxを基準に白銀比（√2）とその半段（⁴√2≒1.19）で段を組む: 12 / 14 / 17 / 20 / 24 / 34 / 48 / 57 */
  --frame: 1120px;
  --pad: 56px;
  --spine: 150px;
  --gutter: 64px;
  --title: 120px;
  --measure: 640px;
  --label: 180px;
  --footer-h: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── 基本 ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 2% 30%, rgba(170, 183, 168, .22), transparent 38%),
                    radial-gradient(ellipse at 98% 78%, rgba(188, 176, 141, .2), transparent 35%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--mincho);
  font-size: 16px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: .04em;
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
/* 紙の粒子。画像を読まずCSSだけで質感を出す。 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain);
}
a { color: inherit; }
a:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
/* 品書きで移った先の章は、読み上げのためにフォーカスだけ移す（枠は出さない）。 */
.sheet[tabindex="-1"]:focus { outline: none; }
.nw { white-space: nowrap; }
h1, h2, h3 { font-weight: 400; }

#ambient-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; visibility: hidden; }
#ambient-3d[data-ready="true"] { visibility: visible; }

/* ── 表紙 ─────────────────────────────── */
.cover { position: relative; z-index: 1; }
.cover-inner { position: relative; }
.cover .kicker { margin: 0; color: var(--green); }
.cover h1 { margin: 0; color: var(--green); }
.h1-line { display: inline-block; }
.cover .hairline { width: 52px; height: 1px; background: var(--gold); }
.cover .sub { margin: 0; color: var(--green); }
.cover rt { font-size: 11px; letter-spacing: .08em; color: var(--mute); }
.cover-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--green); text-decoration: none;
}
.cover-nav a::after {
  content: ""; position: absolute; left: 0; right: .1em; bottom: 9px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease);
}
.cover-nav a:hover::after, .cover-nav a:focus-visible::after { transform: scaleX(1); }

/* ── 右列（縦書きの署名と輪） ─────────── */
/* 列の枠そのものはクリックを受けない（下にある地図や×を覆わない）。反応するのは中の社名リンクと輪だけ。 */
.spine { display: none; pointer-events: none; }
.spine a, .spine .badge-study { pointer-events: auto; }
.spine.is-quiet a, .spine.is-quiet .badge-study { pointer-events: none; }
.vertical-lettering {
  writing-mode: vertical-rl; display: flex; align-items: center; flex-shrink: 0;
  color: var(--ink); transition: opacity .55s var(--ease);
}
.vertical-brand { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
.vertical-brand:hover { color: var(--green); }
.vertical-lettering rt { font-size: 10px; letter-spacing: .12em; color: var(--mute); }
.vertical-lettering em { font-style: normal; color: var(--gold); font-size: .62em; letter-spacing: .5em; }
.badge-study { flex-shrink: 0; display: none; }
.badge-study canvas { display: block; width: 100%; height: 100%; }
.badge-study canvas:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; border-radius: 50%; }
html.ring-none .badge-study, html.ring-none .mobile-art-slot { display: none !important; }

/* ── 章 ───────────────────────────────── */
main { position: relative; z-index: 2; }
.sheet { position: relative; }
.chapter-title { margin: 0; color: var(--green); }

.prose p {
  margin: 0 0 1.5em; font-size: 17px; line-height: 2.15; color: var(--body);
  text-align: justify; text-justify: inter-character; line-break: strict;
}
.prose .signature {
  margin: 2.6em 0 0; text-align: right; text-align-last: right;
  font-size: 15px; letter-spacing: .22em; color: var(--mute);
}
.prose .signature rt { font-size: 10px; letter-spacing: .08em; }

.works { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.works li { border-bottom: 1px solid var(--rule); }
.works h3 { margin: 0; color: var(--green); }
.works p { margin: 0; font-size: 17px; line-height: 2; color: var(--mute); letter-spacing: .05em; line-break: strict; }

.spec { width: 100%; border-collapse: collapse; border-top: 1px solid var(--rule); }
.spec tr { border-bottom: 1px solid var(--rule); }
.spec th, .spec td { text-align: left; vertical-align: baseline; }
.spec th { font-weight: 400; color: var(--mute); }
.spec td { font-size: 17px; letter-spacing: .05em; }
.spec a { text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .3s var(--ease); }
.spec a:hover { border-bottom-color: var(--gold); }

/* ── 電話案内 ─────────────────────────── */
.closing { text-align: center; color: var(--green); }
.closing .kicker { margin: 0; font-size: 14px; letter-spacing: .2em; color: var(--mute); }
.closing .tel {
  position: relative; isolation: isolate; display: inline-block;
  font-size: clamp(34px, 4vw, 57px); letter-spacing: .1em; line-height: 1.4;
  color: var(--green); text-decoration: none; padding: 4px 0; min-height: 44px;
}
.closing .tel:hover { color: var(--green-d); }
/* 番号に触れると、中央から金の細線が伸びる。 */
.closing .tel::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 1px; background: var(--gold);
  transition: left .6s var(--ease), right .6s var(--ease);
}
.closing .tel:hover::after, .closing .tel:focus-visible::after { left: 0; right: 0; }
.closing .hours { margin: 0; font-size: 14px; letter-spacing: .06em; color: var(--mute); }
.closing .map-line { margin: 0; }
.closing .map {
  display: inline-block; padding: 14px 2px; min-height: 44px;
  font-size: 14px; letter-spacing: .12em; color: var(--green); text-decoration: none;
  border-bottom: 1px solid var(--gold); transition: color .3s var(--ease), border-color .3s var(--ease);
}
.closing .map:hover { color: var(--green-d); border-bottom-color: var(--green); }

/* ── 地図（最後の頁で、ページを替えずに開く） ── */
/* PC: 地図は1枚の紙として右端の外から滑り込み、電話番号の塊は左の列へ移る（章の紙が下から重なるのと同じ動きを横向きに）。
   スマホ: ボタンの下に開く。 */
.closing { overflow: hidden; }
.closing-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); column-gap: 0; align-items: center;
  width: 100%; max-width: var(--frame); margin: 0 auto; padding: 0 var(--pad);
  transition: grid-template-columns 1.05s var(--ease-out), column-gap 1.05s var(--ease-out);
}
.closing.is-map-open .closing-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 56px; }
.closing-call { min-width: 0; }
.closing .tel { white-space: nowrap; transition: font-size 1.05s var(--ease-out), margin 1.05s var(--ease-out); }
.closing.is-map-open .tel { font-size: clamp(30px, 3.1vw, 44px); }
.map-panel {
  position: relative; min-width: 0; padding-top: 52px;
  transform: translateX(118%);
  transition: transform 1.1s var(--ease-out);
}
.closing.is-map-open .map-panel { transform: none; }
/* 紙: 左の縁に金の細い端と、下の紙へ落ちる淡い影。 */
.map-sheet {
  padding: 18px 18px 14px; background-color: var(--paper); background-image: var(--grain);
  box-shadow: -1px 0 0 rgba(156, 127, 67, .18), -18px 0 38px -22px rgba(21, 41, 31, .26), 0 12px 30px -24px rgba(21, 41, 31, .2);
}
.map-frame { aspect-ratio: 4 / 3; border: 1px solid var(--rule); background: #ebe9e1; }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.4) sepia(.12) contrast(.96); }
.map-caption { margin: 12px 0 0; text-align: left; font-size: 14px; letter-spacing: .06em; }
.map-address { color: var(--green); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .3s var(--ease); }
.map-address:hover { border-bottom-color: var(--gold); }
/* 別タブで開くことを示す、細い斜めの矢印（文字を増やさず線で描く）。 */
.map-address .nw:last-child::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 9px; vertical-align: .15em;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; opacity: .7;
}
.map-close {
  position: absolute; top: 2px; right: -6px; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
}
.map-close::before, .map-close::after {
  content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 1px; background: var(--green);
  transition: background .3s var(--ease);
}
.map-close::before { transform: rotate(45deg); }
.map-close::after { transform: rotate(-45deg); }
.map-close:hover::before, .map-close:hover::after { background: var(--gold); }
.map-close:focus-visible { outline: 1px solid var(--gold); outline-offset: -4px; }
@media (max-width: 820px) {
  .closing-inner {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 0fr; padding: 0;
    transition: grid-template-rows .9s var(--ease-out);
  }
  .closing.is-map-open .closing-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 0; }
  .closing.is-map-open .tel { font-size: clamp(32px, 9vw, 40px); }
  .map-panel { overflow: hidden; min-height: 0; padding-top: 48px; transform: translateY(18px); opacity: 0; transition: transform .9s var(--ease-out), opacity .6s var(--ease); }
  .closing.is-map-open .map-panel { transform: none; opacity: 1; }
  .map-sheet { padding: 12px 12px 10px; box-shadow: 0 -1px 0 rgba(156, 127, 67, .18), 0 -14px 30px -20px rgba(21, 41, 31, .22); }
  .map-frame { aspect-ratio: 4 / 5; }
}

/* ── 奥付 ─────────────────────────────── */
footer { position: relative; z-index: 3; background: var(--band); color: #48544a; }
/* 金線は本文幅に収め、右へ向かって薄れて収束する。 */
footer::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(780px, calc(100% - 80px)); height: 1px;
  background: linear-gradient(90deg, rgba(156, 127, 67, .42), rgba(156, 127, 67, .3) 55%, rgba(156, 127, 67, 0));
}
.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 28px;
  max-width: var(--frame); margin: 0 auto; padding: 24px 28px; text-align: center;
  font-size: 12px; letter-spacing: .14em; line-height: 2.2;
}
.footer-inner p { margin: 0; }
.footer-inner .name { font-size: 14px; letter-spacing: .22em; color: var(--green); }

/* ════════════════════════════════════════
   PC・タブレット（幅821px以上）: 格子で組む
   ════════════════════════════════════════ */
@media (min-width: 821px) {
  .cover { display: flex; align-items: center; min-height: max(100svh, 640px); }
  .cover-inner {
    width: 100%; max-width: var(--frame); margin: 0 auto;
    padding: 72px calc(var(--pad) + var(--spine) + var(--gutter)) 124px var(--pad);
  }
  /* 表紙の事務所名は右列の縦書きが担うため、PCでは重ねて出さない。 */
  .cover .kicker { display: none; }
  .cover-composition, .cover-endorsement, .signature-copy { display: contents; }
  .mobile-art-slot { display: none; }
  .cover h1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.95; letter-spacing: .13em; }
  .cover .hairline { margin: 46px 0 28px; }
  .cover .sub { font-size: 20px; letter-spacing: .14em; line-height: 2.2; }
  .cover .tax-title { margin-right: .3em; }
  /* 目次は本文と別の顔にする: 表紙の最下部、右の縦線の下端と同じ高さに、小さく字間を広げて仕切り線で並べる。 */
  .cover-inner { position: static; }
  .cover-nav {
    position: absolute; bottom: 44px; left: max(var(--pad), calc((100% - var(--frame)) / 2 + var(--pad)));
    display: flex; flex-wrap: wrap; align-items: center; gap: 0;
    padding-top: 10px; border-top: 1px solid var(--rule);
  }
  .cover-nav a { font-size: 14px; letter-spacing: .2em; color: var(--green); }
  .cover-nav a + a::before {
    content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 21px 0 18px;
    background: var(--rule); vertical-align: middle;
  }
  .cover-nav a::after { left: 0; }
  .cover-nav a + a::after { left: 40px; }

  /* 右列。紙の重なりが無い時は表紙の上だけに置く（下へは追従しない）。 */
  .spine {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    position: absolute; z-index: 10; top: 56px;
    right: max(var(--pad), calc((100% - var(--frame)) / 2 + var(--pad)));
    width: var(--spine); height: calc(max(100svh, 640px) - 112px);
    padding-left: 34px;
    /* 最後の紙が上がるにつれて、光の帯が右列を下から上へ撫でる（motion.js が --g=0〜1 と --glow を渡す）。 */
    --lf: clamp(0, calc((var(--g, 0) - .25) / .6), 1);
  }
  /* 縦線: 光の帯と一緒に、下から上へ糸を巻き取るように縮む。 */
  .spine::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule);
    transform-origin: top center; transform: scaleY(calc(1 - var(--g, 0)));
  }
  /* 縦書き: 光の帯が通るのに合わせて、下からぼかして消える（墨が引くように）。 */
  .vertical-lettering {
    font-size: clamp(17px, 2.7vh, 24px); letter-spacing: .42em; opacity: .92;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc((1 - var(--lf)) * 125% - 25%), transparent calc((1 - var(--lf)) * 125%));
    mask-image: linear-gradient(to bottom, #000 calc((1 - var(--lf)) * 125% - 25%), transparent calc((1 - var(--lf)) * 125%));
  }
  /* 輪: 線描版は linework.js が線を巻き戻して消す。立体の輪は光の帯が通る間に薄くなる。 */
  .badge-study { width: min(188px, 21vh); height: min(188px, 21vh); opacity: calc(1 - clamp(0, calc(var(--g, 0) / .35), 1)); }
  html.ring-line .badge-study { opacity: 1; }
  .badge-study.ready { display: block; }
  /* 極細の線描: 線が細いぶん、輪は従来と同じ大きさで見せる。 */
  html.ring-line .badge-study { width: min(196px, 22vh); height: min(196px, 22vh); }

  /* 章の格子: 見出し列＋本文。全章で左の基準線を揃える。 */
  .chapter { padding: 148px 0 0; }
  .sheet-inner {
    display: grid; grid-template-columns: var(--title) minmax(0, var(--measure)); justify-content: start;
    max-width: var(--frame); margin: 0 auto; padding: 0 var(--pad);
  }
  /* 見出しは縦組み。右列の縦書きと呼応し、金の糸から吊る。 */
  .chapter-title {
    position: relative; justify-self: start; writing-mode: vertical-rl;
    font-size: 24px; letter-spacing: .32em; line-height: 1; padding-top: 58px;
  }
  .chapter-title::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 40px;
    background: var(--gold); transform-origin: top center;
  }
  .chapter-body { min-width: 0; }

  .works li {
    display: grid; grid-template-columns: var(--label) minmax(0, 1fr); column-gap: 32px; align-items: baseline;
    padding: 30px 0 28px;
  }
  .works h3 { font-size: 20px; letter-spacing: .14em; line-height: 1.8; }
  .spec { table-layout: fixed; }
  .spec th {
    width: calc(var(--label) + 32px); padding: 21px 32px 21px 0;
    font-size: 14px; letter-spacing: .12em; white-space: nowrap;
  }
  .spec td { padding: 21px 0; }

  .closing { padding: 168px 40px 150px; display: flex; flex-direction: column; align-items: center; }
  .closing .tel { margin: 40px 0 24px; }
  .closing .map-line { margin-top: 56px; }
}

/* 大きな画面（幅1680・高さ960以上）: 比率を保ったまま枠を広げ、キャッチを一段（57px）大きく。 */
@media (min-width: 1680px) and (min-height: 960px) {
  :root { --frame: 1240px; }
  .cover h1 { font-size: 57px; }
}

/* 幅821〜1023px: 本文を少し詰める。 */
@media (min-width: 821px) and (max-width: 1023px) {
  :root { --pad: 44px; --title: 96px; --label: 160px; }
  .cover h1 { font-size: clamp(30px, 3.9vw, 38px); }
}

/* ════════════════════════════════════════
   紙の束（PC・幅1024px以上・高さ640px以上・動きが有効な時）
   章の紙が前の紙の上へ重なる。スクロール量はそのまま。
   ════════════════════════════════════════ */
@media (min-width: 1024px) and (min-height: 640px) {
  html.has-motion:not(.no-sheets) .cover { position: sticky; top: 0; height: 100svh; min-height: 0; }
  html.has-motion:not(.no-sheets) .spine { position: fixed; height: calc(100svh - 112px); }
  /* 光の帯: 温かな白の光が、右列の消えていく前線に沿って下から昇る（motion.js が --g と --glow を渡す）。 */
  html.has-motion:not(.no-sheets) .spine::after {
    content: ""; position: absolute; left: -40px; right: -40px; height: 220px;
    top: calc((1 - var(--g, 0)) * 100% - 110px);
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 249, 232, .95), rgba(255, 244, 214, .55) 45%, rgba(255, 244, 214, 0) 72%);
    mix-blend-mode: screen; opacity: var(--glow, 0); pointer-events: none;
  }
  html.has-motion:not(.no-sheets) .sheet-inner { padding-right: calc(var(--pad) + var(--spine) + var(--gutter)); }
  html.has-motion:not(.no-sheets) .chapter,
  html.has-motion:not(.no-sheets) .closing {
    position: sticky; top: var(--stick, 0px);
    background-color: var(--paper); background-image: var(--grain);
    /* 重なる側の縁: 金の細い端と、下の紙へ落ちる淡い影。 */
    box-shadow: 0 -1px 0 rgba(156, 127, 67, .16), 0 -14px 32px -18px rgba(21, 41, 31, .13);
  }
  html.has-motion:not(.no-sheets) .chapter { min-height: 100svh; padding: clamp(96px, 20vh, 190px) 0 96px; }
  html.has-motion:not(.no-sheets) .closing {
    min-height: calc(100svh - var(--footer-h)); justify-content: center; padding-top: 72px; padding-bottom: 64px;
    background-image: radial-gradient(ellipse 58% 46% at 50% 44%, rgba(255, 253, 246, .85), rgba(255, 253, 246, 0) 72%), var(--grain);
  }
  /* 次の紙が重なるほど、下の紙がわずかに沈む。 */
  html.has-motion:not(.no-sheets) .sheet::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
    background: var(--green-d); opacity: calc(var(--shade, 0) * .05);
  }
  html.has-motion:not(.no-sheets) footer { height: var(--footer-h); }
}
/* 高さ640〜799pxでは行間の余白だけを詰め、1章を1枚に収めやすくする。文字の大きさは変えない。 */
@media (min-width: 1024px) and (min-height: 640px) and (max-height: 799px) {
  html.has-motion:not(.no-sheets) .chapter { padding-top: clamp(72px, 12vh, 96px); padding-bottom: 56px; }
  html.has-motion:not(.no-sheets) .works li { padding: 18px 0 16px; }
  html.has-motion:not(.no-sheets) .spec th, html.has-motion:not(.no-sheets) .spec td { padding-top: 13px; padding-bottom: 13px; }
  html.has-motion:not(.no-sheets) .prose p { margin-bottom: 1.2em; }
}

/* ════════════════════════════════════════
   動き（has-motion の時だけ。本文の文字は動かさない）
   ════════════════════════════════════════ */
/* 表紙: 読み込み後に一度だけ、コピー3行→金線→署名→品書きの順。縦書きは上から筆を下ろすように現れる。 */
html.has-motion .cover .h1-line,
html.has-motion .cover .sub,
html.has-motion .cover .cover-nav,
html.has-motion .cover .kicker {
  opacity: 0; transform: translateY(.45em);
  transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out);
}
html.has-motion .cover .h1-line:nth-child(3) { transition-delay: .14s; }
html.has-motion .cover .h1-line:nth-child(5) { transition-delay: .28s; }
html.has-motion .cover .sub { transition-delay: .8s; }
html.has-motion .cover .cover-nav { transition-delay: 1s; }
html.has-motion .cover .hairline { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease) .6s; }
html.has-motion .vertical-lettering { clip-path: inset(0 0 100% 0); transition: opacity .55s var(--ease), clip-path 1.9s cubic-bezier(.45, .05, .25, 1) .35s; }
html.has-motion.is-loaded .cover .h1-line,
html.has-motion.is-loaded .cover .sub,
html.has-motion.is-loaded .cover .cover-nav,
html.has-motion.is-loaded .cover .kicker { opacity: 1; transform: none; }
html.has-motion.is-loaded .cover .hairline { transform: none; }
html.has-motion.is-loaded .vertical-lettering { clip-path: inset(0 0 0 0); }

/* 章: その紙が手前に来た時、見出しの金の糸が上から垂れる。 */
html.has-motion .chapter-title::before { transform: scaleY(0); transition: transform 1.1s var(--ease) .2s; }
html.has-motion .chapter.is-seen .chapter-title::before { transform: none; }

/* 電話案内: 到達すると番号の下に金線が中央から引かれ、奥から淡い光が一度だけにじむ。 */
html.has-motion .closing .tel::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5.2em; height: 2.2em; margin: -1.1em 0 0 -2.6em;
  border-radius: 50%; opacity: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(156, 127, 67, .2), rgba(156, 127, 67, .06) 60%, transparent);
}
html.has-motion .closing.is-reached .tel::after { left: 0; right: 0; transition-duration: 1.2s; transition-delay: .3s; }
html.has-motion .closing.is-reached .tel::before { animation: call-glow 3.2s var(--ease) .7s 1 both; }
@keyframes call-glow {
  0% { transform: scale(.7); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ════════════════════════════════════════
   スマホ（幅820px以下）
   ════════════════════════════════════════ */
@media (max-width: 820px) {
  body { background-image: none; }
  .cover { padding: 42px 28px 36px; border-bottom: 1px solid var(--rule); }
  .cover-inner { width: 100%; max-width: 520px; margin: 0 auto; }
  .cover .kicker { font-size: .875rem; letter-spacing: .12em; line-height: 2; margin-bottom: 28px; }
  .cover-composition { position: relative; padding: 12px 0 0; }
  .cover h1 { font-size: clamp(1.6875rem, 7.6vw, 2.25rem); line-height: 1.85; letter-spacing: .09em; }
  .cover-endorsement {
    display: grid; grid-template-columns: minmax(0, 1fr) min(48%, 10rem); align-items: center; gap: 16px; margin-top: 22px;
  }
  .signature-copy { position: relative; z-index: 2; min-width: 0; }
  .cover .hairline { width: 32px; margin: 0 0 16px; }
  .cover .sub { font-size: 1.125rem; letter-spacing: .04em; line-height: 2.1; }
  .cover .tax-title { display: block; margin: 0 0 4px; font-size: .875rem; letter-spacing: .14em; line-height: 1.7; color: var(--mute); }
  .cover .sub ruby { white-space: nowrap; }
  .cover .sub rt { font-size: .6875rem; letter-spacing: .05em; }
  .mobile-art-slot { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; aspect-ratio: 1; }
  .mobile-art-slot .badge-study.ready { display: block; width: 100%; height: auto; aspect-ratio: 1; }
  .mobile-art-slot canvas { touch-action: pan-y pinch-zoom; }
  .cover-nav {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin-top: 24px;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  }
  .cover-nav a { font-size: .9375rem; letter-spacing: .1em; min-height: 52px; padding: 8px 0; }
  .cover-nav a::after { display: none; }

  .chapter { padding: 76px 0 0; }
  .sheet-inner { padding: 0 28px; max-width: 560px; margin: 0 auto; }
  /* 見出しは横組み。金の短い線から罫線へ薄れていく。 */
  .chapter-title {
    display: flex; align-items: center; gap: 20px; margin-bottom: 34px;
    font-size: 19px; letter-spacing: .2em; line-height: 1.8;
  }
  .chapter-title::after {
    content: ""; flex: 1; height: 1px; opacity: .65;
    background: linear-gradient(90deg, var(--gold), var(--rule) 24%, transparent);
  }
  .prose p { font-size: 16px; line-height: 2.05; margin-bottom: 24px; }
  .prose .signature { margin-top: 40px; }
  .works li { padding: 26px 2px 24px; }
  .works h3 { font-size: 18px; letter-spacing: .18em; line-height: 1.8; margin-bottom: 8px; }
  .spec th, .spec td { display: block; width: 100%; padding: 0; }
  .spec th { padding-top: 22px; font-size: .875rem; letter-spacing: .12em; }
  .spec td { padding: 6px 0 22px; }
  .spec .sep { display: none; }
  .spec td .nw + .sep + .nw { display: block; }

  .closing { margin-top: 92px; padding: 76px 26px 70px; background: linear-gradient(180deg, transparent, rgba(109, 130, 103, .09)); }
  .closing .tel { margin: 30px 0 16px; font-size: clamp(32px, 9vw, 40px); }
  .closing .hours .sep { display: none; }
  .closing .hours .nw { display: block; }
  .closing .map-line { margin-top: 36px; }
  .footer-inner { flex-direction: column; align-items: center; gap: 2px; }
}
@media (max-width: 350px) {
  .cover { padding-inline: 24px; }
  .cover .sub { font-size: 1rem; }
  .cover .kicker { font-size: .8125rem; letter-spacing: .07em; }
  .sheet-inner { padding: 0 24px; }
}

/* ── 動きを減らす設定 ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-preview) .spine::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-preview) *, html:not(.motion-preview) *::before, html:not(.motion-preview) *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  }
}

/* ── 印刷 ─────────────────────────────── */
@media print {
  #ambient-3d, .badge-study canvas { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
  .cover, .chapter, .closing { position: static !important; min-height: 0 !important; box-shadow: none !important; }
  .spine { position: static !important; height: auto !important; border: 0 !important; }
  .spine::before, .spine::after { display: none !important; }
  .vertical-lettering { -webkit-mask-image: none !important; mask-image: none !important; }
  html.has-motion .cover .h1-line, html.has-motion .cover .sub, html.has-motion .cover .cover-nav,
  html.has-motion .cover .kicker { opacity: 1 !important; transform: none !important; }
  html.has-motion .vertical-lettering { clip-path: none !important; }
}

/* 2026-09-23 調整: 最後の頁では右列を薄れさせず、最後の紙そのものを右列より手前に重ねて覆う（計算で切り取らないので遅れやちらつきが出ない）。
   main の重なりの枠を外し、最後の紙と奥付だけを右列（z-index 10）より上に置く。 */
html.has-motion:not(.no-sheets) .spine::after { display: none; }
.spine::before { transform: none; opacity: 1; }
.vertical-lettering { -webkit-mask-image: none; mask-image: none; opacity: .92; }
html.ring-line .badge-study, .badge-study { opacity: 1; }
@media (min-width: 1024px) and (min-height: 640px) {
  html.has-motion:not(.no-sheets) main { z-index: auto; }
  html.has-motion:not(.no-sheets) .chapter { z-index: 2; }
  html.has-motion:not(.no-sheets) .closing { z-index: 11; }
  html.has-motion:not(.no-sheets) footer { z-index: 12; }
}