/* ============================================================
   JAZZIN Official — style.css
   Deep Sea Glassmorphism / SPA / Loading Screen
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-deep:      #000a10;
  --glass-bg:     rgba(0, 30, 50, 0.45);
  --glass-border: rgba(100, 200, 255, 0.12);
  --accent-1:     #00d4ff;
  --accent-2:     #0077b6;
  --accent-3:     #7fffd4;
  --text-main:    #e8f4f8;
  --text-sub:     rgba(200, 230, 245, 0.6);
  --font-display: 'Bebas Neue', sans-serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;
}

html {
  /* ページが position:fixed で覆うため、bodyのスクロールは不要 */
  overflow: hidden;
  height: 100%;
  height: -webkit-fill-available;
}

body {
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-body);
  font-weight: 300;
  overflow: hidden;
  height: 100%;
  height: -webkit-fill-available;
  cursor: none;
  /* Prevent iOS auto font-size boost on rotate */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--accent-2); border-radius: 2px; }

body::before {
  content: ''; position: fixed; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03; pointer-events: none;
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
#loading-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  inset: 0; z-index: 1000;
  background: #000810;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* will-change prevents Safari flash when transitioning */
  will-change: opacity, transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: opacity 0.8s cubic-bezier(0.23,1,0.32,1),
              transform 0.8s cubic-bezier(0.23,1,0.32,1);
}
#loading-screen.fade-out {
  opacity: 0;
  transform: scale(1.04) translateZ(0);
  pointer-events: none;
}

/* オーロラ */
.loading-aurora { position: absolute; inset: 0; pointer-events: none; }
.loading-blob {
  position: absolute; border-radius: 50%;
  filter: blur(100px); opacity: 0;
  animation: loadBlobIn 1s ease forwards;
}
.loading-blob-1 {
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, #003d5b, transparent 70%);
  top: -15%; left: -15%; animation-delay: 0.1s;
}
.loading-blob-2 {
  width: 45vw; height: 45vw;
  background: radial-gradient(circle, #001a2e, transparent 70%);
  bottom: -10%; right: -10%; animation-delay: 0.3s;
}
.loading-blob-3 {
  width: 35vw; height: 35vw;
  background: radial-gradient(circle, rgba(0,212,255,0.12), transparent 70%);
  top: 30%; left: 25%; animation-delay: 0.5s;
}
@keyframes loadBlobIn {
  to { opacity: 1; }
}

/* コーナーデコ */
.loading-corner-tl, .loading-corner-tr,
.loading-corner-bl, .loading-corner-br {
  position: absolute; width: 40px; height: 40px;
  opacity: 0; animation: cornerFadeIn 0.6s 0.4s ease forwards;
}
.loading-corner-tl { top: 28px; left: 28px; border-top: 1px solid rgba(0,212,255,0.4); border-left: 1px solid rgba(0,212,255,0.4); }
.loading-corner-tr { top: 28px; right: 28px; border-top: 1px solid rgba(0,212,255,0.4); border-right: 1px solid rgba(0,212,255,0.4); }
.loading-corner-bl { bottom: 28px; left: 28px; border-bottom: 1px solid rgba(0,212,255,0.4); border-left: 1px solid rgba(0,212,255,0.4); }
.loading-corner-br { bottom: 28px; right: 28px; border-bottom: 1px solid rgba(0,212,255,0.4); border-right: 1px solid rgba(0,212,255,0.4); }
@keyframes cornerFadeIn { to { opacity: 1; } }

/* ロゴ */
.loading-content {
  text-align: center; position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.loading-logo-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.loading-logo-line {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-1), transparent);
  animation: lineExpand 0.8s 0.5s cubic-bezier(0.23,1,0.32,1) forwards;
}
@keyframes lineExpand { to { width: 280px; } }

.loading-logo {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 11rem);
  letter-spacing: 0.12em;
  line-height: 1;
  opacity: 0;
  background: linear-gradient(160deg,
    #ffffff 0%, #c8e8f0 20%,
    var(--accent-1) 45%, var(--accent-3) 65%,
    #ffffff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation:
    logoReveal 1s 0.2s cubic-bezier(0.23,1,0.32,1) forwards,
    shimmerLoad 3s 1.2s ease infinite;
  filter: drop-shadow(0 0 40px rgba(0,212,255,0.25));
}
@keyframes logoReveal {
  from { opacity: 0; transform: translateY(20px) scale(0.96); letter-spacing: 0.3em; }
  to   { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.12em; }
}
@keyframes shimmerLoad {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.loading-tagline {
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  font-style: italic; font-weight: 300;
  color: rgba(200,230,245,0.5); letter-spacing: 0.2em;
  opacity: 0;
  animation: taglineReveal 0.8s 0.9s ease forwards;
}
@keyframes taglineReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* プログレスバー */
.loading-bar-wrap {
  width: 200px; height: 1px;
  background: rgba(100,200,255,0.12);
  border-radius: 1px; overflow: hidden;
  opacity: 0; animation: barWrapFadeIn 0.4s 1s ease forwards;
}
@keyframes barWrapFadeIn { to { opacity: 1; } }

.loading-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-1), var(--accent-3));
  border-radius: 1px;
  animation: barProgress 3s 1s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes barProgress { to { width: 100%; } }

/* ============================================================
   MAIN SITE REVEAL
   ============================================================ */
#main-site {
  opacity: 1; position: relative;
  transition: opacity 0.6s ease;
}
#main-site.site-hidden { opacity: 0; }
#main-site.site-visible { opacity: 1; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999; mix-blend-mode: screen;
}
.cursor-dot {
  width: 8px; height: 8px; background: var(--accent-1);
  border-radius: 50%; position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--accent-1), 0 0 24px var(--accent-1);
}
.cursor-ring {
  width: 40px; height: 40px;
  border: 1px solid rgba(0,212,255,0.5);
  border-radius: 50%; position: absolute;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.18,0.89,0.32,1.28),
              height 0.3s cubic-bezier(0.18,0.89,0.32,1.28);
}
.cursor-hover .cursor-ring { width: 60px; height: 60px; }
.cursor-hover .cursor-dot  { transform: translate(-50%,-50%) scale(0.5); }

/* ============================================================
   AURORA BACKGROUND
   ============================================================ */
.aurora-wrap {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  /* Isolate compositing layer to prevent z-index Safari bugs */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.aurora-blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.18;
  animation: auroraFloat linear infinite;
  /* GPU layer for smooth animation */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.aurora-blob:nth-child(1) { width:70vw;height:70vw;background:radial-gradient(circle,#0077b6,transparent 70%);top:-20%;left:-20%;animation-duration:22s; }
.aurora-blob:nth-child(2) { width:50vw;height:50vw;background:radial-gradient(circle,#00d4ff,transparent 70%);bottom:-10%;right:-10%;animation-duration:18s;animation-direction:reverse; }
.aurora-blob:nth-child(3) { width:40vw;height:40vw;background:radial-gradient(circle,#7fffd4,transparent 70%);top:40%;left:30%;animation-duration:28s; }
@keyframes auroraFloat {
  0%   { transform:translate3d(0,0,0) scale(1); }
  33%  { transform:translate3d(5vw,8vh,0) scale(1.1); }
  66%  { transform:translate3d(-3vw,5vh,0) scale(0.95); }
  100% { transform:translate3d(0,0,0) scale(1); }
}
/* Mobile: reduce blur for performance */
@media (max-width: 768px) {
  .aurora-blob { filter: blur(50px); opacity: 0.14; }
}

/* ============================================================
   GLASS CARD
   ============================================================ */
.glass-card {
  background: rgba(0,25,45,0.55);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(100,200,255,0.1);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  /* Safari: isolation prevents backdrop-filter from leaking through z-index */
  isolation: isolate;
  /* Promote to own layer */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav#mainNav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 40px;
  /* iOS safe-area対応 (notch/Dynamic Island) */
  padding-top: max(20px, env(safe-area-inset-top, 20px));
  padding-left: max(40px, env(safe-area-inset-left, 40px));
  padding-right: max(40px, env(safe-area-inset-right, 40px));
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.4s, padding 0.4s;
}
nav#mainNav.scrolled {
  background: rgba(0,10,18,0.88);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 14px 40px;
  border-bottom: 1px solid var(--glass-border);
  /* Safari: will-change for sticky nav performance */
  will-change: background;
}
/* ============================================================
   HAMBURGER
   ============================================================ */
.hamburger {
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 6px;
  background: none; border: none; cursor: none; padding: 6px;
}
.hamburger span {
  display: block; width: 26px; height: 1.5px; background: var(--accent-1);
  transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), opacity 0.3s, width 0.3s;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   DRAWER
   ============================================================ */
.drawer-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  inset: 0; z-index: 98;
  background: rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 99;
  /* 「お問い合わせ」が収まるよう幅を確保 */
  width: min(360px, 90vw);
  background: rgba(0,15,28,0.96);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  backdrop-filter: blur(30px) saturate(200%);
  border-right: 1px solid var(--glass-border);
  padding: 88px 32px 32px;
  /* Use translate3d for hardware acceleration + fix Safari flicker */
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.23,1,0.32,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  will-change: transform;
  /* Safari: isolation for correct stacking */
  isolation: isolate;
}
.drawer.open {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

.drawer-link {
  font-family: var(--font-display);
  /* ドロワー幅(min 288px=90vw on 320px screen) に確実に収まるサイズ */
  font-size: clamp(1.4rem, 6vw, 2rem);
  letter-spacing: 0.06em;
  color: var(--text-sub); text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(100,200,255,0.06);
  border-left: none; border-right: none; border-top: none;
  background: none; cursor: none; text-align: left; width: 100%;
  transition: color 0.3s, padding-left 0.3s;
  position: relative;
  white-space: nowrap;
  overflow: visible;
  line-height: 1.3;
  display: block;
}
.drawer-link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-3));
  transition: width 0.4s cubic-bezier(0.23,1,0.32,1);
}
.drawer-link:hover { color: var(--text-main); padding-left: 10px; }
.drawer-link:hover::after { width: 100%; }

.drawer-social { margin-top: auto; padding-top: 20px; display: flex; gap: 16px; }
.drawer-social a {
  font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--text-sub); text-decoration: none; opacity: 0.5;
  transition: opacity 0.3s; cursor: none;
}
.drawer-social a:hover { opacity: 1; }

/* 極端に幅が狭い端末（320px以下）でさらに小さく */
@media (max-width: 340px) {
  .drawer { width: 100vw; padding: 80px 20px 28px; }
  .drawer-link { font-size: 1.4rem; letter-spacing: 0.05em; }
}

/* ============================================================
   SPA PAGE SYSTEM
   ============================================================ */
/* ============================================================
   PAGE SYSTEM — シネマティック・トランジション
   ============================================================ */
/* ============================================================
   ページ表示システム — 完全再設計（二重表示バグ修正）
   全ページを position:fixed で重ねて、z-index で制御する
   ============================================================ */
.page {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
  /* デフォルトは非表示 */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* アクティブ（表示中）のページ */
.page.page-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  animation: none !important; /* page-enter の animation を確実にリセット */
}
/* page-active 内の stagger 要素は表示状態に固定・再アニメしない */
.page.page-active [data-stagger] {
  opacity: 1 !important;
  transform: translateY(0) translateZ(0) !important;
  animation: none !important;
}

/* EXIT アニメーション */
.page.page-exit {
  pointer-events: none;
  visibility: visible;
  will-change: opacity, transform;
  animation: pageExit 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 3;
}
.page.page-exit [data-stagger] { animation: none !important; opacity: 1 !important; transform: none !important; }
@keyframes pageExit {
  0%   { opacity: 1; transform: translateY(0) translateZ(0); }
  100% { opacity: 0; transform: translateY(-20px) translateZ(0); }
}

/* ENTER アニメーション */
.page.page-enter {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  will-change: opacity, transform;
  animation: pageEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}
@keyframes pageEnter {
  0%   { opacity: 0; transform: translateY(18px) translateZ(0); }
  100% { opacity: 1; transform: translateY(0) translateZ(0); }
}

/* stagger 対象要素: page-enter の時のみアニメーション */
.page.page-enter [data-stagger] {
  opacity: 0;
  transform: translateY(24px) translateZ(0);
  animation: staggerReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}
@keyframes staggerReveal {
  0%   { opacity: 0; transform: translateY(24px) translateZ(0); }
  100% { opacity: 1; transform: translateY(0) translateZ(0); }
}

/* ページ内スクロール領域 */
.page-inner {
  padding-top: 80px;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
}


.page-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 24px 0 0 clamp(20px,5vw,80px);
  font-family: var(--font-body); font-size: 0.75rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-1); background: none; border: none;
  cursor: none; transition: gap 0.3s, opacity 0.3s; opacity: 0.7;
}
.page-back-btn:hover { gap: 14px; opacity: 1; }

