/* トップページ (2026-09-25 リニューアル。index.cgi が読む) */
:root{
  --night-1:#111a28; --night-2:#1a3150; --night-3:#223f66;
  --pink:#e8628f; --gold:#d9b35f; --sky:#6fa8dc;
  --bg:#f4f6f9; --surface:#ffffff; --ink:#15202b; --muted:#5b6b7b; --line:#dfe5ec;
  --accent:#1d6fd6; --accent-ink:#ffffff;
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f151d; --surface:#172130; --ink:#e7edf3; --muted:#9fb0c1; --line:#263345;
    --accent:#5aa2ff; --accent-ink:#0b1320;
  }
}
:root[data-theme="dark"]{
  --bg:#0f151d; --surface:#172130; --ink:#e7edf3; --muted:#9fb0c1; --line:#263345;
  --accent:#5aa2ff; --accent-ink:#0b1320;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:15px; line-height:1.7;
}
a{ color:var(--accent); }
.round{ font-family:"M PLUS Rounded 1c","Noto Sans JP",sans-serif; }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 22px; border-radius:999px; border:0;
  font-weight:700; font-size:16px; text-decoration:none; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--pink); color:#fff; box-shadow:0 6px 18px rgba(232,98,143,.35); }
.btn-primary:hover{ box-shadow:0 8px 22px rgba(232,98,143,.5); }
.btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-ghost:hover{ background:rgba(255,255,255,.18); }

/* 夜空の背景 (OGP と同じ世界観) */
.night{
  background:
    radial-gradient(ellipse at 20% 30%, rgba(111,168,220,.28), transparent 55%),
    linear-gradient(160deg, var(--night-1) 0%, var(--night-2) 60%, var(--night-3) 100%);
  color:#fff;
}

/* ピアノ君 */
.pkun{ display:block; }
.pkun .eye{ animation:pk-blink 5s infinite; transform-origin:center; transform-box:fill-box; }
@keyframes pk-blink{ 0%,92%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.1); } }
.pkun-bob{ animation:pk-bob 2.4s ease-in-out infinite; }
@keyframes pk-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* 音符 */
.note{ position:absolute; font-size:28px; line-height:1; opacity:.9; animation:note-float 6s ease-in-out infinite; pointer-events:none; }
@keyframes note-float{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-10px) rotate(6deg); } }

/* 鍵盤の帯 */
.keys-strip{ display:block; width:100%; height:56px; }

/* 広告 (PC だけ。試作では枠だけ) */
.ad-slot{
  width:160px; height:600px; border:1px dashed var(--line); border-radius:8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-size:12px; background:var(--surface);
}
.ad-rail{ display:none; }
@media (min-width:1080px){
  .ad-rail{ display:block; position:sticky; top:56px; align-self:flex-start; }
}

.footer{ color:var(--muted); font-size:12px; text-align:center; padding:24px 16px 40px; }
.footer a{ color:var(--muted); }

@media (prefers-reduced-motion: reduce){
  .pkun .eye, .pkun-bob, .note{ animation:none; }
  .btn{ transition:none; }
}