/**
 * Vision Flow LP — vision-flow.css
 *
 * 設計思想:
 *   - #vflp-root 配下のみ完全独立デザイン
 *   - Cocoon / entry-content / article 干渉を完全排除
 *   - CSS カスタムプロパティで全色・全値を管理
 *   - モバイルファースト + clamp() 流体タイポグラフィ
 *   - アニメーションは opacity / transform / filter のみ使用
 *   - カラーパレット: 深森ブラック × エメラルドグリーン × ゴールド × アイボリー
 *   - フォント: Noto Sans JP + Noto Serif JP + Cormorant Garamond
 *   - 行間設計: デバイス別 line-height 完全最適化（Section 5.10）
 *   - 配色アクセシビリティ: コントラスト比 4.5:1 以上保証（Section 5.8）
 *   - テキスト中央配置: 二層構造（Section 5.9）
 *
 * @package cocoon-child-master
 */

/* ================================================================
   1. COCOON 干渉リセット
   ================================================================ */
.vision-flow .article,
.vision-flow .entry-content,
.vision-flow .main,
.vision-flow .content,
.vision-flow .wrap,
.vision-flow #main,
.vision-flow #body-in,
.vision-flow #container,
.vision-flow #container-in,
.vision-flow #contents,
.vision-flow #contents-in {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  float: none !important;
  position: static !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}

.vision-flow #sidebar,
.vision-flow .sidebar,
.vision-flow #sidebar-scroll,
.vision-flow .sidebar-top,
.vision-flow .sidebar-bottom {
  display: none !important;
}

.vision-flow #footer:not(.tp-footer),
.vision-flow .site-footer:not(.tp-footer),
.vision-flow .footer:not(.tp-footer) {
  display: none !important;
}

#vflp-root {
  background-color: var(--vflp-bg);
  color: var(--vflp-text);
  font-family: var(--vflp-font-sans);
  font-weight: 400;
  line-height: var(--vflp-lh-body, 1.9);
  letter-spacing: var(--vflp-ls-body, 0.03em);
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================================================================
   3. GLOBAL RESET — #vflp-root スコープ ★v3.0: line-height カスタムプロパティ化
   ================================================================ */
#vflp-root,
#vflp-root *,
#vflp-root *::before,
#vflp-root *::after {
  box-sizing: border-box;
}

#vflp-root h1, #vflp-root h2, #vflp-root h3,
#vflp-root h4, #vflp-root h5, #vflp-root h6,
#vflp-root p, #vflp-root ul, #vflp-root ol,
#vflp-root li, #vflp-root figure, #vflp-root blockquote,
#vflp-root dl, #vflp-root dd {
  margin: 0;
  padding: 0;
}

#vflp-root ul,
#vflp-root ol {
  list-style: none;
}

#vflp-root a {
  color: var(--vflp-text-link);
  text-decoration: none;
  transition: color var(--vflp-transition);
}

#vflp-root a:hover {
  color: var(--vflp-green-bright);
  text-decoration: underline;
}

/* ================================================================
   4. アニメーション背景（水の流れ + 葉）
   ================================================================ */

/* ── 水の背景 ── */
.vflp-water-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.vflp-water-layer {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
}

.vflp-water-layer--1 {
  background:
    radial-gradient(circle at 20% 30%, rgba(45, 122, 95, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(74, 157, 127, 0.09) 0%, transparent 50%),
    radial-gradient(circle at 50% 85%, rgba(107, 184, 154, 0.08) 0%, transparent 55%);
  animation: vflpWaterFlow 32s ease-in-out infinite;
}

.vflp-water-layer--2 {
  background:
    radial-gradient(circle at 70% 20%, rgba(201, 168, 76, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 30% 70%, rgba(45, 122, 95, 0.08) 0%, transparent 50%);
  animation: vflpWaterFlow 48s ease-in-out infinite reverse;
  opacity: 0.7;
}

.vflp-water-layer--3 {
  background:
    radial-gradient(circle at 60% 50%, rgba(107, 184, 154, 0.06) 0%, transparent 60%);
  animation: vflpWaterFlow 60s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes vflpWaterFlow {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%       { transform: rotate(180deg) scale(1.15); }
}

/* ── 浮遊する葉 ── */
.vflp-leaves {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.vflp-leaf {
  position: absolute;
  font-size: 20px;
  opacity: 0;
  animation: vflpFloatLeaf linear infinite;
}

.vflp-leaf:nth-child(1) { left: 6%;  font-size: 22px; animation-duration: 22s; animation-delay: 0s;  }

.vflp-leaf:nth-child(2) { left: 22%; font-size: 16px; animation-duration: 28s; animation-delay: 5s;  }

.vflp-leaf:nth-child(3) { left: 44%; font-size: 26px; animation-duration: 20s; animation-delay: 10s; }

.vflp-leaf:nth-child(4) { left: 65%; font-size: 18px; animation-duration: 32s; animation-delay: 3s;  }

.vflp-leaf:nth-child(5) { left: 82%; font-size: 22px; animation-duration: 25s; animation-delay: 7s;  }

.vflp-leaf:nth-child(6) { left: 55%; font-size: 14px; animation-duration: 36s; animation-delay: 15s; }

@keyframes vflpFloatLeaf {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0;    }
  8%   { opacity: 0.25; }
  90%  { opacity: 0.25; }
  100% { transform: translateY(-12vh) rotate(540deg); opacity: 0;    }
}

/* ================================================================
   5. ベースコンポーネント
   ================================================================ */

/* コンテナ */
.vflp-container {
  max-width: var(--vflp-container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  position: relative;
  z-index: 2;
}

.vflp-container--wide {
  max-width: var(--vflp-container-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  position: relative;
  z-index: 2;
}

/* セクション共通 */
.vflp-section {
  padding-block: var(--vflp-section-py);
  position: relative;
  z-index: 2;
}

.vflp-section--alt {
  background-color: var(--vflp-bg-2);
}

/* ================================================================
   6. スクロールリビールアニメーション（必須）
   ================================================================ */
.vflp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.vflp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.vflp-reveal[data-delay="1"] { transition-delay: 0.1s; }

.vflp-reveal[data-delay="2"] { transition-delay: 0.2s; }

.vflp-reveal[data-delay="3"] { transition-delay: 0.3s; }

.vflp-reveal[data-delay="4"] { transition-delay: 0.4s; }

/* ================================================================
   7. テーブル・ブロッククォートの白抜き問題対策（必須）★v3.0更新
   ================================================================ */

/* ── ブロッククォート白抜き完全解消 ── */
#vflp-root blockquote {
  background: var(--vflp-bg-card) !important;
  border-left: 3px solid var(--vflp-green) !important;
  border-right: none !important;
  color: var(--vflp-text) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: var(--vflp-radius-sm) !important;
}

#vflp-root blockquote::before,
#vflp-root blockquote::after {
  display: none !important;
}

/* ================================================================
   21. 比較テーブル（夢 vs 目標）
   ================================================================ */
.vflp-table-wrap {
  border-radius: var(--vflp-radius);
  border: 1px solid var(--vflp-border);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.vflp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: rgba(13, 24, 18, 0.55) !important; /* テーブル全体に深緑半透明地 */
}

/* ── 見出し行 ── */
.vflp-table thead th {
  background: linear-gradient(135deg,
              rgba(74, 157, 127, 0.22) 0%,
              rgba(107, 184, 154, 0.14) 100%) !important;
  color: var(--vflp-text) !important;
  padding: 1rem 1.25rem;
  text-align: left;
  font-family: var(--vflp-font-serif);
  font-weight: 700;
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  letter-spacing: 0.04em;
  line-height: var(--vflp-lh-body);
}

.vflp-table thead th:first-child { border-radius: var(--vflp-radius) 0 0 0; }

.vflp-table thead th:last-child  { border-radius: 0 var(--vflp-radius) 0 0; }

/* ── ボディ：Cocoon 干渉を完全リセット（詳細度を最大化） ── */
body.vision-flow #vflp-root .vflp-table tbody tr,
body.vision-flow #vflp-root .vflp-table tbody tr:nth-child(odd),
body.vision-flow #vflp-root .vflp-table tbody tr:nth-child(even) {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── 全行統一：深緑半透明地・アイボリー文字（白抜き問題完全排除） ── */
body.vision-flow #vflp-root .vflp-table tbody tr td,
body.vision-flow #vflp-root .vflp-table tbody tr:nth-child(odd) td,
body.vision-flow #vflp-root .vflp-table tbody tr:nth-child(even) td {
  background: rgba(20, 36, 28, 0.78) !important;   /* 深緑半透明（統一） */
  background-color: rgba(20, 36, 28, 0.78) !important;
  color: #EFEFE8 !important;                       /* アイボリー文字 ≒ コントラスト比 13:1 */
}

/* ── 偶数行のみ、奇数行と僅かに色差をつけて視認性UP ── */
body.vision-flow #vflp-root .vflp-table tbody tr:nth-child(even) td {
  background: rgba(30, 50, 40, 0.78) !important;
  background-color: rgba(30, 50, 40, 0.78) !important;
}

/* ── 共通 td ── */
.vflp-table tbody td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
  vertical-align: middle;
  line-height: var(--vflp-lh-body);
  font-weight: 500;
}

