@charset "utf-8";
/* ============================================================================
   資格データ室（SHIKAKU DATA ROOM）  デザインシステム
   見本 ＝ https://gamewith.jp/pokemon-champions/546414（GameWith 攻略記事）
   見本から持ち帰ったもの：3カラムのデータベース型／高い密度（1画面に素材7つ以上）／
   細かい級数の階段（比率 1.067→こちらは 1.5 の流体スケールで段数を作る）／
   白に近い地に、小面積の高彩度バッジを大量に置く配色／罫線だけの表／小さい角丸。
   持ち帰っていないもの：見本の写真・イラスト・文章・ロゴ。

   ★影は1つも使っていない（R-07／P-13／A-06。2026-08-31 改訂で影ゼロが既定）。
     境界は「面の切り替え・余白・色・1本の線」で作る。
   ★彩度色 --cat-1〜8 は "制度の分類" という1つの役割のスケール（R-03 ③の
     「役割の違う色が4つ以上」には当たらない）。面積の1位は --accent-main（teal）。
   ★外部から読むのは Google Fonts だけ（運営者の指示による R-21 の例外）。
   ========================================================================== */

:root{
  /* 無彩色5段（P-01） */
  --g-1:#EDEFEE; --g-2:#C6CBC9; --g-3:#78817F; --g-4:#39403F; --g-5:#161A19;
  --paper:#FAFAF7;          /* 紙（明るい地） */
  --paper-2:#F1F4F2;        /* 面2 */
  --paper-3:#E6EBE8;        /* 面3 */
  --ink:#171B1A;            /* 本文の色 */
  --ground:#0C2422;         /* 濃い地（FV・ヘッダー） */
  --ground-2:#123A36;

  /* 彩度色：役割つき（R-03 ①） */
  --accent-main:#00786B;    /* 主役＝制度の色。面積1位 */
  --accent-sub:#E08A00;     /* 受け＝期限と数字 */
  --accent-warn:#C41E3A;    /* 注意＝できないこと・戻らないお金 */
  --link:#1552C9;           /* 外へ出るリンクの色 */

  /* 分類スケール（役割は「制度の分類」ひとつ） */
  --cat-1:#00786B; --cat-2:#0E6FA8; --cat-3:#7B4FB5; --cat-4:#C41E3A;
  --cat-5:#E08A00; --cat-6:#1B7F3B; --cat-7:#B4562C; --cat-8:#46566A;

  /* 操作できるものの色は別名前空間（P-19） */
  --form-face:#0F5F55; --form-face-hover:#0B4B43; --form-ink:#F6FAF8;
  --form-line:#B9C4C0; --form-focus:#E08A00;

  /* 透明度は4段だけ（P-02） */
  --a-1:.06; --a-2:.16; --a-3:.34; --a-4:.66;

  /* イージング：1本ずつ名前と用途を持つ（P-11／R-04） */
  --ease-deru:cubic-bezier(.16,.84,.30,1);    /* 出る（入場） */
  --ease-modoru:cubic-bezier(.55,.06,.68,.19);/* 戻る（退場） */
  --ease-men:cubic-bezier(.65,.02,.20,1);     /* 面・マスク */
  --ease-suji:cubic-bezier(.22,1,.36,1);      /* 数字・図の伸び */
  --ease-shazo:cubic-bezier(0,0,1,1);         /* 進捗の等倍写像（P-11 の例外枠。時間の演出ではなく座標変換） */

  /* 時間は変化量で出し分ける */
  --t-iro:.18s; --t-ido:.34s; --t-men:.62s; --t-nyujo:1.1s;

  /* 級数（すべて 1:1.5 の流体スケール・P-09） */
  --fs-display:clamp(40px, 6.4vw, 60px);
  --fs-h1:clamp(28px, 4.4vw, 42px);
  --fs-h2:clamp(22px, 3.4vw, 33px);
  --fs-h3:clamp(18px, 2.5vw, 27px);
  --fs-lede:clamp(17px, 2.1vw, 25.5px);
  --fs-body:16px;
  --fs-lab:13px;
  --fs-note:14px;
  --fs-kyodai:clamp(160px, 16vw, 240px);   /* 図としての数字（1:1.5） */

  /* 行間3段階以上（P-07・R-05） */
  --lh-display:1.02; --lh-h:1.18; --lh-lede:1.62;
  --lh-body:1.88; --lh-lab:1.35; --lh-note:1.6;

  /* 余白の刻み（A-03：実際に鳴る音を4種類以上にする） */
  --sp-1:6px; --sp-2:14px; --sp-3:22px; --sp-4:34px; --sp-5:52px; --sp-6:78px; --sp-7:116px;

  /* 書体：欧文→和文→総称の順（P-04） */
  --font-mi:"Archivo","IBM Plex Sans JP","Hiragino Sans",system-ui,sans-serif;
  --font-hon:"IBM Plex Sans JP","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --font-num:"IBM Plex Mono","Archivo",ui-monospace,monospace;

  --stable-lvh:1vh;
  --col-c:720px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-hon); font-size:var(--fs-body); line-height:var(--lh-body);
  letter-spacing:.02em; font-weight:400;
  font-feature-settings:"palt" 1;              /* 約物の詰め（P-06） */
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--link); text-decoration:none; border-bottom:1px solid rgba(21,82,201,.28);
  transition:color var(--t-iro) var(--ease-deru), border-color var(--t-iro) var(--ease-deru)}
