/* ライト版（01 / index.html）：style.css のあとに読み込み、色のトークンだけを上書きする。
背景はグレーと白、文字は紺。MVのステージだけは紺のままにして、明るいページの中で目立たせる */
:root{
--ink:#F4F5F7;
--ink-2:#FFFFFF;
--panel:#FFFFFF;
--panel-2:#EDEFF3;
--line:#DADDE4;
--fg:#0B1020;
--muted:#545B6E;
--faint:#979DAD;
--accent:#4256F0;
--accent-hover:#2F42D6;
--accent-ink:#FFFFFF;
--signal:#F0A800; /* 差し色の黄色 */
--danger:#D13B3B;
--shadow-lg:0 26px 56px rgba(11,16,32,.20);
--shadow-sm:0 12px 30px rgba(11,16,32,.12);
--samples-bg:#E8EAEF;
--sample-bg:#FFFFFF;
--sample-line:#D6D9E1;
--thumb-bg:#E9EBF0;
--thumb-bar:#F7F8FB;
--stage-ring:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08);
--stage-bg:#0B1020;
--stage-bar:#080C18;
--stage-line:#26314F;
--stage-fg:#E8ECF7;
--stage-muted:#9AA6C4;
--chip-bg:#FFFFFF;
--chip-line:#DADDE4;
--code-bg:#070A14;
color-scheme:light;
}
/* 紺のステージの中は、ダーク版と同じ明るいアクセントを使う */
.stage{--accent:#7088FF;--signal:#FFC857;--accent-ink:#0B1020}
/* チップはステージの外（明るいページの上）にあるので、ページの文字色に戻す */
.chip{--stage-fg:#0B1020;--stage-muted:#545B6E;--stage-line:#DADDE4}
/* 白いカード同士の境目が出るよう、影を少し足す */
.sample,.price-table,.form-area,.scope-col:not(.opt){box-shadow:0 1px 2px rgba(11,16,32,.05),0 8px 24px rgba(11,16,32,.05)}
.hero-grid{--grid-op:.6}
/* ライト版：フォントは Noto Sans JP、ボタンは完全な角丸 */
:root{--f-display:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;--f-body:"Noto Sans JP","Hiragino Sans",sans-serif}
.btn{border-radius:4px}
/* 特徴の3つの柱は、白いセクションの上でグレーの面にする */
/* 特徴のカード：他のカード（サンプル・対応範囲・料金）と同じく、白い面＋細い線＋ごく薄い影にそろえる */
#features .feature{--panel:#FFFFFF;--panel-2:#F4F5F7}
#features .feature .ed{border-color:#E1E4EA;box-shadow:0 1px 0 rgba(11,16,32,.04),0 4px 14px rgba(11,16,32,.04)}
/* ---------- ライト版のセクション背景：線は使わず、色の面の切り替えだけで区切る ---------- */
main>section{border-bottom:0}
#samples{background-color:#E8EAEF}
#features{background-color:#FFFFFF}
#scope{background-color:#ECEEF2}
#price{background-color:#FFFFFF}
#flow{background-color:#ECEEF2}
#faq{background-color:#FFFFFF}
/* お悩みとお問い合わせは紺にして、ページの中でいちばん強いメリハリを出す */
#pains,#contact{
--ink:#0B1020;--panel:#121A30;--panel-2:#18213C;--line:#26314F;
--fg:#E8ECF7;--muted:#9AA6C4;--faint:#6B7697;
--accent:#7088FF;--accent-hover:#8A9DFF;--accent-ink:#0B1020;--signal:#FFC857;
background-color:#0B1020;color:var(--fg);color-scheme:dark}
/* フォームは紺の中でも白い面のまま */
#contact .form-area{
--ink:#F4F5F7;--panel:#FFFFFF;--panel-2:#EDEFF3;--line:#DADDE4;
--fg:#0B1020;--muted:#545B6E;--faint:#979DAD;
--accent:#4256F0;--accent-hover:#2F42D6;--accent-ink:#FFFFFF;--signal:#F0A800;
color:var(--fg);color-scheme:light;border:0;box-shadow:0 30px 60px rgba(0,0,0,.25)}
footer{background:#0B1020;--line:#26314F;--muted:#9AA6C4;--fg:#E8ECF7;--accent:#7088FF}
/* 黄色の上の文字は紺にする */
.brand em{color:#0B1020}
/* ---------- 引き締め（ライト版） ---------- */
/* 1. 大きな見出しの字間を詰める */
.hero h1{letter-spacing:-.025em}
.sec-head h2,.contact h2{letter-spacing:.01em}
.solve p{letter-spacing:.01em}
.feature h3,.s-title h3,.sub-head,.price-table .cap b,.price-card .lbl{letter-spacing:-.01em}
/* 3. 角丸と影を控えめにしてシャープに（ボタンの丸みはそのまま） */
.sample,.subf,.scope-col,.price-table,.price-card,.form-area{border-radius:6px}
.feature .ed{border-radius:6px}
.thumb,.spec{border-radius:4px}
.sample,.price-table,.form-area,.scope-col:not(.opt){box-shadow:0 1px 0 rgba(11,16,32,.04),0 4px 14px rgba(11,16,32,.04)}
#contact .form-area{box-shadow:0 20px 44px rgba(0,0,0,.28)}
/* h2横のライン：背景がグレーのセクションは白から、白のセクションはグレーから、背景色へ溶けていく */
#samples,#scope,#flow{--h2line:#FFFFFF}
#features,#price,#faq{--h2line:#D5D9E2}
#pains{--h2line:rgba(255,255,255,.22)}