/**
 * Never Give Up — never-give-up.css
 *
 * 設計思想:
 *   - #ngu-root 配下のみ完全独立デザイン
 *   - Cocoon / entry-content / article 干渉を完全排除
 *   - CSSカスタムプロパティで全色・全値を管理
 *   - モバイルファースト + clamp() 流体タイポグラフィ
 *   - アニメーションは opacity / transform / filter のみ使用
 *   - カラーパレット: 夜明けのグラデーション（絶望から再生への時間軸）
 *     深夜(#0A0F1C) → 夜(#141C30) → 夕(#463A54) → 暁(#D98A3D) → 朝日(#F6B93B)
 *     紙(#FBF7EC) / 墨(#201C16) / 金(#C9A66B) / 山陰の風(#3E6E68)
 *   - フォント: Shippori Mincho（明朝／物語性）+ Noto Sans JP（本文可読性）
 *              + Cormorant Garamond（欧文Display／格調）
 *   - 行間設計: デバイス別 line-height 完全最適化（Section 5.10）
 *   - 配色アクセシビリティ: コントラスト比 4.5:1 以上保証（Section 5.8）
 *   - テキスト中央配置: Flexboxラッパー構造（Section 5.9）
 *   - リスト初期化: Cocoon ::before 干渉完全排除（Section 5.12）
 *
 * @package cocoon-child-master
 */

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

.never-give-up #sidebar,
.never-give-up .sidebar,
.never-give-up #sidebar-scroll,
.never-give-up .sidebar-top,
.never-give-up .sidebar-bottom {
  display: none !important;
}

.never-give-up #footer:not(.tp-footer),
.never-give-up .site-footer:not(.tp-footer),
.never-give-up .footer:not(.tp-footer) {
  display: none !important;
}

/* ================================================================
   2. CSSカスタムプロパティ（全色・全値）
   ================================================================ */
#ngu-root {
  /* ─ カラーパレット：夜明けのグラデーション（時間軸） ─ */
  --ngu-night-deep:   #0A0F1C;   /* 深夜（絶望） */
  --ngu-night:        #141C30;   /* 夜 */
  --ngu-dusk:         #463A54;   /* 夕 */
  --ngu-dusk-warm:    #6B4E4A;   /* 温かい夕 */
  --ngu-dawn:         #D98A3D;   /* 暁（再生） */
  --ngu-dawn-light:   #F3CE8E;   /* 薄暁 */
  --ngu-sun:          #F6B93B;   /* 朝日 */

  /* ─ 紙・墨（本編ライトゾーン） ─ */
  --ngu-paper:        #FBF7EC;
  --ngu-paper-deep:   #F4EDDA;
  --ngu-paper-night:  #EFEAE0;
  --ngu-ink:          #201C16;   /* 主テキスト（対比比 ~15:1 vs paper） */
  --ngu-ink-soft:     #4E483C;   /* 副テキスト（対比比 ~9:1 vs paper） */
  --ngu-muted:        #6B6553;   /* 3rdテキスト（対比比 ~5.5:1 vs paper ✓ AA） */
  --ngu-line:         #E2D8BF;

  /* ─ ゴールド／風（山陰） ─ */
  --ngu-gold:         #C9A66B;
  --ngu-gold-bright:  #E1C083;
  --ngu-gold-light:   #F4ECD8;
  --ngu-gold-deep:    #A9793A;
  --ngu-gold-rgb:     201, 166, 107;
  --ngu-wind:         #3E6E68;   /* 山陰・海・風の差し色 */
  --ngu-wind-light:   #E6EEEC;

  /* ─ 汎用エイリアス（仕様書互換） ─ */
  --ngu-bg:           var(--ngu-paper);
  --ngu-bg-2:         var(--ngu-paper-deep);
  --ngu-bg-card:      var(--ngu-paper);
  --ngu-text:         var(--ngu-ink);
  --ngu-text-2:       var(--ngu-ink-soft);
  --ngu-border:       rgba(var(--ngu-gold-rgb), 0.24);

  /* ─ タイポグラフィ ─ */
  --ngu-font-sans:    'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  --ngu-font-serif:   'Shippori Mincho', 'Noto Serif JP', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', serif;
  --ngu-font-display: 'Cormorant Garamond', 'Shippori Mincho', serif;

  /* ─ 行間設計（モバイル基準値：〜767px） ─ */
  --ngu-lh-body:      1.95;
  --ngu-lh-lead:      2.0;
  --ngu-lh-h1:        1.5;
  --ngu-lh-h2:        1.4;
  --ngu-lh-h3:        1.45;
  --ngu-lh-caption:   1.75;

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

  /* ─ スペーシング ─ */
  --ngu-section-py:      clamp(3.5rem, 7vw, 6.5rem);
  --ngu-container-max:   720px;
  --ngu-container-wide:  920px;
  --ngu-container-pad:   clamp(1.25rem, 4vw, 2rem);
  --ngu-radius:          12px;
  --ngu-radius-sm:       6px;
  --ngu-radius-lg:       18px;

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

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

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

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

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

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

