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

/* ==============================================
   基調色とフォント
   ============================================== */
:root{
  --accent:#009688;
  --accent-dark:#00796b;        /* Gutenbergボタンhoverで使用 */
  --nextpage:#ffc727;           /* 「次のページ」黄色 */
  --nextpage-dark:#e0ad00;      /* hover用の濃い黄色 */
}
body{
  background:#f4f5f7;
  font-family:"Noto Sans JP","Hiragino Sans",Meiryo,sans-serif;
}

/* ==============================================
   ヘッダーとメニュー
   ============================================== */
.logo-image{ padding:10px 0; }
.site-name-text{ font-size:26px; }
.navi{ background:#fff; }
.navi-in > ul li{ height:60px; }
.navi-in a{
  color:#333;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:.2s;
}
.navi-in a:hover{ background:#f5f8fa; }

/* ==============================================
   2列カード（カード型＋2列前提）
   ============================================== */
.entry-card-thumb{ width:100% !important; float:none !important; }
.card-thumb img{ aspect-ratio:16/9; object-fit:cover; }
.entry-card-title{
  font-size:18px; line-height:1.6; font-weight:700;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.entry-card-snippet{
  font-size:.9em; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.entry-card-content{ margin:0 !important; display:flex; flex-direction:column; }
.entry-card-meta{ margin-top:auto; position:static !important; text-align:right; }

/* ==============================================
   カテゴリバッジ
   ============================================== */
.cat-label{
  background:rgba(255,140,66,.95);
  border:1px solid rgba(0,0,0,.08);
  color:#fff; font-size:12px; padding:2px 8px; border-radius:3px;
}

/* ==============================================
   サイドバー見出し
   ============================================== */
.sidebar h2,
.sidebar h3,
.sidebar .widget-title{
  background: var(--accent);
  color:#fff;
  text-align:center;
  padding:10px 12px;
  border-radius:4px;
  margin:16px 0;
}

/* ==============================================
   Gutenberg ボタン
   ============================================== */
.wp-block-button .wp-block-button__link{
  background:var(--accent); color:#fff; border-radius:4px;
  padding:12px 20px; text-decoration:none; transition:.2s;
}
.wp-block-button .wp-block-button__link:hover{ background:var(--accent-dark); }

/* ==============================================
   カードの軽いホバー
   ============================================== */
.a-wrap{ transition:.2s; border-radius:4px; }
.a-wrap:hover{ background:#f5f8fa; }

/* ==============================================
   「次のページ」帯（帯＝黄色、リンクは透明のまま）
   ============================================== */
.pagination-next{
  background:var(--nextpage);
  border-radius:4px;
  text-align:center;
  padding:14px 16px;
  margin:24px auto 20px;
  max-width: calc(100% - 80px);
}
.pagination-next .pagination-next-link{
  display:block;
  color:#333 !important;
  font-weight:700;
  text-decoration:none;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  line-height:1.4;
}
.pagination-next .pagination-next-link:hover{ opacity:.85; }

/* ==============================================
   ページ番号の黄色統一（改行防止含む）
   ============================================== */
.pagination .page-numbers,
.navigation.pagination .page-numbers,
.nav-links .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 12px;
  font-size:16px; line-height:1;
  border:1px solid var(--nextpage);
  border-radius:8px;
  background:#fff; color:#333;
  transition:.2s; white-space:nowrap; box-sizing:border-box;
}
.pagination .page-numbers.current,
.navigation.pagination .page-numbers.current,
.nav-links .page-numbers.current{
  background:var(--nextpage);
  border-color:var(--nextpage);
  color:#000; font-weight:700;
}
.pagination .page-numbers:hover:not(.current),
.navigation.pagination .page-numbers:hover:not(.current),
.nav-links .page-numbers:hover:not(.current){
  background:var(--nextpage); color:#000;
}
/* 省略記号 (...) は例外 */
.pagination .page-numbers.dots{ min-width:auto; padding:0 10px; }

/* ==============================================
   記事内見出し（本文）
   ============================================== */
/* H2：緑帯＋内側白枠（上下余白拡大版） */
#main .article h2,
.article .entry-content h2,
.entry-content h2 {
  position: relative;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: 24px 20px;          /* ←上下を広げ済み */
  margin: 32px 0 24px;
  border-radius: 8px;
  border: none;
  box-shadow: none;
}
#main .article h2::before,
.article .entry-content h2::before,
.entry-content h2::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid #fff;
  border-radius: 6px;
  pointer-events: none;
  box-sizing: border-box;
}

/* H3：左に緑ライン */
#main .entry-content h3,
.entry-content h3{
  border-left:6px solid var(--accent) !important;
  padding-left:12px !important;
  margin:28px 0 16px !important;
  font-weight:700 !important;
  color:#333;
}

/* ==============================================
   フッター
   ============================================== */
#footer, .footer, .footer-bottom{
  background: var(--accent);
  color:#fff;
}
#footer a, .footer a, .footer-bottom a{
  color:#fff; background:transparent; text-decoration:none;
}
#footer a:hover, .footer a:hover, .footer-bottom a:hover,
#footer a:focus, .footer a:focus, .footer-bottom a:focus{
  color:#fff; background:transparent !important; text-decoration:underline;
}

/* ==============================================
   レスポンシブ（必要部分のみ）
   ============================================== */
@media screen and (max-width: 480px){
  /* ページ番号を少し小さく */
  .pagination .page-numbers,
  .navigation.pagination .page-numbers,
  .nav-links .page-numbers{
    min-width:38px; height:38px; font-size:15px;
  }
}