@charset "UTF-8";
/* ==========================================================================
   東京ヲタ区 / ward.css
   全23区ページ共通のレイアウト。
   区ごとの色は CSS Variables(--ward-*)で切り替える。
   実際の色は ward-{区名}.css で定義する。
   共通クローム(マストヘッド・2カラム・パンくず等)は subpage.css にある。
   読み込み順: common.css → subpage.css → ward.css → ward-{区名}.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 区ページのデフォルトテーマ(区CSS未読込時のフォールバック)
   -------------------------------------------------------------------------- */
.ward-page{
  --ward:#FF5CA8;          /* 区のメインカラー */
  --ward-deep:#E4007F;     /* 濃い方(見出し文字・強調) */
  --ward-soft:#FFE9F3;     /* 薄い方(テーブル見出し・タグ地) */
  --ward-tint:#FFE9F3;     /* パネル見出しの地 */
  --ward-line:#F2A9C4;     /* パネル見出しの罫・吹き出しの枠 */
  --ward-glow:#FFE3EE66;   /* 区ヒーローの光彩(右上) */
  --ward-glow2:#EDE7FA66;  /* 区ヒーローの光彩(左下) */
  --ward-thumb:#F9C4D8;    /* NEWSサムネの地 */
  --ward-cta:#FF8FC2;      /* 区民証CTAグラデ開始色 */
  /* 未開区グレー(区ページのトーンに合わせた値) */
  --locked:#B9B3A9;
  --locked-bg:#E9E5DC;
}

/* --------------------------------------------------------------------------
   4. 区ヒーロー(淡色)
   -------------------------------------------------------------------------- */
.ward-hero{
  border:1px solid var(--line);
  background:
    radial-gradient(300px 140px at 85% 20%,var(--ward-glow),transparent 70%),
    radial-gradient(260px 120px at 10% 90%,var(--ward-glow2),transparent 70%),
    #FFFBF7;
  color:var(--ink);margin-bottom:12px;border-radius:8px;
}
.ward-hero .in{display:flex;gap:18px;align-items:center;padding:20px 18px;flex-wrap:wrap}
.ward-hero .picon{
  width:74px;height:74px;border-radius:12px;background:var(--ward-tint);
  border:1px solid var(--ward-line);display:flex;align-items:center;justify-content:center;
  font-size:38px;flex-shrink:0;
}
.ward-hero .kana{font-size:11px;color:var(--ward-deep);font-weight:700;letter-spacing:3px}
.ward-hero h1{font-size:clamp(26px,5vw,36px);line-height:1.15;font-weight:900}
.ward-hero .catch{font-weight:700;font-size:13px;color:var(--soft);margin-top:2px}

