:root{
  --page:#FFFFFF;
  --tint:#F0F8F7;
  --tint-deep:#E3F1EF;
  --surface:#FFFFFF;
  --ink:#243438;
  --ink-soft:#5C7075;
  --ink-faint:#8AA0A3;
  --line:#DFEBE9;
  --line-strong:#C6DCD8;
  --brand:#12A99C;
  --brand-deep:#0B8378;
  --brand-ink:#0B7A70;
  --brand-wash:#DFF3F0;
  --cta:#F0913C;
  --cta-deep:#DD7A22;
  --good:#12907F;
  --caution:#C1782A;
  --card-shadow:0 2px 14px rgba(18,90,84,.07);
  --card-shadow-hover:0 6px 22px rgba(18,90,84,.13);
  --font:"Zen Maru Gothic",'Hiragino Maru Gothic ProN','Yu Gothic',system-ui,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:100%;
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#101A1C;
    --tint:#152326;
    --tint-deep:#18292C;
    --surface:#182629;
    --ink:#E6F0EF;
    --ink-soft:#A6BBBA;
    --ink-faint:#7E9694;
    --line:#25383B;
    --line-strong:#33494D;
    --brand:#3FD0C0;
    --brand-deep:#2AB5A6;
    --brand-ink:#5DDCCC;
    --brand-wash:#17332F;
    --cta:#F0A15A;
    --cta-deep:#DD8B3E;
    --good:#4FCFB8;
    --caution:#E0AC6A;
    --card-shadow:0 2px 14px rgba(0,0,0,.35);
    --card-shadow-hover:0 6px 22px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --page:#101A1C;
  --tint:#152326;
  --tint-deep:#18292C;
  --surface:#182629;
  --ink:#E6F0EF;
  --ink-soft:#A6BBBA;
  --ink-faint:#7E9694;
  --line:#25383B;
  --line-strong:#33494D;
  --brand:#3FD0C0;
  --brand-deep:#2AB5A6;
  --brand-ink:#5DDCCC;
  --brand-wash:#17332F;
  --cta:#F0A15A;
  --cta-deep:#DD8B3E;
  --good:#4FCFB8;
  --caution:#E0AC6A;
  --card-shadow:0 2px 14px rgba(0,0,0,.35);
  --card-shadow-hover:0 6px 22px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{
  background:var(--page);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.95;
  -webkit-font-smoothing:antialiased;
}
img{display:block}
a{color:var(--brand-ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0;max-width:100%}

/* ---------- header ---------- */
.site-head{
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;
}
.head-inner{
  max-width:74rem;margin:0 auto;padding:.75rem 1.5rem;
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
}
.wordmark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.wordmark .tag{
  font-size:.56rem;line-height:1.35;color:var(--brand-ink);
  border-left:2px solid var(--brand);padding-left:.4rem;letter-spacing:.02em;
}
.wordmark .jp{font-size:1.3rem;font-weight:900;letter-spacing:.03em}
.site-nav{display:flex;gap:1.15rem;margin-left:.6rem;flex-wrap:wrap}
.site-nav a{font-size:.83rem;font-weight:500;color:var(--ink);text-decoration:none}
.site-nav a:hover{color:var(--brand-ink)}
.head-cta{display:flex;gap:.6rem;margin-left:auto}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  border-radius:999px;padding:.55rem 1.15rem;
  font-size:.82rem;font-weight:700;text-decoration:none;color:#fff;
  white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease;
}
.pill:hover{transform:translateY(-1px)}
.pill.brand{background:var(--brand);box-shadow:0 2px 8px rgba(18,169,156,.3)}
.pill.orange{background:var(--cta);box-shadow:0 2px 8px rgba(240,145,60,.32)}
.pill .arw{font-size:.9em}

/* ---------- hero band ---------- */
.hero-band{
  background:linear-gradient(118deg,var(--brand-deep) 0%,var(--brand) 62%,#3FC3B4 100%);
  color:#fff;text-align:center;padding:3.4rem 1.5rem 3.6rem;position:relative;overflow:hidden;
}
.hero-band::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 78% 18%,rgba(255,255,255,.16),transparent 55%);
}
.hero-band .cat-pill{
  position:relative;z-index:1;display:inline-block;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);
  border-radius:999px;padding:.2rem .95rem;font-size:.75rem;font-weight:700;margin-bottom:1rem;
}
.hero-band h1{
  position:relative;z-index:1;
  font-size:clamp(1.45rem,3.9vw,2.2rem);font-weight:900;line-height:1.6;
  max-width:26em;margin:0 auto;letter-spacing:.01em;
  text-shadow:0 1px 12px rgba(0,60,55,.22);
}
.hero-band .meta{
  position:relative;z-index:1;margin-top:1rem;
  font-family:var(--mono);font-size:.75rem;opacity:.92;
  display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;
}

/* ---------- breadcrumb ---------- */
.crumb{background:var(--tint);border-bottom:1px solid var(--line)}
.crumb ol{
  max-width:74rem;margin:0 auto;padding:.6rem 1.5rem;
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;
  font-size:.76rem;color:var(--ink-soft);
}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--brand-ink)}
.crumb li+li::before{content:"▸";margin-right:.5rem;color:var(--brand)}

/* ---------- PR notice ---------- */
.pr-note{
  max-width:min(48rem, calc(100% - 2.5rem));margin:1.6rem auto 0;padding:.7rem 1.1rem;
  background:var(--tint);border:1px solid var(--line);border-radius:10px;
  font-size:.74rem;color:var(--ink-soft);display:flex;gap:.7rem;align-items:flex-start;
}
.pr-note .tagpr{
  flex:none;background:var(--ink-faint);color:var(--page);
  border-radius:4px;padding:.05rem .4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
}

