/* =========================================================
   サイト全体で共通の見た目
   （すべてのページで読み込みます）
   ========================================================= */
:root{
  --ink:#3b2414;
  --wood:#7a4b2a;
  --wood-dark:#5a3519;
  --wood-light:#a06a3e;
  --paper:#f6e7c4;
  --paper-dark:#e6cf9c;
  --paper-light:#fff6dc;
  --gold:#ffcc33;
  --gold-dark:#c98f10;
  --red:#d9483b;
  --sea:#2f6aae;
  --green:#5d9b3e;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"DotGothic16", "MS Gothic", "Osaka-Mono", monospace;
  color:var(--ink);
  background:#2a1a10;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.18) 2px, transparent 2px),
    linear-gradient(rgba(0,0,0,.12) 2px, transparent 2px);
  background-size:32px 32px;
  min-height:100vh;
}
a{color:inherit}

/* ---------- 共通の部品 ---------- */
.btn{
  font-family:inherit;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:inset -3px -3px 0 var(--paper-dark), inset 3px 3px 0 var(--paper-light), 3px 3px 0 #000;
  padding:5px 10px;
}
.btn:hover{background:#fff1cf}
.btn:active{transform:translate(2px,2px);box-shadow:inset -3px -3px 0 var(--paper-dark), inset 3px 3px 0 var(--paper-light), 1px 1px 0 #000}
.btn.on{background:var(--gold);box-shadow:inset -3px -3px 0 var(--gold-dark), inset 3px 3px 0 #fff0a8, 3px 3px 0 #000}
.btn:focus-visible{outline:3px dashed #fff;outline-offset:2px}
.frame{
  background:var(--wood);
  border:4px solid var(--ink);
  box-shadow:inset -4px -4px 0 var(--wood-dark), inset 4px 4px 0 var(--wood-light), 6px 6px 0 #000;
  padding:12px;
}
.paper{
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:inset -3px -3px 0 var(--paper-dark), inset 3px 3px 0 var(--paper-light);
}

/* ---------- 上のメニュー ---------- */
.site-nav{
  background:var(--wood-dark);
  border-bottom:4px solid #000;
  box-shadow:inset 0 -4px 0 var(--ink);
  position:sticky;top:0;z-index:20;
}
.site-nav .in{
  max-width:1400px;margin:0 auto;padding:8px 16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.site-nav .brand{
  color:var(--paper);text-decoration:none;font-size:18px;text-shadow:2px 2px 0 #000;
  display:flex;align-items:center;gap:8px;margin-right:auto;
}
.site-nav .brand img{
  width:32px;height:32px;border:2px solid #000;border-radius:50%;background:#fff;
  box-shadow:2px 2px 0 #000;
}
.site-nav .brand i{
  width:14px;height:14px;background:var(--red);border:2px solid #000;display:inline-block;
  box-shadow:inset -3px -3px 0 #a3271d;
}
.site-nav .links{display:flex;gap:5px;flex-wrap:wrap}
.site-nav .links a{font-size:14px;padding:4px 8px;position:relative}
.site-nav .links a .soon{
  font-size:10px;background:var(--wood);color:var(--paper);padding:0 4px;margin-left:4px;border:1px solid var(--ink);
  vertical-align:2px;
}
.site-nav .lang{display:flex;margin-left:auto}   /* 言語の切りかえは、いつも右はしに */
.site-nav .lang .btn{font-size:12px;padding:3px 8px}
/* 「≡」ボタン（パソコンでは出さない） */
.site-nav .menu-btn{display:none;font-size:15px;padding:5px 12px;line-height:1}
.site-nav .menu-btn .bars{font-size:18px;vertical-align:-2px;margin-right:4px}
/* 画面がせまいとき（スマホ・タブレット）：メニューは「≡」で開く */
@media (max-width:1000px){
  .site-nav .in{flex-wrap:wrap;gap:8px}
  .site-nav .brand{font-size:16px}
  .site-nav .menu-btn{display:inline-block}
  .site-nav .links,.site-nav .lang{display:none}
  .site-nav.open .links{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;padding:4px 0 2px}
  .site-nav.open .links a{font-size:15px;padding:9px 10px;text-align:left}
  .site-nav.open .lang{display:flex;width:100%;gap:8px;padding-bottom:4px}
  .site-nav.open .lang .btn{flex:1;font-size:14px;padding:7px 8px}
}

/* ---------- 下の帯 ---------- */
.site-foot .foot-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.site-foot .foot-links a{color:var(--paper);font-size:13px}
.site-foot .foot-links a:hover,.site-foot .foot-links a:focus-visible{color:var(--gold)}
.site-foot{
  color:#c9a77a;font-size:12px;text-align:center;padding:28px 16px 36px;
}

/* メニューの「NEW」の印 */
.site-nav .links a .new{font-size:10px;line-height:1;margin-left:4px;padding:2px 4px;background:#d9483b;color:#fff;vertical-align:1px}