@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/*
  Skin Name: 森のクマーケット
  Skin URI: https://mouzyuunotonari.com/
  Skin Description: クマ(茶)・副トラ(橙)・フクロウ(紺)の3キャラを色で表現した、丸くてやわらかい「森のスーパー」風スキン
  Skin Author: 運営者
  Version: 1.0.0
*/

/* ==========================================================
   1. カラー・共通設定
   ========================================================== */
:root {
  /* 森のベース */
  --kf-forest:      #4E7B5B;  /* 森の緑(見出し・ナビ) */
  --kf-forest-deep: #345A42;  /* 深い緑(フッター・リンク) */
  --kf-mint:        #E6EFDD;  /* 葉っぱの淡い緑(背景アクセント) */
  --kf-bg:          #F1F4E8;  /* ページ背景 */
  --kf-paper:       #FFFEF9;  /* 本文カード */
  --kf-line:        #D5DEC6;  /* 罫線 */
  --kf-ink:         #3A3630;  /* 文字色 */

  /* 3キャラのテーマカラー */
  --kf-kuma:        #8B5A3C;  /* クマ(茶) */
  --kf-kuma-soft:   #F4E9DF;
  --kf-tora:        #E8862A;  /* 副トラ(橙) */
  --kf-tora-soft:   #FDEFDD;
  --kf-fukurou:     #2E4272;  /* フクロウ(紺) */
  --kf-fukurou-soft:#E5E9F4;

  --kf-radius-l: 28px;
  --kf-radius-m: 20px;
  --kf-radius-s: 14px;
}

body {
  background-color: var(--kf-bg);
  color: var(--kf-ink);
  font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
  line-height: 1.9;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--kf-tora);
  outline-offset: 2px;
}

/* ==========================================================
   2. ヘッダー(3キャラの帯が主役)
   ========================================================== */
#header-container,
.header-container {
  background-color: var(--kf-paper);
  border-bottom: none;
}

#header-container::after,
.header-container::after {
  content: "";
  display: block;
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--kf-kuma) 0 33.33%,
    var(--kf-tora) 33.33% 66.66%,
    var(--kf-fukurou) 66.66% 100%
  );
}

.site-name-text,
.site-name-text-link {
  color: var(--kf-forest-deep);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tagline {
  color: var(--kf-forest);
}

/* グローバルナビ */
#navi,
.navi {
  background-color: var(--kf-forest);
}

.navi-in > ul > li > a,
.navi-in a {
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
}

.navi-in > ul > li > a:hover,
.navi-in a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.navi-in > ul .sub-menu,
.navi-in > ul .sub-menu a {
  background-color: var(--kf-forest-deep);
}

/* メニュー3項目を、下の色帯(茶・橙・紺)それぞれの真上に配置 */
@media screen and (min-width: 1024px) {
  #navi-in,
  .navi-in {
    max-width: none;
    width: 100%;
  }

  .navi-in > ul {
    display: flex;
    width: 100%;
  }

  .navi-in > ul > li {
    flex: 1 1 0;
    width: 33.3333% !important;
  }

  .navi-in > ul > li > a {
    text-align: center;
  }

  .navi-in > ul > li > a .caption-wrap {
    justify-content: center;
  }
}

/* ==========================================================
   3. メイン・サイドバー(丸いカード)
   ========================================================== */
.main,
.sidebar {
  background-color: var(--kf-paper);
  border-radius: var(--kf-radius-l);
}

.breadcrumb,
.breadcrumb a {
  color: var(--kf-forest);
}

/* 記事一覧カード */
.entry-card-wrap,
.related-entry-card-wrap {
  background-color: #fff;
  border: 2px solid var(--kf-line);
  border-radius: var(--kf-radius-m);
  overflow: hidden;
  transition: border-color 0.2s;
}

.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  border-color: var(--kf-forest);
  background-color: #fff;
}

.entry-card-thumb,
.related-entry-card-thumb {
  border-radius: var(--kf-radius-s);
  overflow: hidden;
}

.entry-card-title,
.related-entry-card-title {
  color: var(--kf-ink);
  font-weight: 700;
}

.entry-card-snippet,
.related-entry-card-snippet {
  color: #6b665c;
}

/* カテゴリラベル・タグ */
.cat-label {
  background-color: var(--kf-forest);
  color: #fff;
  border-radius: 999px;
  padding: 2px 12px;
}

.tag-link,
.tagcloud a {
  border-radius: 999px;
  background-color: var(--kf-mint);
  border-color: var(--kf-line);
  color: var(--kf-forest-deep);
}

/*
  ▼ カテゴリごとにキャラ色を付けたい場合(数字はカテゴリIDに置き換えてください)
.cat-label-12 { background-color: var(--kf-kuma); }
.cat-label-15 { background-color: var(--kf-tora); color: #2b1a06; }
.cat-label-18 { background-color: var(--kf-fukurou); }
*/

/* ==========================================================
   4. 記事本文
   ========================================================== */
.article .entry-title,
.entry-title {
  color: var(--kf-ink);
  font-weight: 700;
  line-height: 1.5;
}

.entry-content a:not(.btn):not(.blogcard-wrap) {
  color: var(--kf-forest-deep);
  text-decoration: underline;
  text-decoration-color: var(--kf-line);
  text-underline-offset: 3px;
}

.entry-content a:not(.btn):not(.blogcard-wrap):hover {
  color: var(--kf-tora);
}

.entry-content img:not(.emoji) {
  border-radius: var(--kf-radius-s);
}

