/**
 * AI時代に生き残る「私」の仕事 ―― 副業実践者のための変革地図 — side-business-transformation.css
 *
 * 設計思想:
 *   - #sbt-root 配下のみ完全独立デザイン
 *   - Cocoon / entry-content / article 干渉を完全排除
 *   - CSSカスタムプロパティで全色・全値を管理
 *   - モバイルファースト + clamp() 流体タイポグラフィ
 *   - アニメーションは opacity / transform / filter のみ使用
 *   - カラーパレット: 生成AI画像仕様（warm olive green × cream）に準拠した
 *     「紙とインクの書斎」＝オリーブグリーン×クリーム紙×ゴールドの知的エディトリアル基調
 *   - フォント: Shippori Mincho（明朝・見出し） / Zen Kaku Gothic New（本文）/ JetBrains Mono（数値・英字ラベル）
 *   - 行間設計: デバイス別 line-height 完全最適化（Section 5.10）
 *   - 配色アクセシビリティ: コントラスト比 4.5:1 以上保証（Section 5.8）
 *   - テキスト中央配置: Flexboxラッパー構造（Section 5.9）
 *
 * @package cocoon-child-master
 */

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

.side-business-transformation #sidebar,
.side-business-transformation .sidebar,
.side-business-transformation #sidebar-scroll,
.side-business-transformation .sidebar-top,
.side-business-transformation .sidebar-bottom {
  display: none !important;
}

.side-business-transformation #footer:not(.tp-footer),
.side-business-transformation .site-footer:not(.tp-footer),
.side-business-transformation .footer:not(.tp-footer) {
  display: none !important;
}

/* ================================================================
   2. CSSカスタムプロパティ（全色・全値）
   ================================================================ */
#sbt-root {
  /* ─ カラーパレット（warm olive green × cream の紙とインク） ─ */
  --sbt-bg:          #f7f6ec;
  --sbt-bg-2:        #eeecd9;
  --sbt-bg-card:     #fbfaf2;
  --sbt-ink:         #2b3324;
  --sbt-ink-soft:    #4d5a41;
  --sbt-olive-900:   #333d26;
  --sbt-olive-800:   #41502f;
  --sbt-olive-700:   #586b3e;
  --sbt-olive-600:   #7c8b5a;
  --sbt-olive-500:   #94a06e;
  --sbt-olive-300:   #b9c398;
  --sbt-olive-200:   #d6dcbe;
  --sbt-olive-100:   #e8ead6;
  --sbt-gold:        #b6912f;
  --sbt-gold-bright: #c9a23a;
  --sbt-gold-light:  #e4d7ab;
  --sbt-text:        #2b3324;
  --sbt-text-2:      #4d5a41;
  --sbt-border:      rgba(182, 145, 47, 0.22);
  --sbt-stamp:       #5b4a2f;
  --sbt-kill:        #8a5a3a;

  /* ─ タイポグラフィ ─ */
  --sbt-font-sans:    'Zen Kaku Gothic New', sans-serif;
  --sbt-font-serif:   'Zen Old Mincho', serif;
  --sbt-font-display: 'Shippori Mincho', serif;
  --sbt-font-mono:    'JetBrains Mono', monospace;

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

  /* ─ 文字間隔（モバイル基準値）─ */
  --sbt-ls-body:     0.03em;
  --sbt-ls-heading:  -0.01em;
  --sbt-ls-display:   0.05em;
  --sbt-ls-caption:   0.02em;

  /* ─ スペーシング ─ */
  --sbt-section-py:    clamp(3.5rem, 7vw, 7rem);
  --sbt-container-max: 900px;
  --sbt-container-wide: 1180px;
  --sbt-radius:         6px;
  --sbt-radius-sm:      4px;
  --sbt-radius-lg:      10px;

  /* ─ 段落・見出し余白 ─ */
  --sbt-p-gap:         1.25em;
  --sbt-heading-mb:    0.8em;
  --sbt-list-gap:      0.5em;

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

/* ================================================================
   3. GLOBAL RESET — #sbt-root スコープ
   ================================================================ */
#sbt-root,
#sbt-root *,
#sbt-root *::before,
#sbt-root *::after {
  box-sizing: border-box;
}

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

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

#sbt-root {
  background-color: var(--sbt-bg);
  color: var(--sbt-text);
  font-family: var(--sbt-font-sans);
  font-weight: 400;
  line-height: var(--sbt-lh-body, 1.9);
  letter-spacing: var(--sbt-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;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
}

