/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Hallmark · genre: atmospheric · macrostructure: Split Studio · theme: Bloom（light-paper ドロップ）
 * enrichment: E7 two-bloom canvas (CSS, static) · nav: N5 Floating pill · footer: Ft5 Statement
 * tone: 大胆・明るいツール · audience: 中小企業・店舗オーナー · anchor hue: 50 (warm)
 * axes: paper=light · display=grotesk-sans · accent=warm
 */

@import url("tokens.css");

/* ── Reset / base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  margin: 0;
  background-color: var(--color-paper);
  background-image:
    radial-gradient(58rem 36rem at 50% -14%, color-mix(in oklch, var(--color-bloom-1) 55%, transparent), transparent 66%),
    radial-gradient(52rem 34rem at 96% 6%, color-mix(in oklch, var(--color-bloom-2) 60%, transparent), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  min-width: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

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

:where(a, button, input, select, textarea, summary):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; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--space-md);
  z-index: var(--z-sticky); background: var(--color-accent); color: var(--color-on-accent);
  padding: var(--space-xs) var(--space-md); text-decoration: none; border-radius: var(--radius-sm);
}
.skip-link:focus { inset-block-start: var(--space-md); }

.shell { max-width: 78rem; margin-inline: auto; padding-inline: var(--page-gutter); }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-outlier); }
.muted { color: var(--color-muted); }

/* ── Reveal (fade only — atmospheric) ──────────────────────── */
.reveal { opacity: 0; }
.reveal.is-in { animation: fade var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes fade   { to { opacity: 1; } }
@keyframes settle { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; animation: none !important; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    transition-duration: 150ms !important;
  }
}
.no-js .reveal { opacity: 1; }

/* ── N5 · Floating pill nav ────────────────────────────────── */
.pill {
  position: fixed;
  inset: var(--space-md) auto auto 50%;
  transform: translateX(-50%) translateZ(0);
  -webkit-transform: translateX(-50%) translateZ(0);
  will-change: transform;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: calc(100% - var(--space-md) * 2);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  background: color-mix(in oklch, var(--color-paper) 82%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  z-index: var(--z-sticky);
}
.pill__mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.pill__mark img {
  display: block;
  height: 28px;
  width: auto;
  max-width: none;
  aspect-ratio: 6000 / 2571;
}
@media (max-width: 26rem) {
  .pill__mark img { height: 24px; }
}
.pill__links { display: none; gap: var(--space-md); }
.pill__links a {
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-muted);
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .pill__links a:hover { color: var(--color-ink); } }
.pill__cta {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--grad-ink);
  color: var(--color-on-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-ink);
  transition: filter var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .pill__cta:hover { filter: brightness(1.4); } }
.pill__cta:active { transform: translateY(1px); }
@media (min-width: 56rem) { .pill__links { display: inline-flex; } }

