/* サイト共通のデザイン。色・角丸・線・ボタン・注意書きの形を全ページで揃える。
   比較表(minipc-comparison-2026)も tools/cmp_restyle.py でクラスに置き換えたうえでここで描く。 */
:root {
  --bg: #ffffff; --surface: #ffffff; --soft: #f5f7fa; --soft-2: #eef2f6;
  --fg: #1c2430; --muted: #5f6b7a; --line: #dde3ea; --line-strong: #c4cdd8;
  --accent: #1f5fbf; --accent-fg: #ffffff; --accent-soft: #e8f0fb;
  --ok: #18794e; --ok-soft: #e6f4ec; --warn: #9a5b00; --warn-soft: #fff6e0; --warn-line: #f0d08a;
  --bar-green: #2f9e5b; --bar-amber: #d98a14; --bar-red: #d64545; --bar-blue: #3a6fd8;
  --mk-minisforum: #fff7e3; --mk-gmktec: #eaf2ff; --mk-geekom: #e9f7ef; --mk-acemagic: #f4edfb;
  --rakuten: #bf0000; --yahoo: #c4003a;
  --radius: 10px; --radius-s: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141a; --surface: #151b23; --soft: #19212b; --soft-2: #1f2833;
    --fg: #e4e9ef; --muted: #98a3b0; --line: #2b3542; --line-strong: #3a4656;
    --accent: #6ea8ff; --accent-fg: #0f141a; --accent-soft: #1a2a42;
    --ok: #5fd08f; --ok-soft: #15301f; --warn: #f0b75a; --warn-soft: #2a2312; --warn-line: #5a4a22;
    --mk-minisforum: #2a2414; --mk-gmktec: #172338; --mk-geekom: #152a1f; --mk-acemagic: #251c31;
    --rakuten: #ff6b6b; --yahoo: #ff7a9c;
  }
}
:root[data-theme="dark"] {
  --bg: #0f141a; --surface: #151b23; --soft: #19212b; --soft-2: #1f2833;
  --fg: #e4e9ef; --muted: #98a3b0; --line: #2b3542; --line-strong: #3a4656;
  --accent: #6ea8ff; --accent-fg: #0f141a; --accent-soft: #1a2a42;
  --ok: #5fd08f; --ok-soft: #15301f; --warn: #f0b75a; --warn-soft: #2a2312; --warn-line: #5a4a22;
  --mk-minisforum: #2a2414; --mk-gmktec: #172338; --mk-geekom: #152a1f; --mk-acemagic: #251c31;
  --rakuten: #ff6b6b; --yahoo: #ff7a9c;
}

/* ---- 土台 ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  /* 欧文は Arial 系、和文は各 OS の読みやすいゴシック(Windows はメイリオ) */
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.85; font-size: 16px; letter-spacing: .02em;
  /* 日本語の改行: 禁則を厳しめに。語の途中では折らない(はみ出す時だけ折る) */
  line-break: strict; overflow-wrap: break-word; word-break: normal; text-autospace: normal;
}
/* 見出し・カード・表の見出しは文節で折り返し、行の長さをそろえる */
h1, h2, h3, .card-title, .feature-title, .content th, .cpu-name, .hero-lead { word-break: auto-phrase; text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 2px; }
/* 本文の幅: 1 行が和文 45 字以内(16px × 45 = 720px + 余白) */
.wrap { max-width: 752px; margin: 0 auto; padding: 0 16px; }
/* 比較表のページ: 表が入る幅は要るが、広すぎると名前とスコアが離れて読みにくい(元のページの本文幅は約 760px) */
.wrap.wide { max-width: 832px; }
main { padding-top: 12px; }
h1, h2, h3 { line-height: 1.4; font-weight: 700; }
h1 { font-size: 1.65rem; margin: 12px 0 8px; }
h2 { font-size: 1.3rem; margin: 2.2em 0 .8em; padding-left: 12px; border-left: 4px solid var(--accent); }
h3 { font-size: 1.08rem; margin: 1.8em 0 .6em; }
.num, .benchmark-score, .rank-score, .cpu-stat-value, .price { font-variant-numeric: tabular-nums; }

