@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&family=Zen+Maru+Gothic:wght@500;700&display=swap');

/*!
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){
  /*必要ならばここにコードを書く*/
}
/* 1. 全体の背景をロゴの中央にある淡いイエローに */
body {
    background-color: #fff9e6; /* ふんわり優しいクリームイエロー */
}

/* 2. メインエリアの背景を透明にする */
#main {
    background-color: transparent; 
    border: none;
}
/* 背景色が上書きされている可能性のある要素を透明に */
#container,
#content,
.wrap,
#header-container,
#footer,
.footer,
#sidebar,
.sidebar {
    background-color: transparent !important;
}

/* または全体を同じ色で統一したい場合 */
#header-container,
#footer,
.footer {
    background-color: #fff9e6 !important;
}


/* 3. 記事カードは白ベースで清潔感をキープし、枠線にピンクを */
.entry-card-wrap {
    background-color: #ffffff; 
    border: 2px solid #f9aab8; /* ロゴのピンクを枠線に */
    border-radius: 12px;       
    margin-bottom: 20px;       
    transition: all 0.3s ease; 
}
/* BとCの融合：ふんわり浮かぶ可愛いバッジ風ロゴ */
.header-site-logo-image {
    background-color: #ffffff; /* 白背景を確定 */
    border: 3px solid #f9aab8; /* ロゴのピンクを枠線に */
    border-radius: 20px;       /* 強めの角丸 */
    padding: 5px;              /* 枠線とロゴの間の余白 */
    box-shadow: 0 5px 15px rgba(249, 170, 184, 0.4); /* ふんわりしたピンクの影 */
    transition: all 0.3s ease; /* 動きを滑らかに */
}

/* マウスを乗せた時の動き（フローティング演出） */
.header-site-logo-image:hover {
    transform: translateY(-4px) scale(1.02); /* 少し浮いて大きくなる */
    box-shadow: 0 12px 25px rgba(249, 170, 184, 0.6); /* 影が濃く、広がる */
}
/* 記事カードのタイトルを【強制的に】ポップなフォントに変更 */
.entry-card-wrap .entry-card-title,
.entry-card-wrap h2 {
    font-family: 'Mochiy Pop P One', sans-serif !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
}
/* 記事カードのホバーアクション */
.entry-card-wrap:hover {
    transform: translateY(-5px) scale(1.02); /* 浮き上がりながら少し拡大 */
    box-shadow: 0 10px 25px rgba(249, 170, 184, 0.5); /* ピンクの影 */
    border-color: #87ceeb; /* ブルーに変化させたい場合 */
}
/* -------------------------------------------
   サイドバーのカスタマイズ（区切り線とフォント）
------------------------------------------- */

/* 1. リストの間にピンクの点線を引いて、上下にすき間を作る */
.sidebar .widget ul li,
.sidebar .widget-entry-cards .a-wrap {
    border-bottom: 2px dotted #f9aab8; /* ロゴのピンク色の点線 */
    padding: 12px 0; /* 上下のすき間をしっかり取る */
    margin-bottom: 0; 
}

/* 2. 一番下の線は不要なので消す */
.sidebar .widget ul li:last-child,
.sidebar .widget-entry-cards .a-wrap:last-child {
    border-bottom: none;
}

/* 3. サイドバーの文字をポップなフォントに変更 */
.sidebar .widget ul li a,
.sidebar .widget-entry-card-title {
    font-family: 'Mochiy Pop P One', sans-serif !important;
    font-size: 14px !important; /* メインより少し小さめにして圧迫感を減らす */
    line-height: 1.6 !important;
    display: inline-block;
    transition: transform 0.3s ease; /* アニメーションの準備 */
}

/* 4. マウスを乗せた時に少し右に動く遊び心（お好みで） */
.sidebar .widget ul li a:hover,
.sidebar .widget-entry-cards .a-wrap:hover {
    transform: translateX(5px); /* 少しだけ右にズラす */
}
/* -------------------------------------------
   サイドバーの画像ホバーエフェクト（楽しい仕掛け）
------------------------------------------- */

