@charset "UTF-8";
/* ==========================================================================
   SOUND CONNECTION Vol.5 — Landing Page
   Design tokens → Base → Components → Sections
   ========================================================================== */

/* --------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------- */
:root{
  /* color */
  --bg:            #06040E;
  --bg-2:          #0C0819;
  --panel:         #14102A;
  --panel-2:       #1B1638;
  --line:          rgba(255,255,255,.10);
  --line-strong:   rgba(255,255,255,.20);

  --pink:          #FF2D87;
  --pink-2:        #FF6EB4;
  --cyan:          #3DE6E0;
  --purple:        #8B5CFF;
  --yellow:        #FFE45E;
  --green:         #06C755;

  --text:          #FFFFFF;
  --text-2:        rgba(255,255,255,.72);
  --text-3:        rgba(255,255,255,.48);

  --grad-neon:     linear-gradient(90deg, var(--cyan) 0%, var(--pink) 55%, var(--purple) 100%);
  --grad-pink:     linear-gradient(135deg, #FF2D87 0%, #FF5FA8 50%, #C44BFF 100%);

  /* type */
  --f-display: "Anton", "Noto Sans JP", sans-serif;
  --f-cond:    "Barlow Condensed", "Noto Sans JP", sans-serif;
  --f-jp:      "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;

  /* layout */
  --container: 1160px;
  --gutter: 20px;
  --header-h: 64px;
  --radius: 14px;
  --radius-lg: 22px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 768px){
  :root{ --gutter: 40px; --header-h: 76px; }
}

/* --------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-jp);
  font-size:15px;
  line-height:1.9;
  font-feature-settings:"palt";
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){ body{ font-size:16px; } }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg{ display:block; }
::selection{ background:var(--pink); color:#fff; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:820px; }
.section{ padding-block: 76px; position:relative; }
@media (min-width:768px){ .section{ padding-block: 130px; } }

.sp-only{ display:inline; }
@media (min-width:768px){ .sp-only{ display:none; } }

/* film grain */
.grain{
  position:fixed; inset:-50%; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

/* ambient orbs */
.orb{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.5; }
.orb--pink{ width:44vw; height:44vw; background:var(--pink); top:-10%; right:-12%; }
.orb--cyan{ width:36vw; height:36vw; background:var(--purple); bottom:-14%; left:-10%; opacity:.4; }

/* --------------------------------------------------------------
   3. TYPO HELPERS
   -------------------------------------------------------------- */
.sec-head{ margin-bottom:44px; }
@media (min-width:768px){ .sec-head{ margin-bottom:64px; } }
.sec-head--center{ text-align:center; }
.sec-head__label{
  font-family:var(--f-cond); font-size:13px; font-weight:600; letter-spacing:.24em;
  color:var(--cyan); margin-bottom:14px; text-transform:uppercase;
}
.sec-head__label--pink{ color:var(--pink-2); }
.sec-head__title{
  font-size:clamp(26px, 6.4vw, 46px); line-height:1.35; font-weight:900; letter-spacing:.01em;
  /* 日本語の変な位置での折り返しを防ぐ（未対応ブラウザは balance にフォールバック） */
  text-wrap:balance; word-break:auto-phrase;
}
.sec-head__title--xl{ font-size:clamp(30px, 7.6vw, 60px); line-height:1.28; }
.sec-head__title--sm{ font-size:clamp(17px, 3.4vw, 24px); line-height:1.6; }
.sec-head__sub{
  margin-top:18px; color:var(--text-2); font-size:clamp(13px,3.4vw,15px); line-height:2;
}
.grad{
  background:var(--grad-neon); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hl{
  background:linear-gradient(transparent 62%, rgba(255,45,135,.42) 62%);
  padding-inline:2px;
}
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-cond);
  font-size:15px; font-weight:600; letter-spacing:.12em; color:var(--pink-2);
  border-bottom:1px solid rgba(255,110,180,.4); padding-bottom:3px; transition:.3s var(--ease);
}
.link-arrow::after{ content:"→"; transition:transform .3s var(--ease); }
.link-arrow:hover{ color:#fff; border-color:#fff; }
.link-arrow:hover::after{ transform:translateX(5px); }

/* --------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-weight:700; font-size:14px;
  letter-spacing:.06em; line-height:1.4; text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn[hidden]{ display:none; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn--sm{ padding:9px 20px; font-size:12.5px; }
.btn--lg{ padding:17px 34px; font-size:15px; }
.btn--xl{ padding:21px 46px; font-size:17px; width:100%; max-width:420px; }

.btn--pink{
  background:var(--grad-pink); color:#fff;
  box-shadow:0 8px 30px rgba(255,45,135,.38);
}
.btn--pink:hover{ box-shadow:0 14px 40px rgba(255,45,135,.55); }
.btn--ghost{
  border:1px solid var(--line-strong); color:#fff;
  background:rgba(255,255,255,.04); backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--outline{ border:1px solid var(--line-strong); color:var(--text-2); }
.btn--outline:hover{ color:#fff; border-color:#fff; }
.btn--yellow{ background:var(--yellow); color:#1A1200; box-shadow:0 8px 26px rgba(255,228,94,.25); }
.btn--line{ background:var(--green); color:#fff; }
.btn--ig{ background:linear-gradient(45deg,#F9CE34,#EE2A7B 45%,#6228D7); color:#fff; }
/* .btn svg は width/heightしか指定していないため、このアイコンだけSVGの初期値（黒塗り）のまま
   表示されてしまっていた。白い線画スタイルに揃える。 */
.btn--ig svg{ fill:none; stroke:currentColor; stroke-width:1.7; }

/* --------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto; z-index:1000; height:var(--header-h);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(6,4,14,.82);
  border-bottom-color:var(--line);
}
/* backdrop-filter は position:fixed の子孫の「包含ブロック」を作ってしまう。
   ドロワー(.gnav)はヘッダーの子なので、スクロール後にこれが付くと
   高さ64pxのヘッダー内に閉じ込められ、画面全面に開けず操作できなくなっていた。
   そのためドロワーを開いている間だけ backdrop-filter を外す。
   （開いている間はドロワーが画面全体を覆うので、見た目への影響はない） */
body:not(.is-open) .header.is-stuck{
  backdrop-filter:blur(14px) saturate(140%);
}
.header__inner{
  height:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:20px;
}
.logo{ display:flex; align-items:center; gap:10px; flex:none; }
.logo__mark{ display:flex; align-items:flex-end; gap:3px; height:20px; }
.logo__mark i{ width:3px; border-radius:2px; background:var(--grad-neon); animation:eq 1.1s ease-in-out infinite; }
.logo__mark i:nth-child(1){ height:9px;  animation-delay:0s; }
.logo__mark i:nth-child(2){ height:18px; animation-delay:.18s; }
.logo__mark i:nth-child(3){ height:13px; animation-delay:.36s; }
@keyframes eq{ 0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)} }
.logo__mark i{ transform-origin:bottom; }
.logo__text{
  font-family:var(--f-cond); font-weight:700; font-size:12px; line-height:1.05;
  letter-spacing:.16em;
}
.header__cta{ margin-left:auto; }
@media (min-width:1024px){ .header__cta{ display:none; } }