a:hover{color:var(--accent-main); border-bottom-color:var(--accent-main)}
:focus-visible{outline:3px solid var(--form-focus); outline-offset:2px}

/* ── 見出しは「重要度」と「大きさ」を切り離す（P-17：タグでなくクラスで当てる） ── */
.t-display,.t-h1,.t-h2,.t-h3{font-family:var(--font-mi); font-weight:700; margin:0;
  text-wrap:pretty}
.t-display{font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:-.035em;
  font-stretch:118%}
.t-h1{font-size:var(--fs-h1); line-height:var(--lh-h); letter-spacing:-.03em; font-stretch:112%}
.t-h2{font-size:var(--fs-h2); line-height:var(--lh-h); letter-spacing:-.022em}
.t-h3{font-size:var(--fs-h3); line-height:var(--lh-h); letter-spacing:-.012em}
.t-lede{font-size:var(--fs-lede); line-height:var(--lh-lede); letter-spacing:.005em;
  margin:0; color:var(--g-4)}
.t-body{font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:.02em; margin:0}
.t-body + .t-body{margin-top:var(--sp-3)}
.lab{font-family:var(--font-mi); font-size:var(--fs-lab); line-height:var(--lh-lab);
  letter-spacing:.16em; text-transform:uppercase; font-weight:600}
.note{font-size:var(--fs-note); line-height:var(--lh-note); color:var(--g-3); margin:0}
.ph{white-space:nowrap}                        /* 文節ロック（P-21／R-19） */
.n{font-family:var(--font-num); font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
  letter-spacing:.01em}                        /* 数字だけ欧文へ（P-05／R-12） */
strong{font-weight:700; color:var(--ink)}

/* ============================ ヘッダーと帯 ============================ */
.hd{background:var(--ground); color:var(--paper); position:relative; z-index:5;
  background-image:radial-gradient(120% 240% at 8% -40%, rgba(0,120,107,.55), rgba(12,36,34,0) 62%)}
