/*
Theme Name: SHIPS Child
Theme URI: https://www.blackbox07.com/
Description: TCD SHIPS（ships_tcd098）の子テーマです。サイト全体のカラーをWordPressカスタマイザー（外観 → カスタマイズ → BlackBox カラー設定）から変更できます。
Author: BlackBox
Author URI: https://www.blackbox07.com/
Template: ships_tcd098
Version: 2.10.1
Text Domain: ships-child
*/

/* ====================================================================
 * BlackBox 子テーマ スタイル
 * --------------------------------------------------------------------
 * CSS変数は functions.php で出力されています：
 *   --bb-bg            サイト背景色
 *   --bb-text          メイン文字色
 *   --bb-accent        アクセントカラー（常時表示の差し色）
 *   --bb-active-bg     選択時の背景色（ホバー・選択中・ボタン）
 *   --bb-active-text   選択時の文字色
 *   --bb-sidebar-bg    サイドバー背景色
 *   --bb-sidebar-text  サイドバー文字色
 *   --bb-sidebar-brd   サイドバー区切り線色
 *   --bb-catch         ページキャッチコピー文字色
 * ==================================================================== */


/* ====================================================================
 * 0. ページキャッチコピー（固定ページ・フロントページのメイン見出し）
 *    #page_header .catch        固定ページのキャッチ
 *    #page_header_small .catch  小サイズページヘッダーのキャッチ
 *    #header_slider .item .catch フロントページのスライダーキャッチ
 *    .common_catch              共通キャッチクラス（コンテンツビルダー含む）
 * ==================================================================== */
body #page_header .catch,
body #page_header_small .catch,
body #header_slider .item .catch,
body .common_catch,
body #page_header h1,
body #page_header_small h1 {
    color: var(--bb-catch) !important;
}


/* ====================================================================
 * 1. サイト全体（body / main / コンテナ）
 * ==================================================================== */
html body,
body #container,
body #main_content,
body #wrapper,
body #contents {
    background-color: var(--bb-bg) !important;
    color: var(--bb-text) !important;
}

/* メインコンテンツ領域内の白背景を打ち消し */
body.hide_page_side_bar #main_content {
    background: var(--bb-bg) !important;
}


/* ====================================================================
 * 2. 見出し・本文テキスト
 * ==================================================================== */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body li,
body dd,
body dt,
body .post_content,
body .entry-content,
body .blog_list .title,
body .news_list .title,
body #single_post_title,
body #single_post_header .title {
    color: var(--bb-text);
}


/* ====================================================================
 * 3. リンク（通常）
 * ==================================================================== */
body a {
    color: var(--bb-accent);
}
body a:hover {
    color: var(--bb-accent);
    opacity: 0.85;
}


/* ====================================================================
 * 4. サイドバー（左の #header エリア） — PC（768px以上）専用
 *    スマホでは #header は上部ヘッダーに変わるため、別セクションで処理
 * ==================================================================== */
@media (min-width: 768px) {

  body #header {
      background-color: var(--bb-sidebar-bg) !important;
      color: var(--bb-sidebar-text) !important;
  }

  body #header,
  body #header a,
  body #header #site_desc,
  body #site_desc,
  body #header_logo a {
      color: var(--bb-sidebar-text);
  }


  /* 4-1. グローバルメニュー */
  body #global_menu,
  body #global_menu ul,
  body #global_menu > ul li a {
      background: var(--bb-sidebar-bg) !important;
      color: var(--bb-sidebar-text) !important;
  }

  body #global_menu ul li,
  body #global_menu > ul li a {
      border-color: var(--bb-sidebar-brd) !important;
  }

  /* メニューホバー・現在ページ */
  body #global_menu > ul li a:hover,
  body #global_menu > ul > li.current-menu-item > a,
  body #global_menu > ul > li.current-menu-parent > a,
  body #global_menu > ul > li.current-menu-ancestor > a,
  body #global_menu > ul > li.current_page_item > a {
      background: var(--bb-active-bg) !important;
      color: var(--bb-active-text) !important;
  }


  /* 4-2. サイドバーのウィジェット */
  body #header .widget,
  body #header .widget a,
  body #header .widget li {
      color: var(--bb-sidebar-text);
  }


  /* 4-3. SNSアイコン */
  body #header_sns li a,
  body #header_sns li a:before,
  body #footer_social_link li a,
  body #footer_social_link li a:before {
      color: var(--bb-sidebar-text) !important;
  }

}


