/* Hallmark · macrostructure: Stat-Led · tone: technical · anchor hue: cobalt 262°
 * theme: Cobalt on black (v5) · nav: N9 · footer: Ft2 · enrichment: none
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.85;
  color: var(--color-ink);
  background: var(--color-paper);
  font-feature-settings: "palt";
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}

a { color: var(--color-ink); }

::selection { background: var(--color-accent); color: var(--color-paper); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ページの背骨: セクションは全幅(境界線・暗色バンドのため)を保ち、
 * 内側の余白を広い画面でだけ増やして中身を共通幅に収める。
 * 子要素のmax-width/marginには触れないので、左揃えの関係は崩れない。 */
:root { --page-inset: max(var(--page-gutter), calc((100% - var(--shell)) / 2)); }
main > section {
  padding: var(--space-3xl) var(--page-inset);
  border-top: var(--rule);
}
main > section:first-child { border-top: none; }
main h2 {
  font-size: var(--text-display-s);
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
}
main > section > h2::before {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: var(--space-md);
}
.section-lead { max-width: var(--measure); color: var(--color-ink-soft); margin-bottom: var(--space-2xl); margin-top: calc(-1 * var(--space-lg)); }

/* ---------- proof figure (real report crops) ---------- */
.proof-figure {
  margin: var(--space-2xl) 0 0;
  max-width: 52rem;
  border: var(--rule);
  border-radius: var(--radius);
  overflow: clip;
  background: var(--color-paper-2);
}
.proof-figure img { display: block; width: 100%; height: auto; }
.mono-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  padding: var(--space-sm) var(--space-md);
  border-top: var(--rule);
}
.proof-figure--flush { margin-top: var(--space-md); max-width: 100%; }

/* ---------- report anatomy ---------- */
.anatomy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-2xl);
  max-width: 68rem;
}
.anatomy-item h3 {
  font-size: var(--text-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.anatomy-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
}
.anatomy-item > p { font-size: var(--text-sm); color: var(--color-ink-soft); }
.metric-list { margin-top: var(--space-md); font-size: var(--text-sm); }
.metric-list > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: var(--space-md); padding: var(--space-xs) 0; border-top: var(--rule); }
.metric-list dt { font-weight: 600; }
.metric-list dd { margin: 0; color: var(--color-ink-soft); }
.schematic { display: block; width: 100%; max-width: 22rem; height: auto; margin-top: var(--space-md); }
.sch-frame { fill: var(--color-paper-2); stroke: var(--color-hairline); stroke-width: 1.5; }
.sch-block { fill: var(--color-paper-2); }
.sch-line { fill: var(--color-hairline); }
.sch-accent { fill: var(--color-accent-wash); }
.sch-diff { fill: oklch(67% 0.20 27); }
.schematic-note { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-xs); }

/* ---------- nav · N9 edge-aligned ---------- */
.nav-edge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--page-gutter);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.nav-links { display: flex; align-items: center; gap: var(--space-lg);
  flex-wrap: wrap;   /* ラベル自体は折らず、行として折り返す(320pxでのはみ出し対策) */
}
.nav-plain {
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-plain:hover { color: var(--color-accent); }

/* ---------- CTAs ---------- */
.cta-outline, .cta-fill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.cta-outline { border: 1px solid var(--color-ink); color: var(--color-ink); background: transparent; }
.cta-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cta-outline:active { transform: translateY(1px); }
.cta-fill { background: var(--color-accent); color: var(--color-paper); border: 1px solid var(--color-accent); }
.cta-fill:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.cta-fill:active { transform: translateY(1px); }
.cta-link {
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cta-link:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ---------- hero · Stat-Led + measurement grid paper ---------- */
.hero-stat {
  padding-top: var(--space-2xl);
  background-image:
    repeating-linear-gradient(to right, var(--color-grid) 0 1px, transparent 1px 2.5rem),
    repeating-linear-gradient(to bottom, var(--color-grid) 0 1px, transparent 1px 2.5rem);
  background-size: 100% 100%;
}
.figure {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-figure);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
.figure .unit { font-size: 0.4em; font-weight: 400; color: var(--color-accent); }
.hero-line {
  font-size: var(--text-display-s);
  max-width: 24em;
  margin-top: var(--space-lg);
}
.qualifier {
  max-width: var(--measure);
  margin-top: var(--space-lg);
  color: var(--color-ink-soft);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* ---------- pain ---------- */
.pain .prose { max-width: var(--measure); }
.pain h2 { margin-bottom: var(--space-lg); }
.pain p + p { margin-top: var(--space-md); }
.pain strong { font-weight: 700; }

/* ---------- report ---------- */
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  max-width: 70rem;
}
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.report-item p { font-size: var(--text-sm); color: var(--color-ink-soft); }
.report-proof { margin-top: var(--space-xl); }

/* ---------- compare · F3 tabular ---------- */
.table-wrap { overflow-x: auto; max-width: 52rem; }
.spec-sheet {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--text-sm);
}
.spec-sheet th, .spec-sheet td {
  text-align: left;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) 0;
  border-bottom: var(--rule);
  vertical-align: top;
}
.spec-sheet thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-muted);
}
.spec-sheet tbody th { font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.spec-sheet .strong { font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }
.footnote { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-md); }

/* ---------- steps · F4 ---------- */
.steps {
  list-style: none;
  padding: 0;
  max-width: 44rem;
  display: grid;
  gap: var(--space-xl);
}
.steps li { display: flex; gap: var(--space-lg); align-items: baseline; }
.stage {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-accent);
  flex: 0 0 3.2em;
}
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.steps p { font-size: var(--text-md); color: var(--color-ink-soft); }