.hd__in{max-width:1440px; margin:0 auto; padding:var(--sp-2) var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.hd__mark{display:flex; align-items:center; gap:10px; border-bottom:0}
.hd__mark:hover{border-bottom:0}
.hd__glyph{width:34px; height:34px; flex:0 0 34px}
.hd__name{display:block; font-family:var(--font-mi); font-weight:700; font-size:19px;
  letter-spacing:-.02em; color:var(--paper); font-stretch:112%; line-height:1.2}
.hd__sub{display:block; white-space:nowrap; font-size:var(--fs-lab);
  color:rgba(250,250,247,var(--a-4)); letter-spacing:.1em; font-family:var(--font-mi); line-height:1.3}
.hd__meta{margin-left:auto; display:flex; gap:var(--sp-3); align-items:center}
.hd__meta b{font-family:var(--font-num); font-size:19px; color:var(--accent-sub); font-weight:600}
.hd__meta span{font-size:var(--fs-lab); color:rgba(250,250,247,var(--a-4)); letter-spacing:.08em}

.tabs{background:var(--ground-2); border-bottom:1px solid rgba(250,250,247,var(--a-2));
  position:relative; z-index:4}
.tabs__in{max-width:1440px; margin:0 auto; display:flex; gap:0; overflow-x:auto;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#161A19 22px,#161A19 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#161A19 22px,#161A19 calc(100% - 22px),transparent 100%)}
.tabs__in::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto; padding:11px 16px; color:rgba(250,250,247,.86); font-size:14px;
  border-bottom:3px solid transparent; letter-spacing:.03em;
  transition:background var(--t-iro) var(--ease-deru), border-color var(--t-iro) var(--ease-deru)}
.tabs a:hover{background:rgba(0,120,107,.4); border-bottom-color:var(--accent-sub); color:var(--paper)}
.tabs a[aria-current="page"]{border-bottom-color:var(--accent-sub); background:rgba(0,120,107,.3);
  color:var(--paper)}

.crumb{max-width:1440px; margin:0 auto; padding:10px var(--sp-3); font-size:var(--fs-lab);
  color:var(--g-3); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.crumb a{border-bottom:0}
.crumb i{font-style:normal; color:var(--g-2)}

/* ============================ ファーストビュー ============================ */
.fv{position:relative; min-height:calc(94 * var(--stable-lvh)); overflow:hidden;
  background:var(--ground); color:var(--paper); isolation:isolate}
.fv__photo{position:absolute; inset:0; z-index:0}
.fv__photo img{width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.05)}
.fv__veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(72% 96% at 14% 8%, rgba(12,36,34,.94), rgba(12,36,34,.42) 58%, rgba(12,36,34,.1) 100%),
    radial-gradient(60% 80% at 92% 96%, rgba(0,120,107,.55), rgba(12,36,34,0) 70%),
    linear-gradient(180deg, rgba(12,36,34,.72) 0%, rgba(12,36,34,.30) 42%, rgba(12,36,34,.88) 100%)}
.fv__grain{position:absolute; inset:0; z-index:2; opacity:var(--a-2); pointer-events:none;
  mix-blend-mode:overlay}
.fv__arc{position:absolute; z-index:2; right:-14vw; top:-16vw; width:64vw; height:64vw;
  pointer-events:none; opacity:.9}
.fv__in{position:relative; z-index:3; max-width:1440px; margin:0 auto;
  padding:var(--sp-6) var(--sp-3) var(--sp-4);
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); align-items:end;
  min-height:calc(74 * var(--stable-lvh))}
.fv__eyebrow{display:flex; align-items:center; gap:10px; color:var(--accent-sub);
  font-family:var(--font-mi); font-size:var(--fs-lab); letter-spacing:.2em; font-weight:600}
.fv__eyebrow::before{content:""; width:38px; height:2px; background:var(--accent-sub)}
.fv h1.t-display{color:var(--paper); margin-top:var(--sp-3); max-width:19em}
.fv .t-lede{color:rgba(250,250,247,.9); margin-top:var(--sp-3); max-width:34em}
.fv__num{display:flex; align-items:flex-end; gap:var(--sp-2); margin-top:var(--sp-2)}
.fv__num b{font-family:var(--font-num); font-size:var(--fs-kyodai); line-height:.78;
  font-weight:600; color:var(--accent-sub); letter-spacing:-.05em;
  -webkit-text-stroke:0; display:block}
.fv__numtxt{padding-bottom:var(--sp-3); max-width:22em}
.fv__numtxt .lab{color:var(--accent-sub); display:block}
.fv__numtxt p{margin:6px 0 0; font-size:var(--fs-note); line-height:var(--lh-note);
  color:rgba(250,250,247,.82)}
@media (min-width:900px){
  .fv__in{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:end;
    padding:var(--sp-7) var(--sp-4) var(--sp-5)}
  .fv__num{justify-content:flex-end}
}

/* FVの下の索引タイル：見本（GameWith）から持ち帰った「数字が並ぶ密度」 */
.fvindex{position:relative; z-index:3; border-top:1px solid rgba(250,250,247,var(--a-2));
  background:rgba(12,36,34,.62)}