.gnav{ margin-left:auto; }
.gnav__list{ display:none; }
.gnav__cta{ display:none; }
@media (min-width:1024px){
  .gnav{ display:flex; align-items:center; gap:26px; }
  .gnav__list{ display:flex; gap:22px; }
  .gnav__list a{
    font-family:var(--f-cond); font-size:13.5px; font-weight:600; letter-spacing:.14em;
    color:var(--text-2); transition:color .25s;
  }
  .gnav__list a:hover{ color:#fff; }
  .gnav__cta{ display:block; }
}

/* hamburger */
.hamburger{
  width:40px; height:40px; margin-left:4px; position:relative; flex:none;
  display:grid; place-items:center;
}
.hamburger span{
  position:absolute; left:9px; width:22px; height:1.5px; background:#fff; border-radius:2px;
  transition:.35s var(--ease);
}
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:19.5px; }
.hamburger span:nth-child(3){ top:25px; }
.is-open .hamburger span:nth-child(1){ top:19.5px; transform:rotate(45deg); }
.is-open .hamburger span:nth-child(2){ opacity:0; }
.is-open .hamburger span:nth-child(3){ top:19.5px; transform:rotate(-45deg); }
@media (min-width:1024px){ .hamburger{ display:none; } }

/* mobile drawer
   以前は justify-content:center で縦中央寄せしていたが、overflowの指定がなかったため
   項目数が増えたり画面の実効高さが低くなる場面（アドレスバー展開時など）で
   上側の項目（ABOUT〜ARTIST）が画面外にはみ出し、スクロールでも届かなくなっていた。
   縦スクロール可能にし、上詰め＋上下に余白を確保することで、常に全項目に届くようにする。 */
@media (max-width:1023px){
  .gnav{
    position:fixed; inset:0; background:rgba(6,4,14,.97); backdrop-filter:blur(16px);
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:28px;
    padding:calc(var(--header-h) + 24px) 20px 32px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; transition:.4s var(--ease); margin:0;
  }
  .is-open .gnav{ opacity:1; visibility:visible; }
  .gnav__list{ display:flex; flex-direction:column; gap:18px; text-align:center; }
  .gnav__list a{ font-family:var(--f-cond); font-size:20px; letter-spacing:.2em; font-weight:600; }
  .gnav__cta{ display:block; flex:none; }
  .gnav__cta .btn{ padding:14px 40px; font-size:14px; }
}

/* --------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-top:calc(var(--header-h) + 30px); padding-bottom:74px; overflow:hidden;
  isolation:isolate;
}
@media (min-width:768px){ .hero{ align-items:center; padding-bottom:90px; } }

.hero__bg{ position:absolute; inset:0; z-index:-2; background:var(--bg-2); }
/* 「音楽」と「出会い」の2枚をクロスフェード。
   ズームはCSSアニメーションにして、切り替わるたびに頭から再生させる。 */
.hero__slide{
  position:absolute; inset:0;
  /* 幅を切らずに全部見せる。高さが余った分は下の背景（暗色）に溶ける */
  background-size:100% auto;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.8s var(--ease);
}
/* 01：音楽（フロアの盛り上がり）／ 02：出会い（色違いのリストバンド）
   jpgを先に書いてから image-set() で上書き。未対応ブラウザはjpgのまま表示されます。 */
.hero__slide--music{
  background-image:url("../img/hero-01.jpg");
  background-image:image-set(url("../img/hero-01.webp") type("image/webp"),
                             url("../img/hero-01.jpg")  type("image/jpeg"));
}
.hero__slide--connect{
  background-image:url("../img/hero-02.jpg");
  background-image:image-set(url("../img/hero-02.webp") type("image/webp"),
                             url("../img/hero-02.jpg")  type("image/jpeg"));
}
/* 03：ライブ（DJ＋フロア） */
.hero__slide--live{
  background-image:url("../img/hero-03.jpg");
  background-image:image-set(url("../img/hero-03.webp") type("image/webp"),
                             url("../img/hero-03.jpg")  type("image/jpeg"));
}
/* 05：ステージのライブ */
.hero__slide--stage{
  background-image:url("../img/hero-05.jpg");
  background-image:image-set(url("../img/hero-05.webp") type("image/webp"),
                             url("../img/hero-05.jpg")  type("image/jpeg"));
}
/* 04：DJプレイ */
.hero__slide--dj{
  background-image:url("../img/hero-04.jpg");
  background-image:image-set(url("../img/hero-04.webp") type("image/webp"),
                             url("../img/hero-04.jpg")  type("image/jpeg"));
}


.hero__slide.is-active{ opacity:1; animation:heroDrift 7.6s ease-out forwards; }
/* 偶数枚目は逆方向へ。同じ動きの繰り返しに見せない */
.hero__slide:nth-of-type(even).is-active{ animation-name:heroDrift-rev; }

/* 幅を優先するため拡大はしない。上下のゆっくりした移動だけで動きを出す */
@keyframes heroDrift{
  from{ transform:translate3d(0,-1.2%,0); }
  to  { transform:translate3d(0, 1.2%,0); }
}
@keyframes heroDrift-rev{
  from{ transform:translate3d(0, 1.2%,0); }
  to  { transform:translate3d(0,-1.2%,0); }
}
/* fallback gradient if photos not yet placed */
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(75% 55% at 20% 15%, rgba(139,92,255,.55), transparent 65%),
    radial-gradient(60% 50% at 85% 25%, rgba(255,45,135,.45), transparent 62%),
    radial-gradient(80% 60% at 50% 105%, rgba(61,230,224,.22), transparent 65%),
    linear-gradient(180deg,#120B26 0%, #08061A 60%, #06040E 100%);
}
/* 支給写真は2枚とも左側が暗く空いているので、覆いは最小限でよい。
   下端だけはページ背景に繋ぐためしっかり落とす。 */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,4,14,.62) 0%, rgba(6,4,14,.06) 30%, rgba(6,4,14,.30) 68%, rgba(6,4,14,.86) 90%, var(--bg) 100%),
    linear-gradient(90deg, rgba(6,4,14,.66) 0%, rgba(6,4,14,.22) 44%, rgba(6,4,14,0) 72%);
}
/* スマホ用の上書きは、CSSの「同じ詳細度なら後に書いた方が勝つ」ルールにより、
   必ず上のベース定義より後ろに置くこと（以前ここが逆で、ベース側が常に勝ってしまいバグの原因になった）。
   写真は上端に寄せ、テキストの開始位置を写真の裾に少し重ねてPCの見え方に近づけている。 */
