/* ================================================================
   くらべの栞 デザインシステム
   TOPページを基準に、全ページで同じトークンを使います。
   色・余白・角丸・影を変えたいときは :root だけ触ってください。
   ================================================================ */
:root{
  /* --- 色 --- */
  --color-bg:#FFFFFF;
  --color-bg-subtle:#FBF7F3;    /* 温かいオフホワイト（旧#F7F8FA） */
  --color-bg-cool:#F6F8FA;      /* 表ヘッダなど中立が要る場所 */
  --color-text:#23303D;
  --color-text-secondary:#6A727C;
  --color-text-muted:#8D9199;
  --color-border:#EAE4DE;       /* 温かいライン */
  --color-border-soft:#F3EEE9;
  --color-primary:#FF7A45;
  --color-primary-hover:#EE6430;
  --color-primary-light:#FFF3ED;
  --color-primary-line:#F7DECE;
  --color-ai:#3E8FD0;
  --color-ai-light:#EEF6FC;
  --color-ai-line:#D8E7F3;
  --color-success:#2FA37C;
  --color-success-light:#EDF8F3;
  --color-warn:#C86A4F;
  --color-accent:#FFC23F;
  --color-accent-light:#FFF8E5;

  /* --- 角丸 --- */
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:20px;
  --radius-pill:999px;

  /* --- 影 --- */
  --shadow-sm:0 4px 16px rgba(20,30,40,.05);
  --shadow-md:0 8px 24px rgba(20,30,40,.08);

  /* --- 余白 --- */
  --space-1:8px;  --space-2:12px; --space-3:16px; --space-4:24px;
  --space-5:32px; --space-6:48px; --space-7:64px; --space-8:80px;
  --space-9:96px; --space-10:120px;

  /* --- レイアウト --- */
  --container:1180px;
  --measure:760px;
  --pad:24px;

  /* --- 旧クラス互換（記事ページ用） --- */
  --bg:var(--color-bg-subtle);
  --paper:var(--color-bg);
  --ink:var(--color-text);
  --soft:var(--color-text-secondary);
  --line:var(--color-border);
  --line-s:var(--color-border-soft);
  --coral:var(--color-primary);
  --coral-d:var(--color-primary-hover);
  --sky:var(--color-ai);
  --mint:var(--color-success);
  --good:var(--color-success);
  --bad:var(--color-warn);
  --yellow:var(--color-accent);
  --pop:#1B2733;
  --sh:var(--shadow-sm);
  --sh-h:var(--shadow-md);
  --wrap:var(--container);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic Medium",system-ui,sans-serif;
  font-size:16px;line-height:1.8;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.logo,.btn,.cta,.pill{
  font-family:"Hiragino Maru Gothic ProN","Zen Maru Gothic","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  text-wrap:balance;
}
img,svg{max-width:100%;display:block}
a{color:var(--color-primary-hover)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}

/* アクセシビリティ */
.skip{position:absolute;left:-9999px;top:0;background:var(--color-text);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-ai);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ================= PR表記 ================= */
.pr-bar{background:var(--color-primary-light);color:var(--color-text-muted);font-size:12px;text-align:center;padding:5px 16px;margin:0;letter-spacing:.02em}

/* ================= ヘッダー ================= */
header.site{
  position:sticky;top:0;z-index:60;overflow:hidden;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--color-border);
}
.head-inner{display:flex;align-items:center;gap:var(--space-4);min-height:68px;flex-wrap:wrap;padding:10px 0}
.logo{font-weight:800;font-size:20px;text-decoration:none;color:var(--color-text);white-space:nowrap;letter-spacing:-.015em}
.logo b{color:var(--color-primary);font-weight:800}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap;order:2}
.head-inner .logo{order:1}
nav.main a{
  text-decoration:none;font-size:14.5px;font-weight:600;color:var(--color-text-secondary);
  padding:8px 14px;border-radius:var(--radius-sm);transition:color .15s,background .15s;
}
nav.main a:hover{color:var(--color-text);background:var(--color-bg-subtle)}
nav.main a[aria-current="page"]{color:var(--color-text);font-weight:700}
.head-inner .nav-cta{
  order:3;margin-left:var(--space-2);background:var(--color-primary);color:#fff;font-weight:700;
  font-size:14.5px;text-decoration:none;padding:10px 18px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  transition:background .15s;
}
.head-inner .nav-cta:hover{background:var(--color-primary-hover);color:#fff}

/* ================= パンくず ================= */
.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--color-text-muted);padding:20px 0 0;margin:0;font-weight:500}
.crumbs li+li::before{content:"›";margin-right:6px;color:#C9C1BA}
.crumbs a{color:var(--color-text-muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ================= 共通：見出し ================= */
.eyebrow{
  display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-primary);margin:0 0 var(--space-2);
}
.eyebrow.ai{color:var(--color-ai)}
.shead{max-width:var(--measure);margin:0 0 var(--space-5)}
.shead h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;line-height:1.35;letter-spacing:-.02em;margin:0}
.shead p{margin:var(--space-2) 0 0;color:var(--color-text-secondary);font-size:15px}
.shead-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5)}
.shead-row .shead{margin-bottom:0}
.more{font-size:14px;font-weight:700;text-decoration:none;color:var(--color-ai);white-space:nowrap}
.more:hover{text-decoration:underline}
.sec{padding:var(--space-9) 0 0}
.sec:last-of-type{padding-bottom:var(--space-9)}

