/*!
 * JAM'S FANDOM — 茶番と共犯 -ミセスのいま-（005・006・007・009）
 * docs/design/kyohan-mock.html v1 の移植。勢力図は 012 で docs/design/kyohan-push-mock.html v3（押し問答）に。
 * すべて .jfk の中だけに効かせる（ヘッダー・フッターは SWELL のまま）。
 * 方針: 塗り（インク）で統一。角丸カード・薄い枠線は使わない。面は「塗りの形」で分ける。
 * 時間帯（朝・昼・夕・夜）は data-scene で切り替える（stage.js の SCENES と対）。
 */

/* ---- ルート（全幅・SWELL の本文の外へ出す） ---- */
div.jfk.jfk{
  --pos:#F2B233; --pos-deep:#E89B1E; --pos-light:#FFE9A8; --pos-ink:#1A1206; --pos-hi:#FFF2C4;
  --neg:#3B8FE0; --neg-deep:#1F6FC2; --neg-light:#BFE0FF; --neg-hi:#DCEEFF;
  --meta:#E8503F; --meta-deep:#C23A2B; --meta-light:#FFB8AE; --meta-hi:#FFD9D3;
  --paper:#FFFDF8; --map-bg:#F2E9D8; --soft:#F4F3EF; --ink:#1A1A1F; --mute:#6B6F7A;
  --jf-vw:100vw;
  position:relative;display:block;
  width:var(--jf-vw);max-width:none;
  margin:0 calc(50% - var(--jf-vw) / 2);padding:0;
  background:var(--paper);color:var(--ink);
  font-family:'M PLUS Rounded 1c',system-ui,-apple-system,'Hiragino Maru Gothic ProN',sans-serif;font-weight:500;font-size:16px;
  line-height:1.7;text-align:left;letter-spacing:normal;
  overflow:hidden;-webkit-font-smoothing:antialiased;
  transition:background-color .8s ease;
}
/* 時間帯（下地と塗りの明暗）。勢力図は canvas が全面を塗る（--map-bg は描く前と JS が無い時だけ見える） */
div.jfk.jfk[data-scene="morning"]{ --paper:#FFFDF8; --map-bg:#F7F0E2; --pos-light:#FFF4D2; --neg-light:#DDEEFF; --meta-light:#FFD6CF }
div.jfk.jfk[data-scene="evening"]{ --paper:#FFF6EC; --map-bg:#F0DEC6; --soft:#F3EADF }
div.jfk.jfk[data-scene="night"]{ --paper:#F2F1F6; --map-bg:#DCD8E4; --soft:#E8E7EF; --pos-deep:#C97F0E; --neg-deep:#164F94; --meta-deep:#9E2A1D }

.jf-stage-page{overflow-x:hidden}
@supports (overflow:clip){.jf-stage-page{overflow-x:clip}}
/* ページ自身の見出し（h1）を持つので、SWELL のページタイトルは出さない（h1 の重複を避ける） */
.jf-stage-page .c-pageTitle,.jf-stage-page .l-topTitleArea{display:none}
/* 本文を全幅にするので SWELL のサイドバーは出さない（PHP の swell_is_show_sidebar で止め、念のため CSS でも隠す） */
.jf-stage-page #sidebar,.jf-stage-page .l-content > .l-sidebar{display:none!important}
/* 009 §7: TOP 用のピックアップバナーと記事スライダーは出さない（テンプレートの <main> 直後のスクリプトで DOM からも外す）。
   サイトのヘッダー・ヘッダーメニュー・スマホ固定フッターは残す。緑のヘッダーを SWELL のヘッダーの直後に置く */
.jf-stage-page #pickup_banner,.jf-stage-page #post_slider,.jf-stage-page .p-pickupBanners,.jf-stage-page .p-postSlider{display:none!important}
.jf-stage-page #content,.jf-stage-page .l-content{padding-top:0!important;margin-top:0!important}

/* ---- SWELL の本文の装飾を打ち消す ---- */
.jfk *,.jfk *::before,.jfk *::after{box-sizing:border-box}
.jfk.jfk h1,.jfk.jfk h2,.jfk.jfk h3,.jfk.jfk p{margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit}
.jfk.jfk h1::before,.jfk.jfk h1::after,.jfk.jfk h2::before,.jfk.jfk h2::after,.jfk.jfk h3::before,.jfk.jfk h3::after{content:none;display:none}
.jfk.jfk a{color:inherit;text-decoration:none;box-shadow:none;border:0}
.jfk.jfk svg,.jfk.jfk canvas{max-width:none;max-height:none}
.jfk .dela{font-family:'Dela Gothic One',sans-serif;font-weight:400}
.jfk .wrap{max-width:720px;margin:0 auto}

/* ---- 共通: スクロールで現れる ---- */
.jfk .rv{opacity:0;transform:translateY(24px) scale(.96);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.jfk .rv.in{opacity:1;transform:none}
.jfk .rv-splash{opacity:0;transform:scale(.55) rotate(-6deg);transition:opacity .35s ease-out,transform .7s cubic-bezier(.17,1.4,.4,1)}
.jfk .rv-splash.in{opacity:1;transform:none}
.jfk .d1{transition-delay:.08s}.jfk .d2{transition-delay:.16s}.jfk .d3{transition-delay:.24s}

/* ---- SVG の色（属性に var() を書かず、クラスで塗る） ---- */
.jfk .s-pl{stop-color:var(--pos-light)}.jfk .s-p{stop-color:var(--pos)}.jfk .s-pd{stop-color:var(--pos-deep)}
.jfk .s-nl{stop-color:var(--neg-light)}.jfk .s-n{stop-color:var(--neg)}.jfk .s-nd{stop-color:var(--neg-deep)}
.jfk .s-ml{stop-color:var(--meta-light)}.jfk .s-m{stop-color:var(--meta)}.jfk .s-md{stop-color:var(--meta-deep)}
.jfk .f-p{fill:var(--pos)}.jfk .f-pd{fill:var(--pos-deep)}.jfk .f-phi{fill:var(--pos-hi)}
.jfk .f-n{fill:var(--neg)}.jfk .f-nhi{fill:var(--neg-hi)}
.jfk .f-m{fill:var(--meta)}.jfk .f-mhi{fill:var(--meta-hi)}
.jfk .f-ink{fill:var(--ink)}.jfk .f-soft{fill:var(--soft);transition:fill .8s}
.jfk .st-p,.jfk .st-n,.jfk .st-m{stroke-width:2.5;stroke-linecap:round;fill:none}
.jfk .st-p{stroke:var(--pos)}.jfk .st-n{stroke:var(--neg)}.jfk .st-m{stroke:var(--meta)}
.jfk .b-pos{background:var(--pos)}.jfk .b-neg{background:var(--neg)}.jfk .b-meta{background:var(--meta)}

/* ---- ヘッダー（007: ミセスのグリーン。正解は docs/design/kyohan-header-mock.html v1） ----
   色は schedule.css の --green 系と同じ値。時間帯（data-scene）では変えない。 */
.jfk .head{
  --h-green:#002928; --h-green-2:#005e3c; --h-lime:#e2ff91; --h-lime-2:#a7da20; --h-lime-soft:#f2fbcf;
  position:relative;background:var(--h-green);color:#fff;padding:16px 20px 14px;overflow:hidden;isolation:isolate;
  /* 013: 右側も使って高さを低く。左＝タイトル（2行ぶん）、右上＝更新時刻、右下＝Created by */
  display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-items:center
}
.jfk .head .stamp{grid-column:2;grid-row:1;justify-self:end;align-self:start;white-space:nowrap;font-size:10px;letter-spacing:.04em;padding:3px 8px}
.jfk .head .ttl{grid-column:1;grid-row:1 / span 2}
.jfk.jfk .head .by{grid-column:2;grid-row:2;justify-self:end;align-self:end;text-align:right;white-space:nowrap;font-size:10px;letter-spacing:.02em;line-height:1.35}
.jfk.jfk .head .by b{display:block;font-size:12px}
@media (max-width:480px){.jfk .head .stamp .st-x{display:none}}
/* 塗り（009 §3）: ライムと黄緑の塊が混ざり合う（stage.js の Ink。blur ＋ multiply）。.hink の中だけで混ぜる（isolation）。
   JS が無い時は radial-gradient の2つの塊を出す */
.jfk .head .hink{position:absolute;inset:0;z-index:0;pointer-events:none;isolation:isolate;transform-origin:80% 20%;
  background:radial-gradient(circle at calc(100% - 40px) 40px,var(--h-lime) 0,var(--h-lime) 85px,rgba(226,255,145,0) 110px),
             radial-gradient(circle at calc(100% + 5px) calc(100% + 50px),var(--h-lime-2) 0,var(--h-lime-2) 70px,rgba(167,218,32,0) 95px)}
.jfk .head .hink.ink-on{background:none}
/* 入場: 右上から塗りが広がる（1回だけ）。JS が読めなかった時は 3 秒後に出す */
.jfk .head.enter .hink{animation:jfk-hfallback .01s 3s forwards;transform:scale(0);transition:transform 1.1s cubic-bezier(.17,1.2,.4,1)}
.jfk .head.enter.go .hink{animation:none;transform:scale(1)}
@keyframes jfk-hfallback{to{transform:scale(1)}}
.jfk .head canvas.hsparks{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.jfk .head .stamp{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1.7;background:var(--h-lime);color:var(--h-green);padding:4px 10px;transform:rotate(-2deg);position:relative;z-index:1}
.jfk .head .ttl{display:flex;flex-direction:column;align-items:flex-end;width:-moz-fit-content;width:fit-content;max-width:100%;margin-top:0;position:relative;z-index:1}
/* 013: H1 は .ttl そのもの（「茶番と共犯 -ミセスのいま-」）。大きい文字は .t1、副題は .sub（見た目は 012 までの h1＋副題と同じ） */
.jfk.jfk .head .ttl .t1{display:block;margin:0;font-size:34px;line-height:1.25;letter-spacing:.02em;white-space:nowrap;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.jfk .head .sub{display:inline-block;margin-top:4px;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1.7;background:var(--h-lime);color:var(--h-green);padding:4px 10px;transform:rotate(-2deg)}
.jfk.jfk .head .by{margin:0;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.06em;color:var(--h-lime-2);position:relative;z-index:1;background:rgba(0,41,40,.82);padding:3px 8px}
.jfk .head .by b{font-family:'Dela Gothic One',sans-serif;font-weight:400;color:var(--h-lime)}
.jfk .foot b.dela{font-weight:400;color:var(--ink)}

/* ---- 016: 何のページかと 3 つの声の意味（緑の見出しのすぐ下・白い面）。線で囲わず、3 つの声は薄い地で分ける ---- */
.jfk .intro{background:#fff;padding:16px 20px 18px}
.jfk.jfk .intro .intro-t{margin:0;font-size:15px;font-weight:500;line-height:1.8;color:var(--ink)}
.jfk.jfk .intro .voices{display:grid;grid-template-columns:1fr;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.jfk.jfk .intro .voices li{display:flex;align-items:baseline;flex-wrap:nowrap;gap:2px 8px;margin:0;padding:8px 12px;background:var(--soft);font-size:14px;line-height:1.6;list-style:none}
.jfk .intro .voices li::marker{content:none}
.jfk .intro .v-dot{flex:none;align-self:center;width:8px;height:8px;border-radius:50%}
.jfk .intro .v-pos .v-dot{background:var(--pos)}.jfk .intro .v-neg .v-dot{background:var(--neg)}.jfk .intro .v-meta .v-dot{background:var(--meta)}
.jfk .intro .v-n{flex:none;font-weight:800}
.jfk .intro .v-pos .v-n{color:#8A5A00}.jfk .intro .v-neg .v-n{color:#1A5DA3}.jfk .intro .v-meta .v-n{color:#A8301F}
.jfk .intro .v-d{flex:1;min-width:0;font-weight:700;color:#2A2D36}
/* PC は 3 つ横並び。名前の下に説明（丸は名前の行の高さに合わせる） */
@media (min-width:600px){
  .jfk.jfk .intro .voices{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jfk.jfk .intro .voices li{flex-wrap:wrap;padding:10px 14px}
  .jfk .intro .v-d{flex-basis:100%;padding-left:16px}
}
.jfk .intro + .topicbar{padding-top:6px}

/* ---- 話題の切り替え（010）: ヘッダーと勢力図の間の白い帯。名前（Dela）を押すと「他の話題」が開く ---- */
.jfk .topicbar{position:relative;z-index:5;background:#fff;padding:14px 20px}
.jfk .topicbar + .map{margin-top:0}
.jfk.jfk .topicbar .tb-h{margin:0;font-size:22px;line-height:1.35}
.jfk.jfk .topicbar .tb-name{font-size:22px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.jfk .topicbar .tb-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.jfk .topicbar .tb-caret{flex:none;font-size:14px;line-height:1;color:var(--ink);transition:transform .2s}
.jfk .topicbar.is-open .tb-caret{transform:rotate(180deg)}
.jfk .topicbar .tb-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* 一覧: 帯の直下にかぶさって開く（白地・影なし・面で区切る） */
.jfk .topicbar .tb-pop{position:absolute;left:0;right:0;top:100%;background:#fff;padding:2px 0 10px;max-height:min(60vh,420px);overflow:auto;overscroll-behavior:contain}
.jfk .topicbar .tb-pop[hidden]{display:none}
.jfk.jfk .topicbar .tb-k{margin:0;padding:4px 20px 6px;font-size:11px;font-weight:800;line-height:1.7;letter-spacing:.14em;color:var(--mute)}
.jfk.jfk .topicbar .tb-list{list-style:none;margin:0;padding:0;outline:none}
.jfk.jfk .topicbar .tb-opt{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;padding:6px 20px;cursor:pointer;list-style:none}
.jfk .topicbar .tb-opt::before,.jfk .topicbar .tb-opt::marker{content:none}
.jfk .topicbar .tb-opt.is-active{background:var(--soft)}
.jfk .topicbar .tb-list:focus-visible .tb-opt.is-active{background:#E6E4DC}
.jfk .topicbar .tb-bar{display:flex;flex:none;width:44px;height:8px;overflow:hidden;background:#E3E2DD}
.jfk .topicbar .tb-bar i{display:block;height:100%}
.jfk .topicbar .tb-on{flex:1;min-width:0;font-size:15px;font-weight:800;line-height:1.4;color:var(--ink)}
.jfk .topicbar .tb-mv{flex:none;font-size:11px;font-weight:800;line-height:1.7}
.jfk .topicbar .tb-pos{color:#8A5A00}.jfk .topicbar .tb-neg{color:#1A5DA3}.jfk .topicbar .tb-meta{color:#A8301F}
.jfk .topicbar .tb-opt.is-closed{opacity:.55}

/* ---- 勢力図（ヒーロー）: 押し問答 v3（docs/design/kyohan-push-mock.html）。3色は混ぜない ---- */
/* 015: 全幅 16:9 で固定（スマホも PC も同じ構図・クスシキの MV のサムネと同じ）。0.9.1 の正方形と高さの上限は外した */
.jfk .map{position:relative;margin-top:16px;width:100%;aspect-ratio:16 / 9;height:auto;background:var(--map-bg);overflow:hidden;isolation:isolate;transition:background-color .8s ease}
.jfk .map.ink-on{background-image:none!important}
/* 押し問答（stage.js の Push が作る）: 格子の色の canvas と、キラキラの canvas */
.jfk.jfk .map .push-field,.jfk.jfk .map .push-glit{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.jfk.jfk .map .push-field{image-rendering:auto}
/* ヘッダーの絵の具（009 §3。ヘッダーだけ）: 色ごとの canvas を blur して multiply で重ねる */
.jfk .ink-layers{position:absolute;pointer-events:none}
.jfk.jfk .ink-layers canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;pointer-events:none}
.jfk .ink-layers .ink-l{mix-blend-mode:multiply}
.jfk .map .cnt{position:absolute;left:12px;bottom:10px;font-size:11px;font-weight:800;line-height:1.7;color:#4B4F59;background:rgba(255,255,255,.8);padding:3px 8px;z-index:3}
/* 数字はカウントアップの前に一瞬見えないように（JS が読めない時は 3 秒後に出す） */
.jfk.js-pre .map .camp .pct{opacity:0;animation:jfk-show .01s 3s forwards}
@keyframes jfk-show{to{opacity:1}}

/* 勢力ボタン: 押すと該当の章へ。肯定は濃い文字＋白の影、批判・俯瞰は白文字＋黒の影（モック v2） */
.jfk .camp{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 12px;min-width:44px;min-height:44px;transition:transform .2s,opacity .45s ease-out;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.22)}
.jfk a.camp:active{transform:scale(.94)}
.jfk .camp .pct{font-size:clamp(30px,8vw,64px);line-height:1;letter-spacing:-.02em}
.jfk .camp .nm{font-size:13px;font-weight:800;letter-spacing:.2em;line-height:1.7;margin-top:2px}
/* 015: 肯定=左上・批判=右上・俯瞰=真ん中（クスシキの構図）。数字の大きさは 3 つとも同じ */
.jfk .camp.pos{left:4%;top:8%;align-items:flex-start;color:#1A1206;text-shadow:0 2px 0 rgba(255,255,255,.3)}
.jfk .camp.neg{right:4%;top:8%;color:#fff;align-items:flex-end}
.jfk .camp.meta{left:50%;top:66%;transform:translate(-50%,-50%);color:#fff}
.jfk a.camp.meta:active{transform:translate(-50%,-50%) scale(.94)}
.jfk a.camp .nm::after{content:" ↓";font-size:11px}
.jfk a.camp:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* 準備中: 押し問答を灰色の濃淡に（キラキラ無し） */
.jfk .map.is-grey{background-color:#F4F3EF}
.jfk .map.is-grey .camp{color:#8C8C88;text-shadow:none}
.jfk .prep{padding:22px 20px 0}
.jfk.jfk .prep .dela{font-size:20px;line-height:1.4}
.jfk.jfk .prep p + p{margin-top:8px;font-size:13px;font-weight:700;color:#4B4F59}

/* ---- 比率バー ---- */
.jfk .ratio{padding:14px 20px 0}
.jfk .ratio .bar{display:flex;height:14px;overflow:hidden;clip-path:polygon(0 20%,100% 0,100% 80%,0 100%)}
.jfk .ratio .bar i,.jfk .vsbar i{display:block;height:100%;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.jfk .legend{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:800;line-height:1.7;color:var(--mute);margin-top:6px}

/* ---- 章の見出し（塗りのラベル） ---- */
.jfk .sec{padding:34px 20px 0}
.jfk.jfk .h2{position:relative;display:inline-block;font-size:20px;line-height:1.2;padding:8px 16px 10px;margin:0;color:#fff;isolation:isolate}
.jfk .h2 svg{position:absolute;inset:-8px -14px;width:calc(100% + 28px);height:calc(100% + 16px);z-index:-1}
.jfk .h2 small{display:block;font-family:'M PLUS Rounded 1c',sans-serif;font-weight:800;font-size:11px;letter-spacing:.1em;line-height:1.5;opacity:.9}

/* ---- X で話されていること（016 まで「今の話題」）: 塗りの塊の上に載せる ---- */
.jfk .topic{position:relative;margin-top:16px;padding:22px 20px 24px;isolation:isolate}
.jfk .topic .blob{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.jfk.jfk .topic .ttl{font-size:19px;line-height:1.45;margin:0}
.jfk.jfk .topic p{margin:10px 0 0;font-size:14px;color:#2A2D36}
.jfk .topic .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.jfk .topic .tags span{font-size:11px;font-weight:800;line-height:1.7;background:var(--ink);color:#fff;padding:5px 10px;transform:rotate(-1.5deg)}
.jfk .topic .tags span:nth-child(2n){transform:rotate(1.2deg)}
.jfk.jfk .topic .stale{margin-top:10px;font-size:11px;font-weight:700;color:var(--mute)}

/* ---- 3つの陣営: 全幅の塗り帯 ---- */
.jfk .band{position:relative;margin-top:28px;padding:28px 20px 30px;overflow:hidden;color:var(--ink);scroll-margin-top:72px}
.jfk .band.pos{background:var(--pos)}
.jfk .band.neg{background:var(--neg);color:#fff}
.jfk .band.meta{background:var(--meta);color:#fff}
.jfk .band .wm{position:absolute;right:-6px;top:-18px;font-size:120px;line-height:1;opacity:.18;pointer-events:none;letter-spacing:-.04em}
.jfk .band .lbl{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.2em;line-height:1.7;background:rgba(0,0,0,.18);padding:4px 10px}
.jfk .band.pos .lbl{background:rgba(26,18,6,.18)}
.jfk.jfk .band h3{font-size:24px;margin:10px 0 0;line-height:1.3;position:relative}
/* 吹き出し: 塗りの飛沫の形 */
.jfk .say{position:relative;margin-top:16px;padding:16px 18px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;line-height:1.75;clip-path:polygon(2% 6%,98% 0,100% 90%,88% 96%,86% 100%,80% 95%,3% 100%,0 60%)}
.jfk .band.pos .say{background:#FFF8E6}
.jfk .band .note{margin-top:10px;font-size:11px;font-weight:700;line-height:1.7;opacity:.85}
/* 意見の要点（012）: 言い換えの吹き出しの下に箇条書き。白い帯・左に陣営色の小さな四角。肯定は 15px、批判・俯瞰は 14px */
.jfk.jfk .band .points{position:relative;list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.jfk.jfk .band .points li{position:relative;margin:0;padding:10px 14px 10px 32px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;line-height:1.65;list-style:none}
.jfk .band .points li::marker{content:none}
.jfk .band .points li::before{content:"";position:absolute;left:14px;top:calc(10px + .55em);width:8px;height:8px}
.jfk.jfk .band.pos .points li{font-size:15px}
.jfk .band.pos .points li::before{background:var(--pos)}
.jfk .band.neg .points li::before{background:var(--neg)}
.jfk .band.meta .points li::before{background:var(--meta)}

/* ---- 関連ニュース（016 まで「ニュース VS」） ---- */
.jfk .vs{position:relative;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:0;isolation:isolate}
.jfk .vs .side{padding:18px 14px 20px;min-height:170px;display:flex;flex-direction:column;gap:8px}
.jfk .vs .side.l{background:var(--pos-light);clip-path:polygon(0 0,100% 0,88% 100%,0 100%);padding-right:22px}
.jfk .vs .side.r{background:var(--neg-light);clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);text-align:right;align-items:flex-end;padding-left:22px}
.jfk .vs .k{font-size:11px;font-weight:800;letter-spacing:.14em;line-height:1.7}
.jfk .vs .side.l .k{color:#8A5A00}.jfk .vs .side.r .k{color:#1A5DA3}
.jfk .vs .hd{font-size:14px;line-height:1.5}
.jfk .vs .src{font-size:11px;font-weight:700;line-height:1.7;color:var(--mute);margin-top:auto}
.jfk .vs .badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;z-index:2}
.jfk .vs .badge svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.jfk .vs .badge.bump{animation:jfk-bump .4s cubic-bezier(.2,.8,.2,1)}
@keyframes jfk-bump{0%,100%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}45%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.25)}}
/* 両側から同時に伸びて、境目でぶつかる */
.jfk .vsbar{margin-top:10px;display:flex;justify-content:space-between;height:16px;clip-path:polygon(0 0,100% 20%,100% 100%,0 80%)}
.jfk .vsbar.is-empty i{opacity:.35}


.jfk .foot{padding:20px 20px 40px;font-size:11px;color:var(--mute);line-height:1.7}
.jfk.jfk .back{padding:26px 20px 0;font-size:13px;font-weight:800}
.jfk.jfk .back a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.jfk .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 013: パンくず・関連する記事・ほかの話題（説明の文は 016 で上の .intro へ） ---- */
.jfk .crumbs{padding:18px 20px 0;font-size:11px;font-weight:700;line-height:1.7;color:var(--mute)}
.jfk .crumbs ol{display:flex;flex-wrap:wrap;gap:2px 0;margin:0;padding:0;list-style:none}
.jfk .crumbs li{margin:0;padding:0;list-style:none}
.jfk .crumbs li+li::before{content:"›";margin:0 .5em;color:var(--mute)}
.jfk .crumbs a{color:var(--mute);text-decoration:underline;text-underline-offset:2px}
/* SWELL のパンくずがフッター側に出ている時は自前のものを隠す（ヘッダー側に出ている時は PHP で出さない） */
body:has(.p-breadcrumb) .jfk .crumbs{display:none}
.jfk .rel-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 0;padding:0;list-style:none}
@media (min-width:720px){.jfk .rel-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.jfk .rel-list li{margin:0;padding:0;list-style:none}
.jfk.jfk .rel-card{display:flex;flex-direction:column;height:100%;background:#fff;color:var(--ink);text-decoration:none}
.jfk .rel-img{display:block;aspect-ratio:16 / 9;overflow:hidden;background:var(--soft)}
.jfk .rel-img img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.jfk .rel-none{display:block;width:100%;height:100%;background:var(--soft)}
.jfk .rel-t{display:block;padding:10px 12px 12px;font-size:13px;font-weight:800;line-height:1.55;overflow-wrap:anywhere}
.jfk.jfk .rel-card:hover .rel-t{text-decoration:underline}
.jfk.jfk .rel-card:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.jfk .oth-list{margin:18px 0 0;padding:0;list-style:none}
.jfk .oth-list li{margin:0 0 8px;padding:0;list-style:none}
.jfk.jfk .oth{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:56px;padding:10px 14px;background:#fff;color:var(--ink);text-decoration:none}
.jfk .oth .tb-bar{display:flex;flex:none;width:44px;height:8px;overflow:hidden;background:#E3E2DD}
.jfk .oth .tb-bar i{display:block;height:100%}
.jfk .oth-n{flex:1;min-width:0;font-size:15px;font-weight:800;line-height:1.4}
.jfk .oth-p{flex-basis:100%;padding-left:56px;font-size:11px;font-weight:700;line-height:1.6;color:var(--mute)}
.jfk.jfk .oth:hover .oth-n{text-decoration:underline}
.jfk.jfk .oth:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ---- 話題を選ぶ（/chaban/）: kyohan-topics-mock.html v1 ---- */
.jfk.is-list .rv-splash{transition-delay:var(--d,0s)}
.jfk.is-list .pick{padding:18px 20px 0}
.jfk.is-list .pick .k{display:inline-block;font-size:12px;letter-spacing:.14em;line-height:1.7;background:var(--ink);color:#fff;padding:6px 14px;transform:rotate(1deg)}
.jfk.is-list .topic{position:relative;display:flex;gap:14px;align-items:center;margin:16px 20px 0;padding:18px 16px 18px 14px;isolation:isolate;min-height:120px;color:var(--ink)}
.jfk.is-list .topic .blob{position:absolute;inset:-6px -8px;width:calc(100% + 16px);height:calc(100% + 12px);z-index:-1}
.jfk .bl-pos{fill:var(--pos-light)}.jfk .bl-neg{fill:var(--neg-light)}.jfk .bl-meta{fill:var(--meta-light)}
.jfk .bl-all{fill:var(--ink)}.jfk .bl-closed{fill:#EDECE6}
.jfk.is-list .topic .mini{width:92px;height:92px;flex-shrink:0;background:#F4F3EF;overflow:hidden;clip-path:polygon(6% 0,100% 4%,96% 100%,0 92%)}
.jfk.is-list .topic .mini svg{width:100%;height:100%;display:block}
.jfk .f-g1{fill:#D9D8D3}.jfk .f-g2{fill:#CFCEC8}.jfk .f-g3{fill:#E3E2DD}
.jfk.is-list .topic .body{flex:1;min-width:0;padding-bottom:18px}
.jfk.jfk.is-list .topic .name{font-size:19px;line-height:1.35;margin:0}
.jfk.is-list .topic .nums{display:flex;gap:10px;margin-top:6px;font-size:12px;font-weight:800;line-height:1.7}
.jfk.is-list .topic .nums b{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:18px;margin-right:2px}
.jfk.is-list .topic .nums .p{color:#8A5A00}.jfk.is-list .topic .nums .n{color:#1A5DA3}.jfk.is-list .topic .nums .m{color:#A8301F}
.jfk.is-list .topic .meta{margin-top:4px;font-size:11px;font-weight:700;line-height:1.7;color:var(--mute)}
.jfk.is-list .topic .go{position:absolute;right:14px;bottom:12px;font-size:11px;font-weight:800;line-height:1.7;color:var(--ink);background:#fff;padding:3px 9px;transform:rotate(-2deg)}
/* 勢いの印: 前日比が大きい話題に「急上昇」 */
.jfk.is-list .topic .hot{position:absolute;left:-4px;top:-10px;font-size:11px;font-weight:800;line-height:1.7;background:var(--meta);color:#fff;padding:3px 9px;transform:rotate(-6deg);z-index:1}
/* 全体（まとめ） */
.jfk.is-list .topic.all{color:#fff}
.jfk.is-list .topic.all .meta{color:#C9CCD4}.jfk.is-list .topic.all .nums .p{color:var(--pos)}.jfk.is-list .topic.all .nums .n{color:var(--neg-light)}.jfk.is-list .topic.all .nums .m{color:var(--meta-light)}
/* 終わった話題は薄く */
.jfk.is-list .topic.closed.in{opacity:.6}
.jfk.is-list .topic:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.jfk.is-list .foot{padding:26px 20px 40px}

/* 動きを減らす設定: 絵の具は1枚描いて止める（JS）。ラメ・チリ・点滅・伸びを止め、最終状態を出す */
@media (prefers-reduced-motion:reduce){
  .jfk .rv,.jfk .rv-splash{opacity:1;transform:none;transition:none}
  .jfk .ratio .bar i,.jfk .vsbar i{transition:none}
  .jfk .vs .badge{animation:none!important}
  .jfk .topicbar .tb-caret{transition:none}
  .jfk.jfk .map .push-glit{display:none}
  .jfk .head .hink{animation:none!important;transform:none!important;transition:none!important}
  .jfk .head canvas.hsparks{display:none}
  .jfk.js-pre .map .camp .pct{opacity:1;animation:none}
  .jfk.is-list .topic.closed{opacity:.6}
}