/* トップの日影図アニメーション（2026-10-09）。冬至日 8–16時の影と等時間日影線。site.css の色・書体をそのまま使う */
.hs{width:min(560px,100%);background:var(--bg);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.hs .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;font-size:12px;line-height:1.4;border-bottom:1px solid var(--line);background:var(--soft)}
.hs .bar b{font-weight:700}
.hs .bar span{font:400 11px var(--f-mono);color:var(--muted)}
.hs .replay{font:400 11px/1 var(--f-body);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;transition:color .5s var(--ease),border-color .5s var(--ease),opacity .5s var(--ease)}
.hs .replay:hover{color:var(--ink);border-color:var(--ink)}
.hs .replay:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hs .replay[hidden]{display:none}
.hs .fig{position:relative}
.hs svg{display:block;width:100%;height:auto}
.hs .clock{position:absolute;left:12px;top:10px;pointer-events:none;line-height:1.2}
.hs .clock .t{font:500 clamp(17px,4.2vw,22px)/1 var(--f-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hs .clock .s{font:400 10px/1.5 var(--f-mono);color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums;white-space:pre}
.hs .lg{position:absolute;right:10px;bottom:8px;font-size:10.5px;line-height:1.55;color:var(--muted);background:color-mix(in srgb,var(--bg) 82%,transparent);padding:4px 6px;border-radius:3px;pointer-events:none}
.hs .lg div{display:flex;align-items:center;gap:6px;white-space:nowrap}
.hs .lg i{display:inline-block;width:18px;height:0;border-top:1.3px solid var(--accent);flex:none}
.hs .lg i.hr{border-top:1px solid var(--muted);opacity:.7}
.hs .lg i.off{border-top:1px dashed var(--muted)}
@media (max-width:520px){.hs .lg{position:static;display:grid;grid-template-columns:auto auto;gap:0 14px;padding:8px 12px;border-top:1px solid var(--line);border-radius:0;background:var(--soft)}.hs .lg>.m{grid-column:1/-1}}
.hs .lg .m{font-family:var(--f-mono)}
@media (max-width:420px){.hs .lg{font-size:9.5px}.hs .clock .s{font-size:9px}}
.hs{--shade:rgba(36,36,34,.075)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hs{--shade:rgba(231,233,236,.08)}}
:root[data-theme="dark"] .hs{--shade:rgba(231,233,236,.08)}
/* 元の2枚（見積・工事費）を後ろに残し、日影図を手前に重ねる */
.stage.hs-stage{aspect-ratio:1.12}
.hs-stage .c1{width:60%;left:0;top:0;right:auto;bottom:auto;z-index:1}
.hs-stage .c3{width:46%;left:3%;right:auto;top:auto;bottom:0;z-index:1}
.hs-stage .hs{position:absolute;margin:0;width:78%;right:0;top:15%;z-index:2;animation:drift 11s ease-in-out -3s infinite}
@media (max-width:520px){.stage.hs-stage{aspect-ratio:.9}.hs-stage .c1{width:62%}.hs-stage .c3{width:52%;left:0}.hs-stage .hs{width:90%;top:17%}}
@media (prefers-reduced-motion: reduce){.hs-stage .hs{animation:none}}
/* 2026-10-20：補助金ナビ・プロポ検索を足して5枚に（中馬さん指示、サイト・決済の統括）。四隅に4枚、日影図を中央の手前に */
.stage.hs-stage{aspect-ratio:.9}
.hs-stage .c1{width:50%;left:0;top:0}
.hs-stage .c4{width:44%;right:0;left:auto;top:5%;bottom:auto;z-index:1}
.hs-stage .c3{width:44%;left:0;bottom:2%}
.hs-stage .c5{width:44%;right:0;left:auto;top:auto;bottom:0;z-index:1}
.hs-stage .hs{width:66%;right:auto;left:17%;top:20%}
@media (max-width:520px){.stage.hs-stage{aspect-ratio:.62}.hs-stage .c1{width:54%}.hs-stage .c4{width:48%}.hs-stage .c3{width:48%;left:0}.hs-stage .c5{width:48%}.hs-stage .hs{width:84%;left:8%;top:22%}}