.sale-note{
  max-width:min(48rem, calc(100% - 2.5rem));margin:.7rem auto 0;padding:.75rem 1.1rem;
  background:color-mix(in srgb, var(--cta) 12%, transparent);
  border:1px solid var(--cta);border-radius:10px;
  font-size:.82rem;color:var(--ink);display:flex;gap:.7rem;align-items:flex-start;line-height:1.8;
}
.sale-tag{
  flex:none;background:var(--cta);color:#fff;border-radius:4px;padding:.08rem .5rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;font-weight:500;
}
.sale-note a{font-weight:700;white-space:nowrap}

/* ---------- layout ---------- */
.wrap{max-width:48rem;margin:0 auto;padding:0 1.5rem}
main{display:flex;flex-direction:column}
.lead-block{padding:1.8rem 0 .4rem;display:flex;flex-direction:column;gap:1.1rem}
.lead{font-size:1.03rem;color:var(--ink-soft);max-width:100%}

/* author */
.author{
  display:flex;gap:.9rem;align-items:center;
  background:var(--tint);border-radius:var(--r);padding:.9rem 1.1rem;
}
.avatar{
  width:56px;height:56px;flex:none;border-radius:50%;
  background:var(--brand-wash);overflow:hidden;
  border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.author-txt{font-size:.8rem;line-height:1.7;color:var(--ink-soft)}
.author-txt b{display:block;color:var(--ink);font-weight:700;font-size:.9rem}

/* toc */
.toc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);padding:1.2rem 1.4rem;margin:1.6rem 0 .6rem;
}
.toc h2{
  font-size:.8rem;font-weight:700;color:var(--brand-ink);
  display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;
}
.toc h2 .toc-ic{flex:none;color:var(--brand)}
.toc ol{margin:0;padding-left:1.4rem;display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}
.toc a{text-decoration:none;color:var(--ink)}
.toc a:hover{color:var(--brand-ink);text-decoration:underline}

/* ---------- sections ---------- */
section{padding:2.6rem 0 .4rem;display:flex;flex-direction:column;gap:1.1rem}
.sec-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.85rem;margin-bottom:.4rem}
.sec-head h2{font-size:clamp(1.34rem,3.2vw,1.62rem);font-weight:900;line-height:1.55;letter-spacing:.01em}
.sec-head .bar{width:56px;height:3px;background:var(--brand);border-radius:3px}
/* 見出しアイコン。文字と同じ行に流し込むので、2行に折り返しても頭が揃う */
.sec-head h2{display:block;text-align:center}
.sec-head h2 .sec-ic{
  display:inline-block;vertical-align:-.2em;margin-right:.4rem;
  color:var(--brand-ink);
}
/* 一覧ページの見出し線。すぐ上のサイト名の緑と紛れるのでオレンジにする */
.sec-head.list-head .bar{background:var(--cta)}
/* 小見出しのアイコン */
.sub-ic{flex:none;vertical-align:-.2em}
.pt dt,.rev-col h3{display:flex;align-items:center;gap:.4rem}
.related h2{display:flex;align-items:center;gap:.5rem}
.related h2 .toc-ic{flex:none;color:var(--brand)}
@media (max-width:24rem){
  .sec-head h2 .sec-ic{width:18px;height:18px}
}
.band{background:var(--tint);margin-top:2.4rem}
.band .wrap{padding-top:.6rem;padding-bottom:2.6rem}
.band section{padding-top:2.6rem}

h3{font-size:1.14rem;font-weight:700;line-height:1.6;letter-spacing:.01em}

/* criteria */
.criteria{display:flex;flex-direction:column;gap:1rem}
.crit{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);padding:1.2rem 1.35rem;
  display:grid;grid-template-columns:2.5rem 1fr;gap:0 .9rem;
}
.crit .n{
  width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--brand-wash);color:var(--brand-ink);
  display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;font-weight:500;
}
.crit h3{margin-bottom:.3rem}
.crit p{color:var(--ink-soft);font-size:.92rem;max-width:100%}

/* exclusion */
.exclude{display:flex;flex-direction:column;gap:.75rem}
.exclude div{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line-strong);
  border-radius:10px;padding:.85rem 1.1rem;
}
.exclude b{display:block;font-size:1.05rem;font-weight:700;margin-bottom:.25rem}
.exclude p{font-size:.9rem;color:var(--ink-soft);max-width:100%}

/* ---------- table ---------- */
.table-wrap{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);overflow:hidden;
}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:46rem;font-size:.85rem}
th,td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{
  background:var(--brand);color:#fff;font-size:.72rem;font-weight:700;
  letter-spacing:.05em;white-space:nowrap;border-bottom:none;
}
thead th:first-child{border-top-left-radius:0}
tbody tr:nth-child(even){background:var(--tint)}
tbody th{font-weight:500;min-width:14rem}
tbody th a{color:var(--brand-ink);text-decoration:none;font-weight:700;line-height:1.55}
tbody th a:hover{text-decoration:underline}
tbody th span{display:block;font-size:.7rem;color:var(--ink-faint);font-weight:400;margin-top:.1rem}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td .chip{
  display:inline-block;border-radius:999px;padding:.1rem .6rem;
  font-size:.7rem;font-weight:700;background:var(--brand-wash);color:var(--brand-ink);
}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
.table-note{font-size:.73rem;color:var(--ink-faint);padding:.75rem .9rem;background:var(--tint);line-height:1.7}

/* product image */
.thumb{
  position:relative;flex:none;width:104px;height:104px;
  background:var(--tint-deep);border:1px solid var(--line);border-radius:10px;
  display:grid;place-items:center;overflow:hidden;
}
.thumb::after{
  content:attr(data-label);font-family:var(--mono);font-size:.56rem;letter-spacing:.05em;
  color:var(--ink-faint);text-align:center;padding:.3rem;line-height:1.5;
}
.thumb img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:#fff}
.thumb-sm{width:46px;height:46px;border-radius:8px}
.thumb-sm::after{font-size:.46rem}
.cell-item{display:flex;gap:.7rem;align-items:center}