.page-footer {
  margin-top: auto;
  padding: 30px clamp(20px,5vw,80px);
  border-top: 1px solid var(--glass-border);
  text-align: center;
}

/* ============================================================
   SECTION COMMON
   ============================================================ */
section { position: relative; z-index: 2; }

.section-label {
  font-size: 0.7rem; letter-spacing: 0.35em;
  color: var(--accent-1); text-transform: uppercase;
  margin-bottom: 16px; opacity: 0.8;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem,5vw,4rem);
  font-weight: 300; line-height: 1.1; margin-bottom: 24px;
}
.deco-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 0 auto 16px; opacity: 0.4;
}
.deco-divider::before, .deco-divider::after {
  content: ''; height: 1px; width: 60px;
  background: linear-gradient(90deg, transparent, var(--accent-1));
}
.deco-divider::after { background: linear-gradient(90deg, var(--accent-1), transparent); }
.deco-divider span { font-size: 0.6rem; letter-spacing: 0.3em; color: var(--accent-1); }

/* ============================================================
   REVEAL ANIMATION — Safari互換・高パフォーマンス版
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px) translateZ(0);
  transition:
    opacity   0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  will-change: auto;
  transition-delay: 0s; /* visible後は delay リセット */
}
/* page-active 内で visible になった要素は絶対に再アニメしない */
.page.page-active .reveal.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  transition: none;
}
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.32s; }
.reveal-delay-4 { transition-delay: 0.44s; }

/* ============================================================
   HERO
   ============================================================ */
#top {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  /* ナビバー＋余白：PC版でコンテンツがスレスレにならないよう上下に余裕を持たせる */
  padding: clamp(90px, 12vh, 140px) 24px clamp(60px, 8vh, 100px);
  overflow: hidden;
}
.particles-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.hero-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.5em;
  color: var(--accent-1); text-transform: uppercase;
  margin-bottom: 24px; position: relative; z-index: 2;
}
/* ナビ ロゴ SVG */
.nav-logo-btn {
  background: none; border: none; cursor: none; padding: 0;
  display: flex; align-items: center;
  flex-shrink: 0;
}
.nav-logo-svg {
  /* 高さ固定・幅はviewBoxのアスペクト比（148:28 ≈ 5.28:1）で自動計算 */
  height: clamp(20px, 2.8vw, 28px);
  width: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(0,212,255,0.18));
  transition: filter 0.4s ease;
}
.nav-logo-btn:hover .nav-logo-svg {
  filter: drop-shadow(0 0 16px rgba(0,212,255,0.5));
}

/* ヒーロー ロゴ SVG */
.hero-logo-wrap {
  position: relative; z-index: 2;
  margin-bottom: 0;
}
.hero-logo-svg {
  width: clamp(280px, 70vw, 700px);
  height: auto;
  filter:
    drop-shadow(0 0 30px rgba(0,212,255,0.2))
    drop-shadow(0 0 80px rgba(0,212,255,0.08));
  /* Only animate on non-mobile */
  animation: heroLogoShimmer 6s 1.5s ease infinite;
}
@keyframes heroLogoShimmer {
  0%,100% { filter: drop-shadow(0 0 30px rgba(0,212,255,0.2)) drop-shadow(0 0 80px rgba(0,212,255,0.08)); }
  50%     { filter: drop-shadow(0 0 50px rgba(0,212,255,0.4)) drop-shadow(0 0 100px rgba(127,255,212,0.15)); }
}
/* Mobile: skip continuous filter animation — too expensive on Safari */
@media (max-width: 768px) {
  .hero-logo-svg {
    animation: none;
    filter: drop-shadow(0 0 20px rgba(0,212,255,0.25));
  }
}

/* ローディング ロゴ SVG */
.loading-logo {
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  animation: logoReveal 1s 0.2s cubic-bezier(0.23,1,0.32,1) forwards;
}
.loading-logo-svg {
  width: clamp(200px, 60vw, 380px);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(0,212,255,0.25));
  animation: loadLogoShimmer 3s 1.2s ease infinite;
}
@keyframes loadLogoShimmer {
  0%,100% { filter: drop-shadow(0 0 40px rgba(0,212,255,0.25)); }
  50%     { filter: drop-shadow(0 0 60px rgba(0,212,255,0.5)) drop-shadow(0 0 20px rgba(127,255,212,0.3)); }
}

/* フッターロゴ */
.footer-logo {
  font-family: var(--font-display);
  font-size: 2rem; letter-spacing: .2em;
  background: linear-gradient(135deg,#fff,var(--accent-1));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 12px;
}
.hero-subtitle-wrap {
  display: flex; align-items: center; gap: 20px;
  margin-top: 32px; position: relative; z-index: 2;
}
.hero-line   { flex:1; height:1px; max-width:80px; background:linear-gradient(90deg,transparent,var(--accent-1)); }
.hero-line-r { flex:1; height:1px; max-width:80px; background:linear-gradient(90deg,var(--accent-1),transparent); }
.hero-subtitle {
  font-family: var(--font-serif); font-size: clamp(1rem,2.5vw,1.4rem);
  font-style: italic; font-weight: 300; color: var(--text-sub); letter-spacing: 0.1em;
}
#hero-catchcopy {
  font-family: var(--font-serif); font-size: clamp(0.85rem,2vw,1.1rem);
  font-style: italic; font-weight: 300; color: rgba(200,230,245,0.5);
  max-width: 480px; line-height: 1.8; margin-top: 20px;
  position: relative; z-index: 2;
  white-space: pre-wrap; /* 改行保持 */
  word-break: break-word;
}
@keyframes fadeSlideUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* TOPページ内インライン告知セクション */
#inline-show-section {
  width: 100%;
  display: flex; justify-content: center;
  /* 初期状態: スクロールフェードイン用 */
  opacity: 0;
  transform: translateY(50px) translateZ(0);
  -webkit-transform: translateY(50px) translateZ(0);
  transition:
    opacity   1.0s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
#inline-show-section.show-section-visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  -webkit-transform: translateY(0) translateZ(0);
}
#inline-show {
  padding: clamp(60px,8vw,100px) clamp(20px,5vw,80px);
  text-align: center;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  border-top: 1px solid rgba(0, 212, 255, 0.10);
  position: relative;
}
#inline-show::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.4), transparent);
  opacity: 0;
  transition: opacity 0.8s ease 0.5s;
}
#inline-show-section.show-section-visible #inline-show::before {
  opacity: 1;
}
/* シーケンシャルフェードイン */
.show-reveal {
  opacity: 0;
  transform: translateY(24px) translateZ(0);
  -webkit-transform: translateY(24px) translateZ(0);
  transition:
    opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
#inline-show-section.show-section-visible .show-reveal {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  -webkit-transform: translateY(0) translateZ(0);
}
.show-reveal-1 { transition-delay: 0.18s; }
.show-reveal-2 { transition-delay: 0.32s; }
.show-reveal-3 { transition-delay: 0.46s; }
.show-reveal-4 { transition-delay: 0.60s; }

/* ============================================================
   MEMBERS — リッチアニメーション版
   ============================================================ */
#members { padding: clamp(60px,8vw,100px) clamp(20px,5vw,80px); }
.members-header {
  text-align: center;
  margin-bottom: 56px;
}
/* ヘッダー内の各要素: ページ入場時のstagger演出を強化 */
#page-members.page-enter .members-header .section-label,
#page-members.page-enter .members-header .section-title,
#page-members.page-enter .members-header .deco-divider {
  /* data-staggar が付いているので既存の staggerReveal が効く */
}
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap: 28px; max-width: 1200px; margin: 0 auto;
}

/* ── スクロール入場アニメーション ── */
.member-card-anim {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity   0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 方向別の初期オフセット */
.member-card-anim.from-bottom { transform: translateY(50px) translateZ(0); }
.member-card-anim.from-left   { transform: translateX(-50px) translateZ(0); }
.member-card-anim.from-right  { transform: translateX(50px) translateZ(0); }

/* 入場完了 */
.member-card-anim.member-card-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) translateZ(0);
}

/* ── カード本体 ── */
.member-card {
  padding: 36px 28px 28px;
  text-align: center;
  cursor: pointer !important;
  position: relative;
  overflow: hidden;
  transition:
    transform    0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow   0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease,
    opacity      0.75s cubic-bezier(0.16, 1, 0.3, 1);
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* ── オーラ背景（カード個別の発光） ── */
.member-card-bg-aura {
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,212,255,0.07) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 0;
}

