/*
 * ドウジンナビ — トンマナCSS（Lv4 A: 夜の高級ラウンジ）
 *
 * Lv4 A 改修方針（中村さん決定 / 2026-05-15）:
 *   - メイン: ワインレッド `#722F37`（夜の高級ラウンジ・落ち着いた色気）
 *   - メイン濃色: `#5A2329`（リンク・ホバー濃色）
 *   - アクセント（差別化要素・案②採用）: アイボリー `#F5F0E1`
 *       → 過去Lv3のパープルを完全に消し、夜のラウンジ感を貫く統一感優先
 *       → `.dn-accent` クラスは残置するが値はアイボリーに変更
 *       → H3左ボーダー・引用ブロックも `--dn-color-accent: #F5F0E1` で統一
 *   - CTA: 上質ゴールド `#D4AF37`（文字色は純黒寄り `#1F1F1F`）
 *   - CTAシャドウ: `#A88A1A`
 *   - ヘッダー: 漆黒 `#0F0F0F` + アイボリー文字 `#F5F0E1`
 *   - セクション帯: ワインレッド `#722F37` + アイボリー文字
 *   - バッジ: 新着=ワイン明 `#A0464F` / 割引=落ち着き赤 `#C12534` / 限定=上質ゴールド `#D4AF37` / 完売=灰
 *   - 商品カード: ホバーで `rgba(114, 47, 55, 0.18)` ワイン薄シャドウ
 *   - 背景色: `#FAF7F2` アイボリー寄り
 *   - 本文行間: 1.85 維持
 *
 * 反映方針:
 *   - 夜の高級ラウンジ的なトンマナで、FANZAコピー風からは距離を置く
 *   - 商標・ロゴ・画像・コピー文の流用は引き続き禁止
 *   - パープル差別化要素はアイボリーに置換し、夜のラウンジ感で統一（案②）
 *
 * 構成:
 *   §1. CSS変数（Lv4 A パレット）
 *   §2. C7: フォントスタック + body背景アイボリー
 *   §3. ヘッダー漆黒化（SWELL強制上書き）
 *   §4. C1: セクション見出し（H2）のワイン帯化＋ゴールド下線
 *   §5. C4: CTAボタン（上質ゴールド系）
 *   §6. C2: 商品カード（ワインホバー）
 *   §7. C3: 価格バッジ（ワイン明/落ち着き赤/ゴールド/灰）
 *   §8. C6: 左サイドバー（ワイン系ホバー）
 *   §9. C9: ヘッダーR18バッジ
 *   §10. C11: 記事本文（H3アイボリー左ボーダー・引用アイボリー）
 *   §11. C12: フッターコンプライアンス
 *   §12. レスポンシブ
 *   §13. 記事ヘッダー直下カテゴリラベル（2026-05-15 追加）
 *   §14. PR表記バナー（2026-05-15 追加）
 *   §15. 18禁注意フッター固定バー（2026-05-15 追加）
 *   §16. CTA Gold Gradient Button（2026-05-15 追加）
 *   §17. post_content 余白調整（2026-05-15 追加）
 *   §18. v7 記事本文クラス群（cta-2line/dn-spec-table/work-package/work-sample 等 / 2026-05-17 追加）
 *   §19. v8 キャンペーン情報囲みボックス（2026-05-17 追加）
 *   §20. カテゴリ/タグ視認性向上（2026-05-18 追加）
 *
 * @package SwellChild
 * @since   2026-05-15
 */

/* ============================================================
 * §1. CSS変数（Lv4 A パレット）
 * ============================================================ */
:root {
  /* ===== Lv4 A: 夜の高級ラウンジ ===== */
  /* ── メイン: ワインレッド ── */
  --dn-color-primary:        #722F37;  /* ワインレッド（メイン） */
  --dn-color-primary-dark:   #5A2329;  /* ワイン濃色（ホバー等） */
  --dn-color-primary-light:  #F4E9EB;  /* ワイン薄背景（ホバー帯） */

  /* ── アクセント: アイボリー（案②採用: 夜のラウンジ感統一） ── */
  --dn-color-accent:         #F5F0E1;  /* アイボリー（H3左ボーダー・引用・dn-accent） */
  --dn-color-accent-dark:    #D8CFB6;  /* アイボリー濃い（ホバー） */
  --dn-color-accent-light:   #FBF8EF;  /* アイボリー薄背景 */

  /* ── CTA: 上質ゴールド ── */
  --dn-color-cta:            #D4AF37;  /* 上質ゴールド */
  --dn-color-cta-shadow:     #A88A1A;  /* ゴールド下シャドウ */
  --dn-color-cta-text:       #1F1F1F;  /* CTA文字は純黒寄り */

  /* ── ヘッダー: 漆黒 ── */
  --dn-color-header-bg:      #0F0F0F;  /* 漆黒背景 */
  --dn-color-header-text:    #F5F0E1;  /* アイボリー文字 */
  --dn-color-header-link:    #F5F0E1;
  --dn-color-header-hover:   #D4AF37;  /* グロナビホバー時のゴールド下線 */

  /* ── セクションキャプション: ワイン帯 ── */
  --dn-color-section-cap:        #722F37;  /* ワインレッドセクション帯 */
  --dn-color-section-cap-text:   #F5F0E1;  /* アイボリー文字 */
  --dn-color-section-cap-accent: #D4AF37;  /* 下線ゴールドアクセント */

  /* ── 価格・バッジ ── */
  --dn-color-price:           #C12534;  /* 価格は落ち着いた赤 */
  --dn-color-point:           #16A34A;
  --dn-color-badge-new:       #A0464F;  /* 新着=ワイン明 */
  --dn-color-badge-sale:      #C12534;  /* 割引=落ち着き赤 */
  --dn-color-badge-limited:   #D4AF37;  /* 限定=上質ゴールド */
  --dn-color-badge-sold:      #9CA3AF;  /* 完売=灰 */

  /* ── 商品カード ── */
  --dn-color-card-border:     #E5E0D6;
  --dn-color-card-hover:      rgba(114, 47, 55, 0.18);  /* ワイン薄シャドウ */

  /* ── ニュートラル ── */
  --dn-color-text:        #1F1F1F;   /* 純黒寄り */
  --dn-color-text-mute:   #6B7280;
  --dn-color-border:      #E5E0D6;
  --dn-color-bg:          #FAF7F2;   /* アイボリー寄り背景 */
  --dn-color-bg-soft:     #F2EDE3;

  /* ── タイポ ── */
  --dn-line-height-body:  1.85;      /* 本文行間 維持 */
  --dn-line-height-tight: 1.45;
  --dn-font-stack:
    "Hiragino Kaku Gothic Pro",
    "ヒラギノ角ゴ Pro W3",
    "Hiragino Sans",
    "Noto Sans JP",
    "メイリオ",
    Meiryo,
    sans-serif;
  --dn-font-mincho:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Noto Serif JP",
    serif;

  /* ── 後方互換エイリアス（既存変数名を残す・段階移行用） ── */
  --dn-color-main:            var(--dn-color-primary);
  --dn-color-main-dark:       var(--dn-color-primary-dark);
  --dn-color-main-light:      var(--dn-color-primary-light);
  --dn-color-section-bar:     var(--dn-color-section-cap);
  --dn-color-section-text:    var(--dn-color-section-cap-text);
  --dn-color-discount-badge:  var(--dn-color-badge-sale);
  --dn-color-new-badge:       var(--dn-color-badge-new);
  --dn-color-limited-badge:   var(--dn-color-badge-limited);
  --dn-color-sold-out-badge:  var(--dn-color-badge-sold);

  /* ============================================================
   * SWELL 独自CSS変数のブリッジ（Lv4 A 反映の本丸）
   *   SWELL本体は --color_main / --color_link / --color_text_main 等を
   *   多数のセレクタで使っている。子テーマで :root に再代入することで
   *   個別セレクタを書かなくても本体側の色を一括上書きできる。
   * ============================================================ */
  --color_main:        #722F37;
  --color_main_thin:   #F4E9EB;
  --color_text_main:   #1F1F1F;
  --color_link:        #5A2329;
  --color_link_hover:  #722F37;
  --color_accent:      #F5F0E1;
  --color_btn:         #D4AF37;
  --color_btn_hover:   #C19E2E;
  --color_btn_text:    #1F1F1F;
  --swl-color_main:        #722F37;
  --swl-color_main_thin:   #F4E9EB;
  --swl-color_text_main:   #1F1F1F;
  --swl-color_link:        #5A2329;
  --swl-color_link_hover:  #722F37;
  --swl-color_accent:      #F5F0E1;
  --swl-color_btn:         #D4AF37;
  --swl-color_btn_text:    #1F1F1F;
}

