/* ============================================================================
bubblegum.css — NOX LIVE "Bubblegum スティッカー漫画" デザインシステム
============================================================================
v0.7.5.a+: 「B案: Bubblegum」デザインの全面適用。
- 白 + ホットピンク + ワインレッド輪郭 + シール装飾
- 太い 2.5px 枠 + 3-5px オフセットシャドウ
- 漫画的にカードを少し傾ける (transform: rotate)
- 全部このファイルで完結 (styles.css の後に読み込んで上書き)
構成:
1. デザイントークン (CSS 変数 + Web Font)
2. ベース上書き (body, html, font)
3. ユーティリティ (.b-frame, .b-btn, .b-tag, .b-bubble, .b-marquee)
4. ヘッダー / サイドバー / ナビ
5. セクションタイトル & コンテナ
6. カード (stream-card, cast-card, product-card, ranking-*, upcoming-*)
7. お知らせリスト / スケジュール
8. モーダル + フォーム
9. フッター
10. デコレーション (背景シール、ポルカドット帯)
11. アニメーション (bpulse, bmarquee)
12. レスポンシブ調整
============================================================================ */
/* ──── 1. デザイントークン ──── */
:root {
--b-bg: #fff8fb;
--b-bg2: #ffeef5;
--b-card: #ffffff;
--b-paper: #fdeef3;
--b-ink: #4a1f2e;
--b-ink2: #7e3a55;
--b-ink3: #b88aa0;
--b-ink4: #d9bdc8;
--b-pink: #ff2d7a;
--b-pinkD: #d6075e;
--b-pinkS: #ffe1ec;
--b-pinkE: #ffa4c4;
--b-yel: #ffd24a;
--b-yelS: #fff0b8;
--b-mint: #9fe8c8;
--b-lav: #cdb7ff;
--b-sky: #9adcff;
--b-font: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
--b-fontT: "Zen Maru Gothic", "M PLUS Rounded 1c", system-ui, sans-serif;
--b-shadow: 4px 4px 0 var(--b-ink);
--b-shadow-sm: 2px 2px 0 var(--b-ink);
--b-shadow-lg: 5px 5px 0 var(--b-ink);
--b-border: 2.5px solid var(--b-ink);
--b-border-thin: 1.5px solid var(--b-ink);
}
/* Google Fonts (M PLUS Rounded 1c + Zen Maru Gothic) — load via link
in index.html; CSS only declares font fallback chain. */
/* ──── 2. ベース上書き ──── */
html, body {
background: var(--b-bg) !important;
color: var(--b-ink) !important;
font-family: var(--b-font) !important;
}
body { font-weight: 500; }
/* グローバルスクロールバー (淡ピンク) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--b-pinkS); }
::-webkit-scrollbar-thumb {
background: var(--b-pink);
border-radius: 999px;
border: 2px solid var(--b-pinkS);
}
/* リンクの基本色は ink2 (落ち着いた紫がかった茶) */
a { color: var(--b-pinkD); }
a:hover { color: var(--b-pink); }
/* 旧グロー / ネオンエフェクトを抑制 */
.app-container { background: var(--b-bg) !important; }
/* ──── 3. ユーティリティ ──── */
/* .b-frame: 太枠 + オフセット影 + 任意の傾き */
.b-frame {
background: var(--b-card);
border: var(--b-border);
border-radius: 22px;
box-shadow: var(--b-shadow);
color: var(--b-ink);
}
.b-frame--pink { background: var(--b-pinkS); }
.b-frame--paper { background: var(--b-paper); }
.b-frame--yel { background: var(--b-yelS); }
/* .b-btn: 全ボタン共通 */
.b-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--b-card);
color: var(--b-ink);
border: var(--b-border);
padding: 8px 16px;
border-radius: 999px;
font-family: var(--b-font);
font-size: 13px;
font-weight: 900;
cursor: pointer;
box-shadow: 3px 3px 0 var(--b-ink);
letter-spacing: 0.5px;
transition: transform 0.08s, box-shadow 0.08s;
text-decoration: none;
white-space: nowrap;
}
.b-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--b-ink); }
.b-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--b-ink); }
.b-btn--pink { background: var(--b-pink); color: #fff; }
.b-btn--yel { background: var(--b-yel); color: var(--b-ink); }
.b-btn--mint { background: var(--b-mint); color: var(--b-ink); }
.b-btn--lav { background: var(--b-lav); color: var(--b-ink); }
.b-btn--ink { background: var(--b-ink); color: #fff; }
.b-btn--sm { padding: 5px 12px; font-size: 11px; box-shadow: 2px 2px 0 var(--b-ink); }
.b-btn--lg { padding: 12px 22px; font-size: 14px; }
.b-btn--full { width: 100%; justify-content: center; }
/* .b-tag: 小さなルビー */
.b-tag {
display: inline-block;
font-family: var(--b-font);
font-size: 11px;
font-weight: 900;
padding: 2px 10px;
border-radius: 999px;
background: var(--b-yel);
border: var(--b-border-thin);
color: var(--b-ink);
line-height: 1.5;
}
.b-tag--pink { background: var(--b-pink); color: #fff; }
.b-tag--mint { background: var(--b-mint); }
.b-tag--lav { background: var(--b-lav); }
.b-tag--ps { background: var(--b-pinkS); }
.b-tag--ys { background: var(--b-yelS); }
/* LIVE バッジ */
.b-live-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--b-pink);
color: #fff;
padding: 3px 9px;
border-radius: 999px;
border: var(--b-border-thin);
font-family: var(--b-font);
font-size: 10px;
font-weight: 900;
box-shadow: 1.5px 1.5px 0 var(--b-ink);
line-height: 1;
}
.b-live-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: #fff;
animation: bpulse 1.3s infinite;
}
/* マーキー (流れるバナー) */
.b-marquee {
background: var(--b-ink);
color: var(--b-yel);
height: 32px;
display: flex;
align-items: center;
overflow: hidden;
border-top: 2px solid var(--b-ink);
border-bottom: 2px solid var(--b-ink);
position: relative;
z-index: 3;
}
.b-marquee-track {
display: flex;
white-space: nowrap;
font-family: var(--b-font);
font-size: 13px;
font-weight: 900;
letter-spacing: 2px;
animation: bmarquee 30s linear infinite;
}
.b-marquee-track span { padding-right: 60px; }
.b-marquee-track em { color: var(--b-pinkE); font-style: normal; }
.b-marquee-track b { color: #fff; }
.b-marquee-track i { color: var(--b-mint); font-style: normal; }
/* ポルカドット帯 */
.b-polka-strip {
height: 14px;
background: radial-gradient(var(--b-pinkS) 2px, transparent 2.5px) 0 0 / 16px 16px;
opacity: 0.9;
}
.b-polka-strip--pink {
background: radial-gradient(var(--b-pink) 2px, transparent 2.5px) 0 0 / 16px 16px;
}
/* スピーチバブル (chat) */
.b-bubble {
position: relative;
background: var(--b-card);
border: var(--b-border);
border-radius: 18px;
padding: 8px 14px;
box-shadow: 3px 3px 0 var(--b-ink);
}
.b-bubble::after {
content: '';
position: absolute;
bottom: -12px;
left: 16px;
width: 14px;
height: 12px;
background: var(--b-card);
clip-path: polygon(0 0, 100% 0, 30% 100%);
border-left: 2.5px solid var(--b-ink);
border-right: 2.5px solid var(--b-ink);
border-bottom: 2.5px solid var(--b-ink);
}
/* ──── 4. ヘッダー / ナビ / サイドバー ──── */
/* v0.7.5.d+: ヘッダー高さを 76px → 108px に拡張し、--header-height 変数も更新。
これによって sidebar.with-top-bar (top: var(--header-height)) と main-content
(margin-top: var(--header-height)) も自動で追従。
top-bar 自体は ORIGINAL の position: fixed を尊重 (ヘッダーをスクロール固定)。 */
:root {
--header-height: 108px !important;
}
.top-bar {
background: var(--b-card) !important;
border-bottom: 3px solid var(--b-ink) !important;
/* position: fixed; top: 0; left: 0; right: 0; は styles.css の規則をそのまま使う */
height: 108px !important;
min-height: 108px !important;
padding: 10px 32px !important;
display: flex !important;
align-items: center !important;
gap: 18px !important;
z-index: 150;
box-shadow: 0 4px 0 var(--b-pink), 0 6px 16px rgba(74, 31, 46, 0.15) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.top-bar::after { display: none; } /* 旧グラデーション下線を消す */
.top-bar .logo,
.top-bar .logo-banner {
display: flex !important;
align-items: center !important;
gap: 10px;
text-decoration: none;
}
.top-bar .logo-banner-img,
.top-bar .logo img {
/* v0.7.5.b+: 偏愛研究所♡ふぇちらぼ ロゴ (横長 ~2.71:1) を大きく表示。
v0.7.5.d+: header 108px に対し 80px (上下 14px 余白で収まり良く) */
height: 80px !important;
width: auto !important;
max-width: 300px;
max-height: 80px;
object-fit: contain;
display: block !important;
filter: drop-shadow(0 2px 4px rgba(74, 31, 46, 0.15)) !important;
}
/* NOW STREAMING バッジ (top-bar 内に挿入する用 .b-now-badge) */
.b-now-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 8px;
padding: 5px 12px;
background: var(--b-yelS);
border: 2px solid var(--b-ink);
border-radius: 999px;
font-family: var(--b-font);
font-size: 12px;
font-weight: 900;
box-shadow: 2px 2px 0 var(--b-ink);
white-space: nowrap;
color: var(--b-ink);
}
.b-now-badge .b-now-dot {
width: 7px; height: 7px; border-radius: 999px; background: var(--b-pink);
animation: bpulse 1.3s infinite;
}
.top-bar-actions {
margin-left: auto !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* 既存ヘッダーボタン (top-bar 内) も b-btn 風に */
.top-bar .btn-mobile-login,
.top-bar .btn-mobile-menu,
.top-bar .btn-header-logout {
background: var(--b-card) !important;
color: var(--b-ink) !important;
border: var(--b-border) !important;
border-radius: 999px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 13px !important;
padding: 7px 16px !important;
box-shadow: 2px 2px 0 var(--b-ink) !important;
text-shadow: none !important;
letter-spacing: 0.5px !important;
}
.top-bar .btn-mobile-login { background: var(--b-pink) !important; color: #fff !important; }
.top-bar .btn-header-logout { background: var(--b-pinkS) !important; }
.top-bar .btn-header-logout[disabled] { opacity: 0.45; }
.top-bar .btn-mobile-menu { padding: 7px 12px !important; }
/* サイドバー */
/* v0.7.5.d+: padding-bottom を 60px にして、最後の「配信者向け」セクションが
見切れないよう余白を確保。overflow-y: auto は styles.css の規則そのまま使う。 */
.sidebar {
background: var(--b-card) !important;
border-right: 3px solid var(--b-ink) !important;
color: var(--b-ink) !important;
padding: 18px 14px 60px !important;
box-shadow: 4px 0 0 var(--b-pinkS) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* サイドバー下端に十分な余白を確保 (last nav-section の最後 nav-item が
ぴったり下に張り付くのを防ぐ) */
.sidebar-nav { padding-bottom: 24px; }
.sidebar-overlay {
background: rgba(74, 31, 46, 0.4) !important;
}
/* sidebar 内ユーザーセクション */
.user-section {
background: var(--b-paper) !important;
border: var(--b-border) !important;
border-radius: 16px !important;
box-shadow: 3px 3px 0 var(--b-ink) !important;
padding: 14px !important;
margin-bottom: 16px !important;
color: var(--b-ink) !important;
}
.user-name { color: var(--b-ink) !important; font-family: var(--b-fontT); font-weight: 900 !important; }
.login-title {
font-family: var(--b-fontT) !important;
font-weight: 900 !important;
color: var(--b-ink) !important;
margin-bottom: 8px !important;
}
.login-input, .form-input {
background: var(--b-card) !important;
color: var(--b-ink) !important;
border: 2px solid var(--b-ink) !important;
border-radius: 12px !important;
padding: 8px 12px !important;
font-family: var(--b-font) !important;
font-weight: 700 !important;
box-shadow: 1.5px 1.5px 0 var(--b-ink) !important;
}
.login-input::placeholder, .form-input::placeholder { color: var(--b-ink3) !important; }
.login-input:focus, .form-input:focus { outline: none; box-shadow: 2px 2px 0 var(--b-pink) !important; border-color: var(--b-pink) !important; }
.login-error, .modal-error { color: var(--b-pinkD) !important; font-weight: 800 !important; }
.btn-login, .btn-signup, .btn-point-purchase {
background: var(--b-pink) !important;
color: #fff !important;
border: var(--b-border) !important;
border-radius: 999px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
box-shadow: 2px 2px 0 var(--b-ink) !important;
padding: 8px 16px !important;
margin-top: 6px;
cursor: pointer;
}
.btn-signup { background: var(--b-card) !important; color: var(--b-ink) !important; }
.btn-point-purchase.outline { background: var(--b-pinkS) !important; color: var(--b-ink) !important; }
.login-divider {
color: var(--b-ink2) !important;
font-weight: 700;
margin: 8px 0 !important;
font-size: 11px;
text-align: center;
}
.user-points-link {
color: var(--b-pinkD) !important;
font-weight: 900 !important;
font-family: var(--b-font) !important;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
}
.user-avatar {
border: 2.5px solid var(--b-ink) !important;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--b-pinkE), var(--b-lav)) !important;
}
.refresh-btn { color: var(--b-ink2) !important; }
/* sidebar nav */
.sidebar-nav .nav-section-title {
font-family: var(--b-fontT) !important;
color: var(--b-ink2) !important;
font-weight: 900 !important;
font-size: 11px !important;
letter-spacing: 3px !important;
margin: 14px 6px 8px !important;
text-transform: uppercase;
}
.sidebar-nav .nav-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 12px !important;
border-radius: 14px !important;
color: var(--b-ink) !important;
font-family: var(--b-font) !important;
font-size: 13px !important;
font-weight: 900 !important;
text-decoration: none !important;
margin-bottom: 4px;
border: 2px solid transparent;
background: transparent !important;
text-shadow: none !important;
}
.sidebar-nav .nav-item:hover {
background: var(--b-pinkS) !important;
border-color: var(--b-pinkE);
}
.sidebar-nav .nav-item.active {
background: var(--b-pink) !important;
color: #fff !important;
border-color: var(--b-ink) !important;
box-shadow: 2px 2px 0 var(--b-ink) !important;
}
.sidebar-nav .nav-item.disabled {
opacity: 0.5;
pointer-events: none;
}
.sidebar-nav .nav-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
}
/* ──── 5. メインコンテンツ + セクションタイトル ──── */
.main-content {
background: var(--b-bg) !important;
color: var(--b-ink) !important;
padding: 28px 30px !important;
position: relative;
}
.page-content {
max-width: 1280px;
margin: 0 auto;
position: relative;
}
/* セクションヘッダー */
.section-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 18px !important;
position: relative;
}
.section-title {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
color: var(--b-ink) !important;
font-family: var(--b-fontT) !important;
background: none !important;
-webkit-text-fill-color: var(--b-ink) !important;
text-shadow: none !important;
padding: 0 0 0 28px !important;
margin: 0 !important;
line-height: 1 !important;
font-size: 11px !important;
letter-spacing: 4px !important;
font-weight: 800 !important;
position: relative;
}
.section-title::before {
/* ハートアイコン */
content: '';
position: absolute;
left: 0; top: 2px;
width: 22px; height: 22px;
background: var(--b-pink);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.section-title .ja {
display: block !important;
font-family: var(--b-fontT) !important;
font-size: 24px !important;
font-weight: 900 !important;
color: var(--b-ink) !important;
letter-spacing: 1px !important;
margin-top: 2px;
background: none !important;
-webkit-text-fill-color: var(--b-ink) !important;
}
.section-header::after {
/* セクションタイトル右側の太い ink ライン */
content: '';
flex: 1;
height: 3px;
background: var(--b-ink);
border-radius: 999px;
margin-top: 18px;
order: 9; /* 最後尾に */
}
.section-link, .section-header .btn {
background: var(--b-card) !important;
color: var(--b-ink) !important;
border: var(--b-border) !important;
border-radius: 999px !important;
padding: 6px 14px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 12px !important;
box-shadow: 2px 2px 0 var(--b-ink) !important;
text-decoration: none !important;
cursor: pointer;
order: 10; /* ::after より後 (= 最後尾) */
}
.section-link svg, .section-header .btn svg { vertical-align: middle; }
/* ──── 6. カードグリッド (stream-card / cast-card / product-card) ──── */
.stream-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
gap: 18px !important;
margin-bottom: 32px;
}
.cast-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
gap: 18px !important;
}
/* 共通カード (stream / cast / market) — 太枠+ハードシャドウ+傾き */
.stream-card,
.cast-card,
.market-product-card,
.ranking-card {
background: var(--b-card) !important;
border: var(--b-border) !important;
border-radius: 20px !important;
box-shadow: 5px 5px 0 var(--b-ink) !important;
overflow: hidden !important;
color: var(--b-ink) !important;
text-decoration: none !important;
position: relative;
transition: transform 0.12s, box-shadow 0.12s;
backdrop-filter: none !important;
}
.stream-card:nth-child(4n+1), .cast-card:nth-child(4n+1), .market-product-card:nth-child(4n+1) { transform: rotate(-0.4deg); }
.stream-card:nth-child(4n+2), .cast-card:nth-child(4n+2), .market-product-card:nth-child(4n+2) { transform: rotate(0.5deg); }
.stream-card:nth-child(4n+3), .cast-card:nth-child(4n+3), .market-product-card:nth-child(4n+3) { transform: rotate(-0.2deg); }
.stream-card:nth-child(4n+4), .cast-card:nth-child(4n+4), .market-product-card:nth-child(4n+4) { transform: rotate(0.3deg); }
.stream-card:hover,
.cast-card:hover,
.market-product-card:hover {
transform: translate(-2px, -2px) rotate(0deg);
box-shadow: 7px 7px 0 var(--b-ink) !important;
}
/* カード上のサムネ部分 */
.stream-card .stream-thumbnail,
.cast-card .cast-thumb,
.market-product-card .product-thumbnail {
border-bottom: var(--b-border) !important;
background: linear-gradient(135deg, var(--b-pinkE), var(--b-lav)) !important;
position: relative;
border-radius: 0 !important;
}
/* バッジ重ね (LIVE / view count) */
.stream-card .live-badge,
.stream-card .stream-live-badge {
background: var(--b-pink) !important;
color: #fff !important;
border: var(--b-border-thin) !important;
border-radius: 999px !important;
padding: 3px 9px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 10px !important;
box-shadow: 1.5px 1.5px 0 var(--b-ink) !important;
text-shadow: none !important;
}
.stream-card .viewer-count,
.stream-card .stream-viewer-count {
background: #fff !important;
color: var(--b-ink) !important;
border: var(--b-border-thin) !important;
border-radius: 999px !important;
padding: 3px 9px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 10px !important;
box-shadow: 1.5px 1.5px 0 var(--b-ink) !important;
}
/* カードのテキスト部分 */
.stream-card .stream-info,
.stream-card .stream-meta,
.cast-card .cast-info,
.market-product-card .product-info {
padding: 12px 14px !important;
background: var(--b-card) !important;
}
.stream-card .stream-title,
.cast-card .cast-name,
.market-product-card .product-title {
color: var(--b-ink) !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 14px !important;
line-height: 1.35 !important;
}
.stream-card .stream-broadcaster,
.cast-card .cast-bio,
.market-product-card .product-by {
color: var(--b-ink2) !important;
font-size: 12px !important;
font-weight: 700 !important;
}
.stream-card .stream-tags .stream-tag,
.cast-card .cast-tags .cast-tag {
background: var(--b-yel) !important;
color: var(--b-ink) !important;
border: var(--b-border-thin) !important;
border-radius: 999px !important;
padding: 2px 9px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 10px !important;
}
/* upcoming-card 専用 (現状: シンプルな縦リスト) */
.stream-card.upcoming-card {
padding: 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px;
}
.upcoming-when {
font-family: var(--b-fontT) !important;
font-size: 14px !important;
font-weight: 900 !important;
color: var(--b-pinkD) !important;
}
.upcoming-title {
font-family: var(--b-font) !important;
font-size: 14px !important;
font-weight: 900 !important;
color: var(--b-ink) !important;
line-height: 1.4;
}
.upcoming-desc { color: var(--b-ink2) !important; font-size: 12px !important; }
.upcoming-broadcaster {
display: flex; align-items: center; gap: 8px;
color: var(--b-ink2) !important; font-size: 12px !important; font-weight: 700 !important;
border-top: 1.5px dashed var(--b-pinkE);
padding-top: 8px;
}
.upcoming-avatar {
width: 24px; height: 24px; border-radius: 999px;
border: 1.8px solid var(--b-ink);
}
/* ランキングカード */
.ranking-grid {
display: flex !important;
flex-direction: column !important;
gap: 8px;
background: var(--b-card);
border: var(--b-border);
border-radius: 20px;
box-shadow: var(--b-shadow);
padding: 16px 16px;
}
.ranking-card,
.ranking-grid > * {
display: grid !important;
grid-template-columns: 44px 44px 1fr auto !important;
gap: 12px !important;
align-items: center !important;
padding: 8px 6px !important;
border-bottom: 1.5px dashed var(--b-pinkE) !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
border-radius: 0 !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.ranking-grid > *:last-child { border-bottom: none !important; }
.ranking-card .ranking-no,
.ranking-card .rank-no {
font-family: var(--b-fontT) !important;
font-size: 22px !important;
font-weight: 900 !important;
color: var(--b-ink2) !important;
text-align: center;
}
.ranking-card .ranking-avatar {
width: 36px; height: 36px; border-radius: 999px;
border: 1.8px solid var(--b-ink) !important;
background: linear-gradient(135deg, var(--b-pinkE), var(--b-lav));
}
.ranking-card .ranking-name,
.ranking-card .broadcaster-name {
color: var(--b-ink) !important;
font-weight: 900 !important;
font-size: 13px !important;
}
.ranking-card .ranking-points,
.ranking-card .points-value {
background: var(--b-yel) !important;
color: var(--b-ink) !important;
border: var(--b-border-thin) !important;
border-radius: 999px !important;
padding: 4px 10px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 11px !important;
box-shadow: 1.5px 1.5px 0 var(--b-ink);
}
/* ランキングタブ */
.ranking-tabs, .ranking-period-tabs {
display: flex !important;
gap: 8px !important;
margin-bottom: 16px !important;
flex-wrap: wrap;
}
.ranking-tab, .ranking-period-tab {
background: var(--b-card) !important;
color: var(--b-ink) !important;
border: var(--b-border) !important;
border-radius: 999px !important;
padding: 6px 16px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 12px !important;
box-shadow: 2px 2px 0 var(--b-ink) !important;
cursor: pointer;
}
.ranking-tab.active, .ranking-period-tab.active {
background: var(--b-pink) !important;
color: #fff !important;
}
/* ──── 7. お知らせリスト / スケジュール ──── */
.notice-board {
margin-bottom: 32px;
}
#noticeList {
background: var(--b-card);
border: var(--b-border);
border-radius: 20px;
box-shadow: var(--b-shadow);
overflow: hidden;
}
#noticeList > * {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 12px 18px !important;
border-bottom: 1.5px dashed var(--b-pinkE) !important;
color: var(--b-ink) !important;
background: transparent !important;
}
#noticeList > *:last-child { border-bottom: none !important; }
.notice-date, #noticeList .notice-date {
min-width: 100px !important;
font-family: var(--b-font) !important;
font-size: 11px !important;
color: var(--b-ink2) !important;
font-weight: 900 !important;
letter-spacing: 1px !important;
}
.notice-tag {
display: inline-block !important;
min-width: 58px !important;
text-align: center;
background: var(--b-yel) !important;
color: var(--b-ink) !important;
border: var(--b-border-thin) !important;
border-radius: 999px !important;
padding: 2px 10px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 11px !important;
}
.notice-tag.event, .notice-tag[data-kind="event"] { background: var(--b-pink) !important; color: #fff !important; }
.notice-tag.new, .notice-tag[data-kind="new"] { background: var(--b-yel) !important; }
.notice-tag.note, .notice-tag[data-kind="note"] { background: var(--b-mint) !important; }
.notice-title, #noticeList .notice-title {
flex: 1 !important;
color: var(--b-ink) !important;
font-family: var(--b-font) !important;
font-size: 14px !important;
font-weight: 700 !important;
}
/* Existing ticker (NOW STREAMING) → 既存 .ticker をマーキー風に再スタイル */
.ticker {
background: var(--b-ink) !important;
color: var(--b-yel) !important;
border: none !important;
border-top: 2px solid var(--b-ink) !important;
border-bottom: 2px solid var(--b-ink) !important;
height: 32px !important;
overflow: hidden;
position: relative;
margin-bottom: 24px;
display: flex !important;
align-items: center;
box-shadow: none !important;
border-radius: 0 !important;
}
.ticker-label {
background: var(--b-pink) !important;
color: #fff !important;
border: none !important;
border-right: 2px solid var(--b-ink) !important;
padding: 0 14px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 12px !important;
height: 100% !important;
display: flex !important;
align-items: center;
text-shadow: none !important;
flex-shrink: 0;
letter-spacing: 1px;
}
.ticker-track {
color: var(--b-yel) !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
font-size: 13px !important;
letter-spacing: 1.5px !important;
}
.ticker-track > span { color: var(--b-yel) !important; }
.ticker-track em { color: var(--b-pinkE) !important; }
.ticker-track b { color: #fff !important; }
.ticker-track i { color: var(--b-mint) !important; }
.ticker-spacer { padding-right: 30px; }
/* ──── 8. モーダル + フォーム ──── */
.modal-overlay {
background: rgba(74, 31, 46, 0.55) !important;
backdrop-filter: blur(2px);
}
.modal-content {
background: var(--b-card) !important;
border: 3px solid var(--b-ink) !important;
border-radius: 22px !important;
box-shadow: 8px 8px 0 var(--b-ink) !important;
color: var(--b-ink) !important;
overflow: hidden;
}
.modal-header {
background: var(--b-pinkS) !important;
border-bottom: 2.5px solid var(--b-ink) !important;
padding: 14px 22px !important;
display: flex; align-items: center; justify-content: space-between;
}
.modal-title {
font-family: var(--b-fontT) !important;
font-weight: 900 !important;
color: var(--b-ink) !important;
font-size: 18px !important;
}
.modal-close {
background: var(--b-card) !important;
color: var(--b-ink) !important;
border: 2px solid var(--b-ink) !important;
border-radius: 999px !important;
width: 32px; height: 32px;
font-size: 18px !important;
font-weight: 900 !important;
cursor: pointer;
box-shadow: 1.5px 1.5px 0 var(--b-ink);
}
.modal-body, .modal-form { padding: 20px 22px !important; }
.modal-actions {
display: flex; gap: 10px; justify-content: flex-end;
padding: 12px 22px 18px;
border-top: 1.5px dashed var(--b-pinkE);
}
.form-group { margin-bottom: 14px; }
.form-label {
font-family: var(--b-fontT) !important;
font-weight: 900 !important;
color: var(--b-ink) !important;
font-size: 13px !important;
display: block;
margin-bottom: 6px;
}
.form-hint {
color: var(--b-ink2) !important;
font-size: 11px !important;
font-weight: 700;
margin-top: 4px;
}
/* 汎用 .btn / .btn-primary / .btn-secondary を bubblegum 化 */
.btn {
background: var(--b-card) !important;
color: var(--b-ink) !important;
border: var(--b-border) !important;
border-radius: 999px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
box-shadow: 3px 3px 0 var(--b-ink) !important;
text-shadow: none !important;
padding: 8px 16px !important;
cursor: pointer;
letter-spacing: 0.5px;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--b-ink) !important; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--b-ink) !important; }
.btn-primary { background: var(--b-pink) !important; color: #fff !important; }
.btn-secondary { background: var(--b-card) !important; color: var(--b-ink) !important; }
.btn-success { background: var(--b-mint) !important; color: var(--b-ink) !important; }
.btn-danger { background: var(--b-pinkD) !important; color: #fff !important; }
.btn-warn { background: var(--b-yel) !important; color: var(--b-ink) !important; }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ──── 9. フッター ──── */
.footer-burrow {
background: var(--b-ink) !important;
color: #fff !important;
padding: 24px 36px !important;
margin-top: 40px !important;
border-top: 4px solid var(--b-pink) !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.footer-burrow-links {
display: flex; flex-wrap: wrap; gap: 18px;
}
.footer-burrow-link {
color: #fff !important;
font-family: var(--b-font) !important;
font-weight: 800 !important;
font-size: 12px !important;
text-decoration: none !important;
opacity: 0.85;
}
.footer-burrow-link:hover { color: var(--b-yel) !important; opacity: 1; }
.footer-burrow > div:last-child {
color: var(--b-yel) !important;
font-family: var(--b-fontT) !important;
font-weight: 900 !important;
margin-top: 14px;
font-size: 12px;
}
/* ──── 10. 背景デコレーション (シール散らし) ──── */
.b-stickers {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.b-sticker {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.85;
}
/* セクション間の cute セパレーター */
.b-section-separator {
height: 14px;
background: radial-gradient(var(--b-pinkS) 2px, transparent 2.5px) 0 0 / 16px 16px;
margin: 14px 0;
opacity: 0.6;
}
/* ──── 11. アニメーション ──── */
@keyframes bpulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 122, 0.6); }
70% { box-shadow: 0 0 0 7px rgba(255, 45, 122, 0); }
}
@keyframes bmarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ──── 12. レスポンシブ ──── */
/* v0.7.5.m+: タブレット帯 (狭デスクトップ含む) — カードシャドウ/余白を一段圧縮 */
@media (max-width: 1024px) {
.b-frame { box-shadow: 3px 3px 0 var(--b-ink) !important; }
.b-btn { padding: 7px 14px !important; box-shadow: 2px 2px 0 var(--b-ink) !important; }
.main-content { padding: 18px 18px !important; }
.stream-grid, .cast-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 14px !important;
}
.stream-card, .cast-card, .market-product-card {
transform: none !important; /* タブレット以下では傾き禁止 */
}
}
@media (max-width: 768px) {
/* v0.7.5.d+: モバイルは header 80px に圧縮 + --header-height も合わせて 80px に */
:root { --header-height: 80px !important; }
.top-bar {
height: 80px !important;
min-height: 80px !important;
padding: 8px 14px !important;
}
.top-bar .logo-banner-img,
.top-bar .logo img {
height: 56px !important;
max-width: 200px;
max-height: 56px;
}
.b-now-badge { display: none; }
.main-content { padding: 16px 14px !important; }
.stream-grid, .cast-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
gap: 12px !important;
}
.stream-card, .cast-card, .market-product-card {
transform: none !important;
box-shadow: 3px 3px 0 var(--b-ink) !important;
}
.section-title { font-size: 10px !important; padding-left: 24px !important; }
.section-title .ja { font-size: 18px !important; }
.section-title::before { width: 18px; height: 18px; }
.ranking-grid { padding: 10px; }
.ranking-card, .ranking-grid > * {
grid-template-columns: 32px 36px 1fr auto !important;
gap: 8px !important;
}
.footer-burrow { padding: 18px 16px !important; }
/* v0.7.5.m+: モーダル mobile — 横余白 / 角丸 / shadow をモバイル向けに */
.modal-content, .modal-dialog, .modal-body {
border-radius: 16px !important;
box-shadow: 4px 4px 0 var(--b-ink) !important;
max-width: calc(100vw - 24px) !important;
}
/* v0.7.5.m+: ボタン群が横一列で溢れる対策 */
.b-btn { padding: 6px 12px !important; font-size: 12px !important; }
}
/* v0.7.5.m+: 極小モバイル (iPhone SE 等 ≤480px) ── 更にタイト */
@media (max-width: 480px) {
:root { --header-height: 64px !important; }
.top-bar { height: 64px !important; min-height: 64px !important; padding: 6px 10px !important; }
.top-bar .logo-banner-img, .top-bar .logo img {
height: 44px !important; max-width: 160px; max-height: 44px;
}
.main-content { padding: 12px 10px !important; }
.stream-grid, .cast-grid {
grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important;
gap: 8px !important;
}
.section-title { font-size: 9px !important; padding-left: 20px !important; }
.section-title .ja { font-size: 16px !important; }
.section-title::before { width: 14px; height: 14px; }
.b-btn { padding: 5px 10px !important; font-size: 11px !important; }
.footer-burrow { padding: 14px 10px 18px !important; }
}
/* ──── X. 既存ローダー (ハムスター) を保留: 色だけ調整 ──── */
.hamster-loader { color: var(--b-ink) !important; }
.hamster-loader-text {
color: var(--b-ink2) !important;
font-family: var(--b-font) !important;
font-weight: 800;
}
/* 空状態カード — v0.7.5.c+: [class*="empty"] は危険 (widget-overlay-empty 等にも当たる)。
ホワイトリスト方式に変更し、明示的に列挙したクラスだけスキン替えする。 */
.empty-favorites, .no-rooms, .no-streams, .schedule-empty, .banned-empty {
background: var(--b-pinkS) !important;
border: var(--b-border) !important;
border-radius: 20px !important;
box-shadow: var(--b-shadow) !important;
padding: 40px 28px !important;
text-align: center !important;
color: var(--b-ink) !important;
font-family: var(--b-font) !important;
font-weight: 800 !important;
}
.empty-favorites svg { color: var(--b-pink) !important; }
.empty-favorites > div { font-family: var(--b-fontT); font-size: 18px; font-weight: 900; color: var(--b-ink); margin-top: 8px; }
/* キャスト検索 */
.cast-search {
display: flex; gap: 10px; align-items: center;
margin-bottom: 14px;
}
.cast-search-input {
flex: 1;
background: var(--b-card) !important;
color: var(--b-ink) !important;
border: var(--b-border) !important;
border-radius: 999px !important;
padding: 8px 16px !important;
font-family: var(--b-font) !important;
font-weight: 700 !important;
box-shadow: 2px 2px 0 var(--b-ink) !important;
}
.cast-search-input::placeholder { color: var(--b-ink3) !important; }
.filter-btn {
background: var(--b-pink) !important;
color: #fff !important;
border: var(--b-border) !important;
border-radius: 999px !important;
padding: 8px 16px !important;
font-family: var(--b-font) !important;
font-weight: 900 !important;
box-shadow: 2px 2px 0 var(--b-ink) !important;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.cast-count {
color: var(--b-ink2) !important;
font-weight: 700 !important;
font-size: 12px !important;
margin-bottom: 14px;
}
.cast-count b { color: var(--b-pinkD) !important; }
/* ロゴ横バージョンバッジ (既存) — 色だけ ink 系に */
.version-badge {
color: var(--b-ink3) !important;
background: var(--b-pinkS) !important;
padding: 1px 6px !important;
border-radius: 999px;
margin-left: 6px !important;
border: 1px solid var(--b-pinkE);
}
/* v0.7.5.q+: タクソノミー フィルターバー (URL ?audience=X&genre=Y で発動) */
.taxonomy-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px 14px;
margin-bottom: 14px;
background: var(--b-pinkS);
border: 2.5px solid var(--b-ink);
border-radius: 14px;
box-shadow: 3px 3px 0 var(--b-ink);
font-family: var(--b-font);
}
.taxonomy-filter-bar .filter-label {
font-weight: 900;
color: var(--b-ink);
font-size: 13px;
}
.taxonomy-filter-bar .filter-chip {
display: inline-flex;
align-items: center;
background: var(--b-card);
color: var(--b-ink);
border: 2px solid var(--b-ink);
border-radius: 999px;
padding: 4px 10px;
font-weight: 800;
font-size: 12px;
text-decoration: none !important;
box-shadow: 2px 2px 0 var(--b-ink);
transition: transform 0.08s, box-shadow 0.08s;
}
.taxonomy-filter-bar .filter-chip:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--b-ink);
}
.taxonomy-filter-bar .filter-chip--clear {
background: var(--b-ink) !important;
color: #fff !important;
}
/* v0.7.5.q+: profile/watch ページのカテゴリ chip (クリック可能) */
.profile-tag,
.broadcaster-tag {
display: inline-flex !important;
align-items: center;
margin: 0 4px 4px 0;
padding: 3px 9px !important;
background: var(--b-pinkS) !important;
color: var(--b-ink) !important;
border: 1.5px solid var(--b-pinkE) !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 800 !important;
text-decoration: none !important;
transition: background 0.12s, border-color 0.12s;
}
.profile-tag:hover,
.broadcaster-tag:hover {
background: var(--b-pinkE) !important;
border-color: var(--b-pink) !important;
}
.profile-tag--audience, .broadcaster-tag--audience {
background: var(--b-yelS) !important;
border-color: var(--b-yel) !important;
}
.profile-tag--attribute, .broadcaster-tag--attribute {
background: var(--b-pinkS) !important;
border-color: var(--b-pinkE) !important;
}
.profile-tag--genre, .broadcaster-tag--genre {
background: #d6f5e8 !important;
border-color: var(--b-mint) !important;
}
.profile-tag--tag, .broadcaster-tag--tag {
background: #efe3ff !important;
border-color: var(--b-lav) !important;
}
/* v0.7.5.s+: 配信トップの絞り込みパネル (BROWSE) */
.taxonomy-browse-section .section-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.taxonomy-browse-panel {
background: var(--b-paper);
border: 2.5px dashed var(--b-pinkE);
border-radius: 18px;
padding: 14px 16px;
margin-top: 10px;
}
.taxonomy-browse-panel.hidden { display: none; }
.taxonomy-browse-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
border-bottom: 1px dashed var(--b-pinkE);
}
.taxonomy-browse-row:last-of-type { border-bottom: none; }
.taxonomy-browse-label {
flex: 0 0 110px;
font-family: var(--b-fontT);
font-weight: 900;
color: var(--b-ink);
font-size: 13px;
line-height: 28px;
}
.taxonomy-browse-chips {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.browse-chip {
display: inline-flex;
align-items: center;
background: var(--b-card);
color: var(--b-ink);
border: 2px solid var(--b-ink);
border-radius: 999px;
padding: 4px 11px;
font-family: var(--b-font);
font-weight: 800;
font-size: 12px;
text-decoration: none !important;
box-shadow: 2px 2px 0 var(--b-ink);
transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
.browse-chip:hover {
transform: translate(-1px, -1px);
box-shadow: 3px 3px 0 var(--b-ink);
}
.browse-chip.selected {
background: var(--b-pink);
color: #fff;
}
.taxonomy-browse-hint {
margin-top: 10px;
font-size: 11px;
color: var(--b-ink2);
text-align: right;
}
@media (max-width: 768px) {
.taxonomy-browse-row { flex-direction: column; gap: 4px; }
.taxonomy-browse-label { flex: 0; line-height: 1.4; }
}
/* v0.7.5.u+: BROWSE セクションの選択中サマリー (パネル閉でも常時表示) */
.taxonomy-browse-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 8px 0 10px;
padding: 8px 12px;
background: var(--b-pinkS);
border: 2px solid var(--b-ink);
border-radius: 14px;
box-shadow: 2px 2px 0 var(--b-ink);
font-family: var(--b-font);
}
.browse-summary-label {
font-weight: 900;
font-size: 12px;
color: var(--b-ink);
margin-right: 4px;
}
.browse-summary-chip {
display: inline-flex;
align-items: center;
background: var(--b-card);
color: var(--b-ink);
border: 1.5px solid var(--b-ink);
border-radius: 999px;
padding: 3px 9px;
font-size: 11px;
font-weight: 800;
text-decoration: none !important;
box-shadow: 1.5px 1.5px 0 var(--b-ink);
transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
.browse-summary-chip:hover {
transform: translate(-1px, -1px);
box-shadow: 2px 2px 0 var(--b-ink);
background: var(--b-pinkE);
}
.browse-summary-chip--audience { background: var(--b-yelS); }
.browse-summary-chip--attribute { background: var(--b-pinkS); }
.browse-summary-chip--genre { background: #d6f5e8; }
.browse-summary-chip--tag { background: #efe3ff; }
.browse-summary-chip--clear {
background: var(--b-ink) !important;
color: #fff !important;
margin-left: auto;
}
/* v0.8.0.d+: /?tab=market リダイレクトカード — キュリオマートが独立した告知 */
.market-redirect-card {
background: var(--b-yelS);
border: 2.5px solid var(--b-ink);
border-radius: 18px;
box-shadow: 4px 4px 0 var(--b-ink);
padding: 32px 24px;
text-align: center;
max-width: 560px;
margin: 24px auto;
}
.market-redirect-emoji {
font-size: 48px;
margin-bottom: 12px;
line-height: 1;
}
.market-redirect-title {
font-family: var(--b-fontT);
font-weight: 900;
color: var(--b-pinkD);
margin: 0 0 8px;
font-size: 20px;
}
.market-redirect-text {
color: var(--b-ink);
font-weight: 700;
margin: 0 0 22px;
line-height: 1.6;
font-size: 14px;
}
.market-redirect-btn {
display: inline-block !important;
padding: 12px 28px !important;
font-size: 14px !important;
}