/*
Theme Name: aniyua
Theme URI: https://aniyua.site/
Author: aniyua
Description: aniyua.site 専用テーマ。「アニメの続きは原作の何巻から」データベース、配信終了アラート、週次投票を内蔵。権利画像を使わない設計、Google Discover 対応（1200x630 OG画像の自動生成）、アフィリエイトリンクの一元管理、PR表記の自動挿入。
Version: 2.34.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aniyua
Tags: custom-colors, custom-menu, translation-ready, blog
*/

/* =========================================================
   0. デザイントークン
   ========================================================= */
:root{
  color-scheme: light;
  --pink:#ff4f95;
  --pink-ink:#d81b70;
  --pink-soft:#fff0f7;
  --purple:#8b5cf6;
  --purple-ink:#6d3fe0;
  --purple-soft:#f5eeff;
  --grad: linear-gradient(100deg,#ff4f95 0%,#b45cf0 55%,#8b5cf6 100%);
  --grad-soft: linear-gradient(160deg,#fff0f7 0%,#f8effe 45%,#eef1ff 100%);

  --page:#fffbfd;
  --surface:#ffffff;
  --surface-2:#fffafc;
  --ink:#1b1523;
  --ink-2:#5d5570;
  --muted:#8f89a0;
  --line:#f1e5ef;
  --line-2:#e6dcea;

  --good:#0f9d58;
  --warn:#d98300;
  --danger:#d5303e;

  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(27,21,35,.05);
  --sh-2:0 4px 18px rgba(160,90,190,.10);
  --sh-3:0 12px 40px rgba(160,90,190,.16);
  --maxw:1120px;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --pink:#ff7db2; --pink-ink:#ff9ac4; --pink-soft:#2a1520;
    --purple:#a78bfa; --purple-ink:#c4b1ff; --purple-soft:#1f1830;
    --grad: linear-gradient(100deg,#ff7db2 0%,#c08bf5 55%,#a78bfa 100%);
    --grad-soft: linear-gradient(160deg,#241826 0%,#1e1830 45%,#181a2e 100%);
    --page:#141017; --surface:#1c1720; --surface-2:#221b28;
    --ink:#f8f5fb; --ink-2:#c7bfd6; --muted:#948da6;
    --line:#2d2534; --line-2:#3a3143;
    --good:#3ddc84; --warn:#ffb84d; --danger:#ff7a85;
    --sh-2:0 4px 18px rgba(0,0,0,.5);
    --sh-3:0 12px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --pink:#ff7db2; --pink-ink:#ff9ac4; --pink-soft:#2a1520;
  --purple:#a78bfa; --purple-ink:#c4b1ff; --purple-soft:#1f1830;
  --grad: linear-gradient(100deg,#ff7db2 0%,#c08bf5 55%,#a78bfa 100%);
  --grad-soft: linear-gradient(160deg,#241826 0%,#1e1830 45%,#181a2e 100%);
  --page:#141017; --surface:#1c1720; --surface-2:#221b28;
  --ink:#f8f5fb; --ink-2:#c7bfd6; --muted:#948da6;
  --line:#2d2534; --line-2:#3a3143;
  --good:#3ddc84; --warn:#ffb84d; --danger:#ff7a85;
  --sh-2:0 4px 18px rgba(0,0,0,.5);
  --sh-3:0 12px 40px rgba(0,0,0,.6);
}

/* =========================================================
   1. リセット & ベース
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:anywhere;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--purple-ink);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.45;letter-spacing:-.01em;margin:0}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--surface);padding:8px 14px;border-radius:var(--r-s)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.narrow{max-width:760px}

/* =========================================================
   2. ヘッダー
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);
}
.hbar{display:flex;align-items:center;gap:14px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.28rem;letter-spacing:-.03em;text-decoration:none}
.logo:hover{text-decoration:none}
.logo .mark{
  width:28px;height:28px;border-radius:9px;background:var(--grad);flex:none;
  display:grid;place-items:center;color:#fff;font-size:.82rem;font-weight:900;box-shadow:var(--sh-2)
}
.logo .txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav ul,.nav li{list-style:none;margin:0;padding:0}
.nav ul{display:flex;align-items:center;gap:4px}
.nav li::marker{content:""}
.nav a{
  padding:8px 13px;border-radius:999px;font-size:.87rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  white-space:nowrap;transition:background .15s,color .15s
}
.nav a:hover,.nav a[aria-current]{background:var(--purple-soft);color:var(--purple-ink);text-decoration:none}
.hbtn{
  background:none;border:1px solid var(--line-2);border-radius:999px;width:34px;height:34px;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);flex:none
}
.hbtn:hover{color:var(--ink);border-color:var(--purple)}
#navtoggle{display:none}
@media (max-width:880px){
  .nav{
    position:fixed;inset:62px 0 auto;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px 18px;
    box-shadow:var(--sh-2);display:none
  }
  .nav.open{display:flex}
  .nav a{padding:11px 12px;border-radius:var(--r-s);font-size:.95rem}
  #navtoggle{display:grid}
}

/* =========================================================
   3. 汎用パーツ
   ========================================================= */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.pad{padding:22px}
.sec{margin:36px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.sec-head h2{font-size:1.16rem;font-weight:800;display:flex;align-items:center;gap:9px}
.sec-head h2::before{content:"";width:5px;height:20px;border-radius:99px;background:var(--grad);flex:none}
.sec-head .more{font-size:.84rem;font-weight:700;color:var(--purple-ink)}
.lead{color:var(--ink-2);font-size:.93rem;margin:0 0 16px}

.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;
  padding:3px 9px;border-radius:999px;background:var(--purple-soft);color:var(--purple-ink);
  border:1px solid transparent;white-space:nowrap;line-height:1.6
}
.badge.pink{background:var(--pink-soft);color:var(--pink-ink)}
.badge.good{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.badge.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.badge.danger{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.badge.ghost{background:transparent;border-color:var(--line-2);color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;font-weight:800;font-size:.94rem;
  background:var(--grad);color:#fff;text-decoration:none;border:none;cursor:pointer;
  box-shadow:var(--sh-2);transition:transform .12s,box-shadow .12s
}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--sh-3);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--purple);color:var(--purple-ink)}
.btn.sm{padding:8px 15px;font-size:.85rem}
.btn.block{width:100%}

/* PR表記 */
.pr-note{
  font-size:.76rem;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;margin:0 0 20px
}
.pr-inline{font-size:.72rem;color:var(--muted);font-weight:600;margin-left:6px;white-space:nowrap}

/* =========================================================
   4. アイキャッチ（権利画像を使わない自作サムネ）
   ========================================================= */
.thumb{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;
  background:var(--grad-soft);display:grid;place-items:center;flex:none
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .gen{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:4px;padding:12px;text-align:center
}
.thumb .gen b{
  font-size:clamp(1.1rem,4.2vw,1.9rem);font-weight:900;letter-spacing:-.03em;line-height:1.15;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.thumb .gen span{font-size:.68rem;font-weight:800;color:var(--muted);letter-spacing:.14em}
.thumb::after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,79,149,.16),transparent 68%);
  right:-50px;top:-60px;pointer-events:none
}

/* =========================================================
   5. 記事カード / リスト
   ========================================================= */
.grid{display:grid;gap:16px}
.grid.c3{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-1);transition:transform .14s,box-shadow .14s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.pcard .thumb{border-radius:0}
.pcard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard h3{font-size:.98rem;font-weight:800}
.pcard h3 a{color:var(--ink);text-decoration:none}
.pcard p{margin:0;font-size:.82rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .meta{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:.73rem;color:var(--muted);flex-wrap:wrap}

.plist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.plist li a{
  display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:var(--r-m);
  text-decoration:none;color:var(--ink);transition:background .13s
}
.plist li a:hover{background:var(--surface-2);text-decoration:none}
.plist .t{font-size:.9rem;font-weight:700;flex:1;min-width:0}
.plist .d{font-size:.74rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* =========================================================
   6. データテーブル（資産A / 資産B の中核）
   ========================================================= */
.tools{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px
}
.tools input[type=search],.tools select{
  border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;background:var(--surface-2);
  font-size:.87rem;min-width:0
}
.tools input[type=search]{flex:1;min-width:180px}
.tools .cnt{font-size:.8rem;color:var(--muted);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}

.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:auto;box-shadow:var(--sh-1);-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:.87rem;min-width:720px}
table.data thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:left;
  font-size:.76rem;font-weight:800;color:var(--ink-2);padding:11px 14px;
  border-bottom:1px solid var(--line-2);white-space:nowrap
}
table.data thead th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
table.data thead th a::after{content:"↕";opacity:.35;font-size:.85em}
table.data thead th a.asc::after{content:"↑";opacity:1;color:var(--purple)}
table.data thead th a.desc::after{content:"↓";opacity:1;color:var(--purple)}
table.data tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr:hover td{background:var(--surface-2)}
table.data .ttl{font-weight:800;min-width:200px}
table.data .ttl a{color:var(--ink)}
table.data .ttl small{display:block;font-weight:600;color:var(--muted);font-size:.76rem;margin-top:1px}
table.data .num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.data .cta{text-align:right;white-space:nowrap}
.vol{
  display:inline-flex;align-items:baseline;gap:2px;font-weight:900;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.vol i{font-style:normal;font-size:1.24em}
.hide{display:none !important}
.empty{padding:38px 20px;text-align:center;color:var(--muted);font-size:.9rem}

/* =========================================================
   7. 資産A：作品ページ
   ========================================================= */
.hero-ac{
  background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:26px 26px 24px;margin-bottom:22px;position:relative;overflow:hidden
}
.hero-ac h1{font-size:clamp(1.32rem,4.2vw,1.85rem);font-weight:900;margin-bottom:10px}
.hero-ac .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.answer{
  background:var(--surface);border-radius:var(--r-l);padding:20px 22px;box-shadow:var(--sh-2);
  display:flex;gap:26px;flex-wrap:wrap;align-items:center
}
.answer .col{min-width:120px}
.answer .k{font-size:.74rem;font-weight:800;color:var(--muted);letter-spacing:.04em;margin-bottom:2px}
.answer .v{font-size:1.06rem;font-weight:800;font-variant-numeric:tabular-nums}
.answer .arrow{font-size:1.4rem;color:var(--muted)}
.answer .big{font-size:1.7rem;line-height:1.2}
.verified{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--ink-2);margin-top:14px}
.verified .dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}

.cta-box{
  border:1px solid var(--line);border-radius:var(--r-l);padding:20px;background:var(--surface);margin:26px 0
}
.cta-box h2{font-size:1.02rem;font-weight:800;margin-bottom:4px}
.cta-box .sub{font-size:.83rem;color:var(--ink-2);margin:0 0 14px}
.cta-list{display:grid;gap:9px}
.cta-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-m);text-decoration:none;color:var(--ink);background:var(--surface-2);transition:border-color .14s,transform .12s
}
.cta-row:hover{border-color:var(--purple);transform:translateX(2px);text-decoration:none}
.cta-row .nm{font-weight:800;font-size:.92rem}
.cta-row .ds{font-size:.76rem;color:var(--muted)}
.cta-row .go{margin-left:auto;font-size:.83rem;font-weight:800;color:var(--purple-ink);white-space:nowrap}

.kv{width:100%;border-collapse:collapse;font-size:.88rem;margin:18px 0}
.kv th{text-align:left;width:34%;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);font-weight:700;color:var(--ink-2);font-size:.82rem}
.kv td{padding:10px 12px;border:1px solid var(--line)}

