@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){
  /*必要ならばここにコードを書く*/
}

/************************************
****　モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons {
    /* モバイルメニュー全体の高さと影を設定 */
    height: 50px; /* メニューの高さ */
    box-shadow: none; /* ボックスシャドウを無効化 */
}

.mobile-menu-buttons > li {
    /* メニュー項目の上部余白を削除 */
    padding-top: 0;
}

.menu-button {
    /* メニューボタンを中央揃えに配置 */
    margin: auto;
}

.mobile-menu-buttons .menu-button:hover {
    /* メニューボタンのホバー状態の背景色を設定 */
    background-color: white;
}

span.fas.fa-search::before {
    /* 検索アイコンのスタイル設定 */
    color: #90C31F; /* 検索マーク色変更はこちら */
    margin-left: 1em; /* 左側の余白 */
}

span.fas.fa-bars::before {
    /* ハンバーガーメニューアイコンのスタイル設定 */
    color: #90C31F; /* ハンバーガーメニュー色変更はこちら */
    margin-right: 1em; /* 右側の余白 */
}

.navi-menu-caption.menu-caption,
.home-menu-caption.menu-caption,
.search-menu-caption.menu-caption,
.top-menu-caption.menu-caption,
.sidebar-menu-caption.menu-caption {
    /* メニューのキャプションを非表示に設定 */
    display: none;
}

/************************************
****　お問い合わせフォーム contact form7
************************************/
.haveto {
    /* 必須マークのスタイル設定 */
    font-size: 9px; /* フォントサイズ */
    padding: 2px 5px; /* 内側の余白 */
    background: #90C31F; /* 必須 色の変更はこちら */
    color: #fff; /* 文字色（白） */
    border-radius: 20px; /* 角丸設定 */
    margin-right: 5px; /* 右側の余白 */
    position: relative; /* 相対位置指定 */
    bottom: 2px; /* 下方向のオフセット */
}

#formbtn {
    /* 送信ボタンの基本スタイル */
    display: block; /* ブロック要素として表示 */
    padding: 10px; /* 内側の余白 */
    width: 300px; /* ボタンの幅 */
    background: #f7f7f7; /* 背景色（グレー） */
    color: #545454; /* 文字色（ダークグレー） */
    font-size: 17px; /* フォントサイズ */
    border: none; /* 枠線を非表示 */
    border-radius: 50px; /* 角丸設定 */
    margin: 25px auto 0; /* 上下余白（中央揃え） */
    transition: 0.3s; /* ホバー効果の時間 */
}

#formbtn:hover {
    /* 送信ボタンのホバー状態 */
    background: #90C31F; /* 送信 色の変更はこちら */
    color: #fff; /* 文字色（白） */
    border-radius: 50px; /* 角丸設定 */
    box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2); /* シャドウ効果 */
}

.wpcf7 p {
    /* フォーム内の段落要素の余白設定 */
    margin-bottom: 0em; /* 段落の下余白をゼロに設定 */
}

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before {
    /* 「Font Awesome 5 Free」を使用して矢印を表示 */
    font-family: "Font Awesome 5 Free";
    content: "\f060"; /* 矢印アイコンのUnicode */
    color: #90C31F; /* 矢印色変更はこちら */
}

ul.menu-drawer:before {
    /* メニューラベルのフォントサイズと背景設定 */
    font-size: 1em; /* ラベルの文字サイズ */
    background: white; /* ラベル背景色 */
    color: #333; /* ラベル文字色 */
    margin-bottom: 1em; /* ラベルの下余白 */
    border-bottom: 3px dotted #90C31F; /* 点線の色変更はこちら */
    content: "メニュー"; /* 表示テキスト */
}

ul.menu-drawer:after {
    /* メニューリストの背景色 */
    background: white;
}

.menu-drawer li {
    /* メニューアイテムの余白設定 */
    padding: 0;
    font-weight: bold; /* 太字設定 */
}

.menu-drawer a {
    /* リンクのスタイル設定 */
    font-size: 1.3em; /* リンク文字サイズ */
    background-color: #ffffff; /* リンク背景色 */
    color: #545454; /* リンク文字色 */
    margin: .5em 0; /* 上下の余白 */
}

.menu-drawer a:hover {
    /* リンクのホバー状態の背景色変更 */
    background-color: #f7f7f7;
}

.menu-drawer .sub-menu {
    /* サブメニューの余白設定 */
    padding: 0;
}

