/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 */
/* Hallmark · genre: editorial (office stationery) · macrostructure: Desk Ledger (bespoke) · design-system: design.md · designed-as-app
 * theme: custom (no warning colours) · paper: oklch(97.2% 0.005 250) + grid · sheet: oklch(99.4% 0.002 250)
 * accent: oklch(47% 0.15 258) blue · signal: oklch(78.2% 0.136 177) teal · band: navy
 * display: Zen Kaku Gothic New · body: BIZ UDPGothic · axes: light / geometric-sans / cool
 * nav: N6 masthead + folder tabs (labelled "メニュー" toggle under 75rem) · footer: Ft4 colophon (dated)
 * signature: 電話メモ slip (top) · ledger tables · section bands · 更新履歴 · 目次 · ▲先頭へ
 * audience: managers aged 50–70 → body 18px, notes ≥15px, targets ≥56px, one message per page
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  /* 方眼の地 ―― 製品の画面と同じ机の上 */
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 700; font-style: normal;
  line-height: 1.45; margin: 0;
  word-break: auto-phrase; overflow-wrap: anywhere; min-width: 0;
}
p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b { font-weight: 700; }
time { font-variant-numeric: tabular-nums; }
.ph { display: inline-block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.skip { position: absolute; left: var(--space-md); top: -200px; z-index: var(--z-sticky); background: var(--color-sheet); color: var(--color-text); padding: var(--space-sm) var(--space-lg); font-weight: 700; }
.skip:focus { top: var(--space-md); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* logo artwork — colours from tokens, geometry unchanged */
.logo-line { stroke: var(--color-signal); stroke-width: 3.2; stroke-linecap: round; fill: none; }
.logo-box { fill: var(--color-ink); stroke: var(--color-signal); stroke-width: 2.6; }
.logo-wave { fill: none; stroke: var(--color-on-dark); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.logo-tel { fill: currentColor; }
.logo-log { fill: var(--color-signal); }

/* colour roles — light surfaces by default; dark surfaces switch to teal */
body { --link: var(--color-accent); --mark: var(--color-signal-deep); --btn-edge: var(--color-accent); --pointer: var(--color-accent); }
.head, .lead--dark, .contact, .foot {
  --link: var(--color-signal); --mark: var(--color-signal); --btn-edge: var(--color-accent-soft);
  --pointer: var(--color-signal); --color-focus: var(--color-signal);
}

/* one content column, centred by padding */
.head__mast, .head__menu, main > section, main > nav, main > .totop, .foot { padding-inline: max(var(--gutter), calc((100% - 70rem) / 2)); }

/* ---------- controls ---------- */
/* 押せるキー ―― 下に濃い青の段。押すと沈む */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 56px; padding: var(--space-sm) var(--space-xl); margin-bottom: var(--space-2xs);
  background: var(--color-accent); color: var(--color-accent-ink);
  border: 2px solid var(--btn-edge); border-radius: var(--radius-ctl);
  box-shadow: 0 var(--space-2xs) 0 var(--color-accent-step);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: translateY(var(--space-2xs)); box-shadow: 0 0 0 var(--color-accent-step); }
.btn--small { min-height: 48px; padding-inline: var(--space-lg); font-size: var(--text-sm); }
.textlink {
  display: inline-block; white-space: nowrap;
  font-weight: 700; color: var(--link);
  text-decoration: underline; text-decoration-color: var(--link);
  text-decoration-thickness: 3px; text-underline-offset: 0.3em;
  padding-block: var(--space-xs);
  transition: text-decoration-thickness var(--dur-micro) var(--ease-out);
}
.textlink:hover { text-decoration-thickness: 5px; }
.textlink:active { color: var(--color-accent-hover); }
.textlink--dark { color: var(--link); }
.textlink--inline { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; text-decoration-thickness: 2px; }
.mark { color: var(--mark); }

/* ---------- section band (帳簿の節の見出し) ---------- */
.band, .items__title, .steps__title {
  display: block;
  background: var(--color-band); color: var(--color-on-dark);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-lg); line-height: 1.4;
}
/* 製品の帳簿の見出しと同じ「■」の印 */
.band::before, .items__title::before, .steps__title::before { content: "■"; color: var(--color-signal); margin-right: var(--space-sm); font-size: 0.8em; }

/* ---------- header: masthead + folder tabs (N6) ---------- */
.head { background: var(--color-ink); color: var(--color-on-dark); }
.head__mast { display: flex; align-items: center; gap: var(--space-sm) var(--space-lg); padding-block: var(--space-sm); }
.head__brand { display: inline-flex; color: var(--color-on-dark); padding-block: var(--space-xs); margin-right: auto; }
.head__issue { display: none; color: var(--color-on-dark-2); font-size: var(--text-sm); line-height: 1.5; margin-right: auto; }
.head__date { display: block; font-size: var(--text-xs); color: var(--color-muted-dark); font-variant-numeric: tabular-nums; }
.head__demo { display: none; }
.head__toggle {
  display: none;
  min-height: 48px; padding: 0 var(--space-lg);
  background: transparent; color: var(--color-on-dark);
  border: 2px solid var(--color-rule-dark-2); border-radius: var(--radius-ctl);
  font: 700 var(--text-sm) var(--font-body); cursor: pointer;
}
.head__toggle[aria-expanded="true"] { border-color: var(--color-signal); }
.head__toggle:active { transform: translateY(1px); }
.head__menu { padding-block: 0 var(--space-md); }
/* with JS: menu folds behind the labelled toggle; without JS it simply stays open */
.js .head__toggle { display: inline-flex; align-items: center; }
.js .head__menu { display: none; }
.js .head__menu.is-open { display: block; }
.tabs { display: grid; border-top: 1px solid var(--color-rule-dark); }
.tab {
  display: flex; align-items: center; min-height: 56px;
  border-bottom: 1px solid var(--color-rule-dark);
  color: var(--color-on-dark); font-weight: 700; text-decoration: none;
}
.tab[aria-current="page"] { color: var(--color-signal); }
.tab[aria-current="page"]::before { content: "● "; margin-right: var(--space-xs); font-size: 0.6em; }
.head__menu-demo { margin-top: var(--space-md); width: 100%; }
@media (min-width: 40rem) {
  .head__demo { display: inline-flex; }
  .head__menu-demo { display: none; }
}
@media (min-width: 64rem) {
  .head__issue { display: block; }
  .head__brand { margin-right: 0; }
}
/* 8 tabs fit one row from 75rem; the tab of this page is paper and joins the page below */
@media (min-width: 75rem) {
  .js .head__toggle { display: none; }
  .head__menu, .js .head__menu { display: block; padding-block: var(--space-xs) 0; }
  .tabs { display: flex; align-items: flex-end; gap: var(--space-2xs); border: 0; }
  .tab {
    min-height: 48px; padding: 0 var(--space-md);
    background: var(--color-ink-3); border: 1px solid var(--color-rule-dark-2); border-bottom: 0;
    border-radius: var(--radius-img) var(--radius-img) 0 0;
    font-size: var(--text-sm); white-space: nowrap;
    transition: background-color var(--dur-micro) var(--ease-out);
  }
  .tab:hover { background: var(--color-rule-dark-2); }
  .tab:active { transform: translateY(1px); }
  .tab[aria-current="page"] { min-height: 54px; background: var(--color-paper); border-color: var(--color-paper); color: var(--color-text); }
  .tab[aria-current="page"]::before { content: none; }
}

/* ---------- lead: one message per page ---------- */
.lead { display: grid; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
.lead--dark { background: var(--color-ink); color: var(--color-on-dark); margin-top: var(--space-lg); } /* 図面の台紙 ―― 上に紙を見せ、札が紙とつながる */
.lead__text { display: grid; gap: var(--space-lg); align-content: start; }
.lead__title { font-size: var(--text-h1); font-weight: 900; line-height: 1.35; letter-spacing: 0.02em; }
.lead__body { font-size: var(--text-md); line-height: 1.85; max-width: var(--measure); }
.lead--dark .lead__body { color: var(--color-on-dark-2); }
.lead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xs); }
.lead__note { font-size: var(--text-xs); color: var(--color-muted); }
.lead--dark .lead__note { color: var(--color-muted-dark); }
.lead__proof { display: grid; gap: var(--space-sm); align-content: start; }
.lead__proof figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.lead--dark .lead__proof figcaption { color: var(--color-on-dark-2); }
.lead__proof figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-weight: 700; text-decoration-color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.lead--plain { padding-block-end: var(--space-xl); }
/* 画面写真が主役のページ ―― 写真は説明の下に横幅いっぱいで（字が読める大きさに） */
.lead--wide .lead__proof { max-width: 64rem; }
@media (min-width: 64rem) {
  .lead:not(.lead--stack):not(.lead--plain):not(.lead--wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--space-3xl); align-items: start; padding-block: var(--space-2xl) var(--space-3xl); }
  .lead__proof { margin-top: var(--space-xs); }
  .lead:not(.lead--stack):not(.lead--plain):not(.lead--wide) .lead__title { font-size: clamp(2rem, 1.4vw + 1.2rem, 2.75rem); }
}

/* ---------- 電話メモ (the slip Tellog writes) ---------- */
.memo {
  position: relative; max-width: 34rem;
  background: var(--color-sheet); color: var(--color-text);
  border: 1px solid var(--color-rule); border-top: 0;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  box-shadow: 0 18px 28px -22px var(--color-shadow);
}
/* ミシン目 ―― 綴りから切り取った上端 */
.memo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0;
  border-top: 3px dotted var(--color-rule);
}
.memo__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-bottom: var(--space-xs); border-bottom: 3px double var(--color-ink); }
.memo__title { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); letter-spacing: 0.3em; color: var(--color-ink); }
.memo__no { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.memo__when { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.memo__from { padding-block: var(--space-2xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); font-size: var(--text-md); }
.memo__from b { font-family: var(--font-display); }
.memo__fields div { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.memo__fields dt { font-weight: 700; color: var(--color-muted); font-size: var(--text-sm); padding-top: var(--space-3xs); }
.memo__sub { margin-top: var(--space-md); font-family: var(--font-display); font-weight: 700; }
.memo__todo li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); padding-block: var(--space-2xs); }
.memo__todo li::before { content: "□"; color: var(--mark); font-weight: 700; }
.memo__sign { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.memo__stamp {
  display: inline-block; padding: var(--space-3xs) var(--space-sm);
  border: 2px solid var(--color-signal-deep); border-radius: var(--radius-img);
  color: var(--color-signal-deep); font-family: var(--font-display); font-weight: 900; letter-spacing: 0.05em;
  transform: rotate(-6deg);
}
@media (min-width: 64rem) { .memo { transform: rotate(-1.2deg); } }

/* ---------- 台紙に貼った画面写真 ---------- */
.plate { background: var(--color-sheet); border: 1px solid var(--color-rule); padding: var(--space-sm); box-shadow: 0 18px 28px -22px var(--color-shadow); }
.plate__label { display: inline-block; margin-bottom: var(--space-sm); padding: var(--space-3xs) var(--space-sm); background: var(--color-band); color: var(--color-on-dark); font-size: var(--text-sm); font-weight: 700; line-height: 1.6; }
.shot { border: 1px solid var(--color-rule); background: var(--color-paper); }
/* a phone screenshot is tall and narrow — hold the mount to a phone's width, centred */
.plate--phone { max-width: 19.5rem; justify-self: center; }

/* ---------- top: 目次 + 更新履歴 ---------- */
.desk { display: grid; gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); }
@media (min-width: 64rem) { .desk { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } }
.toc { background: var(--color-sheet); border: 1px solid var(--color-rule); border-top: 0; }
.toc a {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: 0 var(--space-md); align-items: center;
  min-height: 76px; padding-block: var(--space-sm); padding-right: var(--space-md);
  border-top: 1px solid var(--color-rule); text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.toc li:first-child a { border-top: 0; }
.toc__no { grid-row: 1 / span 2; align-self: stretch; display: grid; place-items: center; border-right: 1px solid var(--color-rule); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.toc__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.4; }
.toc__desc { grid-column: 2; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.toc__go { grid-column: 3; grid-row: 1 / span 2; font-size: var(--text-lg); color: var(--pointer); }
.toc a:hover { background: var(--color-paper-2); }
.toc a:hover .toc__name { color: var(--link); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.toc a:active { background: var(--color-rule); }
.news { background: var(--color-sheet); border: 1px solid var(--color-rule); }
.news__list { padding: var(--space-2xs) var(--space-md) var(--space-md); }
.news__list li { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-top: 1px dashed var(--color-rule); line-height: 1.7; }
.news__list li:first-child { border-top: 0; }
.news__list time { color: var(--mark); font-weight: 700; font-size: var(--text-sm); }

/* ---------- live: where it is actually running (ledger) ---------- */
.live { max-width: var(--measure); background: var(--color-sheet); border: 1px solid var(--color-rule); }
.live div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); border-top: 1px solid var(--color-rule); }
.live div:first-child { border-top: 0; }
.live dt { padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-right: 1px solid var(--color-rule); font-family: var(--font-display); font-weight: 700; color: var(--mark); }
.live dd { padding: var(--space-sm) var(--space-md); }

/* ---------- items: supporting points, as a ledger ---------- */
.items { padding-block: var(--space-xl) var(--space-2xl); }
.items__lead { margin-top: var(--space-md); max-width: var(--measure); }
.items__list { margin-top: var(--space-md); background: var(--color-sheet); border: 1px solid var(--color-rule); counter-reset: row; }
.items__title + .items__list { margin-top: 0; border-top: 0; }
.items__list div {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--space-md);
  padding-block: var(--space-md); padding-right: var(--space-md);
  border-top: 1px solid var(--color-rule); counter-increment: row;
}
.items__title + .items__list div:first-child { border-top: 0; }
.items__list div::before {
  content: counter(row, decimal-leading-zero);
  grid-row: 1 / span 2; align-self: stretch; text-align: center;
  margin-block: calc(var(--space-md) * -1); padding-top: var(--space-md);
  border-right: 1px solid var(--color-rule); color: var(--color-muted); font-variant-numeric: tabular-nums;
}
.items__list dt { grid-column: 2; font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.5; word-break: auto-phrase; }
.items__list dd { grid-column: 2; max-width: var(--measure); }
@media (min-width: 48rem) {
  .items__list div { grid-template-columns: 3.5rem minmax(0, 19rem) minmax(0, 1fr); }
  .items__list div::before { grid-row: 1; }
  .items__list dt { grid-column: 2; padding-right: var(--space-md); }
  .items__list dd { grid-column: 3; }
}
.items__more { margin-top: var(--space-lg); }
.items__note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: var(--measure); }