/* ---------- reviews ---------- */
.reviews{display:flex;flex-direction:column;gap:1.3rem}
.review{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);padding:1.4rem 1.5rem;
  display:grid;grid-template-columns:104px minmax(0,1fr);
  column-gap:1.3rem;row-gap:1rem;align-items:start;
  transition:box-shadow .18s ease;
}
.review:hover{box-shadow:var(--card-shadow-hover)}
.review > .thumb{grid-column:1;grid-row:1}
.review > .review-head{grid-column:2;grid-row:1;align-self:center}
.review > p,.review > .points,.review > .buy{grid-column:1 / -1}
.review-head{display:flex;flex-direction:column;gap:.35rem}
.review-head .top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.type-chip{
  border-radius:999px;padding:.1rem .7rem;font-size:.7rem;font-weight:700;
  background:var(--brand);color:#fff;flex:none;
}
.review-head h3{font-size:1.16rem;line-height:1.55}
.price{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.review p{font-size:.92rem;max-width:100%}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.7rem}
.pt{
  margin:0;background:var(--tint);border-radius:10px;padding:.7rem .9rem;
  display:flex;flex-direction:column;gap:.2rem;
}
.pt dt{font-size:.76rem;font-weight:700;letter-spacing:.06em}
.pt dd{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.8}
.pt.good{background:var(--brand-wash)}
.pt.good dt{color:var(--good)}
.pt.bad dt{color:var(--caution)}
.pt.fit dt{color:var(--ink-faint)}
.buy{
  justify-self:center;background:var(--cta);color:#fff;
  border-radius:999px;padding:.62rem 1.7rem;font-size:.88rem;font-weight:700;
  text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;
  box-shadow:0 2px 10px rgba(240,145,60,.32);transition:transform .15s ease;
}
.buy:hover{transform:translateY(-1px);background:var(--cta-deep)}

/* usecases */
.usecases{display:grid;grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr));gap:1rem}
.uc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);padding:1.2rem 1.25rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.uc .badge{
  align-self:flex-start;background:var(--brand-wash);color:var(--brand-ink);
  border-radius:999px;padding:.12rem .7rem;font-size:.7rem;font-weight:700;
}
.uc h3{font-size:1.06rem;line-height:1.55}
.uc p{font-size:.88rem;color:var(--ink-soft);max-width:100%}
.uc a{
  margin-top:auto;padding-top:.5rem;font-size:.84rem;font-weight:700;
  text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;
}
.uc a:hover{text-decoration:underline}

/* related */
.related{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);padding:1.4rem 1.5rem;
  display:flex;flex-direction:column;gap:.8rem;
}
.related h2{font-size:1.14rem;font-weight:900;line-height:1.55}
.related p{font-size:.9rem;color:var(--ink-soft);max-width:100%}
.related ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
.related li a{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.84rem;font-weight:700;
  text-decoration:none;color:var(--brand-ink);
  background:var(--brand-wash);border:1px solid transparent;
  border-radius:999px;padding:.42rem 1.05rem;
}
.related li a:hover{border-color:var(--brand);background:var(--surface)}

/* summary */
.summary{
  background:var(--surface);border:2px solid var(--brand);border-radius:var(--r);
  padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;
}
.summary p{max-width:100%;font-size:.95rem}

/* footer */
.site-foot{background:var(--tint-deep);border-top:1px solid var(--line);margin-top:3rem}
.foot-inner{
  max-width:74rem;margin:0 auto;padding:2.4rem 1.5rem 2.8rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.8rem;
  font-size:.79rem;color:var(--ink-soft);line-height:1.9;
}
.foot-inner h2{
  font-size:.76rem;font-weight:700;color:var(--ink);margin-bottom:.5rem;
  display:flex;align-items:center;gap:.45rem;
}
.foot-inner h2::before{content:"";width:12px;height:2px;background:var(--brand);border-radius:2px}
.foot-inner p{max-width:30em}
.copy{
  border-top:1px solid var(--line);text-align:center;
  padding:.9rem 1.5rem;font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);
}

