/* ============================================================
   ドラゴンフェスティバル ～リターンズ～  Main Stylesheet v3
   優先順位:
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=RocknRoll+One&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

/* ================================================================
   CSS Variables — カラーパレット
   ================================================================ */
:root {
  /* Gold — メインアクセント */
  --gold:         #FFB300;
  --gold-dark:    #CC8800;
  --gold-deep:    #906000;
  --gold-light:   rgba(255,179,0,0.16);
  --gold-glow:    0 0 28px rgba(255,179,0,0.46);

  /* Ruby — サブアクセント */
  --ruby:         #D91A4D;
  --ruby-light:   rgba(217,26,77,0.14);
  --ruby-glow:    0 0 24px rgba(217,26,77,0.40);

  /* Emerald — アクセント3 */
  --emerald:      #15D698;
  --emerald-light:rgba(21,214,152,0.14);
  --emerald-glow: 0 0 22px rgba(21,214,152,0.34);

  /* Sky — サポート */
  --sky:          #60A0E8;
  --sky-deep:     #3878CC;
  --sky-light:    rgba(96,160,232,0.15);

  /* Glass Cards */
  --glass:        rgba(255,252,242,0.92);
  --glass-alt:    rgba(255,248,230,0.88);
  --glass-border: rgba(255,202,40,0.46);
  --glass-shadow: 0 8px 40px rgba(26,54,115,0.22);

  /* Text on glass */
  --text:         #1E2C3A;
  --text-sub:     #4A5E72;

  /* Text on dark bg */
  --text-light:   rgba(255,255,255,0.94);
  --text-muted:   rgba(255,255,255,0.60);

  /* Typography */
  --font-title:   'RocknRoll One','Noto Sans JP',sans-serif;
  --font-heading: 'RocknRoll One','Noto Sans JP',sans-serif;
  --font-sub:     'Noto Sans JP',sans-serif;
  --font-body:    'Noto Sans JP',sans-serif;

  /* Layout */
  --r:      10px;
  --r-sm:    6px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;
  --nav-h:  70px;
  --ease:   cubic-bezier(0.4,0,0.2,1);

  /* Shadows */
  --shadow-s: 0 4px 18px rgba(26,54,115,0.16);
  --shadow-m: 0 8px 36px rgba(26,54,115,0.22);
  --shadow-l: 0 16px 64px rgba(26,54,115,0.28);
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }

/* アンカーリンク遷移時の固定ヘッダー分オフセット */
[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* ================================================================
   BACKGROUND — 祭り空グラデーション
   明るい昼間フェスティバル: 深紺 → 明るい青空 → 暖かいゴールデン午後
   ================================================================ */
body {
  font-family: var(--font-body);
  color: var(--text-light);
  background:
    linear-gradient(175deg,
      #1A3673 0%,
      #2E4EA0 16%,
      #6090D8 38%,
      #D8C0F0 60%,
      #FFE0B0 80%,
      #FFF8EE 100%);
  background-attachment: fixed;
  line-height: 1.75;
  overflow-x: hidden;
  min-height: 100vh;
}

img { max-width:100%; height:auto; display:block; }
a   { text-decoration:none; transition:color .22s var(--ease); }
ul,ol { list-style:none; }
strong { font-weight:700; color:inherit; }

/* ドラゴンスケールテクスチャ — 控えめ */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 50% 0%,  rgba(255,179,0,0.032) 30%,transparent 30%),
    radial-gradient(circle at 0%  50%, rgba(255,179,0,0.032) 30%,transparent 30%);
  background-size:46px 46px;
  background-position:0 0,23px 23px;
}

/* ================================================================
   HEADER / NAV
   ================================================================ */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  background:rgba(18,36,90,0.90);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,202,40,0.28);
  transition:background .3s,box-shadow .3s var(--ease);
}
.site-header.scrolled {
  background:rgba(14,28,76,0.98);
  box-shadow:0 4px 28px rgba(10,20,60,0.44),0 1px 0 rgba(255,202,40,0.24);
}

.nav-wrap {
  max-width:1240px; margin:0 auto;
  padding:0 24px; height:100%;
  display:flex; align-items:center; gap:10px;
  position:relative; z-index:1;
}

.nav-logo { flex-shrink:0; display:flex; align-items:center; gap:9px; }
.nav-logo img { height:42px; width:auto; transition:transform .22s; }
.nav-logo:hover img { transform:scale(1.06) rotate(-2deg); }
.nav-logo-name {
  font-family:var(--font-heading);
  font-size:1.1rem; color:var(--gold);
  letter-spacing:.06em; white-space:nowrap;
  text-shadow:0 0 14px rgba(255,179,0,.52);
}

.nav-list { display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav-item  { position:relative; }

.nav-link-btn {
  display:flex; align-items:center; gap:4px;
  padding:7px 14px;
  font-family:var(--font-body); font-weight:600; font-size:.84rem;
  letter-spacing:.04em; color:var(--text-light); white-space:nowrap;
  border-radius:var(--r); cursor:pointer;
  background:none; border:none;
  transition:background .18s,color .18s;
}
.nav-link-btn:hover,
.nav-item:hover > .nav-link-btn { color:var(--gold); background:rgba(255,179,0,.13); }

.nav-direct {
  display:flex; align-items:center;
  padding:7px 14px;
  font-family:var(--font-body); font-weight:600; font-size:.84rem;
  color:var(--text-light); letter-spacing:.04em;
  border-radius:var(--r); text-decoration:none;
  transition:background .18s,color .18s;
}
.nav-direct:hover { color:var(--gold); background:rgba(255,179,0,.13); }

.nav-arrow {
  display:inline-block; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .2s; flex-shrink:0;
}
.nav-item:hover > .nav-link-btn .nav-arrow { transform:rotate(180deg); }

.nav-dropdown {
  position:absolute; top:calc(100% + 6px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--glass);
  backdrop-filter:blur(18px);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow),var(--gold-glow);
  min-width:210px; padding:6px;
  opacity:0; visibility:hidden;
  transition:all .2s var(--ease);
}
.nav-item:hover .nav-dropdown {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-dropdown li a {
  display:block; padding:9px 14px;
  font-family:var(--font-body); font-size:.84rem; font-weight:500;
  color:var(--text); border-radius:var(--r);
  white-space:nowrap; transition:background .14s,color .14s,transform .14s;
}
.nav-dropdown li a:hover {
  background:var(--gold-light); color:var(--gold-dark);
  transform:translateX(4px);
}

.nav-x {
  flex-shrink:0; margin-left:6px;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%; color:var(--text-light);
  transition:all .2s;
}
.nav-x:hover { background:var(--gold-light); border-color:var(--gold); color:var(--gold); transform:scale(1.08); }

.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:7px; margin-left:auto;
  background:none; border:none; border-radius:var(--r);
  transition:background .18s;
}
.nav-hamburger:hover { background:rgba(255,179,0,.14); }
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--text-light); border-radius:2px;
  transition:all .3s var(--ease);
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:translateX(-10px); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---- Mobile menu: overlay (backdrop) ---- */
.mobile-menu {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(8,16,52,0.60);
  z-index:999;
  transition:visibility 0s .32s, opacity .32s var(--ease);
}
.mobile-menu.open {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:visibility 0s, opacity .32s var(--ease);
}

/* ---- Mobile menu: slide-in panel ---- */
.mm-drawer {
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(340px, 88vw);
  background:rgba(12,24,72,0.98);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-left:1px solid rgba(255,202,40,0.20);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  padding:calc(var(--nav-h) + 16px) 24px max(24px, env(safe-area-inset-bottom, 24px)) 24px;
  transform:translateX(100%);
  transition:transform .32s var(--ease);
}
.mm-drawer::-webkit-scrollbar { display:none; }
.mobile-menu.open .mm-drawer { transform:translateX(0); }

.mm-group { margin-bottom:20px; }
.mm-cat {
  font-family:var(--font-sub); font-weight:700; font-size:.78rem;
  color:var(--gold); text-transform:uppercase; letter-spacing:.14em;
  padding:10px 0 7px;
  border-bottom:1px solid rgba(255,202,40,.26);
  margin-bottom:6px;
}
.mm-links li a {
  display:block; padding:14px 16px;
  font-size:1rem; color:var(--text-light);
  border-radius:var(--r); transition:background .14s,color .14s;
}
.mm-links li a:hover { background:rgba(255,179,0,.14); color:var(--gold); }
.mm-x {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  color:var(--text-light); padding:10px 20px;
  border-radius:var(--r-full); font-weight:700; font-size:.9rem;
  margin-top:16px;
}
.mm-x:hover { background:rgba(255,179,0,.16); color:var(--gold); }

.mm-close {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  margin-left:auto;
  margin-bottom:20px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-full);
  color:rgba(255,255,255,.92);
  cursor:pointer;
  flex-shrink:0;
  transition:background .18s, color .18s, border-color .18s;
}
.mm-close:hover { background:rgba(255,179,0,.22); color:var(--gold); border-color:rgba(255,179,0,.60); }

/* ================================================================
   MAIN
   ================================================================ */
.main { margin-top:var(--nav-h); position:relative; z-index:1; }

/* ================================================================
   HERO — キービジュアル全開
   ================================================================ */
.hero {
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding:44px 20px 68px;
  text-align:center;
}