/* 1. 運営者プロフィールのアイコン（ぷるんと弾んで少し傾く） */
.sidebar .author-thumb img {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ゴムのようにぷるんとする特殊な動き */
}

.sidebar .author-thumb img:hover {
    transform: scale(1.1) rotate(8deg); /* 10%拡大して、右に8度傾く */
    box-shadow: 0 8px 15px rgba(249, 170, 184, 0.5); /* ロゴに合わせたピンクの影 */
}

/* 2. メルマガバナーなどの画像リンク（フワッと浮き上がって光る） */
.sidebar .widget a img {
    transition: all 0.3s ease; /* こちらは滑らかな動き */
    border-radius: 8px; /* バナーの角をほんの少し丸くして馴染ませる */
}

.sidebar .widget a:hover img {
    transform: translateY(-6px) scale(1.02); /* 上にフワッと浮きながら少しだけ拡大 */
    box-shadow: 0 10px 25px rgba(135, 206, 235, 0.5); /* ロゴに合わせたブルーの影で発光感を出す */
}
/* ==========================================
   カテゴリーの吹き出し（ツールチップ）機能
========================================== */

/* --- 1. 吹き出しのベース（形と動き） --- */
.sidebar .widget ul li a {
    position: relative; /* 吹き出しの基準位置 */
}

/* 吹き出しの本体（ピンク色の角丸四角形） */
.sidebar .widget ul li a::after {
    position: absolute;
    bottom: 100%;       /* 文字の上に配置 */
    left: 10px;         /* 左から少しずらした位置 */
    background-color: #f9aab8; /* ロゴのピンク色 */
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px !important;
    font-family: sans-serif !important; /* 吹き出しは読みやすい標準フォントに */
    white-space: nowrap; /* 文字を改行させない */
    box-shadow: 0 4px 10px rgba(249, 170, 184, 0.4); /* 薄い影 */
    
    /* 初期状態（透明で少し下にある状態） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); 
    transition: all 0.3s ease;
    z-index: 100;
}

/* 吹き出しのしっぽ（下向きの三角形） */
.sidebar .widget ul li a::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 20px;         /* しっぽの位置 */
    margin-bottom: -10px; /* 本体にピッタリくっつける */
    border: 6px solid transparent;
    border-top-color: #f9aab8; /* しっぽもピンク色 */
    
    /* 初期状態 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

/* マウスを乗せた時の動き（フワッと上に浮き上がって表示） */
.sidebar .widget ul li a:hover::after,
.sidebar .widget ul li a:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-5px); 
}
/* ==========================================
   カテゴリーの吹き出し（ツールチップ）機能
========================================== */

/* --- 1. 吹き出しのベース（形と動き） --- */
.sidebar .widget ul li a {
    position: relative; 
}

/* 吹き出しの本体 */
.sidebar .widget ul li a::after {
    position: absolute;
    bottom: 100%;       
    left: 10px;         
    background-color: #f9aab8; 
    color: #ffffff;
    padding: 8px 12px; /* 少し上下の余白を広げると見やすいです */
    border-radius: 8px;
    font-size: 12px !important;
    font-family: sans-serif !important; 
    
    /* === ここから下を変更 === */
    white-space: normal; /* 折り返しを許可する */
    width: 200px; /* 吹き出しの最大幅を固定する（お好みで調整） */
    line-height: 1.5; /* 行間を少し開けて読みやすく */
    /* === ここまで === */

    box-shadow: 0 4px 10px rgba(249, 170, 184, 0.4); 
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); 
    transition: all 0.3s ease;
    z-index: 100;
}

/* 吹き出しのしっぽ */
.sidebar .widget ul li a::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 20px;         
    margin-bottom: -10px; 
    border: 6px solid transparent;
    border-top-color: #f9aab8; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

