/* =========================================================
 * EraBest Block Patterns — Phase 4 専用 CSS
 * ─────────────────────────────────────────────────────────
 * - 4 種ブロックパターン (比較表 / CTA / FAQ / 吹き出し) で使う追加スタイル
 * - era-components.css にない要素のみここで定義
 * - エディタ専用ラベル制御も含む
 * ========================================================= */


/* ==========================================================
 * 1. 吹き出し（Speech bubble）— 3 キャラ × 3 バリアント
 * ========================================================== */
.era-speech {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 16px 0;
  font-family: var(--font-jp);
}
.era-speech--right {
  flex-direction: row-reverse;
}

.era-speech-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--era-ink);
  color: var(--era-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-latin);
  font-size: 26px;
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
}
.era-speech-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.era-speech--variant-point .era-speech-avatar {
  /* 外枠二重円 (paper 3px + accent 2px) を撤去 — 他 variant と統一 */
  box-shadow: none;
}
.era-speech--variant-surprise .era-speech-bubble {
  transform: rotate(-0.4deg);
}

.era-speech-bubble {
  position: relative;
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 16px 20px;
  flex: 1;
  min-width: 0;
}

/* Tail (吹き出しのしっぽ) — libSpeech.jsx 1:1 再現 */
.era-speech-bubble::before {
  content: '';
  position: absolute;
  top: 22px;
  width: 14px;
  height: 14px;
  background: var(--era-paper);
  border-top: 1px solid var(--era-line);
}
.era-speech--left .era-speech-bubble::before {
  left: -7px;
  border-left: 1px solid var(--era-line);
  transform: rotate(-45deg);
}
.era-speech--right .era-speech-bubble::before {
  right: -7px;
  border-right: 1px solid var(--era-line);
  transform: rotate(45deg);
}

.era-speech-label {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--era-accent);
  color: var(--era-paper);
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.era-speech--right .era-speech-label {
  left: auto;
  right: 16px;
}

.era-speech-name {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--era-accent);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.era-speech-body {
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1.85;
  color: var(--era-ink);
}

/* モバイルでアバターを少し小さく */
@media (max-width: 480px) {
  .era-speech-avatar {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .era-speech-bubble {
    padding: 12px 16px;
  }
}


/* ==========================================================
 * 2. CTA — 編集部結論型 (era-components.css の .era-summary を活用しつつ拡張)
 * ========================================================== */
.era-cta-conclusion {
  background: var(--era-paper);
  border: 1px solid var(--era-ink);
  margin: 32px 0;
  font-family: var(--font-jp);
  max-width: 640px;
}
.era-cta-conclusion-tag {
  padding: 10px 18px;
  background: var(--era-ink);
  color: var(--era-paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  font-weight: 700;
  text-transform: uppercase;
}
.era-cta-conclusion-body {
  padding: 20px;
  display: flex;
  gap: 20px;
}
/* libCTA.jsx ProductImg L14-23: warm tone gradient #E8DCC4 → #C9B99A */
.era-cta-conclusion-img {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #E8DCC4, #C9B99A);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.era-cta-conclusion-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* libCTA.jsx ProductImg L25-29: 中央に 40%×40% 白半透明四角 (画像が無い時の glyph) */
.era-cta-conclusion-img:not(:has(img))::before {
  content: '';
  width: 40%;
  height: 40%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 6px;
}
.era-cta-conclusion-content {
  flex: 1;
  min-width: 0;
}
.era-cta-conclusion-maker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--era-ink-muted);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.era-cta-conclusion-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--era-ink);
  line-height: 1.4;
  margin-bottom: 10px;
}
.era-cta-conclusion-comment {
  font-size: 13px;
  color: var(--era-ink-muted);
  line-height: 1.7;
  margin-bottom: 12px;
}
.era-cta-conclusion-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--era-ink);
  margin-bottom: 12px;
}
.era-cta-conclusion-price-note {
  font-size: 11px;
  color: var(--era-ink-muted);
  font-weight: 400;
  margin-left: 6px;
}

.era-ec-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

@media (max-width: 480px) {
  .era-cta-conclusion-body {
    flex-direction: column;
    padding: 16px;
  }
  .era-cta-conclusion-img {
    width: 100%;
    height: 180px;
  }
  .era-ec-buttons {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}


/* ==========================================================
 * 3. エディタ専用ラベル制御
 * ─────────────────────────────────────────────────────────
 * 比較表 (.era-comparison-*) 本体は末尾の Comparison Table セクション参照
 * ========================================================== */
.era-editor-label {
  display: none;
}
body.block-editor-page .era-editor-label,
.is-root-container .era-editor-label {
  display: block;
  background: var(--era-warm-soft);
  color: var(--era-warm-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 6px 12px;
  margin: 8px 0 4px;
  border-left: 3px solid var(--era-warm);
}


/* ==========================================================
 * 5. SelectionPoints — 選び方のポイント (.era-sp-*)
 * 元: handoff/src/libSelectionPoints.jsx
 * ========================================================== */
.era-sp {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 28px 32px 10px;
  font-family: var(--font-jp);
  color: var(--era-ink);
  margin: 32px 0;
}
.era-sp-header { margin-bottom: 18px; }
.era-sp-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--era-accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.era-sp-heading {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--era-ink);
}
.era-sp-list { margin: 0; padding: 0; list-style: none; }
.era-sp-item {
  /* 2026-04-27: 縦中央揃え + padding 圧縮で各 li をコンパクトに */
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--era-line-soft);
  align-items: center;
}
.era-sp-num {
  background: var(--era-accent);
  color: var(--era-accent-ink);
  padding: 6px 0;
  text-align: center;
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.era-sp-title,
.era-art-content h4.era-sp-title,
.entry-content h4.era-sp-title {
  margin: 0 0 2px !important; /* 2026-04-27: title↔desc 間隔を更に圧縮 (JIN:R 親 h4 margin-top:28px 干渉対策込み) */
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--era-ink);
  letter-spacing: 0.02em;
}
.era-sp-desc,
.era-art-content p.era-sp-desc,
.entry-content p.era-sp-desc {
  /* 2026-04-27: 主従関係を視覚化するため頭に「▎」縦線記号を inline で配置（absolute なし・行高ブレなし） */
  margin: 0 !important;
  font-family: var(--font-jp);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--era-ink-soft);
}
.era-sp-desc::before {
  content: '▸';
  color: var(--era-line);
  margin-right: 6px;
  font-size: 1em;
}


/* ==========================================================
 * 6. ProductReview — 個別商品レビューカード (.era-pr-*)
 * 元: handoff/src/libProductReview.jsx
 * ========================================================== */
.era-pr {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 24px;
  font-family: var(--font-jp);
  color: var(--era-ink);
  margin: 24px 0;
  border-top: 4px solid var(--era-rank1);
}
.era-pr--rank1 { border-top-color: var(--era-rank1); }
.era-pr--rank2 { border-top-color: var(--era-rank2); }
.era-pr--rank3 { border-top-color: var(--era-rank3); }

.era-pr-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--era-line-soft);
}
.era-pr-rank {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--era-rank1);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
}
.era-pr--rank1 .era-pr-rank { background: var(--era-rank1); }
.era-pr--rank2 .era-pr-rank { background: var(--era-rank2); }
.era-pr--rank3 .era-pr-rank { background: var(--era-rank3); }

.era-pr-meta { flex: 1; min-width: 0; }
.era-pr-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--era-accent);
  color: #fff;
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.era-pr-name {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--era-ink);
  letter-spacing: 0.02em;
}
.era-pr-score {
  text-align: right;
  flex-shrink: 0;
}
.era-pr-score-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--era-ink-muted);
  letter-spacing: 0.14em;
}
.era-pr-score-val {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  color: var(--era-warm);
}
.era-pr-score-val small {
  font-size: 12px;
  color: var(--era-ink-muted);
  font-weight: 400;
}

.era-pr-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.era-pr-body--with-thumb { grid-template-columns: 180px 1fr; }
.era-pr-thumb {
  background: var(--era-paper-deep);
  aspect-ratio: 1 / 1;
}

.era-pr-specs {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--era-line-soft);
  flex-wrap: wrap;
}
.era-pr-spec-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--era-ink-muted);
  letter-spacing: 0.14em;
  margin-bottom: 2px;
}
.era-pr-spec-val {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--era-ink);
  font-weight: 600;
}
.era-pr-price-val {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  color: var(--era-ink);
}

.era-pr-procons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.era-pr-pros-lbl {
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--era-accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.era-pr-cons-lbl {
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--era-warm);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.era-pr-procons ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 1.85;
  color: var(--era-ink);
}
.era-pr-procons li { padding: 2px 0; }

.era-pr-cta {
  display: flex;
  gap: 10px;
}
.era-pr-cta a,
.era-art-content .era-pr-cta a,
.entry-content .era-pr-cta a {
  border: none;
  cursor: pointer;
  padding: 10px 18px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 2px;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.era-pr-cta a.is-amazon,
.era-art-content .era-pr-cta a.is-amazon,
.entry-content .era-pr-cta a.is-amazon { background: var(--era-warm); color: #fff; }
.era-pr-cta a.is-rakuten,
.era-art-content .era-pr-cta a.is-rakuten,
.entry-content .era-pr-cta a.is-rakuten { background: var(--era-accent); color: #fff; }

@media (max-width: 600px) {
  .era-pr-body--with-thumb { grid-template-columns: 1fr; }
  .era-pr-procons { grid-template-columns: 1fr; gap: 12px; }
  .era-sp-item { grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; }
  .era-sp { padding: 22px 20px 6px; }
}


/* ==========================================================
 * 4. FAQ — libFAQ.jsx 1:1 再現 (libFAQ.jsx 末尾セクション参照)
 * ========================================================== */


/* ==========================================================
 * 5. ArticleSummary — 結論先出しサマリー（4 層構造）
 * 真のソース: handoff/src/libArticleSummary.jsx
 * 4 層: メタ帯(paperDeep) / 本体(paper) / 根拠リスト(accentSoft) / CTA(accent)
 * ========================================================== */
.era-summary {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  border-radius: 2px;
  max-width: 100%;
  width: 100%;
  font-family: var(--font-jp);
  color: var(--era-ink);
  overflow: hidden;
  margin: 32px 0 48px;
}

/* 1 層目: Meta ribbon */
.era-summary-meta {
  padding: 11px 28px;
  background: var(--era-paper-deep);
  border-bottom: 1px solid var(--era-line);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--era-ink-muted);
  font-weight: 600;
}
.era-summary-meta > span { white-space: nowrap; }

/* 2 層目: Conclusion hero */
.era-summary-hero {
  padding: 30px 32px 26px;
}
.era-summary-conclusion-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--era-accent);
  font-weight: 600;
  margin-bottom: 14px;
}
/* h3: era-art-content h3 (0,2,1) や親テーマの h3 を上書きするため
 * .era-art-content h3.era-summary-heading / .entry-content h3.era-summary-heading
 * (0,2,2) で specificity を上げる。 */
.era-summary-heading,
.era-art-content h3.era-summary-heading,
.entry-content h3.era-summary-heading {
  font-family: var(--font-jp);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0;
  color: var(--era-ink);
  border: 0;
  background: none;
}
.era-art-content h3.era-summary-heading::before,
.era-art-content h3.era-summary-heading::after,
.entry-content h3.era-summary-heading::before,
.entry-content h3.era-summary-heading::after {
  content: none;
  display: none;
}
.era-summary-highlight {
  background: linear-gradient(transparent 62%, var(--era-yellow-tint) 62%);
  padding-inline: 2px;
}
/* lede: era-art-content p / entry-content p の干渉を断つため
 * specificity を (0,3,2) まで上げて確実に勝たせる。 */