/* hover effects only on pointer devices */
@media (hover: hover) and (pointer: fine) {
  .member-card:hover .member-card-bg-aura { opacity: 1; }
  .member-card:hover::before { opacity: 1; }
  .member-card:hover::after  { top: 200%; transition: top 0.7s cubic-bezier(0.4,0,0.2,1); }
  .member-card:hover {
    transform: translateY(-10px) scale(1.02) translateZ(0);
    box-shadow:
      0 24px 64px rgba(0,0,0,0.65),
      0 0 0 1px rgba(0,212,255,0.28),
      0 0 40px rgba(0,212,255,0.07);
  }
  .member-card:hover .member-img-wrap {
    border-color: rgba(0,212,255,0.6);
    box-shadow: 0 0 0 6px rgba(0,212,255,0.09), 0 0 50px rgba(0,212,255,0.25);
    transform: scale(1.06);
  }
  .member-card:hover .member-img-ring-1 { opacity: 0.6; transform: scale(1.18); }
  .member-card:hover .member-img-ring-2 { opacity: 0.3; transform: scale(1.34); }
  .member-card:hover .member-img-wrap img { transform: scale(1.1); }
  .member-card:hover .member-name { color: #fff; letter-spacing: 0.04em; }
  .member-card:hover .member-instrument { letter-spacing: .36em; opacity: 1; }
  .member-card:hover .member-card-tap-hint { opacity: 1; transform: translateY(0); }
}

/* 上部光源グラデ */
.member-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: 20px;
  background: radial-gradient(ellipse at 50% -10%, rgba(0,212,255,0.14), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}
/* 走査線エフェクト */
.member-card::after {
  content: '';
  position: absolute; left: 0; right: 0;
  top: -100%; height: 60%;
  background: linear-gradient(to bottom, transparent, rgba(0,212,255,0.06), transparent);
  pointer-events: none;
  transition: top 0s;
  z-index: 0;
}

/* ── アイコン画像 ── */
.member-img-wrap {
  width: 110px; height: 110px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(0,212,255,0.18);
  box-shadow: 0 0 0 6px rgba(0,212,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
  background: rgba(0,50,80,0.5);
  transition:
    border-color 0.5s ease,
    box-shadow   0.5s ease,
    transform    0.5s cubic-bezier(0.16,1,0.3,1);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  position: relative;
  z-index: 1;
}

/* ── 画像の外側に広がるリング（hover時に展開） ── */
.member-img-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,0.3);
  pointer-events: none;
  /* img-wrapの外側に配置するためpositionを調整 */
  top: 50%; left: 50%;
  width: 110px; height: 110px;
  margin-top: -55px; margin-left: -55px;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity   0.5s ease,
    transform 0.5s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
  overflow: visible;
}
/* img-wrap の overflow:hidden をかいくぐるため、リングはカード直下に移動 */
/* ※ 実装上の都合でリングはimg-wrapの兄弟要素として配置 */
.member-img-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0,212,255,0.25);
  pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% - 11px)) scale(1);
  opacity: 0;
  transition:
    opacity   0.55s ease,
    transform 0.55s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
.member-img-ring-1 { width: 130px; height: 130px; }
.member-img-ring-2 { width: 160px; height: 160px; border-color: rgba(0,212,255,0.12); }

.member-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
  position: relative; z-index: 1;
}

.member-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg,rgba(0,119,182,.3),rgba(0,212,255,.1));
  color: var(--accent-1);
  position: relative; z-index: 1;
}

/* ── テキスト ── */
.member-name {
  font-family: var(--font-serif);
  font-size: 1.6rem; font-weight: 300;
  margin-bottom: 8px;
  transition: color 0.3s, letter-spacing 0.4s cubic-bezier(0.16,1,0.3,1);
  position: relative; z-index: 1;
}

.member-instrument {
  font-size: .82rem;
  letter-spacing: .28em;
  color: var(--accent-1);
  text-transform: uppercase;
  margin-bottom: 0;
  transition: letter-spacing 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
  opacity: 0.85;
  position: relative; z-index: 1;
}

/* ── 「詳細を見る」ヒント ── */
.member-card-tap-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   0.4s ease,
    transform 0.4s cubic-bezier(0.16,1,0.3,1);
  position: relative; z-index: 1;
}
.tap-hint-line {
  flex: 1; max-width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.5));
}
.tap-hint-line + .tap-hint-text + .tap-hint-line {
  background: linear-gradient(90deg, rgba(0,212,255,0.5), transparent);
}
.tap-hint-text {
  font-size: .6rem; letter-spacing: .2em;
  color: var(--accent-1); text-transform: uppercase;
  white-space: nowrap;
}

/* モバイル: hover なしでもヒントを常時薄く表示 */
@media (hover: none), (pointer: coarse) {
  .member-card-tap-hint {
    opacity: 0.45;
    transform: translateY(0);
  }
}

/* ── 入場済みカードにパルス発光（連続アニメ） ── */
.member-card-anim.member-card-visible .member-img-wrap {
  animation: memberImgPulse 4s ease-in-out infinite;
  animation-delay: var(--card-delay, 0s);
}
@keyframes memberImgPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(0,212,255,0.04), 0 8px 32px rgba(0,0,0,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(0,212,255,0.10), 0 8px 40px rgba(0,0,0,0.5), 0 0 24px rgba(0,212,255,0.12); }
}

/* hover中はパルスを一時停止 */
@media (hover: hover) and (pointer: fine) {
  .member-card:hover .member-img-wrap {
    animation-play-state: paused;
  }
}

/* ============================================================
   NEXT SHOW
   ============================================================ */
#next-show { padding:clamp(60px,8vw,100px) clamp(20px,5vw,80px);text-align:center; }
.show-card-wrap { max-width:700px; width:100%; margin:0 auto; }
.show-card, .show-card-page {
  padding:clamp(40px,6vw,70px) clamp(30px,5vw,60px);
  position:relative;overflow:hidden;
}
.show-card::after, .show-card-page::after {
  content:'';position:absolute;top:-50%;left:50%;width:200%;height:200%;
  background:radial-gradient(circle,rgba(0,212,255,.04),transparent 70%);
  animation:showGlow 4s ease-in-out infinite alternate;pointer-events:none;
  will-change: opacity;
}
@keyframes showGlow { from{opacity:.5} to{opacity:1} }
/* Mobile: disable show-card pseudo animation for perf */
@media (max-width: 768px) {
  .show-card::after, .show-card-page::after { animation: none; opacity: 0.7; }
}
.show-date {
  font-family:var(--font-display);font-size:clamp(3rem,8vw,6rem);line-height:1;letter-spacing:.05em;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.show-title-text { font-family:var(--font-serif);font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:300;margin:16px 0 8px; }
.show-venue { font-size:.8rem;letter-spacing:.2em;color:var(--accent-1);text-transform:uppercase;margin-bottom:24px; }
.show-detail { font-size:.9rem;line-height:1.9;color:var(--text-sub);max-width:450px;margin:0 auto 28px;white-space:pre-wrap;word-break:break-word; }
/* 告知画像（任意） — オリジナル比率・サイズを完全保持 */
.show-img-wrap {
  margin: 0 auto 28px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.show-img {
  /* オリジナルサイズを尊重。ただし画面幅を超える場合のみ縮小 */
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,212,255,0.12);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease;
}
.show-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 56px rgba(0,0,0,0.6), 0 0 30px rgba(0,212,255,0.12);
}
/* Constrain hover to pointer devices */
@media (hover: none) {
  .show-img:hover { transform: none; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
  .hero-img-pure-original:hover { transform: none; box-shadow: none; }
}
.no-show { padding:60px 40px;text-align:center;color:var(--text-sub);font-style:italic;font-family:var(--font-serif);font-size:1.2rem; }

/* ============================================================
   COUNTDOWN — リッチ版
   ============================================================ */
.countdown-section {
  margin: 36px 0 28px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}

/* "UNTIL THE SHOW" ラベル */
.countdown-until-label {
  display: flex; align-items: center; gap: 14px;
  width: 100%; justify-content: center;
}
.countdown-until-line {
  flex: 1; max-width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.35));
}
.countdown-until-label .countdown-until-line:last-child {
  background: linear-gradient(90deg, rgba(0,212,255,.35), transparent);
}
.countdown-until-text {
  font-size: .58rem; letter-spacing: .4em;
  color: rgba(0,212,255,.5); text-transform: uppercase;
  white-space: nowrap;
}

/* 数字ブロック行 */
.countdown-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px,2vw,20px);
}

/* : セパレータ */
.countdown-sep {
  font-family: var(--font-display);
  font-size: clamp(1.8rem,5vw,3rem);
  color: rgba(0,212,255,.25);
  line-height: 1;
  padding-top: 6px;
  align-self: flex-start;
  animation: sepPulse 2s ease-in-out infinite;
}
@keyframes sepPulse {
  0%,100% { opacity: .25; }
  50%     { opacity: .7; }
}

/* 各単位アイテム */
.countdown-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: clamp(52px, 12vw, 80px);
}

/* 数字ラッパー（フリップ用） */
.countdown-num-wrap {
  position: relative;
  width: 100%;
  height: clamp(52px, 10vw, 76px);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,20,40,.55);
  border: 1px solid rgba(0,212,255,.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.4);
}
/* 中央の折り目ライン */
.countdown-num-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%; height: 1px;
  background: rgba(0,212,255,.08);
  pointer-events: none;
}
/* 背景の薄い数字（奥行き感） */
.countdown-num-bg {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(2.4rem,6vw,4rem);
  line-height: 1;
  color: rgba(0,212,255,.04);
  user-select: none; pointer-events: none;
}
/* 前面の数字 */
.countdown-num {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(2.2rem,5.5vw,3.6rem);
  line-height: 1;
  background: linear-gradient(170deg, #fff 0%, #a8e8f8 40%, var(--accent-1) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(0,212,255,.3));
}
/* フリップアニメーション */
@keyframes cdFlip {
  0%   { transform: translateY(-12px) scaleY(0.7); opacity: 0; }
  60%  { transform: translateY(3px)   scaleY(1.05); opacity: 1; }
  100% { transform: translateY(0)     scaleY(1);    opacity: 1; }
}
.countdown-num.cd-flip {
  animation: cdFlip 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ラベル文字 */
.countdown-label {
  font-size: .55rem; letter-spacing: .28em;
  color: rgba(200,230,245,.4); text-transform: uppercase;
}

/* 各単位バー（60秒/60分/24時間の残り） */

/* ============================================================
   チケットボタン
   ============================================================ */
.btn-primary {
  display:inline-flex;align-items:center;gap:10px;padding:14px 36px;
  background:linear-gradient(135deg,var(--accent-2),rgba(0,119,182,.5));
  border:1px solid rgba(0,212,255,.3);border-radius:50px;color:#fff;
  font-family:var(--font-body);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;
  transition:all .4s cubic-bezier(0.23,1,0.32,1);
  position:relative;overflow:hidden;margin-top:8px;
  /* Safari: fix button tap */
  -webkit-appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,212,255,0.12);
}
.btn-primary::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,.2),transparent);opacity:0;transition:opacity .3s; }
.btn-primary:hover::before { opacity:1; }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,119,182,.4),0 0 0 1px rgba(0,212,255,.4); }

/* ============================================================
   CONTACT
   ============================================================ */
