/* 色の再案 第2版（2026-11-15）。ブランドガイドラインの色は使わず、色だけを差し替える。
   G2の指示：赤＋黒はなし。灰色も使わない（地・線・補足の文字も、案の色みを帯びた色にする）。ロゴは白・黒・eureka navy だけ。
   参考：designbookmark.com の website-builders に並ぶサイト（白い地に鮮やかな色を1つ、冒頭に写真や画面を大きく置く作り）。
   <html data-theme="1|2|3|4"> のときだけ効く。data-theme がないときは base.css のまま（ブランド色）。
   文字と背景の組み合わせは WCAG 2.2 AA（ふつうの文字 4.5:1、入力欄の枠などは 3:1）で計算して選んだ。 */

/* 案1：白とコバルト */
html[data-theme="1"]{
  --navy:#0D1A47;--mid:#2747E6;--slate:#8EA0F0;--pale:#C9D3FB;--light:#F5F7FF;
  --ink:#0D1A47;--sub:#33427A;--line:#D9E0FC;--bg:#FFFFFF;--bg2:#EEF2FF;--stage:#EAF0FF;--ghost:#A9B7F3;
  --acc:#2747E6;--on-acc:#FFFFFF;--acc-line:#2747E6;--acc-text:#2747E6;--field:#5C74E8;
  --dark2:#1B2E7A;--onDark:#DCE3FF;--shade:13,26,71;--surface:#FFFFFF;--okbg:#E6F0FF;--photo-back:#2747E6;
  --accent:#0D1A47;--accent2:#2747E6;
  --ring:#2747E6,#0D1A47,#3E5CF0,#1B2E7A,#5C74E8,#14246A,#2F52F2,#22378F,#4763EE,#10205A;
}
/* 案2：森と生成り */
html[data-theme="2"]{
  --navy:#183A2E;--mid:#2F6B55;--slate:#86AE98;--pale:#CFE0D4;--light:#F6F3EA;
  --ink:#16261E;--sub:#35503F;--line:#DCE5D8;--bg:#FBFAF5;--bg2:#F1EEE4;--stage:#ECF1E6;--ghost:#9FC0AC;
  --acc:#9C5518;--on-acc:#FFFFFF;--acc-line:#C27A2C;--acc-text:#9C5518;--field:#5E8A72;
  --dark2:#245243;--onDark:#DCEBDF;--shade:16,40,31;--surface:#FFFFFF;--okbg:#EAF1EC;--photo-back:#C27A2C;
  --accent:#183A2E;--accent2:#2F6B55;
  --ring:#183A2E,#245243,#9C5518,#2F5E4D,#2F6B55,#1F4637,#7A4A1F,#36695A,#12302A,#4E7C64;
}
/* 案3：白黒とライム（補足の文字も黒。面はライムを薄めた色） */
html[data-theme="3"]{
  --navy:#111114;--mid:#3F5A00;--slate:#9DBB4C;--pale:#DCEFA8;--light:#F8FDE8;
  --ink:#111114;--sub:#26262E;--line:#E2F0BC;--bg:#FFFFFF;--bg2:#F3FAD9;--stage:#F0F8D2;--ghost:#BFD97A;
  --acc:#C6F432;--on-acc:#111114;--acc-line:#111114;--acc-text:#3F5A00;--field:#6E8F1E;
  --dark2:#1E2610;--onDark:#EEF8CF;--shade:17,17,20;--surface:#FFFFFF;--okbg:#EEF9CC;--photo-back:#C6F432;
  --accent:#111114;--accent2:#3F5A00;
  --ring:#111114,#3F5A00,#1E2610,#2C3A0A,#4E6B0A,#18200A,#33470A,#111114,#5A7A10,#222C0C;
}
/* 案4：白とバイオレット */
html[data-theme="4"]{
  --navy:#1A1240;--mid:#5B34E0;--slate:#A994F2;--pale:#D9CCFF;--light:#F8F5FF;
  --ink:#1A1240;--sub:#45397A;--line:#E4DBFF;--bg:#FFFFFF;--bg2:#F4F0FF;--stage:#F0EAFF;--ghost:#BBA9F5;
  --acc:#5B34E0;--on-acc:#FFFFFF;--acc-line:#5B34E0;--acc-text:#5B34E0;--field:#8B70EE;
  --dark2:#3A23A8;--onDark:#E6DEFF;--shade:26,18,64;--surface:#FFFFFF;--okbg:#EFE9FF;--photo-back:#5B34E0;
  --accent:#1A1240;--accent2:#5B34E0;
  --ring:#5B34E0,#1A1240,#7350F0,#3A23A8,#8B70EE,#2A1A78,#6A44EA,#2F1E8C,#7E5FF0,#22165A;
}