/* ── 1列目（項目名）：全行統一でゴールド寄りの明緑 ── */
body.vision-flow #vflp-root .vflp-table tbody tr td:first-child,
body.vision-flow #vflp-root .vflp-table tbody tr:nth-child(odd) td:first-child,
body.vision-flow #vflp-root .vflp-table tbody tr:nth-child(even) td:first-child {
  font-weight: 700;
  color: var(--vflp-green-bright) !important;
  letter-spacing: 0.04em;
}

/* ── thead th の文字色も明示（Cocoonの白背景透過を完全ブロック） ── */
body.vision-flow #vflp-root .vflp-table thead th {
  color: #EFEFE8 !important;
  /* 1. Cocoonの白を完全に潰すためのベースカラー（濃い緑） */
  background-color: rgba(25, 50, 38, 0.95) !important;
  /* 2. 透過率を上げ、確実に発色するグラデーションに変更 */
  background: linear-gradient(135deg,
              rgba(45, 122, 95, 0.9) 0%,
              rgba(74, 157, 127, 0.8) 100%) !important;
  /* ※お好みで境界線を少し強調するとより締まります */
  border-bottom: 2px solid rgba(201, 168, 76, 0.4) !important; 
}

.vflp-table tbody tr:last-child td { border-bottom: none; }

/* ── ホバー：全行統一 ── */
body.vision-flow #vflp-root .vflp-table tbody tr:hover td,
body.vision-flow #vflp-root .vflp-table tbody tr:nth-child(odd):hover td,
body.vision-flow #vflp-root .vflp-table tbody tr:nth-child(even):hover td {
  background: rgba(107, 184, 154, 0.22) !important;
  background-color: rgba(107, 184, 154, 0.22) !important;
  color: #FFFFFF !important;
}

/* ================================================================
   8. アクセシビリティ配色仕様 ★v3.0新設・必須
   Rule 1: 背景色に白(#FFFFFF)は使用禁止
   Rule 2: テキストカラーは #333333 以上の濃さ（コントラスト比 4.5:1 以上）
   Rule 3: 淡色テキスト禁止（#CCC等）
   Rule 4: ライトモード背景は #F5F5F5〜#E0E0E0 のみ許可
   ================================================================ */

/* Cocoon が注入した白背景の blockquote を安全なグレーに強制置換 */
#vflp-root blockquote:not([class*="vflp"]),
body.vision-flow .entry-content blockquote {
  background-color: #F0F0F0 !important; /* Rule 4 ✓ */
  color:            #1A1A1A !important; /* Rule 2: ~14:1 ✓ */
  border-left:  4px solid #555555 !important;
  border-right: none !important;
  padding:  1.25rem 1.5rem !important;
  margin:   0 !important;
  box-shadow: none !important;
}

/* Cocoon が注入した白背景の table を安全なグレーに強制置換 */
#vflp-root table:not([class*="vflp"]) th,
body.vision-flow .entry-content table th {
  background-color: #E8E8E8 !important; /* Rule 4 ✓ */
  color:            #111111 !important; /* Rule 2: ~16:1 ✓ */
  border-color:     #C0C0C0 !important;
}

#vflp-root table:not([class*="vflp"]) td,
body.vision-flow .entry-content table td {
  background-color: #F5F5F5 !important; /* Rule 4 ✓ */
  color:            #222222 !important; /* Rule 2: ~15:1 ✓ */
  border-color:     #D0D0D0 !important;
}

/* code / pre の Cocoon 白抜き上書き */
#vflp-root code:not([class]) {
  background-color: #EBEBEB !important; /* Rule 4 ✓ */
  color:            #1E1E1E !important; /* Rule 2: ~15:1 ✓ */
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
}

#vflp-root pre:not([class]) {
  background-color: #EBEBEB !important; /* Rule 4 ✓ */
  color:            #1E1E1E !important; /* Rule 2 ✓ */
  padding: 1rem 1.25rem;
  border-radius: 6px;
  overflow-x: auto;
}

/* ダークLP専用 blockquote（vflp-blockquote）*/
#vflp-root .vflp-blockquote {
  background-color: var(--vflp-bg-card) !important;
  color:            var(--vflp-text) !important;
  border-left: 3px solid var(--vflp-green) !important;
  padding: 1.5rem 1.75rem !important;
  border-radius: var(--vflp-radius-sm) !important;
}

/* ================================================================
   9. テキストブロック中央配置仕様 ★v3.0新設・必須
   ================================================================ */

/* テキスト内容のみ中央寄せ */
.vflp-text-center {
  text-align: center !important;
}

/* ブロック要素のみ中央配置 */
.vflp-block-center {
  margin-left:  auto !important;
  margin-right: auto !important;
  max-width: var(--vflp-container-max);
}

/* テキスト + ブロックの完全中央配置 */
.vflp-center {
  text-align:   center     !important;
  margin-left:  auto       !important;
  margin-right: auto       !important;
  max-width:    var(--vflp-container-max);
}

/* セクションヘッダー中央配置 */
.vflp-section-header {
  text-align:   center;
  margin-left:  auto;
  margin-right: auto;
  max-width:    min(700px, 90%);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ================================================================
   12. セクションヘッダー共通
   ================================================================ */
.vflp-section-eyebrow {
  font-family: var(--vflp-font-display);
  font-style: italic;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--vflp-gold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ================================================================
   28. CTAボタン
   ================================================================ */
.vflp-cta-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  text-align:   center;
  margin-left:  auto;
  margin-right: auto;
  max-width:    fit-content;
}

/* ================================================================
   10. 行間設計・デバイス別最適化仕様 ★v3.0新設・必須
   ================================================================ */

/* ── 10.1 モバイル基準値（〜767px）── */
#vflp-root p,
#vflp-root li {
  line-height:    var(--vflp-lh-body, 1.9);
  letter-spacing: var(--vflp-ls-body, 0.03em);
  overflow-wrap:  break-word;
  word-break:     auto-phrase;
}