/* マウスを乗せた時の動き */
.sidebar .widget ul li a:hover::after,
.sidebar .widget ul li a:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-5px); 
}

/* --- 2. カテゴリーごとの一言メッセージ --- */

/* AIと生活 */
.sidebar .widget ul li a[href*="ai-life"]::after {
    content: "AI好きの筆者がAIとの共生を考察します！🤖";
}

/* お酒 */
.sidebar .widget ul li a[href*="alcohol"]::after {
    content: "お酒はほどほどに！でも大好きなので綴ります！美味しいおつまみとのペアリングも🍷";
}

/* お金のこと */
.sidebar .widget ul li a[href*="money"]::after {
    content: "家計管理や節約術などを考察！等身大のお金の話を包み隠さず！🐖";
}

/* バレエ */
.sidebar .widget ul li a[href*="ballet"]::after {
    content: "兄妹で頑張るバレエ！レッスンや発表会に向けた親の奮闘記🩰";
}

/* 投資 */
.sidebar .widget ul li a[href*="investment"]::after {
    content: "NISAやiDeCo、個別株まで！初心者ながらにマイルールで手堅く増やす記録💰";
}

/* 旅行 */
.sidebar .widget ul li a[href*="travel"]::after {
    content: "旅行計画が苦手な筆者でも旅行通になりたい！楽しい思い出の記録として♨️";
}

/* 日常 */
.sidebar .widget ul li a[href*="daily"]::after {
    content: "シングルマザーとしての日常の記録です！日々のちょっとした出来事も🐰🐹";
}

/* 映画 */
.sidebar .widget ul li a[href*="movie"]::after {
    content: "映画好きな筆者が子供と楽しめる映画情報を共有します！お気に入り作品のレビューも🎬";
}

/* 書籍 */
.sidebar .widget ul li a[href*="book"]::after {
    content: "インプットの記録。心に響いた本や学びになった感想をシェア📚";
}

/* 楽天ROOM紹介品 */
.sidebar .widget ul li a[href*="room"]::after {
    content: "本当に買ってよかった便利グッズや愛用品だけを厳選紹介✨";
}

/* 美容と健康 */
.sidebar .widget ul li a[href*="health"]::after {
    content: "日々のランニング習慣や、無理なく続ける大人の健康づくり🏃‍♀️";
}

/* 話題のニュース */
.sidebar .widget ul li a[href*="news"]::after {
    content: "スマート家電などの最新トレンドや、気になるニュースを独自の視点で綴ります！👀";
}
/* ==========================================
   メルマガバナーの吹き出し（ツールチップ）
========================================== */

/* --- 1. 吹き出しのベース（画像に対して中央に配置する準備） --- */
.sidebar .widget a[href*="https://va-ne.com/lp/"] {
    position: relative;
    display: inline-block; 
}

/* --- 2. 吹き出しの本体 --- */
.sidebar .widget a[href*="https://va-ne.com/lp/"]::after {
    content: "メルマガ登録よろしくね！"; /* 表示したいメッセージ */
    position: absolute;
    bottom: 100%;
    left: 50%; /* 画像の真ん中を基準にする */
    transform: translate(-50%, 10px); /* ど真ん中に配置しつつ、少し下に隠しておく */
    background-color: #f9aab8; /* ロゴのピンク色 */
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px !important;
    font-family: 'Mochiy Pop P One', sans-serif !important; /* ポップなフォントで可愛くアピール！ */
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(249, 170, 184, 0.4);
    
    /* 初期状態 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

/* --- 3. 吹き出しのしっぽ --- */
.sidebar .widget a[href*="https://va-ne.com/lp/"]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
    margin-bottom: -10px;
    border: 8px solid transparent;
    border-top-color: #f9aab8;
    
    /* 初期状態 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

/* --- 4. マウスを乗せた時の動き（上にフワッと浮く） --- */
.sidebar .widget a[href*="https://va-ne.com/lp/"]:hover::after,
.sidebar .widget a[href*="https://va-ne.com/lp/"]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -10px); /* フワッと上に持ち上がる */
}
/* ==========================================
   ページネーション（ページ番号）のポップ化
========================================== */

