/* ─────────────────────────────────────────────
   QuuMo トップページ専用（home.css）
   コンセプト: 「人の流れが、数字になる。」
   - ヒーロー: 店を斜め上から見た図。点＝人が、通り・入口・棚の前の 3 か所（iPhone を 1 台ずつ）で数えられ、その場で数字が増える。
     隣に QuuMo Data の実画面（データは架空）を置く。
   - その後は 1 つの舞台（.h-stage）。並びはヒーローと同じ（文字＝左の列、絵＝右の列）。右の列に留まる、枠も地も無い見えない窓の中で、
     同じ点の群れが、本文の進みに合わせて姿を変える:
     数えられていない人たち（ヒーローと同じ店の床。iPhone を置く前）→ 3 つの製品 → 線を越える → ダッシュボード（点が実画面の棒と同じ形に並び、
     実画面に入れ替わる）→ 3 つの流れの合流 → 3 ステップ → 開発中の AI インサイトの例（暗い章）→ 料金（ヒーローと同じ店の床の輪郭と iPhone。
     3 台の例の行では 3 台）→ ひとつの点（あなた）。窓は料金の終わりでスクロールとともに去り、問い合わせのボタンの横の点（YOU）に続く。
   - 幅 1180px 未満では窓を留めない。同じ絵を、場面ごとに本文の流れの中へ 1 枚ずつ置く（.h-fig・JS が作る）。
   - 窓や絵は、舞台を描けたとき（html に h-stage-ok が付いたとき）だけ出す。描けないときは本文だけで読める。
   - 本文（.h-panel）は普通に流れる DOM。舞台は飾り（aria-hidden）で、スクロールは乗っ取らない（sticky と位置の読み取りだけ）。
   - 実画面（.h-shot）は QuuMo Data の実際の画面（データは架空）。ヒーロー・ダッシュボードの場面・Counter の節（棚前ゾーン）の 3 か所。

   色（デザインシステム）
   - IN＝緑 #1FB877 / OUT＝橙 #FF6200（製品と同じ値。定義は home.js の ORANGE の 1 か所。橙は面積 5% まで。OUT の直後の人と札の OUT だけ。実画面の中の橙は 1 画面の 1% 未満）。青 #2E7DF6 は「あなた／外部」。
   - 黄 #FFD23F は、このサイト限定の強調色（2026-10-02 オーナー決定）。使いどころは 3 つだけ:
     ①見出しの中の 1 語に引くマーカー ②図の中の「ピーク・合計」の点や数字 ③ページ最後の問い合わせの場面の地色（全面はここ 1 か所）。
     文字色には使わない（暗い地の上の強調を除く）。黄の地に載せる文字は墨 #181410 だけ（コントラスト比 12.69:1）。
   変数（--ink など）と AI チャットのボタンは style.css の定義を使う。クラスは h- で始める。
───────────────────────────────────────────── */

:root {
  --h-pad: clamp(20px, 4.4vw, 64px);
  --h-max: 1360px;
  --h-street: #F3E7D3;
  --h-rule: rgba(24, 20, 16, .14);
  --h-ease: cubic-bezier(.2, .8, .2, 1);
  --h-ease-io: cubic-bezier(.65, 0, .35, 1);
  --h-nav: 72px;
  --h-text: #3A342C; /* 本文（クリーム地で 10:1 以上） */
  --h-sub: #5C5548;  /* 補足 */
  --gut: max(var(--h-pad), calc((100vw - var(--h-max)) / 2 + var(--h-pad)));
}

html { scroll-behavior: auto; scroll-padding-top: 84px; }
.h-body { background: var(--cream); color: var(--ink); overflow-x: clip; font-feature-settings: "palt" 1; text-rendering: optimizeLegibility; }
.h-body ::selection { background: var(--ink); color: var(--cream); }
.h-wrap { max-width: var(--h-max); margin: 0 auto; padding: 0 var(--h-pad); }
.h-skip { position: absolute; left: 12px; top: -80px; z-index: 1000; background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.h-skip:focus { top: 12px; }
.h-body a:focus-visible, .h-body button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 6px; }

/* ── 共通の部品 ── */
.h-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--h-sub); }
.h-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.h-pip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); flex: none; }
.h-pip--in { background: var(--green); animation: h-blink 1.8s ease-in-out infinite; }
@keyframes h-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.h-h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 6.6vw, 104px); line-height: 1.08; letter-spacing: -.035em; }
.h-line { display: block; overflow: hidden; padding: .04em 0 .1em; margin-bottom: -.1em; }
.h-line > span { display: inline-block; white-space: nowrap; }
.h-br-m { display: none; }
.h-nb { white-space: nowrap; }

/* 見出しの中の数字 ＝ カウンターの桁 */
.h-num { display: inline-block; font-style: normal; font-family: var(--font-display); font-weight: 900; font-size: .84em; line-height: 1; background: var(--ink); color: var(--cream); border-radius: .16em; padding: .1em .2em .12em; margin: 0 .08em 0 0; letter-spacing: 0; vertical-align: .06em; }
.h-mark { background: none; color: inherit; background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-position: 0 86%; background-size: 100% .34em; }


/* ボタン */
.h-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate; transition: color .35s var(--h-ease), transform .35s var(--h-ease); }
.h-btn::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--green); transform: translateY(101%); transition: transform .45s var(--h-ease); z-index: -1; }
.h-btn i { font-style: normal; display: inline-block; transition: transform .35s var(--h-ease); }
.h-btn:hover i { transform: translateX(5px); }
.h-btn:hover::before { transform: none; }
.h-btn:active { transform: scale(.98); }
.h-btn--ink { background: var(--ink); color: var(--cream); }
.h-btn--ink:hover { color: var(--ink); }
.h-btn--line { background: transparent; color: var(--ink); }
.h-btn--line::before { background: var(--ink); }
.h-btn--line:hover { color: var(--cream); }
.h-btn--lg { height: 60px; padding: 0 30px; font-size: 16px; }
.h-btn--xl { height: clamp(68px, 7vw, 92px); padding: 0 clamp(28px, 3.4vw, 52px); font-size: clamp(18px, 1.8vw, 24px); }
.h-btn--block { width: 100%; }
.h-fallback { font-size: 13px; line-height: 1.8; color: var(--h-sub); margin-top: 14px; }
.h-fallback a { color: var(--ink); text-underline-offset: 3px; }
.h-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--ink); color: var(--cream); }
.h-live--dark { background: rgba(255, 247, 236, .1); }