/* =========================================================
   8. 資産B：配信終了
   ========================================================= */
.days{
  display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:5px 10px;
  border-radius:999px;font-weight:900;font-size:.83rem;font-variant-numeric:tabular-nums
}
.days.d0{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.days.d1{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.days.d2{background:var(--purple-soft);color:var(--purple-ink)}
.days.dx{background:transparent;color:var(--muted);border:1px dashed var(--line-2)}
.alert-cta{
  background:var(--grad);color:#fff;border-radius:var(--r-xl);padding:24px 26px;margin:26px 0;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;box-shadow:var(--sh-2)
}
.alert-cta h2{font-size:1.1rem;font-weight:900;margin-bottom:4px;color:#fff}
.alert-cta p{margin:0;font-size:.86rem;opacity:.94}
.alert-cta .btn{background:#fff;color:var(--pink-ink);box-shadow:none}
.alert-cta .btn:hover{color:var(--pink-ink)}

/* =========================================================
   9. 資産C：投票
   ========================================================= */
.poll{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);padding:22px;box-shadow:var(--sh-1)}
.poll h2{font-size:1.06rem;font-weight:900;margin-bottom:3px}
.poll .dl{font-size:.79rem;color:var(--muted);margin:0 0 16px}
.opts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.opt{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:13px 15px;
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface-2);
  cursor:pointer;font-weight:700;font-size:.92rem;position:relative;overflow:hidden;transition:border-color .14s
}
.opt:hover{border-color:var(--purple)}
.opt[disabled]{cursor:default}
.opt .fill{position:absolute;inset:0 auto 0 0;background:var(--purple-soft);width:0;transition:width .5s cubic-bezier(.2,.7,.2,1);z-index:0}
.opt.mine .fill{background:color-mix(in srgb,var(--pink) 18%,transparent)}
.opt .lb,.opt .pc{position:relative;z-index:1}
.opt .lb{flex:1;min-width:0}
.opt .pc{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--ink-2);white-space:nowrap}
.opt .rk{
  position:relative;z-index:1;width:24px;height:24px;border-radius:8px;background:var(--surface);
  display:grid;place-items:center;font-size:.76rem;font-weight:900;color:var(--purple-ink);flex:none;
  border:1px solid var(--line-2)
}
.opt.mine .rk{background:var(--grad);color:#fff;border-color:transparent}
.poll .tot{font-size:.78rem;color:var(--muted);margin:14px 0 0;text-align:right;font-variant-numeric:tabular-nums}
.poll .msg{font-size:.83rem;color:var(--good);margin:12px 0 0;font-weight:700}

/* =========================================================
   10. 記事本文
   ========================================================= */
.entry{font-size:1.005rem}
.entry > *:first-child{margin-top:0}
.entry p{margin:0 0 1.35em}
.entry h2{
  font-size:1.24rem;font-weight:900;margin:2.2em 0 .8em;padding-bottom:.4em;
  border-bottom:2px solid var(--line-2);position:relative
}
.entry h2::after{content:"";position:absolute;left:0;bottom:-2px;width:74px;height:2px;background:var(--grad)}
.entry h3{font-size:1.09rem;font-weight:800;margin:1.9em 0 .6em;padding-left:11px;border-left:4px solid var(--pink);border-radius:2px}
.entry h4{font-size:1rem;font-weight:800;margin:1.6em 0 .5em}
.entry ul,.entry ol{margin:0 0 1.35em;padding-left:1.5em}
.entry li{margin-bottom:.4em}
.entry blockquote{
  margin:0 0 1.35em;padding:14px 18px;background:var(--surface-2);
  border-left:4px solid var(--purple);border-radius:0 var(--r-m) var(--r-m) 0;color:var(--ink-2)
}
.entry blockquote p:last-child{margin-bottom:0}
.entry code{background:var(--surface-2);padding:.15em .45em;border-radius:5px;font-size:.9em;border:1px solid var(--line)}
.entry pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:15px;overflow:auto}
.entry pre code{background:none;border:none;padding:0}
.entry table{width:100%;border-collapse:collapse;font-size:.88rem;margin:0 0 1.35em;display:block;overflow-x:auto}
.entry th,.entry td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.entry th{background:var(--surface-2);font-weight:700}
.entry figure{margin:0 0 1.35em}
.entry figcaption{font-size:.79rem;color:var(--muted);margin-top:6px;text-align:center}
.entry hr{border:none;border-top:1px solid var(--line);margin:2.2em 0}
.entry a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.entry .wp-block-embed{margin:0 0 1.35em}
.entry iframe{max-width:100%;border-radius:var(--r-m)}
.entry .aligncenter{margin-left:auto;margin-right:auto}

.crumbs{font-size:.77rem;color:var(--muted);margin:18px 0 12px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--muted)}
.crumbs span{opacity:.5}
.post-head{margin-bottom:22px}
.post-head h1{font-size:clamp(1.34rem,4.4vw,2rem);font-weight:900;margin:8px 0 12px}
.post-meta{display:flex;gap:12px;align-items:center;font-size:.79rem;color:var(--muted);flex-wrap:wrap}
.toc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;margin:0 0 26px}
.toc b{display:block;font-size:.86rem;margin-bottom:8px}
.toc ol{margin:0;padding-left:1.3em;font-size:.87rem}
.toc li{margin-bottom:.25em}

