/* ==========================================================================
   STC UNIFY  —  神のレポート / VWAP神の線 をホーム(index.html)と同じデザインに統一
   ホームのトークン・書体・ナビ・フッター・CTA を継承する最終レイヤー
   ========================================================================== */

/* ---- 1. カラートークンをホームと同一に（ネイビー → 漆黒系 + クリムゾン） ---- */
:root{
  --black:#0a0a0a; --black-2:#111111; --black-3:#171717; --black-4:#1f1f1f;
  --navy:#0d0d10; --navy-2:#141418; --navy-deep:#070a12;
  --panel:#111114; --panel-2:#17171b;
  --line:#2a2926; --line-strong:#454037;
  --gold:#d4b578; --gold-2:#e3c68f; --gold-deep:#9a7a45;
  --gold-glow:rgba(212,181,120,.18);
  --off:#faf7f0; --off-2:#ede7d8; --muted:#a8a39a; --muted-2:#7a756c;
  --crimson:#e0102f; --crimson-deep:#9e0820;
  --red:#c8102e; --red-2:#e11d38; --red-deep:#8f0a20;
  --f-serif:"Cormorant Garamond","Noto Serif JP",ui-serif,Georgia,serif;
  --f-sans:"Inter","Noto Sans JP",-apple-system,"Helvetica Neue",sans-serif;
  --f-jp:"Noto Serif JP","Zen Kaku Gothic New","Noto Sans JP",serif;
  --f-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --page-x:clamp(24px,6vw,96px);
}
html{scroll-behavior:smooth}
body{background:var(--navy-deep);color:var(--off);font-family:var(--f-sans);font-size:16px;padding-bottom:80px}
::selection{background:var(--crimson);color:#fff}

/* ---- 2. 告知バー（ホーム最上部の赤いバーと同じ） ---- */
.promo-bar{position:relative;z-index:120;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:9px 16px;text-align:center;color:#fff;font-family:"Noto Sans JP",var(--f-sans);font-size:13px;font-weight:600;letter-spacing:.04em;
  background:linear-gradient(90deg,var(--red-deep) 0%,var(--red) 48%,var(--red-2) 100%);box-shadow:0 2px 14px rgba(0,0,0,.28)}
.promo-bar b{font-weight:800}
.promo-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700;white-space:nowrap}
.promo-bar a:hover{color:#ffe9ec}
.pb-live{background:#fff;color:var(--red);font-size:10px;font-weight:800;letter-spacing:.18em;padding:3px 9px;border-radius:2px;flex:0 0 auto}

/* ---- 3. ナビゲーション（ホームのナビと同一の質感・赤CTA） ---- */
.nav{position:sticky;top:0;z-index:100;padding:0;background:rgba(7,10,18,.86);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:17px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-brand{display:flex;align-items:baseline;gap:14px;min-width:0}
.nav-brand .brand-mark{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:26px;letter-spacing:.06em;color:var(--off);white-space:nowrap}
.nav-brand .brand-mark i{font-style:italic;font-weight:400;color:var(--gold)}
.brand-mark .amp{color:var(--gold);font-style:italic;margin:0 4px;font-weight:400}
.brand-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  border-left:1px solid var(--line-strong);padding-left:14px;white-space:nowrap}
.nav-back{position:relative;font-family:"Noto Sans JP",var(--f-sans);font-size:14px;font-weight:500;letter-spacing:.05em;
  text-transform:none;color:var(--off);padding-bottom:3px;transition:color .25s var(--ease)}
.nav-back::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .35s var(--ease)}
.nav-back:hover{color:var(--gold-2)}
.nav-back:hover::after{right:0}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:2px;color:#fff;
  background:linear-gradient(90deg,var(--crimson-deep) 0%,var(--crimson) 55%,var(--red-2) 100%);
  border:1px solid rgba(255,255,255,.14);font-family:"Noto Sans JP",var(--f-sans);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:none;box-shadow:0 6px 20px rgba(224,16,47,.28);transition:filter .25s var(--ease),transform .25s var(--ease)}
.nav-cta:hover{filter:brightness(1.1);transform:translateY(-1px);background:linear-gradient(90deg,var(--crimson-deep) 0%,var(--crimson) 55%,var(--red-2) 100%)}

/* ---- 4. 見出し・本文の書体をホームに合わせる ---- */
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:500}
.section-title{color:var(--off)}
.jp-serif{font-family:var(--f-jp)}
.section-lead{color:var(--muted)}
.section-alt{background:var(--black-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- 5. ボタン（ホームの .btn / .btn-primary と同一） ---- */
.btn{border-radius:2px;font-family:"Noto Sans JP",var(--f-sans);font-size:15px;font-weight:500;letter-spacing:.08em;padding:18px 32px;border:1px solid var(--gold);color:var(--gold);background:transparent}
.btn:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
.btn-primary{background:var(--gold);color:var(--black);font-weight:600;border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--black)}
.btn-lg{font-size:17px;padding:22px 38px}
.btn-meta{color:var(--muted)}

/* ---- 6. フッター（ホームのフッターと同一） ---- */
.footer{background:var(--black-2);border-top:1px solid var(--line);padding:80px 0 40px}
.footer-notice{font-size:12.5px;color:var(--muted);line-height:1.9;padding:24px;border:1px solid var(--line);background:rgba(255,255,255,.015);margin-bottom:40px}
.footer-links{display:flex;flex-wrap:wrap;gap:22px 40px;padding:24px 0;border-top:1px solid var(--line);margin-bottom:24px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.footer-links a{color:var(--muted);transition:color .2s}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase}
.footer-bottom .brand-line b{color:var(--off);font-weight:700}
.footer .brand-line{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}

/* ---- 7. 下部固定CTA（ホームと同じ） ---- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:130;display:flex;align-items:center;gap:12px;
  padding:10px clamp(12px,3vw,26px);background:rgba(7,10,18,.96);border-top:2px solid var(--crimson);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sc-txt{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto;font-family:"Noto Sans JP",var(--f-sans)}
.sc-txt b{font-size:13px;font-weight:700;color:var(--off);letter-spacing:.02em}
.sc-txt span{font-size:11.5px;color:var(--muted)}
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:2px;
  font-family:"Noto Sans JP",var(--f-sans);font-size:13.5px;font-weight:700;padding:13px 20px;text-decoration:none}
.sc-line{background:#06c755;color:#fff}
.sc-main{background:var(--red);color:#fff}
.sc-main:hover{background:var(--red-2)}
.sc-line:hover{filter:brightness(1.06)}

/* ---- 8. レスポンシブ ---- */
@media(max-width:1240px){
  .brand-sub{display:none}
  .nav-inner{padding:14px 20px;gap:14px}
  .nav-brand .brand-mark{font-size:20px}
  .nav-back{font-size:13px}
  .nav-cta{padding:10px 14px;font-size:12px}
  .promo-bar{font-size:11.5px;gap:8px;padding:8px 10px}
}
@media(max-width:720px){
  .sc-txt span{display:none}
  .sc-btn{flex:1;font-size:13px;padding:14px 10px}
  body{padding-bottom:74px}
}