/* 灯のそばで 全話共通：ふりがな・ことばの説明・ホームページの案内 */
ruby rt{font-size:.5em;letter-spacing:0;font-family:var(--f-body,sans-serif);font-weight:400;opacity:.85}
.term{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-underline-offset:.32em;
  text-decoration-color:var(--gold,#e3a640);-webkit-tap-highlight-color:transparent}
button.term.term{width:auto;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;display:inline;line-height:inherit;opacity:1}
.term:focus-visible{outline:2px solid var(--water,#5aa6e0);outline-offset:2px;border-radius:3px}
button.term.term.on{background:color-mix(in srgb,var(--gold,#e3a640) 22%,transparent);border-radius:3px}

/* ことばの説明（下からふわっと） */
.gl-pop{position:fixed;left:var(--gut-l,16px);right:var(--gut-r,16px);bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:30;
  max-width:460px;margin:0 auto;background:#fffaf0;color:#2f3134;border:1.5px solid var(--gold,#e3a640);border-radius:18px;
  padding:14px 16px 12px;box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 26px rgba(227,166,64,.3);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .25s}
.gl-pop.show{opacity:1;transform:none;pointer-events:auto}
.gl-pop h4{margin:0;font:500 16px var(--f-voice,sans-serif);letter-spacing:.06em;padding-right:36px}
.gl-pop .yomi{margin:2px 0 6px;font-size:11.5px;color:#6c6f73;letter-spacing:.08em}
.gl-pop p{margin:0;font-size:14px;line-height:1.85}
.gl-pop .src{margin-top:6px;font-size:11px;color:#6c6f73}
.gl-pop .x{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:0;background:transparent;font-size:20px;color:#6c6f73;cursor:pointer}

/* ホームページの案内 */
.hp-guide{position:fixed;inset:0;z-index:40;background:#14151a;color:#f3eee4;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;color-scheme:dark}
.hp-guide.show{opacity:1;visibility:visible;transition:opacity .35s}
.hp-guide .bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) var(--gut-r,16px) 10px var(--gut-l,16px);background:linear-gradient(#14151a 70%,transparent)}
.hp-guide .bar b{font:500 13px var(--f-voice,sans-serif);letter-spacing:.14em}
.hp-guide .bar button{font:500 13px var(--f-voice,sans-serif);letter-spacing:.1em;padding:8px 16px;border-radius:999px;border:1px solid #f3eee4;background:transparent;color:inherit;cursor:pointer}
.hp-guide .in{max-width:480px;margin:0 auto;padding:0 var(--gut-r,16px) calc(40px + env(safe-area-inset-bottom,0px)) var(--gut-l,16px);display:flex;flex-direction:column;gap:30px}
.hp-guide h2{margin:0;font-family:var(--f-title,serif);font-weight:900;font-size:clamp(24px,7vw,32px);letter-spacing:.16em;line-height:1.5}
.hp-guide h3{margin:0;font-family:var(--f-title,serif);font-weight:700;font-size:clamp(19px,5.4vw,23px);letter-spacing:.14em}
.hp-guide .kick{display:inline-block;font:500 11.5px var(--f-voice,sans-serif);letter-spacing:.14em;padding:3px 10px;border-radius:999px;margin-bottom:6px;
  background:color-mix(in srgb,var(--k,#e3a640) 22%,transparent);color:color-mix(in srgb,#fff 35%,var(--k,#e3a640));border:1px solid color-mix(in srgb,var(--k,#e3a640) 60%,transparent)}
.hp-guide p{margin:0;font-size:14.5px;line-height:1.95;color:#ddd7cc}
.hp-guide .ph{width:100%;border-radius:14px;display:block;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.hp-guide .ph.tall{aspect-ratio:3/4;object-fit:cover}
.hp-guide .ph.wide{aspect-ratio:3/2;object-fit:cover}
.hp-guide section{display:flex;flex-direction:column;gap:10px}
.hp-guide ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.hp-guide li{font-size:13.5px;line-height:1.75;padding:9px 12px 9px 30px;border-radius:12px;background:rgba(255,255,255,.05);position:relative;color:#e8e2d7}
.hp-guide li::before{content:"";position:absolute;left:12px;top:1.05em;width:8px;height:8px;border-radius:50%;background:var(--k,#e3a640);box-shadow:0 0 8px var(--k,#e3a640)}
.hp-guide ol.steps{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:s}
.hp-guide ol.steps li{padding-left:44px}
.hp-guide ol.steps li::before{counter-increment:s;content:counter(s);width:24px;height:24px;left:10px;top:.7em;display:grid;place-items:center;
  font:500 12px var(--f-voice,sans-serif);color:#14151a;box-shadow:none}
/* 建物の断面 */
.hp-guide .bld{display:grid;gap:6px;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.hp-guide .fl{display:grid;grid-template-columns:3.2em 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--k) 16%,#1d1e24);border:1px solid color-mix(in srgb,var(--k) 45%,transparent);cursor:pointer;color:inherit;font:inherit;text-align:left}
.hp-guide .fl .n{font:700 17px var(--f-title,serif);color:color-mix(in srgb,#fff 30%,var(--k))}
.hp-guide .fl .t{font-size:14px;line-height:1.5}
.hp-guide .fl .t small{display:block;font-size:11.5px;color:#bdb6aa}
.hp-guide .fl .tag{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;color:#cfc8bb}
.hp-guide .fl.door{border-style:dashed}
.hp-guide .sample{display:flex;justify-content:center}
.hp-guide .sample svg{width:min(100%,300px);height:auto}
.hp-guide .go{font:500 15px var(--f-voice,sans-serif);letter-spacing:.1em;padding:13px 22px;border-radius:999px;border:0;background:#f3eee4;color:#14151a;cursor:pointer;width:100%}
.hp-guide .small{font-size:11.5px;line-height:1.75;color:#a9a397}
.hp-guide .emg{border:1px solid #e8603c;border-radius:14px;padding:12px 14px;background:rgba(232,96,60,.1)}
@media (prefers-reduced-motion:reduce){.gl-pop,.hp-guide{transition:none}}

.cover h1 ruby rt{font-size:.4em;letter-spacing:.1em}