/* ============================================================ Wataru Design System — tokens.css (SSOT: 唯一の真実の源) ------------------------------------------------------------ 使い方: … 遊牧民リゾート(既定) … 建設ネイビー … ダークテックルール: - コンポーネントに生のhexを書かない。必ず役割変数(--bg, --brand…)を使う - 色を変えたい時はこのファイルだけを編集する出典: 260619_website(遊牧民ラボ) を昇華、260628_construction-3d の配色を統合 ============================================================ */ /* ---------- 共通スケール(全テーマ共有) ---------- */ :root { /* フォント(Google Fonts は HTML 側で読み込み、ここはフォールバック込み定義) */ --font-display: "Zen Maru Gothic", "Outfit", "Hiragino Maru Gothic ProN", system-ui, sans-serif; --font-body: "Zen Kaku Gothic New", "Outfit", "Hiragino Kaku Gothic ProN", system-ui, sans-serif; --font-latin: "Outfit", "Zen Kaku Gothic New", system-ui, sans-serif; /* 流体タイポグラフィ(モバイル→PCで自動スケール、メディアクエリ不要) */ --fs-eyebrow: clamp(.72rem, .68rem + .2vw, .82rem); --fs-small: clamp(.82rem, .8rem + .15vw, .9rem); --fs-body: clamp(1rem, .96rem + .25vw, 1.1rem); --fs-lead: clamp(1.12rem, 1rem + .6vw, 1.4rem); --fs-h3: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); --fs-h2: clamp(1.9rem, 1.4rem + 2.4vw, 3.4rem); --fs-h1: clamp(2.6rem, 1.8rem + 4.4vw, 5.6rem); --fs-mega: clamp(3.2rem, 1.8rem + 7vw, 8rem); /* 行間(見出しは詰める、本文はゆったり = 黄金比1.67を意識した対比) */ --lh-heading: 1.18; --lh-body: 1.85; --ls-heading: -.01em; --ls-eyebrow: .22em; /* 余白スケール(8pxリズム) */ --sp-1: .5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.5rem; /* 24px */ --sp-4: 2.5rem; /* 40px */ --sp-5: 4rem; /* 64px */ --sp-6: 6rem; /* 96px */ --sp-7: 9rem; /* 144px */ --section-y: clamp(5rem, 3rem + 8vw, 11rem); /* コンテナ幅 */ --maxw: 1200px; --maxw-narrow: 820px; /* 角丸 */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; /* アニメーション時間とイージング */ --t-fast: .25s; --t-mid: .45s; --t-slow: .9s; --ease: cubic-bezier(.45, .05, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* z-index 階層(この5段以外を勝手に増やさない) */ --z-base: 0; --z-card: 10; --z-nav: 100; --z-overlay: 500; --z-toast: 1000; /* ナビ高さ */ --nav-h: 76px; } /* ============================================================ テーマ1: 遊牧民リゾート(既定) — Wataruの署名配色ラグーン(海) × サンド(白砂) × コーラル(CTA) ============================================================ */ :root, [data-theme="resort"] { /* 原色パレット */ --lagoon-50: #eafaf8; --lagoon-100: #c9f1ee; --lagoon-300: #4fd3cc; --lagoon-400: #28bdb8; --lagoon-500: #129ca0; --lagoon-600: #0d7e87; --lagoon-800: #0a4d59; --lagoon-900: #073b4c; --sand-50: #fdfbf6; --sand-100: #faf5ea; --sand-200: #f3e9d6; --coral: #ff7a59; --coral-dk: #f0603d; --sun: #ffc857; /* 役割変数(コンポーネントはこちらだけを参照する) */ --bg: var(--sand-50); --bg-soft: var(--sand-100); --bg-deep: var(--lagoon-900); --surface: #ffffff; --surface-glass: rgba(255,255,255,.55); --border: var(--sand-200); --border-glass: rgba(255,255,255,.6); --text: #0c2b33; --text-soft: #3c5b62; --text-mute: #6f8a90; --text-on-deep: var(--lagoon-50); --brand: var(--lagoon-600); --brand-strong: var(--lagoon-800); --accent: var(--coral); --accent-dark: var(--coral-dk); --ok: #2f9e7d; --warn: #e05c5c; /* グラデーション(3種戦略: CTA用 / 深背景用 / カード背景用) */ --grad-cta: linear-gradient(120deg, #ffc857 0%, #ff9b76 50%, #ff7a59 100%); --grad-deep: linear-gradient(180deg, #0a4d59 0%, #073b4c 100%); --grad-soft: linear-gradient(180deg, #fdfbf6 0%, #eafaf8 100%); /* 影(色はブランド色由来にすると馴染む) */ --sh-sm: 0 2px 8px rgba(7,59,76,.06); --sh-md: 0 14px 36px rgba(7,59,76,.10); --sh-lg: 0 30px 70px rgba(7,59,76,.16); --sh-cta: 0 18px 50px rgba(255,122,89,.32); --sh-cta-hover: 0 24px 60px rgba(255,122,89,.42); } /* ============================================================ テーマ2: 建設ネイビー — 建設業界向け(信頼の青 × 安全黄) 出典: 260628_construction-3d ============================================================ */ [data-theme="construction"] { --bg: #f6f9fd; --bg-soft: #eaf1fa; --bg-deep: #0a2540; --surface: #ffffff; --surface-glass: rgba(255,255,255,.6); --border: #dbe6f2; --border-glass: rgba(255,255,255,.65); --text: #0a2540; --text-soft: #33506e; --text-mute: #6a83a0; --text-on-deep: #e8f2fd; --brand: #0b4a8f; --brand-strong: #062a52; --accent: #ffc328; --accent-dark: #ff9d00; --ok: #43c59e; --warn: #ff6b6b; --grad-cta: linear-gradient(120deg, #ffd45e 0%, #ffc328 55%, #ff9d00 100%); --grad-deep: linear-gradient(180deg, #0b4a8f 0%, #062a52 100%); --grad-soft: linear-gradient(180deg, #f6f9fd 0%, #eaf1fa 100%); --sh-sm: 0 2px 8px rgba(6,42,82,.07); --sh-md: 0 14px 36px rgba(6,42,82,.11); --sh-lg: 0 30px 70px rgba(6,42,82,.17); --sh-cta: 0 18px 50px rgba(255,157,0,.30); --sh-cta-hover: 0 24px 60px rgba(255,157,0,.42); } /* ============================================================ テーマ3: ダークテック — プレゼン・ダッシュボード・AI系ダークモードは「反転」ではなく彩度を落とした専用設計 ============================================================ */ [data-theme="dark"] { --bg: #0d1420; --bg-soft: #131c2b; --bg-deep: #060b13; --surface: #182436; --surface-glass: rgba(24,36,54,.62); --border: #24344c; --border-glass: rgba(255,255,255,.10); --text: #e8eef7; --text-soft: #a9b8cc; --text-mute: #6d7f97; --text-on-deep: #e8eef7; --brand: #4fd3cc; --brand-strong: #28bdb8; --accent: #ff8a68; --accent-dark: #ff7a59; --ok: #43c59e; --warn: #ff6b6b; --grad-cta: linear-gradient(120deg, #ffc857 0%, #ff9b76 50%, #ff7a59 100%); --grad-deep: linear-gradient(180deg, #0d1420 0%, #060b13 100%); --grad-soft: linear-gradient(180deg, #131c2b 0%, #0d1420 100%); --sh-sm: 0 2px 8px rgba(0,0,0,.35); --sh-md: 0 14px 36px rgba(0,0,0,.45); --sh-lg: 0 30px 70px rgba(0,0,0,.55); --sh-cta: 0 18px 50px rgba(255,122,89,.25); --sh-cta-hover: 0 24px 60px rgba(255,122,89,.38); } /* ---------- ベースリセット(最小限) ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: .01em; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); margin: 0 0 .5em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 1em; } img { max-width: 100%; display: block; } a { color: var(--brand); text-decoration: none; } /* ---------- レイアウトプリミティブ ---------- */ .wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2.5rem, var(--maxw-narrow)); margin-inline: auto; } .section { padding-block: var(--section-y); position: relative; } .center { text-align: center; } /* セクション背景バリエーション ⚠ 教訓(2026-06-27): 素の .section は透明背景。深色ページに置くと「黒くて見えない」事故になるため、必ず背景クラスをセットで付ける */ .sec-soft { background: var(--grad-soft); } .sec-deep { background: var(--grad-deep); color: var(--text-on-deep); } .sec-deep h1, .sec-deep h2, .sec-deep h3 { color: #fff; }