@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* ============================================
   目次の表示崩れを修正
   ============================================ */

/* 目次全体のリセット */
.toc,
.toc-content {
  list-style: none !important;
}

/* 目次のリスト項目 */
.toc-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.toc-list li {
  position: relative !important;
  padding-left: 0 !important;
  margin-bottom: 8px !important;
  list-style: none !important;
}

/* マーク（●）を非表示 */
.toc-list li::before,
.toc-list li::marker {
  display: none !important;
  content: none !important;
}

/* 番号とテキストの間隔を調整 */
.toc-link {
  display: flex !important;
  align-items: flex-start !important;
}

.toc-number {
  display: inline-block !important;
  min-width: 25px !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

/* 子階層（H3など）の調整 */
.toc-list .toc-list {
  padding-left: 25px !important;
  margin-top: 8px !important;
}

.toc-list .toc-list li {
  margin-bottom: 5px !important;
}


/* =====================================================
   イノセンススキン カスタマイズCSS
   配色案：マリーゴールド × クリーム系
   -----------------------------------------------------
   #F5A623 ベースオレンジ
   #E8881A 濃いオレンジ（アクセント）
   #FFF4DE 薄いオレンジ（背景用）
   #FDF8F0 ページ背景
   #5C4A2E テキスト色
   ===================================================== */


/* =====================================================
   サイト全体のフォント
   Mac等：ヒラギノ角ゴ
   Windows等（ヒラギノが無い環境）：游ゴシック
   ===================================================== */
body,
.article,
.entry-content {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "游ゴシック", YuGothic, sans-serif !important;
}


/* =====================================================
   ページ全体の背景色（クリーム）
   ===================================================== */
body {
  background-color: #FDF8F0;
}


/* =====================================================
   本文・通常テキストの色
   ===================================================== */
body,
p,
li,
.article,
.article p,
.article li,
.article div,
.entry-content,
.entry-content p {
  color: #5C4A2E !important;
}


/* =====================================================
   見出し2（h2）
   アイコンの円・見出し2 → ベースオレンジ
   ===================================================== */
.article h2 {
  background-color: #F5A623;
  color: #ffffff;
  border-color: #F5A623;
}

/* h2の左側アイコンの円（イノセンスは::before で円を表示） */
.article h2::before {
  background-color: #F5A623;
}


/* =====================================================
   見出し3（h3）
   見出し3の境界線 → 濃いオレンジ
   見出し3の背景 → 薄いオレンジ
   ===================================================== */
.article h3 {
  background-color: #FFF4DE;
  border-color: #E8881A;
  color: #5C4A2E;
}


/* =====================================================
   ボタン
   濃いオレンジ（アクセント）
   ===================================================== */
.btn-bord,
.cta-btn,
.sns-share-buttons .btn,
.wp-block-button__link {
  background-color: #E8881A !important;
  border-color: #E8881A !important;
  color: #ffffff !important;
}

.btn-bord:hover,
.cta-btn:hover,
.wp-block-button__link:hover {
  background-color: #F5A623 !important;
  border-color: #F5A623 !important;
}


/* =====================================================
   タブ（アクティブ／非アクティブ）
   アクティブタブ → ベースオレンジ
   非アクティブタブ背景 → 薄いオレンジ
   ===================================================== */
.tab-button-area .tab-page-link,
.toc-tab-button-area .toc-tab-page-link,
li.tab-label {
  background-color: #FFF4DE;
  color: #5C4A2E;
}

@media screen and (min-width: 600px) {
  .tab-button-area .tab-page-link,
  .toc-tab-button-area .toc-tab-page-link,
  li.tab-label {
    font-size: 16px !important;
  }
}

.tab-button-area .tab-page-link.tab-active,
.toc-tab-button-area .toc-tab-page-link.tab-active,
li.tab-label.is-active {
  background-color: #F5A623;
  color: #ffffff;
}


/* =====================================================
   強調文字
   濃いオレンジ
   ===================================================== */
.article strong {
  color: #E8881A;
}


/* =====================================================
   記事カードのタイトル文字
   ===================================================== */
.entry-card-title,
.entry-card-title.card-title,
a.entry-card-title.card-title.e-card-title {
  color: #5C4A2E !important;
}


/* =====================================================
   ブレッドクラム（パンくずリスト）の文字色
   ===================================================== */
#breadcrumb,
#breadcrumb a,
#breadcrumb span,
.breadcrumb {
  color: #5C4A2E !important;
}

/* パンくずのアイコン部分（矢印など）は背景色なし、文字色のみ統一 */
#breadcrumb a::before,
.breadcrumb a::before {
  color: #5C4A2E !important;
}

#breadcrumb *::before,
.breadcrumb *::before {
  background-color: transparent !important;
}


/* =====================================================
   サイドバーウィジェット
   タイトル部分 → ベースオレンジ
   本体（コンテンツ）部分 → 白
   ===================================================== */
#sidebar .widget .widget-title,
#sidebar .widget-title {
  background-color: #F5A623 !important;
  color: #ffffff !important;
}

#sidebar .widget,
#sidebar .widget-content,
#sidebar .author-box.border-element,
#sidebar .author-box {
  background-color: #ffffff !important;
}

/* 検索ウィジェットは白背景から除外（透明にする） */
#sidebar .widget_search,
#sidebar .widget_search .widget-content,
#sidebar .widget:has(form.wp-block-search) {
  background-color: transparent !important;
}

/* プロフィール内の文字色は維持 */
#sidebar .author-box.border-element *,
#sidebar .author-box * {
  color: #5C4A2E !important;
}

/* ウィジェット間の横幅・余白を統一 */
#sidebar .widget,
#sidebar .author-box.border-element,
#sidebar .author-box {
  margin: 0 0 32.4px;
  padding: 0;
  border: none;
}


