/* ===================================================================
   VRC アバタートランプ — style.css
   配色: カード裏面 (back.png) 準拠のティール／シアン基調。ピンク不使用。
   =================================================================== */
:root {
  --c-bg-deep:   #0c2e33;  /* ディープティール（ベース背景） */
  --c-bg-mid:    #14464d;  /* ティール（セクション背景） */
  --c-bg-dark:   #08231f;  /* さらに濃い影 */
  --c-panel:     #103b41;  /* パネル背景 */
  --c-line:      #2c6b71;  /* 罫・境界 */
  --c-light:     #7fd4d4;  /* ライトティール（枠・装飾） */
  --c-pale:      #a8e0e0;  /* ペールシアン（サブアクセント） */
  --c-accent:    #36d6cf;  /* ブライトシアン（CTA・強調） */
  --c-accent-hi: #5ff0e7;  /* ホバー時の明シアン */
  --c-text:      #eaf7f7;  /* 主テキスト */
  --c-text-dim:  #b7d6d6;  /* 弱テキスト */
  --c-ink:       #062023;  /* CTA上の濃文字 */
  /* VDP2026 ロゴ由来のポップ・アクセント（ピンク不使用） */
  --c-vdp-orange:    #f7931e;  /* ビビッドオレンジ（メインアクセント） */
  --c-vdp-orange-hi: #ffa838;  /* オレンジ・ホバー */
  --c-vdp-red:       #ec5a1e;  /* レッドオレンジ */
  --c-vdp-yellow:    #ffc61e;  /* イエロー */
  --c-vdp-blue:      #1e86cc;  /* ブルー */
  --c-vdp-blue-hi:   #38a4e3;  /* ブルー・ホバー */
  --header-h: 72px;
  --maxw: 1160px;
  --fan-scale: 1;          /* HEROカード扇の拡大率（大画面で段階的に拡大） */
  --radius: 14px;
  --font-en: 'Cinzel', 'Times New Roman', serif;
  --font-jp: 'Noto Sans JP', sans-serif;
}

body {
  font-family: var(--font-jp);
  color: var(--c-text);
  background: var(--c-bg-deep);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(54,214,207,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(127,212,212,.08), transparent 55%);
  /* 軽量化: background-attachment:fixed はスクロール毎の全画面再描画が重いため解除 */
}

.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 700; line-height: 1; text-align: center;
  padding: 0.875em 1.625em; border-radius: 999px;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-sm { padding: 0.625em 1.125em; font-size: .9rem; }
.btn-cta {
  background: var(--c-accent); color: var(--c-ink);
  box-shadow: 0 0 0 1px rgba(95,240,231,.4), 0 8px 24px rgba(54,214,207,.28);
}
.btn-cta:hover { background: var(--c-accent-hi); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(95,240,231,.7), 0 12px 30px rgba(54,214,207,.42); }
/* VDP クラファン系 CTA（右上ヘッダー・ステータス帯・クラファン誘導）はオレンジ→ピンクのネオングラデで統一 */
.header-cta, .cf-status-btn, .cf-main-btn {
  background: linear-gradient(135deg, var(--vdp-orange2), var(--vdp-pink2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(255,58,168,.32), inset 0 1px 0 rgba(255,255,255,.3);
}
.header-cta:hover, .cf-status-btn:hover, .cf-main-btn:hover {
  background: linear-gradient(135deg, var(--vdp-orange2), var(--vdp-pink2));
  color: #fff; filter: brightness(1.08); transform: translateY(-2px);
}
.btn-outline {
  background: transparent; color: var(--c-pale);
  box-shadow: inset 0 0 0 1.5px var(--c-line);
}
.btn-outline:hover { color: var(--c-ink); background: var(--c-pale); transform: translateY(-2px); }

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  /* 軽量化: backdrop-filter(ライブぼかし)を使わず不透明度高めの単色で代替 */
  background: rgba(8,35,31,.88);
  border-bottom: 1px solid rgba(127,212,212,.16);
  transition: height .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled { background: rgba(8,35,31,.92); box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.header-inner {
  height: 100%; width: min(100% - 32px, calc(var(--maxw) + 120px)); margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
}
.header-logo img { height: 2.625rem; width: auto; }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.primary-nav > ul { display: flex; align-items: center; gap: 20px; }
.primary-nav a { font-size: .92rem; font-weight: 500; color: var(--c-text-dim); position: relative; padding: 4px 0; transition: color .2s ease; }
.primary-nav a:hover { color: var(--c-text); }
.primary-nav li a.active { color: var(--c-accent); }
.primary-nav li a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--c-accent); border-radius: 2px; }
.header-cta { font-size: .9rem; padding: 0.6875em 1.25em; }
.nav-inline-cta { display: none; }

/* ハンバーガー */
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; }
.nav-toggle span { display: block; height: 2px; width: 26px; margin-inline: auto; background: var(--c-text); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- セクション共通 ---------- */
.section { padding: 5.25rem 0; position: relative; }
.section-title {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); text-align: center; margin-bottom: 36px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.section-title-left { text-align: left; align-items: flex-start; }
.st-sub {
  font-family: var(--font-en); font-size: .8rem; letter-spacing: .28em; font-weight: 500;
  color: var(--c-accent); padding-left: .28em;
  display: inline-flex; align-items: center; gap: 10px;
}
.st-sub::before, .st-sub::after { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--c-accent)); }
.section-title-left .st-sub::before { display: none; }
/* section-title は flex-column のため、見出し本文は単一アイテムにまとめてから折返す */
.st-main { display: block; }
/* 文節を inline-block で包み、語中で改行させず文節境界でのみ折返す（全ブラウザ対応） */
.np { display: inline-block; }