#vflp-root .vflp-lead,
#vflp-root .vflp-section-desc,
#vflp-root .vflp-cover__sub {
  line-height:    var(--vflp-lh-lead, 2.0);
  letter-spacing: 0.04em;
  overflow-wrap:  break-word;
}

/* ================================================================
   12-B. セクションdesc 完全中央寄せ（ブロック要素自体も中央配置）
   ================================================================ */
#vflp-root .vflp-section-desc--center {
  /* テキスト中央寄せ＋ブロック自体も中央 */
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 760px;             /* ★中央寄せが効く幅に制限 */
  width: 100%;
  padding-inline: 1rem;
  box-sizing: border-box;
  display: block;
}

/* タブレット（768〜1159px）ヒーロー最適化 */
@media (min-width: 768px) and (max-width: 1159px) {
  .vflp-cover__flow {
    gap: 10px;
    margin: 2.25rem auto 3rem;
  }
  .vflp-cover__title {
    font-size: clamp(32px, 4.5vw, 52px);
  }
  .vflp-cover__sub {
    font-size: clamp(15px, 2vw, 18px);
    max-width: 600px;
  }
  .vflp-cover__content {
    max-width: min(860px, 92vw);
  }
}

/* スマホ（〜767px）ヒーロー最適化 */
@media (max-width: 767px) {
  body.vision-flow #vflp-root .vflp-cover__sub {
    margin-bottom: 2rem !important;
  }

  .vflp-cover {
    padding-top: clamp(7rem, 20vw, 10rem);
    padding-bottom: clamp(5rem, 14vw, 7rem);
  }

  .vflp-cover__content {
    max-width: 100%;
  }

  .vflp-cover__eyebrow {
    font-size: 11px;
    letter-spacing: 0.30em;
    gap: 0.8rem;
    margin-bottom: 1.75rem;
  }

  .vflp-cover__eyebrow::before,
  .vflp-cover__eyebrow::after {
    width: 20px;
  }

  .vflp-cover__title {
    font-size: clamp(26px, 7.5vw, 36px);
    gap: 0.08em;
  }

  .vflp-cover__title-line--suffix {
    font-size: 0.88em;
  }

  .vflp-cover__flow {
    gap: 8px 6px;
    margin: 1.75rem auto 2.5rem;
  }

  .vflp-flow-tag {
    padding: 7px 14px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  .vflp-flow-arrow {
    font-size: 1.0em;
    opacity: 0.55;
  }

  .vflp-scroll-down {
    bottom: 1.5rem;
  }
}

#vflp-root h1,
#vflp-root .vflp-cover__title {
  line-height:    var(--vflp-lh-h1, 1.25);
  letter-spacing: var(--vflp-ls-heading, -0.01em);
  overflow-wrap:  break-word;
  word-break:     auto-phrase;
}

#vflp-root h2,
#vflp-root .vflp-section-title,
#vflp-root .vflp-conclusion-title {
  line-height:    var(--vflp-lh-h2, 1.3);
  letter-spacing: var(--vflp-ls-heading, -0.01em);
  overflow-wrap:  break-word;
  word-break:     auto-phrase;
}

#vflp-root h3 {
  line-height:    var(--vflp-lh-h3, 1.4);
  letter-spacing: -0.005em;
  overflow-wrap:  break-word;
}

#vflp-root h4, #vflp-root h5, #vflp-root h6 {
  line-height:    1.45;
  letter-spacing: -0.005em;
}

#vflp-root small,
#vflp-root .vflp-caption,
#vflp-root .vflp-note,
#vflp-root .vflp-cta-btn__sub {
  line-height:    var(--vflp-lh-caption, 1.7);
  letter-spacing: var(--vflp-ls-caption, 0.02em);
}

#vflp-root .vflp-section-eyebrow,
#vflp-root .vflp-cover__eyebrow,
#vflp-root .vflp-layer-num,
#vflp-root .vflp-dream-en {
  letter-spacing: var(--vflp-ls-display, 0.05em);
  line-height:    1.4;
}

/* ── 10.2 段落間・見出し後スペーシング ── */
#vflp-root p + p {
  margin-top: var(--vflp-p-gap, 1.25em);
}

#vflp-root h2 + p,
#vflp-root h2 + .vflp-section-desc,
#vflp-root h3 + p {
  margin-top: 0.75em;
}

#vflp-root p + ul,
#vflp-root p + ol {
  margin-top: 0.75em;
}

#vflp-root li + li {
  margin-top: var(--vflp-list-gap, 0.5em);
}

#vflp-root h2:not(:first-child),
#vflp-root h3:not(:first-child) {
  margin-top: 2em;
}

#vflp-root h2,
#vflp-root h3 {
  margin-bottom: var(--vflp-heading-mb, 0.8em);
}

/* ── 35.7 レスポンシブ対応 ── */

/* タブレット（768px〜） */
@media (min-width: 768px) {
  .vflp-visual-block,
  .vflp-diagram-block {
    margin-block: 3.5rem;
  }
  .vflp-conclusion-visual {
    margin-block: 3.5rem 2.5rem;
  }
}

/* ── 10.4 デスクトップ最適化（1024px〜） ── */
@media (min-width: 1024px) {
  #vflp-root {
    --vflp-lh-body:    1.85;
    --vflp-lh-lead:    1.9;
    --vflp-lh-h1:      1.15;
    --vflp-lh-h2:      1.2;
    --vflp-lh-h3:      1.3;
    --vflp-lh-caption: 1.65;
    --vflp-ls-body:    0.02em;
    --vflp-ls-heading: -0.02em;
    --vflp-p-gap:      1.35em;
    --vflp-heading-mb: 0.85em;
  }
  #vflp-root h1,
  #vflp-root .vflp-cover__title {
    letter-spacing: -0.025em;
  }
}

/* ── 10.5 ワイドデスクトップ（1280px〜） ── */
@media (min-width: 1280px) {
  #vflp-root {
    --vflp-lh-body: 1.85;
  }
}

/* ================================================================
   11. COVER / HERO
   ================================================================ */
.vflp-cover {
  min-height: 100vh;
  min-height: 100svh; /* iOS Safari のアドレスバー分を正確に埋める */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: clamp(8rem, 16vw, 14rem) clamp(1.5rem, 5vw, 3rem) clamp(6rem, 12vw, 10rem);
  overflow: hidden;
}

/* カバーオーバーレイは画像の上に確実に乗せる */
.vflp-cover__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(9, 21, 16, 0.60) 0%,
      rgba(9, 21, 16, 0.18) 30%,
      rgba(9, 21, 16, 0.32) 65%,
      rgba(9, 21, 16, 0.88) 100%),
    radial-gradient(ellipse at 50% 45%,
      transparent 0%,
      rgba(9, 21, 16, 0.38) 65%,
      rgba(9, 21, 16, 0.62) 100%);
}

/* コンテンツは画像・オーバーレイより上に確実に配置 */
.vflp-cover__content {
  position: relative;
  z-index: 2;
  max-width: min(1050px, 92vw);
  width: 100%;
}

