/* ============================================================
   業種のページ v4 の土台（どの業種でも使う見た目）
   - 色は全部 CSS の変数（--bg など）。値は、業種ごとの colors.css（build.py が world.js から作る）が入れる。
   - 業種らしさ（声の札の形・出方、流れの形、画面のイメージの置き方）は、業種ごとの world.css が上書きする。
   - 動きは、JS が毎コマ入れる変数（--r --e --eo …）で決まる。CSS の transition / animation では動かさない
     （進みと時刻から1コマが決まる形にしておくと、__lp.seek でどのコマでも確かめられる）。
   - html.lp-on  … 動いている時
     html.lp-still … 「動きを止める」を押した時（舞台を出さず、ふつうの縦の並び）
     どちらも無い … JS が無い時（nojs.css が効く）
   ============================================================ */

/* ---------- 0. 土台 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
:root{
  --bg:#0E0D0C;--bg2:#191613;--ink:#F3EEE6;--sub:#C9C0B4;--line:rgba(243,238,230,.18);
  --accent:#CB9453;--accent-ink:#1A120A;--card:#F2EBDD;--card-ink:#1C1814;--card-sub:#6A5A4A;
  --shu:#A7451E;--shu-ink:#FFFFFF;--panel:rgba(14,13,12,.72);--glow:rgba(203,148,83,.45);
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
  --gut:20px;--max:1120px;--focus:#FFD79A;
  --h1-col:calc(100vw - 2 * var(--gut));--h1-cap:96px;
  --hero-top:clamp(118px,19vh,196px);      /* 最初の字が始まる高さ（上に世界を見せる分） */
  --hero-tail:74vh;                        /* 字が去ったあと、世界だけを見せる長さ */
  --seg-a:14;--seg-b:6;
}
@supports (height:1svh){:root{--hero-top:clamp(118px,19svh,196px);--hero-tail:74svh}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--gothic);font-size:16px;line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative}
img{max-width:100%;height:auto}
a{color:inherit}
p,h1,h2,h3,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
a:focus,button:focus{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:8px;top:-80px;z-index:9;padding:10px 14px;background:var(--ink);color:var(--bg);border-radius:6px;font-weight:700}
.skip:focus{top:8px}
main,.hd,.ft{position:relative;z-index:1}

/* 折り返しの整え（使える端末だけ。使えない端末では、ふつうの折り返しになるだけ）：
   見出しは行の長さをそろえ、本文は最後の行に1字だけ残さない */
.h2,.vcard__voice,.scene__title,.toc__t,.hero__a{text-wrap:balance}
.hero__lead,.hero__note,.items__lead,.scene__p,.scene__note,.hpi__lead,.ask__lead,.ask__note,.proof__note,.scene__cta-note,.mock__note,.smp__cap,.ft__about{text-wrap:pretty}

/* ---------- 1. 舞台（canvas）・上の帯・動きを止めるボタン ---------- */
.lp-bg,.lp-fg{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;display:block}
@supports (height:1lvh){.lp-bg,.lp-fg{height:100lvh}}
.lp-bg{z-index:0}
.lp-fg{z-index:3}
html.lp-still .lp-bg,html.lp-still .lp-fg{display:none}

.hd{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;min-height:56px;padding:6px var(--gut)}
.hd__brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;color:var(--ink);
  font-size:12.5px;font-weight:700;letter-spacing:.05em;line-height:1.3;text-shadow:0 0 12px var(--bg)}
.hd__brand img{width:30px;height:29px;flex:none}
.hd__name span{display:inline-block}

/* 「動きを止める」（言葉つき）は、ヘッダの行の右。狭い画面ではページと一緒に流れて消え、広い画面ではヘッダごと上に固定される */
.hd__end{margin-left:auto;display:flex;align-items:center;gap:12px}
.lp-toggle{position:relative;min-height:44px;min-width:44px;padding:0;margin-right:-6px;border:0;background:none;
  color:var(--ink);font:inherit;cursor:pointer;display:inline-flex;align-items:center}
.lp-toggle[hidden]{display:none}
.lp-toggle span{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap}