/* ---------- safety diagram (drawn on the navy board) ---------- */
.wire svg { width: 100%; height: auto; overflow: visible; }
.wire__h { display: none; }
.wire__v { display: block; max-width: 22rem; margin-inline: auto; }
@media (min-width: 48rem) { .wire__h { display: block; } .wire__v { display: none; } }
.node rect { fill: var(--color-ink-3); stroke: var(--color-rule-dark-2); stroke-width: 1.5; }
.node__name { fill: var(--color-on-dark); font: 700 22px var(--font-body); text-anchor: middle; }
.node__sub { fill: var(--color-on-dark); font: 700 22px var(--font-body); text-anchor: middle; }
.seg__base { stroke: var(--color-rule-dark-2); stroke-width: 6; stroke-linecap: round; fill: none; }
.seg__pulse { stroke: var(--color-signal); stroke-width: 6; stroke-linecap: round; fill: none; stroke-dasharray: 60 400; stroke-dashoffset: 60; opacity: 0; }
.tag { fill: var(--color-on-dark-2); font: 700 18px var(--font-body); text-anchor: middle; }
.box__body { fill: var(--color-ink-2); stroke: var(--color-signal); stroke-width: 3; transition: fill var(--dur-short) var(--ease-out), stroke var(--dur-short) var(--ease-out); }
.box__name { fill: var(--color-on-dark); font: 700 24px var(--font-body); text-anchor: middle; transition: fill var(--dur-short) var(--ease-out); }
.box__wave rect { fill: var(--color-signal); transition: opacity var(--dur-short) var(--ease-out); }
.box__bypass { stroke: var(--color-signal); stroke-width: 6; stroke-linecap: round; fill: none; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.box__off { fill: var(--color-signal); font: 700 18px var(--font-body); text-anchor: middle; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.box__off--v { text-anchor: start; }
.wire[data-state="off"] .box__body { fill: var(--color-ink); stroke: var(--color-rule-dark-2); stroke-dasharray: 8 8; }
.wire[data-state="off"] .box__name { fill: var(--color-muted-dark); }
.wire[data-state="off"] .box__wave rect { opacity: 0; }
.wire[data-state="off"] .box__bypass, .wire[data-state="off"] .box__off { opacity: 1; }

.js .wire .node, .js .wire .seg, .js .wire .box { opacity: 0; animation: ink-on var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes ink-on { to { opacity: 1; } }
.wire.is-pulse .seg__pulse { animation: pulse 900ms var(--ease-in-out) 1 forwards; }
.wire.is-pulse .seg__pulse--2 { animation-delay: 700ms; }
.wire.is-pulse .seg__pulse--v { stroke-dasharray: 40 300; }
@keyframes pulse { 0% { opacity: 1; stroke-dashoffset: 60; } 100% { opacity: 1; stroke-dashoffset: -240; } }

.wire__cap { display: grid; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-dark); }
.plug {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--space-sm);
  min-height: 56px; padding: 0 var(--space-lg);
  background: transparent; color: var(--color-on-dark);
  border: 2px solid var(--color-signal); border-radius: var(--radius-ctl);
  font: 700 var(--text-base) var(--font-body); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.plug:hover { background: var(--color-ink-3); }
.plug:active { transform: translateY(1px); }
.plug:disabled { opacity: 0.55; cursor: not-allowed; }
.plug__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-signal); }
.plug[aria-pressed="true"] .plug__dot { background: var(--color-muted-dark); }
.plug__note { color: var(--color-on-dark-2); max-width: var(--measure); font-size: var(--text-base); }

