/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * genre: editorial · macrostructure: Narrative Workflow
 * hero: H9 custom-illustration-centerpiece · knobs: build=実績スクショの傾いた面, animation=入場のみ（studio.design/ja方式）, scale=dominant
 * nav: N9 edge-aligned-minimal · knobs: CTA=filled slab, wordmark=latin-tracked, padding-block=spacious
 * footer: Ft2 inline-rule-single-line · knobs: order=wordmark/links/credit, separator=vertical rule, density=spaced
 * sections: F4 step-sequence (numbering=01/02/03, layout=vertical stack, connector=line)
 *           F3 tabular-spec-sheet (columns=4, rules=every row, numbers=tabular)
 *           T2 logo-wall-hairline (layout=grid, treatment=ghosted ink, divider=hairline cells)
 *           S2 hanging section heads · C4 sticky-bottom-bar (reveal=after fold, mobile only)
 * theme: custom "Credence" · vibe: quiet elegant intelligence, ivory and bronze
 *        paper oklch(96% 0.014 83) · accent oklch(52% 0.105 78) champagne-bronze
 *        display Noto Serif JP 200 · body Noto Sans JP 400 · latin Geist
 *        axes: light / roman-serif / chromatic-champagne
 * enrichment: 実績スクリーンショットの面（hero, assets/works/hero/）+ one supplied still (Before/After)
 * tone: luxury · anchor hue: 78–83°
 *
 * slop test 69/69 ✓ — contrast: pass (46–50) · slop: pass (51–55) · honest: pass (56)
 *   chrome: pass (57) · tokens: pass (58) · responsive: pass (59) · icons: pass (60)
 *   mobile: pass (36, 59, 61–69) — 320 / 375 / 414 / 768 / 1440 / 1920 で実機検証済み
 * gate 66 補足: セクション見出しにアイブロウは1つも置いていない。01–03 は <ol> 内の
 *   工程番号（真に順序性のある内容）で、セクションヘッドのタグ左／見出し右ではない。
 * gate 27 補足: --measure は 34em。和文34字≒欧文68ch で 45–75ch 帯に収まる。
 */

@import url("tokens.css");

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: var(--fw-display); }
table { border-collapse: collapse; width: 100%; }
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }
/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
  min-width: 0;
}
.lede {
  max-width: var(--measure);
  color: var(--color-muted);
  font-size: var(--text-md);
}
/* 欧文ラベルは body 面の tracked uppercase で組む。
   アウトライア（Geist）は「ワードマーク」と「数字」の2スロットに限定する（gate 40） */
.label {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-neutral);
}
.tnum { font-variant-numeric: tabular-nums; }
/* ============================================================
   BUTTONS — 角丸を抑えたスラブ。主CTAはインク地にアイボリー文字
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3rem;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.btn__arrow { transition: transform var(--dur-short) var(--ease-out); }
.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.btn--ghost {
  background: transparent;
  border-color: var(--color-neutral);
  color: var(--color-ink);
}
.btn--on-void {
  background: var(--color-paper);
  color: var(--color-ink);
}
.btn--ghost-inv {
  background: transparent;
  border-color: var(--color-rule-inv);
  color: var(--color-ink-inv);
}
/* アクセントを面に敷くときの文字色は必ず accent-ink（paper on accent = 4.98:1） */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-accent); color: var(--color-accent-ink); }
  .btn--ghost:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
  .btn--on-void:hover { background: var(--color-rule); }
  .btn--ghost-inv:hover { border-color: var(--color-rule); color: var(--color-rule); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
@media (pointer: coarse) { .btn { min-height: 48px; } }
/* ============================================================
   NAV — N9 Edge-aligned minimal
   ワードマークとCTAの間の空白が設計。リンク行は置かない
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--page-gutter);
  background: var(--color-paper);
  border-bottom: 1px solid transparent;
  /* padding はアニメーションさせない（レイアウトを動かすプロパティは禁止） */
  transition: border-color var(--dur-short) var(--ease-out);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--color-rule-soft); }