/* ---------- 2. 開幕の場面 ---------- */
.hero{position:relative;min-height:100vh;padding:0 var(--gut) var(--hero-tail)}
@supports (height:1svh){.hero{min-height:100svh}}
.hero__in{max-width:var(--max);margin:0 auto;padding-top:var(--hero-top)}
.hero__eyebrow{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--accent);text-shadow:0 0 14px var(--bg)}
.hero__h1{font-family:var(--mincho);font-weight:700;color:var(--ink);text-shadow:0 0 26px var(--bg),0 2px 18px var(--bg)}
.hero__a{display:block;font-size:min(calc(var(--h1-col) / (var(--seg-a) + .8)),6.2vw,30px);line-height:1.5;letter-spacing:.02em;
  margin-bottom:.3em;word-break:keep-all;overflow-wrap:anywhere}
.hero__b{display:block;font-size:min(calc(var(--h1-col) / var(--seg-b)),13.4vw,var(--h1-cap));line-height:1.18;font-weight:800}
.hero__b .seg{display:inline-block;white-space:nowrap}
.hero__b .ch{display:inline-block}
.hero__lead{margin-top:14px;max-width:34em;font-size:16px;line-height:1.8;text-shadow:0 0 14px var(--bg),0 0 4px var(--bg)}
.hero__note{margin-top:5px;max-width:44em;font-size:12px;line-height:1.55;color:var(--sub);text-shadow:0 0 10px var(--bg)}
.hero__cta{display:grid;gap:6px;justify-items:start;margin-top:18px}
.hero__cta .btn--shu{width:100%;max-width:430px}
.hero__keeper{display:block;width:auto;height:min(30vh,240px);margin:10px 0 0 auto}
html.lp-on .hero__keeper{display:none}

/* 開幕の字は、JS が1コマずつ出す。JS が来なかった時は、3秒後に自分で出る（消えたままにしない） */
[data-h]{opacity:0;animation:lp-failsafe .01s linear 3s forwards}
@keyframes lp-failsafe{to{opacity:1}}
html.lp-on [data-h]{animation:none}
html.lp-still [data-h]{animation:none;opacity:1!important;transform:none!important}
html.lp-still .hero__b .ch{opacity:1!important;transform:none!important}

/* ---------- 3. ボタン・見出し ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 24px;border-radius:999px;
  border:1px solid transparent;font-family:var(--gothic);font-weight:700;font-size:16px;line-height:1.4;text-align:center;text-decoration:none;
  word-break:keep-all;overflow-wrap:anywhere;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.btn--shu{background:var(--shu);background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.08));color:var(--shu-ink);
  box-shadow:0 10px 30px rgba(167,69,30,.42),inset 0 1px 0 rgba(255,255,255,.22)}
.btn--shu:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(167,69,30,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.btn--lg{min-height:64px;font-size:17px;padding:14px 30px}
.btn--ghost{min-height:48px;padding:8px 20px;border-color:var(--line);background:var(--panel);color:var(--ink);font-size:15px}
.btn--ghost:hover{border-color:var(--accent)}
.h2{font-family:var(--mincho);font-weight:800;font-size:clamp(28px,7.8vw,54px);line-height:1.3;letter-spacing:.02em;
  word-break:keep-all;overflow-wrap:anywhere;text-shadow:0 0 22px var(--bg)}
.h2 .ln{display:block}
.h2--sm{font-size:clamp(24px,6.2vw,36px)}
/* 字の後ろに敷く、ふちのぼけた地。色は世界の colors の veil（省くと敷かない）。箱には見せない */
.veil{border-radius:18px;background:var(--veil,transparent);box-shadow:0 0 30px 22px var(--veil,transparent)}
.lbl{margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--sub)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;border:1px solid currentColor;
  font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.badge i{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge--live{color:#A63A17}
.badge--trial{color:#7A5A12}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:underline;text-underline-offset:5px;
  text-decoration-color:var(--accent)}

/* ---------- 4. よくある困りごと（見出しと一覧） ---------- */
/* 画面の右の外で出番を待つ札（伝票など）が、横のはみ出しを作らないように、節の幅で切る */
.items{padding:0 var(--gut);overflow-x:clip}
@supports not (overflow:clip){.items{overflow-x:hidden}}
.items__head{max-width:var(--max);margin:0 auto;padding:2vh 0 4vh}
.items__lead{margin-top:12px;font-size:16px;max-width:34em;text-shadow:0 0 12px var(--bg)}
.toc{margin-top:26px;max-width:720px}
.toc__list{list-style:none;border-top:1px solid var(--line)}
.toc__list a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:56px;padding:8px 4px;
  border-bottom:1px solid var(--line);text-decoration:none;text-shadow:0 0 10px var(--bg)}
.toc__no{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent);white-space:nowrap}
.toc__t{font-family:var(--mincho);font-weight:700;font-size:16.5px;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.toc__list .ic{color:var(--sub)}
.toc__list a:hover .toc__t{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}

/* ---------- 5. 例の場面 ---------- */
.scene{position:relative;max-width:var(--max);margin:0 auto;padding-bottom:9vh}
.scene__voice{position:relative;display:grid;align-content:center;justify-items:start;min-height:72vh;padding:9vh 0 7vh}
@supports (height:1svh){.scene__voice{min-height:72svh}}
.vcard{position:relative;width:100%;max-width:640px}
.vcard__in{position:relative;padding:22px 22px 26px;background:var(--card);color:var(--card-ink);border-radius:6px;
  box-shadow:0 22px 60px rgba(0,0,0,.45)}
.vcard__no{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:14px}
.vcard__code{font-size:13px;font-weight:800;letter-spacing:.1em}
.vcard__label{margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--card-sub)}
.vcard__voice{font-family:var(--mincho);font-weight:700;font-size:clamp(25px,7vw,42px);line-height:1.5;
  word-break:keep-all;overflow-wrap:anywhere}