/* ================= ボタン ================= */
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 24px;border-radius:var(--radius-sm);
  font-size:15.5px;font-weight:700;text-decoration:none;border:1px solid transparent;
  transition:background .15s,border-color .15s,transform .15s;cursor:pointer;
  font-family:inherit;
}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{background:var(--color-bg);color:var(--color-text);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-bg-subtle)}
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;text-decoration:none;color:var(--color-ai)}
.tlink:hover{text-decoration:underline}

/* ================= TOP：ヒーロー ================= */
.hero{position:relative;overflow:hidden;padding:var(--space-9) 0 var(--space-7);background:var(--color-bg)}
.hero::before{content:none}
body.home .hero::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,#FFD9B8 0%,rgba(255,217,184,0) 70%);opacity:.85;left:-120px;top:-170px;pointer-events:none;
}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-6);align-items:center}
.hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.2;font-weight:800;letter-spacing:-.03em;margin:0 0 var(--space-4)}
.hero .lead-copy{font-size:16.5px;color:var(--color-text-secondary);margin:0 0 var(--space-5);max-width:34em;line-height:1.85}
.hero-cta{display:flex;gap:var(--space-2);flex-wrap:wrap}
.hero-art{display:grid;place-items:center}
.hero-art svg{width:200px}

/* ================= TOP：カテゴリ ================= */
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-3)}
.catcard{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
  background:var(--color-bg);border:1px solid var(--color-border);border-top:4px solid var(--color-success);
  border-radius:var(--radius-md);padding:20px 20px 18px;
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
}
.catcard.ca-sky{border-top-color:var(--color-ai)}
.catcard.ca-coral{border-top-color:var(--color-primary)}
.catcard.ca-mint{border-top-color:var(--color-success)}
.catcard.ca-sky .ic{color:var(--color-ai)}
.catcard.ca-coral .ic{color:var(--color-primary)}
.catcard.ca-mint .ic{color:var(--color-success)}
.catcard:hover{border-color:#DCD3CA;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.catcard .ic{width:26px;height:26px;color:var(--color-primary);margin-bottom:var(--space-1)}

.catcard b{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.catcard span{font-size:13px;color:var(--color-text-secondary);line-height:1.7}
.catcard .go{margin-top:auto;padding-top:var(--space-3);font-size:13px;font-weight:700;color:var(--color-ai)}
.catcard.soon{opacity:.55;pointer-events:none;border-top-color:#D6CEC7}
.catcard.soon .go{color:var(--color-text-muted)}

/* ================= TOP：診断CTA ================= */
.quizrow{
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  background:var(--color-primary-light);border:1px solid var(--color-primary-line);border-radius:var(--radius-lg);padding:24px 30px;
}
.quizrow .qi{width:66px;flex:none}
.quizrow .qb{flex:1;min-width:220px}
.quizrow .qb .k{margin:0;font-size:12.5px;font-weight:700;color:var(--color-primary-hover);letter-spacing:.02em}
.quizrow .qb h3{margin:2px 0 4px;font-size:clamp(20px,2.4vw,24px);font-weight:700;letter-spacing:-.02em}
.quizrow .qb p{margin:0;font-size:13.5px;color:var(--color-text-secondary)}

/* ================= TOP：Featured ================= */
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.fcard{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--color-bg);
  border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.fcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#DCD3CA}
.fcard .strip{height:104px;display:grid;place-items:center;background:var(--color-bg-subtle)}
.fcard .strip svg{width:78px}
.fcard.f-money .strip{background:var(--color-primary-light)}
.fcard.f-ai .strip{background:var(--color-ai-light)}
.fcard.f-mobile .strip{background:var(--color-success-light)}
.fcard .fb{padding:18px 20px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.fcard .tag{align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--color-text-secondary);letter-spacing:.04em}
.fcard h3{margin:0;font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.fcard p{margin:0;font-size:13.5px;color:var(--color-text-secondary);line-height:1.7}
.fcard .fm{
  margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--color-border-soft);
  display:flex;gap:var(--space-2);align-items:center;font-size:12px;color:var(--color-text-muted);
}
.fcard .fm em{font-style:normal;margin-left:auto;color:var(--color-ai);font-weight:700}

/* ================= TOP：Latest（リスト） ================= */
.latest{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-6);border-top:1px solid var(--color-border)}
.lrow{
  display:flex;align-items:baseline;gap:var(--space-3);padding:18px 4px;
  border-bottom:1px solid var(--color-border);text-decoration:none;color:inherit;transition:background .15s;
}
.lrow:hover{background:var(--color-bg-subtle)}
.lrow .lt{flex:none;width:92px;font-size:11.5px;font-weight:700;color:var(--color-text-muted);letter-spacing:.02em;white-space:nowrap}
.lrow .lb{flex:1;min-width:0}
.lrow h3{margin:0;font-size:15.5px;font-weight:700;line-height:1.6}
.lrow p{margin:3px 0 0;font-size:12.5px;color:var(--color-text-secondary)}
.lrow .ar{flex:none;color:var(--color-text-muted);font-size:14px}

/* ================= TOP：独自検証 ================= */
.otest{background:var(--color-accent-light);border-radius:var(--radius-lg);padding:40px 44px}
.otest .badge-soon{
  display:inline-block;font-size:11.5px;font-weight:700;color:var(--color-text-secondary);
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-pill);
  padding:3px 12px;margin-left:var(--space-2);vertical-align:middle;
}
.otest h2{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.02em;margin:0 0 var(--space-3);line-height:1.35}
.otest p{margin:0 0 var(--space-4);max-width:var(--measure);color:var(--color-text-secondary);font-size:15px}
.otest p b{color:var(--color-text)}
.taglist{display:flex;flex-wrap:wrap;gap:8px}
.taglist span{
  font-size:13px;font-weight:600;background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-pill);padding:5px 14px;color:var(--color-text-secondary);
}
.otest .fine{margin:var(--space-4) 0 0;font-size:12.5px;color:var(--color-text-muted)}