/* Cloud — 演出（控えめ） */
.cloud {
  position:absolute; background:rgba(255,255,255,.22);
  border-radius:50px; pointer-events:none; z-index:1;
}
.cloud::before,.cloud::after {
  content:''; position:absolute;
  background:rgba(255,255,255,.22); border-radius:50%;
}
.c1 { width:130px;height:38px;top:12%;left:5%;  animation:cfloat 22s ease-in-out infinite; }
.c1::before { width:58px;height:58px;top:-30px;left:20px; }
.c1::after  { width:44px;height:44px;top:-20px;left:56px; }
.c2 { width:190px;height:52px;top:20%;right:5%; animation:cfloat 28s ease-in-out infinite 4s;opacity:.6; }
.c2::before { width:84px;height:84px;top:-44px;left:30px; }
.c2::after  { width:64px;height:64px;top:-26px;left:92px; }
.c3 { width:112px;height:32px;top:8%;right:27%; animation:cfloat 19s ease-in-out infinite 9s;opacity:.5; }
.c3::before { width:50px;height:50px;top:-26px;left:14px; }
.c3::after  { width:38px;height:38px;top:-15px;left:44px; }
@keyframes cfloat { 0%,100%{transform:translateX(0)} 50%{transform:translateX(28px)} }

/* CSS Sparkles */
.hero-sparkle {
  position:absolute; border-radius:50%; pointer-events:none;
  animation:sparkleFloat 4s ease-in-out infinite both;
}
.hs1 { width:10px;height:10px;background:#FFD040;box-shadow:0 0 12px #FFD040;top:13%;left:8%;   animation-duration:4.4s; }
.hs3 { width:12px;height:12px;background:#15D698;box-shadow:0 0 14px #15D698;top:10%;right:13%; animation-duration:5.0s;animation-delay:.4s;  }
.hs5 { width:9px; height:9px; background:#80C8FF;box-shadow:0 0 11px #80C8FF;top:60%;left:4%;   animation-duration:3.6s;animation-delay:.9s;  }
.hs7 { width:8px; height:8px; background:#FF7AAA;box-shadow:0 0  9px #FF7AAA;top:18%;left:48%;  animation-duration:5.5s;animation-delay:1.4s; }
@keyframes sparkleFloat {
  0%,100% { transform:translateY(0) scale(1);       opacity:.70; }
  35%     { transform:translateY(-18px) scale(1.2);  opacity:1.0; }
  70%     { transform:translateY(-32px) scale(.8);   opacity:.30; }
}
.sparkles-bg { position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0; }

/* Dragon characters — width/border/shadow は個別ルールで制御 */
.hero-dragon {
  position:absolute; pointer-events:none;
  width:auto; height:auto;
  border:none !important; box-shadow:none !important;
  border-radius:0 !important; background:none !important;
  display:block;
}

/*
 * キャラクター配置 — 3体の基準要素・役割を分離
 *
 *  hd1 … .hero-promo基準  唯一のoverlap。プロモ左下に軽く被る。z-index:4（最前面）
 *  hd2 … .hero-inner基準  非overlap。タイトル右上エリア。縦=上層。z-index:3
 *  hd3 … .hero-inner基準  非overlap。タイトル左エリア。縦=上層・横=左。z-index:2
 *
 *  ▸ hd2/hd3 は top を固定px にすることでプロモ画像（下方）と縦軸が絶対に交差しない
 *  ▸ hd1 の bottom:0 でキャラ下端 = プロモ下ライン（制約を構造で保証）
 */

/* hd1: hero-promo基準 — プロモ左下角に重なる（唯一のoverlapキャラ） */
.hd1 {
  width:140px;
  left:-30px; bottom:0;
  z-index:4;
  animation:fd1 7s ease-in-out infinite;
  filter:
    drop-shadow(0 6px 18px rgba(0,0,0,.32))
    drop-shadow(0 0 22px rgba(255,179,0,.26));
}

/* hd2: hero-inner基準 — タイトル右上エリア（プロモと縦軸が交差しない） */
.hd2 {
  width:122px;
  right:-44px; top:14px;
  z-index:3;
  animation:fd2 9s ease-in-out infinite;
  filter:
    drop-shadow(0 8px 24px rgba(21,214,152,.46))
    drop-shadow(0 4px 12px rgba(0,0,0,.30));
}

/* hd3: hero-inner基準 — タイトル左エリア・hd2より少し下（縦横とも分散） */
.hd3 {
  width:108px;
  left:-18px; top:56px;
  z-index:2;
  opacity:.90;
  animation:fd3 8s ease-in-out infinite;
  filter:
    drop-shadow(0 4px 14px rgba(0,0,0,.20))
    drop-shadow(0 0 18px rgba(200,120,255,.26));
}
@keyframes fd1 { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-22px) rotate(3deg)} }
@keyframes fd2 { 0%,100%{transform:translateY(0) rotate(5deg)}  50%{transform:translateY(-16px) rotate(-5deg)} }
@keyframes fd3 { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-26px) rotate(2deg)} }

/* Hero content */
.hero-inner { position:relative; z-index:2; max-width:920px; width:100%; }

.hero-num-badge {
  display:inline-block;
  font-family:var(--font-sub); font-size:.58rem; font-weight:700;
  letter-spacing:.16em; color:var(--sky);
  border:1px solid rgba(96,160,232,.52);
  padding:2px 11px; border-radius:var(--r-full);
  background:rgba(96,160,232,.18);
  vertical-align:super; line-height:1;
  margin-left:9px; white-space:nowrap;
  box-shadow:0 0 12px rgba(96,160,232,.22);
}

.hero-title-wrap {
  display:flex; align-items:center; gap:12px;
  justify-content:center; flex-wrap:wrap;
  margin-bottom:16px;
}
.hero-title-wrap .hero-title { margin-bottom:0; }

.hero-edition {
  display:inline-block; flex-shrink:0;
  font-family:var(--font-sub); font-size:.82rem; font-weight:900;
  letter-spacing:.22em; color:#e8f4ff;
  border:1px solid rgba(180,220,255,.80);
  padding:5px 18px; border-radius:var(--r-full);
  background:rgba(40,90,180,.55);
  box-shadow:0 0 16px rgba(100,170,255,.40),0 2px 8px rgba(0,0,0,.40);
  text-shadow:0 1px 6px rgba(0,0,0,.60),0 0 18px rgba(160,210,255,.70);
  white-space:nowrap; line-height:1;
}

.hero-en-title {
  font-family:'Cinzel Decorative','RocknRoll One',sans-serif;
  font-size:clamp(2.0rem,6.4vw,4.8rem);
  font-weight:700;
  /* グラデーションを横方向に広げてシマー流れを有効化 */
  background:linear-gradient(135deg,
    #FFCA28  0%,
    #FFFFFF 16%,
    #FFE880 28%,
    #FFB300 48%,
    #FF8C00 70%,
    #FF6020 86%,
    #FFB300 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.38)) drop-shadow(0 0 30px rgba(255,179,0,.62));
  line-height:1.04; letter-spacing:.05em; margin-bottom:5px;
  /* ① グロー脈動  ② 微小浮遊  ③ グラデーション流れ */
  animation:
    titleGlow      3.4s ease-in-out infinite alternate,
    titleDrift     6.5s ease-in-out infinite,
    titleGradShift 9.0s linear     infinite;
}
@keyframes titleGlow {
  from { filter:drop-shadow(0 3px 6px rgba(0,0,0,.38)) drop-shadow(0 0 22px rgba(255,179,0,.48)); }
  to   { filter:drop-shadow(0 3px 6px rgba(0,0,0,.38)) drop-shadow(0 0 54px rgba(255,179,0,.92)); }
}
/* 1〜2px の微小縦揺れ — 生きているような浮遊感 */
@keyframes titleDrift {
  0%,100% { transform:translateY(0px);   }
  38%     { transform:translateY(-2px);  }
  72%     { transform:translateY(0.8px); }
}
/* グラデーションが左から右へゆっくり流れる */
@keyframes titleGradShift {
  0%   { background-position:0%   center; }
  100% { background-position:220% center; }
}

.hero-title {
  font-family:var(--font-heading);
  font-size:clamp(.88rem,2.3vw,1.58rem);
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 8px rgba(0,0,0,.42),0 0 22px rgba(255,179,0,.22);
  letter-spacing:.06em; line-height:1.4; margin-bottom:16px;
  cursor:default; user-select:none;
}

/* プロモーションイラスト — 画面の主役 */
.hero-promo {
  position:relative;
  max-width:min(820px,94vw); margin:12px auto 28px;
}
/* プロモ画像本体のみに適用（.hero-dragon を除外） */
.hero-promo img:not(.hero-dragon) {
  width:100%; height:auto;
  border-radius:var(--r-xl);
  box-shadow:
    var(--shadow-l),
    0 0 80px rgba(255,179,0,.32),
    0 0 44px rgba(21,214,152,.18);
  border:3px solid rgba(255,202,40,.74);
  display:block;
}
.hero-promo-ring {
  position:absolute; inset:-10px;
  border:2px solid var(--gold);
  border-radius:calc(var(--r-xl) + 10px); pointer-events:none;
  animation:ringpulse 3.0s ease-in-out infinite alternate;
}
.hero-promo-ring2 {
  position:absolute; inset:-22px;
  border:1px solid rgba(255,179,0,.28);
  border-radius:calc(var(--r-xl) + 22px); pointer-events:none;
  animation:ringpulse 3.0s ease-in-out infinite alternate-reverse;
}
@keyframes ringpulse {
  from { box-shadow:0 0 10px rgba(255,179,0,.28); opacity:.72; }
  to   { box-shadow:0 0 44px rgba(255,179,0,.72); opacity:1;   }
}

/* リターンズ ── インライン版（タイトルと同行） */
.hero-returns-inline {
  font-family:var(--font-sub); font-style:italic;
  font-size:.64em;
  color:rgba(255,230,120,.94);
  text-shadow:0 0 20px rgba(255,179,0,.72), 0 1px 4px rgba(0,0,0,.50);
  letter-spacing:.18em;
  white-space:nowrap;
}

/* 旧スタンドアローン版（後方互換のため残す） */
.hero-returns {
  display:inline-block;
  font-family:var(--font-sub); font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.55rem);
  color:rgba(255,242,200,0.97);
  text-shadow:0 0 28px rgba(255,179,0,.82), 0 2px 6px rgba(0,0,0,.60);
  letter-spacing:.22em; margin-bottom:34px;
  background:rgba(12,14,46,0.34);
  padding:5px 26px; border-radius:var(--r-full);
  border:1px solid rgba(255,202,40,.28);
}