.menu-drawer .sub-menu li {
    /* サブメニュー項目の文字サイズ設定 */
    font-size: .9em; /* サブメニューの文字サイズ */
}

.menu-drawer .sub-menu li a::before {
    /* サブメニュー項目のアイコンを表示 */
    font-family: "Font Awesome 5 Free";
    content: "\f105"; /* サブメニュー矢印アイコンのUnicode */
    color: #7b7b7b; /* アイコン色変更はこちら */
    margin: 0 .5em 0 1em; /* アイコンの余白 */
}

/************************************
***** カテゴリーラベルのスタイル 
************************************/

.eye-catch .cat-label, .cat-label {
    font-size: .8em; /* フォントサイズ */
    border-radius: 10px; /* 角丸設定 */
    margin: 0.5em; /* 外側余白 */
    padding: 0 0.5em 0; /* 内側余白 */
}

/************************************
**ブログカードラベル色変更
************************************/

.blogcard-type .blogcard-label {
    background-color: #90C31F; /* お好みの色コードを設定 */
    color: white; /* 文字色の変更 */
    padding: 5px 10px;
    border-radius: 5px;
}

/************************************
**フッターボタン色変更
************************************/
.custom-menu-icon.menu-icon  {
    color: #90C31F; /* 好きな色コードに変更してください */
}


/************************************
**お知らせ
************************************/
/* 「お知らせ」タイトル下に緑のドット線を入れる */
.widget-index-top-title.main-widget-label.widget-title {
  /* 文字色 */
  color: #7b7b7b;
  /* フォントサイズ */
  font-size: 1.25rem;
  
  /* 下線をドットに */
  border-bottom: 3px dotted #90C31F;
  /* 下線と本文（リスト）のあいだに余白を確保 */
  padding-bottom: 8px;
  margin-bottom: 16px;
}





/************************************
****　アイキャッチ画像中央寄せ
************************************/
.eye-catch-wrap {
	display: block;
    margin-left: auto;
    margin-right: auto;
    
}

.eye-catch-wrap img {
    display: block;
    margin: 0 auto; /* 左右の余白を自動調整 */
}


/************************************
****　次のページボタン中央寄せ
************************************/
.pagination-next-link,
.list-more-button,
.comment-btn {
  float: none !important;       /* 右寄せなどの浮動配置を解除 */
  display: block !important;     /* ブロック要素にしてからマージンを適用 */
  margin: 0 auto !important;     /* 左右のマージン自動で中央揃え */
  width: 90%;                   /* 横幅を90％に設定 */
}


/************************************
 読む時間消す　date-tags を完全に隠す 
************************************/
/* date-tags と read-time を完全に隠す */
.date-tags,
.read-time {
  display: none !important;
}


/************************************
 **** お知らせボタン（.more-news）
 ************************************/
.more-news {
  clear: both;               /* 浮動要素のリセット */
  text-align: center;        /* ボタン中央寄せ */
  margin: 20px 0;            /* 上下スペース */
}
.more-news a {
  display: inline-block;
  transition: transform .2s, box-shadow .2s;
  background: none;          /* 透過リセット */
}
.more-news a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.more-news img {
  display: block;
  max-width: 100%;           /* レスポンシブ対応 */
  width: 100%;               /* HTML の width% を優先 */
  height: auto;
  margin: 0 auto;            /* 中央寄せ保険 */
}

/************************************
**** 商品ケーキ＆フルーツ情報（.wg-cake-fruits）
**** 完全置換CSS（3列指定を外したフレックス）
************************************/

/*────────────────────────────────
  親コンテナ：フレックスで自動折り返し
────────────────────────────────*/
.wg-cake-fruits {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  /* 必要に応じ center や space-between に */
  gap: 1rem;                     /* カード間の余白 */
  margin-bottom: 2rem;
  text-align: center;
  box-sizing: border-box;
}

/*────────────────────────────────
  各カード（リンクラッパー）
────────────────────────────────*/
.wg-cake-fruits .entry-link {
  display: block;
  flex: 1 1 auto;               /* 幅は入るだけ、折り返し可 */
  min-width: 0;                 /* 長いテキストのはみ出し防止 */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  text-decoration: none;
  color: #7b7b7b;
  transition: all .1s;
}
.wg-cake-fruits .entry-link:hover {
  transform: translateY(-1px);
  background-color: #f7f7f7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: transparent;
}

