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


/* ===== お知らせタイトルをクレヨン風にする ===== */

/* Google Fonts を読み込む */
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

/* お知らせタイトルに適用 */
.olive-news__title {
  font-family: 'Yusei Magic', cursive !important;
}

/* ===== お知らせ 見出し（画像）をアップル風に ===== */
.olive-news__title{
  /* カード風の背景（アップルっぽい明るいグラデ） */
  background: linear-gradient(180deg, #bfe96a 0%, #a8d94b 100%);
  border-radius: 18px;
  padding: 28px 20px;
  margin: 0 0 12px;
  display: flex;
  justify-content: center;   /* 中央に */
  align-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.06); /* うっすら影 */
}

/* 画像自体を大きく（ここでサイズ調整） */
.olive-news__title img{
  display: block;
  height: auto;
  max-height: 140px;  /* ←PCサイズ。もっと大きく：160～180px */
  width: auto;
}

/* タイトル下のサブコピーも中央寄せでアップル風に */
.olive-news__sub{
  text-align: center;
  font-size: 16px;
  color: #5b6472;
  margin-top: 14px;
}

/* レスポンシブ（スマホでは少し小さめ） */
@media (max-width: 780px){
  .olive-news__title{ padding: 20px 16px; border-radius: 14px; }
  .olive-news__title img{ max-height: 96px; } /* ←スマホでの高さ */
  .olive-news__sub{ font-size: 15px; }
}


/* ===== お知らせ 見出し（画像のみ・シンプルアップル風） ===== */
.olive-news__title{
  margin: 0 0 12px;
  display: flex;
  justify-content: center;   /* 中央寄せ */
  align-items: center;
  padding: 20px 0;
  background: none !important; /* 背景を消す */
  box-shadow: none !important; /* 影も消す */
}

/* 画像自体を大きく */
.olive-news__title img{
  display: block;
  height: auto;
  max-height: 180px;  /* ←ここで調整。200pxにするともっと大きくなります */
  width: auto;
}

/* サブコピー中央寄せ */
.olive-news__sub{
  text-align: center;
  font-size: 16px;
  color: #5b6472;
  margin-top: 10px;
}

/* スマホ用（少し小さめ） */
@media (max-width: 780px){
  .olive-news__title img{ max-height: 120px; }
  .olive-news__sub{ font-size: 15px; }
}


/* ===== お知らせ 見出し（アップル風） ===== */
.olive-news__title{
  margin: 0;
  padding: 60px 0 30px;  /* 上下に余白をたっぷり */
  display: flex;
  justify-content: center;
  align-items: center;
  background: none !important;
  box-shadow: none !important;
  border: none;
}

/* ロゴ画像を大きく */
.olive-news__title img{
  display: block;
  height: auto;
  max-height: 300px;  /* ←数値で大きさ調整（もっと大きくしたければ 320〜350px） */
  width: auto;
}