/* カバーeyebrow */
.vflp-cover__eyebrow {
  font-family: var(--vflp-font-display);
  font-style: italic;
  font-size: clamp(12px, 1.2vw, 15px);
  color: var(--vflp-green-bright);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  margin-bottom: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  opacity: 0.88;
}

.vflp-cover__eyebrow::before,
.vflp-cover__eyebrow::after {
  content: '';
  display: block;
  width: clamp(24px, 3vw, 48px);
  height: 1px;
  flex-shrink: 0;
}

.vflp-cover__eyebrow::before {
  background: linear-gradient(90deg, transparent, rgba(107, 184, 154, 0.65));
}

.vflp-cover__eyebrow::after {
  background: linear-gradient(90deg, rgba(107, 184, 154, 0.65), transparent);
}

/* カバーH1 */
.vflp-cover__title {
  font-family: var(--vflp-font-serif);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 64px);
  color: var(--vflp-text);
  margin-bottom: 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
}

.vflp-cover__accent {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  background: linear-gradient(135deg,
    var(--vflp-green-deep) 0%,
    var(--vflp-green) 35%,
    var(--vflp-green-bright) 65%,
    #a8dbc5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  font-size: 1.06em;
  filter: drop-shadow(0 0 22px rgba(107, 184, 154, 0.22));
}

/* ★ タブレット・スマホ（〜1159px）ではアクセント部分が長すぎるので折返しを許可 */
@media (max-width: 1159px) {
  .vflp-cover__accent {
    white-space: normal;
    word-break: auto-phrase;
    overflow-wrap: break-word;
    font-size: 1.0em;
    filter: drop-shadow(0 0 16px rgba(107, 184, 154, 0.18));
  }
}

/* カバーサブテキスト */
.vflp-cover__sub {
  font-size: clamp(14px, 1.6vw, 20px);
  color: var(--vflp-text-2);
  margin-bottom: 3rem;
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Flowタグ（PC: 強制1行 / タブレット・スマホ: 2列折返し） */
.vflp-cover__flow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;            /* 既定：折返し可（モバイル用） */
  gap: 10px 8px;
  margin: 2.25rem auto 3.25rem; /* ★上下余白を明確に確保＋ブロック自体も中央 */
  max-width: 100%;
  font-family: var(--vflp-font-serif);
  font-size: clamp(12px, 1.2vw, 16px);
  line-height: 1.2;
}

/* PC：横幅効率化のためpadding最適化 */
@media (min-width: 1160px) {
  .vflp-flow-tag {
    padding: 9px 16px;
  }
}

/* PC（1160px〜）ヒーローセクション専用 */
@media (min-width: 1160px) {
  .vflp-cover__title {
    font-size: clamp(48px, 5.5vw, 72px);
  }
  .vflp-cover__sub {
    font-size: clamp(17px, 1.7vw, 21px);
  }
  .vflp-cover__flow {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .vflp-cover__eyebrow::before,
  .vflp-cover__eyebrow::after {
    width: 50px;
  }
}

.vflp-flow-tag {
  padding: 9px 18px;
  background: rgba(18, 36, 24, 0.65);
  border: 1px solid rgba(107, 184, 154, 0.28);
  border-radius: 100px;
  color: var(--vflp-green-bright);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 4px 16px rgba(107, 184, 154, 0.08),
    inset 0 1px 0 rgba(107, 184, 154, 0.10);
  font-weight: 500;
  transition: all var(--vflp-transition);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.vflp-flow-tag:hover {
  background: rgba(74, 157, 127, 0.2);
  border-color: var(--vflp-green);
}

.vflp-flow-arrow {
  color: var(--vflp-green);
  font-size: 1.3em;
  opacity: 0.7;
  flex-shrink: 0;
  line-height: 1;
}

.vflp-scroll-down {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation:
    vflpScrollFadeIn 0.8s ease 2.0s forwards,
    vflpScrollBounce 2.4s ease-in-out 2.8s infinite;
}

/* 「SCROLL」テキスト */
.vflp-scroll-down > span:first-child {
  font-family: var(--vflp-font-display);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: rgba(107, 184, 154, 0.55);
  text-transform: uppercase;
}

.vflp-scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--vflp-green), transparent);
}

@keyframes vflpScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

@keyframes vflpScrollFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 0.75; transform: translateX(-50%) translateY(0); }
}

/* br制御 */
.vflp-br-pc { display: none; }



.vflp-section-title {
  font-family: var(--vflp-font-serif);
  font-weight: 600;
  font-size: clamp(24px, 3.5vw, 40px);
  color: var(--vflp-text);
  margin-bottom: 1.25rem;
  text-align: center;
}

.vflp-section-divider {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vflp-green), transparent);
  margin: 0 auto 1.5rem;
}

.vflp-section-desc {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--vflp-text-2);
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================================================
   13. ガラスカード基底
   ================================================================ */
.vflp-glass {
  background: var(--vflp-bg-glass);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--vflp-border);
  border-radius: var(--vflp-radius);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(107, 184, 154, 0.08);
}

/* ================================================================
   14. イントロブロック
   ================================================================ */
.vflp-intro-block {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 3rem;
}

.vflp-intro-block p {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--vflp-text-2);
}

/* ================================================================
   15. サブセクション
   ================================================================ */
.vflp-subsection {
  margin-block: 3rem;
}

.vflp-h3 {
  font-family: var(--vflp-font-serif);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--vflp-text);
  margin-bottom: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--vflp-border);
  position: relative;
}

.vflp-h3::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--vflp-green-deep), var(--vflp-green-bright));
}

.vflp-h4 {
  font-family: var(--vflp-font-serif);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--vflp-green-bright);
  margin: 2rem 0 0.875rem;
}

.vflp-subsection p {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--vflp-text-2);
}

/* ================================================================
   16. ブレットリスト（Cocoon干渉完全排除版）
   ================================================================ */
.vflp-bullet-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.5rem 0;
}

.vflp-bullet-list li {
  padding: 0.625rem 0 0.625rem 2.25rem;
  position: relative;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.85;
  color: var(--vflp-text-2);
}

/* ★ Flexboxの inline-flex ベースで先頭行に確実にマーカーを揃える */
.vflp-bullet-list li::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  /* ★ padding-top(0.625rem) + 1行目のテキスト中央へ。
        line-height: 1.85 × font-size(約16px) ÷ 2 ≒ 約14.8px */
  top: calc(0.625rem + 0.925em);
  width: 8px;
  height: 8px;
  margin-top: -4px;             /* ★ 自身の高さの半分だけ上に補正 */
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vflp-green-bright), var(--vflp-green));
  box-shadow: 0 0 0 3px rgba(107, 184, 154, 0.15);
  transform: none;              /* ★ translateY を解除（top計算と二重補正を防止） */
}

.vflp-bullet-list--compact li {
  padding-block: 0.5rem;
  padding-left: 2.25rem;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.8;
}

.vflp-bullet-list--compact li::before {
  top: calc(0.5rem + 0.9em);    /* ★ コンパクト版 padding/line-height に合わせて再計算 */
  margin-top: -4px;
}

/* ★ コンパクト版で行頭が <strong> のとき用の微調整 */
.vflp-bullet-list--compact li:has(> strong:first-child)::before {
  top: calc(0.5rem + 0.95em);
}

/* ================================================================
   17. ストロングクォート（blockquote 使用版）
   ================================================================ */