/* ====================================================================
 * 5. メインヘッダー（マイページ・ログアウト等の上部バー）
 * ==================================================================== */
body #main_content_header,
body #main_content_header.login,
body #main_content_header.logout,
body #header_message {
    background-color: var(--bb-bg) !important;
    color: var(--bb-text) !important;
}

body #main_content_header a {
    color: var(--bb-text);
}

body #main_content_header a:hover {
    color: var(--bb-accent);
}


/* ====================================================================
 * 6. フロントページ — タブ切り替え
 * .index_tab_post_headline > div （新着記事 / カテゴリ別タブ）
 * ==================================================================== */
body .index_tab_post_headline,
body .index_tab_post_wrap,
body .index_tab_post_list {
    background: var(--bb-bg) !important;
}

body .index_tab_post_headline > div {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

body .index_tab_post_headline > div:hover,
body .index_tab_post_headline > div.active {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
    border-color: var(--bb-active-bg) !important;
}


/* ====================================================================
 * 7. 記事カード（.blog_list / .news_list / .voice_list / .cb_post_list）
 * 親テーマで background:#fff が直書きされているため強めに上書き
 * ==================================================================== */

/* カード全体・画像エリア */
body .blog_list,
body .blog_list .item,
body .news_list .item,
body .voice_list .item,
body .cb_post_list,
body .cb_post_list .item,
body #related_post .item,
body #next_prev_post .item,
body .blog_list .animate_background,
body .blog_list .image_wrap,
body .news_list .animate_background {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

/* カードのテキスト部分 */
body .blog_list .content,
body .blog_list .content a,
body .news_list .content,
body .news_list .item,
body .voice_list .item,
body .cb_post_list .content,
body .cb_post_list .content a,
body #related_post .content,
body #next_prev_post .item,
body #next_prev_post .item a {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

/* カード内の各テキスト要素 */
body .blog_list .title,
body .blog_list .title span,
body .blog_list .date,
body .blog_list .desc,
body .blog_list .desc span,
body .news_list .title,
body .news_list .title span,
body .news_list .date,
body .news_list .desc,
body .voice_list .title,
body .voice_list .date,
body #related_post .title,
body #related_post .date,
body #next_prev_post .title,
body .cb_post_list .title,
body .cb_post_list .title span,
body .cb_post_list .date {
    color: var(--bb-text) !important;
}

/* カードホバー時 */
body .blog_list .content a:hover,
body .news_list .item a:hover,
body .voice_list .item a:hover,
body #related_post .content a:hover,
body #next_prev_post .item a:hover,
body .cb_post_list .content a:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
}

body .blog_list .content a:hover .title,
body .blog_list .content a:hover .title span,
body .blog_list .content a:hover .date,
body .blog_list .content a:hover .desc,
body .blog_list .content a:hover .desc span,
body .news_list .item a:hover .title,
body .cb_post_list .content a:hover .title {
    color: var(--bb-active-text) !important;
}

/* カテゴリラベル（常時アクセント色） */
body .blog_list .category,
body .news_list .category,
body #related_post .category,
body #single_post_header .category {
    background: var(--bb-accent) !important;
    color: var(--bb-active-text) !important;
}


/* ====================================================================
 * 8. 個別記事ページ
 * ==================================================================== */
body #single_post_header,
body #single_post_contents,
body #main_col,
body #sub_col,
body .page_contents {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
}

/* 記事タイトル・メタ情報 */
body #single_post_title,
body #single_post_title .title,
body #single_post_title .meta,
body #single_post_title .meta a {
    color: var(--bb-text) !important;
}

body #single_post_title .meta a:hover {
    color: var(--bb-accent) !important;
}

/* 目次（TOC） */
body #tcd_toc,
body .tcd_toc_widget {
    background: var(--bb-bg) !important;
    border-color: var(--bb-sidebar-brd) !important;
    color: var(--bb-text) !important;
}

body #tcd_toc .toc_link,
body .tcd_toc_widget .toc_link {
    color: var(--bb-accent);
}

/* 引用ブロック */
body .post_content blockquote {
    border-left-color: var(--bb-accent) !important;
}

/* タグ */
body #post_tag_list a,
body .tcdw_tag_list_widget ol a,
body .widget_tag_cloud .tagcloud a {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

body #post_tag_list a:hover,
body .tcdw_tag_list_widget ol a:hover,
body .widget_tag_cloud .tagcloud a:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
    border-color: var(--bb-active-bg) !important;
}

