@charset "UTF-8"; /* ========================================================================== 東京ヲタ区 / page.css カテゴリページ共通(NEWS / EVENT / SPOT / BUY / COMIC / CHARACTER / MAP / RANKING / WORLD)。読み込み順: common.css → subpage.css → page.css 対象クラス: ========================================================================== */ /* -------------------------------------------------------------------------- 1. ページヒーロー(各カテゴリの見出し) -------------------------------------------------------------------------- */ .page-hero{ border:1px solid var(--line);border-radius:8px;margin-bottom:12px; background: radial-gradient(320px 150px at 88% 15%,var(--hero-glow,#EDE7FA88),transparent 70%), radial-gradient(280px 130px at 8% 95%,var(--hero-glow2,#FFE3EE88),transparent 70%), #FFFBF7; } .page-hero .in{display:flex;gap:18px;align-items:center;padding:20px 18px;flex-wrap:wrap} .page-hero .picon{ width:74px;height:74px;border-radius:12px;flex-shrink:0; background:var(--hero-tint,#EFEAF8);border:1px solid var(--hero-line,#C7B6E8); display:flex;align-items:center;justify-content:center;font-size:38px; } .page-hero .kicker{ font-family:var(--dot);font-size:11px;letter-spacing:3px;color:var(--hero-deep,#5B4788); } .page-hero h1{font-size:clamp(24px,4.5vw,34px);line-height:1.15;font-weight:900} .page-hero .catch{font-weight:700;font-size:13px;color:var(--soft);margin-top:2px} .page-hero .heronum{ margin-left:auto;display:flex;gap:10px;flex-wrap:wrap; } .page-hero .heronum div{ border:1px solid var(--line);border-radius:8px;background:#fff; padding:8px 14px;text-align:center;min-width:78px; } .page-hero .heronum .n{font-family:var(--dot);font-size:19px;color:var(--hero-deep,#5B4788);display:block} .page-hero .heronum .l{font-size:9px;color:var(--soft)} /* ページ別のヒーロー色 */ .hero-news{--hero-glow:#FFE3EE88;--hero-glow2:#FFF2CC88;--hero-tint:#FFE9F3;--hero-line:#F2A9C4;--hero-deep:#E4007F} .hero-event{--hero-glow:#FFEFD0AA;--hero-glow2:#FFE3EE88;--hero-tint:#FFF1DA;--hero-line:#F2C87E;--hero-deep:#C97A00} .hero-spot{--hero-glow:#D9F2E488;--hero-glow2:#E4F5FE88;--hero-tint:#E4F7EE;--hero-line:#8FD9B6;--hero-deep:#1E9E57} .hero-buy{--hero-glow:#EFE0FA88;--hero-glow2:#FFE3EE88;--hero-tint:#F3E9FD;--hero-line:#C7A8E8;--hero-deep:#7A2FA8} .hero-comic{--hero-glow:#D9F2E488;--hero-glow2:#FFF2CC88;--hero-tint:#E4F7EE;--hero-line:#8FD9B6;--hero-deep:#1E9E57} .hero-story{--hero-glow:#E0E4FA88;--hero-glow2:#EFE0FA88;--hero-tint:#E8EAFB;--hero-line:#A8B0E8;--hero-deep:#3B4CCA} .hero-chara{--hero-glow:#DCEEFC88;--hero-glow2:#FFE3EE88;--hero-tint:#E4F2FD;--hero-line:#8FC4EC;--hero-deep:#1A6FC4} .hero-map{--hero-glow:#FFE3EE88;--hero-glow2:#DCEEFC88;--hero-tint:#FFE9F3;--hero-line:#F2A9C4;--hero-deep:#E4007F} .hero-rank{--hero-glow:#FFEFD088;--hero-glow2:#FFF7DD88;--hero-tint:#FFF3DA;--hero-line:#E6B400;--hero-deep:#B4682B} .hero-world{--hero-glow:#E6DFFA88;--hero-glow2:#DCEEFC88;--hero-tint:#EFEAF8;--hero-line:#C7B6E8;--hero-deep:#40318F} /* -------------------------------------------------------------------------- 2. 絞り込みバー(区・カテゴリのタブ/チップ) -------------------------------------------------------------------------- */ .filterbar{ background:#fff;border:1px solid var(--line);border-radius:6px; padding:8px 10px;margin-bottom:12px; } .filterbar .frow{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .filterbar .frow + .frow{margin-top:6px;padding-top:6px;border-top:1px dotted var(--line)} .filterbar .flabel{ font-size:10px;font-weight:900;color:var(--soft);flex-shrink:0; width:52px;letter-spacing:1px; } .chip{ display:inline-block;font-size:11px;font-weight:700;color:var(--ink); border:1px solid var(--line);border-radius:999px;padding:2px 11px;background:#fff; } .chip:hover{text-decoration:none;background:#FFF3F8} .chip.on{background:var(--ink);border-color:var(--ink);color:#fff} .chip.c-chiyoda{border-color:var(--chiyoda);color:var(--chiyoda)} .chip.c-toshima{border-color:var(--toshima);color:#E4007F} .chip.c-nakano{border-color:var(--nakano);color:#B4682B} .chip.c-suginami{border-color:var(--suginami);color:#1E9E57} .chip.c-shibuya{border-color:var(--shibuya);color:var(--shibuya)} .chip.c-shinjuku{border-color:var(--shinjuku);color:var(--shinjuku)} .chip.locked{color:var(--locked);border-style:dashed} /* -------------------------------------------------------------------------- 3. ページネーション -------------------------------------------------------------------------- */ .pager{display:flex;gap:4px;justify-content:center;align-items:center;margin:12px 0 4px;flex-wrap:wrap} .pager a,.pager span{ min-width:32px;height:32px;display:flex;align-items:center;justify-content:center; border:2px outset #d9d2c4;background:linear-gradient(#fff,#EFE9DC); font-size:12px;font-weight:900;color:var(--ink);padding:0 8px; } .pager a:hover{text-decoration:none;filter:brightness(1.05)} .pager .cur{background:var(--ink);color:#fff;border:2px solid var(--ink)} .pager .dots{border:none;background:none;font-weight:400;color:var(--soft)} /* -------------------------------------------------------------------------- 4. セクション見出し(パネル内の小見出し) -------------------------------------------------------------------------- */ .subhead{ font-size:13px;font-weight:900;color:var(--ink); border-left:5px solid var(--accent);padding-left:8px;margin:4px 0 8px; } .subhead.s-gold{border-left-color:#E6B400} .subhead.s-green{border-left-color:var(--suginami)} .subhead.s-blue{border-left-color:var(--chiyoda)} .subhead.s-purple{border-left-color:var(--shibuya)} .leadtxt{font-size:12.5px;line-height:1.9} .leadtxt p{margin-bottom:8px} .leadtxt .kw{background:#FFF0F5;border-radius:4px;padding:0 4px;font-weight:700} /* -------------------------------------------------------------------------- 5. EVENT:カレンダー / イベント表 -------------------------------------------------------------------------- */ .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:#F4F1FA;white-space:nowrap;font-size:11px;color:#5B4788} .evtable .d{font-family:var(--dot);color:var(--accent);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} .evtable .ok{color:var(--suginami);font-weight:900} .weekcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .weekcal .day{ border:1px solid var(--line);background:#fff;border-radius:4px; min-height:96px;padding:4px;display:flex;flex-direction:column;gap:3px; } .weekcal .day.today{border-color:var(--accent);box-shadow:inset 0 -3px 0 #F1268D33} .weekcal .dnum{font-family:var(--dot);font-size:11px;color:var(--soft)} .weekcal .day.sat .dnum{color:var(--chiyoda)} .weekcal .day.sun .dnum{color:var(--hot)} .weekcal .ev{ font-size:9px;font-weight:700;color:#fff;border-radius:3px;padding:1px 4px; line-height:1.3;display:block; } .weekcal .ev:hover{text-decoration:none;filter:brightness(1.08)} .evcards{display:grid;gap:8px} @media(min-width:700px){.evcards{grid-template-columns:1fr 1fr}} .evc{border:1px solid var(--line);background:#fff;display:flex;gap:10px;padding:10px} .evc .th{ width:74px;height:74px;flex-shrink:0;border-radius:8px;color:#fff; display:flex;align-items:center;justify-content:center;font-size:30px; } .evc h3{font-size:13px;line-height:1.5} .evc h3 a{color:var(--ink)} .evc h3 a:hover{color:var(--hot)} .evc .date{font-family:var(--dot);font-size:11px;color:var(--accent)} .evc .place{font-size:11px;color:var(--soft)} /* -------------------------------------------------------------------------- 6. SPOT:スポットカード -------------------------------------------------------------------------- */ .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 .shead{display:flex;gap:8px;align-items:flex-start} .spotc .th{ width:56px;height:56px;flex-shrink:0;border-radius:8px;color:#fff; display:flex;align-items:center;justify-content:center;font-size:26px; } .spotc h3{font-size:13px;line-height:1.4} .spotc h3 a{color:var(--ink)} .spotc h3 a:hover{color:var(--hot)} .spotc .genre{ font-size:9px;color:#fff;background:#5B4788;border-radius:3px; padding:0 5px;margin-left:4px;vertical-align:1px; } .spotc .stars{font-size:11px;color:#F5A623;font-weight:700} .spotc .stars small{color:var(--soft);font-weight:400} .spotc p.desc{font-size:11px;color:var(--soft);margin-top:4px} .spotc .meta2{font-size:10px;color:var(--soft);margin-top:4px;border-top:1px dotted var(--line);padding-top:4px} .spotc .meta2 b{color:var(--ink)} /* -------------------------------------------------------------------------- 7. BUY:商品カード -------------------------------------------------------------------------- */ .mayorbuy{border:1px solid var(--line);background:#fff;margin-bottom:10px} .mayorbuy .mhead{ display:flex;align-items:center;gap:8px;padding:7px 10px;color:#fff;font-weight:900;font-size:12px; } .mayorbuy .mhead .say2{font-weight:400;font-size:10px;opacity:.95;margin-left:auto} .mh-chiyoda{background:linear-gradient(90deg,#0A2A4A,var(--chiyoda))} .mh-toshima{background:linear-gradient(90deg,#7A1B4F,var(--toshima))} .mh-nakano{background:linear-gradient(90deg,#7A4A00,var(--nakano))} .mh-suginami{background:linear-gradient(90deg,#0E4A2A,var(--suginami))} .mh-shibuya{background:linear-gradient(90deg,#3A1258,var(--shibuya))} .mh-shinjuku{background:linear-gradient(90deg,#1A2B7A,var(--shinjuku))} .prodgrid{display:grid;gap:8px;padding:10px} @media(min-width:640px){.prodgrid{grid-template-columns:1fr 1fr 1fr}} .prod{border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px;position:relative} .prod::after{content:"PR";position:absolute;top:4px;right:6px;font-size:8px;color:var(--soft)} .prod .ph2{ height:64px;border-radius:6px;background:#F4F1FA;margin-bottom:6px; display:flex;align-items:center;justify-content:center;font-size:30px; } .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);margin-top:2px} .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)} /* -------------------------------------------------------------------------- 8. COMIC:4コマ / ストーリー -------------------------------------------------------------------------- */ .ykgrid{display:grid;gap:8px} @media(min-width:700px){.ykgrid{grid-template-columns:repeat(3,1fr)}} .ykm .chr{font-size:9px;color:var(--soft);margin-top:4px} .epilist{list-style:none} .epilist li{ display:flex;gap:10px;align-items:flex-start;padding:10px 6px; border-bottom:1px solid var(--line); } .epilist li:nth-child(even){background:#FAF8F2} .epilist .epno{ font-family:var(--dot);font-size:11px;color:#fff;background:#3B4CCA; border-radius:4px;padding:2px 7px;flex-shrink:0;white-space:nowrap; } .epilist .epno.soon{background:var(--locked)} .epilist h3{font-size:13.5px;line-height:1.5} .epilist h3 a{color:var(--ink);font-weight:700} .epilist h3 a:hover{color:var(--hot)} .epilist p{font-size:11px;color:var(--soft);margin-top:2px} .epilist .meta{font-size:10px;color:var(--soft);margin-top:2px} .chapterbox{ border:1px solid var(--line);background:#fff;padding:12px 14px;margin-bottom:10px; border-left:6px solid #3B4CCA; } .chapterbox h3{font-size:15px;margin-bottom:4px} .chapterbox p{font-size:12px;color:var(--soft)} /* -------------------------------------------------------------------------- 9. CHARACTER:キャラクターカード -------------------------------------------------------------------------- */ .charagrid{display:grid;gap:10px;grid-template-columns:1fr 1fr} @media(min-width:700px){.charagrid{grid-template-columns:repeat(3,1fr)}} .charac{border:1px solid var(--line);background:#fff;overflow:hidden;border-radius:6px} .charac .cv{ height:110px;display:flex;align-items:center;justify-content:center; font-size:52px;color:#fff;position:relative; } .charac .cv .wardtag{ position:absolute;left:6px;top:6px;font-size:9px;font-weight:900; background:#ffffffdd;color:var(--ink);border-radius:3px;padding:0 6px; } .charac .cb{padding:8px 10px} .charac h3{font-size:13px} .charac h3 a{color:var(--ink)} .charac .role{font-size:10px;color:var(--soft)} .charac .line{ font-size:11px;background:#FFF0F5;border:1px dashed var(--toshima); border-radius:6px;padding:2px 6px;margin-top:5px;display:inline-block; } .charac.locked{opacity:.6} .charac.locked .cv{background:var(--locked)} .charac .mini{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap} .charac .mini span{ font-size:9px;border:1px solid var(--line);border-radius:999px;padding:0 6px;color:var(--soft); } .protag{ display:flex;gap:14px;align-items:center;flex-wrap:wrap; border:1px solid var(--line);background:#fff;padding:14px; } .protag .pv{ width:104px;height:120px;border:2px solid var(--ink);border-radius:10px; background:#EFEAF8;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0; } .protag .pv .f{font-size:46px} .protag .pv .l{font-size:8px;color:var(--soft)} .protag h3{font-size:16px} .protag .role{font-size:11px;color:var(--soft)} .protag p{font-size:12px;margin-top:6px} /* -------------------------------------------------------------------------- 10. MAP:大きい23区MAP -------------------------------------------------------------------------- */ .bigmap .wardmap{gap:5px} .bigmap .tile{min-height:74px;font-size:14px;flex-direction:column;gap:2px} .bigmap .tile.s{font-size:12px} .bigmap .tile small{font-size:8px;font-weight:400;opacity:.85} .bigmap .tile.open small{opacity:.9} .wardcards{display:grid;gap:8px} @media(min-width:640px){.wardcards{grid-template-columns:1fr 1fr}} .wardc{border:1px solid var(--line);background:#fff;display:flex;gap:10px;padding:10px} .wardc .wv{ width:60px;height:60px;border-radius:10px;flex-shrink:0;color:#fff; display:flex;align-items:center;justify-content:center;font-size:26px; } .wardc h3{font-size:14px} .wardc h3 a{color:var(--ink)} .wardc .kana{font-size:9px;color:var(--soft);letter-spacing:2px} .wardc .catch{font-size:11px;color:var(--soft);margin-top:2px} .wardc .tags{margin-top:4px;display:flex;gap:3px;flex-wrap:wrap} .wardc .tags span{font-size:9px;border:1px solid var(--line);border-radius:999px;padding:0 6px;color:var(--soft)} .soonlist{display:flex;flex-wrap:wrap;gap:6px} .soonchip{ font-size:11px;font-weight:700;color:var(--locked);background:var(--locked-bg); border:2px dashed var(--locked);border-radius:999px;padding:3px 12px; } /* -------------------------------------------------------------------------- 11. RANKING:表彰台 / 順位リスト -------------------------------------------------------------------------- */ .podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:end;margin-bottom:10px} .podium .pd{border:1px solid var(--ink);background:#fff;text-align:center;padding:10px 6px;position:relative} .podium .pd .crown{font-size:26px} .podium .pd .rk{font-family:var(--dot);font-size:22px;display:block} .podium .pd h3{font-size:11.5px;line-height:1.4;margin-top:4px} .podium .pd h3 a{color:var(--ink)} .podium .pd .meta{font-size:9px;color:var(--soft)} .podium .p1{border-width:2px;box-shadow:3px 3px 0 #E6B400;padding-top:16px} .podium .p1 .rk{color:#E6B400} .podium .p2 .rk{color:#8C9BAA} .podium .p3 .rk{color:#B4682B} .ranklist{list-style:none;counter-reset:rk} .ranklist li{ display:flex;gap:10px;align-items:center;padding:8px 6px; border-bottom:1px solid var(--line); } .ranklist li:nth-child(even){background:#FAF8F2} .ranklist .no{ font-family:var(--dot);font-size:16px;width:26px;text-align:center; flex-shrink:0;font-weight:900;color:#8C8496; } .ranklist li:nth-child(1) .no{color:#E6B400} .ranklist li:nth-child(2) .no{color:#8C9BAA} .ranklist li:nth-child(3) .no{color:#B4682B} .ranklist .th{ width:52px;height:38px;flex-shrink:0;border:1px solid var(--ink);color:#fff; display:flex;align-items:center;justify-content:center;font-size:20px; } .ranklist h3{font-size:12.5px;line-height:1.45} .ranklist h3 a{color:var(--ink);font-weight:700} .ranklist h3 a:hover{color:var(--hot)} .ranklist .meta{font-size:9px;color:var(--soft)} .ranklist .updown{font-size:10px;font-weight:900;flex-shrink:0;margin-left:auto} .ranklist .up{color:var(--suginami)} .ranklist .down{color:var(--hot)} .ranklist .keep{color:var(--soft)} /* -------------------------------------------------------------------------- 12. WORLD:世界観 / 用語集 -------------------------------------------------------------------------- */ .worldflow{ font-family:var(--dot);font-size:12px;line-height:2;background:#1F1B24;color:#7FE3FF; border:1px solid var(--ink);border-radius:6px;padding:12px 14px;overflow-x:auto;white-space:pre; } .termlist{list-style:none} .termlist li{padding:8px 4px;border-bottom:1px dotted var(--line)} .termlist dt,.termlist .t{font-size:12.5px;font-weight:900;color:var(--shibuya)} .termlist .d{font-size:11.5px;color:var(--soft);margin-top:2px} .pillars{display:grid;gap:8px} @media(min-width:700px){.pillars{grid-template-columns:1fr 1fr}} .pillar{border:1px solid var(--line);background:#fff;padding:12px} .pillar .pn{font-family:var(--dot);font-size:11px;color:var(--accent)} .pillar h3{font-size:14px;margin:2px 0 4px} .pillar p{font-size:11.5px;color:var(--soft)} /* -------------------------------------------------------------------------- 13. サイドバー共通(カテゴリページ) -------------------------------------------------------------------------- */ .sidecta{ display:block;border:2px solid var(--ink);color:#fff;padding:12px;margin-bottom:12px; position:relative;overflow:hidden; } .sidecta .t{font-weight:900;font-size:14px;line-height:1.4;text-shadow:0 1px 2px #00000066} .sidecta .s{font-size:10px;opacity:.92} .sidecta .em{position:absolute;right:6px;bottom:0;font-size:38px;opacity:.45} .sidecta:hover{text-decoration:none;filter:brightness(1.06)} .cta-map{background:linear-gradient(120deg,#45206B,#8B3AA8)} .cta-chara{background:linear-gradient(120deg,#1A4A7A,#2E9BD6)} .cta-comic{background:linear-gradient(120deg,#0E4A2A,#22B573)} .cta-world{background:linear-gradient(120deg,#3A2A6B,#7A6BD8)} /* -------------------------------------------------------------------------- 14. フッター(カテゴリページはTOPと同じ3カラムのリッチ版を使う) subpage.css の簡易フッター指定を打ち消す -------------------------------------------------------------------------- */ .page-lower footer{ background:#14101B;font-size:11px;margin-top:0;padding:18px 0 26px;text-align:left; } @media(min-width:960px){.page-lower footer{padding-bottom:70px}} /* -------------------------------------------------------------------------- 15. NEWS記事詳細(/news/{slug}) ★STEP 1-1 で追加土台は既存の .panel / .ph / .pb / .cols / .feed / .rect / .evtable / .subhead / .leadtxt / .catlist / .mayorbuy / .prod / .sidecta。ここに足すのは「記事ページにしか無い部品」だけ。セレクタはすべて .art* / .chrcmt* / .arttoc の新規クラスに閉じてあるので、既存10ページ(NEWS一覧・EVENT・SPOT…)のDOMには一切マッチしない。 -------------------------------------------------------------------------- */ /* アイキャッチ(いまは絵文字プレースホルダ。本番は区カラー地のWebPに差し替え) */ .arteye{ position:relative;height:190px;margin-bottom:10px;overflow:hidden; border:1px solid var(--ink);border-radius:8px;color:#fff; display:flex;align-items:center;justify-content:center; } .arteye .em{font-size:78px;line-height:1;text-shadow:0 3px 0 #00000022} .arteye .cap{ position:absolute;left:0;right:0;bottom:0;background:#1F1B24CC; font-size:9px;padding:2px 8px;letter-spacing:1px; } @media(max-width:759px){.arteye{height:150px}.arteye .em{font-size:60px}} /* 記事メタ(区バッジ・日付・コメ数・タグ) */ .artmeta{ display:flex;flex-wrap:wrap;align-items:center;gap:6px; font-size:10px;color:var(--soft);margin:0 0 8px; } .artmeta .date{font-family:var(--dot);font-size:11px;color:var(--accent)} .artmeta .by{font-weight:700;color:var(--ink)} /* SNSシェア(X用テキストは記事データから自動生成する想定) */ .artshare{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .artshare a{ flex:1 1 auto;min-width:104px;text-align:center;color:#fff; font-size:11px;font-weight:900;border:2px solid var(--ink);padding:5px 10px; } .artshare a:hover{text-decoration:none;filter:brightness(1.1)} .sh-x{background:#1F1B24} .sh-line{background:#0E9E52} .sh-hb{background:#1A72B8} .sh-copy{background:#5A4E6B} /* 本文 */ .artbody .lead{ font-size:13px;font-weight:700;line-height:1.85;background:#FFF6C9; border-left:5px solid var(--accent);padding:8px 10px;margin-bottom:12px; } .artbody p{margin-bottom:10px} .artbody .artlist{margin:0 0 10px} .artbody .artlist li{ list-style:none;position:relative;padding-left:15px; font-size:12px;line-height:1.85; } .artbody .artlist li::before{ content:"▶";position:absolute;left:0;top:3px;font-size:8px;color:var(--accent); } .artbody .cap2{font-size:10px;color:var(--soft);margin:-4px 0 10px} /* キャラコメント(フロントマターの comments: から生成する吹き出し) */ .chrcmt{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px} .chrcmt .face{ width:52px;height:52px;flex-shrink:0;border:2px solid var(--ink);border-radius:8px; display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff; } .chrcmt .bub{ position:relative;flex:1;min-width:0;background:#FFF0F5; border:2px solid var(--toshima);border-radius:10px;padding:6px 10px; } .chrcmt .bub::before{ content:"";position:absolute;left:-8px;top:15px;width:0;height:0; border:7px solid transparent;border-right-color:var(--toshima); } .chrcmt .nm{display:block;font-size:10px;font-weight:900;color:#E4007F} .chrcmt p{font-size:12px;line-height:1.75} .chrcmt .lnk{font-size:10px;font-weight:700} .chrcmt.c-chiyoda .bub{background:#E7F5FD;border-color:var(--chiyoda)} .chrcmt.c-chiyoda .bub::before{border-right-color:var(--chiyoda)} .chrcmt.c-chiyoda .nm{color:#0077B0} .chrcmt.c-nakano .bub{background:#FFF3E0;border-color:var(--nakano)} .chrcmt.c-nakano .bub::before{border-right-color:var(--nakano)} .chrcmt.c-nakano .nm{color:#B4682B} /* 回遊フッター(区 → 区長 → 4コマの3点セット) */ .artgo{display:grid;gap:8px;margin-bottom:12px} @media(min-width:640px){.artgo{grid-template-columns:repeat(3,1fr)}} .artgo a{ display:flex;gap:9px;align-items:center;color:var(--ink); border:2px solid var(--ink);background:#fff;padding:10px; } .artgo a:hover{text-decoration:none;background:#FFF3F8} .artgo .em{font-size:28px;flex-shrink:0;line-height:1} .artgo .t{display:block;font-size:12.5px;font-weight:900;line-height:1.35} .artgo .s{font-size:10px;color:var(--soft)} /* 前後の記事 */ .artpn{display:grid;gap:8px;margin-bottom:12px} @media(min-width:640px){.artpn{grid-template-columns:1fr 1fr}} .artpn a{display:block;border:1px solid var(--line);background:#fff;padding:8px 10px;color:var(--ink)} .artpn a:hover{text-decoration:none;color:var(--hot)} .artpn .l{display:block;font-family:var(--dot);font-size:10px;color:var(--soft)} .artpn .n{font-size:12px;font-weight:700;line-height:1.5} .artpn .next{text-align:right} /* 注記(取材メモ・アフィリエイト表記。景表法/ステマ規制対応のため削除しない) */ .artnote{font-size:9.5px;color:var(--soft);line-height:1.75} /* サイドバー:この記事の目次 */ .arttoc{list-style:none} .arttoc li{border-bottom:1px dotted var(--line)} .arttoc a{display:block;padding:5px 4px;font-size:11.5px;font-weight:700;color:var(--ink)} .arttoc a:hover{background:#FFF3F8;text-decoration:none} .arttoc .n{font-family:var(--dot);font-size:10px;color:var(--accent);margin-right:5px} /* -------------------------------------------------------------------------- 16. キャラクター詳細(/character/{slug}) ★STEP 1-7 で追加土台は既存の .panel / .ph.chara / .evtable / .feed / .ykgrid / .charagrid / .artgo / .artshare(§15)。ここに足すのは立ち絵・ステータス・口癖だけ。キャラの色は .ch-{区名} の3変数で切り替える(区ページの ward-{区名}.css と同じ考え方)。 -------------------------------------------------------------------------- */ .ch-chiyoda {--ch:var(--chiyoda); --ch-deep:#0077B0;--ch-soft:#E7F5FD} .ch-toshima {--ch:var(--toshima); --ch-deep:#E4007F;--ch-soft:#FFE9F3} .ch-nakano {--ch:var(--nakano); --ch-deep:#B4682B;--ch-soft:#FFF3E0} .ch-suginami{--ch:var(--suginami);--ch-deep:#1E9E57;--ch-soft:#E4F7EE} .ch-shibuya {--ch:var(--shibuya); --ch-deep:#7A2FA8;--ch-soft:#F3E9FD} .ch-shinjuku{--ch:var(--shinjuku);--ch-deep:#3B4CCA;--ch-soft:#E8EAFB} .chprof{display:grid;gap:12px} @media(min-width:700px){.chprof{grid-template-columns:200px 1fr}} /* 立ち絵(いまは絵文字プレースホルダ。本番はキャラ立ち絵のWebPに差し替え) */ .chfig{ border:2px solid var(--ink);border-radius:10px;padding:14px 10px;min-height:210px; background:var(--ch-soft,#EFEAF8); display:flex;flex-direction:column;align-items:center;justify-content:center; } .chfig .f{font-size:74px;line-height:1} .chfig .l{font-size:9px;color:var(--soft);font-weight:700;text-align:center;margin-top:8px} .chfig .ln{ font-size:11px;font-weight:700;background:#fff;border:1px solid var(--ch,var(--toshima)); border-radius:8px;padding:3px 8px;margin-top:8px;text-align:center; } /* ステータス(RPG風バー。数値はキャラJSONから流し込む想定) */ .chstat{margin-bottom:7px} .chstat .lb{display:flex;justify-content:space-between;font-size:11px;font-weight:700} .chstat .lb .v{font-family:var(--dot);color:var(--ch-deep,#5B4788)} .chstat .bar{height:12px;border:1px solid var(--ink);background:#fff;border-radius:3px;overflow:hidden} .chstat .fill{height:100%;background:linear-gradient(90deg,var(--ch,var(--accent)),var(--ch-deep,#5B4788))} /* 口癖 / NG(IP監修AIが検証する対象。地の文と混ぜない) */ .chlines{list-style:none;margin-bottom:4px} .chlines li{ font-size:12px;line-height:1.7;background:var(--ch-soft,#FFF0F5); border:1px dashed var(--ch,var(--toshima));border-radius:8px; padding:5px 10px;margin-bottom:6px; } .chlines.ng li{background:#F7F5F0;border:1px dotted var(--soft);color:var(--ink)} .chlines.ng li b{color:var(--hot)} /* -------------------------------------------------------------------------- 17. 4コマ個別(/comic/yonkoma/{id}) ★STEP 1-5 で追加 SNSからの着地点。OGP=漫画画像、下にキャラカードとフォローCTAを置く。 -------------------------------------------------------------------------- */ .ykview{border:2px solid var(--ink);background:#fff;border-radius:6px;padding:10px} .kframe{ display:flex;gap:9px;align-items:flex-start; border:1px solid var(--ink);background:#FFFDF8;padding:10px;margin-bottom:6px; } .kframe:last-child{margin-bottom:0} .kframe .n{ font-family:var(--dot);font-size:13px;color:#fff;background:#1E9E57; width:24px;height:24px;border-radius:4px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .kframe .stage{display:block;font-size:10px;color:var(--soft)} .kframe p{font-size:12.5px;line-height:1.7;font-weight:700} .ykalt{font-size:9.5px;color:var(--soft);line-height:1.7;margin-top:8px} /* SNSフォロー導線(§15 の .artshare を流用。Instagram色だけ追加) */ .sh-ig{background:#B02E7A} /* -------------------------------------------------------------------------- 18. イベント詳細(/event/{slug}) ★STEP 1-2 で追加土台は既存の .panel / .evtable / .weekcal / .evc / .feed / .chrcmt(§16) / .artgo / .artpn / .artshare(§15)。開催概要テーブルはフロントマターの event: ブロック(start/end/venue/price)から生成し、同じデータで JSON-LD の schema.org Event も出す(設計書§10)。 -------------------------------------------------------------------------- */ /* 開催ステータス帯(会期中/開催前の判定はビルド時に算出する) */ .evstatus{ display:flex;flex-wrap:wrap;align-items:center;gap:10px; border:2px solid var(--ink);background:#FFF6C9;padding:8px 12px;margin-bottom:12px; } .evstatus .badge2{ font-family:var(--dot);font-size:12px;color:#fff;background:var(--hot); border:1px solid var(--ink);border-radius:4px;padding:2px 10px;flex-shrink:0; } .evstatus .badge2.soon{background:#C97A00} .evstatus .badge2.end{background:var(--locked)} .evstatus .dcount{font-family:var(--dot);font-size:20px;color:#C97A00;line-height:1.2} .evstatus .dcount b{font-size:28px;color:var(--hot)} .evstatus .term{font-size:12px;font-weight:700} .evstatus .upd{margin-left:auto;font-size:9.5px;color:var(--soft)} @media(max-width:759px){.evstatus .upd{margin-left:0;width:100%}} /* 会場(地図は実装時に埋め込み or 静的画像へ差し替え) */ .evmap{ border:1px solid var(--ink);border-radius:6px;overflow:hidden; background:#E4F2FD;margin-bottom:8px; } .evmap .ph3{ height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center; color:#1A6FC4;gap:4px; } .evmap .ph3 .em{font-size:40px;line-height:1} .evmap .ph3 .l{font-size:10px;font-weight:700} .evmap .adr{ background:#fff;border-top:1px solid var(--line);padding:6px 10px;font-size:11px; } .evmap .adr b{font-size:12px} /* -------------------------------------------------------------------------- 19. スポット詳細(/spot/{slug}) ★STEP 1-3 で追加土台は既存の .panel / .evtable / .spotgrid / .spotc / .walk / .feed と §18 の .evmap(地図+住所)。新規は評価表示と口コミの2つだけ。 -------------------------------------------------------------------------- */ .bigstars{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; border:1px solid var(--line);background:#fff;border-radius:6px; padding:8px 12px;margin-bottom:10px; } .bigstars .sc{font-family:var(--dot);font-size:26px;color:#B4682B;line-height:1} .bigstars .st{font-size:18px;color:#F5A623;font-weight:700;letter-spacing:1px} .bigstars .cnt2{font-size:10px;color:var(--soft)} .bigstars .tag2{ margin-left:auto;font-size:9px;color:#fff;background:#1E9E57; border-radius:3px;padding:1px 8px;font-weight:700; } .revlist{list-style:none} .revlist li{padding:8px 4px;border-bottom:1px dotted var(--line)} .revlist .rh{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .revlist .st{font-size:11px;color:#F5A623;font-weight:700} .revlist .who{font-size:10px;font-weight:700;color:#22B573} .revlist .on{font-size:9px;color:var(--soft);margin-left:auto} .revlist p{font-size:11.5px;line-height:1.7;margin-top:2px} /* -------------------------------------------------------------------------- 20. 規約・運営情報系(/about /privacy /contact /affiliate-policy /404) ★STEP 1-12 で追加。カテゴリページと同じ骨格の「読み物」ページ。本文は §15 の .artbody / .artlist / .artnote と既存の .subhead を流用する。 -------------------------------------------------------------------------- */ /* ページ別ヒーロー色(§1の一覧に追加。既存10色は変更していない) */ .hero-doc{--hero-glow:#E4EEF588;--hero-glow2:#EFEAF888;--hero-tint:#EAF0F5;--hero-line:#A8BDCC;--hero-deep:#3F5A6B} .hero-404{--hero-glow:#FFE3EE88;--hero-glow2:#FFF2CC88;--hero-tint:#FFE9F3;--hero-line:#F2A9C4;--hero-deep:#E4007F} /* 公開前に運営者が埋める箇所(本番公開までに必ず全て置換する) */ .fillin{ background:#FFF6C9;border:1px dashed var(--hot);border-radius:4px; padding:0 6px;font-weight:700;color:var(--hot); } /* 3カラム表はスマホで表だけ横スクロールさせる(ページ自体は横に伸ばさない) */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .tscroll .evtable{min-width:420px} /* 404 */ .nf404{ border:2px solid var(--ink);background:#fff;text-align:center; padding:26px 14px;margin-bottom:12px; } .nf404 .big{font-family:var(--dot);font-size:64px;line-height:1;color:var(--accent)} .nf404 .msg{font-size:14px;font-weight:900;margin-top:6px} .nf404 .sub{font-size:11.5px;color:var(--soft);margin-top:4px} .nf404 .fig{font-size:44px;margin-top:8px;line-height:1} /* -------------------------------------------------------------------------- 21. 商品/企画詳細(/buy/{slug}) ★STEP 1-4 で追加 ProductCard が主役のページ。既存 .prod は一覧用の小カードなので、詳細ページ用の大きい版だけをここに足す(.prod は変更しない)。 -------------------------------------------------------------------------- */ .bigprod{display:grid;gap:14px;position:relative} @media(min-width:700px){.bigprod{grid-template-columns:260px 1fr}} .bigprod .pv2{ border:2px solid var(--ink);border-radius:10px;background:#F4F1FA; min-height:200px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:4px; } .bigprod .pv2 .em{font-size:76px;line-height:1} .bigprod .pv2 .l{font-size:9px;color:var(--soft);font-weight:700} .bigprod h3{font-size:17px;line-height:1.4} .bigprod .stars{font-size:15px;color:#F5A623;font-weight:700} .bigprod .stars small{color:var(--soft);font-weight:400;font-size:11px} .bigprod .price{font-family:var(--dot);font-size:22px;color:var(--hot);margin-top:4px} .bigprod .price small{font-size:10px;color:var(--soft);font-family:var(--sans)} .bigprod .lead2{font-size:12px;line-height:1.8;margin-top:6px} /* 3ボタン並列(Amazon / 楽天 / その他)。詳細ページは大きめ */ .shops2{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} .shops2 a{ flex:1 1 100px;text-align:center;font-size:12.5px;font-weight:900;color:var(--ink); border:2px outset #d9d2c4;background:linear-gradient(#fff,#EFE9DC);padding:8px 6px; } .shops2 a:hover{text-decoration:none;filter:brightness(1.05)} .shops2 .main{background:linear-gradient(#FFD97A,#F0A500);border-color:#E0A83C} /* -------------------------------------------------------------------------- 22. ストーリー漫画ビューア(/comic/story/{ep}) ★STEP 1-6 で追加スマホ主体のため縦スクロール(Webtoon式)。1ページ=1ブロック。 -------------------------------------------------------------------------- */ .epview{background:#1B1424;border:2px solid var(--ink);padding:10px;border-radius:6px} .epage{ background:#FFFDF8;border:1px solid var(--ink); margin-bottom:10px;padding:12px 14px; } .epage:last-child{margin-bottom:0} .epage .pn2{ font-family:var(--dot);font-size:10px;color:#fff;background:#3B4CCA; border-radius:3px;padding:1px 8px;display:inline-block;margin-bottom:6px; } .epage .stage{display:block;font-size:10.5px;color:var(--soft);margin-bottom:4px} .epage p{font-size:13px;line-height:1.8;font-weight:700} .epage p + p{margin-top:5px} .epage .nar{font-weight:400;color:#4A4353;font-size:12px} /* -------------------------------------------------------------------------- 23. 相関図(/character/map) ★STEP 1-8 で追加 PCは .worldflow(既存)の全体図、スマホはカード送りの代わりに関係リスト。 -------------------------------------------------------------------------- */ .rellist{list-style:none} .rellist li{ display:flex;gap:8px;align-items:flex-start; padding:9px 4px;border-bottom:1px dotted var(--line); } .rellist .pair{ display:flex;gap:4px;align-items:center;flex-shrink:0; font-size:11.5px;font-weight:900; } .rellist .av2{ width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);color:#fff; display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; } .rellist .arw{font-family:var(--dot);color:var(--accent);font-size:13px} .rellist .rl{font-size:11.5px;line-height:1.6} .rellist .rl b{color:var(--hot)} @media(max-width:520px){.rellist li{flex-direction:column;gap:4px}} /* -------------------------------------------------------------------------- 24. サイト内検索(/search) ★STEP 1-10 で追加 Pagefind の結果を差し込むガワ。JSは本番で Pagefind に置き換える。 -------------------------------------------------------------------------- */ .searchbox{ border:2px solid var(--ink);background:#fff;padding:12px;margin-bottom:12px; display:flex;gap:6px;flex-wrap:wrap;align-items:center; } .searchbox input[type="search"],.searchbox input[type="text"]{ flex:1 1 240px;min-width:0;font-family:var(--sans);font-size:14px; border:2px inset #d9d2c4;padding:7px 10px;background:#FFFDF8;color:var(--ink); } .searchbox .go{ font-size:13px;font-weight:900;color:var(--ink);border:2px outset #d9d2c4; background:linear-gradient(#fff,#EFE9DC);padding:7px 20px;cursor:pointer; font-family:var(--sans); } .searchbox .go:hover{filter:brightness(1.05);text-decoration:none} .searchbox .hint{width:100%;font-size:10px;color:var(--soft)} .sresult{list-style:none} .sresult li{padding:10px 6px;border-bottom:1px solid var(--line)} .sresult li:nth-child(even){background:#FAF8F2} .sresult .kind{ font-size:9px;font-weight:900;color:#fff;background:#5B4788; border-radius:3px;padding:0 6px;margin-right:4px;vertical-align:1px; } .sresult h3{font-size:13.5px;line-height:1.5;display:inline} .sresult h3 a{color:var(--ink);font-weight:700} .sresult h3 a:hover{color:var(--hot)} .sresult .ex{font-size:11.5px;color:#4A4353;line-height:1.7;margin-top:3px} .sresult .ex mark{background:#FFF2A8;font-weight:700;color:var(--ink)} .sresult .path{font-size:9.5px;color:var(--soft);margin-top:2px} /* -------------------------------------------------------------------------- 25. 記事フィード / サイドバー数値リスト ★2026-08-20 オーナー指示の修正 page.css に .feed / .wdata の定義が無く、カテゴリ系ページだけサムネイルが積み上がり・padding 0 の素の表示になっていた(既存の抜け)。 top.css / ward.css と同じ見た目になるよう定義を移植。 -------------------------------------------------------------------------- */ .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; } @media(max-width:759px){.feed .th{width:72px;height:72px;font-size:26px}} .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} .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:#5B4788;font-weight:700}