/* ============================================ Rozetta Corporate Site — Design Tokens design-system/tokens/*.css の完全ミラー（値は正本と1:1） + production 用のレスポンシブ・レイヤー ブレークポイント SP : 〜767px 1カラム / gutter 20px TB : 768〜1023px 2カラム / gutter 32px PC-narrow : 1024〜1279px フル構成 / gutter 40px PC : 1280px〜 デザイン正本と完全一致 / gutter 64px タイポは clamp() で SP〜1280px を連続的に補間し、 1280px 以上でデザインシステムの px 値に正確に一致する。 ============================================ */ :root { /* ============ Brand: Navy（ブランドのインク） ============ */ --navy-900: #00102E; /* dark section background */ --navy-800: #001038; /* primary ink, footer, outline buttons */ --navy-700: #1F3F94; --navy-600: #28324A; --navy-500: #2A3550; --navy-400: #39415A; /* long-form body copy */ --navy-300: #5A6478; /* muted copy */ --navy-200: #7A8497; --navy-150: #8B94A6; --navy-100: #98A2B4; --navy-75: #A6AFBF; --navy-50: #C3CBD8; /* ============ Brand: Blue（技術 / リンク） ============ */ --blue-700: #123C7A; --blue-600: #1F64AD; /* link + primary blue */ --blue-400: #4F79BB; --blue-300: #5ACDF2; --blue-200: #CBDCF2; --blue-100: #C9DAF2; --blue-50: #EAF1FA; /* ============ Brand: Gold（権威 / 根拠 / CTA） ============ */ --gold-100: #F6E6BE; --gold-200: #E7CB92; --gold-250: #E3C989; /* gold text on navy */ --gold-300: #E0C083; --gold-350: #DEBB78; --gold-400: #DDB25C; --gold-450: #D4AF62; --gold-500: #D29A37; --gold-550: #C79B37; /* the signature gold: rules, dots, tag borders */ --gold-600: #C18A27; --gold-650: #C08A2A; --gold-700: #A97314; --gold-750: #9C6A11; --gold-800: #96650F; --gold-ink: #8E6C1C; /* gold used as readable text on white */ --gold-tint: #FAF3E6; --gold-tint-line: #D8C398; /* ============ Surfaces ============ */ --surface-page: #FFFFFF; --surface-alt: #F6F7FA; --surface-card: #FFFFFF; --surface-card-soft: #FCFDFF; --surface-card-face: linear-gradient(120deg, #FFFFFF 0%, #FFFFFF 55%, #F7FAFE 100%); --surface-dark: #00102E; --surface-tint-green: #F2F8F4; --surface-tint-blue: #F1F6FC; --surface-tint-gold: #FBF6EA; --surface-tint-violet: #F5F4F9; /* ============ Borders ============ */ --border-hair: #E7E8EA; --border-card: #E4EAF1; --border-soft: #E7ECF3; --border-inner: #EDF1F6; --border-rule: #D6DEEA; --border-on-dark: rgba(255,255,255,.18); /* ============ 専門分野マトリクスのカテゴリ・アクセント ============ */ --field-medical: #2E7D52; --field-engineering: #1F64AD; --field-business: #8E6C1C; --field-humanities: #54507A; /* ============ セマンティック・エイリアス ============ */ --text-strong: var(--navy-800); --text-body: var(--navy-400); --text-muted: var(--navy-300); --text-accent: var(--gold-ink); --text-on-dark: #FFFFFF; --text-on-dark-muted: rgba(255,255,255,.74); --text-on-dark-accent: var(--gold-250); --link: var(--blue-600); --link-hover: var(--navy-800); /* ============ シグネチャー・グラデーション ============ */ --grad-hero: linear-gradient(150deg, #FFFFFF 0%, #EAF1FA 50%, #C9DAF2 100%); --grad-contact: linear-gradient(160deg, #FFFFFF 0%, #EAF1FA 55%, #C9DAF2 100%); --grad-gold-cta: radial-gradient(120% 120% at 50% 8%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 70%), linear-gradient(180deg, #D29A37 0%, #C18A27 48%, #A97314 100%); --grad-gold-text: linear-gradient(180deg, #E0C083 0%, #C08A2A 55%, #9C6A11 100%); --grad-gold-text-hero: linear-gradient(180deg, #D4AF62 0%, #C08A2A 55%, #A97314 100%); --grad-gold-text-xl: linear-gradient(180deg, #E7CB92 0%, #C08A2A 52%, #96650F 100%); --grad-gold-edge: linear-gradient(180deg, #DEBB78 0%, #C18A27 50%, #A97314 100%); --grad-gold-medal: linear-gradient(150deg, #F6E6BE 0%, #DDB25C 32%, #C08A2A 62%, #9C6A11 100%); --grad-gold-hairline: linear-gradient(90deg, rgba(199,155,55,0), rgba(199,155,55,.55), rgba(199,155,55,0)); --grad-gold-fade-right: linear-gradient(90deg, #C79B37, rgba(199,155,55,0)); --grad-dark-glow: radial-gradient(90% 60% at 12% 0%, rgba(31,100,173,.55) 0%, rgba(0,16,46,0) 60%), radial-gradient(70% 50% at 88% 22%, rgba(15,140,180,.30) 0%, rgba(0,16,46,0) 62%), radial-gradient(80% 60% at 50% 100%, rgba(199,155,55,.16) 0%, rgba(0,16,46,0) 60%); --grad-dark-grid: linear-gradient(rgba(120,170,235,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(120,170,235,.07) 1px, transparent 1px); /* ============ Typography ============ */ --font-serif: "Noto Serif JP", "Yu Mincho", serif; --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-latin: Inter, sans-serif; /* 流体タイプスケール 下限 = SPデザイン正本（sp-top.dc.html / 375px 実測） 上限 = PCデザイン正本（ロゼッタ トップページ.dc.html / 1280px 以上で到達） */ --fs-display: clamp(30px, 2.21vw + 21.71px, 50px); /* TOP hero h1 375:30 → 1280:50 */ --fs-h1: clamp(27px, 1.44vw + 21.58px, 40px); /* 下層 h1 375:27 → 1280:40 */ --fs-h2: clamp(24px, 1.77vw + 17.34px, 40px); /* セクション h2 375:24 → 1280:40 */ --fs-h3: clamp(21px, 0.99vw + 17.33px, 30px); /* カード h3 375:21 → 1280:30 */ --fs-stat-xl: clamp(54px, 3.09vw + 42.42px, 82px); /* No.1 大型数値 */ --fs-stat: clamp(46px, 1.99vw + 38.54px, 64px); /* 統計数値 375:46 → 1280:64 */ --fs-numeral: clamp(40px, 1.77vw + 33.34px, 56px); /* 連番 375:40 → 1280:56 */ --fs-lead: clamp(14.5px, 0.61vw + 12.21px, 20px); /* hero リード 375:14.5→ 1280:20 */ --fs-section-lead: clamp(13.5px, 0.50vw + 11.63px, 18px); /* セクション・リード 375:13.5 → 1280:18 */ --fs-title: clamp(14.5px, 0.28vw + 13.42px, 17px); /* カード見出し 375:14.5→ 1280:17 */ --fs-body: clamp(13px, 0.28vw + 11.95px, 15.5px); /* 長文 375:13 → 1280:15.5 */ --fs-eyebrow: clamp(12px, 0.22vw + 11.18px, 14px); /* eyebrow 375:12 → 1280:14 */ /* HTML にベタ書きされていた本文サイズを流体化するためのトークン。 PC正本の px を維持したまま、SP正本の px まで縮む（インラインの固定pxの置き換え用）。 */ --fs-i-24: clamp(18px, 0.66vw + 15.51px, 24px); --fs-i-20: clamp(17px, 0.33vw + 15.76px, 20px); --fs-i-18: clamp(15.5px, 0.28vw + 14.42px, 18px); --fs-i-17: clamp(14px, 0.33vw + 12.76px, 17px); --fs-i-15_5: clamp(13.5px, 0.22vw + 12.67px, 15.5px); --fs-i-15: clamp(13px, 0.22vw + 12.17px, 15px); --fs-i-14: clamp(12.5px, 0.17vw + 11.87px, 14px); --fs-i-13: clamp(11.5px, 0.17vw + 10.88px, 13px); --fs-i-12: clamp(11px, 0.11vw + 10.59px, 12px); --fs-ui: 15px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-micro: 12px; --fs-nano: 11.5px; --lh-display: 1.15; --lh-h2: 1.4; --lh-h3: 1.5; --lh-stat: 1.55; /* グラデ数値のクリップ防止 */ --lh-lead: 1.8; --lh-title: 1.6; --lh-body: 2; --lh-body-sm: 1.9; --lh-caption: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-base: .02em; --ls-lead: .04em; --ls-eyebrow: .2em; --ls-eyebrow-tight: .14em; --ls-eyebrow-wide: .26em; --eyebrow: var(--fw-semibold) var(--fs-eyebrow)/1 Inter, sans-serif; --label-latin: 600 10.5px/1 Inter, sans-serif; /* セクション見出しの金ルール（PC 24×1.5px / SP 22×2px） */ --rule-w: 24px; --rule-h: 1.5px; --rule-gap: 16px; /* ============ Spacing（4px ベース） ============ */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 20px; --space-9: 22px; --space-10: 24px; --space-11: 26px; --space-12: 28px; --space-13: 32px; --space-14: 40px; --space-15: 44px; --space-16: 48px; --space-17: 56px; --space-18: 64px; --space-19: 80px; --space-20: 96px; --space-21: 112px; --space-22: 128px; /* ============ Radius ============ */ --radius-xs: 4px; /* タグ・カテゴリチップ */ --radius-sm: 5px; --radius-md: 8px; /* ボタン */ --radius-lg: 12px; /* カード・画像・リストパネル */ --radius-matrix: 14px; /* 専門分野マトリクス */ --radius-xl: 16px; /* 特集（理由）カード */ --radius-pill: 999px; --radius-circle: 50%; --clip-notch: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); --clip-notch-inner: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px); /* ============ Effects（影は必ず navy 系。black は使わない） ============ */ --shadow-card: 0 2px 12px rgba(0,16,56,.06); --shadow-card-quiet: 0 2px 18px rgba(0,16,56,.05); --shadow-hairline: 0 1px 2px rgba(0,16,56,.04); --shadow-image: 0 2px 14px rgba(0,16,56,.08); --shadow-hover: 0 8px 28px rgba(0,16,56,.12); --shadow-hover-soft: 0 10px 34px rgba(0,16,56,.10); --shadow-hover-tile: 0 10px 26px rgba(0,16,56,.09); --shadow-cta: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.10), 0 2px 8px rgba(0,16,56,.12); --shadow-cta-flat: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.10); --shadow-medal: 0 6px 18px rgba(169,115,20,.28), inset 0 1px 0 rgba(255,255,255,.6); --shadow-plate: drop-shadow(0 2px 8px rgba(0,16,56,.10)); --ring-node: 0 0 0 5px rgba(79,121,187,.07); --border-width-card: 1px; --border-width-button: 1.5px; --rule-accent-width: 3px; /* ============ Motion ============ */ --dur-fast: .25s; --dur-base: .3s; --ease-standard: ease; --lift-sm: translateY(-1px); /* CTA */ --lift-md: translateY(-3px); /* タイル */ --lift-lg: translateY(-4px); /* メダリオン */ /* ============ Layout ============ */ --page-width: 1440px; --container: 1280px; --container-narrow: 1080px; --gutter: 64px; --header-height: 96px; --section-pad-y: 112px; /* 上。ライトバンドの下は 96px、ダークバンドは 112px */ --section-pad-y-end: 96px; --section-pad-y-dark: 128px; --section-pad-y-dark-end: 112px; --grid-gap: 24px; /* プロダクト / カードグリッド */ --stack-gap: 28px; /* 積み重ねる特集カード */ /* ---- 旧名エイリアス（既存 HTML / CSS の互換維持） ---- */ --color-navy-900: var(--navy-900); --color-navy-800: var(--navy-800); --color-navy-600: var(--blue-700); --color-navy-500: var(--navy-700); --color-blue-500: var(--blue-600); --color-blue-300: var(--blue-400); --color-cyan-300: var(--blue-300); --color-gold-100: var(--gold-tint); --color-gold-200: var(--gold-250); --color-gold-300: var(--gold-350); --color-gold-400: var(--gold-550); --color-gold-500: var(--gold-600); --color-gold-600: var(--gold-700); --color-gold-text: var(--gold-ink); --color-text: var(--text-strong); --color-text-sub: var(--text-body); --color-text-muted: var(--text-muted); --color-text-faint: var(--navy-100); --color-border: var(--border-card); --color-border-light: var(--border-inner); --color-border-input: var(--border-rule); --color-bg: var(--surface-page); --color-bg-gray: var(--surface-alt); --color-bg-input: var(--surface-card-soft); --color-required: #B4372E; --grad-gold: var(--grad-gold-cta); --grad-gold-line: var(--grad-gold-edge); --grad-cta: var(--grad-contact); --grad-btn-sheen: radial-gradient(120% 120% at 50% 8%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 70%); --font-en: var(--font-latin); --fs-small: var(--fs-caption); --lh-heading: var(--lh-h3); --ls-en: var(--ls-eyebrow); --space-xs: var(--space-3); --space-sm: var(--space-7); --space-md: var(--space-10); --space-lg: var(--space-14); --space-xl: var(--space-18); --space-section: var(--section-pad-y-end); --space-section-lg: var(--section-pad-y); --radius-2xl: var(--radius-xl); --shadow-card-lg: var(--shadow-card-quiet); --shadow-btn: var(--shadow-cta); --header-h: var(--header-height); } /* ============ PC-narrow: 1024〜1279px ============ */ @media (max-width: 1279px) { :root { --gutter: 40px; --section-pad-y: 96px; --section-pad-y-end: 80px; --section-pad-y-dark: 104px; --section-pad-y-dark-end: 96px; } } /* ============ TB: 768〜1023px ============ */ @media (max-width: 1023px) { :root { --gutter: 32px; --section-pad-y: 80px; --section-pad-y-end: 72px; --section-pad-y-dark: 88px; --section-pad-y-dark-end: 80px; --grid-gap: 20px; --stack-gap: 24px; --header-height: 72px; } } /* ============ SP: 〜767px ============ 値は sp-top.dc.html（375px）の実測に一致させている。 */ @media (max-width: 767px) { :root { --gutter: 20px; --section-pad-y: 56px; /* ライトバンド 56px 20px */ --section-pad-y-end: 56px; --section-pad-y-dark: 64px; /* ダークバンド 64px 20px 56px */ --section-pad-y-dark-end: 56px; --grid-gap: 16px; --stack-gap: 18px; /* 理由カードの積み重ね */ --header-height: 64px; /* 行送り（SP正本） */ --lh-display: 1.4; --lh-h2: 1.5; --lh-h3: 1.6; --lh-lead: 1.9; --lh-body: 2; /* 理由カードの角丸は SP では 14px */ --radius-xl: 14px; /* 金ルール 22×2px / 前後 12px */ --rule-w: 22px; --rule-h: 2px; --rule-gap: 12px; } }