#contact { padding:clamp(60px,8vw,100px) clamp(20px,5vw,80px); }
.contact-inner { max-width:680px;margin:0 auto; }
.contact-header { text-align:center;margin-bottom:48px; }
.form-group { margin-bottom:24px; }
.form-label { display:block;font-size:.7rem;letter-spacing:.25em;color:var(--accent-1);text-transform:uppercase;margin-bottom:10px; }
.form-control {
  width:100%;padding:14px 20px;
  background:rgba(0,25,45,.6);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);border-radius:10px;
  color:var(--text-main);font-family:var(--font-body);font-size:.9rem;
  transition:border-color .3s,box-shadow .3s;outline:none;resize:vertical;
  /* Safari: prevent auto-styling of inputs */
  -webkit-appearance: none;
  appearance: none;
}
.form-control::placeholder { color:rgba(200,230,245,.25); }
.form-control:focus { border-color:rgba(0,212,255,.4);box-shadow:0 0 0 3px rgba(0,212,255,.08); }
textarea.form-control { min-height:140px; }
.form-submit {
  width:100%;padding:16px;
  background:linear-gradient(135deg,var(--accent-2),#003d5b);
  border:1px solid rgba(0,212,255,.25);border-radius:10px;color:#fff;
  font-family:var(--font-display);font-size:1.1rem;letter-spacing:.2em;cursor:none;
  transition:all .4s cubic-bezier(0.23,1,0.32,1);position:relative;overflow:hidden;
}
.form-submit::before { content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(0,212,255,.15);border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s; }
.form-submit:hover::before { width:400px;height:400px; }
.form-submit:hover { transform:translateY(-2px);box-shadow:0 10px 40px rgba(0,119,182,.4); }
.form-submit:disabled { opacity:.6;cursor:not-allowed;transform:none; }
.form-success {
  display: none;
  text-align: center;
  padding: 40px 28px 32px;
  border-radius: 16px;
  background: rgba(0,212,255,.06);
  border: 1px solid rgba(0,212,255,.2);
  color: var(--text-main);
  animation: formSuccessFadeIn .5s cubic-bezier(0.23,1,0.32,1) forwards;
}
.form-success-icon {
  font-size: 2rem;
  color: var(--accent-1);
  margin-bottom: 12px;
  animation: formSuccessPulse 1.8s ease-in-out infinite;
}
.form-success-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: .2em;
  color: var(--accent-1);
  margin-bottom: 14px;
}
.form-success-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-sub);
  margin-bottom: 28px;
}
.form-success-retry {
  display: inline-block;
  padding: 10px 28px;
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.25);
  border-radius: 8px;
  color: var(--accent-1);
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .12em;
  cursor: pointer;
  transition: all .3s;
}
.form-success-retry:hover {
  background: rgba(0,212,255,.18);
  border-color: rgba(0,212,255,.5);
}
@keyframes formSuccessFadeIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes formSuccessPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.15); }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  position:relative;z-index:2;
  padding:40px clamp(20px,5vw,80px) 30px;
  /* iOS home indicator safe area */
  padding-bottom: max(30px, calc(30px + env(safe-area-inset-bottom, 0px)));
  border-top:1px solid var(--glass-border);text-align:center;
}
.footer-logo { font-family:var(--font-display);font-size:2rem;letter-spacing:.2em;background:linear-gradient(135deg,#fff,var(--accent-1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px; }
.footer-copy { font-size:.72rem;color:var(--text-sub);letter-spacing:.1em; }
.footer-admin-link { margin-top:12px;display:inline-block;font-size:.65rem;color:rgba(100,200,255,.12);text-decoration:none;letter-spacing:.05em;cursor:none;transition:color .4s;background:none;border:none; }
.footer-admin-link:hover { color:rgba(100,200,255,.5); }
/* フッター SNS リンク */
.footer-social { display:flex;justify-content:center;gap:20px;margin:12px 0 16px; }
.footer-social-link { display:inline-flex;align-items:center;gap:7px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-sub);text-decoration:none;opacity:.45;transition:opacity .3s,color .3s; }
.footer-social-link:hover { opacity:1;color:var(--accent-1); }
.footer-social-link svg { flex-shrink:0; }

/* ============================================================
   LOADING PULSE
   ============================================================ */
.loading-pulse { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent-1);animation:pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.4);opacity:.3} }

/* ============================================================
   ADMIN OVERLAY
   ============================================================ */
#admin-overlay { display:none;position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:200;background:linear-gradient(180deg,#000810 0%,#000000 100%); }
#admin-overlay.active { display:flex; }
#login-screen { min-height: 100vh; min-height: 100svh; display:flex;align-items:center;justify-content:center;padding:20px; }
.login-card { width:100%;max-width:420px;padding:48px 40px;text-align:center;position:relative;overflow:hidden; }
.login-inner { position:relative;z-index:2; }
.login-logo { font-family:var(--font-display);font-size:3rem;letter-spacing:.2em;background:linear-gradient(135deg,#fff,var(--accent-1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px; }
.login-tag { font-size:.65rem;letter-spacing:.3em;color:var(--accent-1);text-transform:uppercase;margin-bottom:40px;opacity:.7; }
.login-error { font-size:.8rem;color:#ff6b6b;margin-top:12px;min-height:1.2em; }
.login-back { margin-top:20px;display:block;background:none;border:none;cursor:pointer;color:rgba(100,200,255,.3);font-size:.7rem;letter-spacing:.05em;transition:color .3s;width:100%; }
.login-back:hover { color:rgba(100,200,255,.7); }
#dashboard-screen { display:none; }
#dashboard-screen.active { display:flex; }
.admin-header { position:sticky;top:0;z-index:10;padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,8,16,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);flex-shrink:0; }
.admin-logo { font-family:var(--font-display);font-size:1.6rem;letter-spacing:.2em;color:var(--accent-1);cursor:pointer;transition:opacity .2s; }
.admin-logo:hover { opacity:.75; }
.admin-logo small { font-family:var(--font-body);font-size:.6rem;letter-spacing:.2em;color:var(--text-sub);display:block;margin-top:-4px; }
.admin-logout { padding:8px 20px;background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.2);border-radius:8px;color:#ff8080;font-size:.75rem;letter-spacing:.1em;cursor:pointer;transition:all .3s; }
.admin-logout:hover { background:rgba(255,80,80,.25); }
.admin-body { padding:clamp(24px,4vw,48px) clamp(16px,4vw,48px);max-width:960px;margin:0 auto;display:grid;gap:32px; }
.admin-section { padding:32px;border-radius:16px;background:rgba(0,20,38,.7);border:1px solid var(--glass-border); }
.admin-section-title { font-family:var(--font-display);font-size:1.3rem;letter-spacing:.15em;color:var(--accent-1);margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:10px; }
.admin-section-title .icon { font-size:1rem;opacity:.7; }
.admin-input { width:100%;padding:12px 16px;background:rgba(0,20,40,.8);border:1px solid var(--glass-border);border-radius:8px;color:var(--text-main);font-family:var(--font-body);font-size:.9rem;outline:none;transition:border-color .3s;margin-bottom:12px;-webkit-appearance:none;appearance:none; }
.admin-input:focus { border-color:rgba(0,212,255,.5); }
textarea.admin-input { min-height:80px;resize:vertical; }
/* 全 date/datetime-local 入力のカレンダーアイコンを白色に */
input[type="date"].admin-input,
input[type="datetime-local"].admin-input {
  color-scheme: dark;
}
input[type="date"].admin-input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].admin-input::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  opacity: 0.85;
  width: 18px; height: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: opacity .2s, background .2s;
}
input[type="date"].admin-input::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"].admin-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(255,255,255,0.1);
}
.admin-btn { padding:10px 24px;border-radius:8px;font-size:.8rem;letter-spacing:.1em;cursor:pointer;transition:all .3s;font-family:var(--font-body);border:none; }
.admin-btn-primary { background:linear-gradient(135deg,var(--accent-2),#003d5b);border:1px solid rgba(0,212,255,.3);color:#fff; }
.admin-btn-primary:hover { box-shadow:0 4px 20px rgba(0,119,182,.4);transform:translateY(-1px); }
.admin-btn-danger { background:rgba(255,60,60,.1);border:1px solid rgba(255,60,60,.2);color:#ff8080; }
.admin-btn-danger:hover { background:rgba(255,60,60,.2); }
.admin-btn-sm { padding:6px 16px;font-size:.72rem; }
.admin-btn-secondary {
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.15);
  color: var(--text-sub);
}
.admin-btn-secondary:hover { background: rgba(0,212,255,0.12); color: var(--text-main); }

/* 告知ステータスバー */
.show-status-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(0,10,25,0.6);
  border: 1px solid rgba(0,212,255,0.08);
  margin-bottom: 20px;
}
.show-status-text {
  font-size: .78rem; color: var(--text-sub); letter-spacing: .05em;
}
.show-status-active {
  color: var(--accent-3);
}

/* 日付インプットラッパー */
.date-input-wrap {
  position: relative; display: flex; align-items: center;
}
/* ブラウザ標準カレンダーアイコンを白く・大きく */
.admin-date-input {
  color-scheme: dark;
}
.admin-date-input::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  opacity: 0.75;
  width: 18px;
  height: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: opacity .2s, background .2s;
}
.admin-date-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(255,255,255,0.1);
}

/* 保存・クリアボタン行 */
.show-action-btns {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.member-admin-card { padding:20px;border-radius:12px;background:rgba(0,15,30,.6);border:1px solid rgba(100,200,255,.06);margin-bottom:16px;display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:16px; }
.member-admin-img { width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,212,255,.15);background:rgba(0,50,80,.5);display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.member-admin-info { display:flex;flex-direction:column;gap:4px;overflow:hidden; }
.member-admin-name { font-family:var(--font-serif);font-size:1.2rem; }
.member-admin-instr { font-size:.7rem;letter-spacing:.2em;color:var(--accent-1); }
.member-admin-bio-preview { font-size:.78rem;color:var(--text-sub);white-space:pre-wrap;word-break:break-word; }
.add-member-wrap { margin-top:28px;padding-top:20px;border-top:1px solid var(--glass-border); }
.add-member-subtitle { font-size:1rem !important;border:none !important;padding:0 !important;margin-bottom:16px !important; }
.add-member-form { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px; }
.add-member-form .full { grid-column:1/-1; }
.img-upload-label { display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(0,119,182,.1);border:1px dashed rgba(0,212,255,.3);border-radius:8px;color:var(--accent-1);font-size:.8rem;cursor:pointer;transition:all .3s;width:100%; }
.img-upload-label:hover { background:rgba(0,119,182,.2); }
.img-preview { width:64px;height:64px;border-radius:50%;object-fit:cover;display:none;margin-top:10px;border:2px solid rgba(0,212,255,.2); }
/* 矩形プレビュー（TOP画像・詳細画像用） — 円形スタイルを上書き */
.img-preview-rect {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 280px !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  display: none;
  margin: 12px auto !important;
}
.admin-save-toast { position:fixed;bottom:30px;right:30px;padding:14px 24px;background:rgba(0,212,255,.15);border:1px solid var(--accent-1);border-radius:10px;color:var(--accent-3);font-size:.85rem;transform:translateY(100px);opacity:0;transition:all .4s cubic-bezier(0.23,1,0.32,1);z-index:300;pointer-events:none; }
.admin-save-toast.show { transform:translateY(0);opacity:1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px) {
  nav#mainNav, nav#mainNav.scrolled { padding:14px 20px; }
  .nav-logo-svg { height: clamp(18px, 5vw, 24px); }
  .admin-header { padding:12px 16px; }
  .admin-body { padding:20px 16px; }
  .admin-section { padding:24px 20px; }
  .member-admin-card { grid-template-columns:64px 1fr; }
  .member-admin-card .admin-btn { grid-column:1/-1; }
  .add-member-form { grid-template-columns:1fr; }
  .login-card { padding:36px 24px; }
  .admin-save-toast { right:16px;bottom:16px;left:16px;text-align:center; }
  .page-back-btn { margin-left:20px; }
}
@media (max-width:480px) {
  .nav-logo-svg { height: 18px; }
  .hero-logo-svg { width: clamp(220px, 88vw, 400px); }
  .countdown-wrap { gap:6px; }
  .countdown-sep { font-size:1.4rem; padding-top:10px; }
}

/* ============================================================
   PC: お問い合わせ ドロワーリンク改行しない
   ============================================================ */
@media (min-width:769px) {
  .drawer-link { white-space: nowrap; }
}

/* ============================================================
   MOBILE: カスタムカーソル非表示・タッチ最適化
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  html, body { cursor: auto !important; }
  body { cursor: auto !important; }
  .cursor { display: none !important; pointer-events: none !important; }
  /* Reset ALL cursor:none to auto for touch */
  *, *::before, *::after { cursor: auto !important; }
  /* Restore pointer for interactive elements */
  a, button, [role="button"], label, select, input[type="submit"],
  input[type="button"], input[type="checkbox"], input[type="radio"] {
    cursor: pointer !important;
  }
  /* Faster tap response */
  a, button, .member-card, .drawer-link {
    -webkit-tap-highlight-color: rgba(0,212,255,0.08);
    touch-action: manipulation;
  }
}

