/* ===========================================================
   MenuFresh 公式サイト — 共有デザインシステム
   - 上質でミニマルな世界観（adminと地続き）
   - 実画面風モック部品（window / phone / chat / cost / stat）
   - 控えめで上質なモーション（scroll-reveal / counter / typing）
   =========================================================== */

:root{
  --ink:#17150f;
  --ink-soft:#4c4944;
  --muted:#8a857c;
  --line:#e7e2d8;
  --line-soft:#efeae0;
  --paper:#ffffff;
  --cream:#f7f4ee;
  --cream-deep:#efeae0;
  --accent:#b5471f;
  --accent-ink:#8f3415;
  --accent-soft:#f4e3da;
  --ok:#2f7d5b;
  --info:#2c5d8f;
  --night:#17150f;
  --night-2:#221e18;
  --radius:18px;
  --radius-sm:13px;
  --maxw:1140px;
  --shadow:0 1px 2px rgba(23,21,15,.05), 0 16px 40px -22px rgba(23,21,15,.22);
  --shadow-lg:0 2px 6px rgba(23,21,15,.06), 0 40px 80px -36px rgba(23,21,15,.30);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Lora","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  color:var(--ink);background:var(--paper);line-height:1.9;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"palt";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.eyebrow{font-size:.72rem;letter-spacing:.22em;color:var(--accent);font-weight:700;text-transform:uppercase}
.seg{font-size:.72rem;letter-spacing:.18em;color:var(--muted);font-weight:700}
.center{text-align:center}
.measure{max-width:660px}
.measure-c{max-width:680px;margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}

h1,h2,h3{letter-spacing:.012em;line-height:1.5;font-weight:600}
h1{font-size:clamp(1.85rem,4.4vw,2.85rem);line-height:1.42;font-weight:700}
h2{font-size:clamp(1.6rem,3.4vw,2.45rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.3rem)}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-soft)}
p+p{margin-top:1em}
section{padding:clamp(60px,8vw,108px) 0}
.section-tight{padding:clamp(40px,6vw,72px) 0}
.on-cream{background:var(--cream)}
.on-deep{background:var(--cream-deep)}

/* ── ボタン ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .08s ease, background .2s ease, box-shadow .2s ease;font-size:.92rem;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff;padding:11px 20px}
.btn-primary:hover{background:#000}
.btn-accent{background:var(--accent);color:#fff;padding:13px 26px;font-size:1rem;box-shadow:var(--shadow)}
.btn-accent:hover{background:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);padding:12px 22px}
.btn-ghost:hover{background:var(--cream)}

/* ── ヘッダー ── */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:6px;height:64px}
.brand{font-weight:800;font-size:1.16rem;letter-spacing:-.01em;margin-right:auto;display:flex;align-items:baseline;gap:.1em}
.brand .dot{color:var(--accent)}
.nav a.navlink{padding:8px 12px;border-radius:10px;font-size:.92rem;color:var(--ink-soft);font-weight:600}
.nav a.navlink:hover{background:var(--cream);color:var(--ink)}
.nav a.navlink.active{color:var(--ink)}
.nav .btn-primary{padding:9px 16px}
.menu-toggle{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--ink);padding:6px 10px}
@media(max-width:760px){
  .nav .navlink{display:none}
  .menu-toggle{display:inline-flex;margin-left:auto;margin-right:4px}
  .nav.open{height:auto;flex-wrap:wrap;padding-bottom:12px}
  .nav.open .navlink{display:block;width:100%;padding:10px 12px}
  .nav.open .brand{width:auto}
}

