/* ───────────────────────
  ブログ記事：#main_contents 内にある「下部のリスト」を白文字にする
────────────────────── */

/* 1. 黄色枠（#main_contents）の下の方にある、リンクやタイトルをすべて白に */
body.single-post #main_contents .item .title,
body.single-post #main_contents .item .title_area *,
body.single-post #main_contents .item .date,
body.single-post #main_contents .item a {
    color: #ffffff !important;
}

/* 2. インタビュー記事の時に効いた「title_area」をブログ用にも適用 */
body.single-post #main_contents [class*="title_area"],
body.single-post #main_contents [class*="title_area"] * {
    color: #ffffff !important;
}

/* 3. 「related」という文字がどこかに含まれる要素を、黄色枠の中で探して白にする */
body.single-post #main_contents [id*="related"] *,
body.single-post #main_contents [class*="related"] * {
    color: #ffffff !important;
}

/* 4. 画像の上にあるかもしれない「カテゴリー名」なども白にする */
body.single-post #main_contents .category,
body.single-post #main_contents .cat_label {
    color: #ffffff !important;
}





body {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* ───────────────────────
  ブログの「投稿記事」だけ白背景・黒文字にする
────────────────────── */

/* 背景と基本の文字色を反転 */
body.single-post {
    background-color: #ffffff !important; /* 背景：白 */
    color: #333333 !important;           /* 文字：濃いグレー */
}

/* 記事内の主要なパーツ（見出し、段落、リストなど）も黒文字に固定 */
body.single-post h1, 
body.single-post h2, 
body.single-post h3, 
body.single-post h4, 
body.single-post p, 
body.single-post li, 
body.single-post dl, 
body.single-post dt, 
body.single-post dd {
    color: #333333 !important;
}

/* 記事エリアを包むコンテナがある場合、そこも白にする（テーマ対策） */
body.single-post #main_contents,
body.single-post .l-container,
body.single-post .site-main {
    background-color: #ffffff !important;
}




/* ───────────────────────
インタビュー記事 吹き出し部分だけ白背景＋黒文字
────────────────────── */
/* フォーム入力欄だけを強制的に「白背景・黒文字」に上書きする */
input[type="text"], 
input[type="email"], 
input[type="tel"], 
textarea, 
select {
  color: #000000 !important; /* 文字を黒に */
  background-color: #ffffff !important; /* 背景を白に */
}

/* 吹き出し本体 */
.single-interview .speech-balloon,
.single-interview .c-balloon,
.single-interview .p-balloon__text,
.single-interview .interview__speech,
.single-interview .balloon {
  background-color: #ffffff ; /* 背景：白 */
  color: #000000 ; /* 文字：黒 */
  border: 1px solid #cccccc ; /* 輪郭線（薄グレー） */
  border-radius: 12px; /* 角を少し丸く */
  padding: 16px 20px;
}

/* 吹き出し内のテキスト（見出し・段落など） */
.single-interview .speech-balloon p,
.single-interview .speech-balloon span,
.single-interview .speech-balloon div,
.single-interview .c-balloon p,
.single-interview .p-balloon__text p,
.single-interview .interview__speech p {
  color: #000000 ; /* 文字を黒に */
}

/* 吹き出しのしっぽ（三角部分）が白になるように */
.single-interview .speech-balloon:before,
.single-interview .speech-balloon:after,
.single-interview .c-balloon:before,
.single-interview .c-balloon:after {
  background-color: #ffffff ;
  border-color: transparent ;
}
/* ───────────────────────
インタビュー記事：吹き出しだけ白背景＋黒文字（強制版）
────────────────────── */

/* よくある吹き出しクラス名を網羅して指定 */
body.single-interview [class*="balloon"],
body.single-interview [class*="Balloon"],
body.single-interview [class*="speech"],
body.single-interview [class*="Speech"],
body.single-interview [class*="bubble"],
body.single-interview [class*="talk"],
body.single-interview .interview__speech,
body.single-interview .p-balloon,
body.single-interview .p-balloon__text,
body.single-interview .c-balloon,
body.single-interview .speech-balloon {
  background-color: #ffffff ; /* 背景：白 */
  color: #000000 ;             /* 文字：黒 */
  border: 1px solid #dddddd ;  /* 輪郭（任意） */
  border-radius: 12px !important;
  padding: 16px 20px !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}

/* 吹き出し内のすべてのテキストを黒に統一 */
body.single-interview [class*="balloon"] *,
body.single-interview [class*="Balloon"] *,
body.single-interview [class*="speech"] *,
body.single-interview [class*="Speech"] *,
body.single-interview [class*="bubble"] *,
body.single-interview [class*="talk"] * {
  color: #000000 !important;
}

/* 吹き出し内のリンクも黒（ホバー時は金） */
body.single-interview [class*="balloon"] a,
body.single-interview [class*="speech"] a,
body.single-interview [class*="bubble"] a,
body.single-interview [class*="talk"] a {
  color: #000000 !important;
  text-decoration: none;
}
body.single-interview [class*="balloon"] a:hover,
body.single-interview [class*="speech"] a:hover,
body.single-interview [class*="bubble"] a:hover,
body.single-interview [class*="talk"] a:hover {
  color: #b8860b !important; /* ゴールド */
}

/* しっぽ（:before/:after）側が黒いときに白へ矯正 */
body.single-interview [class*="balloon"]::before,
body.single-interview [class*="balloon"]::after,
body.single-interview [class*="speech"]::before,
body.single-interview [class*="speech"]::after,
body.single-interview [class*="bubble"]::before,
body.single-interview [class*="bubble"]::after,
body.single-interview [class*="talk"]::before,
body.single-interview [class*="talk"]::after {
  background: #ffffff !important;
  border-color: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
/* インタビュー詳細 下部「お客様の体験一覧」：タイトル帯だけ白＋黒文字に固定 */
body.single-interview #related_interview .title_area {
  background: #ffffff !important;   /* 白背景 */
  color: #000000 !important;        /* 黒文字（直下テキスト用） */
}

/* タイトル帯内のリンク・テキストも黒で統一 */
body.single-interview #related_interview .title_area,
body.single-interview #related_interview .title_area * {
  color: #000000 !important;
}

