@charset "utf-8";
/*
Theme Name: Muum child
Theme URI:https://tcd-theme.com/tcd085
Description:WordPressテーマ「Muum」の子テーマ
Template:muum_tcd085
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/* ======================================================================
   織辺真智子 公式サイト ブランドスタイル
   ----------------------------------------------------------------------
   ベース ： 白／アイボリー／グレージュ（#FAF8F4 / #F3EFE6）
   文字色 ： #23201C（墨に近い濃茶）/ 本文 #5E564B
   見出し ： Shippori Mincho（明朝）
   本文   ： Noto Sans JP（ゴシック）
   アクセント： #4E7470（落ち着いたティール）
   ※ 色を変えたい時は下の :root の値を書き換えるだけでOK
   ====================================================================== */

/* Google Fonts 読み込み */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  --brand-ink:    #23201C;  /* 見出し・濃い文字 */
  --brand-text:   #5E564B;  /* 本文 */
  --brand-bg:     #FAF8F4;  /* 背景（アイボリー）*/
  --brand-bg2:    #F3EFE6;  /* 薄いベージュ（セクション背景）*/
  --brand-line:   #E6DFCE;  /* 罫線 */
  --brand-accent: #4E7470;  /* アクセント（ティール）*/
  --brand-accent-d:#3C5A57; /* アクセント濃いめ（ホバー）*/
  --mincho: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --gothic: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

/* ---- 基本：フォントと背景 ---- */
body{
  font-family: var(--gothic) !important;
  color: var(--brand-text);
  background: var(--brand-bg);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .01em;
}

/* 見出しは明朝に */
h1, h2, h3, h4, h5,
#post_title .title,
.post_content h1, .post_content h2, .post_content h3, .post_content h4,
.headline, .widget_header, .section_title,
#index_tab li a, #ranking_list .tab li a{
  font-family: var(--mincho) !important;
}

/* 本文・記事の文字色と行間を上品に */
.post_content{
  color: var(--brand-text);
  font-size: 16px;
  line-height: 2.05;
}
.post_content h2{
  color: var(--brand-ink);
  border: none;
  border-left: 4px solid var(--brand-accent);
  background: var(--brand-bg2);
  padding: 14px 20px;
  border-radius: 2px;
}
.post_content h3{
  color: var(--brand-ink);
  border-bottom: 1px solid var(--brand-line);
  padding-bottom: 8px;
}

/* ---- リンク・アクセント ---- */
a{ color: var(--brand-accent); }
.post_content a:hover{ color: var(--brand-accent-d); }

/* ---- TCDの黒（#000）アクセントをブランドのティールに置換 ---- */
/* タブの選択中・ホバー */
#index_tab li.active a,
#index_tab li a:hover,
#ranking_list .tab li.active a,
#ranking_list .tab li a:hover{
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}
#index_tab li.active a:after,
#ranking_list .tab li.active a:after{
  border-top-color: var(--brand-accent) !important;
}

/* ページネーション */
.page_navi span.current,
.page_navi a:hover{
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}

/* 記事下ページネーション */
#post_pagination p,
#post_pagination a:hover{
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

/* グローバルナビ（選択中・ホバー）*/
#global_menu li.current-menu-item > a,
#global_menu li a:hover{
  background: var(--brand-accent) !important;
  color: #fff !important;
}

/* ---- カテゴリーラベル（記事一覧のタグ）---- */
/* 既定の色分けを活かしつつ、角を少し落とし上品に */
.cat-name a, .post_list .category a, .blog_list .category a{
  border-radius: 2px;
  font-family: var(--gothic) !important;
  letter-spacing: .04em;
}

/* ---- ボタン類 ---- */
.header_btn a,
#page2_image_header .header_btn a,
.more_btn a, .btn a, a.btn{
  background: var(--brand-ink) !important;
  border-radius: 2px !important;
  font-family: var(--gothic) !important;
  letter-spacing: .04em;
}
.header_btn a:hover,
#page2_image_header .header_btn a:hover{
  background: var(--brand-accent) !important;
}

/* ---- ヘッダー・フッター ---- */
#header_image, #header{
  background: var(--brand-bg);
}
#footer{
  background: var(--brand-ink);
}
#footer, #footer a{ color: #CBC3B2; }
#footer a:hover{ color: #fff; }

/* ---- サイドバー見出し ---- */
.sidebar_widget h3, .widget_header{
  color: var(--brand-ink);
  border-color: var(--brand-line);
}

/* ---- 引用・囲み ---- */
.post_content blockquote{
  background: var(--brand-bg2);
  border-left: 4px solid var(--brand-accent);
  border-radius: 2px;
  color: var(--brand-text);
}

/* ---- FAQ（テーマ標準のショートコード）---- */
.sc_faq_list .title{ font-family: var(--mincho) !important; color: var(--brand-ink); }
.sc_faq_list .title.active{ color: var(--brand-accent); }

/* ---- マーカー（本文で使えるユーティリティ）----
   投稿で <span class="marker">テキスト</span> と書くと
   公式サイトと同じベージュのマーカーが引けます */
.marker{
  background: linear-gradient(transparent 58%, #E3DBC6 58%);
  font-weight: 700;
  color: var(--brand-ink);
}
.marker-teal{
  background: linear-gradient(transparent 58%, #CFE0DB 58%);
  font-weight: 700;
  color: var(--brand-ink);
}

/* ---- 選択範囲の色 ---- */
::selection{ background: #E6E0CB; }