/**
 * Brand SEO 完全戦略ガイド LP — brand-seo-guide.css
 *
 * 設計思想:
 *   - #bsg-root 配下のみ完全独立デザイン
 *   - Cocoon / entry-content / article 干渉を完全排除
 *   - CSS カスタムプロパティで全色・全値を管理
 *   - モバイルファースト + clamp() 流体タイポグラフィ
 *   - アニメーションは opacity / transform / filter のみ使用
 *   - カラーパレット: 深ダークオリーブ × ゴールド × アイボリー（高級ダーク系）
 *   - フォント: Noto Serif JP + Noto Sans JP（日本語）/ Cormorant Garamond（欧文Display）
 *
 * @package cocoon-child-master
 */

/* ================================================================
   1. COCOON 干渉リセット
   ================================================================ */
.brand-seo-guide .article,
.brand-seo-guide .entry-content,
.brand-seo-guide .main,
.brand-seo-guide .content,
.brand-seo-guide .wrap,
.brand-seo-guide #main,
.brand-seo-guide #body-in,
.brand-seo-guide #container,
.brand-seo-guide #container-in,
.brand-seo-guide #contents,
.brand-seo-guide #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;
}

.brand-seo-guide #sidebar,
.brand-seo-guide .sidebar,
.brand-seo-guide #sidebar-scroll,
.brand-seo-guide .sidebar-top,
.brand-seo-guide .sidebar-bottom {
  display: none !important;
}

.brand-seo-guide #footer:not(.tp-footer),
.brand-seo-guide .site-footer:not(.tp-footer),
.brand-seo-guide .footer:not(.tp-footer) {
  display: none !important;
}


/* ================================================================
   2. CSS カスタムプロパティ（全色・全値）
   ================================================================ */
#bsg-root {
  /* ─ カラーパレット（深ダークオリーブ × ゴールド系） ─ */
  --bsg-bg:             #0a1208;   /* 最深部：深夜の森 */
  --bsg-bg-2:           #111c0d;   /* セカンダリ背景 */
  --bsg-bg-card:        #172212;   /* カード背景 */
  --bsg-bg-card-2:      #1e2e18;   /* ライトカード・ホバー */
  --bsg-bg-flow:        #0d1a09;   /* フローセクション専用 */

  /* ─ オリーブグリーン ─ */
  --bsg-olive:          #7a9050;   /* メインオリーブ */
  --bsg-olive-bright:   #a8b878;   /* ライトオリーブ */
  --bsg-olive-dim:      #526638;   /* ダークオリーブ */
  --bsg-olive-deep:     #304018;   /* ディープオリーブ */

  /* ─ ゴールド ─ */
  --bsg-gold:           #c9a844;   /* メインゴールド */
  --bsg-gold-bright:    #dcc870;   /* ブライトゴールド */
  --bsg-gold-light:     #f0e4b0;   /* ライトゴールド（ほぼアイボリー） */
  --bsg-gold-deep:      #8c7030;   /* ディープゴールド */

  /* ─ テキスト ─ */
  --bsg-text:           #e8dfcc;   /* メインテキスト：温かいアイボリー */
  --bsg-text-2:         #c0b090;   /* サブテキスト：温かい砂色 */
  --bsg-text-3:         #8a7858;   /* ミュートテキスト：キャプション等 */

  /* ─ ボーダー・リング ─ */
  --bsg-border:         rgba(201, 168, 68, 0.18);
  --bsg-border-bright:  rgba(201, 168, 68, 0.35);
  --bsg-ring:           rgba(201, 168, 68, 0.22);

  /* ─ シャドウ ─ */
  --bsg-shadow-sm:      0 2px 12px rgba(0, 0, 0, 0.35);
  --bsg-shadow-md:      0 6px 28px rgba(0, 0, 0, 0.45);
  --bsg-shadow-lg:      0 12px 44px rgba(0, 0, 0, 0.55);
  --bsg-glow-gold:      0 0 28px rgba(201, 168, 68, 0.28);
  --bsg-glow-gold-lg:   0 0 48px rgba(201, 168, 68, 0.40);

  /* ─ タイポグラフィ ─ */
  --bsg-font-sans:      'Noto Sans JP', sans-serif;
  --bsg-font-serif:     'Noto Serif JP', serif;
  --bsg-font-display:   'Cormorant Garamond', serif;

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

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


/* ================================================================
   3. グローバルリセット — #bsg-root スコープ
   ================================================================ */
#bsg-root,
#bsg-root *,
#bsg-root *::before,
#bsg-root *::after {
  box-sizing: border-box;
}

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

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

