/* =====================================================
   $GYARU — Main Stylesheet  v3 GRAPHIC
   媚びない反逆。
   ===================================================== */

/* ---------- Variables — COLOR BOMB EDITION ---------- */
:root {
  --pink:     #FF2D78;
  --pink2:    #FF69B4;
  --lame:     #CC00FF;
  --gold:     #FFE600;
  --gold2:    #ADFF2F;
  --cyan:     #00FFE7;
  --green:    #39FF14;
  --orange:   #FF6B00;
  --blue:     #00BFFF;
  --bg:       #0a0018;
  --surface:  #12002a;
  --surface2: #1c0038;
  --white:    #FFF5FF;
  --muted:    #9a7aaa;

  --ff-disp:  'Bebas Neue', sans-serif;
  --ff-body:  'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  --ff-mono:  'Space Grotesk', monospace;

  --nav-h:    68px;
  --radius:   20px;
  --trans:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --content-w: 860px;

  /* グロー共通 — COLOR BOMB */
  --glow-pink: 0 0 20px rgba(255,45,120,0.8), 0 0 60px rgba(255,45,120,0.4);
  --glow-gold: 0 0 20px rgba(255,230,0,0.8),  0 0 60px rgba(255,230,0,0.35);
  --glow-lame: 0 0 20px rgba(204,0,255,0.7), 0 0 50px rgba(204,0,255,0.3);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--ff-body);
  line-height: 1.75;
  overflow-x: hidden;
}
/* COLOR BOMB コンフェッティ背景 */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle 2px at 10% 15%, rgba(255,45,120,0.4) 100%, transparent),
    radial-gradient(circle 3px at 25% 40%, rgba(0,255,231,0.4) 100%, transparent),
    radial-gradient(circle 2px at 50% 8%,  rgba(255,230,0,0.4) 100%, transparent),
    radial-gradient(circle 2px at 70% 25%, rgba(204,0,255,0.4) 100%, transparent),
    radial-gradient(circle 3px at 85% 60%, rgba(57,255,20,0.3) 100%, transparent),
    radial-gradient(circle 2px at 15% 70%, rgba(0,191,255,0.4) 100%, transparent),
    radial-gradient(circle 2px at 40% 85%, rgba(255,107,0,0.4) 100%, transparent),
    radial-gradient(circle 3px at 92% 30%, rgba(255,105,180,0.4) 100%, transparent),
    radial-gradient(circle 2px at 60% 65%, rgba(255,45,120,0.3) 100%, transparent),
    radial-gradient(circle 2px at 30% 55%, rgba(255,230,0,0.3) 100%, transparent);
  background-size: 180px 180px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  animation: bgShimmer 6s linear infinite alternate;
}
@keyframes bgShimmer {
  from { opacity: 0.25; }
  to   { opacity: 0.5; }
}
a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul  { list-style: none; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--pink), var(--gold), var(--cyan), var(--lame));
  border-radius: 4px;
}

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

/* ---------- Glitter Canvas ---------- */
#glitter-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.6;
}

/* ---------- カスタムカーソル ---------- */
#cursor-glow {
  position: fixed;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,45,120,0.12) 0%,
    rgba(200,160,255,0.06) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}


/* =====================================================
   NAVIGATION
   ===================================================== */
#navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9000;
  height: var(--nav-h);
  background: rgba(10,0,24,0.92);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan), var(--lame), var(--pink)) 1;
  backdrop-filter: blur(16px);
  transition: background var(--trans), box-shadow var(--trans);
}
#navbar.scrolled {
  background: rgba(10,0,24,0.97);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px);
}
.nav-logo {
  font-family: var(--ff-disp);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan), var(--lame), var(--pink));
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 3s linear infinite;
}
@keyframes rainbowShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes logoShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.nav-links {
  display: flex; gap: 2.2rem; align-items: center;
}
.nav-link {
  font-family: var(--ff-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,245,255,0.6);
  transition: color var(--trans), text-shadow var(--trans);
  position: relative;
}
.nav-link::before {
  content: '♥';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  color: var(--pink);
  opacity: 0;
  transition: opacity var(--trans);
}
.nav-link::after {
  display: none;
}
.nav-link:hover,
.nav-link.active {
  color: var(--white);
  text-shadow: 0 0 10px var(--pink), 0 0 20px rgba(255,45,120,0.5);
}
.nav-link:hover::before,
.nav-link.active::before { opacity: 1; }

/* モバイルトグル */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  padding: 6px; cursor: pointer; background: none; border: none;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan));
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
  box-shadow: 0 0 6px rgba(255,45,120,0.5);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none; flex-direction: column;
  background: rgba(10,0,24,0.98);
  backdrop-filter: blur(24px);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan), var(--lame)) 1;
  padding: 16px 0;
}
.nav-mobile.open { display: flex; }
.nav-mobile-link {
  font-family: var(--ff-body);
  font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,245,255,0.7);
  padding: 14px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid rgba(255,45,120,0.1);
  transition: color var(--trans), background var(--trans), padding-left var(--trans);
}
.nav-mobile-link:hover {
  color: var(--white);
  text-shadow: 0 0 10px var(--pink);
  padding-left: calc(clamp(20px, 4vw, 48px) + 10px);
  background: rgba(255,45,120,0.07);
}

@media (max-width: 768px) {
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }
}


/* =====================================================
   HERO SECTION
   ===================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}

/* Pinterest風モザイク背景 */
.hero-bg-mosaic {
  position: absolute; inset: 0;
  display: flex; gap: 8px;
  overflow: hidden; z-index: 0;
}
.mosaic-col {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
  animation: mosaicScroll 35s linear infinite;
}
.mosaic-col.offset {
  animation-delay: -17.5s;
  margin-top: -180px;
}
@keyframes mosaicScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.mosaic-col img {
  width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center center;
  border-radius: 12px;
  opacity: 0.28;
  filter: saturate(2.2) contrast(1.15) brightness(0.75) hue-rotate(10deg);
  transition: opacity 1s;
}

/* 多層グラデーションオーバーレイ — COLOR BOMB */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%,
      rgba(10,0,24,0.82) 0%,
      rgba(10,0,24,0.35) 55%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(10,0,24,0.45) 0%,
      rgba(10,0,24,0.2) 40%,
      rgba(10,0,24,0.7) 100%),
    radial-gradient(ellipse 50% 50% at 80% 20%,
      rgba(0,255,231,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 70%,
      rgba(255,45,120,0.1) 0%, transparent 60%);
}

/* ヒーローコンテンツ */
.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 clamp(20px, 6vw, 60px);
  max-width: 900px;
  display: flex; flex-direction: column;
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--ff-body);
  font-size: clamp(0.65rem, 1.6vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255,230,0,0.7);
  margin-bottom: 22px;
  position: relative;
}
/* eyebrowの左右ライン */
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  position: absolute; top: 50%;
  width: clamp(20px, 4vw, 60px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--lame));
  opacity: 0.4;
}
.hero-eyebrow::before { right: calc(100% + 12px); }
.hero-eyebrow::after  { left:  calc(100% + 12px); transform: scaleX(-1); }

/* メインタイトル */
.hero-title {
  font-family: var(--ff-disp);
  font-size: clamp(6rem, 22vw, 17rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
  position: relative;
}
.hero-title .dollar {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(255,230,0,0.9));
  animation: dollarPop 2s ease-in-out infinite;
  display: inline-block;
}
.hero-title .brand {
  background: linear-gradient(90deg, var(--pink), var(--cyan), var(--lame), var(--pink));
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 2s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,45,120,0.5));
  display: inline-block;
}
@keyframes dollarPop {
  0%,100% { filter: drop-shadow(0 0 24px rgba(255,230,0,0.9)); }
  50% { filter: drop-shadow(0 0 48px rgba(255,230,0,1)) drop-shadow(0 0 80px rgba(255,107,0,0.6)); }
}
@keyframes shimmer {
  from { text-shadow: 0 0 25px rgba(255,230,0,0.6), 0 0 60px rgba(255,230,0,0.2); }
  to   { text-shadow: 0 0 50px rgba(255,230,0,1), 0 0 120px rgba(255,230,0,0.5); }
}
@keyframes flamepulse {
  0%,100% { filter: drop-shadow(0 0 25px rgba(255,45,120,0.6)); }
  50%     { filter: drop-shadow(0 0 60px rgba(255,45,120,1)); }
}

/* サブタイトル */
.hero-sub {
  font-family: var(--ff-body);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  color: rgba(255,245,255,0.92);
  line-height: 2.2;
  font-weight: 700;
  margin-bottom: 32px;
  text-shadow: 0 0 10px rgba(255,45,120,0.45);
}

