/* ========================================================================= Site Design Tokens ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* Brand JP gothic — BIZ UDGothic (uploaded by brand) */ @font-face { font-family: 'BIZ UDGothic'; src: url('fonts/BIZUDGothic-Regular.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* ---------- Backgrounds (dark elevation stack) ---------- */ --bg-page: #0A0A0C; --bg-card: #121216; --bg-card-2: #1A1A20; --bg-card-hover: #26262E; --bg-input: #16161B; /* ---------- Foregrounds ---------- */ --fg-1: #F5F5F7; /* primary text */ --fg-2: #A8A8B0; /* secondary, labels */ --fg-3: #6B6B75; /* tertiary, captions, 品番 */ --fg-4: #3F3F47; /* disabled / placeholder */ /* ---------- Borders ---------- */ --border-1: #26262E; --border-2: #1A1A20; /* ---------- Accent (Pink — default theme A) ---------- */ --accent: #FF1B6B; --accent-hover: #FF4787; --accent-press: #E0145A; --accent-soft: rgba(255, 27, 107, 0.15); --accent-ring: rgba(255, 27, 107, 0.4); /* ---------- Semantic ---------- */ --star: #FFB938; --success: #2BD96B; --danger: #FF4747; /* ---------- Type families ---------- */ --font-jp: 'BIZ UDGothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Yu Gothic', 'Meiryo', sans-serif; --font-en: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Inter', ui-monospace, 'SFMono-Regular', monospace; /* ---------- Type scale (px) ---------- */ --fs-caption: 11px; --fs-small: 13px; --fs-body: 14px; --fs-body-lg: 16px; --fs-h3: 20px; --fs-h2: 28px; --fs-h1: 36px; --fs-hero: 48px; /* ---------- Line heights ---------- */ --lh-tight: 1.2; --lh-body: 1.5; --lh-numeric: 1.0; /* ---------- Spacing (8px base, but mostly 4 / 8) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ---------- Radii ---------- */ --r-button: 2px; --r-card: 4px; --r-pill: 999px; /* ---------- Layout ---------- */ --nav-h: 56px; --content-max: 1440px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --d-fast: 80ms; --d-base: 120ms; --d-slow: 200ms; } /* ---------- Theme variants (apply on or ) ---------- */ [data-accent="pink"] { --accent: #FF1B6B; --accent-hover: #FF4787; --accent-press: #E0145A; --accent-soft: rgba(255, 27, 107, 0.15); --accent-ring: rgba(255, 27, 107, 0.4); } [data-accent="red"] { --accent: #FF2D2D; --accent-hover: #FF5A5A; --accent-press: #D91F1F; --accent-soft: rgba(255, 45, 45, 0.15); --accent-ring: rgba(255, 45, 45, 0.4); } [data-accent="purple"] { --accent: #B026FF; --accent-hover: #C24EFF; --accent-press: #9100E0; --accent-soft: rgba(176, 38, 255, 0.15); --accent-ring: rgba(176, 38, 255, 0.4); } /* ========================================================================= Semantic element styles ========================================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--fg-1); font-family: var(--font-jp); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: var(--lh-tight); letter-spacing: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0; } a { color: inherit; text-decoration: none; transition: color var(--d-fast) var(--ease-out); } a:hover { color: var(--accent); } /* numerals — always tabular */ .num, .price, .runtime, .date, .count, .id { font-family: var(--font-en); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* utility */ .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .accent { color: var(--accent); } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-4); border: none; border-radius: var(--r-button); font-family: var(--font-jp); font-size: var(--fs-body); font-weight: 700; cursor: pointer; transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { background: var(--accent-press); } .btn-cta { height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-body-lg); background: var(--accent); color: #fff; width: 100%; } .btn-cta:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; color: var(--fg-1); border: 1px solid var(--border-1); } .btn-ghost:hover { background: var(--bg-card-hover); border-color: var(--accent); color: var(--accent); } /* inputs */ .input { height: 40px; padding: 0 var(--sp-3); background: var(--bg-input); border: 1px solid var(--border-1); border-radius: var(--r-button); color: var(--fg-1); font-family: var(--font-jp); font-size: var(--fs-body); } .input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } /* tabs (kana tabs etc) */ .tab-row { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border-1); overflow-x: auto; scrollbar-width: none; } .tab-row::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; padding: var(--sp-3) var(--sp-4); color: var(--fg-2); font-weight: 500; font-size: var(--fs-body-lg); border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); background: transparent; border-top: none; border-left: none; border-right: none; font-family: var(--font-jp); } .tab:hover { color: var(--fg-1); } .tab[aria-selected="true"], .tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* card primitives */ .card { background: var(--bg-card); border-radius: var(--r-card); overflow: hidden; transition: transform var(--d-base) var(--ease-out), outline-color var(--d-base) var(--ease-out); outline: 2px solid transparent; outline-offset: 0; } .card:hover { transform: scale(1.02); outline-color: var(--accent); z-index: 2; position: relative; } /* placeholder package "image" */ .pkg { position: relative; background: var(--bg-card-2); background-image: linear-gradient(135deg, transparent 49.4%, var(--accent-soft) 49.4%, var(--accent-soft) 50.6%, transparent 50.6%); display: flex; align-items: flex-end; padding: var(--sp-2); color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.05em; } .pkg::after { content: attr(data-id); position: absolute; bottom: 6px; left: 8px; color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; } /* ranking badge */ .rank-badge { position: absolute; top: 0; left: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-page); color: var(--fg-1); font-family: var(--font-en); font-weight: 700; font-size: var(--fs-body-lg); z-index: 2; } .rank-badge.rank-1 { background: var(--accent); color: #fff; } .rank-badge.rank-2, .rank-badge.rank-3 { color: var(--accent); } /* star rating */ .stars { display: inline-flex; align-items: center; gap: 2px; color: var(--star); font-size: var(--fs-body); letter-spacing: 0; }