@charset "UTF-8";
/* ============================================================
   エコキュート 記事LP デザインシステム
   ------------------------------------------------------------
   方針（2026-09-01 全面改訂 / 根拠 research/raw/design_antiai.md）
   ・装飾を足さない。罫線・余白・文字サイズの差だけでメリハリを作る
   ・角丸は最大4px（リンナイ公式=0 / パナソニックリフォーム=2〜3px の実測に合わせる）
   ・ふわっと広がる影は使わない。輪郭を締める1px罫線に置き換える
   ・見出しに背景帯を使わない（テンプレ感の最大の原因）
   ・色はネイビー＋グレー階調。アクセントは1色だけ
   ・SPとPCの両方を最適化する（〜599px=SP / 600px〜=PC）
   ============================================================ */

/* ── 1. トークン ───────────────────────────────── */
:root{
  /* 濃いトーンの青＝専門性と信頼。明るい原色の青は使わない */
  --ec-key:        #0FAFFF;   /* 競合の実値 */
  --ec-key-deep:   #005AB9;
  --ec-key-mid:    #1487D8;
  --ec-key-dark:   #0D3252;
  --ec-key-soft:   #E8F6FF;
  --ec-accent:     #FF6600;   /* 競合の実値 */
  --ec-accent-dark:#AE3C03;

  /* 評価アイコン。彩度を1段落とす */
  --ec-great:      #B3382B;
  --ec-good:       #C08316;
  --ec-fair:       #2F7D52;
  --ec-gray:       #98A2AB;

  --ec-ink:        #1A222B;
  --ec-ink-sub:    #4A5763;
  --ec-ink-mute:   #78848F;
  --ec-line:       #E6EAEE;
  --ec-line-dark:  #C4CCD4;
  --ec-bg:         #FFFFFF;
  --ec-bg-soft:    #EDF3F8;   /* 記事の中の面。外側の余白グレーとは別系統にする */
  --ec-bg-band:    #FBF6E9;

  /* 余白：近い要素は詰め、別セクションは広げる（近接の原則） */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* 実在のアフィ記事LP（good-choice.net）の実値に合わせる:
     本文17px / font-weight 500 / Noto Sans JP / 本文幅750 / 背景 #f4f5f7 */
  --fs-xs:12px; --fs-sm:14px; --fs-md:17px; --fs-lg:19px;
  --fs-xl:21px; --fs-2xl:24px; --fs-3xl:28px;

  /* 角丸は2種類だけ。ピル型は使わない */
  --r:6px; --r-lg:10px;

  --wrap:480px;
  --wrap-pc:750px;   /* 競合の本文幅 */
}

/* ── 2. リセット ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ec-bg); color:var(--ec-ink);
  /* OS標準フォントを先に。Windowsは游ゴシック、Macはヒラギノ */
  font-family:"Noto Sans JP","游ゴシック体","Yu Gothic Medium","Yu Gothic",
              "ヒラギノ角ゴシック ProN","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:var(--fs-md); font-weight:500; line-height:1.85;
  letter-spacing:.01em;
  font-feature-settings:"palt";
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; height:auto; display:block;}
a{color:var(--ec-key); text-decoration:underline; text-underline-offset:2px;}
p{margin:0 0 var(--sp-8);}
ul,ol{margin:0 0 var(--sp-4); padding-left:1.3em;}
li{margin-bottom:var(--sp-1);}
b,strong{font-weight:700;}

