/* ===== 首都圏あそびマップ — 共有デザイントークン & 部品 ===== */
:root{
  --ground:#f6f5f1; --panel:#fff; --rule:#e2ddd3; --rule-soft:#efebe3;
  --ink:#211c16; --ink-mid:#564e44; --ink-soft:#8a8072; --accent:#b4472b; --accent-soft:#f6e4de;
  --urgent:#c4442b; --urgent-bg:#f8e2dc; --soon:#9a6e14; --soon-bg:#f6ecd6; --calm:#6b6357; --calm-bg:#eee9e0;
  --g-exhibition:#2E5AAC; --g-izakaya:#D64933; --g-escape:#6D5AE0; --g-taiken:#1FA07A; --g-event:#D9962B;
  --g-hanabi:#E24A8C; --g-facility:#2AA7B8;
  --gold:#c69a3c; --gold-bg:#f6ecd2;
}
@media (prefers-color-scheme: dark){
  :root{ --ground:#14120e; --panel:#1e1a15; --rule:#342c22; --rule-soft:#282219;
    --ink:#f0eade; --ink-mid:#c2b7a5; --ink-soft:#8b8071; --accent:#ec7a57; --accent-soft:#38231b;
    --urgent:#f0805f; --urgent-bg:#38231c; --soon:#e0b04e; --soon-bg:#322813; --calm:#a99d8b; --calm-bg:#282219;
    --g-exhibition:#6F9BE8; --g-izakaya:#F0674D; --g-escape:#9E8CF5; --g-taiken:#3CC698; --g-event:#EBB552;
    --g-hanabi:#F07AB0; --g-facility:#3CC6D6;
    --gold:#e0b94e; --gold-bg:#322a12; }
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--ground); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif; }