/* Hero catchphrase */
.hero-catch {
  font-family:var(--font-body);
  font-size:clamp(.88rem,2.0vw,1.08rem);
  color:rgba(255,242,200,.92);
  text-shadow:0 1px 10px rgba(0,0,0,.52), 0 0 28px rgba(255,179,0,.26);
  letter-spacing:.06em;
  margin-bottom:26px;
  background:rgba(12,14,46,.28);
  display:inline-block;
  padding:7px 24px;
  border-radius:var(--r-full);
  border:1px solid rgba(255,202,40,.20);
  white-space:nowrap;
}

.hero-info-row {
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; margin-bottom:26px;
}
.hero-badge-item {
  display:flex; align-items:center; gap:6px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-full);
  padding:7px 16px;
  font-family:var(--font-body); font-size:.82rem; font-weight:700;
  color:var(--text);
  box-shadow:var(--shadow-s); white-space:nowrap;
  backdrop-filter:blur(10px);
}
.hero-badge-item svg { flex-shrink:0; color:var(--gold-dark); }

.hero-cta { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 32px;
  font-family:var(--font-body); font-size:.96rem; font-weight:700;
  border-radius:var(--r-full); border:none; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  text-decoration:none; white-space:nowrap;
  will-change:transform; backface-visibility:hidden;
}

.btn-primary {
  background:linear-gradient(135deg,#CC8800 0%,#FFB300 50%,#FFCA28 100%);
  color:#1A0C00;
  box-shadow:0 4px 22px rgba(255,179,0,.48);
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 9px 34px rgba(255,179,0,.64); color:#1A0C00; }

.btn-secondary {
  background:rgba(50, 40, 10, 0.92);
  color:var(--gold);
  border:1.5px solid rgba(255,202,40,0.72);
}
.btn-secondary:hover {
  background:rgba(70, 55, 10, 0.97);
  color:var(--gold);
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(255,179,0,.32);
}

/* Hero CTA secondary — higher contrast against hero gradient */
.hero-cta .btn-secondary {
  background:rgba(14,28,76,0.92);
  color:rgba(255,230,90,.96);
  border-color:rgba(255,202,40,.72);
}
.hero-cta .btn-secondary:hover {
  background:rgba(14,28,76,0.72);
  color:#FFD040;
  border-color:var(--gold);
  box-shadow:0 6px 24px rgba(255,179,0,.38);
}

.btn-ruby {
  background:linear-gradient(135deg,#9E0030 0%,#D91A4D 100%);
  color:white;
  box-shadow:0 4px 20px rgba(217,26,77,.46);
}
.btn-ruby:hover { transform:translateY(-3px); box-shadow:0 9px 32px rgba(217,26,77,.60); color:white; }

.btn-emerald {
  background:linear-gradient(135deg,#009960 0%,#15D698 100%);
  color:#001A0E;
  box-shadow:0 4px 18px rgba(21,214,152,.42);
}
.btn-emerald:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(21,214,152,.56); color:#001A0E; }

.btn-outline {
  background:rgba(30, 25, 10, 0.90); color:var(--gold);
  border:1.5px solid rgba(255,202,40,.60);
}
.btn-outline:hover { background:rgba(50, 40, 10, 0.97); color:var(--gold); border-color:var(--gold); transform:translateY(-2px); }

.btn-purple {
  background:linear-gradient(135deg,#6040B0 0%,#8860E0 100%);
  color:white;
  box-shadow:0 4px 20px rgba(96,64,176,.42);
}
.btn-purple:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(96,64,176,.56); color:white; }

.btn-outline-dark {
  background:rgba(255,255,255,.82); color:var(--sky-deep);
  border:2px solid var(--sky-deep);
}
.btn-outline-dark:hover { background:var(--sky-deep); color:white; transform:translateY(-2px); }

.btn-lg { font-size:1.06rem; padding:14px 44px; }

/* ================================================================
   SECTIONS — 情報設計ベース
   ================================================================ */
section {
  padding:76px 20px;
  position:relative; z-index:1;
}

.container    { max-width:1120px; margin:0 auto; }
.container-sm { max-width:840px;  margin:0 auto; }

/* ================================================================
   SECTION HEADER — フェスティバル感強化
   ================================================================ */
.sec-head { text-align:center; margin-bottom:52px; }

/* レインボーデコレーションライン（上） */
.sec-head::before {
  content:''; display:block;
  width:80px; height:3px; margin:0 auto 16px;
  background:linear-gradient(90deg, var(--ruby), var(--gold), var(--emerald));
  border-radius:var(--r-full);
  opacity:.80;
}

.sec-head h2 {
  font-family:var(--font-heading);
  font-size:clamp(1.65rem,3.8vw,2.4rem);
  color:var(--gold);
  text-shadow:0 0 32px rgba(255,179,0,.52),0 2px 5px rgba(0,0,0,.36);
  margin-bottom:8px;
  letter-spacing:.03em;
}
.sec-head p { color:var(--text-muted); font-size:.92rem; text-shadow:0 1px 6px rgba(0,0,0,.55); }

/* レインボーデコレーションライン（下） */
.sec-head::after {
  content:''; display:block;
  width:80px; height:3px; margin:16px auto 0;
  background:linear-gradient(90deg, var(--emerald), var(--gold), var(--ruby));
  border-radius:var(--r-full);
  opacity:.80;
}

/* ================================================================
   INFO CARDS — 開催概要グリッド（カラーバリエーション付き）
   ================================================================ */
.info-cards-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px;
}
.info-card {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:22px 18px; text-align:center;
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(14px);
  transition:transform .24s var(--ease),box-shadow .24s;
}
.info-card:hover { transform:translateY(-5px); box-shadow:var(--glass-shadow),var(--gold-glow); }

/* カラーコード: 開催日 → gold / 時間 → ruby / 会場 → sky / 定員 → emerald / 入場料 → gold / 回数 → purple */
.info-card:nth-child(1) .info-card-icon { background:rgba(255,179,0,.18); border-color:rgba(255,202,40,.48); }
.info-card:nth-child(1) .info-card-icon svg { color:var(--gold-dark); }
.info-card:nth-child(2) .info-card-icon { background:rgba(217,26,77,.14); border-color:rgba(217,26,77,.40); }
.info-card:nth-child(2) .info-card-icon svg { color:var(--ruby); }
.info-card:nth-child(2):hover { box-shadow:var(--glass-shadow),var(--ruby-glow); }
.info-card:nth-child(3) .info-card-icon { background:rgba(96,160,232,.14); border-color:rgba(96,160,232,.40); }
.info-card:nth-child(3) .info-card-icon svg { color:var(--sky-deep); }
.info-card:nth-child(3):hover { box-shadow:var(--glass-shadow),0 0 24px rgba(96,160,232,.40); }
.info-card:nth-child(4) .info-card-icon { background:rgba(21,214,152,.14); border-color:rgba(21,214,152,.40); }
.info-card:nth-child(4) .info-card-icon svg { color:#009960; }
.info-card:nth-child(4):hover { box-shadow:var(--glass-shadow),var(--emerald-glow); }
.info-card:nth-child(5) .info-card-icon { background:rgba(255,179,0,.18); border-color:rgba(255,202,40,.48); }
.info-card:nth-child(5) .info-card-icon svg { color:var(--gold-dark); }
.info-card:nth-child(6) .info-card-icon { background:rgba(144,100,220,.14); border-color:rgba(144,100,220,.40); }
.info-card:nth-child(6) .info-card-icon svg { color:#6040B0; }

.info-card-icon {
  width:52px; height:52px; margin:0 auto 13px;
  border-radius:50%;
  border:1px solid;
  display:flex; align-items:center; justify-content:center;
  transition:transform .22s, box-shadow .22s;
}
.info-card-label { font-size:.70rem; font-weight:700; color:var(--text-sub); text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; display:block; }
.info-card-val   { font-size:.98rem; font-weight:700; color:var(--text); line-height:1.4; word-break:keep-all; overflow-wrap:break-word; }

/* ================================================================
   ABOUT TEASER — 2カラム
   ================================================================ */
.about-teaser {
  display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;
}
@media(max-width:760px) { .about-teaser { grid-template-columns:1fr; } }

.about-teaser-card {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  padding:36px;
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(14px);
  color:var(--text);
}
.about-teaser-card h2 {
  font-family:var(--font-heading);
  font-size:clamp(1.3rem,3vw,1.8rem);
  color:var(--gold-dark); margin-bottom:8px;
}
.about-teaser-card p { color:var(--text); line-height:1.88; margin-bottom:.85em; }
.about-teaser-card p:last-of-type { margin-bottom:0; }

.gold-rule {
  width:52px; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  border-radius:var(--r-full); margin:0 0 18px;
}

.about-teaser-img { display:flex; align-items:center; justify-content:center; }
.about-teaser-img img {
  width:min(290px,88%); height:auto;
  filter:drop-shadow(0 8px 28px rgba(21,214,152,.30));
}

/* ================================================================
   SPECIAL PROGRAM
   ================================================================ */
.program-card {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl); padding:40px;
  box-shadow:var(--glass-shadow); backdrop-filter:blur(14px);
  text-align:center; position:relative; overflow:hidden;
}
.program-card::before {
  content:''; position:absolute; top:-50px; right:-50px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,179,0,.13) 0%,transparent 70%);
  pointer-events:none;
}
.program-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--ruby), var(--gold), var(--emerald), var(--sky));
}
.program-card-icon {
  width:64px; height:64px; margin:0 auto 16px;
  background:linear-gradient(135deg,rgba(255,179,0,.22),rgba(255,202,40,.13));
  border-radius:50%;
  border:1px solid rgba(255,202,40,.46);
  display:flex; align-items:center; justify-content:center;
}
.program-card-icon svg { color:var(--gold-dark); }
.program-card h3 {
  font-family:var(--font-heading);
  font-size:clamp(1.1rem,2.5vw,1.6rem);
  color:var(--gold-dark); margin:0 0 12px;
}
.program-card p { color:var(--text); max-width:600px; margin:0 auto; }

