/* ========================================================================== CSS変数定義 — ReSpark LP (SP専用 / iPhone 17 Pro 402px基準) 基準: 1rem = 14px ========================================================================== */ :root { /* ============================================ フォントファミリー ============================================ */ --font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; --ff-en: "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ============================================ フォントサイズ (14px = 1rem) ============================================ */ --font-xs: clamp(0.607rem, 1.8vw, 0.714rem); /* 注釈 8.5〜10px */ --font-sm: clamp(0.714rem, 2.1vw, 0.857rem); /* 注釈 10〜12px */ --font-base: clamp(0.929rem, 2.5vw, 1rem); /* 13〜14px */ --font-md: clamp(1rem, 2.7vw, 1.071rem); /* 14〜15px */ --font-lg: clamp(1.071rem, 2.9vw, 1.143rem); /* 15〜16px */ --font-xl: clamp(1.214rem, 3.1vw, 1.286rem); /* 17〜18px */ --font-2xl: clamp(1.357rem, 3.3vw, 1.429rem); /* 19〜20px */ --font-3xl: clamp(1.500rem, 3.5vw, 1.571rem); /* 21〜22px */ --font-4xl: clamp(1.643rem, 3.7vw, 1.714rem); /* 23〜24px */ --font-5xl: clamp(1.786rem, 3.9vw, 1.857rem); /* 25〜26px */ --font-6xl: clamp(1.929rem, 4.1vw, 2rem); /* 27〜28px */ --font-7xl: clamp(2.143rem, 5vw, 2.571rem); /* 30〜36px */ --font-8xl: clamp(2.857rem, 9vw, 3.571rem); /* 40〜50px */ --font-9xl: clamp(3.714rem, 14vw, 5.714rem); /* 52〜80px */ /* 案件固有フォントサイズ */ /* ============================================ ライン高 ============================================ */ --line-height-none: 1; --line-height-tight: 1.1; --line-height-snug: 1.2; --line-height-normal: 1.4; --line-height-relaxed: 1.5; --line-height-loose: 1.6; /* ============================================ フォントウェイト ============================================ */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; /* ============================================ カラー ============================================ */ --color-primary-dark: #1f2937; --color-primary-dark-rgb: 31, 41, 55; --color-lime: #ccff01; --color-lime-rgb: 204, 255, 1; --color-green: #91ff01; --color-green-rgb: 145, 255, 1; --color-green-dark: #078e00; --color-cyan: #00dff9; --color-cyan-rgb: 0, 223, 249; --color-pink-rgb: 255, 0, 85; --color-teal-rgb: 0, 255, 153; --color-pink-accent: #f06ba5; --color-cadet: #808e9b; --color-white: #ffffff; --color-gray-light: #f3f4f6; --color-cream: #fcffe5; --color-cyan-light: #d1faff; /* ============================================ グラデーション ============================================ */ --gradient-lime: linear-gradient(to right, #ccff01, #91ff01); --gradient-orange: linear-gradient(81deg, #ff6700 0%, #ff9900 100%); --gradient-cyan-lime: linear-gradient(to bottom, #00dff9 0%, #ccff01 100%); /* ============================================ スペーシング (1rem = 14px) ============================================ */ --space-3xs: 0.143rem; /* 2px */ --space-2xs: 0.286rem; /* 4px */ --space-xs: 0.429rem; /* 6px */ --space-sm: 0.571rem; /* 8px */ --space-10: 0.714rem; /* 10px */ --space-md: 0.857rem; /* 12px */ --space-lg: 1.143rem; /* 16px */ --space-xl: 1.429rem; /* 20px */ --space-2xl: 1.714rem; /* 24px */ --space-3xl: 2.286rem; /* 32px */ --space-4xl: 2.857rem; /* 40px */ --space-5xl: 3.429rem; /* 48px */ --space-6xl: 4.571rem; /* 64px */ --mobile-gutter: var(--space-xl); /* 20px */ /* ============================================ サイズ (案件固有ディメンション) ============================================ */ /* ============================================ ボーダー半径 ============================================ */ --border-radius-sm: 0.286rem; /* 4px */ --border-radius-md: 0.571rem; /* 8px */ --border-radius-lg: 0.857rem; /* 12px */ --border-radius-xl: 1.143rem; /* 16px */ --border-radius-full: 100vw; /* ============================================ シャドウ (Figma: シャドー-グリーン / -ダーク) ============================================ */ --shadow-green: 0 21px 21px rgba(7, 142, 0, 0.09), 0 5px 11px rgba(114, 142, 0, 0.1); /* CTAボタンシャドウ */ --shadow-cta: 0 0.714rem 1.071rem -0.214rem rgba(0, 0, 0, 0.1), 0 0.286rem 0.429rem -0.286rem rgba(0, 0, 0, 0.1); /* ============================================ トランジション ============================================ */ --duration-base: 0.3s; --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1); --transition-base: var(--duration-base) var(--easeOutCubic); /* ============================================ コンテナ (iPhone 17 Pro 基準) ============================================ */ --container-max-width: 402px; /* ============================================ z-index階層 ============================================ */ --z-base: 0; --z-above: 1; --z-content: 2; --z-decoration: 3; --z-sticky: 10; --z-fixed: 20; --z-header: 100; --z-overlay: 900; --z-modal: 1000; /* ========================================================================== サイト共通拡張トークン (LP単体には不要だがサイト各ページが参照) ※ 値は basis 非依存(色/コンテナ/em)はそのまま、rem 寸法は 1rem=14px へ換算し px を保持 ========================================================================== */ /* セマンティック / 追加カラー */ --color-black: #15151d; --color-orange: #ff8400; --color-orange-deep: #ff6700; --color-gray-50: #fafafa; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-text-main: var(--color-primary-dark); --color-text-main-rgb: var(--color-primary-dark-rgb); --color-text-sub: var(--color-gray-600); --color-text-muted: var(--color-gray-500); --color-text-inverse: var(--color-white); --color-link: var(--color-primary-dark); --color-link-hover: var(--color-green-dark); --color-bg-body: var(--color-white); --color-bg-light: var(--color-gray-50); --color-bg-dark: var(--color-primary-dark); --color-bg-accent: var(--color-lime); --color-bg-footer: #f7f8fa; --color-border: var(--color-gray-200); --color-border-strong: var(--color-gray-300); --color-border-subtle: rgba(31, 41, 55, 0.08); /* フォントウェイト追加 */ --font-weight-semibold: 600; /* レタースペーシング (em: basis 非依存) */ --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-en: -0.01em; /* 半径追加 */ --border-radius-2xl: 1.714rem; /* 24px */ /* シャドウ追加 (px ベース: basis 非依存) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.05); /* トランジション追加 */ --duration-fast: 0.2s; --duration-medium: 0.5s; --duration-slow: 0.7s; --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1); --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1); --ease: cubic-bezier(0.33, 1, 0.68, 1); --transition-fast: var(--duration-fast) var(--easeOutCubic); /* コンテナ / ガター (px は保持。rem 寸法は 14px 基準へ換算) */ --container-max: 1200px; --container-narrow: 768px; --container-wide: 1280px; --tablet-gutter: 2.286rem; /* 32px */ --pc-gutter: 2.857rem; /* 40px */ /* ヘッダー高さ (px 保持: top/header.css と一致) */ --header-height-sp: 5.143rem; /* 72px */ --header-height-pc: 6.286rem; /* 88px */ }