/* ── ヒーロー ── */
.hero{position:relative;overflow:hidden;background:
    radial-gradient(120% 90% at 88% -10%, rgba(181,71,31,.08), transparent 55%),
    linear-gradient(180deg,#fffdf9,#fbf8f2 70%,#f7f4ee);border-bottom:1px solid var(--line)}
.hero .wrap{padding-top:clamp(52px,7vw,100px);padding-bottom:clamp(52px,7vw,100px)}
.hero h1{margin:18px 0 0}
.accent-line{color:var(--accent)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.reassure{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;color:var(--muted);font-size:.86rem}
.reassure span{display:inline-flex;align-items:center;gap:.45em}
.reassure .tick{color:var(--ok);font-weight:800}

/* ── グリッド / カード ── */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card.cream{background:var(--cream)}

/* ── 痛みカード ── */
.pain-card{position:relative;overflow:hidden;display:flex;flex-direction:column}
.pain-card .no{font-size:.72rem;letter-spacing:.18em;color:var(--accent);font-weight:800}
.pain-card .voice{margin:10px 0 0;font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.6}
.pain-card .voice::before{content:"“";color:var(--accent);font-weight:800}
.pain-card .voice::after{content:"”";color:var(--accent);font-weight:800}
.pain-card .fix{margin-top:auto;padding-top:16px;display:flex;gap:.5em;align-items:flex-start;font-size:.88rem;color:var(--ink-soft)}
.pain-card .fix .ar{color:var(--ok);font-weight:800;flex:none}
.pain-card .fix b{color:var(--ink);font-weight:700}

/* ── ペルソナ帯 ── */
.persona-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.persona{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--paper)}
.persona .who{font-weight:800;font-size:1rem}
.persona .ql{color:var(--ink-soft);font-size:.9rem;margin-top:8px;line-height:1.7}
.persona .ql::before{content:"「";color:var(--accent)}
.persona .ql::after{content:"」";color:var(--accent)}

/* ── 転換 before→after ── */
.flip{display:grid;gap:16px}
.flip-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px}
.flip-row .before{color:var(--muted)}
.flip-row .before b{color:var(--ink-soft);font-weight:700}
.flip-row .after b{color:var(--accent-ink);font-weight:800}
.flip-row .arrow{color:var(--accent);font-size:1.4rem;font-weight:800}

/* ── ループ ── */
.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.loop .step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative}
.loop .step .k{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:var(--ink);color:#fff;font-weight:800;margin-bottom:14px}
.loop .step h3{font-size:1.18rem}
.loop .step p{color:var(--ink-soft);font-size:.95rem;margin-top:6px}

/* ── 痛み別の束 ── */
.cluster{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start;padding:30px 0;border-top:1px solid var(--line)}
.cluster:first-of-type{border-top:0}
.cluster .label h3{font-size:1.32rem}
.cluster .label p{color:var(--muted);font-size:.9rem;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 15px;font-size:.9rem;font-weight:600}
.chip .soon{font-size:.68rem;color:#fff;background:var(--muted);border-radius:999px;padding:1px 7px;font-weight:700}
.more-link{display:inline-flex;align-items:center;gap:.4em;color:var(--accent-ink);font-weight:700;font-size:.92rem;margin-top:16px}
.more-link:hover{gap:.7em}

/* ── タグ ── */
.tag{font-size:.66rem;font-weight:700;border-radius:999px;padding:2px 9px;letter-spacing:.04em}
.tag.soon{background:var(--cream-deep);color:var(--muted)}
.tag.pro{background:#1b1813;color:#f1d9ad}
.tag.std{background:#eef4ef;color:var(--ok)}

/* ===========================================================
   実画面風モック部品
   =========================================================== */

/* ウィンドウ枠（管理画面） */
.mock-window{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-lg)}
.mock-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#f4f1ec;border-bottom:1px solid var(--line)}
.mock-bar .dots{display:flex;gap:6px}
.mock-bar .dots i{width:11px;height:11px;border-radius:999px;background:#d9d3c8;display:block}
.mock-bar .addr{margin-left:8px;font-size:.74rem;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.mock-body{padding:20px}

/* アプリ・シェル（サイドバー＋本文）の簡易版 */
.app-shell{display:grid;grid-template-columns:172px 1fr;min-height:300px}
.app-side{background:#fbf9f5;border-right:1px solid var(--line);padding:16px 12px}
.app-side .logo{font-weight:800;font-size:.95rem;margin-bottom:14px}
.app-side .logo .dot{color:var(--accent)}
.app-side .nav-i{display:flex;align-items:center;gap:.55em;font-size:.8rem;color:var(--ink-soft);padding:7px 9px;border-radius:8px}
.app-side .nav-i.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.app-side .nav-i .ic{width:14px;height:14px;border-radius:4px;background:var(--cream-deep);flex:none}
.app-side .nav-i.on .ic{background:var(--accent)}
.app-main{padding:18px 20px;background:#fff}
@media(max-width:560px){ .app-shell{grid-template-columns:1fr} .app-side{display:none} }

/* スマホ枠（お客様メニュー） */
.phone{width:268px;border:9px solid #1c1a15;border-radius:38px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);margin:0 auto}
.phone .status{height:26px;background:#1c1a15;border-radius:0 0 14px 14px;width:120px;margin:0 auto}
.phone .pscreen{padding:14px}

/* 統計カウンター */
.stat{display:flex;flex-direction:column;gap:2px}
.stat .num{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1}
.stat .lbl{color:var(--muted);font-size:.84rem}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* 原価テーブル・モック */
.cost-table{width:100%;border-collapse:collapse;font-size:.82rem}
.cost-table th{text-align:left;color:var(--muted);font-weight:700;font-size:.72rem;padding:6px 8px;border-bottom:1px solid var(--line)}
.cost-table td{padding:9px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.cost-table .dish{font-weight:700}
.cost-bar{height:7px;border-radius:999px;background:var(--cream-deep);overflow:hidden;min-width:64px}
.cost-bar > i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.cost-bar.good > i{background:var(--ok)}
.pill-rate{font-weight:800;font-size:.8rem}
.pill-rate.warn{color:var(--accent)}
.pill-rate.good{color:var(--ok)}

/* AIチャット・モック（“AIと経営する”の核） */
.chat{background:linear-gradient(180deg,#1b1813,#211d17);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px;box-shadow:var(--shadow-lg);max-width:560px}
.chat .chat-top{display:flex;align-items:center;gap:.6em;color:#cfc8bb;font-size:.78rem;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:14px}
.chat .chat-top .dotlive{width:8px;height:8px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 0 rgba(47,125,91,.6);animation:pulse 2s infinite}
.chat .msgs{display:flex;flex-direction:column;gap:12px}
.bubble{max-width:86%;padding:11px 15px;border-radius:15px;font-size:.9rem;line-height:1.7}
.bubble.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.bubble.ai{align-self:flex-start;background:rgba(255,255,255,.06);color:#efe9df;border:1px solid rgba(255,255,255,.09);border-bottom-left-radius:5px}
.bubble.ai b{color:#fff}
.ai-card{align-self:flex-start;max-width:92%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:12px;display:grid;gap:8px}
.ai-card .row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;color:#cfc8bb}
.ai-card .row b{color:#fff;font-weight:700}
.ai-card .row .v{font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.ai-card .row .v.warn{color:#f0a17f}
.typing{display:inline-flex;gap:4px;align-items:center;padding:12px 15px}
.typing i{width:7px;height:7px;border-radius:999px;background:#cfc8bb;opacity:.5;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
.chat .composer{display:flex;align-items:center;gap:8px;margin-top:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:8px 8px 8px 16px}
.chat .composer .ph{color:#8b857a;font-size:.85rem;flex:1}
.chat .composer .send{width:30px;height:30px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem}
@keyframes blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,125,91,.55)}70%{box-shadow:0 0 0 7px rgba(47,125,91,0)}100%{box-shadow:0 0 0 0 rgba(47,125,91,0)}}

/* 知識グラフ（テクノロジーpage） */
.kgraph{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:center}
.knode{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:12px 10px;text-align:center;font-size:.8rem;font-weight:700;box-shadow:var(--shadow)}
.knode .kc{font-size:.66rem;color:var(--muted);font-weight:700;display:block;margin-bottom:2px}
.kflow{color:var(--accent);font-weight:800;text-align:center}
@media(max-width:760px){ .kgraph{grid-template-columns:1fr;gap:8px} .kflow{transform:rotate(90deg)} }

/* レイヤー（3層モデル） */
.layers{display:grid;gap:14px}
.layer{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--paper)}
.layer .lv{font-weight:800;color:#fff;background:var(--ink);border-radius:10px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.layer.l2 .lv{background:var(--info)}
.layer.l3 .lv{background:var(--accent)}
.layer h3{font-size:1.08rem}
.layer p{color:var(--ink-soft);font-size:.92rem;margin-top:3px}

/* 機能ページの部品 */
.feat-hero{background:linear-gradient(180deg,#fffdf9,#f7f4ee);border-bottom:1px solid var(--line)}
.feat-hero .col-copy h1{font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.36}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.rev .col-vis{order:-1}
@media(max-width:860px){ .split{grid-template-columns:1fr;gap:30px} .split.rev .col-vis{order:0} }
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps3 .s{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--paper)}
.steps3 .s .k{font-weight:800;color:var(--accent);font-size:.85rem}
.steps3 .s h3{font-size:1.05rem;margin-top:6px}
.steps3 .s p{color:var(--ink-soft);font-size:.9rem;margin-top:6px}
.killlist{list-style:none;display:grid;gap:12px;max-width:560px;margin:28px auto 0}
.killlist li{display:flex;gap:.6em;align-items:flex-start;font-size:.96rem;color:var(--ink-soft);border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:13px 16px}
.killlist li::before{content:"✓";color:var(--ok);font-weight:800;flex:none}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.relcard{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--paper);transition:transform .15s ease, box-shadow .15s ease}
.relcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.relcard h3{font-size:1rem}
.relcard p{color:var(--ink-soft);font-size:.88rem;margin-top:6px}

/* 機能インデックス（hub） */
.fhub{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.fhub a{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--paper);display:flex;flex-direction:column;gap:8px;transition:transform .15s ease, box-shadow .15s ease, border-color .15s}
.fhub a:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d8d0c2}
.fhub a .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800}
.fhub a h3{font-size:1.04rem;display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.fhub a p{color:var(--ink-soft);font-size:.88rem}

/* 世界観（ダーク） */
.worldview{background:linear-gradient(180deg,#1b1813,#221e18);color:#f2ede4}
.worldview h2{color:#fff}.worldview .lead{color:#cfc8bb}
.wv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.wv-card{border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);padding:26px;background:rgba(255,255,255,.03)}
.wv-card h3{color:#fff;font-size:1.1rem}.wv-card p{color:#bfb8ab;font-size:.94rem;margin-top:8px}

/* 料金 */
.toggle{display:inline-flex;align-items:center;gap:6px;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:5px;margin:24px auto 0}
.toggle button{border:0;background:transparent;font:inherit;font-weight:700;font-size:.9rem;color:var(--muted);padding:9px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.5em}
.toggle button.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}
.toggle .save{font-size:.68rem;background:rgba(47,125,91,.14);color:var(--ok);border-radius:999px;padding:1px 8px;font-weight:800}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.plan.featured{border:2px solid var(--ink)}
.plan .pll{display:flex;align-items:center;justify-content:space-between}
.plan .badge{font-size:.66rem;font-weight:800;background:var(--ink);color:#fff;border-radius:999px;padding:3px 10px}
.plan h3{font-size:1.18rem}.plan .tagline{color:var(--muted);font-size:.86rem;margin-top:2px}
.price{display:flex;align-items:baseline;gap:6px;margin-top:18px}
.price .amt{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.price .per{color:var(--muted);font-size:.86rem}
.price-sub{font-size:.78rem;color:var(--ok);font-weight:700;margin-top:4px;min-height:1.1em}
.plan ul{list-style:none;margin:20px 0 0;display:grid;gap:11px}
.plan ul li{display:flex;gap:.6em;font-size:.92rem;color:var(--ink-soft);align-items:flex-start}
.plan ul li::before{content:"✓";color:var(--ok);font-weight:800;flex:none}
.plan .cta{margin-top:auto;padding-top:22px}.plan .cta .btn{width:100%}
.faq{display:grid;gap:14px;margin-top:36px;max-width:760px;margin-left:auto;margin-right:auto}
.qa{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--paper)}
.qa h4{font-size:1rem;margin-bottom:6px}.qa p{color:var(--ink-soft);font-size:.92rem}

/* フィナーレ */
.finale{background:radial-gradient(110% 120% at 50% -20%, rgba(181,71,31,.10), transparent 60%),linear-gradient(180deg,#fbf8f2,#f4efe6);text-align:center;border-top:1px solid var(--line)}
.triad{font-weight:800;color:var(--accent-ink);letter-spacing:.02em}

/* フッター */
footer.site{background:#17150f;color:#cfc8bb;padding:56px 0 40px}
footer.site .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
footer.site .brand{color:#fff;font-size:1.2rem}
footer.site a{color:#cfc8bb;font-size:.9rem;display:block;padding:5px 0}
footer.site a:hover{color:#fff}
footer.site h5{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;opacity:.7}
.legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#9b958a;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}

/* ── 公式ロゴ（改変禁止・画像として使用） ── */
.brand img.logo{height:22px;width:auto;display:block}
footer.site .brand img.logo{height:24px}

/* ── ヒーロー：2カラム＋立体グラフィック ── */
.hero-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:40px;align-items:center}
.hero-hook{display:inline-flex;align-items:center;gap:.5em;margin-top:16px;font-size:.92rem;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border:1px solid #eccdbf;border-radius:999px;padding:6px 15px}
.hero-hook::before{content:"?";display:inline-flex;width:18px;height:18px;border-radius:999px;background:var(--accent);color:#fff;align-items:center;justify-content:center;font-size:.72rem;font-weight:800}
.hv{position:relative;height:440px}
.hv .blob{position:absolute;right:-6%;top:-12%;width:66%;height:62%;background:radial-gradient(circle,rgba(181,71,31,.14),transparent 70%);filter:blur(8px);z-index:0;border-radius:50%}
.hv .blob.b2{left:-8%;bottom:-6%;top:auto;right:auto;width:50%;height:50%;background:radial-gradient(circle,rgba(44,93,143,.10),transparent 70%)}
.hv .c{position:absolute;border-radius:16px;box-shadow:var(--shadow-lg);background:var(--paper);border:1px solid var(--line)}
.hv .c-chat{width:300px;right:0;top:24px;z-index:3;overflow:hidden}
.hv .c-cost{width:248px;left:0;top:168px;z-index:2;padding:15px}
.hv .c-toast{width:250px;right:14px;bottom:6px;z-index:4;padding:12px 14px;display:flex;gap:11px;align-items:flex-start}
.hv .c-toast .ico{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
/* ヒーロー内チャット（静的スニペット） */
.hv .c-chat .top{display:flex;align-items:center;gap:.5em;background:#1b1813;color:#cfc8bb;font-size:.74rem;padding:9px 13px}
.hv .c-chat .top .dotlive{width:7px;height:7px;border-radius:999px;background:var(--ok)}
.hv .c-chat .body{background:linear-gradient(180deg,#211d17,#1b1813);padding:13px;display:grid;gap:9px}
.hv .c-chat .bu{align-self:flex-end;background:var(--accent);color:#fff;border-radius:13px;border-bottom-right-radius:4px;padding:8px 12px;font-size:.8rem;max-width:88%}
.hv .c-chat .ba{align-self:flex-start;background:rgba(255,255,255,.07);color:#efe9df;border:1px solid rgba(255,255,255,.1);border-radius:13px;border-bottom-left-radius:4px;padding:8px 12px;font-size:.8rem;max-width:92%}
.hv .c-chat .ba b{color:#fff}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hv{height:auto;display:grid;gap:14px;margin-top:8px}
  .hv .c{position:static;width:auto!important;box-shadow:var(--shadow)}
  .hv .blob{display:none}
}

/* ── AIと経営する：アクション・ギャラリー ── */
.ask-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.ask-card{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--paper);transition:transform .16s ease, box-shadow .16s ease;display:flex;flex-direction:column;gap:12px}
.ask-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ask-card .cat{align-self:flex-start;font-size:.64rem;font-weight:800;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.ask-card .q{font-weight:700;font-size:.96rem;line-height:1.6;display:flex;gap:.5em;align-items:flex-start}
.ask-legend{display:inline-flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:14px;font-size:.8rem;color:var(--ink-soft)}
.ask-legend span{display:inline-flex;align-items:center;gap:.5em}
.ask-legend i{width:10px;height:10px;border-radius:999px;display:inline-block}
.ask-card .q .qi{color:var(--accent);font-weight:800;flex:none}
.ask-card .res{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;font-weight:800;border-radius:999px;padding:5px 12px}
.ask-card .res.r-up{color:var(--ok);background:rgba(47,125,91,.1)}
.ask-card .res.r-warn{color:var(--accent-ink);background:var(--accent-soft)}
.ask-card .res.r-info{color:var(--info);background:rgba(44,93,143,.1)}
@media(max-width:760px){ .ask-gallery{grid-template-columns:1fr} }

/* ── 通知モック ── */
.notif{max-width:380px;margin:0 auto;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow-lg);overflow:hidden}
.notif .nh{display:flex;align-items:center;gap:.5em;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:.86rem;background:#fbf9f5}
.notif .nh .bell{position:relative}
.notif .nh .bell .badge{position:absolute;top:-4px;right:-6px;background:var(--accent);color:#fff;font-size:.58rem;font-weight:800;border-radius:999px;padding:0 5px}
.notif .ni{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.notif .ni:last-child{border-bottom:0}
.notif .ni .ic{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.notif .ni .ic.warn{background:var(--accent-soft);color:var(--accent-ink)}
.notif .ni .ic.up{background:rgba(47,125,91,.12);color:var(--ok)}
.notif .ni .ic.info{background:rgba(44,93,143,.1);color:var(--info)}
.notif .ni .tx{font-size:.82rem;line-height:1.55}
.notif .ni .tx b{font-weight:700}
.notif .ni .tx .meta{color:var(--muted);font-size:.7rem;margin-top:2px}

/* ── AIショーケース（実機の3チャットをタブ切替で再現） ── */
.showcase{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-lg)}
.sc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.sc-live{display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;font-weight:700;color:var(--muted)}
.sc-live::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--sc,#2f7d5b);animation:scglow 1.6s ease-in-out infinite}
.sc-tabs{display:inline-flex;gap:4px;background:var(--cream);border-radius:999px;padding:4px}
.sc-tab{border:0;background:transparent;font:inherit;font-weight:700;font-size:.82rem;color:var(--muted);padding:8px 15px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.4em}
.sc-tab.on{background:var(--paper);box-shadow:var(--shadow);color:var(--sc,var(--ink))}
.sc-panels{position:relative}
.sc-panel[hidden]{display:none}
.sc-body{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:26px;min-height:392px;background:linear-gradient(135deg,var(--sc-bg,rgba(47,125,91,.06)),transparent 62%)}
@media(max-width:820px){ .sc-body{grid-template-columns:1fr;min-height:0} }
.sc-copy{display:flex;flex-direction:column;justify-content:center}
.sc-eyebrow{display:inline-flex;align-items:center;gap:.4em;width:fit-content;font-size:.72rem;font-weight:800;color:var(--sc,#2f7d5b);background:var(--sc-soft,rgba(47,125,91,.1));border-radius:999px;padding:4px 11px}
.sc-title{font-size:clamp(1.3rem,2.3vw,1.6rem);font-weight:700;line-height:1.4;margin-top:12px;white-space:pre-line;letter-spacing:-.005em}
.sc-sub{color:var(--ink-soft);font-size:.92rem;margin-top:10px;max-width:30em}
.sc-visual{margin-top:20px}
.sc-chatwrap{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.72);backdrop-filter:blur(4px);display:flex;flex-direction:column;min-height:310px;overflow:hidden}
.sc-chattop{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:10px 14px;font-size:.72rem;color:var(--muted)}
.sc-chattop .d{width:9px;height:9px;border-radius:999px;display:inline-block}
.sc-chattop .live{margin-left:auto;display:inline-flex;align-items:center;gap:.4em;font-weight:800;font-size:.64rem;color:var(--sc,#2f7d5b);background:var(--sc-soft);border-radius:999px;padding:2px 8px}
.sc-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:16px}
.sc-b{max-width:88%;border-radius:15px;padding:9px 13px;font-size:.84rem;line-height:1.65;animation:scrise .4s ease both}
.sc-b.you{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.sc-b.ai{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink)}
.sc-typing{align-self:flex-start;display:inline-flex;gap:4px;border:1px solid var(--line);background:var(--paper);border-radius:15px;padding:12px 14px}
.sc-typing span{width:6px;height:6px;border-radius:999px;background:var(--sc,#2f7d5b);animation:scdot 1.1s ease-in-out infinite}
.sc-typing span:nth-child(2){animation-delay:.16s}.sc-typing span:nth-child(3){animation-delay:.32s}
/* ショーケース内ビジュアル */
.sc-chips{display:flex;flex-wrap:wrap;gap:8px}
.sc-chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 13px;font-size:.78rem;font-weight:600;box-shadow:var(--shadow)}
.sc-statcard{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--paper);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);margin-top:14px}
.sc-statcard .big{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.sc-statcard .lbl{font-size:.66rem;color:var(--muted)}
.sc-statcard .rate{border-radius:999px;background:var(--sc-soft);color:var(--sc);font-weight:800;font-size:.82rem;padding:5px 12px}
.sc-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.sc-row .nm{width:84px;font-size:.72rem;color:var(--muted);flex:none}
.sc-bar{height:9px;flex:1;border-radius:999px;background:var(--cream-deep);overflow:hidden}
.sc-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--sc)}
.sc-panel.play .sc-bar i{animation:scbar .9s cubic-bezier(.22,1,.36,1) forwards}
.sc-toggle{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow);margin-bottom:8px;font-size:.82rem;font-weight:600}
.sc-sw{width:42px;height:23px;border-radius:999px;background:var(--cream-deep);position:relative;flex:none}
.sc-sw i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:999px;background:var(--sc);transition:left .4s cubic-bezier(.22,1,.36,1)}
.sc-panel.play .sc-toggle .sc-sw i{left:21px}
.sc-impact{text-align:center;margin-top:8px}
.sc-impact .v{font-size:1.5rem;font-weight:800;color:var(--sc)}
@keyframes scrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes scdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes scglow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes scbar{to{width:var(--w)}}
@media(prefers-reduced-motion:reduce){
  .sc-live::before,.sc-typing span{animation:none}
  .sc-panel.play .sc-bar i{animation:none;width:var(--w)}
  .sc-b{animation:none}
}

/* ── AIと経営する：価値の柱（覚える/提案/一緒に考える/決める） ── */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.pillar{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--paper)}
.pillar .pn{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;margin-bottom:12px}
.pillar h3{font-size:1.02rem}
.pillar p{color:var(--ink-soft);font-size:.88rem;margin-top:6px}
@media(max-width:860px){ .pillars{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .pillars{grid-template-columns:1fr} }
/* 「何を覚えているの？」記憶チップ */
.memory-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px;max-width:680px;margin-left:auto;margin-right:auto}
.memory-chips .mc{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 16px;font-weight:700;font-size:.9rem;box-shadow:var(--shadow)}
.memory-chips .mc .s{color:var(--muted);font-weight:600;font-size:.78rem;margin-left:.4em}

/* ===========================================================
   モーション（上質・控えめ） — prefers-reduced-motion を尊重
   =========================================================== */
.reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1.05s cubic-bezier(.16,.84,.34,1), transform 1.05s cubic-bezier(.16,.84,.34,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.float-soft{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .float-soft{animation:none}
  .chat .dotlive,.typing i{animation:none}
  html{scroll-behavior:auto}
}

/* ── レスポンシブ共通 ── */
@media(max-width:900px){
  .g3,.g4,.loop,.wv-grid,.persona-rail,.stat-row,.steps3,.relgrid,.fhub,.plans{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .cluster{grid-template-columns:1fr;gap:14px}
  .flip-row{grid-template-columns:1fr;gap:8px}
  .flip-row .arrow{transform:rotate(90deg);justify-self:start}
}
@media(max-width:640px){
  section{padding:54px 0}
  .reassure{gap:12px}
}

/* ===========================================================
   モバイル磨き込み（徹底チェック反映）＋ 法務ページ
   =========================================================== */
body{overflow-x:hidden}
img,svg{max-width:100%}

@media(max-width:520px){
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
}
@media(max-width:440px){
  .nav .btn-primary{padding:8px 13px;font-size:.85rem}
  .brand img.logo{height:20px}
  h1{font-size:clamp(1.78rem,7.4vw,2.3rem)}
  .hero-hook{font-size:.84rem;padding:5px 12px}
  .sc-tab{padding:7px 11px;font-size:.76rem;gap:.2em}
  .sc-head{padding:12px 12px}
  .sc-body{padding:18px}
  .cost-table{font-size:.74rem}
  .cost-table th,.cost-table td{padding:7px 5px}
  .eyebrow{font-size:.68rem}
  section{padding:48px 0}
  .wrap{padding:0 18px}
}
/* モバイルでヒーローの装飾カードが詰まりすぎないよう余白を確保 */
@media(max-width:880px){
  .hv{margin-top:4px}
  .hv .c-chat,.hv .c-cost,.hv .c-toast{max-width:420px;margin-left:auto;margin-right:auto}
}
/* タップ領域確保 */
.nav.open .navlink{min-height:44px;display:flex;align-items:center}

/* ── 法務ページ（読みやすいプロース） ── */
.legal-hero{background:var(--cream);border-bottom:1px solid var(--line)}
.legal-prose{max-width:760px;margin:0 auto}
.legal-prose h2{font-size:1.18rem;margin:34px 0 10px;padding-top:6px}
.legal-prose h3{font-size:1.02rem;margin:22px 0 6px}
.legal-prose p{margin:0 0 12px;color:var(--ink-soft);font-size:.95rem;line-height:1.9}
.legal-prose ul,.legal-prose ol{margin:0 0 14px 1.2em;color:var(--ink-soft);font-size:.95rem;line-height:1.9}
.legal-prose li{margin:4px 0}
.legal-prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.legal-prose strong{color:var(--ink)}
.legal-updated{color:var(--muted);font-size:.82rem;margin-top:8px}
.legal-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:.9rem}
.legal-table th{text-align:left;vertical-align:top;font-weight:700;width:34%;min-width:140px;padding:14px 16px 14px 0;border-top:1px solid var(--line);color:var(--ink)}
.legal-table td{vertical-align:top;padding:14px 0;border-top:1px solid var(--line);color:var(--ink-soft)}
.contact-cards{display:grid;gap:14px;margin:18px 0 28px}
.contact-card{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.contact-card .mi{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.contact-card .em{font-weight:700;font-size:.96rem}
.contact-card .ds{font-size:.82rem;color:var(--muted);margin-top:2px}
@media(max-width:520px){ .legal-table th{width:auto;display:block;border-top:1px solid var(--line);padding:12px 0 2px} .legal-table td{display:block;padding:0 0 12px;border-top:0} }

/* ===========================================================
   ブランド・イントロ（飲食店の頭脳：知識グラフのモーション）
   =========================================================== */
.brain-hero{position:relative;overflow:hidden;min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(120% 95% at 50% 6%, #241f18 0%, #1a160f 52%, #14110b 100%);border-bottom:1px solid rgba(255,255,255,.06)}
.brain-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.brain-bg svg{width:100%;height:100%}
.brain-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 58% at 50% 47%, rgba(20,17,11,.84) 0%, rgba(20,17,11,.66) 50%, rgba(20,17,11,.18) 78%, rgba(20,17,11,0) 100%)}
.brain-msg{position:relative;z-index:2;padding:0 24px;max-width:1040px}
.brain-kicker{font-size:.74rem;letter-spacing:.3em;color:#c96e46;font-weight:700;text-transform:uppercase;opacity:0;animation:bhfade 1s ease .2s forwards}
.brain-title{font-size:clamp(1.6rem,3.8vw,2.7rem);font-weight:700;letter-spacing:.02em;line-height:1.5;margin-top:22px;color:#f5f0e7}
.brain-title .l{display:block;opacity:0;transform:translateY(16px);animation:bhrise 1.1s cubic-bezier(.16,.8,.3,1) forwards}
.brain-title .l1{animation-delay:.45s}
.brain-title .l2{animation-delay:.72s;color:#cd724a}
.brain-sub{margin-top:24px;font-size:clamp(1rem,1.6vw,1.22rem);color:#cfc8bb;opacity:0;animation:bhfade 1.2s ease 1.15s forwards}
.brain-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;opacity:0;animation:bhfade 1s ease 1.7s forwards;color:var(--muted);font-size:.66rem;letter-spacing:.18em;display:flex;flex-direction:column;align-items:center;gap:9px}
.brain-scroll .chev{width:16px;height:16px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);animation:bhbounce 1.8s ease-in-out infinite}
@keyframes bhfade{to{opacity:1}}
@keyframes bhrise{to{opacity:1;transform:none}}
@keyframes bhbounce{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}

/* 知識グラフ（Apple風 ガラスUI） */
.brain-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1340px,96vw);aspect-ratio:1200/700}
.brain-svg{position:absolute;inset:0;width:100%;height:100%}
.bg-edge{stroke:#b0603f;stroke-opacity:.34;fill:none;stroke-width:1.1}
.bg-edge.flow{stroke-dasharray:3 12;animation:bgdash 3.6s linear infinite}
@keyframes bgdash{to{stroke-dashoffset:-45}}
.bg-signal{fill:#d2784f;filter:drop-shadow(0 0 6px rgba(190,90,55,.8));animation:bgflow linear infinite}
@keyframes bgflow{from{offset-distance:0%}to{offset-distance:100%}}
/* 中心のやわらかな発光 */
.bcore-glow{position:absolute;left:50%;top:50%;width:340px;height:340px;border-radius:999px;background:radial-gradient(circle,rgba(176,86,52,.34),transparent 68%);animation:bcoreP 4.4s ease-in-out infinite}
@keyframes bcoreP{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
/* ガラスのノード（frosted glass） */
.bnode{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
  padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;color:#e7e1d6;
  background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12)}
.bnode .bdot{width:7px;height:7px;border-radius:999px;background:#d2784f;box-shadow:0 0 10px rgba(190,100,60,.8)}

@media(max-width:760px){ .brain-hero{min-height:80vh} .brain-stage{width:96vw} .bnode{font-size:11px;padding:7px 12px} .bcore-glow{width:240px;height:240px} }
@media(prefers-reduced-motion:reduce){
  .brain-kicker,.brain-title .l,.brain-sub,.brain-scroll{animation:none;opacity:1;transform:none}
  .bg-edge.flow,.bg-signal,.bcore-glow,.bnode,.brain-scroll .chev{animation:none}
  .bnode{transform:translate(-50%,-50%)}
}

/* ── ヒーロー下の橋渡し（痛みの問い → コンテンツへ） ── */
.bridge{background:var(--paper);text-align:center;padding:clamp(96px,13vw,156px) 0}
.bridge-q{font-size:clamp(1.45rem,3.4vw,2.4rem);font-weight:600;letter-spacing:.01em;line-height:1.55;max-width:940px;margin:0 auto;padding:0 24px}
.bridge-q .tw-cursor{display:inline-block;width:3px;height:1em;background:var(--accent);margin-left:.05em;vertical-align:-.14em;border-radius:1px;animation:twblink 1.05s steps(1) infinite}
@keyframes twblink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.bridge-q .tw-cursor{display:none}}
.bridge-sub{margin-top:18px;color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.18rem);padding:0 24px}

/* ── ダークヒーロー上の透過ヘッダー（スクロールでソリッドに） ── */
header.site{transition:background .3s ease, border-color .3s ease}
header.site.over-dark{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
header.site.over-dark .navlink{color:rgba(245,240,231,.82)}
header.site.over-dark .navlink:hover{color:#fff;background:rgba(255,255,255,.1)}
header.site.over-dark .brand img.logo{filter:invert(1) brightness(1.8)}
header.site.over-dark .btn-primary{background:#fff;color:#17150f}
header.site.over-dark .btn-primary:hover{background:#efe9df}
header.site.over-dark .menu-toggle{color:#f5f0e7}

/* ===========================================================
   トップページ ダークテーマ（.theme-dark を body に付与）
   変数を上書きすることで var() ベースの部品が自動でダーク化する。
   ハードコードのライト箇所だけ個別に上書きする。
   =========================================================== */
.theme-dark{
  --ink:#f1ece2;
  --ink-soft:#c4bcad;
  --muted:#938a7c;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --paper:#1c1810;
  --cream:#211c14;
  --cream-deep:#272117;
  --accent:#b65a39;        /* 赤茶（テラコッタ／レンガ・深い赤褐色） */
  --accent-ink:#cf7c55;
  --accent-soft:rgba(182,90,57,.18);
  --ok:#5cae86;
  --info:#84b3df;
  background:#14110b;
  color:var(--ink);
}
/* ヘッダー（ダーク・ソリッド）。over-dark の透過状態とも両立 */
.theme-dark header.site{background:rgba(20,17,11,.92);border-bottom-color:rgba(255,255,255,.08);-webkit-backdrop-filter:none;backdrop-filter:none;transform:translateZ(0)}
.theme-dark .nav a.navlink{color:rgba(241,236,226,.72)}
.theme-dark .nav a.navlink:hover{color:#fff;background:rgba(255,255,255,.08)}
.theme-dark .nav a.navlink.active{color:#fff}
.theme-dark header.site .brand img.logo{filter:invert(1) brightness(1.85)}
.theme-dark .btn-primary{background:#f1ece2;color:#17150f}
.theme-dark .btn-primary:hover{background:#fff}
.theme-dark .menu-toggle{color:#f1ece2}
/* ヒーロー／フィナーレの背景（ライトのハードコードを上書き） */
.theme-dark .hero{background:radial-gradient(120% 90% at 88% -10%, rgba(192,129,79,.12), transparent 55%), linear-gradient(180deg,#1a160f,#14110b);border-bottom-color:rgba(255,255,255,.07)}
.theme-dark .finale{background:radial-gradient(110% 120% at 50% -20%, rgba(192,129,79,.14), transparent 60%), linear-gradient(180deg,#16120c,#1a160f);border-top-color:rgba(255,255,255,.07)}
/* ループの番号（var(--ink)=cream で潰れるため accent 地に） */
.theme-dark .loop .step .k{background:var(--accent);color:#1a140d}
/* 影をダーク向けに */
.theme-dark .card,.theme-dark .persona,.theme-dark .flip-row,.theme-dark .loop .step,.theme-dark .pain-card{box-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ===========================================================
   全ページ ダーク化：追加の上書き
   =========================================================== */
.theme-dark .feat-hero{background:linear-gradient(180deg,#1a160f,#14110b);border-bottom-color:rgba(255,255,255,.07)}
.theme-dark .legal-hero{background:#1a160f;border-bottom-color:rgba(255,255,255,.07)}
/* 番号バッジ等（var(--ink)=cream で潰れる箇所） */
.theme-dark .layer .lv{background:rgba(255,255,255,.12);color:#f1ece2}
.theme-dark .layer.l2 .lv{background:var(--info);color:#10243a}
.theme-dark .layer.l3 .lv{background:var(--accent);color:#1a140d}
.theme-dark .plan .badge{background:var(--accent);color:#fff}
.theme-dark .plan.featured{border-color:var(--accent)}
.theme-dark .toggle button.on{background:rgba(255,255,255,.13);color:#fff}
/* 実画面モックはライトUIのまま：内部だけ変数をライトに再宣言（暗ページ上の“実画面風”） */
.theme-dark .mock-window,
.theme-dark .phone,
.theme-dark .notif,
.theme-dark .showcase{
  --ink:#17150f; --ink-soft:#4c4944; --muted:#8a857c;
  --line:#e7e2d8; --line-soft:#efeae0; --paper:#ffffff;
  --cream:#f7f4ee; --cream-deep:#efeae0;
  --accent:#b5471f; --accent-ink:#8f3415; --accent-soft:#f4e3da;
  --ok:#2f7d5b; --info:#2c5d8f;
  color:#17150f;
}

/* ── ダーク向け プラン/状態バッジ（視認性最適化・統一） ── */
.theme-dark .tag{border:1px solid transparent;padding:3px 11px;font-weight:600;font-size:.66rem;letter-spacing:.03em;line-height:1.4;border-radius:999px}
.theme-dark .tag.std{background:rgba(92,174,134,.15);color:#8ad3aa;border-color:rgba(92,174,134,.34)}
.theme-dark .tag.pro{background:rgba(207,146,89,.17);color:#e6b98a;border-color:rgba(207,146,89,.40)}
.theme-dark .tag.soon{background:rgba(255,255,255,.06);color:#a89e8e;border-color:rgba(255,255,255,.14)}
/* チップ内の「準備中」小バッジ（クラスタ chip 内）も同調 */
.theme-dark .chip .soon{background:rgba(255,255,255,.10);color:#cfc6b6}

/* リビールのスタッガを少しゆったり・滑らかに */
.reveal.d1{transition-delay:.10s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* ── Apple風：アクセント見出しのグラデーション（深いテラコッタ→明るいカッパー） ── */
.theme-dark .accent-line,
.theme-dark .brain-title .l2{
  background:linear-gradient(118deg, #e6ab73 0%, #cd7344 46%, #a94e2b 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* 橋渡しの問いはタイプライターで1文字ずつspan化されるため、グラデーション無効（フラット色） */
.theme-dark .bridge-q .accent-line{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:#d2814f;color:#d2814f}

/* ── 改行の最適化：見出しは行を均等化、本文は行末の孤立文字を防ぐ ── */
h1,h2,h3,.brain-title,.bridge-q,.sc-title,.feat-hero .col-copy h1{text-wrap:balance}
.lead,.brain-sub,.sc-sub,.legal-prose p,.killlist li,.persona .ql,.pain-card .voice,.flip-row .after,.flip-row .before,.cluster .label p,.qa p{text-wrap:pretty}
.measure-c{max-width:760px}

/* ── 微調整：2カラムヒーロー見出しを少し小さく（“る。”の孤立防止）／料金の箇条書きの単語途中折り返し防止 ── */
.hero h1{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.plan ul li{text-wrap:pretty}
.plan ul li strong{white-space:nowrap}

/* ============================================================
   2026-06-23 トップ磨き込み: ヒーロー視認性 / モバイル整列の統一 /
   ブロック余白のゆとり / 可読フォント(Apple級)。末尾追記で上書き。
   ============================================================ */

/* ── ① ヒーロー: 背景ノードと見出しの重なりを解消(視認性＋高級感) ── */
/* 中央の暗幕を強め、見出しは“ほぼ無地の暗部”に乗せる。グラフは上下・隅に余韻として残す。 */
.brain-veil{
  background:radial-gradient(68% 62% at 50% 48%,
    rgba(20,17,11,.94) 0%, rgba(20,17,11,.84) 46%,
    rgba(20,17,11,.42) 74%, rgba(20,17,11,0) 100%);
}
.brain-title{font-size:clamp(2rem,5.4vw,2.95rem);line-height:1.46;letter-spacing:.015em}
.brain-sub{font-size:clamp(1.12rem,2.1vw,1.32rem);line-height:1.85;margin-top:26px}
.brain-kicker{font-size:.82rem;letter-spacing:.28em}

/* ── ④ 可読フォント(Apple級に引き上げ) ── */
h1{font-size:clamp(2rem,4.6vw,2.95rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.5rem)}
.hero h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.lead{font-size:clamp(1.12rem,1.6vw,1.28rem);line-height:1.85}
.pain-card .voice{font-size:1.12rem;line-height:1.72}
.loop .step p{font-size:1.02rem;line-height:1.8}
.persona .who{font-size:1.06rem}
.persona .ql{font-size:1.01rem;line-height:1.75}
.cluster .label p{font-size:.98rem;line-height:1.7}
.flip-row .before,.flip-row .after{font-size:1.05rem;line-height:1.7}
.seg{font-size:.78rem}

/* ── ③ ブロック余白をゆったり(モバイルで特に) ── */
section{padding:clamp(80px,12vw,118px) 0}

/* ── ② モバイル: 整列を中央に統一＋ヒーローの暗幕をさらに強く＋余白 ── */
@media(max-width:760px){
  /* ヒーロー: 横にも広い強い暗幕で両端ノードまで沈め、ノードは淡い余韻に */
  .brain-veil{
    background:radial-gradient(122% 56% at 50% 50%,
      rgba(20,17,11,.96) 0%, rgba(20,17,11,.92) 50%,
      rgba(20,17,11,.6) 78%, rgba(20,17,11,0) 100%);
  }
  .bnode{opacity:.5}
  .brain-hero{min-height:86vh}
  .brain-msg{padding:0 26px}

  /* 左寄せの3セクション(2つ目ヒーロー/AIと経営する/料金)を中央に揃える */
  .hero .hero-grid > div:first-child{text-align:center}
  .hero .hero-grid .lead{margin-left:auto;margin-right:auto}
  .hero .cta-row{justify-content:center}
  .hero .reassure{justify-content:center}
  .worldview .wrap > .eyebrow,
  .worldview .wrap > h2,
  .worldview .wrap > .lead,
  .finale .wrap > .seg,
  .finale .wrap > h2,
  .finale .wrap > .lead{text-align:center;margin-left:auto;margin-right:auto}

  /* 各ブロックの導入→中身の間にもう少しゆとり */
  .grid{gap:18px}
}

/* ============================================================
   2026-06-23 b: Safari黒化対策 / チャット固定幅 / 浮遊カードのモバイル整頓 / 整列の確実化
   ============================================================ */

/* チャットのプレビューは固定幅に。入力で“左右に広がる”チープさを解消(PC/モバイル共通) */
.chat{width:min(560px,100%)}

/* ヒーロー: >100%の特殊グラデや強すぎる塗りを撤回し、Safariでも安定する穏やかな暗幕に。
   茶系の深みと薄いグラフを残しつつ、見出しはしっかり読める。 */
.brain-hero{transform:translateZ(0)}
.brain-veil{
  background:radial-gradient(72% 60% at 50% 48%,
    rgba(20,17,11,.9) 0%, rgba(20,17,11,.74) 50%,
    rgba(20,17,11,.34) 80%, rgba(20,17,11,0) 100%);
}

@media(max-width:760px){
  /* ★Safari対策の本丸: backdrop-filter(ガラス)を外す。再描画でヒーローが真っ黒に落ちる主因。
     ノードは素の半透明チップにして薄く残す。 */
  .bnode{
    opacity:.42;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(42,36,28,.5);
    box-shadow:0 8px 22px -14px rgba(0,0,0,.5);
  }
  .brain-veil{
    background:radial-gradient(82% 56% at 50% 48%,
      rgba(20,17,11,.9) 0%, rgba(20,17,11,.72) 52%,
      rgba(20,17,11,.3) 82%, rgba(20,17,11,0) 100%);
  }

  /* 浮遊カード: モバイルは“浮遊”を止めてコンパクトに整列(乱雑さを解消) */
  .float-soft{animation:none!important}
  .hv .c-chat,.hv .c-cost,.hv .c-toast{max-width:336px}

  /* worldview/finale の導入(eyebrow/seg/h2/lead)を確実に中央へ(取りこぼし防止) */
  .worldview .eyebrow,.worldview > .wrap > h2,.worldview > .wrap > .lead,
  .finale .seg,.finale > .wrap > h2,.finale > .wrap > .lead{
    text-align:center;margin-left:auto;margin-right:auto;
  }
}

/* ============================================================
   2026-06-23 c: ヘッダー刷新(スライドインdrawer/左ハンバーガー・中央ロゴ・右CTA)
   ＋SCROLL下の余白＋紙メニューMockの視認性
   ============================================================ */

/* デスクトップ: ロゴ左→リンク＋CTA右。drawer/backdropは出さない。 */
.nav{position:relative}
.navlinks{display:flex;align-items:center;gap:4px}
.navlinks .navlink{padding:8px 12px;border-radius:10px;font-size:.92rem;color:var(--ink-soft);font-weight:600}
.navlinks .navlink:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.navlinks .navlink.active{color:var(--ink)}
.nav .brand{margin-right:auto}
.cta-header{margin-left:8px}
.navdrawer,.nav-backdrop{display:none}
header.site.over-dark .navlinks .navlink{color:rgba(245,240,231,.82)}
header.site.over-dark .navlinks .navlink:hover{color:#fff;background:rgba(255,255,255,.1)}

@media(max-width:760px){
  /* 配置: 左ハンバーガー / 中央ロゴ / 右CTA */
  .menu-toggle{display:inline-flex;order:0;margin:0;font-size:1.5rem}
  .nav .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
  .nav .brand .logo{height:23px;width:auto}
  .navlinks{display:none}
  .cta-header{margin-left:auto;order:3;padding:9px 15px;font-size:.85rem}

  /* drawer 本体(左からスライドイン・body直下=viewport基準) */
  .navdrawer{
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    position:fixed;top:0;left:0;height:100dvh;width:min(82vw,330px);
    background:#1a160f;border-right:1px solid rgba(255,255,255,.1);
    box-shadow:26px 0 70px -28px rgba(0,0,0,.75);
    transform:translateX(-100%);transition:transform .36s cubic-bezier(.16,.8,.3,1);
    z-index:120;padding:84px 22px 30px;
  }
  body.nav-open .navdrawer{transform:translateX(0)}
  .navdrawer .navlink{display:block;color:var(--ink);font-size:1.06rem;font-weight:600;padding:14px 14px;border-radius:12px}
  .navdrawer .navlink:hover{background:rgba(255,255,255,.06)}
  .navdrawer .navlink.active{color:var(--accent-ink)}
  .navdrawer-close{position:absolute;top:14px;right:12px;background:none;border:0;color:var(--ink);font-size:1.9rem;line-height:1;cursor:pointer;padding:6px 10px}

  /* 暗幕 */
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:110}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}

  /* 旧 .nav.open(上部スタック)の名残を無効化 */
  .nav.open{height:64px;flex-wrap:nowrap;padding-bottom:0}
}

/* SCROLL インジケータの下にゆとり */
.brain-scroll{bottom:52px}

/* 紙メニューMock: ダークテーマの明色を継承して薄くなる問題→器でライト変数を再宣言し濃い文字に */
.paper-mock{--ink:#1c1812;--ink-soft:#4c4944;--muted:#7a756c;--line:#e4ded1;color:#1c1812;border:1px solid #e4ded1}

/* ============================================================
   2026-06-23 d: サイドメニュー(drawer)の中身を充実(信頼感)
   ============================================================ */
@media(max-width:760px){
  .navdrawer{gap:0;overflow-y:auto}
  .nd-tagline{font-size:1.04rem;line-height:1.7;color:var(--ink);font-weight:600;margin:0 6px 16px;letter-spacing:.01em}
  .nd-nav{display:flex;flex-direction:column;gap:2px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
  .navdrawer .nd-nav .navlink{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:12px}
  .navdrawer .nd-nav .nd-l{font-size:1.06rem;font-weight:700;color:var(--ink)}
  .navdrawer .nd-nav .nd-s{font-size:.78rem;color:var(--muted);font-weight:500}
  .navdrawer .nd-nav .navlink.active .nd-l{color:var(--accent-ink)}
  .nd-trust{list-style:none;margin:16px 6px 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:9px}
  .nd-trust li{font-size:.85rem;color:#cfc8bb;display:flex;align-items:center;gap:.5em}
  .nd-trust .tick{color:#5bb38a;font-weight:800}
  .nd-cta{margin-top:20px;width:100%;justify-content:center;padding:13px}
  .nd-foot{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 16px}
  .nd-foot a{font-size:.74rem;color:var(--muted)}
  .nd-foot a:hover{color:var(--ink)}
}

/* ============================================================
   2026-06-23 e: ヒーロー全面刷新(全デバイス共通)
   第1ビート=動く接続グラフ＋英語キャッチ / スクロールで第2ビート=日本語コピー
   ============================================================ */
.brain-hero{display:block;min-height:0;background:radial-gradient(125% 80% at 50% 0%, #241f18 0%, #1a160f 55%, #14110b 100%)}

/* 第1ビート: グラフ主役＋英語キャッチ */
.bh-intro{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.bh-intro .brain-bg{position:absolute;inset:0;z-index:0}
.bh-intro .brain-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(46% 40% at 50% 50%, rgba(20,17,11,.72) 0%, rgba(20,17,11,.44) 46%, rgba(20,17,11,0) 74%)}
.bh-intro-msg{position:relative;z-index:2;padding:0 24px}
.bh-intro .brain-kicker{position:relative;z-index:2}
.brain-en{font-size:clamp(2.5rem,8.4vw,5.4rem);font-weight:700;line-height:1.04;letter-spacing:.012em;color:#f5f0e7;margin-top:16px;
  opacity:0;transform:translateY(16px);animation:bhrise 1.1s cubic-bezier(.16,.8,.3,1) .4s forwards}
.brain-en .ac{color:#cd724a}
.bh-intro .brain-scroll{bottom:42px}

/* 第2ビート: 日本語の本命コピー(クリーンな暗部・スクロールで現れる) */
.bh-headline{position:relative;min-height:86dvh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(180deg,#14110b 0%,#181308 100%);border-top:1px solid rgba(255,255,255,.05)}
.bh-headline .brain-msg{position:relative;z-index:2;padding:0 26px;max-width:1040px}
.bh-headline .brain-title .l{animation:none;opacity:1;transform:none}

/* グラフのノードを“見える”ように(主役) */
.bnode{opacity:1}

@media(max-width:760px){
  .bnode{opacity:1;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(46,39,29,.74);font-size:11px;padding:7px 12px}
  .bh-intro .brain-veil{background:radial-gradient(62% 44% at 50% 50%, rgba(20,17,11,.78) 0%, rgba(20,17,11,.46) 48%, rgba(20,17,11,0) 78%)}
  .brain-en{font-size:clamp(2rem,10vw,3.6rem)}
}
@media(prefers-reduced-motion:reduce){ .brain-en{animation:none;opacity:1;transform:none} }

/* ============================================================
   2026-06-23 f: ヒーローのグラフを鮮明・動的に＋できること/機能詳細ページ調整
   ============================================================ */
/* --- グラフを“見える・動く”ように(モバイルで線が縮小されて消えるのを解消) --- */
.bg-edge{stroke:#c06b45;stroke-opacity:.55;stroke-width:1.5}
.bg-signal{fill:#e0855a;filter:drop-shadow(0 0 7px rgba(214,110,66,.95))}
.bcore-glow{background:radial-gradient(circle,rgba(196,100,60,.46),rgba(196,100,60,.12) 42%,transparent 68%)}
.bnode{opacity:1;color:#efe7da}
.bnode .bdot{box-shadow:0 0 12px rgba(214,120,72,1)}
@media(max-width:760px){
  .brain-stage{width:122vw}
  .bcore-glow{width:300px;height:300px}
  .bnode{opacity:1;background:rgba(50,42,31,.85);border-color:rgba(214,150,110,.30);color:#f0e9dd}
}

/* --- できること: ヒーローと最初のグループの間の空白を詰める(モバイル) --- */
@media(max-width:760px){
  .feat-hero{padding-bottom:clamp(26px,6vw,44px)}
  .feat-hero + section{padding-top:clamp(30px,7vw,52px)}
}

/* --- 機能詳細: 機能名を大きく / 戻るをはっきり / 上部CTAは下に集約(モバイル) --- */
.feat-back{display:inline-flex;align-items:center;gap:.45em;font-weight:700;font-size:.86rem;color:var(--accent-ink);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:rgba(255,255,255,.04);
  transition:background .15s,border-color .15s}
.feat-back:hover{background:rgba(255,255,255,.09);border-color:var(--accent)}
.feat-name{font-size:clamp(1.08rem,2.6vw,1.42rem);font-weight:800;color:var(--ink);letter-spacing:.01em;
  display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.feat-hero .col-copy h1{font-size:clamp(1.9rem,4.1vw,2.7rem);line-height:1.32}
@media(max-width:760px){
  .cta-top{display:none}
}

/* ============================================================
   2026-06-23 g: ヒーロー再設計
   第1=抽象的なデジタル粒子モーション＋英語 / スクロールで第2=接続グラフ＋日本語
   ============================================================ */
/* 第1ビート: 粒子モーション＋英語キャッチ */
.bh-intro{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.bh-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.bh-intro-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 50% at 50% 50%, rgba(20,17,11,.66) 0%, rgba(20,17,11,.30) 50%, rgba(20,17,11,0) 80%)}
.bh-intro .bh-intro-msg{position:relative;z-index:2;padding:0 24px}
.bh-intro .brain-kicker{position:relative;z-index:2}
.bh-intro .brain-scroll{bottom:42px}

/* 第2ビート: 接続グラフを収まりよく＋日本語(スクロールで出現)。黒余白/見切れを解消 */
.bh-graph{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(22px,5vw,46px);padding:clamp(70px,11vw,120px) 22px;text-align:center;
  background:linear-gradient(180deg,#14110b 0%,#171309 100%);border-top:1px solid rgba(255,255,255,.05)}
.bh-graph-stage{position:relative;width:min(560px,88vw);aspect-ratio:1200/700;margin:0 auto}
.bh-graph-stage .brain-stage{position:relative;left:auto;top:auto;transform:none;width:100%;height:100%}
.bh-graph-stage .bcore-glow{width:56%;height:auto;aspect-ratio:1}
.bh-graph-cap{position:relative;z-index:2;max-width:900px}
.bh-graph-cap .brain-title{margin:0}
.bh-graph-cap .brain-title .l{animation:none;opacity:1;transform:none}
.bh-graph-cap .brain-sub{margin-top:14px}
@media(max-width:760px){
  .bh-graph-stage{width:92vw}
  .bh-graph{gap:18px}
}

/* ============================================================
   2026-06-23 h: ヒーロー微調整 — 第1を確実に中央＆短く / 第2の黒余白を解消 / kicker削除
   ============================================================ */
.bh-intro-msg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;padding:0 24px}
.brain-en{margin-top:0}
.bh-graph{min-height:auto;padding:clamp(64px,11vw,120px) 22px}
@media(max-width:760px){
  .brain-en{font-size:clamp(2rem,9.5vw,3.3rem)}
  .bh-graph{padding:clamp(46px,12vw,88px) 18px}
}

/* ============================================================
   2026-06-23 i: 第1ビート=立体回転オーブに合わせた文字演出＆可読性
   ============================================================ */
.brain-en{text-shadow:0 2px 26px rgba(0,0,0,.5)}
.brain-en .ac{
  background:linear-gradient(100deg,#cd724a 0%,#eca079 28%,#cd724a 56%,#cd724a 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:acShine 4.6s linear infinite}
@keyframes acShine{to{background-position:-220% 0}}
.bh-intro-veil{background:radial-gradient(52% 46% at 50% 50%, rgba(20,17,11,.74) 0%, rgba(20,17,11,.40) 48%, rgba(20,17,11,0) 80%)}
@media(prefers-reduced-motion:reduce){
  .brain-en .ac{animation:none;color:#cd724a;-webkit-text-fill-color:#cd724a;background:none}
}

/* ============================================================
   2026-06-23 j: 黒余白の圧縮＋第2ヘッドラインのゆとり / 表記ゆれデモ / AIカードを動的・リッチに
   ============================================================ */
/* 黒余白の圧縮＋「原価も…」のゆとり */
.bridge{padding:clamp(52px,8vw,92px) 0}
.bh-graph{gap:clamp(28px,5.5vw,54px);padding:clamp(70px,11vw,118px) 22px clamp(30px,6vw,56px)}

/* 表記ゆれの統合デモ */
.merge-demo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.merge-demo .mg-chip{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:11px 17px;border-radius:13px;
  background:rgba(120,90,60,.08);border:1px solid rgba(120,90,60,.22);font-weight:700;font-size:.96rem;color:inherit}
.merge-demo .mg-chip small{font-size:.64rem;font-weight:600;opacity:.7}
.merge-demo .mg-one{background:rgba(192,107,69,.15);border:1px solid #c06b45;font-size:1.04rem}
.merge-demo .mg-ar{color:#c06b45;font-weight:800;font-size:1.15rem}

/* AIカード(ホーム第2ヒーロー)を動的・リッチに */
.hero-visual .cost-bar > i{transform:scaleX(0);transform-origin:left;transition:transform 1.05s cubic-bezier(.16,.84,.34,1) .35s}
.hero-visual.in .cost-bar > i{transform:scaleX(1)}
.hv .c-chat .top .dotlive{animation:livep 1.9s ease-in-out infinite}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(64,170,120,.55)}70%,100%{box-shadow:0 0 0 6px rgba(64,170,120,0)}}
.hv .c-toast .ico{animation:toastp 2.6s ease-in-out infinite}
@keyframes toastp{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@media(max-width:760px){
  .hv .c{background:linear-gradient(180deg,#221d16,#18140e);
    box-shadow:0 20px 56px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);border-color:rgba(255,255,255,.08)}
  .hv .c-chat .body{background:linear-gradient(180deg,#241f18,#1b1712)}
}
@media(prefers-reduced-motion:reduce){
  .hero-visual .cost-bar > i{transition:none;transform:scaleX(1)}
  .hv .c-chat .top .dotlive,.hv .c-toast .ico{animation:none}
}

/* 2026-06-23 k: ブリッジ前の余白をさらに少し圧縮 */
.bridge{padding:clamp(44px,6vw,78px) 0}
.bh-graph{padding-bottom:clamp(26px,5vw,46px)}

/* 2026-06-23 l: 緑の余白の正体=brain-hero自身がsection既定の縦padding(80px)を継承→0に */
.brain-hero{padding:0}

/* 2026-06-23 m: 第2ブロック(原価も…)の上下余白を均等&ゆとり / ブリッジはたっぷり読ませる */
.bh-graph{padding:clamp(60px,10vw,100px) 22px}
.bridge{padding:clamp(84px,13vw,134px) 0}

/* 2026-06-24: 英語キャッチを球(オーブ)の中心に正確に重ねる。絶対配置(top/left/transform)の競合をやめ、
   bh-introのフレックス中央(縦:justify-content center)に一本化＝文字中心がオーブ中心(canvas中心)と一致。 */
.bh-intro .bh-intro-msg{position:static;top:auto;left:auto;transform:none}