/* 親aに色指定があっても、タイトル帯の色を変えない */
body.single-interview #related_interview .item > a.animate_background .title_area {
  background: #ffffff !important;
  color: #000000 !important;
}

/* ホバー時も色が反転しないように固定（必要ならここを好みで変更） */
body.single-interview #related_interview .item > a.animate_background:hover .title_area,
body.single-interview #related_interview .title_area a:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/* もしa全体の配色が上書きしてくる場合の保険（タイトル帯の配色を優先） */
body.single-interview #related_interview .item > a.animate_background {
  color: inherit !important;              /* aの文字色継承 */
}



/* =========================================================
  トップページ：SCROLL直下の投稿（日付付きリンク）を完全に非表示
========================================================= */
body.home #cb_content_1,
body.home #cb_content_1 *,
body.home #main_contents > a[href*="/interview/"],
body.home #main_contents > a[href*="/blog/"],
body.home #main_contents > time,
body.home #main_contents > .date {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
  スマホだけ：TOPのSCROLL直下に現れる投稿（日付リンク）を完全非表示
  - 日付(time/.date)や単独リンク(a)を一網打尽
  - 余白とクリックも無効化
========================================================= */
@media (max-width: 767px) {

  /* ヒーローのSCROLL直後に現れる単独リンク/日付を削除 */
  body.home #main_contents .scroll ~ a,
  body.home #main_contents .scroll ~ time,
  body.home #main_contents .scrolldown ~ a,
  body.home #main_contents .scrolldown ~ time,
  body.home #main_contents .mv__scroll ~ a,
  body.home #main_contents .mv__scroll ~ time,
  body.home #main_contents .hero__scroll ~ a,
  body.home #main_contents .hero__scroll ~ time {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* SCROLL直後の“最初のコンテンツ塊”内に潜む日付/リンクも掃除（ID/クラスの揺れを吸収） */
  body.home #main_contents [id^="cb_content"],
  body.home #main_contents [class*="cb_content"] {
    /* 中身のtime/.date/単独リンクを無効化 */
  }
  body.home #main_contents [id^="cb_content"] time,
  body.home #main_contents [id^="cb_content"] .date,
  body.home #main_contents [id^="cb_content"] > a,
  body.home #main_contents [class*="cb_content"] time,
  body.home #main_contents [class*="cb_content"] .date,
  body.home #main_contents [class*="cb_content"] > a {
    display: none !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* 念のため：#main_contents 直下にぶら下がる単独の日付/リンクを殺す */
  body.home #main_contents > time,
  body.home #main_contents > .date,
  body.home #main_contents > a[href*="/interview/"],
  body.home #main_contents > a[href*="/blog/"] {
    display: none !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* SCROLL周辺の不要な余白もゼロに */
  body.home #main_contents .scroll,
  body.home #main_contents .scrolldown,
  body.home #main_contents .mv__scroll,
  body.home #main_contents .hero__scroll {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
  }
}
/* ============================================
  スマホだけ：TOPのSCROLL直下に出る該当の投稿リンクを消す
  （料理に感動を吹き込む火入れ）
============================================ */
@media (max-width: 767px) {
  /* 該当URLのパーセントエンコードを含む a を強制非表示 */
  body.home #main_contents a[href*="%e6%96%99%e7%90%86%e3%81%ab%e6%84%9f%e5%8b%95%e3%82%92%e5%90%b9%e3%81%8d%e8%be%bc%e3%82%80%e7%81%ab%e5%85%a5%e3%82%8c"],
  body.home #main_contents a[href*="%E6%96%99%E7%90%86%E3%81%AB%E6%84%9F%E5%8B%95%E3%82%92%E5%90%B9%E3%81%8D%E8%BE%BC%E3%82%80%E7%81%AB%E5%85%A5%E3%82%8C"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* その直後に並ぶ time/.date が残る場合の保険 */
  body.home #main_contents a[href*="%e6%96%99%e7%90%86%e3%81%ab%e6%84%9f%e5%8b%95%e3%82%92%e5%90%b9%e3%81%8d%e8%be%bc%e3%82%80%e7%81%ab%e5%85%a5%e3%82%8c"] ~ time,
  body.home #main_contents a[href*="%E6%96%99%E7%90%86%E3%81%AB%E6%84%9F%E5%8B%95%E3%82%92%E5%90%B9%E3%81%8D%E8%BE%BC%E3%82%80%E7%81%AB%E5%85%A5%E3%82%8C"] ~ time,
  body.home #main_contents a[href*="%e6%96%99%e7%90%86%e3%81%ab%e6%84%9f%e5%8b%95%e3%82%92%e5%90%b9%e3%81%8d%e8%be%bc%e3%82%80%e7%81%ab%e5%85%a5%e3%82%8c"] ~ .date,
  body.home #main_contents a[href*="%E6%96%99%E7%90%86%E3%81%AB%E6%84%9F%E5%8B%95%E3%82%92%E5%90%B9%E3%81%8D%E8%BE%BC%E3%82%80%E7%81%AB%E5%85%A5%E3%82%8C"] ~ .date {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
}