/* --- 1. ボタン全体の基本デザイン --- */
.pagination .page-numbers {
    font-family: 'Mochiy Pop P One', sans-serif !important; /* ポップな丸文字 */
    border: 2px solid #f9aab8 !important; /* ロゴのピンクの太め枠線 */
    background-color: #ffffff !important; /* 背景は白 */
    color: #f9aab8 !important; /* 文字色もピンク */
    border-radius: 12px !important; /* カードと同じ角丸でコロンとさせる */
    box-shadow: 0 4px 10px rgba(249, 170, 184, 0.3) !important; /* ほんのりピンクの影 */
    transition: all 0.3s ease !important;
    margin: 0 4px !important; /* ボタン同士のすき間 */
    padding: 8px 14px !important; /* ボタンの余白調整 */
}

/* --- 2. 「今見ているページ（現在地）」のボタン --- */
.pagination .current {
    background-color: #f9aab8 !important; /* 背景をピンクで塗りつぶす */
    color: #ffffff !important; /* 文字は白に抜く */
    box-shadow: 0 6px 15px rgba(249, 170, 184, 0.5) !important; /* 影を濃く */
    transform: scale(1.1) !important; /* 現在のページだけ少し大きくして強調！ */
}

/* --- 3. マウスを乗せた時の動き（フワッと青く光る） --- */
.pagination a.page-numbers:hover {
    background-color: #ffffff !important;
    border-color: #87ceeb !important; /* 枠線をロゴのブルーに変化 */
    color: #87ceeb !important; /* 文字もブルーに変化 */
    transform: translateY(-5px) scale(1.05) !important; /* 浮き上がりながら少し拡大 */
    box-shadow: 0 8px 20px rgba(135, 206, 235, 0.5) !important; /* ブルーの影で発光させる */
}
/* --- メニューバー全体の設定 --- */
.navi-in a {
    font-family: 'Mochiy Pop P One', sans-serif !important;
    font-size: 15px !important;
    color: #555 !important; /* 文字色は少し柔らかい黒 */
    transition: all 0.3s ease !important;
    padding: 10px 20px !important;
    margin: 5px !important;
}

/* --- マウスを乗せた時の動き（ロゴとお揃い） --- */
.navi-in a:hover {
    background-color: #ffffff !important; /* 白背景 */
    color: #f9aab8 !important; /* 文字がピンクに */
    border-radius: 50px !important; /* 完全に丸いカプセル型 */
    box-shadow: 0 4px 12px rgba(249, 170, 184, 0.4) !important; /* ピンクの影 */
    transform: translateY(-2px) !important; /* 軽く浮かせる */
}
/* --- 見出し2 (H2)：太さを抑えて可読性をアップ --- */
.article h2 {
    font-family: 'Zen Maru Gothic', sans-serif !important; /* 洗練された丸ゴシックに変更 */
    font-weight: 700 !important;
    letter-spacing: 0.05em !important; /* 文字の間隔を少し広げて読みやすく */
    background: none !important;
    border-left: 6px solid #87ceeb !important; /* 線を少し細くして上品に */
    border-bottom: 2px solid #f9aab8 !important;
    padding: 12px 15px !important;
    color: #444 !important; /* 真っ黒より少しだけ柔らかい色に */
    line-height: 1.4 !important;
}

/* --- 見出し3 (H3)：ノート風の優しさを強調 --- */
.article h3 {
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-weight: 500 !important; /* H2より少し細くして強弱をつける */
    background: none !important;
    border: 1.5px dotted #f9aab8 !important; /* 点線も少し細く */
    border-radius: 10px !important;
    padding: 10px 15px !important;
    color: #444 !important;
    letter-spacing: 0.03em !important;
}