#sbt-root img,
#sbt-root svg { display: block; max-width: 100%; }
#sbt-root a { color: inherit; text-decoration: none; }
#sbt-root ::selection { background: var(--sbt-olive-300); color: var(--sbt-olive-900); }

/* ================================================================
   4. ベースコンポーネント
   ================================================================ */
.sbt-container {
  max-width: var(--sbt-container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

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

.sbt-section {
  padding-block: var(--sbt-section-py);
  position: relative;
}

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

.sbt-eyebrow {
  font-family: var(--sbt-font-mono);
  font-size: 12px;
  letter-spacing: var(--sbt-ls-display);
  text-transform: uppercase;
  color: var(--sbt-olive-700);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sbt-eyebrow::before { content:''; width: 22px; height: 1px; background: var(--sbt-olive-600); display: inline-block; }

/* ================================================================
   5. スクロールリビール（必須）
   ================================================================ */
.sbt-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sbt-reveal.is-visible { opacity: 1; transform: translateY(0); }
.sbt-reveal[data-delay="1"] { transition-delay: 0.1s; }
.sbt-reveal[data-delay="2"] { transition-delay: 0.2s; }
.sbt-reveal[data-delay="3"] { transition-delay: 0.3s; }
.sbt-reveal[data-delay="4"] { transition-delay: 0.4s; }

/* ================================================================
   6. ブロッククォート・テーブル白抜き対策
   ================================================================ */
#sbt-root blockquote {
  background: var(--sbt-bg-card) !important;
  border-left: 3px solid var(--sbt-gold) !important;
  border-right: none !important;
  color: var(--sbt-text) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: var(--sbt-radius-sm) !important;
}
#sbt-root blockquote::before,
#sbt-root blockquote::after { display: none !important; }

#sbt-root .sbt-table-wrap {
  overflow-x: auto;
  margin-block: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--sbt-container-wide);
  border-radius: var(--sbt-radius);
  border: 1px solid var(--sbt-border);
  background: var(--sbt-bg-card);
  box-shadow: 0 18px 40px -22px rgba(43,51,36,0.35);
}
#sbt-root .sbt-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: transparent !important; min-width: 720px; }
#sbt-root .sbt-table thead th {
  background: var(--sbt-olive-800) !important;
  color: #fdfcf3 !important;
  padding: 0.9rem 1.1rem;
  text-align: left;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--sbt-border);
  line-height: var(--sbt-lh-body);
}
#sbt-root .sbt-table tbody td {
  background: transparent !important;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--sbt-olive-100);
  color: var(--sbt-text-2);
  vertical-align: top;
  line-height: var(--sbt-lh-body);
}
#sbt-root .sbt-table tbody tr:nth-of-type(even) td { background: var(--sbt-bg-2) !important; }
#sbt-root .sbt-table tbody tr:hover td { background: rgba(182,145,47,0.07) !important; }
#sbt-root .sbt-table td.sbt-theme-cell { font-weight: 700; color: var(--sbt-olive-900); white-space: nowrap; }
#sbt-root .sbt-tag-kill { color: var(--sbt-kill); }
#sbt-root .sbt-tag-keep { color: var(--sbt-olive-700); font-weight: 600; }
#sbt-root .sbt-tag-born { color: var(--sbt-gold); font-weight: 600; }

/* ================================================================
   8. アクセシビリティ配色仕様（Cocoonストライプリセット含む）
      ★省略禁止。全コード必須出力。
   ================================================================ */