#ngu-root a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ngu-transition), opacity var(--ngu-transition);
}

#ngu-root strong,
#ngu-root b {
  font-weight: 700;
  color: var(--ngu-ink);
}

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

/* ================================================================
   4. ベースコンポーネント
   ================================================================ */
.ngu-container {
  max-width: var(--ngu-container-max);
  margin-inline: auto;
  padding-inline: var(--ngu-container-pad);
}

.ngu-container--wide {
  max-width: var(--ngu-container-wide);
  margin-inline: auto;
  padding-inline: var(--ngu-container-pad);
}

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

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

/* ================================================================
   5. 読了プログレスバー（作品内・ヘッダー配下）
   ================================================================ */
#ngu-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg,
    var(--ngu-night), var(--ngu-dusk), var(--ngu-dawn), var(--ngu-sun));
  z-index: 1500; /* tp-header(2000) より下 */
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

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

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

.ngu-reveal[data-delay="1"] { transition-delay: 0.10s; }
.ngu-reveal[data-delay="2"] { transition-delay: 0.20s; }
.ngu-reveal[data-delay="3"] { transition-delay: 0.30s; }
.ngu-reveal[data-delay="4"] { transition-delay: 0.40s; }

/* ================================================================
   7. COVER / HERO — 夜明けのグラデーション
   ================================================================ */
.ngu-cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(6rem, 14vw, 10rem) clamp(4rem, 10vw, 7rem);
  color: #F8F4E8;
  isolation: isolate;
}

.ngu-cover__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    var(--ngu-night-deep) 0%,
    var(--ngu-night) 38%,
    var(--ngu-dusk) 68%,
    var(--ngu-dusk-warm) 88%,
    var(--ngu-dawn) 100%);
  overflow: hidden;
}

.ngu-cover__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, transparent 40%, rgba(10, 15, 28, 0.35) 100%),
    radial-gradient(ellipse at 80% 90%, rgba(246, 185, 59, 0.10) 0%, transparent 55%);
  pointer-events: none;
}

.ngu-cover__stars {
  position: absolute;
  inset: 0;
  opacity: 0.75;
  pointer-events: none;
}

.ngu-cover__stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: ngu-twinkle 4s ease-in-out infinite;
}

@keyframes ngu-twinkle {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.9; }
}

.ngu-cover__scene {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(90%, 620px);
  height: clamp(180px, 30vw, 260px);
  opacity: 0.92;
}

.ngu-cover__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
  text-align: center;
}

.ngu-cover__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(0.68rem, 1.6vw, 0.78rem);
  letter-spacing: 0.32em;
  color: var(--ngu-dawn-light);
  margin-bottom: 1.6em;
  font-weight: 500;
  font-family: var(--ngu-font-sans);
}

.ngu-cover__eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ngu-sun);
  box-shadow: 0 0 12px rgba(246, 185, 59, 0.7);
}

