/* ========================================================================== CSS Variables Design: WC_design (Figma) Updated: 2026-06-10 ========================================================================== */ :root { /* -------------------------------------------------------------------------- Color - Text & Icon -------------------------------------------------------------------------- */ --color-text-high: #2d2a32; /* Text&Icon/mid : 本文・見出し */ --color-text-mid: #616161; /* Text&Icon/low : サブテキスト・キャプション */ --color-text-light: #ffffff; /* Text&Icon/light : ダーク背景上テキスト */ --color-text-accent: #1f629c; /* Text&Icon/accent: アクセント・英語ラベル */ /* -------------------------------------------------------------------------- Color - Background -------------------------------------------------------------------------- */ --color-bg-base: #f5f5f5; /* Background/base : ページ基本背景・カード背景 */ --color-bg-light: #ffffff; /* Background/light: セクション白背景 */ --color-bg-dark: #002744; /* Background/dark : フッター背景 */ /* -------------------------------------------------------------------------- Color - Brand -------------------------------------------------------------------------- */ --color-brand-primary: #1f629c; /* ThemeColor/darken-1: ヘッダーボーダー・ボタン */ --color-brand-dark: #002744; /* Border/accent-stroke: ダークアクセント */ /* -------------------------------------------------------------------------- Color - Border -------------------------------------------------------------------------- */ --color-border-primary: #bdbdbd; /* Border/primary-stroke : テーブル・区切り線 */ --color-border-accent: #002744; /* Border/accent-stroke : 強調ライン */ --color-border-secondary: #efefef; /* Border/secondary-stroke: SP セクション境界 */ /* -------------------------------------------------------------------------- Typography - Font Family -------------------------------------------------------------------------- */ --font-family-base: "Noto Sans JP", "Noto Sans", sans-serif; /* -------------------------------------------------------------------------- Typography - Font Weight -------------------------------------------------------------------------- */ --font-weight-regular: 400; --font-weight-bold: 700; /* -------------------------------------------------------------------------- Typography - Font Size (PC) -------------------------------------------------------------------------- */ --font-size-pc-xs: 10px; /* コピーライト */ --font-size-pc-sm: 12px; /* Body/desktop/sm: ナビ・ラベル・キャプション */ --font-size-pc-md: 15px; /* Body/desktop/md: 本文 */ --font-size-pc-lg: 20px; --font-size-pc-h2: 28px; /* Heading/desktop/H2: セクション小見出し */ --font-size-pc-h1: 36px; /* Heading/desktop/H1: セクション大見出し */ /* -------------------------------------------------------------------------- Typography - Font Size (SP) -------------------------------------------------------------------------- */ --font-size-sp-xs: 10px; /* Body/mobile/sm: キャプション・英語ラベル */ --font-size-sp-sm: 12px; /* ナビ・ラベル */ --font-size-sp-md: 14px; /* Body/mobile/md: 本文 */ --font-size-sp-lg: 18px; --font-size-sp-h2: 24px; /* Heading/mobile/H2: セクション小見出し */ --font-size-sp-h1: 32px; /* Heading/mobile/H1: セクション大見出し */ /* -------------------------------------------------------------------------- Typography - Line Height -------------------------------------------------------------------------- */ --line-height-tight: 1.4; /* ナビ・ボタン・ラベル */ --line-height-base: 1.5; /* 見出し */ --line-height-body: 1.8; /* 本文 */ --line-height-loose: 2.3; /* MV サブコピー */ /* -------------------------------------------------------------------------- Typography - Letter Spacing (PC) -------------------------------------------------------------------------- */ --letter-spacing-pc-xs: 0.4px; /* 10px × 0.04em */ --letter-spacing-pc-sm: 0.48px; /* 12px × 0.04em */ --letter-spacing-pc-md: 0.6px; /* 15px × 0.04em */ --letter-spacing-pc-h2: 1.12px; /* 28px × 0.04em */ --letter-spacing-pc-h1: 1.44px; /* 36px × 0.04em */ --letter-spacing-pc-accent: 2.4px; /* 英語ラベル (12px × 0.2em) */ /* -------------------------------------------------------------------------- Typography - Letter Spacing (SP) -------------------------------------------------------------------------- */ --letter-spacing-sp-xs: 0.4px; /* 10px × 0.04em */ --letter-spacing-sp-sm: 0.48px; /* 12px × 0.04em */ --letter-spacing-sp-md: 0.56px; /* 14px × 0.04em */ --letter-spacing-sp-h2: 0.96px; /* 24px × 0.04em */ --letter-spacing-sp-h1: 1.28px; /* 32px × 0.04em */ --letter-spacing-sp-accent: 2px; /* 英語ラベル (10px × 0.2em) */ /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ --content-width-lg: 1280px; /* PC コンテンツ幅大 */ --content-width-md: 800px; /* PC コンテンツ幅中 */ --content-padding-x: 120px; /* PC 左右パディング大 */ --content-padding-md: 50px; /* PC 左右パディング中（ヘッダーと同じ） */ --content-padding-x-sp: 24px; /* SP 左右パディング基本 */ --header-padding-x: 50px; /* PC ヘッダー左右パディング */ --header-padding-y: 48px; /* PC ヘッダー上下パディング */ --header-padding-x-sp: 24px; /* SP ヘッダー左右パディング */ --header-padding-y-sp: 16px; /* SP ヘッダー上下パディング */ /* -------------------------------------------------------------------------- Spacing - Section (PC) -------------------------------------------------------------------------- */ --space-section-top-xl: 120px; /* セクション上余白 最大 */ --space-section-top-lg: 100px; /* セクション上余白 大 */ --space-section-top-md: 96px; /* セクション上余白 中 (sec-business / sec-recruit) */ --space-section-top-sm: 60px; /* セクション上余白 小 (sec-company) */ --space-section-bottom: 120px; /* セクション下余白 */ --space-footer-top: 84px; --space-footer-bottom: 32px; /* -------------------------------------------------------------------------- Spacing - Section (SP) -------------------------------------------------------------------------- */ --space-section-top-sp-lg: 100px; --space-section-top-sp-md: 80px; --space-section-top-sp-sm: 60px; --space-section-bottom-sp: 100px; --space-footer-top-sp: 76px; --space-footer-bottom-sp: 24px; /* -------------------------------------------------------------------------- Spacing - Component -------------------------------------------------------------------------- */ --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-36: 36px; --space-56: 56px; --space-64: 64px; --space-72: 72px; --space-80: 80px; /* -------------------------------------------------------------------------- Border Radius -------------------------------------------------------------------------- */ --radius-sm: 2px; /* カード・スライドアイテム */ --radius-md: 32px; /* PC セクションコンテナ */ --radius-sp: 24px; /* SP セクションコンテナ・フッター */ --radius-full: 999px; /* ボタン（pill 型） */ /* -------------------------------------------------------------------------- Shadow -------------------------------------------------------------------------- */ --shadow-md: 0 0 20px rgba(30, 61, 58, 0.18); /* ボタンドロップシャドウ */ /* -------------------------------------------------------------------------- MV (Main Visual) -------------------------------------------------------------------------- */ --mv-height: 100vh; /* MV 高さ */ --mv-border-top-width: 6px; /* PC ヘッダー上ボーダー */ --mv-border-top-width-sp: 4px; /* SP ヘッダー上ボーダー */ /* -------------------------------------------------------------------------- Component - Header -------------------------------------------------------------------------- */ --header-logo-w: 225px; --header-logo-h: 54px; --header-logo-w-sp: 120px; --header-logo-h-sp: 29px; --hamburger-size: 40px; /* -------------------------------------------------------------------------- Component - Section Heading -------------------------------------------------------------------------- */ --icon-wave-size: 16px; /* -------------------------------------------------------------------------- Component - Hamburger Menu (SP) -------------------------------------------------------------------------- */ --nav-menu-gap: 24px; /* メニュー項目間隔 */ --nav-menu-padding: 82px; /* メニューオーバーレイ左右パディング */ }