/* ---------- install: steps + spec ---------- */
.steps { padding-block: var(--space-2xl) var(--space-3xl); }
.steps__list { display: grid; gap: var(--space-lg); position: relative; padding: var(--space-lg); background: var(--color-sheet); border: 1px solid var(--color-rule); border-top: 0; }
.steps__list::before { content: ""; position: absolute; left: calc(var(--space-lg) + 27px); top: calc(var(--space-lg) + 28px); bottom: calc(var(--space-lg) + 28px); width: 2px; background: var(--color-rule); }
.steps__list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-lg); position: relative; }
.steps__n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--color-ink); color: var(--color-on-dark); font: 900 var(--text-lg) var(--font-display); z-index: var(--z-raised); }
.steps__list h3 { font-size: var(--text-lg); padding-top: var(--space-xs); }
.steps__list p { max-width: var(--measure); margin-top: var(--space-2xs); }
.techspec { margin-top: var(--space-2xl); border: 2px solid var(--color-rule); border-radius: var(--radius-img); background: var(--color-sheet); }
.techspec summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); font-weight: 700; list-style: none; }
.techspec summary::-webkit-details-marker { display: none; }
.techspec summary::before { content: "＋"; color: var(--pointer); font-weight: 700; }
.techspec[open] summary::before { content: "－"; }
.techspec__list { padding: 0 var(--space-lg); font-size: var(--text-sm); }
.techspec__list div { display: grid; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.techspec__list dt { font-weight: 700; color: var(--color-muted); }
.techspec__note { padding: var(--space-md) var(--space-lg) var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }
@media (min-width: 48rem) { .techspec__list div { grid-template-columns: 13rem minmax(0, 1fr); } }

/* ---------- faq: everything open, Q. / A. on ruled sheets ---------- */
.qa { padding-block: 0 var(--space-3xl); display: grid; gap: var(--space-md); }
.qa__item { max-width: 56rem; padding: var(--space-lg); background: var(--color-sheet); border: 1px solid var(--color-rule); }
.qa__item h2 { font-size: var(--text-lg); display: grid; grid-template-columns: 2.25em minmax(0, 1fr); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.qa__item h2::before { content: "Q."; color: var(--pointer); font-weight: 900; }
.qa__item p { position: relative; margin-top: var(--space-sm); padding-left: 2.25em; max-width: calc(var(--measure) + 2.25em); font-size: var(--text-base); }
.qa__item p::before { content: "A."; position: absolute; left: 0; top: 0; color: var(--mark); font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); line-height: 1.4; }
.qa__item .textlink { margin-left: var(--space-xs); }

/* ---------- company (会社概要 ledger) + contact ---------- */
.company { padding-block: 0 var(--space-2xl); }
.company__list { max-width: 50rem; background: var(--color-sheet); border: 1px solid var(--color-rule); }
.company__list div { display: grid; border-top: 1px solid var(--color-rule); }
.company__list div:first-child { border-top: 0; }
.company__list dt { padding: var(--space-sm) var(--space-md) 0; font-weight: 700; color: var(--color-muted); font-size: var(--text-sm); }
.company__list dd { padding: var(--space-2xs) var(--space-md) var(--space-sm); font-size: var(--text-md); }
@media (min-width: 48rem) {
  .company__list div { grid-template-columns: 11rem minmax(0, 1fr); }
  .company__list dt { padding: var(--space-md); background: var(--color-paper-2); border-right: 1px solid var(--color-rule); }
  .company__list dd { padding: var(--space-md); }
}
.contact { padding-block: var(--space-3xl); background: var(--color-ink); color: var(--color-on-dark); }
.contact__title { font-size: var(--text-h2); }
.contact__body { margin-top: var(--space-md); max-width: var(--measure); color: var(--color-on-dark-2); }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }
.contact .textlink { color: var(--color-on-dark); }