.vflp-blockquote {
  display: block;
  padding: 1.5rem 1.75rem;
  margin: 1.75rem 0;
  background: var(--vflp-bg-card) !important;
  border-left: 3px solid var(--vflp-green) !important;
  border-radius: 0 var(--vflp-radius-sm) var(--vflp-radius-sm) 0;
  font-family: var(--vflp-font-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  color: var(--vflp-text) !important;
}

/* ================================================================
   18. カテゴリーヘッダー（夢の分類）
   ================================================================ */
.vflp-category-heading {
  font-family: var(--vflp-font-serif);
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--vflp-green-bright);
  text-align: center;
  margin: 3.5rem 0 2rem;
  letter-spacing: 0.04em;
}

.vflp-category-heading--deep {
  color: var(--vflp-gold);
  margin-top: 5rem;
}

/* ================================================================
   19. 夢カードグリッド
   ================================================================ */
.vflp-dreams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.vflp-dreams-grid--deep {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.vflp-dream-card {
  padding: 2rem 1.75rem;
  position: relative;
  transition: transform var(--vflp-transition), box-shadow var(--vflp-transition);
  overflow: hidden;
}

.vflp-dream-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--vflp-green-bright), var(--vflp-green));
  opacity: 0.8;
}

.vflp-dream-card--deep::before {
  background: linear-gradient(90deg, var(--vflp-gold), var(--vflp-gold-bright));
  height: 4px;
}

.vflp-dream-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
  background: rgba(18, 42, 25, 0.9);
}

.vflp-dream-num {
  font-family: var(--vflp-font-display);
  font-style: italic;
  font-size: 48px;
  color: rgba(107, 184, 154, 0.3);
  line-height: 1;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.vflp-dream-card--deep .vflp-dream-num {
  color: rgba(201, 168, 76, 0.3);
}

.vflp-dream-title {
  font-family: var(--vflp-font-serif);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 600;
  color: var(--vflp-text);
  margin-bottom: 0.25rem;
}

.vflp-dream-en {
  font-family: var(--vflp-font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--vflp-green-bright);
  margin-bottom: 0.875rem;
}

.vflp-dream-card--deep .vflp-dream-en {
  color: var(--vflp-gold);
}

.vflp-dream-desc {
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--vflp-text-2);
  margin-bottom: 0.875rem;
}

.vflp-dream-examples {
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--vflp-text-3);
  padding: 0.75rem 1rem;
  background: var(--vflp-green-light);
  border-radius: var(--vflp-radius-sm);
}

.vflp-dream-examples strong {
  color: var(--vflp-green-bright);
  font-weight: 600;
}

.vflp-deep-badge {
  display: inline-block;
  font-size: 10px;
  padding: 3px 10px;
  background: linear-gradient(135deg, var(--vflp-gold), rgba(201,168,76,0.7));
  color: var(--vflp-bg);
  border-radius: 100px;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

/* ================================================================
   20. インサイトボックス
   ================================================================ */
.vflp-insight {
  padding: 2rem 2.25rem;
  margin: 2rem 0;
  background: linear-gradient(135deg, rgba(18,36,24,0.9), rgba(9,21,16,0.7));
  border-radius: var(--vflp-radius);
  border: 1px solid var(--vflp-border-gold);
  position: relative;
  overflow: hidden;
}

.vflp-insight::before {
  content: '';
  position: absolute;
  top: 0; left: 1.5rem;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--vflp-gold), var(--vflp-gold-bright));
  border-radius: 0 0 3px 3px;
}

.vflp-insight::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(201,168,76,0.04), transparent 70%);
  pointer-events: none;
}

.vflp-insight-label {
  font-family: var(--vflp-font-display);
  font-style: italic;
  color: var(--vflp-gold);
  font-size: 13px;
  letter-spacing: 0.25em;
  margin-bottom: 0.75rem;
}

.vflp-insight-text {
  font-family: var(--vflp-font-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--vflp-text);
  font-weight: 500;
}

.vflp-insight-text em {
  color: var(--vflp-green-bright);
  font-style: normal;
}

/* ================================================================
   22. ファネル（目標分解）
   ================================================================ */
.vflp-funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 2rem auto;
  max-width: 420px;
}

.vflp-funnel-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 1rem 2rem;
  background: var(--vflp-bg-glass-2);
  border: 1px solid var(--vflp-border);
  border-radius: var(--vflp-radius-sm);
  text-align: center;
  font-family: var(--vflp-font-serif);
  font-weight: 500;
  color: var(--vflp-text);
  backdrop-filter: blur(10px);
  min-width: 220px;
  transition: all var(--vflp-transition);
}

.vflp-funnel-step:hover {
  transform: scale(1.03);
  border-color: var(--vflp-green);
}

.vflp-funnel-label {
  font-family: var(--vflp-font-display);
  font-style: italic;
  font-size: 11px;
  color: var(--vflp-text-3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.vflp-funnel-content {
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--vflp-text-2);
}

.vflp-funnel-step--target {
  background: linear-gradient(135deg, var(--vflp-green-deep), var(--vflp-green));
  border: none;
  box-shadow: 0 8px 28px rgba(74, 157, 127, 0.35);
  font-size: clamp(15px, 1.4vw, 17px);
}

.vflp-funnel-step--target .vflp-funnel-label {
  color: rgba(255, 255, 255, 0.75);
}

.vflp-funnel-step--target .vflp-funnel-content {
  color: #ffffff;
  font-weight: 600;
}

.vflp-funnel-arrow {
  font-size: 22px;
  color: var(--vflp-green);
  line-height: 1;
  padding-block: 0.25rem;
  opacity: 0.7;
}

/* ================================================================
   23. プランボックス
   ================================================================ */
.vflp-plan-box {
  padding: 1.75rem 2rem;
  margin: 1.25rem 0;
}

/* ================================================================
   24. 2カラム比較
   ================================================================ */
.vflp-compare-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}

.vflp-compare-col {
  padding: 2rem 1.75rem;
}

.vflp-compare-col h4 {
  font-family: var(--vflp-font-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 600;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vflp-compare-col--stop h4 { color: #d4907a; }

.vflp-compare-col--go   h4 { color: var(--vflp-green-bright); }

.vflp-compare-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.vflp-compare-icon--stop { background: linear-gradient(135deg, #c47060, #9c4a3a); }

.vflp-compare-icon--go   { background: linear-gradient(135deg, var(--vflp-green-bright), var(--vflp-green-deep)); }

.vflp-compare-col ul {
  padding: 0;
  margin: 0;
  list-style: none;             /* ★ Cocoon デフォルトのリストマーカーを無効化 */
}

.vflp-compare-col ul li {
  padding: 0.55rem 0 0.55rem 1.75rem;  /* ★ 左余白を 1.5rem → 1.75rem に拡張 */
  position: relative;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.7;             /* ★ 行高を明示して垂直位置を安定化 */
  color: var(--vflp-text-2);
}

.vflp-compare-col ul li::before {
  position: absolute;
  left: 0;
  top: 0.55rem;                 /* ★ padding-top と同値で1行目テキストに揃える */
  line-height: 1.7;             /* ★ liと同じ行高でベースライン一致 */
  font-weight: 700;
  font-size: 1em;
  display: inline-block;
  width: 1.25rem;
  text-align: center;
}

.vflp-compare-col--stop ul li::before {
  content: '×';
  color: #d4907a;
}

.vflp-compare-col--go ul li::before {
  content: '✓';
  color: var(--vflp-green-bright);
}

/* ================================================================
   25. 5層構造レイヤー
   ================================================================ */
.vflp-layers {
  position: relative;
  padding: 2rem 0;
}

.vflp-layers::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 60px; bottom: 60px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--vflp-green) 10%,
    var(--vflp-green-bright) 50%,
    var(--vflp-green) 90%,
    transparent 100%);
  transform: translateX(-50%);
  border-radius: 2px;
  z-index: 0;
  opacity: 0.4;
}

.vflp-layer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.vflp-layer--reverse { flex-direction: row-reverse; }

.vflp-layer-card {
  flex: 1;
  padding: 2rem 2.25rem;
  transition: transform var(--vflp-transition), box-shadow var(--vflp-transition);
}

.vflp-layer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.4);
}

