/* FBC 法務ページ共通スタイル（privacy.html / law.html）
トンマナの正本は FBC_DESIGN_SYSTEM.md */
:root{
/* --- Layer 1: ブランド原色。テーマで動かさない ---
白地セクションの緑チップ（.p-check .g-no .limit .gchip.on 等）が参照し続けるため。
rgba() の中に var() は入れられないので RGB チャンネルを正とし、HEX はそこから導出する。
color-mix は使わない（Safari 16.2 未満で宣言ごと無効化され .hd の背景が透明になる）。 */
--fbc-green-rgb:11,58,45; --fbc-green:rgb(var(--fbc-green-rgb));
--fbc-deep-rgb:6,36,25; --fbc-deep:rgb(var(--fbc-deep-rgb));
--fbc-lift-rgb:18,81,59; --fbc-lift:rgb(var(--fbc-lift-rgb));
--gold-rgb:199,162,72; --gold:rgb(var(--gold-rgb));
--fbc-sage:#8FBFA6;
--noir-rgb:12,16,14; --noir:rgb(var(--noir-rgb));
--noir-deep-rgb:6,9,7; --noir-deep:rgb(var(--noir-deep-rgb));
--noir-lift:#122A21;
--emerald-rgb:46,139,98; --sage-bright:#6FCB9F;
/* --- Layer 2: 明色面。両テーマ共通。noir ブロックには書かない --- */
--ink:#1D1F1E;
--ink-soft:#41443F;
--gray:#6A6E6B;
--faint:#9A9E9B;
--line:#E3E6E2;
--track:#E8EBE7;
--bg:#F7F8F6;
--wash:#FBFCFA;
--paper:#FFFFFF;
--on-brand:#FFFFFF;
--err-on-light:#A2453C;
--marker:rgba(var(--gold-rgb),.27);
/* --- Layer 3: 濃色面。値は forest。:root[data-theme="noir"] が上書きする ---
深緑 #0B3A2D と墨黒 #0C100E は地の輝度が 6.8倍違い、同じαが同じ知覚階層を生まない
（白 .06 を乗せたときの輝度上昇が ×1.48 と ×2.62）。noir 側でαを引き直している。 */
--surface-dark:var(--fbc-green);
--surface-dark-deep:var(--fbc-deep);
--surface-dark-lift:var(--fbc-lift);
--surface-dark-rgb:var(--fbc-green-rgb);
--surface-deep-rgb:var(--fbc-deep-rgb);
--veil-rgb:255,255,255;
--label:var(--fbc-sage);
--on-dark:#FFFFFF;
--on-dark-90:rgba(var(--veil-rgb),.90);
--on-dark-84:rgba(var(--veil-rgb),.84);
--on-dark-72:rgba(var(--veil-rgb),.72);
--on-dark-50:rgba(var(--veil-rgb),.50);
--sf-wash:rgba(var(--veil-rgb),.04);
--sf-card:rgba(var(--veil-rgb),.06);
--sf-chip:rgba(var(--veil-rgb),.12);
--sf-chip-2:rgba(var(--veil-rgb),.14);
--rl-hair:rgba(var(--veil-rgb),.09);
--rl-row:rgba(var(--veil-rgb),.13);
--rl-card:rgba(var(--veil-rgb),.16);
--rl-div:rgba(var(--veil-rgb),.20);
--rl-head:rgba(var(--veil-rgb),.26);
--rl-ui:rgba(var(--veil-rgb),.40);
--scrim:rgba(var(--surface-deep-rgb),.62);
--err-on-dark:#F3C7C2;
--gold-line:rgba(var(--gold-rgb),.55);
/* 濃色面のCTA。「明るい面＋濃い文字」を両テーマで維持する（値だけがテーマで変わる） */
--cta-bg:#FFFFFF;
--cta-fg:var(--fbc-green);
--cta-bg-hover:var(--fbc-sage);
--cta-fg-hover:var(--fbc-deep);
--cta-ghost-bd:rgba(var(--veil-rgb),.55);
--cta-ghost-hover:rgba(var(--veil-rgb),.12);
--fig-shadow:0 24px 60px rgba(0,0,0,.34);
--modal-shadow:0 24px 70px rgba(0,0,0,.35);
/* 法務ページ固有 */
--todo-bg:#FCF6E4;
--todo-line:#E0CE9B;
--todo-ink:#8A6D1F;
--serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",YuMincho,"MS PMincho",serif;
/* サイト全体を明朝で統一する方針。小さい文字がゴシックに落ちるのを防ぐため
--sans も明朝を指す（変数名は既存の参照箇所を壊さないよう残している） */
--sans:var(--serif);
}
/* --- Layer 3 の noir 上書き。index.html の同ブロックと値を揃えること ---
深緑 #0B3A2D と墨黒 #0C100E は地の輝度が 6.8倍違うため、同じαが同じ知覚階層を生まない。
noir 側はαを引き直している（装飾罫は×0.72、ただしUI罫とゴースト枠は WCAG 1.4.11 の
3:1 床から個別に計算し直す）。ここに書くのは濃色面トークンだけ。明色面には触れない。 */
:root[data-theme="noir"]{
--surface-dark:var(--noir);
--surface-dark-deep:var(--noir-deep);
--surface-dark-lift:var(--noir-lift);
--surface-dark-rgb:var(--noir-rgb);
--surface-deep-rgb:var(--noir-deep-rgb);
--veil-rgb:226,240,233; /* わずかに緑を含む白。枠線が灰色でなく「緑を帯びた光」になる */
--label:var(--sage-bright); /* 墨黒地 9.78:1 */
--on-dark:#FFFFFF; /* 19.16:1 */
--on-dark-90:rgba(var(--veil-rgb),.75);
--on-dark-84:rgba(var(--veil-rgb),.69);
--on-dark-72:rgba(var(--veil-rgb),.61);
--on-dark-50:rgba(var(--veil-rgb),.44);
--sf-wash:rgba(var(--veil-rgb),.030);
--sf-card:rgba(var(--veil-rgb),.045);
--sf-chip:rgba(var(--veil-rgb),.09);
--sf-chip-2:rgba(var(--veil-rgb),.105);
--rl-hair:rgba(var(--veil-rgb),.065);
--rl-row:rgba(var(--veil-rgb),.095);
--rl-card:rgba(var(--veil-rgb),.09);
--rl-div:rgba(var(--veil-rgb),.145);
--rl-head:rgba(var(--veil-rgb),.19);
--rl-ui:rgba(var(--veil-rgb),.36); /* 3:1 床から。装飾と同じ×0.72だと割る */
--scrim:rgba(var(--surface-deep-rgb),.58);
--gold-line:rgba(var(--gold-rgb),.62);
--cta-bg:#E8E2D4; /* 純白は墨黒地で発光しすぎる。温白へ */
--cta-fg:var(--fbc-green); /* 9.81:1 */
--cta-bg-hover:var(--sage-bright);
--cta-fg-hover:var(--noir-deep);
--cta-ghost-bd:rgba(var(--veil-rgb),.48); /* 3:1 床から。×0.72 だと 3.54:1 で割る */
--cta-ghost-hover:rgba(var(--veil-rgb),.10);
--fig-shadow:0 24px 60px rgba(0,0,0,.60);
--modal-shadow:0 24px 70px rgba(0,0,0,.55);
}
*{box-sizing:border-box;}
html{background:var(--surface-dark-deep);}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
font-size:15px;line-height:2;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.55;}
p{margin:0;}
a{color:var(--fbc-lift);}
:focus-visible{outline:2px solid var(--fbc-lift);outline-offset:2px;
box-shadow:0 0 0 4px rgba(var(--veil-rgb),.85);}
/* header */
.hd{background:var(--surface-dark);}
.hd-in{max-width:820px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px;}
.logo{display:flex;align-items:baseline;gap:9px;color:var(--on-dark);text-decoration:none;}
.logo b{font-family:var(--serif);font-size:22px;letter-spacing:.06em;font-weight:600;}
.logo span{font-size:10px;letter-spacing:.16em;color:var(--label);}
.back{margin-left:auto;color:var(--on-dark-90);font-size:12.5px;text-decoration:none;
border:1px solid var(--rl-ui);padding:7px 15px;border-radius:3px;}
.back:hover{background:var(--cta-ghost-hover);}
/* page */
.page{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,68px) 24px clamp(56px,8vw,88px);}
.page-h{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:34px;}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--fbc-lift);}
.page-h h1{font-size:clamp(22px,3vw,29px);margin-top:12px;}
.page-h .upd{margin-top:14px;font-size:12.5px;color:var(--faint);}
.lead{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--fbc-green);
padding:22px 26px;font-size:14.5px;line-height:2.05;margin-bottom:38px;}
/* 記入待ちの目印。長文の【要記入】もあるため折り返しを禁止しないこと */
.todo{background:var(--todo-bg);border:1px dashed var(--todo-line);color:var(--todo-ink);
padding:1px 9px;border-radius:2px;font-size:13px;font-weight:600;
display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.notice{background:var(--todo-bg);border:1px solid var(--todo-line);padding:18px 22px;
font-size:13.5px;line-height:1.95;color:#6D5615;margin:26px 0;}
.notice b{color:var(--todo-ink);}
/* 定義表（特商法） */
.tbl{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);}
.tbl th{width:210px;text-align:left;vertical-align:top;font-size:13.5px;font-weight:600;
color:var(--fbc-green);background:var(--wash);padding:16px 20px;border-bottom:1px solid var(--line);}
.tbl td{font-size:14.5px;padding:16px 20px;border-bottom:1px solid var(--line);line-height:1.95;}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:none;}
.tbl small{display:block;color:var(--gray);font-size:12.5px;line-height:1.85;margin-top:6px;}
/* 条文（プライバシー） */
.art{margin-top:38px;}
.art h2{font-size:17.5px;display:flex;align-items:baseline;gap:11px;padding-bottom:11px;
border-bottom:1px solid var(--line);margin-bottom:16px;}
.art h2 i{font-style:normal;font-family:var(--sans);font-size:11px;font-weight:700;
letter-spacing:.1em;color:var(--on-brand);background:var(--fbc-green);padding:4px 9px;border-radius:2px;flex:none;}
.art p+p{margin-top:14px;}
.art ul,.art ol{margin:14px 0 0;padding-left:1.4em;}
.art li{font-size:14.5px;line-height:1.95;margin-bottom:7px;}
.art .sub{font-size:13.5px;color:var(--gray);}
/* footer */
.ft{background:var(--surface-dark-deep);color:var(--on-dark-72);font-size:12.5px;}
.ft-in{max-width:820px;margin:0 auto;padding:30px 24px 38px;display:flex;flex-wrap:wrap;gap:14px 28px;}
.ft a{color:var(--on-dark-84);}
.ft .cp{width:100%;color:var(--on-dark-50);font-size:11.5px;}
@media (max-width:640px){
.tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto;}
.tbl th{border-bottom:none;padding:14px 18px 0;}
.tbl td{padding:6px 18px 16px;}
.tbl tr{border-bottom:1px solid var(--line);}
.tbl tr:last-child{border-bottom:none;}
}