/* ---------- pricing ---------- */
.price-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  max-width: 56rem;
}
.price-card {
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--space-xl);
  background: var(--color-paper);
}
.price-card h3 { font-size: var(--text-md); color: var(--color-muted); font-weight: 400; font-family: var(--font-body); }
.price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-2xl);
  margin-top: var(--space-xs);
}
.price .yen { font-size: 0.55em; font-weight: 400; margin-left: 0.1em; }
.price-note { font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: var(--space-sm); }
.price-list {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.price-list li { padding: var(--space-xs) 0; border-top: var(--rule); }

/* ---------- faq ---------- */
.faq-list { max-width: var(--measure); display: grid; gap: var(--space-xl); }
.faq-item dt { font-weight: 700; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; }
.faq-item dd { margin: var(--space-xs) 0 0; font-size: var(--text-md); color: var(--color-ink-soft); }

/* ---------- cta strip ---------- */
.cta-strip { text-align: left; }
.cta-strip h2 { margin-bottom: var(--space-md); }
.cta-strip > p { max-width: var(--measure); color: var(--color-ink-soft); }
.cta-big { margin-top: var(--space-xl); font-size: var(--text-md); padding: 0.85rem 1.75rem; }
.cta-alt { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-md); }

/* ---------- operator ---------- */
.operator-list { max-width: 44rem; font-size: var(--text-sm); }
.operator-list > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule); }
.operator-list dt { color: var(--color-muted); }
.operator-list dd { margin: 0; }

/* ---------- footer · Ft2 ---------- */
.foot-line { border-top: var(--rule); padding: var(--space-lg) var(--page-inset); }
.foot-line p { font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .report-grid { grid-template-columns: minmax(0, 1fr); }
  .price-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  main > section { padding-block: var(--space-2xl); }
  .steps li { flex-direction: column; gap: var(--space-2xs); }
  .hero-actions { gap: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}

@media (max-width: 60rem) {
  .anatomy-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}

/* ---------- corporate top ---------- */
.home-mark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 11vw, 8rem);
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.biz-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  max-width: 60rem;
}
.biz-card {
  display: block;
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--space-xl);
  text-decoration: none;
  background: var(--color-paper);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
a.biz-card:hover { border-color: var(--color-accent); }
a.biz-card:active { transform: translateY(1px); }
.biz-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.biz-card p { font-size: var(--text-sm); color: var(--color-ink-soft); }
.biz-more {
  display: inline-block;
  margin-top: var(--space-md);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-accent);
}
.operator-more { margin-top: var(--space-lg); }
.biz-card--soon { background: var(--color-paper-2); }
.soon-tag {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
  border: var(--rule);
  border-radius: 999px;
  padding: 0.1em 0.7em;
}
@media (max-width: 60rem) {
  .biz-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- company page (Hallmark · system-follow · Cobalt) ---------- */
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  max-width: 68rem;
  align-items: start;
}
.profile-bio { max-width: var(--measure); }
.profile-bio p + p { margin-top: var(--space-md); }
.profile-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.profile-kana {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}
.profile-links { margin-top: var(--space-lg); }
.profile-facts { display: grid; gap: var(--space-lg); }
.fact-card {
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--space-xl);
  background: var(--color-paper);
}
.fact-card h3 {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.stat-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.stat-cell { border-top: 3px solid var(--color-ink); padding-top: var(--space-lg); }
.stat-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink);
}
.stat-unit { font-size: 0.38em; font-weight: 400; color: var(--color-accent); margin-left: 0.2em; }
.stat-cap { font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: var(--space-sm); max-width: 20em; }
.biz-lines { list-style: none; margin: 0; padding: 0; }
.biz-lines li { padding: var(--space-2xs) 0; }
.biz-lines li::before { content: "—"; color: var(--color-accent); margin-right: 0.6em; font-family: var(--font-mono); }
.biz-card--flat { background: var(--color-paper); }
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}
.work-item {
  border-top: var(--rule);
  padding-top: var(--space-lg);
}
.work-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.work-item p { font-size: var(--text-md); color: var(--color-ink-soft); }
.founder .prose { max-width: var(--measure); }
.founder .prose p + p { margin-top: var(--space-md); }
@media (max-width: 60rem) {
  .works-grid { grid-template-columns: minmax(0, 1fr); }
  .nav-links { gap: var(--space-md); }
}
.cred-list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--color-ink-soft); }
.cred-list li { padding: var(--space-xs) 0; border-top: var(--rule); }
.cred-list li:first-child { border-top: none; padding-top: 0; }
@media (max-width: 60rem) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-band { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}


/* Hallmark · macrostructure: Mechanism-Led (夢中憲章v2) · genre: modern-minimal · theme: Cobalt
 * redesign-elevate 2026-08-25: instrument-panel語彙(hairline構造/暗色バンド1本/mono読み出し/非対称ヒーロー)
 * nav: N9+hairline-sticky · footer: Ft2+links · enrichment: interactive-hero(図01)
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 */

/* ---------- nav upgrade: 計器盤のヘッダ(全ページ共通・追記で上書き) ---------- */
.nav-edge {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-paper);
  background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--rule);
  padding: var(--space-md) var(--page-inset);
}

/* ---------- section kicker: 顧客の問いの番号(実在する順序) ---------- */
.sec-kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
}
/* 番号は数値なので等幅のまま。ラベル文字列は本文書体に戻した。 */
.sec-kicker .sec-num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-accent);
  margin-right: 0.9em;
}
main > section > h2::before { display: none; } /* アクセントバーはkickerに役割を譲る */

/* ---------- hero: 左=言葉 / 右=図01(計測器フレーム) ---------- */
.hero-mu {
  position: relative;
  padding: var(--space-2xl) var(--page-inset) var(--space-3xl);
}
/* 方眼は擬似要素に載せて下端でフェードさせる。セクションの背景にそのまま敷くと、
   図01を独立セクションに出した時点で「方眼がここで切れる」水平の切れ目が出る。 */
.hero-mu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--color-grid) 0 1px, transparent 1px 2.5rem),
    repeating-linear-gradient(to bottom, var(--color-grid) 0 1px, transparent 1px 2.5rem);
  -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 48%, transparent 96%);
}
.hero-copy { position: relative; z-index: 1; }
.hero-copy { max-width: 54rem; }
/* 1行の中で意味の単位が割れないように span を block にして改行位置を固定する。
   「業務システム」が「業務 / システム」に割れるのを防ぐ目的。 */
