/*
Theme Name: Cocoon Child
Template: cocoon-master
Description: Cocoon用子テーマ（av-ranking.jp）
Author: yuya
Version: 1.0
*/

/* =========================
   ここからカスタムCSS
========================= */

/* カード全体の調整 */
.article-card,
.entry-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover,
.entry-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* アイキャッチ画像（16:9固定） */
.entry-card-thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* タイトル調整 */
.entry-card-title {
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 8px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* タイトル2行で切る */
  -webkit-box-orient: vertical;
}

/* サブ情報 */
.entry-card-meta {
  font-size: 0.7rem;
  color: #666;
}

/* カード同士の間隔 */
.article-card-wrap {
  margin-bottom: 18px;
}

/* 本文の行間・余白 */
.article p {
  line-height: 1.9;
  margin-bottom: 1.3em;
  font-size: 1.05rem;
}

/* 見出し h2 */
.article h2 {
  border-left: 6px solid #c9302c;
  padding-left: 12px;
  font-size: 1.3rem;
  margin: 1.8em 0 1em;
}

/* 見出し h3 */
.article h3 {
  font-size: 1.15rem;
  border-left: 4px solid #888;
  padding-left: 10px;
  margin: 1.6em 0 0.8em;
}

/* リスト */
.article ul {
  margin-left: 1.2em;
  line-height: 1.9;
}

/* CTAボタン（FANZAリンク用） */
.cta-fanza a {
  display: block;
  background: #c9302c;
  color: #fff !important;
  padding: 14px 22px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 6px;
  margin: 24px 0;
  text-decoration: none;
}

.cta-fanza a:hover {
  opacity: 0.9;
}
/* =========================================
   全体の黒ベーステーマ
=========================================*/
body {
  background: #0b0b0d;
  color: #f5f5f5;
}

/* メイン背景 */
#content,
#main,
#container {
  background: #16171a !important;
}

/* サイドバー */
#sidebar {
  background: #141519 !important;
}


/* =========================================
   ヘッダー（ロゴ風 × 黒ベース）
=========================================*/

/* キャッチコピーを完全削除 */
.header-tagline,
#header-in .site-description {
  display: none !important;
}

/* サイト名をロゴ風に */
#header-in .site-name-text {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ヘッダー全体を黒で統一 */
#header {
  background: #0b0b0d !important;
  border-bottom: 1px solid #2a2c31 !important;
}

/* メニュー */
#navi {
  background: #0b0b0d !important;
}
#navi ul li a {
  color: #e0e0e0 !important;
  padding: 14px 18px;
}
#navi ul li a:hover {
  background: #1e2024 !important;
  color: #ff7043 !important;
}


/* =========================================
   記事カード（一覧）
=========================================*/
.entry-card,
.article-card {
  background: #1e2024 !important;
  border: 1px solid #2a2c31;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.entry-card:hover,
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}

.entry-card-thumb img {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* タイトルを2行で切る */
.entry-card-title {
  font-size: 1.05rem !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  padding: 12px;
  color: #f0f0f0 !important;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* スマホの一覧の余白調整 */
@media (max-width: 768px) {
  .entry-card-title {
    padding: 14px 10px;
  }
}

/* 要約/スニペット */
.entry-snippet,
.entry-card-snippet {
  padding: 0 12px 12px;
  color: #bbbbbb;
  font-size: 0.85rem;
}

/* メタ情報（日付） */
.entry-card-meta {
  padding: 0 12px 12px;
  color: #777;
  font-size: 0.7rem;
}


/* =========================================
   セクション見出し（黒帯→細くスタイリッシュに）
=========================================*/
.widget-title,
.article h2,
h2.section-title {
  background: #202225 !important;
  padding: 8px 12px !important;
  border-left: 4px solid #e53935 !important;
  font-size: 1.1rem !important;
  margin-bottom: 14px !important;
  color: #fff !important;
}


/* =========================================
   本文
=========================================*/
.article {
  background: #16171a !important;
  border: 1px solid #2a2c31;
  border-radius: 10px;
  padding: 18px;
}

.article p {
  line-height: 1.9;
  margin-bottom: 1.2em;
  font-size: 1.05rem;
}

/* h3 */
.article h3 {
  border-left: 4px solid #777;
  padding-left: 10px;
  margin-top: 1.6em;
  margin-bottom: 0.7em;
}


/* =========================================
   SNSボタン（巨大→スリム化）
=========================================*/
.share-buttons,
.sns-share,
.sns-buttons-block {
  transform: scale(0.72);
  margin: 0 auto 10px auto;
  width: 90%;
}

@media (max-width: 768px) {
  .share-buttons,
  .sns-share,
  .sns-buttons-block {
    transform: scale(0.82);
    width: 100%;
  }
}


/* =========================================
   フッター
=========================================*/
#footer {
  background: #0b0b0d !important;
  border-top: 1px solid #2a2c31 !important;
  color: #777 !important;
}

#footer a {
  color: #bdbdbd !important;
}
#footer a:hover {
  color: #ff7043 !important;
}
/* =========================================
   すべてのグレー系文字を白に統一
=========================================*/