/* ---- ヘッダー・フッター・現在地 ---- */
.site-header { border-top: 3px solid var(--accent); border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; padding-top: 12px; padding-bottom: 12px; }
.site-title { font-weight: 800; font-size: 1.05rem; color: var(--fg); text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 14px; }
/* 押しやすさ: リンクの押せる範囲を高さ 44px 確保(見た目の大きさは変えない) */
.site-header nav a, .site-title { display: inline-flex; align-items: center; min-height: 44px; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header .wrap { padding-top: 2px; padding-bottom: 2px; }
.site-header nav a:hover { color: var(--accent); }
.site-footer { border-top: 1px solid var(--line); margin-top: 56px; color: var(--muted); font-size: 13px; background: var(--soft); }
.site-footer .wrap { padding-top: 12px; padding-bottom: 12px; }
.crumbs { font-size: 13px; color: var(--muted); margin-top: 4px; }
.crumbs a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.crumbs span { margin: 0 6px; }
.meta { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.tag { display: inline-block; margin-left: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }

/* ---- 共通の部品: 囲み・注意書き・ボタン ---- */
.src-note, .cmp-info, .rank-box, details {
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 16px 0;
}
.src-note { font-size: 13px; color: var(--muted); padding: 8px 12px; }
/* PR・広告の表示は全ページ同じ形 */
.pr-note, .minipc-pr-notice, .minipc-ad-note, .cmp-note {
  background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--radius); color: var(--fg);
  font-size: 13px; padding: 10px 14px; margin: 12px 0;
}
.pr-note p { margin: 0; }
.cmp-note ul { margin: 6px 0 0; padding-left: 20px; }
.cmp-note-title { font-weight: 700; color: var(--warn); margin: 0 0 4px; }
summary { cursor: pointer; font-weight: 600; }
blockquote { margin: 16px 0; padding: 4px 16px; border-left: 4px solid var(--line-strong); color: var(--muted); }
.content img { max-width: 100%; height: auto; }
.btn, .buy a {
  display: inline-block; padding: 10px 20px; background: var(--accent); color: var(--accent-fg); border-radius: var(--radius-s);
  text-decoration: none; font-weight: 700; border: 0;
}
.btn:hover, .buy a:hover { filter: brightness(1.08); }
.buy, .buy p { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.buy p { margin: 0; }
@media (max-width: 560px) {
  .buy a { flex: 1 1 100%; text-align: center; }
}

.hero-img { display: block; width: 100%; height: auto; border-radius: var(--radius); margin: 0 0 16px; }
/* SwitchBot の宣伝(全ページ共通・partials/sb_ad.html) */
.sb-ad { border: 1px solid var(--line, #ddd); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin: 24px 0; background: var(--soft); }
.sb-ad p { margin: 4px 0; }
.sb-ad-title { font-weight: 700; }
.toc { background: var(--soft); }
.toc ol, .toc ul { margin: 6px 0 0; padding-left: 1.4em; }
.toc li { margin: 2px 0; }
.toc a { text-decoration: none; display: inline-block; padding: 10px 0; }
.toc li { margin: 0; line-height: 1.5; }
.toc nav ol { list-style: decimal; }
.newtag { font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-s); padding: 6px 10px; }
h4 { font-size: 1rem; margin: 1.4em 0 .4em; }

/* ---- 購入カード(note の購入カードに相当: 製品画像・店・機種名・価格・行き先) ---- */
.buycards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.buycard {
  display: flex; gap: 12px; align-items: stretch; padding: 12px; min-height: 44px;
  background: var(--surface); color: var(--fg); text-decoration: none;
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius);
}
.buycard:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.buycard-rakuten { border-left-color: var(--rakuten); }
.buycard-rakuten:hover { border-color: var(--rakuten); }
.buycard-img { flex: 0 0 96px; width: 96px; height: 72px; object-fit: contain; background: #fff; border-radius: var(--radius-s); border: 1px solid var(--line); }
.buycard-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buycard-store { font-size: 12px; font-weight: 700; color: var(--muted); }
.buycard-name { font-weight: 700; line-height: 1.4; }
.buycard-price { font-weight: 700; color: var(--ok); }
.buycard-price small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
.buycard-cta { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--accent); }
.buycard-rakuten .buycard-cta { color: var(--rakuten); }
.buycard-yahoo { border-left-color: var(--yahoo); }
.buycard-yahoo:hover { border-color: var(--yahoo); }
.buycard-yahoo .buycard-cta { color: var(--yahoo); }

/* ---- 表(記事の表と比較表で同じ見た目) ---- */
.content table { border-collapse: collapse; margin: 0; font-size: 14px; }
/* 記事の表: 枠の中で横スクロール(ページ全体は動かさない)。列が細くなりすぎて 1 文字ずつ折れないよう最小幅を持たせる */
.table-scroll { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch; }
.table-scroll table { width: 100%; }
.content th, .content td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; min-width: 4.5em; }
.content td a { word-break: keep-all; }
.content th { background: var(--soft-2); font-weight: 700; }

/* ---- 動画: 押すまでは画像だけ ---- */
a.yt { position: relative; display: block; max-width: 560px; margin: 16px 0; color: var(--fg); text-decoration: none; }
a.yt img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
a.yt .play { position: absolute; left: 50%; top: calc(50% - 14px); width: 64px; height: 44px; margin-left: -32px; margin-top: -22px; background: rgba(0,0,0,.72); border-radius: 12px; }
a.yt .play::after { content: ""; position: absolute; left: 26px; top: 12px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
a.yt .yt-title { display: block; font-size: 13px; color: var(--muted); padding-top: 4px; }
.content iframe { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); margin: 16px 0; }

/* ---- 一覧・トップ ---- */
.post-list { list-style: none; padding: 0; margin: 8px 0; }
.post-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.post-list li a { display: block; padding: 10px 0; min-height: 44px; }
.post-list time { color: var(--muted); font-size: 13px; white-space: nowrap; }
.post-list.compact li a { padding: 8px 0; }
.hero { padding: 20px 0 8px; }
.hero-lead { font-size: 1.35rem; margin: 0; color: var(--fg); }
.hero p, .lead { color: var(--muted); margin: 0 0 16px; }
.feature {
  display: block; margin: 8px 0 32px; padding: 20px; border: 1px solid var(--line); border-left: 6px solid var(--accent);
  border-radius: var(--radius); background: var(--accent-soft); color: var(--fg); text-decoration: none;
}
.feature:hover { border-color: var(--accent); }
.feature-label { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent-fg); background: var(--accent); border-radius: 4px; padding: 0 8px; }
.feature-title { display: block; font-size: 1.2rem; font-weight: 700; margin: 6px 0 4px; line-height: 1.5; }
.feature-desc { display: block; font-size: 14px; color: var(--muted); }
.block { margin: 32px 0; }
.block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; border-bottom: 1px solid var(--line); }
.block-head h2 { margin: 0 0 6px; }
.block-head a { font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 16px 0; }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--fg); text-decoration: none; background: var(--surface); }
.card:hover { border-color: var(--accent); }
.card img, .card-noimg { display: block; width: 100%; height: auto; aspect-ratio: 640 / 336; object-fit: cover; background: var(--soft); }
.card-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.card-title { font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card time { font-size: 12px; color: var(--muted); }
.series { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; margin: 16px 0; }
.series-col h2, .series-col h3 { font-size: 1rem; margin: 0 0 4px; border: 0; padding: 0; }
.series-col h2 a, .series-col h3 a { color: var(--fg); text-decoration: none; }
.block-head a, .series-col h2 a, .series-col h3 a, .cmp-partslink a { display: inline-flex; align-items: center; min-height: 44px; }
.more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

/* ==== 比較表(動きはそのまま・見た目だけ共通に) ==== */
.cmp-hero { padding: 8px 0 4px; }
.cmp-hero h1 { margin: 0 0 4px; }
.cmp-hero p { margin: 2px 0; color: var(--muted); }
.cmp-hero p strong { color: var(--fg); }
.minipc-fetched-at { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
/* CPU の選択(タブ) */
/* 元のページと同じく「1 行に 1 CPU・棒は横幅いっぱい」の縦のランキング(タイルにしない) */
.cpu-tabs { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 16px 0 28px; }
/* 元の HTML では広告の断り書きと取得日時がタブの並びの中にあるので、1 行を丸ごと使わせる */
.cpu-tabs > :not(.cpu-tab-btn) { grid-column: 1 / -1; margin: 0; }
.cpu-stat p, .cpu-head p { margin: 0; }
.cpu-tab-btn { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; scroll-margin-top: 90px; }
.cpu-tab-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.cpu-tab-link { display: block; color: inherit; text-decoration: none; }
.cpu-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: .95rem; }
.cpu-name { flex: 1; }
.benchmark-score { font-weight: 700; color: var(--accent); }
.gpu-info-link { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); text-decoration: none; }
.bar-track { width: 100%; height: 14px; background: var(--soft-2); border-radius: 999px; overflow: hidden; }
.bar { height: 100%; border-radius: 999px; }
.bar-green { background: var(--bar-green); }
.bar-amber { background: var(--bar-amber); }
.bar-red { background: var(--bar-red); }
.bar-blue { background: var(--bar-blue); }
/* CPU ごとの節 */
.cpu-section { margin-bottom: 36px; scroll-margin-top: 16px; }
.cpu-head { background: var(--soft); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.cpu-head-link { text-decoration: none; color: inherit; display: inline-block; }
.cpu-head-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.content .cpu-section h3.cpu-section-title { margin: 2px 0 0; font-size: 1.35rem; color: var(--fg); }
.cpu-head-up { font-size: .7em; color: var(--muted); margin-left: 6px; }
.cpu-head-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.cpu-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 12px; }
.cpu-stat-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cpu-stat-value { display: block; font-size: 1.5rem; font-weight: 800; color: var(--accent); text-decoration: none; }
.cpu-stat.gpu .cpu-stat-value { color: var(--ok); }
.cpu-stat-name { display: block; font-weight: 700; color: var(--fg); text-decoration: none; line-height: 1.4; }
/* 比較の表 */
.minipc-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.content .comparison-table { width: 100%; margin: 0; font-size: 14px; }
.content .comparison-table th, .content .comparison-table td { text-align: center; vertical-align: middle; padding: 10px; }
.content .comparison-table tr > :first-child { border-left: 0; }
.content .comparison-table tr > :last-child { border-right: 0; }
.content .comparison-table thead th { border-top: 0; }
.content .comparison-table tbody tr:last-child td { border-bottom: 0; }
.config-cell { font-weight: 700; background: var(--soft-2); white-space: nowrap; }
.minisforum-cell { background: var(--mk-minisforum); }
.gmktec-cell { background: var(--mk-gmktec); }
.geekom-cell { background: var(--mk-geekom); }
.acemagic-cell { background: var(--mk-acemagic); }
.empty-cell { color: var(--muted); background: var(--surface); }
.content td.best-price { background: var(--ok-soft); box-shadow: inset 0 0 0 2px var(--ok); }
.best-cell { font-weight: 800; color: var(--ok); background: var(--ok-soft); white-space: nowrap; }
.product-name { font-weight: 600; margin-bottom: 4px; }
.cmp-flag { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--warn); }
.product-links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.product-link {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); text-decoration: none; font-size: 13px; min-height: 44px;
}
.product-link:hover { border-color: var(--accent); }
.product-link.rakuten-link { border-left-color: var(--rakuten); }
.product-link.yahoo-link { border-left-color: var(--yahoo); }
.price { font-weight: 700; }
.cmp-partslink { margin: 10px 0 4px; padding: 8px 12px; background: var(--soft); border: 1px dashed var(--line-strong); border-radius: var(--radius-s); text-align: center; font-size: 14px; }
.cmp-partslink a { font-weight: 700; text-decoration: none; }
.cmp-backtop { text-align: center; margin: 20px 0 12px; }
/* 増設パーツ */
.anchor { scroll-margin-top: 90px; }
.parts-h { margin-top: 20px; }
/* 元のページと同じく PC では 2 列 */
.parts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 640px) { .parts-grid { grid-template-columns: 1fr; } }
.minipc-part-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.part-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.part-name { font-weight: 700; }
.part-price { font-weight: 700; color: var(--ok); white-space: nowrap; }
.part-desc { color: var(--muted); font-size: 13px; }
/* ランキング・案内 */
.rank-block { margin: 32px 0; }
.rank-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; margin-bottom: 8px; }
.rank-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.rank-name { font-weight: 600; }
.rank-score { font-weight: 700; color: var(--accent); }
.rank-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }
.cmp-info-title { font-weight: 700; margin-bottom: 6px; }
.cmp-info-list { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.cmp-more { display: inline-block; margin-top: 8px; font-weight: 700; text-decoration: none; }
.cmp-foot-note { color: var(--muted); font-size: 13px; margin-top: 12px; }

/* ブログ(note から移した記事・2026-10-19) */
.content figure { margin: 16px 0; }
.content figure figcaption { font-size: 14px; color: var(--muted); margin-top: 4px; }
.content figure.audio audio { width: 100%; }
.content pre { overflow-x: auto; padding: 12px; background: var(--soft); border-radius: var(--radius); font-size: 14px; line-height: 1.6; }