#bsg-root {
  background-color: var(--bsg-bg);
  color: var(--bsg-text);
  font-family: var(--bsg-font-sans);
  font-weight: 400;
  line-height: 1.85;
  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;
}

#bsg-root a {
  color: var(--bsg-gold-bright);
  text-decoration: none;
  transition: color var(--bsg-transition);
}
#bsg-root a:hover {
  color: var(--bsg-gold-light);
}

#bsg-root strong {
  font-weight: 700;
}

#bsg-root em {
  font-style: normal;
}


/* ================================================================
   4. Cocoon blockquote / table 白抜き完全解消
   ================================================================ */
#bsg-root blockquote {
  background: var(--bsg-bg-card) !important;
  border-left: 3px solid var(--bsg-gold) !important;
  border-right: none !important;
  color: var(--bsg-text) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: var(--bsg-radius-sm) !important;
}
#bsg-root blockquote::before,
#bsg-root blockquote::after {
  display: none !important;
}

#bsg-root code,
#bsg-root pre {
  background: rgba(0, 0, 0, 0.35) !important;
  color: var(--bsg-olive-bright) !important;
  border: 1px solid var(--bsg-border) !important;
}

#bsg-root hr {
  border: none;
  border-top: 1px solid var(--bsg-border);
  margin: 2rem 0;
}


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

/* コンテナ */
.bsg-container {
  max-width: var(--bsg-container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4.5vw, 2.5rem);
}

.bsg-container--wide {
  max-width: var(--bsg-container-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4.5vw, 2.5rem);
}

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

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

/* セクションヘッダー */
.bsg-section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.bsg-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.25rem;
}

.bsg-section-num {
  font-family: var(--bsg-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--bsg-gold);
  line-height: 1;
  flex-shrink: 0;
}
.bsg-section-num--light {
  color: var(--bsg-gold-bright);
}

.bsg-section-rule {
  height: 1px;
  width: 56px;
  background: linear-gradient(90deg, var(--bsg-gold-bright), transparent);
  flex-shrink: 0;
}
.bsg-section-rule--light {
  background: linear-gradient(90deg, var(--bsg-gold-light), transparent);
}

.bsg-section-cat {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsg-text-3);
}
.bsg-section-cat--light {
  color: var(--bsg-olive-bright);
}

.bsg-section-title {
  font-family: var(--bsg-font-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--bsg-text);
  line-height: 1.35;
  margin-bottom: 1rem;
}
.bsg-section-title--light {
  color: #ffffff;
}

.bsg-section-desc {
  font-size: clamp(0.88rem, 1.6vw, 1rem);
  color: var(--bsg-text-2);
  font-weight: 300;
  max-width: 640px;
  line-height: 2;
}
.bsg-section-desc--light {
  color: var(--bsg-olive-bright);
}


/* ================================================================
   6. スクロールリビールアニメーション（必須）
   ================================================================ */
.bsg-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);
}

.bsg-reveal.bsg-reveal--left {
  transform: translateX(-32px);
}

.bsg-reveal.bsg-reveal--right {
  transform: translateX(32px);
}

.bsg-reveal.is-visible {
  opacity: 1;
  transform: translate(0);
}

/* stagger 遅延バリエーション */
.bsg-reveal[data-delay="1"] { transition-delay: 0.08s; }
.bsg-reveal[data-delay="2"] { transition-delay: 0.16s; }
.bsg-reveal[data-delay="3"] { transition-delay: 0.24s; }
.bsg-reveal[data-delay="4"] { transition-delay: 0.32s; }


/* ================================================================
   7. CTAボタン — 共通
   ================================================================ */
.bsg-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1.05rem clamp(1.8rem, 4vw, 2.8rem);
  border-radius: 100px;
  font-family: var(--bsg-font-serif);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  letter-spacing: 0.05em;
  color: #ffffff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--bsg-transition),
    box-shadow var(--bsg-transition),
    filter var(--bsg-transition);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  will-change: transform;
}

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

.bsg-cta-btn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(201,168,68,0.5), transparent 50%, rgba(201,168,68,0.2));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--bsg-transition);
}

.bsg-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), var(--bsg-glow-gold);
  filter: brightness(1.08);
}
.bsg-cta-btn:hover::after {
  opacity: 1;
}

.bsg-cta-btn:active {
  transform: translateY(-1px) scale(1.00);
}

.bsg-cta-btn__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.bsg-cta-btn__icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(255,255,255,0.85);
  border-top: 2px solid rgba(255,255,255,0.85);
}