.fvindex__in{max-width:1440px; margin:0 auto; display:flex; overflow-x:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#161A19 18px,#161A19 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#161A19 18px,#161A19 calc(100% - 18px),transparent 100%)}
.fvindex__in::-webkit-scrollbar{display:none}
.fvindex a{flex:0 0 auto; min-width:178px; padding:13px 18px 15px; color:var(--paper);
  border-bottom:0; border-right:1px solid rgba(250,250,247,var(--a-2));
  display:grid; gap:3px; align-content:start;
  transition:background var(--t-iro) var(--ease-deru)}
.fvindex a:hover{background:rgba(0,120,107,.42); color:var(--paper)}
.fvindex b{font-family:var(--font-num); font-size:30px; font-weight:600; line-height:1.08;
  letter-spacing:-.02em; color:var(--accent-sub)}
.fvindex b em{font-style:normal; font-size:15px; margin-left:3px; color:rgba(250,250,247,.82)}
.fvindex span{font-size:13px; line-height:1.45; color:rgba(250,250,247,.86)}

/* ============================ 3カラム ============================ */
.wrap{max-width:1440px; margin:0 auto; padding:0 var(--sp-3)}
.three{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5) var(--sp-4);
  padding-bottom:var(--sp-6)}
@media (min-width:1100px){
  .three{grid-template-columns:252px minmax(0,var(--col-c)) 296px; align-items:start}
}
.col-c{min-width:0; order:1}
.three > aside{order:2}
.three > aside:last-of-type{order:3}
@media (min-width:1100px){
  .three > aside:first-of-type{order:1}
  .col-c{order:2}
  .three > aside:last-of-type{order:3}
}
/* 余白のリズム：この4本で、実際に鳴る間隔を 22 / 34 / 52 / 78px の4種類にする（A-03） */
.col-c > * + *{margin-top:var(--sp-5)}
.col-c > .disc + *{margin-top:var(--sp-3)}
.col-c > * + .fig{margin-top:var(--sp-4)}
.col-c > .fig + *{margin-top:var(--sp-6)}
.side{min-width:0}
@media (min-width:1100px){ .side{position:sticky; top:var(--sp-2)} }

/* 左の索引（見本の「攻略メニュー」にあたる） */
.idx{border-top:2px solid var(--accent-main)}
.idx__h{display:flex; align-items:center; gap:8px; padding:12px 4px;
  font-family:var(--font-mi); font-weight:700; font-size:15px; letter-spacing:.02em}
.idx__h svg{width:18px; height:18px}
.idx__g{padding:9px 4px 7px; font-size:var(--fs-lab); letter-spacing:.1em; color:var(--g-3);
  border-top:1px solid var(--g-2); font-family:var(--font-mi); font-weight:600}
.idx ul{list-style:none; margin:0; padding:0}
.idx li{border-top:1px solid var(--g-1)}
.idx li a{display:flex; gap:8px; align-items:baseline; padding:9px 4px; font-size:14.5px;
  color:var(--ink); border-bottom:0; line-height:1.5;
  transition:padding var(--t-ido) var(--ease-deru), color var(--t-iro) var(--ease-deru)}
.idx li a:hover{padding-left:12px; color:var(--accent-main)}
.idx li a .n{color:var(--g-3); font-size:13px}

/* 右の欄（見本の「攻略記事ランキング」にあたる） */
.rail__h svg{width:18px; height:18px; flex:0 0 18px}
.rail__h{display:flex; align-items:center; gap:8px; border-top:2px solid var(--accent-sub);
  padding:12px 2px; font-family:var(--font-mi); font-weight:700; font-size:15px}
.rank{list-style:none; margin:0; padding:0; counter-reset:r}
.rank li{display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px;
  padding:11px 2px; border-top:1px solid var(--g-1); align-items:start}
.rank li b{font-family:var(--font-num); font-size:15px; color:var(--paper); text-align:center;
  line-height:24px; font-weight:600; border-radius:2px}
.rank li:nth-child(1) b{background:var(--cat-5)}
.rank li:nth-child(2) b{background:var(--cat-2)}
.rank li:nth-child(3) b{background:var(--cat-3)}
.rank li:nth-child(4) b{background:var(--cat-8)}
.rank li:nth-child(5) b{background:var(--cat-8)}
.rank li p{margin:0; font-size:14px; line-height:1.55}
.rank__sub{display:block; font-size:13px; color:var(--g-3); margin-top:2px}
.rank__sub .n{color:var(--accent-main); font-weight:600}