/* ---------- HERO ---------- */
.hero { position: relative; padding: calc(var(--header-h) + 3.5rem) 0 3.5rem; overflow: hidden;
  background: url('../images/hero-bg.webp') center bottom / cover no-repeat;
}
.hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,35,31,.42) 0%, rgba(8,35,31,.24) 34%, rgba(8,35,31,.58) 76%, rgba(8,35,31,.94) 100%),
    radial-gradient(700px 380px at 70% 18%, rgba(54,214,207,.10), transparent 60%),
    radial-gradient(560px 320px at 12% 70%, rgba(127,212,212,.08), transparent 60%);
}
.hero-inner {
  position: relative; z-index: 1;
  width: min(100% - 40px, var(--maxw)); margin-inline: auto;
  display: flex; flex-direction: column; gap: 8px;
}

/* レイヤー構成: カードの扇を背景に、見出しを重ねて配置 */
.hero-stage { position: relative; display: grid; min-height: 28.75rem; align-items: center; }
.hero-stage > .hero-cards,
.hero-stage > .hero-copy { grid-column: 1; grid-row: 1; }

.hero-copy { position: relative; z-index: 5; justify-self: start; align-self: start; max-width: 480px; padding: 6px 4px; }
.hero-copy::before {
  content: ""; position: absolute; inset: -24px -32px -24px -40px; z-index: -1;
  background: radial-gradient(120% 100% at 18% 50%, rgba(8,35,31,.86) 30%, rgba(8,35,31,.45) 60%, transparent 78%);
  filter: blur(2px);
}
.hero-eyebrow { font-family: var(--font-en); letter-spacing: .35em; color: var(--c-vdp-orange); font-size: .76rem; margin-bottom: 8px; }
.hero-title { font-size: clamp(1.45rem, 3vw, 1.95rem); line-height: 1.16; letter-spacing: .02em; text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 0 40px rgba(0,0,0,.6); }
.hero-lead { margin-top: 10px; font-size: clamp(.85rem, 1.6vw, .9rem); color: var(--c-pale); font-weight: 500; text-shadow: 0 2px 12px rgba(0,0,0,.8); }