/*────────────────────────────────
  タイトル下の緑アンダーライン
────────────────────────────────*/
.wg-cake-fruits .title {
  display: inline-block;
  position: relative;
  margin: .5em 0;
  padding-bottom: .2em;
}
.wg-cake-fruits .title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background-color: #90C31F;
}

/*────────────────────────────────
  サムネイル画像
────────────────────────────────*/
.wg-cake-fruits .img {
  margin-top: .5em;
}
.wg-cake-fruits .img img {
  display: block;
  width: 100%;    /* 親幅にフィット */
  height: auto;
  margin: 0 auto;
}

/* ニュースリスト：ホバーで浮き出し */
.custom-news-list .news-item {
  /* ホバーを滑らかにするためのトランジション */
  transition: box-shadow .3s ease, transform .2s ease;
}


/************************************
**** お知らせフロントページ5件
************************************/
/* ─────────────────────────────
   お知らせリスト（news-list）全置き換え
   ホバー時：背景緑・文字白・下線付き、角丸
───────────────────────────── */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-list li {
  background: #fff;                             /* 白背景 */
  border-radius: 6px;                           /* 角丸 */
  overflow: hidden;                             /* 角丸を有効に */
  margin-bottom: 0.6em;                         /* アイテム間のスペース */
  transition: box-shadow .3s ease, transform .2s ease;
}

.news-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.news-list li a {
  display: flex;
  align-items: center;
  padding: 0.5em 1em;
  text-decoration: none;
  color: inherit;                               /* 通常時は親要素の文字色 */
  transition: background .3s ease, color .3s ease;
}

.news-list li a:hover {
  background: #90C31F;                          /* 緑背景 */
  color: #fff;                                  /* 文字白 */
  text-decoration: underline;                   /* 下線 */
}

/* ホバー時の子要素文字色上書き（.news-date/.news-title に元色指定がある場合用） */
.news-list li a:hover .news-date,
.news-list li a:hover .news-title {
  color: #fff;
}

.news-list .news-date {
  flex: 0 0 auto;
  margin-right: 0.75em;                         /* 日付とタイトル間スペース */
  color: #666;
}

.news-list .news-title {
  flex: 1;
  color: #333;
}

/************************************
 ロールケーキ教室用スタイル（.rollcake-events）
************************************/
.rollcake-events {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.rollcake-events .rollcake-entry {
  display: block;
  width: 300px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .3s, background-color .2s;
}

.rollcake-events .rollcake-entry:hover {
  transform: translateY(-2px);
  background-color: #f7f7f7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: transparent;
}

.rollcake-events .rollcake-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: .5em;
}

.rollcake-events .rollcake-title {
  display: inline-block;
  position: relative;
  margin: .5em 0 1em;
  padding-bottom: .2em;
  font-size: 1.1rem;
  color: #333;
}
.rollcake-events .rollcake-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background-color: #90C31F;
}

/************************************
 イベントカード群：PCは3列、スマホは幅80％に
************************************/
.event-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* カード行全体を中央寄せ */
  gap: 1rem;                /* カード間の隙間 */
  margin: 2rem 0;
  box-sizing: border-box;
}

.event-cards .event-entry {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .3s, background-color .2s;

  /* ── PC：３列になる可変幅 ── */
  flex: 1 1 calc((100% - 2rem) / 3);
  max-width: calc((100% - 2rem) / 3);
  min-width: 200px;         /* あまり小さくなりすぎないように */

  /* ── スマホ：下で幅80％に切り替え ── */
  margin-bottom: 1rem;
}

.event-cards .event-entry:hover {
  transform: translateY(-2px);
  background-color: #f7f7f7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: transparent;
}

/* サムネイル画像は縦横比を保って幅100％ */
.event-cards .event-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: .5em;
}

/* タイトル下の緑アンダーライン */
.event-cards .event-title {
  display: inline-block;
  position: relative;
  margin: .5em 0 1em;
  padding-bottom: .2em;
  color: #7b7b7b;
}
.event-cards .event-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background-color: #90C31F;
}

/* スマホ対応：767px以下で1列＆カード幅80％に */
@media (max-width: 767px) {
  .event-cards .event-entry {
    flex: 1 1 80%;
    max-width: 80%;
  }
}