.vcard__voice .q{color:var(--shu)}
.vcard__voice .q--o{margin-left:-.5em}

.scene__body{display:grid;gap:30px}
.scene__title{margin-bottom:.6em;font-family:var(--mincho);font-weight:800;font-size:clamp(25px,6.8vw,40px);line-height:1.42;
  word-break:keep-all;overflow-wrap:anywhere;text-shadow:0 0 20px var(--bg)}
.scene__p{font-size:16px;line-height:1.95;max-width:36em;text-shadow:0 0 12px var(--bg),0 0 3px var(--bg)}
.scene__proof{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 .1em;margin-top:16px;padding:6px 14px;border-radius:6px;
  border:1px solid var(--accent);background:var(--panel);font-weight:800;font-size:17px;line-height:1.5}
.scene__proof .pr__b{color:var(--sub);font-weight:700;font-size:14.5px}
.scene__proof .pr__ar{color:var(--sub);white-space:pre}
.scene__proof .pr__a{color:var(--accent);font-family:var(--mincho);font-size:20px}
.scene__note{margin-top:14px;padding-left:12px;border-left:2px solid var(--accent);font-size:13px;line-height:1.7;color:var(--sub);
  max-width:38em;text-shadow:0 0 10px var(--bg)}

.flow{margin-top:30px}
.flow__list{list-style:none;display:grid;gap:12px}
.flow__list li{position:relative;display:grid;grid-template-columns:30px 1fr;align-items:center;gap:12px;min-height:54px;padding:10px 14px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.flow__n{display:grid;place-items:center;width:28px;height:28px;border-radius:5px;background:var(--accent);color:var(--accent-ink);
  font-weight:800;font-size:14px;line-height:1}
.flow__t{font-weight:700;font-size:16px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.flow__list li + li::before{content:"";position:absolute;left:27px;top:-13px;width:2px;height:13px;background:var(--accent);
  transform-origin:50% 0}

.scene__demo{display:grid;justify-items:center}
.scene__meta{display:grid;gap:16px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:3px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:12.5px;line-height:1.7}
.tags__n{color:var(--sub)}
.meta__type{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.meta__type .ic{width:22px;height:22px;color:var(--accent)}
.scene__cta .btn{width:100%;max-width:460px}
.scene__cta-note{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--sub);word-break:keep-all;overflow-wrap:anywhere;
  text-shadow:0 0 10px var(--bg)}

/* ---------- 6. 画面のイメージ（5種類。中の色は、どの業種でも同じ「画面」の色） ---------- */
.mock{width:100%;max-width:400px}
.mock__body{position:relative;overflow:hidden;border-radius:18px;background:#fff;color:#1D2126;font-size:14px;line-height:1.6;
  box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
.mock__cap{display:grid;gap:2px;margin-top:12px;font-size:12px;line-height:1.6;color:var(--sub);text-shadow:0 0 10px var(--bg)}
.mock__foot{font-weight:700;font-size:13.5px;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.mock__note{word-break:keep-all;overflow-wrap:anywhere}
.demo{width:100%;max-width:400px}
.demo video,.demo img{display:block;width:100%;border-radius:14px}

/* やり取り（LINE） */
.phone{background:#DCE6EF}
.phone__bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#27313D;color:#fff;font-weight:700;font-size:13.5px}
.phone__dot{width:9px;height:9px;border-radius:50%;background:#4CC764}
.chat{list-style:none;display:grid;gap:8px;padding:14px 12px 16px}
.chat__m{display:grid;justify-items:start;max-width:88%;transform-origin:0 100%}
.chat__m--r{justify-self:end;justify-items:end;transform-origin:100% 100%}
.chat__who{margin:0 4px 2px;font-size:12px;color:#55606B}
.chat__m--same .chat__who{display:none}
.chat__t{padding:9px 12px;border-radius:16px;border-top-left-radius:5px;background:#fff;color:#1D2126;box-shadow:0 1px 1px rgba(0,0,0,.08);
  word-break:keep-all;overflow-wrap:anywhere}
.chat__m--r .chat__t{border-top-left-radius:16px;border-top-right-radius:5px;background:#A9E79C}
.chat__m--att .chat__t{display:flex;align-items:center;gap:8px;background:#fff;border:1px dashed #8894A1;color:#3A434D}
.chat__m--att .ic{width:20px;height:20px}

/* 表 */
.sheetw{background:#fff}
.sheetw__bar{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#1F7A4A;color:#fff}
.sheetw__tab{font-weight:700;font-size:13px}
.sheetw__dots i{display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;background:rgba(255,255,255,.65)}
.sheet{width:100%;border-collapse:collapse;font-size:12.8px}
.sheet th{padding:8px;text-align:left;font-weight:700;white-space:nowrap;background:#EEF5F0;color:#24553A;border-bottom:1px solid #CFE0D5;border-right:1px solid #E1EAE4}
.sheet td{padding:9px 8px;white-space:nowrap;color:#1D2126;border-bottom:1px solid #E6EBE7;border-right:1px solid #EEF1EE}
.sheet td.is-wrap{white-space:normal}
.sheet td.is-mark{background:#FBE4D9;color:#8E3414;font-weight:700}
.sheet td span{display:inline-block}
.sheet--roomy{font-size:14px}
.sheet--snug{font-size:12.2px}
/* 狭い段も 12px より小さくしない（2026-11-13）。入りきらない分は、横の余白を詰める */
.sheet--tight{font-size:12px}
.sheet--tight th,.sheet--tight td{padding:8px 4px}
.sheet--tighter{font-size:12px}
.sheet--tighter th,.sheet--tighter td{padding:8px 3px}
.sheet--tighter td{white-space:normal}

/* 書類 */
.paper{padding:20px 18px 18px;background:#FFFDF8;color:#1D1A16}
.paper__title{margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #1D1A16;text-align:center;font-family:var(--mincho);font-weight:700;
  font-size:16px;letter-spacing:.18em}
.paper__lines{list-style:none}
.paper__lines li{padding:8px 2px;border-bottom:1px dotted #B0A898;font-size:13.5px}
.paper__lines li span,.paper__total span{display:inline-block}
.paper__end{position:relative;display:flex;justify-content:flex-end;align-items:center;min-height:58px;padding-top:12px}
.paper__total{font-weight:800;font-size:15px}
.paper__stamp{position:absolute;left:6px;top:12px;padding:3px 10px;border:2.5px solid #B4381A;border-radius:4px;color:#B4381A;
  font-weight:800;font-size:15px;letter-spacing:.2em;transform:rotate(-8deg)}

/* 入力の画面 */
.formw{padding:0 16px 18px;background:#fff}
.formw::before{content:"";display:block;height:8px;margin:0 -16px 14px;background:#5B4FC7}
.formw__title{margin-bottom:12px;font-weight:800;font-size:15px}
.formw__fields{display:grid;gap:10px}
.formw__f dt{margin-bottom:3px;font-size:12px;color:#5B6470}
.formw__f dd{min-height:40px;padding:8px 10px;border:1px solid #CBD2DA;border-radius:8px;background:#F7F9FB;font-size:14px}
.formw__f dd span{display:inline-block;position:relative}
.formw__btn{display:flex;align-items:center;justify-content:center;min-height:42px;margin-top:14px;border-radius:999px;background:#5B4FC7;
  color:#fff;font-weight:700;font-size:14px}

/* お知らせ */
.noticew{padding:16px 14px;background:#EEF1F5}
.noticew__title{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:800;font-size:14.5px;color:#1D2126}
.noticew__title .ic{width:18px;height:18px;color:#B4481C}
.noticew__items{list-style:none;display:grid;gap:8px}
.noticew__items li{padding:10px 12px;border-radius:12px;border-left:4px solid #D9682F;background:#fff;box-shadow:0 2px 8px rgba(20,30,40,.12);font-size:13.5px}
.noticew__items li span{display:inline-block}

/* ---------- 7. 自分の店の数字（飲食だけ） ---------- */
.proof{padding:14vh var(--gut) 8vh}
.proof__in{max-width:var(--max);margin:0 auto}
.proof .h2{font-size:clamp(24px,6.7vw,48px)}
.big{margin:30px 0 34px;max-width:760px}
.big__label{margin-bottom:12px;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--sub)}
.big__row{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:6px 14px;margin-bottom:20px;transform-origin:0 50%}
.big__k{align-self:center;padding:1px 10px;border:1px solid var(--line);border-radius:4px;font-size:14px;font-weight:700;color:var(--sub)}
.big__v{font-family:var(--mincho);font-weight:800;line-height:1.05;text-shadow:0 0 30px var(--bg)}
.big__v .n{font-size:clamp(48px,15vw,104px);letter-spacing:-.02em}
.big__v .u{margin-left:.06em;font-size:clamp(20px,5.6vw,36px)}
.big__row--a .big__v{color:var(--accent)}
.big__row--a .big__v .n{font-size:clamp(76px,25vw,176px)}
.big__row--a .big__v .u{font-size:clamp(26px,7.4vw,52px)}
.big__row--a .big__k{border-color:var(--accent);color:var(--accent)}
.big__bar{grid-column:1 / -1;height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.big__bar i{display:block;width:100%;height:100%;border-radius:5px;background:var(--sub);transform-origin:0 50%}
.big__row--a .big__bar i{width:calc(var(--proof-ratio,.2) * 100%);background:var(--accent)}

.tbl{width:100%;max-width:860px;border-collapse:collapse;font-size:14.5px;line-height:1.7}
.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbl tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:14px 0;border-top:1px solid var(--line)}
.tbl th[scope="row"]{grid-column:1 / -1;text-align:left;font-family:var(--mincho);font-weight:700;font-size:17px}
.tbl td{padding:0;word-break:keep-all;overflow-wrap:anywhere}
.tbl td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--sub)}
.tbl td.is-now{color:var(--accent);font-weight:800}
.tbl td:last-child{grid-column:1 / -1}
.tbl .tbl__more td::before{content:none}
.tbl .tbl__more td{word-break:normal;font-size:16px}
.proof__note{margin-top:18px;max-width:54em;font-size:12.5px;line-height:1.8;color:var(--sub)}

/* ---------- 8. ホームページも、作れます ---------- */
.hpi{padding:12vh var(--gut) 8vh}
.hpi__in{display:grid;gap:30px;max-width:var(--max);margin:0 auto}
.hpi__lead{margin-top:14px;max-width:34em;font-size:16px;line-height:1.95;text-shadow:0 0 12px var(--bg)}
.hpi__more{margin-top:20px}
.smp{overflow:hidden;max-width:460px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.smp__pic{aspect-ratio:16 / 10;overflow:hidden;background:var(--bg2)}
.smp__pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.smp__body{padding:16px 18px 14px}
.smp__ind{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.smp__name{margin-top:2px;font-family:var(--mincho);font-weight:700;font-size:21px;line-height:1.4}
.smp__cap{margin-top:6px;font-size:14px;line-height:1.75;color:var(--sub)}
.smp__dl{display:grid;gap:8px;margin-top:10px;font-size:14px;line-height:1.7}
.smp__dl dt{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--sub)}
.smp__links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:8px}

/* ---------- 9. まず1つ、無料で ---------- */
.ask{padding:12vh var(--gut) 10vh}
.ask__in{position:relative;max-width:var(--max);margin:0 auto}
.ask__keeper{display:block;width:auto;height:min(26vh,210px);margin:0 0 6px -6px;filter:drop-shadow(0 16px 18px rgba(0,0,0,.35))}
.ask__lead{margin-top:14px;max-width:34em;font-size:16px;line-height:1.95;text-shadow:0 0 12px var(--bg)}
.ask__note{margin-top:12px;max-width:44em;font-size:12.5px;line-height:1.8;color:var(--sub)}
.cta-box{display:grid;justify-items:start;gap:8px;margin-top:26px}
.cta-box .btn{width:100%;max-width:460px}
.cta-box__note{font-size:13px;color:var(--sub)}
.tel{display:grid;gap:2px;margin-top:10px}
.tel a{display:inline-flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;font-weight:800}
.tel .ic{width:22px;height:22px;color:var(--accent)}
.tel__no{font-family:var(--mincho);font-size:26px;letter-spacing:.04em}
.tel__note{font-size:12.5px;color:var(--sub)}

/* ---------- 10. ほかの業種を見る ---------- */
.hoka{padding:8vh var(--gut) 12vh}
.hoka__in{max-width:var(--max);margin:0 auto}
.hoka__list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:22px}
.tile{display:grid;align-content:center;gap:2px;min-height:76px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile__name{font-family:var(--mincho);font-weight:700;font-size:17px;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.tile__sub{font-size:12px;line-height:1.5;color:var(--sub);word-break:keep-all;overflow-wrap:anywhere}
.hoka__back{margin-top:26px}

/* ---------- 11. 下の帯 ---------- */
.ft{padding:44px var(--gut) 56px;border-top:1px solid var(--line);background:var(--bg);font-size:13.5px;line-height:1.8}
.ft__in{display:grid;gap:22px;max-width:var(--max);margin:0 auto}
.ft__top{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.ft__about{max-width:46em;color:var(--sub)}
.ft__h{margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--sub)}
.ft ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 18px}
.ft li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.ft li a[aria-current="page"]{text-decoration:none;font-weight:800;color:var(--accent)}
.ft__agency{padding-top:16px;border-top:1px solid var(--line)}
.ft__agency-h{font-size:12px;color:var(--sub)}
.ft__agency a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
.ft__copy{color:var(--sub)}
.ft__copy small{font-size:12.5px}

/* ---------- 12. 動いている時（JS が毎コマ変数を入れる） ---------- */
/* ふつうの出方：下から少し上がって現れる。--r は 0（まだ）〜1（出きった） */
html.lp-on .rv{opacity:var(--r,1);transform:translate3d(0,calc((1 - var(--r,1)) * 30px),0)}
/* 声の札：既定の出方（業種の world.css が、ここを上書きして業種らしい出方にする） */
html.lp-on .vcard{opacity:var(--e1,1);transform:translate3d(0,calc((1 - var(--eo,1)) * 54px),0)}
/* 流れの3つ：順に現れて、線でつながる */
html.lp-on .flow__list li{opacity:var(--r,1);transform:translate3d(calc((1 - var(--r,1)) * -18px),0,0)}
html.lp-on .flow__list li + li::before{transform:scaleY(var(--r,1))}
/* 画面のイメージ：全体が現れてから、中身が順に動く */
html.lp-on .mock{opacity:var(--m0,1);transform:translate3d(0,calc((1 - var(--m0,1)) * 36px),0)}
html.lp-on .chat__m{opacity:var(--r,1);transform:translate3d(0,calc((1 - var(--r,1)) * 12px),0) scale(calc(.9 + .1 * var(--r,1)))}
html.lp-on .sheet tr[data-s] td span{opacity:var(--r,1);transform:translate3d(calc((1 - var(--r,1)) * -8px),0,0)}
html.lp-on .sheet tr[data-s] td.is-mark{background:rgba(251,228,217,var(--r,1))}
html.lp-on .paper__lines li span,html.lp-on .paper__total span{clip-path:inset(-2px calc((1 - var(--r,1)) * 100%) -2px 0)}
html.lp-on .paper__stamp{opacity:var(--r,1);transform:rotate(-8deg) scale(calc(2.4 - 1.4 * var(--r,1)))}
html.lp-on .formw__f dd span{clip-path:inset(-2px calc((1 - var(--r,1)) * 100%) -2px 0)}
html.lp-on .formw__btn{opacity:calc(.45 + .55 * var(--r,1));transform:scale(calc(.96 + .04 * var(--r,1)))}
html.lp-on .noticew__items li{opacity:var(--r,1);transform:translate3d(0,calc((1 - var(--r,1)) * -14px),0)}
/* 数字：前の行が出て、今の行が大きく出る（途中の値は見せない） */
html.lp-on .big__label{opacity:var(--b1,1)}
html.lp-on .big__row--b{opacity:calc(var(--b1,1) * (1 - .45 * var(--a1,1)));transform:translate3d(0,calc((1 - var(--b1,1)) * 26px),0)}
html.lp-on .big__row--b .big__bar i{transform:scaleX(var(--b1,1))}
html.lp-on .big__row--a{opacity:var(--a1,1);transform:translate3d(0,calc((1 - var(--a1,1)) * 30px),0) scale(calc(.9 + .1 * var(--a1,1)))}
html.lp-on .big__row--a .big__bar i{transform:scaleX(var(--a2,1))}

/* ---------- 12b. 動きを止めた時・JS が無い時（舞台を出さず、ふつうの縦の並び。間を詰める） ---------- */
html:not(.lp-on) .hero{min-height:0;padding-bottom:7vh}
html:not(.lp-on) .scene__voice{min-height:0;padding:6vh 0 5vh}

/* ---------- 12c. 相談の入口（2026-11-13）----------
   狭い画面（960px 未満）：下に固定の帯 .cbar（LINE のボタン＋丸い「動きを止める」）。
   広い画面（960px 以上）：ヘッダを上に固定し、右に小さな LINE のボタン .hd__line。
   どちらも、最初の画面の LINE のボタンが上へ出てから（html.cta-on。engine.js の bars() が決める）。
   JS が無い時（html.lp-js が無い）は、帯もヘッダの LINE のボタンも出さない。 */
.hd__line,.cbar{display:none}
.hd__line{position:relative;align-items:center;justify-content:center;min-height:38px;padding:0 16px;border-radius:999px;
  background:var(--shu);background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.08));color:var(--shu-ink);
  font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 18px rgba(167,69,30,.38),inset 0 1px 0 rgba(255,255,255,.22)}
.hd__line::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}   /* 押せる所は 44px あるように、上下を広げる */
.hd__line:hover{background-color:#B24E26}
.cbar__btn{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 14px;
  border-radius:999px;background:var(--shu);background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.08));color:var(--shu-ink);
  font-family:var(--gothic);font-size:15px;font-weight:700;line-height:1.3;text-decoration:none;white-space:nowrap;
  font-feature-settings:"palt";letter-spacing:.01em;
  box-shadow:0 8px 22px rgba(167,69,30,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.cbar__btn wbr{display:none}
.cbar__toggle{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:var(--bg2);color:var(--ink);cursor:pointer}
.cbar__toggle[hidden]{display:none}
/* 中の印：止める＝縦棒2本／動かす＝三角（CSS で描く） */
.cbar__ic{display:block;width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.cbar__toggle[aria-pressed="true"] .cbar__ic{width:0;height:0;margin-left:4px;border-right:0;border-left:13px solid currentColor;
  border-top:8px solid transparent;border-bottom:8px solid transparent}
@media (max-width:959.98px){
  html.lp-js .cbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;
    padding:16px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    background:linear-gradient(180deg,rgba(0,0,0,0) 0,var(--bg) 16px,var(--bg) 100%);
    visibility:hidden;opacity:0;transform:translate3d(0,24px,0);pointer-events:none;
    transition:transform .24s ease,opacity .24s ease,visibility 0s linear .24s}
  html.lp-js.cta-on .cbar{visibility:visible;opacity:1;transform:none;pointer-events:auto;
    transition:transform .24s ease,opacity .24s ease,visibility 0s linear 0s}
  /* 流れの中の LINE のボタンが画面に見えている間は、帯を丸ごと隠す（同じ画面に LINE のボタンを並べない。html.cta-dup） */
  html.lp-js.cta-on.cta-dup .cbar{visibility:hidden;opacity:0;transform:translate3d(0,24px,0);pointer-events:none;
    transition:transform .24s ease,opacity .24s ease,visibility 0s linear .24s}
  /* 最後の行が帯に隠れないように（帯の高さ 78px＋下の安全域） */
  html.lp-js .ft{padding-bottom:calc(56px + 78px + env(safe-area-inset-bottom))}
}
@media (max-width:359.98px){
  .cbar__btn{font-size:14px;padding:0 10px}
}
@media (min-width:960px){
  html.lp-js .hd{position:fixed;transition:background-color .24s ease,box-shadow .24s ease}
  html.lp-js{scroll-padding-top:76px}   /* ページの中へ飛んだ時に、固定のヘッダの下に隠れないように */
  html.lp-js .hd.is-solid{background:var(--bg);box-shadow:0 1px 0 var(--line),0 10px 28px rgba(0,0,0,.28)}
  html.lp-js.cta-on .hd__line{display:inline-flex}
}

/* ---------- 13. 広い画面 ---------- */
@media (min-width:760px){
  :root{--gut:40px}
  .hero__lead{font-size:16.5px}
  .hero__cta{grid-auto-flow:column;justify-content:start;align-items:center;gap:14px}
  .hero__cta .btn--shu{width:auto}
  .toc__t{font-size:18px}
  .scene__p{font-size:16.5px}
  .tbl thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .tbl tr{display:table-row;padding:0}
  .tbl th,.tbl td{padding:14px 16px 14px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
  .tbl thead th{border-top:0;font-size:12px;letter-spacing:.12em;color:var(--sub)}
  .tbl th[scope="row"]{font-size:17px;white-space:nowrap}
  .tbl td::before{content:none}
  .tbl tr:not(.tbl__more) td:nth-child(2),.tbl tr:not(.tbl__more) td:nth-child(3){white-space:nowrap}
  .hpi__in{grid-template-columns:minmax(0,1fr) 440px;gap:60px;align-items:center}
}
@media (min-width:980px){
  :root{--gut:56px;--h1-col:min(54vw,660px);--hero-top:max(17vh,128px)}
  .hd{min-height:68px}
  .hd__brand{font-size:14px}
  .scene__voice{min-height:66vh}
  .scene__body{grid-template-columns:minmax(0,1fr) 420px;column-gap:72px;row-gap:26px;align-items:start}
  .scene__text{grid-column:1}
  .scene__demo{grid-column:2;grid-row:1 / span 3;position:sticky;top:15vh;justify-items:end}
  .scene__meta{grid-column:1}
  .scene__cta{grid-column:1}
  .proof__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;align-items:start}
  .proof__in .h2{grid-column:1 / -1}
  .proof__in .big{grid-column:1;grid-row:2 / span 2;margin-bottom:0}
  .proof__in .tbl{grid-column:2;margin-top:30px}
  .proof__in .proof__note{grid-column:2}
  .ask__in{padding-left:230px}
  .ask__keeper{position:absolute;left:0;top:-10px;height:300px;margin:0}
}