/* ============================================================
   MEMBER MODAL
   ============================================================ */
.member-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0; /* fallback for older Safari */
  inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px,4vw,40px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1);
  /* Safari: promote to own layer */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.member-modal.open {
  opacity: 1; pointer-events: all;
}
.member-modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  inset: 0;
  background: rgba(0,5,15,0.85);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  transition: opacity 0.45s ease;
}
.member-modal-content {
  position: relative; z-index: 2;
  width: 100%; max-width: 720px;
  max-height: 92vh;       /* fallback */
  max-height: 92svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(28px,5vw,56px);
  transform: translateY(40px) scale(0.94) translateZ(0);
  -webkit-transform: translateY(40px) scale(0.94) translateZ(0);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.16,1,0.3,1),
    opacity   0.45s cubic-bezier(0.16,1,0.3,1);
  -webkit-transition:
    -webkit-transform 0.55s cubic-bezier(0.16,1,0.3,1),
    opacity           0.45s cubic-bezier(0.16,1,0.3,1);
  /* スクロールバー非表示 */
  scrollbar-width: none;
}
.member-modal-content::-webkit-scrollbar { display: none; }
.member-modal.open .member-modal-content {
  transform: translateY(0) scale(1) translateZ(0);
  -webkit-transform: translateY(0) scale(1) translateZ(0);
  opacity: 1;
}
.member-modal-close {
  position: absolute; top: 18px; right: 20px;
  background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.2);
  border-radius: 50%; width: 38px; height: 38px;
  color: var(--accent-1); font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  transition: background 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s;
}
.member-modal-close:hover {
  background: rgba(0,212,255,0.2);
  border-color: rgba(0,212,255,0.5);
  transform: rotate(90deg) scale(1.1);
}
.member-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px,4vw,44px);
  align-items: start;
}
@media (max-width: 600px) {
  .member-modal-body { grid-template-columns: 1fr; }
}
.member-modal-img-wrap {
  width: 100%; aspect-ratio: 3/4;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(0,212,255,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,212,255,0.05);
  background: rgba(0,30,50,0.6);
  transform: translate3d(-12px, 0, 0);
  -webkit-transform: translate3d(-12px, 0, 0);
  opacity: 0;
  transition:
    transform 0.65s 0.1s cubic-bezier(0.16,1,0.3,1),
    opacity   0.55s 0.1s ease;
  will-change: transform, opacity;
}
.member-modal.open .member-modal-img-wrap {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  opacity: 1;
}
.member-modal-detail-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.member-modal-img-wrap:hover .member-modal-detail-img { transform: scale(1.04); }

.member-modal-info {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 6px;
  transform: translate3d(12px, 0, 0);
  -webkit-transform: translate3d(12px, 0, 0);
  opacity: 0;
  transition:
    transform 0.65s 0.15s cubic-bezier(0.16,1,0.3,1),
    opacity   0.55s 0.15s ease;
  will-change: transform, opacity;
}
.member-modal.open .member-modal-info {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  opacity: 1;
}
.member-modal-instrument {
  font-size: .68rem; letter-spacing: .35em;
  color: var(--accent-1); text-transform: uppercase;
  opacity: 0.8;
}
.member-modal-name {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem,4vw,2.8rem);
  font-weight: 300; line-height: 1.2;
}
/* 名前の下のアクセントライン */
.member-modal-name::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-3));
  margin-top: 12px;
  transition: width 0.5s 0.3s cubic-bezier(0.16,1,0.3,1);
}
.member-modal.open .member-modal-name::after { width: 64px; }
.member-modal-bio {
  font-size: .9rem; line-height: 2;
  color: var(--text-sub);
  border-left: 1px solid rgba(0,212,255,0.15);
  padding-left: 16px;
  /* 管理者が入力した改行を保持 */
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   MEMBER CARD — タップ可能スタイル
   ============================================================ */
.member-card { cursor: pointer !important; }

/* ============================================================
   TOP HERO IMAGES AREA
   ============================================================ */
#hero-images-area {
  position: relative; z-index: 2;
  width: 100%; max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 24px;
}
.hero-img-grid {
  display: grid;
  gap: 16px;
}
.hero-img-grid.layout-1 { grid-template-columns: 1fr; }
.hero-img-grid.layout-2 { grid-template-columns: 1fr 1fr; }
.hero-img-grid.layout-3 { grid-template-columns: 1fr 1fr 1fr; }
.hero-img-grid.layout-mixed { grid-template-columns: 2fr 1fr; }

.hero-img-item {
  position: relative; overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0,212,255,0.1);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  /* Safari: overflow:hidden + border-radius requires isolation */
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hero-img-item.size-large { grid-column: 1 / -1; aspect-ratio: 16/7; }
.hero-img-item.size-medium { aspect-ratio: 4/3; }
.hero-img-item.size-small  { aspect-ratio: 1/1; }

.hero-img-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
@media (hover: hover) and (pointer: fine) {
  .hero-img-item:hover img { transform: scale(1.04); }
}
.hero-img-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 16px 14px;
  background: linear-gradient(transparent, rgba(0,5,15,0.7));
  font-size: .72rem; letter-spacing: .12em;
  color: rgba(200,230,245,0.8);
}

/* ============================================================
   IMAGE CROPPER
   ============================================================ */
.cropper-wrap {
  background: rgba(0,15,30,0.8);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 12px;
}
.cropper-hint {
  font-size: .75rem; color: var(--text-sub);
  margin-bottom: 12px; letter-spacing: .05em;
}
.cropper-stage {
  position: relative;
  width: 100%; max-width: 300px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  border: 2px dashed rgba(0,212,255,0.4);
  background: rgba(0,10,20,0.8);
  touch-action: none;
  cursor: grab;
}
.cropper-stage:active { cursor: grabbing; }
.cropper-stage-rect {
  border-radius: 12px;
  aspect-ratio: 3/4;
  max-width: 240px;
}
.crop-canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.crop-circle-guide {
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 4000px rgba(0,5,15,0.5);
  pointer-events: none;
}
.crop-rect-guide {
  position: absolute; inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 4000px rgba(0,5,15,0.5);
  pointer-events: none;
}
.cropper-controls {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; flex-wrap: wrap;
}
.cropper-scale-label { font-size: .72rem; color: var(--text-sub); white-space: nowrap; }
.crop-range {
  flex: 1; min-width: 80px;
  accent-color: var(--accent-1);
}

/* ============================================================
   ADMIN SUB SECTION
   ============================================================ */
.admin-sub-section {
  padding: 20px;
  border-radius: 10px;
  background: rgba(0,10,25,0.5);
  border: 1px dashed rgba(0,212,255,0.15);
  margin-top: 8px;
}
.img-preview-rect {
  width: 100% !important; height: 120px !important;
  border-radius: 10px !important; object-fit: cover;
}

/* TOP IMAGE ADMIN LIST */
.top-img-admin-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 10px;
  background: rgba(0,15,30,0.6);
  border: 1px solid rgba(100,200,255,0.06);
}
.top-img-admin-thumb {
  width: 100px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(0,212,255,0.1);
  display: block;
  justify-self: center;
}
.top-img-admin-info { font-size: .8rem; color: var(--text-sub); }
.top-img-admin-info strong { color: var(--text-main); display: block; margin-bottom: 4px; }
/* ============================================================
   カウントダウン完了演出
   ============================================================ */
.countdown-complete-message {
  position: relative;
  text-align: center;
  padding: 60px 20px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: opacity 1.2s cubic-bezier(0.23,1,0.32,1),
              transform 1.2s cubic-bezier(0.23,1,0.32,1);
  overflow: hidden;
  min-width: 0;
}
.countdown-complete-message.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.complete-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.burst-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  border: 2px solid var(--accent-1);
  opacity: 0;
}
.burst-1 {
  animation: burstExpand 2s ease-out infinite;
}
.burst-2 {
  animation: burstExpand 2s 0.7s ease-out infinite;
}
.burst-3 {
  animation: burstExpand 2s 1.4s ease-out infinite;
}
@keyframes burstExpand {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.complete-icon {
  font-size: 5rem;
  margin-bottom: 20px;
  animation: iconBounce 1s ease-out;
}
@keyframes iconBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.complete-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 3.5rem);
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  animation: titleGlow 3s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(0,212,255,0.3)); }
  50% { filter: drop-shadow(0 0 25px rgba(0,212,255,0.6)); }
}

.complete-subtitle {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-sub);
  font-style: italic;
  letter-spacing: 2px;
}

.complete-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-1), transparent);
  opacity: 0.6;
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ============================================================
   開催終了バナー
   ============================================================ */
.show-ended-message {}

.ended-ring-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ended-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1.5px solid var(--accent-3);
  opacity: 0;
}
.ended-ring-1 {
  width: 180px; height: 180px;
  margin: -90px 0 0 -90px;
  animation: endedRingFade 3s 0.2s ease-out infinite;
}
.ended-ring-2 {
  width: 260px; height: 260px;
  margin: -130px 0 0 -130px;
  animation: endedRingFade 3s 1s ease-out infinite;
}
@keyframes endedRingFade {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 0; }
}

