@charset "UTF-8";
/* ==========================================================================
   東京ヲタ区 / common.css
   全ページ共通:デザイントークン / リセット / 背景演出 / ヘッダー / グロナビ /
   速報マーキー / 広告(レール・レクタングル) / 共通パネル / ピクセル帯 /
   フッター土台 / モバイル下タブ
   ※本ファイルはデザインFIX版。値の変更 = デザイン変更なので注意。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root{
  /* ベース */
  --bg:#F1268D;              /* ロゴのピンク(フォールバック) */
  --panel:#FFFFFF;
  --ink:#1F1B24;
  --soft:#6C6575;
  --line:#C9C2B6;

  /* アクセント */
  --link:#0044CC;
  --hot:#E60033;             /* コメ数 / 【悲報】など */
  --accent:#F1268D;          /* ロゴピンク */
  --cyan:#29B6F6;
  --yellow:#FFD900;

  /* ネオン夜景(マストヘッド・ピクセル帯) */
  --night1:#241238; --night2:#45206B; --night3:#180F22;

  /* 23区カラー(区バッジ・MAPタイル・区ページのテーマ元) */
  --chiyoda:#00A6E9;
  --toshima:#FF5CA8;
  --nakano:#F59E0B;
  --suginami:#22B573;
  --shibuya:#9B51E0;
  --shinjuku:#3B4CCA;

  /* 未開区 */
  --locked:#8D8578;
  --locked-bg:#E5E0D4;

  /* フォント */
  --dot:'DotGothic16',monospace;
  --sans:Verdana,'Noto Sans JP',-apple-system,"Hiragino Kaku Gothic ProN","MS PGothic",Meiryo,sans-serif;

  /* レイアウト */
  --content-max:1440px;
}

/* --------------------------------------------------------------------------
   2. リセット / 基本タイポグラフィ
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:var(--sans);
  color:var(--ink);
  font-size:13px;
  line-height:1.65;
  padding-bottom:60px;
  background:#FDF4F1 url("../images/common/background.webp") center/cover no-repeat fixed;
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--content-max);margin:0 auto;padding:0 10px}

/* 本文グリッドのコンテナ(広告レール分を差し引いた実幅で判定) */
.cq{container-type:inline-size}

/* --------------------------------------------------------------------------
   3. 背景演出(メタボール「丸ぽわ」+ きらきら)
   -------------------------------------------------------------------------- */
