/* ============================================ Gift Rich - Design Tokens 黒×金×チャコール ラグジュアリーデザインシステム Guinness-inspired luxury aesthetics ============================================ */ /* Fonts は各HTMLの で により読み込む （render-blocking な @import を廃止）。 使用フォント: Cormorant Garamond / Noto Sans JP / Inter */ :root { /* ========== Colors ========== */ /* Base Backgrounds */ --color-base-black: #0B0B0B; --color-surface: #151515; --color-surface-elevated: #1A1A1A; --color-border: #222222; --color-border-subtle: rgba(34, 34, 34, 0.6); /* Gold Palette - Accent Only */ --color-gold-primary: #C9A227; --color-gold-light: #D4B342; --color-gold-dark: #A68A1F; --color-gold-muted: rgba(201, 162, 39, 0.3); --color-gold-gradient: linear-gradient(135deg, #C9A227 0%, #D4B342 50%, #C9A227 100%); --color-gold-shimmer: linear-gradient(90deg, #C9A227, #D4B342, #C9A227); /* Text Colors */ --color-text-heading: #F2F2F2; --color-text-primary: #F2F2F2; --color-text-body: #B7B7B7; --color-text-secondary: #B7B7B7; --color-text-muted: #757575; --color-text-gold: #C9A227; --color-white: #FFFFFF; /* Status */ --color-success: #4CAF50; --color-warning: #FF9800; --color-error: #FF6B6B; --color-info: #2196F3; /* ========== Typography ========== */ --font-heading: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-numeric: 'Inter', 'Noto Sans JP', sans-serif; --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace; /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* Font Weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.75; --leading-loose: 2; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; /* ========== Spacing ========== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ /* ========== Layout ========== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; /* ========== Borders ========== */ --border-width: 1px; --border-width-2: 2px; --border-color: var(--color-border); --border-color-gold: var(--color-gold-primary); /* Border Radius - 16px〜24px基準 */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ========== Shadows - 控えめ ========== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.4); --shadow-gold: 0 0 16px rgba(201, 162, 39, 0.2); --shadow-gold-lg: 0 0 32px rgba(201, 162, 39, 0.25); /* ========== Transitions ========== */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; --transition-slower: 500ms ease; --transition-slowest: 700ms ease; /* ========== Animations ========== */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* ========== Z-Index ========== */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-fixed-cta: 350; --z-modal-backdrop: 400; --z-modal: 500; --z-tooltip: 600; --z-max: 9999; /* ========== Accessibility ========== */ --min-touch-target: 44px; --focus-ring-width: 2px; --focus-ring-color: var(--color-gold-primary); --focus-ring-offset: 2px; } /* ========== Dark Mode (Default) ========== */ html { color-scheme: dark; } /* ========== Light Mode ========== */ :root[data-theme="light"] { color-scheme: light; /* Base Backgrounds */ --color-base-black: #FFFFFF; --color-surface: #F5F5F5; --color-surface-elevated: #FAFAFA; --color-border: #E2E2E2; --color-border-subtle: rgba(226, 226, 226, 0.7); /* Gold (slightly darker for contrast on light) */ --color-gold-primary: #B0892F; --color-gold-light: #C9A227; --color-gold-dark: #8E6F25; --color-gold-muted: rgba(176, 137, 47, 0.25); /* Text Colors */ --color-text-heading: #0B0B0B; --color-text-primary: #0B0B0B; --color-text-body: #3A3A3A; --color-text-secondary: #4A4A4A; --color-text-muted: #888888; --color-text-gold: #8E6F25; /* Shadows softer */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10); --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12); --shadow-gold: 0 0 16px rgba(176, 137, 47, 0.18); --shadow-gold-lg: 0 0 32px rgba(176, 137, 47, 0.22); } /* ========== Light Mode: Visibility Overrides ========== ライトモード時に白×白で見えなくなる箇所のピンポイント補正。 - ゴールド背景上のテキスト → 必ず黒 - 動画ヒーロー（暗いオーバーレイ）上のテキスト → 必ず白 - body と同色になり輪郭を失うパネル → サーフェス色を再付与 ============================================ */ /* body自体は完全な白ではなく僅かにオフホワイトに（カードの輪郭を保つ） */ :root[data-theme="light"] body { background-color: #F7F7F7; } /* ゴールド背景に乗るテキスト（共通ボタン・スタンプ系）を常に黒に */ :root[data-theme="light"] .btn--primary, :root[data-theme="light"] .btn--primary:hover, :root[data-theme="light"] .review-card__avatar, :root[data-theme="light"] .login-btn, :root[data-theme="light"] .register-btn, :root[data-theme="light"] .verify-btn, :root[data-theme="light"] .verify-btn--primary, :root[data-theme="light"] .step-indicator__item.is-active .step-indicator__number, :root[data-theme="light"] .stepper__item.is-active .stepper__number, :root[data-theme="light"] .captcha-box__check.is-checked::after, :root[data-theme="light"] .filter-btn.is-active, :root[data-theme="light"] .filter-tab.is-active { color: #0B0B0B; } /* テキスト選択時のゴールドハイライト（白文字だと見えない） */ :root[data-theme="light"] ::selection { background-color: var(--color-gold-primary); color: #0B0B0B; } :root[data-theme="light"] ::-moz-selection { background-color: var(--color-gold-primary); color: #0B0B0B; } /* スクロールバーのトラックは白だと枠が消えるので surface に */ :root[data-theme="light"] ::-webkit-scrollbar-track { background: var(--color-surface); } /* ヘッダー：ダーク固定だとライトモードで黒ロゴが沈むため、ライト時は白系 + ロゴを黒/金で復活 */ :root[data-theme="light"] .header { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--color-border); } :root[data-theme="light"] .header__logo { color: #0B0B0B; } :root[data-theme="light"] .header__logo:hover { color: #0B0B0B; } :root[data-theme="light"] .header__logo-accent { color: var(--color-gold-dark); } /* モバイルメニュー内のロゴも同様 */ :root[data-theme="light"] .mobile-menu__header .header__logo { color: #0B0B0B; } :root[data-theme="light"] .mobile-menu__header .header__logo-accent { color: var(--color-gold-dark); } /* 動画ヒーロー（背景は暗いオーバーレイ）— テーマ問わず白テキストを維持 */ :root[data-theme="light"] .hero--with-video .hero__title { background: linear-gradient(135deg, #FFFFFF 0%, var(--color-gold-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } :root[data-theme="light"] .hero--with-video .hero__title-sub, :root[data-theme="light"] .hero--with-video .hero__subtitle, :root[data-theme="light"] .hero--with-video .hero__note, :root[data-theme="light"] .hero--with-video p, :root[data-theme="light"] .hero--with-video .hero__cta-note { color: #F2F2F2; -webkit-text-fill-color: #F2F2F2; } /* グラデーションヒーロー（動画なし）— body と被るので段階を強める */ :root[data-theme="light"] .hero { background: linear-gradient(180deg, #FAFAFA 0%, #EDEDED 50%, #FAFAFA 100%); } /* 計算機パネル：背景が body と同色になり消失する → 白カードに */ :root[data-theme="light"] .calculator__input, :root[data-theme="light"] .calculator__result { background: #FFFFFF; } /* 商品カード・シミュレーター結果・コミュニティCTA等：body 同色化を回避 */ :root[data-theme="light"] .product-card, :root[data-theme="light"] .simulator__result, :root[data-theme="light"] .community__cta { background: #FFFFFF; } /* セクション系（rates / reviews / community / footer）が body と被る場合に微差をつける */ :root[data-theme="light"] .rates, :root[data-theme="light"] .reviews, :root[data-theme="light"] .community, :root[data-theme="light"] .footer, :root[data-theme="light"] .section--dark { background: #FFFFFF; } /* Smooth theme transitions */ html { transition: background-color var(--transition-base), color var(--transition-base); } body, header, footer, section, main, nav, aside, article, .mypage-card, .stat-card, .tab-panel, .app-item, .btn, input, textarea, select { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } /* ========== Media Query Breakpoints (Reference) ========== */ /* Mobile: < 640px Tablet: 640px - 1023px Desktop: >= 1024px Large: >= 1280px */