/* ===== 全ページ共通：色・書体・ナビ・フッター ===== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Caveat:wght@500;600;700&family=Gochi+Hand&family=Varela+Round&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,800;9..144,900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@400;600&family=Silkscreen&display=swap');

:root {
  --ink: #111111;
  --paper: #FFFFFF;
  --bg: #FF6A2B;            /* ヒーローを落とすたびに変わる */
  --shadow: rgba(0, 0, 0, 0.16);
  --canvas: #E8E1D1;
  --canvas-edge: #D9D0BC;
  --pen: #24201B;
  --red-pen: #C42A1C;
  --hand: 'Gochi Hand', 'Comic Sans MS', cursive;
  --script: 'Caveat', cursive;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --round: 'Varela Round', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --pixel: 'Silkscreen', var(--mono);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--round); }
a { color: inherit; }
img { max-width: 100%; }
/* 枠：中身がまだない項目は灰色の帯で形だけ見せる（1本＝1行。帯の下端が文字の並ぶ線） */
.fr i { display: block; width: var(--w, 100%); }
.fr i::before { content: ""; display: inline-block; width: 100%; height: .6em; border-radius: 3px; background: rgba(17,17,17,.1); }

/* ===== ヘッダー（ナビはシリーズから自動生成） ===== */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px clamp(16px, 3vw, 36px);
  background: var(--bg);
}
.site-head.overlay { position: absolute; left: 0; right: 0; background: transparent; }
.site-logo {
  font-family: var(--cond); font-weight: 800; font-size: 1.7rem; line-height: 1;
  text-transform: uppercase; text-decoration: none;
}
.site-nav { display: flex; gap: clamp(14px, 3vw, 40px); }
.nav-top {
  font-family: var(--cond); font-weight: 800; font-size: 1.35rem; text-transform: uppercase;
  text-decoration: none; display: block; padding: 4px 0;
}
.nav-top.current { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
/* 公開していない入り口（data.js の open: false）。リンクにしない */
.nav-soon { opacity: .4; cursor: default; }

/* ===== フッター（黒帯はやめて、細い1行に） ===== */
.site-foot {
  display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  padding: 22px clamp(16px, 3vw, 36px) 28px;
  font: 12px var(--mono);
  border-top: 2px solid var(--ink);
}

/* ===== 試作の切り替えパネル（確認用） ===== */
.proto {
  position: fixed; left: 12px; bottom: 12px; z-index: 999;
  font: 12px var(--mono); color: #fff;
  display: flex; align-items: flex-end; gap: 6px;
}
.proto-toggle {
  background: #111; color: #fff; border: 2px solid #fff; border-radius: 99px;
  padding: 6px 12px; font: 600 12px var(--mono); cursor: pointer;
}
.proto-body {
  display: none; background: rgba(17,17,17,.94); border-radius: 12px; padding: 10px 12px;
  gap: 6px; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.proto.open .proto-body { display: flex; }
.proto-g { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.proto-g b { width: 44px; opacity: .6; font-weight: 400; }
.proto-g button, .proto-g a {
  background: #333; color: #fff; border: 0; border-radius: 6px; padding: 4px 8px;
  font: 12px var(--mono); cursor: pointer; text-decoration: none;
}
.proto-g button span { margin-left: 6px; opacity: .65; }
.proto-g button.on { background: var(--bg, #FF6A2B); color: #111; }
.proto-g button.on span { opacity: 1; }
.proto-g a:hover, .proto-g button:hover { background: #555; }
.proto-note { opacity: .5; font-size: 11px; }

@media (max-width: 700px) {
  .site-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nav-top { font-size: 1.15rem; }
  .proto-g button span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}