/* 24'Seven LP — AppleSF の型（~/.claude/skills/r-support-sf-design-apple/）
   色・ガラス・部品・動きの値は台帳の型のまま。足したのは画面の見本（端末・LINE・ダッシュボード・決済）と横のスライドだけ。
   /24seven/ と /24seven/try/ の2ページで共有する（2か所に写さない）。 */

/* ===== 1. 色（ライト） ===== */
:root{
  --base-bg:#F4F7FA;
  --text-main:#0B132B;
  --text-sub:#4A5568;
  --glass-bg:rgba(255,255,255,.45);
  --glass-border:rgba(255,255,255,.4);
  --glass-shadow-inset-top:rgba(255,255,255,.6);
  --glass-shadow-inset-bottom:rgba(0,0,0,.03);
  --inset-top-blur:2px;
  --inset-bottom-blur:1px;
  --glass-shadow-drop:rgba(11,19,43,.04);
  --orb-color-1:rgba(0,229,255,.35);
  --orb-color-2:rgba(112,0,255,.15);
  --badge-bg:rgba(11,19,43,.05);
  --grid-opacity:.03;
  --line:rgba(11,19,43,.12);
  --accent:#00E5FF;
  /* 端末の見本（画面の中） */
  --device-frame:#0B132B;
  --screen-bg:#FFFFFF;
  --screen-ink:#0B132B;
  --screen-sub:#4A5568;
  --screen-line:rgba(11,19,43,.08);
  --screen-soft:rgba(11,19,43,.04);
  --chat-bg:#E6ECF4;
  --ease-capsule:cubic-bezier(0.16,1,0.3,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro JP","SF Pro Display","Helvetica Neue","Hiragino Kaku Gothic ProN","ヒラギノ角ゴシック",meiryo,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
/* ===== 1. 色（ダーク：端末の設定と手の切り替えの両方） ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --base-bg:#050814;
    --text-main:#FFFFFF;
    --text-sub:#A0AEC0;
    --glass-bg:rgba(11,19,43,.65);
    --glass-border:rgba(255,255,255,.08);
    --glass-shadow-inset-top:rgba(255,255,255,.25);
    --glass-shadow-inset-bottom:rgba(0,0,0,.5);--inset-top-blur:1px;--inset-bottom-blur:2px;
    --glass-shadow-drop:rgba(0,0,0,.65);
    --orb-color-1:rgba(0,229,255,.45);
    --orb-color-2:rgba(112,0,255,.25);
    --badge-bg:rgba(255,255,255,.08);
    --grid-opacity:.07;
    --line:rgba(255,255,255,.16);
    --device-frame:#1A2238;
    --screen-bg:#0B132B;
    --screen-ink:#FFFFFF;
    --screen-sub:#A0AEC0;
    --screen-line:rgba(255,255,255,.08);
    --screen-soft:rgba(255,255,255,.05);
    --chat-bg:#111A33;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --base-bg:#050814;
  --text-main:#FFFFFF;
  --text-sub:#A0AEC0;
  --glass-bg:rgba(11,19,43,.65);
  --glass-border:rgba(255,255,255,.08);
  --glass-shadow-inset-top:rgba(255,255,255,.25);
  --glass-shadow-inset-bottom:rgba(0,0,0,.5);--inset-top-blur:1px;--inset-bottom-blur:2px;
  --glass-shadow-drop:rgba(0,0,0,.65);
  --orb-color-1:rgba(0,229,255,.45);
  --orb-color-2:rgba(112,0,255,.25);
  --badge-bg:rgba(255,255,255,.08);
  --grid-opacity:.07;
  --line:rgba(255,255,255,.16);
  --device-frame:#1A2238;
  --screen-bg:#0B132B;
  --screen-ink:#FFFFFF;
  --screen-sub:#A0AEC0;
  --screen-line:rgba(255,255,255,.08);
  --screen-soft:rgba(255,255,255,.05);
  --chat-bg:#111A33;
  color-scheme:dark;
}

/* ===== 2. 土台と文字 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;overflow-x:clip;max-width:100vw;position:relative}
html{touch-action:manipulation;scroll-behavior:smooth}
body{
  background-color:var(--base-bg);
  color:var(--text-main);
  font-family:var(--font);
  font-size:16px;
  line-height:28px;
  letter-spacing:-0.01em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{text-wrap:balance;word-break:auto-phrase;font-weight:700;letter-spacing:-0.02em}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.wrap{max-width:1160px;margin:0 auto;padding:0 40px}
.section{position:relative;padding:96px 0}
.section-offscreen{content-visibility:auto;contain-intrinsic-size:auto 800px}
.badge{
  display:inline-block;padding:4px 16px;border-radius:99px;
  background:var(--badge-bg);color:var(--text-main);
  font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:24px;
}
.h2{font-size:48px;line-height:56px;letter-spacing:-0.03em;margin-bottom:16px}
.lead{font-size:18px;line-height:32px;color:var(--text-sub);max-width:640px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== 3. 背景：点のマトリクスと流体オーブ ===== */
.scene{position:relative;overflow:hidden;contain:paint}
.scene > .wrap{position:relative;z-index:1}
/* 背景の点と光の球をまとめた層。上下の端を薄くして、セクションの境目で光が直線に切れないようにする */
.scene-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 96px,#000 calc(100% - 96px),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 96px,#000 calc(100% - 96px),transparent);
}
.grid-matrix{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--text-main) 1px,transparent 0);
  background-size:16px 16px;opacity:var(--grid-opacity);
}
.orb{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform;z-index:0;pointer-events:none}
.orb-aqua{
  width:600px;height:600px;top:-10%;left:-5%;
  background:radial-gradient(circle,var(--orb-color-1) 0%,rgba(0,0,0,0) 70%);
  animation:orbAqua 30s infinite alternate ease-in-out;
}
.orb-purple{
  width:500px;height:500px;bottom:-10%;right:-5%;
  background:radial-gradient(circle,var(--orb-color-2) 0%,rgba(0,0,0,0) 70%);
  animation:orbPurple 25s infinite alternate ease-in-out;
}
@keyframes orbAqua{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(100px,48px) scale(1.15)}
  100%{transform:translate(-48px,100px) scale(.9)}
}
@keyframes orbPurple{
  0%{transform:translate(0,0) scale(1.1)}
  50%{transform:translate(-80px,80px) scale(.85)}
  100%{transform:translate(64px,-40px) scale(1.05)}
}