/* 推しポイント: 下部にアイコン付き3カラム（見出し＋説明文） */
.hero-points { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* 白フロストガラス。軽量化のため backdrop-filter(ライブぼかし)は使わず、
   背景の不透明度を上げた擬似フロストで同等の見た目を出す（HWアクセラOFFでも軽い） */
.hero-points li {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(247,253,252,.90) 100%);
  --card-glow: rgba(54,214,207,.35);
  border: 1.5px solid var(--c-accent);
  border-radius: 14px; padding: 24px 22px 22px;
  box-shadow: 0 14px 32px rgba(0,0,0,.28), 0 0 18px var(--card-glow), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* 枠色＝各アイコンの枠色（①オレンジ ②ブルー ③ティール）。影も同系色のグローに */
.hero-points li:nth-child(1) { border-color: var(--c-vdp-orange); --card-glow: rgba(247,147,30,.38); }
.hero-points li:nth-child(2) { border-color: var(--c-vdp-blue); --card-glow: rgba(30,134,204,.38); }
.hero-points li:nth-child(3) { border-color: var(--c-accent); --card-glow: rgba(54,214,207,.38); }
.hero-points li:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(0,0,0,.34), 0 0 26px var(--card-glow), inset 0 1px 0 rgba(255,255,255,.8);
}
.hp-icon { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(54,214,207,.16); border: 1.5px solid var(--c-accent); color: var(--c-accent); }
.hp-icon svg { width: 28px; height: 28px; }
/* 3ブロックそれぞれVDP配色のアクセントでポップに */
.hero-points li:nth-child(1) .hp-icon { background: rgba(247,147,30,.16); border-color: var(--c-vdp-orange); color: var(--c-vdp-orange); }
.hero-points li:nth-child(2) .hp-icon { background: rgba(30,134,204,.16); border-color: var(--c-vdp-blue); color: var(--c-vdp-blue); }
.hero-points li:nth-child(3) .hp-icon { background: rgba(54,214,207,.20); border-color: var(--c-accent); color: #169c95; }
.hp-body { display: flex; flex-direction: column; gap: 6px; }
.hp-head { font-weight: 700; font-size: 1.08rem; color: var(--c-bg-deep); }
.hp-desc { font-size: .9rem; line-height: 1.6; color: #234852; }

/* 掲載アバター54体 波形バッジ（HEROカード右上に重畳） */
.hero-badge {
  position: absolute; top: auto; bottom: -5.25rem; right: -0.875rem; z-index: 7;
  width: 11rem; height: 11rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  text-align: center; color: var(--c-ink);
}
a.hero-badge { text-decoration: none; cursor: pointer; transition: opacity .7s ease, transform .25s ease; }
a.hero-badge:hover, a.hero-badge:focus-visible { transform: scale(1.09); }
a.hero-badge.fade-in.visible:hover, a.hero-badge.fade-in.visible:focus-visible { transform: scale(1.09); }
a.hero-badge:hover .hb-shape, a.hero-badge:focus-visible .hb-shape { filter: drop-shadow(0 14px 28px rgba(0,0,0,.55)); }
.hb-shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); transition: filter .25s ease; }
.hb-label, .hb-num, .hb-sub { position: relative; z-index: 1; }
.hb-label { font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.hb-num { font-family: var(--font-en); font-weight: 800; font-size: 3.1rem; line-height: 1; }
.hb-num small { font-size: 1.3rem; font-weight: 800; margin-left: 1px; }
.hb-sub { font-size: .78rem; font-weight: 700; margin-top: 2px; }

/* HERO カード扇形 */
.hero-cards { position: relative; min-height: 27.5rem; display: flex; align-items: center; justify-content: center; }
.card-fan { position: relative; width: 980px; height: 400px; transform: scale(var(--fan-scale)); transform-origin: center center; }
.fan-card {
  position: absolute; bottom: 46px; left: 50%; margin-left: -79px; width: 158px; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45); transform-origin: 50% 420%;
  border: 1px solid rgba(127,212,212,.35);
}
/* 7枚：中央が最前面、両端へ向かって奥へ重なる左右対称の扇（間隔広め） */
.fan-card:nth-child(1) { transform: rotate(-30deg); z-index: 1; }
.fan-card:nth-child(2) { transform: rotate(-20deg); z-index: 2; }
.fan-card:nth-child(3) { transform: rotate(-10deg); z-index: 3; }
.fan-card:nth-child(4) { transform: rotate(0deg);   z-index: 4; }
.fan-card:nth-child(5) { transform: rotate(10deg);  z-index: 3; }
.fan-card:nth-child(6) { transform: rotate(20deg);  z-index: 2; }
.fan-card:nth-child(7) { transform: rotate(30deg);  z-index: 1; }
.hero-logo-emblem {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 230px; z-index: 6; filter: drop-shadow(0 12px 26px rgba(0,0,0,.55));
}

