/* =====================================================================
   音のふしぎ科学博物館 — 白い館に、黒い展示ケース
   建築（壁・床・余白）は白大理石と漆喰。展示物は必ず黒いガラスケースの中に。
   色はインク・鉄・金の3つだけ。形は直角とヘアライン。
   ===================================================================== */
:root{
  --paper:#f4f3ef; --ivory:#fbfaf6;
  --ink:#16181d; --ink2:#4b505b; --faint:#7a7f89;
  --hair:rgba(22,24,29,.13); --hair2:rgba(22,24,29,.28);
  --iron:#121419; --iron2:#23262e; --case:#0a0b0f;
  --gold:#a3864f; --gold-l:#ccb47e; --gold-d:#7d6431;
  --calc:#2b7356; --approx:#86672a; --show:#62539f;
  --rc:var(--gold);
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* 展示ケース（トップの窓・回廊の額・展示室のステージで共通） */
  --vit-frame:6px;
  --vit-shadow:0 0 0 1px rgba(255,255,255,.55),0 28px 60px -30px rgba(18,20,25,.6),0 8px 18px -12px rgba(18,20,25,.35);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:15px;line-height:1.85;min-height:100dvh;overflow-x:clip;-webkit-font-smoothing:antialiased;background:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
[hidden]{display:none!important}
/* 静的な本文（JavaScript が動かないときに読める記事）。作品が起動する環境では表示しない（main.js が取り除く） */
.fallback{max-width:46rem;margin:0 auto;padding:56px 24px 72px;line-height:2;color:#1b2438}
.fallback h1{font-size:30px;letter-spacing:.06em;margin:0 0 18px}.fallback h2{font-size:20px;margin:40px 0 10px}.fallback h3{font-size:16px;margin:24px 0 6px}
.fallback p,.fallback ul,.fallback dl{margin:0 0 12px}.fallback ul{padding-left:1.4em}.fallback dt{font-weight:700;margin-top:10px}.fallback dd{margin:0}
.fallback a{text-decoration:underline}.fallback section+section{margin-top:64px;padding-top:32px;border-top:1px solid #1b243833}
html.js .fallback{display:none}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
::selection{background:#ccb47e55}

/* 白大理石（WebGL が描けないときの CSS 代替） */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(ellipse 55% 42% at 14% 18%,rgba(140,150,166,.10),transparent 72%),
  radial-gradient(ellipse 50% 46% at 88% 74%,rgba(140,150,166,.09),transparent 72%),
  radial-gradient(ellipse 60% 30% at 55% 8%,rgba(255,255,255,.85),transparent 70%),var(--paper)}
.marble-cv{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;object-fit:cover}

/* 共通部品 ------------------------------------------------------------- */
.vit{position:relative;background:var(--case);border:var(--vit-frame) solid var(--iron);box-shadow:var(--vit-shadow)}
.ibtn{width:38px;height:38px;display:grid;place-items:center;color:var(--ink);background:rgba(251,250,246,.6);border:1px solid var(--hair2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s,color .2s}
.ibtn:hover{background:var(--ivory);border-color:var(--ink)}
.ibtn.off{color:var(--faint)}
.ibtn svg{width:18px;height:18px}
.kick{font-family:var(--sans);font-size:11px;letter-spacing:.32em;color:var(--gold-d);font-weight:500}

/* ---- ヘッダー ---- */
.bar{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px max(20px,env(safe-area-inset-left)) 14px max(20px,env(safe-area-inset-right));pointer-events:none;transition:background .3s}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(248,248,246,.92),rgba(248,248,246,0));pointer-events:none}
.bar>*{pointer-events:auto}
.bar.in-ex{display:none}
.brand{white-space:nowrap;font-family:var(--serif);letter-spacing:.22em;font-size:14px}
.bar-r{display:flex;gap:8px;align-items:center}
.cab-btn{display:inline-flex;align-items:baseline;gap:7px;height:38px;padding:0 14px;align-items:center;white-space:nowrap;font-size:12px;letter-spacing:.14em;color:var(--ink2);border:1px solid var(--hair2);background:rgba(251,250,246,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s}
.cab-btn:hover{border-color:var(--ink);color:var(--ink)}
.cab-btn b{font-family:var(--mono);font-weight:500;color:var(--gold-d);letter-spacing:0}
.cab-btn i{font-style:normal;font-family:var(--mono);letter-spacing:0;color:var(--faint)}
.lang{height:38px;padding:0 12px;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;color:var(--faint);border:1px solid var(--hair2);background:rgba(251,250,246,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lang .on{color:var(--ink);font-weight:500}
.lang:hover{border-color:var(--ink)}

/* ---- トップ ---- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,7vw,110px);align-items:center;max-width:1240px;margin:0 auto;padding:112px 32px 80px}
.hero-text{position:relative}
.hero-kicker{font-size:11px;letter-spacing:.42em;color:var(--gold-d);margin-bottom:26px;font-weight:500}
.hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.8vw,78px);line-height:1.3;letter-spacing:.09em;word-break:keep-all}
.hero-catch{font-family:var(--serif);font-size:clamp(15px,1.7vw,20px);letter-spacing:.32em;margin-top:34px;padding-top:28px;position:relative}
.hero-catch::before{content:"";position:absolute;left:0;top:0;width:56px;height:1px;background:var(--gold)}
.hero-sub{margin-top:14px;font-size:clamp(13.5px,1.4vw,15px);color:var(--ink2);letter-spacing:.06em;line-height:2;max-width:30em}
.hero-go{display:inline-flex;align-items:center;gap:16px;margin-top:40px;padding:15px 28px;background:var(--iron);color:#f3f1ea;font-size:13px;letter-spacing:.24em;box-shadow:inset 0 0 0 1px rgba(204,180,126,.35),0 16px 28px -18px rgba(18,20,25,.9);transition:.25s var(--ease)}
.hero-go span{display:inline-block;animation:bob 2s ease-in-out infinite}
.hero-go:hover{background:var(--iron2);box-shadow:inset 0 0 0 1px var(--gold-l),0 20px 32px -18px rgba(18,20,25,.9)}
@keyframes bob{50%{transform:translateY(3px)}}
.hero-wrap{position:relative;justify-self:center;width:100%;max-width:500px}
.hero-win{position:relative;aspect-ratio:6/7;max-height:74svh;width:100%;margin:0 auto;overflow:hidden;cursor:crosshair;touch-action:manipulation;
  background:var(--case);border:var(--vit-frame) solid var(--iron);border-radius:50% 50% 0 0/30% 30% 0 0;box-shadow:var(--vit-shadow)}
.hero-win::before{content:"";position:absolute;inset:6px;border:1px solid rgba(204,180,126,.45);border-radius:inherit;pointer-events:none;z-index:2}
.hero-win::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 22%,transparent 38%)}
.hero-cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-plate{margin:26px auto 0;text-align:center;font-size:12.5px;letter-spacing:.12em;color:var(--ink2);line-height:1.9}
.hero-plate b{display:block;font-weight:500;font-size:10.5px;letter-spacing:.36em;color:var(--gold-d);margin-bottom:2px}
.hero-plate::before{content:"";display:block;width:1px;height:22px;background:linear-gradient(transparent,var(--gold));margin:0 auto 12px}

.intro{max-width:820px;margin:0 auto;padding:40px 24px 120px;text-align:center}
.intro-lead{font-family:var(--serif);font-size:clamp(16px,2vw,20px);line-height:2.3;letter-spacing:.06em;position:relative;padding-top:48px}
.intro-lead::before{content:"";position:absolute;left:50%;top:0;width:1px;height:30px;background:linear-gradient(var(--gold),transparent)}
.legend{display:grid;grid-template-columns:auto auto;justify-content:center;gap:10px 18px;margin:44px auto 0;text-align:left;font-size:12.5px;color:var(--ink2);align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;white-space:nowrap;font-weight:500}
.chip::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:currentColor;flex:none}
.chip.calc{color:var(--calc)}.chip.approx{color:var(--approx)}.chip.show{color:var(--show)}

/* ---- 回廊：漆喰の壁、鉄の巾木、黒大理石の床 ---- */
.walk{position:relative;isolation:isolate;box-shadow:0 -1px 0 rgba(204,180,126,.5)}
.gal{--floor:clamp(56px,10svh,92px);--dado:12px;--fs:clamp(160px,min(40svh,32vw),420px);position:relative;height:100svh;min-height:540px;max-height:980px;overflow:hidden;background:#f1efea;box-shadow:inset 0 24px 34px -24px rgba(22,24,29,.15)}
.wall{position:absolute;left:0;right:0;top:0;bottom:var(--floor);pointer-events:none}
.wall.far{background:radial-gradient(ellipse 80% 70% at 50% 0,rgba(255,255,255,.82),transparent 75%),url(../img/plaster.jpg) calc(var(--px,0)*-.3px) 0/1024px 1024px repeat;background-blend-mode:normal,multiply}
.wall.near{background:
  linear-gradient(90deg,rgba(22,24,29,.08) 0,rgba(22,24,29,.04) 1px,transparent 2px) calc(var(--px,0)*-.55px) 0/640px calc(100% - var(--dado)) repeat-x,
  linear-gradient(#4a4e5a 0 1px,#23262d 1px 3px,#14161b 3px) 0 100%/100% var(--dado) no-repeat}
.wall.near::after{content:"";position:absolute;left:0;right:0;bottom:var(--dado);height:30px;background:linear-gradient(transparent,rgba(22,24,29,.1))}
.floor{position:absolute;left:0;right:0;bottom:0;height:var(--floor);overflow:hidden;
  background:linear-gradient(rgba(255,255,255,.24) 0,rgba(255,255,255,.04) 14%,transparent 40%),var(--floor-img,linear-gradient(#1a1b20,#0d0e11)) calc(var(--px,0)*-1px) 0/auto 100% repeat-x;
  background-color:#050506;box-shadow:inset 0 1px 0 rgba(216,191,138,.6)}
.floor::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(420px - 1px),rgba(255,255,255,.07) calc(420px - 1px) 420px);background-position:calc(var(--px,0)*-1px) 0}
.floor::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.09) 42%,transparent 56%),radial-gradient(ellipse 70% 120% at 50% 0,rgba(255,255,255,.1),transparent 70%)}
.track{position:absolute;inset:0;z-index:2;display:flex;align-items:center;gap:clamp(48px,7vw,120px);padding:100px clamp(24px,8vw,120px) calc(var(--floor) + var(--dado) + 10px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(24px,8vw,120px);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab;outline:none}
.track::-webkit-scrollbar{display:none}
.track::after{content:"";flex:none;width:1px;margin-left:calc(-1 * clamp(48px,7vw,120px))}
.track.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.track.dragging *{pointer-events:none}
/* 館内の案内（壁に直接記された表示。UIの島を床に置かない） */
.map{position:absolute;left:50%;top:clamp(70px,10svh,92px);transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:22px;pointer-events:auto}
.map-room{display:flex;align-items:center;gap:7px;opacity:.55;transition:opacity .4s}
.map-room.here{opacity:1}
.map-num{font-family:var(--serif);font-size:12px;color:var(--ink);line-height:1;margin-right:3px}
.map-dot{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--ink);display:block;position:relative;transition:.3s}
.map-dot::after{content:"";position:absolute;inset:-8px}
.map-dot:hover{background:var(--hair2)}
.map-dot.here{background:var(--gold);border-color:var(--gold);transform:rotate(45deg) scale(1.25)}
.cor-hint{position:absolute;left:0;right:0;top:calc(clamp(70px,10svh,92px) + 22px);z-index:5;text-align:center;pointer-events:none;transition:opacity .6s;font-size:10.5px;letter-spacing:.3em;color:var(--faint)}
.cor-hint.gone{opacity:0}
.cor-arrow{position:absolute;top:calc(50% - var(--floor)/2 - 24px);z-index:6;width:46px;height:46px;display:grid;place-items:center;font-size:17px;color:var(--ink);background:rgba(251,250,246,.72);border:1px solid var(--hair2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .25s,background .2s,color .2s}
.cor-arrow:hover{background:var(--iron);color:#fff;border-color:var(--iron)}
.cor-arrow.cor-prev{left:clamp(10px,2vw,30px)}.cor-arrow.cor-next{right:clamp(10px,2vw,30px)}
.cor-arrow:disabled{opacity:0;pointer-events:none}

.gate{flex:none;width:min(80vw,420px);position:relative;scroll-snap-align:start}
.gate .room-label{display:inline-block;font-size:11px;letter-spacing:.36em;color:var(--gold-d);font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--gold)}
.gate .room-num{display:block;font-family:var(--serif);font-size:clamp(88px,min(20svh,14vw),168px);line-height:1;font-weight:400;margin:22px 0 14px;color:var(--ink);opacity:.9}
.gate h2{font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);font-weight:400;letter-spacing:.16em;line-height:1.4}
.gate p{color:var(--ink2);font-size:14px;margin-top:12px;line-height:1.95;max-width:26em;letter-spacing:.03em}
.gate.exit{width:min(80vw,360px)}
.gate.exit h2{margin-top:18px}

.exh{--fw:var(--fs);flex:none;width:calc(var(--fw) + 20px);position:relative;scroll-snap-align:center;--lit:0}
.exh.wide{--fw:calc(var(--fs) * 1.2)}
.exh::before{content:"";position:absolute;left:50%;top:calc(var(--fs) * .5 + 10px);width:calc(var(--fw) * 2.3);height:calc(var(--fs) * 2.1);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));opacity:calc(.05 + var(--lit) * .85);pointer-events:none;z-index:-1}
.frame{position:relative;display:block;width:var(--fw);margin:0 auto;height:calc(var(--fs) + 12px);background:var(--iron);padding:var(--vit-frame);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 calc(14px + var(--lit)*24px) calc(26px + var(--lit)*30px) -20px rgba(18,20,25,.75);
  transform:translateY(calc(var(--lit) * -6px)) scale(calc(.94 + var(--lit) * .06))}
.mat{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--case)}
.mat::before{content:"";position:absolute;inset:5px;border:1px solid rgba(204,180,126,.4);z-index:2;pointer-events:none}
.mat::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 20%,transparent 36%);opacity:calc(.6 + var(--lit)*.4)}
.door-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.2s var(--ease);filter:saturate(calc(.6 + var(--lit)*.45)) brightness(calc(.7 + var(--lit)*.32))}
.frame:hover .door-vid{transform:scale(1.08)}
.arch-in{position:absolute;left:50%;bottom:20px;z-index:3;transform:translate(-50%,10px);opacity:0;background:rgba(251,250,246,.9);color:var(--ink);font-size:11.5px;letter-spacing:.28em;padding:8px 16px 8px 20px;transition:.3s var(--ease);display:inline-flex;gap:10px;white-space:nowrap}
.arch-in i{font-style:normal}
.frame:hover .arch-in,.frame:focus-visible .arch-in{opacity:1;transform:translate(-50%,0)}
.plate{position:relative;margin:clamp(16px,2.6svh,28px) auto 0;width:min(100%,calc(var(--fw) + 20px));padding:14px 0 0;border-top:1px solid var(--hair2)}
.plate::before{content:"";position:absolute;left:0;top:-1px;width:36px;height:1px;background:var(--gold)}
.plate-top{display:flex;justify-content:space-between;align-items:baseline}
.plate .no{font-family:var(--serif);font-size:12px;letter-spacing:.24em;color:var(--gold-d)}
.door-cnt{font-size:10px;color:var(--faint);letter-spacing:.2em}
.plate h3{font-family:var(--serif);font-size:clamp(20px,2.2vw,27px);font-weight:400;letter-spacing:.12em;line-height:1.35;margin-top:4px}
.plate .q{font-family:var(--serif);font-size:14px;line-height:1.8;color:var(--ink2);margin-top:8px;letter-spacing:.03em}
.plate .sub{display:none}
.enter{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding:4px 0;font-size:12px;letter-spacing:.26em;color:var(--ink);border-bottom:1px solid var(--ink);transition:.25s}
.enter span{transition:transform .25s var(--ease)}
.enter:hover{color:var(--gold-d);border-color:var(--gold)}
.enter:hover span{transform:translateX(4px)}
.gate .enter{margin-top:22px}

