/*
Theme Name: soso2026
Theme URI: https://soso758.com/
Author: 有限会社双双編集
Description: JSON-driven classic theme for soso758.com.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.0
*/

:root {
  --paper: #f7f7f3;
  --paper-deep: #e8ece8;
  --ink: #111922;
  --ink-soft: #52616a;
  --navy: #2a363d;
  --line: #cbd1ce;
  --line-dark: #42515a;
  --accent: #d9ff55;
  --accent-warm: #f5c8a3;
  /* accent-warm は navy 上での色。paper 上のテキストは 1.43:1 で AA に届かないので、
     同系で 4.78:1 を確保したこちらを使う。 */
  --accent-warm-ink: #9c5f2c;
  /* slide-lead は paper-deep にも載るため、4.64:1 を確保した専用色にする。 */
  --slide-lead-ink: #965a2a;
  --menu-paper: #e3e7df;
  --serif: "Noto Serif JP Variable", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP Variable", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --display: clamp(4.5rem, 13vw, 12.5rem);
  --shell: min(1240px, calc(100vw - 4rem));
  --section-image-height: clamp(24rem, 32vw, 32rem);
  --section-column-gap: 6vw;
  --card-min-height: 12rem;
  --copy-line-height: 1.8rem;
  --viewport-height: 100svh;
  --rail-width: 4.5rem;
  --edge: max(2rem, calc((100vw - 1240px) / 2));
  --rail-gutter: 3.75rem;
  --ease: cubic-bezier(.2,.75,.2,1);
}

