/* ─────────────────────────────────────────────────────────────
   飲食店向けの店舗管理システム LP（lp-v3）
   白ベース（2026-10-26 CEO「白色ベースがいいです」）: 面は白（#fff）と明るいグレー（#f5f5f7）の交互だけ。
   アプリと同じ家族（白い面・丸い部品・墨の丸薬ボタン・端末の書体・色付きの丸アイコン）。
   近未来感は暗さに頼らず白の上で作る: ごく薄い青灰の格子と細い線、冷たい青（シアン寄り）1色のアクセント、
   半透明の白いガラスのカード、走査の光の線、線が引かれる折れ線、等幅の数字、スクロールに連動した奥行き。
   光のにじみは最初の画面の1か所だけ・ごく薄く。動きは付け足しで、JS が無い・動きを減らす設定でも最後の状態で読める。
   ───────────────────────────────────────────────────────────── */

:root {
  --ink: #0D0D0D;          /* 明るい面の見出し・本文・主ボタン（アプリの墨） */
  --ink-2: #424245;
  --ink-3: #6E6E73;        /* 白地で 5.0:1 */
  --bg: #FFFFFF;
  --bg-2: #F5F5F7;
  --line: #E5E5E5;
  --link: #1F4666;

  --ink-4: #5A5A60;        /* ガラスのカードの補足（白 78% の面の上でも 4.5:1 以上） */
  --grid-line: rgba(60, 100, 150, .09);   /* ごく薄い青灰の格子 */
  --accent: #1AA3DB;       /* 冷たいアクセント（線・点・光にだけ使う。文字には使わない） */
  --accent-strong: #0B6FA8;/* アクセントの塗り（白い文字を乗せるとき。5.6:1） */
  --accent-soft: rgba(26, 163, 219, .14);

  /* アプリのサイドバーの色付きの丸（明るい面の章の小さな印にだけ使う） */
  --icon-orange: #C25E00;
  --icon-green: #2E8540;
  --icon-teal: #0F7C8A;
  --icon-blue: #1F6FD1;
  --icon-gray: #6E6E73;

  --warn-text: #9A5C00;
  --warn-bg: #F6EFE3;

  --font: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo UI", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --gutter: 16px;
  --maxw: 1200px;
  --radius-card: 24px;
  --radius-shot: 16px;
  --shadow-shot: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 48px -24px rgba(0, 0, 0, .22), 0 8px 16px -8px rgba(0, 0, 0, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) { :root { --gutter: 32px; --nav-h: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1rem; line-height: 1.8;
  line-break: strict; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: 1.0625rem; } }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.nb { display: inline-block; }   /* 句の途中で折り返さない */
.sp-only { display: inline; }
@media (min-width: 768px) { .sp-only { display: none; } }

/* ── 文字 ─────────────────────────────────── */

.display, .h2, .h3, .h4, .stat__value, .plan__price, .btn, .eyebrow, .brand, .glass__value {
  font-feature-settings: "palt" 1; text-wrap: balance;
}
.display { font-size: clamp(2.125rem, 8.2vw, 6rem); line-height: 1.08; letter-spacing: -0.02em; }
.h2 { font-size: clamp(2.125rem, 5.6vw, 4.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.h3 { font-size: clamp(1.625rem, 3.2vw, 2.5rem); line-height: 1.2; letter-spacing: -0.015em; }
.h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.35; letter-spacing: -0.01em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.sub { margin-top: 20px; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.75; color: var(--ink-2); max-width: 40em; }
.fine { font-size: 0.875rem; color: var(--ink-3); line-height: 1.6; }
.link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--icon-gray); }
.dot--accent { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dot--ok { background: var(--icon-green); width: 8px; height: 8px; }
.dot--green { background: var(--icon-green); }
.dot--orange { background: var(--icon-orange); }
.dot--blue { background: var(--icon-blue); }
.dot--teal { background: var(--icon-teal); }
.dot--gray { background: var(--icon-gray); }

/* 数字はすべて等幅の数字 */
.stat__value, .plan__price, .glass__value, .ticker, .steps__num, .scan__num { font-variant-numeric: tabular-nums; }

/* ── ボタン（明るい面は墨、暗い面は白の丸薬） ── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  transition: transform 120ms var(--ease), background-color 160ms var(--ease), box-shadow 200ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: #2A2A2C; }
.btn:active { transform: scale(.97); }
.btn--lg { min-height: 56px; padding: 0 36px; font-size: 1.0625rem; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
@media (min-width: 768px) { .btn--sm { font-size: 0.875rem; } }

.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.cta__note { font-size: 0.9375rem; color: var(--ink-3); margin: 0; text-align: center; }

/* ごく薄い格子（線だけ。発光させない） */
.grid-lines {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 75%);
}
.grid-lines--soft { opacity: .7; }

/* ── 上のナビ（iOS 26 のタブバーのようなガラスの帯。下へ進むと縮み、上へ戻すと広がる） ── */

.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); pointer-events: none; }
.nav__inner {
  pointer-events: auto;
  height: var(--nav-h); max-width: 100%; margin: 0 auto;
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  display: flex; align-items: center; gap: 24px;
  --gr: 0px; --ga: .66; --gb: 20px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0);
  transition: max-width 520ms var(--ease), height 420ms var(--ease), margin 420ms var(--ease), border-radius 420ms var(--ease), padding 420ms var(--ease), box-shadow 300ms var(--ease);
}
.nav__inner.glass { --gr: 0px; --ga: .7; --gb: 20px; position: relative; box-shadow: none; }
.nav__inner.glass::before { opacity: .6; }
.nav__inner.glass::after { opacity: 0; transition: opacity 300ms var(--ease); }
.nav.is-scrolled .nav__inner { box-shadow: 0 1px 0 rgba(0, 0, 0, .07); }
/* 縮んだ形: 角の丸い浮いたガラスの帯 */
.nav.is-compact .nav__inner.glass::after { opacity: 1; }
.nav.is-compact .nav__inner {
  --gr: 999px; --ga: .5;
  max-width: min(760px, calc(100% - 24px)); height: 52px; margin-top: 8px; padding-inline: 20px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(20, 40, 70, .10), 0 0 0 .5px rgba(20, 40, 70, .14), 0 18px 40px -16px rgba(20, 45, 85, .35);
}
.nav.is-compact .nav__links { gap: 18px; }
/* ロゴ: 小さな印（棒グラフ3本。いちばん高い棒だけ冷たい青）＋「オートボード」＋小さく AutoBoard。屋号はフッターに「提供」として添える（2026-10-27 CEO） */
.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; white-space: nowrap; min-height: 44px; }
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__text { display: grid; line-height: 1.1; }
.brand__name { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink); }
.brand__by { font-size: 0.6875rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-3); margin-top: 2px; }
.nav.is-compact .brand__by { display: none; }     /* 縮んだ帯では名前だけ */
.nav.is-compact .brand__mark { width: 24px; height: 24px; }
.eyebrow__name { font-weight: 700; color: var(--ink); margin-right: 8px; padding-right: 10px; border-right: 1px solid rgba(20, 40, 70, .2); }
.footer__sub { display: block; font-weight: 400; font-size: 0.875rem; color: var(--ink-3); margin-top: 2px; }
.nav__links { display: none; gap: 24px; font-size: 0.875rem; }
.nav__links a { text-decoration: none; color: var(--ink-2); padding: 8px 0; }
.nav__links a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav__links { display: flex; } }
@media (max-width: 599px) { .nav.is-compact .nav__inner { padding-inline: 16px 6px; } }

