/* イマジンノート（2026-10-26）
   夜のテーマパーク：ショーの舞台・ゲート・世界の頭は暗い色。本文は読みやすい明るい紙の色（文字 #374151・補足 #4b5563・15px 以上）。
   文章を枠線＋角丸の箱に入れない・左の色の帯を付けない（区切りは線1本と余白。種類の違いは札）。動きの初期値は完成状態。 */
:root{
  --night:#0b0d1f; --night2:#141838; --ink:#374151; --sub:#4b5563; --line:#e5e7eb; --paper:#fbfaf7;
  --fact:#0e7490; --guess:#b45309; --imagine:#7c3aed; --glow:#5eead4; --violet:#a78bfa; --gold:#fbbf24;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.85 system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:#4338ca}
a:hover{color:#312e81}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:20}

/* ヘッダー（夜の色） */
.site-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:rgba(11,13,31,.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand img{width:40px;height:40px;border-radius:8px}
.brand__name{display:flex;flex-direction:column;line-height:1.2}
.brand__en{font-family:Georgia,"Times New Roman",serif;font-size:20px;letter-spacing:.06em}
.brand__ja{font-size:15px;color:#c7d2fe;letter-spacing:.2em}
.site-nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.site-nav a{color:#e0e7ff;text-decoration:none;font-size:15px;font-weight:700;padding:6px 10px}
.site-nav a[aria-current="page"],.site-nav a:hover{color:var(--glow)}

/* ショーの舞台 */
.stage{position:relative;min-height:min(78vh,720px);background:radial-gradient(ellipse at 50% 120%,#1e1b4b 0,var(--night) 60%);overflow:hidden;color:#fff}
.stage--full{min-height:calc(100vh - 61px)}
.stage__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity 1.2s}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,31,.9) 0,rgba(11,13,31,.2) 55%,rgba(11,13,31,0) 100%);pointer-events:none}
.stage__canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;z-index:1}
.stage__info{z-index:2}
.stage.is-show .stage__poster{opacity:0}
.stage__info{position:absolute;left:16px;right:16px;bottom:24px;max-width:560px;text-shadow:0 2px 12px rgba(0,0,0,.6);pointer-events:none}
.stage__eyebrow{margin:0;font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--gold)}
.stage__title{margin:.2em 0;font-size:clamp(24px,4.4vw,40px);font-weight:800;line-height:1.3}
.stage__msg{margin:0;font-size:16px;color:#e0e7ff}
.stage__hint{margin:.4em 0 0;font-size:15px;color:#a5b4fc}
.stage.is-show .stage__msg{color:#fff}
.stage__start{pointer-events:auto;margin-top:14px;font:inherit;font-size:16px;font-weight:800;color:#0b0d1f;background:var(--glow);border:0;border-radius:999px;padding:11px 26px;cursor:pointer;box-shadow:0 0 24px rgba(94,234,212,.45)}
.stage__start:hover{background:#99f6e4}
.stage__start:focus-visible{outline:3px solid #fff;outline-offset:3px}
.stage__start[hidden]{display:none}

/* 光の部屋（試作・/lab/room/）。画面いっぱいの 3D の部屋 */
.room{position:relative;height:100vh;height:100svh;min-height:480px;background:#020309;overflow:hidden;color:#fff}
/* 2026-10-26 カツ「ヘッダーやフッターもそのままなのに透過されたり、映像に合う装飾に」：部屋のページでは映像の上に重ね、光の線を引く。驚きの場面（is-wow）で光を強く */
.is-room{background:#020309}
.is-room .site-head{position:fixed;left:0;right:0;top:0;background:linear-gradient(to bottom,rgba(2,3,9,.62),rgba(2,3,9,0));border-bottom:0;backdrop-filter:none}
.is-room .site-head::after{content:"";position:absolute;left:5%;right:5%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(94,234,212,.55),rgba(167,139,250,.55),transparent);opacity:.45;transition:opacity .6s,box-shadow .6s}
.is-room .brand,.is-room .site-nav a{text-shadow:0 0 12px rgba(94,234,212,.45)}
.is-room .site-foot{background:linear-gradient(to bottom,#020309,#06071a);position:relative;transition:opacity 1.2s ease}
/* ショーの間：画面いっぱい・スクロールしない・フッターはフェードアウト（html に is-showing） */
.is-showing,.is-showing body{overflow:hidden;height:100%;overscroll-behavior:none}
.is-showing .site-foot{opacity:0;pointer-events:none}
/* 2026-10-26 カツ「スタートと同時にフッターが隠れて映像だけの世界に」：ヘッダーも消し、スクロールバーも出さない。左下の案内は5秒で消える */
.is-room .site-head{transition:opacity 1.2s ease}
.is-showing .site-head{opacity:0;pointer-events:none}
.is-showing{scrollbar-width:none}.is-showing::-webkit-scrollbar{display:none}
.room.is-playing .room__info{transition:opacity 1.5s ease}
.room.is-quiet .room__info{opacity:0}
.theater__ctrl{position:absolute;top:14px;right:14px;z-index:4;display:flex;gap:8px}
.theater__stop{font:inherit;font-size:15px;font-weight:700;color:#e0e7ff;background:rgba(2,3,9,.45);border:1px solid rgba(224,231,255,.4);border-radius:999px;padding:7px 16px;cursor:pointer;opacity:.15;transition:opacity .4s}
.theater__stop[hidden]{display:none}
.room.is-active .theater__stop,.theater__stop:hover,.theater__stop:focus-visible{opacity:1}
@media(hover:none){.theater__stop{opacity:.85}}
.is-room .site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(251,191,36,.6),rgba(94,234,212,.6),transparent);opacity:.5;transition:opacity .6s,box-shadow .6s}
.is-room.is-wow .site-head::after,.is-room.is-wow .site-foot::before{opacity:1;box-shadow:0 0 18px 2px rgba(94,234,212,.7)}
.is-room.is-wow .brand__en{text-shadow:0 0 18px rgba(167,139,250,.9)}
.room__gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.room__info{position:absolute;left:16px;bottom:20px;z-index:2;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.room__info{display:none}
/* ストーリーの言葉（画面の下3分の1の真ん中・日本語の下に英語）。出るときと消えるときは JS が is-in を付け外しする */
/* ストーリーは「光でできた文字」（擬音は 2026-10-26 にやめた）（2026-10-26 カツ「文字も映像になじむ…奥から出てきたり、漫画の擬音みたいな見た目に」→
   「ぽっぷだと可愛くなってしまうので、カッコイイ・幻想的な文字の見た目に」）。明朝（しっぽり明朝 B1・OFL・使う字だけ bin/文字を作る.py）に光のにじみ。
   1字ずつ奥からぼやけて近づき、一瞬強く光って落ち着く。終わると光の粉のように上へほどけて消える。跳ねる動き・濃い縁取りは使わない（可愛く見えるため） */
@font-face{font-family:"ShowLetter";src:url(/assets/font/show.woff2) format("woff2");font-display:swap}
.story{position:absolute;left:16px;right:16px;bottom:15%;z-index:2;margin:0;text-align:center;pointer-events:none;--tone:#a5f3fc;--toneB:#818cf8}
.story[data-tone=intro]{--tone:#fde68a;--toneB:#a78bfa}
.story[data-tone=mars]{--tone:#fdba74;--toneB:#f43f5e}
.story[data-tone=neptune]{--tone:#a5f3fc;--toneB:#818cf8}
.story[data-tone=lake]{--tone:#a7f3d0;--toneB:#e879f9}
.story[data-tone=finale]{--tone:#fbcfe8;--toneB:#fde68a}
.story__ja{display:block;font-size:clamp(22px,3.3vw,38px);line-height:1.6;perspective:700px;text-wrap:balance}   /* 長い行で1〜2字だけ次の行に残らないように */
.story .ch{display:inline-block;font-family:"ShowLetter","Yu Mincho","Hiragino Mincho ProN",serif;font-weight:700;opacity:0}
/* 光は控えめに（2026-10-26 カツ「字幕眩しすぎる・もう少し輝きを抑えて」）：白い芯の光をやめ、色の光を半分の濃さにし、読みやすさのための暗い影を足す */
.story .ch{letter-spacing:.14em;color:#eef2f7;text-shadow:0 1px .2em rgba(0,0,0,.9),0 0 .45em color-mix(in srgb,var(--tone) 40%,transparent),0 0 1.1em color-mix(in srgb,var(--toneB) 25%,transparent)}
.story .ch.is-em{font-size:1.32em;color:color-mix(in srgb,var(--tone) 80%,#fff);text-shadow:0 1px .2em rgba(0,0,0,.9),0 0 .45em color-mix(in srgb,var(--tone) 45%,transparent),0 0 1.3em color-mix(in srgb,var(--toneB) 30%,transparent)}
.story__en{display:block;text-wrap:balance;margin-top:10px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(15px,1.6vw,18px);letter-spacing:.16em;color:#d9e0ea;text-shadow:0 1px 6px rgba(0,0,0,.95),0 0 14px color-mix(in srgb,var(--toneB) 30%,transparent)}
.story__en .w{display:inline-block;white-space:pre;opacity:0}
.story.is-in .ch{animation:chIn 1.4s cubic-bezier(.16,1,.3,1) calc(var(--i)*60ms) both}
.story.is-in .w{animation:wIn 1.2s cubic-bezier(.16,1,.3,1) calc(var(--i)*60ms + 200ms) both}
.story.is-out .ch{animation:chOut 1.1s ease-in calc(var(--i)*25ms) both}
.story.is-out .w{animation:wOut .8s ease-in both}
@keyframes chIn{0%{opacity:0;transform:translateZ(-700px) translateY(var(--y)) rotate(var(--r));filter:blur(14px) brightness(1)}45%{opacity:1;filter:blur(2px) brightness(1.4)}100%{opacity:1;transform:none;filter:blur(0) brightness(1)}}
@keyframes chOut{0%{opacity:1;transform:none;filter:blur(0) brightness(1)}35%{filter:blur(1px) brightness(1.3)}100%{opacity:0;transform:translate(calc(var(--dx)*.4),-46px) scale(1.15);filter:blur(12px) brightness(1.2)}}
@keyframes wIn{0%{opacity:0;letter-spacing:.5em;filter:blur(8px)}100%{opacity:1;filter:blur(0)}}
@keyframes wOut{to{opacity:0;filter:blur(8px)}}
@media (prefers-reduced-motion:reduce){.story.is-in .ch,.story.is-in .w{animation:wIn .4s ease-out both}}
.room.is-playing .room__info{display:block}
/* ショーの始まりと終わりの幕（画面の真ん中・暗がりの上） */
.theater__start,.theater__end{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px;background:radial-gradient(ellipse at 50% 60%,rgba(30,27,75,.55),rgba(2,3,9,.92))}
.theater__start[hidden],.theater__end[hidden]{display:none}
/* 終わったら映像・字幕を消す（2026-10-27 カツ） */
.room__gl,.room .story,.room .pages{transition:opacity 2s ease}
.room.is-ended .room__gl,.room.is-ended .story,.room.is-ended .pages,.room.is-ended .room__info{opacity:0}
.room.is-ended .theater__end{background:#020309}
/* 始める前のショー時間（2026-10-27 カツ「開始前にショー時間（約●分）」） */
.theater__time{margin:0 0 14px;font-size:17px;font-weight:700;letter-spacing:.1em;color:#fde68a}
.theater__time b{font-size:1.5em;margin-left:.3em}
.theater__h{margin:.2em 0;font-size:clamp(28px,5vw,48px);font-weight:800;text-shadow:0 0 28px rgba(167,139,250,.7)}
/* 終わりの題名は英語を大きく、カタカナを小さく（2026-10-26 カツ） */
.theater__en{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(40px,7vw,76px);letter-spacing:.06em;line-height:1.1}
.theater__ja{display:block;margin-top:.5em;font-size:16px;font-weight:700;letter-spacing:.4em;color:#c7d2fe}
.theater__lead{max-width:640px;margin:0 0 20px;font-size:16px;color:#e0e7ff}
.theater__btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;margin:0}
.theater__btns .stage__start,.theater__btns .theater__mute{margin:0;display:inline-flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;line-height:1.4;padding-top:0;padding-bottom:0}
.theater__mute{font:inherit;font-size:16px;font-weight:700;color:#e0e7ff;background:transparent;border:1px solid rgba(224,231,255,.5);border-radius:999px;padding:10px 22px;cursor:pointer;text-decoration:none}
.theater__mute:hover{border-color:var(--glow);color:var(--glow)}

/* はじめに */
.intro{padding:48px 16px 8px}
.intro__h{margin:0;font-size:clamp(26px,4.6vw,42px);line-height:1.35;font-weight:800;color:#111827}
.intro__lead{max-width:760px;font-size:17px;color:var(--ink)}
.howto{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.howto li{display:flex;align-items:center;gap:12px;font-size:16px}
.howto--small{margin:28px 0 8px}
@media(min-width:760px){.howto{grid-template-columns:repeat(3,1fr)}.howto li{align-items:flex-start;flex-direction:column;gap:6px}}

/* 札（事実・推測・想像） */
.badge{display:inline-block;flex:none;font-size:15px;font-weight:800;line-height:1;padding:7px 12px;border-radius:999px;color:#fff;letter-spacing:.04em}
.badge--fact{background:var(--fact)}.badge--guess{background:var(--guess)}.badge--imagine{background:var(--imagine)}

/* ゲート（世界の入口） */
.sec-h{font-size:clamp(22px,3.4vw,30px);margin:56px 0 18px;color:#111827}
.gates{padding-bottom:16px}
.gates__list{display:grid;gap:28px}
@media(min-width:760px){.gates__list{grid-template-columns:repeat(3,1fr)}}
.gate{display:block;text-decoration:none;color:var(--ink);perspective:900px}
.gate__ph{display:block;overflow:hidden;border-radius:6px;background:var(--night);aspect-ratio:16/10;transform-style:preserve-3d}
.gate__ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gate:hover .gate__ph img{transform:scale(1.05)}
.gate__body{display:block;padding-top:12px}
.gate__kind{display:block;font-size:15px;font-weight:700;color:var(--imagine)}
.gate__title{display:block;font-size:19px;font-weight:800;line-height:1.5;color:#111827;margin:2px 0 6px}
.gate__card{display:block;font-size:15px;color:var(--sub)}
.about-short{padding-bottom:56px}
.about-short p{max-width:780px}
.more{font-weight:800}

/* 世界のページの頭 */
.world-hero{position:relative;color:#fff;background:var(--night);min-height:min(70vh,640px);display:flex;align-items:flex-end}
.world-hero__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,31,.95) 0,rgba(11,13,31,.55) 45%,rgba(11,13,31,.05) 100%)}
.world-hero__in{position:relative;z-index:1;padding-top:120px;padding-bottom:36px;width:100%}
.world-hero .crumbs,.world-hero .crumbs a{color:#c7d2fe}
.world-hero__kind{margin:0;font-weight:800;color:var(--gold);font-size:15px;letter-spacing:.1em}
.world-hero__h{margin:.2em 0 .4em;font-size:clamp(26px,4.4vw,44px);line-height:1.35;font-weight:800;max-width:900px}
.world-hero__lead{max-width:820px;font-size:17px;color:#e0e7ff;margin:0}
.world-hero__meta{font-size:15px;color:#c7d2fe;margin:14px 0 0}
.world-hero__meta a{color:#c7d2fe}
.crumbs{font-size:15px;color:var(--sub);margin:0 0 10px}
.crumbs a{color:inherit}

/* 本文のまとまり（区切りは上の線1本と余白） */
.world__body{padding-bottom:56px}
.block{border-top:1px solid var(--line);padding:32px 0 8px;margin-top:28px}
.block__h{display:flex;align-items:center;gap:12px;font-size:clamp(21px,3vw,27px);margin:0 0 16px;color:#111827}
.facts{margin:0;padding-left:1.2em}
.facts li{margin:0 0 12px;font-size:17px}
.src{font-size:15px;margin-left:4px;white-space:nowrap}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:1fr;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.steps__from{font-size:15px;font-weight:700;color:var(--fact)}
.steps__arrow{display:none}
.steps__to{font-size:17px}
@media(min-width:760px){.steps li{grid-template-columns:minmax(220px,1fr) 32px 2.4fr;align-items:baseline}.steps__arrow{display:block;color:var(--guess);font-weight:800;text-align:center}}
.scene{margin:0 0 28px}
.scene img{border-radius:6px;width:100%}
.scene figcaption{font-size:16px;padding-top:10px}
.scene figcaption strong{display:block;font-size:18px;color:#111827}
.ai{display:block;font-size:15px;color:var(--sub);margin-top:4px}
.sub-h{font-size:20px;margin:36px 0 14px;color:#111827}
.creatures{display:grid;gap:28px}
@media(min-width:760px){.creatures{grid-template-columns:repeat(3,1fr)}}
.creature img{border-radius:6px;aspect-ratio:1/1;object-fit:cover;width:100%;background:var(--night)}
.creature__name{font-size:19px;margin:12px 0 4px;color:var(--imagine)}
.creature p{margin:0 0 8px;font-size:16px}
.creature__from{font-size:15px;color:var(--sub)}
.others{margin:0;padding-left:1.2em}.others li{margin-bottom:10px}
.faq dt{font-weight:800;color:#111827;margin-top:14px}
.faq dd{margin:4px 0 0}
.sources{padding-left:1.4em}.sources li{margin-bottom:8px;font-size:16px}
.note{font-size:15px;color:var(--sub)}
.next-gate{display:block;margin-top:40px;padding:26px 20px;background:var(--night);color:#fff;text-decoration:none;border-radius:6px}
.next-gate span{display:block;font-size:15px;color:var(--gold);font-weight:800;letter-spacing:.1em}
.next-gate strong{display:block;font-size:20px;line-height:1.5;margin-top:4px}
.next-gate:hover strong{color:var(--glow)}

/* ふつうのページ */
.page{padding-top:32px;padding-bottom:64px}
.page-h{font-size:clamp(26px,4vw,38px);margin:0 0 14px;color:#111827;line-height:1.4}
.page-lead{font-size:17px;max-width:780px}
.prose{max-width:860px}
.prose h2{font-size:22px;margin:36px 0 10px;color:#111827;border-top:1px solid var(--line);padding-top:24px}
.prose ul li{margin-bottom:10px}
.show-about{max-width:860px}
.show-acts{padding-left:1.3em}.show-acts li{margin-bottom:10px}
/* イマジンシアターの一覧（/show/・2026-10-27）。箱で囲まない：絵の下に文字を並べるだけ */
.theaters{max-width:1100px}
.theater-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:36px}
@media (min-width:760px){.theater-list{grid-template-columns:1fr 1fr;gap:44px 32px}}
.theater-list a{display:block;color:inherit;text-decoration:none}
.theater-list img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;transition:filter .3s}
.theater-list a:hover img,.theater-list a:focus-visible img{filter:brightness(1.15)}
.theater-list__meta{display:block;margin-top:12px;font-size:15px;color:#4338ca}
.theater-list__title{display:block;margin-top:4px;font-size:22px;font-weight:700;line-height:1.5}
.theater-list a:hover .theater-list__title{text-decoration:underline;text-underline-offset:4px}
.theater-list__lead{display:block;margin-top:6px;font-size:15px;line-height:1.8;color:#334155}
.theater-list__note{margin-top:36px;font-size:15px;color:#92400e}

/* フッター */
.site-foot{background:var(--night);color:#c7d2fe;margin-top:0}
.site-foot__in{max-width:var(--wrap);margin:0 auto;padding:36px 16px 44px;font-size:15px}
.site-foot__brand{font-size:18px;color:#fff;font-weight:800;margin:0 0 6px}
.site-foot__note{margin:0 0 14px}
.site-foot__nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:14px}
.site-foot a{color:#e0e7ff}
.site-foot__op,.site-foot__copy{margin:6px 0 0}

@media(max-width:520px){.site-head{flex-wrap:wrap;row-gap:4px}.brand__ja{display:none}.brand__en{font-size:18px;white-space:nowrap}.brand img{width:34px;height:34px}
  .site-nav{gap:0}.site-nav a{padding:4px 7px}}
@media(max-width:380px){.site-nav{width:100%;justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.gate__ph img{transition:none}}
/* 取り戻したページの印（左上・3枚）。取り戻すと光る（2026-10-26 ストーリー案「失くしたページ」） */
.pages{position:absolute;top:16px;left:16px;z-index:4;display:flex;gap:10px;margin:0;padding:0;list-style:none;pointer-events:none}
.pages[hidden]{display:none}
.pages li{width:26px;height:34px;border:1px solid rgba(224,231,255,.35);background:rgba(224,231,255,.04);transition:background .6s,box-shadow .6s,border-color .6s}
.pages li span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pages li.is-got{border-color:#fde68a;background:linear-gradient(160deg,rgba(253,230,138,.9),rgba(94,234,212,.7));box-shadow:0 0 14px rgba(253,230,138,.8),0 0 30px rgba(94,234,212,.5)}
/* はじめの画面：音あり・なしの切り替えと、続きの注意書き（2026-10-26） */
.theater__sound{display:inline-flex;margin:0 0 18px;border:1px solid rgba(224,231,255,.45);border-radius:999px;padding:3px}
.theater__sound button{font:inherit;font-size:15px;font-weight:700;color:#c7d2fe;background:transparent;border:0;border-radius:999px;padding:7px 20px;cursor:pointer}
.theater__sound button[aria-pressed=true]{color:#0b0d1f;background:#e0e7ff}
.theater__btns [hidden]{display:none}
.theater__note{max-width:560px;margin:18px 0 0;font-size:15px;line-height:1.7;color:#a5b4fc}
/* 光の点滅の注意書き（全作品・2026-10-27）。目立たせすぎず、はじめるボタンの前に読める位置 */
.theater__caution{max-width:560px;margin:0 0 16px;font-size:15px;line-height:1.7;color:#fde68a}
/* はじめの画面は上のヘッダーの下から。高さが足りない画面（スマホの横向き）では中で縦に流す（2026-10-27 注意書きを足して見出しがヘッダーに重なった） */
.theater__start{padding:84px 16px 24px;overflow-y:auto;justify-content:safe center}
/* コースター版の確認（④⑤・2026-10-27）。箱で囲まない。チェックするまで始めるボタンは押せない */
.theater__ride{max-width:560px;margin:0 0 18px;text-align:left;font-size:15px;line-height:1.7;color:#e0e7ff}
.theater__ride[hidden]{display:none}
.theater__ride p{margin:0 0 6px}
.theater__ride ul{margin:0 0 10px;padding-left:1.3em;color:#fde68a}
.theater__ride label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:700}
.theater__ride input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:#5eead4}
.theater__btns button:disabled{opacity:.4;cursor:not-allowed}
/* 「暗い部屋」の部屋の言葉（声なし・字幕だけ）：光らせず、冷たい白の細い字で */
.story.is-other .ch,.story.is-other .ch.is-em{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;font-weight:400;font-size:1em;letter-spacing:.32em;color:#e7e5e4;text-shadow:0 1px .25em rgba(0,0,0,.9)}
/* スマホの横向き（高さが低い画面）：ショー中は部屋をちょうど画面の高さに（min-height:480px で画面より高くなり、字幕の下が見切れた）。
   字幕は高さに合わせて小さめ・下寄せ・左右に広げて行数を減らす（2026-10-27 カツ「SP横向きの時に字幕見切れる」） */
html.is-showing .room{min-height:0}
@media (orientation:landscape) and (max-height:500px){
  .story{bottom:5%;left:6%;right:6%}
  .story__ja{font-size:clamp(17px,5.4vh,24px);line-height:1.45}
  .story__en{font-size:15px;margin-top:4px;letter-spacing:.08em}
}
/* 案内役のソウとイマ（このサイトについて・2026-10-27） */
.guides{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0 8px}
.guide{margin:0}
.guide img{display:block;width:100%;height:auto}
.guide figcaption{margin-top:10px;font-size:16px;line-height:1.8}
.guide__name{display:block;font-size:18px;margin-bottom:2px}
@media (max-width:640px){.guides{grid-template-columns:1fr}}
h2[id]{scroll-margin-top:84px}   /* ページ内リンクで見出しが上の帯に隠れないように */

/* トップの島の地図（2026-10-28 カツ「島の地図のトップ」）。絵の上に、押せる島の名前を重ねる。文字は箱に入れず、光と影で読ませる */
.isles{position:relative;background:#0a0c22;color:#fff;padding:0 0 14px}
.isles__h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.isles__view{position:relative;overflow:hidden}
.isles__map{position:relative;width:100%;aspect-ratio:16/9;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.isles__img{width:100%;height:100%;object-fit:cover}
.isles__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.isles__view::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(to top,#0a0c22,rgba(10,12,34,0));pointer-events:none}
.isle{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%);text-align:center;text-decoration:none;color:#fff;
  text-shadow:0 0 12px rgba(10,12,34,.95),0 2px 6px rgba(0,0,0,.9);padding:6px 8px 26px;white-space:nowrap}
.isle__name{order:1;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:700;font-size:clamp(17px,1.7vw,24px);letter-spacing:.12em}
.isle__sub{order:2;font-size:15px;color:#e0e7ff;letter-spacing:.04em;opacity:.95}
.isle__pin{position:absolute;left:50%;bottom:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fde68a;box-shadow:0 0 0 4px rgba(253,230,138,.25),0 0 18px 6px rgba(253,230,138,.55)}
.isle__pin::after{content:"";position:absolute;left:50%;bottom:14px;width:1px;height:12px;background:linear-gradient(to top,rgba(253,230,138,.8),rgba(253,230,138,0))}
a.isle:hover .isle__name,a.isle:focus-visible .isle__name{color:#fde68a}
a.isle:hover .isle__pin,a.isle:focus-visible .isle__pin{transform:scale(1.25)}
.isle.is-closed{color:#cbd5e1}.isle.is-closed .isle__pin{background:#cbd5e1;box-shadow:0 0 14px 4px rgba(203,213,225,.4)}
.isle--theater{left:51%;top:30%}.isle--worlds{left:30%;top:43%}.isle--lighthouse{left:70%;top:27%}.isle--orca{left:88%;top:46%}.isle--mist{left:10%;top:37%}   /* 島の位置（絵 top-map に対する割合） */
.isle--theater .isle__name{font-size:clamp(20px,2.2vw,30px)}
@media (prefers-reduced-motion:no-preference){
  .isle__pin{animation:islePulse 2.6s ease-in-out infinite}
  .isle--worlds .isle__pin{animation-delay:.5s}.isle--lighthouse .isle__pin{animation-delay:1s}.isle--orca .isle__pin{animation-delay:1.5s}.isle--mist .isle__pin{animation-delay:2s}
}
@keyframes islePulse{0%,100%{box-shadow:0 0 0 4px rgba(253,230,138,.25),0 0 18px 6px rgba(253,230,138,.55)}50%{box-shadow:0 0 0 10px rgba(253,230,138,0),0 0 28px 10px rgba(253,230,138,.8)}}
.isles__hint{margin:4px 16px 0;font-size:15px;color:#c7d2fe;text-align:center}
.isles__sp{display:none}
/* スマホ：地図を横に広く（高さ 64svh）取り、指で左右に動かす。最初は劇場の島を真ん中に（map.js） */
@media (max-width:760px){
  .isles__view{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .isles__view::-webkit-scrollbar{display:none}
  .isles__map{width:auto;height:min(64svh,560px);aspect-ratio:16/9}
  .isles__view::after{position:sticky;display:none}
  .isles__sp{display:inline}
}
/* 3Dの島（2026-10-28 カツ「three.js で3Dに」）。描けたら .isles に is-3d が付き、平らな絵と粒を消して canvas を見せる。名前の位置は isles3d.js が px で入れる */
.isles__gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;z-index:1}
.isles.is-3d .isles__img,.isles.is-3d .isles__fx{opacity:0}
.isles.is-3d .isles__map{width:100%;aspect-ratio:auto;height:min(88svh,56.25vw);min-height:420px}
.isles.is-3d .isles__view{overflow:hidden}
.isles.is-3d .isles__view::after{display:block;height:10%}
.isles.is-3d .isle{transition:none}
.isle.is-hover .isle__name{color:#fde68a}.isle.is-hover .isle__pin{transform:scale(1.25)}
.isles__drag{display:none}.isles.is-3d .isles__drag{display:inline}.isles.is-3d .isles__sp{display:none}
html.no-webgl .isles__gl{display:none}
@media (max-width:760px){.isles.is-3d .isles__map{height:78svh;width:100%}}
/* 平らな地図（WebGL が無いとき）の5つのエリアの位置（絵 top-map に対する割合） */
.isle--home{left:30%;top:43%}.isle--media{left:10%;top:37%}.isle--contact{left:88%;top:46%}
.isle--about{left:70%;top:27%}
@media (max-width:760px){.isles.is-3d .isle__sub{display:none}.isles.is-3d .isle__name{font-size:17px}}
.isles__areas{display:none}
@media (max-width:760px){.isles__areas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 16px 0}
  .isles__areas a{color:#e0e7ff;text-decoration:none;font-size:15px;font-weight:700;padding:8px 14px;border-radius:999px;background:rgba(167,139,250,.18)}
  .isles.is-3d .isles__map{height:70svh}}
.isles.is-3d .isles__view{touch-action:pan-y}.isles.is-3d .isle{touch-action:pan-y}
/* 平らな地図（WebGL が無いとき）の名前の位置＝3Dを撮った絵 top-map3d の上の、3Dと同じ位置（2026-10-28 撮った） */
.isle--home{left:30.6%;top:76.4%}.isle--media{left:15.7%;top:58.2%}.isle--theater{left:50%;top:44.6%}.isle--about{left:80.1%;top:46.7%}.isle--contact{left:70.3%;top:64.7%}
/* トップは1画面（2026-10-28 カツ「トップページはスクロールしなくていい」）：ヘッダーの下を全部、島の地図に。フッターは出さず、隅に運営とプライバシーポリシー */
body.is-top{height:100vh;height:100svh;display:flex;flex-direction:column;overflow:hidden}
body.is-top main{flex:1;min-height:0;position:relative;background:#0a0c22}
body.is-top .site-foot{display:none}
body.is-top .isles{position:absolute;inset:0;padding:0;display:flex;flex-direction:column}
body.is-top .isles__view{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
body.is-top .isles__view::-webkit-scrollbar{display:none}
body.is-top .isles__view::after{display:none}
body.is-top .isles__map{height:100%;width:auto;aspect-ratio:1600/909;margin:0 auto;min-height:0}   /* 平らな地図（3Dの前・WebGL なし）は高さいっぱい・横は動かせる */
body.is-top .isles.is-3d .isles__view{overflow:hidden}
body.is-top .isles.is-3d .isles__map{width:100%;height:100%;aspect-ratio:auto}
body.is-top .isles__hint{position:absolute;right:16px;bottom:10px;margin:0;font-size:15px;text-align:right;z-index:3;text-shadow:0 1px 6px #000;pointer-events:none}
.top-cap{position:absolute;left:16px;bottom:14px;z-index:3;max-width:min(520px,42vw);color:#fff;text-shadow:0 0 14px rgba(10,12,34,.95),0 2px 6px rgba(0,0,0,.9);pointer-events:none}
.top-cap a{pointer-events:auto;color:#c7d2fe}
.top-cap__h{margin:0;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(20px,2vw,28px);line-height:1.4;letter-spacing:.06em}
.top-cap__lead{margin:6px 0 0;font-size:15px;line-height:1.7;color:#e0e7ff}
.top-cap__badges{margin:6px 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:15px;color:#c7d2fe}
.top-cap__foot{margin:8px 0 0;font-size:15px;color:#a5b4fc}
@media (max-width:760px){
  .top-cap{left:12px;right:12px;bottom:auto;top:10px;max-width:none}
  .top-cap__h{font-size:18px}
  .top-cap__lead,.top-cap__badges{display:none}
  .top-cap__foot{position:fixed;left:0;right:0;bottom:6px;text-align:center;margin:0}
  body.is-top .isles__hint{display:none}
  body.is-top .isles__areas{position:absolute;left:0;right:0;bottom:34px;z-index:3;margin:0 12px}
  body.is-top .isles.is-3d .isles__map{height:100%}
}
/* 2026-10-28 直し：PC の説明は空の左上へ（左下だと島に重なった）・スマホのボタンは1行で横に流す・1px のはみ出しを止める */
html:has(> body.is-top){overflow:hidden}
.top-cap{bottom:auto;top:18px}
.top-cap__foot{position:absolute;left:0;top:auto;bottom:auto;white-space:nowrap}
body.is-top .top-cap__foot{position:fixed;left:16px;bottom:10px;z-index:3}
@media (max-width:760px){
  .top-cap{top:10px}
  body.is-top .top-cap__foot{left:0;right:0;bottom:6px;text-align:center}
  .top-cap__sister{display:none}
  body.is-top .isles__areas{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;bottom:36px;margin:0;padding:0 12px}
  body.is-top .isles__areas::-webkit-scrollbar{display:none}
  body.is-top .isles__areas a{flex:none}
}
/* 平らな地図の名前の位置（2026-10-28 カメラを下げて撮り直した top-map3d に合わせた） */
.isle--home{left:31.4%;top:63.9%}.isle--media{left:16.8%;top:49.6%}.isle--theater{left:50%;top:37.2%}.isle--about{left:79.1%;top:38%}.isle--contact{left:69.4%;top:53.1%}

/* 平らな地図の名前の位置（2026-10-28 園内図に作り直して撮った top-map3d に合わせた） */
.isle--home{left:50.0%;top:71.1%}.isle--media{left:23.1%;top:37.6%}.isle--theater{left:50.0%;top:25.3%}.isle--about{left:74.5%;top:17.3%}.isle--contact{left:78.7%;top:53.6%}
/* 2026-10-28 トップ：ヘッダーなし（カツ「ヘッダーはいらない」）・エリアの看板の絵・キャッチコピーの看板・地図の操作ボタン */
body.is-top .site-head{display:none}
.is-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.isle__sign{order:1;display:block;width:clamp(150px,13vw,240px);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));transition:transform .2s}
.isle--theater .isle__sign{width:clamp(190px,17vw,300px)}
a.isle:hover .isle__sign,.isle.is-hover .isle__sign{transform:scale(1.06)}
.isle__sub{order:2}
.top-cap__h.has-sign{line-height:0}
.top-cap__sign{display:block;width:clamp(260px,30vw,520px);height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.isles__ctl{display:none}
.isles.is-3d .isles__ctl{position:absolute;right:16px;bottom:44px;z-index:4;display:flex;flex-direction:column;gap:8px}
.isles__ctl button{width:44px;height:44px;border:0;border-radius:50%;background:rgba(20,22,48,.72);color:#fff;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.isles__ctl button:hover,.isles__ctl button:focus-visible{background:rgba(124,58,237,.85)}
.isles.is-3d .isles__gl{touch-action:none;cursor:grab}
.isles.is-3d .isles__gl:active{cursor:grabbing}
@media (max-width:760px){.isle__sign{width:120px}.isle--theater .isle__sign{width:150px}.top-cap__sign{width:min(78vw,340px)}
  .isles.is-3d .isles__ctl{bottom:96px;right:10px}.isles__ctl button{width:40px;height:40px}}

/* 平らな地図の名前の位置（2026-10-28 山とお城と看板を足して撮り直した top-map3d） */
.isle--home{left:50.0%;top:80.4%}.isle--media{left:24.7%;top:50.2%}.isle--theater{left:50.0%;top:37.8%}.isle--about{left:74.6%;top:29.2%}.isle--contact{left:79.1%;top:55.8%}
/* 2026-10-28 カツ「カーソルを重ねるとエリアのタイトルが消える」：重ねたときの拡大・動きをやめ、看板はいつも同じに出す（GPU によって拡大と影の重ねで消えることがある） */
.isle__sign{transition:none;will-change:auto}
a.isle:hover .isle__sign,.isle.is-hover .isle__sign,a.isle:focus-visible .isle__sign{transform:none;opacity:1;visibility:visible}
a.isle:hover .isle__pin,.isle.is-hover .isle__pin{transform:none}
.isle{opacity:1!important}
/* 2026-10-28 カツ「各エリアのタイトルも視認性あげて」：マウスで地図に transform が付くと名前が 3D の canvas の裏に回って消えた＝3D のときは地図を動かさない。看板のまわりを暗くぼかして、明るい道や建物の上でも読めるように */
.isles.is-3d .isles__map{transform:none!important}
.isles.is-3d .isle{z-index:5}
.isle__sign{width:clamp(170px,14.5vw,260px);filter:drop-shadow(0 0 2px rgba(5,7,26,.95)) drop-shadow(0 0 8px rgba(5,7,26,.9)) drop-shadow(0 0 18px rgba(5,7,26,.7))}
.isle--theater .isle__sign{width:clamp(210px,18vw,320px)}
.isle__sub{font-weight:700;color:#fff;text-shadow:0 0 3px #05071a,0 0 8px #05071a,0 0 16px rgba(5,7,26,.9),0 1px 2px #000}
@media (max-width:760px){.isle__sign{width:132px}.isle--theater .isle__sign{width:160px}}
.isle--theater .isle__sign{width:clamp(250px,22vw,390px)}
/* 2026-10-28 エリアごとにデザインの違う看板（縦横の比がばらばら）＝幅でなく高さでそろえる */
.isle__sign,.isle--theater .isle__sign{width:auto;height:clamp(64px,6.2vw,104px)}
.isle--theater .isle__sign{height:clamp(84px,8vw,132px)}
.isle--home .isle__sign{height:clamp(74px,7vw,116px)}
@media (max-width:760px){.isle__sign,.isle--theater .isle__sign{width:auto;height:58px}.isle--theater .isle__sign{height:72px}.isle--home .isle__sign{height:66px}}
/* 2026-10-28 カツ「各エリアのタイトルをもう少し小さく・アニメーションを」：看板は約8割の高さに。動きはエリアごとに小さく（ゆれ幅 5px・2度まで・酔わない）。動きを減らす設定では止める
   シアター＝電飾が明るく脈打つ・HOME＝ふくらむ息づかい・メディア＝ホログラムのちらつきと浮き・About＝灯台の光のようにゆっくり揺れる・お問い合わせ＝紙飛行機のように斜めに漂う */
.isle__sign,.isle--theater .isle__sign{height:clamp(52px,5vw,84px)}
.isle--theater .isle__sign{height:clamp(68px,6.4vw,106px)}
.isle--home .isle__sign{height:clamp(60px,5.6vw,92px)}
@media (max-width:760px){.isle__sign,.isle--theater .isle__sign{height:48px}.isle--theater .isle__sign{height:60px}.isle--home .isle__sign{height:54px}}
@media (prefers-reduced-motion:no-preference){
  .isle--theater .isle__sign{animation:signMarquee 2.4s ease-in-out infinite}
  .isle--home .isle__sign{animation:signBreath 3.6s ease-in-out infinite;transform-origin:50% 100%}
  .isle--media .isle__sign{animation:signHolo 4.2s ease-in-out infinite}
  .isle--about .isle__sign{animation:signSway 5.5s ease-in-out infinite;transform-origin:50% 100%}
  .isle--contact .isle__sign{animation:signDrift 4.8s ease-in-out infinite}
}
@keyframes signMarquee{0%,100%{filter:drop-shadow(0 0 2px rgba(5,7,26,.95)) drop-shadow(0 0 8px rgba(5,7,26,.9)) brightness(1)}50%{filter:drop-shadow(0 0 2px rgba(5,7,26,.95)) drop-shadow(0 0 14px rgba(253,224,71,.55)) brightness(1.18)}}
@keyframes signBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes signHolo{0%,100%{transform:translateY(0);opacity:1}40%{transform:translateY(-5px);opacity:1}43%{opacity:.7}45%{opacity:1}47%{opacity:.82}49%{opacity:1}70%{transform:translateY(-2px)}}
@keyframes signSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes signDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-5px)}}
/* 2026-10-28 カツ「操作ボタンや文言は無し・メニューは右サイドにアイコン」：右の縦のアイコンで、右から板を引き出す。
   板は文章を読む面（枠線と角丸の箱にしない＝画面の右を上から下まで使う暗いガラス）。文字は15px以上 */
.top-cap{margin:0;line-height:0}
.rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:12px}
.rail__btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:0;border-radius:50%;background:rgba(14,16,44,.72);color:#e0e7ff;cursor:pointer;
  box-shadow:0 0 0 1px rgba(167,139,250,.35),0 0 18px rgba(103,232,249,.25),0 4px 12px rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rail__btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail__btn:hover,.rail__btn:focus-visible,.rail__btn[aria-expanded="true"]{background:rgba(124,58,237,.85);color:#fff;box-shadow:0 0 0 1px rgba(196,181,253,.7),0 0 24px rgba(167,139,250,.6)}
.rail__btn:focus-visible{outline:2px solid #fde68a;outline-offset:3px}
.drawer-back{position:fixed;inset:0;z-index:31;background:rgba(5,7,26,.45)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:32;width:min(460px,100%);overflow-y:auto;padding:28px 28px 40px;box-sizing:border-box;
  background:linear-gradient(160deg,rgba(17,14,52,.96),rgba(8,12,38,.96));color:#e5e7f5;font-size:15px;line-height:1.85;box-shadow:-12px 0 40px rgba(0,0,0,.5)}
.drawer[hidden],.drawer-back[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.drawer:not([hidden]){animation:drawerIn .28s cubic-bezier(.2,.7,.2,1)}}
@keyframes drawerIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.drawer__close{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.drawer__close:hover,.drawer__close:focus-visible{background:rgba(124,58,237,.8)}
.drawer__h1{margin:0 48px 16px 0;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:26px;line-height:1.4;letter-spacing:.08em;color:#fff;outline:none}
.drawer__h1 span{display:block;margin-top:4px;font-size:16px;letter-spacing:.04em;color:#c4b5fd}
.drawer h2:not(.drawer__h1){margin:26px 0 8px;padding-top:18px;border-top:1px solid rgba(167,139,250,.25);font-size:17px;color:#a5f3fc;letter-spacing:.06em}
.drawer p{margin:0 0 12px}
.drawer strong{color:#fff}
.drawer a{color:#c7d2fe;text-underline-offset:3px}
.drawer a:hover{color:#fde68a}
.drawer__areas{margin:0}
.drawer__areas dt{margin-top:10px;font-weight:700;font-size:16px}
.drawer__areas dd{margin:0;color:#cbd5e1}
.drawer__list{margin:0;padding-left:1.2em}
.drawer__list li{margin:4px 0}
.drawer__op{margin-top:26px;padding-top:16px;border-top:1px solid rgba(167,139,250,.25);color:#cbd5e1}
.drawer__menu{list-style:none;margin:0;padding:0}
.drawer__menu li{border-bottom:1px solid rgba(167,139,250,.2)}
.drawer__menu a{display:block;padding:14px 4px;font-size:16px;color:#fff;text-decoration:none}
.drawer__menu a:hover,.drawer__menu a:focus-visible{color:#fde68a}
@media (max-width:760px){.rail{right:10px;top:auto;bottom:18px;transform:none}.rail__btn{width:46px;height:46px}.drawer{padding:22px 18px 36px}.drawer__h1{font-size:22px}}
/* 2026-10-28 カツ「表記を英語（小さく日本語）に統一」：板の見出し・メニュー・エリアは 英語＋小さな日本語。看板の下の説明の行はやめた */
.isle__sub{display:none}
.drawer__h1 .en{display:block;margin:0 0 2px;font-family:inherit;font-size:15px;letter-spacing:.28em;color:#67e8f9}
.drawer__h1 .en+*{margin-top:0}
.drawer h2:not(.drawer__h1) span{display:block;margin-top:2px;font-size:15px;font-weight:400;letter-spacing:.04em;color:#cbd5e1}
.drawer__areas .en,.drawer__menu .en{display:block;font-size:16px;font-weight:700;letter-spacing:.12em}
.drawer__areas .ja,.drawer__menu .ja{display:block;font-size:15px;font-weight:400;color:#cbd5e1;letter-spacing:.02em}
.drawer__menu a{padding:12px 4px}
/* 英語＋小さな日本語の2段の看板（title-<名前>-c）は、説明の行が無くなったぶん高さを少し戻す（日本語が読める大きさ） */
.isle__sign,.isle--theater .isle__sign{height:clamp(68px,6.6vw,110px)}
.isle--theater .isle__sign{height:clamp(88px,8.2vw,138px)}
.isle--home .isle__sign{height:clamp(78px,7.2vw,120px)}
@media (max-width:760px){.isle__sign,.isle--theater .isle__sign{height:62px}.isle--theater .isle__sign{height:78px}.isle--home .isle__sign{height:70px}}
/* ♪（2026-10-28）：止まっているときは斜線、流れているときは光って小さく脈打つ */
.rail__bgm{position:relative}
.rail__off{position:absolute;left:50%;top:50%;width:26px;height:2px;margin:-1px 0 0 -13px;background:currentColor;transform:rotate(-45deg);border-radius:1px;opacity:.85}
.rail__bgm[aria-pressed="true"] .rail__off{display:none}
.rail__bgm[aria-pressed="true"]{background:rgba(124,58,237,.85);color:#fff;box-shadow:0 0 0 1px rgba(196,181,253,.7),0 0 24px rgba(167,139,250,.6)}
@media (prefers-reduced-motion:no-preference){.rail__bgm[aria-pressed="true"] svg{animation:bgmBeat 1.6s ease-in-out infinite}}
@keyframes bgmBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* 場内アナウンスの吹き出し（右下・しっぽは右へ）。文字は15px以上 */
.annc{position:fixed;right:84px;bottom:24px;z-index:25;width:min(360px,calc(100vw - 110px));padding:14px 18px 12px;box-sizing:border-box;color:#eef0ff;font-size:15px;line-height:1.75;
  background:linear-gradient(150deg,rgba(30,22,80,.92),rgba(10,16,48,.92));border-radius:18px 18px 4px 18px;box-shadow:0 0 0 1px rgba(167,139,250,.35),0 0 26px rgba(103,232,249,.22),0 8px 24px rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.annc[hidden]{display:none}
.annc{cursor:pointer;-webkit-tap-highlight-color:transparent}
.annc::after{content:"";position:absolute;right:-10px;bottom:10px;border:10px solid transparent;border-left-color:rgba(10,16,48,.92);border-right:0}
@media (prefers-reduced-motion:no-preference){.annc:not([hidden]){animation:anncIn .45s cubic-bezier(.2,.7,.2,1)}.annc__list li.is-on{animation:anncLine .5s ease-out}}
@keyframes anncIn{from{transform:translateY(14px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes anncLine{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.annc__label{display:flex;align-items:center;gap:6px;margin:0 30px 6px 0;font-size:15px;font-weight:700;letter-spacing:.14em;color:#67e8f9}
.annc__label span{font-weight:400;letter-spacing:.04em;color:#c4b5fd;margin-left:4px}
.annc__label svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.annc__close{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.annc__close:hover,.annc__close:focus-visible{background:rgba(124,58,237,.8)}
.annc__list{list-style:none;margin:0;padding:0;min-height:5.2em}
.annc__list li{display:none}
.annc__list li.is-on{display:block}
.annc__dots{display:flex;gap:2px;margin-top:6px}
.annc__dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.annc__dot::before{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;background:rgba(199,210,254,.35)}
.annc__dot.is-on::before{background:#fde68a;box-shadow:0 0 8px rgba(253,230,138,.8)}
@media (max-width:760px){.annc{left:12px;right:68px;bottom:14px;width:auto;padding:12px 14px 10px}.annc::after{bottom:14px}}
@media (max-width:760px){.annc__label{letter-spacing:.06em;white-space:nowrap;gap:4px}.annc__label span{margin-left:2px}}
@media (max-width:760px){.annc__label svg{display:none}.annc__label{letter-spacing:.02em;margin-right:36px}}

/* 問い合わせのフォーム（/contact/・2026-10-28）。文字は 16px（スマホで拡大されない）・説明は 15px */
.form{display:grid;gap:20px;margin-top:24px;max-width:640px}
.field label{display:block;font-weight:700;color:#111827;margin-bottom:6px}
.req,.opt{font-size:15px;font-weight:700;margin-left:6px}
.req{color:#b91c1c}
.opt{color:var(--sub)}
.form select,.form input,.form textarea{font:inherit;font-size:16px;color:#111827;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:10px 12px;width:100%;min-width:0;box-sizing:border-box}
.form textarea{resize:vertical}
.form [aria-invalid="true"]{border-color:#b91c1c;background:#fef2f2}
.field__help{margin:6px 0 0;font-size:15px;color:var(--sub)}
.field__err{margin:6px 0 0;font-size:15px;color:#b91c1c;font-weight:700}
.form__privacy{font-size:15px;color:var(--sub);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{margin:20px 0 0;padding:4px 0 4px 14px;border-left:4px solid var(--guess);color:#111827;font-weight:700}
.alert--error{border-left-color:#b91c1c;color:#7f1d1d}
.btn-line{display:inline-block;min-height:48px;padding:12px 28px;border:0;border-radius:999px;background:linear-gradient(90deg,var(--imagine),#2563eb);color:#fff;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer}
.btn-line:hover,.btn-line:focus-visible{filter:brightness(1.12)}

/* 吹き出し（場内のお知らせ）の ON・OFF（2026-10-28 カツ「吹き出しの ON・OFF もアイコン作って」）。消えているときは斜線（♪ と同じ形）・出ているときは水色に光る */
.rail__annc{position:relative}
.rail__annc[aria-pressed="true"] .rail__off{display:none}
.rail__annc[aria-pressed="true"]{background:rgba(8,145,178,.85);color:#fff;box-shadow:0 0 0 1px rgba(103,232,249,.7),0 0 24px rgba(34,211,238,.5)}
/* 指で触る画面では、押したあとに「乗せた時の紫」が残って ON に見えた（2026-10-28）＝触る画面では乗せた時の色を出さない */
@media (hover:none){.rail__btn:hover:not([aria-pressed="true"]):not([aria-expanded="true"]):not(:focus-visible){background:rgba(14,16,44,.72);color:#e0e7ff;box-shadow:0 0 0 1px rgba(167,139,250,.35),0 0 18px rgba(103,232,249,.25),0 4px 12px rgba(0,0,0,.45)}}

/* ===== 下層ページ（2026-10-28 カツ「メニューは HOME と同じく右のアイコン・題名は小さく左上・フッターはあり」→「いっかいおすすめでやってみて」）=====
   トップの夜の色のまま読む：紺から紫の空にうすい星。見出しは 英語（大きく）＋日本語。左上はトップの題名の看板を小さく（押すとトップ）。
   文章は箱に入れない（区切りは線1本と余白）。文字は 15px 以上・本文は明るい色（#dfe3f6）・補足は #b8bfdc */
body.is-sub{--ink:#dfe3f6;--sub:#b8bfdc;--line:rgba(167,139,250,.22);color:var(--ink);
  background-color:#090b20;background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.7),transparent 2px),radial-gradient(1px 1px at 68% 9%,rgba(255,255,255,.55),transparent 2px),
    radial-gradient(1.5px 1.5px at 84% 32%,rgba(165,243,252,.6),transparent 3px),radial-gradient(1px 1px at 33% 41%,rgba(255,255,255,.45),transparent 2px),
    radial-gradient(1px 1px at 52% 72%,rgba(255,255,255,.4),transparent 2px),radial-gradient(1.5px 1.5px at 22% 86%,rgba(196,181,253,.55),transparent 3px),
    radial-gradient(1px 1px at 91% 78%,rgba(255,255,255,.45),transparent 2px),radial-gradient(ellipse 120% 70% at 50% -10%,#2a1f6e 0,rgba(42,31,110,0) 60%),
    radial-gradient(ellipse 90% 60% at 100% 100%,rgba(14,116,144,.28),transparent 70%),linear-gradient(180deg,#0d0f2b,#090b20 60%,#0b0a24);background-attachment:fixed}
body.is-sub a{color:#a5b4fc}
body.is-sub a:hover{color:#fde68a}
body.is-sub main{position:relative}
.sub-cap{position:absolute;left:20px;top:16px;z-index:20;display:block;line-height:0}
.sub-cap img{width:clamp(170px,15vw,230px);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.sub-cap:hover img,.sub-cap:focus-visible img{filter:drop-shadow(0 0 14px rgba(167,139,250,.75))}
body.is-sub .page{padding-top:clamp(120px,12vw,150px)}
body.is-sub .wrap{padding-left:20px;padding-right:20px}
@media (min-width:761px) and (max-width:1300px){body.is-sub .wrap,body.is-sub .site-foot__in{padding-right:88px}}   /* 右のアイコンに本文が重ならない */
/* 見出し：英語を大きく（光る文字）・日本語は下に */
body.is-sub .page-h{margin:0 0 18px;font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:#e0e7ff;letter-spacing:.12em;font-weight:700}
body.is-sub .page-h .en{display:block;margin-bottom:6px;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(38px,6.4vw,72px);line-height:1.08;letter-spacing:.05em;
  background:linear-gradient(100deg,#f5f3ff 10%,#c4b5fd 45%,#67e8f9 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(167,139,250,.45))}
body.is-sub .crumbs,body.is-sub .crumbs a{color:#9ea7cf}
body.is-sub .page-lead{color:#c7cdea}
body.is-sub .prose h2,body.is-sub .sec-h,body.is-sub .block__h,body.is-sub .sub-h,body.is-sub .faq dt,body.is-sub .gate__title,body.is-sub .scene figcaption strong{color:#fff}
body.is-sub .prose h2{border-top-color:var(--line);font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.06em}
body.is-sub strong{color:#fff}
/* 記事一覧：写真をすき間少なく並べる（teamLab の一覧のように）。文字は写真の下 */
body.is-sub .gates__list{gap:34px 22px;margin-top:30px}
body.is-sub .gate__ph{border-radius:4px;box-shadow:0 0 0 1px rgba(167,139,250,.18),0 10px 30px rgba(0,0,0,.45)}
body.is-sub .gate:hover .gate__ph{box-shadow:0 0 0 1px rgba(167,139,250,.6),0 0 30px rgba(167,139,250,.35)}
body.is-sub .gate__kind{color:#67e8f9;letter-spacing:.06em}
body.is-sub .gate__card{color:var(--sub)}
body.is-sub .gate:hover .gate__title{color:#fde68a}
/* 記事：頭の絵の上に題名（真ん中にそろえる）。本文は夜の色のまま */
body.is-sub .world-hero{min-height:min(78vh,720px);background:transparent}
body.is-sub .world-hero::after{background:linear-gradient(to top,rgba(9,11,32,0) 0,rgba(9,11,32,.62) 28%,rgba(9,11,32,.5) 50%,rgba(9,11,32,.08) 76%,rgba(9,11,32,.45) 100%)}
body.is-sub .world-hero__ph{-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);mask-image:linear-gradient(to bottom,#000 50%,transparent 100%)}   /* 絵の下の端を夜の空になじませる（境目の線を出さない） */
body.is-sub .world-hero__h{word-break:auto-phrase;text-wrap:balance}   /* 日本語は文節で折り返す（「いた／ら？」を出さない） */
body.is-sub .gate__title,body.is-sub .theater-list__title,body.is-sub .page-h{word-break:auto-phrase}
body.is-sub .world-hero__in{text-align:center;display:flex;flex-direction:column;align-items:center}
body.is-sub .world-hero__h{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.06em;text-shadow:0 0 24px rgba(167,139,250,.55),0 2px 10px rgba(0,0,0,.8)}
body.is-sub .world-hero__lead{margin:0 auto}
body.is-sub .world__body{max-width:900px}
body.is-sub .steps__from{color:#67e8f9}
body.is-sub .steps__arrow{color:#fdba74}
body.is-sub .creature__name{color:#c4b5fd}
body.is-sub .src,body.is-sub .ai,body.is-sub .note,body.is-sub .creature__from{color:var(--sub)}
body.is-sub .next-gate{background:linear-gradient(120deg,rgba(76,29,149,.55),rgba(14,116,144,.45));box-shadow:0 0 0 1px rgba(167,139,250,.35)}
/* ショーの一覧 */
body.is-sub .theater-list__meta{color:#67e8f9}
body.is-sub .theater-list__title{color:#fff}
body.is-sub .theater-list__lead{color:var(--sub)}
body.is-sub .theater-list__note{color:#fde68a}
body.is-sub .theater-list img{box-shadow:0 0 0 1px rgba(167,139,250,.18),0 10px 30px rgba(0,0,0,.45)}
/* 問い合わせ */
body.is-sub .field label{color:#fff}
body.is-sub .opt{color:var(--sub)}
body.is-sub .req{color:#fca5a5}
body.is-sub .field__err{color:#fca5a5}
body.is-sub .alert{color:#fff}
body.is-sub .alert--error{border-left-color:#f87171;color:#fecaca}
body.is-sub .form select,body.is-sub .form input,body.is-sub .form textarea{background:rgba(255,255,255,.96);color:#111827}
/* フッター：夜の色のまま、上に光の線。リンクは 英語＋小さな日本語 */
body.is-sub .site-foot{position:relative;background:linear-gradient(170deg,#1d1a52 0,#16184a 45%,#0f2a4a 100%);color:#d9def5}   /* 2026-10-28 カツ「フッターは背景の色合い変えて見やすく」：本文の夜空より明るい藍〜群青の面にして、境目をはっきり */
body.is-sub .site-foot__note,body.is-sub .site-foot__op,body.is-sub .site-foot__copy{color:#d9def5}
body.is-sub .site-foot a{color:#c7d2fe}
body.is-sub .site-foot__nav .ja{color:#cdd3ef}
body.is-sub .site-foot::before{content:"";position:absolute;left:5%;right:5%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.55),rgba(94,234,212,.55),transparent)}
.site-foot__nav{gap:14px 26px}
.site-foot__nav a{text-decoration:none;line-height:1.4}
.site-foot__nav .en{display:block;font-size:15px;font-weight:700;letter-spacing:.12em;color:#fff}
.site-foot__nav .ja{display:block;font-size:15px;color:#b8bfdc}
.site-foot__nav a:hover .en{color:#fde68a}
/* スマホ：題名の看板は左上に小さく・右のアイコンは右上に横並び（本文の上に縦に重ねない） */
@media (max-width:760px){
  .sub-cap{left:14px;top:12px}
  .sub-cap img{width:150px}
  body.is-sub .rail{top:14px;bottom:auto;right:10px;flex-direction:row;gap:8px}
  body.is-sub .rail__btn{width:42px;height:42px}
  body.is-sub .rail__btn svg{width:21px;height:21px}
  body.is-sub .page{padding-top:118px}
  body.is-sub .world-hero__in{padding-top:130px}
}
@media (max-width:380px){.sub-cap img{width:128px}body.is-sub .rail__btn{width:40px;height:40px}}
/* ショーの一覧は PC で3列（2026-10-28 カツ「3カラムずつにしよう」）。タブレット幅は2列のまま */
@media (min-width:1000px){.theater-list{grid-template-columns:repeat(3,1fr);gap:40px 26px}.theater-list__title{font-size:20px}}
/* ショーの映像のクレジット（2026-10-28） */
.theater__credit{max-width:560px;margin:12px 0 0;font-size:15px;color:#a5b4fc}
/* フッター（2026-10-28 カツ「見にくいので、フッターはトゥモローノートと同じデザインに」）＝トゥモローノートの .site-foot の写し：紺 #14253d の一色・左に説明・右に見出し付きのリンクの列・下に線と運営。前の下層ページ用の色や英語の2段は上書きして使わない */
.site-foot,body.is-sub .site-foot{position:static;background:#14253d;color:#cbd5e1;padding:32px 0 20px;margin-top:0}
body.is-sub .site-foot::before{display:none}
.site-foot__in{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:28px;font-size:15px}
.site-foot__name,.site-foot__h{color:#fff;font-weight:800;margin:0 0 8px;font-size:16px}
.site-foot p,body.is-sub .site-foot p{font-size:15px;color:#cbd5e1;line-height:1.8}
.site-foot__about p:not(.site-foot__name){margin:0}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li a,body.is-sub .site-foot li a{color:#e2e8f0;font-size:15px;text-decoration:none;display:inline-block;padding:3px 0}
.site-foot li a:hover{text-decoration:underline;color:#fff}
.site-foot__op,body.is-sub .site-foot__op{max-width:var(--wrap);margin:24px auto 0;padding:16px 20px 0;border-top:1px solid rgba(203,213,225,.2);box-sizing:border-box}
.site-foot__op a,body.is-sub .site-foot__op a{color:#e2e8f0}
.site-foot__op a:hover{color:#fff}
.site-foot__copy,body.is-sub .site-foot__copy{max-width:var(--wrap);margin:20px auto 0;padding:0 20px;color:#94a3b8;box-sizing:border-box}
@media (max-width:760px){.site-foot__in{grid-template-columns:minmax(0,1fr)}}
@media (min-width:761px) and (max-width:1300px){body.is-sub .site-foot__in,body.is-sub .site-foot__op,body.is-sub .site-foot__copy{padding-right:88px}}   /* 右のアイコンに重ならない */
.site-foot__nav,body.is-sub .site-foot__nav{display:block;gap:0}   /* 前の横並びの指定を消す（見出しの下にリンクを縦に） */
/* 下層ページの右のアイコンは白い丸（2026-10-28 カツ「アイコンは白背景に」＝本文の上に重なっても見分けやすく）。♪ が流れている間・板が開いている間・乗せた時は紫のまま */
body.is-sub .rail__btn{background:#fff;color:#1e1b4b;box-shadow:0 0 0 1px rgba(30,27,75,.12),0 4px 14px rgba(0,0,0,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
body.is-sub .rail__btn:hover,body.is-sub .rail__btn:focus-visible,body.is-sub .rail__btn[aria-expanded="true"],body.is-sub .rail__bgm[aria-pressed="true"]{background:#7c3aed;color:#fff;box-shadow:0 0 0 1px rgba(196,181,253,.7),0 0 20px rgba(167,139,250,.55)}
@media (hover:none){body.is-sub .rail__btn:hover:not([aria-pressed="true"]):not([aria-expanded="true"]):not(:focus-visible){background:#fff;color:#1e1b4b;box-shadow:0 0 0 1px rgba(30,27,75,.12),0 4px 14px rgba(0,0,0,.35)}}
/* 左上のロゴ（2026-10-28 カツ「ロゴの高さを小さく（横も比例）・ロゴも固定スクロールに」）＝前の約 3/4 の大きさで、画面に固定（右のアイコンと同じく、スクロールしても残る） */
.sub-cap{position:fixed;z-index:30}
.sub-cap img{width:clamp(130px,11vw,172px)}
body.is-sub .page{padding-top:clamp(104px,10vw,130px)}
@media (max-width:760px){.sub-cap{left:12px;top:14px}.sub-cap img{width:112px}body.is-sub .page{padding-top:96px}}
@media (max-width:380px){.sub-cap img{width:100px}}
/* 固定のロゴの後ろに本文が透けて読みにくい（2026-10-28 撮って確かめた）＝ロゴのまわりに夜空の色の柔らかいぼかし（枠や角丸の箱にはしない） */
.sub-cap::before{content:"";position:absolute;inset:-14px -22px;z-index:-1;background:radial-gradient(ellipse closest-side,rgba(9,11,32,.92) 55%,rgba(9,11,32,0) 100%);pointer-events:none}
/* スマホは本文がロゴとアイコンの間にものぞく＝画面の上の端に、下へ薄くなる夜空の帯を敷く（固定。押せる物は上に乗る） */
@media (max-width:760px){body.is-sub::before{content:"";position:fixed;left:0;right:0;top:0;height:86px;z-index:25;pointer-events:none;background:linear-gradient(180deg,#0b0c26 0,#0b0c26 68%,rgba(11,12,38,0) 100%)}}
/* トップもスマホは右のアイコンを右上に横並び（2026-10-28 カツ「HOME もスマホはアイコンの位置を上に統一。下層と同じで」）。題名の看板はその下へ。
   お知らせの吹き出しは右下のアイコンが無くなったので、左右いっぱいに（しっぽは消す） */
@media (max-width:760px){
  body.is-top .rail{top:12px;bottom:auto;right:10px;flex-direction:row;gap:7px}
  body.is-top .rail__btn{width:40px;height:40px}
  body.is-top .rail__btn svg{width:20px;height:20px}
  body.is-top .top-cap{top:62px}
  .annc{right:12px}
  .annc::after{display:none}
}
@media (max-width:360px){body.is-top .rail__btn{width:38px;height:38px}body.is-top .rail{gap:5px}}
/* ===== トップと下層ページの統一（2026-10-28 カツ「PC も HOME と下層のロゴの大きさ、アイコンの種類・デザインは統一」）=====
   ロゴ＝下層ページの .sub-cap と同じ大きさ・位置（左上に固定）・まわりの夜空のぼかしも同じ。アイコン＝白い丸・5つ（紹介・メニュー・♪・お知らせ・お問い合わせ） */
body.is-top .top-cap{position:fixed;left:20px;top:16px;right:auto;bottom:auto;max-width:none;z-index:20}
body.is-top .top-cap::before{content:"";position:absolute;inset:-14px -22px;z-index:-1;background:radial-gradient(ellipse closest-side,rgba(9,11,32,.92) 55%,rgba(9,11,32,0) 100%);pointer-events:none}
body.is-top .top-cap__sign{width:clamp(130px,11vw,172px)}
:is(body.is-top,body.is-sub) .rail__btn{background:#fff;color:#1e1b4b;box-shadow:0 0 0 1px rgba(30,27,75,.12),0 4px 14px rgba(0,0,0,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
:is(body.is-top,body.is-sub) .rail__btn:hover,:is(body.is-top,body.is-sub) .rail__btn:focus-visible,:is(body.is-top,body.is-sub) .rail__btn[aria-expanded="true"],:is(body.is-top,body.is-sub) .rail__bgm[aria-pressed="true"]{background:#7c3aed;color:#fff;box-shadow:0 0 0 1px rgba(196,181,253,.7),0 0 20px rgba(167,139,250,.55)}
:is(body.is-top,body.is-sub) .rail__annc[aria-pressed="true"]{background:#0891b2;color:#fff;box-shadow:0 0 0 1px rgba(103,232,249,.7),0 0 20px rgba(34,211,238,.5)}
@media (hover:none){:is(body.is-top,body.is-sub) .rail__btn:hover:not([aria-pressed="true"]):not([aria-expanded="true"]):not(:focus-visible){background:#fff;color:#1e1b4b;box-shadow:0 0 0 1px rgba(30,27,75,.12),0 4px 14px rgba(0,0,0,.35)}}
@media (max-width:760px){
  body.is-top .top-cap{left:12px;top:14px}
  body.is-top .top-cap__sign{width:112px}
  :is(body.is-top,body.is-sub) .rail{top:14px;bottom:auto;right:10px;flex-direction:row;gap:7px;transform:none}
  :is(body.is-top,body.is-sub) .rail__btn{width:42px;height:42px}
  :is(body.is-top,body.is-sub) .rail__btn svg{width:21px;height:21px}
}
@media (max-width:380px){
  body.is-top .top-cap__sign{width:100px}
  :is(body.is-top,body.is-sub) .rail{gap:5px}
  :is(body.is-top,body.is-sub) .rail__btn{width:38px;height:38px}
  :is(body.is-top,body.is-sub) .rail__btn svg{width:19px;height:19px}
}
/* 記事一覧のアイキャッチは 16:9（2026-10-28 カツ「アイキャッチ画像も全て16:9に」・前は 16:10。ショーの一覧と同じ比） */
.gate__ph{aspect-ratio:16/9}
/* ショーの終わりの画面：ほかのショーを3つ（2026-10-28）。絵の下に題名。箱で囲まない */
.theater__more{width:min(880px,100%);margin:34px auto 0;text-align:center}
.theater__more-h{margin:0 0 14px;font-size:16px;font-weight:700;color:#e0e7ff;letter-spacing:.06em}
.theater__more-h span{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:15px;letter-spacing:.3em;color:#67e8f9}
.theater__more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.theater__more a{display:block;color:#fff;text-decoration:none}
.theater__more img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1px rgba(167,139,250,.25);transition:filter .3s}
.theater__more a:hover img,.theater__more a:focus-visible img{filter:brightness(1.18)}
.theater__more span{display:block;margin-top:8px;font-size:15px;font-weight:700;line-height:1.5}
.theater__more a:hover span{color:#fde68a}
.theater__end{overflow-y:auto;padding:84px 16px 24px;justify-content:safe center}
@media (max-width:640px){.theater__more ul{grid-template-columns:1fr 1fr}.theater__more li:nth-child(3){display:none}}
/* ショーの部屋もヘッダー・フッターは新しい形（2026-10-28 カツ「ヘッダー・フッターも最新に」）。ショーの間は、前の帯と同じようにロゴ・アイコン・お知らせ・板を消す */
.is-room .site-foot{background:#14253d}
.is-room .site-foot::before{display:none}
.is-room .sub-cap,.is-room .rail,.is-room .annc{transition:opacity 1.2s ease}
.is-showing .sub-cap,.is-showing .rail,.is-showing .annc,.is-showing .drawer,.is-showing .drawer-back{opacity:0;pointer-events:none}
html.is-showing body.is-sub::before{display:none}
.theater__ride-note{max-width:560px;margin:0 0 18px;font-size:15px;line-height:1.7;color:#a5f3fc}
/* ショーの始まりの画面（2026-10-28 カツ「本文は見やすいように全部白文字に・アイキャッチ画像も設置」）。アイキャッチは 16:9 */
.theater__start .stage__eyebrow,.theater__start .theater__time,.theater__start .theater__lead,.theater__start .theater__caution,.theater__start .theater__ride-note,.theater__start .theater__credit,.theater__start .theater__note{color:#fff}
.theater__eye{display:block;width:min(560px,100%);aspect-ratio:16/9;object-fit:cover;margin:4px auto 18px;border-radius:6px;box-shadow:0 0 0 1px rgba(167,139,250,.3),0 10px 30px rgba(0,0,0,.5)}
@media (max-width:640px){.theater__eye{margin-bottom:14px}}
.theater__eye{width:min(480px,100%,calc(26vh * 16 / 9));margin:0 auto 12px}   /* 画面の高さに合わせて小さく（始めるボタンが画面の中に収まるように） */
.theater__eye{width:min(440px,100%,calc(20vh * 16 / 9))}
.drawer__menu .desc{display:block;margin-top:2px;font-size:15px;line-height:1.6;color:#b8bfdc;letter-spacing:0}
.world-hero__show{margin:16px 0 0}
/* ボタン（2026-10-28 カツ「ボタンの色は白背景に白のシャドーで。黒文字で」）。記事の「ショーを見る」・問い合わせの送信など .btn-line 全部 */
.btn-line{background:#fff;color:#111827;box-shadow:0 0 14px rgba(255,255,255,.55),0 0 34px rgba(255,255,255,.25)}
.btn-line:hover,.btn-line:focus-visible{filter:none;background:#fff;color:#111827;box-shadow:0 0 20px rgba(255,255,255,.8),0 0 48px rgba(255,255,255,.4)}
body.is-sub a.btn-line,body.is-sub a.btn-line:hover{color:#111827}
/* 記事の見出しの見やすさ（2026-10-28 カツ「だから、たぶん とか見出しの視認性あげて・色合い調整」）。
   見出しは大きく、種類ごとの色で光らせる（事実＝水色・だから、たぶん＝こはく・想像＝紫・その他＝白）。上の区切りも種類の色の線。札は暗い背景で見えるよう明るい色に */
body.is-sub .block{border-top:0;position:relative;padding-top:40px}
body.is-sub .block::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--bc,rgba(167,139,250,.6)),rgba(167,139,250,0) 80%)}
body.is-sub .block--fact{--bc:#22d3ee}
body.is-sub .block--guess{--bc:#f59e0b}
body.is-sub .block--imagine{--bc:#a78bfa}
body.is-sub .block__h{font-size:clamp(24px,3.2vw,32px);letter-spacing:.04em;color:#fff;text-shadow:0 0 18px rgba(255,255,255,.18)}
body.is-sub .block--fact .block__h{color:#a5f3fc;text-shadow:0 0 18px rgba(34,211,238,.45)}
body.is-sub .block--guess .block__h{color:#fde68a;text-shadow:0 0 18px rgba(245,158,11,.5)}
body.is-sub .block--imagine .block__h{color:#ddd6fe;text-shadow:0 0 18px rgba(167,139,250,.55)}
body.is-sub .block--guess .block__h .badge{display:none}   /* 見出しと札が同じ言葉なので札は出さない */
body.is-sub .badge--fact{background:#0891b2}
body.is-sub .badge--guess{background:#d97706}
body.is-sub .badge--imagine{background:#7c3aed}
body.is-sub .steps li{border-bottom-color:rgba(245,158,11,.22)}
body.is-sub .steps__from{font-size:16px;color:#a5f3fc}
body.is-sub .steps__arrow{color:#fbbf24}
body.is-sub .steps__to{color:#f3f4ff}
body.is-sub .facts li{color:#f3f4ff}
body.is-sub .sub-h{font-size:22px;color:#ddd6fe}
/* ランキング（/ranking/・2026-10-28）。箱で囲まない：順位の数字・絵・題名を横に並べ、区切りは線1本 */
.rank{margin-top:48px}
.rank__h{margin:0 0 6px;font-size:clamp(22px,2.6vw,28px);color:#fff}
.rank__h .en{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:15px;letter-spacing:.3em;color:#67e8f9}
.rank__desc{margin:0 0 14px;color:#c7cdea}
.rank__tabs{display:flex;gap:8px;margin:0 0 6px}
.rank__tabs button{font:inherit;font-size:15px;font-weight:700;color:#e0e7ff;background:transparent;border:1px solid rgba(224,231,255,.4);border-radius:999px;padding:7px 20px;cursor:pointer}
.rank__tabs button[aria-selected="true"]{background:#fff;color:#111827;border-color:#fff;box-shadow:0 0 14px rgba(255,255,255,.45)}
.rank__list{list-style:none;margin:0;padding:0}
.rank__list li{border-bottom:1px solid rgba(167,139,250,.22)}
.rank__list a{display:grid;grid-template-columns:44px 200px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;color:#fff;text-decoration:none}
.rank__no{font-family:Georgia,"Times New Roman",serif;font-size:30px;text-align:center;color:#fde68a;text-shadow:0 0 12px rgba(253,230,138,.5)}
.rank__list li:nth-child(n+4) .rank__no{color:#c7d2fe;text-shadow:none;font-size:24px}
.rank__list img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.rank__body{display:block;min-width:0}
.rank__kind{display:block;font-size:15px;color:#67e8f9}
.rank__title{display:block;font-size:18px;font-weight:700;line-height:1.5}
.rank__lead{display:block;margin-top:4px;font-size:15px;line-height:1.7;color:#c7cdea;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rank__list a:hover .rank__title{color:#fde68a}
.rank__empty{margin:14px 0 0;color:#c7cdea}
@media (max-width:640px){.rank__list a{grid-template-columns:34px 120px minmax(0,1fr);gap:10px}.rank__no{font-size:24px}.rank__title{font-size:16px}.rank__lead{display:none}}
/* ショーの一覧（2026-10-28 カツ「本文の上に余白・白文字」「はじめてのイマジンシアターだけ上に画像と説明を2カラムで大きく」「シアター型・コースター型で見出しを分けて」） */
body.is-sub .theater-list__lead{margin-top:10px;color:#fff}
.theater-first{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center;margin:32px 0 8px;color:#fff;text-decoration:none}
.theater-first img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1px rgba(167,139,250,.3),0 14px 40px rgba(0,0,0,.5);transition:filter .3s}
.theater-first:hover img{filter:brightness(1.12)}
.theater-first__body{display:block}
.theater-first__badge{display:inline-block;margin-bottom:10px;padding:4px 14px;border-radius:999px;background:#fde68a;color:#111827;font-size:15px;font-weight:800}
.theater-first__title{display:block;margin:6px 0 0;font-size:clamp(24px,2.8vw,32px);font-weight:800;line-height:1.4;color:#fff}
.theater-first__lead{display:block;margin:14px 0 20px;font-size:16px;line-height:1.9;color:#fff}
.theater-first:hover .theater-first__title{color:#fde68a}
.theater-group{margin:56px 0 4px;font-size:clamp(22px,2.6vw,28px);color:#fff}
.theater-group .en{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:15px;letter-spacing:.3em;color:#67e8f9}
.theater-group__desc{margin:0;color:#fff}
.theater-group+.theater-group__desc+.theater-list{margin-top:22px}
@media (max-width:760px){.theater-first{grid-template-columns:1fr;gap:16px}}
body.is-sub .rank__list a{color:#fff}
/* スポンサーの札（ショーの終幕・2026-10-28）。画面の右下。押すと新しいタブで開く（ショーは止めない）。「提供」を必ず出す */
.sponsor{position:absolute;right:20px;bottom:20px;z-index:5;width:min(340px,calc(100% - 40px));padding:14px 16px;border-radius:14px;background:rgba(10,12,34,.86);box-shadow:0 0 0 1px rgba(253,230,138,.45),0 0 28px rgba(253,230,138,.2);color:#fff;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sponsor[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.sponsor:not([hidden]){animation:anncIn .8s ease-out}}
.sponsor__label{display:inline-block;padding:2px 10px;border-radius:999px;background:#fde68a;color:#111827;font-size:15px;font-weight:800}
.sponsor__text{display:block;margin:8px 0 10px;font-size:15px;line-height:1.7}
.sponsor__row{display:flex;align-items:center;gap:12px}
.sponsor__row img{width:96px;height:96px;border-radius:6px;background:#fff;padding:4px;flex:none}
.sponsor__btn{display:inline-block;padding:9px 16px;border-radius:999px;background:#fff;color:#111827;font-size:15px;font-weight:800;box-shadow:0 0 14px rgba(255,255,255,.45)}
.sponsor:hover .sponsor__btn,.sponsor:focus-visible .sponsor__btn{box-shadow:0 0 22px rgba(255,255,255,.8)}
.theater__sponsor{margin:0 0 12px;font-size:15px;font-weight:700;color:#fde68a}
@media (max-width:640px){.sponsor{right:12px;left:12px;bottom:12px;width:auto}.sponsor__row img{width:80px;height:80px}}
.theater__start .theater__sponsor{color:#fff}
.sponsor{top:64px;bottom:auto}   /* 字幕（画面の下）に重ならないよう右上へ（2026-10-28 撮って確かめた） */
@media (max-width:640px){.sponsor{top:60px;bottom:auto}}
.biz-h{margin:22px 0 6px;font-size:19px;color:#fde68a}
/* 提供の札（スクリーンの形・2026-10-29 カツ「映像のいちばん最後に、スクリーンに5秒ほど」）＝画面の真ん中に大きく。押せる・QR も大きく */
.sponsor.is-screen{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));padding:24px 28px;text-align:center;border-radius:18px;background:rgba(8,10,30,.9)}
.sponsor.is-screen .sponsor__label{font-size:16px;padding:4px 16px}
.sponsor.is-screen .sponsor__text{font-size:17px;margin:14px 0 16px}
.sponsor.is-screen .sponsor__row{justify-content:center;gap:20px}
.sponsor.is-screen .sponsor__row img{width:140px;height:140px}
@media (prefers-reduced-motion:no-preference){.sponsor.is-screen:not([hidden]){animation:sponsorScreen 1s ease-out}}
@keyframes sponsorScreen{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%)}}
@media (max-width:640px){.sponsor.is-screen{left:50%;right:auto;top:50%;padding:18px 16px}.sponsor.is-screen .sponsor__row{flex-direction:column;gap:12px}.sponsor.is-screen .sponsor__row img{width:120px;height:120px}}
/* 終わりの画面の提供（2026-10-29）。QR と札・紹介・ボタンを横に */
.theater__sponsor-end{display:flex;align-items:center;gap:16px;width:min(560px,100%);margin:26px auto 0;padding:14px 18px;border-radius:14px;background:rgba(10,12,34,.86);box-shadow:0 0 0 1px rgba(253,230,138,.45),0 0 24px rgba(253,230,138,.15);color:#fff;text-decoration:none;text-align:left}
.theater__sponsor-end img{width:96px;height:96px;flex:none;border-radius:6px;background:#fff;padding:4px}
.theater__sponsor-end-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.theater__sponsor-end-text{font-size:15px;line-height:1.7}
@media (max-width:640px){.theater__sponsor-end{flex-direction:column;text-align:center}.theater__sponsor-end-body{align-items:center}}
.sponsor.is-screen{top:40%}   /* 最後の字幕（画面の下）と重ならないよう少し上に */
@keyframes sponsorScreen{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%)}}
@media (max-width:640px){.sponsor.is-screen{top:33%}}
/* 2026-10-29 提供は 3D のスクリーン（theater.js の spScreen）に描く＝HTML の札は読み上げ用に見えない形で残す */
.sponsor.is-screen{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden;padding:0;transform:none;animation:none!important}
/* ショーの始めの画面から、その世界の記事へ（2026-10-29） */
.theater__reads{margin:14px auto 0;max-width:640px;font-size:15px;line-height:1.8;color:#c7cdea}
.theater__reads a{color:#a5f3fc}
/* 記事の詳細＝本文＋右のサイドバー（2026-10-29 カツ「サイドバーありで、トゥモローノートと同じ仕様に」・トゥモローノートの .layout と同じ 1fr＋280px）。
   スマホ（〜900px）は1列でサイドバーは本文の下。右のアイコン（.rail・右 16〜66px）とぶつかる幅では右に余白 */
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start;padding-top:clamp(120px,12vw,150px);padding-bottom:64px}
@media (min-width:901px) and (max-width:1260px){.art-layout{padding-right:84px}}
@media (max-width:900px){.art-layout{grid-template-columns:minmax(0,1fr);gap:40px}}
.art__main{min-width:0}
.art__kind{margin:0 0 6px;font-size:15px;font-weight:800;letter-spacing:.1em;color:var(--gold)}
.art__h{margin:0 0 12px;font-family:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(24px,3vw,34px);line-height:1.5;letter-spacing:.04em;color:#f5f3ff;word-break:auto-phrase}
.art__meta{margin:0;font-size:15px;color:var(--sub)}
.art__meta a{color:inherit}
.art__hero{margin:22px 0 0}
.art__hero img{width:100%;border-radius:6px}
.art__hero figcaption{margin-top:6px;font-size:15px;color:var(--sub)}
.art__lead{margin:20px 0 0;font-size:17px;line-height:1.95;color:var(--ink)}
.art__show{margin:18px 0 0}
.art .howto{margin-top:32px}
.art__share-end{margin:44px 0 0}
.art__share-h{margin:0;font-weight:800;font-size:17px;color:var(--ink)}
/* 共有のボタン（トゥモローノートの .atools__share と同じ並び） */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.art__share-end .share{border-top:0;margin-top:6px}
.share__h{font-size:15px;font-weight:700;color:var(--sub);margin-right:6px}
.share ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.share__b{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;color:#fff;cursor:pointer;text-decoration:none}
.share__b--x{background:#000}.share__b--threads{background:#1f1f1f}.share__b--line{background:#06c755}.share__b--facebook{background:#1877f2}
.share__copy,.share__native{background:#e8eaee;color:#1f2937}
.share__b:hover{opacity:.85;color:#fff}
.share__copy:hover,.share__native:hover{color:#1f2937}
.share__msg{margin-left:8px;font-size:15px;color:var(--glow)}
/* サイドバー：箱にしない（線と余白で区切る）。PC は画面に付いてくる */
.side{align-self:stretch;display:flex;flex-direction:column;gap:32px}
.side__sec--stick{position:sticky;top:24px}   /* ショーの欄だけ画面に付いてくる（サイドバー全体だと画面より長く、下が見えなかった） */
@media (max-width:900px){.side__sec--stick{position:static}}
.side__sec{border-top:1px solid var(--line);padding-top:14px}
.side__h{margin:0 0 12px;font-size:16px;font-weight:800;letter-spacing:.08em;color:#e0e7ff}
.side__show{display:block;color:var(--ink);text-decoration:none}
.side__show img{width:100%;border-radius:4px}
.side__show-name{display:block;margin-top:8px;font-weight:700;font-size:16px;line-height:1.6;color:#f5f3ff}
.side__show-meta{display:block;margin-top:4px;font-size:15px;color:var(--sub);line-height:1.7}
.side__show:hover .side__show-name{color:var(--glow)}
.side__sec .btn-line{margin-top:12px}
.side__list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.side__list a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.6}
.side__list img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:3px}
.side__list a:hover{color:var(--glow)}
.side__kind{display:block;font-size:15px;color:#67e8f9}
.side__more{margin:14px 0 0;font-size:15px}
.side__more a{color:#c7d2fe}
/* ショーの始めの画面（2026-10-29 カツ「あらすじを記載」「ショースタートのボタンも UI・UX 作り直して」）
   PC＝上に題名・左に絵とあらすじ・右に「見る」ための操作。スマホ（〜860px）＝題名→絵→あらすじ→操作→注意書き。操作の板だけ枠を付ける（文章ではなくボタンの集まり） */
.ts{width:min(1080px,100%);margin:auto 0;display:grid;gap:22px 40px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"head head" "media go" "syn go" "fine go";align-items:start;text-align:left}
.ts__head{grid-area:head;text-align:center}
.ts__head .theater__h{margin:.15em 0 0}
.ts__sub{margin:4px 0 0;font-size:16px;color:#c7d2fe}
.ts__head .theater__sponsor{margin:10px 0 0}
.ts__media{grid-area:media}
.ts .theater__eye{width:100%;max-width:none;margin:0}
.ts__syn{grid-area:syn}
.ts__h2{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:.14em;color:#fde68a}
.ts__syn p{margin:0;font-size:16px;line-height:1.95;color:#e0e7ff}
.ts__syn .theater__reads{margin:12px 0 0;max-width:none}
.ts__go{grid-area:go;padding:22px 22px 18px;border:1px solid rgba(167,139,250,.38);border-radius:16px;background:rgba(14,16,44,.62);box-shadow:0 0 40px rgba(124,58,237,.18)}
.ts__info{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:0 0 18px}
.ts__info div{border-bottom:1px solid rgba(167,139,250,.25);padding-bottom:6px}
.ts__info dt{font-size:15px;color:#a5b4fc}
.ts__info dd{margin:0;font-size:17px;font-weight:700;color:#fff}
.ts__label{margin:0 0 6px;font-size:15px;color:#a5b4fc}
.ts .theater__sound{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0 0 16px;padding:4px}
.ts .theater__sound button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px;font-size:16px}
.ts .theater__sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ts .theater__btns{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:10px}
.ts .theater__btns .ts__play{width:100%;min-height:62px;gap:10px;font-size:20px;letter-spacing:.08em}
.ts__play svg{width:22px;height:22px;fill:currentColor}
.ts .theater__btns .ts__resume{width:100%;min-height:50px}
.ts__hint{margin:12px 0 0;font-size:15px;line-height:1.7;color:#a5b4fc;text-align:center}
.ts__fine{grid-area:fine;text-align:left}   /* 注意書きもあらすじと同じ左の列（2026-10-29 カツ） */
.ts__fine p{max-width:none;margin-left:0;margin-right:0}
.ts__fine p:first-child{margin-top:0}
@media (max-width:860px){
  .ts{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "syn" "go" "fine";gap:18px}
  .ts__go{padding:18px 16px 14px}
}
/* 始める前は、始めの画面をページと一緒にスクロールする（2026-10-29 カツ「スクロールがスムーズにいかない」＝部屋の上に重ねた枠の中だけスクロールし、下まで行くとページのスクロールに切り替わって引っかかっていた）。
   始めたら、今までどおり画面いっぱいの部屋（始めの画面は hidden） */
.room:has(> .theater__start:not([hidden])){height:auto;min-height:100vh;min-height:100svh;overflow:visible}
.room > .theater__start:not([hidden]){position:relative;inset:auto;min-height:100vh;min-height:100svh;overflow:visible}
/* 「ショーを始める」はオレンジ（2026-10-29 カツ）。文字は濃い色（明るいオレンジの上で読みやすく） */
.ts .ts__play{background:linear-gradient(135deg,#fbbf24,#f97316);color:#1c0a00;box-shadow:0 0 26px rgba(249,115,22,.55)}
.ts .ts__play:hover{background:linear-gradient(135deg,#fcd34d,#fb923c);color:#1c0a00}
.ts .ts__play:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* 企業向けページの例の画面録画と写真（2026-10-29） */
.biz-media{margin:20px 0 0}
.biz-media video,.biz-media img{display:block;width:100%;height:auto;border-radius:6px;background:#000}
.biz-media figcaption{margin-top:8px;font-size:15px;line-height:1.7;color:var(--sub)}
/* 終わりの画面の提供（2026-10-29 カツ「もう少しおしゃれに」）＝スクリーンと同じエンドクレジットの形：金の細い線の枠・提供 ─ PRESENTED BY・明朝の名前・金の下線のリンク */
.theater__sponsor-end{position:relative;gap:26px;width:min(620px,100%);padding:22px 26px;border-radius:6px;background:linear-gradient(180deg,rgba(10,12,34,.9),rgba(4,5,18,.92));
  box-shadow:0 0 0 1px rgba(253,230,138,.55),0 0 0 7px rgba(4,5,18,.0),0 0 30px rgba(253,230,138,.18);color:#eef2ff;text-decoration:none;text-align:left}
.theater__sponsor-end::before{content:"";position:absolute;inset:6px;border:1px solid rgba(253,230,138,.22);border-radius:3px;pointer-events:none}
.theater__sponsor-end img{width:104px;height:104px;border-radius:8px;padding:6px;background:#fff;box-shadow:0 0 0 1px rgba(253,230,138,.6),0 0 0 6px rgba(4,5,18,1),0 0 0 7px rgba(253,230,138,.35)}
.theater__sponsor-end-body{gap:6px}
.sp-kicker{display:flex;align-items:center;gap:12px;font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;font-size:15px;color:#fde68a;letter-spacing:.12em}
.sp-kicker__en{font-family:Georgia,"Times New Roman",serif;font-size:15px;letter-spacing:.32em;color:rgba(253,230,138,.75)}
.sp-kicker__en::before{content:"";display:inline-block;width:28px;height:1px;margin:0 12px 4px 0;vertical-align:middle;background:rgba(253,230,138,.6)}
.sp-name{font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;font-size:24px;font-weight:600;color:#fffaf0;letter-spacing:.06em;text-shadow:0 0 16px rgba(255,240,200,.35)}
.sp-note{margin-left:12px;font-size:15px;font-weight:400;color:#c7d2fe;letter-spacing:.04em;text-shadow:none}
.theater__sponsor-end-text{font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;font-size:16px;line-height:1.75;color:#e0e7ff}
.sp-link{display:inline-flex;gap:10px;align-items:center;margin-top:4px;padding-bottom:3px;border-bottom:1px solid rgba(253,230,138,.8);font-size:16px;font-weight:700;color:#fde68a;letter-spacing:.04em}
.theater__sponsor-end:hover .sp-link{color:#fff7d6;border-bottom-color:#fff7d6}
.theater__sponsor-end:hover{box-shadow:0 0 0 1px rgba(253,230,138,.85),0 0 36px rgba(253,230,138,.3)}
@media (max-width:640px){.theater__sponsor-end{text-align:center;padding:22px 18px}.sp-kicker{justify-content:center}}
/* 提供の事例（/for-business/tomorrow-note/・2026-10-29）：あらましは枠なしの2列の表・ボタンは横に並べてスマホで折り返す */
.biz-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 18px;margin:12px 0 0}
.biz-facts dt{color:#fde68a;font-weight:700}
.biz-facts dd{margin:0;overflow-wrap:anywhere}
@media (max-width:560px){.biz-facts{grid-template-columns:minmax(0,1fr);gap:2px}.biz-facts dd{margin-bottom:10px}}
.biz-actions{display:flex;flex-wrap:wrap;gap:12px}
/* 企業と連携したショーの一覧（/for-business/・2026-10-29）：/theater/ の札をそのまま使い、提供の行を金色に */
.biz-partners .biz-partners__sp{display:block;margin-top:12px;font-size:15px;color:#fde68a;letter-spacing:.04em}
.biz-partners .biz-partners__more{display:inline-block;margin-top:10px;font-size:15px;font-weight:700;color:#fde68a;border-bottom:1px solid rgba(253,230,138,.6)}
/* ショー中は指のドラッグを見回しだけに使う（前は縦の動きをブラウザのスクロールに渡し、スマホで引っかかった・2026-10-29） */
html.is-showing .room.is-playing .room__gl{touch-action:none}
html.is-showing,html.is-showing body{overscroll-behavior:none}
/* いいね（2026-10-29・乃木工事ネタずかんの .like を夜の色に）：金の縁・押したら金で塗る */
.like{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px;border:1.5px solid rgba(253,230,138,.7);background:transparent;color:#fde68a;font:inherit;font-size:15px;font-weight:700;cursor:pointer;border-radius:999px;transition:background .2s,color .2s}
.like__h{font-size:17px;line-height:1}
.like__n{font-weight:600;font-variant-numeric:tabular-nums}
.like[aria-pressed="true"]{background:linear-gradient(90deg,#fbbf24,#f59e0b);border-color:transparent;color:#1c0a00}
.like:disabled{opacity:.6}
.like:hover,.like:focus-visible{box-shadow:0 0 14px rgba(253,230,138,.45)}
.art__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.art__acts .share{margin:0}
.ts__like{margin:10px 0 0}
.theater__end-like{margin:14px 0 0;font-size:15px;color:var(--sub,#cbd5e1);display:flex;align-items:center;justify-content:center;gap:10px}
/* コメント（トゥモローノートの .cm を夜の色に・2026-10-29）。本文を枠の箱にしない（区切りは上の線だけ） */
.cm{max-width:760px;margin:48px 0 0;padding:0}
.cm-h{font-size:20px;margin:0 0 14px}
.cm-msg{padding:10px 0;color:#86efac;font-weight:700;font-size:15px}
.cm-list{list-style:none;margin:0 0 20px;padding:0}
.cm-item{padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.cm-meta{display:flex;gap:10px;align-items:baseline;font-size:15px}.cm-meta time{color:#94a3b8;font-size:15px}
.cm-body{margin:6px 0 0;font-size:16px;line-height:1.75;overflow-wrap:anywhere}
.cm-none{color:#94a3b8;font-size:15px}
.cm-form{display:flex;flex-direction:column;gap:12px;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.cm-l{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700}
.cm-l input,.cm-l textarea{font:inherit;font-size:16px;font-weight:400;padding:10px 12px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(255,255,255,.06);color:#f8fafc;width:100%;box-sizing:border-box}
.cm-l input:focus,.cm-l textarea:focus{outline:2px solid #fde68a;outline-offset:1px}
.cm-note{margin:0;font-size:15px;color:#94a3b8}
.cm-btn{align-self:flex-start;border:0;border-radius:999px;padding:12px 32px;font:inherit;font-size:16px;font-weight:700;background:linear-gradient(90deg,#fbbf24,#f97316);color:#1c0a00;cursor:pointer;min-height:44px}
.cm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.theater-after{padding-bottom:40px}
.is-showing .theater-after{display:none}
.rank__likes{display:block;margin-top:4px;font-size:15px;font-weight:700;color:#fde68a}
body.is-sub .page-h .page-h__sub{display:block;margin-top:4px;font-size:.7em;letter-spacing:.08em;color:#fde68a}
/* /for-business/ の下半分（2026-10-29 一覧の下に説明）：一覧と同じ見出しの形・区切りは線1本 */
body.is-sub .theaters + .biz-about,.theaters + .biz-about{padding-top:0}
.theaters:has(+ .biz-about){padding-bottom:32px}
body.is-sub .prose h2.biz-about__h{border-top:1px solid rgba(167,139,250,.22);padding-top:40px;margin:0 0 14px;font-family:inherit;letter-spacing:.04em}
.biz-about__h{margin:0 0 14px;font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:#fff}
.biz-about__h .en{display:block;margin-bottom:4px;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:15px;letter-spacing:.3em;color:#67e8f9}
.biz-partners li > .biz-partners__more{text-decoration:none}
/* 2026-10-29 カツ「クリックできる文字がどれかわかりにくい」：
   組の見出し（エリア・このサイト）は押せない札＝灰色の小さい字＋横の線。押せる行は右に ›・触れると行全体が明るくなり › が動く */
.drawer__group{display:flex;align-items:center;gap:10px;margin:40px 0 6px;font-size:15px;font-weight:400;letter-spacing:.2em;color:#8b93b8;cursor:default}
.drawer__group::after{content:"";flex:1;height:1px;background:rgba(139,147,184,.35)}
.drawer__group:first-of-type{margin-top:10px}
.drawer__menu li:last-child{border-bottom:0}
.drawer__menu a{position:relative;padding:12px 40px 12px 12px;border-radius:8px;transition:background .2s}
.drawer__menu a::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:26px;line-height:1;color:#a5b4fc;transition:transform .2s,color .2s}
.drawer__menu a:hover,.drawer__menu a:focus-visible{background:rgba(167,139,250,.14);color:#fff}
.drawer__menu a:hover::after,.drawer__menu a:focus-visible::after{transform:translate(4px,-50%);color:#fde68a}
.drawer__menu a:hover .en,.drawer__menu a:focus-visible .en{color:#fde68a}
.drawer__menu a[href^="http"]::after{content:"↗";font-size:20px}
/* イマジンシアターの2つの一覧の切り替え（2026-10-29）：横に2つ並べ、今いる方は金の縁で塗る・もう一方は押せる行（→） */
.tswitch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 8px}
.tswitch__b{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border:1.5px solid rgba(167,139,250,.45);border-radius:12px;color:#fff;text-decoration:none;transition:background .2s,border-color .2s}
.tswitch__b b{font-size:16px;line-height:1.5}
.tswitch__b small{font-size:15px;color:#c7cdea}
a.tswitch__b:hover,a.tswitch__b:focus-visible{background:rgba(167,139,250,.16);border-color:#c4b5fd}
a.tswitch__b small span{color:#fde68a}
.tswitch__b.is-on{border-color:rgba(253,230,138,.85);background:rgba(253,230,138,.1);box-shadow:0 0 16px rgba(253,230,138,.18)}
.tswitch__b.is-on b{color:#fde68a}
@media (max-width:560px){.tswitch{grid-template-columns:minmax(0,1fr)}}

/* 問い合わせの確認画面（相互リンクの依頼・2026-11-05） */
.confirm { display: grid; grid-template-columns: 9em 1fr; gap: 8px 16px; margin: 0 0 20px; }
.confirm dt { font-weight: 700; }
.confirm dd { margin: 0; overflow-wrap: anywhere; }
.confirm__msg { white-space: normal; }
.alert p { margin: 0 0 8px; }
.alert p:last-child { margin-bottom: 0; }
.alert + .block__title { margin-top: 28px; }
@media (max-width: 600px) { .confirm { grid-template-columns: 1fr; gap: 2px; } .confirm dd { margin-bottom: 10px; } }