.vflp-layer-icon {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vflp-bg-card) 0%, rgba(18,36,24,0.9) 100%);
  border: 2px solid var(--vflp-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vflp-font-serif);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 600;
  color: var(--vflp-green-bright);
  box-shadow:
    0 8px 28px rgba(74, 157, 127, 0.2),
    0 0 0 8px rgba(74, 157, 127, 0.06);
  position: relative;
}

.vflp-layer-icon::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,184,154,0.12), transparent 70%);
  z-index: -1;
}

.vflp-layer-icon span {
  text-align: center;
  line-height: 1.2;
}

.vflp-layer-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.vflp-layer-num {
  font-family: var(--vflp-font-display);
  font-style: italic;
  color: var(--vflp-gold);
  font-size: 14px;
  letter-spacing: 0.1em;
}

.vflp-layer-title {
  font-family: var(--vflp-font-serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  color: var(--vflp-text);
  margin: 0;
}

.vflp-layer-role {
  display: inline-block;
  font-size: 12px;
  color: var(--vflp-bg);
  padding: 3px 12px;
  background: linear-gradient(135deg, var(--vflp-green-bright), var(--vflp-green));
  border-radius: 100px;
  margin-bottom: 0.875rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.vflp-layer-desc {
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--vflp-text-2);
  margin-bottom: 1rem;
}

.vflp-layer-theory {
  font-size: clamp(13px, 1.2vw, 14px);
  padding: 0.875rem 1rem;
  background: var(--vflp-green-light);
  border-left: 2px solid var(--vflp-green);
  border-radius: 0 var(--vflp-radius-sm) var(--vflp-radius-sm) 0;
  color: var(--vflp-text-2);
}

.vflp-layer-theory strong { color: var(--vflp-green-bright); }

/* ================================================================
   26. メタ統合ステップグリッド
   ================================================================ */
.vflp-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.vflp-step-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--vflp-green-light);
  border-radius: var(--vflp-radius-sm);
  border-left: 3px solid var(--vflp-green);
}

.vflp-step-label {
  font-family: var(--vflp-font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--vflp-gold);
  letter-spacing: 0.2em;
}

.vflp-step-title {
  display: block;
  font-family: var(--vflp-font-serif);
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--vflp-text);
  font-weight: 600;
}

.vflp-step-desc {
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--vflp-text-2);
}

/* ================================================================
   27. エビデンスセクション
   ================================================================ */
.vflp-evidence-section {
  background: linear-gradient(180deg, var(--vflp-bg) 0%, var(--vflp-bg-2) 100%);
}

.vflp-evidence-subsection {
  margin-bottom: 3.5rem;
}

.vflp-evidence-h3 {
  font-family: var(--vflp-font-serif);
  font-size: clamp(19px, 2vw, 24px);
  color: var(--vflp-text);
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--vflp-border);
  position: relative;
}

.vflp-evidence-h3::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--vflp-gold), var(--vflp-gold-bright));
}

.vflp-evidence-h4 {
  font-family: var(--vflp-font-serif);
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--vflp-green-bright);
  font-weight: 600;
  margin: 2rem 0 1rem;
}

.vflp-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.vflp-evidence-card {
  padding: 1.75rem;
  position: relative;
  transition: transform var(--vflp-transition), box-shadow var(--vflp-transition);
}

.vflp-evidence-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

.vflp-evidence-cat {
  font-family: var(--vflp-font-display);
  font-style: italic;
  font-size: 11px;
  color: var(--vflp-gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.vflp-evidence-title {
  font-family: var(--vflp-font-serif);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 600;
  color: var(--vflp-text);
  margin-bottom: 0.875rem;
}

.vflp-evidence-text {
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--vflp-text-2);
  margin-bottom: 0.875rem;
}

.vflp-evidence-text strong { color: var(--vflp-text); }

.vflp-evidence-source {
  font-size: 12px;
  color: var(--vflp-text-3);
  padding-top: 0.875rem;
  border-top: 1px dashed var(--vflp-border);
}

.vflp-evidence-source a {
  color: var(--vflp-green-bright);
  word-break: break-all;
  text-decoration: none;
  border-bottom: 1px solid rgba(107,184,154,0.3);
  transition: all var(--vflp-transition);
}

.vflp-evidence-source a:hover {
  color: var(--vflp-green);
  border-bottom-color: var(--vflp-green);
  text-decoration: none;
}

.vflp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 3rem;
  border-radius: 100px;
  color: #ffffff !important;
  font-family: var(--vflp-font-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  transition:
    transform var(--vflp-transition),
    box-shadow var(--vflp-transition),
    filter var(--vflp-transition);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(45, 122, 95, 0.4);
  will-change: transform;
}

.vflp-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
  pointer-events: none;
}

.vflp-cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--vflp-transition);
}

.vflp-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 48px rgba(45, 122, 95, 0.55);
  filter: brightness(1.08);
  text-decoration: none !important;
  color: #ffffff !important;
}

.vflp-cta-btn:hover::after {
  background: rgba(255,255,255,0.06);
}

.vflp-cta-btn:active {
  transform: scale(0.98);
}

/* ヒーロー内CTA専用：パルスアニメーション */
@keyframes vflpHeroCTAPulse {
  0%   {
    box-shadow:
      0 8px 32px rgba(45, 122, 95, 0.42),
      0 0 0 0 rgba(74, 157, 127, 0.40);
  }
  60%  {
    box-shadow:
      0 12px 48px rgba(45, 122, 95, 0.55),
      0 0 0 12px rgba(74, 157, 127, 0);
  }
  100% {
    box-shadow:
      0 8px 32px rgba(45, 122, 95, 0.42),
      0 0 0 0 rgba(74, 157, 127, 0);
  }
}

.vflp-cover .vflp-cta-btn {
  animation: vflpHeroCTAPulse 2.8s ease-out infinite;
}

.vflp-cover .vflp-cta-btn:hover {
  animation: none; /* hover 中はパルスを停止しホバーエフェクトに集中 */
}

.vflp-cta-btn--large {
  padding: 1.3rem 3.75rem;
  font-size: clamp(17px, 1.7vw, 21px);
}

.vflp-cta-btn__sub {
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--vflp-text-3);
  text-align: center;
  max-width: 320px;
  margin: 0 auto;
}

/* ================================================================
   29. コンクルージョン
   ================================================================ */
.vflp-conclusion {
  background: linear-gradient(180deg,
    var(--vflp-bg) 0%,
    rgba(74,157,127,0.05) 50%,
    var(--vflp-bg) 100%);
}

.vflp-conclusion-card {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
  margin: 0 auto 3.5rem;
  max-width: 840px;
  text-align: left;
}

.vflp-conclusion-title {
  font-family: var(--vflp-font-serif);
  font-size: clamp(22px, 3vw, 36px);
  color: var(--vflp-text);
  font-weight: 600;
  text-align: center;
  margin-bottom: 2rem;
}

