/* YoruLog カスタムCSS - Cocoon子テーマ用 */

/* --- CTAボタン --- */
.cta-btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  border-radius: 8px;
  transition: opacity 0.2s, transform 0.15s;
  line-height: 1.4;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.cta-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.cta-btn:active {
  transform: translateY(0);
}

.cta-fanza {
  background: #b01030 !important;
  color: #fff !important;
  border: 2px solid #b01030 !important;
}
.cta-fanza:visited { color: #fff !important; }

.cta-dlsite {
  background: #0073e6;
  color: #fff !important;
  border: 2px solid #0073e6;
}
.cta-dlsite:visited { color: #fff !important; }

.cta-fanza-outline {
  background: transparent !important;
  color: #b01030 !important;
  border: 2px solid #b01030 !important;
}
.cta-dlsite-outline {
  background: transparent;
  color: #0073e6 !important;
  border: 2px solid #0073e6;
}

.cta-block {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 24px 0;
}

/* --- 商品カード --- */
.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  background: #fff;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.product-card__image {
  text-align: center;
  margin-bottom: 14px;
}
.product-card__image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.product-card__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.5;
}

.product-card__meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.6;
}
.product-card__meta span {
  display: inline-block;
  margin-right: 12px;
}

.product-card__price {
  font-size: 20px;
  font-weight: 700;
  color: #e8380d;
  margin-bottom: 14px;
}

.product-card__score {
  display: inline-block;
  background: #ffecd2;
  color: #e8380d;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  margin-bottom: 10px;
}

.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.product-card__tag {
  display: inline-block;
  background: #f5f5f5;
  color: #555;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 14px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.product-grid .product-card {
  margin-bottom: 0;
}

/* --- 単一記事 上部広告（Customizer「YoruLog 単一記事」／未設定時は HTML 自体が出ない） --- */
.yorulog-ad-slot {
  margin: 0 0 1.25rem;
  text-align: center;
}

/* --- 関連記事ブロック --- */
.yorulog-related {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid #f0f0f0;
}

.yorulog-related__heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 4px solid #e8380d;
}

.yorulog-related__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.yorulog-related__item {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.yorulog-related__item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.yorulog-related__item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.yorulog-related__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.yorulog-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yorulog-related__body {
  padding: 12px 14px;
}

.yorulog-related__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.yorulog-related__label {
  display: inline-block;
  font-size: 11px;
  background: #e8380d;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
}
.yorulog-related__label--matome {
  background: #6c5ce7;
}

/* --- レスポンシブ --- */
@media (max-width: 600px) {
  .cta-btn {
    padding: 12px 20px;
    font-size: 15px;
  }
  .cta-group {
    flex-direction: column;
    align-items: center;
  }
  .product-grid {
    grid-template-columns: 1fr;
  }
  .product-card__title {
    font-size: 16px;
  }
  .yorulog-related__list {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .yorulog-related__title {
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .yorulog-related__list {
    grid-template-columns: 1fr;
  }
}

/* --- シングル記事: Cocoonのアイキャッチ表示を非表示（本文内yl-coverを正とする） --- */
.single figure.eye-catch {
  display: none !important;
}

/* ============================================================
   単ページテンプレ (yl- プレフィックス)
   ============================================================ */

/* --- 広告エリア --- */
.yl-ad-top {
  margin: 0 0 24px;
  text-align: center;
}

/* --- 表紙 --- */
.yl-cover {
  margin: 0 0 4px;
  text-align: center;
}
.yl-cover a {
  display: block;
}
.yl-cover__img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

/* --- CTA 共通 --- */
.yl-cta {
  text-align: center;
}
.yl-cta--top {
  margin: 20px 0 24px;
}
.yl-cta--mid {
  margin: 12px 0 16px;
}
.yl-cta--bottom {
  margin: 28px 0 16px;
}

/* 中盤CTA: 小さめ・控えめ（通常CTAとは別クラス） */
.yl-cta-mid-btn {
  font-size: 13px !important;
  padding: 7px 18px !important;
  font-weight: 400 !important;
  border-radius: 4px;
  letter-spacing: 0;
  opacity: 0.85;
}

/* --- 冒頭一言 --- */
.yl-intro {
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 20px;
  color: #333;
}

/* --- サンプル画像群 --- */
.yl-samples {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 4px;
}
.yl-sample-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* --- 終盤セクション --- */
.yl-closing {
  margin: 24px 0 20px;
  padding: 18px 20px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 3px solid #e8380d;
}

/* こんな人におすすめ */
.yl-target {
  padding-left: 1.4em;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.9;
  color: #444;
}
.yl-target li {
  margin-bottom: 3px;
}

/* 最後の誘導文 */
.yl-outro {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* --- 作品情報テーブル --- */
.yl-meta-table {
  margin: 20px 0 28px;
}
.yl-meta-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.yl-meta-table th,
.yl-meta-table td {
  padding: 8px 12px;
  border: 1px solid #e8e8e8;
  vertical-align: top;
  line-height: 1.6;
}
.yl-meta-table th {
  width: 28%;
  background: #f5f5f5;
  color: #555;
  font-weight: 600;
  white-space: nowrap;
}
.yl-meta-table td {
  color: #333;
}

/* --- 単ページ レスポンシブ --- */
@media (max-width: 600px) {
  .yl-closing {
    padding: 14px 16px;
  }
  .yl-meta-table th,
  .yl-meta-table td {
    font-size: 12px;
    padding: 6px 10px;
  }
  .yl-meta-table th {
    width: 32%;
  }
}

/* ============================================================
   トップ本棚レイアウト (yl-shelf)  ※home.php でのみ使用
   ============================================================ */

/* --- 一覧上部タグナビ（home / archive / search） --- */
.yl-tag-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  background: #1a1a1a;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.yl-tag-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc(33.333% - 8px);
  min-width: 128px;
  max-width: 240px;
  white-space: nowrap;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #2d2d2d;
  color: #f0f0f0 !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.4;
}
.yl-tag-nav__item:visited {
  color: #f0f0f0 !important;
}
.yl-tag-nav__item:hover {
  color: #fff !important;
  background: #3a3a3a;
  text-decoration: none !important;
}

/* --- タグページ上部ヒーロー（is_tag() のみ PHP 側で出力） --- */
body.yorulog-listing .yl-tag-hero {
  margin: 0 0 16px;
  padding: 16px 14px;
  background: #161616;
  border: 1px solid #2f2f2f;
  border-radius: 12px;
}

body.yorulog-listing .yl-tag-hero__title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
}

body.yorulog-listing .yl-tag-hero__description {
  margin: 0 0 12px;
}

body.yorulog-listing .yl-tag-hero__description p {
  margin: 0;
  color: #cfcfcf;
  font-size: 13px;
  line-height: 1.8;
}

body.yorulog-listing .yl-tag-hero__description p + p {
  margin-top: 8px;
}

body.yorulog-listing .yl-tag-hero__related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.yorulog-listing .yl-tag-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: #f4f4f4 !important;
  background: #262626;
  border: 1px solid #3b3b3b;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background .2s, border-color .2s;
}

body.yorulog-listing .yl-tag-hero__button:hover {
  color: #fff !important;
  background: #343434;
  border-color: #4a4a4a;
}

/* --- 上部まとめボタン帯 --- */
.yl-shelf-nav {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: #111;
  border-radius: 6px;
}
.yl-shelf-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.yl-shelf-nav__btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff !important;
  background: #b01030;
  border-radius: 4px;
  text-decoration: none !important;
  line-height: 1.3;
  letter-spacing: 0.03em;
  transition: opacity .2s, transform .15s;
}
.yl-shelf-nav__btn:hover { opacity: .82; transform: translateY(-1px); }
.yl-shelf-nav__btn:visited { color: #fff !important; }

/* --- 本棚グリッド ---
   Cocoon の .main ul / li のデフォルト padding・list-style・::before が
   ボタン帯以外のカード側に効いて見えるのを防ぐため、ul.yl-shelf で詳細度を上げつつ打ち消す */
ul.yl-shelf {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
}
ul.yl-shelf > li.yl-shelf__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.yl-shelf > li.yl-shelf__item::before,
ul.yl-shelf > li.yl-shelf__item::marker { content: none !important; }

/* スマホ2列を 767px まで維持、それ以上で列を増やす */
@media (min-width: 768px)  { ul.yl-shelf { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1024px) { ul.yl-shelf { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1280px) { ul.yl-shelf { grid-template-columns: repeat(5, 1fr); gap: 18px; } }

.yl-shelf__link {
  display: block;
  color: inherit;
  text-decoration: none !important;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  transition: box-shadow .2s, transform .15s;
}
.yl-shelf__link:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  transform: translateY(-2px);
}

/* --- サムネイル（画像主役） --- */
.yl-shelf__thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #1a1a1a;
  overflow: hidden;
}
.yl-shelf__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px 6px 0 0; /* 上だけ角丸。カード下辺はカード自体の border-radius に合わせる */
}
.yl-shelf__noimg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #777; font-size: 11px;
}