/* タグ */
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}
.hero-tags span {
  font-family: var(--ff-body);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  border-radius: 999px; padding: 6px 16px;
  border: 2px solid;
  transition: all var(--trans);
  cursor: default;
}
.hero-tags span:nth-child(1) { color: var(--pink);   border-color: var(--pink);   background: rgba(255,45,120,0.08); }
.hero-tags span:nth-child(2) { color: var(--gold);   border-color: var(--gold);   background: rgba(255,230,0,0.08); }
.hero-tags span:nth-child(3) { color: var(--cyan);   border-color: var(--cyan);   background: rgba(0,255,231,0.08); }
.hero-tags span:nth-child(4) { color: var(--lame);   border-color: var(--lame);   background: rgba(204,0,255,0.08); }
.hero-tags span:nth-child(5) { color: var(--green);  border-color: var(--green);  background: rgba(57,255,20,0.08); }
.hero-tags span:nth-child(6) { color: var(--orange); border-color: var(--orange); background: rgba(255,107,0,0.08); }
.hero-tags span:hover { transform: scale(1.1) rotate(-2deg); box-shadow: 0 0 14px currentColor; }

/* CTA */
.hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}

/* スクロールヒント */
.hero-scroll {
  position: absolute; bottom: 30px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-mono);
  font-size: 0.62rem; letter-spacing: 0.4em;
  color: rgba(255,245,248,0.3);
  z-index: 2;
  animation: bounce 2.2s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.3; }
  50%     { transform: translateX(-50%) translateY(8px); opacity: 0.7; }
}


/* ---------- Buttons — COLOR BOMB ---------- */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-body);
  font-size: 0.9rem; font-weight: 900;
  letter-spacing: 0.1em; color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--lame));
  border: none; border-radius: 999px;
  padding: 14px 36px; cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans);
  box-shadow: 0 4px 24px rgba(255,45,120,0.45), 0 0 0 3px rgba(255,45,120,0.15);
  position: relative; overflow: hidden;
}
.btn-primary:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 8px 32px rgba(255,45,120,0.65), 0 0 0 5px rgba(255,45,120,0.2);
}

.btn-ghost {
  display: inline-flex; align-items: center;
  font-family: var(--ff-body);
  font-size: 0.9rem; font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--cyan);
  background: transparent;
  border: 2px solid var(--cyan); border-radius: 999px;
  padding: 12px 32px; cursor: pointer;
  transition: all var(--trans);
  box-shadow: 0 0 12px rgba(0,255,231,0.2);
}
.btn-ghost:hover {
  background: rgba(0,255,231,0.1);
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0,255,231,0.45);
}

.btn-manifesto {
  display: inline-flex; align-items: center;
  font-family: var(--ff-body);
  font-size: 0.9rem; font-weight: 900;
  letter-spacing: 0.1em; color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--lame));
  border-radius: 999px;
  padding: 16px 44px; cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans);
  animation: manifestoPulse 2.5s ease-in-out infinite alternate;
  position: relative; overflow: hidden;
}
.btn-manifesto::after {
  content: '';
  position: absolute; inset: -2px;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan), var(--lame), var(--pink));
  background-size: 400% 400%;
  border-radius: 999px;
  z-index: -1;
  animation: borderSpin 3s linear infinite;
  filter: blur(6px);
}
@keyframes borderSpin {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
.btn-manifesto:hover { transform: translateY(-3px) scale(1.03); }
@keyframes manifestoPulse {
  from { box-shadow: 0 0 20px rgba(255,45,120,0.4), 0 0 40px rgba(255,45,120,0.1); }
  to   { box-shadow: 0 0 50px rgba(255,45,120,0.8), 0 0 90px rgba(204,0,255,0.35); }
}


/* =====================================================
   DIVIDER — セクション区切りライン COLOR BOMB
   ===================================================== */
.section-divider {
  width: 100%; height: 4px;
  background: linear-gradient(90deg,
    var(--pink), var(--orange), var(--gold),
    var(--green), var(--cyan), var(--blue),
    var(--lame), var(--pink));
  background-size: 200%;
  animation: rainbowShift 3s linear infinite;
  position: relative;
}
.section-divider::before {
  content: '♥';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem; color: #fff;
  background: var(--bg);
  padding: 0 12px;
  text-shadow: 0 0 8px var(--pink);
}


/* =====================================================
   MARQUEE — マーキーテッカー COLOR BOMB
   ===================================================== */
.marquee-wrapper {
  overflow: hidden;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--gold), var(--green), var(--cyan), var(--blue), var(--lame), var(--pink));
  background-size: 200%;
  animation: rainbowShift 4s linear infinite;
  padding: 10px 0;
  position: relative; z-index: 2;
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 18s linear infinite;
}
.marquee-track span {
  white-space: nowrap;
  font-family: var(--ff-body);
  font-size: 0.85rem; font-weight: 900;
  letter-spacing: 0.25em;
  color: #fff;
  padding-right: 20px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.marquee-track span em {
  color: #fff;
  font-style: normal;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* =====================================================
   SECTION COMMONS
   ===================================================== */
.gallery-section,
.nft-section,
.team-section,
.manifesto-cta-section {
  padding-top: 120px;
  padding-bottom: 100px;
}

.section-header {
  text-align: center;
  max-width: var(--content-w); margin: 0 auto 72px;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* ラベル — COLOR BOMB */
.section-label {
  font-family: var(--ff-body);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  display: block; margin-bottom: 20px;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
.section-label::before,
.section-label::after {
  content: '♥';
  font-family: var(--ff-body);
  background: none;
  -webkit-text-fill-color: var(--pink);
  color: var(--pink);
  margin: 0 10px;
  opacity: 0.7;
}

/* タイトル */
.section-title {
  font-family: var(--ff-disp);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--white);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  filter: drop-shadow(0 0 18px rgba(255,45,120,0.4));
}

.title-en {
  font-family: var(--ff-body);
  font-size: clamp(0.6rem, 1.4vw, 0.78rem);
  letter-spacing: 0.3em;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.85;
  filter: none;
}

.section-desc {
  margin-top: 24px;
  font-size: clamp(0.88rem, 1.8vw, 1rem);
  color: var(--muted); line-height: 2.1;
  max-width: 560px;
  margin-left: auto; margin-right: auto;
  text-align: center;
}

/* 本文段落は左寄せ — 読ませる部分 */
.section-desc--left {
  text-align: left;
  margin-top: 0;
  margin-bottom: 14px;
  padding-left: 1em;
  border-left: 3px solid var(--pink);
  box-shadow: inset -2px 0 8px rgba(255,45,120,0.1);
}
/* セクションタイトル直後の最初の左寄せ段落に上余白 */
.section-title + .section-desc--left,
.section-title ~ .section-desc--left:first-of-type {
  margin-top: 28px;
}
/* 最後の左寄せ段落の下余白をゼロに */
.section-desc--left:last-child {
  margin-bottom: 0;
}

/* Scroll Reveal */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }


/* =====================================================
   GALLERY SECTION
   ===================================================== */
.gallery-section {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,45,120,0.05) 0%, transparent 60%),
    var(--bg);
}

.gallery-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  padding: 0 clamp(20px, 4vw, 48px);
  margin-bottom: 52px;
}
.filter-btn {
  font-family: var(--ff-mono);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(154,122,138,0.8);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px; padding: 9px 22px;
  cursor: pointer; transition: all var(--trans);
}
.filter-btn:hover {
  color: var(--white);
  border-color: rgba(255,45,120,0.35);
  background: rgba(255,45,120,0.05);
}
.filter-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), #c0006a);
  border-color: var(--pink);
  box-shadow: 0 0 20px rgba(255,45,120,0.4),
              inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Masonryグリッド */
.masonry-grid {
  columns: 4; column-gap: 12px;
  padding: 0 clamp(16px, 3vw, 40px);
}
@media (max-width: 1200px) { .masonry-grid { columns: 3; } }
@media (max-width: 768px)  { .masonry-grid { columns: 2; } }
@media (max-width: 480px)  { .masonry-grid { columns: 2; column-gap: 8px; } }

.masonry-item {
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  border: 1px solid rgba(255,45,120,0.06);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  position: relative;
}
.masonry-item:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 20px 60px rgba(255,45,120,0.3),
    0 0 0 1px rgba(255,45,120,0.25),
    0 0 40px rgba(255,45,120,0.08) inset;
  border-color: rgba(255,45,120,0.3);
  z-index: 2;
}

/* tall / wide は 4:5 に統一（クラスがあっても上書きしない） */
.masonry-item.tall .masonry-img-wrap,
.masonry-item.wide .masonry-img-wrap { aspect-ratio: 4 / 5; }

.masonry-img-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
}
.masonry-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.55s ease, filter 0.55s ease;
}
.masonry-item:hover .masonry-img-wrap img {
  transform: scale(1.08);
  filter: brightness(1.08) saturate(1.2) contrast(1.05);
}

.masonry-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,45,120,0.15) 0%,
    rgba(200,160,255,0.1) 100%
  );
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--trans);
}
.masonry-item:hover .masonry-overlay { opacity: 1; }
.masonry-icon {
  font-size: 1.8rem; color: #fff;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.9));
  animation: iconPop 0.3s ease;
}
@keyframes iconPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.masonry-info {
  padding: 10px 14px 14px;
  background: linear-gradient(
    to bottom,
    var(--surface) 0%,
    rgba(18,0,16,0.8) 100%
  );
}
.masonry-cat {
  font-family: var(--ff-mono);
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.24em; color: var(--pink);
  display: block; margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(255,45,120,0.4);
}
.masonry-ttl {
  font-size: 0.8rem; font-weight: 700;
  color: var(--white); line-height: 1.4;
}