#sbt-root .entry-content table,
#sbt-root table {
  background-color: transparent !important;
  border-collapse: collapse;
}
#sbt-root .entry-content table tr,
#sbt-root .entry-content table tr:nth-of-type(even),
#sbt-root .entry-content table tr:nth-of-type(odd),
#sbt-root table tr,
#sbt-root table tr:nth-of-type(even),
#sbt-root table tr:nth-of-type(odd) {
  background-color: var(--sbt-bg-card) !important;
  color: var(--sbt-text) !important;
}
#sbt-root .entry-content table th,
#sbt-root .entry-content table td,
#sbt-root table th,
#sbt-root table td {
  color: inherit !important;
  border-color: var(--sbt-border) !important;
}
#sbt-root blockquote:not([class*="sbt"]),
body.side-business-transformation .entry-content blockquote {
  background-color: #F0F0F0 !important;
  color:            #1A1A1A !important;
  border-left:  4px solid #555555 !important;
  border-right: none       !important;
  border-top:   none       !important;
  border-bottom:none       !important;
  padding:  1.25rem 1.5rem !important;
  margin:   0              !important;
  box-shadow: none         !important;
}
#sbt-root table:not([class*="sbt"]) th,
body.side-business-transformation .entry-content table th {
  background-color: #E8E8E8 !important;
  color:            #111111 !important;
  border-color:     #C0C0C0 !important;
}
#sbt-root table:not([class*="sbt"]) td,
body.side-business-transformation .entry-content table td {
  background-color: #F5F5F5 !important;
  color:            #222222 !important;
  border-color:     #D0D0D0 !important;
}
#sbt-root code:not([class]) {
  background-color: #EBEBEB !important;
  color:            #1E1E1E !important;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
}
#sbt-root pre:not([class]) {
  background-color: #EBEBEB !important;
  color:            #1E1E1E !important;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.875em;
}
#sbt-root .sbt-blockquote {
  background-color: var(--sbt-bg-card) !important;
  color:            var(--sbt-text)    !important;
  border-left: 3px solid var(--sbt-gold) !important;
  padding: 1.5rem 1.75rem !important;
  border-radius: var(--sbt-radius-sm) !important;
}

/* ================================================================
   9. テキストブロック中央配置仕様（Flexboxラッパー構造）
      ★margin:autoではなくFlexboxラッパーを使用すること
   ================================================================ */
.sbt-align-center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.sbt-align-center-wrapper .sbt-content-block {
  max-width: var(--sbt-container-max);
  text-align: center;
  width: 100%;
}
.sbt-align-center-wrapper .sbt-content-block--wide {
  max-width: var(--sbt-container-wide);
  text-align: center;
  width: 100%;
}
.sbt-section-header-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sbt-section-header { text-align: center; max-width: min(760px, 92%); width: 100%; }
.sbt-section-header.sbt-align-left { text-align: left; margin-inline: 0; }
.sbt-section-eyebrow { text-align: center; display: flex; width: fit-content; margin-inline: auto; }
.sbt-cta-btn-outer { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sbt-cta-btn-wrap { text-align: center; width: fit-content; }
.sbt-blockquote-center-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sbt-blockquote-center-wrap blockquote,
.sbt-blockquote-center-wrap .sbt-blockquote {
  text-align: center !important;
  max-width: min(680px, 90%) !important;
  width: 100% !important;
}
.sbt-table-outer { display: flex; flex-direction: column; align-items: center; width: 100%; }
.sbt-text-center { text-align: center !important; }
.sbt-block-center { margin-left: auto !important; margin-right: auto !important; max-width: var(--sbt-container-max); }

/* ================================================================
   10. 行間設計・デバイス別最適化（★単一値設定禁止）
   ================================================================ */
#sbt-root p,
#sbt-root li {
  line-height:    var(--sbt-lh-body, 1.9);
  letter-spacing: var(--sbt-ls-body, 0.03em);
  overflow-wrap:  break-word;
  word-break:     auto-phrase;
}
#sbt-root .sbt-lead,
#sbt-root .sbt-cover__sub,
#sbt-root .sbt-section-desc {
  line-height:    var(--sbt-lh-lead, 2.0);
  letter-spacing: 0.04em;
  overflow-wrap:  break-word;
  word-break:     keep-all;   /* auto-phrase未対応ブラウザ向けフォールバック */
  word-break:     auto-phrase;
}
#sbt-root h1,
#sbt-root .sbt-cover__title {
  line-height:    var(--sbt-lh-h1, 1.3);
  letter-spacing: var(--sbt-ls-heading, -0.01em);
  overflow-wrap:  break-word;
  word-break:     keep-all;   /* auto-phrase未対応ブラウザ向けフォールバック */
  word-break:     auto-phrase;
  font-family: var(--sbt-font-display);
  font-weight: 700;
  color: var(--sbt-olive-900);
}
#sbt-root h2,
#sbt-root .sbt-section-title {
  line-height:    var(--sbt-lh-h2, 1.3);
  letter-spacing: var(--sbt-ls-heading, -0.01em);
  overflow-wrap:  break-word;
  word-break:     auto-phrase;
  font-family: var(--sbt-font-display);
  font-weight: 700;
  color: var(--sbt-olive-900);
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  margin-top: 0.6em;
}
#sbt-root h3 {
  line-height:    var(--sbt-lh-h3, 1.4);
  letter-spacing: -0.005em;
  overflow-wrap:  break-word;
  font-family: var(--sbt-font-display);
  font-weight: 700;
  color: var(--sbt-olive-900);
}
#sbt-root h4,
#sbt-root h5,
#sbt-root h6 {
  line-height: 1.45;
  letter-spacing: -0.005em;
  font-family: var(--sbt-font-display);
  font-weight: 700;
  color: var(--sbt-olive-900);
}
#sbt-root small,
#sbt-root .sbt-caption,
#sbt-root .sbt-note,
#sbt-root .sbt-cta-btn__sub {
  line-height:    var(--sbt-lh-caption, 1.7);
  letter-spacing: var(--sbt-ls-caption, 0.02em);
}
#sbt-root .sbt-section-eyebrow,
#sbt-root .sbt-cover__eyebrow,
#sbt-root [class*="sbt-en-"] {
  letter-spacing: var(--sbt-ls-display, 0.05em);
  line-height: 1.4;
}

