@charset "UTF-8";

/*

Theme Name: Cocoon Child Honnerev

Theme URI: https://honne-rev.com/

Template: cocoon-master

Version: 0.2.0

Description: honne-rev.com Dark Editorial Premium. Cocoon Child テーマ。Phase 1 CSS-only リデザイン適用済み。

Author: Review Factory

Author URI: https://honne-rev.com/

Text Domain: cocoon-child-honnerev

*/



/* Google Fonts は functions.php の wp_head で非同期ロード（@import 削除済み → レンダーブロッキング解消） */



/* ============================================================

   0. DESIGN TOKENS

   ============================================================ */

:root {

  /* Surfaces */

  --hr-bg:          #0a0a1f;

  --hr-surface-1:   #13162b;

  --hr-surface-2:   #1b2040;

  --hr-surface-3:   #222850;

  --hr-border:      #2c3155;

  --hr-border-soft: #1f2342;



  /* Text */

  --hr-fg-1:       #f4f6fb;

  --hr-fg-2:       #aab2c8;

  --hr-fg-3:       #7f879b;

  --hr-fg-on-gold: #1a1405;

  --hr-fg-on-cta:  #fff3f5;



  /* Authority gold */

  --hr-gold:       #c8a96a;

  --hr-gold-hover: #d9ba7b;

  --hr-gold-muted: #8c7749;

  --hr-amber:      #f5c451;



  /* CTA — 熱量だけここで */

  --hr-red:        #e63946;

  --hr-red-hover:  #ef4b57;

  --hr-pink:       #ff1e7a;

  --hr-pink-hover: #ff4d98;

  --hr-cta-gradient: linear-gradient(135deg, #e63946 0%, #ff1e7a 100%);



  /* Type families */

  --hr-font-serif:   'Shippori Mincho','Noto Serif JP','Yu Mincho',serif;

  --hr-font-display: 'Noto Serif JP','Shippori Mincho','Yu Mincho',serif;

  --hr-font-sans:    'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;

  --hr-font-mono:    'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,monospace;



  /* Motion */

  --hr-duration-fast: 140ms;

  --hr-duration-base: 220ms;

  --hr-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);



  /* Shadow */

  --hr-shadow-cta:  0 8px 24px rgba(230,57,70,0.35);

  --hr-shadow-gold: 0 4px 16px rgba(200,169,106,0.2);

}



/* ============================================================

   1. BASE — Cocoonのbody背景/文字色を上書き

   外部 stylesheet では :where() は詳細度 (0,0,0) で Cocoon の body {} (0,0,1) に負けるため

   body セレクタ直書き + !important で確実に上書きする

   ============================================================ */

body {

  background: var(--hr-bg) !important;

  color: var(--hr-fg-1) !important;

  font-family: var(--hr-font-sans) !important;

  font-feature-settings: "palt" 1;

  -webkit-font-smoothing: antialiased;

}

:where(body) {

  background: var(--hr-bg);

  color: var(--hr-fg-1);

  font-family: var(--hr-font-sans);

  font-feature-settings: "palt" 1;

  -webkit-font-smoothing: antialiased;

}

body a { color: var(--hr-fg-1) !important; }

body a:hover { color: var(--hr-amber) !important; }

:where(body) a { color: var(--hr-fg-1); }

:where(body) a:hover { color: var(--hr-amber); }



/* 見出しは全て明朝 */

h1, h2, h3, h4, h5 {

  font-family: var(--hr-font-display) !important;

  color: var(--hr-fg-1) !important;

  letter-spacing: -0.01em;

}

:where(h1, h2, h3, h4, h5) {

  font-family: var(--hr-font-display);

  color: var(--hr-fg-1);

  letter-spacing: -0.01em;

}



/* スクロールバー防止 (full-width hero breakout 対策) */

#wrapper, .body-container, body {

  overflow-x: clip;

}



/* ============================================================

   スティッキーヘッダー + Trust Bar を考慮した scroll offset

   ヘッダー高さ ~64px。アンカーリンクで隠れないようにする

   ============================================================ */

html {

  scroll-padding-top: 72px;

}

@media (max-width: 480px) {

  html { scroll-padding-top: 60px; }

}



/* font-display:swap フォールバック（非同期ロード前に system フォントで表示） */

@font-face {

  font-family: 'Noto Sans JP';

  font-display: swap;

  src: local('Noto Sans JP');

}

@font-face {

  font-family: 'Noto Serif JP';

  font-display: swap;

  src: local('Noto Serif JP');

}

@font-face {

  font-family: 'Shippori Mincho';

  font-display: swap;

  src: local('Shippori Mincho');

}



/* Cocoonの本文コンテナ — 背景とボーダーを調整 */

.main, .content, .article, .entry-content {

  background: transparent !important;

  color: var(--hr-fg-1) !important;

}

:where(.main, .content, .article, .entry-content) {

  background: transparent;

  color: var(--hr-fg-1);

}



/* ============================================================

   2. HEADER — 60px sticky / blur / 6項目ナビ

   ============================================================ */

#header, .header {

  background: rgba(10,10,31,0.82) !important;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--hr-border);

  min-height: 60px;

}

.logo, .header-container-in .logo {

  font-family: var(--hr-font-display);

  font-weight: 900;

  color: var(--hr-fg-1);

}

.navi-in, .navi { background: transparent; }

.navi-in > .menu-header .item-label,

.menu-header a {

  color: var(--hr-fg-2) !important;

  font-size: 12px;

  letter-spacing: 0.04em;

  border-bottom: 1px solid transparent;

  transition: color var(--hr-duration-fast) var(--hr-ease-standard);

}

.menu-header a:hover { color: var(--hr-fg-1) !important; }

.menu-header .current-menu-item > a {

  color: var(--hr-fg-1) !important;

  border-bottom-color: var(--hr-gold);

}



/* ============================================================

   3. CTA — 最重要コンポーネント

   既存クラスを壊さないために、複数セレクタを一括指定

   - .rf-cta            : テキストリンク型

   - .rf-cta-block      : ブロックボタン型

   - [data-rf-cta]      : data属性でマーク済みの要素

   - .btn-cta / .hr-btn-cta : 新規 or 既存

   ============================================================ */

.rf-cta-block,

[data-rf-cta="block"],

.btn-cta,

.cta-large,

.hr-btn-cta {

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 52px;

  padding: 0 24px;

  border-radius: 4px;

  background: var(--hr-cta-gradient) !important;

  color: var(--hr-fg-on-cta) !important;

  font-family: var(--hr-font-sans);

  font-weight: 700;

  font-size: 15px;

  letter-spacing: 0.04em;

  text-decoration: none !important;

  box-shadow: var(--hr-shadow-cta);

  transition: transform var(--hr-duration-fast) var(--hr-ease-standard);

  border: 0;

}

.rf-cta-block:hover,

[data-rf-cta="block"]:hover,

.btn-cta:hover,

.cta-large:hover,

.hr-btn-cta:hover {

  transform: translateY(-1px);

  color: var(--hr-fg-on-cta) !important;

}



/* インライン型 .rf-cta — 赤下線のみ、大きくしない */

.rf-cta,

a.rf-cta {

  color: var(--hr-red) !important;

  font-weight: 700;

  text-decoration: underline;

  text-decoration-color: var(--hr-red);

  text-underline-offset: 3px;

  transition: color var(--hr-duration-fast) var(--hr-ease-standard);

}

.rf-cta:hover { color: var(--hr-pink-hover) !important; }



/* ブロック CTA 内のテキストリンクは白文字で強制上書き

   （rf-cta-injector が出力する <div class="rf-cta-block"><a class="rf-cta">...</a></div>

    構造で、赤文字がピンク背景と同化して読めなくなる問題の修正） */

.rf-cta-block .rf-cta,

.rf-cta-block a.rf-cta,

.rf-cta-block a[data-rf-cta],

[data-rf-cta="block"] .rf-cta,

[data-rf-cta="block"] a {

  color: #ffffff !important;

  text-decoration: none !important;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

  font-weight: 800 !important;

  letter-spacing: 0.02em;

}

.rf-cta-block .rf-cta:hover,

.rf-cta-block a.rf-cta:hover,

.rf-cta-block a[data-rf-cta]:hover {

  color: #ffffff !important;

  text-decoration: none !important;

}



/* ============================================================

   スティッキー CTA (functions.php 5a で is_single() 記事下部に出力)

   画面下に固定。赤→ピンクグラデ＋白文字で視認性確保。

   style.css / functions.php どちらにも CSS が無く、ブラウザ既定の

   青リンクで表示されていたのを修正。

   ============================================================ */

.sticky-cta-wrap {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 9998;

  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));

  background: linear-gradient(180deg, rgba(10,10,31,0.0) 0%, rgba(10,10,31,0.92) 38%, rgba(10,10,31,0.98) 100%);

  pointer-events: none;

}