.tagrow{display:flex;gap:7px;flex-wrap:wrap;margin:26px 0}
.pager{display:flex;justify-content:center;gap:6px;margin:34px 0;flex-wrap:wrap}
.pager .page-numbers{
  min-width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  border:1px solid var(--line-2);font-size:.87rem;font-weight:700;text-decoration:none;color:var(--ink-2);padding:0 10px
}
.pager .page-numbers:hover{border-color:var(--purple);text-decoration:none}
.pager .current{background:var(--grad);color:#fff;border-color:transparent}

/* =========================================================
   11. フッター
   ========================================================= */
.site-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:52px;padding:34px 0 26px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(auto-fit,minmax(140px,1fr));gap:26px}
.fgrid h4{font-size:.83rem;font-weight:800;margin-bottom:9px;color:var(--ink)}
.fgrid ul{list-style:none;margin:0;padding:0;font-size:.84rem}
.fgrid li{margin-bottom:6px}
.fgrid a{color:var(--ink-2)}
.fnote{font-size:.78rem;color:var(--muted);margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);line-height:1.8}

/* メール登録 */
.sub-box{background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;text-align:center}
.sub-box h2{font-size:1.06rem;font-weight:900;margin-bottom:5px}
.sub-box p{font-size:.85rem;color:var(--ink-2);margin:0 0 15px}
.sub-form{display:flex;gap:8px;max-width:420px;margin:0 auto;flex-wrap:wrap}
.sub-form input{flex:1;min-width:180px;border:1px solid var(--line-2);border-radius:999px;padding:11px 18px;background:var(--surface)}

/* 印刷 */
@media print{
  .site-header,.site-footer,.tools,.cta-box,.alert-cta,.sub-box,.hbtn{display:none}
  body{background:#fff}
  .tbl-wrap{overflow:visible;box-shadow:none}
  table.data{min-width:0}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* =========================================================
   12. プレミアムレイヤー（同梱画像 + ガラス質 + 発光）
   ========================================================= */
:root{
  --hero-img: url("assets/img/hero-light.webp");
  --glass: rgba(255,255,255,.62);
  --glass-line: rgba(255,255,255,.72);
  --glass-blur: saturate(1.5) blur(18px);
  --on-hero: #1b1523;
  --on-hero-2: #4a4159;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    --hero-img: url("assets/img/hero-dark.webp");
    --glass: rgba(28,23,32,.52);
    --glass-line: rgba(255,255,255,.13);
    --on-hero:#ffffff;
    --on-hero-2:#ded6ea;
  }
}
:root[data-theme="dark"]{
  --hero-img: url("assets/img/hero-dark.webp");
  --glass: rgba(28,23,32,.52);
  --glass-line: rgba(255,255,255,.13);
  --on-hero:#ffffff;
  --on-hero-2:#ded6ea;
}

/* 微細なグレインを全面に薄く敷く（安い印象を消す一番効く手） */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("assets/img/grain.png");background-size:96px 96px;
  opacity:.5;mix-blend-mode:multiply
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])) body::before{mix-blend-mode:overlay;opacity:.35}
}
:root[data-theme="dark"] body::before{mix-blend-mode:overlay;opacity:.35}
/* 粒子レイヤー(body::before)より前に出す。
   .site-header をここに含めると position:sticky が relative に上書きされ、
   admin-bar 用の top:32px がそのまま下の要素に重なるので必ず分ける。 */
main,.site-footer{position:relative;z-index:1}
.site-header{position:sticky;z-index:50}

/* ---------- ヒーロー ---------- */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(30px,5vw,62px) clamp(22px,4vw,52px);
  margin-top:26px;isolation:isolate;
  border:1px solid var(--glass-line);box-shadow:var(--sh-3)
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-img);background-size:cover;background-position:60% 40%
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("assets/img/sparkle.webp");background-size:cover;background-position:center;
  opacity:.85;mix-blend-mode:screen
}
.hero-in{position:relative;max-width:44rem}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:.12em;
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--on-hero-2);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)
}
.hero h1{
  font-size:clamp(1.62rem,5.2vw,3rem);font-weight:900;letter-spacing:-.035em;line-height:1.28;
  color:var(--on-hero);margin-bottom:14px;text-wrap:balance
}
.hero h1 em{
  font-style:normal;position:relative;white-space:nowrap;
  background:linear-gradient(100deg,#ff2d7f,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
:root[data-theme="dark"] .hero h1 em,
:where(:not([data-theme="light"])) .hero h1 em{filter:brightness(1.25)}
.hero p{color:var(--on-hero-2);font-size:clamp(.9rem,2.2vw,1.02rem);margin:0 0 22px;max-width:46ch}
.hero .acts{display:flex;gap:11px;flex-wrap:wrap}
.hero .mascot{
  position:absolute;right:clamp(-30px,2vw,40px);bottom:-14px;width:clamp(120px,17vw,208px);
  z-index:0;filter:drop-shadow(0 14px 34px rgba(160,60,140,.28));
  animation:float 6s ease-in-out infinite
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@media (max-width:720px){.hero .mascot{width:104px;right:-8px;bottom:-8px;opacity:.9}}

/* ---------- 数字を見せるKPI帯 ---------- */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin-top:22px
}
.kpi{background:var(--surface);padding:16px 18px}
.kpi .k{font-size:.72rem;font-weight:800;color:var(--muted);letter-spacing:.04em}
.kpi .v{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;line-height:1.2;margin-top:2px}
.kpi .v span{font-size:.62em;font-weight:800;color:var(--ink-2);margin-left:2px}

/* ---------- ガラス質カード ---------- */
.card,.pcard,.tbl-wrap,.tools,.cta-box,.poll,.kv td,.kv th{position:relative}
.pcard{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.pcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)
}
:root[data-theme="dark"] .pcard::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* セクション見出しをもう一段強くする */
.sec-head h2{font-size:clamp(1.06rem,2.6vw,1.28rem)}
.sec-head h2::before{width:6px;height:24px;box-shadow:0 2px 10px rgba(255,79,149,.5)}

/* ---------- 主要CTA：発光するグラデ枠 ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);
  transform:translateX(-120%)
}
.btn:hover::after{transform:translateX(120%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.btn:not(.ghost){box-shadow:0 6px 18px rgba(255,79,149,.34),0 1px 0 rgba(255,255,255,.5) inset}
.btn:not(.ghost):hover{box-shadow:0 10px 28px rgba(255,79,149,.44),0 1px 0 rgba(255,255,255,.5) inset}

/* ---------- 資産Aの答えパネルを主役にする ---------- */
.hero-ac{
  background-image:var(--hero-img);background-size:cover;background-position:50% 35%;
  border:1px solid var(--glass-line);box-shadow:var(--sh-3);position:relative;isolation:isolate
}
.hero-ac::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.72))
}
:root[data-theme="dark"] .hero-ac::before{background:linear-gradient(180deg,rgba(20,16,23,.52),rgba(20,16,23,.82))}
.hero-ac h1{color:var(--on-hero)}
.answer{
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line)
}
.answer .big .vol i{font-size:1.5em}

/* ---------- 青海波のアクセント（和のニュアンス） ---------- */
.sub-box{position:relative;overflow:hidden;isolation:isolate}
.sub-box::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.16;
  background-image:url("assets/img/seigaiha.svg");background-size:120px 60px
}
.alert-cta{position:relative;overflow:hidden;isolation:isolate}
.alert-cta::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.22;
  background-image:url("assets/img/seigaiha.svg");background-size:110px 55px;filter:brightness(4)
}
.alert-cta > *{position:relative;z-index:1}