/* クラファン ステータス帯 */
.cf-status-bar { position: relative; z-index: 1; margin: 44px auto 0; width: min(100% - 40px, var(--maxw)); }
.cf-status-inner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between;
  background: linear-gradient(100deg, rgba(16,59,65,.95), rgba(20,70,77,.95));
  border: 1px solid var(--c-light); border-radius: var(--radius);
  padding: 18px 24px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.cf-status-text { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cf-badge { font-weight: 700; font-size: .82rem; padding: 6px 14px; border-radius: 999px; background: var(--c-accent); color: var(--c-ink); }
.cf-badge[data-state="active"] { background: var(--c-accent-hi); }
.cf-badge[data-state="ended"] { background: var(--c-line); color: var(--c-text); }
.cf-headline { font-weight: 700; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.cf-headline-title { font-size: 1.05rem; }
.cf-headline-sub { font-weight: 600; font-size: .82rem; color: var(--c-pale); }
.cf-progress { color: var(--c-pale); }
.cf-progress strong { color: var(--c-accent); font-size: 1.2rem; }

/* VDP バナー */
.vdp-banner {
  position: relative; z-index: 1; margin: 22px auto 0; width: min(100% - 40px, var(--maxw));
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: rgba(8,35,31,.55); border: 1px dashed var(--c-line); border-radius: var(--radius); padding: 16px 22px;
}
.vdp-banner-logo { height: 34px; width: auto; max-width: 100%; }
.vdp-banner-text { flex: 1; min-width: 200px; font-weight: 500; }
.vdp-banner-btn { margin-left: auto; }

/* ---------- 商品解説 ---------- */
.about { background: var(--c-bg-mid); }
.about-body { max-width: 760px; margin-inline: auto; text-align: center; font-size: 1.05rem; }
.about-body p + p { margin-top: 16px; }

/* ---------- 用途 ---------- */
.usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.usage-card { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 28px 24px; position: relative; overflow: hidden; }
.usage-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c-light), var(--c-accent)); }
.usage-icon { font-family: var(--font-en); font-size: 2rem; font-weight: 700; color: var(--c-accent); margin-bottom: 10px; }
.usage-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.usage-card p { color: var(--c-text-dim); font-size: .96rem; }