#sbt-root p + p { margin-top: var(--sbt-p-gap, 1.25em); }
#sbt-root h2 + p,
#sbt-root h2 + .sbt-section-desc,
#sbt-root h3 + p { margin-top: 0.75em; }
#sbt-root p + ul,
#sbt-root p + ol { margin-top: 0.75em; }
#sbt-root li + li { margin-top: var(--sbt-list-gap, 0.5em); }
#sbt-root h2:not(:first-child),
#sbt-root h3:not(:first-child) { margin-top: 2em; }
#sbt-root h2,
#sbt-root h3 { margin-bottom: var(--sbt-heading-mb, 0.8em); }

@media (min-width: 768px) {
  #sbt-root {
    --sbt-lh-body:    1.88;
    --sbt-lh-lead:    1.95;
    --sbt-lh-h1:      1.2;
    --sbt-lh-h2:      1.28;
    --sbt-lh-h3:      1.35;
    --sbt-ls-body:    0.025em;
    --sbt-p-gap:      1.3em;
  }
  #sbt-root .sbt-container p,
  #sbt-root .sbt-section-header p { max-width: 100%; }
}

@media (min-width: 1024px) {
  #sbt-root {
    --sbt-lh-body:    1.85;
    --sbt-lh-lead:    1.9;
    --sbt-lh-h1:      1.15;
    --sbt-lh-h2:      1.2;
    --sbt-lh-h3:      1.3;
    --sbt-lh-caption: 1.65;
    --sbt-ls-body:    0.02em;
    --sbt-ls-heading: -0.02em;
    --sbt-p-gap:      1.35em;
    --sbt-heading-mb: 0.85em;
  }
  #sbt-root h1,
  #sbt-root .sbt-cover__title { letter-spacing: -0.025em; }
}

@media (min-width: 1280px) {
  #sbt-root { --sbt-lh-body: 1.85; }
}

/* ================================================================
   12. リスト要素 Cocoon干渉排除（★省略禁止）
   ================================================================ */
#sbt-root .entry-content ul,
#sbt-root .entry-content ol,
#sbt-root ul,
#sbt-root ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
#sbt-root .entry-content li,
#sbt-root li {
  position: relative;
  padding-left: 0 !important;
  margin-bottom: 0;
  list-style-type: none !important;
}
#sbt-root .entry-content li::before,
#sbt-root .entry-content li::after { content: none !important; }

#sbt-root .sbt-list li {
  padding-left: 1.5em !important;
  margin-bottom: var(--sbt-list-gap, 0.5em);
  position: relative;
}
#sbt-root .sbt-list li::before {
  content: '●';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--sbt-gold);
  font-size: 0.6em;
  line-height: var(--sbt-lh-body);
}
#sbt-root .sbt-list--check li::before { content: '✓'; color: var(--sbt-gold); font-weight: 700; font-size: 0.85em; }
#sbt-root .sbt-list--numbered { counter-reset: sbt-counter; }
#sbt-root .sbt-list--numbered li { counter-increment: sbt-counter; padding-left: 2.2em !important; }
#sbt-root .sbt-list--numbered li::before {
  content: counter(sbt-counter, decimal-leading-zero);
  font-family: var(--sbt-font-mono);
  color: var(--sbt-gold);
  font-weight: 700;
  font-size: 0.85em;
  position: absolute; left: 0; top: 0.05em;
}

/* ================================================================
   13. LP固有コンポーネント
   ================================================================ */

/* 紙の粒状テクスチャ */
.sbt-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .3; mix-blend-mode: multiply;
  background-image: radial-gradient(var(--sbt-olive-300) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}