/* ---------- next page ---------- */
.next { padding-block: var(--space-2xl) 0; }
.next__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-lg); align-items: center;
  padding: var(--space-lg) var(--space-xl); border: 2px solid var(--color-text);
  text-decoration: none; background: var(--color-sheet);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.next__link:hover { background: var(--color-paper-2); }
.next__link:active { transform: translateY(1px); }
.next__label { font-size: var(--text-sm); color: var(--color-muted); font-weight: 700; }
.next__title { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.3; }
.next__lead { grid-column: 1; color: var(--color-muted); }
.next__arrow { grid-column: 2; grid-row: 1 / span 3; font-size: var(--text-xl); color: var(--pointer); }

/* ---------- ご案内 box (CTA) ---------- */
.cta { padding-block: var(--space-2xl) var(--space-xl); }
.cta__box { position: relative; padding: var(--space-xl) var(--space-lg) var(--space-lg); background: var(--color-sheet); border: 2px solid var(--color-text); }
.cta__box::before { content: "ご案内"; position: absolute; top: -0.95em; left: var(--space-lg); padding: 0 var(--space-sm); background: var(--color-band); color: var(--color-on-dark); font-size: var(--text-sm); font-weight: 700; line-height: 1.8; }
.cta__title { font-size: var(--text-h2); }
.cta__text { margin-top: var(--space-sm); color: var(--color-muted); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-lg); }

