/*
Theme Name: Dynamite Summer Fes 2026
Theme URI:
Author:
Description: 函館ダイナマイトサマーフェス2026 公式サイトテーマ
Version: 1.1.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: dynamite
*/

  :root{
    --bg:#07090d;
    --bg2:#0c0f15;
    --ink:#f4f4f4;
    --ink-dim:#b9b9b9;
    --pink:#ff2b7a;
    --magenta:#e6128a;
    --cyan:#1ec3c7;
    --teal:#14a3a8;
    --yellow:#ffe21f;
    --lime:#7dd13d;
    --orange:#ff8a1f;
    --blue:#1f6cff;
    --paper:#f3efe3;
    --paper2:#ece6d3;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font:inherit;border:0;cursor:pointer}

  /* ---------- placeholder system ---------- */
  .ph{
    --c1:#1a1d24; --c2:#22262f;
    background:repeating-linear-gradient(135deg, var(--c1) 0 8px, var(--c2) 8px 16px);
    position:relative;
    color:#cfd3dc;
    font-family:"JetBrains Mono",monospace;
    font-size:11px;
    letter-spacing:.05em;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    overflow:hidden;
  }
  .ph.paper{ --c1:#e6dfc8; --c2:#d9d1b6; color:#5a513a }
  .ph.cyan{ --c1:#0c2a31; --c2:#10363f; color:#9be6ec }
  .ph.pink{ --c1:#33060f; --c2:#400916; color:#ffb1cc }
  .ph::after{ content:attr(data-label); padding:6px 10px; background:rgba(0,0,0,.35); border:1px dashed rgba(255,255,255,.25); border-radius:2px }
  .ph.paper::after{ background:rgba(255,255,255,.4); border-color:rgba(0,0,0,.18) }

  /* ---------- frame ---------- */
  .page{
    position:relative;
    max-width:1200px;
    margin:0 auto;
    background:var(--bg);
    overflow:hidden;
  }
  .leaf{
    position:absolute; top:0; bottom:0; width:120px;
    background:
      radial-gradient(ellipse 80px 240px at 30% 12%, #0aa5a0 0%, transparent 60%),
      radial-gradient(ellipse 90px 260px at 70% 32%, #0d6e7a 0%, transparent 60%),
      radial-gradient(ellipse 70px 200px at 20% 55%, #ff2b7a 0%, transparent 55%),
      radial-gradient(ellipse 90px 220px at 80% 78%, #1f6cff 0%, transparent 55%),
      radial-gradient(circle at 40% 90%, #ffe21f 0%, transparent 30%);
    filter:blur(.4px) saturate(1.1);
    opacity:.55;
    pointer-events:none;
    z-index:0;
  }
  .leaf.left{ left:0 }
  .leaf.right{ right:0 }

  /* ---------- header ---------- */
  header.top{
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; gap:16px;
    padding:10px 20px;
    background:rgba(7,9,13,.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:box-shadow .3s;
  }
  header.top.scrolled{ box-shadow:0 2px 20px rgba(0,0,0,.6) }
  .header-logo{
    flex:0 0 auto;
    display:flex; align-items:center; gap:10px;
  }
  .header-logo img{
    height:44px; width:auto;
  }
  .logo-text{
    font-family:"Bowlby One",sans-serif; line-height:1; color:#fff;
    display:flex; flex-direction:column;
  }
  .logo-text .jp{
    background:linear-gradient(180deg,#ffe21f,#ff8a1f 60%,#ff2b7a);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-size:15px; letter-spacing:.02em;
  }
  .logo-text .num{
    background:linear-gradient(180deg,#1ec3c7,#1f6cff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-size:13px;
  }
  .logo-text .en{
    font-family:"Bebas Neue",sans-serif; font-weight:400; font-size:8px;
    color:#cfd3dc; letter-spacing:.18em; margin-top:1px;
  }
  nav.main{
    display:flex; gap:16px; margin-left:6px; flex:1 1 auto;
    font-family:"Bebas Neue",sans-serif; font-size:13px; letter-spacing:.14em;
    white-space:nowrap;
  }
  nav.main a{ color:#fff; padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .2s }
  nav.main a:hover{ border-color:var(--pink) }
  .top-cta{
    margin-left:auto; display:flex; gap:10px; align-items:center;
  }
  .ticket-btn{
    background:var(--pink); color:#fff;
    font-family:"Bebas Neue",sans-serif; font-size:16px; letter-spacing:.16em;
    padding:10px 22px; border-radius:2px; transition:background .2s;
  }
  .ticket-btn:hover{ background:var(--magenta) }
  .menu-btn{
    width:40px; height:40px; background:#fff; color:#000;
    display:grid; place-items:center; border-radius:2px;
    transition:background .2s;
  }
  .menu-btn:hover{ background:#e0e0e0 }
  .menu-btn span{ display:block; width:18px; height:2px; background:#000; box-shadow:0 -6px 0 #000, 0 6px 0 #000; transition:.2s }
  .menu-btn.open span{ box-shadow:none; background:transparent }
  .menu-btn.open span::before,
  .menu-btn.open span::after{
    content:""; display:block; width:18px; height:2px; background:#000;
    position:absolute; transition:.2s;
  }
  .menu-btn.open span::before{ transform:rotate(45deg) }
  .menu-btn.open span::after{ transform:rotate(-45deg) }

  .mobile-menu{
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(7,9,13,.97);
    flex-direction:column; align-items:center; justify-content:center; gap:32px;
    font-family:"Bebas Neue",sans-serif; font-size:32px; letter-spacing:.14em;
  }
  .mobile-menu.open{ display:flex }
  .mobile-menu a{ color:#fff; border-bottom:2px solid transparent; padding:4px 8px; transition:border-color .2s }
  .mobile-menu a:hover{ border-color:var(--pink) }
  .mobile-menu-close{
    position:absolute; top:20px; right:20px;
    width:44px; height:44px; background:#fff; color:#000;
    display:grid; place-items:center; border-radius:2px;
    font-size:20px; cursor:pointer; border:0;
  }

  /* ---------- hero ---------- */
  .hero{ position:relative; z-index:1; padding:0; isolation:isolate; }
  .hero-stage{ position:relative; overflow:hidden; background:#000; line-height:0; }
  .hero-top-img{ width:100%; height:auto; display:block; }
  .hero-img{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 600px 260px at 50% 28%, rgba(255,180,80,.55), transparent 60%),
      radial-gradient(ellipse 380px 200px at 22% 36%, rgba(255,90,140,.45), transparent 65%),
      radial-gradient(ellipse 380px 200px at 78% 36%, rgba(120,180,255,.45), transparent 65%),
      linear-gradient(180deg, #2a1a35 0%, #1a1430 22%, #0c0d1a 55%, #050507 100%);
  }
  .beams{
    position:absolute; inset:0; pointer-events:none;
    background:conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(255,210,120,.18) 8deg, transparent 14deg, rgba(255,90,160,.18) 22deg, transparent 28deg, rgba(120,200,255,.18) 38deg, transparent 44deg, rgba(255,210,120,.16) 54deg, transparent 62deg);
    mix-blend-mode:screen; opacity:.85;
    mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 85%);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 85%);
  }
  .confetti{
    position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(circle 2px at 12% 22%, #ffe21f 99%, transparent 100%),radial-gradient(circle 2px at 28% 14%, #ff2b7a 99%, transparent 100%),radial-gradient(circle 2px at 44% 8%, #1ec3c7 99%, transparent 100%),radial-gradient(circle 2px at 62% 18%, #7dd13d 99%, transparent 100%),radial-gradient(circle 2px at 78% 12%, #ffe21f 99%, transparent 100%),radial-gradient(circle 2px at 88% 26%, #ff2b7a 99%, transparent 100%),radial-gradient(circle 2px at 18% 42%, #1ec3c7 99%, transparent 100%),radial-gradient(circle 2px at 36% 36%, #ffe21f 99%, transparent 100%),radial-gradient(circle 2px at 56% 30%, #ff2b7a 99%, transparent 100%),radial-gradient(circle 2px at 72% 38%, #7dd13d 99%, transparent 100%),radial-gradient(circle 2px at 92% 44%, #ffe21f 99%, transparent 100%);
    opacity:.85;
  }
  .crowd{
    position:absolute; left:0; right:0; bottom:0; height:62%;
    background:radial-gradient(ellipse 4px 22px at 12% 52%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 26px at 18% 48%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 20px at 26% 54%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 28px at 34% 46%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 22px at 42% 52%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 30px at 50% 44%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 24px at 58% 50%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 26px at 66% 48%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 22px at 74% 52%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 28px at 82% 46%, #000 0 60%, transparent 70%),radial-gradient(ellipse 4px 20px at 90% 54%, #000 0 60%, transparent 70%),radial-gradient(circle 14px at 10% 62%, #000 0 60%, transparent 70%),radial-gradient(circle 16px at 22% 60%, #050608 0 60%, transparent 70%),radial-gradient(circle 14px at 32% 64%, #000 0 60%, transparent 70%),radial-gradient(circle 18px at 44% 58%, #060708 0 60%, transparent 70%),radial-gradient(circle 14px at 56% 62%, #000 0 60%, transparent 70%),radial-gradient(circle 16px at 68% 60%, #050608 0 60%, transparent 70%),radial-gradient(circle 14px at 80% 64%, #000 0 60%, transparent 70%),radial-gradient(circle 16px at 92% 60%, #050608 0 60%, transparent 70%),radial-gradient(ellipse 200px 80px at 10% 82%, #000 0 50%, transparent 70%),radial-gradient(ellipse 220px 90px at 30% 88%, #050608 0 50%, transparent 70%),radial-gradient(ellipse 240px 100px at 50% 84%, #000 0 50%, transparent 70%),radial-gradient(ellipse 220px 90px at 70% 88%, #060708 0 50%, transparent 70%),radial-gradient(ellipse 200px 80px at 90% 82%, #000 0 50%, transparent 70%),linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 50%, #000 75%);
  }
  .lights{
    position:absolute; left:0; right:0; top:0; height:65%;
    background:radial-gradient(circle 130px at 18% 18%, rgba(255,220,150,.85), transparent 70%),radial-gradient(circle 110px at 82% 14%, rgba(150,200,255,.75), transparent 70%),radial-gradient(circle 80px at 50% 6%, rgba(255,180,200,.7), transparent 70%),radial-gradient(circle 60px at 32% 24%, rgba(255,210,120,.6), transparent 70%),radial-gradient(circle 60px at 68% 24%, rgba(180,220,255,.6), transparent 70%);
    filter:blur(3px); mix-blend-mode:screen;
  }
  .hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.65) 100%); }
  .splash{ position:absolute; pointer-events:none; z-index:2; width:160px; height:160px; border-radius:50%; filter:blur(.3px); }
  .splash svg{ width:100%; height:100% }

  /* ---------- generic section ---------- */
  section{ position:relative; z-index:2; padding:50px 60px }
  .section-head{ display:flex; align-items:center; gap:24px; margin-bottom:24px; }
  .section-title{ font-family:"Permanent Marker","Caveat Brush",cursive; font-weight:400; font-size:62px; line-height:.9; letter-spacing:.02em; padding:6px 14px 6px 38px; position:relative; transform:skewX(-8deg); text-shadow:0 2px 0 rgba(0,0,0,.35); }
  .section-title::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:46px; height:46px; background:radial-gradient(circle 12px at 50% 50%, currentColor 0 60%, transparent 70%),radial-gradient(circle 4px at 18% 28%, currentColor 0 70%, transparent 80%),radial-gradient(circle 3px at 86% 22%, currentColor 0 70%, transparent 80%),radial-gradient(circle 5px at 14% 78%, currentColor 0 70%, transparent 80%),radial-gradient(circle 3px at 84% 76%, currentColor 0 70%, transparent 80%),radial-gradient(circle 2px at 6% 50%, currentColor 0 70%, transparent 80%),radial-gradient(circle 2px at 94% 50%, currentColor 0 70%, transparent 80%); }
  .section-title.pink{ color:var(--pink) }
  .section-title.cyan,.section-title.teal{ color:#1ec3c7 }
  .section-title.yellow{ color:var(--yellow) }
  .section-title.lime{ color:var(--lime) }
  .section-title.white{ color:#fff }
  .more{ font-family:"Noto Sans JP",sans-serif; font-size:13px; color:#fff; border:1px solid #fff; padding:8px 22px; border-radius:0; letter-spacing:.05em; white-space:nowrap; transition:background .2s, color .2s; }
  .more:hover{ background:#fff; color:#000 }

  /* ---------- NEWS ---------- */
  .news{ background:linear-gradient(180deg,#f5f0e0,#ece6d3); color:#222; margin:0 60px; padding:28px 36px; position:relative; z-index:3; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
  .news .section-head{ margin-bottom:14px }
  .news .section-title{ color:var(--pink); font-size:48px; padding-right:14px }
  .news .section-title::before{ background:radial-gradient(circle 10px at 50% 50%, currentColor 0 60%, transparent 70%),radial-gradient(circle 4px at 18% 28%, currentColor 0 70%, transparent 80%),radial-gradient(circle 3px at 86% 22%, currentColor 0 70%, transparent 80%),radial-gradient(circle 5px at 14% 78%, currentColor 0 70%, transparent 80%),radial-gradient(circle 3px at 84% 76%, currentColor 0 70%, transparent 80%); }
  .news .more{ color:#222; border-color:#222 }
  .news .more:hover{ background:#222; color:#fff }
  .news ul{ list-style:none; padding:0; margin:0; border-top:1px dashed #aaa }
  .news li{ display:grid; grid-template-columns:120px 1fr auto; gap:18px; align-items:center; padding:12px 4px; border-bottom:1px dashed #aaa; font-size:13px; }
  .news .date{ font-family:"JetBrains Mono",monospace; color:#555 }
  .news .ttl a{ color:#0b5fb0; text-decoration:underline; text-underline-offset:3px }
  .news .new{ background:var(--pink); color:#fff; font-family:"Bebas Neue",sans-serif; font-size:11px; padding:2px 8px; letter-spacing:.1em; border-radius:1px; }

  /* ---------- ARTIST ---------- */
  .artist{ padding-top:60px }
  .artist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .artist-card{ position:relative; aspect-ratio:1/1; overflow:hidden; cursor:pointer }
  .artist-card .ph{ position:absolute; inset:0 }
  .artist-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
  .artist-card .name{ position:absolute; left:8px; right:60px; bottom:8px; font-family:"Bebas Neue",sans-serif; font-size:16px; letter-spacing:.08em; color:#fff; text-shadow:1px 1px 0 #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .artist-card .day{ position:absolute; right:0; bottom:0; background:var(--pink); color:#fff; font-family:"Bebas Neue",sans-serif; font-size:14px; padding:6px 10px; line-height:1.05; text-align:center; min-width:46px; }
  .artist-card .day.sat{ background:var(--pink) }
  .artist-card .day.sun{ background:var(--cyan) }
  .artist-card .day.mon{ background:var(--yellow); color:#1a1300 }
  .artist-card .day .d{ display:block; font-size:18px }

  /* ---------- MC ---------- */
  .mc-block{ margin-top:32px; }
  .mc-label{ font-family:"Permanent Marker","Caveat Brush",cursive; font-size:28px; color:var(--cyan); margin-bottom:12px; letter-spacing:.06em; transform:skewX(-6deg); display:inline-block; }
  .mc-grid{ display:flex; gap:16px; justify-content:center; }
  .mc-grid .artist-card{ flex:0 0 calc((100% - 32px) / 3); }

  /* ---------- CAMPAIGN ---------- */
  .campaign-section{ padding:60px 0 }
  .campaign-inner{ display:flex; gap:48px; align-items:flex-start; max-width:1000px; margin:0 auto; padding:0 20px; }
  .campaign-img-wrap{ flex:0 0 300px; }
  .campaign-img{ width:100%; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.5); }
  .campaign-body{ flex:1; display:flex; flex-direction:column; gap:18px; }
  .campaign-label{ font-size:15px; font-weight:700; color:var(--pink); letter-spacing:.05em; line-height:1.6; }
  .campaign-desc{ font-size:15px; color:var(--ink-dim); line-height:2; }
  .campaign-steps{ display:flex; flex-direction:column; gap:10px; background:rgba(255,255,255,.04); border-radius:10px; padding:20px 24px; }
  .campaign-step{ font-size:14px; color:#fff; line-height:1.8; display:flex; gap:10px; align-items:flex-start; }
  .step-num{ flex:0 0 auto; background:var(--pink); color:#fff; font-family:"Bebas Neue",sans-serif; font-size:15px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
  .campaign-announce{ font-size:14px; color:var(--yellow); line-height:1.9; font-weight:700; border-left:3px solid var(--yellow); padding-left:14px; }

  /* ---------- TIME TABLE ---------- */
  .tt-tabs{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px }
  .tt-tab{ background:#fff; color:#222; padding:0; overflow:hidden }
  .tt-tab h3{ margin:0; font-family:"Bebas Neue",sans-serif; font-size:24px; text-align:center; padding:10px; letter-spacing:.06em; color:#fff; }
  .tt-tab.sat h3{ background:var(--pink) }
  .tt-tab.sun h3{ background:var(--cyan) }
  .tt-tab.mon h3{ background:var(--yellow); color:#1a1300 }
  .tt-tab table{ width:100%; border-collapse:collapse; font-size:11px; color:#222 }
  .tt-tab th{ font-family:"Bebas Neue",sans-serif; letter-spacing:.08em; font-size:11px; padding:8px 4px; border-bottom:1px solid #eee; color:#222; font-weight:400; }
  .tt-tab td{ padding:6px 4px; border-bottom:1px solid #f1f1f1; vertical-align:middle; text-align:center; }
  .tt-tab td.h{ font-family:"JetBrains Mono",monospace; color:#888; width:48px; text-align:left; padding-left:10px }
  .slot{ background:var(--pink); color:#fff; font-family:"Bebas Neue",sans-serif; letter-spacing:.05em; padding:6px 4px; font-size:11px; border-radius:1px; }
  .tt-tab.sun .slot{ background:var(--cyan) }
  .tt-tab.mon .slot{ background:var(--yellow); color:#1a1300 }
  .slot.dim{ background:#f4d6e2; color:#8a3457 }
  .tt-tab.sun .slot.dim{ background:#cbe9eb; color:#1f6f73 }
  .tt-tab.mon .slot.dim{ background:#fff5b8; color:#7a6500 }

  /* ---------- TICKET ---------- */
  .ticket-block{ margin-top:36px }
  .ticket-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .ticket-row{ background:#0e1218; border:1px solid #1c222d; padding:14px 18px; display:grid; grid-template-columns:1fr auto; align-items:center; }
  .ticket-row .ttl{ font-family:"Bebas Neue",sans-serif; font-size:22px; letter-spacing:.06em; }
  .ticket-row .sub{ font-size:11px; color:#8d96a5; margin-top:2px }
  .ticket-row .price{ font-family:"Bebas Neue",sans-serif; font-size:26px; letter-spacing:.04em }
  .ticket-row.t1 .ttl{ color:var(--cyan) }
  .ticket-row.t2 .ttl{ color:var(--pink) }
  .ticket-row.t3 .ttl{ color:var(--yellow) }
  .ticket-buy{ margin-top:6px; text-align:center; }
  .ticket-buy .lead{ font-family:"Caveat Brush",cursive; font-size:18px; color:#fff; letter-spacing:.04em; }
  .ticket-buy .btn{ display:block; background:var(--pink); color:#fff; font-family:"Bebas Neue",sans-serif; font-size:18px; letter-spacing:.1em; padding:14px; margin-top:8px; text-align:center; transition:background .2s; }
  .ticket-buy .btn:hover{ background:var(--magenta) }

  /* ---------- AREA MAP + FOOD ---------- */
  .am-row{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:10px }
  .map-frame{ aspect-ratio:16/9 }
  .food-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr; gap:6px; aspect-ratio:16/9; }
  .food-grid .ph{ width:100%; height:100% }
  .food-grid .more-tile{ grid-column:3; grid-row:2; background:#000; color:#fff; font-family:"Caveat Brush",cursive; font-size:28px; display:flex; align-items:center; justify-content:center; }
  .area-images{ margin-top:28px }
  .area-images-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
  .area-image-wrap{ border:1px solid #1c222d; border-radius:4px; overflow:hidden; }
  .area-image-label{ font-family:"Bebas Neue",sans-serif; font-size:17px; letter-spacing:.12em; padding:10px 16px; color:#fff; background:#0e1218; border-bottom:2px solid var(--teal); display:flex; align-items:center; gap:10px; }
  .area-image-label .badge{ font-size:11px; font-family:"Noto Sans JP",sans-serif; letter-spacing:.04em; background:rgba(30,195,199,.15); color:var(--cyan); border:1px solid rgba(30,195,199,.35); padding:2px 8px; border-radius:2px; }
  .area-image-label .badge.paid{ background:rgba(255,43,122,.12); color:var(--pink); border-color:rgba(255,43,122,.3); }
  .area-image-wrap img{ width:100%; display:block }

  /* ---------- 出演者募集 ---------- */
  .recruit-section{ background:linear-gradient(160deg,#07091a 0%,#0b0f22 55%,#070d1e 100%); }
  .recruit-head{ display:flex; align-items:center; gap:14px; margin:0 0 20px; }
  .recruit-head .jp{ font-family:"Noto Sans JP"; font-size:18px; font-weight:700; color:#ff5b9a; text-shadow:0 0 16px rgba(255,91,154,.55) }
  .recruit-head .sub{ font-family:"Caveat Brush",cursive; font-size:22px; color:rgba(255,255,255,.65) }
  .recruit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .recruit-card{ border-radius:14px; padding:18px 16px 16px; display:flex; flex-direction:column; color:#fff; background:rgba(255,255,255,.04); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.09); box-shadow:0 4px 24px rgba(0,0,0,.4); position:relative; overflow:hidden; min-height:170px; transition:border-color .25s,box-shadow .25s; }
  .recruit-card.neon-red{ --cn:#d41e1e; --cnr:212,30,30 }
  .recruit-card.neon-orange{ --cn:#fd7900; --cnr:253,121,0 }
  .recruit-card.neon-green{ --cn:#009a02; --cnr:0,154,2 }
  .recruit-card.neon-blue{ --cn:#0d00ff; --cnr:13,0,255 }
  .recruit-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--cn); box-shadow:0 0 10px var(--cn),0 0 22px rgba(var(--cnr),.45); border-radius:14px 14px 0 0; }
  .recruit-card:hover{ border-color:rgba(var(--cnr),.3); box-shadow:0 4px 32px rgba(0,0,0,.4),0 0 28px rgba(var(--cnr),.14); }
  .recruit-card .icon{ width:32px; height:32px; color:var(--cn); filter:drop-shadow(0 0 5px var(--cn)); margin-bottom:10px; flex-shrink:0; }
  .recruit-card .icon svg{ width:100%; height:100% }
  .cs{ opacity:.4; cursor:default; pointer-events:none }
  .dance-body{ display:flex; flex-direction:column; flex:1; }
  .dance-title{ font-size:14px; font-weight:800; letter-spacing:.04em; line-height:1.3 }
  .dance-date{ font-size:11px; font-weight:600; color:rgba(var(--cnr),.95); margin-top:4px }
  .dance-desc{ font-size:10.5px; color:rgba(255,255,255,.55); line-height:1.6; margin-top:4px }
  .dance-actions{ display:flex; flex-direction:column; gap:7px; margin-top:auto; padding-top:14px; }
  .recruit-card .apply{ display:block; text-align:center; border:1px solid rgba(var(--cnr),.5); color:rgba(var(--cnr),.9); background:rgba(var(--cnr),.06); font-size:10.5px; padding:7px 10px; font-weight:700; border-radius:6px; cursor:pointer; transition:all .2s; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; }
  .recruit-card .apply:hover{ background:rgba(var(--cnr),.2); border-color:var(--cn); color:#fff; box-shadow:0 0 14px rgba(var(--cnr),.35),inset 0 0 6px rgba(var(--cnr),.1); text-shadow:0 0 8px rgba(var(--cnr),.8); }
  .coming-soon-badge{ display:block; margin-top:auto; padding-top:14px; font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--cn); text-shadow:0 0 10px var(--cn),0 0 24px rgba(var(--cnr),.5); animation:neon-flicker 3s ease-in-out infinite; }
  @keyframes neon-flicker{ 0%,100%{ opacity:1; text-shadow:0 0 10px var(--cn),0 0 24px rgba(var(--cnr),.5) } 48%{ opacity:1 } 50%{ opacity:.7; text-shadow:0 0 5px var(--cn) } 52%{ opacity:1 } }

  /* ---------- MOVIE / GALLERY / 過去のHP ---------- */
  .mg-row{ display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:24px; align-items:flex-start; margin-top:14px; }
  .movie-frame{ aspect-ratio:16/10; position:relative; overflow:hidden; }
  .play{ position:absolute; inset:0; display:grid; place-items:center; }
  .play .pbtn{ width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.85); display:grid; place-items:center; transition:background .2s, transform .2s; cursor:pointer; }
  .play .pbtn:hover{ background:#fff; transform:scale(1.1) }
  .play .pbtn::after{ content:""; border:11px solid transparent; border-left:18px solid #222; margin-left:6px; }
  .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .gallery-grid .ph{ aspect-ratio:1/1 }
  .past-list{ background:transparent }
  .past-list .row{ display:grid; grid-template-columns:1fr auto; align-items:center; background:#fff; color:#222; padding:11px 14px; margin-bottom:6px; font-size:13px; cursor:pointer; transition:background .2s; }
  .past-list .row:hover{ background:#f0f0f0 }
  .past-list .row::after{ content:"›"; color:#aaa; font-size:18px }
  .small-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px }
  .small-head .t{ font-family:"Permanent Marker","Caveat Brush",cursive; font-size:42px; line-height:.9; transform:skewX(-8deg); padding:4px 8px 4px 32px; position:relative; }
  .small-head .t::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:34px; height:34px; background:radial-gradient(circle 9px at 50% 50%, currentColor 0 60%, transparent 70%),radial-gradient(circle 3px at 18% 28%, currentColor 0 70%, transparent 80%),radial-gradient(circle 2px at 86% 22%, currentColor 0 70%, transparent 80%),radial-gradient(circle 4px at 14% 78%, currentColor 0 70%, transparent 80%),radial-gradient(circle 2px at 84% 76%, currentColor 0 70%, transparent 80%); }
  .small-head .more{ font-size:12px; padding:6px 14px }
  .past-head{ color:#fff; font-weight:700; font-size:14px }

  /* ---------- FAQ ---------- */
  .faq-list{ margin-top:0 }
  .faq-item{ border-bottom:1px solid #1c222d; }
  .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; cursor:pointer; font-size:15px; font-weight:700; color:#fff; list-style:none; }
  .faq-q::-webkit-details-marker{ display:none }
  .faq-q .qi{ flex:0 0 auto; font-family:"Bebas Neue",sans-serif; font-size:22px; color:var(--pink); margin-right:8px }
  .faq-q .qa-arrow{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:16px; transition:transform .3s; }
  details[open] .faq-q .qa-arrow{ transform:rotate(180deg) }
  .faq-a{ padding:0 0 18px 30px; font-size:14px; color:var(--ink-dim); line-height:1.8; }

  /* ---------- banner row ---------- */
  .banners{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:0; margin:30px 60px 0; }
  .banner{ position:relative; padding:22px 24px; min-height:170px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
  .banner.fan{ background:linear-gradient(90deg,#ffd91f,#ff8a1f); color:#1a1300; }
  .banner.fan h4{ font-family:"Bowlby One",sans-serif; font-size:28px; margin:0 0 4px; color:#1a1300; }
  .banner.fan p{ margin:0; font-size:11px; line-height:1.6 }
  .banner.fan .cta{ align-self:flex-start; margin-top:10px; background:var(--pink); color:#fff; font-family:"Bebas Neue",sans-serif; font-size:13px; letter-spacing:.1em; padding:8px 18px; transition:background .2s; }
  .banner.fan .cta:hover{ background:var(--magenta) }
  .banner.join{ background:#0e1014; }
  .banner.join h4{ font-family:"Bowlby One",sans-serif; font-size:30px; margin:0; color:#fff; letter-spacing:.04em; }
  .banner.join p{ margin:6px 0 0; font-size:11px; color:#cfd3dc; line-height:1.6 }
  .banner.join .cta{ align-self:flex-start; margin-top:10px; background:#fff; color:#000; font-family:"Bebas Neue",sans-serif; font-size:12px; letter-spacing:.1em; padding:7px 16px; transition:background .2s; }
  .banner.join .cta:hover{ background:#e0e0e0 }
  .banner.join .ph{ position:absolute; right:0; top:0; bottom:0; width:55%; }
  .banner.ad{ background:linear-gradient(90deg,#1aa0c8,#1f6cff); color:#fff; }
  .banner.ad h4{ font-family:"Noto Sans JP",sans-serif; font-weight:900; font-size:20px; margin:0; }
  .banner.ad p{ font-size:11px; margin:6px 0 0; line-height:1.6 }
  .banner.ad .cta{ align-self:flex-start; margin-top:10px; background:#fff; color:#000; font-size:12px; padding:7px 16px; transition:background .2s; }
  .banner.ad .cta:hover{ background:#e0e0e0 }

  /* ---------- sponsor logos ---------- */
  .sponsors{ background:#fff; color:#222; padding:30px 60px; display:flex; flex-wrap:nowrap; justify-content:center; gap:40px; align-items:center; }
  .sponsor{ display:flex; align-items:center; justify-content:center; height:34px; color:#222; font-weight:700; font-size:13px; letter-spacing:.04em; font-family:"Bebas Neue",sans-serif; text-align:center; }

  /* ---------- ARTIST MODAL ---------- */
  .artist-modal{ display:none; position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.88); align-items:center; justify-content:center; padding:24px; animation:modal-fade .25s ease; }
  @keyframes modal-fade{ from{opacity:0} to{opacity:1} }
  .artist-modal.open{ display:flex }
  .artist-modal-box{ position:relative; display:flex; background:#0c0f15; width:100%; max-width:820px; max-height:88vh; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.7); }
  .artist-modal-img{ flex:0 0 360px; background:#000; }
  .artist-modal-img.sq{ height:360px; align-self:center; }
  .artist-modal-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .artist-modal-body{ flex:1; padding:44px 40px; overflow-y:auto; display:flex; flex-direction:column; justify-content:center; gap:14px; }
  .artist-modal-badge{ display:inline-block; font-family:"Bebas Neue",sans-serif; font-size:13px; letter-spacing:.12em; padding:4px 14px; border-radius:1px; color:#fff; align-self:flex-start; }
  .artist-modal-badge.sat{ background:var(--pink) }
  .artist-modal-badge.sun{ background:var(--cyan) }
  .artist-modal-badge.mon{ background:var(--yellow); color:#1a1300 }
  .artist-modal-badge.mc{ background:var(--cyan) }
  .artist-modal-name{ font-family:"Bebas Neue","Noto Sans JP",sans-serif; font-size:38px; letter-spacing:.06em; color:#fff; line-height:1.1; }
  .artist-modal-bio{ font-size:14px; color:var(--ink-dim); line-height:2; margin-top:4px; }
  .artist-modal-close{ position:absolute; top:14px; right:14px; width:36px; height:36px; background:#fff; color:#000; border:0; cursor:pointer; border-radius:2px; display:grid; place-items:center; font-size:16px; font-weight:700; transition:background .2s; z-index:10; }
  .artist-modal-close:hover{ background:#e0e0e0 }
  .artist-card[data-name]{ cursor:pointer }
  .artist-card[data-name]:hover img{ transform:scale(1.04); transition:transform .35s ease }
  .artist-card[data-name] img{ transition:transform .35s ease }

  /* ---------- footer ---------- */
  footer.bot{ background:#0a0c11; color:#cfd3dc; padding:18px 60px; display:grid; grid-template-columns:1fr auto auto; gap:24px; align-items:center; font-size:12px; }
  footer.bot .brand{ font-family:"Bowlby One",sans-serif; font-size:15px; background:linear-gradient(90deg,#ff2b7a,#1ec3c7); -webkit-background-clip:text; background-clip:text; color:transparent; }
  footer.bot .legal{ display:flex; gap:14px }
  footer.bot .legal a:hover{ color:#fff }
  footer.bot .social{ display:flex; gap:14px; align-items:center; font-family:"Bebas Neue",sans-serif; letter-spacing:.16em }
  footer.bot .social .ic{ width:22px; height:22px; border:1px solid #cfd3dc; display:grid; place-items:center; border-radius:3px; font-size:11px; transition:border-color .2s, color .2s; }
  footer.bot .social .ic:hover{ border-color:#fff; color:#fff }
  .copyright{ background:#070809; color:#7a8090; text-align:left; font-size:11px; padding:10px 60px; font-family:"JetBrains Mono",monospace }

  /* ---------- back-to-top ---------- */
  .btt{ position:fixed; bottom:28px; right:28px; z-index:50; width:44px; height:44px; background:var(--pink); color:#fff; display:grid; place-items:center; border-radius:2px; font-size:20px; opacity:0; pointer-events:none; transition:opacity .3s; border:0; cursor:pointer; }
  .btt.visible{ opacity:1; pointer-events:auto }
  .btt:hover{ background:var(--magenta) }

  /* ========== TABLET (〜1024px) ========== */
  @media (max-width:1024px){
    section{ padding:40px 32px }
    .news{ margin:0 32px }
    .banners{ margin:0 32px }
    nav.main{ gap:8px; font-size:11px; letter-spacing:.08em }
    .section-title{ font-size:50px }
    .artist-grid{ grid-template-columns:repeat(3,1fr) }
  }

  /* ========== MOBILE (〜767px) ========== */
  @media (max-width:767px){
    /* --- base --- */
    section{ padding:28px 16px }
    .page{ overflow-x:hidden }
    .leaf{ display:none }

    /* --- header --- */
    nav.main{ display:none }
    .ticket-btn{ font-size:12px; padding:7px 10px; letter-spacing:.06em }
    .logo-text .jp{ font-size:12px }
    .logo-text .num{ font-size:10px }
    .logo-text .en{ display:none }

    /* --- section headings --- */
    .section-title{ font-size:38px }
    .section-head{ flex-wrap:wrap; gap:10px; margin-bottom:16px }
    .section-head .more{ font-size:11px; padding:6px 14px }

    /* --- news --- */
    .news{ margin:0 12px; padding:18px 16px }
    .news .section-title{ font-size:32px }
    .news li{ grid-template-columns:80px 1fr; gap:8px }
    .news li .new{ display:none }

    /* --- artist --- */
    .artist{ padding-top:28px }
    .artist-grid{ grid-template-columns:1fr 1fr }
    .mc-grid{ flex-wrap:wrap; justify-content:center }
    .mc-grid .artist-card{ flex:0 0 calc(50% - 8px) }

    /* --- ticket --- */
    .ticket-grid{ grid-template-columns:1fr }

    /* --- area map --- */
    .am-row{ grid-template-columns:1fr; gap:20px }
    .map-frame{ aspect-ratio:4/3 }
    .area-images-grid{ grid-template-columns:1fr }
    .area-image-label{ font-size:13px; letter-spacing:.06em }

    /* --- campaign --- */
    .campaign-inner{ flex-direction:column; gap:24px; }
    .campaign-img-wrap{ flex:none; width:100%; max-width:320px; margin:0 auto; }

    /* --- recruit --- */
    .recruit-section{ padding:24px 20px 28px }
    .recruit-grid{ grid-template-columns:1fr 1fr }
    .recruit-card{ min-height:150px }

    /* --- movie/gallery/past --- */
    .mg-row{ grid-template-columns:1fr }

    /* --- banners --- */
    .banners{ grid-template-columns:1fr; margin:0 !important }

    /* --- sponsors --- */
    .sponsors{ padding:20px 16px; gap:16px; flex-wrap:wrap }

    /* --- footer --- */
    footer.bot{ grid-template-columns:1fr; padding:18px 16px; gap:12px; text-align:center }
    footer.bot .legal{ justify-content:center; flex-wrap:wrap; gap:8px }
    footer.bot .social{ justify-content:center }
    .copyright{ padding:10px 16px }

    /* --- artist modal --- */
    .artist-modal-box{ flex-direction:column; max-height:92vh }
    .artist-modal-img{ flex:0 0 180px }
    .artist-modal-img.sq{ flex:0 0 260px !important; height:260px; width:260px; align-self:center; }
    .artist-modal-body{ padding:20px 18px; gap:10px }
    .artist-modal-name{ font-size:26px }
    .artist-modal-bio{ font-size:13px }
  }

  /* ========== SMALL MOBILE (〜480px) ========== */
  @media (max-width:480px){
    section{ padding:22px 12px }
    .section-title{ font-size:32px }
    .news{ margin:0 8px }
    .artist-grid{ grid-template-columns:1fr 1fr }
    .mc-grid .artist-card{ flex:0 0 calc(50% - 8px) }
    .area-image-label{ font-size:12px; padding:8px 12px }
    .recruit-grid{ grid-template-columns:1fr }
  }