.h-body p, .h-body li, .h-body h3 { word-break: auto-phrase; }
.h-hero__lead, .h-panel p { font-weight: 500; }

/* ── 出現の動き（JS が動くときだけ隠す。失敗時は 3.5 秒で全表示） ── */
.js [data-rise] { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--h-ease), transform .7s var(--h-ease); transition-delay: var(--d, 0s); }
.js [data-rise].is-in { opacity: 1; transform: none; }
.js.h-failsafe [data-rise] { opacity: 1; transform: none; }

/* ───────────── NAV ───────────── */
.h-nav { position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--h-nav); transition: transform .5s var(--h-ease), background-color .3s, box-shadow .3s; }
.h-nav.is-solid { background: rgba(255, 247, 236, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--h-rule); }
.h-nav.is-hidden { transform: translateY(-100%); }
.h-nav__in { max-width: var(--h-max); height: 100%; margin: 0 auto; padding: 0 var(--h-pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.h-nav__logo { display: block; padding: 8px 0; }
.h-nav__logo svg { height: 24px; width: auto; fill: var(--ink); }
.h-nav__links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); font-size: 14px; font-weight: 700; }
.h-nav__links > a:not(.h-btn) { position: relative; text-decoration: none; padding: 8px 0; }
.h-nav__links > a:not(.h-btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--h-ease); }
.h-nav__links > a:not(.h-btn):hover::after { transform: scaleX(1); transform-origin: left; }
.h-nav__n { font-family: var(--font-display); font-size: 10px; font-weight: 900; color: var(--h-sub); margin-right: 6px; vertical-align: .3em; }
.h-nav__event { font-family: var(--font-display); }
.h-nav__cta { height: 44px; padding: 0 20px; font-size: 14px; }
.h-nav__toggle { display: none; }

/* ───────────── HERO ─────────────
   左＝見出しと導線、右＝店を斜め上から見た図（通り・入口・棚の前の 3 か所で数える）と、QuuMo Data の実画面。
   図は囲わない（クリームの地に、床の白と壁の線だけで場所を作る）。色は墨・緑・白・青（あなた）。
   1180px 未満は 1 列: 見出し → 図 → 数字 → 本文 → ボタン → 実画面。 */