.masonry-item.hidden { display: none; }

/* もっと見るボタン */
.gallery-more { text-align: center; margin-top: 52px; }
.btn-load-more {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--lame);
  background: rgba(200,160,255,0.04);
  border: 1px solid rgba(200,160,255,0.18);
  border-radius: 999px; padding: 13px 34px; cursor: pointer;
  transition: all var(--trans);
}
.btn-load-more:hover {
  color: var(--white); border-color: var(--lame);
  background: rgba(200,160,255,0.1);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(200,160,255,0.2);
}

/* 無限スクロール センチネル & スピナー */
#inf-sentinel {
  width: 100%;
  height: 1px;
  margin-top: 40px;
}

.inf-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 40px 0 60px;
}
.inf-spinner[hidden] { display: none; }
.inf-spinner span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255,45,120,0.6);
  animation: spinnerBounce 1.2s ease-in-out infinite;
}
.inf-spinner span:nth-child(2) { background: var(--lame);  box-shadow: 0 0 10px rgba(200,160,255,0.6); animation-delay: 0.2s; }
.inf-spinner span:nth-child(3) { background: var(--gold);  box-shadow: 0 0 10px rgba(255,215,0,0.6);   animation-delay: 0.4s; }
@keyframes spinnerBounce {
  0%,80%,100% { transform: scale(0.6); opacity: 0.4; }
  40%         { transform: scale(1.2); opacity: 1; }
}

/* もっと見るボタン（非表示化・後方互換用） */
.gallery-more { display: none; }

/* ライトボックス */
.lightbox {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: lbFade 0.2s ease;
}
.lightbox.hidden { display: none; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.lightbox-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.93);
  backdrop-filter: blur(16px);
  cursor: pointer;
}
.lightbox-inner {
  position: relative; z-index: 1;
  max-width: 880px; width: 100%;
  background: var(--surface2);
  border: 1px solid rgba(255,45,120,0.3);
  border-radius: 22px; overflow: hidden;
  box-shadow:
    0 0 100px rgba(255,45,120,0.25),
    0 0 0 1px rgba(255,45,120,0.1);
  animation: lbSlide 0.28s ease;
}
@keyframes lbSlide {
  from { transform: translateY(28px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.lightbox-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,45,120,0.18);
  border: 1px solid rgba(255,45,120,0.35);
  color: #fff; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: all var(--trans);
}
.lightbox-close:hover {
  background: rgba(255,45,120,0.55);
  box-shadow: 0 0 16px rgba(255,45,120,0.5);
}
.lightbox-img {
  width: 100%; max-height: 68vh;
  object-fit: contain; display: block;
  background: #050010;
}
.lightbox-meta {
  padding: 16px 24px 22px; text-align: left;
  border-top: 1px solid rgba(255,45,120,0.1);
}
.lightbox-cat {
  font-family: var(--ff-mono);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.24em; color: var(--pink);
  display: block; margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(255,45,120,0.4);
}
.lightbox-ttl {
  font-size: 1rem; font-weight: 700; color: var(--white);
}


/* =====================================================
   NFT SECTION
   ===================================================== */
.nft-section {
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%,
      rgba(200,160,255,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 10% 80%,
      rgba(255,45,120,0.04) 0%, transparent 60%),
    var(--surface);
  position: relative; overflow: hidden;
  padding-bottom: 120px;
}
.nft-section .section-header {
  margin-bottom: 50px;
}
/* NFTセクション: タイトルを1行に収める */
.nft-section .section-title {
  font-size: clamp(2.4rem, 5.6vw, 4.5rem);
  white-space: nowrap;
}
.nft-section::before {
  content: 'NFT';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-disp);
  font-size: clamp(10rem, 25vw, 22rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,45,120,0.04);
  pointer-events: none; user-select: none;
  letter-spacing: 0.1em;
}

.nft-coming-wrap {
  position: relative;
  max-width: 980px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

.nft-bg-visual { opacity: 0.28; pointer-events: none; }
.nft-card-preview {
  display: flex; gap: 20px;
  justify-content: center; align-items: flex-end;
  min-height: 520px;
}
.nft-prev-card {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255,45,120,0.2);
  background: var(--surface2);
  flex-shrink: 0;
}
.nft-prev-card img {
  width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: center center;
  display: block;
}
.nft-prev-card.c1 { width: 200px; transform: rotate(-4deg) translateY(10px); }
.nft-prev-card.c2 { width: 250px; }
.nft-prev-card.c3 { width: 200px; transform: rotate(4deg) translateY(10px); }
.nft-prev-info {
  font-family: var(--ff-mono);
  font-size: 0.6rem; color: var(--muted);
  text-align: center; padding: 8px 10px;
}

.nft-coming-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.nft-coming-box {
  background: rgba(6,0,13,0.45);
  backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,45,120,0.35);
  border-radius: 24px;
  padding: clamp(36px, 6vw, 64px) clamp(28px, 6vw, 68px) clamp(60px, 8vw, 100px);
  text-align: center;
  box-shadow:
    0 0 80px rgba(255,45,120,0.15),
    0 0 0 1px rgba(255,45,120,0.08),
    inset 0 1px 0 rgba(255,255,255,0.04);
  max-width: 500px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  position: relative; overflow: hidden;
}
/* ボックス上部グローライン */
.nft-coming-box::before {
  content: '';
  position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--lame), var(--pink), transparent);
  box-shadow: 0 0 10px rgba(255,45,120,0.6);
}

.nft-coming-label {
  font-family: var(--ff-mono);
  font-size: 0.66rem; letter-spacing: 0.4em;
  color: var(--lame); margin-bottom: 16px;
  text-shadow: 0 0 10px rgba(200,160,255,0.5);
}
.nft-coming-title {
  font-family: var(--ff-disp);
  font-size: clamp(3rem, 9vw, 5.5rem);
  color: var(--pink); line-height: 1;
  text-shadow: var(--glow-pink);
  margin-bottom: 14px;
  animation: flamepulse 3s ease-in-out infinite;
}
.nft-coming-date {
  font-family: var(--ff-mono);
  font-size: clamp(0.72rem, 1.8vw, 0.9rem);
  color: var(--gold); letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(255,215,0,0.4);
  margin-bottom: 28px;
}
.nft-countdown {
  display: flex; align-items: center;
  justify-content: center; gap: 8px;
  margin-bottom: 28px;
}
.countdown-unit {
  display: flex; flex-direction: column; align-items: center;
  min-width: 54px;
  background: rgba(255,45,120,0.07);
  border: 1px solid rgba(255,45,120,0.15);
  border-radius: 12px; padding: 12px 8px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.countdown-unit span {
  font-family: var(--ff-disp);
  font-size: clamp(1.6rem, 4.5vw, 2.5rem);
  color: var(--white); line-height: 1;
  text-shadow: 0 0 15px rgba(255,45,120,0.3);
}
.countdown-unit small {
  font-family: var(--ff-mono);
  font-size: 0.5rem; letter-spacing: 0.18em;
  color: var(--muted); margin-top: 5px;
}
.countdown-sep {
  font-family: var(--ff-disp);
  font-size: 1.8rem; color: var(--pink);
  opacity: 0.5; margin-bottom: 16px;
  animation: sepBlink 1.2s ease-in-out infinite;
}
@keyframes sepBlink {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 0.15; }
}
.nft-coming-desc {
  font-size: 0.75rem; color: var(--muted);
  line-height: 1.8; margin-bottom: 8px; text-align: center;
}
.nft-coming-desc:last-of-type {
  margin-bottom: 30px;
}
.btn-notify {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--lame));
  border: none; border-radius: 999px;
  padding: 13px 32px; cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans);
  box-shadow: 0 4px 24px rgba(255,45,120,0.35);
}
.btn-notify:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(255,45,120,0.6);
}
.btn-notify.notified {
  background: linear-gradient(135deg, #2a2a2a, #444);
  box-shadow: none; cursor: default;
}


/* =====================================================
   TEAM SECTION
   ===================================================== */
.team-section {
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%,
      rgba(200,160,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%,
      rgba(255,45,120,0.04) 0%, transparent 60%),
    var(--bg);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* カード：中央揃えで縦スタック */
.team-card {
  background:
    linear-gradient(145deg, rgba(24,0,40,0.8) 0%, rgba(14,0,24,0.9) 100%);
  border: 1px solid rgba(255,45,120,0.1);
  border-radius: 24px;
  padding: 38px 28px 32px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 0;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  position: relative; overflow: hidden;
  backdrop-filter: blur(4px);
}
/* カード内装飾 — 斜め背景ライン */
.team-card::after {
  content: '';
  position: absolute; top: -40%; right: -20%;
  width: 70%; height: 120%;
  background: linear-gradient(135deg,
    transparent 40%,
    rgba(255,45,120,0.025) 50%,
    transparent 60%);
  pointer-events: none;
}
.team-card::before {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,45,120,0.4), rgba(200,160,255,0.4), transparent);
  opacity: 0; transition: opacity var(--trans);
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(255,45,120,0.12),
    0 0 0 1px rgba(255,45,120,0.2),
    0 0 40px rgba(200,160,255,0.04) inset;
  border-color: rgba(255,45,120,0.25);
}
.team-card:hover::before { opacity: 1; }

