@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800&display=swap");

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

/************************************
** カッテヨシ デザイン v2
** ポップ / 身近 / クリーン / 読みやすさ重視
**  1. デザイントークン   2. タイポグラフィ
**  3. レイアウト        4. ヘッダー・ナビ
**  5. アピールエリア     6. 記事カード
**  7. カテゴリバッジ     8. 記事本文
**  9. 目次・引用・表     10. ボタン
** 11. サイドバー        12. フッター
** 13. カテゴリ別カラー   14. レスポンシブ
************************************/

/************************************
** 1. デザイントークン
************************************/
:root{
  --kv-main:      #1fa97c;
  --kv-main-dark: #148361;
  --kv-accent:    #ff7a1a;
  --kv-tint:      #e6f6f0;
  --kv-text:      #2b2f36;
  --kv-text-sub:  #78818e;
  --kv-bg:        #f7f8fa;
  --kv-card:      #ffffff;
  --kv-line:      #e9ecf1;
  --kv-r-lg: 20px;
  --kv-r-md: 16px;
  --kv-r-sm: 10px;
  --kv-shadow:    0 1px 2px rgba(24,33,46,.04), 0 8px 24px rgba(24,33,46,.06);
  --kv-shadow-hv: 0 6px 12px rgba(24,33,46,.07), 0 20px 40px rgba(24,33,46,.12);
  --kv-font-body: "Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Noto Sans JP","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --kv-font-round: "M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

/************************************
** 2. タイポグラフィ
************************************/
body{
  background-color: var(--kv-bg);
  color: var(--kv-text);
  line-height: 1.95;
  letter-spacing: .025em;
  -webkit-font-smoothing: antialiased;
}
body[class*="fz-"]{ font-size: 17px; }
body[class*="ff-"]{ font-family: var(--kv-font-body); }
.entry-content p{ line-height: 1.95; }
a{ color: var(--kv-main-dark); text-decoration: none; }
a:hover{ color: var(--kv-accent); }
strong, b{ font-weight: 700; }

/************************************
** 3. レイアウト
************************************/
.main,
.sidebar{
  background: var(--kv-card);
  border: none;
  border-radius: var(--kv-r-lg);
  box-shadow: var(--kv-shadow);
  padding: 32px;
}
#content{ margin-top: 28px; }

/************************************
** 4. ヘッダー・ナビ
************************************/
#header-container{
  background-color: #ffffff;
  box-shadow: 0 1px 0 var(--kv-line);
}
#header .site-name-text{
  font-family: var(--kv-font-round);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: .08em;
  color: #1fa97c;
}
#header .site-name-text:hover{ color: #148361; }
.tagline{
  color: var(--kv-text-sub);
  font-size: .84rem;
  letter-spacing: .06em;
}
#navi{ background-color: #ffffff; border-top: 1px solid var(--kv-line); }
#navi .navi-in > ul > li{ margin: 0 4px; }
#navi .navi-in > ul > li > a{
  font-family: var(--kv-font-round);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--kv-text);
  border-radius: 999px;
  padding: 0 20px;
  height: 46px;
  line-height: 46px;
  transition: background-color .18s ease, color .18s ease;
}
#navi .navi-in > ul > li > a:hover,
#navi .navi-in > ul > li.current-menu-item > a{
  background-color: #e6f6f0;
  color: #148361;
}
#navi .navi-in a::after{ display: none; }

/************************************
** 5. アピールエリア
************************************/
.appeal{
  background-image: linear-gradient(120deg, #1fa97c 0%, #2bb3a3 45%, #56c07a 100%);
  position: relative;
  overflow: hidden;
}
.appeal::before,
.appeal::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  pointer-events: none;
}
.appeal::before{ width: 380px; height: 380px; right: -90px; top: -140px; }
.appeal::after{ width: 260px; height: 260px; left: -80px; bottom: -110px; }
.appeal-in{ position: relative; z-index: 1; }
.appeal .appeal-content{ background-color: transparent; }
.appeal .appeal-title{
  font-family: var(--kv-font-round);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.55;
  letter-spacing: .05em;
  color: #ffffff;
  margin-bottom: .5em;
}
.appeal .appeal-message{
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.95;
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
  opacity: .96;
}

/************************************
** 6. 記事カード
************************************/
.entry-card-wrap,
.related-entry-card-wrap{
  background: var(--kv-card);
  border: 1px solid var(--kv-line);
  border-radius: var(--kv-r-md);
  box-shadow: 0 1px 2px rgba(24,33,46,.04);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover{
  transform: translateY(-4px);
  box-shadow: var(--kv-shadow-hv);
  border-color: transparent;
  background: var(--kv-card);
}
.entry-card-thumb img,
.related-entry-card-thumb img{ transition: transform .45s ease; }
.entry-card-wrap:hover .entry-card-thumb img{ transform: scale(1.06); }
.entry-card-content{ padding: 16px 18px 18px; }
.entry-card-title{
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--kv-text);
  letter-spacing: .02em;
}
.entry-card-snippet{
  color: var(--kv-text-sub);
  font-size: .87rem;
  line-height: 1.85;
}
.entry-card-meta{ color: var(--kv-text-sub); font-size: .78rem; }