/* スマホだけ：TOPのSCROLL直下ニュース/投稿ティッカーを完全非表示 */
@media (max-width: 767px) {
  body.home #news_ticker_bottom,
  body.home #news_ticker_bottom * {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}




/* よくある質問（Q部分）の文字色修正 */
.faq_list .question,
.cb_faq_list .question {
  color: #000 !important;  /* 黒字に変更。白背景でも見える */
}

/* アクティブ時（開いているとき）も同様 */
.faq_list .question.active,
.cb_faq_list .question.active {
  color: #000 !important;
}
/* Jetpackフォームの入力欄の文字色を強制的に黒にする */
.wp-block-jetpack-input.has-black-color,
.wp-block-jetpack-input {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important; /* Safari対策 */
    background-color: #ffffff !important; /* 背景は白 */
}

/* プレースホルダー（入力前の説明文字）の色 */
.wp-block-jetpack-input::placeholder {
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
}
/* 全ての入力欄とテキストエリアのカーソル色を強制固定 */
input, 
textarea, 
.wp-block-jetpack-input,
[contenteditable="true"] {
    caret-color: #000000 !important;
}


/* ───────────────────────
  ブログ記事：ヘッダー画像上の文字（タイトル・パンくず）を白にする
────────────────────── */

/* タイトル部分を白にする */
body.single-post #page_header .title,
body.single-post .post_title,
body.single-post .entry-title {
    color: #ffffff !important;
}

/* パンくずリスト部分（リンク含む）を白にする */
body.single-post #breadcrumb,
body.single-post #breadcrumb a,
body.single-post .breadcrumb_list,
body.single-post .breadcrumb_list a,
body.single-post .breadcrumb_inner * {
    color: #ffffff !important;
}

/* もしタイトル下の「日付」なども消えていればこれも追加 */
body.single-post #page_header .date,
body.single-post .post_date {
    color: #ffffff !important;
}


/* ───────────────────────
  パンくずリスト：あらゆるパターンを網羅して白にする
────────────────────── */

/* 1. bread という名前がつくクラスやIDの中の文字をすべて白に */
body.single-post [class*="bread"] *,
body.single-post [id*="bread"] * {
    color: #ffffff !important;
}

/* 2. TCDや主要テーマでよく使われる特定の場所を狙い撃ち */
body.single-post .p-breadcrumb *,
body.single-post .c-breadcrumb *,
body.single-post #bread_crumb *,
body.single-post .bread_crumb *,
body.single-post .breadcrumb_list * {
    color: #ffffff !important;
}

/* 3. 区切り文字（ > や / ）やリンクも確実に白くする */
body.single-post [class*="bread"] a,
body.single-post [class*="bread"] span,
body.single-post [class*="bread"] li:after {
    color: #ffffff !important;
    opacity: 1 !important; /* 透明度が設定されている場合の対策 */
}

/* 4. マウスを乗せた時（ホバー）の色（お好みで。ここでは白を維持） */
body.single-post [class*="bread"] a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}






/* ───────────────────────
  スマホ：おすすめ記事（関連記事）の白飛びを修正
────────────────────── */

/* 1. 関連記事のエリア全体を黒背景に強制的に戻す */
body.single-post #main_contents #related_post,
body.single-post #main_contents .post_list,
body.single-post #main_contents [id*="related"] {
    background-color: #000000 !important;
}

/* 2. 各記事カード（リンク枠）の背景が白くなるのを防ぎ、画像を見えるようにする */
body.single-post #main_contents .item,
body.single-post #main_contents .item a {
    background-color: transparent !important;
}

/* 3. 画像の上に重なるタイトルの背景（もしあれば）を透明にする */
body.single-post #main_contents .item .title_area {
    background-color: transparent !important;
}

/* 4. 画像が見えにくい場合のために、うっすら黒いレイヤーを重ねる（オプション） */
body.single-post #main_contents .item a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* 20%の黒透明 */
    z-index: 1;
}