/* 本文 */
body,
p,
.article p,
.entry-content,
#main,
#content {
  color: #ffffff !important;
}

/* リスト・段落 */
.article li,
ul li,
ol li {
  color: #ffffff !important;
}

/* カード内のスニペット/要約 */
.entry-snippet,
.entry-card-snippet,
.entry-card-meta {
  color: #ffffff !important;
}

/* カード内の小テキスト（日時・カテゴリ） */
.entry-meta,
.post-meta,
.date-tags,
.cat-name,
.tag-name {
  color: #ffffff !important;
}

/* サイドバーウィジェットのテキスト */
#sidebar,
#sidebar * {
  color: #ffffff !important;
}

/* カテゴリ選択のプルダウン */
select,
option {
  color: #ffffff !important;
  background: #1e2024 !important;
}

/* フッター */
#footer,
#footer *,
.footer,
.footer a {
  color: #ffffff !important;
}

/* コメント欄（必要なら） */
.comment,
.comment * {
  color: #ffffff !important;
}

/* SNSボタンテキスト */
.sns-share a,
.share-buttons a {
  color: #ffffff !important;
}

/* 見出し */
.article h2,
.article h3,
.widget-title {
  color: #ffffff !important;
}

/* タグクラウド */
.tagcloud a {
  color: #ffffff !important;
  border-color: #ffffff33 !important;
}

/* =========================================
   全テキスト白固定（Cocoon完全上書き版）
=========================================*/

/* サイト全体 */
body,
body * {
  color: #ffffff !important;
}

/* 例外：リンク色は別管理するため上書き */
a {
  color: #ffffff !important;
}

/* 濃い背景にも対応 */
#content *,
#main *,
#sidebar *,
#footer *,
.entry-card *,
.article *,
.widget *,
.navi *,
.pager *,
.breadcrumb *,
.cat-label *,
.tagcloud a,
.post-meta *,
.entry-meta * {
  color: #ffffff !important;
}

/* カード内メタ情報（日付・カテゴリ） */
.entry-card-meta,
.entry-card-meta * {
  color: #ffffff !important;
}

/* 要約・抜粋 */
.entry-snippet,
.entry-card-snippet {
  color: #ffffff !important;
}

/* カテゴリー・タグ */
.cat-name,
.tag-name,
.cat-label,
.cat-link,
.tag-link {
  color: #ffffff !important;
}

/* ウィジェット（サイドバー） */
.widget,
.widget * {
  color: #ffffff !important;
}

/* 見出し */
.article h1,
.article h2,
.article h3,
.widget-title {
  color: #ffffff !important;
}

/* セレクトボックス（カテゴリ選択） */
select,
option {
  color: #ffffff !important;
  background: #1e2024 !important;
}

/* SNSボタン */
.share-buttons,
.share-buttons *,
.sns-share *,
.sns-buttons-block *,
.social-menu a {
  color: #ffffff !important;
}

/* フッター */
#footer,
#footer * {
  color: #ffffff !important;
}

/* パンくず */
.breadcrumb,
.breadcrumb * {
  color: #ffffff !important;
}

/* Cocoon 特有の小テキスト */
.date-tags,
.entry-date,
.updated,
.author-info,
.comment-meta,
.comment-author,
.entry-category,
.entry-tags {
  color: #ffffff !important;
}

/* トップページのカテゴリ一覧を非表示 */
.toc-categories,
.category-tag-list,
.tagcloud,
.home .category-tag-list,
.home .tagcloud {
  display: none !important;
}

/* 「今月のおすすめ作品」ブロックを完全非表示 */
.home h2.section-title:contains("今月のおすすめ作品"),
.home h2:contains("今月のおすすめ作品"),
.home .section-title:contains("今月のおすすめ作品"),
.home .widget-title:contains("今月のおすすめ作品") {
  display: none !important;
}

/* 見出し以下の本文部分も非表示 */
.home h2.section-title:contains("今月のおすすめ作品") + * {
  display: none !important;
}
/* トップページのカテゴリ一覧（デビュー等）を完全非表示 */
.home .top-page-category-links,
.home .tagcloud,
.home .tagcloud a,
.home .entry-content .tagcloud,
.home .entry-content .tagcloud a,
.home .entry-content .toc,
.home .entry-content .category-tag-list,
.home .entry-content .category-tag-list a,
.home .widget_categories,
.home .category-tag-area {
  display: none !important;
}