.sticky-cta-btn {

  display: flex !important;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  width: 100%;

  max-width: 640px;

  margin: 0 auto;

  min-height: 58px;

  padding: 8px 18px;

  border-radius: 10px;

  background: linear-gradient(90deg, var(--hr-red, #e63946) 0%, var(--hr-pink, #ff1e7a) 100%);

  color: #ffffff !important;

  text-decoration: none !important;

  font-weight: 800;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

  box-shadow: 0 10px 28px rgba(230, 57, 70, 0.35), 0 2px 6px rgba(0,0,0,0.25);

  pointer-events: auto;

  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;

}

.sticky-cta-btn:hover,

.sticky-cta-btn:focus-visible {

  color: #ffffff !important;

  text-decoration: none !important;

  transform: translateY(-1px);

  filter: brightness(1.04);

  box-shadow: 0 14px 34px rgba(230, 57, 70, 0.42), 0 2px 8px rgba(0,0,0,0.3);

}

.sticky-text-small {

  font-size: 12px;

  letter-spacing: 0.04em;

  color: #ffe7ef;

  opacity: 0.95;

}

.sticky-text-main {

  font-size: 16px;

  letter-spacing: 0.02em;

}

@media (min-width: 960px) {

  .sticky-text-small { font-size: 12px; }

  .sticky-text-main { font-size: 17px; }

}

/* 本文末尾と被らないよう記事下に余白を追加 */

body.single .entry-content { padding-bottom: 96px; }



/* ============================================================

   FAQ アコーディオン（Phase 3b-2）

   全個別記事の本文末尾に自動注入される <details> ベースの UI

   ============================================================ */

.hr-faq {

  margin: 40px 0 32px;

  padding: 20px 22px 12px;

  background: var(--hr-surface-1, #13162b);

  border: 1px solid var(--hr-border, #2c3155);

  border-radius: 12px;

}

.hr-faq__heading {

  margin: 0 0 14px;

  padding: 0 0 10px;

  border-bottom: 1px solid var(--hr-border, #2c3155);

  border-left: 3px solid var(--hr-gold, #c8a96a);

  padding-left: 12px;

  font-family: 'Noto Serif JP', 'Shippori Mincho', serif;

  font-size: 20px;

  color: var(--hr-fg, #f4f6fb);

  letter-spacing: 0.02em;

}

.hr-faq__item {

  margin: 0 0 8px;

  padding: 0;

  background: var(--hr-surface-2, #1b2040);

  border: 1px solid var(--hr-border, #2c3155);

  border-radius: 8px;

  overflow: hidden;

}

.hr-faq__item[open] {

  border-color: var(--hr-gold-muted, rgba(200,169,106,0.4));

}

.hr-faq__q {

  cursor: pointer;

  padding: 14px 46px 14px 18px;

  position: relative;

  font-weight: 700;

  color: var(--hr-fg, #f4f6fb);

  list-style: none;

  line-height: 1.5;

  transition: background 120ms ease;

}

.hr-faq__q::-webkit-details-marker { display: none; }

.hr-faq__q::after {

  content: "＋";

  position: absolute;

  right: 18px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--hr-gold, #c8a96a);

  font-weight: 400;

  font-size: 18px;

  transition: transform 180ms ease;

}

.hr-faq__item[open] .hr-faq__q::after {

  content: "−";

}

.hr-faq__q:hover {

  background: rgba(200,169,106,0.06);

}

.hr-faq__a {

  padding: 4px 18px 16px;

  color: var(--hr-fg-soft, #aab2c8);

  font-size: 15px;

  line-height: 1.75;

  border-top: 1px dashed var(--hr-border, #2c3155);

  margin-top: 2px;

  padding-top: 14px;

}



/* ============================================================

   本文内自動内部リンク（Phase 3b-4）のハイライト用控えめスタイル

   ============================================================ */

.entry-content a.hr-autolink {

  color: var(--hr-gold, #c8a96a) !important;

  text-decoration: underline dotted;

  text-decoration-color: var(--hr-gold-muted, rgba(200,169,106,0.5));

  text-underline-offset: 3px;

}

.entry-content a.hr-autolink:hover {

  color: var(--hr-gold, #c8a96a) !important;

  text-decoration-style: solid;

}



/* ゴールド(内部)ボタン — data-rf-ranking-link や関連記事 */

.hr-btn-gold,

[data-rf-ranking-link] {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 44px;

  padding: 0 20px;

  border: 1px solid var(--hr-gold);

  border-radius: 4px;

  background: transparent;

  color: var(--hr-gold) !important;

  font-weight: 500;

  letter-spacing: 0.04em;

  text-decoration: none !important;

  transition: background var(--hr-duration-fast) var(--hr-ease-standard);

}

.hr-btn-gold:hover,

[data-rf-ranking-link]:hover {

  background: rgba(200,169,106,0.08);

  color: var(--hr-gold-hover) !important;

}



/* 1クリック先 = 商品ページ であることを data-rf-product で暗黙マーク。

   これは見た目には影響しない (計測のみ) ので CSSリセットしない */



/* ============================================================

   4. CARDS — 記事カード / Cocoonのentry-card上書き

   ============================================================ */

.entry-card,

.entry-card-wrap,

.hr-card {

  background: var(--hr-surface-1) !important;

  border: 1px solid var(--hr-border) !important;

  border-radius: 4px;

  box-shadow: none !important;

  transition: border-color var(--hr-duration-base) var(--hr-ease-standard);

}

.entry-card:hover,

.hr-card:hover { border-color: var(--hr-gold-muted) !important; }



.entry-card .entry-card-title,

.entry-card .card-title {

  font-family: var(--hr-font-display) !important;

  font-weight: 700;

  color: var(--hr-fg-1) !important;

  letter-spacing: -0.005em;

}

.entry-card .card-excerpt,

.entry-card .entry-card-snippet {

  color: var(--hr-fg-2) !important;

  font-size: 13px;

  line-height: 1.8;

}

.entry-card .cat-label {

  background: var(--hr-surface-2) !important;

  color: var(--hr-gold) !important;

  font-size: 10px;

  letter-spacing: 0.16em;

  border-radius: 2px;

}



/* ブログカードサムネイル — Cocoon 親テーマの aspect-ratio:16/9; object-fit:cover を

   全解像度（PC含む）で上書き。縦長の漫画・同人誌カバーが上下クロップされるのを防ぐ。

   モバイル側の同名ルールと重複するが、こちらがベースライン（メディアクエリ不問）。 */

.entry-card-thumb img,

.card-thumb img {

  aspect-ratio: auto !important;

  object-fit: contain !important;

  background-color: var(--hr-surface-1);

  width: 100%;

  height: auto;

}



/* ============================================================

   5. REVIEW SUMMARY — サマリーボックス

   ============================================================ */

.hr-revsum {

  background: var(--hr-surface-1);

  border: 1px solid var(--hr-gold-muted);

  border-radius: 6px;

  padding: 24px 28px;

  margin: 0 0 28px;

}

.hr-revsum-score {

  font-family: var(--hr-font-display);

  font-size: 42px; font-weight: 900;

  color: var(--hr-gold);

  line-height: 1;

}

.hr-revsum-verdict {

  font-family: var(--hr-font-serif);

  font-size: 17px; line-height: 1.95;

  color: var(--hr-fg-1);

}

.hr-revsum-axes { display: grid; gap: 10px; margin-top: 16px; }

.hr-revsum-axis { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 12px; }

.hr-revsum-axis-label { font-size: 12px; color: var(--hr-fg-2); letter-spacing: 0.06em; }

.hr-revsum-axis-bar { height: 6px; background: var(--hr-surface-2); border-radius: 3px; overflow: hidden; }

.hr-revsum-axis-fill { height: 100%; background: linear-gradient(90deg, var(--hr-gold-muted), var(--hr-gold)); }

.hr-revsum-axis-val { font-family: var(--hr-font-mono); font-size: 12px; color: var(--hr-gold); text-align: right; }



.hr-revsum-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hr-border-soft); }

.hr-revsum-fit-label {

  font-family: var(--hr-font-mono);

  font-size: 10px; letter-spacing: 0.24em;

  color: var(--hr-gold); text-transform: uppercase;

  margin-bottom: 10px;

}

.hr-revsum-notfit-label { color: var(--hr-red); }



/* ============================================================

   6. CONCLUSION BLOCK — 「結論」黄帯

   ============================================================ */

.hr-conclusion {

  border-left: 2px solid var(--hr-gold);

  background: var(--hr-surface-1);

  padding: 18px 22px;

  margin: 24px 0;

}

.hr-conclusion-label {

  font-family: var(--hr-font-serif);

  font-size: 12px; color: var(--hr-gold);

  letter-spacing: 0.2em; font-weight: 700;

  margin-bottom: 8px;

}

.hr-conclusion-body {

  font-family: var(--hr-font-sans);

  font-size: 15px; line-height: 1.95;

  font-weight: 600;

  color: var(--hr-fg-1);

}

.hr-conclusion-body strong { color: var(--hr-amber); }



/* ============================================================

   7. RANKING COMPARE TABLE

   ============================================================ */

.hr-cmp {

  background: var(--hr-surface-1);

  border: 1px solid var(--hr-border);

  border-radius: 6px;

  overflow: hidden;

  margin: 0 0 36px;

}

.hr-cmp-cap { padding: 18px 22px; border-bottom: 1px solid var(--hr-border); background: var(--hr-surface-2); }

.hr-cmp-grid { display: grid; }

.hr-cmp-col.is-highlight {

  background: linear-gradient(180deg, rgba(200,169,106,0.08), transparent 50%);

  position: relative;

}

.hr-cmp-col.is-highlight::before {

  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;

  background: var(--hr-gold);

}

.hr-cmp-best-badge {

  position: absolute; top: 10px; right: 10px;

  background: var(--hr-gold); color: var(--hr-fg-on-gold);

  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;

  padding: 4px 8px; border-radius: 2px; z-index: 2;

}

.hr-cmp-cell { padding: 14px 16px; border-top: 1px solid var(--hr-border-soft); font-size: 13px; }



@media (max-width: 720px) {

  .hr-cmp { overflow-x: auto; }

  .hr-cmp-grid { grid-template-columns: 100px repeat(var(--cmp-cols, 3), minmax(140px, 1fr)); }

  .hr-cmp-cell { font-size: 12px; padding: 12px 10px; }

}



/* ============================================================

   8. UTILITY — Cocoon pink/default 色を無効化

   ============================================================ */

.label-pink, .bg-pink { background: var(--hr-surface-2) !important; color: var(--hr-fg-2) !important; }

.cta-btn, .new-entry-card-link { border-radius: 4px !important; }



/* ============================================================

   8b. GLOBAL IMAGE SAFETY — 記事本文・全解像度で画像はみ出し防止

   ============================================================ */

/* 記事本文の全画像を親幅に収める（PC含む） */

.entry-content img,

.post-content img {

  max-width: 100% !important;

  height: auto !important;

}



/* figureとアフィリエイトリンクのはみ出し防止（幅800px画像がモバイルで切れる問題） */

.entry-content figure,

.post-content figure {

  max-width: 100% !important;

  overflow: hidden;

}

.entry-content figure a,

.post-content figure a {

  display: block;

  max-width: 100%;

}

.entry-content figure img,

.post-content figure img {

  max-width: 100% !important;

  height: auto !important;

  display: block;

}



/* 記事本文の全テーブル — モバイルで横スクロール対応

   display:block + overflow-x:auto でテーブルが viewport をはみ出さない。

   .hr-compare-table table はラッパー側で制御しているが、この設定も有効（二重可） */

.entry-content table,

.post-content table,

article.post table,

article.page table {

  display: block;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  max-width: 100%;

  border-collapse: collapse;

}



/* GPT-4o 生成の比較グリッド（inline flex）— 全解像度で折り返し対応

   article 直下・entry-content 内・post-content 内すべてに適用。

   コンテナを 100% 幅に制限し、アイテムを最大 200px / 画面幅の縮小時は 50% に抑える。 */

article div[style*="justify-content"],

.entry-content div[style*="justify-content"],

.post-content div[style*="justify-content"] {

  flex-wrap: wrap !important;

  gap: 12px !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

}

article div[style*="justify-content"] > div[style*="max-width"],

article div[style*="justify-content"] > div[style*="width"],

.entry-content div[style*="justify-content"] > div[style*="max-width"],

.entry-content div[style*="justify-content"] > div[style*="width"],

.post-content div[style*="justify-content"] > div[style*="max-width"],

.post-content div[style*="justify-content"] > div[style*="width"] {

  box-sizing: border-box !important;

}

article div[style*="justify-content"] > div img,

.entry-content div[style*="justify-content"] > div img,

.post-content div[style*="justify-content"] > div img {

  max-width: 100% !important;

  height: auto !important;

}



/* 広告枠 — 広告であることを示す */

.ad, [id^="ad-"] { border-top: 1px dashed var(--hr-border); padding-top: 12px; margin: 28px 0; }

.ad::before {

  content: "SPONSORED";

  display: block;

  font-family: var(--hr-font-mono);

  font-size: 9px; letter-spacing: 0.3em;

  color: var(--hr-fg-3); margin-bottom: 8px;

}



/* ============================================================

   9. MOBILE (≤480px)

   ============================================================ */

@media (max-width: 480px) {

  #header, .header { min-height: 56px; }

  .menu-header a { font-size: 11px; }

  .hr-revsum { padding: 18px 16px; }

  .hr-revsum-score { font-size: 32px; }

  .hr-revsum-axis { grid-template-columns: 80px 1fr 36px; gap: 8px; }

  .hr-revsum-two { grid-template-columns: 1fr; }

  .rf-cta-block, .btn-cta, .hr-btn-cta { font-size: 14px; min-height: 48px; padding: 0 18px; }

}



/* ============================================================

   10. PRINT — 印刷時は背景を白に

   ============================================================ */

@media print {

  :where(body) { background: #fff; color: #000; }

  .rf-cta-block, .btn-cta { background: #000 !important; color: #fff !important; box-shadow: none !important; }

}





/* ============================================================

   11. COCOON SKIN PINK OVERRIDE — 詳細度強化パッチ

   ============================================================ */

/* グローバルナビ — HOME等のピンク文字を抑える */

#navi .navi-in a,

.navi-in > .menu-header > ul > li > a,

#navi .navi-in a:hover { color: var(--hr-fg-2) !important; }

#navi .navi-in .current-menu-item > a,

.navi-in > .menu-header .current-menu-item > a { color: var(--hr-fg-1) !important; }



/* ウィジェット見出し (カテゴリ / アーカイブ等) */

.sidebar h3,

.sidebar .widget h3,

.widget-sidebar h3,

.widget_categories h3,

.widget_archive h3,

.widget_recent_entries h3 {

  background: var(--hr-surface-2) !important;

  color: var(--hr-gold) !important;

  border-color: var(--hr-gold-muted) !important;

  border-bottom: 1px solid var(--hr-gold) !important;

  font-family: var(--hr-font-serif) !important;

}



/* 汎用 pink ラベル・背景を全部ネイビーに */

.label-pink, .bg-pink, .badge-pink,

.cat-label.cat-ID-1, .cat-label {

  background: var(--hr-surface-2) !important;

  color: var(--hr-gold) !important;

}



/* ページネーション・タグクラウドのピンク */

.page-numbers.current,

.pagination .current,

.tagcloud a:hover { background: var(--hr-cta-gradient) !important; color: #fff !important; border-color: transparent !important; }



/* ヘッダー下の桃色ボーダー */

#header, .header, .header-container { border-bottom-color: var(--hr-border) !important; }

.header-container-in { border-color: var(--hr-border) !important; }



/* ==========================================================================

   白背景の徹底除去 — Cocoon デフォルト white を全てダークテーマに上書き

   ========================================================================== */



/* ページ全体のレイアウト容器 */

body,

.site,

.wrap,

.site-body,

.l-wrap,

.l-main,

.l-body,

#body,

#outer,

.outer,

.home-top-area,

.container {

  background-color: var(--hr-bg) !important;

}



/* メインコンテンツエリア */

#main,

.main,

.content-in,

.content,

.entry-content,

.article-container {

  background-color: transparent !important;

}



/* サイドバー全体 */

.sidebar,

.sidebar-1,

.sidebar-2,

.nwa,

.widget-area {

  background-color: var(--hr-bg) !important;

}



/* 各ウィジェットボックス */

.widget,

.sidebar .widget,

.widget-sidebar,

section.widget {

  background-color: var(--hr-surface-1) !important;

  border: 1px solid var(--hr-border) !important;

  border-radius: 8px !important;

  margin-bottom: 16px !important;

  padding: 0 !important;

  overflow: hidden;

}



/* ウィジェット内リスト・テキスト */

.sidebar .widget ul,

.sidebar .widget ol,

.sidebar .widget li,

.sidebar .widget p,

.widget ul,

.widget ol,

.widget li,

.widget p {

  background-color: transparent !important;

  color: var(--hr-fg-2) !important;

}

.sidebar .widget ul,

.sidebar .widget ol {

  padding: 8px 0 !important;

}

.sidebar .widget li {

  padding: 4px 16px !important;

  border-bottom: 1px solid var(--hr-border) !important;

}

.sidebar .widget li:last-child { border-bottom: none !important; }



/* ウィジェット内リンク */

.sidebar .widget a,

.widget a {

  color: var(--hr-fg-2) !important;

  text-decoration: none !important;

}

.sidebar .widget a:hover,

.widget a:hover {

  color: var(--hr-gold) !important;

}



/* 検索ウィジェット */

.widget.widget_search input[type="search"],

.widget_search input {

  background: var(--hr-surface-2) !important;

  color: var(--hr-fg-1) !important;

  border: 1px solid var(--hr-border) !important;

  border-radius: 4px !important;

}



/* カレンダーウィジェット */

.widget_calendar table,

.widget_calendar caption {

  background: transparent !important;

  color: var(--hr-fg-2) !important;

}



/* パンくずリスト */

.breadcrumb,

#breadcrumb,

.breadcrumb-navi {

  background-color: transparent !important;

  color: var(--hr-fg-2) !important;

}

.breadcrumb a { color: var(--hr-fg-2) !important; }

.breadcrumb a:hover { color: var(--hr-gold) !important; }



/* ページネーション周辺 */

.page-numbers,

.pagination {

  background: transparent !important;

}

.page-numbers a,

.pagination a {

  background: var(--hr-surface-1) !important;

  color: var(--hr-fg-2) !important;

  border: 1px solid var(--hr-border) !important;

}

.page-numbers a:hover,

.pagination a:hover {

  background: var(--hr-surface-2) !important;

  color: var(--hr-fg-1) !important;

  border-color: var(--hr-gold-muted) !important;

}



/* 目次 (TOC) */

#toc_container,

.toc,

.ez-toc-container {

  background: var(--hr-surface-1) !important;

  border: 1px solid var(--hr-border) !important;

  border-radius: 8px !important;

}

#toc_container a,

.toc a,

.ez-toc-container a { color: var(--hr-fg-2) !important; }

#toc_container a:hover,

.toc a:hover { color: var(--hr-gold) !important; }



/* Cocoon の fixed-sidebar スクロールエリア */

.sidebar-scroll {

  background-color: var(--hr-bg) !important;

}



/* Cocoon の pink リンク色 (a タグ全般) */

.entry-content a:not(.rf-cta):not(.rf-cta-block):not(.hr-btn-gold):not([data-rf-ranking-link]) {

  color: var(--hr-gold) !important;

  text-decoration-color: var(--hr-gold-muted);

}

.entry-content a:hover:not(.rf-cta):not(.rf-cta-block) { color: var(--hr-gold-hover) !important; }



/* フッターのピンク */

.footer, #footer { background: var(--hr-surface-1) !important; color: var(--hr-fg-2) !important; border-top: 1px solid var(--hr-border) !important; }

.footer a { color: var(--hr-fg-2) !important; }

.footer a:hover { color: var(--hr-gold) !important; }



/* ページトップ戻るボタン */

.go-to-top-button { background: var(--hr-surface-2) !important; color: var(--hr-gold) !important; border: 1px solid var(--hr-gold-muted) !important; }





/* ============================================================

   12. COCOON SKIN PINK OVERRIDE — PASS 2 (高詳細度)

   ============================================================ */

/* カスタムカテゴリナビ (HOME / ASMR など) — 強制ネイビー化 */

nav.custom-cat-nav,

.custom-cat-nav,

.custom-cat-nav ul,

.custom-cat-nav li {

  background: var(--hr-surface-1) !important;

  border-color: var(--hr-border) !important;

}

nav.custom-cat-nav a,

nav.custom-cat-nav a:link,

nav.custom-cat-nav a:visited,

nav.custom-cat-nav a:hover,

nav.custom-cat-nav a:active,

.custom-cat-nav a,

.custom-cat-nav a:link,

.custom-cat-nav a:visited,

.custom-cat-nav li a,

.custom-cat-nav li > a,

body .custom-cat-nav a,

html body .custom-cat-nav a {

  color: var(--hr-fg-2) !important;

  background: transparent !important;

  border-color: var(--hr-border) !important;

}

nav.custom-cat-nav a:hover,

.custom-cat-nav a:hover,

body .custom-cat-nav a:hover {

  color: var(--hr-gold) !important;

  background: var(--hr-surface-2) !important;

}

.custom-cat-nav .current,

.custom-cat-nav a.current,

.custom-cat-nav li.current > a {

  color: var(--hr-gold) !important;

  border-bottom: 2px solid var(--hr-gold) !important;

}



/* Cocoon のカラー変数自体を握り潰す(ピンク系) */

:root, body {

  --cocoon-key-color: #c8a96a !important;

  --cocoon-key-light-color: #1b2040 !important;

  --cocoon-key-dark-color: #8c7749 !important;

  --cocoon-main-color: #c8a96a !important;

  --cocoon-link-color: #c8a96a !important;

  --cocoon-hover-link-color: #d9ba7b !important;

  --cocoon-basic-border-color: #2c3155 !important;

  --cocoon-thin-color: #2c3155 !important;

  --color-moderate-pink: #1b2040 !important;

  --color-vivid-pink: #c8a96a !important;

}



/* 汎用ピンク文字/背景 total sweep */

[style*="#ff1e7a"], [style*="#ff5e9f"], [style*="#f06292"], [style*="#ec407a"],

[style*="pink"] { color: var(--hr-fg-1) !important; background-color: transparent !important; }



/* トップページの大きな見出し帯 (カテゴリバー等) */

.category-name, .cat-name-label, .main-list-label,

.archive-title, .page-title, .entry-title-link {

  color: var(--hr-fg-1) !important;

}



/* ボタン系の pink デフォルト */

button, input[type="submit"], input[type="button"], .btn {

  background: var(--hr-surface-2) !important;

  color: var(--hr-fg-1) !important;

  border: 1px solid var(--hr-border) !important;

}

button:hover, input[type="submit"]:hover, .btn:hover {

  background: var(--hr-surface-3) !important;

  border-color: var(--hr-gold-muted) !important;

}



/* 検索ボックス */

.search-edit, input[type="search"], input[type="text"] {

  background: var(--hr-surface-1) !important;

  color: var(--hr-fg-1) !important;

  border: 1px solid var(--hr-border) !important;

}



/* メニュー項目の下線/枠ピンク */

#navi, #navi ul, #navi li, #navi a,

.menu-header, .menu-header ul, .menu-header li {

  border-color: var(--hr-border) !important;

}



/* 記事中の h2/h3 の pink 下線 */

.entry-content h2, .entry-content h3, .article h2, .article h3 {

  background: transparent !important;

  border-left: 3px solid var(--hr-gold) !important;

  border-bottom: 1px solid var(--hr-border) !important;

  color: var(--hr-fg-1) !important;

  padding: 8px 14px !important;

}



/* SNSボタンのピンク */

.sns-share-buttons a, .sns-follow-buttons a {

  filter: saturate(0.6);

}



/* フォーカスリング */

*:focus-visible { outline: 2px solid var(--hr-gold) !important; outline-offset: 2px; }





/* === 13. CUSTOM CAT NAV final override (minimal, one-rule-per-line) === */

html body .custom-cat-nav a { color: #aab2c8 !important; }

html body .custom-cat-nav a:link { color: #aab2c8 !important; }

html body .custom-cat-nav a:visited { color: #aab2c8 !important; }

html body .custom-cat-nav a:hover { color: #c8a96a !important; background: #1b2040 !important; }

html body .custom-cat-nav { background: #13162b !important; border-color: #2c3155 !important; }

html body .custom-cat-nav li { border-color: #2c3155 !important; }





/* ============================================================

   14. PHASE 2 — TRUST BAR

   ============================================================ */

.hr-trust-bar {

  background: var(--hr-surface-1);

  border-bottom: 1px solid var(--hr-border-soft);

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  position: relative;

  z-index: 200;

}

.hr-trust-bar__list {

  display: flex;

  align-items: center;

  gap: 20px;

  list-style: none !important;

  margin: 0 !important;

  padding: 0 16px !important;

  font-family: var(--hr-font-sans);

  font-size: 11px;

  color: var(--hr-fg-3);

  letter-spacing: 0.05em;

  white-space: nowrap;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}

.hr-trust-bar__list li {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

  line-height: 36px;

}

.hr-trust-check {

  color: var(--hr-gold);

  font-weight: 700;

  margin-right: 3px;

  font-size: 12px;

}

.hr-trust-sep { opacity: 0.25; }

.hr-trust-link,

.hr-trust-bar a {

  color: var(--hr-fg-3) !important;

  text-decoration: none !important;

  border-bottom: 1px dotted var(--hr-border) !important;

  transition: color var(--hr-duration-fast) !important;

}

.hr-trust-bar a:hover,

.hr-trust-link:hover {

  color: var(--hr-gold) !important;

  border-bottom-color: var(--hr-gold) !important;

}

@media (max-width: 600px) {

  .hr-trust-bar { height: 32px; }

  .hr-trust-bar__list { font-size: 10px; gap: 12px; }

  .hr-trust-bar__list li { line-height: 32px; }

  .hr-trust-bar__sep-item { display: none; }

}





/* ============================================================

   15. PHASE 2 — HERO SECTION

   ============================================================ */

.hr-hero {

  background: linear-gradient(160deg, #0a0a1f 0%, #13162b 55%, #0e1125 100%);

  border-bottom: 1px solid var(--hr-border);

  padding: 68px 24px 60px;

  text-align: center;

  /* Full-width: sits before #container in DOM after JS hoisting */

  width: 100%;

  box-sizing: border-box;

  overflow: hidden;

  position: relative;

}

/* subtle radial glow behind title */

.hr-hero::before {

  content: "";

  position: absolute;

  top: -60px; left: 50%;

  transform: translateX(-50%);

  width: 700px; height: 350px;

  background: radial-gradient(ellipse at 50% 40%, rgba(200,169,106,0.07) 0%, transparent 65%);

  pointer-events: none;

}

.hr-hero__inner {

  max-width: 760px;

  margin: 0 auto;

  position: relative;

  z-index: 1;

}

.hr-hero__label {

  font-family: var(--hr-font-mono);

  font-size: 10px;

  letter-spacing: 0.42em;

  color: var(--hr-gold);

  text-transform: uppercase;

  margin: 0 0 20px;

  opacity: 0.82;

}

.hr-hero__title {

  font-family: var(--hr-font-display) !important;

  font-size: clamp(24px, 3.8vw, 40px) !important;

  font-weight: 900 !important;

  color: var(--hr-fg-1) !important;

  line-height: 1.45 !important;

  letter-spacing: -0.015em !important;

  margin: 0 0 18px !important;

  /* Cocoon h2/h3 overrides must be neutralised here */

  border: none !important;

  border-left: none !important;

  background: transparent !important;

  padding: 0 !important;

}

.hr-hero__sub {

  font-size: clamp(13px, 1.8vw, 15px);

  color: var(--hr-fg-2);

  line-height: 1.9;

  margin: 0 0 36px;

  letter-spacing: 0.01em;

}

.hr-hero__cta-wrap {

  display: flex;

  gap: 14px;

  justify-content: center;

  flex-wrap: wrap;

  margin-bottom: 40px;

}

.hr-hero__cta-main {

  min-width: 220px !important;

}

.hr-hero__cta-sub {

  min-width: 160px !important;

}

/* stat strip */

.hr-hero__stats {

  display: flex;

  justify-content: center;

  list-style: none !important;

  margin: 0 !important;

  padding: 24px 0 0 !important;

  border-top: 1px solid var(--hr-border-soft);

  gap: 0;

}

.hr-hero__stats li {

  list-style: none !important;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 0 32px;

  border-right: 1px solid var(--hr-border-soft);

}

.hr-hero__stats li:last-child { border-right: none; }

.hr-hero__stats strong {

  font-family: var(--hr-font-mono);

  font-size: 22px;

  font-weight: 900;

  color: var(--hr-gold);

  line-height: 1;

  margin-bottom: 5px;

}

.hr-hero__stats-unit {

  font-size: 14px;

  font-weight: 500;

  margin-left: 1px;

}

.hr-hero__stats span {

  font-size: 10px;

  color: var(--hr-fg-3);

  letter-spacing: 0.1em;

}



@media (max-width: 600px) {

  .hr-hero { padding: 48px 16px 40px; }

  .hr-hero__cta-main,

  .hr-hero__cta-sub { min-width: calc(100% - 8px) !important; }

  .hr-hero__stats li { padding: 0 18px; }

  .hr-hero__stats strong { font-size: 18px; }

  .hr-hero__stats span { font-size: 9px; }

}



/* ============================================================

   16. Header Compact — 143px → 約64px

   ============================================================ */



/* ヘッダー全体の最小高さをリセット */

#header {

  min-height: 0 !important;

}



/* header-in: flex 縦積み + 上下パディングを締める */

#header .header-in,

#header-in {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: center !important;

  gap: 2px !important;

  padding-top: 10px !important;

  padding-bottom: 10px !important;

  min-height: 0 !important;

}



/* タグライン: キャプション扱いに縮小 */

#header .tagline {

  order: -1;

  font-size: 0.62rem !important;

  color: var(--hr-fg-2) !important;

  letter-spacing: 0.06em !important;

  margin: 0 !important;

  padding: 0 !important;

  line-height: 1 !important;

}



/* ロゴ／サイト名: Cocoon が付けている padding-top: 20px を削除してコンパクト化 */

#header h1.logo,

#header .logo,

#header .logo-header {

  font-size: clamp(1rem, 2.2vw, 1.25rem) !important;

  line-height: 1.3 !important;

  margin: 0 !important;

  padding: 0 !important;  /* ← Cocoon default padding-top: 20px を上書き */

}



/* スティッキー時: さらにコンパクト */

#header.is-header-fixed .header-in,

#header.is-header-fixed #header-in {

  padding-top: 7px !important;

  padding-bottom: 7px !important;

}



@media (max-width: 768px) {

  #header .header-in,

  #header-in {

    padding-top: 8px !important;

    padding-bottom: 8px !important;

  }

}



/* ============================================================

   9. 編集部評価ボックス（hr_review_box ショートコード）

   ============================================================ */

.hr-review-box {

  background: var(--hr-surface-1);

  border: 1px solid var(--hr-border);

  border-left: 4px solid var(--hr-gold);

  border-radius: 10px;

  padding: 20px 24px;

  margin: 28px 0;

}

.hr-rb-header {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 12px;

}

.hr-rb-label {

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  color: var(--hr-gold);

  background: rgba(200,169,106,0.12);

  padding: 3px 10px;

  border-radius: 4px;

  text-transform: uppercase;

}

.hr-rb-stars {

  color: var(--hr-amber);

  font-size: 1.05rem;

  letter-spacing: 2px;

  line-height: 1;

}

.hr-rb-score {

  font-size: 1.3rem;

  font-weight: 700;

  color: var(--hr-fg-1);

  font-family: var(--hr-font-sans);

}

.hr-rb-comment {

  color: var(--hr-fg-2);

  font-size: 0.88rem;

  margin: 6px 0 14px;

  line-height: 1.7;

  padding-left: 12px;

  border-left: 2px solid var(--hr-border);

}

.hr-rb-axes {

  display: flex;

  flex-direction: column;

  gap: 7px;

  margin: 10px 0 14px;

}

.hr-rb-axis {

  display: flex;

  align-items: center;

  gap: 10px;

}

.hr-rb-axis__label {

  font-size: 0.78rem;

  color: var(--hr-fg-2);

  width: 116px;

  flex-shrink: 0;

}

.hr-rb-axis__bar-wrap {

  flex: 1;

  background: var(--hr-surface-2);

  border-radius: 4px;

  height: 6px;

  overflow: hidden;

}

.hr-rb-axis__bar {

  height: 100%;

  background: linear-gradient(90deg, var(--hr-gold-muted), var(--hr-gold));

  border-radius: 4px;

}

.hr-rb-axis__score {

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--hr-amber);

  width: 16px;

  text-align: right;

  flex-shrink: 0;

}

.hr-rb-reviewer {

  font-size: 0.72rem;

  color: var(--hr-fg-3);

  text-align: right;

  margin-top: 8px;

}

@media (max-width: 480px) {

  .hr-review-box { padding: 16px 16px; }

  .hr-rb-axis__label { width: 80px; font-size: 0.74rem; }

}



/* ============================================================

   10. ランキング記事テンプレート（hr_ranking_item ショートコード）

   ============================================================ */

.hr-ranking-item {

  border: 1px solid var(--hr-border);

  border-radius: 10px;

  margin: 20px 0;

  overflow: hidden;

  background: var(--hr-surface-1);

}

.hr-ranking-item--1st {

  border-color: var(--hr-gold);

  box-shadow: 0 0 0 1px var(--hr-gold), var(--hr-shadow-gold);

}

.hr-ranking-item__header {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 18px;

  background: var(--hr-surface-2);

  border-bottom: 1px solid var(--hr-border);

}

.hr-ranking-item--1st .hr-ranking-item__header {

  background: rgba(200,169,106,0.08);

  border-bottom-color: var(--hr-gold);

}

.hr-ranking-badge {

  font-size: 1.35rem;

  font-weight: 900;

  font-family: var(--hr-font-display);

  color: var(--hr-fg-3);

  min-width: 48px;

  flex-shrink: 0;

}

.hr-ranking-item--1st .hr-ranking-badge {

  color: var(--hr-gold);

  text-shadow: 0 0 10px rgba(200,169,106,0.45);

}

.hr-ranking-item__title {

  font-weight: 700;

  color: var(--hr-fg-1);

  flex: 1;

  font-size: 0.92rem;

  line-height: 1.4;

}

.hr-ranking-item__body {

  padding: 14px 18px;

}

.hr-ranking-item__tagline {

  font-size: 0.83rem;

  color: var(--hr-fg-3);

  margin-bottom: 14px;

  padding-left: 10px;

  border-left: 2px solid var(--hr-border-soft);

  font-style: italic;

}

.hr-ranking-item__actions {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}

.hr-ranking-item__btn-review {

  flex: 1;

  min-width: 130px;

  padding: 10px 14px;

  border-radius: 6px;

  text-align: center;

  font-size: 0.83rem;

  font-weight: 600;

  background: var(--hr-surface-2);

  border: 1px solid var(--hr-border);

  color: var(--hr-fg-1) !important;

  text-decoration: none !important;

  transition: border-color var(--hr-duration-fast) var(--hr-ease-standard),

              color var(--hr-duration-fast) var(--hr-ease-standard);

}

.hr-ranking-item__btn-review:hover {

  border-color: var(--hr-gold);

  color: var(--hr-gold) !important;

  background: rgba(200,169,106,0.07);

}

.hr-ranking-item__btn-fanza {

  flex: 1;

  min-width: 130px;

  padding: 10px 14px;

  border-radius: 6px;

  text-align: center;

  font-size: 0.83rem;

  font-weight: 700;

  background: var(--hr-cta-gradient);

  color: #fff !important;

  text-decoration: none !important;

  box-shadow: var(--hr-shadow-cta);

  transition: opacity var(--hr-duration-fast), transform var(--hr-duration-fast);

}

.hr-ranking-item__btn-fanza:hover {

  opacity: 0.9;

  transform: translateY(-1px);

}

/* 比較表 — wrapper div に overflow-x:auto を付けて横スクロール対応 */

.hr-compare-table {

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  display: block;

  margin: 22px 0;

  font-size: 0.88rem;

}

/* 内側の <table> に border-collapse と min-width */

.hr-compare-table table {

  width: 100%;

  border-collapse: collapse;

  min-width: 480px;

}

.hr-compare-table th {

  background: var(--hr-surface-2);

  color: var(--hr-gold);

  padding: 9px 12px;

  border: 1px solid var(--hr-border);

  text-align: center;

  font-weight: 700;

  font-family: var(--hr-font-display);

}

.hr-compare-table td {

  padding: 9px 12px;

  border: 1px solid var(--hr-border);

  color: var(--hr-fg-2);

  vertical-align: top;

  background: var(--hr-surface-1);

}

.hr-compare-table tr:first-child td {

  background: rgba(200,169,106,0.05);

  font-weight: 600;

  color: var(--hr-fg-1);

}

@media (max-width: 640px) {

  .hr-compare-table { font-size: 0.78rem; }

  .hr-compare-table table { min-width: 420px; }

  .hr-compare-table th, .hr-compare-table td { padding: 7px 8px; }

  .hr-ranking-item__actions { flex-direction: column; }

  .hr-ranking-item__btn-review,

  .hr-ranking-item__btn-fanza { min-width: unset; width: 100%; }

}



/* ==========================================================================

   Section 11: 「この記事で分かること」ボックス & ランキング詳細

   ========================================================================== */



.hr-article-summary {

  background: var(--hr-surface-2);

  border: 1px solid var(--hr-border);

  border-left: 4px solid var(--hr-gold);

  border-radius: 8px;

  padding: 20px 24px;

  margin: 24px 0;

}



.hr-article-summary h2 {

  font-size: 1rem;

  font-weight: 700;

  color: var(--hr-gold);

  margin: 0 0 12px;

  padding: 0;

  border: none;

  background: none;

}



.hr-article-summary ul {

  margin: 0;

  padding-left: 1.4em;

  list-style: disc;

}



.hr-article-summary li {

  color: var(--hr-fg-2);

  font-size: 0.92rem;

  line-height: 1.7;

  margin: 4px 0;

}



/* ランキング詳細（各位のh3・ul群） */

.hr-rank-detail {

  margin: 12px 0 0;

  padding: 0 4px;

}



.hr-rank-detail h3 {

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--hr-fg-2);

  margin: 16px 0 6px;

  padding: 0;

  border: none;

  background: none;

}



.hr-rank-detail ul {

  margin: 0 0 8px;

  padding-left: 1.4em;

}



.hr-rank-detail li {

  color: var(--hr-fg-2);

  font-size: 0.88rem;

  line-height: 1.65;

  margin: 3px 0;

}



@media (max-width: 640px) {

  .hr-article-summary { padding: 14px 16px; }

}



/* ==========================================================================

   Section 12: 関連記事サジェスト

   ========================================================================== */



.hr-related-posts {

  margin: 36px 0 0;

  padding: 20px 24px;

  background: var(--hr-surface-2);

  border: 1px solid var(--hr-border);

  border-radius: 8px;

}



.hr-related-posts__heading {

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--hr-gold);

  margin: 0 0 12px;

}



.hr-related-posts__list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.hr-related-posts__item {

  border-bottom: 1px solid var(--hr-border);

  padding-bottom: 10px;

}

.hr-related-posts__item:last-child {

  border-bottom: none;

  padding-bottom: 0;

}



.hr-related-posts__link {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  color: var(--hr-fg-1);

  transition: color 0.2s;

}

.hr-related-posts__link:hover {

  color: var(--hr-gold);

}



.hr-related-posts__thumb {

  flex-shrink: 0;

  width: 80px;

  height: 60px;

  overflow: hidden;

  border-radius: 4px;

}

.hr-related-posts__thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.hr-related-posts__title {

  font-size: 0.88rem;

  line-height: 1.55;

  flex: 1;

}



@media (max-width: 640px) {

  .hr-related-posts { padding: 14px 16px; }

  .hr-related-posts__thumb { width: 64px; height: 48px; }

}



/* ==========================================================================

   Section 13: 白背景残骸の追撃（全サイト総点検）

   原因: Cocoon 親テーマ + WP ブロック既定値で

   header-container / pagination / wp-block-heading 等が

   白背景のまま出力されてダーク文字が完全不可読になっていた。

   ========================================================================== */



/* ヘッダー全体 - デフォルトは白 */

#header-container,

.header-container,

#header,

.header,

.header-in,

.header-top,

.logo-header,

.mobile-header-menu-buttons,

.navi-in,

.navi,

#navi,

#navi-in {

  background-color: var(--hr-bg) !important;

  color: var(--hr-fg-1) !important;

}



/* ヘッダー内のテキスト・ロゴ */

#header-container *,

.header-container * {

  color: var(--hr-fg-1);

}

.site-name-text,

.logo-text,

.header-container .site-name a,

.header-container .site-description {

  color: var(--hr-fg-1) !important;

}



/* ナビゲーション（グローバルメニュー） */

.navi .navi-in > .menu-header > li > a,

.navi-in > ul > li > a,

#navi .menu-header > li > a {

  color: var(--hr-fg-1) !important;

  background-color: transparent !important;

}

.navi .navi-in > .menu-header > li > a:hover,

.navi-in > ul > li > a:hover {

  color: var(--hr-gold) !important;

  background-color: var(--hr-surface-1) !important;

}



/* WP ブロック見出し（ウィジェットタイトル） */

h2.wp-block-heading,

h3.wp-block-heading,

h4.wp-block-heading,

.widget h2.wp-block-heading,

.widget h3.wp-block-heading,

.sidebar h2.wp-block-heading,

.sidebar h3.wp-block-heading,

.wp-block-group__inner-container h2,

.wp-block-group__inner-container h3 {

  background-color: var(--hr-surface-2) !important;

  color: var(--hr-gold) !important;

  padding: 10px 14px !important;

  margin: 0 !important;

  font-size: 0.95rem !important;

  font-weight: 700 !important;

  border-bottom: 1px solid var(--hr-border) !important;

  border-radius: 0 !important;

}



/* ページネーション（前へ/次へ・数字） */

.pagination a,

.pagination span,

.pagination-next-link,

.pagination-prev-link,

.pagination-next,

.pagination-prev,

.page-numbers,

a.page-numbers,

span.page-numbers,

a.key-btn,

.key-btn,

.pager-post-navi a,

.pager-post-navi .iconbefore,

.comment-btn,

.more-link,

a.more-link {

  background-color: var(--hr-surface-1) !important;

  color: var(--hr-fg-1) !important;

  border: 1px solid var(--hr-border) !important;

  text-decoration: none;

}

.pagination a:hover,

.page-numbers:hover,

a.key-btn:hover,

a.more-link:hover {

  background-color: var(--hr-surface-2) !important;

  color: var(--hr-gold) !important;

  border-color: var(--hr-gold) !important;

}

.pagination .current,

.page-numbers.current,

span.page-numbers.current {

  background-color: var(--hr-gold) !important;

  color: var(--hr-bg) !important;

  border-color: var(--hr-gold) !important;

}



/* コメントフォーム・入力欄 */

.comment-form input[type="text"],

.comment-form input[type="email"],

.comment-form input[type="url"],

.comment-form textarea,

input[type="search"],

input[type="text"],

input[type="email"],

textarea {

  background-color: var(--hr-surface-1) !important;

  color: var(--hr-fg-1) !important;

  border: 1px solid var(--hr-border) !important;

}

input::placeholder, textarea::placeholder {

  color: var(--hr-fg-3) !important;

}



/* テーブル（記事内 / ウィジェット内） */

table,

.wp-block-table table {

  background-color: transparent !important;

  color: var(--hr-fg-1) !important;

}

table thead tr,

table thead th {

  background-color: var(--hr-surface-2) !important;

  color: var(--hr-gold) !important;

  border-color: var(--hr-border) !important;

}

table tbody tr,

table tbody td,

table tbody th {

  background-color: var(--hr-surface-1) !important;

  color: var(--hr-fg-1) !important;

  border-color: var(--hr-border) !important;

}

table tbody tr:nth-child(even) td {

  background-color: var(--hr-surface-2) !important;

}



/* 目次 (Cocoon Table of Contents) */

.toc,

#toc,

.toc-content {

  background-color: var(--hr-surface-2) !important;

  color: var(--hr-fg-1) !important;

  border: 1px solid var(--hr-border) !important;

  border-radius: 8px !important;

}

.toc-title,

.toc .toc-title {

  background-color: var(--hr-surface-1) !important;

  color: var(--hr-gold) !important;

  border-bottom: 1px solid var(--hr-border) !important;

}

.toc a, .toc-content a {

  color: var(--hr-fg-2) !important;

}

.toc a:hover {

  color: var(--hr-gold) !important;

}



/* パンくず */

.breadcrumb,

#breadcrumb,

.breadcrumb-in {

  background-color: transparent !important;

  color: var(--hr-fg-2) !important;

}

.breadcrumb a {

  color: var(--hr-fg-2) !important;

}

.breadcrumb a:hover {

  color: var(--hr-gold) !important;

}



/* フッター */

#footer,

.footer,

.footer-in,

.footer-bottom,

#footer-container,

.footer-top-content,

.copyright {

  background-color: var(--hr-surface-1) !important;

  color: var(--hr-fg-2) !important;

  border-top: 1px solid var(--hr-border) !important;

}

#footer a, .footer a {

  color: var(--hr-fg-2) !important;

}

#footer a:hover, .footer a:hover {

  color: var(--hr-gold) !important;

}



/* Cocoon コメントエリア */

.comment-area,

.comments,

#comments,

.comment,

.comment-body,

.comment-author {

  background-color: var(--hr-surface-1) !important;

  color: var(--hr-fg-1) !important;

  border-color: var(--hr-border) !important;

}



/* アバター画像（グレー背景が出ているもの） */

img.avatar {

  background-color: transparent !important;

}



/* 汎用: 白背景残骸を片っ端から消す */

[style*="background-color: #fff"],

[style*="background-color:#fff"],

[style*="background: #fff"],

[style*="background:#fff"],

[style*="background-color: white"] {

  background-color: var(--hr-surface-1) !important;

}



/* ==========================================================================

   Section 14: モバイル対応強化

   Cocoon 既定の 1023px ブレークポイントに合わせる + 768px/480px で調整

   ========================================================================== */



/* 1023px 以下（タブレット～モバイル） - Cocoon 既定ブレークポイント */

@media (max-width: 1023px) {

  /* === 横スクロール完全撲滅 === */

  html, body {

    overflow-x: hidden !important;

    max-width: 100vw !important;

  }

  html, body, #body-container, #container, #content, #content-in,

  .wrap, #main, .main, .l-main, #sidebar, .sidebar,

  #header, #header-in, .header-in, #navi, .navi, #navi-in, .navi-in,

  #footer, .footer, .footer-in, .entry-content, .post,

  article, section, .entry-card-wrap {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    float: none !important;

  }

  /* PCメニューを非表示にしてCocoonモバイルメニューに委譲 */

  #navi #menu-header-menu, #navi .menu-header, .menu-pc,

  #navi-in > .navi-in, #navi .menu-top {

    display: none !important;

  }

  /* 画像は絶対にはみ出さない */

  img, iframe, video, embed, object { max-width: 100% !important; height: auto; }

  /* 全体ダーク背景を強制維持 */

  body, .site, .content-in, .main, #main, .sidebar, #sidebar {

    background-color: var(--hr-bg) !important;

  }

  /* ウィジェットダーク */

  .widget {

    background-color: var(--hr-surface-1) !important;

    color: var(--hr-fg-1) !important;

  }

  .widget h2.wp-block-heading,

  .widget h3.wp-block-heading,

  .widget-sidebar-entry-title {

    background-color: var(--hr-surface-2) !important;

    color: var(--hr-gold) !important;

    padding: 10px 14px !important;

  }

  .widget a, .widget li {

    color: var(--hr-fg-2) !important;

    background-color: transparent !important;

  }

  /* サイドバー全要素ダーク */

  .sidebar * {

    background-color: transparent !important;

  }

  .sidebar .widget, .sidebar section.widget {

    background-color: var(--hr-surface-1) !important;

  }

  /* コンテンツエリア内の白ブロック一掃 */

  #content-in, .content-in { background-color: var(--hr-bg) !important; }

  article, .entry, .post { background-color: transparent !important; }

}



@media (max-width: 768px) {

  /* ルート文字サイズ調整 */

  html { font-size: 15px; }

  body { font-size: 15px; line-height: 1.7; }



  /* コンテンツの左右余白 */

  .l-main, #main, .main, #content, .wrap, .site, article {

    padding-left: 12px !important;

    padding-right: 12px !important;

  }

  .entry-content, .post-content {

    padding: 0 !important;

  }



  /* 見出しサイズ */

  h1, .entry-title {

    font-size: 1.4rem !important;

    line-height: 1.4 !important;

  }

  h2 {

    font-size: 1.2rem !important;

    line-height: 1.4 !important;

    padding: 8px 12px !important;

  }

  h3 {

    font-size: 1.05rem !important;

    line-height: 1.45 !important;

  }



  /* サイドバー -> 本文の下に回す / 横幅フル */

  .sidebar, #sidebar, .l-sidebar {

    width: 100% !important;

    max-width: 100% !important;

    float: none !important;

    margin-top: 24px !important;

    padding: 0 12px !important;

  }

  .l-main, #main {

    width: 100% !important;

    float: none !important;

  }

  .main, #main-content {

    width: 100% !important;

  }



  /* ブログカード - 1カラム */

  .widget-entry-cards,

  .entry-card-wrap,

  .a-wrap,

  .e-card,

  .post-card {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 0 16px 0 !important;

  }

  .entry-card, .a-wrap.card-large-image,

  .card-large-image .entry-card {

    display: flex !important;

    flex-direction: column !important;

  }

  .entry-card-thumb,

  .card-thumb {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

  }

  .entry-card-thumb img,

  .card-thumb img {

    width: 100% !important;

    height: auto !important;

    /* aspect-ratio: 16/9; object-fit: cover; を削除 —

       縦長の漫画・同人誌カバー画像で上下タイトル文字が切れ��ため。

       自然な���スペクト比 (��� 2:3) で表示しそ���まま見せる。 */

    aspect-ratio: auto !important;

    object-fit: contain !important;

    background-color: var(--hr-surface-1, #13162b);

  }

  .entry-card-content,

  .card-content {

    width: 100% !important;

    margin: 8px 0 0 !important;

    padding: 0 !important;

  }



  /* ヘッダー -> コンパクト化 */

  #header-container, .header-container {

    padding: 8px 12px !important;

  }

  .logo-header img, .site-name-text {

    max-height: 36px !important;

    font-size: 1.1rem !important;

  }

  .navi, #navi {

    font-size: 0.85rem !important;

  }



  /* グローバルメニュー - モバイルは横スクロール or ハンバーガー */

  .navi-in > ul.menu-header {

    flex-wrap: wrap !important;

    overflow-x: auto !important;

  }

  .navi-in > ul.menu-header > li {

    flex: 0 0 auto !important;

  }

  .navi-in > ul.menu-header > li > a {

    padding: 10px 14px !important;

    font-size: 0.82rem !important;

  }



  /* ウィジェット */

  .widget {

    margin-bottom: 12px !important;

  }

  .widget h2.wp-block-heading,

  .widget h3.wp-block-heading,

  .widget .widget-title {

    font-size: 0.9rem !important;

    padding: 10px 12px !important;

  }

  .widget ul li {

    padding: 8px 12px !important;

    font-size: 0.88rem !important;

  }



  /* テーブル - 横スクロール（モバイル）

     グローバルで .entry-content table に display:block;overflow-x:auto を設定済み。

     ここではフォントサイズとパディングのみ調整。 */

  .wp-block-table, figure.wp-block-table {

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;

  }

  table {

    font-size: 0.82rem !important;

  }

  table th, table td {

    padding: 6px 8px !important;

  }



  /* CTA ボタン */

  .rf-cta, .rf-cta-block,

  .hr-cta, .hr-cta-button {

    width: 100% !important;

    max-width: 100% !important;

    padding: 14px 16px !important;

    font-size: 0.95rem !important;

    display: block;

    box-sizing: border-box;

  }



  /* 記事内のリンク - タップしやすく */

  .entry-content a {

    word-break: break-word;

  }



  /* 画像は親幅まで */

  .entry-content img,

  .post-content img,

  article img {

    max-width: 100% !important;

    height: auto !important;

  }



  /* ===== GPT-4o 生成の比較グリッド修正（モバイル） =====

     article 直下の inline flex も含めて全パターン対応。

     各アイテムを calc(50%-12px) に制限して 2 列レイアウトにする。 */

  article div[style*="justify-content"],

  .entry-content div[style*="justify-content"],

  .post-content div[style*="justify-content"] {

    flex-wrap: wrap !important;

    gap: 12px !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  article div[style*="justify-content"] > div[style*="max-width"],

  article div[style*="justify-content"] > div[style*="width"],

  .entry-content div[style*="justify-content"] > div[style*="max-width"],

  .entry-content div[style*="justify-content"] > div[style*="width"],

  .post-content div[style*="justify-content"] > div[style*="max-width"],

  .post-content div[style*="justify-content"] > div[style*="width"] {

    flex: 0 0 calc(50% - 12px) !important;

    max-width: calc(50% - 12px) !important;

    width: auto !important;

    box-sizing: border-box !important;

  }

  /* 画像もラッパーに合わせて 100% まで伸ばす */

  article div[style*="justify-content"] > div img,

  .entry-content div[style*="justify-content"] > div img,

  .post-content div[style*="justify-content"] > div img {

    max-width: 100% !important;

    height: auto !important;

  }



  /* 関連記事 */

  .hr-related-posts { padding: 12px 14px !important; }

  .hr-related-posts__link { gap: 10px; }

  .hr-related-posts__thumb { width: 60px !important; height: 45px !important; }

  .hr-related-posts__title { font-size: 0.82rem !important; }



  /* 比較テーブル - 横スクロール（縦積み不要になった） */

  .hr-compare-table {

    font-size: 0.75rem !important;

  }

  .hr-compare-table table {

    min-width: 380px;

  }



  /* ランキングアイテム */

  .hr-ranking-item {

    padding: 14px !important;

  }

  .hr-ranking-item__title {

    font-size: 1rem !important;

  }



  /* パンくず */

  .breadcrumb {

    font-size: 0.75rem !important;

    padding: 6px 12px !important;

  }

  .breadcrumb-in {

    flex-wrap: wrap;

  }



  /* フッター */

  #footer, .footer {

    padding: 16px 12px !important;

  }

  .copyright { font-size: 0.75rem !important; }



  /* 目次 */

  .toc, #toc {

    padding: 10px 12px !important;

    font-size: 0.85rem !important;

  }

}



@media (max-width: 480px) {

  html { font-size: 14px; }

  h1, .entry-title { font-size: 1.25rem !important; }

  h2 { font-size: 1.08rem !important; }

  h3 { font-size: 1rem !important; }



  .l-main, #main, .main, #content {

    padding-left: 8px !important;

    padding-right: 8px !important;

  }



  /* CTA - 小さい画面でもタップしやすく */

  .rf-cta, .rf-cta-block {

    padding: 12px !important;

    font-size: 0.9rem !important;

    border-radius: 6px !important;

  }



  /* ナビゲーション - より小さく */

  .navi-in > ul.menu-header > li > a {

    padding: 8px 10px !important;

    font-size: 0.78rem !important;

  }



  /* hr_review_box をコンパクトに */

  .hr-review-box {

    padding: 12px !important;

  }

  .hr-review-box__rating-value {

    font-size: 1.8rem !important;

  }

}



