/* トップ: 左寄せ・罫線で区切る。中央寄せヒーローは使わない */
.intro { padding: var(--sp-5) 0 var(--sp-4); border-bottom: 1px solid var(--rule); }
.intro__title { font-size: var(--fs-xxl); color: var(--brand); max-width: 22em; }
.intro__lead { max-width: 38em; color: var(--ink-weak); margin: 0; }

.section { padding-top: var(--sp-5); }
.section__title { font-size: var(--fs-l); border-left: 4px solid var(--brand); padding-left: var(--sp-2); }

/* 記事リスト: カードでなく罫線区切りのリスト(帳簿の行) */
.entry-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.entry-card { border-bottom: 1px solid var(--rule); }
.entry-card__link { display: block; padding: var(--sp-3) var(--sp-1); text-decoration: none; color: inherit; }
.entry-card__link:hover { background: var(--brand-weak); }
.entry-card__meta { font-size: var(--fs-xs); color: var(--ink-weak); display: flex; gap: var(--sp-2); }
.entry-card__cat { color: var(--brand); }
.entry-card__title { font-size: var(--fs-l); margin: 4px 0 2px; font-weight: 500; }
.entry-card__count { font-size: var(--fs-xs); color: var(--ink-weak); margin: 0; }

/* カテゴリ索引 */
.cat-index { list-style: none; margin: var(--sp-3) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cat-index li { border: 1px solid var(--rule); margin: 0 -1px -1px 0; }
.cat-index a { background: var(--white); display: flex; justify-content: space-between; padding: var(--sp-2) var(--sp-2); text-decoration: none; }
.cat-index a:hover { background: var(--brand-weak); }
.cat-index__count { color: var(--ink-weak); font-size: var(--fs-s); }

/* 記事 */
.breadcrumb { font-size: var(--fs-xs); color: var(--ink-weak); padding-top: var(--sp-3); }
.article__head { padding: var(--sp-2) 0 var(--sp-3); border-bottom: 2px solid var(--brand); margin-bottom: var(--sp-3); }
.article__title { font-size: var(--fs-xl); }
.article__meta { font-size: var(--fs-xs); color: var(--ink-weak); margin: 0; }
.article__body h2 { font-size: var(--fs-l); margin-top: var(--sp-5); border-left: 4px solid var(--brand); padding-left: var(--sp-2); }
.article__body h3 { font-size: var(--fs-m); margin-top: var(--sp-4); }

/* PR表記: ファーストビュー内に必ず出す(法対応。目立たせすぎず、隠さない) */
.pr-note { font-size: var(--fs-xs); color: var(--ink-weak); border: 1px solid var(--rule);
    padding: 6px 10px; margin-bottom: var(--sp-3); background: var(--white); }

/* 比較表: このサイトの主役。ヘッダ行は紺の淡地、数値は右揃え桁揃え */
.cmp-scroll { overflow-x: auto; margin: var(--sp-2) 0; }
.cmp { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--white); font-size: var(--fs-s); }
.cmp th, .cmp td { border: 1px solid var(--rule); padding: 10px 12px; }
.cmp thead th { background: var(--brand-weak); color: var(--brand); font-weight: 700; text-align: left; }
.cmp thead th.num { text-align: right; }
.cmp tbody tr:hover { background: var(--paper); }
.cmp__name a { font-weight: 500; }
.cmp__foot { display: block; font-size: var(--fs-xs); color: var(--ink-weak); font-weight: 400; }

/* 商品カード */
.item-card { display: flex; gap: var(--sp-2); border: 1px solid var(--rule); background: var(--white);
    padding: var(--sp-2); margin: var(--sp-2) 0; align-items: flex-start; }
.item-card img { flex: 0 0 auto; border: 1px solid var(--rule); }
.item-card__name { font-weight: 500; margin: 0 0 4px; }
.item-card__data { font-size: var(--fs-s); color: var(--ink-weak); margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.btn-rakuten { display: inline-block; background: var(--accent); color: var(--white); text-decoration: none;
    font-size: var(--fs-s); font-weight: 700; padding: 10px 18px; }
.btn-rakuten:hover { background: #A83218; }

/* 観測ブロック・状態表示 */
.checked-note { font-size: var(--fs-s); color: var(--ink-weak); border-top: 1px dashed var(--rule-strong);
    margin-top: var(--sp-4); padding-top: var(--sp-2); }
.table-empty, .empty-state { color: var(--ink-weak); background: var(--white); border: 1px solid var(--rule);
    padding: var(--sp-3); margin: var(--sp-3) 0; }
.archive-head { padding: var(--sp-4) 0 var(--sp-2); border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-2); }
.archive-head__title { font-size: var(--fs-xl); }
.pagination { margin-top: var(--sp-4); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .intro__title { font-size: var(--fs-xl); }
    .item-card { flex-direction: column; }
}