/* ---------- アバター一覧 ---------- */
.avatars { background: var(--c-bg-deep); }
.avatars-meta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.avatars-hint { text-align: center; color: var(--c-pale); font-weight: 500; margin-bottom: 24px; }
.avatar-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 8px; }
.avatar-grid .joker-spacer { grid-column: span 1; }
/* 各スート先頭を必ず列1へ（PCは13枚=1行で自然に一致、スマホはスート毎に改行される） */
.avatar-grid .suit-start { grid-column: 1; }
/* JOKER 専用行：本体グリッドと同じ13列で2枚を左右対称（4列目・10列目の直下）に配置 */
.avatar-joker-row { display: grid; grid-template-columns: repeat(13, 1fr); gap: 8px; margin-top: 8px; }
.avatar-joker-row .joker-1 { grid-column: 4; }
.avatar-joker-row .joker-2 { grid-column: 10; }
.avatar-card {
  position: relative; aspect-ratio: 5 / 7; border-radius: 7px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(127,212,212,.3); background: var(--c-bg-deep);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.avatar-card img { width: 100%; height: 100%; object-fit: cover; }
.avatar-card .av-watermark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: .5rem; letter-spacing: .12em; color: rgba(234,247,247,.55);
  transform: rotate(-32deg); pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.avatar-card .av-rank {
  position: absolute; top: 3px; left: 4px; font-family: var(--font-en); font-weight: 700;
  font-size: .62rem; color: var(--c-pale); text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.avatar-card:hover { transform: translateY(-5px) scale(1.04); box-shadow: 0 10px 22px rgba(0,0,0,.5); border-color: var(--c-accent); z-index: 3; }
.avatars-note { margin-top: 18px; text-align: center; font-size: .82rem; color: var(--c-text-dim); }

/* ---------- ワールド ---------- */
.worlds { background: var(--c-bg-mid); }
.worlds-lead { text-align: center; max-width: 760px; margin: 0 auto 34px; color: var(--c-text-dim); }
.worlds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
/* サイトのティール基調に合わせたダークパネル（.install-box と同系）。上辺の色分け線は不使用 */
.world-card { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 28px rgba(0,0,0,.28); }
/* 風景を大きく敷き、その左下に公式サムネイルを小さく重ねる */
.world-visual { position: relative; line-height: 0; }
.world-scene { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.world-thumb { position: absolute; left: 12px; bottom: 12px; width: 38%; max-width: 132px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
/* 名前を左・「VRChatで見る」を右に置いて1行に */
.world-body { padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.world-body h3 { font-size: 1.2rem; margin-bottom: 0; color: var(--c-text); }
.world-body .btn-sm { flex: none; }
.world-body p { flex-basis: 100%; color: var(--c-text-dim); font-size: .96rem; margin: 4px 0 0; }

/* ---------- 動画 ---------- */
.videos { background: var(--c-bg-mid); }
.videos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.video-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); }
.video-placeholder {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(circle at 50% 45%, var(--c-panel), var(--c-bg-deep));
  color: var(--c-pale);
}
.vp-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: rgba(54,214,207,.15); border: 1.5px solid var(--c-accent); color: var(--c-accent); }
.vp-text { font-size: .92rem; }
.video-title { margin-top: 14px; font-size: 1.05rem; }
.video-author { color: var(--c-text-dim); font-size: .9rem; }

/* ---------- クラファン誘導 ---------- */
/* 他セクション(bg-deep/bg-mid)より明るいティールで注目させる＋上部に淡いシアングロー */
.crowdfunding {
  background:
    radial-gradient(1000px 460px at 50% 0%, rgba(95,240,231,.14), transparent 62%),
    linear-gradient(180deg, #1c5a62 0%, #184f57 100%);
}
/* PC: 本文カード(左)＋商品画像(右)の2カラム。見出しはグリッド外で中央表示 */
.cf-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.cf-desc { color: var(--c-text-dim); margin-bottom: 22px; }
.cf-use-head { font-weight: 700; margin-bottom: 10px; }
.cf-use-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cf-use-list li { position: relative; padding-left: 26px; color: var(--c-text); }
.cf-use-list li::before { content: "◆"; position: absolute; left: 0; color: var(--c-accent); font-size: .8rem; top: 3px; }
.cf-use-foot { color: var(--c-text-dim); margin-bottom: 26px; }
.cf-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 360px; }
.cf-visual::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 80%; height: 80%; border-radius: 50%;
  background: radial-gradient(circle, rgba(54,214,207,.28), transparent 68%);
  filter: blur(8px); z-index: 0;
}
.cf-visual-pkg {
  position: relative; z-index: 1; width: auto; max-width: 80%; max-height: 420px;
  border-radius: 12px; box-shadow: 0 24px 54px rgba(0,0,0,.5);
}
.cf-visual-credit { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.cf-visual-logo { width: 132px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.cf-visual-credit figcaption { font-size: .76rem; color: var(--c-text-dim); text-align: center; }

/* ---------- 設置案内 ---------- */
.install { background: var(--c-bg-mid); }
.install-box {
  text-align: center; background: var(--c-panel); border: 1px solid var(--c-light);
  border-radius: 20px; padding: 48px 28px; max-width: 880px; margin-inline: auto;
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
}
.install-box p { color: var(--c-text-dim); max-width: 620px; margin: 0 auto 26px; text-align: left; }
.install-box .install-note { margin: 14px auto 0; max-width: 620px; text-align: center; font-size: .82rem; color: var(--c-text-dim); }

/* ---------- SNS シェア ---------- */
.share { padding: 56px 0; text-align: center; }
.share-title { font-family: var(--font-en); letter-spacing: .2em; font-size: 1rem; color: var(--c-pale); margin-bottom: 20px; }
.share-buttons { display: flex; justify-content: center; gap: 16px; }
.share-btn {
  width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-pale); background: var(--c-panel); border: 1px solid var(--c-line);
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background-color .2s ease;
}
.share-btn[data-share="x"]        { background: #000000; color: #fff; border-color: #000000; }
.share-btn[data-share="facebook"] { background: #1877f2; color: #fff; border-color: #1877f2; }
.share-btn[data-share="instagram"] {
  color: #fff; border-color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.share-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.35); }

/* ---------- フッター ---------- */
.site-footer { background: var(--c-bg-dark); border-top: 1px solid rgba(127,212,212,.16); padding: 44px 0; }
.footer-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer-logo { height: 40px; width: auto; opacity: .9; }
.footer-credit { color: var(--c-text-dim); font-size: .92rem; }
.footer-copy { color: var(--c-text-dim); font-size: .8rem; opacity: .7; }

/* ---------- ライトボックス ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,32,35,.86); backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox-close { position: absolute; top: 18px; right: 24px; font-size: 2.4rem; line-height: 1; color: var(--c-text); width: 48px; height: 48px; }
.lightbox-inner { display: flex; gap: 36px; align-items: center; max-width: 57.5rem; width: 100%; flex-wrap: wrap; justify-content: center; }
.lightbox-card { position: relative; flex: 0 0 auto; }
.lightbox-card img { width: 27.5rem; max-width: 78vw; max-height: 82vh; object-fit: contain; border-radius: 12px; border: 1px solid var(--c-light); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.lightbox-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: 2.4rem; letter-spacing: .2em; color: rgba(234,247,247,.4); transform: rotate(-30deg); pointer-events: none; }
.lightbox-meta { flex: 0 1 220px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.lightbox-meta:empty { display: none; }
.lb-shot { font-size: .72rem; font-weight: 500; color: var(--c-text-dim); letter-spacing: .02em; opacity: .85; }
.lb-credit { font-size: 1.05rem; font-weight: 600; color: var(--c-pale); letter-spacing: .01em; }
.lb-soon { font-size: 1.05rem; font-weight: 700; color: var(--c-accent); letter-spacing: .08em; }

/* ===================================================================
   VDP2026 フェスティバル・テイスト（クラファン3ブロック限定）
   参照: event.virtualparty.jp / ローカル vdp2026。
   ★このブロックに限りピンク解禁（ユーザー承認 2026-06-08）。
   他セクションは従来どおり NO-PINK（ティール／シアン）のまま。
   構成: パステルピンク×ラベンダー地＋多色ネオン＋グラスモーフィズム
        ＋Orbitron/Rajdhani 見出し＋パルスCTA＋五線譜/スキャンライン。
   =================================================================== */
:root {
  --vdp-blue2:   #3da7ff;
  --vdp-red2:    #ff3e4a;
  --vdp-green2:  #3fc873;
  --vdp-orange2: #ff8c2a;
  --vdp-pink2:   #ff3aa8;
  --vdp-turq2:   #3fd6c8;
  --vdp-gold2:   #ffd23f;
  --vdp-ink:     #0d4ea3;  /* パステル地に置く濃ロイヤルブルー文字 */
  --vdp-ink-sub: #2e6dc8;
  --vdp-glow-pink:   0 0 12px rgba(255,58,168,.55), 0 0 28px rgba(255,58,168,.22);
  --vdp-glow-orange: 0 0 12px rgba(255,140,42,.55), 0 0 28px rgba(255,62,74,.28);
  --vdp-glow-turq:   0 0 12px rgba(63,214,200,.55), 0 0 28px rgba(63,214,200,.22);
  --vdp-glow-gold:   0 0 10px rgba(255,210,63,.65), 0 0 22px rgba(255,210,63,.32);
  --font-vdp-disp: 'Orbitron', var(--font-en);
  --font-vdp-ui:   'Rajdhani', var(--font-en);
}

/* ※点滅（脈動アニメ）は不採用。バッジ・CTAは静止で発光のみ。 */

/* =========================================================
   1) クラファン ステータス帯（HERO内・フロステッドネオン）
   ========================================================= */
.cf-status-inner {
  background: linear-gradient(120deg, rgba(255,240,250,.16), rgba(225,210,250,.12));
  border: 1px solid rgba(255,58,168,.5);
  box-shadow: var(--vdp-glow-pink), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cf-badge {
  background: radial-gradient(circle at 50% 30%, var(--vdp-orange2), var(--vdp-red2) 78%);
  color: #fff; box-shadow: var(--vdp-glow-orange);
}
.cf-badge[data-state="active"] { background: radial-gradient(circle at 50% 30%, var(--vdp-turq2), var(--vdp-blue2) 80%); box-shadow: var(--vdp-glow-turq); }
.cf-badge[data-state="ended"]  { background: rgba(255,255,255,.18); color: var(--c-text); box-shadow: none; animation: none; }
.cf-headline { text-shadow: 0 0 10px rgba(255,58,168,.35); }
.cf-progress strong { color: var(--vdp-gold2); text-shadow: var(--vdp-glow-gold); }
/* ステータス帯CTA: オレンジ→ピンクのネオングラデ */
.cf-status-bar .cf-status-btn {
  background: linear-gradient(135deg, var(--vdp-orange2), var(--vdp-pink2));
  color: #fff;
}
.cf-status-bar .cf-status-btn:hover {
  background: linear-gradient(135deg, var(--vdp-orange2), var(--vdp-pink2));
  filter: brightness(1.08);
}

/* =========================================================
   2) VDP 導線バナー（HERO内・フロステッドネオン）
   ========================================================= */
.vdp-banner {
  background: linear-gradient(120deg, rgba(61,167,255,.12), rgba(255,58,168,.10));
  border: 1px solid rgba(63,214,200,.45);
  box-shadow: var(--vdp-glow-turq), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.vdp-banner-text { color: var(--c-text); }
.vdp-banner .vdp-banner-btn {
  color: #fff; background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1.5px var(--vdp-turq2), 0 0 14px rgba(63,214,200,.35);
}
.vdp-banner .vdp-banner-btn:hover {
  background: var(--vdp-turq2); color: var(--c-ink);
  box-shadow: 0 0 18px rgba(63,214,200,.6);
}

/* =========================================================
   3) クラファン誘導セクションは標準ティールテーマを使用。
   ピンクの背景・見出し・カード・♪装飾・グロー上書きは撤去。
   背景は注目用に他セクションより明るいティール（上部の .crowdfunding
   定義を参照）＋ .cf-* ティール定義。ピンクはCTAボタン(.cf-main-btn)のみ継承。
   ========================================================= */

/* ---- パッケージ3Dボックス（front=package.png / right=side.png / top=白） ---- */
/* 比率: front 739×1037（W:H≒0.713）, side 204×1033（奥行≒幅の28%）。
   --bw 正面幅 / --bh 高さ / --bd 奥行き。 */
.cf-pkg3d {
  position: relative; z-index: 1;
  --bw: 244px; --bh: 342px; --bd: 68px;
  width: var(--bw); height: var(--bh);
  margin: 6px auto 4px;
  perspective: 1200px;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.45));
}
.cf-pkg3d-box {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-9deg) rotateY(-26deg);
}
.cf-pkg3d .pf {
  position: absolute; top: 50%; left: 50%;
  background-size: 100% 100%; background-repeat: no-repeat;
  border-radius: 4px;
}
/* 正面 */
.cf-pkg3d .pf-front {
  width: var(--bw); height: var(--bh);
  transform: translate(-50%, -50%) translateZ(calc(var(--bd) / 2));
  background-image: url('../images/package.webp');
}
/* 右側面（背を見せる。やや暗くして立体感） */
.cf-pkg3d .pf-right {
  width: var(--bd); height: var(--bh);
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--bw) / 2));
  background-image: url('../images/package-side.webp');
  filter: brightness(.95);
}
/* 上面（真っ白） */
.cf-pkg3d .pf-top {
  width: var(--bw); height: var(--bd);
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--bh) / 2));
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
  border-radius: 4px 4px 2px 2px;
}

/* ===================================================================
   大画面（FHD / 2K / 4K）段階対応
   フォントは全て rem、主要な寸法・余白も rem/em 化済みのため、
   各段で html font-size を上げると本文・見出し・カード・余白が比例拡大。
   併せて --maxw を段階的に広げてコンテンツ幅（特に54体グリッド）を拡張し、
   --header-h／--fan-scale で固定px由来のヘッダー高・HERO扇も追従させる。
   =================================================================== */
@media (min-width: 1440px) {   /* 大型ノート・WUXGA */
  :root { --maxw: 1300px; --header-h: 80px; --fan-scale: 1.08; }
  html { font-size: 17px; }
}
@media (min-width: 1920px) {   /* フルHD (1080p) */
  :root { --maxw: 1560px; --header-h: 90px; --fan-scale: 1.22; }
  html { font-size: 18.5px; }
}
@media (min-width: 2560px) {   /* 2K / QHD (1440p) */
  :root { --maxw: 2040px; --header-h: 108px; --fan-scale: 1.55; }
  html { font-size: 22px; }
}
@media (min-width: 3840px) {   /* 4K / UHD (2160p) */
  :root { --maxw: 3040px; --header-h: 140px; --fan-scale: 2.1; }
  html { font-size: 28px; }
}