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

@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ===== Happy Mama Note デザイン更新 START (2026-08-30) ===== */

:root{
  --hmn-pink: #ffd9e4;
  --hmn-pink-text: #b1495c;
  --hmn-yellow: #fff0b8;
  --hmn-yellow-text: #9c7a1f;
}

/* ページ全体の背景グラデーション（上=ピンク → 下=イエロー） */
body{
  background: linear-gradient(180deg, #ffe3ec 0%, #ffedd9 55%, #fff6d2 100%);
}

/* コンテンツ全体を白い1枚パネルとして浮かせ、周囲にグラデーションを見せる */
#container{
  max-width: 1256px;
  margin: 32px auto;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(120, 90, 70, 0.10);
  overflow: hidden;
}
@media screen and (max-width: 1023px){
  #container{ margin: 16px auto; border-radius: 12px; }
}

/* サイトタイトルを手書き風フォントに */
.site-name-text{
  font-family: 'Sacramento', cursive;
}
.header .site-name-text{ font-size: 2.2em; }
.footer-bottom-logo .site-name-text{ font-size: 1.4em; }

/* カテゴリタグの配色をやわらかいローズに統一 */
.entry-category{
  background-color: var(--hmn-pink) !important;
  color: var(--hmn-pink-text) !important;
}

/* 見出しをやや太めのゴシックに */
.entry-card-title,
.article h1.entry-title,
.article h2,
.article h3{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
}

/* ヘッダーの鳥アイコン（.header-inがflex-directon:columnのため、
   兄弟要素ではなくサイト名テキストの疑似要素として挿入し、確実にタイトルの右隣に並べる） */
.header .site-name-text::after{
  content: "";
  display: inline-block;
  width: 24px;
  height: 19px;
  margin-left: 8px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyMiI+PHBhdGggZD0iTTIsMTcgQzYsMTIgMTIsMTAgMTYsMTIgQzE0LDggMTcsMyAyMywzIEMyMSw2IDIxLDkgMjMsMTEgQzE5LDExIDE2LDE0IDE2LDE3IEMxMywxNSA5LDE1IDYsMTcgQzUsMTggMywxOCAyLDE3IFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2IxNDk1YyIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxjaXJjbGUgY3g9IjIxIiBjeT0iNSIgcj0iMSIgZmlsbD0iIzljN2ExZiIvPjwvc3ZnPgo=");
}
/* フッターのロゴには鳥アイコンを付けない（封筒アイコンのみ） */
.footer-bottom-logo .site-name-text::after{ content: none; }

/* フッター全体を中央揃えで縦に並べる：ロゴ → 封筒アイコン → 著作権
   .footer-bottom-logo(float:left+position:absolute)と.footer-bottom-content
   (float:right)を解除し、flexboxの縦積みに変更する */
.footer-bottom.fdt-logo{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-bottom.fdt-logo .footer-bottom-logo{
  float: none;
  position: static;
  bottom: auto;
}
.footer-bottom.fdt-logo .footer-bottom-content{
  float: none;
  text-align: center;
  margin-top: 4px;
}

/* 著作権表示を控えめなトーンに（小さめ・薄いグレー） */
.footer-bottom .source-org.copyright{
  font-size: 0.72rem;
  color: #a9a9a9;
  letter-spacing: 0.04em;
}

/* フッターの封筒アイコン（JSでロゴ直後・著作権の前に挿入） */
.hmn-footer-envelope{
  display: block;
  width: 30px;
  height: 20px;
  margin: 10px 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCAyNiI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjM0IiBoZWlnaHQ9IjIwIiByeD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjE0OTVjIiBzdHJva2Utd2lkdGg9IjEuNCIvPjxwYXRoIGQ9Ik0zLDMgTDIwLDE1IEwzNywzIiBmaWxsPSJub25lIiBzdHJva2U9IiNiMTQ5NWMiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMjAsMTcuNiBDMTcuMywxNS4zIDE2LjMsMTMuNCAxNy43LDEyLjMgQzE5LDExLjMgMjAsMTIuNSAyMCwxMy40IEMyMCwxMi41IDIxLDExLjMgMjIuMywxMi4zIEMyMy43LDEzLjQgMjIuNywxNS4zIDIwLDE3LjYgWiIgZmlsbD0iIzljN2ExZiIvPjwvc3ZnPgo=");
}

/* スクロール演出：白い気泡のバースト */
.hmn-bubbles{
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hmn-bubble{
  position: absolute;
  bottom: -30px;
  border-radius: 50%;
  animation-name: hmn-bubble-burst;
  animation-timing-function: cubic-bezier(.15,.7,.3,1);
  animation-fill-mode: forwards;
}
@keyframes hmn-bubble-burst{
  0%   { transform: translateY(0) translateX(0) scale(.5); opacity:0; }
  10%  { opacity: var(--bubble-opacity, .85); transform: translateY(-18vh) translateX(0) scale(1); }
  100% { transform: translateY(-100vh) translateX(var(--drift, 18px)) scale(1); opacity:0; }
}

/* スクロール演出：下からふわっとフェードイン */
.hmn-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.hmn-reveal.hmn-in-view{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .hmn-bubble{ animation: none; display: none; }
  .hmn-reveal{ opacity: 1; transform: none; transition: none; }
}

/* ===== Happy Mama Note デザイン更新 END ===== */

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

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

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