.tag-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
.tag {
  display:inline-block; font-family:var(--font-sub); font-size:.70rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 14px; border-radius:var(--r-full);
}
.tag-gold    { background:rgba(255,179,0,.16);   color:var(--gold-deep);  border:1px solid rgba(255,179,0,.40); }
.tag-ruby    { background:rgba(217,26,77,.12);   color:var(--ruby);       border:1px solid rgba(217,26,77,.32); }
.tag-emerald { background:rgba(21,214,152,.12);  color:#009960;           border:1px solid rgba(21,214,152,.32); }
.tag-sky     { background:rgba(96,160,232,.12);  color:var(--sky-deep);   border:1px solid rgba(96,160,232,.32); }

/* ================================================================
   ACCESS
   ================================================================ */
.access-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
@media(max-width:760px) { .access-grid { grid-template-columns:1fr; } }

.access-card {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg); padding:28px;
  box-shadow:var(--glass-shadow); backdrop-filter:blur(14px);
}
.access-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 0; border-bottom:1px solid rgba(255,179,0,.12);
}
.access-row:last-child { border-bottom:none; }
.access-icon {
  flex-shrink:0; width:34px; height:34px;
  background:rgba(255,179,0,.14); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.access-icon svg { color:var(--gold-dark); }
.access-label { font-size:.72rem;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:2px; }
.access-val   { font-size:.93rem;font-weight:700;color:var(--text); }
.access-place-val{ font-size:.93rem;font-weight:700;color:var(--text);text-decoration: underline; }
.map-card {
  background:linear-gradient(135deg,rgba(96,160,232,.14) 0%,var(--glass) 100%);
  border:1px solid rgba(96,160,232,.38);
  border-radius:var(--r-lg); padding:28px;
  box-shadow:var(--glass-shadow); backdrop-filter:blur(14px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.map-card h3 { font-family:var(--font-heading);color:var(--sky-deep);margin-bottom:8px;font-size:1.05rem; }
.map-card p  { font-size:.88rem;color:var(--text-sub);margin-bottom:18px; }
.map-card-embed { padding:20px; align-items:stretch; }
.map-card-embed iframe { border-radius:var(--r); }

/* ================================================================
   NAV CARDS
   ================================================================ */
.nav-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.nav-card {
  display:block; padding:28px 20px; text-align:center;
  text-decoration:none; color:var(--text);
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow); backdrop-filter:blur(14px);
  transition:transform .24s var(--ease),box-shadow .24s,border-color .24s;
}
.nav-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--glass-shadow),var(--gold-glow);
  border-color:rgba(255,202,40,.70); color:var(--text);
}
.nc-icon {
  width:54px; height:54px; margin:0 auto 12px;
  background:linear-gradient(135deg,rgba(255,179,0,.16),rgba(255,202,40,.08));
  border-radius:50%; border:1px solid rgba(255,202,40,.38);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .22s,background .22s,transform .22s;
}
.nav-card:hover .nc-icon { box-shadow:var(--gold-glow); background:rgba(255,179,0,.24); transform:scale(1.08); }
.nc-icon svg { color:var(--gold-dark); }
.nav-card h3 { font-family:var(--font-heading);font-size:.97rem;margin-bottom:5px;color:var(--gold-dark); }
.nav-card p  { font-size:.82rem;color:var(--text-sub);margin:0; }

/* ================================================================
   PAGE HERO (sub-pages) — ページ識別
   ================================================================ */
.page-hero {
  min-height:220px;
  padding:24px 20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden; z-index:1;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center,rgba(255,179,0,.16) 0%,transparent 65%);
  pointer-events:none;
}
/* フェスティバルボーダーライン */
.page-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--ruby), var(--gold), var(--emerald), var(--sky), var(--gold), var(--ruby));
}

.page-hero-title {
  font-family:var(--font-title);
  font-size:clamp(1.7rem,4.8vw,3.0rem);
  color:var(--gold);
  text-shadow:0 0 30px rgba(255,179,0,.52),0 2px 6px rgba(0,0,0,.32);
  margin-bottom:6px; letter-spacing:.04em;
  word-break:keep-all; overflow-wrap:break-word;
  cursor:default; user-select:none;
}
.page-hero-sub { color:rgba(255,255,255,.84); font-size:.92rem; text-shadow:0 1px 8px rgba(0,0,0,.60); }

.page-title-wrap {
  display:inline-flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:nowrap; margin-bottom:8px;
}
.pd-title { width:clamp(40px,5.5vw,68px); flex-shrink:0; filter:drop-shadow(0 2px 8px rgba(255,179,0,.30)); }
.pd-title-l { transform:scaleX(-1); animation:fd1 6.5s ease-in-out infinite; }
.pd-title-r { animation:fd3 7.5s ease-in-out infinite 0.8s; }

/* ================================================================
   BREADCRUMB — ページ位置表示
   ================================================================ */
.breadcrumb {
  display:flex; align-items:center; gap:6px;
  justify-content:center; font-size:.80rem;
  color:var(--text-muted); margin-bottom:14px; flex-wrap:wrap;
}
.breadcrumb a { color:rgba(255,255,255,.70); transition:color .16s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb-sep { opacity:.50; font-size:.70rem; }
.breadcrumb-sep::before { content:'›'; }

/* ================================================================
   CONTENT BOX — サブページ グラスカード
   ================================================================ */
.cbox {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  padding:32px;
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(14px);
  margin-bottom:22px;
  color:var(--text);
}
.cbox:last-child { margin-bottom:0; }
.cbox-title {
  font-family:var(--font-heading);
  font-size:1.12rem; color:var(--gold-dark);
  margin-bottom:14px; padding-bottom:10px;
  border-bottom:2px solid rgba(255,202,40,.32);
}
.cbox p { color:var(--text); line-height:1.88; }
.cbox a { color:var(--sky-deep); font-weight:700; }
.cbox a:hover { color:var(--sky); }

/* Notice boxes */
.notice {
  background:rgba(255,252,242,0.90);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
  padding:11px 15px; font-size:.9rem; margin:12px 0; color:var(--text);
  line-height:1.7;
}
.notice-warn { background:rgba(255,242,244,0.90); border-left-color:var(--ruby); }
.notice-info { background:rgba(220,238,255,0.90); border-left-color:var(--sky-deep); }

/* ================================================================
   RULES
   ================================================================ */
.rules-sec {
  background:var(--glass);
  border-left:4px solid var(--gold);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:24px 28px;
  box-shadow:var(--glass-shadow); backdrop-filter:blur(14px);
  margin-bottom:20px; color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.rules-sec:hover { border-left-color:var(--sky); box-shadow:var(--glass-shadow),var(--gold-glow); }
.rules-sec h3 { font-family:var(--font-heading);font-size:1.08rem;color:var(--gold-dark);margin-bottom:12px; }

.dot-list { display:flex;flex-direction:column;gap:4px; }
.dot-list li {
  padding:7px 0 7px 20px;position:relative;
  font-size:.91rem;line-height:1.82;color:var(--text);
  border-bottom:1px solid rgba(255,179,0,.10);
}
.dot-list li:last-child { border-bottom:none; }
.dot-list li::before { content:'▸';position:absolute;left:0;top:.45rem;color:var(--sky-deep);font-size:.72rem; }
.dot-list.sub { padding-left:12px; }
.dot-list.sub li::before { color:var(--gold-dark); }

.prohibition {
  background:rgba(217,26,77,.08);
  border:1px solid rgba(217,26,77,.26);
  border-radius:var(--r);padding:16px 20px;margin-top:14px;
}
.prohibition h4 { color:var(--ruby);margin-bottom:10px;font-size:.93rem;font-family:var(--font-heading); }
.prohibition li { padding:5px 0 5px 16px;position:relative;font-size:.87rem;color:var(--text-sub); }
.prohibition li::before { content:'✕';position:absolute;left:0;color:var(--ruby);font-weight:700; }

/* ================================================================
   FAQ
   ================================================================ */
.faq-item {
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r);margin-bottom:10px;overflow:hidden;
  backdrop-filter:blur(14px);transition:border-color .2s;
}
.faq-item.open { border-color:rgba(255,202,40,.70); }
.faq-q {
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;font-weight:700;cursor:pointer;user-select:none;
  font-family:var(--font-body);font-size:.92rem;color:var(--text);
  transition:background .14s;
}
.faq-q:hover { background:rgba(255,179,0,.08); }
.faq-q-badge {
  flex-shrink:0;width:28px;height:28px;
  background:linear-gradient(135deg,var(--sky-deep),var(--sky));
  color:white;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-sub);font-size:.85rem;font-weight:700;
}
.faq-toggle { margin-left:auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:transform .25s;flex-shrink:0; }
.faq-item.open .faq-toggle { transform:rotate(180deg); }
.faq-toggle svg { pointer-events:none;color:var(--text-sub); }
.faq-a { max-height:0;overflow:hidden;transition:max-height .4s var(--ease); }
.faq-item.open .faq-a { max-height:600px; }
.faq-a-inner {
  padding:0 18px 16px calc(18px + 28px + 12px);
  font-size:.9rem;color:var(--text-sub);line-height:1.82;
}
.faq-a-inner::before { content:'A.  ';font-weight:700;color:var(--gold-dark); }