.ngu-cover__title {
  font-family: var(--ngu-font-serif);
  font-weight: 800;
  font-size: clamp(1.75rem, 5.5vw, 2.8rem);
  color: #F8F4E8;
  line-height: var(--ngu-lh-h1);
  letter-spacing: 0.03em;
  margin-bottom: 0.7em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.ngu-cover__sub {
  font-family: var(--ngu-font-serif);
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  color: var(--ngu-dawn-light);
  letter-spacing: 0.08em;
  margin-bottom: 2.4em;
  line-height: 1.9;
}

.ngu-cover__quote {
  font-family: var(--ngu-font-serif) !important;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  color: #EFE6D2 !important;
  line-height: 2 !important;
  padding: 1.6em 1.8em !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-top:    1px solid rgba(255, 255, 255, 0.22) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-left:   none !important;
  border-right:  none !important;
  border-radius: 0 !important;
  margin-bottom: 2.6em;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ngu-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--ngu-font-sans);
}

.ngu-scroll-cue__line {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
  animation: ngu-pulse-line 2s ease-in-out infinite;
}

@keyframes ngu-pulse-line {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* ================================================================
   8. Nanae Intro Section
   ================================================================ */
.ngu-nanae-intro {
  background: var(--ngu-paper-deep);
  border-bottom: 1px solid var(--ngu-line);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.ngu-intro-card {
  display: flex;
  gap: 1.4em;
  background: var(--ngu-paper);
  border: 1px solid var(--ngu-line);
  border-left: 4px solid var(--ngu-gold);
  border-radius: 4px 12px 12px 4px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 10px 34px rgba(60, 50, 20, 0.08);
  transition: transform var(--ngu-transition), box-shadow var(--ngu-transition);
}

.ngu-intro-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(60, 50, 20, 0.12);
}

.ngu-avatar-n {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ngu-gold), #B98B4A);
  color: #fff;
  font-family: var(--ngu-font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(201, 166, 107, 0.4);
}

.ngu-intro-body .ngu-intro-name {
  font-family: var(--ngu-font-serif);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ngu-ink);
  letter-spacing: 0.05em;
  margin-bottom: 0.8em;
}

.ngu-intro-body .ngu-intro-name em {
  font-style: normal;
  color: var(--ngu-gold-deep);
}

.ngu-intro-body p {
  font-size: 0.9rem;
  color: var(--ngu-ink-soft);
  margin-bottom: 0.9em;
}

.ngu-intro-body p:last-child { margin-bottom: 0; }

/* ================================================================
   9. TOC — 目次
   ================================================================ */
.ngu-toc-wrap {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--ngu-paper);
}

.ngu-toc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ngu-line);
  border: 1px solid var(--ngu-line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1.6em;
}

.ngu-toc-item {
  background: var(--ngu-paper);
  padding: 1em 1.2em;
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  font-size: 0.82rem;
  color: var(--ngu-ink-soft);
  text-decoration: none;
  transition: background var(--ngu-transition), color var(--ngu-transition);
  line-height: 1.6;
}

.ngu-toc-item:hover,
.ngu-toc-item:focus-visible {
  background: var(--ngu-gold-light);
  color: var(--ngu-ink);
  outline: none;
}

.ngu-toc-num {
  font-family: var(--ngu-font-serif);
  color: var(--ngu-gold-deep);
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.ngu-toc-label {
  flex: 1;
  letter-spacing: 0.02em;
}

/* ================================================================
   10. CHAPTER 共通
   ================================================================ */
.ngu-chapter {
  padding-block: clamp(4rem, 8vw, 5.5rem);
  position: relative;
}

/* 夜明けの時間軸に沿った背景トーン */
.ngu-zone-night { background: var(--ngu-paper-night); }
.ngu-zone-dusk  { background: #F2E9DC; }
.ngu-zone-dawn  { background: var(--ngu-gold-light); }
.ngu-zone-day   { background: var(--ngu-paper); }

.ngu-chap-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: 1.3em;
}

.ngu-chap-num {
  font-family: var(--ngu-font-serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--ngu-gold-deep);
  white-space: nowrap;
}

.ngu-chap-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ngu-gold), transparent);
}

.ngu-chap-title {
  font-family: var(--ngu-font-serif);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  color: var(--ngu-ink);
  line-height: var(--ngu-lh-h2);
  margin-bottom: 0.5em;
  letter-spacing: 0.02em;
}

.ngu-chap-sub {
  font-size: 0.85rem;
  color: var(--ngu-muted);
  margin-bottom: 2em;
  letter-spacing: 0.03em;
  font-family: var(--ngu-font-serif);
}