.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 44px;   /* タップ領域 */
  color: var(--color-ink);
}
.wordmark__logo { inline-size: clamp(7.8rem, 12vw, 10.2rem); block-size: auto; }
.wordmark__service {
  padding-inline-start: var(--space-md);
  border-inline-start: 1px solid var(--color-rule-soft);
  font-family: var(--font-latin);
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  white-space: nowrap;
}
/* 狭幅ではCTAラベルを短くする。折り返させない（gate 59） */
.nav__cta-short { display: none; }
@media (max-width: 30rem) {
  .nav { padding-inline: var(--space-md); gap: var(--space-xs); }
  .nav .btn { padding-inline: var(--space-md); }
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
  .wordmark { gap: var(--space-xs); }
  .wordmark__service { display: none; }
}
/* Cマーク — ロゴのアパーチャをCSSだけで描く（Tier A） */
.cmark {
  position: relative;
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.75rem;
  border: 2px solid currentColor;
  border-inline-end: 0;
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
}
.cmark::after {
  content: "";
  position: absolute;
  inset-block: 18%;
  inset-inline-end: 2px;
  inline-size: 1px;
  background: var(--color-rule);
}
/* ============================================================
   HERO — H9 centerpiece。左寄せの見出しに大アパーチャが重なる
   ============================================================ */
/* 下パディングを上の1.3倍以上にして、Heroをページに沈める（浮かせない） */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl)) clamp(var(--space-2xl), 9vw, var(--space-4xl));
}
/* 他セクションと同じ左端に揃える。器は shell のまま、内容側で幅を切る */
.hero__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.hero__copy { display: grid; gap: var(--space-lg); position: relative; z-index: 2; }
.hero__eyebrow {
  color: var(--color-accent);
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
}
.hero__title { font-size: var(--text-display); max-width: 14em; }
/* 〜368px：「信頼される形に。」8字が1行に収まる上限まで落とす。
   落とさないと「に。」だけが3行目に孤立する */
@media (max-width: 23rem) {
  .hero__title { font-size: 2.05rem; }
}
/* 2カラムになると見出しのカラム幅は約466px。--text-display が 76px まで伸びるので
   「信頼される形に。」8字（約614px）は物理的に1行へ入らず、必ず3行になる。
   自動改行に任せると幅によって「に。」や「。」だけが最終行に落ちるため、
   2カラム時だけ 4/5/3 で割る改行を入れる。1カラム時は2行に収まるので出さない */
.hero__title-br { display: none; }
@media (min-width: 60rem) {
  .hero__title-br { display: inline; }
}
.hero__lead { max-width: 30em; font-size: var(--text-md); color: var(--color-muted); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-xs);
}
.hero__note {
  font-size: var(--text-sm);
  color: var(--color-neutral);
}
.hero__promise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--color-rule);
  max-width: 39rem;
}
.hero__promise li {
  display: grid;
  gap: var(--space-2xs);
  padding-inline-end: var(--space-sm);
  border-inline-end: 1px solid var(--color-rule-soft);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.hero__promise li:last-child { border: 0; }
.hero__promise b {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
.hero__visual {
  position: relative;
  min-block-size: clamp(23rem, 40vw, 33rem);
  isolation: isolate;
}
/* ============================================================
   HERO STAGE — studio.design/ja の実装をなぞる
   ① 幅190%の面をセクション外へはみ出させる（.hero の overflow:clip で切る）
   ② 入場は .appear を外して CSS transition に流すだけ。
      @keyframes もスクロール連動も使わない。遅延・時間とも 600ms→1200ms（Studio 実測値）
   ③ 面の中で1枚だけが切り替わり続ける（Studio は <sd-video>、ここは実績のクロスフェード）
   ============================================================ */
.hero__stage {
  position: absolute;
  inset: 0;
  perspective: 1600px;
  perspective-origin: 78% 30%;
  pointer-events: none;
}
.hero__plane {
  position: absolute;
  inset-block-start: -46%;
  inset-inline-start: 4%;
  inline-size: 190%;
  transform: rotateX(11deg) rotateZ(-10deg);
  transform-style: preserve-3d;
}
.hero__wall {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.5rem, 1.3vw, 1rem);
}
.hero__page {
  flex: 1 1 0;
  min-inline-size: 0;
  margin: 0;
  overflow: hidden;
  background: var(--color-void);
  translate: 0 calc(var(--y, 0) * 1.05rem);
  box-shadow:
    0 1.4rem 3rem oklch(19% 0.011 250 / 0.16),
    0 0 0 1px oklch(100% 0 0 / 0.66);
  /* ここは終状態。初期状態は .appear 側（JSがある時だけ）に置く */
  opacity: 1;
  transition:
    opacity   calc(600ms + var(--i, 0) * 150ms) var(--ease-out) calc(600ms + var(--i, 0) * 150ms),
    translate calc(600ms + var(--i, 0) * 150ms) var(--ease-out) calc(600ms + var(--i, 0) * 150ms);
}
.hero__page img { display: block; inline-size: 100%; block-size: auto; }
/* 面を覆う下地。抜けながら実績が像を結ぶ（Studio の .sd-16 相当）。
   ページの立ち上がり（600ms〜）と重なるよう早めに抜き始める。
   遅らせるとただの幕になって、組み上がりが下地の裏で終わってしまう */
.hero__plate {
  position: absolute;
  inset: -6% -4%;
  background: linear-gradient(158deg, var(--color-paper-2), var(--color-sand));
  opacity: 0;
  /* ここだけ素の ease-out（Studio の実測値と同じ）。--ease-out は expo で立ち上がりが速く、
     下地が一瞬で消えてクロスフェードにならない */
  transition: opacity 1400ms ease-out 200ms;
}
.hero__live {
  position: absolute;
  z-index: 3;
  inset-inline-start: 4%;
  inset-block-start: 41%;
  inline-size: 52%;
  transform: translateZ(90px);
  background: var(--color-paper);
  box-shadow:
    0 2.6rem 5rem oklch(19% 0.011 250 / 0.28),
    0 0 0 1px oklch(19% 0.011 250 / 0.06);
  opacity: 1;
  transition: opacity 1200ms var(--ease-out) 1200ms;
}
.hero__live-bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.55rem;
  border-block-end: 1px solid var(--color-rule-soft);
  color: var(--color-neutral);
  font-family: var(--font-latin);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}
