/**
 * 人間行動構造アーキテクト LP — human-behavior-lp.css
 *
 * 設計思想:
 *   - #hba-root 配下のみ完全独立デザイン
 *   - Cocoon / entry-content / article 干渉を完全排除
 *   - CSSカスタムプロパティで全色・全値を管理
 *   - モバイルファースト + clamp() 流体タイポグラフィ
 *   - アニメーションは opacity / transform / filter のみ使用
 *   - カラーパレット: セージグリーン × アイボリー × ゴールドアクセントの上質・静謐系
 *   - フォント: Shippori Mincho（明朝・和文Display）+ Zen Kaku Gothic New（本文）+ JetBrains Mono（数値・ラベル）
 *   - 行間設計: デバイス別 line-height 完全最適化（Section 10）
 *   - 配色アクセシビリティ: コントラスト比 4.5:1 以上保証（Section 8）
 *   - テキスト中央配置: Flexboxラッパー構造（Section 9）
 *
 * @package cocoon-child-master
 */

/* ================================================================
   1. COCOON 干渉リセット（★省略禁止）
   ================================================================ */
.human-behavior-lp .article,
.human-behavior-lp .entry-content,
.human-behavior-lp .main,
.human-behavior-lp .content,
.human-behavior-lp .wrap,
.human-behavior-lp #main,
.human-behavior-lp #body-in,
.human-behavior-lp #container,
.human-behavior-lp #container-in,
.human-behavior-lp #contents,
.human-behavior-lp #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;
}

.human-behavior-lp #sidebar,
.human-behavior-lp .sidebar,
.human-behavior-lp #sidebar-scroll,
.human-behavior-lp .sidebar-top,
.human-behavior-lp .sidebar-bottom {
  display: none !important;
}

.human-behavior-lp #footer:not(.tp-footer),
.human-behavior-lp .site-footer:not(.tp-footer),
.human-behavior-lp .footer:not(.tp-footer) {
  display: none !important;
}

/* ================================================================
   2. CSSカスタムプロパティ（全色・全値） — #hba-root スコープ
   ================================================================ */
#hba-root {
  /* ─ カラーパレット ─ */
  --hba-bg:            #F2F5EE;
  --hba-bg-2:          #E7EDE4;
  --hba-bg-card:       #FFFFFF;
  --hba-gold:          #A9895A;
  --hba-gold-bright:   #C2A379;
  --hba-gold-light:    #DAE2D6;
  --hba-ink:           #212F28;
  --hba-ink-soft:      #4C5D53;
  --hba-ink-faint:     #7C8B81;
  --hba-sage:          #6F9077;
  --hba-sage-deep:     #33513C;
  --hba-sage-deeper:   #22331F;
  --hba-silver:        #B7C4BA;
  --hba-silver-light:  #DAE2D6;
  --hba-border:        rgba(33,47,40,0.12);

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

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

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

  /* ─ スペーシング ─ */
  --hba-section-py:     120px;
  --hba-container-max:  1120px;
  --hba-edge:           clamp(20px, 5vw, 64px);
  --hba-radius:         2px;
  --hba-radius-sm:      2px;

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

  /* ─ トランジション ─ */
  --hba-transition:      0.35s cubic-bezier(0.2,0.8,0.2,1);
  --hba-transition-slow: 0.9s ease;
}

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

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

#hba-root img,
#hba-root svg {
  display: block;
  max-width: 100%;
}

#hba-root a {
  color: inherit;
  text-decoration: none;
}

#hba-root {
  background-color: var(--hba-bg);
  color: var(--hba-ink);
  font-family: var(--hba-font-body);
  font-weight: 400;
  line-height: var(--hba-lh-body);
  letter-spacing: var(--hba-ls-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow-wrap: break-word;
}

#hba-root ::selection {
  background: var(--hba-sage);
  color: #fff;
}

html.human-behavior-lp-html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}
@media (prefers-reduced-motion: reduce) {
  html.human-behavior-lp-html { scroll-behavior: auto; }
}