/* 本文テキストブロック */
.ngu-body-text p {
  font-size: clamp(0.93rem, 2.2vw, 0.98rem);
  color: var(--ngu-ink-soft);
  margin-bottom: 1.3em;
}
.ngu-body-text p:last-child { margin-bottom: 0; }

.ngu-accent {
  color: var(--ngu-wind);
  font-weight: 500;
}
.ngu-accent-gold {
  color: var(--ngu-gold-deep);
  font-weight: 500;
}

/* ── Pull Quote（章内引用強調） ── */
.ngu-pull-quote {
  font-family: var(--ngu-font-serif) !important;
  font-size: clamp(1rem, 2.5vw, 1.08rem);
  line-height: 1.95 !important;
  color: var(--ngu-ink) !important;
  padding: 1.5em 1.7em !important;
  margin: 1.6em 0 !important;
  background: var(--ngu-paper) !important;
  border-left: 3px solid var(--ngu-dawn) !important;
  border-radius: 2px 10px 10px 2px !important;
  box-shadow: 0 4px 20px rgba(60, 50, 20, 0.06);
}

/* ── 台帳風カード（金額・年号の強調） ── */
.ngu-ledger {
  display: flex;
  gap: 0;
  margin: 1.8em 0;
  border: 1px dashed var(--ngu-muted);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(251, 247, 236, 0.5);
}

.ngu-ledger-item {
  flex: 1;
  padding: 1.2em 1em;
  text-align: center;
}

.ngu-ledger-item:not(:last-child) {
  border-right: 1px dashed var(--ngu-muted);
}

.ngu-ledger-num {
  font-family: var(--ngu-font-serif);
  font-weight: 800;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  color: var(--ngu-ink);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.ngu-ledger-cap {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--ngu-muted);
  margin-top: 0.5em;
}

/* ================================================================
   11. Nanae Note（共感の声）
   ================================================================ */
.ngu-nanae-note {
  margin: 2.4em 0 0.4em;
  background: linear-gradient(135deg, var(--ngu-gold-light) 0%, var(--ngu-paper) 100%);
  border: 1px solid #E1CFA5;
  border-radius: 12px;
  padding: 1.5em 1.7em;
  position: relative;
  transition: transform var(--ngu-transition), box-shadow var(--ngu-transition);
}

.ngu-nanae-note:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(60, 50, 20, 0.08);
}

.ngu-nn-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.85em;
}

.ngu-nn-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--ngu-gold), #B98B4A);
  color: #fff;
  font-family: var(--ngu-font-serif);
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ngu-nn-name {
  font-family: var(--ngu-font-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ngu-ink);
  letter-spacing: 0.05em;
}

.ngu-nn-name span {
  color: var(--ngu-muted);
  font-weight: 400;
  margin-left: 0.4em;
}

.ngu-nanae-note p {
  font-size: 0.88rem;
  color: var(--ngu-ink-soft);
  font-style: italic;
  line-height: var(--ngu-lh-body);
  margin: 0;
}

/* ================================================================
   12. Chart（SVG折れ線）ラッパー
   ================================================================ */
.ngu-chart-wrap {
  margin: 2.2em 0;
  padding: 1.6em 1.4em 1.2em;
  background: var(--ngu-paper);
  border: 1px solid var(--ngu-line);
  border-radius: 12px;
}

.ngu-chart-wrap svg {
  width: 100%;
  height: auto;
}

.ngu-chart-cap {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ngu-muted);
  margin-top: 0.7em;
  line-height: 1.7;
}

/* ================================================================
   13. Principles Grid（第7章の4カード）
   ================================================================ */
.ngu-principle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
  margin: 1.8em 0;
}

.ngu-principle-card {
  background: var(--ngu-paper);
  border: 1px solid var(--ngu-line);
  border-radius: 10px;
  padding: 1.4em 1.5em;
  transition: transform var(--ngu-transition), box-shadow var(--ngu-transition), border-color var(--ngu-transition);
}

.ngu-principle-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(60, 50, 20, 0.08);
  border-color: rgba(var(--ngu-gold-rgb), 0.5);
}