/* 今月のおすすめ作品ブロックを削除 */
.home h2.section-title:contains("今月のおすすめ作品"),
.home h2:contains("今月のおすすめ作品") {
  display: none !important;
}

/* 見出しの次のブロックも消す */
.home h2.section-title:contains("今月のおすすめ作品") + * {
  display: none !important;
}

/* ==============================================
   超シンプル最新記事トップページ（黒テーマ専用）
=================================================*/

/* 全体ラッパー */
.simple-latest-wrapper {
  max-width: 980px;
  margin: 25px auto;
  padding: 0 10px;
}

/* タイトル */
.simple-title {
  font-size: 1.6rem;
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 4px solid #e53935;
  color: #fff;
}

/* 記事一覧 */
.simple-latest-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* カード */
.simple-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #1e2024;
  border-radius: 12px;
  border: 1px solid #2a2c31;
  transition: 0.2s;
}

.simple-card:hover {
  background: #282a2f;
  transform: translateY(-3px);
}

/* サムネ画像 */
.simple-thumb img {
  width: 160px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

/* 文字部分 */
.simple-info {
  flex: 1;
}

.simple-post-title a {
  font-size: 1.1rem;
  color: #fff;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
}

.simple-date {
  font-size: 0.8rem;
  color: #cccccc;
  margin-top: 4px;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .simple-card {
    flex-direction: column;
    padding: 14px;
  }

  .simple-thumb img {
    width: 100%;
    height: auto;
  }
}

/* トップページ全体ラップ */
.home-container {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

/* タイトル */
.home-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

/* 説明文 */
.home-desc {
  font-size: 0.95rem;
  color: #cccccc;
  margin-bottom: 20px;
}

/* 最新記事リストの余白調整 */
.home-latest-list {
  margin-top: 20px;
}

/* 固定ページのタイトルを非表示 */
.page .entry-title {
  display: none !important;
}

/* 固定ページ上部のSNSボタンを非表示 */
.page .sns-share,
.page .sns-share-buttons,
.page .sns-buttons-block {
  display: none !important;
}

/* 余計な余白も削除 */
.page .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 固定ページの投稿日を非表示 */
.page .entry-meta,
.page .posted-on,
.page .date-tags,
.page .post-date,
.page .entry-date {
    display: none !important;
}

/* ===============================
   記事ページ：関連記事を完全に非表示
=============================== */
.related-posts,
.related-entries,
#related-posts,
#related-entries,
.single .related-entries,
.single .related-posts {
  display: none !important;
}

/* ===============================
   Cocoon の「最新レビューはこちら」リンクを非表示
=============================== */
.cwpp-related,
.cwxp-related,
.entry-footer,
.single .entry-footer,
.single .related-entry,
.single .related,
.single .related-contents {
  display: none !important;
}

/* 「＼ 最新レビューはこちら ／」 の見出しを確実に消す */
.single .date-tags + h2,
.single .article h2.section-title,
.single h2.section-title {
  display: none !important;
}

/* 関連記事（タイトル含む）完全非表示 */
#related-entries,
.related-entries,
.related-entry,
.entry-relations,
.related-posts,
.article-related,
#under-entry-contents,
.under-entry-contents,
.entry-footer,
#entry-footer,
.single-under-contents {
  display: none !important;
}

/* ＼ 最新レビューはこちら ／ の非表示 */
.latest-review-link,
.latest-review-box,
.latest-review,
.entry-content > h2.section-title,
.entry-content > h2 {
  display: none !important;
}

/* 記事ページ内の “関連記事” という文字を強制非表示 */
body.single *:contains("関連記事") {
  display: none !important;
}

/* 最新レビューはこちら を強制非表示 */
body.single *:contains("最新レビューはこちら") {
  display: none !important;
}

/* スマホ画面下部のホームバーと被らないよう余白を追加 */
body {
  padding-bottom: 80px; /* ←確実に逃がす */
}

/* --- スマホ固定フッターメニューを本来の位置に戻す --- */
@media screen and (max-width: 768px) {

  /* フッターメニュー位置修正 */
  #navi-footer,
  #footer-mobile-buttons,
  .mobile-footer-menu,
  .nwa-fix-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    z-index: 999999 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 下にできる白い謎スペースを削除 */
  body {
    padding-bottom: 80px !important; /* フッターメニュー分の余白だけ残す */
  }

  /* 余計な高さを持つ謎の div を完全無効化 */
  div[style*="height"],
  div[style*="min-height"] {
    height: auto !important;
    min-height: auto !important;
  }
}
/* ================================
   スマホ固定フッターメニューの色修正
   ================================ */
@media screen and (max-width: 768px) {

  /* 背景色を完全にダークに統一 */
  #navi-footer,
  #footer-mobile-buttons,
  .mobile-footer-menu,
  .nwa-fix-bottom {
    background: #1f2227 !important; 
    border-top: 1px solid #333 !important;
  }

  /* アイコンの色（白） */
  #navi-footer i,
  #footer-mobile-buttons i,
  .mobile-footer-menu i,
  .nwa-fix-bottom i {
    color: #ffffff !important;
  }

  /* テキスト（白でくっきり） */
  #navi-footer span,
  #footer-mobile-buttons span,
  .mobile-footer-menu span,
  .nwa-fix-bottom span {
    color: #ffffff !important;
  }

  /* ボタン全体クリック領域調整 */
  #navi-footer a,
  #footer-mobile-buttons a,
  .mobile-footer-menu a,
  .nwa-fix-bottom a {
    padding: 6px 0 !important;
  }
}

/* ================================
   スマホ固定フッターメニュー（黒アイコン / 黒文字）
   ================================ */
@media screen and (max-width: 768px) {

  /* 背景は白 or 明るいグレーで固定 */
  #navi-footer,
  #footer-mobile-buttons,
  .mobile-footer-menu,
  .nwa-fix-bottom {
    background: #f8f8f8 !important;
    border-top: 1px solid #ccc !important;
  }

  /* アイコンを黒 */
  #navi-footer i,
  #footer-mobile-buttons i,
  .mobile-footer-menu i,
  .nwa-fix-bottom i {
    color: #000000 !important;
  }

  /* テキストも黒 */
  #navi-footer span,
  #footer-mobile-buttons span,
  .mobile-footer-menu span,
  .nwa-fix-bottom span {
    color: #000000 !important;
  }

  /* ボタンのクリック領域調整（崩れ防止） */
  #navi-footer a,
  #footer-mobile-buttons a,
  .mobile-footer-menu a,
  .nwa-fix-bottom a {
    padding: 6px 0 !important;
  }
}

/* =========================================
   スマホ固定フッターメニュー（黒アイコン＋黒テキスト）
   ========================================= */
@media screen and (max-width: 768px) {

  /* メニュー背景（白で固定） */
  ul.mobile-footer-menu-buttons.mobile-menu-buttons {
    background: #ffffff !important;
    border-top: 1px solid #d0d0d0 !important;
  }

  /* 各ボタンの背景クリア */
  ul.mobile-footer-menu-buttons.mobile-menu-buttons li.menu-button {
    background: transparent !important;
  }

  /* アイコンを黒に */
  ul.mobile-footer-menu-buttons.mobile-menu-buttons li.menu-button i {
    color: #000000 !important;
  }

  /* テキストも黒に */
  ul.mobile-footer-menu-buttons.mobile-menu-buttons li.menu-button span {
    color: #000000 !important;
  }

  /* ボタンの余白調整（下に沈む現象を防ぐ） */
  ul.mobile-footer-menu-buttons.mobile-menu-buttons li.menu-button a {
    padding: 6px 0 8px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* ============================
   サイドバー文字色：黒に強制
   ============================ */
#sidebar,
#sidebar * {
  color: #000000 !important;
}

/* サイドバーの背景は白で統一 */
#sidebar {
  background: #ffffff !important;
}

/* =======================================
   サイドバー文字だけ黒（PC＋スマホ）
   ======================================= */

/* サイドバー本体（PC側） */
#sidebar,
#sidebar * {
  color: #000000 !important;
}

/* 人気記事カードのタイトル・本文・日付なども黒 */
.popular-entry-card-title,
.popular-entry-card-content,
.popular-entry-card-date,
.widget-entry-card-title,
.widget-entry-card-content {
  color: #000000 !important;
}

/* スマホのスライドサイドバー内部の文字も黒 */
#navi-menu-content,
#navi-menu-content * {
  color: #000000 !important;
}

/* サイドバーを開いた時のボタン（← → × など）も黒化 */
.menu-button,
.menu-button *,
#navi-menu-close,
#navi-menu-close * {
  color: #000000 !important;
}

/* モバイルフッターメニュー内テキスト（ホーム／検索／トップ／サイドバー）も黒 */
.mobile-footer-menu-buttons li,
.mobile-footer-menu-buttons li * {
  color: #000000 !important;
}