/* SWELL は <html> や :where(:root) でも変数を定義しているため、
   詳細度 0,1,0 で再宣言してより上位スコープを上書きする */
html,
:root,
:where(:root) {
  --color_main:        #722F37;
  --color_main_thin:   #F4E9EB;
  --color_link:        #5A2329;
  --color_link_hover:  #722F37;
  --color_accent:      #F5F0E1;
  --color_btn:         #D4AF37;
  --color_btn_text:    #1F1F1F;
}

/* ============================================================
 * §2. C7: フォントスタック + body背景アイボリー
 * ============================================================ */
body {
  font-family: var(--dn-font-stack);
  background-color: #FAF7F2;  /* Lv4 A: アイボリー寄り背景を明示 */
}

.l-header,
.l-mainContent,
.l-footer {
  font-family: var(--dn-font-stack);
}

/* 引用ブロックは明朝（差別化ノイズ用） */
.l-mainContent blockquote {
  font-family: var(--dn-font-mincho);
}

/* リンクの既定（通常は濃色テキスト、ホバーでワインレッド） */
.l-mainContent a {
  color: var(--dn-color-text);
  text-decoration: underline;
  text-decoration-color: var(--dn-color-border);
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.l-mainContent a:hover {
  color: var(--dn-color-primary);
  text-decoration-color: var(--dn-color-primary);
}

/* ============================================================
 * §3. ヘッダー漆黒化（Lv4 A / SWELL強制上書き）
 *   本来はSWELLカスタマイザーで設定する方が作法だが、Lv4 A を子テーマ完結
 *   で再現するため CSS で強制上書きする。
 * ============================================================ */
body .l-header,
body .l-header.-parallel,
body .l-header .l-container,
body .l-header__bar,
body .l-header__barInner,
body .l-header__inner,
body .l-fixHeader,
body .l-fixHeader__inner {
  background-color: var(--dn-color-header-bg) !important;
  color: var(--dn-color-header-text) !important;
}

/* ヘッダー内のテキスト・リンク全般をアイボリーに */
body .l-header,
body .l-header a,
body .l-header .c-siteTitle,
body .l-header .c-siteTitle a,
body .l-header .c-headerNav__item,
body .l-header .c-headerNav__item a,
body .l-header .c-iconBtn,
body .l-header .c-iconBtn__icon,
body .l-fixHeader,
body .l-fixHeader a {
  color: var(--dn-color-header-link) !important;
}

/* グローバルナビ項目（.l-header__gnav と .l-fixHeader__gnav の両方を網羅） */
body .l-header .c-gnav,
body .l-header .c-gnav__item,
body .l-header .c-gnav__item > a,
body .l-header .c-gnav li > a,
body .l-fixHeader .c-gnav,
body .l-fixHeader .c-gnav__item,
body .l-fixHeader .c-gnav__item > a,
body .l-fixHeader .c-gnav li > a {
  color: var(--dn-color-header-link) !important;
  background-color: transparent !important;
}

/* グロナビホバー時: ゴールドの下線（夜のラウンジ寄せ） */
/* text-decoration を使ってテキスト幅に厳密に合わせる */
.l-header .c-gnav__item > a,
.l-header .c-gnav li > a {
  transition: color 0.15s ease;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.l-header .c-gnav__item > a:hover,
.l-header .c-gnav li > a:hover {
  color: var(--dn-color-header-hover) !important;
  text-decoration: underline solid var(--dn-color-header-hover);
  text-decoration-thickness: 2px;
}

/* ヘッダー検索アイコン・ボタン色 */
.l-header .p-spMenu__btn,
.l-header .p-headerSearch__btn,
.l-header .p-spMenuBtn__bars,
.l-header .p-spMenuBtn__bars::before,
.l-header .p-spMenuBtn__bars::after {
  background-color: var(--dn-color-header-text) !important;
  color: var(--dn-color-header-text) !important;
}

/* ============================================================
 * §4. C1: セクション見出し（H2）のワイン帯化＋ゴールド下線
 *   ワイン帯 + アイボリー文字 + 角丸3px + ゴールドの下線アクセント
 * ============================================================ */
.l-mainContent .dn-section-bar,
.front-page-content h2.dn-section-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 30px;
  padding: 0 14px;
  margin: 24px 0 16px;
  border-radius: 3px;
  background-color: var(--dn-color-section-cap);
  color: var(--dn-color-section-cap-text);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.l-mainContent .dn-section-bar::after {
  /* ゴールドの下線アクセント */
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--dn-color-section-cap-accent) 0%,
    var(--dn-color-section-cap-accent) 40%,
    transparent 100%);
  border-radius: 0 0 2px 2px;
}

.l-mainContent .dn-section-bar .dn-section-bar__more {
  color: var(--dn-color-accent);   /* アイボリー */
  font-size: 12px;
  text-decoration: none;
}
.l-mainContent .dn-section-bar .dn-section-bar__more:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ============================================================
 * §5. C4: CTAボタン（上質ゴールド系）
 *   ゴールド地 + 純黒寄り文字でコントラスト確保
 * ============================================================ */
.dn-btn-cta,
a.dn-btn-cta {
  display: inline-block;
  box-sizing: border-box;
  padding: 14px 32px 15px;
  background: var(--dn-color-cta);
  color: var(--dn-color-cta-text) !important;
  font-family: var(--dn-font-stack);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  box-shadow: 0 3px 0 0 var(--dn-color-cta-shadow);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.05s ease;
}

.dn-btn-cta:hover,
.dn-btn-cta:focus,
a.dn-btn-cta:hover,
a.dn-btn-cta:focus {
  opacity: 0.9;
  text-decoration: none;
  color: var(--dn-color-cta-text);
}

.dn-btn-cta:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 0 var(--dn-color-cta-shadow);
}

.dn-btn-cta.-large {
  padding: 18px 40px 19px;
  font-size: 18px;
  border-radius: 6px;
}

/* .dn-btn-cta.-small は本番未使用クラスのため 2026-05-26 削除（Q-6 / §21 と同期） */

/* ============================================================
 * §6. C2: 商品カード（ワインホバー）
 *   角丸4px / 1pxボーダー / ホバーでワイン系シャドウ
 * ============================================================ */
.dn-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;            /* カード自体は白を保ちアイボリー背景と分離 */
  border: 1px solid var(--dn-color-card-border);
  border-radius: 4px;
  padding: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.dn-card:hover {
  border-color: var(--dn-color-primary);
  box-shadow: 0 4px 12px var(--dn-color-card-hover);  /* Lv4 A: ワイン薄シャドウ */
  transform: translateY(-1px);
}

.dn-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  background: var(--dn-color-bg-soft);
}

.dn-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dn-card__title {
  margin: 8px 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dn-color-text);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dn-card__circle {
  font-size: 11px;
  line-height: 1.3;
  color: var(--dn-color-text-mute);
  margin: 0 0 4px;
}

.dn-card__price {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: bold;
  color: var(--dn-color-price);
}

.dn-card__price-old {
  font-size: 11px;
  font-weight: normal;
  color: var(--dn-color-text-mute);
  text-decoration: line-through;
  margin-right: 6px;
}

