@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){
  /*必要ならばここにコードを書く*/
}

/* カテゴリーウィジェットのアコーディオン化（強化版） */
.widget_categories ul li.children {
    display: none !important; /* 強制的に隠す */
    margin-left: 20px !important;
}

.widget_categories ul li:hover > ul.children {
    display: block !important; /* マウスを乗せた時だけ強制的に出す */
}

/* 親カテゴリーに印をつける */
.cat-item-has-children > a::after {
    content: " ＋";
    font-size: 0.8em;
    color: #666;
}

/* 1. 引用ブロックの枠線を消し、背景のみにする */
.entry-content blockquote,
.article blockquote,
figure.wp-block-quote,
blockquote.wp-block-quote {
    border: none !important;            /* すべての枠線を消す */
    background-color: #f7f7f7 !important; /* ほんのりとしたグレー背景 */
    padding: 20px 30px !important;      /* 中の余白を少し広げて読みやすく */
    border-radius: 5px;                 /* 角を少しだけ丸くすると優しい印象に */
    position: relative;
}

/* 詩ブロックも枠線がいらない場合はこちら */
pre.wp-block-verse {
    border: none !important;
    background-color: #f7f7f7 !important;
    padding: 20px !important;
}

/* 3. サイドバーの見出しをピンクグレーに */
.sidebar h3.widget-title,
.sidebar h3 {
    background-color: #eadfe4 !important;
    color: #555555 !important;
    border-left: 5px solid #f20081 !important;
}

/* 4. ヘッダーの下に細いラインを入れる（以前の提案） */
.header {
    border-bottom: 2px solid #f20081;
}
/* H2見出しをピンクグレーのデザインに変更 */
.article h2 {
    background-color: #eadfe4 !important; /* 背景色：サイドバーとお揃いのピンクグレー */
    color: #333333 !important;            /* 文字色：濃いグレー */
    border-left: 6px solid #f20081 !important; /* 左側の線だけ鮮やかなピンク */
    border-bottom: none !important;       /* 下線があれば消す */
    padding: 15px 20px !important;        /* 上下左右の余白を整える */
    line-height: 1.4 !important;
}
/* H3見出しを左線のみのシンプルデザインに変更 */
.article h3 {
    background-color: transparent !important; /* 背景を消す */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: 6px solid #f20081 !important; /* 左側にだけピンクの線を引く */
    color: #333333 !important;                 /* 文字色 */
    padding: 5px 0 5px 15px !important;        /* 上下を詰め、左側に余白を作る */
    margin: 40px 0 20px 0 !important;          /* 前後の間隔を整える */
}
/* 1. H4のすぐ上などに出る広告エリアの境界線を完全に消す */
.ad-area, 
.main .ad-area, 
.ad-label, 
.ad-space {
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. もし線が「区切り線」ウィジェット等の場合はここも消す */
.article h4 {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #eadfe4 !important; /* 希望の下線 */
    background-color: transparent !important;
    padding: 0 0 8px 0 !important;
    margin: 40px 0 20px 0 !important;
    color: #444444 !important;
}

/* 3. 投稿内のすべての要素に対して、上部の不要な線を禁止する */
.entry-content > *,
.article > * {
    border-top: none !important;
}
/* 3. 広告や関連記事の周りの不要な線を消す */
.ad-area, .related-entries, .ad-label {
    border: none !important;
}
/* 目次全体の枠線をグレーにして角を丸くする */
.toc {
    border: 1px solid #dddddd !important; /* 全体を薄いグレーの線で囲む */
    border-top: 1px solid #dddddd !important; /* 消えた上の線を強制復活 */
    border-radius: 10px !important;       /* 角を丸くする（数字を大きくするともっと丸くなります） */
    padding: 20px !important;             /* 中の余白を整える */
    background-color: #ffffff !important; /* 背景は白に */
    overflow: hidden;                     /* 角丸からはみ出さないように */
}

/* 目次のタイトル（目次という文字）部分の装飾 */
.toc-title {
    background-color: transparent !important;
    color: #333333 !important;
    font-weight: bold !important;
    border-bottom: 1px solid #eeeeee !important; /* タイトルの下の線だけ薄く */
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
}
/* ページ最下部の「脚注」エリアを整える */
.wp-block-footnotes {
    font-size: 0.85rem !important; /* 文字を小さく */
    color: #666666 !important;     /* グレーにして主張を抑える */
    line-height: 1.6 !important;   /* 行間を少し詰める */
    margin-top: 50px !important;   /* 本文との間にしっかり余白を作る */
    border-top: 1px solid #eeeeee; /* 上に薄い線を入れて区切る */
    padding-top: 20px;
}

/* 脚注内のリストの数字やリンクの色 */
.wp-block-footnotes ol li {
    margin-bottom: 5px;
}

/* 本文中の小さな数字（注釈番号）の色をメインのピンクに */
.article sup.wp-block-footnote-reference a {
    color: #f20081 !important;
    text-decoration: none;
    font-weight: bold;
}
/* 1. 「関連記事」という大きな見出しのデザイン */
.related-entry-heading {
    font-size: 1.15em !important; /* 少し大きく */
    font-weight: bold !important;
    color: #333 !important;
    border-bottom: 2px solid #eadfe4 !important; /* ピンクグレーの線 */
    padding-bottom: 10px;
    margin-bottom: 20px !important;
}

/* 2. 各記事の「タイトル」の文字サイズを変える */
.related-entry-card-title {
    font-size: 14px !important; /* ここで好きな大きさに（MとSの間くらい） */
    line-height: 1.4 !important;
    color: #333 !important;
    font-weight: 500 !important;
}

/* 3. カード全体の枠や影を消してスッキリさせる（今のデザインに合わせる） */
.related-entry-card {
    border: none !important;
    background: transparent !important;
}
/* サイドバーの親カテゴリーを太字にする */
.widget_categories ul li a {
    font-weight: bold; /* 親（および全体）を太字に */
}

/* 子カテゴリーは通常の太さに戻す */
.widget_categories ul li li a {
    font-weight: normal; /* 子カテゴリーは標準 */
    font-size: 0.9em;    /* 少し小さくするとさらに親子感が出ます（お好みで） */
}

/* 本文内の区切り線（hr）をデザイン */
.entry-content hr {
    border: none;
    height: 1px;
    background-color: #ddd; /* 線の色（薄いグレー） */
    position: relative;
    overflow: visible;
    margin: 3em 0; /* 前後の余白 */
}

.entry-content hr::after {
    content: "■"; /* 小さな四角（または ● や ◆） */
    font-size: 8px;
    color: #999;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff; /* 背景色と同じ白で文字の周りを抜く */
    padding: 0 10px;
}
/* 見出し（H2, H3, H4）の前に回り込みを解除する */
.entry-content h2, 
.entry-content h3, 
.entry-content h4 {
    clear: both;
}
/* 動画をカラムの幅いっぱいに強制的に広げる */
.force-full video {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}
/* ナビゲーション内の英語サブタイトルを下に配置 */
.en-sub {
  display: block;      /* 改行して下に持っていく */
  font-size: 10px;     /* 英語の文字サイズ（お好みで調整） */
  line-height: 1.2;    /* 上下の余白を調整 */
  margin-top: 2px;     /* 日本語との間の隙間 */
  font-weight: normal; /* 英語は細めにして読みやすく */
  opacity: 0.8;        /* 少しだけ透けさせて上品に */
}

/* メニュー全体の高さを調整して収まりを良くする */
.menu-caption {
  line-height: 1.4;
  text-align: center;
}