/* ============================================================ base.css — :root variables / reset / common layout 全業種共通。業種変数は vertical-loader.php が に注入する ============================================================ */ /* ===== Reset ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } body { font-family: 'Noto Sans JP', sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; } a { text-decoration: none; color: inherit; } img { max-width: 100%; } button { font-family: inherit; } /* ===== Design Tokens ===== */ :root { /* ブランド色（vertical-loader.php が業種config からCSS変数を上書き） */ --primary: var(--vertical-primary, #d4567a); --primary-light: var(--vertical-primary-light, #e8839e); --primary-dark: var(--vertical-primary-dark, #b54360); --primary-bg: var(--vertical-primary-bg, #fdf0f3); --primary-bg-strong: var(--vertical-primary-bg-strong, #f5d5df); --primary-rgb: var(--vertical-primary-rgb, 212, 86, 122); --text-on-primary: var(--vertical-text-on-primary, #ffffff); /* 共通色（業種で変わらない） */ --text: #222; --text-mid: #555; --text-muted: #888; --text-subtle: #aaa; --bg: #ffffff; --bg-muted: #f8f8f8; --bg-soft: #faf7f9; --border: #e8e8e8; --border-soft: #f0e0e4; /* スペーシング（4pxベース） */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* 角丸 */ --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 50px; --radius-full: 9999px; /* 影 */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.12); --shadow-primary: 0 2px 8px rgba(var(--primary-rgb), 0.3); /* フォントサイズ */ --font-xs: 11px; --font-sm: 13px; --font-base: 14px; --font-md: 15px; --font-lg: 16px; --font-xl: 18px; --font-2xl: 24px; --font-3xl: 28px; /* レイアウト */ --header-height: 64px; --container-max: 1280px; --container-md: 1100px; --container-sm: 900px; } /* ===== Section Common ===== */ .section { padding: var(--space-20) var(--space-5); max-width: var(--container-max); margin: 0 auto; } .section--gray { background: var(--bg-muted); } .section--gray .section { padding: var(--space-20) var(--space-5); } .section__header { text-align: center; margin-bottom: var(--space-12); } .section__label { display: inline-block; font-size: var(--font-sm); font-weight: 700; color: var(--primary); background: var(--primary-bg); padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); margin-bottom: var(--space-3); } .section__title { font-size: var(--font-3xl); font-weight: 900; color: var(--text); } .section__subtitle { font-size: var(--font-md); color: var(--text-muted); margin-top: var(--space-2); } /* ===== 2-Col Layout (list pages) ===== */ .main { padding: 0 0 var(--space-20); } .list-content { padding: 0; } .list-content__inner { max-width: var(--container-max); margin: 0 auto; display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-6) var(--space-5) var(--space-20); } .list-content__sidebar { width: 260px; flex-shrink: 0; position: sticky; top: calc(var(--header-height) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-4); } .list-content__main { flex: 1; min-width: 0; } @media (max-width: 1024px) { .list-content__inner { flex-direction: column; padding: var(--space-4) var(--space-4) var(--space-12); gap: var(--space-4); } .list-content__sidebar { width: 100%; position: static; } } /* ===== ヘッダー高さぶんのスペーサー（固定ヘッダー下に置く） ===== */ .has-fixed-header { padding-top: var(--header-height); }