/* ===== 4. ガラス（Apple 基準の3つの絶対条件） ===== */
.glass{
  position:relative;z-index:1;
  background:var(--glass-bg);
  backdrop-filter:blur(30px) saturate(220%);
  -webkit-backdrop-filter:blur(30px) saturate(220%);
  border:1px solid var(--glass-border);
  box-shadow:
    inset 0 1px var(--inset-top-blur) var(--glass-shadow-inset-top),
    inset 0 -1px var(--inset-bottom-blur) var(--glass-shadow-inset-bottom),
    0 40px 80px var(--glass-shadow-drop);
  transition:box-shadow .3s var(--ease-capsule);
}
@media (hover:hover){
  .glass:hover{
    box-shadow:
      inset 0 1px 3px var(--glass-shadow-inset-top),
      inset 0 -1px var(--inset-bottom-blur) var(--glass-shadow-inset-bottom),
      0 48px 96px rgba(0,229,255,.12);
  }
}

/* ===== 5. 上の細いヘッダー（右上に小さく LINE のお問い合わせ） ===== */
.topbar{position:sticky;top:0;z-index:10;border-radius:0;border-left:0;border-right:0;border-top:0}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none}
[hidden]{display:none !important}
.logo-name{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-0.03em}
.logo-by{font-size:12px;line-height:20px;font-weight:600;color:var(--text-sub);letter-spacing:.04em}
.line-mini{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;
  border-radius:20px;background:#06C755;color:#0B132B;text-decoration:none;
  font-size:16px;line-height:24px;font-weight:700;letter-spacing:-0.02em;
  box-shadow:0 1px 2px rgba(6,199,85,.2),0 8px 24px rgba(6,199,85,.25);
  transition:transform .2s var(--ease-capsule),box-shadow .2s ease;
}
.line-mini:active{transform:scale(.98)}
@media (hover:hover){.line-mini:hover{box-shadow:0 1px 2px rgba(6,199,85,.2),0 12px 32px rgba(6,199,85,.4)}}
.line-mini .pulse{background:#0B132B;box-shadow:0 0 8px rgba(11,19,43,.4)}

/* ===== 6. ボタン ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;padding:12px 32px;
  border-radius:20px;text-decoration:none;font-weight:700;font-size:16px;line-height:24px;letter-spacing:-0.02em;
  transition:transform .2s var(--ease-capsule),box-shadow .2s ease;
}
.btn:active{transform:scale(.98)}
@media (hover:hover){.btn:hover{transform:scale(1.02) translateY(-1px)}}
.btn-main{background:var(--text-main);color:var(--base-bg);box-shadow:0 1px 2px rgba(11,19,43,.08),0 8px 24px rgba(11,19,43,.12)}
.btn-ghost{background:var(--badge-bg);color:var(--text-main);border:1px solid var(--line);box-shadow:inset 0 1px var(--inset-top-blur) var(--glass-shadow-inset-top),0 1px 2px rgba(11,19,43,.04)}
.btn-line{background:#06C755;color:#0B132B;box-shadow:0 1px 2px rgba(6,199,85,.2),0 8px 24px rgba(6,199,85,.25)}
.btn-text{display:flex;flex-direction:column;text-align:left}
.btn-meta{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em}
.pulse{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--accent);box-shadow:0 0 12px var(--accent);
  animation:breathe 2s infinite ease-in-out;
}
@keyframes breathe{
  0%,100%{transform:scale(.9);opacity:.4}
  50%{transform:scale(1.1);opacity:1}
}

/* ===== 7. ファーストビュー（縦を短く：左に言葉、右に届く通知） ===== */
.hero{padding:96px 0 64px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.hero-title{font-size:56px;line-height:64px;letter-spacing:-0.03em;margin-bottom:24px}
.hero-kicker{display:block;font-size:16px;line-height:24px;font-weight:600;letter-spacing:-0.02em;color:var(--text-sub);margin-bottom:16px}
.hero-desc{font-size:18px;line-height:32px;color:var(--text-sub);max-width:520px;margin-bottom:40px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px}
.feed{border-radius:32px;padding:24px;display:flex;flex-direction:column;gap:12px}
.feed-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 4px 4px}
.feed-title{font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-sub)}
.feed-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em}
.toast{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px 16px;border-radius:20px;background:var(--screen-bg);
  border:1px solid var(--screen-line);
  box-shadow:0 1px 2px rgba(11,19,43,.04),0 8px 24px rgba(11,19,43,.06);
}
.toast-icon{width:40px;height:40px;border-radius:12px;background:#06C755;color:#0B132B;display:grid;place-items:center}
.toast-title{font-size:12px;line-height:20px;font-weight:700;color:var(--screen-sub);letter-spacing:.04em}
.toast-text{font-size:16px;line-height:24px;font-weight:600;color:var(--screen-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast-time{font-size:12px;line-height:20px;color:var(--screen-sub)}

/* ===== 8. 横のスライド（説明は横に。縦に伸ばさない） ===== */
.rail-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.rail-ctrl{display:flex;gap:8px}
.rail-tools{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.rail-btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(30px) saturate(220%);-webkit-backdrop-filter:blur(30px) saturate(220%);
  box-shadow:inset 0 1px var(--inset-top-blur) var(--glass-shadow-inset-top),0 1px 2px rgba(11,19,43,.06),0 8px 24px var(--glass-shadow-drop);
  transition:transform .2s var(--ease-capsule),opacity .2s ease;
}
.rail-btn:active{transform:scale(.94)}
.rail-btn[disabled]{opacity:.35;cursor:default}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3);gap:24px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:8px 4px 32px;margin:-8px -4px 0;
}
/* PC とタブレット：ガラスの床の影（0 40px 80px）が箱で切れないよう、内側に余白を取り、外側の余白で打ち消す */
@media (min-width:768px){
  .rail{padding:8px 40px 120px;margin:-8px -40px -88px;scroll-padding-inline:40px}
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail-sm{grid-auto-columns:calc((100% - 72px) / 4)}

/* 何段目かの線（インライン・ステップ・トラッカー：数字と 1px の線だけ） */
.track{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-bottom:24px}
.track a{position:relative;display:block;padding:24px 8px 0 0;text-decoration:none;min-height:44px}
.track a::before{content:"";position:absolute;top:12px;left:0;right:0;height:1px;background:var(--text-main);opacity:.25}
.track a::after{
  content:"";position:absolute;top:8px;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--base-bg);border:1px solid var(--text-main);
  transition:transform .35s var(--ease-capsule),opacity .2s ease;
}
.track a[aria-current="step"]::after{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent);transform:scale(1.25)}
.track-num{display:block;font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em;color:var(--text-sub);white-space:nowrap}
.track a[aria-current="step"] .track-num{color:var(--text-main)}

/* スライド1枚 */
.slide{border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:24px}
.slide-num{font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em;color:var(--text-sub);margin-bottom:8px;display:block}
.slide-title{font-size:24px;line-height:32px;letter-spacing:-0.02em;margin-bottom:8px}
.slide-text{color:var(--text-sub)}

/* できる事のカード（グリッド・ファンクション・カード） */
.card{
  aspect-ratio:1.618/1;border-radius:24px;padding:24px;
  display:flex;flex-direction:column;gap:12px;
  transition:box-shadow .3s var(--ease-capsule),border-color .2s ease;
}
.card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1px solid var(--accent);box-shadow:0 0 24px rgba(0,229,255,.25);
  opacity:0;transition:opacity .2s ease;
}
@media (hover:hover){
  .card:hover{border-color:var(--accent)}
  .card:hover::after{animation:glowBreathe 2s infinite ease-in-out}
}
@keyframes glowBreathe{0%,100%{opacity:.35}50%{opacity:1}}
.card-tag{font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em;color:var(--text-sub)}
.card-title{font-size:24px;line-height:32px;letter-spacing:-0.02em}
.card-text{color:var(--text-sub)}

/* ===== 9. セグメンテッド・コントロール（選ぶ所すべて） ===== */
.seg{
  --n:2;
  position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
  padding:4px;border-radius:99px;background:var(--badge-bg);
  border:1px solid var(--line);max-width:480px;
}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:99px;cursor:pointer;
  font-size:16px;font-weight:600;color:var(--text-sub);transition:color .2s ease;
  white-space:nowrap;
}
.seg input:checked + label{color:var(--text-main)}
.seg input:focus-visible + label{outline:2px solid var(--accent);outline-offset:-2px}
.switch-indicator{
  position:absolute;z-index:0;top:4px;bottom:4px;left:4px;
  width:calc((100% - 8px) / var(--n));border-radius:99px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  box-shadow:inset 0 1px var(--inset-top-blur) var(--glass-shadow-inset-top),0 1px 2px rgba(11,19,43,.08),0 4px 12px rgba(11,19,43,.06);
  transition:all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.seg:has(input:nth-of-type(2):checked) .switch-indicator{transform:translateX(100%)}
.seg:has(input:nth-of-type(3):checked) .switch-indicator{transform:translateX(200%)}
.seg-3{--n:3}

/* 注文と予約の切り替え：同じスライドの中身だけを入れ替える */
.flow:has(#mode-reserve:checked) [data-mode="order"]{display:none !important}
.flow:has(#mode-order:checked) [data-mode="reserve"]{display:none !important}
.line-title{display:block;font-size:12px;line-height:20px;font-weight:700}

/* ===== 10. 端末の見本（スクショではなく、HTML で組んだ画面） ===== */
.device{
  width:100%;max-width:256px;margin:0 auto;aspect-ratio:9/17.5;border-radius:36px;padding:8px;
  background:var(--device-frame);border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 1px 2px rgba(11,19,43,.08),0 24px 48px rgba(11,19,43,.16);
}
.screen{
  position:relative;height:100%;border-radius:28px;background:var(--screen-bg);color:var(--screen-ink);
  overflow:hidden;display:flex;flex-direction:column;font-size:12px;line-height:20px;letter-spacing:0;
}
.scr-status{display:flex;justify-content:space-between;align-items:center;padding:8px 20px 4px;font-size:12px;line-height:16px;font-weight:600}
.scr-island{width:64px;height:16px;border-radius:99px;background:var(--device-frame)}
.scr-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;border-bottom:1px solid var(--screen-line)}
.scr-name{min-width:0;font-size:16px;line-height:24px;font-weight:700;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-sub{font-size:12px;line-height:20px;color:var(--screen-sub)}
.scr-body{flex:1;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:8px}
.scr-foot{padding:12px;border-top:1px solid var(--screen-line);background:var(--screen-bg)}
.scr-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0 16px;
  border-radius:16px;background:var(--screen-ink);color:var(--screen-bg);font-size:12px;line-height:20px;font-weight:700;
}
.scr-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:99px;background:var(--screen-soft);border:1px solid var(--screen-line);font-size:12px;line-height:20px;font-weight:600}
.scr-chip.is-on{background:var(--screen-ink);color:var(--screen-bg);border-color:var(--screen-ink)}
button.scr-chip{position:relative;min-height:32px;padding:0 12px;color:var(--screen-ink);transition:border-color .2s ease,transform .2s var(--ease-capsule)}
button.scr-chip.is-on{color:var(--screen-bg)}
/* 押せる範囲だけを 44px に広げる（見た目は 32px のまま） */
button.scr-chip::after,.order-card .open::after{content:"";position:absolute;inset:-6px 0}
button.scr-chip:active{transform:scale(.96)}
.scr-btn{transition:transform .2s var(--ease-capsule),opacity .2s ease}
.scr-btn:active{transform:scale(.98)}
.scr-btn:disabled{opacity:.4;cursor:default}
.tap{position:absolute;width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);box-shadow:0 0 16px rgba(0,229,255,.5);pointer-events:none;animation:tapPulse 2s infinite ease-in-out}
@keyframes tapPulse{0%,100%{transform:scale(.8);opacity:.3}50%{transform:scale(1.1);opacity:1}}