@media (max-width:700px){
  .hero__slide{ background-position:center top; }
  /* 写真がヘッダーの裏に回り込んで人物の頭などが半端に切れて見えないよう、
     写真の開始位置をヘッダーの高さぶん下げる。ヘッダー下は常にすっきりした暗い帯になる。 */
  .hero__bg{ inset:var(--header-h) 0 0 0; }
  /* 写真とテキストを上下2段に分けず、PCと同じ「写真の上にテキストが乗る」構成に戻す。
     ヘッダー分だけ避けたら、あとはalign-items:centerでSOUND CONNECTIONのロゴ付近を
     画面中央（＝写真の裾～ブレンド域）に自然に持ってくる。 */
  .hero{ align-items:center; padding-top:calc(var(--header-h) + 16px); padding-bottom:32px; }
  /* 写真本体はPC同等の明るさまで持ち上げ、ロゴから下だけを重点的に落とす */
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(6,4,14,.30) 0%,
        rgba(6,4,14,.08) 10%,
        rgba(6,4,14,.14) 20%,
        rgba(6,4,14,.42) 30%,
        rgba(6,4,14,.78) 42%,
        rgba(6,4,14,.93) 58%,
        var(--bg) 78%);
  }
}
.hero .orb{ z-index:-1; opacity:.28; }

.hero__inner{ position:relative; display:flex; flex-direction:column; gap:34px; }
@media (min-width:900px){
  .hero__inner{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; }
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--f-cond);
  font-size:12.5px; font-weight:600; letter-spacing:.26em; color:var(--text-2);
  border:1px solid var(--line-strong); border-radius:999px; padding:7px 16px;
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px); margin-bottom:22px;
}
.hero__eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.hero__copy{ margin-bottom:22px; }
.hero__copy-jp{
  display:block; font-size:clamp(22px, 5.6vw, 34px); font-weight:700; line-height:1.55;
  letter-spacing:.01em; text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.hero__copy-jp em{ font-style:normal; color:var(--cyan); }
.hero__copy-en{
  display:block; font-family:var(--f-display); font-size:clamp(46px, 13.5vw, 108px);
  line-height:.92; letter-spacing:.005em; margin-top:14px;
  background:linear-gradient(180deg,#fff 30%, #E4D8FF 70%, #B79BFF 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 30px rgba(139,92,255,.5));
}
.hero__sub{
  color:var(--text-2); font-size:clamp(13px,3.4vw,15.5px); line-height:2; margin-bottom:30px;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}

/* aで開催日エリア全体をタップ領域にしている（09 NEXT EVENTへ遷移） */
.hero__meta{
  display:flex; align-items:center; gap:14px; margin-bottom:26px;
  padding:12px 16px; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:rgba(10,7,22,.55); backdrop-filter:blur(8px);
  color:inherit; text-decoration:none; transition:.25s var(--ease);
}
.hero__meta:hover, .hero__meta:focus-visible{
  border-color:var(--pink); background:rgba(255,45,135,.12);
}
@media (min-width:900px){ .hero__meta{ display:none; } }
.hero__meta-date{
  font-family:var(--f-display); font-size:38px; line-height:.9; flex:none;
  display:flex; align-items:baseline;
}
.hero__meta-date i{ font-style:normal; color:var(--pink); font-size:.7em; }
.hero__meta-body{ font-size:12px; line-height:1.75; color:var(--text-2); }
.hero__meta-body b{
  font-family:var(--f-cond); font-size:14px; letter-spacing:.16em; color:var(--cyan); margin-right:4px;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.hero__actions .btn{ flex:1 1 auto; min-width:150px; }
@media (min-width:768px){ .hero__actions .btn{ flex:0 0 auto; } }

.hero__badges{ display:flex; flex-wrap:wrap; gap:8px; }
.hero__badges li{
  font-size:11.5px; letter-spacing:.04em; color:var(--text-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  background:rgba(255,255,255,.04);
}
.hero__badges strong{ color:#fff; font-weight:700; }

/* hero date bar ── 縦長カードだと写真の見せ場を覆ってしまうので、横一列の細いバーに */
/* aで開催日バー全体をタップ領域にしている（09 NEXT EVENTへ遷移） */
.hero__date{
  flex:none; align-self:flex-end;
  display:flex; align-items:center; gap:14px;
  padding:10px 16px; border-radius:14px;
  border:1px solid var(--line-strong);
  background:rgba(10,7,22,.62); backdrop-filter:blur(14px);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  color:inherit; text-decoration:none; transition:.25s var(--ease);
}
.hero__date:hover, .hero__date:focus-visible{
  border-color:var(--pink); background:rgba(255,45,135,.16);
  box-shadow:0 16px 48px rgba(255,45,135,.3);
}
@media (max-width:899px){ .hero__date{ display:none; } }
.hero__date-label{
  font-family:var(--f-cond); font-size:10.5px; letter-spacing:.22em;
  color:var(--pink-2); font-weight:600; writing-mode:vertical-rl; line-height:1;
}
.hero__date-num{
  font-family:var(--f-display); font-size:40px; line-height:.9;
  display:flex; align-items:baseline;
}
.hero__date-num i{ font-style:normal; color:var(--pink); font-size:.72em; }
.hero__date-dow{
  font-family:var(--f-cond); font-size:14px; letter-spacing:.2em;
  color:var(--cyan); font-weight:600;
}
.hero__date-meta{
  font-family:var(--f-cond); font-size:15px; letter-spacing:.06em; line-height:1.35;
  padding-left:14px; border-left:1px solid var(--line);
}
.hero__date-meta span{
  font-family:var(--f-jp); font-size:11px; color:var(--text-2); letter-spacing:.02em;
}

.hero__scroll{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--f-cond); font-size:10.5px; letter-spacing:.3em; color:var(--text-3);
}
.hero__scroll i{ width:1px; height:40px; background:linear-gradient(180deg,var(--pink),transparent); }
@media (max-width:899px){ .hero__scroll{ display:none; } }

/* --------------------------------------------------------------
   7. TICKER
   -------------------------------------------------------------- */
.ticker{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(90deg, rgba(255,45,135,.10), rgba(139,92,255,.10));
  padding-block:12px;
}
.ticker__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:marquee 32s linear infinite;
}
.ticker__track span{
  font-family:var(--f-display); font-size:clamp(16px,3.6vw,26px); letter-spacing:.05em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.55);
}
.ticker__track b{ color:var(--pink); font-size:13px; }
@keyframes marquee{ to{ transform:translateX(-33.333%); } }

/* --------------------------------------------------------------
   8. PROBLEM
   -------------------------------------------------------------- */
.problem{ background:var(--bg); text-align:center; }
.problem__list{ display:flex; flex-direction:column; gap:14px; margin-bottom:44px; }
.problem__list li{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  padding:16px 18px; font-size:clamp(13.5px,3.6vw,17px); font-weight:500; line-height:1.7;
}
.problem__list em{ font-style:normal; color:var(--pink-2); font-weight:700; }
.problem__answer{
  font-size:clamp(18px,5vw,30px); font-weight:900; line-height:1.7;
}

/* --------------------------------------------------------------
   9. ABOUT
   -------------------------------------------------------------- */
.about{ background:linear-gradient(180deg, var(--bg), var(--bg-2)); }
.about__grid{ display:grid; gap:40px; }
@media (min-width:900px){ .about__grid{ grid-template-columns:1fr 1fr; gap:70px; align-items:center; } }

.about__formula{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:26px;
  font-family:var(--f-display); font-size:clamp(20px,4.6vw,32px); letter-spacing:.02em;
}
.about__formula span:first-child{ color:var(--cyan); }
.about__formula b{ color:var(--pink); font-size:.9em; }
.about__formula span:last-child{ color:var(--pink-2); }

.about__lead{ font-size:clamp(14px,3.6vw,16.5px); line-height:2.1; color:var(--text-2); margin-bottom:16px; }
.about__lead--strong{ color:#fff; font-weight:700; font-size:clamp(16px,4.2vw,20px); }
.about__note{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13px; line-height:2; color:var(--text-3);
}

/* 支給写真が横位置のため、縦2枚積み＋実績カードの構成にしている */
.about__visual{ position:relative; display:grid; grid-template-columns:1fr; gap:14px; }
/* 写真の縦横比をそのまま活かして、切らずに全体を見せる */
.about__fig{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:var(--panel);
}
.about__fig img{ width:100%; height:auto; display:block; }

/* --------------------------------------------------------------
   10. PLACEHOLDER FIGURES
   -------------------------------------------------------------- */
.ph{
  position:relative; display:grid; place-items:center; overflow:hidden;
  border:1px dashed rgba(255,255,255,.20); border-radius:var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 10px, transparent 10px 20px),
    linear-gradient(140deg, var(--panel), var(--panel-2));
}
.ph span{
  font-size:11px; letter-spacing:.1em; color:var(--text-3); text-align:center; padding:8px 12px;
}
.ph--about1{ aspect-ratio:3/4; }
.ph--about2{ aspect-ratio:3/4; margin-top:26px; }
.ph--sq{ aspect-ratio:1/1; }
.ph--movie .ph__play{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line-strong);
  background:rgba(255,255,255,.06); display:grid; place-items:center; margin-bottom:8px;
}
.ph--movie .ph__play::after{
  content:""; width:0; height:0; margin-left:3px;
  border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.ph--movie{ flex-direction:column; }

/* --------------------------------------------------------------
   11. FOR WHOM
   -------------------------------------------------------------- */
.forwhom{ background:var(--bg-2); }
.forwhom__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:640px){ .forwhom__list{ grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (min-width:1024px){ .forwhom__list{ grid-template-columns:repeat(6,1fr); } }
.forwhom__list li{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03); padding:22px 12px; text-align:center;
  transition:.35s var(--ease);
}
.forwhom__list li:hover{ border-color:rgba(255,45,135,.5); background:rgba(255,45,135,.06); transform:translateY(-4px); }
.forwhom__icon{ display:block; width:44px; margin:0 auto 12px; }
.forwhom__icon svg{ width:100%; height:auto; fill:none; stroke:var(--cyan); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.forwhom__list p{ font-size:12px; line-height:1.7; font-weight:500; color:var(--text-2); }

/* --------------------------------------------------------------
   12. WRISTBAND
   -------------------------------------------------------------- */
.wb{ background:var(--bg); overflow:hidden; }
.wb__glow{
  position:absolute; inset:auto 0 auto 50%; transform:translateX(-50%);
  top:0; width:120vw; height:60vh; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 0%, rgba(255,45,135,.22), transparent 70%);
}
.wb .container{ position:relative; }

/* 縦長(9:16)の使い方動画。スマホでも画面を占領しすぎない幅に抑える。
   42svh 上限は背の低い端末(iPhone SE等)でも縦に1画面へ収めるため */
.wb__movie{ margin:28px auto 0; width:min(100%, 300px, 42svh); max-width:100%; }
@media (min-width:768px){ .wb__movie{ width:340px; } }
.wb__movie video{
  display:block; width:100%; height:auto; aspect-ratio:404/720;
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  background:#000; box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 40px rgba(255,45,135,.18);
}

.wb__hands{
  display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px;
}
.wb__hand{
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:14px 22px; text-align:center; min-width:120px;
  background:rgba(255,255,255,.04);
}
.wb__hand-label{ font-size:13px; color:var(--text-3); }
.wb__hand-role{ font-weight:900; font-size:clamp(15px,4vw,19px); color:var(--cyan); letter-spacing:.02em; }
.wb__hand:last-of-type .wb__hand-role{ color:var(--pink-2); }
.wb__hand-plus{ font-family:var(--f-display); font-size:22px; color:var(--text-3); }
.wb__hands-note{ text-align:center; font-size:12.5px; color:var(--text-3); margin-bottom:40px; }

.wb__colors{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:640px){ .wb__colors{ grid-template-columns:repeat(3,1fr); gap:18px; } }
@media (min-width:1024px){ .wb__colors{ grid-template-columns:repeat(6,1fr); } }
.wb__colors li{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 14px 20px;
  text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  transition:.35s var(--ease); position:relative; overflow:hidden;
}
.wb__colors li::before{
  content:""; position:absolute; inset:auto 0 0; height:3px; background:var(--c); opacity:.85;
}
.wb__colors li:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--c) 55%, transparent); }
.wb__band{
  display:block; width:74px; height:74px; margin:0 auto 14px; border-radius:50%;
  border:9px solid var(--c);
  box-shadow:0 0 22px -2px var(--c), inset 0 0 12px -4px var(--c);
  position:relative;
}
.wb__band::after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.wb__color-name{ font-size:12px; color:var(--text-3); letter-spacing:.08em; }
.wb__color-purpose{
  font-size:13px; font-weight:700; line-height:1.55; margin-top:2px;
  letter-spacing:-.01em; text-wrap:balance;
}
.wb__note{ margin-top:26px; text-align:center; font-size:11.5px; color:var(--text-3); text-wrap:balance; }