/* アバター */
.team-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem;
  border: 1.5px solid rgba(255,45,120,0.25);
  margin-bottom: 20px; flex-shrink: 0;
  position: relative;
}
/* アバターグローリング */
.team-avatar::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255,45,120,0.15);
  animation: avatarRing 3s ease-in-out infinite alternate;
}
@keyframes avatarRing {
  from { opacity: 0.3; transform: scale(1); }
  to   { opacity: 0.7; transform: scale(1.06); }
}
.av1 { background: radial-gradient(circle, rgba(255,215,0,0.2),   rgba(255,45,120,0.1)); }
.av2 { background: radial-gradient(circle, rgba(200,160,255,0.22),rgba(0,255,231,0.08)); }
.av3 { background: radial-gradient(circle, rgba(0,255,231,0.16),  rgba(200,160,255,0.1)); }
.av4 { background: radial-gradient(circle, rgba(255,120,50,0.2),  rgba(255,45,120,0.1)); }
.av5 { background: radial-gradient(circle, rgba(255,215,0,0.16),  rgba(0,191,255,0.1)); }

.team-info {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.team-name {
  font-family: var(--ff-mono);
  font-size: 0.92rem; font-weight: 700;
  color: var(--white); letter-spacing: 0.07em;
  margin-bottom: 7px;
}
.team-role {
  font-family: var(--ff-mono);
  font-size: 0.62rem; color: var(--pink);
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(255,45,120,0.35);
  margin-bottom: 18px;
}
.team-bio {
  font-size: 0.82rem; color: var(--muted);
  line-height: 1.95; margin-bottom: 18px;
}
.team-tags {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.team-tags span {
  font-family: var(--ff-mono);
  font-size: 0.58rem; color: var(--lame);
  background: rgba(200,160,255,0.06);
  border: 1px solid rgba(200,160,255,0.14);
  border-radius: 999px; padding: 3px 10px;
  transition: all var(--trans);
}
.team-card:hover .team-tags span {
  border-color: rgba(200,160,255,0.28);
  background: rgba(200,160,255,0.1);
}


/* =====================================================
   MANIFESTO CTA SECTION
   ===================================================== */
.manifesto-cta-section {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(255,45,120,0.1) 0%,
      rgba(0,255,231,0.04) 50%,
      transparent 100%),
    var(--surface);
  border-top:    4px solid transparent;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan), var(--lame), var(--pink)) 1;
  position: relative; overflow: hidden;
}
/* 大型背景テキスト */
.manifesto-cta-section::before {
  content: '$GYARU';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-disp);
  font-size: clamp(5rem, 14vw, 12rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,45,120,0.05);
  pointer-events: none; user-select: none;
  letter-spacing: 0.05em; white-space: nowrap;
}

.manifesto-cta-inner {
  max-width: var(--content-w); margin: 0 auto;
  text-align: center;
  padding: 0 clamp(20px, 6vw, 60px);
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  position: relative; z-index: 1;
}
.manifesto-cta-label {
  font-family: var(--ff-body);
  font-size: 0.66rem; letter-spacing: 0.4em;
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 22px;
}
.manifesto-cta-title {
  font-family: var(--ff-disp);
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.05; color: var(--white);
  filter: drop-shadow(0 0 20px rgba(255,45,120,0.4));
  margin-bottom: 24px;
}
.manifesto-cta-body {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--muted); line-height: 2.1;
  max-width: 500px; margin-bottom: 12px;
  text-align: center;
}

/* 本文左寄せバリエーション */
.manifesto-cta-body--left {
  text-align: left;
  padding-left: 1.1em;
  border-left: 2px solid rgba(255,45,120,0.25);
  margin-bottom: 16px;
  width: 100%;
  max-width: 480px;
}
.manifesto-cta-body--left:last-child {
  margin-bottom: 40px;
}

/* 2000年代カリスマ語録ブロック */
.manifesto-legacy-quotes {
  margin-bottom: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.legacy-quote {
  background: rgba(255,45,120,0.04);
  border-left: 3px solid var(--pink);
  border-radius: 0 12px 12px 0;
  padding: 18px 28px;
  max-width: 480px;
  text-align: left;
  position: relative;
}
.legacy-quote::before {
  content: '\201C';
  position: absolute; top: -10px; left: 12px;
  font-family: var(--ff-disp);
  font-size: 4rem; color: var(--pink);
  opacity: 0.2; line-height: 1;
}
.legacy-quote p {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: rgba(255,245,248,0.85);
  line-height: 2.0;
  font-style: italic;
  margin-bottom: 10px;
}
.legacy-quote cite {
  font-family: var(--ff-mono);
  font-size: 0.6rem; letter-spacing: 0.15em;
  color: var(--muted);
  font-style: normal;
  display: block;
}
.legacy-brands {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; justify-content: center;
}
.legacy-brands span {
  font-family: var(--ff-mono);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.legacy-brands .lq-sep {
  color: rgba(255,215,0,0.3);
  font-size: 0.5rem;
}


/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
  background:
    linear-gradient(to bottom, var(--surface) 0%, #04000f 100%);
  padding: 64px clamp(20px, 4vw, 48px) 48px;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--pink), var(--orange), var(--gold), var(--green), var(--cyan), var(--blue), var(--lame), var(--pink)) 1;
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--pink), var(--gold), var(--cyan), var(--lame), transparent);
  filter: blur(3px); opacity: 0.5;
}

.footer-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 0;
}
.footer-logo {
  font-family: var(--ff-disp);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan), var(--lame), var(--pink));
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 3s linear infinite;
  filter: drop-shadow(0 0 14px rgba(255,45,120,0.5));
  margin-bottom: 32px;
}
.footer-nav {
  display: flex; gap: 28px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 24px;
}
.footer-nav a {
  font-family: var(--ff-mono);
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--muted);
  transition: color var(--trans), text-shadow var(--trans);
}
.footer-nav a:hover {
  color: var(--pink);
  text-shadow: 0 0 10px rgba(255,45,120,0.4);
}
.footer-tags {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 28px;
}
.footer-tags span {
  font-family: var(--ff-mono);
  font-size: 0.6rem; letter-spacing: 0.07em;
  color: rgba(154,122,138,0.45);
}
.footer-copy {
  font-size: 0.65rem; letter-spacing: 0.12em;
  color: rgba(154,122,138,0.35);
}


/* =====================================================
   DREAM COLLAB SECTION — $GYARU × 4 SOULS
   ===================================================== */

/* ---------- セクション全体 ---------- */
.collab-section {
  padding-top: 120px;
  padding-bottom: 100px;
  position: relative;
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%,  rgba(255,45,120,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 10% 80%, rgba(255,140,0,0.04)  0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 60%, rgba(200,160,255,0.04) 0%, transparent 60%),
    var(--bg);
}
/* 背景装飾テキスト */
.collab-section::before {
  content: 'DREAM COLLAB';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-disp);
  font-size: clamp(4rem, 12vw, 10rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,45,120,0.03);
  pointer-events: none; user-select: none;
  letter-spacing: 0.06em; white-space: nowrap;
}

/* ---------- DREAM COLLAB セクションヘッダー内の本文段落グループ ---------- */
.collab-section .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.collab-section .section-header .section-desc--left {
  width: 100%;
  max-width: 560px;
  align-self: center;
}

/* ---------- MANIFESTO CTA 内の本文グループ ---------- */
.manifesto-cta-inner .manifesto-cta-body--left {
  max-width: 480px;
  width: 100%;
  align-self: center;
}

/* ---------- セクションラベル特別スタイル ---------- */
.collab-label {
  background: linear-gradient(90deg, var(--gold), var(--pink), var(--lame));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: logoShift 3s ease infinite;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.3));
}
.collab-label::before,
.collab-label::after {
  content: '✦' !important;
  background: none !important;
  -webkit-text-fill-color: rgba(255,215,0,0.5) !important;
  color: rgba(255,215,0,0.5) !important;
}

/* ---------- セクションタイトル特別スタイル ---------- */
.collab-title {
  background: linear-gradient(135deg, var(--white) 20%, var(--pink) 55%, var(--gold) 90%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.1 !important;
}
.collab-title .title-en {
  -webkit-text-fill-color: initial;
  color: var(--lame);
  opacity: 0.6;
}

/* ---------- コレクションタイトルプレート ---------- */
.collab-title-plate {
  max-width: 860px; margin: 0 auto 72px;
  padding: 0 clamp(20px, 4vw, 48px);
}
.collab-plate-inner {
  border: 1px solid rgba(255,215,0,0.22);
  border-radius: 16px;
  padding: 22px 32px;
  text-align: center;
  background: rgba(255,215,0,0.03);
  position: relative;
  backdrop-filter: blur(6px);
}
.collab-plate-inner::before,
.collab-plate-inner::after {
  content: '';
  position: absolute; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent);
}
.collab-plate-inner::before { top: 0; }
.collab-plate-inner::after  { bottom: 0; }