/* ================================================================
   STAFF
   ================================================================ */
.staff-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:20px; }
.staff-card {
  text-align:center;padding:24px 14px;
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);box-shadow:var(--glass-shadow);backdrop-filter:blur(14px);
  color:var(--text);transition:transform .24s,box-shadow .24s;
}
.staff-card:hover { transform:translateY(-4px);box-shadow:var(--glass-shadow),var(--gold-glow); }
.staff-avatar {
  width:88px;height:88px;border-radius:50%;margin:0 auto 12px;
  border:2px solid rgba(255,202,40,.46);overflow:hidden;
  background:rgba(255,179,0,.10);
  transition:border-color .22s,box-shadow .22s,transform .22s;
}
.staff-card:hover .staff-avatar {
  border-color:var(--gold);
  box-shadow:0 0 24px rgba(255,179,0,.46),0 0 0 4px rgba(255,179,0,.12);
  transform:scale(1.06);
}
.staff-avatar img { width:100%;height:100%;object-fit:cover; }
.staff-name { font-family:var(--font-heading);font-size:.96rem;font-weight:700;margin-bottom:7px; }
.staff-x {
  display:inline-flex;align-items:center;gap:5px;
  font-size:.78rem;color:var(--text-sub);
  background:rgba(0,0,0,.05);border:1px solid rgba(255,179,0,.30);
  padding:4px 12px;border-radius:var(--r-full);transition:all .2s;
}
.staff-x:hover { border-color:var(--gold);color:var(--gold-dark);background:rgba(255,179,0,.10); }

/* ================================================================
   HISTORY
   ================================================================ */
.history-entry {
  background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r-xl);padding:32px;
  box-shadow:var(--glass-shadow);backdrop-filter:blur(14px);
  margin-bottom:40px;color:var(--text);
}
.history-head { display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap; }
.history-badge {
  background:linear-gradient(135deg,#CC8800 0%,var(--gold) 50%,#FFCA28 100%);
  color:#1a1200;font-family:var(--font-sub);font-weight:700;
  font-size:1.0rem;padding:8px 20px;border-radius:var(--r-full);box-shadow:var(--shadow-s);
}
.history-title { font-family:var(--font-heading);font-size:1.3rem;color:var(--gold-dark); }
.history-meta  { font-size:.85rem;color:var(--text-sub);margin-top:3px; }
.stats-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-bottom:24px; }
.stat {
  background:rgba(255,179,0,.10);border:1px solid rgba(255,202,40,.32);
  border-radius:var(--r);padding:14px 10px;text-align:center;
}
.stat-num { font-family:var(--font-sub);font-size:1.8rem;font-weight:700;color:var(--gold-dark);line-height:1;margin-bottom:3px; }
.stat-lbl  { font-size:.78rem;color:var(--text-sub); }
.history-photo { border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glass-shadow); }
.history-photo img { width:100%;height:auto;cursor:pointer;transition:opacity .2s; }
.history-photo img:hover { opacity:.88; }

/* History 2-column layout */
.history-content {
  display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start;
}
@media(max-width:700px) {
  .history-content { grid-template-columns:1fr; }
}

/* Photo Modal */
.photo-modal {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .24s var(--ease),visibility .24s;
}
.photo-modal.open { opacity:1; visibility:visible; }
.photo-modal-bg {
  position:absolute; inset:0;
  background:rgba(8,14,44,.90);
  backdrop-filter:blur(7px); cursor:pointer;
}
.photo-modal-inner {
  position:relative; z-index:1;
  max-width:min(900px,92vw); max-height:90vh;
}
.photo-modal-inner img {
  width:100%; height:auto; max-height:85vh; object-fit:contain;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-l),0 0 60px rgba(255,179,0,.20);
  border:2px solid rgba(255,202,40,.42); display:block;
}
.photo-modal-close {
  position:absolute; top:-16px; right:-16px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.32);
  color:white; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s,transform .18s; backdrop-filter:blur(8px);
}
.photo-modal-close:hover { background:rgba(255,255,255,.30); transform:scale(1.12); }

/* Step list (register page) */
.step-list { list-style:decimal; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.step-list li { font-size:.93rem; line-height:1.80; color:var(--text); }

/* Registration flow steps */
.reg-steps { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.reg-step  { display:flex; gap:14px; align-items:flex-start; }
.reg-step-num {
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:var(--sky-deep); color:white;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; margin-top:2px;
  box-shadow:0 2px 8px rgba(30,80,200,.28);
}
.reg-step-body { display:flex; flex-direction:column; gap:2px; }
.reg-step-body strong { font-size:.94rem; color:var(--text); line-height:1.55; }
.reg-step-body span   { font-size:.84rem; color:var(--text-sub); line-height:1.65; }
.reg-step-highlight .reg-step-num { background:var(--gold-dark); box-shadow:0 2px 8px rgba(200,120,0,.30); }
.reg-step-warn {
  display:block; margin-top:8px;
  padding:8px 12px;
  background:rgba(255,242,244,.95); border-left:3px solid var(--ruby);
  border-radius:0 var(--r) var(--r) 0;
  font-size:.82rem; color:#8B0020; line-height:1.75;
}

/* Google account notice in register box */
.reg-google-notice {
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(66,133,244,.10); border-left-color:#4285F4;
  margin:16px 0 20px; text-align:left;
}

/* ================================================================
   REGISTER / CONTACT
   ================================================================ */
.register-box {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);padding:44px 36px;text-align:center;
  box-shadow:var(--glass-shadow);backdrop-filter:blur(14px);
  margin-bottom:22px;color:var(--text);
}
.register-box h2 { font-family:var(--font-heading);color:var(--sky-deep);margin-bottom:10px;font-size:1.4rem; }
.contact-box {
  background:var(--glass-alt);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);padding:48px 36px;text-align:center;
  box-shadow:var(--glass-shadow);backdrop-filter:blur(14px);
  color:var(--text);
}
.contact-box h2 { font-family:var(--font-heading);color:var(--gold-dark);margin-bottom:10px;font-size:1.4rem; }

/* ================================================================
   PRIVACY
   ================================================================ */
.prv-sec { margin-bottom:24px; }
.prv-sec h3 {
  font-family:var(--font-heading);font-size:.98rem;color:var(--gold-dark);
  padding:6px 12px;
  background:rgba(255,179,0,.12);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
  margin-bottom:12px;
}
.prv-sec ol,.prv-sec ul { padding-left:22px;margin-top:7px;list-style:decimal;display:flex;flex-direction:column;gap:4px; }
.prv-sec li { font-size:.9rem;color:var(--text-sub);line-height:1.82; }

/* ================================================================
   PAGE BOTTOM NAV — 関連ページ誘導
   ================================================================ */
.page-bottom-nav {
  border-top:2px solid rgba(255,202,40,.22);
  padding-top:44px;
  margin-top:48px;
}
.page-bottom-nav-title {
  font-family:var(--font-heading);
  font-size:1.0rem; color:var(--gold);
  text-shadow:0 0 14px rgba(255,179,0,.40);
  margin-bottom:16px; text-align:center;
  letter-spacing:.06em;
}
.page-nav-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;
}
.page-nav-link {
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-s); backdrop-filter:blur(10px);
  color:var(--text); font-size:.88rem; font-weight:700;
  transition:all .22s var(--ease);
  text-decoration:none;
}
.page-nav-link:hover {
  transform:translateY(-3px);
  border-color:rgba(255,202,40,.62);
  color:var(--gold-dark);
  box-shadow:var(--shadow-m),var(--gold-glow);
}
.page-nav-link svg { color:var(--gold-dark); flex-shrink:0; }
.page-nav-link span { flex:1; }

/* ================================================================
   GLASS CARD generic
   ================================================================ */
.glass-card {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--glass-shadow);
  position:relative; overflow:hidden;
  transition:transform .26s var(--ease),box-shadow .26s,border-color .26s;
}
.glass-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--glass-shadow),var(--gold-glow);
  border-color:rgba(255,202,40,.68);
}