/* 著者プロフィールボックス */
body .author_profile,
body #single_author_title_area {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

/* 前後記事ナビ */
body #next_prev_post .item,
body #next_prev_post a {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

body #next_prev_post a:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
}

/* お気に入りボタン */
body .like_button,
body .list_like_button,
body .p-single-like,
body .p-single-like__button {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

body .like_button.active,
body .list_like_button.active,
body .p-single-like__button.is-liked,
body .like_button:hover,
body .p-single-like__button:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
    border-color: var(--bb-active-bg) !important;
}

/* 関連記事の見出し（下線スタイル：マイページH2と統一） */
body #related_post .headline,
body #related_post h2.headline {
    background: transparent !important;
    color: var(--bb-text) !important;
    border-bottom: 4px solid var(--bb-accent) !important;
    padding: 20px 0 !important;
    text-align: center;
}

/* 会員限定登録ボックス */
body #single_register {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

/* 会員限定記事のフェードアウトグラデーション（白→黒に反転） */
body #single_not_login_user .short_content:after,
body #original_excerpt.original_excerpt_gradation:after,
body.hide_page_side_bar #single_not_login_user .short_content:after,
body.hide_page_side_bar #original_excerpt.original_excerpt_gradation:after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--bb-bg) 100%) !important;
}

/* ====================================================================
 * モーダルウィンドウ全般（メッセージ通知・ログイン・パスワード再発行・会員登録）
 * .modal_wrap は親テーマで background:#fff 固定なので強めに上書き
 * ==================================================================== */
body #modal_overlay .modal_wrap,
body #modal_overlay #message_modal_wrap,
body #modal_overlay #login_modal_wrap,
body #modal_overlay #password_modal_wrap,
body #modal_overlay #register_modal_wrap {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border: 1px solid var(--bb-sidebar-brd) !important;
}

/* モーダル内のテキスト要素を白に */
body #modal_overlay .modal_wrap p,
body #modal_overlay .modal_wrap div,
body #modal_overlay .modal_wrap span,
body #modal_overlay .modal_wrap label,
body #modal_overlay .modal_contents,
body #modal_overlay .modal_contents p,
body #modal_overlay .form_wrap p,
body #modal_overlay .form_wrap label {
    color: var(--bb-text) !important;
}

/* モーダル内リンク（アクセント色） */
body #modal_overlay .modal_wrap a,
body #modal_overlay .desc a,
body #modal_overlay .privacy_policy a {
    color: var(--bb-accent) !important;
}

/* 閉じるボタンのアイコン色 */
body #modal_overlay .close_modal_button:before {
    color: var(--bb-text) !important;
}

/* モーダル内見出し */
body #modal_overlay .form_wrap .headline,
body #modal_overlay #register_modal_wrap .headline {
    background: var(--bb-accent) !important;
    color: var(--bb-active-text) !important;
}

/* モーダル内のフォーム入力欄 */
body #modal_overlay .form_wrap .input_field {
    background: #1a1a1a !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}
body #modal_overlay .form_wrap .input_field:focus {
    border-color: var(--bb-accent) !important;
}

/* モーダル内の区切り線 */
body #modal_overlay .login_form_wrap .register_button_area {
    border-top-color: var(--bb-sidebar-brd) !important;
}


/* ====================================================================
 * 9. マイページ（membership-template / アカウントページ）
 * ==================================================================== */
body #account_content_wrap,
body .account_content,
body #account_news,
body #account_edit,
body #account_member_only,
body #like_list {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
}

/* マイページのタブ */
body #account_content_tab li a {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

body #account_content_tab li.active a,
body #account_content_tab li a:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
    border-color: var(--bb-active-bg) !important;
}

/* マイページ内のお知らせアイテム */
body #account_news .item {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border: 0.5px solid var(--bb-sidebar-brd) !important;
}

/* マイページ内の見出し（下線スタイル：ピンクの塗りつぶしは廃止） */
body .account_headline,
body #account_content_wrap .headline {
    background: transparent !important;
    color: var(--bb-text) !important;
    border-bottom: 4px solid var(--bb-accent) !important;
    padding: 20px 0 20px !important;
    text-align: center;
}