/* ── Buttons (8 states) ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px;
  padding: var(--space-sm) var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.btn--primary { background: var(--grad-ink); border-color: transparent; color: var(--color-on-ink); box-shadow: var(--shadow-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn--primary):hover { background: var(--color-paper-2); border-color: var(--color-rule-strong); }
  .btn--primary:hover { background: var(--grad-ink); filter: brightness(1.35); border-color: transparent; }
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed; background: var(--color-paper-3); box-shadow: none;
  border-color: var(--color-rule); color: var(--color-neutral); transform: none;
}
.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="error"]   { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); }
.btn[data-state="success"] { background: var(--color-success); border-color: var(--color-success); color: var(--color-on-accent); }

.link-t {
  font-size: var(--text-base); font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent-line);
  padding-block-end: 3px;
  transition: border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .link-t:hover { border-bottom-color: var(--color-accent); } }

/* ── Hero · 中央揃え＋クイック入力 ─────────────────────────── */
.hero {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-lg);
  padding-block: calc(var(--space-3xl) + var(--space-lg)) var(--space-2xl);
}
/* 方眼のキャンバス。中央を明るく抜いて視線を集める */
.hero::before {
  content: "";
  position: absolute;
  inset: -2rem -50vw;
  background-image:
    linear-gradient(to right, var(--color-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-rule) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.62;
  -webkit-mask-image: radial-gradient(64% 58% at 50% 46%, #000 8%, transparent 80%);
          mask-image: radial-gradient(64% 58% at 50% 46%, #000 8%, transparent 80%);
  z-index: 0;
  pointer-events: none;
}
.hero > * { position: relative; z-index: var(--z-base); }
.hero__kicker {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-muted);
  background: color-mix(in oklch, var(--color-paper) 84%, transparent);
  backdrop-filter: blur(8px);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-sm);
  margin: 0;
}
/* 各要素は改行させず、区切りの「／」は CSS で付ける（変な位置での改行を防ぐ） */
.hero__kicker > span { white-space: nowrap; }
.hero__kicker > span:not(:last-child)::after {
  content: "／";
  margin-inline-start: var(--space-xs);
  color: var(--color-rule-strong);
}
.hero__kicker::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 22%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__kicker::before { animation: pulse 2.6s var(--ease-in-out) infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 22%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklch, var(--color-accent) 8%, transparent); }
}
.hero__display {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 14em;
  margin: 0;
}
.hero__display em { font-style: normal; color: var(--color-accent-text); }
.hero__lede {
  max-width: 44em;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.95;
  margin: 0;
  text-wrap: pretty;
}
.hero__note {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--color-neutral);
  margin: 0;
}

/* クイック入力バー */
.quick {
  width: min(100%, 40rem);
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}
.quick__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.quick__bar:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card), 0 0 0 4px color-mix(in oklch, var(--color-accent) 16%, transparent);
}
.quick__prompt {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-accent);
  padding-inline: var(--space-sm) 0;
  user-select: none;
}
.quick__btn { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .quick__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .quick__btn { grid-column: auto; }
}
.quick__input {
  min-width: 0;
  min-height: 52px;
  padding-inline-start: 0;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-outlier);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  text-align: start;
}
.quick__input::placeholder { color: var(--color-neutral); font-family: var(--font-body); }
.quick__input:focus { outline: none; }
.quick__btn {
  min-height: 52px;
  padding: 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-on-ink);
  background: var(--grad-ink);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-ink);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), filter var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .quick__btn:hover { filter: brightness(1.35); } }
.quick__btn:active { transform: translateY(1px); }
.quick__err {
  min-height: 1.2em;
  font-size: var(--text-sm);
  color: var(--color-danger);
  margin: 0;
  text-align: start;
}
.quick__bar[data-state="error"] { border-color: var(--color-danger); }
@media (prefers-reduced-motion: no-preference) {
  .quick { opacity: 0; transform: translateY(10px); animation: settle 620ms var(--ease-out) 220ms forwards; }
}

/* ── Compare/* ── Split Studio blocks ───────────────────────────────────── */
.split { padding-block: clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4xl); }
  .split--flip .split__text { order: 2; }
}
.split__num {
  font-family: var(--font-outlier); font-variant-numeric: tabular-nums;
  font-size: var(--text-sm); letter-spacing: 0.16em; color: var(--color-accent);
}
.split__title { font-size: var(--text-2xl); margin-block-start: var(--space-sm); max-width: 14em; }
.split__body { color: var(--color-muted); max-width: var(--measure); margin-block-start: var(--space-lg); line-height: 1.95; }
.split__list { margin-block-start: var(--space-lg); display: grid; gap: var(--space-sm); }
.split__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm);
  font-size: var(--text-sm); color: var(--color-muted);
}
.split__list li::before { content: "／"; color: var(--color-accent); font-family: var(--font-outlier); }
.split__fig { margin: 0; }
.split__fig img { width: 100%; border-radius: var(--radius-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); box-shadow: var(--shadow-card); }