/* 公式サイトの見本 */
.site-url{display:flex;align-items:center;gap:4px;margin:4px 12px 8px;padding:4px 12px;border-radius:99px;background:var(--screen-soft);font-size:12px;line-height:20px;color:var(--screen-sub)}
.site-hero{margin:0 12px;border-radius:16px;padding:16px;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  background:linear-gradient(135deg,rgba(0,229,255,.28),rgba(112,0,255,.22)),var(--screen-soft)}
.site-hero b{font-size:16px;line-height:24px;letter-spacing:-0.02em}
.site-nav{display:flex;gap:8px;padding:12px 12px 0;flex-wrap:wrap}
.site-order{position:relative;margin:12px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:16px;background:var(--screen-ink);color:var(--screen-bg);font-weight:700;letter-spacing:.04em}
.site-lines{display:flex;flex-direction:column;gap:8px;padding:0 12px}
.site-lines i{display:block;height:8px;border-radius:99px;background:var(--screen-soft)}
.site-lines i:nth-child(2){width:72%}
.site-lines i:nth-child(3){width:48%}

/* 公式 LINE の見本 */
.line-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--screen-line)}
.line-ava{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--screen-ink);color:var(--screen-bg);font-size:12px;font-weight:700}
.line-chat{flex:1;overflow:hidden;background:var(--chat-bg);padding:12px;display:flex;flex-direction:column;gap:8px}
.bubble{max-width:88%;padding:8px 12px;border-radius:16px;background:var(--screen-bg);font-size:12px;line-height:20px;box-shadow:0 1px 2px rgba(11,19,43,.06)}
.bubble-me{align-self:flex-end;background:#06C755;color:#0B132B}
.rich{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--screen-line)}
.rich > span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.04em;border-right:1px solid var(--screen-line)}
.rich > span:last-child{border-right:0}
.rich > span.is-on{background:var(--screen-soft)}
.rich .tap{position:absolute;left:50%;top:50%;margin:-20px 0 0 -20px}
.rich svg{color:var(--screen-ink)}