/* ================================================================
   PHOTO FLOAT GALLERY (beginner page)
   ================================================================ */
.photo-float-gallery {
  display:flex; gap:16px; justify-content:center; align-items:flex-end;
  margin:0 0 28px; padding:8px 0 18px;
  flex-wrap:wrap;
}
.pf-photo {
  flex-shrink:0; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--glass-shadow),0 0 28px rgba(255,179,0,.22);
  border:2px solid rgba(255,202,40,.42);
}
.pf-photo img { width:100%; height:auto; display:block; cursor:zoom-in; }
.pf-1 { width:clamp(140px,36vw,220px); animation:pfbob1 6s ease-in-out infinite; }
.pf-2 { width:clamp(160px,42vw,260px); animation:pfbob2 7s ease-in-out infinite .8s; }
.pf-3 { width:clamp(130px,33vw,200px); animation:pfbob3 8s ease-in-out infinite 1.6s; }
@keyframes pfbob1 { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(-4deg) translateY(-9px)} }
@keyframes pfbob2 { 0%,100%{transform:rotate(1.5deg)} 50%{transform:rotate(1.5deg) translateY(-11px)} }
@keyframes pfbob3 { 0%,100%{transform:rotate(4deg)} 50%{transform:rotate(4deg) translateY(-7px)} }

/* ================================================================
   ABOUT PAGE PHOTO ROW
   ================================================================ */
.about-photo-row {
  display:flex; gap:14px; justify-content:center; align-items:flex-end;
  margin:0 0 28px;
  flex-wrap:wrap;
}
.ap-photo {
  flex:1; min-width:clamp(100px,26vw,160px); max-width:220px;
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--glass-shadow),0 0 22px rgba(255,179,0,.18);
  border:2px solid rgba(255,202,40,.36);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ap-photo:nth-child(2) { margin-bottom:12px; }
.ap-photo img { width:100%; height:auto; display:block; cursor:zoom-in; }
.ap-photo:hover {
  transform:translateY(-4px);
  box-shadow:var(--glass-shadow),0 0 34px rgba(255,179,0,.32);
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background:rgba(14,26,72,.97);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,202,40,.24);
  color:var(--text-muted);
  padding:56px 20px 28px;
  position:relative; z-index:1;
}
.footer-wrap { max-width:1120px;margin:0 auto; }
.footer-top { display:flex;gap:46px;flex-wrap:wrap;margin-bottom:32px; }
.footer-brand { flex:1;min-width:200px; }
.footer-brand-name {
  font-family:var(--font-heading);
  font-size:1.06rem;color:rgba(255,255,255,.94);
  letter-spacing:.06em;margin-bottom:9px;
  text-shadow:0 0 18px rgba(255,179,0,.46);
}
.footer-tagline { font-size:.82rem;color:var(--text-muted);margin-bottom:13px; }
.footer-x {
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:var(--text-muted);padding:6px 16px;
  border-radius:var(--r-full);font-size:.82rem;font-weight:700;transition:all .2s;
}
.footer-x:hover { background:rgba(255,179,0,.16);border-color:var(--gold);color:var(--gold); }
.footer-nav { display:flex;gap:38px;flex-wrap:wrap; }
.fn-group h4 {
  font-family:var(--font-heading);font-size:.92rem;font-weight:700;
  letter-spacing:.04em;color:var(--gold);
  margin-bottom:10px;
  text-shadow:0 0 14px rgba(255,179,0,.36);
}
.fn-group ul { display:flex;flex-direction:column;gap:6px; }
.fn-group ul li a {
  font-size:.82rem;color:rgba(255,255,255,.50);
  white-space:nowrap;transition:color .14s,transform .14s;display:inline-block;
}
.fn-group ul li a:hover { color:var(--gold);transform:translateX(4px); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:16px;text-align:center;
  font-size:.76rem;color:rgba(255,255,255,.26);
}
.footer-secret {
  display:inline-block; color:var(--gold);
  font-size:.50rem; opacity:0.04;
  text-decoration:none; margin-left:8px;
  transition:opacity .5s;
}
.footer-secret:hover { opacity:.35; }

/* ================================================================
   SCROLL ANIMATION
   ================================================================ */
.fade-up {
  opacity:0; transform:translateY(24px);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
}
.fade-up.in { opacity:1;transform:translateY(0); }
.delay-1{transition-delay:.01s} .delay-2{transition-delay:.02s}
.delay-3{transition-delay:.03s} .delay-4{transition-delay:.04s}
.delay-5{transition-delay:.05s} .delay-6{transition-delay:.06s}

/* ================================================================
   UTILITIES
   ================================================================ */
.text-center { text-align:center; }
.mt-lg  { margin-top:32px; }
.mt-xl  { margin-top:52px; }
.mb-lg  { margin-bottom:32px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:900px) {
  .nav-list { display:none; }
  .nav-x    { display:none; }
  .nav-hamburger { display:flex; }
  /* タブレット幅: 各基準要素を維持しつつサイズ縮小 */
  .hd1 { width:106px; left:-20px; bottom:0; }
  .hd2 { width:96px;  right:-12px; top:12px; }
  .hd3 { width:84px;  left:-12px;  top:44px; }
}
@media(max-width:640px) {
  section { padding:52px 16px; }
  .hero   { padding:34px 16px 52px; }
  .hero-cta { flex-direction:column;align-items:center; }
  .hero-cta .btn { width:100%;max-width:300px;justify-content:center; }
  /* キャッチコピー: vwスケーリングで28文字を1行に収める（320px〜375pxで検証済み） */
  .hero-catch { font-size:clamp(0.62rem,2.8vw,0.96rem); padding:7px 14px; letter-spacing:.03em; }
  /* モバイル: 全キャラ表示。サイズ縮小＋端配置でテキスト可読性を確保 */
  .hd1 { width:74px; left:-8px; bottom:0; }
  .hd2 { width:60px; right:-22px; top:6px; }
  .hd3 { width:56px; left:-20px; top:50px; }
  .cbox,.register-box,.contact-box { padding:22px 16px; }
  .about-teaser-card { padding:22px 16px; }
  .footer-top { flex-direction:column;gap:28px; }
  .staff-grid { grid-template-columns:repeat(2,1fr); }
  .stats-row  { grid-template-columns:repeat(2,1fr); }
  .history-head { flex-direction:column;align-items:flex-start; }
  .program-card { padding:28px 16px; }
  .map-card,.access-card { padding:22px 16px; }
  .page-nav-grid { grid-template-columns:1fr; }
  .btn-lg { font-size:.92rem; padding:12px 22px; }
  .register-box .btn, .contact-box .btn { width:100%; max-width:100%; justify-content:center; }
  /* モバイルで最低2列を確保 */
  .info-cards-grid { grid-template-columns:repeat(2,1fr); }
  .nav-cards        { grid-template-columns:repeat(2,1fr); }
  /* 奇数枚最終カード: 2列グリッドで孤立しないよう全幅に */
  .info-cards-grid > .info-card:last-child:nth-child(odd) { grid-column:span 2; }
}

/* ================================================================
   API STATUS WIDGET — 参加登録ページ
   ================================================================ */
.status-widget { text-align:center; }
.status-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 16px; border-radius:var(--r-full);
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  margin-bottom:14px;
}
.status-badge.open   { background:rgba(21,214,152,.16); border:1px solid rgba(21,214,152,.46); color:#007A40; }
.status-badge.closed { background:rgba(217,26,77,.10);  border:1px solid rgba(217,26,77,.36);  color:var(--ruby); }
.status-badge.loading{ background:rgba(96,160,232,.12); border:1px solid rgba(96,160,232,.30); color:var(--sky-deep); }
.status-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.status-badge.open   .status-dot { background:#15D698; box-shadow:0 0 6px #15D698; }
.status-badge.closed .status-dot { background:var(--ruby); }
.status-badge.loading .status-dot { background:var(--sky); animation:sdot 1s ease-in-out infinite; }
@keyframes sdot { 0%,100%{opacity:1} 50%{opacity:.25} }

.status-remaining { font-size:.86rem; color:var(--text-sub); margin-bottom:18px; }
.status-remaining strong { color:var(--text); font-weight:700; }
.status-err {
  font-size:.82rem; color:var(--ruby);
  background:rgba(217,26,77,.07); border:1px solid rgba(217,26,77,.22);
  border-radius:var(--r); padding:9px 14px; margin-bottom:14px;
}

.btn:disabled, .btn[disabled] {
  opacity:.50; cursor:not-allowed;
  transform:none !important; box-shadow:none !important;
  pointer-events:none;
}
.btn-spinner {
  width:15px; height:15px; flex-shrink:0;
  border:2px solid rgba(0,0,0,.20); border-top-color:rgba(0,0,0,.65);
  border-radius:50%; animation:spin .7s linear infinite;
  display:inline-block;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ================================================================
   PARTICIPANTS LIST — 参加者一覧
   ================================================================ */
.participants-meta { color:var(--text-muted); font-size:.88rem; text-shadow:0 1px 6px rgba(0,0,0,.55); margin-bottom:14px; }
.participants-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:10px; margin-top:8px;
}
.participant-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r-lg); padding:14px 16px;
  box-shadow:var(--shadow-s); backdrop-filter:blur(12px); color:var(--text);
  display:flex; flex-direction:column; gap:3px;
}
.participant-card.dragon {
  border-color:rgba(255,202,40,.64);
  background:rgba(255,248,215,.95);
}
.p-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:2px; }
.p-name { font-weight:700; font-size:.95rem; flex:1; min-width:0; word-break:break-word; }
.participant-card.dragon .p-name { color:var(--gold-deep); }
.p-xid  { font-size:.78rem; color:var(--text-sub); }
.p-char { font-size:.78rem; color:var(--text-sub); margin-top:1px; }
.p-cat  {
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  padding:2px 8px; border-radius:var(--r-full); flex-shrink:0;
  white-space:nowrap; align-self:flex-start;
  background:rgba(96,160,232,.14); border:1px solid rgba(96,160,232,.34); color:var(--sky-deep);
}
.participant-card.dragon .p-cat {
  background:rgba(255,179,0,.16); border-color:rgba(255,202,40,.52); color:var(--gold-deep);
}
.p-cat.cat-kigurumi {
  background:rgba(110,80,220,.15); border-color:rgba(110,80,220,.38); color:#5530B8;
}
.p-cat.cat-general {
  background:rgba(80,108,88,.11);  border-color:rgba(80,108,88,.26);  color:#3E5E4A;
}
.participants-msg { text-align:center; padding:36px 20px; color:var(--text-sub); grid-column:1/-1; }