/* ============================ 章（面）============================ */
.band{position:relative; padding:var(--sp-5) 0}
.band--paper{background:var(--paper);
  background-image:radial-gradient(64% 52% at 96% 0%, rgba(0,120,107,.10), rgba(250,250,247,0) 66%),
                   radial-gradient(48% 40% at 2% 96%, rgba(224,138,0,.10), rgba(250,250,247,0) 70%)}
.band--face{background:var(--paper-2);
  background-image:radial-gradient(70% 60% at 6% 0%, rgba(14,111,168,.12), rgba(241,244,242,0) 62%),
                   radial-gradient(50% 60% at 98% 88%, rgba(0,120,107,.14), rgba(241,244,242,0) 68%)}
.band--dark{background:var(--ground); color:var(--paper);
  background-image:radial-gradient(70% 90% at 88% 4%, rgba(0,120,107,.55), rgba(12,36,34,0) 62%),
                   radial-gradient(60% 70% at 4% 96%, rgba(224,138,0,.22), rgba(12,36,34,0) 66%)}
.band--dark .t-body{color:rgba(250,250,247,.9)}
.band--dark .t-display,.band--dark .t-h2{color:var(--paper)}
.band__mesh{position:absolute; inset:0; pointer-events:none; opacity:var(--a-2)}
.band > .wrap{position:relative; z-index:1}

.sec__h{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:baseline;
  margin-bottom:var(--sp-3); padding-bottom:10px; border-bottom:2px solid var(--accent-main)}
.sec__h .lab{color:var(--accent-main)}
.band--dark .sec__h{border-bottom-color:var(--accent-sub)}
.band--dark .sec__h .lab{color:var(--accent-sub)}

/* ============================ 表（罫線だけ。地も影も角も付けない）======== */
.tbl-wrap{overflow-x:auto; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#161A19 14px,#161A19 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#161A19 14px,#161A19 calc(100% - 14px),transparent 100%)}
table.dt{border-collapse:collapse; width:100%; min-width:620px; font-size:14.5px;
  line-height:1.62}
table.dt caption{text-align:left; font-size:var(--fs-note); color:var(--g-3);
  padding-bottom:8px; line-height:var(--lh-note)}
table.dt th,table.dt td{border-bottom:1px solid var(--g-2); padding:11px 12px; text-align:left;
  vertical-align:top}
table.dt thead th{border-bottom:2px solid var(--accent-main); color:var(--accent-main);
  font-family:var(--font-mi); font-size:var(--fs-lab); letter-spacing:.12em; font-weight:700;
  white-space:nowrap}
table.dt tbody th{font-weight:600; white-space:nowrap}
table.dt td .n{font-size:15px}
table.dt tbody tr:hover{background:rgba(0,120,107,.05)}
.dt__warn{color:var(--accent-warn); font-weight:600}

/* 分類バッジ（見本のタイプ色にあたる。役割は「制度の分類」ひとつ） */
.tag{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:2px;
  font-size:13px; line-height:1.5; color:var(--paper); font-weight:600; letter-spacing:.04em;
  white-space:nowrap}
.tag::before{content:""; width:5px; height:5px; border-radius:50%;
  background:rgba(250,250,247,.85)}
.tag--1{background:var(--cat-1)} .tag--2{background:var(--cat-2)}
.tag--3{background:var(--cat-3)} .tag--4{background:var(--cat-4)}
.tag--5{background:var(--cat-5)} .tag--6{background:var(--cat-6)}
.tag--7{background:var(--cat-7)} .tag--8{background:var(--cat-8)}
.tag-row{display:flex; gap:6px; flex-wrap:wrap; align-items:center}

/* 流れる帯（1画面に1つだけ。R-17） */
.flow{overflow:hidden; border-top:1px solid rgba(250,250,247,var(--a-2));
  border-bottom:1px solid rgba(250,250,247,var(--a-2)); padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#161A19 8%,#161A19 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#161A19 8%,#161A19 92%,transparent)}
.flow__in{display:flex; gap:10px; width:max-content; animation:nagareru 42s linear infinite}
.flow__in .tag{font-size:13px}

/* ============================ 数値の図（D-19：動く）============================ */
.fig{margin:0}
.fig__cap{font-family:var(--font-mi); font-size:var(--fs-lab); letter-spacing:.12em;
  color:var(--accent-main); font-weight:700; margin:0 0 10px}
.fig__note{font-size:var(--fs-note); line-height:var(--lh-note); color:var(--g-3); margin:10px 0 0}
.band--dark .fig__cap{color:var(--accent-sub)}
.band--dark .fig__note{color:rgba(250,250,247,.72)}

.bars{display:grid; gap:12px}
.bars__row{display:grid; grid-template-columns:minmax(96px,132px) minmax(0,1fr) 74px;
  gap:10px; align-items:center; font-size:14px}
.bars__name{line-height:1.4}
.bars__track{height:16px; background:rgba(0,120,107,.12); position:relative; overflow:hidden}
.bars__val{font-family:var(--font-num); text-align:right; font-size:14.5px; font-weight:600}
.bar{transform:scaleX(0); transform-origin:left center;
  transition:transform var(--t-nyujo) var(--ease-suji)}
[data-rv="in"] .bar{transform:scaleX(1)}

.ring-wrap{display:grid; grid-template-columns:minmax(0,148px) minmax(0,1fr); gap:var(--sp-3);
  align-items:center; max-width:1020px}
.ring{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); stroke-linecap:butt;
  transition:stroke-dashoffset 1.3s var(--ease-suji)}
[data-rv="in"] .ring{stroke-dashoffset:calc(var(--len) * (1 - var(--ratio)))}
.ring-mid{font-family:var(--font-num); font-weight:600; fill:var(--accent-main)}
.band--dark .ring-mid{fill:var(--accent-sub)}
.spark{stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s var(--ease-suji)}
[data-rv="in"] .spark{stroke-dashoffset:0}

.count{font-family:var(--font-num); font-weight:600; letter-spacing:-.02em}

/* ============================ 記事カード（型を2種類にする・D-08）======== */
.cardA{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-3);
  border-top:2px solid var(--accent-main); padding-top:var(--sp-3)}