/* --------------------------------------------------------------
   13. FEATURES
   -------------------------------------------------------------- */
.feat{ background:linear-gradient(180deg, var(--bg), var(--bg-2)); }
.feat__list{ display:flex; flex-direction:column; gap:44px; }
@media (min-width:900px){ .feat__list{ gap:90px; } }

.feat__item{ display:grid; gap:22px; align-items:center; }
@media (min-width:900px){
  .feat__item{ grid-template-columns: 84px 1fr 1fr; gap:36px; }
  .feat__item--rev{ grid-template-columns: 84px 1fr 1fr; direction:rtl; }
  .feat__item--rev > *{ direction:ltr; }
}
.feat__num{
  font-family:var(--f-display); font-size:clamp(44px,11vw,84px); line-height:.85;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.28);
}
.feat__title{
  font-size:clamp(19px,4.8vw,27px); font-weight:900; line-height:1.5; margin-bottom:14px;
  text-wrap:balance; word-break:auto-phrase;
}
.feat__text{ color:var(--text-2); font-size:14px; line-height:2; margin-bottom:18px; }
.feat__ph{ aspect-ratio:4/3; }
/* 支給写真の縦横比をそのまま活かす。幅いっぱいに置いて高さは成り行き */
.feat__fig{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  align-self:center;
}
.feat__fig img{ width:100%; height:auto; display:block; }

