/* =========================================================================
   館 — 画面の上に乗るもの
   -------------------------------------------------------------------------
   3D の空間は歩くためのもの。読むための文字はここ（2D）に出す。
   立体の壁に長文を貼ると、傾いて滲んで読めない。
   空間＝案内、平面＝本文。この分担を崩さないこと。
   ========================================================================= */

#ui {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
#ui button, #ui a, #ui .catch { pointer-events: auto; }

/* 画面全体の粒と隅の落ち。館の空気をひと皮かぶせる。 */
#veil {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(4,5,6,.72) 100%);
}
/* 画面全体の粒。mix-blend-mode を付けると毎フレーム背後と合成し直すことになり、
   全画面ぶんの費用が常時かかる。素の重ね置きで足りる。 */
#veil::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* 戸口をくぐる一瞬を覆う幕。
   入る／出るの間だけ落ちる。演出であると同時に、カメラが壁の面を
   通り抜ける一瞬に外側が見えるのを、確実に塞ぐ役をしている。 */
#wash {
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  background: #050607;
  opacity: 0;
  transition: opacity .34s var(--ease);
}
#wash.is-on { opacity: 1; }

/* -------------------------------------------------------------------------
   1. 開扉（読み込み）
   ------------------------------------------------------------------------- */
#gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  transition: opacity .5s ease;
}
#gate.is-done { opacity: 0; pointer-events: none; }
.gate__half {
  flex: 1;
  background: #0d0f11;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(0,0,0,.5)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-blend-mode: normal, overlay;
  transition: transform 1.5s cubic-bezier(.7, 0, .2, 1);
  will-change: transform;
}
.gate__half--r { background-image: linear-gradient(270deg, rgba(255,255,255,.05), rgba(0,0,0,.5)); }
#gate.is-open .gate__half--l { transform: translateX(-101%); }
#gate.is-open .gate__half--r { transform: translateX(101%); }
/* 扉の合わせ目から漏れる光 */
#gate::after {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(255,226,186,.75) 45%, transparent);
  opacity: .6;
}
.gate__pct {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--en);
  font-size: 12px;
  letter-spacing: .4em;
  color: var(--ash);
  z-index: 2;
  text-align: center;
}
.gate__pct b { display: block; font-size: 40px; font-weight: 300; color: var(--chalk); margin-bottom: 10px; }

/* -------------------------------------------------------------------------
   2. 玄関
   ------------------------------------------------------------------------- */
#entry {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;                 /* 背の低い画面では中身を切らずに送る */
  overscroll-behavior: contain;
  padding: 20px 24px;
  text-align: center;
  /* 背景は廊下そのもの。奥行きは見せたいが、立て看板の白い吹き出しが
     ちょうど見出しの高さに来るので、真ん中は濃いめに敷いて字を守る。 */
  background:
    linear-gradient(180deg, transparent 0%, rgba(6,7,9,.72) 26%, rgba(6,7,9,.72) 74%, transparent 100%),
    radial-gradient(90% 70% at 50% 44%, rgba(6,7,9,.30), rgba(6,7,9,.92) 78%);
  text-shadow: 0 2px 18px rgba(0,0,0,.9);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
#entry.is-gone { opacity: 0; transform: scale(1.06); pointer-events: none; }
.entry__in { width: 100%; max-width: 760px; margin: auto; }

.av { width: 88px; margin: 0 auto 20px; }
.av svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 34px rgba(0,0,0,.7)); }

#entry .welcome {
  font-family: var(--en);
  font-weight: 300;
  font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ash);
  line-height: 1.7;
}
#entry .welcome span { color: var(--chalk); }
#entry .welcome-ja {
  font-family: var(--jp);
  font-weight: 500;
  font-size: clamp(19px, 3vw, 30px);
  letter-spacing: .1em;
  line-height: 1.55;
  margin-top: 12px;
}
#entry .welcome-ja b { font-weight: 900; }

#entry .rule { width: 1px; height: 30px; background: linear-gradient(180deg, var(--amber), transparent); margin: 20px auto 18px; }

