@charset "UTF-8"; /* ========================================================================== 東京ヲタ区 / subpage.css TOP以外の全ページ(下層ページ)で共通のクローム。区ページ・カテゴリページ(NEWS/EVENT/SPOT等)の両方が読み込む。 -------------------------------------------------------------------------- 読み込み順区ページ : common.css → subpage.css → ward.css → ward-{区名}.css カテゴリページ: common.css → subpage.css → page.css -------------------------------------------------------------------------- 対象クラスは body の `subpage`。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. マストヘッド(下層はロゴのみ・TOPより低い) -------------------------------------------------------------------------- */ .subpage .masthead{background-position:center 30%} .subpage .masthead .wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 10px} .subpage .logo{position:relative;z-index:3} .subpage .logo img{display:block;width:min(280px,64vw);height:auto;filter:drop-shadow(0 0 14px #F1268D66)} /* 吹き出しラッパ:画面中央基準の固定幅にすることで、ウィンドウ幅が変わっても吹き出しの位置関係が崩れない */ .bubwrap{ position:absolute;left:50%;transform:translateX(-50%); width:1190px;max-width:100vw;top:0;bottom:0;z-index:2;pointer-events:none; } .subpage .mh-bub{ border-radius:10px;padding:3px 8px;font-size:9.5px;line-height:1.4; box-shadow:2px 2px 0 #00000055;max-width:135px;pointer-events:auto; } .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} @media(max-width:900px){ .bubwrap{display:none} .subpage .masthead{background-size:cover!important;background-position:center 32%!important} } /* 現在地のナビ項目(HOMEと同じ扱いでハイライト) */ .gnavbar a.cur{background:var(--accent)} .gnavbar a.cur small{color:#ffffffcc} /* -------------------------------------------------------------------------- 2. 広告の文字サイズ(下層は一段小さめ) -------------------------------------------------------------------------- */ .subpage .rect .t{font-size:15px} .subpage .fillad .t{font-size:15px} /* -------------------------------------------------------------------------- 3. 速報マーキー(下層は一段小さめ) -------------------------------------------------------------------------- */ .subpage .marq .wrap{height:26px} .subpage .marq .lbl{font-size:11px} .subpage .marq .inner{animation-duration:24s;font-size:11px} .subpage .marq .inner .sep{margin:0 12px} /* 下層だけ開始位置が異なる(TOPは12%)。このファイルはTOPが読まないため上書き可 */ @keyframes marq{from{transform:translateX(15%)}to{transform:translateX(-100%)}} /* -------------------------------------------------------------------------- 4. パンくず -------------------------------------------------------------------------- */ .crumb{font-size:10px;color:var(--soft);padding:6px 0} .crumb a{color:var(--link)} /* -------------------------------------------------------------------------- 5. 2カラムレイアウト(本文 + 300pxサイド) -------------------------------------------------------------------------- */ .subpage .cols{display:grid;gap:12px;grid-template-columns:1fr;padding-bottom:12px} @media(min-width:860px){.subpage .cols{grid-template-columns:1fr 300px}} .subpage .cols>main,.subpage .cols>aside{min-width:0;display:flex;flex-direction:column} /* -------------------------------------------------------------------------- 6. 共通部品の下層向け調整 -------------------------------------------------------------------------- */ .subpage .koma{padding:5px 7px;font-size:11px;gap:6px} .subpage .rank li{align-items:stretch} .subpage .rank .no{font-size:15px;color:inherit} .subpage .rank li:nth-child(1) .no{color:#E6B400} .subpage .rank li:nth-child(2) .no{color:#8C9BAA} .subpage .rank li:nth-child(3) .no{color:#B4682B} .subpage .rank h4{font-weight:700} .subpage .newcmt li{padding:6px 4px;border-bottom:1px dotted var(--line);font-size:11px} /* -------------------------------------------------------------------------- 7. ピクセル帯(下層はPC時に行をクリップする) -------------------------------------------------------------------------- */ @media(min-width:960px){ .subpage .pixelstrip .row{flex-wrap:nowrap;overflow:hidden} } /* -------------------------------------------------------------------------- 8. 下層ページのフッター -------------------------------------------------------------------------- */ .subpage footer{ background:#1F1B24;color:#B9B3C4;font-size:10px;margin-top:16px;padding:16px 0;text-align:center; }