/* =====================================================
   11_kh-design.css  v1.2
   localhost:3000 デザイン移植レイヤー（最後に読み込む）

   v1.1 変更点:
     - .khtop-wrap に流れ星アニメーション追加
     - .khsm-* (KH4まとめ) テキスト暗色問題を修正

   v1.2 変更点:
     - .kh3-bg-stars 3層アニメーション星空追加（PHPで注入するdivに適用）
     - body.home の background-image を .kh3-bg-stars に移譲
     - #wrapper / #container を z-index:2 にしてコンテンツを星空の前面へ
     - ホームページ汎用テキスト可視性を大幅補完
     - .khtop-wrap の星アニメーションを強化（Cocoon互換）
===================================================== */


/* =============================================
   0. 補助 CSS 変数
   ============================================= */
   :root {
    --kh3-dark:   #0A0A1A;
    --kh3-navy:   #0D1B3E;
    --kh3-purple: #2D1B69;
    --kh3-violet: #6B3FA0;
    --kh3-gold:   #d4af37;
    --kh3-amber:  #F59E0B;
    --kh3-silver: #C0C0C0;
    --kh3-light:  #E8F4FF;
    --kh3-cream:  #fdf6dc;
    --kh3-heart:  #FF4B6E;
  }
  
  
  /* =============================================
     A-0. 固定星空レイヤー (.kh3-bg-stars)
          PHPで <div class="kh3-bg-stars" aria-hidden="true"> を注入
          position:fixed なのでDOM位置は問わない
     ============================================= */
  
  /* ── 第1層: 近景の大きく明るい星 ── */
  .kh3-bg-stars {
    position: fixed;
    inset: 0;
    z-index: 1;           /* コンテンツ (#wrapper z-index:2) の背面 */
    pointer-events: none;
    overflow: hidden;
    background-color: #0A0A1A;  /* ページ全体の基底色 */
    background-image:
      radial-gradient(1.4px 1.4px at  8% 12%, rgba(255,255,255,0.95) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 22% 65%, rgba(255,255,255,0.80) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 37% 28%, rgba(212,175,55, 0.85) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 48% 80%, rgba(255,255,255,0.75) 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 63% 42%, rgba(255,255,255,0.90) 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 75% 18%, rgba(212,175,55, 0.70) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 87% 72%, rgba(255,255,255,0.85) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 95% 35%, rgba(255,255,255,0.80) 50%, transparent 51%),
      radial-gradient(1.1px 1.1px at 14% 90%, rgba(107,63, 160,0.90) 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 31% 50%, rgba(255,255,255,0.70) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 52% 15%, rgba(255,255,255,0.85) 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 68% 58%, rgba(212,175,55, 0.60) 50%, transparent 51%),
      radial-gradient(1.1px 1.1px at 82% 30%, rgba(255,255,255,0.75) 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 93% 88%, rgba(107,63, 160,0.75) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at  5% 45%, rgba(255,255,255,0.80) 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 900px 450px;
    opacity: 0.60;
    animation: kh3-drift-near 100s linear infinite;
  }
  
  /* ── 第2層: 中景の中程度の星（逆方向・遅め） ── */
  .kh3-bg-stars::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(0.9px 0.9px at  3% 30%, rgba(253,246,220,0.75) 50%, transparent 51%),
      radial-gradient(0.8px 0.8px at 17% 72%, rgba(253,246,220,0.65) 50%, transparent 51%),
      radial-gradient(0.9px 0.9px at 28% 18%, rgba(107,63, 160,0.80) 50%, transparent 51%),
      radial-gradient(0.8px 0.8px at 41% 55%, rgba(253,246,220,0.70) 50%, transparent 51%),
      radial-gradient(0.9px 0.9px at 55% 82%, rgba(253,246,220,0.60) 50%, transparent 51%),
      radial-gradient(0.8px 0.8px at 69% 25%, rgba(212,175,55, 0.55) 50%, transparent 51%),
      radial-gradient(0.9px 0.9px at 79% 62%, rgba(253,246,220,0.70) 50%, transparent 51%),
      radial-gradient(0.8px 0.8px at 91% 42%, rgba(253,246,220,0.65) 50%, transparent 51%),
      radial-gradient(0.7px 0.7px at 11% 85%, rgba(212,175,55, 0.50) 50%, transparent 51%),
      radial-gradient(0.8px 0.8px at 44%  8%, rgba(253,246,220,0.60) 50%, transparent 51%),
      radial-gradient(0.7px 0.7px at 61% 45%, rgba(107,63, 160,0.65) 50%, transparent 51%),
      radial-gradient(0.8px 0.8px at 85% 15%, rgba(253,246,220,0.55) 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 600px 300px;
    opacity: 0.50;
    animation: kh3-drift-far 180s linear infinite;
  }
  
  /* ── 第3層: ネビュラ発光 + 細かいゴールド星 ── */
  .kh3-bg-stars::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      /* ネビュラグラデーション（固定サイズ） */
      radial-gradient(ellipse at 50% -5%,  rgba(45, 27,105,0.38) 0%, transparent 52%),
      radial-gradient(ellipse at 15% 80%,  rgba(13, 27, 62,0.28) 0%, transparent 45%),
      radial-gradient(ellipse at 85% 30%,  rgba(107,63,160,0.22) 0%, transparent 42%),
      /* 小さなゴールド星（タイル繰り返し） */
      radial-gradient(0.6px 0.6px at  6% 20%, rgba(212,175,55,0.70) 50%, transparent 51%),
      radial-gradient(0.6px 0.6px at 19% 60%, rgba(212,175,55,0.62) 50%, transparent 51%),
      radial-gradient(0.5px 0.5px at 33% 38%, rgba(255,255,255,0.52) 50%, transparent 51%),
      radial-gradient(0.6px 0.6px at 47% 75%, rgba(212,175,55,0.68) 50%, transparent 51%),
      radial-gradient(0.5px 0.5px at 58% 15%, rgba(255,255,255,0.48) 50%, transparent 51%),
      radial-gradient(0.6px 0.6px at 71% 50%, rgba(212,175,55,0.58) 50%, transparent 51%),
      radial-gradient(0.5px 0.5px at 84% 82%, rgba(255,255,255,0.42) 50%, transparent 51%),
      radial-gradient(0.6px 0.6px at 94% 28%, rgba(212,175,55,0.64) 50%, transparent 51%);
    background-repeat: no-repeat, no-repeat, no-repeat,
      repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
    background-size:
      100% 100%, 100% 100%, 100% 100%,
      400px 200px, 400px 200px, 400px 200px, 400px 200px,
      400px 200px, 400px 200px, 400px 200px, 400px 200px;
    opacity: 0.55;
    animation: kh3-drift-near 70s linear infinite reverse;
  }
  
  
  /* =============================================
     A. ホームページ全体の背景をダーク化
     ============================================= */
  body.home,
  body.front-page {
    background-color: var(--kh3-dark) !important;
    background-image: none !important; /* 星空は .kh3-bg-stars に委譲 */
  }
  
  /* Cocoon のコンテンツラッパーを透明化 */
  body.home #container,
  body.home #main,
  body.home #contents,
  body.home .content-in,
  body.home .wrap,
  body.home .post-content,
  body.home .article-wrap,
  body.front-page #container,
  body.front-page #main,
  body.front-page #contents,
  body.front-page .content-in,
  body.front-page .wrap {
    background: transparent !important;
    box-shadow: none !important;
  }
  
  /*
   * コンテンツを星空レイヤー (z-index:1) の前面に配置
   * Cocoon の主要ラッパーを z-index:2 に
   */
  body.home #wrapper,
  body.home #container,
  body.front-page #wrapper,
  body.front-page #container {
    position: relative;
    z-index: 2;
  }
  
  /* サイドバーをダーク化 */
  body.home .sidebar,
  body.home .widget,
  body.front-page .sidebar,
  body.front-page .widget {
    background: rgba(13, 27, 62, 0.65) !important;
    border: 1px solid rgba(212, 175, 55, 0.14) !important;
    border-radius: 10px;
    color: var(--kh3-light) !important;
  }
  body.home .sidebar a,
  body.home .widget a,
  body.front-page .sidebar a,
  body.front-page .widget a {
    color: #c8d1ea !important;
  }
  body.home .sidebar a:hover,
  body.home .widget a:hover,
  body.front-page .sidebar a:hover,
  body.front-page .widget a:hover {
    color: var(--kh3-gold) !important;
  }
  body.home .widget-title,
  body.home .widgettitle,
  body.home .widget h2,
  body.home .widget h3,
  body.front-page .widget-title,
  body.front-page .widgettitle {
    color: var(--kh3-cream) !important;
    border-bottom-color: rgba(212, 175, 55, 0.30) !important;
  }
  
  
  /* =============================================
     A-1. ホームページ汎用テキスト可視性
          ダーク背景に埋もれる標準テキストを明色に
     ============================================= */
  
  /* 見出し全般 */
  body.home h1,
  body.home h2,
  body.home h3,
  body.home h4,
  body.home h5,
  body.home h6,
  body.front-page h1,
  body.front-page h2,
  body.front-page h3,
  body.front-page h4 {
    color: var(--kh3-cream) !important;
  }
  
  /* 段落・リスト・ラベル類 */
  body.home p,
  body.home li,
  body.home dt,
  body.home dd,
  body.home label,
  body.home figcaption,
  body.front-page p,
  body.front-page li {
    color: var(--kh3-light);
  }
  
  /* インラインリンク */
  body.home a:not([class]),
  body.home .entry-content a,
  body.front-page a:not([class]) {
    color: #c8d1ea;
  }
  body.home a:not([class]):hover,
  body.home .entry-content a:hover {
    color: var(--kh3-gold);
  }
  
  /* Cocoon entry-content 内 */
  body.home .entry-content,
  body.home .post-content {
    color: var(--kh3-light);
    background: transparent !important;
  }
  
  /* Cocoon の article ボックス */
  body.home article.article,
  body.home .article {
    background: transparent !important;
    box-shadow: none !important;
  }
  
  
  /* =============================================
     A-2. khtop-wrap CSS 変数をダーク用に上書き
     ============================================= */
  .khtop-wrap {
    --khtop-text:    var(--kh3-light);
    --khtop-ink:     var(--kh3-cream);
    --khtop-muted:   rgba(192, 192, 192, 0.65);
    --khtop-line:    rgba(255, 255, 255, 0.08);
    --khtop-bg-soft: rgba(13, 27, 62, 0.45);
    color: var(--kh3-light);
  }
  
  .khtop-section-title  { color: var(--kh3-cream) !important; }
  .khtop-section-sub    { color: rgba(192,192,192,0.65) !important; }
  .khtop-link-btn {
    border-color: rgba(212,175,55,0.40) !important;
    color: var(--kh3-gold) !important;
    background: transparent !important;
  }
  .khtop-link-btn:hover {
    background: rgba(212,175,55,0.12) !important;
    color: #ffe8a0 !important;
  }
  .khtop-empty {
    color: rgba(192,192,192,0.55) !important;
    background: rgba(13,27,62,0.40) !important;
    border: 1px dashed rgba(212,175,55,0.18) !important;
  }
  
  /* khtop 内の各種テキスト */
  .khtop-wrap h2,
  .khtop-wrap h3,
  .khtop-wrap h4,
  .khtop-wrap p,
  .khtop-wrap span,
  .khtop-wrap li {
    color: var(--kh3-light);
  }
  
  
  /* =============================================
     A-3. .khtop-wrap 内の流れ星アニメーション
          ::before = 近景の星（くっきり・速め）
          ::after  = 遠景の星（細かい・遅め）
          ※ .kh3-bg-stars の星とは別に、
             セクション内に積み重なる効果
     ============================================= */
  .khtop-wrap {
    position: relative;
    isolation: isolate;   /* 新しいスタッキングコンテキストを作成 */
  }
  
  /* 近景の星レイヤー */
  .khtop-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(1px   1px   at 10% 22%, rgba(255,255,255,0.90) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 24% 78%, rgba(255,255,255,0.80) 50%, transparent 51%),
      radial-gradient(1px   1px   at 38% 35%, rgba(255,255,255,0.70) 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 53% 62%, rgba(255,255,255,0.85) 50%, transparent 51%),
      radial-gradient(1px   1px   at 67% 18%, rgba(255,255,255,0.90) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 82% 48%, rgba(212,175,55, 0.70) 50%, transparent 51%),
      radial-gradient(1px   1px   at 92% 82%, rgba(255,255,255,0.80) 50%, transparent 51%),
      radial-gradient(1.1px 1.1px at 15% 55%, rgba(107,63, 160,0.90) 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 72% 30%, rgba(212,175,55, 0.60) 50%, transparent 51%),
      radial-gradient(1px   1px   at 45% 90%, rgba(255,255,255,0.75) 50%, transparent 51%),
      radial-gradient(1.3px 1.3px at 30% 10%, rgba(255,255,255,0.85) 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 720px 360px;
    opacity: 0.55;
    animation: kh3-drift-near 110s linear infinite;
  }
  
  /* 遠景の星レイヤー */
  .khtop-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(0.7px 0.7px at  7% 40%, rgba(253,246,220,0.65) 50%, transparent 51%),
      radial-gradient(0.7px 0.7px at 18% 12%, rgba(253,246,220,0.55) 50%, transparent 51%),
      radial-gradient(0.7px 0.7px at 31% 70%, rgba(253,246,220,0.65) 50%, transparent 51%),
      radial-gradient(0.7px 0.7px at 44% 30%, rgba(107,63, 160,0.75) 50%, transparent 51%),
      radial-gradient(0.7px 0.7px at 58% 85%, rgba(253,246,220,0.55) 50%, transparent 51%),
      radial-gradient(0.7px 0.7px at 71% 50%, rgba(253,246,220,0.65) 50%, transparent 51%),
      radial-gradient(0.7px 0.7px at 85% 20%, rgba(212,175,55, 0.45) 50%, transparent 51%),
      radial-gradient(0.7px 0.7px at 96% 65%, rgba(253,246,220,0.55) 50%, transparent 51%),
      radial-gradient(0.6px 0.6px at 22% 92%, rgba(253,246,220,0.50) 50%, transparent 51%),
      radial-gradient(0.6px 0.6px at 63%  8%, rgba(212,175,55, 0.40) 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 520px 260px;
    opacity: 0.28;
    animation: kh3-drift-far 230s linear infinite;
  }
  
  /* ヒーローの星にもアニメーションを追加 */
  .khtop-hero-stars {
    animation: kh3-drift-near 130s linear infinite !important;
  }
  
  /* 浮遊するゴールドオーブ（ヒーロー内の glow に動きを追加） */
  .khtop-hero-glow {
    animation: kh3-orb-float 8s ease-in-out infinite !important;
  }
  
  /* 流れ星キーフレーム */
  @keyframes kh3-drift-near {
    from { background-position: 0 0;       }
    to   { background-position: -1440px 0; }
  }
  @keyframes kh3-drift-far {
    from { background-position: 0 0;       }
    to   { background-position: -1040px 0; }
  }
  
  /* オーブ浮遊キーフレーム */
  @keyframes kh3-orb-float {
    0%,100% {
      transform: translateX(-50%) translateY(0)    scale(1);
      opacity: 0.90;
    }
    33% {
      transform: translateX(-52%) translateY(-18px) scale(1.08);
      opacity: 1;
    }
    66% {
      transform: translateX(-48%) translateY(10px)  scale(0.95);
      opacity: 0.80;
    }
  }
  
  /* prefers-reduced-motion 配慮 */
  @media (prefers-reduced-motion: reduce) {
    .kh3-bg-stars,
    .kh3-bg-stars::before,
    .kh3-bg-stars::after,
    .khtop-wrap::before,
    .khtop-wrap::after,
    .khtop-hero-stars,
    .khtop-hero-glow {
      animation: none !important;
    }
  }
  
  
  /* =============================================
     B. 記事カード・グッズカード・イベントカードのダーク化
     ============================================= */
  .khtop-card-link {
    background: linear-gradient(
      135deg,
      rgba(13, 27, 62, 0.92)  0%,
      rgba(45, 27, 105, 0.82) 100%
    ) !important;
    border: 1px solid rgba(212, 175, 55, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(7, 17, 42, 0.45) !important;
    color: var(--kh3-light) !important;
    transition: transform 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease !important;
  }
  .khtop-card-link:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(212, 175, 55, 0.38) !important;
    box-shadow:
      0 0 28px rgba(107, 63, 160, 0.40),
      0 8px 32px rgba(7, 17, 42, 0.70) !important;
  }
  
  /* サムネプレースホルダー：星空パターン */
  .khtop-card-thumb-ph {
    background: linear-gradient(135deg, #0d1b3e 0%, #2d1b69 100%) !important;
    position: relative;
    overflow: hidden;
  }
  .khtop-card-thumb-ph::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.75) 0%, transparent 100%),
      radial-gradient(1px 1px at 75% 12%, rgba(212,175,55, 0.55) 0%, transparent 100%),
      radial-gradient(1px 1px at 50% 65%, rgba(255,255,255,0.45) 0%, transparent 100%),
      radial-gradient(2px 2px at 88% 72%, rgba(255,255,255,0.35) 0%, transparent 100%),
      radial-gradient(1px 1px at 35% 88%, rgba(212,175,55, 0.42) 0%, transparent 100%);
    background-size: 340px 220px;
    opacity: 0.55;
    pointer-events: none;
  }
  .khtop-card-link:hover .khtop-card-thumb-img {
    transform: scale(1.05);
    transition: transform 0.5s ease;
  }
  
  /* カテゴリタグ */
  .khtop-card-tag {
    background: rgba(212, 175, 55, 0.14) !important;
    color: var(--kh3-gold) !important;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 999px;
    font-weight: 700;
  }
  .khtop-card-title  { color: var(--kh3-light) !important; }
  .khtop-card-date   { color: rgba(192,192,192,0.60) !important; }
  .khtop-card-desc   { color: rgba(220,230,255,0.75) !important; }
  
  /* グリッド別カラートップライン */
  .khtop-evt-grid .khtop-card-link {
    border-top: 3px solid #4ec9c9 !important;
  }
  .khtop-gds-grid .khtop-card-link {
    border-top: 3px solid var(--kh3-gold) !important;
  }
  
  
  /* =============================================
     C. KH4まとめセクション（.khsm-*）のダーク化
     ============================================= */
  
  /* CSS 変数をダーク用に上書き */
  .khsm {
    --khsm-text:      var(--kh3-light);
    --khsm-ink:       var(--kh3-cream);
    --khsm-muted:     rgba(192, 192, 192, 0.65);
    --khsm-line:      rgba(255, 255, 255, 0.10);
    --khsm-bg:        rgba(13, 27, 62, 0.45);
    --khsm-gold:      #d4af37;
    --khsm-gold-soft: #e8c252;
    color: var(--kh3-light);
    background: transparent !important;
  }
  
  /* ブロック見出し */
  .khsm-block-title {
    color: var(--kh3-cream) !important;
  }
  .khsm-block-note {
    color: rgba(192, 192, 192, 0.65) !important;
  }
  
  /* タイムライン本体 */
  .khsm-timeline {
    border-left-color: rgba(212, 175, 55, 0.28) !important;
  }
  .khsm-tl-row {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
  }
  /* タイムラインのドット（リング） */
  .khsm-tl-row::before {
    box-shadow:
      0 0 0 3px #0a0a1a,
      0 0 0 4px rgba(212, 175, 55, 0.60) !important;
  }
  .khsm-tl-row--placeholder::before {
    background: #1b2a4e !important;
    box-shadow:
      0 0 0 3px #0a0a1a,
      0 0 0 4px rgba(255, 255, 255, 0.15) !important;
  }
  .khsm-tl-date     { color: var(--kh3-gold)  !important; }
  .khsm-tl-headline { color: var(--kh3-light) !important; }
  .khsm-tl-desc     { color: rgba(192,192,192,0.78) !important; }
  
  /* 公式リンクグリッド */
  .khsm-link {
    background: rgba(13, 27, 62, 0.78) !important;
    border-color: rgba(212, 175, 55, 0.20) !important;
    color: var(--kh3-cream) !important;
  }
  .khsm-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(7, 17, 42, 0.40) !important;
    border-color: rgba(212, 175, 55, 0.42) !important;
  }
  .khsm-link-label  { color: var(--kh3-cream) !important; }
  .khsm-link-host   { color: rgba(192, 192, 192, 0.58) !important; }
  
  /* サイトリンクの左ボーダーをカラー別に */
  .khsm-link--site  { border-left-color: var(--kh3-gold)          !important; }
  .khsm-link--x     { border-left-color: rgba(255,255,255,0.6)    !important; }
  .khsm-link--yt    { border-left-color: #ff4444                  !important; }
  .khsm-link--dev   { border-left-color: var(--kh3-violet)        !important; }
  
  /* 更新リスト */
  .khsm-recent-list {
    border-top-color: rgba(255,255,255,0.08) !important;
  }
  .khsm-recent-row {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .khsm-recent-row:hover {
    background: rgba(13, 27, 62, 0.55) !important;
  }
  .khsm-recent-date  { color: var(--kh3-gold)  !important; }
  .khsm-recent-title { color: var(--kh3-light) !important; }
  .khsm-recent-title:hover { color: #ffe8a0 !important; }
  
  /* 空状態 */
  .khsm-empty {
    color: rgba(192, 192, 192, 0.55) !important;
    background: rgba(13, 27, 62, 0.40) !important;
    border: 1px dashed rgba(255, 255, 255, 0.10) !important;
  }
  
  
  /* =============================================
     D. イベントアーカイブ（.khev-sum-*）のダーク化
     ============================================= */
  .khev-sum-wrap {
    --khev-sum-navy:      var(--kh3-navy);
    --khev-sum-ink:       var(--kh3-cream);
    --khev-sum-gold:      var(--kh3-gold);
    --khev-sum-gold-soft: #e8c252;
    --khev-sum-line:      rgba(255, 255, 255, 0.08);
    --khev-sum-bg:        rgba(13, 27, 62, 0.45);
    --khev-sum-muted:     rgba(192, 192, 192, 0.60);
  }
  
  /* ミニヒーローを星空付きで強化 */
  .khev-sum-hero {
    background:
      radial-gradient(1px 1px at 25% 25%, rgba(255,255,255,0.6) 0%, transparent 100%),
      radial-gradient(1px 1px at 75% 15%, rgba(212,175,55, 0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 50% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(ellipse at 50% 0%,  rgba(212,175,55,0.20), transparent 60%),
      linear-gradient(180deg, #050a1c 0%, #0c1a3a 55%, #07112a 100%) !important;
    background-size:
      350px 200px, 350px 200px, 350px 200px, 100% 100%, 100% 100% !important;
  }
  
  /* 年グループカード */
  .khev-sum-arc-year {
    background: linear-gradient(
      135deg,
      rgba(13, 27, 62, 0.94) 0%,
      rgba(45, 27, 105, 0.80) 100%
    ) !important;
    border: 1px solid rgba(107, 63, 160, 0.30) !important;
    border-top: 4px solid var(--kh3-gold) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 16px rgba(7,17,42,0.35) !important;
    transition: box-shadow 0.25s ease !important;
  }
  .khev-sum-arc-year:hover {
    box-shadow:
      0 0 22px rgba(107,63,160,0.30),
      0 6px 24px rgba(7,17,42,0.55) !important;
  }
  
  .khev-sum-arc-summary {
    background: rgba(7,17,42,0.55) !important;
    color: var(--kh3-cream) !important;
  }
  .khev-sum-arc-summary:hover {
    background: rgba(45,27,105,0.45) !important;
    color: #ffe8a0 !important;
  }
  .khev-sum-arc-year[open] > .khev-sum-arc-summary {
    background: rgba(45,27,105,0.35) !important;
    border-bottom: 1px solid rgba(212,175,55,0.18) !important;
  }
  .khev-sum-arc-year-label { color: var(--kh3-cream) !important; }
  .khev-sum-arc-count {
    background: rgba(212,175,55,0.18) !important;
    color: var(--kh3-gold) !important;
    border: 1px solid rgba(212,175,55,0.28);
  }
  
  .khev-sum-arc-row {
    border-bottom: 1px dashed rgba(255,255,255,0.07) !important;
    border-radius: 6px;
    padding: 10px 8px !important;
    transition: background 0.15s ease !important;
  }
  .khev-sum-arc-row:last-child { border-bottom: none !important; }
  .khev-sum-arc-row:hover {
    background: rgba(107,63,160,0.18) !important;
  }
  .khev-sum-arc-date  { color: var(--kh3-gold)  !important; }
  .khev-sum-arc-link  { color: var(--kh3-light) !important; }
  .khev-sum-arc-link:hover { color: #ffe8a0 !important; }
  
  /* タブUI */
  .khev-tabs {
    background: rgba(10,10,26,0.85) !important;
    border: 1px solid rgba(107,63,160,0.30) !important;
    border-radius: 14px !important;
  }
  .khev-tabs-nav {
    background: rgba(7,17,42,0.80) !important;
    border-bottom: 1px solid rgba(212,175,55,0.15) !important;
  }
  .khev-tab { color: rgba(192,192,192,0.65) !important; }
  .khev-tab:hover {
    color: var(--kh3-cream) !important;
    background: rgba(45,27,105,0.30) !important;
  }
  .khev-tab.is-active {
    color: #ffe8a0 !important;
    background: rgba(13,27,62,0.75) !important;
  }
  .khev-tab-panel {
    background: transparent !important;
    color: var(--kh3-light) !important;
  }
  .khev-sum-h3   { color: var(--kh3-cream) !important; }
  .khev-sum-note { color: rgba(192,192,192,0.65) !important; }
  .khev-sum-history {
    background: rgba(13,27,62,0.50) !important;
    border: 1px dashed rgba(212,175,55,0.18) !important;
    color: rgba(192,192,192,0.65) !important;
  }
  .khev-sum-history-title { color: var(--kh3-cream) !important; }
  
  
  /* =============================================
     E. 404 ページ専用スタイル（kh404-* クラス）
     ============================================= */
  body.error404 {
    background-color: var(--kh3-dark) !important;
  }
  body.error404 #container,
  body.error404 #main,
  body.error404 #contents,
  body.error404 .content-in,
  body.error404 .wrap,
  body.error404 .post-content,
  body.error404 .article-wrap,
  body.error404 .entry-content {
    background: transparent !important;
    box-shadow: none !important;
  }
  body.error404 .sidebar,
  body.error404 #sidebar {
    display: none !important;
  }
  
  .kh404-wrap {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 20px;
    overflow: hidden;
    background-color: var(--kh3-dark);
  }
  .kh404-stars {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.80) 0%, transparent 100%),
      radial-gradient(1px 1px at 78%  8%, rgba(212,175,55, 0.65) 0%, transparent 100%),
      radial-gradient(1px 1px at 48% 58%, rgba(255,255,255,0.50) 0%, transparent 100%),
      radial-gradient(1px 1px at  8% 78%, rgba(107,63, 160,0.80) 0%, transparent 100%),
      radial-gradient(2px 2px at 92% 68%, rgba(255,255,255,0.40) 0%, transparent 100%),
      radial-gradient(1px 1px at 33% 92%, rgba(212,175,55, 0.50) 0%, transparent 100%),
      radial-gradient(2px 2px at 63% 38%, rgba(255,255,255,0.32) 0%, transparent 100%),
      radial-gradient(1px 1px at 55% 80%, rgba(107,63, 160,0.50) 0%, transparent 100%),
      radial-gradient(1px 1px at 90% 35%, rgba(255,255,255,0.45) 0%, transparent 100%);
    background-size: 420px 420px;
    opacity: 0.32;
    pointer-events: none;
    animation: kh3-drift-near 110s linear infinite;
  }
  .kh404-inner {
    position: relative;
    z-index: 10;
    max-width: 560px;
    margin: 0 auto;
  }
  .kh404-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 24px;
    line-height: 1;
    animation: kh3-float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 16px rgba(107,63,160,0.50));
  }
  .kh404-code {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
    line-height: 1;
    background: linear-gradient(135deg, #d4af37, #f59e0b, #d4af37);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kh3-gradient-shift 3.5s ease infinite;
  }
  .kh404-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(192,192,192,0.68);
    margin: 0 0 10px;
    line-height: 1.6;
  }
  .kh404-sub {
    font-size: 0.85rem;
    color: rgba(192,192,192,0.42);
    margin: 0 0 36px;
    line-height: 1.7;
  }
  .kh404-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #0a0a1a !important;
    background: linear-gradient(135deg, #d4af37 0%, #f59e0b 100%);
    text-decoration: none !important;
    border: none;
    box-shadow: 0 6px 18px rgba(212,175,55,0.40);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .kh404-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 26px rgba(212,175,55,0.55);
  }
  .kh404-search {
    margin-top: 32px;
    opacity: 0.55;
  }
  
  
  /* =============================================
     F. アニメーション（全般）
     ============================================= */
  @keyframes kh3-float {
    0%, 100% { transform: translateY(0);     }
    50%       { transform: translateY(-12px); }
  }
  @keyframes kh3-gradient-shift {
    0%, 100% { background-position: 0%   50%; }
    50%       { background-position: 100% 50%; }
  }
  @keyframes kh3-glow {
    0%   { box-shadow: 0 0  5px rgba(212,175,55,0.30); }
    100% { box-shadow: 0 0 22px rgba(212,175,55,0.85),
                       0 0 44px rgba(212,175,55,0.40); }
  }
  @keyframes kh3-slide-up {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  
  /* prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .kh404-icon  { animation: none; }
    .kh404-stars { animation: none; }
    .kh404-code  {
      animation: none;
      background: linear-gradient(135deg, #d4af37, #e8c252);
      -webkit-text-fill-color: transparent;
    }
  }
  
  
  /* =============================================
     G. ユーティリティクラス
     ============================================= */
  .kh3-text-gold {
    background: linear-gradient(135deg, #d4af37, #f59e0b, #d4af37);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kh3-gradient-shift 3.5s ease infinite;
  }
  .kh3-stars {
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.80) 0%, transparent 100%),
      radial-gradient(1px 1px at 80% 10%, rgba(212,175,55, 0.60) 0%, transparent 100%),
      radial-gradient(1px 1px at 50% 60%, rgba(255,255,255,0.50) 0%, transparent 100%),
      radial-gradient(1px 1px at 10% 80%, rgba(107,63, 160,0.80) 0%, transparent 100%),
      radial-gradient(2px 2px at 90% 70%, rgba(255,255,255,0.40) 0%, transparent 100%),
      radial-gradient(1px 1px at 35% 90%, rgba(212,175,55, 0.50) 0%, transparent 100%),
      radial-gradient(2px 2px at 65% 40%, rgba(255,255,255,0.32) 0%, transparent 100%);
    background-size: 400px 400px;
  }
  .kh3-divider {
    height: 1px;
    background: linear-gradient(
      90deg, transparent,
      rgba(212,175,55,0.50),
      rgba(107,63,160,0.45),
      transparent
    );
    border: none;
    margin: 32px 0;
  }
  .kh3-float    { animation: kh3-float    3s ease-in-out infinite; }
  .kh3-slide-up { animation: kh3-slide-up 0.5s ease-out both; }


/* =============================================
   FIX-0. article h2 背景色リセット
   ---------------------------------------------
   Cocoon 親テーマが設定する
   article h2 { background-color: var(--cocoon-xx-thin-color) } を無効化。
   ============================================= */

  .article h2,
  article h2 {
    background-color: transparent !important;
  }


/* =============================================
   FIX-1. TOPページ星アニメーション停止
   ---------------------------------------------
   .kh3-bg-stars（PHP注入の固定星空DIV）を非表示にし、
   .khtop-wrap::before/::after の星アニメーションも停止。
   背景色は body.home { background-color:#0A0A1A } が維持する。
   ============================================= */

  /* PHP注入の固定星空レイヤーを非表示 */
  .kh3-bg-stars {
    display: none !important;
  }

  /* .khtop-wrap 内の星タイル・アニメーションを停止 */
  .khtop-wrap::before,
  .khtop-wrap::after {
    background-image: none !important;
    animation:        none !important;
  }

  /* ヒーローセクションの星アニメーション停止 */
  .khtop-hero-stars {
    animation: none !important;
  }


/* =============================================
   FIX-2. khtop-section-title 視認性向上
   ---------------------------------------------
   クリーム色（#fdf6dc）は暗背景の星と白背景のどちらにも
   溶け込んで見えにくいため、ゴールド＋暗めのテキストシャドウで
   背景に関わらず際立つように変更。
   ============================================= */

  .khtop-section-title {
    color: var(--kh3-gold) !important;  /* #d4af37 ゴールド */
    text-shadow:
      0 1px 6px rgba(10, 10, 26, 0.80),   /* 輪郭を締める暗影 */
      0 0 16px rgba(212, 175, 55, 0.30) !important; /* ゴールドグロー */
  }