.ngu-principle-num {
  font-family: var(--ngu-font-display);
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--ngu-dawn);
  letter-spacing: 0.14em;
  margin-bottom: 0.6em;
}

.ngu-principle-title {
  font-family: var(--ngu-font-serif);
  font-weight: 700;
  font-size: clamp(0.98rem, 2.4vw, 1.08rem);
  color: var(--ngu-ink);
  margin-bottom: 0.7em;
  line-height: var(--ngu-lh-h3);
}

.ngu-principle-text {
  font-size: 0.87rem;
  color: var(--ngu-ink-soft);
  line-height: 1.9;
}

/* ================================================================
   14. Journey Strip（旅路の4ステップバー）
   ================================================================ */
.ngu-journey-strip {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--ngu-line);
  border-radius: 10px;
  overflow: hidden;
  margin: 2em 0;
}

.ngu-js-step {
  flex: 1;
  min-width: 45%;
  padding: 1.3em 1em;
  text-align: center;
  position: relative;
  transition: transform var(--ngu-transition);
}

.ngu-js-step:hover {
  transform: translateY(-2px) scale(1.02);
  z-index: 2;
}

.ngu-js-step:not(:last-child) {
  border-right: 1px solid var(--ngu-line);
}

.ngu-js-step:nth-child(1) { background: var(--ngu-paper-night); }
.ngu-js-step:nth-child(2) { background: #F2E9DC; }
.ngu-js-step:nth-child(3) { background: var(--ngu-gold-light); }
.ngu-js-step:nth-child(4) { background: var(--ngu-wind-light); }

.ngu-js-lv {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--ngu-muted);
  margin-bottom: 0.5em;
  font-family: var(--ngu-font-display);
  font-weight: 600;
}

.ngu-js-name {
  font-family: var(--ngu-font-serif);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ngu-ink);
  margin-bottom: 0.35em;
  letter-spacing: 0.03em;
}

.ngu-js-desc {
  font-size: 0.7rem;
  color: var(--ngu-ink-soft);
  line-height: 1.6;
}

/* ================================================================
   15. Epilogue
   ================================================================ */
.ngu-epilogue {
  background: linear-gradient(180deg, var(--ngu-gold-light) 0%, var(--ngu-dawn-light) 100%);
  padding-block: clamp(4.5rem, 9vw, 6.5rem);
}

.ngu-epilogue .ngu-chap-num {
  color: var(--ngu-gold-deep);
}

.ngu-epilogue .ngu-body-text p {
  color: var(--ngu-ink);
}

/* ================================================================
   16. Final CTA Section
   ================================================================ */
.ngu-cta-section {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(217, 138, 61, 0.08), transparent 60%),
    var(--ngu-paper);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  border-top: 1px solid var(--ngu-line);
}

