/* ================================================================
   d03 テーマCSS — A群（配色違い5案）× B群（配色場所5案）
   - data-color="A1"〜"A5" : パレット選択（A5=既存紺×ゴールド）
   - data-layout="B1"〜"B5" : 塗る場所選択（無指定 = A群既定）
================================================================ */

/* :root にA1のフォールバック */
:root{
  --accent:#094777;        --accent-deep:#2a87c0;        --accent-soft:#eef1f6;
  --accent2:#01233c;       --accent2-deep:#01233c;       --accent2-soft:#a3d9ff;
  --gray:#5a6478;          --surface:#eef1f6;
  --bg:#ffffff;            --paper:#fafbfc;
  --ink:#15192a;           --ink-soft:#3d4252;           --line:#d6dce5;
}

/* ============ A群 配色変数 ============ */
/* A1: ネイビー × スカイブルー */
html[data-color="A1"]{
  --accent:#094777;        --accent-deep:#2a87c0;        --accent-soft:#eef1f6;
  --accent2:#01233c;       --accent2-deep:#01233c;       --accent2-soft:#a3d9ff;
}
/* A2: ライトスカイ × コーラル */
html[data-color="A2"]{
  --accent:#0288D1;        --accent-deep:#01649C;        --accent-soft:#E1F2FB;
  --accent2:#E76F51;       --accent2-deep:#B8553B;       --accent2-soft:#F4A28C;
}
/* A3: ターコイズ × サンド */
html[data-color="A3"]{
  --accent:#00BCD4;        --accent-deep:#015F69;        --accent-soft:#DCF3F6;
  --accent2:#C9A574;       --accent2-deep:#9C7B4E;       --accent2-soft:#DEC196;
}
/* A4: シャーベット × ローズ */
html[data-color="A4"]{
  --accent:#5BB6E8;        --accent-deep:#1F5E85;        --accent-soft:#EAF6FB;
  --accent2:#E5779F;       --accent2-deep:#A03963;       --accent2-soft:#F0A4BF;
}
/* A5: 既存（紺×ゴールド） */
html[data-color="A5"]{
  --accent:#1a2942;        --accent-deep:#0f1a2e;        --accent-soft:#eef1f6;
  --accent2:#a08753;       --accent2-deep:#5e4e2c;       --accent2-soft:#c4a872;
}

/* ============ A群既定: .svc-cta-aside の基本（濃色背景・白文字） ============ */
.svc-cta-aside{background:var(--accent-deep);color:#fff;}
.svc-cta-aside-title{color:inherit;}
.svc-cta-aside-text{color:inherit;}

/* ============ B群 塗る場所違い ============ */

/* B5: 全面塗り（hero/section-alt/footer すべて濃色） */
html[data-layout="B5"] .hero{background:var(--accent-deep);color:#fff;}
html[data-layout="B5"] .hero h1,
html[data-layout="B5"] .hero-lead{color:#fff;}
html[data-layout="B5"] .section-alt{background:var(--accent-deep);color:#fff;}
html[data-layout="B5"] .section-alt .sec-title,
html[data-layout="B5"] .section-alt .sec-sub{color:#fff;}
html[data-layout="B5"] .svc-cta-aside{background:var(--accent-deep);color:#fff;}

/* B2: hero+footer大胆 / 中央(svc-cta-aside)は白 */
html[data-layout="B2"] .hero{background:var(--accent-deep);color:#fff;}
html[data-layout="B2"] .hero h1,
html[data-layout="B2"] .hero-lead{color:#fff;}
html[data-layout="B2"] .footer{background:var(--accent-deep);}
html[data-layout="B2"] .svc-cta-aside{background:#fff;color:var(--ink-soft);}
html[data-layout="B2"] .svc-cta-aside-title{color:var(--accent-deep);border-left-color:var(--accent2);}
html[data-layout="B2"] .svc-cta-aside-text{color:var(--ink-soft);}

/* B3: セクション交互に色帯 */
html[data-layout="B3"] #about,
html[data-layout="B3"] #worries,
html[data-layout="B3"] #voice{background:var(--accent-soft);}
html[data-layout="B3"] .svc-cta-aside{background:var(--accent-deep);color:#fff;}

/* B4: 上下サンド（nav + footer 濃色） */
html[data-layout="B4"] .nav{background:var(--accent-deep);border-bottom-color:transparent;}
html[data-layout="B4"] .nav .brand .jp{color:#fff;}
html[data-layout="B4"] .nav .brand .en{color:rgba(255,255,255,0.7);}
html[data-layout="B4"] .nav-links{color:rgba(255,255,255,0.85);}
html[data-layout="B4"] .nav-links a:hover{color:#fff;}
html[data-layout="B4"] .nav-cta{background:var(--accent2);}
html[data-layout="B4"] .footer{background:var(--accent-deep);}
html[data-layout="B4"] .svc-cta-aside{background:var(--accent-soft);color:var(--ink-soft);}
html[data-layout="B4"] .svc-cta-aside-title{color:var(--accent-deep);border-left-color:var(--accent2);}
html[data-layout="B4"] .svc-cta-aside-text{color:var(--ink-soft);}

/* B1: 上部（ヒーロー＋個人/法人バナー）を白背景・色文字に反転 */
html[data-layout="B1"] .nav{background:var(--accent-soft);}
html[data-layout="B1"] .hero{background:#fff;color:var(--accent-deep);}
html[data-layout="B1"] .hero h1{color:var(--accent-deep);}
html[data-layout="B1"] .hero-lead{color:var(--ink-soft) !important;}
html[data-layout="B1"] .hero-eyebrow{color:var(--accent2);}
html[data-layout="B1"] .hero-rule{background:var(--accent2);}
html[data-layout="B1"] .hero-visual{border-color:var(--line);}
html[data-layout="B1"] .btn-ghost{color:var(--accent-deep);border-color:var(--accent-deep);}
html[data-layout="B1"] .btn-ghost:hover{border-color:var(--accent2);color:var(--accent2);}
html[data-layout="B1"] #about{background:var(--accent-soft);}
html[data-layout="B1"] #services{background:#fff;}
html[data-layout="B1"] #worries{background:var(--accent-soft);}
html[data-layout="B1"] #gallery{background:#fff;}
html[data-layout="B1"] #voice{background:var(--accent-soft);}
html[data-layout="B1"] #area{background:#fff;}
html[data-layout="B1"] .customer-banner{background:#fff;color:var(--accent-deep);border-top-color:var(--line);}
html[data-layout="B1"] .customer-banner-kicker{color:var(--accent2);}
html[data-layout="B1"] .customer-banner-title{color:var(--accent-deep);}
html[data-layout="B1"] .customer-banner-text{color:var(--ink-soft);}