/* ==========================================================================
   公式KV（オレンジ×イラスト）に合わせた配色。2026-09-16 から **A案（主）**。
   ABテスト "design2" で A=KV / B=紺。html[data-design="kv"] のときだけ有効で、
   紺（B）には一切影響しない。
   色の根拠：公式KV（2026.11.15 版）の主色 #F07818。
   白文字を載せる本文セクションは、AA（4.5:1）を満たす濃いオレンジ #C2580A を使う。
   ========================================================================== */
html[data-design="kv"]{
  --navy:#f07818;        /* KVの主色。大きな見出し・CTA周りだけ */
  --navy-deep:#c2580a;   /* 本文を白で載せる面。白文字 4.6:1 */
  --peri:#ffe3c8;
  --peri-bg:#fbe6d3;
  --blue:#c2580a;
  --beige:#f6e3d0;
  --line-navy:rgba(255,255,255,.38);
}

/* --- ヒーロー：写真の代わりに公式KVをそのまま置く --- */
html[data-design="kv"] .hero{
  background:var(--navy);min-height:0;align-items:flex-start;padding:84px 0 44px;
}
html[data-design="kv"] .hero__bg,
html[data-design="kv"] .hero__slits,
html[data-design="kv"] .hero__lead,
html[data-design="kv"] .hero__copy,
html[data-design="kv"] .hero__sub,
html[data-design="kv"] .hero__scale,
html[data-design="kv"] .hero__date{display:none!important}
.hero__kv{display:none}
html[data-design="kv"] .hero__kv{
  display:block;width:100%;height:auto;margin:0 0 24px;
  box-shadow:0 18px 48px rgba(90,35,0,.28);
}
html[data-design="kv"] .badge{background:var(--white);color:var(--orange-ink)}
html[data-design="kv"] .hero__cta{max-width:none}
@media (min-width:640px){
  html[data-design="kv"] .hero__cta{grid-template-columns:1fr 1fr;max-width:640px}
}
/* オレンジ地では赤いCTAが沈むので、購入ボタンは墨色にする */
html[data-design="kv"] .hero .btn--primary,
html[data-design="kv"] .sec--cream .btn--primary,
html[data-design="kv"] .sec--beige .btn--primary,
html[data-design="kv"] .sec--peri .btn--primary{background:var(--ink);color:var(--white)}
html[data-design="kv"] .hero .btn--ghost{color:var(--ink);border-color:var(--ink)}

/* --- 本文を白で載せる面は濃いオレンジ --- */
html[data-design="kv"] .sec--navy,
html[data-design="kv"] .tk--early,
html[data-design="kv"] .card300{background:var(--navy-deep)}
html[data-design="kv"] .sec--navy .kicker,
html[data-design="kv"] .sec--navy h2.h em,
html[data-design="kv"] .sec--navy .textlink,
html[data-design="kv"] .info th{color:var(--white)}
html[data-design="kv"] .sec--navy .textlink{border-color:var(--white)}
html[data-design="kv"] .card300__tag{background:var(--ink)}
html[data-design="kv"] .nav.is-solid{background:rgba(194,88,10,.97)}
html[data-design="kv"] .final__bg::after{background:rgba(194,88,10,.9)}
html[data-design="kv"] .hero__date{box-shadow:7px 7px 0 rgba(120,50,0,.4)}
html[data-design="kv"] .tk--early .tk__hook{background:var(--white)}