/* ---------- スマートフォン ---------- */
@media (max-width:44rem){
  body{font-size:15.5px;line-height:1.85}

  /* ヘッダー: CTAを畳み、カテゴリだけ横スクロールで残す */
  .head-inner{padding:.6rem 1.1rem;gap:.5rem;flex-wrap:nowrap}
  .wordmark .tag{display:none}
  .wordmark .jp{font-size:1.08rem;letter-spacing:.02em}
  .head-cta{display:none}
  .site-nav{
    margin-left:auto;gap:.9rem;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{font-size:.8rem;white-space:nowrap}

  .hero-band{padding:2.2rem 1.25rem 2.4rem}
  .hero-band h1{font-size:1.32rem;line-height:1.65}
  .hero-band .meta{gap:.35rem 1rem;font-size:.7rem}
  .hero-band .cat-pill{margin-bottom:.7rem}

  .crumb ol{padding:.5rem 1.1rem;font-size:.72rem}
  .pr-note{margin-top:1.1rem;font-size:.72rem;line-height:1.75}
  .sale-note{font-size:.78rem;padding:.65rem .9rem}

  .wrap{padding:0 1.25rem}
  section{padding:2rem 0 .3rem}
  .sec-head{gap:.7rem}
  .sec-head h2{font-size:1.28rem}
  h3{font-size:1.08rem}

  .lead-block{padding:1.4rem 0 .3rem}
  .lead{font-size:.97rem}
  .author{padding:.8rem .9rem;gap:.75rem}
  .avatar{width:46px;height:46px}

  .toc{padding:1rem 1.1rem;margin:1.3rem 0 .4rem}
  .toc ol{font-size:.86rem}

  .crit{padding:1rem 1.1rem;grid-template-columns:2.2rem 1fr;gap:0 .7rem}
  .crit .n{width:1.9rem;height:1.9rem;font-size:.72rem}
  .crit p{font-size:.88rem}
  .exclude div{padding:.8rem .95rem}

  /* 比較表は横スクロール。指で動かせることが分かるように影を出す */
  .table-wrap{position:relative}
  .table-scroll{
    background:
      linear-gradient(to right, var(--surface) 30%, transparent),
      linear-gradient(to left, var(--surface) 30%, transparent) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  table{min-width:40rem;font-size:.8rem}
  th,td{padding:.6rem .7rem}
  tbody th{min-width:11.5rem}
  .table-note{font-size:.7rem;padding:.65rem .8rem}

  /* レビューカード: 画像とタイトルを横並びのまま維持 */
  .review{
    grid-template-columns:72px minmax(0,1fr);
    padding:1.1rem 1.15rem;column-gap:.9rem;row-gap:.8rem;
  }
  .thumb{width:72px;height:72px}
  .review-head h3{font-size:1.06rem;line-height:1.55}
  .price{font-size:.74rem}
  .type-chip{font-size:.66rem;padding:.08rem .6rem}
  .review p{font-size:.88rem}
  .points{gap:.5rem}
  .pt{padding:.6rem .8rem}
  .pt dd{font-size:.86rem}
  .buy{justify-self:stretch;text-align:center;justify-content:center;padding:.7rem 1rem}

  .uc{padding:1rem 1.05rem}
  .related{padding:1.15rem 1.15rem}
  .related h2{font-size:1.06rem}
  .related li a{font-size:.8rem;padding:.38rem .9rem}
  .summary{padding:1.15rem 1.15rem}
  .summary p{font-size:.9rem}

  .post-grid{grid-template-columns:1fr;gap:1rem}
  .tabs{gap:.45rem;margin-bottom:1.2rem}
  .tab{font-size:.78rem;padding:.38rem 1rem}

  .foot-inner{padding:1.8rem 1.25rem 2.2rem;gap:1.3rem;font-size:.78rem}
}

/* ---------- 幅の狭い端末 ---------- */
@media (max-width:23rem){
  .review{grid-template-columns:minmax(0,1fr)}
  .review > .thumb{grid-column:1;justify-self:center}
  .review > .review-head{grid-column:1;grid-row:auto;text-align:center}
  .review-head .top{justify-content:center}
  .site-nav a{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- 一覧ページ ---------- */
.wrap.wide{max-width:74rem}
.tabs{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.tab{
  border-radius:999px;padding:.45rem 1.2rem;font-size:.84rem;font-weight:700;
  text-decoration:none;color:var(--ink-soft);background:var(--surface);
  border:1px solid var(--line);
}
.tab:hover{border-color:var(--brand);color:var(--brand-ink)}
.tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));gap:1.3rem}
.post-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--card-shadow);overflow:hidden;transition:box-shadow .18s ease,transform .18s ease;
}
.post-card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-2px)}
.post-thumb{
  position:relative;aspect-ratio:16/10;background:var(--tint-deep);
  display:grid;place-items:center;overflow:hidden;
}
.post-thumb::after{
  content:attr(data-label);font-family:var(--mono);font-size:.6rem;color:var(--ink-faint);
}
.post-thumb img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:#fff}
.post-body{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.post-body .badge{
  align-self:flex-start;background:var(--brand-wash);color:var(--brand-ink);
  border-radius:999px;padding:.1rem .7rem;font-size:.68rem;font-weight:700;
}
.post-body h3{font-size:1.04rem;line-height:1.6;font-weight:700}
.post-body p{font-size:.82rem;color:var(--ink-soft);max-width:100%;line-height:1.75}
.post-meta{margin-top:auto;padding-top:.4rem;font-family:var(--mono);font-size:.68rem;color:var(--ink-faint)}
.empty{color:var(--ink-faint);text-align:center;padding:2rem 0}

/* ---------- 承認前プレビュー ---------- */
.preview-bar{
  background:var(--cta);color:#fff;text-align:center;
  padding:.5rem 1rem;font-size:.78rem;font-weight:700;letter-spacing:.02em;
}

/* ---------- 広告枠 ---------- */
.ad-slot{
  margin:2rem 0 .5rem;padding:.6rem 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.4rem;
  min-height:0;
}
.ad-label{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--ink-faint);
}
.ad-slot ins{display:block;width:100%}

/* ---------- フッターの必須リンク ---------- */
.foot-links{
  display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;
  padding:1rem 1.5rem 0;font-size:.78rem;
}
.foot-links a{color:var(--ink-soft);text-decoration:none}
.foot-links a:hover{color:var(--brand-ink);text-decoration:underline}