.ended-icon {
  font-size: 4.5rem;
  margin-bottom: 20px;
  animation: endedFloat 4s ease-in-out infinite;
  display: block;
  position: relative;
  z-index: 1;
}
@keyframes endedFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.ended-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 3.5rem);
  letter-spacing: 0.1em;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--accent-3), #a8d8ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  animation: endedGlow 4s ease-in-out infinite;
}
@keyframes endedGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(127,255,212,0.3)); }
  50%       { filter: drop-shadow(0 0 20px rgba(127,255,212,0.6)); }
}

.ended-subtitle {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--text-sub);
  font-style: italic;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   管理画面 — 開催ステータスセレクター
   ============================================================ */
.event-status-control {
  background: rgba(0, 10, 25, 0.55);
  border: 1px dashed rgba(0, 212, 255, 0.2);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}
.event-status-control .es-label {
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--accent-1);
  margin-bottom: 10px;
  opacity: .85;
}
.event-status-control .es-desc {
  font-size: .78rem;
  color: var(--text-sub);
  line-height: 1.65;
  margin-bottom: 12px;
}
.event-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: var(--font-body);
  letter-spacing: .08em;
  margin-top: 10px;
}
.event-status-badge.badge-auto   { background: rgba(0,212,255,.1);  color: var(--accent-1);  border: 1px solid rgba(0,212,255,.25); }
.event-status-badge.badge-today  { background: rgba(255,200,50,.1); color: #ffd060;           border: 1px solid rgba(255,200,50,.25); }
.event-status-badge.badge-ended  { background: rgba(127,255,212,.1);color: var(--accent-3);  border: 1px solid rgba(127,255,212,.25); }

/* ============================================================
   TOP画像 レイアウト - 完全オリジナル表示
   画像のサイズ・比率を一切変更しない！
   ============================================================ */

/* グリッドコンテナ */
.hero-img-grid {
  margin-top: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

/* 縦並び（デフォルト） */
.hero-img-grid.layout-vertical {
  flex-direction: column;
}

/* 横並び */
.hero-img-grid.layout-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* 画像コンテナ */
.hero-img-container {
  width: 100%;
  max-width: 1200px; /* 画面幅の最大値のみ制限 */
}

/* 画像ラッパー */
.hero-img-natural-wrapper {
  display: inline-block;
  position: relative;
}

/* 画像本体 — オリジナルサイズを尊重しつつ画面幅を超えない */
.hero-img-pure-original {
  /* 画像本来のピクセルサイズで表示。ただし画面幅を超える場合のみ縮小 */
  max-width: 100%;
  width: auto;    /* ← 明示的にautoで自動サイズ */
  height: auto;   /* ← 縦横比を維持 */
  
  /* object-fit:noneは画像を引き伸ばすため削除 */
  
  display: block;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hero-img-pure-original:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,212,255,0.25);
}

/* キャプション — スタイルはインラインで管理者が設定。ここではレイアウトのみ定義 */
.hero-img-caption {
  margin-top: 12px;
  padding: 0 10px;
  line-height: 1.6;
  /* font/color/size/opacity etc. are applied inline via captionStyle settings */
}

/* モバイル対応 */
@media (max-width: 768px) {
  .hero-img-grid {
    gap: 24px;
  }
  
  .hero-img-grid.layout-horizontal {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .hero-img-grid {
    gap: 20px;
  }
}

/* ============================================================
   編集モーダル専用スタイル（メンバー編集・TOP画像編集）
   全デバイス対応
   ============================================================ */

/* 編集モーダルのコンテンツエリア */
#memberEditModal .member-modal-content,
#topImageEditModal .member-modal-content {
  max-width: 650px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}

/* 編集モーダルのボディ */
#memberEditModal .member-modal-body,
#topImageEditModal .member-modal-body {
  display: block;
  padding: 20px;
}

/* タイトル */
#memberEditModal h3,
#topImageEditModal h3 {
  margin: 0 0 24px 0;
  font-size: 1.5rem;
  color: var(--accent-1);
  text-align: center;
}

/* フォームグリッド */
.add-member-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* タブレット以上で2カラム */
@media (min-width: 600px) {
  .add-member-form {
    grid-template-columns: 1fr 1fr;
  }
  
  .add-member-form .full {
    grid-column: 1 / -1;
  }
}

/* モバイルで1カラム */
@media (max-width: 599px) {
  .add-member-form {
    grid-template-columns: 1fr;
  }
}

/* プレビュー画像のコンテナ */
#edit-member-icon-preview,
#edit-member-detail-preview,
#edit-top-img-preview,
#top-img-preview {
  margin: 12px auto;
  display: block;
}

/* クロッパーエリア */
#edit-icon-cropper-wrap,
#edit-detail-cropper-wrap,
#top-img-cropper-wrap {
  margin-top: 12px;
}

/* ボタングループ */
#memberEditModal .member-modal-body > div:last-child,
#topImageEditModal .member-modal-body > div:last-child {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

#memberEditModal .member-modal-body > div:last-child button,
#topImageEditModal .member-modal-body > div:last-child button {
  flex: 1;
  min-width: 120px;
}

/* モバイルでボタンをフルサイズに */
@media (max-width: 480px) {
  #memberEditModal .member-modal-body > div:last-child,
  #topImageEditModal .member-modal-body > div:last-child {
    flex-direction: column;
  }
  
  #memberEditModal .member-modal-body > div:last-child button,
  #topImageEditModal .member-modal-body > div:last-child button {
    width: 100%;
  }
  
  #memberEditModal h3,
  #topImageEditModal h3 {
    font-size: 1.3rem;
  }
  
  #memberEditModal .member-modal-content,
  #topImageEditModal .member-modal-content {
    padding: 20px 16px;
  }
  
  #memberEditModal .member-modal-body,
  #topImageEditModal .member-modal-body {
    padding: 16px 12px;
  }
}

/* 超小型デバイス対応 */
@media (max-width: 360px) {
  #memberEditModal .member-modal-content,
  #topImageEditModal .member-modal-content {
    padding: 16px 12px;
    width: 98%;
  }
  
  #memberEditModal h3,
  #topImageEditModal h3 {
    font-size: 1.2rem;
    margin-bottom: 16px;
  }
}

/* スクロール可能エリアの視覚的ヒント */
#memberEditModal .member-modal-content,
#topImageEditModal .member-modal-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,212,255,0.3) rgba(0,20,40,0.3);
}

#memberEditModal .member-modal-content::-webkit-scrollbar,
#topImageEditModal .member-modal-content::-webkit-scrollbar {
  width: 6px;
}

#memberEditModal .member-modal-content::-webkit-scrollbar-track,
#topImageEditModal .member-modal-content::-webkit-scrollbar-track {
  background: rgba(0,20,40,0.3);
  border-radius: 3px;
}

#memberEditModal .member-modal-content::-webkit-scrollbar-thumb,
#topImageEditModal .member-modal-content::-webkit-scrollbar-thumb {
  background: rgba(0,212,255,0.3);
  border-radius: 3px;
}

#memberEditModal .member-modal-content::-webkit-scrollbar-thumb:hover,
#topImageEditModal .member-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0,212,255,0.5);
}

/* セレクトボックスのグリッド調整 */
#topImageEditModal .member-modal-body > div > div {
  display: contents;
}

@media (max-width: 599px) {
  #topImageEditModal .member-modal-body > div > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* ============================================================
   掲載情報セクション（TOPページ）
   ============================================================ */
#info-board-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 20px 0;
  /* フェードイン用初期状態 */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.23,1,0.32,1),
              transform 0.85s cubic-bezier(0.23,1,0.32,1);
}
#info-board-section.info-board-visible {
  opacity: 1;
  transform: translateY(0);
}

#info-board {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 32px 40px;
  background: rgba(0, 20, 40, 0.52);
  border: 1px solid rgba(100, 200, 255, 0.12);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
#info-board::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.35), transparent);
}

#info-board-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.info-board-img-wrap {
  width: 100%;
}
.info-board-img {
  display: block;
  border-radius: 12px;
}

.info-board-text {
  width: 100%;
  word-break: break-word;
  white-space: pre-wrap; /* 改行をそのまま表示 */
}

.info-board-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.info-board-link-btn {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(127,255,212,0.1));
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 50px;
  color: var(--accent-1);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s, border-color 0.3s, transform 0.2s, box-shadow 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.info-board-link-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,0.05), rgba(127,255,212,0.05));
  opacity: 0;
  transition: opacity 0.3s;
}
.info-board-link-btn:hover {
  background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(127,255,212,0.18));
  border-color: rgba(0,212,255,0.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,212,255,0.2);
}
.info-board-link-btn:hover::before { opacity: 1; }
.info-board-link-btn:active { transform: translateY(0); }

/* モバイル対応 */
@media (max-width: 599px) {
  #info-board {
    padding: 32px 20px 28px;
    border-radius: 14px;
  }
  #info-board-section {
    padding: 0 12px 0;
  }
  .info-board-link-btn {
    padding: 12px 28px;
    font-size: 0.88rem;
  }
}

/* 超小型 */
@media (max-width: 360px) {
  #info-board {
    padding: 24px 14px 20px;
  }
}

/* ============================================================
   掲載情報 — 見出し
   ============================================================ */
.info-board-heading-wrap {
  width: 100%;
}
.info-board-heading {
  margin: 0;
  padding: 0;
  line-height: 1.25;
  word-break: break-word;
  white-space: pre-wrap; /* 改行保持 */
}

/* 下線バリエーション */
.info-board-heading-wrap.info-board-heading-has-line {
  padding-bottom: 14px;
  position: relative;
}
.info-board-heading-wrap.info-board-heading-has-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
}
/* アクセントライン */
.info-board-heading.info-board-heading-line--accent + *,
.info-board-heading-wrap.info-board-heading-has-line:has(.info-board-heading-line--accent)::after {
  background: linear-gradient(90deg, rgba(0,212,255,0.8), rgba(0,212,255,0.1));
}
/* シンプル白ライン */
.info-board-heading-wrap.info-board-heading-has-line:has(.info-board-heading-line--white)::after {
  background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.05));
}
/* グラデーション */
.info-board-heading-wrap.info-board-heading-has-line:has(.info-board-heading-line--gradient)::after {
  background: linear-gradient(90deg, #00d4ff, #7fffd4, transparent);
}
/* :has() 非対応ブラウザ向けフォールバック（下線クラスを直接 wrap に付与） */
.info-board-heading-wrap.info-board-heading-line--accent::after {
  background: linear-gradient(90deg, rgba(0,212,255,0.8), rgba(0,212,255,0.1));
}
.info-board-heading-wrap.info-board-heading-line--white::after {
  background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.05));
}
.info-board-heading-wrap.info-board-heading-line--gradient::after {
  background: linear-gradient(90deg, #00d4ff, #7fffd4, transparent);
}

@media (max-width: 599px) {
  .info-board-heading {
    line-height: 1.3;
  }
}

/* ============================================================
   掲載情報 — 複数アイテム表示
   ============================================================ */
.info-board-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.info-board-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.2), transparent);
  margin: 8px 0;
}

/* ============================================================
   掲載情報 — 管理側リスト
   ============================================================ */