/* 注文表（LINE に届くカード） */
.order-card{border-radius:16px;background:var(--screen-bg);overflow:hidden;box-shadow:0 1px 2px rgba(11,19,43,.06),0 8px 16px rgba(11,19,43,.06)}
.order-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;background:#06C755;color:#0B132B;font-weight:700;letter-spacing:.04em}
.order-card dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:12px}
.order-card dt{color:var(--screen-sub)}
.order-card dd{text-align:right;font-weight:600}
.items{display:flex;flex-direction:column;gap:4px}
.items div{display:flex;justify-content:space-between;gap:8px}
.order-card .items{padding:0 12px 8px}
.order-card .sum{display:flex;justify-content:space-between;padding:8px 12px 12px;border-top:1px solid var(--screen-line);font-size:16px;line-height:24px;font-weight:700}
.order-card .open{position:relative;display:block;margin:0 12px 12px;min-height:32px;line-height:32px;border-radius:12px;text-align:center;background:var(--screen-soft);font-weight:700}

/* メニュー（押して選べる） */
.m-item{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;
  width:100%;padding:8px;border-radius:12px;text-align:left;border:1px solid var(--screen-line);background:var(--screen-bg);
  transition:border-color .2s ease,transform .2s var(--ease-capsule);
}
.m-item:active{transform:scale(.98)}
.m-item.is-on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.m-thumb{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;font-size:16px;font-weight:700;background:linear-gradient(135deg,rgba(0,229,255,.24),rgba(112,0,255,.18)),var(--screen-soft)}
.m-name{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-price{display:block;color:var(--screen-sub)}
.m-qty{min-width:24px;height:24px;padding:0 8px;border-radius:99px;display:grid;place-items:center;background:var(--screen-soft);font-weight:700}
.m-item.is-on .m-qty{background:var(--screen-ink);color:var(--screen-bg)}
.m-cat{font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em;color:var(--screen-sub)}

/* 買い物カゴ */
.cart-row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--screen-line)}
.cart-row:last-child{border-bottom:0}
.cart-empty{padding:16px 0;color:var(--screen-sub);text-align:center}
.cart-sum{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:8px}
.cart-sum b{font-size:20px;line-height:28px;letter-spacing:-0.02em}
.cart-label{font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em;color:var(--screen-sub)}
.chips{display:flex;flex-wrap:wrap;gap:4px}