.era-summary-lede,
.era-art-content p.era-summary-lede,
.entry-content p.era-summary-lede,
body.wp-child-theme-jin-r-child .entry-content p.era-summary-lede {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--era-ink-soft);
}

/* 3 層目: Why list (accentSoft 緑薄背景) */
.era-summary-why {
  padding: 22px 32px 24px;
  border-top: 1px solid var(--era-line-soft);
  background: var(--era-accent-soft);
}
.era-summary-why-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--era-accent-deep);
  font-weight: 600;
  margin-bottom: 14px;
}
/* ul の親テーマ padding-left を打ち消す。
 * .era-art-content ul / .entry-content ul のデフォルトに勝つよう (0,2,1) で。 */
.era-summary-why-list,
.era-art-content ul.era-summary-why-list,
.entry-content ul.era-summary-why-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.era-art-content ul.era-summary-why-list > li,
.entry-content ul.era-summary-why-list > li {
  margin: 0;
  padding: 0;
  background: none;
  list-style: none;
}
.era-art-content ul.era-summary-why-list > li::marker,
.entry-content ul.era-summary-why-list > li::marker {
  content: '';
}
.era-summary-why-item {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--era-ink);
}
/* チェックアイコン: SVG 直書きは KSES で剥がれるため CSS 疑似要素で表現。
 * accent 緑のラインアートチェックを SVG data URL で描画。
 * specificity を上げて親テーマの li::before を確実に上書き。 */
.era-summary-why-item::before,
.era-art-content .era-summary-why-item::before,
.entry-content .era-summary-why-item::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M3 8.5l3.5 3.5L13 4.5' stroke='%232E5E3D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  display: inline-block;
}
/* SVG 直書きが残っているケース（記事詳細テンプレ等）では二重表示にしない */
.era-summary-why-item > .era-summary-check { display: none; }
/* key は固定幅にしてスラッシュ位置を全行で揃える。
 * 想定 key は 3-4 文字（最大 5 文字程度）。5em で全パターンに対応。 */
.era-summary-why-key {
  font-weight: 700;
  display: inline-block;
  min-width: 5em;
}
.era-summary-why-sep {
  color: var(--era-ink-muted);
  margin: 0 10px 0 0;
}
.era-summary-why-val {
  color: var(--era-ink-soft);
}

/* 4 層目: For You (ターゲット自己同定) */
.era-summary-foryou {
  padding: 20px 32px;
  border-top: 1px solid var(--era-line-soft);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  align-items: start;
}
.era-summary-foryou-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--era-ink-muted);
  font-weight: 600;
  padding-top: 3px;
}
/* forYouBody: lede と同じ理由で specificity を上げる。 */
.era-summary-foryou-body,
.era-art-content p.era-summary-foryou-body,
.entry-content p.era-summary-foryou-body,
body.wp-child-theme-jin-r-child .entry-content p.era-summary-foryou-body {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--era-ink-soft);
  margin: 0;
}

/* CTA: Skip link (accent 緑背景)
 * specificity: .era-art-content a (0,2,1) を超える必要があるため、
 * .era-art-content a.era-summary-jump (0,2,2) で確実に勝たせる。
 */
.era-summary-jump,
.era-art-content a.era-summary-jump,
.entry-content a.era-summary-jump,
.era-art-content a.era-summary-jump:link,
.era-art-content a.era-summary-jump:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 32px;
  background: var(--era-accent);
  color: #FBF7EE;
  text-decoration: none;
  font-family: var(--font-jp);
  font-size: 13.5px;
  letter-spacing: 0.08em;
  font-weight: 600;
  transition: background 0.2s;
}
.era-summary-jump:hover,
.era-summary-jump:focus,
.era-art-content a.era-summary-jump:hover,
.era-art-content a.era-summary-jump:focus,
.entry-content a.era-summary-jump:hover,
.entry-content a.era-summary-jump:focus {
  background: var(--era-accent-deep);
  color: #FBF7EE;
  text-decoration: none;
}
.era-summary-skip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  opacity: 0.75;
}

/* SP: 各層の縦パディング・font-size を詰めて全体高を 600px 強まで圧縮 */
@media (max-width: 600px) {
  .era-summary { margin: 24px 0 32px; }

  /* 1 層目: meta */
  .era-summary-meta {
    padding: 8px 16px;
    gap: 12px;
    font-size: 9.5px;
    letter-spacing: 0.18em;
  }

  /* 2 層目: hero (見出し) */
  .era-summary-hero {
    padding: 18px 18px 16px;
  }
  .era-summary-conclusion-label {
    font-size: 9.5px;
    margin-bottom: 8px;
    letter-spacing: 0.24em;
  }
  .era-summary-heading,
  .era-art-content h3.era-summary-heading,
  .entry-content h3.era-summary-heading {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
  .era-summary-lede,
  .era-art-content p.era-summary-lede,
  .entry-content p.era-summary-lede,
  body.wp-child-theme-jin-r-child .entry-content p.era-summary-lede {
    font-size: 13px;
    line-height: 1.75;
    margin-top: 10px;
  }

  /* 3 層目: why */
  .era-summary-why {
    padding: 14px 18px 16px;
  }
  .era-summary-why-label {
    font-size: 9.5px;
    margin-bottom: 8px;
    letter-spacing: 0.22em;
  }
  .era-summary-why-list,
  .era-art-content ul.era-summary-why-list,
  .entry-content ul.era-summary-why-list {
    gap: 6px;
  }
  .era-summary-why-item {
    font-size: 13px;
    line-height: 1.7;
    gap: 8px;
  }
  .era-summary-why-key { min-width: 4.5em; }

  /* 4 層目: foryou (1 カラム化) */
  .era-summary-foryou {
    padding: 14px 18px;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .era-summary-foryou-label {
    font-size: 9.5px;
    padding-top: 0;
    letter-spacing: 0.22em;
  }
  .era-summary-foryou-body,
  .era-art-content p.era-summary-foryou-body,
  .entry-content p.era-summary-foryou-body,
  body.wp-child-theme-jin-r-child .entry-content p.era-summary-foryou-body {
    font-size: 12.5px;
    line-height: 1.7;
  }

  /* 5 層目: jump CTA */
  .era-summary-jump,
  .era-art-content a.era-summary-jump,
  .entry-content a.era-summary-jump {
    padding: 12px 18px;
    font-size: 12.5px;
  }
  .era-summary-skip {
    font-size: 9.5px;
    letter-spacing: 0.18em;
  }
}


/* ==========================================================
 * 18. Comparison Table — libComparison.jsx 1:1 再現
 * ─────────────────────────────────────────────────────────
 * - PC: TableVertical（細列 140px / 編集部推し列にベージュ下地 #F4EDD9 + 緑 3px トップバー）
 * - SP: TableMobile（横スクロール + sticky 左列 + max-width 360px の外枠）
 * - @media (max-width: 600px) で PC を hide / SP を show
 * - ピル「ベストバイ」=緑塗り（編集部のおすすめ Single source of truth）
 * - EC ボタンは縦積み・列幅 100% （Amazon/楽天/Yahoo）
 * ========================================================== */
.era-comparison-wrap {
  margin: 32px 0;
  font-family: var(--font-jp);
}

/* ── 共通: ブラックヘッダー ──────────────────────── */
.era-comparison-header {
  background: var(--era-ink);
  color: #fff;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.era-comparison-badge {
  background: var(--era-warm);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.era-comparison-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  font-weight: 700;
  color: #BFB29A;
  white-space: nowrap;
}
.era-comparison-title-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

/* ── PC vertical table ─────────────────────────────── */
.era-comparison-pc {
  width: 100%;
}
@media (max-width: 600px) {
  .era-comparison-pc { display: none; }
}

.era-comparison-pc .era-comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  border-top: none;
  margin: 0;
}

.era-comparison-th-empty {
  padding: 14px 10px;
  background: var(--era-paper);
  border-bottom: 1px solid var(--era-line);
  width: 100px;
}

.era-comparison-th-product {
  padding: 18px 12px 14px;
  text-align: center;
  background: var(--era-paper);
  border-bottom: 1px solid var(--era-line);
  border-left: 1px solid var(--era-line);
  border-top: 3px solid transparent;
  vertical-align: top;
  font-weight: 400;
}
.era-comparison-th-product.is-pick {
  background: #F4EDD9;
  border-top: 3px solid var(--era-accent);
}

.era-comparison-img {
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border: 1px solid var(--era-line);
  position: relative;
  display: block;
}
.era-comparison-img--warm  { background: linear-gradient(135deg, #E8DCC4, #C9B99A); }
.era-comparison-img--deep  { background: linear-gradient(135deg, #BFB29A, #8F7B5C); }
.era-comparison-img--green { background: linear-gradient(135deg, #C6C9B0, #8A9370); }

.era-comparison-maker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--era-ink-muted);
  letter-spacing: 0.16em;
  font-weight: 600;
  margin-bottom: 4px;
}
.era-comparison-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--era-ink);
  line-height: 1.4;
}

.era-comparison-label-cell {
  padding: 14px 14px;
  font-size: 12px;
  color: var(--era-ink-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--era-line-soft);
  background: var(--era-paper);
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
}
.era-comparison-value-cell {
  padding: 14px 12px;
  background: var(--era-paper);
  border-bottom: 1px solid var(--era-line-soft);
  border-left: 1px solid var(--era-line-soft);
  text-align: center;
  vertical-align: middle;
}
.era-comparison-value-cell.is-pick {
  background: #F4EDD9;
}

.era-comparison-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  color: var(--era-ink-soft);
  background: transparent;
  border: 1px solid var(--era-line);
  line-height: 1.4;
}
.era-comparison-pill.is-best {
  background: var(--era-accent);
  color: #fff;
  border: 1px solid var(--era-accent);
}

.era-comparison-app {
  font-size: 18px;
  color: var(--era-ink);
  font-weight: 600;
  line-height: 1;
}
.era-comparison-spec-text {
  font-size: 13px;
  color: var(--era-ink);
  font-weight: 600;
}

.era-comparison-cta-cell {
  padding: 14px 10px;
  background: var(--era-paper);
  border-bottom: 1px solid var(--era-line-soft);
  border-left: 1px solid var(--era-line-soft);
  vertical-align: middle;
  overflow: hidden;
}
.era-comparison-cta-cell.is-pick {
  background: #F4EDD9;
}
.era-comparison-buttons {
  width: 100%;
  box-sizing: border-box;
}
.era-comparison-buttons a,
.era-art-content .era-comparison-buttons a,
.entry-content .era-comparison-buttons a {
  display: block;
  width: 100%;
  padding: 9px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
  text-decoration: none;
  margin: 0 0 4px;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  font-family: var(--font-jp);
  line-height: 1.3;
}
.era-comparison-buttons a:last-child {
  margin-bottom: 0;
}
.era-comparison-buttons a:hover {
  opacity: 0.9;
}
.era-comparison-buttons a.is-amazon  { background: #FF9900; color: #fff; }
.era-comparison-buttons a.is-rakuten { background: #BF0000; color: #fff; }
.era-comparison-buttons a.is-yahoo   { background: #FF0033; color: #fff; }

/* ── SP horizontal scroll table ────────────────────── */
.era-comparison-sp {
  display: none;
  border: 1px solid var(--era-line);
  max-width: 100%;
}
@media (max-width: 600px) {
  .era-comparison-sp { display: block; }
}

.era-comparison-sp .era-comparison-header {
  padding: 11px 14px;
  gap: 9px;
  flex-wrap: wrap;
}
.era-comparison-sp .era-comparison-badge {
  font-size: 10px;
  padding: 3px 7px;
}
.era-comparison-sp .era-comparison-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
}
.era-comparison-sp .era-comparison-title-text {
  font-size: 13px;
  letter-spacing: 0.03em;
}

.era-comparison-mobile-hint {
  padding: 7px 14px;
  background: var(--era-paper);
  border-bottom: 1px solid var(--era-line-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--era-ink-muted);
  letter-spacing: 0.12em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.era-comparison-mobile-count {
  margin-left: auto;
  font-family: var(--font-jp);
  letter-spacing: 0;
}

.era-comparison-mobile-scroll {
  overflow-x: auto;
  background: var(--era-paper);
  -webkit-overflow-scrolling: touch;
}
.era-comparison-sp .era-comparison-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 476px; /* 92(label) + 128*3(items) */
  background: var(--era-paper);
  margin: 0;
}

.era-comparison-sp .era-comparison-th-empty {
  padding: 12px 10px;
  width: 92px;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--era-line);
  background: var(--era-paper);
}
.era-comparison-sp .era-comparison-th-product {
  padding: 14px 10px 12px;
}
.era-comparison-sp .era-comparison-img {
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
}
.era-comparison-sp .era-comparison-maker {
  font-size: 8px;
  letter-spacing: 0.14em;
  margin-bottom: 3px;
}
.era-comparison-sp .era-comparison-name {
  font-size: 11.5px;
  line-height: 1.35;
}
.era-comparison-sp .era-comparison-label-cell {
  padding: 12px 10px;
  font-size: 11px;
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid var(--era-line);
}
.era-comparison-sp .era-comparison-value-cell {
  padding: 12px 10px;
  font-size: 11.5px;
}
.era-comparison-sp .era-comparison-cta-cell {
  padding: 12px 8px;
}

/* ── 親テーマ table 干渉対策 ────────────────────── */
.era-art-content .era-comparison-table,
.entry-content .era-comparison-table,
body.wp-child-theme-jin-r-child .entry-content .era-comparison-table {
  margin: 0;
  border-collapse: collapse;
}
.era-art-content .era-comparison-table th,
.era-art-content .era-comparison-table td,
.entry-content .era-comparison-table th,
.entry-content .era-comparison-table td {
  font-weight: inherit;
}
/* 本文 ul / li の親干渉対策（COMPARISON 内には ul は出ないが念のため） */


/* ==========================================================
 * 19. ScoreCard — libScoreCard.jsx 1:1 再現
 * ─────────────────────────────────────────────────────────
 * - paper 白カード、line border、padding 28px 30px 26px
 * - ヘッダー: 「編集部の総合評価」 accent label
 * - Body 2 列 (PC: 240px + 1fr / 720px↓: 1 列)
 *   左: 商品名 + 総合スコア 56px (accentDeep) + ★行 + 価格バッジ
 *   右: 5 軸の内訳 (84px / 1fr / auto, dashed top border)
 * - フッター: blockquote + targets タグ
 * - 半星対応: ★ overlay 方式 (CSS 疑似要素 + width %)
 * ========================================================== */
.era-sc-root {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 28px 30px 26px;
  font-family: var(--font-jp);
  color: var(--era-ink);
  margin: 32px 0;
  position: relative;
}
@media (max-width: 420px) {
  .era-sc-root { padding: 20px 16px; }
}

.era-sc-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--era-line);
}
.era-sc-kicker {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--era-accent);
  font-weight: 700;
  font-family: var(--font-jp);
}