/* ================= TOP：3つの約束 ================= */
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.promise .num{
  display:block;font-size:44px;font-weight:800;line-height:1;letter-spacing:-.03em;
  color:#F2C7B2;margin-bottom:var(--space-3);font-family:"Hiragino Sans",system-ui,sans-serif;
}
.promise h3{margin:0 0 6px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.promise p{margin:0;font-size:14px;color:var(--color-text-secondary);line-height:1.8}
.policy-link{margin:var(--space-6) 0 0}

/* ================= 記事ページ ================= */
article{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:40px 44px 48px;margin:var(--space-4) 0 0}
article h1{font-size:clamp(26px,3.4vw,36px);line-height:1.35;margin:0 0 var(--space-2);font-weight:800;letter-spacing:-.025em}
.meta{font-size:12px;color:var(--color-text-muted);margin:0 0 var(--space-4);font-weight:600}
.lead{font-size:16.5px;color:var(--color-text-secondary);margin:0 0 var(--space-2);line-height:1.9}
article h2{font-size:clamp(21px,2.6vw,26px);font-weight:700;margin:var(--space-8) 0 var(--space-3);line-height:1.45;letter-spacing:-.02em}
article h3{font-size:18px;font-weight:700;margin:var(--space-5) 0 var(--space-2)}
article p{font-size:15.5px;max-width:var(--measure)}
article ul,article ol{font-size:15px;max-width:var(--measure)}

/* 記事メタ */
.artmeta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 10px;padding:12px 16px;background:var(--color-bg-subtle);border-radius:var(--radius-sm);font-size:12px}
.artmeta>div{display:flex;gap:6px}
.artmeta dt{color:var(--color-text-muted);font-weight:600;margin:0}
.artmeta dd{margin:0;font-weight:700}
.criteria{margin:0 0 var(--space-4);font-size:12.5px;font-weight:700}
.criteria a{color:var(--color-ai);text-decoration:none;border-bottom:1px solid #CFE0EF}

/* 結論ボックス */
.verdict{background:var(--color-primary-light);border:1px solid var(--color-primary-line);border-radius:var(--radius-md);padding:24px 26px;margin:var(--space-4) 0}
.verdict h2{margin:0 0 var(--space-3);font-size:17px;font-weight:700}
.verdict ol{margin:0;padding:0;list-style:none;counter-reset:v;max-width:none}
.verdict li{counter-increment:v;display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--color-primary-line)}
.verdict li:first-child{border-top:0}
.verdict li::before{content:counter(v);flex:none;width:24px;height:24px;border-radius:7px;background:var(--color-primary);color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center;margin-top:4px}
.verdict li b{display:block;font-size:15.5px}
.verdict li span{font-size:13.5px;color:var(--color-text-secondary)}