.bsg-cta-btn--lg {
  padding: 1.25rem clamp(2.2rem, 5vw, 3.5rem);
  font-size: clamp(1rem, 1.8vw, 1.1rem);
}

.bsg-cta-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.bsg-cta-btn__sub {
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  color: var(--bsg-text-3);
  padding-left: 0.25rem;
}


/* ================================================================
   8. COVER セクション（ファーストビュー）
   ================================================================ */
.bsg-cover {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  display: flex;
  align-items: center;
  padding-block: clamp(110px, 15vw, 160px) clamp(80px, 10vw, 120px);
  overflow: hidden;
  background: var(--bsg-bg);
}

/* グラデーションメッシュ */
.bsg-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 78% 22%, rgba(120, 148, 76, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 12% 78%, rgba(184, 152, 64, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 42% 48% at 90% 82%, rgba(100, 130, 58, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 35% 40% at 40% 50%, rgba(18, 28, 12, 0.6) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ノイズテクスチャ */
.bsg-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}

.bsg-cover__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 装飾SVGリング */
.bsg-cover__ring {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-52%);
  width: clamp(280px, 40vw, 520px);
  height: clamp(280px, 40vw, 520px);
  opacity: 0.12;
}

/* カバーコンテンツ */
.bsg-cover__content {
  position: relative;
  z-index: 2;
  max-width: min(720px, 100%);
}

/* アイブロウ */
.bsg-cover__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(0.68rem, 1.2vw, 0.76rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bsg-olive);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
}

.bsg-cover__eyebrow-line {
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--bsg-gold), var(--bsg-olive));
  flex-shrink: 0;
}

/* メインタイトル */
.bsg-cover__title {
  font-family: var(--bsg-font-serif);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--bsg-text);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.bsg-cover__title-gold {
  color: var(--bsg-gold);
  position: relative;
  display: inline-block;
}

.bsg-cover__title-gold::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bsg-gold-bright), var(--bsg-gold));
  border-radius: 2px;
  opacity: 0.7;
}

/* タグライン（Cormorant Garamond italic） */
.bsg-cover__tagline {
  font-family: var(--bsg-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--bsg-text-3);
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* サブテキスト */
.bsg-cover__sub {
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  color: var(--bsg-text-2);
  font-weight: 300;
  line-height: 2;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}

/* タグ一覧 */
.bsg-cover__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.bsg-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.73rem;
  letter-spacing: 0.07em;
  font-weight: 500;
  line-height: 1;
}

.bsg-tag--dark {
  background: var(--bsg-olive-dim);
  color: var(--bsg-text);
}

.bsg-tag--gold {
  background: rgba(201, 168, 68, 0.14);
  color: var(--bsg-gold-bright);
  border: 1px solid rgba(201, 168, 68, 0.3);
}

.bsg-tag--ring {
  border: 1px solid rgba(122, 144, 80, 0.45);
  color: var(--bsg-olive-bright);
}

/* スクロールインジケータ */
.bsg-cover__scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--bsg-text-3);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.bsg-cover__scroll-text {
  text-transform: uppercase;
}

.bsg-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bsg-gold);
  flex-shrink: 0;
  animation: bsg-pdot 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(201, 168, 68, 0.6);
}

@keyframes bsg-pdot {
  0%, 100% { opacity: 1;  transform: scale(1);   }
  50%       { opacity: .4; transform: scale(.65); }
}


/* ================================================================
   9. TICKER BAND
   ================================================================ */
.bsg-ticker {
  background: var(--bsg-olive-deep);
  padding: 16px 0;
  overflow: hidden;
  border-top:    1px solid rgba(122, 144, 80, 0.2);
  border-bottom: 1px solid rgba(122, 144, 80, 0.2);
  position: relative;
  z-index: 1;
}

.bsg-ticker::before,
.bsg-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.bsg-ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--bsg-olive-deep), transparent);
}
.bsg-ticker::after {
  right: 0;
  background: linear-gradient(90deg, transparent, var(--bsg-olive-deep));
}

