@charset "UTF-8";
/* ===========================================================
   Re:amige Blog — Article Design System
   =========================================================== */

:root{
  /* --- brand --- */
  --violet:#6A4CE0;
  --blue:#3E7BEA;
  --teal:#38CFC4;
  --grad:linear-gradient(105deg,#6A4CE0 0%,#3E7BEA 52%,#38CFC4 100%);
  --grad-soft:linear-gradient(105deg,rgba(106,76,224,.10),rgba(62,123,234,.08),rgba(56,207,196,.12));

  /* --- surface --- */
  --bg:#F7F9FC;
  --surface:#FFFFFF;
  --ink:#131A33;
  --ink-2:#2E3756;
  --muted:#626B85;
  --faint:#9AA2B8;
  --line:#E3E8F1;
  --line-soft:#EEF1F7;
  --flag:#D92B46;

  /* --- type --- */
  --jp:'Zen Kaku Gothic New','Noto Sans JP',system-ui,sans-serif;
  --body:'Noto Sans JP',system-ui,sans-serif;
  --num:'Sora',system-ui,sans-serif;

  /* --- metrics --- */
  --radius:22px;
  --shadow:0 18px 50px -18px rgba(38,58,140,.22);
  --measure:36rem;        /* 本文の行長（日本語で約38字） */
  --gutter:1.5rem;
  --rhythm:1.55em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:2.05;
  letter-spacing:.015em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:3px}

/* ---------- 読書の進捗（スクロールに応答する唯一のモーション） ---------- */
.progress{
  position:fixed;inset:0 auto auto 0;z-index:200;
  height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad);
  will-change:transform;
}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,249,252,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  max-width:72rem;margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:60px;
}
.brand{display:flex;align-items:center;font-family:var(--num);font-weight:800;font-size:1.08rem;letter-spacing:.005em}
.brand-mark{width:25px;height:25px;border-radius:8px;background:var(--grad);display:grid;place-items:center;flex:none;margin-right:.55rem}
.brand-mark svg{width:9px;height:9px;fill:#fff;transform:translateX(1px)}
.brand span{margin-left:.45rem;font-family:var(--body);font-weight:700;font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.back-link{font-size:.82rem;font-weight:700;color:var(--muted);white-space:nowrap;transition:color .2s}
.back-link:hover{color:var(--ink)}

/* ---------- 記事の外枠 ---------- */
.article{
  max-width:36rem;margin:0 auto;
  padding:3.5rem var(--gutter) 1rem;
}

/* ---------- 記事ヘッダー（LPのヒーローと同じ背景） ---------- */
.hero-bg{
  position:absolute;top:0;left:50%;margin-left:-50vw;
  width:100vw;height:680px;z-index:-1;overflow:hidden;pointer-events:none;
}
.hero-bg .grid-lines{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(38,58,140,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(38,58,140,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 75%);
}
/* ぼかしに頼らず、放射グラデーションで柔らかい光にする */
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(60px)}
.hero-bg::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:260px;
  background:linear-gradient(rgba(247,249,252,0),var(--bg));
}
.hero-bg .orb-1{width:560px;height:560px;background:radial-gradient(circle closest-side,rgba(106,76,224,.42),rgba(106,76,224,0) 72%);top:-200px;right:-110px;animation:float1 14s ease-in-out infinite alternate}
.hero-bg .orb-2{width:460px;height:460px;background:radial-gradient(circle closest-side,rgba(56,207,196,.40),rgba(56,207,196,0) 72%);top:120px;left:-150px;animation:float2 17s ease-in-out infinite alternate}
.hero-bg .orb-3{width:340px;height:340px;background:radial-gradient(circle closest-side,rgba(62,123,234,.26),rgba(62,123,234,0) 72%);top:100px;left:40%;animation:float1 20s ease-in-out infinite alternate-reverse}
@keyframes float1{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,50px) scale(1.08)}}
@keyframes float2{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,-40px) scale(1.1)}}

.article{position:relative}

