@charset "UTF-8";

:root {
  --header-height: 84px;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDPMincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "BIZ UDPGothic", "Meiryo", sans-serif;
  --wood-black: #160d08;
  --wood-dark: #27170e;
  --wood: #4a2b19;
  --wood-light: #765136;
  --wood-highlight: #9a704a;
  --plaster: #cbb995;
  --plaster-light: #e5d8ba;
  --paper: #eee2c4;
  --paper-deep: #d9c49d;
  --ink: #211812;
  --ink-soft: #554335;
  --tatami: #9a8757;
  --tatami-light: #b7a36d;
  --tatami-edge: #2c2a1b;
  --vermillion: #76392c;
  --moss: #5c6540;
  --indigo: #33495a;
  --sky-wash: rgba(247, 223, 173, 0.18);
  --room-shade: rgba(25, 13, 7, 0.16);
  --night-overlay: 0;
  --lantern-light: #ffd28a;
  --lantern-glow: rgba(239, 168, 75, 0.42);
  --fire-glow: rgba(223, 98, 42, 0.4);
  --garden-filter: brightness(0.94) saturate(0.84) sepia(0.06);
  --ease-house: 760ms cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

html[data-time="night"] {
  --plaster: #796d5d;
  --plaster-light: #94856f;
  --paper: #b6ad9b;
  --paper-deep: #928571;
  --ink: #161514;
  --ink-soft: #302e2a;
  --tatami: #5c583f;
  --tatami-light: #777154;
  --sky-wash: rgba(53, 77, 94, 0.42);
  --room-shade: rgba(4, 8, 13, 0.48);
  --night-overlay: 1;
  --lantern-light: #ffd183;
  --lantern-glow: rgba(245, 164, 63, 0.86);
  --fire-glow: rgba(233, 87, 28, 0.86);
  --garden-filter: brightness(0.31) saturate(0.62) hue-rotate(8deg) contrast(1.08);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  background: var(--wood-black);
  scroll-behavior: smooth;
}

/* 本文は親サイト(SocialEggs Gateway)と同じ組版値にそろえる:
   17px / 行間1.7 / 字間0.02em / 400と700の2段階。
   親はGoogle FontsでNoto系を読むが、この屋敷は外部配信なしで
   直接開ける決まりのため、同名フォント+近い書体の順で指定する(意図的な差)。 */
body {
  margin: 0;
  min-width: 20rem;
  background: var(--wood-black);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  line-break: strict;
  overflow-wrap: anywhere;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.5rem;
  left: 0.75rem;
  transform: translateY(-150%);
  padding: 0.7rem 1rem;
  border: 2px solid var(--paper);
  background: var(--wood-dark);
  color: var(--paper);
  text-decoration: none;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ヘッダーは親サイトと同じ骨格(サイト名+ふりがな+ルーペ)・同じ余白にそろえる。
   下線6px、内側の左右24px、サイト名27px/700。板の色だけ屋敷の木にしている。 */
.site-header {
  position: relative;
  z-index: 100;
  border-bottom: 6px solid #130b07;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 44%),
    linear-gradient(90deg, rgba(14, 8, 5, 0.28), transparent 25% 75%, rgba(14, 8, 5, 0.32)),
    #342014;
  box-shadow:
    inset 0 -1px rgba(203, 156, 103, 0.22),
    0 0.65rem 1.8rem rgba(8, 4, 2, 0.5);
}

.site-header-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 15px 24px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f3e5c7;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-brand:hover .brand__moji {
  color: #fff1d2;
}

.brand__seal {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid #d1a279;
  outline: 1px solid rgba(31, 12, 8, 0.85);
  outline-offset: -5px;
  background: #713729;
  box-shadow: inset 0 0 0 3px rgba(255, 234, 200, 0.12), 0 4px 8px rgba(0, 0, 0, 0.28);
  color: #f1d7ae;
  font-size: 22px;
  line-height: 1;
}

/* 場所のボタン列(玄関〜旅立ち)。ヘッダーに常に出しておく */
.house-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.house-nav__stop {
  min-height: 44px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: #f0c46a;
  background: rgba(62, 36, 19, 0.68);
  border: 1px solid #c9a44e;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 235, 200, 0.12);
  cursor: pointer;
  white-space: nowrap;
}

.house-nav__stop:hover,
.house-nav__stop:focus-visible { background: #fbf4e6; color: #4e2c12; }
.house-nav__stop:focus-visible { outline: 2px solid #f0c46a; outline-offset: 2px; }
.house-nav__stop.on { background: #eadcc0; color: #4e2c12; font-weight: 700; }

/* 屋敷ぜんたい。ヘッダーの下の残り全部を部屋に使う */
.yashiki {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* 1画面に1部屋。部屋は画面と同じ大きさで、1枚ずつ吸着して送る。
   隣の部屋は絶対に見切れさせない(この屋敷の鉄則)。 */
.pano {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* scroll-behavior はCSSで固定しない。JS側が「動きを減らす」設定を見て決める */
  overscroll-behavior-inline: contain;
  cursor: grab;
  scrollbar-width: none;
  scrollbar-color: #6c4a2f #1a100a;
  background: #1a100a;
}

.pano:focus-visible {
  outline: 3px solid #f2cf91;
  outline-offset: -3px;
}

.pano::-webkit-scrollbar { height: 0; display: none; }
.pano::-webkit-scrollbar-track { background: #1a100a; }
.pano::-webkit-scrollbar-thumb { background: #6c4a2f; border-radius: 6px; }
.pano.grabbing { cursor: grabbing; user-select: none; }

/* 部屋 = 画面ぴったりの窓。はみ出した写真はここで切る */
.room {
  position: relative;
  isolation: isolate;
  contain: layout paint style;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #1a100a;
}

/* 写真(1600x900)の面。窓を覆う大きさまで広げつつ16:9を保つので、
   写真の上のホットスポット(%指定)は画面の形が変わってもずれない。 */
.room-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  container-type: size;
}

.room::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(104deg, rgba(255, 235, 194, 0.13), transparent 32%),
    radial-gradient(circle at 53% 44%, transparent 25%, rgba(38, 21, 12, 0.15) 105%);
  transition: opacity var(--ease-house), background var(--ease-house);
}

.room::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: var(--night-overlay);
  background:
    linear-gradient(180deg, rgba(3, 8, 14, 0.34), rgba(3, 8, 13, 0.18) 46%, rgba(1, 4, 8, 0.46)),
    radial-gradient(circle at 62% 66%, transparent 0 11%, rgba(2, 5, 8, 0.24) 54%);
  mix-blend-mode: multiply;
  transition: opacity var(--ease-house);
}

.room > :not(.room-path) {
  transition: color var(--ease-house), background-color var(--ease-house), border-color var(--ease-house), opacity var(--ease-house);
}

.ceiling-beams {
  position: absolute;
  z-index: 7;
  top: 0;
  right: 0;
  left: 0;
  height: 13%;
  border-bottom: 1rem solid var(--wood-black);
  background:
    linear-gradient(180deg, #160c07, #2b180e 44%, #1d1009),
    repeating-linear-gradient(90deg, transparent 0 11rem, rgba(0, 0, 0, 0.3) 11rem 11.4rem);
  box-shadow: 0 0.7rem 1rem rgba(17, 8, 3, 0.28);
}

.ceiling-beams::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1.75rem;
  left: 0;
  height: 1.1rem;
  background: linear-gradient(180deg, #4a2a18, #1e1009);
  box-shadow: 0 0.45rem 0.75rem rgba(8, 4, 2, 0.35);
}

.ceiling-beams span {
  position: absolute;
  top: 0;
  bottom: -1rem;
  width: 0.72rem;
  background: #140b07;
  box-shadow: 0.18rem 0 0 rgba(115, 70, 38, 0.28);
}

.ceiling-beams span:nth-child(1) { left: 22%; }
.ceiling-beams span:nth-child(2) { left: 52%; }
.ceiling-beams span:nth-child(3) { left: 79%; }

.tatami-floor {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 31%;
  background:
    linear-gradient(90deg, transparent 49.25%, var(--tatami-edge) 49.25% 50.6%, transparent 50.6%),
    linear-gradient(8deg, transparent 46%, rgba(37, 32, 20, 0.8) 46% 48%, transparent 48%),
    repeating-linear-gradient(88deg, var(--tatami) 0 0.13rem, var(--tatami-light) 0.13rem 0.2rem);
  box-shadow: inset 0 0.7rem 1.4rem rgba(50, 34, 16, 0.23);
}

.room-plaque {
  position: absolute;
  z-index: 30;
  top: 16%;
  left: 64px;
  min-width: 10rem;
  padding: 0.68rem 1rem 0.74rem;
  border: 1px solid #a47a51;
  background:
    linear-gradient(95deg, rgba(255, 255, 255, 0.07), transparent 35%),
    #3b2416;
  box-shadow: inset 0 0 0 0.17rem #1e110a, 0 0.35rem 0.7rem rgba(20, 11, 5, 0.32);
  color: #f1dfbd;
  text-align: center;
}

.room-plaque::before,
.room-plaque::after {
  content: "";
  position: absolute;
  top: -1.2rem;
  width: 0.08rem;
  height: 1.2rem;
  background: #392317;
}

.room-plaque::before { left: 1.2rem; }
.room-plaque::after { right: 1.2rem; }

.room-plaque span {
  display: block;
  margin-bottom: 0.1rem;
  color: #cbb18b;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.room-plaque h2 {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.13em;
}

.object-action {
  z-index: 31;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.object-action::after {
  content: "";
  position: absolute;
  inset: -0.45rem;
  border: 1px solid rgba(241, 201, 128, 0);
  box-shadow: 0 0 0 rgba(230, 169, 80, 0);
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.object-action:hover::after {
  border-color: rgba(242, 205, 140, 0.55);
  box-shadow: 0 0 1.3rem rgba(232, 174, 83, 0.24);
  transform: translateY(-0.1rem);
}

.object-action:focus-visible,
.room-path:focus-visible,
.threshold-link:focus-visible,
.scroll-dialog button:focus-visible {
  outline: 0.16rem solid #fff0c9;
  outline-offset: 0.2rem;
  box-shadow: 0 0 0 0.34rem #5e2f24, 0 0 1.1rem rgba(255, 210, 126, 0.6);
}

.object-label {
  position: absolute;
  z-index: 8;
  display: block;
  min-width: max-content;
  padding: 0.38rem 0.58rem;
  border: 1px solid rgba(93, 61, 34, 0.8);
  background: rgba(238, 224, 193, 0.94);
  box-shadow: 0 0.2rem 0.45rem rgba(28, 16, 8, 0.3);
  color: #302116;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: transform 180ms ease, background 180ms ease;
}

.object-action:hover .object-label,
.object-action:focus-visible .object-label {
  transform: translateY(-0.15rem);
  background: #fff0cf;
}

.room-path {
  position: absolute;
  z-index: 35;
  right: 48px;
  bottom: 34px;
  display: grid;
  min-width: 9.4rem;
  min-height: 3.2rem;
  align-content: center;
  padding: 0.62rem 2.6rem 0.62rem 0.9rem;
  border: 1px solid rgba(223, 190, 139, 0.52);
  background: linear-gradient(110deg, #3d2517, #24140c);
  box-shadow: inset 0 0 0 0.12rem rgba(15, 7, 3, 0.65), 0 0.3rem 0.75rem rgba(16, 8, 4, 0.32);
  color: #f3e1bd;
  text-decoration: none;
}

.room-path::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 0.78rem;
  transform: translateY(-53%);
  color: #d8ad72;
  font-size: 2rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.room-path:hover::after { transform: translate(0.18rem, -53%); }
.room-path span { color: #bfa887; font-size: 0.62rem; letter-spacing: 0.1em; }
.room-path strong { font-size: 0.82rem; letter-spacing: 0.08em; }

.room-path--return {
  padding-right: 0.9rem;
  padding-left: 2.6rem;
}

.room-path--return::after {
  content: "‹";
  right: auto;
  left: 0.78rem;
}

/* ページTopボタン。位置・大きさ・角丸・z-indexは親サイトと同値 */
.mobile-top-button {
  position: fixed;
  z-index: 2147483000;
  right: 18px;
  bottom: 22px;
  min-width: 94px;
  min-height: 54px;
  padding: 9px 18px;
  border: 1px solid #aa8057;
  border-radius: 28px;
  background: linear-gradient(145deg, #51321f, #28170e);
  box-shadow: inset 0 0 0 3px #201109, 0 0.4rem 1.1rem rgba(10, 5, 2, 0.45);
  color: #f2dfbd;
  font-size: 15px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.mobile-top-button:hover { background: linear-gradient(145deg, #64402a, #33210f); }

.mobile-top-button:focus-visible {
  outline: 0.16rem solid #fff0c9;
  outline-offset: 0.2rem;
}

@media (max-width: 700px) {
  .mobile-top-button {
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    min-width: 76px;
    min-height: 50px;
    font-size: 14px;
  }
}

/* 玄関 */
.room--genkan {
  background: linear-gradient(90deg, #3c2a1d 0 28%, var(--plaster) 28% 100%);
}

.genkan-door {
  position: absolute;
  z-index: 4;
  top: 11%;
  bottom: 23%;
  left: 0;
  width: 31%;
  border: 1.05rem solid var(--wood-dark);
  background:
    linear-gradient(90deg, transparent 47%, #24150d 47% 52%, transparent 52%),
    linear-gradient(180deg, transparent 48%, #24150d 48% 52%, transparent 52%),
    repeating-linear-gradient(90deg, #9b8b70 0 12%, #332014 12% 14%),
    #87745d;
  box-shadow: inset -0.7rem 0 1.3rem rgba(13, 7, 3, 0.46), 0.9rem 0 1.3rem rgba(24, 13, 6, 0.26);
}

.genkan-door span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.35rem;
  background: #25160e;
}

.genkan-door span:nth-child(1) { left: 24%; }
.genkan-door span:nth-child(2) { left: 49%; }
.genkan-door span:nth-child(3) { left: 74%; }
.genkan-door span:nth-child(4) { top: 49%; right: 0; bottom: auto; left: 0; width: auto; height: 0.35rem; }

.plaster-wall--genkan {
  position: absolute;
  z-index: 2;
  top: 12%;
  right: 0;
  bottom: 25%;
  left: 28%;
  background:
    linear-gradient(90deg, transparent 46%, rgba(80, 48, 28, 0.27) 46.4% 47.1%, transparent 47.5%),
    radial-gradient(circle at 60% 42%, rgba(255, 238, 197, 0.22), transparent 42%),
    var(--plaster);
}

.genkan-earth {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 27%;
  background:
    radial-gradient(ellipse at 15% 45%, rgba(155, 131, 91, 0.24), transparent 9%),
    radial-gradient(ellipse at 74% 66%, rgba(25, 19, 14, 0.22), transparent 12%),
    repeating-radial-gradient(circle at 50% 50%, #4a4033 0 0.08rem, #53483b 0.08rem 0.22rem);
  box-shadow: inset 0 0.8rem 1.2rem rgba(21, 12, 6, 0.5);
}

.rising-step {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 22%;
  left: 25%;
  height: 8%;
  transform: perspective(24rem) rotateX(8deg);
  transform-origin: bottom;
  border-top: 0.85rem solid #67442d;
  border-bottom: 0.6rem solid #1c1009;
  background: repeating-linear-gradient(90deg, #3b2417 0 5rem, #4e301e 5rem 5.2rem);
  box-shadow: 0 0.8rem 1rem rgba(14, 7, 3, 0.42);
}

.zori {
  position: absolute;
  z-index: 8;
  bottom: 7%;
  width: 3.2rem;
  height: 5.7rem;
  transform: rotate(7deg) skewY(-4deg);
  border: 0.15rem solid #4d3b29;
  border-radius: 50% 50% 40% 40%;
  background: repeating-linear-gradient(90deg, #b89a61 0 0.14rem, #987b4d 0.14rem 0.23rem);
  box-shadow: 0.3rem 0.45rem 0.55rem rgba(18, 10, 5, 0.3);
}

.zori::after {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 50%;
  width: 1.9rem;
  height: 1.2rem;
  transform: translateX(-50%);
  border: solid #57402b;
  border-width: 0.22rem 0.22rem 0;
  border-radius: 60% 60% 0 0;
}

.zori--one { left: 10%; }
.zori--two { bottom: 5%; left: 15%; transform: rotate(-3deg) skewY(-4deg); }

.umbrella-stand {
  position: absolute;
  z-index: 8;
  bottom: 26%;
  left: 24%;
  width: 3rem;
  height: 4rem;
  border-radius: 0.4rem 0.4rem 0.7rem 0.7rem;
  background: linear-gradient(90deg, #3c2618, #6a4830 45%, #2d1b11);
}

.umbrella-stand span {
  position: absolute;
  bottom: 2.5rem;
  left: 1.35rem;
  width: 0.25rem;
  height: 9rem;
  transform: rotate(-4deg);
  border-radius: 1rem;
  background: #21140d;
}

.umbrella-stand span::before {
  content: "";
  position: absolute;
  top: -0.2rem;
  right: -1.2rem;
  width: 1.3rem;
  height: 1.2rem;
  border: 0.24rem solid #24150d;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 1rem 0 0;
}

.room-plaque--left { left: 4%; }

.entrance-sign {
  position: absolute;
  z-index: 28;
  top: 23%;
  right: 9%;
  width: 34rem;
  padding: 2.4rem;
  border: 0.45rem solid var(--wood-dark);
  outline: 1px solid rgba(142, 102, 59, 0.72);
  outline-offset: -0.85rem;
  background:
    linear-gradient(100deg, rgba(91, 66, 38, 0.08), transparent 28%),
    repeating-linear-gradient(88deg, rgba(102, 79, 44, 0.025) 0 1px, transparent 1px 4px),
    #e7d8b5;
  box-shadow: 0 1rem 2.2rem rgba(27, 15, 7, 0.3);
  color: #322319;
  text-align: center;
}

.entrance-sign__eyebrow {
  margin: 0 0 0.5rem;
  color: #72503a;
  font-size: 0.86rem;
  letter-spacing: 0.15em;
}

.entrance-sign__title {
  margin: 0;
  color: #26170f;
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-shadow: 0.04em 0.05em rgba(79, 52, 33, 0.16);
}

.entrance-sign__title::after {
  content: "";
  display: block;
  width: 3.6rem;
  height: 0.14rem;
  margin: 1rem auto 0.9rem;
  background: var(--vermillion);
}

.entrance-sign p:not(.entrance-sign__eyebrow):not(.entrance-sign__title) {
  margin: 0;
  color: #594536;
  font-size: 1rem;
  line-height: 2;
}

.threshold-link {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-top: 1.3rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid #72503a;
  background: #402619;
  box-shadow: inset 0 0 0 0.13rem #24140d;
  color: #f0dfbd;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.threshold-link span {
  margin-right: 0.65rem;
  color: #c79666;
}

/* 書院 */
.room--shoin { background: var(--plaster); }

.shoin-wall {
  position: absolute;
  z-index: 2;
  inset: 10% 0 27%;
  background:
    linear-gradient(90deg, transparent 31.5%, #3b2315 31.5% 33%, transparent 33% 72%, #3b2315 72% 73.4%, transparent 73.4%),
    radial-gradient(circle at 48% 40%, rgba(255, 239, 198, 0.2), transparent 44%),
    var(--plaster);
}

.shoji-wall {
  position: absolute;
  z-index: 5;
  top: 14%;
  right: 0;
  bottom: 26%;
  width: 29%;
  border: 0.75rem solid var(--wood-dark);
  background:
    repeating-linear-gradient(90deg, transparent 0 23%, #3b2618 23% 25%),
    repeating-linear-gradient(180deg, transparent 0 15%, #3b2618 15% 17%),
    linear-gradient(var(--sky-wash), var(--sky-wash)),
    #dfd5bd;
  box-shadow: inset 0 0 1.6rem rgba(239, 190, 105, 0.22), -0.6rem 0 0.8rem rgba(28, 15, 7, 0.2);
}

.shoji-wall span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  background: #2f1c11;
}

.shoji-wall span:nth-child(1) { left: 32%; }
.shoji-wall span:nth-child(2) { left: 65%; }
.shoji-wall span:nth-child(3) { right: -0.1rem; }

.tokonoma {
  position: absolute;
  z-index: 5;
  top: 14%;
  bottom: 27%;
  left: 0;
  width: 31.8%;
  border-right: 0.85rem solid var(--wood-dark);
  background: linear-gradient(105deg, #a79575, #c7b693 58%, #9f8c6d);
  box-shadow: inset 0 -1rem 0 #3b2416, inset -0.7rem 0 1rem rgba(33, 18, 9, 0.3);
}

.tokonoma__beam {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1rem;
  background: #2e1b11;
}

.tokonoma__vase {
  position: absolute;
  bottom: 2.3rem;
  left: 24%;
  width: 3.2rem;
  height: 4.5rem;
  border-radius: 44% 44% 32% 32%;
  background: radial-gradient(circle at 35% 30%, #80644b, #38271d 68%, #201610);
  box-shadow: 0.35rem 0.45rem 0.6rem rgba(29, 17, 10, 0.3);
}

.tokonoma__branch {
  position: absolute;
  bottom: 6.1rem;
  left: calc(24% + 1.5rem);
  width: 0.12rem;
  height: 7.5rem;
  transform: rotate(-11deg);
  background: #3e3223;
}

.tokonoma__branch::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: -1.9rem;
  width: 3.8rem;
  height: 4.8rem;
  background:
    radial-gradient(ellipse at 15% 30%, #53633c 0 8%, transparent 9%),
    radial-gradient(ellipse at 45% 15%, #66744c 0 9%, transparent 10%),
    radial-gradient(ellipse at 72% 43%, #475b38 0 10%, transparent 11%),
    radial-gradient(ellipse at 32% 70%, #5d6c44 0 8%, transparent 9%);
}

.hanging-scroll {
  position: absolute;
  top: 20%;
  left: 14.5%;
  width: 7.7rem;
  height: 20rem;
}

.hanging-scroll__cord {
  position: absolute;
  top: -2rem;
  left: 50%;
  width: 3.8rem;
  height: 2.2rem;
  transform: translateX(-50%);
  border-top: 0.12rem solid #39261b;
  clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%);
  background: #39261b;
}

.hanging-scroll__paper {
  position: absolute;
  inset: 0.8rem 0.7rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.52rem solid #6a4b35;
  border-left: 0.52rem solid #6a4b35;
  background:
    linear-gradient(90deg, rgba(98, 74, 43, 0.12), transparent 17% 83%, rgba(98, 74, 43, 0.12)),
    #eadfbe;
  box-shadow: 0.3rem 0.65rem 0.9rem rgba(28, 15, 8, 0.3);
}

.hanging-scroll__paper > span {
  color: #3a2920;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  writing-mode: vertical-rl;
}

.hanging-scroll__paper small {
  position: absolute;
  right: 0.45rem;
  bottom: 0.55rem;
  padding: 0.25rem 0.18rem;
  background: #7a372a;
  color: #f2ddba;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
}

.hanging-scroll__roller {
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 0;
  height: 0.52rem;
  border-radius: 1rem;
  background: #322017;
  box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
}

.hanging-scroll .object-label { right: -4.7rem; bottom: 1.2rem; }

.chigai-dana {
  position: absolute;
  z-index: 8;
  top: 29%;
  right: 31%;
  width: 19%;
  height: 33%;
  border-right: 0.8rem solid var(--wood-dark);
  border-left: 0.8rem solid var(--wood-dark);
}

.chigai-dana .shelf {
  position: absolute;
  height: 0.8rem;
  background: linear-gradient(180deg, #755038, #2a180f);
  box-shadow: 0 0.45rem 0.5rem rgba(28, 15, 7, 0.28);
}

.shelf--high { top: 23%; right: 0; left: 24%; }
.shelf--low { top: 62%; right: 28%; left: 0; }

.ornament { position: absolute; }
.ornament--box { top: 2%; right: 12%; width: 3.6rem; height: 2rem; background: #5c3522; box-shadow: inset 0 0 0 0.2rem #2c180f; }
.ornament--vase { top: 42%; left: 17%; width: 2.2rem; height: 3rem; border-radius: 45% 45% 25% 25%; background: linear-gradient(90deg, #28251e, #71644f, #242119); }

.lantern {
  position: absolute;
  right: 22.5%;
  bottom: 29%;
  width: 6.4rem;
  height: 12.5rem;
  filter: drop-shadow(0 0 1.15rem var(--lantern-glow));
}

.lantern__cap,
.lantern__base {
  position: absolute;
  right: 0.2rem;
  left: 0.2rem;
  height: 0.72rem;
  border-radius: 0.12rem;
  background: linear-gradient(180deg, #5c3b26, #1e120b);
}

.lantern__cap { top: 0.3rem; }
.lantern__base { bottom: 0.35rem; height: 0.95rem; }
.lantern__cap::before,
.lantern__base::before { content: ""; position: absolute; top: 50%; right: -0.45rem; left: -0.45rem; height: 0.3rem; transform: translateY(-50%); background: #25150c; }

.lantern__body {
  position: absolute;
  top: 1rem;
  right: 0.55rem;
  bottom: 1.15rem;
  left: 0.55rem;
  border: 0.38rem solid #2d1b10;
  background:
    linear-gradient(90deg, transparent 47%, #382216 47% 53%, transparent 53%),
    repeating-linear-gradient(180deg, transparent 0 22%, #382216 22% 25%),
    radial-gradient(circle at 50% 65%, var(--lantern-light), #e8ca94 42%, #b9aa8b 100%);
  box-shadow: inset 0 0 1.8rem rgba(255, 174, 62, 0.45), 0 0 2.6rem var(--lantern-glow);
  animation: lantern-breathe 4.6s ease-in-out infinite;
}

.lantern__body span {
  position: absolute;
  top: -0.2rem;
  bottom: -0.2rem;
  width: 0.24rem;
  background: #362116;
}

.lantern__body span:nth-child(1) { left: 31%; }
.lantern__body span:nth-child(2) { left: 65%; }
.lantern__body span:nth-child(3) { display: none; }
.lantern__label { right: -4.2rem; bottom: 0.1rem; }

.shoin-message {
  position: absolute;
  z-index: 27;
  bottom: 6.5%;
  left: 36%;
  max-width: 30rem;
  padding: 0.7rem 1.05rem;
  border-left: 0.22rem solid var(--vermillion);
  background: rgba(235, 222, 191, 0.9);
  color: #433326;
}

.shoin-message p,
.shoin-message strong { margin: 0; }
.shoin-message p { margin-bottom: 0.2rem; font-size: 0.72rem; }
.shoin-message strong { font-size: clamp(0.78rem, 1.1vw, 0.95rem); letter-spacing: 0.04em; }

.book {
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  margin: 0;
  border: 0;
  cursor: pointer;
  transform: translateY(0.18rem) rotate(var(--book-rest-angle, 0deg));
  transform-origin: 50% 100%;
  filter: sepia(0.1) saturate(0.76) brightness(0.86);
  box-shadow:
    inset 0.12rem 0 rgba(222, 190, 139, 0.12),
    inset -0.3rem 0 rgba(16, 8, 4, 0.4),
    inset 0 -0.8rem rgba(18, 9, 5, 0.12),
    0.16rem 0.24rem 0.28rem rgba(6, 3, 2, 0.62);
  transition: transform 220ms cubic-bezier(0.2, 0.72, 0.2, 1), filter 180ms ease, box-shadow 220ms ease;
}

.book:hover,
.book:focus-visible {
  z-index: 9;
  transform: translateY(-0.9rem) translateZ(1.2rem) rotate(0deg) scale(1.025);
  filter: sepia(0.08) saturate(0.82) brightness(1.03);
  box-shadow:
    inset 0.12rem 0 rgba(239, 211, 165, 0.18),
    inset -0.3rem 0 rgba(16, 8, 4, 0.34),
    0.35rem 1rem 1.15rem rgba(5, 2, 1, 0.7);
}

.book:focus-visible {
  outline: 0.18rem solid #fff0c7;
  outline-offset: 0.18rem;
  box-shadow: 0 0 0 0.38rem #7e3c2d, 0 0 1.1rem rgba(245, 189, 91, 0.6);
}

.book--stitched {
  width: clamp(4rem, 4.8vw, 4.65rem);
  height: 10.2rem;
  padding: 0.78rem 0.5rem 0.7rem 1.12rem;
  border: 0.12rem solid rgba(25, 14, 8, 0.72);
  border-radius: 0.06rem 0.18rem 0.18rem 0.05rem;
  color: #d7c39d;
}

.book--stitched::before {
  content: "";
  position: absolute;
  top: 0.18rem;
  bottom: 0.18rem;
  left: 0.32rem;
  width: 0.72rem;
  opacity: 0.9;
  border-right: 1px solid rgba(19, 11, 7, 0.42);
  background:
    repeating-linear-gradient(180deg, transparent 0 1.45rem, rgba(218, 201, 166, 0.92) 1.45rem 1.58rem, transparent 1.58rem 2.45rem),
    linear-gradient(90deg, rgba(245, 229, 194, 0.08), rgba(16, 9, 5, 0.22));
  box-shadow: inset -0.08rem 0 rgba(239, 219, 181, 0.14);
}

.book--stitched::after {
  content: "";
  position: absolute;
  inset: 0.32rem 0.28rem 0.32rem 1rem;
  border: 1px solid rgba(224, 200, 159, 0.14);
  box-shadow: inset 0 0 1.3rem rgba(15, 8, 4, 0.1);
}

.book--stitched i {
  position: absolute;
  z-index: 1;
  top: 0.3rem;
  right: -0.22rem;
  bottom: 0.26rem;
  width: 0.38rem;
  border-radius: 0 0.14rem 0.14rem 0;
  background: repeating-linear-gradient(180deg, #d9caa8 0 0.13rem, #b3a17d 0.13rem 0.17rem);
  box-shadow: inset -0.08rem 0 rgba(82, 61, 38, 0.26), 0.08rem 0.08rem 0.12rem rgba(5, 2, 1, 0.46);
}

.book--stitched span {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0.42rem 0.24rem;
  border: 1px solid rgba(81, 57, 35, 0.42);
  background: rgba(218, 204, 170, 0.86);
  color: #302218;
  font-size: clamp(0.76rem, 0.88vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  writing-mode: vertical-rl;
  box-shadow: inset 0 0 0.45rem rgba(73, 48, 27, 0.12);
}

.book--bengara {
  --book-rest-angle: -0.45deg;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(19, 9, 5, 0.045) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #592f35, #7b4650 72%, #45242a);
}

.book--indigo {
  --book-rest-angle: 0.3deg;
  height: 10.2rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(12, 9, 7, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #25424a, #37656d 72%, #20373d);
}

.book--moss {
  --book-rest-angle: -0.2deg;
  height: 10.2rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(16, 11, 7, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #34483d, #52695a 72%, #2b3b32);
}

/* 囲炉裏 */
.room--irori { background: #a68f6a; }
.irori-wall { position: absolute; z-index: 2; inset: 10% 0 28%; background: radial-gradient(circle at 55% 40%, rgba(255, 221, 166, 0.18), transparent 50%), var(--plaster); }
.ceiling-beams--low { height: 16%; }
.tatami-floor--irori { height: 40%; background: linear-gradient(90deg, transparent 31%, var(--tatami-edge) 31% 32.5%, transparent 32.5% 66%, var(--tatami-edge) 66% 67.5%, transparent 67.5%), repeating-linear-gradient(88deg, var(--tatami) 0 0.13rem, var(--tatami-light) 0.13rem 0.2rem); }

.hanging-hook {
  position: absolute;
  z-index: 9;
  top: 11%;
  left: 50%;
  width: 0.45rem;
  height: 30%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, #2b2018 0 0.5rem, #6f5a43 0.5rem 0.65rem);
}

.hanging-hook span {
  position: absolute;
  bottom: -2.2rem;
  left: -0.5rem;
  width: 1.6rem;
  height: 2.7rem;
  border: 0.35rem solid #2a211a;
  border-top: 0;
  border-radius: 0 0 1.2rem 1.2rem;
}

.cushion {
  position: absolute;
  z-index: 8;
  bottom: 17%;
  width: 10rem;
  height: 5rem;
  border: 0.32rem solid #4d2a21;
  border-radius: 1.7rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0 4%, transparent 5%), #754238;
  box-shadow: 0 0.55rem 0.65rem rgba(29, 15, 8, 0.32);
}

.cushion--left { left: 15%; transform: rotate(-4deg); }
.cushion--right { right: 15%; transform: rotate(4deg); }

.hearth {
  position: absolute;
  bottom: 7%;
  left: 50%;
  width: clamp(19rem, 31vw, 29rem);
  height: clamp(13rem, 22vw, 19rem);
  transform: translateX(-50%) perspective(32rem) rotateX(12deg);
  transform-origin: bottom;
}

.hearth::after { inset: -0.8rem; }
.hearth__frame { position: absolute; inset: 13% 4% 0; border: clamp(1.2rem, 2vw, 2rem) solid #362319; background: #605548; box-shadow: inset 0 0 2rem #1c1510, 0 1rem 1.5rem rgba(15, 8, 3, 0.48); }
.hearth__ash { position: absolute; z-index: 2; inset: 30% 19% 16%; border-radius: 45%; background: radial-gradient(ellipse, #3e3127, #71675a 62%, #2b211b); }
.hearth__embers { position: absolute; z-index: 3; right: 33%; bottom: 21%; left: 33%; height: 16%; border-radius: 50%; background: radial-gradient(circle, #ffba55 0 4%, #c94e24 5% 18%, #6e291d 23% 45%, transparent 48%); box-shadow: 0 0 2rem var(--fire-glow); }

.flame {
  position: absolute;
  z-index: 5;
  bottom: 30%;
  left: 50%;
  width: 2.6rem;
  height: 5.5rem;
  transform: translateX(-50%) rotate(4deg);
  transform-origin: 50% 100%;
  border-radius: 55% 45% 55% 45%;
  background: linear-gradient(180deg, #ffd780 0 10%, #f29437 35%, #c74323 78%, transparent 80%);
  filter: drop-shadow(0 0 0.8rem var(--fire-glow));
  clip-path: polygon(50% 0, 78% 38%, 95% 70%, 70% 100%, 30% 100%, 5% 70%, 27% 42%);
  animation: flame-dance 1.35s ease-in-out infinite alternate;
}

.flame--two { bottom: 29%; left: 44%; width: 2rem; height: 4.4rem; animation-delay: -0.55s; }
.flame--three { bottom: 29%; left: 56%; width: 1.8rem; height: 4.1rem; animation-delay: -0.9s; }

.kettle {
  position: absolute;
  z-index: 7;
  bottom: 30%;
  left: 50%;
  width: 8rem;
  height: 6.2rem;
  transform: translateX(-50%);
  border-radius: 45% 45% 35% 35%;
  background: radial-gradient(circle at 35% 28%, #5a554b, #25231f 55%, #12110f 90%);
  box-shadow: inset -0.5rem -0.5rem 0.7rem #0d0c0a, 0 0.7rem 0.8rem rgba(15, 8, 4, 0.55);
}

.kettle::before { content: ""; position: absolute; top: -4.4rem; left: 0.7rem; width: 6.6rem; height: 6rem; border: 0.55rem solid #1b1a17; border-bottom: 0; border-radius: 50% 50% 0 0; }
.kettle::after { content: ""; position: absolute; top: 1.7rem; right: -2rem; border: solid transparent; border-width: 0.45rem 0 0.45rem 2.3rem; border-left-color: #1e1d1a; transform: rotate(-8deg); }
.kettle i { position: absolute; top: -0.45rem; left: 50%; width: 2.3rem; height: 0.75rem; transform: translateX(-50%); border-radius: 50%; background: #171613; }

.steam { position: absolute; z-index: 8; bottom: 69%; left: 49%; width: 0.6rem; height: 4.8rem; border-left: 0.22rem solid rgba(244, 235, 218, 0.55); border-radius: 50%; filter: blur(0.08rem); animation: steam-rise 3s ease-in-out infinite; }
.steam--two { left: 52%; height: 4rem; animation-delay: -1.4s; }
.hearth__label { right: -1.6rem; bottom: 6%; }

.iron-pot { position: absolute; z-index: 8; right: 18%; bottom: 31%; width: 7rem; height: 4.5rem; border-radius: 12% 12% 45% 45%; background: linear-gradient(90deg, #1b1a17, #4c4840, #161512); box-shadow: 0 0.5rem 0.7rem rgba(12, 6, 3, 0.38); }
.iron-pot::before { content: ""; position: absolute; top: -2.9rem; left: 0.6rem; width: 5.8rem; height: 4rem; border: 0.38rem solid #25231f; border-bottom: 0; border-radius: 50% 50% 0 0; }
.iron-pot span { position: absolute; top: -0.35rem; right: -0.3rem; left: -0.3rem; height: 0.5rem; border-radius: 50%; background: #171612; }

.irori-copy { position: absolute; z-index: 27; top: 24%; right: 9%; width: 20rem; padding: 1rem 1.2rem; border-left: 0.2rem solid var(--vermillion); background: rgba(231, 217, 185, 0.88); color: #493528; }
.irori-copy span { display: block; margin-bottom: 0.35rem; font-weight: 700; letter-spacing: 0.1em; }
.irori-copy p { margin: 0; font-size: 0.78rem; line-height: 1.8; }

/* 旅立ち */
.room--departure { background: #5c5a46; }
.departure-sky { position: absolute; z-index: 2; inset: 0; background: linear-gradient(var(--sky-wash), var(--sky-wash)), url("assets/images/garden-vista.webp") center 38% / cover; filter: var(--garden-filter); }
.departure-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 15, 9, 0.7), transparent 27% 68%, rgba(22, 14, 8, 0.45)); }
.departure-garden { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; height: 27%; background: linear-gradient(180deg, rgba(37, 45, 28, 0), rgba(25, 35, 22, 0.8)); }
.covered-walkway { position: absolute; z-index: 12; top: 0; bottom: 0; left: 0; width: 31%; border-right: 1.3rem solid #1c1009; background: linear-gradient(90deg, rgba(18, 10, 5, 0.76), rgba(83, 52, 30, 0.5)); box-shadow: 0.8rem 0 1.2rem rgba(12, 6, 3, 0.34); }
.covered-walkway::before { content: ""; position: absolute; top: 0; right: -3rem; left: 0; height: 18%; background: repeating-linear-gradient(90deg, #21130b 0 5.5rem, #4c2e1b 5.5rem 6rem); border-bottom: 0.8rem solid #160c07; }
.covered-walkway span { position: absolute; top: 14%; bottom: 0; width: 0.85rem; background: #1d110a; }
.covered-walkway span:nth-child(1) { left: 18%; }
.covered-walkway span:nth-child(2) { left: 52%; }
.covered-walkway span:nth-child(3) { left: 85%; }
.walkway-floor { position: absolute; z-index: 13; bottom: 0; left: 0; width: 48%; height: 28%; clip-path: polygon(0 0, 64% 10%, 100% 100%, 0 100%); background: repeating-linear-gradient(90deg, #3d2718 0 5.5rem, #573720 5.5rem 5.8rem); box-shadow: inset 0 0.7rem 0.8rem rgba(13, 7, 3, 0.4); }
.gate-shadow { position: absolute; z-index: 6; top: 19%; left: 58%; width: 32%; height: 58%; background: radial-gradient(ellipse, rgba(26, 17, 10, 0.45), transparent 68%); }

.journey-gate { position: absolute; z-index: 16; top: 18%; left: 67%; width: clamp(17rem, 27vw, 25rem); height: clamp(21rem, 72%, 35rem); transform: translateX(-50%); }
.journey-gate__roof { position: absolute; z-index: 5; top: 0; right: -1.8rem; left: -1.8rem; height: 4.2rem; clip-path: polygon(8% 38%, 44% 23%, 50% 0, 56% 23%, 92% 38%, 100% 83%, 62% 72%, 50% 100%, 38% 72%, 0 83%); background: linear-gradient(180deg, #1a100a, #3f291a 52%, #17100b); filter: drop-shadow(0 0.7rem 0.5rem rgba(12, 6, 3, 0.5)); }
.journey-gate__post { position: absolute; top: 3.4rem; bottom: 0; width: 2rem; background: linear-gradient(90deg, #1b1009, #573720 48%, #21130b); box-shadow: 0.45rem 0 0.7rem rgba(11, 5, 2, 0.42); }
.journey-gate__post--left { left: 1.6rem; }
.journey-gate__post--right { right: 1.6rem; }
.journey-gate__doors { position: absolute; z-index: 2; top: 5.7rem; right: 2.9rem; bottom: 0; left: 2.9rem; display: flex; background: rgba(25, 16, 10, 0.2); }
.journey-gate__doors i { flex: 1; border: 0.35rem solid #2d1c12; background: repeating-linear-gradient(90deg, #4d3020 0 1.6rem, #2b1a11 1.6rem 1.85rem); transition: transform 420ms ease; }
.journey-gate__doors i:first-child { transform-origin: left; }
.journey-gate__doors i:last-child { transform-origin: right; }
.journey-gate:hover .journey-gate__doors i:first-child { transform: perspective(12rem) rotateY(-12deg); }
.journey-gate:hover .journey-gate__doors i:last-child { transform: perspective(12rem) rotateY(12deg); }
.journey-gate__label { right: -1rem; bottom: -1.5rem; }

.journey-bundle { position: absolute; z-index: 18; bottom: 8%; left: 39%; width: 7rem; height: 5.5rem; transform: rotate(-2deg); background: #744d3e; box-shadow: inset 0 0 0 0.25rem #42291f, 0.5rem 0.55rem 0.7rem rgba(14, 7, 3, 0.35); }
.journey-bundle span { position: absolute; inset: -0.35rem 3.1rem; background: #c0a574; }
.letter-box { position: absolute; z-index: 19; bottom: 6%; left: 48%; display: grid; width: 8rem; height: 4.5rem; place-items: center; border: 0.38rem solid #28170e; background: linear-gradient(135deg, #70462a, #4b2d1b); box-shadow: 0.45rem 0.55rem 0.8rem rgba(13, 6, 3, 0.42); color: #cda874; }
.letter-box span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid #b1885c; }
.room-plaque--departure { left: 35%; }
.departure-copy { position: absolute; z-index: 28; top: 46%; left: max(7%, 100px); width: min(21rem, 28%); padding: 1rem 1.15rem; border-left: 0.2rem solid var(--vermillion); background: rgba(232, 220, 193, 0.91); color: #3d2c21; }
.departure-copy span { font-weight: 700; letter-spacing: 0.09em; }
.departure-copy p { margin: 0.5rem 0 0; font-size: 0.76rem; line-height: 1.8; }

/* 日替わり名言、準備中、和綴じ本をひらいたときの巻物 */
.daily-quote-dialog,
.preparing-dialog,
.hon-dialog,
.irori-guide-dialog {
  width: min(34rem, calc(100% - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #302117;
  overflow: visible;
}

.daily-quote-dialog:not([open]),
.preparing-dialog:not([open]),
.hon-dialog:not([open]),
.irori-guide-dialog:not([open]) {
  display: none;
}

.daily-quote-dialog::backdrop,
.preparing-dialog::backdrop,
.hon-dialog::backdrop,
.irori-guide-dialog::backdrop {
  background: rgba(13, 9, 6, 0.72);
  backdrop-filter: blur(0.18rem);
}

.scroll-dialog { position: relative; padding: 1rem 0; filter: drop-shadow(0 1rem 1.5rem rgba(8, 4, 2, 0.55)); }
.scroll-dialog__paper { position: relative; padding: clamp(1.8rem, 5vw, 3rem); border-right: 0.75rem solid #7c5b3d; border-left: 0.75rem solid #7c5b3d; background: repeating-linear-gradient(87deg, rgba(90, 65, 34, 0.035) 0 1px, transparent 1px 5px), #ead9b5; text-align: center; }
.scroll-dialog__paper::before { content: ""; position: absolute; inset: 0.65rem; border: 1px solid rgba(106, 72, 39, 0.38); pointer-events: none; }
.scroll-dialog__rod { position: absolute; z-index: 2; right: -1.1rem; left: -1.1rem; height: 1rem; border-radius: 1rem; background: linear-gradient(180deg, #6b472e, #28170e); }
.scroll-dialog__rod::before,
.scroll-dialog__rod::after { content: ""; position: absolute; top: -0.28rem; width: 1.35rem; height: 1.55rem; border-radius: 50%; background: #27170f; }
.scroll-dialog__rod::before { left: -0.35rem; }
.scroll-dialog__rod::after { right: -0.35rem; }
.scroll-dialog__rod--top { top: 0.5rem; }
.scroll-dialog__rod--bottom { bottom: 0.5rem; }
.scroll-dialog__eyebrow { margin: 0 0 0.45rem; color: #8a4b39; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; }
.scroll-dialog h2 { margin: 0; color: #2f2017; font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 600; letter-spacing: 0.1em; }
.scroll-dialog h2::after { content: ""; display: block; width: 2.5rem; height: 0.12rem; margin: 0.85rem auto; background: #8a4736; }
.scroll-dialog p:not(.scroll-dialog__eyebrow) { margin: 0 auto; max-width: 26rem; color: #564235; font-size: 0.9rem; line-height: 1.95; }
.scroll-dialog button { position: relative; z-index: 2; min-width: 8.6rem; min-height: 2.8rem; margin-top: 1.4rem; border: 1px solid #855e3d; background: #42271a; color: #efdfbe; cursor: pointer; }

.daily-quote-scroll .scroll-dialog__paper {
  min-height: 20rem;
  background:
    linear-gradient(90deg, rgba(128, 90, 48, 0.06), transparent 18% 82%, rgba(128, 90, 48, 0.06)),
    repeating-linear-gradient(87deg, rgba(90, 65, 34, 0.035) 0 1px, transparent 1px 5px),
    #ead9b5;
}

.daily-quote {
  position: relative;
  z-index: 1;
  margin: clamp(1rem, 3vw, 1.6rem) auto 0;
  color: #2f2017;
}

.daily-quote::before {
  content: "“";
  display: block;
  height: 1.7rem;
  color: rgba(138, 71, 54, 0.7);
  font-family: Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
}

.scroll-dialog p.daily-quote__text {
  max-width: 27rem;
  color: #2f2017;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.17rem, 3vw, 1.3rem);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.06em;
}

.daily-quote__explanation {
  position: relative;
  z-index: 1;
  max-width: 27rem;
  margin: 1.45rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(106, 72, 39, 0.32);
  text-align: left;
}

.daily-quote__explanation h3 {
  margin: 0 0 0.55rem;
  color: #67392d;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-align: center;
}

.scroll-dialog .daily-quote__explanation p {
  color: #49382d;
  font-size: 0.88rem;
  line-height: 1.9;
}

.scroll-dialog .daily-quote__source {
  position: relative;
  z-index: 1;
  margin-top: 0.8rem;
  color: #705f50;
  font-size: 0.74rem;
  line-height: 1.6;
}

/* 名言・準備中の巻物は、横向きスマホなど画面が低いと紙が画面の外にはみ出し、
   後ろの部屋しか動かせず肝心の続きが読めなくなっていた。紙の中だけを縦に送る。 */
.daily-quote-dialog,
.preparing-dialog {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}

.daily-quote-dialog .scroll-dialog,
.preparing-dialog .scroll-dialog {
  display: flex;
  max-height: inherit;
  flex-direction: column;
}

.daily-quote-dialog .scroll-dialog__paper,
.preparing-dialog .scroll-dialog__paper {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.preparing-dialog .scroll-dialog__paper {
  min-height: 0;
}

/* 回が増えても巻物からはみ出さない。
   題と「棚へ戻す」は動かさず、回の一覧だけ縦に送れるようにする。
   ただし横向きスマホは題や説明文だけでも紙の高さを超えるので、
   紙自体もスクロールできるようにして取りこぼしをなくす。 */
.hon-dialog {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}

.hon-dialog .scroll-dialog {
  display: flex;
  max-height: inherit;
  flex-direction: column;
}

.hon-dialog .scroll-dialog__paper {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hon-dialog .hon-list {
  min-height: 3.5rem;
  padding-right: 0.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 和綴じ本の中身(どの回を読むか)。二年度ずつ横に並べ、巻物内の縦スクロールを短くする。 */
.hon-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.hon-list li { margin: 0; }
.hon-list a {
  display: block;
  min-height: 2.9rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #8a6440;
  background: rgba(255, 253, 246, 0.86);
  color: #5a2a20;
  font-size: 0.92rem;
  line-height: 1.6;
  text-decoration: underline;
}
.hon-list a:hover { background: #fff; border-color: #5a2a20; }
.hon-list a:focus-visible { outline: 0.16rem solid #5a2a20; outline-offset: 0.16rem; }
.hon-list .kai { display: block; font-size: 0.78rem; color: #6d5a49; text-decoration: none; }

/* 幅の狭いスマホでは、年度名と科目名を無理に折り返さず一列で読めるようにする。 */
@media (max-width: 430px) {
  .hon-list { grid-template-columns: minmax(0, 1fr); }
}

/* 囲炉裏の鍋と庭から開く、47都道府県の巻物 */
.irori-guide-dialog {
  width: min(84rem, calc(100% - 2rem));
  max-height: calc(100dvh - 1.5rem);
}

.irori-guide-scroll {
  display: flex;
  max-height: inherit;
  flex-direction: column;
}

.irori-guide-scroll .scroll-dialog__paper {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}

/* 全国案内は紙面を縦に送るため、端に残る内側の飾り罫は出さない。 */
.irori-guide-scroll .scroll-dialog__paper::before { display: none; }

.irori-guide__heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.irori-guide__heading h2 { max-width: 28rem; }
.irori-guide__heading h2::after { display: none; }

.irori-guide__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  margin-top: 1rem;
}


.irori-guide-scroll .scroll-dialog__paper {
  padding: clamp(1rem, 2.3vw, 2rem);
}

.irori-guide__map-section {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #b49a73;
  background: #e7dbba;
  box-shadow: inset 0 0 0 4px #eadfc4;
}

.irori-guide__map-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 .5rem;
}

.scroll-dialog .irori-guide__map-section p {
  max-width: none;
  margin: 0;
  text-align: left;
}

.scroll-dialog .irori-guide__map-section .irori-guide__map-title {
  color: #463629;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.scroll-dialog .irori-guide__map-section .irori-guide__map-selection {
  color: #803f2c;
  font-size: 1rem;
}

.irori-guide__map-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0;
}

.scroll-dialog .irori-guide__map-tools button {
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: .35rem .75rem;
  background: #f3e8ce;
  color: #513e2c;
  font: inherit;
  font-size: 1rem;
}

.scroll-dialog .irori-guide__map-tools button:disabled {
  opacity: .45;
  cursor: default;
}

.irori-guide__map {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  contain: layout paint;
}

.irori-guide__atlas {
  display: block;
  width: 100%;
  height: 100%;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}
.irori-guide__map.is-zoomed { touch-action: none; cursor: grab; }
.irori-guide__map.is-dragging, .irori-guide__map.is-dragging * { cursor: grabbing; }
.irori-guide__map-decoration, .irori-guide__map-coast, .irori-guide__map-grain,
.irori-guide__map-pickup { pointer-events: none; }
.irori-guide__map-grain { mix-blend-mode: multiply; }
.irori-guide__map-coast {
  fill: #bac6b2;
  stroke: #b8c5b3;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.irori-guide__map-prefecture {
  stroke: #685540;
  stroke-width: 1px;
  stroke-linejoin: round;
  cursor: pointer;
  outline: none;
}

.irori-guide__map-prefecture[aria-current="true"] {
  fill: #ab6047;
  stroke: #603828;
  stroke-width: 1.5px;
}

.irori-guide__map-prefecture:focus-visible {
  stroke: #271e16;
  stroke-width: 2px;
  stroke-dasharray: 3 2;
}

.irori-guide__map-pickup {
  fill: #dbac6e;
  stroke: #6b412a;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 3px #49392766);
}

.irori-guide__map-inscription {
  fill: #66543f;
  font-size: 24px;
  letter-spacing: .15em;
}

.irori-guide__map-cartouche { font-size: 25px; font-weight: 700; }
.irori-guide__sea-name { fill: #687967; font-size: 25px; letter-spacing: .5em; }

.irori-guide__map-tooltip {
  position: absolute;
  z-index: 3;
  padding: .25rem .6rem;
  border: 1px solid #7d5136;
  background: #fff1d2;
  color: #442b1d;
  box-shadow: 0 2px 5px #48332033;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
}

.irori-guide__map-footer {
  display: grid;
  grid-template-columns: clamp(8rem, 26%, 10rem) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #b6a17e;
}

.irori-guide__map-footer-copy {
  min-width: 0;
  padding: .5rem 0;
}

.scroll-dialog .irori-guide__map-section .irori-guide__person-title {
  margin-bottom: .35rem;
  color: #493625;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.scroll-dialog .irori-guide__map-section .irori-guide__map-help {
  font-size: 1rem;
  line-height: 1.6;
}

.scroll-dialog .irori-guide__map-section .irori-guide__map-note {
  margin-top: .4rem;
  font-size: .875rem;
  line-height: 1.6;
  color: #6d5840;
}

.irori-guide__person-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  opacity: .9;
  mix-blend-mode: multiply;
}

.scroll-dialog .irori-guide__person-button {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: #493625;
  cursor: pointer;
}

.irori-guide__person-button span {
  position: absolute;
  right: .25rem;
  bottom: .25rem;
  left: .25rem;
  padding: .25rem .35rem;
  border: 1px solid #856847;
  background: #f3e8ce;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translateY(.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.irori-guide__person-button:hover,
.irori-guide__person-button:focus-visible {
  border-color: #6b412a;
  outline: .16rem solid #6b412a;
  outline-offset: .15rem;
}

.irori-guide__person-button:hover .irori-guide__person-image,
.irori-guide__person-button:focus-visible .irori-guide__person-image {
  opacity: 1;
  transform: scale(1.025);
}

.irori-guide__person-button:hover span,
.irori-guide__person-button:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.irori-guide__person-button .irori-guide__person-image {
  transition: opacity 160ms ease, transform 160ms ease;
}

@media (max-width: 900px) {
  .irori-guide__content { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .irori-guide__map-section { padding: .5rem; }
  .irori-guide__map-footer {
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
  }
}

.irori-guide__scroll-instruction,
.irori-guide__scroll-assist { display: none; }
.irori-guide__scroll-assist[hidden] { display: none !important; }

/* 地図の下へ隠れる案内を、スマホだけ選択直後に前面へ出す。 */
.irori-mobile-dialog { display: none; }

@media (pointer: coarse) and (max-width: 900px),
       (pointer: coarse) and (max-height: 600px) {
  /* iOSでは通常のスクロールバーが細く消えやすいため、右端に常設の操作用つまみを置く。 */
  .irori-guide-scroll .scroll-dialog__paper {
    padding-right: 5rem;
    scrollbar-width: none;
  }
  .irori-guide-scroll .scroll-dialog__paper::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .scroll-dialog p.irori-guide__scroll-instruction {
    display: block;
    max-width: none;
    margin: .75rem 0 0;
    padding: .75rem 1rem;
    border-left: 4px solid #74452e;
    background: #f5ead0;
    color: #402d20;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
  }

  .irori-guide__scroll-assist:not([hidden]) {
    position: absolute;
    z-index: 12;
    top: 2.5rem;
    right: max(8px, env(safe-area-inset-right));
    bottom: 2rem;
    display: block;
    width: 56px;
  }

  .irori-guide__scroll-track {
    position: relative;
    width: 56px;
    height: 100%;
    border: 1px solid #6e4a31;
    border-radius: 8px;
    background: rgba(239, 223, 184, .94);
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .irori-guide__scroll-track::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 50%;
    width: 16px;
    border: 1px solid #7b5a3c;
    border-radius: 8px;
    background: #9b784f;
    transform: translateX(-50%);
  }

  .irori-guide__scroll-thumb {
    position: relative;
    z-index: 1;
    display: grid;
    width: 40px;
    min-height: 80px;
    margin-left: 7px;
    place-items: center;
    border: 2px solid #4f301e;
    border-radius: 8px;
    background: #fff2d1;
    color: #3b281b;
    box-shadow: 0 2px 8px rgba(35, 21, 12, .22);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    will-change: transform;
  }

  .irori-guide__scroll-thumb::before {
    content: "上下";
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: .12em;
  }

  .irori-guide__scroll-track.is-dragging .irori-guide__scroll-thumb {
    background: #fffaf0;
  }

  .irori-guide__scroll-track:focus-visible {
    outline: 3px solid #fff4d3;
    outline-offset: 2px;
  }

  /* 地図内ではブラウザの画面拡大判定を待たず、二本指操作を即座に受け取る。 */
  .irori-guide__map { touch-action: none; }
  /* feTurbulence は一部のスマホで毎フレーム再描画されるため、地図操作を優先する。 */
  .irori-guide__map-grain { display: none; }

  .irori-mobile-dialog[open] {
    display: block;
    box-sizing: border-box;
    width: min(40rem, calc(100vw - 16px));
    max-width: none;
    max-height: calc(100dvh - 16px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 2px solid #755238;
    border-radius: 4px;
    background: #efe3c5;
    color: #35261c;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Yu Gothic", serif;
    font-size: 16px;
    line-height: 1.7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
  }

  .irori-mobile-dialog::backdrop { background: rgba(15, 9, 5, .72); }

  .irori-mobile-dialog__paper {
    box-sizing: border-box;
    max-height: calc(100dvh - 16px);
    padding: 16px;
    overflow-y: auto;
    border: 8px double #9b7b51;
    background: #efe3c5;
  }

  .irori-mobile-dialog__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ad9471;
  }

  .irori-mobile-dialog__count {
    margin: 0 0 8px;
    color: #6d4833;
    font-size: 16px;
    font-weight: 700;
  }

  .irori-mobile-dialog__heading h2 {
    margin: 0;
    color: #302117;
    font-size: 24px;
    line-height: 1.5;
  }

  .irori-mobile-dialog__close {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #6b412a;
    border-radius: 4px;
    background: #f8eed7;
    color: #3d2a20;
    font: inherit;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
  }

  .irori-mobile-dialog__content { display: grid; gap: 16px; padding-top: 16px; }
  .irori-mobile-dialog__illustration { margin: 0; border: 1px solid #ad9471; background: #d6c5a1; }
  .irori-mobile-dialog__illustration img { display: block; width: 100%; height: auto; object-fit: contain; }
  .irori-mobile-dialog__illustration figcaption { padding: 8px; color: #5f4939; font-size: 14px; text-align: right; }
  .irori-mobile-dialog__copy > p { margin: 0; font-size: 16px; line-height: 1.7; }
  .irori-mobile-dialog__choices { display: grid; gap: 8px; margin-top: 16px; }
  .irori-mobile-dialog__choices[hidden] { display: none; }
  .irori-mobile-dialog__choices button {
    min-height: 48px;
    padding: 8px 16px;
    border: 1px solid #855e3d;
    border-radius: 4px;
    background: #fffaf0;
    color: #513426;
    font: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
  }
  .irori-mobile-dialog__choices button[aria-pressed="true"] {
    border-color: #603729;
    background: #603729;
    color: #fff0d2;
    font-weight: 700;
  }
}

@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  .irori-mobile-dialog[open] { width: min(52rem, calc(100vw - 16px)); }
  .irori-mobile-dialog__content { grid-template-columns: minmax(10rem, 38%) minmax(0, 1fr); align-items: start; }
  .irori-mobile-dialog__illustration img { max-height: calc(100dvh - 176px); }
}

.guide-person-dialog {
  width: min(52rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid #755238;
  background: #e8d8b5;
  color: #35261c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.guide-person-dialog::backdrop { background: rgba(15, 9, 5, .68); }

.guide-person-dialog__paper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.2fr);
  gap: 1.5rem;
  max-height: calc(100dvh - 2rem);
  padding: 2rem;
  overflow-y: auto;
  border: 8px double #9b7b51;
  background: #efe3c5;
}

.guide-person-dialog__paper img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.guide-person-dialog__copy { align-self: center; }
.guide-person-dialog__eyebrow {
  margin: 0;
  color: #7a4837;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.guide-person-dialog__copy h2 {
  margin: .35rem 0 1rem;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: .08em;
}

.guide-person-dialog__copy p:not(.guide-person-dialog__eyebrow) {
  margin: .75rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.guide-person-dialog__close {
  position: absolute;
  z-index: 2;
  top: .75rem;
  right: .75rem;
  min-width: 4.5rem;
  min-height: 2.75rem;
  border: 1px solid #6b412a;
  background: #f8eed7;
  color: #3d2a20;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

@media (max-width: 640px) {
  .guide-person-dialog__paper {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 3.5rem 1rem 1rem;
  }
  .guide-person-dialog__paper img { max-width: 16rem; margin: 0 auto; }
}

.irori-guide__details { min-width: 0; }

.scroll-dialog .irori-guide__close {
  min-width: 4.8rem;
  min-height: 2.75rem;
  margin-top: 0;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
}

.irori-guide__modes {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.55rem;
  margin-top: 0.35rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(106, 72, 39, 0.32);
}

.scroll-dialog .irori-guide__modes button,
.scroll-dialog .irori-guide__pager button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.75rem;
  margin-top: 0;
  padding: 0.45rem 0.7rem;
  border-color: #855e3d;
  background: rgba(255, 253, 246, 0.78);
  color: #513426;
  font-size: 0.84rem;
}

.scroll-dialog .irori-guide__modes button.is-current {
  border-color: #603729;
  background: #603729;
  color: #fff0d2;
}

.irori-guide__prefecture-label {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.38rem;
  margin-top: 0;
  color: #643c2c;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.irori-guide__prefecture-label select {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #855e3d;
  border-radius: 0;
  background: #fffaf0;
  color: #3d2a20;
  font: inherit;
}

.irori-guide__illustration {
  position: relative;
  z-index: 1;
  margin: 1rem 0 0;
  border-top: 1px solid rgba(106, 72, 39, 0.32);
  border-bottom: 1px solid rgba(106, 72, 39, 0.32);
  background: #d6c5a1;
}

.irori-guide__illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.irori-guide__illustration figcaption {
  padding: 0.38rem 0.65rem;
  color: #695344;
  font-size: 0.76rem;
  line-height: 1.5;
  text-align: right;
}

.irori-guide__entry {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
}

.scroll-dialog .irori-guide__count {
  margin: 0;
  color: #8a4b39;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
}

.irori-guide__entry h3 {
  margin: 0.35rem 0 0;
  color: #302117;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.24rem, 4vw, 1.65rem);
  letter-spacing: 0.08em;
}

.scroll-dialog .irori-guide__entry > p:not(.irori-guide__count) {
  max-width: none;
  margin-top: 0.6rem;
  color: #49382d;
  font-size: 1rem;
  line-height: 1.85;
  text-align: left;
}

.irori-guide__attractions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.irori-guide__attractions[hidden] { display: none; }

.scroll-dialog .irori-guide__attraction-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.75rem;
  margin-top: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid #855e3d;
  background: rgba(255, 253, 246, 0.78);
  color: #513426;
  font-size: 0.8rem;
  line-height: 1.45;
}

.scroll-dialog .irori-guide__attraction-button[aria-pressed="true"] {
  border-color: #603729;
  background: #603729;
  color: #fff0d2;
}

.irori-guide__pager {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(106, 72, 39, 0.32);
}

.noscript-note { position: fixed; z-index: 200; right: 1rem; bottom: 1rem; left: 1rem; margin: 0; padding: 0.8rem 1rem; border: 1px solid #a97a50; background: #2c1a10; color: #f0dfbd; font-size: 0.8rem; text-align: center; }

/* 昼夜の連動 */
html[data-time="night"] .room { box-shadow: inset -1.1rem 0 1.5rem rgba(0, 3, 8, 0.66); }
html[data-time="night"] .shoji-wall { background: repeating-linear-gradient(90deg, transparent 0 23%, #30261e 23% 25%), repeating-linear-gradient(180deg, transparent 0 15%, #30261e 15% 17%), linear-gradient(rgba(36, 55, 71, 0.45), rgba(36, 55, 71, 0.45)), #89929a; box-shadow: inset 0 0 2rem rgba(107, 142, 165, 0.32), -0.6rem 0 1rem rgba(2, 5, 9, 0.42); }
html[data-time="night"] .lantern { filter: drop-shadow(0 0 2.2rem var(--lantern-glow)); }
html[data-time="night"] .lantern__body { box-shadow: inset 0 0 2rem rgba(255, 176, 61, 0.65), 0 0 4.8rem var(--lantern-glow); }
html[data-time="night"] .hearth__embers { box-shadow: 0 0 3.6rem 1rem var(--fire-glow); }
html[data-time="night"] .flame { filter: drop-shadow(0 0 1.5rem var(--fire-glow)); }
html[data-time="night"] .departure-sky { background-image: linear-gradient(rgba(17, 33, 46, 0.36), rgba(6, 15, 23, 0.62)), url("assets/images/garden-vista.webp"); }
html[data-time="night"] .shoin-message,
html[data-time="night"] .irori-copy,
html[data-time="night"] .departure-copy { filter: brightness(0.8) saturate(0.8); }

@keyframes lantern-breathe {
  0%, 100% { filter: brightness(0.96); }
  50% { filter: brightness(1.07); }
}

@keyframes flame-dance {
  0% { transform: translateX(-50%) rotate(-5deg) scale(0.9, 0.96); }
  100% { transform: translateX(-50%) rotate(6deg) scale(1.07, 1.03); }
}

@keyframes steam-rise {
  0% { opacity: 0; transform: translateY(1rem) translateX(0); }
  25% { opacity: 0.55; }
  75% { opacity: 0.22; }
  100% { opacity: 0; transform: translateY(-2.1rem) translateX(0.8rem); }
}

/* 画面幅で変えるのは操作まわり(クローム)だけ。部屋そのものは固定寸法の舞台で、
   ルーペの倍率だけで大きさが変わる(親サイトと同じ考え方)。 */

/* 小さい画面ではダイアログを下に寄せ、紙の余白を詰める(部屋は組み替えない) */
@media (max-width: 700px) {
  .daily-quote-dialog,
  .preparing-dialog { margin-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .daily-quote-dialog[open],
  .preparing-dialog[open] { margin-top: auto; }
  .scroll-dialog__paper { padding: 1.8rem 1.35rem 2rem; }
  .daily-quote-scroll .scroll-dialog__paper { min-height: 18rem; }
}

/* 横向きスマホなど画面の高さが低いときは、20rem/18remの下限をやめて紙を縮められるようにする
   （下限を残したままだと紙が縮まず、掛け軸ごと画面の外にはみ出したままになる）。 */
@media (max-height: 600px) {
  .daily-quote-scroll .scroll-dialog__paper { min-height: 0; }
}

/* 動きを減らす設定では、親サイトと同じ方針をとる:
   全部を止めると「壊れている」ように見えるため、
   環境の動き(行灯の呼吸・炎・湯気)は約3倍遅くして残し、
   仕掛け(からくり・兜・大八車・丸窓・猫の仕草)はJS側が発動を止める。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .lantern__body,
  .hearth::before {
    animation-duration: 13.8s;
  }

  .flame {
    animation-duration: 4s;
  }

  .steam {
    animation-duration: 9s;
  }
}

/* ========================================================================== */
/* 写実背景を主役にするシネマティック表示                                    */
/* ========================================================================== */

.site-header {
  border-bottom-color: rgba(18, 10, 6, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 44%),
    linear-gradient(90deg, rgba(14, 8, 5, 0.28), transparent 25% 75%, rgba(14, 8, 5, 0.32)),
    #342014;
  box-shadow:
    inset 0 -1px rgba(203, 156, 103, 0.22),
    0 0.65rem 1.8rem rgba(8, 4, 2, 0.5);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(92deg, transparent 0 2.8rem, rgba(231, 196, 145, 0.05) 2.85rem 2.9rem),
    radial-gradient(ellipse at 28% -30%, rgba(255, 216, 158, 0.22), transparent 45%);
}

.site-header-inner {
  position: relative;
  z-index: 2;
}

.pano {
  background: #0f0a07;
}

.room {
  background-color: #21150e;
  box-shadow:
    inset -1.3rem 0 2rem rgba(11, 6, 3, 0.5),
    inset 1.3rem 0 1.8rem rgba(12, 6, 3, 0.24);
}

.room::before {
  z-index: 1;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(12, 7, 4, 0.23), transparent 21%, transparent 72%, rgba(12, 7, 4, 0.2)),
    radial-gradient(ellipse at 50% 45%, transparent 32%, rgba(15, 8, 4, 0.23) 108%);
  mix-blend-mode: multiply;
}

.room::after {
  z-index: 20;
  background:
    linear-gradient(180deg, rgba(2, 7, 12, 0.42), rgba(5, 10, 14, 0.22) 48%, rgba(1, 4, 8, 0.54)),
    radial-gradient(circle at 54% 52%, transparent 0 18%, rgba(2, 5, 8, 0.3) 72%);
}

/* 写真は部屋ではなく、16:9を保つ写真の面に貼る */
.room--genkan .room-stage { background-image: url("assets/images/scene-genkan-maneki.webp?v=20260910e"); }
.room--shoin .room-stage { background-image: url("assets/images/scene-shoin.webp"); }
.room--irori .room-stage { background-image: url("assets/images/scene-irori-open.webp"); }
.room--departure .room-stage { background-image: url("assets/images/scene-departure.webp"); }

/* 旧CSS造形を背景のフォールバックから外し、HTML操作だけを残す */
.room--genkan .ceiling-beams,
.room--genkan .genkan-door,
.room--genkan .plaster-wall,
.room--genkan .genkan-earth,
.room--genkan .rising-step,
.room--genkan .zori,
.room--genkan .umbrella-stand,
.room--shoin .ceiling-beams,
.room--shoin .shoin-wall,
.room--shoin .tatami-floor,
.room--shoin .shoji-wall,
.room--shoin .tokonoma,
.room--shoin .chigai-dana,
.room--irori .ceiling-beams,
.room--irori .irori-wall,
.room--irori .tatami-floor,
.room--irori .hanging-hook,
.room--irori .cushion,
.room--irori .iron-pot,
.room--departure .departure-sky,
.room--departure .departure-garden,
.room--departure .covered-walkway,
.room--departure .walkway-floor,
.room--departure .gate-shadow,
.room--departure .journey-bundle,
.room--departure .letter-box {
  display: none;
}

.room-plaque {
  min-width: 8.8rem;
  padding: 0.5rem 0.85rem 0.58rem;
  border-color: rgba(216, 177, 123, 0.48);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent 40%),
    rgba(39, 23, 14, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(17, 9, 5, 0.64),
    0 0.55rem 1.2rem rgba(8, 4, 2, 0.34);
  backdrop-filter: blur(0.35rem);
}

.room-plaque span {
  color: #c9ad84;
}

.object-label {
  border-color: rgba(230, 194, 140, 0.52);
  border-radius: 0.1rem;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent),
    rgba(35, 22, 14, 0.87);
  box-shadow:
    inset 0 0 0 1px rgba(10, 6, 3, 0.42),
    0 0.4rem 1rem rgba(7, 4, 2, 0.36);
  color: #f2dfb9;
  backdrop-filter: blur(0.3rem);
}

.object-action:hover .object-label,
.object-action:focus-visible .object-label {
  background: rgba(91, 55, 31, 0.94);
  color: #fff0ca;
}

.object-action::after {
  border-color: rgba(241, 201, 128, 0.28);
  background: radial-gradient(circle, rgba(255, 211, 129, 0.08), transparent 68%);
  box-shadow: 0 0 1.4rem rgba(230, 169, 80, 0.14);
}

.object-action:hover::after,
.object-action:focus-visible::after {
  border-color: rgba(255, 219, 159, 0.78);
  box-shadow:
    0 0 1.2rem rgba(238, 184, 94, 0.34),
    inset 0 0 1.3rem rgba(255, 215, 143, 0.12);
}

/* 写真の掛け軸を囲っていた透明ホットスポットの矩形だけは見せない。 */
.hanging-scroll::after,
.hanging-scroll:hover::after,
.hanging-scroll:focus-visible::after {
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
}

.hanging-scroll:focus-visible {
  outline: 0;
  box-shadow: none;
}

.hanging-scroll:focus-visible .object-label {
  outline: 0.14rem solid #fff0c9;
  outline-offset: 0.15rem;
  box-shadow: 0 0 0 0.24rem #5e2f24;
}

/* 写真の行灯にも、透明なクリック領域の矩形は重ねない。 */
.lantern::after,
.lantern:hover::after,
.lantern:focus-visible::after {
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
}
/* 写真の囲炉裏も同じ。畳の上に細い黄色の線が浮いて見えていた。 */
.hearth::after,
.hearth:hover::after,
.hearth:focus-visible::after {
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
}

.hearth:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* 枠を消したぶん、キーボードで選んだときは札のほうを光らせる（掛け軸・行灯と同じ） */
.hearth:focus-visible .object-label {
  outline: 0.14rem solid #fff0c9;
  outline-offset: 0.15rem;
  box-shadow: 0 0 0 0.24rem #5e2f24;
}
/* 写真の門も同じ。門の外側に細い黄色の線が出ていた。 */
.journey-gate::after,
.journey-gate:hover::after,
.journey-gate:focus-visible::after {
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
}

.journey-gate:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* 枠を消したぶん、キーボードで選んだときは札のほうを光らせる（掛け軸・行灯と同じ） */
.journey-gate:focus-visible .object-label {
  outline: 0.14rem solid #fff0c9;
  outline-offset: 0.15rem;
  box-shadow: 0 0 0 0.24rem #5e2f24;
}

.lantern:focus-visible {
  outline: 0;
  box-shadow: none;
}

.lantern:focus-visible .object-label {
  outline: 0.14rem solid #fff0c9;
  outline-offset: 0.15rem;
  box-shadow: 0 0 0 0.24rem #5e2f24;
}

.entrance-sign {
  top: 23%;
  right: 8%;
  width: 29rem;
  padding: 1.8rem;
  border-width: 0.2rem;
  border-color: rgba(92, 58, 34, 0.78);
  outline-color: rgba(201, 166, 112, 0.5);
  outline-offset: -0.58rem;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 45%),
    rgba(231, 215, 180, 0.9);
  box-shadow:
    0 1.4rem 3.2rem rgba(20, 10, 5, 0.38),
    inset 0 0 2rem rgba(120, 86, 49, 0.08);
  backdrop-filter: blur(0.3rem);
}

.entrance-sign__title {
  font-size: 3.4rem;
}

.threshold-link,
.room-path {
  border-color: rgba(218, 178, 124, 0.48);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.075), transparent 42%),
    rgba(40, 24, 15, 0.86);
  backdrop-filter: blur(0.35rem);
}

.shoin-message,
.irori-copy,
.departure-copy {
  border-color: #a45c45;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 42%),
    rgba(231, 216, 185, 0.88);
  box-shadow: 0 0.8rem 1.8rem rgba(13, 7, 3, 0.24);
  backdrop-filter: blur(0.34rem);
}

/* 背景内の実物を操作する透明ホットスポット。
   部屋は写真(1600x900)と同じ16:9の固定箱なので、%は写真の実測位置そのもの */
.hanging-scroll {
  top: 8%;
  left: 18.5%;
  width: 11%;
  height: 62%;
}

.hanging-scroll__cord,
.hanging-scroll__roller {
  opacity: 0;
}

.hanging-scroll__paper {
  inset: 16% 9% 16% 11%;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 5% 8% 10%;
  border: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
}

.hanging-scroll__paper > span {
  max-width: 100%;
  max-height: 100%;
  color: rgba(49, 36, 27, 0.92);
  font-family: "HGS行書体", "HG行書体", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.17rem, 1.82cqw, 1.69rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-shadow: 0 1px rgba(255, 249, 229, 0.38);
  writing-mode: vertical-rl;
}

.hanging-scroll__paper > span.is-long {
  font-size: clamp(0.88rem, 1.2cqw, 1.17rem);
  line-height: 1.42;
}

.hanging-scroll__paper small {
  right: auto;
  bottom: 3%;
  left: 6%;
  box-sizing: border-box;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  padding: 0.28rem;
  overflow: hidden;
  border: 0.12rem solid rgba(139, 49, 38, 0.86);
  border-radius: 0.04rem;
  background:
    radial-gradient(circle at 16% 18%, rgba(232, 216, 183, 0.58) 0 0.055rem, transparent 0.085rem),
    radial-gradient(circle at 79% 70%, rgba(232, 216, 183, 0.48) 0 0.05rem, transparent 0.08rem),
    repeating-linear-gradient(83deg, rgba(139, 49, 38, 0.025) 0 1px, transparent 1px 4px),
    rgba(145, 56, 43, 0.035);
  box-shadow:
    inset 0.045rem 0.025rem 0 rgba(139, 49, 38, 0.28),
    inset -0.035rem -0.045rem 0 rgba(139, 49, 38, 0.18);
  clip-path: polygon(2% 0, 98% 1%, 100% 96%, 96% 100%, 1% 98%, 0 4%);
  color: rgba(139, 45, 34, 0.9);
  filter: contrast(0.96) saturate(0.9);
  font-family: "HG正楷書体-PRO", "HGS行書体", "Yu Mincho", serif;
  font-size: clamp(0.82rem, 1.05cqw, 0.93rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: 0.01em;
  mix-blend-mode: multiply;
  text-shadow: 0.025rem 0 rgba(139, 45, 34, 0.32), 0 0.025rem rgba(139, 45, 34, 0.22);
  transform: rotate(-0.6deg);
  writing-mode: horizontal-tb;
}

.hanging-scroll__paper small > span {
  display: flex;
  width: 2.38em;
  height: 2.58em;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  text-align: center;
}

.rakkan-name__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.82;
}

.rakkan-name__glyph {
  display: block;
  width: 0.92em;
  height: 0.82em;
  text-align: center;
}

.hanging-scroll .object-label {
  right: -1.2rem;
  bottom: 0.6rem;
}

.lantern {
  right: 6.5%;
  bottom: 8%;
  width: 10.5%;
  height: 37%;
  filter: drop-shadow(0 0 1.8rem var(--lantern-glow));
}

.lantern__cap,
.lantern__body,
.lantern__base {
  opacity: 0;
}

.lantern__label {
  right: auto;
  bottom: auto;
  top: -1.9rem;
  left: -0.6rem;
}

/* 写真の左の空き棚(中央段)。棚板上面=写真高さの62.6%(ピクセル実測) */
/* 写真の右の空き棚(中央段) */
/* 棚板の作り物は消し、写真の実物の棚板に載せる */
.book--stitched {
  width: 4.9cqw;
  height: 21cqh;
  padding: 1.4cqh 0.5cqw 1.1cqh 1.1cqw;
}

.book--indigo { height: 22cqh; }
.book--moss { height: 20.2cqh; }

.book--stitched span {
  padding: 0.7cqh 0.35cqw;
  font-size: 1.55cqh;
  writing-mode: vertical-rl;
}

/* 文箱・巻物は写真に写っている実物を使う */
/* 右下は「次の場所」ボタンの席。説明札はそこを避けて左に置く */
.hearth {
  bottom: 0;
  left: 58.7%;
  width: 63%;
  height: 32%;
  transform: translateX(-50%);
}

.hearth > :not(.hearth__label) {
  opacity: 0;
}

.hearth::before {
  content: "";
  position: absolute;
  inset: 20% 14% 10%;
  border-radius: 50%;
  opacity: 0.55;
  background: radial-gradient(circle, var(--fire-glow), rgba(204, 77, 25, 0.06) 40%, transparent 70%);
  filter: blur(0.5rem);
  animation: lantern-breathe 3.4s ease-in-out infinite;
}

/* 「食を愉しむ」の札。囲炉裏の当たり判定は透明なので、この札が唯一の目印になる。
   写真の面は部屋より縦に大きく、部屋より横長の画面では上下が切られる。
   囲炉裏の下端から吊るしていたため、1366×768で21px、1366×625では丸ごと
   画面の外へ出て、押せる場所だと分からなくなっていた。囲炉裏の上端へ移す。 */
.hearth__label {
  right: auto;
  bottom: auto;
  left: 4%;
  top: 2%;
}

/* 開いた障子の向こうの庭は、写真そのものを入口にする。常時の枠線は出さない。 */
.irori-garden {
  position: absolute;
  z-index: 30;
  top: 7%;
  right: 4%;
  width: 29%;
  height: 64%;
}

.irori-garden::after,
.irori-garden:hover::after,
.irori-garden:focus-visible::after {
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
}

.irori-garden:focus-visible {
  outline: 0;
  box-shadow: none;
}

.irori-garden__label {
  right: auto;
  bottom: 2%;
  left: 5%;
}

.irori-garden:focus-visible .object-label {
  outline: 0.14rem solid #fff0c9;
  outline-offset: 0.15rem;
  box-shadow: 0 0 0 0.24rem #5e2f24;
}

.journey-gate {
  top: 15%;
  left: 47%;
  width: 28%;
  height: 56%;
}

.journey-gate > :not(.journey-gate__label) {
  opacity: 0;
}

.journey-gate__label {
  right: 4%;
  bottom: 2%;
}

/* 夜は色板ではなく、外光・火・行灯の光源を個別に立てる */
html[data-time="night"] .room--shoin::before {
  background:
    radial-gradient(circle at 86% 68%, rgba(242, 157, 54, 0.42), transparent 19%),
    linear-gradient(90deg, transparent 58%, rgba(39, 71, 94, 0.35)),
    linear-gradient(180deg, rgba(2, 7, 12, 0.2), rgba(2, 7, 12, 0.44));
  mix-blend-mode: screen;
}

html[data-time="night"] .room--irori::before {
  background:
    radial-gradient(circle at 50% 70%, rgba(238, 91, 29, 0.46), transparent 25%),
    linear-gradient(rgba(3, 7, 10, 0.28), rgba(2, 5, 8, 0.48));
  mix-blend-mode: screen;
}

html[data-time="night"] .room--departure::before {
  background:
    linear-gradient(180deg, rgba(27, 51, 70, 0.35), rgba(5, 12, 18, 0.48)),
    radial-gradient(circle at 75% 18%, rgba(151, 178, 194, 0.24), transparent 24%);
  mix-blend-mode: multiply;
}

/* (旧・縦積みモバイル用の部屋別調整はここにあったが、
   固定舞台+ルーペ方式へ移行したため撤去した。部屋は全幅で同じ寸法で描かれる) */

/* ==========================================================================
   ここから下は、親サイト(SocialEggs Gateway)の共通UIを屋敷へ移植した部分。
   クラス名・寸法・余白・z-index・ブレークポイントは親サイトと同じ値にそろえ、
   板の色だけこの屋敷の木に合わせている。
   ========================================================================== */

/* ---- 読み上げ専用の見出し(親サイトの .yomiage-dake と同じ) ---- */
.yomiage-dake {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- 床の左右端の画面送りボタン(親: .pano-floor-nav) ---- */
.pano-floor-nav {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}

.pano-floor-nav[hidden] { display: none; }

.pano-floor-btn {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 150, 0.54);
  background: radial-gradient(circle at 35% 28%, #7d4f26 0%, #4f2c14 58%, #2c180b 100%);
  color: #F8E7C5;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(20, 9, 2, 0.58), inset 0 1px 0 rgba(255, 230, 180, 0.38);
  pointer-events: auto;
  touch-action: manipulation;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.pano-floor-prev { left: 16px; }
.pano-floor-next { right: 16px; }
.pano-floor-btn:hover { background: radial-gradient(circle at 35% 28%, #96652f 0%, #653a18 58%, #3a200c 100%); }
.pano-floor-btn:focus-visible { outline: 3px solid #F0C46A; outline-offset: 3px; }
.pano-floor-btn.at-end { opacity: 0.35; }

@media (max-width: 860px) {
  .pano-floor-btn { width: 56px; height: 56px; font-size: 22px; }
  .pano-floor-prev { left: 8px; }
  .pano-floor-next { right: 8px; }
}

/* ==========================================================================
   屋敷のからくり(親サイトのギミックの、この屋敷での姿)
   時計=鳩時計と振り子 / 兜=王・女王・近衛兵のブックエンド /
   大八車=本棚の馬車 / 丸窓=窓辺の旅。発動の作法(クリック+Enter/Space、
   一定時間で戻る、動きを減らす設定では発動しない)は親サイトと同じ。
   ========================================================================== */

/* 押せる仕掛けの共通の光り方(親: .gimmick-clickable) */
.gimmick-clickable { cursor: pointer; }
.gimmick-clickable:hover { filter: brightness(1.08) drop-shadow(0 0 0.687cqw rgba(240, 196, 106, 0.35)); }
.gimmick-clickable:focus-visible { outline: 0.147cqw solid #F0C46A; outline-offset: 0.196cqw; }

/* ---- 土間の大八車(車輪がまわる) ---- */

/* 夜は、からくりも部屋と同じだけ暗くなる(z-indexを夜の覆い(20)より下に置いてある) */

/* ==========================================================================
   1画面に1部屋（この屋敷の鉄則）
   画面はヘッダーと部屋だけで使い切り、部屋は1枚ずつ吸着して送る。
   隣の部屋は決して見切れさせない。
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* 画面が写真(16:9)より縦長のときは、切らずに部屋ぜんぶを入れる
   （切ると掛け軸や行灯が画面の外に出てしまうため） */
@media (max-aspect-ratio: 16 / 9) {
  .room-stage {
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
  }
}

/* 部屋の中の説明札は、飾りではなく読ませる文字なので実寸で指定する */
.shoin-message p { font-size: 15px; }
.shoin-message strong { font-size: 17px; letter-spacing: 0.04em; }
.irori-copy span { font-size: 16px; }
.irori-copy p { font-size: 15px; line-height: 1.8; }
.departure-copy span { font-size: 16px; }
.departure-copy p { font-size: 15px; line-height: 1.8; }
.departure-copy a { color: #76392c; }
.departure-unei { margin-top: 0.5rem; font-size: 13px; color: #6d5a49; }

.room-plaque span { font-size: 11px; letter-spacing: 0.16em; }
.room-plaque h2 { font-size: 19px; }
.room-path span { font-size: 11px; }
.room-path strong { font-size: 15px; }
.object-label { font-size: 13px; }
.entrance-sign__eyebrow { font-size: 14px; }
.entrance-sign p:not(.entrance-sign__eyebrow):not(.entrance-sign__title) { font-size: 16px; }
.threshold-link { font-size: 15px; }

/* 玄関の立て札は、狭い画面でも画面からはみ出さない */
.entrance-sign {
  width: min(29rem, 46%);
  max-height: 82%;
  overflow: auto;
}

.entrance-sign__title { font-size: clamp(2rem, 4.4vw, 3.4rem); }

/* 狭い画面では、部屋の中の札を縦に積んで重ならないようにする。
   写真は上下に余白ができるので、そこへ文字を置く */
@media (max-width: 700px) {
  .entrance-sign { width: min(29rem, 88%); right: 6%; }
  .room-plaque { top: 16px; left: 16px; }
  .room-path { right: 16px; bottom: 16px; }

  .shoin-message,
  .irori-copy,
  .departure-copy {
    top: auto;
    right: 16px;
    bottom: 96px;
    left: 16px;
    width: auto;
    max-width: none;
    padding: 0.8rem 0.9rem;
  }

    .house-nav__stop { padding: 5px 10px; font-size: 13px; }
  .site-brand { font-size: 22px; }
  .brand__seal { flex-basis: 38px; width: 38px; height: 38px; font-size: 18px; }
  .site-header-inner { padding: 12px 16px; }
}

/* ==========================================================================
   ヒノキ風呂（七の場所）
   背景写真 assets/images/scene-furo.webp が入るまでは、
   檜の湯殿を思わせる下地色と湯気だけで場をつくる。
   ========================================================================== */

.room--furo { background: #2b1d12; }

.room--furo .room-stage {
  background-image:
    radial-gradient(ellipse at 50% 78%, rgba(226, 186, 128, 0.20), transparent 52%),
    linear-gradient(180deg, #3b2a1a 0 34%, #6a4d30 34% 62%, #4a3520 62% 100%);
}

/* 湯気。ゆっくり立ちのぼる */
.furo-steam {
  position: absolute;
  z-index: 6;
  bottom: 34%;
  width: 18%;
  height: 34%;
  border-radius: 50%;
  opacity: 0.3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 250, 240, 0.55), transparent 68%);
  filter: blur(1.1rem);
  animation: furo-yuge 9s ease-in-out infinite;
}

.furo-steam--one { left: 22%; }
.furo-steam--two { left: 44%; animation-delay: 2.6s; }
.furo-steam--three { left: 64%; animation-delay: 5.1s; }

@keyframes furo-yuge {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.22; }
  45% { transform: translateY(-9%) scale(1.1); opacity: 0.4; }
}

.furo-message {
  position: absolute;
  z-index: 27;
  right: 8%;
  bottom: 24%;
  width: min(25rem, 34%);
  padding: 1rem 1.2rem;
  border-left: 0.18rem solid #8b6238;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 42%),
    rgba(231, 216, 185, 0.88);
  box-shadow: 0 0.8rem 1.8rem rgba(13, 7, 3, 0.24);
  color: #3b2d24;
  backdrop-filter: blur(0.34rem);
}

.furo-message span {
  display: block;
  margin-bottom: 0.25rem;
  color: #6d4a2c;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.furo-message p { margin: 0; font-size: 15px; line-height: 1.8; }

.room-plaque--furo { left: 64px; }

html[data-time="night"] .room--furo::before {
  background:
    radial-gradient(circle at 50% 74%, rgba(242, 176, 92, 0.34), transparent 26%),
    linear-gradient(180deg, rgba(3, 7, 12, 0.28), rgba(2, 5, 8, 0.5));
  mix-blend-mode: screen;
}

html[data-time="night"] .furo-message { filter: brightness(0.8) saturate(0.8); }

@media (prefers-reduced-motion: reduce) {
  .furo-steam { animation-duration: 27s; }
}

@media (max-width: 700px) {
  .furo-message {
    top: auto;
    right: 16px;
    bottom: 96px;
    left: 16px;
    width: auto;
    max-width: none;
    padding: 0.8rem 0.9rem;
  }
}

/* ==========================================================================
   和綴じ本の見た目（いまは書院の違い棚に置いている四冊が使う）
   大きさと位置は下の .shoin-library で写真に合わせる。ここは色と質感だけ。
   色は写真の古書に合わせ、彩度を落とした濃い革・布の色にする。
   ========================================================================== */

.book {
  /* 下地を濃くしたぶん、暗くしすぎない */
  filter: sepia(0.14) saturate(0.7) brightness(0.95);
}

.book--stitched {
  width: 5.3cqw;
  height: 28.5cqh;
  padding: 1.6cqh 0.55cqw 1.3cqh 1.2cqw;
  border-color: rgba(20, 11, 6, 0.8);
  color: #cbb694;
}

.book--indigo { height: 29cqh; }
.book--moss { height: 27.6cqh; }

/* 深い臙脂（写真の赤茶の背表紙に合わせる） */
.book--bengara {
  background:
    repeating-linear-gradient(90deg, rgba(255, 246, 228, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(14, 7, 4, 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #2f1a18 0 8%, #573029 34%, #6a3c33 62%, #351d1a 100%);
}

/* 藍鉄（青みを抑えた濃紺） */
.book--indigo {
  background:
    repeating-linear-gradient(90deg, rgba(255, 246, 228, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(10, 8, 6, 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #17242b 0 8%, #2b4048 34%, #375059 62%, #1b2a31 100%);
}

/* 苔（沈んだ緑） */
.book--moss {
  background:
    repeating-linear-gradient(90deg, rgba(255, 246, 228, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(12, 9, 5, 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #1e2619 0 8%, #37432c 34%, #445033 62%, #232b1c 100%);
}

/* 黄土（ほかの三冊と見分けられる、一問一答の表紙） */
.book--ochre {
  background:
    repeating-linear-gradient(90deg, rgba(255, 246, 228, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(12, 8, 4, 0.07) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #382814 0 8%, #6d5128 34%, #876731 62%, #453117 100%);
}

/* 題簽（和綴じ本の背に貼る紙の札）。古紙の色にして、貼ってあるように影をつける */
.book--stitched span {
  padding: 0.9cqh 0.3cqw;
  border-color: rgba(66, 45, 27, 0.5);
  background:
    repeating-linear-gradient(0deg, rgba(120, 96, 60, 0.05) 0 1px, transparent 1px 3px),
    #d5c5a0;
  color: #2b1d13;
  font-size: 1.5cqh;
  box-shadow: 0 0.2cqh 0.35cqh rgba(10, 5, 2, 0.4), inset 0 0 0.45cqh rgba(73, 48, 27, 0.16);
}

/* 綴じ糸と小口 */
.book--stitched i {
  background: repeating-linear-gradient(180deg, #c3b391 0 0.13rem, #9c8c6c 0.13rem 0.17rem);
}

/* 試験帳（年度別）。表紙は日に焼けた厚紙 */
/* 棚の段の見出し札は、本が高くなったぶん少し下げる */
/* ==========================================================================
   ヒノキ風呂の写実背景
   ========================================================================== */

.room--furo .room-stage {
  background-image: url("assets/images/scene-furo-v3.webp");
}

.room--furo::before {
  background:
    linear-gradient(90deg, rgba(8, 5, 3, 0.26), transparent 52%),
    linear-gradient(180deg, rgba(7, 9, 12, 0.12), transparent 28%, rgba(8, 5, 3, 0.2));
}

/* ヒノキ風呂の札を、書院・囲炉裏・旅立ちと同じ紙の色にそろえる。 */
.furo-message {
  border: 0;
  border-left: 0.2rem solid #a45c45;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 42%),
    rgba(231, 216, 185, 0.88);
  box-shadow: 0 0.8rem 1.8rem rgba(13, 7, 3, 0.24);
  color: #3b2d24;
  backdrop-filter: blur(0.34rem);
}

.furo-message span {
  color: #efd3a1;
}

.furo-message p {
  color: #f4e5c8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
}

.room-plaque--furo {
  top: 13%;
  left: 6.4%;
}

/* 写真にある湯気を補助する程度に留め、水面や木目を隠さない。 */
.furo-water-shimmer {
  position: absolute;
  z-index: 4;
  right: 24%;
  bottom: 16%;
  left: 7%;
  height: 31%;
  border-radius: 44%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 222, 160, 0.13), transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: furo-water-shimmer 6.8s ease-in-out infinite;
}

.furo-guide {
  position: absolute;
  z-index: 18;
  right: 24%;
  bottom: 16%;
  left: 7%;
  height: 31%;
}

.furo-guide::after,
.furo-guide:hover::after,
.furo-guide:focus-visible::after {
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
}

.furo-guide:focus-visible { outline: 0; box-shadow: none; }
.furo-guide:focus-visible .object-label {
  outline: 0.14rem solid #fff0c9;
  outline-offset: 0.15rem;
  box-shadow: 0 0 0 0.24rem #5e2f24;
}

.furo-guide__label { right: 5%; bottom: 8%; }

.furo-steam {
  z-index: 6;
  bottom: 21%;
  width: 14%;
  height: 28%;
  opacity: 0.14;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 248, 232, 0.62), transparent 68%);
  filter: blur(1.35rem);
}

.furo-steam--one { left: 26%; }
.furo-steam--two { left: 44%; }
.furo-steam--three { left: 60%; }

@keyframes furo-water-shimmer {
  0%, 100% { opacity: 0.42; transform: scaleX(0.96); }
  50% { opacity: 0.72; transform: scaleX(1.04); }
}

.furo-message {
  top: 29%;
  right: 5.5%;
  bottom: auto;
  left: auto;
  width: min(24rem, 28%);
  background: rgba(235, 222, 193, 0.96);
  color: #33251c;
  backdrop-filter: none;
}

.furo-message span {
  color: #6d4229;
}

.furo-message p {
  color: #33251c;
  text-shadow: none;
}

html[data-time="night"] .room--furo::before {
  background:
    radial-gradient(ellipse at 50% 72%, rgba(229, 160, 75, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(4, 9, 15, 0.2), rgba(1, 4, 8, 0.38));
  mix-blend-mode: multiply;
}

@media (max-width: 700px) {
  .furo-message {
    top: auto;
    right: 16px;
    bottom: 96px;
    left: 16px;
    width: auto;
    padding: 0.8rem 0.9rem;
  }

  .room-plaque--furo { left: 16px; }

  .furo-message { bottom: 104px; }
  .furo-water-shimmer { right: 9%; bottom: 23%; left: 7%; height: 25%; }
}

/* ==========================================================================
   縦長のスマホ（1画面に1部屋のまま、屋敷の中に立っている絵にする）

   縦長の画面では、16:9の写真は画面の一部にしか入らない。
   これまでは写真を真ん中に浮かせ、余った上下の黒地に札を置いていたので、
   「小さい写真＋黒地に浮いたカード」に見えていた。
   ここでは写真を上へ寄せ、余りを「板の間の床」に見立てて、
   札・説明・次の場所を、その床の上に置く。
   （部屋の組み替えはしない。置き場所と床の色を決めるだけ）
   ========================================================================== */

@media (max-width: 700px) and (orientation: portrait) {
  .pano .room {
    /* 写真の高さ。16:9なので画面の幅から決まる */
    --shashin: calc(100vw * 9 / 16);

    background-color: #180f08;
    background-image:
      /* 写真が床に落とす影 */
      linear-gradient(180deg, rgba(4, 2, 1, 0.66), rgba(4, 2, 1, 0)),
      /* 板の継ぎ目 */
      repeating-linear-gradient(90deg, rgba(255, 236, 200, 0.05) 0 1px, transparent 1px 5.2rem),
      /* 床のつや */
      linear-gradient(180deg, #3a2617 0%, #281a0f 44%, #190f07 100%);
    background-repeat: no-repeat, repeat-x, no-repeat;
    background-position: 0 var(--shashin), 0 var(--shashin), 0 var(--shashin);
    background-size:
      100% 2.4rem,
      100% calc(100% - var(--shashin)),
      100% calc(100% - var(--shashin));
  }

  /* 写真は上へ寄せる（真ん中に浮かせない） */
  .room-stage {
    top: 0;
    transform: translate(-50%, 0);
  }

  /* 場所札は写真の左上。PCと同じ見え方にそろえる */
  .room-plaque,
  .room-plaque--left,
  .room-plaque--furo,
  .room-plaque--departure {
    top: 12px;
    left: 12px;
  }

  /* 説明札は、写真のすぐ下（床の上）に置く */
  .shoin-message,
  .irori-copy,
  .departure-copy,
  .furo-message {
    top: calc(var(--shashin) + 14px);
    right: 14px;
    bottom: auto;
    left: 14px;
    width: auto;
    max-width: none;
    padding: 0.85rem 0.95rem;
  }

  /* 玄関の立て札も床へ下ろす（写真が小さいので、写真の中には収まらない）。
     床からはみ出さないよう高さを床いっぱいまでに抑え、
     入りきらない機種では立て札の中だけを動かして読ませる。 */
  .entrance-sign {
    top: calc(var(--shashin) + 14px);
    right: 14px;
    left: 14px;
    width: auto;
    max-height: calc(100% - var(--shashin) - 28px);
    overflow: auto;
  }

  .entrance-sign__title { font-size: 2.1rem; }

  .room-path { right: 14px; bottom: 16px; }
}

/* 背の低い端末（iPhone SE など）では、飾りの説明札を出さず棚に場所をゆずり、
   本も少し詰める。棚が「次の場所」ボタンに重ならないようにするため。 */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 780px) {
    /* 玄関の立て札は、動かさずに「上がり框を越える」まで見えることを優先する。
     そのため、そえ書きの2行だけ引っこめる（名乗りと入口のボタンは残す）。 */
  .entrance-sign { padding: 1.1rem 1.1rem 1.2rem; }
  .entrance-sign__title { font-size: 1.7rem; }
  .entrance-sign__eyebrow { font-size: 13px; }
  .entrance-sign p:not(.entrance-sign__eyebrow):not(.entrance-sign__title) { display: none; }

    }

/* 床がとても狭い機種（320×568 など）。
   1画面1部屋を崩さずに収めるため、札の高さを床いっぱいまでに抑え、
   「次の場所」ボタンと本を一段小さくする。指で押せる44pxは下回らない。 */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 660px) {
  .shoin-message,
  .irori-copy,
  .departure-copy,
  .furo-message {
    max-height: calc(100% - var(--shashin) - 94px);
    overflow: auto;
  }

  .departure-unei { display: none; }

  .room-path {
    min-height: 44px;
    bottom: 10px;
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
  }

    /* 段の見出しは札をやめ、小さな文字だけにして棚の高さをかせぐ */
          }

/* ===========================================================================
   書院の違い棚 — 一問一答・通し過去問・二分野の本を、屋敷の中心に置く。
   独立した文庫をつくらず、掛け軸・行灯と同じ一室で学びの入口を示す。
   ========================================================================== */

.shoin-library {
  position: absolute;
  z-index: 8;
  /* 背景写真の中央段（開き棚）の棚板に合わせる */
  bottom: 57.5%;
  left: 51.6%;
  display: flex;
  width: 14.5%;
  height: 15%;
  align-items: flex-end;
  gap: 0.42cqw;
  pointer-events: auto;
}

.shoin-library .book {
  flex: 0 0 auto;
  width: 5cqw;
  height: 14.2cqh;
  padding: 0.75cqh 0.42cqw 0.58cqh 0.92cqw;
  transform: translateY(0) rotate(0deg);
}

.shoin-library .shoin-book--tsushi,
.shoin-library .shoin-book--drill,
.shoin-library .shoin-book--hoken { height: 14.2cqh; }

.shoin-library .book--stitched span {
  padding: 0.46cqh 0.18cqw;
  font-size: 1.18cqh;
}

@media (max-width: 700px) and (orientation: portrait) {
  .room--shoin .shoin-library {
    /* 写真の下に説明札(高さ114px・下端は写真から128px)が出るので、その下に置く。
       92pxだと札の下に本が潜り込んで見えなくなっていた。
       画面がこれより低い機種では、下の @media で札を出さずに本を上へ戻している。 */
    top: calc(100% + 156px);
    right: 14px;
    bottom: auto;
    left: 14px;
    display: grid;
    width: auto;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .room--shoin .shoin-library .book {
    display: grid;
    width: auto;
    min-height: 58px;
    height: auto;
    place-items: center;
    padding: 0.46rem 0.32rem;
    transform: none;
  }

  .room--shoin .shoin-library .book--stitched span {
    padding: 0.24rem 0.32rem;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    writing-mode: horizontal-tb;
  }

  .room--shoin .shoin-library .book--stitched::before,
  .room--shoin .shoin-library .book--stitched i { display: none; }

  /* 掛け軸と行灯の札は、押せるものの外側へ張り出すように置いてある。
     写真が画面いっぱいまで縮む縦長スマホでは、そのぶんが画面の外へ出て
     端が切れていた（320px幅で掛け軸の札が左へ33px、行灯の札が右へ27px）。
     狭い画面のときだけ、札を押せるものの内側の端に合わせて置き直す。 */
  .room--shoin .hanging-scroll .object-label {
    right: auto;
    left: 0;
  }

  .room--shoin .lantern__label {
    right: 0;
    left: auto;
  }
}

@media (max-width: 700px) and (orientation: portrait) and (max-height: 780px) {
  .room--shoin .shoin-message { display: none; }
  .room--shoin .shoin-library { top: calc(100% + 14px); }
}

@media (max-width: 700px) and (orientation: portrait) and (max-height: 660px) {
  .room--shoin .shoin-library .book { min-height: 48px; }
}
/* ===========================================================================
   スマホでの見え方の手当て
   ========================================================================== */

/* Netlifyのバッジは右下に固定で出る（197×64px・こちらでは消せない）。
   「次の場所」がその下に隠れるので、バッジの高さぶん上へ逃がす。
   縦長スマホでも横長でも同じ位置に出るため、画面の大きさを問わず上げる。 */
.room-path {
  bottom: 80px;
}

@media (max-width: 700px) and (orientation: portrait) {
  /* 左右の送りボタン（◀▶）は、縦長のスマホだと写真の下の説明札に重なって
     文字を隠してしまう。移動は上のタブと横スワイプでできるので、ここでは出さない。
     （横長・PCではそのまま残す） */
  .pano-floor-nav {
    display: none;
  }

  .room-path {
    bottom: 80px;
  }
}

/* ===========================================================================
   編集モードからの取り込み（最新: yashiki-kousin-20260911-1932.json）
   四冊の題簽を筆文字風にし、書院・囲炉裏・風呂の押せる範囲を更新。
   書き出しに無い値は維持する。
   写真の上での位置合わせなので、写真の下に一覧を積み直す縦長スマホには効かせない
   （縦長スマホの並びは上の @media ... orientation: portrait で作っている）。
   ========================================================================== */

@media (min-width: 701px), (orientation: landscape) {
  .room--shoin .shoin-book--tsushi { left: -22.74%; right: auto; top: 44.88%; bottom: auto; width: 40%; height: 100%; }
  .room--shoin .shoin-book--drill { left: -153.88%; right: auto; top: 236.27%; bottom: auto; width: 40%; height: 100%; }
  .room--shoin .shoin-book--shien { left: 35.68%; right: auto; top: 135.62%; bottom: auto; width: 40%; height: 100%; }
  .room--shoin .shoin-book--hoken { left: 35.49%; right: auto; top: 136.24%; bottom: auto; width: 40%; height: 100%; }
  .room--shoin .hanging-scroll { left: 18.65%; right: auto; top: 8.42%; bottom: auto; }
  .room--shoin .shoin-message { left: 16.4%; right: auto; top: 81.33%; bottom: auto; }
  .room--shoin .room-plaque { left: 3.77%; right: auto; top: 18.07%; bottom: auto; }
  .room--departure .journey-gate { left: 62.88%; right: auto; top: 7%; bottom: auto; }
  .room--genkan .entrance-sign { left: 52.46%; right: auto; top: 2.28%; bottom: auto; }
  .room--irori .irori-copy { left: 10.56%; right: auto; top: 45.79%; bottom: auto; }
  .room--irori .hearth { left: 51.05%; right: auto; top: 56.62%; bottom: auto; width: 13.1%; height: 16.1%; }
  .room--irori .irori-garden { left: 69.72%; right: auto; top: 18.97%; bottom: auto; width: 26.6%; height: 43.4%; }
  .room--furo .room-plaque { left: 6.65%; right: auto; top: 17.55%; bottom: auto; }
  .room--furo .furo-guide { left: 7.31%; right: auto; top: 55.07%; bottom: auto; width: 47.43%; height: 24.96%; }

  /* 通し過去問と一問一答は、これまでどおり本の高さに合わせる。 */
  .room--shoin .shoin-library .shoin-book--tsushi span,
  .room--shoin .shoin-library .shoin-book--drill span { font-size: min(19px, 1.8cqh); }

  /* 二分野の本は今回の書き出しどおり19pxにする。横向きスマホの縮小は末尾で指定する。 */
  .room--shoin .shoin-library .shoin-book--shien span,
  .room--shoin .shoin-library .shoin-book--hoken span { font-size: 19px; }

  .room--shoin .shoin-library .shoin-book--tsushi span,
  .room--shoin .shoin-library .shoin-book--drill span,
  .room--shoin .shoin-library .shoin-book--shien span,
  .room--shoin .shoin-library .shoin-book--hoken span {
    font-family: "HGP行書体", "HGS行書体", "HG行書体", "Yu Mincho", "Hiragino Mincho ProN", serif;
  }
}

/* 姉妹サイトの港を経由した人だけに見せる、二枚絵の到着演出。 */
body.voyage-intro-open { overflow: hidden; }
.voyage-intro[hidden] { display: none !important; }
.voyage-intro {
  position: fixed;
  z-index: 2147483600;
  inset: 0;
  overflow: hidden;
  background: #17100c;
  color: #fff1cc;
  opacity: 1;
  transition: opacity 650ms ease;
}
.voyage-intro.is-leaving { opacity: 0; }
.voyage-intro__scene,
.voyage-intro__mist { position: absolute; inset: -2%; }
.voyage-intro__scene {
  background-position: center;
  background-size: cover;
  filter: blur(18px) brightness(1.42) saturate(.65);
  transform: scale(1.055);
  transition: opacity 2050ms ease, filter 2500ms ease, transform 6200ms ease;
}
.voyage-intro__scene--departure {
  z-index: 1;
  opacity: .18;
  background-image: url("assets/images/arrival-europe-departure-v1.webp");
}
.voyage-intro__scene--arrival {
  z-index: 2;
  opacity: 0;
  background-image: url("assets/images/arrival-japan-from-europe-v1.webp");
}
.voyage-intro.is-running .voyage-intro__scene {
  filter: blur(0) brightness(1) saturate(1);
  transform: scale(1);
}
.voyage-intro.is-running .voyage-intro__scene--departure { opacity: 1; }
.voyage-intro.is-arrived .voyage-intro__scene--departure { opacity: 0; }
.voyage-intro.is-arrived .voyage-intro__scene--arrival { opacity: 1; }
.voyage-intro__mist {
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 52%, rgba(255, 249, 226, .88), transparent 49%),
    linear-gradient(105deg, rgba(235, 242, 239, .74), transparent 55%);
  opacity: .82;
  filter: blur(20px);
  transition: opacity 3000ms ease, transform 6200ms ease;
}
.voyage-intro.is-running .voyage-intro__mist { opacity: .2; transform: translateX(-7%); }
.voyage-intro.is-arrived .voyage-intro__mist { opacity: .06; }
.voyage-intro__caption {
  position: absolute;
  z-index: 4;
  left: clamp(22px, 6vw, 94px);
  bottom: clamp(62px, 11vh, 132px);
  max-width: min(600px, calc(100vw - 44px));
  padding: 16px 22px 18px;
  border-left: 4px solid #d8aa58;
  background: linear-gradient(90deg, rgba(31, 19, 12, .82), rgba(31, 19, 12, .15));
  text-shadow: 0 2px 8px #120b07;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 850ms ease, transform 850ms ease;
}
.voyage-intro__caption span,
.voyage-intro__caption strong { display: block; }
.voyage-intro__caption span {
  margin-bottom: 5px;
  color: #e7c98f;
  font-size: clamp(13px, 2vw, 18px);
  letter-spacing: .18em;
}
.voyage-intro__caption strong {
  font-family: serif;
  font-size: clamp(26px, 5vw, 54px);
  letter-spacing: .08em;
}
.voyage-intro.is-running .voyage-intro__caption--departure { opacity: 1; transform: translateY(0); }
.voyage-intro__caption--arrival { opacity: 0; }
.voyage-intro.is-arrived .voyage-intro__caption--departure { opacity: 0; }
.voyage-intro.is-arrived .voyage-intro__caption--arrival { opacity: 1; transform: translateY(0); }
.voyage-intro__skip {
  position: absolute;
  z-index: 5;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  min-width: 132px;
  min-height: 44px;
  border: 1px solid rgba(255, 225, 170, .7);
  border-radius: 3px;
  background: rgba(39, 24, 15, .78);
  color: #fff0cb;
  cursor: pointer;
  backdrop-filter: blur(5px);
}
.voyage-intro__skip:hover,
.voyage-intro__skip:focus-visible {
  background: rgba(91, 51, 22, .94);
  outline: 2px solid #fff0c4;
  outline-offset: 3px;
}
.journey-gate { display: block; color: inherit; text-decoration: none; }
@media (max-width: 700px) {
  .voyage-intro__scene { background-position: 62% center; }
  .voyage-intro__caption {
    left: 14px;
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 62px);
    max-width: calc(100vw - 28px);
    padding: 12px 15px 14px;
  }
}

/* ==========================================================================
   横向きのスマホ（高さ520px以下の横長画面）
   写真は横に広いので、スマホは横向きが本来の見え方。ただし横向きは背が低く、
   ヘッダーが2段に折り返すと画面の3分の1を食って、写真の上下が大きく切れていた
   （812×375でヘッダー132px・写真は53%しか見えない）。
   ヘッダーを1段に詰め、場所ボタンは横にスクロールさせて、部屋に高さを渡す。
   ========================================================================== */

@media (orientation: landscape) and (max-height: 520px) {
  .site-header { border-bottom-width: 3px; }

  .site-header-inner {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 4px 10px;
  }

  .site-brand { gap: 6px; font-size: 16px; }
  .brand__seal { flex-basis: 28px; width: 28px; height: 28px; font-size: 14px; }

  /* 場所ボタンは折り返さず、横にすべらせる（つまみは見せない） */
  .house-nav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .house-nav::-webkit-scrollbar { display: none; }
  .house-nav__stop { flex: 0 0 auto; padding: 4px 10px; font-size: 13px; }

  /* 部屋の高さが320px前後しかないので、飾りの説明札は引っこめて写真に場所をゆずる
     （背の低い縦向きの機種で書院の札を消しているのと同じ考え方） */
  .shoin-message,
  .irori-copy,
  .furo-message,
  .departure-copy { display: none; }

  /* 玄関の立て札は入口なので残すが、そえ書きを引っこめて幅を詰める。
     PC用の取り込み位置(left:42.99%)のままだと、667px幅で右へ84pxはみ出していた */
  .room--genkan .entrance-sign { left: auto; right: 4%; width: min(22rem, 48%); padding: 0.8rem 0.9rem; }
  .entrance-sign__title { font-size: 1.4rem; }
  .entrance-sign__eyebrow { font-size: 12px; }
  .entrance-sign p:not(.entrance-sign__eyebrow):not(.entrance-sign__title) { display: none; }

  /* 小さな本へ19pxを固定すると題簽が隣の本と重なるため、従来の縮小を維持する。 */
  .room--shoin .shoin-library .shoin-book--shien span,
  .room--shoin .shoin-library .shoin-book--hoken span { font-size: min(19px, 1.8cqh); }

  /* 「次の場所へ」は右下だと札や行灯と重なり、Netlifyのバッジも右下に出るので、左下へ逃がす。
     左端の丸ボタンは上下の真ん中にあるので当たらない */
  .room-path { right: auto; bottom: 8px; left: 8px; padding-top: 0.42rem; padding-bottom: 0.42rem; }
}

/* ---- 縦向きスマホへの案内の窓（親サイトと同じ。muki.js が出し入れする） ---- */
.muki-annai {
  width: min(92vw, 420px);
  margin: auto;
  padding: 30px 22px 22px;
  border: 2px solid #e2c27a;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%),
    #3a2113;
  color: #fff0c7;
  box-shadow: 0 12px 34px rgba(5, 2, 0, 0.6);
  text-align: center;
}

.muki-annai::backdrop { background: rgba(10, 5, 2, 0.62); }

.muki-annai__shirushi {
  margin: 0;
  color: #e2c27a;
  font-size: 34px;
  line-height: 1;
}

.muki-annai h2 {
  margin: 10px 0 12px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.4;
}

.muki-annai p:not(.muki-annai__shirushi) {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.75;
}

.muki-annai__tojiru {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #e2c27a;
  border-radius: 8px;
  background: transparent;
  color: #f3e5c7;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.muki-annai__sonomama {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #e2c27a;
  border-radius: 8px;
  background: linear-gradient(180deg, #86562a, #5a341a);
  color: #fff2c7;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.muki-annai__tojiru:focus-visible,
.muki-annai__sonomama:focus-visible { outline: 3px solid #f0c46a; outline-offset: 2px; }

/* ---- 2本指で拡大したあとに戻るボタン（親サイトと同じ。muki.js が出し入れする） ----
   枠は position: fixed のまま、見えている範囲(VisualViewport)の位置と大きさへ移し、
   ページ倍率の逆数で打ち消す。ボタンは拡大に引きずられず、いつも右下に同じ大きさで見える。 */
.zentai-waku {
  position: fixed;
  z-index: 119;
  top: var(--vv-top, 0);
  left: var(--vv-left, 0);
  width: var(--vv-width, 100vw);
  height: var(--vv-height, 100vh);
  pointer-events: none;
  transform: scale(var(--vv-scale, 1));
  transform-origin: 0 0;
}

.zentai-waku[hidden] { display: none; }

.zentai-modoru {
  position: absolute;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid #e2c27a;
  border-radius: 12px;
  background: linear-gradient(180deg, #86562a, #5a341a);
  color: #fff2c7;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 14px rgba(5, 2, 0, 0.5);
  pointer-events: auto;
}

.zentai-modoru:focus-visible { outline: 3px solid #f0c46a; outline-offset: 2px; }

/* ==========================================================================
   描画負荷の抑制
   写真を横へ送る間に、見えていない部屋の半透明処理や環境アニメーションまで
   同時に合成しない。背景に写り込んでいて見えない旧CSS造形も動かさない。
   ========================================================================== */

.room::before,
.room::after {
  mix-blend-mode: normal;
}

.room-plaque,
.object-label,
.entrance-sign,
.threshold-link,
.room-path,
.shoin-message,
.irori-copy,
.departure-copy,
.furo-message {
  backdrop-filter: none;
}

/* 写実背景へ切り替えた後は透明になっているため、動かしても見えない。 */
.room--shoin .lantern__body,
.room--irori .flame,
.room--irori .steam {
  animation: none;
}

/* 風呂写真には元から湯気がある。重いぼかしアニメーションは一筋だけにする。 */
.furo-steam--two,
.furo-steam--three {
  display: none;
}

.room:not(.is-current) .hearth::before,
.room:not(.is-current) .furo-steam,
.room:not(.is-current) .furo-water-shimmer,
.pano.is-scrolling .hearth::before,
.pano.is-scrolling .furo-steam,
.pano.is-scrolling .furo-water-shimmer {
  animation-play-state: paused !important;
}

/* 夜の暗幕がスマホの操作札に黒い網のように重ならないよう、
   暗幕を少し浅くし、札そのものは不透明な和紙として読ませる。 */
@media (pointer: coarse) {
  html[data-time="night"] { --night-overlay: 0.68; }

  .object-label {
    background: #f1dfbc;
    color: #21160f;
    transition: none;
  }

  html[data-time="night"] .object-label {
    background: #fff0cf;
    color: #160e09;
    filter: brightness(1.22);
  }
}

/* 横向きスマホでは、囲炉裏の中央にある鍋を札で隠さない。 */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .room--irori .hearth__label {
    right: auto;
    left: -7.5rem;
  }
}