/* ---- 標本箱：閉じた引き出し ---- */
.cabinet{max-width:1120px;margin:0 auto;padding:120px 24px 110px}
.cab-lead{text-align:center;font-family:var(--serif);font-size:14.5px;color:var(--ink2);letter-spacing:.06em;margin-bottom:26px}
.cab-drawer{background:rgba(251,250,246,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hair2);box-shadow:0 22px 44px -32px rgba(18,20,25,.5),inset 0 1px 0 #fff}
.cab-drawer>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:28px;padding:22px 28px}
.cab-drawer>summary::-webkit-details-marker{display:none}
.cab-t{font-family:var(--serif);font-size:22px;letter-spacing:.24em;line-height:1.3}
.cab-t small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.42em;color:var(--gold-d);margin-bottom:6px}
.cab-c{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);color:var(--faint);font-size:12px}
.cab-c b{font-size:22px;font-weight:400;color:var(--ink)}
.cab-c i{font-style:normal}
.cab-bar{display:block;width:120px;height:1px;background:var(--hair2);margin-left:10px;align-self:center;position:relative}
.cab-bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--gold);transition:width .6s var(--ease)}
.cab-o{font-size:11.5px;letter-spacing:.24em;padding:10px 18px;border:1px solid var(--ink);transition:.2s}
.cab-drawer>summary:hover .cab-o{background:var(--iron);color:#fff}
.cab-o .o2,.cab-drawer[open] .cab-o .o1{display:none}
.cab-drawer[open] .cab-o .o2{display:inline}
.cab-drawer[open]>summary{border-bottom:1px solid var(--hair)}
.case{padding:26px 28px 6px}
.case:last-child{padding-bottom:30px}
.case-h{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.case-num{font-family:var(--serif);font-size:22px;line-height:1;min-width:28px}
.case-h h3{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.22em;flex:1}
.case-n{font-family:var(--mono);font-size:11px;color:var(--faint)}
.slots{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.slot{position:relative;display:flex;flex-direction:column;min-width:0}
.slot .pic{display:block;aspect-ratio:3/2;border:1px dashed var(--hair2);background:transparent center/cover no-repeat;position:relative}
.slot i{position:absolute;left:8px;top:6px;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint);z-index:2}
.slot .nm{font-family:var(--serif);font-size:13.5px;letter-spacing:.06em;line-height:1.5;margin-top:8px}
.slot small{font-size:11px;line-height:1.65;color:var(--faint);margin-top:6px}
.slot.ok .nm+small{margin-top:1px}
.slot.ok .pic{border:3px solid var(--iron);box-shadow:inset 0 0 0 1px rgba(204,180,126,.5),0 10px 18px -12px rgba(18,20,25,.6)}
.slot.ok i{color:var(--gold-l)}
.slot:not(.ok) .nm{display:none}
.slot:hover .pic{border-color:var(--ink)}

.foot{border-top:1px solid var(--gold);padding:40px 20px calc(40px + env(safe-area-inset-bottom));text-align:center;color:#b6bac3;font-size:12.5px;background:var(--iron)}
.foot-note{max-width:640px;margin:0 auto 20px;line-height:2;color:#9da2ad}
.foot-row{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;text-align:left}
.foot .copy a{color:#e8e9ee;text-decoration:underline;text-underline-offset:2px}
.foot .pg{font-family:'Fraunces',serif;font-weight:680;font-size:13px;letter-spacing:.06em;background:linear-gradient(120deg,#9c7a1f 0%,#c9a227 45%,#e6b93d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:opacity .25s}
.foot .pg:hover{opacity:.7}

/* ---- 展示室：白い壁に、黒い展示ケースとキャプション台 ---- */
.viewer{position:fixed;inset:0;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,30vw,430px);grid-template-rows:auto minmax(0,1fr);background:rgba(246,246,243,.35)}
.vhead{grid-column:1;display:flex;align-items:center;gap:22px;padding:max(18px,env(safe-area-inset-top)) clamp(20px,3vw,40px) 16px}
.back{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 9px;font-size:12px;letter-spacing:.2em;border:1px solid var(--hair2);background:rgba(251,250,246,.6);transition:.2s;flex:none}
.back:hover{border-color:var(--ink);background:var(--ivory)}
.vt{flex:1;min-width:0}
.vt small{display:flex;gap:14px;font-size:10.5px;letter-spacing:.3em;color:var(--gold-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.vt small b{font-family:var(--serif);font-weight:400;letter-spacing:.2em}
.vt h1{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,28px);letter-spacing:.16em;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-tools{display:flex;gap:8px;flex:none}
.stagewrap{grid-column:1;grid-row:2;position:relative;min-height:0;margin:0 clamp(20px,3vw,40px) clamp(20px,3vw,40px);overflow:hidden;color:#e9edf5;
  background:radial-gradient(ellipse 80% 60% at 50% 35%,#1b1e27,var(--case) 78%);border:var(--vit-frame) solid var(--iron);box-shadow:var(--vit-shadow);view-transition-name:vit}
.stagewrap::before{content:"";position:absolute;inset:6px;border:1px solid rgba(204,180,126,.32);z-index:2;pointer-events:none}
.stagewrap::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.015) 18%,transparent 32%)}
.stage{display:block;position:absolute;inset:0;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none}
.stage.under-gl{opacity:0}
.stage-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
::view-transition-group(vit){animation-duration:.62s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

.dock{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;min-height:0;color:var(--ink);position:relative;
  background:rgba(251,250,246,.8);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);border-left:1px solid var(--hair2);padding-bottom:env(safe-area-inset-bottom)}
.dock::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:160px;background:linear-gradient(var(--gold),transparent)}
.guide{flex:none;position:relative;margin:max(18px,env(safe-area-inset-top)) 22px 0;padding:14px 16px 14px 40px;font-family:var(--serif);font-size:14px;line-height:1.85;letter-spacing:.03em;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid var(--hair)}
.guide::before{content:"";position:absolute;left:17px;top:23px;width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}
.guide.pop{animation:pop .9s var(--ease)}
@keyframes pop{0%{background:#f3e7c9}100%{background:rgba(255,255,255,.7)}}
.tabs{display:flex;flex:none;margin:16px 22px 0;border-bottom:1px solid var(--hair2)}
.tabs button{flex:1;padding:12px 2px 11px;font-size:12px;color:var(--faint);letter-spacing:.22em;border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{color:var(--ink);border-color:var(--ink);font-weight:500}
.panes{overflow-y:auto;padding:20px 22px 22px;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.relwrap{flex:none;border-top:1px solid var(--hair);padding:14px 22px 6px}
.rel-h{font-size:10.5px;letter-spacing:.2em;color:var(--faint);margin-bottom:10px}
.nextrow{display:flex;flex-direction:column;gap:8px}
.next{display:block;padding:10px 14px;border:1px solid var(--hair);background:rgba(255,255,255,.6);transition:.2s;position:relative}
.next::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--gold)}
.next:hover{border-color:var(--ink);background:#fff}
.next small{display:block;font-size:10px;color:var(--gold-d);letter-spacing:.2em;font-weight:500}
.next b{font-family:var(--serif);font-weight:400;font-size:14.5px;letter-spacing:.08em}
.next span{display:block;font-size:12px;color:var(--ink2);line-height:1.6}
.seq{display:flex;justify-content:space-between;gap:8px;padding:8px 22px 14px;font-size:11.5px;letter-spacing:.06em;flex:none}
.seq a{color:var(--faint);padding:4px 0}.seq a:hover{color:var(--ink)}

/* 操作パネル：計測器のように */
.pane-ctl{display:grid;gap:20px;align-content:start}
.pane-ctl>.ctl-row,.pane-ctl>.ctl{min-width:0}
.ctl{min-width:0}
.ctl-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.ctl-l{font-size:12px;color:var(--ink2);letter-spacing:.12em;font-weight:500;min-width:0;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.ctl output{font-family:var(--mono);font-size:11.5px;color:var(--ink);background:rgba(22,24,29,.045);border:1px solid var(--hair);padding:1px 8px;min-width:64px;text-align:right;white-space:nowrap}
.ctl-title{font-family:var(--serif);font-size:13px;letter-spacing:.24em;color:var(--ink);display:flex;align-items:center;gap:12px;margin-top:4px}
.ctl-title::after{content:"";flex:1;height:1px;background:var(--hair)}
.ctl-note{font-size:12px;color:var(--ink2);line-height:1.85;padding-top:14px;border-top:1px solid var(--hair);letter-spacing:.02em}
.ctl-hint{font-size:11px;color:var(--faint);margin-top:2px;letter-spacing:.04em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;touch-action:pan-y;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:9px;background:
  linear-gradient(var(--ink),var(--ink)) 0 3px/100% 1px no-repeat,
  repeating-linear-gradient(90deg,rgba(22,24,29,.32) 0 1px,transparent 1px 10%) 0 6px/calc(100% + 1px) 3px no-repeat}
input[type=range]::-moz-range-track{height:9px;background:linear-gradient(var(--ink),var(--ink)) 0 3px/100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(22,24,29,.32) 0 1px,transparent 1px 10%) 0 6px/calc(100% + 1px) 3px no-repeat}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:7px;height:20px;margin-top:-6px;background:var(--iron);border:0;border-radius:1px;box-shadow:0 0 0 3px rgba(204,180,126,.38),0 2px 5px rgba(18,20,25,.35);transition:box-shadow .15s}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(204,180,126,.5),0 2px 5px rgba(18,20,25,.35)}
input[type=range]::-moz-range-thumb{width:7px;height:20px;background:var(--iron);border:0;border-radius:1px;box-shadow:0 0 0 3px rgba(204,180,126,.38)}
input[type=range]:focus-visible{outline:none}
.seg{display:flex;flex-wrap:wrap;margin-top:6px;border:1px solid var(--hair2);background:rgba(255,255,255,.55)}
.harm-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));border:1px solid var(--hair2)}
.harm-b{min-height:40px;font-family:var(--mono);font-size:12.5px;color:var(--faint);border-right:1px solid var(--hair);background:rgba(255,255,255,.5);transition:.15s}
.harm-b:last-child{border-right:0}
.harm-b[aria-pressed=true]{background:var(--iron);color:#f3f1ea}
.seg-b{flex:1 1 auto;padding:7px 10px;min-height:36px;font-size:12.5px;letter-spacing:.06em;color:var(--ink2);border-right:1px solid var(--hair);transition:.15s;white-space:nowrap}
.seg-b:last-child{border-right:0}
.seg-b:hover{color:var(--ink);background:rgba(255,255,255,.9)}
.seg-b[aria-pressed=true]{color:#fff;background:var(--iron)}
.ctl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;min-height:40px;border:1px solid var(--hair2);font-size:12.5px;letter-spacing:.08em;color:var(--ink);background:rgba(255,255,255,.7);transition:.15s;white-space:normal;text-align:center;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.btn:hover{border-color:var(--ink);background:#fff}
.btn.on{background:var(--iron);border-color:var(--iron);color:#fff}
.btn:disabled{opacity:.4;pointer-events:none}
.btn-i{display:grid;place-items:center}
.btn-i svg{width:16px;height:16px}
.ro{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;color:var(--ink2);letter-spacing:.06em;padding:6px 0;border-bottom:1px dashed var(--hair2)}
.ro-v{font-family:var(--mono);color:var(--ink);font-size:11.5px;text-align:right}

/* 読みもの（仕組み・雑学・科学メモ） */
.pane-txt{font-family:var(--serif);font-size:15px;line-height:2.05;letter-spacing:.02em;color:#262a33}
.pane-txt p+p{margin-top:.9em}
.pane-txt .lead{font-size:17px;line-height:1.95;color:var(--ink);position:relative;padding-top:18px;font-weight:600}
.pane-txt .lead::before{content:"";position:absolute;left:0;top:0;width:34px;height:1px;background:var(--gold)}
.pane-txt h4{font-weight:500;letter-spacing:.22em;color:var(--ink);font-size:12.5px;display:flex;align-items:center;gap:12px;margin:26px 0 8px;font-family:var(--sans)}
.pane-txt h4::after{content:"";flex:1;height:1px;background:var(--hair)}
.pane-txt .sur{border-left:1px solid var(--gold);background:linear-gradient(90deg,rgba(204,180,126,.12),transparent);padding:6px 14px}
.lore{margin-bottom:18px}.lore h4{margin:0 0 4px}
.sci{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-bottom:14px;align-items:start}
.sci .chip{margin-top:5px}
.sci p{margin:0!important;font-size:14px;line-height:1.9}
.disc{list-style:none;display:grid;gap:8px}
.disc li{border:1px dashed var(--hair2);padding:10px 14px;font-size:13px;color:var(--faint)}
.disc li b{display:block;font-weight:400;letter-spacing:.06em}
.disc li span{display:block;font-size:12.5px;line-height:1.7}
.disc li.ok{border:1px solid var(--gold);color:var(--ink2);background:rgba(204,180,126,.1)}
.disc li.ok b{color:var(--gold-d)}

/* 通知・保存 */
.toast{position:fixed;left:50%;top:max(16px,env(safe-area-inset-top));transform:translate(-50%,-140%);opacity:0;visibility:hidden;z-index:60;background:rgba(18,20,25,.96);border:1px solid rgba(204,180,126,.55);color:#eceae4;padding:12px 22px;font-size:13px;transition:transform .5s var(--ease),opacity .4s,visibility .4s;text-align:center;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);max-width:92vw;pointer-events:none;letter-spacing:.04em}
.toast{width:max-content;max-width:min(calc(100vw - 32px),560px);text-align:center;line-height:1.7}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast b{color:var(--gold-l);margin-right:10px;font-family:var(--serif);font-weight:400;letter-spacing:.14em}
.toast small{display:block;font-family:var(--mono);color:#9aa0ab;font-size:11px}
.save-ov{position:fixed;inset:0;z-index:70;background:rgba(10,11,15,.8);display:grid;place-items:center;padding:16px}
.save-box{background:var(--ivory);padding:14px;max-width:min(94vw,560px);max-height:92dvh;overflow:auto;display:grid;gap:12px;border:1px solid var(--hair2)}
.save-img{width:100%;height:auto;max-height:58dvh;object-fit:contain;background:var(--case);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.save-box p{font-size:13px;color:var(--ink2)}

/* 用語ツールチップ */
.term{border-bottom:1px dotted var(--gold-d);cursor:help;color:inherit;padding-bottom:1px;transition:background .15s}
.term:hover,.term:focus-visible{background:rgba(204,180,126,.22);outline:none}
.gtip{position:fixed;z-index:120;max-width:min(320px,calc(100vw - 20px));padding:12px 15px 13px;background:var(--ivory);color:var(--ink);border:1px solid var(--hair2);border-top:2px solid var(--gold);box-shadow:0 18px 38px -14px rgba(0,0,0,.45);font-size:13.5px;line-height:1.8;pointer-events:none}
.gtip b{display:block;font-family:var(--serif);font-size:14.5px;color:var(--gold-d);letter-spacing:.08em;margin-bottom:3px;font-weight:400}
.gtip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:10px;height:10px;background:var(--ivory);border-right:1px solid var(--hair2);border-bottom:1px solid var(--hair2);transform:translateX(-50%) rotate(45deg)}
.gtip.below{border-top:1px solid var(--hair2);border-bottom:2px solid var(--gold)}
.gtip.below::after{bottom:auto;top:-6px;border:0;border-left:1px solid var(--hair2);border-top:1px solid var(--hair2)}

/* ---- レスポンシブ ---- */
@media (max-height:640px){.plate .q{display:none}.gal{--fs:clamp(140px,34svh,300px)}}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:auto;padding:92px 22px 40px;gap:40px}
  .hero-wrap{max-width:420px}
  .hero-win{aspect-ratio:1/1.08;max-height:none}
  .gal{--fs:min(62vw,34svh)}
  .plate h3{font-size:20px}.plate .q{font-size:13.5px}
  .brand{font-size:12.5px;letter-spacing:.12em}
  .cab-btn{padding:0 10px;letter-spacing:.06em}.cab-btn span{display:none}
  .lang{padding:0 9px}
  .map{gap:12px}.map-num{display:none}
  .cor-arrow{width:40px;height:40px;font-size:15px}
  .cab-drawer>summary{grid-template-columns:1fr auto;gap:14px 18px;padding:18px}
  .cab-o{grid-column:1/-1;text-align:center}
  .cab-bar{width:64px}
  .case{padding:22px 18px 4px}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
}
@media (max-width:899px) and (orientation:portrait){
  /* スマホ（縦）：展示室全体を1枚のページとしてスクロールする。
     ケース（展示）は上に貼りつけたまま、解説の欄は下に広くとって、指で自然に送れるようにする */
  /* ページ全体（ウィンドウ）をスクロールさせる。枠の中だけをスクロールさせると、iOS で貼りついた要素の触れる位置がずれることがある */
  .viewer{position:relative;inset:auto;display:block;min-height:100svh;background:var(--paper);--sth:min(46svh,calc(100vw - 20px));--hh:58px}
  .vhead{position:sticky;top:0;z-index:7;gap:12px;padding:max(10px,env(safe-area-inset-top)) 12px 10px;background:var(--paper)}
  .back{width:38px;padding:0;justify-content:center}.back-t{display:none}
  .vt small{font-size:9.5px;letter-spacing:.2em;gap:10px}
  .vt h1{font-size:18px;letter-spacing:.1em}
  .stagewrap{position:sticky;top:var(--hh);z-index:6;height:var(--sth);margin:0 10px;--vit-frame:4px;box-shadow:0 0 0 10px var(--paper),0 10px 0 10px var(--paper),0 14px 18px 4px rgba(22,24,29,.18)}
  .dock{display:block;border-left:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .dock::before{display:none}
  .guide{margin:20px 12px 0;padding:10px 14px 10px 32px;font-size:13.5px;line-height:1.75}
  .guide::before{left:13px;top:18px;width:6px;height:6px}
  .tabs{position:sticky;top:calc(var(--hh) + var(--sth) + 10px);z-index:5;margin:10px 0 0;padding:0 12px;background:var(--paper)}
  .tabs button{padding:14px 2px 12px;font-size:13px;letter-spacing:.14em}
  .panes{overflow:visible;padding:20px 16px 18px;min-height:calc(100svh - var(--hh) - var(--sth) - 60px);background:transparent}
  .pane-ctl{gap:22px}
  .pane-txt p{font-size:14.5px;line-height:1.95}
  .relwrap{display:block;padding:16px 12px 6px}
  .seq{padding:10px 12px 14px;font-size:12.5px}
  .ctl-hint{display:none}
}
@media (max-width:899px) and (orientation:portrait) and (max-height:700px){.viewer{--sth:min(42svh,calc(100vw - 20px))}.guide{font-size:12.5px}}
/* スマホ（横）：ケースと解説を左右に並べる（PCと同じ並び。解説の欄は細めに） */
@media (max-width:899px) and (orientation:landscape){
  .viewer{grid-template-columns:minmax(0,1fr) min(340px,44vw)}
  .vhead{gap:10px;padding:max(8px,env(safe-area-inset-top)) 12px 8px}
  .back{width:36px;padding:0;justify-content:center}.back-t{display:none}
  .vt small{display:none}.vt h1{font-size:17px}
  .stagewrap{margin:0 10px 10px;--vit-frame:4px}
  .guide{margin:10px 12px 0;padding:8px 12px 8px 30px;font-size:12.5px;line-height:1.7}
  .guide::before{left:12px;top:16px;width:6px;height:6px}
  .tabs{margin:6px 12px 0}
  .panes{padding:14px 14px 12px}
  .relwrap{display:none}
  .ctl-hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* 音が流れているあいだ、スピーカーの音波がかすかに呼吸する（オンであることが目で分かるように） */
.ibtn.live svg path:nth-child(2){animation:breathe 2.6s ease-in-out infinite;transform-origin:12px 12px}
.ibtn.live{border-color:rgba(163,134,79,.55)}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.25}}

/* ---- 日本語の改行：文節の切れ目でだけ折り返す（<wbr> を挟んだ短い文） ---- */
.hero-title,.hero-catch,.hero-plate,.intro-lead,.gate h2,.gate p,.plate h3,.plate .q,.cab-lead,.cab-t,.guide,.foot-note,.next b,.next span,.vt h1,.case-h h3,.slot .nm,.slot small,.toast,.ctl-note,.rel-h{word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
@supports (word-break:auto-phrase){
  .hero-title,.hero-catch,.hero-plate,.intro-lead,.gate h2,.gate p,.plate h3,.plate .q,.cab-lead,.cab-t,.guide,.foot-note,.next b,.next span,.vt h1,.case-h h3,.slot .nm,.slot small,.toast,.ctl-note,.rel-h,.pane-txt,.legend{word-break:auto-phrase}
}
.pane-txt{text-wrap:pretty}
.intro-lead .ln,.foot-note .ln{display:block}
.gate p{max-width:24em}

/* =====================================================================
   ファーストビュー：反射池のある博物館（時刻で空と光が変わる）
   ===================================================================== */
.hero.pond{display:block;max-width:none;margin:0;padding:0;min-height:0;height:175svh;gap:0}
.pond-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;background:#0b0c10;touch-action:manipulation;--fly:0}
.pond-gl,.pond-fx{position:absolute;inset:0;width:100%;height:100%;display:block;transform:scale(calc(1 + var(--fly) * 1.9));transform-origin:var(--door-x,60%) var(--door-y,50%);will-change:transform}
.pond-text{position:absolute;left:clamp(22px,6vw,96px);top:clamp(96px,15svh,150px);z-index:3;max-width:min(560px,44vw);opacity:calc(1 - var(--fly) * 2.6);pointer-events:none;transition:color .6s}
.pond-text a{pointer-events:auto}
.pond-text .hero-title{font-size:clamp(36px,5.2vw,74px)}
.pond-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:calc(var(--scrim,.5) * (1 - var(--fly) * 2.4));transition:opacity .8s;
  background:radial-gradient(ellipse 46% 58% at 19% 38%,rgba(8,11,18,.62),rgba(8,11,18,.34) 48%,rgba(8,11,18,0) 76%),linear-gradient(90deg,rgba(8,11,18,.38),rgba(8,11,18,0) 46%),linear-gradient(180deg,rgba(8,11,18,.32),rgba(8,11,18,0) 18%)}
.pond-text{color:#f6f2e8;text-shadow:0 0 1px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.45),0 2px 24px rgba(0,0,0,.45)}
.pond-text .hero-kicker{color:#e6cf98}
.pond-text .hero-catch::before{background:#e6cf98}
.pond-text .hero-go{background:rgba(10,13,20,.55);color:#f6f2e8;text-shadow:none;box-shadow:inset 0 0 0 1px rgba(230,207,152,.75),0 10px 30px -12px rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pond-text .hero-go:hover{background:rgba(10,13,20,.72)}
.pond-hint{position:absolute;left:50%;bottom:15%;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;transition:opacity .9s;opacity:calc(1 - var(--fly) * 3)}
.pond-hint i{width:46px;height:18px;border:1px solid rgba(255,250,235,.75);border-radius:50%;animation:hintRing 3.2s ease-out infinite}
.pond-hint span{font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:#f6f2e8;padding:7px 10px 7px 16px;border-radius:999px;background:rgba(10,13,20,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pond-hint i{border-color:rgba(255,250,235,.9);box-shadow:0 0 0 1px rgba(10,13,20,.25)}
.pond-stage.touched .pond-hint{opacity:0}
@keyframes hintRing{0%{transform:scale(.4);opacity:0}25%{opacity:1}100%{transform:scale(2.2);opacity:0}}
.pond-veil{position:absolute;inset:0;z-index:4;background:var(--paper);opacity:calc((var(--fly) - .55) * 2.3);pointer-events:none}
/* 池の上ではヘッダーの白い帯を消し、暗い空では文字を象牙色に */
.bar.on-pond::before{opacity:0}
.bar::before{transition:opacity .4s}
.bar.on-dark .brand{color:#f3efe4}
.bar.on-dark .cab-btn,.bar.on-dark .ibtn,.bar.on-dark .lang{color:#f3efe4;background:rgba(10,12,18,.25);border-color:rgba(243,239,228,.35)}
.bar.on-dark .cab-btn i,.bar.on-dark .lang{color:rgba(243,239,228,.7)}
.bar.on-dark .lang .on{color:#fff}
.bar.on-dark .cab-btn b{color:#d9c08a}
@media (max-width:860px){
  .pond-text{left:20px;right:20px;top:84px;max-width:none}
  .pond-scrim{background:linear-gradient(180deg,rgba(8,11,18,.55),rgba(8,11,18,.42) 30%,rgba(8,11,18,.12) 46%,rgba(8,11,18,0) 54%)}
  .pond-text .hero-title{font-size:clamp(30px,8.6vw,44px)}
  .pond-text .hero-catch{margin-top:18px;padding-top:16px}
  .pond-text .hero-go{margin-top:20px;padding:12px 20px}
  .pond-hint{bottom:12%}
}
@media (max-height:620px){.pond-text{top:74px}.pond-text .hero-title{font-size:clamp(28px,4.4vw,52px)}.pond-text .hero-go{margin-top:18px}}

/* 発見の標本カード：中央から標本箱（右上）へ */
.spec-card{position:fixed;z-index:80;width:150px;padding:6px 6px 8px;background:#fbf7ec;border:1px solid #ccb47e;box-shadow:0 18px 30px -14px rgba(0,0,0,.55);transform:scale(.6);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s,left 1.2s cubic-bezier(.7,0,.25,1) .9s,top 1.2s cubic-bezier(.7,0,.25,1) .9s;pointer-events:none}
.spec-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border:2px solid #121419}
.spec-card span{display:block;margin-top:5px;font-family:var(--serif);font-size:12px;letter-spacing:.1em;color:#16181d;text-align:center}
.spec-card.go{transform:scale(1);opacity:1;animation:cardAway 2.4s forwards}
@keyframes cardAway{0%,40%{opacity:1}100%{opacity:0;transform:translate(calc(100vw - 50vw),-45vh) scale(.25) rotate(8deg)}}
/* 初めての方へのおすすめ */
.first-pick{margin-left:12px;font-style:normal;font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;color:var(--gold-d);border:1px solid rgba(163,134,79,.55);padding:1px 7px;vertical-align:2px}
/* 触る場所を示す金色の波紋（3回だけ、ゆっくり） */
.touch-ring{position:absolute;z-index:4;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(220,190,120,.95);border-radius:50%;pointer-events:none;animation:touchRing 1.8s ease-out 3}
@keyframes touchRing{0%{transform:scale(.5);opacity:0}25%{opacity:1}100%{transform:scale(2.4);opacity:0}}