/* ---------- 記事ヘッダー ---------- */
/* gap とマージンの二重適用を避けるため、間隔はマージンのみで指定する */
.article-meta{display:flex;align-items:center;flex-wrap:wrap;row-gap:.4rem;margin-bottom:1.1rem}
.article-meta > * + *{margin-left:.9rem}
.tag{
  font-size:.74rem;font-weight:700;color:#fff;background:var(--grad);
  border-radius:99px;padding:.3rem 1rem;letter-spacing:.03em;
}
.date{font-family:var(--num);font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:.06em}

h1{
  font-family:var(--jp);font-weight:900;
  font-size:2.2rem;
  font-size:clamp(1.9rem,1.15rem + 3vw,2.95rem);
  line-height:1.4;letter-spacing:-.005em;
  margin:0 0 1.75rem;
  text-wrap:balance;overflow-wrap:anywhere;word-wrap:break-word;word-break:normal;line-break:strict;
}
/* グラデーション文字は折り返しても消えないように、行ごとに描画する */
h1 .grad-text{color:var(--violet);overflow-wrap:anywhere;word-wrap:break-word}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1 .grad-text{
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
}

/* ---------- リード（導入文） ---------- */
.lead{
  margin:0 0 2.2rem;padding:0 0 1.9rem;
  border-bottom:1px solid var(--line);
  font-size:1.09rem;line-height:1.95;color:var(--ink-2);letter-spacing:.005em;
  background:none;border-radius:0;border-left:0;border-image:none;
}
.lead b{font-weight:700;color:var(--ink)}

/* ---------- シリーズの案内 ---------- */
.series{
  display:block;margin:0 0 2.6rem;padding:1.15rem 1.4rem;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  font-size:.86rem;line-height:1.95;color:var(--muted);
}
.series .badge{
  display:inline-block;font-family:var(--num);font-weight:800;font-size:.62rem;
  letter-spacing:.14em;color:var(--violet);background:rgba(106,76,224,.09);
  border-radius:5px;padding:.2rem .55rem;margin:0 .6rem .35rem 0;vertical-align:1px;
}
.series b{font-family:var(--jp);font-weight:900;color:var(--ink)}
.series a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.series a:hover{text-decoration-thickness:2px}

/* ---------- 見出し ---------- */
h2{
  font-family:var(--jp);font-weight:900;
  font-size:1.38rem;
  font-size:clamp(1.24rem,1.05rem + .6vw,1.46rem);
  line-height:1.62;letter-spacing:.01em;
  margin:4.2rem 0 1.25rem;padding:0;border:0;border-image:none;
  scroll-margin-top:84px;text-wrap:balance;overflow-wrap:anywhere;
}
h2::before{
  content:"";display:inline-block;vertical-align:middle;
  width:0;height:0;border-style:solid;
  border-width:5px 0 5px 8.5px;
  border-color:transparent transparent transparent var(--teal);
  margin-right:.7rem;margin-bottom:.25rem;
}
h3{
  font-family:var(--jp);font-weight:900;font-size:1.04rem;line-height:1.8;
  margin:2.4rem 0 .55rem;color:var(--ink);
}
h2 + h3{margin-top:1.6rem}
.lead + h2,.series + h2{margin-top:3rem}

/* ---------- 本文 ---------- */
p{margin:0 0 var(--rhythm)}
.article strong{
  font-weight:700;
  background:linear-gradient(transparent 62%,rgba(56,207,196,.34) 62%);
}
.article .red{color:var(--flag);font-weight:900;background:none}
/* 本文中のリンクだけを対象にする（ボタン類には及ばないよう範囲で限定） */
.article p a,.article li a,.article td a,.article th a,
.article .related a,.article .next-notice a,.article .series a{
  color:var(--blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .2s;
}
.article p a:hover,.article li a:hover,.article td a:hover,
.article .related a:hover,.article .next-notice a:hover,.article .series a:hover{
  color:var(--violet);
}

/* ---------- 現場の声（記事内で最も強い一枚） ---------- */
.voice{
  position:relative;margin:2.4rem 0;padding:1.6rem 1.7rem 1.6rem 1.9rem;
  background:var(--surface);border:1px solid var(--line);border-left:0;
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.93rem;line-height:2.0;color:var(--ink-2);
  box-shadow:var(--shadow);
}
.voice::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--grad);border-radius:4px 0 0 4px;
}
.voice .vlabel{
  display:block;font-family:var(--jp);font-weight:900;font-size:.8rem;
  color:var(--violet);letter-spacing:.04em;margin-bottom:.5rem;
}
.voice b{font-weight:700;color:var(--ink)}