/* =====================================================
   サイドバーのカテゴリーリンク・投稿数バッジ
   ===================================================== */
.widget_categories a,
.widget_archive a,
#sidebar a {
  color: #5C4A2E !important;
}

.post-count {
  background-color: #FFF4DE !important;
  color: #5C4A2E !important;
}


/* =====================================================
   目次ウィジェット
   ===================================================== */
#toc,
.toc.toc-none.toc-center.border-element,
div[id^="toc"] {
  background-color: #ffffff !important;
  color: #5C4A2E !important;
}

.toc-title::before,
label.toc-title::before {
  background-color: #F5A623 !important;
}


/* =====================================================
   アイコン背景の一括統一
   Cocoon標準のグレー円アイコン（#777777系）を
   ベースオレンジ／テキスト色にまとめて変更
   ===================================================== */
.article h1::before,
.article h2::before,
.article h3::before,
.article h4::before,
.entry-content h1::before,
.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before,
#comments .comment-title::before,
.related-entry-heading::before,
.toc-title::before,
.box-label::before,
h3.wp-block-heading::before,
.wp-block-heading::before,
h2#comments.comment-title::before,
h2.related-entry-heading::before,
.entry-content h2::before {
  background-color: #F5A623 !important;
}

.entry-date::before,
time.entry-date::before {
  background-color: #5C4A2E !important;
}


/* =====================================================
   日付アイコン・日付テキスト
   ===================================================== */
.entry-date,
time.entry-date,
.date.published,
.date.updated,
span.entry-date.date.published,
span.entry-date.date.updated,
span.far.fa-clock,
span.fas.fa-history {
  color: #5C4A2E !important;
  background-color: transparent !important;
}


/* =====================================================
   コメント・関連記事
   ===================================================== */

/* コメント見出しの文字色 */
h2#comments.comment-title {
  color: #5C4A2E !important;
}

/* コメント投稿ボタン */
#comment-reply-btn,
button.comment-btn.key-btn {
  background-color: #E8881A !important;
}

/* 関連記事の見出し文字色 */
.related-entry-main-heading,
.related-entry-main-heading.main-caption {
  color: #E8881A !important;
}

/* 関連記事カードのタイトル文字 */
.related-entry-card-title,
h3.related-entry-card-title.card-title.e-card-title {
  color: #5C4A2E !important;
}


/* =====================================================
   テキストボックス（囲み枠）
   ===================================================== */
.wp-block-cocoon-blocks-blank-box.blank-box,
.tab-caption-box-content.block-box-content.box-content,
.caption-box-content.block-box-content.box-content,
div.wp-block-cocoon-blocks-blank-box-1.blank-box.block-box {
  background-color: #ffffff !important;
  border-color: #5C4A2E !important;
}

.wp-block-cocoon-blocks-blank-box,
.wp-block-cocoon-blocks-blank-box.blank-box {
  background-color: #FFF4DE !important;
}

/* 資金計画ポイントなどの囲みボックス */
.fukidashi-box,
.cocoon-sticky-side-section,
div[style*="background"] .blank-box {
  background-color: #FFF4DE !important;
}

/* テキストボックスの見出しラベル */
.caption-box-label,
.box-label,
.tab-caption-box-label.block-box-label.box-label {
  background-color: #5C4A2E !important;
  color: #ffffff !important;
}

.caption-box-label-text,
.block-box-label-text,
.box-label-text,
span.caption-box-label-text {
  color: #ffffff !important;
}


/* =====================================================
   吹き出し（speech-balloon）
   ===================================================== */
.speech-balloon {
  border-color: #5C4A2E !important;
}

/* 矢印外側（枠線色の三角形） */
.speech-balloon::before {
  border-color: transparent #5C4A2E transparent transparent !important;
}

/* 矢印内側（白い三角形でくり抜き） */
.speech-balloon::after {
  border-color: transparent #ffffff transparent transparent !important;
}


/* =====================================================
   グローバルメニュー（ナビゲーション）の項目ラベル
   ===================================================== */
.item-label,
.navi-in .item-label,
#navi .item-label {
  color: #5C4A2E !important;
}


/* =====================================================
   SNSフォローボタン（アイコン）
   背景を濃いオレンジに
   ===================================================== */
.sns-follow-buttons .sns-button.follow-button,
.sns-follow-buttons a.sns-button {
  background-color: #E8881A !important;
}

.sns-follow-buttons .sns-button.follow-button:hover,
.sns-follow-buttons a.sns-button:hover {
  background-color: #F5A623 !important;
}

/* サイドバー（プロフィール内）のSNSアイコン：背景白・アイコンオレンジ */
.author-box .sns-follow-buttons .sns-button.follow-button,
.author-box .sns-follow-buttons a.sns-button,
#sidebar .sns-follow-buttons .sns-button.follow-button,
#sidebar .sns-follow-buttons a.sns-button {
  background-color: #ffffff !important;
  color: #E8881A !important;
}

.author-box .sns-follow-buttons .sns-button.follow-button:hover,
.author-box .sns-follow-buttons a.sns-button:hover,
#sidebar .sns-follow-buttons .sns-button.follow-button:hover,
#sidebar .sns-follow-buttons a.sns-button:hover {
  background-color: #FFF4DE !important;
}


/* =====================================================
   検索ブロックの背景を透明に
   ===================================================== */
form.wp-block-search,
.wp-block-search,
.wp-block-search__button-outside,
.wp-block-search__inside-wrapper,
#sidebar .wp-block-search,
#sidebar form.wp-block-search {
  background: transparent !important;
  background-color: transparent !important;
}