/* ============================================================
 * §7. C3: 価格バッジ（Lv4 A: ワイン明 / 落ち着き赤 / 上質ゴールド / 灰）
 * ============================================================ */
.dn-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-block;
  min-width: 50px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  color: #ffffff;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.dn-badge.-new       { background: var(--dn-color-badge-new); }       /* ワイン明 */
.dn-badge.-discount  { background: var(--dn-color-badge-sale); }      /* 落ち着き赤 */
.dn-badge.-limited   {
  background: var(--dn-color-badge-limited);                          /* 上質ゴールド */
  color: #1F1F1F;                                                     /* 金地は純黒文字 */
}
.dn-badge.-sold-out  { background: var(--dn-color-badge-sold); }      /* 灰 */

/* 2つ目のバッジ（右上配置） */
.dn-badge.-secondary {
  left: auto;
  right: 6px;
}

/* ============================================================
 * §8. C6: 左サイドバーカテゴリリストのコンパクト化
 *   Lv4 A: ホバー時ワイン左帯
 * ============================================================ */
.dn-sidebar-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.dn-sidebar-nav__item {
  border-bottom: 1px solid var(--dn-color-border);
}

.dn-sidebar-nav__item:first-child {
  border-top: 1px solid var(--dn-color-border);
}

.dn-sidebar-nav__link {
  position: relative;
  display: block;
  padding: 10px 12px 10px 16px;
  color: var(--dn-color-text);
  text-decoration: none;
  line-height: 1.4;
  transition: background-color 0.12s ease;
}

.dn-sidebar-nav__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  transition: background-color 0.12s ease;
}

.dn-sidebar-nav__link:hover {
  background-color: var(--dn-color-primary-light);
  color: var(--dn-color-primary-dark);
}
.dn-sidebar-nav__link:hover::before {
  background: var(--dn-color-primary);
}

.dn-sidebar-nav__link.is-active {
  background-color: var(--dn-color-primary-light);
  color: var(--dn-color-primary-dark);
  font-weight: bold;
}
.dn-sidebar-nav__link.is-active::before {
  background: var(--dn-color-primary);
}

.dn-sidebar-heading {
  margin: 24px 0 8px;
  padding: 6px 10px;
  background: var(--dn-color-section-cap);
  color: var(--dn-color-section-cap-text);
  font-size: 13px;
  font-weight: bold;
  border-radius: 3px;
}

/* ============================================================
 * §9. C9: ヘッダーR18バッジ
 * ============================================================ */
.dn-r18-badge {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 8px;
  background-color: var(--dn-color-badge-sale);  /* 落ち着き赤 */
  color: #ffffff !important;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.04em;
  border-radius: 3px;
  vertical-align: middle;
}

/* ============================================================
 * §10. C11: 記事本文の読み物用余白（Lv4 A: H3アイボリー左ボーダー）
 *   - 本文 line-height: 1.85 維持
 *   - H2: ワイン下線（メイン）
 *   - H3: アイボリー左ボーダー4px（案②: 差別化要素をアイボリーで統一）
 *   - 引用: ボーダー左にアイボリー（案②: 統一感優先）
 * ============================================================ */
.l-mainContent .post_content {
  font-size: 16px;
  line-height: var(--dn-line-height-body); /* 本文行間1.85 維持 */
  letter-spacing: 0.02em;
}

.l-mainContent .post_content > h2 {
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--dn-color-primary);  /* Lv4 A: ワイン */
  font-size: 24px;
  line-height: 1.4;
}

.l-mainContent .post_content > h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 4px solid var(--dn-color-accent);   /* Lv4 A: アイボリー（案②） */
  font-size: 20px;
  line-height: 1.4;
}

.l-mainContent .post_content > p {
  margin-bottom: 1.6em;
}

.l-mainContent .post_content blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--dn-color-accent-light);             /* Lv4 A: アイボリー薄背景 */
  border-left: 4px solid var(--dn-color-accent);         /* Lv4 A: アイボリー左ボーダー */
  font-style: normal;
  color: var(--dn-color-text);
  line-height: 1.8;
}

/* 記事内リンクの強調（ホバー時にワイン） */
.l-mainContent .post_content a {
  color: var(--dn-color-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--dn-color-border);
}
.l-mainContent .post_content a:hover {
  color: var(--dn-color-primary);
  text-decoration-color: var(--dn-color-primary);
}

/* dn-accent クラス（案②: 値をアイボリー濃色に置換）
   アイボリー地そのままだと白背景上で読めないため、テキストは濃色版を使う */
.l-mainContent .dn-accent,
.l-mainContent a.dn-accent-link {
  color: var(--dn-color-accent-dark) !important;
}
.l-mainContent a.dn-accent-link:hover {
  color: var(--dn-color-primary) !important;
  text-decoration-color: var(--dn-color-primary) !important;
}

/* セクション間余白 */
.l-mainContent .post_content > section {
  margin-bottom: 32px;
}

/* 挿絵画像の余白 */
.l-mainContent .post_content figure,
.l-mainContent .post_content .wp-block-image {
  margin: 32px auto;
}

/* ============================================================
 * §10.5. SWELL本体クラス（.c-button / .swell-block-button 等）への上書き
 *   SWELLは記事内ボタン・MoreLinkで .c-button / .swell-block-button を多用。
 *   トンマナLv4 A を実機で目に見える形にするため、本体ボタンも上書きする。
 * ============================================================ */
body .c-button,
body a.c-button,
body .swell-block-button > a.swell-block-button__link,
body .wp-block-button__link,
body .post_content .wp-block-button__link {
  background: var(--dn-color-primary) !important;
  color: #ffffff !important;
  border-color: var(--dn-color-primary) !important;
}

body .c-button:hover,
body a.c-button:hover,
body .swell-block-button > a.swell-block-button__link:hover,
body .wp-block-button__link:hover {
  background: var(--dn-color-primary-dark) !important;
  color: #ffffff !important;
}

/* SWELL の文字色強調・カテゴリラベル等のメインカラー流用箇所 */
body .c-postTitle__main,
body .c-postThumb__cat,
body .p-postList__cat,
body .c-pageTitle,
body .p-breadcrumb a:hover {
  color: var(--dn-color-primary) !important;
}

/* 記事本文H2のSWELLデフォルト装飾を上書き */
body .post_content h2,
body .l-mainContent .post_content h2 {
  border-bottom-color: var(--dn-color-primary) !important;
}

/* SWELLのページネーション・タグの主要色 */
body .c-pagination__item.current,
body .p-pageNation .current,
body .c-tagList__link:hover {
  background: var(--dn-color-primary) !important;
  color: #ffffff !important;
}

/* ============================================================
 * §11. C12: フッターのコンプライアンス情報強調
 * ============================================================ */
.dn-footer-compliance {
  padding: 16px 20px;
  background-color: var(--dn-color-header-bg);  /* 漆黒 */
  color: var(--dn-color-accent);                /* アイボリー */
  font-size: 12px;
  line-height: 1.6;
  border-radius: 4px;
  margin: 32px 0 0;
}

.dn-footer-compliance__tag {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 8px;
  background: var(--dn-color-cta);          /* 上質ゴールド */
  color: var(--dn-color-cta-text);          /* 純黒寄り */
  font-weight: bold;
  border-radius: 3px;
  font-size: 11px;
}

.dn-footer-compliance a {
  color: var(--dn-color-accent);            /* アイボリー */
  text-decoration: underline;
}

.dn-footer-compliance a:hover {
  opacity: 0.8;
}

/* ============================================================
 * §12. レスポンシブ調整（モバイル）
 * ============================================================ */