/* ==========================================================================

   Section 15: フッター法的リンクブロック

   ========================================================================== */

.hr-footer-legal {

  background-color: var(--hr-surface-1);

  border-top: 1px solid var(--hr-border);

  padding: 20px 16px 28px;

  margin-top: 24px;

  text-align: center;

}

.hr-footer-legal__list {

  list-style: none;

  margin: 0 0 12px;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px 20px;

}

.hr-footer-legal__list li {

  font-size: 0.85rem;

}

.hr-footer-legal__list a {

  color: var(--hr-fg-2);

  text-decoration: none;

  transition: color 0.2s;

}

.hr-footer-legal__list a:hover {

  color: var(--hr-gold);

  text-decoration: underline;

}

.hr-footer-legal__notice {

  color: var(--hr-fg-3);

  font-size: 0.75rem;

  margin: 12px 0 0;

  line-height: 1.6;

}

@media (max-width: 640px) {

  .hr-footer-legal__list {

    flex-direction: column;

    gap: 6px;

    align-items: center;

  }

  .hr-footer-legal__list li {

    font-size: 0.82rem;

  }

}



/* iOS Safari safe-area 対応 */

@supports (padding: max(0px)) {

  body {

    padding-left: env(safe-area-inset-left);

    padding-right: env(safe-area-inset-right);

  }

  #footer, .footer {

    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;

  }

}



/* ============================================================

   Section 15. DUGA セカンダリCTA（Phase 3 追加）

   ============================================================ */

.hr-platform-cta {

  margin: 32px 0 24px;

  padding: 20px 20px 16px;

  background: #1a1a2e;

  border: 1px solid #2c3155;

  border-radius: 8px;

  text-align: center;

}

.hr-platform-cta__label {

  margin: 0 0 12px;

  font-size: 0.85rem;

  color: #aab2c8;

  font-weight: 600;

}

.hr-platform-btn {

  display: inline-block;

  padding: 12px 28px;

  border-radius: 6px;

  font-size: 0.95rem;

  font-weight: 700;

  text-decoration: none;

  transition: opacity 0.2s, transform 0.15s;

}

.hr-platform-btn:hover {

  opacity: 0.85;

  transform: translateY(-1px);

}

.hr-platform-btn--duga {

  background: #1a6bb5;

  color: #fff;

  border: 1px solid #1a5a9a;

}

.hr-platform-cta__note {

  margin: 10px 0 0;

  font-size: 0.75rem;

  color: #7f879b;

}

@media (max-width: 767px) {

  .hr-platform-btn {

    display: block;

    padding: 13px 16px;

  }

}



/* MGS ボタン追加 + ボタン2列レイアウト */

.hr-platform-cta__btns {

  display: flex;

  gap: 10px;

  justify-content: center;

  flex-wrap: wrap;

  margin-bottom: 4px;

}

.hr-platform-btn--mgs {

  background: #2a6e3f;

  color: #fff;

  border: 1px solid #1f5430;

}



/* ============================================================

   Section M1 — Midnight Otaku Review Desk（TOPページ Phase 4）

   個人の「執着・生活感・本音」＋オタクニッチ（漫画/同人/ASMR/VR）をUIに寄せる。

   既存 .rf-* / .hr-review-box / .hr-ranking-* / .hr-platform-* を壊さない。

   ============================================================ */



/* --- フロントページ固有：Cocoon のページタイトル H1「ホーム」を非表示 ------ */

body.home .entry-title,

body.front-top-page .entry-title {

  display: none !important;

}

/* アイキャッチ（固定ページの場合 Cocoon が挿入する） も非表示 */

body.home .eye-catch-wrap { display: none !important; }



/* --- Otaku palette（body.home スコープ、他ページに波及させない） ----- */

body.home {

  --hr-bg:         #0a0614;   /* from #0a0a1f — 紫寄りのダーク */

  --hr-surface-1:  #120a22;   /* from #13162b */

  --hr-surface-2:  #1a1030;   /* from #1b2040 */

  --hr-border:     #2a1f50;   /* from #2c3155 */

}



/* --- ヒーロー --------------------------------------------------- */

.hr-hero {

  position: relative;

  isolation: isolate;

  background: #0a0614;   /* body.home 外でも単体で動くようリテラル指定 */

  padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 48px) clamp(32px, 6vw, 64px);

  overflow: hidden;

  border-bottom: 1px solid var(--hr-border-soft, #1f2342);

}



/* --- ヒーロー背景コラージュ（棚の端・Pattern A） ----------------

   アフィリ画像を左右の端に partial 配置、ぼかし＋低彩度＋低輝度＋マスクで

   フェードアウト。オタクニッチが即座に伝わる視覚情報。 */

.hr-hero__bg {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  overflow: hidden;

}

.hr-hero__bg-img {

  position: absolute;

  background-size: cover;

  background-position: center top;

  background-repeat: no-repeat;

  opacity: 0.72;          /* はっきり見える */

  filter: brightness(0.72) saturate(0.90);  /* ブラーなし */

  border-radius: 0;

  will-change: transform;

}

/* 左2枚: ヒーロー全高の半分ずつ、幅26% */

.hr-hero__bg-img--l1 {

  top: 0;

  left: 0;

  width: 26%;

  height: 52%;

  transform: none;

  -webkit-mask-image:

    linear-gradient(to right, black 0%, black 55%, transparent 100%),

    linear-gradient(to bottom, black 0%, black 85%, transparent 100%);

  -webkit-mask-composite: source-in;

          mask-image: linear-gradient(to right, black 0%, black 55%, transparent 100%);

}

.hr-hero__bg-img--l2 {

  bottom: 0;

  left: 0;

  width: 26%;

  height: 52%;

  transform: none;

  -webkit-mask-image:

    linear-gradient(to right, black 0%, black 55%, transparent 100%),

    linear-gradient(to top, black 0%, black 85%, transparent 100%);

  -webkit-mask-composite: source-in;

          mask-image: linear-gradient(to right, black 0%, black 55%, transparent 100%);

}

/* 右2枚: 同様に右寄せ */

.hr-hero__bg-img--r1 {

  top: 0;

  right: 0;

  width: 26%;

  height: 52%;

  transform: none;

  -webkit-mask-image:

    linear-gradient(to left, black 0%, black 55%, transparent 100%),

    linear-gradient(to bottom, black 0%, black 85%, transparent 100%);

  -webkit-mask-composite: source-in;

          mask-image: linear-gradient(to left, black 0%, black 55%, transparent 100%);

}

.hr-hero__bg-img--r2 {

  bottom: 0;

  right: 0;

  width: 26%;

  height: 52%;

  transform: none;

  -webkit-mask-image:

    linear-gradient(to left, black 0%, black 55%, transparent 100%),

    linear-gradient(to top, black 0%, black 85%, transparent 100%);

  -webkit-mask-composite: source-in;

          mask-image: linear-gradient(to left, black 0%, black 55%, transparent 100%);

}

/* ベール: テキスト中央だけ保護 — 両端は画像が透けて見える */

.hr-hero__bg-veil {

  position: absolute; inset: 0;

  background: radial-gradient(

    ellipse 50% 42% at 50% 52%,

    rgba(10,6,20,0.80) 0%,

    rgba(10,6,20,0.55) 50%,

    rgba(10,6,20,0.10) 100%

  );

  z-index: 1;

}

/* モバイルでは画像を非表示（情報過多・サイズ確保のため） */

@media (max-width: 768px) {

  .hr-hero__bg-img { display: none; }

  .hr-hero__bg-veil { display: none; }

}

/* 深夜モニター反射 ─ 上部に冷たい青、右下にゴールド */

.hr-hero::before {

  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;

  background:

    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(120,160,255,0.06), transparent 60%),

    radial-gradient(ellipse 50% 30% at 85% 100%, rgba(200,169,106,0.05), transparent 60%);

}

/* ノイズ ─ SVG fractalNoise を base64 で埋め込み（外部画像不要） */

.hr-hero::after {

  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.6 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  opacity: 0.55; mix-blend-mode: overlay;

}