/* 03・04：写真を使わない2枚組カード */
.feat__pair{ display:grid; gap:14px; }
@media (min-width:768px){ .feat__pair{ grid-template-columns:1fr 1fr; gap:22px; } }
.feat__card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  padding:26px 22px 28px; transition:.35s var(--ease);
}
@media (min-width:768px){ .feat__card{ padding:34px 32px 36px; } }
.feat__card:hover{ border-color:rgba(255,45,135,.4); transform:translateY(-4px); }
.feat__num--sm{ font-size:clamp(34px,8vw,52px); margin-bottom:6px; }
.feat__title--sm{ font-size:clamp(17px,4.4vw,22px); }

/* --------------------------------------------------------------
   14. ARTIST
   -------------------------------------------------------------- */
.artist{ background:var(--bg-2); }

.headliner{
  display:grid; gap:0; border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  overflow:hidden; margin-bottom:44px;
  background:linear-gradient(135deg, rgba(255,45,135,.10), rgba(139,92,255,.08));
}
@media (min-width:900px){ .headliner{ grid-template-columns: 5fr 7fr; margin-bottom:64px; } }
.headliner__img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
@media (min-width:900px){ .headliner__img{ aspect-ratio:auto; height:100%; min-height:420px; } }
.headliner__img img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
.headliner__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%, rgba(12,8,25,.85));
}
@media (min-width:900px){
  .headliner__img::after{
    background:linear-gradient(90deg, transparent 34%, rgba(16,11,32,.45) 68%, rgba(20,14,40,.92) 100%);
  }
}
.headliner__body{ padding:26px 22px 30px; }
@media (min-width:900px){ .headliner__body{ padding:44px 44px 44px 8px; } }
.headliner__tag{
  font-family:var(--f-cond); font-size:11.5px; letter-spacing:.24em; color:var(--yellow);
  font-weight:600; margin-bottom:8px;
}
.headliner__name{
  font-family:var(--f-display); font-size:clamp(40px,10vw,72px); line-height:.95; margin-bottom:16px;
}
.headliner__name span{
  display:block; font-family:var(--f-jp); font-size:11px; font-weight:400;
  color:var(--text-3); letter-spacing:.1em; margin-top:8px;
}
.headliner__text{ font-size:13px; line-height:2; color:var(--text-2); margin-bottom:18px; }
/* Instagramとlit.linkを横並びに。幅が足りなければ折り返す */
.headliner__links{ display:flex; flex-wrap:wrap; gap:10px; }

.ig{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--f-cond);
  font-size:14px; letter-spacing:.08em; font-weight:600; color:var(--text-2);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; transition:.3s var(--ease);
}
.ig svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; }
.ig:hover{ color:#fff; border-color:var(--pink); background:rgba(255,45,135,.14); }

.lineup{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:700px){ .lineup{ grid-template-columns:repeat(3,1fr); gap:18px; } }
@media (min-width:1024px){ .lineup{ grid-template-columns:repeat(3,1fr); gap:22px; } }

.acard{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:rgba(255,255,255,.025); transition:.4s var(--ease);
  display:flex; flex-direction:column;
}
.acard:hover{ border-color:rgba(255,45,135,.45); transform:translateY(-5px); box-shadow:0 18px 44px rgba(0,0,0,.45); }
.acard__img{ aspect-ratio:3/4; overflow:hidden; position:relative; }
.acard__img img{
  width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 30%);
  /* 撮影条件がバラバラな支給写真を、暗いフロアのトーンに寄せて統一する */
  filter:grayscale(.6) contrast(1.08) brightness(.82); transition:.6s var(--ease);
}
.acard:hover .acard__img img{ filter:grayscale(0) contrast(1.02) brightness(.98); transform:scale(1.05); }
.acard__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 58%, rgba(12,8,25,.9));
}
.acard__body{ padding:14px 14px 18px; flex:1; display:flex; flex-direction:column; }
@media (min-width:700px){ .acard__body{ padding:18px 20px 22px; } }
.acard__role{ font-family:var(--f-cond); font-size:10.5px; letter-spacing:.22em; color:var(--cyan); font-weight:600; }
.acard__name{
  font-family:var(--f-display); font-size:clamp(20px,4.6vw,27px); line-height:1.1; margin:4px 0 10px;
}
.acard__bio{
  font-size:11.5px; line-height:1.95; color:var(--text-3); margin-bottom:14px; flex:1;
  /* プロフィールの長さがバラついてもカード高が崩れないようにする保険 */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden;
}
@media (min-width:700px){ .acard__bio{ font-size:12.5px; -webkit-line-clamp:6; } }
.acard .tbd{ display:block; margin-top:6px; color:rgba(255,228,94,.6); font-size:10.5px; }
.acard .ig{ align-self:flex-start; font-size:12px; padding:5px 12px; }

/* --------------------------------------------------------------
   15. BOOTH
   -------------------------------------------------------------- */
.booth{ background:var(--bg); }
.booth__tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:36px; }
.booth__tags li{
  font-size:12px; letter-spacing:.06em; border:1px solid var(--line); border-radius:999px;
  padding:6px 15px; color:var(--text-2); background:rgba(255,255,255,.03);
}
.booth__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:44px; }
@media (min-width:700px){ .booth__list{ grid-template-columns:repeat(4,1fr); gap:20px; } }
/* 出店が1件のときは横長カードにして、空きスペースが目立たないようにする */
.booth__list--single{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
@media (min-width:700px){ .booth__list--single{ grid-template-columns:1fr; max-width:620px; } }
.booth__list--single .bcard--live{ display:grid; grid-template-columns:112px 1fr; gap:18px; align-items:center; text-align:left; }
@media (min-width:700px){ .booth__list--single .bcard--live{ grid-template-columns:140px 1fr; gap:24px; padding:22px; } }
.booth__list--single .bcard__logo{ margin-bottom:0; }
.bcard--live{
  border:1px solid rgba(255,228,94,.30); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,228,94,.09), rgba(255,255,255,.02));
  padding:16px 16px 20px;
}
.bcard__logo{
  aspect-ratio:1/1; display:grid; place-items:center; border-radius:10px;
  background:#fff; padding:16%; margin-bottom:12px;
}
.bcard__logo img{ width:100%; height:100%; object-fit:contain; }
.booth__list--single .bcard--live{ display:grid; grid-template-columns:112px 1fr; gap:18px; align-items:center; text-align:left; }
@media (min-width:700px){ .booth__list--single .bcard--live{ grid-template-columns:140px 1fr; gap:24px; padding:22px; } }
.booth__list--single .bcard__logo{ margin-bottom:0; }
.bcard--live{
  border:1px solid rgba(255,228,94,.30); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,228,94,.09), rgba(255,255,255,.02));
  padding:16px 16px 20px;
}
.bcard__logo{
  aspect-ratio:1/1; display:grid; place-items:center; border-radius:10px;
  background:#fff; padding:16%; margin-bottom:12px;
}
.bcard__logo img{ width:100%; height:100%; object-fit:contain; }
.bcard__name{ font-family:var(--f-cond); font-size:15px; letter-spacing:.14em; font-weight:700; margin-top:12px; }
.bcard__desc{ font-size:11.5px; color:var(--text-3); line-height:1.8; }
.bcard__body .link-arrow{ margin-top:10px; font-size:12.5px; }