@supports (height: 100dvh) {
  :root { --viewport-height: 100dvh; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; scroll-snap-type: y proximity; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.8; line-break: strict; word-break: normal; }
body:has(.site-nav.is-open) { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: var(--accent); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.mobile-only { display: none; }
.page-intro { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: var(--paper); pointer-events: none; animation: intro-exit 1.15s .8s var(--ease) forwards; }
.intro-core { display: grid; justify-items: center; gap: .9rem; color: var(--ink-soft); animation: intro-rise .8s var(--ease) both; }
.intro-logo { width: min(11rem, 46vw); height: auto; animation: intro-logo-in .9s .12s var(--ease) both; }
.intro-rule { display: block; width: 4.5rem; height: 1px; background: var(--accent-warm); transform-origin: center; animation: intro-rule-in .7s .32s var(--ease) both; }
.intro-core p { margin: 0; font-size: .58rem; letter-spacing: .16em; animation: intro-copy-in .7s .42s var(--ease) both; }
@keyframes intro-rise { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
@keyframes intro-logo-in { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(.3rem); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes intro-rule-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes intro-copy-in { from { opacity: 0; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .16em; } }
@keyframes intro-exit { 0% { opacity: 1; visibility: visible; } 72% { opacity: 0; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.site-progress { position: fixed; z-index: 20; inset: 0 0 auto; height: 3px; background: transparent; }
.site-progress span { display: block; width: 0; height: 100%; background: var(--accent-warm); transform-origin: left; }
.section-shell { width: var(--shell); margin-inline: auto; position: relative; }
/* The root scrollport already reserves space for the fixed header. Keeping a
   second section margin here would offset every snap target twice. */
main > section { scroll-snap-align: start; }

/* スナップはページの区切りを示す補助。デスクトップでも位置を強制しない。 */
@media screen and (min-width: 901px) {
  html { scroll-snap-type: y proximity; }
  main > section { scroll-snap-stop: normal; }
}
.hero { min-height: var(--viewport-height); }
.about, .works, .guide, .company { min-height: auto; }
.section-dark { width: 100%; padding-inline: max(2rem, calc((100vw - 1240px) / 2)); color: #f4f6f1; background: var(--navy); }
.section-paper { width: 100%; padding-inline: max(2rem, calc((100vw - 1240px) / 2)); background: var(--paper-deep); }
.eyebrow { margin: 0; color: var(--ink-soft); font-size: .7rem; font-weight: 700; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; }
.section-dark .eyebrow { color: var(--accent); }
.section-index { position: absolute; top: 2.5rem; left: 0; display: flex; gap: .85rem; align-items: center; color: var(--ink-soft); font-size: .65rem; letter-spacing: .14em; white-space: nowrap; writing-mode: vertical-rl; }
/* 地の上の柱番号は accent-warm（paper 1.43:1）では AA に届かないので、
   同系で 4.78:1 の accent-warm-ink を使う。accent 系は暗い面だけ。 */
.section-index span:first-child { color: var(--accent-warm-ink); font-size: .8rem; }
.section-dark .section-index { left: max(2rem, calc((100vw - 1240px) / 2)); color: #c8d0cc; }
.section-paper .section-index { left: max(2rem, calc((100vw - 1240px) / 2)); color: var(--ink-soft); }
.section-dark .section-index span:first-child { color: var(--accent); }
.section-paper .section-index span:first-child { color: var(--accent-warm-ink); }
.body-copy { max-width: 32rem; font-size: .98rem; line-height: 2; }
h1, h2, h3, p { margin-top: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { font-weight: 500; }
h1, h2 { font-family: var(--serif); letter-spacing: -.06em; line-height: 1.05; }
/* 見出しのアクセントも柱番号（.section-index）と同じ扱いにする。
   paper 上の accent-warm は 1.43:1 で、大見出しの 3:1 にも届かない
   （2026-08-06 実測・トップ／works-preview／guide／process／works／notes／contact の 7 か所）。
   **accent 系は暗い面だけ。** navy 上は 8.07:1 なので accent-warm のまま残す。 */
h1 em, h2 em { color: var(--accent-warm-ink); font-style: normal; }
.section-dark h1 em, .section-dark h2 em { color: var(--accent-warm); }
h2 { font-size: clamp(2.8rem, 5.5vw, 5.5rem); }
.text-link, .section-link { display: inline-flex; gap: 1rem; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: .3rem; font-size: .82rem; font-weight: 700; }
.text-link span, .section-link span, .contact-button span, .card-action > span { transition: transform .35s var(--ease); }
.text-link:hover span, .section-link:hover span, .contact-button:hover span, .card-action:hover > span { transform: translate(4px, 4px); }
.button { display: inline-flex; gap: 1rem; align-items: center; border: 1px solid var(--ink); padding: .8rem 1rem; background: var(--accent); color: var(--ink); font-size: .78rem; font-weight: 700; line-height: 1.4; cursor: pointer; }
.button:hover { background: var(--accent-warm); }
.button:focus-visible { outline: 2px solid var(--ink); outline-offset: .25rem; }
.button span { transition: transform .35s var(--ease); }
.button:hover span, .button:focus-visible span { transform: translate(4px, 4px); }
.content-lead { max-width: 42rem; margin: 1.2rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 2; }
.cta-line { margin: 1.75rem 0 0; }

/* **ヘッダーは画面に貼り付ける**（2026-08-06・user 指示）。
   絶対配置だと導入を過ぎた時点でロゴも現在地も画面外へ出ていた（実測：/works/ の目録 5,948px、
   /guide/ の最終節 72,871px でどちらもヘッダーが画面外）。しかも .here-now は
   `:empty { display: none }` なので、**中身が入る頃には見えないという裏返しの状態**だった。
   地色の反転（.is-dark）と .menu-rail の固定は、もともとこの状態を前提に作ってある。
   紙は下の `@media print` が position: absolute に戻すので、ここは画面だけの話。 */
.site-header { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; padding: 1.25rem 2rem; }
.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  width: 140px;
  min-height: 2.5rem;
  transition: transform .25s var(--ease);
}
.brand:hover { transform: translateY(-1px); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: .3rem; }
.brand img { width: 100%; transition: filter .35s var(--ease); }
/* 現在地は「ページ名 / 章 / 面」の階層（2026-08-06・user 指示）。
   上位 2 つはリンクで、押せば 1 つ上へ戻れる。区切りは CSS が挟む —— 文言に入れない。 */
.header-note { display: flex; flex-wrap: wrap; gap: .55rem; align-items: baseline; margin: 0; color: var(--ink-soft); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
/* 区切りは "/" にしない。面の位置が「01 / 03」なので、階層の "/" と見分けが付かなくなる（実測）。 */
.header-note > * + *::before { display: inline-block; padding-right: .55rem; color: var(--ink-soft); font-weight: 400; content: "\203A"; }
.header-note a { color: inherit; text-decoration: none; }
.header-note a:hover, .header-note a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.header-note a:focus-visible { outline: 1px solid currentColor; outline-offset: .3rem; }
.site-header.is-dark .header-note a:hover, .site-header.is-dark .header-note a:focus-visible { color: var(--paper); }
/* 現在地（2026-08-02・user 指摘「どこにいるか分からない」）。
   章と面は script.js が書き入れる。JS が無ければページ名だけが残る。 */
/* 階層の 3 段。**手前ほど淡く、いま居る面がいちばん濃い。** */
.here-page { color: var(--ink-soft); }
.here-now { color: var(--ink); font-weight: 700; }
.here-chapter { color: var(--ink); font-weight: 700; }
.here-place { color: var(--ink-soft); font-weight: 400; }
.here-now:empty, .here-now[hidden] { display: none; }
.site-header.is-dark .here-now { color: var(--paper); }

/* ナビを開いたとき、7 項目の前にこのページの章立てを出す。 */
.nav-chapters { grid-row: 1; grid-column: 1 / -1; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(17,25,34,.18); }
.nav-inner > .nav-aside { grid-row: 2; grid-column: 1; align-self: start; }
.nav-inner > .nav-list { grid-row: 2; grid-column: 2; }
.page-here { margin: 0; color: var(--ink-soft); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.page-here b { padding-left: .7rem; color: var(--ink); font-size: .8rem; letter-spacing: .04em; text-transform: none; }
.nav-chapter-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.nav-chapter-list a { display: flex; gap: .55rem; align-items: baseline; padding: .5rem .95rem; border: 1px solid rgba(17,25,34,.2); color: var(--ink-soft); font-size: .82rem; transition: background .2s var(--ease), color .2s var(--ease); }
.nav-chapter-list a span { color: var(--accent-warm-ink); font-family: var(--serif); font-size: .78rem; }
.nav-chapter-list a:hover, .nav-chapter-list a:focus-visible { background: var(--accent); color: var(--ink); }
.nav-chapter-list a[aria-current="true"] { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.menu-rail { position: fixed; z-index: 20; top: 0; right: 0; display: grid; width: var(--rail-width); height: var(--viewport-height); place-items: center; border-left: 1px solid rgba(17,25,34,.28); }
.menu-toggle { position: relative; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 0; padding: 0; background: transparent; color: var(--ink); filter: drop-shadow(0 1px 5px rgba(247,247,243,.85)); cursor: pointer; }
.site-header.is-dark .brand img { filter: brightness(0) invert(1); }
.site-header.is-dark .menu-rail { border-left-color: rgba(247,247,243,.35); }
.site-header.is-dark .menu-toggle { color: #f4f6f1; filter: drop-shadow(0 1px 5px rgba(17,25,34,.65)); }
.site-header:has(.site-nav.is-open) .brand img { filter: none; }
.site-header:has(.site-nav.is-open) .menu-rail { border-left-color: rgba(17,25,34,.28); }
.site-header:has(.site-nav.is-open) .menu-toggle { color: var(--ink); filter: none; }
.menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu-toggle i, .menu-toggle i::after { position: relative; display: block; width: 1.65rem; height: 1px; background: currentColor; content: ""; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.menu-toggle i { box-shadow: 0 6px 0 currentColor; }
.menu-toggle i::after { position: absolute; top: 12px; left: 0; }
.menu-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: .35rem; }
.menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i::after { transform: rotate(-90deg); }
.site-nav { position: fixed; inset: 0; display: grid; place-items: center; padding: 5rem max(2rem, calc((100vw - 1240px) / 2)); background: var(--menu-paper); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-1rem); transition: opacity .35s var(--ease), visibility .35s var(--ease), transform .35s var(--ease); }
.site-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.nav-inner { display: grid; grid-template-columns: .65fr 1.35fr; gap: 1.8rem 5vw; width: min(100%, 1080px); }
.nav-intro { align-self: start; padding-top: .6rem; }
.nav-intro p:not(.eyebrow) { max-width: 15rem; margin: 1.5rem 0 .7rem; font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; }
.nav-intro span { color: rgba(17,25,34,.65); font-size: .72rem; line-height: 1.7; }
.nav-list { border-top: 1px solid rgba(17,25,34,.45); }
.nav-list a { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid rgba(17,25,34,.45); }
.nav-list a span { color: rgba(17,25,34,.62); font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.nav-list a strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.5; }
.nav-list a i { font-style: normal; font-size: 1.1rem; transition: transform .3s var(--ease); }
.nav-list a:hover i { transform: translate(4px, 4px); }

/* 節送りの矢印（2026-08-02・user 判断）。浮かせずに右の .menu-rail の下端へ一体化する。
   レールは position: fixed なので、これを包含ブロックにして絶対配置する。
   レール本体の流し込み（中央のハンバーガー）から外れるので、ボタンの位置は動かない。
   色は .site-header.is-dark の反転にそのまま乗る —— 矢印だけの判定を持たない。
   href は script.js が隣の節へ張り替え、最後の節では直前へ戻す。
   JS が動かない環境でも #guide-entry へのアンカーとして働く。
   印刷は .menu-rail ごと落ちる（規則には明示的にも並べてある）。 */
.section-jump-controls {
  position: absolute; left: 0; right: 0; bottom: 1.5rem;
  display: grid; justify-items: center; gap: .35rem;
  color: var(--ink);
  filter: drop-shadow(0 1px 5px rgba(247,247,243,.85));
}
.section-jump {
  position: absolute; left: 0; right: 0; bottom: 1.5rem;
  display: grid; place-items: center;
  padding: .25rem 0;
  padding: .6rem 0;
  transition: transform .3s var(--ease), color .3s var(--ease), filter .3s var(--ease);
}
.section-jump-controls .section-jump { position: static; left: auto; right: auto; bottom: auto; }
.section-jump[hidden] { display: none; }

/* 先頭へ戻る（2026-08-06・user 指示）。節送りと同じレールの、上端側に置く。
   **矢印だけだと「前の節へ」と見分けが付かない**ので、天井の横線を付けて別物にする。
   色と反転は .site-header.is-dark にそのまま乗る。 */
.rail-to-top {
  position: absolute; left: 0; right: 0; top: 1.5rem;
  display: grid; justify-items: center; gap: .3rem;
  padding: .6rem 0;
  color: var(--ink);
  filter: drop-shadow(0 1px 5px rgba(247,247,243,.85));
  transition: transform .3s var(--ease), color .3s var(--ease), filter .3s var(--ease);
}
.rail-to-top[hidden] { display: none; }
.rail-to-top-mark { display: grid; justify-items: center; font-size: 1rem; line-height: 1; }
.rail-to-top-mark::before { display: block; width: 1rem; height: 1px; margin-bottom: .28rem; background: currentColor; content: ""; }
.rail-to-top:hover { transform: translateY(-2px); }
.rail-to-top:focus-visible { outline: 1px solid currentColor; outline-offset: .3rem; }
.site-header.is-dark .rail-to-top { color: #f4f6f1; filter: drop-shadow(0 1px 5px rgba(17,25,34,.65)); }
.site-header:has(.site-nav.is-open) .rail-to-top { opacity: 0; visibility: hidden; pointer-events: none; }
.section-jump-line { width: 1px; height: 1.5rem; background: currentColor; opacity: .5; }
.section-jump-arrow { font-size: 1rem; line-height: 1; transition: transform .3s var(--ease); }
.section-jump:hover { transform: translateY(2px); }
.section-jump:focus-visible { outline: 1px solid currentColor; outline-offset: .3rem; }
.site-header.is-dark .section-jump-controls { color: #f4f6f1; filter: drop-shadow(0 1px 5px rgba(17,25,34,.65)); }
/* ナビを開いている間は伏せる。全画面ナビの上に残ると誤操作になる。 */
.site-header:has(.site-nav.is-open) .section-jump { opacity: 0; visibility: hidden; pointer-events: none; }

.hero { width: 100%; min-height: var(--viewport-height); display: block; overflow: hidden; padding: 0; }
.hero::after { position: absolute; z-index: 1; inset: 0; background: rgba(247,247,243,.42); content: ""; pointer-events: none; }
.hero-rail { position: absolute; z-index: 3; left: max(2rem, calc((100vw - 1240px) / 2)); bottom: 2rem; display: flex; flex-direction: column; gap: 1.2rem; padding-bottom: 1rem; color: var(--ink-soft); font-size: .62rem; letter-spacing: .13em; writing-mode: vertical-rl; }
.rail-line { width: 1px; height: 8rem; margin-inline: auto; background: var(--line); }
.hero-copy { position: relative; z-index: 2; width: min(50rem, calc(100% - 2rem)); margin-left: max(6rem, calc((100vw - 1240px) / 2 + 5rem)); padding-top: 30vh; }
.hero-copy h1 { margin: 1.5rem 0 2rem; color: var(--ink-soft); font-size: clamp(3.8rem, 7vw, 7rem); white-space: nowrap; }
.hero-lead { margin-bottom: 2.5rem; font-family: var(--serif); font-size: clamp(1rem, 1.7vw, 1.4rem); line-height: 1.8; }
.hero-intro-line { display: block; opacity: 0; transform: translateY(.7rem); animation: hero-intro-line-in 1.08s var(--ease) forwards; }
.hero-intro-line-1 { animation-delay: 2.05s; }
.hero-intro-line-2 { animation-delay: 2.28s; }
.hero-intro-line-3 { animation-delay: 2.56s; }
.hero-intro-line-4 { animation-delay: 2.88s; }
.hero-intro-line-5 { animation-delay: 3.12s; }
.hero-char { display: inline-block; opacity: 0; animation: hero-char-in .52s var(--ease) forwards; }
@keyframes hero-intro-line-in { from { opacity: 0; transform: translateY(.7rem); } to { opacity: 1; transform: none; } }
@keyframes hero-char-in { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
.hero-visual { position: absolute; z-index: 0; inset: 0; margin: 0; }
.image-frame { width: 100%; height: 100%; overflow: hidden; background: var(--paper-deep); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.58) brightness(1.06); transition: transform 1.2s var(--ease); }
.hero-visual:hover img { transform: scale(1.04); }

.about { display: grid; grid-template-columns: 1.06fr .94fr; grid-template-rows: auto auto; align-content: center; gap: 2rem var(--section-column-gap); min-height: var(--viewport-height); padding-top: 7rem; padding-bottom: 6rem; }
.about .section-intro { display: block; grid-column: 2; align-self: start; min-width: 0; min-height: 0; padding: 0; background: transparent; }
.about-visual { grid-column: 1; grid-row: 1; align-self: start; overflow: hidden; }
.about-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.7); transform: scaleX(-1); }
.about-visual, .works-visual, .guide-visual { width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 0; aspect-ratio: 1.5 / 1; }
.section-intro h2 { margin: 1.7rem 0 2rem; font-size: clamp(2.8rem, 3.8vw, 4rem); }
.section-intro h2 span { display: block; white-space: nowrap; }
.section-intro h2 span, .guide-heading h2 span { color: #b4c4c0; }
.section-intro h2 .about-title-main, .guide-heading h2 .guide-title-main { color: inherit; }
.about-preview-note { max-width: 30rem; margin-top: 2rem; }
.about-preview-note > p:not(.eyebrow) { margin: .8rem 0 1.5rem; color: #b9c2be; font-size: .88rem; line-height: var(--copy-line-height); }
.about-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1.5rem; background: rgba(244,246,241,.28); }
.about-card { position: relative; min-height: var(--card-min-height); padding: 1rem; background: rgba(244,246,241,.08); transition: background .3s ease, transform .3s var(--ease); }
.about-card:hover { background: rgba(217,255,85,.92); color: var(--ink); transform: translateY(-5px); }
.about-card:hover .card-label, .about-card:hover p, .about-card:hover .card-action { color: var(--ink); }
.about-card p { max-width: 16rem; color: #b9c2be; }
.about-card .card-action { color: #d7dfdb; }

.works { display: flex; flex-direction: column; justify-content: center; min-height: var(--viewport-height); padding-top: 6rem; padding-bottom: 5rem; }
.works-overview { display: grid; grid-template-columns: 1.06fr .94fr; align-items: start; gap: 3rem var(--section-column-gap); margin: 0 0 3.5rem; }
.works-visual { align-self: start; justify-self: stretch; overflow: hidden; background: var(--paper-deep); }
.works-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.65); }
.works-copy { display: flex; align-self: start; justify-self: stretch; flex-direction: column; justify-content: flex-start; }
.works-copy h2 { margin: 1.4rem 0 2rem; font-size: clamp(2.5rem, 2.8vw, 3.6rem); }
.works-copy h2 span, .works-copy h2 em { white-space: nowrap; }
.works-preview-note { max-width: 30rem; margin-top: 2rem; }
.works-preview-note > p:not(.eyebrow) { margin: .8rem 0 1.5rem; color: var(--ink-soft); font-size: .88rem; line-height: var(--copy-line-height); }
.about-preview-note .section-link, .works-preview-note .section-link, .guide-intro .section-link { margin-top: .25rem; }
.card-label { display: block; color: var(--ink-soft); font-size: .64rem; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.section-dark .card-label { color: var(--accent); }
.works-types { display: grid; grid-template-columns: repeat(4, 1fr); }
.works-type { position: relative; min-height: var(--card-min-height); padding: 1rem; border-right: 1px solid var(--line); background: var(--paper); transition: background .3s ease; }
.works-type:last-child { border-right: 0; }
.works-type:hover { background: var(--paper-deep); }
.works-type p { color: var(--ink-soft); }
.card-action { display: inline-flex; gap: .7rem; align-items: center; width: fit-content; color: var(--ink-soft); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.card-action > span { font-size: 1.05rem; }
.section-link { margin-top: 1.5rem; }

.guide { display: grid; grid-template-columns: .94fr 1.06fr; align-content: center; gap: 2.5rem var(--section-column-gap); min-height: var(--viewport-height); padding-top: 7rem; padding-bottom: 6rem; }
.guide-heading { grid-column: 1; align-self: start; min-width: 0; }
.guide-heading h2 { width: 100%; max-width: 34rem; margin: 1.5rem 0 2rem; font-size: clamp(2.5rem, 3.8vw, 4rem); }
.guide-heading h2 span { display: block; white-space: nowrap; }
.guide-intro { max-width: 27rem; margin-top: 2rem; padding-bottom: .5rem; }
.guide-intro > p:not(.eyebrow) { margin: .8rem 0 1.5rem; color: var(--ink-soft); font-size: .88rem; line-height: var(--copy-line-height); }
.guide-visual { grid-column: 2; grid-row: 1; align-self: start; justify-self: stretch; overflow: hidden; background: var(--paper); }
.guide-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(.3) saturate(.7); }
.guide-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1.5rem; background: var(--line); }
.guide-card { position: relative; min-height: var(--card-min-height); padding: 1rem; background: var(--paper-deep); transition: background .3s ease, transform .3s var(--ease); }
.guide-card:hover { background: var(--accent); transform: translateY(-5px); }
.guide-card p { color: var(--ink-soft); }
.about-card h3, .works-type h3, .guide-card h3 { margin: 2rem 0 .3rem; font-family: var(--serif); font-size: clamp(1.25rem, 1.6vw, 1.6rem); font-weight: 500; line-height: 1.35; text-wrap: balance; }
.about-card p, .works-type p, .guide-card p { margin: 0; font-size: .78rem; line-height: 1.75; }
.about-card .card-action, .works-type .card-action, .guide-card .card-action { position: absolute; right: 1.3rem; bottom: 1rem; }
.tips { display: grid; grid-template-columns: .85fr 1.15fr; align-content: center; gap: 2.5rem var(--section-column-gap); min-height: var(--viewport-height); padding-top: 7rem; padding-bottom: 6rem; }
.tips-heading { align-self: start; }
.tips-heading h2 { margin: 1.5rem 0 2rem; font-size: clamp(2.5rem, 3.8vw, 4rem); }
.tips-heading h2 span { color: #b4c4c0; }
.tips-heading .section-link { margin-top: 1.5rem; }
/* 他 3 セクションの note 枠（.about-preview-note / .works-preview-note / .guide-intro）と対にする。
   濃い地なので本文色は .about-preview-note に合わせる。eyebrow は .section-dark .eyebrow が拾う。
   .section-link の margin は .tips-heading .section-link と同順位なので、こちらを後ろに置く。 */
.tips-note { max-width: 30rem; margin-top: 2rem; }
.tips-note > p:not(.eyebrow) { margin: .8rem 0 1.5rem; color: #b9c2be; font-size: .88rem; line-height: var(--copy-line-height); }
.tips-note .section-link { margin-top: .25rem; }
.tips-visual { align-self: start; overflow: hidden; aspect-ratio: 3 / 2; }
.tips-visual img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(.95); }

.company { display: grid; grid-template-columns: 1fr 1.2fr; align-content: center; gap: 2rem 8vw; min-height: var(--viewport-height); padding-top: 7rem; padding-bottom: 6rem; }
.company-info-card { display: flex; grid-column: 1; align-self: stretch; flex-direction: column; justify-content: flex-start; padding: 0; }
.company-info-card h2 { margin: 1.2rem 0 .8rem; font-family: var(--serif); font-size: clamp(1.8rem, 2.5vw, 2.8rem); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.company-facts { margin: 1.2rem 0 0; border-top: 1px solid var(--line); }
.company-facts div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 1.2rem; align-items: start; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.company-facts dt, .company-facts dd { margin: 0; font-size: .78rem; line-height: 1.7; }
.company-facts dt { color: var(--ink-soft); }
.company-detail-note { color: var(--ink-soft); font-size: .68rem; }
.company-detail-link { border-bottom: 1px solid currentColor; color: var(--ink-soft); font-size: .72rem; }
.company-affiliations { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
/* .inline-link はアクセス導線が /contact/ へ移ったので、そちらでだけ使う（2026-08-02）。
   旧 .company-access-note / .company-access-links は使われなくなったので削除した。 */
.inline-link { display: inline-block; border-bottom: 1px solid currentColor; }
.company-contact-panel { display: flex; grid-column: 2; align-self: stretch; flex-direction: column; }
.company-contact-visual { position: relative; display: block; aspect-ratio: 16 / 9; height: auto; min-height: 0; overflow: hidden; background: var(--paper-deep); }
.company-contact-visual iframe { display: block; width: 100%; height: 100%; border: 0; }
.company-contact { display: flex; flex: 0 0 auto; flex-direction: column; gap: .75rem; align-items: flex-start; margin-top: 0; padding: 1.35rem 1.6rem 1.25rem; }
.company-contact-copy h2 { margin: .8rem 0 1rem; font-size: clamp(2rem, 2.7vw, 3rem); }
.company-contact-copy h2 span { display: block; white-space: nowrap; }
.company-contact-copy > p:not(.card-label) { max-width: 30rem; color: #bec7c3; font-size: .84rem; line-height: 1.6; }
.company-contact-copy .contact-phone { margin-top: .85rem; }
.contact-phone a { color: #f4f6f1; font-family: var(--serif); font-size: 1.2rem; letter-spacing: .05em; }
.company-contact .contact-button { align-self: flex-start; }
.company-contact .contact-button { margin-top: .85rem; padding: .85rem 1rem; }
.contact-button { display: inline-flex; gap: 2rem; align-items: center; margin-top: 2rem; padding: 1.15rem 1.4rem; background: var(--accent); color: var(--ink); font-size: .8rem; font-weight: 700; }
.contact-button.is-disabled { background: var(--paper-deep); color: var(--ink-soft); cursor: not-allowed; }
.company > .site-footer { grid-column: 1 / -1; }

/* トップの各面は、内容量ではなく共通の上端を基準に始める。 */
@media screen and (min-width: 901px) {
  /* 15rem の上端は 1280×800 の約30%を占め、カード群と同居する節が面を超えていた。
     上端は 4 節（guide / about / style / company）で共通に 6rem とし、カードと上下余白へ
     少しずつ配分して、開始座標を揃えたまま 1 面へ収める（2026-08-06・user 判断）。 */
  .about, .works, .guide, .tips, .company {
    align-content: start;
    padding-top: 6rem;
    padding-bottom: 1rem;
    padding-inline: calc(var(--edge) + var(--rail-gutter)) max(var(--edge), calc(var(--rail-width) + 1.5rem));
  }
  /* 03 STYLE と 06 COMPANY も、濃色／紙色のトップ節と同じ全幅の器にする。
     section-shell の 1240px 幅のまま viewport 基準の左右余白を重ねると、
     広い画面で本文の器が潰れ、STYLE の画像列が 0px になっていた。 */
  .works, .company { width: 100%; }
  /* トップもサブページ／ユニットと同じ帯を確保し、縦ラベルを読む列から外す。 */
  .about > .section-index,
  .works > .section-index,
  .guide > .section-index,
  .tips > .section-index,
  .company > .section-index { top: 5.5rem; left: max(1rem, calc(var(--edge) - 1.25rem)); height: auto; }
  .works { justify-content: flex-start; padding-top: 6rem; padding-bottom: 1rem; }
  .about-card, .guide-card, .works-type { min-height: 9rem; }
  .works-type { min-height: 11rem; }
}

/* ---- 子ページのレイアウト体系（トップとは別系統・2026-08-01 user 判断） ----
   トップは全画面セクションを scroll-snap で縦送りする「見せる」体系。
   子ページは左に固定の章索引を置いた 2 カラムの「読ませる」体系にする。
   分けるのはレイアウトだけで、パーツ（timeline / catalog / responsibility-matrix /
   proof-grid / callout）とトークンはトップと共有する。CSS はフォークしない。
   子ページは .section-shell を使わない —— 右端の固定 .menu-rail のぶんを
   自分で確保するため（旧体系では本文が rail の下に 32px 潜っていた）。 */
.subpage {
  --rail-w: 4.5rem;
  --index-w: 13rem;
  display: grid;
  grid-template-columns: var(--index-w) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  align-content: start;
  max-width: calc(1180px + var(--index-w));
  min-height: 100svh;
  padding: 8.5rem calc(var(--rail-w) + 1.25rem) 5rem 2rem;
  margin-inline: auto;
}
.subpage > .subpage-header { grid-column: 1 / -1; grid-row: 1; }
.subpage > .subpage-index { grid-column: 1; grid-row: 2; }
.subpage > .subpage-content { grid-column: 2; grid-row: 2; }
.subpage > .subpage-footer { grid-column: 1 / -1; grid-row: 3; }
/* 索引を持たない単一目的ページ（/contact/）は 1 カラムで通す */
.subpage-plain { grid-template-columns: minmax(0, 1fr); }
.subpage-plain > .subpage-content { grid-column: 1; }

.subpage-header { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem 8vw; align-items: end; padding-bottom: 4rem; border-bottom: 1px solid var(--line); }
.subpage-header h1 { max-width: 40rem; margin: 1rem 0 0; color: var(--ink-soft); font-size: clamp(3rem, 6vw, 6.5rem); }
.subpage-header .body-copy { margin: 0 0 .25rem; }

.subpage-index { position: sticky; top: 7.5rem; align-self: start; padding-top: 3.5rem; }
.subpage-index p { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .6rem; font-weight: 700; letter-spacing: .16em; }
.subpage-index ol { margin: 0; padding: 0; border-top: 1px solid var(--line-dark); list-style: none; }
.subpage-index a { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .5rem; align-items: baseline; padding: .7rem .3rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .78rem; line-height: 1.5; transition: background .2s var(--ease), color .2s var(--ease); }
.subpage-index a span { color: var(--accent-warm-ink); font-family: var(--serif); font-size: .82rem; }
.subpage-index a:hover, .subpage-index a:focus-visible { background: var(--paper-deep); color: var(--ink); }
.subpage-index a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.subpage-index a[aria-current="true"] span { color: var(--ink); }

.subpage-content { display: grid; gap: 4.5rem; padding-top: 3.5rem; }
.subpage-section { scroll-margin-top: 7.5rem; }
.subpage-section > h2 { margin: 0 0 1.25rem; font-size: clamp(2rem, 3.4vw, 3.6rem); }
.subpage-section > .lead { max-width: 46rem; margin: 0 0 2rem; font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.8; }
.subpage-section > .note { max-width: 42rem; color: var(--ink-soft); font-size: .85rem; }
.guide-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.guide-choice { display: flex; min-height: 16rem; flex-direction: column; padding: 1.25rem; background: var(--paper-deep); transition: background .25s var(--ease), transform .25s var(--ease); }
.guide-choice:hover { background: var(--accent); transform: translateY(-4px); }
.guide-choice h2 { margin: 2.5rem 0 .7rem; font-size: clamp(1.45rem, 2.4vw, 2.3rem); }
.guide-choice p { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.8; }
.guide-choice .card-action { margin-top: auto; padding-top: 2rem; }
/* auto-fit にして、項目数が 5 未満のときに空セルの地色が罫として残らないようにする */
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--line); }
.task-item { min-height: 12rem; padding: 1.2rem; background: var(--paper-deep); }
.task-item strong { display: block; margin: .8rem 0 .5rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1.45; }
.task-item p { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.75; }
a.task-item { color: inherit; transition: background .25s var(--ease); }
a.task-item:hover, a.task-item:focus-visible { background: var(--accent); }
a.task-item:hover p, a.task-item:focus-visible p { color: var(--ink); }
/* ---- WBS＋ガント（/guide/#schedule） ----
   数値は content/process.json から生成する（tools/build-schedule.mjs）。
   帯は視覚の層で、時期は「時期」列にテキストでも出す。 */
.gantt-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line-dark); table-layout: fixed; }
.gantt-table .c-wbs { width: 2.4rem; }
.gantt-table .c-task { width: 17rem; }
.gantt-table .c-num { width: 3.2rem; }
.gantt-table .c-gantt { width: auto; }
/* 目盛りと帯は同じ基準ボックス（列セルの padding box）に載せる。
   scale を position:static にして、span を .gantt-head 基準の絶対配置にすると、
   .gantt-cell 内の帯と左右端がそろう。 */
.gantt-head { position: relative; }
.gantt-scale { display: block; height: .9rem; margin-top: .35rem; font-size: .58rem; font-weight: 400; letter-spacing: .06em; }
.gantt-scale span { position: absolute; bottom: .5rem; left: calc(var(--at) * 1%); padding-left: .2rem; border-left: 1px solid rgba(244, 246, 241, .45); white-space: nowrap; }
.gantt-scale span:last-child { transform: translateX(-100%); border-right: 1px solid rgba(244, 246, 241, .45); border-left: 0; padding: 0 .2rem 0 0; }
.gantt-table caption { padding-bottom: .6rem; color: var(--ink-soft); font-size: .72rem; text-align: left; }
.gantt-table thead th { padding: .38rem .5rem; background: var(--navy); color: #f4f6f1; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-align: left; }
.gantt-table tbody tr { border-bottom: 1px solid var(--line); break-inside: avoid; page-break-inside: avoid; }
.gantt-table tbody tr:hover { background: var(--paper-deep); }
.gantt-table td, .gantt-table tbody th { padding: .28rem .5rem; font-size: .74rem; text-align: left; vertical-align: top; }
.gantt-table colgroup, .gantt-table col { width: auto; }
.gantt-table .wbs { color: var(--accent-warm-ink); font-family: var(--serif); font-size: .95rem; }
.gantt-table tbody th { font-weight: 400; }
.gantt-table tbody th strong { display: block; font-family: var(--serif); font-size: .9rem; font-weight: 500; line-height: 1.35; }
.gantt-table tbody tr[data-owner="client"] { background: #f3f8f6; }
.gantt-table .num { color: var(--ink-soft); font-size: .68rem; white-space: nowrap; }
.gantt-cell { position: relative; min-width: 14rem; }
.gantt-bar { position: absolute; top: .7rem; left: calc(var(--from) * 1%); width: calc(var(--span) * 1%); height: .55rem; background: var(--navy); }
.gantt-bar[data-owner="client"] { background: #b85a3c; }
.gantt-bar[data-owner="soso"] { background: #586c7b; }
.gantt-bar[data-owner="both"] { background: repeating-linear-gradient(135deg, #b85a3c 0 .3rem, #586c7b .3rem .6rem); }
.gantt-point { position: absolute; top: .58rem; left: calc(var(--at) * 1%); width: .55rem; height: .55rem; background: var(--accent-warm-ink); transform: translateX(-100%) rotate(45deg); }
.gantt-flag { position: absolute; top: .55rem; left: calc(var(--at) * 1%); }
.gantt-flag i { display: block; width: .45rem; height: .45rem; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.gantt-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; padding: .65rem .75rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .66rem; }
.gantt-legend span { display: inline-flex; gap: .4rem; align-items: center; padding: .18rem .35rem; background: var(--paper-deep); }
.gantt-legend span::before { width: 1.15rem; height: .42rem; background: #586c7b; content: ""; }
.gantt-legend span[data-owner="client"]::before { background: #b85a3c; }
.gantt-legend span[data-owner="soso"]::before { background: #586c7b; }
.gantt-legend span[data-owner="both"]::before { background: repeating-linear-gradient(135deg, #b85a3c 0 .3rem, #586c7b .3rem .6rem); }
.gantt-legend span[data-legend="flag"]::before { width: .45rem; height: .45rem; background: var(--ink); transform: rotate(45deg); }
.gantt-checkpoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 1.5rem 0 0; padding: 0; background: var(--line); list-style: none; }
.gantt-checkpoints li { padding: 1rem; background: var(--paper-deep); }
.gantt-checkpoints span { color: var(--ink-soft); font-size: .6rem; font-weight: 700; letter-spacing: .1em; }
.gantt-checkpoints strong { display: block; margin: .4rem 0 .4rem; font-family: var(--serif); font-size: 1.05rem; font-weight: 500; }
.gantt-checkpoints p { margin: 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.7; }

.responsibility-matrix { overflow-x: auto; border-top: 1px solid var(--line-dark); }
.schedule-overview { margin: 0; }
.matrix-row { display: grid; grid-template-columns: 3rem 1.2fr 1fr 1fr; min-width: 44rem; border-bottom: 1px solid var(--line); }
.matrix-row > * { margin: 0; padding: .85rem .75rem; border-right: 1px solid var(--line); font-size: .78rem; line-height: 1.65; }
.matrix-row > :last-child { border-right: 0; }
.matrix-row > strong { font-family: var(--serif); font-size: .95rem; font-weight: 500; }
.matrix-head { background: var(--navy); color: #f4f6f1; }
.matrix-head > * { color: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.slide-supplement-meta { margin: 1.4rem 0 0; color: var(--ink-soft); font-size: var(--s-label); line-height: 1.6; }
.slide-supplement-sources { display: grid; gap: .35rem; margin: 1rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.slide-supplement-sources li { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: baseline; font-size: var(--s-label); }
.slide-supplement-sources a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.slide-supplement-sources span { color: var(--ink-soft); font-size: calc(var(--s-label) - .06rem); }
/* ---- 制作実績（/works/catalog/） ----
   342 件を全件出す。絞り込みは補助で、JavaScript が無くても表がそのまま読める。 */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.works-filter { display: grid; gap: .5rem; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; background: var(--paper-deep); }
.works-filter-label { margin: .35rem 0 0; color: var(--ink-soft); font-size: .6rem; font-weight: 700; letter-spacing: .12em; }
.works-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.works-chips button { display: inline-flex; gap: .4rem; align-items: baseline; border: 1px solid var(--line-dark); padding: .38rem .6rem; background: transparent; font-size: .68rem; cursor: pointer; }
.works-chips button span { color: var(--ink-soft); font-size: .6rem; }
.works-chips button:hover { background: var(--paper); }
.works-chips button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #f4f6f1; }
.works-chips button[aria-pressed="true"] span { color: #c8d0cc; }
.works-count { margin: .3rem 0 0; color: var(--ink-soft); font-size: .68rem; }
.works-reset { justify-self: start; border: 0; padding: 0; background: transparent; color: var(--ink-soft); font-size: .66rem; text-decoration: underline; cursor: pointer; }
/* ラッパは `.table-wrap` の 1 系統（2026-08-04 の統一）。実績の目録だけ罫を足すので
   `:has()` で絞る。**`.works-table-wrap` というクラスは実装が出していない**
   —— 統一のとき CSS 側が取り残され、560px 以下の変形が丸ごと死んでいた（rev148 G2）。 */
.table-wrap:has(.works-table) { border-top: 1px solid var(--line-dark); }
/* **min-width はここ 1 か所で決める。**下に 2 つ目の宣言を置くと、メディアクエリの
   `min-width: 0` を後勝ちで潰す（rev148 G1 で実際に潰していた）。 */
.works-table { width: 100%; min-width: 68rem; border-collapse: collapse; }
.works-table caption { padding-bottom: .6rem; color: var(--ink-soft); font-size: .7rem; text-align: left; }
.works-table thead th { position: sticky; top: 0; z-index: 1; padding: .55rem .5rem; background: var(--navy); color: #f4f6f1; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-align: left; white-space: nowrap; }
.works-table tbody tr { border-bottom: 1px solid var(--line); }
/* 地が paper-deep になったので、ホバーは暗くではなく明るくする。同色では見えない。 */
.works-table tbody tr:hover { background: var(--paper); }
/* 書名は 1 行で読ませる。発行元だけ折り返させ、書名を .82rem にすると、
   8 列が横スクロールなしで本文幅 1180px に収まる（実測：書名列 504px・
   1 ページ 50 件のうち 2 行になるのは 1 件）。
   **nowrap では収まりきらない書名がセルを食み出す**ので、折り返しは殺さない。 */
.works-table th[scope="row"] { padding: .6rem .5rem; font-family: var(--serif); font-size: .82rem; font-weight: 500; text-align: left; }
.works-table td[data-label="発行元"] { max-width: 13rem; white-space: normal; }
.works-table td { padding: .6rem .5rem; color: var(--ink-soft); font-size: .72rem; white-space: nowrap; }
.works-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.catalog-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.catalog-tools a, .catalog-tools button { border: 1px solid var(--line-dark); padding: .55rem .8rem; background: transparent; color: var(--ink); font-size: .72rem; cursor: pointer; }
.catalog-tools a:hover, .catalog-tools button:hover { background: var(--accent); }
.catalog-list { display: grid; gap: 1px; background: var(--line); }
.catalog-item { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 1rem; padding: 1rem; background: var(--paper-deep); }
.catalog-item strong { font-family: var(--serif); font-weight: 500; }
.catalog-item span { color: var(--ink-soft); font-size: .75rem; }
.catalog-labels { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 1rem; padding: .6rem 1rem; background: var(--navy); color: #f4f6f1; font-size: .68rem; font-weight: 700; }
/* ---- flow：解説の図式 ----
   カード4仕分け → キーワード → 解説の「解説」側で、つながりを見せる型。
   文字は HTML のまま（見出しを画像にしない）。CSS だけで罫と矢印を組む。 */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px; margin: 0; padding: 0; background: var(--line); list-style: none; }
.flow li { position: relative; padding: 1.1rem 1.25rem; background: var(--paper-deep); }
.flow li > span { color: var(--ink-soft); font-size: .6rem; font-weight: 700; letter-spacing: .1em; }
.flow li > strong { display: block; margin: .45rem 0 .5rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 500; line-height: 1.45; }
.flow li > p { margin: 0; color: var(--ink-soft); font-size: .74rem; line-height: 1.8; }
/* 矢印は次の段へ渡る印。装飾なので支援技術には出さない。 */
.flow li + li::before {
  position: absolute; top: 1.35rem; left: -1px; z-index: 1;
  width: .5rem; height: .5rem; border-top: 1px solid var(--accent-warm-ink); border-right: 1px solid var(--accent-warm-ink);
  background: var(--paper-deep); content: ""; transform: translateX(-50%) rotate(45deg);
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .flow li + li::before { top: -1px; left: 1.6rem; transform: translateY(-50%) rotate(135deg); }
}

/* 試作時代の `/notes/` 一覧（`.note-list` / `.note-item` / `.note-head` / `.note-tag` /
   `.note-body`）と、それに付いていた `.note-search` の初期定義はここにあった。
   どれもテーマからは出力されないまま残っていて、**`.note-list` は 2026-08-06 の索引と
   クラス名が衝突していた**（`display: grid` が行に効いていた）。実装が使う定義は
   1 か所（下の「/notes/ の索引」）に置く。 */

.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.proof-card { padding: 1.25rem; background: var(--paper-deep); }
.proof-card h2 { margin: 1rem 0 .5rem; font-size: 1.6rem; }
.proof-card p { margin: 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.8; }
.contact-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.contact-option { padding: 1.5rem; background: var(--paper-deep); }
/* 節に <h2> が立つようになったので、枠内の見出しは h3。h2 は旧マークアップの互換。 */
.contact-option h2, .contact-option h3 { margin: 1rem 0 .5rem; font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1.3; }
.contact-option p { color: var(--ink-soft); font-size: .82rem; }
.contact-option a { display: inline-block; margin-top: 1rem; border-bottom: 1px solid currentColor; font-family: var(--serif); font-size: 1.25rem; }
.callout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.5rem; background: var(--navy); color: #f4f6f1; }
.callout h2 { margin: 0; color: var(--accent); font-size: clamp(1.7rem, 3vw, 3rem); }
.callout p { margin: 0; color: #c8d0cc; font-size: .82rem; line-height: 1.8; }
/* ============================================================
   スライド（B-5・2026-08-02。トップの節と同じ体系へ揃える）

   **チャプターの導入 = トップの導入、キーワード = トップのセクション**（user 判断）。
   左目次は廃し、移動はヘッダのグローバルナビと各セクションの導線に寄せる。
   1 セクション＝1 印刷ページは維持する。
   ============================================================ */
.page-slides { display: block; }
/* 導入（page-hero）もスナップ対象にする。対象外だと、mandatory スナップで飛ばされて
   中途半端にスクロールアウトする（2026-08-02・user 指摘）。 */
.page-slides > section, .page-hero { scroll-snap-align: start; }
/* 画面より高い面は snap-stop を always にしない。スナップ位置は保ったまま、
   面の途中で止まれるようにする（2026-08-02・user 指摘の原因）。 */
.page-slides > section.is-tall { scroll-snap-stop: normal; }

/* 見出しの列が .8fr だと実測 411px しかなく、10 字の見出しが 3 行に割れる
   （2026-08-02・user 指摘）。見出し側を広く取る。 */
.page-hero { display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-content: center; min-height: var(--viewport-height); padding-top: 9rem; padding-bottom: 5rem; }
.page-hero-copy { container-type: inline-size; }
/* 幅 46rem では `/notes/` の「ここを見てください。」（10 字）が入らず、
   最後の行に「い。」だけが残っていた（2026-08-03・実測 1413px）。
   字を小さくせず幅で受ける。折れる幅では `balance` で 1 字だけの行を作らない。 */
.page-hero h1 { max-width: 56rem; margin: 1.2rem 0 1.5rem; color: var(--ink-soft); font-size: clamp(2.6rem, 13cqi, 5.4rem); line-height: 1.1; text-wrap: balance; }
.page-hero .body-copy { max-width: 34rem; margin: 0 0 .25rem; }
/* 見出しは読点で折る。/contact/ の見出しと同じ扱い。 */
.page-hero h1 em { display: block; }
.page-hero-index { min-width: 0; max-width: 23rem; align-self: end; margin-top: 2rem; }
.page-hero-index-label { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .62rem; font-weight: 700; letter-spacing: .16em; }
.page-hero-index ol { margin: 0; padding: 0; border-top: 1px solid var(--line-dark); list-style: none; }
.page-hero-index li { border-bottom: 1px solid var(--line); }
.page-hero-index a { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; padding: .7rem .25rem; color: var(--ink-soft); transition: background .2s var(--ease), color .2s var(--ease); }
.page-hero-index a:hover, .page-hero-index a:focus-visible { background: rgba(247,247,243,.72); color: var(--ink); }
.page-hero-index a span { color: var(--accent-warm-ink); font-family: var(--serif); font-size: .82rem; }
.page-hero-index a strong { font-family: var(--serif); font-size: .98rem; font-weight: 500; line-height: 1.45; }
.page-hero-index a i { color: var(--ink-soft); font-size: .85rem; font-style: normal; }
/* 導入の右の導線（2026-08-06・user 指示）。索引と同じ行の体裁を button にも渡す。 */
.page-hero-links li button { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; width: 100%; border: 0; padding: .7rem .25rem; background: none; color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.page-hero-links li button:hover, .page-hero-links li button:focus-visible { background: rgba(247,247,243,.72); color: var(--ink); }
.page-hero-links li button span { color: var(--accent-warm-ink); font-family: var(--serif); font-size: .82rem; }
.page-hero-links li button strong { font-family: var(--serif); font-size: .98rem; font-weight: 500; line-height: 1.45; }
.page-hero-links li button i { color: var(--ink-soft); font-size: .85rem; font-style: normal; }

@media screen and (min-width: 901px) {
  .page-hero:has(.page-hero-index) { grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .65fr); column-gap: clamp(2rem, 6vw, 6rem); }
  .page-hero:has(.page-hero-index) .page-hero-copy { grid-column: 1; }
  .page-hero:has(.page-hero-index) .page-hero-index { grid-column: 2; grid-row: 1; }
}

/* セクションの導入。本文スライドと地色を分け、テーマの切り替わりを示す。 */
.section-intro { display: grid; align-content: center; gap: 2.5rem; min-height: var(--viewport-height); padding-top: 5.5rem; padding-bottom: 5rem; background: var(--paper-deep); }
/* 章見出しは vw ではなく「自分の列幅」に従わせる。6vw のままだと、内容幅が 1240px で
   止まったあとも字だけ育ち、1476px を超えたところで「ディレクション」が 2 行に折れた
   （2026-08-03・実測して user 指摘と一致）。 */
.section-copy { container-type: inline-size; }
.section-copy h2 { max-width: 46rem; margin: 1.2rem 0 1.5rem; font-size: clamp(2.6rem, 13cqi, 5.4rem); line-height: 1.1; }
.section-copy .body-copy { max-width: 48rem; margin: 0; }
.section-intro-link { margin: 1rem 0 0; }
.section-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; background: var(--line); }
.index-card { position: relative; min-height: var(--card-min-height); padding: 1.2rem; border-top: 1px solid var(--line); background: var(--paper); transition: background .3s ease, transform .3s var(--ease); }
.index-card:hover { background: var(--accent); transform: translateY(-5px); }
.section-card { display: block; }
.section-card h3 { display: block; margin: 1.6rem 0 .4rem; font-family: var(--serif); font-size: clamp(1.25rem, 1.6vw, 1.6rem); font-weight: 500; line-height: 1.35; text-wrap: balance; }
.section-card p { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.75; }
.section-card .card-action { position: absolute; right: 1.3rem; bottom: 1rem; }

/* サブページは縦ラベルの取り分を確保し、本文の開始位置を全セクションで揃える
   （2026-08-02・user 指示「トップはトップ、サブはサブで統一」）。
   ラベルは左端 0 の帯に置き、本文はその右から始める。トップ側の寸法は変えない。 */
/* セクションの箱を全種で同じにする。.section-shell の中央寄せだと種類ごとに
   基準が変わり、本文の開始位置が 32 / 60 / 92px とばらついていた（実測）。
   **サブページ内では同じ箱の体系にそろえる。トップの既存寸法は変更しない**
   （2026-08-02・user 指示）。 */
.page-slides > section,
.page-slides > .page-hero {
  width: 100%;
  margin-inline: 0;
  padding-inline: calc(var(--edge) + var(--rail-gutter)) max(var(--edge), calc(var(--rail-width) + 1.5rem));
}
/* 縦ラベルは本文の左、確保した帯のなかに置く。 */
/* 縦ラベルは余白側へ寄せる。本文との間を広げて、読む列と索引の役割を分ける
   （2026-08-02・user 指示）。 */
.page-slides > section > .section-index { top: 5.5rem; left: max(1rem, calc(var(--edge) - 1.25rem)); height: auto; }

/* 面の開始座標を固定する（2026-08-04・user 指示）。
   **トップは既に規定してある** —— `.about` ほかを `align-content: start; padding-top: 6rem` に
   そろえた（上の「トップの各面は、内容量ではなく共通の上端を基準に始める」）。
   **サブページの面だけ中央寄せのままだった。**実測で本文の上端が 167〜549px と
   **382px ばらついていた**（試作 `/guide/` の 10 面・viewport 1204x1306）。
   スライドの印刷も定型にしたいので、同じ考え方でそろえる。
   数値はトップの 15rem ではなくサブページの `.page-hero` と同じ 9rem
   （サブページは表と図が入るぶん密度が高く、15rem では中身が入らない）。

   **`screen` で閉じる**（2026-08-05）。印刷の版面は A4 横 ＝ 1122px なので、
   `(min-width: 901px)` だけだと紙にも当たる。表面の `padding-top: 14rem`（0,3,1）が
   `@media print` の `padding-top: 12mm`（0,2,1）に詳細度で勝ち、
   **紙の開始位置が 12mm ではなく 59.6mm になっていた**（実測）。
   紙の寸法は下の `@media print` が持つので、幅で分ける規則は画面に閉じる。
   **同型は 5 か所あり、まとめて `screen` にした**（74/318/574/623/1243 行）。 */
@media screen and (min-width: 901px) {
  .page-slides > section.slide,
  .page-slides .note-slide > .slide,
  .page-slides > section.section-intro,
  .page-slides > section.group-intro { align-content: start; padding-top: 9rem; }

  /* 表面は入口として、天地中央より少し上に置く。**ただし開始座標は固定する**
     （2026-08-04・user 指示）。`align-content: center` だと、問いかけが 1 行か 2 行かで
     開始位置が動く。紙の「開始 12mm・ばらつき 0」と同じ考え方で、画面も上端から固定する。 */
  .page-slides > section.slide[data-face="front"],
  .page-slides .note-slide > .slide[data-face="front"] { align-content: start; padding-top: 14rem; }

  /* 裏面の開始座標は置き場所で変えない（2026-08-06）。
     節として描く裏面（/guide/・/style/・/process/）は 9rem、
     ユニットとして描く裏面（/notes/）は基底の 5.5rem で、**同じ型が 56px ずれていた**（実測）。
     裏は表と違って情報量が多く、9rem では 1280×800 の 1 面に収まらない。
     **基底に寄せて全ページ共通にする。**開始座標を固定する方針（align-content: start）は変えない。 */
  .page-slides > section.slide[data-face="back"],
  .page-slides .note-slide > .slide[data-face="back"],
  .page-slides > section.slide[data-face="back-2"],
  .page-slides .note-slide > .slide[data-face="back-2"],
  .page-slides > section.slide[data-face="flow"],
  .page-slides .note-slide > .slide[data-face="flow"] { padding-top: 5.5rem; }
}

/* 章のアンカーだけを残した抜け殻。FAQ の answer_ref と外部リンクの着地点。 */
.section-anchor { display: block; height: 0; overflow: hidden; }

/* 導入の章カード。体裁はトップの .guide-card をそのまま使う（2026-08-02・user 指示）。
   見出しの下に置くので、導入は上下中央ではなく上寄せに切り替える。 */
.page-hero:has(.hero-cards) { align-content: center; }
.hero-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px; margin-top: 2.5rem; background: var(--line); }
.hero-cards .guide-card { background: var(--paper); }
.page-hero.has-visual .hero-cards .guide-card { background: rgba(247,247,243,.82); }
.page-hero.has-visual .hero-cards .guide-card:hover { background: var(--accent); }

/* 導入のスクロール印。トップの .hero-rail と同じ縦組みの帯（2026-08-02・user 指摘で追加）。 */
.page-hero-rail { position: absolute; z-index: 3; left: max(.75rem, calc(var(--edge) - 2.5rem)); bottom: 2rem; display: flex; flex-direction: column; gap: .7rem; padding-bottom: 1rem; color: var(--ink-soft); font-size: .62rem; letter-spacing: .13em; writing-mode: vertical-rl; }
.page-hero-rail .rail-line { width: 1px; height: 4rem; background: currentColor; opacity: .5; }

/* 画像の扱い（2026-08-02・user 判断）
   ・サブページの導入 …… トップの hero と同じ全面
   ・チャプター ………… トップのセクションと同じ、枠付きの図版（1.5:1）
   全面はページに 1 枚だけにする。 */
.page-hero.has-visual { position: relative; overflow: hidden; }
.page-hero-visual { position: absolute; z-index: 0; inset: 0; margin: 0; }
.page-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.58) brightness(1.06); }
/* 絵の主役が左にあると見出しと重なる。左右を反転して逃がす（2026-08-02・user 指示）。 */
.page-hero-visual[data-flip] img { transform: scaleX(-1); }
/* 覆いは一様ではなく、**文字の載る側だけ濃くする**（2026-08-06）。
   色を accent-warm-ink に直しても、地が写真なので明暗は画像ごとに違う。
   実測では見出しの面積のうち 3:1 未満が /notes/ 49.5%・/works/ 21.0%・
   /guide/ 14.7%・/process/ 8.9% 残っていた。全面を濃くすると承認済みの絵が変わるので、
   右側は従来どおり .5 のまま、左の版面側だけを起こす。 */
.page-hero.has-visual::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(100deg, rgba(247,247,243,.95) 0%, rgba(247,247,243,.9) 42%, rgba(247,247,243,.7) 72%, rgba(247,247,243,.5) 92%); content: ""; pointer-events: none; }
.page-hero.has-visual > *:not(.page-hero-visual, .page-hero-rail) { position: relative; z-index: 2; }
.page-hero.has-visual > .page-hero-rail { z-index: 3; }

/* チャプターの図版はグリッドの一部。全面にはしない。 */
.section-intro.has-figure { grid-template-columns: 1.05fr .95fr; column-gap: var(--section-column-gap); }
.section-intro.has-figure > .section-copy { grid-column: 1; grid-row: 1; }
.section-intro.has-figure > .section-visual { grid-column: 2; grid-row: 1; align-self: start; width: 100%; max-width: 100%; min-width: 0; aspect-ratio: 1.5 / 1; overflow: hidden; }
.section-intro.has-figure > .section-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.7); }
.section-intro.has-figure > .section-cards { grid-column: 1 / -1; }
/* 詳細が表1枚だけの「実務」は、導入の直後に同じセクションで続ける。 */
.section-intro > .section-detail { grid-column: 1 / -1; min-width: 0; margin-top: -.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.section-detail h3 { margin: 0 0 1.25rem; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; }
.section-detail-body { min-width: 0; }
/* 色味はチャプターごとに変える。図版の filter だけで振る。 */
.section-intro.tone-2 > .section-visual img { filter: saturate(.52); }
.section-intro.tone-3 > .section-visual img { filter: saturate(.78) sepia(.1); }
.section-intro.tone-4 > .section-visual img { filter: saturate(.6) hue-rotate(-6deg); }

/* チャプターは枠付きの図版なので、覆い・本文背面の紙地は使わない。
   色味は各図版の filter だけで振り分ける。 */

/* グループの導入。件数が多い topic（/notes/）だけ、チャプターとキーワードの間に挟む。
   チャプターより軽く、キーワードより重い中間の見せ場にする。 */
.group-intro { display: grid; align-content: center; gap: 1.75rem; min-height: 68vh; padding-top: 4rem; padding-bottom: 3.5rem; }
.group-copy h2 { max-width: 40rem; margin: 1rem 0 .6rem; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.15; }
.group-count { margin: 0; color: var(--accent-warm-ink); font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.group-chips { display: flex; flex-wrap: wrap; gap: .55rem .7rem; max-width: 46rem; }
.group-chip { padding: .5rem .85rem; border: 1px solid var(--line); background: var(--paper); font-size: .82rem; transition: background .25s var(--ease); }
.group-chip:hover { background: var(--accent); }

/* ---- スライドの組版スケール（2026-08-04・user 指示「行間・書体・サイズを統一」）----
   **面ごとに値を直書きしない。**差をつけたいときは、その面でトークンを**再束縛**する。
   （例: `voice` は引用が長いので `--s-question` だけを小さく結び直す）
   印刷は下の @media print で**同じトークンを pt へ置き換える**ので、面ごとの print 指定が要らない。

   | トークン | 書体 | 画面 | 紙 | 用途 |
   |---|---|---|---|---|
   | --s-question | 明朝 500 | clamp(2.5,3.8vw,4rem)/1.05 | 18pt | 面の見出し（問いかけ） |
   | --s-emphasis | 明朝 500 | clamp(1.4,2.2vw,2rem)/1.7  | 14pt | 大きな 1 文・対比の見出し |
   | --s-lead     | 明朝 400 | 1.12rem/1.9                | 10pt | 要約 |
   | --s-title    | 明朝 500 | 1.18rem/1.55               | 11pt | カードの見出し（要点・図の段） |
   | --s-body     | ゴシック | .95rem/2.05                | 9pt  | 読ませる本文（1 列） |
   | --s-note     | ゴシック | .88rem/1.95                | 8.5pt| カード内の説明（幅が狭い） |
   | --s-index    | 明朝 500 | clamp(2,2.7vw,2.9rem)/1    | 20pt | 連番 |
   | --s-figure   | 明朝 500 | clamp(2.4,4vw,3.6rem)/1    | 22pt | 数量 |
   | --s-label    | ゴシック 700 | .72rem/1.4             | 8pt  | 索引ラベル・極小の見出し | */
.slide, .page-slides > section {
  --s-question: clamp(2.5rem, 3.8vw, 4rem); --s-question-leading: 1.05;
  --s-emphasis: clamp(1.4rem, 2.2vw, 2rem); --s-emphasis-leading: 1.7;
  --s-lead: 1.12rem; --s-lead-leading: 1.9;
  --s-title: 1.18rem; --s-title-leading: 1.55;
  --s-body: .95rem; --s-body-leading: 2.05;
  --s-note: .88rem; --s-note-leading: 1.95;
  --s-index: clamp(2rem, 2.7vw, 2.9rem);
  --s-figure: clamp(2.4rem, 4vw, 3.6rem);
  --s-label: .72rem;
}

/* スライドごとの印。「so」を人が話している形にした仮のあしらい。
   **控えめに**（2026-08-02・user 指示）——本文の邪魔をしない大きさと濃さで、見出しの上に小さく置く。
   装飾なので支援技術には出さない。 */
.slide-mark { display: block; width: clamp(2.6rem, 3.4vw, 3.6rem); aspect-ratio: 1; margin-bottom: 1.1rem; background: var(--accent-warm-ink); opacity: .8; -webkit-mask: url(assets/rebuild/brand/mark-so.svg) no-repeat center / contain; mask: url(assets/rebuild/brand/mark-so.svg) no-repeat center / contain; }
.section-dark .slide-mark { background: var(--accent-warm); opacity: 1; }

/* キーワードのセクション。トップのセクションと同じ寸法・同じ縦ラベル。 */
.slide { display: grid; grid-template-columns: 1fr 1.1fr; align-content: center; gap: 2.5rem var(--section-column-gap); min-height: var(--viewport-height); padding-top: 5.5rem; padding-bottom: 5rem; }
.slide-copy { grid-column: 1; align-self: start; }
/* 見出しは折り返しを減らすため幅を広く取る（2026-08-02・user 指示）。 */
.slide-copy h2, .slide-copy h3 { max-width: 46rem; margin: 1.5rem 0 1.5rem; font-family: var(--serif); font-size: var(--s-question); font-weight: 500; letter-spacing: -.06em; line-height: var(--s-question-leading); text-wrap: balance; }
/* 索引ラベル。読者の入口は問いかけ（見出し）で、keyword は分類として小さく添える
   （PLAN_slide_units §4-C）。**めくって隠さない。**常時 DOM に出し、表と裏の別は
   既存の 2 段組（.slide-copy / .slide-body）が担う。
   コントラスト比は実測済み —— --ink-soft / --paper 5.97、/ --paper-deep 5.37、
   --accent / --navy 10.86。いずれも AA（4.5）を満たす。 */
.slide-keyword { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: var(--s-label); font-weight: 700; letter-spacing: .12em; line-height: 1.4; }
.slide-keyword::before { content: ""; display: inline-block; width: 1.4rem; margin-right: .5rem; border-top: 1px solid var(--line); vertical-align: .25em; }
.section-dark .slide-keyword { color: var(--accent); }
.section-dark .slide-keyword::before { border-top-color: var(--line-dark); }
/* 表を含む裏面は 1 列に積む。問いの再掲 → 本体 → 要点の順で、表の上下に息を入れる
   （2026-08-04・user 指摘「テキストと表のスペースがキツい」）。 */
.slide[data-kind="table"], .slide.soso-slide-table { row-gap: 3.6rem; }
.slide-lead { max-width: 48rem; margin: 0; color: var(--slide-lead-ink); font-family: var(--serif); font-size: var(--s-lead); line-height: var(--s-lead-leading); }
.section-dark .slide-lead { color: var(--accent-warm); }
.slide-preview-notice { display: inline-block; margin: 0 0 1rem; padding: .25rem .55rem; background: var(--accent); color: var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .12em; line-height: 1.3; }
/* リードは表面に置き、裏面は再掲から本体へ入る。 */
/* 裏面の上下 2 つの見出し（2026-08-04・user 判断）。
   **上＝答え**（その問いへの直接の回答）、**下＝教訓**（読者が持ち帰る一般則）。
   面に錨を 2 つ置くと、拾い読みでも「何の答えで、何を持ち帰るか」が立つ。
   寸法は `--s-emphasis` を共有し、**上下で色を変えない。**位置と罫で役割を分ける。 */
.slide-answer { max-width: 40em; margin: 0; color: var(--ink); font-family: var(--serif); font-size: var(--s-emphasis); line-height: var(--s-emphasis-leading); text-wrap: pretty; }
.slide-lesson { grid-column: 1 / -1; max-width: 40em; margin: 1.3rem 0 0; padding-top: 1rem; border-top: 2px solid var(--ink); color: var(--ink); font-family: var(--serif); font-size: var(--s-emphasis); line-height: var(--s-emphasis-leading); text-wrap: pretty; }
.section-dark .slide-answer, .section-dark .slide-lesson { color: #f4f6f1; }
.section-dark .slide-lesson { border-top-color: #f4f6f1; }

.slide-body { grid-column: 2; align-self: start; min-width: 0; }
/* 要約と解説の境界。**表裏は面そのもので分かれた**ので、この罫が担うのは
   裏の面のなかの「要約 → 解説」の切れ目と、**紙で表と裏を同じページに載せたときの境界**。 */
.slide-body { padding-top: .7rem; border-top: 1px solid var(--line); }
.section-dark .slide-body { border-top-color: var(--line-dark); }

.slide-text { max-width: 34em; margin: 0; font-size: var(--s-body); line-height: var(--s-body-leading); }
/* 裏面の要点（`content.points`・2026-08-04・user 判断）。
   散文一塊のままでは、字数を足しても壁になる。**走り読みでは `label` だけ拾え、
   読み込むなら `text` まで届く**ようにする。
   **`label` は見出しではなく行頭の強調。**見出しは question → .slide-keyword → lead → body で
   既に 4 段あり、5 段目を足しても既存トークンでは差が付かない。太字と濃さの差だけで示す。
   コントラスト比は実測 —— `--ink` #111922 は紙 16.49 / 濃い紙 14.84、
   `--ink-soft` #52616a は 5.97 / 5.37、濃い地の #f4f6f1 は 11.40 / #c6cdc9 は 7.66。すべて AA。
   **`--accent-warm-ink` は使わない** —— 濃い紙（--paper-deep）の上で 4.31 に落ちる（§12 D8 と同型）。 */
.slide-points { display: grid; gap: .6rem; max-width: 60rem; margin: 1.7rem 0 0; padding: 0; counter-reset: slide-point; color: var(--ink-soft); font-size: var(--s-body); line-height: var(--s-body-leading); list-style: none; }
.slide-points li { padding-top: .65rem; border-top: 1px solid var(--line); }
.slide-point-label { margin-right: .7em; color: var(--ink); font-weight: 700; }
.section-dark .slide-points { color: #c6cdc9; }
.section-dark .slide-points li { border-top-color: var(--line-dark); }
.section-dark .slide-point-label { color: #f4f6f1; }
.slide-next { grid-column: 1 / -1; }

/* FAQ は単なる罫線の一覧にせず、相談の種類を 4 色のグループで見分ける。
   色だけに頼らず、番号・見出し・短い説明も同時に置く。 */
/* FAQ の箱組みは /notes/ では使わない（カードの流れに合流した）。
   他の面から faq-index を呼んだときのためだけに残す。 */
.faq-list { display: grid; gap: 1.25rem; }
.faq-group { padding: 1rem 0; border-top: 2px solid var(--line-dark); background: none; }
.faq-group-start { border-top-color: #9aaf45; }
.faq-group-process { border-top-color: #7896a2; }
.faq-group-materials { border-top-color: #b9855a; }
.faq-group-after { border-top-color: #9a7fa0; }
.faq-group-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem 1rem; align-items: start; padding: .25rem .35rem 1rem; }
.faq-group-no { color: var(--ink-soft); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.faq-group-head .eyebrow { font-size: .58rem; }
.faq-group-head h4 { margin: .25rem 0 .15rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.3; }
.faq-group-head p:last-child { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.65; }
.faq-group-count { color: var(--ink-soft); font-size: .68rem; white-space: nowrap; }
.faq-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .65rem; }
.faq-card { display: flex; min-height: 0; flex-direction: column; padding: .85rem .2rem 1rem; border: 0; border-top: 1px solid var(--line); background: none; transition: background .2s ease; }
.faq-card:hover { background: var(--paper-deep); }
.faq-card-no { color: var(--ink-soft); font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.faq-card h3 { margin: 1.25rem 0 .45rem; font-family: var(--serif); font-size: 1.08rem; font-weight: 500; line-height: 1.55; }
.faq-card p { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.8; }
.faq-card .text-link { margin-top: auto; padding-top: 1rem; font-size: .76rem; }

/* ガント・分担表・目録は横に広い。2 カラムの右列（実測 528px）に押し込むと溢れる。
   これらを持つ面は 1 カラムにして、本文の幅いっぱいを使わせる。
   カードから開く Notes の非 section スライドも、表形式は上下に積む。 */
.slide:has(.gantt), .slide:has(.responsibility-matrix), .slide:has(.responsibility-table), .slide:has(.works-table),
.slide:has(.gantt-table), .slide[data-kind="table"], .slide.soso-slide-table { grid-template-columns: minmax(0, 1fr); }
.slide:has(.gantt) .slide-copy, .slide:has(.responsibility-matrix) .slide-copy, .slide:has(.responsibility-table) .slide-copy,
.slide:has(.works-table) .slide-copy, .slide:has(.gantt-table) .slide-copy,
.slide[data-kind="table"] .slide-copy, .slide.soso-slide-table .slide-copy { grid-column: 1; }
.slide:has(.gantt) .slide-body, .slide:has(.responsibility-matrix) .slide-body, .slide:has(.responsibility-table) .slide-body,
.slide:has(.works-table) .slide-body, .slide:has(.gantt-table) .slide-body,
.slide[data-kind="table"] .slide-body, .slide.soso-slide-table .slide-body { grid-column: 1; }

.slide-diagram { display: grid; gap: 1px; margin: 0; padding: 0; background: var(--line); list-style: none; }
/* ---- layout —— 見せ方（`kind` とは分ける・2026-08-04 user 判断） ----
   `kind` は内容の構造（text / table / diagram）、`layout` は見せ方。
   表面は共通の入口、裏面は表を含む内容に応じて変化させる。
   **実データで検証した型だけを使う。**新しい型は代表例で確かめてから足す。 */

/* table-emphasis —— 表を裏面の幅いっぱいで読むための版面。 */
.slide[data-layout="table-emphasis"] { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; padding-bottom: 2.25rem; }
/* 表の面は行数が多い（schema 上限 7 行、ガントと WBS は 10 行）。
   共通の `.data-table`（padding .75rem / leading 1.85）のままだと 1 面に収まらない —— 実測で
   1 行 81px、7 行で 525px（2026-08-06）。**スライドの中の表だけ**行の高さを詰める。
   目録（/works/）や情報ページの表は共通の体裁のまま。 */
.slide .data-table th, .slide .data-table td { padding: .32rem .85rem; line-height: 1.5; }
.slide[data-layout="table-emphasis"] .slide-copy,
.slide[data-layout="table-emphasis"] .slide-body { grid-column: 1; }

/* ---- 表の面と裏の面（2026-08-04・user 指示「きっちりスライドとして表、裏を分ける」）----
   **通常は 1 ユニット = 2 面。**表は問いかけ＋軽いリード、裏は再掲 → 解説 → 要点。
   アンカーは表が持つ（`#<id>`）。裏は `#<id>-back`。**S3 の permalink は表に着地する。**
   **紙は 1 ユニット 1 ページに戻す**（表だけで 1 枚刷ると 160mm が白紙になる。@media print を参照）。 */
.slide[data-face="front"] { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(6.5rem, calc(5rem + 5vh), 9rem); }
.slide[data-face="front"] .slide-copy { grid-column: 1; }
/* 表の面 —— **1 行で大きく**（2026-08-04・user 指示「もっとダイナミックに 1 行でメイン」）。
   寸法は `--s-question` を**この面だけ結び直す**（値の直書きをしない・DESIGN「組版」）。
   1 行に収める幅を確保するため、`max-width` は取らずに右端まで使う。
   リード文は**軽く**：明朝のまま 1 段落とし、色を `--ink-soft` にして主張を下げる。 */
.slide[data-face="front"] { --s-question: clamp(2.4rem, 5vw, 4.1rem); --s-question-leading: 1.12; }
/* **横に切らない。**問いかけは 8〜18 字（実測・中央値 13 字）で、13 字なら 1 行に収まる。
   18 字の 5 枚だけは 2 行へ折れる。**溢れさせるより折るほうがまし**なので `balance` で受ける。 */
.slide[data-face="front"] .slide-question { max-width: none; margin: 1.2rem 0 1.1rem; letter-spacing: -.045em; text-wrap: balance; }
.slide[data-face="front"] .slide-keyword { margin-bottom: 1.6rem; }
.slide[data-face="front"] .slide-lead { max-width: 42em; color: var(--ink-soft); }
.section-dark .slide[data-face="front"] .slide-lead { color: #c6cdc9; }
/* 表面だけに置く内容連動の線画。右端は固定メニューレールを基準に内側へ置き、
   本文も同じ余白を取るので、画像とメニュー・見出しが重ならない。 */
.slide[data-face="front"]:has(.slide-front-illustration) { padding-right: clamp(calc(18rem + var(--rail-width) + 1.5rem), calc(33vw + var(--rail-width) + 1.5rem), calc(28.5rem + var(--rail-width) + 1.5rem)); }
.slide-front-illustration { position: absolute; z-index: 0; right: calc(var(--rail-width) + clamp(1.5rem, 3vw, 3rem)); bottom: clamp(2.5rem, 6vh, 5rem); width: clamp(16.5rem, 30vw, 27rem); margin: 0; pointer-events: none; }
.slide-front-illustration img { display: block; width: 100%; height: auto; }
.slide[data-face="front"]:has(.slide-front-illustration) .slide-copy { position: relative; z-index: 1; }
/* 裏だけを見ても何の答えか分かるように、問いかけを小さく再掲する（§2.3「単体で意味が通る」）。 */
.slide-recall { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: var(--s-label); font-weight: 700; letter-spacing: .1em; line-height: 1.7; }
.slide-recall::before { content: ""; display: inline-block; width: 1.4rem; margin-right: .5rem; border-top: 1px solid var(--line); vertical-align: .25em; }
.section-dark .slide-recall { color: var(--accent); }
.section-dark .slide-recall::before { border-top-color: var(--line-dark); }
.slide-supplement-label { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: var(--s-label); font-weight: 700; letter-spacing: .12em; line-height: 1.4; }
.slide-supplement-label::before { content: ""; display: inline-block; width: 1.4rem; margin-right: .5rem; border-top: 1px dashed var(--line-dark); vertical-align: .25em; }
/* 表のすぐ下にラベルが来ると、表の下端の罫と重なって続きの節に見えない（2026-08-07・実描画）。
   **間を空けたぶんは、表と同じ幅で受ける本文で取り返す。**44em で折ると 3 行になり、
   離した分だけ面がはみ出す（実測 826px）。表の下では行長を表に合わせる。 */
.table-wrap + .slide-supplement-label { margin-top: 1.4rem; }
.slide[data-layout="table-emphasis"] .table-wrap ~ .slide-text { max-width: none; }

/* ---- 裏面の版面（2026-08-04・user 指示） ----
   **左右 2 段の文字箱で埋めない。**同じデータ（`content.points`）に対して見せ方を 3 通り持ち、
   面ごとに変える。構成は cotoria `reports/cotoria_pr.html` の
   `.plist`（罫の一覧）/ 連番カード（大きな番号）/ 2×2 の枠を参考にした。
   **借りたのは並べ方だけで、配色・寸法・書体はこのサイトのトークンを使う。**

   共通 —— 要点を持つ面と `statement` は 1 列に開く。問いかけ → 散文 → 図版の縦の流れにする。 */
.slide[data-layout="points"], .slide[data-layout="points-row"],
.slide[data-layout="contrast"], .slide[data-layout="checklist"], .slide[data-layout="figures"],
.slide[data-layout="statement"] { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; padding-bottom: 4rem; }
/* 付帯資料の表は本体より見出しが一つ増えるため、余白を少しだけ戻す。
   1280×800 でも 1 面に収めるための器の調整で、表の行間や本文は変えない。 */
.slide[data-role="supplement"][data-layout="table-emphasis"] { padding-bottom: 1.9rem; }
.slide[data-layout="points"] .slide-copy, .slide[data-layout="points"] .slide-body,
.slide[data-layout="points-row"] .slide-copy, .slide[data-layout="points-row"] .slide-body,
.slide[data-layout="contrast"] .slide-copy, .slide[data-layout="contrast"] .slide-body,
.slide[data-layout="checklist"] .slide-copy, .slide[data-layout="checklist"] .slide-body,
.slide[data-layout="figures"] .slide-copy, .slide[data-layout="figures"] .slide-body,
.slide[data-layout="statement"] .slide-copy, .slide[data-layout="statement"] .slide-body { grid-column: 1; }
/* 1 列に開くと散文が 100 字を超える行になる。導入の散文は行長を戻す。 */
.slide[data-layout="points"] .slide-text, .slide[data-layout="points-row"] .slide-text,
.slide[data-layout="contrast"] .slide-text,
.slide[data-layout="checklist"] .slide-text { max-width: 44em; color: var(--ink-soft); }

/* points —— 罫線の一覧。**説明が長い面**（1 件 90 字前後）はこれ。 */
.slide[data-layout="points"] .slide-points { max-width: 52rem; margin-top: 1.3rem; gap: .55rem; }
.slide[data-layout="points"] .slide-points li { padding-top: .5rem; }

/* points-row —— 連番カードの横並び。**要点が短く、数で見せたい面**はこれ。
   罫は上辺だけ。枠で囲うと 3 つの箱が並ぶだけになり、紙面が重くなる。 */
.slide[data-layout="points-row"] .slide-points { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 2.6rem; margin-top: 2.4rem; font-size: var(--s-note); line-height: var(--s-note-leading); }
.slide[data-layout="points-row"] .slide-points li { padding-top: 1.1rem; border-top-width: 2px; border-top-color: var(--ink); }
.slide[data-layout="points-row"] .slide-point-label { display: block; margin: 0 0 .5rem; font-family: var(--serif); font-size: var(--s-title); font-weight: 500; line-height: var(--s-title-leading); letter-spacing: -.01em; }
/* カードの 2 行目。**金額（label）の下で、仕様を 1 行の見出しとして受ける。**
   金額 → 仕様 → 受け持つ範囲、の 3 段で読ませる（2026-08-07・user 指摘でカードへ変更）。 */
.slide[data-layout="points-row"] .slide-point-spec { display: block; margin: 0 0 .5rem; color: var(--ink); font-weight: 700; }
/* 連番はデータに持たせず CSS で振る。**要点に順序の意味は無いので、数の見当をつける印**として置く。
   `--accent-warm-ink` は濃い紙で比 4.31 だが、この寸法（32〜46px）は AA の「大きい文字」（24px）に入り、閾値は 3.0（実測）。 */
.slide[data-layout="points-row"] .slide-points li::before,
.slide[data-layout="points-row"] .slide-points li::before {
  counter-increment: slide-point; content: counter(slide-point, decimal-leading-zero);
  display: block; margin-bottom: .5rem; color: var(--accent-warm-ink);
  font-family: var(--serif); font-size: var(--s-index); font-weight: 500; line-height: 1;
}
.section-dark .slide-points li::before { color: var(--accent-warm); }
/* **付帯資料のカードには連番を振らない**（2026-08-07・user 指摘「01→04 とすると序列感が発生」）。
   工程は 01→04 と進むが、予算サンプルは並列の選択肢で、上下も前後も無い。
   数を落とすと金額が枠の先頭へ上がり、4 段階の差がそのまま最初に読める。 */
.slide[data-role="supplement"][data-layout="points-row"] .slide-points li::before { content: none; }
.section-dark .slide[data-layout="points-row"] .slide-points li { border-top-color: #f4f6f1; }

/* contrast —— 2 分割の対比。**2 件ちょうど。**「動かせない／動かせる」「社内／編集側」のような
   対の関係を、左右対等に置く。中央の縦罫が対比の軸になる。 */
.slide[data-layout="contrast"] .slide-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.4rem; max-width: 62rem; margin-top: 2.4rem; font-size: var(--s-body); line-height: var(--s-body-leading); }
.slide[data-layout="contrast"] .slide-points li { padding: 0 0 0 2rem; border-top: 0; border-left: 1px solid var(--line); }
.slide[data-layout="contrast"] .slide-points li:first-child { padding-left: 0; border-left: 0; }
.slide[data-layout="contrast"] .slide-point-label { display: block; margin: 0 0 .7rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); font-family: var(--serif); font-size: var(--s-emphasis); font-weight: 500; line-height: var(--s-emphasis-leading); letter-spacing: -.02em; }
.section-dark .slide[data-layout="contrast"] .slide-points li { border-left-color: var(--line-dark); }
.section-dark .slide[data-layout="contrast"] .slide-point-label { border-bottom-color: #f4f6f1; }

/* checklist —— 持ち帰って確認する面。チェック印は**字ではなく罫で描く**（書体に依存させない）。 */
.slide[data-layout="checklist"] .slide-points { max-width: 52rem; margin-top: 1.5rem; gap: .75rem; }
/* 3 件以上は 2 列にする。1 列のままだと 1 面（1280×800）に収まらない —— 実測で
   3 件は 323px、2 列なら 203px（2026-08-06）。**件数で列を変えるのは寸法の都合で、
   意味の違いではない。**2 件のときは 1 列のまま（`contrast` と見分けが付かなくなるため）。 */
.slide[data-layout="checklist"] .slide-points:has(> li:nth-child(3)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 3rem; max-width: 62rem;
  margin-top: .9rem; line-height: var(--s-note-leading);
}
.slide[data-layout="checklist"] .slide-points:has(> li:nth-child(3)) .slide-point-label { line-height: 1.3; }
.slide[data-layout="checklist"] .slide-points li { position: relative; padding: 0 0 0 2.4rem; border-top: 0; }
.slide[data-layout="checklist"] .slide-points li::before { content: ""; position: absolute; left: .25rem; top: .55em; width: .8em; height: .42em; border-left: 2px solid var(--accent-warm-ink); border-bottom: 2px solid var(--accent-warm-ink); transform: rotate(-45deg); }
.slide[data-layout="checklist"] .slide-point-label { display: block; margin: 0 0 .25rem; font-family: var(--serif); font-size: var(--s-title); font-weight: 500; line-height: var(--s-title-leading); }
.section-dark .slide[data-layout="checklist"] .slide-points li::before { border-color: var(--accent-warm); }

/* figures —— 数量を主役にする面（The Big Number / The Three Things の系統）。
   **`label` に数量そのものを書く**（8 字以内）。数字を大きく置き、説明を下へ小さく添える。
   罫は上辺だけ。塗らない。cotoria / Glyphria と同じ「塗りは最小限、罫と余白で構造を出す」姿。 */
.slide[data-layout="figures"] .slide-points { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 3rem; max-width: 64rem; margin-top: 1.9rem; font-size: var(--s-note); line-height: var(--s-note-leading); }
.slide[data-layout="figures"] .slide-points li { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.slide[data-layout="figures"] .slide-point-label { display: block; margin: 0 0 .6rem; color: var(--ink); font-family: var(--serif); font-size: var(--s-figure); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.section-dark .slide[data-layout="figures"] .slide-point-label { color: #f4f6f1; }

/* voice —— 読者の声として置く面。
   **表面の見せ方は持てない**（2026-08-05）。表面には `data-layout` を出さないので
   （`build-slides.mjs` の「表面は共通の入口」）、`.slide-question` や `.slide-lead` を
   この属性から狙う規則は一致しない。引用符と見出しの縮小を狙っていた 4 本は落とした。
   いま効いているのは、裏面の組みと行長だけ。**見せ方を足すなら裏面の要素で組む。** */
.slide[data-layout="voice"] { grid-template-columns: minmax(0, 1fr); row-gap: 2.2rem; }
.slide[data-layout="voice"] .slide-copy, .slide[data-layout="voice"] .slide-body { grid-column: 1; }
/* 表裏の境界は `.slide-body` の罫が担う。ここに引くと 2 本並ぶ。 */
.slide[data-layout="voice"] .slide-text { max-width: 44em; }
/* **問いかけの再掲を、引用として見せる**（2026-08-05）。
   「上に声、下に答えの入口」という当初の並びを、表面ではなく**裏面の要素**で作る。
   `.slide-recall` は既定では小さな索引ラベル（罫 ＋ --s-label）なので、罫を消してから組み直す。
   紙では `.slide-recall` を出さない（同じページに表面の問いかけがある）ので、画面だけに効く。 */
.slide[data-layout="voice"] .slide-recall {
  position: relative; max-width: 26em; margin-bottom: 1.4rem; padding-left: 2.2rem;
  color: var(--ink-soft); font-family: var(--serif); font-size: var(--s-lead);
  font-weight: 400; letter-spacing: 0; line-height: 1.7;
}
.slide[data-layout="voice"] .slide-recall::before {
  content: "\201C"; position: absolute; left: 0; top: .08em;
  width: auto; margin: 0; border: 0; vertical-align: baseline;
  color: var(--accent-warm-ink); font-family: var(--serif); font-size: 2.2rem; line-height: 1;
}
.section-dark .slide[data-layout="voice"] .slide-recall::before { color: var(--accent-warm); }

/* statement —— 言い切る面。**要点を持たない。**面いっぱいに文字を詰めず、余白で間を作る。
   **表面の要約を大きくする規則は落とした**（2026-08-05）—— 表面に `data-layout` が
   出ていないので一致せず、実測でも効いていなかった（lead 17.92px / 罫 0px）。
   いま効いているのは裏面の散文を小さくする 1 本だけ。 */
.slide[data-layout="statement"] { row-gap: 1.8rem; }
/* **答えを面の主役にする**（2026-08-05）。要点を持たない面なので、
   標準の `--s-emphasis` より一段上げ、語数の少なさを字の大きさで受ける。
   散文は下へ小さく添えたまま、行長も詰めて従属関係をはっきりさせる。 */
.slide[data-layout="statement"] .slide-answer { max-width: 22em; font-size: var(--s-index); line-height: 1.35; letter-spacing: -.02em; }
.slide[data-layout="statement"] .slide-text { max-width: 34em; margin-top: .5rem; color: var(--ink-soft); font-size: var(--s-note); line-height: var(--s-note-leading); }

/* flow —— 段階を横並びに置き、点線でつなぐ。投影を想定して文字を大きくする。
   構造は cotoria `reports/cotoria_pr.html` の `.flow` / `.fnode` を参考にした。
   **借りたのは並べ方だけで、配色と寸法はこのサイトのトークンを使う。** */
.slide[data-layout="flow"] { grid-template-columns: minmax(0, 1fr); row-gap: 3.6rem; }
.slide[data-layout="flow"] .slide-copy,
.slide[data-layout="flow"] .slide-body { grid-column: 1; }
.slide[data-layout="flow"] .slide-diagram { position: relative; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 1.5rem; background: transparent; }
/* つなぎの点線は箱の後ろを通す。箱は地色で塗って線を隠す。 */
.slide[data-layout="flow"] .slide-diagram::before { content: ""; position: absolute; z-index: 0; top: 3.4rem; left: 6%; right: 6%; border-top: 1px dotted var(--line); }
.slide[data-layout="flow"] .slide-diagram li { position: relative; z-index: 1; padding: 1.5rem 1.2rem 1.6rem; border: 1px solid var(--line); background: var(--paper); }
/* 投影を想定して 1 段だけ大きくする面。**再束縛で行う。** */
.slide[data-layout="flow"] { --s-title: 1.3rem; }
.section-dark .slide[data-layout="flow"] .slide-diagram::before,
.slide[data-layout="flow"].section-dark .slide-diagram::before { border-top-color: var(--line-dark); }
.slide[data-layout="flow"].section-dark .slide-diagram li { border-color: var(--line-dark); background: var(--navy); }
.slide-diagram li { padding: 1rem 1.1rem; background: var(--paper-deep); }
.slide-diagram-index { color: var(--accent-warm-ink); font-size: var(--s-label); font-weight: 700; letter-spacing: .1em; }
.slide-diagram strong { display: block; margin: .3rem 0 .35rem; font-family: var(--serif); font-size: var(--s-title); font-weight: 500; line-height: var(--s-title-leading); }
.slide-diagram p { margin: 0; color: var(--ink-soft); font-size: var(--s-note); line-height: var(--s-note-leading); }
/* 濃い地では枠が明るいまま文字色だけ反転し、見出しの比が 1.10 になっていた（実測）。
   スライドの表と同じ扱いにそろえる（2026-08-02）。 */
.section-dark .slide-diagram { background: var(--line-dark); }
.section-dark .slide-diagram li { background: #33414a; }
.section-dark .slide-diagram-index { color: var(--accent); }
.section-dark .slide-diagram strong { color: #f4f6f1; }
.section-dark .slide-diagram p { color: #b9c2be; }

/* 表のクラスは `.table-wrap` / `.data-table` の 1 系統に統一した（2026-08-04・user 指示）。
   **ここには `.slide-table` の規則が残っていたが、テーマは `.data-table` を出しており
   16 行が 1 つも当たっていなかった**（試作からの写しが取り残されていた・実測）。
   その結果、本番のスライド表だけが**ラベル列の 9rem・濃い地の配色・モバイルのカード化を失っていた。**
   共通の体裁は下の `.data-table` が持つ。ここはスライドの表に固有のものだけを残す。 */
.page-slides .gantt, .page-slides .responsibility-matrix { overflow-x: auto; }
/* ラベル列は 1 行に収まる最小幅を確保する（EP3 の版面原則）。
   これが無いと実測 119px しか取れず、必要な 132px に 13px 足りずに折れる。
   `content.widths` を持つ表は `<colgroup>` が上書きする。 */
.slide .data-table tbody th { width: 9rem; font-size: var(--s-body); }
.section-dark .data-table th, .section-dark .data-table td { border-bottom-color: var(--line-dark); }
.section-dark .data-table tbody th { color: #f4f6f1; }
.section-dark .data-table td { color: #b9c2be; }

@media (max-width: 900px) {
  .page-hero { grid-template-columns: 1fr; min-height: auto; padding: 7rem 0 3rem; }
  .page-hero-index { margin-top: .75rem; }
  .section-intro, .slide { grid-template-columns: 1fr; min-height: auto; padding-top: 5rem; padding-bottom: 4rem; }
  .slide-copy, .slide-body, .slide-next { grid-column: 1; }
  /* メニューレールが本文に近づく幅では、画像を通常フローへ戻す。 */
  .slide[data-face="front"]:has(.slide-front-illustration) { padding-right: 1.5rem; }
  .slide-front-illustration { position: relative; right: auto; bottom: auto; grid-column: 1; justify-self: end; width: min(88%, 27rem); margin: 1.5rem 0 0; }
  /* flow は画面が狭いと横並びが潰れるので縦へ戻す。 */
  .slide[data-layout="flow"] .slide-diagram { grid-auto-flow: row; gap: 1px; }
  .slide[data-layout="flow"] .slide-diagram::before { content: none; }
  /* 要点の横並び・2×2 も同じ理由で縦へ戻す。1 列 160px では連番と見出しが折れる。
     **figures も横並び（grid-auto-flow: column）で、ここに入っていなかった。**
     実測で `notes-scan-resolution-back` が 470px 幅に対して 110px はみ出していた（2026-08-06）。 */
  .slide[data-layout="points-row"] .slide-points,
  .slide[data-layout="figures"] .slide-points { grid-auto-flow: row; gap: 1.6rem; }
  /* checklist の 2 列も同じ理由で縦へ戻す。1 列 147px では説明文が 1 語ずつ折れる（実測）。
     2 列にしたのは 1 面（1280×800）に収めるためで、狭い画面では意味がない。 */
  .slide[data-layout="checklist"] .slide-points:has(> li:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin-top: 1.5rem; line-height: var(--s-body-leading);
  }
  /* モバイルは行をカードへ変形する。`data-label` は PHP・builder とも出している。
     スライドの表だけに掛ける（実績目録は独自の折り返しを持つ）。 */
  .slide .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .slide .data-table tbody th { width: auto; }
  .slide .data-table tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .slide .data-table th, .slide .data-table td { display: block; padding: .2rem 0; border-bottom: 0; }
  .slide .data-table td::before { display: block; color: var(--ink-soft); content: attr(data-label); font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
}

.subpage-footer { margin-top: 5rem; border-top: 1px solid var(--line); }

/* ============================================================
   /contact/ ——他の子ページとは体系を分ける（2026-08-02・user 判断）

   ①索引つき 2 カラムにカードを 13 枚並べたら「ごちゃごちゃして見にくい」。
   ②罫線の定義リスト 3 本に減らしても「これでも過剰」。
     とくに「書ける範囲で構いません」の 5 項目は、**準備するもののチェックリスト**に読めて
     ハードルを上げていた。相談ページで用意させてはいけない。
   ③いまの形は「見出し → ボタン → 電話 → 短い 3 行」だけ。
     **ページの仕事はフォームへ送ることひとつ。**読ませることではない。
   ④想定読者は「初見・IT に不慣れ・高齢者向けくらい」。
     共通の本文は .78〜.88rem だが、ここだけ 1rem 以上・行間 2.0・押せる場所 44px 以上・
     罫線は見える濃さにする。色トークンは共通のまま、ここで新しい色は作らない。
   ============================================================ */
.contact-page {
  padding: 8.5rem calc(var(--rail-width) + 1.5rem) 0 max(2rem, calc((100vw - 1240px) / 2));
  font-size: 1.05rem;
}
/* 幅は「1 文が 1 行に収まるか」で決める。DESIGN §5.3 の 28〜36 字は長い本文の目安で、
   ここは短い文しか無い。34 字の一文が 4 字だけ折り返されるほうが読みにくい。 */
.contact-page > * { max-width: 56rem; }
/* `main > section` にはトップ用の scroll-snap-align が当たる。トップは全画面セクションなので
   それでよいが、このページの節は短いので、スナップが効くとページ先頭（見出し）まで飛ばされて読めない。
   節送りをするページではないので、スナップ対象から外す。 */
.contact-page > section { scroll-snap-align: none; scroll-snap-stop: normal; }
/* 相談ページには全画面の節送りがない。html 側の mandatory snap が残ると、
   フッターの停止位置へ寄せられて先頭の見出しが画面外へ押し出される。 */
html:has(.contact-page) { scroll-snap-type: none; }
html:has(.contact-page) .site-footer { scroll-snap-align: none; }
.contact-page h1 { text-wrap: balance; }

/* 見出しは 2 行に割る。1 行にすると横に伸びて図版と近接しすぎる（2026-08-02・user 判断で差し戻し）。
   折り返し位置は組版側が決める ——自動改行に任せると「前か / ら、」のように語中で割れるため。
   図版は見出しの行から外したままにする（リードと同じ段に置く）。 */
.contact-hero { max-width: none; }
.contact-hero h1 { margin: 1.4rem 0 0; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.3; }
.contact-hero h1 span, .contact-hero h1 em { display: block; }
.contact-hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: end; max-width: 56rem; }

.contact-lead { max-width: 42rem; margin: 1.8rem 0 0; font-size: 1.12rem; line-height: 2.1; }

/* 相談の入口。ページの中心はここ 1 か所だけにする。 */
/* フォームの上に罫線は引かない（2026-08-02・user 判断）。
   ボタンだけで十分に立つので、線を足すと区切りが増えて読みにくくなる。間隔だけで分ける。 */
.contact-action { margin-top: 3rem; }
.contact-action .contact-button { margin-top: 0; min-height: 3.75rem; padding: 1.35rem 2rem; font-size: 1.05rem; }
.contact-note { max-width: 42rem; margin: 1.1rem 0 0; color: var(--ink); font-size: .95rem; line-height: 1.7; }
.contact-tel { display: block; margin: 2.2rem 0 0; }
.contact-tel > span { color: var(--ink); font-size: .95rem; }
.contact-tel a { display: block; width: fit-content; margin-top: .45rem; border-bottom: 2px solid currentColor; padding-bottom: .15rem; color: var(--ink); font-family: var(--serif); font-size: 2rem; letter-spacing: .04em; }
.contact-privacy { max-width: 42rem; margin: .3rem 0 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.7; }
.contact-questionnaire { max-width: 42rem; margin: .8rem 0 0; line-height: 1.7; }

/* 「これは要りません」側だけを 3 行。準備させる項目は並べない。 */
.contact-assure { max-width: 42rem; margin: 0; padding: 0; list-style: none; }
.contact-assure li { position: relative; padding: .55rem 0 .55rem 1.5rem; font-size: 1rem; line-height: 1.95; }
.contact-assure li::before { position: absolute; top: .55rem; left: 0; color: var(--accent-warm-ink); content: "—"; }

/* 手描きの線画を小さくアクセントに置く（2026-08-02・user 判断）。
   トップの写真は全画面の主役だが、ここは違う ——本文の脇に添えるだけで、主役はボタン。
   素材が持つ色（#561d21）はそのまま使う。装飾なので alt="" とし、支援技術には出さない。 */
.contact-figure { width: clamp(8rem, 16vw, 13rem); height: auto; }
.contact-assure-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; margin-top: 2.5rem; }
.contact-figure-sm { width: clamp(6rem, 11vw, 9rem); }

/* 事務所と蔵書ライブラリー。トップのカード行（.guide-grid）と同じ組み方で、
   下部に 4 枚並べる（2026-08-02・user 判断）。**どんな事務所かが一目で分かる**ことが目的なので、
   写真は情報であって装飾ではない —— alt を書き、空にしない。
   罫線は 1px の隙間だけ。/contact/ の他の要素と違い、ここは箱で囲んでよい。 */
.contact-office { max-width: 56rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(17,25,34,.5); }
.contact-office-copy { max-width: 42rem; margin: .8rem 0 0; font-size: .95rem; line-height: 2; }
/* 写真どうしは 1px の罫ではなく余白で離す。見出しは付けない（2026-08-02・user 判断）。
   隙間が地色になるので、grid 側の背景（罫の代わり）は要らない。 */
.office-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.office-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* アクセス。トップの会社概要から移設（2026-08-02・user 判断）。
   住所そのものはトップの `.company-facts` が持ち、ここは行き方だけを持つ。
   このページの読者像に合わせ、共通の .72rem ではなく 1rem 前後で組む。 */
.contact-access { max-width: 42rem; margin: 1.5rem 0 0; font-size: .95rem; line-height: 1.9; }
.contact-access-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.contact-access-links a { padding-bottom: .15rem; font-size: .92rem; line-height: 1.8; }
/* 社名の読み（そうそう）にかけたメッセージ（2026-08-02・user 判断）。
   **会社情報へのリンクはオマケなので、Message はその上に置く。**
   ページの読後感を決めるのはこちらで、リンクは最後に小さく添えるだけ。
   明朝・大・識別色で組む。--accent-warm は paper 上 1.43:1 なので、AA を満たす -ink 側を使う。
   折り返しは <br> で組版側が決める —— 洒落が 2 拍で落ちるようにする。 */
.contact-sign { margin: 3rem 0 .5rem; color: var(--accent-warm-ink); font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2.4rem); line-height: 1.6; }
/* 375px で 12 字 × 24px = 288px となり、使える幅 279px を超えて 2 拍が 4 行に割れていた。
   最小値を 1.3rem まで下げて、半分ずつが 1 行に収まるようにする。 */
/* 下線は文字幅に合わせる。display: flex にすると段の幅いっぱいに伸びる。
   トップの .section-link と同じ inline-flex のまま使う。 */
/* 会社情報へのリンクは置かない（2026-08-02・user 判断）。オマケの操作をページの締めに残すと、
   Message で終わる読後感を弱める。会社情報へはグローバルナビの COMPANY から行ける。 */

/* フッタは main の外に出してトップと同じ --shell 幅で組む。1 カラムの本文幅に縛らない。 */
.contact-site-footer { margin-top: 2rem; border-top: 1px solid rgba(17,25,34,.5); }

.plain-page { max-width: var(--shell); margin: 0 auto; padding: 10rem 1.5rem 6rem; }
/* 採用・プライバシーはスライドではなく通常スクロールの情報ページ。
   absolute の共通ヘッダーだと本文とともに画面外へ出るので、常に操作できる位置に留める。 */
body:has(.plain-page) .site-header { position: fixed; z-index: 30; }
html:has(body .plain-page) { scroll-snap-type: none; }
body:has(.plain-page) .section-jump-controls { display: none; }
.plain-page-header { max-width: 56rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(17,25,34,.5); }
.plain-page-header h1 { margin: 1.2rem 0; font-family: var(--serif); font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: 1.15; }
.plain-page-body { max-width: 56rem; padding-top: 3rem; }
.plain-page-body section + section { margin-top: 3rem; }
.plain-page-body h2 { margin: 0 0 .8rem; font-family: var(--serif); font-size: 1.35rem; }
.plain-page-body p { margin: 0; color: var(--ink-soft); line-height: 2; }
.plain-page-body p + p { margin-top: .6rem; }
/* 募集要項は 1 行 1 条件で読ませる。段落に畳むと条件が埋もれる。 */
.plain-list { margin: 0; padding: 0; color: var(--ink-soft); line-height: 2; list-style: none; }
.plain-list li { padding-left: 1.1rem; text-indent: -1.1rem; }
.plain-list li::before { color: var(--accent-warm-ink); content: "・"; }
.plain-page-date { margin-top: 4rem !important; font-size: .82rem; }
.plain-site-footer { max-width: var(--shell); margin: 0 auto; }

@media (max-width: 900px) {
  /* --rail-width は :root で 3.75rem / 3rem に縮む（.subpage が持つ --rail-w は固定 4.5rem で別物）。
     縮んだぶん余白側を足して、レールとの間を 24px 確保する。 */
  .contact-page { padding: 7rem calc(var(--rail-width) + 1.5rem) 0 1.5rem; }
  .contact-tel a { font-size: 1.75rem; }
  /* 狭い画面では 4 列だと 1 枚 80px を切る。2 列にする。 */
  .office-grid { grid-template-columns: repeat(2, 1fr); }
  /* 狭い画面では図版を本文の下へ回す。横に並べると本文が 1 行 10 字を切る。 */
  .contact-hero-foot, .contact-assure-row { grid-template-columns: minmax(0, 1fr); }
  .contact-figure { width: clamp(7rem, 34vw, 11rem); }
  .contact-figure-sm { width: clamp(6rem, 28vw, 9rem); }
}

@media (max-width: 900px) {
  .subpage { grid-template-columns: minmax(0, 1fr); padding-inline: 1.5rem calc(var(--rail-w) + .75rem); }
  .subpage > .subpage-index, .subpage > .subpage-content { grid-column: 1; }
  .subpage > .subpage-index { grid-row: 2; }
  .subpage > .subpage-content { grid-row: 3; }
  .subpage > .subpage-footer { grid-row: 4; }
  .subpage-index { position: static; padding-top: 2.5rem; }
  .subpage-index ol { display: flex; flex-wrap: wrap; gap: .4rem; border-top: 0; }
  .subpage-index a { display: inline-flex; gap: .45rem; padding: .45rem .75rem; border: 1px solid var(--line); }
  .subpage-content { padding-top: 2.5rem; }
  .subpage-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .guide-choices { grid-template-columns: repeat(2, 1fr); }
  .task-grid { grid-template-columns: repeat(2, 1fr); }
  .gantt-checkpoints { grid-template-columns: 1fr; }
  /* ガントは横スクロールさせず、行カードへ変形する（DESIGN §5.3）。
     帯は幅が要る表現なので畳み、時期はテキストの「時期」列で読ませる。 */
  .gantt-table, .gantt-table tbody, .gantt-table tbody tr, .gantt-table tbody th, .gantt-table tbody td { display: block; width: auto; }
  .gantt-table thead, .gantt-table colgroup, .gantt-table tbody td.gantt-cell { display: none; }
  .gantt-table tbody tr { position: relative; padding: 1rem 0 1rem 2.6rem; }
  .gantt-table tbody th, .gantt-table tbody td { padding: 0; }
  .gantt-table .wbs { position: absolute; top: 1rem; left: 0; }
  .gantt-table caption { display: block; }
  .gantt-table tbody td.num { display: inline-block; margin: .5rem .9rem 0 0; }
  /* 列見出しが消えるので、期間を各セルに戻す */
  .gantt-table tbody td.num::before { content: "所要 "; }
  /* 帯を畳む幅では、時期を行の属性から出す（2026-08-02）。 */
  .gantt-table tbody tr::after { display: block; margin-top: .4rem; color: var(--ink-soft); font-size: .68rem; content: "▸ " attr(data-period); }

  /* 制作実績も横スクロールさせず行カードへ変形する（DESIGN §5.3）。
     列見出しが消えるので、各セルに項目名を ::before で戻す。 */
  .table-wrap:has(.works-table) { overflow-x: visible; border-top: 0; }
  .works-table { min-width: 0; }
  .works-table, .works-table caption, .works-table tbody, .works-table tbody tr,
  .works-table tbody th, .works-table tbody td { display: block; width: auto; }
  .works-table thead { display: none; }
  .works-table tbody tr { padding: 1rem 0; border-top: 1px solid var(--line-dark); border-bottom: 0; }
  .works-table th[scope="row"] { padding: 0 0 .5rem; font-size: 1.05rem; }
  .works-table td { padding: .15rem 0; white-space: normal; }
  .works-table td.num { text-align: left; }
  .works-table td::before { display: inline-block; min-width: 5.2rem; color: var(--line-dark); content: attr(data-label) "："; font-size: .62rem; font-weight: 700; }

  /* 分担表・比較表も横スクロールさせず行カードへ変形する（DESIGN §5.3）。
     列見出しが消えるので、各セルに項目名を ::before で戻す。 */
  .responsibility-matrix { overflow-x: visible; }
  .matrix-row { grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 1rem 0; }
  .matrix-row.matrix-head { display: none; }
  .matrix-row > * { border-right: 0; padding: .2rem 0; }
  .matrix-row > :first-child { color: var(--accent-warm-ink); font-family: var(--serif); font-size: .9rem; }
  .matrix-row > strong { margin-bottom: .3rem; font-size: 1.05rem; }
  .matrix-row > span[data-label]::before { display: block; margin-bottom: .1rem; color: var(--line-dark); content: attr(data-label); font-size: .6rem; font-weight: 700; letter-spacing: .08em; }
}
@media (max-width: 560px) {
  .subpage { padding-top: 7rem; }
  .guide-choices, .task-grid { grid-template-columns: 1fr; }
  .callout, .proof-grid, .contact-options { grid-template-columns: 1fr; }
  .note-item { grid-template-columns: 1fr; gap: .6rem; }
  .catalog-labels, .catalog-item { grid-template-columns: 1.2fr repeat(3, .8fr); gap: .5rem; }
}

/* main のスライド群の外にあるフッターも、mandatory snap の停止点にする。
   これが無いと最後のスライドからフッターへ移動できず、サブページでフッターが消えたように見える。 */
/* グランドメニューの補助導線。主導線と同じ重さにしない。 */
/* 導入の直下。主導線（.nav-list）の末尾ではなく、左の柱に添える（2026-08-06・user 指示）。 */
.nav-sub { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(17,25,34,.28); }
.nav-sub a { color: var(--ink-soft); font-size: .68rem; letter-spacing: .04em; text-decoration: none; }
.nav-sub a:hover, .nav-sub a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }
.nav-sub a[aria-current="page"] { color: var(--ink); }
/* 発信・関連サイト（2026-08-06・user 指示）。フッタにしか無く、メニューを開いた人には見えなかった。
   主導線と同じ大きさにはせず、補助行の下に小さく畳んで並べる。 */
.nav-external { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(17,25,34,.28); }
.nav-external-label { flex-basis: 100%; margin: 0 0 .15rem; color: rgba(17,25,34,.62); font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.nav-external a { color: var(--ink-soft); font-size: .68rem; letter-spacing: .04em; text-decoration: none; }
.nav-external a:hover, .nav-external a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }
.site-footer { display: grid; grid-template-columns: 1fr 1.2fr 1.9fr auto; gap: 1.5rem; align-items: start; width: var(--shell); padding: 2rem 0; margin-inline: auto; color: var(--ink-soft); font-size: .65rem; scroll-snap-align: start; }
.footer-brand img { width: 120px; }
.footer-brand p, .footer-credit p { margin: .45rem 0 0; letter-spacing: .08em; }
.footer-sitemap { display: flex; flex-wrap: wrap; gap: .55rem 1.2rem; align-items: center; min-width: 0; padding-top: .4rem; }
.footer-sitemap a { border-bottom: 1px solid transparent; }
.footer-sitemap a:hover, .footer-sitemap a:focus-visible { border-bottom-color: currentColor; }
.footer-meta { margin: .35rem 0 0; line-height: 1.7; }
.footer-links { display: flex; flex-wrap: wrap; gap: .45rem .85rem; align-items: center; min-width: 0; padding-top: .4rem; font-size: .6rem; }
.footer-links-label { flex-basis: auto; margin: .35rem .5rem .25rem 0; color: var(--ink); font-weight: 700; }
.footer-links-label:first-child { margin-top: 0; }
.footer-links a { border-bottom: 1px solid transparent; }
.footer-links a:hover, .footer-links a:focus-visible { border-bottom-color: currentColor; }
.footer-credit { text-align: right; }

@media screen and (min-width: 901px) {
  .about, .guide, .tips, .company { align-content: start; padding-top: 6rem; padding-bottom: 1rem; }
  .company-info-card, .company-contact-panel { height: 100%; min-height: 0; margin-top: 0; }
  .company-contact { flex: 1 1 auto; }
  .company-contact-visual { aspect-ratio: 16 / 9; }
}

/* 901〜1199px はデスクトップの骨格を保ったまま、横幅だけが先に細くなる帯。
   1280px の版面を縮小するだけでは、トップの本文と会社情報が縦にあふれ、
   9工程の flow は各箱の幅が足りずに面を超える。ここでは開始座標（上端 6rem）と
   文字の基本サイズを変えず、画像・カード・flow の器だけを中間幅に合わせる。
   1200px 以上は既存のデスクトップ規則へ戻す。 */
@media screen and (min-width: 901px) and (max-width: 1199px) {
  .about, .works, .guide, .tips, .company { gap: 1.5rem 3vw; }
  .about-visual, .guide-visual, .works-visual { aspect-ratio: 2.15 / 1; }
  .about-preview-note, .guide-intro, .works-preview-note, .tips-note { margin-top: 1.25rem; }
  .section-intro h2, .guide-heading h2, .tips-heading h2 { margin-top: 1rem; margin-bottom: 1.25rem; font-size: clamp(2.2rem, 3.8vw, 3.4rem); }
  .works-overview { gap: 1.5rem 3vw; margin-bottom: 2rem; }
  .works-copy h2 { margin-top: 1rem; margin-bottom: 1.25rem; font-size: clamp(2.2rem, 2.8vw, 3.2rem); }
  .about-grid, .guide-grid { margin-top: 1rem; }
  .about-card, .guide-card, .works-type { min-height: 8rem; padding: .8rem; }
  .about-card h3, .works-type h3, .guide-card h3 { margin-top: 1.35rem; }
  .about-card .card-action, .works-type .card-action, .guide-card .card-action { right: .9rem; bottom: .8rem; }

  /* 左の会社情報を潰さない。映像は補助なので横長にして、本文の開始位置を保つ。 */
  .company { grid-template-columns: minmax(15rem, .9fr) minmax(0, 1.1fr); gap: 1.5rem 3vw; }
  .company-contact-visual { aspect-ratio: 16 / 6; }
  .company-contact { padding: 1rem 1.2rem 1rem; }
  .company-contact-copy h2 { margin-top: .5rem; margin-bottom: .75rem; font-size: clamp(1.7rem, 2.7vw, 2.5rem); }
  .company-contact-copy > p:not(.card-label) { font-size: .8rem; }
  .company-contact .contact-button { margin-top: .5rem; padding: .7rem .9rem; }
  .company-facts div { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .8rem; padding: .4rem 0; }
  .company-facts dt, .company-facts dd { line-height: 1.5; }

  /* 付帯資料の 9工程は、900px 以下の行カード化に先行して 3×3 にする。
     横一列の点線はこの幅では意味を持たないため、罫線のグリッドへ切り替える。 */
  .slide[data-layout="flow"] .slide-diagram { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
  .slide[data-layout="flow"] .slide-diagram::before { content: none; }
  .slide[data-layout="flow"] .slide-diagram li { padding: 1rem .8rem 1.1rem; border: 0; }
  .slide[data-layout="flow"] .slide-diagram strong { font-size: var(--s-title); }
}

/* 責任分担表は 9 行を持つため、1280×800 の基準面では
   共通表の行間のままだと本文と教訓の領域を圧迫する。文字を小さくして内容を削るのではなく、
   このユニットの表だけセル内の上下を詰め、ラベル列も必要幅に合わせる。 */
@media screen and (min-width: 901px) and (max-width: 1440px) {
  .slide[data-kind="responsibility-matrix"] .data-table th,
  .slide[data-kind="responsibility-matrix"] .data-table td { padding: .18rem .5rem; font-size: .72rem; line-height: 1.3; }
  .slide[data-kind="responsibility-matrix"] .data-table tbody th { width: 7rem; }
}

@media screen and (min-width: 901px) and (max-width: 960px) {
  .slide[data-kind="responsibility-matrix"] .data-table th,
  .slide[data-kind="responsibility-matrix"] .data-table td { padding: .1rem .35rem; font-size: .64rem; line-height: 1.2; }
  .slide[data-kind="responsibility-matrix"] .data-table tbody th { width: 6rem; }
}

/* 901px 付近では、表裏の役割は変えずに要点の間隔だけを調整する。
   連番・チェック項目の本文とラベルは残し、上端 6rem の開始位置も動かさない。 */
@media screen and (min-width: 901px) and (max-width: 1199px) {
  .slide[data-layout="checklist"] { row-gap: 1.8rem; }
  .slide[data-layout="points-row"] .slide-points { margin-top: 1.9rem; column-gap: 2rem; }
  .slide[data-layout="checklist"] .slide-points:has(> li:nth-child(3)) { margin-top: .55rem; gap: .3rem 2rem; }
  .slide[data-layout="checklist"] .slide-points:has(> li:nth-child(3)) .slide-point-label { margin-bottom: .15rem; font-size: 1rem; line-height: 1.25; }
}

/* figures は 3 件を横に並べる型。1440×800 では、本文を削らずに
   型の内側の上下余白だけを少し詰めて、教訓まで同じ面へ戻す。 */
@media screen and (min-width: 901px) and (max-width: 1440px) {
  .slide[data-layout="figures"] { row-gap: 1.25rem; }
  .slide[data-layout="figures"] .slide-points { margin-top: 1.5rem; column-gap: 2rem; }
  .slide[data-layout="figures"] .slide-points li { padding-top: .9rem; }
  .slide[data-layout="figures"] .slide-point-label { margin-bottom: .4rem; }
  .slide[data-layout="figures"] .slide-lesson { margin-top: 1rem; padding-top: .75rem; }
}

.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

@media (max-width: 900px) {
  :root { --shell: min(calc(100% - 3rem), 680px); }
  .site-header { padding: 1rem 1.5rem; }
  .brand { width: 126px; }
  :root { --rail-width: 3.75rem; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-note { display: none; }
  .hero-copy { width: min(39rem, calc(100% - 3rem)); margin-left: max(4rem, calc((100vw - 680px) / 2 + 3rem)); }
  .hero-rail { left: 1.5rem; }
  .about, .guide, .tips { grid-template-columns: 1fr; gap: 3rem; }
  .about, .works, .guide, .tips, .company { min-height: auto; }
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  .about .section-intro, .guide-heading, .guide-intro, .tips-heading, .tips-visual { grid-column: 1; }
  .about-visual { grid-column: 1; grid-row: auto; margin-top: 0; }
  .works-visual, .guide-visual, .company-contact-visual { height: auto; }
  .guide-visual { grid-column: 1; grid-row: auto; }
  .about-preview-note { grid-column: 1; grid-row: auto; }
  .nav-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .nav-inner > .nav-intro, .nav-inner > .nav-list { grid-row: auto; grid-column: 1; }
  .company { grid-template-columns: 1fr; gap: 2rem; }
  .company-info-card, .company-contact-panel { grid-column: 1; }
  .company-contact-visual { aspect-ratio: 16 / 9; min-height: 0; }
  .company-contact { gap: 2rem; }
  .guide-grid { grid-template-columns: repeat(3, 1fr); }
  .works-overview { grid-template-columns: 1fr; gap: 2rem; margin-left: 0; }
  .works-visual { aspect-ratio: 1.5 / 1; order: 2; }
  .works-copy { order: 1; }
  .works-types { grid-template-columns: repeat(2, 1fr); }
  .works-type { min-height: var(--card-min-height); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .works-type:nth-child(2n) { border-right: 0; }
  .works-type:nth-last-child(-n + 2) { border-bottom: 0; }
  .guide-intro { padding-bottom: 0; }
  .guide-grid { margin-top: 0; }
}

@media (max-width: 560px) {
  :root { --shell: min(calc(100% - 2rem), 680px); }
  .section-dark, .section-paper { padding-inline: 1rem; }
  /* **サブページの左の帯は 560px 以下では空き地**（2026-08-06・実測）。
     `.page-slides > section` の左 padding `--edge + --rail-gutter` は縦組みラベル
     （`.section-index`）のための帯だが、そのラベルは下の規則で通常フローの横組みへ移る。
     375px で左 92px・右 72px を取り、**本文に 211px しか残っていなかった。**
     左はページ共通の 1rem へ戻す。右はメニューレール（`--rail-width`）の実寸なので残す。
     詳細度は基底と同じ 0,2,1 なので、後勝ちで当たる。 */
  .page-slides > section,
  .page-slides > .page-hero { padding-inline: 1rem max(1rem, calc(var(--rail-width) + 1rem)); }
  /* **導入の縦組みレールは 560px 以下では出さない**（2026-08-06・user 判断）。
     飾りに画面の 24.5%（92px / 375px・実測）を使っていた。
     スクロールできることは phone では自明で、ページ名は直上の eyebrow が
     「担当者向け手引き / GUIDE」と横組みで既に出している —— 縦組みは二重。 */
  .page-hero-rail { display: none; }
  .slide[data-face="front"]:has(.slide-front-illustration) { padding-right: 1rem; }
  .section-index { position: relative; top: auto; left: auto; flex-direction: row; padding-bottom: 3rem; writing-mode: horizontal-tb; }
  .section-dark .section-index, .section-paper .section-index { left: auto; }
  .hero { min-height: auto; grid-template-columns: 1rem 1fr; padding-top: 7.5rem; padding-bottom: 5rem; }
  .hero { min-height: var(--viewport-height); display: block; padding: 0; }
  .hero::after { background: rgba(247,247,243,.42); }
  .hero-copy { width: calc(100% - 2rem); margin-left: 1rem; padding: 27vh 0 5rem; }
  .hero-copy h1 { font-size: clamp(2.8rem, 13vw, 5rem); white-space: normal; }
  .hero-lead { font-size: 1rem; }
  .hero-rail { left: 1rem; bottom: 1rem; }
  .mobile-only { display: block; }
  h2 { font-size: clamp(2.8rem, 14vw, 5rem); }
  .about, .works, .guide, .tips, .company { padding-top: 5rem; padding-bottom: 6rem; }
  .section-intro h2 { font-size: clamp(2.5rem, 10vw, 3.6rem); }
  .guide-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .works-overview { margin-left: 0; }
  .works-types { grid-template-columns: 1fr; }
  .works-type, .works-type:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .works-type:last-child { border-bottom: 0; }
  .guide-heading h2, .tips-heading h2 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .site-footer { display: block; width: var(--shell); }
  .footer-sitemap { margin-top: 1.5rem; }
  .footer-credit { margin-top: 1.5rem; text-align: left; }
  :root { --rail-width: 3rem; }
  .site-nav { padding: 5rem 3.5rem 3rem 1rem; }
  .nav-inner { gap: 2rem; }
  .nav-intro { display: none; }
  .nav-list a { grid-template-columns: 4.5rem 1fr auto; gap: .5rem; padding: .65rem 0; }
  .nav-list a strong { font-size: 1.1rem; line-height: 1.5; }
  .nav-list a span { font-size: .54rem; }
  .company-copy { margin-left: 0; }
}

/* 375px 前後では、会社情報と問い合わせ側の見出しが flex/grid の
   最小幅を 423px まで押し広げ、文書全体の横スクロールを発生させていた。
   モバイル画面だけ列とカードを器へ収め、見出しは幅内で折り返す。 */
@media screen and (max-width: 560px) {
  .company { grid-template-columns: minmax(0, 1fr); }
  .company-info-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .company-info-card h2 {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
  }
  .company-contact,
  .company-contact-copy {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .company-contact-copy h2 span { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-intro-line { opacity: 1; transform: none; animation: none; }
  .hero-char { opacity: 1; transform: none; animation: none; }
  .page-intro { opacity: 0; visibility: hidden; }
}

@media print {
  @page { size: A4 landscape; margin: 0; }
  @page info-portrait { size: A4 portrait; margin: 0; }

  /* Notes の読書ダイアログは画面専用。紙は索引だけを出す。 */
  .note-reader { display: none !important; }
  /* 検索と絞り込みは操作なので紙に出さない。貼り付く見出しも紙では止める。 */
  .note-search { display: none !important; }
  .note-index-group-title { position: static; padding-top: 0; }
  .note-index-group-title::before { display: none; }
  .note-index-group { break-inside: auto; padding-top: 6mm; }
  .note-row { break-inside: avoid; page-break-inside: avoid; }

  body.route-contact, body.route-recruit, body.route-privacy { page: info-portrait; }

  :root {
    --viewport-height: 210mm;
    --shell: 265mm;
    --section-column-gap: 12mm;
    --copy-line-height: 1.45rem;
  }

  html { width: 297mm; background: var(--paper); scroll-snap-type: none; }
  body { width: 297mm; min-width: 297mm; background: var(--paper); font-size: 9pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html:has(body.route-contact), html:has(body.route-recruit), html:has(body.route-privacy),
  body.route-contact, body.route-recruit, body.route-privacy { width: 210mm; min-width: 210mm; }
  .page-intro, .site-progress, .menu-rail, .site-nav, .skip-link, .hero-rail, .section-jump-controls { display: none !important; }
  .site-footer { display: none !important; }
  .site-header { position: absolute; display: block; padding: 7mm 16mm; }
  .brand { width: 32mm; }
  .header-note { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* **縦ラベルは紙に出さない**（DESIGN §3.7「現在地・章立て・進捗バーは印刷に出さない」）。
     印刷のレイアウト幅が 700〜799px でモバイル側の `position: relative` を拾い、
     **面の頭に 3rem の余白ごと積まれて開始位置を 40〜70mm まで押し下げていた**（実測）。 */
  .page-slides > section > .section-index,
  main > section > .section-index { display: none; }
  body.route-contact .site-header, body.route-recruit .site-header, body.route-privacy .site-header { display: none !important; }
  body.route-contact .contact-page, body.route-recruit .plain-page, body.route-privacy .plain-page { width: 210mm; max-width: none; margin: 0; padding: 16mm 16mm 12mm; }
  body.route-contact .contact-page > *, body.route-recruit .plain-page-header, body.route-recruit .plain-page-body, body.route-privacy .plain-page-header, body.route-privacy .plain-page-body { max-width: 178mm; }
  body.route-contact .contact-page h1 { font-size: 24pt; }
  body.route-recruit .plain-page-header h1, body.route-privacy .plain-page-header h1 { font-size: 24pt; }

  main > section.section-shell {
    box-sizing: border-box;
    /* **幅と高さを mm で固定しない。**印刷のレイアウト幅を超えると版面ごと縮む（実測）。
       高さも 210mm ＋ padding で紙をはみ出す。1 面 1 ページは `break-after: page` が担う。 */
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    /* **面の開始座標は紙でも上端にそろえる**（2026-08-04・実測で判明）。
       高さが 210mm 固定なので、`align-content: center` のままだと中身の量で
       開始位置が 40.1 / 70.2 / 64.1 / 67.3mm と **30mm もばらついていた。**
       画面側は既に `align-content: start` にしてある。紙も同じにする。 */
    align-content: start;
  }
  main > section {
    margin: 0;
    overflow: hidden;
    break-after: page;
    page-break-after: always;
  }
  main > section:last-child { break-after: auto; page-break-after: auto; }
  main > section.section-dark, main > section.section-paper { padding-inline: 16mm; }

  .hero { padding: 0; }
  .hero-copy { width: 150mm; margin-left: 20mm; padding-top: 63mm; }
  .hero-copy h1 { margin: 7mm 0 7mm; font-size: 43pt; }
  .hero-lead { font-size: 11pt; line-height: 1.7; }

  .about, .guide { align-content: center; gap: 7mm 12mm; padding-top: 18mm; padding-bottom: 13mm; }
  .about { grid-template-columns: 1.06fr .94fr; grid-template-rows: auto auto; }
  .about .section-intro { grid-column: 2; grid-row: 1; min-width: 0; }
  .about-visual { grid-column: 1; grid-row: 1; }
  .guide { grid-template-columns: .94fr 1.06fr; }
  .guide-heading { grid-column: 1; grid-row: 1; min-width: 0; }
  .guide-visual { grid-column: 2; grid-row: 1; }
  .section-intro h2, .guide-heading h2 { margin-bottom: 8mm; font-size: 28pt; }
  .body-copy { font-size: 10pt; line-height: 1.7; }
  .about-visual, .guide-visual, .works-visual { aspect-ratio: 1.5 / 1; }
  .about-grid, .guide-grid { grid-template-columns: repeat(4, 1fr); grid-row: 2; margin-top: 4mm; }
  .about-card, .guide-card, .works-type { min-height: 35mm; padding: 4mm; }
  .about-card h3, .works-type h3, .guide-card h3 { margin-top: 5mm; font-size: 13pt; }
  .about-card p, .works-type p, .guide-card p { padding-bottom: 6mm; font-size: 8pt; line-height: 1.5; }
  .about-card .card-action, .works-type .card-action, .guide-card .card-action { right: 4mm; bottom: 3mm; font-size: 7pt; }

  .works { justify-content: flex-start; align-content: start; padding: 18mm 16mm 12mm; }
  .works-overview { grid-template-columns: 1.06fr .94fr; gap: 8mm 12mm; margin-bottom: 10mm; }
  .works-visual, .works-copy { order: initial; }
  .works-types { grid-template-columns: repeat(4, 1fr); }
  .works-copy h2 { font-size: 28pt; }
  .works-preview-note { margin-top: 6mm; }

  .tips { grid-template-columns: .85fr 1.15fr; grid-template-rows: auto; align-content: start; gap: 7mm 12mm; padding: 18mm 16mm 13mm; }
  .tips-heading { grid-column: 1; grid-row: 1; }
  .tips-visual { grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 3 / 2; }

  .company { grid-template-columns: 1fr 1.2fr; grid-template-rows: auto auto; align-content: start; gap: 6mm 18mm; padding: 18mm 16mm 13mm; }
  .company-info-card { grid-column: 1; height: auto; min-height: 0; }
  .company-contact-panel { grid-column: 2; height: auto; min-height: 0; }
  .company-info-card h2 { margin: 4mm 0 3mm; font-size: 20pt; }
  .company-facts { margin-top: 4mm; }
  .company-facts div { grid-template-columns: 26mm minmax(0, 1fr); gap: 5mm; padding: 1.5mm 0; }
  .company-facts dt, .company-facts dd { font-size: 7.5pt; line-height: 1.45; }
      .company-contact-visual { aspect-ratio: 16 / 9; }
  .company-contact-visual { display: grid; place-items: center; background: var(--paper-deep); }
  .company-contact-visual iframe { display: none; }
  .company-contact-visual::after { color: var(--ink-soft); content: "事務所紹介映像 / YouTube"; font-size: 9pt; letter-spacing: .08em; }
  .company-contact { gap: 2mm; padding: 5mm 6mm; }
  .company-contact-copy h2 { margin: 2mm 0 3mm; font-size: 24pt; }
  .company-contact-copy > p:not(.card-label) { font-size: 8pt; line-height: 1.45; }
  .company-contact-copy .contact-phone { margin-top: 2mm; }
  .company-contact .contact-button { margin-top: 2mm; padding: 3mm 4mm; }
  .site-footer { gap: 6mm; padding: 5mm 0 0; font-size: 6.5pt; }
  .footer-brand img { width: 28mm; }

  /* `/contact/` は相談の行動ページ。印刷用レイアウトは設けない。 */

  /* ---- 子ページ ----
     決裁者が印刷して社内で回す。索引は画面用の導線なので落とし、
     本文を 1 カラムにする。A4 横 1 枚に WBS＋ガントが載ることを狙う。 */
  .subpage { display: block; max-width: none; padding: 12mm 16mm; }
  .subpage-index { display: none !important; }
  .subpage-content { display: block; padding-top: 6mm; }
  .subpage-header { padding-bottom: 6mm; }
  .subpage-header h1 { font-size: 24pt; }
  .subpage-section { break-inside: auto; }
  /* 1 セクション＝1 印刷ページ。必要なところだけ抜いて社内へ配れるようにする。 */
  /* ヘッダは absolute のままだと導入と重なる。サブページでは落とす。 */
  body:has(.page-slides) .site-header { display: none !important; }
  /* 全面画像は印刷に出さない。空の面を作り、インクも食う。 */
  .section-visual, .section-anchor, .slide-mark, .page-hero-rail, .nav-chapters, .site-progress { display: none !important; }
  /* ---- 紙の受入条件：面の開始位置は 12mm に固定する（2026-08-04・user 判断） ----
     **PDF 実測を正とする。**DOM 実測と食い違ったら PDF に合わせる。
     **`width: 297mm` を書かない。**印刷のレイアウト幅は 700〜799px（実測）で、
     297mm＝1122px はそれを超える。超えると Chrome が版面ごと縮めて紙に合わせ、
     **12mm と書いた余白が 5.9mm になって出ていた**（実測）。幅は紙に任せる。 */
  .page-slides > section,
  .page-slides .note-slide > .slide {
    box-sizing: border-box;
    display: block; width: auto; min-height: 0; padding: 12mm 18mm;
    break-inside: avoid; page-break-inside: avoid;
    break-after: page; page-break-after: always;
  }
  /* 画面用の `.page-slides > section.slide` は詳細度が 0,3,1 で、
     上の `.page-slides > section`（0,2,1）を**上書きしてしまう**。同じ詳細度で当て直す。 */
  .page-slides > section.slide,
  .page-slides .note-slide > .slide,
  .page-slides > section.section-intro,
  .page-slides > section.group-intro {
    box-sizing: border-box;
    align-content: start;
    padding: 12mm 18mm;
    padding-top: 12mm;
  }
  /* 見出しの上マージンが `.slide-copy` を突き抜けて開始位置をずらすのを止める
     （マージンの相殺。`.slide-mark` が print で display:none になるため先頭が見出しになる）。 */
  .page-slides > section > .slide-copy,
  .page-slides .note-slide > .slide > .slide-copy,
  .page-slides > section > .section-copy,
  .page-slides > section > .group-copy { margin-top: 0; }
  .page-slides > section .slide-copy > :first-child,
  .page-slides .note-slide > .slide .slide-copy > :first-child,
  .page-slides > section .section-copy > :first-child,
  .page-slides > section .group-copy > :first-child { margin-top: 0; }
  /* 行長を戻す。297mm 幅にベタで流すと 1 行 100 字を超えて読めない。 */
  .page-slides .slide-copy, .page-slides .section-copy, .page-slides .group-copy,
  .page-slides .slide-text, .page-slides .slide-lead,
  .page-slides .section-copy .body-copy { max-width: 150mm; }
  /* 導入は実測 50mm しかないので、当初は次のチャプターと同じ面へ流していた
     （2026-08-02・A4 横の最適化）。**その決定は面が表裏に割れる前のもの。**
     いまは 1 ユニットが表＋裏の 2 面で 160mm 前後あり、導入 50mm と足すと 210mm を超える。
     結果、あふれた 1 行だけが次の紙へ落ち、**下 200mm が白紙のページが出ていた**（実測）。
     導入を独立させ、**1 ユニット 1 ページを全ユニットで守る**ほうを採る（2026-08-05）。
     白紙は残るが、1 行だけのページより少ない。 */
  .page-slides > .page-hero {
    display: block; width: 297mm; min-height: 0; padding: 12mm 18mm 6mm;
    break-inside: avoid; page-break-inside: avoid;
  }
  .page-slides > section:last-of-type,
  .page-slides .note-slide:last-child > .slide:last-of-type { break-after: auto; page-break-after: auto; }
  .page-hero { display: block; width: auto; min-height: 0; padding: 0 0 6mm; }
  .page-hero h1 { font-size: 24pt; }
  /* 上マージンを持たせない。`.slide-mark` が print で display:none になるため、
     見出しの上マージンが `.slide-copy` を突き抜けて面の開始位置を 3mm ずらしていた（実測）。 */
  /* **同じトークンを pt へ置き換える。**面ごとの print 指定を書かない（2026-08-04・組版の統一）。 */
  .slide, .page-slides > section {
    /* 見出しの行間は画面と同じ 1.05 にする。**1.25 にしたら面の開始が 12.5 → 13.0mm へ下がり、
       受入（12mm ±1mm）を割った**（2026-08-04・刷って実測）。行間は版面の起点そのもの。 */
    --s-question: 18pt; --s-question-leading: 1.05;
    --s-emphasis: 14pt; --s-emphasis-leading: 1.6;
    --s-lead: 10pt; --s-lead-leading: 1.75;
    --s-title: 11pt; --s-title-leading: 1.5;
    --s-body: 9pt; --s-body-leading: 1.9;
    --s-note: 8.5pt; --s-note-leading: 1.75;
    --s-index: 20pt; --s-figure: 22pt; --s-label: 8pt;
  }
  .slide-copy h2, .slide-copy h3, .section-copy h2 { margin: 0 0 3mm; }
  /* 紙では表と裏が同じページに載る。表の問いかけは見出しの寸法に戻す（画面の 5.4rem は紙で溢れる）。 */
  .slide[data-face="front"] { --s-question: 18pt; --s-question-leading: 1.05; }
  /* **上マージンを 0 に戻す。**画面用の 1.2rem がそのまま効いて、面の開始が 12.5 → 17.8mm へ
     下がっていた（2026-08-04・刷って実測）。詳細度が print 側の見出し規則より高い。 */
  .slide[data-face="front"] .slide-question { margin: 0 0 3mm; letter-spacing: normal; text-wrap: balance; }
  .slide[data-face="front"] .slide-lead { max-width: 150mm; }
  .slide[data-layout="table-emphasis"], .slide[data-layout="contrast"],
  .slide[data-layout="checklist"], .slide[data-layout="points-row"] { row-gap: 2mm; }
  .slide-lesson { margin-top: 3mm; padding-top: 2mm; font-size: 12pt; line-height: 1.4; }
  .slide[data-layout="checklist"] .slide-points,
  .slide[data-layout="points-row"] .slide-points { margin-top: 4mm; gap: 2mm; }
  .slide[data-layout="points-row"] .slide-points { column-gap: 6mm; }
  /* checklist の 2 列は**画面の寸法の都合**（1280×800 に収める）で入れたもの。
     紙は A4 横 1 面 = 260mm あって収まるので、1 列のままにする（2026-08-06）。 */
  .slide[data-layout="checklist"] .slide-points:has(> li:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr); gap: 2mm; margin-top: 4mm; line-height: 1.45;
  }
  .slide[data-face="front"]:has(.slide-front-illustration) { padding-right: 0; }
  /* **紙では図版を詰める。**表＋裏で 1 枚（表が `break-after: avoid`）なので、
     画面と同じ 27rem（図版だけで 288px）だと合計 866px になり、A4 横の 794px を
     72px 超えて **8mm だけインクのある白紙が 1 枚ずつ挟まっていた**（rev148 G4・実測。
     `/guide/` は 14 枚中 5 枚がそれだった）。図版は装飾なので、先に削るのはここ。 */
  .slide-front-illustration { position: relative; right: auto; bottom: auto; width: min(60vw, 17rem); margin: .6rem 0 0 auto; }
  .slide[data-layout="table-emphasis"] .data-table th,
  .slide[data-layout="table-emphasis"] .data-table td { padding: 1mm 2mm; font-size: 8pt; line-height: 1.45; }
  /* **印刷のレイアウト幅は 700〜799px**（Chrome の `--print-to-pdf` で実測・2026-08-04）。
     モバイルの閾値 900px の下に入るので、**何もしないと紙にモバイルの版面が出る。**
     実際に、表が行カードへ変形したまま A4 に載っていた。表と図を紙向けに組み直す。 */
  .slide .data-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .slide .data-table tbody th { width: 34mm; }
  .slide .data-table tr { display: table-row; padding: 0; border-bottom: 0; }
  .slide .data-table th, .slide .data-table td { display: table-cell; padding: 1.6mm 3mm; border-bottom: 1px solid var(--line); }
  .slide .data-table td::before { content: none; }
  /* 図は紙でも横に並べる。A4 横なら 3〜5 段が収まる。 */
  .slide[data-layout="flow"] .slide-diagram { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 4mm; }
  .slide[data-layout="flow"] .slide-diagram::before { content: ""; }
  .slide[data-layout="flow"] .slide-diagram li { padding: 4mm; }

  /* 索引ラベルは印刷にも出す。決裁者が回す紙で、どの分類の話か分からなくなるため。 */
  .slide-keyword { margin: 0 0 3mm; }

  .data-table { font-size: var(--s-body); }
  /* 答えと教訓は紙にも出す。決裁者が回す紙でこそ、持ち帰る一文が要る。 */
  .slide-lesson { margin: 5mm 0 0; padding-top: 3mm; }
  /* 表と裏の境界は紙にも出す。決裁者が回す紙でこそ、どこからが解説かが要る。 */
  .slide-body { padding-top: 4mm; border-top: 1px solid var(--line); }
  /* **紙は 1 ユニット 1 ページ。**表だけで 1 枚刷ると 160mm が白紙になり、
     決裁者が回す紙としては枚数が倍になるだけ（2026-08-04・実測して判断）。
     表と裏を同じページへ載せ、境界は `.slide-body` の罫が担う。
     **1 ユニット 2 ページに戻すときは、この 2 行を消す。** */
  .page-slides > section[data-face="front"],
  .page-slides .note-slide > .slide[data-face="front"] { break-after: avoid; page-break-after: avoid; padding-bottom: 0; }
  /* **下余白は 8mm。**12mm だと `process-design-form` と `type-b` が
     表＋裏で 795px になり、**1px の超過で 1 枚まるごと紙が増えていた**（rev149 実測）。
     開始位置（12mm）は動かさないので、削るのは下だけ。 */
  .page-slides > section[data-face="back"],
  .page-slides .note-slide > .slide[data-face="back"] { break-before: avoid; page-break-before: avoid; padding-top: 4mm; padding-bottom: 8mm; }
  /* **裏を 2 枚に割った面も、紙では 1 ユニット 1 ページに戻す。**
     画面では 4 件の要点が壁になるので割るが、紙は一目で全体が見えるので割る理由がない。
     `back` 側の `break-after` も抑えて、3 面がばらけないようにする。 */
  .page-slides > section[data-face="back"]:has(+ section[data-face="back-2"]),
  .page-slides .note-slide > .slide[data-face="back"]:has(+ .slide[data-face="back-2"]) { break-after: avoid; page-break-after: avoid; padding-bottom: 0; }
  .page-slides > section[data-face="back-2"],
  .page-slides .note-slide > .slide[data-face="back-2"] { break-before: avoid; page-break-before: avoid; padding-top: 0; }
  /* 同じページに表の見出しがあるので、再掲は出さない。索引ラベルも 3 面目では重複する。 */
  .slide-recall { display: none; }
  .slide[data-face="back-2"] .slide-keyword { display: none; }
  .note-slide-nav { display: none; }

  /* 要点は紙でも 2 層のまま出す。決裁者が回す紙で、拾い読みの受け皿がいちばん要る。
     **印刷のレイアウト幅は 700〜799px でモバイルの閾値の下に入る**（rev10 で実測）。
     何もしないと横並びが縦へ戻るので、紙向けに組み直す。 */
  .slide-points { max-width: 260mm; margin: 5mm 0 0; gap: 2mm; }
  .slide-points li { padding-top: 2mm; }
  .slide[data-layout="points"] .slide-points { max-width: 200mm; }
  .slide[data-layout="points-row"] .slide-points { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 8mm; margin-top: 7mm; }
  .slide[data-layout="points-row"] .slide-points li { padding-top: 3mm; }
  .slide[data-layout="points-row"] .slide-point-label { margin-bottom: 1.6mm; }
  .slide[data-layout="points-row"] .slide-points li::before,
  .slide[data-layout="points-row"] .slide-points li::before { margin-bottom: 1.6mm; }
  /* 紙では `display: block` になり row-gap が効かない。大きな 1 文と散文が地続きになるので、
     ここだけ余白を明示する（2026-08-04・刷って気づいた）。 */
  .slide[data-layout="statement"] .slide-text { margin-top: 6mm; }
  .slide-next, .section-cards { display: none; }
  /* 索引は紙に出さない。リンクの一覧は紙では働かない。 */
  .page-hero-index { display: none; }

  .subpage-section > h2 { font-size: 15pt; }
  .subpage-section > .lead { max-width: none; font-size: 9pt; }
  .subpage-footer { margin-top: 8mm; }

  .gantt-table { font-size: 7pt; }
  .gantt-table caption { padding-bottom: 2mm; font-size: 7pt; }
  .gantt-table thead th { padding: 1.5mm 1.5mm; font-size: 6pt; }
  .gantt-table td, .gantt-table tbody th { padding: 2mm 1.5mm; font-size: 7pt; }
  .gantt-table tbody th strong { font-size: 8pt; }
  .gantt-table .num { font-size: 6pt; }
  .gantt-bar { top: 2.6mm; height: 1.6mm; }
  .gantt-legend { margin-top: 3mm; font-size: 6pt; }
  .gantt-checkpoints { margin-top: 4mm; }
  .gantt-checkpoints li { padding: 3mm; }
  .gantt-checkpoints strong { font-size: 9pt; }
  .gantt-checkpoints p { font-size: 6.5pt; }
  .gantt { break-inside: avoid; page-break-inside: avoid; }
  .responsibility-matrix { overflow: visible; }
  .matrix-row { min-width: 0; grid-template-columns: 9mm 1.2fr 1fr 1fr; }
  .matrix-row > * { padding: .7mm 1mm; font-size: 5.3pt; line-height: 1.18; }
  .matrix-row > strong { font-size: 6pt; }
  .matrix-head > * { font-size: 5.3pt; }
}

/* JSON-driven WordPress blocks that are shared by the approved prototype. */
/* 面そのものが 1 枚として刷られるので、中にもう 1 枚の枠を描かない
   （2026-08-03・user 指摘「罫線枠は外す。スライド自体で印刷するように最適化」）。 */
.content-block { margin: 0 0 2rem; padding: 0; border: 0; background: none; }
.content-block > :last-child { margin-bottom: 0; }
.catalog-block { min-width: 0; }
.data-note { margin: 1rem 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.9; }
.faq-index { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.faq-index h3 { margin: .65rem 0 1.25rem; font-family: var(--serif); font-size: clamp(1.6rem, 2.5vw, 2.4rem); line-height: 1.25; }
.faq-index > p:last-child { margin: 1.5rem 0 0; }
.task-list { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.task-list li { padding: .65rem .8rem; border-left: 3px solid var(--accent-warm-ink); background: var(--paper-deep); color: var(--ink-soft); line-height: 1.75; }
.task-list a { color: var(--ink); font-weight: 700; }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th, .data-table td { padding: .75rem .85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.85; }
.data-table thead th { background: var(--navy); color: #f4f6f1; font-size: .68rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.data-table tbody th { font-family: var(--serif); font-weight: 500; }
.data-table td { color: var(--ink-soft); }
.table-wrap { overflow-x: auto; }
/* 列幅を明示した表は固定レイアウトにする。`<colgroup>` の % をそのまま効かせるため。 */
.data-table.is-fixed { table-layout: fixed; }
.data-table.is-fixed thead th { white-space: normal; }
/* 表を白い板に載せない（2026-08-06・user 指示）。節と同じ地に置く。 */
.works-catalog { background: transparent; }
.works-catalog .works-print { margin: 1rem 0; }
.works-catalog .catalog-count { color: var(--ink-soft); font-size: .75rem; }
.catalog-page-note { color: var(--ink-soft); font-size: .68rem; }
.works-catalog .data-table { font-size: .98rem; }
.works-catalog .data-table thead th { font-size: .75rem; }
.work-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--line); background: var(--paper-deep); }
.work-filters div { display: grid; gap: .25rem; }
.work-filters label { color: var(--ink-soft); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.work-filters select { min-width: 9rem; padding: .55rem .7rem; border: 1px solid var(--line-dark); background: var(--paper); color: var(--ink); }
.work-pagination { margin-top: 1.5rem; }
.work-pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.work-pagination a, .work-pagination span { display: inline-block; padding: .35rem .65rem; border: 1px solid var(--line-dark); text-decoration: none; }
.work-pagination .current { background: var(--navy); color: #f4f6f1; }
.works-table th[scope="row"] { font-size: .98rem; }
.works-table td { font-size: .98rem; line-height: 1.85; }
/* 白い枠で囲わない。区切りは「余白 → 細い罫 → 色」の順で、面は使わない
   （2026-08-03・user 指示。カードを箱で囲うと一覧が重くなる）。 */
.note-directory { margin: 0 0 3rem; padding: 0; border: 0; background: none; }
.notes-index { min-height: auto; padding-top: 5.5rem; padding-bottom: 6rem; }
.notes-index-heading { max-width: 48rem; margin-bottom: 2rem; }
.notes-index-heading h2 { margin: 1rem 0 1.2rem; font-size: clamp(2.5rem, 5vw, 5rem); }
.notes-index-heading .body-copy { margin: 0; }
.notes-index .note-directory { margin-bottom: 0; }
/* 制作実績も `/notes/` と同じ索引の面。枠で囲わない。 */
.works-index .content-block { margin-bottom: 0; }
.works-index .fact-list { margin-bottom: 1.5rem; }
/* 1 つしかない注記は箇条書きにしない（中黒だけが浮く）。本文と同じ扱いで置く。 */
.fact-note { margin: 0 0 1.5rem; color: var(--ink-soft); font-size: .8rem; line-height: 1.9; }
.notes-faq { margin-top: 3rem; }
/* 検索と絞り込みは 1 つの form。**JS が無くても submit で効く**ので、
   操作は `<button>` のまま体裁だけ行にそろえる（DESIGN §3.7）。 */
.note-search { display: grid; gap: .8rem; margin-bottom: 0; padding: 0; background: transparent; }
.note-search-line { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.note-search label { color: var(--ink-soft); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.note-search input { min-width: 0; flex: 0 1 26rem; padding: .65rem .8rem; border: 1px solid var(--line-dark); background: var(--paper); color: var(--ink); font: inherit; font-size: .85rem; }
.note-search input:focus-visible { outline: 2px solid var(--accent-warm-ink); outline-offset: 2px; }
.note-count { color: var(--ink-soft); font-size: .75rem; white-space: nowrap; }
.note-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; color: var(--ink-soft); font-size: .75rem; }
.note-filter-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.note-filter button { display: inline-flex; gap: .45rem; align-items: baseline; padding: .4rem .85rem; border: 1px solid var(--line-dark); background: transparent; color: inherit; font-size: .78rem; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.note-filter button b { color: var(--ink-soft); font-size: .66rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.note-filter button:hover { background: var(--paper); }
.note-filter button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #f4f6f1; }
.note-filter button[aria-pressed="true"] b { color: #c3cdc6; }
.note-filter button:focus-visible { outline: 2px solid var(--ink); outline-offset: .2rem; }
.note-empty { padding: 1rem 0; border-top: 1px solid var(--line); }
/* `/notes/` 以外のページで、groups をチャプターとして描くときの見出し（functions.php）。 */
.note-group { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.note-group h3 { margin: 0 0 1.25rem; font-family: var(--serif); font-size: clamp(1.6rem, 2.5vw, 2.4rem); line-height: 1.25; }

/* 索引（2026-08-06）。カードの升目をやめ、1 行 1 件で見出しの左端をそろえる。
   箱で囲わず、区切りは「余白 → 細い罫 → 色」の順。色は状況の見出しだけが持つ。
   カテゴリの色は帯が明るい色、文字が同系で紙地 4.5:1 以上を実測したもの
   （start 5.12 / materials 5.85 / process 5.91 / after 6.91・paper-deep 上でも AA）。
   色だけに頼らないよう、状況名の文字を必ず添える。 */
/* 1440px では 1 行が 1,240px まで伸び、短い答えの右に空白だけが残る。行長を抑える。 */
.note-index { max-width: 72rem; margin: 0; }
/* 上の余白は margin ではなく padding。貼り付いた見出しが**自分のグループの余白の上にだけ**
   地色の帯を伸ばせるようにする（下の `::before`）。margin だと隣のグループの行を覆う。 */
.note-index-group { margin: 0; padding-top: 5rem; }
.note-index-group[hidden] { display: none; }
.note-index-group[data-category="start"] { --entry-mark: #9aaf45; --entry-ink: #5f7017; }
.note-index-group[data-category="materials"] { --entry-mark: #b9855a; --entry-ink: #8a5324; }
.note-index-group[data-category="process"] { --entry-mark: #7896a2; --entry-ink: #456470; }
.note-index-group[data-category="after"] { --entry-mark: #9a7fa0; --entry-ink: #6a4a71; }
/* 見出しは貼り付く。長い索引の途中でも、いまどの状況を見ているかが残る。 */
.note-index-group-title {
  position: sticky;
  z-index: 2;
  /* ヘッダーは固定で地を持たないので、`top: 0` だとロゴと現在地に重なる。
     ヘッダーの実高（padding 1.25rem×2 ＋ ブランド 2.5rem）の分だけ下げる。 */
  top: 5rem;
  display: flex;
  gap: .8rem;
  align-items: baseline;
  margin: 0;
  padding: .75rem 0 .55rem;
  border-bottom: 2px solid var(--entry-mark);
  background: var(--paper-deep);
  color: var(--entry-ink);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
}
/* **ヘッダーは地を持たないので、貼り付いた見出しの上に行が透けて出る**（実測。行が
   罫の直上で半分に切れて壊れて見えた）。見出しの上へ地色を 5rem 伸ばして隠す。
   貼り付いていないときはグループ自身の `padding-top` を塗るだけで、何も覆わない。 */
.note-index-group-title::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 5rem;
  background: var(--paper-deep);
  content: "";
}
.note-group-count { color: var(--ink-soft); font-family: var(--sans); font-size: .68rem; font-variant-numeric: tabular-nums; }
.note-list { margin: 0; padding: 0; list-style: none; }
.note-row { border-bottom: 1px solid var(--line); }
.note-row[hidden], .note-slide[hidden] { display: none; }
.note-row-link {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto;
  gap: .3rem 1rem;
  align-items: baseline;
  padding: .7rem .8rem;
  text-decoration: none;
  /* **ホバーで位置を動かさない。**63 行の索引で 1 行だけ横へずれると、目で追っている
     列がガタつく。変えるのは地色と下線だけにする。 */
  transition: background .18s var(--ease);
}
.note-row-link:hover, .note-row-link:focus-visible { background: var(--paper); }
.note-row-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.note-row-title { font-size: .95rem; font-weight: 700; line-height: 1.6; }
.note-row-link:hover .note-row-title, .note-row-link:focus-visible .note-row-title { text-decoration: underline; text-underline-offset: .22em; }
/* **「問い → 答え」の矢印は索引の主役**（2026-08-06・user 指示）。行が何をしているかは
   この 1 文字が示す。リンクの記号（`↗` 外部・`↓` 下へ・`↑` 上へ）ではなく、
   2 つの文の関係を示す印なので、置き場所の規定（DESIGN §3.7）とは別に扱う。
   色は状況の色。紙地・ホバー地とも 4.5:1 以上を実測済みの `--entry-ink` を使う。 */
.note-row-lead { position: relative; min-width: 0; padding-left: 2rem; color: var(--ink-soft); font-size: .8rem; line-height: 1.7; }
.note-row-lead::before {
  position: absolute;
  left: 0;
  color: var(--entry-ink, var(--accent-warm-ink));
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  content: "\2192";
}
.note-row-mark { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; justify-content: flex-end; }
.note-row-kind, .note-row-away { white-space: nowrap; }
.note-row-mark:empty { display: none; }
/* FAQ もノートと同じ流れに置く。区切りは作らず、印だけ変える。 */
.note-row-kind { color: var(--entry-ink, var(--ink-soft)); font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
.note-row-away { color: var(--ink-soft); font-size: .62rem; font-weight: 700; letter-spacing: .1em; }
.note-reader { box-sizing: border-box; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; background: var(--paper); color: var(--ink); }
.note-reader::backdrop { background: var(--paper); }
.note-reader-frame { height: 100%; overflow: auto; overscroll-behavior: contain; }
.note-reader-header { position: sticky; z-index: 3; top: 0; display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.25rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(12px); }
.note-reader-meta { margin: 0; color: var(--ink-soft); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.note-reader-close { display: inline-flex; align-items: center; border: 0; padding: .35rem 0; background: transparent; color: var(--ink); cursor: pointer; }
.note-reader-close b { font-size: 1.35rem; font-weight: 400; line-height: .8; }
.note-reader-close:focus-visible { outline: 2px solid var(--ink); outline-offset: .3rem; }
.note-reader-face-controls { position: fixed; z-index: 4; inset: 0; pointer-events: none; }
.note-reader-face-button { position: absolute; top: 50%; display: grid; width: 4rem; height: 4rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--paper) 86%, transparent); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; pointer-events: auto; transform: translateY(-50%); transition: background .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease); }
.note-reader-face-button.is-prev { left: clamp(1rem, 3vw, 3rem); }
.note-reader-face-button.is-next { right: clamp(1rem, 3vw, 3rem); }
.note-reader-face-button:hover { background: var(--accent); transform: translateY(-50%) scale(1.06); }
.note-reader-face-button:focus-visible { outline: 2px solid var(--ink); outline-offset: .3rem; }
.note-reader-face-button:disabled { opacity: .22; cursor: default; }
.note-reader-face-button:disabled:hover { background: color-mix(in srgb, var(--paper) 86%, transparent); transform: translateY(-50%); }
.note-slides { display: block; }
.note-slide { margin-top: 0; }
/* 送るたびに読み上げの起点として `tabindex="-1"` へフォーカスを移す。
   **その輪郭は出さない** —— 読者が押した先ではないので、既定の枠は不具合に見える。
   キーボード操作の可視性は送りボタン側の `:focus-visible` が受け持つ。 */
.note-slide:focus { outline: none; }
/* 面は隠さない。**表と裏は縦に並べてセットで読む**（2026-08-07・user 指示）。
   寸法は標準のまま —— `1 面 = 1 画面` の高さも、表の「左に文・右下に図版」の組みも触らない。
   面の境目は罫で示す。ここで幅や高さを作り直すと、サブページと二重管理になる。 */
.note-reader .note-slide > .slide + .slide { border-top: 1px solid var(--line); }
.note-reader .note-slide .slide { min-height: calc(100dvh - 4.5rem); }
.note-reader .note-slide > .slide[data-face="front"] { padding-right: clamp(20rem, 35vw, 30rem); }
@media screen and (min-width: 901px) {
  .note-reader .note-slide > .slide[data-face="front"] { align-content: start; padding-top: clamp(8rem, 16vh, 12rem); }
  .note-reader .note-slide > .slide[data-face="back"],
  .note-reader .note-slide > .slide[data-face="back-2"] { padding-top: clamp(6rem, 12vh, 9rem); }
}
/* 全画面の読書面では、イラストは右端から一定の余白を取る。 */
.note-reader .slide-front-illustration { right: clamp(2rem, 6vw, 6rem); bottom: clamp(2rem, 7vh, 6rem); }
.gantt-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .9rem 0 0; color: var(--ink-soft); font-size: .7rem; }
.gantt-legend span { display: inline-flex; gap: .4rem; align-items: center; }
.gantt-legend .legend-swatch { display: inline-block; width: 1.4rem; height: .5rem; background: var(--navy); }
.gantt-legend .owner-client { background: var(--accent-warm-ink); }
.gantt-legend .owner-both { background: repeating-linear-gradient(135deg, var(--accent-warm-ink) 0 .3rem, var(--navy) .3rem .6rem); }
.glossary-note { margin: 1rem 0 2rem; padding: .8rem 1rem; border-left: 3px solid var(--accent-warm-ink); background: var(--paper-deep); color: var(--ink-soft); font-size: .9rem; }
.content-error { margin: 2rem auto; max-width: 60rem; padding: 1rem; border: 1px solid #9c3d2f; background: #fff5f2; color: #6d2319; }

@media (max-width: 900px) {
  .note-reader-header { min-height: 4rem; padding: .85rem 1.25rem; }
  .note-reader .note-slide .slide { min-height: auto; }
  .note-reader .note-slide > .slide[data-face="front"] { padding-right: 1.5rem; }
  .note-reader-face-button { width: 3.25rem; height: 3.25rem; font-size: 1.2rem; }
  /* 幅が足りないので問いと答えを 2 段にする。左端はそろえたままにする。 */
  .note-index-group { padding-top: 4.2rem; }
  .note-index-group-title { top: 4.2rem; }
  .note-index-group-title::before { height: 4.2rem; }
  .note-row-link { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; }
  .note-row-lead { grid-column: 1; }
  .note-row-mark { grid-row: 1; grid-column: 2; }
  .work-filters { align-items: stretch; flex-direction: column; }
  .work-filters select { width: 100%; }
}

@media (max-width: 560px) {
  .note-reader-header { padding-inline: 1rem; }
  .note-reader-meta { font-size: .62rem; }
  .note-reader-close { font-size: .7rem; }
  .note-reader .note-slide > .slide[data-face="front"] { padding-right: 1rem; }
  /* **縦積みにしない。**`flex-direction: column` にすると入力欄の `flex-basis` が
     高さに効いて、18rem の空箱になる（実測）。行のまま折り返して、ラベルだけ 1 行使う。 */
  .note-search-line { gap: .45rem .6rem; }
  .note-search label { flex: 0 0 100%; }
  .note-search input { flex: 1 1 8rem; min-width: 0; }
  .note-search .button { padding-inline: 1rem; }
  .note-filter { gap: .4rem; }
  .note-filter button { padding: .35rem .6rem; font-size: .72rem; }
  /* 問いと答えと印を 1 列に積む。印を横に並べると、問いの列が 2〜3 行に折れる。
     矢印は答えの行頭に残す —— 縦に積んでも「問い → 答え」の関係が読める。 */
  .note-row-link { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .note-row-lead, .note-row-mark { grid-row: auto; grid-column: 1; }
  .note-row-mark { justify-content: flex-start; padding-left: 2rem; }
  .note-row-title { font-size: .9rem; }
}