/* ── Statement (なぜ無料か) ────────────────────────────────── */
.statement { padding-block: clamp(3.5rem, 9vw, 9rem); border-block: var(--rule-hair) solid var(--color-rule); background: color-mix(in oklch, var(--color-paper-2) 70%, transparent); }
.statement__line {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 20em;
}
.statement__line em { font-style: normal; color: var(--color-accent-text); }
.statement__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-block-start: var(--space-xl); }
@media (min-width: 56rem) { .statement__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); } }
.statement__cols p { color: var(--color-muted); max-width: 42ch; line-height: 1.95; }

/* ── Section head ──────────────────────────────────────────── */
.section { padding-block: clamp(3.25rem, 8vw, 6rem); }
.section__title { font-size: var(--text-2xl); max-width: 18em; }
/* セクション見出しの上にアクセント罫を置き、章の始まりを明確にする */
.section__title::before {
  content: "";
  display: block;
  width: 2.5rem; height: 3px;
  margin-block-end: var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
}
.section__intro { color: var(--color-muted); max-width: var(--measure); margin-block-start: var(--space-md); }

/* ── Spec rows ─────────────────────────────────────────────── */
.spec { width: 100%; border-collapse: collapse; margin-block-start: var(--space-xl); text-align: start; }
.spec caption { text-align: start; font-size: var(--text-sm); color: var(--color-neutral); padding-block-end: var(--space-sm); }
.spec th, .spec td {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-md) var(--space-sm) var(--space-md) 0;
  vertical-align: top; font-weight: 400; line-height: 1.8;
}
.spec th {
  width: 11em; font-family: var(--font-outlier); font-size: var(--text-sm);
  letter-spacing: 0.08em; color: var(--color-neutral); white-space: nowrap;
}
.spec tr:last-child th, .spec tr:last-child td { border-bottom: var(--rule-hair) solid var(--color-rule); }
.spec td strong { color: var(--color-accent); font-weight: 700; }
@media (max-width: 34rem) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr {
    padding-block: var(--space-md);
    border-top: var(--rule-hair) solid var(--color-rule);
  }
  .spec tr:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
  .spec th, .spec td {
    border: 0;
    padding: 0;
    white-space: normal;
    line-height: 1.7;
  }
  /* 最終行のセルに残る border-bottom（PC用ルールが特異度で勝ってしまう）を打ち消し、
     行の区切りは tr の罫線だけにする */
  .spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
  .spec th {
    width: auto;
    margin-block-end: var(--space-3xs, 0.25rem);
    font-size: var(--text-xs, 0.78rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral);
  }
  .spec td { color: var(--color-ink); }
}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { margin-block-start: var(--space-xl); display: grid; gap: var(--space-sm); }
.faq details {
  background: var(--color-paper);
  box-shadow: var(--shadow-whisper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding-inline: var(--space-lg);
  transition: border-color var(--dur-short) var(--ease-out);
}
.faq details[open] { border-color: var(--color-rule-strong); }
.faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md);
  padding-block: var(--space-md); min-height: 52px;
  font-family: var(--font-display); font-weight: 700; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; font-family: var(--font-outlier); color: var(--color-accent); }
.faq details[open] summary::after { content: "－"; }
.faq__a { padding-block: 0 var(--space-lg); color: var(--color-muted); max-width: var(--measure); line-height: 1.95; }

/* ── Form ──────────────────────────────────────────────────── */
.apply { padding-block: clamp(3.5rem, 9vw, 9rem); }
.apply__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 64rem) { .apply__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); align-items: start; } }
.apply__title { font-size: clamp(1.875rem, 2.2vw + 1rem, 2.625rem); line-height: 1.26; max-width: 12em; }
.apply__note { color: var(--color-muted); margin-block-start: var(--space-md); max-width: 32ch; }
.apply__steps { counter-reset: step; margin-block-start: var(--space-lg); display: grid; gap: var(--space-xs); }
.apply__steps li { counter-increment: step; position: relative; padding-inline-start: 1.8em; font-size: var(--text-sm); color: var(--color-muted); }
.apply__steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; inset-inline-start: 0;
  font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-accent);
}