/* ---------- テーブルの質感を上げる ---------- */
.tbl-wrap{box-shadow:var(--sh-2)}
table.data thead th{
  background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 70%,var(--purple-soft)));
  backdrop-filter:blur(8px)
}
table.data tbody tr{transition:background .12s}
table.data .vol i{text-shadow:0 2px 12px rgba(255,79,149,.22)}

/* ---------- 空状態にマスコットを出す ---------- */
.empty-art{display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 20px;text-align:center}
.empty-art img{width:112px;opacity:.95}

/* ---------- フッターの発光ライン ---------- */
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--grad);opacity:.85}

/* ---------- スクロールバー ---------- */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:var(--purple)}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- 選択色 ---------- */
::selection{background:rgba(255,79,149,.24)}

/* =========================================================
   13. フッター修正・ウィジェット・管理バー対応
   ========================================================= */
.fgrid{grid-template-columns:1.7fr 1fr 1fr 1.2fr}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr;gap:22px}}

/* フッターウィジェット（WPが自動で入れる既定ウィジェットも整える） */
.fw h4,.fw .widget-title,.fw h2{font-size:.83rem;font-weight:800;margin:0 0 9px;color:var(--ink)}
.fw ul{list-style:none;margin:0 0 16px;padding:0;font-size:.84rem}
.fw li{margin-bottom:6px;line-height:1.6}
.fw a{color:var(--ink-2)}
.fw + .fw{margin-top:16px}
.fw form{display:flex;gap:8px;margin:0 0 16px}
.fw input[type=search],.fw input[type=text]{
  flex:1;min-width:0;border:1px solid var(--line-2);border-radius:999px;
  padding:9px 14px;background:var(--surface-2);font-size:.85rem
}
.fw input[type=submit],.fw button[type=submit]{
  border:none;border-radius:999px;padding:9px 16px;background:var(--grad);color:#fff;
  font-weight:800;font-size:.82rem;cursor:pointer;white-space:nowrap
}
.fw label{font-size:.8rem;color:var(--muted)}
.fw select{width:100%;border:1px solid var(--line-2);border-radius:var(--r-s);padding:8px 10px;background:var(--surface-2);font-size:.84rem}
.fw .wp-block-search__inside-wrapper{display:flex;gap:8px}
.fw table{width:100%;font-size:.78rem}

/* 管理バーが出ているときの sticky ヘッダー位置 */
@media screen and (min-width:783px){body.admin-bar .site-header{top:32px}}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}
@media screen and (max-width:880px){body.admin-bar .nav{top:calc(62px + 46px)}}

/* 検索フォームのボタンが縮まないように */
.sub-form button,.sub-form .btn{white-space:nowrap}

/* =========================================================
   14. 写真ヒーロー（AI生成の夜景を使う。文字は常に白）
   ========================================================= */
:root{
  --hero-img: url("assets/img/hero-dark.webp");
  --on-hero:#ffffff;
  --on-hero-2:rgba(255,255,255,.88);
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){ --hero-img: url("assets/img/hero-dark.webp"); --on-hero:#fff; --on-hero-2:rgba(255,255,255,.88) }
}
:root[data-theme="dark"]{ --hero-img: url("assets/img/hero-dark.webp"); --on-hero:#fff; --on-hero-2:rgba(255,255,255,.88) }

.hero{min-height:clamp(300px,38vw,430px);display:flex;align-items:center}
.hero::before{background-position:70% 65%}
/* 左上〜中央を暗く落として、白文字のコントラストを確保する */
.hero .scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(12,8,18,.80) 0%,rgba(12,8,18,.62) 42%,rgba(12,8,18,.18) 72%,rgba(12,8,18,.05) 100%),
    linear-gradient(180deg,rgba(12,8,18,.28),rgba(12,8,18,.10) 45%,rgba(12,8,18,.34))
}
.hero .eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff}
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero h1 em{
  background:linear-gradient(100deg,#ff8fc0,#c4a6ff);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;filter:none
}
.hero p{text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero .btn.ghost{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34);color:#fff}
.hero .btn.ghost:hover{background:rgba(255,255,255,.2);color:#fff;border-color:#fff}
.hero .mascot{filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
@media (max-width:720px){.hero .scrim{background:linear-gradient(180deg,rgba(12,8,18,.72),rgba(12,8,18,.58) 60%,rgba(12,8,18,.78))}}

/* 資産Aの答えパネルも同じ扱い */
.hero-ac{background-image:var(--hero-img);background-position:70% 60%}
.hero-ac::before{background:linear-gradient(110deg,rgba(12,8,18,.82) 0%,rgba(12,8,18,.66) 50%,rgba(12,8,18,.34) 100%)}
:root[data-theme="dark"] .hero-ac::before{background:linear-gradient(110deg,rgba(12,8,18,.86) 0%,rgba(12,8,18,.7) 50%,rgba(12,8,18,.4) 100%)}
.hero-ac h1,.hero-ac .verified{color:#fff}
.hero-ac .chips .badge.ghost{border-color:rgba(255,255,255,.34);color:rgba(255,255,255,.86)}
.answer{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.5);color:var(--ink)}
:root[data-theme="dark"] .answer{background:rgba(28,23,32,.86);border-color:rgba(255,255,255,.14)}
.answer .k{color:var(--muted)}

/* 配信終了バンドにも写真を敷く */
.alert-cta{
  background-image:linear-gradient(100deg,rgba(216,27,112,.92),rgba(109,63,224,.88)),url("assets/img/band.webp");
  background-size:cover;background-position:center;background-blend-mode:multiply,normal
}
.alert-cta::before{opacity:.14}

/* マスコット（AI生成の切り抜きPNG/WebP）— SVG前提の指定を上書き */
.hero .mascot{width:clamp(140px,19vw,250px);bottom:-6px;right:clamp(-14px,2vw,44px)}
@media (max-width:720px){.hero .mascot{width:118px;right:-6px;bottom:-4px;opacity:.92}}
.empty-art img{width:150px}

/* CTAボックスのアイコンと管理者向けヒント */
.cta-box{position:relative;padding-top:24px}
.cta-ico{position:absolute;right:18px;top:16px;width:52px;height:52px;opacity:.9;pointer-events:none}
.cta-ico img{width:100%;height:auto}
.cta-box h2{padding-right:64px}
.admin-hint{
  font-size:.76rem;color:var(--muted);margin:14px 0 0;padding:9px 12px;
  background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r-s);line-height:1.7
}
.sec-head .ico,.sec-ico{width:34px;height:34px;flex:none}
.sec-head h2 .ico{margin-right:2px}

/* =========================================================
   15. 3つの道具カード / セクションアイコン
   ========================================================= */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.feat{
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:26px 22px 22px;border-radius:var(--r-l);text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .16s,box-shadow .16s,border-color .16s
}
.feat::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad);opacity:.9
}
.feat:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--purple);text-decoration:none}
.feat .fic{
  width:76px;height:76px;border-radius:20px;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 30% 25%,var(--pink-soft),var(--purple-soft));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)
}
.feat .fic img{width:56px;height:auto}
.feat h3{font-size:1.02rem;font-weight:800;margin-top:4px}
.feat p{margin:0;font-size:.85rem;color:var(--ink-2);line-height:1.8}
.feat .go{margin-top:auto;padding-top:6px;font-size:.84rem;font-weight:800;color:var(--purple-ink)}

