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

/* ==========================================
** 0. カラー変数設定（ここを変更するだけで一括適用されます）
========================================== */
:root {
    --main-color: #576574;       /* 落ち着いたくすみブルー */
    --sub-color: #8395A7;        /* 淡いスレートグレー */
    --text-color: #222F3E;       /* ダークネイビー系の文字色 */
    --text-sub-color: #485460;   /* 中間色の文字色 */
    --bg-site: #F8F9FA;          /* すっきりとした明るい背景色 */
    --bg-quote: #EEF1F4;         /* 引用ボックスの背景色 */
}

/* ==========================================
** 1. サイト全体レイアウト・ヘッダー・フッター背景色
========================================== */
body {
    background-color: var(--bg-site) !important;
}

/* 不要なブログカードの要素のみ非表示 */
.blogcard-snippet, 
.blogcard-date {
    display: none !important;
}

/* ヘッダー背景色と文字色 */
#header,
.header-container,
.navi {
    background-color: var(--main-color) !important;
}
#header a,
.header-container a,
.site-name-text,
.navi-in a {
    color: #ffffff !important;
}

/* フッター背景色 */
#footer,
.footer-container {
    background-color: var(--main-color) !important;
}


/* ==========================================
** 2. 見出し（H2・H3・H4）デザイン
========================================== */
/* H2見出し */
.article h2,
#main .article h2,
.entry-content h2 {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--main-color) !important;
    color: var(--text-color) !important;
    text-decoration: none !important;
    padding: 0 0 8px 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 2em !important;
    margin-bottom: 1em !important;
}

.article h2::before,
.article h2::after {
    display: none !important;
    content: none !important;
}

/* H3見出し */
.article h3,
#main .article h3,
.entry-content h3 {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--sub-color) !important;
    color: var(--text-color) !important;
    text-decoration: none !important;
    text-underline-position: under !important;
    padding: 0 0 6px 0 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 1.8em !important;
    margin-bottom: 0.8em !important;
}

.article h3 *,
.entry-content h3 *,
.article h3 a,
.entry-content h3 a,
.article h3 span,
.entry-content h3 span {
    color: var(--text-color) !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.article h3::before,
.article h3::after,
#main .article h3::before,
#main .article h3::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

/* H4見出し */
.article h4,
#main .article h4,
.entry-content h4 {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--text-sub-color) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 0 0 14px !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.6em !important;
    position: relative !important;
    box-shadow: none !important;
}

.article h4::before,
#main .article h4::before,
.entry-content h4::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    background-color: var(--sub-color) !important;
    border-radius: 50% !important;
    display: block !important;
}

.article h4::after {
    display: none !important;
    content: none !important;
}


/* ==========================================
** 3. サイドバー・引用・カード画像
========================================== */
/* サイドバー・ウィジェットタイトル */
.sidebar .widget-title,
#sidebar .widget-title {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--main-color) !important;
    color: var(--text-color) !important;
    text-align: left !important;
    text-decoration: none !important;
    padding: 0 0 6px 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 15px !important;
    display: block !important;
}

.sidebar .widget-title::after,
#sidebar .widget-title::after {
    display: block !important;
    content: "INFORMATION" !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #999999 !important;
    letter-spacing: 0.1em !important;
    margin-top: 2px !important;
    text-transform: uppercase !important;
}

.sidebar .widget-title::before {
    display: none !important;
    content: none !important;
}

.sidebar .widget-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

/* 引用 (blockquote) */
.entry-content blockquote {
    background-color: var(--bg-quote) !important;
    border: none !important;
    color: #555555 !important;
    margin: 1.5em 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.entry-content blockquote * {
    color: #555555 !important;
}

/* 一覧画像をすべて16:9比率に統一 */
.entry-card-thumb img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
}


/* ==========================================
** 4. フッター装飾・文字色
========================================== */
#footer a,
#footer a:link,
#footer a:visited,
.footer-navi a,
.footer-navi-a,
.footer-bottom-logo,
.footer-bottom-logo a,
.copyright,
.copyright * {
    color: #ffffff !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.footer-navi li::before,
.footer-navi li::after,
.footer-navi-a::after {
    color: #ffffff !important;
    opacity: 0.5 !important;
}

#footer a:hover,
.footer-navi a:hover,
.footer-bottom-logo a:hover {
    color: #E8D3A7 !important;
    opacity: 1 !important;
}