/* ページ上部の極細の進み具合の線 */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--accent-strong); transform-origin: left; transform: scaleX(var(--sp, 0)); }
html:not(.js) .progress { display: none; }

/* 右端の章の点（PC のみ） */
.chapnav { display: none; }
@media (min-width: 1200px) {
  .js .chapnav {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; right: 18px; top: 50%; z-index: 45; transform: translateY(-50%);
    opacity: var(--cn, 0); transition: opacity 300ms var(--ease);
  }
  .chapnav a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; text-decoration: none; }
  .chapnav a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(20, 40, 70, .28); transition: transform 200ms var(--ease), background-color 200ms var(--ease); }
  .chapnav a.is-on::before { background: var(--accent-strong); transform: scale(1.45); }
  .chapnav a span {
    position: absolute; right: 34px; top: 50%; translate: 0 -50%; white-space: nowrap;
    font-size: 0.8125rem; font-weight: 600; color: var(--ink); padding: 4px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 .5px rgba(20, 40, 70, .14), 0 8px 18px -10px rgba(20, 45, 85, .4);
    opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease);
  }
  .chapnav a:hover span, .chapnav a:focus-visible span { opacity: 1; }
}

/* ── 最初の画面 ───────────────────────────────
   主役は1枚（PC・タブレットはダッシュボードのホーム、スマホはスマホのホームの上半分を大きく）。
   端末の枠は使わず、厚みのある1枚のパネルとして浮かせ、その上にガラスのカードを重ねる。
   読み込み時に1回だけ: 文字が順にせり上がり、画面が奥から起き上がり、カードが手前に出る。 */