.vflp-conclusion-card > p {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--vflp-text-2);
}

.vflp-final-poem {
  text-align: center;
  font-family: var(--vflp-font-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--vflp-text);
  line-height: 2.1;
  margin: 2rem 0;
  padding: 2rem;
  background: var(--vflp-green-light);
  border-radius: var(--vflp-radius);
}

.vflp-final-poem p { margin: 0; }

.vflp-final-poem p + p { margin-top: 0.5rem; }

.vflp-final-poem strong { color: var(--vflp-green-bright); }

.vflp-final-message {
  font-family: var(--vflp-font-serif);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--vflp-text);
  line-height: 1.85;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--vflp-border);
  text-align: center;
}

.vflp-final-accent {
  background: linear-gradient(135deg, var(--vflp-green-deep), var(--vflp-green), var(--vflp-green-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── 最終CTAエリア ── */
.vflp-final-cta {
  text-align: center;
  margin: 0 auto;
  max-width: fit-content;
}

.vflp-final-cta-label {
  font-family: var(--vflp-font-display);
  font-style: italic;
  color: var(--vflp-gold);
  font-size: 15px;
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem !important;
  text-align: center;
}

/* ================================================================
   32. スクロールバー統一（Webkit対応）
   ================================================================ */
#vflp-root ::-webkit-scrollbar { width: 6px; height: 6px; }

#vflp-root ::-webkit-scrollbar-track { background: var(--vflp-bg); }

#vflp-root ::-webkit-scrollbar-thumb {
  background: var(--vflp-green);
  border-radius: 3px;
}

#vflp-root ::-webkit-scrollbar-thumb:hover {
  background: var(--vflp-green-bright);
}

/* テキスト選択統一 */
#vflp-root ::selection {
  background: rgba(74, 157, 127, 0.35);
  color: var(--vflp-text);
}

/* ── 35.8 reduced-motion 対応 ── */
@media (prefers-reduced-motion: reduce) {
  .vflp-cover__bg-img,
  .vflp-visual-block img,
  .vflp-diagram-block img,
  .vflp-conclusion-visual img {
    transition: none !important;
  }
  .vflp-cover:hover .vflp-cover__bg-img,
  .vflp-cover.is-loaded .vflp-cover__bg-img {
    transform: none !important;
  }
  .vflp-visual-block:hover img,
  .vflp-diagram-block:hover img,
  .vflp-conclusion-visual:hover img {
    transform: none !important;
  }
}

/* ================================================================
   35. 画像コンポーネント — 6点対応 完全実装
   ================================================================ */

/* ── 35.1 カバー背景画像ラッパー ── */
.vflp-cover__bg-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.vflp-cover__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.38) saturate(0.90) hue-rotate(-5deg);
  will-change: transform;
  transition:
    transform 12s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 1.5s ease;
}

/* ページロード後にゆっくりズームイン（パララックス代替） */
.vflp-cover:hover .vflp-cover__bg-img,
.vflp-cover.is-loaded .vflp-cover__bg-img {
  transform: scale(1.10);
  filter: brightness(0.40) saturate(0.92) hue-rotate(-5deg);
}

/* ── 35.2 コンテンツセクション内 標準ビジュアルブロック ── */
.vflp-visual-block {
  position: relative;
  margin: 3rem auto;
  max-width: 860px;
  border-radius: var(--vflp-radius-lg, 22px);
  overflow: hidden;
  border: 1px solid var(--vflp-border);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(107, 184, 154, 0.06);
  /* figureタグのデフォルトmarginをリセット */
  display: block;
}

.vflp-visual-block img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter    0.5s ease;
  filter: brightness(0.90) saturate(1.08);
  vertical-align: bottom;
}

.vflp-visual-block:hover img {
  transform: scale(1.04);
  filter: brightness(0.94) saturate(1.12);
}

/* ── 35.3 図解ビジュアルブロック（ゴールドボーダー） ── */
.vflp-diagram-block {
  position: relative;
  margin: 2.5rem auto;
  max-width: 860px;
  border-radius: var(--vflp-radius-lg, 22px);
  overflow: hidden;
  border: 1px solid var(--vflp-border-gold, rgba(201, 168, 76, 0.3));
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 48px rgba(201, 168, 76, 0.07),
    inset 0 1px 0 rgba(201, 168, 76, 0.1);
  display: block;
}

.vflp-diagram-block img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: brightness(0.92) saturate(1.05);
  vertical-align: bottom;
}

.vflp-diagram-block:hover img {
  transform: scale(1.03);
}

/* 図解ブロックの四隅ゴールドアクセント */
.vflp-diagram-block::before,
.vflp-diagram-block::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 10;
  pointer-events: none;
}

.vflp-diagram-block::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--vflp-gold, #c9a84c);
  border-left: 2px solid var(--vflp-gold, #c9a84c);
  border-radius: var(--vflp-radius-lg, 22px) 0 0 0;
}

.vflp-diagram-block::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--vflp-gold, #c9a84c);
  border-right: 2px solid var(--vflp-gold, #c9a84c);
  border-radius: 0 0 var(--vflp-radius-lg, 22px) 0;
}

/* ── 35.4 コンクルージョン専用ビジュアル ── */
.vflp-conclusion-visual {
  position: relative;
  margin: 3rem auto 2.5rem;
  max-width: 840px;
  border-radius: var(--vflp-radius-lg, 22px);
  overflow: hidden;
  border: 1px solid var(--vflp-border);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(74, 157, 127, 0.06);
  display: block;
}

.vflp-conclusion-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) saturate(1.12);
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter    0.5s ease;
  vertical-align: bottom;
}

.vflp-conclusion-visual:hover img {
  transform: scale(1.04);
  filter: brightness(0.90) saturate(1.15);
}

/* コンクルージョン画像の上部グラデーションフェード */
.vflp-conclusion-visual::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg,
    var(--vflp-bg, #091510) 0%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.vflp-conclusion-visual::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(0deg,
    var(--vflp-bg, #091510) 0%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── 35.5 ビジュアルキャプション（全ブロック共通） ── */
.vflp-visual-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.75rem 1.5rem 1.25rem;
  background: linear-gradient(0deg,
    rgba(9, 21, 16, 0.88) 0%,
    rgba(9, 21, 16, 0.50) 60%,
    transparent 100%);
  font-family: var(--vflp-font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: clamp(12px, 1.1vw, 14px);
  color: rgba(107, 184, 154, 0.85);
  letter-spacing: 0.15em;
  line-height: 1.4;
  z-index: 5;
  pointer-events: none;
  margin: 0;
  /* figcaptionのデフォルトをリセット */
  display: block;
}

.vflp-diagram-block .vflp-visual-caption {
  color: rgba(201, 168, 76, 0.9);
}

.vflp-conclusion-visual .vflp-visual-caption {
  z-index: 6; /* ::after より前面 */
  color: rgba(107, 184, 154, 0.85);
}

/* ── 35.6 figureタグ デフォルトリセット ── */
#vflp-root figure {
  margin: 0;
  padding: 0;
}

#vflp-root figcaption {
  margin: 0;
  padding: 0;
}

/* ================================================================
   34. プリント対応
   ================================================================ */
@media print {
  .vflp-water-bg,
  .vflp-leaves,
  .vflp-scroll-down {
    display: none !important;
  }
  #vflp-root {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .vflp-glass {
    background: #f5f5f5 !important;
    box-shadow: none !important;
    border: 1px solid #cccccc !important;
  }
  .vflp-cta-btn { background: #2d7a5f !important; }
}

