/* 猫の釣り図鑑（案C）本実装 CSS。モック mock.css (R3) の移植。
 *
 * 読み込み: functions.php → inc/zukan.php が既存の子テーマ CSS (child_style・nk-anspress-compat 等) の後に enqueue する。
 * DOM: すべて PHP が出す (inc/zukan.php・anspress/*.php・parts/page_head.php)。JS 前提のセレクタは無い
 *      (assets/js/nk-zukan.js はゲージの変数と固定広告の下余白だけ)。
 * body クラス: .nk-zk (全ページ)・.nk-zk--top (トップ 1 ページ目)・.nk-zk--q (質問の単体ページ)。
 *
 * !important の方針 (モック 147 → 本実装は下の「残置」だけ):
 *   - 自分が出した要素・SWELL の素の CSS には使わない。特異性 (body 接頭辞・ID) で勝つ。
 *   - 残すのは次の 3 種。各所に「!:」で理由を書いた。
 *       (a) ウィジェット (DB の custom_html) のインライン style・<style> の ID セレクタに勝つ必要がある箇所 (#clf-pop 等の枠)
 *       (b) SWELL 追加CSS の :is(.post_content) h2 装飾・AnsPress の #anspress h2 に勝つ箇所 (一覧の題名・回答見出し)
 *       (c) 追記の見出し段落のインライン font-size
 *   - ステージングで効かない所が出たら、その規則だけ !important を戻す (他は触らない)。
 *
 * フォント: 見出し・ラベル・固定の数字だけ Klee One (--f-note)。DB 由来の可変テキスト
 *   (質問題名・ウィジェット見出し・人気質問・道具名・追記の見出し・CTA 見出し・目次タイルの題名) は Noto Sans JP の太字 (--f-bold)。
 *   Klee One のサブセットは固定ラベルだけ (inc/zukan.php nekoriku_zk_klee_labels())。content:"…" を足したらそちらにも足す。
 */

:root{
  --c-ink:#0a3a52; --c-navy:#0e5a7a; --c-amber:#e8912d; --c-amberd:#a85d06; --c-amberdark:#2b1700;
  --c-paper:#f4f9f8; --c-line:#cfe0e6; --c-muted:#5b7280; --c-grid:rgba(14,90,122,.075);
  --f-note:"Klee One","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-base:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-bold:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --sh:4px 4px 0 rgba(10,58,82,.16);
  --nk-p:0; --nk-sticky-h:0px;
}

/* ===== 土台：方眼紙 ===== */
html body{
  font-family:var(--f-base); color:#1c2f3b;
  background-color:var(--c-paper);
  background-image:linear-gradient(var(--c-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-grid) 1px,transparent 1px);
  background-size:24px 24px;
  /* 画面下の固定広告 (#bottom-sticky-free-space-element) が本文と最後のカードを覆わないよう、同じ高さの下余白。
     --nk-sticky-h は nk-zukan.js が広告が表示されている時だけ入れる (無ければ 0)。 */
  padding-bottom:var(--nk-sticky-h,0px);
}
body #body_wrap,body .l-content,body #content{background:transparent}
body a{text-underline-offset:3px}
body ::selection{background:rgba(232,145,45,.4)}
/* ページ内リンク (#answers・#nk-addendum・回答目次) で固定ヘッダーの下に潜らない */
body #answers,body .nk-addendum,body .answer{scroll-margin-top:84px}

