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

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

/*固定ページの全ての日付を非表示にする*/
.page .date-tags {
display: none;
}/* ======================================================
   Adjustくん 吹き出しレイアウト（ショートコード挿入対応版）
   ------------------------------------------------------
   ・吹き出し内に「段落」「ショートコード」「段落」を挟んでも崩れない
   ・スマホは画像を上に、PCは右上固定
   ・Cocoon等のテーマでも干渉しにくいセレクタで最小限定
====================================================== */

/* ラッパー */
.mascot-area {
  position: relative;
  margin: 0 0 1rem 0;
  overflow: visible; /* 吹き出し三角などが切れないように */
}

/* 画像（右上に固定） */
.mascot-img {
  position: absolute;
  top: 0;
  right: 16px;
  width: clamp(84px, 12vw, 120px);
  height: auto;
  z-index: 10;
  animation: sway 2.5s ease-in-out infinite;
  pointer-events: none;
}

/* 吹き出し本体 */
.mascot-bubble {
  /* 右側に画像のぶんだけ余白を確保 */
  padding: 1rem 1rem 1rem clamp(1rem, 2vw, 1.25rem);
  padding-right: calc(clamp(84px, 12vw, 120px) + 24px);
  background: #fff8cc;
  border: 2px solid #ffd633;
  border-radius: 28px;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  position: relative;
  z-index: 5;
}
/* 吹き出し内の段落やリストの余白最適化 */
.mascot-bubble p {
  margin: 0 0 0.8em;
}
.mascot-bubble u {
  text-underline-offset: 3px;
}
/* Gutenberg のショートコードブロックを
   吹き出し内に置いたときの見た目を整える */
.mascot-bubble .wp-block-shortcode {
  margin: 0.6em 0;
}
.mascot-bubble .wp-block-shortcode > * {
  width: 100%;
}
/* よくある「開閉系ショートコード」の中身に対して
   余白を軽く整える（必要なら調整） */
.mascot-bubble [class*="toggle"],
.mascot-bubble [class*="accordion"],
.mascot-bubble [class*="show"],
.mascot-bubble details {
  margin: 0.5em 0;
}
.mascot-bubble summary,
.mascot-bubble .toggle-title,
.mascot-bubble .accordion-title {
  cursor: pointer;
}
/* ゆらゆらアニメーション */
@keyframes sway {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* --- スマホ（画像を上に回り込み） --- */
@media (max-width: 640px) {
  .mascot-img {
    position: static;       /* 絶対配置を解除して自然に流す */
    display: block;
    margin: 0 auto 8px auto;/* 吹き出しの上に中央配置 */
    width: 96px;
  }
  .mascot-bubble {
    padding: 0.9rem 1rem;   /* 右側の余白を通常に戻す */
  }
}

/* --- ダークモード軽い対応（任意） --- */
@media (prefers-color-scheme: dark) {
  .mascot-bubble {
    background: #2d2a1d;
    border-color: #e6c300;
    color: #f5f5f5;
  }
  .mascot-bubble::after { border-color: transparent transparent #2d2a1d transparent; }
}
/************************************
** アジャストくん（中央・見下ろし版）
************************************/
.mascot-center-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 2em;
  margin-bottom: 2em;
  position: relative;
}
.mascot-center-area .mascot-img {
  position: static;
  top: auto;
  right: auto;
  width: 120px;
  height: auto;
  z-index: 10;
  animation: sway 2.5s ease-in-out infinite;
  pointer-events: none;
  flex-shrink: 0;
}
/* 上下ゆらゆらアニメーション */
@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.mascot-img-lookdown {
  width: 120px;
  height: auto;
  animation: floatUpDown 3s ease-in-out infinite;
  z-index: 10;
  position: relative;
}
/* 吹き出し（下に出す） */
.mascot-bubble-center {
  display: inline-block;
  background: #fff8cc;
  border: 2px solid #ffd633;
  border-radius: 20px;
  padding: 1em 1.5em;
  font-size: 1em;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  position: relative;
  margin-top: 0;
}

/************************************
** H1～H4の基本スタイル設定
************************************/
/* ===== H1のカスタムスタイル ===== */
h1 {
  text-align: left;
  border: 5px solid #fff7cc;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(255,247,204,0) 0%, rgb(255,247,204) 98%);
  color: #d60000;
  padding: 0.5em;
  line-height: 1.2;
}
/* ===== H2のカスタムスタイル ===== */
h2 {
  border: none !important; /* ← これで完全に消す */
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(202,247,129,0) 0%, rgb(202,247,129) 100%);
  color: #007b43;　
  padding-top: 0em;
  padding-bottom: 0em;
  line-height: 0.8;     /* 元が 1.2 → 1.1 でコンパクトに */
  margin-top: 0em;    /* テーマが自動で入れている margin を調整 */
  margin-bottom: 0em !important;
}
/* ===== H3のカスタムスタイル ===== */
h3{
  border: none !important; /* ← これで完全に消す */
  color: #007b43;
  text-decoration: underline;
  line-height: 1.4;
}
/* ===== H4のカスタムスタイル ===== */
h4 {
  border: none !important; /* ← これで完全に消す */
  color: #007b43;
  line-height: 1.5;
}
/* H1〜H4の見出し下余白を小さく */
h1, h2,
h1.wp-block-heading,
h2.wp-block-heading {
  margin-bottom: 0.5em !important; /* ← 調整したい最小値に */
}
h3, h4,
h3.wp-block-heading,
h4.wp-block-heading {
  margin-bottom: 0em !important; /* ← 調整したい最小値に */
}