/* ログイン / パスワード再設定の見出し（線なし・白文字・大きめ） */
body.membership-login #account_content_wrap .login_form_wrap .headline,
body.membership-reset_password #account_content_wrap .password_form_wrap .headline {
    background: transparent !important;
    color: var(--bb-text) !important;
    border: none !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 30px 0 !important;
    margin: 0 0 40px !important;
    font-size: 26px !important;
    letter-spacing: 2px !important;
    text-align: center;
}

/* エラー / メッセージバナー（左バー + 薄ピンク背景） */
body .form-error,
body div.form-error {
    background: rgba(203, 82, 120, 0.18) !important;
    border: 1px solid rgba(203, 82, 120, 0.5) !important;
    border-left: 4px solid var(--bb-accent) !important;
    color: #ff9bbb !important;
    border-radius: 4px !important;
    padding: 14px 18px !important;
    font-weight: 500;
    /* 念のため強制表示 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 30px !important;
    position: relative;
    z-index: 100;
}
body .form-error p,
body div.form-error p {
    color: #ff9bbb !important;
    margin: 0 !important;
}

/* 通常メッセージ（成功・情報系） */
body .form-message,
body div.form-message {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 4px solid var(--bb-accent) !important;
    color: var(--bb-text) !important;
    border-radius: 4px !important;
    padding: 14px 18px !important;
}
body .form-message p,
body div.form-message p {
    color: var(--bb-text) !important;
    margin: 0 !important;
}

/* お気に入り一覧の削除ボタン */
body #like_list .delete {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
}

body #like_list .delete:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
}

/* 登録フォーム（モーダル含む） */
body #main_col #registration-form,
body #sc_register_form #registration-form,
body #modal_overlay .form_wrap {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}


/* ====================================================================
 * 10. ウィジェット（サイドバー以外）
 * ==================================================================== */
body .widget,
body .widget_block,
body .textwidget,
body .tcdw_recent_post_widget,
body .tcdw_popular_post_widget,
body .tcdw_random_post_widget,
body .tcdw_post_list_widget,
body .tcdw_tag_list_widget,
body .tcdw_search_box_widget {
    background: var(--bb-bg);
    color: var(--bb-text);
}

/* ウィジェット見出し */
body .widget_headline {
    background: var(--bb-accent) !important;
    color: var(--bb-active-text) !important;
}

/* ウィジェット内リンク */
body .widget a,
body .widget_block a,
body .textwidget a {
    color: var(--bb-text);
}

body .widget a:hover,
body .widget_block a:hover,
body .textwidget a:hover {
    color: var(--bb-accent);
}

/* カレンダー */
body #wp-calendar a {
    background: var(--bb-bg);
    color: var(--bb-text);
}

body #wp-calendar tbody a:hover,
body #wp-calendar #prev a:hover,
body #wp-calendar #next a:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
}


/* ====================================================================
 * 11. ボタン全般（送信・登録・お気に入り等）
 * ==================================================================== */
body .design_button,
body button[type="submit"],
body input[type="submit"],
body input[type="button"],
body #submit_comment,
body #cancel_comment_reply a,
body #modal_overlay .form_wrap .submit input,
body #account_edit .submit input,
body #main_col #registration-form .submit input {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
    border-color: var(--bb-active-bg) !important;
}

body .design_button:hover,
body button[type="submit"]:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body #submit_comment:hover {
    opacity: 0.85;
}


/* ====================================================================
 * 12. フォーム入力欄
 * ==================================================================== */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="search"],
body input[type="tel"],
body input[type="url"],
body textarea,
body select,
body .form_wrap .input_field,
body #guest_info input {
    background: #1a1a1a !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body textarea:focus,
body select:focus,
body .form_wrap .input_field:focus {
    border-color: var(--bb-accent) !important;
    outline: none;
}

/* Chromeのオートフィルで白背景になるのを防止 */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--bb-text) !important;
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    caret-color: var(--bb-text) !important;
    transition: background-color 5000s ease-in-out 0s;
}


/* ====================================================================
 * 13. コメント
 * ==================================================================== */
body #comment_tab li a,
body #comment_tab li p {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
}

body #comment_tab li.active a,
body #comment_tab li a:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
}

body .comment,
body .comment_form_wrapper {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}


/* ====================================================================
 * 14. ページネーション
 * ==================================================================== */
body .page_navi a,
body .page_navi span {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

body .page_navi a:hover,
body .page_navi .current {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
    border-color: var(--bb-active-bg) !important;
}


/* ====================================================================
 * 15. フッター & 各種補足エリア
 * ==================================================================== */
body #footer {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
}

body #footer a {
    color: var(--bb-text);
}