.hero__live-bar span {
  inline-size: 0.3rem;
  block-size: 0.3rem;
  border-radius: 50%;
  background: var(--color-rule-soft);
}
.hero__live-bar em { font-style: normal; margin-inline-start: 0.45rem; }
.hero__live-screen { position: relative; aspect-ratio: 820 / 401; }
.hero__live-shot {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
/* 入りを少し遅らせる。同時にクロスさせると密度の高い画面同士が重なって濁る。
   間の一瞬は下の紙面（--color-paper）が見える */
.hero__live-shot.is-on { opacity: 1; transition-delay: 240ms; }
/* 初期状態 — JSがある時だけ。JSなしでは最初から完成形が見える */
.js .hero__stage.appear .hero__plate { opacity: 1; }
.js .hero__stage.appear .hero__page  { opacity: 0; translate: 0 calc(var(--y, 0) * 1.05rem - 8px); }
.js .hero__stage.appear .hero__live  { opacity: 0; }
/* ---- 面の右下の帯：クレジット＋一時停止（Studio の <sd-toggle> 位置）----
   面の上に直接置くと写真に埋もれて読めないので、紙面の帯に載せる */
.hero__meta {
  position: absolute;
  z-index: 4;
  inset-inline-end: 0;
  inset-block-end: -0.75rem;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-inline-size: 100%;
  padding: 0.35rem 0.35rem 0.35rem 0.85rem;
  border: 1px solid var(--color-rule-soft);
  background: oklch(96% 0.014 83 / 0.93);
  backdrop-filter: blur(8px);
}
.hero__caption {
  color: var(--color-neutral);
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.hero__caption span { color: var(--color-rule); }
.hero__pause { display: none; }
.js .hero__pause {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-rule-soft);
  background: transparent;
  color: var(--color-neutral);
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.hero__pause:hover { color: var(--color-ink); border-color: var(--color-rule); }
.hero__pause-icon {
  inline-size: 0.5rem;
  block-size: 0.6rem;
  border-inline: 0.16rem solid currentColor;   /* ⏸ */
}
.hero__pause[aria-pressed="true"] .hero__pause-icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);   /* ▶ */
}
@media (min-width: 60rem) {
  .hero { padding-block-start: clamp(var(--space-lg), 3vw, var(--space-2xl)); }
  .hero .shell { max-width: 82rem; }
  .hero__inner { grid-template-columns: minmax(0, 32rem) minmax(23rem, 1fr); gap: clamp(var(--space-xl), 5vw, var(--space-4xl)); }
}
/* shell が 68rem で頭打ちになるので、広い画面では面の幅%が伸びず右端に紙が残る。
   ここだけ実寸で伸ばして必ず画面外へ抜けさせる */