/* 続きは体験の後（中を伏せる） */
.locked{position:relative;border-radius:16px;overflow:hidden}
.locked .order-card{filter:blur(4px);opacity:.7}
.locked-mark{position:absolute;inset:0;display:grid;place-items:center}
.locked-mark span{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(30px) saturate(220%);-webkit-backdrop-filter:blur(30px) saturate(220%);
  box-shadow:inset 0 1px var(--inset-top-blur) var(--glass-shadow-inset-top),0 8px 24px var(--glass-shadow-drop);
  font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em;color:var(--text-main)}
.next-slide{justify-content:space-between}

/* ダッシュボード */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kpi{padding:8px 12px;border-radius:12px;background:var(--screen-soft);border:1px solid var(--screen-line)}
.kpi b{display:block;font-size:16px;line-height:24px;letter-spacing:-0.02em}
.dash-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--screen-line)}
.dash-row:last-child{border-bottom:0}
.st{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 8px;border-radius:99px;font-weight:700;border:1px solid var(--screen-line)}
.st-new{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.st-new::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.st-done{color:var(--screen-sub)}

/* 決済 */
.pay-sheet{margin-top:auto;border-radius:20px 20px 0 0;padding:16px 12px 12px;background:var(--screen-bg);border-top:1px solid var(--screen-line);box-shadow:0 -8px 24px rgba(11,19,43,.08);display:flex;flex-direction:column;gap:8px}
.pay-field{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--screen-line);background:var(--screen-soft)}
.pay-methods{display:grid;grid-template-columns:.7fr 1fr 1.15fr;gap:4px}
.pay-methods span{display:grid;place-items:center;min-height:32px;padding:0 4px;border-radius:12px;border:1px solid var(--screen-line);font-weight:700;white-space:nowrap;letter-spacing:-0.02em}
.pay-methods span.is-on{background:var(--screen-ink);color:var(--screen-bg);border-color:var(--screen-ink)}
.pay-done{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--screen-soft)}

