/* =========================================================
   gpx-review.css — レビュー一覧ページ改善（賢威8子テーマ用）
   ヘッダーには一切手を加えません。
   配置先: /wp-content/themes/keni8-child/gpx-review.css（直下）
   読み込みは functions.php スニペットで tag(reviews) のみに制御
   ========================================================= */
/* 配色は既存のh2/h3カスタムCSS（アクセント#2563eb・文字#1f2937・罫線#e5e7eb）に統一 */
:root{
  --gpx-primary:#2563eb;
  --gpx-primary-dark:#1d4ed8;
  --gpx-primary-light:#f1f6ff;
  --gpx-ink:#1f2937;
  --gpx-ink-soft:#6b7280;
  --gpx-line:#e5e7eb;
  --gpx-good:#12a454;
  --gpx-mid:#9a6b00;
  --gpx-low:#d64545;
  --gpx-radius:12px;
  --gpx-shadow:0 1px 3px rgba(31,41,55,.08),0 4px 14px rgba(31,41,55,.06);
}

/* ===== 1. 目次（gpx-toc: HTMLごと差し替え。旧box_style_orangeは触らない）===== */
.gpx-toc{background:#fff;border:1px solid var(--gpx-line);
  border-radius:var(--gpx-radius);box-shadow:var(--gpx-shadow);
  padding:20px 24px;margin:0 0 24px}
.gpx-toc-title{font-size:14px;font-weight:700;color:var(--gpx-ink-soft);
  letter-spacing:.06em;margin-bottom:12px}
.gpx-toc ol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.gpx-toc li{margin:0}
.gpx-toc li a{display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-radius:8px;font-size:13.5px;font-weight:600;color:var(--gpx-ink);
  text-decoration:none}
.gpx-toc li a:hover{background:var(--gpx-primary-light);color:var(--gpx-primary)}
.gpx-toc .gpx-toc-n{width:22px;height:22px;border-radius:6px;
  background:var(--gpx-primary-light);color:var(--gpx-primary);
  font-size:11px;font-weight:800;display:grid;place-items:center;flex-shrink:0}
.gpx-toc .gpx-toc-sub{font-size:12px;color:var(--gpx-ink-soft);
  padding:0 12px 4px 44px}
@media(max-width:700px){.gpx-toc ol{grid-template-columns:1fr}}

/* ===== 1.5 テーマ出力の更新日・PR行を非表示（チップと重複するため）=====
   ※記事カード内の .entry_status には影響しない（直下のみ） */
body.tag-reviews .keni-section_wrap > .entry_status{display:none}

/* ===== 1.6 h2/h3 を記事本文型（下線＋青アクセントバー）に =====
   例: /choice/guide/goryousin/ と同じデザイン。
   アーカイブ用の「青帯＋薄青背景」ルールをこのページだけ上書き
   （body.tag-reviews.archive で特異性を上げて確実に勝たせる） */
body.tag-reviews.archive .keni-page-contents h2,
body.tag-reviews.archive .article-body h2{
  position:relative !important;
  margin:52px 0 22px !important;
  padding:0 0 12px !important;
  border:none !important;
  border-bottom:1px solid #e5e7eb !important;
  background:none !important;
  color:#1f2937 !important;
  font-size:1.85rem !important;
  font-weight:800 !important;
  line-height:1.5 !important;
  letter-spacing:.01em !important;
  box-shadow:none !important;
}
body.tag-reviews.archive .keni-page-contents h2::before,
body.tag-reviews.archive .article-body h2::before{
  content:none !important;
}
body.tag-reviews.archive .keni-page-contents h2::after,
body.tag-reviews.archive .article-body h2::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:-1px !important;
  width:56px !important;
  height:3px !important;
  background:#2563eb !important;
  border-radius:3px !important;
}
body.tag-reviews.archive .keni-page-contents h3,
body.tag-reviews.archive .article-body h3{
  margin:36px 0 18px !important;
  padding:0 0 10px !important;
  border-top:none !important;
  border-right:none !important;
  border-left:none !important;
  border-bottom:2px solid #e5e7eb !important;
  background:transparent !important;
  color:#1f2937 !important;
  font-size:1.55rem !important;
  font-weight:700 !important;
  line-height:1.5 !important;
  box-shadow:none !important;
}
/* カード系コンポーネント内のh3は見出しスタイルの対象外に戻す */
body.tag-reviews.archive .keni-page-contents .gpx-pick h3,
body.tag-reviews.archive .article-body .gpx-pick h3,
body.tag-reviews.archive .keni-page-contents .gpx-point h3,
body.tag-reviews.archive .article-body .gpx-point h3,
body.tag-reviews.archive .keni-page-contents .gpx-card h3,
body.tag-reviews.archive .article-body .gpx-card h3{
  margin:6px 0 2px !important;
  padding:0 !important;
  border:none !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.45 !important;
}
body.tag-reviews.archive .keni-page-contents .gpx-card h3,
body.tag-reviews.archive .article-body .gpx-card h3{
  margin:0 !important;font-size:13.5px !important;
}