@media (max-width: 768px) {
  .l-mainContent .dn-section-bar {
    font-size: 14px;
    line-height: 28px;
    padding: 0 12px;
  }

  .dn-btn-cta,
  a.dn-btn-cta {
    width: 100%;
    padding: 14px 16px;
  }

  .dn-card-list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .dn-card__title {
    font-size: 12px;
  }

  .l-mainContent .post_content {
    font-size: 15px;
    line-height: 1.8;
  }

  .l-mainContent .post_content > h2 {
    font-size: 20px;
  }

  .l-mainContent .post_content > h3 {
    font-size: 17px;
  }

  /* SPヘッダーのグロナビ下線位置調整 */
  .l-header .c-gnav__item > a::after,
  .l-header .c-gnav li > a::after {
    left: 8px;
    right: 8px;
    bottom: 4px;
  }
}

/* ============================================================
 * §13. 記事ヘッダー直下カテゴリラベルの文字色補正（2026-05-15 追加）
 *   個別記事ページ: タイトル下の `.p-articleMetas__termList .c-categoryList__link`
 *   が SWELL デフォルトでワイン系文字色になり、ワイン背景上で視認性が落ちる問題を補正。
 *   一覧ページのサムネ上カテゴリラベル `.c-postThumb__cat` 等もまとめてアイボリー化。
 * ============================================================ */