/* --- カテゴリバッジ（画像左上に重ねる） --- */
.yl-shelf__cat {
  position: absolute;
  top: 5px;
  left: 5px;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(176, 16, 48, .88);
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.4;
  z-index: 1;
}

/* --- タイトルエリア --- */
.yl-shelf__body { padding: 7px 9px 9px; }
.yl-shelf__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 !important;
  padding: 0 !important;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px)  { .yl-shelf__title { font-size: 13px; } }
@media (min-width: 1024px) { .yl-shelf__title { font-size: 14px; } }

/* ------------------------------------------------------------
   スマホ最適化（max-width: 767px）
   - 2列維持のまま、1枚が大きく見えるよう余白を強めに詰める
   - カード内 padding・gap・バッジ・タイトルを画像優先に再配分
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .yl-tag-nav {
    margin: 0 0 14px;
    padding: 12px;
    border-radius: 12px;
  }
  .yl-tag-nav__item {
    flex-basis: calc(50% - 6px);
    min-width: 0;
    max-width: none;
    min-height: 42px;
    padding: 8px 10px;
    font-size: 12px;
  }

  body.yorulog-listing .yl-tag-hero {
    margin-bottom: 12px;
    padding: 14px 12px;
    border-radius: 10px;
  }
  body.yorulog-listing .yl-tag-hero__title {
    font-size: 17px;
    margin-bottom: 8px;
  }
  body.yorulog-listing .yl-tag-hero__description {
    margin-bottom: 10px;
  }
  body.yorulog-listing .yl-tag-hero__description p {
    font-size: 12.5px;
    line-height: 1.75;
  }
  body.yorulog-listing .yl-tag-hero__related {
    gap: 6px;
  }
  body.yorulog-listing .yl-tag-hero__button {
    padding: 5px 10px;
    font-size: 11.5px;
  }

  /* ボタン帯: 横幅を引き締める */
  .yl-shelf-nav {
    margin: 0 0 14px;
    padding: 10px 10px;
    border-radius: 4px;
  }
  .yl-shelf-nav__list { gap: 6px; }
  .yl-shelf-nav__btn {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  /* グリッド: gap をさらに詰めてカード幅を最大化 */
  ul.yl-shelf {
    gap: 6px;
    margin: 0 0 24px !important;
  }

  /* カード本体: 角丸・影を軽めにして密度感を出す */
  .yl-shelf__link {
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  }

  /* サムネ: わずかに縦長寄りにして本棚感を強める */
  .yl-shelf__thumb {
    aspect-ratio: 5 / 7;
  }

  /* バッジ: 少しだけ小さく。存在感は残す */
  .yl-shelf__cat {
    top: 4px;
    left: 4px;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 2px;
  }

  /* ボディ: gap 増加分と釣り合わせてほんのり呼吸感を戻す */
  .yl-shelf__body { padding: 8px 10px 10px; }

  /* タイトル: 行間を少し広げて詰まり感を解消 */
  .yl-shelf__title {
    font-size: 12.5px;
    line-height: 1.55;
    font-weight: 700;
  }
}

/* さらに狭い端末（小型スマホ）: 端の余白を最小化 */
@media (max-width: 380px) {
  ul.yl-shelf { gap: 5px; }
  .yl-shelf__body { padding: 5px 7px 7px; }
  .yl-shelf__title { font-size: 12px; }
}

/* ============================================================
   一覧系ページ「売り場」レイアウト
   対象: body.yorulog-listing（home / archive / search）
   - サイドバー非表示
   - #main / #content の幅制約を解除し 1 カラム広幅に
   - コンテンツ領域のみ黒背景（ヘッダー/フッターは触らない）
   - 単体記事には一切影響しない
   ============================================================ */

/* --- サイドバーを一覧系でだけ非表示（DOM は残るが画面に出ない） --- */
body.yorulog-listing #sidebar,
body.yorulog-listing .sidebar,
body.yorulog-listing aside#sidebar { display: none !important; }

/* --- メインカラムの幅制約を解除（サイドバー分の予約領域を撤去） --- */
body.yorulog-listing #main,
body.yorulog-listing .main {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- 一覧系コンテンツの中央寄せ・最大幅（売り場感） --- */
body.yorulog-listing #content,
body.yorulog-listing .wrap {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* --- 黒背景の売り場（コンテンツ領域のみ） --- */
body.yorulog-listing #content {
  background: #0d0d0d;
  padding: 16px 12px 32px;
}
body.yorulog-listing #main,
body.yorulog-listing .main {
  background: transparent;
  color: #e8e8e8;
}

/* --- ページタイトル（カテゴリ/タグ/検索/日付アーカイブ）を白文字化 --- */
body.yorulog-listing .archive-title,
body.yorulog-listing .page-title,
body.yorulog-listing .entry-title,
body.yorulog-listing #main > h1,
body.yorulog-listing #main > h2 {
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 4px 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid #2a2a2a;
}
@media (min-width: 768px) {
  body.yorulog-listing .archive-title,
  body.yorulog-listing .page-title,
  body.yorulog-listing .entry-title,
  body.yorulog-listing #main > h1,
  body.yorulog-listing #main > h2 {
    font-size: 22px;
    margin: 6px 0 20px;
    padding-bottom: 12px;
  }
}