/* ================================================================
   4. ベースコンポーネント
   ================================================================ */
#hba-root .hba-wrap {
  max-width: var(--hba-container-max);
  margin: 0 auto;
  padding-left: var(--hba-edge);
  padding-right: var(--hba-edge);
}

#hba-root .hba-section {
  padding: var(--hba-section-py) var(--hba-edge);
  position: relative;
}

#hba-root .hba-section-inner {
  max-width: var(--hba-container-max);
  margin: 0 auto;
}

#hba-root .hba-section--alt {
  background: var(--hba-bg-2);
}

/* ================================================================
   5. タイポグラフィヘルパー
   ================================================================ */
#hba-root h1,
#hba-root h2,
#hba-root h3,
#hba-root h4 {
  font-family: var(--hba-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--hba-sage-deeper);
}

#hba-root .hba-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hba-font-mono);
  font-size: 11.5px;
  letter-spacing: var(--hba-ls-display);
  color: var(--hba-sage-deep);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
}
#hba-root .hba-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--hba-sage);
  display: inline-block;
}

#hba-root .hba-lead {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--hba-ink-soft);
  max-width: 640px;
  line-height: var(--hba-lh-lead);
  letter-spacing: 0.02em;
}

#hba-root .hba-section-title {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: var(--hba-lh-h2);
  margin-bottom: 20px;
}
#hba-root .hba-section-title em {
  font-style: normal;
  color: var(--hba-sage);
}

/* ================================================================
   6. スクロールリビール（★必須）
   ================================================================ */
#hba-root .hba-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
#hba-root .hba-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  #hba-root .hba-reveal { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   7. ブロッククォート／テーブル白抜き対策（★省略禁止）
   ================================================================ */
#hba-root blockquote.hba-blockquote {
  background: var(--hba-bg-card) !important;
  border-left: 3px solid var(--hba-gold) !important;
  border-right: none !important;
  color: var(--hba-ink) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: var(--hba-radius-sm) !important;
}
#hba-root blockquote::before,
#hba-root blockquote::after {
  display: none !important;
}

.hba-table-wrap {
  overflow-x: auto;
  margin-block: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--hba-container-max);
  border-radius: var(--hba-radius);
  border: 1px solid var(--hba-border);
}
.hba-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: transparent !important;
}
.hba-table thead th {
  background: var(--hba-bg-card) !important;
  color: var(--hba-ink-soft);
  padding: 0.875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--hba-border);
  line-height: var(--hba-lh-body);
}
.hba-table tbody td {
  background: transparent !important;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(169,137,90,0.12);
  color: var(--hba-ink-soft);
  vertical-align: top;
  line-height: var(--hba-lh-body);
}
.hba-table tbody tr:last-child td { border-bottom: none; }
.hba-table tbody tr:hover td { background: rgba(169,137,90,0.05) !important; }

/* ================================================================
   8. アクセシビリティ配色仕様（Cocoonストライプリセット含む）
      ★省略禁止。全コード必須出力。
   ================================================================ */

/* 【最重要】Cocoonテーブルストライプ背景の強制リセット */
#hba-root .entry-content table,
#hba-root table {
  background-color: transparent !important;
  border-collapse: collapse;
}
#hba-root .entry-content table tr,
#hba-root .entry-content table tr:nth-of-type(even),
#hba-root .entry-content table tr:nth-of-type(odd),
#hba-root table tr,
#hba-root table tr:nth-of-type(even),
#hba-root table tr:nth-of-type(odd) {
  background-color: var(--hba-bg-card) !important;
  color: var(--hba-ink) !important;
}
#hba-root .entry-content table th,
#hba-root .entry-content table td,
#hba-root table th,
#hba-root table td {
  color: inherit !important;
  border-color: var(--hba-border) !important;
}

/* Cocoonが注入した白背景のblockquoteを安全なグレーに強制置換 */
#hba-root blockquote:not(.hba-blockquote),
body.human-behavior-lp .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;
}