.era-sc-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
}
.era-sc-body--compact {
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (max-width: 720px) {
  .era-sc-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── Left column ── */
.era-sc-name {
  font-size: 15px;
  color: var(--era-ink);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0 0 2px;
}
.era-sc-sub {
  font-size: 11.5px;
  color: var(--era-ink-muted);
  margin: 0 0 14px;
}

.era-sc-total {
  margin-top: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--era-line);
  border-bottom: 1px solid var(--era-line);
}
.era-sc-total-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--era-accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.era-sc-total-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.era-sc-total-value > .num {
  font-size: 56px;
  line-height: 1;
  color: var(--era-accent-deep, #1F4029);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.era-sc-total-value > .max {
  font-size: 18px;
  color: var(--era-ink-muted);
  font-weight: 500;
}

/* ── Stars (overlay 方式・半星対応) ── */
.era-sc-stars {
  display: inline-flex;
  gap: 2px;
  line-height: 1;
}
.era-sc-star {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 1;
  font-size: 15px;
  color: var(--era-line);
}
.era-sc-star::before {
  content: '★';
}
.era-sc-star > .fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: var(--era-star, #C8A14A);
}
.era-sc-star > .fill::before {
  content: '★';
}

/* ── Price badge ── */
.era-sc-price {
  margin-top: 14px;
}
.era-sc-price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--era-line);
}
.era-sc-price-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--era-ink-muted);
  font-weight: 700;
}
.era-sc-price-range {
  font-size: 13px;
  color: var(--era-ink);
  font-weight: 700;
}

/* ── Right column: 5 axes ── */
.era-sc-axes-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--era-accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.era-sc-axes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px dashed var(--era-line);
}
.era-art-content .era-sc-axes,
.entry-content .era-sc-axes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.era-sc-axis {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px dashed var(--era-line);
}
.era-art-content .era-sc-axis,
.entry-content .era-sc-axis {
  margin: 0;
  padding: 10px 0;
}
.era-sc-axis-label {
  font-size: 13px;
  color: var(--era-ink-soft);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.era-sc-axis-stars {
  /* uses .era-sc-stars 13px size */
}
.era-sc-axis-stars .era-sc-star {
  width: 13px;
  height: 13px;
  font-size: 13px;
}
.era-sc-axis-value {
  font-size: 13px;
  color: var(--era-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: right;
}

/* ── Footer ── */
.era-sc-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--era-line);
}
.era-sc-verdict {
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 2px solid var(--era-accent);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--era-ink-soft);
  font-style: normal;
}
.era-art-content .era-sc-verdict,
.entry-content .era-sc-verdict {
  margin: 0 0 16px;
  padding-left: 14px;
  font-style: normal;
  background: transparent;
}
.era-sc-targets-label {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--era-accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.era-sc-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.era-sc-tag {
  display: inline-block;
  padding: 5px 11px;
  background: var(--era-accent-soft);
  color: var(--era-accent-deep, #1F4029);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(46, 94, 61, 0.2);
  border-radius: 2px;
}


/* ==========================================================
 * 20. PriceCompare — libPriceCompare.jsx 1:1 再現 (Sample B)
 * ─────────────────────────────────────────────────────────
 * - paper 白カード, line border, radius 2
 * - ヘッダー: paperDeep bg, title 16px + subtitle 12px / mono 10px UPDATED
 * - 各 row: grid 100px / 1fr / auto / gap 18
 *   左: RChip (sm) + 最安バッジ縦並び gap 8
 *   中: 価格 22px + 注記行(+pt還元 accent / note inkMuted, gap 12, fs 11)
 *   右: 「購入する」accent CTA + arrow
 * - 最安行: bg #FDF7E9 (warm tint)
 * - フッター: lineSoft bg, fs 10 / inkMuted
 * ========================================================== */
.era-price {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  border-radius: 2px;
  max-width: 100%;
  width: 100%;
  font-family: var(--font-jp);
  color: var(--era-ink);
  margin: 32px 0;
}

.era-price-header {
  padding: 16px 20px;
  background: var(--era-paper-deep);
  border-bottom: 1px solid var(--era-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.era-price-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--era-ink);
}
.era-price-subtitle {
  font-size: 12px;
  color: var(--era-ink-muted);
  margin-top: 2px;
}
.era-price-updated {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--era-ink-muted);
}

.era-price-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--era-line-soft);
}
.era-price-row:last-of-type {
  border-bottom: none;
}
.era-price-row.is-best {
  background: #FDF7E9;
}

.era-price-store {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* RChip — sm size */
.era-price-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 2px;
  line-height: 1;
  font-family: var(--font-jp);
}
.era-price-chip--amazon  { background: #FF9900; color: #111; }
.era-price-chip--rakuten { background: #BF0000; color: #fff; }
.era-price-chip--yahoo   { background: #FF0033; color: #fff; }

.era-price-best-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--era-warm);
  padding: 3px 7px;
  border-radius: 2px;
  display: inline-block;
}

.era-price-amount {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--era-ink);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-jp);
  font-style: normal;
}
.era-price-meta {
  font-size: 11px;
  color: var(--era-ink-muted);
  margin-top: 3px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.era-price-points {
  color: var(--era-accent);
  font-weight: 600;
}
.era-price-note {
  color: var(--era-ink-muted);
}

.era-price-cta,
.era-art-content a.era-price-cta,
.entry-content a.era-price-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--era-accent);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 2px;
  border: none;
  font-family: var(--font-jp);
  line-height: 1.3;
  white-space: nowrap;
}
.era-price-cta:hover { opacity: 0.9; }
.era-price-cta-arrow {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}

.era-price-footer {
  padding: 10px 20px;
  font-size: 10px;
  color: var(--era-ink-muted);
  background: var(--era-line-soft);
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .era-price-row {
    grid-template-columns: 90px 1fr;
    gap: 10px;
    padding: 14px 14px;
  }
  .era-price-cta {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 4px;
  }
  .era-price-amount {
    font-size: 20px;
  }
}


/* ==========================================================
 * 21. Gallery — libGallery.jsx 1:1 再現 (Pattern A: メイン + サムネ)
 * ─────────────────────────────────────────────────────────
 * - Section: paper bg, line border, padding 24x28
 * - kicker (mono accent ls 0.26em) + h3 (18px / 700)
 * - メインイメージ: aspect-ratio 4/3, line border
 * - Caption 行: bodySmall 13.5px / 1.8 / inkSoft + 番号 mono
 * - Thumbnails grid: items 数列 / gap 8 / 1:1 ratio / active=accent border
 * - Placeholder: tint bg + dot pattern + camera glyph (CSS 疑似要素・data URL SVG)
 * ========================================================== */
.era-gallery {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 24px 28px 28px;
  max-width: 100%;
  width: 100%;
  font-family: var(--font-jp);
  margin: 32px 0;
}
.era-gallery-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--era-accent);
  font-weight: 600;
  margin-bottom: 4px;
}
.era-gallery-heading {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  color: var(--era-ink);
  font-family: var(--font-jp);
  border: none;
  padding: 0;
}
.era-art-content .era-gallery-heading,
.entry-content .era-gallery-heading {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.era-gallery-main {
  cursor: zoom-in;
  border: 1px solid var(--era-line);
  margin: 0;
  background: transparent;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  display: block;
}
.era-gallery-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 2px 18px;
  border-bottom: 1px solid var(--era-line-soft);
}
.era-gallery-caption-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--era-ink-soft);
  flex: 1;
}
.era-gallery-caption-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--era-ink-muted);
  white-space: nowrap;
  padding-top: 2px;
  font-weight: 600;
}