/* ============ 単品記事 ============ */
.verdict{display:flex;flex-direction:column;gap:1rem}
.verdict-card{
  display:grid;grid-template-columns:120px 1fr;gap:1.1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem;box-shadow:var(--card-shadow)
}
.verdict-main{display:flex;flex-direction:column;gap:.45rem}
.vd-brand{font-size:.8rem;color:var(--ink-faint)}
.verdict-main h3{font-size:1.2rem;line-height:1.55}
.vd-price{font-family:var(--mono);font-size:1.3rem;font-weight:500;color:var(--brand-ink)}
.vd-unit{font-family:var(--font);font-size:.85rem;color:var(--ink-soft);font-weight:400}
.verdict-main p{font-size:.93rem;max-width:100%;margin:0}
.verdict-main .buy{margin-top:.4rem}
.verdict-cols{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.verdict-cols dd ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.verdict-cols dd li{font-size:1.02rem;line-height:1.7}
/* 「向いている人／向かない人」は判断の核なので、2ポイントぶん大きくする */
.verdict-cols .pt dt{font-size:.89rem}

.spec-table th{
  width:34%;text-align:left;white-space:nowrap;
  background:var(--tint);color:var(--ink-soft);font-weight:500;font-size:.88rem
}
.spec-table td{font-size:.92rem}

.features{display:flex;flex-direction:column;gap:1rem}
.feat{
  display:grid;grid-template-columns:48px 1fr;gap:.9rem;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.05rem
}
.feat .n{
  font-family:var(--mono);font-size:1.05rem;font-weight:500;color:var(--brand);
  background:var(--brand-wash);border-radius:10px;text-align:center;padding:.35rem 0
}
.feat h3{font-size:1.06rem;line-height:1.55;margin-bottom:.3rem}
.feat p{font-size:.92rem;color:var(--ink-soft);max-width:100%}

.rev-summary{
  display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.2rem;margin-bottom:1rem
}
.rev-stat{display:flex;align-items:baseline;gap:.2rem;flex-wrap:wrap}
.rev-stat .avg{font-family:var(--mono);font-size:2.3rem;font-weight:500;color:var(--brand-ink);line-height:1}
.rev-stat .of{font-size:.9rem;color:var(--ink-faint)}
.rev-stat .cnt{display:block;width:100%;font-size:.82rem;color:var(--ink-soft);margin-top:.3rem}
.star-bars{display:flex;flex-direction:column;gap:.3rem}
.bar-row{display:grid;grid-template-columns:2.4rem 1fr 2.8rem;gap:.5rem;align-items:center}
.bar-row .lbl{font-size:.82rem;color:var(--ink-soft)}
.bar-row .track{height:8px;background:var(--tint-deep);border-radius:99px;overflow:hidden}
.bar-row .fill{display:block;height:100%;background:var(--brand);border-radius:99px}
.bar-row .pct{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);text-align:right}
.rev-cols{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.rev-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.05rem}
.rev-col h3{font-size:1rem;margin-bottom:.5rem}
.rev-col.good h3{color:var(--good)}
.rev-col.bad h3{color:var(--caution)}
.rev-col ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.rev-col li{font-size:.9rem;line-height:1.7;color:var(--ink-soft)}
.rev-src{font-size:.8rem;color:var(--ink-faint);margin-top:.7rem}

.alts{display:flex;flex-direction:column;gap:.9rem}
.alt{
  display:grid;grid-template-columns:84px 1fr;gap:.9rem;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem
}
.alt-txt{display:flex;flex-direction:column;gap:.35rem}
.alt-txt h3{font-size:1.02rem;line-height:1.55}
.alt-price{font-family:var(--mono);font-size:.95rem;color:var(--brand-ink)}
.alt-txt p{font-size:.9rem;color:var(--ink-soft);max-width:100%}
.alt-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.2rem}
.alt-links a{font-size:.88rem;font-weight:700;color:var(--cta-deep);text-decoration:none}
.alt-links a.inner{color:var(--brand-ink)}
.alt-links a:hover{text-decoration:underline}

.faq{display:flex;flex-direction:column;gap:.6rem}
.faq-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1.05rem
}
.faq-item summary{
  cursor:pointer;font-weight:700;font-size:.98rem;line-height:1.6;
  list-style:none;display:flex;gap:.55rem;align-items:flex-start
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"Q";font-family:var(--mono);color:var(--brand);flex:none}
.faq-item[open] summary{margin-bottom:.55rem}
.faq-item p{font-size:.92rem;color:var(--ink-soft);max-width:100%;padding-left:1.1rem}
.summary .buy{margin-top:.9rem}

@media (max-width:720px){
  .verdict-card{grid-template-columns:1fr}
  .verdict-card > .thumb{max-width:160px}
  .verdict-cols,.rev-cols{grid-template-columns:1fr}
  .rev-summary{grid-template-columns:1fr;gap:.9rem}
  .alt{grid-template-columns:64px 1fr}
  .spec-table th{width:40%;white-space:normal}
}
.rev-summary.solo{grid-template-columns:1fr}

/* ============ ヘッダーの検索ボタン ============ */
.pill.ghost{
  background:var(--surface);color:var(--brand-ink);
  border:1.5px solid var(--line-strong);box-shadow:none;
}
.pill.ghost .mag{display:block;flex:none}
.pill.ghost:hover{border-color:var(--brand);background:var(--brand-wash)}

/* ============ 検索ページ ============ */
.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}
.search-form{position:relative;display:flex;margin-bottom:1rem}
.search-form input{
  width:100%;font-family:var(--font);font-size:1.05rem;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:999px;
  padding:.85rem 3rem .85rem 1.25rem;
}
.search-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.search-form input::placeholder{color:var(--ink-faint)}
.search-form input::-webkit-search-cancel-button{display:none}
.search-form button{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  width:2rem;height:2rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--tint-deep);color:var(--ink-soft);font-size:1.05rem;line-height:1;
}
.search-form button:hover{background:var(--brand-wash);color:var(--brand-ink)}
.search-status{font-size:.88rem;color:var(--ink-soft);margin-bottom:1.2rem}