/* ---------- ▲ このページの先頭へ ---------- */
.totop { padding-block: var(--space-md) var(--space-xl); text-align: right; }
.totop a { display: inline-flex; align-items: center; min-height: 48px; color: var(--link); font-weight: 700; text-underline-offset: 0.3em; }
.totop a:hover { text-decoration-thickness: 3px; }
.totop a:active { color: var(--color-accent-hover); }

/* ---------- footer: dated colophon (Ft4) ---------- */
.foot { background: var(--color-ink); color: var(--color-on-dark-2); padding-block: var(--space-2xl); display: grid; gap: var(--space-lg); }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.foot__brand { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-on-dark); }
.foot__tag { color: var(--color-on-dark); font-weight: 700; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); border-top: 1px solid var(--color-rule-dark); border-bottom: 1px solid var(--color-rule-dark); padding-block: var(--space-xs); }
.foot__links a { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-on-dark); white-space: nowrap; text-decoration-color: var(--color-rule-dark-2); text-underline-offset: 0.3em; }
.foot__links a:hover { text-decoration-color: var(--color-signal); }
.foot__colophon { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.foot__colophon div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--space-md); }
.foot__colophon dt { color: var(--color-muted-dark); }
.foot__colophon dd { color: var(--color-on-dark); }
.foot__colophon a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-dark); }
.foot__small { font-size: var(--text-xs); line-height: 2; }

/* ---------- mobile type step ---------- */
@media (max-width: 40rem) {
  .lead { padding-block: var(--space-xl) var(--space-2xl); }
  .lead__actions .btn, .cta__actions .btn, .contact__actions .btn { width: 100%; }
  .next__link { padding: var(--space-md) var(--space-lg); }
  .memo { padding-inline: var(--space-md); }
  .steps__list { padding: var(--space-md); }
  .steps__list::before { left: calc(var(--space-md) + 27px); top: calc(var(--space-md) + 28px); bottom: calc(var(--space-md) + 28px); }
  .qa__item { padding: var(--space-md); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 150ms !important; }
  .js .wire .node, .js .wire .seg, .js .wire .box { animation: ink-on 150ms linear forwards; animation-delay: 0ms; }
  .wire.is-pulse .seg__pulse { animation: none; }
}