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

/************************************
** Google Fontsの読み込み（絵本風フォント）
************************************/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&family=Zen+Kurenaido&display=swap');


/************************************
** 1. 全体の背景を「方眼紙ノート風」に
************************************/
body {
    background-color: #fdfbf7;
    background-image: 
        linear-gradient(90deg, transparent 95%, rgba(139, 115, 85, 0.05) 5%),
        linear-gradient(rgba(139, 115, 85, 0.05) 5%, transparent 5%);
    background-size: 20px 20px;
    color: #5c4330;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* リンク元の色も優しく */
a { color: #d18352; font-weight: bold; transition: all 0.3s ease; }
a:hover { color: #b5783a; text-decoration: none; }


/************************************
** 2. ヘッダー（ロゴ領域）を「看板風」に
************************************/
.header-container {
    background: #ffffff;
    /* 下部に波線を引いて切り取られたノート風に */
    background-image: radial-gradient(#ffffff 60%, transparent 60%);
    background-size: 20px 20px;
    background-position: -10px calc(100% + 10px);
    background-repeat: repeat-x;
    
    border-bottom: 2px solid #e8dacc;
    box-shadow: 0 8px 20px rgba(92, 67, 48, 0.08);
    margin-bottom: 30px;
    padding-bottom: 15px;
}

/* サイト名（ロゴテキスト）を押し出し立体文字に */
.site-name-text {
    color: #8c6a4f;
    letter-spacing: 3px;
    font-weight: 700;
    text-shadow: 2px 2px 0px #ffeacf, 4px 4px 0px #e8dacc;
}

.tagline {
    color: #a68c76;
    font-size: 0.9em;
    background: #fdfaf6;
    display: inline-block;
    padding: 2px 15px;
    border-radius: 20px;
    border: 1px dashed #dcb494;
}


/************************************
** 3. 記事メインエリアを「スクラップブック風」に
************************************/
.main {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px;
    /* 周りに縫い目（ステッチ）をつける */
    box-shadow: 0 0 0 8px #ffffff, 0 0 0 10px #e8dacc, 0 10px 25px rgba(0,0,0,0.05);
    border: 2px dashed #dcb494;
    margin: 10px;
}

/* 記事の一覧画像のホバーアクション */
.entry-card-thumb, .related-entry-card-thumb {
    overflow: hidden;
    border-radius: 12px;
}
.entry-card-thumb img {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.entry-card-wrap:hover .entry-card-thumb img {
    transform: scale(1.05) rotate(2deg); /* ホバーで少し傾きながら拡大 */
}


/************************************
** 4. 記事の画像を「マスキングテープで貼ったポラロイド写真」風に
************************************/
.article img, .entry-content img {
    background: #fff;
    padding: 10px 10px 30px 10px; /* 下を広くしてポラロイド風に */
    box-shadow: 2px 4px 15px rgba(0,0,0,0.1);
    border-radius: 2px;
    position: relative;
    transform: rotate(-1deg);
    transition: transform 0.3s;
    margin: 20px 0;
}
.article img:hover, .entry-content img:hover {
    transform: rotate(0deg) scale(1.02);
    z-index: 10;
}


/************************************
** 5. 見出し（H2, H3）をリボンやしおり風に
************************************/
/* H1タイトル */
.entry-title {
    color: #715541;
    font-weight: 700;
    font-size: 1.8em;
    text-align: center;
    position: relative;
    padding: 20px 0;
    margin-bottom: 40px;
}
.entry-title::before, .entry-title::after {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    height: 3px;
    background: repeating-linear-gradient(45deg, #dcb494, #dcb494 5px, transparent 5px, transparent 10px);
}
.entry-title::before { top: 0; }
.entry-title::after { bottom: 0; }

/* H2見出し：左にリボン風のタグ */
.article h2 {
    position: relative;
    background: #fdf6ec;
    color: #715541;
    padding: 15px 20px 15px 40px;
    border-radius: 0 10px 10px 0;
    margin-top: 3em;
    box-shadow: 2px 4px 8px rgba(0,0,0,0.05);
}
/* リボンを留めるピンの穴 */
.article h2::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);
}


/************************************
** 6. サイドバーを「ノート風の可愛いカード」に
************************************/
#sidebar {
    margin-top: 20px;
}
/* 白浮きカードから「茶色の破線で囲んだノート風」に変更 */
#sidebar .widget {
    background: #ffffff;
    border: 2px dashed #d5c8ba; /* 優しいモカ色の破線（ノート風ステッチ） */
    border-radius: 12px;
    padding: 30px 25px;
    margin-bottom: 40px;
    box-shadow: 2px 2px 8px rgba(139, 115, 85, 0.05);
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ノートの左上にマスキングテープ風の装飾 */
#sidebar .widget::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 20px;
    width: 45px;
    height: 16px;
    background-color: rgba(220, 150, 130, 0.4); /* 半透明の可愛いテープ風 */
    transform: rotate(-5deg); /* 少し傾ける */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

/* ホバーで「フワッ」と浮き上がる */
#sidebar .widget:hover {
    transform: translateY(-5px);
    box-shadow: 4px 10px 20px rgba(139, 115, 85, 0.08); /* 浮かんで影が濃くなる */
}

/* サイドバー見出しは「木の看板」風 */
#sidebar .widget-title {
    background: #d8baa1; /* 木の色 */
    color: #ffffff;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    margin: -45px auto 25px auto; /* ウィジェットの上に飛び出すように配置 */
    width: 80%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
}
/* 看板を吊るす紐に見立てた装飾 */
#sidebar .widget-title::before, #sidebar .widget-title::after {
    content: '';
    position: absolute;
    top: -15px;
    width: 4px;
    height: 15px;
    background: #c2a188;
}
#sidebar .widget-title::before { left: 20%; }
#sidebar .widget-title::after { right: 20%; }