/* Cocoonが注入した白背景のtableを安全なグレーに強制置換 */
#hba-root table:not(.hba-table) th,
body.human-behavior-lp .entry-content table th {
  background-color: #E8E8E8 !important;
  color:            #111111 !important;
  border-color:     #C0C0C0 !important;
}
#hba-root table:not(.hba-table) td,
body.human-behavior-lp .entry-content table td {
  background-color: #F5F5F5 !important;
  color:            #222222 !important;
  border-color:     #D0D0D0 !important;
}

/* code / pre のCocoon白抜き上書き */
#hba-root code:not([class]) {
  background-color: #EBEBEB !important;
  color:            #1E1E1E !important;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
}
#hba-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;
}

/* ================================================================
   9. テキストブロック中央配置仕様（Flexboxラッパー構造 ★必須）
   ================================================================ */
.hba-align-center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.hba-align-center-wrapper .hba-content-block {
  max-width: var(--hba-container-max);
  text-align: center;
  width: 100%;
}

.hba-section-header-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hba-section-header {
  text-align: center;
  max-width: min(720px, 90%);
  width: 100%;
}

.hba-cta-btn-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hba-cta-btn-wrap {
  text-align: center;
  width: fit-content;
}

.hba-blockquote-center-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hba-blockquote-center-wrap blockquote {
  text-align: center !important;
  max-width: min(820px, 92%) !important;
  width: 100% !important;
}

.hba-text-center { text-align: center !important; }
.hba-block-center {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--hba-container-max);
}

/* ================================================================
   10. 行間設計・デバイス別最適化（★単一値設定禁止）
   ================================================================ */
#hba-root p,
#hba-root li {
  line-height:    var(--hba-lh-body);
  letter-spacing: var(--hba-ls-body);
  overflow-wrap:  break-word;
}
#hba-root .hba-lead,
#hba-root .hba-cover__sub,
#hba-root .hba-section-desc {
  line-height:    var(--hba-lh-lead);
  letter-spacing: 0.02em;
  overflow-wrap:  break-word;
}
#hba-root h1 {
  line-height:    var(--hba-lh-h1);
  letter-spacing: 0.01em;
  overflow-wrap:  break-word;
}
#hba-root h2,
#hba-root .hba-section-title {
  line-height:    var(--hba-lh-h2);
  letter-spacing: var(--hba-ls-heading);
  overflow-wrap:  break-word;
}
#hba-root h3 {
  line-height:    var(--hba-lh-h3);
  letter-spacing: 0.01em;
  overflow-wrap:  break-word;
}
#hba-root h4,
#hba-root h5,
#hba-root h6 {
  line-height: 1.5;
  letter-spacing: 0.01em;
}
#hba-root small,
#hba-root .hba-caption {
  line-height:    var(--hba-lh-caption);
  letter-spacing: var(--hba-ls-caption);
}

/* 段落間・見出し後スペーシング */
#hba-root p + p { margin-top: var(--hba-p-gap); }
#hba-root h2 + p,
#hba-root h3 + p { margin-top: 0.75em; }
#hba-root p + ul,
#hba-root p + ol { margin-top: 0.75em; }
#hba-root li + li { margin-top: var(--hba-list-gap); }

/* タブレット最適化（768px〜1023px） */
@media (min-width: 768px) {
  #hba-root {
    --hba-lh-body: 1.88;
    --hba-lh-lead: 1.95;
    --hba-lh-h1:   1.2;
    --hba-lh-h2:   1.28;
    --hba-lh-h3:   1.35;
    --hba-ls-body: 0.018em;
    --hba-p-gap:   1.3em;
  }
}

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

/* ================================================================
   12. リスト要素 Cocoon干渉排除（★省略禁止）
   ================================================================ */