/* 比較表 */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);margin:var(--space-4) 0 8px}
table.cmp{border-collapse:collapse;width:100%;min-width:780px;font-size:13.5px}
table.cmp th,table.cmp td{padding:13px 14px;border-bottom:1px solid var(--color-border-soft);text-align:left;vertical-align:middle}
table.cmp thead th{background:var(--color-bg-cool);font-size:12px;white-space:nowrap;font-weight:700;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}
table.cmp tbody tr:hover{background:var(--color-bg-subtle)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody th{font-weight:700;min-width:238px}
.nm{display:flex;align-items:center;gap:9px}
.rank{flex:none;width:22px;height:22px;border-radius:6px;background:var(--color-accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.rank.n2{background:#B9C1C9}.rank.n3{background:#C9A177}
.chip{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg-subtle);display:grid;place-items:center;font-size:10px;font-weight:700;line-height:1;text-align:center;color:var(--color-text-secondary)}
.ok{color:var(--color-success);font-weight:700}
.ng{color:var(--color-warn);font-weight:700}
.tbtn{display:inline-block;background:var(--color-primary);color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:var(--radius-pill);text-decoration:none;white-space:nowrap}
.tbtn:hover{background:var(--color-primary-hover)}
.tnote{font-size:12px;color:var(--color-text-muted);margin:0 0 4px;max-width:var(--measure)}

/* 商品カード */
.item{background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:24px 26px;margin:var(--space-4) 0}
.item-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.item-head .chip{width:40px;height:40px;font-size:11px;background:var(--color-bg)}
.item-head h3{margin:0;font-size:19px;font-weight:700}
.score{margin:0 0 0 auto;font-size:12px;color:var(--color-text-muted);font-weight:600;white-space:nowrap}
.score b{font-size:22px;color:var(--color-primary);font-weight:800}
.pros-cons{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-2);margin:var(--space-3) 0}
.pros-cons>div{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:14px 18px}
.pros-cons h4{margin:0 0 6px;font-size:13px;font-weight:700}
.pros-cons .good h4{color:var(--color-success)}
.pros-cons .bad h4{color:var(--color-warn)}
.pros-cons ul{margin:0;padding-left:1.15em;font-size:13.5px}
.pros-cons li{margin:3px 0}

/* CTA */
.cta-wrap{text-align:center;margin:var(--space-4) 0 4px}
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--color-primary);color:#fff;
  text-decoration:none;font-weight:700;padding:15px 32px;border-radius:var(--radius-sm);font-size:15.5px;
  transition:background .15s;box-shadow:var(--shadow-sm);
}
.cta:hover{background:var(--color-primary-hover)}
.cta-note{font-size:12px;color:var(--color-text-muted);text-align:center;margin:10px 0 0}
.pill{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:var(--radius-sm);color:#fff;background:var(--color-primary);transition:background .15s;
}
.pill:hover{background:var(--color-primary-hover)}

