/*
* bundlyze デザイントークン（試作 2026-10-06／Phase 1）
* 計画：docs/strategy/2026-10-06_サイト全体リデザイン計画.md 2-2(e)
* 決定（2026-10-06）：明るい地が基本。濃紺（--navy）は相談の帯など小さなアクセントだけ。
*
* 新しいブランドは作らない。いまの明るい地の値を1か所に集めただけ：
* - _deploy/assets/production-light.css の :root（--paper / --surface / --text / --rule / --brand …）
* - _deploy/assets/column.css の .col-page（--col-* ／ Noto Sans JP 本文・Noto Serif JP 見出し）
* - _redesign/home-2026-10/index.html の試作で足した --tint / --navy / --ink2
* 値は元のファイルと同じ。役割の名前（--bg, --ink …）で使い、古い名前は下の「互換」で同じ値を指す。
* 本番への組み込みは承認後（assets/tokens.css として全ページが読む形にする予定）。
*/
:root {
color-scheme: light;
/* ── 色：地 ── */
--bg: #fafbfc; /* production-light --paper（ページの地） */
--bg-alt: #eef2f9; /* HOME試作 --tint（セクションを交互に区切る） */
--surface: #ffffff; /* カード・ヘッダーのメニュー */
--surface-soft: #f1f3f6; /* production-light --surface-soft／column --col-soft(#f3f5f9) に近い */
/* ── 色：文字・線 ── */
--ink: #202838; /* --text / --col-text */
--ink-2: #3a4456; /* HOME試作 --ink2（リード文） */
--ink-muted: #586375; /* --text-muted / --col-muted */
--ink-faint: #687386; /* --text-faint（#fafbfc 上で 4.5:1 以上。column の #8a93a3 は文字に使わない） */
--line: rgba(32, 40, 56, .16); /* --rule */
--line-soft: rgba(32, 40, 56, .08); /* --rule-soft */
/* ── 色：ブランド・ボタン ── */
--brand: #0040ff;
--brand-hover: #0036d6;
--brand-ink: #2455c8; /* --brand-lt（青の文字リンクの濃いめ） */
--brand-soft: rgba(0, 64, 255, .13);
--brand-faint: rgba(0, 64, 255, .035);
--brand-light: #6e9bff; /* ロゴの薄い四角 */
--cta: var(--brand); /* ボタン専用。ブランド色と分けるかは【要確認】（決めること1の残り） */
--cta-hover: var(--brand-hover);
--cta-ink: #ffffff;
--navy: #0b1430; /* 小さなアクセントだけ（相談の帯など） */
--focus: var(--brand);
/* ── 文字 ── */
--font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
--font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
--font-en: "Inter", "Noto Sans JP", "Hiragino Sans", sans-serif;
--font-ui: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; /* ヘッダー・フッター・ボタン */
--fs-body: 16px;
--fs-small: 14px;
--fs-xs: 12.5px;
--fs-h3: 20px;
--fs-h2: clamp(1.75rem, 3.2vw, 2.25rem); /* 28〜36px */
--fs-h1: clamp(2rem, 4vw, 3rem); /* 32〜48px */
--lh-body: 1.9;
--lh-head: 1.5;
/* ── 余白（4の倍数） ── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--max: 1120px; /* 本文の最大幅（HOME試作） */
--max-wide: 1240px; /* ヘッダー・フッター（いまの .uh-in と同じ） */
--gut: 32px;
/* ── 角丸・影（1種類） ── */
--radius: 12px;
--radius-sm: 8px;
--radius-pill: 999px;
--shadow: 0 1px 2px rgba(32, 40, 56, .04), 0 12px 32px -18px rgba(32, 40, 56, .18); /* column --cx-shadow */
/* ── 共通部品の高さ ── */
--header-h: 72px; /* 2026-10-06 ヘッダー作り直し（PC 72px／スマホ 60px） */
--sticky-h: 64px;
/* ── 互換：いまのCSSが使っている名前（値は同じ）。全ページが移ったら外す ── */
--paper: var(--bg);
--text: var(--ink);
--text-muted: var(--ink-muted);
--text-faint: var(--ink-faint);
--rule: var(--line);
--rule-soft: var(--line-soft);
--tint: var(--bg-alt);
--ink2: var(--ink-2);
}
@media (max-width: 760px) {
:root { --gut: 16px; --header-h: 60px; }
}
/*
* ── スマホの文字と部品の大きさ（2026-10-06「スマホにも特化させて」）──
* 760px 以下で各ページの CSS がこの値を使う（pages.css・LP・HOME・コラム・chrome.css）。
* 決まり：読む文は 15px 未満にしない（本文 16px／行の高さ 1.85）。注記・札でも 13px 以上。
* 押すものは高さ 44px 以上（主なボタンは 52px・横いっぱい）。カードの内側は 16〜20px。
* 節の上下は 56〜72px。英字の大見出し（BUSINESS など）は 40〜52px に抑える。
*/
:root {
--m-fs-body: 16px; /* 本文 */
--m-lh-body: 1.85;
--m-fs-read: 15px; /* カード・表・FAQの答えなど、詰めて読む文の下限 */
--m-fs-lead: 16px; /* リード文（見出しの下の文） */
--m-lh-lead: 1.9;
--m-fs-cap: 13px; /* 注記・日付・札（これより小さくしない） */
--m-fs-label: 14px; /* 入力欄の名前・小見出しの添え書き */
--m-fs-h1: clamp(26px, 7.4vw, 30px);
--m-fs-h2: clamp(24px, 6.6vw, 27px); /* 375で約24.8px・414で約27px */
--m-fs-h3: 18px; /* カードの題 */
--m-fs-h4: 17px;
--m-fs-disp: clamp(40px, 12.4vw, 52px); /* 英字の大見出し（BUSINESS / STRENGTH / FAQ …） */
--m-lh-head: 1.5;
--m-sec-y: 64px; /* 節の上下 */
--m-sec-y-sm: 48px; /* 続きの節・帯 */
--m-gap-head: 28px; /* 見出しのまとまりと中身の間 */
--m-card-pad: 18px; /* カードの内側 */
--m-card-gap: 12px; /* カードの間 */
--m-radius: 12px;
--m-tap: 44px; /* 押すものの最小の高さ */
--m-btn-h: 52px; /* 主なボタンの高さ */
--m-btn-fs: 16px;
--m-input-h: 52px; /* 入力欄の高さ（文字は 16px＝iOSで拡大されない） */
--m-input-fs: 16px;
}
/*
* ── 改行の道具（2026-10-06）──
* 見出し・リード文の行を、PCとスマホで別に決めるための小さな部品。どのページも tokens.css を読むので、ここに置く。
* PC＝1024px以上／スマホ＝760px以下。その間（タブレット）はどちらの指定も効かず、文節（ZWSP）で流れる。
* .nw 折り返さない（社名・地名・数と単位・ボタンの文字）
* .br-pc PCだけの改行（
。文の終わり「。」の後で次の文を行頭から始めたいとき）
* .br-sp スマホだけの改行
* .ln-pc PCだけ1行にする塊（…。スマホでは文字の流れのまま）
* .ln-sp スマホだけ1行にする塊
* .vh-pc / .vh-sp その幅でだけ見えなくする文字。改行の位置に来る「、」に付ける（見出しの行末に「、」を残さない決まり。読み上げとコピーには残る）
*/
.nw{white-space:nowrap}
@media (max-width:1023px){.br-pc{display:none}}
@media (min-width:761px){.br-sp{display:none}}
@media (min-width:1024px){
.ln-pc{display:block}
.vh-pc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:760px){
.ln-sp{display:block}
.vh-sp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* 見出しの「、」が行末に来たとき（jp-tune.mjs のスクリプトが .is-end を付ける）。幅は残して見えなくする */
.jp-cm.is-end{color:transparent}
.jp-cm{display:inline!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
.jp-cm.is-end{color:transparent!important}
/* jp_breaks.py は見出しを「、。？！」の句ごとに .jp-ph で包む。句を折り返しのまとまりにして、まず句の切れ目で改行させる（pages.css と同じ。全ページに効かせる） */
.jp-ph{display:inline-block}