/* ---------- 補足 ---------- */
.note{
  margin:1.6rem 0 2.2rem;padding:1.15rem 1.4rem;
  background:var(--grad-soft);border-radius:16px;
  font-size:.88rem;line-height:1.95;color:var(--ink-2);
}
.note b{font-weight:700;color:var(--ink)}

/* ---------- 図版・表は本文よりわずかに広く ---------- */
/* ---------- 図版 ---------- */
.figure{
  margin:2.2rem 0 2.6rem;padding:1.5rem 1.2rem 1.1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.figure svg{width:100%;height:auto;display:block}
.figure figcaption{
  margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line-soft);
  font-size:.78rem;line-height:1.75;color:var(--faint);text-align:left;
}

/* ---------- 表 ---------- */
.table-wrap{margin:1.8rem 0 2.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{margin:0;min-width:33rem}
table{
  width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  font-size:.88rem;box-shadow:var(--shadow);
}
thead th{
  background:var(--ink);color:#fff;font-family:var(--jp);font-weight:700;
  font-size:.82rem;letter-spacing:.02em;padding:.85rem 1rem;text-align:left;
  border-bottom:0;line-height:1.6;
}
tbody th{
  background:rgba(106,76,224,.045);font-weight:700;color:var(--ink);
  width:26%;font-size:.86rem;
}
th,td{
  padding:.9rem 1rem;border-bottom:1px solid var(--line-soft);
  text-align:left;vertical-align:top;line-height:1.85;
}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* ---------- 対比（NG / OK） ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.8rem 0 2.4rem}
.vs-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.45rem 1.55rem;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;font-size:.9rem;line-height:1.95;color:var(--ink-2);
}
.vs-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.vs-ok{border-color:rgba(62,123,234,.32);background:linear-gradient(180deg,rgba(62,123,234,.04),transparent 60%)}
.vs-card .label{
  display:inline-block;font-family:var(--jp);font-weight:900;font-size:.72rem;
  letter-spacing:.04em;border-radius:6px;padding:.22rem .6rem;margin-bottom:.75rem;color:#fff;
}
.vs-ng .label{background:var(--faint)}
.vs-ok .label{background:var(--grad)}
.vs-card b{display:block;font-family:var(--jp);font-weight:900;color:var(--ink);font-size:.97rem;margin-bottom:.4rem;line-height:1.7}

/* ---------- 箇条書き（順序なし：罫線で区切る） ---------- */
.tips{list-style:none;margin:1.7rem 0 2.4rem;padding:0;border-top:1px solid var(--line)}
.tips li{
  position:relative;padding:1.2rem 0 1.2rem 1.5rem;
  border-bottom:1px solid var(--line);font-size:.93rem;line-height:2.0;color:var(--ink-2);
}
.tips li::before{
  content:"";position:absolute;left:0;top:1.95rem;
  width:7px;height:7px;border-radius:50%;background:var(--grad);
}
.tips li b{display:block;font-family:var(--jp);font-weight:900;color:var(--ink);font-size:1rem;line-height:1.75;margin-bottom:.15rem}

/* ---------- 手順（順序あり：番号を持つ） ---------- */
.step{list-style:none;counter-reset:st;margin:1.7rem 0 2.4rem;padding:0;display:grid;gap:1.4rem}
.step li{
  counter-increment:st;position:relative;padding-left:3.2rem;
  font-size:.93rem;line-height:2.0;color:var(--ink-2);
}
.step li::before{
  content:counter(st);position:absolute;left:0;top:.1rem;
  width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--num);font-weight:800;font-size:.9rem;color:#fff;background:var(--ink);
}
.step li b{display:block;font-family:var(--jp);font-weight:900;color:var(--ink);font-size:1.02rem;line-height:1.7;margin-bottom:.3rem}