#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.goo{position:absolute;inset:0;filter:url(#goo);opacity:.85}
.blob{position:absolute;border-radius:50%}
.b-pink{background:#F9C9DB}
.b-yellow{background:#FBE9BFF2}
.b-cyan{background:#C4E5F8}
.b-white{background:#EFEAF8}

.tw{position:absolute;font-size:18px;opacity:0;animation:tw 4.2s ease-in-out infinite}
@keyframes tw{
  0%,100%{opacity:0;transform:scale(.5) rotate(0deg)}
  50%{opacity:.9;transform:scale(1.15) rotate(12deg)}
}

@keyframes driftX {0%,100%{transform:translate(0,0)}50%{transform:translate(110px,24px)}}
@keyframes driftXr{0%,100%{transform:translate(0,0)}50%{transform:translate(-120px,-20px)}}
@keyframes driftY {0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-100px)}}
@keyframes driftYr{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,110px)}}
@keyframes puls  {0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

@media(prefers-reduced-motion:reduce){
  .tw{animation:none;opacity:.5}
  #bgfx .blob{animation:none!important}
}

/* --------------------------------------------------------------------------
   4. シェル(広告レール + ページ本体)
   -------------------------------------------------------------------------- */
.shell{position:relative;z-index:1;display:flex;justify-content:center;align-items:stretch;gap:10px}
.shell>.page{min-width:0;flex:1;max-width:1460px}

/* マストヘッドは横幅100%(フルブリード)。レールのPRバナーが上に覆いかぶさる */
.masthead{width:100vw;margin-left:calc(50% - 50vw)}

/* ナビ・バー類は「背景だけ全幅」:中身はコンテンツ幅に留めてレールと重ならない */
.topbar,.gnavbar,.marq,footer{position:relative}
.topbar::before,.gnavbar::before,.marq::before,footer::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;
}
.topbar::before{background:#14101B}
.gnavbar::before{background:linear-gradient(#2C2436,#191420);border-bottom:3px solid var(--accent)}
.marq::before{background:#FFF6C9;border-bottom:2px solid var(--ink)}
footer::before{background:#14101B}

/* --------------------------------------------------------------------------
   5. 広告 - 左右レール(スカイスクレイパー)
   1780px〜:1列 / 1920px〜:2列 / 2300px〜:3列
   レールは sticky で画面固定。不足分は common.js が自動充填する。
   -------------------------------------------------------------------------- */
.adrail{display:none;width:170px;flex-shrink:0}
@media(min-width:1780px){.adrail{display:block}}

.rail-in{
  position:sticky;top:8px;max-height:calc(100vh - 16px);
  overflow:hidden;padding-top:8px;z-index:5;
}
@media(min-width:1920px){
  .adrail{width:348px}
  .rail-in{column-count:2;column-gap:8px}
  .rail-in .adnote{column-span:all;margin:0 0 8px}
  .rail-in .ad{break-inside:avoid;margin:0 0 8px}
}
@media(min-width:2300px){
  .adrail{width:526px}
  .rail-in{column-count:3}
}

.adrail .ad{
  border:2px solid var(--ink);margin:0 0 8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;position:relative;padding:12px 8px;overflow:hidden;
}
.adrail .ad::before{
  content:"PR";position:absolute;top:3px;right:5px;font-size:8px;color:#ffffffaa;
  border:1px solid #ffffff66;padding:0 3px;border-radius:3px;
}
.adrail .ad .t{font-weight:900;font-size:15px;line-height:1.4}
.adrail .ad .t .dotf{font-family:var(--dot)}
.adrail .ad .s{font-size:10px;opacity:.85;margin-top:6px}
.adrail .ad .btn{
  margin-top:10px;background:#fff;color:var(--ink);font-weight:900;font-size:11px;
  border-radius:999px;padding:3px 14px;border:2px solid var(--ink);
}
.adrail .ad .em{font-size:34px;margin-bottom:6px}

/* レール枠の高さバリエーション */
.ad.h600{min-height:560px}
.ad.h300{min-height:280px}
.ad.h240{min-height:220px}

.adnote{
  font-size:9px;color:#3D1F66;text-shadow:0 1px 0 #ffffffaa;font-weight:700;
  text-align:center;margin-bottom:6px;
}

/* --------------------------------------------------------------------------
   6. 広告 - 300×250レクタングル(本文内)/ カラム下端揃えフィラー
   -------------------------------------------------------------------------- */
.rectrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}
.rect{
  flex:1 1 240px;width:auto;height:250px;border:2px solid var(--ink);color:#fff;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12px;overflow:hidden;
}
.rect::before{
  content:"PR";position:absolute;top:3px;right:5px;font-size:8px;color:#ffffffaa;
  border:1px solid #ffffff66;padding:0 3px;border-radius:3px;
}
.rect .em{font-size:34px;margin-bottom:4px}
.rect .t{font-weight:900;font-size:16px;line-height:1.4}
.rect .t .dotf{font-family:var(--dot)}
.rect .s{font-size:10px;opacity:.9;margin-top:4px}
.rect .btn{
  margin-top:10px;background:#fff;color:var(--ink);font-weight:900;font-size:11px;
  border-radius:999px;padding:3px 16px;border:2px solid var(--ink);
}
.rect.small .t{font-size:14px}

/* JSが自動挿入するレクタングル(カラム下端揃え) */
.rect.auto-ad{flex:0 0 auto;width:auto;height:250px;margin-bottom:12px}

.sponsorlbl{
  font-size:9px;color:#3D1F66;text-shadow:0 1px 0 #ffffffaa;font-weight:700;
  text-align:center;margin:0 0 4px;letter-spacing:2px;
}

/* フィード内の広告スロット */
.feed .ad-slot{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px 8px;
  border-bottom:1px solid var(--line);background:#FAF8F2;
}
.feed .ad-slot .slbl{width:100%;text-align:center;font-size:9px;color:var(--soft);letter-spacing:2px}

/* スマホでは広告を画面幅にフィット */
@media(max-width:759px){.rect{width:100%}}

/* カラム末尾の伸縮フィラー広告(各カラムの下端を揃える) */
.fillad{
  flex:1 1 auto;min-height:220px;margin-bottom:12px;border:2px solid var(--ink);
  color:#fff;position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:14px;overflow:hidden;
}
.fillad::before{
  content:"PR";position:absolute;top:3px;right:5px;font-size:8px;color:#ffffffaa;
  border:1px solid #ffffff66;padding:0 3px;border-radius:3px;
}
.fillad .em{font-size:34px;margin-bottom:4px}
.fillad .t{font-weight:900;font-size:16px;line-height:1.4}
.fillad .t .dotf{font-family:var(--dot)}
.fillad .s{font-size:10px;opacity:.9;margin-top:4px}
.fillad .btn{
  margin-top:10px;background:#fff;color:var(--ink);font-weight:900;font-size:11px;
  border-radius:999px;padding:3px 16px;border:2px solid var(--ink);
}

/* --------------------------------------------------------------------------
   7. 広告カラーバリエーション(インラインstyleから切り出したクラス)
   命名: .adc-{色}-{通し}  背景グラデーションのみを持つ。
   -------------------------------------------------------------------------- */
/* レール(170deg) */
.adc-pc{background:linear-gradient(170deg,#0A2A4A,#00A6E9)}
.adc-rpg{background:linear-gradient(170deg,#45206B,#9B51E0)}
.adc-manga{background:linear-gradient(170deg,#B4500F,#F59E0B)}
.adc-oshi{background:linear-gradient(170deg,#7A1B4F,#FF5CA8)}
.adc-smartphone{background:linear-gradient(170deg,#0E4A5A,#29B6F6)}
.adc-vtuber{background:linear-gradient(170deg,#5B1670,#B04BD6)}
.adc-anime{background:linear-gradient(170deg,#8A1240,#F1268D)}
.adc-figure{background:linear-gradient(170deg,#0E5A34,#22B573)}
.adc-hikari{background:linear-gradient(170deg,#1A2B7A,#3B4CCA)}
.adc-trading{background:linear-gradient(170deg,#4A3800,#E6B400)}
.adc-subsc{background:linear-gradient(170deg,#2A1440,#8B3AA8)}
.adc-food{background:linear-gradient(170deg,#6B1212,#E60033)}
.adc-monitor,.adc-keyboard{background:linear-gradient(170deg,#1F1B24,#5A4E6B)}
.adc-prize{background:linear-gradient(170deg,#7A4A00,#F59E0B)}
.adc-retro,.adc-hotel{background:linear-gradient(170deg,#123B2A,#1E9E57)}

/* 本文内レクタングル(150deg) */
.adc-esports{background:linear-gradient(150deg,#123B6B,#2979D6)}
.adc-bus{background:linear-gradient(150deg,#6B1240,#E4007F)}
.adc-stay{background:linear-gradient(150deg,#0E4A2A,#22B573)}
.adc-gacha{background:linear-gradient(150deg,#3A1258,#8B3AA8)}
.adc-ebook{background:linear-gradient(150deg,#4A3800,#E6B400)}
.adc-earphone{background:linear-gradient(150deg,#14324A,#29B6F6)}
.adc-cosplay{background:linear-gradient(150deg,#5A0F2A,#D6336C)}
.adc-card{background:linear-gradient(150deg,#0F3A5A,#1E88C7)}
.adc-bto{background:linear-gradient(150deg,#232323,#5A4E6B)}
.adc-kaitori{background:linear-gradient(150deg,#6B4A00,#F59E0B)}
.adc-mobile-meal{background:linear-gradient(150deg,#3A5A0F,#7CB518)}
.adc-doujin{background:linear-gradient(170deg,#1F4A6B,#2E9BD6)}
.adc-recruit{background:linear-gradient(170deg,#3A2A0E,#B8860B)}
.adc-doujin-150{background:linear-gradient(150deg,#1F4A6B,#2E9BD6)}

/* --------------------------------------------------------------------------
   8. 最上部の小リンクバー
   -------------------------------------------------------------------------- */
.topbar{background:#14101B;color:#B9B3C4;font-size:10px}
.topbar .wrap{display:flex;align-items:center;gap:10px;height:24px;overflow:hidden;white-space:nowrap}
.topbar a{color:#B9B3C4}
.topbar .cnt{margin-left:auto;font-family:var(--dot)}
.topbar .cnt b{color:#FFD34D;background:#000;padding:0 4px;letter-spacing:2px}
/* 区民登録CTA(トップバー右端) */
.topbar .auth-join{font-weight:700;color:#FFD34D}

/* --------------------------------------------------------------------------
   9. マストヘッド(KV + ロゴ + キャラ吹き出し)
   -------------------------------------------------------------------------- */
.masthead{
  position:relative;overflow:hidden;border-bottom:4px solid var(--ink);
  background:#7B8FD6 url("../images/common/kv-masthead.webp") center 38% no-repeat;
  background-size:100% auto;
}
.masthead .logoimg{position:relative;z-index:3}

/* 吹き出し(共通の見た目。配置は各ページCSS) */
.mh-bub{
  position:absolute;background:#fff;color:var(--ink);border:2px solid var(--ink);
  border-radius:12px;padding:8px 12px;font-weight:900;font-size:12px;line-height:1.5;
  box-shadow:3px 3px 0 #00000066;max-width:190px;
}
.mh-bub .star{color:var(--accent)}

/* スマホ:背景はcoverで上下までフィット */
@media(max-width:900px){
  .masthead{background-size:cover;background-position:center 32%}
}

/* --------------------------------------------------------------------------
   10. グローバルナビ(2行ラベル)
   -------------------------------------------------------------------------- */
.gnavbar{background:linear-gradient(#2C2436,#191420);border-bottom:3px solid var(--accent)}
.gnavbar .wrap{display:flex;overflow-x:auto}
.gnavbar a{
  color:#fff;font-weight:900;font-size:12.5px;padding:7px 15px 6px;
  border-right:1px solid #ffffff1c;white-space:nowrap;flex-shrink:0;
  text-align:center;line-height:1.25;
}
.gnavbar a small{display:block;font-size:8.5px;font-weight:400;color:#ffffff77;letter-spacing:1px}
.gnavbar a:hover{background:#F1268D33;text-decoration:none}
.gnavbar a.home{background:var(--accent)}

/* --------------------------------------------------------------------------
   11. 速報マーキー
   -------------------------------------------------------------------------- */
.marq{background:#FFF6C9;border-bottom:2px solid var(--ink);overflow:hidden}
.marq .wrap{display:flex;align-items:center;gap:8px;height:28px}
.marq .lbl{font-family:var(--dot);color:var(--hot);flex-shrink:0;font-size:12px}
.marq .track{overflow:hidden;flex:1}
.marq .inner{display:inline-block;white-space:nowrap;animation:marq 28s linear infinite;font-size:12px}
.marq .inner b{color:var(--hot)}
.marq .inner .sep{color:var(--soft);margin:0 14px}
.marq .morelink{flex-shrink:0;font-size:10px;font-weight:700}
@keyframes marq{from{transform:translateX(12%)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.marq .inner{animation:none}}

/* --------------------------------------------------------------------------
   12. 共通パネル(見出しバー付きの箱)
   ※色バリエーションは各ページCSSで上書き
   -------------------------------------------------------------------------- */
.panel{background:var(--panel);border:1px solid var(--line);margin-bottom:12px}
.ph{
  display:flex;align-items:center;gap:6px;padding:5px 10px;
  font-weight:900;font-size:13px;color:#fff;
  background:linear-gradient(#5A4E6B,#3A3242);border-bottom:2px solid var(--ink);
}
/* 見出しバーの色バリエーション(TOP・カテゴリページ共通の語彙) */
.ph.hot{background:linear-gradient(#FF7AA8,#E60033)}
.ph.rank{background:linear-gradient(#FFC94D,#E68A00)}
.ph.map{background:linear-gradient(#FF7AA8,var(--accent))}
.ph.comic{background:linear-gradient(#7ADB9F,#1E9E57)}
.ph.buy{background:linear-gradient(#B98AF0,#7A2FA8)}
.ph.cmtc{background:linear-gradient(#8F7BB8,#5B4788)}
.ph.chara{background:linear-gradient(#6FB6F0,#1A6FC4)}
.ph.world{background:linear-gradient(#8A7BD8,#40318F)}
.ph .more{margin-left:auto;font-size:10px;font-weight:400}
.ph .more a{color:#fff}
.pb{padding:8px}

/* --------------------------------------------------------------------------
   13. 共通の細かい部品
   -------------------------------------------------------------------------- */
/* コメ数 / NEW! バッジ */
.cmt{color:var(--hot);font-weight:900;font-size:11px}
.new{color:var(--hot);font-family:var(--dot);font-size:10px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.new{animation:none}}

/* キャラ吹き出し(記事内) */
.say{
  font-size:11px;background:#FFF0F5;border:1px dashed var(--toshima);border-radius:6px;
  padding:2px 6px;display:inline-block;margin-top:4px;color:var(--ink);
}

/* もっと読むボタン */
.morebtn{
  display:block;text-align:center;font-weight:900;font-size:13px;
  background:linear-gradient(#fff,#EFE9DC);border:2px outset #d9d2c4;
  padding:8px;margin:10px 8px;color:var(--ink);
}
.morebtn:hover{text-decoration:none;filter:brightness(1.04)}

/* タグチップ列 */
.catlist a{
  display:inline-block;font-size:11px;margin:2px 2px;padding:1px 8px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
}

/* 4コマ */
.ykm{border:1px solid var(--line);background:#fff;padding:8px}
.ykm h3{font-size:12px;margin-bottom:6px}
.ykm h3 a{color:var(--ink)}
.ykm .meta{font-size:9px;color:var(--soft)}
.koma{
  border:1px solid var(--ink);border-radius:3px;padding:4px 6px;font-size:10.5px;
  margin-bottom:4px;background:#fff;display:flex;gap:5px;
}
.koma .n{font-family:var(--dot);color:var(--hot);flex-shrink:0;font-size:10px}

/* ランキング */
.rank li{list-style:none;display:flex;gap:8px;padding:7px 4px;border-bottom:1px dotted var(--line);align-items:flex-start}
.rank .no{font-family:var(--dot);font-size:16px;width:22px;flex-shrink:0;text-align:center;font-weight:900;color:#8C8496}
.rank li:nth-child(1) .no{color:#E6B400}
.rank li:nth-child(2) .no{color:#8C9BAA}
.rank li:nth-child(3) .no{color:#B4682B}
.rank h4{font-size:12px;line-height:1.45;font-weight:700}
.rank h4 a{color:var(--ink)}
.rank h4 a:hover{color:var(--hot)}
.rank .meta{font-size:9px;color:var(--soft)}

/* Xタイムライン */
.tl{list-style:none}
.tl li{list-style:none;padding:6px 4px;border-bottom:1px dotted var(--line);font-size:11px}
.tl .acc{font-weight:900;font-size:10px}
.tl .acc .id{color:var(--soft);font-weight:400}
.tl .rt{font-size:9px;color:var(--soft)}

/* 新着コメントの色(レイアウトは各ページCSS) */
.newcmt li{list-style:none}
.newcmt .who{color:#22B573;font-weight:700;font-size:10px}
.newcmt .on{color:var(--soft);font-size:9px}

/* --------------------------------------------------------------------------
   13-2. 区カラーユーティリティ(全ページ共通の語彙)
   区バッジ / サムネ背景 / ドット / 相互リンクバナー
   ※新しい区を追加したら --{区名} トークンと合わせてここに追記する
   -------------------------------------------------------------------------- */
.badge{
  display:inline-block;color:#fff;font-size:10px;font-weight:900;border-radius:3px;
  padding:0 6px;margin-right:4px;vertical-align:1px;
}
.b-chiyoda{background:var(--chiyoda)}
.b-toshima{background:var(--toshima)}
.b-nakano{background:var(--nakano)}
.b-shibuya{background:var(--shibuya)}
.b-shinjuku{background:var(--shinjuku)}
.b-suginami{background:var(--suginami)}

/* サムネ・アイコンの区カラー背景 */
.th-chiyoda{background:var(--chiyoda)}
.th-toshima{background:var(--toshima)}
.th-nakano{background:var(--nakano)}
.th-shibuya{background:var(--shibuya)}
.th-shinjuku{background:var(--shinjuku)}
.th-suginami{background:var(--suginami)}
.th-locked{background:var(--locked)}
.th-ink{background:#1F1B24}

/* --------------------------------------------------------------------------
   13-3. 23区MAP(TOP・MAPページ共通のコンポーネント)
   -------------------------------------------------------------------------- */
.wardmap{
  display:grid;gap:3px;grid-template-columns:repeat(7,1fr);
  grid-template-areas:
   "nerima   itabashi itabashi kita      adachi adachi katsushika"
   "nerima   nakano   toshima  bunkyo    arakawa sumida katsushika"
   "suginami nakano   shinjuku bunkyo    taito   sumida edogawa"
   "suginami shibuya  chiyoda  chuo      koto    koto   edogawa"
   "setagaya shibuya  minato   chuo      koto    koto   edogawa"
   "setagaya meguro   minato   shinagawa ota     ota    ota";
}
.tile{
  border:1px solid var(--ink);border-radius:4px;min-height:38px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:11px;letter-spacing:.5px;
  background:var(--locked-bg);color:var(--locked);
  position:relative;line-height:1.1;text-align:center;
}
.tile.s{font-size:9.5px;letter-spacing:0}
.tile.open{color:#fff;text-shadow:0 1px 2px #00000088;cursor:pointer;box-shadow:inset 0 -3px 0 #00000033}
.tile.open:hover{outline:2px solid var(--hot);z-index:2}
.tile.open::after{
  content:attr(data-t);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  background:#1F1B24;color:#fff;border-radius:6px;padding:3px 8px;font-size:10px;font-weight:700;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:9;
}
.tile.open:hover::after{opacity:1}

/* 区タイルの位置と色 */
.t-chiyoda{grid-area:chiyoda;background:var(--chiyoda)}
.t-toshima{grid-area:toshima;background:var(--toshima)}
.t-nakano{grid-area:nakano;background:var(--nakano)}
.t-suginami{grid-area:suginami;background:var(--suginami)}
.t-shibuya{grid-area:shibuya;background:var(--shibuya)}
.t-shinjuku{grid-area:shinjuku;background:var(--shinjuku)}
.t-nerima{grid-area:nerima}
.t-itabashi{grid-area:itabashi}
.t-kita{grid-area:kita}
.t-adachi{grid-area:adachi}
.t-katsushika{grid-area:katsushika}
.t-bunkyo{grid-area:bunkyo}
.t-arakawa{grid-area:arakawa}
.t-sumida{grid-area:sumida}
.t-taito{grid-area:taito}
.t-edogawa{grid-area:edogawa}
.t-chuo{grid-area:chuo}
.t-koto{grid-area:koto}
.t-setagaya{grid-area:setagaya}
.t-minato{grid-area:minato}
.t-meguro{grid-area:meguro}
.t-shinagawa{grid-area:shinagawa}
.t-ota{grid-area:ota}

.maplegend{display:flex;gap:10px;font-size:10px;color:var(--soft);margin-top:6px;align-items:center}
.maplegend .sw{
  display:inline-block;width:10px;height:10px;border:1px solid var(--ink);
  border-radius:2px;vertical-align:-1px;margin-right:3px;
}
.maplegend .sw-open{background:var(--toshima)}
.maplegend .sw-locked{background:var(--locked-bg)}
.mapcap{font-family:var(--dot);text-align:center;font-size:11px;color:var(--accent);margin-top:6px}

/* --------------------------------------------------------------------------
   13-4. サイドメニュー / 区ドット(全ページ共通)
   -------------------------------------------------------------------------- */
.sidemenu li{list-style:none;border-bottom:1px dotted var(--line)}
.sidemenu a{display:flex;align-items:center;gap:6px;padding:6px 4px;font-size:12px;font-weight:700;color:var(--ink)}
.sidemenu a:hover{background:#FFF3F8;text-decoration:none}
.sidemenu .cnt{margin-left:auto;font-size:10px;color:var(--soft);font-weight:400}
.sidemenu li.locked a{color:var(--locked)}

.dotc{width:10px;height:10px;border-radius:50%;border:1px solid var(--ink);flex-shrink:0}
.dotc.d-toshima{background:var(--toshima)}
.dotc.d-chiyoda{background:var(--chiyoda)}
.dotc.d-nakano{background:var(--nakano)}
.dotc.d-shibuya{background:var(--shibuya)}
.dotc.d-shinjuku{background:var(--shinjuku)}
.dotc.d-suginami{background:var(--suginami)}
.dotc.d-locked{background:var(--locked)}

/* タグクラウド(全ページ共通) */
.cloud{line-height:2}
.cloud a{margin-right:6px}
.cloud .s1{font-size:10px}
.cloud .s2{font-size:12px}
.cloud .s3{font-size:15px;font-weight:900}
.cloud .s4{font-size:18px;font-weight:900;color:var(--hot)}

/* --------------------------------------------------------------------------
   14. ピクセル風の帯(PCでは画面下に固定・右→左の無限ループ)
   -------------------------------------------------------------------------- */
.pixelstrip{
  background:linear-gradient(#1B1424,#0E0A14);border-top:3px solid var(--accent);
  overflow:hidden;padding:8px 0;
}
.pixelstrip .track{display:flex;width:max-content;animation:pstrip 17s linear infinite}
.pixelstrip .row{display:flex;gap:14px;align-items:center;flex-wrap:nowrap;padding-right:14px}
@keyframes pstrip{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){.pixelstrip .track{animation:none}}

.pchip{
  font-family:var(--dot);color:#fff;border:2px solid #fff;border-radius:6px;
  padding:2px 12px;font-size:12px;white-space:nowrap;
}
.pchip.y{color:var(--yellow);border-color:var(--yellow)}
.pchip.p{color:#FF9EC4;border-color:#FF9EC4}
.pchip.c{color:#7FE3FF;border-color:#7FE3FF}
.pem{font-size:17px;animation:puls 3.2s ease-in-out infinite}
.pem:nth-child(4n){animation-delay:1.1s}
.pem:nth-child(4n+2){animation-delay:2s}

@media(min-width:960px){
  .pixelstrip{position:fixed;left:0;right:0;bottom:0;z-index:55;margin:0;border-bottom:none;padding:7px 0}
  body{padding-bottom:52px!important}
  footer{padding-bottom:70px}
}

/* --------------------------------------------------------------------------
   14-2. フッター(3カラムのリッチ版。下層ページは subpage.css で上書き)
   -------------------------------------------------------------------------- */
footer{background:#14101B;color:#B9B3C4;font-size:11px;padding:18px 0 26px}
footer .cols2{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:600px){footer .cols2{grid-template-columns:repeat(3,1fr)}}
footer h4{font-family:var(--dot);color:#fff;margin-bottom:4px}
footer a{color:#B9B3C4;display:block;padding:1px 0}
footer .copy{margin-top:14px;font-size:9px;color:#7A7386}

/* --------------------------------------------------------------------------
   15. モバイル下タブバー
   -------------------------------------------------------------------------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fffdf8;
  border-top:3px solid var(--ink);display:flex;height:54px;
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;gap:1px;color:var(--ink);
}
.tabbar .em{font-size:17px}
.tabbar a.active{color:var(--accent)}
@media(min-width:960px){
  body{padding-bottom:0}
  .tabbar{display:none}
}

/* --------------------------------------------------------------------------
   16. スマホのグローバルナビ段組み + スクロール時ハンバーガー
   ★2026-08-20 オーナー指示によるデザイン変更
   ・スマホ(759px以下)はグロナビを横スクロールではなく4列×3段のグリッドに
   ・スクロールでナビが画面外に出たら右上に「三」ボタン(common.jsが生成)
   -------------------------------------------------------------------------- */
@media(max-width:759px){
  .gnavbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);overflow-x:visible}
  .gnavbar a{white-space:normal;padding:7px 2px 6px;font-size:10.5px;border-bottom:1px solid #ffffff1c}
  .gnavbar a small{font-size:7.5px;letter-spacing:0}
}

.menufab{
  display:none;position:fixed;top:8px;right:8px;z-index:9999;
  width:40px;height:40px;border:2px solid var(--ink);border-radius:6px;
  background:var(--accent);color:#fff;font-size:17px;font-weight:900;
  font-family:var(--sans);box-shadow:2px 2px 0 var(--ink);cursor:pointer;
  align-items:center;justify-content:center;line-height:1;
}
@media(max-width:759px){.menufab.show{display:flex}}
.menufab-panel{
  display:none;position:fixed;top:52px;right:8px;z-index:9998;
  background:#2C2436;border:2px solid var(--ink);border-radius:6px;
  box-shadow:3px 3px 0 var(--ink);min-width:172px;max-height:75vh;overflow:auto;
}
.menufab-panel.open{display:block}
.menufab-panel a{display:block;color:#fff;font-size:12.5px;font-weight:900;padding:9px 14px;border-bottom:1px solid #ffffff1c}
.menufab-panel a:last-child{border-bottom:none}
.menufab-panel a:hover{background:#F1268D33;text-decoration:none}

/* --------------------------------------------------------------------------
   16-2. スマホのグロナビ配色  ★2026-08-20 オーナー指示(2回目)
   段組み化で黒いエリアの面積が増えて重く見えるため、スマホのみ
   上品なウォームグレー(グレージュ)に変更。デスクトップの黒帯は従来どおり。
   ハンバーガーの展開メニューも同じトーンに合わせる。
   -------------------------------------------------------------------------- */
@media(max-width:759px){
  .gnavbar,
  .gnavbar::before{background:linear-gradient(#F7F4EE,#EAE5DB);border-bottom:3px solid var(--accent)}
  .gnavbar a{color:var(--ink);border-right:1px solid #D9D2C4;border-bottom:1px solid #D9D2C4}
  .gnavbar a small{color:#948B7B}
  .gnavbar a:hover{background:#F1268D14}
  .gnavbar a.cur{background:#fff;color:var(--hot);box-shadow:inset 0 -3px 0 var(--hot)}
  .gnavbar a.cur small{color:var(--hot)}
  /* HOMEタイルはブランドのピンクを1枚だけ残す(全面グレーだと安っぽくなるため) */
  .gnavbar a.home{background:var(--accent);color:#fff}
  .gnavbar a.home small{color:#ffffffcc}

  .menufab-panel{background:linear-gradient(#FDFBF7,#F1EDE5);border-color:var(--ink)}
  .menufab-panel a{color:var(--ink);border-bottom:1px solid #D9D2C4}
  .menufab-panel a:hover{background:#F1268D14}
}