/* 使い方。横3列に置いて、縦の場所を食わないようにする。 */
.howto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 22px 0 4px;
  text-align: left;
  border-top: 1px solid rgba(236,233,227,.12);
  border-bottom: 1px solid rgba(236,233,227,.12);
  padding: 15px 0;
}
.howto li { display: flex; gap: 10px; align-items: flex-start; }
.howto .n {
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--amber);
  padding-top: 2px;
  flex: 0 0 auto;
}
/* ■ 折り返しは balance で。細い画面だと 02 の行だけが折れて、2行目に
     「す。」の2文字（幅の 8%＝25px）が取り残されていた。字を小さくして
     1行に収める手もあるが、携帯で 12.5px より下げると読めない。
     行数は変えずに幅だけを揃える（実測：8% → 50%）。
     対応していないブラウザでは、いままでどおり右端で折れるだけ。 */
.howto .d { font-size: 12.5px; line-height: 1.75; color: var(--ash); text-wrap: balance; }
.howto .d b { color: var(--chalk); font-weight: 700; }

#entry .acts { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
#entry .role {
  font-family: var(--en);
  font-size: 10.5px;
  letter-spacing: .28em;
  color: var(--dim);
  margin-top: 16px;
}
@media (max-width: 640px) {
  .howto { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .av { width: 84px; margin-bottom: 18px; }
}

/* 細い画面の見出し。改行は index.html の <br> で「ようこそ、」の後に
   決めてあるが、2行目（名前＋のポートフォリオへ）が入りきらないと、
   結局「へ」だけが3行目に落ちる。コメントで警戒していた症状そのもの。

   実測（変更前）… 360px で2行目が 293px、使える幅は 312px。字間 .1em で
   1.9px × 15字 ＝ 28px を食っていた。320px では 272px の枠に 272px で、
   1px も余らずに「へ」がこぼれた。
   字を小さくするより先に字間を詰める（見出しなので大きさは残したい）。
   実測（変更後）… 360px で 281/312、320px で 265/272。どちらも2行。

   ■ 名前は管理画面から変えられる。長い名前を入れれば 3行になるが、
     そのときは「へ」1文字ではなく語のかたまりで折れる（実測で確認）。 */
@media (max-width: 420px) {
  #entry .welcome-ja { font-size: clamp(17px, 5vw, 30px); letter-spacing: .04em; }
}

/* 背の低い画面。■ 幅ではなく高さで分けること。
   ここで切れるのは縦なので、横幅の広い携帯の横向きがいちばん危ない。
   実測（変更前）… 812×375 で「館に入る」の上端が 404。画面は 375 しか
   ないので、**入口のボタンが1つも見えない**状態だった（送り出すものが
   何も無い画面になる）。320×568 でも「資料で読む」と肩書が切れていた。

   #entry は overflow-y:auto なので送れば読めるが、開始画面で送るのは
   「奥へ進む」の操作と紛らわしい。送らずに収まるようにする。
   間隔だけを詰めて、字の大きさは変えない（読めなくなっては本末転倒）。 */
@media (max-height: 660px) {
  #entry { padding: 12px 24px; }
  .av { width: 52px; margin-bottom: 10px; }
  #entry .welcome-ja { margin-top: 8px; }
  #entry .rule { height: 14px; margin: 10px auto 8px; }
  .howto { margin: 12px 0 4px; padding: 10px 0; }
  #entry .acts { margin-top: 12px; }
  #entry .role { margin-top: 8px; }
}
/* さらに低い（携帯の横向き）。人の絵は飾りなので、ここでは引っ込める。 */
@media (max-height: 430px) {
  .av { display: none; }
  #entry .rule { display: none; }
  .howto { margin: 10px 0 4px; }
}

/* -------------------------------------------------------------------------
   3. 手すり（常設のボタン）
   ------------------------------------------------------------------------- */
#rail {
  position: absolute;
  top: 20px; right: 20px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
#rail.is-in { opacity: 1; transform: none; }
.ibtn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(236,233,227,.2);
  background: rgba(10,11,13,.86);
  transition: border-color .3s var(--ease), background .3s var(--ease);
  position: relative;
}
.ibtn:hover, .ibtn.is-on { border-color: var(--amber); }
.ibtn svg { width: 19px; height: 19px; stroke: var(--chalk); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ibtn:hover svg, .ibtn.is-on svg { stroke: var(--amber-lit); }
.ibtn__badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--amber);
  color: #14100a;
  font-family: var(--num);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* 戻る。部屋の中にいるときだけ出る。 */