.h-hero { position: relative; background: var(--cream); overflow: clip; }
.h-hero__in { max-width: var(--h-max); margin: 0 auto; padding: calc(var(--h-nav) + clamp(20px, 4.4svh, 44px)) var(--h-pad) clamp(28px, 4svh, 44px);
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(40px, 4.6vw, 68px); align-items: start; }
.h-hero__eye { grid-column: 1; grid-row: 1; margin-top: 10px; }
.h-hero__title { grid-column: 1; grid-row: 2; margin-top: 18px; font-family: var(--font-display); font-weight: 900; font-size: clamp(46px, 4.2vw, 60px); line-height: 1.15; letter-spacing: -.03em; }
.h-hero__lead { grid-column: 1; grid-row: 3; margin-top: 22px; font-size: 16px; line-height: 1.8; color: var(--h-text); }
.h-hero__cta { grid-column: 1; grid-row: 4; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.h-hero__cta .h-btn--lg { padding: 0 26px; }
.h-hero__note { grid-column: 1; grid-row: 5; margin-top: 26px; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--h-sub); }
.h-hero__note > p:first-child { display: flex; align-items: flex-start; gap: 10px; }
.h-hero__note .h-live { flex: none; }
.h-hero__note-live, .h-demo-on .h-hero__note-still { display: none; }
.h-demo-on .h-hero__note-live { display: inline; }
.h-hero__hint { display: none; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--h-text); }
.h-hero__hint::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); flex: none; }
.h-demo-on .h-hero__hint--mouse { display: flex; }
@media (hover: none) { .h-demo-on .h-hero__hint--mouse { display: none; } .h-demo-on .h-hero__hint--touch { display: flex; } }
.h-hero__you { margin-left: 6px; color: #1C5FD0; }

/* 図 */
.h-shop { grid-column: 2; grid-row: 1 / -1; position: relative; padding-bottom: 184px; }
.h-shop__scene { position: relative; aspect-ratio: 800 / 520; touch-action: pan-y; }
.h-shop__svg, .h-shop__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-shop__svg { overflow: visible; }
.h-shop__canvas { display: none; pointer-events: none; }
.h-demo-on .h-shop__canvas { display: block; }
.h-demo-on .h-shop__still { display: none; }
.hs-street { fill: url(#hs-street); }
.hs-floor { fill: #fff; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.hs-wall { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.hs-zone { fill: rgba(31, 184, 119, .1); stroke: var(--green); stroke-width: 1.5; stroke-linejoin: round; }
.hs-line-in { stroke: var(--green); stroke-width: 4; stroke-dasharray: 10 7; }
.hs-line-pass { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 6; }
.hs-box { fill: #fff; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.hs-hair { stroke: var(--ink); stroke-width: 1; opacity: .32; }
.hs-front { fill: var(--ink); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.hs-post { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.hs-ph .hs-no { fill: var(--ink); }
.hs-no__t { font: 700 9px var(--font-mono); fill: var(--cream); }
.hs-wedge { fill: rgba(31, 184, 119, .1); }
.hs-p ellipse, .hs-ph ellipse { fill: rgba(24, 20, 16, .15); }
.hs-p line { stroke-width: 2.6; stroke-linecap: round; }
.hs-p--out line { stroke: var(--ink); } .hs-p--out circle { fill: var(--ink); }
.hs-p--in line { stroke: var(--green); } .hs-p--in circle { fill: var(--green); }
.hs-ph line { stroke: var(--ink); stroke-width: 2.6; }
.hs-ph rect { fill: var(--ink); } .hs-ph circle { fill: var(--green); }

/* 3 か所の数字の札。図の上辺に横 1 列に並べる（図の中には置かない。どの札がどの iPhone かは、番号 01〜03 で結ぶ） */
.h-shop { display: flex; flex-direction: column; }
.h-pts { order: -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 6px; padding: 0; list-style: none; }
.h-pt { display: flex; flex-wrap: wrap; align-items: center; column-gap: 7px; min-height: 64px; padding: 8px 13px 9px 11px; border: 1.5px solid var(--ink); border-radius: 12px; background: #fff; white-space: nowrap; }
.h-pt--zone .h-pt__l { flex: 1 1 60%; }
.h-pt--zone .h-pt__v { flex: 0 0 auto; }
.h-pt--zone .h-pt__s { flex: 1 1 auto; align-self: flex-end; margin: 0 0 4px 4px; }
.h-pt__n { font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 99px; background: var(--ink); color: var(--cream); }
.h-pt__l { font-family: var(--font-display); font-size: 12px; font-weight: 900; letter-spacing: .02em; }
.h-pt__v { flex: 0 0 100%; display: flex; align-items: baseline; gap: 12px; margin-top: 3px; font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 1.1; font-feature-settings: "tnum" 1; }
.h-pt__v b { display: inline-block; font-weight: 900; min-width: 1.2em; }
.h-pt--in .h-pt__v { font-size: 32px; }
.h-pt__io { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.h-pt__io b { font-family: var(--font-display); font-size: 32px; letter-spacing: 0; }
.h-pt__io--in { color: #0B7A4A; }
.h-pt__io--out { color: #B04A06; }
.h-pt__s { flex: 0 0 100%; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--h-sub); }
.h-pt__s b { font-weight: 700; }
.h-pt b.is-tick { animation: h-tick .08s linear; }
@keyframes h-tick { 0% { transform: translateY(.22em); } 100% { transform: none; } }
.h-shop__foot { position: absolute; right: 0; bottom: 132px; max-width: calc(100% - 444px); display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; color: var(--h-sub); }
.h-shop__foot i { flex: none; width: 8px; height: 15px; border-radius: 2.5px; background: var(--ink); }

/* QuuMo Data の実画面（平らなカード。傾けない）。.h-shot は共通の部品（ヒーローと、舞台のダッシュボードの場面で使う） */
.h-shot { margin: 0; border: 1px solid var(--ink); border-radius: 12px; background: #151515; overflow: hidden; }
.h-shot__bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px; background: #fff; border-bottom: 1px solid var(--ink); }
.h-shot__bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(24, 20, 16, .3); }
.h-shot__bar span { margin-left: 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.h-shot img { display: block; width: 100%; height: auto; }
.h-shot figcaption { padding: 7px 11px 8px; background: #fff; border-top: 1px solid var(--ink); font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.h-shot figcaption span { color: var(--h-sub); white-space: nowrap; }
.h-hero__dash { grid-column: 2; grid-row: 1 / -1; align-self: end; justify-self: start; position: relative; z-index: 2; width: min(100%, 420px); }
/* 公開デモ（demo.quumo.tokyo・ログイン不要・データは架空）へのリンク。実画面の説明の右端・Data の節・問い合わせの帯の 3 か所 */
.h-shot__try { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 2px; }
.h-shot__try a { color: var(--ink); font-weight: 900; white-space: nowrap; text-underline-offset: 3px; }
.h-shot__try i, .h-contact__try i { font-style: normal; margin-left: 4px; }
.h-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 読み上げだけに出す文（「新しいタブで開きます」） */
.h-try { margin-top: 24px; }
.h-try__note { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--sub); }
.h-contact__try { grid-column: 1 / -1; margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.8; color: var(--ink); }
.h-contact__try a { color: var(--ink); text-underline-offset: 3px; }

/* 出現: 札 3 枚 → 実画面の順（JS に頼らない。動きを減らす設定では出したまま） */
@media (prefers-reduced-motion: no-preference) {
  .h-pt, .h-hero__dash { animation: h-pop .5s var(--h-ease) both; }
  .h-pt--pass { animation-delay: .25s; } .h-pt--in { animation-delay: .35s; } .h-pt--zone { animation-delay: .45s; }
  .h-hero__dash { animation-delay: .65s; }
}
@keyframes h-pop { 0% { opacity: 0; translate: 0 10px; } 100% { opacity: 1; translate: 0 0; } }

/* ── スクロールの現在地（青い点＝あなた） ── */
.h-you { position: fixed; right: 22px; top: 50%; z-index: 70; display: none; flex-direction: column; align-items: center; gap: 10px; transform: translateY(-50%); color: #8C8579; pointer-events: none; opacity: 0; transition: opacity .4s; }
.h-you.is-on { opacity: 1; }
.h-you__rail { position: relative; display: block; width: 2px; height: 150px; border-radius: 2px; background: repeating-linear-gradient(currentColor 0 4px, transparent 4px 9px); }
.h-you__dot { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(46, 125, 246, .22); }
.h-you__n { font-family: var(--font-mono); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; }
@media (min-width: 1180px) { .h-you { display: flex; } }

/* ── 要点の行（ヒーローの底辺に敷く 1 行。黒い帯にしない・動かさない） ── */
.h-spec { display: flex; flex-wrap: wrap; margin: 0 var(--gut); padding: 18px 0 16px; border-top: 1px solid rgba(24, 20, 16, .12); list-style: none; font-size: 12px; font-weight: 500; line-height: 1.9; letter-spacing: .02em; color: var(--h-text); }
.h-spec li { display: flex; align-items: center; white-space: nowrap; }
.h-spec li:not(:last-child)::after { content: ""; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: rgba(24, 20, 16, .3); }

/* ───────────── STORY: 1 つの舞台 ─────────────
   .h-stage は画面に留まる「窓」（sticky）。.h-panels の本文がその横を普通に流れる。
   並びはヒーローと同じ: 文字＝左の 420px の列、絵（窓）＝右の列。窓の上辺は、ヒーローの図の上辺と同じ高さに留まる。
   地色は本文の側が持つ（暗い章・黄色の章は、その本文の帯が自分の色で流れてくる）。
   窓は窓で、いまの場面の色になる（.h-story の data-theme）。 */
.h-story { --bg: var(--cream); --fg: var(--ink); --text: var(--h-text); --sub: var(--h-sub); --rule: var(--h-rule);
  position: relative; isolation: isolate; overflow-x: clip; color: var(--ink); }
.h-story[data-theme="dark"] .h-stage, .h-panel[data-theme="dark"] { --bg: var(--ink); --fg: var(--cream); --text: #DAD3C5; --sub: #B9B2A4; --rule: rgba(255, 247, 236, .24); }
.h-story[data-theme="yellow"] .h-stage, .h-panel[data-theme="yellow"] { --bg: var(--yellow); --text: var(--ink); --sub: var(--ink); --rule: rgba(24, 20, 16, .3); }

.h-stage { position: sticky; top: 0; z-index: 1; height: 100svh; overflow: hidden; pointer-events: none; color: var(--fg); }
/* 窓が描けないとき（JS 無効・キャンバスが使えない・初期化の失敗）は出さない。html の h-stage-ok は home.js が付ける */
html:not(.h-stage-ok) .h-stage { display: none; }
.h-stage__canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
/* 窓に枠は無い。右の列（ヒーローの図と同じ位置・同じ幅）の、見えない領域。絵を置く範囲（zone）は、その 30px 内側 */
.h-stage { --win-top: calc(var(--h-nav) + clamp(20px, 4.4svh, 44px)); } /* 上辺は、ヒーローの図と同じ高さに留まる */
.h-stage__zone { position: absolute; z-index: 1; right: calc(var(--gut) + 30px); top: calc(var(--win-top) + 48px); height: min(530px, calc(100svh - var(--win-top) - 48px - 92px)); width: calc(100% - 2 * var(--gut) - 420px - clamp(40px, 4.6vw, 68px) - 60px); }
/* 窓には、枠も地も無い（完全に透明）。暗い章の地は、本文の帯が全幅で持つ。
   帯の境目が窓を横切るあいだは、点と添え書きの色を、その場所の地に合わせる（home.js が位置を見て切り替える） */
.h-stage .h-scene > span[data-tone="dark"] { color: var(--cream); }
.h-stage .h-scene > span[data-tone="light"] { color: var(--ink); }
/* 暗い章の添え書きは、暗い帯の上にあるあいだだけ出す（帯が去ったあと、次の章の横に残らないように） */
.h-stage .h-scene[data-scene="ins"] > span { transition: opacity .25s; }
.h-stage .h-scene[data-scene="ins"] > span[data-tone="light"] { opacity: 0; }
.h-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.h-scene.is-on { opacity: 1; visibility: visible; transition: opacity .4s; }
.h-scene > span { position: absolute; }
.h-scene__cap { left: 0; bottom: -46px; font-family: var(--font-display); font-weight: 900; font-size: clamp(14px, 1.3vw, 18px); color: var(--fg); }
.h-scene__name { top: 74%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 900; font-size: clamp(14px, 1.4vw, 19px); }
.h-scene__line { left: 50%; bottom: 3%; transform: translateX(-50%); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #0B7A4A; }
.h-scene__live { left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--sub); }
.h-scene__live b { display: inline-block; min-width: 2.2em; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: var(--cream); font-family: var(--font-display); font-weight: 900; font-size: 15px; text-align: center; }
.h-scene__sample { left: 0; bottom: 12%; display: inline-flex; align-items: center; padding: 8px 16px; border: 1.5px solid currentColor; border-radius: 999px; font-size: clamp(13px, 1.1vw, 15px); font-weight: 700; color: var(--fg); }
.h-scene__src { left: 0; transform: translateY(-50%); font-size: 13px; font-weight: 700; }
.h-scene__src--soon { color: var(--sub); }
.h-scene__unit { left: var(--x, 0); top: var(--y, 0); font-family: var(--font-display); font-weight: 900; font-size: 14px; white-space: nowrap; }
.h-scene__unit[data-unit="shop"] { transform: translate(-50%, -100%); }
.h-scene__unit--more { opacity: 0; transition: opacity .4s var(--h-ease); }
.h-scene.is-three .h-scene__unit--more { opacity: 1; }

/* 本文 */
.h-pin { position: relative; }
.h-panels.h-panels--tail { margin-top: 0; }
/* モバイル用: 本文の流れの中に置く、場面ごとの絵（JS が作る） */
.h-fig { display: none; }
.h-panels { position: relative; z-index: 0; max-width: var(--h-max); margin: -100svh auto 0; padding: 0 var(--h-pad); }
.h-panel[data-theme] { position: relative; color: var(--fg); }
.h-panel[data-theme]::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--bg); }
.h-panel { min-height: 48svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 7svh 0; scroll-margin-top: 10svh; }
/* 最初の節の小見出しは、最初の場面の床の頂点と同じ高さ（窓の上辺＋札の行 70px＋図の幅の約 8%＝4.2vw）で入ってくる。
   要点の行との間が空きすぎないよう、節ごと上へ寄せる（小見出しは、節の上端から 80px） */
.h-stage-ok .h-story { margin-top: calc(80px - var(--h-nav) - clamp(20px, 4.4svh, 44px) - 70px - 4.2vw); }
.h-panel:first-child { padding-top: calc(var(--h-nav) + clamp(20px, 4.4svh, 44px) + 70px + 4.2vw); }
/* 章の終わりは、少し間を空ける */
.h-panel--end { padding-bottom: 12svh; }
.h-panel:not(.h-panel--wide) { max-width: 420px; }
.h-panel--wide { min-height: 88svh; }
html:not(.h-stage-ok) .h-panels { margin-top: 0; }
html:not(.h-stage-ok) .h-panel { min-height: 0; max-width: none; padding: 56px 0; }
html:not(.h-stage-ok) .h-panel:not(.h-panel--wide) > * { max-width: 44em; }
.h-panel > .h-eyebrow { margin-bottom: 22px; }
.h-panel .h-h2 { font-size: clamp(32px, 3.7vw, 58px); line-height: 1.2; letter-spacing: -.03em; }
.h-panel__lead { margin-top: 22px; font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.85; color: var(--text); }
.h-eyebrow { color: var(--sub, var(--h-sub)); }

/* 課題 */
.h-problem__list { list-style: none; width: 100%; margin-top: clamp(28px, 3vw, 44px); border-top: 2px solid var(--fg); }
.h-problem__item { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.h-problem__n { grid-row: 1 / span 2; padding-top: .45em; font-family: var(--font-display); font-weight: 900; font-size: 13px; color: var(--sub); }
.h-problem__t { font-family: var(--font-display); font-weight: 900; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.02em; line-height: 1.4; }
.h-problem__b { margin-top: 8px; font-size: 15px; line-height: 1.8; color: var(--text); }

/* スイート */
.h-prod__code { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.h-prod__idx { font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: .02em; color: var(--sub); }
.h-prod__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(32px, 3.9vw, 60px); letter-spacing: -.035em; line-height: 1.15; margin-top: 20px; }
.h-prod__body { font-size: clamp(16px, 1.2vw, 17px); line-height: 1.85; color: var(--text); margin-top: 18px; }
.h-prod__list { list-style: none; width: 100%; margin-top: 24px; border-top: 1px solid var(--fg); }
.h-prod__list li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-weight: 700; font-size: 15px; }
.h-prod__list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fg); flex: none; }
.h-chip { margin-left: 4px; font-family: var(--font-body); font-size: 11px; font-weight: 700; border: 1.5px solid var(--fg); border-radius: 999px; padding: 2px 9px; }

/* ダッシュボードの画面イメージ（舞台の中。棒グラフの点はキャンバスが描く） */
/* ダッシュボードの場面: 実画面のカードを、窓の右端にそろえて置く。点が棒の形に並び終わってから現れる（.is-shown は home.js が付ける） */
.h-shot--stage { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); width: min(700px, calc(100% + 60px)); opacity: 0; transition: opacity .6s var(--h-ease); }
.h-shot--stage.is-shown { opacity: 1; }
/* Counter の節: 棚前ゾーンの実画面（スマホ幅の画面の、1 ゾーンのカード） */
.h-shot--zone { width: min(100%, 353px); margin-top: 32px; }

/* 仕組み */
.h-step { margin-top: clamp(28px, 3.4vw, 52px); }
.h-panel > .h-step:first-child { margin-top: 0; }
.h-step__n { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--sub); }
.h-step__n::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 2px solid var(--fg); }
.h-step__t { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 4.2vw, 64px); line-height: 1.2; letter-spacing: -.04em; margin-top: 12px; }
.h-step__b { font-size: 16px; line-height: 1.85; color: var(--text); margin-top: 16px; }

/* AI インサイト */
/* 暗い地のときだけ、マーカーの代わりに黄色の文字にする（クリーム地に黄色の文字は読めない） */
.h-panel[data-theme="dark"] .h-mark--dark { background-image: none; color: var(--yellow); }
/* 舞台が数字と注記を見せているときだけ、本文側の同じものは読み上げ用に残して見た目を隠す。
   舞台が描けないときは、そのまま見せる（サンプルの断りが消えないように） */
.h-stage-ok .h-ins__note, .h-stage-ok .h-card__stat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h-ins__note { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 12.5px; font-weight: 700; color: var(--text); border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px 8px 12px; }
.h-card--a { --k: #7FB0FF; }
.h-card__kind { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 900; font-size: 15px; }
.h-card__kind::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--k); }
.h-card__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.9vw, 44px); line-height: 1.3; letter-spacing: -.03em; margin-top: 20px; }
.h-card__body { font-size: 16px; line-height: 1.85; color: var(--text); margin-top: 18px; }
.h-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; width: 100%; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }
.h-card__stat { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 3.4vw, 52px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.h-panel[data-theme="dark"] .h-card__stat, .h-panel[data-theme="dark"] .h-card__side dd { color: var(--k); }
.h-card__foot dt { font-size: 13px; color: var(--sub); margin-top: 8px; }
.h-stage-ok .h-card__foot > div:first-child dt { margin-top: 0; }
.h-card__side { text-align: right; }
.h-card__side dt { display: inline; margin: 0 10px 0 0; }
.h-card__side dd { display: inline; font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: .1em; }

/* 料金: 式を縦に組む */
.h-price__eq { width: 100%; margin-top: clamp(28px, 3vw, 44px); border-top: 2px solid var(--fg); border-bottom: 2px solid var(--fg); }
.h-price__term { padding: 18px 0 20px; }
.h-price__term + .h-price__term { border-top: 1px solid var(--rule); }
.h-price__k { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 900; font-size: clamp(15px, 1.3vw, 18px); }
.h-price__k .price-total-label { font: inherit; color: inherit; }
.h-price__op { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 1em; line-height: 1; }
.h-price__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin-top: 4px; }
.h-price__yen { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2.2vw, 34px); }
.h-price__fig { font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 6vw, 96px); line-height: 1.05; letter-spacing: -.05em; }
.h-price__unit { font-weight: 700; font-size: clamp(13.5px, 1.1vw, 16px); color: var(--sub); }
.h-price__d { font-size: 14px; line-height: 1.8; color: var(--text); margin-top: 4px; }
.h-price__term--sum .price-total-amount { display: inline-flex; align-items: baseline; gap: .14em; font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2.2vw, 34px); }
.h-price__term--sum .coral { font-size: clamp(56px, 6vw, 96px); line-height: 1.05; letter-spacing: -.05em; color: var(--ink); background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-size: 100% .3em; background-position: 0 88%; }
.h-price__term--more .h-price__k { font-size: clamp(14px, 1.1vw, 15.5px); }
.h-price__v2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; font-family: var(--font-display); font-weight: 900; font-size: 16px; }
.h-price__v2 b { font-size: clamp(28px, 2.6vw, 38px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.h-price__v2 span { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--sub); }
.h-price__plan { display: flex; flex-direction: column; gap: 8px; margin-top: clamp(28px, 3vw, 44px); font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 1.7vw, 24px); }
.h-price__plan .h-prod__code { font-size: 11px; color: var(--sub); }
.h-price__desc { font-size: 15.5px; color: var(--text); margin-top: 8px; }
.h-price__checks { list-style: none; width: 100%; margin-top: 16px; border-top: 1px solid var(--fg); }
.h-price__checks li { position: relative; padding: 13px 0 13px 24px; border-bottom: 1px solid var(--rule); font-size: 15px; font-weight: 700; }
.h-price__checks li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--green); }
.h-price__note { font-size: 14px; line-height: 1.85; color: var(--text); margin: 20px 0 22px; }
.h-price__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; width: 100%; }
.h-price__after { flex: 1 1 14em; font-size: 13.5px; line-height: 1.7; color: var(--sub); }