.attr{margin-top:8px}
.attr a{
  display:inline-block;background:#fff;color:var(--ink);border:1px solid var(--line);
  font-size:11px;font-weight:700;border-radius:999px;padding:2px 10px;margin:1px 3px 1px 0;
}
.attr a.hl{border-color:var(--ward);color:var(--ward-deep)}
.attr a.all{background:var(--ward-deep);border-color:var(--ward-deep);color:#fff}

.mayor{margin-left:auto;display:flex;gap:12px;align-items:center}
.mayor .fig{
  width:86px;height:92px;background:#fff;border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ward-deep);flex-shrink:0;
}
.mayor .fig .f{font-size:32px}
.mayor .fig .l{font-size:9px;color:var(--soft);font-weight:700;text-align:center}

.bub{
  background:#fff;color:var(--ink);border:1px solid var(--ward-line);border-radius:12px;
  padding:9px 12px;font-size:12px;font-weight:700;position:relative;max-width:250px;
  box-shadow:2px 2px 0 #F2A9C455;
}
.bub::after{
  content:"";position:absolute;left:-10px;bottom:14px;
  border:6px solid transparent;border-right-color:var(--ward-line);
}
.bub .who{display:block;font-size:9px;font-weight:400;color:var(--soft)}

/* --------------------------------------------------------------------------
   6. パネル(区ページはソフトなトーン)
   -------------------------------------------------------------------------- */
.ward-page .panel{border-radius:6px;overflow:hidden}
.ward-page .ph{
  padding:7px 12px;color:var(--ward-deep);
  background:var(--ward-tint);border-bottom:1px solid var(--ward-line);
}
.ward-page .ph.plain{background:#F4F1FA;color:#5B4788;border-bottom-color:#D8CFF0}
.ward-page .ph.rank{background:linear-gradient(#FFC94D,#E68A00);color:#fff;border-bottom:2px solid var(--ink)}
.ward-page .ph .more a{color:inherit}
.ward-page .pb{padding:10px}

/* --------------------------------------------------------------------------
   7. 区のプロフィール(表 + ステータスバー)
   -------------------------------------------------------------------------- */
.prof2{display:grid;gap:12px}
@media(min-width:700px){.prof2{grid-template-columns:1fr 1fr}}

.proftable{width:100%;border-collapse:collapse;font-size:12px}
.proftable th,.proftable td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
.proftable th{background:var(--ward-soft);white-space:nowrap;width:86px;color:var(--ward-deep);font-size:11px}

.stat{margin-bottom:7px}
.stat .lb{display:flex;justify-content:space-between;font-size:11px;font-weight:700}
.stat .lb .v{font-family:var(--dot);color:var(--ward-deep)}
.stat .bar{height:12px;border:1px solid var(--ink);background:#fff;border-radius:3px;overflow:hidden}
.stat .fill{height:100%;background:linear-gradient(90deg,var(--ward),var(--ward-deep))}
.statnote{font-size:10px;color:var(--soft);margin-top:6px}

/* --------------------------------------------------------------------------
   8. 区NEWSフィード
   -------------------------------------------------------------------------- */
.ward-page .feed .item{display:flex;gap:12px;padding:11px 10px;border-bottom:1px solid #F0E9E0}
.ward-page .feed .item:nth-child(even){background:transparent}
.ward-page .feed .th{
  width:78px;height:78px;flex-shrink:0;border:none;border-radius:10px;
  background:var(--ward-thumb);display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#fff;
}
.ward-page .feed h3{font-size:14px;line-height:1.5}
.ward-page .feed h3 a{color:var(--ink);font-weight:700}
.ward-page .feed h3 a:hover{color:var(--hot)}
.ward-page .feed .meta{font-size:10px;color:var(--soft);margin-top:2px}
.ward-page .feed p.sum{
  font-size:11px;color:var(--soft);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 区テーマの吹き出し */
.ward-page .say{background:var(--ward-soft);border:1px dashed var(--ward);margin-top:3px}

/* --------------------------------------------------------------------------
   9. イベント表 / コラボカフェ表
   -------------------------------------------------------------------------- */
.evtable{width:100%;border-collapse:collapse;font-size:12px}
.evtable th,.evtable td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.evtable th{background:var(--ward-soft);white-space:nowrap;font-size:11px}
.evtable .d{font-family:var(--dot);color:var(--ward-deep);white-space:nowrap;font-size:11px}
.evtable a{color:var(--ink);font-weight:700}
.evtable a:hover{color:var(--hot)}
.evtable .busy{color:var(--hot);font-weight:900}

/* --------------------------------------------------------------------------
   10. スポット
   -------------------------------------------------------------------------- */
.spotlist li{list-style:none;padding:8px 4px;border-bottom:1px dotted var(--line)}
.spotlist h4{font-size:13px}
.spotlist h4 a{color:var(--ink)}
.spotlist p{font-size:11px;color:var(--soft)}

.spotgrid{display:grid;gap:8px}
@media(min-width:700px){.spotgrid{grid-template-columns:1fr 1fr}}
.spotc{border:1px solid var(--line);background:#fff;padding:10px}
.spotc h4{font-size:13px}
.spotc h4 a{color:var(--ink)}
.spotc h4 .genre{
  font-size:9px;color:#fff;background:var(--ward-deep);border-radius:3px;
  padding:0 5px;margin-left:4px;vertical-align:1px;
}
.spotc p{font-size:11px;color:var(--soft)}

/* --------------------------------------------------------------------------
   11. 区の歩き方(初心者ガイド)
   -------------------------------------------------------------------------- */
.walk{list-style:none}
.walk li{display:flex;gap:10px;padding:8px 4px;border-bottom:1px dotted var(--line);font-size:12px;align-items:flex-start}
.walk .stepn{
  font-family:var(--dot);color:#fff;background:var(--ward-deep);border:1px solid var(--ink);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:12px;
}
.walk b{color:var(--ward-deep)}

/* --------------------------------------------------------------------------
   12. 4コマ(区ページは3本並び)
   -------------------------------------------------------------------------- */
.ykgrid{display:grid;gap:8px}
@media(min-width:700px){.ykgrid{grid-template-columns:repeat(3,1fr)}}

/* 4コマ・注記の小物ユーティリティ */
.ykm-title{font-size:12px;margin-bottom:6px}
.komanote{font-size:9px;color:var(--soft)}
a.ink,.ink{color:var(--ink)}

/* --------------------------------------------------------------------------
   13. 世界観
   -------------------------------------------------------------------------- */
.lore{font-size:12.5px;line-height:1.9}
.lore p{margin-bottom:8px}
.lore .kw{background:var(--ward-soft);border-radius:4px;padding:0 4px;font-weight:700}

/* --------------------------------------------------------------------------
   14. サイドバー(区民証CTA / ランキング / おすすめ / 住人 / 区データ / 隣の区)
   -------------------------------------------------------------------------- */
.kuminCta{
  display:flex;align-items:center;gap:10px;border:none;border-radius:8px;
  background:linear-gradient(100deg,var(--ward-cta),var(--ward-deep));
  color:#fff;padding:12px 14px;margin-bottom:12px;
}
.kuminCta .t{font-size:14px;font-weight:900;display:block}
.kuminCta .s{font-size:10px;opacity:.95}
.kuminCta .btn{
  margin-left:auto;flex-shrink:0;background:#fff;color:var(--ward-deep);
  font-weight:900;font-size:12px;border-radius:999px;padding:5px 14px;border:none;
}

/* ランキング(区ページは番号を小さめ・4位以降は本文色) */

/* 区長のおすすめ(アフィリエイト) */
.prod{border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px;position:relative;margin-bottom:8px}
.prod::after{content:"PR";position:absolute;top:4px;right:6px;font-size:8px;color:var(--soft)}
.prod h4{font-size:12px}
.prod .stars{font-size:11px;color:#F5A623;font-weight:700}
.prod .stars small{color:var(--soft);font-weight:400}
.prod .say2{font-size:10px;color:var(--soft)}
.prod .shops{display:flex;gap:4px;margin-top:5px}
.prod .shops a{
  flex:1;text-align:center;font-size:10px;font-weight:900;border:2px outset #d9d2c4;
  padding:3px 0;background:linear-gradient(#fff,#EFE9DC);color:var(--ink);
}
.prod .shops a:hover{text-decoration:none;filter:brightness(1.05)}

/* 区の住人 */
.res{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.resc{border:1px solid var(--line);background:#fff;padding:8px;text-align:center}
.resc .f{
  width:46px;height:46px;margin:0 auto 4px;border-radius:50%;border:2px solid var(--ink);
  background:var(--ward-soft);display:flex;align-items:center;justify-content:center;font-size:22px;
}
.resc h4{font-size:11px}
.resc p{font-size:9px;color:var(--soft)}
.resc.locked{opacity:.5;border-style:dashed}

/* 区データ */
.wdata{list-style:none}
.wdata li{display:flex;justify-content:space-between;padding:5px 4px;border-bottom:1px dotted var(--line);font-size:12px}
.wdata .v{font-family:var(--dot);color:var(--ward-deep);font-weight:700}

/* 新着コメント(区ページは縦積み) */

/* 隣の区へ */
.nextw a{
  display:flex;gap:8px;align-items:center;padding:6px 4px;
  border-bottom:1px dotted var(--line);font-weight:900;font-size:12px;color:var(--ink);
}
.nextw a.locked{color:var(--locked)}
.nextw .av{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;
}
.nextw small{font-weight:400;color:var(--soft);font-size:9px;margin-left:auto}


/* --------------------------------------------------------------------------
   15. 近日開区ティザー(未開区17区)  ★STEP 1-9 で追加
   区ページと同じ骨格の「ティザー版」。色は ward-locked.css(グレー)を読む。
   セレクタは .teaser* の新規クラスに閉じてあるため、開区済みの区ページ
   (ward/toshima.html)のDOMには一切マッチしない。
   -------------------------------------------------------------------------- */
/* シルエット(区長は未公開) */
.teaser-fig{
  width:86px;height:92px;background:#fff;border:1px dashed var(--locked);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--locked);flex-shrink:0;
}
.teaser-fig .f{font-size:32px;filter:grayscale(1);opacity:.45}
.teaser-fig .l{font-size:9px;font-weight:700;text-align:center}

/* 「近日開区!」の帯 */
.teaser-band{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:2px dashed var(--locked);background:#F7F5F0;
  padding:10px 14px;margin-bottom:12px;
}
.teaser-band .lbl2{
  font-family:var(--dot);font-size:16px;color:var(--ward-deep);flex-shrink:0;
}
.teaser-band .txt{font-size:12px;font-weight:700}
.teaser-band .num{margin-left:auto;font-size:10px;color:var(--soft)}
@media(max-width:600px){.teaser-band .num{margin-left:0;width:100%}}

/* 開区リクエスト(SNSシェア) */
.teaser-cta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.teaser-cta a{
  flex:1 1 130px;text-align:center;color:#fff;font-size:11.5px;font-weight:900;
  border:2px solid var(--ink);padding:7px 10px;
}
.teaser-cta a:hover{text-decoration:none;filter:brightness(1.1)}
.teaser-cta .tc-x{background:#1F1B24}
.teaser-cta .tc-map{background:#5A4E6B}

/* 未公開情報のプレースホルダ表 */
.teaser-table .q{color:var(--locked);font-family:var(--dot);letter-spacing:2px}