#back {
  position: absolute;
  top: 20px; left: 20px;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
#back.is-in { opacity: 1; transform: none; pointer-events: auto; }

/* いまどこにいるか。左下に小さく。 */
#where {
  position: absolute;
  left: 22px; bottom: 22px;
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
#where.is-in { opacity: 1; }
#where b { color: var(--amber); font-weight: 400; }

/* -------------------------------------------------------------------------
   4. 案内文
   ------------------------------------------------------------------------- */
#hint {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--ash);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
#hint.is-in { opacity: 1; }
#hint .k {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(236,233,227,.28);
  font-family: var(--en);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--chalk);
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
#hint .bob { animation: bob 2s ease-in-out infinite; }

/* -------------------------------------------------------------------------
   5. 見取り図
   ------------------------------------------------------------------------- */
#map {
  position: absolute;
  top: 76px; right: 20px;
  width: 320px;
  border: 1px solid rgba(236,233,227,.18);
  background: rgba(9,10,12,.975);
  padding: 18px;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transform-origin: top right;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
#map.is-open { opacity: 1; transform: none; pointer-events: auto; }
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ash);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(236,233,227,.14);
  margin-bottom: 14px;
}
.panel__x { width: 22px; height: 22px; display: grid; place-items: center; }
.panel__x svg { width: 12px; height: 12px; stroke: var(--ash); stroke-width: 2; fill: none; stroke-linecap: round; }
.panel__x:hover svg { stroke: var(--amber); }

#map svg.plan { width: 100%; height: auto; display: block; }
#map .rm { cursor: pointer; }
#map .rm rect { fill: rgba(236,233,227,.05); stroke: rgba(236,233,227,.26); stroke-width: 1; transition: fill .3s, stroke .3s; }
#map .rm text { fill: var(--dim); font-family: var(--en); font-size: 7px; letter-spacing: .18em; transition: fill .3s; }
#map .rm:hover rect { fill: rgba(226,137,44,.14); stroke: var(--amber); }
#map .rm:hover text { fill: var(--amber-lit); }
#map .rm.is-seen rect { fill: rgba(226,137,44,.1); stroke: rgba(226,137,44,.5); }
#map .rm.is-seen text { fill: var(--ash); }
#map .rm.is-here rect { fill: rgba(226,137,44,.26); stroke: var(--amber); }
#map .rm.is-here text { fill: var(--chalk); }
#map .hallway { fill: rgba(236,233,227,.045); stroke: rgba(236,233,227,.18); stroke-width: 1; }
#map .you { fill: var(--amber); }
#map .you-ring { fill: none; stroke: var(--amber); stroke-width: 1; opacity: .55; }
@keyframes ping { 0% { r: 3; opacity: .8; } 100% { r: 13; opacity: 0; } }
#map .you-ring { animation: ping 2.2s ease-out infinite; }
#map .note { font-size: 11px; color: var(--dim); margin-top: 12px; line-height: 1.7; }

/* -------------------------------------------------------------------------
   6. 印（実績の記録）
   ------------------------------------------------------------------------- */
#stamps {
  position: absolute;
  top: 76px; right: 20px;
  width: 300px;
  border: 1px solid rgba(236,233,227,.18);
  background: rgba(9,10,12,.975);
  padding: 18px;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transform-origin: top right;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
#stamps.is-open { opacity: 1; transform: none; pointer-events: auto; }
.stamp-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.stamp-row + .stamp-row { border-top: 1px solid rgba(236,233,227,.08); }
.stamp-row .mark {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(236,233,227,.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--en);
  font-size: 10px;
  color: var(--faint);
}
.stamp-row.is-got .mark { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 18px rgba(226,137,44,.3); }
.stamp-row .t { font-family: var(--jp); font-weight: 700; font-size: 14px; color: var(--dim); }
.stamp-row .l { font-size: 11.5px; color: var(--faint); line-height: 1.5; }
.stamp-row.is-got .t { color: var(--chalk); }
.stamp-row.is-got .l { color: var(--ash); }
.stamps__foot {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(236,233,227,.14);
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ash);
  text-align: center;
}