body #footer a:hover {
    color: var(--bb-accent);
}

/* フッター上部のカテゴリ一覧・検索ボックス */
body #bottom_category_list .category_list,
body #bottom_category_list li a,
body #bottom_search_box .search_area form,
body #bottom_tab_post_headline > div {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

body #bottom_category_list li a:hover,
body #bottom_tab_post_headline > div.active,
body #bottom_tab_post_headline > div:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
}

body #bottom_category_list .headline {
    background: var(--bb-accent) !important;
    color: var(--bb-active-text) !important;
}


/* ====================================================================
 * 16. トップに戻るボタン（右下「↑」）
 * ==================================================================== */
body #return_top,
body #return_top a {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border: 1px solid var(--bb-sidebar-brd) !important;
}

body #return_top a:hover {
    background: var(--bb-active-bg) !important;
    color: var(--bb-active-text) !important;
    border-color: var(--bb-active-bg) !important;
}


/* ====================================================================
 * 17. 装飾系（FAQ、カードリンク、その他）
 * ==================================================================== */
body .faq_list .title.active,
body .cardlink .title a {
    color: var(--bb-accent);
}

body .cardlink .title a:hover {
    color: var(--bb-accent);
    opacity: 0.85;
}

/* About系ページ（会社案内など） */
body #about_page .content1,
body #about_career ul,
body #about_book .item,
body #membership_test_page .content1,
body #membership_test_page .content2 {
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-sidebar-brd) !important;
}

body #membership_test_page .content2 .headline {
    background: var(--bb-accent) !important;
    color: var(--bb-active-text) !important;
}


/* ====================================================================
 * 18. モバイル表示（767px以下）専用スタイル
 *     スマホでは #header が上部固定ヘッダーになり、
 *     #drawer_menu / #mobile_menu / #mobile_login_button が登場する
 * ==================================================================== */
@media (max-width: 767px) {

  /* 上部固定ヘッダー */
  body #header,
  body #header:after {
      background: var(--bb-sidebar-bg) !important;
  }

  body #header,
  body #header a,
  body #header_logo a {
      color: var(--bb-sidebar-text) !important;
  }

  body.header_fixed #header:before {
      background: var(--bb-sidebar-brd) !important;
  }

  /* ハンバーガーボタン */
  body #drawer_menu_button span {
      background: var(--bb-sidebar-text) !important;
  }

  /* モバイル検索ボタン */
  body #mobile_header_search_button {
      color: var(--bb-sidebar-text) !important;
  }
  body #mobile_header_search_button:before {
      color: var(--bb-sidebar-text) !important;
  }

  /* ドロワーメニュー本体（ハンバーガーから開くメニュー） */
  body #drawer_menu {
      background: var(--bb-bg) !important;
      color: var(--bb-text) !important;
  }

  body #drawer_menu .header {
      background: var(--bb-sidebar-bg) !important;
  }

  /* ドロワーメニューの閉じるボタン */
  body #drawer_menu .close_button:before {
      color: var(--bb-sidebar-text) !important;
  }

  /* ドロワー内のロゴ */
  body #drawer_logo,
  body #drawer_logo a,
  body #drawer_logo .logo_text {
      color: var(--bb-sidebar-text) !important;
  }

  /* ドロワーメニューのスクロールバー */
  body #drawer_menu .simplebar-scrollbar:before {
      background: var(--bb-sidebar-brd) !important;
  }

  /* モバイルログインボタン（マイページ / ログアウト / ログイン / 登録） */
  body #mobile_login_button a {
      background: var(--bb-active-bg) !important;
      color: var(--bb-active-text) !important;
  }
  body #mobile_login_button a:last-of-type {
      border-left-color: var(--bb-sidebar-brd) !important;
  }
  body #mobile_login_button a:hover {
      opacity: 0.85;
  }

  /* モバイル用グローバルメニュー */
  body #mobile_menu {
      border-top-color: var(--bb-sidebar-brd) !important;
  }
  body #mobile_menu a {
      background: var(--bb-sidebar-bg) !important;
      color: var(--bb-sidebar-text) !important;
      border-bottom: 0.5px solid var(--bb-sidebar-brd);
  }
  body #mobile_menu a:hover,
  body #mobile_menu li.current-menu-item > a,
  body #mobile_menu li.current-menu-parent > a,
  body #mobile_menu li.current-menu-ancestor > a {
      background: var(--bb-active-bg) !important;
      color: var(--bb-active-text) !important;
  }

  /* モバイル用子メニュー */
  body #mobile_menu li li a,
  body #mobile_menu li ul {
      background: var(--bb-bg) !important;
      color: var(--bb-text) !important;
  }

  /* モバイル子メニュー開閉ボタンの＋／− */
  body #mobile_menu .child_menu_button:before,
  body #mobile_menu .child_menu_button:after {
      background: var(--bb-sidebar-text) !important;
  }

  /* モバイル用フッターメニュー */
  body #mobile_footer_menu a {
      color: var(--bb-text) !important;
  }
  body #mobile_footer_menu a:hover {
      color: var(--bb-accent) !important;
  }

  /* モバイル用SNS */
  body #mobile_sns a,
  body #mobile_sns a:before {
      color: var(--bb-text) !important;
  }

  /* サイドボタン（縦の登録ボタン） */
  body #side_button a {
      background: var(--bb-active-bg) !important;
      color: var(--bb-active-text) !important;
  }

  /* ヘッダーメッセージ */
  body #header_message {
      background: var(--bb-accent) !important;
      color: var(--bb-active-text) !important;
  }

}