.hero { position: relative; isolation: isolate; padding-top: calc(var(--nav-h) + 28px); overflow: hidden; background: var(--bg); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* 線が引かれる折れ線（来客数の実績と目安の形）。画面のパネルの後ろ、下の縁から少しのぞく */
.hero__chart { position: absolute; z-index: -1; left: -14%; right: -8%; bottom: -24%; width: 122%; height: 30%; opacity: .6; pointer-events: none; }
@media (max-width: 599px) { .hero__chart { bottom: -6%; height: 24%; } }
.hero__chart path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.hero__chart-act { stroke: var(--accent); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero__chart-fc { stroke: var(--accent); stroke-width: 1.25; stroke-dasharray: .012 .012; opacity: .8; }
.js:not(.reduce) .hero__chart-act { stroke-dashoffset: 1; }
.js:not(.reduce) .hero.is-loaded .hero__chart-act { animation: draw 2.4s var(--ease) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.is-offscreen .ticker__track { animation-play-state: paused !important; }

.hero__inner {
  width: 100%; max-width: calc(1280px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: 36px; text-align: center;
}
.hero__title { color: var(--ink); font-size: clamp(2.375rem, 10vw, 4.25rem); line-height: 1.06; letter-spacing: -0.03em; }
.lead { margin: 18px auto 0; max-width: 34em; font-size: clamp(1.0625rem, 1.9vw, 1.3125rem); line-height: 1.75; color: var(--ink-2); }
.hero__text .cta { margin-top: 26px; gap: 10px; }
.hero__note { margin: 40px auto 0; text-align: center; }

.hero__stage { position: relative; }
/* 光のにじみ（ページの中でここだけ） */
.hero__glow {
  position: absolute; left: 6%; right: 6%; top: 8%; bottom: 4%; z-index: -1;
  background: radial-gradient(ellipse at 50% 45%, rgba(26, 163, 219, .16), rgba(26, 163, 219, 0) 68%);
  filter: blur(40px);
}
/* 画面は厚みのある1枚のパネル: 細い縁＋白い縁取り（厚み）＋柔らかい影 */
.screen {
  position: relative; border-radius: 18px; overflow: hidden; background: #F2F2F6;
  box-shadow:
    0 0 0 1px rgba(20, 40, 70, .12),
    0 0 0 8px #fff,
    0 0 0 9px rgba(20, 40, 70, .09),
    0 60px 110px -40px rgba(20, 45, 85, .38),
    0 20px 40px -18px rgba(20, 45, 85, .18);
}
.screen::after {   /* 上から差す光の反射（ごく薄く） */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 26%);
}
.screen img { width: 100%; }
/* A: 止まっている間は変形しない（画面の文字をくっきり見せる）。スクロールで少し大きくなる */
.js:not(.reduce) .hero__stage .screen { transform: scale(calc(1 + var(--hp, 0) * .05)); transform-origin: 30% 30%; }

@media (min-width: 600px) {
  .hero { padding-top: calc(var(--nav-h) + 64px); }
  .hero__inner { gap: 56px; }
  .hero__title { font-size: clamp(3.5rem, 8vw, 5rem); }
}
/* PC: 文字は左、画面は右へ大きく（右端は画面の外まで続く） */
@media (min-width: 1100px) {
  .hero { padding-top: calc(var(--nav-h) + 56px); }
  .hero__inner { max-width: calc(var(--maxw) + var(--gutter) * 2); grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); align-items: center; gap: 40px; text-align: left; min-height: calc(100svh - var(--nav-h) - 170px); }
  .hero__text .cta { align-items: flex-start; }
  .hero__text .cta__note { text-align: left; }
  .lead { margin-left: 0; }
  .hero__title { font-size: clamp(3.25rem, 4.2vw, 4.25rem); }
  .hero__stage { perspective: 2000px; }
  /* 画面は右の端まで（画面の外の分だけ広げる） */
  .hero__stage .screen { width: calc(100% + var(--gutter) + max(0px, (100vw - var(--maxw) - var(--gutter) * 2) / 2)); border-radius: 20px 0 0 20px; }
  .hero__note { text-align: left; }
}

/* 最初の画面のガラスのカード（画面の縁にまたがせ、後ろの画面が透けるように置く。数字は画面に写っている値だけ） */
.hero__stage .glass {
  position: absolute; z-index: 2; text-align: left;
  min-width: 176px; padding: 14px 18px 16px; --gr: 22px; --ga: .34; --gb: 7px;
  /* A: スクロールで奥行きの差（視差）をつけて、画面から離れていく */
  transform: translate3d(calc(var(--hp, 0) * var(--dx, 0) * 1px), calc(var(--hp, 0) * var(--depth, 1) * -90px), 0);
  will-change: transform;
}
.hero__stage .glass p { text-shadow: 0 0 10px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .9); }
.glass__label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8125rem; color: var(--ink-2); font-weight: 600; }
.glass__value { margin: 2px 0 0; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.glass__value small { font-size: .5em; font-weight: 600; margin: 0 .08em; color: var(--ink-2); }
.glass__value--sm { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
.glass__sub { margin: 4px 0 0; font-size: 0.8125rem; color: var(--ink-4); }
.hero__stage .glass--3 { box-shadow: inset 3px 0 0 var(--icon-green), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(20, 40, 70, .10), 0 0 0 .5px rgba(20, 40, 70, .12), 0 22px 44px -18px rgba(20, 45, 85, .32); }
/* カードは画面の縁にかけて置き、画面の中の主な数字（売上・利益）は隠さない */
@media (max-width: 599px) {   /* スマホ: 期間の切り替え・売上のカードは隠さない。1枚は上の縁（題名の右の空き）、1枚は下の縁（途中で切れた利益のカードの上）に */
  .hero__stage { padding-top: 44px; padding-bottom: 60px; }
  .hero__stage .glass { min-width: 0; padding: 10px 14px 12px; border-radius: 16px; }
  .glass__value { font-size: 1.625rem; }
  .glass__value--sm { font-size: 1.375rem; }
  .hero__stage .glass--1 { width: 33%; right: -1%; top: 0; padding: 9px 12px 10px; }
  .glass--1 .glass__sub { display: none; }
  .glass--2 { display: none; }
  .hero__stage .glass--3 { width: 64%; right: -1%; bottom: 0; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .glass--1 { right: 3%; top: -6%; }
  .glass--2 { right: 3%; bottom: -7%; }
  .glass--3 { left: -2%; bottom: 14%; }
}
@media (min-width: 1100px) {
  .glass--1 { right: 4%; top: -7%; }
  .glass--2 { right: 16%; bottom: -9%; }
  .glass--3 { left: -9%; top: 50%; }
}

/* 読み込み時に1回だけの演出（JS が hero に is-loaded を付ける。JS が無い・動きを減らす設定では最初から最後の姿） */
.js:not(.reduce) .hero .intro {
  opacity: 0; translate: 0 22px;
  transition: opacity 900ms var(--ease), translate 900ms var(--ease), scale 900ms var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js:not(.reduce) .hero .intro--screen {
  translate: 0 60px; scale: .96; rotate: x 9deg;   /* 読み込み時に、奥へ倒れた画面が起き上がる */
  transition-property: opacity, translate, scale, rotate;
  transition-duration: 1400ms; transition-delay: 360ms;
}
.js:not(.reduce) .hero .intro--glass { translate: 0 28px; scale: .94; transition-duration: 900ms; transition-delay: calc(700ms + var(--i, 0) * 120ms); }
.js:not(.reduce) .hero.is-loaded .intro { opacity: 1; translate: 0 0; scale: 1; rotate: x 0deg; }
.js:not(.reduce) .hero__stage { perspective: 2000px; }


/* ── Liquid Glass（iOS 26 のガラス風。浮かぶ小さな部品だけに使う。主役の画面と本文は不透明のまま） ──
   基本（全ブラウザ）: すりガラス＋白の半透明の面＋縁の反射光＋上側の光沢＋柔らかい外の影。
   屈折（Chrome 系だけ）: site.js が .glass--refract を付け、SVG の feDisplacementMap で縁だけ後ろが曲がって透ける。
   光沢の位置は --mx/--my（PC はカーソル、スマホはスクロール）で動く。 */
.glass {
  --gr: 18px; --ga: .44; --gb: 16px;
  position: relative; isolation: isolate;
  border-radius: var(--gr);
  background: rgba(255, 255, 255, var(--ga));
  -webkit-backdrop-filter: blur(var(--gb)) saturate(1.7) brightness(1.04);
  backdrop-filter: blur(var(--gb)) saturate(1.7) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(20, 40, 70, .10),
    0 0 0 .5px rgba(20, 40, 70, .14),
    0 22px 44px -18px rgba(20, 45, 85, .32),
    0 6px 14px -8px rgba(20, 45, 85, .16);
  color: var(--ink);
}
.glass::before {   /* 上側のやわらかい光沢（位置が動く） */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(130% 95% at var(--mx, 22%) var(--my, -10%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 56%),
    linear-gradient(135deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .16));
}
.glass::after {    /* 縁の反射光（上と左は明るく、下と右は淡く） */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass--refract {
  /* 屈折のあとに、いつものぼかしを重ねる（url() が効かない環境でも、ぼかしは必ず残る） */
  -webkit-backdrop-filter: url(#lg-refract) blur(var(--gb)) saturate(1.7) brightness(1.04);
  backdrop-filter: url(#lg-refract) blur(var(--gb)) saturate(1.7) brightness(1.04);
}
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 255, 255, .94); } }
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--refract { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass::before { display: none; }
}
.check { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--icon-green); position: relative; }
.check::after { content: ""; position: absolute; left: 5px; top: 3.5px; width: 4px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg); }
.chap { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-strong); margin-right: 4px; letter-spacing: .02em; }

/* E: 章の見出しが、スクロールで1文字ずつ濃くなる（最後は必ず墨の濃さ） */
.wr .ch { opacity: clamp(.16, calc((var(--wp, 1) * (var(--n, 10) + 4) - var(--i, 0)) / 4), 1); }

/* 数字のティッカー（画面に写っている数字だけ） */
.ticker {
  margin-top: 72px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@media (max-width: 767px) { .ticker { margin-top: 88px; } }
.ticker__track { display: inline-flex; }
.ticker__list { display: inline-flex; gap: 40px; padding: 16px 20px; }
.ticker__list li { display: inline-flex; align-items: baseline; gap: 10px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.ticker__list li span { font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.ticker__list li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-left: 30px; align-self: center; }
.ticker__list[aria-hidden="true"] { display: none; }
.js:not(.reduce) .ticker__list[aria-hidden="true"] { display: inline-flex; }
.js:not(.reduce) .ticker__track { animation: ticker 48s linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 動かない環境では、折り返して全部を見せる */
html:not(.js) .ticker, .reduce .ticker { white-space: normal; -webkit-mask-image: none; mask-image: none; }
html:not(.js) .ticker__list, .reduce .ticker__list { flex-wrap: wrap; justify-content: center; gap: 8px 28px; }

.trust-band {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  padding-top: 28px; padding-bottom: 72px;
  font-size: 0.9375rem; font-weight: 600; color: var(--ink-2);
}
.trust-band li { display: inline-flex; align-items: center; gap: 8px; }
.trust-band li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--icon-green); }
@media (max-width: 599px) { .trust-band { flex-direction: column; align-items: flex-start; width: fit-content; padding-bottom: 56px; } }

/* ── 端末の枠 ─────────────────────────────── */

/* 画面写真の枠: 窓の飾り（上のバー・3つの丸）は付けない。角丸・細い縁・柔らかい影だけ */
.win { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 40, 70, .10), 0 30px 64px -30px rgba(20, 45, 85, .32), 0 10px 22px -12px rgba(20, 45, 85, .12); }

.phone { background: #1D1D1F; border-radius: 18% / 8.6%; padding: 3.2%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 30px 60px -20px rgba(0, 0, 0, .35); }
.phone__screen { position: relative; border-radius: 14% / 6.6%; overflow: hidden; background: #F2F2F6; padding-top: 13%; }
.phone__screen::before { content: ""; position: absolute; top: 3.6%; left: 50%; transform: translateX(-50%); width: 32%; height: 0; padding-top: 9%; border-radius: 999px; background: #1D1D1F; }
.phone__screen picture, .phone__screen img { width: 100%; }
.pad { background: #1D1D1F; border-radius: 28px; padding: 2.2%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 34px 70px -28px rgba(0, 0, 0, .35); }
.pad__screen { border-radius: 14px; overflow: hidden; background: #fff; }
@media (max-width: 599px) { .pad { border-radius: 18px; } .pad__screen { border-radius: 9px; } }
.card-shot { position: relative; border-radius: var(--radius-shot); overflow: hidden; background: #fff; box-shadow: var(--shadow-shot); }
.paper { position: relative; border-radius: 6px; overflow: hidden; background: #FBFAF6; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 40px -18px rgba(0, 0, 0, .30); }

/* ── 章 ──────────────────────────────────── */

.chapter { padding: 96px 0; overflow-x: clip; }   /* 画面の外で待つ伝票・横に流れる帯がはみ出さないように（clip なので sticky は効く） */
@media (min-width: 768px) { .chapter { padding: 144px 0; } }
.chapter--gray { background: var(--bg-2); }
.chapter__head { text-align: center; }
.chapter__head .sub { margin-inline: auto; }
.chapter__head + * { margin-top: 56px; }
@media (min-width: 768px) { .chapter__head + * { margin-top: 80px; } }

.note-line { margin-top: 40px; text-align: center; color: var(--ink-3); font-size: 0.9375rem; }

.split { display: grid; gap: 40px; align-items: center; margin-top: 96px; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.15fr; gap: 64px; margin-top: 144px; }
  .split--media-left { grid-template-columns: 1.15fr 1fr; }
  .split--media-left .split__media { order: -1; }
}
.split__text p { color: var(--ink-2); }
.split__text .h3 { margin-bottom: 20px; }
.chapter__head + .split { margin-top: 56px; }
.wide-shot { max-width: calc(840px + var(--gutter) * 2); }   /* 中の画像の元の大きさ（840px 相当）より大きく見せない */
.wide-shot figcaption { margin-top: 20px; text-align: center; }

/* ── 01 AI: 伝票の読み取り（場面 B。区画の中で画面を固定し、スクロールで4段が進む） ──
   JS が無い・動きを減らす設定では、最後の姿（伝票と読み取り結果を並べ、4段の説明を全部）で静止する。 */

.scan__steps { display: grid; gap: 26px; }
.scan__step { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
.scan__num { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; border: 1px solid rgba(20, 40, 70, .22); color: var(--ink); font-weight: 600; font-size: 0.9375rem; background: #fff; }
.scan__step h3 { font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.scan__step p { color: var(--ink-2); margin: 4px 0 0; }

.sceneB__sticky { display: grid; gap: 40px; }
.sceneB__count, .sceneB__ticks { display: none; }
.sceneB__stage { position: relative; display: grid; gap: 28px; align-items: center; }
@media (min-width: 640px) { .sceneB__stage { grid-template-columns: .8fr 1fr; } }
@media (min-width: 1000px) { .sceneB__sticky { grid-template-columns: 1fr 1.5fr; align-items: center; gap: 48px; } }
.sceneB__slip { position: relative; max-width: 420px; margin-inline: auto; width: 100%; }
.sceneB__paper { position: relative; }
.sceneB__paper img { width: 100%; filter: drop-shadow(0 0 0 transparent); }
.sceneB__beam, .sceneB__frame, .sceneB__pill, .sceneB__chips { display: none; }
.sceneB__result { position: relative; }
.sceneB__match { position: absolute; left: 4%; top: -18px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; --gr: 999px; --ga: .62; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.sceneB__match b { font-variant-numeric: tabular-nums; margin-left: 4px; }
/* ガラスの後ろに置く、ごく淡いにじみ（ページで2か所目。冷たい青の1色） */
.sceneB__glow { position: absolute; inset: 10% 8%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 45% 50%, rgba(26, 163, 219, .14), rgba(26, 163, 219, 0) 66%); filter: blur(30px); }

/* 動きのある版 */
.js:not(.reduce) .sceneB { height: 300vh; height: 300svh; }
.js:not(.reduce) .sceneB__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: calc(var(--nav-h) + 12px); padding-bottom: 16px; align-items: center; }
.js:not(.reduce) .sceneB__count { display: flex; align-items: baseline; gap: 2px; margin: 0 0 10px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem; color: var(--accent-strong); }
.js:not(.reduce) .sceneB__of { color: var(--ink-3); font-weight: 600; font-size: 0.9375rem; }
.js:not(.reduce) .sceneB__ticks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 24px; max-width: 220px; }
.js:not(.reduce) .sceneB__ticks li { height: 3px; border-radius: 3px; background: rgba(20, 40, 70, .14); transition: background-color 240ms var(--ease); }
.js:not(.reduce) .sceneB__ticks li.is-on { background: var(--accent-strong); }
.js:not(.reduce) .scan__step { opacity: .4; transition: opacity 280ms var(--ease); }
.js:not(.reduce) .scan__step.is-on { opacity: 1; }
.js:not(.reduce) .scan__step.is-on .scan__num { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

.js:not(.reduce) .sceneB__stage { display: block; width: min(100%, 720px); margin-inline: auto; height: min(78svh, 680px); }
.js:not(.reduce) .sceneB__slip, .js:not(.reduce) .sceneB__result { position: absolute; left: 50%; top: 50%; margin: 0; }
.js:not(.reduce) .sceneB__slip { width: min(62%, calc(78svh * .62)); max-width: none; z-index: 2;
  /* ①画面の外から入ってくる（--e） → ③左へ小さく寄る（--m） */
  transform:
    translate(calc(-50% + (1 - var(--e, 1)) * 70% + var(--m, 0) * -46%), calc(-50% + (1 - var(--e, 1)) * 45% + var(--m, 0) * 4%))
    rotate(calc((1 - var(--e, 1)) * 12deg + var(--m, 0) * -5deg))
    scale(calc(1 - var(--m, 0) * .46));
  opacity: calc(.2 + var(--e, 1) * .8);
  will-change: transform;
}
.js:not(.reduce) .sceneB__result { width: 80%; z-index: 1;
  transform: translate(calc(-50% + 14% + (1 - var(--m, 1)) * 36%), -50%) scale(calc(.94 + var(--m, 1) * .06));
  opacity: var(--m, 1);
  will-change: transform, opacity;
}
.js:not(.reduce) .sceneB__match { opacity: var(--k, 1); transform: translateY(calc((1 - var(--k, 1)) * 10px)) scale(calc(.92 + var(--k, 1) * .08)); }
/* ②走査の光の線（上から下へ） */
.js:not(.reduce) .sceneB__beam {
  display: block; position: absolute; left: 6%; right: 9%; height: 7%;
  top: calc((26 + var(--b, 0) * 27) * 1% - 7%);
  background: linear-gradient(rgba(26, 163, 219, 0), rgba(26, 163, 219, .16));
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 6px 16px -6px rgba(26, 163, 219, .6);
  opacity: var(--bo, 0); pointer-events: none;
}
/* ①カメラの枠（四隅の鉤）と、ガラスの札 */
.js:not(.reduce) .sceneB__frame {
  display: block; position: absolute; inset: -4% -5%; pointer-events: none;
  opacity: calc(clamp(0, var(--e, 0) * 2 - 1, 1) * (1 - var(--m, 0)));
  transform: scale(calc(1.06 - clamp(0, var(--e, 0) * 2 - 1, 1) * .06));
}
.sceneB__frame i { position: absolute; width: 34px; height: 34px; border: 3px solid #fff; filter: drop-shadow(0 1px 3px rgba(20, 45, 85, .45)); }
.sceneB__frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.sceneB__frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.sceneB__frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.sceneB__frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.js:not(.reduce) .sceneB__pill {
  display: block; position: absolute; left: 50%; top: -11%; --gr: 999px; --ga: .55;
  padding: 7px 16px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  opacity: calc(clamp(0, var(--e, 0) * 2 - 1, 1) * (1 - var(--m, 0)));
  transform: translateX(-50%);
}
/* ②読み取った行のガラスのチップ（光の線が通った行から1つずつ出る） */
.js:not(.reduce) .sceneB__chips { display: block; position: absolute; inset: 0; margin: 0; padding: 0; pointer-events: none; }
/* 行の高さ（--y）は伝票の画像の中の位置。チップは伝票の右に、重ならない間隔で縦に積む */
.sceneB__chips .chip {
  --on: clamp(0, calc((26 + var(--b, 0) * 27 - var(--y)) / 1.4 + 1), 1);
  position: absolute; left: 62%; top: calc((22 + var(--i) * 8.2) * 1%);
  display: flex; align-items: baseline; gap: 10px; padding: 5px 12px; --gr: 999px; --ga: .62; --gb: 10px;
  font-size: 0.8125rem; white-space: nowrap;
  opacity: calc(var(--on) * clamp(0, 1 - var(--m, 0) * 2.2, 1));
  transform: translate(calc((1 - var(--on)) * 14px), -50%);
}
.sceneB__chips .chip b { font-weight: 600; }
.sceneB__chips .chip span { font-variant-numeric: tabular-nums; font-weight: 700; }
.sceneB__chips .chip::before { --mx: 30%; }

@media (max-width: 999px) {
  .js:not(.reduce) .sceneB { height: 260vh; height: 260svh; }
  .js:not(.reduce) .sceneB__sticky { grid-template-rows: 1fr auto; gap: 8px; padding-bottom: calc(84px + var(--safe-b)); }
  .js:not(.reduce) .sceneB__stage { order: -1; height: min(56svh, 520px); }
  .js:not(.reduce) .sceneB__slip { width: min(64%, calc(56svh * .64)); }
  .js:not(.reduce) .sceneB__result { width: 92%; transform: translate(calc(-50% + 4% + (1 - var(--m, 1)) * 30%), calc(-50% + 8%)) scale(calc(.94 + var(--m, 1) * .06)); }
  .js:not(.reduce) .sceneB__slip { transform:
    translate(calc(-50% + (1 - var(--e, 1)) * 70% + var(--m, 0) * -40%), calc(-50% + (1 - var(--e, 1)) * 45% + var(--m, 0) * 42%))
    rotate(calc((1 - var(--e, 1)) * 12deg + var(--m, 0) * -6deg)) scale(calc(1 - var(--m, 0) * .55)); }
  .sceneB__chips .chip { font-size: 0.8125rem; padding: 3px 9px; gap: 6px; left: 44%; top: calc((24 + var(--i) * 9) * 1%); }
  .js:not(.reduce) .sceneB__count { margin: 0 0 4px; font-size: 1.0625rem; }
  .js:not(.reduce) .sceneB__ticks { margin: 0 0 10px; }
  .js:not(.reduce) .scan__steps { display: grid; min-height: 7.4em; }
  .js:not(.reduce) .scan__step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease), visibility 0s 240ms; }
  .js:not(.reduce) .scan__step.is-on { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease); }
}

/* お会計の伝票: 同じ型の短い場面（--q は見えている間の進み具合。JS が無いと 1） */
.sales__media { position: relative; padding: 0 0 0 14%; }
@media (min-width: 900px) { .split.sales { grid-template-columns: 1fr 1.4fr; gap: 48px; } }
.sales__slip { position: absolute; left: -2%; top: -12%; width: 44%; z-index: 2;
  transform: translate(calc((1 - var(--q, 1)) * -30%), calc((1 - var(--q, 1)) * 20%)) rotate(calc(-3deg - (1 - var(--q, 1)) * 8deg));
  opacity: calc(.3 + var(--q, 1) * .7);
}
.sales__slip img { width: 100%; }
.sales__beam { display: none; }
.js:not(.reduce) .sales__beam { display: block; position: absolute; left: 8%; right: 8%; height: 6%; top: calc((20 + var(--sb, 0) * 66) * 1% - 6%); background: linear-gradient(rgba(26, 163, 219, 0), rgba(26, 163, 219, .16)); border-bottom: 2px solid var(--accent); opacity: var(--sbo, 0); pointer-events: none; }
.sales__win { position: relative; z-index: 1; transform: translateY(calc((1 - var(--sr, 1)) * 40px)); opacity: calc(.15 + var(--sr, 1) * .85); }
.sales__badge { position: absolute; right: 4%; bottom: -22px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; --gr: 999px; --ga: .6; font-size: 0.875rem; font-weight: 600; white-space: nowrap; opacity: var(--sk, 1); transform: translateY(calc((1 - var(--sk, 1)) * 10px)); }
@media (max-width: 899px) { .sales__media { padding: 14% 0 0 12%; } .sales__slip { top: 0; width: 46%; } .sales__badge { font-size: 0.8125rem; } }

/* ── データ分析 ───────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; }
@media (max-width: 599px) { .stats { grid-template-columns: 1fr; gap: 28px; } }
.stat { padding: 8px 0; }
@media (min-width: 600px) { .stat + .stat { border-left: 1px solid var(--line); } }
.stat__label { font-size: 0.9375rem; color: var(--ink-3); margin: 0 0 6px; font-weight: 600; }
.stat__value { margin: 0; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.stat__value small { font-size: .42em; font-weight: 600; letter-spacing: 0; margin: 0 .08em; }
.stats__note { text-align: center; margin-top: 20px; }

/* 場面 C: ダッシュボードを固定し、ガラスの吹き出しが順に出る（PC）。スマホ・静止の環境では、吹き出しは画面の下に並ぶ */
.sceneC { margin-top: 96px; }
.sceneC__sticky { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .sceneC__sticky { grid-template-columns: .72fr 1.28fr; gap: 48px; } }
.sceneC__text .h3 { margin-bottom: 24px; }
.sceneC__list { display: grid; gap: 14px; margin-bottom: 20px; counter-reset: c; }
.sceneC__list li { position: relative; padding: 14px 16px 14px 48px; border-radius: 16px; color: var(--ink-2); background: var(--bg-2); transition: background-color 280ms var(--ease), box-shadow 280ms var(--ease); }
.sceneC__list li::before { counter-increment: c; content: counter(c); position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; color: #fff; background: var(--accent-strong); font-variant-numeric: tabular-nums; }
.sceneC__list b { display: block; color: var(--ink); font-size: 1.0625rem; }
.sceneC__shot { position: relative; }
.sceneC__shot img { width: 100%; }
.sceneC__ring { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); border-radius: 14px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(26, 163, 219, .16); opacity: .9; pointer-events: none; }
.sceneC__tip { display: grid; gap: 0; margin: 0; padding: 10px 14px 12px; --gr: 16px; --ga: .6; }
.sceneC__tip span { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.sceneC__tip b { font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sceneC__tip small { font-size: 0.8125rem; color: var(--ink-4); }
/* 静止・スマホ: 吹き出しは画面の下に並べる */
.sceneC__media { display: grid; gap: 12px; }
.sceneC__media .sceneC__tip { position: static; }
.sceneC__shot > .sceneC__tip { display: none; }

.js:not(.reduce) .sceneC.is-pinned { height: 240vh; }
.js:not(.reduce) .sceneC.is-pinned .sceneC__sticky { position: sticky; top: 0; height: 100vh; padding-top: calc(var(--nav-h) + 12px); }
.js:not(.reduce) .sceneC.is-pinned .sceneC__shot > .sceneC__tip { display: grid; position: absolute; left: calc(var(--tx) * 1%); top: calc(var(--ty) * 1%); z-index: 2; min-width: 200px; opacity: 0; transform: translateY(12px) scale(.96); transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.js:not(.reduce) .sceneC.is-pinned .sceneC__shot > .sceneC__tip.is-on { opacity: 1; transform: none; }
.js:not(.reduce) .sceneC.is-pinned .sceneC__ring { opacity: 0; transform: scale(1.03); transition: opacity 360ms var(--ease), transform 420ms var(--ease); }
.js:not(.reduce) .sceneC.is-pinned .sceneC__ring.is-on { opacity: .95; transform: none; }
.js:not(.reduce) .sceneC.is-pinned .sceneC__list li { opacity: .55; }
.js:not(.reduce) .sceneC.is-pinned .sceneC__list li.is-on { opacity: 1; background: #fff; box-shadow: 0 0 0 1px rgba(20, 40, 70, .1), 0 12px 28px -16px rgba(20, 45, 85, .35); }
.js:not(.reduce) .sceneC.is-pinned .sceneC__list li.is-past { opacity: .85; }

/* 横に流れる帯 D: 静止・スマホは自分で横にスワイプ（縦のスクロールは奪わない）。PC は固定した区画の中で横へ */
.hband { margin-top: 120px; }
.hband__head { margin-bottom: 28px; }
.hband__track {
  display: flex; gap: 20px; margin: 0; padding: 8px var(--gutter) 28px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
@media (min-width: 1000px) { .hband__track { padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2)); } }
.hcard { flex: 0 0 min(84vw, 600px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 20px; padding: 28px 24px 0; border-radius: var(--radius-card); background: var(--bg-2); overflow: hidden; }
.hcard__text p { color: var(--ink-2); margin: 8px 0 0; }
.hcard__shot { margin-top: auto; margin-right: -24px; border-radius: 14px 0 0 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); max-height: 400px; }
.hcard__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.hcard__shot--tall { max-height: 360px; }
.hband__hint { margin-top: -8px; }
@media (min-width: 1000px) { .hband__hint { display: none; } }

.js:not(.reduce) .hband.is-pinned { height: var(--hh, 200vh); }
.js:not(.reduce) .hband.is-pinned .hband__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); }
.js:not(.reduce) .hband.is-pinned .hband__track { overflow: visible; scroll-snap-type: none; transform: translateX(calc(var(--hpx, 0) * -1px)); will-change: transform; }
.js:not(.reduce) .hband.is-pinned .hcard { flex-basis: 600px; }

/* 予測: スクロールに合わせて、グラフが左（実績）から右（目安と幅）へ現れる（白い覆いが右へ退く） */
.forecast { margin-top: 120px; }
@media (min-width: 900px) { .split.forecast { grid-template-columns: .8fr 1.2fr; gap: 56px; } }
.forecast__shot { position: relative; }
.forecast__wipe { position: absolute; left: 6%; right: 1%; top: 21%; bottom: 21%; background: #fff; transform-origin: 100% 50%; transform: scaleX(calc(1 - var(--q, 1))); pointer-events: none; }
.tile__label { margin: 0 0 8px; font-size: 0.875rem; font-weight: 600; color: var(--icon-blue); }
/* 発注の下書き: 表の右下に、できた発注の文を少し重ねる（スマホは重ねずに縦に並べる） */
.orders__media { display: grid; gap: 16px; }
.orders__draft { width: 72%; justify-self: end; }
@media (min-width: 900px) {
  .orders__media { gap: 0; }
  .orders__draft { width: 62%; margin-top: -14%; position: relative; }
}
.tile__honest { font-size: 0.9375rem; padding: 14px 16px; background: var(--bg-2); border-radius: 14px; border-left: 3px solid var(--icon-blue); color: var(--ink-2); }

/* ── 中ほどの呼びかけ ──────────────────────── */

.band { padding: 88px 0; }
.band__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.band__text { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; margin: 0; font-feature-settings: "palt" 1; }

/* ── AI 相談 ─────────────────────────────── */

.sendlist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
@media (max-width: 479px) { .sendlist { grid-template-columns: 1fr; } }
.sendlist__col { background: var(--bg-2); border-radius: 18px; padding: 20px; }
.sendlist__head { font-weight: 700; color: var(--ink) !important; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.sendlist__head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--icon-green); }
.sendlist__col--no .sendlist__head::before { background: #D93A30; }
.sendlist li { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; padding: 6px 0; border-top: 1px solid var(--line); }
.sendlist li:first-child { border-top: 0; }
.sendlist__col--no li { color: var(--ink); }

/* ── お客様（1章） ───────────────────────── */

.customers { margin-top: 0; }
.h3--chapter { font-size: clamp(2rem, 4.2vw, 3.25rem); margin-bottom: 28px !important; }
.facts { display: grid; gap: 22px; }
.facts li { color: var(--ink-2); padding-left: 18px; border-left: 2px solid var(--line); }
.facts strong { display: block; color: var(--ink); font-size: 1.125rem; line-height: 1.45; margin-bottom: 4px; font-feature-settings: "palt" 1; }
.tag { display: inline-block; font-size: 0.8125rem; font-weight: 600; padding: 0 10px; border-radius: 999px; line-height: 1.8; margin: 0 2px; }
.tag--warn { color: var(--warn-text); background: var(--warn-bg); box-shadow: inset 0 0 0 1px rgba(154, 92, 0, .24); }

/* ── 現場 ─────────────────────────────────── */

.devices { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 20px; align-items: end; }
.devices__pad { grid-column: 1 / -1; }
.devices__phone .phone { width: 86%; margin-inline: auto; }
.devices figcaption { margin-top: 20px; text-align: center; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.devices figcaption strong { display: block; color: var(--ink); font-size: 1.0625rem; }
@media (min-width: 900px) { .devices { grid-template-columns: 2.6fr 1fr 1fr; gap: 40px; } .devices__pad { grid-column: auto; } .devices__phone .phone { width: 100%; } }
.shifts { margin-top: 120px; }

/* ── データの扱い ─────────────────────────── */

.trust { display: grid; gap: 48px; }
@media (min-width: 900px) { .trust { grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; } .trust__head { position: sticky; top: calc(var(--nav-h) + 48px); } }
.trust .h2 { font-size: clamp(2.125rem, 4.6vw, 3.75rem); }
.trust__head .sub { margin-bottom: 20px; }
.rows { margin: 0; }
.row { display: grid; gap: 4px; padding: 24px 0; border-top: 1px solid #DCDCE0; }
.row:last-child { border-bottom: 1px solid #DCDCE0; }
@media (min-width: 600px) { .row { grid-template-columns: 13em 1fr; gap: 24px; } }
.row dt { font-weight: 700; font-size: 1.0625rem; font-feature-settings: "palt" 1; color: var(--ink); }
.row dd { margin: 0; color: var(--ink-2); }

/* ── 料金 ─────────────────────────────────── */

.plans { display: grid; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }   /* free・mini・pro・カスタム（2026-10-27） */
.plan { background: var(--bg-2); border-radius: var(--radius-card); padding: 32px 28px; }
.plan__name { font-size: 1.25rem; font-weight: 700; color: var(--ink-2); }
.plan__price { margin: 10px 0 4px; font-size: 1.125rem; font-weight: 600; }
.plan__yen { font-size: clamp(2.75rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-right: 2px; }
.plan__price small { font-size: 0.875rem; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.plan__for { color: var(--ink-3); font-size: 0.9375rem; margin-bottom: 20px; }
.plan__rows { margin: 0; }
.plan__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.plan__rows dt { color: var(--ink-2); }
.plan__rows dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.plan__rows dd span { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--ink-3); }
.plan--custom { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.plan__price--ask { font-size: 1.25rem; font-weight: 700; margin: 18px 0 12px; }
.plans__foot { margin-top: 48px; display: grid; gap: 40px; }
@media (min-width: 900px) { .plans__foot { grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; } }
.plans__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (min-width: 900px) { .plans__cta { align-items: flex-start; } .plans__cta .cta__note { text-align: left; } }
.terms-list { display: grid; gap: 10px; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.7; }
.terms-list li { padding-left: 16px; position: relative; }
.terms-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }

/* ── 使い始め ─────────────────────────────── */

.steps { display: grid; gap: 40px; position: relative; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.steps__item { position: relative; }
.steps__num { display: block; font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin-bottom: 20px; }
.steps__item::after {
  content: ""; position: absolute; top: clamp(1.75rem, 3vw, 2.5rem); left: 4.2rem; right: 0; height: 1px; background: var(--line);
  transform-origin: left; transform: scaleX(var(--grow, 1)); transition: transform 900ms var(--ease);
}
.js:not(.reduce) .steps:not(.is-in) .steps__item::after { --grow: 0; }
.steps__item p { color: var(--ink-2); margin-top: 8px; }

/* ── よくある質問 ─────────────────────────── */

.faq { max-width: calc(820px + var(--gutter) * 2); }
.faq details { border-top: 1px solid #D9D9DC; }
.faq details:last-child { border-bottom: 1px solid #D9D9DC; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5; font-feature-settings: "palt" 1; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq details p { color: var(--ink-2); padding: 0 0 24px; max-width: 44em; }

/* ── 最後の呼びかけ ───────────────────────── */

.final { position: relative; isolation: isolate; padding: 128px 0 136px; text-align: center; overflow: hidden; }
@media (min-width: 768px) { .final { padding: 200px 0; } }
.final__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.display--final { font-size: clamp(2.25rem, 6.4vw, 5rem); }
.final .cta__note { line-height: 1.8; }
/* G: 近づくと、主ボタンがガラスの枠の中で少し大きくなる */
.cta-glass { display: inline-flex; padding: 10px; --gr: 999px; --ga: .36; transform: scale(calc(.94 + var(--cp, 1) * .06)); }
.final__glow { position: absolute; left: 50%; top: 55%; width: 560px; height: 260px; translate: -50% -50%; z-index: -1; background: radial-gradient(ellipse, rgba(26, 163, 219, .14), rgba(26, 163, 219, 0) 68%); filter: blur(24px); pointer-events: none; }

/* ── フッター ─────────────────────────────── */

.footer { background: var(--bg); padding: 48px 0 calc(56px + var(--safe-b)); border-top: 1px solid var(--line); }
@media (max-width: 899px) { .footer { padding-bottom: calc(120px + var(--safe-b)); } }
.footer__inner { display: grid; gap: 16px; }
.footer__brand { font-weight: 700; margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 0.9375rem; }
.footer__links a { color: var(--ink-2); text-decoration: none; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; }
.footer .fine { margin: 0; }

/* ── スマホで下に固定する申込みボタン ─────── */

.dock { display: none; }
@media (max-width: 899px) {
  .js .dock {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--gutter) calc(10px + var(--safe-b));
    --gr: 22px 22px 0 0; --ga: .72;
    transform: translateY(110%); transition: transform 320ms var(--ease);
  }
  .js .dock.is-on { transform: none; }
  .dock__btn { flex: 1; min-height: 52px; }
  .dock__note { margin: 0; flex: none; max-width: 7.5em; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-3); }
}
@media (prefers-reduced-transparency: reduce) { .dock { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }

/* ── 見えた段がふわっと出る（1回だけ） ─────── */

.js:not(.reduce) [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.js:not(.reduce) [data-reveal="rise"] { transform: translateY(56px) scale(.97); transition-duration: 1000ms; }
.js:not(.reduce) [data-reveal].is-in { opacity: 1; transform: none; }

/* ── 画面をタップで大きく見る ─────────────── */

.zoomable { cursor: zoom-in; }
.zoom { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; background: var(--bg-2); }
.zoom::backdrop { background: rgba(13, 13, 13, .32); }
.zoom__scroll { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 72px 12px 24px; }
.zoom__scroll img { width: auto; max-width: none; height: auto; margin-inline: auto; border-radius: 10px; box-shadow: var(--shadow-shot); }
.zoom__close { position: fixed; top: 12px; right: 12px; z-index: 2; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* ── 文書のページ（特商法・プライバシー・利用規約） ── */

.doc { padding: calc(var(--nav-h) + 56px) 0 96px; }
.doc__inner { max-width: calc(820px + var(--gutter) * 2); }
.doc h1 { font-size: clamp(1.875rem, 4.4vw, 2.75rem); line-height: 1.25; letter-spacing: -0.015em; font-feature-settings: "palt" 1; text-wrap: balance; margin-bottom: 20px; }
.doc h2 { font-size: 1.25rem; line-height: 1.5; margin: 48px 0 12px; font-feature-settings: "palt" 1; }
.doc p, .doc li { color: var(--ink-2); }
.doc ol { list-style: decimal; padding-left: 1.6em; display: grid; gap: 8px; }
.doc ul { list-style: disc; padding-left: 1.4em; display: grid; gap: 8px; }
.doc li { min-width: 0; }   /* 表を横に送れる入れ物が、行の幅を押し広げないように */
.doc .doc__meta { color: var(--ink-3); font-size: 0.9375rem; margin-top: 40px; }
.doc .table-scroll { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.doc th, .doc td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: top; }
.doc .grid-table th { white-space: nowrap; background: var(--bg-2); font-weight: 600; }
.doc .grid-table td { white-space: nowrap; }
.doc .kv { border-top: 1px solid var(--line); }
.doc .kv > tbody > tr > th { width: 12em; color: var(--ink); font-weight: 700; }
.doc .kv { table-layout: fixed; margin-top: 24px; }
@media (max-width: 599px) {
  .doc .kv, .doc .kv > tbody, .doc .kv > tbody > tr { display: block; }
  .doc .kv > tbody > tr { border-bottom: 1px solid var(--line); }
  .doc .kv > tbody > tr > th, .doc .kv > tbody > tr > td { display: block; width: auto; border-bottom: 0; }
  .doc .kv > tbody > tr > th { border-bottom: 0; padding-bottom: 0; }
}
.doc .kv > tbody > tr > td { color: var(--ink-2); }
.doc .kv .grid-table { margin: 12px 0; }
.doc a { color: var(--link); }


/* ── 画像が届くまでの代わり（LQIP: 幅16px の画像をぼかして敷く。届いた画像がその上に描かれる） ── */
picture { display: block; }
picture.lq { background: var(--lq) center / cover no-repeat; }
picture.lq img { background: transparent; }