/* ---------- 落とし穴（分類ラベルを持つ） ---------- */
.pits{list-style:none;counter-reset:pit;margin:1.7rem 0 2.4rem;padding:0;display:grid;gap:1rem}
.pits li{
  counter-increment:pit;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.6rem;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
  font-size:.92rem;line-height:1.98;color:var(--ink-2);
}
.pits li::before{
  content:"落とし穴 " counter(pit);
  display:inline-block;font-family:var(--jp);font-weight:900;font-size:.72rem;
  letter-spacing:.04em;color:#fff;background:var(--faint);
  border-radius:6px;padding:.2rem .6rem;margin-bottom:.6rem;
}
.pits li:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pits li b{display:block;font-family:var(--jp);font-weight:900;color:var(--ink);font-size:1.02rem;line-height:1.7;margin-bottom:.35rem}
.pits li .fix{
  display:block;margin-top:.85rem;padding-top:.85rem;
  border-top:1px solid var(--line-soft);font-size:.89rem;color:var(--ink);
}
.pits li .fix em{
  font-style:normal;font-family:var(--jp);font-weight:900;font-size:.74rem;
  letter-spacing:.04em;color:#fff;background:var(--grad);
  border-radius:5px;padding:.18rem .5rem;margin-right:.6rem;
}

/* ---------- 番号付きカード（列挙された項目） ---------- */
.cards{list-style:none;counter-reset:cd;margin:1.7rem 0 2.4rem;padding:0;display:grid;gap:1rem}
.cards li{
  counter-increment:cd;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.6rem 1.5rem 4.4rem;
  font-size:.92rem;line-height:1.98;color:var(--ink-2);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
}
.cards li:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.cards li::before{
  content:counter(cd,decimal-leading-zero);
  position:absolute;left:1.4rem;top:1.5rem;
  width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--num);font-weight:800;font-size:.82rem;color:#fff;background:var(--grad);
}
.cards li b{display:block;font-family:var(--jp);font-weight:900;color:var(--ink);font-size:1.02rem;line-height:1.7;margin-bottom:.4rem}

/* ---------- チェックリスト ---------- */
.checklist{list-style:none;margin:1.6rem 0 2.3rem;padding:0;display:grid;gap:.1rem}
.checklist li{
  position:relative;padding:.75rem 0 .75rem 2rem;
  border-bottom:1px solid var(--line-soft);
  font-size:.92rem;line-height:1.95;color:var(--ink-2);
}
.checklist li:last-child{border-bottom:0}
.checklist li::before{
  content:"";position:absolute;left:.25rem;top:1.42rem;
  width:9px;height:5px;border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
  transform:rotate(-45deg);
}
.checklist li b{font-weight:700;color:var(--ink)}

/* ---------- 関連記事 / 次回予告 ---------- */
.related,.next-notice{
  margin:2.6rem 0;padding:1.35rem 1.55rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  font-size:.89rem;line-height:2.0;color:var(--muted);
}
.related a{display:inline-block}
.next-notice{border-style:dashed;border-color:rgba(62,123,234,.4);background:rgba(62,123,234,.03)}
.next-notice .badge{
  display:inline-block;font-family:var(--num);font-weight:800;font-size:.62rem;
  letter-spacing:.14em;color:var(--blue);background:rgba(62,123,234,.1);
  border-radius:5px;padding:.2rem .55rem;margin:0 .6rem .3rem 0;vertical-align:1px;
}