.pr-box{
  border:1px solid rgba(255,228,94,.32); border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(255,228,94,.10), rgba(255,45,135,.06));
  padding:28px 22px; text-align:center;
}
@media (min-width:768px){ .pr-box{ padding:44px; } }
.pr-box__label{ font-family:var(--f-cond); font-size:11.5px; letter-spacing:.26em; color:var(--yellow); font-weight:600; margin-bottom:10px; }
.pr-box__title{ font-size:clamp(18px,4.6vw,28px); font-weight:900; line-height:1.5; margin-bottom:16px; }
.pr-box__text{ font-size:13.5px; line-height:2; color:var(--text-2); margin-bottom:22px; }
.pr-box__text strong{ color:var(--yellow); }
.pr-box__text small{ display:inline-block; margin-top:10px; font-size:11px; color:var(--text-3); }

/* --------------------------------------------------------------
   16. GALLERY
   -------------------------------------------------------------- */
.gallery{ background:var(--bg-2); }

/* ---- カルーセル：1ページ＝8枚のモザイク。高さは従来のグリッドとほぼ同じ ---- */
.gallery__viewport{ position:relative; overflow:hidden; border-radius:var(--radius); }
.gallery__track{
  display:flex; width:100%;
  transition:transform .6s var(--ease);
  will-change:transform;
}
/* 1ページ＝9枚（3行）または5枚（2行）。先頭を2x2の大タイルにすると
   9枚＝4セル＋8セル＝12セル、5枚＝4セル＋4セル＝8セルになり、
   PC（4列）でもSP（2列）でも余白なく埋まる。
   ただし9枚ページ(3行)と5枚ページ(2行)では行数が違うぶん全体の高さが揃わないため、
   5枚ページ側は行の高さを1.5倍にして、ページ間で高さが変わらないようにしている。 */
.gallery__page{
  flex:0 0 100%; min-width:100%;
  display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:96px; gap:10px;
  grid-auto-flow:row dense; align-content:start;
}
.gallery__page > *:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3; }
/* 5枚＝2行のページは、3行分と同じ高さになるよう行を149px（96pxの3行分相当）にする */
.gallery__page--5{ grid-auto-rows:149px; }
@media (min-width:768px){
  .gallery__page{ grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px; }
  .gallery__page--5{ grid-auto-rows:232px; }
}

.gtile{
  position:relative; overflow:hidden; border-radius:10px; padding:0;
  border:1px solid var(--line); background:var(--panel); cursor:pointer;
  transition:.35s var(--ease);
}
.gtile img{ width:100%; height:100%; object-fit:cover; transition:.5s var(--ease); }
.gtile:hover{ border-color:rgba(255,45,135,.5); }
.gtile:hover img{ transform:scale(1.06); }
.gtile:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }

.gtile--video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,4,14,.10), rgba(6,4,14,.55));
  pointer-events:none;
}
.gtile__play{
  position:absolute; inset:0; margin:auto; width:44px; height:44px; z-index:1;
  border-radius:50%; border:1px solid rgba(255,255,255,.6);
  background:rgba(6,4,14,.45); backdrop-filter:blur(4px);
  display:grid; place-items:center; pointer-events:none;
}
.gtile__play::after{
  content:""; width:0; height:0; margin-left:3px;
  border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent;
}

/* 前へ／次へ
   以前はカルーセル画像の上に絶対配置で重ねていたが、確実な操作性を優先し、
   カルーセル（overflow:hiddenの領域）の外側・ページャー行の中に独立ボタンとして
   通常のドキュメントフローで配置する。画像やそのホバー演出と重なることがなくなり、
   タップ判定が別の要素に奪われる余地がない、最も確実な構造にしている。 */
.gallery__nav{
  position:relative; flex:0 0 auto;
  width:44px; height:44px; border-radius:50%;
  background:rgba(6,4,14,.72); border:1px solid var(--line-strong);
  transition:.3s var(--ease);
}
/* 見た目のサイズは変えず、実際のタップ判定だけ一回り広げて誤タップ・反応漏れを減らす */
.gallery__nav::before{
  content:""; position:absolute; inset:-10px; border-radius:50%;
}
.gallery__nav::after{
  content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px;
  border-top:1.6px solid #fff; border-right:1.6px solid #fff;
}
.gallery__nav--next::after{ transform:translateX(-2px) rotate(45deg); }
.gallery__nav--prev::after{ transform:translateX(2px) rotate(-135deg); }
.gallery__nav:hover{ background:var(--pink); border-color:var(--pink); }
.gallery__nav[disabled]{ opacity:.28; pointer-events:none; }
@media (min-width:768px){
  .gallery__nav{ width:52px; height:52px; }
}

.gallery__pager{
  display:flex; align-items:center; justify-content:center; gap:20px; margin-top:22px;
}
.gallery__pager__mid{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.gallery__dots{ display:flex; gap:8px; }
.gallery__dot{
  width:8px; height:8px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.24); transition:.3s var(--ease);
}
.gallery__dot.is-current{ background:var(--pink); width:24px; border-radius:999px; }
.gallery__count{
  font-family:var(--f-cond); font-size:13px; letter-spacing:.18em; color:var(--text-3);
}


/* --------------------------------------------------------------
   17. HOW TO
   -------------------------------------------------------------- */
