/* ============================================================
   Stars Live プロダクション募集LP — style.css
   （v3 ダーク×ピンク×ゴールド「集めて稼ぐ」訴求・2026-08-10 代表指示）
   ------------------------------------------------------------
   ■ トンマナ（色・余白・角丸・影）は :root のCSS変数で一元管理。
   ■ v2（白基調・爽やか）は backup/v2_light_2026-08-10/ に保管。
   ■ 構成：ダークFV → ゴールド実績帯 → 白セクション（課題・理由・比較）
     → ダーク収益帯 → 白（サポート・対象・管理画面）→ ダークMESSAGE
     → 白（流れ・FAQ）→ ダーク最終CTA
   ============================================================

   目次
   00. デザイントークン
   01. リセット・ベース
   02. 共通部品（container / ボタン / バッジ / 見出し / アイコン）
   03. ヘッダー
   04. ヒーロー（FV）＋ ゴールド勲章バッジ ＋ 募集告知帯
   05. 実績バンド（ゴールド）
   06. 課題チェック（頭打ち）
   07. 3つの理由
   08. 従来 vs 当社（比較）
   09. 収益性バンド（ダーク）
   10. サポート機能グリッド
   11. 2つのプロダクション
   12. 管理画面モックアップ
   13. 上司（代表）メッセージ
   14. ご契約までの流れ（STEP1〜7）
   15. FAQ
   16. 最終CTA
   17. フッター
   18. 追従CTA（スマホ）
   19. アニメーション
   20. レスポンシブ
   ============================================================ */

/* ============================================================
   00. デザイントークン
   ============================================================ */
:root {
  /* --- ダーク面 --- */
  --bg-0: #07050c;             /* 最深（フッター） */
  --bg-1: #0e0a17;             /* ダーク基調 */
  --bg-2: #161023;             /* ダークパネル */
  --line-dark: rgba(255, 255, 255, 0.12);
  --text-on-dark: #f7f4fc;
  --sub-on-dark: #b9b1cc;
  --faint-on-dark: #857c9e;

  /* --- ライト面（白セクション） --- */
  --paper: #ffffff;
  --paper-2: #fbf4f8;          /* ほんのりピンクの紙面 */
  --line-paper: #eedde7;
  --text: #2a1f38;
  --text-sub: #6f6584;
  --text-faint: #9a91ad;

  /* --- ブランド（ピンク） --- */
  --pink: #ff2e88;
  --pink-2: #ff5ca8;
  --pink-deep: #d61f74;
  --grad-pink: linear-gradient(92deg, #ff2e88, #ff5ca8);
  --grad-cta: linear-gradient(135deg, #ff2e88, #ff5ca8);

  /* --- ゴールド --- */
  --gold-1: #f9e3a3;
  --gold-2: #ecc35e;
  --gold-3: #c08a2e;
  --grad-gold: linear-gradient(180deg, #fdeebc, #ecc35e 55%, #c08a2e);
  --grad-gold-text: linear-gradient(180deg, #ffefc0, #f0c964 45%, #d8a13c);

  /* --- その他 --- */
  --line-green: #06c755;       /* LINE相談ボタン */
  --free: #2fbf71;             /* FreeLive＝緑（2026-08-10 上司指示で統一） */
  --prem: #ff8a1e;             /* PremiumLive＝オレンジ（同上） */
  --ok: #22c98f;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 12px 34px rgba(31, 15, 45, 0.10);
  --shadow-dark: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-cta: 0 12px 30px rgba(255, 46, 136, 0.38);

  --container: 1120px;
  --section-pad: clamp(60px, 8.5vw, 104px);

  --font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --font-num: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Times New Roman", serif; /* 金の見出し・実績数字用 */
}

/* ============================================================
   01. リセット・ベース
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  background-color: var(--bg-1);
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol.step-list { list-style: none; padding: 0; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pink-2); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 0; }
.pc-only { display: none; }
.sp-only { display: inline; }

/* ============================================================
   02. 共通部品
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.container-narrow { max-width: 840px; }

.section { position: relative; padding-block: var(--section-pad); overflow-x: clip; }

/* 白（紙面）セクション */
.section-paper { background: var(--paper); color: var(--text); }
.section-paper2 { background: var(--paper-2); color: var(--text); }
.section-dark { background: var(--bg-1); color: var(--text-on-dark); }

.section-head { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.section-eyebrow {
  font-family: var(--font-num);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 12px;
}
.section-dark .section-eyebrow { color: var(--pink-2); }
.section-title { font-size: clamp(24px, 4.4vw, 36px); font-weight: 800; line-height: 1.45; letter-spacing: 0.03em; }
.section-lead { margin-top: 16px; font-size: clamp(13.5px, 2.6vw, 15.5px); color: var(--text-sub); }
.section-dark .section-lead { color: var(--sub-on-dark); }

/* 見出し内のピンク強調 */
.em-pink { color: var(--pink); }
.em-gold {
  background: var(--grad-gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- ボタン --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; text-decoration: none; border-radius: 999px; white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.btn-primary { position: relative; overflow: hidden; color: #fff; background: var(--grad-cta); box-shadow: var(--shadow-cta); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-primary::after { animation: btnShine 4.5s ease-in-out infinite; }
}
@keyframes btnShine { 0%,55% { transform: translateX(-120%);} 75%,100% { transform: translateX(120%);} }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255,46,136,0.5); }

/* LINE相談（グリーン） */
.btn-line { position: relative; overflow: hidden; color: #fff; background: var(--line-green); box-shadow: 0 12px 30px rgba(6,199,85,0.35); }
.btn-line::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-line::after { animation: btnShine 4.5s ease-in-out infinite; }
}
.btn-line:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(6,199,85,0.45); }

.btn-ghost { color: var(--text-on-dark); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.35); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); border-color: #fff; }
.section-paper .btn-ghost, .section-paper2 .btn-ghost { color: var(--text); border-color: #d8c7d4; background: #fff; }

.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-xl { padding: 18px 34px; font-size: 17px; }
.btn-header { padding: 10px 18px; font-size: 13px; }
.btn-block { width: 100%; padding: 15px 20px; font-size: 15px; }

/* --- 「提供予定」バッジ（未実装の断定回避） --- */
.badge-soon {
  display: inline-block; vertical-align: 0.18em; margin-left: 8px; padding: 2px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.7;
  color: var(--pink-deep); background: rgba(255, 46, 136, 0.08);
  border: 1px solid rgba(255, 46, 136, 0.4); border-radius: 999px; white-space: nowrap;
}
.section-dark .badge-soon { color: #ff9ecb; background: rgba(255,46,136,0.14); border-color: rgba(255,92,168,0.5); }

/* --- インラインSVGアイコン --- */
.mi { display: inline-flex; width: 1.05em; height: 1.05em; vertical-align: -0.16em; }
.mi svg { width: 100%; height: 100%; }

/* ============================================================
   03. ヘッダー
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(10, 7, 18, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 26px rgba(0,0,0,0.5); }
.header-inner { display: flex; align-items: center; gap: 18px; height: 64px; transition: height 0.3s ease; }
.site-header.is-scrolled .header-inner { height: 56px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
/* 正式ロゴ（黒背景PNG→screenブレンドでダーク面に透過合成） */
.brand-logo-img {
  height: 27px; width: auto; display: block;
  /* 公式透過ロゴ（白文字版 logo-starslive-w.png）を使用。旧・黒背景PNG＋screenブレンドは廃止 */
}
.site-footer .brand-logo-img { height: 24px; }
.brand-tag {
  font-family: var(--font-num); font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--gold-2); border: 1px solid rgba(236,195,94,0.55); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.global-nav { display: none; margin-left: auto; gap: 24px; }
.global-nav a { font-size: 13.5px; color: var(--sub-on-dark); text-decoration: none; transition: color 0.2s ease; }
.global-nav a:hover { color: #fff; }
.btn-header { margin-left: auto; }
.global-nav + .btn-header { margin-left: 0; }

/* ============================================================
   04. ヒーロー（FV）
   ============================================================ */
.hero {
  position: relative;
  padding-top: calc(64px + clamp(36px, 7vw, 72px));
  padding-bottom: clamp(28px, 5vw, 48px);
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 85% 0%, rgba(255, 46, 136, 0.20), transparent 60%),
    radial-gradient(700px 500px at -5% 55%, rgba(124, 46, 200, 0.22), transparent 60%),
    var(--bg-1);
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--gold-1);
  border: 1px solid rgba(236, 195, 94, 0.5);
  background: rgba(236, 195, 94, 0.08);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 18px;
}
.hero-title { font-size: clamp(34px, 7.4vw, 58px); font-weight: 900; line-height: 1.3; letter-spacing: 0.02em; }
.hero-title .em-pink { text-shadow: 0 0 30px rgba(255, 46, 136, 0.45); }
.hero-lead { margin-top: 18px; font-size: clamp(14px, 2.8vw, 16.5px); color: var(--sub-on-dark); }
.hero-lead strong { color: var(--text-on-dark); font-weight: 700; }
.hero-lead .em-pink { font-weight: 700; }

/* ゴールド勲章バッジ */
.medal-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 26px 0 0; }
.medal {
  position: relative; text-align: center;
  padding: 14px 8px 12px;
  border: 1px solid rgba(236, 195, 94, 0.45);
  border-radius: 14px;
  background:
    radial-gradient(120px 60px at 50% 0%, rgba(236, 195, 94, 0.12), transparent 70%),
    rgba(255, 255, 255, 0.03);
}
.medal-laurel { display: block; width: 46px; height: 14px; margin: 0 auto 4px; color: var(--gold-2); }
.medal-label { display: block; font-size: 10.5px; letter-spacing: 0.1em; color: var(--gold-1); }
.medal-value {
  display: block; font-family: var(--font-num); font-size: clamp(15px, 2.6vw, 19px); font-weight: 800; line-height: 1.4;
  background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.medal-value small { font-size: 0.62em; font-weight: 700; }

/* 募集開始の告知帯 */
.announce {
  margin-top: 24px; text-align: center;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 92, 168, 0.4);
}
.announce-main {
  padding: 12px 16px; font-size: clamp(14.5px, 2.9vw, 18px); font-weight: 800; letter-spacing: 0.04em;
  color: #fff; background: var(--grad-pink);
}
.announce-sub {
  padding: 8px 16px; font-size: clamp(11.5px, 2.3vw, 13px); font-weight: 700;
  color: var(--gold-1); background: rgba(255, 255, 255, 0.05);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-note { margin-top: 12px; font-size: 12px; color: var(--faint-on-dark); }

/* FV写真 */
.hero-visual { position: relative; max-width: 460px; margin-inline: auto; width: 100%; }
.hero-photo {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255, 92, 168, 0.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 46, 136, 0.18);
}
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(200deg, rgba(255, 46, 136, 0.14), transparent 45%);
}
.hero-photo img { display: block; width: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
/* 写真上のリボン（完全新規・独立系） */
.hero-ribbon {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.5;
  color: #fff; background: var(--grad-pink);
  padding: 7px 13px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(255, 46, 136, 0.4);
}
.hero-visual .mock-caption { color: var(--faint-on-dark); }

/* ============================================================
   Stars配信画面モック（2026-08-11 FVから撤去・現在未使用）
   復活用スニペット：docs/PRODUCTION_LP_PHONE_MOCK_SNIPPET.md
   ============================================================ */
.hero-phone { position: relative; width: min(74vw, 300px); margin-inline: auto; }
.phone-frame {
  position: relative; aspect-ratio: 9 / 18.6; overflow: hidden; isolation: isolate;
  background: #08060d; border: 3px solid #3a3244; border-radius: 40px;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 70px rgba(255, 46, 136, 0.22);
}
.phone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.phone-notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 84px; height: 22px; border-radius: 999px; background: #050308;
}
.phone-notch::after {
  content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3d4f6b, #10131c 70%);
}
/* UIレイヤー共通 */
.sui { position: absolute; inset: 0; z-index: 3; color: #fff; pointer-events: none; }
.sui::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.46) 100%);
}
.sui-status {
  position: absolute; top: 12px; left: 20px; right: 18px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-num); font-size: 11.5px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.sui-sysicons { display: inline-flex; align-items: center; gap: 4px; }