.ngu-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1em 2.6em;
  min-width: min(320px, 90vw);
  color: #fff;
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--ngu-font-sans);
  background:
    linear-gradient(120deg, var(--ngu-dawn), var(--ngu-gold)) !important;
  box-shadow:
    0 8px 24px rgba(217, 138, 61, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.35s var(--ngu-ease),
    box-shadow 0.35s var(--ngu-ease);
  cursor: pointer;
  will-change: transform;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.ngu-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 14px 34px rgba(217, 138, 61, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ngu-cta-btn:focus-visible {
  outline: 3px solid var(--ngu-gold-bright);
  outline-offset: 3px;
}

.ngu-cta-btn__label {
  display: inline-block;
}

.ngu-cta-btn__arrow {
  display: inline-block;
  transition: transform var(--ngu-transition);
  font-weight: 400;
}

.ngu-cta-btn:hover .ngu-cta-btn__arrow {
  transform: translateX(4px);
}

.ngu-cta-btn__sub {
  margin-top: 1em;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ngu-muted);
  font-family: var(--ngu-font-display);
}

/* ── セクションヘッダー装飾 ── */
.ngu-section-eyebrow {
  font-family: var(--ngu-font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--ngu-gold-deep);
  margin-bottom: 1em;
}

.ngu-section-title {
  font-family: var(--ngu-font-serif);
  font-weight: 800;
  font-size: clamp(1.4rem, 3.6vw, 1.75rem);
  color: var(--ngu-ink);
  line-height: var(--ngu-lh-h2);
  margin-bottom: 0.7em;
  letter-spacing: 0.02em;
}

.ngu-section-desc {
  font-size: clamp(0.88rem, 2.2vw, 0.95rem);
  color: var(--ngu-ink-soft);
  line-height: var(--ngu-lh-lead);
  margin-bottom: 2em;
}

/* TOCヘッダー用: 目次ラベル単独中央配置 */
.ngu-toc-wrap .ngu-section-eyebrow {
  text-align: center;
  margin-bottom: 0;
}

/* ================================================================
   17. Closing Section（結び）
   ================================================================ */
.ngu-closing {
  background: linear-gradient(180deg, var(--ngu-dusk-warm) 0%, var(--ngu-night) 100%);
  color: #F4ECD8;
  padding-block: clamp(4.5rem, 9vw, 6rem);
  text-align: center;
}

.ngu-closing-orn {
  letter-spacing: 0.5em;
  color: var(--ngu-dawn-light);
  font-size: 1rem;
  margin-bottom: 1.5em;
}

.ngu-closing-quote {
  font-family: var(--ngu-font-serif) !important;
  font-size: clamp(1.05rem, 2.8vw, 1.25rem);
  line-height: 2 !important;
  margin: 0 auto 1.6em !important;
  color: #F4ECD8 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  max-width: 100% !important;
}

.ngu-closing-sig {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(244, 236, 216, 0.7);
  font-family: var(--ngu-font-serif);
}

.ngu-closing-sig em {
  font-style: normal;
  color: var(--ngu-dawn-light);
  font-weight: 500;
}

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

/* ──
   【最重要】Cocoonテーブルストライプ背景の強制リセット
   tr:nth-of-type(even/odd) によるグレー・白の自動付与を完全無効化する
   ── */
#ngu-root .entry-content table,
#ngu-root table {
  background-color: transparent !important;
  border-collapse: collapse;
}

#ngu-root .entry-content table tr,
#ngu-root .entry-content table tr:nth-of-type(even),
#ngu-root .entry-content table tr:nth-of-type(odd),
#ngu-root table tr,
#ngu-root table tr:nth-of-type(even),
#ngu-root table tr:nth-of-type(odd) {
  background-color: var(--ngu-bg-card) !important;
  color: var(--ngu-text) !important;
}

#ngu-root .entry-content table th,
#ngu-root .entry-content table td,
#ngu-root table th,
#ngu-root table td {
  color: inherit !important;
  border-color: var(--ngu-border) !important;
}

/* ──
   Cocoonが注入した白背景のblockquoteを安全なグレーに強制置換
   ── */
#ngu-root blockquote:not([class*="ngu"]),
body.never-give-up .entry-content blockquote {
  background-color: #F0F0F0 !important; /* Rule 4: #F5F5F5〜#E0E0E0 範囲内 ✓ */
  color:            #1A1A1A !important; /* Rule 2: 対比比 ~14:1 ✓ */
  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を安全なグレーに強制置換
   （LPカスタムクラスを持たないテーブル = Cocoonデフォルト適用テーブル対象）
   ── */
#ngu-root table:not([class*="ngu"]) th,
body.never-give-up .entry-content table th {
  background-color: #E8E8E8 !important; /* Rule 4 ✓ */
  color:            #111111 !important; /* Rule 2: 対比比 ~16:1 ✓ */
  border-color:     #C0C0C0 !important;
}

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

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

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

/* ──
   ダークLP内の専用blockquote（デザイン強調用）
   NOTE: .ngu-blockquote は個別コンポーネント（.ngu-pull-quote 等）で
   各シーンに合わせた背景／色を上書きするため、ここでは基底値のみ
   ── */
#ngu-root .ngu-blockquote {
  background-color: var(--ngu-bg-card);
  color:            var(--ngu-text);
  border-left: 3px solid var(--ngu-gold);
  padding: 1.5rem 1.75rem;
  border-radius: var(--ngu-radius-sm);
  margin: 0;
  box-shadow: none;
}

/* ================================================================
   9. テキストブロック中央配置仕様（Flexboxラッパー構造）
      ★margin:autoではなくFlexboxラッパーを使用すること
   ================================================================ */

