@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
*/

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

/*見出し2をカスタマイズ*/
.article h2{
  padding: 0.3em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

/*---------------------------------
親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget_categories ul li a::before{
  font-family: FontAwesome;
  content: "\f07b"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}

/*---------------------------------
子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "\f114"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
}

.sidebar h3{
  background-color:#fffaf4;/*好きな背景色にする*/
  padding:2px 10px;
  margin:16px 0;
}

/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #FFC679; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

/* ✅ H1～H6の見出しを統一（元のH2と同じ色） */
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  padding: 0.3em; /* 文字周りの余白 */
  margin: 10px 0; /* 上下の余白 */
  color: #494949; /* 文字色（元のH2と同じ） */
  background: #fffaf4; /* 背景色（元のH2と同じ） */
  border-left: solid 5px #ffaf58; /* 左線の色（元のH2と同じ） */
  font-weight: bold; /* 太字 */
}

/* ✅ 各見出しの文字サイズ（そのまま） */
.article h1 { font-size: 2.2em; padding: 0.3em; } /* H1は特大 */
.article h2 { font-size: 2.0em; } /* H2は大きめ */
.article h3 { font-size: 1.8em; } /* H3は少し小さめ */
.article h4 { font-size: 1.6em; } /* H4 */
.article h5 { font-size: 1.4em; } /* H5 */
.article h6 { font-size: 1.2em; } /* H6（最小） */

/* サイトのタイトルを青にする */
.site-title, .site-title a {
  color: #0073e6 !important; /* 青色（Googleの検索結果の青に近い） */
}

/* 検索結果のタイトルを青にする */
.search-results h2.entry-title a {
  color: #0073e6 !important; /* 検索結果のタイトルも青 */
}

/* 一般的な見出し（h1, h2 など）にはオレンジを維持 */
h2 {
  color: #ff9900; /* 見出しのオレンジはそのまま */
}

/* 検索結果のタイトルを青にする（最強バージョン） */
.search-results h2.entry-title a,
.search-results h3.entry-title a,
.search-results .post-title a,
.search-results .entry-title a,
h2.entry-title a, 
h3.entry-title a,
.post-title a, 
.entry-title a {
  color: #0073e6 !important; /* 青 */
}

/* 万が一、親要素に色が適用されている場合もリセット */
.search-results h2.entry-title,
.search-results h3.entry-title,
.search-results .post-title,
.search-results .entry-title,
h2.entry-title, 
h3.entry-title,
.post-title, 
.entry-title {
  color: inherit !important;
}

.article h3 {
  color: #0073e6 !important; /* 文字色は濃い青 */
  background-color: #e6f2ff !important; /* 背景色は薄い青 */
  padding: 10px; /* 見出し内の余白 */
  border-left: solid 5px #6699ff; /* 濃い青の左ライン */
  border-radius: 5px; /* 角を少し丸く */
  margin: 10px 0; /* 上下の余白 */
  font-weight: bold; /* 太字 */
}

/* テーブルを囲む div に共通スタイル */
.saoif-table {
  margin-bottom: 8px !important;  /* テーブル下に8pxの余白 */
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* テーブル本体の見た目を整える */
.saoif-table table {
  border-collapse: collapse !important;
  table-layout: auto !important;
  width: auto !important;
  text-align: left !important;
}

/* セル内スタイル */
.saoif-table th,
.saoif-table td {
  white-space: nowrap !important;
  padding: 5px !important;
  border: 1px solid #ccc !important;
}