.p-articleMetas__termList .c-categoryList__link,
.p-articleMetas__termList .c-categoryList__link:link,
.p-articleMetas__termList .c-categoryList__link:visited,
.p-articleMetas__termList .c-categoryList__link:hover,
.p-articleMetas__termList .c-categoryList__link:focus,
.c-categoryList .c-categoryList__link,
.l-mainContent .c-postMeta__cat,
.l-mainContent .c-postMeta__cat a,
.l-mainContent .p-postList__cat,
.l-mainContent .c-postThumb__cat,
.l-mainContent .c-postThumb__cat a,
.l-mainContent .post-categories a,
.l-mainContent .c-termsList__item a {
  color: var(--dn-color-accent, #F5F0E1) !important;
  text-decoration: none !important;
  border-bottom: none !important; /* 念のため border 下線も無効化 */
}

/* ============================================================
 * §14. PR表記（FANZAアフィリ）アイキャッチ直下バナー（2026-05-15 追加 / 同日 詳細度強化）
 *   inc/pr-disclosure.php が swell_after_eyecatch / the_content で挿入する HTML 用。
 *   控えめなアイボリーボックス + 左側にゴールド[PR]バッジ。
 *
 *   詳細度強化の理由（2026-05-15）:
 *     SWELL本体（main.css）が以下のルールで子要素マージンを強制している:
 *       .post_content > :first-child { margin-top: 0 !important; }
 *       .post_content > *            { margin-bottom: var(--swl-block-margin, 2em); }
 *     PR表記は `.post_content` の最初の子として挿入されるため、上記が効いて
 *     子テーマの `margin: 0.4em 0 20px` が無視されていた（特に下マージンが2emに肥大）。
 *     `.post_content > .dn-pr-disclosure` で詳細度を SWELL と同じに揃え、
 *     `!important` で確実に勝たせる。
 *
 *   再調整（2026-05-16）:
 *     アイキャッチ直下の視覚的余白が広く見える主因は PR表記-アイキャッチ間ではなく、
 *     PR表記直下に残っていた「空 <blockquote></blockquote>」が §10 の blockquote 装飾
 *     （margin: 24px 0 / padding: 20px 24px / アイボリー薄背景）で大ブロック化して
 *     見えていたことが判明した（本番DOM調査で全 134記事に空blockquoteが計244個残存）。
 *     CSS側では PR表記の上下マージンをさらに詰め（top: 0 / bottom: 12px）、
 *     さらに「post_content直下の空blockquote」を非表示にする防衛策を入れる。
 *     本文側の空blockquote / 注意blockquote削除は
 *     scripts/cleanup-pr-warning-from-content.py の `--include-summary-posts` で恒久的に除去する。
 * ============================================================ */
.dn-pr-disclosure,
.post_content > .dn-pr-disclosure,
.l-mainContent .post_content > .dn-pr-disclosure {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding: 8px 14px;
  background: var(--dn-color-paper, #F5F0E1);
  border: 1px solid rgba(125, 30, 60, 0.18);
  border-left: 1px solid rgba(125, 30, 60, 0.18) !important; /* 上下右と同じスタイルに統一（2026-05-15 修正） */
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: #4a4a4a;
}

/* §14b. 空 blockquote の非表示（防衛策 / 2026-05-16）
   - モグラ生成テンプレ由来の空 <blockquote></blockquote> が記事冒頭に多数残存。
   - 本文クリーンアップで除去するが、未クリーンアップの記事でも視覚的崩れを起こさないよう
     CSS側でも「中身が空に等しい blockquote」を非表示にする。
   - :has() 未対応ブラウザでも :empty で最低限カバー。 */
.l-mainContent .post_content > blockquote:empty,
.l-mainContent .post_content > blockquote:has(> p:empty:only-child),
.l-mainContent .post_content > blockquote:has(> p:only-child):has(> p:blank) {
  display: none !important;
}
.dn-pr-disclosure .dn-pr-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--dn-color-gold, #C9A24C);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  border-radius: 2px;
  flex-shrink: 0;
}
.dn-pr-disclosure .dn-pr-text {
  flex: 1;
}

/* ============================================================
 * §15. 18禁注意フッター固定バー（2026-05-15 追加）
 *   inc/pr-disclosure.php が wp_footer で出力する HTML 用。
 *   フッター内・ワインレッド背景・アイボリー文字・中央寄せ。
 * ============================================================ */
.dn-adult-warning {
  background: var(--dn-color-wine, #7D1E3C);
  color: var(--dn-color-paper, #F5F0E1);
  text-align: center;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  border-top: 1px solid rgba(245, 240, 225, 0.15);
}
.dn-adult-warning strong {
  color: var(--dn-color-gold, #C9A24C);
  margin-right: 4px;
  font-weight: 700;
}

/* ============================================================
 * §16. CTA Gold Gradient Button（2026-05-15 追加 / 同日 微調整）
 *   WP標準ボタンブロック `.wp-block-button.is-style-fill` を
 *   ゴールド・グラデーション + ドロップシャドウ + インセット影で
 *   立体的な「金属プレート」感のCTAに変換する。
 *
 *   微調整パラメータ（2026-05-15 更新）:
 *     - グラデの角度: `180deg`（上→下・垂直）
 *     - グラデの色: 通常 #DDB85B → #D4AF37 → #C9A330（さりげなく）
 *                  ホバー #E5C166 → #D8B43E → #CDA833
 *     - 影の強さ:  rgba(184, 148, 31, 0.4)（外側）/ 0.6（内側下）
 *     - 文字色:    #1F1F1F（濃黒。コントラスト確保のため変更非推奨）
 *     - 文字サイズ: 18px / letter-spacing 0.04em
 *     - パディング: 18px 44px
 *     - 角丸:      9999px（完全pill）
 * ============================================================ */
body .wp-block-button.is-style-fill .wp-block-button__link,
body .wp-block-button .wp-block-button__link.is-style-fill,
body .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link {
  background: linear-gradient(180deg, #DDB85B 0%, #D4AF37 50%, #C9A330 100%) !important;
  color: #1F1F1F !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  padding: 18px 44px !important;
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(184, 148, 31, 0.4),
              inset 0 -3px 0 rgba(168, 138, 26, 0.6) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

body .wp-block-button.is-style-fill .wp-block-button__link:hover,
body .wp-block-button .wp-block-button__link.is-style-fill:hover,
body .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: linear-gradient(180deg, #E5C166 0%, #D8B43E 50%, #CDA833 100%) !important;
  box-shadow: 0 6px 16px rgba(184, 148, 31, 0.5),
              inset 0 -3px 0 rgba(168, 138, 26, 0.8) !important;
  transform: translateY(-1px);
  color: #1F1F1F !important;
  border-radius: 9999px !important;
}

body .wp-block-button.is-style-fill .wp-block-button__link:active,
body .wp-block-button .wp-block-button__link.is-style-fill:active,
body .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link:active {
  box-shadow: 0 2px 6px rgba(184, 148, 31, 0.3),
              inset 0 -1px 0 rgba(168, 138, 26, 0.6) !important;
  transform: translateY(1px);
  border-radius: 9999px !important;
}

body .wp-block-button.is-style-fill .wp-block-button__link:focus-visible,
body .wp-block-button .wp-block-button__link.is-style-fill:focus-visible,
body .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link:focus-visible {
  outline: 3px solid #A0464F !important;
  outline-offset: 2px !important;
  border-radius: 9999px !important;
}

/* スマホ（〜599px）でCTAボタン縮小（2026-05-15 追加） */
@media (max-width: 599px) {
  body .wp-block-button.is-style-fill .wp-block-button__link,
  body .wp-block-button .wp-block-button__link.is-style-fill,
  body .wp-block-buttons .wp-block-button.is-style-fill .wp-block-button__link {
    font-size: 14px !important;
    padding: 12px 24px !important;
    letter-spacing: 0.02em !important;
  }
  body .wp-block-button.is-style-fill .wp-block-button__link:hover {
    transform: translateY(-0.5px);
  }
}

/* タブレット（600〜767px）中間サイズ（2026-05-15 追加） */
@media (min-width: 600px) and (max-width: 767px) {
  body .wp-block-button.is-style-fill .wp-block-button__link,
  body .wp-block-button .wp-block-button__link.is-style-fill {
    font-size: 16px !important;
    padding: 14px 32px !important;
  }
}

/* 旧 .dn-cta-anchor（CTAボタン直上の作品名アンカーラベル）は v7 (2026-05-17) で廃止。
 *   - 中村さん指示により CTAラベルを設置位置で固定化:
 *       1か所目（サンプル直後）: 「FANZAでサンプルの続きを見る →」
 *       2か所目（締め）:        「FANZAで作品ページを見る →」
 *   - 作品名は文字数に関わらず入れない方針となり、アンカーラベル装飾が不要に。
 *   - 旧 §16 末尾の .dn-cta-anchor ブロックは削除済（2026-05-17 v7 反映）。 */

/* ============================================================
 * §17. post_content 余白調整（2026-05-15 追加）
 *   - 上余白: SWELL本体（main.css）が .post_content に padding-top / margin-top を
 *     与えている場合があり、アイキャッチ直下のPR表記との間に視覚的な隙間が出る。
 *     詳細度を上げて 0 に強制する。
 *   - 左右余白: 本文を全幅化するため padding-left / padding-right を 0 に。
 *     SWELLは `--swl-pad-content` 変数で本文左右パディングを管理しているため変数も上書き。
 *
 *   注意:
 *     - 全幅化はモバイルでも適用される。本文が画面端に貼り付いて読みづらい場合は、
 *       下記コメントアウト中のメディアクエリ案を有効化し、モバイルのみ余白を残す。
 *     - SWELLの `.post_content > :first-child { margin-top: 0 !important; }` は維持。
 * ============================================================ */
body .l-mainContent .post_content,
body .l-mainContent .post_content.post_content {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  --swl-pad-content: 0 !important;
}

/* オプション: モバイルのみ左右余白を残したい場合は下記を有効化
@media (max-width: 599px) {
  body .l-mainContent .post_content,
  body .l-mainContent .post_content.post_content {
    padding-left: 16px !important;
    padding-right: 16px !important;
    --swl-pad-content: 16px !important;
  }
}
*/

/* ============================================================
 * §18. v7 記事本文クラス群（インラインCSSの子テーマ移管 / 2026-05-17 追加）
 *   背景:
 *     - 手本 pid=1456 で記事本文に直書きしていた <style> ブロックを
 *       完全に子テーマCSS側に移管する。今後インライン埋め込みは排除。
 *   対象クラス:
 *     - .cta-2line          : CTAラッパー（縦並び・中央寄せ・上下マージン）
 *     - .cta-microcopy      : 吹き出し風キャッチ（「＼ XX ／」部分）
 *     - .cta-note           : ボタン直下の注釈（小サイズ・グレー）
 *     - .dn-spec-table      : 作品スペック表（th無し・項目列に背景色）
 *     - .dn-rating-table    : レイティング表（dn-spec-table と併用 / 中央列幅調整）
 *     - .work-package       : 冒頭のパッケージ画像figure（CTAラッパーを包む）
 *     - .work-sample        : サンプル画像figure（×3並び・アフィリ直リンク）
 *
 *   v7 固定運用ルール（writer-mogura.md §4 と一致）:
 *     - CTAボタンは cta-2line ラッパー内に WP標準 wp:button is-style-fill で出す
 *     - 装飾は §16 のゴールド・グラデを流用（.cta-2line .wp-block-button 等）
 * ============================================================ */

/* --- スペック表（共通） --- */
.dn-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
  line-height: 1.6;
}
.dn-spec-table td {
  padding: 10px 12px;
  border: 1px solid #E5E0D6;
  vertical-align: top;
}
.dn-spec-table td.dn-spec-key {
  background: #F5F0E1;            /* アイボリー(Lv4 A アクセント) */
  color: #5A2329;                 /* ワイン濃色テキスト */
  font-weight: 700;
  width: 30%;
  white-space: nowrap;
}

/* --- レイティング表（dn-spec-table と併用） --- */
.dn-rating-table td.dn-spec-key { width: 18%; }
.dn-rating-table td:nth-child(2) {
  width: 18%;
  white-space: nowrap;
  color: #722F37;
  font-weight: 700;
}

@media (max-width: 599px) {
  .dn-spec-table { font-size: 13px; }
  .dn-spec-table td.dn-spec-key { width: 34%; white-space: normal; }
  .dn-rating-table td:nth-child(2) { width: 22%; }
}

/* --- CTA 2行使い（マイクロコピー + fillボタン） --- */
.cta-2line {
  margin: 24px 0 6px;
  text-align: center;
}
.cta-2line .cta-microcopy {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #5A2329;
  letter-spacing: 0.04em;
}

/* --- ボタン直下の注釈 --- */
.cta-note {
  margin: 4px 0 24px;
  font-size: 11px;
  color: #6B7280;
  text-align: center;
}

/* --- 冒頭のパッケージ画像figure（CTA1を包む） --- */
.work-package {
  margin: 16px 0 28px;
  text-align: center;
}
.work-package > figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: #6B7280;
}

/* --- サンプル画像figure（×3並び） --- */
.work-sample {
  margin: 12px 0 18px;
  text-align: center;
}
.work-sample > a { display: inline-block; }
.work-sample img {
  max-width: 100%;
  height: auto;
  border: 1px solid #E5E0D6;
  border-radius: 2px;
}
.work-sample figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: #6B7280;
}

/* ============================================================
 * §19. v8 キャンペーン情報囲みボックス（2026-05-17 追加）
 *   背景:
 *     - 新構成 v8（pid=1456 サンプル）で「モグラのレイティング評価」セクションに
 *       キャンペーン情報を囲み表示で統合する指示を中村さんから受領
 *     - 旧 v7 ではテキスト段落＋テキストリンクのみ。視認性が弱い課題があった
 *   対象クラス:
 *     - .campaign-box          : 囲みボックス本体（ワイン縁取り＋アイボリー背景）
 *     - .campaign-box__label   : 「キャンペーン情報」ラベル（小サイズ・ゴールド色）
 *     - .campaign-box__discount: 割引前後の価格表示（中央寄せ・大きめ）
 *     - .campaign-box__rate    : 割引率バッジ（赤系・強調）
 *     - .campaign-box__note    : 補足注釈（小サイズ・グレー）
 *
 *   配置位置（writer-mogura.md §5 v8 仕様準拠）:
 *     - 「モグラのレイティング評価」H2 → レイティング表 → 補足注釈 → campaign-box の順
 *     - 「作品スペック」H2 の直前に置く
 * ============================================================ */

.campaign-box {
  margin: 20px 0 28px;
  padding: 16px 20px 14px;
  background: #F5F0E1;                /* アイボリー(Lv4 A アクセント / dn-spec-key と同色) */
  border: 2px solid #722F37;          /* ワイン中濃色の縁 */
  border-radius: 4px;
  text-align: center;
  line-height: 1.5;
}
.campaign-box__label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #B08A3E;                     /* 上質ゴールド（§5/§16 系統） */
  letter-spacing: 0.12em;
}
.campaign-box__discount {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #5A2329;                     /* ワイン濃色 */
}
.campaign-box__discount strong {
  font-size: 22px;
  color: #B71C2C;                     /* 落ち着き赤（§7 価格バッジと整合） */
}
.campaign-box__rate {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  background: #B71C2C;                /* 落ち着き赤 */
  color: #FFF;
  font-size: 14px;
  font-weight: 700;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.campaign-box__note {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6B7280;                     /* 注釈グレー */
  line-height: 1.6;
}

@media (max-width: 599px) {
  .campaign-box { padding: 14px 14px 12px; }
  .campaign-box__discount { font-size: 16px; }
  .campaign-box__discount strong { font-size: 20px; }
  .campaign-box__rate { font-size: 13px; }
}

/* ============================================================
 * §20. カテゴリ/タグ視認性向上（2026-05-18 追加）
 *   背景:
 *     - 中村さんから「トップページのカード下カテゴリ/タグが薄くて読めない」指摘
 *     - 現状 §13 でアイボリー文字色（#F5F0E1）を設定しているが背景指定がなく、
 *       白カード上ではアイボリー文字が消えて見える状態だった
 *     - 個別記事フッターのタグ（.c-tagList__link）も :hover 時のみワイン背景で
 *       通常時は素の SWELL 配色で視認性が弱い
 *
 *   対象クラス:
 *     - .p-postList__cat              : 記事カード下のカテゴリラベル（トップ・一覧で多用）
 *     - .c-postThumb__cat             : アイキャッチ上に重なるカテゴリラベル（SWELLカスタマイザーで
 *                                       既に黒地白文字に設定されているが詳細度を揃える）
 *     - .p-articleMetas__termList .c-categoryList__link : 個別記事タイトル下のカテゴリリンク
 *     - .p-articleMetas__termList .c-tagList__link      : 個別記事タイトル下のタグリンク
 *     - .c-tagList__link / .c-tagList a                 : 記事フッター等のタグリンク
 *
 *   採用案: 白文字維持＋背景濃化（カテゴリ＝ワイン半透明 / タグ＝パープル極薄＋ワイン文字）
 *     - カテゴリは「メイン分類」なので強めに目立たせる（ワイン半透明バッジ）
 *     - タグは「補足分類」なので控えめに（パープル極薄背景＋ワイン文字＋細枠）
 *
 *   詳細度メモ:
 *     §13 で `!important` 付きアイボリー文字色 + 「border-bottom: none」を設定済。
 *     §20 は同セレクタを使い `!important` で上書きする（後勝ち）。
 * ============================================================ */

/* --- カテゴリラベル（カード下・一覧用 .p-postList__cat） --- */
.l-mainContent .p-postList__cat,
.l-mainContent span.p-postList__cat,
.l-mainContent a.p-postList__cat,
.l-mainContent a.p-postList__cat:link,
.l-mainContent a.p-postList__cat:visited {
  display: inline-block;
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
  background-color: rgba(90, 35, 41, 0.88) !important;   /* ワイン濃色 半透明 */
  color: #FFFFFF !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  border-radius: 2px;
  text-decoration: none !important;
  border-bottom: none !important;
  vertical-align: middle;
}
.l-mainContent .p-postList__cat:hover,
.l-mainContent a.p-postList__cat:hover,
.l-mainContent a.p-postList__cat:focus {
  background-color: var(--dn-color-primary-dark, #5A2329) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  opacity: 1;
}
/* icon-folder の擬似要素アイコンも白に寄せる（SWELLは ::before でフォルダアイコン描画） */
.l-mainContent .p-postList__cat.icon-folder::before {
  color: #FFFFFF !important;
  margin-right: 4px;
}

/* --- アイキャッチ上カテゴリラベル（.c-postThumb__cat / SWELLカスタマイザーで既に黒地白文字） --- */
.l-mainContent .c-postThumb__cat,
.l-mainContent a.c-postThumb__cat,
.l-mainContent a.c-postThumb__cat:link,
.l-mainContent a.c-postThumb__cat:visited {
  background-color: rgba(15, 15, 15, 0.85) !important;   /* 漆黒 半透明（ヘッダー帯と統一） */
  color: #FFFFFF !important;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  text-decoration: none !important;
  border-bottom: none !important;
}
.l-mainContent .c-postThumb__cat:hover,
.l-mainContent a.c-postThumb__cat:hover,
.l-mainContent a.c-postThumb__cat:focus {
  text-decoration: none !important;
  color: #FFFFFF !important;
}

/* --- 個別記事タイトル下のカテゴリリンク（.p-articleMetas__termList .c-categoryList__link） --- */
.l-mainContent .p-articleMetas__termList .c-categoryList__link,
.l-mainContent .p-articleMetas__termList .c-categoryList__link:link,
.l-mainContent .p-articleMetas__termList .c-categoryList__link:visited {
  display: inline-block;
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
  background-color: rgba(90, 35, 41, 0.88) !important;   /* ワイン濃色 半透明 */
  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  border-radius: 2px;
  text-decoration: none !important;
  border-bottom: none !important;
}
.l-mainContent .p-articleMetas__termList .c-categoryList__link:hover,
.l-mainContent .p-articleMetas__termList .c-categoryList__link:focus {
  background-color: var(--dn-color-primary-dark, #5A2329) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* --- 個別記事タイトル下のタグリンク（.p-articleMetas__termList .c-tagList__link） --- */
.l-mainContent .p-articleMetas__termList .c-tagList__link,
.l-mainContent .p-articleMetas__termList .c-tagList__link:link,
.l-mainContent .p-articleMetas__termList .c-tagList__link:visited,
.l-mainContent .c-tagList__link,
.l-mainContent .c-tagList__link:link,
.l-mainContent .c-tagList__link:visited,
.l-mainContent .c-tagList a,
.l-mainContent .c-tagList a:link,
.l-mainContent .c-tagList a:visited {
  display: inline-block;
  padding: 2px 10px;
  margin: 2px 4px 2px 0;
  background-color: rgba(107, 70, 193, 0.10) !important; /* パープル極薄 */
  color: var(--dn-color-primary-dark, #5A2329) !important; /* ワイン濃色文字 */
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  border: 1px solid rgba(107, 70, 193, 0.35) !important;
  border-radius: 2px;
  text-decoration: none !important;
}
.l-mainContent .p-articleMetas__termList .c-tagList__link:hover,
.l-mainContent .p-articleMetas__termList .c-tagList__link:focus,
.l-mainContent .c-tagList__link:hover,
.l-mainContent .c-tagList__link:focus,
.l-mainContent .c-tagList a:hover,
.l-mainContent .c-tagList a:focus {
  background-color: var(--dn-color-primary, #722F37) !important;
  color: #FFFFFF !important;
  border-color: var(--dn-color-primary, #722F37) !important;
  text-decoration: none !important;
}

/* --- レスポンシブ調整（スマホで詰まりすぎないように） --- */
@media (max-width: 599px) {
  .l-mainContent .p-postList__cat,
  .l-mainContent .p-articleMetas__termList .c-categoryList__link {
    font-size: 10px;
    padding: 2px 8px;
  }
  .l-mainContent .p-articleMetas__termList .c-tagList__link,
  .l-mainContent .c-tagList__link {
    font-size: 11px;
    padding: 2px 8px;
  }
}

/* ------------------------------------------------------------
 * §20-FIX. 親リンク経由の下線継承を打ち消す（2026-05-18 追記）
 *
 *   根本原因:
 *     §2 で `.l-mainContent a { text-decoration: underline; }` を全リンクに
 *     当てているため、カード全体を包む `<a class="p-postList__link">` にも
 *     下線が引かれる。インライン要素の子（`.p-postList__cat` span 等）に
 *     親 `<a>` の下線が貫通描画されるのが「カテゴリラベル下線が消えない」
 *     正体。子要素側で `text-decoration:none` を当てても親由来の下線は
 *     消せない仕様のため、**親 `<a>` 側で打ち消す**必要がある。
 *
 *   対象:
 *     - .p-postList__link        : 記事カード全体を包む a タグ
 *     - .c-postThumb__cat (a版)  : アイキャッチ上のカテゴリラベル（a タグの場合）
 *     - .p-postList__title 内 a  : SWELLバージョンによってはタイトルがリンク化
 *     - 関連記事/ピックアップ等のリンク系コンポーネント
 *
 *   方針:
 *     §2 の `.l-mainContent a` をグローバルに殺すと記事本文の意図的な
 *     リンク下線まで消えるため、**カード系セレクタに限定**して `none !important`
 *     で上書きする。詳細度は `.l-mainContent` を冠することで §2 と互角以上。
 *     SWELL 本体は `.p-postList__link { text-decoration:none }` を既に
 *     設定しているため、本ルールは §2 の暴走を本来の仕様に戻す位置づけ。
 * ------------------------------------------------------------ */

.l-mainContent a.p-postList__link,
.l-mainContent a.p-postList__link:link,
.l-mainContent a.p-postList__link:visited,
.l-mainContent a.p-postList__link:hover,
.l-mainContent a.p-postList__link:focus,
.l-mainContent a.p-postList__link:active,
.l-mainContent a.c-postThumb__cat,
.l-mainContent a.c-postThumb__cat:link,
.l-mainContent a.c-postThumb__cat:visited,
.l-mainContent a.c-postThumb__cat:hover,
.l-mainContent a.c-postThumb__cat:focus,
.l-mainContent a.c-postThumb__cat:active,
.l-mainContent .p-postList__title a,
.l-mainContent .p-postList__title a:link,
.l-mainContent .p-postList__title a:visited,
.l-mainContent .p-postList__title a:hover,
.l-mainContent .p-postList__title a:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* 念のため疑似要素経由の下線描画も無効化（SWELLバリエーション対策） */
.l-mainContent a.p-postList__link::after,
.l-mainContent a.p-postList__link::before,
.l-mainContent a.c-postThumb__cat::after,
.l-mainContent a.c-postThumb__cat::before {
  /* ::before はカテゴリアイコン用に既に使われている可能性があるので
     content だけは消さず、下線描画に使われる box-shadow/border のみ無効化 */
  box-shadow: none !important;
  border-bottom: none !important;
}

/* span カテゴリ自身の text-decoration も冗長に再宣言（親由来の下線を
   span のテキスト範囲だけ覆い隠す効果を狙う：display:inline-block
   は§20本体ですでに付与済みなので、これ単体でも貫通描画は止まる） */
.l-mainContent span.p-postList__cat,
.l-mainContent span.p-postList__cat:hover {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* ============================================================
 * §21. CTA改修 2026-05-26（dn-text-link 枠付き小ボタン化 + テーブル underline）
 *   - A-1: 一気見せテーブル `.dn-list-table-glance` 内の作品名リンクに underline
 *   - A-2-α: 全 `.dn-text-link` を「白地+ワインカラー枠+ワイン文字 / ホバー反転」の
 *     枠付き小ボタンに変換（外部FANZA・内部リンク一律 / 全サイト共通）
 *   - 既存 `.dn-btn-cta.-small`（§5）はこの§追加と同タイミングで削除済
 *   - フェーズ2（mu-plugin 404非表示）は別ターンで実装予定
 *
 * §21b (2026-05-26 追加): 小ボタン頭にアイコン（外部リンク風 ↗ SVG）
 *   - 末尾の ` →` テキストは mu-plugin v1.0.3 の the_content フィルタで動的削除
 *   - 頭の SVG はワイン → ホバー時に白に反転（テキスト色と同調）
 * ============================================================ */

/* §21-1. 一気見せテーブル 作品名リンクに underline ----------- */
.post_content .dn-list-table-glance a[data-cta-type="text-link-table"] strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.post_content .dn-list-table-glance a[data-cta-type="text-link-table"]:hover strong {
  text-decoration: underline;
  color: var(--dn-color-primary);
}

/* §21-2. dn-text-link を枠付き小ボタンに（全サイト一律）------- */
.post_content p.dn-text-link {
  margin: 16px 0;
  text-align: center;
  line-height: 1.4;
}
.post_content p.dn-text-link a {
  display: inline-flex;                          /* §21b: アイコン縦中央寄せ */
  align-items: center;
  justify-content: center;
  gap: 0.4em;                                    /* §21b: アイコン⇔テキスト間 */
  padding: 8px 18px 9px;
  border: 1.5px solid var(--dn-color-primary);   /* ワインカラー枠 */
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--dn-color-primary);                /* ワインカラー文字 */
  background: #ffffff;                           /* 白地 */
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
/* §21b: 頭のアイコン（外部リンク風 ↗）
 *   - SVG は data URI で埋め込み（外部ファイル不要 / リクエスト0）
 *   - currentColor で文字色と同調 → ホバー反転時も自動追従
 *   - viewBox 0 0 24 24 / stroke 矢印（box + arrow が斜め右上に飛ぶ図）
 */
.post_content p.dn-text-link a::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6'/><path d='M20 4 10 14'/><path d='M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6'/><path d='M20 4 10 14'/><path d='M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.post_content p.dn-text-link a:hover,
.post_content p.dn-text-link a:focus {
  background: var(--dn-color-primary);           /* ホバーで反転 */
  color: #ffffff;
  text-decoration: none;
}
.post_content p.dn-text-link a:focus-visible {
  outline: 2px solid var(--dn-color-cta);
  outline-offset: 2px;
}

/* §21-3. SP表示時の調整 ---------------------------------------- */
@media (max-width: 768px) {
  .post_content p.dn-text-link a {
    padding: 10px 14px 11px;
    font-size: 13px;
  }
  .post_content p.dn-text-link a::before {
    width: 13px;
    height: 13px;
  }
}

/* ============================================================
 * §22. 2026-05-26 第2弾 改修（内部リンク↗抑制 / SP 60% / dn-cta-row 横並び）
 *   - 中村さん指示「内部リンク（doujin-navi.net 配下）は外部リンク↗SVG を出さない」
 *   - 中村さん指示「スマホでは幅60%で折り返す」
 *   - 中村さん指示「hub の『レビュー全文を読む』『FANZAで詳しく見る』はボタン横並び」
 *   - hub-soushuhen / hub-hitozuma 等の生HTML dn-text-link を <div class="dn-cta-row"> で
 *     ラップして flex 配置する。ラップ無しの個別 dn-text-link は §21 のセンタリング維持。
 * ============================================================ */

/* §22-1. 内部リンクは §21b の ↗SVG アイコンを抑制 ---------------- */
/*   判定基準: href が doujin-navi.net 配下 / data-cta-type が internal-* / text-link-subgenre-* / text-link-hub-pick-* */
/*   ※ text-link-hub-pick-* は外部FANZAだが、hub内では「レビュー全文を読む」とペア表示するため記事内ペア統一として ↗抑制対象から外す（FANZA への外部遷移は保持）
       → よって text-link-hub-pick-* は §22-1 のスコープ「外」に置き、§21b の ↗ アイコン継続表示 */
.post_content p.dn-text-link a[href*="doujin-navi.net"]::before,
.post_content p.dn-text-link a[data-cta-type^="internal-"]::before,
.post_content p.dn-text-link a[data-cta-type^="text-link-subgenre-"]::before {
  display: none;
}

/* §22-2. dn-cta-row: hub「レビュー全文を読む / FANZAで詳しく見る」横並び -- */
/*   既存 <p class="dn-text-link"> を Gutenberg group block (className: dn-cta-row) で包む。
 *   WP コアは <div class="wp-block-group dn-cta-row"><div class="wp-block-group__inner-container">
 *   というネスト構造で出力するため、flex は __inner-container 側に当てる。
 *   外側 .dn-cta-row には margin 整形のみ。 */
.post_content .wp-block-group.dn-cta-row {
  margin: 16px 0;
}
.post_content .wp-block-group.dn-cta-row > .wp-block-group__inner-container,
.post_content .dn-cta-row > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.post_content .dn-cta-row p.dn-text-link {
  margin: 0;            /* §21 の margin: 16px 0 を打ち消す */
  flex: 0 1 auto;       /* 折り返し許容 */
}

/* §22-3. SP（max-width: 600px）で小ボタンを max-width: 60% に縮める ----- */
/*   横並び時の折り返しを保証 + シングル時もタップしやすい幅に制限 */
@media (max-width: 600px) {
  .post_content p.dn-text-link a {
    max-width: 60%;
    white-space: normal;
    word-break: break-word;
  }
  .post_content .dn-cta-row p.dn-text-link a {
    max-width: 100%;    /* dn-cta-row 内では gap で間が取れるので 100% でOK */
  }
}

/* ============================================================
 * §23. v9-review 専用ブロック（2026-05-28 追加 / 中村さん確定）
 *   - .dn-conclusion-box: 冒頭結論ボックス（おすすめ度 / 刺さる人 / 確認ポイント / 判断）
 *   - .dn-fit-table:      おすすめする人・しない人 4×2対比表
 *
 *   トンマナ:
 *     - 既存 campaign-box (§19) / dn-spec-table (§18) と統一感を持たせる
 *     - メインカラー（ワインレッド --dn-color-primary）と
 *       アクセント（アイボリー --dn-color-accent-light）を使用
 *     - 角丸 / 控えめな枠線 / モバイル縦スクロール対応
 *
 *   配置対象テンプレ:
 *     - v9-review（v8.1 単発レビュー進化版 / リファレンス pid=4975）
 *     - 将来テンプレでも .dn-conclusion-box / .dn-fit-table を埋めれば共通スタイル適用
 * ============================================================ */

/* §23-1. dn-conclusion-box: 冒頭結論ボックス -------------------- */
/*   構造: <div class="dn-conclusion-box">
 *           <p><strong>おすすめ度</strong>：★★★★☆（4.5）</p>
 *           <p><strong>刺さる人</strong>：...</p>
 *           <p><strong>確認ポイント</strong>：...</p>
 *           <p><strong>判断</strong>：...</p>
 *         </div>
 *   要件:
 *     - リード直後・冒頭CTA0直前に配置
 *     - 4行構成（おすすめ度・刺さる人・確認ポイント・判断）
 *     - PC: 角丸枠線付きカード / SP: フォントサイズと padding を縮める */
.post_content .dn-conclusion-box {
  margin: 24px 0 20px;
  padding: 18px 20px 14px;
  background: var(--dn-color-accent-light);
  border: 1.5px solid var(--dn-color-primary);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(114, 47, 55, 0.08);
}
.post_content .dn-conclusion-box p {
  margin: 0 0 8px;
  padding: 0 0 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--dn-color-text);
}
.post_content .dn-conclusion-box p:last-child {
  margin-bottom: 0;
}
.post_content .dn-conclusion-box p strong {
  display: inline-block;
  /* 2026-05-30 更新(B): PC表示でラベル4種（おすすめ度/刺さる人/確認ポイント/判断）の幅を揃える
   *   - 最長ラベル「確認ポイント」(6字 / letter-spacing 0.04em 込み) が
   *     padding 8px×2 と合わせて1行に収まるよう width: 8em + box-sizing border-box で固定
   *   - white-space: nowrap で折り返し禁止（width が小さくても1行を強制）
   *   - text-align: center で短いラベル（判断 等）も帯の中央に配置 */
  width: 8em;
  box-sizing: border-box;
  margin-right: 0.6em;
  padding: 1px 8px 2px;
  background: var(--dn-color-primary);
  color: var(--dn-color-accent);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  vertical-align: 1px;
  white-space: nowrap;
}

/* SP 調整 ------------------------------------------------------ */
/*   2026-05-28 更新: ラベルを幅100%でセンター揃え、本文は別行で表示
 *   - <strong>ラベル</strong> を block / width: 100% / text-align: center に
 *   - <p> はテキスト全体を左揃え（本文の可読性優先） */
@media (max-width: 600px) {
  .post_content .dn-conclusion-box {
    margin: 18px 0 16px;
    padding: 14px 14px 10px;
  }
  .post_content .dn-conclusion-box p {
    font-size: 14px;
    line-height: 1.65;
    text-align: left;
  }
  .post_content .dn-conclusion-box p strong {
    display: block;
    margin: 0 0 6px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
  }
}

/* §23-2. dn-fit-table: おすすめする人・しない人 4×2対比表 -------- */
/*   構造: <figure class="wp-block-table dn-fit-table">
 *           <table>
 *             <thead><tr><th>おすすめする人</th><th>おすすめしない人</th></tr></thead>
 *             <tbody><tr><td>...</td><td>...</td></tr>×4</tbody>
 *           </table>
 *         </figure>
 *   要件:
 *     - 列見出し2列（ワイン帯 + アイボリー文字 / §4 セクション帯と整合）
 *     - 行は4行固定
 *     - PC: 2列均等幅 / SP: 縦並びカード化（th を疑似的にラベル化） */
.post_content figure.dn-fit-table,
.post_content .wp-block-table.dn-fit-table {
  margin: 24px 0;
  overflow-x: auto;
}
.post_content .dn-fit-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid var(--dn-color-primary);
  border-radius: 6px;
  overflow: hidden;
}
.post_content .dn-fit-table thead th {
  padding: 10px 14px;
  background: var(--dn-color-primary);
  color: var(--dn-color-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  border-bottom: 2px solid var(--dn-color-cta);
}
.post_content .dn-fit-table tbody td {
  padding: 11px 14px;
  width: 50%;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.7;
  color: var(--dn-color-text);
  background: #ffffff;
  border-top: 1px solid var(--dn-color-card-border);
}
.post_content .dn-fit-table tbody tr:nth-child(even) td {
  background: var(--dn-color-accent-light);
}
.post_content .dn-fit-table tbody td:first-child {
  border-right: 1px solid var(--dn-color-card-border);
}

/* SP: テーブル構造を維持して横スクロール ----------------------- */
/*   2026-05-28 更新: カード化（display:block + ::before 疑似ラベル）から
 *   「テーブルのまま横スクロール」方式に変更。
 *   - <figure> ラッパーで overflow-x: auto を確保（PCルールから継承）
 *   - <table> 自身に min-width を持たせてスクロールバーを発生させる
 *   - スクロール可能であることを示す薄い影をスクロール末端に追加（任意） */
@media (max-width: 600px) {
  .post_content figure.dn-fit-table,
  .post_content .wp-block-table.dn-fit-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .post_content .dn-fit-table table {
    min-width: 480px;
  }
  .post_content .dn-fit-table thead th {
    padding: 9px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .post_content .dn-fit-table tbody td {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.65;
  }
}

/* ============================================================
 * 末尾メモ
 *   Lv4 A 改修ポイント:
 *     §3 ヘッダー漆黒化は SWELL カスタマイザーで設定する方が本来の作法。
 *     将来カスタマイザーで設定したら §3 全体は削除可能。
 *     §2 の body 背景色も Lv4 A で明示的に設定。
 * ============================================================ */