.hero-line--mu {
  font-size: var(--text-display);
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: none;
}
.hero-line--mu span { display: block; }
/* ビジョンの2行目。1行目より一段落として、下の「何屋か」に視線を渡す。 */
.hero-line-sub {
  font-size: 0.56em;
  line-height: 1.35;
  color: var(--color-ink-soft);
  letter-spacing: -0.01em;
  margin-top: 0.3em;
}
/* 「何屋か」。ビジョンの代わりではなく、その下で答える行。
   1画面目でここまで読めることが条件なので、本文より明確に強くする。 */
.hero-what {
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.5;
  color: var(--color-ink);
}
.hero-copy .hero-what + .qualifier { margin-top: var(--space-md); }
.hero-copy .qualifier { margin-top: var(--space-xl); }
.hero-copy .hero-actions { margin-top: var(--space-xl); }

/* 図01フレーム: hairline + コーナーティック + monoキャプション */
.mech {
  position: relative;
  margin: 0;
  border: var(--rule);
  background: color-mix(in oklab, var(--color-paper-2) 86%, transparent);
}
.mech::before, .mech::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--color-accent);
}
.mech::before { top: -1.5px; left: -1.5px; border-right: 0; border-bottom: 0; }
.mech::after { bottom: -1.5px; right: -1.5px; border-left: 0; border-top: 0; }
.mech-cap {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: var(--rule);
}
.mech-body { padding: var(--space-lg); }
.mech-prompt { font-weight: 700; }
.mech-sub { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2xs); }
.mech-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.mech-chip {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-hairline);
  background: var(--color-paper);
  color: var(--color-ink-soft);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.mech-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.mech-chip:active { transform: translateY(1px); }
.mech-chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-paper);
}

.mech-stage {
  position: relative;
  margin-top: var(--space-lg);
  min-height: 21rem;
  /* 既定は「整列済み」。JS が無い環境では整列後のパイプラインが最初から見える。
     0 から始めるのは JS が動いたときだけ(body末尾で即座に 0 を書く)。
     逆にすると JS 無効時に .mech-flow の opacity が 0 のままになり、図の主要部が消える。 */
  --p: 1;
  --q: 1;
}

/* 散らかり: 丸く・ゆるく・淡い(整列後の6px角と対比させる) */
.mech-scatter { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.mech-scatter li {
  position: absolute;
  font-size: var(--text-sm);
  color: var(--color-accent-dim);
  border: 1px solid var(--color-accent-faint);
  border-radius: 999px;
  padding: 0.15em 0.8em;
  background: color-mix(in oklab, var(--color-paper-2) 72%, transparent);
  white-space: nowrap;
  transition: opacity 450ms var(--ease-in-out) calc(var(--i) * 25ms),
              transform 450ms var(--ease-in-out) calc(var(--i) * 25ms);
}
.mech-scatter li:nth-child(1) { left: 5%;  top: 4%;  --rot: -6deg; --dx:  6rem; --dy:  6rem;   }
.mech-scatter li:nth-child(2) { left: 48%; top: 1%;  --rot:  3deg; --dx: -2rem; --dy:  6rem;   }
.mech-scatter li:nth-child(3) { left: 22%; top: 22%; --rot: -2deg; --dx:  4rem; --dy:  3rem;   }
.mech-scatter li:nth-child(4) { left: 66%; top: 18%; --rot:  5deg; --dx: -4rem; --dy:  3.5rem; }
.mech-scatter li:nth-child(5) { left: 8%;  top: 44%; --rot:  4deg; --dx:  5rem; --dy:  0.5rem; }
.mech-scatter li:nth-child(6) { left: 44%; top: 40%; --rot: -5deg; --dx: -2rem; --dy:  1rem;   }
.mech-scatter li:nth-child(7) { left: 24%; top: 62%; --rot:  2deg; --dx:  3rem; --dy: -2.5rem; }
.mech-scatter li:nth-child(8) { left: 60%; top: 66%; --rot: -3deg; --dx: -3rem; --dy: -3rem;   }
.mech-scatter li:nth-child(9) { left: 12%; top: 84%; --rot:  6deg; --dx:  4rem; --dy: -5.5rem; }

/* 整列後: 一本の縦の流れ(6px角・定規で引いた線) */
.mech-flow {
  opacity: var(--q, 1);
  transform: translateY(calc((1 - var(--q, 1)) * 14px));
}
.mech-pipe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
.mech-node {
  position: relative;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
}
.mech-pipe .mech-node:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: var(--space-md);
  bottom: calc(-1 * var(--space-md) - 0.1rem);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
}
.mech-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  display: inline-block;
  margin-bottom: 2px;
}
.mech-node p { font-size: var(--text-md); line-height: 1.7; color: var(--color-ink-soft); max-width: 30em; }
.mech-owner {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  border: 1px solid var(--color-accent-faint);
  border-radius: 4px;
  padding: 0.05em 0.55em;
  color: var(--color-accent);
}
.mech-node--human { border-color: var(--color-accent); background: var(--color-accent-wash); }
.mech-node--human .mech-tag { color: var(--color-accent-deep); }
.mech-node--human p { color: var(--color-ink); }
.mech-owner--human { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-paper); }
.mech-verdict { margin-top: var(--space-lg); font-weight: 700; }
.mech-verdict strong { color: var(--color-accent-deep); }
.mech-body > .footnote { margin-top: var(--space-lg); }

/* ---------- 01 事業内容: hairline台帳 ---------- */
/* 2本柱(自社製品 / 受託)の群見出し。2px の太罫は群の頭に移した(旧: .svc-ledger の border-top)。 */
.svc-ledger { border-top: none; }
.svc-group + .svc-group { margin-top: var(--space-2xl); }
.svc-group-head {
  border-top: 2px solid var(--color-ink);
  padding-block: var(--space-md) var(--space-sm);
}
.svc-group-label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-sm);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--color-ink);
}
.svc-group-mark {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em;
  padding: 0.15em 0.7em; border-radius: 999px;
  background: var(--color-accent-wash); border: 1px solid var(--color-accent-dim); color: var(--color-accent-deep);
}
.svc-group-lead {
  font-size: var(--text-md); line-height: 1.9; color: var(--color-ink-soft);
  max-width: 56ch; margin-top: var(--space-2xs);
}
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: var(--space-md) var(--space-2xl);
  padding: var(--space-xl) 0;
  border-bottom: var(--rule);
  text-decoration: none;
  color: inherit;
  align-items: start;
}
.svc-row h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.svc-desc p { font-size: var(--text-md); color: var(--color-ink-soft); max-width: var(--measure); }
.svc-more {
  display: inline-block;
  margin-top: var(--space-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-accent);
}
a.svc-row:hover h3 { color: var(--color-accent); }
a.svc-row:active { transform: translateY(1px); }
.svc-row--static h3 { color: var(--color-ink-soft); }