.era-gallery-thumbs {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  grid-template-columns: repeat(5, 1fr); /* 5 items default */
}
.era-gallery-thumbs[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.era-gallery-thumbs[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.era-gallery-thumbs[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.era-gallery-thumbs[data-count="6"] { grid-template-columns: repeat(6, 1fr); }

.era-gallery-thumb {
  padding: 0;
  background: transparent;
  border: 1px solid var(--era-line);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, border-color 0.15s;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  display: block;
}
.era-gallery-thumb:hover,
.era-gallery-thumb.is-active {
  border-color: var(--era-accent);
  outline: 1px solid var(--era-accent);
  outline-offset: -2px;
  opacity: 1;
}

/* Placeholder tints (6 種・libGallery.jsx と同値) */
.era-gallery-img--0 { background: #E8DCC2; --era-gallery-ink: #C9B98F; }
.era-gallery-img--1 { background: #D9C8A5; --era-gallery-ink: #B09C6F; }
.era-gallery-img--2 { background: #E0D4B8; --era-gallery-ink: #BFAD81; }
.era-gallery-img--3 { background: #D2BF98; --era-gallery-ink: #A08866; }
.era-gallery-img--4 { background: #E5DCC4; --era-gallery-ink: #C4B28A; }
.era-gallery-img--5 { background: #CDB896; --era-gallery-ink: #9A8463; }

/* Dot pattern overlay */
.era-gallery-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.13) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.5;
  pointer-events: none;
}
/* Camera glyph in center */
.era-gallery-img::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><rect x='3' y='8' width='26' height='18' rx='1' stroke='%23A08866' stroke-width='1.3' fill='none'/><path d='M11 8l2-3h6l2 3' stroke='%23A08866' stroke-width='1.3' stroke-linejoin='round' fill='none'/><circle cx='16' cy='17' r='5' stroke='%23A08866' stroke-width='1.3' fill='none'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.55;
  pointer-events: none;
}
.era-gallery-thumb .era-gallery-img::after {
  width: 22px;
  height: 22px;
}

/* Label at bottom-right */
.era-gallery-label {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--era-ink-soft);
  opacity: 0.7;
  font-weight: 600;
  z-index: 1;
}
.era-gallery-thumb .era-gallery-label {
  bottom: 6px;
  right: 8px;
  opacity: 0.65;
}

@media (max-width: 600px) {
  .era-gallery {
    padding: 18px 16px 22px;
  }
  .era-gallery-thumbs {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ──── Gallery Lightbox (libGallery.jsx Lightbox 1:1) ──── */
/* メイン画像はクリック可能、ホバーでカーソル */
.era-gallery-main {
  cursor: zoom-in;
  outline: none;
}
.era-gallery-main:focus-visible {
  outline: 2px solid var(--era-accent);
  outline-offset: 2px;
}
/* ボディスクロールロック */
body.era-gallery-lb-open {
  overflow: hidden;
}
/* 全画面オーバーレイ — jsx: rgba(28,26,21,0.88), z 9999, padding 40 */
.era-gallery-lb {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 21, 0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.era-gallery-lb[hidden] {
  display: none;
}
/* 内側枠 — max-width 960 */
.era-gallery-lb-inner {
  max-width: 960px;
  width: 100%;
  cursor: default;
}
.era-gallery-lb-frame {
  background: #1F1B14;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.era-gallery-lb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.era-gallery-lb-img-label {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--era-gallery-ink);
  opacity: 0.7;
  font-weight: 600;
}
.era-gallery-lb-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 4px;
  color: #FBF7EE;
}
.era-gallery-lb-meta-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #C9B98F;
  margin-bottom: 6px;
  font-weight: 600;
}
.era-gallery-lb-meta-caption {
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1.7;
  max-width: 640px;
  color: #FBF7EE;
}
.era-gallery-lb-nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.era-gallery-lb-btn {
  background: transparent;
  color: #FBF7EE;
  border: 1px solid rgba(251, 247, 238, 0.35);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
  font-weight: 600;
}
.era-gallery-lb-btn:hover {
  border-color: rgba(251, 247, 238, 0.65);
  background: rgba(251, 247, 238, 0.06);
}
.era-gallery-lb-btn--close {
  padding-inline: 14px;
}
@media (max-width: 600px) {
  .era-gallery-lb {
    padding: 16px;
  }
  .era-gallery-lb-foot {
    flex-direction: column;
  }
  .era-gallery-lb-nav {
    width: 100%;
    justify-content: flex-end;
  }
}


/* ==========================================================
 * 22. Timeline — libTimeline.jsx 1:1 再現 (Pattern B: ステップ型)
 * ─────────────────────────────────────────────────────────
 * - Section: paper bg, line border, padding 24x28x26
 * - Header: kicker (mono accent ls 0.26em) + h3 (17px / 700) + range (mono right)
 * - 横タイムライン: step 数列, ベースライン + 進捗ライン (accent 50%)
 * - marker 14x14 (last 18x18 + filled + check svg), border 2px accent
 * - label 14px / 700 + note 12px / 1.7
 * - Footer: 結論 + VERIFIED ✓ pill (accentSoft bg)
 * ========================================================== */
.era-timeline {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 24px 28px 26px;
  max-width: 100%;
  width: 100%;
  font-family: var(--font-jp);
  color: var(--era-ink);
  margin: 32px 0;
}
@media (max-width: 420px) {
  .era-timeline { padding: 20px 18px; }
}

.era-timeline-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.era-timeline-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--era-accent);
  font-weight: 600;
  margin-bottom: 4px;
}
.era-timeline-heading {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--era-ink);
  font-family: var(--font-jp);
  border: none;
  padding: 0;
}
.era-art-content .era-timeline-heading,
.entry-content .era-timeline-heading {
  border: none;
  padding: 0;
  margin: 0;
}
.era-timeline-range {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--era-ink-muted);
  font-weight: 600;
  padding-bottom: 3px;
  white-space: nowrap;
}

/* Horizontal track */
.era-timeline-track {
  position: relative;
  padding-top: 8px;
}
.era-timeline-baseline {
  position: absolute;
  left: calc(12.5% + 1px);
  right: calc(12.5% + 1px);
  top: 17px;
  height: 1px;
  background: var(--era-line);
}
.era-timeline-progress-line {
  position: absolute;
  left: calc(12.5% + 1px);
  right: calc(12.5% + 1px);
  top: 17px;
  height: 1px;
  background: var(--era-accent);
  opacity: 0.5;
}

.era-timeline-steps {
  display: grid;
  gap: 0;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.era-timeline-steps[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.era-timeline-steps[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.era-timeline-steps[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.era-art-content .era-timeline-steps,
.entry-content .era-timeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.era-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  margin: 0;
}
.era-art-content .era-timeline-step,
.entry-content .era-timeline-step {
  margin: 0;
}

.era-timeline-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--era-paper);
  border: 2px solid var(--era-accent);
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.era-timeline-step--last .era-timeline-marker {
  width: 18px;
  height: 18px;
  background: var(--era-accent);
  margin-top: -2px;
}
.era-timeline-step--last .era-timeline-marker::before {
  content: '';
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 5.5l2 2 4-4.5' stroke='%23FBF7EE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.era-timeline-step-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--era-ink);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  font-family: var(--font-jp);
}
.era-timeline-step-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--era-ink-soft);
  max-width: 150px;
}

.era-timeline-footer {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--era-line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.era-timeline-conclusion {
  font-size: 13.5px;
  color: var(--era-ink-soft);
  line-height: 1.7;
  flex: 1;
  min-width: 0;
}
.era-timeline-conclusion strong {
  color: var(--era-ink);
  font-weight: 700;
}
.era-timeline-verified {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--era-accent);
  font-weight: 700;
  padding: 4px 10px;
  background: var(--era-accent-soft);
  white-space: nowrap;
}


/* ==========================================================
 * 23. QuoteBox — libQuoteBox.jsx 1:1 再現
 * ─────────────────────────────────────────────────────────
 * - article: paper bg, line border, padding 18x22
 * - header: stars + source badge + date / flex gap 14 / mb 12 / **borderなし**
 *   - stars: ★ filled (star) / ☆ empty (starEmpty) / fs 15 / ls 0.04em
 *   - source badge (Amazon/楽天/Yahoo!): lineSoft bg + ink color + fs 11.5 / 600 / padding 2x10 / radius 3
 *   - date: 12.5px / inkMuted
 * - body: jp 14.5px / 1.9 / inkSoft (「」で囲い)
 * ========================================================== */
.era-quote-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0;
}
.era-quote-stack > .era-quote { margin: 0; }

.era-quote {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 18px 22px;
  max-width: 100%;
  width: 100%;
  font-family: var(--font-jp);
  margin: 24px 0;
}

.era-quote-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding: 0;
  border: none;
  flex-wrap: wrap;
}

.era-quote-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.era-quote-star { color: var(--era-line); }
.era-quote-star--on { color: var(--era-star, #C8A14A); }

.era-quote-source {
  display: inline-block;
  padding: 2px 10px;
  background: var(--era-line-soft);
  color: var(--era-ink);
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 3px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.era-quote-date {
  font-size: 12.5px;
  color: var(--era-ink-muted);
  letter-spacing: 0.02em;
}

.era-quote-body,
.era-art-content .era-quote-body,
.entry-content .era-quote-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--era-ink-soft);
  font-family: var(--font-jp);
  font-style: normal;
  background: transparent;
  border: none;
  padding: 0;
}


/* ==========================================================
 * 24. FAQ — libFAQ.jsx 1:1 再現
 * ─────────────────────────────────────────────────────────
 * - section: paper bg, line border, padding 28x28x12
 * - header: "よくある質問" h3 19px / 700 / ls 0.04em / borderBottom line / pb 14
 * - 各 details:
 *   summary: flex / gap 14 / padding 20px 4px
 *     - Q initial: latin italic 32px / accentDeep / w 32 / center
 *     - q text: 15.5px / 1.7 / ink / 700 / ls 0.02em
 *     - chevron: 14x14 / + → ×(rotate 45deg) / accentDeep
 *   answer: flex / gap 14 / padding 4px 4px 22px
 *     - A initial: latin italic 32px / inkSoft
 *     - a text: 14.5px / 1.95 / inkSoft
 *     - related link (任意): accent / underline / "関連" + label + → / mt 14
 * ========================================================== */
.era-faq {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 18px 28px 12px; /* 上下対称化: タイトル上 (border→18px) と header 下罫線下 (4px+rest) のバランス */
  margin: 32px 0;
  font-family: var(--font-jp);
}

.era-faq-header {
  border-bottom: 1px solid var(--era-line);
  padding-bottom: 14px;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.era-faq-title,
.era-art-content .era-faq-title,
.entry-content .era-faq-title,
.era-art-content h3.era-faq-title,
.entry-content h3.era-faq-title {
  margin: 0 !important; /* JIN:R 親テーマ h3 の margin-top: 36px 干渉対策 */
  font-size: 19px;
  font-weight: 700;
  color: var(--era-ink);
  font-family: var(--font-jp);
  letter-spacing: 0.04em;
  border: none !important;       /* JIN:R 親 h3 緑バー干渉対策 */
  padding: 0 !important;          /* JIN:R 親 h3 padding-left: 12px 干渉対策 */
  background: none !important;
}
.era-art-content h3.era-faq-title::before,
.era-art-content h3.era-faq-title::after,
.entry-content h3.era-faq-title::before,
.entry-content h3.era-faq-title::after {
  content: none !important;
  display: none !important;
}

.era-faq-list {
  margin: 0;
  padding: 0;
}

details.era-faq-item {
  border-bottom: 1px solid var(--era-line);
  padding: 0;
  margin: 0;
}
details.era-faq-item:last-of-type {
  border-bottom: none;
}

details.era-faq-item > summary.era-faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 4px;
  background: transparent;
  border: none;
  font-family: var(--font-jp);
  width: 100%;
}
details.era-faq-item > summary.era-faq-question::-webkit-details-marker {
  display: none;
}
details.era-faq-item > summary.era-faq-question::marker {
  display: none;
  content: '';
}

.era-faq-initial {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  width: 32px;
  flex: 0 0 32px;
  text-align: center;
  letter-spacing: -0.02em;
}
.era-faq-initial--q { color: var(--era-accent-deep, #1F4029); }
.era-faq-initial--a { color: var(--era-ink-soft); }

.era-faq-question-text {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--era-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.era-faq-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  position: relative;
  margin-left: 12px;
  transition: transform 0.25s ease;
}
.era-faq-chevron::before,
.era-faq-chevron::after {
  content: '';
  position: absolute;
  background: var(--era-accent-deep, #1F4029);
  transition: opacity 0.25s ease;
}
.era-faq-chevron::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}
.era-faq-chevron::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}
details.era-faq-item[open] > summary.era-faq-question .era-faq-chevron {
  transform: rotate(45deg);
}
details.era-faq-item[open] > summary.era-faq-question .era-faq-chevron::after {
  opacity: 0;
}

.era-faq-answer {
  display: flex;
  gap: 14px;
  padding: 4px 4px 22px;
}
.era-faq-answer-text {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--era-ink-soft);
}

.era-faq-related,
.era-art-content a.era-faq-related,
.entry-content a.era-faq-related {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--era-accent) !important; /* 意図色 (#2E5E3D) 明示・JIN:R 干渉と同色 */
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--era-accent);
  padding-bottom: 2px;
  letter-spacing: 0.02em;
}
.era-faq-related-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.era-faq-related-arrow {
  font-size: 11px;
}


