:root {
  --nav-bg: rgba(0, 0, 0, 0.75);
  --play-bg: rgba(0, 0, 0, 0.3);
  --fg: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1b1b1c; color: var(--fg); overflow: hidden;
  font-family: "Roboto", "Hiragino Sans", "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg .fill { fill: currentColor; stroke: none; }
[hidden] { display: none !important; }

.tour { position: fixed; inset: 0; }
.showcase { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* カバー */
.cover { position: absolute; inset: 0; z-index: 30; background: #000 center/cover no-repeat; display: grid; place-items: center; }
.cover::before { content: ""; position: absolute; inset: 0; background: var(--play-bg); }
.cover-play { position: relative; width: 270px; height: 270px; max-width: 40vw; max-height: 40vw; border: 7px solid #fff; border-radius: 50%; }
/* border-widthは%を受け付けないので、三角はclip-pathで描く */
.cover-play::after { content: ""; position: absolute; left: 38%; top: 27%; width: 34%; height: 46%; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cover:hover .cover-play { transform: scale(1.04); transition: transform .2s; }
body.playing .cover { display: none; }

/* UIは再生後に表示（ロゴのみ常時） */
.nav, .action-box { visibility: hidden; }
body.ready .nav, body.ready .action-box { visibility: visible; }

/* ロゴ */
.logo { position: absolute; z-index: 40; top: 0; left: 0; display: block; }
.logo img { display: block; width: var(--logo-w, 300px); height: auto; }

/* 右上の写真ボタン（メニューボタンの左。right は app.js でメニューボタンの幅に合わせる） */
.top-box { position: absolute; z-index: 40; top: 0; right: 130px; display: flex; }
.top-box button { display: grid; place-items: center; width: 40px; height: 40px; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.8)); }
.top-box svg { width: 24px; height: 24px; }

/* メニュー */
.nav { position: absolute; z-index: 40; top: 0; right: 0; width: 360px; max-width: 100vw; }
.nav-toggle { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 4px; height: 40px; padding: 5px 15px 5px 5px;
  background: var(--nav-bg); font-size: 20px; font-weight: 300; color: rgba(255,255,255,.85); }
.nav-toggle svg { width: 30px; height: 30px; stroke-width: 1.5; }
.nav-toggle .i-close { display: none; }
.nav.open .nav-toggle .i-open { display: none; }
.nav.open .nav-toggle .i-close { display: block; }
.nav-panel { display: none; position: absolute; top: 42px; right: 0; width: 360px; max-height: calc(100vh - 42px); overflow-y: auto;
  font-size: 14px; line-height: 1.45; }
.nav-panel > * { background: var(--nav-bg); margin-bottom: 2px; }
.nav.open .nav-panel { display: block; }
.nav-title { padding: 8px 10px 10px; }
.nav-title small { display: block; font-size: 10px; font-style: italic; opacity: .8; }
.nav-title div { font-size: 18px; font-weight: 300; margin-top: 2px; }
/* 区画: 左にアイコン、右に見出し・本文・SNS・画像・移動リンク（あるものだけ） */
.nav-section { position: relative; padding: 8px 10px 14px; }
.nav-section .sec-icon { position: absolute; left: 10px; top: 15px; width: 20px; height: 20px; }
.nav-section h2 { margin: 0 0 6px; padding-left: 30px; font-size: 16px; font-weight: 300; line-height: 34px; }
.nav-section > :not(h2):not(.sec-icon) { margin-left: 30px; margin-right: 5px; }
.nav-section > :nth-child(2):not(h2) { margin-top: 7px; }
.nav-section .txt { font-weight: 300; word-break: break-all; }
.nav-section a { color: #fff; }
.nav-section .links { display: flex; gap: 6px; }
.nav-section .links a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--icon-bg); }
.nav-section .links img { width: 20px; height: 20px; }
.nav-section .media { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
.nav-section .media.count-1 { grid-template-columns: 1fr; }
.nav-section .media a { display: block; }
.nav-section .media img { display: block; width: 100%; }
.nav-section .media:not(.count-1) img { aspect-ratio: 1; object-fit: cover; }
.nav-section .jump { list-style: none; padding: 0; margin-top: 8px; }
.nav-section .jump button { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 4px 0; text-align: left; font-size: 14px; font-weight: 300; line-height: 1.45; }
.nav-section .jump button:hover span { text-decoration: underline; }
.nav-section .jump img { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* 下部バー */
/* 下部の陰影はここの1枚だけにする（上=透明→下=濃い）。リールとMatterport標準フッターが別々に陰を持つと境目が2段に見えるため、
   標準側の陰は injectShowcaseCss で消している。フッターの中身（ロゴ・ヘルプ・利用規約）は残す */
.action-box { position: absolute; z-index: 35; left: 0; right: 0; bottom: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.5) 100%); }
/* リールを閉じてもバーが標準フッター（Matterportロゴ）に重ならないよう、フッター分あける */
.action-box:not(.hr-opened) { padding-bottom: 48px; }
.action-box > * { pointer-events: auto; }
.bar { display: flex; align-items: center; height: 38px; padding: 0 15px; margin-bottom: 3px; pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,.8)); position: relative; }
.bar button:hover, .bar button.on { background: rgba(255,255,255,.15); }
.bar .right { margin-left: auto; display: flex; }
.hr-pill { display: flex; padding: 0 2px; background: rgba(0,0,0,.8); border-radius: 30px; }
.hr-pill button { filter: none; }
.hr-pill button:hover { background: rgba(255,255,255,.12); }
.action-box.hr-opened [data-trigger="hr-open"] svg { transform: rotate(180deg); }
[data-trigger="hr-play"] .i-pause, [data-trigger="hr-play"].on .i-play { display: none; }
[data-trigger="hr-play"].on .i-pause { display: block; }
[data-trigger="audio"].muted { opacity: .55; }
[data-trigger="measure"].on { background: #fff !important; color: #222; filter: none; }

.floors-wrap { position: relative; }
.floors-choose { display: none; position: absolute; bottom: 44px; left: 0; min-width: 200px; background: rgba(0,0,0,.8); padding: 4px 0; }
.floors-wrap.open .floors-choose { display: block; }
.floors-choose span { display: block; padding: 7px 15px; font-size: 14px; font-weight: 300; cursor: pointer; white-space: nowrap; }
.floors-choose span:hover { background: rgba(255,255,255,.12); }
.floors-choose span.on { font-weight: 700; }
.floors-choose span.on::before { content: "● "; font-size: 9px; vertical-align: 2px; }

/* ハイライトリール */
/* 陰影は .action-box 側の1枚。下端はフッター分空けてMatterportロゴ・利用規約を隠さない */
.reel { padding: 0 0 7px; margin-bottom: 32px; }
.hr-list { padding: 10px; white-space: nowrap; overflow-x: auto; scrollbar-width: thin; }
.hr-item { position: relative; display: inline-block; vertical-align: top; width: 140px; height: 93px; margin: 5px; background: #333 center/cover no-repeat; cursor: pointer; }
.hr-item.on { outline: 2px solid #ff3158; }
.hr-item svg { position: absolute; left: 6px; top: 6px; width: 18px; height: 18px; color: #fff; filter: drop-shadow(1px 1px 2px #000); pointer-events: none; }
.hr-item .name { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px; font-size: 11px; font-weight: 300; text-align: center; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); text-shadow: 0 1px 5px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ミニマップ: 下部バーのすぐ上・右寄せ（MPSKINの .minimap size-2）。メニュー（z-index 40）より下に置く */
.minimap { position: absolute; right: 15px; bottom: calc(100% + 10px); width: min(var(--mm-w, 400px), calc(100vw - 30px));
  padding: 0 15px 15px; border-radius: 5px; background: var(--mm-bg, #000); overflow: hidden; transition: width .7s ease-in-out; }
.minimap.wide { width: min(var(--mm-wide-w, 600px), calc(100vw - 30px)); }
.mm-buttons { display: flex; align-items: center; gap: 4px; height: 32px; }
.mm-buttons button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; opacity: .85; }
.mm-buttons button:hover, .mm-buttons button.on { opacity: 1; background: rgba(255,255,255,.15); }
.mm-buttons svg { width: 16px; height: 16px; }
.mm-buttons .mm-close { margin-left: auto; }
.mm-view { overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.mm-floors { position: relative; transform-origin: 50% 50%; }
.mm-floor { display: none; }
.mm-floor.on { display: block; }
.mm-floor img { display: block; width: 100%; height: auto; pointer-events: none; }
/* 地点の点: 既定はホバー時だけ出す（MPSKINの sweep-hover）。拡大しても大きさを保つ */
.mm-sweep { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid #fff; border-radius: 50%; opacity: 0; cursor: pointer;
  transform: scale(calc(1 / var(--mm-scale, 1))); }
.minimap:hover .mm-sweep, .minimap.sweeps-on .mm-sweep { opacity: .4; }
.minimap .mm-sweep:hover { opacity: 1; }
.minimap.sweeps-off .mm-sweep { display: none; }
.mm-pointer { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none;
  transform: scale(calc(1 / var(--mm-scale, 1))); }
.mm-inner { position: absolute; inset: 0; }
.mm-cone { position: absolute; left: 50%; bottom: 5px; width: 60px; height: 50px; margin-left: -30px;
  background: linear-gradient(0deg, var(--mm-pointer) 0%, rgba(0,0,0,0) 100%); clip-path: polygon(50% 100%, 0 0, 100% 0); }
.mm-dot { position: relative; width: 100%; height: 100%; border-radius: 50%; background: var(--mm-pointer); }

/* モーダル */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,.7); }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: min(560px, calc(100vw - 32px)); background: #1e1e1e; padding: 28px 24px 18px; }
.modal-close { position: absolute; top: 4px; right: 10px; font-size: 28px; line-height: 1; color: #fff; }
.share-box h3 { font-size: 15px; font-weight: 500; margin: 0 0 8px; }
.share-box + .share-box { margin-top: 18px; }
.share-input { display: flex; }
.share-input input { flex: 1; min-width: 0; padding: 8px; font-size: 13px; border: 0; background: #fff; color: #222; }
.share-input .copy { padding: 0 14px; background: #3a3a3a; font-size: 13px; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.lightbox img { max-width: 92vw; max-height: 90vh; }
.lightbox iframe { width: min(92vw, 1280px); aspect-ratio: 16 / 9; max-height: 80vh; border: 0; background: #000; }
.lightbox iframe.page { aspect-ratio: auto; height: 85vh; background: #fff; }
.lightbox figure:has(figcaption:not([hidden])) img { max-height: 75vh; }
.lightbox figcaption { max-width: min(92vw, 720px); margin-top: 8px; padding: 8px 12px; background: rgba(0,0,0,.6); font-size: 14px; font-weight: 300; line-height: 1.6; white-space: pre-line; }
.lightbox figcaption b { display: block; font-weight: 500; }
.lightbox .modal-close { position: fixed; top: 10px; right: 16px; }

.status { position: fixed; z-index: 200; left: 50%; top: 12px; transform: translateX(-50%); font-size: 12px; padding: 6px 12px; background: rgba(160,0,0,.85); }
.status:empty { display: none; }

/* MPSKINのブレークポイントに合わせる: 992px未満でロゴ180px、768px未満でメニュー全幅・文字なし */
@media (max-width: 991px) {
  .logo img { width: min(var(--logo-w, 300px), 180px); }
}
@media (max-width: 767px) {
  .nav-toggle { padding: 5px; }
  .nav-toggle span { display: none; }
  .nav, .nav-panel { width: 100vw; }
}
/* スマホ縦: 下部バー（左8個＋右3個）が1行に収まるよう詰める */
@media (max-width: 480px) {
  .bar { padding: 0 8px; }
  .bar button { width: 32px; height: 32px; }
  .bar svg { width: 20px; height: 20px; }
  .hr-list { padding: 6px; }
  .hr-item { width: 112px; height: 74px; margin: 4px; }
}

/* スマホ横向きなど低い画面: リールが画面を占有しないよう縮め、フッター（ロゴ）分の余白を広げる */
@media (max-height: 500px) {
  .reel { margin-bottom: 44px; }
  .hr-list { padding: 4px 8px; }
  .hr-item { width: 100px; height: 66px; margin: 3px; }
  .hr-item .name { font-size: 10px; padding: 3px; }
  .nav-title div { font-size: 15px; }
  .minimap, .minimap.wide { width: 240px; }
}