/* ============================================================
   Beat Buddy Boi — Design tokens (v1)
   ロゴから抽出した実際の色: 赤 #C30D23 / 黄 #FFEE5A / 水 #56B8D4
   写真のグレーディング（夜・ティール寄り）に合わせて水色を主アクセントに。
   ============================================================ */
:root{
  --bg:        #08080A;
  --bg-2:      #0F1013;
  --bg-3:      #16181C;
  --line:      #24262C;
  --line-2:    #33363E;
  --ink:       #FFFFFF;
  --ink-2:     #C7CBD2;
  --mute:      #7C828C;

  --red:       #E01B35;   /* CTA・強調（ロゴ #C30D23 を暗背景用に微調整） */
  --red-deep:  #C30D23;
  --yellow:    #FFEE5A;
  --cyan:      #56B8D4;   /* 主アクセント。写真のティールと同調 */
  --cyan-dim:  #2E7A91;

  --max:       1320px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP","Noto Sans CJK JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  font-size:15px; line-height:1.9; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 画像は原則、元の比率を保つ。width/height 属性を両方書いても潰れないよう height:auto を既定にする。
   （object-fit で埋めるヒーロー・カード類は、より詳細度の高いセレクタ側で height:100% を指定している） */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.en{font-family:"Poppins",-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.02em}
.mono{font-family:"DejaVu Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
      font-size:11px;letter-spacing:.18em;text-transform:uppercase}

.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
@media(max-width:680px){ .wrap{padding:0 22px} }

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:100;height:74px;display:flex;align-items:center;
    padding:0 34px;transition:background .4s var(--ease),backdrop-filter .4s}
.hd.solid{background:rgba(8,8,10,.86);backdrop-filter:blur(14px);
          border-bottom:1px solid var(--line)}
.hd .mark{display:flex;align-items:center;gap:11px}
.hd .mark img{height:30px;width:auto}
.hd nav{margin-left:auto;display:flex;gap:30px;align-items:center}
.hd nav a{font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--ink-2);
          transition:color .25s}
.hd nav a:hover{color:var(--ink)}
.hd .shop{border:1px solid var(--line-2);border-radius:999px;padding:8px 18px;
          font-size:11px;letter-spacing:.14em;font-weight:700;transition:.25s}
.hd .shop:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* ファンクラブ（Fanicon）— 一番押してほしい導線なのでアクセント色で塗る */
.hd .fc{background:var(--red);color:#fff;border-radius:999px;padding:8px 18px;
        font-size:11px;letter-spacing:.14em;font-weight:700;transition:.25s;
        box-shadow:0 6px 22px rgba(224,27,53,.32)}
.hd .fc:hover{background:#ff2a46;transform:translateY(-1px)}
@media(max-width:900px){ .hd nav{display:none} }

/* ---------- shared hero bits ---------- */
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;z-index:6}
.scrollcue span{font-size:9.5px;letter-spacing:.3em;color:var(--mute)}
.scrollcue i{width:1px;height:46px;background:linear-gradient(var(--mute),transparent);
  display:block;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

.sns{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:60;
     display:flex;flex-direction:column;gap:17px}
.sns a{font-size:10px;letter-spacing:.14em;color:var(--mute);writing-mode:vertical-rl;
       transition:color .25s}
.sns a:hover{color:var(--cyan)}
@media(max-width:900px){ .sns{display:none} }

.grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay}