/* ============================================================
   MBRT 公式HP 共通スタイル
   正本: mbrt-controller/public/hp/mbrt-hp.css（Firebase Hosting で配信）
   読み込み: <link rel="stylesheet" href="https://mbrt-controller.web.app/hp/mbrt-hp.css">
   各ページ固有のスタイルは、このあとに <style> で書く（後勝ちで上書きできる）。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

:root{
  --bg:#0c0605; --bg-2:#140a07; --surface:#1b0f0a; --surface-2:#241410; --line:#3a221a;
  --ink:#fff4ea; --ink-dim:#c4a594;
  --red:#ff2e1f; --orange:#ff7a16; --yellow:#ffcf2e;
  --gold:#ffcf2e; --silver:#d9d9e0; --bronze:#e08a4b;
  --fire:linear-gradient(100deg,#ffcf2e 0%,#ff7a16 45%,#ff2e1f 100%);
  --f-disp:"Zen Kaku Gothic New",sans-serif; --f-body:"Zen Kaku Gothic New",sans-serif;
  --maxw:880px; --gut:clamp(18px,5vw,52px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-weight:500;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.fire{background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.hazard{height:10px;background:repeating-linear-gradient(45deg,var(--yellow) 0 16px,#150d09 16px 32px)}

/* チップ（ロゴの丸） */
.chip{display:inline-block;width:.82em;height:.82em;border-radius:50%;vertical-align:-.12em;margin-left:.06em;position:relative;background:var(--fire)}
.chip::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#1a0d08 0 8deg,transparent 8deg 30deg);-webkit-mask:radial-gradient(closest-side,transparent 60%,#000 62%,#000 92%,transparent 95%);mask:radial-gradient(closest-side,transparent 60%,#000 62%,#000 92%,transparent 95%)}
.chip::after{content:"";position:absolute;inset:28%;border-radius:50%;background:var(--fire);box-shadow:inset 0 0 0 .07em rgba(26,13,8,.55)}

/* ナビ（[mbrt_nav] ショートコードの出力に効く） */
header.nav{position:sticky;top:0;z-index:50;background:rgba(12,6,5,.9);backdrop-filter:blur(10px);border-bottom:2px solid var(--red)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:var(--f-disp);font-weight:900;font-size:22px;color:var(--ink);flex-shrink:0}
.nav-links{display:flex;gap:20px;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-weight:700;font-size:13px;color:var(--ink-dim);transition:.2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.cur{color:var(--yellow)}
@media(max-width:680px){.nav-links{gap:12px}.nav-links a{font-size:12px}}

/* 見出しの帯・ヒーローの基本 */
.eyebrow{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.12em;color:#1a0d08;background:var(--fire);padding:5px 14px;border-radius:4px;margin-bottom:14px}
.hero{position:relative;overflow:hidden;text-align:center;padding:clamp(42px,8vh,76px) 0 30px;
  background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(255,122,22,.16),transparent 60%)}
.hero .latin{font-family:var(--f-disp);font-weight:900;font-size:clamp(32px,7.5vw,64px);line-height:.96;letter-spacing:.03em;background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{font-family:var(--f-disp);font-weight:700;font-size:clamp(18px,3vw,26px);margin-top:8px;color:var(--ink)}
.hero .intro{color:var(--ink-dim);font-weight:500;font-size:14px;margin:14px auto 0;max-width:40em}
.hero .intro b{color:var(--yellow);font-weight:700}

/* 同点バッジ（ランキング系で共通） */
.tie-badge{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid var(--orange);border-radius:10px;font-size:11px;font-weight:700;color:var(--orange);vertical-align:2px;white-space:nowrap}

/* フッター */
footer{border-top:2px solid var(--red);padding:34px 0;text-align:center}
footer .logo{font-size:20px;display:inline-block;margin-bottom:8px}
footer p{color:var(--ink-dim);font-size:12px;font-weight:700}
.back{display:inline-block;margin-top:16px;font-weight:700;font-size:14px;color:var(--yellow)}