/* 検索ボックスとぷにぷにボタン */
#sidebar .search-box input[type="text"] {
    border: 2px solid #f0e0c9;
    border-radius: 30px;
    padding: 12px 15px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
#sidebar .search-submit {
    border-radius: 30px;
    background: linear-gradient(to bottom, #ebab7c, #d18352);
    box-shadow: 0 4px 0 #b36b3f, 0 6px 10px rgba(0,0,0,0.1); /* 立体ボタン */
    color: #fff;
    border: none;
    font-weight: bold;
    position: relative;
    top: 0;
    transition: all 0.1s;
}
/* クリックで沈み込む */
#sidebar .search-submit:active {
    box-shadow: 0 0 0 #b36b3f, 0 2px 4px rgba(0,0,0,0.1);
    top: 4px; 
}


/************************************
** 7. Cocoon 吹き出し 手書き絵本風カスタマイズ
************************************/
.speech-wrap { color: #4a3b32; margin: 30px 0; }
.speech-wrap .speech-balloon {
  border: 4px solid #7a6a5f !important; /* 枠線を太くしてポップに */
  border-radius: 20px 30px 25px 30px / 30px 20px 30px 25px !important;
  background-color: #faf8f4 !important;
  box-shadow: 4px 6px 0px rgba(122, 106, 95, 0.15) !important; /* ポップな影 */
  padding: 1.2em 1.5em !important;
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 1.15em;
  font-weight: bold;
}
.speech-wrap .speech-icon img, .speech-wrap .speech-person .speech-icon-image {
  border-radius: 30px 20px 25px 35px !important;
  border: 4px solid #7a6a5f !important;
  padding: 2px !important;
  background-color: #fff !important;
  box-shadow: 2px 4px 0px rgba(122, 106, 95, 0.15) !important;
}
.speech-wrap .speech-person .speech-name {
  color: #5a4a3f; font-size: 0.9em; font-family: 'Zen Kurenaido', sans-serif; font-weight: bold;
  background: white; border: 2px solid #7a6a5f; border-radius: 10px; margin-top: 5px; padding: 2px 5px;
}

/* 尻尾の微調整（ズレをなくす・上に重ならないように） */
.speech-balloon-right-1::before,
.speech-balloon-left-1::before {
  margin-top: -12px;
  border-width: 12px;
}
.speech-balloon-left-1::before { left: -22px; }
.speech-balloon-right-1::before { right: -22px; }

.speech-balloon-right-1::after,
.speech-balloon-left-1::after {
  margin-top: -10px;
  border-width: 10px;
}
.speech-balloon-left-1::after { left: -16px; }
.speech-balloon-right-1::after { right: -16px; }

/* --- ノワル（兄） --- */
.sb-nowal .speech-balloon { background-color: #f5f0eb !important; border-color: #5a4538 !important; }
.sb-nowal.sb-left .speech-balloon::before { border-right-color: #5a4538 !important; }
.sb-nowal.sb-left .speech-balloon::after { border-right-color: #f5f0eb !important; }
.sb-nowal.sb-right .speech-balloon::before { border-left-color: #5a4538 !important; }
.sb-nowal.sb-right .speech-balloon::after { border-left-color: #f5f0eb !important; }
.sb-nowal .speech-icon img, .sb-nowal .speech-person .speech-icon-image { border-color: #5a4538 !important; }
.sb-nowal .speech-person .speech-name { border-color: #5a4538; color:#5a4538; }

/* --- クリム（弟） --- */
.sb-cream .speech-balloon { background-color: #fdf6ec !important; border-color: #cd8a4b !important; }
.sb-cream.sb-left .speech-balloon::before { border-right-color: #cd8a4b !important; }
.sb-cream.sb-left .speech-balloon::after { border-right-color: #fdf6ec !important; }
.sb-cream.sb-right .speech-balloon::before { border-left-color: #cd8a4b !important; }
.sb-cream.sb-right .speech-balloon::after { border-left-color: #fdf6ec !important; }
.sb-cream .speech-icon img, .sb-cream .speech-person .speech-icon-image { border-color: #cd8a4b !important; }
.sb-cream .speech-person .speech-name { border-color: #cd8a4b; color:#cd8a4b; }


/************************************
** レスポンシブ
************************************/
@media screen and (max-width: 480px){
  .main { padding: 20px; border-width: 1px; }
  .entry-title { font-size: 1.4em; }
  .speech-wrap .speech-balloon { font-size: 1.05em; padding: 1em; }
}