@charset "UTF-8";
/* ==========================================================================
   東京ヲタ区 / top.css
   TOPページ固有:マストヘッド吹き出し配置 / 4カラムグリッド / 23区MAP /
   左サイドメニュー / イチオシ・新着フィード / 4コマ / BUY / ランキング列 /
   コメント列 / 大型プロモ / レトロ装置 / TOPフッター
   ※common.css の後に読み込む。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. マストヘッド吹き出し(TOP固有の配置)
   -------------------------------------------------------------------------- */
.masthead{color:#fff}
.masthead .in{
  max-width:var(--content-max);margin:0 auto;padding:26px 10px 30px;
  position:relative;text-align:center;min-height:200px;
}
/* サイトタイトル(h1)。中身はロゴ画像なので、
   h1 のデフォルト font-size / line-height を打ち消して
   素の <img> と同じ行ボックスにする(= 見た目は不変) */
.sitetitle{font-size:13px;line-height:1.65;font-weight:400}
.masthead .logoimg{
  width:min(430px,86vw);height:auto;
  filter:drop-shadow(0 0 18px #F1268D66) drop-shadow(0 0 30px #29B6F633);
}

/* メイン2つ */
.mh-bub.l{left:21%;top:98px;transform:rotate(-3deg)}
.mh-bub.r{right:21%;bottom:44px;transform:rotate(2deg)}

/* 追加吹き出し(小・極小):ヘッダーを埋め尽くす */
.mh-bub.s{font-size:10px;padding:4px 9px;max-width:150px;border-width:2px;box-shadow:2px 2px 0 #00000055}
.mh-bub.xs{font-size:9px;padding:3px 7px;max-width:130px;border-width:2px;box-shadow:2px 2px 0 #00000044}

/* 吹き出しの縁色バリエーション */
.mh-bub.bd-pink{border-color:#F2A9C4}
.mh-bub.bd-yellow{border-color:#F2D379}
.mh-bub.bd-cyan{border-color:#7FD3F2}
.mh-bub.bd-purple{border-color:#C7B6E8}

.mh-note{position:absolute;left:10px;bottom:6px;font-size:9px;color:#ffffff88}

/* スマホ:メイン吹き出し2つだけ残してロゴを縮小 */
@media(max-width:900px){
  .mh-bub.s,.mh-bub.xs{display:none}
  .masthead .in{min-height:0;padding:30px 10px 34px}
  .masthead .logoimg{width:min(300px,58vw)}
  .mh-bub{font-size:10px;line-height:1.45;padding:5px 9px;max-width:118px}
  .mh-bub.l{left:2%;top:8px;transform:rotate(-3deg)}
  .mh-bub.r{right:2%;bottom:8px;transform:rotate(2deg)}
}

/* HOMEタブのふりがな(TOPのみ明るめ) */
.gnavbar a.home small{color:#ffffffcc}

/* --------------------------------------------------------------------------
   2. 4カラムグリッド(コンテナクエリ)
   1カラム → 2カラム(760) → 3カラム(1080) → 4カラム(1320)
   ビューポートではなくコンテナ幅で判定(広告レール分を差し引くため)
   -------------------------------------------------------------------------- */
.cols{display:grid;gap:12px;padding:12px 0;grid-template-columns:1fr}
.col-l,.col-r,.col-r2,.col-c{min-width:0;display:flex;flex-direction:column}

@container (min-width:760px){
  .cols{grid-template-columns:1fr 300px}
  .col-c{grid-column:1}
  .col-r{grid-column:2;grid-row:1}
  .col-r2{grid-column:2}
  .col-l{grid-column:1}
}
@container (min-width:1080px){
  .cols{grid-template-columns:240px minmax(0,1fr) 300px}
  .col-l{grid-column:1;grid-row:1/3}
  .col-c{grid-column:2;grid-row:1/3}
  .col-r{grid-column:3;grid-row:1}
  .col-r2{grid-column:3;grid-row:2}
}
@container (min-width:1320px){
  .cols{grid-template-columns:240px minmax(0,1fr) 270px 270px}
  .col-l{grid-column:1;grid-row:1}
  .col-c{grid-column:2;grid-row:1}
  .col-r{grid-column:3;grid-row:1}
  .col-r2{grid-column:4;grid-row:1}
}

/* モバイル表示順:フィード→ランキング→コメント→MAP系 */
@media(max-width:759px){
  .cols{display:flex;flex-direction:column}
  .col-c{order:1}
  .col-r{order:2}
  .col-r2{order:3}
  .col-l{order:4}
}

/* --------------------------------------------------------------------------
   5. 左サイドバーのミニバナー(TOP固有)
   -------------------------------------------------------------------------- */
.minibanners{display:grid;grid-template-columns:1fr;gap:4px}
.mb{
  border:2px outset #d9d2c4;background:linear-gradient(#fff,#EFE9DC);
  padding:4px 8px;font-size:10px;font-weight:900;
  display:flex;align-items:center;gap:6px;color:var(--ink);
}
.mb:hover{text-decoration:none;filter:brightness(1.05)}
.mb .em{font-size:14px}
.mb small{font-weight:400;color:var(--soft);font-size:9px}


/* --------------------------------------------------------------------------
   6. 本日のイチオシ
   -------------------------------------------------------------------------- */
.pickup{display:grid;gap:8px}
.pk{display:flex;gap:10px;border:1px solid var(--line);background:#FFFDF4;padding:8px}
.pk .th{
  width:110px;height:74px;flex-shrink:0;border:1px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;
}
.pk h3{font-size:16px;line-height:1.45}
.pk h3 a{color:var(--ink)}
.pk h3 a:hover{color:var(--hot)}
.pk h3 .kb{color:var(--hot)}
.pk .meta{font-size:10px;color:var(--soft);margin-top:2px}

/* 千代田区のイチオシ吹き出しはシアン系 */
.say.say-chiyoda{border-color:var(--chiyoda);background:#EAF7FF}

/* --------------------------------------------------------------------------
   8. 新着記事フィード(GIGAZINE型・サムネ1.5倍)
   -------------------------------------------------------------------------- */
.feed .item{display:flex;gap:10px;padding:10px 8px;border-bottom:1px solid var(--line)}
.feed .item:nth-child(even){background:#FAF8F2}
.feed .th{
  width:138px;height:93px;flex-shrink:0;border:1px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff;
}
.feed h3{font-size:14.5px;line-height:1.5}
.feed h3 a{color:var(--ink);font-weight:700}
.feed h3 a:hover{color:var(--hot)}
.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;
}
.feed .meta{font-size:10px;color:var(--soft);margin-top:2px}

/* --------------------------------------------------------------------------
   9. 4コマ / BUY
   -------------------------------------------------------------------------- */
.comicgrid{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:600px){.comicgrid{grid-template-columns:repeat(3,1fr)}}

.buygrid{display:grid;gap:6px;grid-template-columns:1fr 1fr}
@media(min-width:600px){.buygrid{grid-template-columns:repeat(3,1fr)}}
.bb{border:3px double var(--ink);background:#fff;padding:6px 8px;position:relative;font-size:11px}
.bb::after{content:"PR";position:absolute;top:2px;right:4px;font-size:8px;color:var(--soft)}
.bb .t{font-family:var(--dot);font-size:12px;display:block;color:var(--ink)}
.bb small{color:var(--soft);font-size:9px}
.bb:hover{background:#FFFBE8;text-decoration:none}
/* 区カラーの枠 */
.bb.bd-chiyoda{border-color:var(--chiyoda)}
.bb.bd-toshima{border-color:var(--toshima)}
.bb.bd-nakano{border-color:var(--nakano)}
.bb.bd-suginami{border-color:var(--suginami)}
.bb.bd-shibuya{border-color:var(--shibuya)}
.bb.bd-shinjuku{border-color:var(--shinjuku)}

.pr-note{font-size:9px;color:var(--soft)}

/* --------------------------------------------------------------------------
   10. 右カラム(タグクラウド / 今日の区長)
   -------------------------------------------------------------------------- */
.today-mayor{text-align:center}
.today-mayor .fig{
  width:84px;height:100px;margin:4px auto;border:2px solid var(--ink);border-radius:8px;
  background:#FFF0F5;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.today-mayor .fig .f{font-size:38px}
.today-mayor .fig .l{font-size:8px;color:var(--soft)}
.today-mayor .bub{
  border:2px solid var(--ink);border-radius:8px;background:#fff;padding:6px 8px;
  font-size:11px;font-weight:700;margin:6px 4px 2px;
}
.today-mayor .who{font-size:9px;color:var(--soft)}

/* --------------------------------------------------------------------------
   11. 新着コメント列(TOP:アイコン付きの横並び)
   -------------------------------------------------------------------------- */
.newcmt li{display:flex;gap:8px;padding:7px 4px;border-bottom:1px dotted var(--line);font-size:11px}
.newcmt .face{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);background:#EFEAF6;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;
}
.cmtmore{
  display:block;text-align:center;font-size:11px;font-weight:900;
  background:linear-gradient(#8F7BB8,#5B4788);color:#fff;border:1px solid var(--ink);
  border-radius:4px;padding:4px;margin:6px 4px 2px;
}
.cmtmore:hover{text-decoration:none;filter:brightness(1.1)}

/* --------------------------------------------------------------------------
   12. 大型プロモ(Discord / グッズ)/ 企画バナー
   -------------------------------------------------------------------------- */
.bigpromo{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.bigpromo a{
  flex:1 1 300px;min-height:130px;border:2px solid var(--ink);color:#fff;position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:16px 18px;overflow:hidden;
}
.bigpromo .k{font-size:11px;font-weight:700;opacity:.9}
.bigpromo .t{font-weight:900;font-size:18px;line-height:1.35;text-shadow:0 1px 2px #00000066}
.bigpromo .s{font-size:11px;opacity:.9}
.bigpromo .bt{
  margin-top:8px;background:#fff;color:var(--ink);font-weight:900;font-size:12px;
  border-radius:999px;padding:3px 16px;border:2px solid var(--ink);align-self:flex-start;
}
.bigpromo .em{position:absolute;right:8px;bottom:-6px;font-size:64px;opacity:.35}
.p-discord{background:linear-gradient(120deg,#4752C4,#7B85E8)}
.p-goods{background:linear-gradient(120deg,#3A1258,#8B3AA8)}

.promo{border:2px solid var(--ink);color:#fff;padding:12px;margin-bottom:10px;display:block;position:relative;overflow:hidden}
.promo .t{font-weight:900;font-size:15px;line-height:1.4;text-shadow:0 1px 2px #00000066}
.promo .s{font-size:10px;opacity:.9}
.promo .em{position:absolute;right:6px;bottom:2px;font-size:36px;opacity:.5}
.promo:hover{text-decoration:none;filter:brightness(1.06)}
.p-seichi{background:linear-gradient(120deg,#45206B,#8B3AA8)}
.p-cafe{background:linear-gradient(120deg,#5B4788,#B0509E)}

/* --------------------------------------------------------------------------
   13. レトロ装置(アクセスカウンター / 相互リンク88×31)
   -------------------------------------------------------------------------- */
.counterbox{text-align:center;padding:10px 6px}
.counterbox .num{
  font-family:var(--dot);font-size:22px;letter-spacing:4px;background:#000;color:#3CFF6E;
  padding:2px 8px;display:inline-block;border:2px inset #888;
}
.counterbox p{font-size:10px;color:var(--soft);margin-top:4px}
.counterbox .kiri{font-size:10px;color:var(--hot);font-weight:900}

.linkwall{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.lk{
  border:1px solid var(--ink);height:31px;font-size:8.5px;font-weight:900;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#fff;line-height:1.15;padding:1px;
}
.lk:hover{text-decoration:none;filter:brightness(1.1)}
.lk-chiyoda{background:var(--chiyoda)}
.lk-toshima{background:var(--toshima)}
.lk-nakano{background:var(--nakano)}
.lk-suginami{background:var(--suginami)}
.lk-shibuya{background:var(--shibuya)}
.lk-gray{background:#555}