/* ===== 11. 料金（さらっと） ===== */
.price-strip{border-radius:24px;padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-bottom:24px}
.price-strip .badge{margin:0;align-self:flex-start}
.price-head{margin:0;font-size:16px;line-height:28px;font-weight:700;letter-spacing:-0.02em;color:var(--text-main)}
.price-item b,.price-item small{white-space:nowrap}
.price-item{word-break:auto-phrase}
.slide .device{margin-top:auto}
.section[id],.scene[id]{scroll-margin-top:64px}

/* ===== 11.5 よくある質問（押すと開く。縦に長くしない） ===== */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.faq-item{border-radius:24px;padding:0}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:16px 24px;
  cursor:pointer;list-style:none;font-size:16px;line-height:24px;font-weight:700;letter-spacing:-0.02em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font:inherit;letter-spacing:inherit}
.faq-mark{flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--badge-bg);transition:transform .35s var(--ease-capsule)}
.faq-item[open] .faq-mark{transform:rotate(45deg)}
.faq-item p{padding:0 24px 24px;color:var(--text-sub)}
.price-item{display:inline-flex;align-items:baseline;gap:8px;font-size:16px;line-height:28px}
.price-item b{font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.price-item small{font-size:12px;color:var(--text-sub)}
.price-note{font-size:12px;line-height:20px;color:var(--text-sub);flex-basis:100%}
.price-note a{text-underline-offset:4px}

/* ===== 12. 無料体験 ===== */
.trial{border-radius:32px;padding:56px 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.trial-form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field-label{font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em;color:var(--text-sub)}
.input{
  width:100%;height:52px;padding:12px 16px;border-radius:16px;font:inherit;font-size:16px;color:var(--text-main);
  background:var(--glass-bg);border:1px solid var(--line);
  box-shadow:inset 0 1px 2px rgba(11,19,43,.06);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.input::placeholder{color:var(--text-sub);opacity:.8}
.input:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 1px 2px rgba(11,19,43,.06),0 0 0 4px rgba(0,229,255,.2)}
.input:focus-visible{outline:2px solid var(--text-main);outline-offset:2px}
.trial-note{font-size:12px;line-height:20px;color:var(--text-sub)}

/* ===== 12.5 体験のページ（/24seven/try/） ===== */
.try-head{padding-top:64px}
.slide{position:relative}
.lock-over{display:none}
.slide.is-locked .lock-body{filter:blur(8px);opacity:.5;pointer-events:none;user-select:none}
.slide.is-locked .lock-over{
  position:absolute;inset:0;z-index:2;border-radius:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;
}
.lock-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(30px) saturate(220%);-webkit-backdrop-filter:blur(30px) saturate(220%);
  box-shadow:inset 0 1px var(--inset-top-blur) var(--glass-shadow-inset-top),0 8px 24px var(--glass-shadow-drop);
  font-size:12px;line-height:20px;font-weight:700;letter-spacing:.08em}
.lock-text{font-weight:600}
.price-mini{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:20px;color:var(--text-sub)}
.price-mini b{color:var(--text-main);font-family:var(--mono);font-variant-numeric:tabular-nums}
.flyer{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--glass-border);box-shadow:0 1px 2px rgba(11,19,43,.06),0 16px 32px rgba(11,19,43,.12)}
.start-actions{display:flex;flex-direction:column;gap:12px}
.start-actions .btn{width:100%}
.link-sub{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:12px;line-height:20px;font-weight:700;letter-spacing:.04em;color:var(--text-sub);text-underline-offset:4px}
.pay-done{display:none}
.screen.is-paid .pay-done{display:flex}
.screen.is-paid [data-pay]{display:none}
.line-time{align-self:center;padding:0 8px;border-radius:99px;background:rgba(11,19,43,.08);font-size:12px;line-height:20px;color:var(--screen-sub)}