/*************************************
豆知識の固定ページ用のデザイン設定
*************************************/
/* カテゴリー一覧ページのデザイン調整 */
.category-list-container {
    width: 90%;
    margin: auto;
}
/* H3デザイン（背景の上下幅を調整） */
.category-title {
    font-size: 20px; /* 文字のサイズを20pxに設定 */
    margin-top: 10px; /* 上の余白を10pxに設定 */
    margin-bottom: 10px; /* 下の余白を10pxに設定 */
    text-align: center; /* 文字を中央揃えにする */
    font-weight: bold; /* 文字を太字にする */
    background: linear-gradient(135deg, rgba(0,209,132,0) 0%,rgb(0,209,132) 100%); 
    /* 背景色をグラデーションで設定（薄い青のグラデーション、135°） */
    padding: 0px 0px; 
    /* 内側の余白を設定（上下0px、左右0px） */
    border-radius: 8px; 
    /* 角を8px丸くして柔らかい印象にする */
    display: inline-block; 
    /* H3の幅をテキストの長さに合わせる（ブロック要素のデフォルト幅を抑える） */
    color: #333; 
    /* 文字色を暗めのグレーに設定（可読性を高めるため） */
    line-height: 0.8; 
    /* 行の高さを0.8倍に設定（見た目のバランスを整える） */
}
/* カテゴリー記事のグリッドレイアウト（横3列にする） */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列レイアウト */
    gap: 20px; /* 各アイテムの間隔を20px */
    margin-bottom: 40px;
}
/* 各記事のカードデザイン（中央揃え + レイアウト調整） */
.category-item {
    background: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding: 10px; /* 内側に余白を追加 */
}
/* 記事のサムネイル（アイキャッチ画像のサイズ調整） */
.thumbnail img {
    width: 150px; /* 画像の幅を150pxに固定 */
    height: auto; /* 縦幅を自動調整してアスペクト比を維持 */
    max-width: 100%; /* 画像が親要素をはみ出さないようにする */
    display: block; /* 余計なスペースを削除 */
    margin: 0 auto; /* 画像を中央揃え */
    border-bottom: 2px solid #ddd;
}
/* 記事タイトル */
.title {
    padding: 10px 0;
    font-size: 16px; /* タイトルのフォントサイズを少し小さく */
    font-weight: bold;
    text-align: center;
}
/* 記事がない場合のメッセージ */
.no-posts {
    text-align: center;
    font-size: 16px;
    color: #888;
    margin: 20px 0;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
    .category-grid {
        grid-template-columns: repeat(2, 1fr); /* 画面幅が1024px以下なら2列 */
    }
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
    .category-grid {
        grid-template-columns: repeat(1, 1fr); /* 画面幅が600px以下なら1列 */
    }
}