.form {
  display: grid; gap: var(--space-lg);
  background: var(--grad-panel);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
}
@media (max-width: 30rem) { .form { padding: var(--space-lg); } }
.field { display: grid; gap: var(--space-2xs); }
.field__label { display: flex; align-items: baseline; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 700; }
.field__req, .field__opt {
  font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.08em;
  padding: 1px var(--space-2xs); border: var(--rule-hair) solid currentColor; border-radius: var(--radius-sm);
}
.field__req { color: var(--color-accent); }
.field__opt { color: var(--color-neutral); }
.field__hint { font-size: var(--text-xs); color: var(--color-neutral); line-height: 1.7; }
.field input, .field textarea {
  width: 100%; min-height: 52px;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  box-shadow: inset 0 1px 2px oklch(30% 0.03 50 / 0.04);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.field textarea { min-height: 7.5rem; line-height: 1.8; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-neutral); }
@media (hover: hover) and (pointer: fine) {
  .field input:hover, .field textarea:hover { border-color: var(--color-neutral); }
}
.field input:disabled, .field textarea:disabled { background: var(--color-paper-3); color: var(--color-neutral); cursor: not-allowed; }
.field[data-state="error"] input, .field[data-state="error"] textarea { border-color: var(--color-danger); background: var(--color-danger-soft); }
.field[data-state="success"] input, .field[data-state="success"] textarea { border-color: var(--color-success); }
.field__err { font-size: var(--text-xs); color: var(--color-danger); min-height: 1.2em; line-height: 1.5; }
.form__consent { font-size: var(--text-xs); color: var(--color-neutral); line-height: 1.85; }
.form__status { font-size: var(--text-sm); min-height: 1.5em; color: var(--color-muted); }
.form__status[data-tone="error"] { color: var(--color-danger); }
.form__status[data-tone="success"] { color: var(--color-success); }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 40rem) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ── Ft5 · Statement footer ────────────────────────────────── */
.foot { padding-block: clamp(3.25rem, 8vw, 6rem) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot__line {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.625rem, 3.6vw + 0.6rem, 2.875rem);
  line-height: 1.28; letter-spacing: -0.01em; max-width: 16em;
}
.foot__line em { font-style: normal; color: var(--color-accent-text); }
.foot__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-outlier); font-size: var(--text-xs);
  letter-spacing: 0.08em; color: var(--color-neutral);
}
.foot__meta a { text-decoration: none; white-space: nowrap; }
.foot__meta nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
@media (hover: hover) and (pointer: fine) { .foot__meta a:hover { color: var(--color-ink); } }

/* ══════════════════════════════════════════════════════════════
   追加コンポーネント（第2版）
   ══════════════════════════════════════════════════════════════ */

/* ── 納品物例：Before / After スライダー ────────────────────── */
.ba { margin: var(--space-2xl) 0 0; }
.ba__stage {
  --pos: 50%;
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  -webkit-user-select: none; user-select: none;
}
/* 画像はポインタ対象から外し、ブラウザ標準の画像ドラッグ（ゴースト画像）を止める。
   これでドラッグ操作はステージのハンドラだけが受け取る。 */
.ba__stage img {
  pointer-events: none;
  -webkit-user-drag: none; user-select: none;
}
.ba__layer { display: block; margin: 0; }
/* 差し替える画像の縦横比が違っても崩れないよう、枠の比率を固定して上端基準で切り出す */
.ba__layer img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.ba__layer--after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__divider {
  position: absolute; inset-block: 0; inset-inline-start: var(--pos);
  width: 2px; margin-inline-start: -1px;
  background: var(--color-accent);
  pointer-events: none; z-index: var(--z-raised);
}
.ba__grip {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: -50% -50%;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad-accent); color: var(--color-on-accent);
  display: grid; place-items: center;
  font-family: var(--font-outlier); font-size: var(--text-sm); letter-spacing: -0.05em;
  box-shadow: var(--shadow-lift);
}
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: ew-resize;
  z-index: calc(var(--z-raised) + 1);
  -webkit-appearance: none; appearance: none; background: transparent;
  /* ドラッグ操作はステージ側の pointer ハンドラで処理する（タッチ端末で連続ドラッグ可）。
     range 自体はキーボード操作（←→キー）用に残す。 */
  pointer-events: none;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; }