/* ===== ヘッダー ===== */
body .l-header{background:#fff;box-shadow:none;border-bottom:2px solid var(--c-ink)}
body .l-header__bar{background:var(--c-ink)}
body .c-catchphrase{font-size:11.5px;letter-spacing:.04em}
/* ロゴ文字列は固定 = Klee One */
body .c-headLogo__link{font-family:var(--f-note);font-weight:600;font-size:24px;color:var(--c-ink);letter-spacing:.03em;display:inline-flex;align-items:center}
body .l-header .c-headLogo__link::after,body .l-fixHeader .c-headLogo__link::after{
  content:"猫の釣り図鑑";font-size:11px;font-weight:600;color:var(--c-amberd);border:1.5px solid var(--c-amber);border-radius:4px;
  padding:1px 7px;margin-left:12px;transform:rotate(-4deg);display:inline-block;background:#fff;letter-spacing:.06em}
body .l-fixHeader{background:rgba(255,255,255,.97);border-bottom:2px solid var(--c-ink)}
body .c-gnav .ttl{font-size:13.5px;font-weight:700;color:var(--c-ink);letter-spacing:.02em}
body .c-gnav>.menu-item>a::after{background:var(--c-amber);height:3px}
body .c-gnav>.menu-item:first-child>a .ttl{
  background:var(--c-amber);color:var(--c-amberdark);padding:8px 16px;border:2px solid var(--c-ink);border-radius:999px;box-shadow:2px 2px 0 var(--c-ink)}
body .c-gnav>.menu-item:first-child>a::after{display:none}
body .p-breadcrumb.-bg-on{background:transparent;border-bottom:1px dashed var(--c-line)}
body .p-breadcrumb__text{font-size:12px;color:var(--c-muted)}

/* ===== フッター（奥付） ===== */
body .l-footer{background:var(--c-ink);color:#cfe3ec;margin-top:56px}
body .l-footer__inner::before{content:"図鑑はここまで。あとは、釣りに行こう。";display:block;text-align:center;font-family:var(--f-note);font-size:18px;color:#fff;padding:26px 16px 0;letter-spacing:.06em}
body .l-footer a{color:#fff;font-weight:500}
body .l-footer .wp-block-paragraph strong{font-weight:500;line-height:2}
body .l-footer__foot{border-top:1px dashed rgba(255,255,255,.3);background:transparent;color:#9fc0cf}
body .l-footer .copyright{color:#9fc0cf}

/* ===== ウキ・スクロールゲージ（要素は PHP・値 --nk-p は nk-zukan.js） ===== */
.nk-uki{position:fixed;right:22px;top:118px;bottom:64px;width:26px;z-index:40;pointer-events:none}
.nk-uki__line{position:absolute;left:12px;top:0;bottom:0;border-left:2px dashed rgba(14,90,122,.42)}
.nk-uki__float{position:absolute;left:4px;top:0;width:18px;height:34px;border:2px solid var(--c-ink);border-radius:9px 9px 11px 11px/12px 12px 11px 11px;
  background:linear-gradient(var(--c-amber) 0 52%,#fff 52% 100%);transform:translateY(calc(var(--nk-p,0) * (100vh - 118px - 64px - 34px)));will-change:transform}
.nk-uki__float::before{content:"";position:absolute;left:5px;top:-9px;width:2px;height:8px;background:var(--c-ink)}
.nk-uki__hit{position:absolute;right:30px;top:0;white-space:nowrap;font-family:var(--f-note);font-weight:600;font-size:12px;color:var(--c-amberd);background:#fff;border:2px solid var(--c-amber);border-radius:4px;padding:1px 8px;
  transform:translateY(calc(var(--nk-p,0) * (100vh - 118px - 64px - 34px))) rotate(-4deg);opacity:0}
.nk-uki.is-hit .nk-uki__hit{opacity:1}
.nk-uki.is-hit .nk-uki__float{animation:nk-bob .5s ease-in-out 2}
@keyframes nk-bob{50%{margin-top:6px}}

/* ===== 見出しラベル（共通部品） ===== */
/* 固定の見出し = Klee One */
body .nk-ap-answers-label,
body .nk-ap-related__title,
body .p-homeContent::before{font-family:var(--f-note)!important;font-weight:600!important}
/* DB 由来の見出し (質問一覧の題名・CDLM ウィジェットの見出し) = Noto Sans JP の太字 */
body h2.c-secTitle.-widget.nk-front-questions__title,
body .cdlm-widget-style{font-family:var(--f-bold)!important;font-weight:800!important}
/* ラベルの形 (共通)。
   !: #anspress h2・SWELL 追加CSS (:is(.post_content) h2 の白文字・紺帯) に勝つ必要があるため、この群だけ !important を残す */
body h2.c-secTitle.-widget.nk-front-questions__title,
body .cdlm-widget-style,
body .nk-ap-answers-label,
body .nk-ap-related__title,
body .p-homeContent::before{
  display:inline-flex!important;align-items:center;gap:10px;width:auto;
  font-size:20px!important;line-height:1.3!important;letter-spacing:.05em;
  color:#fff!important;background:var(--c-ink)!important;border:0!important;border-radius:4px 14px 4px 14px!important;
  padding:8px 20px 8px 14px!important;margin:30px 0 16px!important;transform:rotate(-1deg);box-shadow:3px 3px 0 var(--c-amber)!important;
}
body h2.c-secTitle.-widget.nk-front-questions__title::before,
body h2.c-secTitle.-widget.nk-front-questions__title::after,
body .nk-ap-answers-label::before,body .nk-ap-answers-label::after,
body .nk-ap-related__title::before,body .nk-ap-related__title::after{content:none!important}
body h2.c-secTitle.-widget.nk-front-questions__title[data-ch]::before{
  content:attr(data-ch)!important;display:inline-block!important;position:static!important;width:auto!important;height:auto!important;
  font-family:var(--f-note);font-size:11px;font-weight:600;background:var(--c-amber)!important;color:var(--c-amberdark);padding:1px 8px;border-radius:3px;letter-spacing:.04em}
body .c-secTitle span{background:none}
body .p-homeContent::before{content:"付録　記事ガイド（別冊）";margin-top:40px!important}

/* ===== 貼り紙（質問募集中） ===== */
body .index-content-top{display:inline-block;position:relative;transform:rotate(-1.2deg);background:#fff;border:2px dashed var(--c-amber);padding:8px 18px 8px 16px;margin:8px 0 0;font-size:14px}
body .index-content-top *{color:var(--c-ink)} /* 中のリンクの色。リンクに色の直指定があれば !important を戻す */
body .index-content-top::before{content:"";position:absolute;top:-11px;left:22px;width:54px;height:17px;background:rgba(232,145,45,.45);transform:rotate(-3deg)}
body .w-frontTop>.c-widget{margin-bottom:22px}

/* ===== トップ：図鑑の表紙（ヒーロー）。DOM は inc/zukan.php が整える（.nk-hero・.nk-poly・インライン style 除去済み） ===== */
body #clf-top-hero>.nk-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:30px;align-items:start;
  background:#fff;border:2px solid var(--c-ink);border-radius:8px;box-shadow:6px 6px 0 var(--c-amber);
  padding:24px 30px 20px 56px;margin:14px 0 30px;overflow:visible}
body #clf-top-hero>.nk-hero::before{content:"";position:absolute;left:14px;top:26px;bottom:26px;width:16px;
  background:radial-gradient(circle at 8px 8px,var(--c-paper) 0 6px,var(--c-ink) 6px 7.5px,transparent 8.5px) 0 0/16px 84px repeat-y}
/* 見出し類 (ウィジェット自身の <style> は #clf-top-hero の ID セレクタ。こちらは body を足して勝つ) */
body #clf-top-hero .clf-h-eyebrow{grid-column:1;font-family:var(--f-bold);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--c-amberd);margin:0 0 8px}
body #clf-top-hero .clf-h-title{grid-column:1;font-size:36px;line-height:1.28;color:var(--c-ink);font-weight:800;margin:0}
body #clf-top-hero .clf-h-title .mk{background:linear-gradient(transparent 60%,rgba(232,145,45,.5) 60%)}
body #clf-top-hero .clf-h-sub{grid-column:1;color:#35505e;font-size:14.5px;line-height:1.75;margin:8px 0 0}
body #clf-top-hero .clf-stats{grid-column:1;gap:10px;margin:14px 0 0}
body #clf-top-hero .clf-stat{background:#fff;border:2px dashed var(--c-navy);border-radius:6px;padding:6px}
/* 数字だけの欄は Klee One (サブセットに 0-9 と , を含む)。単位などの文字は入れない */
body #clf-top-hero .clf-stat b{font-family:var(--f-note);font-weight:600;font-size:28px;color:var(--c-ink)}
body #clf-top-hero .clf-stat span{font-size:11px;color:var(--c-muted)}
body #clf-top-hero .clf-asof{grid-column:1;color:var(--c-muted);font-size:11px;text-align:left}
/* 検索フォーム: インライン style を PHP で外したので、ここで持つ */
body #clf-top-hero label{grid-column:1/-1;display:block;color:var(--c-ink);font-family:var(--f-bold);font-weight:700;font-size:14px;margin:12px 0 4px}
body #clf-top-hero form{grid-column:1/-1;margin:0;display:flex;gap:6px}
body #clf-top-hero input[type=text]{flex:1;min-width:0;background:#fff;border:2px solid var(--c-ink);color:var(--c-ink);border-radius:6px;padding:11px 14px;font-size:16px;font-family:inherit}
body #clf-top-hero input[type=text]::placeholder{color:#7d94a0}
body #clf-top-hero button[type=submit]{background:var(--c-ink);color:#fff;border:0;border-radius:6px;padding:0 24px;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer}

/* 標本写真（猫マスコット）と吹き出し */
.nk-poly{grid-column:2;grid-row:1/span 5;position:relative;margin:4px 0 0;background:#fff;border:2px solid var(--c-ink);padding:8px 8px 11px;
  transform:rotate(2.2deg);box-shadow:4px 4px 0 rgba(10,58,82,.2)}
.nk-poly__ph{aspect-ratio:445/250;overflow:hidden;background:#dfeaee}
.nk-poly__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:18% 50%}
.nk-poly figcaption{font-family:var(--f-note);font-size:13px;line-height:1.5;color:var(--c-ink);padding-top:8px}
.nk-poly figcaption b{display:block;font-size:14.5px;font-weight:600}
.nk-poly figcaption b span{white-space:nowrap}
.nk-poly figcaption small{display:block;font-family:var(--f-base);font-size:11px;color:var(--c-muted);line-height:1.55;margin-top:2px}
.nk-poly__tape{position:absolute;top:-13px;left:50%;margin-left:-35px;width:70px;height:20px;background:rgba(232,145,45,.5);transform:rotate(-3deg)}
.nk-poly__bubble{position:absolute;left:-30px;top:20px;z-index:2;background:#fff;border:2px solid var(--c-ink);border-radius:14px;padding:5px 11px;
  font-family:var(--f-note);font-weight:600;font-size:12.5px;color:var(--c-ink);transform:rotate(-4deg);white-space:nowrap;box-shadow:2px 2px 0 var(--c-amber)}
.nk-poly__bubble::after{content:"";position:absolute;right:16px;bottom:-9px;width:12px;height:12px;background:#fff;border-right:2px solid var(--c-ink);border-bottom:2px solid var(--c-ink);transform:rotate(45deg)}

/* ===== トップ：図鑑の目次（タイル 6 つ。DOM は章の順に並べて出している＝CSS の order は使わない） ===== */
body #clf-top-hero>.nk-toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px;margin:0 0 36px;position:relative}
.nk-toc__head{grid-column:1/-1;margin:0;font-family:var(--f-note);font-weight:600;font-size:22px;color:var(--c-ink);letter-spacing:.06em;display:flex;align-items:baseline;gap:12px}
.nk-toc__head::after{content:"";flex:1;border-bottom:2px dotted var(--c-navy);transform:translateY(-4px)}
.nk-toc__head span{font-size:12px;font-weight:400;font-family:var(--f-base);color:var(--c-muted);order:2;letter-spacing:.02em;white-space:nowrap}
body #clf-top-hero .nk-toc__tile{
  position:relative;display:block;background:#fff;border:2px solid var(--c-ink);border-radius:6px;
  padding:20px 16px 18px;box-shadow:var(--sh);text-decoration:none;transition:transform .15s,box-shadow .15s}
/* タイルの題名は DB 由来の既存 4 つを含む = Noto Sans JP の太字 */
body #clf-top-hero .nk-toc__tile b{display:block;font-family:var(--f-bold);font-size:19px;color:var(--c-ink);font-weight:800;line-height:1.4}
body #clf-top-hero .nk-toc__tile small{display:block;font-size:12px;color:var(--c-muted);margin-top:4px}
body #clf-top-hero .nk-toc__tile::before{content:attr(data-ch);position:absolute;top:-12px;left:12px;background:var(--c-amber);color:var(--c-amberdark);
  font-family:var(--f-note);font-weight:600;font-size:12px;padding:1px 10px;border-radius:3px;border:1.5px solid var(--c-ink)}
body #clf-top-hero .nk-toc__tile::after{content:"→";position:absolute;right:14px;bottom:12px;color:var(--c-navy);font-weight:700;font-size:18px}
body #clf-top-hero .nk-toc__tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--c-amber)}
body #clf-top-hero .nk-toc__tile:focus-visible{outline:3px solid var(--c-amber);outline-offset:2px}

/* ===== 出典つき回答の見本・人気・道具・CTA（既存ウィジェットの再装飾）=====
   !: 次の枠の指定は DB のウィジェットのインライン style / <style> の ID セレクタに勝つ必要があるため !important を残す
      (#clf-pop・#clf-gear の枠、#clf-proof のカード枠、#clf-home-cta、各ボタン)。ステージングで外せるか試す対象 */
body #clf-proof,body #clf-pop,body #clf-gear{position:relative}
body #clf-pop,body #clf-gear{background:#fff!important;border:2px solid var(--c-ink)!important;border-radius:6px!important;box-shadow:var(--sh);padding:18px 20px 10px!important;margin:0 0 30px!important}
body #clf-proof .clf-prf-card{border:2px solid var(--c-ink)!important;border-radius:6px!important;box-shadow:var(--sh);position:relative;overflow:visible!important}
body #clf-proof .clf-prf-card::after{content:"見本";position:absolute;top:-14px;right:18px;font-family:var(--f-note);font-weight:600;font-size:14px;color:var(--c-amberd);border:2px solid var(--c-amber);border-radius:4px;padding:0 10px;background:#fff;transform:rotate(5deg)}
body #clf-proof .clf-prf-bar{display:none}
body #clf-proof .clf-prf-h,body #clf-pop .clf-pop-h,body #clf-gear .h{margin-bottom:6px}
/* ウィジェットの見出し (DB) = Noto Sans JP の太字 */
body #clf-proof .clf-prf-t,body #clf-pop .clf-pop-t,body #clf-gear .t{font-family:var(--f-bold);font-size:19px;color:var(--c-ink);font-weight:800;letter-spacing:.03em}
body #clf-proof .clf-prf-s,body #clf-pop .clf-pop-s,body #clf-gear .s{font-size:12px;color:var(--c-muted);margin-left:0}
/* 順位・番号の丸 (数字だけ) = Klee One */
body #clf-pop .clf-pop-n,body #clf-gear .n{background:var(--c-amber);color:var(--c-amberdark);border-radius:50%;font-family:var(--f-note);border:2px solid var(--c-ink)}
body #clf-proof .clf-prf-av{background:var(--c-ink);border-radius:50%}
body #clf-proof .clf-prf-a .clf-prf-av{background:var(--c-amber);color:var(--c-amberdark)}
body #clf-proof .clf-prf-q{border-bottom:2px dashed var(--c-line)}
body #clf-proof .clf-prf-qt{font-size:15px}
body #clf-proof .clf-prf-al{background:#fff;border:1.5px solid var(--c-amber);color:var(--c-amberd);border-radius:3px}
body #clf-proof .clf-prf-chip{border:1.5px solid var(--c-navy);background:#fff;border-radius:4px}
body #clf-proof .clf-prf-chip i{background:var(--c-navy);border-radius:2px}
body #clf-proof .clf-prf-note{background:#fff;border:1.5px dashed var(--c-navy);border-radius:4px}
body #clf-proof a.clf-prf-btn,body #clf-gear .cta{background:var(--c-ink)!important;color:#fff!important;border-radius:6px!important;box-shadow:3px 3px 0 var(--c-amber)}
body #clf-gear .cta{background:var(--c-amber)!important;color:var(--c-amberdark)!important;border:2px solid var(--c-ink);box-shadow:3px 3px 0 var(--c-ink)}
body #clf-pop a.clf-pop-row{border-top:1px dashed var(--c-line)}
body #clf-pop .r{font-family:var(--f-note);font-size:24px;color:var(--c-ink)}
body #clf-pop .r.g1{color:var(--c-amber)}
body #clf-pop .vw b{font-family:var(--f-note);color:var(--c-ink)}
body #clf-pop .clf-pop-f a{color:var(--c-navy)}
body #clf-gear .row{border-top:1px dashed var(--c-line)}
body #clf-home-cta{position:relative;background:var(--c-ink)!important;border-radius:8px!important;padding:34px 22px!important;margin:28px 0!important;outline:2px dashed rgba(255,255,255,.4);outline-offset:-10px;box-shadow:6px 6px 0 var(--c-amber)}
body #clf-home-cta p:first-child{font-family:var(--f-bold);font-weight:800;font-size:24px!important;letter-spacing:.05em} /* !: CTA 見出しのインライン font-size */
body #clf-home-cta a{border-radius:6px!important}
body #clf-home-cta a:first-child{background:var(--c-amber)!important;color:var(--c-amberdark)!important;border:2px solid #fff}

/* ===== 質問カード（トップ一覧・関連質問 共通）。番号 .nk-ap-no は question-list-item.php が出す ===== */
body .nk-ap-list{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 18px;margin-top:6px}
@media (min-width:992px){body .nk-ap-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* !: 下辺が #anspress の指定に負けて消えた (R1) ため、カードの枠・影・余白は !important を残す */
body .nk-ap-list .nk-ap-item{position:relative;margin:0!important;background:#fff!important;border:2px solid var(--c-ink)!important;border-radius:6px!important;box-shadow:var(--sh)!important;overflow:visible!important;padding:0!important;transition:transform .15s,box-shadow .15s}
body .nk-ap-list .nk-ap-item::before{content:"";display:block;position:absolute;top:-10px;left:50%;width:54px;height:17px;margin-left:-27px;background:rgba(232,145,45,.45);transform:rotate(-2deg);z-index:2}
body .nk-ap-list .nk-ap-item:nth-child(even)::before{transform:rotate(2.5deg);background:rgba(14,90,122,.28)}
body .nk-ap-list .nk-ap-item::after{content:none;display:none}
body .nk-ap-list .nk-ap-item:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--c-amber)!important}
body .nk-ap-list .nk-ap-item__inner{display:block;position:relative;padding:0}
body .nk-ap-list .nk-ap-item__thumb{display:block;position:relative;padding:8px 8px 0}
body .nk-ap-list .nk-ap-item__thumb:not(:has(img)){display:none}
body .nk-ap-list .nk-ap-thumb{display:block;height:150px;background:#dfeaee;overflow:hidden}
body .nk-ap-list .nk-ap-thumb__img{width:100%;height:150px;object-fit:cover}
body .nk-ap-list .nk-ap-item__main{padding:12px 16px 16px}
body .nk-ap-list .nk-ap-no{position:absolute;left:0;top:14px;z-index:3;background:var(--c-ink);color:#fff;font-family:var(--f-note);font-weight:600;font-size:12px;padding:2px 10px 2px 8px;border-radius:0 4px 4px 0;letter-spacing:.05em}
/* 質問題名は DB 由来 = Noto Sans JP の太字。!: anspress-compat.css の .nk-ap-q-title (!important) と #anspress h2 に勝つため */
body #anspress .nk-ap-list h2.nk-ap-q-title,body #anspress .nk-ap-list h3.nk-ap-q-title,body .nk-ap-list .nk-ap-q-title{
  font-family:var(--f-bold);font-size:15.5px!important;font-weight:700!important;line-height:1.55!important;color:var(--c-ink)!important;-webkit-line-clamp:3!important;letter-spacing:.01em}
body .nk-ap-list .ap-display-question-meta{margin-top:10px;padding:0;border:0;font-size:11.5px;color:var(--c-muted);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
body .nk-ap-list .ap-display-meta-item{display:inline-flex;align-items:center;gap:4px;margin:0}
body .nk-ap-list .ap-display-meta-item.categories a{background:#fff;border:1.5px solid var(--c-amber);color:var(--c-amberd);border-radius:3px;padding:0 7px;text-decoration:none;font-weight:700}
body .nk-ap-list .ap-display-meta-item.tags{flex-basis:100%}
body .nk-ap-list .question-tags a{display:inline-block;color:var(--c-navy);text-decoration:none;margin:0 6px 0 0}
body .nk-ap-list .question-tags a::before{content:"#"}
body .nk-ap-list .nk-ap-item__counts{position:absolute;right:14px;top:14px;z-index:3;display:block}
body .nk-ap-list .ap-list-counts{display:block}
/* 投票数は見た目だけ非表示 (DOM に残す)。!: AnsPress の .ap-questions-count が display を持つ */
body .nk-ap-list .ap-questions-vcount{display:none!important}
/* 回答数のスタンプ。!: AnsPress の a.ap-questions-count の枠・角丸・色に勝つ */
body .nk-ap-list a.ap-questions-acount{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  width:58px!important;height:58px!important;border:2px solid var(--c-amber)!important;border-radius:50%!important;background:#fff!important;color:var(--c-amberd)!important;
  font-size:10.5px!important;font-weight:700;line-height:1.1!important;padding:0!important;margin:0!important;box-shadow:2px 2px 0 var(--c-ink)!important;text-decoration:none;transform:rotate(8deg)}
body .nk-ap-list a.ap-questions-acount span{font-family:var(--f-note);font-weight:600;font-size:22px;color:var(--c-ink)}
body .nk-ap-list .nk-ap-item:not(:has(.nk-ap-thumb)) .nk-ap-item__main{padding-top:18px;padding-right:84px}
body .nk-ap-list .nk-ap-item:not(:has(.nk-ap-thumb)) .nk-ap-no{position:static;display:inline-block;margin:14px 0 0 0}
body .nk-front-more,body .nk-front-widgets div[style*="text-align: right"]{text-align:right;margin:4px 0 26px}
body .nk-front-more a,body .nk-front-widgets div[style*="text-align: right"] a{display:inline-block;background:#fff;border:2px solid var(--c-ink);border-radius:999px;padding:6px 18px;font-size:13px;font-weight:700;color:var(--c-ink);text-decoration:none;box-shadow:2px 2px 0 var(--c-amber)}

/* ===== 写真・ランキング（CDLM ウィジェット） ===== */
body .row[class*="cdlm-widget-cdlm_display"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px;margin:0 0 8px}
body .row[class*="cdlm-widget-cdlm_display"]>.col-12{grid-column:1/-1;margin:26px 0 6px;justify-self:start}
body .row[class*="cdlm-widget-cdlm_display"] article.list{margin:0;min-width:0}
body .row[class*="cdlm-widget-cdlm_display"] .post_links{display:block;background:#fff;border:2px solid var(--c-ink);border-radius:6px;padding:8px 8px 12px;box-shadow:var(--sh);text-decoration:none;color:var(--c-ink);height:100%}
body .row[class*="cdlm-widget-cdlm_display"] .post_thumb{height:180px;overflow:hidden;background:#dfeaee;display:block}
body .row[class*="cdlm-widget-cdlm_display"] .post_thumb img{width:100%;height:100%;object-fit:cover;max-width:none}
body .row[class*="cdlm-widget-cdlm_display"] .list-text{padding:10px 6px 0}
body .row[class*="cdlm-widget-cdlm_display"] .list-title{height:auto;font-family:var(--f-bold);font-size:13px;line-height:1.6;font-weight:700;color:var(--c-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0}
body .needs-answer{display:inline-block;font-size:11px;font-weight:700;color:var(--c-amberd);border:1.5px solid var(--c-amber);border-radius:3px;padding:0 7px;margin:0 6px 6px 0}

/* ===== 記事ガイド（SWELL 投稿リスト：別冊付録） ===== */
body .p-postList__link{background:#fff;border:2px solid var(--c-ink);border-radius:6px;box-shadow:var(--sh);padding:8px 8px 12px;overflow:visible;transition:transform .15s}
body .p-postList__link:hover{transform:translate(-2px,-2px)}
body .p-postList__thumb{border-radius:0}
body .p-postList__title{font-family:var(--f-bold);font-size:14.5px;font-weight:700;line-height:1.55;color:var(--c-ink)}
body .p-postList__excerpt{font-size:12px;color:var(--c-muted);line-height:1.7}
body .c-postThumb__cat{background:var(--c-amber);color:var(--c-amberdark);border-radius:3px;font-weight:700}
body .c-pagination .page-numbers{border:2px solid var(--c-ink);border-radius:4px;background:#fff;color:var(--c-ink);font-weight:700;box-shadow:2px 2px 0 rgba(10,58,82,.15)}
body .c-pagination .page-numbers.current{background:var(--c-ink);color:#fff}

/* ===== サイドバー（索引） ===== */
body .nk-side-menu__group{background:#fff;border:2px solid var(--c-ink);border-radius:6px;margin:0 0 20px;box-shadow:var(--sh);overflow:hidden}
/* グループ名はメニュー設定 (可変) = Noto Sans JP の太字。「索引」の札だけ固定ラベル = Klee One */
body .c-widget__title.-side{font-family:var(--f-bold);font-size:15px;font-weight:800;letter-spacing:.06em;background:var(--c-ink);color:#fff;margin:0;padding:9px 14px;border:0}
body .c-widget__title.-side::before{content:"索引";display:inline-block;background:var(--c-amber);color:var(--c-amberdark);font-family:var(--f-note);font-weight:600;font-size:10.5px;padding:0 7px;border-radius:3px;margin-right:9px;position:static;width:auto;height:auto}
body .c-widget__title.-side::after{display:none}
body .nk-side-menu__list{margin:0;padding:4px 0}
body .nk-side-menu__list .menu-item a{padding:9px 14px 9px 24px;font-size:13.5px;border-bottom:1px dotted var(--c-line);color:var(--c-ink)}
body .nk-side-menu__list .menu-item:last-child a{border-bottom:0}
body .nk-side-menu__list .menu-item a::before{color:var(--c-amber);left:8px}
body .nk-side-menu__list .menu-item a:hover{background:rgba(232,145,45,.1)}
body .side-menu-space-bottom{margin-top:6px}

/* ===== 質問ページ：相談カード ===== */
/* h1 → 「回答 N 件を読む」→ 広告枠 (free-space) を左、アイキャッチ (標本写真) を右に。本文 .post_content は全幅 */
#body_wrap.nk-zk--q .l-mainContent__inner{display:grid;grid-template-columns:minmax(0,1fr) 290px;column-gap:34px;grid-template-rows:auto auto 1fr}
#body_wrap.nk-zk--q .c-pageTitle{grid-column:1;grid-row:1;margin:8px 0 0}
#body_wrap.nk-zk--q .nk-ans-jump{grid-column:1;grid-row:2}
#body_wrap.nk-zk--q .p-articleThumb{grid-column:2;grid-row:1/span 3;margin:16px 0 22px}
#body_wrap.nk-zk--q .l-mainContent__inner>.free-space{grid-column:1;grid-row:3;align-self:end;margin:0 0 18px}
#body_wrap.nk-zk--q .l-mainContent__inner>.post_content{grid-column:1/-1}
body .c-pageTitle{padding:0;border:0;background:none;font-family:var(--f-bold);font-size:30px;line-height:1.4;font-weight:800;color:var(--c-ink)}
body .c-pageTitle::after{display:none}
#body_wrap.nk-zk--q .c-pageTitle::before{content:"相談カード " attr(data-no);display:block;width:max-content;margin:0 0 12px;font-family:var(--f-note);font-weight:600;font-size:13px;letter-spacing:.08em;
  background:var(--c-amber);color:var(--c-amberdark);border:2px solid var(--c-ink);border-radius:3px;padding:2px 14px;transform:rotate(-1.5deg);box-shadow:2px 2px 0 var(--c-ink)}
/* h1 は旧と同じく本文の先頭を設定文字数で切った文。切れている時だけ見た目の「…」(テキストは変えない) */
body .c-pageTitle.nk-trunc .c-pageTitle__inner::after{content:"…"}
body .c-pageTitle__inner{background:linear-gradient(transparent 64%,rgba(232,145,45,.4) 64%);padding:0 2px;color:var(--c-ink)}
body .p-articleThumb{position:relative;background:#fff;border:2px solid var(--c-ink);padding:9px 9px 52px;transform:rotate(1.8deg);box-shadow:5px 5px 0 rgba(10,58,82,.2)}
body .p-articleThumb::before{content:"";position:absolute;top:-13px;left:50%;margin-left:-36px;width:72px;height:21px;background:rgba(232,145,45,.5);transform:rotate(-3deg);z-index:2}
body .p-articleThumb__img{display:block;width:100%;height:auto;aspect-ratio:445/330;object-fit:cover;object-position:30% 50%;box-shadow:none}
#body_wrap.nk-zk--q .p-articleThumb::after{content:"標本 " attr(data-no) "　リクツリネコ（陸で待機中）";position:absolute;left:12px;right:12px;bottom:14px;font-family:var(--f-note);font-weight:600;font-size:13px;color:var(--c-ink);line-height:1.4}
#body_wrap.nk-zk--q .below_eye_catch{font-size:12.5px;color:var(--c-muted);line-height:1.6}
#body_wrap.nk-zk--q .below_eye_catch br{display:none}
#body_wrap.nk-zk--q .below_eye_catch a{font-weight:700;color:var(--c-navy)}

/* 「回答 N 件を読む」(h1 の直下・#answers へ) */
.nk-ans-jump{margin:12px 0 0}
.nk-ans-jump__btn{display:inline-flex;align-items:center;gap:6px;background:var(--c-amber);color:var(--c-amberdark);font-family:var(--f-bold);font-weight:800;font-size:15px;line-height:1.3;
  padding:10px 20px;border:2px solid var(--c-ink);border-radius:999px;box-shadow:3px 3px 0 var(--c-ink);text-decoration:none}
.nk-ans-jump__btn:hover{background:#f4a24a}
.nk-ans-jump__btn:focus-visible{outline:3px solid var(--c-navy);outline-offset:3px}

body .nk-ap .ap-question-meta{display:flex;flex-wrap:wrap;gap:8px 12px;margin:8px 0 16px;padding:0;font-size:12px;color:var(--c-muted)}
body .nk-ap .ap-question-meta .ap-display-meta-item{display:inline-flex;align-items:center;gap:4px;margin:0;padding:0}
body .nk-ap .ap-question-meta .categories a{background:#fff;border:1.5px solid var(--c-amber);color:var(--c-amberd);border-radius:3px;padding:0 8px;text-decoration:none;font-weight:700}
body .nk-ap .ap-question-meta .question-tags a{color:var(--c-navy);text-decoration:none;margin-right:8px}
body .nk-ap .ap-question-meta .question-tags a::before{content:"#"}
/* 重複するアイキャッチは見た目だけ非表示 (DOM に残す) */
body .nk-ap .nk-ap-eyecatch{display:none}

/* 質問・回答の枠。AnsPress の #anspress 系の余白・二重枠を ID 付きの特異性で打ち消す (R2/R3 の左右ずれ・二重枠) */
#body_wrap.nk-zk--q .l-mainContent__inner>.post_content,#body_wrap.nk-zk--q .post_content>#anspress,#body_wrap.nk-zk--q #anspress #ap-single{
  padding-left:0;padding-right:0;margin-left:0;margin-right:0;max-width:none;outline:0}
#body_wrap.nk-zk--q .l-mainContent__inner>.post_content{min-width:0}
body #anspress .nk-ap .ap-row,body #anspress .nk-ap .ap-q-left,body #anspress .nk-ap .ap-col-12,body #anspress .nk-ap #question,body #anspress .nk-ap #question.ap-content{
  padding-left:0;padding-right:0;margin-left:0;margin-right:0;border:0;background:none;box-shadow:none}
body #anspress .nk-ap #question .ap-cell{position:relative;background:#fff;border:2px solid var(--c-ink);border-radius:6px;box-shadow:6px 6px 0 rgba(10,58,82,.14);padding:0;margin:0 0 6px}
body .nk-ap #question .ap-cell-inner,body .nk-ap .answer .ap-cell-inner{padding:0}
body .nk-ap .ap-q-metas{display:flex;align-items:center;gap:10px;padding:9px 18px;margin:0}
body .nk-ap #question .ap-q-metas{background:var(--c-ink);color:#fff;border-radius:4px 4px 0 0}
body .nk-ap #question .ap-q-metas::before{content:"相談";order:-1;font-family:var(--f-note);font-weight:600;font-size:12px;background:var(--c-amber);color:var(--c-amberdark);padding:1px 10px;border-radius:3px}
body .nk-ap #question .ap-q-metas a{color:#fff;font-weight:700}
body .nk-ap .ap-q-metas .ap-avatar img{width:34px;height:34px;border-radius:50%;border:2px solid #fff;object-fit:cover}
body .nk-ap .ap-q-metas .ap-avatar,body .nk-ap .ap-q-metas .ap-avatar a{display:inline-flex;align-items:center}
body .nk-ap .ap-q-metas .nk-ap-date{margin-left:auto;font-size:12px;color:inherit;opacity:.85}
body .nk-ap #question .ap-q-inner{box-sizing:border-box;padding:22px 26px 14px 70px;background-image:linear-gradient(90deg,transparent 48px,rgba(232,145,45,.6) 48px,rgba(232,145,45,.6) 50px,transparent 50px)}
/* 本文の文字サイズ: p・li は親から継承させ、追記ブロックだけ相対で小さくする (R3: SP で追記の大きさが揃わなかった対策。下の .nk-addendum) */
body #ap-single .ap-q-content{font-size:16px;line-height:2;color:#1c2f3b}
body #ap-single .ap-q-content p,body #ap-single .ap-q-content li{font-size:inherit}
body #ap-single .ap-q-content p{margin:0 0 1.1em}
body #ap-single .ap-q-content strong{background:linear-gradient(transparent 62%,rgba(232,145,45,.32) 62%);font-weight:700}

/* --- R3 修正 1: 道具メモの箱 (左上の猫サムネの断片を出さない) ---
   原因の見立て: 箱 (.clf-linkbox) の左上に出ていた縦長の猫画像は、画像要素ではなく疑似要素 (::before/::after) の背景画像
   (モックの「*{background-image:none}」は疑似要素に効かない)。箱の ::before はモックが「道具メモ」の札に使っていたが札が出ず
   猫画像が出ていた = 箱自身の ::before に別のルール (背景画像) が勝っていた。
   直し方: ① 札は実要素 (.nk-memo-tag・PHP が出す) に替え、箱自身の ::before/::after は使わず消す
          ② 箱の中の全要素の疑似要素の背景画像を消す (content は消さない: ボタンの「›」等を残す)
          ③ 箱の直下・段落内の画像 (絵文字 .emoji 以外) を出さない
   !: 疑似要素の背景は別ルールの !important/ID に勝つ必要があるため !important を使う */
body .nk-ap .clf-linkbox{position:relative;border:2px dashed var(--c-navy);border-radius:6px;background:#fff;box-shadow:none;padding:22px 20px 14px}
body .nk-ap .clf-linkbox::before,body .nk-ap .clf-linkbox::after{content:none!important;display:none!important;background:none!important}
body .nk-ap .clf-linkbox *::before,body .nk-ap .clf-linkbox *::after{background-image:none!important}
body .nk-ap .clf-linkbox>img,body .nk-ap .clf-linkbox img:not(.emoji){display:none!important}
.nk-memo-tag{position:absolute;top:-12px;left:14px;font-family:var(--f-note);font-weight:600;font-size:12px;line-height:1.5;background:var(--c-navy);color:#fff;padding:1px 10px;border-radius:3px}
body .nk-ap .clf-linkbox a[style*="display:inline-block"]{border-radius:5px}
body .nk-ap .clf-linkbox ul{list-style:disc;padding-left:1.4em;text-align:left}
body .nk-ap .clf-linkbox li{text-align:left;display:list-item;margin:4px 0}
body .nk-ap .clf-linkbox li::before{content:none;display:none}
body .nk-ap .clf-linkbox li a{display:inline;text-align:left}
body .nk-ap .clf-linkbox>p:first-of-type{background:none;padding:0}

/* --- R3 修正 4: 編集部の追記 (DB の本文の div。PHP が class="nk-addendum" と id を付ける)。
   SP で本文より大きく見えた原因: 本文の基準サイズが SP で効かず (SWELL の本文サイズが勝つ)、追記だけ px 指定で食い違った。
   直し方: 本文 (.ap-q-content) を基準に、追記は相対 (.93em)。p は親から継承。見出し段落だけインライン font-size があるので !important。 */
body #ap-single .ap-q-content .nk-addendum{border:0;background:rgba(232,145,45,.09);border-left:4px solid var(--c-amber);border-radius:0 6px 6px 0;padding:14px 18px;margin:24px 0 8px;font-size:.93em}
body #ap-single .ap-q-content .nk-addendum p{font-size:inherit;line-height:1.95}
/* 見出し段落は DB 由来 = Noto Sans JP の太字。!: 本文側のインライン style="font-size:15px" に勝つ */
body #ap-single .ap-q-content .nk-addendum>p:first-child{font-family:var(--f-bold);font-weight:800;color:var(--c-ink);font-size:1.06em!important}

body .nk-ap .c-shareBtns{margin:6px 0 16px;padding:12px 18px 6px}
body .nk-ap .c-shareBtns__message{font-family:var(--f-bold);font-weight:700;color:var(--c-ink)}
body .nk-ap .c-shareBtns__list{list-style:none;padding:0;margin:8px 0;display:flex;gap:4px}
body .nk-ap .c-shareBtns__item{list-style:none;margin:0;flex:1}
body .nk-ap .c-shareBtns__item::before,body .nk-ap .c-shareBtns__item::marker{content:none}
body .nk-ap .c-shareBtns__btn{border-radius:4px}

/* ===== 回答の一覧 ===== */
/* 追記の案内 (#answers の先頭)。#answers へ飛んだ人が追記を読み飛ばさない */
.nk-addendum-note{margin:0 0 14px;padding:10px 14px;background:rgba(232,145,45,.12);border-left:4px solid var(--c-amber);border-radius:0 6px 6px 0;font-size:13.5px;line-height:1.7;color:var(--c-ink)}
.nk-addendum-note a{font-weight:700;color:var(--c-navy);white-space:nowrap}

body #ap-answers-c .ap-sorting-tab{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;justify-content:flex-start;border:0;padding:0;margin:26px 0 12px}
/* AnsPress の clearfix 疑似要素が flex の空きスロットになっていた (R3) */
body #ap-answers-c .ap-sorting-tab::before,body #ap-answers-c .ap-sorting-tab::after{content:none;display:none}
body #ap-answers-c .nk-ap-answers-label{float:none!important;margin:0!important;padding:8px 20px 8px 14px!important;width:auto}
body #ap-answers-c #answers-order{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;float:none}
body #ap-answers-c #answers-order li{float:none;margin:0;padding:0;background:none;border:0}
body #ap-answers-c #answers-order li a{display:block;padding:5px 13px;border:2px solid var(--c-ink);border-radius:999px;font-size:12px;font-weight:700;color:var(--c-ink);background:#fff;text-decoration:none}
body #ap-answers-c #answers-order li.active a{background:var(--c-ink);color:#fff}

/* --- R3 修正 2: 回答目次 (<details open>。開閉は標準のまま = Enter/Space でキーボードも可) ---
   箱の外に出ていた三角の原因: summary が list-item のままで、標準の ::marker (箱の外側) に加えて
   モックが summary::before と summary::marker の両方へ「▸」を入れていた (marker は外側に描かれる)。
   直し方: summary を display:block にして標準の三角を出さず、三角は ::before の 1 つだけ (開いたら ▾)。 */
body .nk-ap .nk-ap-toc{display:block;background:#fff;border:2px dashed var(--c-navy);border-radius:6px;padding:10px 18px;margin:0 0 22px}
body .nk-ap .nk-ap-toc>summary{display:block;list-style:none;cursor:pointer;font-family:var(--f-note);font-weight:600;font-size:15px;color:var(--c-ink)}
body .nk-ap .nk-ap-toc>summary::-webkit-details-marker{display:none}
body .nk-ap .nk-ap-toc>summary::marker{content:none}
body .nk-ap .nk-ap-toc>summary::before{content:"▸";display:inline-block;width:1.2em;color:var(--c-amberd)}
body .nk-ap .nk-ap-toc[open]>summary::before{content:"▾"}
body .nk-ap .nk-ap-toc>summary:focus-visible{outline:3px solid var(--c-amber);outline-offset:3px;border-radius:3px}
body .nk-ap .nk-ap-toc li{font-size:13px;line-height:1.7;margin:3px 0}
body .nk-ap apanswersw,body .nk-ap apanswers{display:block}

body .nk-ap #answers{counter-reset:nkans}
body .nk-ap .answer{counter-increment:nkans;margin:0 0 26px;position:relative}
body .nk-ap .answer .ap-content{border:0;background:none;padding:0;margin:0}
body .nk-ap .answer .ap-cell{background:#fff;border:2px solid var(--c-ink);border-radius:6px;box-shadow:var(--sh);padding:0;margin:0}
body .nk-ap .answer .ap-q-metas{background:#e9f3f6;border-bottom:2px solid var(--c-ink);border-radius:4px 4px 0 0;color:var(--c-ink)}
body .nk-ap .answer .ap-q-metas::before{content:"回答 No." counter(nkans);order:-1;font-family:var(--f-note);font-weight:600;font-size:12px;background:var(--c-ink);color:#fff;padding:1px 10px;border-radius:3px}
body .nk-ap .answer .ap-q-metas a{color:var(--c-ink);font-weight:700}
body .nk-ap .answer .ap-q-inner{box-sizing:border-box;padding:16px 24px 8px 66px;background-image:linear-gradient(90deg,transparent 44px,rgba(14,90,122,.28) 44px,rgba(14,90,122,.28) 46px,transparent 46px)}
body #ap-single .answer .ap-answer-content{font-size:15.5px;line-height:1.95;text-align:left}
body #ap-single .answer .ap-answer-content p{margin:0 0 1em;font-size:inherit;text-align:left}
body .nk-ap .ap-answer-author,body .nk-ap .ap-q-metas .ap-answer-author{display:inline-flex;align-items:center;gap:10px}
body .nk-ap .nk-ap-related{margin-top:40px}

/* ===== スマホ（〜959px） ===== */
@media (max-width:959px){
  .nk-uki{right:3px;top:70px;bottom:20px;width:18px}
  .nk-uki__line{left:8px}
  .nk-uki__float{left:1px;width:14px;height:26px;transform:translateY(calc(var(--nk-p,0) * (100vh - 70px - 20px - 26px)))}
  .nk-uki__float::before{left:4px;top:-7px;height:6px}
  .nk-uki__hit{transform:translateY(calc(var(--nk-p,0) * (100vh - 70px - 20px - 26px))) rotate(-4deg);right:20px;font-size:11px}
  body .c-headLogo__link{font-size:19px}
  body .l-header .c-headLogo__link::after,body .l-fixHeader .c-headLogo__link::after{display:none}
  body .l-footer__inner::before{font-size:15px}
}
@media (max-width:767px){
  /* --- ヒーロー: 左に文章・右に標本写真の 2 カラム。
     R3 修正 3: 吹き出しが説明文 (.clf-h-sub) に重なっていた。原因: 吹き出しを写真の外へ (left:-56px・top:-24px) 絶対配置していたため、
     左カラムの説明文の上に乗った。直し方: SP では吹き出しを写真の枠の中の通常フロー (写真の上) に置き、右カラムから出さない。 --- */
  body #clf-top-hero>.nk-hero{grid-template-columns:minmax(0,1fr) 128px;column-gap:14px;padding:20px 14px 16px 38px;margin:12px 0 28px;box-shadow:4px 4px 0 var(--c-amber)}
  body #clf-top-hero>.nk-hero::before{left:9px;top:18px;bottom:18px;width:14px}
  body #clf-top-hero .clf-h-eyebrow{font-size:11.5px;letter-spacing:.08em}
  body #clf-top-hero .clf-h-eyebrow,body #clf-top-hero .clf-h-title,body #clf-top-hero .clf-stats,body #clf-top-hero .clf-asof,body #clf-top-hero label,body #clf-top-hero form{grid-column:1/-1}
  body #clf-top-hero .clf-h-title{font-size:25px}
  body #clf-top-hero .clf-h-sub{grid-column:1;grid-row:3;font-size:13px;margin-top:6px}
  body #clf-top-hero .clf-stats{grid-row:5;margin-top:12px}
  body #clf-top-hero .clf-stat{padding:5px 2px}
  body #clf-top-hero .clf-stat b{font-size:22px;white-space:nowrap}
  body #clf-top-hero .clf-stat span{font-size:10px}
  .nk-poly{grid-column:2;grid-row:3/span 2;width:100%;margin:14px 0 0;padding:5px 5px 7px;transform:rotate(2.5deg)}
  .nk-poly__bubble{position:relative;left:auto;top:auto;display:block;z-index:2;margin:0 0 10px;padding:3px 6px;font-size:10.5px;line-height:1.35;text-align:center;white-space:normal;transform:rotate(-2deg)}
  .nk-poly__bubble::after{right:auto;left:50%;margin-left:-6px;bottom:-8px}
  .nk-poly figcaption{padding-top:5px}
  .nk-poly figcaption b{font-size:10.5px;line-height:1.35}
  .nk-poly figcaption small{display:none}
  .nk-poly__tape{width:46px;height:14px;margin-left:-23px;top:-9px}
  body #clf-top-hero>.nk-toc{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  body #clf-top-hero .nk-toc__tile{padding:18px 12px 16px}
  body #clf-top-hero .nk-toc__tile b{font-size:16px}
  .nk-toc__head{font-size:19px;flex-wrap:wrap}
  .nk-toc__head span{order:3;flex-basis:100%}
  .nk-toc__head::after{display:none}
  /* 一覧: 左サムネの横カード */
  body .nk-ap-list{gap:18px}
  body .nk-ap-list .nk-ap-item__inner{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch}
  body .nk-ap-list .nk-ap-item__thumb{padding:8px 0 8px 8px;grid-column:1}
  body .nk-ap-list .nk-ap-thumb,body .nk-ap-list .nk-ap-thumb__img{height:100%;min-height:96px}
  body .nk-ap-list .nk-ap-item__main{grid-column:2;padding:11px 12px 14px 12px}
  body .nk-ap-list .nk-ap-item__thumb:not(:has(img))+.nk-ap-item__main{grid-column:1/-1}
  body #anspress .nk-ap-list h2.nk-ap-q-title,body #anspress .nk-ap-list h3.nk-ap-q-title,body .nk-ap-list .nk-ap-q-title{font-size:13.5px!important;-webkit-line-clamp:3!important}
  body .nk-ap-list .nk-ap-no{top:10px;font-size:11px;padding:1px 8px 1px 6px}
  body .nk-ap-list .nk-ap-item__counts{right:10px;top:auto;bottom:8px}
  body .nk-ap-list a.ap-questions-acount{width:48px!important;height:48px!important;font-size:9.5px!important}
  body .nk-ap-list a.ap-questions-acount span{font-size:19px}
  body .nk-ap-list .ap-display-meta-item.tags{display:none}
  body .nk-ap-list .nk-ap-item:not(:has(.nk-ap-thumb)) .nk-ap-item__main{padding-right:12px}
  body .row[class*="cdlm-widget-cdlm_display"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  body .row[class*="cdlm-widget-cdlm_display"] .post_thumb{height:120px}
  body .row[class*="cdlm-widget-cdlm_display"] .list-title{font-size:12px}
  body h2.c-secTitle.-widget.nk-front-questions__title,body .cdlm-widget-style,body .nk-ap-answers-label,body .nk-ap-related__title,body .p-homeContent::before{font-size:17px!important;margin:24px 0 14px!important}
  body #clf-pop,body #clf-gear{padding:16px 14px 8px!important}
  body #clf-home-cta p:first-child{font-size:19px!important}
  /* 質問ページ */
  #body_wrap.nk-zk--q .l-mainContent__inner{display:block}
  body .c-pageTitle{font-size:21px}
  #body_wrap.nk-zk--q .p-articleThumb{width:min(300px,88%);margin:18px auto 24px;transform:rotate(-1.5deg)}
  body .nk-ap #question .ap-q-inner{padding:16px 14px 8px 36px;background-image:linear-gradient(90deg,transparent 26px,rgba(232,145,45,.6) 26px,rgba(232,145,45,.6) 28px,transparent 28px)}
  body .nk-ap .answer .ap-q-inner{padding:14px 12px 6px 34px;background-image:linear-gradient(90deg,transparent 22px,rgba(14,90,122,.28) 22px,rgba(14,90,122,.28) 24px,transparent 24px)}
  body #ap-single .ap-q-content{font-size:15px;line-height:1.9}
  body #ap-single .answer .ap-answer-content{font-size:15px}
  body .nk-ap .ap-q-metas{padding:8px 12px;flex-wrap:wrap}
  body .nk-ap .clf-linkbox{padding:22px 14px 12px}
  body #ap-single .ap-q-content .nk-addendum{padding:12px 12px}
  body .nk-ap .c-shareBtns__list{flex-wrap:wrap}
  .nk-ans-jump__btn{font-size:14px;padding:9px 16px}
}

/* ===== PC のヒーロー上端の詰め（最初の 1 画面に目次タイルを入れる） ===== */
#body_wrap.nk-zk--top .l-mainContent__inner,#body_wrap.nk-zk--top .l-sidebar{margin-top:-36px}
@media (max-width:767px){#body_wrap.nk-zk--top .l-mainContent__inner,#body_wrap.nk-zk--top .l-sidebar{margin-top:-20px}}

/* 動きを減らす設定: ヒットの上下運動・カードの浮き上がり・色の遷移を止める (ゲージの位置は直接操作なので残す)。後続の規則と #clf-top-hero 付きの規則に負けないよう末尾に置き !important */
@media (prefers-reduced-motion:reduce){
  .nk-uki.is-hit .nk-uki__float{animation:none}
  .nk-uki__float{will-change:auto}
  body .nk-ap-list .nk-ap-item,body .nk-toc__tile,body .p-postList__link{transition:none!important}
  body .nk-ap-list .nk-ap-item:hover,body .nk-toc__tile:hover,body .p-postList__link:hover{transform:none!important}
}