#hba-root .entry-content ul,
#hba-root .entry-content ol,
#hba-root ul,
#hba-root ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
#hba-root .entry-content li,
#hba-root li {
  position: relative;
  padding-left: 0 !important;
  margin-bottom: 0;
  list-style-type: none !important;
}
#hba-root .entry-content li::before,
#hba-root .entry-content li::after {
  content: none !important;
}
#hba-root .hba-list li {
  padding-left: 1.5em !important;
  margin-bottom: var(--hba-list-gap);
  position: relative;
}
#hba-root .hba-list li::before {
  content: '●';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--hba-gold);
  font-size: 0.6em;
  line-height: var(--hba-lh-body);
}

/* ================================================================
   13. NAV フォーカス／スキップ
   ================================================================ */
#hba-root a:focus-visible,
#hba-root button:focus-visible,
#hba-root .hba-recipe__head:focus-visible {
  outline: 2px solid var(--hba-sage-deep);
  outline-offset: 3px;
}

/* ================================================================
   14. ボタン（CTA）共通
   ================================================================ */
#hba-root .hba-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--hba-radius);
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--hba-transition), background 0.3s, border-color 0.3s, color 0.3s;
}
#hba-root .hba-btn--primary {
  background: var(--hba-sage-deeper);
  color: #F4F7F1;
}
#hba-root .hba-btn--primary:hover {
  transform: translateY(-2px);
  background: var(--hba-sage-deep);
}
#hba-root .hba-btn--ghost {
  border-color: var(--hba-border);
  color: var(--hba-ink-soft);
}
#hba-root .hba-btn--ghost:hover {
  border-color: var(--hba-sage);
  color: var(--hba-sage-deep);
}
#hba-root .hba-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.35s;
}
#hba-root .hba-btn:hover svg { transform: translateX(3px); }
#hba-root .hba-cta-btn__sub {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--hba-ink-faint);
  font-family: var(--hba-font-mono);
  letter-spacing: var(--hba-ls-caption);
}

/* ================================================================
   15. COVER（ファーストビュー）
   ================================================================ */
#hba-root .hba-cover {
  position: relative;
  padding: 172px var(--hba-edge) 90px;
  overflow: hidden;
  isolation: isolate;
}
#hba-root .hba-cover__inner {
  max-width: var(--hba-container-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background: rgba(242, 245, 238, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 8px;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 6vw, 64px);
  box-shadow: 0 24px 60px -24px rgba(34,51,31,.18);
}
#hba-root .hba-cover__kicker {
  font-family: var(--hba-font-mono);
  font-size: 12px;
  letter-spacing: var(--hba-ls-display);
  color: var(--hba-ink-faint);
  margin-bottom: 28px;
  text-transform: uppercase;
}
#hba-root .hba-cover h1 {
  font-size: clamp(38px, 6.6vw, 78px);
  letter-spacing: 0.01em;
  color: var(--hba-sage-deeper);
  max-width: 920px;
}
#hba-root .hba-cover h1 .hba-soft { color: var(--hba-ink-faint); font-weight: 500; }
#hba-root .hba-cover h1 .hba-mark {
  background: linear-gradient(180deg, transparent 62%, rgba(111,144,119,.28) 62%);
}
#hba-root .hba-cover__sub {
  margin-top: 30px;
  max-width: 560px;
  font-size: 16.5px;
  color: var(--hba-ink-soft);
}
#hba-root .hba-cover__cta {
  margin-top: 44px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

#hba-root .hba-river-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#hba-root .hba-river-field svg { width: 100%; height: 100%; }

#hba-root .hba-cover__strip {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hba-border);
}
#hba-root .hba-cover__strip div {
  padding: 22px 0 0;
  border-left: 1px solid var(--hba-border);
  padding-left: 22px;
}
#hba-root .hba-cover__strip div:first-child { border-left: none; padding-left: 0; }
#hba-root .hba-cover__strip .hba-num {
  font-family: var(--hba-font-mono);
  font-size: 12px;
  color: var(--hba-sage);
  letter-spacing: 0.1em;
}
#hba-root .hba-cover__strip p {
  font-size: 13.5px;
  color: var(--hba-ink-soft);
  margin-top: 8px;
  line-height: 1.7;
}
@media (max-width: 760px) {
  #hba-root .hba-cover__strip { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  #hba-root .hba-cover__strip div:nth-child(3) { border-left: none; padding-left: 0; }
}