/************************************
**** お知らせ全掲載：丸ごと入れ替えCSS
************************************/
/************************************
**** お知らせ全掲載：左右ボタン・薄グレー背景
************************************/
/* リストアイテム背景をサイドバー風の薄グレーに */
.news13-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news13-list .news-item {
  background: #f7f7f7;               /* ← 薄グレー */
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: .6em;
  transition: box-shadow .3s, transform .2s;
}
.news13-list .news-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.news13-list .news-item a {
  display: flex;
  align-items: center;
  padding: .5em 1em;
  text-decoration: none;
  color: #333;
  transition: background .3s, color .3s;
}
.news13-list .news-item a:hover {
  background: #90C31F;
  color: #fff;
  text-decoration: underline;
}
.news13-list .news-item a:hover .news-date,
.news13-list .news-item a:hover .news-title {
  color: #fff;
}
.news13-list .news-date {
  flex: 0 0 auto;
  margin-right: .75em;
  color: #666;
}
.news13-list .news-title {
  flex: 1;
  color: #333;
}

/* ページャー：左右配置 */
.news13-pager {
  display: flex;
  justify-content: space-between;
  margin: 1em 0;
}
.news13-pager button {
  background-color: #f7f7f7;
  margin: 6px 0;
  padding: 4px 10px;
  border-radius: 20px;
  transition: background .4s, color .4s;
  color: #333;
  font-size: 1em;
  border: none;
  cursor: pointer;
}
/* Font Awesome 矢印アイコン */
.news13-prev {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.news13-prev::before {
  content: "\f060";  /* 左向き */
  color: #90C31F;
  margin-right: .5em;
}
.news13-next {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.news13-next::after {
  content: "\f061";  /* 右向き */
  color: #90C31F;
  margin-left: .5em;
}
/* ボタンホバー */
.news13-pager button:hover {
  background-color: #90C31F;
  color: #fff !important;
}

/* タグクラウド背景を強制上書き */
.widget_tag_cloud .tagcloud a,
.tagcloud a {
  background-color: #f7f7f7 !important;
}

/* style.css に丸ごと貼り付け */
/*****************************************************
**** ちびっこパティシエの日記 用デザインCSS（最終版）
*****************************************************/

/* 投稿リスト全体 */
.chibikko-patissier-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各アイテム */
.chibikko-patissier-item {
  display: flex;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1em;
  transition: background .2s ease, box-shadow .2s ease;
}
.chibikko-patissier-item:hover {
  background: #f0f0f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* リンク全体をクリック可能に */
.chibikko-patissier-link {
  display: flex;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* アイキャッチ縦横比固定 */
.chibikko-patissier-thumb {
  flex: 0 0 120px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eee;
}
.chibikko-patissier-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 日付＋タイトル */
.chibikko-patissier-content {
  flex: 1;
  padding: .5em 1em;
}
.chibikko-patissier-date {
  font-size: .85rem;
  color: #666;
  margin-bottom: .25em;
}
.chibikko-patissier-title {
  font-size: 1rem;
  color: #333;
  margin: 0;
}

/* 前後月ナビ */
.chibikko-patissier-pager {
  display: flex;
  justify-content: space-between;
  margin: 1.5em 0;
}
.chibikko-patissier-prev,
.chibikko-patissier-next {
  background: #f7f7f7;
  color: #333;
  padding: .5em 1em;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  transition: background .3s ease, color .3s ease;
}
.chibikko-patissier-prev::before {
  content: "\f060";  /* FontAwesome 左矢印 */
  color: #90C31F;
  margin-right: .5em;
}
.chibikko-patissier-next::after {
  content: "\f061";  /* FontAwesome 右矢印 */
  color: #90C31F;
  margin-left: .5em;
}
.chibikko-patissier-prev:hover,
.chibikko-patissier-next:hover {
  background: #90C31F;
  color: #fff;
}

/************************************
  ちびっこパティシエの日記：タイトル下 緑アンダーライン
************************************/
.chibikko-patissier-title {
  display: inline-block;    /* テキスト幅に合わせる */
  position: relative;       /* ::afterの基準 */
  margin: .5em 0;           /* 上下余白 */
  padding-bottom: .2em;     /* 線とのすき間 */
}

.chibikko-patissier-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px; /* 線の太さ */
  background-color: #90C31F;
}

/************************************
**** エントリーカード 共通ベース (PC)
************************************/
/*── カードラッパー ──*/
a.entry-card-wrap.a-wrap {
  display: block;
  background-color: #fff;
  text-decoration: none;
  transition: all .2s ease;
}
a.entry-card-wrap.a-wrap:hover {
  transform: translateY(-1px);
}

/*── サムネイル：横幅100%、縦を切り取り ──*/
figure.entry-card-thumb.card-thumb.e-card-thumb {
  position: relative;
  width: 100%;
  padding-top: 50%;      /* 700×350 の1:0.5比率 */
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
figure.entry-card-thumb.card-thumb.e-card-thumb img {
  position: absolute;
  top: 0; left: 50%;
  width: auto;
  height: 100%;
  min-width: 100%;
  transform: translateX(-50%);
  object-fit: cover;
}

/*── カテゴリーラベル ──*/
.e-card-thumb .cat-label {
  margin-left: .8em;
}

/*── タイトル（中央寄せ・テキスト幅ぴったりの下線） ──*/
h2.entry-card-title.card-title.e-card-title {
  display: inline-block;   /* 幅をテキストに合わせる */
  position: relative;      
  font-size: 1.125rem;     /* ≒18px */
  font-weight: bold;
  color: #696969;
  text-align: center;
  line-height: 1.8;
  margin: 3em auto 1em;    /* 真ん中寄せ：上3em／下1em */
  padding-bottom: .2em;    /* 下線位置だけ確保 */
}
h2.entry-card-title.card-title.e-card-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;             /* テキスト幅ぴったり */
  height: 3px;
  background-color: #90C31F;
}

/*── スニペット ──*/
.entry-card-snippet.card-snippet.e-card-snippet {
  font-size: 14px;
  color: #7b7b7b;
  text-align: center;
  border-top: 3px dotted #90C31F;
  padding: .6em 2em 4em;
  margin: 0;
  line-height: 1.8;
  max-height: 30em;
}

/*── 投稿日・更新日 ──*/
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update {
  color: #7b7b7b;
  font-size: .86em;
}

/************************************
**** タブレット以下 (～1023px)
************************************/
@media (max-width: 1023px) {
  /* サムネ縦をやや多めにカット */
  figure.entry-card-thumb.card-thumb.e-card-thumb {
    padding-top: 45%;
  }
  /* ホバーアニメーション無効＋背景色変更 */
  a.entry-card-wrap.a-wrap:hover {
    transform: none;
    background-color: #f7f7f7;
  }
  /* リスト内カードにソフトシャドウ */
  div#list a.entry-card-wrap.a-wrap {
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
  }
}

/************************************
**** モバイル (～600px)
************************************/
@media (max-width: 600px) {
  /* サムネさらに縦を切り詰め */
  figure.entry-card-thumb.card-thumb.e-card-thumb {
    padding-top: 40%;
  }
  /* 縦並びカード幅を95％に中央寄せ */
  .ect-vertical-card .entry-card-wrap.a-wrap {
    width: 95% !important;
    margin: 0 auto;
  }
}

/************************************
**** カルーセル全スライド：<figure>の<span>ラベルを非表示に 
************************************/
#carousel .slick-slide article figure > span {
  display: none !important;
}


/************************************
**** 共通：自動スクロールスライダー（滑らか表示・遅延読み込み対策込み）
************************************/
.auto-scroll-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 20px; /* 任意で調整 */
}