.bsg-ticker__track {
  display: flex;
  gap: 64px;
  animation: bsg-ticker 30s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

@keyframes bsg-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.bsg-ticker__item {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--bsg-olive-bright);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bsg-ticker__item strong {
  color: var(--bsg-gold-light);
}

.bsg-ticker__sep {
  color: var(--bsg-gold);
  font-size: 0.9rem;
  opacity: 0.8;
  flex-shrink: 0;
}


/* ================================================================
   10. SECTION 01 — DEFINITION（ブランドSEOとは）
   ================================================================ */
.bsg-def-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* 大きな引用ブロック */
.bsg-big-quote {
  background: linear-gradient(148deg, var(--bsg-olive-dim) 0%, var(--bsg-olive-deep) 100%);
  border-radius: var(--bsg-radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
  box-shadow: var(--bsg-shadow-md);
  transition: transform var(--bsg-transition), box-shadow var(--bsg-transition);
}

.bsg-big-quote::before {
  content: '"';
  position: absolute;
  top: -40px;
  left: 18px;
  font-family: var(--bsg-font-display);
  font-size: 220px;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.bsg-big-quote p {
  font-family: var(--bsg-font-serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--bsg-text);
  line-height: 1.9;
  position: relative;
  z-index: 1;
}

.bsg-big-quote p strong {
  color: var(--bsg-gold-light);
  font-weight: 700;
}

.bsg-big-quote__foot {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.bsg-big-quote__foot span {
  font-size: 0.78rem;
  color: var(--bsg-olive-bright);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.04em;
}

.bsg-big-quote__foot span::before {
  content: '▸';
  color: var(--bsg-gold);
  flex-shrink: 0;
}

/* E-E-A-T エリア */
.bsg-eeat-intro {
  font-size: clamp(0.86rem, 1.5vw, 0.94rem);
  color: var(--bsg-text-2);
  line-height: 1.9;
  margin-bottom: 1.4rem;
}

.bsg-eeat-intro strong {
  color: var(--bsg-gold-bright);
  font-weight: 700;
}

.bsg-eeat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 1.4rem;
}

.bsg-eeat-card {
  background: var(--bsg-bg-card);
  border: 1px solid var(--bsg-border);
  border-radius: var(--bsg-radius);
  padding: 1.2rem 1.1rem;
  transition:
    transform var(--bsg-transition),
    border-color var(--bsg-transition),
    box-shadow var(--bsg-transition);
  cursor: default;
}

.bsg-eeat-card:hover {
  transform: translateY(-3px);
  border-color: var(--bsg-border-bright);
  box-shadow: var(--bsg-shadow-md), var(--bsg-glow-gold);
}

.bsg-eeat-ltr {
  font-family: var(--bsg-font-display);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 400;
  color: var(--bsg-gold);
  line-height: 1;
  margin-bottom: 3px;
}

.bsg-eeat-en {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--bsg-text-3);
  margin-bottom: 4px;
}

.bsg-eeat-ja {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bsg-text);
}

/* 定義ノート */
.bsg-def-note {
  background: rgba(201, 168, 68, 0.08);
  border-left: 3px solid var(--bsg-gold);
  border-radius: 0 var(--bsg-radius-sm) var(--bsg-radius-sm) 0;
  padding: 1rem 1.25rem;
  font-size: 0.84rem;
  color: var(--bsg-text-2);
  line-height: 1.8;
}

.bsg-def-note strong {
  color: var(--bsg-gold-bright);
}


/* ================================================================
   11. SECTION 02 — WHY NOW（なぜ今）
   ================================================================ */
.bsg-why-list {
  display: flex;
  flex-direction: column;
}

.bsg-why-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--bsg-border);
  align-items: start;
}

.bsg-why-row:first-child {
  border-top: 1px solid var(--bsg-border);
}

.bsg-why-num {
  font-family: var(--bsg-font-display);
  font-size: clamp(4rem, 7vw, 5.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--bsg-olive-dim);
  line-height: 1;
  user-select: none;
}

.bsg-why-body h3 {
  font-family: var(--bsg-font-serif);
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--bsg-olive-bright);
  margin-bottom: 0.9rem;
  line-height: 1.5;
  font-weight: 700;
}

.bsg-why-body h3 em {
  background: linear-gradient(180deg, transparent 65%, rgba(201, 168, 68, 0.25) 65%);
  padding-inline: 1px;
  font-style: normal;
}

.bsg-why-body > p {
  font-size: clamp(0.87rem, 1.5vw, 0.95rem);
  color: var(--bsg-text-2);
  line-height: 2;
  margin-bottom: 1rem;
}

.bsg-arrow-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.2rem;
}

.bsg-arrow-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(0.83rem, 1.4vw, 0.9rem);
  color: var(--bsg-text-2);
  line-height: 1.7;
}

.bsg-arrow-list li::before {
  content: '→';
  color: var(--bsg-gold);
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 400;
}

.bsg-why-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--bsg-olive-deep);
  border: 1px solid rgba(122, 144, 80, 0.3);
  color: var(--bsg-olive-bright);
  border-radius: 100px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}


