/* 報告してから直るまで: スクロールしている間は画面を止め（sticky）、段階の文字と右の図だけが切り替わる */
.how { background: var(--ink); }
.how-track { position: relative; height: calc(100svh + var(--steps, 4) * 70svh); }
.how-pin { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; overflow: hidden; }
.flow { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.flow-text .lead { margin-top: 18px; }
.flow-steps { margin-top: 32px; border-top: 1px solid rgba(245,245,243,.14); }
.flow-step { display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; width: 100%; text-align: left; padding: 16px 0; border-bottom: 1px solid rgba(245,245,243,.14); color: var(--on-dark-3); position: relative; cursor: pointer; transition: color .4s var(--ease); }
.flow-step .num { padding-top: 3px; color: inherit; }
.flow-step-t { font-size: 15.5px; font-weight: 500; letter-spacing: .04em; }
.flow-step-b { grid-column: 2; font-size: 13.5px; line-height: 1.9; color: var(--on-dark-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease); }
.flow-step:hover, .flow-step.is-on { color: var(--on-dark); }
.flow-step.is-on .flow-step-b { max-height: 8em; opacity: 1; margin-top: 6px; }
/* 段階の中でどこまで進んだか（スクロールの量に合わせて伸びる） */
.flow-bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--on-dark); transform: scaleX(0); transform-origin: left; }
.flow-step.is-on .flow-bar { transform: scaleX(var(--p, 0)); }
.flow-step.is-done .flow-bar { transform: scaleX(1); opacity: .35; }
.flow-plan { background: var(--alt); color: #2B2C30; border-radius: var(--r-lg); padding: clamp(14px, 2vw, 22px); }
.flow-plan-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--mute); padding: 2px 4px 12px; }
.flow-plan-head b { font-weight: 500; color: var(--text); }
.flow-plan figcaption { font-size: 11px; color: var(--mute); padding: 10px 4px 0; }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 18px; }
  .flow-plan { order: -1; padding: 10px; }
  .flow-plan-head { padding-bottom: 8px; }
  .flow-plan figcaption { display: none; }
  .flow-text { display: contents; }
  .flow-text .label { order: -3; } .flow-text .h { order: -2; }
  .flow-text .lead { display: none; }
  .how .h-xl { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .flow-steps { margin-top: 0; }
  .flow-step { padding: 11px 0; }
  .flow-step-b { font-size: 13px; line-height: 1.8; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .how .label { display: none; }
}
/* 動きを減らす設定では止めずに、普通の並びで見せる（段階は押して切り替える） */
@media (prefers-reduced-motion: reduce) {
  .how-track { height: auto; }
  .how-pin { position: static; height: auto; padding-block: var(--sec-y); }
  .flow-step-b, .flow-step { transition: none; }
}

/* 使ってみる */
.try-in { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.try .lead { margin-top: 18px; max-width: 36em; }
.try .cta-row { margin-top: 32px; }
.try-list { border-top: 1px solid rgba(245,245,243,.14); }
.try-list li { display: grid; grid-template-columns: 40px 1fr; padding: 16px 0; border-bottom: 1px solid rgba(245,245,243,.14); font-size: 14px; line-height: 1.9; color: var(--on-dark-2); }
.try-list .num { padding-top: 2px; }
@media (max-width: 900px) { .try-in { grid-template-columns: 1fr; } }

/* 記録のしかた（手で撮る／車に載せる）: 2枚のカード */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mode { background: var(--white); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.mode .photo { border-radius: 0; }
/* 写真の代わりに、黒地にスマホの画面だけを浮かべる（画面の中は実景の写真）。コントラストで目を引く */
.stage { position: relative; aspect-ratio: 4 / 3; background: var(--ink); overflow: hidden; margin: 0; }
.dev { position: absolute; background: #000; border-radius: 9% / 4.2%; padding: 2.4%; box-shadow: 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.06); }
.stage--portrait .dev { top: 6%; height: 88%; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 19.5; border-radius: 15% / 7%; padding: 1.4%; }
.stage--landscape .dev { left: 10%; width: 80%; top: 50%; transform: translateY(-50%); aspect-ratio: 19.5 / 9; border-radius: 7% / 15%; padding: 1.4%; }
.dev-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12% / 5.6%; background: #1A1B1E; }
.stage--landscape .dev-screen { border-radius: 5.6% / 12%; }
.dev-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stage .dd-box { opacity: 1; transform: none; border-color: #fff; }
.stage .dd-tag { background: #fff; color: var(--ink); }
.stage--landscape .dd-box { border-color: var(--warn); }
.stage--landscape .dd-tag { background: var(--warn); color: #fff; }
.dev-chip { position: absolute; left: 8%; right: 8%; bottom: 5%; text-align: center; font-size: 10px; letter-spacing: .02em; color: #fff;
  background: rgba(11,12,14,.6); padding: 6px 8px; border-radius: var(--pill); white-space: nowrap; }
.stage-cap { position: absolute; right: 16px; bottom: 12px; font-size: 11px; color: rgba(255,255,255,.52); }
.js .mode.wait .dd-box { opacity: 0; transform: scale(1.18); }
.js .mode.wait.in .dd-box { opacity: 1; transform: none; transition: opacity .5s var(--ease) .5s, transform .7s var(--ease) .5s; }
@media (prefers-reduced-motion: reduce) { .js .mode.wait .dd-box { opacity: 1; transform: none; } }
.mode-body { padding: clamp(24px, 3.2vw, 40px); display: flex; flex-direction: column; flex: 1; }
.mode-tag { display: flex; align-items: baseline; gap: 12px; font-size: 13px; letter-spacing: .12em; color: var(--mute); margin-bottom: 14px; }
.mode-tag .num { font-size: 12px; }
.mode h3 { margin-bottom: 12px; }
.mode-body > p:not(.mode-tag):not(.mode-for) { font-size: 14.5px; line-height: 2; color: var(--mute); }
.mode-for { padding-top: 14px; font-size: 13px; color: var(--text); }
.mode-for b { font-weight: 600; margin-right: .6em; }

/* 車に載せたとき: 画面の見本と、走った道に沿って記録が増える様子 */
.drive { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 24px; }
.drive-demo { position: relative; }
.dd-phone { background: #0B0C0E; border-radius: 34px; padding: 12px; box-sizing: border-box; }
.dd-screen { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: #1A1B1E; }
.dd-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-box { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px solid var(--warn); border-radius: 6px;
  opacity: 0; transform: scale(1.18); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.dd-tag { position: absolute; left: -2px; bottom: calc(100% + 6px); white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: #fff; background: var(--warn); padding: 2px 8px; border-radius: 4px; }
.dd-rec { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .08em; color: #fff;
  background: rgba(11,12,14,.55); padding: 4px 10px 4px 9px; border-radius: var(--pill); }
.dd-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: dd-blink 1.6s ease-in-out infinite; }
@keyframes dd-blink { 50% { opacity: .25; } }
.dd-route { margin-top: 18px; width: 100%; height: auto; display: block; color: #2B2C30; font-family: var(--mono); overflow: visible; }
.dd-route text { font-size: 9px; letter-spacing: .06em; fill: currentColor; }
.dd-route .rd-walk { fill: none; stroke: currentColor; stroke-width: .75; opacity: .4; }
.dd-route .rd-edge { fill: none; stroke: currentColor; stroke-width: 1.3; }
.dd-route .rd-center { fill: none; stroke: currentColor; stroke-width: .9; stroke-dasharray: 8 6; opacity: .6; }
.dd-route .rd-scale path { fill: none; stroke: currentColor; stroke-width: .75; opacity: .6; }
.dd-route .rd-scale text { font-size: 8px; opacity: .7; }
.dd-route .rd-car rect, .dd-route .rd-car path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.dd-route .rt { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.dd-route .pin { opacity: 0; transition: opacity .35s var(--ease); }
.dd-route .pin circle { fill: var(--warn); }
.dd-route .pin-lead { fill: none; stroke: currentColor; stroke-width: .6; opacity: .5; stroke-dasharray: 2 2; }
.dd-route .pin text { font-size: 8.5px; font-weight: 600; }
.drive-demo.play .dd-box { opacity: 1; transform: none; transition-delay: .6s; }
.drive-demo.play .dd-route .rt { stroke-dashoffset: 0; }
.drive-demo.play .dd-route .pin { opacity: 1; }
.drive-demo .cap { margin-top: 10px; font-size: 11px; color: var(--mute); display: flex; justify-content: space-between; gap: 12px; }
.drive-demo .cap span:last-child { white-space: nowrap; }
.drive-note a { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: var(--accent); }
.drive-steps { counter-reset: dstep; }
.drive-steps li { padding: 20px 0; border-top: 1px solid var(--line); }
.drive-steps li:last-child { border-bottom: 1px solid var(--line); }
.drive-steps .num { display: block; margin-bottom: 6px; }
.drive-steps h4 { font-size: 15.5px; font-weight: 600; margin-bottom: 6px; }
.drive-steps p { font-size: 14px; line-height: 1.95; color: var(--mute); }
.drive-note { margin-top: 18px; font-size: 12.5px; line-height: 1.9; color: var(--mute); display: flex; gap: 10px; }
.drive-note .caution-mark { flex: none; width: 20px; height: 20px; font-size: 11px; }

@media (max-width: 900px) {
  .modes, .drive { grid-template-columns: 1fr; }
  .dd-phone { border-radius: 26px; padding: 8px; }
  .dd-screen { border-radius: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-box, .dd-route .rt, .dd-route .pin { transition: none; }
  .dd-box { opacity: 1; transform: none; }
  .dd-route .rt { stroke-dashoffset: 0; }
  .dd-route .pin { opacity: 1; }
  .dd-rec::before { animation: none; }
}

/* 最初の写真: 道路の穴と注釈（画像に描き込み済み）が右寄りなので、狭い画面では右を残して切る */
.hero-michi .bg img { object-position: 90% 50%; }