.auto-scroll-wrapper {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 40s linear infinite;
  will-change: transform;
}

.auto-scroll-wrapper > * {
  display: inline-block;
  margin-right: 16px; /* アイテム間の隙間 */
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.auto-scroll-wrapper img {
  animation: none !important;
  will-change: transform;
  transform: translateZ(0); /* iOS Safari 描画安定化 */
  max-width: 100%;
  height: auto;
}

/************************************
**** chibikko-slider：テキスト装飾による常時下線（隙間ゼロ）
************************************/
.chibikko-slider .auto-scroll-wrapper {
  text-align: center; /* タイトル中央寄せ */
}

.chibikko-slider .auto-scroll-wrapper
  .new-entry-card-title.widget-entry-card-title.card-title,
.chibikko-slider .auto-scroll-wrapper
  .is-list-horizontal.large-thumb .card-title,
.chibikko-slider .auto-scroll-wrapper
  .is-list-horizontal.large-thumb-on .card-title {
  display: inline-block !important;     /* テキスト幅に */
  margin: .2em auto !important;         /* 中央寄せ */
  padding: 0 !important;                /* 余白ゼロ */
  line-height: 1 !important;            /* 行間詰め */
  /* ——— 下線装飾 ——— */
  text-decoration: underline solid #90C31F 3px !important;
  -webkit-text-decoration-line: underline !important;
  -webkit-text-decoration-color: #90C31F !important;
  -webkit-text-decoration-style: solid !important;
  -webkit-text-decoration-thickness: 3px !important;
  -webkit-text-underline-offset: 0px !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 0px !important;
}

/************************************
**** chibikko-slider：数字も含め下線スキップを無効化
************************************/
.chibikko-slider .auto-scroll-wrapper
  .new-entry-card-title.widget-entry-card-title.card-title,
.chibikko-slider .auto-scroll-wrapper
  .is-list-horizontal.large-thumb .card-title,
.chibikko-slider .auto-scroll-wrapper
  .is-list-horizontal.large-thumb-on .card-title,
.chibikko-slider .auto-scroll-wrapper
  .card-title {
  /* 既存の text-decoration 指定はそのまま残してください */
  text-decoration: underline solid #90C31F 3px !important;
  /* ここから下線スキップ無効化 */
  -webkit-text-decoration-skip: none !important;
  -webkit-text-decoration-skip-ink: none !important;
  text-decoration-skip-ink: none !important;
  text-decoration-skip: none !important;
}


/************************************
****　サイドバー
************************************/

.sidebar h3{
  color: #7b7b7b; /* サイドバーのタイトルの文字色を変更 */
  border-radius: 0%; /* タイトルの角の丸みを削除 */
  border-bottom: 3px dotted; /* タイトルの下にドットの線を追加 */
  border-color: #90C31F; /* タイトル下の線の色を緑に設定 */
  padding-bottom: 0.3em; /* タイトルの下部余白を設定 */
  margin-top: -0.5em; /* タイトルの上部余白を縮小 */
  margin-bottom: 1em; /* タイトルの下部に1emの余白を追加 */
}


.widget_recent_entries ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a {
  background-color: #f7f7f7; /* リンクの背景色を明るい灰色に設定 */
  margin: 6px 0; /* リンクの上下に6pxの余白を追加 */
  padding: 4px 10px; /* リンク内の文字周囲に余白を追加 */
  border-radius: 20px; /* リンクの角を丸くする */
  transition: 0.4s; /* ホバー時の変化を0.4秒間で行う */
}


.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover {
  background-color: #90C31F; /* ホバー時のリンク背景色を緑に変更 */
  color: #fff!important; /* ホバー時の文字色を白に変更 */
}

.tagcloud a {
  background-color: #f7f7f7; /* タグクラウドの背景色を明るい灰色に設定 */
}

.tagcloud a:hover {
  background-color: #90C31F; /* ホバー時のタグクラウド背景色を緑に変更 */
  color: #fff!important; /* ホバー時の文字色を白に変更 */
  transition: 0.4s; /* ホバー時の変化を0.4秒間で行う */
}

.nwa .recommended.rcs-card-margin a {
  margin: 0 0 1em; /* リンクの下部に1emの余白を追加 */
  width: 90%; /* リンクの幅を90%に設定 */
}

.widget-entry-cards .widget-entry-card-content {
  color: #565656; /* カードコンテンツの文字色を中間の灰色に設定 */
}

/* ─────────────────────────────
   wg-cake-fruits ウィジェット内の画像を
   横幅 80% で表示（高さは自動）
───────────────────────────── */
.wg-cake-fruits .img img {
  display: block;    /* ブロック化して余白調整をしやすく */
  width: 80%;        /* 親コンテナ幅の 80% */
  height: auto;      /* アスペクト比を維持 */
  margin: 0 auto;    /* 中央寄せ */
}


/************************************
  ちびっこパティシエウジェットトップ（PC:2列・スマホ:1列）
************************************/
.chibikko-widget-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;              /* カード間の余白 */
  justify-content: center;
  margin: 2rem 0;
}

.chibikko-widget-top .entry-link {
  /* PC時は2列、gap分を引いた幅 */
  flex: 0 1 calc((100% - 1rem) / 2);
  max-width: calc((100% - 1rem) / 2);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .3s, background-color .2s;
}

.chibikko-widget-top .entry-link:hover {
  transform: translateY(-2px);
  background-color: #f7f7f7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: transparent;
}

.chibikko-widget-top .img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: .5em;
}

.chibikko-widget-top .title {
  display: inline-block;
  position: relative;
  margin: .5em 0 1em;
  padding-bottom: .2em;
  font-size: 1.1rem;
  color: #333;
}
.chibikko-widget-top .title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #90C31F;
}

/* ── スマホ：767px以下は1列＆幅80%に ── */
@media (max-width: 767px) {
  .chibikko-widget-top .entry-link {
    flex: 0 1 80%      !important;
    max-width: 80%     !important;
    margin: 0 auto     !important; /* 中央寄せ */
  }
}