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

/* SNSシェアボタンとフォローボタンを非表示にする */
.sns-share, .sns-follow {
    display: none !important;
}

/* 1. 文字色をグレーに変更 */
body {
    color: #333333 !important;
}

/* 2. 見出し（H3）を「県道ヘキサ・道路標識」風にカスタム */
.article h3 {
    background: #f4f8fb !important; /* ヘキサを引き立てる極めて薄い青の背景 */
    color: #333333 !important;
    border-left: 7px solid #005a9c !important; /* 左側に県道ヘキサカラーの太い青線を引く */
    border-bottom: 1px solid #d0e0ed !important; /* 下側に薄い青の線を引く */
    padding: 12px 18px !important; /* 文字のまわりのすっきりとした余白 */
    font-size: 1.25em !important;
    font-weight: bold !important;
    margin-top: 2em !important;
    margin-bottom: 1em !important;
}

/* 3. 記事のタイトル（一番上の大きな文字）に、びわ湖・ヘキサの青を適用 */
.entry-title {
    color: #005a9c !important;
    font-size: 1.6em !important;
    border-bottom: 3px double #005a9c !important; /* タイトルの下に二重の青線を引く */
    padding-bottom: 10px !important;
}

/* 4. 箇条書き（・）の点の色もさりげなく青にする */
.article ul li::before {
    color: #005a9c !important;
}

/* 1. 記事の下にある黒い「Uncategorized（未分類）」のボタンを完全に消す */
.entry-categories, .entry-tags, .cat-tags {
    display: none !important;
}

/* 2. 【完全版】画面右側の「検索」や「Recent Posts」の見出しをヘキサの青にする */
.sidebar h3, .sidebar h4, .widget-title, .widgettitle, .wpp-heading, .sidebar-widget-title {
    background-color: #005a9c !important; /* 背景をヘキサの青にする */
    color: #ffffff !important; /* 文字を白にする */
    padding: 10px 15px !important;
    font-size: 1.1em !important;
    border: none !important;
    margin-bottom: 15px !important;
    border-radius: 3px !important; /* 角をほんの少し丸くして標識っぽくする */
}

/* 3. 画面右側の各ブロックの背景のグレーを白にしてすっきりさせる */
.sidebar aside, .widget {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* 薄い枠線をつける */
    padding: 15px !important;
    margin-bottom: 25px !important;
}

/* 画面右側の見出し（Recent Postsなど）をヘキサの青に強制変更 */
.sidebar .widget-title, .sidebar h2, .sidebar h3, .sidebar h4, .widget_title {
    background-color: #005a9c !important; /* 背景を青に */
    color: #ffffff !important; /* 文字を白に */
    padding: 10px 15px !important;
    border-radius: 3px !important; /* 角をほんの少し丸く */
}