.ib-admin-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(0, 20, 40, 0.55);
  border: 1px solid rgba(100, 200, 255, 0.1);
  border-radius: 12px;
  transition: border-color 0.2s;
}
.ib-admin-item:hover {
  border-color: rgba(0, 212, 255, 0.25);
}
.ib-admin-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(0,30,50,0.6);
}
.ib-admin-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: rgba(0,30,50,0.6);
  color: var(--text-sub);
}
.ib-admin-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ib-admin-label {
  font-size: .88rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.ib-badge {
  display: inline-block;
  font-size: .65rem;
  letter-spacing: .1em;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
  align-self: flex-start;
}
.ib-badge-on  { background: rgba(0,212,255,0.15); color: var(--accent-1); border: 1px solid rgba(0,212,255,0.3); }
.ib-badge-off { background: rgba(255,255,255,0.05); color: var(--text-sub); border: 1px solid rgba(255,255,255,0.1); }
.ib-admin-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ============================================================
   掲載情報 — 編集モーダル
   ============================================================ */
.info-board-modal-content {
  max-width: 660px !important;
  max-height: 88vh;
  overflow-y: auto;
}
.ib-style-box {
  background: rgba(0,10,25,0.5);
  border: 1px dashed rgba(0,212,255,0.15);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ib-style-box-title {
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--accent-1);
  margin-bottom: 12px;
  opacity: .8;
}
.ib-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ib-lbl {
  font-size: .62rem !important;
}
.ib-sel {
  margin-bottom: 0 !important;
}
.ib-color-pick {
  width: 38px;
  height: 30px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}

/* モバイル対応 */
@media (max-width: 599px) {
  .ib-admin-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .ib-admin-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .ib-style-grid {
    grid-template-columns: 1fr;
  }
  .info-board-modal-content {
    max-height: 92vh;
  }
}

/* ============================================================
   掲載情報 — 画像提供元クレジット
   ============================================================ */
.ib-img-frame {
  position: relative;
  display: inline-block;
  line-height: 0; /* 画像下の余白をなくす */
}
.ib-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* 画像内オーバーレイ */
.ib-credit-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 6px 10px 7px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  border-radius: 0 0 12px 12px;
  line-height: 1.3;
}
.ib-credit-overlay span,
.ib-credit-overlay a {
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  opacity: 0.85;
  word-break: break-all;
}

/* 画像外・下部 */
.ib-credit-below {
  width: 100%;
  padding: 5px 2px 0;
  line-height: 1.4;
}
.ib-credit-below span,
.ib-credit-below a {
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* リンク */
.ib-credit-link {
  text-decoration: none;
  transition: opacity 0.2s;
}
.ib-credit-link:hover {
  opacity: 1 !important;
  text-decoration: underline;
}

/* 管理モーダル内 提供元エリア */
.ib-credit-wrap {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(0,10,25,0.4);
  border: 1px dashed rgba(0,212,255,0.12);
  border-radius: 10px;
  margin-bottom: 14px;
}

@media (max-width: 599px) {
  .ib-credit-overlay {
    padding: 5px 8px 6px;
  }
}

/* ============================================================
   過去の公演ページ
   ============================================================ */
.past-shows-header { text-align:center; padding:60px 0 30px; }
#past-shows { max-width:860px; margin:0 auto; padding:0 20px 60px; }
#pastShowsList { display:flex; flex-direction:column; gap:0; position:relative; }
#pastShowsList::before {
  content:''; position:absolute; left:22px; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, transparent, rgba(0,212,255,0.35) 5%, rgba(0,212,255,0.35) 95%, transparent);
}
.ps-item { position:relative; padding-left:60px; margin-bottom:52px; }
.ps-timeline-dot {
  position:absolute; left:14px; top:28px; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle, #7fffd4 0%, #00d4ff 60%, transparent 100%);
  box-shadow:0 0 10px rgba(0,212,255,0.6), 0 0 20px rgba(0,212,255,0.25);
  border:2px solid rgba(255,255,255,0.2);
}
.ps-card { padding:28px 32px; border-radius:16px; }
.ps-card-header { margin-bottom:18px; }
.ps-date-badge {
  display:inline-block; font-family:var(--font-body); font-size:0.72rem;
  letter-spacing:0.18em; color:var(--accent-1);
  background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.2);
  border-radius:20px; padding:4px 14px; margin-bottom:12px;
}
.ps-title { line-height:1.2; margin:0 0 10px; letter-spacing:0.04em; }
.ps-venue { font-family:var(--font-body); font-size:0.85rem; color:var(--text-sub); letter-spacing:0.06em; margin-top:4px; }
.ps-performers { display:flex; align-items:flex-start; gap:10px; margin:14px 0; font-size:0.9rem; color:var(--text-sub); line-height:1.6; }
.ps-label-tag {
  display:inline-block; font-family:var(--font-body); font-size:0.65rem;
  letter-spacing:0.15em; color:var(--accent-2);
  background:rgba(127,255,212,0.08); border:1px solid rgba(127,255,212,0.18);
  border-radius:4px; padding:2px 8px; white-space:nowrap; margin-top:2px; flex-shrink:0;
}
.ps-detail { margin:14px 0; white-space:pre-wrap; line-height:1.8; }
.ps-setlist { margin:18px 0; padding:16px 20px; background:rgba(0,10,25,0.4); border-left:2px solid rgba(0,212,255,0.3); border-radius:0 10px 10px 0; }
.ps-setlist-text { font-family:var(--font-body); font-size:0.88rem; color:var(--text-sub); line-height:1.9; white-space:pre-wrap; }
.ps-link-wrap { margin-top:20px; }
@media (max-width:599px) {
  .ps-item { padding-left:44px; }
  #pastShowsList::before { left:15px; }
  .ps-timeline-dot { left:7px; }
  .ps-card { padding:20px 16px; }
}

/* ============================================================
   過去の公演: スクロール連動フェードイン
   ============================================================ */

/* 初期状態（非表示） */
.ps-reveal {
  opacity: 0;
  /* transition は visible クラスが付いたときだけ有効にする。
     非表示状態で transition があるとリセット時に意図しないアニメが起きる。 */
  transition: none;
}

/* 左からスライドイン（偶数番目） */
.ps-slide-left  { transform: translateX(-48px) translateY(20px); }

/* 右からスライドイン（奇数番目） */
.ps-slide-right { transform: translateX( 48px) translateY(20px); }

/* 表示状態: クラスが付いた瞬間から transition を有効化してアニメーション */
.ps-reveal.ps-reveal-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
  transition:
    opacity   0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: auto;
}

/* タイムラインドット */
.ps-item .ps-timeline-dot {
  opacity: 0;
  transform: scale(0);
  transition: none;
}
.ps-item.ps-reveal-visible .ps-timeline-dot {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity   0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}

/* モバイルは左右スライドを控えめに */
@media (max-width: 599px) {
  .ps-slide-left  { transform: translateX(-24px) translateY(16px); }
  .ps-slide-right { transform: translateX( 24px) translateY(16px); }
}

/* prefers-reduced-motion: アニメ無効化 */
@media (prefers-reduced-motion: reduce) {
  .ps-reveal        { transition: opacity 0.4s ease; }
  .ps-slide-left,
  .ps-slide-right   { transform: translateY(0); }
}

/* ============================================================
   全デバイス対応 — 包括的レスポンシブ補完
   ============================================================ */