.sui-top {
  position: absolute; top: 38px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.sui-live {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-num); font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
  background: linear-gradient(135deg, #38d4a4, #17b489); color: #fff;
  padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(23, 180, 137, 0.35);
}
.sui-topright { display: inline-flex; align-items: center; gap: 5px; }
.sui-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-num); font-size: 10.5px; font-weight: 700;
  background: rgba(18, 12, 26, 0.55); padding: 4px 9px; border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sui-pcoin {
  display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe58a, #f5b93c); color: #7a5200;
  font-size: 8.5px; font-weight: 900; font-style: normal; font-family: var(--font-num);
}
.sui-close { display: grid; place-items: center; width: 22px; height: 22px; opacity: 0.92; }
.sui-performer {
  position: absolute; top: 68px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(18, 12, 26, 0.5); border-radius: 999px; padding: 3px 8px 3px 3px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sui-ava {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: linear-gradient(135deg, #ff5ca8, #8a5cff);
}
.sui-lov { color: #ff5ca8; }
.sui-name { font-size: 10.5px; font-weight: 700; }
.sui-name-heart { font-size: 9px; }
.sui-follow {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; margin-left: 2px;
}
/* 左：ギフト効果タイマー */
.sui-gifts { position: absolute; left: 10px; top: 112px; display: flex; flex-direction: column; gap: 14px; }
.sui-gift { position: relative; width: 62px; text-align: center; }
.sui-gift.is-sub { transform: scale(0.8); transform-origin: top left; margin-top: -2px; }
.sui-gift-ring { display: block; width: 62px; height: 62px; }
.ring-arc { stroke-dashoffset: 42; }
.sui-gift-sec {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ff5c7a, #ff2e5e); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.sui-gift-name {
  position: absolute; top: 32px; left: 0; width: 100%;
  font-size: 8px; font-weight: 700; color: #fff; white-space: nowrap;
}
.sui-gift-sender {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ff2e88, #ff5ca8); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(255, 46, 136, 0.4);
}
/* 右：もう一度使うパネル */
.sui-again {
  position: absolute; right: 8px; top: 100px; width: 88px;
  background: rgba(16, 10, 22, 0.42); border-radius: 12px; padding: 7px 6px;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.sui-again-head { display: flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; }
.sui-again-card {
  margin-top: 6px; padding: 5px 7px; border-radius: 10px;
  border: 1px solid rgba(255, 92, 168, 0.6); background: rgba(28, 14, 30, 0.32);
}
.sac-name { font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.sac-sec {
  display: flex; align-items: center; gap: 3px; margin-top: 3px; padding-bottom: 4px;
  font-size: 9px; color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.sac-pts {
  display: flex; align-items: center; gap: 3px; margin-top: 4px;
  font-family: var(--font-num); font-size: 10.5px; font-weight: 800; color: #ffd54d;
}
/* コメント欄 */
.sui-comments {
  position: absolute; left: 10px; right: 84px; bottom: 58px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px;
  max-height: 168px; overflow: hidden;
}
.sc {
  font-size: 9.5px; line-height: 1.4; border-radius: 10px; padding: 4px 9px;
  max-width: 100%; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.sc b { font-weight: 800; color: #ffd54d; }
.sc-lv {
  display: inline-block; background: #4a67ff; border-radius: 6px;
  font-size: 8.5px; font-weight: 800; font-family: var(--font-num); padding: 1px 5px; margin-right: 4px;
}
.sc-lv.is-navy { background: #3849c2; }
.sc-hearts {
  display: inline-flex; align-items: center; gap: 2px; background: #ff5ca8; border-radius: 6px;
  font-size: 8.5px; font-weight: 800; font-family: var(--font-num); padding: 1px 5px; margin-right: 4px;
}
.sc-join { display: flex; align-items: center; gap: 5px; padding-left: 0; color: rgba(255, 255, 255, 0.95); }
.sc-ico {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: #35d1a0; flex: none;
}
.sc-gift { background: linear-gradient(90deg, rgba(255, 46, 136, 0.88), rgba(255, 92, 168, 0.6)); }
.sc-sub { display: block; font-size: 8.5px; opacity: 0.9; margin-top: 1px; }
.sc-vip { background: linear-gradient(90deg, rgba(216, 164, 32, 0.92), rgba(255, 171, 64, 0.55)); }
.sc-tag {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 4px;
  background: rgba(255, 255, 255, 0.94); color: #a4770f;
  font-size: 8px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
}
.sc-body { display: block; font-size: 10px; font-weight: 700; margin-top: 1px; }
.sc-plain { display: flex; gap: 6px; padding-left: 0; }
.sc-ava { width: 18px; height: 18px; border-radius: 50%; background: #8b8496; flex: none; margin-top: 2px; }
.sc-user { display: block; font-size: 9px; font-weight: 600; opacity: 0.85; }
/* 下段：入力バー */
.sui-bar {
  position: absolute; left: 10px; right: 10px; bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.sui-input {
  flex: 1; display: flex; justify-content: space-between; align-items: center;
  background: rgba(18, 12, 26, 0.5); border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px; padding: 6px 11px; font-size: 9.5px; color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); white-space: nowrap;
}
.sui-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; }
.sui-btn.is-cam { background: linear-gradient(135deg, #38d4a4, #17b489); box-shadow: 0 5px 12px rgba(23, 180, 137, 0.4); }
.sui-btn.is-lov { background: linear-gradient(135deg, #ff5ca8, #ff2e88); box-shadow: 0 5px 12px rgba(255, 46, 136, 0.45); }
.sui-btn.is-gift { background: linear-gradient(135deg, #ff6a3d, #ff2e5e); box-shadow: 0 5px 12px rgba(255, 62, 94, 0.45); }
.sui-okwrap {
  position: absolute; right: 8px; bottom: 48px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.sui-oktag {
  font-size: 9px; font-weight: 800; color: #fff; padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}
.sui-oktag.is-teal { background: #35d1a0; }
.sui-oktag.is-pink { background: linear-gradient(135deg, #ff5ca8, #ff2e88); }
/* 演出（reduced-motionでは静止） */
@media (prefers-reduced-motion: no-preference) {
  .js .ring-arc { animation: giftRing 10s linear infinite; }
  .js .ring-arc2 { animation-delay: -4s; }
  .sc-enter { animation: scEnter 0.35s ease; }
}
@keyframes giftRing { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 169.6; } }
@keyframes scEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* （モック用リボン・注記スタイルは撤去済み：FV写真側の .hero-ribbon / .mock-caption を使用） */

/* ============================================================
   05. 実績バンド（ゴールド）
   ============================================================ */
.achievement {
  position: relative;
  background:
    radial-gradient(700px 300px at 50% -40%, rgba(236, 195, 94, 0.16), transparent 70%),
    linear-gradient(180deg, #140e20, #0e0a17);
  border-block: 1px solid rgba(236, 195, 94, 0.28);
  padding-block: clamp(36px, 6vw, 60px);
  text-align: center;
}
.achievement-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(13px, 2.6vw, 15px); font-weight: 800; letter-spacing: 0.14em;
  color: var(--gold-1); margin-bottom: 12px;
}
.achievement-label .mi { color: var(--gold-2); width: 1.3em; height: 1.3em; }
.achievement-title { font-size: clamp(15px, 3vw, 20px); font-weight: 700; color: var(--sub-on-dark); }
.achievement-num {
  display: block; margin-top: 6px;
  font-size: clamp(34px, 8vw, 64px); font-weight: 900; line-height: 1.25; letter-spacing: 0.02em;
  background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(236, 195, 94, 0.25));
}
.achievement-num .unit { font-size: 0.5em; }
.achievement-sub { margin-top: 8px; font-size: clamp(13px, 2.7vw, 16px); font-weight: 700; color: var(--gold-1); }
.achievement-note { margin-top: 10px; font-size: 11.5px; color: var(--faint-on-dark); }

/* ============================================================
   06. 課題チェック（頭打ち）
   ============================================================ */
.pain-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 920px; margin-inline: auto; }
.pain-item {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; font-size: 14px; font-weight: 600;
  background: #fff; border: 1px solid var(--line-paper); border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(31, 15, 45, 0.06);
}
.pain-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; color: #fff; background: var(--grad-pink); flex-shrink: 0;
}
.pain-check svg { width: 13px; height: 13px; }
.pain-conclusion {
  max-width: 920px; margin: 26px auto 0; text-align: center;
  font-size: clamp(14.5px, 2.9vw, 17px); font-weight: 800;
  padding: 16px 20px; border-radius: var(--radius-md);
  color: var(--pink-deep); background: rgba(255, 46, 136, 0.07);
  border: 1px dashed rgba(255, 46, 136, 0.4);
}

/* ============================================================
   07. 3つの理由
   ============================================================ */
.reason-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.reason-card {
  position: relative; padding: 26px 22px;
  background: #fff; border: 1px solid var(--line-paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.reason-card::before {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 3px;
  background: var(--grad-pink);
}
.reason-num {
  font-family: var(--font-num); font-size: 30px; font-weight: 800; line-height: 1;
  background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.reason-card h3 { font-size: 19px; font-weight: 800; margin: 8px 0 4px; }
.reason-catch { font-size: 12.5px; font-weight: 700; color: var(--pink); margin-bottom: 10px; }
.reason-card p { font-size: 13.5px; color: var(--text-sub); }
.reason-card p strong { color: var(--text); }
.reason-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 12px;
  color: var(--pink); background: rgba(255, 46, 136, 0.07); border: 1px solid rgba(255, 46, 136, 0.25);
}
.reason-icon svg { width: 23px; height: 23px; }

/* ============================================================
   08. 従来 vs 当社（比較）
   ============================================================ */
.versus-grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 960px; margin-inline: auto; }
.versus-col { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-paper); background: #fff; box-shadow: var(--shadow-card); }
.versus-head { padding: 12px 16px; text-align: center; font-size: 14.5px; font-weight: 800; color: #fff; background: #8d8598; }
.versus-col.is-new .versus-head { background: var(--grad-pink); }
.versus-body { padding: 22px 20px; }
.versus-flow { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.versus-step {
  text-align: center; font-size: 14px; font-weight: 700;
  padding: 12px 14px; border-radius: 10px;
  background: #f3f0f6; color: var(--text-sub);
}
.versus-col.is-new .versus-step { background: rgba(255, 46, 136, 0.07); color: var(--text); border: 1px solid rgba(255, 46, 136, 0.22); }
/* FreeLive＝緑／PremiumLive＝オレンジ（2026-08-10 上司指示で統一） */
.versus-col.is-new .versus-step.vs-free { background: rgba(47, 191, 113, 0.10); border-color: rgba(47, 191, 113, 0.45); color: #17734a; }
.versus-col.is-new .versus-step.vs-prem { background: rgba(255, 138, 30, 0.10); border-color: rgba(255, 138, 30, 0.5); color: #a35300; }
.versus-arrow { align-self: center; width: 18px; height: 18px; color: #b9b2c4; transform: rotate(90deg); }
.versus-col.is-new .versus-arrow { color: var(--pink); }
.versus-result {
  margin-top: 10px; text-align: center; font-size: clamp(16px, 3.4vw, 20px); font-weight: 900;
  color: var(--pink);
}
.versus-col:not(.is-new) .versus-result { color: #8d8598; font-weight: 700; font-size: 14.5px; }
.versus-note { max-width: 960px; margin: 22px auto 0; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }
.versus-note p { font-size: 14px; color: var(--text-sub); }
.versus-note p strong { color: var(--pink); }
.versus-photo { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-paper); box-shadow: var(--shadow-card); max-width: 320px; margin-inline: auto; }
.versus-photo img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }

/* ============================================================
   09. 収益性バンド（ダーク・4カード）
   ============================================================ */
.money-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.money-card {
  position: relative; padding: 24px 20px; text-align: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
}
.money-card::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(236,195,94,0.7), transparent);
}
.money-title { font-size: 15.5px; font-weight: 800; color: var(--text-on-dark); }
.money-value {
  display: block; margin: 8px 0 6px;
  font-family: var(--font-num); font-size: clamp(22px, 4.6vw, 30px); font-weight: 900; line-height: 1.3;
  background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.money-value small { font-size: 0.55em; font-weight: 800; }
.money-card p { font-size: 13px; color: var(--sub-on-dark); }
.money-note { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--faint-on-dark); }

/* ============================================================
   10. サポート機能グリッド（10個）
   ============================================================ */
.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.support-item {
  padding: 18px 14px; text-align: center;
  background: #fff; border: 1px solid var(--line-paper); border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(31, 15, 45, 0.05);
}
.support-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 10px;
  color: var(--pink); background: rgba(255, 46, 136, 0.07); border: 1px solid rgba(255, 46, 136, 0.22);
}
.support-icon svg { width: 21px; height: 21px; }
.support-item h3 { font-size: 13.5px; font-weight: 800; line-height: 1.5; }
.support-item p { margin-top: 5px; font-size: 11.5px; color: var(--text-sub); line-height: 1.7; }

/* ============================================================
   11. 2つのプロダクション
   ============================================================ */
.audience-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.audience-card {
  background: #fff; border: 1px solid var(--line-paper); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.audience-head { padding: 13px 18px; font-size: 15px; font-weight: 800; color: #fff; background: var(--grad-pink); }
.audience-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.audience-photo { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-paper); }
.audience-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.audience-body > p { font-size: 13.5px; color: var(--text-sub); }
.audience-body > p strong { color: var(--text); }
.audience-list { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.audience-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 700; }
.audience-list .pain-check { width: 21px; height: 21px; border-radius: 6px; margin-top: 2px; }
.audience-list .pain-check svg { width: 11px; height: 11px; }
.audience-close { font-size: 14px; color: var(--pink-deep); text-align: center; padding-top: 4px; }

/* ============================================================
   12. 管理画面モックアップ（ダーク窓）
   ※2026-08-10 管理画面セクションはHTMLから撤去済み（現在未使用）。
     復活させる場合のためにスタイルは保持している。
   ============================================================ */
.dashboard-showcase { margin-bottom: 34px; }
.mock-window {
  position: relative; max-width: 900px; margin-inline: auto;
  background: linear-gradient(180deg, #1b1428, #141020);
  border: 1px solid rgba(255, 92, 168, 0.25); border-radius: 18px;
  box-shadow: var(--shadow-dark); overflow: hidden;
  color: var(--text-on-dark);
}
.mock-titlebar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line-dark); background: rgba(255,255,255,0.03); }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.mock-dot:first-child { background: var(--pink-2); }
.mock-title { margin-left: 8px; font-size: 10.5px; letter-spacing: 0.05em; color: var(--faint-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-body { display: flex; gap: 12px; padding: 14px; }
.mock-side { display: none; flex-direction: column; gap: 10px; padding: 6px 4px; }
.mock-side-item { width: 34px; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.08); }
.mock-side-item.is-active { background: var(--grad-pink); }
.mock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mock-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mock-kpi { padding: 12px 12px 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-dark); border-radius: 12px; min-width: 0; }
.mock-kpi-label { display: block; font-size: 10px; color: var(--faint-on-dark); letter-spacing: 0.04em; }
.mock-kpi-value { display: block; font-family: var(--font-num); font-size: clamp(14px, 2.4vw, 17px); font-weight: 700; margin-top: 3px; white-space: nowrap; }
.mock-kpi-diff { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 700; color: var(--faint-on-dark); }
.mock-kpi-diff.is-up { color: var(--ok); }
.mock-chart, .mock-bars { padding: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-dark); border-radius: 12px; min-width: 0; }
.mock-chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: var(--sub-on-dark); margin-bottom: 8px; }
.mock-chip { font-size: 9.5px; font-weight: 600; color: var(--faint-on-dark); padding: 2px 8px; border: 1px solid var(--line-dark); border-radius: 999px; }
.chart-svg { display: block; width: 100%; height: 96px; }
.mock-cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
.bar-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.bar-label { font-size: 10px; color: var(--faint-on-dark); width: 1.4em; }
.bar { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--grad-pink); }
.mock-list { display: flex; flex-direction: column; border: 1px solid var(--line-dark); border-radius: 12px; overflow: hidden; }
.mock-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255,255,255,0.03); font-size: 12px; }
.mock-row + .mock-row { border-top: 1px solid var(--line-dark); }
.mock-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--font-num); font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--a1, #ff2e88), var(--a2, #8a5cff)); flex-shrink: 0;
}
.mock-row-name { color: var(--sub-on-dark); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-pill { font-size: 9.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: var(--faint-on-dark); border: 1px solid var(--line-dark); white-space: nowrap; }
.mock-pill.is-live { color: #6ff0c2; border-color: rgba(34,201,143,0.5); background: rgba(34,201,143,0.1); }
.mock-row-val { margin-left: auto; font-family: var(--font-num); font-weight: 700; font-size: 12px; white-space: nowrap; }
.mock-caption { margin-top: 12px; font-size: 11px; color: var(--text-faint); text-align: center; }

.card-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.card-slim {
  padding: 20px; background: #fff; border: 1px solid var(--line-paper);
  border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(31,15,45,0.05);
}
.card-slim h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; line-height: 1.6; }
.card-slim .badge-soon { margin-left: 0; margin-right: 8px; }
.card-slim p { font-size: 13px; color: var(--text-sub); }

/* ============================================================
   13. 上司（代表）メッセージ
   ※2026-08-10 メッセージ枠はHTMLから撤去済み（現在未使用）。
     復活させる場合のためにスタイルは保持している。
   ============================================================ */
.section-message {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(255, 46, 136, 0.10), transparent 60%),
    var(--bg-2);
  border-block: 1px solid var(--line-dark);
}
.message-panel {
  position: relative; max-width: 780px; margin-inline: auto;
  padding: clamp(34px, 6vw, 60px) clamp(22px, 5vw, 60px);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark); text-align: center;
}
.message-panel::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--pink), var(--gold-2));
}
.message-quote {
  display: block; font-family: Georgia, "Times New Roman", serif; font-size: 60px; line-height: 0.6;
  margin: 16px auto 6px;
  background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.message-heading { font-size: clamp(22px, 4.2vw, 32px); font-weight: 800; line-height: 1.5; margin-top: 10px; }
.message-lead { margin-top: 16px; font-size: clamp(13.5px, 2.6vw, 15px); font-weight: 600; color: #ffb1d4; line-height: 2; }
.message-body { margin-top: 26px; text-align: left; font-size: 14.5px; color: var(--sub-on-dark); line-height: 2.15; }
.message-body p + p { margin-top: 1.4em; }
.message-closing { margin-top: 28px; font-size: 15px; font-weight: 700; line-height: 2; }
.message-signature { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.signature-role { font-size: 12px; color: var(--faint-on-dark); }
.signature-name { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; }
.draft-note {
  margin-top: 22px; font-size: 11px; color: var(--faint-on-dark);
  border: 1px dashed var(--line-dark); border-radius: 8px; padding: 6px 12px; display: inline-block;
}

/* ============================================================
   14. ご契約までの流れ（STEP1〜7）
   ============================================================ */
.step-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 1040px; margin: 0 auto; }
.step-item {
  position: relative; text-align: center; padding: 20px 12px 16px;
  background: #fff; border: 1px solid var(--line-paper); border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(31, 15, 45, 0.05);
}
.step-num {
  display: inline-block; font-family: var(--font-num); font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
  color: var(--pink); margin-bottom: 8px;
}
.step-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px;
  color: var(--pink); background: rgba(255, 46, 136, 0.07); border: 1px solid rgba(255, 46, 136, 0.22);
}
.step-icon svg { width: 22px; height: 22px; }
.step-item.is-line .step-icon { color: #fff; background: var(--line-green); border-color: var(--line-green); }
.step-item h3 { font-size: 13px; font-weight: 800; line-height: 1.5; }

/* ============================================================
   15. FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--line-paper); border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(31, 15, 45, 0.05); overflow: hidden; transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: rgba(255, 46, 136, 0.45); }
.faq-item summary {
  display: flex; align-items: center; gap: 14px; padding: 17px 18px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; list-style: none; line-height: 1.7;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  font-family: var(--font-num); font-size: 13px; font-weight: 700; color: #fff;
  background: var(--grad-pink); flex-shrink: 0;
}
.faq-toggle { position: relative; width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; }
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px;
  background: var(--pink); border-radius: 2px; transform: translate(-50%, -50%); transition: transform 0.25s ease;
}
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 20px 18px 60px; font-size: 13.5px; color: var(--text-sub); line-height: 2; }

/* ============================================================
   16. 最終CTA
   ============================================================ */
.section-cta {
  background:
    radial-gradient(800px 420px at 50% -10%, rgba(255, 46, 136, 0.22), transparent 65%),
    var(--bg-1);
  border-top: 1px solid var(--line-dark);
  padding-block: clamp(56px, 8vw, 92px);
  text-align: center;
}
.cta-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--gold-1); border: 1px solid rgba(236,195,94,0.5); border-radius: 999px;
  padding: 6px 16px; margin-bottom: 16px; background: rgba(236,195,94,0.07);
}
.cta-title { font-size: clamp(24px, 5vw, 40px); font-weight: 900; line-height: 1.5; }
.cta-lead { margin-top: 14px; font-size: clamp(13.5px, 2.6vw, 15.5px); color: var(--sub-on-dark); }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.cta-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; font-size: 12px; color: var(--sub-on-dark); }
.cta-notes li { display: inline-flex; align-items: center; gap: 6px; }
.cta-notes li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--grad-pink); }

/* ============================================================
   17. フッター
   ============================================================ */
.site-footer { background: var(--bg-0); border-top: 1px solid var(--line-dark); padding-top: 44px; }
.footer-inner { display: flex; flex-direction: column; gap: 26px; padding-bottom: 22px; }
.footer-desc { margin-top: 12px; font-size: 12.5px; color: var(--sub-on-dark); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer-nav a { font-size: 13px; color: var(--sub-on-dark); text-decoration: none; }
.footer-nav a:hover { color: #fff; }
.footer-note { padding-bottom: 16px; font-size: 11px; color: var(--faint-on-dark); line-height: 1.9; }
.footer-bottom {
  border-top: 1px solid var(--line-dark); padding-block: 18px;
  padding-bottom: calc(18px + 76px); /* 追従CTA分の余白 */
  color: var(--faint-on-dark); font-size: 11.5px;
}

/* ============================================================
   18. 追従CTA（スマホのみ）
   ============================================================ */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; transition: transform 0.35s ease, opacity 0.35s ease; }
.sticky-cta.is-hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }

/* ============================================================
   19. アニメーション
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* ============================================================
   19.4 v3.2 FVハイクオリティ化（本家FVの密度・金装飾に寄せる）
   ※既存の 04.ヒーロー / 05.実績バンド への上書き。後勝ちで適用
   ============================================================ */
/* 背景：金の光＋きらめきを追加 */
.hero {
  padding-top: calc(64px + clamp(26px, 4.5vw, 44px));
  background:
    radial-gradient(1000px 500px at 15% -12%, rgba(236, 195, 94, 0.14), transparent 60%),
    radial-gradient(900px 620px at 88% 6%, rgba(255, 46, 136, 0.22), transparent 62%),
    radial-gradient(700px 500px at -5% 62%, rgba(124, 46, 200, 0.20), transparent 60%),
    var(--bg-1);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 12% 28%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 10%, rgba(236,195,94,0.65), transparent 60%),
    radial-gradient(2px 2px at 55% 18%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 32%, rgba(236,195,94,0.55), transparent 60%),
    radial-gradient(2px 2px at 92% 62%, rgba(255,255,255,0.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 55%, rgba(236,195,94,0.4), transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: twinkle 5s ease-in-out infinite alternate; }
}
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.9; } }
.hero .container { position: relative; z-index: 1; }

