/* グループホーム白馬 — white.css（白基調版）
   style.css の後に読み込んで、濃紺の面を白・生成りに置き換える。white/ のページだけが読み込む。
   考え方：
   - 文字色のトークン（--white=本文色、--gold=アクセント文字、--gold2/--muted=補足文字、--line=罫線）を
     濃紺・ブロンズ系に差し替える。アンバー（--amber）はボタンなど「塗り」にだけ使う。
   - 全セクションに .light を付けてある（build.py）。元が明るい面は .tint（生成り）、元が dark2 は .mist（青みの白）。
   - フッター・費用の合計・夜間の安心の帯だけは濃紺のまま（.dark-island と同じトークンに戻す）。
   - ヒーローは濃紺版と同じ「朝→昼→夕暮れ→夜」。昼のビルは白い面＋濃紺の細い線、夜は紺の面＋金の線（色は main.js の TONE）。
     左の文字の下は白いままにして、夜でも文字は濃紺で読める。鉄橋と電車は濃い色で手前に見せる。 */

:root{
  --paper:#fbfaf7; --paper2:#f4f1ea; --mist:#eef2f6;
  --white:#0b2140; --gold:#8a5a12; --gold2:#5a5143; --muted:#646d79; --muted2:#4f5966;
  --line:rgba(11,33,64,.13); --amber2:#e0a234;
}
/* 濃紺のまま残す面：トークンを元に戻す */
.ftr,.safety,.fee-total,.dark-island{
  --white:#f7f4ee; --gold:#ffd98a; --gold2:#fff1d2; --muted:#98a4b2; --muted2:#b3bdc8; --line:rgba(255,217,138,.16);
}