.sec-head h2 img.ico{width:30px;height:30px;flex:none;margin-right:-2px}
.sub-box{position:relative;padding-top:30px}
.sub-ico{position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  width:60px;height:60px;border-radius:18px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.sub-ico img{width:40px;height:auto}
.sec .sub-box{margin-top:42px}

/* =========================================================
   16. 最新話レビュー / グッズ導線
   ========================================================= */
.rv-head{
  background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r-l);
  padding:18px 20px;margin:0 0 24px
}
.rv-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.rv-score{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.rv-score .stars{font-size:1.34rem;letter-spacing:2px;line-height:1}
.rv-score .stars i{font-style:normal;color:var(--line-2)}
.rv-score .stars i.on{color:#ffb400}
.rv-score .stars i.half{background:linear-gradient(90deg,#ffb400 50%,var(--line-2) 50%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rv-score b{font-size:1.5rem;font-weight:900;letter-spacing:-.02em}
.rv-score small{color:var(--muted);font-size:.8rem}
.rv-verdict{margin:0;font-size:1rem;font-weight:700;line-height:1.75}

.cta-box.hilite{border-color:var(--pink);box-shadow:0 6px 24px rgba(255,79,149,.16)}
.cta-box.hilite h2{padding-right:64px}
.cta-box.goods .cta-list{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));display:grid}
.sell-note{
  display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px;
  border-radius:var(--r-m);background:var(--surface-2);border:1px dashed var(--line-2)
}
.sell-note .sic{width:44px;height:44px;flex:none;display:grid;place-items:center}
.sell-note b{display:block;font-size:.92rem;margin-bottom:4px}
.sell-note p{margin:0 0 10px;font-size:.82rem;color:var(--ink-2);line-height:1.8}

/* =========================================================
   17. 動く部品（インタラクティブ・ウィジェット）
   ========================================================= */
.iw{
  margin:34px 0;padding:22px 22px 20px;border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-2);
  position:relative;overflow:hidden
}
.iw::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)
}
.iw-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.iw-ico{width:44px;height:44px;flex:none;display:grid;place-items:center}
.iw-ico img,.iw-ico svg{width:100%;height:100%;object-fit:contain}
.iw-head b{display:block;font-size:1.02rem;line-height:1.55;letter-spacing:-.01em;margin-bottom:5px}
.iw-head p{margin:0;font-size:.83rem;color:var(--ink-2);line-height:1.85}

/* --- スライダー --- */
.iw-controls{display:grid;gap:14px;margin-bottom:20px}
@media (min-width:720px){ .iw-controls{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 22px} }
.iw-controls label{display:block}
.iw-controls label>span{
  display:block;font-size:.78rem;font-weight:700;color:var(--ink-2);margin-bottom:7px;
  font-variant-numeric:tabular-nums
}
.iw-controls output{
  display:inline-block;min-width:2.4em;padding:1px 7px;margin:0 2px;border-radius:999px;
  background:var(--pink-soft);color:var(--pink-ink);font-weight:800;text-align:center
}
.iw input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;
  cursor:grab;display:block;margin:0
}
.iw input[type=range]:active{cursor:grabbing}
.iw input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;background:var(--line-2)
}
.iw input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:var(--surface);border:3px solid var(--pink);box-shadow:var(--sh-2);transition:transform .12s
}
.iw input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.iw input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--purple);outline-offset:2px}
.iw input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--line-2)}
.iw input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--surface);
  border:3px solid var(--pink);box-shadow:var(--sh-2)
}

/* --- 横棒の比較 --- */
.iw-bars{display:grid;gap:14px}
.iw-bar-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
.iw-bar-l b{font-size:.86rem}
.iw-bar-l span{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.iw-track{
  position:relative;height:38px;border-radius:var(--r-s);background:var(--surface-2);
  border:1px solid var(--line);overflow:hidden
}
.iw-track>i{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:var(--r-s);
  background:linear-gradient(90deg,#b45cf0,#8b5cf6);
  transition:width .45s cubic-bezier(.22,1,.36,1)
}
.iw-bar[data-plan=a] .iw-track>i{background:linear-gradient(90deg,#ff4f95,#ff7db2)}
.iw-bar.win .iw-track{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink-soft)}
.iw-track>em{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  padding:3px 10px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-style:normal;font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;
  color:var(--ink)
}
.iw-verdict{
  margin:18px 0 0;padding:13px 15px;border-radius:var(--r-m);
  background:var(--grad-soft);border:1px solid var(--line-2);
  font-size:.88rem;font-weight:700;line-height:1.8
}
.iw-verdict b{color:var(--pink-ink)}
.iw-rate{margin:10px 0 0;font-size:.8rem;color:var(--ink-2);line-height:1.85}
.iw-foot{margin:14px 0 0;font-size:.74rem;color:var(--muted);line-height:1.8}

/* --- カード2枚の比較 --- */
.iw-cards{display:grid;gap:14px}
@media (min-width:660px){ .iw-cards{grid-template-columns:1fr 1fr} }
.iw-card{
  padding:16px;border-radius:var(--r-m);background:var(--surface-2);
  border:1px solid var(--line);transition:border-color .2s,box-shadow .2s
}
.iw-card.win{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink-soft)}
.iw-card>b{display:block;font-size:.86rem;margin-bottom:8px}
.iw-big{
  font-size:1.72rem;font-weight:900;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums;margin-bottom:10px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent
}
.iw-card ul{margin:0;padding-left:1.15em;font-size:.76rem;color:var(--ink-2);line-height:1.9}
.iw-card ul li{margin:0}
.iw-time{
  margin-top:10px;padding-top:9px;border-top:1px dashed var(--line-2);
  font-size:.78rem;font-weight:700;color:var(--warn);font-variant-numeric:tabular-nums
}

/* --- 巻ズレの図 --- */
.diagram{padding-bottom:18px}
.diagram svg{width:100%;height:auto;display:block;overflow:visible}
.diagram figcaption{
  margin-top:12px;font-size:.8rem;color:var(--ink-2);line-height:1.85
}
.vg-lbl{font-size:12px;font-weight:800;fill:var(--muted)}
.vg-vol{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1.5}
.vg-num{font-size:12px;font-weight:800;fill:var(--ink-2);text-anchor:middle}
.vg-anime{filter:drop-shadow(0 2px 8px rgba(255,79,149,.35))}
.vg-line{stroke:var(--pink);stroke-width:2;stroke-dasharray:4 4}
.vg-mk{font-size:12px;font-weight:800;fill:var(--pink-ink)}
.vg-seen{fill:var(--danger);opacity:.16}
.vg-warn-t{font-size:11.5px;font-weight:700;fill:var(--danger)}
.vg-ok-t{font-size:13px;font-weight:900;fill:var(--good)}
.iw-replay{
  margin-top:14px;display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);
  font-size:.78rem;font-weight:700;font-family:inherit
}
.iw-replay::before{content:"↻";font-size:1rem;line-height:1}
.iw-replay:hover{border-color:var(--pink);color:var(--pink-ink)}

/* --- カウントダウン --- */
.cd{background:var(--grad-soft)}
.cd-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.cd-head b{display:block;font-size:1rem;line-height:1.5;margin-bottom:4px}
.cd-head p{margin:0;font-size:.8rem;color:var(--ink-2)}
.cd-nums{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cd-nums>span{
  flex:1 1 74px;min-width:70px;padding:12px 6px 10px;text-align:center;
  border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--sh-1)
}
.cd-nums em{
  display:block;font-style:normal;font-size:1.72rem;font-weight:900;line-height:1.1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent
}
.cd-nums i{display:block;margin-top:3px;font-style:normal;font-size:.7rem;font-weight:700;color:var(--muted)}
.cd.over .cd-nums{opacity:.45}
.cd-over{margin:0 0 14px;font-size:.86rem;font-weight:800;color:var(--danger)}

/* --- YouTube 遅延埋め込み --- */
.ytlazy{margin:30px 0}
.ytlazy-btn{
  display:block;width:100%;padding:0;border:1px solid var(--line-2);cursor:pointer;
  position:relative;border-radius:var(--r-l);overflow:hidden;background:#000;
  aspect-ratio:16/9;font-family:inherit
}
.ytlazy-btn img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);transition:transform .5s,opacity .3s;opacity:.94
}
.ytlazy-btn:hover img{transform:scale(1.05);opacity:1}
/* maxresdefault が無い動画は 480x360 の 4:3 にフォールバックする。
   そのときだけ黒帯を切るために拡大する。 */