/* ===== 13. フッター ===== */
.footer{padding:40px 0;color:var(--text-sub);font-size:12px;line-height:20px;border-top:1px solid var(--line)}
.footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
@media (hover:hover){.footer-links a:hover{color:var(--text-main)}}
.footer .seg{min-width:240px}
.footer .seg label{font-size:12px}

/* ===== 14. スマホ・タブレット ===== */
@media (max-width:1023px){
  .rail{grid-auto-columns:calc((100% - 24px) / 2)}
  .rail-sm{grid-auto-columns:calc((100% - 48px) / 3)}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .trial{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .wrap{padding:0 16px}
  .section{padding:64px 0}
  .hero{padding:48px 0 64px}
  .hero .wrap{gap:32px}
  .hero-title{font-size:36px;line-height:44px;margin-bottom:16px}
  .hero-desc,.lead{font-size:16px;line-height:28px}
  .hero-desc{margin-bottom:32px}
  .h2{font-size:36px;line-height:44px}
  .logo-by{display:none}
  .line-mini{padding:0 12px}
  .rail-head{margin-bottom:24px}
  .rail-ctrl{display:none}
  .rail{grid-auto-columns:84%;gap:16px;margin:-8px -16px 0;padding:8px 16px 24px;scroll-padding-inline:16px}
  .rail-sm{grid-auto-columns:72%}
  .slide-title{font-size:20px;line-height:28px}
  .card{aspect-ratio:auto;min-height:160px}
  .trial{padding:32px 24px;gap:32px}
  .price-strip{padding:16px}
  .btn{width:100%}
  .hero-actions{flex-wrap:nowrap;gap:8px}
  .hero-actions .btn{flex:1 1 0;padding:12px 16px}
  .toast:nth-child(4){display:none}
  .track-word{display:none}
  .track a[aria-current="step"] .track-word{display:inline}
  #try .track a[aria-current="step"] .track-word{display:none}
  .badge{margin-bottom:16px}
  .seg label{padding:0 8px}
  .card-title{font-size:20px;line-height:28px}
  .faq{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
  .price-strip{flex-direction:column;align-items:stretch;gap:8px}
  .price-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px;width:100%}
  .orb-aqua{width:360px;height:360px}
  .orb-purple{width:320px;height:320px}
  .feed{padding:16px}
  .footer .seg{min-width:0;width:100%;max-width:none}
}

/* 動きを減らす設定では全部止める */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}