:root {
  --blue: #10b77f;
  --navy: #16323f;
  --muted: #5f7683;
  --border: #dbe9e4;
  --mint: #0b7d57;
  --soft: #f4fbf8;
  /* type scale — 12px floor, nothing smaller ships */
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 22px;
  --fs-3xl: 24px;
  --fs-4xl: 30px;
  --fs-5xl: 38px;
  /* one card system: every card-like component uses these */
  --card-pad: 24px;
  --card-gap: 24px;
  --card-radius: 6px;
  /* 8pt spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  color: var(--navy);
  background: #fff;
  /* Japanese text breaks at phrase boundaries, not mid-word */
  word-break: auto-phrase;
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
button,
input {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid #eeab24;
  outline-offset: 4px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h2 {
  font-size: var(--fs-4xl);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  margin-bottom: 40px;
}
h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.35;
}
p {
  color: var(--muted);
}
.container {
  width: min(1180px, calc(100% - 96px));
  margin-inline: auto;
}
.section {
  padding: var(--space-20) 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  background: white;
  padding: 12px;
  z-index: 100;
}
.skip-link:focus {
  top: 8px;
}
header {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  transition:
    box-shadow 0.3s,
    background 0.3s;
}
header.scrolled {
  background: #ffffffe8;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px #10563212;
}
.nav {
  height: 57px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.nav nav a:hover,
.nav nav a.active {
  color: var(--blue);
}
.nav nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.nav-actions {
  display: flex;
  gap: 12px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 24px;
  border: 1px solid #21cd71;
  border-radius: 5px;
  background: linear-gradient(#32de84, #1aa05b);
  box-shadow:
    0 3px 8px #1cad5f15,
    inset 0 1px 0 #ffffff55;
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition:
    box-shadow 0.2s,
    background 0.2s,
    transform 0.2s;
}
.button:hover {
  background: #119a52;
  box-shadow: 0 4px 12px #1cab6035;
  transform: translateY(-1px);
}
.button.outline {
  background: #ffffffcc;
  color: #17894d;
  border-color: #aadcc2;
  box-shadow: 0 1px 3px #2b905a15;
}
.button.outline:hover {
  background: #f3faf6;
}
.nav .button {
  min-height: 44px;
  padding: 8px 24px;
  font-size: var(--fs-xs);
}
.menu-toggle {
  display: none;
}
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #f8fcfa 0%, #eff8f3 55%, #e7f5ed 100%);
}
.hero-stage-host {
  position: absolute;
  inset: 0;
}
/* Scrim above the canvas: holds hero copy at full contrast and softens the
   top and bottom edges of the 3D floor. */
.hero-stage-host::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      68% 62% at 24% 52%,
      #f7fcf9e6 0%,
      #f7fcf9bf 45%,
      #f7fcf940 72%,
      transparent 100%
    ),
    linear-gradient(96deg, #f7fcf9b3 0%, #f7fcf959 30%, transparent 48%),
    linear-gradient(180deg, #f4fbf7 0%, transparent 13%, transparent 80%, #eaf7f0 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: 72px 64px;
}
/* Headline band: claim on the left, the explanation beside it rather than
   under it. The product visual gets the full width below. */
.hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 56px;
  align-items: end;
}
.eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow-rule::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--blue);
  flex: none;
}
.accent {
  background: linear-gradient(transparent 42%, #a7ecd2 42%, #a7ecd2 80%, transparent 80%);
}
.hero-aside {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 24px;
  align-items: stretch;
  margin-top: 48px;
}
.stage-note {
  border-left: 2px solid #cfeadd;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.stage-note b {
  font-size: var(--fs-md);
  line-height: 1.6;
}
.stage-note span {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.85;
}
/* ---- Illustrations. Licence-cleared line-art pack, recoloured per image to
       the brand green -- never in bulk: a red warning arrow turned green
       reverses its meaning, and hair is not an accent colour. ---- */
.frag-art {
  display: block;
  width: 132px;
  height: auto;
  float: right;
  margin: -4px -4px 6px 12px;
}
.does-art {
  display: block;
  width: 150px;
  height: auto;
  margin: -6px 0 10px;
}
.trial { position: relative; overflow: hidden; }
/* The consultation scene as a watermark rather than a sticker. Line art at
   low opacity holds up where a shaded illustration would go muddy. */
.trial-backdrop {
  position: absolute;
  right: -70px;
  bottom: -48px;
  width: 430px;
  height: auto;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 860px) {
  .trial-backdrop { width: 300px; right: -80px; opacity: 0.08; }
}
.trial > .container { position: relative; z-index: 1; }
.step-art {
  float: right;
  width: 124px;
  height: auto;
  margin: -6px 0 4px 18px;
}

/* ---- The line, as a recurring mark. 案件 → 工数 → 日報 → 請求 is the one
       thing about ツタウ a competitor cannot copy from a template, and it was
       appearing exactly once. Repeated above the price and in the closing
       band it becomes the page's own graphic language.

       Static on purpose: 一本の線 already runs a 12s loop, and three competing
       timelines on one page is noise, not emphasis. ---- */
.loopline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 30px auto 0;
}
.ll-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #2c4136;
  white-space: nowrap;
}
.ll-step i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}
.ll-step:not(:last-child)::after {
  content: "";
  width: 54px;
  height: 2px;
  margin: 0 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, #cfeadd, var(--blue));
}
.loopline-note {
  text-align: center;
  margin: 12px 0 0;
  font-size: var(--fs-2xs);
  color: var(--muted);
}
/* on the photo band the hairlines need a touch more weight */
.loopline-light .ll-step { color: #16323f; }
.loopline-light .ll-step:not(:last-child)::after {
  background: linear-gradient(90deg, #b6e0cd, var(--blue));
}

/* ---- Three peaks. Every h2 on the page computed to the same 30px, so the
       page read as thirteen equal plateaus. Exactly three sections are raised
       -- the argument, the price, the ask -- and the rest stay put. Contrast
       needs most things to hold still. ---- */
.section-major {
  padding-block: calc(var(--space-20) + 32px) var(--space-20);
}
.section-major > .container > .sec-head h2,
.section-major > .container > h2 {
  font-size: var(--fs-5xl);
  line-height: 1.28;
}
.section-major > .container > .sec-head {
  margin-bottom: 56px;
}

/* ---- Asymmetric section header: replaces the centred eyebrow+h2+lead ---- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.sec-head h2 {
  margin: 8px 0 0;
  text-align: left;
}
.sec-head .eyebrow {
  text-align: left;
}
.sec-lead {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.9;
}

/* ---- The line: one record carried through four moments ---- */
.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.rail::before {
  content: "";
  position: absolute;
  /* Runs from the centre of dot 01 to the centre of dot 04. Beats are 25%
     wide; every beat but the first carries 20px of left padding, and the
     dot is 26px across, so its centre sits 13px in. */
  left: 13px;
  right: calc(25% - 33px);
  top: 12px;
  height: 2px;
  background: linear-gradient(90deg, #dcefe5, var(--blue));
  border-radius: 2px;
}
.beat {
  position: relative;
  padding: 0 20px;
}
.beat:first-child { padding-left: 0; }
.beat:not(:last-child) { border-right: 1px dashed #e2efe8; }
.beat .dot {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #0e8f66;
  box-shadow: 0 0 0 5px #fff;
  margin-bottom: 22px;
}
.beat .when {
  font-size: var(--fs-2xs);
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
}
.beat h3 {
  font-size: var(--fs-md);
  margin: 6px 0 8px;
  line-height: 1.55;
}
.beat p {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.85;
  margin: 0;
}
/* ---- Beat vignettes: a miniature of the actual artefact at each step.
       Text described the chain; these show it, and they carry the detail
       the paragraphs used to. ---- */
.vig {
  margin-top: 16px;
  border: 1px solid #d7efe2;
  border-radius: 5px;
  background: #f7fdfa;
  padding: 10px;
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: #2c4136;
}
/* 01 board */
.vig-board {
  display: grid;
  grid-template-columns: 1fr 16px 1.35fr;
  gap: 6px;
  align-items: stretch;
}
.vig-col {
  background: #fff;
  border: 1px solid #e3f4ea;
  border-radius: 4px;
  padding: 6px;
}
.vig-col-on { border-color: #8fd8bb; box-shadow: 0 3px 10px #1ba25d1a; }
.vig-colhead {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 5px;
}
.vig-ghost {
  display: block;
  height: 20px;
  border: 1px dashed #dbeee5;
  border-radius: 3px;
}
.vig-ghost + .vig-ghost,
.vig-card + .vig-ghost { margin-top: 5px; }
.vig-card {
  display: block;
  font-style: normal;
  background: #fff;
  border: 1px solid #8fd8bb;
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 10.5px;
  line-height: 1.45;
  box-shadow: 0 2px 6px #1ba25d1a;
  white-space: nowrap;
}
.vig-move {
  align-self: center;
  text-align: center;
  color: var(--blue);
  font-weight: 700;
}
/* 02 hours */
.vig-hours { display: grid; gap: 7px; }
.vig-bar {
  display: grid;
  grid-template-columns: 42px 1fr 34px;
  gap: 8px;
  align-items: center;
  font-size: 10.5px;
}
.vig-bar span { color: var(--muted); }
.vig-bar i {
  height: 7px;
  border-radius: 4px;
  background: var(--blue);
}
.vig-bar b { text-align: right; font-size: 10.5px; }
.vig-bar-est i { background: #d7efe2; }
.vig-bar-est span,
.vig-bar-est b { color: var(--muted); font-weight: 400; }
/* 03 + 04 documents */
.vig-doc { display: grid; gap: 4px; }
.vig-doc-head {
  font-weight: 700;
  font-size: 10.5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #dbeee5;
  margin-bottom: 2px;
}
.vig-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  color: var(--muted);
}
.vig-line em { font-style: normal; color: #2c4136; flex: none; }
.vig-doc-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #dbeee5;
  font-weight: 700;
  font-size: 10.5px;
}
.vig-doc-foot em {
  font-style: normal;
  font-weight: 400;
  color: #0e8f66;
}
.rail-foot {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.rail-foot b { font-size: var(--fs-md); flex: none; }
.rail-foot span {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.85;
  flex: 1;
  min-width: 280px;
}

/* ---- What sits on the line: hairline list, not bordered cards ---- */
.on-line-block { margin-top: 56px; }
.on-line-block > h3 {
  font-size: var(--fs-sm);
  color: var(--blue);
  letter-spacing: 0.08em;
  margin: 0 0 20px;
}
.on-line-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}
.on-line {
  padding: 22px 24px 22px 0;
  border-bottom: 1px solid var(--border);
}
.on-line:not(:nth-child(3n)) { border-right: 1px solid var(--border); }
.on-line:not(:nth-child(3n)) { padding-right: 24px; }
.on-line:not(:nth-child(3n+1)) { padding-left: 24px; }
.on-line h4 {
  font-size: var(--fs-md);
  margin: 0 0 6px;
}
.on-line p {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.85;
  margin: 0;
}

/* ---- よくある状態: the scatter. Deliberately uneven -- three equal cards
       read as "three tidy categories", which is the opposite of the point. ---- */
.scatter {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  /* Let each fragment take only the height it needs -- equal heights would
     tidy the scatter back into a grid, which is the opposite of the point. */
  align-items: start;
}
.frag {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: linear-gradient(150deg, #fff, #fbfdfc);
  padding: 20px 22px;
  box-shadow: 0 2px 5px #428c6403;
}
.frag:nth-child(1) { grid-column: span 5; }
.frag:nth-child(2) { grid-column: span 4; margin-top: 22px; }
.frag:nth-child(3) { grid-column: span 3; }
.frag:nth-child(4) { grid-column: span 6; margin-top: -8px; }
.frag:nth-child(5) { grid-column: span 6; margin-top: 14px; }
.frag-place {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7b5c2e;
  background: #fdf6e7;
  border: 1px solid #f0e2c4;
  border-radius: 3px;
  padding: 4px 9px;
  margin-bottom: 10px;
}
.frag-place svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.85;
}
.frag-echo {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: #7b5c2e;
  background: #fdf6e7;
  border: 1px dashed #e3c98f;
  border-radius: 3px;
  padding: 4px 9px;
  opacity: 0;
}
.frag p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--muted);
}

/* ---- 使う人: a scope ladder. Four roles never fit a three-column grid,
       and the point is how much each one sees, not that there are four. ---- */
.roles {
  border-top: 1px solid var(--border);
}
.role-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 28px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.role-who {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}
/* the figure's clothing tracks the scope bar: full green at the top of the
   ladder, neutral for the party outside the company */
.role-fig {
  width: 38px;
  height: 40px;
  grid-row: span 3;
  align-self: start;
}
.role-who h3 {
  font-size: var(--fs-md);
  margin: 0 0 10px;
}
.scope {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #eaf4ef;
  overflow: hidden;
}
.scope i {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
}
.scope-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.role-opens {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: #2c4136;
}
.role-hidden {
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: 1.85;
  color: var(--muted);
  padding-left: 14px;
  border-left: 2px solid #f0e2c4;
}

/* ---- 導入の流れ: a vertical schedule that names who does each step.
       AI Office ran these as a horizontal numbered row. ---- */
.steps-v {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.steps-v::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 42px;
  width: 2px;
  background: linear-gradient(#cfeadd, #eaf4ef);
}
.step-v {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 132px;
  gap: 24px;
  align-items: start;
  padding: 0 0 34px;
}
.step-v:last-child { padding-bottom: 0; }
.step-n {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue);
  color: #0e8f66;
  font-weight: 800;
  font-size: var(--fs-sm);
  display: grid;
  place-items: center;
}
.step-v h3 {
  font-size: var(--fs-lg);
  margin: 5px 0 8px;
}
.step-v p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--muted);
}
.step-who {
  justify-self: start;
  margin-top: 7px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 3px;
  white-space: nowrap;
}
.who-us   { background: #eaf7f1; border: 1px solid #cfeadd; color: #0e8f66; }
.who-you  { background: #fdf6e7; border: 1px solid #f0e2c4; color: #7b5c2e; }
.who-both { background: #f4f8f6; border: 1px solid var(--border); color: #4a6659; }

/* ---- データの扱い: what the system refuses to do, beside what you can
       inspect before signing. AI Office ran four equal security cards. ---- */
.does-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: start;
}
.does {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 26px 28px;
}
.does-not { background: linear-gradient(160deg, #fffdf8, #fffefb); border-color: #f0e2c4; }
.does-can { background: linear-gradient(160deg, #f7fdfa, #fdfffe); border-color: #cfeadd; }
.does > h3 {
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  margin: 0 0 18px;
}
.does-not > h3 { color: #7b5c2e; }
.does-can > h3 { color: #0e8f66; }
.does ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.does li + li {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #0000000d;
}
.does li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
}
.mark {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  grid-row: span 2;
}
.mark-no { color: #c98a3c; }
.mark-yes { color: var(--blue); }
.does li strong {
  display: block;
  font-size: var(--fs-md);
  margin-bottom: 6px;
}
.does li span {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--muted);
}

/* ---- Integrations, demoted to one strip (the hub diagram is gone) ---- */
.strip-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 28px;
}
.strip-head h2 {
  text-align: left;
  font-size: var(--fs-4xl);
  margin: 8px 0 0;
}
.strip-head .eyebrow { text-align: left; }
/* Base state -- and the reduced-motion state -- is the static wrapped strip
   it has always been. The marquee is layered on only inside the
   no-preference block below, so nothing here depends on movement. */
.tool-marquee {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: #fff;
}
.tool-track {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tool-track-copy {
  display: none;
}
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: #2c4136;
  background: #fcfefd;
}
.tool-chip svg {
  width: 17px;
  height: 17px;
  color: var(--blue);
  flex: none;
}
.section-note.strip-note {
  text-align: left;
  margin-top: 14px;
  line-height: 1.9;
}

.tk-hrs {
  font-size: var(--fs-2xs);
  color: #0e8f66;
  font-weight: 700;
  margin: 2px 0 0;
}
.eyebrow {
  color: var(--blue);
  font-weight: 800;
  font-size: var(--fs-base);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 900;
  margin-bottom: 4px;
}
.hero-description {
  font-size: 17px;
  line-height: 1.9;
  font-weight: 600;
  color: #3d6c55;
}
.promise {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
  padding: 10px 14px;
  border: 1px solid #bbe3ce;
  border-radius: 5px;
  background: #f3faf6cc;
  color: #1aa05a;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.promise .person {
  width: 37px;
  height: 38px;
}
.hero-buttons {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero-buttons .button {
  flex: 0 0 auto;
  min-height: 54px;
  padding-inline: 30px;
  font-size: var(--fs-md);
}
.micro {
  font-size: var(--fs-2xs);
  line-height: 1.7;
  margin-top: 8px;
  color: #346a50;
}
.hero-checks {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 32px;
  font-size: var(--fs-xs);
  color: #346a50;
  font-weight: 600;
}
.hero-checks span:before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  background: var(--mint);
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  font-size: var(--fs-xs);
}
.hero-dashboard {
  background: #ffffffeb;
  border: 1px solid #edf7f1;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 24px 60px #2a7b512b;
}
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.dash-header strong {
  color: #149153;
  font-size: var(--fs-xl);
}
.dash-header small {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--muted);
}
.metrics {
  display: flex;
  gap: 4px;
  text-align: center;
}
.metrics span {
  min-width: 66px;
  padding: 4px 12px;
  border-radius: 5px;
  background: #fcfefd;
  font-size: var(--fs-2xs);
  color: var(--muted);
}
.metrics b {
  display: block;
  font-size: var(--fs-2xl);
  color: #119d88;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.metrics span:nth-child(2) b {
  color: #e49b25;
}
.agents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.agent {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 10px;
  background: linear-gradient(140deg, #fff, #fafdfb);
  min-width: 0;
}
.agent-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.person {
  width: 50px;
  height: 52px;
  flex-shrink: 0;
}
.agent-top strong {
  font-size: var(--fs-2xs);
  line-height: 1.6;
  word-break: keep-all;
}
.agent-top small {
  display: block;
  font-size: var(--fs-2xs);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  background: #e1f7f0;
  color: #158a78;
  font-size: var(--fs-2xs);
  font-weight: 700;
  margin-top: 8px;
  padding: 1px 8px;
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status.waiting {
  background: #fff1d8;
  color: #c48a29;
}
.agent p {
  font-size: var(--fs-2xs);
  line-height: 1.8;
  margin-top: 8px;
  min-height: 30px;
}
.approval {
  border: 1px solid #dcefe5;
  border-radius: 7px;
  background: linear-gradient(125deg, #f7fdfa, #fdfffe);
  padding: 8px;
  margin-top: 12px;
  box-shadow: 0 3px 8px #428c6410;
}
.approval-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.approval-title strong {
  font-size: var(--fs-xs);
  color: #2c4136;
}
.approval-title > span {
  font-size: var(--fs-2xs);
  color: #557c69;
}
.approval-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffffed;
  border: 1px solid #e3f4ea;
  border-radius: 5px;
  margin-top: 8px;
  padding: 8px 8px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.approval-row:hover {
  border-color: #c7e8d6;
  box-shadow: 0 2px 8px #428c6414;
}
.file-icon {
  width: 30px;
  height: 34px;
  padding: 4px;
  background: #f3faf6;
  border: 1px solid #d7efe2;
  border-radius: 4px;
  flex-shrink: 0;
}
.icon {
  width: 40px;
  height: 44px;
  display: block;
  color: var(--blue);
  flex-shrink: 0;
}
.file-icon .icon {
  width: 100%;
  height: 100%;
}
.approval-row > div {
  flex: 1;
}
.approval-row strong {
  display: block;
  font-size: var(--fs-2xs);
  line-height: 1.6;
}
.approval-row small {
  display: block;
  color: #458761;
  font-size: var(--fs-2xs);
}
.row-arrow {
  color: #62b78a;
  font-size: var(--fs-xl);
}
.approval-row .person {
  width: 34px;
  height: 35px;
}
.reviewer {
  font-size: var(--fs-2xs);
  color: #8eb09f;
}
.small {
  min-height: 31px;
  padding: 4px 16px;
  font-size: var(--fs-2xs);
  border-radius: 5px;
}
.grid {
  display: grid;
  gap: var(--card-gap);
}
.three {
  grid-template-columns: repeat(3, 1fr);
}
.two {
  grid-template-columns: repeat(2, 1fr);
}
.grid > article {
  align-items: start;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: linear-gradient(140deg, #fff, #fdfefd);
  box-shadow: 0 2px 5px #428c6403;
}
.pains {
  padding-top: 48px;
}
.pain {
  position: relative;
  padding: var(--card-pad) var(--card-pad) var(--card-pad) 124px;
  min-height: 140px;
}
.pain > .person,
.pain > .paper-art {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 91px;
  height: 105px;
}
.pain strong {
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.45;
  display: block;
  margin-bottom: 8px;
}
.pain p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin-top: 8px;
}
.paper-art {
  background: #f1f9f4;
  border-radius: 15px;
  transform: rotate(-7deg);
  display: grid;
  place-items: center;
}
.paper-art .icon {
  width: 55px;
  height: 75px;
  filter: drop-shadow(8px 8px 1px #d0ecdd);
}
.section-statement {
  text-align: center;
  color: var(--navy);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1.6;
  margin-top: 40px;
}
.service {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-pad);
  min-height: 105px;
}
.icon-tile {
  background: #f4fbf7;
  border-radius: 24px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  transition:
    background 0.25s,
    color 0.25s;
}
.service:hover .icon-tile,
.integration-cards article:hover .icon-tile {
  background: var(--blue);
  color: #fff;
}
.service:hover .icon-tile .icon {
  color: #fff;
}
.icon-tile .icon {
  width: 45px;
  height: 49px;
}
.service p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin-top: 8px;
}
.step-art {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 128px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #e6f5ed;
  border-radius: 8px;
  background: linear-gradient(160deg, #fbfdfc, #f4faf7);
}
.mini {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 6px;
}
.mini li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #e3f4ea;
  border-radius: 6px;
  background: #fff;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: #2b724e;
}
.mini svg {
  width: 16px;
  height: 18px;
  color: var(--blue);
  flex-shrink: 0;
}
.mini span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini em {
  font-style: normal;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #f3faf6;
  color: var(--blue);
}
.mini.done li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  font-size: 10px;
  flex-shrink: 0;
}
.mini-doc {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e3f4ea;
  border-radius: 6px;
  background: #fff;
}
.mini-doc strong {
  display: block;
  font-size: var(--fs-2xs);
  color: #2b724e;
  margin-bottom: 8px;
}
.mini-doc i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #def2e7;
  margin-top: 6px;
}
.mini-doc i:nth-of-type(2) { width: 82%; }
.mini-doc i:nth-of-type(3) { width: 58%; }
.mini-doc small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 10px;
  color: var(--blue);
  font-weight: 700;
}
.mini-doc small b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.human-step .human-review {
  min-height: 128px;
  margin-top: 14px;
}
.human-step h3 {
  color: var(--blue);
  font-size: var(--fs-md);
}
.human-step h3 b {
  background: #22cf71;
}
.human-review {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
  margin-top: 4px;
}
.human-review .person {
  width: 111px;
  height: 107px;
}
.human-review span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.human-review .button {
  margin-top: 4px;
  border-radius: 15px;
}
.benefits article {
  padding: var(--card-pad) var(--card-pad) var(--card-pad) 76px;
  position: relative;
  min-height: 111px;
}
.check {
  position: absolute;
  left: 24px;
  top: 20px;
  background: var(--mint);
  color: white;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-2xl);
}
.benefits p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin-top: 8px;
}
.industry-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.industry-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6e9b84;
  margin-top: 4px;
}
.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tasks li {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f3faf6;
  color: #1f8f56;
}
.office-preview {
  padding-block: 40px;
  background: linear-gradient(#f7fcf9, #f2faf6);
}
/* ---- よくある質問: two labelled groups rather than one undifferentiated
       two-column grid. The accordion chrome itself is unchanged. ---- */
.qa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.qa-label {
  font-size: var(--fs-sm);
  color: var(--blue);
  letter-spacing: 0.08em;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.qa-col details + details { margin-top: 10px; }
.qa-col details {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: linear-gradient(#fff, #fbfefc);
}
summary {
  cursor: pointer;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #4b755f;
}
summary::-webkit-details-marker {
  display: none;
}
summary span {
  color: #4b9670;
}
summary span {
  transition: transform 0.25s ease;
}
details[open] summary span {
  transform: rotate(45deg);
}
details p {
  font-size: var(--fs-xs);
  padding: 0 16px 12px;
  line-height: 1.8;
}
footer {
  border-top: 1px solid #e8f5ee;
  padding: 40px 0 44px;
  background: #fdfefd;
}
.footer-inner {
  display: flex;
  gap: 56px;
  align-items: center;
}
.footer-inner p {
  font-size: var(--fs-2xs);
  line-height: 1.9;
}
.footer-inner > div {
  margin-left: auto;
  text-align: right;
  font-size: var(--fs-2xs);
  color: #6a9680;
}
.footer-inner button {
  font-size: var(--fs-2xs);
  background: none;
  border: 0;
  padding: 0;
  color: #68927d;
}
.footer-inner small {
  display: block;
  font-size: var(--fs-2xs);
  margin-top: 8px;
}
dialog {
  width: min(480px, calc(100% - 36px));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px;
  box-shadow: 0 20px 80px #17613a40;
  color: var(--navy);
}
dialog::backdrop {
  background: #174b3088;
  backdrop-filter: blur(4px);
}
dialog h2 {
  text-align: left;
  font-size: var(--fs-3xl);
  margin-top: 8px;
}
dialog p {
  font-size: var(--fs-base);
  line-height: 1.9;
  margin-bottom: 20px;
}
.dialog-close {
  position: absolute;
  right: 12px;
  top: 8px;
  background: none;
  border: 0;
  font-size: var(--fs-4xl);
  min-width: 36px;
}
.dialog-callout {
  background: #f4faf7;
  border: 1px solid #e2f3ea;
  border-radius: 5px;
  font-size: var(--fs-sm);
  padding: 16px;
  margin: 20px 0;
  color: #3b7455;
}
@media (min-width: 1500px) {
  .hero-inner {
    padding-block: 88px 72px;
  }
}
@media (max-width: 1100px) {
  .container {
    width: calc(100% - 48px);
  }
  .nav {
    gap: 20px;
  }
  .nav nav {
    gap: 16px;
  }
  .nav-actions {
    gap: 8px;
  }
  .nav .button {
    padding-inline: 16px;
  }
  .hero-head {
    gap: 28px;
  }
  .hero-stage {
    grid-template-columns: minmax(0, 1fr) 230px;
  }
  .hero-description {
    font-size: var(--fs-sm);
  }
  .promise {
    font-size: var(--fs-sm);
  }
  .hero-dashboard {
    padding: 12px;
  }
  .approval-title > span {
    display: none;
  }
  .reviewer {
    display: none;
  }
  .agent-top {
    gap: 4px;
  }
  .agent-top .person {
    width: 38px;
    height: 43px;
  }
  .hero-checks {
    font-size: var(--fs-2xs);
    gap: 4px;
  }
  .hero-checks span:before {
    margin-right: 4px;
  }
  .pain {
    padding-left: 92px;
  }
  .pain > .person,
  .pain > .paper-art {
    width: 70px;
  }
  .pain strong {
    font-size: var(--fs-md);
  }
  .pain p {
    font-size: var(--fs-2xs);
  }
  .human-step h3 {
    font-size: var(--fs-base);
  }
  .service {
    gap: 16px;
  }
  .footer-inner {
    gap: 24px;
  }
}
@media (max-width: 800px) {
  body {
    font-size: var(--fs-sm);
  }
  .container {
    width: calc(100% - 36px);
  }
  .nav {
    height: 58px;
    gap: 16px;
    justify-content: space-between;
  }
  .nav-actions {
    margin-left: auto;
  }
  .nav .button {
    font-size: var(--fs-2xs);
    padding-inline: 12px;
  }
  .nav nav {
    position: absolute;
    top: 57px;
    left: 0;
    right: 0;
    background: white;
    padding: 20px;
    box-shadow: 0 8px 12px #12563216;
    display: none;
    font-size: var(--fs-base);
  }
  .nav nav.open {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    order: 3;
    min-height: 44px;
    min-width: 44px;
  }
  .menu-toggle span {
    font-size: var(--fs-xl);
    margin-left: 4px;
  }
  .hero-inner {
    padding-block: 40px;
  }
  .hero-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-stage {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }
  .stage-note {
    border-left: 0;
    border-top: 1px solid #cfeadd;
    padding: 16px 0 0;
  }
  .hero h1 {
    font-size: var(--fs-3xl);
  }
  .eyebrow {
    font-size: var(--fs-xs);
    margin-bottom: 8px;
  }
  .hero-description {
    font-size: var(--fs-2xs);
  }
  .promise {
    font-size: var(--fs-2xs);
    padding: 4px 8px;
    gap: 4px;
  }
  .promise .person {
    width: 27px;
    height: 28px;
  }
  .hero-buttons {
    gap: 8px;
    margin-top: 8px;
  }
  .hero-buttons .button {
    font-size: var(--fs-xs);
    min-height: 37px;
    padding: 8px;
  }
  .micro {
    font-size: var(--fs-2xs);
  }
  .hero-checks {
    flex-wrap: wrap;
    font-size: var(--fs-2xs);
    margin-top: 16px;
    gap: 8px;
  }
  .hero-checks span:before {
    width: 12px;
    height: 12px;
    font-size: var(--fs-2xs);
  }
  .hero-dashboard {
    padding: 8px;
  }
  .dash-header strong {
    font-size: var(--fs-md);
  }
  .dash-header small {
    font-size: var(--fs-2xs);
  }
  .metrics span {
    min-width: 35px;
    font-size: var(--fs-2xs);
    padding: 2px 8px;
  }
  .metrics b {
    font-size: var(--fs-lg);
  }
  .agents {
    gap: 4px;
  }
  .agent {
    padding: 8px 4px;
  }
  .agent-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .agent-top strong {
    font-size: var(--fs-2xs);
  }
  .agent-top small {
    font-size: var(--fs-2xs);
  }
  .status {
    font-size: var(--fs-2xs);
    padding-inline: 4px;
  }
  .agent p {
    font-size: var(--fs-2xs);
  }
  .approval {
    padding: 8px;
    margin-top: 8px;
  }
  .approval-title {
    gap: 4px;
  }
  .approval-title strong {
    font-size: var(--fs-2xs);
  }
  .approval-row {
    padding: 4px;
    gap: 4px;
  }
  .approval-row strong {
    font-size: var(--fs-2xs);
  }
  .approval-row small {
    font-size: var(--fs-2xs);
  }
  .approval-row .person {
    width: 22px;
    height: 25px;
  }
  .file-icon {
    width: 24px;
    height: 29px;
    padding: 4px;
  }
  .small {
    font-size: var(--fs-2xs);
    padding: 4px 8px;
    min-height: 26px;
  }
  .row-arrow {
    font-size: var(--fs-sm);
  }
  .section {
    padding-block: 48px;
  }
  h2 {
    font-size: var(--fs-2xl);
    margin-bottom: 28px;
  }
  .grid {
    gap: 12px;
  }
  .pain {
    padding: 16px 8px 16px 72px;
    min-height: 122px;
  }
  .pain > .person,
  .pain > .paper-art {
    width: 54px;
    height: 79px;
    left: 10px;
    top: 19px;
  }
  .pain strong {
    font-size: var(--fs-xs);
  }
  .pain p {
    font-size: var(--fs-2xs);
  }
  .paper-art .icon {
    width: 39px;
    height: 57px;
  }
  .section-statement {
    font-size: var(--fs-lg);
  }
  .service {
    padding: 12px 16px;
    gap: 16px;
    min-height: 94px;
  }
  .service h3 {
    font-size: var(--fs-base);
  }
  .service p {
    font-size: var(--fs-2xs);
  }
  .icon-tile {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 18px;
  }
  .icon-tile .icon {
    width: 36px;
    height: 39px;
  }
  .human-review {
    gap: 4px;
  }
  .human-review .person {
    width: 73px;
    height: 85px;
  }
  .human-review span {
    font-size: var(--fs-2xs);
  }
  .step-art {
    min-height: 81px;
  }
  .benefits article {
    padding: 16px 8px 12px 48px;
    min-height: 94px;
  }
  .check {
    left: 13px;
    top: 16px;
    width: 25px;
    height: 25px;
    font-size: var(--fs-lg);
  }
  .benefits h3 {
    font-size: var(--fs-sm);
  }
  .benefits p {
    font-size: var(--fs-2xs);
  }
  summary {
    font-size: var(--fs-2xs);
    padding: 8px 8px;
  }
  .footer-inner {
    gap: 20px;
  }
  .footer-inner p {
    font-size: var(--fs-2xs);
  }
  .footer-inner > div {
    font-size: var(--fs-2xs);
  }
  .footer-inner button,
  .footer-inner small {
    font-size: var(--fs-2xs);
  }
}
@media (max-width: 600px) {
  html {
    scroll-padding-top: 20px;
  }
  .container {
    width: calc(100% - 32px);
  }
  .nav {
    height: 62px;
  }
  .nav-actions .outline {
    display: none;
  }
  .nav .button {
    font-size: var(--fs-2xs);
    padding: 8px 12px;
    min-height: 36px;
  }
  .menu-toggle span {
    font-size: var(--fs-xl);
  }
  .hero-inner {
    padding-block: 40px;
  }
  .hero-head {
    gap: 20px;
  }
  .hero h1 {
    font-size: clamp(22px, 6.4vw, 26px);
    line-height: 1.45;
    margin-bottom: 16px;
    white-space: normal;
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .eyebrow {
    font-size: var(--fs-xs);
  }
  .hero-description {
    font-size: var(--fs-xs);
    line-height: 1.9;
  }
  .hero-description br:first-of-type {
    display: none;
  }
  .promise {
    font-size: var(--fs-xs);
    padding: 8px 8px;
    white-space: normal;
  }
  .promise .person {
    width: 34px;
    height: 35px;
  }
  .hero-buttons .button {
    min-height: 47px;
    font-size: var(--fs-sm);
  }
  .micro {
    font-size: var(--fs-2xs);
  }
  .hero-checks {
    font-size: var(--fs-2xs);
    justify-content: flex-start;
    gap: 12px;
    margin-top: 16px;
  }
  .hero-dashboard {
    padding: 12px;
    border-radius: 9px;
  }
  .dash-header strong {
    font-size: var(--fs-xl);
  }
  .dash-header small {
    font-size: var(--fs-2xs);
  }
  .metrics span {
    min-width: 44px;
    font-size: var(--fs-2xs);
  }
  .metrics b {
    font-size: var(--fs-xl);
  }
  .agent {
    padding: 8px 8px;
  }
  .agent-top {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .agent-top .person {
    width: 32px;
    height: 39px;
  }
  .agent-top strong {
    font-size: var(--fs-2xs);
  }
  .status {
    font-size: var(--fs-2xs);
  }
  .agent p {
    font-size: var(--fs-2xs);
  }
  .approval-title strong {
    font-size: var(--fs-2xs);
  }
  .approval-row {
    padding: 8px 8px;
    gap: 8px;
  }
  .approval-row strong {
    font-size: var(--fs-2xs);
  }
  .approval-row small {
    font-size: var(--fs-2xs);
  }
  .approval-row .person {
    width: 29px;
    height: 31px;
  }
  .small {
    font-size: var(--fs-2xs);
    min-height: 30px;
    padding: 4px 12px;
  }
  .section {
    padding-block: 48px;
  }
  h2 {
    font-size: var(--fs-2xl);
    line-height: 1.5;
    margin-bottom: 24px;
  }
  .three,
  .two {
    grid-template-columns: 1fr;
  }
  .pain {
    padding: 20px 16px 20px 116px;
    min-height: 124px;
  }
  .pain > .person,
  .pain > .paper-art {
    width: 82px;
    height: 91px;
    left: 17px;
    top: 15px;
  }
  .pain strong {
    font-size: var(--fs-lg);
  }
  .pain p {
    font-size: var(--fs-xs);
  }
  .section-statement {
    font-size: var(--fs-lg);
    line-height: 1.9;
    padding-inline: 4px;
  }
  .service {
    padding: 16px;
    gap: 20px;
    min-height: 110px;
  }
  .service h3 {
    font-size: var(--fs-md);
  }
  .service p {
    font-size: var(--fs-xs);
  }
  .icon-tile {
    width: 60px;
    height: 60px;
  }
  .human-step h3 {
    font-size: var(--fs-md);
    justify-content: center;
  }
  .human-review {
    gap: 32px;
  }
  .human-review .person {
    width: 109px;
    height: 112px;
  }
  .human-review span {
    font-size: var(--fs-xs);
  }
  .benefits article {
    padding: 16px 20px 16px 64px;
    min-height: 105px;
  }
  .check {
    width: 29px;
    height: 29px;
    left: 21px;
    top: 20px;
    font-size: var(--fs-2xl);
  }
  .benefits h3 {
    font-size: var(--fs-md);
  }
  .benefits p {
    font-size: var(--fs-xs);
  }
  summary {
    font-size: var(--fs-xs);
    min-height: 44px;
    padding: 12px;
  }
  .footer-inner {
    display: block;
  }
  .footer-inner p {
    font-size: var(--fs-2xs);
    margin-block: 12px;
  }
  .footer-inner > div {
    text-align: left;
    margin: 16px 0 0;
  }
  .footer-inner button,
  .footer-inner small {
    font-size: var(--fs-2xs);
  }
  .footer-inner small {
    margin-top: 8px;
  }
  dialog {
    padding: 32px 24px;
  }
  dialog h2 {
    font-size: var(--fs-2xl);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
  }
}

.inline-icon {
  display: inline-block;
  width: 16px;
  height: 17px;
  vertical-align: middle;
  flex-shrink: 0;
}
.reviewer-illustration {
  width: 125px;
  height: 107px;
  object-fit: contain;
}
.human-review .reviewer-illustration {
  width: 125px;
  height: 107px;
}
@media (max-width: 800px) {
  .human-review .reviewer-illustration {
    width: 80px;
    height: 85px;
  }
}
@media (max-width: 600px) {
  .human-review .reviewer-illustration {
    width: 150px;
    height: 112px;
  }
}

/* 既存ツール連携 */
.integrations {
  background: linear-gradient(#f9fcfa, #f2faf6);
  padding-block: var(--space-20);
}
.eyebrow.center {
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.section-lead {
  text-align: center;
  font-size: var(--fs-base);
  line-height: 1.9;
  margin: -16px 0 40px;
}
.section-note {
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-top: 40px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.integration-cards article {
  display: flex;
  align-items: flex-start;
  gap: var(--card-gap);
  padding: var(--card-pad);
}
.integration-cards .icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--blue);
  flex-shrink: 0;
}
.integration-cards .inline-icon {
  width: 20px;
  height: 20px;
}
.integration-cards h3 {
  font-size: var(--fs-lg);
}
.integration-cards p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .integration-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .integrations {
    padding-block: 32px;
  }
}

/* Target size: real controls reach 44px; illustration controls keep their
   drawn size and gain the hit area with a pseudo-element instead. */
.nav nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.hero-dashboard .button.small,
.hero-dashboard .text-button {
  position: relative;
}
.hero-dashboard .button.small::after,
.hero-dashboard .text-button::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  translate: 0 -50%;
  height: 44px;
}

/* Narrow layout: the hero dashboard reads as a list, not three squeezed columns. */
@media (max-width: 600px) {
  .agents {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .agent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px;
    min-height: 0;
  }
  .agent-top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .agent-top .person {
    width: 36px;
    height: 40px;
  }
  .agent-top strong {
    line-height: 1.4;
  }
  .status {
    margin-top: 0;
  }
  .agent p {
    flex-basis: 100%;
    margin-top: 0;
    min-height: 0;
  }
  .section-lead br,
  .section-note br {
    display: none;
  }
}

/* Motion: content is visible without JS; reveal only runs where scripting
   can add the .in class, and never under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }
  .hero-copy > * {
    animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-copy > :nth-child(2) { animation-delay: 0.06s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.12s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.18s; }
  .hero-copy > :nth-child(5) { animation-delay: 0.24s; }
  .hero-copy > :nth-child(6) { animation-delay: 0.3s; }
  .hero-copy > :nth-child(7) { animation-delay: 0.36s; }
  .hero-dashboard {
    animation: rise 0.7s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .grid > article,
  .plan,
  .tool-logo,
  .faq-grid details,
  .integration-cards article,
  .path {
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }
  .grid > article:hover,
  .plan:not(.plan-featured):hover,
  .tool-logo:hover,
  .integration-cards article:hover {
    transform: translateY(-2px);
    border-color: #c7e8d6;
    box-shadow: 0 8px 20px #428c6414;
  }
  .button:active {
    transform: translateY(0);
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pulse {
    50% {
      opacity: 0.25;
    }
  }
  @keyframes pop {
    0% {
      transform: scale(0.4);
      opacity: 0;
    }
    70% {
      transform: scale(1.15);
    }
    100% {
      transform: none;
      opacity: 1;
    }
  }
  @keyframes fade-down {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
  .status:not(.waiting):not(.done)::before {
    animation: pulse 1.6s ease-in-out infinite;
  }
  .reveal.in .check {
    animation: pop 0.5s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  details[open] > p {
    animation: fade-down 0.3s ease;
  }
}

/* Office preview heading and 資料請求 section. */
.office-preview .section-lead {
  margin-bottom: 40px;
}
.step-node {
  position: absolute;
  left: var(--card-pad);
  top: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px #fff;
}
.step-roles {
  margin: 16px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  font-size: var(--fs-xs);
}
.step-roles > div {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 6px;
}
.step-roles dt {
  flex-shrink: 0;
  min-width: 36px;
  padding: 1px 8px;
  border-radius: 4px;
  background: #f3faf6;
  color: #1f8f56;
  font-weight: 700;
  text-align: center;
}
.step-roles dd {
  margin: 0;
  color: #3d6c55;
  line-height: 1.6;
}
.step-exit {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #fff0f2;
  color: #c65067;
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* FAQ: intro column + accordion. */
.faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.faq-layout summary {
  font-size: var(--fs-sm);
  padding: 14px 20px;
}
.faq-layout details p {
  padding: 0 20px 16px;
  font-size: var(--fs-sm);
}

/* Closing: two paths, one page-wide band. */
.closing {
  /* Was a blurred stock photo of unknown provenance. A gradient carries the
     same depth at zero bytes and zero licensing risk. */
  background:
    radial-gradient(120% 90% at 78% 28%, #ffffff 0%, #ffffff00 58%),
    linear-gradient(115deg, #f4fbf7 0%, #e9f6ef 58%, #dff2e8 100%);
}
.paths {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--card-gap);
  max-width: 980px;
  margin-inline: auto;
}
.path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.path-primary {
  border-color: #9cd7b8;
  box-shadow: 0 12px 30px #1ba25d1c;
}
.path-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.06em;
}
.path h3 {
  font-size: var(--fs-2xl);
}
.path > p {
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  color: #3d6c55;
}
.doc-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
.doc-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  font-size: var(--fs-2xs);
  flex-shrink: 0;
}
.path .button {
  margin-top: auto;
  align-self: stretch;
  min-height: 48px;
}
@media (max-width: 800px) {
  .step-node {
    left: 22px;
    top: 20px;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .paths {
    grid-template-columns: 1fr;
  }
  .path {
    padding: 24px;
  }
}

/* 料金プラン: three equal columns, shared header grid, CTA anchored. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.plan-featured {
  border-color: #9cd7b8;
  background: linear-gradient(#f7fcf9, #fff 40%);
  box-shadow: 0 16px 40px #1ba25d1a;
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  padding: 3px 14px;
  border-radius: 20px;
  background: var(--blue);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.plan h3 {
  font-size: var(--fs-xl);
  letter-spacing: 0.04em;
}
.plan-for {
  font-size: var(--fs-xs);
  margin-top: 4px;
  min-height: 2.6em;
}
.plan-price {
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.plan-price b {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--blue);
}
.plan-price span {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.plan-setup {
  font-size: var(--fs-xs);
  margin-top: 6px;
}
.plan-setup b {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.plan .button {
  margin-top: 20px;
  align-self: stretch;
  min-height: 48px;
}
.plan > .button {
  display: block;
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
.plan-features {
  list-style: none;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
}
.plan-features li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 2px 10px;
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #3d6c55;
}
.plan-features li::before {
  content: "✓";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: #e1f7f0;
  color: #158a78;
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.plan-features small {
  grid-column: 2;
  font-size: var(--fs-2xs);
  color: var(--muted);
}
.plan-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
  margin-top: var(--card-gap);
}
.plan-notes:has(> :only-child) {
  grid-template-columns: 1fr;
  max-width: 480px;
}
.plan-notes > div {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: #f9fdfb;
  font-size: var(--fs-sm);
  color: #3d6c55;
  line-height: 1.6;
}
.plan-notes .inline-icon {
  width: 22px;
  height: 22px;
  color: var(--blue);
}
.plan-notes b {
  color: var(--blue);
}
.price-disclaimer {
  font-size: var(--fs-2xs);
  text-align: right;
  margin-top: 12px;
}
@media (max-width: 1100px) {
  .plan {
    padding: 28px 20px 24px;
  }
  .plan-price b {
    font-size: 30px;
  }
}
@media (max-width: 800px) {
  .plans {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 480px;
    margin-inline: auto;
  }
  .plan-for {
    min-height: 0;
  }
  .plan-notes {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
  .price-disclaimer {
    text-align: left;
  }
}

/* Pricing feature matrix. */
.pricing-matrix-wrap {
  margin-top: var(--card-gap);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
}
.pricing-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 640px;
}
.pricing-matrix th,
.pricing-matrix td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.pricing-matrix thead th {
  background: #f4faf7;
  color: var(--navy);
  font-size: var(--fs-xs);
}
.pricing-matrix tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.5;
}
.pricing-matrix tbody tr:last-child th,
.pricing-matrix tbody tr:last-child td {
  border-bottom: none;
}
.pricing-matrix .yes {
  color: var(--blue);
  font-weight: 700;
}
.pricing-matrix .no {
  color: var(--muted);
}

/* Onboarding services table. */
.onboarding-services {
  margin-top: var(--card-gap);
}
.onboarding-services h3 {
  font-size: var(--fs-lg);
  margin-bottom: 12px;
}
.onboarding-services table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.onboarding-services th,
.onboarding-services td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.onboarding-services thead th {
  background: #f4faf7;
  color: var(--navy);
  font-size: var(--fs-xs);
}
.onboarding-services td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  font-weight: 700;
}
.onboarding-services tbody tr:last-child th,
.onboarding-services tbody tr:last-child td {
  border-bottom: none;
}

/* Product showcase. */
.product-hero {
  margin: 0;
  border: 1px solid #d8efe3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px #1e8a521f;
}
.product-hero img,
.product-tiles img {
  display: block;
  width: 100%;
  height: auto;
}
.product-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  margin-top: var(--card-gap);
}
.product-tiles figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px #44a26f12;
}
.product-tiles img {
  aspect-ratio: 1000 / 520;
  object-fit: cover;
  object-position: top left;
  border-bottom: 1px solid var(--border);
}
.product-tiles figcaption {
  padding: 14px 18px 16px;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}
.product-tiles figcaption strong {
  display: block;
  color: var(--navy);
  font-size: var(--fs-md);
  margin-bottom: 2px;
}
.office-preview .section-note {
  text-align: center;
  margin-top: 20px;
}
@media (max-width: 800px) {
  .product-tiles {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .product-hero {
    border-radius: 8px;
  }
}

/* Hero motion: approval rows entering, and a looping
   approve moment on the first row. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes approve-row {
    0%,
    58% {
      background: #ffffffed;
      border-color: #e3f4ea;
    }
    64%,
    90% {
      background: #eefaf6;
      border-color: #9fdcc9;
    }
    100% {
      background: #ffffffed;
      border-color: #e3f4ea;
    }
  }
  @keyframes approve-button {
    0%,
    56% {
      opacity: 1;
      transform: none;
    }
    60% {
      transform: scale(0.94);
    }
    64%,
    92% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes approve-badge {
    0%,
    62% {
      opacity: 0;
      translate: 8px 0;
    }
    68%,
    90% {
      opacity: 1;
      translate: 0 0;
    }
    100% {
      opacity: 0;
    }
  }
  .hero-dashboard .approval-row,
  .approval-demo .approval-row {
    animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-dashboard .approval-row:nth-of-type(2),
  .approval-demo .approval-row:nth-of-type(2) { animation-delay: 0.7s; }
  .hero-dashboard .approval-row:nth-of-type(3),
  .approval-demo .approval-row:nth-of-type(3) { animation-delay: 0.85s; }
  .hero-dashboard .approval-row:nth-of-type(4),
  .approval-demo .approval-row:nth-of-type(4) { animation-delay: 1s; }
  .hero-dashboard .approval-title + .approval-row,
  .approval-demo .approval-title + .approval-row {
    position: relative;
    animation:
      rise 0.6s 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both,
      approve-row 9s 2.5s ease-in-out infinite;
  }
  .hero-dashboard .approval-title + .approval-row .button.small,
  .approval-demo .approval-title + .approval-row .button.small,
  .approval-demo .approval-title + .approval-row .reviewer,
  .approval-demo .approval-title + .approval-row .person {
    animation: approve-button 9s 2.5s ease-in-out infinite;
  }
  .hero-dashboard .approval-title + .approval-row::after,
  .approval-demo .approval-title + .approval-row::after {
    content: "✓ 承認済み";
    position: absolute;
    right: 12px;
    top: 50%;
    translate: 0 -50%;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--mint);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    animation: approve-badge 9s 2.5s ease-in-out infinite;
  }
  .hero-dashboard .approval-title + .approval-row::after,
  .approval-demo .approval-title + .approval-row::after {
    margin-top: 0;
  }
}

/* The line, animated: the connector fills and each beat lights in turn. */
@media (prefers-reduced-motion: no-preference) and (min-width: 601px) {
  /* 連携: a continuous strip. The track holds two identical sets and slides
     exactly one set-width, so the loop has no seam. Paused on hover, and
     absent entirely under reduced-motion since the rule lives in here. */
  .tool-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .tool-track {
    flex-wrap: nowrap;
    width: max-content;
    animation: tool-marquee 38s linear infinite;
  }
  .tool-track-copy {
    display: flex;
    gap: 10px;
    margin-left: 10px;
  }
  .tool-marquee:hover .tool-track,
  .tool-marquee:focus-within .tool-track {
    animation-play-state: paused;
  }
  @keyframes tool-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 5px)); }
  }

  /* よくある状態: the same job surfaces in three places in turn. The section
     asks 「何か所に分かれていますか」 and then lists places; this shows one
     record actually living in three of them. 9s, matching the approval loop. */
  .frag-echo { animation: frag-echo 9s ease-in-out infinite; }
  .frag:nth-child(1) .frag-echo { animation-delay: 0s; }
  .frag:nth-child(2) .frag-echo { animation-delay: 1.6s; }
  .frag:nth-child(3) .frag-echo { animation-delay: 3.2s; }
  @keyframes frag-echo {
    0%, 4%    { opacity: 0; transform: translateY(4px); }
    10%, 46%  { opacity: 1; transform: none; }
    54%, 100% { opacity: 0; transform: none; }
  }

  .rail::before {
    transform-origin: left center;
    animation: rail-fill 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  @keyframes rail-fill {
    0%        { transform: scaleX(0); opacity: 0; }
    6%        { transform: scaleX(0); opacity: 1; }
    26%       { transform: scaleX(0.34); }
    50%       { transform: scaleX(0.67); }
    76%, 94%  { transform: scaleX(1); }
    97%       { transform: scaleX(1); opacity: 0; }
    100%      { transform: scaleX(0); opacity: 0; }
  }
  .beat .dot { animation: beat-dot 12s ease-in-out infinite; }
  .beat:nth-of-type(1) .dot { animation-delay: 0s; }
  .beat:nth-of-type(2) .dot { animation-delay: 2.9s; }
  .beat:nth-of-type(3) .dot { animation-delay: 5.9s; }
  .beat:nth-of-type(4) .dot { animation-delay: 9s; }
  @keyframes beat-dot {
    0%, 2%    { background: #fff; color: #0e8f66; transform: none; }
    6%        { background: var(--blue); color: #fff; transform: scale(1.18); }
    12%, 92%  { background: var(--blue); color: #fff; transform: none; }
    100%      { background: #fff; color: #0e8f66; transform: none; }
  }
  .beat .vig { animation: beat-chip 12s ease-in-out infinite; }
  .beat:nth-of-type(1) .vig { animation-delay: 0s; }
  .beat:nth-of-type(2) .vig { animation-delay: 2.9s; }
  .beat:nth-of-type(3) .vig { animation-delay: 5.9s; }
  .beat:nth-of-type(4) .vig { animation-delay: 9s; }
  @keyframes beat-chip {
    0%, 3%   { border-color: #d7efe2; box-shadow: 0 0 0 0 #22d37700; }
    8%       { border-color: #8fd8bb; box-shadow: 0 6px 18px #1ba25d24; }
    20%, 100%{ border-color: #d7efe2; box-shadow: 0 0 0 0 #22d37700; }
  }
}
@media (max-width: 860px) {
  .frag-art { width: 104px; }
  .step-art { width: 108px; }
  .ll-step:not(:last-child)::after { width: 26px; margin: 0 9px; }
  .section-major { padding-block: var(--space-20); }
  .section-major > .container > .sec-head h2,
  .section-major > .container > h2 { font-size: var(--fs-4xl); }
  .qa { grid-template-columns: 1fr; gap: 28px; }
  .does-grid { grid-template-columns: 1fr; }
  .step-v {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
  }
  .step-who { grid-column: 2; margin-top: 10px; }
  .role-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .role-hidden { padding-left: 12px; }
  .scatter { grid-template-columns: repeat(6, 1fr); }
  .frag:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .strip-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sec-head {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }
  .rail {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .rail::before { display: none; }
  .beat:nth-child(2n) { border-right: 0; }
  .beat:first-child { padding-left: 20px; }
  .on-line-grid { grid-template-columns: 1fr 1fr; }
  .on-line:not(:nth-child(3n)) { border-right: 0; padding-right: 24px; }
  .on-line:not(:nth-child(3n+1)) { padding-left: 0; }
  .on-line:nth-child(odd) { border-right: 1px solid var(--border); padding-right: 24px; }
  .on-line:nth-child(even) { padding-left: 24px; }
}
@media (max-width: 600px) {
  .frag-art, .step-art { float: none; margin: 0 0 10px; width: 124px; }
  .ll-step:not(:last-child)::after { width: 16px; margin: 0 6px; }
  .ll-step { font-size: var(--fs-2xs); }
  .rail { grid-template-columns: 1fr; }
  .beat { border-right: 0 !important; padding: 0 0 0 20px; }
  .on-line-grid { grid-template-columns: 1fr; }
  .on-line { border-right: 0 !important; padding: 20px 0 !important; }
}

/* Workflow tiles animate in step with the pipeline marker. */
@media (prefers-reduced-motion: no-preference) and (min-width: 601px) {
  .mini.inbox li {
    animation: inbox-in 12s infinite;
  }
  .mini.inbox li:nth-child(2) { animation-name: inbox-in-2; }
  .mini.inbox li:nth-child(3) { animation-name: inbox-in-3; }
  @keyframes inbox-in   { 0% { opacity: 0; translate: -8px 0; } 3%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
  @keyframes inbox-in-2 { 0%, 2% { opacity: 0; translate: -8px 0; } 5%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
  @keyframes inbox-in-3 { 0%, 4% { opacity: 0; translate: -8px 0; } 7%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
  .mini-doc i {
    transform-origin: left;
    animation: draft-line 12s infinite;
  }
  .mini-doc i:nth-of-type(2) { animation-name: draft-line-2; }
  .mini-doc i:nth-of-type(3) { animation-name: draft-line-3; }
  @keyframes draft-line   { 0%, 26% { transform: scaleX(0); } 30%, 96% { transform: none; } 100% { transform: scaleX(0); } }
  @keyframes draft-line-2 { 0%, 29% { transform: scaleX(0); } 33%, 96% { transform: none; } 100% { transform: scaleX(0); } }
  @keyframes draft-line-3 { 0%, 32% { transform: scaleX(0); } 36%, 96% { transform: none; } 100% { transform: scaleX(0); } }
  .mini-doc small b {
    animation: pulse 1.2s ease-in-out infinite;
  }
  .mini.done li::before {
    animation: done-check 12s infinite;
  }
  .mini.done li:nth-child(2)::before { animation-name: done-check-2; }
  .mini.done li:nth-child(3)::before { animation-name: done-check-3; }
  @keyframes done-check   { 0%, 85% { transform: scale(0); } 88%, 96% { transform: none; } 100% { transform: scale(0); } }
  @keyframes done-check-2 { 0%, 87% { transform: scale(0); } 90%, 96% { transform: none; } 100% { transform: scale(0); } }
  @keyframes done-check-3 { 0%, 89% { transform: scale(0); } 92%, 96% { transform: none; } 100% { transform: scale(0); } }
}

/* Enquiry form. */
.contact {
  background: #fff;
}
.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.contact-intro .eyebrow,
.contact-intro h2 {
  text-align: left;
}
.contact-intro h2 {
  margin-bottom: 16px;
}
.contact-intro > p {
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-bottom: 20px;
}
.contact-phone {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.contact-phone a {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.contact-phone small {
  display: block;
  font-size: var(--fs-2xs);
}
.contact-form {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfdfc;
  display: grid;
  gap: 18px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field {
  display: grid;
  gap: 6px;
}
.field label,
.consent {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
}
.req {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 3px;
  background: #fff0f2;
  color: #c65067;
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #cae9d9;
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: var(--fs-base);
}
.field textarea {
  resize: vertical;
  line-height: 1.7;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid #eeab24;
  outline-offset: 2px;
  border-color: var(--blue);
}
.field input:user-invalid,
.field select:user-invalid {
  border-color: #c65067;
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}
.consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--blue);
  flex-shrink: 0;
}
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form .button {
  min-height: 52px;
  font-size: var(--fs-md);
}
.form-note {
  font-size: var(--fs-2xs);
  text-align: center;
}
@media (max-width: 800px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contact-intro .eyebrow,
  .contact-intro h2 {
    text-align: center;
  }
  .contact-form {
    padding: 24px 20px;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* Hero WebGL scene sits between the photo and the copy; fades in once ready. */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-scene.ready {
  opacity: 1;
}

/* Honeypot: out of view for people, still focusable-free for bots. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-status {
  margin: 0;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  font-weight: 600;
}
.form-status[data-state="ok"] {
  background: #e1f7f0;
  color: #12705f;
}
.form-status[data-state="error"] {
  background: #fff0f2;
  color: #a83a52;
}
.contact-form .button[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.thanks {
  max-width: 640px;
  text-align: center;
}
.thanks h2 {
  margin-bottom: 24px;
}
.thanks .button {
  margin-top: 16px;
  padding-inline: 40px;
}
/* ============================================================
   ツタウ additions — board mock, reserved slots, placeholder marks
   ============================================================ */

/* --- logo lockup: board+report mark, wordmark set in type --- */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.logo-lockup-lg { font-size: var(--fs-3xl); gap: 11px; }
.logo-mark {
  display: block;
  width: 26px;
  height: 26px;
  flex: none;
  object-fit: contain;
}
.logo-lockup-lg .logo-mark { width: 34px; height: 34px; }
@media (max-width: 800px) {
  .logo-mark { width: 22px; height: 22px; }
  .logo-lockup-lg .logo-mark { width: 28px; height: 28px; }
}
.slot-chip {
  position: absolute;
  top: -8px;
  right: -8px;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  color: #fff;
}

/* --- reserved slots --- */
.slot {
  position: relative;
  border: 1.5px dashed #9ab4a6;
  border-radius: var(--card-radius);
  background:
    repeating-linear-gradient(135deg, rgba(154, 167, 180, 0.07) 0 9px, transparent 9px 18px),
    #fbfdfc;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  min-height: 150px;
}
.slot h3 { font-size: var(--fs-md); color: #2c4136; }
.slot p { font-size: var(--fs-xs); line-height: 1.7; color: #5c7668; margin: 0; }
.slot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: #edf2ef;
  padding: 1px 4px;
  border-radius: 3px;
}
.slot-kind {
  position: absolute;
  top: -9px;
  left: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 3px;
  color: #fff;
}
.slot-anim .slot-kind { background: #b06f18; }
.slot-art .slot-kind { background: #4bab9b; }
.slot-shot .slot-kind { background: #4d6759; }
.slot-owner {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #2c4136;
  border-top: 1px dashed #c3d4ca;
  padding-top: var(--space-2);
  margin-top: var(--space-1);
}
.slot-warn {
  background: #fdf3e3;
  border-left: 3px solid #b06f18;
  padding: 10px 12px;
  border-radius: 3px;
  color: #6d4a13 !important;
}
.slot-hub { min-height: 210px; }
.slot-hero-shot { min-height: 300px; margin-bottom: var(--card-gap); }
.approval-layout { align-items: stretch; }
.approval-layout .slot { min-height: 210px; }
.approval-layout .approval-demo {
  min-height: 210px;
  margin-top: 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.approval-layout .human-card {
  min-height: 210px;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}
.human-lead {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
}
.slot-overlay {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(20, 22, 26, 0.88);
  color: #e6ece9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  padding: 7px 12px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 2;
}

/* --- pricing TODO banner --- */
.pricing-todo {
  max-width: 760px;
  margin: 0 auto var(--space-8);
  background: #fdf3e3;
  border: 1.5px dashed #b06f18;
  border-radius: var(--card-radius);
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: #6d4a13;
}
.pricing-todo strong {
  display: block;
  font-size: var(--fs-sm);
  color: #8a5a12;
  margin-bottom: 4px;
}

/* --- hero board mock --- */
.dash-open {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 11px;
}
.board-cols {
  display: grid;
  /* minmax(0,1fr) lets the tracks shrink past their content;
     without it the board forces the hero grid wider than the page. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}
.board-col {
  min-width: 0;
  background: var(--soft);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 250px;
}
.board-col .col-title {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
}
.board-col .col-title b { font-variant-numeric: tabular-nums; }
.tk {
  min-width: 0;
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 9px 10px;
}
.tk p { font-size: var(--fs-2xs); line-height: 1.5; color: var(--navy); margin: 0; }
.tk-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.who {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--soft);
  color: #0b7d57;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}
.due {
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}
.chip-now { background: #fdeceb; color: #b4362c; }
.chip-wait { background: var(--soft); color: #0b7d57; }

@media (prefers-reduced-motion: no-preference) {
  .tk-moving { animation: tk-lift 9s ease-in-out infinite; }
  @keyframes tk-lift {
    0%, 72%, 100% { transform: none; box-shadow: none; }
    78%, 94% { transform: translateY(-3px); box-shadow: 0 6px 14px -6px #163f2566; }
  }
}

@media (max-width: 800px) {
  .board-cols { grid-template-columns: 1fr; }
  .board-col { min-height: 0; }
  .slot-overlay { white-space: normal; width: calc(100% - 32px); text-align: center; }
  .slot-hero-shot { min-height: 220px; }
}

/* --- screenshot hover zoom ------------------------------------------
   The whole shot is the trigger: hovering lifts the card and eases the
   image up a little inside its frame; clicking opens #shot-dialog. It is a
   real <button> so it is reachable by keyboard, and every movement sits
   behind prefers-reduced-motion like the rest of this sheet.            */
.shot-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: inherit;
}
.shot-zoom img {
  display: block;
  width: 100%;
  height: auto;
}
.product-hero:has(.shot-zoom:focus-visible),
.product-tiles figure:has(.shot-zoom:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .product-hero,
  .product-tiles figure {
    transition:
      transform 0.28s ease,
      box-shadow 0.28s ease;
  }
  .shot-zoom img {
    transition: transform 0.38s ease;
  }
  .product-tiles figure:hover,
  .product-tiles figure:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px #16323f24;
  }
  .product-hero:hover,
  .product-hero:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 30px 70px #1e8a5229;
  }
  .shot-zoom:hover img,
  .shot-zoom:focus-visible img {
    transform: scale(1.035);
  }
}

.shot-dialog {
  width: min(1240px, calc(100% - 32px));
  padding: 22px 22px 18px;
}
.shot-dialog h2 {
  font-size: var(--fs-xl);
  margin: 0 32px 12px 0;
}
.shot-dialog img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.shot-dialog .shot-dialog-note {
  font-size: var(--fs-2xs);
  color: var(--muted);
  margin: 12px 0 0;
}
@media (max-width: 720px) {
  .shot-dialog {
    padding: 18px 14px 14px;
  }
}

/* ===================================================================
   Ambient backdrop, section banding, and viewport-aware rhythm.

   Three things that work together:

   1. A slow-drifting tint layer behind the whole page, so the
      background is alive without anything competing for attention.
      Pure CSS on purpose — the hero already loads a 692KB three.js
      scene, and that one is gated to desktop + WebGL2. This layer has
      to be free everywhere else, so it is two radial gradients moved
      by transform only (no layout, no paint of new pixels per frame).

   2. Alternating bands, because every section was transparent and the
      page read as one uninterrupted scroll. The bands are translucent
      so the drift still shows faintly through them.

   3. Section padding tied to viewport height instead of a flat 80px,
      so a short laptop screen does not lose 160px per section to dead
      space while a tall display still breathes.
   =================================================================== */

body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 22%, #10b77f14, transparent 62%),
    radial-gradient(44vmax 44vmax at 82% 68%, #0d7a9c12, transparent 64%);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ambient-drift {
    0% {
      transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
      transform: translate3d(2.4vmax, -1.8vmax, 0) scale(1.06);
    }
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
  body::before {
    animation: ambient-drift 48s ease-in-out infinite;
    will-change: transform;
  }
}

/* Bands. nth-child so the hero (1) stays clear and the rhythm starts
   at the first real section. */
main > section:nth-child(2n) {
  background: #eef8f3c9;
}
main > section:nth-child(2n) + section {
  background: #ffffffbf;
}
/* A real hairline, not a hint — the sections previously ran together with
   nothing marking the join at all. Uses the same --border token as every
   other divider on the page. */
main > section {
  border-top: 1px solid var(--border);
}
main > section:first-child {
  border-top: 0;
}

/* Rhythm. Clamped to viewport height so the fold stays sensible on a
   900px laptop and on a tall monitor. */
.section {
  padding-top: clamp(56px, 7.5vh, 96px);
  padding-bottom: clamp(56px, 7.5vh, 96px);
}
.section.section-major {
  padding-top: clamp(72px, 10vh, 128px);
  padding-bottom: clamp(64px, 8vh, 104px);
}
@media (max-width: 600px) {
  .section,
  .section.section-major {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

/* ---- 2026-10-14 polish ---- */
/* Pricing: the おすすめ badge sits 13px above its card, and .plans had no top
   margin, so the badge collided with the loopline note. */
#pricing .plans {
  margin-top: 40px;
}

/* Closing band goes dark so the page ends on one contrasting beat instead of
   thirteen near-identical pale bands. Cards stay white. */
main > section#contact.closing {
  background:
    radial-gradient(90% 80% at 80% 20%, #1f8a5a55 0%, #1f8a5a00 60%),
    linear-gradient(135deg, #0f3d2c 0%, #0b2e22 100%);
  border-top: 0;
}
#contact.closing > .container > .eyebrow { color: #7fe0b0; }
#contact.closing > .container > h2 { color: #fff; }
#contact.closing .loopline-light .ll-step { color: #d6efe3; }
#contact.closing .loopline-light .ll-step:not(:last-child)::after {
  background: linear-gradient(90deg, #2f6b52, #7fe0b0);
}
#contact.closing .ll-step i { background: #7fe0b0; }
#contact.closing .path { border-color: transparent; box-shadow: 0 16px 40px #0000004d; }
#contact.closing .paths { margin-top: 40px; }

/* Testimonial. Labelled 自社導入 on purpose: the speaker is our own CEO,
   and presenting him as a customer would be ステマ under 景品表示法. */
.voice .voice-card {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 48px;
  border: 1px solid #cfeadd;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px #1ba25d14;
}
.voice-card::before {
  content: "“";
  position: absolute;
  top: -14px;
  right: 36px;
  font-size: 96px;
  line-height: 1;
  color: #10b77f33;
  font-family: Georgia, serif;
}
.voice-tag {
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--blue);
}
.voice-card blockquote { margin: 0; }
.voice-card blockquote p {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.9;
  color: var(--navy);
  font-weight: 500;
}
.voice-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.voice-card figcaption span { color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 600px) {
  .voice .voice-card { padding: 32px 22px; }
  .voice-card blockquote p { font-size: var(--fs-base); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Snappier scroll reveal: shorter travel, shorter fade. */
  .reveal {
    transform: translateY(10px);
    transition:
      opacity 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Buttons: clearer lift on hover. */
  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px #1aa05b66;
  }
  .button.outline:hover {
    box-shadow: 0 8px 18px -8px #1aa05b55;
    border-color: #6fcf9c;
  }
  .button:active { transform: translateY(0); }

  /* おすすめ plan: a slow breathing glow pulls the eye without flashing. */
  .plan-featured { animation: plan-glow 4.5s ease-in-out infinite; }
  @keyframes plan-glow {
    0%, 100% { box-shadow: 0 16px 40px #1ba25d1a, 0 0 0 0 #10b77f00; }
    50% { box-shadow: 0 18px 46px #1ba25d2e, 0 0 0 4px #10b77f22; }
  }

  /* Phones get no 3D hero (hero-scene.js stops below 801px), so the moving
     card fills a progress bar instead. Pure CSS, nothing extra to download. */
  @media (max-width: 800px) {
    .tk-moving { position: relative; overflow: hidden; }
    .tk-moving::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      width: 100%;
      background: linear-gradient(90deg, #32de84, #10b77f);
      transform-origin: left;
      animation: tk-progress 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes tk-progress {
      0% { transform: scaleX(0); opacity: 1; }
      80% { transform: scaleX(1); opacity: 1; }
      100% { transform: scaleX(1); opacity: 0; }
    }
  }
}

/* Product names longer than ツタウ (e.g. Kanban AI) are wider; on small phones the header
   CTA wrapped to three lines. Keep it on one line and shrink the wordmark. */
@media (max-width: 420px) {
  .nav .button { white-space: nowrap; padding-inline: 10px; font-size: 11px; letter-spacing: 0; }
  .nav { gap: 8px; }
  .nav .logo-lockup:not(.logo-lockup-lg) { font-size: var(--fs-base); gap: 6px; }
}
@media (max-width: 359px) {
  .nav > .button { display: none; }
}