/* ====================================================================
 * 19. スクロールバー（任意・統一感のため）
 * ==================================================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bb-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--bb-sidebar-brd);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--bb-accent);
}


/* ====================================================================
 * 20. サイドボタン（縦の「ログイン」「会員登録」） - PC専用配色
 *     通常   : 両方ともアクセントピンクで統一
 *     ホバー : ダークピンクに変化（押された感）
 *     ※ 767px以下のモバイル時はセクション18の#side_buttonルールが適用される
 * ==================================================================== */
@media (min-width: 768px) {
  body #side_button a.open_login_modal,
  body #side_button a.open_register_modal {
    background: var(--bb-accent, #cb5278) !important;
    color: #fff !important;
    border: none !important;
    transition: background .2s;
  }
  body #side_button a.open_login_modal:hover,
  body #side_button a.open_register_modal:hover {
    background: #9a3a58 !important; /* ダークピンク */
    opacity: 1 !important;
  }
}


/* ====================================================================
 * 21. インデックスタブブロック（cb_tab_post）配色
 *     タブ非選択   = 黒（サイト背景）
 *     タブ選択中   = アクセントピンク
 *     記事サムネ周り(.index_tab_post のpadding領域) = アクセントピンクの枠
 *     ※ セクション6の.index_tab_post_headlineルールに上書きで効かせるため
 *       詳細度を上げた.cb_tab_post .index_tab_post_headline > divで指定
 * ==================================================================== */
/* タブ headline: 非選択は黒 */
body .cb_tab_post .index_tab_post_headline > div {
  background: var(--bb-bg, #000) !important;
  color: var(--bb-text, #fff) !important;
  border-color: var(--bb-sidebar-brd, #333) !important;
  transition: background .2s;
}
/* タブ headline: 選択中はピンク */
body .cb_tab_post .index_tab_post_headline > div.active {
  background: var(--bb-accent, #cb5278) !important;
  color: #fff !important;
  border-color: var(--bb-accent, #cb5278) !important;
}
/* 記事サムネが入るコンテナ（30px padding）の背景をピンクに → サムネを囲むピンク枠 */
body .cb_tab_post .index_tab_post {
  background: var(--bb-accent, #cb5278) !important;
}


/* ====================================================================
 * 22. FAQ質問エリア（faq_list .item .title）— 白BG → トンマナ統一
 *     背景         : サイト背景（黒）
 *     文字         : アクセントピンク
 *     「?」アイコン : 不透明ピンク丸＋白文字でコントラスト確保
 *     +/- トグル    : アクセントピンク
 * ==================================================================== */
body .faq_list .item .title {
  background: var(--bb-bg) !important;
  color: var(--bb-accent) !important;
  border: 1px solid var(--bb-sidebar-brd) !important;
}
body .faq_list .item .title span {
  color: var(--bb-accent) !important;
}
/* 「?」アイコンの丸を不透明ピンクに（元は50%透明のため暗BGで沈むのを補正） */
body .faq_list .item .title span::before {
  background-color: var(--bb-accent) !important;
}
/* 「?」文字部分を白でくっきり */
body .faq_list .item .title span::after {
  color: #fff !important;
}
/* +/- トグル */
body .faq_list .item .title::after {
  color: var(--bb-accent) !important;
}