/* ================================================================
   12. SECTION 03 — PILLARS（3つの柱）
   ================================================================ */
.bsg-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.bsg-pillar-card {
  background: var(--bsg-bg-card);
  border-radius: var(--bsg-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bsg-border);
  box-shadow: var(--bsg-shadow-sm);
  transition:
    transform  0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--bsg-transition);
}

.bsg-pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--bsg-shadow-lg), var(--bsg-glow-gold);
  border-color: var(--bsg-border-bright);
}

.bsg-pillar-top {
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 2vw, 1.6rem);
  position: relative;
  overflow: hidden;
}

.bsg-pillar-ghost {
  position: absolute;
  top: 8px;
  right: 16px;
  font-family: var(--bsg-font-display);
  font-size: clamp(4rem, 6vw, 5.5rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.bsg-pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--bsg-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.bsg-pillar-icon--p1 { background: rgba(82, 102, 56, 0.25); }
.bsg-pillar-icon--p2 { background: rgba(184, 152, 64, 0.2);  }
.bsg-pillar-icon--p3 { background: rgba(122, 144, 80, 0.2);  }

.bsg-pillar-title {
  font-family: var(--bsg-font-serif);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  color: var(--bsg-text);
  margin-bottom: 4px;
  line-height: 1.5;
}

.bsg-pillar-sub {
  font-size: 0.72rem;
  color: var(--bsg-text-3);
  letter-spacing: 0.06em;
}

/* カラーストライプ */
.bsg-pillar-stripe {
  height: 3px;
  margin-inline: clamp(1.2rem, 2.5vw, 2rem);
  border-radius: 2px;
}

.bsg-pillar-stripe--p1 {
  background: linear-gradient(90deg, var(--bsg-olive-dim), var(--bsg-olive-deep));
}
.bsg-pillar-stripe--p2 {
  background: linear-gradient(90deg, var(--bsg-gold), var(--bsg-gold-deep));
}
.bsg-pillar-stripe--p3 {
  background: linear-gradient(90deg, var(--bsg-olive), var(--bsg-olive-deep));
}

.bsg-pillar-body {
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2rem);
}

.bsg-pillar-items {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 1.2rem;
}

.bsg-pillar-items li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(0.82rem, 1.4vw, 0.88rem);
  color: var(--bsg-text-2);
  line-height: 1.55;
}

.bsg-dot-gold {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bsg-gold);
  flex-shrink: 0;
  margin-top: 5px;
}

.bsg-pillar-callout {
  padding: 12px 15px;
  border-radius: var(--bsg-radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.7;
}

.bsg-pillar-callout--p1 {
  background: rgba(82, 102, 56, 0.18);
  color: var(--bsg-olive-bright);
}
.bsg-pillar-callout--p2 {
  background: rgba(201, 168, 68, 0.12);
  color: var(--bsg-gold-bright);
}
.bsg-pillar-callout--p3 {
  background: rgba(122, 144, 80, 0.15);
  color: var(--bsg-olive-bright);
}


/* ================================================================
   13. SECTION 04 — ACTION FLOW（実践フロー）
   ================================================================ */
.bsg-section--flow {
  background:
    radial-gradient(ellipse 55% 50% at 82% 22%, rgba(120, 148, 72, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 42% at 12% 80%, rgba(184, 152, 64, 0.08) 0%, transparent 55%),
    var(--bsg-bg-flow);
}

.bsg-flow-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

/* 4ステップをつなぐ横線 */
.bsg-flow-row::before {
  content: '';
  position: absolute;
  top: 56px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, var(--bsg-olive-dim), var(--bsg-gold), var(--bsg-gold), var(--bsg-olive-dim));
  opacity: 0.55;
  pointer-events: none;
}

.bsg-flow-step {
  text-align: center;
  padding: 0 clamp(10px, 2vw, 20px);
  position: relative;
}

.bsg-flow-circle {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(82, 102, 56, 0.3);
  border: 2px solid var(--bsg-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  position: relative;
  z-index: 1;
  transition: transform var(--bsg-transition), background var(--bsg-transition), box-shadow var(--bsg-transition);
}

.bsg-flow-circle:hover {
  background: rgba(201, 168, 68, 0.18);
  transform: scale(1.06);
  box-shadow: var(--bsg-glow-gold);
}

.bsg-flow-num {
  font-family: var(--bsg-font-display);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--bsg-gold-bright);
}

.bsg-flow-step h4 {
  font-family: var(--bsg-font-serif);
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  color: var(--bsg-text);
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.bsg-flow-step > p {
  font-size: clamp(0.74rem, 1.2vw, 0.8rem);
  color: var(--bsg-olive-bright);
  line-height: 1.8;
}

.bsg-flow-badge {
  display: inline-flex;
  margin-top: 0.9rem;
  padding: 5px 12px;
  background: rgba(201, 168, 68, 0.12);
  border: 1px solid rgba(201, 168, 68, 0.28);
  border-radius: 100px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--bsg-gold-bright);
}


/* ================================================================
   14. SECTION 05 — ACTION CHECKLIST（行動リスト）
   ================================================================ */
.bsg-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.bsg-check-col {
  display: flex;
  flex-direction: column;
}

.bsg-check-label {
  font-family: var(--bsg-font-serif);
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  color: var(--bsg-text);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.bsg-check-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bsg-border);
}