.ba__range::-moz-range-thumb { width: 48px; height: 100%; border: 0; background: transparent; }
.ba__range:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ba__label {
  position: absolute; inset-block-start: var(--space-md);
  z-index: var(--z-raised);
  font-family: var(--font-outlier); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
  pointer-events: none;
}
.ba__label--before { inset-inline-start: var(--space-md); }
.ba__label--after  { inset-inline-end: var(--space-md); color: var(--color-accent-deep); border-color: var(--color-accent-line); background: var(--color-accent-soft); }
.ba__hint {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: baseline;
  margin-block-start: var(--space-md);
  font-family: var(--font-outlier); font-size: var(--text-xs);
  letter-spacing: 0.04em; color: var(--color-neutral);
}

/* ── 自社AIの説明図 ────────────────────────────────────────── */
.engine { margin-block-start: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
@media (min-width: 62rem) {
  .engine { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
}
.engine__group {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-whisper);
  padding: var(--space-lg);
  display: grid; gap: var(--space-sm); align-content: start;
}
.engine__group--core {
  border-color: var(--color-accent-line);
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-accent-soft) 100%);
  box-shadow: var(--shadow-lift);
}
.engine__group--out { background: var(--grad-panel); }
.engine__kind {
  font-family: var(--font-outlier); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral);
}
.engine__group--core .engine__kind { color: var(--color-accent); }
.engine__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.engine__list { display: grid; gap: var(--space-2xs); }
.engine__list li { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.75; }
.engine__list li::before { content: "／ "; color: var(--color-rule-strong); }
.engine__arrow {
  display: grid; place-items: center; color: var(--color-accent);
  font-family: var(--font-outlier); font-size: var(--text-md);
}
.engine__arrow::before { content: "↓"; }
@media (min-width: 62rem) { .engine__arrow::before { content: "→"; } }

/* ── キーワードのマーキー（1本だけ） ───────────────────────── */
.ticker {
  margin-block-start: var(--space-2xl);
  border-block: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-md);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; gap: var(--space-2xl); }
.ticker__item {
  font-family: var(--font-outlier); font-size: var(--text-sm);
  letter-spacing: 0.1em; color: var(--color-neutral); white-space: nowrap;
}
.ticker__item b { color: var(--color-accent-deep); font-weight: 500; margin-inline-end: var(--space-xs); }
@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: slide 42s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ── 制作実績 ──────────────────────────────────────────────── */
.works { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-block-start: var(--space-xl); }
@media (min-width: 52rem) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.works figure { margin: 0; }
.works img {
  width: 100%; border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule);
  box-shadow: var(--shadow-whisper);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .works figure:hover img { transform: translateY(-5px); box-shadow: var(--shadow-lift); } }
.works figcaption {
  font-family: var(--font-outlier); font-size: var(--text-xs);
  color: var(--color-neutral); margin-block-start: var(--space-xs); letter-spacing: 0.04em;
}

/* ── 強調リード ────────────────────────────────────────────── */
.lead-note { margin-block-start: var(--space-xl); max-width: 46em; }
.lead-note p { font-size: var(--text-md); line-height: 1.95; color: var(--color-muted); }
.lead-note p + p { margin-block-start: var(--space-md); }
.lead-note strong { color: var(--color-ink); font-weight: 700; }