/* ==========================================================
 * 25. CTA — libCTA.jsx 5 バリエーション 1:1 再現
 * ─────────────────────────────────────────────────────────
 * A: CTAConclusion (結論型) — 既存 .era-cta-conclusion を活用
 * B: CTABullets (箇条書き推し型)
 * C: CTANo1 (ランキング1位バッジ型)
 * D: CTASlim (スリム型)
 * E: CTAComparison (比較連動型)
 * ─────────────────────────────────────────────────────────
 * ECButtons 共通: 3 col grid / Amazon (#FF9900) / 楽天 (#BF0000) / Yahoo! (#FF0033) / 全 #fff
 * ProductImg tones: warm / deep / green / paper グラデーション
 * ========================================================== */

/* ── ProductImg tones ── */
.era-cta-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.era-cta-img > .era-cta-img-glyph {
  width: 40%;
  height: 40%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 6px;
}
.era-cta-img--warm  { background: linear-gradient(135deg, #E8DCC4, #C9B99A); }
.era-cta-img--deep  { background: linear-gradient(135deg, #D4D4D0, #A8A8A0); }
.era-cta-img--green { background: linear-gradient(135deg, #D9DFC9, #A8B39A); }
.era-cta-img--paper { background: linear-gradient(135deg, #F0EADC, #D8CFB8); }

/* ── ECButtons 共通 (CTA 内専用) ── */
.era-cta-ec {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.era-cta-ec a,
.era-art-content .era-cta-ec a,
.entry-content .era-cta-ec a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  border: none;
  font-family: var(--font-jp);
  line-height: 1.3;
}
.era-cta-ec a:hover { opacity: 0.9; }
.era-cta-ec--compact a {
  padding: 8px 10px;
  font-size: 11px;
}
.era-cta-ec a.is-amazon  { background: #FF9900; color: #fff; }
.era-cta-ec a.is-rakuten { background: #BF0000; color: #fff; }
.era-cta-ec a.is-yahoo   { background: #FF0033; color: #fff; }
.era-cta-ec a > .arrow { font-size: 0.85em; }

/* ── B. CTABullets (箇条書き推し型) ── */
/* 2026-04-27: 背景を ベージュ → 白 に変更（外周のページ側ベージュとのコントラスト確保） */
/* 2026-05-16: max-width 640 → 100% に変更（他コンポーネントと横幅統一） */
.era-cta-bullets {
  max-width: 100%;
  background: var(--era-paper, #FFFFFF);
  border: 1px solid var(--era-line-soft);
  padding: 24px;
  margin: 32px 0;
  font-family: var(--font-jp);
}
.era-cta-bullets-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--era-accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.era-cta-bullets-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--era-ink);
  margin-bottom: 14px;
  line-height: 1.4;
  font-family: var(--font-jp);
  border: none;
  padding: 0;
}
.era-art-content .era-cta-bullets-heading,
.entry-content .era-cta-bullets-heading {
  border: none;
  padding: 0;
  margin: 0 0 14px;
}
.era-cta-bullets-list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.era-art-content .era-cta-bullets-list,
.entry-content .era-cta-bullets-list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.era-cta-bullets-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--era-ink);
  line-height: 1.6;
  margin: 0;
}
.era-art-content .era-cta-bullets-item,
.entry-content .era-cta-bullets-item {
  margin: 0;
  padding: 6px 0;
}
.era-cta-bullets-item::before {
  content: '✓';
  color: var(--era-accent);
  font-weight: 700;
  flex-shrink: 0;
}
.era-cta-bullets-product {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--era-line-soft);
  margin-bottom: 12px;
}
.era-cta-bullets-product > .era-cta-img {
  width: 72px;
  height: 72px;
}
.era-cta-bullets-product-info {
  flex: 1;
  min-width: 0;
}
.era-cta-bullets-product-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--era-ink);
  margin-bottom: 4px;
}
.era-cta-bullets-product-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--era-ink);
}

/* ── C. CTANo1 (ランキング 1 位バッジ型) ── */
.era-cta-no1 {
  max-width: 640px;
  position: relative;
  margin: 40px 0 32px;
  font-family: var(--font-jp);
}
.era-cta-no1-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--era-accent);
  color: #fff;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
}
.era-cta-no1-badge-mark {
  font-family: var(--font-latin);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.era-cta-no1-body {
  background: var(--era-paper);
  border: 2px solid var(--era-accent);
  padding: 28px 20px 20px;
}
.era-cta-no1-product {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}
.era-cta-no1-product > .era-cta-img {
  width: 100px;
  height: 100px;
}
.era-cta-no1-product-info {
  flex: 1;
  min-width: 0;
}
.era-cta-no1-maker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--era-ink-muted);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 4px;
}
.era-cta-no1-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--era-ink);
  line-height: 1.4;
  margin-bottom: 10px;
}
.era-cta-no1-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--era-ink);
}
.era-cta-no1-price-note {
  font-size: 11px;
  color: var(--era-ink-muted);
  font-weight: 400;
  margin-left: 6px;
}

/* ── D. CTASlim (スリム型) ── */
.era-cta-slim {
  max-width: 640px;
  background: var(--era-paper);
  border: 1px solid var(--era-line-soft);
  padding: 14px;
  margin: 24px 0;
  font-family: var(--font-jp);
  display: flex;
  gap: 14px;
  align-items: center;
}
.era-cta-slim > .era-cta-img {
  width: 60px;
  height: 60px;
}
.era-cta-slim-info {
  flex: 1;
  min-width: 0;
}
.era-cta-slim-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--era-ink);
  line-height: 1.35;
  margin-bottom: 3px;
}
.era-cta-slim-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--era-ink);
}
.era-cta-slim-btn,
.era-art-content a.era-cta-slim-btn,
.entry-content a.era-cta-slim-btn {
  background: var(--era-accent);
  color: #fff;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border: none;
  font-family: var(--font-jp);
  white-space: nowrap;
}

/* ── E. CTAComparison (比較表連動型) ── */
.era-cta-comparison {
  max-width: 640px;
  margin: 32px 0;
  font-family: var(--font-jp);
}
.era-cta-comparison-link {
  padding: 10px 14px;
  background: var(--era-bg, #F7F3EB);
  border: 1px solid var(--era-line-soft);
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.era-cta-comparison-icon {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--era-accent);
  letter-spacing: 0.18em;
  font-weight: 700;
}
.era-cta-comparison-label-1 {
  font-size: 12px;
  color: var(--era-ink-muted);
}
.era-cta-comparison-label-2 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--era-ink);
}
.era-cta-comparison-product {
  background: var(--era-paper);
  border: 1px solid var(--era-line-soft);
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.era-cta-comparison-product > .era-cta-img {
  width: 80px;
  height: 80px;
}
.era-cta-comparison-product-info {
  flex: 1;
  min-width: 0;
}
.era-cta-comparison-maker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--era-ink-muted);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 4px;
}
.era-cta-comparison-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--era-ink);
  line-height: 1.35;
  margin-bottom: 6px;
}
.era-cta-comparison-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--era-ink);
}
.era-cta-comparison-buttons {
  padding: 10px 0 0;
}

/* ── F. CTAMini (比較表連動型・修正版・ミニマル統合・2026-04-27) ── */
/*
 * 商品情報 + 3EC を 1 枠に統合した最小構成。
 * E (CTAComparison) のヘッダーなし版。
 * 用途: 本文中の T3 / T4 繰り返し配置・比較表直下
 */
.era-cta-mini {
  /* 2026-05-16: max-width 640 → 100% に変更（他コンポーネントと横幅統一） */
  max-width: 100%;
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  margin: 32px 0;
  font-family: var(--font-jp);
}

.era-cta-mini-product {
  padding: 20px;
  display: flex;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--era-line-soft);
}

.era-cta-mini-img {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #E8DCC4, #C9B99A);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.era-cta-mini-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.era-cta-mini-img:not(:has(img))::before {
  content: '';
  width: 40%;
  height: 40%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 6px;
}

.era-cta-mini-info {
  flex: 1;
  min-width: 0;
}

.era-cta-mini-maker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--era-ink-muted);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.era-cta-mini-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--era-ink);
  line-height: 1.4;
  margin-bottom: 6px;
}

.era-cta-mini-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--era-ink);
}
.era-cta-mini-price-note {
  font-size: 11px;
  color: var(--era-ink-muted);
  font-weight: 400;
  margin-left: 6px;
}

.era-cta-mini-cta {
  padding: 14px 20px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.era-cta-mini-cta a,
.era-cta-mini-cta a:link,
.era-cta-mini-cta a:visited,
.era-art-content .era-cta-mini-cta a,
.era-art-content .era-cta-mini-cta a:link,
.era-art-content .era-cta-mini-cta a:visited,
.entry-content .era-cta-mini-cta a,
.entry-content .era-cta-mini-cta a:link,
.entry-content .era-cta-mini-cta a:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff !important;
  text-decoration: none !important;
  border: none;
  font-family: var(--font-jp);
  line-height: 1.3;
}
.era-cta-mini-cta a:hover,
.era-cta-mini-cta a:focus {
  opacity: 0.9;
  color: #fff !important;
  text-decoration: none !important;
}
.era-cta-mini-cta a > span,
.era-cta-mini-cta a > .arrow {
  color: inherit;
  font-size: 0.85em;
  font-variant-emoji: text; /* 絵文字フォント化を抑止 (Win での ↗ 黒描画対策) */
  font-family: var(--font-mono, 'JetBrains Mono'), monospace;
}