.bsg-check-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bsg-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  background: var(--bsg-bg-card);
  border: 1px solid var(--bsg-border);
  border-radius: var(--bsg-radius);
  font-size: clamp(0.83rem, 1.4vw, 0.9rem);
  color: var(--bsg-text-2);
  cursor: pointer;
  transition:
    border-color var(--bsg-transition),
    box-shadow  var(--bsg-transition),
    opacity     var(--bsg-transition);
  user-select: none;
  line-height: 1.6;
}

.bsg-check-item:hover {
  border-color: var(--bsg-border-bright);
  box-shadow: var(--bsg-shadow-sm);
}

.bsg-check-item:focus-visible {
  outline: 2px solid var(--bsg-gold);
  outline-offset: 2px;
}

.bsg-check-item[data-checked="true"] {
  opacity: 0.55;
}

.bsg-check-item[data-checked="true"] .bsg-check-box {
  background: rgba(122, 144, 80, 0.2);
  border-color: var(--bsg-olive);
}

.bsg-check-box {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid var(--bsg-olive-dim);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background var(--bsg-transition), border-color var(--bsg-transition);
}

/* スタッツパネル（右側） */
.bsg-stats-panel {
  background: linear-gradient(148deg, var(--bsg-olive-dim) 0%, var(--bsg-olive-deep) 100%);
  border-radius: var(--bsg-radius-lg);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  box-shadow: var(--bsg-shadow-md);
  border: 1px solid rgba(122, 144, 80, 0.2);
}

.bsg-stats-title {
  font-family: var(--bsg-font-serif);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: #ffffff;
  margin-bottom: 1.4rem;
  line-height: 1.55;
  font-weight: 700;
}

.bsg-stats-title span {
  color: var(--bsg-gold-light);
}

.bsg-stat-row {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.bsg-stat-num {
  font-family: var(--bsg-font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
  font-weight: 300;
  color: var(--bsg-gold-bright);
  line-height: 1;
  margin-bottom: 4px;
}

.bsg-stat-num sub {
  font-size: 1.1rem;
  vertical-align: middle;
}

.bsg-stat-desc {
  font-size: 0.8rem;
  color: var(--bsg-olive-bright);
  line-height: 1.7;
}

.bsg-stat-div {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}


/* ================================================================
   15. SECTION 06 — SUMMARY（まとめ）
   ================================================================ */
.bsg-section--summary {
  background: var(--bsg-bg);
}

.bsg-sum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.bsg-sum-card {
  background: var(--bsg-bg-card);
  border-radius: var(--bsg-radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--bsg-shadow-sm);
  border: 1px solid var(--bsg-border);
  transition:
    transform var(--bsg-transition),
    box-shadow var(--bsg-transition),
    border-color var(--bsg-transition);
}

.bsg-sum-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bsg-shadow-md), var(--bsg-glow-gold);
  border-color: var(--bsg-border-bright);
}

.bsg-sum-tag {
  display: inline-block;
  font-family: var(--bsg-font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--bsg-gold);
  margin-bottom: 0.7rem;
  letter-spacing: 0.04em;
}

.bsg-sum-card h4 {
  font-family: var(--bsg-font-serif);
  font-size: clamp(0.9rem, 1.6vw, 1.02rem);
  color: var(--bsg-text);
  margin-bottom: 0.7rem;
  line-height: 1.5;
  font-weight: 700;
}

.bsg-sum-card p {
  font-size: clamp(0.82rem, 1.4vw, 0.88rem);
  color: var(--bsg-text-2);
  line-height: 1.9;
}