/* ── 対比ブロックの小さな図版（実DOM・差し替え不要） ────────── */
.mini {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
  display: grid; gap: var(--space-sm);
  min-height: 20rem; align-content: center;
}
.mini--scan { position: relative; overflow: hidden; gap: var(--space-xs); }
.mini__row {
  display: grid; grid-template-columns: 4.5em minmax(0, 1fr);
  gap: var(--space-sm); align-items: baseline;
  font-size: var(--text-sm); color: var(--color-muted);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.mini__row b {
  font-family: var(--font-outlier); font-size: var(--text-xs);
  letter-spacing: 0.1em; color: var(--color-accent); font-weight: 500;
}
.mini__scanline {
  position: absolute; inset-inline: 0; height: 40%;
  background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--color-accent) 22%, transparent), transparent);
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .mini--scan.is-in .mini__scanline { animation: scan 2.8s var(--ease-in-out) 2; }
}
@keyframes scan {
  0% { transform: translateY(-100%); opacity: 0; }
  12% { opacity: 1; } 88% { opacity: 1; }
  100% { transform: translateY(280%); opacity: 0; }
}
.mini--build { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.mini__blk { height: 2.4rem; border-radius: var(--radius-sm); background: var(--color-paper-3); }
.mini__blk--wide { grid-column: 1 / -1; height: 3.4rem; background: var(--color-rule); }
.mini__blk--accent { background: var(--grad-accent); }
@media (prefers-reduced-motion: no-preference) {
  .mini--build .mini__blk { opacity: 0; transform: translateY(10px); }
  .mini--build.is-in .mini__blk { animation: settle 500ms var(--ease-out) forwards; }
  .mini--build.is-in .mini__blk:nth-child(1) { animation-delay: 0ms; }
  .mini--build.is-in .mini__blk:nth-child(2) { animation-delay: 90ms; }
  .mini--build.is-in .mini__blk:nth-child(3) { animation-delay: 150ms; }
  .mini--build.is-in .mini__blk:nth-child(4) { animation-delay: 240ms; }
  .mini--build.is-in .mini__blk:nth-child(5) { animation-delay: 320ms; }
  .mini--build.is-in .mini__blk:nth-child(6) { animation-delay: 400ms; }
}

/* ── ヒーロー直下の全幅インク帯（区切り＋キーワード） ───────── */
.band {
  background: var(--color-ink);
  color: var(--color-on-ink);
  border-block: var(--rule-hair) solid var(--color-ink);
  box-shadow: var(--shadow-ink);
  position: relative;
  z-index: var(--z-raised);
}
.band .ticker {
  margin: 0;
  border: 0;
  padding-block: var(--space-md);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.band .ticker__item { color: color-mix(in oklch, var(--color-on-ink) 76%, transparent); }
.band .ticker__item b { color: var(--color-accent); }

/* ── BA スライダー：After をライブ表示にするための調整 ────────── */
/* 1279×1039 の Before と 1600×1300 の After を、同じ比率の枠に重ねる */
.ba__stage {
  aspect-ratio: 1600 / 1300;
  /* 角丸と iframe の合成レイヤーが競合して角が黒く抜けるため、比較枠は直角にする */
  border-radius: 0;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer--before { overflow: hidden; }
.ba__layer--before { z-index: var(--z-base); }
.ba__layer--before img {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: top center;
}
.ba__layer--after {
  z-index: calc(var(--z-base) + 1);
  background: var(--color-paper);
  clip-path: inset(0 0 0 var(--pos));
}
/* 角の描画ずれを防ぐため、枠側で切り抜く */
.ba__frame { overflow: hidden; border-radius: 0; }
/* 実サイトを 1600px 幅でレンダリングし、枠幅にあわせて等倍縮小する */
.ba__frame {
  width: 1600px; height: 1300px;
  transform: scale(var(--ba-scale, 1));
  transform-origin: top left;
}
.ba__frame iframe {
  width: 1600px; height: 1300px;
  border: 0; display: block;
  pointer-events: none;   /* つまみの操作を邪魔しない */
  color-scheme: light;
}
/* After の静止フォールバック：スマホ／タッチ端末では、負荷の高いライブ iframe を
   使わず実サイトの静止スクリーンショットを表示する（メモリ枯渇による再読込ループを防止） */
.ba__after-static { display: none; }
@media (max-width: 48rem), (hover: none) and (pointer: coarse) {
  .ba__after-static {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto;
    object-fit: cover; object-position: top center;
  }
  .ba__frame { display: none; }
}
/* 端末別コピー：ライブ表示（PC）と静止画（スマホ／タッチ）で文言を出し分ける */
.only-static { display: none; }
@media (max-width: 48rem), (hover: none) and (pointer: coarse) {
  .only-live { display: none; }
  .only-static { display: inline; }
}

/* ══ モバイル本文の可読性チューニング（40rem 以下） ═══════════════
   ・グレー本文はコントラストを上げて明所でも読めるように
   ・広すぎる行間（1.95）を締めて行のまとまりを出す
   ・行間を詰めた分、段落間の余白を足して区切りを明確にする
   見出しの大胆さ（サイズ）はブランド表現として維持する。 */
@media (max-width: 40rem) {
  .hero__lede,
  .section__intro,
  .split__body,
  .lead-note p,
  .faq__a,
  .statement__cols p,
  .engine__list li,
  .apply__note {
    color: var(--color-ink-2);
    line-height: 1.78;
  }
  .lead-note p + p { margin-block-start: var(--space-lg); }
  .split__body { margin-block-start: var(--space-md); }
  .section__intro { margin-block-start: var(--space-sm); }
  /* 大見出しは折り返し時の行間だけ整える（サイズは変えない） */
  .section__title { line-height: 1.32; }
  .apply__title { line-height: 1.3; }
  /* セクション間の余白を締めて「間延びした無地の空白」をなくす */
  .section { padding-block: 2.75rem; }
  /* 説明文は末尾が「す。」だけで孤立しないよう、最適な改行に自動調整 */
  .hero__lede { text-wrap: pretty; }
  /* ヒーローのメタ表記：箱をやめ、中央寄せで各行をきれいに折り返す */
  .hero__kicker {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: var(--space-3xs) var(--space-sm);
    background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0;
    font-size: var(--text-sm);
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--color-neutral);
    text-align: center;
  }
  .hero__kicker::before { display: none; }
}

/* ヒーローの組み写真と工程図では、上部 16:10 だけを使う */
.stack__shot img,
.stage__fig > img,
.split__fig > img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* ══════════════════════════════════════════════════════════════
   工程の図版（第2版）— Web に詳しくない方が一目で分かる中身に
   ══════════════════════════════════════════════════════════════ */

.card {
  display: grid;
  gap: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}
.card__title { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; }
.card__meta {
  font-family: var(--font-outlier); font-size: var(--text-xs);
  color: var(--color-neutral); letter-spacing: 0.04em; white-space: nowrap;
}
.card__body { padding: var(--space-lg); display: grid; gap: var(--space-sm); }
.card__foot {
  padding: var(--space-sm) var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  font-size: var(--text-xs);
  color: var(--color-neutral);
}

/* ── 01 診断結果 ────────────────────────────────────────────── */
.diag__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding-block: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-ink-2, var(--color-muted));
}
.diag__row + .diag__row { border-top: var(--rule-hair) solid var(--color-rule); }
.diag__mark {
  width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 0.7rem; font-weight: 700;
  margin-block-start: 0.15em;
}
@media (prefers-reduced-motion: no-preference) {
  .diag .diag__row { opacity: 0; transform: translateY(6px); }
  .diag.is-in .diag__row { animation: settle 460ms var(--ease-out) forwards; }
  .diag.is-in .diag__row:nth-child(1) { animation-delay: 120ms; }
  .diag.is-in .diag__row:nth-child(2) { animation-delay: 300ms; }
  .diag.is-in .diag__row:nth-child(3) { animation-delay: 480ms; }
  .diag.is-in .diag__row:nth-child(4) { animation-delay: 660ms; }
}

