/* NOTE: site-chrome.css は各ページのがで並列ロードする（pageHead）。以前ここにあった @import url("./site-chrome.css") は、そのと二重 + レンダリングブロッキング + シリアル取得だったため削除した。Google Fonts もの preload(as=style)+noscript で非ブロッキングロードする。 */ :root { color-scheme: dark; /* Brand base — top page と全下層で共有する地色。ページごとに --bg をインラインで上書きしない。詳細は docs/design_language.md §4.1 / Decision Register 2026-05-30。 */ --bg: #05070b; --bg-soft: #0a0e13; --ink: #fbfbff; --muted: #c8cfdd; --soft: #aeb7c8; --line: rgba(255,255,255,.22); --panel: rgba(15,18,30,.9); --panel-soft: rgba(255,255,255,.08); --accent: #d41465; --accent-2: #12d6cb; --group-accent: var(--accent); --group-accent-2: var(--accent-2); --group-accent-3: #7c5cff; --group-accent-rgb: 212,20,101; --group-accent-2-rgb: 18,214,203; --group-accent-3-rgb: 124,92,255; --group-hero-text-mid: #ffd1e4; --group-hero-text-end: #a6f0ea; --shadow: 0 24px 60px rgba(0,0,0,.36); /* D-2: achromatic 2層 elevation。ネオン(accent)グローではなく中立な影で奥行きを出す。 --elev-1=静止カード / --elev-2=主役カード・hover で持ち上げる面。アンビエント+キーの2層。 */ --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 6px 16px rgba(0,0,0,.22); --elev-2: 0 2px 6px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.34); --radius: 8px; } /* `*` は疑似要素にマッチしないため、::before/::after だけ content-box のままになり、 width＋padding＋border を持つ疑似要素の実寸が箱からはみ出していた（2026-07-31: カレンダーの「誕生日」バッジが本文テキストに重なる事象の原因）。 */ *, *::before, *::after { box-sizing: border-box; } /* HTML5 [hidden] 属性のセマンティクスを保証する。 .starter-library-item / .calendar-view-panel など多数の class に display: grid/flex/block が author CSS で当たっており、 UA default の `[hidden] { display: none }` を specificity 同等で上書きしてしまうため、フィルター JS が `el.hidden = true` を立てても視覚上は隠れない問題が発生する。全てのフィルター付き一覧（starter-songs / calendar / groups / members / videos 等）の表示一貫性のため、ここで強制的に保証する。 */ [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; /* Brand base body — top page (top-page.css) と同じエディトリアル深部を共有。 */ background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 56%, var(--bg) 100%), var(--bg); color: var(--ink); font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: .08; mix-blend-mode: overlay; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%); } /* 全ページ共通の控えめなビネット。四隅をわずかに沈めて"面"に奥行きを与える。 */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(130% 100% at 50% 30%, transparent 58%, rgba(0,0,0,.05) 100%); } a { color: inherit; } .page { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; /* overflow-x: hidden だと CSS仕様で overflow-y が auto に強制変換され、.page 全体が縦スクロールコンテナ化して数pxの"スクロールできない内部縦スクロールバー"が出る。 clip は横を同じくクリップしつつ、縦を visible のまま保つ（副作用なし）。 */ overflow-x: clip; } .page[data-group-theme] { position: relative; isolation: isolate; } .page[data-group-theme]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 40rem at 78% -6%, rgba(var(--group-accent-rgb), .13), transparent 60%), radial-gradient(48rem 36rem at 0% 8%, rgba(var(--group-accent-2-rgb), .07), transparent 64%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 78%); mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 78%); } @supports (content-visibility: auto) { .page > section.surface, .page > main > section.surface, .grid > section.surface, .grid > div > section.surface, .card-list > .card, .song-grid > .card, .song-grid > .video-card, .member-card, .home-section, .home-card { content-visibility: auto; contain-intrinsic-size: 1px 420px; } .hero, .breadcrumb, .site-footer, .sn-search-overlay { content-visibility: visible; } } .button-link, .card { color: inherit; text-decoration: none; } .button-link { display: inline-flex; align-items: center; justify-content: center; min-width: 0; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.1); border-radius: 7px; padding: 10px 13px; text-align: center; overflow-wrap: anywhere; backdrop-filter: blur(16px); box-shadow: 0 0 0 rgba(0,0,0,0); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease; will-change: transform; } .btn-primary, .btn-ghost, .btn-text, .chip { display: inline-flex; align-items: center; justify-content: center; min-width: 0; text-decoration: none; } .btn-primary { gap: 6px; min-height: 42px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 9px; color: #fff; font-weight: 800; /* 2026-07-31: グラデ2色＋発光をやめ、フラットな単色アクセントへ（design_language 2026-06-28「ネオンのマゼンタ×シアングラデボタン禁止」/ 2026-06-17「ネオングロー撤廃→achromatic elevation」）。 */ background: rgba(var(--group-accent-rgb), 1); box-shadow: var(--elev-1); } .btn-primary:hover, .btn-primary:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .38); background: rgba(var(--group-accent-rgb), 1); filter: brightness(1.06); box-shadow: var(--elev-2); } .btn-ghost { gap: 6px; min-height: 40px; padding: 9px 15px; border: 1px solid rgba(var(--group-accent-rgb), .44); border-radius: 9px; color: rgba(255, 255, 255, .92); font-weight: 750; background: rgba(var(--group-accent-rgb), .08); box-shadow: none; } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: rgba(var(--group-accent-rgb), .68); background: rgba(var(--group-accent-rgb), .14); color: #fff; } .btn-text { gap: 4px; padding: 0; border: 0; border-radius: 0; color: rgba(var(--group-accent-rgb), 1); font-weight: 800; background: transparent; box-shadow: none; } .btn-text::after { content: "→"; font-size: .95em; transition: transform 160ms ease; } .btn-text:hover::after, .btn-text:focus-visible::after { transform: translateX(3px); } .chip { gap: 5px; min-height: 28px; padding: 4px 10px; border: 1px solid rgba(var(--group-accent-rgb), .28); border-radius: 999px; color: rgba(255, 255, 255, .82); background: rgba(var(--group-accent-rgb), .08); box-shadow: none; font-size: 12px; font-weight: 750; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; } a.chip:hover, a.chip:focus-visible { color: #fff; border-color: rgba(var(--group-accent-rgb), .48); background: rgba(var(--group-accent-rgb), .13); } /* カード全体がリンクの場合の内部CTA。塗りボタンにせず、矢印付きの軽量テキストリンクにする（クリック可能カード内の二重強調＝「リンク内ボタン」を避ける）。外部ストア等の独立CTAは .button-link のまま。 */ .card-go { display: inline-flex; align-items: center; align-self: start; gap: 4px; margin-top: 2px; padding: 0; font-size: 14px; font-weight: 700; color: rgba(var(--group-accent-rgb, 120,140,255), 1); background: none; border: 0; letter-spacing: .01em; transition: gap 160ms ease, opacity 160ms ease; } .card:hover .card-go, a.card:hover .card-go { gap: 8px; } /* card-go を含むカード（次に見る3ページ / 公式情報 / 購入ガイド）は flex 縦積みにし、本文(p)の長さが違っても card-go を最下部へ押し下げて、行内のリンク高さを揃える。 */ .next-page-card, #member-official-entry .card, .affiliate-section .purchase-guide-card { display: flex; flex-direction: column; } .next-page-card .card-go, #member-official-entry .card .card-go, .affiliate-section .purchase-guide-card .card-go { margin-top: auto; padding-top: 8px; } /* 2026-05-30: hover は持ち上げ＋発光（やや古い）をやめ、フラットにアクセント縁＋微背景。 */ .button-link:hover { border-color: rgba(var(--group-accent-rgb),.5); background: rgba(255,255,255,.14); box-shadow: none; } .button-link.btn-primary:hover, .button-link.btn-primary:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .38); background: linear-gradient(135deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .24)), linear-gradient(135deg, rgba(var(--group-accent-rgb), 1), rgba(var(--group-accent-2-rgb), .9)); box-shadow: 0 12px 28px rgba(var(--group-accent-rgb), .34); } .button-link.btn-ghost:hover, .button-link.btn-ghost:focus-visible { color: #fff; border-color: rgba(var(--group-accent-rgb), .68); background: rgba(var(--group-accent-rgb), .14); } .hero-actions .button-link[data-group-theme], .identity-switcher .button-link[data-group-theme] { border-color: rgba(var(--group-accent-rgb), 0.5); background: linear-gradient(135deg, rgba(var(--group-accent-rgb), 0.22), rgba(var(--group-accent-2-rgb), 0.12)), rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(var(--group-accent-rgb), 0.12); } .hero-actions .button-link.primary[data-group-theme] { background: linear-gradient(135deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.28)), linear-gradient(135deg, rgba(var(--group-accent-rgb), 0.95), rgba(var(--group-accent-2-rgb), 0.82)); border-color: rgba(var(--group-accent-3-rgb), 0.48); } .hero-actions .button-link[data-group-theme]:hover, .identity-switcher .button-link[data-group-theme]:hover { border-color: rgba(var(--group-accent-3-rgb), 0.62); background: linear-gradient(135deg, rgba(var(--group-accent-rgb), 0.32), rgba(var(--group-accent-2-rgb), 0.2)), rgba(255, 255, 255, 0.1); } .button-link:active { transform: translateY(0); } .button-link:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(18, 214, 203, 0.72); outline-offset: 3px; } .primary { background: linear-gradient(135deg, rgba(0,0,0,.54), rgba(0,0,0,.56)), linear-gradient(135deg, rgba(var(--group-accent-rgb), .98), rgba(var(--group-accent-2-rgb), .9)); border-color: rgba(255,255,255,.32); box-shadow: var(--elev-1); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.38); } .hero { width: 100%; max-width: 100%; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(120deg, rgba(var(--group-accent-rgb),.14), transparent 40%), linear-gradient(290deg, rgba(var(--group-accent-2-rgb),.12), transparent 44%), var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(150%); margin-bottom: 16px; } /* 単純な一覧・情報ハブ（debut-years / nationalities / solo / songs / units / glossary / methodology / news など）のページ先頭ヒーローを枠なしに統一し、トップ / カレンダー / メンバー一覧 / グループ一覧と語彙を揃える。グループ詳細（.hero.group-hero-with-visual / .group-hero-with-video）とメンバー詳細（.static-hero）、横断一覧の hub-hero は除外し、テーマ付き詳細ヒーローには一切影響させない。 .page スコープによりトップページ（.page なし）も対象外。 */ .page .hero:not(.hub-hero):not(.group-hero-with-visual):not(.group-hero-with-video):not(.static-hero) { border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; padding: 4px 0 12px; } /* ダッシュボード型ヒーロー（generations/<世代> / videos/<種別> / companies/ / nationalities/<国> / debut-years/<年> などの絞り込み一覧）も枠なしへ統一。枠は各ページのインライン