.ytlazy.is-4x3 .ytlazy-btn img{transform:scale(1.34)}
.ytlazy.is-4x3 .ytlazy-btn:hover img{transform:scale(1.4)}
.ytlazy-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:70px;height:70px;border-radius:50%;background:var(--grad);
  box-shadow:0 8px 30px rgba(0,0,0,.45);display:grid;place-items:center
}
.ytlazy-play::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:21px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent
}
.ytlazy-btn:hover .ytlazy-play{transform:translate(-50%,-50%) scale(1.08)}
.ytlazy-ttl{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;text-align:left;
  color:#fff;font-size:.9rem;font-weight:800;line-height:1.5;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.45) 55%,transparent);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.ytlazy iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-l)}
.ytlazy figcaption{margin-top:10px;font-size:.74rem;color:var(--muted);line-height:1.8}

@media (prefers-reduced-motion:reduce){
  .iw-track>i,.ytlazy-btn img,.ytlazy-btn:hover .ytlazy-play{transition:none}
}

/* =========================================================
   18. 今期アニメ ラインナップ
   ========================================================= */
.lineup{display:grid;gap:26px;margin:28px 0}
@media (min-width:860px){ .lineup{grid-template-columns:1fr 1fr;gap:26px 24px} }
.lu{
  padding:18px 18px 16px;border-radius:var(--r-l);background:var(--surface);
  border:1px solid var(--line-2);box-shadow:var(--sh-1);
  display:flex;flex-direction:column
}
.lu-t{
  margin:0 0 9px;font-size:1.02rem;line-height:1.5;letter-spacing:-.01em;
  padding:0;border:0;background:none
}
.lu-t::before{content:none}
.lu-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.lu-slot,.lu-ep{
  font-size:.73rem;font-weight:700;padding:3px 9px;border-radius:999px;line-height:1.6
}
.lu-slot{background:var(--purple-soft);color:var(--purple-ink)}
.lu-ep{background:var(--pink-soft);color:var(--pink-ink)}
.lu .ytlazy{margin:0 0 14px}
.lu .ytlazy-btn{border-radius:var(--r-m)}
.lu .ytlazy iframe{border-radius:var(--r-m)}
.lu .ytlazy-play{width:54px;height:54px}
.lu .ytlazy-play::after{border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.lu .ytlazy-ttl{font-size:.78rem;padding:26px 12px 11px;line-height:1.45}
.lu .ytlazy figcaption{
  font-size:.68rem;margin-top:8px;text-align:left;color:var(--muted);
  display:inline-flex;align-items:center;gap:5px
}
.lu .ytlazy figcaption::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--good);flex:none
}
.lu-exits{display:grid;gap:8px;margin-top:auto}
.lu-exit{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-m);
  background:var(--surface-2);border:1px solid var(--line);text-decoration:none;
  font-size:.82rem;font-weight:700;color:var(--ink);transition:border-color .18s,transform .18s
}
.lu-exit:hover{border-color:var(--pink);transform:translateX(2px)}
.lu-exit-ico{width:26px;height:26px;flex:none;display:grid;place-items:center}
.lu-exit-ico img{width:100%;height:100%;object-fit:contain}
.lu-exit>span:nth-child(2){flex:1}
.lu-go{color:var(--pink-ink);font-weight:900;flex:none}
.lu-note{
  margin:26px 0;padding:16px 18px;border-radius:var(--r-m);
  background:var(--surface-2);border:1px dashed var(--line-2)
}
.lu-note p{margin:0 0 9px;font-size:.79rem;color:var(--ink-2);line-height:1.85}
.lu-note p:last-child{margin-bottom:0}
.lu-src{font-size:.76rem}
.lu-src a{color:var(--pink-ink)}

/* --- 送る前チェックリスト --- */
.sendcheck .sc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sendcheck .sc-list li{
  border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--line);
  transition:border-color .18s,background .18s
}
.sendcheck .sc-list li.done{border-color:var(--good);background:var(--surface)}
.sendcheck .sc-list label{
  display:flex;gap:11px;align-items:flex-start;padding:12px 14px;cursor:pointer;
  font-size:.83rem;line-height:1.8;color:var(--ink-2)
}
.sendcheck .sc-list li.done label{color:var(--ink)}
.sendcheck input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin:3px 0 0;border-radius:6px;cursor:pointer;
  border:2px solid var(--line-2);background:var(--surface);position:relative;transition:.16s
}
.sendcheck input[type=checkbox]:checked{background:var(--good);border-color:var(--good)}
.sendcheck input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)
}
.sendcheck input[type=checkbox]:focus-visible{outline:3px solid var(--purple);outline-offset:2px}

/* --- 記事ごとのヒーロー画像 --- */
.art-hero{
  margin:0 0 26px;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-2);position:relative;line-height:0
}
.art-hero img{width:100%;height:auto;display:block;aspect-ratio:16/7;object-fit:cover}
.art-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.18) 100%)
}

/* --- 作品ごとの個別ページカード --- */
.tcard{margin:0 0 24px}
.tcard .kv{margin:0 0 12px}
.tcard .verified{margin:0}
.tcard + .iw.cd{margin-top:0}

/* =========================================================
   19. 受注締切カレンダー
   ========================================================= */
.podl{margin:26px 0;display:grid;gap:16px}
.podl-g{
  border-radius:var(--r-l);background:var(--surface);
  border:1px solid var(--line-2);overflow:hidden
}
.podl-g.is-soon{border-color:var(--warn)}
.podl-g.is-urgent{border-color:var(--danger);box-shadow:0 0 0 2px rgba(213,48,62,.12)}
.podl-h{
  margin:0;padding:13px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:.9rem;font-weight:800;letter-spacing:-.01em
}
.podl-h::before{content:none}
.podl-d{font-variant-numeric:tabular-nums}
.podl-left{
  padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:800;
  background:var(--purple-soft);color:var(--purple-ink)
}
.is-soon .podl-left{background:#fff4e0;color:var(--warn)}
.is-urgent .podl-left{background:var(--pink-soft);color:var(--danger)}
:root[data-theme="dark"] .is-soon .podl-left{background:#2a2110}
.podl-n{margin-left:auto;font-size:.74rem;color:var(--muted);font-weight:700}
.podl-list{list-style:none;margin:0;padding:0}
.podl-list li{border-top:1px solid var(--line)}
.podl-list li:first-child{border-top:0}
.podl-list a{
  display:block;padding:12px 16px;text-decoration:none;transition:background .15s
}
.podl-list a:hover{background:var(--surface-2);text-decoration:none}
.podl-t{display:block;font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.65}
.podl-list a:hover .podl-t{color:var(--pink-ink)}
.podl-meta{display:block;margin-top:4px;font-size:.72rem;color:var(--muted)}
.podl-lb{
  font-style:normal;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--purple-soft);color:var(--purple-ink);font-weight:700
}
.podl-note{margin:6px 0 0;font-size:.74rem;color:var(--muted);line-height:1.85}
.podl-note .verified{margin-top:4px}

/* =========================================================================
 * 20. 手放す側のウィジェット（自治体別分別 / 事前判定 / 出典リスト）
 * ====================================================================== */
.gomi .gomi-pick{grid-column:1/-1}
.gomi select{
  width:100%;padding:11px 14px;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  font:inherit;font-size:.92rem;font-weight:700;cursor:pointer
}
.gomi select:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.gomi .iw-card.g-miss .iw-big{
  background:none;-webkit-text-fill-color:currentColor;color:var(--muted);font-size:1.15rem
}
.gomi-table{margin:14px 0 6px}
.gomi-table table.data tbody td{vertical-align:top;line-height:1.7}
.gomi-table table.data tbody td small{
  display:block;margin-top:3px;color:var(--muted);font-size:.73rem;line-height:1.75;
  font-weight:500;max-width:34ch
}
.gomi-table .g-none{color:var(--muted);font-weight:700}
.src-note{
  margin:8px 0 26px;font-size:.74rem;color:var(--muted);line-height:1.9
}

/* --- 送る前の売れる/売れない判定 --- */
.uresou .ur-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.uresou .ur-list li{
  border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--line);
  border-left:4px solid var(--line-2);transition:border-color .18s,background .18s
}
.uresou .ur-list li[data-lv="ng"]{border-left-color:var(--danger)}
.uresou .ur-list li[data-lv="big"]{border-left-color:var(--warn)}
.uresou .ur-list li[data-lv="cat"]{border-left-color:var(--purple)}
.uresou .ur-list li[data-lv="small"]{border-left-color:var(--line-2)}
.uresou .ur-list li.on{background:var(--surface);border-color:var(--line-2)}
.uresou .ur-list li.on[data-lv="ng"]{background:var(--pink-soft)}
.uresou .ur-list label{
  display:flex;gap:11px;align-items:flex-start;padding:12px 14px;cursor:pointer
}
.uresou .ur-list b{
  display:block;font-size:.86rem;line-height:1.75;color:var(--ink);font-weight:800
}
.uresou .ur-list small{
  display:block;margin-top:4px;font-size:.74rem;color:var(--muted);line-height:1.85
}
.uresou .ur-tag{
  display:inline-block;margin-top:5px;font-style:normal;font-size:.68rem;font-weight:800;
  padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line)
}
.uresou li[data-lv="ng"] .ur-tag{background:var(--pink-soft);color:var(--danger);border-color:transparent}
.uresou li[data-lv="big"] .ur-tag{background:#fff4e0;color:var(--warn);border-color:transparent}
.uresou li[data-lv="cat"] .ur-tag{background:var(--purple-soft);color:var(--purple-ink);border-color:transparent}
:root[data-theme="dark"] .uresou li[data-lv="big"] .ur-tag{background:#2a2110}
/* 何社の公式ページで確認できたか。1社だけのものは弱く見せる（店を変えれば通ることがある）。 */
.uresou .ur-n{
  display:inline-block;margin:5px 0 0 6px;font-style:normal;font-size:.68rem;font-weight:700;
  padding:2px 8px;border-radius:999px;background:transparent;color:var(--muted);
  border:1px dashed var(--line)
}
.uresou input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin:3px 0 0;border-radius:6px;cursor:pointer;
  border:2px solid var(--line-2);background:var(--surface);position:relative;transition:.16s
}
.uresou input[type=checkbox]:checked{background:var(--purple);border-color:var(--purple)}
.uresou input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)
}
.uresou input[type=checkbox]:focus-visible{outline:3px solid var(--purple);outline-offset:2px}