/* ── 02 書き換えの実例 ──────────────────────────────────────── */
.rw { display: grid; gap: var(--space-lg); }
.rw__group { display: grid; gap: var(--space-2xs); }
.rw__kind {
  font-family: var(--font-outlier); font-size: var(--text-xs);
  letter-spacing: 0.12em; color: var(--color-neutral);
}
.rw__line {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm); align-items: baseline;
  padding-block: var(--space-2xs);
  font-size: var(--text-sm); line-height: 1.65;
}
.rw__tag {
  font-family: var(--font-outlier); font-size: var(--text-xs);
  letter-spacing: 0.06em; white-space: nowrap;
}
.rw__line--from .rw__tag { color: var(--color-neutral); }
.rw__line--from span { color: var(--color-neutral); text-decoration: line-through; text-decoration-thickness: 1px; }
.rw__line--to .rw__tag { color: var(--color-accent); }
.rw__line--to span { font-weight: 700; }

/* ── 03 受け取りまで ────────────────────────────────────────── */
.tl { display: grid; gap: 0; }
.tl__step {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
}
.tl__step + .tl__step { border-top: var(--rule-hair) solid var(--color-rule); }
.tl__when {
  font-family: var(--font-outlier); font-size: var(--text-xs);
  letter-spacing: 0.06em; white-space: nowrap;
  color: var(--color-neutral);
  padding-block-start: 0.25em;
  min-width: 5.5em;
}
.tl__step--now .tl__when { color: var(--color-accent); }
.tl__what { font-size: var(--text-sm); font-weight: 700; line-height: 1.6; }
.tl__note { font-size: var(--text-xs); color: var(--color-neutral); line-height: 1.7; margin-block-start: var(--space-2xs); }
.tl__list { margin-block-start: var(--space-xs); display: grid; gap: 2px; }
.tl__list li { font-size: var(--text-xs); color: var(--color-muted); }
.tl__list li::before { content: "・"; color: var(--color-accent); }