/* H3の左側のアイコン（色を少し淡くして落ち着かせる） */
.article h3::before {
    content: "●";
    color: rgba(135, 206, 235, 0.7); /* 少しだけ透明感を出して馴染ませる */
    margin-right: 8px;
}
/* ==========================================
   記事下のプロフィールとバナーのカスタマイズ
========================================== */

/* 1. プロフィール全体（土台を記事カードとお揃いに） */
.author-box {
    background-color: #ffffff !important;
    border: 2px solid #f9aab8 !important; /* ロゴのピンク */
    border-radius: 15px !important;
    box-shadow: 0 5px 15px rgba(249, 170, 184, 0.3) !important;
    padding: 20px !important;
    font-family: 'Mochiy Pop P One', sans-serif !important; /* ポップなフォント */
}

/* 2. プロフィールのアイコン（サイドバーとお揃いのぷるぷる動く演出） */
.author-box .author-thumb img {
    border: 2px solid #f9aab8 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.author-box .author-thumb img:hover {
    transform: scale(1.1) rotate(8deg) !important;
    box-shadow: 0 8px 15px rgba(249, 170, 184, 0.5) !important;
}

/* 3. プロフィール内の名前とリンク */
.author-box .author-name a {
    color: #f9aab8 !important;
    text-decoration: none !important;
}

/* 4. SNSアイコンのホバー演出 */
.author-box .sns-follow-buttons a {
    transition: all 0.3s ease !important;
}

.author-box .sns-follow-buttons a:hover {
    transform: translateY(-5px) scale(1.1) !important;
    opacity: 0.8 !important;
}

/* 5. 記事下のバナー画像（フワッと浮かせてブルーの影を出す） */
/* 記事下のエリアにあるリンク付き画像すべてに適用 */
.entry-footer a img, 
.after-article-ad a img {
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

.entry-footer a:hover img, 
.after-article-ad a:hover img {
    transform: translateY(-6px) !important;
    box-shadow: 0 10px 25px rgba(135, 206, 235, 0.5) !important; /* ロゴのブルーの影 */
}
/* --- 記事タイトル (H1) --- */
.entry-title {
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.4 !important;
    padding: 10px 0 !important;
    border-bottom: 3px solid #f9aab8 !important; /* 下にロゴのピンク線を引く */
    letter-spacing: 0.02em !important;
}
/* --- 過去記事カードのキラリ演出 --- */
.blogcard {
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
    overflow: hidden !important; /* 光がはみ出さないように */
    position: relative !important;
    border: 1px solid #eee !important;
}

/* マウスを乗せた時の動き */
.blogcard:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(135, 206, 235, 0.4) !important; /* ロゴのブルーの影 */
}

/* 光の筋を作る魔法のコード */
.blogcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: 1;
}

/* マウスを乗せた瞬間に光を走らせる */
.blogcard:hover::before {
    left: 150%;
    transition: all 0.6s ease;
}
/* --- 目次のカスタマイズ --- */
.toc {
    background-color: #fffaf0 !important; /* ほんのり淡いイエロー */
    border: 2px solid #f9aab8 !important; /* ピンクの枠線 */
    border-radius: 15px !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
    padding: 20px !important;
}

/* 「目次」というタイトル部分 */
.toc-title {
    background: none !important;
    color: #f9aab8 !important; /* ピンク文字 */
    font-weight: 700 !important;
    font-size: 18px !important;
    border-bottom: 2px dotted #f9aab8 !important; /* 点線を引く */
    margin-bottom: 15px !important;
    text-align: center !important;
}

/* 目次の中のリンク文字 */
.toc-content a {
    color: #555 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.toc-content a:hover {
    color: #87ceeb !important; /* マウスを乗せるとロゴのブルーに */
    padding-left: 5px !important; /* 少し右にずれる動き */
}