.era-cta-mini-cta a.is-amazon  { background: #FF9900; color: #fff; }
.era-cta-mini-cta a.is-rakuten { background: #BF0000; color: #fff; }
.era-cta-mini-cta a.is-yahoo   { background: #FF0033; color: #fff; }

/* bullets CTA の中で EC ボタン部分は padding を 0 にして、外側 .era-cta-bullets の padding 24px と整列させる
   （2026-04-27: bullets 内側コンテンツとECボタンの左端 x 座標を揃える） */
.era-cta-bullets > .era-cta-mini-cta,
.era-cta-bullets .era-cta-bullets-product + .era-cta-mini-cta {
  padding: 0;
}

@media (max-width: 768px) {
  .era-cta-mini-cta a {
    font-size: 12px;
    padding: 12px 8px;
  }
}

/* ==========================================================
 * 26. NoticeBox — libNoticeBox.jsx 1:1 再現 (4 バリアント)
 * ─────────────────────────────────────────────────────────
 * point (緑): accent bar + accentSoft tint
 * caution (黄): yellowBar #B08A3E + yellowTint #F3EBD4
 * note (青): blueBar #5A7080 + blueTint #E5EAEE
 * checklist (緑・list 風)
 *
 * - 外枠: paper bg, line-soft top/right/bottom border, **3px left bar (variant 色)**
 * - icon: 20px CSS 疑似要素 SVG (variant 色)
 * - title: 15.5px / 700 / ink / ls 0.02em
 * - body: 14.5px / 1.9 / inkSoft
 * ========================================================== */
.era-nb {
  /* 2026-05-16: max-width 640 → 100% に変更（他コンポーネントと横幅統一） */
  max-width: 100%;
  display: flex;
  background: var(--era-paper);
  border-top: 1px solid var(--era-line-soft);
  border-right: 1px solid var(--era-line-soft);
  border-bottom: 1px solid var(--era-line-soft);
  border-left: 3px solid var(--era-accent);
  font-family: var(--font-jp);
  margin: 16px 0;
}
.era-nb-inner {
  padding: 14px 18px 14px 20px; /* 上下対称化 (18→14) — body の line-height 込みで視覚バランス取る */
  flex: 1;
  min-width: 0;
}
.era-nb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px; /* 10→8 で全体高さも詰める */
}
.era-nb-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.era-nb-title,
.era-art-content h4.era-nb-title,
.entry-content h4.era-nb-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--era-ink) !important;
  letter-spacing: 0.02em;
  font-family: var(--font-jp);
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  line-height: 1.2 !important; /* icon (20px) と縦中心揃えするため line-height を抑える */
}
.era-nb-body,
.era-art-content .era-nb-body,
.entry-content .era-nb-body {
  font-size: 14.5px;
  color: var(--era-ink-soft);
  line-height: 1.9;
  margin: 0;
}
.era-nb-body strong { color: var(--era-ink); font-weight: 700; }

/* point (緑) */
.era-nb--point { border-left-color: var(--era-accent); }
.era-nb--point .era-nb-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232E5E3D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v2M4.9 4.9l1.4 1.4M2 12h2M19.1 4.9l-1.4 1.4M20 12h2'/><path d='M9 17h6v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-2z'/><path d='M9 17c0-3-3-4-3-7a6 6 0 0 1 12 0c0 3-3 4-3 7'/></svg>");
}

/* caution (黄) */
.era-nb--caution { border-left-color: #B08A3E; }
.era-nb--caution .era-nb-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B08A3E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 2 20h20L12 3z'/><path d='M12 10v5'/><circle cx='12' cy='17.5' r='0.5' fill='%23B08A3E' stroke='none'/></svg>");
}

/* note (青) */
.era-nb--note { border-left-color: #5A7080; }
.era-nb--note .era-nb-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235A7080' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v5M12 16.5v.01'/></svg>");
}

/* checklist (緑) */
.era-nb--checklist { border-left-color: var(--era-accent); display: block; }
.era-nb--checklist .era-nb-inner { padding: 0; }
.era-nb-checklist-header {
  padding: 14px 18px 12px 20px;
  border-bottom: 1px solid var(--era-line-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.era-nb-checklist-header .era-nb-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232E5E3D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='1'/><path d='M7 9l2 2 4-4'/><path d='M14 10h4M14 15h4M7 15h2'/></svg>");
}
.era-nb-checklist-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--era-ink-muted);
  letter-spacing: 0.02em;
  font-weight: 700;
}
.era-nb-checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.era-art-content .era-nb-checklist-list,
.entry-content .era-nb-checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.era-nb-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 18px 13px 20px;
  border-bottom: 1px solid var(--era-line-soft);
  margin: 0;
}
.era-art-content .era-nb-checklist-item,
.entry-content .era-nb-checklist-item {
  margin: 0;
  padding: 13px 18px 13px 20px;
}
.era-nb-checklist-item:last-of-type {
  border-bottom: none;
}
.era-nb-checklist-checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1.5px solid var(--era-line);
  background: #fff;
  display: inline-block;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
/* libNoticeBox.jsx: クリックでチェック状態切替・jsx の SVG path "M5 12l5 5L20 7" を ::after で再現 */
.era-nb-checklist-item.is-checked .era-nb-checklist-checkbox {
  background-color: var(--era-accent) !important;
  border-color: var(--era-accent) !important;
}
.era-nb-checklist-item.is-checked .era-nb-checklist-checkbox::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}
.era-nb-checklist-item.is-checked .era-nb-checklist-text {
  color: var(--era-ink-muted);
  text-decoration: line-through;
}
/* libNoticeBox.jsx L157: チェック ON 時の行背景 tint (greenTint) */
.era-nb-checklist-item.is-checked {
  background: var(--era-accent-soft);
}
.era-nb-checklist-item:hover .era-nb-checklist-checkbox {
  border-color: var(--era-accent);
}
.era-nb-checklist-text {
  font-size: 14.5px;
  color: var(--era-ink-soft);
  line-height: 1.85;
  flex: 1;
}


/* ==========================================================
 * 27. StepGuide — libStepGuide.jsx 1:1 再現
 * ─────────────────────────────────────────────────────────
 * - 外枠: paper bg, line border, padding 28x28x32
 * - StepNumber (72px col):
 *   - "STEP" 10px accent ls 0.08 700
 *   - 番号 44px accentDeep latin italic 500
 *   - dashed connector borderLeft 1px accent (last 除く)
 * - 内容: h4 17px / body 14.5 / image 16:10 / point yellow / caution warm
 * - 末尾 CTA: 「準備ができたら」 + accent button
 * ========================================================== */
.era-sg {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 28px 28px 32px;
  font-family: var(--font-jp);
  margin: 32px 0;
}
.era-sg-step {
  display: flex;
  gap: 18px;
  padding-bottom: 24px;
}
.era-sg-step:last-of-type {
  padding-bottom: 0;
}
.era-sg-num {
  position: relative;
  width: 72px;
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.era-sg-num-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--era-accent);
  font-weight: 700;
  margin-bottom: 2px;
}
.era-sg-num-value {
  font-size: 44px;
  line-height: 1;
  color: var(--era-accent-deep, #1F4029);
  font-family: var(--font-latin);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
}
.era-sg-step:not(:last-of-type) .era-sg-num::after {
  content: '';
  flex: 1;
  border-left: 1px dashed var(--era-accent);
  opacity: 0.55;
  margin-top: 12px;
  margin-bottom: -8px;
  min-height: 24px;
  display: block;
  width: 1px;
}
.era-sg-content {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.era-sg-title,
.era-art-content .era-sg-title,
.entry-content .era-sg-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--era-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--font-jp);
  border: none;
  padding: 0;
}
.era-sg-body,
.era-art-content .era-sg-body,
.entry-content .era-sg-body {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--era-ink-soft);
  font-family: var(--font-jp);
}
.era-sg-image {
  margin-top: 12px;
}
.era-sg-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #ECE6D5 0%, #DCD4BE 100%);
  border: 1px solid var(--era-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #9A8F76;
}
.era-sg-image-caption {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--era-ink-muted);
  font-style: italic;
}
.era-sg-point {
  margin-top: 12px;
  padding: 10px 14px;
  background: #F3EBD4;
  border-left: 3px solid #B08A3E;
  font-size: 13.5px;
  line-height: 1.8;
  color: #4A3A1F;
}
.era-sg-point-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #6B521F;
  font-weight: 700;
  margin-right: 10px;
}
.era-sg-caution {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--era-warm-soft);
  border-left: 3px solid var(--era-warm);
  font-size: 13.5px;
  line-height: 1.8;
  color: #5A231A;
}
.era-sg-caution-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #7A2F1C;
  font-weight: 700;
  margin-right: 10px;
}
.era-sg-cta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--era-line);
  text-align: center;
}
.era-sg-cta-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--era-accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.era-sg-cta-btn,
.era-art-content a.era-sg-cta-btn,
.entry-content a.era-sg-cta-btn {
  display: inline-block;
  padding: 14px 36px;
  background: var(--era-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 2px;
  font-family: var(--font-jp);
}
.era-sg-cta-note {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--era-ink-muted);
}


/* ==========================================================
 * 28. ProsCons — libProsCons.jsx 1:1 再現
 * ─────────────────────────────────────────────────────────
 * - wrap: flex / gap 14 / margin 24 (≤720px stacked)
 * - column: paper / line / borderTop 4px (pros=accent / cons=warm) / padding 20x22
 *   - header: label (11 / 700 / ls 0.08 / pros=accentDeep cons=warmDeep) + title (15 / 700)
 *     borderBottom 1px dashed
 *   - ul: list none / gap 10
 *     - badge: 22x22 円 / +/− / 14 / 700
 *     - main: 14.5 / 1.8 / ink + sub 12.5 / 1.7 / inkSoft
 * ========================================================== */
.era-pc-wrap {
  display: flex;
  gap: 14px;
  margin: 24px 0;
}
@media (max-width: 720px) {
  .era-pc-wrap { flex-direction: column; }
}
.era-pc-col {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  border-radius: 2px;
  padding: 20px 22px 22px;
  flex: 1;
  min-width: 0;
  font-family: var(--font-jp);
}
.era-pc-col--pros { border-top: 4px solid var(--era-accent); }
.era-pc-col--cons { border-top: 4px solid var(--era-warm); }

.era-pc-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--era-line);
  flex-wrap: wrap;
}
.era-pc-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  line-height: 1.6;
  flex-shrink: 0;
}
.era-pc-col--pros .era-pc-label {
  background: var(--era-accent-soft);
  color: var(--era-accent-deep, #1F4029);
}
.era-pc-col--cons .era-pc-label {
  background: rgba(176, 138, 62, 0.14);
  color: var(--era-warm-deep, #7A2F1C);
}
.era-pc-title,
.era-art-content .era-pc-title,
.entry-content .era-pc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--era-ink);
  letter-spacing: 0.02em;
  font-family: var(--font-jp);
  margin: 0;
  border: none;
  padding: 0;
}

.era-pc-list,
.era-art-content .era-pc-list,
.entry-content .era-pc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.era-pc-item,
.era-art-content .era-pc-item,
.entry-content .era-pc-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}
.era-pc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  margin-top: 1px;
}
.era-pc-col--pros .era-pc-badge { background: var(--era-accent); }
.era-pc-col--cons .era-pc-badge { background: var(--era-warm); }
.era-pc-text {
  flex: 1;
  min-width: 0;
}
.era-pc-main {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--era-ink);
  font-weight: 700; /* メインを太字化して sub と明確に階層化 */
}
.era-pc-sub {
  /* sub (補足薄字) は廃止 — ユーザー指示で main の太字のみ表示 (2026-04-26) */
  display: none;
}


/* ==========================================================
 * 29. Product Card — libProduct.jsx 1:1 再現
 * ─────────────────────────────────────────────────────────
 * Horizontal: paper / line / padding 20 / grid 140px 1fr / gap 20
 *   - メーカー mono 9.5 / inkMuted / ls 0.16
 *   - 名前 16 / 700 / lh 1.55 / ls 0.01
 *   - tagline 12.5 / inkSoft / lh 1.85
 *   - features tag (full only): accentSoft / accent / 10.5
 *   - 価格 17 / 600 / "(税込・楽天参考価格)" 11
 *   - ボタン
 * Official: paper / accent 2px / padding 28 / 200 1fr / 緑 official ボタン lg
 * ========================================================== */