/* ── なぜ無料か：主張＋工程の担当表 ─────────────────────────── */
.statement__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
@media (min-width: 62rem) {
  .statement__grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); gap: var(--space-2xl); }
}
.statement__line {
  max-width: 17em;
  font-size: clamp(1.625rem, 2.5vw + 0.7rem, 2.5rem);
  line-height: 1.34;
}
.statement__line .nb { white-space: nowrap; }
.statement__text {
  margin-block-start: var(--space-xl);
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.95;
  max-width: 44ch;
}
.statement__note {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-neutral);
  font-size: var(--text-sm);
  line-height: 1.85;
  max-width: 42ch;
}

.ledger {
  background: var(--color-paper);
  min-width: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg) var(--space-xl) var(--space-md);
}
.ledger__cap {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-neutral);
  margin-block-end: var(--space-md);
}
.ledger__grid,
.ledger__sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.6em 4.6em;
  align-items: center;
  column-gap: var(--space-2xs);
}
.ledger__h {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-align: center;
  padding-block-end: var(--space-xs);
  color: var(--color-neutral);
  white-space: nowrap;
}
.ledger__h--new { color: var(--color-accent-text, var(--color-accent)); }
.ledger__task {
  font-size: var(--text-sm);
  white-space: nowrap;
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.ledger__who {
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.ledger__who--old { color: var(--color-neutral); }
.ledger__who--new {
  color: var(--color-accent-text, var(--color-accent));
  background: color-mix(in oklch, var(--color-accent-soft) 60%, transparent);
}
.ledger__sum { margin-block-start: var(--space-2xs); }
.ledger__sum .ledger__task,
.ledger__sum .ledger__who {
  border-top: 2px solid var(--color-ink);
  padding-block: var(--space-md);
  font-weight: 700;
}
.ledger__who--free { font-size: var(--text-md); }
@media (prefers-reduced-motion: no-preference) {
  .ledger__who--new { opacity: 0; }
  .ledger.is-in .ledger__who--new { animation: fade 420ms var(--ease-out) forwards; }
  .ledger.is-in .ledger__who--new:nth-of-type(1) { animation-delay: 120ms; }
  .ledger.is-in .ledger__grid .ledger__who--new:nth-of-type(1) { animation-delay: 180ms; }
}
@media (max-width: 26rem) {
  .ledger { padding-inline: var(--space-md); }
  .ledger__grid, .ledger__sum { grid-template-columns: minmax(0, 1fr) 3.8em 3.8em; }
  .ledger__task { font-size: var(--text-xs); }
}