/* 押された瞬間に出るもの */
#toast {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%) translateY(70px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border: 1px solid var(--amber);
  background: rgba(14,12,9,.94);
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
#toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast .mark {
  width: 30px; height: 30px;
  border: 1px solid var(--amber);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--amber);
  font-size: 13px;
}
#toast .t { font-family: var(--jp); font-weight: 700; font-size: 14px; }
#toast .l { font-size: 11.5px; color: var(--ash); }

/* -------------------------------------------------------------------------
   7. 音の卓
   ------------------------------------------------------------------------- */
#sound {
  position: absolute;
  top: 76px; right: 20px;
  width: 260px;
  border: 1px solid rgba(236,233,227,.18);
  background: rgba(9,10,12,.975);
  padding: 18px;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transform-origin: top right;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
#sound.is-open { opacity: 1; transform: none; pointer-events: auto; }
.sl { margin-bottom: 16px; }
.sl__l {
  display: flex; justify-content: space-between;
  font-family: var(--en); font-size: 10px; letter-spacing: .22em;
  color: var(--ash); margin-bottom: 8px;
}
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1px;
  background: rgba(236,233,227,.25);
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: var(--amber);
  cursor: pointer;
  border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border: 0;
  background: var(--amber); cursor: pointer; border-radius: 50%;
}
.sound__note { font-size: 11px; color: var(--dim); line-height: 1.7; margin-top: 4px; }

/* -------------------------------------------------------------------------
   8. 実績の本文（右から出る）
   ------------------------------------------------------------------------- */
#reader {
  position: absolute;
  top: 0; right: 0;
  width: min(620px, 100%);
  height: 100%;
  background: #0a0b0d;
  border-left: 1px solid rgba(236,233,227,.14);
  transform: translateX(102%);
  transition: transform .7s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  touch-action: pan-y;
}
#reader.is-open { transform: none; }
#reader::-webkit-scrollbar { width: 3px; }
#reader::-webkit-scrollbar-thumb { background: var(--faint); }

.rd { padding: 30px 46px 90px; }
.rd__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; }
.rd__no { font-family: var(--en); font-size: 11px; letter-spacing: .3em; color: var(--dim); }
.rd__hero {
  height: 210px;
  margin: 0 -46px 30px;
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: zoom-in;
}
/* 押せることを示す。写真は「押せそう」に見えないので、印が要る。 */
.rd__hero:focus-visible, .strand__pic:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.rd__hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,11,.35), rgba(8,9,11,1));
}
.rd__metric { font-family: var(--en); font-size: 11px; letter-spacing: .28em; color: var(--amber); }
.rd__fig {
  display: flex; align-items: baseline; flex-wrap: wrap;
  font-size: clamp(44px, 8vw, 74px);
  margin: 12px 0 20px;
}
.rd__fig .before { color: var(--dim); font-size: .5em; }
.rd__title {
  font-family: var(--jp); font-weight: 700;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.55; letter-spacing: .01em;
}
.rd__tag {
  font-family: var(--en); font-size: 10.5px; letter-spacing: .24em;
  color: var(--dim); margin-top: 14px;
}
.rd__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 4px; }
.rd__facts span {
  font-size: 11.5px; letter-spacing: .06em; color: var(--ash);
  border: 1px solid rgba(236,233,227,.18); padding: 5px 11px;
}