/* 見出し */
.article h2 {
  background-color: var(--kf-forest);
  color: #fff;
  border: none;
  border-radius: var(--kf-radius-m);
  padding: 0.7em 1.1em;
  font-size: 1.35em;
  line-height: 1.5;
}

.article h3 {
  background-color: var(--kf-mint);
  color: var(--kf-ink);
  border: none;
  border-left: 10px solid var(--kf-forest);
  border-radius: var(--kf-radius-s);
  padding: 0.6em 1em;
}

.article h4 {
  background: none;
  color: var(--kf-forest-deep);
  border: none;
  border-bottom: 3px dotted var(--kf-forest);
  padding: 0.3em 0.2em;
}

.article h5,
.article h6 {
  background: none;
  border: none;
  color: var(--kf-forest-deep);
}

/* 引用 */
.entry-content blockquote {
  background-color: var(--kf-mint);
  border-radius: var(--kf-radius-s);
}

/* ==========================================================
   5. 目次(ジャンプ)
   ========================================================== */
.toc {
  background-color: #fff;
  border: 2px dashed var(--kf-forest);
  border-radius: var(--kf-radius-m);
}

.toc-title {
  color: var(--kf-forest-deep);
  font-weight: 700;
}

.toc a {
  color: var(--kf-ink);
}

/* 目次を全ページで非表示(Cocoonの目次 + プラグインの目次) */
.toc,
#toc_container,
.lwptoc,
#ez-toc-container,
#rtoc-mokuji-wrapper,
.rtoc-mokuji-content {
  display: none !important;
}

/*
  ▼ 目次を復活させたい場合は、上の「全ページで非表示」のブロックを削除してください
*/

/* ==========================================================
   6. ボタン・ページネーション・検索
   ========================================================== */
.btn,
.search-submit,
input[type="submit"],
button[type="submit"] {
  border-radius: 999px;
}

.pagination .page-numbers {
  border-radius: 999px;
  border: 2px solid var(--kf-line);
  background-color: #fff;
  color: var(--kf-forest-deep);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background-color: var(--kf-forest);
  border-color: var(--kf-forest);
  color: #fff;
}

.search-edit,
input[type="text"],
input[type="search"],
input[type="email"],
textarea {
  border-radius: var(--kf-radius-s);
  border-color: var(--kf-line);
}

/* ==========================================================
   7. サイドバー
   ========================================================== */
.sidebar h3,
.widget-sidebar-title {
  background-color: var(--kf-mint);
  color: var(--kf-forest-deep);
  border: none;
  border-radius: 999px;
  padding: 0.5em 1.2em;
  font-weight: 700;
}

.author-box,
.blogcard {
  border-radius: var(--kf-radius-m);
}

/* ==========================================================
   8. フッター
   ========================================================== */
#footer,
.footer {
  background-color: var(--kf-forest-deep);
  color: #fff;
  border-top: 8px solid transparent;
  border-image: linear-gradient(
    90deg,
    var(--kf-kuma) 0 33.33%,
    var(--kf-tora) 33.33% 66.66%,
    var(--kf-fukurou) 66.66% 100%
  ) 1;
}

#footer a,
.footer a {
  color: #E6EFDD;
}

.footer-bottom,
.copyright {
  color: #E6EFDD;
}

.go-to-top-button {
  background-color: var(--kf-forest);
  border-radius: 999px;
}

/* ==========================================================
   9. キャラ別パーツ(記事内で使えるクラス)
   使い方: 「グループ」ブロックなどの「追加CSSクラス」に入力
   ========================================================== */

/* 囲みボックス */
.box-kuma,
.box-tora,
.box-fukurou {
  border-radius: var(--kf-radius-m);
  padding: 1.2em 1.4em;
  margin: 1.6em 0;
}

.box-kuma    { background-color: var(--kf-kuma-soft);     border: 3px solid var(--kf-kuma); }
.box-tora    { background-color: var(--kf-tora-soft);     border: 3px solid var(--kf-tora); }
.box-fukurou { background-color: var(--kf-fukurou-soft);  border: 3px solid var(--kf-fukurou); }

/* 名前ラベル(<span class="label-kuma">クマ</span> のように使う) */
.label-kuma,
.label-tora,
.label-fukurou {
  display: inline-block;
  border-radius: 999px;
  padding: 0 0.9em;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.8;
}

.label-kuma    { background-color: var(--kf-kuma);    color: #fff; }
.label-tora    { background-color: var(--kf-tora);    color: #2b1a06; }
.label-fukurou { background-color: var(--kf-fukurou); color: #fff; }

/* 吹き出し(吹き出しブロックの「追加CSSクラス」に kuma / tora / fukurou) */
.speech-wrap.kuma .speech-balloon    { background-color: var(--kf-kuma-soft);    border-color: var(--kf-kuma); }
.speech-wrap.tora .speech-balloon    { background-color: var(--kf-tora-soft);    border-color: var(--kf-tora); }
.speech-wrap.fukurou .speech-balloon { background-color: var(--kf-fukurou-soft); border-color: var(--kf-fukurou); }

.speech-wrap.kuma .speech-name    { color: var(--kf-kuma); }
.speech-wrap.tora .speech-name    { color: #B25F0F; }
.speech-wrap.fukurou .speech-name { color: var(--kf-fukurou); }

.speech-balloon {
  border-radius: var(--kf-radius-m);
}

/* ==========================================================
   10. スマホ調整
   ========================================================== */
@media screen and (max-width: 834px) {
  .main,
  .sidebar {
    border-radius: var(--kf-radius-m);
  }

  .article h2 {
    font-size: 1.2em;
    padding: 0.6em 0.9em;
  }
}