/* --- 出典リスト --- */
.srcbox{
  margin:30px 0 6px;padding:16px 18px;border-radius:var(--r-l);
  background:var(--surface-2);border:1px solid var(--line)
}
.srcbox > b{display:block;font-size:.86rem;color:var(--ink)}
.srcbox > p{margin:4px 0 10px;font-size:.75rem;color:var(--muted);line-height:1.9}
.srcbox ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px
}
.srcbox li{font-size:.74rem}
.srcbox a{color:var(--ink-2)}
.srcbox a:hover{color:var(--pink-ink)}

/* =========================================================================
 * 21. 値動きランキング記事（確定と推測を見た目で分ける）
 * ====================================================================== */
.pw-meta{
  margin:-6px 0 6px;font-size:.76rem;color:var(--muted);font-weight:700;letter-spacing:.02em
}
.pw-price{
  margin:0 0 12px;font-size:1.05rem;font-variant-numeric:tabular-nums
}
.pw-price b{font-size:1.3rem}
.pw-warn{
  margin:16px 0;padding:13px 16px;border-radius:var(--r-m);
  background:#fff4e0;color:#6b4a12;border:1px solid rgba(0,0,0,.06);
  font-size:.86rem;line-height:1.85
}
:root[data-theme="dark"] .pw-warn{background:#2a2110;color:#f0dcb8}
.pw-box{
  margin:0 0 14px;padding:13px 16px 13px 18px;border-radius:var(--r-m);
  background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--line-2)
}
.pw-box > b{
  display:block;font-size:.74rem;font-weight:800;letter-spacing:.06em;
  text-transform:none;margin-bottom:6px
}
.pw-box ul{margin:0;padding-left:1.15em}
.pw-box li{font-size:.85rem;line-height:1.9;color:var(--ink-2)}
.pw-fact{border-left-color:var(--good)}
.pw-fact > b{color:var(--good)}
.pw-guess{border-left-color:var(--purple)}
.pw-guess > b{color:var(--purple-ink)}

/* 買取の出口ボタンに補足を出す */
.cta-row .nm + small{
  display:block;margin-top:2px;font-size:.72rem;color:var(--muted);font-weight:600
}

/* =========================================================================
 * 22. モバイルの表示崩れ修正
 *
 * 実測して見つかった2件を直す。
 * (1) コメント欄の textarea に幅指定が無く、390px幅で31pxはみ出して
 *     ページ全体が横スクロールしていた（記事4本で発生）。
 * (2) table.data の min-width:720px を打ち消す指定が @media print の
 *     中にしか無く、モバイルでは720px幅の横スクロール表のままだった。
 * ====================================================================== */

/* はみ出しを起こしやすい要素にまとめて上限をかける */
img,video,iframe,canvas,svg,table,pre,textarea{max-width:100%}
textarea,input[type=text],input[type=email],input[type=url],input[type=search]{
  width:100%;box-sizing:border-box
}
.comment-form textarea{min-height:9em;border:1px solid var(--line-2);border-radius:var(--r-m);
  background:var(--surface);padding:12px 14px}

/* --- 表をモバイルではカード状に積む ---
   5列の表を横スクロールで読ませるのは実質読めない。
   td に data-label を持たせてある表だけ積み替える。 */
@media (max-width:640px){
  .tbl-wrap{overflow:visible;box-shadow:none;background:none;border:0}
  table.data{min-width:0;display:block;font-size:.9rem}
  table.data thead{display:none}
  table.data tbody,table.data tbody tr,table.data tbody td{display:block;width:auto}
  table.data tbody tr{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
    box-shadow:var(--sh-1);margin:0 0 12px;padding:4px 2px;overflow:hidden
  }
  table.data tbody tr:hover td{background:none}
  table.data tbody td{
    border-bottom:1px solid var(--line);padding:10px 14px;
    display:grid;grid-template-columns:8.5em 1fr;gap:10px;align-items:start
  }
  table.data tbody td:last-child{border-bottom:0}
  table.data tbody td[data-label]::before{
    content:attr(data-label);font-size:.72rem;font-weight:800;color:var(--muted);
    line-height:1.7;padding-top:2px
  }
  table.data tbody td:not([data-label]){display:block}
  table.data .ttl{
    background:var(--surface-2);font-size:1rem;font-weight:900;
    display:block;border-bottom:1px solid var(--line-2)
  }
  table.data tbody td small{max-width:none}
  table.data .cta{text-align:left}
  .gomi-table table.data tbody td{align-items:center}
}

/* カード画像（MTGのみ）。無加工・切り抜きなしで出す */
.pw-card{margin:0 0 14px;text-align:center}
.pw-card img{
  width:auto;max-width:300px;height:auto;border-radius:4.75% / 3.5%;
  box-shadow:0 10px 30px rgba(0,0,0,.32)
}
.pw-card figcaption{
  margin-top:7px;font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.02em
}
.fcp-note{
  margin:26px 0 6px;padding:13px 16px;border-radius:var(--r-m);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:.7rem;color:var(--muted);line-height:1.9
}

/* =========================================================================
 * 23. カード個別ページ
 * ====================================================================== */
.cardpage h1 small{
  display:block;margin-top:5px;font-size:.9rem;font-weight:700;color:var(--muted);letter-spacing:.01em
}
.cardchart{
  margin:18px 0 10px;padding:14px 12px 10px;border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)
}
.cardchart svg{display:block;width:100%;height:auto}
.cardchart figcaption{
  margin-top:8px;text-align:center;font-size:.74rem;color:var(--muted);font-weight:600
}
.cardpage .faq h3{
  font-size:.95rem;margin:18px 0 6px;padding-left:12px;border-left:3px solid var(--purple)
}
.cardpage .faq p{font-size:.87rem;line-height:1.95;color:var(--ink-2)}
.crumbs{font-size:.75rem;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--ink-2)}
.pw-ruby{
  margin:-4px 0 10px;font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.04em
}

/* =========================================================================
 * 24. カード一覧・ページ送り
 * ====================================================================== */