/* ================================================================
   16. PHENOMENA GRID
   ================================================================ */
#hba-root .hba-phenomena-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hba-border);
  border: 1px solid var(--hba-border);
}
#hba-root .hba-phenomena-card {
  background: var(--hba-bg-card);
  padding: 30px 24px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.4s;
}
#hba-root .hba-phenomena-card:hover { background: var(--hba-bg-2); }
#hba-root .hba-phenomena-card .hba-icon { width: 30px; height: 30px; color: var(--hba-sage); }
#hba-root .hba-phenomena-card h4 {
  font-family: var(--hba-font-body);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--hba-ink);
  margin-top: 20px;
}
#hba-root .hba-phenomena-card p {
  font-size: 12.8px;
  color: var(--hba-ink-faint);
  margin-top: 8px;
  line-height: 1.7;
}
@media (max-width: 900px) { #hba-root .hba-phenomena-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { #hba-root .hba-phenomena-grid { grid-template-columns: 1fr; } }

/* ================================================================
   17. FLOW CHAIN（6概念）
   ================================================================ */
#hba-root .hba-flowchain { margin-top: 70px; position: relative; }
#hba-root .hba-flowchain-line {
  position: absolute;
  left: 29px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--hba-silver), var(--hba-sage) 50%, var(--hba-silver));
}
@media (max-width: 700px) { #hba-root .hba-flowchain-line { left: 19px; } }
#hba-root .hba-flow-item { position: relative; padding-left: 80px; padding-bottom: 52px; }
#hba-root .hba-flow-item:last-child { padding-bottom: 0; }
@media (max-width: 700px) { #hba-root .hba-flow-item { padding-left: 52px; } }
#hba-root .hba-flow-marker {
  position: absolute;
  left: 0; top: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--hba-bg-card);
  border: 1px solid var(--hba-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hba-font-mono);
  font-size: 12px;
  color: var(--hba-sage-deep);
  z-index: 2;
}
@media (max-width: 700px) {
  #hba-root .hba-flow-marker { width: 40px; height: 40px; font-size: 10px; }
}
#hba-root .hba-flow-item.is-active .hba-flow-marker {
  background: var(--hba-sage-deeper);
  border-color: var(--hba-sage-deeper);
  color: #EAF1E6;
}
#hba-root .hba-flow-en {
  font-family: var(--hba-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--hba-ink-faint);
  text-transform: uppercase;
}
#hba-root .hba-flow-item h4 {
  font-size: 20px;
  color: var(--hba-ink);
  margin: 8px 0 10px;
  font-family: var(--hba-font-display);
  font-weight: 700;
}
#hba-root .hba-flow-item p { font-size: 14px; color: var(--hba-ink-soft); max-width: 640px; }

/* ================================================================
   18. LAYER STRATA（4層断面）
   ================================================================ */