.hr-hero__rule {

  position: relative; z-index: 3;

  height: 1px; width: 80px;

  background: linear-gradient(90deg, var(--hr-gold, #c8a96a), transparent);

  margin: 0 auto 28px;

}

.hr-hero__inner {

  position: relative; z-index: 3;

  max-width: 980px; margin: 0 auto; text-align: center;

}

.hr-hero__title {

  font-family: "Noto Serif JP","Shippori Mincho","游明朝",serif;

  font-weight: 700;

  font-size: clamp(32px, 6vw, 72px);

  line-height: 1.25;

  letter-spacing: 0.02em;

  color: #f0eee4;

  margin: 0 0 20px;

  text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 0 48px rgba(120,140,200,0.06);

}

.hr-hero__sub {

  font-size: clamp(15px, 1.6vw, 20px);

  line-height: 1.75;

  color: var(--hr-fg-2, #aab2c8);

  margin: 0 0 24px;

  font-weight: 400;

}

.hr-hero__lead {

  font-size: clamp(12px, 1.2vw, 14px);

  line-height: 2.0;

  color: var(--hr-fg-3, #7f879b);

  margin: 0 0 36px;

}

.hr-hero__cta {

  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;

  margin-bottom: 18px;

}

.hr-hero__notice {

  font-size: 11px; color: var(--hr-fg-3, #7f879b);

  margin: 0; letter-spacing: 0.02em;

}

/* 右下の装飾グリフ（K）─ opacity ごく薄く */

.hr-hero__glyph {

  position: absolute;

  right: clamp(-40px, -3vw, -20px);

  bottom: clamp(-80px, -8vw, -40px);

  font-family: "Noto Serif JP", serif;

  font-size: clamp(240px, 30vw, 420px);

  font-weight: 900;

  color: var(--hr-gold, #c8a96a);

  opacity: 0.04;

  pointer-events: none; z-index: 2;

  line-height: 1;

  user-select: none;

}



/* --- ボタン（ヒーロー用・本文CTAと名前空間分離） -------------- */

.hr-btn {

  display: inline-flex; align-items: center; gap: 8px;

  height: 52px; padding: 0 24px;

  border-radius: 8px;

  font-size: 14px; font-weight: 700;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

  border: 1px solid transparent;

}

.hr-btn:hover { transform: translateY(-2px); text-decoration: none; }

.hr-btn--primary {

  background: linear-gradient(135deg, var(--hr-red, #e63946) 0%, var(--hr-pink, #ff1e7a) 100%);

  color: #fff;

  box-shadow: 0 6px 18px rgba(230,57,70,0.25);

}

.hr-btn--primary:hover {

  background: linear-gradient(135deg, var(--hr-pink, #ff1e7a) 0%, var(--hr-pink-hover, #ff4d98) 100%);

  color: #fff;

  box-shadow: 0 10px 24px rgba(255,30,122,0.35);

}

.hr-btn--ghost {

  background: transparent;

  color: var(--hr-gold, #c8a96a);

  border-color: var(--hr-gold, #c8a96a);

}

.hr-btn--ghost:hover {

  background: rgba(200,169,106,0.08);

  color: var(--hr-gold, #c8a96a);

}

.hr-arrow { font-size: 15px; transform: translateY(-1px); }



/* --- セクション見出し ------------------------------------------- */

.hr-section-head {

  max-width: 1120px; margin: 0 auto 24px;

  padding: 56px 16px 0;

  text-align: center;

}

.hr-section-head--inline { padding: 36px 16px 12px; margin-bottom: 12px; }

.hr-section-title {

  font-family: "Noto Serif JP","Shippori Mincho",serif;

  font-size: clamp(22px, 3vw, 32px);

  font-weight: 700;

  color: var(--hr-fg-1, #f4f6fb);

  margin: 0 0 8px;

  letter-spacing: 0.02em;

  position: relative;

  display: inline-block;

}

.hr-section-title::after {

  content: "";

  display: block;

  width: 40px; height: 1px;

  background: var(--hr-gold, #c8a96a);

  margin: 12px auto 0;

}

.hr-section-sub {

  font-size: 13px;

  color: var(--hr-fg-3, #7f879b);

  margin: 0;

  line-height: 1.8;

}



/* --- ジャンル別ランキング（横型リスト形式）─ 視認性最優先 ---------- */

.hr-genre-rank {

  background: linear-gradient(180deg, rgba(200,169,106,0.06) 0%, rgba(200,169,106,0.02) 100%);

  border-top: 2px solid rgba(200,169,106,0.45);

  border-bottom: 1px solid rgba(200,169,106,0.18);

  padding-bottom: 48px;

}

.hr-genre-rank > .hr-section-head {

  padding-top: 40px;

}

.hr-genre-rank > .hr-section-head .hr-section-title {

  font-size: clamp(24px, 3.2vw, 38px);

}

.hr-genre-rank > .hr-section-head::before {

  content: "RANKING";

  display: block;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.22em;

  color: var(--hr-gold, #c8a96a);

  margin-bottom: 10px;

}

/* リスト本体 */

.hr-genre-rank__list {

  max-width: 900px;

  margin: 0 auto;

  padding: 0 16px;

  display: flex;

  flex-direction: column;

  gap: 0;

  border: 1px solid rgba(200,169,106,0.30);

  border-radius: 12px;

  overflow: hidden;

}

/* 各行 */

.hr-genre-rank__row {

  display: flex;

  flex-direction: row;

  align-items: stretch;

  min-height: 110px;

  text-decoration: none;

  background: var(--hr-surface-1, #120a22);

  border-bottom: 1px solid rgba(200,169,106,0.14);

  transition: background 0.12s ease;

}

.hr-genre-rank__row:last-child { border-bottom: none; }

.hr-genre-rank__row:hover {

  background: var(--hr-surface-2, #1a1030);

  text-decoration: none;

}

/* 左: ランク番号パネル */

.hr-genre-rank__num {

  flex: 0 0 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 30px;

  font-weight: 900;

  line-height: 1;

  color: var(--hr-fg-3, #7f879b);

  border-right: 1px solid rgba(200,169,106,0.14);

}

.hr-genre-rank__row[data-rank="1"] .hr-genre-rank__num {

  font-size: 38px;

  color: #f5c451;

  text-shadow: 0 0 16px rgba(245,196,81,0.4);

}

.hr-genre-rank__row[data-rank="2"] .hr-genre-rank__num { color: #c8a96a; }

.hr-genre-rank__row[data-rank="3"] .hr-genre-rank__num { color: #9a7c5f; }

/* サムネ */

.hr-genre-rank__thumb {

  flex: 0 0 150px;

  background-size: cover;

  background-position: center top;

  background-color: var(--hr-surface-2, #1a1030);

}

.hr-genre-rank__thumb--empty {

  background-image: repeating-linear-gradient(

    45deg,

    var(--hr-surface-2) 0px, var(--hr-surface-2) 8px,

    var(--hr-border) 8px, var(--hr-border) 9px

  );

}

/* テキストエリア */

.hr-genre-rank__body {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 6px;

  padding: 14px 18px;

}

.hr-genre-rank__label {

  font-size: 11px;

  font-weight: 700;

  color: var(--hr-gold, #c8a96a);

  letter-spacing: 0.06em;

}

.hr-genre-rank__title {

  font-family: "Noto Serif JP", serif;

  font-size: 16px;

  font-weight: 700;

  color: var(--hr-fg-1, #f4f6fb);

  line-height: 1.55;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.hr-genre-rank__cta {

  font-size: 13px;

  color: var(--hr-fg-3, #7f879b);

  transition: color 0.12s ease;

}

.hr-genre-rank__row:hover .hr-genre-rank__cta { color: var(--hr-gold, #c8a96a); }

/* 右端矢印 */

.hr-genre-rank__arrow {

  flex: 0 0 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  color: var(--hr-fg-3, #7f879b);

  transition: color 0.12s ease;

}

.hr-genre-rank__row:hover .hr-genre-rank__arrow { color: var(--hr-gold, #c8a96a); }

/* モバイル */

@media (max-width: 600px) {

  .hr-genre-rank__list { border-radius: 8px; }

  .hr-genre-rank__num { flex: 0 0 42px; font-size: 22px; }

  .hr-genre-rank__thumb { flex: 0 0 90px; }

  .hr-genre-rank__title { font-size: 14px; }

  .hr-genre-rank__arrow { display: none; }

}



/* --- カテゴリバー（5枠） ---------------------------------------- */

.hr-cat-bar-wrap { padding: 0 16px 24px; }

.hr-cat-bar {

  max-width: 1120px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 12px;

}

.hr-cat-card {

  display: flex; flex-direction: column; gap: 6px;

  padding: 20px 14px;

  background: var(--hr-surface-1, #13162b);

  border: 1px solid var(--hr-border, #2c3155);

  border-radius: 10px;

  text-decoration: none;

  text-align: center;

  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;

}

.hr-cat-card:hover {

  transform: translateY(-2px);

  border-color: var(--hr-gold, #c8a96a);

  background: var(--hr-surface-2, #1b2040);

  text-decoration: none;

}

.hr-cat-card__name {

  font-family: "Noto Serif JP", serif;

  font-size: 15px;

  font-weight: 700;

  color: var(--hr-fg-1, #f4f6fb);

  line-height: 1.3;

}

.hr-cat-card__sub {

  font-size: 11px;

  color: var(--hr-fg-3, #7f879b);

  line-height: 1.5;

}

@media (max-width: 768px) {

  .hr-cat-bar { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 380px) {

  .hr-cat-bar { grid-template-columns: 1fr; }

}



/* --- クロのひとこと（引用ボックス） ---------------------------- */

.hr-quote {

  max-width: 640px;           /* 短文が左に孤立しない幅に絞る */

  margin: 32px auto;

  padding: 18px 22px 14px;    /* 余白を詰める */

  border-left: 3px solid var(--hr-gold, #c8a96a);

  background: rgba(200,169,106,0.05);

  font-family: "Noto Serif JP", serif;

  font-size: 17px;             /* 一回り大きく */

  line-height: 1.9;

  color: var(--hr-fg-2, #aab2c8);

  border-radius: 0 6px 6px 0;

  position: relative;

}

/* ▸ 無効化 — ▸と文字の重なり解消済み */

.hr-quote::before { content: ""; }

/* Cocoon デフォルト blockquote 装飾 " を非表示 */

.hr-quote::after,

blockquote.hr-quote::after,

blockquote.hr-quote--strong::after {

  content: none !important;

  display: none !important;

}

.hr-quote cite {

  display: block;

  margin-top: 6px;             /* 本文との距離を詰める */

  font-style: normal;

  font-size: 12px;

  color: var(--hr-fg-3, #7f879b);

  text-align: right;

  letter-spacing: 0.04em;

}

.hr-quote--strong {

  background: rgba(200,169,106,0.07);

  font-size: 17px;

}



/* --- クロの、仕分け方 ------------------------------------------- */

.hr-criteria {

  max-width: 880px;

  margin: 0 auto;

  padding: 0 16px 32px;

}

.hr-criteria__lead {

  font-size: 15px;

  line-height: 1.9;

  color: var(--hr-fg-2, #aab2c8);

  text-align: center;

  margin: 0 0 28px;

}

.hr-criteria__list {

  margin: 0;

  padding: 0;

}

.hr-criteria__list dt {

  font-family: "Noto Serif JP", serif;

  font-weight: 700;

  font-size: 15px;

  color: var(--hr-gold, #c8a96a);

  margin: 20px 0 6px;

  padding-left: 12px;

  border-left: 2px solid var(--hr-gold, #c8a96a);

  line-height: 1.4;

}

.hr-criteria__list dt::before { content: "■ "; }

.hr-criteria__list dd {

  margin: 0 0 0 14px;

  font-size: 14px;

  line-height: 1.9;

  color: var(--hr-fg-2, #aab2c8);

}



/* --- Aboutブロック ---------------------------------------------- */

.hr-about {

  max-width: 820px;

  margin: 0 auto;

  padding: 0 16px 48px;

  text-align: center;

}

.hr-about__body {

  font-size: 14px;

  line-height: 2.0;

  color: var(--hr-fg-2, #aab2c8);

  margin: 0 0 16px;

}

.hr-about__cta {

  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;

  margin-top: 24px;

}



/* --- 夜の気分で、選ぶ（タグカード6枠） ------------------------ */

.hr-mood { max-width: 1120px; margin: 0 auto; padding: 0 16px 32px; }

.hr-mood__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}

.hr-mood__tag {

  display: flex; align-items: center; justify-content: center;

  padding: 18px 12px;

  background: var(--hr-surface-1, #13162b);

  border: 1px solid var(--hr-border, #2c3155);

  border-radius: 8px;

  font-family: "Noto Serif JP", serif;

  font-size: 14px;

  color: var(--hr-fg-1, #f4f6fb);

  text-decoration: none;

  text-align: center;

  line-height: 1.5;

  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;

}

.hr-mood__tag:hover {

  transform: translateY(-2px);

  border-color: var(--hr-gold, #c8a96a);

  background: var(--hr-surface-2, #1b2040);

  color: var(--hr-fg-1, #f4f6fb);

  text-decoration: none;

}

@media (max-width: 768px) {

  .hr-mood__grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 380px) {

  .hr-mood__grid { grid-template-columns: 1fr; }

}



/* --- モバイル調整 ---------------------------------------------- */

@media (max-width: 768px) {

  .hr-hero { padding: 56px 16px 40px; }

  .hr-hero__cta { flex-direction: column; }

  .hr-hero__cta .hr-btn { width: 100%; justify-content: center; }

  .hr-hero__glyph { font-size: 200px; right: -20px; bottom: -40px; }

  .hr-about__cta { flex-direction: column; }

  .hr-about__cta .hr-btn { width: 100%; justify-content: center; }

  .hr-section-head { padding: 36px 16px 0; }

}



/* ============================================================

   Section M2: 月間ピック / ジャンル別TOP / 関連記事

   ============================================================ */



/* ── 今月の当たり ─────────────────────────────────── */

.hr-monthly-pick {

  max-width: 900px;

  margin: 0 auto;

  padding: 0 20px 56px;

}

.hr-monthly-pick__card {

  display: flex;

  flex-direction: row;

  align-items: stretch;

  min-height: 280px;

  border: 1px solid rgba(200,169,106,0.35);

  border-radius: 12px;

  overflow: hidden;

  background: var(--hr-surface-1, #120a22);

  text-decoration: none;

  transition: box-shadow 0.2s;

}

.hr-monthly-pick__card:hover {

  box-shadow: 0 4px 32px rgba(200,169,106,0.18);

  text-decoration: none;

}

.hr-monthly-pick__img {

  flex: 0 0 42%;

  background-size: cover;

  background-position: top center;

  min-height: 240px;

  display: block;

  position: relative;

}

.hr-monthly-pick__img--empty {

  background: var(--hr-surface-2, #1a1030);

}

.hr-monthly-pick__body {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 10px;

  padding: 28px 28px 24px;

}

.hr-monthly-pick__badge {

  display: inline-block;

  background: rgba(200,169,106,0.18);

  color: var(--hr-gold, #c8a96a);

  border: 1px solid rgba(200,169,106,0.45);

  border-radius: 4px;

  font-size: 11px;

  letter-spacing: 0.08em;

  padding: 2px 10px;

  align-self: flex-start;

}

.hr-monthly-pick__title {

  font-family: "Noto Serif JP", "Shippori Mincho", serif;

  font-size: 20px;

  font-weight: 700;

  color: var(--hr-fg-1, #f4f6fb);

  line-height: 1.55;

}

.hr-monthly-pick__excerpt {

  font-size: 13px;

  color: var(--hr-fg-2, #aab2c8);

  line-height: 1.75;

}

.hr-monthly-pick__quote {

  margin: 0 !important;

  font-size: 14px !important;

  padding: 12px 16px 10px !important;

}

.hr-monthly-pick__cta {

  align-self: flex-start;

  margin-top: 4px;

}



/* ── ジャンル別TOP ────────────────────────────────── */

.hr-top-genre {

  max-width: 1000px;

  margin: 0 auto;

  padding: 0 20px 56px;

}

.hr-top-genre__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

}

.hr-top-genre__col {

  background: var(--hr-surface-1, #120a22);

  border: 1px solid rgba(200,169,106,0.22);

  border-radius: 10px;

  overflow: hidden;

}

.hr-top-genre__genre-label {

  background: rgba(200,169,106,0.10);

  color: var(--hr-gold, #c8a96a);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.06em;

  padding: 10px 14px;

  border-bottom: 1px solid rgba(200,169,106,0.18);

}

.hr-top-genre__item {

  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 10px;

  padding: 12px 14px;

  text-decoration: none;

  border-bottom: 1px solid rgba(200,169,106,0.10);

  transition: background 0.15s;

}

.hr-top-genre__item:last-child { border-bottom: none; }

.hr-top-genre__item:hover { background: rgba(200,169,106,0.06); text-decoration: none; }

.hr-top-genre__num {

  flex: 0 0 24px;

  font-size: 18px;

  font-weight: 900;

  color: var(--hr-fg-3, #7f879b);

  text-align: center;

}

.hr-top-genre__item[data-rank="1"] .hr-top-genre__num {

  color: var(--hr-gold, #f5c451);

  text-shadow: 0 0 12px rgba(245,196,81,0.4);

}

.hr-top-genre__title-text {

  flex: 1;

  font-size: 13px;

  color: var(--hr-fg-1, #f4f6fb);

  line-height: 1.5;

}

.hr-top-genre__arrow {

  flex: 0 0 16px;

  color: var(--hr-fg-3, #7f879b);

  font-size: 16px;

}



/* ── 関連記事 ─────────────────────────────────────── */

.hr-related {

  max-width: 900px;

  margin: 48px auto 0;

  padding: 0 0 40px;

}

.hr-related .hr-section-head { padding: 0 0 20px; }

.hr-related__heading {

  font-size: 18px !important;

}

.hr-related__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

}

.hr-related__card {

  display: flex;

  flex-direction: column;

  text-decoration: none;

  border: 1px solid rgba(200,169,106,0.20);

  border-radius: 10px;

  overflow: hidden;

  background: var(--hr-surface-1, #120a22);

  transition: box-shadow 0.18s;

}

.hr-related__card:hover {

  box-shadow: 0 2px 20px rgba(200,169,106,0.14);

  text-decoration: none;

}

.hr-related__img {

  display: block;

  width: 100%;

  padding-top: 60%;

  background-size: cover;

  background-position: center;

}

.hr-related__img--empty {

  background: var(--hr-surface-2, #1a1030);

}

.hr-related__body {

  display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 14px 16px 16px;

}

.hr-related__title-text {

  font-size: 14px;

  font-weight: 600;

  color: var(--hr-fg-1, #f4f6fb);

  line-height: 1.55;

}

.hr-related__cta {

  font-size: 12px;

  color: var(--hr-gold, #c8a96a);

  letter-spacing: 0.04em;

}



/* ── M2 モバイル調整 ──────────────────────────────── */

@media (max-width: 860px) {

  .hr-top-genre__grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 640px) {

  .hr-monthly-pick__card { flex-direction: column; }

  .hr-monthly-pick__img { flex: 0 0 auto; min-height: 200px; width: 100%; padding-top: 58%; }

  .hr-monthly-pick__body { padding: 20px 18px 18px; }

  .hr-monthly-pick__title { font-size: 16px; }

  .hr-top-genre__grid { grid-template-columns: 1fr; }

  .hr-related__grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 400px) {

  .hr-related__grid { grid-template-columns: 1fr; }

}



/* ==========================================================================

 * Section M3: Phase 5 — 横串回遊導線（P5-C）

 * [hr_cross_category_bridge] / [hr_kuro_other_desks]

 * ========================================================================== */



.hr-bridge {

  margin: 56px 0 48px;

  padding: 0 16px;

}

.hr-bridge__heading {

  font-family: "Noto Serif JP","Shippori Mincho",serif;

  color: #f4f6fb;

}

.hr-bridge__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-top: 20px;

}

.hr-bridge__card {

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 22px 18px 20px;

  background: #13162b;

  border: 1px solid #2c3155;

  border-radius: 12px;

  color: #f4f6fb;

  text-decoration: none;

  transition: transform .18s ease, border-color .18s ease, background .18s ease;

}

.hr-bridge__card:hover {

  transform: translateY(-2px);

  border-color: #c8a96a;

  background: #1b2040;

}

.hr-bridge__icon {

  font-size: 28px;

  line-height: 1;

  margin-bottom: 6px;

}

.hr-bridge__lead {

  font-size: 12px;

  color: #aab2c8;

  letter-spacing: .04em;

}

.hr-bridge__title {

  font-family: "Noto Serif JP",serif;

  font-size: 17px;

  font-weight: 600;

  color: #f4f6fb;

  margin-top: 2px;

}

.hr-bridge__comment {

  font-size: 13px;

  color: #aab2c8;

  line-height: 1.7;

  margin-top: 6px;

}

.hr-bridge__cta {

  margin-top: auto;

  padding-top: 12px;

  font-size: 13px;

  color: #c8a96a;

  font-weight: 600;

}

.hr-bridge__cta .hr-arrow { margin-left: 2px; }



@media (max-width: 720px) {

  .hr-bridge__grid { grid-template-columns: 1fr; gap: 12px; }

  .hr-bridge__card { padding: 18px 16px; }

}



/* hr_kuro_other_desks ── サイドバー/中段用 */

.hr-other-desks {

  background: rgba(19, 22, 43, 0.6);

  border: 1px solid #2c3155;

  border-radius: 10px;

  padding: 18px 20px;

  margin: 32px 0;

}

.hr-other-desks__title {

  font-family: "Noto Serif JP",serif;

  font-size: 13px;

  color: #c8a96a;

  letter-spacing: .08em;

  margin-bottom: 12px;

  text-align: center;

}

.hr-other-desks__list {

  list-style: none;

  margin: 0;

  padding: 0;

}

.hr-other-desks__item { margin: 0; padding: 0; }

.hr-other-desks__item + .hr-other-desks__item {

  border-top: 1px solid rgba(44, 49, 85, 0.5);

}

.hr-other-desks__link {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 4px;

  color: #f4f6fb;

  text-decoration: none;

  font-size: 14px;

  transition: color .15s ease;

}

.hr-other-desks__link:hover { color: #c8a96a; }

.hr-other-desks__arrow { color: #c8a96a; flex: 0 0 auto; }

.hr-other-desks__label { line-height: 1.6; }



/* ===== Section M4: hr-vr-hub (VRカテゴリTOP ハブ Week3-A) ===== */

.hr-vr-hub { margin: 32px 0 40px; }



/* ガイドCTAブロック */

.hr-vr-hub__guide {

  background: rgba(200,169,106,.07);

  border: 1px solid rgba(200,169,106,.28);

  border-radius: 8px;

  padding: 20px 24px;

  margin-bottom: 24px;

  text-align: center;

}

.hr-vr-hub__guide-lead {

  color: #aab2c8;

  font-size: 13px;

  margin: 0 0 12px;

}

.hr-vr-hub__guide-btn {

  display: inline-block;

  background: linear-gradient(135deg,#c8a96a,#d4b878);

  color: #0a0a1f !important;

  font-weight: 700;

  font-size: 14px;

  line-height: 1.5;

  padding: 12px 28px;

  border-radius: 6px;

  text-decoration: none !important;

}

.hr-vr-hub__guide-btn:hover {

  background: linear-gradient(135deg,#d4b878,#e0c88a);

}



/* クロのひとこと */

.hr-vr-hub__voice {

  font-family: "Noto Serif JP",serif;

  font-size: 14px;

  color: #aab2c8;

  border-left: 2px solid #c8a96a;

  padding: 10px 16px;

  margin-bottom: 24px;

  line-height: 1.8;

}

.hr-vr-hub__voice-mark { color: #c8a96a; margin-right: 5px; }

.hr-vr-hub__voice-cite {

  display: block;

  font-size: 11px;

  color: #7f879b;

  text-align: right;

  margin-top: 4px;

  font-style: normal;

}



/* 目的別3列グリッド */

.hr-vr-hub__grid {

  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 12px;

  margin-bottom: 24px;

}

@media (max-width: 600px) {

  .hr-vr-hub__grid { grid-template-columns: 1fr; }

}

.hr-vr-hub__card {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  background: #13162b;

  border: 1px solid #2c3155;

  border-radius: 8px;

  padding: 20px 12px;

  text-align: center;

  text-decoration: none !important;

  transition: border-color .2s, transform .2s;

}

.hr-vr-hub__card:hover {

  border-color: #c8a96a;

  transform: translateY(-2px);

}

.hr-vr-hub__card-icon { font-size: 28px; line-height: 1; }

.hr-vr-hub__card-title {

  font-size: 13px;

  font-weight: 700;

  color: #f0eee4;

  line-height: 1.4;

}

.hr-vr-hub__card-sub { font-size: 12px; color: #aab2c8; }

.hr-vr-hub__card-cta { font-size: 12px; color: #c8a96a; margin-top: 4px; }



/* ── pillar-vr 戻りリンク（各VR記事末尾サブ導線 Week3-C） ── */

.hr-pillar-return {

  margin: 40px 0 24px;

  padding: 16px 20px;

  background: rgba(200,169,106,.06);

  border: 1px solid rgba(200,169,106,.22);

  border-radius: 8px;

}

.hr-pillar-return__lead {

  font-size: 13px;

  color: #aab2c8;

  margin: 0 0 10px;

}

.hr-pillar-return__btn {

  display: inline-block;

  font-size: 13px;

  font-weight: 700;

  color: #c8a96a !important;

  text-decoration: none !important;

  border-bottom: 1px solid rgba(200,169,106,.4);

  line-height: 1.5;

  transition: border-color .15s;

}

.hr-pillar-return__btn:hover { border-color: #c8a96a; }



/* ── VR記事末尾クロスカテゴリ サブCTA (rf-cta-injector P5-B/C) ── */

.rf-vr-cross-sub {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin: 16px 0 24px;

}

.rf-vr-cross-sub__btn {

  display: inline-block;

  font-size: 13px;

  color: #aab2c8 !important;

  text-decoration: none !important;

  border: 1px solid #2c3155;

  border-radius: 4px;

  padding: 8px 14px;

  background: #13162b;

  line-height: 1.5;

  transition: border-color .15s, color .15s;

}

.rf-vr-cross-sub__btn:hover {

  border-color: #c8a96a;

  color: #c8a96a !important;

}



/* ── VRランキング記事内 FANZA ミニボタン (CVR強化 Week3-D) ── */

.hr-ranking-fanza-btn { margin: 4px 0 16px; }

.hr-ranking-fanza-link {

  display: inline-block;

  font-size: 13px;

  font-weight: 700;

  color: #e63946 !important;

  background: rgba(230,57,70,.08);

  border: 1px solid rgba(230,57,70,.3);

  border-radius: 4px;

  padding: 7px 16px;

  text-decoration: none !important;

  transition: background .15s, border-color .15s;

  line-height: 1.4;

}

.hr-ranking-fanza-link:hover {

  background: rgba(230,57,70,.16);

  border-color: rgba(230,57,70,.6);

}



/* VRランキング記事末尾まとめCTA */

.hr-vr-summary-cta {

  margin: 32px 0 24px;

  padding: 20px 24px;

  background: rgba(230,57,70,.05);

  border: 1px solid rgba(230,57,70,.2);

  border-radius: 8px;

  text-align: center;

}

.hr-vr-summary-cta__lead {

  font-size: 13px;

  color: #aab2c8;

  margin: 0 0 12px;

}

.hr-vr-summary-cta__btn {

  display: inline-block;

  background: linear-gradient(135deg,#e63946,#ff1e7a);

  color: #fff !important;

  font-weight: 700;

  font-size: 14px;

  padding: 12px 28px;

  border-radius: 6px;

  text-decoration: none !important;

  line-height: 1.4;

  transition: opacity .15s;

}

.hr-vr-summary-cta__btn:hover { opacity: .9; }

.hr-vr-summary-cta__note {

  font-size: 11px;

  color: #7f879b;

  margin: 10px 0 0;

}





/* ============================================================

   Section ACC-2: VPN サブCTA + ASP比較ブロック

   ============================================================ */



/* VPN サブCTA（rf-cta-injector 出力 / VR記事末尾） */

.rf-vpn-sub {

  margin: 24px 0 8px;

  padding: 16px 18px;

  border: 1px solid #2c3155;

  border-radius: 8px;

  background: rgba(18,22,48,.5);

}

.rf-vpn-sub__lead {

  font-size: 11px;

  color: #7f879b;

  margin: 0 0 10px;

  letter-spacing: .03em;

}

.rf-vpn-sub__btn {

  display: inline-block;

  font-size: 13px;

  font-weight: 600;

  color: #aab2c8 !important;

  text-decoration: none !important;

  border: 1px solid #2c3155;

  border-radius: 5px;

  padding: 7px 14px;

  margin: 4px 6px 4px 0;

  transition: border-color .15s, color .15s;

  white-space: nowrap;

}

.rf-vpn-sub__btn:hover { border-color: #c8a96a; color: #c8a96a !important; }

.rf-vpn-sub__btn--nord    { border-color: #4687ff44; }

.rf-vpn-sub__btn--express { border-color: #da3c2844; }



/* ASP比較ブロック [hr_asp_compare] */

.hr-asp-compare {

  margin: 32px 0;

  padding: 18px 20px;

  border: 1px solid #2c3155;

  border-radius: 10px;

  background: rgba(18,22,48,.6);

}

.hr-asp-compare__lead {

  font-size: 12px;

  color: #c8a96a;

  margin: 0 0 12px;

  font-weight: 600;

  letter-spacing: .04em;

}

.hr-asp-compare__grid {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}

.hr-asp-compare__btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-width: 120px;

  padding: 10px 16px;

  border: 1px solid #2c3155;

  border-radius: 7px;

  text-decoration: none !important;

  background: rgba(27,32,64,.7);

  transition: border-color .15s, background .15s;

  flex: 1 1 120px;

  max-width: 200px;

}

.hr-asp-compare__btn:hover { border-color: #c8a96a; background: rgba(200,169,106,.07); }

.hr-asp-compare__name {

  font-size: 14px;

  font-weight: 700;

  color: #f0eee4;

  display: block;

}

.hr-asp-compare__sub {

  font-size: 10px;

  color: #7f879b;

  display: block;

  margin-top: 3px;

  text-align: center;

}

.hr-asp-compare__btn--fanza  { border-color: #e6394644; }

.hr-asp-compare__btn--duga   { border-color: #4687ff44; }

.hr-asp-compare__btn--mgs    { border-color: #c8a96a44; }

.hr-asp-compare__btn--nord   { border-color: #4687ff66; }

.hr-asp-compare__btn--express{ border-color: #da3c2866; }

.hr-asp-compare__note {

  font-size: 10px;

  color: #7f879b;

  margin: 10px 0 0;

}

@media (max-width: 480px) {

  .hr-asp-compare__grid { flex-direction: column; }

  .hr-asp-compare__btn  { max-width: 100%; }

}



/* ============================================================

   SEO-FIX: フロントページ H1 重複解消

   Cocoon が entry-title として自動生成する H1「ホーム」を非表示にする。

   ヒーローショートコード [hr_hero] が hr-hero__title として H1 を提供するため

   SEO 的に H1 が 2 つになることを防ぐ。

   ============================================================ */

.home .entry-title,

.front-top-page .entry-title {

  display: none !important;

}



/* ============================================================

   ACC-11 補助: LINE導線 サブCTA [hr_line_optin]

   本CTA（FANZA/DUGA/MGS）を邪魔しない控えめなトーン。

   ============================================================ */

.rf-line-optin {

  margin: 20px 0;

  padding: 14px 16px;

  background: rgba(6, 199, 85, .06);

  border: 1px solid rgba(6, 199, 85, .35);

  border-radius: 10px;

}

.rf-line-optin__inner {

  display: flex;

  align-items: center;

  gap: 14px;

}

.rf-line-optin__icon {

  font-size: 26px;

  line-height: 1;

  flex: 0 0 auto;

}

.rf-line-optin__body { flex: 1 1 auto; }

.rf-line-optin__btn {

  display: inline-block;

  padding: 9px 16px;

  background: #06c755;

  color: #fff !important;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none !important;

  border-radius: 6px;

  transition: background .15s;

}

.rf-line-optin__btn:hover { background: #05a847; }

.rf-line-optin__sub {

  font-size: 11px;

  color: #7f879b;

  margin: 6px 0 0;

  line-height: 1.5;

}

@media (max-width: 480px) {

  .rf-line-optin__inner { flex-direction: column; align-items: flex-start; gap: 8px; }

  .rf-line-optin__btn   { width: 100%; text-align: center; }

}

/* ============================================================
 * [hr_winner_cta] ── 勝ちページCTA (ACC-10)
 * ============================================================ */
.hr-winner-cta {
  margin: 2em 0;
  border: 2px solid rgba(74,158,255,0.3);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(74,158,255,0.05);
}
.hr-winner-cta--confirmed {
  border-color: rgba(74,255,100,0.5);
  background: rgba(74,255,100,0.04);
}
.hr-winner-cta__badge {
  display: block;
  padding: 0.3em 1em;
  background: rgba(74,255,100,0.15);
  font-size: 0.75rem;
  color: #7aff4a;
  font-weight: bold;
  letter-spacing: 0.04em;
}
.hr-winner-cta__link {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1.2em 1.4em;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.hr-winner-cta__link:hover {
  background: rgba(255,255,255,0.04);
  text-decoration: none;
}
.hr-winner-cta__label {
  font-size: 1rem;
  font-weight: bold;
  color: #e0e0ff;
  flex: 1;
}
.hr-winner-cta__sub {
  font-size: 0.82rem;
  color: #888;
}
.hr-winner-cta__arrow {
  color: #4a9eff;
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* hr-winner-banner: ピラー→ranking内部リンクバナー */
.hr-winner-banner {
  margin: 1.5em 0;
  padding: 1em 1.4em;
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 8px;
}
.hr-winner-banner__lead {
  font-size: 0.78rem;
  color: #999;
  margin: 0 0 0.4em;
}
.hr-winner-banner__link {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  color: #ffd700;
  text-decoration: none;
  transition: opacity 0.2s;
}
.hr-winner-banner__link:hover { opacity: 0.8; text-decoration: none; }


/* ============================================================
   hr-related-articles — ACC-11 クロスリンクブロック
   ============================================================ */
.hr-related-articles {
    margin: 2em 0;
    padding: 1.2em 1.5em;
    border: 2px solid #4a9eff;
    border-radius: 8px;
    background: #f0f7ff;
}
.hr-related-articles__title {
    font-size: .95rem;
    font-weight: 700;
    color: #1a6ede;
    margin: 0 0 .8em;
    padding: 0;
}
.hr-related-articles__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hr-related-articles__list li {
    padding: .4em 0;
    border-bottom: 1px solid #d0e8ff;
    font-size: .9rem;
    line-height: 1.5;
}
.hr-related-articles__list li:last-child { border-bottom: none; }
.hr-related-articles__list a {
    color: #0d60cc;
    font-weight: 600;
    text-decoration: none;
}
.hr-related-articles__list a:hover { text-decoration: underline; }
.hr-related-articles__reason {
    color: #555;
    font-size: .82rem;
    font-style: italic;
}

/* hr-line-cta — LINE登録ブロック */
.hr-line-cta {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border: 2px solid #06c755;
    border-radius: 8px;
    background: #f0fff5;
    text-align: center;
}
.hr-line-cta__label {
    font-size: .85rem;
    color: #00a040;
    font-weight: 600;
    margin: 0 0 .6em;
}
.hr-line-cta__btn {
    display: inline-block;
    background: #06c755;
    color: #fff !important;
    font-weight: 700;
    font-size: .95rem;
    padding: .55em 1.6em;
    border-radius: 6px;
    text-decoration: none !important;
    transition: background .2s;
}
.hr-line-cta__btn:hover { background: #04a044; }

/* === KURO UI START :: vx1-ranking-1st-card === */
/* ============================================================
 * kuro-ui-rank-card.css
 * honne-rev.com / cocoon-child-honnerev
 * ランキング1位カード — Cocoon親テーマ衝突回避のため !important 必須
 * ============================================================ */

.kuro-ui-rank-card,
.kuro-ui-rank-card * {
  box-sizing: border-box;
}

/* ---------- Card container ---------- */
.kuro-ui-rank-card {
  position: relative;
  display: block;
  max-width: 720px;
  margin: 32px auto !important;
  padding: 28px 32px 24px !important;
  background: #13162b !important;
  border: 1px solid #2c3155 !important;
  border-radius: 10px !important;
  color: #f4f6fb !important;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-feature-settings: "palt" 1;
  line-height: 1.6;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* ---------- Top row : badge + PR ---------- */
.kuro-ui-rank-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.kuro-ui-rank-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px !important;
  background: linear-gradient(180deg, #f5c451 0%, #c8a96a 100%) !important;
  color: #13162b !important;
  border: 1px solid #c8a96a !important;
  border-radius: 6px !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.kuro-ui-rank-card__badge-rank {
  font-weight: 800;
}

.kuro-ui-rank-card__badge-sep {
  color: rgba(19, 22, 43, 0.55) !important;
  font-weight: 400;
}

.kuro-ui-rank-card__pr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 10px !important;
  background: transparent !important;
  color: #c8a96a !important;
  border: 1px solid #c8a96a !important;
  border-radius: 4px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ---------- Tag chips row ---------- */
.kuro-ui-rank-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.kuro-ui-rank-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px !important;
  background: transparent !important;
  color: #aab2c8 !important;
  border: 1px solid #2c3155 !important;
  border-radius: 999px !important;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

/* ---------- Headline + sub ---------- */
.kuro-ui-rank-card__headline {
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: "Noto Serif JP", "Shippori Mincho", "Yu Mincho",
    "Hiragino Mincho ProN", serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #f4f6fb !important;
}

.kuro-ui-rank-card__sub {
  margin: 0 0 20px !important;
  padding: 0 !important;
  color: #aab2c8 !important;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- Keep / Cut two-column ---------- */
.kuro-ui-rank-card__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  margin: 0 0 22px;
}

.kuro-ui-rank-card__col {
  min-width: 0;
}

.kuro-ui-rank-card__col-title {
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.kuro-ui-rank-card__col-title--keep {
  color: #4ade80 !important; /* 残せる人 = green */
}

.kuro-ui-rank-card__col-title--cut {
  color: #f4f6fb !important; /* 切る人 = neutral white */
}

.kuro-ui-rank-card__list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.kuro-ui-rank-card__list li {
  position: relative;
  margin: 0 !important;
  padding: 4px 0 4px 28px !important;
  background: transparent !important;
  border: 0 !important;
  color: #f4f6fb !important;
  font-size: 14px;
  line-height: 1.6;
  list-style: none !important;
}

.kuro-ui-rank-card__list li::before {
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  text-align: center;
  font-weight: 700;
  line-height: 1.6;
}

.kuro-ui-rank-card__list--keep li::before {
  content: "✓";
  color: #4ade80 !important;
  font-size: 15px;
}

.kuro-ui-rank-card__list--cut li::before {
  content: "×";
  color: #aab2c8 !important;
  font-size: 16px;
}

.kuro-ui-rank-card__list--cut li {
  color: #aab2c8 !important;
}

/* ---------- Status chips ---------- */
.kuro-ui-rank-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.kuro-ui-rank-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px !important;
  background: transparent !important;
  color: #c8a96a !important;
  border: 1px solid #c8a96a !important;
  border-radius: 6px !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

/* ---------- CTA ---------- */
.kuro-ui-rank-card__cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 20px !important;
  background: linear-gradient(180deg, #f5c451 0%, #c8a96a 100%) !important;
  color: #13162b !important;
  border: 1px solid #c8a96a !important;
  border-radius: 6px !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 4px 16px rgba(200, 169, 106, 0.2);
}

.kuro-ui-rank-card__cta:hover,
.kuro-ui-rank-card__cta:focus-visible {
  background: linear-gradient(180deg, #f7cf6e 0%, #d4b87a 100%) !important;
  color: #13162b !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(200, 169, 106, 0.35);
  outline: none;
}

.kuro-ui-rank-card__cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(200, 169, 106, 0.25);
}

.kuro-ui-rank-card__cta:focus-visible {
  outline: 2px solid #f5c451;
  outline-offset: 3px;
}

.kuro-ui-rank-card__cta-arrow {
  display: inline-block;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

/* ---------- PR disclosure (shortcode wrapper) ---------- */
.kuro-ui-rank-card__pr-disclosure {
  margin: 16px 0 0;
  text-align: center;
  color: #7f879b !important;
  font-size: 12px;
  line-height: 1.6;
}

.kuro-ui-rank-card__pr-disclosure :where(p, span, div) {
  margin: 0 !important;
  color: #7f879b !important;
  font-size: 12px !important;
}

/* ============================================================
 * Mobile : < 768px
 * ============================================================ */
@media (max-width: 767px) {
  .kuro-ui-rank-card {
    margin: 16px auto !important;
    padding: 20px 18px !important;
    border-radius: 8px !important;
  }

  .kuro-ui-rank-card__top {
    margin-bottom: 14px;
  }

  .kuro-ui-rank-card__badge {
    padding: 7px 14px !important;
    font-size: 14px;
  }

  .kuro-ui-rank-card__pr {
    padding: 3px 8px !important;
    font-size: 11px;
  }

  .kuro-ui-rank-card__tags {
    gap: 8px;
    margin-bottom: 18px;
  }

  .kuro-ui-rank-card__tag {
    padding: 5px 12px !important;
    font-size: 12px;
  }

  .kuro-ui-rank-card__headline {
    font-size: 28px;
    line-height: 1.3;
  }

  .kuro-ui-rank-card__sub {
    margin-bottom: 22px !important;
  }

  /* Stack keep / cut vertically with hairline divider */
  .kuro-ui-rank-card__compare {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 20px;
  }

  .kuro-ui-rank-card__col + .kuro-ui-rank-card__col {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #2c3155 !important;
  }

  .kuro-ui-rank-card__chips {
    gap: 8px;
    margin-bottom: 18px;
  }

  .kuro-ui-rank-card__chip {
    padding: 5px 12px !important;
    font-size: 12px;
  }

  .kuro-ui-rank-card__cta {
    padding: 16px 20px !important;
    font-size: 16px;
    line-height: 1.5;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kuro-ui-rank-card__cta {
    transition: none;
  }
  .kuro-ui-rank-card__cta:hover {
    transform: none;
  }
}
/* === KURO UI END :: vx1-ranking-1st-card === */

/* === KURO UI START :: vx2-fanza-cta === */
/* =========================================================
   kuro-ui-cta — FANZA確認CTA 3バリアント
   honne-rev.com / Cocoon子テーマ cocoon-child-honnerev
   - 親テーマ衝突回避のため color/background/border/text-decoration に !important
   - 既存 hr-*, rf-* クラスは触らない
   - 全クラスは kuro-ui-cta- prefix
   ========================================================= */

/* ---------- 外枠（dark navy パネル） ---------- */
.kuro-ui-cta-stack {
  position: relative;
  display: block;
  max-width: 720px;
  margin: 32px auto;
  padding: 28px 32px 32px;
  background: linear-gradient(180deg, #13162b 0%, #0f1226 100%) !important;
  border: 1px solid #2c3155 !important;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 行（ラベル列 + ボタン列） */
.kuro-ui-cta-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: start;
  column-gap: 24px;
  padding: 14px 0;
}
.kuro-ui-cta-row + .kuro-ui-cta-row {
  border-top: 1px solid rgba(44, 49, 85, 0.5) !important;
}

/* 左ラベル（主CTA / セール / サンプル） */
.kuro-ui-cta-label {
  margin: 0;
  padding-top: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c8a96a !important;
  white-space: nowrap;
}

/* ボタン列（ボタン + サブコピー） */
.kuro-ui-cta-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* ---------- ボタン共通 ---------- */
.kuro-ui-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 64px;
  padding: 16px 28px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kuro-ui-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(200, 169, 106, 0.28);
  filter: brightness(1.04);
}
.kuro-ui-cta-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}
.kuro-ui-cta-btn:focus-visible {
  outline: 2px solid #f5c451;
  outline-offset: 3px;
}

/* ボタン内テキスト + 矢印 */
.kuro-ui-cta-btn-text {
  flex: 0 1 auto;
  color: inherit !important;
}
.kuro-ui-cta-btn-arrow {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit !important;
  pointer-events: none;
}

/* ---------- 主CTA（ゴールド・塗り） ---------- */
.kuro-ui-cta-btn--primary {
  background: linear-gradient(180deg, #f5c451 0%, #c8a96a 100%) !important;
  border: 1px solid #c8a96a !important;
  color: #1a1405 !important;
  box-shadow: 0 4px 16px rgba(200, 169, 106, 0.2);
}

/* ---------- セール（ゴールド・塗り、矢印なし） ---------- */
.kuro-ui-cta-btn--sale {
  background: linear-gradient(180deg, #f5c451 0%, #c8a96a 100%) !important;
  border: 1px solid #c8a96a !important;
  color: #1a1405 !important;
  box-shadow: 0 4px 16px rgba(200, 169, 106, 0.18);
}

/* ---------- サンプル（アウトライン） ---------- */
.kuro-ui-cta-btn--sample {
  background: transparent !important;
  border: 2px solid #c8a96a !important;
  color: #c8a96a !important;
}
.kuro-ui-cta-btn--sample:hover {
  background: rgba(200, 169, 106, 0.06) !important;
  box-shadow: 0 8px 22px rgba(200, 169, 106, 0.18);
}

/* ---------- サブコピー（ボタン下の小さい行） ---------- */
.kuro-ui-cta-sub {
  margin: 4px 0 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #7f879b !important;
  letter-spacing: 0.01em;
}
.kuro-ui-cta-sub--pr {
  /* PR表記行 — [hr_pr_disclosure compact="true"] が出力する .hr-pr-disclosure を内包する想定 */
  font-weight: 500;
}
.kuro-ui-cta-sub strong {
  color: #aab2c8 !important;
  font-weight: 700;
}

/* ---------- レスポンシブ: < 768px ---------- */
@media (max-width: 767px) {
  .kuro-ui-cta-stack {
    margin: 20px 12px;
    padding: 20px 18px 24px;
    border-radius: 10px;
  }
  .kuro-ui-cta-row {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 10px;
    padding: 14px 0;
  }
  .kuro-ui-cta-label {
    padding-top: 0;
    font-size: 13px;
    margin-bottom: 2px;
  }
  .kuro-ui-cta-btn {
    min-height: 56px;
    padding: 14px 44px 14px 20px;
    font-size: 16px;
    letter-spacing: 0;
  }
  .kuro-ui-cta-btn-arrow {
    right: 16px;
    width: 18px;
    height: 18px;
  }
  .kuro-ui-cta-sub {
    font-size: 12px;
  }
}

/* ---------- アクセシビリティ: モーション抑制 ---------- */
@media (prefers-reduced-motion: reduce) {
  .kuro-ui-cta-btn,
  .kuro-ui-cta-btn:hover,
  .kuro-ui-cta-btn:active {
    transition: none;
    transform: none;
  }
}
/* === KURO UI END :: vx2-fanza-cta === */

/* === KURO UI START :: vx3-sale-card === */
/* ============================================================
   kuro-ui-sale-card
   honne-rev.com / cocoon-child-honnerev
   セール刈り取りカード
   ============================================================ */

.kuro-ui-sale-card {
  --kuro-navy-0: #0a0a1f;
  --kuro-navy-1: #13162b;
  --kuro-navy-2: #1b2040;
  --kuro-navy-3: #222850;
  --kuro-border: #2c3155;
  --kuro-fg-1: #f4f6fb;
  --kuro-fg-2: #aab2c8;
  --kuro-fg-3: #7f879b;
  --kuro-gold: #c8a96a;
  --kuro-gold-bright: #f5c451;
  --kuro-gold-muted: rgba(200, 169, 106, 0.45);

  position: relative;
  max-width: 1040px;
  margin: 32px auto !important;
  padding: 0 !important;
  background: var(--kuro-navy-1) !important;
  border: 1px solid var(--kuro-border) !important;
  border-radius: 10px !important;
  overflow: hidden;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  color: var(--kuro-fg-1) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* ---------- Top stripe ---------- */
.kuro-ui-sale-card__stripe {
  background: linear-gradient(135deg, #c8a96a 0%, #f5c451 100%) !important;
  color: var(--kuro-navy-0) !important;
  text-align: center;
  padding: 12px 16px !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--kuro-border) !important;
}

/* ---------- Body ---------- */
.kuro-ui-sale-card__body {
  padding: 28px 32px 24px !important;
}

/* ---------- Header chips ---------- */
.kuro-ui-sale-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.kuro-ui-sale-card__chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.kuro-ui-sale-card__chip--sale {
  background: linear-gradient(135deg, #c8a96a 0%, #f5c451 100%) !important;
  color: var(--kuro-navy-0) !important;
  border: 1px solid transparent !important;
}

.kuro-ui-sale-card__chip--sample {
  background: transparent !important;
  color: var(--kuro-gold-bright) !important;
  border: 1px solid transparent !important;
  padding: 0 6px !important;
}

/* ---------- Headline ---------- */
.kuro-ui-sale-card__title {
  margin: 0 0 8px !important;
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--kuro-fg-1) !important;
}

.kuro-ui-sale-card__sub {
  margin: 0 0 24px !important;
  font-size: 14px;
  color: var(--kuro-fg-2) !important;
  line-height: 1.7;
}

/* ---------- Slot grid ---------- */
.kuro-ui-sale-card__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kuro-ui-sale-card__slot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px !important;
  background: var(--kuro-navy-2) !important;
  border: 1px solid var(--kuro-border) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: var(--kuro-fg-1) !important;
  transition: border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kuro-ui-sale-card__slot:hover {
  border-color: var(--kuro-gold-muted) !important;
  background: var(--kuro-navy-3) !important;
}

.kuro-ui-sale-card__slot:focus-visible {
  outline: 2px solid var(--kuro-gold) !important;
  outline-offset: 2px;
}

/* slot rank label */
.kuro-ui-sale-card__rank {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 10px !important;
  background: var(--kuro-navy-1) !important;
  border: 1px solid var(--kuro-gold-muted) !important;
  border-radius: 6px !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--kuro-fg-1) !important;
  letter-spacing: 0.02em;
}

.kuro-ui-sale-card__rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #c8a96a 0%, #f5c451 100%) !important;
  color: var(--kuro-navy-0) !important;
  border-radius: 3px !important;
  font-weight: 800;
  font-size: 11px;
}

/* slot artwork (placeholder) */
.kuro-ui-sale-card__art {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(ellipse at 65% 80%, rgba(245, 196, 81, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 30%, rgba(200, 169, 106, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #14182f 0%, #0c0e22 100%) !important;
  border: 1px solid var(--kuro-border) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

.kuro-ui-sale-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 90%, rgba(245, 196, 81, 0.25), transparent 50%);
  pointer-events: none;
}

/* slot tags */
.kuro-ui-sale-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kuro-ui-sale-card__tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px !important;
  background: transparent !important;
  border: 1px solid var(--kuro-gold-muted) !important;
  border-radius: 4px !important;
  font-size: 12px;
  color: var(--kuro-fg-1) !important;
  line-height: 1;
}

/* slot status chip (separate row below tags) */
.kuro-ui-sale-card__status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 24px;
  padding: 0 10px !important;
  background: transparent !important;
  border: 1px solid var(--kuro-gold) !important;
  border-radius: 4px !important;
  font-size: 12px;
  font-weight: 500;
  color: var(--kuro-gold-bright) !important;
  line-height: 1;
}

/* ---------- CTA ---------- */
.kuro-ui-sale-card__cta {
  display: block;
  width: 100%;
  padding: 18px 16px !important;
  background: linear-gradient(135deg, #c8a96a 0%, #f5c451 100%) !important;
  color: var(--kuro-navy-0) !important;
  border: 1px solid var(--kuro-gold) !important;
  border-radius: 8px !important;
  text-align: center;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kuro-ui-sale-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(200, 169, 106, 0.3);
}

.kuro-ui-sale-card__cta:active {
  transform: translateY(0);
}

.kuro-ui-sale-card__cta:focus-visible {
  outline: 2px solid var(--kuro-gold-bright) !important;
  outline-offset: 2px;
}

/* ---------- PR disclosure ---------- */
.kuro-ui-sale-card__pr {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--kuro-fg-3) !important;
  line-height: 1.6;
}

/* ============================================================
   Mobile (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  .kuro-ui-sale-card {
    margin: 16px auto !important;
    border-radius: 8px !important;
  }

  .kuro-ui-sale-card__stripe {
    font-size: 14px;
    padding: 10px 14px !important;
  }

  .kuro-ui-sale-card__body {
    padding: 20px 16px 18px !important;
  }

  .kuro-ui-sale-card__title {
    font-size: 24px;
    line-height: 1.4;
  }

  .kuro-ui-sale-card__sub {
    font-size: 13px;
    margin-bottom: 18px !important;
  }

  .kuro-ui-sale-card__slots {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 18px;
  }

  .kuro-ui-sale-card__art {
    aspect-ratio: 16 / 9;
  }

  .kuro-ui-sale-card__cta {
    font-size: 16px;
    padding: 16px 14px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kuro-ui-sale-card__cta,
  .kuro-ui-sale-card__slot {
    transition: none;
  }
  .kuro-ui-sale-card__cta:hover {
    transform: none;
  }
}
/* === KURO UI END :: vx3-sale-card === */

/* === KURO UI START :: vx4-mood-selector === */
/* ============================================================
 * kuro-ui-mood (VX-4 Mood Selector)
 * honne-rev.com / cocoon-child-honnerev
 * Cocoon衝突回避のため !important 必須
 * ============================================================ */

  /* ============================================================
     kuro-ui-mood — production CSS (mirror of code panel)
     ============================================================ */
  .kuro-ui-mood {
    box-sizing: border-box;
    padding: 48px 32px;
    background: #0a0a1f !important;
    border: 1px solid #2c3155 !important;
    border-radius: 8px;
    color: #f4f6fb !important;
    font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  }
  .kuro-ui-mood *, .kuro-ui-mood *::before, .kuro-ui-mood *::after { box-sizing: border-box; }

  .kuro-ui-mood__head { margin: 0 0 32px; }
  .kuro-ui-mood__title {
    margin: 0 0 8px;
    font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #f4f6fb !important;
    font-feature-settings: "palt" 1;
  }
  .kuro-ui-mood__sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #aab2c8 !important;
  }

  .kuro-ui-mood-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .kuro-ui-mood-grid__item { margin: 0; padding: 0; }

  .kuro-ui-mood-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    min-height: 120px;
    background: #13162b !important;
    border: 1px solid #c8a96a !important;
    border-radius: 6px;
    color: #f4f6fb !important;
    text-decoration: none !important;
    transition: background 220ms cubic-bezier(.22,.61,.36,1), border-color 220ms, transform 220ms, box-shadow 220ms;
  }
  .kuro-ui-mood-card:hover {
    background: #1b2040 !important;
    border-color: #f5c451 !important;
    box-shadow: 0 4px 16px rgba(200,169,106,0.18);
  }
  .kuro-ui-mood-card:focus-visible {
    outline: 2px solid #f5c451;
    outline-offset: 2px;
  }
  .kuro-ui-mood-card:active { transform: translateY(0); }

  .kuro-ui-mood-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #c8a96a !important;
    margin-top: -2px;
  }
  .kuro-ui-mood-card__icon svg {
    width: 36px;
    height: 36px;
    display: block;
  }

  .kuro-ui-mood-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    min-width: 0;
  }
  .kuro-ui-mood-card__label {
    display: block;
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #f4f6fb !important;
    margin: 0 0 4px;
  }
  .kuro-ui-mood-card__sub {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: #7f879b !important;
  }

  .kuro-ui-mood-card__arrow {
    position: absolute;
    right: 22px;
    bottom: 20px;
    width: 24px;
    height: 24px;
    color: #c8a96a !important;
    transition: transform 220ms cubic-bezier(.22,.61,.36,1), color 220ms;
  }
  .kuro-ui-mood-card__arrow svg { width: 24px; height: 24px; display: block; }
  .kuro-ui-mood-card:hover .kuro-ui-mood-card__arrow {
    color: #f5c451 !important;
    transform: translateX(3px);
  }

  @media (min-width: 768px) {
    .kuro-ui-mood { padding: 56px 48px; }
    .kuro-ui-mood__title { font-size: 32px; }
    .kuro-ui-mood__sub { font-size: 14px; }
    .kuro-ui-mood-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .kuro-ui-mood-card {
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
      gap: 8px;
      min-height: 170px;
      padding: 26px 28px;
    }
    .kuro-ui-mood-card__icon { width: 44px; height: 44px; margin: 0 0 auto; }
    .kuro-ui-mood-card__icon svg { width: 42px; height: 42px; }
    .kuro-ui-mood-card__label { font-size: 21px; }
    .kuro-ui-mood-card__sub { font-size: 13px; }
    .kuro-ui-mood-card__arrow { right: 26px; bottom: 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .kuro-ui-mood-card,
    .kuro-ui-mood-card__arrow { transition: none; }
    .kuro-ui-mood-card:hover .kuro-ui-mood-card__arrow { transform: none; }
  }
/* === KURO UI END :: vx4-mood-selector === */

/* === KURO UI START :: vx5-revisit-cta === */
/* ============================================================
 * kuro-ui-revisit (VX-5 再訪CTA 6ブロック)
 * honne-rev.com / cocoon-child-honnerev
 * ============================================================ */

.kuro-ui-revisit{
    --kr-bg:#0e1226;
    --kr-card:#161a30;
    --kr-card-hover:#1b2040;
    --kr-border:#2c3155;
    --kr-fg-1:#f4f6fb;
    --kr-fg-2:#aab2c8;
    --kr-fg-3:#7f879b;
    --kr-gold:#c8a96a;
    --kr-gold-hi:#f5c451;
    --kr-line:#06c755;
    --kr-line-hi:#22d96e;
    color:var(--kr-fg-1) !important;
    background:transparent !important;
    padding:32px 28px 28px;
    border-radius:8px;
    font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,sans-serif;
  }

  /* Heading area */
  .kuro-ui-revisit-heading{
    text-align:center;
    margin:0 0 22px;
  }
  .kuro-ui-revisit-title{
    font-family:"Shippori Mincho","Noto Serif JP",serif;
    font-weight:800;
    font-size:34px;
    line-height:1.25;
    letter-spacing:-.01em;
    color:var(--kr-fg-1) !important;
    margin:0 0 10px;
    font-feature-settings:"palt" 1;
  }
  .kuro-ui-revisit-sub{
    font-size:14px;
    line-height:1.6;
    color:var(--kr-fg-2) !important;
    margin:0;
    letter-spacing:.01em;
  }

  /* Grid: desktop 3x2, mobile 1x6 */
  .kuro-ui-revisit-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
  }
  @media (max-width:767px){
    .kuro-ui-revisit{ padding:24px 16px; }
    .kuro-ui-revisit-title{ font-size:24px; }
    .kuro-ui-revisit-sub{ font-size:12.5px; }
    .kuro-ui-revisit-grid{ grid-template-columns:1fr; gap:12px; }
  }

  /* Button card */
  .kuro-ui-revisit-btn{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 18px 18px 20px;
    background:var(--kr-card) !important;
    border:1px solid var(--kr-border) !important;
    border-left:3px solid var(--kr-gold) !important;
    border-radius:6px;
    color:var(--kr-fg-1) !important;
    text-decoration:none !important;
    transition:background .22s cubic-bezier(.22,.61,.36,1), border-color .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1);
    min-height:78px;
    cursor:pointer;
    font-family:inherit;
    text-align:left;
    width:100%;
    box-sizing:border-box;
  }
  .kuro-ui-revisit-btn:hover{
    background:var(--kr-card-hover) !important;
    border-color:var(--kr-border) !important;
    border-left-color:var(--kr-gold-hi) !important;
  }
  .kuro-ui-revisit-btn:focus-visible{
    outline:2px solid var(--kr-gold) !important;
    outline-offset:2px;
  }

  .kuro-ui-revisit-icon{
    flex:0 0 auto;
    width:34px; height:34px;
    color:var(--kr-gold) !important;
    display:flex; align-items:center; justify-content:center;
  }
  .kuro-ui-revisit-icon svg{ width:100%; height:100%; display:block; }

  .kuro-ui-revisit-text{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
  }
  .kuro-ui-revisit-label{
    font-size:15px;
    font-weight:700;
    line-height:1.35;
    color:var(--kr-fg-1) !important;
    letter-spacing:.01em;
  }
  .kuro-ui-revisit-meta{
    font-size:12.5px;
    line-height:1.4;
    color:var(--kr-fg-3) !important;
    font-weight:400;
    letter-spacing:.02em;
  }

  /* Block 6 — LINE special style */
  .kuro-ui-revisit-btn--line{
    background:var(--kr-line) !important;
    border:1px solid var(--kr-line) !important;
    border-left:1px solid var(--kr-line) !important;
    box-shadow:0 0 0 0 rgba(6,199,85,0);
    transition:background .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1);
  }
  .kuro-ui-revisit-btn--line:hover{
    background:var(--kr-line-hi) !important;
    border-color:var(--kr-line-hi) !important;
    border-left-color:var(--kr-line-hi) !important;
    box-shadow:0 6px 18px rgba(6,199,85,.32);
    transform:translateY(-1px);
  }
  .kuro-ui-revisit-btn--line .kuro-ui-revisit-icon{ color:#fff !important; }
  .kuro-ui-revisit-btn--line .kuro-ui-revisit-label{ color:#fff !important; }
  .kuro-ui-revisit-btn--line .kuro-ui-revisit-meta{ color:rgba(255,255,255,.88) !important; }

  /* X follow strip */
  .kuro-ui-revisit-x-wrap{
    display:flex;
    justify-content:center;
    margin-top:8px;
  }
  .kuro-ui-revisit-x{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 22px;
    background:#0e1226 !important;
    border:1px solid var(--kr-border) !important;
    border-radius:6px;
    color:var(--kr-fg-1) !important;
    text-decoration:none !important;
    font-size:13.5px;
    font-weight:500;
    letter-spacing:.02em;
    transition:border-color .22s cubic-bezier(.22,.61,.36,1), background .22s cubic-bezier(.22,.61,.36,1);
  }
  .kuro-ui-revisit-x:hover{
    background:#161a30 !important;
    border-color:var(--kr-gold) !important;
  }
  .kuro-ui-revisit-x-icon{
    width:18px; height:18px;
    display:flex; align-items:center; justify-content:center;
    color:var(--kr-fg-1) !important;
  }
  .kuro-ui-revisit-x-icon svg{ width:100%; height:100%; display:block; }
  .kuro-ui-revisit-x-handle{ color:var(--kr-fg-2) !important; }
  .kuro-ui-revisit-x-arrow{ color:var(--kr-fg-3) !important; margin:0 2px; }

  @media (prefers-reduced-motion:reduce){
    .kuro-ui-revisit-btn,
    .kuro-ui-revisit-btn--line,
    .kuro-ui-revisit-x{ transition:none !important; }
    .kuro-ui-revisit-btn--line:hover{ transform:none !important; }
  }

  /* =========================================================
     SNIPPET END
     ========================================================= */
/* === KURO UI END :: vx5-revisit-cta === */

/* --- VX-6 Hub Hero (kuro-ui-hub-hero-) ---*/
/* =========================================================
   kuro-ui-hub-hero — Honne-Rev Hub Page Hero
   Dark Editorial Premium / room-warmth ambient lighting
   ========================================================= */

.kuro-ui-hub-hero-root {
  /* Tokens (scoped, no leakage) */
  --kuro-ui-hub-hero-bg: #0a0e1f;
  --kuro-ui-hub-hero-bg-deep: #060814;
  --kuro-ui-hub-hero-panel: #0f1430;
  --kuro-ui-hub-hero-panel-edge: #1a1f3d;
  --kuro-ui-hub-hero-border: #2c3155;
  --kuro-ui-hub-hero-fg-1: #f4f6fb;
  --kuro-ui-hub-hero-fg-2: #aab2c8;
  --kuro-ui-hub-hero-fg-3: #7f879b;
  --kuro-ui-hub-hero-gold: #f5c451;
  --kuro-ui-hub-hero-gold-soft: #e6b441;
  --kuro-ui-hub-hero-gold-deep: #c8a96a;
  --kuro-ui-hub-hero-warm: #ff8855;
  --kuro-ui-hub-hero-fg-on-gold: #1a1405;

  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif !important;
  color: var(--kuro-ui-hub-hero-fg-1) !important;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  position: relative;
  width: 100%;
  padding: 32px 16px 48px;
  background:
    /* warm room-light leak from right */
    radial-gradient(ellipse 60% 80% at 100% 60%, rgba(255,136,85,0.18), transparent 55%),
    /* subtle table-top warmth at bottom */
    radial-gradient(ellipse 80% 30% at 50% 110%, rgba(120,60,30,0.18), transparent 60%),
    /* deep ambient base */
    linear-gradient(180deg, #07091a 0%, #0a0e1f 55%, #050813 100%) !important;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

.kuro-ui-hub-hero-root *,
.kuro-ui-hub-hero-root *::before,
.kuro-ui-hub-hero-root *::after {
  box-sizing: border-box;
}

/* Subtle film-grain overlay for editorial print feel */
.kuro-ui-hub-hero-root::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 23% 47%, #fff 0.5px, transparent 0.5px),
    radial-gradient(circle at 71% 13%, #fff 0.5px, transparent 0.5px),
    radial-gradient(circle at 39% 81%, #fff 0.5px, transparent 0.5px),
    radial-gradient(circle at 88% 64%, #fff 0.5px, transparent 0.5px);
  background-size: 7px 7px, 11px 11px, 13px 13px, 9px 9px;
  z-index: 0;
}

/* The deep-navy panel — feels like a framed print on the desk */
.kuro-ui-hub-hero-panel {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 28px 44px;
  text-align: center;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, #131a3a 0%, #0d1230 60%, #0a0e26 100%);
  border: 1px solid var(--kuro-ui-hub-hero-panel-edge);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 24px 80px rgba(0,0,0,0.7),
    0 4px 16px rgba(0,0,0,0.5);
}

/* Kicker chip — pill */
.kuro-ui-hub-hero-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  margin: 0 0 28px;
  background: rgba(15, 18, 40, 0.85);
  border: 1px solid rgba(200, 169, 106, 0.28);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--kuro-ui-hub-hero-gold) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(0,0,0,0.4);
}

/* Headline */
.kuro-ui-hub-hero-title {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 900;
  color: var(--kuro-ui-hub-hero-fg-1) !important;
  font-size: 44px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

/* Lead / sub copy */
.kuro-ui-hub-hero-lead {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: var(--kuro-ui-hub-hero-fg-2) !important;
  font-size: 15px;
  line-height: 1.85;
  font-weight: 400;
  margin: 0 0 26px;
}

/* Gold hairline rule (centered) */
.kuro-ui-hub-hero-rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 auto 30px;
  background: linear-gradient(90deg, transparent, var(--kuro-ui-hub-hero-gold-soft) 30%, var(--kuro-ui-hub-hero-gold-soft) 70%, transparent);
  border: 0;
  opacity: 0.85;
}

/* CTA button */
.kuro-ui-hub-hero-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 18px;
  padding: 18px 28px;
  background: linear-gradient(180deg, #f5c451 0%, #e8b13b 100%) !important;
  color: var(--kuro-ui-hub-hero-fg-on-gold) !important;
  border: 1px solid #d9a426 !important;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 -1px 0 rgba(120,80,10,0.25) inset,
    0 8px 24px rgba(245,196,81,0.18),
    0 2px 6px rgba(0,0,0,0.35);
  transition:
    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kuro-ui-hub-hero-cta:hover,
.kuro-ui-hub-hero-cta:focus-visible {
  background: linear-gradient(180deg, #f8cd60 0%, #efba47 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(120,80,10,0.25) inset,
    0 12px 28px rgba(245,196,81,0.28),
    0 3px 8px rgba(0,0,0,0.4);
  outline: none;
}

.kuro-ui-hub-hero-cta:focus-visible {
  box-shadow:
    0 0 0 3px rgba(245,196,81,0.35),
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 12px 28px rgba(245,196,81,0.28);
}

.kuro-ui-hub-hero-cta:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -1px 0 rgba(120,80,10,0.3) inset,
    0 4px 10px rgba(245,196,81,0.18),
    0 1px 3px rgba(0,0,0,0.4);
}

.kuro-ui-hub-hero-cta-label {
  flex: 1 1 auto;
  text-align: center;
  padding-left: 22px; /* visual centering offset for the arrow */
}

.kuro-ui-hub-hero-cta-arrow {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kuro-ui-hub-hero-cta-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Footer meta line */
.kuro-ui-hub-hero-meta {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--kuro-ui-hub-hero-fg-3) !important;
  letter-spacing: 0.02em;
}
.kuro-ui-hub-hero-meta-divider {
  display: inline-block;
  margin: 0 12px;
  color: var(--kuro-ui-hub-hero-fg-3);
  opacity: 0.7;
}

/* Mobile-only line breaks — hidden on desktop so headlines/lead
   render as single lines per the desktop mock */
.kuro-ui-hub-hero-mobile-br { display: inline; }

/* =========================================================
   ≥768px — desktop layout: wide horizontal
   ========================================================= */
@media (min-width: 768px) {
  .kuro-ui-hub-hero-mobile-br { display: none; }
  .kuro-ui-hub-hero-root {
    padding: 56px 32px 64px;
  }
  .kuro-ui-hub-hero-panel {
    max-width: 1080px;
    padding: 56px 64px 48px;
    border-radius: 4px;
  }
  .kuro-ui-hub-hero-kicker {
    margin-bottom: 22px;
  }
  .kuro-ui-hub-hero-title {
    font-size: 56px;
    line-height: 1.22;
    margin-bottom: 18px;
  }
  .kuro-ui-hub-hero-lead {
    font-size: 16px;
    margin-bottom: 22px;
  }
  .kuro-ui-hub-hero-rule {
    margin-bottom: 26px;
  }
  .kuro-ui-hub-hero-cta {
    max-width: 480px;
    padding: 18px 32px;
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  .kuro-ui-hub-hero-title {
    font-size: 64px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kuro-ui-hub-hero-cta {
    transition: none;
  }
  .kuro-ui-hub-hero-cta:hover {
    transform: none;
  }
}

/* --- VX-7 Ranking Intro (kuro-ui-ranking-intro-*) ---*/

.kuro-ui-ranking-intro {
  --hr-bg:           #0a0a1f;
  --hr-surface-1:    #13162b;
  --hr-surface-2:    #1b2040;
  --hr-surface-3:    #222850;
  --hr-border:       #2c3155;
  --hr-fg-1:         #f4f6fb;
  --hr-fg-2:         #aab2c8;
  --hr-fg-3:         #7f879b;
  --hr-fg-on-gold:   #1a1405;
  --hr-gold:         #c8a96a;
  --hr-gold-hover:   #d9ba7b;
  --hr-gold-muted:   #8c7749;
  --hr-amber:        #f5c451;
  --hr-font-display: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', serif;
  --hr-font-sans:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --hr-duration-base: 220ms;
  --hr-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* =========================================================
   Honne-Rev tokens (subset, inlined for component portability)
   ========================================================= */


/* Page scaffolding so the component sits in a realistic context.
   Real WP/Cocoon page won't use these — only the .kuro-ui-ranking-intro-* are scoped output. */



/* =========================================================
   kuro-ui-ranking-intro-*  (the actual component)
   ========================================================= */

.kuro-ui-ranking-intro {
  background: var(--hr-surface-1);
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  padding: 28px 24px 28px;
  font-family: var(--hr-font-sans);
  color: var(--hr-fg-1) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 12px 40px rgba(0,0,0,0.45);
}

/* --- chip row (month + update cadence) --- */
.kuro-ui-ranking-intro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

.kuro-ui-ranking-intro-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.kuro-ui-ranking-intro-chip--month {
  background: var(--hr-gold) !important;
  color: var(--hr-fg-on-gold) !important;
  border: 1px solid var(--hr-gold) !important;
}
.kuro-ui-ranking-intro-chip--cadence {
  background: transparent !important;
  color: var(--hr-gold) !important;
  border: 1px solid var(--hr-gold-muted) !important;
}

/* --- headline --- */
.kuro-ui-ranking-intro-title {
  font-family: var(--hr-font-display);
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--hr-fg-1) !important;
  margin: 0 0 22px;
  font-feature-settings: "palt" 1;
  text-wrap: pretty;
}

/* --- lead body copy --- */
.kuro-ui-ranking-intro-lead {
  color: var(--hr-fg-2) !important;
  font-size: 15px;
  line-height: 2;
  margin: 0 0 24px;
  max-width: 62ch;
}
.kuro-ui-ranking-intro-lead p {
  margin: 0;
  color: inherit !important;
}
.kuro-ui-ranking-intro-lead p + p {
  margin-top: 0; /* lines stack like the mock — single paragraph w/ <br> works too */
}

/* --- divider --- */
.kuro-ui-ranking-intro-rule {
  height: 1px;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, var(--hr-border) 12%, var(--hr-border) 88%, transparent) !important;
  margin: 4px 0 16px;
}

/* --- anchor row (right-aligned arrow link) --- */
.kuro-ui-ranking-intro-anchor-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 18px;
}
.kuro-ui-ranking-intro-anchor {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--hr-amber) !important;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--hr-duration-base) var(--hr-ease-standard),
              transform var(--hr-duration-base) var(--hr-ease-standard);
}
.kuro-ui-ranking-intro-anchor-arrow {
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
}
.kuro-ui-ranking-intro-anchor-label {
  text-decoration: underline !important;
  text-decoration-color: var(--hr-amber) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.kuro-ui-ranking-intro-anchor:hover {
  color: var(--hr-gold-hover) !important;
}
.kuro-ui-ranking-intro-anchor:hover .kuro-ui-ranking-intro-anchor-label {
  text-decoration-color: var(--hr-gold-hover) !important;
}
.kuro-ui-ranking-intro-anchor:focus-visible {
  outline: 2px solid var(--hr-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- PR disclosure --- */
.kuro-ui-ranking-intro-pr {
  font-size: 12px;
  line-height: 1.6;
  color: var(--hr-fg-3) !important;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.kuro-ui-ranking-intro-pr a {
  color: var(--hr-fg-3) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(127,135,155,0.5) !important;
  text-underline-offset: 3px;
}
.kuro-ui-ranking-intro-pr a:hover {
  color: var(--hr-amber) !important;
  text-decoration-color: var(--hr-amber) !important;
}

/* --- voice block (kuro's criteria) --- */
.kuro-ui-ranking-intro-voice {
  background: var(--hr-surface-2);
  border-left: 3px solid var(--hr-gold-muted);
  border-radius: 4px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--hr-fg-1) !important;
  font-feature-settings: "palt" 1;
}
.kuro-ui-ranking-intro-voice-label {
  color: var(--hr-fg-1) !important;
  font-weight: 700;
  margin-right: 2px;
}

/* =========================================================
   Responsive
   <768px = mobile (single column, tighter)
   ≥768px = desktop (anchor right-aligned, lead one-line per logical sentence)
   ========================================================= */
@media (max-width: 767px) {
  .kuro-ui-ranking-intro {
    padding: 24px 20px 24px;
    border-radius: 8px;
  }
  .kuro-ui-ranking-intro-chips {
    margin-bottom: 24px;
  }
  .kuro-ui-ranking-intro-title {
    font-size: 30px;
    line-height: 1.4;
    margin-bottom: 22px;
  }
  .kuro-ui-ranking-intro-lead {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 22px;
  }
  .kuro-ui-ranking-intro-anchor {
    font-size: 15px;
  }
  .kuro-ui-ranking-intro-pr {
    font-size: 11.5px;
  }
  .kuro-ui-ranking-intro-voice {
    font-size: 14px;
    padding: 16px 18px;
    line-height: 1.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kuro-ui-ranking-intro-anchor { transition: none; }
}

/* =========================================================
   VX-8 kuro-ui-pillar-nav
   ========================================================= */

/* scoped tokens */
.kuro-ui-pillar-nav {
  --hr-bg:           #0a0a1f;
  --hr-surface-1:    #13162b;
  --hr-surface-2:    #1b2040;
  --hr-border:       #2c3155;
  --hr-fg-1:         #f4f6fb;
  --hr-fg-2:         #aab2c8;
  --hr-fg-3:         #7f879b;
  --hr-fg-on-gold:   #1a1405;
  --hr-gold:         #c8a96a;
  --hr-gold-hover:   #d9ba7b;
  --hr-gold-muted:   #8c7749;
  --hr-amber:        #f5c451;
  --hr-font-serif:   'Shippori Mincho','Noto Serif JP','Yu Mincho',serif;
  --hr-font-sans:    'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;

  display: block;
  padding: 48px 16px;
  max-width: 1120px;
  margin: 0 auto;
  box-sizing: border-box;
}

.kuro-ui-pillar-nav-kicker {
  display: inline-block;
  font-family: var(--hr-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--hr-fg-2) !important;
  background: transparent !important;
  border: 1px solid var(--hr-border) !important;
  padding: 6px 12px;
  border-radius: 4px;
  margin: 0 0 16px;
}

.kuro-ui-pillar-nav-heading {
  font-family: var(--hr-font-serif);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--hr-fg-1) !important;
  margin: 0 0 24px;
}

.kuro-ui-pillar-nav-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .kuro-ui-pillar-nav { padding: 64px 24px; }
  .kuro-ui-pillar-nav-heading { font-size: 34px; margin-bottom: 32px; }
  .kuro-ui-pillar-nav-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
}

.kuro-ui-pillar-nav-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--hr-surface-1) !important;
  border: 1px solid var(--hr-border) !important;
  border-top: 1px solid var(--hr-gold) !important;
  border-radius: 6px;
  text-decoration: none !important;
  color: var(--hr-fg-1) !important;
  transition: background 220ms cubic-bezier(0.22,0.61,0.36,1),
              border-color 220ms cubic-bezier(0.22,0.61,0.36,1),
              transform 220ms cubic-bezier(0.22,0.61,0.36,1);
}

.kuro-ui-pillar-nav-card:hover,
.kuro-ui-pillar-nav-card:focus-visible {
  background: var(--hr-surface-2) !important;
  border-color: var(--hr-gold-muted) !important;
  border-top-color: var(--hr-amber) !important;
  outline: none;
}

.kuro-ui-pillar-nav-card:focus-visible {
  box-shadow: 0 0 0 2px var(--hr-gold);
}

.kuro-ui-pillar-nav-card:hover .kuro-ui-pillar-nav-arrow {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .kuro-ui-pillar-nav-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 24px 20px 20px;
    min-height: 220px;
  }
}

.kuro-ui-pillar-nav-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  color: var(--hr-gold);
  display: block;
}

@media (min-width: 768px) {
  .kuro-ui-pillar-nav-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
  }
}

.kuro-ui-pillar-nav-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kuro-ui-pillar-nav-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kuro-ui-pillar-nav-title {
  font-family: var(--hr-font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--hr-fg-1) !important;
  margin: 0;
}

.kuro-ui-pillar-nav-sub {
  font-family: var(--hr-font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--hr-fg-2) !important;
  margin: 0 0 8px;
}

@media (min-width: 768px) {
  .kuro-ui-pillar-nav-title { font-size: 18px; margin-top: 4px; }
  .kuro-ui-pillar-nav-sub { font-size: 13px; margin-bottom: 16px; }
}

.kuro-ui-pillar-nav-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.kuro-ui-pillar-nav-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--hr-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hr-gold) !important;
  background: transparent !important;
  border: 1px solid var(--hr-gold-muted) !important;
  padding: 4px 10px;
  border-radius: 3px;
  text-decoration: none !important;
}

.kuro-ui-pillar-nav-arrow {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--hr-gold);
  transition: transform 220ms cubic-bezier(0.22,0.61,0.36,1);
}

.kuro-ui-pillar-nav-arrow svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .kuro-ui-pillar-nav-card { padding: 16px 18px; }
  .kuro-ui-pillar-nav-icon { width: 64px; height: 64px; margin-right: 4px; }
  .kuro-ui-pillar-nav-arrow { position: absolute; right: 18px; bottom: 18px; }
  .kuro-ui-pillar-nav-foot { margin-top: 4px; justify-content: flex-start; }
  .kuro-ui-pillar-nav-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .kuro-ui-pillar-nav-card,
  .kuro-ui-pillar-nav-arrow { transition: none; }
}

/* ========= end VX-8 ========= */

/* === KURO UI START === */


/* kuro-ui-additions v1 */
/* auto-generated 2026-05-03 — do not edit by hand */

/* ============================================================
 * kuro-ui-additions.css
 * honne-rev.com / cocoon-child-honnerev
 *
 * 追加コンポーネント（style.css の /* === KURO UI START === */ 内に追加）
 *   - .kuro-ui-faq         (FAQ アコーディオン + Schema.org 対応)
 *   - .rf-notice-box       (18禁・PR・コンプラ通知ボックス)
 *   - .kuro-compare-table  (比較テーブル)
 *   - .kuro-ui-summary-box (まとめ・ポイントボックス)
 *   - .kuro-ui-selection-criteria-grid (選定基準グリッド)
 * ============================================================ */


/* ============================================================
   kuro-ui-faq — FAQ アコーディオン
   ・Schema.org FAQPage のマークアップと併用前提
   ・Cocoon テーマと衝突しないよう !important は最小限
   ============================================================ */

.kuro-ui-faq {
  margin: 2em 0;
  border-radius: 8px;
  overflow: hidden;
}

.kuro-ui-faq__item {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--hr-surface-1, #13162b);
  transition: background var(--hr-duration-base, 220ms) ease;
}

.kuro-ui-faq__item:first-child {
  border-top: none;
  border-radius: 8px 8px 0 0;
}

.kuro-ui-faq__item:last-child {
  border-radius: 0 0 8px 8px;
}

.kuro-ui-faq__q {
  margin: 0 !important;
  padding: 16px 20px 16px 48px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--hr-fg-1, #f4f6fb) !important;
  cursor: pointer;
  position: relative;
  line-height: 1.6 !important;
  background: none !important;
  border: none !important;
  letter-spacing: 0.01em;
}

/* Q ラベル */
.kuro-ui-faq__q::before {
  content: "Q";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--hr-pink, #ff1e7a);
  color: #fff;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.kuro-ui-faq__a {
  padding: 0 20px 16px 48px;
  color: var(--hr-fg-2, #aab2c8);
  font-size: 0.88rem;
  line-height: 1.75;
}

.kuro-ui-faq__a p {
  margin: 0 0 0.5em;
  color: var(--hr-fg-2, #aab2c8);
}

.kuro-ui-faq__a p:last-child {
  margin-bottom: 0;
}

/* A ラベル */
.kuro-ui-faq__a > div::before {
  content: "A";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--hr-surface-3, #222850);
  color: var(--hr-gold, #c8a96a);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 900;
  text-align: center;
  line-height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ライトBG（記事本文がライトテーマになるときの対応） */
body.is-light-theme .kuro-ui-faq__item,
.entry-content .kuro-ui-faq__item {
  background: #f8f9fe;
  border-color: rgba(0, 0, 0, 0.08);
}

body.is-light-theme .kuro-ui-faq__q,
.entry-content .kuro-ui-faq__q {
  color: #1a1e2e !important;
}

body.is-light-theme .kuro-ui-faq__a,
.entry-content .kuro-ui-faq__a {
  color: #3a3f5c;
}

body.is-light-theme .kuro-ui-faq__a p,
.entry-content .kuro-ui-faq__a p {
  color: #3a3f5c;
}

/* モバイル調整 */
@media (max-width: 600px) {
  .kuro-ui-faq__q {
    padding: 14px 16px 14px 44px !important;
    font-size: 0.88rem !important;
  }
  .kuro-ui-faq__a {
    padding: 0 16px 14px 44px;
  }
}


/* ============================================================
   rf-notice-box — 通知ボックス
   ・18禁注意 / PR表記 / コンプラ警告
   ・既存 .rf-notice-box は上書きのみ（削除禁止）
   ============================================================ */

/* Base */
.rf-notice-box {
  padding: 10px 16px;
  margin-bottom: 14px;
  border-radius: 4px;
  font-size: 0.87em;
  line-height: 1.6;
}

/* 成人向け（18禁） */
.rf-notice-box--adult {
  background: #fff5f5 !important;
  border-left: 4px solid #e53e3e !important;
  color: #c53030 !important;
  border-radius: 4px !important;
}

.rf-notice-box--adult strong {
  color: #9b2c2c;
}

/* PR表記 */
.rf-notice-box--pr {
  background: #f7fafc;
  border-left: 4px solid #a0aec0;
  color: #4a5568;
  font-size: 0.82em;
}

/* 警告 */
.rf-notice-box--warning {
  background: #fffbeb;
  border-left: 4px solid #d97706;
  color: #92400e;
}

/* ダークテーマ上の .rf-notice-box (style上書き禁止の場合は .kuro- prefixを使え) */
.entry-content .rf-notice-box--adult {
  background: #fff5f5 !important;
  border-left-color: #e53e3e !important;
  color: #c53030 !important;
}


/* ============================================================
   kuro-compare-table — 商品比較テーブル
   ・スマホ横スクロール対応
   ・1列目はスティッキーで固定
   ============================================================ */

.kuro-compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
  border-radius: 8px;
  border: 1px solid var(--hr-border, #2c3155);
}

.kuro-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--hr-surface-1, #13162b);
  color: var(--hr-fg-1, #f4f6fb);
  min-width: 480px;
}

.kuro-compare-table thead tr {
  background: var(--hr-surface-2, #1b2040);
  border-bottom: 2px solid var(--hr-pink, #ff1e7a);
}

.kuro-compare-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--hr-fg-1, #f4f6fb);
  white-space: nowrap;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kuro-compare-table thead th:first-child {
  color: var(--hr-gold, #c8a96a);
}

.kuro-compare-table tbody tr {
  border-bottom: 1px solid var(--hr-border, #2c3155);
  transition: background var(--hr-duration-fast, 140ms) ease;
}

.kuro-compare-table tbody tr:last-child {
  border-bottom: none;
}

.kuro-compare-table tbody tr:hover {
  background: var(--hr-surface-2, #1b2040);
}

.kuro-compare-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  line-height: 1.5;
  color: var(--hr-fg-2, #aab2c8);
}

.kuro-compare-table tbody td:first-child {
  font-weight: 700;
  color: var(--hr-fg-1, #f4f6fb);
  white-space: nowrap;
}

/* ランク強調 */
.kuro-compare-table .is-best td {
  background: rgba(255, 30, 122, 0.06);
}

.kuro-compare-table .is-best td:first-child {
  color: var(--hr-pink, #ff1e7a);
}

/* ライトBG（記事本文 entry-content） */
.entry-content .kuro-compare-table {
  background: #fff;
  color: #1a1e2e;
  border-color: #e2e8f0;
}

.entry-content .kuro-compare-table thead tr {
  background: #f0f4ff;
}

.entry-content .kuro-compare-table thead th {
  color: #1a1e2e;
}

.entry-content .kuro-compare-table thead th:first-child {
  color: #7c5b2e;
}

.entry-content .kuro-compare-table tbody tr {
  border-color: #e2e8f0;
}

.entry-content .kuro-compare-table tbody tr:hover {
  background: #f0f4ff;
}

.entry-content .kuro-compare-table tbody td {
  color: #4a5568;
}

.entry-content .kuro-compare-table tbody td:first-child {
  color: #1a1e2e;
}

.entry-content .kuro-compare-table .is-best td {
  background: rgba(255, 30, 122, 0.04);
}

/* モバイル */
@media (max-width: 600px) {
  .kuro-compare-table {
    font-size: 0.82rem;
  }
  .kuro-compare-table thead th,
  .kuro-compare-table tbody td {
    padding: 10px 12px;
  }
}


/* ============================================================
   kuro-ui-summary-box — まとめ・要点ボックス
   ============================================================ */

.kuro-ui-summary-box {
  background: var(--hr-surface-2, #1b2040);
  border: 1px solid var(--hr-border, #2c3155);
  border-top: 3px solid var(--hr-gold, #c8a96a);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 2em 0;
}

.kuro-ui-summary-box__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hr-gold, #c8a96a);
  margin: 0 0 12px;
  letter-spacing: 0.04em;
}

.kuro-ui-summary-box__list {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--hr-fg-2, #aab2c8);
  font-size: 0.9rem;
  line-height: 1.8;
}

.kuro-ui-summary-box__list li + li {
  margin-top: 4px;
}

/* ライト */
.entry-content .kuro-ui-summary-box {
  background: #f8f9fe;
  border-color: #e2e8f0;
  border-top-color: #c8a96a;
}

.entry-content .kuro-ui-summary-box__title {
  color: #7c5b2e;
}

.entry-content .kuro-ui-summary-box__list {
  color: #3a3f5c;
}


/* ============================================================
   kuro-ui-selection-criteria-grid — 選定基準グリッド
   ============================================================ */

.kuro-ui-selection-criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 1.5em 0;
}

.kuro-ui-selection-criteria-card {
  background: var(--hr-surface-1, #13162b);
  border: 1px solid var(--hr-border, #2c3155);
  border-radius: 8px;
  padding: 16px;
}

.kuro-ui-selection-criteria-card__num {
  font-size: 0.75rem;
  color: var(--hr-pink, #ff1e7a);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.kuro-ui-selection-criteria-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hr-fg-1, #f4f6fb);
  margin-bottom: 6px;
  line-height: 1.4;
}

.kuro-ui-selection-criteria-card__body {
  font-size: 0.83rem;
  color: var(--hr-fg-3, #7f879b);
  line-height: 1.6;
}

/* ライト */
.entry-content .kuro-ui-selection-criteria-card {
  background: #f8f9fe;
  border-color: #e2e8f0;
}

.entry-content .kuro-ui-selection-criteria-card__title {
  color: #1a1e2e;
}

.entry-content .kuro-ui-selection-criteria-card__body {
  color: #4a5568;
}

@media (max-width: 480px) {
  .kuro-ui-selection-criteria-grid {
    grid-template-columns: 1fr;
  }
}


/* end kuro-ui-additions */

/* --- VX-9: kuro-ui-review-intro (レビュー記事冒頭テンプレ) --- */
.kuro-ui-review-intro {
  --kuro-ri-bg:           #0a0a1f;
  --kuro-ri-surface-1:    #13162b;
  --kuro-ri-surface-2:    #1b2040;
  --kuro-ri-border:       #2c3155;
  --kuro-ri-border-soft:  #1f2342;
  --kuro-ri-fg-1:         #f4f6fb;
  --kuro-ri-fg-2:         #aab2c8;
  --kuro-ri-fg-3:         #7f879b;
  --kuro-ri-gold:         #c8a96a;
  --kuro-ri-gold-hover:   #d9ba7b;
  --kuro-ri-gold-muted:   #8c7749;
  --kuro-ri-amber:        #f5c451;
  --kuro-ri-amber-dim:    #4a4030;
  --kuro-ri-success:      #6ab187;
  --kuro-ri-cut:          #c95c5c;
  --kuro-ri-fg-on-gold:   #1a1405;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  color: var(--kuro-ri-fg-2) !important;
  font-feature-settings: "palt" 1;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto;
}
.kuro-ui-review-intro-pr {
  font-size: 12px;
  color: var(--kuro-ri-fg-3) !important;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  padding: 0 4px;
  line-height: 1.5;
}
.kuro-ui-review-intro-pr--bottom { margin: 14px 0 0; text-align: center; }
.kuro-ui-review-intro-pr a { color: var(--kuro-ri-fg-3) !important; text-decoration: underline !important; text-decoration-color: var(--kuro-ri-border) !important; text-underline-offset: 2px; }
.kuro-ui-review-intro-pr a:hover { color: var(--kuro-ri-gold) !important; text-decoration-color: var(--kuro-ri-gold) !important; }
.kuro-ui-review-intro-fitcard {
  position: relative;
  background: var(--kuro-ri-surface-1) !important;
  border: 1px solid var(--kuro-ri-border) !important;
  border-radius: 8px;
  padding: 32px 28px 28px;
  margin: 16px 0 0;
}
.kuro-ui-review-intro-pill {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--kuro-ri-surface-2) !important;
  border: 1px solid var(--kuro-ri-gold-muted) !important;
  color: var(--kuro-ri-gold) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 7px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.kuro-ui-review-intro-fitgrid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 28px;
  align-items: stretch;
}
.kuro-ui-review-intro-fitdivider { background: var(--kuro-ri-border) !important; width: 1px; }
.kuro-ui-review-intro-fitcol { padding: 4px 0; }
.kuro-ui-review-intro-fitcol--fit,
.kuro-ui-review-intro-fitcol--notfit { text-align: center; }
.kuro-ui-review-intro-fittitle {
  font-family: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  line-height: 1.3;
}
.kuro-ui-review-intro-fittitle--fit   { color: var(--kuro-ri-success) !important; }
.kuro-ui-review-intro-fittitle--notfit { color: var(--kuro-ri-fg-2) !important; }
.kuro-ui-review-intro-fitlist { list-style: none; margin: 0; padding: 0; display: inline-block; text-align: left; }
.kuro-ui-review-intro-fitlist li {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 12px; font-size: 15px; line-height: 1.55;
  color: var(--kuro-ri-fg-1) !important;
}
.kuro-ui-review-intro-fitlist li:last-child { margin-bottom: 0; }
.kuro-ui-review-intro-fitmark { flex: 0 0 18px; width: 18px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; line-height: 1; }
.kuro-ui-review-intro-fitmark--check { color: var(--kuro-ri-success) !important; }
.kuro-ui-review-intro-fitmark--cross { color: var(--kuro-ri-fg-3) !important; font-weight: 400; font-size: 18px; }
.kuro-ui-review-intro-fitlist--notfit li { color: var(--kuro-ri-fg-2) !important; }
.kuro-ui-review-intro-tagblock { margin: 28px 0 0; }
.kuro-ui-review-intro-taglabel { font-size: 13px; color: var(--kuro-ri-fg-3) !important; margin: 0 0 10px; letter-spacing: 0.04em; }
.kuro-ui-review-intro-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.kuro-ui-review-intro-tag {
  display: inline-block; font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: 999px;
  background: transparent !important;
  border: 1px solid var(--kuro-ri-gold-muted) !important;
  color: var(--kuro-ri-gold) !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
  cursor: default; line-height: 1.3;
}
.kuro-ui-review-intro-ratings {
  margin: 16px 0 0;
  background: var(--kuro-ri-surface-1) !important;
  border: 1px solid var(--kuro-ri-border) !important;
  border-radius: 8px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.kuro-ui-review-intro-score-block { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kuro-ui-review-intro-score-label { font-size: 14px; font-weight: 700; color: var(--kuro-ri-fg-1) !important; letter-spacing: 0.02em; line-height: 1.3; }
.kuro-ui-review-intro-score-num { font-size: 13px; color: var(--kuro-ri-amber) !important; font-weight: 700; white-space: nowrap; letter-spacing: 0.02em; }
.kuro-ui-review-intro-score-num::before { content: "★"; margin-right: 2px; }
.kuro-ui-review-intro-stars { position: relative; display: inline-block; font-size: 18px; line-height: 1; height: 18px; letter-spacing: 2px; font-family: Arial, sans-serif; color: var(--kuro-ri-amber-dim) !important; }
.kuro-ui-review-intro-stars::before { content: "★★★★★"; display: block; }
.kuro-ui-review-intro-stars-fill { position: absolute; inset: 0; width: 0; overflow: hidden; white-space: nowrap; letter-spacing: 2px; color: var(--kuro-ri-amber) !important; pointer-events: none; }
.kuro-ui-review-intro-stars-fill::before { content: "★★★★★"; display: block; }
.kuro-ui-review-intro-cta-wrap { margin: 16px 0 0; }
.kuro-ui-review-intro-cta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; box-sizing: border-box; padding: 22px 28px;
  background: linear-gradient(180deg, #d4b573 0%, #b8954f 100%) !important;
  border: 1px solid #8c7749 !important;
  border-radius: 8px; color: #1a1405 !important;
  font-family: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 22px; font-weight: 700; letter-spacing: 0.04em;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(200,169,106,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
  line-height: 1.3; text-align: center;
}
.kuro-ui-review-intro-cta:hover { background: linear-gradient(180deg, #e0c285 0%, #c4a258 100%) !important; color: #1a1405 !important; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(200,169,106,0.28), inset 0 1px 0 rgba(255,255,255,0.3); }
.kuro-ui-review-intro-cta:active { transform: translateY(0); }
.kuro-ui-review-intro-cta:focus-visible { outline: 2px solid var(--kuro-ri-amber) !important; outline-offset: 3px; }
.kuro-ui-review-intro-cta-text { flex: 1 1 auto; text-align: center; }
.kuro-ui-review-intro-cta-chevron { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #1a1405 !important; }
.kuro-ui-review-intro-cta-chevron svg { width: 100%; height: 100%; display: block; }
@media (max-width: 767px) {
  .kuro-ui-review-intro-fitcard { padding: 28px 20px 22px; }
  .kuro-ui-review-intro-fitgrid { grid-template-columns: 1fr; gap: 0; }
  .kuro-ui-review-intro-fitdivider { width: auto; height: 1px; margin: 22px 0; }
  .kuro-ui-review-intro-fitcol,
  .kuro-ui-review-intro-fitcol--fit,
  .kuro-ui-review-intro-fitcol--notfit { text-align: left; }
  .kuro-ui-review-intro-fittitle { text-align: left; font-size: 18px; margin-bottom: 14px; }
  .kuro-ui-review-intro-fitlist { display: block; }
  .kuro-ui-review-intro-ratings { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .kuro-ui-review-intro-score-block { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
  .kuro-ui-review-intro-score-label { flex: 1 1 100%; }
  .kuro-ui-review-intro-score-num { font-size: 13px; margin-left: auto; }
  .kuro-ui-review-intro-cta { font-size: 17px; padding: 18px; gap: 10px; letter-spacing: 0.02em; }
  .kuro-ui-review-intro-cta-chevron { width: 18px; height: 18px; }
  .kuro-ui-review-intro-tag { font-size: 13px; padding: 8px 14px; }
  .kuro-ui-review-intro-tags { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .kuro-ui-review-intro-cta, .kuro-ui-review-intro-tag { transition: none; }
}

/* --- VX-10: kuro-ui-top-hero (TOPページヒーロー) --- */
.kuro-ui-top-hero {
  --kh-bg-deep:    #07071a;
  --kh-bg-mid:     #0d1330;
  --kh-bg-edge:    #050511;
  --kh-glow:       rgba(255, 136, 60, 0.55);
  --kh-glow-soft:  rgba(255, 110, 40, 0.18);
  --kh-fg-1:       #f4f6fb;
  --kh-fg-2:       #aab2c8;
  --kh-fg-3:       #7f879b;
  --kh-gold:       #c8a96a;
  --kh-gold-hi:    #d9ba7b;
  --kh-gold-muted: rgba(200,169,106,0.45);
  --kh-border:     rgba(200,169,106,0.55);
  position: relative;
  overflow: hidden;
  padding: 96px 32px 112px;
  background:
    radial-gradient(120% 80% at 92% 38%, var(--kh-glow) 0%, var(--kh-glow-soft) 18%, transparent 42%),
    radial-gradient(140% 60% at 50% 118%, rgba(120, 60, 25, 0.45) 0%, transparent 55%),
    radial-gradient(120% 90% at 30% 25%, var(--kh-bg-mid) 0%, var(--kh-bg-deep) 60%, var(--kh-bg-edge) 100%);
  color: var(--kh-fg-1);
  isolation: isolate;
}
.kuro-ui-top-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.7;
  mix-blend-mode: overlay;
}
.kuro-ui-top-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(60,28,12,0.55) 60%, rgba(40,18,8,0.85) 100%);
}
.kuro-ui-top-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.kuro-ui-top-hero-kicker {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--kh-border) !important;
  border-radius: 999px;
  background: rgba(200,169,106,0.04) !important;
  color: var(--kh-gold) !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.kuro-ui-top-hero-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', serif;
  font-weight: 800;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--kh-fg-1) !important;
  margin: 0 0 24px;
  font-feature-settings: "palt" 1;
}
.kuro-ui-top-hero-title-line { display: block; }
.kuro-ui-top-hero-lead {
  max-width: 640px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--kh-fg-2) !important;
}
.kuro-ui-top-hero-rule {
  width: 56px;
  height: 2px;
  margin: 28px auto 32px;
  background: var(--kh-gold) !important;
  border: 0 !important;
}
.kuro-ui-top-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: 28px;
}
.kuro-ui-top-hero-cta {
  width: 100%;
  max-width: 520px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 28px;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition: transform 220ms cubic-bezier(0.22,0.61,0.36,1),
              background-color 220ms cubic-bezier(0.22,0.61,0.36,1),
              border-color 220ms cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 220ms cubic-bezier(0.22,0.61,0.36,1);
}
.kuro-ui-top-hero-cta-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kuro-ui-top-hero-cta-arrow svg { display: block; }
.kuro-ui-top-hero-cta--primary {
  background: var(--kh-gold) !important;
  color: #1a1405 !important;
  border: 1px solid var(--kh-gold) !important;
  box-shadow: 0 4px 16px rgba(200,169,106,0.22);
}
.kuro-ui-top-hero-cta--primary:hover {
  background: var(--kh-gold-hi) !important;
  border-color: var(--kh-gold-hi) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(200,169,106,0.32);
}
.kuro-ui-top-hero-cta--primary:active { transform: translateY(0); }
.kuro-ui-top-hero-cta--secondary {
  background: transparent !important;
  color: var(--kh-gold) !important;
  border: 1px solid var(--kh-border) !important;
}
.kuro-ui-top-hero-cta--secondary:hover {
  background: rgba(200,169,106,0.08) !important;
  border-color: var(--kh-gold) !important;
  color: var(--kh-gold-hi) !important;
  transform: translateY(-1px);
}
.kuro-ui-top-hero-cta--secondary:active { transform: translateY(0); }
.kuro-ui-top-hero-cta:focus-visible {
  outline: 2px solid var(--kh-gold-hi);
  outline-offset: 3px;
}
.kuro-ui-top-hero-meta {
  margin: 12px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: var(--kh-fg-3) !important;
  letter-spacing: 0.04em;
}
.kuro-ui-top-hero-meta-sep { color: var(--kh-fg-3) !important; margin: 0 10px; opacity: 0.6; }
@media (max-width: 767px) {
  .kuro-ui-top-hero { padding: 72px 20px 96px; }
  .kuro-ui-top-hero-kicker { height: 34px; padding: 0 16px; font-size: 12.5px; margin-bottom: 24px; }
  .kuro-ui-top-hero-title { font-size: clamp(38px, 9.5vw, 56px); line-height: 1.22; margin-bottom: 20px; }
  .kuro-ui-top-hero-lead { font-size: 14.5px; line-height: 1.9; max-width: 28em; }
  .kuro-ui-top-hero-rule { margin: 24px auto 28px; }
  .kuro-ui-top-hero-cta { height: 60px; font-size: 16px; padding: 0 24px; }
  .kuro-ui-top-hero-cta-arrow { right: 20px; }
  .kuro-ui-top-hero-meta { font-size: 12.5px; }
  .kuro-ui-top-hero-meta-sep { margin: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .kuro-ui-top-hero-cta { transition: none; }
  .kuro-ui-top-hero-cta:hover { transform: none; }
}



/* --- VX-10 fix: button label color (Cocoon override protection) --- */
.kuro-ui-top-hero-cta--primary .kuro-ui-top-hero-cta-label {
  color: #1a1405 !important;
}
.kuro-ui-top-hero-cta--secondary .kuro-ui-top-hero-cta-label {
  color: #c8a96a !important;
}
.kuro-ui-top-hero-cta--primary svg,
.kuro-ui-top-hero-cta--primary .kuro-ui-top-hero-cta-arrow {
  color: #1a1405 !important;
}

/* --- cat-card background image overlay --- */
.hr-cat-card {
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
}
.hr-cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 18, 0.50);
  z-index: 0;
}
.hr-cat-card__name,
.hr-cat-card__sub {
  position: relative;
  z-index: 1;
}


/* ============================================================
 * KURO UI ACETERNITY ENHANCEMENTS
 * 2026-04-30 | Aceternity/Magic UI 純CSS移植
 * - Moving Border (@property + conic-gradient) for rank card
 * - Shimmer sweep for FANZA CTA buttons
 * - prefers-reduced-motion ガード付き
 * ============================================================ */

/* --- @property で angle を CSS アニメーション可能にする --- */
@property --kuro-move-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* --- 回転アニメーション --- */
@keyframes kuro-border-spin {
  to { --kuro-move-angle: 360deg; }
}

/* --- shimmer sweep --- */
@keyframes kuro-shimmer {
  0%          { left: -100%; }
  40%, 100%   { left: 130%; }
}

/* ============================================================
 * 1. ランキング1位カード — Moving Border (Aceternity)
 * ============================================================ */

/* 既存の静的ボーダーを除去し、アニメーションボーダーに切り替え */
.kuro-ui-rank-card {
  border: none !important;
  isolation: isolate;
}

/* 外枠: 回転するコニックグラデーションボーダー */
.kuro-ui-rank-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  z-index: -2;
  background: conic-gradient(
    from var(--kuro-move-angle),
    #1a2040 0%,
    #1a2040 55%,
    #f5c451 68%,
    #c8a96a 75%,
    #f5c451 82%,
    #1a2040 92%,
    #1a2040 100%
  );
  animation: kuro-border-spin 5s linear infinite;
}

/* 内側: カード背景色で塗り潰して「枠だけ光る」演出 */
.kuro-ui-rank-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 9px;
  background: #13162b !important;
  z-index: -1;
}

/* ============================================================
 * 2. ランキング1位カード CTA — Shimmer (Magic UI)
 * ============================================================ */

.kuro-ui-rank-card__cta {
  position: relative !important;
  overflow: hidden !important;
}

.kuro-ui-rank-card__cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  transform: skewX(-22deg);
  animation: kuro-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* ============================================================
 * 3. FANZA CTA ボタン群 — Shimmer (Magic UI)
 * ============================================================ */

.kuro-ui-cta-btn {
  position: relative !important;
  overflow: hidden !important;
}

.kuro-ui-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-22deg);
  animation: kuro-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* shimmer の遅延でバリアントごとにズラす */
.kuro-ui-cta-btn:nth-child(2)::before { animation-delay: 0.8s; }
.kuro-ui-cta-btn:nth-child(3)::before { animation-delay: 1.6s; }

/* ============================================================
 * 4. Mood Selector カード — Hover glow (Aceternity)
 * ============================================================ */

.kuro-ui-mood-card {
  transition:
    box-shadow 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.kuro-ui-mood-card:hover {
  box-shadow:
    0 0 0 1px rgba(200, 169, 106, 0.45),
    0 8px 32px rgba(200, 169, 106, 0.18) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
 * 5. セール刈り取りカード — 左縁アクセントパルス
 * ============================================================ */

@keyframes kuro-pulse-border {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

.kuro-ui-sale-card {
  border-left-width: 3px !important;
  border-left-style: solid !important;
  border-left-color: #f5c451 !important;
  animation: kuro-pulse-border 2.5s ease-in-out infinite;
}

/* ============================================================
 * 6. reduced-motion — アニメーション全停止
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .kuro-ui-rank-card::before,
  .kuro-ui-rank-card__cta::before,
  .kuro-ui-cta-btn::before {
    animation: none !important;
  }
  .kuro-ui-rank-card {
    border: 1px solid #2c3155 !important;
  }
  .kuro-ui-rank-card::before {
    background: none !important;
    inset: 0;
    border-radius: 10px;
  }
  .kuro-ui-mood-card:hover {
    transform: none !important;
  }
  .kuro-ui-sale-card {
    animation: none !important;
  }
}

/* === END KURO UI ACETERNITY === */

/* --- kuro-ui-hub-card (ランキングハブ・ナビページ) --- */
.kuro-ui-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  margin: 20px 0 32px;
}
.kuro-ui-hub-card {
  display: block;
  padding: 18px 22px;
  background: #13162b !important;
  border: 1px solid #2c3155 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #f4f6fb !important;
  transition: border-color .25s, transform .2s, box-shadow .25s;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.kuro-ui-hub-card:hover {
  border-color: #c8a96a !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  text-decoration: none !important;
}
.kuro-ui-hub-card__label {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c8a96a !important;
  border: 1px solid rgba(200,169,106,.35);
  border-radius: 3px;
  padding: 2px 7px;
  margin-bottom: 8px;
}
.kuro-ui-hub-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #f4f6fb !important;
  margin: 0 0 7px;
  line-height: 1.45;
}
.kuro-ui-hub-card__desc {
  font-size: 12px;
  color: #aab2c8 !important;
  line-height: 1.65;
  margin: 0 0 10px;
}
.kuro-ui-hub-card__arrow {
  font-size: 11px;
  color: #c8a96a !important;
  font-weight: 700;
}

/* --- kuro-ui-hit-card (/weekly-hit/ /sale-picks/ 記事導線カード) --- */
.kuro-ui-hit-card {
  max-width: 720px;
  margin: 20px auto !important;
  padding: 22px 26px !important;
  background: #13162b !important;
  border: 1px solid #2c3155 !important;
  border-radius: 10px !important;
  color: #f4f6fb !important;
  font-family: "Noto Sans JP","Hiragino Sans",sans-serif;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  transition: border-color .25s;
}
.kuro-ui-hit-card:hover { border-color: #c8a96a !important; }
.kuro-ui-hit-card__rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: #c8a96a;
  color: #1a1405;
  font-size: 12px;
  font-weight: 900;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.kuro-ui-hit-card__genre {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #c8a96a !important;
  border: 1px solid rgba(200,169,106,.35);
  border-radius: 3px;
  padding: 2px 7px;
  vertical-align: middle;
}
.kuro-ui-hit-card__title {
  font-size: 16px;
  font-weight: 800;
  color: #f4f6fb !important;
  margin: 10px 0 8px;
  line-height: 1.45;
}
.kuro-ui-hit-card__for {
  font-size: 12px;
  color: #7f879b !important;
  margin-bottom: 10px;
}
.kuro-ui-hit-card__note {
  font-size: 13px;
  color: #aab2c8 !important;
  background: #1b2040;
  border-left: 3px solid #c8a96a;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin: 10px 0 14px;
  line-height: 1.65;
}
.kuro-ui-hit-card__note-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #c8a96a !important;
  margin-bottom: 4px;
}
.kuro-ui-hit-card__link {
  display: inline-block;
  padding: 9px 20px;
  background: #1b2040;
  border: 1px solid #2c3155;
  border-radius: 6px;
  color: #c8a96a !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: border-color .2s, background .2s;
}
.kuro-ui-hit-card__link:hover {
  border-color: #c8a96a;
  background: #221e0e;
  text-decoration: none !important;
}

/* --- kuro-ui-criteria-section (/kuro-criteria/ ページ) --- */
.kuro-ui-criteria-section {
  max-width: 720px;
  margin: 0 auto 24px !important;
  padding: 22px 26px !important;
  background: #13162b !important;
  border: 1px solid #2c3155 !important;
  border-radius: 10px !important;
  color: #f4f6fb !important;
  font-family: "Noto Sans JP","Hiragino Sans",sans-serif;
}
.kuro-ui-criteria-section__num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #c8a96a !important;
  margin-bottom: 5px;
}
.kuro-ui-criteria-section__title {
  font-size: 16px;
  font-weight: 800;
  color: #f4f6fb !important;
  margin: 0 0 10px;
}
.kuro-ui-criteria-section__body {
  font-size: 13px;
  color: #aab2c8 !important;
  line-height: 1.75;
  margin: 0;
}
.kuro-ui-criteria-divider {
  max-width: 720px;
  margin: 28px auto;
  border: none;
  border-top: 1px solid #2c3155;
}

/* --- kuro-ui-email-form (opt-in フォーム・プレースホルダー) --- */
.kuro-ui-email-form {
  max-width: 720px;
  margin: 32px auto !important;
  padding: 28px 32px !important;
  background: #1b2040 !important;
  border: 1px solid #2c3155 !important;
  border-radius: 12px !important;
  color: #f4f6fb !important;
  font-family: "Noto Sans JP","Hiragino Sans",sans-serif;
  text-align: center;
}
.kuro-ui-email-form__title {
  font-size: 18px;
  font-weight: 800;
  color: #f4f6fb !important;
  margin: 0 0 8px;
}
.kuro-ui-email-form__desc {
  font-size: 13px;
  color: #aab2c8 !important;
  line-height: 1.65;
  margin: 0 0 20px;
}
.kuro-ui-email-form__legal {
  font-size: 11px;
  color: #7f879b !important;
  margin-top: 12px;
  line-height: 1.5;
}


/* === SPRINT NAV (TOP page 4-page navigation) === */
.kuro-ui-sprint-nav {
  max-width: 860px !important;
  margin: 0 auto 32px !important;
  padding: 20px 20px 16px !important;
  background: #0f1228 !important;
  border: 1px solid #2c3155 !important;
  border-radius: 12px !important;
}
.kuro-ui-sprint-nav__label {
  font-size: 11px !important;
  color: #8a8fb5 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 12px !important;
  font-weight: 600 !important;
}
.kuro-ui-sprint-nav__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
@media (max-width: 600px) {
  .kuro-ui-sprint-nav__grid {
    grid-template-columns: 1fr !important;
  }
}
.kuro-ui-sprint-nav__card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: #13162b !important;
  border: 1px solid #2c3155 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: border-color 0.2s, background 0.2s !important;
  cursor: pointer !important;
}
.kuro-ui-sprint-nav__card:hover {
  border-color: #c8a96a !important;
  background: #1a1e3a !important;
  text-decoration: none !important;
}
.kuro-ui-sprint-nav__card--urgent {
  border-color: #8b2020 !important;
  background: #1a1020 !important;
}
.kuro-ui-sprint-nav__card--urgent:hover {
  border-color: #e05555 !important;
  background: #221228 !important;
}
.kuro-ui-sprint-nav__icon {
  font-size: 18px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.kuro-ui-sprint-nav__title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #e8eaf8 !important;
  line-height: 1.4 !important;
  margin-bottom: 2px !important;
}
.kuro-ui-sprint-nav__desc {
  display: block !important;
  font-size: 11px !important;
  color: #7a80a0 !important;
  line-height: 1.3 !important;
}
/* === END SPRINT NAV === */


/* === PRODUCT CARD (upgrade_product_cards.py で生成される個別作品カード) === */
.kuro-ui-product-card {
  position: relative !important;
  max-width: 720px !important;
  margin: 24px auto !important;
  padding: 20px !important;
  background: #13162b !important;
  border: 1px solid #2c3155 !important;
  border-radius: 10px !important;
  color: #f4f6fb !important;
}
.kuro-ui-product-card__rank {
  position: absolute !important;
  top: -12px !important; left: 16px !important;
  width: 28px !important; height: 28px !important;
  background: #c8a96a !important;
  color: #0d0f1f !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.kuro-ui-product-card__sale-badge {
  display: inline-block !important;
  background: #8b2020 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  margin-bottom: 10px !important;
}
.kuro-ui-product-card__body {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}
.kuro-ui-product-card__img-col {
  flex-shrink: 0 !important;
}
.kuro-ui-product-card__img {
  width: 110px !important;
  height: auto !important;
  border-radius: 4px !important;
  display: block !important;
}
.kuro-ui-product-card__info {
  flex: 1 !important;
  min-width: 0 !important;
}
.kuro-ui-product-card__genre {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #c8a96a !important;
  border: 1px solid #c8a96a !important;
  padding: 1px 6px !important;
  border-radius: 2px !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.05em !important;
}
.kuro-ui-product-card__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f0f2ff !important;
  line-height: 1.4 !important;
  margin: 0 0 6px !important;
}
.kuro-ui-product-card__target {
  font-size: 12px !important;
  color: #9da3c8 !important;
  margin: 0 0 10px !important;
}
.kuro-ui-product-card__note {
  background: #1b2040 !important;
  border-left: 3px solid #c8a96a !important;
  padding: 8px 12px !important;
  border-radius: 0 6px 6px 0 !important;
  margin-bottom: 12px !important;
}
.kuro-ui-product-card__note-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #c8a96a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
}
.kuro-ui-product-card__note-body {
  font-size: 12px !important;
  color: #cdd0e8 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.kuro-ui-product-card__why-now {
  font-size: 11px !important;
  color: #8a8fb5 !important;
  font-style: italic !important;
  margin: 0 0 10px !important;
}
.kuro-ui-product-card__cta {
  display: block !important;
  text-align: center !important;
  background: #c8a96a !important;
  color: #0d0f1f !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  margin-bottom: 6px !important;
  transition: background 0.2s !important;
}
.kuro-ui-product-card__cta:hover {
  background: #e0bf80 !important;
  text-decoration: none !important;
}
.kuro-ui-product-card__pr {
  font-size: 10px !important;
  color: #666a8a !important;
  text-align: center !important;
  margin: 0 !important;
}
@media (max-width: 540px) {
  .kuro-ui-product-card__body {
    flex-direction: column !important;
  }
  .kuro-ui-product-card__img {
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto !important;
  }
}
/* === END PRODUCT CARD === */

/* === KURO UI END === */


/* === KURO UI EFFECTS START === */
/* Aceternity/Magic UI 抽出版（純CSS / Framer Motion不要） */

/* prefers-reduced-motion 共通停止 */
@media (prefers-reduced-motion: reduce) {
  .kuro-ui-aurora,
  .kuro-ui-aurora::before,
  .kuro-ui-shimmer-cta::before,
  .kuro-ui-gradient-text,
  .kuro-ui-moving-border::before {
    animation: none !important;
  }
}

/* ① Aurora Background — TOP Hero 背景 */
.kuro-ui-aurora {
  position: relative;
  overflow: hidden;
  background: #0b0518;
}
.kuro-ui-aurora::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.35), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(236, 72, 153, 0.30), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.25), transparent 60%);
  filter: blur(40px);
  animation: kuro-aurora-shift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.kuro-ui-aurora > * { position: relative; z-index: 1; }
@keyframes kuro-aurora-shift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(8%, -6%) rotate(15deg); }
  100% { transform: translate(-6%, 8%) rotate(-10deg); }
}

/* ② Shimmer Button — FANZA確認CTA / セールCTA */
.kuro-ui-shimmer-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.kuro-ui-shimmer-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: kuro-shimmer 3.2s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
.kuro-ui-shimmer-cta > * { position: relative; z-index: 2; }
@keyframes kuro-shimmer {
  0%   { left: -75%; }
  60%  { left: 125%; }
  100% { left: 125%; }
}

/* ③ Animated Gradient Text — Hero見出し */
.kuro-ui-gradient-text {
  background: linear-gradient(
    90deg,
    #e9d5ff 0%,
    #f0abfc 25%,
    #fda4af 50%,
    #f0abfc 75%,
    #e9d5ff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: kuro-gradient-pan 8s linear infinite;
}
@keyframes kuro-gradient-pan {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ④ Moving Border — ランキング1位カード強調 */
.kuro-ui-moving-border {
  position: relative;
  border-radius: 14px;
  background: #0b0518;
  z-index: 0;
}
.kuro-ui-moving-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 70%,
    #c084fc 85%,
    #f472b6 92%,
    #c084fc 100%
  );
  animation: kuro-border-spin 4s linear infinite;
  z-index: -1;
}
.kuro-ui-moving-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
}
@keyframes kuro-border-spin {
  to { transform: rotate(360deg); }
}

/* === KURO UI EFFECTS END === */


/* === KURO UI BINDINGS START === */
/* シマーCTA + 1位カード光るボーダー（グラデーションテキストは破綻のため削除） */

/* CTAボタン → シマー */
.hr-winner-cta__link,
.hr-monthly-pick__cta,
.hr-btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hr-winner-cta__link::before,
.hr-monthly-pick__cta::before,
.hr-btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: kuro-shimmer 3.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
.hr-winner-cta__link > *,
.hr-monthly-pick__cta > *,
.hr-btn--primary > * {
  position: relative;
  z-index: 2;
}

/* ランキング1位行 → 控えめなムービングボーダー */
.hr-genre-rank__list .hr-genre-rank__row:first-child {
  position: relative;
}
.hr-genre-rank__list .hr-genre-rank__row:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(192, 132, 252, 0.0) 30%,
    rgba(244, 114, 182, 0.20) 50%,
    rgba(192, 132, 252, 0.0) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: kuro-shimmer 5s ease-in-out infinite;
  mix-blend-mode: screen;
  width: 50%;
  left: -75%;
  height: 100%;
}

/* prefers-reduced-motion 停止 */
@media (prefers-reduced-motion: reduce) {
  .hr-winner-cta__link::before,
  .hr-monthly-pick__cta::before,
  .hr-btn--primary::before,
  .hr-genre-rank__list .hr-genre-rank__row:first-child::after {
    animation: none !important;
  }
}
/* === KURO UI BINDINGS END === */


/* === CONTRAST FIX START === */
/* LINE CTAボタン: 明るい緑背景(#06c755)に白テキスト=2.2:1 → 暗緑で5.5:1に修正 */
.hr-line-cta__btn {
  color: #003d17 !important;
}
.hr-line-cta__btn:hover {
  color: #003d17 !important;
}

/* LINE CTAラベル: #00a040 on #f0fff5 = 3.33:1 → 8.15:1に修正 */
.hr-line-cta__label {
  color: #005a28 !important;
}

/* kuro-ui-top-hero-cta--primary: Cocoon親がaタグにgold色を当てるため保険 */
.kuro-ui-top-hero-cta--primary,
.kuro-ui-top-hero-cta--primary:link,
.kuro-ui-top-hero-cta--primary:visited,
.kuro-ui-top-hero-cta--primary:hover,
.kuro-ui-top-hero-cta--primary:focus {
  color: #0b0518 !important;
}

/* === CTA COLOR FIX: Cocoon gold link override 対策 ===
   .kuro-ui-rank-card__cta は <a> タグ → Cocoon が :link/:visited で gold を注入
   より高specificity (2class + pseudo) で上書き */
.kuro-ui-rank-card .kuro-ui-rank-card__cta,
.kuro-ui-rank-card .kuro-ui-rank-card__cta:link,
.kuro-ui-rank-card .kuro-ui-rank-card__cta:visited,
.kuro-ui-rank-card .kuro-ui-rank-card__cta:hover,
.kuro-ui-rank-card .kuro-ui-rank-card__cta:focus {
  color: #13162b !important;
}


/* === CTA COLOR SUPER FIX: specificity (0,5,1) > Cocoon entry-content a:not() の (0,4,1) ===
   Cocoon functions.php が .entry-content a:not(.rf-cta):not(.rf-cta-block):not(.hr-btn-cta)
   に color:var(--hr-gold) !important を設定するため、同じ or 高い specificity が必要 */
.entry-content .kuro-ui-rank-card a.kuro-ui-rank-card__cta:not(.rf-cta):not(.rf-cta-block),
.entry-content .kuro-ui-rank-card a.kuro-ui-rank-card__cta:link:not(.rf-cta),
.entry-content .kuro-ui-rank-card a.kuro-ui-rank-card__cta:visited:not(.rf-cta),
.entry-content .kuro-ui-rank-card a.kuro-ui-rank-card__cta:hover:not(.rf-cta),
.entry-content .kuro-ui-rank-card a.kuro-ui-rank-card__cta:focus:not(.rf-cta) {
  color: #13162b !important;
  text-decoration: none !important;
}


/* === kuro-ui-cta-btn COLOR FIX: (0,5,1) Cocoon override 対策 === */
.entry-content .kuro-ui-cta-stack a.kuro-ui-cta-btn:not(.rf-cta):not(.rf-cta-block),
.entry-content .kuro-ui-cta-stack a.kuro-ui-cta-btn:link:not(.rf-cta),
.entry-content .kuro-ui-cta-stack a.kuro-ui-cta-btn:visited:not(.rf-cta),
.entry-content .kuro-ui-cta-stack a.kuro-ui-cta-btn:hover:not(.rf-cta),
.entry-content .kuro-ui-cta-stack a.kuro-ui-cta-btn:focus:not(.rf-cta) {
  color: #13162b !important;
  text-decoration: none !important;
}


/* === kuro-ui-cta-btn--sample: outline button on dark bg → gold text === */
/* アウトラインボタンは背景なし: 暗背景に暗文字で不可視になるため gold に変更 */
.kuro-ui-cta-btn--sample {
  color: #c8a96a !important;
  background: transparent !important;
}
.kuro-ui-cta-btn--sample:hover,
.kuro-ui-cta-btn--sample:focus {
  color: #f5c451 !important;
  background: rgba(200, 169, 106, 0.08) !important;
}
/* Cocoon override も押さえる (0,5,1) */
.entry-content .kuro-ui-cta-stack a.kuro-ui-cta-btn--sample:not(.rf-cta),
.entry-content .kuro-ui-cta-stack a.kuro-ui-cta-btn--sample:link:not(.rf-cta),
.entry-content .kuro-ui-cta-stack a.kuro-ui-cta-btn--sample:visited:not(.rf-cta),
.entry-content .kuro-ui-cta-stack a.kuro-ui-cta-btn--sample:hover:not(.rf-cta) {
  color: #c8a96a !important;
}


/* === kuro-ui-sale-card__cta COLOR FIX: (0,5,1) ===
   sale card の main CTA も Cocoon gold override を受けるため対策 */
.entry-content .kuro-ui-sale-card a.kuro-ui-sale-card__cta:not(.rf-cta):not(.rf-cta-block),
.entry-content .kuro-ui-sale-card a.kuro-ui-sale-card__cta:link:not(.rf-cta),
.entry-content .kuro-ui-sale-card a.kuro-ui-sale-card__cta:visited:not(.rf-cta),
.entry-content .kuro-ui-sale-card a.kuro-ui-sale-card__cta:hover:not(.rf-cta),
.entry-content .kuro-ui-sale-card a.kuro-ui-sale-card__cta:focus:not(.rf-cta) {
  color: #13162b !important;
  text-decoration: none !important;
}


/* === LINE revisit block text fix: gold on green = 1:1 → white on green === */
.kuro-ui-revisit-btn--line .kuro-ui-revisit-text,
.kuro-ui-revisit-btn--line .kuro-ui-revisit-label,
.kuro-ui-revisit-btn--line span {
  color: #ffffff !important;
}
/* Cocoon gold override 対策 */
.entry-content .kuro-ui-revisit a.kuro-ui-revisit-btn--line:not(.rf-cta),
.entry-content .kuro-ui-revisit a.kuro-ui-revisit-btn--line:link:not(.rf-cta),
.entry-content .kuro-ui-revisit a.kuro-ui-revisit-btn--line:visited:not(.rf-cta),
.entry-content .kuro-ui-revisit a.kuro-ui-revisit-btn--line:hover:not(.rf-cta) {
  color: #ffffff !important;
}

/* === CONTRAST FIX END === */

/* === KURO UI START :: cta-color-fix === */
/* Fix: Cocoon .entry-content a overrides rank-card CTA text color */
.entry-content .kuro-ui-rank-card__cta,
.entry-content .kuro-ui-rank-card__cta:link,
.entry-content .kuro-ui-rank-card__cta:visited,
.entry-content .kuro-ui-rank-card__cta:hover,
.entry-content .kuro-ui-rank-card__cta:active,
.kuro-ui-rank-card__cta,
.kuro-ui-rank-card__cta:link,
.kuro-ui-rank-card__cta:visited,
.kuro-ui-rank-card__cta:hover,
.kuro-ui-rank-card__cta:active {
  color: #13162b !important;
  text-decoration: none !important;
}
.kuro-ui-rank-card__cta-arrow {
  color: #13162b !important;
}
/* === KURO UI END :: cta-color-fix === */

/* === KURO UI START :: line-cta-redesign === */
.hr-line-cta {
  margin: 1.5em 0;
  padding: 0.9em 1.2em;
  background: #0d1117 !important;
  border: 2px solid #06c755 !important;
  border-radius: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hr-line-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #06c755, transparent);
}
.hr-line-cta p,
.hr-line-cta .hr-line-cta__text {
  color: #e8e8e8 !important;
  margin: 0 0 0.5em !important;
  font-size: 0.9em;
  line-height: 1.5;
}
.hr-line-cta a,
.hr-line-cta .hr-line-cta__btn {
  display: inline-block;
  background: #06c755 !important;
  color: #fff !important;
  font-weight: 700;
  padding: 0.55em 1.4em;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 0.95em;
  transition: opacity 0.2s;
}
.hr-line-cta a:hover,
.hr-line-cta .hr-line-cta__btn:hover {
  opacity: 0.85;
  color: #fff !important;
}
/* === KURO UI END :: line-cta-redesign === */

/* === KURO UI START :: shimmer-cta-text === */
/* Ensure shimmer CTA text is always readable */
a.kuro-ui-shimmer-cta,
a.kuro-ui-shimmer-cta:link,
a.kuro-ui-shimmer-cta:visited,
a.kuro-ui-shimmer-cta:hover,
a.kuro-ui-shimmer-cta:active {
  color: #13162b !important;
  text-decoration: none !important;
}
/* === KURO UI END :: shimmer-cta-text === */

/* ================================================================
   KURO UI START :: gehin-redesign
   「下品」刷新 — 攻め型アダルトサイトUI
   お高く留まりすぎ → もっと生々しく、直接的に
   ================================================================ */

/* ---------- ランクカード: 全体 ---------- */
.kuro-ui-rank-card {
  background: #0e0010 !important;
  border: 2px solid #cc1140 !important;
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(204,17,64,0.35), inset 0 0 30px rgba(204,17,64,0.04) !important;
  overflow: hidden;
  position: relative;
}
.kuro-ui-rank-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff0040, #ff6b9e, #ff0040);
  background-size: 200% 100%;
  animation: kuro-border-slide 2.5s linear infinite;
}
@keyframes kuro-border-slide {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ---------- バッジ ---------- */
.kuro-ui-rank-card__badge {
  background: linear-gradient(135deg, #cc1140 0%, #7b0028 100%) !important;
  border: none !important;
  border-radius: 4px;
  padding: 0.25em 0.75em !important;
  box-shadow: 0 2px 8px rgba(204,17,64,0.5);
}
.kuro-ui-rank-card__badge-rank {
  color: #fff !important;
  font-size: 0.8em !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* ---------- PRラベル ---------- */
.kuro-ui-rank-card__pr {
  background: #cc1140 !important;
  color: #fff !important;
  font-size: 0.7em !important;
  font-weight: 700;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

/* ---------- タグ ---------- */
.kuro-ui-rank-card__tag {
  background: rgba(204,17,64,0.18) !important;
  border: 1px solid rgba(204,17,64,0.5) !important;
  color: #ff6b9e !important;
  border-radius: 3px;
  font-size: 0.75em !important;
  padding: 0.15em 0.6em !important;
  font-weight: 600;
}

/* ---------- ヘッドライン ---------- */
.kuro-ui-rank-card__headline {
  color: #fff !important;
  font-size: 1.15em !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.kuro-ui-rank-card__sub {
  color: #c0b0b8 !important;
  font-size: 0.87em !important;
  line-height: 1.6;
}

/* ---------- Keep/Cut 列 ---------- */
.kuro-ui-rank-card__col-title--keep {
  color: #ff6b9e !important;
  font-weight: 700 !important;
  font-size: 0.82em !important;
  letter-spacing: 0.05em;
  text-transform: none;
}
.kuro-ui-rank-card__col-title--cut {
  color: #888 !important;
  font-weight: 700 !important;
  font-size: 0.82em !important;
}
.kuro-ui-rank-card__list--keep li::before {
  content: '◆ ';
  color: #ff6b9e;
  font-size: 0.7em;
}
.kuro-ui-rank-card__list--cut li::before {
  content: '✕ ';
  color: #666;
  font-size: 0.7em;
}
.kuro-ui-rank-card__list li {
  color: #ddd !important;
  font-size: 0.85em !important;
  line-height: 1.55;
}

/* ---------- チップ ---------- */
.kuro-ui-rank-card__chip {
  background: rgba(255,107,158,0.12) !important;
  border: 1px solid rgba(255,107,158,0.35) !important;
  color: #ff6b9e !important;
  font-size: 0.72em !important;
  padding: 0.15em 0.6em !important;
  border-radius: 3px;
}

/* ---------- CTAボタン: 完全リデザイン ---------- */
.kuro-ui-rank-card__cta,
.kuro-ui-shimmer-cta,
.entry-content .kuro-ui-rank-card__cta,
.entry-content .kuro-ui-rank-card__cta:link,
.entry-content .kuro-ui-rank-card__cta:visited,
.entry-content .kuro-ui-rank-card__cta:hover,
.entry-content .kuro-ui-rank-card__cta:active,
a.kuro-ui-rank-card__cta,
a.kuro-ui-shimmer-cta {
  display: block !important;
  background: linear-gradient(135deg, #e8003d 0%, #b50030 60%, #7b0028 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1em !important;
  letter-spacing: 0.04em;
  text-align: center !important;
  padding: 0.85em 1.2em !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(232,0,61,0.45) !important;
  transition: box-shadow 0.2s, transform 0.15s;
  border: none !important;
  position: relative;
  overflow: hidden;
}
.kuro-ui-rank-card__cta::after,
.kuro-ui-shimmer-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: kuro-shimmer 2.2s ease-in-out infinite;
}
@keyframes kuro-shimmer {
  0%   { left: -100%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}
.kuro-ui-rank-card__cta:hover,
.kuro-ui-shimmer-cta:hover,
.entry-content .kuro-ui-rank-card__cta:hover {
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 6px 24px rgba(232,0,61,0.65) !important;
  transform: translateY(-1px);
}
.kuro-ui-rank-card__cta-arrow {
  color: #fff !important;
  margin-right: 0.4em;
  font-size: 1.1em;
}

/* ---------- PR disclosure ---------- */
.kuro-ui-rank-card__pr-disclosure {
  color: #555 !important;
  font-size: 0.72em !important;
  text-align: center;
  padding: 0.3em 0 0.5em !important;
}

/* ---------- カテゴリバー: 攻め型 ---------- */
.hr-cat-card {
  background: linear-gradient(180deg, #1a0010 0%, #0d0008 100%) !important;
  border: 1px solid rgba(204,17,64,0.4) !important;
  border-radius: 8px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hr-cat-card:hover {
  border-color: #cc1140 !important;
  box-shadow: 0 0 12px rgba(204,17,64,0.3) !important;
}
.hr-cat-card .hr-cat-card__icon {
  font-size: 1.6em;
}
.hr-cat-card .hr-cat-card__label {
  color: #ff6b9e !important;
  font-weight: 700 !important;
  font-size: 0.85em !important;
}
.hr-cat-card .hr-cat-card__desc {
  color: #aaa !important;
  font-size: 0.75em !important;
}

/* ---------- ヒーローエリア: より挑発的 ---------- */
.hr-hero {
  border-bottom: 3px solid #cc1140 !important;
}
.hr-hero__title {
  text-shadow: 0 0 30px rgba(255,0,64,0.4) !important;
}
.hr-hero .kuro-ui-shimmer-cta,
.hr-hero a.kuro-ui-rank-card__cta {
  background: linear-gradient(135deg, #e8003d 0%, #b50030 100%) !important;
  font-size: 1.05em !important;
  padding: 0.9em 1.5em !important;
  box-shadow: 0 4px 20px rgba(232,0,61,0.5) !important;
}

/* ---------- 比較テーブル heading ---------- */
.rf-compare__title,
.hr-compare-heading {
  color: #ff6b9e !important;
  border-left: 3px solid #cc1140 !important;
}

/* ---------- sale刈り取りカード ---------- */
.hr-sale-card,
.rf-sale-card {
  background: linear-gradient(180deg, #1a0010 0%, #0a0006 100%) !important;
  border: 1px solid rgba(204,17,64,0.5) !important;
  border-radius: 8px;
}
.hr-sale-card__badge,
.rf-sale-card__badge {
  background: #cc1140 !important;
  color: #fff !important;
}

/* ---------- スクロールバー (webkit) ---------- */
::-webkit-scrollbar-thumb {
  background: #cc1140 !important;
}
::-webkit-scrollbar-track {
  background: #0a0006 !important;
}

/* ---------- アンカー色 調整（記事内リンク系）---------- */
.kuro-ui-rank-card a,
.kuro-ui-rank-card a:link,
.kuro-ui-rank-card a:visited {
  color: #ff6b9e !important;
}

/* ================================================================
   KURO UI END :: gehin-redesign
   ================================================================ */

/* === KURO UI START :: hero-bg-images === */
.kuro-ui-top-hero {
  position: relative;
  overflow: hidden;
}
.kuro-ui-top-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.kuro-ui-top-hero-bg-img {
  position: absolute;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.55;
  filter: brightness(0.65) saturate(0.85);
  will-change: transform;
}
/* 左上 */
.kuro-ui-top-hero-bg-img--l1 {
  top: 0; left: 0;
  width: 24%; height: 52%;
  -webkit-mask-image:
    linear-gradient(to right, black 0%, black 50%, transparent 100%),
    linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* 左下 */
.kuro-ui-top-hero-bg-img--l2 {
  bottom: 0; left: 0;
  width: 24%; height: 52%;
  -webkit-mask-image:
    linear-gradient(to right, black 0%, black 50%, transparent 100%),
    linear-gradient(to top, black 0%, black 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* 右上 */
.kuro-ui-top-hero-bg-img--r1 {
  top: 0; right: 0;
  width: 24%; height: 52%;
  -webkit-mask-image:
    linear-gradient(to left, black 0%, black 50%, transparent 100%),
    linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* 右下 */
.kuro-ui-top-hero-bg-img--r2 {
  bottom: 0; right: 0;
  width: 24%; height: 52%;
  -webkit-mask-image:
    linear-gradient(to left, black 0%, black 50%, transparent 100%),
    linear-gradient(to top, black 0%, black 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.kuro-ui-top-hero-inner {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .kuro-ui-top-hero-bg-img { opacity: 0.3; }
  .kuro-ui-top-hero-bg-img--l1, .kuro-ui-top-hero-bg-img--l2 { width: 18%; }
  .kuro-ui-top-hero-bg-img--r1, .kuro-ui-top-hero-bg-img--r2 { width: 18%; }
}
/* === KURO UI END :: hero-bg-images === */


/* === UI修正 2026-05-01 ================================================= */

/* [1] ランキングタイトル: 2行カット → 3行に拡張 + フォントサイズアップ */
.hr-genre-rank__title {
  -webkit-line-clamp: 3 !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}
@media (max-width: 600px) {
  .hr-genre-rank__title {
    font-size: 15px !important;
    -webkit-line-clamp: 3 !important;
  }
}

/* [2] CTAブロック内注記テキストが横に被さってクリック不可になる問題を修正
   rf-cta-block--intro を縦積みにして、注記テキストをボタンの下に配置 */
.rf-cta-block--intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 24px auto !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.rf-cta-block--intro .rf-cta,
.rf-cta-block--intro a.rf-cta {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 13px 20px !important;
  background: var(--hr-cta-gradient) !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
.rf-cta-note {
  font-size: 11px !important;
  color: #7f879b !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* [3] Hub Hero CTA（黄金ボタン）: Cocoonが文字色を金色上書きするのを阻止 */
.kuro-ui-hub-hero-cta,
.kuro-ui-hub-hero-cta:link,
.kuro-ui-hub-hero-cta:visited,
.kuro-ui-hub-hero-cta:hover,
.kuro-ui-hub-hero-cta:focus {
  color: #0b0518 !important;
}
.kuro-ui-hub-hero-cta-label {
  color: #0b0518 !important;
}

/* [4] Sale Card 確認ボタン文字色強制（黄金背景に暗色テキスト） */
.kuro-ui-sale-card__cta-btn,
.kuro-ui-sale-card__cta-btn:link,
.kuro-ui-sale-card__cta-btn:visited,
.kuro-ui-sale-card__cta-btn:hover {
  color: #1a1405 !important;
}

/* [5] カテゴリバー(cat-card)タイトル: 小さすぎるフォントをアップ */
.hr-cat-card__name {
  font-size: 16px !important;
  line-height: 1.45 !important;
}
.hr-cat-card__sub {
  font-size: 12px !important;
}

/* === UI修正 END =========================================================== */







/* === TOP-PAGE-OVERRIDE START === */


/* ═══════════════════════════════════════════════════════════════
   TOP PAGE (page-id-823) 専用上書き v4（最終版）
   ═══════════════════════════════════════════════════════════════ */

/* entry-header / article-header 非表示 */
.page-id-823 .entry-header,
.page-id-823 .article-header {
  display: none !important;
}

/* Cocoon TOC（目次）非表示 */
.page-id-823 .toc,
.page-id-823 #toc_container,
.page-id-823 #ez-toc-container,
.page-id-823 .ez-toc-container,
.page-id-823 [id^="ez-toc-"] {
  display: none !important;
}

/* hr-crawl-hub（全200記事一覧・5000px超）非表示 */
.page-id-823 .hr-crawl-hub {
  display: none !important;
}

/* SNSシェアボタン / 投稿日 / パンくず 非表示 */
.page-id-823 .sns-buttons,
.page-id-823 .sns-share-buttons,
.page-id-823 .entry-share,
.page-id-823 .share-buttons-block,
.page-id-823 .entry-footer .share-title,
.page-id-823 .entry-footer .sns-buttons,
.page-id-823 .post-date,
.page-id-823 .post-update-date,
.page-id-823 .entry-date,
.page-id-823 time,
.page-id-823 .breadcrumb-wrapper,
.page-id-823 #breadcrumb {
  display: none !important;
}

/* entry-content 最大幅解除・上余白除去 */
.page-id-823 #content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.page-id-823 .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* hr-hero: フルビューポート幅に強制 */
.page-id-823 .hr-hero {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  box-sizing: border-box !important;
}

/* サイドバー: TOPページでは非表示 */
.page-id-823 #sidebar { display: none !important; }
.page-id-823 #wrap { max-width: 100% !important; }
.page-id-823 #container { max-width: 100% !important; padding: 0 !important; }

/* VR grid: 4列定義を2列に上書き（2つの列しかないため） */
.page-id-823 .hr-top-genre__grid {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* section-head: 上paddingを縮める（56px→32px） */
.page-id-823 .hr-section-head {
  padding-top: 32px !important;
}

/* カテゴリカード: コンパクト化 */
.page-id-823 .hr-cat-card {
  min-height: 140px !important;
}
.page-id-823 .hr-cat-card__label {
  background: var(--hr-gold, #c8a96a) !important;
  color: #0a0a1f !important;
}

/* entry-footer（記事フッター）非表示 */
.page-id-823 .article-footer,
.page-id-823 .entry-footer {
  display: none !important;
}


/* === TOP-PAGE-OVERRIDE END === */

/* === KURO UI START :: layout-fix === */
/* ============================================================
   layout_fix.css
   honne-rev.com / cocoon-child-honnerev

   Fix: #main blank-right-space when sidebar has no widgets (nwa)
   Root cause: .wrap uses flex-direction:column + align-items:flex-start,
   so #main (860px) is left-aligned in the 1256px wrap, leaving 396px blank.
   Solution: when sidebar.nwa, expand #main to full wrap width.
   ============================================================ */

/* When sidebar has no widgets, main fills the full content column */
#content-in.wrap:has(#sidebar.nwa) #main {
  width: 100% !important;
  max-width: 100% !important;
}

/* Entry content inside full-width main also needs to fill */
#content-in.wrap:has(#sidebar.nwa) .entry-content {
  max-width: 100% !important;
}
/* === KURO UI END :: layout-fix === */

/* === KURO UI START :: revenue-v2 === */
/* ============================================================
 * Review Factory Revenue UI v2
 * Top affiliate-inspired editorial commerce layout
 * Scope: .rf-rev2-*
 * ============================================================ */

:root {
  --rf-rev2-bg: #070817;
  --rf-rev2-panel: #111426;
  --rf-rev2-panel-2: #171b31;
  --rf-rev2-ink: #f7f3ea;
  --rf-rev2-muted: #b7ad9b;
  --rf-rev2-line: rgba(255,255,255,.12);
  --rf-rev2-gold: #d7b56d;
  --rf-rev2-pink: #ff2b78;
  --rf-rev2-blue: #52a8ff;
  --rf-rev2-green: #40d98a;
}

.rf-rev2 {
  color: var(--rf-rev2-ink);
  letter-spacing: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.rf-rev2 *,
.rf-rev2 *::before,
.rf-rev2 *::after {
  box-sizing: border-box;
}

.rf-rev2 a {
  text-decoration: none;
}

.rf-rev2-hero {
  position: relative;
  overflow: hidden;
  margin: -8px calc(50% - 50vw) 28px;
  padding: clamp(28px, 5vw, 54px) max(18px, calc((100vw - 1120px) / 2)) 28px;
  background:
    linear-gradient(90deg, rgba(7,8,23,.98), rgba(7,8,23,.86) 46%, rgba(7,8,23,.70)),
    radial-gradient(circle at 80% 20%, rgba(215,181,109,.22), transparent 36%),
    linear-gradient(135deg, #070817 0%, #161025 55%, #24111c 100%);
  border-bottom: 1px solid rgba(215,181,109,.28);
}

.rf-rev2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.45), transparent 78%);
  pointer-events: none;
}

.rf-rev2-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
}

.rf-rev2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 10px;
  border: 1px solid rgba(215,181,109,.42);
  border-radius: 999px;
  color: var(--rf-rev2-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.rf-rev2-hero h1 {
  margin: 0 0 14px !important;
  color: var(--rf-rev2-ink) !important;
  font-size: clamp(30px, 5.3vw, 58px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.rf-rev2-hero__lead {
  max-width: 670px;
  margin: 0 0 20px;
  color: #ded7c9;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.8;
}

.rf-rev2-hero__lead strong {
  color: #fff;
  background: linear-gradient(transparent 58%, rgba(255,43,120,.28) 0);
}

.rf-rev2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 16px;
}

.rf-rev2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 6px;
  font-weight: 900;
  line-height: 1.25;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.rf-rev2-btn:hover {
  transform: translateY(-1px);
}

.rf-rev2-btn--primary {
  color: #fff !important;
  background: linear-gradient(135deg, #ff2b78, #d81b60);
  box-shadow: 0 12px 30px rgba(255,43,120,.28);
}

.rf-rev2-btn--secondary {
  color: var(--rf-rev2-gold) !important;
  border: 1px solid rgba(215,181,109,.46);
  background: rgba(215,181,109,.09);
}

.rf-rev2-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rf-rev2-proof li {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #cfc6b7;
  font-size: 12px;
  background: rgba(255,255,255,.045);
}

.rf-rev2-command {
  display: grid;
  gap: 12px;
}

.rf-rev2-command__card {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(17,20,38,.86);
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

.rf-rev2-command__card.is-hot {
  border-color: rgba(255,43,120,.58);
  background: linear-gradient(135deg, rgba(255,43,120,.16), rgba(17,20,38,.92));
}

.rf-rev2-command__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  color: #090a14;
  background: var(--rf-rev2-gold);
  font-weight: 950;
  font-size: 22px;
}

.rf-rev2-command__label {
  display: block;
  margin-bottom: 4px;
  color: var(--rf-rev2-gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.rf-rev2-command__title {
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}

.rf-rev2-command__meta {
  display: block;
  margin-top: 4px;
  color: var(--rf-rev2-muted);
  font-size: 12px;
}

.rf-rev2-section {
  max-width: 1120px;
  margin: 0 auto 34px;
  padding: 0 16px;
}

.rf-rev2-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
}

.rf-rev2-section__head h2 {
  margin: 0 !important;
  color: var(--rf-rev2-ink) !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  letter-spacing: 0 !important;
}

.rf-rev2-section__head p {
  margin: 4px 0 0;
  color: var(--rf-rev2-muted);
  font-size: 14px;
}

.rf-rev2-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rf-rev2-choice {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--rf-rev2-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color: var(--rf-rev2-ink) !important;
}

.rf-rev2-choice:hover {
  border-color: rgba(215,181,109,.48);
}

.rf-rev2-choice__tag {
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  color: #0b0c17;
  background: var(--rf-rev2-gold);
  font-size: 11px;
  font-weight: 900;
}

.rf-rev2-choice__title {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.38;
}

.rf-rev2-choice__text {
  margin: 8px 0 14px;
  color: var(--rf-rev2-muted);
  font-size: 13px;
  line-height: 1.7;
}

.rf-rev2-choice__cta {
  margin-top: auto;
  color: var(--rf-rev2-pink);
  font-weight: 900;
}

.rf-rev2-deal {
  padding: 16px;
  border: 1px solid rgba(255,43,120,.32);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,43,120,.12), rgba(215,181,109,.08));
  max-width: 100%;
  overflow: hidden;
}

.rf-rev2-deal__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.10);
}

.rf-rev2-deal__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.rf-rev2-deal__row:last-child {
  padding-bottom: 0;
}

.rf-rev2-deal strong {
  color: #fff;
}

.rf-rev2-deal span {
  display: block;
  color: var(--rf-rev2-muted);
  font-size: 12px;
}

.rf-rev2-mini-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  padding: 10px 12px;
  border-radius: 6px;
  color: #fff !important;
  background: #ff2b78;
  font-size: 13px;
  font-weight: 900;
}

.rf-rev2-instant {
  margin: 16px 0 24px;
  padding: 16px;
  border: 1px solid rgba(215,181,109,.42);
  border-radius: 8px;
  background: linear-gradient(135deg, #111426, #171222);
}

.rf-rev2-instant__title {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: 20px !important;
  letter-spacing: 0 !important;
}

.rf-rev2-instant__text {
  margin: 0 0 12px;
  color: var(--rf-rev2-muted);
  font-size: 14px;
  line-height: 1.7;
}

.rf-rev2-instant__checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.rf-rev2-instant__checks li {
  padding: 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.055);
  color: #f3ead8;
  font-size: 13px;
  line-height: 1.45;
}

.rf-rev2-image-slot {
  min-height: 170px;
  border: 1px solid rgba(215,181,109,.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7,8,23,.72), rgba(7,8,23,.20)),
    linear-gradient(135deg, #20182b, #0f1730 52%, #27131d);
  display: flex;
  align-items: end;
  padding: 14px;
}

.rf-rev2-image-slot span {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,.55);
  color: var(--rf-rev2-gold);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 860px) {
  .rf-rev2-hero__grid,
  .rf-rev2-grid3,
  .rf-rev2-instant__checks {
    grid-template-columns: 1fr;
  }
  .rf-rev2-command__card {
    grid-template-columns: 58px 1fr;
  }
  .rf-rev2-command__num {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }
  .rf-rev2-section__head {
    align-items: start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  html,
  body,
  #container,
  .wrap,
  .content-in,
  .content,
  .main,
  .article,
  .entry-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .main,
  .sidebar,
  .sidebar-left .main,
  .sidebar-left .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .entry-title {
    box-sizing: border-box;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  .eye-catch-wrap,
  .eye-catch {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .eye-catch img,
  .wp-post-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  .sns-share-buttons.sns-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .sns-share-buttons.sns-buttons a {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .entry-content .rf-urgency-box,
  .entry-content .rf-notice-box,
  .entry-content .hr-pr-disclosure {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .entry-content .rf-rev2 {
    margin-left: 0;
    margin-right: 0;
  }
  .rf-rev2-hero {
    margin-top: 0;
    padding-top: 24px;
  }
  .rf-rev2-actions,
  .rf-rev2-deal__row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .rf-rev2-btn,
  .rf-rev2-mini-cta {
    width: 100%;
  }
}
/* === KURO UI END :: revenue-v2 === */

/* === KURO UI START :: mobile-overflow-hotfix === */
/* ============================================================
 * Mobile overflow hotfix 2026-05-10
 * Fixes right/left clipping on article pages after Revenue UI v2.
 * This section must be loaded near the end of child style.css.
 * ============================================================ */

@media screen and (max-width: 1024px) {
  :root {
    --rf-mobile-gutter: 14px;
    --rf-mobile-inner: calc(100vw - (var(--rf-mobile-gutter) * 2));
  }

  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  html body {
    min-width: 0 !important;
  }

  #container,
  #body-container,
  #wrapper,
  #content,
  #content-in,
  #main,
  .container,
  .content,
  .content-in,
  .main,
  .article,
  .entry-content,
  .article-header,
  .entry-header,
  .entry-title,
  .eye-catch-wrap,
  .sns-share,
  .sns-share-buttons {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  html body #container,
  html body #body-container,
  html body #wrapper,
  html body #content,
  html body #content-in,
  html body #main,
  html body .content,
  html body .content-in,
  html body .main,
  html body .article,
  html body .article-header,
  html body .entry-content {
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .content-in,
  .main,
  #main,
  .article {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .article-header,
  .entry-content,
  .rf-rev2-instant,
  .rf-urgency-box,
  .rf-notice-box,
  .hr-pr-disclosure {
    display: block !important;
    width: var(--rf-mobile-inner) !important;
    max-width: var(--rf-mobile-inner) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .entry-title {
    display: block !important;
    width: var(--rf-mobile-inner) !important;
    max-width: var(--rf-mobile-inner) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 0 !important;
    border-left: 3px solid #d7b56d !important;
    font-size: 20px !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body h1.entry-title,
  html body .article h1.entry-title,
  html body .entry-content p,
  html body .entry-content div,
  html body .entry-content span,
  html body .entry-content strong,
  html body .entry-content li,
  html body .entry-content a {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    white-space: normal !important;
  }

  html body .entry-content {
    contain: paint !important;
  }

  .eye-catch,
  .eye-catch img,
  .eye-catch-image,
  .wp-post-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
  }

  .article-header .eye-catch-wrap,
  .entry-header .eye-catch-wrap {
    display: none !important;
  }

  .custom-cat-nav,
  #navi,
  .navi,
  .header-container,
  #header-container,
  .hr-trust-bar,
  .hr-trust-bar * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .custom-cat-nav ul,
  #navi ul,
  .navi ul,
  .menu-header-container ul {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .custom-cat-nav li,
  #navi li,
  .navi li {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .custom-cat-nav a,
  #navi a,
  .navi a {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hr-trust-bar {
    font-size: 10px !important;
  }

  .hr-trust-bar ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .hr-trust-bar li:nth-child(n+4) {
    display: none !important;
  }

  .entry-content > *,
  .article > *,
  .main > * {
    max-width: var(--rf-mobile-inner) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .date-tags,
  .post-date,
  .post-update,
  .footer-meta {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .sns-share-buttons.sns-buttons {
    display: none !important;
  }

  .sns-share-buttons.sns-buttons > a,
  .sns-button,
  .share-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .rf-rev2,
  .rf-rev2 *,
  .rf-urgency-box,
  .rf-notice-box,
  .hr-pr-disclosure {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .rf-rev2-instant__text,
  .rf-rev2-deal,
  .rf-rev2-deal *,
  .rf-rev2-choice,
  .rf-rev2-choice * {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .rf-rev2-deal__row {
    grid-template-columns: 1fr !important;
  }

  .rf-rev2-deal,
  .rf-rev2-choice,
  .rf-rev2-instant,
  .rf-rev2-mini-cta,
  .rf-rev2-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .kuro-ui-rank-card,
  .kuro-ui-rank-card *,
  .hr-vr-picks,
  .hr-vr-picks *,
  .hr-compare-table,
  .hr-compare-table * {
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .kuro-ui-rank-card,
  .hr-vr-picks {
    width: var(--rf-mobile-inner) !important;
    max-width: var(--rf-mobile-inner) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: hidden !important;
  }

  .kuro-ui-rank-card__top,
  .kuro-ui-rank-card__tags,
  .kuro-ui-rank-card__chips {
    max-width: 100% !important;
  }

  .kuro-ui-rank-card__headline {
    font-size: 22px !important;
    line-height: 1.45 !important;
  }

  .kuro-ui-rank-card__cta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: center !important;
  }

  .wp-block-table,
  .scrollable-table,
  .hr-compare-table {
    width: var(--rf-mobile-inner) !important;
    max-width: var(--rf-mobile-inner) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .wp-block-table table,
  .scrollable-table table,
  .hr-compare-table table {
    width: max-content !important;
    min-width: 620px !important;
    max-width: none !important;
  }

  .sns-share,
  .sns-share-message,
  .sns-share-buttons,
  .footer,
  #footer,
  .footer-bottom {
    width: var(--rf-mobile-inner) !important;
    max-width: var(--rf-mobile-inner) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  img,
  video,
  iframe,
  table {
    max-width: 100% !important;
  }
}
/* === KURO UI END :: mobile-overflow-hotfix === */

/* === KURO UI START :: niche-brand === */
/* ============================================================
 * Niche Brand UI 2026-05-10
 * 本音レビューログ: VR / ASMR / エロ漫画 / 同人 / セール
 * ============================================================ */

:root {
  --rf-niche-bg: #09000d;
  --rf-niche-panel: #170018;
  --rf-niche-panel-2: #21102a;
  --rf-niche-ink: #fff6fb;
  --rf-niche-muted: #d9b8cc;
  --rf-niche-pink: #ff2b8a;
  --rf-niche-yellow: #ffe45e;
  --rf-niche-line: rgba(255, 255, 255, .13);
}

.rf-niche,
.rf-niche * {
  box-sizing: border-box;
}

.rf-niche {
  color: var(--rf-niche-ink);
  font-family: "Noto Sans JP", system-ui, sans-serif;
}

.rf-niche a {
  color: inherit;
}

.rf-niche-home {
  position: relative;
  overflow: hidden;
  margin: 0 auto 30px;
  padding: clamp(24px, 5vw, 54px) clamp(16px, 4vw, 42px);
  border: 1px solid rgba(255, 43, 138, .44);
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 43, 138, .26), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(255, 228, 94, .12), transparent 30%),
    linear-gradient(135deg, #120014 0%, #09000d 58%, #15001c 100%);
  box-shadow: 0 0 34px rgba(255, 43, 138, .18);
}

.rf-niche-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(9, 0, 13, .18), rgba(9, 0, 13, .72) 46%, rgba(9, 0, 13, .28)),
    url("https://pics.dmm.co.jp/digital/video/vrkm01777/vrkm01777pl.jpg"),
    url("https://pics.dmm.co.jp/digital/video/pred00853/pred00853pl.jpg"),
    url("https://ebook-assets.dmm.co.jp/digital/e-book/b915awnmg04289/b915awnmg04289pl.jpg"),
    url("https://doujin-assets.dmm.co.jp/digital/comic/d_755728/d_755728pl.jpg");
  background-repeat: no-repeat;
  background-position:
    center,
    right -18px top 18px,
    right 178px bottom -30px,
    left -34px bottom -52px,
    left 172px top -38px;
  background-size:
    cover,
    210px auto,
    190px auto,
    160px auto,
    170px auto;
  filter: saturate(1.35) contrast(1.08);
  opacity: .34;
}

.rf-niche-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 43, 138, .20) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 228, 94, .10) 1px, transparent 1px),
    radial-gradient(circle at 88% 18%, rgba(255, 43, 138, .35), transparent 32%),
    linear-gradient(180deg, transparent 0%, rgba(9, 0, 13, .72) 78%);
  background-size: 30px 30px, 30px 30px, auto, auto;
  mix-blend-mode: screen;
  opacity: .48;
}

.rf-niche-home > * {
  position: relative;
  z-index: 1;
}

.rf-niche-kicker {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 228, 94, .48);
  color: var(--rf-niche-yellow);
  background: rgba(28, 0, 18, .78);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(255, 228, 94, .20), 0 0 24px rgba(255, 43, 138, .22);
}

.rf-niche-home h1 {
  margin: 0 0 14px !important;
  color: #fff !important;
  font-size: clamp(28px, 5.4vw, 56px) !important;
  line-height: 1.12 !important;
  font-weight: 1000 !important;
  text-shadow: 0 0 16px rgba(255, 43, 138, .62);
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.rf-niche-lead {
  max-width: 760px;
  margin: 0 !important;
  color: #ffd9ea;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.85;
  font-weight: 700;
}

.rf-niche-shelves {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 0;
}

.rf-niche-shelf {
  position: relative;
  min-height: 172px;
  padding: 16px 14px;
  border: 1px solid rgba(255, 43, 138, .35);
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 228, 94, .12), transparent 42%),
    linear-gradient(180deg, rgba(255, 43, 138, .27), rgba(255, 43, 138, .06)),
    var(--rf-niche-panel);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .36), 0 0 18px rgba(255, 43, 138, .10);
  isolation: isolate;
  overflow: hidden;
}

.rf-niche-shelf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .22;
}

.rf-niche-shelf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rf-niche-pink), #ff2b2b, var(--rf-niche-yellow));
  box-shadow: 0 0 18px rgba(255, 43, 138, .62);
}

.rf-niche-shelf:hover {
  border-color: rgba(255, 228, 94, .55);
  transform: translateY(-1px);
}

.rf-niche-shelf__label {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 4px 7px;
  color: #1b0010;
  background: linear-gradient(90deg, var(--rf-niche-yellow), #ffb02b);
  font-size: 11px;
  font-weight: 1000;
  box-shadow: 0 0 16px rgba(255, 228, 94, .20);
}

.rf-niche-shelf__title {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 1000;
}

.rf-niche-shelf p {
  margin: 0 !important;
  color: var(--rf-niche-muted);
  font-size: 13px;
  line-height: 1.6;
}

.rf-fit-box {
  margin: 18px auto 24px;
  padding: 18px;
  border: 1px solid rgba(255, 43, 138, .46);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 43, 138, .22), transparent 34%),
    linear-gradient(135deg, rgba(23, 0, 24, .98), rgba(9, 0, 13, .98));
  color: var(--rf-niche-ink);
  box-shadow: 0 0 24px rgba(255, 43, 138, .14);
}

.rf-fit-box__title {
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 1000 !important;
}

.rf-fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rf-fit-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--rf-niche-line);
  background: rgba(255, 255, 255, .045);
}

.rf-fit-card__heading {
  margin: 0 0 10px !important;
  color: var(--rf-niche-yellow) !important;
  font-size: 15px !important;
  font-weight: 1000;
}

.rf-fit-card ul {
  margin: 0 !important;
  padding-left: 1.1em !important;
}

.rf-fit-card li {
  margin: 0 0 7px !important;
  color: #ffeaf4;
  line-height: 1.65;
}

.rf-fit-card--no .rf-fit-card__heading {
  color: #ff9bc8 !important;
}

.rf-fit-note {
  margin: 12px 0 0 !important;
  color: var(--rf-niche-muted);
  font-size: 13px;
  line-height: 1.7;
}

.rf-home-search,
.rf-home-rank {
  position: relative;
  overflow: hidden;
  margin: 18px auto 24px;
  padding: 18px;
  border: 1px solid rgba(255, 43, 138, .52);
  background:
    linear-gradient(90deg, rgba(8, 0, 12, .94), rgba(96, 0, 50, .76)),
    url("https://pics.dmm.co.jp/digital/video/vrkm01777/vrkm01777pl.jpg") right 4% center / auto 118% no-repeat,
    #09000d;
  box-shadow: 0 0 28px rgba(255, 43, 138, .18);
  color: #fff;
}

.rf-home-search__title,
.rf-home-rank__title {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: clamp(22px, 3.4vw, 34px) !important;
  line-height: 1.25 !important;
  font-weight: 1000 !important;
  text-shadow: 0 0 16px rgba(255, 43, 138, .54);
}

.rf-home-search__lead {
  max-width: 720px;
  margin: 0 0 14px !important;
  color: #ffd9ea;
  font-weight: 800;
  line-height: 1.7;
}

.rf-home-search__form,
.rf-cat-gate__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 760px;
}

.rf-home-search__form input,
.rf-cat-gate__search input {
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(255, 228, 94, .46);
  background: rgba(8, 0, 12, .86);
  color: #fff;
  padding: 0 14px;
  font-weight: 800;
}

.rf-home-search__form input::placeholder,
.rf-cat-gate__search input::placeholder {
  color: rgba(255, 217, 234, .72);
}

.rf-home-search__form button,
.rf-cat-gate__search button {
  min-height: 48px;
  border: 0;
  padding: 0 18px;
  background: linear-gradient(90deg, #ffd84d, #ff2b8a);
  color: #180010;
  font-weight: 1000;
  cursor: pointer;
}

.rf-home-rank {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 14px;
  background:
    linear-gradient(90deg, rgba(8, 0, 12, .96), rgba(97, 0, 50, .78)),
    url("https://ebook-assets.dmm.co.jp/digital/e-book/b915awnmg04289/b915awnmg04289pl.jpg") right 3% center / auto 122% no-repeat,
    #09000d;
}

.rf-home-rank__badge {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 5px 9px;
  background: #ffd84d;
  color: #180010;
  font-size: 12px;
  font-weight: 1000;
}

.rf-home-rank__copy {
  margin: 0 !important;
  color: #ffd9ea;
  font-weight: 800;
  line-height: 1.7;
}

.rf-home-rank__links {
  display: grid;
  gap: 8px;
  align-content: center;
}

.rf-home-rank__links a {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(255, 228, 94, .42);
  background: rgba(15, 0, 18, .78);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 1000;
}

.rf-fit-box .rf-niche-shelf {
  background:
    linear-gradient(90deg, rgba(21, 0, 17, .94), rgba(77, 0, 42, .64)),
    var(--rf-card-img, none) right 4% center / auto 128% no-repeat,
    linear-gradient(180deg, rgba(255, 43, 138, .27), rgba(255, 43, 138, .06)),
    var(--rf-niche-panel) !important;
}

.rf-fit-box .rf-niche-shelf::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 0, 13, .18), rgba(9, 0, 13, .76));
  background-size: 22px 22px, 22px 22px, auto;
}

.rf-fit-box .rf-niche-shelf > * {
  position: relative;
  z-index: 1;
}

.rf-cat-gate {
  position: relative;
  overflow: hidden;
  margin: 24px 0 28px;
  padding: clamp(18px, 3.8vw, 34px);
  border: 1px solid rgba(255, 43, 138, .52);
  background: #09000d;
  color: #fff;
  box-shadow: 0 0 34px rgba(255, 43, 138, .16);
}

.rf-cat-gate__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 0, 12, .96), rgba(8, 0, 12, .76) 48%, rgba(8, 0, 12, .50)),
    var(--rf-cat-img-a) right 4% center / auto 118% no-repeat,
    var(--rf-cat-img-b) right 260px bottom -30px / 210px auto no-repeat,
    radial-gradient(circle at 8% 0%, rgba(255, 43, 138, .26), transparent 36%);
  filter: saturate(1.22) contrast(1.06);
}

.rf-cat-gate__body,
.rf-cat-gate__cards {
  position: relative;
  z-index: 1;
}

.rf-cat-gate__eyebrow {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 5px 9px;
  background: #ffd84d;
  color: #180010;
  font-size: 12px;
  font-weight: 1000;
}

.rf-cat-gate__title {
  max-width: 760px;
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: clamp(28px, 4.8vw, 48px) !important;
  line-height: 1.14 !important;
  font-weight: 1000 !important;
  text-shadow: 0 0 18px rgba(255, 43, 138, .58);
}

.rf-cat-gate__lead {
  max-width: 720px;
  margin: 0 0 14px !important;
  color: #ffd9ea;
  font-weight: 800;
  line-height: 1.75;
}

.rf-cat-gate__primary {
  display: inline-flex;
  margin-top: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #ff0f7b, #ff2a2a);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 1000;
  box-shadow: 0 0 20px rgba(255, 43, 138, .28);
}

.rf-cat-gate__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.rf-cat-gate__card {
  display: block;
  min-height: 100px;
  padding: 14px;
  border: 1px solid rgba(255, 228, 94, .34);
  background: rgba(15, 0, 18, .78);
  color: #fff !important;
  text-decoration: none !important;
}

.rf-cat-gate__card strong,
.rf-cat-gate__card span {
  display: block;
}

.rf-cat-gate__card strong {
  margin-bottom: 7px;
  font-size: 17px;
}

.rf-cat-gate__card span {
  color: #ffd9ea;
  font-size: 13px;
  line-height: 1.55;
}

.rf-search-world {
  position: relative;
  overflow: hidden;
  margin: 18px 0 26px;
  padding: clamp(18px, 4vw, 34px);
  border: 1px solid rgba(255, 43, 138, .52);
  background:
    linear-gradient(90deg, rgba(8, 0, 12, .96), rgba(80, 0, 46, .72)),
    url("https://pics.dmm.co.jp/digital/video/ajvr00277/ajvr00277pl.jpg") right 4% center / auto 120% no-repeat,
    #09000d;
  color: #fff;
  box-shadow: 0 0 28px rgba(255, 43, 138, .16);
}

.rf-search-world__eyebrow {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 5px 9px;
  background: #ffd84d;
  color: #180010;
  font-size: 12px;
  font-weight: 1000;
}

.rf-search-world__title {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: clamp(26px, 4.6vw, 44px) !important;
  line-height: 1.18 !important;
  text-shadow: 0 0 18px rgba(255, 43, 138, .52);
}

.rf-search-world__lead {
  max-width: 760px;
  margin: 0 0 14px !important;
  color: #ffd9ea;
  font-weight: 800;
  line-height: 1.75;
}

.rf-search-world__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.rf-search-world__links a {
  padding: 8px 10px;
  border: 1px solid rgba(255, 228, 94, .4);
  color: #fff !important;
  background: rgba(16, 0, 18, .74);
  text-decoration: none !important;
  font-weight: 900;
}

.rf-fanza-search-bridge {
  margin: 18px 0 28px;
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid rgba(255, 43, 138, .52);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 43, 138, .28), transparent 36%),
    linear-gradient(135deg, rgba(12, 0, 18, .98), rgba(72, 0, 42, .92));
  color: #fff;
  box-shadow: 0 0 28px rgba(255, 43, 138, .16);
}

.rf-fanza-search-bridge__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rf-fanza-search-card {
  overflow: hidden;
  border: 1px solid rgba(255, 228, 94, .36);
  background: rgba(8, 0, 12, .82);
}

.rf-fanza-search-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.rf-fanza-search-card__body {
  padding: 12px;
}

.rf-fanza-search-card__tag {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 7px;
  background: #ffd84d;
  color: #180010;
  font-size: 11px;
  font-weight: 1000;
}

.rf-fanza-search-card h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

.rf-fanza-search-card p {
  margin: 0 0 8px !important;
  color: #ffd9ea;
  font-size: 13px;
  line-height: 1.6;
}

.rf-fanza-search-card__review {
  margin-bottom: 8px;
  background: linear-gradient(90deg, #ff0a82, #ff2a2a) !important;
}

.rf-fanza-search-card__subcta {
  display: block;
  margin-top: 8px;
  color: #ffd84d !important;
  font-size: 12px;
  font-weight: 1000;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.rf-night-card--metric img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0 0 12px;
  border: 1px solid rgba(255, 43, 138, .4);
}

.rf-review-text-analysis {
  margin: 24px 0;
  padding: clamp(18px, 4vw, 28px);
  border: 1px solid rgba(255, 43, 138, .55);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 43, 138, .22), transparent 34%),
    linear-gradient(135deg, rgba(16, 0, 20, .98), rgba(72, 0, 42, .92));
  color: #fff;
  box-shadow: 0 0 24px rgba(255, 43, 138, .16);
}

.rf-review-text-analysis__tag {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 9px;
  background: #ffd84d;
  color: #170011;
  font-size: 12px;
  font-weight: 1000;
}

.rf-review-text-analysis h2 {
  margin: 0 0 14px !important;
  color: #fff !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  line-height: 1.25 !important;
}

.rf-review-text-analysis__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.rf-review-text-analysis__grid div {
  padding: 10px;
  border: 1px solid rgba(255, 216, 77, .3);
  background: rgba(8, 0, 12, .65);
}

.rf-review-text-analysis__grid strong,
.rf-review-text-analysis__grid span {
  display: block;
}

.rf-review-text-analysis__grid strong {
  color: #ffd9ea;
  font-size: 11px;
}

.rf-review-text-analysis__grid span {
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
}

.rf-review-text-analysis p {
  margin: 0 0 10px !important;
  color: #ffe7f1;
  font-weight: 800;
  line-height: 1.75;
}

.rf-review-text-analysis p:last-child {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 900px) {
  .rf-fanza-search-bridge__grid {
    grid-template-columns: 1fr;
  }

  .rf-review-text-analysis__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.rf-niche-home h1,
.rf-niche-lead,
.rf-niche-shelf,
.rf-niche-shelf *,
.rf-fit-box,
.rf-fit-box * {
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  line-break: anywhere !important;
  white-space: normal !important;
}

@media screen and (max-width: 900px) {
  .rf-niche-shelves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .logo-header .site-name-text,
  .header .site-name-text,
  .site-name-text {
    display: block !important;
    max-width: calc(100vw - 48px) !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }

  .rf-niche-home,
  .rf-fit-box,
  .rf-home-search,
  .rf-home-rank,
  .rf-cat-gate {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .rf-niche-shelves,
  .rf-fit-grid,
  .rf-home-rank,
  .rf-cat-gate__cards {
    grid-template-columns: 1fr;
  }

  .rf-home-search__form,
  .rf-cat-gate__search {
    grid-template-columns: 1fr;
  }

  .rf-niche-shelf {
    min-height: auto;
  }

  .rf-niche-home h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
    word-break: break-all !important;
  }

  html body h1.entry-title,
  html body .article h1.entry-title,
  html body .entry-content .rf-niche-home h1,
  html body .entry-content .rf-niche-lead,
  html body .entry-content .rf-niche-shelf,
  html body .entry-content .rf-niche-shelf *,
  html body .entry-content .rf-fit-box__title,
  html body .entry-content .rf-fit-card li,
  html body .entry-content .rf-niche-shelf p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    line-break: anywhere !important;
    white-space: normal !important;
  }

  html body .entry-content .rf-niche-home {
    overflow: hidden !important;
  }
}
/* === KURO UI END :: niche-brand === */

/* === KURO UI START :: night-street-video === */
.rf-night {
  --rf-night-bg: #080008;
  --rf-night-panel: #160012;
  --rf-night-hot: #ff0f7b;
  --rf-night-red: #ff2a2a;
  --rf-night-gold: #ffd36a;
  --rf-night-text: #fff7fb;
  --rf-night-muted: #ffc2dd;
  position: relative;
  margin: 20px 0 24px;
  padding: 18px;
  color: var(--rf-night-text);
  background:
    linear-gradient(135deg, rgba(255, 15, 123, .18), rgba(255, 42, 42, .08) 36%, rgba(0, 0, 0, .12)),
    radial-gradient(circle at 18% 0%, rgba(255, 15, 123, .32), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(255, 211, 106, .16), transparent 34%),
    var(--rf-night-bg);
  border: 1px solid rgba(255, 15, 123, .55);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 16px 38px rgba(40, 0, 26, .28);
  overflow: hidden;
}

.rf-night::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .18;
}

.rf-night > * {
  position: relative;
  z-index: 1;
}

.rf-night__head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.rf-night__sign {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  color: #fff;
  background: linear-gradient(90deg, var(--rf-night-hot), #a800ff);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: 0 0 18px rgba(255, 15, 123, .54);
}

.rf-night__title {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 4.8vw, 34px);
  font-weight: 950;
  line-height: 1.22;
  text-shadow: 0 0 14px rgba(255, 15, 123, .7), 0 2px 0 rgba(0, 0, 0, .55);
}

.rf-night__copy {
  margin: 0;
  color: var(--rf-night-muted);
  font-size: 14px;
  line-height: 1.65;
}

.rf-night__copy strong {
  color: #fff;
  background: linear-gradient(transparent 58%, rgba(255, 15, 123, .45) 0);
}

.rf-night__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.rf-night-card {
  display: grid;
  min-width: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .32));
  border: 1px solid rgba(255, 15, 123, .42);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.rf-night-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
}

.rf-night-card__frame iframe,
.rf-night-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.rf-night-card__frame img {
  object-fit: cover;
  filter: saturate(1.12) contrast(1.06);
}

.rf-night-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #fff;
  background: rgba(255, 15, 123, .9);
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 26px rgba(255, 15, 123, .7);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.rf-night-card__body {
  display: grid;
  gap: 8px;
  padding: 11px;
}

.rf-night-card__tag {
  width: fit-content;
  padding: 3px 7px;
  color: #2a0017;
  background: var(--rf-night-gold);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.rf-night-card__name {
  min-height: 2.8em;
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.42;
}

.rf-night-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 10px;
  color: #fff;
  background: linear-gradient(90deg, var(--rf-night-hot), var(--rf-night-red));
  border-radius: 5px;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 16px rgba(255, 15, 123, .42);
}

.rf-night .rf-night-card__cta,
.rf-night .rf-night-card__cta:link,
.rf-night .rf-night-card__cta:visited {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.rf-night-card__cta:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.08);
}

.rf-night__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.rf-night__chip {
  padding: 5px 8px;
  color: #ffd7e8;
  background: rgba(255, 15, 123, .14);
  border: 1px solid rgba(255, 15, 123, .38);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.rf-night--home .rf-night__copy {
  max-width: 760px;
}

@media (max-width: 720px) {
  .rf-night {
    margin: 16px -2px 22px;
    padding: 14px 12px;
  }

  .rf-night__rail {
    display: flex;
    gap: 10px;
    margin: 0 -12px;
    padding: 0 12px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .rf-night__rail::-webkit-scrollbar {
    display: none;
  }

  .rf-night-card {
    flex: 0 0 min(76vw, 292px);
    scroll-snap-align: start;
  }

  .rf-night-card__name {
    min-height: auto;
    font-size: 12.5px;
  }

  .rf-night--home {
    margin-top: 10px;
  }

  .rf-night--home .rf-night__head {
    gap: 6px;
    margin-bottom: 10px;
  }

  .rf-night--home .rf-night__title {
    font-size: 20px;
    line-height: 1.22;
  }

  .rf-night--home .rf-night__copy {
    display: none;
  }

  .rf-night--home .rf-night__strip {
    display: none;
  }
}

@media (max-width: 390px) {
  .rf-night-card {
    flex-basis: 78vw;
  }

  .rf-night__title {
    font-size: 22px;
  }
}
/* === KURO UI END :: night-street-video === */


/* === KURO UI PATCH: category search visibility 2026-05-11 === */
.rf-cat-gate__search {
  position: relative;
  margin: 18px 0 12px !important;
  padding: 18px 18px 16px !important;
  border: 2px solid rgba(255, 216, 77, .92) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 43, 138, .22), rgba(8, 0, 12, .82)),
    rgba(12, 0, 18, .92) !important;
  box-shadow:
    0 0 0 3px rgba(255, 43, 138, .20),
    0 0 28px rgba(255, 43, 138, .48),
    inset 0 0 18px rgba(255, 216, 77, .12) !important;
}
.rf-cat-gate__search::before {
  content: "作品名で迷ったらここに入力。クロの評価を探す";
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: -4px 0 2px;
  padding: 5px 9px;
  background: linear-gradient(90deg, #ffd84d, #ff2b8a);
  color: #180010;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 1000;
  letter-spacing: 0;
  box-shadow: 0 0 18px rgba(255, 43, 138, .42);
}
.rf-cat-gate__search input {
  border: 2px solid rgba(255, 255, 255, .84) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #160011 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 43, 138, .22) !important;
}
.rf-cat-gate__search input::placeholder {
  color: rgba(70, 0, 45, .72) !important;
}
.rf-cat-gate__search input:focus {
  outline: 0 !important;
  border-color: #ffd84d !important;
  box-shadow: 0 0 0 4px rgba(255, 216, 77, .30), 0 0 24px rgba(255, 43, 138, .48) !important;
}
.rf-cat-gate__search button {
  border: 2px solid rgba(255, 255, 255, .74) !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #ff0f7b, #ff2a2a) !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(255, 43, 138, .48) !important;
}
@media (max-width: 640px) {
  .rf-cat-gate__search {
    padding: 15px !important;
  }
  .rf-cat-gate__search::before {
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
  }
}
/* === /KURO UI PATCH: category search visibility === */

/* === KURO UI START :: affiliate-image-framing === */
/* Affiliate image framing: prevent vertical product covers from taking over the first viewport. */
.article-header .eye-catch-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 18px 0 24px;
  text-align: center;
}

.article-header .eye-catch {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(200, 169, 106, .28);
  background:
    radial-gradient(circle at 24% 20%, rgba(225, 29, 72, .16), transparent 34%),
    linear-gradient(135deg, #090b1d 0%, #101426 56%, #050716 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .30);
}

.article-header .eye-catch img.eye-catch-image,
.article-header .eye-catch img.wp-post-image {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: clamp(180px, 22vw, 300px) !important;
  max-height: 300px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.article-header .eye-catch .cat-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.entry-content .kuro-ui-rank-card__media,
.entry-content .kuro-ui-rank-card__img-wrap,
.entry-content .kuro-ui-product-card__media,
.entry-content .rf-night-card__frame,
.entry-content .rf-campaign-product__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 170px;
  max-height: 280px;
  aspect-ratio: 16 / 9;
  background: #090b1d;
}

.entry-content .kuro-ui-rank-card__media img,
.entry-content .kuro-ui-rank-card__img-wrap img,
.entry-content .kuro-ui-product-card__media img,
.entry-content .rf-night-card__frame img,
.entry-content .rf-campaign-product__thumb img {
  width: 100% !important;
  height: 100% !important;
  max-height: 280px !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.entry-content img[src*="pics.dmm.co.jp/digital/video"][style*="width:100%"],
.entry-content img[src*="pics.dmm.co.jp/digital/amateur"][style*="width:100%"],
.entry-content img[src*="pics.dmm.co.jp/digital/book"][style*="width:100%"] {
  display: block !important;
  width: 100% !important;
  max-height: 320px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #090b1d;
}

@media (max-width: 640px) {
  .article-header .eye-catch {
    padding: 8px;
  }

  .article-header .eye-catch img.eye-catch-image,
  .article-header .eye-catch img.wp-post-image {
    height: clamp(190px, 58vw, 300px) !important;
    max-height: 300px !important;
  }

  .entry-content .kuro-ui-rank-card__media,
  .entry-content .kuro-ui-rank-card__img-wrap,
  .entry-content .kuro-ui-product-card__media,
  .entry-content .rf-night-card__frame,
  .entry-content .rf-campaign-product__thumb {
    min-height: 150px;
    max-height: 220px;
  }

  .entry-content .kuro-ui-rank-card__media img,
  .entry-content .kuro-ui-rank-card__img-wrap img,
  .entry-content .kuro-ui-product-card__media img,
  .entry-content .rf-night-card__frame img,
  .entry-content .rf-campaign-product__thumb img {
    max-height: 220px !important;
  }
}
/* === KURO UI END :: affiliate-image-framing === */