/* フックリボン（業界関係者様に朗報） */
.hook-ribbon {
  display: inline-flex; align-items: center;
  font-size: clamp(12px, 2.6vw, 14px); font-weight: 800; letter-spacing: 0.14em;
  color: var(--gold-1);
  background: linear-gradient(180deg, #7e1230, #56091f);
  border: 1px solid rgba(236, 195, 94, 0.7);
  padding: 7px 18px; border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  margin-bottom: 14px;
}
.hero-eyebrow { margin-bottom: 14px; }
.hero-title { font-size: clamp(35px, 7.6vw, 62px); line-height: 1.26; }
.hero-lead { margin-top: 14px; }

/* 課題提起2連 */
.pain-qs { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.pain-q {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--sub-on-dark); line-height: 1.7;
  padding: 10px 14px;
  border: 1px solid rgba(236, 195, 94, 0.28); border-left: 3px solid var(--gold-2);
  background: rgba(255, 255, 255, 0.03); border-radius: 8px;
}
.pain-q .mi { color: var(--gold-2); width: 1.25em; height: 1.25em; flex-shrink: 0; }
.pain-q em { color: var(--pink-2); font-style: normal; font-weight: 800; }

/* FreeLive→PremiumLive フローピル */
.flow-pills {
  margin-top: 16px; padding: 15px 14px 14px;
  border: 1px solid rgba(236, 195, 94, 0.5); border-radius: 14px;
  background:
    radial-gradient(320px 90px at 50% 0%, rgba(236, 195, 94, 0.12), transparent 70%),
    rgba(255, 255, 255, 0.03);
  text-align: center;
}
.flow-pills-lead { font-size: 12.5px; font-weight: 700; color: var(--gold-1); letter-spacing: 0.04em; margin-bottom: 10px; }
.flow-pills-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.fp { padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.fp-free { color: #fff; background: var(--free); box-shadow: 0 6px 16px rgba(47, 191, 113, 0.35); }
.fp-prem { color: #40220a; background: linear-gradient(180deg, #ffb054, var(--prem)); box-shadow: 0 6px 16px rgba(255, 138, 30, 0.35); }
.fp-arrow { display: inline-flex; width: 20px; height: 20px; color: var(--gold-2); flex-shrink: 0; }

/* 勲章バッジ：二重金枠＋光沢＋明朝 */
.medal-row { margin-top: 30px; }
.medal {
  border: 1px solid rgba(236, 195, 94, 0.6);
  background:
    radial-gradient(150px 74px at 50% 0%, rgba(236, 195, 94, 0.17), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 0 0 2px rgba(236, 195, 94, 0.2),
    0 10px 26px rgba(0, 0, 0, 0.35);
}
.medal-value { font-family: var(--font-serif); font-weight: 700; }

/* 募集開始帯：ゴールド化 */
.announce { margin-top: 18px; border: 1px solid rgba(236, 195, 94, 0.75); box-shadow: 0 16px 40px rgba(236, 195, 94, 0.16); }
.announce-main {
  font-family: var(--font-serif); font-weight: 800;
  font-size: clamp(16.5px, 3.6vw, 25px); letter-spacing: 0.05em;
  color: #48280a; background: var(--grad-gold);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.announce-sub { color: var(--gold-1); background: linear-gradient(180deg, #221724, #150f1c); font-weight: 800; }

/* CTA行：中央寄せ（フル幅化） */
.hero-cta { justify-content: center; margin-top: 24px; }
.hero-note { text-align: center; }

/* 写真：内側金フレーム＋LIVEバッジ＋リアクション演出 */
.hero-visual { max-width: 520px; }
.hero-photo::after {
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(236, 195, 94, 0.4); border-radius: 18px;
}
.live-chip {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-num); font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  color: #fff; background: rgba(22, 8, 18, 0.72);
  border: 1px solid rgba(255, 92, 168, 0.65);
  padding: 6px 13px; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.live-dot--live { background: #ff3b5c; }
@media (prefers-reduced-motion: no-preference) {
  .live-dot--live { animation: livePulseRed 1.6s ease-in-out infinite; }
}
@keyframes livePulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(255, 59, 92, 0); }
}
.react-float { position: absolute; right: 14px; bottom: 15%; z-index: 3; display: flex; flex-direction: column; gap: 10px; }
.react-bubble {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, #ff2e88, #ff5ca8);
  box-shadow: 0 10px 24px rgba(255, 46, 136, 0.45);
}
.react-bubble svg { width: 18px; height: 18px; }
.react-bubble.is-gold { background: var(--grad-gold); color: #4a2a05; box-shadow: 0 10px 24px rgba(236, 195, 94, 0.4); }
@media (prefers-reduced-motion: no-preference) {
  .react-bubble { animation: bob 3s ease-in-out infinite; }
  .react-bubble:nth-child(2) { animation-delay: 0.5s; }
  .react-bubble:nth-child(3) { animation-delay: 1s; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* --- スマホFV：v3.7でテキストを写真に重ねる構成へ（実体はCSS末尾セクション23） --- */

/* 実績バンド：放射光＋明朝数字＋月桂樹 */
.achievement {
  background:
    radial-gradient(800px 360px at 50% -30%, rgba(236, 195, 94, 0.22), transparent 70%),
    repeating-conic-gradient(from -90deg at 50% 130%, rgba(236, 195, 94, 0.05) 0deg 5deg, transparent 5deg 11deg),
    linear-gradient(180deg, #171021, #0e0a17);
}
.achievement-num { font-family: var(--font-serif); }
.achievement-row { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 22px); }
.ach-laurel { width: clamp(44px, 8vw, 84px); height: auto; color: var(--gold-2); opacity: 0.9; flex-shrink: 0; }

/* ============================================================
   19.5 v3.1 追加コンポーネント（本家LP starslive.work 準拠の増補）
   ============================================================ */
/* 汎用の小さな注記 */
.section-note { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--text-faint); line-height: 1.9; }
.section-dark .section-note { color: var(--faint-on-dark); }

/* 対象セクション：ゴール宣言と比較表 */
.audience-goal {
  margin: 28px auto 0; max-width: 860px; text-align: center;
  font-weight: 800; font-size: clamp(14.5px, 3vw, 18px); color: var(--pink-deep);
}
.compare-table-wrap {
  max-width: 860px; margin: 26px auto 0;
  overflow-x: auto; border: 1px solid var(--line-paper); border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(31, 15, 45, 0.05);
}
.compare-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 12.5px; }
.compare-table th, .compare-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-paper); text-align: center; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table thead th { background: var(--grad-pink); color: #fff; font-size: 12.5px; letter-spacing: 0.04em; }
.compare-table tbody th { background: var(--paper-2); font-weight: 700; white-space: nowrap; color: var(--text-sub); }

/* グローバル集客：自動翻訳デモ */
.translate-demo { max-width: 680px; margin: 0 auto 30px; display: flex; flex-direction: column; gap: 8px; }
.bubble { padding: 13px 17px; border-radius: 14px; font-size: 14px; line-height: 1.8; }
.bubble-tag {
  display: inline-block; font-family: var(--font-num); font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.12em; padding: 2px 9px; border-radius: 999px; margin-bottom: 6px;
}
.bubble-en { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-dark); color: var(--sub-on-dark); }
.bubble-en .bubble-tag { background: rgba(255, 255, 255, 0.1); color: var(--sub-on-dark); }
.bubble-jp { background: rgba(255, 46, 136, 0.12); border: 1px solid rgba(255, 92, 168, 0.45); color: var(--text-on-dark); font-weight: 700; }
.bubble-jp .bubble-tag { background: var(--grad-pink); color: #fff; }
.translate-arrow { text-align: center; font-size: 11px; font-weight: 700; color: var(--faint-on-dark); letter-spacing: 0.1em; }

/* 安心・安全技術（自動追従モザイク＋3つの安心） */
.safety-feature {
  max-width: 860px; margin: 0 auto 26px; padding: 26px 22px;
  background: #fff; border: 1px solid rgba(255, 46, 136, 0.35);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.safety-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  color: #fff; background: var(--grad-pink); border-radius: 999px; padding: 3px 12px; margin-bottom: 10px;
}
.safety-feature h3 { font-size: clamp(17px, 3.4vw, 21px); font-weight: 800; line-height: 1.6; margin-bottom: 8px; }
.safety-feature > p { font-size: 13.5px; color: var(--text-sub); }
.safety-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.safety-step {
  text-align: center; padding: 13px 8px;
  background: var(--paper-2); border: 1px solid var(--line-paper); border-radius: 12px;
  font-size: 12px; font-weight: 700; line-height: 1.6;
}
.safety-step small {
  display: block; font-family: var(--font-num); font-size: 9.5px; font-weight: 800;
  color: var(--pink); letter-spacing: 0.12em; margin-bottom: 4px;
}

/* ============================================================
   配信ログ分析モック（実画面を基にした構成・人物/ユーザー名は伏せる）
   実画面がライトUIのため、このモックだけ白基調で再現する
   ============================================================ */
.alog-window {
  max-width: 1040px; margin-inline: auto;
  background: #fff; border: 1px solid #e6dfee; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(31, 15, 45, 0.14);
  overflow: hidden;
}
.alog-titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; border-bottom: 1px solid #efe9f5; background: #faf8fc;
}
.alog-titlebar .mock-dot { background: #e3dcec; }
.alog-titlebar .mock-dot:first-child { background: #ff9ec4; }
.alog-title { margin-left: 8px; font-size: 10.5px; letter-spacing: 0.05em; color: #9a91ad; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alog-case {
  margin-left: auto; flex-shrink: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
  color: #fff; background: var(--grad-pink);
  padding: 3px 11px; border-radius: 999px; white-space: nowrap;
}
.alog-body { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px; }

/* 左：アーカイブ動画（人物は出さない） */
.alog-video {
  position: relative; border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(220px 180px at 70% 30%, rgba(255, 46, 136, 0.35), transparent 70%),
    radial-gradient(260px 200px at 25% 75%, rgba(124, 46, 200, 0.4), transparent 70%),
    linear-gradient(160deg, #241530, #150c1e);
  display: flex; align-items: center; justify-content: center;
}
/* スマホ（1カラム時）は縦動画らしい縦長プレーヤーで顔が見切れないように */
@media (max-width: 899px) {
  .alog-video { aspect-ratio: 3 / 4; max-width: 420px; margin-inline: auto; width: 100%; }
}
.alog-video-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%;
}
/* サムネの上に暗めのグラデ（再生ボタン・時間表示の可読性） */
.alog-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 5, 15, 0.3), transparent 40%, rgba(10, 5, 15, 0.6));
}
.alog-video-chip, .alog-play, .alog-video-time { position: relative; z-index: 2; }
.alog-video-chip { position: absolute; }
.alog-video-time { position: absolute; }
.alog-video-chip {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-num); font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  color: #fff; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 10px; border-radius: 999px;
}
.alog-video-chip .live-dot { background: #ff3b5c; margin-right: 0; }
.alog-play {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.alog-play svg { width: 22px; height: 22px; margin-left: 3px; }
.alog-video-time {
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-num); font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, 0.8);
}
.alog-video-track { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.alog-video-track span { display: block; width: 34%; height: 100%; background: var(--grad-pink); border-radius: 999px; }
.alog-video-note {
  position: absolute; top: 10px; right: 10px;
  font-size: 9.5px; color: rgba(255, 255, 255, 0.6);
}

/* 中央：視聴者×ポイントの時系列チャート */
.alog-chart { position: relative; border: 1px solid #efe9f5; border-radius: 12px; padding: 12px; min-width: 0; }
.alog-panel-head { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 800; color: #4a4060; margin-bottom: 8px; }
.alog-chart-svg { display: block; width: 100%; height: auto; }
.alog-callout {
  position: absolute; z-index: 2;
  font-size: 10.5px; font-weight: 800; line-height: 1.5;
  padding: 5px 10px; border-radius: 8px; background: #fff;
  box-shadow: 0 6px 16px rgba(31, 15, 45, 0.12);
}
.alog-callout.is-free { top: 40px; left: 6%; color: #1e9e5a; border: 1px solid rgba(47, 191, 113, 0.55); }
.alog-callout.is-prem { top: 84px; right: 3%; color: #d86e00; border: 1px solid rgba(255, 138, 30, 0.55); }
.alog-timeline { display: flex; margin-top: 10px; border-radius: 999px; overflow: hidden; font-size: 10px; font-weight: 800; color: #fff; text-align: center; }
.alog-timeline .tl-free { width: 47%; padding: 4px 2px; background: var(--free); }
.alog-timeline .tl-prem { width: 53%; padding: 4px 2px; background: linear-gradient(90deg, #ffa540, var(--prem)); color: #40260a; }
.alog-legend { display: flex; gap: 16px; justify-content: center; margin-top: 10px; font-size: 11px; font-weight: 700; color: #6f6584; }
.alog-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.alog-legend .lg i { width: 16px; height: 3px; border-radius: 2px; }
.alog-legend .lg-view i { background: #5b8def; }
.alog-legend .lg-pt i { background: var(--pink); }

/* --- 配信ログ折れ線のリプレイ演出（JS時のみ再生。JS無効/reduced-motionでは完成形の静止表示） --- */
.alog-playhead,
.alog-tip { opacity: 0; transition: opacity 0.35s ease; }
.alog-tip-pt { filter: drop-shadow(0 0 4px rgba(255, 46, 136, 0.75)); }
.alog-tip-view { filter: drop-shadow(0 0 3px rgba(91, 141, 239, 0.75)); }
.alog-draw { transition: opacity 0.36s ease; }
.alog-callout { transition: opacity 0.5s ease, transform 0.5s ease; }
.js .alog-chart.is-sweeping .alog-playhead,
.js .alog-chart.is-sweeping .alog-tip { opacity: 1; }
.js .alog-chart.is-sweeping .alog-callout { opacity: 0; transform: translateY(8px); }
.js .alog-chart.is-sweeping .alog-callout.is-on { opacity: 1; transform: translateY(0); }
.js .alog-chart.is-resetting .alog-draw,
.js .alog-chart.is-resetting .alog-callout { opacity: 0; }

/* --- ARCHIVE枠のStars配信画面UI（コンパクト再現・sui-*基本スタイルを流用） --- */
.alog-sui { position: absolute; inset: 0; z-index: 2; color: #fff; pointer-events: none; }
.alog-sui .sui-top { top: 10px; left: 8px; right: 8px; }
.alog-sui .sui-live { font-size: 9.5px; padding: 3px 8px; }
.alog-sui .sui-pill { font-size: 9.5px; padding: 3px 7px; }
.alog-sui .sui-performer { top: 40px; left: 8px; }
.alog-sui .sui-gifts { top: 80px; left: 8px; }
.alog-sui .sui-gifts { gap: 10px; }
.alog-sui .sui-gift.is-sub { margin-top: 0; }
.alog-sui .sui-comments { left: 8px; right: 8px; bottom: 34px; max-height: 104px; }
.alog-sui .sui-okwrap { right: 8px; bottom: 38px; }
/* もう一度使うパネル：ARCHIVEチップ下。PCの狭カラム（3カラム時）では顔を隠すため非表示 */
.alog-sui .sui-again { top: 64px; right: 8px; width: 86px; }
@media (min-width: 900px) {
  .alog-sui .sui-again { display: none; }
}
/* ギフト使用コメントの順位バッジ（👑2位） */
.sc-rank {
  display: inline-flex; align-items: center; gap: 2px; margin-right: 4px;
  background: rgba(255, 255, 255, 0.94); color: #8a6d1a;
  font-size: 8px; font-weight: 800; padding: 1px 6px; border-radius: 6px;
}
/* 3連タイマーのリングを時間差で回す */
@media (prefers-reduced-motion: no-preference) {
  .js .ring-arc3 { animation-delay: -7s; }
}
/* ARCHIVEチップは配信タイマーと重ならないよう右上ピルの下へ */
.alog-video-chip { top: 36px; left: auto; right: 8px; }
/* リプレイがFree区間(28:23)を超えたらPremium表示へ切替（JS 3.5が制御） */
.sui-live.is-prem {
  background: linear-gradient(135deg, #ffa540, #f08300); color: #40260a;
  box-shadow: 0 4px 12px rgba(240, 131, 0, 0.35);
}

/* 右：数値・ユーザー分析（ユーザー名は伏せる） */
.alog-stats { border: 1px solid #efe9f5; border-radius: 12px; padding: 12px; min-width: 0; }
.alog-stat-line { font-size: 12.5px; font-weight: 700; color: #4a4060; padding: 4px 0; }
.alog-stat-line strong { color: var(--pink-deep); font-family: var(--font-num); font-size: 15px; }
.alog-breakdown { margin: 8px 0; border-top: 1px dashed #e9e2f0; border-bottom: 1px dashed #e9e2f0; padding: 8px 0; }
.alog-bd-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #6f6584; padding: 3px 0; }
.alog-bd-row b { font-family: var(--font-num); color: #2a1f38; white-space: nowrap; }
.alog-rank-title { font-size: 11.5px; font-weight: 800; color: #4a4060; margin: 8px 0 4px; }
.alog-rank-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #6f6584; padding: 5px 0;
  border-bottom: 1px solid #f4eff8;
}
.alog-rank-row:last-child { border-bottom: 0; }
.alog-rank-num { font-family: var(--font-num); font-weight: 800; width: 1.4em; text-align: center; color: #9a91ad; flex-shrink: 0; }
.alog-rank-num.is-g { color: #c9973a; }
.alog-rank-ava {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #b9aed6, #8d80b5);
}
.alog-rank-name { font-weight: 700; color: #4a4060; white-space: nowrap; }
.alog-rank-meta { font-size: 9.5px; color: #9a91ad; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alog-rank-pts { margin-left: auto; font-family: var(--font-num); font-weight: 800; color: var(--pink-deep); white-space: nowrap; }

@media (min-width: 900px) {
  .alog-body { grid-template-columns: 0.75fr 1.3fr 1fr; }
  .alog-video { min-height: 0; }
}

/* ============================================================
   自動追従モザイク・デモ（CSSアニメ・対象は抽象表現）
   ============================================================ */
.mosaic-demo {
  position: relative; max-width: 720px; height: 280px; margin: 0 auto 22px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 92, 168, 0.4);
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(420px 220px at 70% 15%, rgba(255, 46, 136, 0.16), transparent 70%),
    radial-gradient(380px 240px at 25% 90%, rgba(124, 46, 200, 0.24), transparent 70%),
    linear-gradient(165deg, #1c1026, #120b1c);
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
  box-shadow: var(--shadow-dark);
}
.md-chip {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-num); font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: #8ff5d3; background: rgba(10, 20, 16, 0.6);
  border: 1px solid rgba(34, 201, 143, 0.5); padding: 5px 12px; border-radius: 999px;
}
.md-chip .live-dot--live { background: #22c98f; }
.md-corner { position: absolute; width: 22px; height: 22px; z-index: 4; border: 0 solid rgba(255, 255, 255, 0.5); }
.md-tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.md-tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.md-bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }
.md-br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }

.md-mover { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.md-mover-lag { align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .md-mover { animation: mdtrack 4.5s ease-in-out infinite; }
  .md-mover-lag { animation-delay: 0.12s; } /* わずかに遅らせて「追従」感を出す */
}
@keyframes mdtrack { 0%, 100% { transform: translateX(-70px); } 50% { transform: translateX(70px); } }

/* 対象（女性ピクトグラム・SVG） */
.md-figure {
  width: 122px; height: auto; margin-bottom: -14px;
  filter: drop-shadow(0 0 26px rgba(255, 92, 168, 0.35));
}
/* 検知枠＋モザイク（ピクトグラムの腰部＝スカート下端に重なる位置） */
.md-mover-lag { align-items: flex-end; }
.md-target {
  position: relative; width: 78px; height: 64px; margin-bottom: 82px;
  border: 1.5px dashed rgba(255, 92, 168, 0.95); border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(255, 46, 136, 0.16);
}
.md-label {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-num); font-size: 9px; font-weight: 800; letter-spacing: 0.14em;
  color: #ffb1d4; white-space: nowrap;
}
.md-mosaic {
  position: absolute; inset: 3px; border-radius: 6px;
  backdrop-filter: blur(9px) saturate(1.4); -webkit-backdrop-filter: blur(9px) saturate(1.4);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255, 255, 255, 0.07) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.07) 75%);
  background-size: 13px 13px, 13px 13px, 26px 26px;
}

/* ステップ（ダーク面用）とパンチライン */
.safety-steps-dark { max-width: 720px; margin: 0 auto; }
.safety-steps-dark .safety-step { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); color: var(--text-on-dark); }
.safety-steps-dark .safety-step small { color: var(--pink-2); }
.tech-punch {
  max-width: 840px; margin: 22px auto 0; text-align: center;
  font-size: clamp(13.5px, 2.8vw, 15.5px); color: var(--sub-on-dark); line-height: 2.1;
}
.tech-punch strong { font-family: var(--font-serif); font-size: clamp(15px, 3.2vw, 19.5px); }

/* フッター：運営会社情報 */
.footer-company {
  padding-bottom: 16px; font-size: 12px; color: var(--sub-on-dark); line-height: 2;
  border-top: 1px solid var(--line-dark); padding-top: 16px;
}
.footer-company strong { color: var(--text-on-dark); }

/* ============================================================
   20. レスポンシブ
   ============================================================ */
@media (max-width: 479px) {
  .brand-tag { display: none; }
  .brand-name { font-size: 16px; }
  .btn-header { padding: 9px 14px; font-size: 12px; }
}
@media (max-width: 767px) {
  .hero-eyebrow { white-space: nowrap; } /* チップ内で折り返さない（スマホは短文1行運用） */
}

@media (min-width: 480px) {
  .mock-side { display: flex; }
  .support-grid { grid-template-columns: repeat(3, 1fr); }
}

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

  .medal-row { grid-template-columns: repeat(4, 1fr); }
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .reason-grid { grid-template-columns: repeat(3, 1fr); }
  .versus-grid { grid-template-columns: 1fr 1.1fr; }
  .versus-note { grid-template-columns: 1fr 300px; }
  .money-grid { grid-template-columns: repeat(2, 1fr); }
  .support-grid { grid-template-columns: repeat(5, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .step-list { grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .mock-kpis { grid-template-columns: repeat(4, 1fr); }
  .mock-cols { grid-template-columns: 1.4fr 1fr; }

  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-bottom { padding-bottom: 18px; }
  .sticky-cta { display: none; }
}

@media (min-width: 1024px) {
  .global-nav { display: flex; }
  .hero-inner { grid-template-columns: 1.15fr 0.85fr; gap: 52px; }
  .hero { padding-top: calc(64px + 80px); }
  .money-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   21. v3.3 PCも「写真主役」FV（2026-08-10 上司指示「画像でバシっと」）
   写真を右側フルブリードにし、コピーはその上に重ねる
   ============================================================ */
@media (min-width: 1024px) {
  .hero-inner { position: relative; display: block; min-height: 560px; }
  .hero-copy { max-width: 55%; position: relative; z-index: 2; }
  .hero-visual {
    position: absolute; top: -110px; bottom: -34px;
    right: calc(50% - 50vw); width: 46vw; max-width: none; margin: 0; z-index: 1;
  }
  .hero-photo { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .hero-photo::after { display: none; }
  .hero-photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center top; }
  /* 左と下を背景色へ溶かして、コピーと勲章列につなげる */
  .hero-photo::before {
    background:
      linear-gradient(90deg, var(--bg-1) 0%, rgba(14, 10, 23, 0.55) 18%, rgba(14, 10, 23, 0) 55%),
      linear-gradient(0deg, var(--bg-1) 0%, rgba(14, 10, 23, 0) 26%);
  }
  .hero-ribbon { top: 128px; left: 26px; }
  .live-chip { top: 128px; right: 26px; }
  .react-float { bottom: 24%; right: 28px; }
  .hero-visual .mock-caption {
    position: absolute; right: 18px; bottom: 16px; margin: 0; z-index: 3;
    font-size: 10px; color: rgba(255, 255, 255, 0.6);
  }
}

/* ============================================================
   22. v3.7 FVテキスト強化（2026-08-11 上司版準拠「はっきり訴求」）
   写真FV（Live配信感）は維持し、コピー面を広告訴求型に再構成。
   語彙は審査セーフ（爆稼ぎ→一気に収益化）・40万人は非保証注記つき
   ============================================================ */
.hero-brandline { margin-top: 10px; font-size: 12px; letter-spacing: 0.08em; color: var(--sub-on-dark); font-weight: 700; }
.hero-open { margin-top: 6px; line-height: 1.1; }
.hero-open .ho-line1 { display: block; font-size: clamp(20px, 2.4vw, 27px); font-weight: 900; color: #fff; letter-spacing: 0.04em; }
.hero-open .ho-new { color: var(--gold-2); }
.hero-open .ho-line2 {
  display: block; margin-top: 2px;
  font-family: var(--font-serif); font-weight: 800;
  font-size: clamp(40px, 5.4vw, 58px); letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff3c4 8%, #ecc35e 55%, #c9973a 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(236, 195, 94, 0.28));
}
.hero-members { margin-top: 10px; }
.hm-lead { font-size: clamp(15px, 1.8vw, 19px); font-weight: 800; color: #fff; }
.hm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.hm-badge {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, #ff6a7c, #d21b3c 70%);
  color: #fff; font-size: 13.5px; font-weight: 800;
  transform: rotate(-8deg);
  box-shadow: 0 8px 20px rgba(210, 27, 60, 0.45);
}
.hm-num {
  font-family: var(--font-serif); font-weight: 800; line-height: 1;
  font-size: clamp(52px, 6.6vw, 72px);
  background: linear-gradient(180deg, #fff3c4 8%, #ecc35e 55%, #c9973a 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(236, 195, 94, 0.3));
}
.hm-num small { font-size: 0.42em; font-weight: 800; }
.hm-toppa {
  font-size: clamp(24px, 3vw, 34px); font-weight: 900; color: #fff;
  font-style: italic; letter-spacing: 0.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.hm-note { margin-top: 4px; font-size: 10px; color: var(--faint-on-dark); }
/* 課題ボックス（枠線＋赤丸アイコン＋金キーワード） */
.pain-qs { margin-top: 18px; display: grid; gap: 10px; }
.pain-qs .pain-q {
  display: flex; align-items: center; gap: 11px; margin: 0;
  background: linear-gradient(135deg, rgba(46, 10, 18, 0.85), rgba(24, 7, 13, 0.85));
  border: 1px solid rgba(217, 74, 74, 0.55); border-radius: 10px;
  padding: 12px 14px;
  font-size: clamp(13px, 1.55vw, 15px); font-weight: 800; color: #fff; line-height: 1.55;
}
.pain-qs .pain-q em { font-style: normal; color: var(--gold-2); }
.pq-ico {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #e6394f, #a91330);
  box-shadow: 0 6px 14px rgba(210, 27, 60, 0.4);
}
/* 待ち時間ゼロパネル（金枠＋大きめFree/Premiumボックス） */
.flow-pills {
  margin-top: 16px; border: 1px solid rgba(236, 195, 94, 0.5);
  background: rgba(22, 11, 26, 0.55); border-radius: 14px; padding: 14px 16px 16px;
}
.flow-pills-lead { font-size: clamp(13.5px, 1.6vw, 15.5px); font-weight: 800; color: #fff; line-height: 1.75; }
.flow-pills-lead .fz {
  display: inline-block; white-space: nowrap; /* 「待ち時間ゼロ」を途中改行させない */
  font-family: var(--font-serif); font-weight: 800; font-size: 1.5em; margin: 0 2px;
  background: linear-gradient(180deg, #fff3c4, #ecc35e 60%, #c9973a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.flow-pills-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.flow-pills-row .fp {
  flex: 1; text-align: center; border-radius: 12px; padding: 12px 10px;
  font-size: clamp(12.5px, 1.5vw, 14.5px); font-weight: 800; color: #fff; line-height: 1.5;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.flow-pills-row .fp-free { background: linear-gradient(135deg, var(--free), #189a5b); box-shadow: 0 10px 24px rgba(47, 191, 113, 0.3); }
.flow-pills-row .fp-prem { background: linear-gradient(135deg, #ffa540, var(--prem)); color: #3a2405; box-shadow: 0 10px 24px rgba(240, 131, 0, 0.35); }
.flow-pills-row .fp-arrow { flex: none; color: var(--gold-2); }
.flow-pills-row .fp-arrow svg { width: 22px; height: 22px; display: block; }
.fp-coins { flex: none; }

/* ============================================================
   23. v3.7 スマホFV：上司版準拠「画像の中にテキスト」構成
   写真を背景バンド（全幅・高さ500px）にし、朗報リボン〜40万人
   突破のコピーをその上へ重ねる。左に暗スクリムで可読性を確保
   ============================================================ */
@media (max-width: 767px) {
  .hero { padding-top: 64px; }
  .hero-inner { display: block; position: relative; }
  .hero-visual {
    position: absolute; top: 0; left: calc(50% - 50vw);
    width: 100vw; height: auto; aspect-ratio: 3 / 4; /* 画像（hero-live-9.jpg）と同比率＝どの端末でも全体が等倍表示（切り抜き差ゼロ） */
    max-width: none; margin: 0; z-index: 0;
  }
  .hero-photo {
    position: absolute; inset: 0; height: 100%;
    border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
  }
  .hero-photo::after { display: none; }
  /* 上司版の構図＝画像自体が「右に女性・左にコピー余白」で構成された
     専用KV（hero-live-2.jpg）。通常のcover配置だけで全機種同じ見え方になる */
  .hero-photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
    object-fit: cover; object-position: center top;
    transform: none; filter: none;
  }
  /* 左スクリム（テキスト面）＋下端を背景色へフェード。顔まわり（右上）は明るく残す */
  .hero-photo::before {
    background:
      linear-gradient(90deg, rgba(14, 10, 23, 0.86) 0%, rgba(14, 10, 23, 0.6) 36%, rgba(14, 10, 23, 0.2) 56%, rgba(14, 10, 23, 0) 70%),
      linear-gradient(180deg, rgba(14, 10, 23, 0.22) 0%, rgba(14, 10, 23, 0) 22%, rgba(14, 10, 23, 0) 55%, rgba(14, 10, 23, 0.8) 84%, var(--bg-1) 100%);
  }
  /* タイトルは顔の手前（画面幅の約56%）で終わる幅に＝どの幅でも重なりゼロ
     （vw基準なので、顔の位置（画面幅の約66%）との比率が常に一定） */
  .hero-open .ho-line2 { font-size: clamp(24px, 7vw, 40px); }
  .hero-brandline { font-size: 11px; }
  /* 写真内の装飾：リボンは非表示（テキスト面を優先）、
     LIVEチップは小さく顔の上へ（配信中サイン）、リアクションは右中段に残す */
  .hero-ribbon { display: none; }
  .live-chip { top: 26px; right: 12px; font-size: 10px; padding: 4px 10px; gap: 5px; }
  .react-float { top: 42%; bottom: auto; right: 10px; }
  .hero-visual .mock-caption {
    position: absolute; right: 12px; top: 6px; margin: 0; z-index: 3;
    font-size: 9.5px; color: rgba(255, 255, 255, 0.6); text-align: right;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }
  /* テキストを写真の上へ */
  .hero-copy { position: relative; z-index: 2; margin-top: 0; padding-top: 10px; }
  .hero-brandline,
  .hm-lead, .hm-toppa,
  .hero-open .ho-line1 { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65); }
  /* 金グラデ文字は写真上でも沈まないよう暗色の落ち影へ */
  .hero-open .ho-line2 { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65)); }
  .hm-num { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65)); }
  .hm-note { color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
}

/* ============================================================
   24. v3.8 主役KVの作り直し（2026-08-12 上司FB「FVがしょぼい」対応）
   ------------------------------------------------------------
   ■ 原因：写真を「暗いスクリム越しの背景」として敷いていたため人物が沈み、
     文字と重なっていた。上司版（image (6) 2.png）は「人物が切り抜きで前面・
     装飾が高密度」。同じ構成モードへ作り替える。
   ■ 方針：透過切り抜き素材（hero-kv-a.webp / hero-kv-b.webp）＋
     CSSで放射光・グロー・キラ粒子・立体金文字・リボンを描く。
     文字は生きたテキストのまま＝数値差し替え／NGワード修正が即座にできる。
   ■ 重なり対策：人物も文字も vw / ％ 基準の固定枠。object-fit の切り抜きが
     発生しないため、端末による位置差はゼロ（プレイブック14）。
   ※ 21.（PC写真フルブリード）の .hero-photo 系は要素ごと廃止。後勝ちで上書き。
   ============================================================ */

/* --- 人物KV本体（透過切り抜き） --- */
.hero-kv { position: relative; z-index: 0; display: block; margin: 0; }
.hero-kv .kv-person {
  position: relative; z-index: 2;
  display: block; width: 100%; height: auto;
  /* aspect-ratio は指定しない。height:auto なので枠は常に素材そのものの比率になり、
     object-fit の切り抜きが構造的に発生しない（＝プレイブック14を満たす）。
     ここに固定値を書くと素材差し替え時に縦横比が合わず歪むので入れないこと。 */
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(255, 46, 136, 0.2));
}

/* --- 背後の発光＋放射光 --- */
.kv-glow {
  content: ""; position: absolute; z-index: 0; inset: -14% -14% -4% -26%;
  pointer-events: none;
  background:
    radial-gradient(52% 40% at 60% 32%, rgba(255, 46, 136, 0.5), rgba(255, 46, 136, 0) 70%),
    radial-gradient(62% 50% at 66% 46%, rgba(236, 195, 94, 0.22), rgba(236, 195, 94, 0) 74%);
}
.kv-glow::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-conic-gradient(from -14deg at 62% 34%,
    rgba(255, 238, 196, 0.11) 0deg 3deg, rgba(255, 238, 196, 0) 3deg 13deg);
  -webkit-mask-image: radial-gradient(closest-side at 62% 34%, #000 10%, transparent 76%);
  mask-image: radial-gradient(closest-side at 62% 34%, #000 10%, transparent 76%);
}

/* --- キラ粒子（4点星・サイズは枠の％＝どの幅でも同じ見え方） --- */
.kv-spark { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.kv-spark i {
  position: absolute; display: block; aspect-ratio: 1; background: #fffdf4;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 12px rgba(255, 206, 120, 0.85));
}
.kv-spark i:nth-child(1) { width: 13%; left: 1%;  top: 17%; }
.kv-spark i:nth-child(2) { width: 8%;  left: 62%; top: 2%;  }
.kv-spark i:nth-child(3) { width: 10%; left: 88%; top: 44%; }
.kv-spark i:nth-child(4) { width: 6.5%; left: 12%; top: 58%; }
@media (prefers-reduced-motion: no-preference) {
  .kv-spark i { animation: kvTwinkle 2.6s ease-in-out infinite alternate; }
  .kv-spark i:nth-child(2) { animation-delay: 0.7s; }
  .kv-spark i:nth-child(3) { animation-delay: 1.3s; }
  .kv-spark i:nth-child(4) { animation-delay: 1.9s; }
}
@keyframes kvTwinkle { from { opacity: 0.25; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

/* --- フックリボン：折り返し付きの帯へ --- */
.hook-ribbon {
  position: relative; border-radius: 3px;
  background: linear-gradient(180deg, #8d1436 0%, #6a0e28 55%, #52091d 100%);
  border: 1px solid rgba(236, 195, 94, 0.9);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    inset 0 0 0 4px rgba(236, 195, 94, 0.32),
    0 10px 24px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.hook-ribbon::before,
.hook-ribbon::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent;
}
.hook-ribbon::before { left: -17px;  border-right-color: #52091d; }
.hook-ribbon::after  { right: -17px; border-left-color: #52091d; }

/* --- 立体ゴールド見出し（押し出し＋ハイライト） --- */
.hero-open .ho-line2 {
  background: linear-gradient(180deg, #fffdf0 2%, #ffeaa8 24%, #f0cc6a 48%, #b9832a 72%, #f7dd96 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 0 rgba(107, 67, 16, 0.55),
    0 3px 1px rgba(50, 26, 2, 0.6),
    0 8px 18px rgba(0, 0, 0, 0.65);
  filter: drop-shadow(0 0 14px rgba(236, 195, 94, 0.32));
}
.hero-open .ho-line1 { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }

/* --- 会員数40万人：赤丸を数字の左に寄せて幅を節約・数字は立体ゴールド --- */
.hm-row { position: relative; display: flex; align-items: center; gap: 6px; }
.hm-badge { position: relative; z-index: 2; flex: none; }
.hm-num {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #fffdf0 2%, #ffeaa8 22%, #f0cc6a 48%, #b9832a 74%, #f7dd96 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow:
    0 2px 0 rgba(107, 67, 16, 0.55),
    0 3px 1px rgba(50, 26, 2, 0.6),
    0 8px 18px rgba(0, 0, 0, 0.65);
  filter: drop-shadow(0 0 16px rgba(236, 195, 94, 0.34));
}
.hm-toppa { text-shadow: 0 2px 0 rgba(60, 6, 22, 0.8), 0 6px 16px rgba(0, 0, 0, 0.6); }

/* --- 課題ボックス・待ち時間ゼロパネルの密度を上げる --- */
.pain-qs .pain-q {
  background: linear-gradient(135deg, rgba(64, 12, 26, 0.92), rgba(28, 8, 16, 0.92));
  border-color: rgba(226, 86, 86, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.4);
}
.flow-pills {
  border: 1px solid rgba(236, 195, 94, 0.85);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(120, 18, 52, 0.55), rgba(22, 11, 26, 0.9) 72%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(236, 195, 94, 0.3),
    0 18px 40px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   24-A. スマホ（〜767px）：人物は右上の固定枠・コピーは左58vw
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .hero-inner { display: block; position: relative; }
  .hero-visual {
    /* 23.の全幅バンド指定（left/height/aspect-ratio）を明示的に打ち消す。
       left:auto を入れないと left+right+width の過剰指定で right が無視される */
    position: absolute; z-index: auto; margin: 0; max-width: none;
    top: -10px; left: auto; right: calc(50% - 50vw); width: 45vw;
    height: auto; aspect-ratio: auto;
  }
  .hero-copy { position: relative; z-index: 2; padding-top: 0; }
  /* コピーは人物の左端（＝100vw-45vw）より内側で必ず終わる */
  .hook-ribbon, .hero-brandline, .hero-open, .hero-members { max-width: 53vw; }
  .hook-ribbon { font-size: 11.5px; padding: 6px 13px; letter-spacing: 0.08em; margin-bottom: 12px; }
  .hero-brandline { font-size: 10px; letter-spacing: 0.04em; }
  .hero-open .ho-line1 { font-size: 5.1vw; }
  /* 8文字が53vwに必ず収まる字送り。nowrapで機種差による2行落ちも封じる */
  .hero-open .ho-line2 { font-size: 6.3vw; white-space: nowrap; }
  .hm-lead { font-size: 3.8vw; }
  .hm-badge { width: 10.4vw; height: 10.4vw; font-size: 2.8vw; }
  .hm-num { font-size: 11.2vw; }
  .hm-toppa { font-size: 4.8vw; }
  .hm-note { font-size: 9px; max-width: 53vw; }
  /* 人物枠の中の装飾 */
  .hero-ribbon { display: none; }
  .live-chip { top: 4%; right: 4%; font-size: 9px; padding: 3px 8px; gap: 4px; }
  .react-float { top: 44%; bottom: auto; right: 4%; }
  .react-bubble { width: 30px; height: 30px; }
  .hero-visual .mock-caption {
    position: relative; z-index: 3; margin: 2px 0 0; text-align: right;
    font-size: 9px; color: rgba(255, 255, 255, 0.62);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  }
}

/* ------------------------------------------------------------
   24-B. タブレット・PC（768px〜）：右に人物・左にコピー
   ------------------------------------------------------------ */
/* 768〜1023pxはコピー幅が約408pxになるため、Free/Premiumピルの
   1行固定（white-space:nowrap）を解いて枠内で折り返させる */
@media (min-width: 768px) and (max-width: 1023px) {
  .flow-pills-row .fp { white-space: normal; flex: 1 1 0; }
}
@media (min-width: 768px) {
  .hero-inner { display: block; position: relative; min-height: 600px; }
  .hero-copy { max-width: 56%; position: relative; z-index: 2; }
  .hero-visual {
    position: absolute; z-index: auto; top: -18px; bottom: auto;
    left: auto; right: -2%; width: min(46%, 540px); max-width: none; margin: 0;
    height: auto; aspect-ratio: auto;
  }
  /* 完全新規バッジはKV枠の左上（素材の透明部分＝人物にかからない） */
  .hero-ribbon { display: block; top: 2%; bottom: auto; left: -6%; }
  .live-chip { top: 5%; right: 8%; }
  .react-float { top: 46%; bottom: auto; right: -4%; }
  .hero-visual .mock-caption {
    position: relative; z-index: 3; right: auto; bottom: auto;
    margin: 6px 0 0; text-align: right; font-size: 10px;
  }
}

/* ============================================================
   25. v3.8 実績帯を上司版の密度へ（2026-08-12 ユーザー指示）
   王冠→「圧倒的な収益実績！」立体金明朝→年月リボン→リード→
   売上600万円突破！（立体金）。放射光を強めてFVと段差をなくす。
   ※数値は代表提供。公開前に最新値を確認（REVIEW_CHECKLIST A）
   ============================================================ */
.achievement {
  background:
    radial-gradient(760px 340px at 50% 6%, rgba(255, 46, 136, 0.16), transparent 68%),
    radial-gradient(900px 420px at 50% -22%, rgba(236, 195, 94, 0.3), transparent 70%),
    repeating-conic-gradient(from -90deg at 50% 128%, rgba(236, 195, 94, 0.07) 0deg 4deg, transparent 4deg 10deg),
    linear-gradient(180deg, #1a1024, #0e0a17);
}
.ach-crown {
  display: block; width: clamp(38px, 7.4vw, 66px); margin: 0 auto 4px;
  color: var(--gold-2); filter: drop-shadow(0 4px 10px rgba(236, 195, 94, 0.55));
}
.ach-crown svg { display: block; width: 100%; height: auto; }
.achievement-label {
  display: block; margin: 0 0 12px; letter-spacing: 0.04em;
  font-family: var(--font-serif); font-weight: 800; line-height: 1.15;
  font-size: clamp(28px, 6.8vw, 56px);
  background: linear-gradient(180deg, #fffdf0 2%, #ffeaa8 24%, #f0cc6a 48%, #b9832a 72%, #f7dd96 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow:
    0 2px 0 rgba(107, 67, 16, 0.55),
    0 3px 1px rgba(50, 26, 2, 0.6),
    0 10px 22px rgba(0, 0, 0, 0.6);
  filter: drop-shadow(0 0 20px rgba(236, 195, 94, 0.35));
}
/* 年月リボン（折り返し付き・ゴールド） */
.ach-period {
  display: inline-block; position: relative; margin: 0 0 12px;
  font-family: var(--font-serif); font-weight: 800; letter-spacing: 0.12em;
  font-size: clamp(13px, 2.8vw, 17px); color: #3d2506;
  background: var(--grad-gold); padding: 5px 22px; border-radius: 3px;
  box-shadow: 0 8px 20px rgba(236, 195, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ach-period::before,
.ach-period::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  border: 8px solid transparent;
}
.ach-period::before { left: -15px;  border-right-color: #c9973a; }
.ach-period::after  { right: -15px; border-left-color: #c9973a; }
.achievement-title { color: var(--text-on-dark); font-weight: 800; }
/* 売上600万円突破！も立体ゴールドへ */
.achievement-num {
  background: linear-gradient(180deg, #fffdf0 2%, #ffeaa8 22%, #f0cc6a 48%, #b9832a 74%, #f7dd96 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow:
    0 2px 0 rgba(107, 67, 16, 0.55),
    0 3px 1px rgba(50, 26, 2, 0.6),
    0 10px 24px rgba(0, 0, 0, 0.65);
  filter: drop-shadow(0 0 20px rgba(236, 195, 94, 0.34));
}
.achievement-sub { font-weight: 800; }

/* スマホは「売上600万円突破！」が2行に折れるため、1行固定＋字送りを詰める */
@media (max-width: 767px) {
  .achievement-row { gap: 6px; }
  .ach-laurel { width: clamp(26px, 6.4vw, 40px); }
  .achievement-num { white-space: nowrap; font-size: clamp(24px, 7.1vw, 40px); }
  .achievement-label { font-size: clamp(26px, 7.4vw, 40px); }
  .achievement-title { font-size: clamp(13.5px, 3.5vw, 17px); }
}

/* ============================================================
   26. v3.9 金色の可読性修正（2026-08-12 ユーザー指摘「読みにくい金色」）
   ------------------------------------------------------------
   実測（WCAGコントラスト）で基準未達だったのは、すべて
   「白背景の上に置いた明るい金」。ダーク面の金は 8.45:1 で問題なし。
     .reason-num（01/02/03）    2.31:1 → 要3.0（大文字）
     .alog-rank-num.is-g（順位） 2.63:1 → 要4.5（小文字）
     .alog-callout.is-prem      3.41:1 → 要4.5（小文字）
     .alog-callout.is-free      3.45:1 → 要4.5（対になる緑。同時に修正）
   ■ 恒久ルール：白・淡色の面に金を置くときは --gold-on-light /
     --grad-gold-on-light を使う（--gold-1/2 と --grad-gold-text は
     ダーク面専用）。FreeLive緑・PremiumLiveオレンジの色identityは
     塗り側で維持し、白面の「文字だけ」濃度を上げて可読性を確保する。
   ============================================================ */
:root {
  --gold-on-light: #8a5c12;                                   /* 白背景で 5.78:1 */
  --grad-gold-on-light: linear-gradient(180deg, #b8842a, #7a5210); /* 3.31〜6.90:1 */
}
/* 3つの理由の連番（白カード）
   ※ background ショートハンドで書くと background-clip が border-box に戻り、
     文字ではなく矩形が塗り潰される。必ず background-image で指定し、
     clip と color: transparent を再宣言する */
.reason-num {
  background-image: var(--grad-gold-on-light);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 配信ログ分析：PT消費ランキングの順位（白リスト） */
.alog-rank-num.is-g { color: var(--gold-on-light); }
/* 配信ログ分析：チャート注釈（白カード）。塗りの色identityは変えず文字だけ濃く */
.alog-callout.is-prem { color: #a85400; }
.alog-callout.is-free { color: #17864a; }

/* ============================================================
   27. v3.10 ダーク面の金文字を読みやすく（2026-08-12 実機指摘）
   ------------------------------------------------------------
   実機（iPhone）で「圧倒的な収益実績！」「売上600万円突破！」が
   にじんで読めなかった。原因は3つ：
     ① グラデの最暗色 #b9832a が暗く、文字の下半分が背景と同化
     ② 押し出しの黒影（0 2px 0 / 0 3px 1px）が字画を内側から削る
     ③ 放射光（conic 0.07・radial 0.3）が背景輝度を上げてコントラストを圧迫
   対策：最暗色を #e2ae4a まで明るくし、影は「押し出し」をやめて
   文字の外側だけを暗くする柔らかいハローに変更。放射光は減光し、
   コピーの背後に暗いスクリムを1枚重ねる。
   ============================================================ */
:root {
  /* ダーク面専用ゴールド。明朝の細い横画が潰れないよう暗色を入れない。
     最暗色 #f0c65f でも背景 #170e20 に対し約10.8:1 */
  --grad-gold-3d: linear-gradient(180deg, #fffaea 4%, #ffeeb4 34%, #f7d888 66%, #f0c65f 100%);
  /* 影は必ず filter: drop-shadow で付ける。
     ★重要：background-clip:text と text-shadow は併用しないこと。
     テキスト影は「クリップされた背景の上」に描画されるため、黒い影が
     金そのものを塗り潰して濁った茶色になる（今回の実機不具合の原因）。
     drop-shadow は要素の描画結果の背後に落ちるので字画を汚さない。 */
  --gold-3d-shadow: 0 1px 1px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.7);
}
.hero-open .ho-line2,
.hm-num,
.achievement-label,
.achievement-num {
  background-image: var(--grad-gold-3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;                    /* 22.／25.の押し出し影を打ち消す */
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 18px rgba(236, 195, 94, 0.26));
}
/* 実績帯：放射光を落とし、コピー背後に暗いスクリムを敷く */
.achievement {
  background:
    radial-gradient(72% 46% at 50% 48%, rgba(8, 4, 14, 0.74), rgba(8, 4, 14, 0) 74%),
    radial-gradient(760px 340px at 50% 6%, rgba(255, 46, 136, 0.13), transparent 68%),
    radial-gradient(900px 420px at 50% -22%, rgba(236, 195, 94, 0.2), transparent 70%),
    repeating-conic-gradient(from -90deg at 50% 128%, rgba(236, 195, 94, 0.042) 0deg 4deg, transparent 4deg 10deg),
    linear-gradient(180deg, #170e20, #0e0a17);
}