/* ================================================================
   21-B. 比較テーブル Cocoon 干渉 完全排除（!important で上書き）
   ================================================================ */
.vision-flow #vflp-root .vflp-table,
.vision-flow #vflp-root .vflp-table thead,
.vision-flow #vflp-root .vflp-table tbody,
.vision-flow #vflp-root .vflp-table tr,
.vision-flow #vflp-root .vflp-table th,
.vision-flow #vflp-root .vflp-table td {
  border-color: transparent;
  box-shadow: none;
}

/* テーブルラッパー：中央寄せ＋角丸クリップ */
#vflp-root .vflp-table-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(880px, 96%);
  border-radius: var(--vflp-radius);
  border: 1px solid rgba(201, 168, 76, 0.28);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  background: rgba(13, 24, 18, 0.4);
}

body.vision-flow #vflp-root .vflp-bullet-list li {
  padding: 0.625rem 0 0.625rem 2.25rem !important;
  position: relative;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.85 !important;
  color: var(--vflp-text-2);
  list-style-type: none !important;
}

body.vision-flow #vflp-root .vflp-bullet-list li::before {
  content: '' !important;
  position: absolute !important;
  left: 0.5rem !important;
  /* padding-top(0.625rem) + 1行目の高さ(1.85em)の半分 */
  top: calc(0.625rem + (1.85em / 2)) !important;
  transform: translateY(-50%) !important; /* 絶対中央揃え */
  margin: 0 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--vflp-green-bright), var(--vflp-green)) !important;
  box-shadow: 0 0 0 3px rgba(107, 184, 154, 0.15) !important;
  font-family: inherit !important; /* CocoonのFontAwesome干渉を排除 */
}

/* ── コンパクト版 ── */
body.vision-flow #vflp-root .vflp-bullet-list--compact li {
  padding: 0.5rem 0 0.5rem 2.25rem !important;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.8 !important;
}

body.vision-flow #vflp-root .vflp-bullet-list--compact li::before {
  /* padding-top(0.5rem) + 1行目の高さ(1.8em)の半分 */
  top: calc(0.5rem + (1.8em / 2)) !important;
  transform: translateY(-50%) !important;
}

/* ================================================================
   24. 2カラム比較 リスト部分（Cocoon干渉完全排除版）
   ================================================================ */
body.vision-flow #vflp-root .vflp-compare-col ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

body.vision-flow #vflp-root .vflp-compare-col ul li {
  padding: 0.55rem 0 0.55rem 1.75rem !important;
  position: relative;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.7 !important;
  color: var(--vflp-text-2);
  list-style-type: none !important;
}

body.vision-flow #vflp-root .vflp-compare-col ul li::before {
  position: absolute !important;
  left: 0 !important;
  /* padding-top(0.55rem) + 1行目の高さ(1.7em)の半分 */
  top: calc(0.55rem + (1.7em / 2)) !important;
  transform: translateY(-50%) !important; /* 絶対中央揃え */
  margin: 0 !important;
  line-height: 1 !important; /* 記号自体の高さを1にして中央を正確にする */
  font-weight: 700 !important;
  font-size: 1.1em !important;
  display: inline-block !important;
  width: 1.25rem !important;
  text-align: center !important;
  font-family: var(--vflp-font-sans) !important; /* Cocoonのアイコンフォント化を完全ブロック */
}

body.vision-flow #vflp-root .vflp-compare-col--stop ul li::before {
  content: '×' !important;
  color: #d4907a !important;
}

body.vision-flow #vflp-root .vflp-compare-col--go ul li::before {
  content: '✓' !important;
  color: var(--vflp-green-bright) !important;
}

/* ================================================================
   COVER / HERO セクションの修正（中央揃え ＆ 余白調整）
   ================================================================ */

/* ── サブコピー下の余白確保 ＆ ブロック完全中央配置 ── */
body.vision-flow #vflp-root .vflp-cover__sub {
  display: block !important;
  text-align: center !important;
  margin-top: 1.5rem !important; /* タイトルとの間隔 */
  margin-bottom: 3rem !important; 
  margin-left: auto !important;  /* 追加: 左マージンを自動化 */
  margin-right: auto !important; /* 追加: 右マージンを自動化 */
  padding: 0 !important;
  text-indent: 0 !important; 
}

/* ── タイトルとアクセントの完全中央揃え ── */
body.vision-flow #vflp-root .vflp-cover__title {
  text-align: center !important;
}
#vflp-root {
  /* ─ カラーパレット（深森ダーク × エメラルド × ゴールド × アイボリー） ─ */
  --vflp-bg:           #091510;           /* 最深部 森ブラック */
  --vflp-bg-2:         #0d1e14;           /* セクション交互 */
  --vflp-bg-card:      #122418;           /* カード背景 */
  --vflp-bg-glass:     rgba(18, 36, 24, 0.75);
  --vflp-bg-glass-2:   rgba(18, 36, 24, 0.55);

  --vflp-green:        #4a9d7f;           /* エメラルドグリーン */
  --vflp-green-bright: #6bb89a;           /* 明るいグリーン */
  --vflp-green-light:  rgba(107, 184, 154, 0.18);
  --vflp-green-deep:   #2d7a5f;           /* 深いグリーン */

  --vflp-gold:         #c9a84c;           /* ゴールド */
  --vflp-gold-bright:  #e2c872;           /* 明るいゴールド */
  --vflp-gold-light:   rgba(201, 168, 76, 0.18);
  --vflp-gold-glow:    rgba(201, 168, 76, 0.12);

  --vflp-text:         #e2dace;           /* メインテキスト アイボリー */
  --vflp-text-2:       #bfb89e;           /* サブテキスト */
  --vflp-text-3:       #8a8272;           /* キャプション・薄テキスト */
  --vflp-text-link:    #6bb89a;           /* リンクカラー */

  --vflp-border:       rgba(107, 184, 154, 0.22);
  --vflp-border-gold:  rgba(201, 168, 76, 0.22);

  /* ─ タイポグラフィ ─ */
  --vflp-font-sans:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --vflp-font-serif:   'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --vflp-font-display: 'Cormorant Garamond', 'Times New Roman', serif;

  /* ─ 行間設計（モバイル基準値）★v3.0新設 ─ */
  --vflp-lh-body:     1.9;
  --vflp-lh-lead:     2.0;
  --vflp-lh-h1:       1.25;
  --vflp-lh-h2:       1.3;
  --vflp-lh-h3:       1.4;
  --vflp-lh-caption:  1.7;

  /* ─ 文字間隔（モバイル基準値）★v3.0新設 ─ */
  --vflp-ls-body:     0.03em;
  --vflp-ls-heading:  -0.01em;
  --vflp-ls-display:  0.05em;
  --vflp-ls-caption:  0.02em;

  /* ─ スペーシング ─ */
  --vflp-section-py:    clamp(4rem, 8vw, 8rem);
  --vflp-container-max: 900px;
  --vflp-container-wide: 1100px;
  --vflp-radius:         14px;
  --vflp-radius-sm:      8px;
  --vflp-radius-lg:      22px;

  /* ─ 段落・見出し余白 ★v3.0新設 ─ */
  --vflp-p-gap:         1.25em;
  --vflp-heading-mb:    0.8em;
  --vflp-list-gap:      0.5em;

  /* ─ トランジション ─ */
  --vflp-transition:      0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --vflp-transition-slow: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}