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

@charset "UTF-8";

/* ==========================================================================
   おひさまデザイン - CocoonカスタムCSS（ブルー＆ゴールドPOP）
   ========================================================================== */

/* 0. 全体フォントを丸みのあるデザインに（※サイト全体に適用） */
body {
    font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
    background-color: #FBF9F3 !important; /* パレット右：ベースベージュ */
    color: #223A70 !important;            /* パレット中央：深いネイビー */
}

/* 1. ヘッダー・ナビゲーション */
.header {
    background-color: #FBF9F3 !important;
    border-bottom: 3px solid #223A70 !important;
}
.site-name-text a {
    color: #5C7BC8 !important; /* メインブルー */
    font-weight: 900 !important;
}
.navi-in a {
    color: #223A70 !important;
    font-weight: 700;
}
.navi-in a:hover {
    color: #5C7BC8 !important;
    background-color: #BACCEE !important; /* パステルブルー */
}

/* 2. メインコンテンツ・記事カードの手書き・ぷっくり風デザイン */
.ect-entry-card {
    background-color: #ffffff !important;
    border: 3px solid #223A70 !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0px #223A70 !important; /* ぷっくり2Dシャドウ */
    transition: all 0.2s ease;
    overflow: hidden;
}
.ect-entry-card:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #223A70 !important;
}

/* 3. 記事内の見出し（H2 / H3 / H4）の装飾 */
/* H2: 丸みのある背景付き＋ぷっくり影 */
.article h2 {
    background-color: #ffffff !important;
    color: #223A70 !important;
    border: 3px solid #223A70 !important;
    border-radius: 9999px !important; /* 完全な丸み */
    padding: 12px 24px !important;
    font-weight: 900 !important;
    box-shadow: 4px 4px 0px #223A70 !important;
    margin-top: 2em !important;
}
/* H2の左についているデフォルトの線を消す */
.article h2::before {
    display: none !important;
}

/* H3: 手書き風のうねうね下線風（パステルブルーのマーカー） */
.article h3 {
    border: none !important;
    background: linear-gradient(transparent 60%, #BACCEE 60%) !important;
    padding: 4px 0 !important;
    color: #223A70 !important;
    font-weight: 900 !important;
}

/* H4: 左側にゴールドの丸いワンポイント */
.article h4 {
    border: none !important;
    padding-left: 18px !important;
    position: relative !important;
    color: #223A70 !important;
}
.article h4::before {
    content: "☀" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #C5A04E !important; /* ゴールド */
    font-size: 14px !important;
}

/* 4. サイドバーのウィジェット */
.sidebar h3 {
    background-color: #E3D3B4 !important; /* 濃いめベージュ */
    color: #223A70 !important;
    border: 3px solid #223A70 !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0px #223A70 !important;
    font-weight: 700 !important;
}

/* 5. フッター */
.footer {
    background-color: #223A70 !important; /* 深いネイビー */
    color: #ffffff !important;
    border-top: 4px solid #223A70 !important;
}
.footer a {
    color: #BACCEE !important;
}

/* サイト全体にスムーススクロールを適用 */
html {
    scroll-behavior: smooth;
}