.cardindex table.data .ttl a{
  color:var(--ink);font-weight:800;text-decoration:none;border-bottom:1px solid transparent
}
.cardindex table.data .ttl a:hover{border-bottom-color:var(--pink-ink,#ff4f95)}
.cardindex table.data .ttl small{
  display:block;margin-top:2px;font-size:.68rem;color:var(--muted);font-weight:600
}
.cardpager{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:22px 0 8px
}
.cardpager a,.cardpager span{
  min-width:38px;padding:8px 10px;text-align:center;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);
  font-size:.82rem;font-weight:800;text-decoration:none;color:var(--ink-2)
}
.cardpager a:hover{border-color:var(--pink-ink,#ff4f95);color:var(--ink)}
.cardpager span[aria-current]{
  background:var(--pink-ink,#ff4f95);border-color:var(--pink-ink,#ff4f95);color:#fff
}
.pw-jump{
  margin:10px 0 14px;font-size:.85rem;font-weight:700
}

/* =========================================================================
 * 25. 箱なしフィギュアの一覧
 * ====================================================================== */
.hk-ok,.hk-cond,.hk-none{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.02em;white-space:nowrap
}
.hk-ok{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.hk-cond{background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple)}
.hk-none{background:var(--surface-2);color:var(--muted)}

/* =========================================================================
 * 26. 楽天の日本円相場ブロック
 * ====================================================================== */
.rk-box{
  margin:24px 0;padding:18px 18px 12px;border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)
}
.rk-box>b{
  display:block;margin-bottom:12px;font-size:1rem;letter-spacing:.01em
}
.rk-box .src-note{margin:10px 0 0}
.hk-ng{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  background:color-mix(in srgb,var(--bad,#b32d2e) 14%,transparent);color:var(--bad,#b32d2e)
}
.data td small{display:block;margin-top:3px;font-size:.68rem;color:var(--muted);font-weight:600;line-height:1.6}

/* =========================================================================
 * 27. トレカらしい見た目
 *
 * カードの実物の絵は使わない（MTG以外は権利側が禁止している）。
 * 質感は自前で生成したホロ画像と、CSSのグラデーションだけで出す。
 * assets/img/hero-cards.webp と card-back.png は tools/makeart.py で
 * 生成したもの。虹を全面に塗ると玩具に見えたので、暗い地に光沢の帯を
 * 走らせる形にしてある。
 * ====================================================================== */

/* トップのヒーロー。カードを扇状に並べた画像に差し替える。 */
.hero-tcg::before{
  background-image:url("assets/img/hero-cards.webp");
  background-position:50% 46%
}
.hero-tcg::after{
  /* 生成画像にきらめきが入っているので、上からの重ねは弱める */
  opacity:.35
}
.hero-tcg h1,.hero-tcg p,.hero-tcg .eyebrow{color:#fff}
.hero-tcg p{color:#ded6ea}
.hero-tcg p strong{color:#fff}
.hero-tcg .eyebrow{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#f0e9fb
}

/* カード一覧・個別ページを、カードらしい暗めの面にする。 */
.cardpage,.cardindex{position:relative}
.cardpage h1,.cardindex h1{
  letter-spacing:-.02em
}
.cardpage h1::after,.cardindex h1::after{
  content:"";display:block;height:3px;width:min(220px,42%);margin-top:12px;border-radius:2px;
  background:linear-gradient(90deg,#ff5c9e,#ffb05c,#faf082,#78ebbe,#6eb4ff,#b082ff);
  opacity:.9
}

/* 価格の見せ方。カードのレアリティ表示に寄せる。 */
.pw-price b{
  display:inline-block;padding:8px 18px;border-radius:var(--r-m);
  background:linear-gradient(135deg,rgba(255,92,158,.16),rgba(110,180,255,.16));
  border:1px solid var(--glass-line);
  font-size:clamp(1.25rem,4vw,1.75rem);letter-spacing:-.02em
}

/* カードの周りにフォイルの光を置く。画像の上には何も重ねない。
   Scryfall の画像利用条件が加工と切り抜きを禁止しているので、
   光沢は画像の外側だけに出す。中身は取得したままの状態。 */
.pw-card{position:relative;display:inline-block;isolation:isolate}
.pw-card img{position:relative;z-index:1;display:block;border-radius:4.75% / 3.5%}
/* 後ろに回すにじみ。カードが光を反射しているように見せる。
   虹を全部並べると玩具に見えるので、色は2点だけにして薄く敷く。 */
.pw-card::before{
  content:"";position:absolute;inset:-9px;z-index:0;pointer-events:none;
  border-radius:12px;filter:blur(14px);opacity:.3;
  background:linear-gradient(125deg,#ff5c9e,#7b6cf0 55%,#4fd1c5)
}
/* 画像のすぐ外に出すフォイルの縁。基調は暗く、光る所だけ色を差す。 */
.pw-card::after{
  content:"";position:absolute;inset:-5px;z-index:0;pointer-events:none;
  border-radius:6% / 4.4%;
  background:linear-gradient(125deg,
    #3b3357 0%,#ff7ab0 14%,#2f2a49 32%,#8f7ff0 52%,
    #2f2a49 68%,#66c9f0 86%,#3b3357 100%)
}

/* レアリティの札。一覧のセット名の前に置く。 */
.rar{
  display:inline-block;padding:1px 7px;margin-right:6px;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.02em;
  border:1px solid currentColor;white-space:nowrap;vertical-align:1px
}
.rar-mythic{color:#c2410c;background:rgba(255,138,61,.13)}
.rar-rare{color:#8a6300;background:rgba(224,193,74,.16)}
.rar-uncommon{color:#4a6580;background:rgba(159,180,201,.16)}
.rar-common{color:var(--muted);background:rgba(120,120,140,.10)}
.rar-special,.rar-bonus{color:#7a3ea8;background:rgba(176,130,255,.14)}

/* 一覧のカード名に、左側のホロの細線を足す。 */
.cardindex table.data .ttl{position:relative;padding-left:14px}
.cardindex table.data .ttl::before{
  content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:3px;height:62%;border-radius:2px;
  background:linear-gradient(180deg,#ff5c9e,#b082ff,#6eb4ff);opacity:.75
}
@media (max-width:640px){
  .cardindex table.data .ttl{padding-left:12px}
}

/* カードの一覧・個別の背景に、カード裏の模様をうっすら敷く。 */
.cardpage::before,.cardindex::before{
  content:"";position:absolute;inset:-24px -16px auto;height:340px;z-index:-1;
  background-image:url("assets/img/card-back.png");background-size:120px;
  opacity:.05;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
  mask-image:linear-gradient(180deg,#000,transparent)
}

/* =========================================================================
 * 28. 記事の中の図（SVG）
 *
 * 寸法や分類の図は数字が狂うと嘘になるので、生成画像ではなくSVGで組む。
 * currentColor を使っているので、ダークモードでも文字が読める。
 * ====================================================================== */
.aniyua-fig{
  margin:26px 0;padding:18px 14px 14px;border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(255,92,158,.05),rgba(110,180,255,.05));
  border:1px solid var(--glass-line);color:var(--fg)
}
.aniyua-fig svg{display:block;width:100%;height:auto;max-width:820px;margin:0 auto;overflow:visible}
.aniyua-fig figcaption{
  margin:14px 4px 0;font-size:.86rem;line-height:1.75;color:var(--muted)
}
.aniyua-fig figcaption strong{color:var(--fg)}
@media (max-width:640px){
  .aniyua-fig{padding:12px 8px 10px}
  .aniyua-fig figcaption{font-size:.8rem}
}

/* =========================================================================
 * 29. アイキャッチの注記
 *
 * アイキャッチは生成AIで作った抽象的な絵で、実在のカードは描いていない。
 * 読者が「これが実物の写真」と誤解しないように小さく書いておく。
 * 目立たせる必要は無いので、本文より小さく薄い。
 * ====================================================================== */
.ec-note{
  margin:8px 4px 0;font-size:.76rem;line-height:1.7;color:var(--muted)
}
.ec-note strong{color:var(--muted);font-weight:700}