/* =========================================
  vape-navi.com 恒常化ベースCSS（THE THOR上書き）
  - 本文: 12px
  - h2: 18px / h3: 15.6px / h4: 13.8px
  - セクション運用前提（<section>でパート区切り）
  - 余白は article / section / p の3段で管理
========================================= */

/* 本文基準（12px） */
body {
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
  color: #333 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 本文コンテンツの器（中央寄せ＋上下余白） */
article, .entry-content, .post-content {
  max-width: 720px;
  margin: 80px auto !important;    /* 上下80px */
  padding: 0 16px;                 /* 横の安全余白 */
  box-sizing: border-box;
}

/* セクション間マージン（パート間の呼吸） */
section {
  margin: 50px 0 !important;       /* 上下50px */
}

/* 見出し（h1は使用禁止方針） */
h2, h3, h4 {
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #222 !important;
  margin: 0 0 18px !important;     /* 下にだけ余白 */
}

/* h2: 18px（本文12pxの1.5倍） */
h2 {
  font-size: 1.5rem !important;    /* 18px */
  border-left: 4px solid #1e88e5;
  padding-left: 8px;
  margin-top: 40px !important;
}

/* h3: 15.6px */
h3 {
  font-size: 1.3rem !important;    /* 15.6px */
  border-left: 3px solid #90caf9;
  padding-left: 6px;
  margin-top: 30px !important;
}

/* h4: 13.8px */
h4 {
  font-size: 1.15rem !important;   /* 13.8px */
  color: #444 !important;
  margin-top: 22px !important;
}

/* 段落の行間とマージン（本文の呼吸） */
p {
  margin: 1.2em 0 !important;      /* 上下均等 */
  line-height: 1.9 !important;
}

/* リスト（THE THORの余白強制を抑える） */
ul, ol {
  margin: 1em 0 1em 1.6em !important;
  padding: 0 !important;
}
li { margin: 0.4em 0 !important; }

/* 画像の基本（はみ出し防止） */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 強調装飾ルール（恒常化：赤太字／黄マーカー） */
strong.attn, .attn strong, .attn {
  color: #d32f2f !important;
  font-weight: 700 !important;
}
mark.highlight {
  background: linear-gradient(transparent 60%, #fff176 60%) !important;
  font-weight: 700 !important;
}

/* この記事でわかること：.toc-box */
.toc-box {
  background: #f8fafc !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin: 24px 0 !important;
}
.toc-box ul, .toc-box ol {
  margin: 0.6em 0 0.6em 1.2em !important;
}

/* FAQボックス（.toc-box-blue） */
.toc-box-blue {
  background: #eef6ff !important;
  border: 2px solid #cfe3ff !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin: 24px 0 !important;
}

/* CTAボックス中央寄せ */
.cta-box.center {
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}
.cta-box.center > * {
  display: inline-block !important;
  text-align: left;
}

/* THE THOR 強制上書き回避 */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: unset !important;
  margin-bottom: unset !important;
}
.entry-content h2 { margin: 40px 0 18px !important; }
.entry-content h3 { margin: 30px 0 18px !important; }
.entry-content h4 { margin: 22px 0 14px !important; }

/* スマホ最適化（～768px） */
@media (max-width: 768px) {
  article, .entry-content, .post-content {
    margin: 60px auto !important;
    padding: 0 14px;
  }
  section { margin: 35px 0 !important; }
  h2 { font-size: 1.35rem !important; }  /* 約16.2px */
  h3 { font-size: 1.2rem !important; }   /* 約14.4px */
  h4 { font-size: 1.05rem !important; }  /* 約12.6px */
  p  { line-height: 1.85 !important; }
}

/* リード文 */
.lead {
  font-size: 13.5px !important;
  line-height: 1.9 !important;
  margin: 0.8em 0 1.4em !important;
}
/* ======================================================
   追加：テーブル／アラート／引用／ボタン／印刷 最適化
   （vape-navi.com 恒常デザイン拡張）
====================================================== */

/* === 比較テーブル（semantic: <table class="table-compare">） === */
.table-compare {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
  table-layout: fixed !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.table-compare th,
.table-compare td {
  border-bottom: 1px solid #eef2f7 !important;
  padding: 10px !important;
  vertical-align: middle !important;
  word-break: break-word !important;
}
.table-compare thead th {
  background: #f5f9ff !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  text-align: left !important;
}
.table-compare tbody tr:nth-child(even) td { background: #fafcff !important; }
.table-compare .ok { color: #1e88e5 !important; font-weight: 700 !important; }
.table-compare .ng { color: #d32f2f !important; font-weight: 700 !important; }

/* SP横スクロール（意味のあるラッパーだけ使用：<section class="table-wrap">） */
.table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.table-wrap .table-compare { min-width: 640px !important; }

/* === 情報ボックス（semantic: <aside class="alert alert-info"> 等） === */
.alert {
  border: 1px solid #e2e8f0 !important;
  border-left-width: 4px !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 20px 0 !important;
  background: #fff !important;
}
.alert p { margin: .6em 0 !important; }
.alert-info   { border-left-color: #1e88e5 !important; background: #f5f9ff !important; }
.alert-success{ border-left-color: #2e7d32 !important; background: #f3fbf5 !important; }
.alert-warn   { border-left-color: #f9a825 !important; background: #fff9e6 !important; }
.alert-danger { border-left-color: #d32f2f !important; background: #fff5f5 !important; }

/* 強調テキスト（恒常ルール踏襲） */
.alert .attn strong,
.alert strong.attn { color:#d32f2f !important; font-weight:700 !important; }
.alert mark.highlight { background: linear-gradient(transparent 60%, #fff176 60%) !important; font-weight:700 !important; }

/* === 引用（semantic: <blockquote class="q">） === */
blockquote.q {
  border-left: 4px solid #90caf9 !important;
  background: #f8fbff !important;
  margin: 18px 0 !important;
  padding: 10px 14px !important;
  color: #374151 !important;
  border-radius: 6px !important;
}
blockquote.q cite {
  display:block !important;
  margin-top:.6em !important;
  font-size: 11px !important;
  color:#64748b !important;
}

/* === ボタン（semantic: <a class="btn btn-primary">） === */
.btn {
  display: inline-block !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: 1px solid transparent !important;
  transition: transform .04s ease, box-shadow .2s ease !important;
}
.btn:active { transform: translateY(1px) !important; }

/* メイン（CTA想定） */
.btn-primary {
  background: #1e88e5 !important;
  color: #fff !important;
  border-color: #1e88e5 !important;
  box-shadow: 0 2px 6px rgba(30,136,229,.18) !important;
}
.btn-primary:hover { filter: brightness(1.05) !important; }

/* サブ（アウトライン） */
.btn-outline {
  background: #fff !important;
  color: #1e88e5 !important;
  border-color: #90caf9 !important;
}
.btn-outline:hover { background:#f5f9ff !important; }

/* 幅ユーティリティ */
.btn.block { display:block !important; width:100% !important; text-align:center !important; }

/* CTAボックスとの組み合わせ（既存 .cta-box.center を補完） */
.cta-box.center .btn { margin: 6px 8px !important; }

/* === リスト強調（semantic: <ul class="list-check">） === */
.list-check { list-style: none !important; margin: 1em 0 1em 0 !important; padding:0 !important; }
.list-check li {
  position: relative !important;
  padding-left: 1.2em !important;
  margin: .45em 0 !important;
}
.list-check li::before {
  content: "✔" !important;
  position: absolute !important;
  left: 0 !important; top: .05em !important;
  color: #1e88e5 !important;
  font-weight: 700 !important;
}

/* === FAQ（.toc-box-blue の中で Q/A を見やすく） === */
.toc-box-blue dl { margin: 0 !important; }
.toc-box-blue dt {
  font-weight:700 !important; color:#1e293b !important;
  margin: .6em 0 .2em !important;
}
.toc-box-blue dd { margin: 0 0 .8em 0 !important; }

/* === バッジ（semantic: <span class="badge badge-new">） === */
.badge {
  display:inline-block !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  vertical-align: baseline !important;
}
.badge-new    { background:#e3f2fd !important; color:#1e88e5 !important; }
.badge-hot    { background:#ffebee !important; color:#d32f2f !important; }
.badge-neutral{ background:#eef2f7 !important; color:#475569 !important; }

/* === 画像キャプション（semantic: <figure><img><figcaption>） === */
figure { margin: 16px 0 !important; }
figcaption {
  font-size: 11px !important;
  color:#64748b !important;
  text-align: center !important;
  margin-top: 6px !important;
}

/* === 印刷最適化（@media print） === */
@media print {
  body { color:#000 !important; font-size: 12px !important; line-height:1.6 !important; }
  a { color:#000 !important; text-decoration: none !important; }
  header, footer, nav, .sidebar, .widget, .ad, .adsbygoogle { display:none !important; }
  article, .entry-content, .post-content { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .btn { border:1px solid #000 !important; background:#fff !important; color:#000 !important; box-shadow:none !important; }
  .table-wrap { overflow: visible !important; }
}
/* ======================================================
   追加フルセット：カードUI／比較カード／価格テーブル／
   レーティング／長所短所リスト／タグ／バッジ／グリッド
====================================================== */

/* === カードグリッド（semantic: <section class="grid-cards"><article class="card">…） === */
.grid-cards {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 16px !important;
  margin: 24px 0 !important;
}
.grid-cards .col-12 { grid-column: span 12 !important; }
.grid-cards .col-6  { grid-column: span 6 !important; }
.grid-cards .col-4  { grid-column: span 4 !important; }
.grid-cards .col-3  { grid-column: span 3 !important; }

@media (max-width: 1024px) {
  .grid-cards .col-3 { grid-column: span 4 !important; }
}
@media (max-width: 768px) {
  .grid-cards { grid-template-columns: repeat(6, 1fr) !important; gap: 12px !important; }
  .grid-cards .col-6, .grid-cards .col-4, .grid-cards .col-3 { grid-column: span 6 !important; }
}

/* === 汎用カード（semantic: <article class="card">） === */
.card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.04) !important;
  transition: box-shadow .2s ease, transform .06s ease !important;
}
.card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08) !important; transform: translateY(-1px) !important; }
.card header { margin-bottom: 10px !important; }
.card h3 { margin: 0 0 8px !important; border: 0 !important; padding: 0 !important; }
.card figure { margin: 0 0 10px !important; }
.card figure img { width: 100% !important; height: auto !important; border-radius: 10px !important; }
.card .meta { font-size: 11px !important; color:#64748b !important; margin-top: 6px !important; }
.card .tags { margin-top: 8px !important; }

/* === 商品カード（semantic: <article class="card product">） === */
.card.product .price { font-weight: 700 !important; font-size: 14px !important; color:#1e293b !important; }
.card.product .price .yen { font-size: 12px !important; opacity:.85 !important; }
.card.product .features { margin: 8px 0 !important; }
.card.product .features li { margin: .3em 0 !important; }

/* === レーティング（CSSのみ／semantic: <div class="rating" data-score="3.5">） === */
.rating {
  --star: "★"; --star-size: 14px; --gap: 2px;
  display: inline-grid !important; grid-auto-flow: column !important; gap: var(--gap) !important;
  font-size: var(--star-size) !important; line-height: 1 !important;
}
.rating::before {
  content:"★★★★★" !important; color:#e2e8f0 !important;
}
.rating::after {
  content:"★★★★★" !important;
  color:#f59e0b !important;
  width: calc((attr(data-score number) / 5) * 100%) !important;
  overflow: hidden !important;
  position: relative !important; left: calc(-5ch - (4 * var(--gap))) !important; /* 5個ぶん左へ */
  letter-spacing: normal !important;
}

/* Fallback（attr()非対応が万一あってもサイズ維持） */
@supports not (width: calc((attr(data-score number) / 5) * 100%)) {
  .rating::after { display:none !important; }
}

/* === 価格テーブル（semantic: <table class="price-table">） === */
.price-table {
  width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
  border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important;
  background: #fff !important; table-layout: fixed !important;
}
.price-table thead th {
  background: #f5f9ff !important; color:#1e293b !important; text-align: left !important;
  padding: 12px !important; font-weight: 700 !important; border-bottom: 1px solid #e6eef8 !important;
}
.price-table td, .price-table th { padding: 12px !important; border-bottom: 1px solid #f1f5f9 !important; }
.price-table tbody tr:nth-child(even) td { background: #fafcff !important; }
.price-table .col-price { width: 120px !important; white-space: nowrap !important; }
.price-table .price { font-weight: 800 !important; color:#0f172a !important; }
.price-table .note { font-size: 11px !important; color:#64748b !important; }

/* SPスクロール（semantic: <section class="table-wrap">） */
.table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling: touch !important; }
.table-wrap .price-table { min-width: 680px !important; }

/* === 比較カード（2～3列比較／semantic: <section class="compare-cards">） === */
.compare-cards { display:grid !important; grid-template-columns: repeat(3,1fr) !important; gap:16px !important; }
@media (max-width: 1024px){ .compare-cards { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 768px){ .compare-cards { grid-template-columns: 1fr !important; } }
.compare-cards .card { padding: 16px !important; }
.compare-cards .card .title { font-weight: 700 !important; margin-bottom: 6px !important; }
.compare-cards .card .good { color:#2e7d32 !important; font-weight:700 !important; }
.compare-cards .card .bad  { color:#d32f2f !important; font-weight:700 !important; }

/* === 長所・短所リスト（semantic: <ul class="pros"> / <ul class="cons">） === */
.pros, .cons { list-style: none !important; margin: .6em 0 !important; padding:0 !important; }
.pros li, .cons li { position:relative !important; padding-left:1.2em !important; margin:.35em 0 !important; }
.pros li::before {
  content: "＋" !important; position:absolute !important; left:0 !important; top:.02em !important;
  color:#2e7d32 !important; font-weight:700 !important;
}
.cons li::before {
  content: "－" !important; position:absolute !important; left:0 !important; top:.02em !important;
  color:#d32f2f !important; font-weight:700 !important;
}

/* === タグ（semantic: <ul class="tags"><li>使い捨て</li>…） === */
.tags { list-style:none !important; display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin: 8px 0 0 0 !important; padding:0 !important; }
.tags li {
  padding: 3px 8px !important; border:1px solid #e2e8f0 !important; border-radius:999px !important;
  font-size: 11px !important; color:#475569 !important; background:#fff !important;
}

/* === ステータス・バッジ（既存 .badge 系の拡張） === */
.badge-rating { background:#fff3e0 !important; color:#f57c00 !important; }
.badge-sale   { background:#e8f5e9 !important; color:#2e7d32 !important; }
.badge-limit  { background:#ffebee !important; color:#c62828 !important; }

/* === ミニアイコン付き行（semantic: <ul class="list-ico">） === */
.list-ico { list-style:none !important; margin:.6em 0 !important; padding:0 !important; }
.list-ico li { display:flex !important; align-items:flex-start !important; gap:8px !important; margin:.35em 0 !important; }
.list-ico li .ico { width:18px !important; height:18px !important; flex:0 0 18px !important; opacity:.9 !important; }

/* === ヒーロー情報行（価格・在庫・発送など） === */
.meta-row { display:flex !important; flex-wrap:wrap !important; gap:10px 14px !important; align-items:center !important; margin:8px 0 !important; }
.meta-row .kv { font-size: 12px !important; color:#475569 !important; }
.meta-row .kv .k { color:#64748b !important; margin-right:4px !important; }
.meta-row .kv .v { font-weight:700 !important; color:#0f172a !important; }

/* === 見出しに小バッジ（semantic: <h3><span class="badge badge-new">New</span></h3>） === */
h2 .badge, h3 .badge, h4 .badge { margin-left: 6px !important; vertical-align: middle !important; }

/* === 余白ユーティリティ（最小限） === */
.mt-0{margin-top:0 !important;} .mt-4{margin-top:4px !important;} .mt-8{margin-top:8px !important;} .mt-12{margin-top:12px !important;}
.mb-0{margin-bottom:0 !important;} .mb-4{margin-bottom:4px !important;} .mb-8{margin-bottom:8px !important;} .mb-12{margin-bottom:12px !important;}
.px-8{padding-left:8px !important; padding-right:8px !important;} .py-8{padding-top:8px !important; padding-bottom:8px !important;}
/* 目次共通リセット（Easy Table of Contents / THE THOR） */
.ez-toc-container,
.toc_widget_list,
.toc_list {
  font-size: 12px !important;
  line-height: 1.8 !important;
}

.ez-toc-container .ez-toc-title,
.toc_widget_list .toc_title,
.toc_list .toc_title {
  margin: 0 0 8px !important;
}

/* 行間とインデントを安定化 */
.ez-toc-container ul,
.ez-toc-container ol,
.toc_widget_list ul,
.toc_widget_list ol,
.toc_list ul,
.toc_list ol {
  margin: 0.4em 0 0.4em 1.4em !important;
  padding: 0 !important;
}

/* リンクの重なり防止（アイコンや番号とテキストが被るのを回避） */
.ez-toc-container .ez-toc-list li a,
.toc_widget_list li a,
.toc_list li a {
  display: inline-block !important;
  padding-left: 0 !important;
  background: none !important;
  line-height: 1.8 !important;
  position: static !important; /* position指定でのズレを無効化 */
  text-decoration: none !important;
}

/* ネスト時の詰まり防止 */
.ez-toc-container ul ul,
.toc_widget_list ul ul,
.toc_list ul ul {
  margin-left: 1.2em !important;
}

/* 目次内の独自装飾を抑制（バッジ・リスト装飾が干渉しないように） */
.ez-toc-container .badge,
.ez-toc-container .list-check li::before,
.ez-toc-container .pros li::before,
.ez-toc-container .cons li::before {
  content: none !important;
}
/* ===== 目次のアイコン・番号の被りを完全リセット（EZ-TOC/TOP/THOR対応） ===== */
.ez-toc-container,
#toc_container,
.toc_list,
.toc_widget_list { position: relative !important; font-size: 12px !important; line-height: 1.8 !important; }

/* 目次内の疑似要素・背景アイコンを全部無効化 */
.ez-toc-container *::before,
.ez-toc-container *::after,
#toc_container *::before,
#toc_container *::after,
.toc_list *::before,
.toc_list *::after,
.toc_widget_list *::before,
.toc_widget_list *::after { content: none !important; background: none !important; }

/* リストの余白とインデントを明示。リンクはブロック化しない（重なり防止） */
.ez-toc-container ul,
.ez-toc-container ol,
#toc_container ul,
#toc_container ol,
.toc_list ul,
.toc_list ol,
.toc_widget_list ul,
.toc_widget_list ol { margin: .4em 0 .4em 1.4em !important; padding: 0 !important; list-style: none !important; }

.ez-toc-container li,
#toc_container li,
.toc_list li,
.toc_widget_list li { margin: .28em 0 !important; padding: 0 !important; position: static !important; }

.ez-toc-container li a,
#toc_container li a,
.toc_list li a,
.toc_widget_list li a {
  display: inline !important;      /* ← block/inline-blockを解除して重なり回避 */
  padding: 0 !important;
  background: none !important;
  position: static !important;
  text-decoration: none !important;
  line-height: 1.8 !important;
}

/* ネストの詰まり解消 */
.ez-toc-container ul ul,
#toc_container ul ul,
.toc_list ul ul,
.toc_widget_list ul ul { margin-left: 1.2em !important; }

/* タイトル周りの余白調整 */
.ez-toc-title, .toc_title { margin: 0 0 8px !important; }

/* 目次内ではサイト共通の装飾（バッジ/チェック記号など）を無効化 */
.ez-toc-container .badge,
.ez-toc-container .list-check li::before,
.ez-toc-container .pros li::before,
.ez-toc-container .cons li::before { content: none !important; }
/* ===== Hoverモーション強化 ===== */
.card{transition:box-shadow .25s ease, transform .08s ease !important}
.card:hover{box-shadow:0 10px 28px rgba(15,23,42,.14) !important; transform:translateY(-3px) !important}
.btn{transition:transform .06s ease, box-shadow .2s ease, filter .15s ease !important}
.btn:hover{filter:brightness(1.04) !important; box-shadow:0 4px 12px rgba(30,136,229,.22) !important}

/* ===== 価格表の“推し行”ハイライト ===== */
.price-table tbody tr.highlight td{background:#fff8e1 !important}
.price-table tbody tr.highlight .price{color:#f57c00 !important}

/* ===== 目次：折りたたみUI＋被り完全除去（EZ-TOC/THE THOR） ===== */
.ez-toc-container,#toc_container{border:1px solid #e2e8f0 !important; border-radius:10px !important; padding:12px !important}
.ez-toc-container *::before,.ez-toc-container *::after,#toc_container *::before,#toc_container *::after{content:none !important; background:none !important}
.ez-toc-container ul,.ez-toc-container ol,#toc_container ul,#toc_container ol{margin:.4em 0 .4em 1.4em !important; padding:0 !important; list-style:none !important}
.ez-toc-container li a,#toc_container li a{display:inline !important; position:static !important; padding:0 !important; background:none !important; line-height:1.8 !important; text-decoration:none !important}
/* 折りたたみ（JSで .collapsible / .is-open を付与） */
.ez-toc-container.collapsible .ez-toc-list{max-height:0 !important; overflow:hidden !important; transition:max-height .25s ease !important}
.ez-toc-container.collapsible.is-open .ez-toc-list{max-height:1200px !important}

/* ===== スマホ下部固定CTAバー（存在するときのみ表示） ===== */
.sticky-cta{display:none}
@media (max-width:768px){
  .sticky-cta{position:fixed; left:0; right:0; bottom:0; display:flex; gap:10px; justify-content:center; padding:10px 12px; background:#fff; border-top:1px solid #e2e8f0; box-shadow:0 -6px 18px rgba(15,23,42,.12); z-index:9999}
  .sticky-cta .btn{flex:1}
  body.has-sticky-cta{padding-bottom:66px} /* 重なり回避 */
}

/* ===== 目次のトグルボタン見た目 ===== */
.toc-toggle{display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-weight:700; color:#1e293b; margin-bottom:6px}
.toc-toggle .chev{width:10px; height:10px; border-right:2px solid #1e293b; border-bottom:2px solid #1e293b; transform:rotate(-45deg); transition:transform .2s ease}
.ez-toc-container.is-open .toc-toggle .chev{transform:rotate(45deg)}
/* ==========================
   ▼ 装飾ボックスのスタイル
========================== */
.point-box,
.scene-box,
.qol-box,
.product-box,
.recommend-box,
.evidence-box,
.reason-box,
.trust-box,
.step-box,
.related-box {
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.4em 1.6em;
  margin: 1.8em 0;
}

/* 背景バリエーション */
.point-box,
.qol-box,
.trust-box,
.step-box {
  background: #f9fafc; /* 清涼感のある淡青灰 */
}

.recommend-box,
.related-box,
.reason-box {
  background: #fcfcfc; /* ごく淡いグレー */
}

/* scene-box は背景なし */
.scene-box,
.evidence-box {
  background: transparent;
}

/* product-box：カード感 */
.product-box {
  background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
}

/* step-box 左ライン */
.step-box {
  border-left: 4px solid #90caf9;
}

/* ==========================
   ▼ ボタン（淡トーン版）
========================== */
.btn.primary {
  background-color: #ef5350;  /* ライトコーラル（楽天） */
  color: #fff;
  border: none;
  transition: 0.2s ease;
}
.btn.primary:hover { background-color: #d32f2f; }

.btn.ghost {
  background-color: #424242;  /* チャコールグレー（Amazon） */
  color: #fff;
  border: none;
  transition: 0.2s ease;
}
.btn.ghost:hover { background-color: #333333; }

/* ==========================
   ▼ h2/h3 見出し装飾
========================== */
#content h2 {
  border-left: 4px solid #90caf9;
  padding-left: 0.6em;
  margin-left: 0.2em;
}

/* ==========================
   ▼ フッター注釈統一
========================== */
footer#foot-cta .note {
  font-size: 0.9em;
  color: #757575;
}
footer#foot-cta .note::before {
  content: "※アフィリエイトリンクを含みます。";
}
/***** 見出しの左マージン・装飾（ご要望） *****/
section h2, section h3 {
  margin-left: 0.6em !important;   /* ほんの少し右に寄せる */
}
section h2 {
  border-left: 4px solid #90caf9;
  padding-left: 0.6em;
}

/***** テーブル（ランキング） *****/
.table-wrap {
  overflow-x: auto;           /* スマホ横スクロール対策 */
  -webkit-overflow-scrolling: touch;
  margin: 1em 0;
}
.ranking-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;           /* 角丸を効かせる */
  background: #fff;
  font-size: 0.98rem;
}
.ranking-table thead th {
  background: #f5f7fb;       /* ごく淡いブルーグレー */
  color: #333;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #e6e6e6;
  white-space: nowrap;
}
.ranking-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #efefef;
  vertical-align: top;
}
.ranking-table tbody tr:last-child td { border-bottom: none; }
.ranking-table tbody tr.top td {
  background: #fcfcff;        /* 1位行だけほんのりアクセント */
  font-weight: 600;
}
.ranking-table a { text-decoration: underline; }

/***** ノート表記 *****/
#ranking .note {
  color: #757575;
  font-size: 0.92rem;
  margin-top: 0.6em;
}

/***** 汎用ボックス装飾（前回の設計を再掲＋微調整） *****/
.point-box,
.scene-box,
.qol-box,
.product-box,
.recommend-box,
.evidence-box,
.reason-box,
.trust-box,
.step-box,
.related-box {
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.4em 1.6em;
  margin: 1.6em 0;
}

.point-box, .qol-box, .trust-box, .step-box { background: #f9fafc; }
.recommend-box, .related-box, .reason-box { background: #fcfcfc; }
.scene-box, .evidence-box { background: transparent; }

.product-box {
  background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
}

/* リスト内の余白最適化 */
.scene-box ul, .recommend-box ul, .evidence-box ul, .reason-box ul {
  margin-left: 1.2em;
}

/***** CTAボタン（淡トーン版／前回合意） *****/
.btn.primary { background-color: #ef5350; color: #fff; border: none; transition: .2s; }
.btn.primary:hover { background-color: #d32f2f; }
.btn.ghost   { background-color: #424242; color: #fff; border: none; transition: .2s; }
.btn.ghost:hover   { background-color: #333333; }

/***** フッター注記（短縮文言に統一） *****/
footer#foot-cta .note { font-size: .9em; color: #757575; }
/* ==========================
   ▼ 見出し（h2/h3）左マージン＋左線装飾
   THE THOR上書き対応（強制 !important）
========================== */

/* h2：主要見出し（セクションタイトル） */
section h2 {
  position: relative;
  margin-left: 1.2em !important;      /* ← 左に余白を確実に入れる */
  padding-left: 0.8em !important;     /* ← 線との距離を調整 */
  border-left: 4px solid #90caf9 !important; /* 淡いスカイブルーライン */
  font-weight: 600 !important;
}

/* h3：下位見出し（サブタイトル） */
section h3 {
  margin-left: 1.5em !important;
  padding-left: 0.6em !important;
  border-left: 3px solid #b3e5fc !important; /* 少し明るいブルーライン */
  font-weight: 500 !important;
}

/* 見出し上下余白を軽く調整 */
section h2, section h3 {
  margin-top: 1.4em !important;
  margin-bottom: 0.8em !important;
}
/* ========== THE THOR 見出し上書き強制版 ========== */

/* h2：主要見出し */
.entry-content section h2,
.post_content section h2,
.page_content section h2,
#content section h2 {
  margin-left: 1.2em !important;      /* ← 左に寄せたい分だけ確実に余白を追加 */
  padding-left: 0.8em !important;     /* ← 線と文字の距離 */
  border-left: 4px solid #90caf9 !important; /* ← 淡ブルーライン */
  background: none !important;        /* ← THE THORの背景塗り潰しを無効化 */
  font-weight: 600 !important;
}

/* h3：サブ見出し */
.entry-content section h3,
.post_content section h3,
.page_content section h3,
#content section h3 {
  margin-left: 1.5em !important;
  padding-left: 0.6em !important;
  border-left: 3px solid #b3e5fc !important;
  background: none !important;
  font-weight: 500 !important;
}

/* 上下余白微調整 */
.entry-content h2, .entry-content h3,
.post_content h2, .post_content h3,
.page_content h2, .page_content h3 {
  margin-top: 1.4em !important;
  margin-bottom: 0.8em !important;
}
/* 各セクションのh2をIDで確実に上書き */
#howto > h2,
#trouble > h2,
#health > h2,
#recycle > h2,
#glossary > h2,
#lifestyle > h2,
#ranking > h2,
#ranking-details > h2,
#buy-faq > h2,
#cta-summary > h2,
#internal-links > h2,
#foot-cta > h2 {
  margin-left: 1.2em !important;
  padding-left: 0.8em !important;
  border-left: 4px solid #90caf9 !important;
  background: transparent !important;
  font-weight: 600 !important;
}

/* h3も軽く寄せる（必要なら） */
#lifestyle h3,
#ranking-details h3,
#trust h3,
#summary h3,
#buy-faq h3 {
  margin-left: 1.5em !important;
  padding-left: 0.6em !important;
  border-left: 3px solid #b3e5fc !important;
  background: transparent !important;
  font-weight: 500 !important;
}
/* =========================================================
   vn-override.css  —  VAPEナビ TOP/全ページ共通の微調整
   ※フロントのみ（管理画面除外）で全ページに適用
========================================================= */

/* ---------- 見出し（h2/h3）：左マージン＋左ライン（サイト全体） ---------- */
body:not(.wp-admin) :is(.entry-content,.post_content,.page_content,#content) h2 {
  margin-left: 1.2em !important;
  padding-left: 0.8em !important;
  border-left: 4px solid #90caf9 !important;   /* 淡いブルーライン */
  background: transparent !important;
  font-weight: 600 !important;
}
body:not(.wp-admin) :is(.entry-content,.post_content,.page_content,#content) h3 {
  margin-left: 1.5em !important;
  padding-left: 0.6em !important;
  border-left: 3px solid #b3e5fc !important;   /* h2より淡いラインで階層差 */
  background: transparent !important;
  font-weight: 500 !important;
}
/* THE THORが :before で見出し装飾を重ねる場合の打ち消し */
body:not(.wp-admin) :is(.entry-content,.post_content,.page_content,#content) h2::before,
body:not(.wp-admin) :is(.entry-content,.post_content,.page_content,#content) h3::before {
  content: none !important;
}

/* ---------- ランキング表（共通） ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1em 0;}
.ranking-table{width:100%;border-collapse:separate;border-spacing:0;border:1.5px solid #e0e0e0;border-radius:8px;overflow:hidden;background:#fff;font-size:.98rem;}
.ranking-table thead th{background:#f5f7fb;color:#333;text-align:left;padding:12px 14px;border-bottom:1px solid #e6e6e6;white-space:nowrap;}
.ranking-table tbody td{padding:12px 14px;border-bottom:1px solid #efefef;vertical-align:top;}
.ranking-table tbody tr:last-child td{border-bottom:none;}
.ranking-table tbody tr.top td{background:#fcfcff;font-weight:600;}
.ranking-table a{text-decoration:underline;}
#ranking .note{color:#757575;font-size:.92rem;margin-top:.6em;}

/* ---------- 装飾ボックス（枠は薄グレー） ---------- */
.point-box,.scene-box,.qol-box,.product-box,.recommend-box,.evidence-box,.reason-box,.trust-box,.step-box,.related-box{
  border:1.5px solid #e0e0e0;border-radius:8px;padding:1.4em 1.6em;margin:1.6em 0;
}
.point-box,.qol-box,.trust-box,.step-box{background:#f9fafc;}     /* 清涼感の薄い青灰 */
.recommend-box,.related-box,.reason-box{background:#fcfcfc;}      /* ごく薄い灰 */
.scene-box,.evidence-box{background:transparent;}                 /* 指示どおり塗り無し */
.product-box{background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.05);}/* 品のあるカード感 */
.scene-box ul,.recommend-box ul,.evidence-box ul,.reason-box ul{margin-left:1.2em;}

/* ---------- CTAボタン（淡トーン） ---------- */
.btn.primary{background:#ef5350;color:#fff;border:none;transition:.2s;}
.btn.primary:hover{background:#d32f2f;}
.btn.ghost{background:#424242;color:#fff;border:none;transition:.2s;}
.btn.ghost:hover{background:#333;}

/* ---------- フッター注記（短縮文言の統一） ---------- */
footer#foot-cta .note{font-size:.9em;color:#757575;}