/* コンタクト: 黄の地（全面の黄はここだけ）。点はひとつ＝あなたになって、ボタンの横に着く */
.h-contact { justify-content: center; }
.h-contact__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 10.6vw, 184px); line-height: 1.06; letter-spacing: -.05em; text-indent: -.13em; }
.h-contact__lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.85; margin-top: clamp(22px, 2.6vw, 40px); max-width: 30em; }
.h-contact__cta { margin-top: clamp(30px, 3.4vw, 52px); }
.h-contact__cta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(18px, 3vw, 48px); }
.h-contact__you { position: relative; display: grid; place-items: center; justify-self: end; width: clamp(72px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--blue); border: 3px solid var(--ink); font-family: var(--font-mono); font-size: clamp(11px, 1vw, 14px); font-weight: 700; letter-spacing: .1em; color: #fff; }
.h-contact__you::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--ink); animation: h-ring 2.6s ease-out infinite; }
@keyframes h-ring { from { transform: scale(1); opacity: .5; } to { transform: scale(1.28); opacity: 0; } }
.h-contact__cta .h-fallback { grid-column: 1 / -1; margin-top: 28px; }
.h-contact .h-btn::before { background: #fff; }
.h-contact .h-fallback { color: var(--ink); }

/* ───────────── FOOTER ───────────── */
.h-foot { background: var(--ink); color: var(--cream); padding: clamp(64px, 8vw, 120px) 0 34px; }
.h-foot__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); }
.h-foot__tag { font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 2vw, 28px); line-height: 1.6; }
.h-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.h-foot__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: #A49D90; margin-bottom: 16px; }
.h-foot__cols ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.h-foot__cols a { display: inline-block; padding: 6px 0; font-size: 14px; text-decoration: none; color: #E7E0D2; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(100% - 4px); background-size: 0 1px; transition: background-size .45s var(--h-ease); }
.h-foot__cols a:hover { background-size: 100% 1px; }
.h-foot__logo { display: block; width: calc(100% - .6vw); height: auto; fill: var(--cream); margin-top: clamp(56px, 8vw, 120px); }
.h-foot__copy { margin-top: 28px; padding: 22px 150px 0 0; min-height: 56px; border-top: 1px solid rgba(255, 247, 236, .14); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: #A49D90; }

/* ───────────── AI 相談のボタン（トップページでは控えめに） ───────────── */
.h-body .qc-launcher { min-height: 48px; padding: 0 18px 0 14px; font-size: 14px; border-color: var(--ink); box-shadow: 0 0 0 2px var(--cream), 0 10px 26px rgba(24, 20, 16, .26); }
.h-body .qc-launcher { transition: transform .5s var(--h-ease), box-shadow .2s; }
.h-chat-away .h-body .qc-launcher:not(:focus-visible) { transform: translateY(96px); }
.h-chat-mini .h-body .qc-launcher { width: 48px; padding: 0; justify-content: center; gap: 0; }
.h-chat-mini .h-body .qc-launcher-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h-body .qc-launcher:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--cream), 0 14px 30px rgba(24, 20, 16, .3); }