/* ---------- 記事の終わりのご案内 ---------- */
.cta{
  position:relative;overflow:hidden;
  margin:4rem 0 0;padding:2.9rem 1.6rem;
  background:var(--grad);border-radius:20px;color:#fff;text-align:center;
}
.cta::after{
  content:"";position:absolute;width:320px;height:320px;border-radius:50%;
  background:rgba(255,255,255,.14);filter:blur(10px);top:-160px;right:-90px;
}
.cta p{
  position:relative;font-family:var(--jp);font-weight:900;
  font-size:1.14rem;
  font-size:clamp(1.02rem,.95rem + .4vw,1.2rem);line-height:1.85;margin:0 0 1.4rem;
}
.cta a{
  position:relative;display:inline-block;margin:.3rem .3rem 0;
  background:#06C755;color:#fff;font-weight:700;font-size:.92rem;
  border-radius:99px;padding:.85rem 2rem;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.45);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;
  text-decoration:none;
}
.cta a:hover{transform:translateY(-3px);box-shadow:0 18px 32px -10px rgba(0,0,0,.5)}
.cta .mail{background:#fff;color:var(--ink)}


/* ---------- 前後の記事 ---------- */
.pager{
  max-width:36rem;margin:3.5rem auto 0;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.pager a{
  display:block;padding:1.3rem 1.45rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .25s,transform .25s cubic-bezier(.16,1,.3,1);
}
.pager a:hover{border-color:rgba(62,123,234,.45);transform:translateY(-5px);box-shadow:var(--shadow)}
.pager .dir{display:block;font-family:var(--num);font-weight:700;font-size:.68rem;letter-spacing:.1em;color:var(--faint);margin-bottom:.45rem}
.pager .ttl{display:block;font-family:var(--jp);font-weight:900;font-size:.88rem;line-height:1.75;color:var(--ink)}
.pager .next{text-align:right}
.pager .empty{visibility:hidden}

/* ---------- 目次（広い画面でのみ左の余白に） ---------- */
.toc{display:none}
@media (min-width:1180px){
  .toc{
    display:block;position:fixed;left:max(1.5rem,calc(50vw - 33rem));top:50%;
    transform:translateY(-50%);width:13.5rem;z-index:50;
  }
  .toc h2{all:unset;display:block;font-family:var(--jp);font-weight:900;font-size:.72rem;color:var(--faint);letter-spacing:.06em;margin-bottom:.9rem}
  .toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;border-left:1px solid var(--line)}
  .toc a{
    display:block;padding:.4rem 0 .4rem .9rem;margin-left:-1px;
    border-left:2px solid transparent;
    font-size:.775rem;line-height:1.6;color:var(--faint);
    transition:color .2s,border-color .2s;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .toc a:hover{color:var(--ink-2)}
  .toc a.current{color:var(--ink);font-weight:700;border-left-color:var(--violet)}
}

/* ---------- フッター ---------- */
.site-footer{
  margin-top:4.5rem;padding:2.4rem var(--gutter);
  border-top:1px solid var(--line);
  text-align:center;font-size:.78rem;color:var(--faint);line-height:1.9;
}

/* ---------- 上に戻る ---------- */
.to-top{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:120;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 26px -14px rgba(30,45,110,.6);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s,visibility .3s,transform .3s;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top svg{width:15px;height:15px;stroke:var(--ink);stroke-width:2.2;fill:none}

/* ---------- 画面が狭いとき ---------- */
@media (max-width:640px){
  body{font-size:16px;line-height:1.98}
  h1{font-size:1.45rem;line-height:1.55;word-wrap:break-word}
  h2{font-size:1.15rem;word-wrap:break-word}
  .lead{font-size:1rem}
  .header-inner{height:54px}
  .brand span:not(.brand-mark){display:none}  /* ロゴアイコンは残し、Blog の文字だけ隠す */
  h2{margin-top:3.4rem}
  .vs{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}
  .cta{padding:2.3rem 1.2rem;border-radius:16px}
  .cta a{display:block;margin:.5rem 0 0}
  .figure{padding:1.1rem .85rem .9rem}
  th,td{padding:.75rem .8rem}
  .voice{padding:1.25rem 1.2rem 1.25rem 1.4rem}
  .cards li{padding:3.6rem 1.3rem 1.3rem}
  .cards li::before{top:1.3rem;left:1.3rem}
}

/* ---------- 動きを控える設定 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- 図版・表・対比は本文よりわずかに広く ---------- */
@media (min-width:860px){
  .article .figure,.article .table-wrap,.article .vs{
    margin-left:-3.25rem;margin-right:-3.25rem;
  }
}

/* ---------- 印刷 ---------- */
@media print{
  .progress,.toc,.to-top,.site-header,.cta,.pager{display:none !important}
  body{background:#fff;font-size:11pt}
  .article{width:100%}
}

/* LINE特典の案内（2026-10-14追加） */
.cta p.cta-gift{font-family:inherit;font-weight:700;font-size:.82rem;line-height:1.7;margin:-.7rem 0 1.2rem;opacity:.92}

/* ---------- 狭い画面でも図の文字が潰れないようにする ---------- */
@media (max-width:640px){
  .figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .figure svg{min-width:30rem}
}