#hba-root .hba-strata { margin-top: 70px; border: 1px solid var(--hba-border); }
#hba-root .hba-stratum {
  display: grid;
  grid-template-columns: 190px 1fr;
  border-top: 1px solid var(--hba-border);
  position: relative;
}
#hba-root .hba-stratum:first-child { border-top: none; }
@media (max-width: 760px) { #hba-root .hba-stratum { grid-template-columns: 1fr; } }
#hba-root .hba-stratum__label {
  padding: 34px 28px;
  border-right: 1px solid var(--hba-border);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
@media (max-width: 760px) {
  #hba-root .hba-stratum__label { border-right: none; border-bottom: 1px solid var(--hba-border); }
}
#hba-root .hba-stratum__label .hba-roman {
  font-family: var(--hba-font-mono); font-size: 11px; color: var(--hba-silver); letter-spacing: 0.1em;
}
#hba-root .hba-stratum__label .hba-name {
  font-family: var(--hba-font-display); font-size: 19px; font-weight: 700; color: var(--hba-sage-deeper);
}
#hba-root .hba-stratum__body { padding: 34px 30px; }
#hba-root .hba-stratum__body p { font-size: 14px; color: var(--hba-ink-soft); max-width: 680px; }
#hba-root .hba-stratum__body .hba-tag {
  display: inline-block; margin-top: 14px;
  font-family: var(--hba-font-mono); font-size: 11px;
  color: var(--hba-sage-deep); border: 1px solid var(--hba-silver-light);
  padding: 5px 10px; background: var(--hba-bg-2);
}
#hba-root .hba-stratum:nth-child(1) { background: rgba(255,255,255,.4); }
#hba-root .hba-stratum:nth-child(2) { background: rgba(231,237,228,.35); }
#hba-root .hba-stratum:nth-child(3) { background: rgba(218,226,214,.35); }
#hba-root .hba-stratum:nth-child(4) { background: rgba(183,196,186,.28); }

/* ================================================================
   19. MECHANISM CARDS
   ================================================================ */
#hba-root .hba-mech-grid {
  margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hba-border); border: 1px solid var(--hba-border);
}
@media (max-width: 800px) { #hba-root .hba-mech-grid { grid-template-columns: 1fr; } }
#hba-root .hba-mech-card { background: var(--hba-bg-card); padding: 38px 34px; }
#hba-root .hba-mech-card .hba-mech-tag {
  font-family: var(--hba-font-mono); font-size: 11px; color: var(--hba-gold); letter-spacing: 0.1em;
}
#hba-root .hba-mech-card h4 { font-size: 19px; margin: 12px 0 14px; font-family: var(--hba-font-display); }
#hba-root .hba-mech-card p { font-size: 13.6px; color: var(--hba-ink-soft); }
#hba-root .hba-mech-card cite {
  font-style: normal; display: block; margin-top: 14px;
  font-size: 11.5px; color: var(--hba-ink-faint); font-family: var(--hba-font-mono);
}

/* ================================================================
   20. ENTRY POINTS（3つの入口）
   ================================================================ */
#hba-root .hba-entry-row {
  margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 820px) { #hba-root .hba-entry-row { grid-template-columns: 1fr; } }
#hba-root .hba-entry-card {
  border: 1px solid var(--hba-border); padding: 36px 28px; background: var(--hba-bg-card);
  position: relative; transition: transform 0.4s, box-shadow 0.4s;
}
#hba-root .hba-entry-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(34,51,31,.25); }
#hba-root .hba-entry-card .hba-entry-num { font-family: var(--hba-font-mono); color: var(--hba-silver); font-size: 32px; }
#hba-root .hba-entry-card h4 { font-size: 18px; margin: 14px 0 12px; }
#hba-root .hba-entry-card p { font-size: 13.6px; color: var(--hba-ink-soft); }

/* ================================================================
   21. INTERVENTION STEPS
   ================================================================ */
#hba-root .hba-stepbar { margin-top: 70px; }
#hba-root .hba-stepbar__track {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 18px;
  scrollbar-width: thin;
}
#hba-root .hba-step {
  flex: 0 0 240px; border: 1px solid var(--hba-border); background: var(--hba-bg-card);
  padding: 28px 24px; margin-right: -1px; position: relative;
}
#hba-root .hba-step:first-child { border-radius: 2px 0 0 2px; }
#hba-root .hba-step:last-child { border-radius: 0 2px 2px 0; }
#hba-root .hba-step__lvl {
  font-family: var(--hba-font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hba-gold);
}
#hba-root .hba-step__lvl--req { color: var(--hba-sage-deep); }
#hba-root .hba-step h5 { font-family: var(--hba-font-display); font-size: 16px; margin: 12px 0 10px; line-height: 1.5; }
#hba-root .hba-step p { font-size: 12.6px; color: var(--hba-ink-soft); }
#hba-root .hba-step__arrow {
  position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; background: var(--hba-bg); border: 1px solid var(--hba-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 2; color: var(--hba-sage); font-size: 11px;
}