/* --- アーカイブ/検索のリード文（Cocoon が出す説明文）も白寄りに --- */
body.yorulog-listing .archive-meta,
body.yorulog-listing .archive-description,
body.yorulog-listing .category-description,
body.yorulog-listing .tag-description { color: #bfbfbf; }

/* --- カード: 黒背景の上で映える輪郭・影に微調整（カード自体は白維持） --- */
body.yorulog-listing .yl-shelf__link {
  border-color: #2a2a2a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
body.yorulog-listing .yl-shelf__link:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .75);
}

/* --- ページネーション（黒背景 + 横一列 flex 固定） ---
   Cocoon の .prev/.next が display:block や float で縦崩れするのを
   flex で上書きして確実に横一列・中央揃えにする */
body.yorulog-listing .pagination,
body.yorulog-listing .navigation.pagination,
body.yorulog-listing .nav-links,
body.yorulog-listing .wp-pagenavi {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 28px !important;
  padding: 0 !important;
  text-align: center;
}
/* ページ番号・前後リンク共通 */
body.yorulog-listing .page-numbers,
body.yorulog-listing .pagination a,
body.yorulog-listing .pagination span,
body.yorulog-listing .wp-pagenavi a,
body.yorulog-listing .wp-pagenavi span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  width: auto !important;
  min-width: 36px;
  height: 36px;
  padding: 0 10px !important;
  color: #eee !important;
  background: #1a1a1a !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
/* 現在のページ */
body.yorulog-listing .page-numbers.current,
body.yorulog-listing .pagination .current,
body.yorulog-listing .wp-pagenavi .current {
  background: #b01030 !important;
  color: #fff !important;
  border-color: #b01030 !important;
}
/* ホバー */
body.yorulog-listing .page-numbers:hover,
body.yorulog-listing .pagination a:hover,
body.yorulog-listing .wp-pagenavi a:hover { background: #2a2a2a !important; }
/* dots（…） */
body.yorulog-listing .page-numbers.dots { background: transparent !important; border-color: transparent !important; color: #666 !important; }

/* --- 一覧系の他ウィジェット・装飾箱も黒背景に馴染ませる --- */
body.yorulog-listing .main-before,
body.yorulog-listing .main-after,
body.yorulog-listing .breadcrumb,
body.yorulog-listing .breadcrumb a { color: #cfcfcf; }
body.yorulog-listing .breadcrumb { background: transparent; }

/* --- スマホ: padding を強制的に削って画面端まで使う ---
   Cocoon の .main が持つ独自 padding（通常 12〜16px）が
   #content の padding と重なり実効余白が大きくなる主因のため
   .main の padding を明示的にゼロ化する */
@media (max-width: 767px) {
  /* コンテンツ外枠の左右を極限まで詰める */
  body.yorulog-listing #content {
    padding: 10px 4px 20px !important;
  }
  /* Cocoon .main の独自 padding を消去（これが「隠れた余白」の正体） */
  body.yorulog-listing #main,
  body.yorulog-listing .main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* gap を少し広げて呼吸感を出す（画像サイズは維持） */
  ul.yl-shelf {
    gap: 9px !important;
  }
  /* ページタイトル */
  body.yorulog-listing .archive-title,
  body.yorulog-listing .page-title,
  body.yorulog-listing .entry-title,
  body.yorulog-listing #main > h1,
  body.yorulog-listing #main > h2 {
    font-size: 15px;
    margin: 2px 0 10px;
    padding-bottom: 8px;
  }
  /* ページネーションもスマホ向けに詰める */
  body.yorulog-listing .page-numbers,
  body.yorulog-listing .pagination a,
  body.yorulog-listing .pagination span {
    min-width: 32px;
    height: 32px;
    padding: 0 8px !important;
    font-size: 13px;
  }
}

/* ============================================================
   トップ 3ブロック構成 (yl-home-*)  ※home.php でのみ使用
   - カード部分は既存 .yl-shelf を再利用するため追加スタイル不要
   - 追加するのは「セクション見出し / 説明 / もっと見るボタン / カテゴリーボタングリッド」のみ
   ============================================================ */

.yl-home-section {
  margin: 0 0 36px;
}

.yl-home-section__head {
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #2a2a2a;
}

.yl-home-section__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 6px;
  padding-left: 10px;
  border-left: 4px solid #b01030;
}

.yl-home-section__lead {
  font-size: 13px;
  line-height: 1.7;
  color: #bfbfbf;
  margin: 0;
}