/* ── ヒーロー ── */
.sbt-cover {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 7rem) clamp(3.5rem, 8vw, 5.5rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, var(--sbt-olive-200) 0%, transparent 60%),
    var(--sbt-bg);
}
.sbt-cover__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.sbt-cover__eyebrow {
  font-family: var(--sbt-font-mono); font-size: 13px; text-transform: uppercase;
  color: var(--sbt-gold); margin-bottom: 24px; display: block;
}
.sbt-cover__title { font-size: clamp(1.9rem, 5vw, 3.4rem); margin-bottom: 28px; }
.sbt-cover__title em { font-style: normal; color: var(--sbt-gold); }
.sbt-cover__sub {
  font-family: var(--sbt-font-serif); font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--sbt-ink-soft);
  border-left: 3px solid var(--sbt-olive-500); padding-left: 20px; max-width: 640px; margin-bottom: 36px;
}
.sbt-cover__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 2.75rem);
  row-gap: 20px;
  font-size: 13px; color: var(--sbt-ink-soft); font-family: var(--sbt-font-mono);
}
.sbt-cover__meta > div {
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px dashed var(--sbt-olive-200);
}
.sbt-cover__meta > div:nth-child(odd) {
  padding-left: 0;
  border-left: none;
}
.sbt-cover__meta strong {
  display: block; color: var(--sbt-olive-800); font-family: var(--sbt-font-sans);
  font-weight: 700; font-size: 19px; margin-bottom: 4px;
}
.sbt-cover__photo {
  border-radius: var(--sbt-radius-lg); overflow: hidden; border: 1px solid var(--sbt-border);
  box-shadow: 0 18px 40px -22px rgba(43,51,36,0.35); aspect-ratio: 4 / 3; margin-bottom: 20px;
}
.sbt-cover__photo img { width: 100%; height: 100%; object-fit: cover; }
.sbt-cover__side {
  background: var(--sbt-bg-card); border: 1px solid var(--sbt-border); border-radius: var(--sbt-radius);
  padding: 24px 26px 20px; box-shadow: 0 18px 40px -22px rgba(43,51,36,0.35);
}
.sbt-cover__side h4 { font-size: 14px; color: var(--sbt-olive-800); margin-bottom: 12px; letter-spacing: .03em; }
.sbt-cover__side li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--sbt-olive-200); font-size: 14px; color: var(--sbt-ink-soft); }
.sbt-cover__side li:first-child { border-top: none; }
.sbt-cover__side .sbt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sbt-gold); margin-top: 8px; flex: none; }

/* ── ring divider ── */
.sbt-ring-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 clamp(2.5rem, 6vw, 4rem); }
.sbt-ring-divider svg { width: 34px; height: 34px; }
.sbt-ring-divider .sbt-rule { height: 1px; flex: 1; max-width: 220px; background: linear-gradient(90deg,transparent,var(--sbt-olive-300),transparent); }

/* ── triad ── */
.sbt-triad { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 16px; }
.sbt-triad-card { background: var(--sbt-bg-card); border: 1px solid var(--sbt-border); border-radius: var(--sbt-radius); padding: 28px; }
.sbt-triad-card .sbt-num { font-family: var(--sbt-font-mono); font-size: 12px; color: var(--sbt-gold); letter-spacing: .14em; }
.sbt-triad-card h4 { font-size: 17px; margin: 12px 0 8px; }
.sbt-triad-card p { font-size: 14px; color: var(--sbt-ink-soft); }
.sbt-triad-card__icon { width: 100%; aspect-ratio: 1/1; border-radius: var(--sbt-radius); overflow: hidden; margin-bottom: 16px; background: var(--sbt-bg-2); }
.sbt-triad-card__icon img { width: 100%; height: 100%; object-fit: cover; }

/* ── matrix intro figure ── */
.sbt-matrix-section { position: relative; overflow: hidden; }
.sbt-matrix-section__bg { position: absolute; inset: 0; z-index: 0; }
.sbt-matrix-section__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.sbt-matrix-section__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(238,236,217,0.35) 0%, rgba(238,236,217,0.55) 100%);
}
.sbt-matrix-section .sbt-container--wide { position: relative; z-index: 1; }