body{background:var(--paper);color:var(--deep)}
::selection{background:#ffe2a6;color:var(--deep)}
:focus-visible{outline-color:var(--bronze)}
#scroll-bar{background:linear-gradient(90deg,var(--amber),#ffd98a)}

/* ---------- Loader ---------- */
#loader{background:radial-gradient(circle at 50% 45%,#ffffff 0%,#f7f4ee 60%,#efeae0 100%);color:var(--deep)}
#loader .ld-bld{border-color:rgba(11,33,64,.3)}
#loader .ld-bld i{background:rgba(11,33,64,.06)}
#loader .ld-bld i.on{box-shadow:0 0 14px 2px rgba(240,178,74,.45)}
#loader .ld-ground{background:rgba(11,33,64,.35)}
#loader .ld-count{color:var(--bronze);opacity:.85}
#loader .ld-bar{background:rgba(11,33,64,.08)}
#loader .ld-curtain{background:var(--paper)}
.pt{background:var(--paper)}

/* ---------- Header / Menu ---------- */
.hdr.is-scrolled{background:rgba(251,250,247,.92);border-color:var(--line);box-shadow:0 6px 30px rgba(11,33,64,.06)}
.brand{color:var(--deep)}
.brand svg path:first-child{stroke:var(--bronze)}
.brand small{color:var(--bronze)}
.hdr .nav{color:var(--deep)}
.hdr .nav a{opacity:.7}
.hdr .nav a::after{background:var(--amber)}
.btn-pill{border-color:rgba(11,33,64,.35);background:rgba(255,255,255,.6);color:var(--deep)}
.btn-pill::before{background:var(--deep)}
.btn-pill:hover{color:#fff}
.btn-pill.hot{background:var(--amber);border-color:var(--amber);color:var(--navy);box-shadow:0 8px 24px rgba(240,178,74,.28)}
.btn-pill.hot::before{background:#ffd98a}
.btn-pill.hot:hover{color:var(--navy)}
.btn-solid::before{background:#ffd98a}
.btn-solid:hover{box-shadow:0 14px 36px rgba(240,178,74,.32)}
.btn-ghost{border-color:rgba(11,33,64,.38);color:var(--deep)}
.btn-ghost:hover{background:rgba(11,33,64,.05)}
.burger i{background:var(--deep)}
#menu{background:rgba(251,250,247,.98)}
#menu a.m{color:var(--deep)}
#menu a.m small{color:var(--bronze)}

/* ---------- Sections ---------- */
.sec.light{background:var(--paper)}
.sec.light.tint{background:linear-gradient(180deg,var(--lbg) 0%,var(--lbg2) 100%)}
.sec.light.mist{background:linear-gradient(180deg,#f3f6f9 0%,var(--mist) 100%)}
.light .card{border-color:rgba(11,33,64,.12);background:#fff;box-shadow:0 1px 0 rgba(11,33,64,.02),0 18px 40px -28px rgba(11,33,64,.25)}
.light .card::after{background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(240,178,74,.14),transparent 55%)}
.light .bigword{-webkit-text-stroke:1px rgba(11,33,64,.07)}
.sec-cta{border-color:rgba(138,90,18,.28);background:#fff;box-shadow:0 20px 50px -34px rgba(11,33,64,.35)}
.sec-cta::before{background:linear-gradient(115deg,transparent 30%,rgba(240,178,74,.12) 50%,transparent 70%)}
.ph-slot{background:repeating-linear-gradient(135deg,rgba(11,33,64,0) 0 16px,rgba(11,33,64,.05) 16px 17px),linear-gradient(160deg,#ece6db,#e0d8c8);color:var(--lmuted)}
.ph-slot b{color:var(--deep)}
.mask-img::after{background:linear-gradient(180deg,var(--amber),#efe7d8)}
.mask-img .tag,.phero .ph .tag{color:var(--deep);background:rgba(255,255,255,.88)}
.note{color:var(--lgray)}

/* ---------- Hero：夜明け→朝 ---------- */
#hero{background:var(--paper)}
#hero .orb{background:radial-gradient(circle at 42% 42%,#fffaf0,#ffd98a 58%,#f3b04e);box-shadow:0 0 120px 50px rgba(255,210,130,.45)}
#hero .orb::after{background:radial-gradient(circle at 70% 36%,rgb(24,36,64) 0 46%,transparent 47%)}
#hero .horizon{background:linear-gradient(90deg,rgba(11,33,64,0),rgba(11,33,64,.18) 55%,rgba(11,33,64,0))}
#hero .cloud{opacity:.9}
#hero .cloud path{fill:#ffffff}
#hero[data-night] .cloud{opacity:.06}
#hero .haze{background:linear-gradient(180deg,transparent,var(--haze,rgba(251,250,247,.55)))}
#hero .scrim{background:linear-gradient(90deg,rgba(251,250,247,.94) 0%,rgba(251,250,247,.82) 30%,rgba(251,250,247,.38) 48%,rgba(251,250,247,0) 62%)}
/* 街：白い面と細い線 */
#hero .scene [stroke^="rgba(255,217,138"]{stroke:var(--ln,rgba(11,33,64,.32))}
#hero .scene rect[fill="#0b2140"]{fill:var(--cap,#d6dde7)}
#hero .scene g[fill="rgba(7,23,43,.8)"]{fill:var(--tree,#dfe6dc);stroke:var(--ln,rgba(52,86,60,.35))}
.win{fill:var(--win-off,rgba(120,150,185,.18))}
.win.on{fill:#f8cd72}
/* 淀川：明るい水面 */
#hero .refl{opacity:.35}
#hero[data-night] .refl{opacity:.45}
#hero .ripples{stroke:rgba(255,255,255,.9)}
/* 鉄橋は手前なので濃く */
#hero .bridge{stroke:rgba(11,33,64,.55)}
#hero .bridge g[fill^="rgba(11,33,64"]{fill:#2a3f5c}
#hero .bridge rect[fill="#0b2140"]{fill:#1d3150}
#hero .bridge g[stroke]{stroke:rgba(255,255,255,.35)}
#hero .train-cars{stroke:rgba(11,33,64,.35)}
#hero .train-cars .tw{fill:rgba(255,255,255,.55)}
/* 文字 */
#hero .kicker{color:var(--bronze)}
#hero .kicker i{background:var(--bronze)}
#hero h1{color:var(--deep)}
#hero h1 em{color:var(--amber2)}
#hero .ja{color:var(--deep)}
#hero .desc{color:#3f4a57}
#hero .facts small{color:var(--bronze)}
#hero .facts b{color:var(--deep)}
#hero .facts b i{color:var(--deep)}
#hero .facts .sep{background:rgba(11,33,64,.18)}
#hero .clock{color:var(--deep);text-shadow:0 2px 12px rgba(255,255,255,.9);transition:color .6s}
#hero .scroll span{color:var(--deep);transition:color .6s}
#hero[data-night] .clock,#hero[data-night] .scroll span{color:#ffd98a;text-shadow:0 2px 12px rgba(7,23,43,.9)}
.hero-side a{color:var(--deep)}
.hero-side a i{border-color:rgba(11,33,64,.25);background:rgba(255,255,255,.8)}
.hero-side a span{background:rgba(255,255,255,.9)}
.hero-side a:hover i{color:var(--navy)}

/* ---------- Message / Doors / News ---------- */
#message .sub{color:var(--lgray)}
#message .sub b{color:var(--deep)}
#message .ph{box-shadow:0 30px 60px -20px rgba(11,33,64,.35)}
.door{border-color:rgba(11,33,64,.12);background:#fff;box-shadow:0 24px 60px -40px rgba(11,33,64,.4)}
.door::before{background:linear-gradient(160deg,rgba(240,178,74,.16),rgba(240,178,74,0) 60%)}
.door .en{color:var(--bronze)}
.door .d{color:var(--lmuted)}
.door .go{color:var(--deep)}
.door .go i{border-color:rgba(11,33,64,.3)}
.door .win-deco i{background:rgba(11,33,64,.08)}
.door.light-door{background:var(--lbg)}
.news .dt{color:var(--bronze)}
.news .cat{color:var(--lgray)}
.news li:hover{background:rgba(240,178,74,.07)}
.news a:hover{color:var(--bronze)}

/* ---------- Day（1日の暮らし） ---------- */
#life{color:var(--deep);background:var(--day-bg,#fbf8f2)}
#life .head .lead{color:var(--lmuted)}
#life .sun{box-shadow:0 0 70px 24px rgba(246,197,109,.4)}
#life .dc{border-color:rgba(11,33,64,.12);background:rgba(255,255,255,.9);box-shadow:0 24px 50px -36px rgba(11,33,64,.35)}
#life .dc .t{color:var(--deep)}
#life .dc .t small{color:var(--bronze)}
#life .dc p{color:var(--lmuted)}
#life .dc .st{border-top-color:rgba(11,33,64,.15);color:var(--bronze)}
#life .foot{color:var(--lgray)}

/* ---------- Support / Room ---------- */
.sp{border-color:rgba(11,33,64,.1);background:#fff}
.plan{border-color:rgba(11,33,64,.12);background:#fff}
.plan svg[stroke]{stroke:rgba(11,33,64,.6)}
.plan svg [fill="rgba(247,244,238,.05)"]{fill:rgba(11,33,64,.03)}
.plan svg [fill="rgba(255,217,138,.25)"]{fill:rgba(240,178,74,.25)}
.plan .lbl{fill:var(--lmuted)}
.plan-tabs button{border-color:rgba(11,33,64,.2);color:var(--deep);background:#fff}
.plan-detail .n{color:var(--bronze)}
.plan-detail p{color:var(--lmuted)}

/* ---------- Homes / Spec / Cost ---------- */
.home{border-color:rgba(11,33,64,.12);background:#fff}
.spec{border-color:rgba(11,33,64,.12);background:#fff}
.fee-card,.toggle{border-color:rgba(11,33,64,.12);background:#fff}
.fee-total{background:var(--deep)}

/* ---------- Flow / Pro / FAQ ---------- */
.flow-line{background:rgba(11,33,64,.12)}
.step .dot{background:#fff;border-color:rgba(11,33,64,.2);color:var(--deep)}
.step.on .dot{box-shadow:0 10px 30px rgba(240,178,74,.35)}
.step p{color:var(--lmuted)}
.pro-box{border-color:rgba(11,33,64,.12);background:#fff}
.qa .q{color:var(--bronze)}
.qa .pm{border-color:rgba(11,33,64,.25)}
.qa .pm::before,.qa .pm::after{background:var(--deep)}
.qa .a p{color:var(--lmuted)}

/* ---------- Recruit band（トップ） ---------- */
#recruit .nb-stars{display:none}
#recruit .bld svg [fill^="rgba(11,33,64"],#recruit .bld svg [fill="#0b2140"]{fill:#eef1f5}
#recruit .bld svg[stroke],#recruit .bld svg [stroke^="rgba(255,217,138"]{stroke:rgba(11,33,64,.4)}
.r-tags span{border-color:rgba(11,33,64,.2);color:var(--deep);background:#fff}

/* ---------- Entry ---------- */
#entry .bigword{-webkit-text-stroke-color:rgba(11,33,64,.08)}
#entry .kicker{color:var(--bronze)}
#entry .tel{color:var(--lgray)}
#entry .tel b{color:var(--deep)}
#entry .ways a{border-color:rgba(11,33,64,.12);background:#fff}
#entry .ways a:hover{background:#fffaf0}
#entry .ways small{color:var(--bronze)}
#entry .ways span{color:var(--lmuted)}

/* ---------- Footer（濃紺のまま） ---------- */
.ftr{background:var(--navy);color:var(--white)}
.ftr .brand{color:#f7f4ee}
.ftr .brand svg path:first-child{stroke:#ffd98a}
.ftr .brand small{color:#ffd98a}
.ftr .btn-ghost{border-color:rgba(255,217,138,.7);color:#ffd98a}
.ftr .btn-ghost:hover{background:rgba(240,178,74,.16)}

/* ---------- Sticky ---------- */
.sticky{background:rgba(255,255,255,.95);border-top-color:rgba(11,33,64,.1);box-shadow:0 -10px 30px rgba(11,33,64,.08)}
.sticky p{color:var(--lmuted)}
.sticky p b{color:var(--deep)}

/* ---------- 採用ページ ---------- */
#rhero{background:radial-gradient(120% 80% at 70% 100%,#fff6e6 0%,#f6f3ee 45%,var(--paper) 100%)}
#rhero .stars{display:none}
#rhero .rscrim{background:linear-gradient(90deg,rgba(251,250,247,.95) 0%,rgba(251,250,247,.84) 32%,rgba(251,250,247,.3) 52%,rgba(251,250,247,0) 66%)}
#rhero .scene svg{stroke:rgba(11,33,64,.4)}
#rhero .scene [fill^="rgba(11,33,64"]{fill:#ffffff}
#rhero .scene rect[fill="#0b2140"]{fill:#d6dde7}
#rhero .scene [stroke^="rgba(255,217,138"]{stroke:rgba(11,33,64,.45)}
#rhero .kicker{color:var(--bronze)}
#rhero .kicker i{background:var(--bronze)}
#rhero h1{color:var(--deep)}
#rhero h1 em{color:var(--amber2)}
#rhero .desc{color:#3f4a57}
#rhero .hint{color:var(--lmuted)}
#rhero .hint i{border-color:rgba(11,33,64,.3)}
.rstats{background:#fff;border-color:var(--line)}
.rstats small{color:var(--bronze)}
.rstats b{color:var(--deep)}
.rstats b i{color:var(--deep)}
.rstats p{color:var(--lmuted)}
.job{border-color:rgba(11,33,64,.12);background:#fff}
.job::before{background:linear-gradient(90deg,rgba(240,178,74,.16),rgba(240,178,74,.03))}
.job .no,.job .ar{color:var(--bronze)}
.job .nm small,.job .sal small{color:var(--lgray)}
.job .sal{color:var(--deep)}
.job .cp,.job .tasks{color:var(--lmuted)}
.shift-tabs{border-color:rgba(11,33,64,.18);background:#fff}
.shift-tabs button{color:var(--deep)}
.tl::before{background:rgba(11,33,64,.15)}
.tl li::before{background:#fff}
.tl li.rest::before{border-color:rgba(11,33,64,.25)}
.tl .t{color:var(--deep)}
.tl p{color:var(--lmuted)}
.shift-aside .card li{color:var(--lmuted)}
.shift-aside .card li b{border-color:rgba(11,33,64,.2);color:var(--bronze)}
.req{border-color:rgba(11,33,64,.12);background:#fff}
.voice .av{border-color:rgba(11,33,64,.2);color:var(--bronze)}
.voice .who small{color:var(--bronze)}
.voice p{color:var(--lmuted)}
.form{border-color:rgba(11,33,64,.12);background:#fff}

/* ---------- 下層ページのヒーロー・次のページ ---------- */
.phero{background:linear-gradient(180deg,#ffffff 0%,var(--paper2) 100%)}
.phero .crumb{color:var(--lgray)}
.phero .crumb a:hover{color:var(--bronze)}
.phero .kicker{color:var(--bronze)}
.phero .kicker i{background:var(--bronze)}
.phero .h1{color:var(--deep)}
.phero .h1 em{color:var(--bronze)}
.phero .lead{color:var(--lmuted)}
.phero .bigword{-webkit-text-stroke:1px rgba(11,33,64,.07)}
.phero .ph{box-shadow:0 40px 80px -40px rgba(11,33,64,.45)}
.phero .line{background:linear-gradient(rgba(11,33,64,.15),transparent)}
.page-hd{background:linear-gradient(180deg,#ffffff 0%,var(--paper) 100%);color:var(--deep)}
.next{background:linear-gradient(180deg,var(--paper2),#efe9de);color:var(--deep)}
.next small{color:var(--bronze)}
.next span{-webkit-text-stroke:1px rgba(11,33,64,.3)}
.next .ar{border-color:rgba(11,33,64,.3);color:var(--deep)}
.next:hover span{color:rgba(240,178,74,.35)}

/* ---------- 汎用 ---------- */
.rule{border-color:rgba(11,33,64,.12);background:#fff}
.rule .k{color:var(--bronze)}
.rule p{color:var(--lmuted)}
.prose{color:var(--lmuted)}
.prose h2{color:var(--deep)}

/* ---------- スマホのトップ ---------- */
.qmenu a{border-color:rgba(11,33,64,.12);background:#fff}
.qmenu a:active{background:#fff6e4}
.qmenu small{color:var(--bronze)}
.ptile{border-color:rgba(11,33,64,.12);background:#fff}
.ptile .no,.ptile i{color:var(--bronze)}
.ptile .tx>span{color:var(--lmuted)}
.ptile .tx em{color:var(--bronze)}
@media (max-width:820px){
  #hero .ja,#hero .desc,#hero h1,#hero .facts{text-shadow:none}
  /* スマホは文字が全幅にかかるので、夜は文字の下の白を紺に入れ替えて文字を明るくする */
  #hero .scrim{background:none}
  #hero .scrim::before,#hero .scrim::after{content:"";position:absolute;inset:0}
  #hero .scrim::before{background:linear-gradient(180deg,rgba(251,250,247,.9) 0%,rgba(251,250,247,.82) 52%,rgba(251,250,247,.15) 72%,rgba(251,250,247,0) 82%);opacity:calc(1 - var(--night-a,0))}
  #hero .scrim::after{background:linear-gradient(180deg,rgba(7,23,43,.66) 0%,rgba(7,23,43,.52) 52%,rgba(7,23,43,.1) 70%,rgba(7,23,43,0) 80%);opacity:var(--night-a,0)}
  #hero h1,#hero .ja,#hero .desc,#hero .kicker,#hero .facts small,#hero .facts b,#hero .facts b i{transition:color .6s}
  #hero[data-night] h1,#hero[data-night] .ja,#hero[data-night] .facts b i{color:#f7f4ee}
  #hero[data-night] .desc{color:#fff1d2}
  #hero[data-night] .kicker,#hero[data-night] .facts small,#hero[data-night] .facts b{color:#ffd98a}
  #hero[data-night] .kicker i{background:#ffd98a}
  #rhero .rscrim{background:linear-gradient(180deg,rgba(251,250,247,.92) 0%,rgba(251,250,247,.84) 55%,rgba(251,250,247,.2) 75%,rgba(251,250,247,0) 85%)}
}
.is-motion-off .light .lum{color:var(--deep)}
/* 白地の小さな文字はブロンズに（アンバーは塗りだけ） */
.draft{color:var(--bronze);border-color:rgba(138,90,18,.5)}
.page-hd .eyebrow{color:var(--bronze)}
#rhero .win.on{fill:#f9d790}