/* =====================================================
   06_top-page.css
   TOPページ・KH4まとめセクション
   - KH4まとめ (.khsm-*) — CSS変数 --khsm-navy/gold/ink
   - TOPページ (.khtop-*) — ヒーロー・タイムライン・カード・カテゴリ導線
===================================================== */
   /* =========================================================
         TOP内 KH4まとめセクション (.khsm-*)
         ヒーローとシリーズタイムラインの間に配置
         ========================================================= */
   
   .khsm {
     --khsm-navy: #0c1a3a;
     --khsm-navy-soft: #1b2a4e;
     --khsm-gold: #d4af37;
     --khsm-gold-soft: #e8c252;
     --khsm-ink: #1f3373;
     --khsm-bg: #fafbfd;
     --khsm-line: #e5e7ee;
     --khsm-text: #2a2a2a;
     --khsm-muted: #6a6a6a;
   }
   
   .khsm-head {
     position: relative;
   }
   .khsm-eyebrow {
     display: inline-block;
     margin: 0 0 6px;
     padding: 3px 12px;
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 0.18em;
     color: var(--khsm-navy);
     background: linear-gradient(90deg, #f7d774, #e8c252);
     border-radius: 999px;
   }
   
   /* (1) カウントダウン枠 */
   .khsm-countdown {
     display: grid;
     gap: 4px;
     justify-items: center;
     padding: 22px 18px;
     margin: 0 auto 28px;
     max-width: 560px;
     background: radial-gradient(
         ellipse at top,
         rgba(212, 175, 55, 0.18),
         transparent 70%
       ),
       linear-gradient(180deg, #0c1a3a, #1b2a4e);
     color: #fdf6dc;
     border-radius: 14px;
     box-shadow: 0 12px 28px rgba(7, 17, 42, 0.18);
     text-align: center;
   }
   .khsm-countdown-label {
     font-size: 11px;
     letter-spacing: 0.26em;
     color: var(--khsm-gold-soft);
     font-weight: 700;
   }
   .khsm-countdown-value {
     font-size: clamp(22px, 4.2vw, 32px);
     font-weight: 800;
     letter-spacing: 0.12em;
     color: #fff;
     text-shadow: 0 0 18px rgba(212, 175, 55, 0.4);
   }
   .khsm-countdown-note {
     margin-top: 2px;
     font-size: 12px;
     color: #c8d1ea;
     line-height: 1.6;
   }
   .khsm-countdown--tbd .khsm-countdown-value {
     letter-spacing: 0.25em;
   }
   
   /* (2) ブロック共通 */
   .khsm-block {
     margin: 28px 0;
   }
   .khsm-block-title {
     position: relative;
     margin: 0 0 14px;
     padding-left: 14px;
     font-size: 16px;
     font-weight: 800;
     color: var(--khsm-ink);
     line-height: 1.5;
   }
   .khsm-block-title::before {
     content: "";
     position: absolute;
     left: 0;
     top: 4px;
     bottom: 4px;
     width: 4px;
     background: linear-gradient(180deg, var(--khsm-gold), #c9a02f);
     border-radius: 2px;
   }
   .khsm-block-note {
     margin: 8px 0 0;
     font-size: 12px;
     color: var(--khsm-muted);
     line-height: 1.6;
   }
   
   /* (3) 公式発表 年表 */
   .khsm-timeline {
     list-style: none;
     margin: 0;
     padding: 0;
     border-left: 2px solid var(--khsm-line);
   }
   .khsm-tl-row {
     position: relative;
     display: grid;
     grid-template-columns: 78px 1fr;
     gap: 14px;
     padding: 14px 0 14px 18px;
     border-bottom: 1px dashed var(--khsm-line);
   }
   .khsm-tl-row:last-child {
     border-bottom: none;
   }
   .khsm-tl-row::before {
     content: "";
     position: absolute;
     left: -7px;
     top: 22px;
     width: 12px;
     height: 12px;
     background: var(--khsm-gold);
     border-radius: 50%;
     box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--khsm-gold-soft);
   }
   .khsm-tl-row--placeholder::before {
     background: #fff;
     box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--khsm-line);
   }
   .khsm-tl-date {
     font-size: 12px;
     font-weight: 800;
     color: var(--khsm-gold);
     letter-spacing: 0.08em;
     padding-top: 2px;
   }
   .khsm-tl-body {
     display: block;
   }
   .khsm-tl-headline {
     display: block;
     font-size: 14px;
     font-weight: 700;
     color: var(--khsm-ink);
     line-height: 1.55;
   }
   .khsm-tl-desc {
     display: block;
     margin-top: 4px;
     font-size: 13px;
     color: var(--khsm-text);
     line-height: 1.75;
   }
   
   @media (max-width: 520px) {
     .khsm-tl-row {
       grid-template-columns: 64px 1fr;
       gap: 10px;
       padding-left: 14px;
     }
     .khsm-tl-date {
       font-size: 11px;
     }
   }
   
   /* (4) 公式リンクグリッド */
   .khsm-link-grid {
     list-style: none;
     margin: 0;
     padding: 0;
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(2, 1fr);
   }
   @media (max-width: 520px) {
     .khsm-link-grid {
       grid-template-columns: 1fr;
     }
   }
   .khsm-link {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 12px 14px;
     border: 1px solid var(--khsm-line);
     border-left-width: 4px;
     border-radius: 10px;
     background: #fff;
     color: var(--khsm-ink) !important;
     text-decoration: none !important;
     transition: transform 0.15s ease, box-shadow 0.15s ease,
       border-color 0.15s ease;
   }
   .khsm-link:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(7, 17, 42, 0.08);
     border-color: var(--khsm-gold-soft);
   }
   .khsm-link-label {
     font-size: 13px;
     font-weight: 800;
   }
   .khsm-link-host {
     font-size: 11px;
     color: var(--khsm-muted);
     letter-spacing: 0.04em;
   }
   .khsm-link--site {
     border-left-color: var(--khsm-ink);
   }
   .khsm-link--x {
     border-left-color: #111;
   }
   .khsm-link--yt {
     border-left-color: #ff0033;
   }
   .khsm-link--dev {
     border-left-color: var(--khsm-gold);
   }
   
   /* (5) これまでの更新リスト */
   .khsm-recent-list {
     list-style: none;
     margin: 0;
     padding: 0;
     border-top: 1px solid var(--khsm-line);
   }
   .khsm-recent-row {
     display: grid;
     grid-template-columns: 92px 1fr;
     gap: 12px;
     align-items: baseline;
     padding: 10px 4px;
     border-bottom: 1px solid var(--khsm-line);
   }
   .khsm-recent-row:hover {
     background: var(--khsm-bg);
   }
   .khsm-recent-date {
     font-size: 12px;
     font-weight: 700;
     color: var(--khsm-gold);
     letter-spacing: 0.04em;
   }
   .khsm-recent-title {
     font-size: 14px;
     font-weight: 600;
     color: var(--khsm-ink) !important;
     text-decoration: none !important;
     line-height: 1.55;
   }
   .khsm-recent-title:hover {
     text-decoration: underline !important;
   }
   
   @media (max-width: 520px) {
     .khsm-recent-row {
       grid-template-columns: 76px 1fr;
       gap: 10px;
     }
     .khsm-recent-date {
       font-size: 11px;
     }
     .khsm-recent-title {
       font-size: 13px;
     }
   }
   
   .khsm-empty {
     margin: 0;
     padding: 16px;
     text-align: center;
     color: var(--khsm-muted);
     font-size: 13px;
     background: var(--khsm-bg);
     border: 1px dashed var(--khsm-line);
     border-radius: 8px;
   }

   /* =========================================================
         KHブログ TOPページ専用 (khtop-)
         ヒーロー / 簡易タイムライン / 直近イベント / 最新グッズ / カテゴリ導線
         ========================================================= */
   
   .khtop-wrap {
     --khtop-navy: #0c1a3a;
     --khtop-navy-deep: #07112a;
     --khtop-gold: #d4af37;
     --khtop-gold-soft: #e8c252;
     --khtop-ink: #1b2a4e;
     --khtop-text: #2a2a2a;
     --khtop-muted: #6a6a6a;
     --khtop-line: #e5e5e8;
     --khtop-bg-soft: #f7f8fb;
   
     display: block;
     margin: 0 auto;
     max-width: 1080px;
     padding: 0 16px;
     color: var(--khtop-text);
     line-height: 1.7;
   }
   
   /* (1) ヒーロー */
   .khtop-hero {
     position: relative;
     overflow: hidden;
     border-radius: 18px;
     margin: 24px auto 48px;
     padding: 64px 24px 72px;
     text-align: center;
     background: radial-gradient(
         ellipse at 50% 0%,
         rgba(212, 175, 55, 0.2),
         transparent 60%
       ),
       linear-gradient(180deg, #0a1530 0%, #0c1a3a 50%, #07112a 100%);
     color: #fdf6dc;
     box-shadow: 0 24px 48px rgba(7, 17, 42, 0.25);
   }
   .khtop-hero-stars {
     position: absolute;
     inset: 0;
     pointer-events: none;
     background-image: radial-gradient(
         1px 1px at 10% 20%,
         #fff 50%,
         transparent 51%
       ),
       radial-gradient(1px 1px at 25% 60%, #fff 50%, transparent 51%),
       radial-gradient(1px 1px at 45% 30%, #fff 50%, transparent 51%),
       radial-gradient(1px 1px at 70% 75%, #fff 50%, transparent 51%),
       radial-gradient(1px 1px at 85% 40%, #fff 50%, transparent 51%),
       radial-gradient(1.5px 1.5px at 35% 85%, #fff 50%, transparent 51%),
       radial-gradient(1.5px 1.5px at 60% 15%, #fff 50%, transparent 51%),
       radial-gradient(1.5px 1.5px at 92% 65%, #fff 50%, transparent 51%);
     opacity: 0.65;
   }
   .khtop-hero-glow {
     position: absolute;
     left: 50%;
     top: -10%;
     width: 480px;
     height: 480px;
     transform: translateX(-50%);
     pointer-events: none;
     background: radial-gradient(
       circle at center,
       rgba(212, 175, 55, 0.35),
       transparent 60%
     );
     filter: blur(4px);
   }
   .khtop-hero-inner {
     position: relative;
   }
   .khtop-hero-eyebrow {
     margin: 0 0 12px;
     font-size: 12px;
     letter-spacing: 0.22em;
     color: var(--khtop-gold-soft);
     text-transform: uppercase;
   }
   .khtop-hero-title {
     margin: 0 0 16px;
     font-weight: 700;
     line-height: 1.2;
   }
   .khtop-hero-title-main {
     display: block;
     font-size: clamp(28px, 5.5vw, 48px);
     letter-spacing: 0.04em;
   }
   .khtop-hero-title-sub {
     display: block;
     margin-top: 4px;
     font-size: clamp(18px, 3.5vw, 28px);
     color: var(--khtop-gold);
     letter-spacing: 0.35em;
   }
   .khtop-hero-lead {
     margin: 16px auto 28px;
     max-width: 560px;
     font-size: 15px;
     color: #e7eaf3;
     line-height: 1.9;
   }
   .khtop-hero-ctas {
     display: flex;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
   }
   .khtop-hero-btn {
     display: inline-block;
     padding: 12px 22px;
     border-radius: 999px;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: transform 0.15s ease, box-shadow 0.15s ease;
   }
   .khtop-hero-btn--primary {
     background: linear-gradient(180deg, #e8c252, #c9a02f);
     color: #1b1304;
     box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
   }
   .khtop-hero-btn--ghost {
     background: rgba(255, 255, 255, 0.06);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.35);
   }
   .khtop-hero-btn:hover {
     transform: translateY(-2px);
   }
   .khtop-hero-btn--primary:hover {
     box-shadow: 0 10px 22px rgba(212, 175, 55, 0.5);
   }
   
   /* (2) セクション共通 */
   .khtop-section {
     margin: 56px auto;
   }
   .khtop-section-head {
     text-align: center;
     margin: 0 0 28px;
   }
   .khtop-section-title {
     position: relative;
     display: inline-block;
     margin: 0;
     padding-bottom: 8px;
     font-size: clamp(20px, 3vw, 26px);
     font-weight: 700;
     color: var(--khtop-ink);
     letter-spacing: 0.04em;
   }
   .khtop-section-title::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: 0;
     width: 40px;
     height: 2px;
     transform: translateX(-50%);
     background: linear-gradient(
       90deg,
       transparent,
       var(--khtop-gold),
       transparent
     );
   }
   .khtop-section-sub {
     margin: 10px 0 0;
     color: var(--khtop-muted);
     font-size: 14px;
   }
   .khtop-section-cta {
     margin-top: 24px;
     text-align: center;
   }
   .khtop-link-btn {
     display: inline-block;
     padding: 10px 18px;
     border: 1px solid var(--khtop-ink);
     border-radius: 999px;
     color: var(--khtop-ink);
     font-size: 13px;
     font-weight: 600;
     text-decoration: none;
     transition: background-color 0.15s ease, color 0.15s ease;
   }
   .khtop-link-btn:hover {
     background: var(--khtop-ink);
     color: #fff;
   }
   
   /* (3) 簡易タイムライン (15作品・各セルに --dot-color インライン指定) */
   .khtop-tl-line {
     list-style: none;
     padding: 12px 4px 4px;
     margin: 0;
     display: grid;
     grid-template-columns: repeat(5, 1fr); /* 5列x3行 */
     column-gap: 10px;
     row-gap: 28px;
     position: relative;
   }
   
   .khtop-tl-item {
     --dot-color: var(--khtop-gold);
     position: relative;
     text-align: center;
     padding: 30px 4px 0;
     z-index: 1;
     min-width: 0;
   }
   .khtop-tl-item::before {
     content: "";
     position: absolute;
     left: 50%;
     top: 4px;
     width: 14px;
     height: 14px;
     transform: translateX(-50%);
     border-radius: 50%;
     background: var(--dot-color);
     box-shadow: 0 0 0 3px #fff,
       0 0 0 5px color-mix(in srgb, var(--dot-color) 35%, transparent),
       0 0 10px color-mix(in srgb, var(--dot-color) 55%, transparent);
     transition: box-shadow 0.25s ease, transform 0.25s ease;
   }
   .khtop-tl-item:hover::before {
     box-shadow: 0 0 0 3px #fff,
       0 0 0 6px color-mix(in srgb, var(--dot-color) 55%, transparent),
       0 0 18px color-mix(in srgb, var(--dot-color) 75%, transparent);
     transform: translateX(-50%) scale(1.12);
   }
   
   /* 配信中止 Missing-Link はドットを白抜き＋点線リングで識別 (バッジでも表示) */
   .khtop-tl-item--ml::before {
     background: #fff;
     border: 2px dashed color-mix(in srgb, var(--dot-color) 80%, #999);
   }
   
   /* ホバーで各作品のドット色のミッキーシルエットがふわっと出現
         SVG は base64 で完全エンコード (Cocoonのマークアップ検知を回避) */
   .khtop-tl-item::after {
     content: "";
     position: absolute;
     left: 50%;
     top: -22px;
     width: 26px;
     height: 20px;
     transform: translateX(-50%) translateY(6px) scale(0.5);
     background-color: var(--dot-color, var(--khtop-gold));
     -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAyNCc+PGNpcmNsZSBjeD0nMTYnIGN5PScxNycgcj0nNi41Jy8+PGNpcmNsZSBjeD0nNy41JyBjeT0nNi41JyByPSc1Jy8+PGNpcmNsZSBjeD0nMjQuNScgY3k9JzYuNScgcj0nNScvPjwvc3ZnPg==")
       no-repeat center / contain;
     mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAyNCc+PGNpcmNsZSBjeD0nMTYnIGN5PScxNycgcj0nNi41Jy8+PGNpcmNsZSBjeD0nNy41JyBjeT0nNi41JyByPSc1Jy8+PGNpcmNsZSBjeD0nMjQuNScgY3k9JzYuNScgcj0nNScvPjwvc3ZnPg==")
       no-repeat center / contain;
     -webkit-mask-size: contain;
     mask-size: contain;
     opacity: 0;
     pointer-events: none;
     filter: drop-shadow(
       0 0 6px color-mix(in srgb, var(--dot-color) 65%, transparent)
     );
     transition: opacity 0.35s ease,
       transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   .khtop-tl-item:hover::after,
   .khtop-tl-item:focus-within::after {
     opacity: 0.92;
     transform: translateX(-50%) translateY(0) scale(1);
   }
   
   /* prefers-reduced-motion: ホバー演出を静かに */
   @media (prefers-reduced-motion: reduce) {
     .khtop-tl-item::before,
     .khtop-tl-item::after {
       transition: opacity 0.2s ease;
     }
     .khtop-tl-item:hover::before {
       transform: translateX(-50%);
     }
     .khtop-tl-item:hover::after,
     .khtop-tl-item:focus-within::after {
       transform: translateX(-50%);
     }
   }
   
   .khtop-tl-year {
     display: block;
     font-size: 11px;
     font-weight: 800;
     color: var(--khtop-gold);
     letter-spacing: 0.1em;
   }
   .khtop-tl-name {
     display: block;
     margin-top: 4px;
     font-size: 11.5px;
     line-height: 1.4;
     color: var(--khtop-ink);
     font-weight: 600;
     word-break: keep-all;
     overflow-wrap: anywhere;
   }
   .khtop-tl-badge {
     display: inline-block;
     margin-top: 4px;
     padding: 1px 6px;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: 0.04em;
     color: #fff;
     background: #888;
     border-radius: 999px;
   }
   
   /* KH4セル（未定）は金色グローを強める */
   .khtop-tl-item--kh4 .khtop-tl-year {
     color: var(--khtop-gold);
     text-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
   }
   .khtop-tl-item--kh4::before {
     box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(212, 175, 55, 0.55),
       0 0 16px rgba(212, 175, 55, 0.7);
   }
   
   /* タイムライン：リンクあり作品 */
   .khtop-tl-link {
     display: block;
     color: inherit;
     text-decoration: none;
   }
   .khtop-tl-item--linked .khtop-tl-name {
     transition: color 0.2s ease;
   }
   .khtop-tl-item--linked:hover .khtop-tl-name,
   .khtop-tl-item--linked:focus-within .khtop-tl-name {
     color: var(--dot-color);
   }
   .khtop-tl-link:focus-visible {
     outline: 2px solid var(--dot-color);
     outline-offset: 3px;
     border-radius: 4px;
   }
   
   /* レスポンシブ：タブレットは4列、スマホは3列、極小は2列 */
   @media (max-width: 900px) {
     .khtop-tl-line {
       grid-template-columns: repeat(4, 1fr);
     }
   }
   @media (max-width: 600px) {
     .khtop-tl-line {
       grid-template-columns: repeat(3, 1fr);
     }
     .khtop-tl-name {
       font-size: 11px;
     }
   }
   @media (max-width: 400px) {
     .khtop-tl-line {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   /* color-mix 非対応ブラウザ用フォールバック */
   @supports not (background: color-mix(in srgb, #000, #fff)) {
     .khtop-tl-item::before {
       box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(212, 175, 55, 0.35),
         0 0 10px rgba(212, 175, 55, 0.5);
     }
   }
   
   /* (4) カードグリッド (イベント・グッズ共通) */
   .khtop-card-grid {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     gap: 16px;
   }
   .khtop-gds-grid {
     grid-template-columns: repeat(3, 1fr);
   }
   .khtop-evt-grid {
     grid-template-columns: repeat(3, 1fr);
   }
   
   @media (max-width: 900px) {
     .khtop-gds-grid {
       grid-template-columns: repeat(2, 1fr);
     }
     .khtop-evt-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   @media (max-width: 520px) {
     .khtop-gds-grid {
       grid-template-columns: 1fr 1fr;
     }
     .khtop-evt-grid {
       grid-template-columns: 1fr;
     }
   }
   
   .khtop-card {
     margin: 0;
   }
   .khtop-card-link {
     display: block;
     background: #fff;
     border: 1px solid var(--khtop-line);
     border-radius: 12px;
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     transition: transform 0.15s ease, box-shadow 0.15s ease,
       border-color 0.15s ease;
   }
   .khtop-card-link:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 22px rgba(7, 17, 42, 0.1);
     border-color: var(--khtop-gold-soft);
   }
   .khtop-card-thumb {
     display: block;
     position: relative;
     aspect-ratio: 4/3;
     background: var(--khtop-bg-soft);
     overflow: hidden;
   }
   .khtop-card-thumb-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   .khtop-card-thumb-ph {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, #eef0f6, #dfe3ef);
   }
   .khtop-card-body {
     display: block;
     padding: 12px 14px 14px;
   }
   .khtop-card-tag {
     display: inline-block;
     margin-bottom: 6px;
     padding: 2px 8px;
     border-radius: 999px;
     background: var(--khtop-bg-soft);
     color: var(--khtop-ink);
     font-size: 11px;
     letter-spacing: 0.04em;
   }
   .khtop-card-title {
     display: block;
     font-size: 14px;
     line-height: 1.55;
     color: var(--khtop-ink);
     font-weight: 600;
   }
   .khtop-empty {
     margin: 0;
     padding: 20px;
     text-align: center;
     color: var(--khtop-muted);
     font-size: 14px;
   }
   
   /* (5) カテゴリ導線 (KH風ステンドグラス・アクセント別) */
   .khtop-nav {
     display: grid;
     gap: 16px;
     grid-template-columns: repeat(3, 1fr);
     margin: 56px auto 24px;
   }
   @media (max-width: 720px) {
     .khtop-nav {
       grid-template-columns: 1fr;
     }
   }
   
   .khtop-nav-card {
     --accent: #d4af37;
     --accent-soft: #e8c252;
     position: relative;
     display: grid;
     grid-template-columns: 56px 1fr 18px;
     align-items: center;
     gap: 14px;
     padding: 22px 22px;
     border-radius: 14px;
     text-decoration: none !important;
     color: #fdf6dc !important;
     background: radial-gradient(
         circle at top right,
         color-mix(in srgb, var(--accent) 18%, transparent),
         transparent 60%
       ),
       radial-gradient(
         circle at bottom left,
         color-mix(in srgb, var(--accent) 8%, transparent),
         transparent 50%
       ),
       linear-gradient(135deg, #0a1430 0%, #0c1a3a 55%, #1b2a4e 100%);
     border: 1px solid rgba(212, 175, 55, 0.2);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03),
       0 10px 22px rgba(7, 17, 42, 0.2);
     overflow: hidden;
     transition: transform 0.25s ease, box-shadow 0.25s ease,
       border-color 0.25s ease;
   }
   
   /* 各カードのアクセントカラー */
   .khtop-nav-card--goods {
     --accent: #d4af37;
     --accent-soft: #e8c252;
   } /* 金 */
   .khtop-nav-card--event {
     --accent: #4ec9c9;
     --accent-soft: #76dada;
   } /* ターコイズ */
   .khtop-nav-card--theory {
     --accent: #b48cc4;
     --accent-soft: #c9a6d8;
   } /* 紫 */
   
   /* ステンドグラス風の十字光 (::before / ::after) */
   .khtop-nav-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(
         90deg,
         transparent 49%,
         color-mix(in srgb, var(--accent) 22%, transparent) 50%,
         transparent 51%
       ),
       linear-gradient(
         0deg,
         transparent 49%,
         color-mix(in srgb, var(--accent) 14%, transparent) 50%,
         transparent 51%
       );
     opacity: 0.35;
     pointer-events: none;
     z-index: 0;
   }
   .khtop-nav-card::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 14px;
     box-shadow: inset 0 0 0 1px transparent;
     pointer-events: none;
     transition: box-shadow 0.25s ease;
     z-index: 1;
   }
   
   .khtop-nav-card > * {
     position: relative;
     z-index: 2;
   }
   
   .khtop-nav-card:hover {
     transform: translateY(-3px);
     border-color: var(--accent-soft);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
       0 14px 28px rgba(7, 17, 42, 0.3),
       0 0 24px color-mix(in srgb, var(--accent) 22%, transparent);
   }
   .khtop-nav-card:hover::after {
     box-shadow: inset 0 0 0 1px var(--accent-soft);
   }
   
   /* アイコン枠 */
   .khtop-nav-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     border-radius: 14px;
     background: linear-gradient(
       135deg,
       rgba(255, 255, 255, 0.04),
       rgba(255, 255, 255, 0)
     );
     border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
     color: var(--accent);
     box-shadow: inset 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent);
     transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
       transform 0.25s ease;
   }
   .khtop-nav-icon svg {
     width: 26px;
     height: 26px;
     display: block;
   }
   .khtop-nav-card:hover .khtop-nav-icon {
     color: var(--accent-soft);
     border-color: var(--accent-soft);
     box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
     transform: rotate(-3deg) scale(1.04);
   }
   
   .khtop-nav-body {
     display: block;
     min-width: 0;
   }
   .khtop-nav-eyebrow {
     display: block;
     font-size: 10px;
     letter-spacing: 0.26em;
     color: var(--accent-soft);
     text-transform: uppercase;
     font-weight: 800;
     margin-bottom: 2px;
   }
   .khtop-nav-label {
     display: block;
     font-size: 17px;
     font-weight: 800;
     letter-spacing: 0.08em;
     color: #fdf6dc;
     line-height: 1.3;
   }
   .khtop-nav-desc {
     display: block;
     margin-top: 4px;
     font-size: 12px;
     color: #c8d1ea;
     line-height: 1.55;
   }
   
   .khtop-nav-arrow {
     font-size: 22px;
     color: var(--accent);
     line-height: 1;
     transition: transform 0.25s ease, color 0.25s ease;
   }
   .khtop-nav-card:hover .khtop-nav-arrow {
     transform: translateX(4px);
     color: var(--accent-soft);
   }
   
   /* color-mix 非対応ブラウザのフォールバック (古いSafari等) */
   @supports not (background: color-mix(in srgb, #000, #fff)) {
     .khtop-nav-card {
       background: linear-gradient(135deg, #0a1430, #1b2a4e);
     }
     .khtop-nav-card::before {
       opacity: 0.25;
       background: linear-gradient(
         90deg,
         transparent 49%,
         rgba(212, 175, 55, 0.2) 50%,
         transparent 51%
       );
     }
     .khtop-nav-icon {
       border-color: rgba(212, 175, 55, 0.4);
       box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.2);
     }
   }
   
   /* (6) Cocoon の固定ページ用のサイドバーや見出しを抑止したい場合 (任意) */
   /* body.page-id-XXX .sidebar { display:none; } のように page-id 指定で調整 */