/* ───────────── レスポンシブ ───────────── */
@media (max-width: 960px) {
  .h-nav__links { gap: 18px; font-size: 13px; }
  .h-nav__n { display: none; }
  .h-foot__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1179px) {
  /* ヒーロー: 1 列。図の中の札は、図の下に 3 つ並べる */
  .h-hero__in { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto; column-gap: clamp(40px, 6vw, 80px); align-items: start; max-width: 920px; }
  .h-hero__eye { grid-column: 1 / -1; grid-row: 1; }
  .h-hero__title { grid-column: 1; grid-row: 2 / 4; font-size: 48px; margin-top: 14px; }
  .h-hero__lead { grid-column: 2; grid-row: 2; margin-top: 26px; }
  .h-hero__cta { grid-column: 2; grid-row: 3; margin-top: 22px; }
  .h-shop { grid-column: 1 / -1; grid-row: 4; }
  .h-hero__note { grid-column: 1 / -1; grid-row: 5; }
  .h-hero__dash { grid-column: 1 / -1; grid-row: 6; }
  /* 861〜1179px: 図の右に、3 か所の数字を縦に並べる（1 画面目に数字が入るように） */
  .h-shop { order: 1; margin-top: 10px; padding-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) 188px; column-gap: 20px; align-items: center; }
  .h-shop__foot { grid-column: 1 / -1; }
  .h-hero__lead, .h-hero__note { max-width: 44em; }
  .h-hero__lead { order: 2; }
  .h-hero__cta { order: 3; }
  .h-hero__note { order: 4; }
  .h-hero__dash { order: 5; width: 100%; margin-top: 26px; }
  .h-pts { order: 0; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
  .h-pt { align-content: flex-start; min-height: 0; padding: 9px 10px 10px; white-space: normal; }
  .h-pt--zone .h-pt__l, .h-pt--zone .h-pt__v, .h-pt--zone .h-pt__s { flex: 0 0 100%; margin-left: 0; }
  .h-pt__l { flex: 0 0 100%; margin-top: 6px; }
  .h-pt__v, .h-pt--in .h-pt__v { font-size: 26px; gap: 2px 8px; }
  .h-pt__io { font-size: 10px; gap: 4px; letter-spacing: .04em; }
  .h-pt__io b { font-size: 26px; min-width: 0; }
  .h-shop__foot { position: static; max-width: none; margin-top: 12px; }
  .h-hero__dash { max-width: 520px; }
  /* AI 相談のボタンは、はじめから丸く畳む（ヒーローの数字の札に重ならないように） */
  .h-body .qc-launcher { width: 48px; min-height: 48px; padding: 0; justify-content: center; gap: 0; }
  .h-body .qc-launcher-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .h-spec { padding: 16px 0 14px; }
  /* 1180px 未満では窓を留めない（狭い幅では窓が本文に重なる・スマホでは本文を隠すため）。
     場面ごとの絵を、本文の流れの中に 1 枚ずつ置く */
  .h-stage, .h-stage-ok .h-stage { display: none; }
  .h-panel:not(.h-panel--wide) > * { max-width: 720px; }
  .h-fig { display: block; position: relative; width: 100%; height: clamp(250px, 74vw, 430px); margin: 26px 0 8px; overflow: hidden; }
  .h-fig__zone { position: absolute; left: 20px; right: 20px; top: 22px; bottom: 46px; }
  .h-fig__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* 最初の場面: ヒーローの図と同じ切り方・同じ大きさの床。添え書きは、ヒーローの脚注と同じ左端 */
  .h-fig--crowd { height: auto; aspect-ratio: 800 / 520; overflow: visible; margin-bottom: 44px; }
  .h-fig--crowd .h-fig__zone { left: 0; right: 0; top: 0; bottom: 0; }
  .h-fig--crowd .h-scene__cap { bottom: -34px; }
  /* 料金の場面: 床の輪郭の大きさに合わせる（下に空きを作らない）。床の頂点の上のラベルが切れないよう、上を空ける */
  .h-fig--price { height: auto; aspect-ratio: 800 / 470; margin-top: 44px; overflow: visible; }
  .h-fig--price .h-fig__zone { top: 0; bottom: 0; }
  /* ダッシュボードの場面: 実画面のカードが絵の大きさを決める */
  .h-fig--data { height: auto; overflow: visible; }
  .h-fig--data .h-fig__zone { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .h-fig--data .h-scene { position: relative; inset: auto; }
  .h-fig--data .h-shot--stage { position: relative; right: auto; top: auto; transform: none; width: 100%; }
  .h-fig .h-scene__sample { bottom: -34px; }
  .h-fig .h-scene__name { top: 80%; }
  .h-scene__cap { bottom: -28px; font-size: 12.5px; }
  .h-scene__name { font-size: 13px; }
  .h-scene__src { font-size: 11px; }
  .h-scene__live { font-size: 11.5px; }
  .h-scene__sample { top: auto; padding: 4px 11px; font-size: 11.5px; }
  .h-panels { margin-top: 0; }
  .h-panel, .h-panel:not(.h-panel--wide) { min-height: 0; max-width: none; justify-content: flex-start; padding: 40px 0 44px; scroll-margin-top: 72px; }
  .h-stage-ok .h-story { margin-top: 0; }
  .h-panel:first-child { padding-top: 60px; }
  .h-panel--end { padding-bottom: 72px; }
  .h-panel .h-h2 { font-size: clamp(32px, 9.4vw, 52px); }
  .h-step__t { font-size: clamp(38px, 11vw, 60px); }
  .h-price__fig, .h-price__term--sum .coral { font-size: clamp(56px, 17vw, 96px); }
  .h-contact { min-height: 0; padding-top: 64px; padding-bottom: 72px; }
  .h-contact__cta { padding-left: 0; }
}
@media (max-width: 860px) {
  :root { --h-nav: 64px; }
  .h-nav__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 7px; width: 48px; height: 48px; padding: 0 11px; border: 0; background: none; cursor: pointer; position: relative; z-index: 2; }
  .h-nav__toggle span { display: block; height: 2.5px; border-radius: 3px; background: var(--ink); transition: transform .45s var(--h-ease); }
  .h-nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4.75px) rotate(45deg); }
  .h-nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.75px) rotate(-45deg); }
  .h-nav__logo { position: relative; z-index: 2; }
  .h-nav__links { position: fixed; inset: 0; height: 100dvh; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 96px var(--h-pad) 48px; background: var(--cream); font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 9vw, 46px); letter-spacing: -.03em; visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .35s, transform .5s var(--h-ease), visibility 0s .5s; }
  .h-nav__links.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .35s, transform .5s var(--h-ease); }
  .h-nav__links > a:not(.h-btn) { padding: 6px 0; }
  .h-nav__n { display: inline; font-size: 12px; vertical-align: 1.1em; margin-right: 10px; }
  .h-nav__cta { margin-top: 22px; height: 60px; padding: 0 30px; font-size: 17px; }
  .h-nav.is-menu { transform: none !important; background: var(--cream); }
  html:not(.js) .h-nav__toggle { display: none; }
  html:not(.js) .h-nav__links { position: static; height: auto; flex-direction: row; align-items: center; gap: 14px; padding: 0; background: none; font-size: 13px; letter-spacing: 0; visibility: visible; opacity: 1; transform: none; }
  html:not(.js) .h-nav__links > a:not(.h-btn):not(.h-nav__event) { display: none; }
  html:not(.js) .h-nav__cta { margin-top: 0; height: 44px; padding: 0 16px; font-size: 13px; }

  .h-hero__in { display: flex; flex-direction: column; align-items: stretch; padding-top: calc(var(--h-nav) + 10px); }
  .h-hero__lead, .h-hero__cta { margin-top: 0; }
  .h-hero__eye { margin-top: 0; }
  .h-hero__title { margin-top: 12px; }
  /* 図は、床の右の空きを切り落として大きく見せる */
  .h-hero__title { font-size: clamp(38px, 10.6vw, 56px); }
  .h-shop { display: block; margin-top: 16px; }
  .h-pts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
  /* 図は少しだけ大きく見せる。切るのは通りの左の端だけ（道は画面の外へ続く。3 台の iPhone と店の右の角は画面の中に残す） */
  .h-shop__scene { aspect-ratio: 358 / 244; overflow: hidden; margin: 0 -10px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px); mask-image: linear-gradient(to right, transparent 0, #000 12px); } /* 左の端は、地に溶かす（道は画面の外へ続く） */
  .h-shop__svg, .h-shop__canvas { inset: auto; left: auto; right: 1%; top: -3%; width: 107%; height: auto; aspect-ratio: 800 / 520; }
  .h-hero__dash { display: none; }
  .h-fig--three { height: 236px; }
  .h-fig--how1, .h-fig--how2 { height: 340px; }
  .h-fig--insA { height: 250px; }
  .h-spec { display: block; }
  .h-spec li:not(:last-child)::after { content: none; }
  .h-spec li { white-space: normal; }
  .h-fig--crowd { aspect-ratio: 358 / 244; margin: 22px -10px 44px; }
  .h-fig--crowd .h-fig__zone { left: 10px; right: 10px; }
  .h-fig__zone { left: 0; right: 0; }
  .h-fig--crowd .h-scene__cap { bottom: -34px; }
  .h-hero__lead { font-size: 14px; line-height: 1.75; margin-top: 18px; }
  .h-hero__cta { margin-top: 16px; }
  .h-hero__cta .h-btn--lg { height: 50px; padding: 0 20px; font-size: 14.5px; }
  .h-hero__note { order: 1; margin-top: 12px; font-size: 11px; } /* 数字の札のすぐ下に（図と札のあと・本文の前） */
  .h-hero__hint { font-size: 12px; margin-top: 8px; }

  .h-contact__you { width: 54px; font-size: 10px; margin-right: 10px; }
  .h-contact__you::after { display: none; } /* 小さい円では、広がる輪が二重の枠に見える */
  .h-contact__cta { column-gap: 12px; }
  .h-contact__cta .h-btn--xl { padding: 0 22px; font-size: 16.5px; height: 64px; }
  .h-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-foot__copy { padding-right: 70px; }
}
@media (max-width: 480px) {
  /* 代替フォントと本来のフォントで行の折り返しが変わると、差し替えのときに本文と下の図がずれる。
     4 行ぶんの高さを確保し、詰め組み（palt）を外して折り返しをそろえる */
  .h-hero__lead { min-height: calc(1.75em * 4); font-feature-settings: normal; }
}
@media (max-width: 404px) {
  .h-hero__lead { min-height: calc(1.75em * 5); } /* 中身の幅 389px までは 5 行になる。スクロールバーが幅を取る環境（15px）のぶんを足して 404px まで */
}
@media (max-width: 480px) {
  /* ヒーローの 2 つのボタンは、右下の AI 相談のボタンの幅ぶん、右を空ける（1 画面目で重ならないように） */
  .h-hero__cta { padding-right: 58px; gap: 8px; flex-wrap: nowrap; }
  .h-hero__cta .h-btn--lg { flex: 1 1 auto; padding: 0 12px; gap: 8px; font-size: 13.5px; }
}
@media (max-width: 420px) {
  .h-btn--lg { height: 56px; padding: 0 22px; font-size: 15px; }
}
/* デモへのボタン（16 字）を、狭い幅で 1 行に収める */
@media (max-width: 480px) {
  .h-try .h-btn { padding: 0 18px; gap: 8px; font-size: 14px; }
}
@media (max-width: 359px) {
  .h-try .h-btn { padding: 0 14px; gap: 6px; font-size: 13px; }
}

/* ───────────── 動きを減らす設定 ───────────── */
@media (prefers-reduced-motion: reduce) {
  .js [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .h-body .qc-launcher { transition: none; }
  .h-body .qc-launcher:hover { transform: none; }
  .h-pip--in, .h-contact__you::after { animation: none; }
  .h-story, .h-stage, .h-scene, .h-shot--stage { transition: none !important; }
  .h-btn, .h-btn::before, .h-btn i, .h-nav, .h-pt b { transition: none !important; animation: none !important; }
}
@media print { .h-nav, .h-shop__canvas, .h-you, .h-stage, .h-stage-ok .h-stage { display: none; } .h-panels { margin-top: 0; } .h-panel { min-height: 0; max-width: none; } }