.era-product-h {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 20px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: stretch;
  font-family: var(--font-jp);
  margin: 24px 0;
}
.era-product-img {
  width: 100%; /* grid セル (140px) 幅にフィット — 未指定だと aspect-ratio で 232px に膨張する */
  aspect-ratio: 1 / 1;
  border: 1px solid var(--era-line);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  align-self: start;
}
.era-product-img--warm  { background: linear-gradient(135deg, #E8DCC4, #C9B99A); }
.era-product-img--deep  { background: linear-gradient(135deg, #BFB29A, #8F7B5C); }
.era-product-img--green { background: linear-gradient(135deg, #C6C9B0, #8A9370); }
.era-product-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.era-product-maker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--era-ink-muted);
  letter-spacing: 0.16em;
  font-weight: 600;
  margin-bottom: 6px;
}
.era-product-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--era-ink);
  line-height: 1.55;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.era-product-tagline {
  font-size: 12.5px;
  color: var(--era-ink-soft);
  line-height: 1.85;
  margin-bottom: 10px;
}
.era-product-features {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.era-product-feature {
  font-size: 10.5px;
  padding: 3px 9px;
  background: var(--era-accent-soft);
  color: var(--era-accent);
  letter-spacing: 0.04em;
  font-weight: 700;
}
.era-product-price {
  font-size: 17px;
  color: var(--era-ink);
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.era-product-price-note {
  font-size: 11px;
  color: var(--era-ink-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.era-product-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}
.era-product-buttons a,
.era-art-content .era-product-buttons a,
.entry-content .era-product-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: none;
  font-family: var(--font-jp);
  line-height: 1.3;
}
.era-product-buttons a.is-rakuten { background: #BF0000; color: #fff; }
.era-product-buttons a.is-amazon  { background: #FF9900; color: #1F1B14; }
.era-product-buttons a.is-yahoo   { background: #FF0033; color: #fff; }
.era-product-buttons a > .arrow { font-size: 0.9em; opacity: 0.8; }

/* Official variant */
.era-product-official {
  background: var(--era-paper);
  border: 2px solid var(--era-accent);
  padding: 28px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  font-family: var(--font-jp);
  margin: 24px 0;
}
.era-product-official .era-product-img {
  aspect-ratio: 1 / 1;
  width: 200px;
  height: 200px;
}
.era-product-official-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--era-ink);
  line-height: 1.5;
  margin-bottom: 10px;
}
.era-product-official-tagline {
  font-size: 13px;
  color: var(--era-ink-soft);
  line-height: 1.9;
  margin-bottom: 18px;
}
.era-product-official-btn,
.era-art-content a.era-product-official-btn,
.entry-content a.era-product-official-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--era-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: none;
  font-family: var(--font-jp);
}

@media (max-width: 700px) {
  .era-product-h { grid-template-columns: 1fr; gap: 14px; }
  .era-product-img { width: 100%; max-width: 240px; margin: 0 auto; }
  .era-product-official { grid-template-columns: 1fr; gap: 18px; }
  .era-product-official .era-product-img { width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
}


/* ==========================================================
 * 30. BadgeRules — libBadgeRules.jsx 1:1 再現
 * NEW / UPDATED / PR の 3 種バッジ（記事カード内に出す小ラベル）
 * ─────────────────────────────────────────────────────────
 * 共通: mono 9px / letter-spacing 0.16em / padding 2px 6px / fw 700
 * ========================================================== */
.era-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding: 2px 6px;
  line-height: 1.4;
  vertical-align: middle;
}
.era-badge--new {
  color: #fff;
  background: var(--era-accent);
}
.era-badge--updated {
  color: var(--era-accent);
  background: transparent;
  border: 1px solid var(--era-accent);
  padding: 1px 6px;
}
.era-badge--pr {
  color: var(--era-ink-soft);
  background: transparent;
  border: 1px solid var(--era-line);
  padding: 1px 6px;
}


/* CTA stack ラッパー (5 種縦並び) */
.era-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin: 32px 0;
}
.era-cta-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--era-ink-muted);
  font-weight: 700;
  margin-bottom: -32px;
}

/* SP 対応 — CTAConclusion 既存 SP は era-components で対応済 */
@media (max-width: 480px) {
  .era-cta-no1-product { flex-direction: column; }
  .era-cta-no1-product > .era-cta-img { width: 100%; height: 140px; }
  .era-cta-comparison-product { flex-direction: column; align-items: stretch; }
  .era-cta-comparison-product > .era-cta-img { width: 100%; height: 140px; }
  .era-cta-bullets-product { flex-direction: column; align-items: stretch; }
  .era-cta-bullets-product > .era-cta-img { width: 100%; height: 100px; }
  .era-cta-ec { grid-template-columns: 1fr; gap: 8px; }
}


/* ════════ BadgeRules (libBadgeRules.jsx 1:1) ════════ */
/* 元: handoff/src/libBadgeRules.jsx
 * NEW / UPDATED / PR バッジ運用ルール仕様書 (ドキュメントブロック)
 * 4 章構成: A. VISUAL REFERENCE / B. DISPLAY RULES / C. SCENARIOS / D. JIN:R IMPLEMENTATION + SUMMARY
 */
.era-br {
  background: var(--era-bg);
  padding: 32px;
  font-family: var(--font-jp);
  color: var(--era-ink);
  margin: 32px 0;
}

.era-br-section {
  margin-bottom: 32px;
}

.era-br-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--era-accent);
  margin-bottom: 12px;
  font-weight: 600;
}

.era-br-card {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 24px;
  margin-bottom: 16px;
}

.era-br-card-title {
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  color: var(--era-ink);
  margin-bottom: 14px;
}

/* Badges (NEW / UPDATED / PR) */
.era-br-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding: 2px 6px;
  display: inline-block;
  vertical-align: middle;
}
.era-br-badge--new {
  color: #fff;
  background: var(--era-accent);
}
.era-br-badge--updated {
  color: var(--era-accent);
  background: transparent;
  border: 1px solid var(--era-accent);
  padding: 1px 6px;
}
.era-br-badge--pr {
  color: var(--era-ink-soft);
  background: transparent;
  border: 1px solid var(--era-line);
  padding: 1px 6px;
}

/* A. Badge demo row */
.era-br-badge-row {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.era-br-badge-demo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.era-br-badge-note {
  font-size: 12px;
  color: var(--era-ink-soft);
}

/* A. Article card example divider */
.era-br-card-divider {
  border-top: 1px solid var(--era-line);
  padding-top: 16px;
}
.era-br-card-eyebrow {
  font-size: 11px;
  color: var(--era-ink-soft);
  margin-bottom: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
}
.era-br-card-tags {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.era-br-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--era-accent);
  font-weight: 600;
}
.era-br-card-headline {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  line-height: 1.5;
  color: var(--era-ink);
}

/* B. Row (label / value) */
.era-br-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--era-line);
  font-family: var(--font-jp);
  font-size: 13px;
}
.era-br-row-k {
  color: var(--era-ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.era-br-row-v {
  color: var(--era-ink);
  line-height: 1.6;
}

.era-br-note {
  margin-top: 16px;
  padding: 12px;
  background: var(--era-bg);
  font-size: 12px;
  color: var(--era-ink-soft);
  line-height: 1.6;
}

/* C. Scenario table */
.era-br-table {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  font-family: var(--font-mono);
  font-size: 12px;
}
.era-br-th {
  font-weight: 700;
  padding: 10px 0;
  border-bottom: 2px solid var(--era-ink);
  letter-spacing: 0.12em;
  color: var(--era-ink);
}
.era-br-td {
  padding: 10px 0;
  border-bottom: 1px dashed var(--era-line);
  color: var(--era-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.era-br-td--day {
  color: var(--era-ink-soft);
}
.era-br-empty {
  color: var(--era-ink-soft);
  font-size: 11px;
}

/* D. Code block */
.era-br-pre {
  background: var(--era-bg);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  overflow: auto;
  margin: 0;
  color: var(--era-ink);
  border: 1px solid var(--era-line);
  white-space: pre;
}

/* SUMMARY (dark panel) */
.era-br-summary {
  padding: 24px;
  background: var(--era-ink);
  color: #fff;
  border-radius: 2px;
  margin-top: 24px;
}
.era-br-summary-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: #8FAE95;
  margin-bottom: 10px;
  font-weight: 600;
}
.era-br-summary-body {
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1.8;
  color: #fff;
}
.era-br-summary-note {
  margin-top: 10px;
  color: #C8D6C9;
  font-size: 12px;
}

/* SP — BadgeRules (compress padding & 1col rows on mobile) */
@media (max-width: 600px) {
  .era-br { padding: 20px; }
  .era-br-card { padding: 18px; }
  .era-br-row { grid-template-columns: 1fr; gap: 4px; }
  .era-br-table { grid-template-columns: 84px 1fr 1fr; font-size: 11px; }
  .era-br-pre { font-size: 11px; padding: 12px; }
}

/* ════════════════════════════════════════════════════
 * Gallery Mosaic (libGallery.jsx Pattern B マガジン型)
 * ════════════════════════════════════════════════════ */
.era-gallery-mosaic {
  font-family: var(--font-jp);
  margin: 24px 0;
}
.era-gallery-mosaic-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
}
.era-gallery-mosaic-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--era-ink-muted);
  font-weight: 600;
  padding-bottom: 4px;
}
.era-gallery-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
  gap: 6px;
}
.era-gallery-mosaic-fig {
  margin: 0;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--era-line);
  height: 100%;
}
.era-gallery-mosaic-fig .era-gallery-img {
  width: 100%;
  height: 100%;
  display: block;
}
.era-gallery-mosaic-fig--big  { grid-column: span 2; grid-row: span 2; }
.era-gallery-mosaic-fig--tall { grid-column: span 1; grid-row: span 2; }
.era-gallery-mosaic-fig--wide { grid-column: span 2; grid-row: span 1; }
.era-gallery-mosaic-fig--sm   { grid-column: span 1; grid-row: span 1; }
.era-gallery-mosaic-caption {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--era-ink-muted);
  font-style: italic;
  padding-left: 10px;
  border-left: 2px solid var(--era-line);
}
@media (max-width: 600px) {
  .era-gallery-mosaic-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; }
  .era-gallery-mosaic-fig--big,
  .era-gallery-mosaic-fig--wide { grid-column: span 2; grid-row: span 2; }
  .era-gallery-mosaic-fig--tall { grid-column: span 1; grid-row: span 2; }
  .era-gallery-mosaic-fig--sm   { grid-column: span 1; grid-row: span 1; }
}

/* ════════════════════════════════════════════════════
 * Timeline Diary (libTimeline.jsx Pattern A 日記型)
 * ════════════════════════════════════════════════════ */