.blk { margin-top: 34px; }
.blk__k {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--en); font-size: 10.5px; letter-spacing: .3em; color: var(--amber);
  margin-bottom: 12px;
}
.blk__k::after { content: ''; flex: 1; height: 1px; background: rgba(226,137,44,.28); }
.blk__ja { font-family: var(--jp); font-size: 12px; letter-spacing: .2em; color: var(--dim); }
.blk__b { font-size: 14.5px; line-height: 2.05; color: var(--chalk); }
.blk--result .blk__b { color: #fff; }

.strand { border-left: 1px solid rgba(236,233,227,.16); padding: 2px 0 2px 18px; margin-top: 18px; }
.strand__n { font-family: var(--en); font-size: 10px; letter-spacing: .26em; color: var(--amber); }
.strand__h { font-family: var(--jp); font-weight: 700; font-size: 16px; margin: 5px 0 6px; }
.strand__d { font-size: 13.5px; line-height: 1.95; color: var(--ash); }
/* 「このほか担当したもの」に画像を付けたときだけ出る。 */
.strand__pic {
  margin-top: 12px;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #0a0c0e;
  border: 1px solid rgba(236, 233, 227, .12);
  cursor: zoom-in;
}

/* -------------------------------------------------------------------------
   写真の拡大
   -------------------------------------------------------------------------
   本文の欄は 524px、上の帯は高さ 210px に切り取ってある。読ませる幅は
   これで足りているので、写真だけを別に、画面いっぱいで見せる。

   ■ display を切り替えないこと。none からは transition が動かないので、
     開いた瞬間に「ぱっ」と出る。visibility と opacity で持つ。
   ■ 面は reader.js が作る。札を index.html と front-page.php の両方へ
     置くと、片方だけ直して食い違う。
   ------------------------------------------------------------------------- */
#zoom {
  position: fixed;
  inset: 0;
  z-index: 80;                    /* 本文(#reader) と手すりより手前。開扉(60)より上 */
  display: grid;
  /* ■ 行と列を明示すること。auto のままだと中身の大きさで決まるので、
       画像の max-height: 100% が「自分の高さの100%」になって効かない。
       実測：812×375 の窓で画像が 756×422 になり、画面から 47px はみ出した。
       minmax(0, 1fr) にすると、枠の側の大きさが先に決まる。 */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 28px;
  /* 透けた黒。館を完全に隠さず、写真だけを前へ出す。
     ■ backdrop-filter は使わない。全画面ぶんの合成が毎コマ乗る。
       #veil で mix-blend-mode をやめたのと同じ理由。 */
  background: rgba(4, 5, 6, .82);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s .3s;
}
#zoom.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease);
}
.zoom__img {
  max-width: 100%;
  max-height: 100%;
  /* 元より大きく引き伸ばさない。粗が出るだけで、見えるものは増えない。 */
  object-fit: contain;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}
.zoom__x {
  position: absolute;
  /* 左上。本文の「CLOSE ✕」は右にあるが、こちらは写真の面なので
     右上には手すり（#rail）が透けて見える。重なる側を避ける。 */
  top: 18px; left: 18px;
  width: 44px; height: 44px;      /* 指で押せる大きさ */
  display: grid; place-items: center;
  background: rgba(12, 14, 16, .8);
  border: 1px solid rgba(236, 233, 227, .22);
  color: var(--chalk);
  font-size: 15px;
  cursor: pointer;
}
.zoom__x:hover { border-color: var(--amber); color: var(--amber-lit); }
/* 細い画面では余白を削る。横写真は幅で頭打ちになるので、余白がそのまま
   写真の大きさに効く（375px の窓で 319 → 351、面積で1.2倍）。 */
@media (max-width: 640px) {
  #zoom { padding: 12px; }
  .zoom__x { top: 10px; left: 10px; }
}

/* 素材の枠。まだ届いていないものは、隠さずに枠のまま出す。 */
.slot {
  border: 1px dashed rgba(236,233,227,.2);
  padding: 16px 18px;
  margin-top: 10px;
  display: flex; align-items: center; gap: 14px;
}
.slot__k {
  font-family: var(--en); font-size: 9.5px; letter-spacing: .2em;
  color: var(--dim); border: 1px solid rgba(236,233,227,.2); padding: 3px 7px;
  flex: 0 0 auto;
}
.slot__l { font-size: 13px; color: var(--ash); flex: 1; }
.slot__hold { font-size: 11px; color: var(--amber); border: 1px dashed rgba(226,137,44,.45); padding: 3px 8px; flex: 0 0 auto; }

.rd__credits { margin-top: 14px; }
.rd__credits li {
  font-size: 13.5px; color: var(--ash); padding: 8px 0;
  border-bottom: 1px solid rgba(236,233,227,.08);
}
.rd__credits li::before { content: '—'; color: var(--dim); margin-right: 10px; }

.rd__nav { display: flex; gap: 10px; margin-top: 46px; flex-wrap: wrap; }
.rd__nav .btn { flex: 1; justify-content: center; min-width: 44%; }

/* -------------------------------------------------------------------------
   送信フォーム（受付）
   ------------------------------------------------------------------------- */
.mailto-line {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(236,233,227,.16);
  font-family: var(--num);
  font-size: 15px;
  color: var(--chalk);
  word-break: break-all;
}
.mailto-line .btn { padding: 7px 12px; font-size: 10.5px; }