/* ---------- 02 進め方: 横4列・番号は淡→濃(注意の密度) ---------- */
.mu-steps {
  list-style: none;
  margin-block: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl);
}
.mu-step { border-top: var(--rule); padding-top: var(--space-lg); }
.mu-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--space-sm);
}
.mu-step:nth-child(1) .mu-num { color: var(--color-accent-faint); }
.mu-step:nth-child(2) .mu-num { color: var(--color-accent-dim); }
.mu-step:nth-child(3) .mu-num { color: var(--color-accent); }
.mu-step:nth-child(4) .mu-num { color: var(--color-accent-deep); }
.mu-step:nth-child(4) { border-top-color: var(--color-accent); }
.mu-step h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.mu-step p { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* ---------- 03 実測: 暗色バンド(計測室・1ページに1本だけ) ---------- */
.band-dark {
  background: var(--color-graphite);
  color: var(--color-ondark-ink);
}
.band-dark .sec-kicker { color: var(--color-ondark-muted); }
.band-dark /* 番号は数値なので等幅のまま。ラベル文字列は本文書体に戻した。 */
.sec-kicker .sec-num {
  font-family: var(--font-mono); color: var(--color-ondark-accent); }
.band-dark h2 { color: var(--color-ondark-ink); }
.band-dark .section-lead { color: var(--color-ondark-soft); }
.band-dark .footnote { color: var(--color-ondark-muted); }
.ruler {
  height: 12px;
  margin-bottom: var(--space-2xl);
  background-image:
    repeating-linear-gradient(to right, var(--color-ondark-hair) 0 1px, transparent 1px 0.625rem),
    repeating-linear-gradient(to right, var(--color-ondark-hair) 0 1px, transparent 1px 3.125rem);
  background-size: 100% 6px, 100% 12px;
  background-position: bottom left, bottom left;
  background-repeat: repeat-x;
}

.band-dark .stat-cell { border-top: 1px solid var(--color-ondark-hair); }
.band-dark .stat-num { color: var(--color-ondark-ink); }
.band-dark .stat-unit { color: var(--color-ondark-accent); }
.band-dark .stat-cap { color: var(--color-ondark-soft); }
.proof-strip {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-ondark-hair);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-xl) var(--space-2xl);
  align-items: start;
}
.proof-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ondark-ink);
}
.proof-num .proof-lt { color: var(--color-ondark-accent); font-size: 0.6em; vertical-align: 0.28em; margin-right: 0.06em; }
.proof-num .proof-unit { color: var(--color-ondark-accent); font-size: 0.45em; font-weight: 400; margin-left: 0.08em; }
.proof-claim { color: var(--color-ondark-soft); }
.proof-claim strong { color: var(--color-ondark-ink); font-weight: 700; }
.proof-more { margin-top: var(--space-md); }
.band-dark .cta-link { color: var(--color-ondark-ink); border-color: var(--color-ondark-hair); }
.band-dark .cta-link:hover { color: var(--color-ondark-accent); border-color: var(--color-ondark-accent); }

/* ---------- 04 実績 ---------- */
.works-grid { gap: var(--space-2xl) var(--space-2xl); }
.work-item h3 { font-size: var(--text-lg); }

/* ---------- 06 相談: 大きく締める ---------- */
.cta-strip--mu { padding-block: var(--space-4xl); }
.cta-strip--mu .cta-line { font-size: var(--text-display); letter-spacing: -0.02em; max-width: 18em; }

/* ---------- footer ---------- */
.foot-line--mu { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); flex-wrap: wrap; }
.foot-links { display: flex; gap: var(--space-lg); }
.foot-links a { font-size: var(--text-xs); color: var(--color-muted); text-decoration: none; }
.foot-links a:hover { color: var(--color-accent); }

/* ---------- responsive ---------- */
@media (max-width: 68rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .mech { max-width: 40rem; }
}
@media (max-width: 60rem) {
  .svc-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-lg); }
  .mu-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .proof-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .nav-anchor { display: none; }
  .mech-body { padding: var(--space-md); }
  .mech-stage { min-height: 17rem; }
  .mech-scatter li:nth-child(8), .mech-scatter li:nth-child(9) { display: none; }
  .cta-strip--mu { padding-block: var(--space-3xl); }
}

/* ============================================================
 * AZE-21 レビュー改修 (2026-08-26)
 * A: 月額保守の売り場 / 問い合わせフォーム / 価格の手がかり / 買い手の言葉 / ヘッダーCTA
 * B: 商流5段階 / 実績の組み替え / 読者2導線
 * C: scroll-margin / タッチ端末の状態差
 * ============================================================ */

/* --- C: stickyヘッダー分のアンカー逃がし --- */
:root { --header-h: 5rem; }
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- A-5: ヘッダーの常時CTA --- */
.cta-nav { padding: 0.5rem 1rem; }
@media (max-width: 52rem) { .cta-nav { font-size: var(--text-xs); padding: 0.5rem 0.75rem; } }

/* --- C: タッチ端末でも分かる状態差(色だけに頼らない) --- */
.cta-fill:hover { transform: translateY(-1px); box-shadow: 0 2px 10px color-mix(in oklab, var(--color-accent) 30%, transparent); }
.cta-fill:active { transform: translateY(1px); box-shadow: none; }
.cta-outline:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }

/* --- B-3: 読者2種の分岐 --- */
.split-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
  max-width: 46rem;
}
/* 入口の分岐が3枚になった(Figma / 保守 / 受託)。 */
.split-paths--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 70rem; }
@media (max-width: 64rem) { .split-paths--3 { grid-template-columns: minmax(0, 1fr); max-width: 46rem; } }
.path-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  border: var(--rule);
  border-radius: var(--radius);
  background: var(--color-paper);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.path-card:hover { border-color: var(--color-accent); box-shadow: 0 4px 16px oklch(0% 0 0 / 0.55); transform: translateY(-1px); }