@media (min-width: 100rem) {
  .hero__plane { inline-size: 270%; }
}
@media (max-width: 59.9375rem) {
  .hero__visual { max-inline-size: 34rem; inline-size: 100%; justify-self: end; }
  /* 1カラムになると面が浅くなる。ライブ面を上げないと下端で切れてメタ帯と重なる */
  .hero__live { inset-block-start: 22%; inline-size: 42%; }
}
@media (max-width: 30rem) {
  .hero__visual { min-block-size: 19rem; }
  .hero__plane { inset-block-start: -24%; inline-size: 218%; }
  /* ライブ面は上げて縮める。下げると .hero の overflow:clip で切れて帯しか残らない */
  .hero__live { inset-block-start: 17%; inline-size: 36%; }
  .hero__caption { display: none; }   /* 帯に両方は入らない。停止ボタンを優先する */
  .hero__meta { inset-block-end: -0.5rem; padding: 0.3rem; }
  .js .hero__pause { font-size: 0.625rem; }
  .hero__promise { grid-template-columns: 1fr; }
  .hero__promise li { grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: baseline; border: 0; }
}
/* ============================================================
   SECTION SHELL — S2 Hanging。見出しは負のスペースに浮かせる。
   ラベル左／見出し右の二段組は使わない（gate 66）
   ============================================================ */
.section { padding-block: clamp(var(--space-2xl), 8vw, var(--space-4xl)); }
.section--tight { padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl)); }
.section--sand { background: var(--color-sand); }
.section--void {
  background: var(--color-void);
  color: var(--color-ink-inv);
}
.section--void .lede,
.section--void .section__lead { color: var(--color-muted-inv); }
.section__head { margin-block-end: clamp(var(--space-xl), 4vw, var(--space-2xl)); }
.section__title { font-size: var(--text-2xl); max-width: 18em; }
.section__lead {
  margin-block-start: var(--space-md);
  max-width: var(--measure);
  color: var(--color-muted);
}
/* ============================================================
   GAP — 現状のズレ。カード3枚ではなく罫のレジャー
   ============================================================ */
.ledger { border-block-start: 1px solid var(--color-rule-soft); }
.ledger > li {
  display: grid;
  gap: var(--space-2xs) var(--space-xl);
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--color-rule-soft);
}
.ledger__head {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-display);
  line-height: var(--leading-heading);
  overflow-wrap: anywhere;
  min-width: 0;
}
.ledger__body { color: var(--color-muted); font-size: var(--text-sm); max-width: 38em; }
@media (min-width: 48rem) {
  .ledger > li { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: baseline; }
}
.closing {
  margin-block-start: var(--space-xl);
  max-width: var(--measure);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-heading);
}
/* ============================================================
   CHANGE — Before / After。差分を対で読ませる
   ============================================================ */
.change { display: grid; gap: clamp(var(--space-xl), 5vw, var(--space-2xl)); }
@media (min-width: 60rem) {
  .change { grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); align-items: start; }
}
.change__figure { margin: 0; }
.change__figure img { border-radius: var(--radius-md); }
.change__caption {
  margin-block-start: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-neutral);
}
.swap { border-block-start: 1px solid var(--color-ink); }
.swap > li {
  display: grid;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-rule-soft);
}
@media (min-width: 40rem) {
  .swap > li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
}
.swap__from { color: var(--color-neutral); font-size: var(--text-sm); }
.swap__mark {
  color: var(--color-accent);
  font-size: var(--text-sm);
}
.swap__to { font-size: var(--text-sm); font-weight: var(--fw-medium); }
/* ============================================================
   STAGES — F4 Step sequence。ページの背骨
   ============================================================ */