/* サブコピーもアップル風に中央寄せ */
.olive-news__sub{
  text-align: center;
  font-size: 18px;     /* 少し大きめで見やすく */
  color: #666;         /* 薄いグレー */
  margin: 0 0 40px;    /* 下に余白を広めに */
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* スマホ用（少し抑えめ） */
@media (max-width: 780px){
  .olive-news__title{ padding: 40px 0 20px; }
  .olive-news__title img{ max-height: 200px; }
  .olive-news__sub{ font-size: 16px; margin: 0 0 24px; }
}

/* ===== お知らせ 見出し画像を特大に ===== */
.olive-news__title img{
  display: block;
  height: auto;
  max-height: 400px !important;  /* ←ここを大きく！400px。もっと大きくしたければ500pxまでOK */
  width: auto;
}

/* スマホは少し抑える */
@media (max-width: 780px){
  .olive-news__title img{
    max-height: 240px !important;
  }
}


/* ===== お知らせ 見出し（サイズ調整＋余白を減らす） ===== */
.olive-news__title{
  margin: 0;
  padding: 30px 0 10px;   /* ←上下の余白を狭く */
  display: flex;
  justify-content: center;
  align-items: center;
  background: none !important;
  box-shadow: none !important;
  border: none;
}

.olive-news__title img{
  display: block;
  height: auto;
  max-height: 300px !important;  /* ←少し小さめに */
  width: auto;
}

/* サブコピーの余白も少し減らす */
.olive-news__sub{
  text-align: center;
  font-size: 16px;
  color: #5b6472;
  margin: 8px 0 20px;   /* ←上下の余白を調整 */
}

/* スマホ用 */
@media (max-width: 780px){
  .olive-news__title{ padding: 20px 0 8px; }
  .olive-news__title img{ max-height: 200px !important; }
  .olive-news__sub{ font-size: 15px; margin: 6px 0 16px; }
}


/* ===== お知らせ 見出し（余白を最小限に） ===== */
.olive-news__title{
  margin: 0;
  padding: 10px 0 5px;   /* ←上下の余白ほぼゼロ */
  display: flex;
  justify-content: center;
  align-items: center;
  background: none !important;
  box-shadow: none !important;
  border: none;
}

.olive-news__title img{
  display: block;
  height: auto;
  max-height: 300px !important;  /* ←前回のサイズ維持 */
  width: auto;
}

/* サブコピーの余白もさらに減らす */
.olive-news__sub{
  text-align: center;
  font-size: 16px;
  color: #5b6472;
  margin: 4px 0 10px;   /* ←余白かなり少なく */
}

/* スマホ用 */
@media (max-width: 780px){
  .olive-news__title{ padding: 8px 0 4px; }
  .olive-news__title img{ max-height: 200px !important; }
  .olive-news__sub{ font-size: 15px; margin: 3px 0 8px; }
}

/* ===== お知らせ 見出しの余白を最小限に ===== */
.olive-news__title{
  margin: 0;
  padding: 5px 0;   /* タイトル上下の余白を最小に */
  display: flex;
  justify-content: center;
  align-items: center;
  background: none !important;
  box-shadow: none !important;
  border: none;
}

.olive-news__title img{
  display: block;
  height: auto;
  max-height: 300px !important;  /* 文字サイズはこのまま */
  width: auto;
}

/* サブコピー（説明文）との余白をギュッと縮める */
.olive-news__sub{
  text-align: center;
  font-size: 15px;
  color: #5b6472;
  margin: 4px 0 8px;   /* ←上下の余白をかなり少なく */
  line-height: 1.4;    /* 行間も詰める */
}

/* ニュース一覧との距離も近づける */
.olive-news__tabs{
  margin: 8px 0 12px !important; /* ←さらに小さく */
}

/* スマホ用 */
@media (max-width: 780px){
  .olive-news__title{ padding: 3px 0; }
  .olive-news__title img{ max-height: 200px !important; }
  .olive-news__sub{ font-size: 14px; margin: 3px 0 6px; }
  .olive-news__tabs{ margin: 6px 0 10px !important; }
}


/* ===== お知らせ見出し（画像用・余白ゼロ版） ===== */
.olive-news__title{
  margin: 0 !important;     /* h2のデフォルト余白を消す */
  padding: 0 !important;    /* paddingもゼロ */
  line-height: 1 !important;/* 行間を詰める */
}

.olive-news__title img{
  display: block;
  margin: 0 auto;           /* 画像を中央に */
  max-height: 300px !important;
  height: auto;
  width: auto;
}

/* サブコピーも余白最小化 */
.olive-news__sub{
  margin: 4px 0 6px !important; /* かなり詰める */
  padding: 0 !important;
  line-height: 1.3;
}

/* タブとの距離も詰める */
.olive-news__tabs{
  margin: 6px 0 8px !important;
  padding: 0 !important;
}

/* ===== Olive News 用だけに効く（余白すっきり・他ブロックは無変更） ===== */
.entry-content .olive-news{
  margin-top: 8px;             /* 上は軽く詰める */
  margin-bottom: 36px;         /* 下は標準〜やや広めで次のブロックと喧嘩しない */
  padding: 0;
  border-top: none;
}

/* タイトル(h2)と画像の余白を最小限に */
.entry-content .olive-news .olive-news__title{
  margin: 0;
  padding: 4px 0 2px;
  line-height: 1;
}
.entry-content .olive-news .olive-news__title img{
  display: block;
  margin: 0 auto;
  height: auto;
  width: auto;
  max-height: 240px !important;   /* ←ここで“画像（文字）”の大きさ。240→220/200にするとさらにコンパクト */
}

/* サブコピーとタブの間隔を控えめに */
.entry-content .olive-news .olive-news__sub{
  text-align: center;
  font-size: 16px;
  color: #5b6472;
  margin: 6px 0 10px;
  line-height: 1.35;
}
.entry-content .olive-news .olive-news__tabs{
  margin: 10px 0 14px;
}

/* スマホ用 */
@media (max-width: 780px){
  .entry-content .olive-news .olive-news__title img{ max-height: 180px !important; }
  .entry-content .olive-news .olive-news__sub{ margin: 4px 0 8px; }
  .entry-content .olive-news .olive-news__tabs{ margin: 8px 0 12px; }
}

/* ── お知らせ（olive-news）を上へ引き上げる ── */
/* PC */
.entry-content .olive-news{
  margin-top: -60px !important;   /* ←数値を大きく(例:-80,-100)するとさらに上へ */
}
/* スマホ */
@media (max-width:780px){
  .entry-content .olive-news{
    margin-top: -30px !important;
  }
}


/* ===== Olive News のボタン配色を緑に統一 ===== */

/* タブ（すべて／お知らせ／…）通常状態 */
.entry-content .olive-news .olive-news__tab{
  background: #f1fae9;           /* うすい緑 */
  border: 1px solid #cfe9b8;
  color: #355b2c;
}

/* ホバー時 */
.entry-content .olive-news .olive-news__tab:hover{
  background: #e6f4d8;
  border-color: #bfe3a4;
}

/* 選択中タブ（is-active） */
.entry-content .olive-news .olive-news__tab.is-active{
  background: #67c23a !important;   /* メインの緑 */
  border-color: #67c23a !important;
  color: #fff !important;
}

/* 「ニュース一覧を見る」ボタン */
.entry-content .olive-news .olive-news__moreBtn{
  background: #67c23a !important;   /* 同じ緑 */
  color: #fff !important;
  border: none;
}
.entry-content .olive-news .olive-news__moreBtn:hover{
  background: #57a92f !important;   /* ちょい濃い緑 */
}


/* ===== Olive News：ボタン色をサイト上部の緑(#a8d94b)に合わせる ===== */
:root{
  --olive-green: #a8d94b;      /* ←上の左上の緑に近い色。合わなければここだけ色変更 */
  --olive-green-dark: #93c33d; /* ホバー用に少し濃い緑 */
  --olive-green-light: #eff7df;/* 薄い背景用   */
  --olive-green-border: #d4ebb2;
}

/* タブ（通常） */
.entry-content .olive-news .olive-news__tab{
  background: var(--olive-green-light);
  border: 1px solid var(--olive-green-border);
  color: #355b2c;
}
/* ホバー */
.entry-content .olive-news .olive-news__tab:hover{
  background: #e8f3d5;
  border-color: #c9e6a9;
}
/* 選択中タブ */
.entry-content .olive-news .olive-news__tab.is-active{
  background: var(--olive-green) !important;
  border-color: var(--olive-green) !important;
  color: #fff !important;
}

/* 「お知らせ一覧を見る」ボタン */
.entry-content .olive-news .olive-news__moreBtn{
  background: var(--olive-green) !important;
  color: #fff !important;
  border: none;
}
.entry-content .olive-news .olive-news__moreBtn:hover{
  background: var(--olive-green-dark) !important;
}