.path-card:active { transform: translateY(1px); box-shadow: none; }
.path-card--primary { border-color: var(--color-accent); background: var(--color-accent-wash); }
.path-label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.5; }
.path-body { font-size: var(--text-md); color: var(--color-ink-soft); }
/* margin-top:auto でカード下端に寄せる。本文の長さが違っても3枚のCTAが同じ高さに揃う。 */
.path-more { margin-top: auto; padding-top: var(--space-md); font-weight: 600; font-size: var(--text-sm); color: var(--color-accent); }

/* --- A-1 / A-3: サービス台帳(主力＋価格) --- */
.svc-head { display: flex; flex-direction: column; gap: var(--space-xs); }
.svc-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.price-num { font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--color-accent-deep); overflow-wrap: anywhere; }
.price-unit { font-size: var(--text-sm); color: var(--color-muted); }
/* 「個別見積」「ご相談は無料」は数値ではないので本文書体。等幅は数値・単位だけに残す。 */
.price-quote, .svc-price:has(.price-quote) .price-unit { font-family: var(--font-body); }
/* 価格未確定のあいだの表示。price-num(等幅・数値用)は日本語だと間延びするので別クラスにする。 */
.price-quote { font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--color-accent-deep); }
.svc-row--lead { border-left: 3px solid var(--color-accent); padding-left: var(--space-lg); background: linear-gradient(to right, var(--color-accent-wash), transparent 60%); }
.lead-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-paper);
  background: var(--color-accent);
  border-radius: 4px;
  padding: 0.1em 0.6em;
  vertical-align: 0.15em;
}
.svc-includes {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
}
.svc-includes li {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-hairline);
  border-radius: 4px;
  padding: 0.15em 0.6em;
  background: var(--color-paper);
}
.svc-terms { font-size: var(--text-md); color: var(--color-ink-soft); margin-top: var(--space-md); max-width: var(--measure); }
.svc-terms strong { font-weight: 700; color: var(--color-ink); }
a.svc-more { display: inline-block; text-decoration: none; }

/* --- B-1: 商流5段階 --- */
.mu-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mu-steps--5 .mu-step:nth-child(1) .mu-num { color: var(--color-accent-faint); }
.mu-steps--5 .mu-step:nth-child(2) .mu-num { color: var(--color-accent-dim); }
.mu-steps--5 .mu-step:nth-child(3) .mu-num { color: var(--color-accent); }
.mu-steps--5 .mu-step:nth-child(4) .mu-num { color: var(--color-accent); }
.mu-steps--5 .mu-step:nth-child(5) .mu-num { color: var(--color-accent-deep); }
.mu-steps--5 .mu-step:nth-child(4) { border-top-color: var(--color-hairline); }
.mu-steps--5 .mu-step:nth-child(5) { border-top-color: var(--color-accent); }
.mu-dur {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-accent-deep);
  margin-bottom: var(--space-xs);
  overflow-wrap: anywhere;
}
.mu-prep { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }

/* --- B-2: 実績を「課題/対応/期間/変化/継続」に --- */
.case-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
.case { border-top: 2px solid var(--color-ink); padding-top: var(--space-lg); }
.case h3 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.case-facts { font-size: var(--text-md); }  /* 実績の中身は読ませる層。ラベル(dt)だけ小さく保つ */
.case-facts > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--space-md); padding: var(--space-xs) 0; border-top: var(--rule); }
.case-facts > div:first-child { border-top: none; padding-top: 0; }
.case-facts dt { font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-muted); padding-top: 0.35em; }
.case-facts dd { margin: 0; color: var(--color-ink-soft); }

/* --- A-2: 中間CTA --- */
.cta-mid { background: var(--color-accent-wash); }
.cta-mid-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.cta-mid h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); max-width: 20em; }
.cta-mid h2::before { display: none; }
.cta-mid p { font-size: var(--text-sm); color: var(--color-ink-soft); max-width: var(--measure); }

/* --- A-2: 問い合わせフォーム --- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.field { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; gap: var(--space-xs); }
.field .req, .field .opt {
  
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  border-radius: 3px;
  padding: 0.05em 0.5em;
}
.field .req { color: var(--color-paper); background: var(--color-accent); }
.field .opt { color: var(--color-muted); border: 1px solid var(--color-hairline); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.7; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-accent-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-wash);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.form-actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.form-actions .cta-big { border: none; cursor: pointer; font-family: var(--font-body); }
.form-note { font-size: var(--text-xs); color: var(--color-muted); }
.form-note a { color: var(--color-accent); }

.contact-aside { border: var(--rule); border-radius: var(--radius); padding: var(--space-xl); background: var(--color-paper-2); }
.aside-line { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-muted); margin-bottom: var(--space-md); }
.aside-list { list-style: none; padding: 0; margin: 0; font-size: var(--text-md); }
.aside-list li { padding: var(--space-sm) 0; border-top: var(--rule); color: var(--color-ink-soft); }
.aside-list li::before { content: "—"; color: var(--color-accent); margin-right: 0.6em; font-family: var(--font-mono); }
.aside-vision {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-accent);
}
.aside-note { font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: var(--space-xs); }

/* --- responsive --- */
@media (max-width: 68rem) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .mu-steps--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .split-paths { grid-template-columns: minmax(0, 1fr); }
  .case-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .svc-row--lead { padding-left: var(--space-md); }
  .cta-mid-inner { align-items: flex-start; }
}
@media (max-width: 48rem) {
  .mu-steps--5 { grid-template-columns: minmax(0, 1fr); }
  .contact-form { grid-template-columns: minmax(0, 1fr); }
  .case-facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .case-facts dt { padding-top: 0; }
}
@media (max-width: 40rem) {
  .contact-aside { padding: var(--space-lg); }
  .cta-mid h2 { font-size: var(--text-lg); }
}

