:root {
  color-scheme: dark;
  --reference-width: 1672;
  --reference-height: 941;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #01091a; }
body { overflow-x: hidden; }

.page {
  position: relative;
  width: 100%;
  line-height: 0;
  background: #01091a;
}

.page-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  display: block;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: none;
}

.hotspot:focus-visible {
  outline: 2px solid rgba(255,255,255,.95);
  outline-offset: 2px;
}

/* BLUE logo: click to return to TOP */
.brand-logo { left: 3.2%; top: 0.4%; width: 12.0%; height: 9.0%; z-index: 2; }

/* Header navigation — percentage coordinates based on 1672×941 reference */
.home         { left: 46.3%; top: 2.2%; width: 4.5%; height: 5.2%; }
.schedule-top { left: 51.3%; top: 2.2%; width: 6.7%; height: 5.2%; }
.artists      { left: 58.7%; top: 2.2%; width: 7.3%; height: 5.2%; }
.studio       { left: 66.5%; top: 2.2%; width: 5.0%; height: 5.2%; }
.contact      { left: 72.8%; top: 2.2%; width: 6.3%; height: 5.2%; }
.x            { left: 81.8%; top: 1.8%; width: 3.6%; height: 5.8%; }
.instagram    { left: 85.3%; top: 1.8%; width: 3.6%; height: 5.8%; }
.line-menu {
  position: absolute;
  left: 88.9%;
  top: 2.15%;
  width: 1.95%;
  min-width: 28px;
  z-index: 6;
  pointer-events: auto;
}

.line-trigger {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
  background: transparent;
  color: transparent;
  box-shadow: none;
  cursor: pointer;
}

.line-trigger::before {
  content: "";
  position: absolute;
  inset: 19% 15% 24% 15%;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
}

.line-trigger::after {
  content: "";
  position: absolute;
  left: 34%;
  bottom: 16%;
  width: 10%;
  height: 10%;
  border-left: 2px solid rgba(255,255,255,.95);
  border-bottom: 2px solid rgba(255,255,255,.95);
  transform: skewX(-22deg) rotate(-26deg);
  background: transparent;
}