/* ── Flexboxラッパー（中央配置の標準パターン）── */
.ngu-align-center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.ngu-align-center-wrapper .ngu-content-block {
  max-width: var(--ngu-container-max);
  text-align: center;
  width: 100%;
}

.ngu-align-center-wrapper .ngu-content-block--wide {
  max-width: var(--ngu-container-wide);
  text-align: center;
  width: 100%;
}

/* ── セクションヘッダーの中央配置（Flexboxラッパー構造） ── */
.ngu-section-header-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ngu-section-header {
  text-align: center;
  max-width: min(640px, 92%);
  width: 100%;
}

/* セクション eyebrow ラベル */
.ngu-section-header .ngu-section-eyebrow {
  text-align: center;
  display: block;
  width: 100%;
}

/* ── CTAボタン wrap の中央配置（Flexboxラッパー構造）── */
.ngu-cta-btn-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ngu-cta-btn-wrap {
  text-align: center;
  width: fit-content;
  max-width: 100%;
}

/* ── blockquote の中央配置（Flexboxラッパー構造）── */
.ngu-blockquote-center-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 1.8em 0;
}

.ngu-blockquote-center-wrap blockquote,
.ngu-blockquote-center-wrap .ngu-blockquote {
  text-align: center !important;
  max-width: min(680px, 100%) !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ── テーブルラッパーの中央配置（Flexboxラッパー構造）── */
.ngu-table-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ── 補助ユーティリティ（Flexboxラッパーが使えない場面用）── */
.ngu-text-center {
  text-align: center !important;
}

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

/* ================================================================
   10. 行間設計・デバイス別最適化（★単一値設定禁止）
   ================================================================ */

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

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

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

#ngu-root h2,
#ngu-root .ngu-section-title,
#ngu-root .ngu-chap-title {
  line-height:    var(--ngu-lh-h2, 1.4);
  letter-spacing: var(--ngu-ls-heading, 0.02em);
  overflow-wrap:  break-word;
  word-break:     auto-phrase;
}

#ngu-root h3,
#ngu-root .ngu-principle-title {
  line-height:    var(--ngu-lh-h3, 1.45);
  letter-spacing: 0.01em;
  overflow-wrap:  break-word;
}

#ngu-root h4,
#ngu-root h5,
#ngu-root h6 {
  line-height:    1.5;
  letter-spacing: 0.01em;
}

#ngu-root small,
#ngu-root .ngu-caption,
#ngu-root .ngu-note,
#ngu-root .ngu-cta-btn__sub,
#ngu-root .ngu-chart-cap,
#ngu-root .ngu-ledger-cap,
#ngu-root .ngu-js-lv,
#ngu-root .ngu-js-desc {
  line-height:    var(--ngu-lh-caption, 1.75);
  letter-spacing: var(--ngu-ls-caption, 0.06em);
}

#ngu-root .ngu-section-eyebrow,
#ngu-root .ngu-cover__eyebrow,
#ngu-root .ngu-principle-num,
#ngu-root [class*="ngu-en-"] {
  letter-spacing: var(--ngu-ls-display, 0.05em);
  line-height: 1.4;
}

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

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

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

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

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

/* body-text 内では既に p margin-bottom 制御があるので二重加算防止 */
#ngu-root .ngu-body-text p + p { margin-top: 0; }

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

/* 章タイトル・カード内タイトルは個別 margin 指定を尊重 */
#ngu-root .ngu-chap-title { margin-top: 0; }
#ngu-root .ngu-principle-title { margin-top: 0; }
#ngu-root .ngu-section-title { margin-top: 0; }

/* ── 10.3 タブレット最適化（768px〜1023px）── */
@media (min-width: 768px) {
  #ngu-root {
    --ngu-lh-body:    1.9;
    --ngu-lh-lead:    1.95;
    --ngu-lh-h1:      1.45;
    --ngu-lh-h2:      1.35;
    --ngu-lh-h3:      1.4;
    --ngu-ls-body:    0.028em;
    --ngu-p-gap:      1.3em;

    --ngu-container-max:  760px;
    --ngu-container-wide: 980px;
  }

  .ngu-toc-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .ngu-principle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2em;
  }

  .ngu-js-step {
    min-width: 120px;
  }

  .ngu-intro-body p {
    font-size: 0.92rem;
  }
}