/* C: 横スクロールする表の案内 */
.table-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}
@media (min-width: 60rem) { .table-hint { display: none; } }
.table-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cta-alt a { color: var(--color-accent); }

/* 送信先未設定のあいだの注記とフォーム無効表示 */
.form-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); grid-column: 1 / -1; }
/* 送信先が未設定のあいだ / JS無効時に出る、実際に届く導線。
   .form-fields は display:grid を持つので hidden 属性だけでは消えない。必ず下の [hidden] 指定とセットで使うこと。 */
.form-fields[hidden] { display: none; }
.form-mailto {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  color: var(--color-ink);
  background: var(--color-accent-wash);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.form-mailto-lead { font-size: var(--text-lg); line-height: 1.7; }
.form-mailto-sub { font-size: var(--text-sm); line-height: 1.8; color: var(--color-muted); }
.form-mailto-sub a { color: var(--color-accent-deep); font-weight: 700; }
.form-fields[disabled] { opacity: 0.55; }
.form-fields[disabled] input,
.form-fields[disabled] select,
.form-fields[disabled] textarea { background: var(--color-paper-2); cursor: not-allowed; }
.form-fields[disabled] .cta-fill { background: var(--color-muted); border-color: var(--color-muted); cursor: not-allowed; box-shadow: none; }
.form-fields[disabled] .cta-fill:hover { transform: none; box-shadow: none; }
@media (max-width: 48rem) { .form-fields { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
 * AZE-21 追補: 見える証拠 (2026-08-26)
 * 保守レポートの見本 / 自社プロダクトの掲載枠
 * 画像ではなく紙面をHTMLで組む: 軽く、数値を後から差し替えられ、読み上げにも乗る
 * ============================================================ */

.report-sheet-wrap { margin: var(--space-3xl) 0 0; }
.sheet-lead { max-width: var(--measure); margin-bottom: var(--space-lg); }
.sheet-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}
.sheet-lead h3 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.sheet-lead p { font-size: var(--text-sm); color: var(--color-ink-soft); }

.report-sheet {
  max-width: 58rem;
  background: oklch(100% 0 0);
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: 0 1px 2px oklch(23% 0.018 250 / 0.05), 0 8px 24px oklch(23% 0.018 250 / 0.05);
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-ink);
}
.sheet-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; }
.sheet-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); overflow-wrap: anywhere; }
.sheet-sample {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: 4px;
  padding: 0.2em 0.7em;
  white-space: nowrap;
}
.sheet-block { margin-top: var(--space-xl); }
.sheet-h {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-sm);
  border-bottom: var(--rule);
}
.sheet-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sheet-table th, .sheet-table td { text-align: left; vertical-align: top; padding: var(--space-xs) var(--space-md) var(--space-xs) 0; border-bottom: var(--rule); }
.sheet-table thead th { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); letter-spacing: 0.04em; }
.sheet-table td { color: var(--color-ink-soft); }
.sheet-table tbody tr:last-child td { border-bottom: none; }
.tag-inc, .tag-fix, .tag-done {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border-radius: 3px;
  padding: 0.1em 0.5em;
  white-space: nowrap;
}
.tag-inc { color: oklch(45% 0.16 30); border: 1px solid oklch(45% 0.16 30 / 0.4); }
.tag-fix { color: var(--color-accent-deep); border: 1px solid var(--color-accent-faint); }
.tag-done { color: var(--color-muted); border: 1px solid var(--color-hairline); }
.sheet-kv { font-size: var(--text-sm); }
.sheet-kv > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: var(--rule); }
.sheet-kv > div:last-child { border-bottom: none; }
.sheet-kv dt { color: var(--color-muted); }
.sheet-kv dd { margin: 0; color: var(--color-ink-soft); overflow-wrap: anywhere; }
.sheet-list { margin: 0; padding-left: 1.2em; font-size: var(--text-sm); color: var(--color-ink-soft); }
.sheet-list li { padding: var(--space-2xs) 0; }
.sheet-list li::marker { color: var(--color-accent); }
.sheet-note { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); overflow-wrap: anywhere; }
.sheet-foot {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule);
}

.own-products { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 2px solid var(--color-ink); }
.own-products h3 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.own-lead { font-size: var(--text-md); color: var(--color-ink-soft); max-width: var(--measure); margin-bottom: var(--space-xl); }
.product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.product-shot {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--color-paper-2);
  border: 1px dashed var(--color-hairline);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  overflow: hidden;
}
.product-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-todo {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-md);
  overflow-wrap: anywhere;
}
.product h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-2xs); overflow-wrap: anywhere; }
.product p { font-size: var(--text-sm); color: var(--color-ink-soft); overflow-wrap: anywhere; }

@media (max-width: 60rem) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .report-sheet { padding: var(--space-lg); }
  .sheet-kv > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .sheet-table { display: block; overflow-x: auto; }
}
@media (max-width: 40rem) {
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .sheet-head { flex-direction: column; }
}

/* 視覚的には隠すが支援技術には読ませる */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
 * v5 · 黒基調 (2026-08-26)
 * 地を near-black に反転したことで意味が壊れる箇所だけを直す。
 * 色の値そのものは tokens.css に集約してあるので、ここは「明るい前提の造作」の補正。
 * ============================================================ */

/* --- 保守レポートの見本だけは白い紙のまま --- *
 * 書類の見本を暗色で刷ると「書類」に見えない。黒い誌面に一枚だけ紙が置かれている状態にする。
 * 内側は明色トークンに戻す。--rule は :root で解決済みの値を継承するので、
 * --color-hairline を上書きしただけでは変わらない。--rule も明示的に再宣言すること。 */
.report-sheet {
  color-scheme: light;
  --color-ink:          oklch(23% 0.018 250);
  --color-ink-soft:     oklch(38% 0.02 250);
  --color-muted:        oklch(48% 0.02 250);
  --color-hairline:     oklch(87% 0.01 245);
  /* 明るい紙の上では「濃い=強い」。地の暗色版とは明度の向きが逆。

     アクセントをシアンへ振ったのでこの島も色相を合わせる。

     ⚠️ シアンは低明度で高彩度を出せない(sRGBの端で切れる)。コバルトと同じ 0.20 は置けないので、

        実測して収まる値にしてある(oklch(50% 0.08 214) = rgb(26,111,127) / 白地比 5.79:1)。 */

  --color-accent:       oklch(50% 0.080 214);
  --color-accent-deep:  oklch(43% 0.070 216);
  --color-accent-faint: oklch(72% 0.060 214);
  --rule: 1px solid oklch(87% 0.01 245);
  color: var(--color-ink);
  border: 1px solid oklch(80% 0.01 245);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.6), 0 18px 48px oklch(0% 0 0 / 0.45);
}