/* ================================================================
   22. RECIPES（アコーディオン）
   ================================================================ */
#hba-root .hba-recipe-list { margin-top: 60px; border-top: 1px solid var(--hba-border); }
#hba-root .hba-recipe { border-bottom: 1px solid var(--hba-border); }
#hba-root .hba-recipe__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 4px; cursor: pointer; gap: 20px;
}
#hba-root .hba-recipe__left { display: flex; align-items: baseline; gap: 18px; }
#hba-root .hba-domain-en { font-family: var(--hba-font-mono); font-size: 11px; color: var(--hba-ink-faint); letter-spacing: 0.08em; }
#hba-root .hba-recipe__head h4 { font-size: 19px; font-family: var(--hba-font-display); color: var(--hba-ink); }
#hba-root .hba-recipe__plus {
  width: 26px; height: 26px; border: 1px solid var(--hba-border); border-radius: 50%; position: relative; flex-shrink: 0;
  transition: transform 0.4s, border-color 0.4s;
}
#hba-root .hba-recipe__plus::before,
#hba-root .hba-recipe__plus::after { content: ""; position: absolute; background: var(--hba-sage-deep); }
#hba-root .hba-recipe__plus::before { left: 7px; right: 7px; top: 50%; height: 1px; }
#hba-root .hba-recipe__plus::after { top: 7px; bottom: 7px; left: 50%; width: 1px; transition: opacity 0.3s; }
#hba-root .hba-recipe.is-open .hba-recipe__plus { transform: rotate(180deg); border-color: var(--hba-sage); }
#hba-root .hba-recipe.is-open .hba-recipe__plus::after { opacity: 0; }
#hba-root .hba-recipe__body { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
#hba-root .hba-recipe.is-open .hba-recipe__body { max-height: 420px; }
#hba-root .hba-recipe__flow { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 4px 30px; }
#hba-root .hba-recipe__flow .hba-chip {
  border: 1px solid var(--hba-silver-light); background: var(--hba-bg-2);
  padding: 10px 16px; font-size: 12.6px; color: var(--hba-ink-soft); white-space: nowrap;
}
#hba-root .hba-recipe__flow .hba-sep { align-self: center; color: var(--hba-silver); font-size: 13px; }

/* ================================================================
   23. THESES（マニフェスト）
   ================================================================ */
#hba-root .hba-thesis-section { background: var(--hba-sage-deeper); color: #EAF1E6; }
#hba-root .hba-thesis-section .hba-eyebrow { color: #B9CBB9; }
#hba-root .hba-thesis-section .hba-eyebrow::before { background: #B9CBB9; }
#hba-root .hba-thesis-section .hba-section-title { color: #F4F7F1; }
#hba-root .hba-thesis-section .hba-section-title em { color: #BFE0C4; }
#hba-root .hba-thesis-list { margin-top: 60px; display: flex; flex-direction: column; }
#hba-root .hba-thesis {
  padding: 38px 0; border-top: 1px solid rgba(234,241,230,.14);
  display: grid; grid-template-columns: 80px 1fr; gap: 24px;
}
#hba-root .hba-thesis:last-child { border-bottom: 1px solid rgba(234,241,230,.14); }
@media (max-width: 700px) { #hba-root .hba-thesis { grid-template-columns: 1fr; } }
#hba-root .hba-thesis .hba-thesis__num { font-family: var(--hba-font-mono); font-size: 13px; color: #8FB495; }
#hba-root .hba-thesis h4 {
  font-family: var(--hba-font-display); font-size: clamp(19px, 2.4vw, 25px); color: #F4F7F1; line-height: 1.6; font-weight: 700;
}
#hba-root .hba-thesis p { margin-top: 12px; font-size: 14px; color: #C6D6C4; max-width: 680px; }

