/* =====================================================
   07_series.css
   KHシリーズページスタイル
   - 55_ KHシリーズ単作あらすじ (.kh-sp, .kh-g-kh1 〜 .kh-g-mom)
   - 56_ KHシリーズ一覧ページ (.kh-hub)
===================================================== */
   /* ==========================================================
    *  55_ KHシリーズ単作あらすじページ (kh-single)
    *  各ゲームの固定ページ用スタイル
    *  使い方:
    *    <div class="kh-sp kh-g-kh1"> ... </div>
    * ========================================================== */
   
   /* ── ゲームカラー変数 ── */
   .kh-g-kh1  { --c: #7ec8e3; --cr: 126,200,227; }  /* KH1               */
   .kh-g-com  { --c: #b8ccd8; --cr: 184,204,216; }  /* Re:Chain          */
   .kh-g-kh2  { --c: #90b8e0; --cr: 144,184,224; }  /* KH2               */
   .kh-g-days { --c: #d45868; --cr: 212,88,104;  }  /* 358/2 Days        */
   .kh-g-bbs  { --c: #6ab8d8; --cr: 106,184,216; }  /* Birth by Sleep    */
   .kh-g-rec  { --c: #d4b840; --cr: 212,184,64;  }  /* Re:coded          */
   .kh-g-ddd  { --c: #c040a8; --cr: 192,64,168;  }  /* Dream Drop Dist.  */
   .kh-g-02   { --c: #6090e8; --cr: 96,144,232;  }  /* 0.2 BbS           */
   .kh-g-bc   { --c: #4ab870; --cr: 74,184,112;  }  /* χ Back Cover      */
   .kh-g-kh3  { --c: #a0c0f8; --cr: 160,192,248; }  /* KH3               */
   .kh-g-mom  { --c: #e878b0; --cr: 232,120,176; }  /* Melody of Memory  */
   
   /* ── コンテナ基本 ── */
   .kh-sp {
     font-family: 'Noto Serif JP', serif;
     color: #1a1c2e;
     overflow-x: hidden;
     position: relative;
   }
   
   /* 右グラデーションオーバーレイ */
   .kh-sp::after {
     content: '';
     position: fixed;
     top: 0; right: 0; bottom: 0;
     width: 25vw;
     background: linear-gradient(
       to left,
       rgba(var(--cr),.35) 0%,
       rgba(var(--cr),.15) 50%,
       rgba(var(--cr),0)   100%
     );
     z-index: 200;
     pointer-events: none;
   }
   
   /* ── 全幅ヒーロー (Cocoonコンテナ突破) ── */
   .kh-sp .hero {
     position: relative;
     min-height: 60vh;
     display: flex; flex-direction: column; justify-content: flex-end;
     overflow: hidden;
     background: #060c1c;
     width: 100vw;
     margin-left: calc(50% - 50vw);
     margin-right: calc(50% - 50vw);
   }
   .kh-sp .hero-bg {
     position: absolute; inset: 0;
     background:
       radial-gradient(ellipse at 20% 60%, rgba(14,50,80,.95) 0%, transparent 55%),
       radial-gradient(ellipse at 80% 20%, rgba(6,28,55,.7)   0%, transparent 50%),
       #060c1c;
   }
   .kh-sp .hero-orbit {
     position: absolute; border-radius: 50%;
     border: 1px solid rgba(var(--cr),.1);
     top: 50%; left: 62%; transform: translate(-50%,-50%);
   }
   .kh-sp .ho-1 { width:440px; height:440px; animation: kh-orb 60s linear infinite; }
   .kh-sp .ho-2 { width:300px; height:300px; animation: kh-orb 38s linear infinite reverse; border-color: rgba(var(--cr),.07); }
   .kh-sp .ho-3 { width:180px; height:180px; animation: kh-orb 22s linear infinite; border-color: rgba(var(--cr),.14); }
   .kh-sp .ho-1::before {
     content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%;
     background: var(--c); box-shadow: 0 0 8px var(--c);
     top: -2px; left: 50%; transform: translateX(-50%);
   }
   @keyframes kh-orb {
     from { transform: translate(-50%,-50%) rotate(0deg); }
     to   { transform: translate(-50%,-50%) rotate(360deg); }
   }
   .kh-sp .hero-horizon {
     position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
     background: linear-gradient(to right, transparent, var(--c) 30%, rgba(var(--cr),.6) 50%, var(--c) 70%, transparent);
     box-shadow: 0 0 30px 6px rgba(var(--cr),.25);
   }
   .kh-sp .hero-content {
     position: relative; z-index: 2;
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
     padding: 70px 40px 60px;
   }
   .kh-sp .hero-order {
     font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .5em;
     color: var(--c); text-transform: uppercase;
     display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
     opacity: 0; animation: kh-fadeUp .7s ease forwards .1s;
   }
   .kh-sp .hero-order::before { content: ''; width: 36px; height: 1px; background: var(--c); opacity: .5; }
   .kh-sp .hero-eyebrow {
     font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .4em;
     color: rgba(var(--cr),.55); text-transform: uppercase; margin-bottom: 14px;
     opacity: 0; animation: kh-fadeUp .7s ease forwards .2s;
   }
   .kh-sp .hero-title {
     font-family: 'Cinzel', serif;
     font-size: clamp(2.4rem, 5.5vw, 5rem);
     font-weight: 900; line-height: 1.0; letter-spacing: .04em;
     background: linear-gradient(135deg, #fff 0%, var(--c) 55%, rgba(var(--cr),.7) 100%);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
     filter: drop-shadow(0 0 24px rgba(var(--cr),.35));
     margin-bottom: 20px;
     opacity: 0; animation: kh-fadeUp .7s ease forwards .3s;
   }
   .kh-sp .hero-tagline {
     font-size: 14px; line-height: 2.0; letter-spacing: .06em;
     color: rgba(200,220,255,.8); margin-bottom: 32px;
     opacity: 0; animation: kh-fadeUp .7s ease forwards .5s;
   }
   .kh-sp .hero-meta {
     display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
     opacity: 0; animation: kh-fadeUp .7s ease forwards .6s;
   }
   .kh-sp .hm-item { display: flex; flex-direction: column; gap: 3px; }
   .kh-sp .hm-label {
     font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: .35em;
     color: rgba(var(--cr),.45); text-transform: uppercase;
   }
   .kh-sp .hm-value {
     font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
     letter-spacing: .08em; color: #d8f0ff;
   }
   .kh-sp .hm-divider { width: 1px; height: 28px; background: rgba(var(--cr),.18); }
   
   /* ── ページ本文レイアウト ── */
   .kh-sp .page-body {
     max-width: 1100px; margin: 0 auto;
     padding: 60px 40px 80px;
     display: grid; grid-template-columns: 1fr 300px; gap: 56px;
     align-items: start;
   }
   .kh-sp .content-main { min-width: 0; }
   
   /* ── 見出し ── */
   .kh-sp .c-heading {
     font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .55em;
     color: #4a5568; text-transform: uppercase;
     display: flex; align-items: center; gap: 14px;
     margin-bottom: 24px; margin-top: 52px;
     padding-bottom: 10px;
     border-bottom: 1px solid #dde2ec;
   }
   .kh-sp .c-heading:first-child { margin-top: 0; }
   
   /* ── 本文テキスト ── */
   .kh-sp .c-lead { font-size: 15px; line-height: 2.1; color: #1a1c2e; margin-bottom: 20px; }
   .kh-sp .c-body { font-size: 14px; line-height: 2.2; color: #2a2c3e; margin-bottom: 18px; }
   
   /* ── 引用ブロック ── */
   .kh-sp .c-quote {
     position: relative; margin: 32px 0;
     padding: 28px 32px 28px 48px;
     border-left: 3px solid var(--c);
     background:
       radial-gradient(ellipse at 0% 50%, rgba(14,50,80,.9) 0%, transparent 60%),
       linear-gradient(135deg, #071828 0%, #0a1c2e 60%, #060e1a 100%);
     border-radius: 2px;
   }
   .kh-sp .c-quote::before {
     content: '"'; position: absolute; top: 14px; left: 16px;
     font-family: 'Cinzel', serif; font-size: 32px;
     color: var(--c); opacity: .45; line-height: 1;
   }
   .kh-sp .c-quote p {
     font-size: 15px; line-height: 2.0; font-style: italic; color: #ddeeff;
   }
   .kh-sp .c-quote cite {
     display: block; margin-top: 10px;
     font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .22em;
     color: rgba(var(--cr),.55); font-style: normal;
   }
   
   /* ── ワールドグリッド ── */
   .kh-sp .world-grid {
     display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-bottom: 24px;
   }
   .kh-sp .world-item {
     padding: 16px 14px;
     background:
       radial-gradient(ellipse at 0% 50%, rgba(14,50,80,.7) 0%, transparent 60%),
       linear-gradient(135deg, #071828 0%, #0c1e30 100%);
     border: 1px solid rgba(var(--cr),.12);
     position: relative; overflow: hidden;
     transition: border-color .3s;
   }
   .kh-sp .world-item::after {
     content: ''; position: absolute; bottom: 0; left: 0;
     width: 0; height: 2px; background: var(--c);
     transition: width .35s;
   }
   .kh-sp .world-item:hover { border-color: rgba(var(--cr),.3); }
   .kh-sp .world-item:hover::after { width: 100%; }
   .kh-sp .wi-name {
     font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .07em;
     color: #d8eeff; font-weight: 600; margin-bottom: 3px;
   }
   .kh-sp .wi-origin { font-size: 11px; color: rgba(var(--cr),.45); }
   
   /* ── システムテーブル ── */
   .kh-sp .sys-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
   .kh-sp .sys-table tr { border-bottom: 1px solid #e4e8f0; }
   .kh-sp .sys-table td { padding: 12px 0; font-size: 13px; vertical-align: top; }
   .kh-sp .sys-table td:first-child {
     font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .2em;
     color: #6a8aaa; text-transform: uppercase;
     width: 130px; padding-right: 16px; padding-top: 15px;
   }
   .kh-sp .sys-table td:last-child { color: #2a2c3e; }
   
   /* ── サイドバー ── */
   .kh-sp .content-side { position: sticky; top: 72px; }
   .kh-sp .side-panel {
     background: #fff; border: 1px solid #dde2ec;
     margin-bottom: 14px; overflow: hidden;
     box-shadow: 0 1px 4px rgba(0,0,0,.04);
   }
   .kh-sp .sp-head {
     padding: 11px 18px; background: #f0f4f8;
     border-bottom: 1px solid #dde2ec;
     font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .4em;
     color: #4a5568; text-transform: uppercase;
   }
   .kh-sp .sp-body { padding: 16px 18px; }
   .kh-sp .stat-row { margin-bottom: 13px; }
   .kh-sp .stat-label-row { display: flex; justify-content: space-between; margin-bottom: 5px; }
   .kh-sp .stat-name { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .12em; color: #555; }
   .kh-sp .stat-val  { font-family: 'Cinzel', serif; font-size: 10px; color: var(--c); }
   .kh-sp .stat-track { height: 3px; background: #e4e8f0; }
   .kh-sp .stat-fill {
     height: 100%;
     background: linear-gradient(to right, var(--c), rgba(var(--cr),.3));
     animation: kh-fillGrow 1.2s ease forwards; transform: scaleX(0); transform-origin: left;
   }
   @keyframes kh-fillGrow { to { transform: scaleX(1); } }
   
   .kh-sp .info-list { display: flex; flex-direction: column; }
   .kh-sp .il-row {
     display: flex; justify-content: space-between; align-items: center;
     padding: 9px 0; border-bottom: 1px solid #f0f2f8; gap: 10px;
   }
   .kh-sp .il-row:last-child { border-bottom: none; }
   .kh-sp .il-key {
     font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .18em;
     color: #6a8aaa; text-transform: uppercase; white-space: nowrap;
   }
   .kh-sp .il-val { font-size: 12px; color: #2a2c3e; text-align: right; }
   .kh-sp .hd-badge {
     margin-top: 14px; padding: 12px 14px;
     background:
       radial-gradient(ellipse at 0% 50%, rgba(14,50,80,.8) 0%, transparent 60%),
       linear-gradient(135deg, #071828 0%, #0a1c2e 100%);
     border-left: 3px solid var(--c);
   }
   .kh-sp .hd-badge-title {
     font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .18em;
     color: var(--c); margin-bottom: 5px; text-transform: uppercase;
   }
   .kh-sp .hd-badge-text { font-size: 12px; color: rgba(200,220,240,.75); line-height: 1.6; }
   
   /* ── 前後ナビゲーション ── */
   .kh-sp .adjacent-wrap {
     max-width: 1100px; margin: 0 auto;
     padding: 0 40px 60px;
   }
   .kh-sp .adjacent-nav {
     display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
   }
   .kh-sp .adj-card {
     display: grid; grid-template-columns: 90px 1fr;
     min-height: 100px;
     text-decoration: none; color: inherit;
     position: relative; overflow: hidden;
     border: 1px solid rgba(255,255,255,.08);
     transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .3s;
   }
   .kh-sp .adj-card::before {
     content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
     background: var(--ac, var(--c));
     box-shadow: 0 0 12px 2px var(--ac, var(--c));
     transition: width .3s, box-shadow .3s;
   }
   .kh-sp .adj-card:hover::before { width: 5px; box-shadow: 0 0 24px 4px var(--ac, var(--c)); }
   .kh-sp .adj-card.prev { transform: translateX(-14px); }
   .kh-sp .adj-card.prev:hover { transform: translateX(-22px); box-shadow: 5px 0 24px rgba(0,0,0,.35); }
   .kh-sp .adj-card.next { transform: translateX(14px); }
   .kh-sp .adj-card.next:hover { transform: translateX(22px); box-shadow: -5px 0 24px rgba(0,0,0,.35); }
   .kh-sp .adj-visual {
     position: relative; display: flex; align-items: center; justify-content: center;
     overflow: hidden; z-index: 1; padding: 14px;
     border-right: 1px solid rgba(255,255,255,.06);
   }
   .kh-sp .adj-ghost {
     position: absolute;
     font-family: 'Cinzel', serif; font-size: 72px; font-weight: 900;
     color: transparent; -webkit-text-stroke: 1px var(--ac, var(--c));
     opacity: .09; right: -6px; bottom: -10px;
     user-select: none; transition: opacity .4s;
   }
   .kh-sp .adj-card:hover .adj-ghost { opacity: .2; }
   .kh-sp .adj-crystal {
     position: relative; z-index: 2;
     width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
   }
   .kh-sp .adj-crystal::before {
     content: ''; position: absolute; width: 28px; height: 28px;
     border: 1px solid var(--ac, var(--c)); transform: rotate(45deg);
     box-shadow: 0 0 8px var(--ac, var(--c));
     transition: box-shadow .3s;
   }
   .kh-sp .adj-card:hover .adj-crystal::before { box-shadow: 0 0 16px var(--ac, var(--c)); }
   .kh-sp .adj-crystal::after {
     content: ''; position: absolute; width: 18px; height: 18px;
     border: 1px solid rgba(255,255,255,.12); transform: rotate(22deg);
   }
   .kh-sp .adj-crystal-num {
     font-family: 'Cinzel', serif; font-size: 9px; font-weight: 600;
     color: var(--ac, var(--c)); text-shadow: 0 0 6px var(--ac, var(--c));
     position: relative; z-index: 1; letter-spacing: .04em;
   }
   .kh-sp .adj-body {
     padding: 16px 18px; display: flex; flex-direction: column; justify-content: center;
     z-index: 1; position: relative;
   }
   .kh-sp .adj-direction {
     font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: .38em;
     color: var(--ac, var(--c)); opacity: .7; text-transform: uppercase; margin-bottom: 5px;
   }
   .kh-sp .adj-title {
     font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
     color: #eef4ff; line-height: 1.3;
   }
   
   /* ── アニメーション ── */
   @keyframes kh-fadeUp {
     from { opacity: 0; transform: translateY(18px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* ── レスポンシブ ── */
   @media (max-width: 768px) {
     .kh-sp .page-body { grid-template-columns: 1fr; padding: 40px 20px 60px; }
     .kh-sp .content-side { position: static; }
     .kh-sp .hero-content { padding: 50px 24px 44px; }
     .kh-sp .world-grid { grid-template-columns: repeat(2,1fr); }
     .kh-sp .adjacent-wrap { padding: 0 20px 50px; }
     .kh-sp .adjacent-nav { grid-template-columns: 1fr; }
     .kh-sp .adj-card.prev { transform: translateX(-8px); }
     .kh-sp .adj-card.next { transform: translateX(8px); }
   }
   
   /* ==========================================================
    *  56_ KHシリーズ一覧ページ (kh-hub / wp_series)
    *  親ページ用スタイル
    *  使い方: <div class="kh-hub"> ... </div>
    * ========================================================== */
   
   /* ── 背景演出 ── */
   .kh-hub { position: relative; }
   
   .kh-hub .starfield {
     position: fixed; inset: 0; z-index: 0; pointer-events: none;
   }
   .kh-hub .star {
     position: absolute; background: white; border-radius: 50%;
     animation: kh-hub-twinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
   }
   @keyframes kh-hub-twinkle {
     0%, 100% { opacity: var(--min-op, 0.2); transform: scale(1); }
     50%       { opacity: 1; transform: scale(1.4); }
   }
   .kh-hub .shooting {
     position: fixed; width: 1px; height: 90px;
     background: linear-gradient(to bottom, white, transparent);
     transform-origin: top; opacity: 0;
     animation: kh-shoot 9s linear infinite; z-index: 0;
   }
   @keyframes kh-shoot {
     0%  { opacity: 0; top: 8%; left: 65%; transform: rotate(32deg) translateY(-60px); }
     8%  { opacity: 1; }
     28% { opacity: 0; transform: rotate(32deg) translateY(320px); }
     100%{ opacity: 0; }
   }
   .kh-hub .nebula {
     position: fixed; border-radius: 50%; filter: blur(120px);
     pointer-events: none; z-index: 0;
   }
   .kh-hub .nebula-1 {
     width: 600px; height: 400px;
     background: rgba(26,37,80,.8); top: -100px; right: -100px;
   }
   .kh-hub .nebula-2 {
     width: 400px; height: 400px;
     background: rgba(212,74,106,.1); bottom: 100px; left: -100px;
     animation: kh-drift 16s ease-in-out infinite;
   }
   @keyframes kh-drift {
     0%, 100% { transform: translate(0,0); }
     50%       { transform: translate(28px,-18px); }
   }
   
   /* ── メインコンテンツ ── */
   .kh-hub main {
     position: relative; z-index: 10;
     max-width: 1100px; margin: 0 auto;
     padding: 60px 24px 100px;
   }
   
   /* セクションラベル */
   .kh-hub .section-label {
     font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .5em;
     color: #e8d080; text-transform: uppercase;
     margin-bottom: 40px;
     display: flex; align-items: center; gap: 16px;
   }
   .kh-hub .section-label::before,
   .kh-hub .section-label::after {
     content: ''; flex: 1; height: 1px;
   }
   .kh-hub .section-label::before {
     background: linear-gradient(to right, transparent, rgba(232,208,128,.5));
   }
   .kh-hub .section-label::after {
     background: linear-gradient(to left, transparent, rgba(232,208,128,.5));
   }
   
   /* ── フィーチャー記事 ── */
   .kh-hub .featured-article {
     display: grid; grid-template-columns: 1fr 1fr;
     background: linear-gradient(135deg, #0d1535 0%, #080d1e 100%);
     border: 1px solid rgba(201,168,76,.3); border-radius: 2px;
     overflow: hidden; margin-bottom: 48px;
     position: relative;
     transition: transform .4s, box-shadow .4s;
     cursor: pointer;
     opacity: 0; animation: kh-fadeUp .8s ease forwards .5s;
   }
   .kh-hub .featured-article::before {
     content: ''; position: absolute; inset: -1px;
     background: linear-gradient(135deg, #c9a84c 0%, transparent 50%, #d44a6a 100%);
     z-index: -1; border-radius: 2px; opacity: 0; transition: opacity .4s;
   }
   .kh-hub .featured-article:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
   .kh-hub .featured-article:hover::before { opacity: .6; }
   
   .kh-hub .featured-visual {
     position: relative; background: linear-gradient(160deg, #0e1a40 0%, #060b1a 55%, #160818 100%);
     display: flex; align-items: center; justify-content: center;
     min-height: 320px; overflow: hidden;
   }
   .kh-hub .fv-orbit {
     position: absolute; border-radius: 50%; border: 1px solid;
     top: 50%; left: 50%;
   }
   .kh-hub .fv-orbit-1 {
     width: 240px; height: 240px; border-color: rgba(212,74,106,.25);
     transform: translate(-50%,-50%); animation: kh-orbitSpin 40s linear infinite;
   }
   .kh-hub .fv-orbit-2 {
     width: 170px; height: 170px; border-color: rgba(201,168,76,.3);
     transform: translate(-50%,-50%); animation: kh-orbitSpin 25s linear infinite reverse;
   }
   .kh-hub .fv-orbit-3 {
     width: 100px; height: 100px; border-color: rgba(201,168,76,.5);
     transform: translate(-50%,-50%); animation: kh-orbitSpin 15s linear infinite;
   }
   @keyframes kh-orbitSpin {
     from { transform: translate(-50%,-50%) rotate(0deg); }
     to   { transform: translate(-50%,-50%) rotate(360deg); }
   }
   .kh-hub .fv-orbit::before, .kh-hub .fv-orbit::after {
     content: ''; position: absolute; width: 5px; height: 5px;
     border-radius: 50%; top: -2.5px; left: 50%; transform: translateX(-50%);
   }
   .kh-hub .fv-orbit-1::before { background: rgba(212,74,106,.8); box-shadow: 0 0 6px rgba(212,74,106,1); }
   .kh-hub .fv-orbit-1::after  { background: rgba(201,168,76,.8); box-shadow: 0 0 6px rgba(201,168,76,1); bottom: -2.5px; top: auto; }
   .kh-hub .fv-orbit-2::before { background: rgba(168,184,216,.7); box-shadow: 0 0 5px rgba(168,184,216,1); }
   .kh-hub .fv-glow {
     position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
     width: 120px; height: 120px;
     background: radial-gradient(circle, rgba(201,168,76,.18) 0%, transparent 70%);
     pointer-events: none; z-index: 3;
     animation: kh-breatheGlow 4s ease-in-out infinite;
   }
   @keyframes kh-breatheGlow {
     0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .7; }
     50%     { transform: translate(-50%,-50%) scale(1.5); opacity: 1; }
   }
   .kh-hub .fv-numbers {
     position: relative; z-index: 4;
     display: flex; align-items: baseline; gap: 4px; line-height: 1;
   }
   .kh-hub .fv-num-7 {
     font-family: 'Cinzel', serif; font-weight: 900; font-size: 72px;
     background: linear-gradient(180deg, #f0d080 0%, #c9a84c 60%, rgba(201,168,76,.4) 100%);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
     filter: drop-shadow(0 0 14px rgba(201,168,76,.7));
     animation: kh-breathe 4s ease-in-out infinite;
   }
   .kh-hub .fv-separator {
     font-family: 'Cinzel', serif; font-size: 32px; font-weight: 300;
     color: rgba(168,184,216,.35); padding-bottom: 8px;
   }
   .kh-hub .fv-num-13 {
     font-family: 'Cinzel', serif; font-weight: 900; font-size: 72px;
     background: linear-gradient(180deg, #f0f4ff 0%, #a8b8d8 60%, rgba(168,184,216,.4) 100%);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
     filter: drop-shadow(0 0 14px rgba(168,184,216,.6));
     animation: kh-breathe13 4s ease-in-out infinite .8s;
   }
   @keyframes kh-breathe {
     0%,100% { filter: drop-shadow(0 0 10px rgba(201,168,76,.5)); }
     50%     { filter: drop-shadow(0 0 22px rgba(201,168,76,.9)); }
   }
   @keyframes kh-breathe13 {
     0%,100% { filter: drop-shadow(0 0 10px rgba(168,184,216,.4)); }
     50%     { filter: drop-shadow(0 0 22px rgba(168,184,216,.8)); }
   }
   .kh-hub .fv-caption {
     position: absolute; z-index: 4; bottom: 24px; left: 0; right: 0;
     display: flex; justify-content: center; gap: 32px;
   }
   .kh-hub .fv-cap-item {
     font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .35em;
     text-align: center; text-transform: uppercase;
   }
   .kh-hub .fv-cap-item span { display: block; }
   .kh-hub .cap-num { color: #c9a84c; font-size: 11px; font-weight: 600; margin-bottom: 2px; }
   .kh-hub .cap-lbl { color: rgba(168,184,216,.5); }
   
   .kh-hub .featured-content {
     padding: 48px 40px; display: flex; flex-direction: column; justify-content: center;
   }
   .kh-hub .badge {
     display: inline-flex; align-items: center; gap: 8px;
     font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .3em;
     color: #c9a84c; border: 1px solid rgba(201,168,76,.4); padding: 6px 14px;
     width: fit-content; margin-bottom: 20px;
   }
   .kh-hub .featured-content h2 {
     font-family: 'Cinzel', serif;
     font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 600; line-height: 1.3;
     color: #f0d080; margin-bottom: 16px;
   }
   .kh-hub .featured-content p {
     font-size: 14px; line-height: 1.9; color: #a8b8d8; margin-bottom: 28px;
   }
   .kh-hub .read-more {
     display: inline-flex; align-items: center; gap: 10px;
     font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .25em;
     color: #c9a84c; text-decoration: none; text-transform: uppercase; transition: gap .3s;
   }
   .kh-hub .read-more:hover { gap: 18px; }
   .kh-hub .read-more::after { content: '→'; }
   
   /* ── シリーズカード ── */
   .kh-hub .series-section {
     margin-top: 64px; opacity: 0; animation: kh-fadeUp .8s ease forwards .7s;
   }
   .kh-hub .series-divider {
     margin: 64px 0 32px; position: relative;
     display: flex; align-items: center; justify-content: center;
   }
   .kh-hub .series-divider::before, .kh-hub .series-divider::after {
     content: ''; position: absolute; left: 0; right: 0; height: 1px;
   }
   .kh-hub .series-divider::before {
     top: 0; background: linear-gradient(to right, transparent 0%, rgba(201,168,76,.45) 30%, rgba(201,168,76,.45) 70%, transparent 100%);
   }
   .kh-hub .series-divider::after {
     bottom: 0; background: linear-gradient(to right, transparent 0%, rgba(201,168,76,.2) 30%, rgba(201,168,76,.2) 70%, transparent 100%);
   }
   .kh-hub .sd-inner {
     position: relative; display: flex; align-items: center; gap: 20px;
     padding: 14px 32px;
     background: linear-gradient(135deg, rgba(10,14,30,.95) 0%, rgba(16,12,28,.98) 100%);
     border: 1px solid rgba(201,168,76,.5);
     box-shadow: 0 0 30px rgba(201,168,76,.12), inset 0 0 20px rgba(201,168,76,.04);
   }
   .kh-hub .sd-diamond {
     width: 7px; height: 7px; background: #c9a84c; transform: rotate(45deg);
     box-shadow: 0 0 8px #c9a84c; flex-shrink: 0;
   }
   .kh-hub .sd-arc-num {
     font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .5em;
     color: rgba(201,168,76,.6); text-transform: uppercase;
   }
   .kh-hub .sd-sep { width: 1px; height: 20px; background: rgba(201,168,76,.3); flex-shrink: 0; }
   .kh-hub .sd-title {
     font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600; letter-spacing: .35em;
     color: #f5e090; text-transform: uppercase; text-shadow: 0 0 20px rgba(245,224,144,.4);
   }
   .kh-hub .sd-subtitle {
     font-family: 'Noto Serif JP', serif; font-size: 11px;
     color: rgba(168,184,216,.65); letter-spacing: .1em; font-weight: 300;
   }
   
   .kh-hub .series-card {
     position: relative;
     display: grid; grid-template-columns: 220px 1fr;
     min-height: 180px; margin-bottom: 2px;
     overflow: hidden; cursor: pointer;
     text-decoration: none; color: inherit;
     border: 1px solid var(--c-border);
     background:
       radial-gradient(ellipse at 0% 50%, var(--c-nebula-l) 0%, transparent 55%),
       radial-gradient(ellipse at 100% 20%, var(--c-nebula-r) 0%, transparent 50%),
       radial-gradient(ellipse at 60% 100%, var(--c-nebula-b) 0%, transparent 45%),
       linear-gradient(125deg, var(--c-base-l) 0%, var(--c-base-m) 50%, var(--c-base-r) 100%);
     transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
   }
   .kh-hub .series-card:hover {
     transform: translateX(8px); box-shadow: -8px 0 40px var(--c-shadow); z-index: 2;
   }
   .kh-hub .series-card::before {
     content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
     background: var(--c-accent); box-shadow: 0 0 20px 3px var(--c-accent);
     transition: width .3s, box-shadow .3s;
   }
   .kh-hub .series-card:hover::before { width: 6px; box-shadow: 0 0 40px 8px var(--c-accent); }
   .kh-hub .series-card::after {
     content: ''; position: absolute; inset: 0; pointer-events: none;
     background: radial-gradient(ellipse at 15% 50%, var(--c-glow) 0%, transparent 65%);
     opacity: .5; transition: opacity .4s;
   }
   .kh-hub .series-card:hover::after { opacity: .8; }
   
   .kh-hub .sc-visual {
     position: relative; display: flex; align-items: center; justify-content: center;
     overflow: hidden; z-index: 1; padding: 24px;
   }
   .kh-hub .sc-number {
     position: absolute; font-family: 'Cinzel', serif;
     font-size: 160px; font-weight: 900; line-height: 1;
     color: transparent; -webkit-text-stroke: 1px var(--c-accent);
     opacity: .08; right: -20px; bottom: -30px; user-select: none;
     transition: opacity .4s, transform .5s;
   }
   .kh-hub .series-card:hover .sc-number { opacity: .18; transform: scale(1.05) translateY(-6px); }
   .kh-hub .sc-crystal {
     position: relative; z-index: 2;
     width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
   }
   .kh-hub .sc-crystal::before {
     content: ''; position: absolute; width: 44px; height: 44px;
     border: 1px solid var(--c-accent); transform: rotate(45deg);
     box-shadow: 0 0 12px var(--c-accent), inset 0 0 12px rgba(0,0,0,.3);
     transition: box-shadow .4s, transform .4s;
   }
   .kh-hub .series-card:hover .sc-crystal::before {
     box-shadow: 0 0 28px var(--c-accent), 0 0 50px var(--c-glow), inset 0 0 12px rgba(0,0,0,.2);
     transform: rotate(45deg) scale(1.1);
   }
   .kh-hub .sc-crystal::after {
     content: ''; position: absolute; width: 30px; height: 30px;
     border: 1px solid rgba(255,255,255,.15); transform: rotate(22deg);
   }
   .kh-hub .sc-order-num {
     font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600;
     color: var(--c-accent); text-shadow: 0 0 10px var(--c-accent);
     position: relative; z-index: 1; letter-spacing: .05em;
   }
   .kh-hub .sc-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
   .kh-hub .sc-particles span {
     position: absolute; border-radius: 50%; opacity: 0;
     animation: kh-particleFloat var(--pd,6s) ease-in-out infinite var(--pdelay,0s);
   }
   @keyframes kh-particleFloat {
     0%   { opacity: 0; transform: translateY(0) scale(.5); }
     30%  { opacity: .7; }
     100% { opacity: 0; transform: translateY(-90px) scale(2); }
   }
   .kh-hub .sc-content {
     padding: 28px 32px; display: flex; flex-direction: column; justify-content: center;
     z-index: 1; position: relative;
   }
   .kh-hub .sc-order {
     font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .4em;
     color: var(--c-accent); opacity: .9; margin-bottom: 8px;
     text-transform: uppercase; display: flex; align-items: center; gap: 10px;
   }
   .kh-hub .sc-order::after { content: ''; width: 40px; height: 1px; background: var(--c-accent); opacity: .4; }
   .kh-hub .sc-title {
     font-family: 'Cinzel', serif; font-size: clamp(.95rem,1.7vw,1.3rem);
     font-weight: 600; color: #eef4ff; line-height: 1.35; margin-bottom: 8px;
   }
   .kh-hub .sc-sub {
     font-family: 'Noto Serif JP', serif; font-size: 13px; font-weight: 300;
     color: #a8b8d8; opacity: .8; line-height: 1.7; margin-bottom: 14px;
   }
   .kh-hub .sc-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
   .kh-hub .sc-year { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .2em; color: rgba(200,220,255,.55); }
   .kh-hub .sc-platform-tag {
     font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .18em;
     color: var(--c-accent); border: 1px solid var(--c-accent); padding: 3px 10px;
     opacity: .85; transition: opacity .3s, box-shadow .3s;
   }
   .kh-hub .series-card:hover .sc-platform-tag { opacity: 1; box-shadow: 0 0 8px var(--c-glow); }
   
   .kh-hub .sc-connector {
     display: flex; justify-content: center; align-items: center;
     height: 24px; position: relative;
   }
   .kh-hub .sc-connector::before {
     content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
     background: linear-gradient(to bottom, var(--c-from), var(--c-to)); opacity: .45;
   }
   .kh-hub .sc-connector-dot {
     width: 5px; height: 5px; border-radius: 50%;
     background: rgba(168,184,216,.35); position: relative; z-index: 1;
   }
   
   /* ── アニメーション共通 ── */
   @keyframes kh-fadeUp {
     from { opacity: 0; transform: translateY(24px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* ── レスポンシブ ── */
   @media (max-width: 768px) {
     .kh-hub .featured-article { grid-template-columns: 1fr; }
     .kh-hub .featured-visual  { min-height: 220px; }
     .kh-hub .series-card      { grid-template-columns: 80px 1fr; }
     .kh-hub .sc-number        { font-size: 90px; }
     .kh-hub .sc-content       { padding: 18px 14px; }
     .kh-hub .sc-title         { font-size: .9rem; }
     .kh-hub .sc-sub           { font-size: 12px; }
   }