html[data-theme] body{background:var(--bg)}
html[data-theme] .eyebrow{color:var(--acc-text)}
html[data-theme] a{color:var(--ink)}

/* ロゴ：白・黒・eureka navy だけを使う。青と紫の案は紺のまま、緑とライムの案は黒 */
html[data-theme="2"] .hd .logo img,html[data-theme="2"] .ft .brand img,
html[data-theme="3"] .hd .logo img,html[data-theme="3"] .ft .brand img{filter:brightness(0)}
html[data-theme] .hd{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom-color:var(--line)}

/* ボタン：主ボタンはアクセント色 */
html[data-theme] .btn{border-color:var(--navy)}
html[data-theme] .btn-p,html[data-theme] .hd nav a.btn-p{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
@media (hover:hover){html[data-theme] .btn-p:hover{background:var(--acc);filter:brightness(.9)}}
html[data-theme] .btn-s{background:var(--surface);color:var(--navy)}
/* 案3：ライムのボタンは白い面との境目が弱いので、黒い枠を付ける */
html[data-theme="3"] .btn-p,html[data-theme="3"] .hd nav a.btn-p{border-color:var(--navy)}
/* 暗い面の上の主ボタン：青・緑・紫は白地にアクセント色の文字（暗い面との境目をはっきりさせる） */
html[data-theme] .cta .btn-p{background:#fff;color:var(--acc-text);border-color:#fff}
html[data-theme="3"] .cta .btn-p{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}

/* 冒頭：明るい地に、右側に写真（映像があれば同じ枠に流れる） */
html[data-theme] .hero{background:var(--bg);color:var(--ink)}
html[data-theme] .hero .shade{display:none}
html[data-theme] .hero .media{left:auto;right:calc(max(var(--gut),(100% - var(--wrap)) / 2) + 24px);top:72px;bottom:72px;width:min(40%,480px);border-radius:28px;overflow:hidden;box-shadow:24px 24px 0 var(--photo-back)}
html[data-theme] .hero .poster{background-color:var(--bg2);background-size:cover;background-position:center;background-repeat:no-repeat}
html[data-theme] .hero .wrap{min-height:min(80vh,720px);min-height:min(80svh,720px);padding-top:72px;padding-bottom:72px}
html[data-theme] .hero .wrap>*{max-width:min(50%,600px)}
html[data-theme] .tagline,html[data-theme] .hero h1{color:var(--ink)}
html[data-theme] .tagline{color:var(--acc-text)}
html[data-theme="3"] .tagline{color:var(--ink)}
html[data-theme] .hero p{color:var(--sub)}
html[data-theme] .hero .btn-s{background:var(--surface);color:var(--navy);border-color:var(--navy)}
html[data-theme] .hero .badge{position:static;width:auto;height:auto;border-radius:12px;padding:12px 16px;display:block;text-align:left;box-shadow:none;justify-self:start;background:var(--bg2);color:var(--ink);border:1px solid var(--line)}
html[data-theme] .hero .badge b{display:inline;margin-right:8px;color:var(--acc-text)}
html[data-theme] .hero .reelnote{color:var(--sub)}
html[data-theme] .pausebtn{right:calc(var(--gut) + 16px);bottom:88px;background:rgba(var(--shade),.6)}
html[data-theme] .hero :focus-visible{outline-color:var(--navy)}
@media (max-width:860px){
  html[data-theme] .hero .media{position:relative;inset:auto;right:auto;width:auto;margin:24px var(--gut) 0;aspect-ratio:16/10;box-shadow:12px 12px 0 var(--photo-back)}
  html[data-theme] .hero .wrap{min-height:0;padding-top:32px;padding-bottom:56px}
  html[data-theme] .hero .wrap>*{max-width:none}
  html[data-theme] .pausebtn{bottom:auto;top:calc(24px + 12px)}
}

/* 暗い面 */
html[data-theme] .navy .lead,html[data-theme] .navy .note,html[data-theme] .mockcap,html[data-theme] .cta p{color:var(--onDark)}

/* 白い面を、地より一段明るい面にそろえる */
html[data-theme] .syllabus li,html[data-theme] .worries li,html[data-theme] .worries li::after,html[data-theme] .chain li,html[data-theme] .pair>div,html[data-theme] .pcard,html[data-theme] .stage.c10,html[data-theme] .ring .ctlbar button,html[data-theme] .ring .tag,html[data-theme] dialog.work,html[data-theme] dialog.work .close,html[data-theme] .form input[type=text],html[data-theme] .form input[type=email],html[data-theme] .form textarea,html[data-theme] .form select{background:var(--surface)}
html[data-theme] .pair>div.on{background:var(--navy);border-color:var(--navy);color:#fff}
html[data-theme] .chain li{color:var(--navy)}
html[data-theme] .chain .to{background:none;color:var(--mid)}

/* 強調の線と札 */
html[data-theme] .syllabus .no{color:var(--acc-text)}
html[data-theme] .syllabus li:nth-child(4),html[data-theme] .syllabus li:nth-child(5){box-shadow:inset 4px 0 0 var(--acc-line)}
html[data-theme] .pcard.sale{border-color:var(--acc-line)}
html[data-theme] .pcard .flag{background:var(--acc);color:var(--on-acc)}
html[data-theme] .flow li::before{color:var(--acc-text)}
html[data-theme] .worklist .n{color:var(--acc-text)}
html[data-theme] .form .req{background:var(--acc);color:var(--on-acc)}
html[data-theme] .form input[type=text],html[data-theme] .form input[type=email],html[data-theme] .form textarea,html[data-theme] .form select,html[data-theme] .form .radios label{border-color:var(--field)}
html[data-theme] .formmsg.ok{background:var(--okbg)}
html[data-theme] dialog.work{box-shadow:0 24px 64px rgba(var(--shade),.35)}
html[data-theme] dialog.work::backdrop{background:rgba(var(--shade),.55)}
html[data-theme] .badge{box-shadow:0 8px 24px rgba(var(--shade),.25)}

/* 似た画面の見本（C05） */
html[data-theme] .mock{background:linear-gradient(160deg,var(--surface),var(--light))}
html[data-theme] .mock i{background:var(--pale)}
html[data-theme] .mock i:nth-child(1){background:var(--slate)}
html[data-theme] .mock i:nth-child(4){background:var(--mid)}

/* 図（C04・C07）。SVGに直接書いた色を、CSSで上書きする */
html[data-theme] .circles .c{fill:var(--navy)}
html[data-theme] .circles .ln{stroke:var(--acc-line)}
html[data-theme] .whydiag [fill="#002266"]{fill:var(--navy)}
html[data-theme] .whydiag [stroke="#7F90B2"]{stroke:var(--slate)}
html[data-theme] .whydiag [stroke="#BFC8D9"]{stroke:var(--pale)}
html[data-theme] .whydiag g[fill="#E3E7F0"]{fill:var(--light)}
html[data-theme] .whydiag [fill="#4A5268"]{fill:var(--sub)}
html[data-theme] .whydiag rect[fill="#fff"],html[data-theme] .whydiag path[fill="#fff"]{fill:var(--surface)}

/* C08の「もう一度見る」 */
.replay{display:flex;justify-content:flex-end;margin-top:12px}
.replay button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--navy);background:var(--surface,#fff);color:var(--navy);font:500 14px/1 var(--font);cursor:pointer;touch-action:manipulation}
.replay button[hidden]{display:none}

/* 色の案を切り替えるボタン（試作で比べるためだけのもの。公開のときは外す） */
.themesw{position:fixed;left:12px;bottom:12px;z-index:90;display:flex;gap:4px;align-items:center;background:#fff;border:1px solid #111;border-radius:999px;padding:4px 6px 4px 12px;font:500 12px/1 "Noto Sans JP",sans-serif;color:#111;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.themesw button{min-height:32px;min-width:32px;padding:0 10px;border-radius:999px;border:1px solid #111;background:#fff;color:#111;font:inherit;cursor:pointer}
.themesw button[aria-pressed="true"]{background:#111;color:#fff}
@media print{.themesw{display:none}}

/* 冒頭の大見出し：文の幅が半分になったので少し小さくし、言葉の切れ目で折り返す */
html[data-theme] .tagline{font-size:clamp(30px,3.9vw,50px);word-break:auto-phrase}
html[data-theme] .hero h1{word-break:auto-phrase}