@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（おうちの電気帳 / 配色B やさしいグリーン）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 配色B やさしいグリーン
** 色を変えるときはここだけ直す
************************************/
:root{
  --dk-main:#2E8B6A;      /* メイン（緑） */
  --dk-main-dark:#21694F; /* 濃い緑（文字・ホバー） */
  --dk-acc:#F28C28;       /* アクセント（オレンジ） */
  --dk-soft:#ECF6F1;      /* 淡い緑の背景 */
  --dk-line:#D5E8DF;      /* 枠線 */
  --dk-ink:#1F2A37;       /* 本文の文字 */
  --dk-sub:#5B6675;       /* 補足の文字 */
}

/************************************
** 全体
************************************/
body{ color:var(--dk-ink); background:#fff; }
a{ color:var(--dk-main-dark); }
a:hover{ color:var(--dk-acc); }

/************************************
** ヘッダー
************************************/
.header-container, .header{ background:#fff; }
.site-name-text{ color:var(--dk-ink); font-weight:700; letter-spacing:.04em; }
/* サイト名の前のコンセントマーク（Font Awesome の plug） */
.site-name-text::before{
  content:"\f1e6"; font-family:"Font Awesome 5 Free", FontAwesome; font-weight:900;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5em; height:1.5em; margin-right:.4em; vertical-align:.05em;
  border-radius:.35em; background:var(--dk-main); color:#fff; font-size:.75em;
}
.tagline{ color:var(--dk-sub); }

/* グローバルメニュー */
.navi, .navi-in > ul, .navi-in .sub-menu{ background:var(--dk-main); }
.navi-in a{ color:#fff; }
.navi-in a:hover{ background:var(--dk-main-dark); color:#fff; }
.navi-in > ul li{ height:50px; }

/************************************
** 記事
************************************/
.entry-title, .archive-title{ color:var(--dk-ink); }
.article h2{
  background:var(--dk-soft); color:var(--dk-ink);
  border-left:6px solid var(--dk-main); border-radius:0;
  padding:.7em .9em;
}
.article h3{
  border:none; border-bottom:2px solid var(--dk-main);
  padding:.4em .2em; border-radius:0;
}
.article h4{ border-top:none; border-bottom:1px dashed var(--dk-main); padding:.3em 0; }
.article h5, .article h6{ border-bottom:none; }
.article strong{ background:linear-gradient(transparent 62%, #FCE3C9 62%); }

/* 目次 */
.toc{ border:1px solid var(--dk-line); background:#fff; border-radius:8px; }
.toc-title{ color:var(--dk-main-dark); font-weight:700; }

/* カテゴリラベル */
.cat-label{ background:var(--dk-main); border:none; border-radius:3px; }
.cat-link{ background:var(--dk-main); }
.tag-link{ border-color:var(--dk-line); color:var(--dk-main-dark); }

/* 記事一覧カード */
.entry-card-wrap{ border-radius:8px; }
.entry-card-wrap:hover{ background:var(--dk-soft); }
.entry-card-title{ color:var(--dk-ink); }

/* ボタン・ページ送り */
.pagination .current{ background:var(--dk-main); border-color:var(--dk-main); color:#fff; }
.pagination-next-link{ border-color:var(--dk-main); color:var(--dk-main-dark); }
.go-to-top-button{ background:var(--dk-main); color:#fff; border-radius:50%; }

/************************************
** サイドバー
************************************/
.sidebar{ background:transparent; }
.sidebar h2, .sidebar h3{
  background:none; color:var(--dk-ink);
  border-left:4px solid var(--dk-acc); border-radius:0;
  padding:.2em .6em; margin-bottom:.8em;
}
.widget-entry-card-pv{ background:var(--dk-acc); }

/************************************
** フッター
************************************/
.footer{ background:var(--dk-main); color:#fff; }
.footer a, .navi-footer-in a{ color:#fff; }
.navi-footer-in a:hover{ background:var(--dk-main-dark); color:#fff; }
.copyright{ color:#fff; }

/************************************
** トップページ用パーツ（固定ページ「ホーム」で使用）
************************************/
.dk-hero{ background:var(--dk-soft); border-radius:12px; padding:28px 24px; margin-bottom:28px; }
.dk-hero-badge{ display:inline-block; background:var(--dk-acc); color:#fff; font-size:.8em; padding:2px 12px; border-radius:20px; margin-bottom:8px; }
.dk-hero-title{ font-size:1.5em; font-weight:700; color:var(--dk-ink); margin:0 0 14px; line-height:1.4; }
.dk-hero-lead{ color:var(--dk-sub); margin:0 0 14px; }
.dk-hero .search-box{ max-width:460px; margin:0; }
.dk-hero .search-edit{ border-radius:24px; border:1px solid var(--dk-line); background:#fff; }

.dk-sec-title{ font-size:1.15em; font-weight:700; border-left:5px solid var(--dk-acc); padding-left:.6em; margin:0 0 14px; }
.dk-chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 32px; padding:0; list-style:none; }
.dk-chips li{ margin:0; padding:0; }
.dk-chips a{
  display:flex; align-items:center; gap:8px; height:100%;
  padding:12px 14px; border:1px solid var(--dk-line); border-radius:10px;
  background:#fff; color:var(--dk-ink); text-decoration:none; font-weight:600; line-height:1.4;
}
.dk-chips a:hover{ border-color:var(--dk-main); background:var(--dk-soft); color:var(--dk-main-dark); }
.dk-chips .fa, .dk-chips .fas{ color:var(--dk-main); font-size:1.2em; width:1.3em; text-align:center; }

.dk-cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:0 0 32px; padding:0; list-style:none; }
.dk-cats li{ margin:0; padding:0; }
.dk-cats a{ display:block; padding:16px; border-radius:10px; background:var(--dk-soft); color:var(--dk-ink); text-decoration:none; height:100%; }
.dk-cats a:hover{ background:#DDEFE6; }
.dk-cats b{ display:block; color:var(--dk-main-dark); margin-bottom:4px; }
.dk-cats span{ font-size:.85em; color:var(--dk-sub); }

/* 固定ページ「ホーム」のタイトル・日付などは表示しない */
.home.page .entry-title, .home.page .date-tags, .home.page .sns-share, .home.page .sns-follow, .home.page .author-info{ display:none; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .navi-in > ul li{ height:auto; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .dk-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .dk-hero{ padding:20px 16px; }
  .dk-hero-title{ font-size:1.25em; }
}