/* まとめクロージングブロック */
.bsg-big-close {
  background: linear-gradient(135deg, var(--bsg-olive-dim) 0%, var(--bsg-olive-deep) 100%);
  border-radius: var(--bsg-radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: var(--bsg-shadow-md);
  border: 1px solid rgba(122, 144, 80, 0.2);
  transition: box-shadow var(--bsg-transition);
}

.bsg-big-close:hover {
  box-shadow: var(--bsg-shadow-lg), 0 0 40px rgba(122, 144, 80, 0.12);
}

.bsg-big-close__text {
  flex: 1;
}

.bsg-big-close__text h3 {
  font-family: var(--bsg-font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: #ffffff;
  margin-bottom: 0.9rem;
  line-height: 1.5;
  font-weight: 700;
}

.bsg-big-close__text h3 span {
  color: var(--bsg-gold-light);
}

.bsg-big-close__text p {
  font-size: clamp(0.84rem, 1.5vw, 0.92rem);
  color: var(--bsg-olive-bright);
  line-height: 2;
}

.bsg-big-close__icon {
  font-size: clamp(3rem, 5vw, 5rem);
  opacity: 0.35;
  flex-shrink: 0;
  filter: grayscale(0.3);
}


/* ================================================================
   16. FINAL CTA セクション
   ================================================================ */
.bsg-cta-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--bsg-section-py);
  background: linear-gradient(148deg, var(--bsg-olive-dim) 0%, var(--bsg-olive-deep) 40%, #050d03 100%);
}

.bsg-cta-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 60% 65% at 50% 50%, rgba(201, 168, 68, 0.1) 0%, transparent 65%);
  pointer-events: none;
}

/* ノイズテクスチャ */
.bsg-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.bsg-cta-section__inner {
  position: relative;
  z-index: 1;
}

.bsg-cta-section__title {
  font-family: var(--bsg-font-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: #ffffff;
  margin-bottom: 1.2rem;
  line-height: 1.35;
  font-weight: 700;
}

/* CTAデコレーション（ライン＋ドット） */
.bsg-cta-deco {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  /* ── titleとdescの間に置かれる装飾なので、上下マージンを均等に ── */
  margin-block: clamp(1.5rem, 3vw, 2.2rem) 0;
}

.bsg-cta-line {
  width: 48px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--bsg-gold));
  border-radius: 1px;
}

.bsg-cta-line:last-child {
  background: linear-gradient(90deg, var(--bsg-gold), transparent);
}

.bsg-cta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bsg-gold);
  box-shadow: 0 0 10px rgba(201, 168, 68, 0.6);
}