/* ---- サイト共通ヘッダー ---- */
.site-nav{ display:flex; align-items:center; gap:14px; padding:8px 14px; background:var(--panel);
  border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.site-nav .brand{ font-weight:800; font-size:14px; color:var(--ink); text-decoration:none; letter-spacing:.02em; }
.site-nav .brand small{ font-weight:500; color:var(--ink-soft); font-size:11px; margin-left:6px; }
.site-nav a.navlink{ font-size:12.5px; color:var(--ink-mid); text-decoration:none; }
.site-nav a.navlink:hover{ color:var(--accent); }
.site-nav .spacer{ margin-left:auto; }
.btn{ font:inherit; font-size:12.5px; padding:5px 12px; border-radius:999px; border:1px solid var(--rule);
  background:transparent; color:var(--ink-mid); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn.primary{ background:var(--accent); color:#fff; border-color:transparent; font-weight:600; }
.btn.primary:hover{ opacity:.92; color:#fff; }

/* ---- 共有(「友達に教える」)ボタン & トースト ---- */
.share-btn-group{ display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
.share-toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%,10px); z-index:2000;
  background:var(--ink); color:var(--ground); font-size:12.5px; font-weight:600; padding:10px 18px;
  border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.28); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; }
.share-toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---- 汎用ページ本文 ---- */
.wrap{ max-width:960px; margin:0 auto; padding:22px 18px 60px; }
.wrap.narrow{ max-width:680px; }
h1.pagettl{ font-size:22px; margin:6px 0 4px; }
.lead{ color:var(--ink-mid); font-size:13.5px; line-height:1.7; }

/* ---- バッジ・ジャンル ---- */
.gbadge{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; color:#fff; }
.bdg{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px; white-space:nowrap;
  background:var(--calm-bg); color:var(--calm); font-variant-numeric:tabular-nums; }
.bdg[data-l="urgent"]{ background:var(--urgent-bg); color:var(--urgent); }
.bdg[data-l="soon"]{ background:var(--soon-bg); color:var(--soon); }
.bdg[data-l="open"]{ background:transparent; color:var(--ink-soft); font-weight:400; }
.pr-badge{ background:var(--gold-bg); color:var(--gold); font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:5px; letter-spacing:.04em; }

/* ---- お気に入りスター ---- */
.fav{ border:none; background:transparent; cursor:pointer; font-size:16px; line-height:1; padding:2px; color:var(--ink-soft); }
.fav[aria-pressed="true"]{ color:#e0952b; }
.fav:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---- カード（ランキング・詳細関連）---- */
.card{ background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:14px 16px; }
.card + .card{ margin-top:10px; }

/* ---- フォーム ---- */
label.field{ display:block; margin:12px 0 4px; font-size:12.5px; font-weight:600; color:var(--ink-mid); }
input.inp, select.inp, textarea.inp{ width:100%; font:inherit; font-size:13px; padding:8px 10px;
  border:1px solid var(--rule); border-radius:8px; background:var(--panel); color:var(--ink); }
textarea.inp{ min-height:96px; resize:vertical; }
input.inp:focus-visible, textarea.inp:focus-visible, select.inp:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.hint{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; }

/* ---- モーダル（ログイン）---- */
.modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:2000; padding:16px; }
.modal-bg.on{ display:flex; }
.modal{ background:var(--panel); border-radius:14px; padding:22px; max-width:360px; width:100%; border:1px solid var(--rule); }
.modal h2{ font-size:16px; margin:0 0 6px; }
.modal p{ font-size:12.5px; color:var(--ink-mid); margin:0 0 14px; line-height:1.6; }

/* ===== 🎉 Playful theme upgrade (2026-07) ===== */
:root{
  --brand-g1:#ff8a4c; --brand-g2:#ff4f9a; --brand-g3:#7b6cff;
  --pop-shadow:0 3px 14px rgba(30,20,10,.08); --pop-shadow-h:0 8px 22px rgba(255,79,154,.18);
  --joy-bg1:#fff4ef; --joy-bg2:#fdf0f6;
}
@media (prefers-color-scheme: dark){ :root{
  --pop-shadow:0 3px 14px rgba(0,0,0,.35); --pop-shadow-h:0 8px 22px rgba(255,79,154,.22);
  --joy-bg1:#1b1712; --joy-bg2:#1a1418; } }

body{ background:
  radial-gradient(1200px 380px at 12% -8%, var(--joy-bg1), transparent 60%),
  radial-gradient(1100px 360px at 92% -6%, var(--joy-bg2), transparent 62%),
  var(--ground); }

/* ブランド：グラデ文字＋絵文字 */
.site-nav{ position:relative; }
.site-nav::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg,var(--brand-g1),var(--brand-g2),var(--brand-g3)); opacity:.9; }
.site-nav .brand{ font-weight:900; font-size:15px; letter-spacing:.01em;
  background:linear-gradient(92deg,var(--brand-g1),var(--brand-g2) 55%,var(--brand-g3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.site-nav .brand::before{ content:"🗺️ "; -webkit-text-fill-color:initial; }
.site-nav .brand small{ -webkit-text-fill-color:initial; color:var(--ink-soft); }
.site-nav a.navlink{ font-weight:600; transition:transform .12s, color .12s; }
.site-nav a.navlink:hover{ transform:translateY(-1px); }

/* プライマリボタン：グラデ＋ふわっと */
.btn.primary{ background:linear-gradient(92deg,var(--brand-g1),var(--brand-g2)); box-shadow:0 2px 10px rgba(255,79,154,.25); }
.btn.primary:hover{ transform:translateY(-1px); box-shadow:var(--pop-shadow-h); }
.btn{ transition:transform .12s, box-shadow .12s, border-color .12s, color .12s; }

/* カードに立体感とホバー */
.card{ box-shadow:var(--pop-shadow); border-radius:14px; transition:transform .14s, box-shadow .14s; }
a.card:hover{ transform:translateY(-3px); box-shadow:var(--pop-shadow-h); }

/* お気に入りスターが弾む */
.fav[aria-pressed="true"]{ animation:pop .3s ease; }
@keyframes pop{ 0%{transform:scale(1)} 45%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ===== 共通フッター ===== */
.site-footer{ border-top:1px solid var(--rule); background:var(--panel); margin-top:40px; }
.foot-inner{ max-width:960px; margin:0 auto; padding:24px 18px 34px; }
.foot-brand{ font-weight:800; font-size:14px; margin-bottom:10px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:12px; }
.foot-links a{ font-size:12.5px; color:var(--ink-mid); text-decoration:none; }
.foot-links a:hover{ color:var(--accent); text-decoration:underline; }
.foot-note{ font-size:11.5px; color:var(--ink-soft); line-height:1.8; margin:0 0 10px; }
.foot-copy{ font-size:11px; color:var(--ink-soft); margin:0; }

/* 法務・説明系ページの読みやすさ */
.doc h2{ font-size:16px; margin:26px 0 8px; }
.doc h3{ font-size:14px; margin:18px 0 6px; }
.doc p, .doc li{ font-size:13.5px; line-height:1.9; color:var(--ink-mid); }
.doc ul{ padding-left:20px; }
.doc .updated{ font-size:12px; color:var(--ink-soft); }
.doc table{ width:100%; border-collapse:collapse; font-size:13px; margin:10px 0; }
.doc th, .doc td{ border:1px solid var(--rule); padding:8px 10px; text-align:left; vertical-align:top; }
.doc th{ background:var(--ground); font-weight:700; width:30%; }