/* ── theme blocks ── */
.sbt-theme-block { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--sbt-border); }
.sbt-theme-block:nth-child(even) { background-color: var(--sbt-bg-2); }
.sbt-theme-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; margin-bottom: 34px; }
.sbt-theme-stamp { flex: none; width: 108px; height: 108px; }
.sbt-theme-stamp svg { width: 100%; height: 100%; }
.sbt-theme-num { font-family: var(--sbt-font-mono); font-size: 13px; color: var(--sbt-olive-600); letter-spacing: .16em; margin-bottom: 6px; display: block; }
.sbt-theme-old { font-family: var(--sbt-font-mono); font-size: 14px; color: var(--sbt-stamp); text-decoration: line-through; text-decoration-thickness: 1.5px; display: inline-block; margin-bottom: 6px; }
.sbt-theme-title { font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.35; margin-bottom: 8px; }
.sbt-theme-tagline { font-family: var(--sbt-font-serif); font-size: 15.5px; color: var(--sbt-ink-soft); }

#sbt-root .sbt-theme-photo { border-radius: var(--sbt-radius-lg); overflow: hidden; margin: 24px 0 40px; border: 1px solid var(--sbt-border); aspect-ratio: 16/9; }
#sbt-root .sbt-theme-photo img { width: 100%; height: 100%; object-fit: cover; }

#sbt-root .sbt-theme-photo--tall { aspect-ratio: 4/3; max-width: 720px; margin: 24px auto 40px; }

.sbt-kkr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 30px; }
.sbt-kkr-card { border-radius: var(--sbt-radius); padding: 20px 22px; border: 1px solid var(--sbt-border); background: var(--sbt-bg-card); }
.sbt-kkr-card.sbt-kill { border-left: 4px solid var(--sbt-kill); }
.sbt-kkr-card.sbt-keep { border-left: 4px solid var(--sbt-olive-700); }
.sbt-kkr-card.sbt-born { border-left: 4px solid var(--sbt-gold); }
.sbt-kkr-label { font-family: var(--sbt-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; display: block; color: var(--sbt-ink-soft); }
.sbt-kkr-card p { font-size: 14px; color: var(--sbt-ink-soft); }

.sbt-principle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 30px; }
.sbt-principle-box { background: var(--sbt-bg-card); border: 1px solid var(--sbt-border); border-radius: var(--sbt-radius); padding: 22px 24px; }
.sbt-principle-box h5 { font-size: 13px; font-family: var(--sbt-font-mono); letter-spacing: .1em; color: var(--sbt-olive-700); margin-bottom: 10px; text-transform: uppercase; }
.sbt-principle-box p { font-size: 14.5px; color: var(--sbt-ink-soft); }

.sbt-actions-list { margin-bottom: 30px; }
.sbt-actions-list h5 { font-size: 14px; color: var(--sbt-olive-800); margin-bottom: 14px; font-family: var(--sbt-font-sans); font-weight: 700; }
.sbt-actions-list li { padding: 10px 0 10px 40px; font-size: 14.5px; color: var(--sbt-ink-soft); border-top: 1px dashed var(--sbt-olive-200); }
.sbt-actions-list li:first-child { border-top: none; }

.sbt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sbt-prompt-box { background: var(--sbt-olive-900); color: var(--sbt-olive-100); border-radius: var(--sbt-radius); padding: 20px 22px; font-family: var(--sbt-font-mono); font-size: 12.8px; line-height: 1.75; white-space: pre-wrap; }
.sbt-prompt-box .sbt-lbl { color: var(--sbt-gold-light); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; display: block; margin-bottom: 10px; font-family: var(--sbt-font-mono); }
.sbt-callout { border-radius: var(--sbt-radius); padding: 18px 20px; font-size: 13.8px; }
.sbt-callout.sbt-pitfall { background: #f4ece1; border: 1px solid #d8c199; color: #5f4a26; }
.sbt-callout.sbt-success { background: var(--sbt-olive-100); border: 1px solid var(--sbt-olive-300); color: var(--sbt-olive-800); }
.sbt-callout .sbt-lbl { font-weight: 700; display: block; margin-bottom: 6px; font-family: var(--sbt-font-sans); font-size: 13px; }

/* ── growth roadmap ── */
.sbt-roadmap-banner { border-radius: var(--sbt-radius-lg); overflow: hidden; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); border: 1px solid var(--sbt-border); aspect-ratio: 16/9; }
.sbt-roadmap-banner img { width: 100%; height: 100%; object-fit: cover; }
.sbt-growth-track { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 20px; }
.sbt-growth-stage { background: var(--sbt-bg-card); border: 1px solid var(--sbt-border); border-radius: var(--sbt-radius); padding: 26px; position: relative; }
.sbt-growth-stage .sbt-stage-icon { width: 40px; height: 40px; margin-bottom: 14px; }
.sbt-growth-stage .sbt-stage-day { font-family: var(--sbt-font-mono); font-size: 12px; color: var(--sbt-gold); letter-spacing: .1em; }
.sbt-growth-stage h4 { font-size: 17px; margin: 6px 0 12px; }
.sbt-growth-stage ul { color: var(--sbt-ink-soft); font-size: 14px; }
.sbt-growth-stage li { padding-left: 1.2em; position: relative; margin-bottom: 6px; }
.sbt-growth-stage li::before { content: '─'; position: absolute; left: 0; color: var(--sbt-olive-500); }