/* ================================================================
   24. CLOSING / 最終CTA
   ================================================================ */
#hba-root .hba-closing { position: relative; text-align: center; padding: 150px var(--hba-edge); overflow: hidden; isolation: isolate; }
#hba-root .hba-closing blockquote {
  font-family: var(--hba-font-display); font-size: clamp(22px, 3.4vw, 36px); line-height: 1.85;
  color: var(--hba-sage-deeper) !important; max-width: 820px; margin: 0 auto !important; font-weight: 600;
  background: rgba(242, 245, 238, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: clamp(32px, 5vw, 56px) clamp(28px, 6vw, 64px) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  border-radius: 6px;
}
#hba-root .hba-closing blockquote span { color: var(--hba-ink-faint); font-weight: 500; }
#hba-root .hba-closing__cta { margin-top: 48px; display: flex; justify-content: center; flex-direction: column; align-items: center; }

/* ================================================================
   25. FOOTER（参考文献セクション。サイト共通フッターとは別）
   ================================================================ */
#hba-root .hba-footer { background: var(--hba-bg-2); padding: 70px var(--hba-edge) 46px; border-top: 1px solid var(--hba-border); }
#hba-root .hba-foot-grid {
  max-width: var(--hba-container-max); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: 60px;
}
@media (max-width: 820px) { #hba-root .hba-foot-grid { grid-template-columns: 1fr; gap: 40px; } }
#hba-root .hba-foot-brand { font-family: var(--hba-font-display); font-size: 18px; color: var(--hba-sage-deeper); font-weight: 700; }
#hba-root .hba-foot-brand p {
  font-family: var(--hba-font-body); font-size: 12.6px; color: var(--hba-ink-faint); margin-top: 14px; line-height: 1.9; max-width: 280px;
}
#hba-root .hba-ref-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 520px) { #hba-root .hba-ref-cols { grid-template-columns: 1fr; } }
#hba-root .hba-ref-col h5 {
  font-family: var(--hba-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--hba-ink-faint);
  text-transform: uppercase; margin-bottom: 14px;
}
#hba-root .hba-ref-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
#hba-root .hba-ref-col a { font-size: 12.4px; color: var(--hba-ink-soft); line-height: 1.6; }
#hba-root .hba-ref-col a:hover { color: var(--hba-sage-deep); text-decoration: underline; text-decoration-color: var(--hba-silver); }
#hba-root .hba-foot-bottom {
  max-width: var(--hba-container-max); margin: 56px auto 0; padding-top: 26px; border-top: 1px solid var(--hba-border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: var(--hba-ink-faint); font-family: var(--hba-font-mono);
}

/* ================================================================
   26. セクション背景画像（フルブリード）
   ================================================================ */
#hba-root .hba-bg-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#hba-root .hba-bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#hba-root .hba-bg-media__overlay {
  position: absolute;
  inset: 0;
  background: var(--hba-bg);
  opacity: .38;
}
#hba-root .hba-bg-media__overlay--alt {
  background: var(--hba-bg-2);
}
#hba-root .hba-section--media {
  overflow: hidden;
  isolation: isolate;
}
#hba-root .hba-section--media > .hba-section-inner {
  background: rgba(242, 245, 238, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 8px;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 6vw, 64px);
  box-shadow: 0 24px 60px -24px rgba(34,51,31,.18);
}
#hba-root .hba-section--alt.hba-section--media > .hba-section-inner {
  background: rgba(231, 237, 228, 0.70);
}

/* ================================================================
   27. セクション内・単体挿入画像（3つの入口セクション用）
   ================================================================ */
#hba-root .hba-inline-image {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
#hba-root .hba-inline-image img {
  width: 100%;
  height: auto;
  border-radius: var(--hba-radius);
}