.stages { display: grid; }
.stage {
  position: relative;
  display: grid;
  gap: var(--space-sm) clamp(var(--space-lg), 4vw, var(--space-2xl));
  padding-block: clamp(var(--space-xl), 4vw, var(--space-2xl));
  border-block-start: 1px solid var(--color-rule-inv);
}
.stage:first-child { border-block-start-width: 2px; border-block-start-color: var(--color-rule); }
.stage__no {
  font-family: var(--font-latin);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-rule);
  font-variant-numeric: tabular-nums;
}
.stage__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  overflow-wrap: anywhere;
  min-width: 0;
}
.stage__body { color: var(--color-muted-inv); max-width: var(--measure); font-size: var(--text-sm); }
.stage__meta {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-md);
  font-size: var(--text-sm);
}
.stage__meta div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-sm);
}
.stage__meta dt {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-rule);
}
.stage__meta dd { margin: 0; color: var(--color-ink-inv); }
@media (min-width: 48rem) {
  .stage { grid-template-columns: 5rem minmax(0, 1fr); }
  /* 番号は左列に固定。残り3要素は必ず右列へ落とす（auto-placement任せだと meta が
     番号列に回り込んで1文字幅に潰れる） */
  .stage__no { grid-column: 1; grid-row: 1 / span 3; }
  .stage__title,
  .stage__body,
  .stage__meta { grid-column: 2; }
}
/* stage-sweep — 工程だけに使う唯一のスクロール演出 */
.js .stage[data-sweep] {
  opacity: 0;
  transform: translateX(-12px);
}
.js .stage[data-sweep].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}
/* ============================================================
   WORKS — T2 Logo wall (hairline)。カード枠なし、罫だけ
   ============================================================ */
/* 8点ちょうどで 2×4 / 4×2 に割り切れる列数だけを使う。
   auto-fit だと余りセルが空の灰色ブロックになるため使わない */
.logowall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule-soft);
  border: 1px solid var(--color-rule-soft);
}
@media (min-width: 40rem) { .logowall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logowall li {
  display: grid;
  place-items: center;
  padding: var(--space-md) var(--space-sm);
  background: var(--color-paper);
  min-width: 0;
}
.logowall img {
  inline-size: auto;
  block-size: clamp(3.25rem, 7vw, 4.5rem);
  filter: grayscale(1) contrast(1.1);
  opacity: 0.9;
  /* 素材に白背景が焼き込まれているため、乗算で紙に沈める */
  mix-blend-mode: multiply;
}
/* CASE STUDIES — 実物の画面を大きく見せ、ロゴの知名度ではなく仕事の中身で信頼をつくる */
.case-studies {
  margin-block-start: clamp(var(--space-xl), 5vw, var(--space-3xl));
  padding-block-start: var(--space-xl);
  border-block-start: 1px solid var(--color-rule);
}
.case-studies__intro {
  margin-block-end: var(--space-lg);
  color: var(--color-neutral);
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
}
.case-studies__list { display: grid; }
.case-study {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--color-rule-soft);
}
.case-study:first-child { border-block-start-color: var(--color-ink); }
.case-study__visual {
  margin: 0;
  overflow: hidden;
  background: var(--color-void);
  border: 1px solid var(--color-rule-soft);
}
.case-study__visual img {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.case-study__content { display: grid; align-content: center; gap: var(--space-sm); min-width: 0; }
.case-study__label {
  color: var(--color-accent);
  font-family: var(--font-latin);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
}
.case-study__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-display);
  line-height: var(--leading-heading);
}
.case-study__body { max-width: 35em; color: var(--color-muted); font-size: var(--text-sm); }
.case-study__meta {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-rule-soft);
}
.case-study__meta div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); }
.case-study__meta dt {
  color: var(--color-neutral);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}
.case-study__meta dd { margin: 0; color: var(--color-ink); font-size: var(--text-sm); }
.case-studies__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-block-start: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-inline-start: 2px solid var(--color-accent);
}
.case-studies__cta p { color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 48rem) {
  .case-study { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center; gap: clamp(var(--space-xl), 6vw, var(--space-3xl)); }
  .case-study:nth-child(even) .case-study__visual { grid-column: 2; }
  .case-study:nth-child(even) .case-study__content { grid-column: 1; grid-row: 1; }
}
/* ============================================================
   PLAN — F3 Tabular spec sheet。価格カードは使わない
   ============================================================ */