.howto{ background:var(--bg); }
.steps{ display:grid; gap:14px; counter-reset:s; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(4,1fr); gap:16px; } }
.step{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 20px 26px; background:rgba(255,255,255,.03); text-align:center;
}
@media (min-width:768px){
  .step:not(:last-child)::after{
    content:""; position:absolute; top:50%; right:-11px; width:10px; height:10px;
    border-top:1.5px solid var(--pink); border-right:1.5px solid var(--pink);
    transform:translateY(-50%) rotate(45deg); z-index:2;
  }
}
.step__num{
  font-family:var(--f-cond); font-size:10.5px; letter-spacing:.24em; color:var(--text-3);
  display:flex; align-items:baseline; justify-content:center; gap:6px; margin-bottom:10px;
}
.step__num em{ font-family:var(--f-display); font-style:normal; font-size:22px; letter-spacing:0; color:var(--pink); }
.step__icon{ display:block; width:46px; margin:0 auto 12px; }
.step__icon svg{ width:100%; height:auto; fill:none; stroke:var(--cyan); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.step__title{ font-size:15px; font-weight:900; margin-bottom:8px; line-height:1.5; }
.step__text{ font-size:11.5px; line-height:1.9; color:var(--text-3); }

/* --------------------------------------------------------------
   18. EVENT
   -------------------------------------------------------------- */
.event{ background:linear-gradient(180deg, var(--bg), #0F0A22); overflow:hidden; }
.event__glow{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:110vw; height:70vh; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 30%, rgba(139,92,255,.24), transparent 70%);
}
.event .container{ position:relative; }

.event__card{
  border:1px solid var(--line-strong); border-radius:var(--radius-lg); overflow:hidden;
  background:rgba(10,7,22,.6); backdrop-filter:blur(10px);
  display:grid; margin-bottom:20px;
}
@media (min-width:768px){ .event__card{ grid-template-columns: 300px 1fr; } }

.event__date{
  padding:28px 22px; text-align:center;
  background:linear-gradient(150deg, rgba(255,45,135,.20), rgba(139,92,255,.14));
  border-bottom:1px solid var(--line);
}
@media (min-width:768px){ .event__date{ border-bottom:0; border-right:1px solid var(--line); display:grid; align-content:center; } }
.event__year{ font-family:var(--f-cond); font-size:17px; letter-spacing:.3em; color:var(--text-2); }
.event__big{
  font-family:var(--f-display); font-size:clamp(64px,17vw,104px); line-height:1;
  display:flex; align-items:baseline; justify-content:center; gap:2px;
}
.event__big i{ font-style:normal; color:var(--pink); font-size:.62em; }
.event__dow{ font-family:var(--f-cond); font-size:17px; letter-spacing:.34em; color:var(--cyan); font-weight:600; }

.event__info{ padding:8px 22px 22px; }
@media (min-width:768px){ .event__info{ padding:30px 40px; } }
.event__info > div{
  display:grid; gap:4px; padding-block:16px; border-bottom:1px solid var(--line);
}
@media (min-width:560px){ .event__info > div{ grid-template-columns:96px 1fr; gap:16px; align-items:baseline; } }
.event__info > div:last-child{ border-bottom:0; padding-bottom:0; }
.event__info dt{
  font-family:var(--f-cond); font-size:12px; letter-spacing:.24em; color:var(--pink-2); font-weight:600;
}
.event__info dd{ font-size:16px; font-weight:700; line-height:1.7; }
.event__info dd small{ display:block; font-size:11.5px; font-weight:400; color:var(--text-3); margin-top:3px; letter-spacing:.02em; }
/* 会場名の隣に添えるGoogleマップリンク。本文より一段小さく、浮きすぎないように */
.event__map{ margin-left:10px; font-size:12px; vertical-align:2px; }
.price{ display:inline-flex; align-items:baseline; gap:8px; margin-right:18px; }
.price b{
  font-family:var(--f-cond); font-size:11px; letter-spacing:.16em; font-weight:600;
  border:1px solid var(--line-strong); border-radius:4px; padding:2px 7px; color:var(--text-2);
}

.discount{
  display:block; position:relative; text-align:center; margin-bottom:36px;
  border:1px dashed rgba(255,45,135,.55); border-radius:var(--radius);
  background:rgba(255,45,135,.08); padding:20px 20px 18px;
  transition:.35s var(--ease);
}
.discount:hover{
  background:rgba(255,45,135,.14); border-color:var(--pink);
  transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,45,135,.22);
}
.discount__badge{
  display:inline-block; font-family:var(--f-cond); font-size:10.5px; letter-spacing:.22em;
  background:var(--grad-pink); color:#fff; border-radius:999px; padding:3px 12px;
  margin-bottom:8px; font-weight:600;
}
.discount__ig{
  position:absolute; top:16px; right:16px; width:30px; height:30px;
  display:grid; place-items:center; border-radius:9px;
  background:linear-gradient(45deg,#F9CE34,#EE2A7B 45%,#6228D7);
}
.discount__ig svg{ width:17px; height:17px; fill:none; stroke:#fff; stroke-width:1.7; }
@media (min-width:768px){
  .discount__ig{ width:38px; height:38px; top:18px; right:20px; }
  .discount__ig svg{ width:21px; height:21px; }
}
.discount__main{
  display:block; font-size:clamp(19px,5vw,28px); font-weight:900; line-height:1.4;
}
.discount__main em{
  font-style:normal; font-family:var(--f-display); font-size:1.35em;
  color:var(--pink-2); margin-inline:2px;
}
.discount__note{ display:block; font-size:12px; color:var(--text-2); margin-top:6px; }
.discount__note strong{ color:var(--yellow); font-size:15px; }
.discount__cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:3px;
}
.discount__cta i{ font-style:normal; transition:transform .3s var(--ease); }
.discount:hover .discount__cta i{ transform:translateX(4px); }

/* フォロ割ボックスと同じ枠組み・同じ「全体がリンク」の作りを流用したLINE訴求ボックス。
   色だけピンク→LINEグリーンに差し替え。 */
.discount--line{
  border-color:rgba(6,199,85,.55); background:rgba(6,199,85,.08);
}
.discount--line:hover{
  background:rgba(6,199,85,.14); border-color:var(--green);
  transform:translateY(-2px); box-shadow:0 14px 40px rgba(6,199,85,.22);
}
.discount__badge--line{ background:var(--green); }
.discount__ig--line{ background:var(--green); }
.discount__ig--line svg{ stroke:#fff; }
.discount__main--line{ color:#fff; }

.event__cta{ text-align:center; display:grid; justify-items:center; gap:14px; }
.event__cta-note{ font-size:11.5px; color:var(--text-3); }

/* --------------------------------------------------------------
   19. FAQ
   -------------------------------------------------------------- */
.faq{ background:#0F0A22; }
.faq__list{ display:flex; flex-direction:column; gap:10px; }
.qa{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03); overflow:hidden; transition:.3s var(--ease);
}
.qa[open]{ border-color:rgba(255,45,135,.4); background:rgba(255,45,135,.05); }
.qa summary{
  list-style:none; cursor:pointer; padding:17px 52px 17px 44px; position:relative;
  font-size:14px; font-weight:700; line-height:1.6;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::before{
  content:"Q"; position:absolute; left:18px; top:16px;
  font-family:var(--f-display); font-size:16px; color:var(--pink); line-height:1.4;
}
.qa summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--text-2); border-bottom:1.5px solid var(--text-2);
  transform:translateY(-70%) rotate(45deg); transition:.3s var(--ease);
}
.qa[open] summary::after{ transform:translateY(-20%) rotate(225deg); border-color:var(--pink); }
.qa__a{ padding:0 24px 20px 44px; }
.qa__a p{ font-size:13px; line-height:2; color:var(--text-2); }

/* --------------------------------------------------------------
   20. SPONSOR
   -------------------------------------------------------------- */
.sponsor{ background:#0F0A22; padding-block:60px; }
.sponsor__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
/* 8社なので 2列×4段 / 4列×2段 で端数が出ないようにしている */
@media (min-width:768px){ .sponsor__list{ grid-template-columns:repeat(4,1fr); gap:16px; } }
/* ロゴは多色でそのままだと暗背景に沈むため、白タイルに載せてブランドカラーを保つ。
   縦長・横長が混在するので object-fit:contain で必ず全体が収まるようにする。 */
.sponsor__list li{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:10px;
  background:#fff; padding:14px 16px;
  transition:.35s var(--ease);
  /* ロゴ画像の実寸でトラックが押し広げられるのを防ぐ */
  min-width:0;
}
.sponsor__list li:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.45); }
/* 中身(img / a)は絶対配置でタイルに重ねる。通常配置だと Safari では aspect-ratio の箱が
   ロゴ画像の高さに押し広げられ、タイルごとに高さがバラつく（地色ロゴの雄だけ小さく見えた） */
.sponsor__list li{ position:relative; }
.sponsor__list li > img,
.sponsor__list li > a{
  position:absolute; inset:0; width:100%; height:100%;
  box-sizing:border-box; padding:14px 16px;
}
/* リンク付きロゴは a がタイル全体を埋めて、見た目はリンクなしと同じにする */
.sponsor__list a{ display:block; }
.sponsor__list img{ object-fit:contain; object-position:center; }
.sponsor__list a img{ display:block; width:100%; height:100%; }

/* リンクがあるロゴだけ分かるように：ピンクの縁取り＋右上に矢印バッジ。
   ホバーしなくても常時見えるようにして、スマホでも判別できるようにしている。 */
.sponsor__list-item--linked{
  position:relative;
  border-color:rgba(255,45,135,.45);
  box-shadow:0 0 0 1px rgba(255,45,135,.12) inset;
}
.sponsor__list-item--linked:hover{ border-color:var(--pink); }
.sponsor__list-item--linked::after{
  content:""; position:absolute; top:-7px; right:-7px; z-index:1;
  width:20px; height:20px; border-radius:50%;
  box-shadow:0 2px 8px rgba(255,45,135,.5);
  /* 1枚目(アイコン)が上、2枚目(グラデーション地色)が下。順番を間違えるとアイコンが隠れる */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
  background-size:11px 11px, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
/* 地色ありのロゴ（雄）は白タイルだと浮くので、タイルと同じ4:3に地色で広げた画像を
   余白なしで敷き詰める（CSSの背景色と画像の色はカラープロファイル差で境目が出るため） */
.sponsor__list .sponsor__list-item--fill{ background:#3B3B51; overflow:hidden; }
.sponsor__list .sponsor__list-item--fill > img{ padding:0; object-fit:cover; }
.sponsor__list span{ font-family:var(--f-cond); font-size:12px; letter-spacing:.2em; color:var(--text-3); }
.sponsor__cta{ text-align:center; margin-top:26px; }
/* リンクではなくテキスト表示のみ（下線・矢印なし） */
.sponsor__recruit{
  font-size:13.5px; font-weight:700; letter-spacing:.14em; color:var(--pink-2);
}

/* --------------------------------------------------------------
   21. LAST CTA
   -------------------------------------------------------------- */
.last{ position:relative; padding-block:90px; overflow:hidden; text-align:center; }
@media (min-width:768px){ .last{ padding-block:140px; } }
.last__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(255,45,135,.28), transparent 70%),
    radial-gradient(70% 60% at 20% 90%, rgba(139,92,255,.30), transparent 70%),
    radial-gradient(50% 50% at 85% 70%, rgba(61,230,224,.14), transparent 70%),
    linear-gradient(180deg,#0F0A22, #06040E);
}
.last__lead{ font-size:clamp(19px,5.2vw,32px); font-weight:900; margin-bottom:24px; }
.last__words{ display:flex; flex-direction:column; gap:4px; margin-bottom:20px; }
.last__words li{ font-size:clamp(14px,3.8vw,18px); color:var(--text-2); }
.last__bridge{ font-size:clamp(13px,3.4vw,15px); color:var(--text-2); margin-bottom:26px; }
.last__logo{
  font-family:var(--f-display); font-size:clamp(38px,11vw,86px); line-height:.95; margin-bottom:34px;
  background:linear-gradient(180deg,#fff, #D8C6FF 60%, #FF7FC0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 34px rgba(255,45,135,.4));
}
.last__date{ margin-top:18px; font-size:12px; color:var(--text-3); letter-spacing:.04em; }
/* LINEボタンの上に添える案内文。Instagramボタンとは離し、LINEボタンとは近づける */
.last__line-note{
  margin:22px 0 12px; font-size:13px; line-height:1.8; color:var(--text-2); font-weight:700;
}

/* --------------------------------------------------------------
   22. FOOTER
   -------------------------------------------------------------- */
.footer{ background:var(--bg); border-top:1px solid var(--line); padding-block:44px 100px; }
@media (min-width:768px){ .footer{ padding-block:52px; } }
.footer__inner{ text-align:center; display:grid; gap:18px; justify-items:center; }
.footer__logo{ font-family:var(--f-display); font-size:22px; letter-spacing:.06em; }
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.footer__nav a{ font-family:var(--f-cond); font-size:12.5px; letter-spacing:.16em; color:var(--text-3); transition:.3s; }
.footer__nav a:hover{ color:#fff; }
.footer__sns a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); transition:.3s var(--ease);
}
.footer__sns svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.footer__sns a:hover{ border-color:var(--pink); background:rgba(255,45,135,.14); }
.footer__credit{ font-family:var(--f-cond); font-size:11.5px; letter-spacing:.18em; color:var(--text-3); }
.footer__copy{ font-size:10.5px; color:rgba(255,255,255,.28); letter-spacing:.06em; }

/* --------------------------------------------------------------
   23. SP FIXED CTA
   -------------------------------------------------------------- */
.spcta{
  position:fixed; inset:auto 0 0; z-index:900;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,4,14,.9); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.spcta.is-visible{ transform:translateY(0); }
@media (min-width:768px){ .spcta{ display:none; } }
.spcta__info{ flex:1; min-width:0; }
.spcta__date{ font-family:var(--f-display); font-size:20px; line-height:1.05; }
.spcta__date span{ font-family:var(--f-cond); font-size:11px; letter-spacing:.2em; color:var(--cyan); margin-left:5px; }
.spcta__price{ font-size:10.5px; color:var(--text-3); }
/* 開催日・料金の代わりにLINE登録の訴求文を表示。幅が狭いので2行を小さめのフォントで収める */
.spcta__line-note{ font-size:10px; line-height:1.5; font-weight:700; color:var(--text-2); letter-spacing:-.01em; }
.spcta__btn{ flex:none; padding:13px 18px; font-size:13px; white-space:nowrap; }

/* --------------------------------------------------------------
   23b. GALLERY LIGHTBOX
   -------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center; padding:20px;
  background:rgba(4,2,10,.92); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }
.lightbox__stage{
  max-width:min(1100px, 94vw); max-height:86vh;
  display:grid; place-items:center;
}
.lightbox__stage img,
.lightbox__stage video{
  max-width:min(1100px, 94vw); max-height:86vh;
  width:auto; height:auto; border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox__close{
  position:absolute; top:16px; right:16px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.06);
  transition:.3s var(--ease);
}
.lightbox__close::before,
.lightbox__close::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:1.6px; background:#fff;
}
.lightbox__close::before{ transform:rotate(45deg); }
.lightbox__close::after { transform:rotate(-45deg); }
.lightbox__close:hover{ background:var(--pink); border-color:var(--pink); }

/* --------------------------------------------------------------
   24. REVEAL
   -------------------------------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}