/* 補助ブロック */
.note{background:var(--color-bg-subtle);border-left:3px solid var(--color-accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 18px;font-size:14px;margin:var(--space-4) 0;max-width:var(--measure)}
.callout{display:flex;gap:18px;align-items:center;background:var(--color-ai-light);border:1px solid var(--color-ai-line);border-radius:var(--radius-md);padding:18px 22px;margin:var(--space-4) 0;max-width:var(--measure)}
.callout svg{width:60px;flex:none}
.callout p{margin:0;font-size:14px}
.faq{max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--color-border);padding:14px 2px}
.faq summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";color:var(--color-primary);font-weight:700;margin-right:7px}
.faq p{margin:10px 0 0;font-size:14.5px;color:var(--color-text-secondary)}
.verify{background:var(--color-bg-subtle);border-radius:var(--radius-md);padding:18px 22px;margin:var(--space-4) 0;max-width:var(--measure)}
.verify h3{margin:0 0 8px;font-size:14.5px;font-weight:700}
.verify dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 20px}
.verify dl>div{display:flex;gap:8px;font-size:13.5px}
.verify dt{color:var(--color-text-muted);font-weight:600;margin:0;white-space:nowrap}
.verify dd{margin:0;font-weight:600}
.res-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-3)}
.res-links a{text-decoration:none;font-weight:600;font-size:14px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:9px 18px;color:var(--color-text)}
.res-links a:hover{border-color:var(--color-primary);color:var(--color-primary-hover)}