/* ================================================================
   CHARACTERS LIST — キャラクター一覧
   ================================================================ */
.characters-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px; margin-top:8px;
}
.char-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r-lg); padding:14px 16px;
  box-shadow:var(--shadow-s); backdrop-filter:blur(12px);
  display:flex; align-items:flex-start; gap:12px;
  transition:transform .22s var(--ease), box-shadow .22s;
}
.char-card:hover { transform:translateY(-3px); box-shadow:var(--glass-shadow), var(--gold-glow); }
.char-card.dragon {
  border-color:rgba(255,202,40,.64);
  background:rgba(255,248,215,.95);
}
.char-card-icon {
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  background:rgba(96,160,232,.14); border:1px solid rgba(96,160,232,.34);
  display:flex; align-items:center; justify-content:center;
  color:var(--sky-deep);
}
.char-card.dragon .char-card-icon {
  background:rgba(255,179,0,.16); border-color:rgba(255,202,40,.52); color:var(--gold-dark);
}
.char-card-body { flex:1; min-width:0; }
.char-name {
  font-family:var(--font-heading); font-weight:700; font-size:1.0rem;
  color:var(--text); word-break:break-word; margin-bottom:3px;
}
.char-card.dragon .char-name { color:var(--gold-deep); }

/* ================================================================
   UPLOAD FORM — 画像アップロード
   ================================================================ */
.upload-box {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r-xl); padding:44px 36px; text-align:center;
  box-shadow:var(--glass-shadow); backdrop-filter:blur(14px); color:var(--text);
  margin-bottom:22px;
}
.upload-box h2 { font-family:var(--font-heading); color:var(--sky-deep); margin-bottom:10px; font-size:1.4rem; }
.upload-type-badge {
  display:inline-block; padding:4px 14px; border-radius:var(--r-full);
  font-size:.76rem; font-weight:700; letter-spacing:.08em; margin-bottom:20px;
  background:rgba(21,214,152,.14); border:1px solid rgba(21,214,152,.42); color:#007A40;
}
.upload-type-badge.illust {
  background:rgba(96,64,176,.12); border-color:rgba(144,100,220,.38); color:#6040B0;
}
.upload-dropzone {
  border:2px dashed rgba(255,202,40,.46); border-radius:var(--r-lg);
  padding:38px 20px; cursor:pointer; position:relative;
  transition:border-color .2s, background .2s;
}
.upload-dropzone:hover, .upload-dropzone.dragover {
  border-color:var(--gold); background:rgba(255,179,0,.05);
}
.upload-dropzone input[type="file"] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.upload-drop-icon { font-size:2.2rem; margin-bottom:8px; pointer-events:none; }
.upload-drop-text { color:var(--text-sub); font-size:.90rem; pointer-events:none; }
.upload-drop-hint { font-size:.76rem; color:var(--text-sub); margin-top:5px; opacity:.72; pointer-events:none; }
.upload-filename  { margin-top:10px; font-size:.84rem; font-weight:700; color:var(--sky-deep); word-break:break-all; }
.upload-note {
  margin-top:20px; text-align:left;
  font-size:.82rem; color:var(--text-sub);
  background:rgba(255,202,40,.07); border:1px solid rgba(255,202,40,.24);
  border-radius:var(--r); padding:12px 16px; line-height:1.8;
}
.upload-status {
  margin-top:16px; padding:12px 16px; border-radius:var(--r);
  font-size:.88rem; font-weight:600; display:none;
}
.upload-status.ok  { display:block; background:rgba(21,214,152,.12); border:1px solid rgba(21,214,152,.40); color:#007A40; }
.upload-status.err { display:block; background:rgba(217,26,77,.08);  border:1px solid rgba(217,26,77,.26);  color:var(--ruby); }
.upload-preview-img {
  display:none; max-width:100%; max-height:260px; margin:14px auto 0;
  border-radius:var(--r); border:2px solid rgba(255,202,40,.46);
  object-fit:contain; pointer-events:none;
}
.upload-used-preview {
  margin-top:20px; text-align:center;
}
.upload-used-label {
  font-size:.80rem; font-weight:700; color:var(--text-sub);
  letter-spacing:.06em; margin-bottom:10px;
}
.upload-used-img {
  display:block; max-width:100%; max-height:300px; margin:0 auto;
  border-radius:var(--r-lg); border:2px solid rgba(21,214,152,.40);
  object-fit:contain;
}

/* ================================================================
   CANCEL PAGE — キャンセル確認
   ================================================================ */
.cancel-warn {
  display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:28px 20px;
  background:rgba(217,26,77,.06);
  border:1px solid rgba(217,26,77,.24);
  border-radius:var(--r-lg);
  margin:20px 0 0;
}
.cancel-warn-icon { font-size:2.4rem; line-height:1; }
.cancel-warn-text {
  font-family:var(--font-heading); font-size:1.15rem;
  color:var(--ruby); font-weight:700; margin:0;
}

@media(max-width:600px) {
  .upload-box { padding:28px 18px; }
  .participants-grid { grid-template-columns:1fr; }
}

/* ================================================================
   EXHIBITION — トップページ展示企画セクション専用
   ================================================================ */

/* 2カラムカード */
.exhibition-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  align-items:center;
  background:var(--glass);
  border:1.5px solid rgba(255,202,40,0.60);
  border-radius:var(--r-xl);
  padding:52px 48px;
  box-shadow:var(--glass-shadow),0 0 60px rgba(255,179,0,0.18);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  position:relative; overflow:hidden;
  color:var(--text);
  transition:box-shadow .30s var(--ease),border-color .30s;
}
/* レインボーボーダー（上） */
.exhibition-inner::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--ruby), var(--gold), var(--emerald), var(--sky));
}
/* 左下グロー装飾 */
.exhibition-inner::after {
  content:''; position:absolute;
  bottom:-80px; left:-80px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,179,0,0.10) 0%,transparent 70%);
  pointer-events:none;
}
.exhibition-inner:hover {
  box-shadow:var(--glass-shadow),var(--gold-glow),0 0 80px rgba(255,179,0,0.22);
  border-color:var(--gold);
}

/* テキスト列 */
.exhibition-body { display:flex; flex-direction:column; }