/* ── 10.4 デスクトップ最適化（1024px〜）── */
@media (min-width: 1024px) {
  #ngu-root {
    --ngu-lh-body:    1.88;
    --ngu-lh-lead:    1.9;
    --ngu-lh-h1:      1.4;
    --ngu-lh-h2:      1.3;
    --ngu-lh-h3:      1.38;
    --ngu-lh-caption: 1.7;
    --ngu-ls-body:    0.025em;
    --ngu-ls-heading: 0.015em;
    --ngu-p-gap:      1.35em;
    --ngu-heading-mb: 0.75em;

    --ngu-container-max:  780px;
    --ngu-container-wide: 1040px;
    --ngu-container-pad:  2rem;
  }

  .ngu-cover__title {
    font-size: clamp(2.2rem, 3.6vw, 2.9rem);
    letter-spacing: 0.02em;
  }

  .ngu-chap-title {
    font-size: clamp(1.55rem, 2.4vw, 1.85rem);
  }

  .ngu-body-text p {
    font-size: 1rem;
  }
}

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

  .ngu-cover__content {
    max-width: 760px;
  }
}

/* ================================================================
   12. リスト要素 Cocoon干渉排除（★省略禁止）
   ================================================================ */

/* ── Cocoonデフォルトリストマーカーの完全初期化 ── */
#ngu-root .entry-content ul,
#ngu-root .entry-content ol,
#ngu-root ul,
#ngu-root ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#ngu-root .entry-content li,
#ngu-root li {
  position: relative;
  padding-left: 0 !important;
  margin-bottom: 0;
  list-style-type: none !important;
}

/* ──
   Cocoonの不要な疑似要素マーカーを強制無効化
   （Cocoonは li::before にアイコン・ドット等を挿入することがある）
   ── */
#ngu-root .entry-content li::before,
#ngu-root .entry-content li::after {
  content: none !important;
}

/* ──
   LP独自のマーカー設定（.ngu-list に付与された場合のみ）
   ── */
#ngu-root .ngu-list li {
  padding-left: 1.5em !important;
  margin-bottom: var(--ngu-list-gap, 0.5em);
  position: relative;
}

#ngu-root .ngu-list li::before {
  content: '●';
  position: absolute;
  left: 0;
  top: 0.15em;
  color: var(--ngu-gold-deep);
  font-size: 0.6em;
  line-height: var(--ngu-lh-body);
}

/* ── チェックマーク型リスト ── */
#ngu-root .ngu-list--check li::before {
  content: '✓';
  color: var(--ngu-gold-deep);
  font-weight: 700;
  font-size: 0.9em;
  top: 0;
}

/* ── ナンバリングリスト ── */
#ngu-root .ngu-list--numbered {
  counter-reset: ngu-counter;
}

#ngu-root .ngu-list--numbered li {
  counter-increment: ngu-counter;
}

#ngu-root .ngu-list--numbered li::before {
  content: counter(ngu-counter);
  font-family: var(--ngu-font-display);
  color: var(--ngu-gold-deep);
  font-weight: 600;
  font-size: 0.95em;
  top: 0;
}

/* ================================================================
   18. reduced-motion 対応
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  #ngu-root .ngu-reveal,
  #ngu-root .ngu-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #ngu-root .ngu-cover__stars span,
  #ngu-root .ngu-scroll-cue__line,
  #ngu-root #ngu-blades,
  #ngu-root .ngu-blade2 {
    animation: none !important;
  }

  #ngu-root .ngu-cta-btn,
  #ngu-root .ngu-principle-card,
  #ngu-root .ngu-js-step,
  #ngu-root .ngu-nanae-note,
  #ngu-root .ngu-intro-card {
    transition: none !important;
  }
}

/* ================================================================
   19. print
   ================================================================ */
@media print {
  #ngu-progress,
  .ngu-scroll-cue,
  .ngu-cover__scene,
  .ngu-cover__stars { display: none !important; }

  .ngu-cover {
    min-height: auto !important;
    color: #000 !important;
    background: #fff !important;
  }
}