/* ============ ヘッダーの配置（スマホ） ============ */
@media (max-width:44rem){
  /* 記事を読むときに邪魔にならないよう、スマホでは追従させない */
  .site-head{position:static}
  .head-inner{
    flex-direction:column;align-items:center;text-align:center;
    flex-wrap:wrap;gap:.6rem;padding:.85rem 1.25rem .9rem;
  }
  .wordmark{justify-content:center}
  .wordmark .tag{display:none}
  .site-nav{
    margin-left:0;justify-content:center;flex-wrap:wrap;gap:.5rem .95rem;
    overflow-x:visible;
  }
  .head-cta{
    display:flex;margin-left:0;justify-content:center;flex-wrap:wrap;gap:.5rem;
  }
  .pill{padding:.5rem .95rem;font-size:.78rem}
}
@media (max-width:23rem){
  .pill{padding:.45rem .8rem;font-size:.74rem}
  .head-inner{padding-left:1rem;padding-right:1rem}
}

/* ============ 楽天／Amazon の2ボタン ============ */
.buy-row{
  grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  width:100%;margin-top:.2rem;
}
.buy-row.solo{grid-template-columns:1fr;max-width:22rem;margin-left:auto;margin-right:auto}
.buy-row .buy{
  justify-self:stretch;flex-direction:column;align-items:center;gap:.1rem;
  padding:.65rem .9rem;border-radius:14px;text-align:center;line-height:1.4;
}
.buy-row .buy .shop{font-size:.7rem;font-weight:500;opacity:.92;letter-spacing:.02em}
.buy-row .buy .amount{font-family:var(--mono);font-size:1.08rem;font-weight:700}
.buy-row .buy .amount.muted{font-family:var(--font);font-size:.8rem;font-weight:400;opacity:.9}
.buy-row .buy .go{font-size:.7rem;font-weight:500;opacity:.92}
.buy.rakuten{background:var(--cta);box-shadow:0 2px 10px rgba(240,145,60,.32)}
.buy.rakuten:hover{background:var(--cta-deep)}
.buy.amazon{background:#232F3E;box-shadow:0 2px 10px rgba(35,47,62,.3)}
.buy.amazon:hover{background:#131A22}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .buy.amazon{background:#37475A}
  :root:not([data-theme="light"]) .buy.amazon:hover{background:#465C71}
}
:root[data-theme="dark"] .buy.amazon{background:#37475A}
:root[data-theme="dark"] .buy.amazon:hover{background:#465C71}
@media (max-width:23rem){
  .buy-row{grid-template-columns:1fr}
}
.buy.none{
  background:var(--tint);color:var(--ink-faint);box-shadow:none;
  border:1.5px dashed var(--line-strong);cursor:default;
}
.buy.none:hover{transform:none;background:var(--tint)}

/* ============ お問い合わせフォーム ============ */
.contact-form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.35rem 1.4rem;box-shadow:var(--card-shadow);margin-top:1rem;
  display:flex;flex-direction:column;gap:1rem;
}
.contact-form .field{display:flex;flex-direction:column;gap:.4rem;position:relative}
.contact-form label{font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.contact-form .req,.contact-form .opt{
  font-size:.66rem;font-weight:500;padding:.1rem .5rem;border-radius:999px;letter-spacing:.02em;
}
.contact-form .req{background:var(--cta);color:#fff}
.contact-form .opt{background:var(--tint-deep);color:var(--ink-soft)}
.contact-form input,.contact-form select,.contact-form textarea{
  font-family:var(--font);font-size:1rem;color:var(--ink);background:var(--page);
  border:1.5px solid var(--line-strong);border-radius:10px;padding:.7rem .9rem;width:100%;
  line-height:1.7;
}
.contact-form textarea{resize:vertical;min-height:9rem}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)
}
.contact-form .counter{font-size:.72rem;color:var(--ink-faint);align-self:flex-end}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .form-note{font-size:.8rem;color:var(--ink-soft);line-height:1.8}
.contact-form .submit{
  align-self:center;background:var(--brand);color:#fff;border:0;border-radius:999px;
  padding:.8rem 2.6rem;font-family:var(--font);font-size:.95rem;font-weight:700;cursor:pointer;
  box-shadow:0 2px 10px rgba(18,169,156,.3);transition:transform .15s ease,background .15s ease;
}
.contact-form .submit:hover:not(:disabled){transform:translateY(-1px);background:var(--brand-deep)}
.contact-form .submit:disabled{opacity:.55;cursor:progress}
.form-status{font-size:.88rem;text-align:center;min-height:1.2rem;margin:0}
.form-status.ok{color:var(--good);font-weight:700}
.form-status.err{color:var(--caution);font-weight:700}
@media (max-width:44rem){
  .contact-form{padding:1.1rem 1.15rem}
  .contact-form .submit{align-self:stretch}
}

/* フッターのリンク列（スマホでの余白と折り返し） */
@media (max-width:44rem){
  .foot-links{
    padding:1.1rem 1.25rem .2rem;gap:.6rem 1.1rem;font-size:.76rem;line-height:1.9;
  }
  .foot-links a{padding:.15rem 0}
  .copy{padding:.9rem 1.25rem}
}

/* ============ 横はみ出しの修正（grid の子を縮められるようにする） ============ */
.verdict-card{grid-template-columns:120px minmax(0,1fr)}
.verdict-main{min-width:0}
.verdict-main h3{overflow-wrap:anywhere;text-wrap:normal}
.verdict-cols dl,.verdict-cols dd,.verdict-cols li{min-width:0;overflow-wrap:anywhere}
.feat{grid-template-columns:48px minmax(0,1fr)}
.feat > div{min-width:0}
.rev-summary{grid-template-columns:auto minmax(0,1fr)}
.star-bars{min-width:0}
.bar-row{grid-template-columns:2.4rem minmax(0,1fr) 2.8rem}
.rev-col{min-width:0}
.rev-col li{overflow-wrap:anywhere}
.alt{grid-template-columns:84px minmax(0,1fr)}
.alt-txt{min-width:0}
.alt-txt h3{overflow-wrap:anywhere}
.faq-item summary,.faq-item p{overflow-wrap:anywhere}
.buy-row{min-width:0}
.buy-row.solo{max-width:min(22rem,100%)}
.buy-row .buy{min-width:0;overflow-wrap:anywhere}
.spec-table td{overflow-wrap:anywhere}

/* ============ ヘッダー: 3つのボタンを1行に（iPhone 13 mini 375px 対応） ============ */
@media (max-width:44rem){
  .head-cta{flex-wrap:nowrap;gap:.4rem;width:100%;justify-content:center}
  .pill{padding:.5rem .8rem;font-size:.74rem;gap:.3rem}
  .pill .arw{display:none}
  .verdict-card{grid-template-columns:minmax(0,1fr)}
  .verdict-card > .thumb{max-width:150px}
  .verdict-cols,.rev-cols{grid-template-columns:1fr}
  .rev-summary{grid-template-columns:1fr;gap:.9rem}
  .alt{grid-template-columns:64px minmax(0,1fr)}
  .verdict-main h3{font-size:1.08rem}
  .vd-price{font-size:1.15rem}
  .buy-row{gap:.5rem}
  .buy-row .buy{padding:.6rem .5rem}
  .buy-row .buy .amount{font-size:.98rem}
}
@media (max-width:23rem){
  .pill{padding:.45rem .62rem;font-size:.69rem}
}

/* ============ 表の最小幅がページ全体を押し広げないようにする ============ */
body{margin:0}
main{min-width:0}
main > *{min-width:0}
.wrap{min-width:0}
section{min-width:0}
.table-wrap{min-width:0;max-width:100%}
.table-scroll{min-width:0;max-width:100%}
/* スペック表は横スクロール不要。全幅で折り返す */
.spec-table{min-width:0!important;width:100%}
.spec-table th,.spec-table td{white-space:normal}
/* main を flex にすると、比較表の min-width が縦方向の flex item(.wrap) の
   幅の下限として効いてしまい、ページ全体が横に広がる。ブロックで十分。 */
main{display:block}

/* 画像を載せられない商品（Amazon直リンク不可）のサムネイル代用 */
.thumb.noimg,.post-thumb.noimg{
  background:var(--tint-deep);color:var(--ink-faint);
  display:grid;place-items:center;text-align:center;padding:.5rem;
}
.thumb.noimg span,.post-thumb.noimg span{
  font-size:.72rem;font-weight:700;line-height:1.5;overflow-wrap:anywhere;
}
.thumb-sm.noimg span{font-size:.6rem}
/* 価格を出せないボタンは中身が少ないので、高さを揃えて中央に寄せる */
.buy-row .buy{justify-content:center}
.buy-row .buy .go{font-size:.86rem;font-weight:700;opacity:1}
.buy-row .buy .amount + .go{font-size:.7rem;font-weight:500;opacity:.92}

/* ============ 記事トップのアイキャッチ写真 ============ */
.hero-photo{
  margin:0;max-width:74rem;margin-left:auto;margin-right:auto;
  padding:0 1.5rem;
}
.hero-photo img{
  width:100%;height:auto;aspect-ratio:940/520;object-fit:cover;
  border-radius:var(--r);display:block;
  background:var(--tint-deep);
}
.hero-photo figcaption{
  font-size:.68rem;color:var(--ink-faint);text-align:right;
  padding:.35rem .1rem 0;letter-spacing:.02em;
}
@media (max-width:44rem){
  .hero-photo{padding:0 1.25rem}
  .hero-photo img{aspect-ratio:16/10;border-radius:12px}
  .hero-photo figcaption{font-size:.64rem}
}

/* ============ アイキャッチ写真（セクション見出しの下に置く） ============ */
.hero-photo{
  margin:0 0 1.3rem;padding:0;max-width:100%;
}
.hero-photo img{
  width:100%;height:auto;aspect-ratio:940/470;object-fit:cover;
  border-radius:var(--r);display:block;background:var(--tint-deep);
}
.hero-photo figcaption{
  font-size:.68rem;color:var(--ink-faint);text-align:right;
  padding:.35rem .1rem 0;letter-spacing:.02em;
}

/* ============ 結論カードの商品画像を大きく ============ */
.verdict-card > .thumb{
  width:100%;height:auto;aspect-ratio:4/3;max-width:none;
}
.verdict-card > .thumb img{object-fit:contain;padding:.6rem}

@media (max-width:44rem){
  .hero-photo{margin-bottom:1.1rem}
  .hero-photo img{aspect-ratio:16/10;border-radius:12px}
  .hero-photo figcaption{font-size:.64rem}
  /* スマホでは1列なので、商品画像は横幅いっぱいに */
  .verdict-card > .thumb{max-width:none;aspect-ratio:4/3}
}

/* 一覧カードのサムネイル: 左右の余白を作らず、横幅いっぱいに切って表示する */
.post-thumb{aspect-ratio:16/9}
.post-thumb.cover img{object-fit:cover;background:var(--tint-deep)}
/* 商品画像（白背景）は切ると商品が欠けるので、これまでどおり全体を見せる */
.post-thumb:not(.cover) img{object-fit:contain}
@media (max-width:44rem){
  .post-thumb{aspect-ratio:16/8.5}
}

/* 商品画像がない商品（Amazon直リンク不可）は、画像枠を出さず1列にする */
.verdict-card.no-thumb,.alt.no-thumb,.review.no-thumb{grid-template-columns:minmax(0,1fr)}
.review.no-thumb > .review-head{grid-column:1;grid-row:auto}
@media (max-width:44rem){
  .verdict-card.no-thumb,.alt.no-thumb,.review.no-thumb{grid-template-columns:minmax(0,1fr)}
}

/* サイト名を大きく（ヘッダーのボタンが2つになったぶん余裕ができた） */
.wordmark .jp{font-size:1.55rem}
@media (max-width:44rem){
  .wordmark .jp{font-size:1.35rem;letter-spacing:.02em}
  .head-cta{gap:.6rem}
  .pill{padding:.55rem 1.15rem;font-size:.82rem}
}
@media (max-width:23rem){
  .wordmark .jp{font-size:1.2rem}
  .pill{padding:.5rem .95rem;font-size:.76rem}
}

/* ヘッダーのホームボタン（アイコンのみ） */
.pill.icon{
  background:var(--surface);color:var(--brand-ink);
  border:1.5px solid var(--line-strong);box-shadow:none;
  padding:.5rem .7rem;
}
.pill.icon svg{display:block}
.pill.icon:hover{border-color:var(--brand);background:var(--brand-wash)}
@media (max-width:44rem){
  .pill.icon{padding:.45rem .6rem}
}
@media (max-width:23rem){
  .pill.icon{padding:.4rem .5rem}
}

/* ホームボタンは正方形・角丸3px */
.pill.icon{
  border-radius:3px;
  width:2.5rem;height:2.5rem;padding:0;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
@media (max-width:44rem){
  .pill.icon{width:2.3rem;height:2.3rem;padding:0}
}
@media (max-width:23rem){
  .pill.icon{width:2.1rem;height:2.1rem;padding:0}
}

/* ホームボタン: 記事一覧ボタンと同じ高さ・同じ角丸の正方形 */
.head-cta{align-items:stretch}
.pill.icon{
  border-radius:999px;
  height:auto;width:auto;aspect-ratio:1;padding:0;
  align-self:stretch;flex:none;
}
@media (max-width:44rem){
  .pill.icon{height:auto;width:auto;aspect-ratio:1;padding:0}
}
@media (max-width:23rem){
  .pill.icon{height:auto;width:auto;aspect-ratio:1;padding:0}
}

/* ボタンの高さを揃え、ホームボタンはその高さの正方形にする */
.pill{min-height:2.75rem}
.pill.icon{
  width:2.75rem;height:2.75rem;aspect-ratio:auto;
  padding:0;border-radius:999px;flex:none;align-self:center;
}
@media (max-width:44rem){
  .pill{min-height:2.75rem}
  .pill.icon{width:2.75rem;height:2.75rem;padding:0}
}
@media (max-width:23rem){
  .pill{min-height:2.5rem}
  .pill.icon{width:2.5rem;height:2.5rem;padding:0}
}

/* 結論カードの商品画像: 左右の余白をなくし、画像の比率のまま全幅に */
.verdict-card > .thumb{
  width:100%;height:auto;aspect-ratio:auto;padding:0;
  display:block;background:#fff;overflow:hidden;
}
.verdict-card > .thumb::after{display:none}
.verdict-card > .thumb img{
  position:static;width:100%;height:auto;object-fit:contain;padding:0;
}

/* 代替候補カードのリンク行（楽天／Amazon／内部リンク） */
.alt-links{gap:.5rem .9rem;align-items:center}
.alt-links a{white-space:nowrap}
.alt-none{
  font-size:.82rem;color:var(--ink-faint);white-space:nowrap;
  border:1px dashed var(--line-strong);border-radius:999px;padding:.1rem .6rem;
}

/* 記事上部の日付: 更新日を主、公開日を従で出す */
.hero-band .meta .pub{opacity:.78;font-size:.94em}
.hero-band .meta time{font-family:var(--mono);letter-spacing:.01em}

/* 購入ボタンの店アイコン */
.buy-row .buy .shop{
  display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
}
.buy-row .buy .shop-ic{flex:none;opacity:.95}
/* 店名とアイコンを1行で読ませる */
.buy-row .buy .shop{font-size:.76rem;font-weight:700;letter-spacing:.01em;opacity:1}
.buy-row .buy .shop-ic{opacity:.9}
.buy-row .buy .go{font-size:.72rem;font-weight:500;opacity:.92}

/* フッターのホームリンク */
.foot-links .foot-home{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--brand-ink)}
.foot-links .foot-home svg{flex:none}

/* ============ PR表記を控えめに ============
   ステマ規制（景品表示法）で広告であることの明示は必要だが、
   位置と大きさは「消費者が認識できる」範囲で自由。
   枠を外して1行の注記にし、視認性は保ったまま主張を弱める。 */
.pr-note{
  background:transparent;border:0;border-radius:0;
  padding:.55rem 0 0;margin-top:1.1rem;
  font-size:.7rem;line-height:1.7;color:var(--ink-faint);
  border-top:1px solid var(--line);
  align-items:baseline;gap:.5rem;
}
.pr-note .tagpr{
  background:transparent;color:var(--ink-faint);
  border:1px solid var(--line-strong);border-radius:3px;
  padding:.02rem .32rem;font-size:.6rem;letter-spacing:.06em;
}
@media (max-width:44rem){
  .pr-note{font-size:.68rem;margin-top:1rem;padding-top:.5rem}
}

/* 商品名を読みやすく（写真のすぐ下に来るため、本文より少し大きく） */
.verdict-main h3{font-size:1.32rem;line-height:1.5}
.review-head h3{font-size:1.26rem;line-height:1.5}
.alt-txt h3{font-size:1.12rem;line-height:1.55}
@media (max-width:44rem){
  .verdict-main h3{font-size:1.2rem}
  .review-head h3{font-size:1.16rem}
  .alt-txt h3{font-size:1.06rem}
}
/* PR表記の上の区切り線を外す */
.pr-note{border-top:0;padding-top:0}

/* サイト名とカテゴリのあいだの区切り線（スマホのみ・縦積みのとき） */
.brand-bar{display:none}
@media (max-width:44rem){
  .brand-bar{
    display:block;width:56px;height:3px;border-radius:3px;
    background:var(--brand);margin:.1rem auto .15rem;
  }
}