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

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

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

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

@media (width <= 480px) {
  .common-icon-box::before {
    border-width: 1px;
    border-right-style: solid;
    font-size: 34px;
    left: 10px;
    margin-left: 0;
    padding-right: 0.15em;
    top: 50%;
    width: 44px;
  }
  .common-icon-box {
    padding: 20px 20px 20px 72px;
  }
}

.blank-box {
  white-space: pre-line;
}

/* カスタムテキスト */
.cocoon-custom-text-1{
  font-size: 0.875rem;
  color: #A1A3A6;
}

/* 共通設定 */
.entry-title::before {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -0.15em;
}

/* 🍓 ラズベリー（PNG） */
.has-raspberry .entry-title::before {
  content: "";
  width: 1em;
  height: 1em;
  background-image: url("https://gardening-beginner.ryo-yasukawa.com/wp-content/uploads/2026/05/rasberry-icon-e1777726666532.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* 🍋 レモン（絵文字） */
.has-lemon .entry-title::before {
  content: "🍋";
  font-size: 1em;
}

/* 🍓 いちご（絵文字） */
.has-strawberry .entry-title::before {
  content: "🍓";
  font-size: 1em;
}

/* 🫐 ブルーベリー（絵文字） */
.has-blueberry .entry-title::before {
  content: "🫐";
  font-size: 1em;
}

/* 問い合わせの前に半角スペース追加*/
.far.fa-paper-plane {
  margin-right: 0.3em;
}

/* 記事カラムをホバーさせる*/
body {
  background: #f5f6f7;
}

.main {
  background: #fff;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .main:hover {
    transform: translateY(-2px); /* ←かなり控えめ */
    box-shadow: 0 8px 18px rgba(0,0,0,0.08); /* ←ほんのり強化 */
  }
}

/* =========================
カテゴリアイコン共通設定
========================= */
/* ========================================
カテゴリラベル 完全版（角丸＋発光＋アイコン）
======================================== */

/* ラベル本体 */
.cat-label{
  background:#fff;
  color:#333;

  padding:6px 12px;

  border-radius:999px;

  border:1px solid rgba(0,0,0,.08);

  font-size:12px;
  line-height:1;

  font-weight:700;

  box-shadow:
    0 0 4px rgba(184,134,11,.30);

  animation:labelGlow 3s ease-in-out infinite;
}

/* 記事カード位置調整 */
.entry-card-thumb .cat-label{
  top:-6px;
  left:3%;
}

/* アイコン共通 */
.cat-label::after{
  display:inline-block;

  margin-left:6px;

  font-size:18px;

  vertical-align:middle;

  width:20px;
  height:20px;

  text-align:center;
  line-height:20px;

  transform-origin:center bottom;

  animation:fruitSwing 2.2s ease-in-out infinite;
}

/* =========================
すだち（ID:44）
========================= */

.cat-label-44::after{
  content:"";
  background-image:url("https://gardening-beginner.ryo-yasukawa.com/wp-content/uploads/2026/05/sudachi.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* =========================
ラズベリー（ID:8）
========================= */

.cat-label-8::after{
  content:"";
  background-image:url("https://gardening-beginner.ryo-yasukawa.com/wp-content/uploads/2026/05/rasberry-icon-e1777932342745.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

/* =========================
いちご（ID:7）
========================= */

.cat-label-7::after{
  content:"🍓";
}

/* =========================
レモン（ID:6）
========================= */

.cat-label-6::after{
  content:"🍋";
}

/* =========================
ブルーベリー（ID:5）
========================= */

.cat-label-5::after{
  content:"🫐";
}

/* =========================
果実ゆらゆら
========================= */

@keyframes fruitSwing{

  0%{
    transform:
    translateY(-2px)
    rotate(-8deg)
    scale(1);
  }

  25%{
    transform:
    translateY(-6px)
    rotate(6deg)
    scale(1.08);
  }

  50%{
    transform:
    translateY(-3px)
    rotate(10deg)
    scale(0.95);
  }

  75%{
    transform:
    translateY(-7px)
    rotate(-6deg)
    scale(1.05);
  }

  100%{
    transform:
    translateY(-2px)
    rotate(-8deg)
    scale(1);
  }

}

/* =========================
金色発光
========================= */

@keyframes labelGlow{

  0%,100%{
    box-shadow:
      0 0 4px rgba(184,134,11,.30);
  }

  50%{
    box-shadow:
      0 0 10px rgba(184,134,11,.95),
      0 0 20px rgba(255,215,0,.55);
  }

}

/* =========================
 * 「ヘッダー（ロゴ周り）の余白削除」
========================= */
.logo-header,
.site-name {
  padding: 0;
  margin: 0;
}


/* =========================
記事冒頭に「一言メッセージカード」
========================= */
/* =========================
見出しを少し高級感あるデザインに
========================= */
.article h2{
border:none;
padding:14px 20px;
border-radius:12px;
background:linear-gradient(
90deg,
#4caf50,
#8bc34a
);
color:white;
}
/* =========================
アイキャッチを少し浮かせる
========================= */
.eye-catch img{
border-radius:20px;
box-shadow:
0 10px 30px rgba(0,0,0,.15);
}
/* =========================
記事カードをホバーで少し浮かせる
========================= */
.a-wrap{
transition:.3s;
}

.a-wrap:hover{
transform:translateY(-5px);
}
/* =========================

========================= */
#scroll-progress{
position:fixed;
top:0;
left:0;
width:0;
height:4px;
z-index:999999;

background:
linear-gradient(
90deg,
#4caf50,
#8bc34a
);

box-shadow:
0 0 8px rgba(
76,175,80,.6
);
}
/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */
/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */

/* =========================

========================= */