/* ===== 2. 記事カード（entry-list_item）===== */
body.tag-reviews article.entry-list_item{
  border:1px solid var(--gpx-line);
  border-radius:var(--gpx-radius);
  box-shadow:var(--gpx-shadow);
  overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease;
  background:#fff;
}
body.tag-reviews article.entry-list_item:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(31,45,61,.12),0 10px 26px rgba(31,45,61,.10);
}
body.tag-reviews article.entry-list_item .entry_thumb img{
  border-radius:8px;
}
body.tag-reviews article.entry-list_item h2.entry_title a{
  color:var(--gpx-ink);
}
body.tag-reviews article.entry-list_item h2.entry_title a:hover{
  color:var(--gpx-primary);
}
/* 「続きを読む」: グレー→プライマリボタンに */
body.tag-reviews .ently_read-more a.btn{
  background:var(--gpx-primary);
  border:none;color:#fff;font-weight:700;
  border-radius:8px;padding:10px 24px;
  transition:background .12s;
}
body.tag-reviews .ently_read-more a.btn:hover{
  background:var(--gpx-primary-dark);color:#fff;
}
body.tag-reviews .ently_read-more a.btn .icon_arrow_s_right{color:#fff}

/* ===== 3. 一覧表（TablePress）ヘッダーとコスパバッジ ===== */
body.tag-reviews .tablepress thead th{
  background:var(--gpx-primary-light);
  color:var(--gpx-primary-dark);
  font-size:12px;letter-spacing:.03em;
}
body.tag-reviews .tablepress tbody tr:hover td{background:#f7fafd}
/* JSが付与するコスパバッジ */
.gpx-cospa{display:inline-block;font-weight:800;font-size:12.5px;
  padding:2px 10px;border-radius:7px;line-height:1.6}
.gpx-cospa.gpx-s{background:#e5f7ed;color:var(--gpx-good)}
.gpx-cospa.gpx-a{background:#fff4d6;color:var(--gpx-mid)}
.gpx-cospa.gpx-b{background:#fdeaea;color:var(--gpx-low)}
/* 実機レビュー/スペック評価バッジ */
.gpx-badge{display:inline-block;font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:5px;white-space:nowrap}
.gpx-badge.gpx-review{background:#e5f7ed;color:var(--gpx-good)}
.gpx-badge.gpx-spec{background:#eef1f5;color:var(--gpx-ink-soft)}

/* ===== 4. フィルタチップ＋表示切替（JSが挿入するUI）===== */
.gpx-tools{background:#fff;border:1px solid var(--gpx-line);
  border-radius:var(--gpx-radius);box-shadow:var(--gpx-shadow);
  padding:14px 16px;margin:0 0 16px}
.gpx-tool-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gpx-tool-row + .gpx-tool-row{margin-top:10px}
.gpx-tool-label{font-size:11.5px;font-weight:700;color:var(--gpx-ink-soft);
  width:64px;flex-shrink:0}
.gpx-chip{font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:99px;
  border:1.5px solid var(--gpx-line);background:#fff;color:var(--gpx-ink-soft);
  cursor:pointer;transition:.12s}
.gpx-chip:hover{border-color:var(--gpx-primary);color:var(--gpx-primary)}
.gpx-chip.on{background:var(--gpx-primary);border-color:var(--gpx-primary);color:#fff}
.gpx-tool-end{margin-left:auto;display:flex;gap:8px;align-items:center}
/* CPU/GPU型番プルダウン */
.gpx-select{font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:8px;
  border:1.5px solid var(--gpx-line);background:#fff;color:var(--gpx-ink-soft);
  cursor:pointer;max-width:220px}
.gpx-select:hover,.gpx-select:focus{border-color:var(--gpx-primary);
  color:var(--gpx-primary);outline:none}
.gpx-vtoggle{display:flex;border:1.5px solid var(--gpx-line);border-radius:8px;overflow:hidden}
.gpx-vtoggle button{border:none;background:#fff;padding:6px 14px;font-size:12px;
  font-weight:700;color:var(--gpx-ink-soft);cursor:pointer}
.gpx-vtoggle button.on{background:var(--gpx-primary);color:#fff}
.gpx-count{font-size:12px;color:var(--gpx-ink-soft);margin:0 0 10px 2px}
.gpx-count b{color:var(--gpx-primary);font-size:14px}

/* ===== 5. カード表示（JS生成）===== */
.gpx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.gpx-card{background:#fff;border:1px solid var(--gpx-line);
  border-radius:var(--gpx-radius);padding:16px;box-shadow:var(--gpx-shadow);
  display:flex;flex-direction:column;gap:8px;transition:transform .12s}
.gpx-card:hover{transform:translateY(-2px)}
.gpx-card .gpx-top{display:flex;gap:12px;align-items:center}
.gpx-card .gpx-thumb{width:52px;height:64px;border-radius:8px;flex-shrink:0;
  background:#f0f4f9;display:grid;place-items:center;overflow:hidden}
.gpx-card .gpx-thumb img{width:100%;height:100%;object-fit:contain}
.gpx-card h3{font-size:13.5px;line-height:1.45;margin:0}
.gpx-card .gpx-maker-line{font-size:11px;color:var(--gpx-ink-soft);margin-top:2px}
/* タイトルはリンクだと分かるよう青＋ホバーで下線 */
.gpx-card h3 a{color:var(--gpx-primary);text-decoration:none;font-weight:700}
.gpx-card h3 a:hover{color:var(--gpx-primary-dark);text-decoration:underline}
.gpx-card .gpx-specs{display:flex;flex-wrap:wrap;gap:5px}
.gpx-spec-tag{font-size:10.5px;font-weight:600;background:#f0f4f9;
  color:var(--gpx-ink-soft);padding:2px 8px;border-radius:5px}
.gpx-card .gpx-bottom{display:flex;align-items:flex-end;justify-content:space-between;
  margin-top:auto;padding-top:6px;border-top:1px dashed var(--gpx-line)}
.gpx-card .gpx-price{font-size:17px;font-weight:800;color:var(--gpx-ink)}
.gpx-card .gpx-price small{font-size:10.5px;font-weight:600;color:var(--gpx-ink-soft)}
.gpx-card .gpx-date{font-size:10.5px;color:var(--gpx-ink-soft)}
.gpx-card .gpx-date.gpx-fresh{color:var(--gpx-good);font-weight:700}
/* カード内アクションボタン（詳細レビュー / 公式サイト） */
.gpx-actions{display:flex;gap:8px;margin-top:8px}
.gpx-btn{flex:1;text-align:center;font-size:12px;font-weight:700;
  padding:8px 6px;border-radius:8px;text-decoration:none;transition:.12s;
  line-height:1.4;white-space:nowrap}
.gpx-btn-detail{background:var(--gpx-primary);color:#fff}
.gpx-btn-detail:hover{background:var(--gpx-primary-dark);color:#fff;text-decoration:none}
.gpx-btn-official{background:#fff;color:var(--gpx-primary);
  border:1.5px solid var(--gpx-primary)}
.gpx-btn-official:hover{background:var(--gpx-primary-light);text-decoration:none}
.gpx-hidden{display:none!important}

/* ===== 6. 貼り付け用ブロック（イチオシ/こだわり/ナビ）===== */
.gpx-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0;
  align-items:stretch}
.gpx-pick{background:#fff;border:1px solid var(--gpx-line);border-radius:var(--gpx-radius);
  padding:20px 18px 16px;box-shadow:var(--gpx-shadow);position:relative;
  display:flex;flex-direction:column;gap:6px}
.gpx-pick .gpx-rank{position:absolute;top:-11px;left:14px;background:var(--gpx-primary);
  color:#fff;font-size:11px;font-weight:800;padding:3px 12px;border-radius:99px;
  line-height:1.6;white-space:nowrap}
.gpx-pick .gpx-rank.gpx-gold{background:#d99a06}
.gpx-pick h3{font-size:15px;margin:6px 0 0}
.gpx-pick h3 a{color:var(--gpx-ink);text-decoration:none}
.gpx-pick h3 a:hover{color:var(--gpx-primary);text-decoration:underline}
.gpx-pick .gpx-maker{font-size:11.5px;color:var(--gpx-ink-soft);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gpx-pick .gpx-score{font-size:24px;font-weight:800;color:var(--gpx-good);
  line-height:1.2;margin:2px 0}
.gpx-pick .gpx-score small{font-size:12px;color:var(--gpx-ink-soft);font-weight:600}
.gpx-pick .gpx-spec-line{font-size:12.5px;color:var(--gpx-ink-soft);line-height:1.6}
.gpx-pick .gpx-price{font-size:18px;font-weight:800;margin-top:4px}
/* ボタンは常にカード最下部に揃える */
.gpx-pick .gpx-actions{margin-top:auto;padding-top:12px}
/* wpautop対策（カード内の余計な p / br を無効化） */
.gpx-pick p:empty,.gpx-pick > br{display:none}

.gpx-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.gpx-point{background:#fff;border:1px solid var(--gpx-line);
  border-radius:var(--gpx-radius);padding:22px;box-shadow:var(--gpx-shadow)}
.gpx-point .gpx-ico{width:44px;height:44px;border-radius:12px;
  background:var(--gpx-primary-light);display:grid;place-items:center;
  font-size:22px;margin-bottom:12px}
.gpx-point h3{font-size:15px;margin:0 0 8px}
.gpx-point p{font-size:13px;color:var(--gpx-ink-soft);margin:0}

.gpx-navgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}
.gpx-navgrid a{background:#fff;border:1px solid var(--gpx-line);
  border-radius:var(--gpx-radius);padding:18px 14px;text-align:center;
  box-shadow:var(--gpx-shadow);font-size:13px;font-weight:700;color:var(--gpx-ink);
  display:grid;gap:8px;justify-items:center;text-decoration:none;transition:.12s}
.gpx-navgrid a:hover{border-color:var(--gpx-primary);color:var(--gpx-primary);
  transform:translateY(-2px)}
.gpx-navgrid .gpx-gi{width:42px;height:42px;border-radius:11px;
  background:var(--gpx-primary-light);display:grid;place-items:center;font-size:21px}

/* ===== 6.5 ヒーローセクション ===== */
/* 既存h1（グレー帯）をヒーロー風の大見出しに再スタイル */
body.tag-reviews .archive_title_wrap{
  background:none;border:none;box-shadow:none;padding:8px 0 0;margin-bottom:0;
}
body.tag-reviews h1.archive_title{
  font-size:26px;line-height:1.4;color:var(--gpx-ink);
  background:none;border:none;padding:0;
}
/* チップ行 */
.gpx-hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.gpx-hero-chips .gpx-hchip{display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px;
  background:var(--gpx-primary-light);color:var(--gpx-primary-dark);text-decoration:none}
.gpx-hero-chips .gpx-hchip.gpx-gray{background:#eef1f5;color:var(--gpx-ink-soft);font-weight:600}
/* 2カラム: 左=リード文 右=検証機写真 */
.gpx-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;
  align-items:center;margin:4px 0 24px}
.gpx-hero .gpx-hero-lead{font-size:14.5px;color:var(--gpx-ink-soft)}
.gpx-hero .gpx-hero-lead b{color:var(--gpx-ink)}
.gpx-hero figure.gpx-hero-visual{margin:0;border-radius:var(--gpx-radius);
  overflow:hidden;box-shadow:var(--gpx-shadow);position:relative}
.gpx-hero figure.gpx-hero-visual img{display:block;width:100%;height:auto}
.gpx-hero figure.gpx-hero-visual figcaption{position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(31,45,61,.72));color:#fff;
  font-size:12px;padding:26px 14px 10px}
@media(max-width:860px){
  .gpx-hero{grid-template-columns:1fr;gap:16px}
  body.tag-reviews h1.archive_title{font-size:21px}
}

/* ===== 7. 導入文「続きを読む」=====
   ボタンはJSが自動挿入。.gpx-more は <p class="gpx-more"> でもOK */
.gpx-more{display:none}
.gpx-more.open{display:block}
.gpx-more-btn{display:inline-block;margin:8px 0;font-size:13px;font-weight:700;
  color:var(--gpx-primary);cursor:pointer}

/* ===== 8. WordPress自動整形（wpautop）対策 =====
   タグ説明文に挿入される余計な <br> と空の <p> を無効化 */
.gpx-toc br,
.gpx-toc p:empty,
.gpx-hero-chips br,
.gpx-hero p:empty,
.gpx-picks br,.gpx-picks p:empty,
.gpx-points br,.gpx-points p:empty,
.gpx-navgrid br,.gpx-navgrid p:empty{display:none}

/* ===== レスポンシブ ===== */
@media(max-width:860px){
  .gpx-grid,.gpx-picks,.gpx-points{grid-template-columns:1fr 1fr}
  .gpx-navgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .gpx-grid,.gpx-picks,.gpx-points{grid-template-columns:1fr}
  .gpx-tool-end{margin-left:0}
}