.mform { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.mform label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--jp);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--ash);
}
.mform input, .mform textarea {
  font: inherit;
  font-size: 15px;
  color: var(--chalk);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(236,233,227,.18);
  padding: 11px 13px;
  border-radius: 0;
  outline: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.mform textarea { resize: vertical; line-height: 1.8; }
.mform input:focus, .mform textarea:focus {
  border-color: var(--amber);
  background: rgba(255,255,255,.07);
}
.mform input::placeholder, .mform textarea::placeholder { color: var(--faint); }
/* 足りない欄をその場で示す。文章だけだとどこのことか分からない。 */
.mform .is-bad { border-color: #ef8a7a; background: rgba(239,138,122,.08); }
.mform__lab { display: flex; align-items: center; }
.mform .req {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--amber);
  border: 1px solid rgba(226,137,44,.45);
  padding: 1px 5px;
  margin-left: 8px;
  vertical-align: 1px;
}
.mform button[type=submit] { justify-content: center; margin-top: 6px; }
.mform button[type=submit][disabled] { opacity: .5; pointer-events: none; }
.mform__note { font-size: 12px; line-height: 1.85; color: var(--dim); }
.mform__msg { font-size: 13px; line-height: 1.8; color: var(--ash); min-height: 1em; }
.mform__msg.is-ok { color: var(--amber-lit); }
.mform__msg.is-ng { color: #ef8a7a; }

/* 罠。人には見せず、読み上げにも拾わせない。
   display:none にすると入力自体が送られず罠にならないので、画面外へ逃がす。 */
.mform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   9. 資料で読む（平の全文）
   -------------------------------------------------------------------------
   館を歩く時間がない人のための出口。3〜5分で読み切れる形。
   ------------------------------------------------------------------------- */
#doc {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--void);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
#doc.is-open { opacity: 1; pointer-events: auto; }
#doc::-webkit-scrollbar { width: 4px; }
#doc::-webkit-scrollbar-thumb { background: var(--faint); }
.dc { max-width: 760px; margin: 0 auto; padding: 90px 28px 140px; }
.dc__x { position: fixed; top: 20px; right: 20px; z-index: 2; }
.dc h1 { font-family: var(--jp); font-weight: 700; font-size: clamp(26px, 5vw, 40px); line-height: 1.45; }
.dc .sub { color: var(--ash); font-size: 14px; margin-top: 16px; line-height: 2; }
.dc__rule { height: 1px; background: rgba(236,233,227,.14); margin: 46px 0; }
.dc h2 {
  font-family: var(--en); font-size: 11px; letter-spacing: .3em;
  color: var(--amber); margin-bottom: 26px;
}
.dw { padding: 30px 0; border-bottom: 1px solid rgba(236,233,227,.1); display: grid; grid-template-columns: 132px 1fr; gap: 28px; }
.dw__fig { font-family: var(--num); font-weight: 800; font-size: 27px; letter-spacing: -.02em; line-height: 1.15; }
.dw__fig .before { color: var(--dim); font-size: .62em; display: block; }
.dw__fig .unit { font-family: var(--jp); font-size: .46em; color: var(--ash); font-weight: 500; }
.dw__no { font-family: var(--en); font-size: 10px; letter-spacing: .26em; color: var(--dim); margin-bottom: 10px; }
.dw__t { font-family: var(--jp); font-weight: 700; font-size: 19px; line-height: 1.6; margin-bottom: 14px; }
.dw__l { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 5px 0; font-size: 13.5px; line-height: 1.95; color: var(--ash); }
.dw__l b { font-family: var(--jp); font-weight: 700; font-size: 11.5px; color: var(--amber); letter-spacing: .1em; padding-top: 4px; }
@media (max-width: 640px) {
  .dw { grid-template-columns: 1fr; gap: 14px; }
  .dw__l { grid-template-columns: 42px 1fr; }
}

/* -------------------------------------------------------------------------
   10. 小さい画面
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  #map, #stamps, #sound { width: calc(100vw - 40px); right: 20px; }
  #reader { width: 100%; }
  .rd { padding: 24px 24px 90px; }
  .rd__hero { margin: 0 -24px 26px; height: 170px; }
  #hint { font-size: 11px; letter-spacing: .1em; white-space: normal; text-align: center; width: calc(100% - 40px); justify-content: center; }
  #where { display: none; }
}