/* --- 入力欄は地より一段持ち上げる(暗色では凹より凸の方が入力可能に見える) --- */
.field input, .field select, .field textarea { background: var(--color-paper-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: 1; }

/* ブラウザの自動入力は明色を強制してくるので打ち消す */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--color-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--color-paper-2) inset;
  caret-color: var(--color-ink);
}

/* --- 無効時の送信ボタン: 明色地では muted=灰色で「沈む」が、暗色地では逆に浮くので直す --- */
.form-fields[disabled] .cta-fill {
  background: var(--color-paper-2);
  border-color: var(--color-hairline);
  color: var(--color-muted);
}

/* --- 計測室バンドは「地より明るい盤」になった。輪郭を締めて浮きすぎを防ぐ --- */
.band-dark { box-shadow: inset 0 1px 0 var(--color-ondark-hair), inset 0 -1px 0 var(--color-ondark-hair); }

/* =========================================================================
   v6 · 図01をヒーローから独立させ、縦スクロールで整列させる
   ヒーローが「読ませる」と「選ばせる」を同時に要求していたのをやめた。
   ヒーロー=言葉だけ / 図01=独立セクション、という分離。
   ========================================================================= */

.mech-sec {
  /* 図01はヒーローの続きの一息なので、セクション区切りの罫は引かない。
     台帳の罫は次の「01 何を任せられるか」から始める。 */
  border-top: none;
  padding-block: var(--space-2xl) var(--space-3xl);
  padding-inline: var(--page-inset);   /* 独自paddingを持つので --page-gutter ではなく背骨を使う */
}

/* var(--p, 1) / var(--q, 1) のフォールバックが 1 なのは意図的。
 * 「値が無ければ整列済み＝内容が見える」側に倒す。0 にすると .mech-stage の
 * 既定宣言を消した瞬間に図の主要部が消える(実際に一度やった)。
 *
 * --- 散らかり: リンクに見えないよう青をやめて灰にする ---
 * 以前は accent-dim + accent-faint の青いピルで、押せないのに押せそうに見えていた。
 * コバルトは「整列した側」に取っておく。灰の散らかり → 青い秩序、で意味が読める。 */
.mech-scatter li {
  color: var(--color-muted);
  border-color: var(--color-hairline);
  transition: none;                    /* --p で連続駆動するので遷移は持たせない */
  transform:
    translate(calc(var(--dx) * var(--p, 1)), calc(var(--dy) * var(--p, 1)))
    rotate(calc(var(--rot) * (1 - var(--p, 1))))
    scale(calc(1 - 0.4 * var(--p, 1)));
  opacity: calc(1 - var(--p, 1));
}

/* 整列の進み具合を示す細い罫。0→100%まで伸びる */
.mech-stage::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--space-md));
  height: 1px;
  width: calc(var(--p, 1) * 100%);
  background: var(--color-accent);
  opacity: 0.55;
}

/* 例の切り替えは「整列の物語」が終わったあとに置く。最初の接触では選択を求めない */
.mech-switch {
  margin-top: var(--space-2xl);
}
.mech-switch-label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}
.mech-chips { margin-top: 0; }

/* --- 階層: 黒地では細いグレーが沈む。見出しと本文のあいだを作る --- */
.qualifier { color: var(--color-ink); }
.hero-copy .qualifier {
  font-size: var(--text-lg);
  line-height: 1.85;
  max-width: 34em;
}
.section-lead { color: var(--color-ink); }
.mech-prompt { font-size: var(--text-lg); }
.mech-node p { color: var(--color-ink); }

.split-paths { margin-top: var(--space-2xl); }

@media (max-width: 640px) {
  .mech-sec { padding-block: var(--space-2xl); }
  .hero-copy .qualifier { font-size: var(--text-md); line-height: 1.8; }
}

/* 動きを減らす設定では、整列済みの状態で静止させる(JS側でも --p/--q を1に固定する) */
@media (prefers-reduced-motion: reduce) {
  .mech-scatter li { transform: none; opacity: 0; }
  .mech-flow { opacity: 1; transform: none; }
  .mech-stage::after { width: 100%; }
}


/* モニター価格の終了条件(/coding/)。値引きの期限を明示して恒久アンカー化を防ぐ。 */
.price-limit {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-ink-soft);
}
.price-limit strong { color: var(--color-ink); }


/* 実績セクションの「見せられる実物」。自社プロダクトの空枠と入れ替えたもの(2026-08-28)。 */
.proof-real { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule); }
.proof-real-lead { font-size: var(--text-md); line-height: 1.9; color: var(--color-ink-soft); max-width: 62ch; margin-top: var(--space-xs); }
.proof-real-figure { margin: var(--space-lg) 0 var(--space-md); }
.proof-real-figure img {
  display: block; width: 100%; height: auto; max-width: 56rem;
  border: var(--rule); border-radius: var(--radius); background: var(--color-paper-2);
}
.proof-real-figure figcaption { margin-top: var(--space-xs); }


/* ---------- 問い合わせフォーム (Vercel Function + Resend / 2026-08-28) ---------- */
/* .form-mailto は display:flex を持つので、hidden 属性だけでは消えない。
   .form-fields[hidden] と同じ罠。必ずこの指定とセットで使うこと。 */
.form-mailto[hidden] { display: none; }

