/* BLOOM CONSULTING デザイントークン トンマナ＝「静かな知性と、芽吹き」：BLOOMブルー＋ウォームグレー＋余白 禁止：誇張・！マーク・煽り・塗りCTAの多用・過剰装飾 */ /* ============================================================ 🔴 box-sizing を最初に宣言する 親テーマ（SWELL）は要素によって content-box を使っている。 指定を省くと、.bcs-wrap の左右パディング22pxが幅に加算され、 モバイルで44pxはみ出して文字が右端で切れる（実機で確認した不具合）。 ============================================================ */ *, *::before, *::after { box-sizing: border-box; } :root{ --blue:#2781C3; --blue-ink:#1E6BA3; /* 🔴 白文字を載せる面の専用トークン（留学デスクの --coral-btn / --on-coral と同じ考え方）。 ブランド色 --blue(#2781C3) は白背景で 4.19:1。罫線やアイコン（3:1基準）には使えるが、 文字を載せると WCAG AA(4.5:1) を満たさない。 ライト = 濃い青に白文字 5.70:1（hover +6% 後も 5.21:1） ダーク = 明るい青に濃い文字 7.73:1（暗い面では地と文字を反転させる） */ --blue-btn:#1E6BA3; --on-blue:#FFFFFF; --blue-soft:#6CA9D6; --grey:#565657; --bg:#F3F5F6; --surface:#FFFFFF; --surface-2:#F8FAFA; --ink:#20303C; --ink-soft:#43535F; --muted:#5F6C77; --faint:#98A3AC; --line:#E3E8EA; --line-2:#EDF1F2; --good:#2E7D57; --warn:#B4771E; --crit:#B23A48; --shadow:0 1px 2px rgba(30,45,60,.04),0 10px 28px -14px rgba(30,45,60,.14); --shadow-lg:0 2px 6px rgba(30,45,60,.06),0 26px 56px -22px rgba(30,45,60,.22); /* 見出しに明朝を一差し＝品位（本文はゴシック） */ --font-serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif; --font-sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif; --font-mono:"SFMono-Regular",Menlo,Consolas,monospace; --r:15px; --r-sm:10px; --wrap:1040px; } /* 🔴 ダークモードは「いまは出さない、あとで出せる」状態にしてある。 ・OSの設定に自動追従させない（@media の prefers-color-scheme は使わない） ＝ 誰も見ていない配色が、そのままお客さまに出るのを防ぐため ・配色そのものは下の :root[data-theme="dark"] に残してある 将来ダークを出すときは、 に data-theme="dark" を付けるだけで生きる。 そのときは必ず全ページを実際に描画して確かめること（白カード基調のため崩れやすい）。 */ :root[data-theme="dark"]{ --blue:#5AA6DE; --blue-ink:#7FB9E5; --blue-soft:#4E92C8; --grey:#AEB0B0; --blue-btn:#7FB9E5; --on-blue:#0B2233; --bg:#0F1519; --surface:#171F25; --surface-2:#131A1F; --ink:#E9EEF0; --ink-soft:#C0CAD0; --muted:#93A0A8; --faint:#6E7A83; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055); } :root[data-theme="light"]{ --blue:#2781C3; --blue-ink:#1E6BA3; --blue-soft:#6CA9D6; --grey:#565657; --blue-btn:#1E6BA3; --on-blue:#FFFFFF; --bg:#F3F5F6; --surface:#FFFFFF; --surface-2:#F8FAFA; --ink:#20303C; --ink-soft:#43535F; --muted:#5F6C77; --faint:#98A3AC; --line:#E3E8EA; --line-2:#EDF1F2; } .bcs-wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px} .bcs-narrow{max-width:760px} .bcs-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:24px} .bcs-h1{font-family:var(--font-serif); font-weight:600; font-size:clamp(25px,4.6vw,40px); line-height:1.34; margin:0; text-wrap:balance} .bcs-h2{font-family:var(--font-serif); font-weight:600; font-size:clamp(19px,3vw,26px); margin:0; text-wrap:balance} .bcs-lead{color:var(--ink-soft); margin-top:14px; max-width:64ch} .bcs-eyebrow{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-ink); font-weight:600} .bcs-muted{color:var(--muted); font-size:13px} .tabnum{font-variant-numeric:tabular-nums} .bcs-btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:13px 26px; border-radius:11px; text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:inherit} /* 🔴 ブランド色 --blue(#2781C3) は白背景で 4.19:1。 ボタンは 15px/600 ＝ WCAG上「通常テキスト」扱いで 4.5:1 が要る（大文字の3:1ではない）。 ブランド色そのものは変えず、白文字を載せるここだけ --blue-ink(5.70:1) にする。 hover の brightness(1.06) 後も 5.21:1 で AA を保つ。 */ .bcs-btn-primary{background:var(--blue-btn); color:var(--on-blue)} .bcs-btn-primary:hover{filter:brightness(1.06)} .bcs-btn-primary:disabled{opacity:.6; cursor:default} .bcs-btn-ghost{color:var(--blue-ink); border-color:color-mix(in srgb,var(--blue) 32%,var(--line)); background:var(--surface)} .bcs-btn-ghost:hover{background:color-mix(in srgb,var(--blue) 7%,var(--surface))} :where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px} @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}