.era-timeline-diary {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  padding: 28px 32px 32px;
  font-family: var(--font-jp);
  color: var(--era-ink);
  margin: 24px 0;
}
.era-timeline-diary-heading {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 28px;
  color: var(--era-ink);
}
.era-timeline-diary-track {
  position: relative;
}
.era-timeline-diary-rule {
  position: absolute;
  left: 86px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--era-line);
}
.era-timeline-diary-entry {
  display: grid;
  grid-template-columns: 74px 24px 1fr;
  gap: 0;
  padding-bottom: 28px;
  position: relative;
}
.era-timeline-diary-entry.is-last { padding-bottom: 0; }
.era-timeline-diary-left {
  padding-top: 2px;
  text-align: right;
  padding-right: 16px;
}
.era-timeline-diary-day {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--era-accent);
  font-weight: 700;
}
.era-timeline-diary-date {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--era-ink-muted);
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.era-timeline-diary-mid {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.era-timeline-diary-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--era-paper);
  border: 2px solid var(--era-accent);
  box-shadow: 0 0 0 4px var(--era-paper);
  position: relative;
  z-index: 1;
}
.era-timeline-diary-content {
  padding-left: 16px;
}
.era-timeline-diary-title {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--era-ink);
  letter-spacing: 0.02em;
  line-height: 1.55;
}
.era-timeline-diary-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--era-ink-soft);
}
.era-timeline-diary-feeling {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--era-accent);
  font-weight: 600;
  padding: 3px 9px;
  background: var(--era-accent-soft);
  border: 1px solid rgba(46, 94, 61, 0.2);
}
@media (max-width: 600px) {
  .era-timeline-diary { padding: 20px 16px; }
  .era-timeline-diary-entry { grid-template-columns: 60px 20px 1fr; }
  .era-timeline-diary-rule { left: 70px; }
  .era-timeline-diary-day { font-size: 9px; letter-spacing: 0.18em; }
  .era-timeline-diary-content { padding-left: 12px; }
}


/* ==========================================================
 * 30. ProductDetailed — 主役商品ボックス（[ebproduct id="..."] ショートコード）
 * ──────────────────────────────────────────────────────────
 * 完成イメージ準拠 (2026-04-26)
 * ヘッダー (バッジ+メーカー+商品名+型番) → 区切り線
 *   → 2 カラム body (画像正方形 / 情報) → 区切り線
 *     → スペック表 2 列
 * ========================================================== */
.era-product-detailed {
  /* 2026-04-27: リデザイン正規 token (libP4Tokens.jsx paper=#FFFFFF) に合わせて白へ。
     旧 #FAF7F0 は子テーマ移植時の誤記。 */
  background: #FFFFFF;
  border: 1px solid #E5DFCD;
  padding: 32px 36px;
  margin: 32px 0;
  font-family: var(--era-font-jp), 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  color: #1A1A1A;
}

/* === Header === */
.era-product-detailed-header {
  border-bottom: 1px solid #ECE6D4;
  padding-bottom: 24px;
  margin-bottom: 28px;
}
.era-product-detailed-badge-wrap {
  margin-bottom: 18px;
}
.era-product-detailed-badge {
  display: inline-block;
  background: #2F5D40;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  line-height: 1.6;
}
.era-product-detailed-maker,
.era-art-content .era-product-detailed-maker,
.entry-content .era-product-detailed-maker {
  font-size: 11px;
  color: #999;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin: 0 0 6px;
  padding: 0;
  border: none;
  background: none;
}
/* 商品名 - 親テーマ h3 を完全に上書きするため詳細度を上げる (.era-product-detailed h3.era-product-detailed-name で .a .b な詳細度) */
.era-product-detailed h3.era-product-detailed-name,
.era-art-content .era-product-detailed h3.era-product-detailed-name,
.entry-content .era-product-detailed h3.era-product-detailed-name,
body.wp-child-theme-jin-r-child .era-product-detailed h3.era-product-detailed-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.005em !important;
  color: #1A1A1A !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: var(--era-font-jp), 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif !important;
  position: static !important;
}
.era-product-detailed h3.era-product-detailed-name::before,
.era-product-detailed h3.era-product-detailed-name::after,
body.wp-child-theme-jin-r-child .era-product-detailed h3.era-product-detailed-name::before,
body.wp-child-theme-jin-r-child .era-product-detailed h3.era-product-detailed-name::after {
  content: none !important;
  display: none !important;
  border: none !important;
  background: none !important;
}
.era-product-detailed-model {
  font-size: 12px;
  color: #999;
  font-family: 'JetBrains Mono', var(--era-font-mono, ui-monospace), monospace;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* === Body (image + info 2 cols) ===
 * Claude Design 構造的高さ一致仕様 (2026-04-27 改訂):
 *  - grid: minmax(280px, 38%) 1fr で画像列・右列を割付
 *  - align-items: stretch で両カラムを同じ高さに伸ばす
 *  - 画像は aspect-ratio 1/1 維持 (商品画像が切れない)
 *  - 右カラムが画像高さに足りなければ画像下に余白、超えれば右が伸びて画像下に余白 (どちらでも崩れない)
 *  - info の cta は margin-top: auto で下端固定 → 画像下端と Amazonボタン下端が揃う */
.era-product-detailed-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 28px;
}
.era-product-detailed-img-wrap {
  /* 2026-04-27: 画像 wrap は aspect-ratio で正方形固定 + 上端揃え。
     info列は features を1行強制 + 余白圧縮で 327px 以下に収まるように設計。
     「画像本体上端=Priceの上端」「画像本体下端=Amazonボタン下端」を両方揃える。 */
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: transparent;
  align-self: start;
}
.era-product-detailed-img,
.era-art-content .era-product-detailed-img-wrap .era-product-detailed-img,
.entry-content .era-product-detailed-img-wrap .era-product-detailed-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  max-width: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
.era-product-detailed-img--placeholder {
  background: linear-gradient(135deg, #B5A580, #8F7E5C);
}
.era-product-detailed-img-source {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', var(--era-font-mono, ui-monospace), monospace;
}

.era-product-detailed-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
}

/* === Section label (── PRICE / ── SPECIFICATIONS) === */
.era-product-detailed-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-family: 'JetBrains Mono', var(--era-font-mono, ui-monospace), monospace;
  margin-bottom: 10px;
}
.era-product-detailed-section-label-line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: #999;
  flex-shrink: 0;
}

/* === Price === */
.era-product-detailed-price-section {
  margin-bottom: 10px;
}
.era-product-detailed-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.era-product-detailed-price-num {
  font-size: 32px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1;
  letter-spacing: 0.01em;
}
.era-product-detailed-price-note {
  font-size: 11px;
  color: #999;
  letter-spacing: 0.02em;
}
.era-product-detailed-price-disclaimer,
.era-art-content p.era-product-detailed-price-disclaimer,
.entry-content p.era-product-detailed-price-disclaimer {
  font-size: 12px;
  color: #6B5F4E;
  margin: 0 !important;
  padding: 0;
  line-height: 1.6;
}

/* === Tagline - 親テーマ p (15px) を上書き、画像高さ近接化のため line-height 圧縮 === */
.era-product-detailed p.era-product-detailed-tagline,
.era-art-content .era-product-detailed p.era-product-detailed-tagline,
.entry-content .era-product-detailed p.era-product-detailed-tagline,
body.wp-child-theme-jin-r-child .era-product-detailed p.era-product-detailed-tagline {
  font-size: 13px !important;
  color: #6B5F4E !important;
  line-height: 1.7 !important;
  letter-spacing: 0.02em !important;
  margin: 12px 0 10px !important;
  padding: 0 !important;
}

/* === Features === */
.era-product-detailed-features {
  /* 2026-04-27: 1行強制で折り返しを防ぎ、info列高さを画像wrap高さに収める */
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 3px;
  margin-bottom: 4px;
}
.era-product-detailed-feature {
  display: inline-block;
  background: #fff;
  color: #2F5D40;
  border: 1px solid #2F5D40;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 3px 4px;
  line-height: 1.5;
  white-space: nowrap;
}

/* === CTA buttons (画像高さ近接化のため padding/gap 圧縮) === */
.era-product-detailed-cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}
.era-product-detailed-btn,
.era-art-content a.era-product-detailed-btn,
.entry-content a.era-product-detailed-btn,
.era-art-content a.era-product-detailed-btn:link,
.era-art-content a.era-product-detailed-btn:visited {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: var(--era-font-jp), 'Zen Kaku Gothic New', sans-serif;
  transition: opacity 0.2s;
}
.era-product-detailed-btn:hover,
.era-product-detailed-btn:focus {
  opacity: 0.9;
  color: #fff !important;
  text-decoration: none !important;
}
.era-product-detailed-btn--yahoo   { background: #FF0033; }
.era-product-detailed-btn--rakuten { background: #BF0000; }
.era-product-detailed-btn--amazon  { background: #FF9900; }
.era-product-detailed-btn-arrow {
  font-size: 14px;
  opacity: 0.7;
  color: inherit;
  font-variant-emoji: text; /* 絵文字フォント化抑止 (↗ U+2197 を白文字で描画) */
  font-family: 'JetBrains Mono', var(--era-font-mono, ui-monospace), monospace;
}

/* === Specifications === */
.era-product-detailed-specs-section {
  border-top: 1px solid #ECE6D4;
  padding-top: 24px;
}
.era-product-detailed-specs-section .era-product-detailed-section-label {
  margin-bottom: 8px;
}
.era-product-detailed-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}
.era-product-detailed-spec-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  border-bottom: 1px dashed #ECE6D4;
  padding: 18px 0;
}
.era-product-detailed-spec-label,
.era-art-content .era-product-detailed-spec-label,
.entry-content .era-product-detailed-spec-label {
  font-size: 12px !important;
  color: #6B5F4E !important;
  font-family: 'JetBrains Mono', var(--era-font-mono, ui-monospace), monospace !important;
  letter-spacing: 0.02em !important;
}
.era-product-detailed-spec-value,
.era-art-content .era-product-detailed-spec-value,
.entry-content .era-product-detailed-spec-value {
  font-size: 13.5px !important;
  color: #1A1A1A !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* === Responsive === */
@media (max-width: 768px) {
  .era-product-detailed { padding: 24px 20px; }
  .era-product-detailed-body {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
  .era-product-detailed-info {
    min-height: 0;  /* 高さ強制を解除 */
    height: auto;
  }
  .era-product-detailed-cta {
    margin-top: 0;  /* CTA 下端固定も解除 */
  }
  .era-product-detailed-name,
  .era-art-content h3.era-product-detailed-name,
  .entry-content h3.era-product-detailed-name {
    font-size: 20px !important;
  }
  .era-product-detailed-price-num { font-size: 28px; }
  .era-product-detailed-specs { grid-template-columns: 1fr; column-gap: 0; }
  .era-product-detailed-img-wrap { max-width: 320px; margin: 0 auto; }
}


/* ============================================================
 * 20. Marker (.era-marker) — 蛍光ペン風アンダーライン (2026-04-27 更新 / 高さ調整版)
 *  - 主色 --era-marker (#F0D87A マスタード寄りイエロー)
 *  - --warm 第二色 --era-marker-warm (#F4C9B8 ダスティピンク・警告ニュアンス)
 *  - 文字下 24% (70〜94%) を塗る。文字下に薄く敷く mybest 系の佇まい
 *    (旧仕様 42%(58〜94%) は塗りが厚く太字との二重強調感が強かったので低めに)
 *  - font-weight は変えない（マーカーは色で目立たせる役割）
 *  - 行をまたぐ際も自然に折り返す（inline 要素として動作）
 *  - 既存 <mark> のインライン style: linear-gradient 記述を本クラスに統一する
 *  - 注意: --era-yellow-tint (#F3EBD4) は背景と同化して見えなくなるため非採用
 * ============================================================ */
.era-marker,
.era-art-content mark.era-marker,
.entry-content mark.era-marker {
  background: linear-gradient(
    transparent 70%,
    var(--era-marker, #F0D87A) 70%,
    var(--era-marker, #F0D87A) 94%,
    transparent 94%
  );
  padding: 0 2px;
  color: inherit;
}

.era-marker--warm,
.era-art-content mark.era-marker--warm,
.entry-content mark.era-marker--warm {
  background: linear-gradient(
    transparent 70%,
    var(--era-marker-warm, #F4C9B8) 70%,
    var(--era-marker-warm, #F4C9B8) 94%,
    transparent 94%
  );
  padding: 0 2px;
  color: inherit;
}