/* =========================================================================
   Storive 公式サイト — 共有スタイル
   デザイン正本: docs/client/design.html（黄昏 v1.2）。テーマは黄昏（dark）固定。
   トークンは正本の primitive / semantic をそのまま移植し、LP 固有の
   コンポーネントは lp- プレフィックスで追加する。
   v1.2「星と影」: 読書面の主ボタン＝一番星×墨、空の上の主ボタン＝深宵の
   シルエット（星白 38% 枠）。暖色（茜・金）の塗りボタンを空の上に置かない。
   ========================================================================= */

/* ---- 0. トークン（design.html §4 より） ---- */
:root{
  /* primitive: 読書・UI 面 */
  --st-p-yoru:#17151D;         /* 夜   canvas */
  --st-p-yorumen:#201D28;      /* 夜面 surface */
  --st-p-yoruan:#121017;       /* 夜暗 surface 深 */
  --st-p-hoshijiro:#EFE9DC;    /* 星白 text */
  --st-p-sumi:#221F2A;         /* 墨   text on light / CTA ラベル */
  /* primitive: ブランド面 */
  --st-p-yoi:#262040;
  --st-p-fukayoi:#1B1732;
  --st-p-oumagi:#59355C;       /* 空グラデ専用 */
  /* primitive: アクセント */
  --st-p-akane:#C05555;
  --st-p-akane-cta:#A83E3E;
  --st-p-zansho:#E2B064;
  --st-p-fujinezu:#9C93B5;
  --st-p-ichibanboshi:#F2E7CB;

  /* 空トークン（World が差し替える。w01 = 王立図書館の宵 — 琥珀のランプ灯） */
  --st-sky-default:linear-gradient(180deg,#262040 0%,#59355C 55%,#C05555 82%,#E2B064 100%);
  --st-sky-w01:linear-gradient(180deg,#191A2E 0%,#33304E 48%,#7A5638 80%,#C99A5A 100%);
  --st-sky-next:linear-gradient(180deg,#1B1B26 0%,#2A2837 55%,#4A4258 85%,#6B5E72 100%);

  /* semantic（黄昏） */
  --st-color-canvas:var(--st-p-yoru);
  --st-color-surface:var(--st-p-yorumen);
  --st-color-surface-deep:var(--st-p-yoruan);
  --st-color-text-primary:var(--st-p-hoshijiro);
  --st-color-text-weak:var(--st-p-fujinezu);
  --st-color-accent:var(--st-p-akane);
  --st-color-cta-fill:var(--st-p-ichibanboshi); /* v1.2「星と影」: 読書面の主ボタン＝一番星×墨 */
  --st-color-cta-label:var(--st-p-sumi);
  /* 空の上の主ボタン（深宵シルエット。空の面専用） */
  --st-color-cta-sky-fill:var(--st-p-fukayoi);
  --st-color-cta-sky-label:var(--st-p-hoshijiro);
  --st-color-cta-sky-border:rgba(239,233,220,.38);
  --st-color-success:var(--st-p-zansho);
  --st-color-link:var(--st-p-zansho);
  --st-color-border:rgba(239,233,220,.12);
  --st-color-border-strong:rgba(239,233,220,.26);
  --st-color-scrim:rgba(18,16,23,.62);
  --st-shadow:0 16px 40px -24px rgba(8,6,16,.55);

  /* タイポ */
  --st-font-head:"Kaisei Tokumin", serif;
  --st-font-narr:"Noto Serif JP", serif;
  --st-font-ui:"Murecho", system-ui, sans-serif;
  --st-font-latin:"Cormorant Garamond", serif;
  --st-font-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* スペーシング（4/8 基数）・角丸・モーション */
  --st-space-1:4px; --st-space-2:8px; --st-space-3:12px; --st-space-4:16px;
  --st-space-5:24px; --st-space-6:32px; --st-space-7:48px; --st-space-8:64px; --st-space-9:96px;
  --st-radius-chip:6px; --st-radius-control:10px; --st-radius-card:14px; --st-radius-large:20px; --st-radius-pill:999px;
  --st-dur-productive:220ms; --st-dur-expressive:900ms;
  --st-ease-standard:cubic-bezier(0.33,0,0.2,1);
  --st-ease-sky:cubic-bezier(0.4,0,0.2,1);

  color-scheme:dark;
}

/* ---- 1. リセット・基盤 ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--st-color-canvas); color:var(--st-color-text-primary);
  font-family:var(--st-font-ui); font-weight:400; font-size:15.5px; line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
p{margin:0 0 1em}
a{color:var(--st-color-link); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--st-font-head); font-weight:700; line-height:1.4; margin:0}
ul,ol{margin:0 0 1em; padding-left:1.4em}
img,svg{max-width:100%; height:auto}
:focus-visible{outline:2.5px solid var(--st-color-success); outline-offset:3px; border-radius:3px}
::selection{background:color-mix(in srgb,var(--st-p-zansho) 32%,transparent)}
button{font:inherit; color:inherit}

.st-skip{position:fixed; left:12px; top:-60px; z-index:200; background:var(--st-color-cta-fill);
  color:var(--st-color-cta-label); padding:10px 16px; border-radius:var(--st-radius-control);
  transition:top 160ms var(--st-ease-standard); text-decoration:none; font-weight:700}
.st-skip:focus{top:12px}

/* ---- 2. シグネチャ — 空・星・地平線（design.html §2） ---- */
.st-sky{position:relative; background:var(--st-sky-default); overflow:hidden; isolation:isolate}
.st-sky[data-world="w01"]{background:var(--st-sky-w01)}
.st-sky[data-world="next"]{background:var(--st-sky-next)}
.st-stars{position:absolute; inset:0; z-index:0; pointer-events:none}
.st-stars i{position:absolute; width:2px; height:2px; border-radius:50%; background:var(--st-p-ichibanboshi);
  opacity:0; animation:st-twinkle 5.5s var(--st-ease-sky) infinite}
.st-stars i:nth-child(1){left:8%;  top:24%; animation-delay:.2s}
.st-stars i:nth-child(2){left:21%; top:11%; animation-delay:1.4s}
.st-stars i:nth-child(3){left:34%; top:30%; animation-delay:2.6s}
.st-stars i:nth-child(4){left:47%; top:9%;  animation-delay:.9s}
.st-stars i:nth-child(5){left:59%; top:22%; width:3px; height:3px; animation-delay:2s}
.st-stars i:nth-child(6){left:71%; top:12%; animation-delay:3.4s}
.st-stars i:nth-child(7){left:83%; top:27%; animation-delay:1s}
.st-stars i:nth-child(8){left:93%; top:16%; animation-delay:4.2s}
.st-firststar{position:absolute; right:16%; top:22%; width:5px; height:5px; border-radius:50%; z-index:1;
  background:var(--st-p-ichibanboshi); box-shadow:0 0 10px 3px rgba(242,231,203,.6);
  animation:st-twinkle 6s var(--st-ease-sky) infinite}
.st-horizon{position:absolute; left:0; right:0; bottom:22%; height:1px; z-index:1;
  background:linear-gradient(90deg,transparent,rgba(242,231,203,.15) 15%,rgba(242,231,203,.85) 50%,rgba(226,176,100,.3) 85%,transparent);
  box-shadow:0 0 24px 2px rgba(226,176,100,.24)}
.st-horizon::after{content:""; position:absolute; left:0; right:0; top:1px; height:60px;
  background:linear-gradient(180deg,rgba(226,176,100,.14),transparent)}
.st-hr{border:0; height:1px; margin:0;
  background:linear-gradient(90deg,transparent,var(--st-color-border-strong) 20%,var(--st-color-accent) 50%,var(--st-color-border-strong) 80%,transparent)}
@keyframes st-twinkle{0%,100%{opacity:.15}45%{opacity:.95}55%{opacity:.85}}
@keyframes st-dawn{0%{filter:brightness(.7)}100%{filter:brightness(1.15)}}

/* ---- 3. 汎用部品（design.html §11） ---- */
.st-btn{font-family:var(--st-font-ui); font-weight:500; font-size:14.5px; border-radius:var(--st-radius-control);
  padding:12px 22px; min-height:48px; border:1px solid transparent; cursor:pointer; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  transition:transform var(--st-dur-productive) var(--st-ease-standard), background 160ms, border-color 160ms}
.st-btn:active{transform:translateY(1px)}
.st-btn--primary{background:var(--st-color-cta-fill); color:var(--st-color-cta-label); font-weight:700}
.st-btn--primary:hover{background:color-mix(in srgb,var(--st-color-cta-fill) 90%,#000); text-decoration:none}
/* 空の上の主ボタン（v1.2 — 暖色の空に浮かぶ深宵の影） */
.st-btn--sky{background:var(--st-color-cta-sky-fill); color:var(--st-color-cta-sky-label);
  border-color:var(--st-color-cta-sky-border); font-weight:700}
.st-btn--sky:hover{border-color:var(--st-p-ichibanboshi); text-decoration:none}
.st-btn--secondary{background:transparent; color:var(--st-color-text-primary); border-color:var(--st-color-border-strong)}
.st-btn--secondary:hover{border-color:var(--st-color-accent); text-decoration:none}
.st-card{background:var(--st-color-surface); border:1px solid var(--st-color-border);
  border-radius:var(--st-radius-card); padding:var(--st-space-5)}
.st-tag{display:inline-block; font-size:11.5px; padding:4px 12px; border-radius:var(--st-radius-pill);
  background:var(--st-color-surface-deep); border:1px solid var(--st-color-border); color:var(--st-color-text-primary)}
.st-muted{color:var(--st-color-text-weak)}

/* ---- 4. レイアウト ---- */
.lp-container{max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,40px)}
.lp-section{padding:var(--st-space-8) 0}
@media (min-width:768px){.lp-section{padding:var(--st-space-9) 0}}
.lp-eyebrow{display:flex; align-items:center; gap:14px; font-family:var(--st-font-latin);
  font-style:italic; font-size:16px; letter-spacing:.05em; color:var(--st-color-accent); margin-bottom:10px}
.lp-eyebrow .num{font-family:var(--st-font-mono); font-style:normal; font-size:11px;
  border:1px solid var(--st-color-border-strong); border-radius:var(--st-radius-chip); padding:3px 9px;
  color:var(--st-color-text-weak); letter-spacing:.1em}
.lp-eyebrow::after{content:""; flex:1; height:1px; background:var(--st-color-border)}
.lp-section h2{font-size:clamp(24px,4.6vw,34px); letter-spacing:.015em; margin-bottom:var(--st-space-4)}
.lp-lead{font-size:16.5px; line-height:2.0; max-width:40em}
.lp-grid{display:grid; gap:var(--st-space-4)}
@media (min-width:680px){
  .lp-grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .lp-grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:960px){.lp-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:680px) and (max-width:959px){.lp-grid.cols-4{grid-template-columns:repeat(2,1fr)}}

/* ---- 5. ヘッダ ---- */
.lp-header{position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background var(--st-dur-productive) var(--st-ease-standard), border-color var(--st-dur-productive)}
.lp-header.is-scrolled{background:color-mix(in srgb,var(--st-color-canvas) 86%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--st-color-border)}
.lp-header .inner{max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px}
.lp-logo{font-family:var(--st-font-latin); font-weight:600; font-size:20px; letter-spacing:.16em;
  color:var(--st-color-text-primary); text-decoration:none; display:inline-flex; align-items:baseline; gap:10px}
.lp-logo:hover{text-decoration:none}
.lp-logo small{font-family:var(--st-font-head); font-weight:500; font-size:10px; letter-spacing:.32em;
  color:var(--st-color-text-weak)}
.lp-nav{display:none}
.lp-header .lp-cta-mini{display:none}
@media (min-width:880px){
  .lp-nav{display:flex; gap:4px; align-items:center}
  .lp-nav a{font-size:13px; color:var(--st-color-text-weak); text-decoration:none; padding:8px 12px;
    border-radius:var(--st-radius-chip); transition:color 160ms, background 160ms}
  .lp-nav a:hover{color:var(--st-color-text-primary); background:color-mix(in srgb,var(--st-color-surface) 70%,transparent)}
  .lp-header .lp-cta-mini{display:inline-flex; font-size:12.5px; min-height:38px; padding:8px 16px}
}
/* ハンバーガー（モバイル） */
.lp-menu-btn{display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:12px; background:transparent; border:0; cursor:pointer}
.lp-menu-btn i{display:block; height:1.5px; background:var(--st-color-text-primary); border-radius:1px;
  transition:transform var(--st-dur-productive) var(--st-ease-standard), opacity 160ms}
.lp-menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.lp-menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.lp-menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:880px){.lp-menu-btn{display:none}}
.lp-drawer{position:fixed; inset:0; z-index:90; display:none; flex-direction:column;
  padding:84px clamp(24px,7vw,48px) 40px; background:color-mix(in srgb,var(--st-p-fukayoi) 92%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.lp-drawer.open{display:flex}
.lp-drawer a{font-family:var(--st-font-head); font-size:19px; color:var(--st-color-text-primary);
  text-decoration:none; padding:14px 4px; border-bottom:1px solid var(--st-color-border);
  display:flex; align-items:baseline; gap:14px}
.lp-drawer a .en{font-family:var(--st-font-latin); font-style:italic; font-size:12px; color:var(--st-color-text-weak); letter-spacing:.08em}
.lp-drawer .legal-links{margin-top:auto; display:flex; flex-wrap:wrap; gap:4px 18px; padding-top:24px}
.lp-drawer .legal-links a{font-family:var(--st-font-ui); font-size:12px; color:var(--st-color-text-weak);
  border-bottom:0; padding:4px 0}
body.drawer-open{overflow:hidden}

/* ---- 6. ヒーロー ---- */
.lp-hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:96px 0 120px; color:var(--st-p-hoshijiro)}
.lp-hero .lp-container{position:relative; z-index:2; display:grid; gap:var(--st-space-7); width:100%}
@media (min-width:880px){
  .lp-hero .lp-container{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center}
}
.lp-hero-copy .catch-sub{font-family:var(--st-font-narr); font-size:14px; letter-spacing:.14em;
  color:var(--st-p-ichibanboshi); margin-bottom:18px; opacity:.92}
.lp-hero-copy h1{font-size:clamp(30px,7.2vw,52px); font-weight:700; letter-spacing:.04em; line-height:1.5;
  text-shadow:0 2px 24px rgba(12,8,26,.5); margin-bottom:20px}
.lp-hero-copy .desc{font-size:clamp(14px,3.6vw,16px); line-height:2.0; max-width:30em;
  text-shadow:0 1px 12px rgba(12,8,26,.55); margin-bottom:28px}
.lp-hero-copy .desc b{font-weight:700}
.lp-wordmark{font-family:var(--st-font-latin); font-weight:600; letter-spacing:.18em; line-height:1}
.lp-wordmark small{display:block; font-family:var(--st-font-head); font-weight:500; letter-spacing:.46em; opacity:.9}
.lp-hero .lp-wordmark{font-size:clamp(26px,5.4vw,36px); margin-bottom:24px;
  text-shadow:0 2px 24px rgba(12,8,26,.5)}
.lp-hero .lp-wordmark small{font-size:11px; margin-top:7px; letter-spacing:.44em}

/* ストアバッジ */
.lp-store{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
/* ストアバッジは空の上に置く主 CTA — v1.2 の深宵シルエットで組む */
.lp-badge{display:inline-flex; align-items:center; gap:11px; min-height:56px; padding:9px 20px 9px 16px;
  border-radius:var(--st-radius-control); text-decoration:none;
  background:var(--st-color-cta-sky-fill); border:1px solid var(--st-color-cta-sky-border);
  color:var(--st-color-cta-sky-label);
  transition:border-color 160ms, background 160ms}
.lp-badge:hover{border-color:var(--st-p-ichibanboshi); text-decoration:none;
  background:color-mix(in srgb,var(--st-color-cta-sky-fill) 86%,#000)}
.lp-badge svg{width:24px; height:24px; flex:none}
.lp-badge .txt{display:flex; flex-direction:column; line-height:1.25; text-align:left}
.lp-badge .txt small{font-size:10px; letter-spacing:.08em; color:var(--st-p-ichibanboshi); opacity:.85}
.lp-badge .txt b{font-family:var(--st-font-latin); font-weight:600; font-size:17.5px; letter-spacing:.05em}
.lp-store-note{width:100%; font-size:11.5px; color:rgba(239,233,220,.75); letter-spacing:.04em; margin-top:2px}

/* href が付くまでバッジは「近日配信」の非リンク（クリック不可）として描く */
a.lp-badge:not([href]){cursor:default}
a.lp-badge:not([href]):hover{border-color:var(--st-color-cta-sky-border); background:var(--st-color-cta-sky-fill)}

/* スマホモック（design.html §5 の st-phone。スクリーンショット差し替え可） */
.lp-phone-col{display:flex; justify-content:center}
.st-phone{width:min(272px,72vw); aspect-ratio:375/812; border-radius:40px; padding:10px; flex:none;
  background:#26232E; box-shadow:var(--st-shadow), inset 0 0 0 1.5px rgba(255,255,255,.06)}
.st-screen{position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden;
  background:var(--st-color-canvas); color:var(--st-color-text-primary); display:flex; flex-direction:column}
.st-screen .notch{position:absolute; top:0; left:50%; transform:translateX(-50%); width:96px; height:20px;
  background:#0D0B12; border-radius:0 0 12px 12px; z-index:20}
.st-screen .safe{padding:32px 16px 14px; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden}
.st-screen > img{width:100%; height:100%; object-fit:cover}
/* モック内容（実スクリーンショットが用意できるまでの CSS 描画） */
.app-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:10px; border-bottom:1px solid var(--st-color-border); margin-bottom:12px}
.app-head .chap{font-family:var(--st-font-head); font-weight:500; font-size:12.5px}
.app-head .meta{display:flex; gap:8px; align-items:center; font-size:10.5px; color:var(--st-color-text-weak)}
.app-turn{font-family:var(--st-font-latin); font-style:italic; letter-spacing:.08em}
.app-narr{flex:1; overflow:hidden; font-family:var(--st-font-narr); font-size:12.5px; line-height:1.95}
.app-narr p{margin:0 0 .85em; text-indent:1em}
.app-narr p.speech{text-indent:0}
.app-choices{display:flex; flex-direction:column; gap:7px; margin-top:8px}
.app-choice{width:100%; text-align:left; font-size:11px; background:var(--st-color-surface);
  color:var(--st-color-text-primary); border:1px solid var(--st-color-border-strong);
  border-radius:var(--st-radius-control); padding:9px 11px; display:flex; gap:8px; align-items:center}
.app-choice .idx{font-family:var(--st-font-latin); font-style:italic; color:var(--st-color-text-weak); flex:none}
.app-input{margin-top:7px; font-size:10.5px; color:var(--st-color-text-weak);
  background:var(--st-color-surface-deep); border:1px solid var(--st-color-border);
  border-radius:var(--st-radius-control); padding:9px 11px}

/* スクロール誘導 */
.lp-scroll-cue{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  font-family:var(--st-font-latin); font-style:italic; font-size:11px; letter-spacing:.3em;
  color:rgba(239,233,220,.7); text-shadow:0 1px 8px rgba(12,8,26,.5); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:8px}
.lp-scroll-cue::after{content:""; width:1px; height:34px;
  background:linear-gradient(180deg,rgba(242,231,203,.8),transparent)}
.lp-scroll-cue:hover{text-decoration:none; color:var(--st-p-ichibanboshi)}

/* ---- 7. キャンペーンバナー（World 訴求。KV 画像はここに差す） ---- */
.lp-campaign{position:relative; z-index:3; margin-top:-72px}
.lp-campaign-card{position:relative; display:block; border-radius:var(--st-radius-large); overflow:hidden;
  border:0; box-shadow:var(--st-shadow); text-decoration:none; color:var(--st-p-hoshijiro);
  width:100%; text-align:left; cursor:pointer; padding:0}
.lp-campaign-card .win{position:relative; min-height:220px; display:flex; align-items:flex-end}
.lp-campaign-card .win .kv{position:absolute; inset:0; background-size:cover; background-position:center}
.lp-campaign-card .scrim{position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,transparent 40%,var(--st-color-scrim))}
.lp-campaign-card .body{position:relative; z-index:3; padding:clamp(20px,4vw,32px); width:100%}
.lp-campaign-card .lbl{display:inline-flex; align-items:center; gap:10px; font-family:var(--st-font-latin);
  font-style:italic; font-size:13px; letter-spacing:.22em; color:var(--st-p-ichibanboshi); margin-bottom:10px}
.lp-campaign-card .lbl::before{content:""; width:26px; height:1px; background:currentColor; opacity:.7}
.lp-campaign-card .ttl{font-family:var(--st-font-head); font-weight:700; font-size:clamp(17px,3.4vw,24px);
  line-height:1.6; text-shadow:0 1px 10px rgba(12,8,26,.6); margin-bottom:8px}
.lp-campaign-card .sub{font-family:var(--st-font-narr); font-size:13px; color:rgba(239,233,220,.88);
  text-shadow:0 1px 8px rgba(12,8,26,.6); margin:0}
.lp-campaign-card .more{position:absolute; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,26px); z-index:3;
  font-size:12px; letter-spacing:.1em; color:var(--st-p-hoshijiro);
  border:1px solid rgba(239,233,220,.5); border-radius:var(--st-radius-pill); padding:7px 16px;
  backdrop-filter:blur(4px); background:rgba(18,14,32,.35); transition:background 160ms, border-color 160ms}
@media (max-width:560px){.lp-campaign-card .more{display:none}}
.lp-campaign-card:hover .more{border-color:var(--st-p-zansho); background:rgba(18,14,32,.6)}

/* ---- 8. コンセプト ---- */
.lp-pillars .st-card h3{font-size:17.5px; margin-bottom:10px; display:flex; align-items:center; gap:10px}
.lp-pillars .st-card h3 svg{width:22px; height:22px; flex:none; stroke:var(--st-color-accent); fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.lp-pillars .st-card p{margin:0; font-size:14px; color:var(--st-color-text-weak); line-height:1.9}
/* 物語サンプル（GM の声 — 明朝） */
.lp-narrative{border-radius:var(--st-radius-card); border:1px solid var(--st-color-border);
  background:var(--st-color-surface-deep); padding:clamp(20px,4vw,32px); margin-top:var(--st-space-6)}
.lp-narrative .gm{font-family:var(--st-font-narr); font-size:15.5px; line-height:2.1; max-width:36em; margin:0 auto}
.lp-narrative .gm p{text-indent:1em; margin-bottom:.9em}
.lp-narrative .gm p.speech{text-indent:0}
.lp-narrative .you{max-width:36em; margin:14px auto 0; display:flex; justify-content:flex-end}
.lp-narrative .you span{font-size:13px; background:var(--st-color-surface); border:1px solid var(--st-color-border-strong);
  border-radius:var(--st-radius-control); padding:10px 14px}
.lp-narrative .cap{text-align:center; font-size:11px; letter-spacing:.2em; color:var(--st-color-text-weak);
  margin:0 0 18px}

/* ---- 9. システム ---- */
.lp-feature{display:flex; flex-direction:column; gap:12px}
.lp-feature .ic{width:44px; height:44px; border-radius:var(--st-radius-control);
  border:1px solid var(--st-color-border-strong); display:inline-flex; align-items:center; justify-content:center}
.lp-feature .ic svg{width:24px; height:24px; stroke:var(--st-color-text-primary); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.lp-feature h3{font-size:16.5px}
.lp-feature p{margin:0; font-size:13.5px; color:var(--st-color-text-weak); line-height:1.85}
.lp-feature .demo{margin-top:auto; font-family:var(--st-font-mono); font-size:12px; letter-spacing:.02em;
  color:var(--st-color-text-primary); background:var(--st-color-surface-deep);
  border-radius:var(--st-radius-chip); padding:9px 12px; text-align:center}
.lp-feature .demo b{color:var(--st-color-success); font-weight:600}
/* 欄外の注記（安心設計） — 小さく静かに */
.lp-safety-note{margin:var(--st-space-4) 0 0; display:flex; align-items:baseline; gap:8px;
  font-size:12px; color:var(--st-color-text-weak); line-height:1.8}
.lp-safety-note svg{width:14px; height:14px; flex:none; align-self:center;
  stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ---- 10. World ---- */
.lp-worlds-note{font-size:13px; color:var(--st-color-text-weak); max-width:40em}
.lp-world-card{position:relative; display:flex; flex-direction:column; width:100%; padding:0; text-align:left;
  border-radius:var(--st-radius-large); overflow:hidden; border:0; background:var(--st-color-surface);
  box-shadow:var(--st-shadow); cursor:pointer; color:var(--st-color-text-primary);
  transition:transform var(--st-dur-productive) var(--st-ease-standard)}
.lp-world-card:hover{transform:translateY(-3px)}
.lp-world-card .win{position:relative; height:190px}
.lp-world-card .win .kv{position:absolute; inset:0; background-size:cover; background-position:center}
.lp-world-card .win .no{position:absolute; left:16px; top:14px; z-index:2; font-family:var(--st-font-latin);
  font-style:italic; font-size:13px; letter-spacing:.24em; color:rgba(239,233,220,.85)}
.lp-world-card .win .status{position:absolute; right:14px; top:14px; z-index:2; font-size:10.5px; letter-spacing:.12em;
  color:var(--st-p-ichibanboshi); border:1px solid rgba(242,231,203,.45); border-radius:var(--st-radius-pill);
  padding:4px 12px; backdrop-filter:blur(4px); background:rgba(18,14,32,.35)}
.lp-world-card .body{padding:20px 22px 48px; display:flex; flex-direction:column; gap:9px; flex:1}
.lp-world-card--soon .body{padding-bottom:22px}
.lp-world-card .ttl{font-family:var(--st-font-head); font-weight:700; font-size:16.5px; line-height:1.65}
.lp-world-card .tgl{font-family:var(--st-font-narr); font-size:12.5px; color:var(--st-color-text-weak); margin:0}
.lp-world-card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px}
.lp-world-card .open-hint{position:absolute; right:18px; bottom:18px; font-family:var(--st-font-latin);
  font-style:italic; font-size:12px; letter-spacing:.1em; color:var(--st-color-text-weak)}
/* キャンペーンチップ（配信開始日など）— 残照金の点灯。塗り面にはしない */
.lp-chip-campaign{display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--st-color-success);
  border:1px solid color-mix(in srgb,var(--st-color-success) 50%,transparent);
  border-radius:var(--st-radius-pill); padding:4px 13px}
.lp-chip-campaign::before{content:""; width:5px; height:5px; border-radius:50%;
  background:var(--st-color-success); box-shadow:0 0 6px 1px color-mix(in srgb,var(--st-color-success) 55%,transparent)}
.lp-world-card--soon{cursor:default; box-shadow:none; border:1px dashed var(--st-color-border-strong); background:transparent}
.lp-world-card--soon:hover{transform:none}
.lp-world-card--soon .win{opacity:.75}
.lp-world-card--soon .ttl{color:var(--st-color-text-weak)}

/* World モーダル（dialog）— World の空をまとい、LP 本体から意匠を分離する */
.lp-world-dialog{border:0; padding:0; margin:auto; width:min(720px,calc(100vw - 32px));
  max-height:calc(100dvh - 48px); border-radius:var(--st-radius-large); overflow:hidden;
  background:var(--st-color-canvas); color:var(--st-color-text-primary); box-shadow:var(--st-shadow)}
.lp-world-dialog::backdrop{background:rgba(18,16,23,.72); backdrop-filter:blur(6px)}
.lp-world-dialog .scroll{max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain}
.lp-world-dialog .hero{position:relative; min-height:230px; display:flex; align-items:flex-end;
  color:var(--st-p-hoshijiro)}
.lp-world-dialog .hero .scrim{position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,transparent 40%,var(--st-color-scrim))}
.lp-world-dialog .hero .tx{position:relative; z-index:3; padding:24px clamp(20px,5vw,36px)}
.lp-world-dialog .hero .no{font-family:var(--st-font-latin); font-style:italic; font-size:13px;
  letter-spacing:.26em; color:var(--st-p-ichibanboshi); display:block; margin-bottom:8px}
.lp-world-dialog .hero .ttl{font-family:var(--st-font-head); font-weight:700; font-size:clamp(18px,4vw,25px);
  line-height:1.6; text-shadow:0 1px 12px rgba(12,8,26,.6)}
.lp-world-dialog .hero .tgl{font-family:var(--st-font-narr); font-size:13.5px; margin:8px 0 0;
  color:rgba(239,233,220,.9); text-shadow:0 1px 8px rgba(12,8,26,.6)}
.lp-world-dialog .close{position:absolute; top:14px; right:14px; z-index:5; width:44px; height:44px;
  border-radius:50%; border:1px solid rgba(239,233,220,.4); background:rgba(18,14,32,.45); cursor:pointer;
  color:var(--st-p-hoshijiro); display:inline-flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:border-color 160ms, background 160ms}
.lp-world-dialog .close:hover{border-color:var(--st-p-zansho); background:rgba(18,14,32,.7)}
.lp-world-dialog .close svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round}
.lp-world-dialog .content{padding:clamp(22px,5vw,36px)}
.lp-world-dialog .content h4{font-family:var(--st-font-ui); font-weight:700; font-size:12px; letter-spacing:.22em;
  color:var(--st-color-text-weak); margin:0 0 12px; display:flex; align-items:center; gap:12px}
.lp-world-dialog .content h4::after{content:""; flex:1; height:1px; background:var(--st-color-border)}
.lp-world-dialog .content section + section{margin-top:var(--st-space-6)}
.lp-world-dialog .story{font-family:var(--st-font-narr); font-size:14.5px; line-height:2.05; margin:0}
.lp-world-dialog .tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.lp-world-cast{display:grid; gap:12px}
@media (min-width:600px){.lp-world-cast{grid-template-columns:repeat(3,1fr)}}
.lp-cast-card{background:var(--st-color-surface); border:1px solid var(--st-color-border);
  border-radius:var(--st-radius-card); padding:16px 16px 14px}
.lp-cast-card .role{font-size:10.5px; letter-spacing:.14em; color:var(--st-color-text-weak); display:block; margin-bottom:5px}
.lp-cast-card .nm{font-family:var(--st-font-head); font-weight:700; font-size:15.5px; display:block; line-height:1.5}
.lp-cast-card .desc{font-size:12px; color:var(--st-color-text-weak); line-height:1.8; margin:8px 0 10px}
.lp-cast-card q{font-family:var(--st-font-narr); font-size:12.5px; color:var(--st-color-text-primary); quotes:"「" "」"}
.lp-world-chap{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
.lp-world-chap li{display:flex; align-items:baseline; gap:12px; font-size:13.5px;
  background:var(--st-color-surface); border:1px solid var(--st-color-border);
  border-radius:var(--st-radius-chip); padding:9px 14px}
.lp-world-chap .ch{font-family:var(--st-font-latin); font-style:italic; font-size:11.5px; letter-spacing:.06em;
  color:var(--st-color-text-weak); min-width:74px}
.lp-world-chap .st{margin-left:auto; font-size:10.5px; letter-spacing:.1em; color:var(--st-color-text-weak); flex:none}
.lp-world-chap li.now .st{color:var(--st-color-success)}
.lp-world-dialog .protagonist{font-size:13px; color:var(--st-color-text-weak); line-height:1.9; margin:0}
.lp-world-dialog .protagonist b{color:var(--st-color-text-primary)}

/* ---- 10.5 ダウンロード（締めの CTA — 中央寄せ・余白は広めに） ---- */
.lp-download{text-align:center; padding:var(--st-space-9) 0}
@media (min-width:768px){.lp-download{padding:160px 0 128px}}
.lp-download .lp-eyebrow{justify-content:center; margin-bottom:var(--st-space-6)}
.lp-download .lp-eyebrow::before{content:""; flex:1; height:1px; background:var(--st-color-border)}
.lp-download h2{margin-bottom:var(--st-space-5)}
.lp-download .lp-lead{margin:0 auto var(--st-space-7)}
.lp-download .lp-store{justify-content:center}
.lp-download .lp-store-note{text-align:center}

/* ---- 11. お知らせ ---- */
.lp-news{list-style:none; margin:0; padding:0; border-top:1px solid var(--st-color-border)}
.lp-news li{border-bottom:1px solid var(--st-color-border)}
.lp-news .row{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; padding:18px 4px}
.lp-news time{font-family:var(--st-font-mono); font-size:12px; color:var(--st-color-text-weak); letter-spacing:.04em; flex:none}
.lp-news .cat{font-size:10.5px; letter-spacing:.14em; border:1px solid var(--st-color-border-strong);
  border-radius:var(--st-radius-pill); padding:2px 10px; color:var(--st-color-text-weak); flex:none}
.lp-news .cat--world{color:var(--st-color-success); border-color:color-mix(in srgb,var(--st-color-success) 45%,transparent)}
.lp-news .tx{font-size:14px; flex:1; min-width:min(24em,100%)}

/* ---- 12. フッタ ---- */
.lp-footer{position:relative; margin-top:var(--st-space-8); color:var(--st-p-hoshijiro)}
.lp-footer .inner{position:relative; z-index:2; max-width:1080px; margin:0 auto;
  padding:var(--st-space-8) clamp(20px,5vw,40px) 84px; text-align:center}
.lp-footer .lp-wordmark{font-size:26px}
.lp-footer .lp-wordmark small{font-size:10px; margin-top:7px}
.lp-footer .tagline{font-family:var(--st-font-head); font-size:13px; letter-spacing:.3em; margin:18px 0 30px; opacity:.9}
.lp-footer nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; margin-bottom:26px}
.lp-footer nav.store-nav{margin-bottom:14px}
.lp-footer nav a{font-size:12.5px; color:rgba(239,233,220,.85); text-decoration:none}
.lp-footer nav a:hover{color:var(--st-p-ichibanboshi); text-decoration:underline}
.lp-footer .credit{font-size:12px; color:rgba(239,233,220,.8); margin-bottom:10px}
.lp-footer .credit a{color:var(--st-p-ichibanboshi)}
.lp-footer .copy{font-family:var(--st-font-latin); font-size:11.5px; letter-spacing:.18em; color:rgba(239,233,220,.6);
  text-shadow:0 1px 8px rgba(12,8,26,.5)}

/* ---- 13. 下層ページ（利用規約・プラポリ・特商法） ---- */
.doc-hero{position:relative; padding:118px 0 42px; color:var(--st-p-hoshijiro)}
.doc-hero .st-horizon{bottom:9%} /* タイトル文字に罫が重ならない位置へ */
.doc-hero .lp-container{position:relative; z-index:2}
.doc-hero .bc{font-family:var(--st-font-latin); font-style:italic; font-size:12.5px; letter-spacing:.2em;
  color:var(--st-p-ichibanboshi); display:block; margin-bottom:10px}
.doc-hero h1{font-size:clamp(22px,5vw,30px); letter-spacing:.03em; text-shadow:0 1px 12px rgba(12,8,26,.5)}
.doc-body{padding:var(--st-space-7) 0 var(--st-space-9)}
.doc-body .lp-container{max-width:860px}
.doc-meta{font-size:12.5px; color:var(--st-color-text-weak); margin-bottom:var(--st-space-6)}
.doc-meta li{margin:2px 0}
article.doc{font-size:14.5px; line-height:2.0}
article.doc h2{font-size:18px; letter-spacing:.02em; margin:var(--st-space-7) 0 var(--st-space-3);
  padding-bottom:10px; border-bottom:1px solid var(--st-color-border)}
article.doc h3{font-family:var(--st-font-ui); font-weight:700; font-size:14.5px; margin:var(--st-space-5) 0 var(--st-space-2)}
article.doc p, article.doc li{max-width:44em}
article.doc ol > li, article.doc ul > li{margin:6px 0}
article.doc .doc-note{border-left:3px solid var(--st-color-accent);
  background:color-mix(in srgb,var(--st-color-accent) 7%,var(--st-color-surface));
  padding:14px 20px; border-radius:0 var(--st-radius-chip) var(--st-radius-chip) 0; margin:var(--st-space-5) 0;
  font-size:13px}
.doc-table{width:100%; border-collapse:collapse; font-size:13.5px;
  border:1px solid var(--st-color-border); border-radius:var(--st-radius-chip); overflow:hidden}
.doc-table th,.doc-table td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--st-color-border); vertical-align:top}
.doc-table tbody tr:last-child th,.doc-table tbody tr:last-child td{border-bottom:0}
.doc-table th{background:var(--st-color-surface-deep); font-weight:700; font-size:12px; letter-spacing:.06em;
  color:var(--st-color-text-weak); white-space:nowrap; width:11em}
.doc-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.doc-back{margin-top:var(--st-space-7)}
/* 公開前に確定する箇所（オーナー確認待ちのプレースホルダ） */
.todo-owner{background:color-mix(in srgb,var(--st-color-accent) 16%,transparent);
  border-radius:3px; padding:0 4px; font-weight:500}

/* ---- 14. 出現アニメーション（JS が有効なときだけ隠す。html.js は site.js が付与） ---- */
html.js .reveal{opacity:0; transform:translateY(18px);
  transition:opacity var(--st-dur-expressive) var(--st-ease-sky), transform var(--st-dur-expressive) var(--st-ease-sky)}
html.js .reveal.is-visible{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .st-stars i,.st-firststar{opacity:.7}
  .reveal{opacity:1; transform:none}
}