@media (min-width:720px){ .cardA{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} }
.cardA__pic{overflow:hidden}
.cardA__pic img{width:100%; aspect-ratio:16/9; object-fit:cover;
  transition:transform var(--t-men) var(--ease-men)}
.cardA:hover .cardA__pic img{transform:scale(1.04)}
.cardA__body .t-h3{margin-top:8px}
.cardA__body .t-body{margin-top:10px}

.listB{list-style:none; margin:0; padding:0; border-top:1px solid var(--g-2)}
.listB li{border-bottom:1px solid var(--g-1)}
.listB a{display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:12px;
  align-items:center; padding:14px 2px; color:var(--ink); border-bottom:0;
  transition:background var(--t-iro) var(--ease-deru)}
.listB a:hover{background:rgba(0,120,107,.06)}
.listB__no{font-family:var(--font-num); font-size:19px; color:var(--accent-main);
  font-weight:600; text-align:center; border-right:1px solid var(--g-2); padding-right:8px}
.listB__t{font-weight:600; line-height:1.5; font-size:15.5px}
.listB__t span{display:block; font-weight:400; font-size:13.5px; color:var(--g-3); margin-top:3px}
.listB__go{font-family:var(--font-num); font-size:13px; color:var(--g-3); letter-spacing:.1em}

/* 積み上げの帯（3つ目のカードの型） */
.stack-fig{display:grid; gap:10px}
.stack-fig__row{display:grid; grid-template-columns:minmax(0,1fr); gap:6px}
.stack-fig__bar{display:flex; height:30px; overflow:hidden}
.stack-fig__seg{transform:scaleX(0); transform-origin:left center; height:100%;
  transition:transform var(--t-nyujo) var(--ease-suji); display:block}
[data-rv="in"] .stack-fig__seg{transform:scaleX(1)}

/* ============================ 広告枠と開示（S-11／S-12）================ */
.disc{display:flex; gap:8px; align-items:flex-start; padding:9px 12px;
  border-left:3px solid var(--accent-sub); background:rgba(224,138,0,.09);
  font-size:var(--fs-note); line-height:var(--lh-note); color:var(--g-4)}