/* ── ページのスクロール挙動をデバイスに合わせる */
.page {
  /* iOS Safari でのバウンス効果を維持しつつスムーズスクロール */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── セーフエリア対応（ノッチ・ホームバー） */
.page-inner {
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.page-inner > .page-footer {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* ── 管理画面: 全デバイス対応 */
#admin-overlay {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

/* ── 管理モーダルのモバイル対応 */
.member-modal {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* スマホ縦持ちで管理モーダルを全幅に近く */
@media (max-width: 480px) {
  .member-modal-content {
    max-height: calc(100svh - 24px);
    max-width: calc(100vw - 24px);
    padding: 20px 16px 32px;
    border-radius: 16px;
  }
  .member-modal-close {
    top: 12px; right: 12px;
    width: 34px; height: 34px;
  }
}

/* ── 管理フォームのグリッドをスマホでは1列に */
@media (max-width: 540px) {
  /* メニュー名編集グリッド */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 管理ボタン行 */
  .ib-admin-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
  }
  /* 管理アイテムのサムネ */
  .ib-admin-thumb {
    width: 52px !important;
    height: 52px !important;
  }
}

/* ── TOPページのヒーロー: 極小画面対応 */
@media (max-width: 320px) {
  .hero-title { font-size: clamp(2.4rem, 18vw, 5rem); }
  .hero-eyebrow { font-size: 0.6rem; }
  .countdown-num { font-size: clamp(2.4rem, 15vw, 4rem) !important; }
}

/* ── 過去の公演ページ: タブレット以上 */
@media (min-width: 768px) {
  #pastShowsList::before { left: 28px; }
  .ps-item { padding-left: 72px; }
  .ps-timeline-dot { left: 19px; top: 32px; width: 20px; height: 20px; }
}

/* ── ドロワーのセーフエリア */
.drawer {
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* ── ヘッダーのセーフエリア */
#site-header {
  padding-left:  max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* ── タッチデバイスでのタップハイライト全消し */
* {
  -webkit-tap-highlight-color: transparent;
}
button, a, [role="button"] {
  touch-action: manipulation;
}

/* ── iOS Safari でのモーダルスクロール修正 */
.member-modal-content,
#infoBoardEditModal .member-modal-content,
#memberEditModal .member-modal-content,
#topImageEditModal .member-modal-content,
#pastShowEditModal .member-modal-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── prefers-reduced-motion: ページ遷移も抑制 */
@media (prefers-reduced-motion: reduce) {
  .page-enter, .page-exit,
  .page-enter [data-stagger] {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .member-card-anim {
    transition-duration: 0.01ms !important;
  }
  .member-card-anim.member-card-visible .member-img-wrap {
    animation: none !important;
  }
}


/* ============================================================
   管理画面 ベーススタイル（全デバイス共通）
   ============================================================ */

/* ── admin-overlay: ビューポート全体を占有・高さ固定 */
#admin-overlay {
  height: 100vh;
  height: 100svh;
  display: none;
  flex-direction: column;
  overflow: hidden; /* 内側でスクロール管理 */
}
#admin-overlay.active {
  display: flex;
}

/* ── dashboard-screen: overlay内で残り全高を埋める */
#dashboard-screen {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* flexbox overflow対策 */
  overflow: hidden;
}
#dashboard-screen.active {
  display: flex;
}

/* ── admin-workspace: 横並び・残り全高 */
.admin-workspace {
  flex: 1;
  display: flex;
  min-height: 0; /* 重要: これがないとサイドバーが伸縮する */
  overflow: hidden;
}

/* ── サイドバー: モバイルは非表示 */
.admin-sidebar {
  display: none;
}

/* ── admin-main: モバイルは全幅 */
.admin-main {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

/* ── ヘッダー3分割用 */
.admin-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,8,16,.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.admin-header-left {
  display: flex;
  align-items: center;
  min-width: 0;
}
.admin-header-center {
  display: none; /* モバイルは非表示 */
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--text-sub);
  flex: 1;
  justify-content: center;
}
.admin-breadcrumb-icon { color: var(--accent-1); font-size: .85rem; }
.admin-breadcrumb-text { color: var(--text-main); }
.admin-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ── セクション表示切り替え（PC: シングルビュー） */
.admin-section {
  display: block; /* モバイルは全部表示 */
}

/* ── admin-body モバイル */
.admin-body {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ============================================================
   PC / CHROMEBOOK 最適化 (min-width: 1024px)
   ============================================================ */
@media (min-width: 1024px) {

  /* ── ヘッダー全幅・3分割 */
  .admin-header {
    height: 60px;
    padding: 0 32px 0 0;
  }
  .admin-header-left {
    width: 240px;
    flex-shrink: 0;
    padding: 0 24px;
    border-right: 1px solid var(--glass-border);
    height: 100%;
    align-items: center;
  }
  .admin-logo { font-size: 1.5rem; }
  .admin-header-center {
    display: flex;
  }
  .admin-logout {
    padding: 9px 24px;
    font-size: .78rem;
  }

  /* ── workspace: 横並び */
  .admin-workspace {
    height: calc(100vh - 60px);
  }

  /* ── サイドバー表示 */
  .admin-sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    background: rgba(0, 6, 14, 0.9);
    border-right: 1px solid var(--glass-border);
    padding: 20px 0 40px;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,212,255,.12) transparent;
  }
  .admin-sidebar::-webkit-scrollbar { width: 3px; }
  .admin-sidebar::-webkit-scrollbar-thumb { background: rgba(0,212,255,.12); border-radius: 2px; }

  .admin-nav-label {
    font-size: .58rem;
    letter-spacing: .22em;
    color: rgba(100,200,255,.25);
    text-transform: uppercase;
    padding: 4px 20px 10px;
    display: block;
  }
  .admin-nav-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 20px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: rgba(180,210,230,.5);
    font-family: var(--font-body);
    font-size: .8rem;
    letter-spacing: .06em;
    cursor: pointer;
    transition: all .18s;
    text-align: left;
    border-radius: 0 8px 8px 0;
    margin-right: 10px;
  }
  .admin-nav-btn:hover {
    background: rgba(0,212,255,.07);
    color: var(--text-main);
    border-left-color: rgba(0,212,255,.35);
  }
  .admin-nav-btn.active {
    background: rgba(0,212,255,.12);
    color: var(--accent-1);
    border-left-color: var(--accent-1);
    font-weight: 500;
  }
  .nav-icon {
    font-size: .9rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
  }

  /* ── メインエリア */
  .admin-main {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,212,255,.12) transparent;
  }
  .admin-main::-webkit-scrollbar { width: 5px; }
  .admin-main::-webkit-scrollbar-thumb { background: rgba(0,212,255,.12); border-radius: 3px; }

  /* ── body: 単一セクション表示モード */
  .admin-body {
    padding: 36px 48px;
    max-width: 1100px;
    gap: 0;
  }

  /* ── セクション: PCではアクティブ1つのみ表示 */
  .admin-section {
    display: none;
    animation: sectionFadeIn .22s ease;
  }
  .admin-section.pc-active {
    display: block;
  }

  /* ── セクション内スタイル */
  .admin-section {
    padding: 32px 36px;
    border-radius: 16px;
  }
  .admin-section-title {
    font-size: 1.15rem;
    margin-bottom: 24px;
  }

  /* ── フォーム */
  .admin-input {
    font-size: .88rem;
    padding: 11px 16px;
  }
  textarea.admin-input { min-height: 100px; }

  /* ── ボタン */
  .admin-btn { padding: 11px 30px; font-size: .82rem; }
  .admin-btn-sm { padding: 7px 18px; font-size: .74rem; }

  /* ── メンバーカード */
  .member-admin-card {
    grid-template-columns: 72px 1fr auto;
    padding: 18px 24px;
  }

  /* ── メンバー追加フォーム: 2→3カラム */
  .add-member-form {
    grid-template-columns: 1fr 1fr;
  }

  /* ── 掲載情報リスト: 2カラム */
  #infoBoardList {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .ib-admin-item { margin-bottom: 0 !important; }

  /* ── モーダル: PCで広く */
  .member-modal-content {
    max-width: 760px;
    padding: 40px 48px 48px;
  }

  /* ── トースト */
  .admin-save-toast {
    bottom: 36px;
    right: 40px;
    font-size: .88rem;
  }
}

/* ── セクション切り替えアニメーション */
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 超大画面 (1440px+) */
@media (min-width: 1440px) {
  .admin-header-left { width: 280px; }
  .admin-sidebar { width: 280px; }
  .admin-body { padding: 44px 64px; max-width: 1200px; }
  .admin-section { padding: 36px 44px; }
}

/* ============================================================
   📊 アクセス解析ダッシュボード
   ============================================================ */

/* ── KPIカードグリッド ── */
.ar-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .ar-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .ar-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

.ar-kpi-card {
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.14);
  border-radius: 12px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .2s;
}
.ar-kpi-card:hover { border-color: rgba(0,212,255,.3); }

.ar-kpi-label {
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--text-sub);
  text-transform: uppercase;
}
.ar-kpi-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: .04em;
  color: #00d4ff;
  line-height: 1;
}
.ar-kpi-sub {
  font-size: .72rem;
  color: var(--text-sub);
  min-height: 1em;
}
.kpi-trend {
  font-weight: 600;
  font-size: .73rem;
}
.trend-up   { color: #7fffd4; }
.trend-down { color: #ff8080; }

/* ── カード ── */
.ar-card {
  background: rgba(10, 30, 50, 0.5);
  border: 1px solid rgba(0,212,255,.1);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.ar-card-title {
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--accent-1, #00d4ff);
  margin-bottom: 14px;
}

/* ── 2カラム ── */
.ar-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 860px) {
  .ar-two-col { grid-template-columns: 1fr; }
}

/* ── 棒グラフ ── */
.ar-chart-wrap {
  width: 100%;
  overflow: hidden;
}

/* ── ページ別リスト ── */
.ar-page-header {
  display: grid;
  grid-template-columns: 80px 1fr 52px 60px;
  gap: 8px;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--text-sub);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 8px;
}
.ar-page-list { display: flex; flex-direction: column; gap: 8px; }
.ar-page-row {
  display: grid;
  grid-template-columns: 80px 1fr 52px 60px;
  gap: 8px;
  align-items: center;
}
.ar-page-name {
  font-size: .78rem;
  color: var(--text-main, #e8f4f8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ar-page-bar-wrap {
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}
.ar-page-bar {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff, #7fffd4);
  border-radius: 3px;
  transition: width .4s ease;
}
.ar-page-count {
  font-size: .8rem;
  color: #00d4ff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ar-page-time {
  font-size: .72rem;
  color: var(--text-sub);
  text-align: right;
  white-space: nowrap;
}
.ar-empty {
  font-size: .8rem;
  color: var(--text-sub);
  font-style: italic;
  padding: 12px 0;
}

/* ── デバイス別 ── */
.ar-device-list { display: flex; flex-direction: column; gap: 12px; }
.ar-device-row {
  display: grid;
  grid-template-columns: 20px 82px 1fr 36px 44px;
  gap: 8px;
  align-items: center;
}
.ar-device-icon { font-size: .95rem; }
.ar-device-name { font-size: .78rem; color: var(--text-main, #e8f4f8); }
.ar-device-bar-wrap {
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  height: 7px;
  overflow: hidden;
}
.ar-device-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.ar-device-bar--desktop { background: #00d4ff; }
.ar-device-bar--mobile  { background: #7fffd4; }
.ar-device-bar--tablet  { background: #a78bfa; }
.ar-device-pct {
  font-size: .78rem;
  color: var(--text-sub);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ar-device-count {
  font-size: .75rem;
  color: var(--text-sub);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── テーブル ── */
.ar-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.ar-table thead th {
  text-align: left;
  padding: 7px 10px;
  color: var(--text-sub);
  font-size: .69rem;
  letter-spacing: .1em;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}
.ar-table tbody td {
  padding: 8px 10px;
  color: var(--text-main, #e8f4f8);
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
.ar-table tbody tr:last-child td { border-bottom: none; }
.ar-table tbody tr:hover td { background: rgba(0,212,255,.04); }

.ar-table--compact td,
.ar-table--compact th { padding: 5px 8px; }

/* ── モバイル調整 ── */
@media (max-width: 600px) {
  .ar-page-header,
  .ar-page-row { grid-template-columns: 64px 1fr 42px; }
  .ar-page-time { display: none; }
  .ar-device-row { grid-template-columns: 20px 72px 1fr 32px; }
  .ar-device-count { display: none; }
  .ar-kpi-value { font-size: 1.6rem; }
}

/* ============================================================
   📊 アクセス解析ダッシュボード — 追加スタイル（週次・流入元・曜日・タブ）
   ============================================================ */

/* ── グラフヘッダー（タイトル + タブ 横並び）── */
.ar-graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* ── グラフタブ ── */
.ar-tab-group {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(0,212,255,.1);
  border-radius: 8px;
  padding: 3px;
}
.ar-tab {
  background: transparent;
  border: none;
  color: var(--text-sub);
  font-size: .72rem;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.ar-tab:hover { color: var(--text-main, #e8f4f8); }
.ar-tab.active {
  background: rgba(0,212,255,.15);
  color: #00d4ff;
  font-weight: 500;
}
@media (max-width: 500px) {
  .ar-tab { padding: 4px 8px; font-size: .68rem; }
}

/* ── グラフ凡例 ── */
.ar-chart-legend {
  margin-top: 6px;
  font-size: .74rem;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ar-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── 流入元リスト ── */
.ar-ref-list { display: flex; flex-direction: column; gap: 10px; }
.ar-ref-row {
  display: grid;
  grid-template-columns: 20px 120px 1fr 36px 44px;
  gap: 8px;
  align-items: center;
}
.ar-ref-icon { font-size: .95rem; }
.ar-ref-name {
  font-size: .78rem;
  color: var(--text-main, #e8f4f8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ar-ref-bar-wrap {
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  height: 7px;
  overflow: hidden;
}
.ar-ref-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.ar-ref-share {
  font-size: .75rem;
  color: var(--text-sub);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ar-ref-count {
  font-size: .75rem;
  color: #00d4ff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── 曜日別リスト ── */
.ar-dow-list { display: flex; flex-direction: column; gap: 10px; }
.ar-dow-row {
  display: grid;
  grid-template-columns: 20px 1fr 44px;
  gap: 8px;
  align-items: center;
}
.ar-dow-label {
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
}
.ar-dow-bar-wrap {
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}
.ar-dow-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
  opacity: .75;
}
.ar-dow-count {
  font-size: .78rem;
  color: var(--text-sub);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── モバイル調整 ── */
@media (max-width: 600px) {
  .ar-ref-row { grid-template-columns: 20px 1fr 1fr 32px; }
  .ar-ref-count { display: none; }
  .ar-graph-header { flex-direction: column; align-items: flex-start; }
}