.collab-season {
  font-family: var(--ff-mono);
  font-size: 0.6rem; letter-spacing: 0.3em;
  color: rgba(255,215,0,0.55);
  display: block; margin-bottom: 8px;
}
.collab-plate-name {
  font-family: var(--ff-disp);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, var(--gold), var(--pink), var(--lame));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: logoShift 4s ease infinite;
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.25));
  margin-bottom: 10px;
}
.collab-plate-sub {
  font-family: var(--ff-mono);
  font-size: 0.62rem; letter-spacing: 0.22em;
  color: rgba(255,245,248,0.4);
}

/* ---------- 4コレクションのグリッド ---------- */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1120px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
@media (max-width: 860px) { .collab-grid { grid-template-columns: 1fr; } }

/* ---------- コレクションカード 共通 ---------- */
.collab-card {
  border-radius: 28px;
  padding: 0;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
  cursor: default;
  border: 1px solid transparent;
}
.collab-card:hover {
  transform: translateY(-10px) scale(1.015);
}

/* カード内コンテンツ（テクスチャの上に乗る） */
.collab-card > *:not(.cb-texture) {
  position: relative; z-index: 1;
}

/* ---------- テクスチャオーバーレイ ---------- */
.cb-texture {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* ① REBEL BEAST — 豹柄テクスチャ */
.cb-leopard {
  background:
    radial-gradient(ellipse 12px 8px  at 12% 18%, rgba(255,140,0,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 8px  11px at 28% 8%,  rgba(255,80,0,0.25)  0%, transparent 70%),
    radial-gradient(ellipse 10px 7px  at 55% 22%, rgba(255,140,0,0.3)  0%, transparent 70%),
    radial-gradient(ellipse 7px  9px  at 78% 12%, rgba(200,60,0,0.25)  0%, transparent 70%),
    radial-gradient(ellipse 11px 7px  at 5%  55%, rgba(255,140,0,0.3)  0%, transparent 70%),
    radial-gradient(ellipse 9px  12px at 40% 48%, rgba(255,80,0,0.2)   0%, transparent 70%),
    radial-gradient(ellipse 8px  8px  at 88% 50%, rgba(255,140,0,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 10px 6px  at 20% 82%, rgba(200,60,0,0.25)  0%, transparent 70%),
    radial-gradient(ellipse 7px  10px at 65% 78%, rgba(255,140,0,0.3)  0%, transparent 70%),
    radial-gradient(ellipse 12px 8px  at 90% 88%, rgba(255,80,0,0.2)   0%, transparent 70%),
    linear-gradient(145deg, rgba(40,8,0,0.9) 0%, rgba(20,0,5,0.95) 100%);
}

/* ② SUGAR RIOT — コンフェッティ風カラフル */
.cb-confetti {
  background:
    radial-gradient(circle 6px  at 8%  15%, rgba(255,105,180,0.4) 0%, transparent 70%),
    radial-gradient(circle 4px  at 25% 5%,  rgba(0,229,255,0.35)  0%, transparent 70%),
    radial-gradient(circle 7px  at 50% 20%, rgba(173,255,47,0.3)  0%, transparent 70%),
    radial-gradient(circle 5px  at 75% 10%, rgba(255,215,0,0.4)   0%, transparent 70%),
    radial-gradient(circle 6px  at 90% 25%, rgba(255,105,180,0.35)0%, transparent 70%),
    radial-gradient(circle 4px  at 15% 50%, rgba(0,229,255,0.3)   0%, transparent 70%),
    radial-gradient(circle 8px  at 45% 60%, rgba(255,105,180,0.35)0%, transparent 70%),
    radial-gradient(circle 5px  at 80% 55%, rgba(173,255,47,0.3)  0%, transparent 70%),
    radial-gradient(circle 6px  at 30% 80%, rgba(255,215,0,0.35)  0%, transparent 70%),
    radial-gradient(circle 4px  at 70% 85%, rgba(0,229,255,0.3)   0%, transparent 70%),
    radial-gradient(circle 7px  at 95% 75%, rgba(255,105,180,0.3) 0%, transparent 70%),
    linear-gradient(145deg, rgba(30,0,28,0.88) 0%, rgba(10,0,14,0.94) 100%);
}

/* ③ VELVET BLOOM — 花・ベルベット風 */
.cb-floral {
  background:
    radial-gradient(ellipse 40px 40px at 15% 20%, rgba(200,160,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 30px 30px at 80% 15%, rgba(255,105,180,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 50px 50px at 50% 60%, rgba(200,160,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 35px 35px at 90% 75%, rgba(155,89,182,0.16)  0%, transparent 70%),
    radial-gradient(ellipse 25px 25px at 10% 80%, rgba(255,105,180,0.15) 0%, transparent 70%),
    linear-gradient(145deg, rgba(28,0,40,0.9) 0%, rgba(15,0,22,0.95) 100%);
}

/* ④ NOIR DOLL — ダーク・シルバーグリッド */
.cb-dark {
  background:
    repeating-linear-gradient(0deg,   transparent, transparent 30px, rgba(192,192,192,0.03) 30px, rgba(192,192,192,0.03) 31px),
    repeating-linear-gradient(90deg,  transparent, transparent 30px, rgba(192,192,192,0.03) 30px, rgba(192,192,192,0.03) 31px),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(61,0,61,0.35) 0%, transparent 65%),
    linear-gradient(145deg, rgba(15,0,18,0.95) 0%, rgba(5,0,8,0.98) 100%);
}

/* ---------- ディレクターNO ---------- */
.cb-dir-no {
  font-family: var(--ff-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  opacity: 0.45;
  padding: 26px 32px 0;
  user-select: none;
}

/* ---------- デザイン仕様ブロック ---------- */
.cb-spec-block {
  padding: 0 32px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cb-spec-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.8rem;
  line-height: 1.6;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding-bottom: 7px;
}
.cb-spec-key {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.5;
  white-space: nowrap;
  min-width: 62px;
}
.cb-spec-val {
  color: rgba(255,245,248,0.75);
  line-height: 1.55;
}

/* ---------- カラーパレット ---------- */
.cb-palette {
  display: flex;
  gap: 6px;
  padding: 0 32px;
  margin-bottom: 18px;
}
.cp-swatch {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform var(--trans), box-shadow var(--trans);
  cursor: default;
  flex-shrink: 0;
}
.cp-swatch:hover {
  transform: scale(1.18) translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* ---------- モックUI：共通 ---------- */
.cb-mock-nav,
.cb-mock-btns,
.cb-mock-typo,
.cb-mock-card {
  margin: 0 32px 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.72rem;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(4px);
}

/* モックナビ — REBEL GOLD */
.cb-mock-nav--beast {
  display: flex; align-items: center; gap: 12px;
  background: rgba(26,8,0,0.7);
  border-color: rgba(255,140,0,0.25);
}
.cmn-logo {
  font-family: var(--ff-disp);
  font-size: 1.1rem;
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255,215,0,0.5);
  letter-spacing: 0.05em;
  margin-right: 6px;
}
.cmn-tag {
  font-family: var(--ff-mono);
  font-size: 0.58rem; letter-spacing: 0.15em;
  color: rgba(255,140,0,0.7);
  border: 1px solid rgba(255,140,0,0.3);
  border-radius: 4px; padding: 2px 7px;
}

/* モックボタン群 — COLOR BOMB */
.cb-mock-btns--sugar {
  display: flex; gap: 8px; flex-wrap: wrap;
  background: rgba(255,20,147,0.06);
  border-color: rgba(255,105,180,0.25);
}
.cmb-btn {
  font-family: var(--ff-body);
  font-size: 0.65rem; font-weight: 700;
  border: none; border-radius: 999px;
  padding: 5px 12px; cursor: default;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(255,105,180,0.25);
}

/* モックタイポ — SILK & SOUL */
.cb-mock-typo--velvet {
  background: rgba(245,240,248,0.06);
  border-color: rgba(200,160,255,0.2);
  text-align: center;
  padding: 14px 20px;
}
.cmt-heading {
  font-family: var(--ff-disp);
  font-size: 1.6rem; letter-spacing: 0.2em;
  color: #D4AAFF;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 6px rgba(200,160,255,0.4));
}
.cmt-sub {
  font-size: 0.7rem; letter-spacing: 0.25em;
  color: rgba(200,160,255,0.65);
  margin-bottom: 4px;
}
.cmt-body {
  font-size: 0.65rem; letter-spacing: 0.12em;
  color: rgba(210,170,255,0.4);
  font-style: italic;
}

/* モックカード — DARK EDGE */
.cb-mock-card--noir {
  display: flex; gap: 10px; align-items: center;
  background: rgba(8,8,8,0.8);
  border-color: rgba(192,192,192,0.15);
}
.cmc-img {
  width: 44px; height: 44px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg,
      rgba(192,192,192,0.08) 0px, rgba(192,192,192,0.08) 1px,
      transparent 1px, transparent 8px);
  border: 1px solid rgba(192,192,192,0.15);
  flex-shrink: 0;
}
.cmc-info { display: flex; flex-direction: column; gap: 4px; }
.cmc-label {
  font-family: var(--ff-mono);
  font-size: 0.52rem; letter-spacing: 0.28em;
  color: rgba(192,192,192,0.4);
}
.cmc-title {
  font-family: var(--ff-disp);
  font-size: 0.95rem; letter-spacing: 0.12em;
  color: #C0C0C0;
  text-shadow: 0 0 8px rgba(192,192,192,0.3);
}

/* ---------- カードNO （後方互換・非表示） ---------- */
.cb-number {
  display: none;
}

/* ---------- カードヘッダー ---------- */
.cb-header {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 12px 32px 0;
  margin-bottom: 0;
}
.cb-icon {
  font-size: 2.4rem;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
  flex-shrink: 0;
  margin-top: 4px;
}
.cb-title-wrap { flex: 1; }
.cb-name {
  font-family: var(--ff-disp);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.cb-tagline {
  font-family: var(--ff-mono);
  font-size: 0.7rem; letter-spacing: 0.14em;
  line-height: 1.6;
  opacity: 0.7;
}

/* ---------- デコバー（セパレーター） ---------- */
.cb-deco-bar {
  height: 2px;
  margin: 18px 32px;
  border-radius: 2px;
  position: relative;
}
.cb-deco-bar::after {
  content: '✦';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 0.55rem;
  background: transparent;
  padding: 0 0 0 8px;
  opacity: 0.6;
}

/* ---------- コンセプトブロック ---------- */
.cb-concept {
  padding: 0 32px;
  margin-bottom: 18px;
}
.cb-concept-label {
  font-family: var(--ff-mono);
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.3em;
  margin-bottom: 10px;
  opacity: 0.55;
}
.cb-concept-body {
  font-size: 0.84rem;
  line-height: 2.05;
  color: rgba(255,245,248,0.72);
}

/* ---------- DNAリスト ---------- */
.cb-dna {
  padding: 0 32px;
  margin-bottom: 20px;
}
.cb-dna-label {
  font-family: var(--ff-mono);
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.3em;
  opacity: 0.55;
  margin-bottom: 10px;
}
.cb-dna-list {
  display: flex; flex-direction: column; gap: 7px;
}
.cb-dna-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8rem;
  color: rgba(255,245,248,0.65);
  line-height: 1.5;
}
.dna-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

/* ---------- タグ ---------- */
.cb-tags {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 0 32px;
  margin-bottom: 20px;
}
.cb-tags span {
  font-family: var(--ff-mono);
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 4px 12px;
  border: 1px solid;
  transition: all var(--trans);
  opacity: 0.75;
}
.collab-card:hover .cb-tags span { opacity: 1; }

/* ---------- カラーストリップ ---------- */
.cb-color-strip {
  display: flex;
  height: 5px;
  margin-top: auto;
  border-radius: 0 0 28px 28px;
  overflow: hidden;
}
.cb-color-strip span {
  flex: 1;
  transition: flex var(--trans);
}
.collab-card:hover .cb-color-strip span { flex: 1.5; }
.collab-card:hover .cb-color-strip span:nth-child(2) { flex: 2.5; }

/* ======================================================
   個別カラーテーマ — REBEL BEAST
   ====================================================== */
.cb-beast {
  border-color: rgba(255,140,0,0.25);
}
.cb-beast:hover {
  box-shadow:
    0 24px 80px rgba(255,140,0,0.22),
    0 0 0 1px rgba(255,140,0,0.35),
    inset 0 0 60px rgba(255,80,0,0.04);
}
.cb-beast .cb-number { color: #FF8C00; }
.cb-beast .cb-name   { color: #FFB347; text-shadow: 0 0 30px rgba(255,140,0,0.5); }
.cb-beast .cb-tagline { color: rgba(255,180,80,0.75); }
.cb-beast .cb-deco-bar {
  background: linear-gradient(90deg, #FF8C00, #FFD700, transparent);
}
.cb-beast .cb-deco-bar::after { color: #FFD700; }
.cb-beast .cb-concept-label,
.cb-beast .cb-dna-label { color: #FF8C00; }
.cb-beast .dna-dot { background: #FF8C00; color: #FF8C00; }
.cb-beast .cb-tags span {
  color: #FFB347;
  background: rgba(255,140,0,0.06);
  border-color: rgba(255,140,0,0.25);
}
.cb-beast:hover .cb-tags span {
  background: rgba(255,140,0,0.14);
  border-color: rgba(255,140,0,0.45);
  box-shadow: 0 0 8px rgba(255,140,0,0.2);
}

/* ======================================================
   個別カラーテーマ — SUGAR RIOT
   ====================================================== */
.cb-sugar {
  border-color: rgba(255,105,180,0.25);
}
.cb-sugar:hover {
  box-shadow:
    0 24px 80px rgba(255,105,180,0.2),
    0 0 0 1px rgba(0,229,255,0.2),
    inset 0 0 60px rgba(173,255,47,0.03);
}
.cb-sugar .cb-number { color: #FF69B4; }
.cb-sugar .cb-name   {
  background: linear-gradient(90deg, #FF69B4, #00E5FF, #ADFF2F);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; background-size: 200%;
  animation: logoShift 3s ease infinite;
  filter: drop-shadow(0 0 10px rgba(255,105,180,0.5));
}
.cb-sugar .cb-tagline { color: rgba(255,150,210,0.75); }
.cb-sugar .cb-deco-bar {
  background: linear-gradient(90deg, #FF69B4, #00E5FF, #ADFF2F, transparent);
}
.cb-sugar .cb-deco-bar::after { color: #FF69B4; }
.cb-sugar .cb-concept-label,
.cb-sugar .cb-dna-label { color: #FF69B4; }
.cb-sugar .dna-dot { background: #FF69B4; color: #FF69B4; }
.cb-sugar .cb-tags span {
  color: #FF69B4;
  background: rgba(255,105,180,0.06);
  border-color: rgba(255,105,180,0.22);
}
.cb-sugar:hover .cb-tags span {
  background: rgba(255,105,180,0.14);
  border-color: rgba(255,105,180,0.45);
  box-shadow: 0 0 8px rgba(255,105,180,0.2);
}

/* ======================================================
   個別カラーテーマ — VELVET BLOOM
   ====================================================== */
.cb-velvet {
  border-color: rgba(200,160,255,0.22);
}
.cb-velvet:hover {
  box-shadow:
    0 24px 80px rgba(200,160,255,0.18),
    0 0 0 1px rgba(200,160,255,0.3),
    inset 0 0 60px rgba(200,160,255,0.03);
}
.cb-velvet .cb-number { color: #C8A0FF; }
.cb-velvet .cb-name   { color: #D4AAFF; text-shadow: 0 0 30px rgba(200,160,255,0.5); }
.cb-velvet .cb-tagline { color: rgba(210,170,255,0.72); }
.cb-velvet .cb-deco-bar {
  background: linear-gradient(90deg, #C8A0FF, #FF69B4, transparent);
}
.cb-velvet .cb-deco-bar::after { color: #C8A0FF; }
.cb-velvet .cb-concept-label,
.cb-velvet .cb-dna-label { color: #C8A0FF; }
.cb-velvet .dna-dot { background: #C8A0FF; color: #C8A0FF; }
.cb-velvet .cb-tags span {
  color: #D4AAFF;
  background: rgba(200,160,255,0.06);
  border-color: rgba(200,160,255,0.22);
}
.cb-velvet:hover .cb-tags span {
  background: rgba(200,160,255,0.14);
  border-color: rgba(200,160,255,0.4);
  box-shadow: 0 0 8px rgba(200,160,255,0.2);
}

/* ======================================================
   個別カラーテーマ — NOIR DOLL
   ====================================================== */
.cb-noir {
  border-color: rgba(192,192,192,0.15);
}
.cb-noir:hover {
  box-shadow:
    0 24px 80px rgba(255,45,120,0.15),
    0 0 0 1px rgba(192,192,192,0.2),
    inset 0 0 60px rgba(61,0,61,0.06);
}
.cb-noir .cb-number { color: #C0C0C0; }
.cb-noir .cb-name   { color: #E8E8E8; text-shadow: 0 0 20px rgba(192,192,192,0.4), 0 0 60px rgba(255,45,120,0.2); }
.cb-noir .cb-tagline { color: rgba(210,210,210,0.65); }
.cb-noir .cb-deco-bar {
  background: linear-gradient(90deg, #C0C0C0, #FF2D78, transparent);
}
.cb-noir .cb-deco-bar::after { color: #C0C0C0; }
.cb-noir .cb-concept-label,
.cb-noir .cb-dna-label { color: #C0C0C0; }
.cb-noir .dna-dot { background: #C0C0C0; color: #C0C0C0; }
.cb-noir .cb-tags span {
  color: #D0D0D0;
  background: rgba(192,192,192,0.04);
  border-color: rgba(192,192,192,0.18);
}
.cb-noir:hover .cb-tags span {
  background: rgba(192,192,192,0.1);
  border-color: rgba(192,192,192,0.35);
  box-shadow: 0 0 8px rgba(192,192,192,0.15);
}

/* ======================================================
   ドリームコラボ フィナーレ
   ====================================================== */
.collab-finale {
  text-align: center;
  padding: 72px clamp(20px, 6vw, 60px) 0;
  max-width: 900px; margin: 0 auto;
}
.collab-finale-text {
  font-family: var(--ff-body);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255,245,248,0.7);
  line-height: 2.2;
  margin-bottom: 32px;
}
.collab-finale-text strong {
  font-family: var(--ff-disp);
  font-size: 1.4em;
  background: linear-gradient(135deg, var(--pink), var(--gold), var(--lame));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: logoShift 3s ease infinite;
}
.collab-finale-brands {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.cf-brand {
  font-family: var(--ff-disp);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  letter-spacing: 0.08em;
  transition: all var(--trans);
}
.cf-brand.beast  { color: #FFB347; text-shadow: 0 0 12px rgba(255,140,0,0.5); }
.cf-brand.sugar  { color: #FF69B4; text-shadow: 0 0 12px rgba(255,105,180,0.5); }
.cf-brand.velvet { color: #C8A0FF; text-shadow: 0 0 12px rgba(200,160,255,0.5); }
.cf-brand.noir   { color: #C0C0C0; text-shadow: 0 0 12px rgba(192,192,192,0.4); }
.cf-brand:hover  { transform: scale(1.08) translateY(-3px); }
.cf-x {
  font-family: var(--ff-disp);
  font-size: 1.2rem;
  color: rgba(255,245,248,0.2);
}

/* =====================================================
   DREAM LINK CARDS — 実際のデザインページへのリンク
   ===================================================== */

.dream-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1120px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
@media (max-width: 860px) { .dream-link-grid { grid-template-columns: 1fr; } }

/* カード共通 */
.dream-link-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
              box-shadow  0.35s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid rgba(255,255,255,0.07);
}
.dream-link-card:hover { transform: translateY(-10px) scale(1.013); }

/* テクスチャ背景 */
.dlc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; }

/* ===== プレビューエリア（上半分） ===== */
.dlc-preview {
  position: relative; z-index: 1;
  height: 220px;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ミニナビ共通 */
.dlp-nav {
  display: flex; align-items: center; gap: 14px;
  height: 32px; padding: 0 14px;
  flex-shrink: 0;
  font-size: 0.55rem; letter-spacing: 0.18em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ミニヒーロー共通 */
.dlp-hero {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center;
  padding: 14px 18px;
}

/* ===== 情報エリア（下半分） ===== */
.dlc-info {
  position: relative; z-index: 1;
  padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.dlc-dir-tag {
  font-family: var(--ff-mono);
  font-size: 0.55rem; letter-spacing: 0.3em;
  opacity: 0.45;
}
.dlc-name {
  font-family: var(--ff-disp);
  font-size: clamp(1.4rem,3vw,1.9rem);
  letter-spacing: 0.06em;
  line-height: 1;
}
.dlc-desc {
  font-size: 0.78rem;
  line-height: 1.9;
  opacity: 0.65;
  text-align: left;
}
.dlc-palette {
  display: flex; gap: 5px;
  margin-top: 4px;
}
.dlc-palette span {
  width: 20px; height: 20px; border-radius: 5px;
  flex-shrink: 0;
}
.dlc-arrow {
  font-family: var(--ff-mono);
  font-size: 0.65rem; letter-spacing: 0.2em;
  margin-top: 8px;
  transition: letter-spacing 0.25s;
}
.dream-link-card:hover .dlc-arrow { letter-spacing: 0.35em; }

/* ================================================
   A: REBEL GOLD
   ================================================ */
.dlc-bg-beast {
  background:
    radial-gradient(ellipse 14px 9px  at 10% 15%, rgba(255,140,0,0.5) 0%, transparent 70%),
    radial-gradient(ellipse 9px  13px at 28% 8%,  rgba(200,60,0,0.4)  0%, transparent 70%),
    radial-gradient(ellipse 11px 8px  at 52% 22%, rgba(255,140,0,0.45) 0%, transparent 70%),
    radial-gradient(ellipse 8px  12px at 75% 12%, rgba(200,60,0,0.38)  0%, transparent 70%),
    radial-gradient(ellipse 13px 9px  at 88% 30%, rgba(255,140,0,0.4)  0%, transparent 70%),
    radial-gradient(ellipse 10px 14px at 18% 50%, rgba(200,60,0,0.35)  0%, transparent 70%),
    radial-gradient(ellipse 12px 8px  at 45% 60%, rgba(255,140,0,0.4)  0%, transparent 70%),
    radial-gradient(ellipse 8px  11px at 70% 55%, rgba(200,60,0,0.35)  0%, transparent 70%),
    radial-gradient(ellipse 11px 9px  at 20% 82%, rgba(255,140,0,0.38) 0%, transparent 70%),
    radial-gradient(ellipse 9px  13px at 60% 78%, rgba(200,60,0,0.35)  0%, transparent 70%),
    linear-gradient(145deg, #1a0800 0%, #0d0300 100%);
}
.dlc-beast { border-color: rgba(255,140,0,0.3); }
.dlc-beast:hover { box-shadow: 0 20px 60px rgba(255,140,0,0.25), 0 0 0 1px rgba(255,140,0,0.4); }
.dlp-nav-beast { background: rgba(13,3,0,0.9); color: rgba(255,215,0,0.65); font-family: 'Bebas Neue', var(--ff-disp); letter-spacing: 0.22em; }
.dlp-hero-beast { background: transparent; }
.dlp-eyebrow   { font-size: 0.5rem; letter-spacing: 0.4em; color: rgba(255,140,0,0.7); margin-bottom: 6px; }
.dlp-title     { font-family: var(--ff-disp); font-size: 3.5rem; line-height: 0.85; color: #FFD700; text-shadow: 0 0 20px rgba(255,215,0,0.6); letter-spacing: 0.03em; }
.dlp-sub       { font-size: 0.65rem; font-weight: 700; color: rgba(255,245,220,0.7); margin-top: 8px; margin-bottom: 10px; border-left: 2px solid #FF8C00; padding-left: 8px; }
.dlp-btn-beast { display: inline-block; font-size: 0.55rem; letter-spacing: 0.2em; color: #000; background: linear-gradient(135deg, #FFD700, #FF8C00); padding: 5px 14px; clip-path: polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.dlc-beast .dlc-name  { color: #FFD700; text-shadow: 0 0 16px rgba(255,215,0,0.35); }
.dlc-beast .dlc-arrow { color: #FF8C00; }

/* ================================================
   B: COLOR BOMB
   ================================================ */
.dlc-bg-sugar {
  background:
    radial-gradient(circle 8px  at 12% 20%, rgba(255,105,180,0.5) 0%, transparent 70%),
    radial-gradient(circle 5px  at 35% 10%, rgba(0,229,255,0.45)  0%, transparent 70%),
    radial-gradient(circle 7px  at 60% 25%, rgba(173,255,47,0.4)  0%, transparent 70%),
    radial-gradient(circle 6px  at 82% 15%, rgba(255,215,0,0.5)   0%, transparent 70%),
    radial-gradient(circle 5px  at 20% 55%, rgba(204,68,255,0.4)  0%, transparent 70%),
    radial-gradient(circle 8px  at 50% 65%, rgba(255,105,180,0.45) 0%, transparent 70%),
    radial-gradient(circle 6px  at 78% 60%, rgba(0,229,255,0.4)   0%, transparent 70%),
    radial-gradient(circle 5px  at 30% 85%, rgba(173,255,47,0.4)  0%, transparent 70%),
    radial-gradient(circle 7px  at 65% 80%, rgba(255,215,0,0.45)  0%, transparent 70%),
    linear-gradient(145deg, rgba(20,0,30,0.92) 0%, rgba(10,0,18,0.96) 100%);
}
.dlc-sugar { border-color: rgba(255,105,180,0.3); }
.dlc-sugar:hover { box-shadow: 0 20px 60px rgba(255,105,180,0.25), 0 0 0 1px rgba(0,229,255,0.3); }
.dlp-nav-sugar { background: rgba(15,0,24,0.9); color: rgba(255,105,180,0.8); }
.dlp-hero-sugar { text-align: center; }
.dlp-deco    { font-size: 1.1rem; color: #FF69B4; filter: drop-shadow(0 0 6px rgba(255,105,180,0.6)); margin-bottom: 6px; }
.dlp-title-b { font-size: 3rem; font-weight: 900; line-height: 0.9; margin-bottom: 8px; background: linear-gradient(135deg, #FF69B4, #00E5FF, #ADFF2F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.dlp-sub-b   { font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.dlp-tags-b  { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.dlp-tags-b span { font-size: 0.5rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,105,180,0.5); color: #FF69B4; }
.dlc-sugar .dlc-name  { background: linear-gradient(90deg, #FF69B4, #00E5FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.dlc-sugar .dlc-arrow { color: #FF69B4; }

/* ================================================
   C: SILK & SOUL
   ================================================ */
.dlc-bg-velvet {
  background:
    radial-gradient(ellipse 50px 50px at 20% 30%, rgba(200,160,255,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 40px 40px at 80% 20%, rgba(212,120,154,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60px 60px at 50% 70%, rgba(200,160,255,0.15) 0%, transparent 70%),
    linear-gradient(145deg, #f8f4f0 0%, #ede6f0 100%);
}
.dlc-velvet { border-color: rgba(155,127,200,0.35); }
.dlc-velvet:hover { box-shadow: 0 20px 60px rgba(155,127,200,0.2), 0 0 0 1px rgba(155,127,200,0.4); }
.dlp-nav-velvet { background: rgba(248,244,240,0.95); color: rgba(138,106,138,0.75); font-size: 0.52rem; letter-spacing: 0.25em; border-bottom-color: rgba(155,127,200,0.15); }
.dlp-hero-velvet { background: transparent; }
.dlp-eyebrow-c { font-size: 0.48rem; letter-spacing: 0.35em; color: rgba(212,175,122,0.8); margin-bottom: 8px; }
.dlp-title-c   { font-family: 'Georgia', 'Times New Roman', serif; font-size: 2.8rem; font-weight: 400; letter-spacing: 0.12em; color: #2d1f2e; line-height: 0.9; margin-bottom: 6px; }
.dlp-italic-c  { font-family: 'Georgia', serif; font-style: italic; font-size: 0.75rem; letter-spacing: 0.18em; color: #9b7fc8; margin-bottom: 10px; }
.dlp-rule-c    { width: 32px; height: 1px; background: linear-gradient(90deg, #d4af7a, #9b7fc8); margin-bottom: 10px; }
.dlp-sub-c     { font-size: 0.6rem; color: rgba(45,31,46,0.55); letter-spacing: 0.12em; }
.dlc-velvet .dlc-dir-tag { color: #9b7fc8; }
.dlc-velvet .dlc-name  { color: #9b7fc8; }
.dlc-velvet .dlc-desc  { color: rgba(45,31,46,0.65); }
.dlc-velvet .dlc-arrow { color: #9b7fc8; }
.dlc-velvet .dlc-info  { background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); color: #2d1f2e; border-top-color: rgba(155,127,200,0.15); }

/* ================================================
   D: DARK EDGE
   ================================================ */
.dlc-bg-noir {
  background:
    repeating-linear-gradient(0deg,   transparent, transparent 24px, rgba(192,192,192,0.04) 24px, rgba(192,192,192,0.04) 25px),
    repeating-linear-gradient(90deg,  transparent, transparent 24px, rgba(192,192,192,0.04) 24px, rgba(192,192,192,0.04) 25px),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(61,0,61,0.4) 0%, transparent 65%),
    linear-gradient(145deg, #0a0a0f 0%, #050508 100%);
}
.dlc-noir { border-color: rgba(192,192,192,0.12); }
.dlc-noir:hover { box-shadow: 0 20px 60px rgba(255,45,120,0.12), 0 0 0 1px rgba(192,192,192,0.2); }
.dlp-nav-noir { background: rgba(5,5,8,0.97); color: rgba(192,192,192,0.45); font-size: 0.5rem; letter-spacing: 0.3em; gap: 20px; border-bottom-color: rgba(192,192,192,0.07); }
.dlp-dot { width: 4px; height: 4px; border-radius: 50%; background: #FF2D78; box-shadow: 0 0 5px rgba(255,45,120,0.6); }
.dlp-hero-noir { background: transparent; padding-left: 20px; }
.dlp-num-d   { font-size: 0.48rem; letter-spacing: 0.45em; color: rgba(192,192,192,0.35); margin-bottom: 10px; }
.dlp-title-d { font-family: 'Georgia', 'Times New Roman', serif; font-size: 2.6rem; font-weight: 400; letter-spacing: 0.08em; color: #f0f0f2; line-height: 0.9; margin-bottom: 8px; }
.dlp-sub-d   { font-style: italic; font-size: 0.62rem; letter-spacing: 0.15em; color: rgba(192,192,192,0.45); margin-bottom: 10px; }
.dlp-line-d  { width: 20px; height: 1px; background: #FF2D78; box-shadow: 0 0 6px rgba(255,45,120,0.5); margin-bottom: 10px; }
.dlp-body-d  { font-size: 0.56rem; font-weight: 300; color: rgba(192,192,192,0.4); line-height: 1.8; letter-spacing: 0.05em; }
.dlc-noir .dlc-name  { color: #c0c0c0; }
.dlc-noir .dlc-arrow { color: #FF2D78; }

/* マーキー em タグ */
.marquee-track span em {
  color: var(--gold);
  font-style: normal;
  text-shadow: 0 0 8px rgba(255,215,0,0.5);
}

/* =====================================================
   TOKEN SECTION — $GYARU コイン情報
   ===================================================== */
.token-section {
  padding: 100px clamp(20px, 6vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,45,120,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(200,160,255,0.04) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(14,0,24,0) 0%, rgba(14,0,24,0.8) 40%, rgba(14,0,24,0.8) 60%, rgba(14,0,24,0) 100%);
}
.token-section::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,45,120,0.03) 0px, rgba(255,45,120,0.03) 1px,
    transparent 1px, transparent 60px
  );
  pointer-events: none;
}
.token-label {
  font-family: var(--ff-mono);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
  display: block;
}
.token-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
/* コイン */
.token-coin-wrap {
  position: relative;
  width: 220px; height: 220px;
}
.token-coin {
  width: 220px; height: 220px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,45,120,0.4);
  box-shadow:
    0 0 0 6px rgba(255,45,120,0.08),
    0 0 40px rgba(255,45,120,0.3),
    0 0 80px rgba(255,215,0,0.15),
    0 0 120px rgba(200,160,255,0.1);
  animation: coinFloat 4s ease-in-out infinite;
  position: relative;
}
.token-coin img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.token-coin-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255,45,120,0.25);
  animation: coinRingPulse 3s ease-in-out infinite;
}
.token-coin-ring2 {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(255,215,0,0.15);
  animation: coinRingPulse 3s ease-in-out infinite 0.8s;
}
@keyframes coinFloat {
  0%, 100% { transform: translateY(0px); box-shadow: 0 0 0 6px rgba(255,45,120,0.08), 0 0 40px rgba(255,45,120,0.3), 0 0 80px rgba(255,215,0,0.15); }
  50%       { transform: translateY(-12px); box-shadow: 0 20px 60px rgba(255,45,120,0.2), 0 0 60px rgba(255,45,120,0.35), 0 0 100px rgba(255,215,0,0.2); }
}
@keyframes coinRingPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
/* 旧CSSコイン用（削除済みだが念のため空定義） */
.token-coin-symbol, .token-coin-subtitle { display: none; }

/* テキスト情報 */
.token-info-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.token-info-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.token-info-key {
  font-family: var(--ff-mono);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--muted);
}
.token-ticker {
  font-family: var(--ff-disp);
  font-size: clamp(3rem, 10vw, 6rem);
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 40%, var(--pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  line-height: 1;
  animation: logoShift 4s ease infinite;
  background-size: 200%;
}
.token-contract-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(14,0,24,0.7);
  border: 1px solid rgba(255,45,120,0.2);
  border-radius: 12px;
  padding: 12px 20px;
  max-width: 100%;
  cursor: pointer;
  transition: all var(--trans);
  position: relative;
  overflow: hidden;
}
.token-contract-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,45,120,0.04), rgba(200,160,255,0.04));
  opacity: 0;
  transition: opacity var(--trans);
}
.token-contract-wrap:hover { border-color: rgba(255,45,120,0.5); }
.token-contract-wrap:hover::before { opacity: 1; }
.token-contract-addr {
  font-family: var(--ff-mono);
  font-size: clamp(0.6rem, 1.8vw, 0.8rem);
  color: rgba(255,245,248,0.75);
  word-break: break-all;
  flex: 1;
  letter-spacing: 0.04em;
}
.token-copy-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px 6px;
  transition: color var(--trans);
  flex-shrink: 0;
  font-size: 0.85rem;
}
.token-copy-btn:hover { color: var(--pink); }
.token-copy-feedback {
  position: absolute;
  top: 50%; right: 16px;
  transform: translateY(-50%);
  background: var(--pink);
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
.token-copy-feedback.show { opacity: 1; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 600px) {
  .nft-card-preview { gap: 10px; }
  .nft-prev-card.c1 { width: 110px; }
  .nft-prev-card.c1 img { width: 110px; height: 143px; }
  .nft-prev-card.c2 { width: 140px; }
  .nft-prev-card.c2 img { width: 140px; height: 182px; }
  .nft-prev-card.c3 { width: 110px; }
  .nft-prev-card.c3 img { width: 110px; height: 143px; }
  .hero-eyebrow::before,
  .hero-eyebrow::after { display: none; }
  .section-label::before,
  .section-label::after { display: none; }
}