.disc b{font-family:var(--font-mi); letter-spacing:.1em; color:var(--accent-sub); font-weight:700}
.adslot{border-top:1px solid var(--g-2); border-bottom:1px solid var(--g-2);
  padding:var(--sp-3) 0; margin-top:var(--sp-2)}
.adslot__box{border:1px solid var(--g-2); padding:var(--sp-3); background:var(--paper-2);
  display:grid; gap:8px; justify-items:start}
.adslot__box .lab{color:var(--g-3)}
.adslot__box p{margin:0; font-size:14.5px; line-height:1.7; color:var(--g-4)}
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
  background:var(--form-face); color:var(--form-ink); border:0; border-radius:2px;
  font-size:14.5px; font-weight:600; letter-spacing:.04em; cursor:pointer;
  transition:background var(--t-iro) var(--ease-deru), transform var(--t-ido) var(--ease-deru)}
.btn:hover{background:var(--form-face-hover); transform:translateY(-1px); color:var(--form-ink)}

/* ============================ 出典 ============================ */
.src{border-left:3px solid var(--accent-main); padding:2px 0 2px 14px; margin:var(--sp-3) 0 0}
.src p{margin:0; font-size:var(--fs-note); line-height:var(--lh-note); color:var(--g-4)}
.src p + p{margin-top:6px}
.src .lab{color:var(--accent-main); display:block; margin-bottom:4px}

/* ============================ 記事本文 ============================ */
.art__head{padding:var(--sp-4) 0 var(--sp-3)}
.art__meta{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
  font-size:var(--fs-lab); color:var(--g-3); margin-top:var(--sp-2)}
.art__pic{margin:var(--sp-3) 0 0; position:relative}
.art__pic img{width:100%; aspect-ratio:16/9; object-fit:cover}
.art__pic figcaption{font-size:13px; color:var(--g-3); margin-top:6px; line-height:1.55}
.art__body h2.t-h2{margin-top:var(--sp-5); padding-left:14px; border-left:5px solid var(--accent-main)}
.art__body h3.t-h3{margin-top:var(--sp-4); color:var(--g-4)}
.art__body .t-body{margin-top:var(--sp-3)}
.art__body .tbl-wrap{margin-top:var(--sp-3)}
.art__body figure{margin:var(--sp-4) 0 0}
.art__body > .src{margin-top:var(--sp-6)}
.cl{list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:10px}
.cl__item{display:flex; gap:11px; align-items:flex-start;
  font-size:15.5px; line-height:1.8; margin:0}
.cl__item::before{content:""; flex:0 0 11px; width:11px; height:11px; margin-top:9px;
  background:var(--accent-main); clip-path:polygon(0 0,100% 50%,0 100%)}
.next{display:grid; gap:var(--sp-2); margin-top:var(--sp-4)}

/* ============================ フッター ============================ */
.ft{background:var(--ground); color:rgba(250,250,247,.86); padding:var(--sp-5) 0 var(--sp-4);
  background-image:radial-gradient(60% 120% at 10% 0%, rgba(0,120,107,.42), rgba(12,36,34,0) 62%)}
.ft__in{max-width:1440px; margin:0 auto; padding:0 var(--sp-3);
  display:grid; gap:var(--sp-4); grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){ .ft__in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)} }
.ft h2{font-family:var(--font-mi); font-size:15px; margin:0 0 12px; color:var(--paper);
  letter-spacing:.02em}
.ft ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ft a{color:rgba(250,250,247,.9); border-bottom:1px solid rgba(250,250,247,var(--a-2));
  font-size:14px}
.ft a:hover{color:var(--accent-sub); border-bottom-color:var(--accent-sub)}
.ft p{margin:0; font-size:14px; line-height:1.75; color:rgba(250,250,247,.72)}
.ft__bar{max-width:1440px; margin:var(--sp-4) auto 0; padding:var(--sp-2) var(--sp-3) 0;
  border-top:1px solid rgba(250,250,247,var(--a-2)); display:flex; gap:var(--sp-3);
  flex-wrap:wrap; justify-content:space-between; font-size:13px;
  color:rgba(250,250,247,.6)}