/* ── 3. レイアウト ─────────────────────────────── */
.ec-wrap{max-width:var(--wrap); margin:0 auto; background:#fff;}
.ec-sect{padding:var(--sp-12) var(--sp-4);}
.ec-sect--soft{background:#fff; border-top:1px solid var(--ec-line); border-bottom:1px solid var(--ec-line);}
.ec-sect--pb0{padding-bottom:0;}

/* ── 4. 見出し ─────────────────────────────────
   背景帯を使わない。サイズ差＋罫線だけで階層を作る */
.ec-h2{
  margin:0 0 var(--sp-5); padding:0 0 var(--sp-3);
  font-size:var(--fs-2xl); font-weight:700; line-height:1.35;
  letter-spacing:.005em; color:var(--ec-ink);
  border-bottom:2px solid var(--ec-key);
}
.ec-h3{
  margin:var(--sp-10) 0 var(--sp-3);
  font-size:var(--fs-lg); font-weight:700; line-height:1.45; color:var(--ec-ink);
}
.ec-h3:first-of-type{margin-top:0;}
.ec-lead{margin:0 0 var(--sp-5); color:var(--ec-ink-sub); font-size:var(--fs-sm);}

/* ── 5. 記事の体裁 ─────────────────────────────
   リスティングで来る人は比較記事に見慣れている。
   プロダクトのUIでなく「誰かが書いた記事」として見せる */
.ec-crumb{font-size:11.5px; color:var(--ec-ink-mute); padding:var(--sp-3) var(--sp-4) 0; display:flex; gap:6px; flex-wrap:wrap;}
.ec-crumb a{color:var(--ec-ink-mute); text-decoration:none;}
.ec-crumb span{color:var(--ec-line-dark);}
.ec-arthead{padding:var(--sp-4) var(--sp-4) 0;}
.ec-arttitle{
  margin:0 0 var(--sp-3); font-size:24px; font-weight:700; line-height:1.5;
  letter-spacing:.005em; color:var(--ec-ink);
}
.ec-artmeta{display:flex; gap:var(--sp-4); align-items:center; font-size:12px; color:var(--ec-ink-mute); margin:0 0 var(--sp-4);}
.ec-artmeta__by{padding-left:var(--sp-4); border-left:1px solid var(--ec-line);}
.ec-pr{
  margin:0 0 var(--sp-5); padding:var(--sp-3) var(--sp-4);
  background:#fff; border-left:3px solid var(--ec-line-dark);
  font-size:11.5px; color:var(--ec-ink-mute); line-height:1.7;
}
.ec-lead-block{padding:0 var(--sp-4) var(--sp-8);}
.ec-lead-block p{margin:0 0 var(--sp-10); line-height:1.95;}
.ec-figure{margin:var(--sp-6) 0; }
.ec-figure img{width:100%; aspect-ratio:4/3; object-fit:cover; max-height:290px; display:block; border-radius:var(--r);}
.ec-credit{display:block; margin-top:2px; color:var(--ec-line-dark); font-size:10.5px;}
.ec-figure figcaption{font-size:11.5px; color:var(--ec-ink-mute); margin-top:var(--sp-2); line-height:1.6;}
.ec-callout{
  margin:var(--sp-6) 0 0; padding:var(--sp-4) var(--sp-4) var(--sp-3);
  background:#FBF6E9; border-left:4px solid var(--ec-good); border-radius:0 var(--r) var(--r) 0;
}
.ec-callout__t{margin:0 0 var(--sp-2); font-weight:700; font-size:var(--fs-md);}
.ec-callout ul{margin:0; padding-left:1.2em; font-size:var(--fs-sm); color:var(--ec-ink-sub);}
.ec-callout li{margin-bottom:var(--sp-1); line-height:1.75;}

/* ── 5b. ファーストビュー（記事型では未使用） ─── */
.ec-fv{padding:var(--sp-8) var(--sp-4) var(--sp-6); background:var(--ec-key-soft); border-bottom:1px solid var(--ec-line);}
.ec-fv__hook{
  margin:0 0 var(--sp-3); font-size:var(--fs-3xl); font-weight:700;
  line-height:1.4; letter-spacing:.005em; color:var(--ec-ink);
}
.ec-fv__sub{margin:0 0 var(--sp-5); font-size:var(--fs-sm); color:var(--ec-ink-sub); line-height:1.8;}
.ec-fv__banner{background:#fff;}
.ec-fv__points{display:flex; gap:var(--sp-2); margin:var(--sp-5) 0 0; padding:0; list-style:none;}
.ec-fv__point{
  flex:1 1 0; min-width:0; text-align:center; background:#fff;
  border:1px solid var(--ec-line); border-radius:var(--r);
  padding:var(--sp-3) var(--sp-1);
  font-size:var(--fs-xs); font-weight:500; color:var(--ec-ink-sub); line-height:1.5;
}
.ec-fv__point b{display:block; font-size:var(--fs-lg); color:var(--ec-key); white-space:nowrap; margin-bottom:2px;}

/* ── 6. 比較表 ─────────────────────────────────── */
.ec-compare__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 calc(var(--sp-4) * -1); padding:0 var(--sp-4);}
.ec-compare{min-width:100%; font-size:var(--fs-xs); background:#fff; border-collapse:collapse; table-layout:fixed;}
.ec-compare th,.ec-compare td{
  border:1px solid var(--ec-line); padding:var(--sp-2) 5px;
  text-align:center; vertical-align:middle; line-height:1.5;
  word-break:auto-phrase; overflow-wrap:anywhere;
}
.ec-compare thead th{background:var(--ec-bg-soft); font-size:11px; font-weight:700; color:var(--ec-ink-sub); line-height:1.35;}
.ec-compare th.is-primary,.ec-compare td.is-primary{background:var(--ec-key-soft);}
.ec-compare thead th.is-primary{background:var(--ec-key); color:#fff;}
.ec-compare tbody th{text-align:left; background:var(--ec-bg-soft); font-weight:700; font-size:11.5px; width:5.2em; padding-left:6px; line-height:1.4;}
.ec-compare__icon{width:20px; height:20px; display:inline-block; vertical-align:-3px;}
.ec-compare__note{font-size:var(--fs-xs); color:var(--ec-ink-mute); margin-top:var(--sp-3); line-height:1.7;}

/* ── 7. ランキング ─────────────────────────────── */
.ec-rank{
  position:relative; margin:0 0 var(--sp-8); padding:var(--sp-6) var(--sp-4) var(--sp-5);
  background:#fff; border:1px solid var(--ec-line-dark); border-radius:var(--r-lg);
}
.ec-rank--1{border:0; border-top:4px solid var(--ec-key); background:linear-gradient(#FFFCEF,#fff 120px);}
.ec-rank__badge{
  position:absolute; top:-1px; left:-1px;
  background:var(--ec-key); color:#fff; font-size:var(--fs-xs); font-weight:700;
  padding:var(--sp-1) var(--sp-3); letter-spacing:.04em;
}
.ec-rank--1 .ec-rank__badge{top:-2px; left:-2px;}
.ec-rank__name{margin:var(--sp-3) 0 var(--sp-1); font-size:var(--fs-xl); font-weight:700; line-height:1.4;}
.ec-rank__catch{margin:0 0 var(--sp-4); font-size:var(--fs-sm); color:var(--ec-ink-sub); line-height:1.7;}
.ec-rank__spec{margin:0 0 var(--sp-4); font-size:var(--fs-sm); border-top:1px solid var(--ec-line);}
.ec-rank__spec>div{display:flex; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--ec-line);}
.ec-rank__spec dt{flex:0 0 6.5em; color:var(--ec-ink-mute); font-size:var(--fs-xs); padding-top:2px;}
.ec-rank__spec dd{margin:0; font-weight:700; flex:1;}

/* ── 8. チェックリスト ─────────────────────────── */
.ec-check{list-style:none; margin:0 0 var(--sp-4); padding:var(--sp-4); background:var(--ec-bg-soft); border-radius:var(--r); font-size:var(--fs-sm);}
.ec-check li{position:relative; padding-left:1.5em; margin-bottom:var(--sp-2); line-height:1.7;}
.ec-check li:last-child{margin-bottom:0;}
.ec-check li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:5px; border-left:2px solid var(--ec-key); border-bottom:2px solid var(--ec-key);
  transform:rotate(-45deg);
}

/* ── 9. CTA ────────────────────────────────────── */
/* CTAだけは「押せる立体感」を持たせる。実在のアフィ記事LP5サイトすべてが
   ハードなオフセット影を使っていた（research/raw/kyogo_design.md）。
   ふわっと広がる装飾影とは別物なので、地の低彩度・影なしとは両立する */
.ec-cta{
  display:block; text-align:center; text-decoration:none;
  background:var(--ec-accent); color:#fff; font-weight:700; font-size:var(--fs-lg);
  padding:var(--sp-4) var(--sp-4); border-radius:var(--r-lg);
  letter-spacing:.02em; line-height:1.4;
  box-shadow:0 3px 0 var(--ec-accent-dark);
  transition:transform .08s, box-shadow .08s;
}
.ec-cta:hover{background:var(--ec-accent-dark); box-shadow:0 3px 0 #7C2D12;}
.ec-cta:active{transform:translateY(3px); box-shadow:0 0 0 var(--ec-accent-dark);}
.ec-cta__sub{display:block; font-size:var(--fs-xs); font-weight:500; opacity:.92; margin-top:3px; letter-spacing:0;}
/* 2位以下。1位より弱く見せる＝最上位掲載を目立たせる */
.ec-cta--sub{background:#fff; color:var(--ec-key); border:1px solid var(--ec-line-dark); font-size:var(--fs-md); padding:var(--sp-3) var(--sp-4); box-shadow:none;}
.ec-cta--sub:active{transform:none; box-shadow:none;}
.ec-cta--sub:hover{background:var(--ec-bg-soft);}
.ec-cta--sub .ec-cta__sub{color:var(--ec-ink-mute); opacity:1;}
.ec-cta-note{font-size:var(--fs-xs); color:var(--ec-ink-mute); text-align:center; margin:var(--sp-2) 0 0;}

/* ── 10. FAQ ───────────────────────────────────── */
.ec-faq{border-top:1px solid var(--ec-line);}
.ec-faq__item{border-bottom:1px solid var(--ec-line);}
.ec-faq__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font:inherit; font-weight:700; font-size:var(--fs-md); color:var(--ec-ink);
  padding:var(--sp-4) var(--sp-8) var(--sp-4) 1.6em; position:relative; line-height:1.6;
}
.ec-faq__q::before{content:"Q"; position:absolute; left:0; top:var(--sp-4); color:var(--ec-key); font-weight:700;}
.ec-faq__q::after{
  content:""; position:absolute; right:var(--sp-2); top:1.5em;
  width:8px; height:8px; border-right:2px solid var(--ec-ink-mute); border-bottom:2px solid var(--ec-ink-mute);
  transform:rotate(45deg); transition:transform .2s;
}
.ec-faq__item.is-open .ec-faq__q::after{transform:rotate(-135deg);}
.ec-faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease;}
.ec-faq__item.is-open .ec-faq__a{grid-template-rows:1fr;}
.ec-faq__a>div{overflow:hidden;}
.ec-faq__a>div>*:first-child{margin-top:0;}
.ec-faq__a{font-size:var(--fs-sm); color:var(--ec-ink-sub); line-height:1.8;}
.ec-faq__item.is-open .ec-faq__a>div{padding:0 var(--sp-2) var(--sp-4) 1.6em;}

/* ── 11. まとめ ────────────────────────────────── */
.ec-summary{background:var(--ec-key-soft); border:1px solid var(--ec-line); border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-4);}
.ec-summary__title{margin:0 0 var(--sp-4); font-size:var(--fs-xl); font-weight:700; line-height:1.45;}
.ec-summary .ec-check{background:#fff;}

/* ── 12. 補足ボックス ──────────────────────────── */
.ec-note{
  background:var(--ec-bg-band); border-left:3px solid var(--ec-good);
  padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-4);
  font-size:var(--fs-xs); color:var(--ec-ink-sub); line-height:1.75;
}
.ec-note--urgent{border-left-color:var(--ec-great); background:#FCF1EF;}
.ec-todo{
  border-left:4px solid var(--ec-accent); background:#FFF7F2; color:var(--ec-accent-dark);
  padding:var(--sp-3) var(--sp-4); margin:0 0 var(--sp-4); font-size:var(--fs-xs); border-radius:var(--r);
}

/* ── 13. 汎用テーブル ──────────────────────────── */
.ec-table{width:100%; border-collapse:collapse; font-size:var(--fs-sm); background:#fff; margin:var(--sp-4) 0;}
.ec-table th,.ec-table td{border:1px solid var(--ec-line); padding:var(--sp-3); text-align:left; line-height:1.6;}
.ec-table thead th{background:var(--ec-bg-soft); font-weight:700; font-size:var(--fs-xs); color:var(--ec-ink-sub);}
.ec-table--price td:last-child{text-align:right; white-space:nowrap; font-weight:700;}
.ec-table--step td:first-child{width:2.4em; text-align:center; color:var(--ec-key); font-weight:700;}

/* ── 14. 追従CTA ───────────────────────────────── */
.ec-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-width:var(--wrap); margin:0 auto;
  padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); border-top:1px solid var(--ec-line-dark);
  transform:translateY(110%); transition:transform .22s ease;
}
.ec-sticky.is-show{transform:translateY(0);}
.ec-spacer-cta{height:80px;}

/* ── 15. フッター ──────────────────────────────── */
.ec-footer{padding:var(--sp-8) var(--sp-4) var(--sp-10); background:#fff; border-top:1px solid var(--ec-line); font-size:var(--fs-xs); color:var(--ec-ink-mute); line-height:1.8;}
.ec-footer__disclosure{margin:0 0 var(--sp-4);}
.ec-footer__links{list-style:none; margin:0 0 var(--sp-3); padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-4);}
.ec-footer__links a{color:var(--ec-ink-sub);}

/* ── 16. 画像 ──────────────────────────────────── */
.img-wrap{margin:var(--sp-4) 0; overflow:hidden; background:#fff;}

/* ── 17. 補助 ──────────────────────────────────── */
.ec-red{color:var(--ec-great);} .ec-key{color:var(--ec-key);} .ec-b{font-weight:700;}
.ec-marker{background:linear-gradient(transparent 62%, #FCE9A8 62%);}
.ec-mt0{margin-top:0!important;} .ec-mb0{margin-bottom:0!important;}
.ec-center{text-align:center;} .ec-small{font-size:var(--fs-xs); color:var(--ec-ink-mute);}
.ec-hidden{display:none!important;}
.ec-check:empty,.ec-fv__points:empty,.ec-rank__spec:empty{display:none;}

/* ── 18. 比較表アイコンの色 ────────────────────── */
.ic-great{color:var(--ec-great);} .ic-good{color:var(--ec-good);}
.ic-fair{color:var(--ec-fair);} .ic-bad{color:var(--ec-gray);}

/* ── 19. PC（600px〜）──────────────────────────
   スマホの1カラムを引き伸ばすのでなく、PCの読みやすさに合わせて組み直す */
@media (min-width:600px){
  :root{
    --wrap:var(--wrap-pc);
    --fs-sm:14px; --fs-md:17px; --fs-lg:19px;
    --fs-xl:22px; --fs-2xl:26px; --fs-3xl:32px;
  }
  body{background:#EEF0F3;}
  
  .ec-sect{padding:var(--sp-16) var(--sp-10);}
  .ec-crumb{padding:var(--sp-5) var(--sp-10) 0;}
  .ec-arthead{padding:var(--sp-5) var(--sp-10) 0;}
  .ec-arttitle{font-size:30px; line-height:1.45;}
  .ec-lead-block{padding:0 var(--sp-10) var(--sp-12);}
  .ec-figure img{max-height:360px;}
  .ec-fv{padding:var(--sp-12) var(--sp-10) var(--sp-10);}
  .ec-fv__hook{line-height:1.35;}
  .ec-compare__scroll{margin:0; padding:0; overflow-x:visible;}
  .ec-compare{font-size:var(--fs-sm); table-layout:auto;}
  .ec-compare th,.ec-compare td{padding:var(--sp-3) var(--sp-4);}
  .ec-compare tbody th{font-size:var(--fs-sm); width:auto; white-space:nowrap;}
  .ec-compare thead th{font-size:var(--fs-sm);}
  .ec-rank{padding:var(--sp-8) var(--sp-6) var(--sp-6);}
  .ec-rank__spec{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-6);}
  .ec-check{padding:var(--sp-5) var(--sp-6);}
  .ec-cta{max-width:420px; margin-left:auto; margin-right:auto; padding:var(--sp-5);}
  .ec-summary{padding:var(--sp-8) var(--sp-6);}
  .ec-footer{padding:var(--sp-10);}
  .ec-sticky{padding:var(--sp-3) var(--sp-4);}
  .ec-spacer-cta{height:88px;}
}


/* ============================================================
   20. 実在のアフィ記事LPのパターン
   参考: good-choice.net/car-kaitori（セルカの競合LP・2026-09-01実見）
   ・悩みのチェックリストから入る／赤字とマーカーで強弱／星評価
   ・1位の列だけ色を変える／数字ごとに注釈番号／表の下に出典
   ============================================================ */

/* 仮バナーの枠。実物が来るまで枠いっぱいで見えるようにする */
.ec-banner{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#12304E 0%,#0B4C7A 55%,#0E6FA8 100%);
  color:#fff; text-align:center; font-size:var(--fs-xs); line-height:1.7;
  padding:var(--sp-5) var(--sp-4); overflow:hidden;
}
.ec-banner--fv{aspect-ratio:16/9;}
.ec-banner--sect{aspect-ratio:5/1; margin:0 0 var(--sp-5);}
.ec-banner b{display:block; color:#fff; font-size:var(--fs-lg); font-weight:800; letter-spacing:.02em; margin-bottom:3px; text-shadow:0 1px 2px rgba(0,0,0,.35);}
.ec-banner span{display:block; color:rgba(255,255,255,.62); font-size:10px;}

/* PRバッジ（FVの右上） */
.ec-prbadge{
  position:absolute; top:6px; right:6px; z-index:2;
  background:rgba(26,34,43,.72); color:#fff; font-size:10px; font-weight:700;
  padding:2px 6px; letter-spacing:.06em; border-radius:2px;
}

/* 悩みのチェックリスト。記事の入口はここ */
.ec-worry{
  border:1px solid var(--ec-key); background:#fff; border-radius:var(--r);
  padding:var(--sp-5) var(--sp-4); margin:0 0 var(--sp-6);
}
.ec-worry ul{list-style:none; margin:0; padding:0;}
.ec-worry li{
  position:relative; padding-left:1.9em; margin-bottom:var(--sp-3);
  font-weight:700; font-size:var(--fs-md); line-height:1.65;
}
.ec-worry li:last-child{margin-bottom:0;}
.ec-worry li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:15px; height:15px; border:1.5px solid var(--ec-key); border-radius:2px;
}
.ec-worry li::after{
  content:""; position:absolute; left:4px; top:.5em;
  width:8px; height:4px; border-left:2px solid var(--ec-key); border-bottom:2px solid var(--ec-key);
  transform:rotate(-45deg);
}

/* 強調。実在LPの実値に合わせる
   （赤は原色 #ff0000 を使用・19箇所／マーカーは transparent 60% の下線グラデ＋
     スクロールで伸びるアニメーション。good-choice.net のCSSを実測） */
.ec-rb{color:#ff0000; font-weight:700;}
.ec-mk,.ec-mk--r{
  font-weight:700;
  background-repeat:no-repeat; background-size:200% 100%;
  background-position:right -100% bottom;
}
.ec-mk{background-image:linear-gradient(transparent 60%, #FFF176 60%);}
.ec-mk--r{background-image:linear-gradient(transparent 60%, #FFCDD2 60%);}
/* 画面に入ったら線が左から伸びる */
.ec-mk.is-drawn,.ec-mk--r.is-drawn{
  animation:ec-marker .7s ease forwards;
}
@keyframes ec-marker{
  0%{background-position:right -100% bottom}
  100%{background-position:0% bottom}
}
@media (prefers-reduced-motion:reduce){
  .ec-mk,.ec-mk--r{background-position:0% bottom;}
  .ec-mk.is-drawn,.ec-mk--r.is-drawn{animation:none;}
}

/* 注釈番号。数字を出したら必ず根拠に紐づける */
.ec-fn{font-size:11px; vertical-align:super; line-height:0; color:var(--ec-ink-mute); font-weight:400; margin-left:1px;}
.ec-notes{
  margin:var(--sp-4) 0 0; padding:var(--sp-4);
  background:#fff; border-top:1px solid var(--ec-line);
  font-size:11px; color:var(--ec-ink-mute); line-height:1.85;
}
.ec-notes ol{margin:0; padding-left:1.6em;}
.ec-notes li{margin-bottom:3px;}

/* 星評価 */
.ec-stars{display:inline-flex; align-items:center; gap:3px; white-space:nowrap;}
.ec-stars__s{color:#F2A900; font-size:13px; letter-spacing:-1px;}
.ec-stars__n{font-weight:700; font-size:14px; color:var(--ec-ink);}

/* 比較表：1位の列を黄色系にして目立たせる（競合と同じ手） */
.ec-compare th.is-primary,.ec-compare td.is-primary{background:#FFFCEF;}
.ec-compare thead th.is-primary{background:var(--ec-key); color:#fff;}
.ec-compare td.is-primary b,.ec-compare td.is-primary strong{color:#C4302B;}
.ec-compare__scrollhint{
  font-size:11px; color:var(--ec-ink-mute); text-align:right; margin:0 0 var(--sp-1);
}
/* 表の下に並べる各社のボタン */
.ec-compare__ctas{display:grid; gap:var(--sp-2); margin:var(--sp-3) 0 0;}
.ec-compare__ctas .ec-cta{font-size:var(--fs-sm); padding:var(--sp-3) var(--sp-2); box-shadow:0 2px 0 var(--ec-accent-dark);}

/* 番号つき小見出し（①②③）。左に太いバー */
.ec-step-h{
  margin:var(--sp-10) 0 var(--sp-4); padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-left:5px solid var(--ec-key);
  background:#fff; font-size:var(--fs-lg); font-weight:700; line-height:1.5;
}

/* 1位で対応できないケースを、別の選択肢で埋めるボックス */
.ec-fallback{
  background:var(--ec-key-soft); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-4); margin:var(--sp-5) 0 0; font-size:var(--fs-sm);
}
.ec-fallback__t{margin:0 0 var(--sp-2); font-weight:700; font-size:var(--fs-md); line-height:1.6;}
.ec-fallback ul{margin:0 0 var(--sp-3); padding-left:1.3em;}
.ec-fallback li{margin-bottom:3px;}

@media (min-width:600px){
  .ec-banner--sect{aspect-ratio:7/1;}
  .ec-compare__ctas{grid-template-columns:repeat(3,1fr);}
  .ec-compare__scrollhint{display:none;}
}

/* ── 21. 項目別の評価。総合＝下の3項目の平均（恣意的な点にしない） ── */
.ec-score{margin:0 0 var(--sp-5); border:1px solid var(--ec-line); border-radius:var(--r-lg); overflow:hidden;}
.ec-score__total{
  display:flex; align-items:baseline; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); background:var(--ec-bg-soft);
}
.ec-score__lbl{font-size:var(--fs-xs); font-weight:700; color:var(--ec-ink-sub);}
.ec-score__total b{font-size:26px; line-height:1; color:var(--ec-great); font-weight:800;}
.ec-score__items{padding:var(--sp-2) var(--sp-4) var(--sp-3);}
.ec-score__i{
  display:grid; grid-template-columns:4.2em 3.4em 1fr; align-items:center;
  gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--ec-line);
}
.ec-score__i:last-child{border-bottom:0;}
.ec-score__k{font-size:var(--fs-sm); font-weight:700;}
.ec-score__v{font-size:var(--fs-sm); font-weight:800; color:var(--ec-ink);}
.ec-score__v::before{content:"★"; color:#F2A900; margin-right:2px;}
.ec-score__n{font-size:11px; color:var(--ec-ink-mute); line-height:1.4;}

/* ══════════════════════════════════════════════════════════════
   22. 稼働中の競合LP（kuruma-kaitoritai.com）から移植したパーツ。
       値は main.css の実測値をそのまま使っている
   ══════════════════════════════════════════════════════════════ */

/* 見出し：左に濃い青のバーを立てた青ベタ帯 */
.ec-h2{
  background-image:linear-gradient(90deg,var(--ec-key-mid) 14px,var(--ec-key) 15px);
  color:#fff; padding:.5em .6em; margin:var(--sp-10) 0 var(--sp-5);
  font-size:var(--fs-xl); font-weight:800; line-height:1.4;
  border-bottom:0; border-radius:0;
}
.ec-h2 .y{color:#FFFF00;}          /* 見出しの中で1語だけ黄色にする */
.ec-h3{
  border-left:0; border-bottom:3px solid var(--ec-key);
  padding:0 0 .25em; margin:var(--sp-8) 0 var(--sp-4);
  font-size:var(--fs-lg); font-weight:800;
}

/* 星：★を重ねて data-rate の割合だけ見せる＝0.1刻みで正確に出る */
.ec-star5{white-space:nowrap; color:#ccc; position:relative; display:inline-block; letter-spacing:1px;}
.ec-star5::after{content:'★★★★★'; overflow:hidden; color:#F9CE04; position:absolute; left:0; top:0; white-space:nowrap;}
/* 0.0〜5.0 を0.1刻みで全部定義。定義が無い値は width:auto ＝ 満点表示になる事故があった */
.ec-star5[data-rate="0.0"]::after{width:0%}
.ec-star5[data-rate="0.1"]::after{width:2%}
.ec-star5[data-rate="0.2"]::after{width:4%}
.ec-star5[data-rate="0.3"]::after{width:6%}
.ec-star5[data-rate="0.4"]::after{width:8%}
.ec-star5[data-rate="0.5"]::after{width:10%}
.ec-star5[data-rate="0.6"]::after{width:12%}
.ec-star5[data-rate="0.7"]::after{width:14%}
.ec-star5[data-rate="0.8"]::after{width:16%}
.ec-star5[data-rate="0.9"]::after{width:18%}
.ec-star5[data-rate="1.0"]::after{width:20%}
.ec-star5[data-rate="1.1"]::after{width:22%}
.ec-star5[data-rate="1.2"]::after{width:24%}
.ec-star5[data-rate="1.3"]::after{width:26%}
.ec-star5[data-rate="1.4"]::after{width:28%}
.ec-star5[data-rate="1.5"]::after{width:30%}
.ec-star5[data-rate="1.6"]::after{width:32%}
.ec-star5[data-rate="1.7"]::after{width:34%}
.ec-star5[data-rate="1.8"]::after{width:36%}
.ec-star5[data-rate="1.9"]::after{width:38%}
.ec-star5[data-rate="2.0"]::after{width:40%}
.ec-star5[data-rate="2.1"]::after{width:42%}
.ec-star5[data-rate="2.2"]::after{width:44%}
.ec-star5[data-rate="2.3"]::after{width:46%}
.ec-star5[data-rate="2.4"]::after{width:48%}
.ec-star5[data-rate="2.5"]::after{width:50%}
.ec-star5[data-rate="2.6"]::after{width:52%}
.ec-star5[data-rate="2.7"]::after{width:54%}
.ec-star5[data-rate="2.8"]::after{width:56%}
.ec-star5[data-rate="2.9"]::after{width:58%}
.ec-star5[data-rate="3.0"]::after{width:60%}
.ec-star5[data-rate="3.1"]::after{width:62%}
.ec-star5[data-rate="3.2"]::after{width:64%}
.ec-star5[data-rate="3.3"]::after{width:66%}
.ec-star5[data-rate="3.4"]::after{width:68%}
.ec-star5[data-rate="3.5"]::after{width:70%}
.ec-star5[data-rate="3.6"]::after{width:72%}
.ec-star5[data-rate="3.7"]::after{width:74%}
.ec-star5[data-rate="3.8"]::after{width:76%}
.ec-star5[data-rate="3.9"]::after{width:78%}
.ec-star5[data-rate="4.0"]::after{width:80%}
.ec-star5[data-rate="4.1"]::after{width:82%}
.ec-star5[data-rate="4.2"]::after{width:84%}
.ec-star5[data-rate="4.3"]::after{width:86%}
.ec-star5[data-rate="4.4"]::after{width:88%}
.ec-star5[data-rate="4.5"]::after{width:90%}
.ec-star5[data-rate="4.6"]::after{width:92%}
.ec-star5[data-rate="4.7"]::after{width:94%}
.ec-star5[data-rate="4.8"]::after{width:96%}
.ec-star5[data-rate="4.9"]::after{width:98%}
.ec-star5[data-rate="5.0"]::after{width:100%}

/* 評価アイコン：文字でなくCSSの図形。◎=二重丸／○=丸／△=三角 */
.ec-mk-a,.ec-mk-b,.ec-mk-c{display:inline-block; vertical-align:middle;}
.ec-mk-a{width:2.2em; height:2.2em; border-radius:50%; border:.5em double #E60000;}
.ec-mk-b{width:2em; height:2em; border-radius:50%; border:3px solid #F9B104; margin:.1em;}
.ec-mk-c{
  width:2.1em; --b:.42em; aspect-ratio:1/cos(30deg); background:#2F7D52;
  clip-path:polygon(50% 0,100% 100%,0 100%,50% 0,50% var(--b),
    calc(var(--b)*cos(30deg)) calc(100% - var(--b)/2),
    calc(100% - var(--b)*cos(30deg)) calc(100% - var(--b)/2),50% var(--b));
}

/* 王冠：比較表の順位。clip-pathだけで描く（画像を持たない） */
.ec-crown{
  display:inline-flex; justify-content:center; align-items:center; color:#fff;
  clip-path:polygon(50% 0%,70% 40%,100% 20%,80% 100%,20% 100%,0 20%,30% 40%);
  padding:9px 0 0; font-weight:900; font-size:13px; line-height:1;
}
.ec-crown--1{background:#EDCB3A; width:46px; height:38px;}
.ec-crown--2{background:#ADADAD; width:34px; height:28px;}
.ec-crown--3{background:#8C6D2B; width:34px; height:28px;}

/* CTA：跳ねる＋光沢が走る＋右に矢印。競合と同じ3点セット */
.ec-cta{position:relative; overflow:hidden; animation:ec-cta-bounce 2s infinite; border-radius:10px;}
.ec-cta::before{
  content:''; background:#fff; width:.4em; height:.8em; position:absolute; right:1em; top:50%;
  transform:translateY(-50%); pointer-events:none;
  clip-path:polygon(0 25%,0 0,100% 50%,0 100%,0 75%,55% 50%);
}
.ec-cta::after{
  content:''; position:absolute; top:-200%; left:-150%; width:100%; height:500%;
  background-image:linear-gradient(to right,#ffffff00,#ffffffdd 100%);
  animation:ec-cta-shiny 4s infinite; pointer-events:none; transform:rotate(20deg);
}
@keyframes ec-cta-bounce{
  0%{box-shadow:0 .35em 0 var(--ec-accent-dark); top:0}
  10%{box-shadow:0 0 0 var(--ec-accent-dark); top:.35em}
  20%{box-shadow:0 .35em 0 var(--ec-accent-dark); top:0}
  30%{box-shadow:0 0 0 var(--ec-accent-dark); top:.35em}
  40%{box-shadow:0 .35em 0 var(--ec-accent-dark); top:0}
}
@keyframes ec-cta-shiny{0%{left:-150%}50%{left:-150%}100%{left:150%}}
.ec-cta--sub{animation:none; box-shadow:none;}
.ec-cta--sub::after{display:none;}
.ec-cta--sub::before{background:var(--ec-key-deep);}
@media (prefers-reduced-motion:reduce){
  .ec-cta{animation:none;} .ec-cta::after{animation:none; display:none;}
}

/* マーカー：競合の実値。黄=強調／桃=悩みの代弁 */
.ec-mk{background:linear-gradient(transparent 60%,#FF0 60%); padding:0 .25em;}
.ec-mk--r{background:linear-gradient(transparent 5%,#FFC9AF 5%); line-height:1.6; padding:0 .25em;}

/* 注意ボックス：自分から弱点を出す。番号を丸で囲む */
.ec-warn{background:#FFFDDB; border:3px solid var(--ec-accent); border-radius:var(--r-lg); padding:var(--sp-4); margin:var(--sp-5) 0; font-size:var(--fs-sm);}
.ec-warn ol{counter-reset:num; padding-left:1.6em; margin:.4em 0 0;}
.ec-warn ol li{list-style:none; counter-increment:num; position:relative; margin-bottom:.35em;}
.ec-warn ol li::before{
  content:counter(num); position:absolute; top:.15em; left:-1.6em; width:1.3em; height:1.3em;
  border-radius:50%; border:1px solid #333; display:flex; align-items:center; justify-content:center; font-size:.85em;
}


/* 比較表の評価：SVGをやめてCSSの図形にした（競合と同じ作り） */
.ec-ic{display:inline-block; vertical-align:middle; margin:0 auto 2px;}
.ec-ic--great{width:1.9em; height:1.9em; border-radius:50%; border:.42em double #E60000;}
.ec-ic--good{width:1.7em; height:1.7em; border-radius:50%; border:3px solid #F9B104;}
.ec-ic--fair{
  width:1.8em; --b:.38em; aspect-ratio:1/cos(30deg); background:#2F7D52;
  clip-path:polygon(50% 0,100% 100%,0 100%,50% 0,50% var(--b),
    calc(var(--b)*cos(30deg)) calc(100% - var(--b)/2),
    calc(100% - var(--b)*cos(30deg)) calc(100% - var(--b)/2),50% var(--b));
}
.ec-ic--bad{width:1.6em; height:1.6em; position:relative;}
.ec-ic--bad::before,.ec-ic--bad::after{
  content:''; position:absolute; left:50%; top:0; width:3px; height:100%;
  background:var(--ec-gray); border-radius:2px;
}
.ec-ic--bad::before{transform:translateX(-50%) rotate(45deg);}
.ec-ic--bad::after{transform:translateX(-50%) rotate(-45deg);}
.ec-compare td{text-align:center;}
.ec-compare thead th{padding:var(--sp-2) 4px;}
.ec-compare thead th .ec-crown{margin-bottom:2px;}
.ec-colname{display:block;}
/* 1位の列は見出しも中身も一段強く */
.ec-compare thead th.is-primary{background:var(--ec-key-deep); color:#fff;}
.ec-stars__n{margin-left:4px;}

/* カセット：競合の .box の実値（薄い水色の面＋白3px枠＋影＋角丸10px） */
.ec-rank{
  background:#DBF1FC; border:3px solid #fff; border-radius:10px;
  filter:drop-shadow(0 0 5px #00000030);
  padding:var(--sp-5) 10px var(--sp-4); margin:0 0 var(--sp-10);
}
.ec-rank--1{background:#DBF1FC; border:3px solid #fff; border-top:3px solid #fff;}
/* カセットの中身は白カードに載せる＝面と中身の境目を作る */
.ec-rank__spec,.ec-score,.ec-check{background:#fff; border-radius:var(--r); }
.ec-rank__spec{padding:0 var(--sp-3); border-top:0;}
.ec-rank__spec>div:last-child{border-bottom:0;}
.ec-rank__badge{border-radius:var(--r) 0 var(--r) 0;}

/* ── 23. 結論直後のCTA・表内CTA・順位ごとの強弱 ── */
.ec-ctalead{margin:var(--sp-6) 0 var(--sp-10); padding:var(--sp-4); background:var(--ec-key-soft); border-radius:var(--r-lg);}
.ec-ctalead__t{margin:0 0 var(--sp-3); font-size:var(--fs-sm); line-height:1.7; text-align:center;}

/* 表の最終行に入れるボタン。マスの幅に合わせる */
.ec-compare__ctarow td{padding:6px 4px; background:#fff;}
.ec-cta--tbl{
  font-size:12px; font-weight:800; padding:12px 14px 12px 4px; margin:0;
  border-radius:6px; line-height:1.3; animation:none; box-shadow:0 3px 0 var(--ec-accent-dark);
}
.ec-cta--tbl::after{display:none;}
.ec-cta--tbl::before{right:.5em; width:.32em; height:.62em;}
.ec-compare__ctarow td:first-of-type .ec-cta--tbl{animation:ec-cta-bounce 2s infinite;}

/* 順位で強弱をつける。1位=金枠+水色の面／2位=銀枠+うすい面／3位=銅枠+白 */
.ec-rank--1{background:#DBF1FC; border:3px solid #EDCB3A;}
.ec-rank--2{background:#F1F6F9; border:3px solid #C9CDD1;}
.ec-rank--3{background:#fff;     border:3px solid #D8C7A4;}
.ec-rank--1 .ec-rank__badge{background:#EDCB3A; color:#3A2E00;}
.ec-rank--2 .ec-rank__badge{background:#ADADAD; color:#fff;}
.ec-rank--3 .ec-rank__badge{background:#8C6D2B; color:#fff;}
.ec-rank--1 .ec-rank__name{font-size:var(--fs-2xl);}
.ec-rank--1 .ec-score__total b{font-size:32px;}
.ec-rank--2 .ec-score__total,.ec-rank--3 .ec-score__total{background:#EEF1F3;}
/* 1位だけ帯を足して「ここが結論」を明示 */
.ec-rank--1::before{
  content:"総合1位"; display:block; margin:calc(var(--sp-5) * -1) -10px var(--sp-4);
  background:linear-gradient(90deg,#E0A800,#EDCB3A); color:#3A2E00;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-align:center; padding:5px;
  border-radius:7px 7px 0 0;
}

/* ── 24. カセットを競合の .box の形に戻す ────────────────────
   面と枠は全社共通。強弱は「順位アイコンの色」だけで付ける
   （金枠×水色面は色が喧嘩するのでやらない）            ── */
.ec-rank,.ec-rank--1,.ec-rank--2,.ec-rank--3{
  background:#DBF1FC; border:3px solid #fff; border-radius:10px;
  filter:drop-shadow(0 0 5px #00000030);
  padding:var(--sp-4) 10px var(--sp-4); margin:0 0 var(--sp-10);
}
.ec-rank--1::before{content:none;}
.ec-rank__badge{display:none;}

/* 順位アイコン＋社名。下に太い青線＝競合の .box_title */
.ec-rank__head{
  display:flex; align-items:flex-end; gap:var(--sp-2);
  border-bottom:3px solid var(--ec-key); margin:0 0 var(--sp-4); padding-bottom:2px;
}
.ec-rank__head .ec-crown{flex:0 0 auto;}
.ec-rank__name{margin:0; padding:0 0 .2em .1em; font-size:var(--fs-2xl); font-weight:800; line-height:1; flex:1;}
/* 競合の feColorMatrix の実値。金→銀→銅 */
.ec-crown--1{background:#C79903; width:42px; height:34px;}
.ec-crown--2{background:#6B6866; width:38px; height:31px;}
.ec-crown--3{background:#472E03; width:38px; height:31px;}

/* サムネ画像。仮のうちは枠だけ出す */
.ec-rank__thumb{
  width:100%; aspect-ratio:4/3; object-fit:contain; display:block;
  border-radius:var(--r-lg); margin:0 0 var(--sp-4); background:#fff;
}
.ec-rank__thumb--todo{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(160deg,#12304E,#0B4C7A 55%,#0E6FA8);
  color:rgba(255,255,255,.72); font-size:11px; line-height:1.7; padding:var(--sp-4);
}
.ec-rank__thumb--todo b{display:block; color:#fff; font-size:var(--fs-md); margin-bottom:2px;}

/* 総合評価：競合の .stars（白＋青3px枠＋青タブ＋3列） */
.ec-score{
  display:flex; flex-wrap:wrap; background:#fff; border:3px solid var(--ec-key);
  border-radius:10px; padding:10px; margin:0 0 var(--sp-4);
}
.ec-score__total{
  display:flex; align-items:flex-end; gap:var(--sp-2);
  border-bottom:2px solid var(--ec-key); line-height:1; width:100%; margin-bottom:10px;
}
.ec-score__total h4{
  margin:0; background:var(--ec-key); color:#fff; border-radius:5px 5px 0 0;
  line-height:1; padding:.5em; font-size:var(--fs-xs); font-weight:700;
}
.ec-score__total .ec-star5{font-size:18px; padding-bottom:.2em;}
.ec-score__total b{font-size:26px; color:var(--ec-great); font-weight:800; padding-bottom:.05em;}
.ec-score__i{display:flex; width:calc(100% / 3); font-size:var(--fs-sm); font-weight:700; padding:2px 0;}
.ec-score__i h5{margin:0 .25em 0 0; font-size:var(--fs-sm); font-weight:700; color:var(--ec-ink-sub);}
.ec-score__i p{margin:0;}
.ec-score__st{color:#F9CE04; margin-right:1px;}

/* カセットの中身は白カードに載せる */
.ec-rank__spec,.ec-check{background:#fff; border-radius:10px; padding:10px;}
.ec-rank__spec{border-top:0; margin-bottom:var(--sp-4);}


/* ── 25. 仕上げ ────────────────────────────────────── */
/* 総合評価の枠を細く */
.ec-score{border-width:2px;}
.ec-score__total{border-bottom-width:2px;}

/* 1位を一段だけ強める（面と枠は3社共通のまま。効かせるのは冠まわりだけ） */
.ec-rank--1 .ec-rank__head{border-bottom-color:#C79903;}
.ec-rank--1 .ec-crown{width:52px; height:43px; font-size:15px; padding-top:11px;}
.ec-rank--1 .ec-rank__name{font-size:27px;}
.ec-rank--1 .ec-rank__name::after{
  content:"総合1位"; display:inline-block; vertical-align:middle;
  margin-left:8px; padding:3px 7px; border-radius:3px;
  background:#C79903; color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em;
}
.ec-rank--1 .ec-score{border-color:#C79903;}
.ec-rank--1 .ec-score__total{border-bottom-color:#C79903;}
.ec-rank--1 .ec-score__total h4{background:#C79903;}

/* 表は折り返さない。入らないぶんは文字を詰める */
.ec-compare tbody th{
  width:5.4em; font-size:10.5px; white-space:nowrap; letter-spacing:-.02em; padding-left:4px;
}
.ec-compare thead th{white-space:nowrap;}
.ec-compare td{font-size:11.5px; letter-spacing:-.02em;}
.ec-rank__spec dt{flex:0 0 6.2em; font-size:10.5px; white-space:nowrap; letter-spacing:-.02em;}
.ec-rank__spec dd{font-size:13px; letter-spacing:-.02em;}

/* カセットの中が白カードの連続になるので、役割ごとに地を変える */
.ec-rank__catch{
  background:transparent; padding:0 4px; margin:0 0 var(--sp-4);
  font-size:var(--fs-sm); color:var(--ec-key-deep); font-weight:700;
}
.ec-rank__spec{padding:0; overflow:hidden;}
.ec-rank__spec>div{padding:0; border-bottom:1px solid #fff;}
.ec-rank__spec dt{
  background:#88C9EA; color:#fff; font-weight:700;
  padding:9px 6px; display:flex; align-items:center;
}
.ec-rank__spec dd{padding:9px 8px; background:#fff; display:flex; align-items:center;}
.ec-rank__spec dd>span{display:block; width:100%;}
.ec-check{background:#FFFCEB; border:1px solid #F2E3A8;}

/* ── 26. 比較表を角丸に・順位で色味を変える・濃い青をやめる ── */
.ec-compare__scroll{
  margin:0; padding:0; border-radius:10px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  border:1px solid var(--ec-line-dark); background:#F3F5F7;
}
.ec-compare{border-radius:0; border-collapse:separate; border-spacing:0;}
.ec-compare th,.ec-compare td{border:0; border-right:1px solid var(--ec-line); border-bottom:1px solid var(--ec-line);}
.ec-compare tr>*:last-child{border-right:0;}
.ec-compare tbody tr:last-child>*{border-bottom:0;}
.ec-compare thead th{background:#F3F5F7; vertical-align:top; padding:8px 4px 6px;}
/* 濃い青をやめて、順位ごとの淡い色味にする */
.ec-compare thead th.ec-col--1{background:#FFF6DC;}
.ec-compare thead th.ec-col--2{background:#F1F3F5;}
.ec-compare thead th.ec-col--3{background:#F7F2E9;}
.ec-compare thead th.is-primary{background:#FFF6DC; color:var(--ec-ink);}
.ec-compare td.is-primary{background:#FFFDF4;}
.ec-compare tbody th{background:#F3F5F7;}
/* ヘッダ内のサムネ枠。画像が入るまではロゴ枠として出す */
.ec-colthumb{
  display:block; width:100%; aspect-ratio:4/3; object-fit:contain;
  margin:4px 0 3px; border-radius:4px; background:#fff; border:1px solid var(--ec-line);
}
.ec-colname{display:block; font-size:11.5px; font-weight:800; line-height:1.25;}
.ec-compare thead th .ec-crown{margin:0 auto 2px; display:flex;}
.ec-compare__ctarow td{border-bottom:0;}

/* スペック表：項目名の幅を全行そろえる／白い部分に薄い線 */
.ec-rank__spec>div{border-bottom:1px solid var(--ec-line);}
.ec-rank__spec>div:last-child{border-bottom:0;}
.ec-rank__spec dt{flex:0 0 7.2em; width:7.2em;}
.ec-check{border:1px solid #EBDFAE;}
.ec-check li+li{border-top:1px solid #F0E7C6; padding-top:7px; margin-top:7px;}

.ec-rank__thumb{border:1px solid var(--ec-line);}

/* ── 27. カセット内の塊に見出しを付けて、何の話か分かるようにする ── */
.ec-blk{margin:0 0 var(--sp-8);}
.ec-blk__t{
  margin:0 0 var(--sp-3); padding:0 0 6px 10px;
  border-left:4px solid var(--ec-key); border-bottom:1px solid var(--ec-line);
  font-size:var(--fs-md); font-weight:800; color:var(--ec-key-deep); line-height:1.4;
}
.ec-rank--1 .ec-blk__t{border-left-color:#C79903;}
.ec-blk__p{
  margin:0; background:#fff; border:1px solid var(--ec-line); border-radius:10px;
  padding:13px; font-size:var(--fs-sm); line-height:1.85;
}
.ec-check{margin:0; padding:13px;}
.ec-check li{padding:2px 0 2px 24px;}
.ec-check li+li{padding-top:9px; margin-top:9px;}
/* 塊どうしの間を広げる（詰まって重く見えるのを解消） */
.ec-rank__spec{margin-bottom:var(--sp-8);}
.ec-score{margin-bottom:var(--sp-8);}
.ec-rank__catch{margin-bottom:var(--sp-6);}
.ec-rank{padding:var(--sp-4) 12px var(--sp-5);}

/* ── 28. 冒頭CTAは小さいオレンジボタン／おすすめポイントは2行まで ── */
.ec-ctalead{background:transparent; padding:0; margin:var(--sp-4) 0 var(--sp-8); text-align:center;}
.ec-cta--sm{
  display:inline-block; width:auto; max-width:none;
  font-size:13px; padding:11px 34px 11px 22px; border-radius:8px;
  box-shadow:0 3px 0 var(--ec-accent-dark); animation:none;
}
.ec-cta--sm::after{display:none;}
.ec-cta--sm::before{right:.8em; width:.34em; height:.66em;}
.ec-ctalead__n{display:block; margin:6px 0 0; font-size:11px; color:var(--ec-ink-mute);}
.ec-note2{font-size:10.5px; color:var(--ec-ink-mute); font-weight:400; white-space:nowrap;}
.ec-check li{font-size:13px; line-height:1.55;}

/* ── 29. 余白の詰め ────────────────────────────────
   セクションの切り替わりと、カセット内の見出しまわりが空きすぎていた */
.ec-sect{padding:var(--sp-8) var(--sp-4);}
.ec-h2{margin:var(--sp-6) 0 var(--sp-5);}
.ec-sect .ec-h2:first-child,.ec-sect .ec-banner+.ec-h2{margin-top:0;}
.ec-banner--sect{margin:0 0 var(--sp-4);}
/* カセット内：見出しと中身の間・塊どうしの間を少し詰める */
.ec-blk{margin:0 0 var(--sp-6);}
.ec-blk__t{margin:0 0 var(--sp-2); padding:0 0 5px 10px;}
.ec-rank__spec{margin-bottom:var(--sp-6);}
.ec-score{margin-bottom:var(--sp-6);}
.ec-rank__catch{margin-bottom:var(--sp-4);}
.ec-rank__thumb{margin-bottom:var(--sp-4);}
.ec-rank{margin-bottom:var(--sp-8);}
@media (min-width:600px){ .ec-sect{padding:var(--sp-10) var(--sp-10);} }

/* ── 30. 詰めすぎたので少し戻す（コンテンツ間を優先して広げる） ── */
.ec-sect{padding:var(--sp-10) var(--sp-4);}      /* 32 → 40px */
.ec-h2{margin:var(--sp-8) 0 var(--sp-5);}        /* 24 → 32px */
.ec-banner--sect{margin:0 0 var(--sp-5);}
.ec-blk{margin:0 0 var(--sp-8);}                 /* 24 → 32px */
.ec-rank__spec{margin-bottom:var(--sp-6);}
.ec-figure{margin:var(--sp-6) 0;}
.ec-callout{margin:var(--sp-6) 0;}
.ec-rank{margin-bottom:var(--sp-10);}
@media (min-width:600px){ .ec-sect{padding:var(--sp-12) var(--sp-10);} }

/* 最後のCTA（まとめの中）は、直前の注記から離す */
.ec-summary .ec-note+.ec-cta,
.ec-summary .ec-check+.ec-cta{margin-top:var(--sp-10);}
.ec-summary .ec-cta{margin-top:var(--sp-10);}

/* ── 31. 追従CTAがコンテンツに被る問題 ──────────────
   position:fixed なので本体に逃げが要る。影も付けて面を分ける */
body{padding-bottom:96px;}
.ec-sticky{
  background:#fff;
  box-shadow:0 -4px 14px rgba(0,0,0,.14);
  border-top:1px solid var(--ec-line-dark);
}
@media (min-width:600px){ body{padding-bottom:104px;} }

/* ── 33. 補助金の申請ステップ（横1列・番号を丸で） ── */
.ec-steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
  list-style:none; margin:var(--sp-4) 0; padding:0; position:relative;
}
.ec-steps li{display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;}
.ec-steps li::after{
  content:""; position:absolute; top:13px; left:calc(50% + 15px); right:calc(-50% + 15px);
  height:2px; background:var(--ec-line-dark);
}
.ec-steps li:last-child::after{display:none;}
.ec-steps b{
  width:27px; height:27px; border-radius:50%; background:var(--ec-key); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; position:relative; z-index:1;
}
.ec-steps span{margin-top:5px; font-size:10.5px; font-weight:700; line-height:1.35; letter-spacing:-.02em;}
.ec-subp{margin:var(--sp-4) 0 0; font-size:var(--fs-sm); line-height:1.8;}

/* ══════════════════════════════════════════════════════════
   34. 施工事例・口コミ
   車査定LP（carsatei shashu_area）の assessment / review-card の
   実装をそのまま移植。横スクロールのレール＋scroll-snap
   ══════════════════════════════════════════════════════════ */

/* 施工事例のレール。主役は BEFORE / AFTER の写真 */
.ec-rail{
  display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:4px 2px 10px; scroll-snap-type:x mandatory;
}
.ec-rail::-webkit-scrollbar{height:6px;}
.ec-rail::-webkit-scrollbar-thumb{background:#cfd8e1; border-radius:3px;}
.ec-jcard{
  flex:0 0 232px; margin:0; background:#fff; border:1px solid var(--ec-line);
  border-radius:8px; overflow:hidden; scroll-snap-align:start; box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.ec-jcard__ba{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ec-line);}
.ec-jcard__ph{position:relative; background:#f2f2f2;}
.ec-jcard__ph img{width:100%; height:104px; object-fit:cover; display:block;}
.ec-jcard__ph b{
  position:absolute; left:0; bottom:0; background:rgba(26,34,43,.78); color:#fff;
  font-size:9px; font-weight:800; letter-spacing:.06em; padding:2px 6px;
}
.ec-jcard__ph b.af{background:var(--ec-accent);}
.ec-jcard__b{display:flex; flex-direction:column; gap:3px; padding:8px 10px 10px;}
.ec-jcard__t{font-size:13px; font-weight:900; color:var(--ec-ink); line-height:1.3;}
.ec-jcard__m{
  font-size:10px; font-weight:700; color:var(--ec-key-deep);
  background:#EDF3F8; padding:3px 6px; border-radius:3px; align-self:flex-start;
}
.ec-jcard__x{font-size:11px; line-height:1.6; color:var(--ec-ink-sub);}
.ec-rail__hint{margin:0; font-size:11px; color:var(--ec-ink-mute); text-align:right;}

/* 口コミのカルーセル */
.ec-rvrail{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding-bottom:8px;
}
.ec-rvrail::-webkit-scrollbar{height:4px;}
.ec-rvrail::-webkit-scrollbar-thumb{background:#ddd; border-radius:2px;}
.ec-rv{
  flex:0 0 78%; scroll-snap-align:start; position:relative;
  background:linear-gradient(180deg,#FFF8F0 0%,#fff 50%);
  border:1px solid #FFD9B8; border-radius:10px; padding:10px 12px 12px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.ec-rv__q{
  position:absolute; top:6px; right:10px; font-size:28px; line-height:1;
  color:#FFB380; font-family:serif; font-weight:900;
}
.ec-rv__head{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:4px;}
.ec-rv__t{font-weight:800; color:var(--ec-key-deep); font-size:11.5px; line-height:1.3; flex:1;}
.ec-rv__tag{
  background:var(--ec-great); color:#fff; font-size:11px; font-weight:900;
  padding:2px 7px; border-radius:4px; white-space:nowrap;
}
.ec-rv__meta{font-size:10.5px; color:var(--ec-ink-mute); margin-bottom:5px;}
.ec-rv__b{font-size:11px; color:var(--ec-ink); line-height:1.6;}

/* 引用元。目立たせない（読者向けでなく出所の明示） */
.ec-voice__note{margin:0; font-size:9px; color:#B4BCC3; text-align:right; line-height:1.4; font-weight:400;}

/* まとめのサムネ（ランキング1位と同じ画像を使う） */
.ec-summary__thumb{
  width:100%; aspect-ratio:4/3; object-fit:contain; display:block;
  border-radius:var(--r-lg); margin:0 0 var(--sp-4); border:1px solid var(--ec-line); background:#fff;
}
.ec-summary__thumb--todo{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(160deg,#12304E,#0B4C7A 55%,#0E6FA8);
  color:rgba(255,255,255,.72); font-size:11px; line-height:1.7; padding:var(--sp-4); border:0;
}
.ec-summary__thumb--todo b{display:block; color:#fff; font-size:var(--fs-md); margin-bottom:2px;}

/* サムネと直後の要素が詰まっていたので離す */
.ec-summary__thumb{margin-bottom:var(--sp-6);}
.ec-summary__thumb+p{margin-top:0;}
.ec-summary .ec-check{margin-top:var(--sp-6);}
.ec-rank__thumb{margin-bottom:var(--sp-5);}
.ec-rank__thumb--todo{margin-bottom:var(--sp-5);}
/* 総合評価の3項目も、上の要素から離す */
.ec-score{margin-top:var(--sp-5);}

/* 冒頭のタイトル群を消したので、FVと悩みリストが接していた */
.ec-lead-block{padding-top:var(--sp-8);}
@media (min-width:600px){ .ec-lead-block{padding-top:var(--sp-10);} }

/* 比較表の対応エリア：県名は小さく添える（「6都県」だけでは伝わらない） */
.ec-area{display:block; margin-top:2px; font-size:9px; font-weight:400; color:var(--ec-ink-sub); line-height:1.35; letter-spacing:-.03em;}
.ec-fallback__t{color:#5A4400; font-size:var(--fs-lg);}
.ec-fallback>p{margin:var(--sp-3) 0 0 !important; font-size:11.5px; color:var(--ec-ink-mute);}

/* 結論CTAの直後は詰める（CTA下40 + セクション上40 で112px空いていた） */
.ec-ctalead{margin-bottom:var(--sp-4);}
.ec-lead-block{padding-bottom:var(--sp-4);}

/* 「こんな方に向いています」＝読者が自分で判定できる枠（競合LPが全社入れている） */
.ec-fit{
  margin:0 0 var(--sp-6); padding:12px 14px; background:#fff;
  border:1.5px dashed var(--ec-key); border-radius:var(--r-lg);
}
.ec-fit__t{
  display:inline-block; margin:0 0 var(--sp-2); padding:3px 12px; border-radius:12px;
  background:var(--ec-key); color:#fff; font-size:12px; font-weight:800;
}
.ec-rank--1 .ec-fit{border-color:#C79903;}
.ec-rank--1 .ec-fit__t{background:#C79903;}
.ec-fit ul{margin:0; padding:0; list-style:none;}
.ec-fit li{position:relative; padding:3px 0 3px 20px; font-size:13px; font-weight:700; line-height:1.6;}
.ec-fit li::before{content:"👤"; position:absolute; left:0; top:3px; font-size:12px;}

/* 注釈。carsatei の .section-notes の実値をそのまま移植（できるだけ目立たせない） */
.ec-secnotes{margin:8px 0 24px; padding:0;}
.ec-secnotes summary{
  font-size:11px; color:var(--ec-ink-mute); cursor:pointer; padding:8px 0 6px;
  list-style:none; border-top:0;
}
.ec-secnotes summary::-webkit-details-marker{display:none;}
.ec-secnotes summary::after{content:" ▼"; font-size:9px; margin-left:4px;}
.ec-secnotes[open] summary::after{content:" ▲";}
.ec-secnotes ol{padding-left:20px; margin:4px 0 8px; list-style:none;}
.ec-secnotes li{
  font-size:10px; line-height:1.6; color:var(--ec-ink-mute);
  margin-bottom:4px; text-indent:-1.5em; padding-left:1.5em;
}

/* キャンペーン。競合はリボン＋番号つきの縦並びなので、こちらは
   ラベルを角に寄せた横並びのカードにして形を変える */
.ec-camp{
  position:relative; margin:var(--sp-5) 0 var(--sp-2); padding:26px 12px 12px;
  border-radius:10px; background:#FFF8EF; border:2px solid var(--ec-accent);
}
.ec-camp__badge{
  position:absolute; top:-1px; left:-1px;
  background:var(--ec-accent); color:#fff;
  font-size:12px; font-weight:900; letter-spacing:.04em;
  padding:5px 16px 5px 12px; border-radius:9px 0 12px 0; white-space:nowrap;
}
.ec-camp__list{
  list-style:none; counter-reset:camp; margin:0; padding:0; display:grid; gap:6px;
}
.ec-camp__list li{
  counter-increment:camp; display:flex; align-items:center; gap:8px;
  background:#fff; border-radius:8px; padding:11px 12px;
  font-size:15px; font-weight:800; line-height:1.5;
}
.ec-camp__list li::before{
  content:counter(camp); flex:0 0 auto;
  width:21px; height:21px; border-radius:50%;
  background:var(--ec-accent); color:#fff;
  font-size:12px; font-weight:900; line-height:21px; text-align:center;
}
.ec-camp__list li b{color:var(--ec-accent); font-size:17px;}
.ec-camp__i{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
  background:#fff; border:1px solid #F3D9C2; border-radius:8px; padding:9px 12px;
}
.ec-camp__k{font-size:12px; font-weight:800; color:var(--ec-ink-sub); line-height:1.4;}
.ec-camp__cond{grid-column:1/-1; font-size:10px; color:var(--ec-ink-mute); line-height:1.5; margin-top:-2px;}
.ec-camp__v{
  font-size:23px; font-weight:900; color:var(--ec-accent);
  line-height:1.1; letter-spacing:-.02em; white-space:nowrap;
}
.ec-camp__u{font-size:13px; font-weight:900; margin-left:1px;}
.ec-camp__n{margin:9px 0 0; font-size:9.5px; color:var(--ec-ink-mute); line-height:1.5;}

/* 他社へ飛ぶボタン（比べ直したい人の逃げ道。CTAの下に置く） */
.ec-jump{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:var(--sp-4) 0 0;}
.ec-jump a{
  display:flex; align-items:center; justify-content:center; gap:4px;
  background:#F1F4F6; border:1px solid var(--ec-line-dark); border-radius:8px;
  padding:11px 6px; font-size:12px; font-weight:700; color:var(--ec-ink-sub); text-decoration:none;
}
.ec-jump a span{color:var(--ec-ink-mute); font-weight:900;}
.ec-jump a:hover{background:#E8EDF1;}
.ec-camp{margin-top:var(--sp-4);}

/* 期限のある注記。ラベルを乗せて他の注記と区別する */
.ec-note--warn{
  position:relative; background:#FFF6F5; border-left-color:var(--ec-great);
  padding-top:20px; margin-top:var(--sp-8); border-radius:0 var(--r) var(--r) 0;
}
.ec-note__label{
  position:absolute; top:-11px; left:10px;
  background:var(--ec-great); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.06em; padding:3px 12px; border-radius:11px; white-space:nowrap;
}
.ec-note__label::before{content:"⚠ ";}
.ec-note--warn p{margin:0;}
.ec-note--warn b{color:var(--ec-great);}

/* 冒頭の締切。注記ボックス（.ec-note）と同じ形にそろえる */
.ec-tag{
  display:block; margin:var(--sp-3) 0 0;
  background:var(--ec-bg-band); border-left:3px solid var(--ec-good);
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm); font-weight:700; color:var(--ec-ink-sub); line-height:1.75;
}

/* 補助金の締切。べた塗りだと見出しに見えるので、うっすら赤い「注意書きのラベル」にする
   （短い版＝.ec-tag ／ 長い版＝.ec-alert） */
.ec-tag{
  display:block; margin:var(--sp-3) 0 0; padding:8px 12px 8px 10px;
  background:rgba(179,56,43,.06);
  border:1px solid rgba(179,56,43,.26);
  border-left:3px solid var(--ec-great);
  border-radius:5px;
  color:#9E3025; font-size:12.5px; font-weight:700; line-height:1.6;
}
.ec-tag::before{content:"⚠"; margin-right:5px; opacity:.85;}
.ec-tag b{color:var(--ec-great); font-weight:800;}
.ec-alert{
  margin:var(--sp-5) 0 var(--sp-2); padding:11px 13px 12px; border-radius:6px;
  background:rgba(179,56,43,.06);
  border:1px solid rgba(179,56,43,.26);
  border-left:3px solid var(--ec-great);
  color:#9E3025; box-shadow:none;
}
.ec-alert__t{
  margin:0 0 5px; font-size:14px; font-weight:800; line-height:1.4;
  border-bottom:1px solid rgba(179,56,43,.2); padding-bottom:5px;
}
.ec-alert__t::before{content:"⚠"; margin-right:5px; opacity:.85;}
.ec-alert__b{margin:0; font-size:12.5px; font-weight:700; line-height:1.7;}
.ec-alert__b b{color:var(--ec-great); font-weight:800;}
.ec-alert__b .ec-rb{color:var(--ec-great);}

/* 鉄則どうしの間を空ける（詰まって見えていた） */
#education .ec-h3{margin-top:var(--sp-12);}
#education .ec-h3:first-of-type{margin-top:var(--sp-6);}

/* FVバナーの器（PRバッジの基準になる） */
.ec-fvbanner{position:relative; line-height:0;}
.ec-fvbanner img{width:100%; height:auto; display:block; aspect-ratio:auto;}

/* キャンペーンの画像。比率はそのまま、枠の中に収める */
.ec-camp__img{
  width:100%; height:auto; display:block;
  margin:8px 0 0; border-radius:8px; background:#fff;
}

/* 2位3位は社名が長いと2行になって王冠が離れて見えるので、少しだけ小さく */
.ec-rank:not(.ec-rank--1) .ec-rank__name{font-size:21px;}

/* 冒頭の商品画像。元が470x350なので拡大せず、比率のまま枠線をつける */
.ec-figure img{
  aspect-ratio:auto; object-fit:contain; max-height:none;
  background:#fff; border:1px solid var(--ec-line-dark); border-radius:8px;
}

/* ── 比較表：3社の列幅を必ず同じにする ──
   PCで table-layout が auto に戻り、中身の長さで Cools だけ広くなっていた */
.ec-compare{table-layout:fixed; width:100%; min-width:390px;}
.ec-compare thead th:first-child,
.ec-compare tbody th{width:72px;}
.ec-compare thead th:not(:first-child){width:calc((100% - 72px) / 3);}

/* 冒頭のエコキュート画像を7割の大きさに */
.ec-figure img{max-width:70%; margin-left:auto; margin-right:auto;}

/* ── 本文の文字サイズは 15.3px の1つだけ（カセットの中は触らない）──
   冒頭・比較表・補助金・鉄則で 17 / 14 / 12.6px とバラバラだったのを揃えた */
.ec-worry li,
.ec-lead-block>p,
#compare>p,
#subsidy p,
#education p,
#education .ec-subp,
.ec-summary>p,
.ec-summary .ec-check li    {font-size:15.3px;}
#subsidy .ec-alert__b       {font-size:12.2px;}   /* 赤ラベルは本文でないので別 */

/* 画像から公式サイトへ飛ばす */
.ec-imglink{display:block; text-decoration:none;}
.ec-imglink:hover{opacity:.88;}

/* 比較表のセルは幅が狭いので、文節単位(auto-phrase)でなく普通に折り返す */
.ec-compare td,.ec-compare td *,
.ec-compare tbody th{word-break:normal; overflow-wrap:anywhere;}
/* 比較表の中の小さい注記は折り返す（nowrap だとセルからはみ出す） */
.ec-compare .ec-note2{white-space:normal;}

/* 黄色の注意ラベル（赤の .ec-tag と同じ形・色だけ黄色） */
.ec-tagy{
  display:block; margin:var(--sp-3) 0 0; padding:8px 12px 8px 10px;
  background:#FFF8DA;
  border:1px solid #E9D18A;
  border-left:3px solid #EAAE00;
  border-radius:5px;
  color:#5A4708; font-size:12.5px; font-weight:700; line-height:1.65;
}
.ec-tagy b{color:#8A5A00; font-weight:800; font-size:14px;}

/* ── 冒頭CTAまわりの詰め ── */
/* CTA下のマイクロコピー：もっと薄く、CTAとの間も詰める */
.ec-ctalead__n{margin-top:0; font-size:10.5px; line-height:1.4; color:#9AA5AE;}
/* CTAの器と、その下の注釈との間 */
.ec-lead-block p.ec-ctalead{margin-bottom:2px;}
/* 「注釈を表示」：小さく、上の余白も詰める */
.ec-secnotes{margin:0 0 10px;}
/* 本文（きゅっとです。）→ 注釈 の間 */
.ec-lead-block .ec-figure + p{margin-bottom:12px;}
.ec-secnotes summary{font-size:9.5px; padding:5px 0 4px;}
.ec-secnotes summary::after{font-size:8px;}
.ec-secnotes li{font-size:9px; margin-bottom:3px;}
.ec-secnotes ol{margin:3px 0 6px;}
/* 注釈と次のセクション見出しの距離 */
.ec-lead-block{padding-bottom:0;}
.ec-lead-block>.ec-secnotes:last-child{margin-bottom:2px;}
#compare{padding-top:26px;}

/* ランキングの見出し上の横線を消す・見出し上の余白を少し詰める */
#ranking{border-top:0;}
#ranking, #education{padding-top:26px;}

/* ── サムネの画質 ──
   きゅっとの元画像が430pxしかなく、291px表示だと2倍画面で密度が足りない。
   枠を低くして全社が「元の半分以下の表示幅」に収まるようにする（左右に余白が出る） */
.ec-rank__thumb,.ec-summary__thumb{aspect-ratio:16/9;}

/* ── 小さいCTA（きゅっとを見る）：少し大きく＋キラーン ── */
.ec-cta--sm{
  font-size:15px; padding:14px 40px 14px 26px; border-radius:9px;
  box-shadow:0 3px 0 var(--ec-accent-dark);
}
.ec-cta--sm::before{right:1em; width:.38em; height:.74em;}
.ec-cta--sm::after{
  display:block; content:''; position:absolute; top:-200%; left:-150%;
  width:100%; height:500%;
  background-image:linear-gradient(to right,#ffffff00,#ffffffdd 100%);
  animation:ec-cta-shiny 4s infinite; pointer-events:none; transform:rotate(20deg);
}
@media (prefers-reduced-motion:reduce){ .ec-cta--sm::after{animation:none; display:none;} }

/* CTAの上の一言。左右に \ / の線を立てる（日本語LPの定番の形） */
.ec-ctalead__t2{
  display:table; margin:0 auto 7px; position:relative; padding:0 20px;
  font-size:12.5px; font-weight:800; color:#4A5763; line-height:1.4;
}
.ec-ctalead__t2::before,.ec-ctalead__t2::after{
  content:''; position:absolute; top:50%; width:2px; height:1.25em;
  background:#9AA5AE; border-radius:1px;
}
.ec-ctalead__t2::before{left:4px;  transform:translateY(-50%) rotate(-20deg);}
.ec-ctalead__t2::after {right:4px; transform:translateY(-50%) rotate(20deg);}
/* まとめのCTAだけ margin-top:40px で、上のラベルと離れていた。
   ラベルの直後に来る時はその余白をラベル側に移す */
.ec-ctalead__t2{margin-top:40px;}
.ec-ctalead__t2 + .ec-cta{margin-top:0;}
.ec-ctalead .ec-ctalead__t2, .ec-rank .ec-ctalead__t2{margin-top:0;}

/* 2位3位のサムネは小さく。競合バナーに写り込んだ他社の実績・★が読めてしまい、
   こちらが付けた点数より強く見えていた */
.ec-rank:not(.ec-rank--1) .ec-rank__thumb{max-width:62%; margin-left:auto; margin-right:auto;}

/* 比較表のサムネ：比率がバラバラだと同じ枠でも絵の大きさが揃わない
   （Coolsが横長1.92で枠いっぱいに広がり、2位だけ大きく見えていた）。
   小さいので切り取って3枚を完全に同寸にする */
.ec-colthumb{object-fit:cover;}
/* 比較表の小さい注記は行を分ける（本文と地続きだと読めない） */
.ec-compare .ec-note2{display:block; margin-top:2px; line-height:1.45;}
/* スマホだけ改行する */
.br-sp{display:inline;}
@media (min-width:600px){ .br-sp{display:none;} }
/* 冒頭の商品画像を横いっぱいに */
.ec-figure img{max-width:100%;}

/* 鉄則3つの締め。ここで「3つとも満たすのはきゅっとだけ」に着地させる */
.ec-eduend{
  margin:var(--sp-8) 0 var(--sp-4); padding:14px 14px 12px;
  background:var(--ec-key-soft); border:1px solid #9ED9F7; border-radius:8px;
}
.ec-eduend__t{margin:0 0 6px; font-size:16px; font-weight:800; line-height:1.5; color:var(--ec-ink);}
.ec-eduend__t b{color:var(--ec-key-deep);}
.ec-eduend__b{margin:0; font-size:13px; line-height:1.75; color:var(--ec-ink-sub);}
/* 三点リーダは字の真ん中に出るので、下辺に置きたい所はピリオド3つ＋字間で作る */
.ec-dots{letter-spacing:.18em; margin-left:.05em;}
/* 注釈マークだけが次の行に落ちないように、直前の語とくっつける */
.ec-alert__b .ec-fn{margin-left:-.08em; white-space:nowrap;}
.ec-eduend__l{list-style:none; margin:0; padding:0; display:grid; gap:7px;}
.ec-eduend__l li{
  position:relative; padding-left:22px;
  font-size:13.5px; font-weight:700; line-height:1.6; color:var(--ec-ink);
}
.ec-eduend__l li::before{
  content:''; position:absolute; left:2px; top:.42em;
  width:11px; height:6px; border-left:2.5px solid var(--ec-key-deep);
  border-bottom:2.5px solid var(--ec-key-deep); transform:rotate(-45deg);
}
.ec-eduend__l li b{color:var(--ec-key-deep);}

/* ── ロゴ帯。参考にした車査定LPのCSSと同じ値
   （.logos ul li img{height:35px;width:auto} / li{margin-right:20px} / 50s）──
   ulに同じ並びを2組入れ、1組ぶんの幅(--move-width)だけ動かして継ぎ目なくループする。
   画像は make_logos.py で全部300x122に揃えてあるので、高さを決めれば幅も自動でそろう */
.logos{margin:11px 0 10px; overflow:hidden; width:100%;}
.logos ul{display:flex; width:max-content; margin:0; padding:0; list-style:none;
  animation:logos-move 20s linear infinite;}
.logos ul li{flex:0 0 auto; margin-right:10px;}
.logos ul li img{height:34px; width:auto; display:block;}
@keyframes logos-move{from{transform:translateX(0)} to{transform:translateX(var(--move-width))}}
@media (prefers-reduced-motion:reduce){ .logos ul{animation:none;} }