/* キャッチコピー */
.exhibition-catch {
  font-family:var(--font-heading);
  font-size:clamp(1.56rem,3.0vw,2.30rem);
  font-weight:700;
  background:linear-gradient(135deg,#CC8800 0%,#FFB300 38%,#FFCA28 65%,#FFB300 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(255,179,0,0.32));
  line-height:1.26; margin-bottom:16px; letter-spacing:.02em;
  animation:titleGradShift 7s linear infinite;
}

.exhibition-title {
  font-family:var(--font-heading);
  font-size:clamp(.88rem,1.7vw,1.04rem);
  color:var(--text-sub);
  margin-bottom:14px; letter-spacing:.02em; font-weight:500;
}

.exhibition-lead {
  font-size:.96rem; font-weight:500;
  color:var(--text); line-height:1.88; margin-bottom:24px;
}

/* フィーチャーリスト */
.exhibition-features {
  list-style:none; padding:0; margin:0 0 28px;
  display:flex; flex-direction:column; gap:10px;
}
.exhibition-features li {
  display:flex; align-items:center; gap:12px;
}
.ef-icon {
  flex-shrink:0; width:36px; height:36px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
}
.ef-icon-gold    { background:rgba(255,179,0,.16);  border:1px solid rgba(255,202,40,.42); color:var(--gold-dark); }
.ef-icon-sky     { background:rgba(96,160,232,.14); border:1px solid rgba(96,160,232,.38); color:var(--sky-deep); }
.ef-icon-emerald { background:rgba(21,214,152,.14); border:1px solid rgba(21,214,152,.38); color:#009960; }
.exhibition-features li > div { display:flex; flex-direction:column; gap:1px; }
.exhibition-features strong { font-size:.92rem; color:var(--text); line-height:1.5; }
.exhibition-features span   { font-size:.80rem; color:var(--text-sub); line-height:1.5; }

/* CTAボタン群 */
.exhibition-btns { display:flex; gap:12px; flex-wrap:wrap; }

/* 詳細ボタン — ゴールドアウトライン／ホバーで塗りつぶし */
.btn-gold-detail {
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 32px;
  font-family:var(--font-body); font-size:.96rem; font-weight:700;
  border-radius:var(--r-full); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  background:rgba(255,179,0,0.14);
  color:var(--gold-dark);
  border:2px solid var(--gold);
  transition:all .26s var(--ease);
}
.btn-gold-detail:hover {
  background:var(--gold);
  color:#1A0C00;
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(255,179,0,.52);
}

/* ビジュアル列 */
.exhibition-visual {
  display:flex; flex-direction:column; align-items:center;
}

/* フォトスタック */
.exhibition-photo-stack {
  display:flex; flex-direction:column; align-items:center;
  width:100%; padding:0 8px;
}
.ep-frame {
  width:84%; border-radius:var(--r-lg); overflow:hidden;
  border:2px solid rgba(255,202,40,.50);
  box-shadow:var(--shadow-m),0 0 22px rgba(255,179,0,.18);
  position:relative;
  transition:transform .30s var(--ease),box-shadow .30s;
}
.ep-frame img { width:100%; height:auto; display:block; }
.ep-frame-1 { align-self:flex-end;  transform:rotate(2.2deg);  margin-bottom:-26px; z-index:3; }
.ep-frame-2 { align-self:flex-start; transform:rotate(-2.8deg); margin-bottom:-20px; z-index:2; }
.ep-frame-3 { align-self:flex-end;  transform:rotate(1.6deg);  z-index:1; }
.ep-frame:hover {
  transform:rotate(0deg) scale(1.03) translateY(-5px);
  box-shadow:var(--shadow-l),var(--gold-glow);
  z-index:10; position:relative;
}

/* タグ */
.exhibition-tags {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-top:22px;
}

/* =========== レスポンシブ =========== */
@media(max-width:860px) {
  .exhibition-inner {
    grid-template-columns:1fr;
    gap:32px;
    padding:36px 28px;
  }
  /* モバイル: ビジュアルを先に表示 */
  .exhibition-visual { order:-1; }
  /* 横並びスタック */
  .exhibition-photo-stack { flex-direction:row; align-items:flex-end; gap:10px; padding:0; }
  .ep-frame { width:31%; margin-bottom:0 !important; }
  .ep-frame-1 { transform:rotate(2deg); }
  .ep-frame-2 { transform:rotate(0deg); margin-bottom:14px !important; }
  .ep-frame-3 { transform:rotate(-2deg); }
  .exhibition-btns { justify-content:center; }
  .exhibition-catch,
  .exhibition-title,
  .exhibition-lead { text-align:center; }
  .exhibition-features { align-items:flex-start; max-width:380px; margin:0 auto 28px; }
}

@media(max-width:640px) {
  .exhibition-inner { padding:28px 18px; gap:24px; }
  .ep-frame { width:29%; }
  .exhibition-btns { flex-direction:column; align-items:center; }
  .exhibition-btns .btn,
  .exhibition-btns .btn-gold-detail { width:100%; max-width:300px; justify-content:center; }
}

/* ================================================================
   FLUFFY FANTASY — ファードラ世界観・質感統一ルール
   やわらかい形状 / ふわっとした空気感 / やさしい動き
   ================================================================ */

/* ─── ① 全体の形状・影をソフト化（CSS変数上書き） ─── */
:root {
  --r:      14px;
  --r-sm:    8px;
  --r-lg:   22px;
  --r-xl:   34px;
  --shadow-s:    0  6px 28px rgba(26,54,115,0.11);
  --shadow-m:    0 10px 48px rgba(26,54,115,0.15);
  --shadow-l:    0 18px 72px rgba(26,54,115,0.19);
  --glass-shadow:0 12px 56px rgba(26,54,115,0.13);
}

/* ─── ② body 背景: タイリングなし・ふわっとしたグロー ─── */
body::after {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,220,100,0.055) 0%,transparent 55%),
    radial-gradient(ellipse at 72% 62%, rgba(180,140,230,0.045) 0%,transparent 50%),
    radial-gradient(ellipse at 18% 80%, rgba(100,210,200,0.035) 0%,transparent 45%);
  background-size:100% 100%;
  background-position:0 0;
}


/* ─── ④ .cbox — ふんわりホバー・ソフトコーナーグロー ─── */
.cbox {
  position:relative; overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s;
  /* 右上に楕円グロー: 鱗の尖りなし・ふわっとした光 */
  background-image:
    radial-gradient(ellipse at 96% 4%, rgba(255,202,40,0.09) 0%,transparent 48%);
}
.cbox:hover {
  transform:translateY(-3px);
  box-shadow:var(--glass-shadow),0 0 38px rgba(255,179,0,0.14);
}

/* ─── ⑤ .cbox-title 左アクセントバー: ソフト版 ─── */
/* 幅広め・角丸大・下に向けて色が溶けるグラデーション */
.cbox-title { display:flex; align-items:flex-start; gap:10px; }
.cbox-title::before {
  content:''; flex-shrink:0; display:block;
  width:4px; height:1.1em;
  background:linear-gradient(to bottom,var(--gold),rgba(255,179,0,0.30));
  border-radius:4px; margin-top:.16em;
}
.cbox:nth-child(2) .cbox-title::before { background:linear-gradient(to bottom,var(--sky),rgba(96,160,232,0.30)); }
.cbox:nth-child(3) .cbox-title::before { background:linear-gradient(to bottom,var(--emerald),rgba(21,214,152,0.30)); }
.cbox:nth-child(4) .cbox-title::before { background:linear-gradient(to bottom,var(--ruby),rgba(217,26,77,0.30)); }
.cbox:nth-child(5) .cbox-title::before { background:linear-gradient(to bottom,#8860E0,rgba(136,96,224,0.30)); }

/* ─── ⑥ sec-head 虹ラインシマー（ゆっくりめ） ─── */
.sec-head::before {
  background:linear-gradient(90deg,var(--ruby),var(--gold),var(--emerald),var(--sky),var(--gold),var(--ruby));
  background-size:200% auto;
  animation:rainbowFlow 9s linear infinite;
}
.sec-head::after {
  background:linear-gradient(90deg,var(--sky),var(--gold),var(--ruby),var(--emerald),var(--gold),var(--sky));
  background-size:200% auto;
  animation:rainbowFlow 9s linear infinite reverse;
}
@keyframes rainbowFlow {
  0%   { background-position:0%   center; }
  100% { background-position:200% center; }
}

/* ─── ⑦ page-hero グラデーション（全サブページ共通） ─── */
.page-hero::before {
  background:
    radial-gradient(ellipse at center,   rgba(255,179,0,.22) 0%,transparent 60%),
    radial-gradient(circle at 14% 36%, rgba(21,214,152,.13) 0%,transparent 34%),
    radial-gradient(circle at 86% 36%, rgba(217,26,77,.10) 0%,transparent 30%);
}

/* ─── ⑧ ボタン: ふんわり浮き（translateYのみ・blurなし） ─── */
.btn-primary:hover    { transform:translateY(-3px); }
.btn-secondary:hover  { transform:translateY(-2px); }
.btn-gold-detail:hover { transform:translateY(-3px); }

/* ─── ⑨ info-card: やさしいリフト（translateYのみ） ─── */
.info-card:hover               { transform:translateY(-6px); }
.info-card:hover .info-card-icon { transform:scale(1.10); }

/* ─── ⑩ glass-card: ふんわり浮き ─── */
.glass-card:hover { transform:translateY(-5px); }

/* ================================================================
   FUR DRAGON — もふもふドラゴンモチーフ追加
   「ちゃんと分かるが自然」なラインで2要素に限定
   ================================================================ */

/* ─── A. page-hero ボトムライン → 双角シルエット ─── */
/* サブページ全ページのヒーロー下部レインボーストライプを
   ドラゴンの双角（耳/角）シルエットに変形する。
   clip-pathで2本の三角形を組み込み、「デザインの一部」として溶け込ませる */
.page-hero::after {
  height:14px;
  clip-path:polygon(
    0%     100%,
    100%   100%,
    100%   57%,
    71.5%  57%, 70% 0%, 68.5% 57%,
    31.5%  57%, 30% 0%, 28.5% 57%,
    0%     57%
  );
}

/* ─── B. sec-head 見出し下: ふわっとしたゴールドグロー ─── */
/* 毛並みの温かさを「光のにじみ」で表現する（ファー表現・限定1箇所）
   フィルタブラーで境界を溶かし、もこっとした柔らかさを演出 */
.sec-head h2::after {
  content:''; display:block;
  width:70px; height:10px;
  margin:3px auto 0;
  background:radial-gradient(ellipse at center, rgba(255,179,0,0.52) 0%,transparent 65%);
  filter:blur(4px);
  border-radius:50%;
}

/* ─── C. sec-head 装飾ライン: 微ぼかしで発光感 ─── */
.sec-head::before,
.sec-head::after { filter:blur(0.6px); }

/* ─── D. sec-head グロー — もふもふ束感を強化 ─── */
/* 3点の楕円グラデーションを重ねて"毛の束"のような塊に */
.sec-head h2::after {
  width:90px; height:14px;
  background:
    radial-gradient(ellipse at 36% 50%, rgba(255,179,0,0.52) 0%,transparent 50%),
    radial-gradient(ellipse at 64% 50%, rgba(255,202,40,0.42) 0%,transparent 46%),
    radial-gradient(ellipse at 50% 24%, rgba(255,220,80,0.34) 0%,transparent 40%);
  filter:blur(5px);
}