/* 記事アイキャッチ */
.eyecatch{position:relative;height:210px;border-radius:var(--radius-md);overflow:hidden;margin:0 0 var(--space-4)}
.eyecatch .bg{position:absolute;inset:0}
.eyecatch .cir{position:absolute;border-radius:50%;opacity:.5}
.eyecatch .ic{position:absolute}
.eyecatch .cap{position:absolute;right:22px;bottom:18px;background:rgba(255,255,255,.94);border-radius:var(--radius-pill);padding:6px 16px;font-size:12.5px;font-weight:700;color:var(--color-text)}
.ec-money .bg{background:linear-gradient(120deg,#FFF6EF,#FFEADC)}
.ec-sim   .bg{background:linear-gradient(120deg,#F0F8F4,#DFF0E7)}
.ec-nisa  .bg{background:linear-gradient(120deg,#F1F6FB,#E2EDF7)}
.ec-ai    .bg{background:linear-gradient(120deg,#F2F6FC,#E4EDF9)}
.ec-study .bg{background:linear-gradient(120deg,#FCF2F2,#F7E4E4)}
.ec-tool  .bg{background:linear-gradient(120deg,#F4F7FA,#E7EDF3)}
.ec-career .bg{background:linear-gradient(120deg,#F6F3FC,#EAE3F7)}
.ec-server .bg{background:linear-gradient(120deg,#F0F7F7,#DFEEEE)}

/* ================= 診断ツール ================= */
.quiz{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:28px 30px 32px;margin:var(--space-4) 0}
.quiz .bar{height:5px;background:var(--color-border-soft);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:6px}
.quiz .bar i{display:block;height:100%;min-width:8px;background:var(--color-primary);border-radius:var(--radius-pill);transition:width .25s}
.quiz .barlab{font-size:12px;color:var(--color-text-muted);font-weight:700;margin:0 0 var(--space-3)}
.qstep{border:0;padding:0;margin:0}
.qstep legend{font-size:20px;font-weight:700;padding:0;margin:0 0 var(--space-3);line-height:1.5}
.qopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.qopt{position:relative}
.qopt input{position:absolute;opacity:0;width:1px;height:1px}
.qopt label{display:block;cursor:pointer;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:14px 16px;font-weight:600;font-size:15px;transition:.14s}
.qopt label:hover{border-color:var(--color-primary);background:var(--color-primary-light)}
.qopt input:checked+label{border-color:var(--color-primary);background:var(--color-primary-light);font-weight:700}
.qopt input:focus-visible+label{outline:2px solid var(--color-ai);outline-offset:3px}
.qnav{display:flex;gap:10px;margin-top:var(--space-4);flex-wrap:wrap}
.btn{font:inherit;cursor:pointer;font-weight:700;font-size:15px;padding:12px 24px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text)}
.btn.primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn.primary:hover{background:var(--color-primary-hover)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.qresult{display:none}
.qresult.on{display:block}
.res-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--color-primary-light);border-radius:var(--radius-md);padding:20px 22px}
.res-top .chip{width:48px;height:48px;font-size:12px;background:var(--color-bg)}
.res-top .rl{font-size:12px;font-weight:700;color:var(--color-primary);margin:0}
.res-top h3{margin:0;font-size:24px;font-weight:700}
.res-top .tg{margin:0;font-size:13.5px;color:var(--color-text-secondary);width:100%}
.res-why{margin:var(--space-4) 0 0}
.res-second{background:var(--color-bg-subtle);border-radius:var(--radius-sm);padding:14px 18px;margin:var(--space-3) 0}
.res-second p{margin:0;font-size:14px}

/* ================= フッター ================= */
footer.site{background:var(--color-bg-subtle);border-top:1px solid var(--color-border);margin-top:var(--space-9);padding:var(--space-7) 0 var(--space-5);font-size:13.5px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-5)}
.foot-grid h2{font-size:12px;margin:0 0 var(--space-2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:7px 0}
.foot-grid a{color:var(--color-text-secondary);text-decoration:none}
.foot-grid a:hover{color:var(--color-text);text-decoration:underline}
.disclaimer{font-size:12px;color:var(--color-text-muted);line-height:1.85;margin-top:var(--space-5);max-width:900px}
.copy{color:var(--color-text-muted);font-size:12px;margin-top:var(--space-4);border-top:1px solid var(--color-border);padding-top:var(--space-3)}

/* ================= レスポンシブ ================= */
@media(max-width:1024px){
  .fcards{grid-template-columns:repeat(2,1fr)}
  .promises{grid-template-columns:1fr;gap:var(--space-4)}
  .otest{padding:32px 28px}
}
@media(max-width:860px){
  :root{--pad:20px}

  /* ---- スマホ ヘッダー：1段目=ロゴ＋診断する / 2段目=カテゴリのみ ---- */
  .pr-bar{padding:4px 16px;font-size:11px;line-height:1.5}
  .head-inner{
    display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"logo cta" "nav nav";
    align-items:center;gap:0 12px;padding:0 var(--pad);min-height:0;
  }
  .head-inner .logo{grid-area:logo;min-height:58px;display:flex;align-items:center;font-size:19px}
  .head-inner .nav-cta{
    grid-area:cta;order:0;margin-left:0;align-self:center;
    height:41px;padding:0 17px;font-size:14px;border-radius:10px;
  }
  .head-inner nav.main{
    grid-area:nav;order:0;margin-left:0;
    display:flex;align-items:center;gap:2px;height:46px;
    flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
    border-top:1px solid var(--color-border-soft);
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  }
  .head-inner nav.main::-webkit-scrollbar{display:none}
  .head-inner nav.main a{flex:0 0 auto}

  .sec{padding-top:var(--space-7)}
  .hero{padding:var(--space-6) 0 var(--space-6)}
  .hero-in{grid-template-columns:1fr;gap:var(--space-4)}
  .hero h1{font-size:clamp(30px,8vw,40px)}
  .hero-art{order:2;justify-items:start}
  .hero-art svg{width:130px}

  /* ---- スマホ ヒーロー：CTA縦積み ＋ キャラの重なり解消 ---- */
  body.home .hero::before{width:300px;height:300px;left:-110px;top:-130px;opacity:.8}
  body.home .hero::after{width:270px;height:270px;right:-100px;bottom:-150px;opacity:.7}
  .hero-cta{display:grid;grid-template-columns:1fr;gap:12px}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{width:100%;min-width:0;flex:none;padding:0 16px;font-size:15px;white-space:nowrap}

  .fcards{grid-template-columns:1fr}
  .latest{grid-template-columns:1fr;gap:0}
  .shead h2{font-size:clamp(24px,6vw,30px)}
  article{padding:26px 20px 34px;border-radius:var(--radius-md)}
  article h2{font-size:20px;margin-top:var(--space-6)}
  .item{padding:20px 18px}
  .score{margin-left:0;width:100%}
  .quiz{padding:22px 18px 26px}
  .qstep legend{font-size:17.5px}
  .quizrow{padding:22px 20px}
  .quizrow .qi{width:52px}
  .eyecatch{height:160px}
  .promise .num{font-size:36px}
}
@media(max-width:420px){
  .catgrid{grid-template-columns:1fr}
  .head-inner nav.main a{padding:7px 11px;font-size:14px}
}
@media(max-width:389px){
  :root{--pad:16px}
  .head-inner .logo{font-size:18px}
  .head-inner .nav-cta{height:40px;padding:0 15px;font-size:13.5px}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{font-size:14.5px;padding:0 14px}
  .hero-side .chara{width:96px}
}

/* カテゴリページ用 */
.soon-list{color:var(--color-text-secondary);font-size:15px;max-width:var(--measure)}
.sec-head{display:flex;align-items:center;gap:11px;margin-bottom:var(--space-4);flex-wrap:wrap}
.sec-head h2{margin:0;font-size:23px;font-weight:700;letter-spacing:-.015em}
.sec-head .more{margin-left:auto}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card .thumb{position:relative;height:120px;display:grid;place-items:center;background:var(--color-bg-subtle)}
.card .thumb svg{width:84px}
.th-orange{background:var(--color-primary-light)}.th-blue{background:var(--color-ai-light)}
.th-green{background:var(--color-success-light)}.th-pink{background:#FBF2F2}
.card .rk{position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:7px;background:var(--color-bg);color:var(--color-text-secondary);display:grid;place-items:center;font-weight:700;font-size:12px;border:1px solid var(--color-border)}
.card .cb{padding:16px 18px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .lab{align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--color-text-secondary);letter-spacing:.04em}
.card h3{margin:0;font-size:16.5px;font-weight:700;line-height:1.55}
.card p{margin:0;font-size:13px;color:var(--color-text-secondary)}
.brands{display:flex;gap:5px;margin-top:auto;padding-top:var(--space-2);align-items:center;border-top:1px solid var(--color-border-soft)}
.brands i{display:none}
.brands em{font-style:normal;font-size:12px;color:var(--color-text-muted);font-weight:600}

/* カテゴリページのヒーロー */
.hero-in .jump{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);max-width:560px}
.jb{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 16px;transition:.15s}
.jb:hover{border-color:#DCD3CA;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.jb svg{width:40px;flex:none}
.jb b{display:block;font-size:15.5px;font-weight:700}
.jb span{font-size:12.5px;color:var(--color-text-secondary)}
.hero-side{position:relative;z-index:0}
.hero-side .chara{position:absolute;right:10px;top:-104px;width:96px;z-index:-1}
.hero-side .chara>svg,.hero-side .chara>.kchara{width:100%;height:auto}
.rankbox{position:relative;z-index:1;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px 20px 14px}
.rankbox .chara{position:absolute;right:10px;top:-104px;width:96px;z-index:-1}
.rankbox .ttl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 var(--space-1)}
.mini{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--color-border-soft);margin:0}
.mini:first-of-type{border-top:0}
.badge-n{flex:none;width:20px;height:20px;border-radius:6px;background:var(--color-bg-subtle);color:var(--color-text-secondary);font-size:11.5px;font-weight:700;display:grid;place-items:center}
.mini b{font-size:13.5px;font-weight:600}
.mini b a{color:inherit;text-decoration:none}
.mini b a:hover{text-decoration:underline}
.mini em{font-style:normal;font-size:11.5px;color:var(--color-text-muted);margin-left:auto;white-space:nowrap}
.mark{background:linear-gradient(transparent 64%,#FFE3CE 64%);padding:0 3px}
.hero .sub{font-size:15.5px;color:var(--color-text-secondary);margin:0 0 var(--space-4)}
.hero-in > div > h1{margin-bottom:var(--space-3)}
.blob{display:none}
@media(max-width:860px){
  .cards{grid-template-columns:1fr}
  .hero-in .jump{grid-template-columns:1fr}
  .rankbox .chara{width:78px;top:-84px}
  /* TOPヒーロー：キャラを通常フローに戻し、CTAとの重なりをなくす */
  .hero-side{display:flex;flex-direction:column}
  .hero-side .chara{
    position:static;z-index:auto;width:108px;
    align-self:flex-end;margin:0 6px 26px 0;
  }
}
@media(max-width:389px){
  .hero-side .chara{width:96px;margin-bottom:24px}
}

/* ================= TOPページの背景（薄い色味） ================= */
body.home{background:var(--color-bg)}
body.home .hero{background:linear-gradient(180deg,#FFF6EF 0%,#FFFBF8 62%,var(--color-bg) 100%)}
body.home .hero::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,#D6E8F7 0%,rgba(214,232,247,0) 70%);opacity:.8;right:-110px;bottom:-210px;pointer-events:none}

body.home .catcard.ca-coral{background:var(--color-primary-light);border-color:var(--color-primary-line);border-top-color:var(--color-primary)}
body.home .catcard.ca-sky{background:var(--color-ai-light);border-color:var(--color-ai-line);border-top-color:var(--color-ai)}
body.home .catcard.ca-mint{background:var(--color-success-light);border-color:#D9EDE4;border-top-color:var(--color-success)}
body.home .fcard,
body.home .lrow{background:var(--color-bg)}
body.home .latest{background:var(--color-bg);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:0 var(--space-4)}
body.home .lrow:last-child,
body.home .lrow:nth-last-child(2):nth-child(odd){border-bottom:0}
body.home .lrow:hover{background:var(--color-bg-subtle)}
body.home .otest{background:var(--color-accent-light);border:0}
body.home footer.site{background:var(--color-bg-subtle)}

/* インラインSVGのサイズ暴走を防ぐ保険：親に幅、SVGは親いっぱい */
.quizrow .qi{width:64px;flex:none}
.quizrow .qi>svg,.quizrow .qi>.kchara{width:100%;height:auto}
.callout>svg{width:60px;flex:none}
.callout>.kchara{width:56px;flex:none}
.rankbox .chara>svg,.rankbox .chara>.kchara{width:100%;height:auto}
.jb>svg{width:40px;flex:none}
.hero-art>svg{width:200px}
.hero-art>.kchara{width:196px}
.eyecatch .ic>.kchara{width:100%}
.fcard .strip>svg{width:78px}
.card .thumb>svg{width:84px}
.eyecatch .ic>svg{width:100%;height:auto}
.catcard>svg.ic{width:26px;height:26px;flex:none}

/* ================= TOP：オレンジ帯ヒーロー ＋ ジャンルタイル ================= */
.hband{background:var(--color-primary);color:#fff;padding:22px 0 20px}
.hband .wrap{padding:0 var(--pad)}
.hpill{
  display:inline-block;margin:0 0 13px;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.45);color:#fff;font-size:12px;font-weight:800;
  letter-spacing:.04em;padding:7px 15px;border-radius:var(--radius-pill);line-height:1;
}
.hband h1{margin:0;font-size:clamp(30px,8.9vw,58px);line-height:1.3;font-weight:800;letter-spacing:-.042em;color:#fff}
.hband h1 .hl{color:#FFE9A8}
.hlead{margin:10px 0 0;font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.9)}
.hband .rankbox{display:none;color:var(--color-text)}

.tilesec{padding:14px 0 0}
.tilesec .eyebrow{margin:0}
.tilehead{margin:3px 0 0;font-size:clamp(21px,5.8vw,31px);font-weight:800;letter-spacing:-.035em;line-height:1.4}
.tilegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}
.tile{
  display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--color-text);
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:14px;
  padding:9px 13px;min-height:84px;transition:transform .15s,box-shadow .15s,border-color .15s;
}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.tile>svg.ic{width:22px;height:22px;flex:none;margin-bottom:6px}
.tile b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.tile span{font-size:11px;color:var(--color-text-secondary);line-height:1.6}
.tile.t-mint{background:var(--color-success-light);border-color:#D9EDE4}
.tile.t-mint>svg.ic{color:var(--color-success)}
.tile.t-sky{background:var(--color-ai-light);border-color:var(--color-ai-line)}
.tile.t-sky>svg.ic{color:var(--color-ai)}
.tile.t-coral{background:var(--color-primary-light);border-color:var(--color-primary-line)}
.tile.t-coral>svg.ic{color:var(--color-primary)}
.tile.t-quiz{background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 4px 16px rgba(255,122,69,.22)}
.tile.t-quiz>svg.ic,.tile.t-quiz b{color:#fff}
.tile.t-quiz span{color:#FFE4D6}
.tilechara{display:flex;justify-content:flex-end;margin-top:10px}
.tilechara .kchara{width:98px;margin-right:-2px}

@media(min-width:861px){
  .hband{padding:44px 0 48px}
  .hband-in{display:grid;grid-template-columns:minmax(0,1fr) 404px;gap:64px;align-items:center}
  .hband .rankbox{display:block;border-radius:var(--radius-lg);box-shadow:0 12px 32px rgba(122,40,10,.20);padding:18px 22px 8px}
  .hband h1{font-size:clamp(40px,4.2vw,54px);line-height:1.2}
  .hlead{margin-top:20px;font-size:16.5px;max-width:24em}
  .hpill{font-size:13px;padding:7px 16px;margin-bottom:20px}
  .brsp{display:none}
  .tilesec{padding:34px 0 0}
  .tilegrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:20px}
  .tile{padding:18px;min-height:132px;border-radius:16px}
  .tile>svg.ic{width:26px;height:26px;margin-bottom:8px}
  .tile b{font-size:16.5px}
  .tile span{font-size:12.5px}
  .tilechara{margin-top:20px}
  .tilechara .kchara{width:122px;margin-right:0}
}
@media(max-width:389px){ .tilechara .kchara{width:92px} }