/************************************
** 7. カテゴリバッジ
************************************/
.cat-label{
  font-family: var(--kv-font-round);
  border: none;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  background-color: var(--kv-main);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.cat-label-3, .cat-label-5{ background-color: #35a853; }
.cat-label-6{ background-color: #ff8a3d; }
.cat-label-4, .cat-label-7{ background-color: #2f80ed; }
.cat-label-8{ background-color: #00a3c4; }

/************************************
** 8. 記事本文
************************************/
.article h1.entry-title{
  font-family: var(--kv-font-round);
  font-size: 1.72rem;
  line-height: 1.6;
  font-weight: 800;
  letter-spacing: .03em;
  border: none;
  padding: 0 0 .5em;
  margin-bottom: .6em;
  border-bottom: 2px dotted var(--kv-line);
}
.article h2{
  font-family: var(--kv-font-round);
  background: var(--kv-tint);
  border: none;
  border-radius: 14px;
  padding: .72em 1em;
  margin: 2.4em 0 1.1em;
  font-size: 1.34rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--kv-main-dark);
}
.article h3{
  font-family: var(--kv-font-round);
  border: none;
  padding: 0 0 0 1.15em;
  margin: 2em 0 .9em;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
  position: relative;
  color: var(--kv-text);
}
.article h3::before{
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: .62em; height: .62em;
  border-radius: 50%;
  background: var(--kv-main);
}
.article h4{
  border: none;
  padding: 0 0 0 .7em;
  border-left: 4px solid var(--kv-line);
  font-size: 1.04rem;
  font-weight: 700;
  margin: 1.8em 0 .8em;
}
.article p{ margin-bottom: 1.5em; }
.breadcrumb{
  font-size: .78rem;
  color: var(--kv-text-sub);
  padding: 0 0 1em;
}
.breadcrumb a{ color: var(--kv-text-sub); }
.breadcrumb a:hover{ color: var(--kv-main); }

/************************************
** 9. 目次・引用・表・リスト
************************************/
.toc{
  background: #fbfcfd;
  border: 1px solid var(--kv-line);
  border-radius: var(--kv-r-md);
  box-shadow: none;
  padding: 20px 24px;
}
.toc-title{
  font-family: var(--kv-font-round);
  color: var(--kv-main-dark);
  font-weight: 800;
  font-size: 1.02rem;
}
.toc-content a{ color: var(--kv-text); }
.toc-content a:hover{ color: var(--kv-accent); }
.toc-list > li{ margin-bottom: .4em; }
.article blockquote{
  background: #fbfcfd;
  border: 1px solid var(--kv-line);
  border-left: 5px solid var(--kv-main);
  border-radius: 0 var(--kv-r-sm) var(--kv-r-sm) 0;
  color: var(--kv-text-sub);
}
.article table{
  border-radius: var(--kv-r-sm);
  overflow: hidden;
  border: 1px solid var(--kv-line);
  font-size: .94rem;
}
.article table th{
  background: var(--kv-tint);
  color: var(--kv-main-dark);
  font-weight: 700;
  border-color: var(--kv-line);
}
.article table td{ border-color: var(--kv-line); }
.article ul li, .article ol li{ margin-bottom: .55em; }
.entry-content > ul, .entry-content ul{ list-style: none; padding-left: 0; }
.entry-content ul > li{ position: relative; padding-left: 1.4em; }
.entry-content ul > li::before{
  content: "";
  position: absolute;
  left: .25em; top: .78em;
  width: .45em; height: .45em;
  border-radius: 50%;
  background: var(--kv-accent);
}
.entry-content ol{ padding-left: 1.6em; }
.entry-content ol > li::marker{ color: var(--kv-main); font-weight: 700; }

/************************************
** 10. ボタン
************************************/
.btn, .btn-wrap > a{
  font-family: var(--kv-font-round);
  background-color: var(--kv-accent);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .9em 2.2em;
  box-shadow: 0 6px 18px rgba(255,122,26,.3);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover, .btn-wrap > a:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(255,122,26,.36);
  color: #fff;
}
.kv-pr-note{
  display: inline-block;
  font-size: .76rem;
  color: var(--kv-text-sub);
  background: #f2f4f7;
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 1.4em;
}

/************************************
** 11. サイドバー
************************************/
.sidebar h2,
.sidebar h3{
  font-family: var(--kv-font-round);
  background: transparent !important;
  color: var(--kv-text) !important;
  border: none;
  border-radius: 0;
  padding: 0 0 .5em .9em;
  margin-bottom: .8em;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: .03em;
  position: relative;
  border-bottom: 2px dotted var(--kv-line);
}
.sidebar h2::before,
.sidebar h3::before{
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: .5em; height: .5em;
  border-radius: 50%;
  background: var(--kv-main);
}
.sidebar .widget{ margin-bottom: 34px; }
.sidebar ul{ list-style: none; padding-left: 0; }
.sidebar ul li{
  border-bottom: 1px solid var(--kv-line);
  padding: .55em 0;
  font-size: .92rem;
  line-height: 1.7;
}
.sidebar ul li:last-child{ border-bottom: none; }
.sidebar ul li a{ color: var(--kv-text); }
.sidebar ul li a:hover{ color: var(--kv-main); }
.sidebar input[type="search"], .sidebar input[type="text"]{
  border-radius: 999px;
  border: 1px solid var(--kv-line);
  padding: .6em 1.1em;
}
.sidebar .search-submit{ border-radius: 999px; background: var(--kv-main); }

/************************************
** 12. フッター
************************************/
#footer{
  background-color: #ffffff;
  color: var(--kv-text-sub);
  border-top: 1px solid var(--kv-line);
  margin-top: 40px;
}
#footer a{ color: var(--kv-text); }
#footer a:hover{ color: var(--kv-main); }
.footer-bottom{ background-color: transparent; font-size: .82rem; }
.navi-footer-in > .menu-footer li a{ color: var(--kv-text); }
#go-to-top .go-to-top-button{
  background-color: var(--kv-main);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(31,169,124,.35);
}

/************************************
** 13. カテゴリ別カラー
**  アウトドア・子育て = グリーン / オレンジ
**  福祉・介護の現場   = ブルー / シアン
************************************/
body.category-outdoor, body.category-camp, body.category-kosodate,
body.categoryid-3, body.categoryid-5, body.categoryid-6,
.article.category-outdoor-post,
.article.category-camp-post,
.article.category-kosodate-post{
  --kv-main:      #35a853;
  --kv-main-dark: #1e7c39;
  --kv-accent:    #ff8a3d;
  --kv-tint:      #eaf7ec;
}
body.category-care, body.category-bihin, body.category-kaijo,
body.categoryid-4, body.categoryid-7, body.categoryid-8,
.article.category-care-post,
.article.category-bihin-post,
.article.category-kaijo-post{
  --kv-main:      #2f80ed;
  --kv-main-dark: #1a5fc0;
  --kv-accent:    #00a3c4;
  --kv-tint:      #e9f2fe;
}
.archive-title{
  font-family: var(--kv-font-round);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: .03em;
  border: none;
  padding: 0 0 .5em;
  border-bottom: 2px dotted var(--kv-line);
}

/************************************
** 14. レスポンシブ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .appeal .appeal-title{ font-size: 1.6rem; }
  .main, .sidebar{ padding: 26px; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  body[class*="fz-"]{ font-size: 16px; }
  body{ line-height: 1.9; }
  .main, .sidebar{
    border-radius: 0;
    box-shadow: none;
    padding: 20px 18px;
  }
  #content{ margin-top: 0; }
  .appeal .appeal-title{ font-size: 1.34rem; }
  .appeal .appeal-message{ font-size: .92rem; }
  .article h1.entry-title{ font-size: 1.34rem; }
  .article h2{ font-size: 1.16rem; padding: .65em .9em; margin: 2em 0 1em; }
  .article h3{ font-size: 1.06rem; }
  #header .site-name-text{ font-size: 1.5rem; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .appeal .appeal-title{ font-size: 1.2rem; }
  .entry-card-title{ font-size: .95rem; }
  .entry-card-content{ padding: 13px 14px 15px; }
}

/************************************
** 15. 微調整（ナビ白背景・余白・アピール）
************************************/
#navi, #navi .navi-in{ background-color: #ffffff !important; }
#navi .navi-in > ul > li > a{ padding: 0 14px; font-size: .92rem; white-space: nowrap; }
#navi .navi-in > ul{ display: flex; justify-content: center; flex-wrap: wrap; }
.appeal{ background-image: linear-gradient(120deg, #17a06f 0%, #1c9e92 48%, #3faa62 100%) !important; }
.appeal::before{ background: rgba(255,255,255,.10); }
.appeal::after{ background: rgba(255,255,255,.10); }
.appeal .appeal-message{ text-shadow: 0 1px 10px rgba(0,0,0,.18); }

/************************************
** 16. 検索フォーム・細部
************************************/
.wp-block-search__inside-wrapper{ gap: 8px; }
.wp-block-search__input{
  border-radius: 999px;
  border: 1px solid var(--kv-line);
  padding: .6em 1.2em;
  background: #fbfcfd;
}
.wp-block-search__button{
  font-family: var(--kv-font-round);
  border: none;
  border-radius: 999px;
  background: var(--kv-main);
  color: #fff;
  font-weight: 700;
  padding: .6em 1.4em;
  transition: filter .18s ease;
}
.wp-block-search__button:hover{ filter: brightness(1.08); color:#fff; }
.article figure.wp-block-table{ margin: 1.6em 0 2em; }
.article figure.wp-block-table table{ width: 100%; }
.article figure.wp-block-table th, .article figure.wp-block-table td{ padding: .7em .9em; }