/* ── worksheet ── */
#sbt-root .sbt-worksheet-photo { border-radius: var(--sbt-radius-lg); overflow: hidden; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); border: 1px solid var(--sbt-border); aspect-ratio: 4/3; max-width: 640px; }
#sbt-root .sbt-worksheet-photo img { width: 100%; height: 100%; object-fit: cover; }
.sbt-worksheet { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 16px; }
.sbt-ws-col { border-radius: var(--sbt-radius); padding: 22px; background: var(--sbt-bg-card); border: 1px solid var(--sbt-border); min-height: 210px; }
.sbt-ws-col.sbt-kill { border-top: 5px solid var(--sbt-kill); }
.sbt-ws-col.sbt-keep { border-top: 5px solid var(--sbt-olive-700); }
.sbt-ws-col.sbt-reinvent { border-top: 5px solid var(--sbt-gold); }
.sbt-ws-col h4 { font-size: 16px; margin-bottom: 10px; }
.sbt-ws-col p.sbt-desc { font-size: 13px; color: var(--sbt-ink-soft); margin-bottom: 14px; }
.sbt-ws-col .sbt-fillline { border-bottom: 1px dashed var(--sbt-olive-300); height: 26px; margin-bottom: 8px; }

/* ── 30 tactics ── */
#sbt-root .sbt-tactics-banner { border-radius: var(--sbt-radius-lg); overflow: hidden; margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); border: 1px solid var(--sbt-border); aspect-ratio: 16/9; }
#sbt-root .sbt-tactics-banner img { width: 100%; height: 100%; object-fit: cover; }
.sbt-tactics-tabs { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; justify-content: center; }
.sbt-tactics-tab {
  padding: 9px 18px; border-radius: 20px; border: 1px solid var(--sbt-olive-300); background: var(--sbt-bg-card);
  font-size: 13.5px; cursor: pointer; color: var(--sbt-olive-800); font-weight: 500; transition: var(--sbt-transition);
  font-family: var(--sbt-font-sans);
}
.sbt-tactics-tab.is-active { background: var(--sbt-olive-800); color: #fff; border-color: var(--sbt-olive-800); }
.sbt-tactics-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.sbt-tactic-card { display: none; background: var(--sbt-bg-card); border: 1px solid var(--sbt-border); border-radius: var(--sbt-radius); padding: 16px 18px; font-size: 13.6px; color: var(--sbt-ink-soft); }
.sbt-tactic-card.is-show { display: flex; gap: 12px; }
.sbt-tactic-card .sbt-idx { font-family: var(--sbt-font-mono); color: var(--sbt-gold); font-weight: 700; flex: none; }

/* ── assessment ── */

.sbt-assess-head-row {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
#sbt-root .sbt-assess-head-row .sbt-assess-figure {
  flex: 0 0 clamp(220px, 26vw, 300px);
  max-width: clamp(220px, 26vw, 300px);
  margin: 0;
}
.sbt-assess-head-row .sbt-section-header {
  flex: 1;
  max-width: none;
}

#sbt-root .sbt-assess-figure { border-radius: var(--sbt-radius-lg); overflow: hidden; border: 1px solid var(--sbt-border); }
.sbt-assess-figure img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.sbt-assess-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; margin-top: 10px; }
.sbt-assess-cat h4 { font-size: 15px; color: var(--sbt-olive-800); margin-bottom: 10px; border-bottom: 1px solid var(--sbt-olive-200); padding-bottom: 8px; }
.sbt-assess-cat label { display: flex; align-items: flex-start; gap: 10px; font-size: 13.8px; color: var(--sbt-ink-soft); padding: 7px 0; cursor: pointer; }
.sbt-assess-cat input { margin-top: 3px; accent-color: var(--sbt-olive-700); }
.sbt-assess-result {
  margin-top: 26px; padding: 20px 24px; background: var(--sbt-olive-900); color: var(--sbt-olive-100); border-radius: var(--sbt-radius);
  font-family: var(--sbt-font-mono); font-size: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.sbt-assess-result .sbt-score { font-size: 26px; color: var(--sbt-gold-light); font-weight: 700; }

/* ── glossary ── */
.sbt-glossary { columns: 2; column-gap: 40px; }
.sbt-glossary dt { font-weight: 700; color: var(--sbt-olive-800); font-family: var(--sbt-font-sans); break-inside: avoid; margin-top: 14px; font-size: 14.5px; }
.sbt-glossary dd { margin: 4px 0 0; color: var(--sbt-ink-soft); font-size: 13.6px; break-inside: avoid; }

/* ── CTA ── */
.sbt-cta-section {
  background: linear-gradient(155deg,var(--sbt-olive-900) 0%,var(--sbt-olive-800) 100%);
  color: var(--sbt-olive-100);
  position: relative;
  overflow: hidden;
}
.sbt-cta-section__bg { position: absolute; inset: 0; z-index: 0; }
.sbt-cta-section__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.sbt-cta-section__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg,var(--sbt-olive-900) 20%, rgba(51,61,38,0.5) 100%); }
.sbt-cta-section .sbt-container--wide { z-index: 1; }
#sbt-root .sbt-cta-section h2 { color: #fdfcf3; }
.sbt-cta-section .sbt-lead { color: var(--sbt-olive-200); }
.sbt-cta-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 32px 0 40px; }
.sbt-cta-step { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--sbt-radius); padding: 22px; }
.sbt-cta-step .sbt-n { font-family: var(--sbt-font-mono); color: var(--sbt-gold-light); font-size: 22px; }
.sbt-cta-step p { font-size: 14px; color: var(--sbt-olive-100); margin: 8px 0 0; }
#sbt-root .sbt-cta-quote {
  font-family: var(--sbt-font-serif); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.9; color: #fdfcf3; border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 32px; margin: 10px auto 0; text-align: center; max-width: 780px;
}
.sbt-cta-quote strong { color: var(--sbt-gold-light); }

