/* ========================================================================== BPS サービスサイト デザイントークン v4.0 部品はすべてこの変数を参照する。色や余白を変えるときはこのファイルの1か所を直す。 決まりの出どころ - 色: BPS のロゴの3色（NAVY＝基盤・BLUE＝データ・TEAL＝AI）と、資料請求のライム #C6F03A。 淡い色・本文の色・ホバーの色は、ロゴの3色を白に混ぜるか暗くして作る（下の 1. に式を書いている） - 形: 製品画面（FINANCIAL BOARD・BOARD AI）の部品に合わせる。ボタンとカードは角丸 8px、札は 4px。 影は付けない（スクロール後のヘッダーの区切りだけ）。ホバーは色だけを変える - 線: ロゴの「線端の丸い線」と「線の途中の中抜きの丸（ノード）」を、見出しの下の線・つなぎの線・図に使う - 文字: Noto Sans JP の 400 と 700（ナビだけ 500）。本文 16px/1.8 ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. 色（ブランド3色＋資料請求の色＋無彩色。色の役割は固定する） NAVY 見出しの文字、フッター下段の地 BLUE FV・途中の帯・フォームの地、リンク、線のボタン（お問い合わせ）、FINANCIAL BOARD TEAL BOARD AI（文字に使うときは --ai-ink） 資料請求の色 資料請求のボタンだけに使う（下の「押せるもの」）。文字は黒 ------------------------------------------------------------------------ */ --navy: #0D1B3D; --blue: #1D4EDB; /* 白文字 6.64:1 */ --teal: #00B39F; /* 図と線だけに使う（文字には使わない） */ /* BLUE を白に混ぜた淡い色（2段） */ --blue-50: #F1F4FD; /* BLUE 6%。明るい地の交互、線のボタンのホバー（BLUE の文字 6.03:1） */ --blue-100: #DFE6FA; /* BLUE 14%。③の「BPS 基幹システム」の帯 */ /* 文字（見出し・本文・補足の3段を明るさでも分ける） */ --ink: var(--navy); /* 見出し 16.9:1 */ --text: #2A3654; /* 本文。NAVY 88%（白地 12.0:1） */ --mute: #56627C; /* 補足・注記 6.0:1 */ /* 地 */ --paper: #FFFFFF; --tint: var(--blue-50); --gray: #ECEDEF; /* NAVY 8%。任意の札、ご用件の切り替えの地 */ --dark: var(--navy); /* 線（必要な関係線と表の横罫だけに使う） */ --line: #DCE0E9; --line-control: #858FA3; /* 入力欄・チェックボックスの枠。白地 3.25:1 */ /* 暗地の上 */ --on-dark: #FFFFFF; --on-dark-mute: rgba(255, 255, 255, .8); --on-blue-hover: rgba(255, 255, 255, .14); /* 青地の上の線のボタンのホバー。白文字 4.98:1 */ /* 製品ごとの面（画面の画像の地と同じ値。文字には使わない） */ --fb-soft: #ECF0FD; --ai-soft: #E6F7F5; --ai-ink: #007A69; /* 文字に使う TEAL。白 5.27／AI SOFT 4.76:1 */ /* 押せるもの 資料請求（主）＝ライムの塗り。白地も青地も同じ色（2026-10-17 たけさんの指定。前のオレンジ／黄の2段は _qa/lime-back/tokens.amber.css） --cta と --cta-on-blue を分けてあるのは、地ごとに色を変えたくなったときに1か所で直せるようにするため 注意: 白地では白との差が 1.32:1 しかない。白地で弱く見えると言われたら、白地だけ濃いライム #7CC000（白 2.23:1・黒文字 9.40:1）にする お問い合わせ（副）＝線。白地は BLUE の線、青地は白 60% の線（主の塗りより弱くする） */ --cta: #C6F03A; /* 白地 1.32:1、BLUE の地 5.03:1。NAVY の文字 12.83:1 */ --cta-hover: #B4DC2A; --cta-on-blue: #C6F03A; --cta-on-blue-hover: #B4DC2A; --on-cta: #0D1B3D; /* NAVY の文字 */ --line-on-blue: rgba(255, 255, 255, .6); /* 青地の副ボタンの線。BLUE と 3.39:1（主の塗り 5.03:1 より弱く、3:1 は保つ）。文字は白のまま 6.64:1 */ --selected: var(--navy); /* ご用件の切り替えの選択中（チェックボックスの印と同じ NAVY。資料請求の色は主ボタンだけに使う） */ --link: var(--blue); /* 状態（フォームの必須・エラーだけ） */ --negative: #C8102E; --negative-soft: #FDECEE; --focus: var(--navy); --focus-on-dark: #FFFFFF; /* ------------------------------------------------------------------------ 2. 文字 ------------------------------------------------------------------------ */ --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif; --fs-hero: clamp(28px, 20.5px + 1.73vw, 44px); /* 390→28 1440→44 */ --fs-h2: 30px; /* 767px 以下は 24px（下の @media） */ --fs-h3: clamp(20px, 18.5px + .38vw, 24px); /* 390→20 1440→24 */ --fs-lead: clamp(18px, 16.5px + .38vw, 22px); --fs-body: 16px; --fs-note: 14px; --lh-hero: 1.4; --lh-head: 1.45; --lh-body: 1.8; --fw-regular: 400; --fw-medium: 500; /* ヘッダーのナビ */ --fw-bold: 700; /* ------------------------------------------------------------------------ 3. 余白と幅（中身 1160px＝最大幅 1200＋左右 20、セクション上下 PC 80／スマホ 56） ------------------------------------------------------------------------ */ --maxw: 1200px; --pad: 20px; --sec-y: clamp(56px, 2.3vw + 47px, 80px); --head-gap: 40px; /* 見出しのまとまりから中身まで */ --text-max: 40em; /* 長い文の行の長さ（16px で 40字） */ --lead-max: 52em; /* セクションの見出しの下のリード（中央そろえ）。16px で 52字＝2行までに収める */ /* ヘッダー（1段。1024px 以下は 64px） */ --hdr-h: 72px; --logo-h: 32px; --ctl-h: 48px; /* ------------------------------------------------------------------------ 4. 角丸（製品画面に合わせる: ボタン・カード・窓 8px、札と入力欄 4px） ------------------------------------------------------------------------ */ --r-sm: 4px; --r-md: 8px; --r-card: 8px; /* ------------------------------------------------------------------------ 5. 影（スクロール後のヘッダーの区切りだけ。ボタン・カード・文字には付けない） ------------------------------------------------------------------------ */ --shadow-hdr: 0 2px 8px rgba(13, 27, 61, .12); /* ------------------------------------------------------------------------ 6. 動き ------------------------------------------------------------------------ */ --ease: cubic-bezier(.2, 0, .1, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: .12s; --t-base: .2s; --t-slow: .32s; --t-reveal: .7s; --reveal-y: 12px; /* ------------------------------------------------------------------------ 7. 重なり順 ------------------------------------------------------------------------ */ --z-sp-cta: 80; --z-drawer: 90; --z-header: 100; --z-skip: 200; } /* -------------------------------------------------------------------------- 8. ブレークポイント（値のメモ） 1024 以下 ヘッダーを 64px にしてハンバーガー 860 以下 FV と左右に分けた段を縦1列。画面下に資料請求ボタンを固定 680 以下 カードを1列。比較表は総括を表の外へ出す -------------------------------------------------------------------------- */ @media (max-width: 1024px) { :root { --hdr-h: 64px; } } @media (max-width: 767px) { :root { --fs-h2: 24px; --head-gap: 32px; } } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0s; --t-base: 0s; --t-slow: 0s; --t-reveal: 0s; --reveal-y: 0px; } }