.bsg-cta-section__desc {
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  color: var(--bsg-olive-bright);
  max-width: 560px;
  /* ── ブロック自体をページ中央に配置（!importantで #bsg-root p リセットを確実に上書き） ── */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(2rem, 4.5vw, 3.5rem);
  margin-bottom: clamp(2.8rem, 5vw, 4rem);
  /* ── テキスト中央揃え（親への継承に依存せず明示） ── */
  text-align: center;
  line-height: 2.1;
  /* ── 左右のpadding（モバイル時の窮屈さ解消） ── */
  padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.bsg-cta-section .bsg-cta-btn-wrap {
  align-items: center;
}


/* ================================================================
   17. レスポンシブ — タブレット（768px〜）
   ================================================================ */
@media (min-width: 768px) {
  .bsg-cover__content {
    max-width: 660px;
  }
}


/* ================================================================
   18. レスポンシブ — モバイル（〜767px）
   ================================================================ */
@media (max-width: 767px) {

  /* Cover */
  .bsg-cover {
    padding-block: 100px 70px;
  }
  .bsg-cover__ring {
    display: none;
  }
  .bsg-cover__title {
    font-size: clamp(2.2rem, 10vw, 2.8rem);
  }
  .bsg-cta-btn-wrap {
    align-items: stretch;
  }
  .bsg-cta-btn {
    justify-content: center;
    text-align: center;
  }

  /* 定義グリッド */
  .bsg-def-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* EEAT グリッド（2列維持） */
  .bsg-eeat-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Why */
  .bsg-why-row {
    grid-template-columns: 70px 1fr;
    gap: 1.2rem;
  }
  .bsg-why-num {
    font-size: 3.5rem;
  }

  /* Pillar */
  .bsg-pillar-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Flow */
  .bsg-flow-row {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.2rem, 3vw, 2rem);
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .bsg-flow-row::before {
    display: none;
  }
  .bsg-flow-circle {
    width: 88px;
    height: 88px;
  }
  .bsg-flow-num {
    font-size: 1.8rem;
  }

  /* Checklist */
  .bsg-check-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Summary */
  .bsg-sum-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .bsg-big-close {
    flex-direction: column;
    gap: 1.2rem;
    text-align: center;
  }
  .bsg-big-close__icon {
    font-size: 3rem;
  }

  /* CTA */
  .bsg-cta-section .bsg-cta-btn-wrap {
    align-items: stretch;
  }
}


/* ================================================================
   19. レスポンシブ — ナロータブレット（768〜1023px）
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

  .bsg-pillar-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bsg-flow-row {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    row-gap: 2.5rem;
  }
  .bsg-flow-row::before {
    display: none;
  }

  .bsg-sum-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bsg-check-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .bsg-why-row {
    grid-template-columns: 100px 1fr;
    gap: 1.5rem;
  }
}


/* ================================================================
   20. アクセシビリティ — reduced-motion 対応
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .bsg-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bsg-ticker__track {
    animation: none !important;
  }
  .bsg-pulse-dot {
    animation: none !important;
  }
  .bsg-cta-btn,
  .bsg-pillar-card,
  .bsg-eeat-card,
  .bsg-sum-card,
  .bsg-flow-circle {
    transition: none !important;
  }
}



/* ================================================================
   21. シネマティック画像コンポーネント（16:9 横長）
   ================================================================ */

/* ── 画像セクション：章間ブレイク用フルブリード ── */
.bsg-figure-break {
  display: block;
  margin-block: clamp(3rem, 7vw, 6rem);
  padding-inline: clamp(1.25rem, 4.5vw, 2.5rem);
}

/* ── 画像セクション：セクション内部用（containerに収める） ── */
.bsg-figure-inline {
  display: block;
  margin-block: clamp(2.5rem, 5vw, 4rem) 0;
  padding-inline: 0;
}

/* ── figure ラッパー：16:9 アスペクト固定 + リッチな装飾 ── */
.bsg-figure {
  position: relative;
  display: block;                      /* ブロック要素であることを明示 */
  width: 100%;                         /* 親要素幅に追従させる */
  max-width: var(--bsg-container-wide);
  margin-left: auto !important;        /* #bsg-root figureリセットを確実に上書き */
  margin-right: auto !important;       /* 左右autoでブロックを中央配置 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bsg-radius);
  box-shadow:
    var(--bsg-shadow-lg),
    0 0 0 1px var(--bsg-border);
  background-color: var(--bsg-bg-card);
}

/* ── 画像本体：完全フィット + ロード後の微フェードイン ── */
.bsg-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition:
    transform var(--bsg-transition-slow),
    filter    var(--bsg-transition-slow);
  filter: saturate(0.92) contrast(1.03);
  will-change: transform;
}

/* ── ホバー時の微ズーム（PC/hover対応端末のみ） ── */
@media (hover: hover) {
  .bsg-figure:hover img {
    transform: scale(1.035);
    filter: saturate(1) contrast(1.06);
  }
}

/* ── ゴールド枠：内側に微妙なリング（高級感） ── */
.bsg-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--bsg-radius);
  box-shadow: inset 0 0 0 1px var(--bsg-border-bright);
  pointer-events: none;
  z-index: 2;
}

/* ── 上下のグラデーションマスク（背景との馴染ませ） ── */
.bsg-figure::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 18, 8, 0.18) 0%,
      transparent 18%,
      transparent 82%,
      rgba(10, 18, 8, 0.22) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── キャプション（必要に応じて使用） ── */
.bsg-figure-caption {
  max-width: var(--bsg-container-wide);
  margin: 1rem auto 0;
  text-align: center;
  font-family: var(--bsg-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.82rem, 1.4vw, 0.95rem);
  letter-spacing: 0.04em;
  color: var(--bsg-text-3);
  line-height: 1.6;
}

/* ── モバイル微調整 ── */
@media (max-width: 767px) {
  .bsg-figure-break {
    margin-block: clamp(2rem, 6vw, 3.5rem);
    padding-inline: 1rem;
  }
  .bsg-figure-inline {
    margin-block: 2rem 0;
  }
  .bsg-figure {
    border-radius: var(--bsg-radius-sm);
  }
}

/* ── reduced-motion対応 ── */
@media (prefers-reduced-motion: reduce) {
  .bsg-figure img {
    transition: none !important;
  }
  .bsg-figure:hover img {
    transform: none !important;
  }
}

/* ── Cocoon entry-content 画像干渉リセット（念のため） ── */
#bsg-root .bsg-figure,
#bsg-root .bsg-figure-break .bsg-figure,
#bsg-root .bsg-figure-inline .bsg-figure {
  margin-left: auto !important;
  margin-right: auto !important;
}