.line-popup {
  z-index: 20;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(340px, 34vw);
  min-width: 270px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(3, 12, 28, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.line-popup::before {
  content: "";
  position: absolute;
  right: 12px;
  top: -7px;
  width: 12px;
  height: 12px;
  background: rgba(3, 12, 28, 0.96);
  border-left: 1px solid rgba(255,255,255,.16);
  border-top: 1px solid rgba(255,255,255,.16);
  transform: rotate(45deg);
}

.line-popup a {
  display: block;
  padding: 12px 14px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.line-popup a + a {
  margin-top: 10px;
}

.line-popup a:hover,
.line-popup a:focus-visible {
  background: rgba(6, 199, 85, 0.14);
  border-color: rgba(6, 199, 85, 0.45);
  outline: none;
}

.line-popup-title {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 700;
  line-height: 1.45;
}

.line-popup-url {
  display: block;
  color: rgba(255,255,255,.70);
  font-size: clamp(11px, 0.8vw, 12px);
  line-height: 1.5;
}

.line-menu:hover .line-popup,
.line-menu:focus-within .line-popup {
  z-index: 20;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.line-trigger:focus-visible {
  outline: 2px solid rgba(255,255,255,.95);
  outline-offset: 2px;
}
.menu         { left: 91.6%; top: 1.4%; width: 4.0%; height: 6.5%; }

/* Bottom cards */
.hall-rental  { left: 3.3%; top: 79.0%; width: 30.8%; height: 14.4%; }
.booking-live { left: 34.1%; top: 79.0%; width: 30.8%; height: 14.4%; }
.schedule-card{ left: 64.8%; top: 79.0%; width: 30.5%; height: 14.4%; }

/* Keep the original aspect ratio and make the full composition visible on small screens. */
@media (max-width: 760px) {
  .page { min-width: 760px; }
  body { overflow-x: auto; }
  .line-popup {
  z-index: 20;
    width: 280px;
    min-width: 280px;
    right: -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}


/* Top page flyer slot */
.next-live-label{
  position:absolute;
  top:22.512vw;
  right:4.63%;
  width:17.94%;
  aspect-ratio:2048 / 780;
  display:block;
  z-index:6;
  background:url("assets/next-stage-ribbon-user.png") center / 100% 100% no-repeat;
  filter:brightness(.78) saturate(.82) contrast(1.05) drop-shadow(0 10px 18px rgba(0,0,0,.28));
  opacity:.96;
  pointer-events:none;
}
.next-live-label-text{display:none;}
.next-live-label::before,
.next-live-label::after{content:none;}
.next-live-flyer{
  position:absolute;
  right:8.0%;
  top:26.734vw;
  width:11.2%;
  aspect-ratio:210 / 297;
  display:block;
  z-index:5;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,.52);
  background:transparent;
  box-shadow:0 16px 42px rgba(0,0,0,.34);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
.next-live-flyer:hover,.next-live-flyer:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 22px 50px rgba(0,0,0,.42);
  border-color:rgba(255,255,255,.8);
  outline:none;
}
.next-live-flyer::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.18);
  pointer-events:none;
}
/* Label and flyer share the same percentage-based reference frame at every size. */

/* Independent vector navigation icons (no symbols embedded in the hero image). */
.hotspot.x,.hotspot.instagram,.hotspot.menu{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f8faff;
  line-height:normal;
}
.hotspot.x{left:82.7%;top:1.9%;width:3.15%;height:5.2%}
.hotspot.instagram{left:86.0%;top:1.9%;width:3.15%;height:5.2%}
.hotspot.menu{left:92.1%;top:1.6%;width:3.7%;height:6%}
.hotspot.x svg,.hotspot.instagram svg,.hotspot.menu svg,
.line-trigger svg{width:70%;height:70%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hotspot.menu svg{width:85%;height:85%;stroke-width:1.75}
.hotspot.x:hover,.hotspot.instagram:hover,.hotspot.menu:hover,
.hotspot.x:focus-visible,.hotspot.instagram:focus-visible,.hotspot.menu:focus-visible{color:#9ed1ff}
.line-menu{left:88.95%;top:1.75%;width:3.25%;min-width:0}
.line-trigger{border:0;aspect-ratio:1;background:none;color:#f8faff}
.line-trigger::before,.line-trigger::after{display:none}
.line-trigger svg{display:block;width:100%;height:100%;stroke-width:2.05}
.line-trigger:hover,.line-trigger:focus-visible{color:#9ed1ff}


/* Evenly spaced, equally sized social/navigation icons */
.hotspot.x,.hotspot.instagram,.hotspot.menu{top:1.8%;width:3.6%;height:5.6%}
.hotspot.x{left:81.9%}
.hotspot.instagram{left:85.8%}
.line-menu{left:89.7%;top:1.8%;width:3.6%;min-width:0;display:flex;justify-content:center;align-items:center}
.hotspot.menu{left:93.6%}
.hotspot.x svg,.hotspot.instagram svg,.hotspot.menu svg{width:78%;height:78%}
.line-trigger{width:100%;height:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:0}
.line-trigger svg{width:90%;height:90%;stroke-width:1.8}
@media(max-width:760px){.line-menu{min-width:0}}

.line-trigger text{paint-order:stroke; text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased;}



/* TOP — real HTML/CSS cards, not image slices or hotspots. */
.top-feature-links {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:93.4%;
  margin:0 auto;
  padding:0;
  gap:0;
  line-height:normal;
  background:#06152c;
}
.top-feature-card {
  position:relative;
  isolation:isolate;
  min-height:clamp(94px,8.25vw,180px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-align:center;
  gap:clamp(6px,.65vw,13px);
  padding:12px 10px 10px;
  color:#f5f5ff;
  background:linear-gradient(165deg,#081b3b 0%,#06142d 75%,#081a37 100%);
  border:1px solid rgba(114,157,210,.5);
  box-shadow:inset 0 0 22px rgba(23,68,139,.13);
  transform:translateY(0);
  transition:transform 320ms cubic-bezier(.2,.7,.2,1), background 320ms ease,
             box-shadow 320ms ease, filter 320ms ease;
}
.top-feature-card + .top-feature-card {
  /* Every card keeps all four borders, including BOOKING LIVE and SCHEDULE. */
  border-left:1px solid rgba(114,157,210,.5);
  margin-left:-1px;
}
.top-feature-card:hover,
.top-feature-card:focus-visible {
  border-left-color:rgba(131,179,235,.65);
}
.top-feature-card-title {
  font:400 clamp(16px,1.58vw,29px)/1.15 Georgia,'Times New Roman',serif;
  letter-spacing:.20em;
  white-space:nowrap;
  padding-left:.20em;
}
.top-feature-card-caption {
  font:400 clamp(11px,1.06vw,18px)/1.35 'Noto Serif JP','Yu Mincho',serif;
  letter-spacing:.07em;
}
.top-feature-card-arrow {
  font:300 clamp(20px,2vw,34px)/.8 Georgia,serif;
  color:#d7e0f1;
  transform:translateX(0);
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
}
.top-feature-card:hover,
.top-feature-card:focus-visible {
  z-index:2;
  background:linear-gradient(155deg,#102f62 0%,#0a244e 70%,#09214a 100%);
  transform:translateY(-4px);
  filter:brightness(1.08);
  box-shadow:0 14px 24px rgba(0,6,29,.42),inset 0 0 28px rgba(66,133,222,.18);
  outline:none;
  border-color:rgba(131,179,235,.65);
}
.top-feature-card:hover .top-feature-card-arrow,
.top-feature-card:focus-visible .top-feature-card-arrow {transform:translateX(6px);}
.top-site-footer {
  text-align:center;
  padding:clamp(13px,1.35vw,24px) 12px clamp(15px,1.5vw,26px);
  background:#041126;
  color:#c5c7cf;
  font:400 clamp(9px,.75vw,13px)/1.3 Georgia,serif;
  letter-spacing:.035em;
  line-height:normal;
}
@media(max-width:760px){
  .top-feature-card{min-height:94px;gap:6px;}
  .top-feature-card-title{font-size:15px;letter-spacing:.13em}
  .top-feature-card-caption{font-size:10px}
  .top-feature-card-arrow{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .top-feature-card,.top-feature-card-arrow{transition:none;}
  .top-feature-card:hover,.top-feature-card:focus-visible{transform:none;}
}

/* ACCESS on TOP */
html {scroll-behavior:smooth}
.top-access {width:93.4%;margin:0 auto;padding:clamp(48px,5.5vw,90px) clamp(20px,4vw,65px) clamp(54px,6vw,96px);background:linear-gradient(145deg,#06142b,#0a1b34 58%,#051127);color:#eef3fc;border-inline:1px solid rgba(110,153,206,.3);line-height:1.6}
.top-access-title {text-align:center;margin-bottom:clamp(28px,3.8vw,52px)}
.top-access-title>span,.top-access-brand {font:400 11px/1.5 Georgia,serif;letter-spacing:.2em;color:#c9b080}
.top-access-title h2 {font:400 clamp(34px,4vw,60px)/1.2 Georgia,serif;letter-spacing:.19em;margin:8px 0 20px;padding-left:.19em}
.top-access-title i {display:block;width:40px;height:1px;margin:auto;background:#c9b080}
.top-access-layout {max-width:1250px;margin:auto;display:grid;grid-template-columns:minmax(230px,.9fr) minmax(0,1.25fr);align-items:center;gap:clamp(24px,4vw,62px)}
.top-access-details h3 {font:500 clamp(19px,1.7vw,26px)/1.55 'Noto Serif JP','Yu Mincho',serif;letter-spacing:.05em;margin:13px 0 23px}
.top-access-details address,.top-access-rail {font:400 clamp(13px,1.05vw,16px)/1.95 'Noto Serif JP','Yu Mincho',serif;color:#d2dce9;letter-spacing:.035em;font-style:normal;margin:0 0 16px}
.top-access-maplink {margin-top:12px;padding:15px 18px;border:1px solid #829bc0;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;color:white;text-decoration:none;font:500 12px/1.5 Arial,sans-serif;letter-spacing:.08em;transition:background .2s}
.top-access-maplink:hover,.top-access-maplink:focus-visible {background:#1b395a}
.top-access-maplink span {color:#c9b080;font-size:18px}
.top-access-map {height:clamp(340px,30vw,470px);border:1px solid rgba(144,177,217,.65);background:#d8dce5;box-shadow:0 16px 36px rgba(0,0,0,.25)}
.top-access-map iframe {display:block;width:100%;height:100%;border:0}
@media(max-width:900px){.top-access-layout{grid-template-columns:1fr}.top-access-map{height:340px}}
@media(max-width:760px){.top-access{width:calc(100vw - 28px);margin-left:14px;padding:40px 18px 48px}.top-access-map{height:310px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* BLUE: actual mobile viewport width (override old 760px minimum). */
@media (max-width:760px) {
 html, body {width:100%;max-width:100%;overflow-x:clip;}
 .page {min-width:0!important;width:100%!important;max-width:100%;}
 .page-image {width:100%;height:auto;}
 .top-feature-links {width:calc(100% - 24px);grid-template-columns:1fr;}
 .top-feature-card {min-height:96px;}
 .top-feature-card + .top-feature-card {margin-left:0;margin-top:-1px;}
 .top-access {width:calc(100% - 24px);margin:0 12px;padding:36px 18px 44px;}
 .top-access-maplink {max-width:100%;gap:12px;padding:12px;overflow-wrap:anywhere;}
 .top-access-title h2 {font-size:clamp(28px,9vw,38px);}
}

/* NextStage poster: rendered as actual image on desktop and mobile to avoid stale CSS backgrounds */
.home-stage > .next-live-flyer > .next-live-flyer-image {display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;max-width:none!important;opacity:1!important;visibility:visible!important;}