/* 「もっと見る」ボタン（セクション末尾の中央寄せ導線） */
.yl-home-section__more {
  margin-top: 14px;
  text-align: center;
}
.yl-home-more-btn {
  display: inline-block;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  color: #fff !important;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  text-decoration: none !important;
  line-height: 1.4;
  transition: background .2s, transform .15s, border-color .2s;
}
.yl-home-more-btn:hover {
  background: #2a2a2a;
  border-color: #4a4a4a;
  transform: translateY(-1px);
}
.yl-home-more-btn:visited { color: #fff !important; }

/* --- カテゴリーで探す: ボタングリッド --- */
/* Cocoon の ul/li デフォルト装飾を打ち消すため、詳細度を .yl-shelf と揃える */
ul.yl-home-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.yl-home-cats > li.yl-home-cats__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.yl-home-cats > li.yl-home-cats__item::before,
ul.yl-home-cats > li.yl-home-cats__item::marker { content: none !important; }

.yl-home-cats__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.4;
  transition: background .2s, transform .15s, border-color .2s;
}
.yl-home-cats__btn:hover {
  background: #b01030;
  border-color: #b01030;
  transform: translateY(-1px);
}
.yl-home-cats__btn:visited { color: #fff !important; }

/* タブレット: 3列 */
@media (min-width: 768px) {
  .yl-home-section__title { font-size: 22px; }
  .yl-home-section__lead  { font-size: 14px; }
  ul.yl-home-cats         { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .yl-home-cats__btn      { min-height: 60px; font-size: 15px; }
}

/* PC: 4列まで */
@media (min-width: 1024px) {
  ul.yl-home-cats { grid-template-columns: repeat(4, 1fr); }
}

/* スマホ: 見出し・余白を詰める（body.yorulog-listing の余白ゼロ設定と整合） */
@media (max-width: 767px) {
  .yl-home-section        { margin-bottom: 24px; }
  .yl-home-section__head  { margin-bottom: 10px; padding-bottom: 8px; }
  .yl-home-section__title { font-size: 16px; }
  .yl-home-section__lead  { font-size: 12.5px; }
  ul.yl-home-cats         { gap: 8px; }
  .yl-home-cats__btn      { min-height: 48px; font-size: 13.5px; }
}

/* ============================================================
   トップページのみヘッダーをスリム化
   - 対象は body.home（WordPressトップ）だけ
   - 実 HTML に合わせ #header-in / h1.logo.logo-header.logo-text /
     .site-name-text(-link) にピンポイントで指定
   - ヘッダー自体は非表示にしない（グローバルナビは残す）
   - 他ページ（アーカイブ/投稿詳細/固定ページ）には一切影響しない
   ============================================================ */
body.home #header-in {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

body.home h1.logo.logo-header.logo-text {
  margin: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}

body.home .site-name-text,
body.home .site-name-text-link,
body.home .logo.logo-header.logo-text a {
  font-size: 22px !important;
  line-height: 1.2 !important;
}

/* キャッチフレーズはトップだけ非表示（他ページでは出る） */
body.home .tagline {
  display: none !important;
}

/* スマホでさらに詰める */
@media (max-width: 767px) {
  body.home h1.logo.logo-header.logo-text {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  body.home .site-name-text,
  body.home .site-name-text-link,
  body.home .logo.logo-header.logo-text a {
    font-size: 18px !important;
  }
}

/* ============================================================
   /ranking/ 固定ページ専用スタイル（body.yorulog-ranking）
   - 通常投稿・タグページ・カテゴリページに影響しない
   - .yl-ranking-* クラスを固定ページ本文に手動で付与して使う
   ============================================================ */

/* --- コンテナカード --- */
.yl-ranking-page {
  padding: 24px 20px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  color: #e0e0e0;
}

/* --- リード文 --- */
.yl-ranking-lead {
  font-size: 14px;
  line-height: 1.85;
  color: #bfbfbf;
  margin: 0 0 20px;
}

/* --- 注意書き・補足 --- */
.yl-ranking-notice {
  font-size: 12px;
  color: #888;
  margin: 16px 0 0;
  line-height: 1.7;
}

/* --- ボタングループ --- */
.yl-ranking-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- 各タグボタン --- */
.yl-ranking-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc(50% - 12px);
  min-width: 140px;
  min-height: 52px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #f0f0f0 !important;
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  text-decoration: none !important;
  text-align: center;
  transition: background .2s, border-color .2s, transform .15s;
}
.yl-ranking-button:hover {
  color: #fff !important;
  background: #b01030;
  border-color: #b01030;
  transform: translateY(-2px);
}
.yl-ranking-button:visited { color: #f0f0f0 !important; }

/* タブレット: 3列 */
@media (min-width: 768px) {
  .yl-ranking-page  { padding: 28px 24px; }
  .yl-ranking-lead  { font-size: 15px; }
  .yl-ranking-button {
    flex: 1 1 calc(33.333% - 12px);
    min-height: 58px;
    font-size: 15px;
  }
}

/* PC: 5列（主力5タグを1行に） */
@media (min-width: 1024px) {
  .yl-ranking-button {
    flex: 1 1 calc(20% - 12px);
  }
}

/* スマホ: 2列維持・余白を詰める */
@media (max-width: 767px) {
  .yl-ranking-page    { padding: 16px 14px; border-radius: 10px; }
  .yl-ranking-lead    { font-size: 13px; margin-bottom: 16px; }
  .yl-ranking-buttons { gap: 8px; }
  .yl-ranking-button  {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 8px;
  }
}

/* --- /ranking/ ページのみ Cocoon SNS シェアボタンを非表示 --- */
body.yorulog-ranking .sns-share,
body.yorulog-ranking .sns-buttons,
body.yorulog-ranking .entry-share,
body.yorulog-ranking .share-buttons {
  display: none !important;
}

/* ============================================================
   個別投稿ページ ダークテーマ（body.single）
   - トップ・タグ・カテゴリ・固定ページには影響しない
   - 管理画面には影響しない（body.single は front 側のみ付く）
   - CTAボタン・画像は既存スタイルをそのまま維持
   ============================================================ */

/* ページ背景 */
body.single {
  background: #070707 !important;
}

/* コンテンツラッパー・メインカラムを透過にしてページ背景を見せる */
body.single #content,
body.single .content,
body.single #main,
body.single .main {
  background: transparent;
  color: #f2f2f2;
}

/* 記事カード本体 */
body.single .article {
  background: #111;
  border-radius: 8px;
  color: #f2f2f2;
}

/* 記事タイトル */
body.single .entry-title {
  color: #ffffff !important;
}

/* パンくずリスト */
body.single .breadcrumb,
body.single .breadcrumb a {
  color: #999 !important;
  background: transparent !important;
}

/* 記事メタ（投稿日・著者など） */
body.single .entry-meta,
body.single .post-date,
body.single .author,
body.single .cat-label-list {
  color: #aaa !important;
}

/* 本文テキスト */
body.single .entry-content {
  color: #f2f2f2;
}

/* 本文見出し */
body.single .entry-content h1,
body.single .entry-content h2,
body.single .entry-content h3,
body.single .entry-content h4,
body.single .entry-content h5,
body.single .entry-content h6 {
  color: #ffffff;
}

/* 本文リンク（CTAボタン系は除外して既存スタイルを維持） */
body.single .entry-content a:not([class*="cta"]):not([class*="yl-"]) {
  color: #8ab4f8;
}
body.single .entry-content a:not([class*="cta"]):not([class*="yl-"]):hover {
  color: #aecbfa;
}

/* 本文 p・li の文字色 */
body.single .entry-content p,
body.single .entry-content li,
body.single .entry-content td,
body.single .entry-content th {
  color: #f2f2f2;
}

/* 本文テーブルの枠線 */
body.single .entry-content table {
  border-color: rgba(255, 255, 255, 0.1);
}
body.single .entry-content th,
body.single .entry-content td {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}

/* --- yl- 単ページクラスのダーク上書き --- */

/* 冒頭一言 */
body.single .yl-intro {
  color: #e8e8e8;
}

/* 終盤セクション */
body.single .yl-closing {
  background: #1a1a1a;
  border-left-color: #e8380d;
}

/* こんな人におすすめ */
body.single .yl-target {
  color: #e0e0e0;
}
body.single .yl-target li {
  color: #e0e0e0;
}

/* 最後の誘導文 */
body.single .yl-outro {
  color: #cfcfcf;
}

/* 作品情報テーブル */
body.single .yl-meta-table th {
  background: #1e1e1e !important;
  color: #cfcfcf !important;
  border-color: #2a2a2a !important;
}
body.single .yl-meta-table td {
  color: #f2f2f2 !important;
  border-color: #2a2a2a !important;
  background: #141414 !important;
}

/* --- 関連記事ブロック ダーク上書き --- */
body.single .yorulog-related {
  border-top-color: #2a2a2a;
}

body.single .yorulog-related__heading {
  color: #fff;
}

body.single .yorulog-related__item {
  background: #1a1a1a;
  border-color: #2a2a2a;
}
body.single .yorulog-related__item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}
body.single .yorulog-related__item a {
  color: #f2f2f2;
}

body.single .yorulog-related__title {
  color: #f2f2f2;
}

/* --- サイドバー（表示される場合） --- */
body.single #sidebar,
body.single .sidebar {
  background: transparent;
  color: #e0e0e0;
}
body.single #sidebar .widget-title,
body.single .sidebar .widget-title {
  color: #fff;
  border-bottom-color: #2a2a2a;
}
body.single #sidebar a,
body.single .sidebar a {
  color: #8ab4f8;
}

/* スマホ余白調整 */
@media (max-width: 767px) {
  body.single .article {
    border-radius: 4px;
  }
}

/* ============================================================
   body.single 白/薄背景ボックス内の文字を黒系に戻す補正
   - 黒背景全体はそのまま維持
   - 白・薄グレー背景のCocoonボックス・Gutenbergブロック内のみ対象
   - CTAボタン・画像・FANZAボタンには影響しない
   ============================================================ */

/* --- Cocoon 目次（toc-block） --- */
body.single .toc-block {
  color: #222 !important;
  background: #f9f9f9;
}
body.single .toc-block * {
  color: #222 !important;
}
body.single .toc-block a {
  color: #1a6fba !important;
}

/* --- Cocoon 各種ボックス（info/check/caution/bad/point/note/speech 系） ---
   Cocoon では .box-block に加え .info-box / .check-box 等の個別クラスが付く */
body.single .entry-content .box-block,
body.single .entry-content .info-box,
body.single .entry-content .information-box,
body.single .entry-content .check-box,
body.single .entry-content .caution-box,
body.single .entry-content .warning-box,
body.single .entry-content .alert-box,
body.single .entry-content .ng-box,
body.single .entry-content .bad-box,
body.single .entry-content .point-box,
body.single .entry-content .note-box,
body.single .entry-content .speech-box,
body.single .entry-content .yellow-box,
body.single .entry-content .green-box,
body.single .entry-content .blue-box,
body.single .entry-content .red-box,
body.single .entry-content .purple-box,
body.single .entry-content .black-box {
  color: #222 !important;
}
body.single .entry-content .box-block p,
body.single .entry-content .box-block li,
body.single .entry-content .info-box p,
body.single .entry-content .info-box li,
body.single .entry-content .information-box p,
body.single .entry-content .information-box li,
body.single .entry-content .check-box p,
body.single .entry-content .check-box li,
body.single .entry-content .caution-box p,
body.single .entry-content .caution-box li,
body.single .entry-content .warning-box p,
body.single .entry-content .warning-box li,
body.single .entry-content .alert-box p,
body.single .entry-content .alert-box li,
body.single .entry-content .ng-box p,
body.single .entry-content .ng-box li,
body.single .entry-content .bad-box p,
body.single .entry-content .bad-box li,
body.single .entry-content .point-box p,
body.single .entry-content .point-box li,
body.single .entry-content .note-box p,
body.single .entry-content .note-box li,
body.single .entry-content .speech-box p,
body.single .entry-content .speech-box li,
body.single .entry-content .yellow-box p,
body.single .entry-content .yellow-box li,
body.single .entry-content .green-box p,
body.single .entry-content .green-box li,
body.single .entry-content .blue-box p,
body.single .entry-content .blue-box li,
body.single .entry-content .red-box p,
body.single .entry-content .red-box li,
body.single .entry-content .purple-box p,
body.single .entry-content .purple-box li,
body.single .entry-content .black-box p,
body.single .entry-content .black-box li {
  color: #222 !important;
}

/* --- Cocoon ブログカード（内部リンクカード） --- */
body.single .blogcard-wrap,
body.single .blogcard-wrap * {
  color: #222 !important;
}

/* --- Gutenberg コアブロック（白背景系） --- */
body.single .entry-content .wp-block-table td,
body.single .entry-content .wp-block-table th {
  color: #222 !important;
  border-color: #ccc !important;
  background: transparent !important;
}
body.single .entry-content .wp-block-quote,
body.single .entry-content .wp-block-pullquote {
  color: #f2f2f2;
  border-left-color: #555;
}
body.single .entry-content .wp-block-code,
body.single .entry-content .wp-block-preformatted,
body.single .entry-content pre,
body.single .entry-content code {
  color: #f0f0f0;
  background: #1e1e1e;
  border-color: #2a2a2a;
}

/* --- 汎用: インラインで白/薄背景が指定されている要素への対応
   （background: #fff / background: #f5f5f5 / background: white 等） ---
   注: CSS属性セレクタで完全網羅はできないため、主なパターンのみ対応 */
body.single .entry-content [style*="background:#f"],
body.single .entry-content [style*="background: #f"],
body.single .entry-content [style*="background:white"],
body.single .entry-content [style*="background: white"],
body.single .entry-content [style*="background:#e"],
body.single .entry-content [style*="background: #e"] {
  color: #222 !important;
}
body.single .entry-content [style*="background:#f"] p,
body.single .entry-content [style*="background: #f"] p,
body.single .entry-content [style*="background:white"] p,
body.single .entry-content [style*="background: white"] p,
body.single .entry-content [style*="background:#e"] p,
body.single .entry-content [style*="background: #e"] p {
  color: #222 !important;
}

/* =========================================================
   YoruLog single post dark theme override
   個別投稿ページ全体・関連記事・関連作品の黒背景化
   ========================================================= */

body.single,
body.single-post {
  background: #050505 !important;
  color: #f2f2f2 !important;
}

body.single #container,
body.single-post #container,
body.single .container,
body.single-post .container,
body.single #content,
body.single-post #content,
body.single .content,
body.single-post .content,
body.single #main,
body.single-post #main,
body.single .main,
body.single-post .main {
  background: #050505 !important;
  color: #f2f2f2 !important;
}

/* 記事本体 */
body.single .article,
body.single-post .article,
body.single article,
body.single-post article,
body.single .entry,
body.single-post .entry {
  background: #101010 !important;
  color: #f2f2f2 !important;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* 記事内テキスト */
body.single .article p,
body.single-post .article p,
body.single .entry-content,
body.single-post .entry-content,
body.single .entry-content p,
body.single-post .entry-content p,
body.single .entry-content li,
body.single-post .entry-content li {
  color: #e8e8e8 !important;
}

body.single .entry-title,
body.single-post .entry-title,
body.single .article h1,
body.single-post .article h1,
body.single .article h2,
body.single-post .article h2,
body.single .article h3,
body.single-post .article h3,
body.single .article h4,
body.single-post .article h4 {
  color: #ffffff !important;
}

/* 記事下部エリア */
body.single .under-entry-content,
body.single-post .under-entry-content,
body.single .entry-footer,
body.single-post .entry-footer,
body.single .pager-post-navi,
body.single-post .pager-post-navi,
body.single .related-entries,
body.single-post .related-entries,
body.single .related-entry-heading,
body.single-post .related-entry-heading,
body.single .related-list,
body.single-post .related-list,
body.single .related-posts,
body.single-post .related-posts,
body.single .related,
body.single-post .related {
  background: #050505 !important;
  color: #f2f2f2 !important;
}

/* 関連作品・関連記事の見出し */
body.single .related-entry-heading,
body.single-post .related-entry-heading,
body.single .related h2,
body.single-post .related h2,
body.single .related h3,
body.single-post .related h3,
body.single .under-entry-content h2,
body.single-post .under-entry-content h2,
body.single .under-entry-content h3,
body.single-post .under-entry-content h3 {
  color: #ffffff !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Cocoon系カード・関連記事カード・ブログカード */
body.single .a-wrap,
body.single-post .a-wrap,
body.single .entry-card-wrap,
body.single-post .entry-card-wrap,
body.single .related-entry-card-wrap,
body.single-post .related-entry-card-wrap,
body.single .related-entry-card,
body.single-post .related-entry-card,
body.single .entry-card,
body.single-post .entry-card,
body.single .blogcard-wrap,
body.single-post .blogcard-wrap,
body.single .blogcard,
body.single-post .blogcard,
body.single .internal-blogcard,
body.single-post .internal-blogcard,
body.single .external-blogcard,
body.single-post .external-blogcard {
  background: #151515 !important;
  color: #f2f2f2 !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

/* カード内文字 */
body.single .a-wrap *,
body.single-post .a-wrap *,
body.single .entry-card *,
body.single-post .entry-card *,
body.single .related-entry-card *,
body.single-post .related-entry-card *,
body.single .blogcard *,
body.single-post .blogcard * {
  color: #f2f2f2 !important;
}

/* カード内の補足文字 */
body.single .entry-card-snippet,
body.single-post .entry-card-snippet,
body.single .related-entry-card-snippet,
body.single-post .related-entry-card-snippet,
body.single .blogcard-snippet,
body.single-post .blogcard-snippet,
body.single .entry-card-meta,
body.single-post .entry-card-meta,
body.single .related-entry-card-meta,
body.single-post .related-entry-card-meta {
  color: #cfcfcf !important;
}

/* リンク色 */
body.single .entry-content a,
body.single-post .entry-content a,
body.single .related a,
body.single-post .related a,
body.single .under-entry-content a,
body.single-post .under-entry-content a {
  color: #7fb3ff !important;
}

/* 白背景・薄背景ブロックは文字を濃くする */
body.single .entry-content .has-white-background-color,
body.single-post .entry-content .has-white-background-color,
body.single .entry-content .has-light-gray-background-color,
body.single-post .entry-content .has-light-gray-background-color,
body.single .entry-content [style*="background:#fff"],
body.single-post .entry-content [style*="background:#fff"],
body.single .entry-content [style*="background: #fff"],
body.single-post .entry-content [style*="background: #fff"],
body.single .entry-content [style*="background-color:#fff"],
body.single-post .entry-content [style*="background-color:#fff"],
body.single .entry-content [style*="background-color: #fff"],
body.single-post .entry-content [style*="background-color: #fff"],
body.single .entry-content [style*="background:#f"],
body.single-post .entry-content [style*="background:#f"],
body.single .entry-content [style*="background: #f"],
body.single-post .entry-content [style*="background: #f"],
body.single .entry-content [style*="background-color:#f"],
body.single-post .entry-content [style*="background-color:#f"],
body.single .entry-content [style*="background-color: #f"],
body.single-post .entry-content [style*="background-color: #f"] {
  color: #222 !important;
}

/* 白背景ブロック内は子要素も濃色 */
body.single .entry-content .has-white-background-color *,
body.single-post .entry-content .has-white-background-color *,
body.single .entry-content .has-light-gray-background-color *,
body.single-post .entry-content .has-light-gray-background-color *,
body.single .entry-content [style*="background:#fff"] *,
body.single-post .entry-content [style*="background:#fff"] *,
body.single .entry-content [style*="background: #fff"] *,
body.single-post .entry-content [style*="background: #fff"] *,
body.single .entry-content [style*="background-color:#fff"] *,
body.single-post .entry-content [style*="background-color:#fff"] *,
body.single .entry-content [style*="background-color: #fff"] *,
body.single-post .entry-content [style*="background-color: #fff"] * {
  color: #222 !important;
}

/* サイドバーがある場合 */
body.single .sidebar,
body.single-post .sidebar,
body.single .sidebar .widget,
body.single-post .sidebar .widget {
  background: #101010 !important;
  color: #f2f2f2 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

body.single .sidebar a,
body.single-post .sidebar a {
  color: #f2f2f2 !important;
}

@media (max-width: 768px) {
  body.single .article,
  body.single-post .article {
    border-radius: 12px;
  }
}

/* ============================================================
   body.single 黒背景化 補正パッチ
   1. FANZAボタン・CTAボタンの文字色を白に復元
   2. 本文h2/h3見出し帯の背景を黒系に
   3. 関連作品カード（yorulog-related）背景を確実に黒系に
   ============================================================ */

/* --- 1. FANZAボタン・CTAボタンの文字色保護 ---
   body.single .entry-content a { color: #7fb3ff !important } を
   詳細度（0,3,1）で上書きして白に戻す */
body.single .entry-content .cta-btn,
body.single-post .entry-content .cta-btn,
body.single .entry-content .cta-fanza,
body.single-post .entry-content .cta-fanza,
body.single .entry-content .cta-dlsite,
body.single-post .entry-content .cta-dlsite,
body.single .entry-content .cta-fanza-outline,
body.single-post .entry-content .cta-fanza-outline,
body.single .entry-content [class*="cta-"],
body.single-post .entry-content [class*="cta-"],
body.single .entry-content [class*="yl-cta"],
body.single-post .entry-content [class*="yl-cta"] {
  color: #fff !important;
}

/* FANZAの赤ボタンは背景色も明示的に維持 */
body.single .entry-content .cta-fanza,
body.single-post .entry-content .cta-fanza {
  background: #b01030 !important;
  border-color: #b01030 !important;
}

/* --- 2. 本文h2/h3見出し帯の背景を黒系に ---
   Cocoon Customizerが設定する薄グレー背景を上書き */
body.single .entry-content h2,
body.single-post .entry-content h2 {
  background-color: #1a1a1a !important;
  color: #fff !important;
  border-left-color: #b01030 !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
body.single .entry-content h3,
body.single-post .entry-content h3 {
  background-color: #161616 !important;
  color: #fff !important;
  border-left-color: rgba(255, 255, 255, 0.25) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- 3. 関連作品カード（yorulog-related）を確実に黒系に ---
   !important なしのルールがCocoon側に負けているため !important で上書き */
body.single .yorulog-related,
body.single-post .yorulog-related {
  border-top-color: #2a2a2a !important;
  background: transparent !important;
}
body.single .yorulog-related__heading,
body.single-post .yorulog-related__heading {
  color: #fff !important;
  background: transparent !important;
  border-left-color: #e8380d !important;
}
body.single .yorulog-related__item,
body.single-post .yorulog-related__item {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
}
body.single .yorulog-related__item a,
body.single-post .yorulog-related__item a {
  color: #f2f2f2 !important;
  background: transparent !important;
}
body.single .yorulog-related__title,
body.single-post .yorulog-related__title {
  color: #f2f2f2 !important;
}
body.single .yorulog-related__label,
body.single-post .yorulog-related__label {
  color: #fff !important;
}

/* ============================================================
   個別投稿ページ下部のカテゴリ・タグリンクを非表示
   - 対象: body.single / body.single-post のみ
   - タグ自体・内部リンク構造は維持（表示のみ非表示）
   - シェアボタン・FANZAボタン・関連作品には影響なし
   ============================================================ */
body.single .entry-categories,
body.single-post .entry-categories,
body.single .entry-tags,
body.single-post .entry-tags,
body.single .cat-link,
body.single-post .cat-link,
body.single .tag-link,
body.single-post .tag-link,
body.single .footer-meta,
body.single-post .footer-meta,
body.single .post-taxonomies,
body.single-post .post-taxonomies,
body.single .taxonomies,
body.single-post .taxonomies,
body.single .category-link,
body.single-post .category-link,
body.single .entry-meta-items,
body.single-post .entry-meta-items {
  display: none !important;
}

/* ============================================================
   検索ボタン・サイドバー導線の一時非表示（復活しやすいCSS運用）
   - 対象: トップ / アーカイブ / タグ / カテゴリ / 検索 / 固定 / 単ページ
   - 目的: 「トップ → ランキング/主力タグ → タグ → 記事 → FANZA」導線を優先
   - 検索機能自体は削除しない（表示のみ非表示）
   ============================================================ */

/* --- スマホ下部の検索ボタン（Cocoon候補クラスをまとめて非表示） --- */
body.home .mobile-menu-search,
body.archive .mobile-menu-search,
body.search .mobile-menu-search,
body.page .mobile-menu-search,
body.single .mobile-menu-search,
body.home .search-menu-button,
body.archive .search-menu-button,
body.search .search-menu-button,
body.page .search-menu-button,
body.single .search-menu-button,
body.home .navi-menu-search,
body.archive .navi-menu-search,
body.search .navi-menu-search,
body.page .navi-menu-search,
body.single .navi-menu-search,
body.home .go-to-search-button,
body.archive .go-to-search-button,
body.search .go-to-search-button,
body.page .go-to-search-button,
body.single .go-to-search-button,
body.home .search-menu-icon,
body.archive .search-menu-icon,
body.search .search-menu-icon,
body.page .search-menu-icon,
body.single .search-menu-icon,
body.home .footer-mobile-buttons .menu-button-search,
body.archive .footer-mobile-buttons .menu-button-search,
body.search .footer-mobile-buttons .menu-button-search,
body.page .footer-mobile-buttons .menu-button-search,
body.single .footer-mobile-buttons .menu-button-search,
body.home .mobile-footer-menu-buttons .menu-button-search,
body.archive .mobile-footer-menu-buttons .menu-button-search,
body.search .mobile-footer-menu-buttons .menu-button-search,
body.page .mobile-footer-menu-buttons .menu-button-search,
body.single .mobile-footer-menu-buttons .menu-button-search {
  display: none !important;
}

/* --- サイドバー全体を非表示 --- */
body.home #sidebar,
body.archive #sidebar,
body.search #sidebar,
body.page #sidebar,
body.single #sidebar,
body.home .sidebar,
body.archive .sidebar,
body.search .sidebar,
body.page .sidebar,
body.single .sidebar,
body.home .side,
body.archive .side,
body.search .side,
body.page .side,
body.single .side,
body.home .widget-area,
body.archive .widget-area,
body.search .widget-area,
body.page .widget-area,
body.single .widget-area,
body.home .sidebar-wrapper,
body.archive .sidebar-wrapper,
body.search .sidebar-wrapper,
body.page .sidebar-wrapper,
body.single .sidebar-wrapper {
  display: none !important;
}

/* --- サイドバー分の横幅制約を解除してメインを自然に広げる --- */
body.home #main,
body.archive #main,
body.search #main,
body.page #main,
body.single #main,
body.home .main,
body.archive .main,
body.search .main,
body.page .main,
body.single .main {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* コンテンツ横幅は既存一覧と同等の上限に寄せる */
body.home #content,
body.archive #content,
body.search #content,
body.page #content,
body.single #content,
body.home .content,
body.archive .content,
body.search .content,
body.page .content,
body.single .content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   YoruLog: Cocoonサイドバー強制非表示・1カラム化
   ========================================================= */

/* Cocoon/WordPress系サイドバー候補をまとめて非表示 */
body.home #sidebar,
body.archive #sidebar,
body.search #sidebar,
body.page #sidebar,
body.single #sidebar,
body.home .sidebar,
body.archive .sidebar,
body.search .sidebar,
body.page .sidebar,
body.single .sidebar,
body.home .sidebar-left,
body.archive .sidebar-left,
body.search .sidebar-left,
body.page .sidebar-left,
body.single .sidebar-left,
body.home .sidebar-right,
body.archive .sidebar-right,
body.search .sidebar-right,
body.page .sidebar-right,
body.single .sidebar-right,
body.home .side,
body.archive .side,
body.search .side,
body.page .side,
body.single .side,
body.home aside,
body.archive aside,
body.search aside,
body.page aside,
body.single aside,
body.home .widget-sidebar,
body.archive .widget-sidebar,
body.search .widget-sidebar,
body.page .widget-sidebar,
body.single .widget-sidebar,
body.home .sidebar-widget,
body.archive .sidebar-widget,
body.search .sidebar-widget,
body.page .sidebar-widget,
body.single .sidebar-widget,
body.home .widget-area,
body.archive .widget-area,
body.search .widget-area,
body.page .widget-area,
body.single .widget-area {
  display: none !important;
}

/* Cocoonのメイン領域を1カラム化 */
body.home .content-in,
body.archive .content-in,
body.search .content-in,
body.page .content-in,
body.single .content-in {
  display: block !important;
}

body.home main.main,
body.archive main.main,
body.search main.main,
body.page main.main,
body.single main.main,
body.home #main,
body.archive #main,
body.search #main,
body.page #main,
body.single #main,
body.home .main,
body.archive .main,
body.search .main,
body.page .main,
body.single .main {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* サイドバー分の余白が残る場合の解除 */
body.home .content,
body.archive .content,
body.search .content,
body.page .content,
body.single .content,
body.home #content,
body.archive #content,
body.search #content,
body.page #content,
body.single #content {
  display: block !important;
}

/* ============================================================
   スマホ下部固定メニュー: 「サイドバー」ボタンのみ非表示
   - PCには影響させない
   - 「ホーム」「トップ」は維持
   ============================================================ */
@media (max-width: 767px) {
  .mobile-footer-menu-buttons .menu-button-sidebar,
  .mobile-footer-menu-buttons .sidebar-menu-button,
  .mobile-footer-menu-buttons .navi-menu-sidebar,
  .footer-mobile-buttons .menu-button-sidebar,
  .footer-mobile-buttons .sidebar-menu-button,
  .footer-mobile-buttons .navi-menu-sidebar {
    display: none !important;
  }

  /* サイドバー非表示後の下部メニュー幅を整える */
  .mobile-footer-menu-buttons .menu-button,
  .footer-mobile-buttons .menu-button {
    flex: 1 1 0;
  }
}

/* ============================================================
   全ページ共通: YoruLogブランドヘッダー（黒背景）
   - トップ / タグ / 個別 / ランキング / カテゴリ / 検索で統一
   - 管理バーには影響しない（フロント側ヘッダーのみ）
   ============================================================ */

/* ヘッダー土台 */
body.home #header,
body.archive #header,
body.search #header,
body.page #header,
body.single #header,
body.home .header,
body.archive .header,
body.search .header,
body.page .header,
body.single .header {
  background: #080808 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ヘッダー内側余白（高さを抑える） */
body.home #header-in,
body.archive #header-in,
body.search #header-in,
body.page #header-in,
body.single #header-in {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

body.home h1.logo.logo-header.logo-text,
body.archive h1.logo.logo-header.logo-text,
body.search h1.logo.logo-header.logo-text,
body.page h1.logo.logo-header.logo-text,
body.single h1.logo.logo-header.logo-text {
  margin: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  line-height: 1.2 !important;
}

/* サイト名 */
body.home .site-name-text,
body.home .site-name-text-link,
body.home .logo.logo-header.logo-text a,
body.archive .site-name-text,
body.archive .site-name-text-link,
body.archive .logo.logo-header.logo-text a,
body.search .site-name-text,
body.search .site-name-text-link,
body.search .logo.logo-header.logo-text a,
body.page .site-name-text,
body.page .site-name-text-link,
body.page .logo.logo-header.logo-text a,
body.single .site-name-text,
body.single .site-name-text-link,
body.single .logo.logo-header.logo-text a {
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

/* サブコピー（存在する場合のみ表示） */
body.home .tagline,
body.home .site-description,
body.archive .tagline,
body.archive .site-description,
body.search .tagline,
body.search .site-description,
body.page .tagline,
body.page .site-description,
body.single .tagline,
body.single .site-description {
  display: block !important;
  color: #bdbdbd !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin-top: 4px !important;
}

/* スマホはさらにコンパクト */
@media (max-width: 767px) {
  body.home h1.logo.logo-header.logo-text,
  body.archive h1.logo.logo-header.logo-text,
  body.search h1.logo.logo-header.logo-text,
  body.page h1.logo.logo-header.logo-text,
  body.single h1.logo.logo-header.logo-text {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body.home .site-name-text,
  body.home .site-name-text-link,
  body.home .logo.logo-header.logo-text a,
  body.archive .site-name-text,
  body.archive .site-name-text-link,
  body.archive .logo.logo-header.logo-text a,
  body.search .site-name-text,
  body.search .site-name-text-link,
  body.search .logo.logo-header.logo-text a,
  body.page .site-name-text,
  body.page .site-name-text-link,
  body.page .logo.logo-header.logo-text a,
  body.single .site-name-text,
  body.single .site-name-text-link,
  body.single .logo.logo-header.logo-text a {
    font-size: 18px !important;
  }

  body.home .tagline,
  body.home .site-description,
  body.archive .tagline,
  body.archive .site-description,
  body.search .tagline,
  body.search .site-description,
  body.page .tagline,
  body.page .site-description,
  body.single .tagline,
  body.single .site-description {
    font-size: 11px !important;
    margin-top: 2px !important;
  }
}

/* ============================================================
   トップ / アーカイブ（タグ・カテゴリ含む）のヘッダー直下ラインを除去
   - 個別投稿ページの表示は維持
   ============================================================ */
body.home #header,
body.home .header,
body.archive #header,
body.archive .header,
body.home #header-container,
body.home .header-container,
body.archive #header-container,
body.archive .header-container {
  border-bottom: none !important;
  box-shadow: none !important;
}

body.home #header-in,
body.archive #header-in,
body.home .header-in,
body.archive .header-in,
body.home .navi,
body.archive .navi {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ============================================================
   トップ / アーカイブ（タグ・カテゴリ含む）：
   ヘッダー直下から #content までの白背景を黒で埋める
   - body.single には同等指定が既にある（#050505）
   - body.yorulog-listing は #content のみ黒で、
     #wrapper / #container / .content-in が白のまま残っているのが白ライン原因
   ============================================================ */
body.home,
body.archive {
  background: #070707 !important;
}

body.home #wrapper,
body.archive #wrapper,
body.home #container,
body.archive #container,
body.home .container,
body.archive .container,
body.home .content-in,
body.archive .content-in,
body.home .wrap,
body.archive .wrap {
  background: #070707 !important;
}

/* パンくずリストも黒背景に合わせる */
body.home .breadcrumb,
body.archive .breadcrumb,
body.home .breadcrumb a,
body.archive .breadcrumb a {
  background: transparent !important;
  color: #999 !important;
}

/* ============================================================
   全ページ共通ヘッダー: サブコピー追加
   - CSS ::after 疑似要素で「YoruLog」の直下に表示
   - WP管理画面のサイト説明（.tagline）と独立した実装
   - WP .tagline 要素は重複防止のため非表示化
   ============================================================ */

/* サブコピー本体（.logo.logo-header.logo-text は h1 / p どちらでも対応） */
body.home .logo.logo-header.logo-text::after,
body.archive .logo.logo-header.logo-text::after,
body.search .logo.logo-header.logo-text::after,
body.page .logo.logo-header.logo-text::after,
body.single .logo.logo-header.logo-text::after {
  display: block;
  content: "同人作品を、ジャンル別に探せるレビュー棚";
  color: #bdbdbd;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 3px;
  letter-spacing: 0.02em;
}

/* WP タグライン（.tagline / .site-description）は重複を防ぐため非表示 */
body.home .tagline,
body.home .site-description,
body.archive .tagline,
body.archive .site-description,
body.search .tagline,
body.search .site-description,
body.page .tagline,
body.page .site-description,
body.single .tagline,
body.single .site-description {
  display: none !important;
}

/* スマホはフォントを小さく抑える */
@media (max-width: 767px) {
  body.home .logo.logo-header.logo-text::after,
  body.archive .logo.logo-header.logo-text::after,
  body.search .logo.logo-header.logo-text::after,
  body.page .logo.logo-header.logo-text::after,
  body.single .logo.logo-header.logo-text::after {
    font-size: 11px;
    margin-top: 2px;
  }
}