/* ============================================================
   うまか九州つまみぐい / Cocoon子テーマ追加スタイル
   「外観 → テーマファイルエディター → Cocoon Child の style.css」の
   いちばん下に、この内容をそのまま貼り付けてください。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=M+PLUS+Rounded+1c:wght@400;500;700;800&display=swap');

:root{
  --ktm-ink:#2a1a12;      /* 文字・枠線の色 */
  --ktm-cream:#fff8ec;    /* 背景の生成り */
  --ktm-accent:#d9481f;   /* 朱色（ボタン・リンク） */
  --ktm-yellow:#ffd23f;   /* 黄色（差し色） */
  --ktm-sub:#7a6352;      /* 補助テキスト */
}

/* ---- 全体のトーン ---- */
body{
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  background:var(--ktm-cream);
  color:var(--ktm-ink);
}
.content, .main, #main, #container{ background:var(--ktm-cream); }
a{ color:var(--ktm-ink); }
a:hover{ color:var(--ktm-accent); }

/* ---- 見出し ---- */
.entry-content h2{
  font-family:"Dela Gothic One","Hiragino Sans",sans-serif;
  font-weight:400;
  background:var(--ktm-ink);
  color:var(--ktm-cream);
  border:none;
  border-radius:16px;
  padding:16px 20px;
}
.entry-content h3{
  font-family:"Dela Gothic One","Hiragino Sans",sans-serif;
  font-weight:400;
  border:none;
  border-bottom:4px solid var(--ktm-yellow);
  padding:0 0 8px;
}

/* ---- ヘッダー・ナビ ---- */
.header, .header-container{ background:var(--ktm-cream); }
.logo-image img, .logo-header img{ max-height:96px; width:auto; mix-blend-mode:multiply; }
.navi-in > ul > li > a{
  font-weight:800;
  border:2px solid var(--ktm-ink);
  border-radius:999px;
  margin:6px 4px;
  padding:0 18px;
  line-height:40px;
  height:40px;
  background:#fff;
}
.navi-in > ul > li > a:hover{ background:var(--ktm-yellow); color:var(--ktm-ink); }

/* ---- 記事カード（一覧・新着記事） ---- */
.entry-card, .related-entry-card, .widget-entry-card, .new-entry-cards .a-wrap{
  background:#fff;
  border:2px solid var(--ktm-ink);
  border-radius:20px;
  box-shadow:4px 4px 0 var(--ktm-ink);
  overflow:hidden;
  padding:10px;
}
.entry-card:hover, .related-entry-card:hover, .widget-entry-card:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ktm-ink);
  background:#fff;
}
.entry-card-thumb img, .widget-entry-card-thumb img{ border-radius:14px; }
.entry-card-title, .widget-entry-card-title{ font-weight:800; }
.cat-label{
  background:var(--ktm-yellow);
  color:var(--ktm-ink);
  border:2px solid var(--ktm-ink);
  border-radius:999px;
  font-weight:800;
}

/* ---- ボタン ---- */
.btn, .btn-wrap > a, .entry-content .wp-block-button__link{
  background:var(--ktm-accent);
  color:var(--ktm-cream);
  border:2px solid var(--ktm-ink);
  border-radius:999px;
  font-weight:800;
  box-shadow:4px 4px 0 var(--ktm-ink);
}
.btn:hover, .btn-wrap > a:hover, .entry-content .wp-block-button__link:hover{
  color:var(--ktm-cream);
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ktm-ink);
}

/* ---- マスコットのひとこと枠 ----
   記事中で使うときは、カスタムHTMLブロックに次を貼ります。
   <div class="ktm-say-box">
     <img src="マスコット画像のURL" alt="豚骨だし取られとーと">
     <p>ここにひとこと。</p>
   </div>
------------------------------------------------ */
.ktm-say-box{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:2.5px solid var(--ktm-ink);
  border-radius:20px;
  box-shadow:5px 5px 0 var(--ktm-yellow);
  padding:16px 18px;
  margin:28px 0;
}
.ktm-say-box img{
  width:78px;
  height:78px;
  flex-shrink:0;
  border-radius:50%;
  background:#fff3dc;
  border:2px solid var(--ktm-ink);
  object-fit:cover;
  mix-blend-mode:multiply;
}
.ktm-say-box p{ margin:0; font-size:15px; font-weight:700; line-height:1.85; }

/* ---- フッター ---- */
.footer{ background:var(--ktm-ink); color:var(--ktm-cream); border-top:none; }
.footer a{ color:var(--ktm-cream); }
.footer a:hover{ color:var(--ktm-yellow); }

/* ---- スマホ ---- */
@media screen and (max-width:834px){
  .logo-image img, .logo-header img{ max-height:64px; }
  .entry-content h2{ font-size:20px; padding:12px 14px; }
  .ktm-say-box{ gap:10px; padding:12px; }
  .ktm-say-box img{ width:60px; height:60px; }
  .ktm-say-box p{ font-size:14px; }
}