/* ハニーポット。人間に見せず、レイアウトにも影響させない。
   display:none だと埋めないボットがいるので、画面外に飛ばす方式にする。 */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-status {
  grid-column: 1 / -1;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.8;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  border: var(--rule);
}
.form-status[hidden] { display: none; }
.form-status--sending { color: var(--color-muted); }
.form-status--ok {
  color: var(--color-ink);
  border-color: var(--color-accent);
  background: var(--color-accent-wash);
  font-weight: 700;
}
.form-status--ng { color: var(--color-ink); border-color: var(--color-warn, var(--color-accent-dim)); }
#form-submit[disabled] { opacity: 0.6; cursor: progress; }


/* ============================================================
 * v8 タイポグラフィの立て直し (2026-08-29)
 * 「見出し / 読ませる本文 / 補助情報」の3層を作る。
 * 変更前は描画文字の78%が16px以下で、本文と補足が同じ14pxだった＝階層が無い。
 * ============================================================ */

/* 行長の上限。サイズだけ上げても、行が長いままだと読めない。
   全角35〜45文字が上限。小さい文字ほど短く組む。 */
.footnote,
.mech-sub,
.schematic-note,
.form-note,
.form-mailto-sub,
.aside-note,
.sheet-lead p,
.price-note { max-width: 46ch; }

.section-lead,
.proof-real-lead,
.own-lead,
.svc-group-lead { max-width: var(--measure); }
/* .mech-node p は既に 30em で組まれている。ここで指定すると広げてしまうので触らない。 */

/* 補助情報は小さいままでよいが、本文の隣に置くと沈むので行間で補う。 */
.footnote, .form-note, .schematic-note { line-height: 1.9; }

/* クリックできる要素は1行が原則。2行になると「壊れている」ように見え、
   行の縦リズムも崩れる。タイプスケールを上げたときに /coding/ のナビで実際に折り返した。 */
.nav-links a, .foot-links a, .cta-fill, .cta-nav { white-space: nowrap; }


/* ---------- ロゴ (2026-08-30) ----------
   正本は site/assets/logo.png（星野さん作の円相ロゴ・透過PNG）。

   ★ヘッダーとフッターにはマークを置かない（文字のみ）。
     このロゴは墨が濃紺 rgb(0,24,96) で、小さくすると地に沈んで
     「シアンの三日月」に見える。36pxや22pxは、円相が読めるサイズではない。
     brightness で持ち上げる応急処置も試したが、
     **円相が消えたロゴを出し続けるより、出さない方がブランドとして正しい**。
     代わりに ヒーローで 330px で見せる（.hero-logo）。そこでは素のまま成立する。

   ⚠️ PNG なので currentColor も mask-image も使えない。地の色には追随しない。
   ⚠️ 240pxを下回るサイズで使わないこと。実測で 330px は明瞭、240px は可、
      それ以下は墨が読めなくなる。

   派生物（favicon 16/32・apple-touch-icon・OGP）は python3 _tools/make-brand.py で生成。
   favicon は**白地に焼く**（透過のままだと暗いタブで墨が消える）。
   焼き直し忘れは predeploy の [3b] が止める。 */
.wordmark { display: inline-flex; align-items: center; gap: 0.5em; }
/* 図番号。等幅・字間広め・淡色で「資料の図版」の語彙に揃える。
   実際の図版にだけ振る。ナビのカードは図版ではないので番号を振らない。 */
.fig-no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  color: var(--color-accent);
  margin-right: 0.9em;
}


/* 色は必ずトークン経由にすること。直書きすると、地色や色相を変えたときに取り残される。
   実際に3箇所を取り残した: CTAホバーの光暈がコバルトのまま / 旧 paper-2(18.5%) の直書きが
   地(20.6%)より暗くなって「持ち上がった面」が沈んだ / 図の枠が地とほぼ同化した。
   走査は **アルファ付きの形も拾える** 正規表現で行うこと:
     grep -nE "oklch\([0-9.]+% 0\.[0-9]+ [0-9]+" site/css/*.css   */


/* ============================================================
 * v11 組版の追い込み (2026-08-30)
 * palt は既に効いている(実測13.1%詰まる)。ここで足すのは字間・ウェイト・改行制御。
 * ============================================================ */

/* ① サイズ別の字間。一律だと大きい文字が間延びし、小さい文字が詰まって見える。
      40px超は -0.03em / 20〜32px は -0.01em / 本文は 0 / 12px以下の等幅ラベルは +0.1em。
      実測して緩かった3箇所を締める。 */
.hero-line--mu { letter-spacing: -0.03em; }        /* 70px。-0.02em では緩い */
main > section > h2 { letter-spacing: -0.02em; }   /* 42px。-0.01em では緩い */
.hero-what { letter-spacing: -0.01em; }            /* 25px。指定なし(0)だった */

/* ② ウェイト500を中間層に。見出し700と本文400の間が無く、中見出しが全部700で重かった。 */
.hero-what,
.path-label,
.svc-group-label,
.form-mailto-lead,
.sheet-eyebrow { font-weight: 500; }
/* 本文中の強調も700は強すぎる。500だと沈むので、字面の詰まった見出し書体は使わず本文書体の500。 */
.prose strong, .qualifier strong, .svc-desc strong, .path-body strong { font-weight: 500; }

/* ③ 改行の質。見出しは行末を揃え、本文は最終行だけ短く残るのを防ぐ。
      line-break: strict で日本語の禁則を厳密にする(「、」「。」が行頭に来ない)。 */
h1, h2, h3, .hero-what, .path-label { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
body { line-break: strict; }


/* ---------- ヒーロー: 左=言葉 / 右=ロゴ (2026-08-30) ----------
   ロゴは大きく使う。墨が濃紺なので小さいと地に沈むが、330pxなら分離して読める。
   ⚠️ ここで brightness などの補正は掛けない。大きければ素のままで成立する。 */
.hero-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-3xl);
  align-items: center;
}
.hero-logo { display: block; width: 330px; height: auto; justify-self: end; }
.hero-lead .hero-copy { max-width: none; }

@media (max-width: 68rem) {
  /* 縦積み。ロゴは240pxを下限に保つ(それ以下は沈む) */
  .hero-lead { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .hero-logo { width: 240px; justify-self: start; order: -1; }
}
@media (max-width: 30rem) {
  /* 幅が足りず240pxを保てない領域では出さない。
     小さく出すと円相が消えたロゴを見せることになる。 */
  .hero-logo { display: none; }
}