/* ============================ 出る仕掛け（A-05：不透明度だけにしない）==== */
.js [data-rv]{opacity:0; transform:translateY(18px);
  clip-path:inset(0 8% 0 0);
  transition:opacity var(--t-men) var(--ease-deru),
             transform var(--t-men) var(--ease-deru),
             clip-path var(--t-nyujo) var(--ease-men)}
.js [data-rv="in"]{opacity:1; transform:none; clip-path:inset(0 0 0 0)}

/* ============================ 動きの語彙（keyframes は7本）==============
   ①伸びる nobiru ②描かれる kakareru ③数え上がる kazoeru ④流れる nagareru
   ⑤ずれる zureru（視差） ⑥留まって変わる todomaru ⑦1字ずつ出る hitomoji
   ※ infinite が付くのは nagareru だけ（R-17：1画面に1つ） */
@keyframes nobiru{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes kakareru{from{stroke-dashoffset:var(--len)} to{stroke-dashoffset:0}}
@keyframes kazoeru{from{opacity:0; transform:translateY(.24em)} to{opacity:1; transform:none}}
@keyframes nagareru{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes zureru{from{transform:translateY(0)} to{transform:translateY(-14%)}}
@keyframes todomaru{from{opacity:.35; letter-spacing:.24em} to{opacity:1; letter-spacing:.16em}}
@keyframes hitomoji{from{opacity:0; transform:translateY(.5em) rotate(2deg)} to{opacity:1; transform:none}}

.js .fv h1 .ch{display:inline-block; opacity:0; animation:hitomoji .74s var(--ease-deru) forwards;
  animation-delay:calc(var(--i) * 26ms)}
.js .fv__num b{animation:kazoeru .9s var(--ease-suji) both; animation-delay:.35s}
.hd__name{animation:todomaru .8s var(--ease-men) both}

/* ルビ（B-01）：むずかしい読みの語だけに付ける */
ruby rt{font-size:.45em; font-weight:400; letter-spacing:.04em; color:var(--g-3)}
.band--dark ruby rt{color:rgba(250,250,247,.68)}

/* 分数ページャ（B-11）：いま何本目かを分数で出す */
.pager{font-family:var(--font-num); font-size:13px; letter-spacing:.14em; color:var(--g-3);
  display:inline-flex; gap:6px; align-items:center}
.pager b{color:var(--accent-main); font-weight:600}

/* 読書プログレス（B-14）：JavaScript を1行も使わずに、スクロール量だけで伸ばす */
.progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:9; background:transparent;
  pointer-events:none}
.progress i{display:block; height:100%; background:var(--accent-sub); transform:scaleX(0);
  transform-origin:left center}
@supports (animation-timeline: scroll()){
  .progress i{animation:nobiru var(--ease-shazo) both; animation-timeline:scroll(root)}
}

/* 視差：スクロール連動は animation-timeline で（P-22：scrollイベントを使わない） */
@supports (animation-timeline: view()){
  .fv__photo img{animation:zureru var(--ease-shazo) both; animation-timeline:view(); animation-range:entry 0% exit 100%}
}

/* ============================ 動きを止める設定（R-10）==================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .js [data-rv]{opacity:1 !important; transform:none !important; clip-path:none !important}
  .bar,.stack-fig__seg{transform:scaleX(1) !important}
  .ring{stroke-dashoffset:calc(var(--len) * (1 - var(--ratio))) !important}
  .spark{stroke-dashoffset:0 !important}
  .flow__in{animation:none !important}
  .progress i{transform:scaleX(0) !important}
  .js .fv h1 .ch{opacity:1 !important; animation:none !important}
}

/* ============================ 印刷（B-15）============================ */
@media print{
  .tabs,.side,.adslot,.flow,.fv__arc,.progress{display:none}
  body{background:var(--paper); color:var(--g-5); font-size:11pt}
  .band{padding:8pt 0; background:var(--paper) !important; color:var(--g-5) !important}
  .three{grid-template-columns:minmax(0,1fr)}
  table.dt{min-width:0; page-break-inside:avoid}
  .fv{min-height:0}
  a{color:var(--g-5); border-bottom:0}
}