/* ── CTA button (共通パターン: Flexboxラッパー + magnetic) ── */
.sbt-cta-btn {
  display: inline-block;
  font-family: var(--sbt-font-sans);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: #fdfcf3;
  padding: 1.1em 2.6em;
  border-radius: 999px;
  box-shadow: 0 12px 30px -10px rgba(182,145,47,0.55);
  transition: var(--sbt-transition);
  letter-spacing: 0.03em;
}
.sbt-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(182,145,47,0.7); }
.sbt-cta-btn__sub { margin-top: 14px; color: var(--sbt-olive-200); font-size: 13px; text-align: center; }
.sbt-cta-section .sbt-cta-btn__sub { color: var(--sbt-gold-light); }

/* 追加 */
.sbt-cta-btn {
  --sbt-glow-x: 0px;
  --sbt-glow-y: 0px;
  transform: translate(var(--sbt-glow-x), var(--sbt-glow-y));
}
.sbt-cta-btn:hover {
  transform: translate(var(--sbt-glow-x), var(--sbt-glow-y)) translateY(-2px) scale(1.02);
  box-shadow: 0 16px 36px -10px rgba(182,145,47,0.7);
}

/* ================================================================
   14. カスタムカーソル用 data-cursor 補助（tp-cursor.css が本体を担当）
   ================================================================ */
#sbt-root [data-cursor] { cursor: none; }
@media (hover:none), (pointer:coarse) {
  #sbt-root [data-cursor] { cursor: pointer; }
}

/* ================================================================
   15. レスポンシブ
   ================================================================ */

@media (max-width: 1180px) {
  .sbt-kkr-grid, .sbt-triad, .sbt-cta-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .sbt-cover__grid { grid-template-columns: 1fr; }
  .sbt-kkr-grid, .sbt-principle-row, .sbt-two-col, .sbt-growth-track,
  .sbt-worksheet, .sbt-tactics-grid, .sbt-assess-grid, .sbt-triad { grid-template-columns: 1fr; }
  .sbt-glossary { columns: 1; }
  .sbt-cta-steps { grid-template-columns: 1fr; }

  /* セルフ診断：スマホはテキストが上、画像が下 */
  .sbt-assess-head-row { flex-direction: column; }
  .sbt-assess-head-row .sbt-section-header { order: -1; text-align: center; }
  #sbt-root .sbt-assess-head-row .sbt-assess-figure { flex: none; width: 100%; max-width: 320px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #sbt-root { scroll-behavior: auto; }
  #sbt-root *, #sbt-root *::before, #sbt-root *::after { animation: none !important; transition: none !important; }
}