.plans { font-variant-numeric: tabular-nums; }
.plans caption {
  text-align: start;
  padding-block-end: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.plans th, .plans td {
  text-align: start;
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-block-end: 1px solid var(--color-rule-soft);
  vertical-align: baseline;
}
.plans thead th {
  border-block-end-color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral);
}
.plans tbody th {
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-ink);
  white-space: nowrap;
}
.plans__for { color: var(--color-muted); font-size: var(--text-sm); }
.plans__inc { color: var(--color-muted); font-size: var(--text-sm); }
.plans__price {
  font-family: var(--font-latin);
  font-size: var(--text-md);
  white-space: nowrap;
}
.plans__price small { font-size: var(--text-xs); color: var(--color-neutral); }
@media (max-width: 52rem) {
  .plans thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .plans tr { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-block-end: 1px solid var(--color-rule-soft); }
  .plans th, .plans td { border: 0; padding: 0; }
  .plans tbody th { font-size: var(--text-base); }
  .plans td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral);
    margin-block-start: var(--space-xs);
  }
  .plans__price { font-size: var(--text-lg); }
}
.plan-notes {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--color-rule);
}
.plan-notes h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}
.plan-notes ul { display: grid; gap: var(--space-xs); }
.plan-notes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.plan-notes li::before { content: "—"; color: var(--color-rule); }
@media (min-width: 48rem) {
  .plan-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
}
/* ============================================================
   REASONS — 4点。アイコンは置かず、罫と数字だけ
   ============================================================ */
.reasons { display: grid; gap: 0; }
.reasons > li {
  display: grid;
  gap: var(--space-xs) var(--space-xl);
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--color-rule-soft);
}
.reasons > li:first-child { border-block-start: 1px solid var(--color-rule-soft); }
.reasons__lead { font-weight: var(--fw-medium); }
.reasons__body { color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 48rem) {
  .reasons > li { grid-template-columns: minmax(0, 8fr) minmax(0, 12fr); align-items: baseline; }
}
/* ============================================================
   FAQ — disclosure。grid-template-rows で開閉
   ============================================================ */
.faq { border-block-start: 1px solid var(--color-rule-soft); }
.faq > details { border-block-end: 1px solid var(--color-rule-soft); }
.faq summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-lg);
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-medium);
  transition: color var(--dur-short) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋";
  color: var(--color-accent);
  transition: transform var(--dur-short) var(--ease-in-out);
}
.faq details[open] summary::after { content: "−"; }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--color-accent); }
}
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-long) var(--ease-in-out);
}
.faq details[open] .faq__answer { grid-template-rows: 1fr; }
.faq__answer > div { overflow: hidden; }
.faq__answer p {
  padding-block-end: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-width: var(--measure);
}
/* ============================================================
   FINAL CTA
   ============================================================ */
.final { position: relative; isolation: isolate; }
.final__title { font-size: var(--text-3xl); max-width: 14em; }
.final__lead { margin-block-start: var(--space-lg); }
.final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}
.final__micro {
  margin-block-start: var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-muted-inv);
}
/* ============================================================
   FOOTER — Ft2 Inline single line
   ============================================================ */
.foot {
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--color-rule-soft);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.foot__brand { display: inline-flex; align-items: center; min-height: 44px; }
.foot__brand-logo { inline-size: clamp(7.8rem, 12vw, 10.2rem); block-size: auto; }
.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.foot__links a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* タップ領域 */
}
.foot__links a + a {
  padding-inline-start: var(--space-md);
  border-inline-start: 1px solid var(--color-rule-soft);
}
@media (hover: hover) and (pointer: fine) {
  .foot__links a:hover { color: var(--color-accent); }
}
.foot__copy { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
/* ============================================================
   C4 — Sticky bottom bar（モバイルのみ・ファーストビュー通過後）
   ============================================================ */
.dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--page-gutter);
  padding-block-end: max(var(--space-sm), env(safe-area-inset-bottom));
  background: var(--color-paper);
  border-block-start: 1px solid var(--color-rule-soft);
  transform: translateY(101%);
  transition: transform var(--dur-short) var(--ease-out);
}
.dock[data-shown="true"] { transform: none; }
.dock__note { font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 60rem) {
  .dock { display: flex; }
  body { padding-block-end: 4.5rem; }
}
/* ============================================================
   ORCHESTRATE — 初回ロードの1回だけ
   ============================================================ */
.js .orchestrate > * {
  opacity: 0;
  transform: translateY(8px);
  animation: orchestrate var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes orchestrate { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .js .orchestrate > * { transform: none; }
  .js .stage[data-sweep] { opacity: 1; transform: none; }
  /* HEROの組み上がりは残すが、遅延を潰してズレも止める（実績の自動切替はJS側で停止） */
  * { transition-delay: 0ms !important; }
  .js .hero__stage.appear .hero__page { translate: 0 calc(var(--y, 0) * 1.05rem); }
}