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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ==================================================================
   Cocoon プレミアムデザイン・カスタムCSS
   テーマプリセット: パステルスイート
   全体の丸み: 24px | 本文: kiwi | 見出し: round
   ================================================================== */

/* 1. 本文フォント設定 */
body, .entry-content, p {
  font-family: 'Kiwi Maru', sans-serif !important;
}

/* 2. 見出しフォント設定 */
h1, h2, h3, h4, h5, h6, .logo-area, .site-name, .navi-in a, .widget-title {
  font-family: 'M PLUS Rounded 1c', sans-serif !important;
}

/* 3. ヘッダー・グローバルナビ */
.header-container {
  background-color: #ffffff !important;
  color: #9a7080 !important;
}
.navi {
  background-color: #f8c8d8 !important;
  border-radius: 24px !important;
}
.navi-in a {
  color: #7a5060 !important;
}
.navi-in a:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
}

/* 4. パンくずリスト */
.breadcrumbs {
  background-color: #fef0f5 !important;
  border: 1px solid #f4a7c4 !important;
  padding: 6px 12px !important;
  border-radius: 24px !important;
}

/* 5. H2大見出し */
.article h2 {
  background: #f4a7c4 !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 24px !important;
}

/* 6. H3中見出し */
.article h3 {
  border: none !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
.article h3::before {
  content: '' !important; display: inline-block !important; width: 8px !important; height: 8px !important; background: #9cd8c8 !important; border-radius: 50% !important;
}

/* 7. H4小見出し */
.article h4 {
  display: flex !important; align-items: center !important; gap: 6px !important; border: none !important;
}
.article h4::before {
  content: "" !important; display: inline-block !important; width: 6px !important; height: 6px !important; background: #9cd8c8 !important;
}

/* 7.5. H5詳細見出し */
.article h5 {
  display: flex !important; align-items: center !important; gap: 4px !important; border: none !important;
}
.article h5::before {
  content: "" !important; display: inline-block !important; width: 4px !important; height: 4px !important; background: #9cd8c8 !important; border-radius: 50% !important;
}

/* 7.8. 記事エリア背景デザイン */
/* 8. 目次デザイン */
.toc {
  background: linear-gradient(135deg, #ffffff 0%, #fef0f5 100%) !important;
  border: 1px solid #f4a7c4 !important;
  border-radius: 24px !important;
}

/* 9. サイドバー見出し（ウィジェット） */
.sidebar h3 {
  background-color: #f4a7c4 !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
  border-radius: 24px !important;
  border: none !important;
}

/* 10. サイドバーウィジェットの枠・背景 */
.widget {
  border: 1px solid rgba(0,0,0,0.02) !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  padding: 15px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.03) !important;
}

/* 11. ブログカード */
.blog-card {
  border: none !important; background-color: #fef0f5 !important; border-radius: 24px !important;
}

/* 12. 箇条書きリスト */
.entry-content ul li::before {
  content: "♥" !important; color: #9cd8c8 !important; }

/* 13. 囲み枠ボックス */
.box-style {
  border: 2px solid #f4a7c4 !important; background: #fef0f5 !important; border-radius: 24px !important;
}
.box-style .box-title::before {
  content: "" !important; display: inline-block !important; width: 5px !important; height: 10px !important; background-color: #9cd8c8 !important; margin-right: 6px !important; border-radius: 1px !important; vertical-align: middle !important;
}

/* 14. 蛍光ペン */
.marker {
  background: linear-gradient(transparent 60%, rgba(244, 167, 196, 0.30) 60%) !important; font-weight: bold !important;
}

/* 15. CTAアフィリエイトボタン */
.btn {
  background: #9cd8c8 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 24px !important;
  display: inline-block !important;
  transition: all 0.25s ease-in-out !important;
}
.btn {
  animation: pulse 2.5s infinite ease-in-out;
}

/* 16. SNSシェアボタン */
.sns-share a {
  border-radius: 24px !important;
}

/* 18. カテゴリーバッジ（アイキャッチ等のアクセント） */
.entry-category, .card-category {
  background-color: #9cd8c8 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 17. 記事一覧（エントリーカード）ホバー */
.entry-card {
  border-radius: 24px !important;
  transition: all 0.3s ease !important;
}
.entry-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
  border-color: #f4a7c4 !important;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}