/* =========================================================
 * EraBest Components — handoff/erabest.css のコンポーネントクラス群
 * ─────────────────────────────────────────────────────────
 * 元ファイル: handoff/erabest.css の :root と @import を除いた残り
 *   :root → erabest-tokens.css に統合済み
 *   @import → functions.php の wp_enqueue_style で管理
 *
 * これらのクラス（.era-h1, .era-card, .era-summary 等）は
 * Phase 4 のブロックパターン実装で使用される。
 * ========================================================= */

/* ============================================================
   EraBest Design System — WordPress 追加CSS 用
   ------------------------------------------------------------
   このファイルをテーマの「追加CSS」または自作テーマの
   style.css にそのまま貼り付けて使えます。
   
   構成:
     1. Google Fonts 読み込み（@import）
     2. CSS 変数（色・フォント・余白・角丸）
     3. ベースリセット
     4. コンポーネントクラス
        - 見出し / 本文 / リンク
        - 記事ラッパー
        - Header / Footer
        - カード / タグ / バッジ
        - ArticleSummary / ScoreCard / Gallery /
          Timeline / QuoteBox / PriceCompare / FAQ
          / Comparison Table
        - CTA ボタン
     5. モバイル対応（@media）
   ============================================================ */


/* ───── 1. Google Fonts ──────────────────────────────────── */



/* ───── 2. CSS 変数 ───────────────────────────────────── */



/* ───── 3. ベースリセット ────────────────────────────── */
.era-root,
.era-root * { box-sizing: border-box; }

.era-root {
  background: var(--era-bg);
  color: var(--era-ink);
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.era-root img { max-width: 100%; height: auto; display: block; }
.era-root a { color: var(--era-accent); text-decoration: none; }
.era-root a:hover { color: var(--era-accent-deep); }


/* ───── 4. タイポグラフィ ────────────────────────────── */
.era-h1 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.55;
  letter-spacing: 0.01em;
  margin: 0 0 20px;
  color: var(--era-ink);
}

.era-h2 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 56px 0 20px;
  padding-left: 14px;
  border-left: 5px solid var(--era-accent);
  color: var(--era-ink);
  scroll-margin-top: 24px;
}

.era-h3 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  color: var(--era-ink);
}

.era-h4 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  color: var(--era-ink);
}

.era-lead {
  font-family: var(--font-jp);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--era-ink);
  margin: 0 0 24px;
}

.era-muted { color: var(--era-ink-muted); }
.era-soft  { color: var(--era-ink-soft); }

.era-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--era-ink-muted);
}

.era-mincho {
  font-family: var(--font-mincho);
  font-weight: 500;
}

.era-latin {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 500;
}


/* ───── 5. 記事ラッパー ────────────────────────────── */
.era-article-wrap {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 20px var(--layout-pad-x) 56px;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: var(--layout-gap);
}

.era-article-main {
  max-width: var(--layout-article);
  width: 100%;
  min-width: 0;
}

.era-article-sidebar {
  min-width: 0;
}

.era-breadcrumb {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 20px var(--layout-pad-x) 0;
  font-size: 12px;
  color: var(--era-ink-muted);
}
.era-breadcrumb > * + *::before {
  content: "›";
  margin: 0 8px;
}
.era-breadcrumb a { color: var(--era-ink-muted); }
.era-breadcrumb .current { color: var(--era-ink); }


/* ───── 6. Header / Footer ────────────────────────── */
.era-header {
  background: var(--era-paper);
  border-bottom: 1px solid var(--era-line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.era-header-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 16px var(--layout-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.era-footer {
  background: var(--era-ink);
  color: var(--era-paper);
  padding: 56px var(--layout-pad-x);
  font-size: var(--fs-body-sm);
}


/* ───── 7. カード / タグ / バッジ ─────────────────────── */
.era-card {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s;
}
.era-card:hover { border-color: var(--era-ink-muted); }

.era-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: var(--fs-label-jp);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--era-accent);
  color: var(--era-accent-ink);
  border-radius: var(--radius-sm);
}
.era-pill--warm { background: var(--era-warm); }
.era-pill--rank1 { background: var(--era-rank1); }

.era-badge-new {
  display: inline-block;
  background: var(--era-warm);
  color: #fff;
  padding: 3px 10px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.era-badge-pr {
  display: inline-block;
  border: 1px solid var(--era-line-soft);
  color: var(--era-ink-muted);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 600;
}


/* ───── 8. ArticleSummary（結論ボックス）─ blocks.css に移管済み（4 層構造版） ───── */


/* ───── 9. ScoreCard → blocks.css 末尾の .era-sc-* に移行済 */


/* ───── 10. Gallery → blocks.css 末尾の .era-gallery-* に移行済 */


/* ───── 11. Timeline → blocks.css 末尾の .era-timeline-* に移行済 */


/* ───── 12. QuoteBox → blocks.css 末尾の .era-quote-* に移行済 */


/* ───── 13. PriceCompare → blocks.css 末尾の .era-price-* に移行済 */


/* ───── 14. FAQ → blocks.css 末尾の .era-faq-* に移行済 */


/* ───── 15. Comparison Table → blocks.css 末尾の .era-comparison-* に移行済 */


/* ───── 16. CTA ボタン ────────────────────────────────── */
.era-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
.era-btn:hover { opacity: 0.9; }

.era-btn--amazon,  .era-art-content a.era-btn--amazon,  .entry-content a.era-btn--amazon  { background: #FF9900; color: #fff; text-decoration: none; }
.era-btn--rakuten, .era-art-content a.era-btn--rakuten, .entry-content a.era-btn--rakuten { background: #BF0000; color: #fff; text-decoration: none; }
.era-btn--yahoo,   .era-art-content a.era-btn--yahoo,   .entry-content a.era-btn--yahoo   { background: #FF0033; color: #fff; text-decoration: none; }
.era-btn--primary, .era-art-content a.era-btn--primary, .entry-content a.era-btn--primary { background: var(--era-accent); color: #fff; text-decoration: none; }
.era-btn--primary { background: var(--era-accent); color: #fff; }
.era-btn--ghost   {
  background: transparent;
  color: var(--era-ink);
  border: 1px solid var(--era-line);
}

.era-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.era-btn-stack .era-btn { width: 100%; }


/* ───── 17. モバイル対応 ───────────────────────────── */
@media (max-width: 960px) {
  .era-article-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 16px 20px 40px;
  }
  .era-breadcrumb {
    padding: 16px 20px 0;
  }
  .era-header-inner {
    padding: 12px 16px;
  }
  .era-article-sidebar {
    display: none;
  }
  .era-h1 { font-size: 22px; }
  .era-h2 {
    font-size: 17px;
    margin: 40px 0 14px;
    padding-left: 10px;
    border-left-width: 4px;
  }
  .era-h3 { font-size: 15px; }
}



/* ───── 18. ユーティリティ ─────────────────────────── */
.era-stack > * + * { margin-top: var(--stack, 16px); }
.era-stack-sm > * + * { margin-top: 8px; }
.era-stack-lg > * + * { margin-top: 32px; }

.era-center { text-align: center; }
.era-left { text-align: left; }
.era-right { text-align: right; }

.era-divider {
  border: none;
  border-top: 1px solid var(--era-line);
  margin: 32px 0;
}

.era-pr-notice {
  background: var(--era-bg-alt);
  padding: 12px 18px;
  margin-bottom: 32px;
  font-size: 12.5px;
  color: var(--era-ink-soft);
  line-height: 1.8;
  border-left: 3px solid var(--era-ink-muted);
}