@charset "UTF-8";

/*!
Theme Name: Cocoon Child Hibilabo
Description: 日々ラボ（hibi-labo.net）用の Cocoon 子テーマ。セージグリーン×方眼ノートのデザイン。
Theme URI: https://hibi-labo.net/
Author: 日々ラボ
Template: cocoon-master
Version: 1.0.4
*/

/*
 * 使い方のメモ
 * - Cocoon設定 → スキン は「スキンを使用しない」にする（スキンと競合するため）
 * - ヘッダーのレイアウトは「トップメニュー（右寄せ）」、インデックスのカードタイプは「縦型カード3列」を想定
 * - 色を変えたいときは、下の :root の値だけ変える
 */

/************************************
** 色と文字
************************************/
:root {
  --hibi-paper: #F6F4EC;        /* 背景（方眼ノートの紙） */
  --hibi-grid: rgba(110, 140, 110, 0.10); /* 方眼の線 */
  --hibi-card: #FFFFFF;         /* カード */
  --hibi-line: #E2E4D8;         /* 枠線 */
  --hibi-forest: #2E4B3A;       /* メインの緑（ボタン・見出し） */
  --hibi-forest-dark: #1E3527;
  --hibi-sage: #6F8E6E;         /* ロゴの線・アイコン */
  --hibi-sage-light: #E4ECE1;   /* 薄い緑の面 */
  --hibi-sage-pale: #EFF3EC;
  --hibi-tape: rgba(235, 200, 103, 0.9); /* マスキングテープ（マスタード） */
  --hibi-tape-text: #3B3A20;
  /* カテゴリごとのテープ色（2026-10-18 決定。赤は「注意」用なので使わない） */
  --hibi-cat-housework: #EDC3A0;      --hibi-cat-housework-text: #4A2E1A; /* 家事ラボ：アプリコット */
  --hibi-cat-thinking: #AFC3CF;       --hibi-cat-thinking-text: #1F3340;  /* 考えるラボ：くすみブルー */
  --hibi-cat-systems: #AED6CB;        --hibi-cat-systems-text: #1E3A33;   /* 仕組みのラボ：ミント */
  --hibi-cat-making: #D9B26A;         --hibi-cat-making-text: #3B2E14;    /* つくるラボ：黄土 */
  --hibi-cat-notes: #C9BEDA;          --hibi-cat-notes-text: #2F2540;     /* わたしのノート：くすみラベンダー */
  --hibi-brown: #3E3428;        /* ロゴ文字 */
  --hibi-ink: #2B352D;          /* 本文 */
  --hibi-muted: #5F6B61;        /* 補足の文字 */
  --hibi-alert: #A1452E;        /* 「検討中」などのスタンプ */

  --hibi-font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --hibi-font-round: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  --hibi-font-hand: 'Klee One', 'Zen Maru Gothic', cursive;
  --hibi-font-mono: 'DM Mono', ui-monospace, Menlo, monospace;
}

body {
  background-color: var(--hibi-paper);
  background-image:
    linear-gradient(var(--hibi-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hibi-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--hibi-ink);
  font-family: var(--hibi-font-body);
  line-height: 1.85;
}

a { color: var(--hibi-forest); }
a:hover { color: var(--hibi-forest-dark); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--hibi-forest); outline-offset: 3px; }

/************************************
** ヘッダー
************************************/
.header-container,
#header,
.header {
  background: rgba(246, 244, 236, 0.94);
}
.header-container {
  border-bottom: 1px solid var(--hibi-line);
}

/* ロゴ（画像を設定した場合も、文字の場合も） */
.logo-header .site-name-text {
  font-family: var(--hibi-font-round);
  font-weight: 700;
  color: var(--hibi-brown);
  letter-spacing: 0.06em;
}
.logo-header img { max-height: 64px; width: auto; }

/* キャッチフレーズ */
.tagline {
  font-family: var(--hibi-font-round);
  color: #5A4E40;
  letter-spacing: 0.06em;
  font-size: 12px;
}

/* グローバルナビ：アイコン＋日本語＋英語（メニューの「説明」欄に英語を入れる） */
#navi .navi-in > ul > li > a {
  padding: 4px 18px;
  border-left: 1px solid #DDE0D3;
  color: var(--hibi-forest);
  height: auto;
}
#navi .navi-in > ul > li:last-child > a { border-right: 1px solid #DDE0D3; }
#navi .navi-in > ul > li > a:hover { background: var(--hibi-sage-pale); }
#navi .caption-wrap { display: flex; flex-direction: column; align-items: center; line-height: 1.35; }
#navi .item-label {
  font-family: var(--hibi-font-round);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
#navi .item-label .fa { font-size: 22px; color: var(--hibi-sage); }
#navi .item-description {
  font-family: var(--hibi-font-mono);
  font-size: 10px;
  color: #6B776C;
  opacity: 1;
}
#navi .navi-in > ul > li.current-menu-item > a,
#navi .navi-in > ul > li.current-post-ancestor > a,
#navi .navi-in > ul > li.current-category-ancestor > a {
  background: var(--hibi-sage-light);
}

/************************************
** 全体のレイアウト
************************************/
.main,
.sidebar {
  background: transparent;
  border: 0;
}
.home .main,
.archive .main {
  padding-left: 16px;
  padding-right: 16px;
}
@media screen and (min-width: 835px) {
  .home .main,
  .archive .main {
    padding-left: 0;
    padding-right: 0;
  }
}

/************************************
** 記事カード（一覧・縦型カード3列）
************************************/
.entry-card-wrap {
  background: var(--hibi-card);
  border: 1px solid var(--hibi-line);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.entry-card-wrap:hover {
  background: var(--hibi-card);
  box-shadow: 0 12px 24px -12px rgba(35, 59, 45, 0.28);
  transform: translateY(-2px);
}
.ect-vertical-card .entry-card-wrap { padding: 0; }
.entry-card-thumb { margin: 0; }
.entry-card-thumb img { border-radius: 0; }
.entry-card-content { padding: 16px 20px 18px; }
.entry-card-title {
  font-family: var(--hibi-font-round);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  color: var(--hibi-ink);
}
.entry-card-snippet {
  font-size: 13px;
  line-height: 1.8;
  color: #4D5A50;
}
.entry-card-meta,
.entry-date,
.post-date,
.post-update {
  font-family: var(--hibi-font-mono);
  font-size: 12px;
  color: #6B776C;
}

/* カテゴリラベル＝マスキングテープ */
.cat-label {
  top: 12px;
  left: 10px;
  padding: 2px 12px;
  border: 0;
  border-radius: 0;
  background: var(--hibi-tape);
  color: var(--hibi-tape-text);
  font-family: var(--hibi-font-round);
  font-weight: 700;
  font-size: 12px;
  transform: rotate(-3deg);
  opacity: 1;
}


/* カテゴリごとの色（一覧のラベル .cat-label-ID と記事ページの .cat-link-ID） */
.cat-label.cat-label-2, .cat-link.cat-link-2 { background: var(--hibi-cat-housework); color: var(--hibi-cat-housework-text); }
.cat-label.cat-label-3, .cat-link.cat-link-3 { background: var(--hibi-cat-thinking); color: var(--hibi-cat-thinking-text); }
.cat-label.cat-label-4, .cat-link.cat-link-4 { background: var(--hibi-cat-systems); color: var(--hibi-cat-systems-text); }
.cat-label.cat-label-5, .cat-link.cat-link-5 { background: var(--hibi-cat-making); color: var(--hibi-cat-making-text); }
.cat-label.cat-label-6, .cat-link.cat-link-6 { background: var(--hibi-cat-notes); color: var(--hibi-cat-notes-text); }

/************************************
** 記事ページ
************************************/
.single .main,
.page .main {
  background: var(--hibi-card);
  border: 1px solid var(--hibi-line);
  border-radius: 14px;
}
.entry-title,
.article h1 {
  font-family: var(--hibi-font-round);
  font-weight: 700;
  color: var(--hibi-forest);
  line-height: 1.5;
}
.article h2 {
  font-family: var(--hibi-font-round);
  font-weight: 700;
  font-size: 22px;
  color: var(--hibi-forest);
  background: var(--hibi-sage-pale);
  border: 0;
  border-radius: 8px;
  padding: 14px 18px;
}
.article h3 {
  font-family: var(--hibi-font-round);
  font-weight: 700;
  font-size: 19px;
  color: var(--hibi-forest);
  border: 0;
  border-bottom: 2px solid var(--hibi-sage-light);
  padding: 4px 2px 8px;
}
.article h4 {
  font-family: var(--hibi-font-round);
  color: var(--hibi-forest);
  border: 0;
  padding: 0;
}
.cat-link {
  background: var(--hibi-tape);
  color: var(--hibi-tape-text);
  border-radius: 0;
  transform: rotate(-2deg);
}
.tag-link {
  border-color: var(--hibi-line);
  color: var(--hibi-muted);
}

/* 記事内で使う「観察メモ」ボックス（記事のHTMLで <div class="hibi-memo"> を使う） */
.hibi-memo {
  position: relative;
  margin: 2em 0;
  padding: 28px 24px 20px;
  background: var(--hibi-paper);
  border: 1px solid var(--hibi-line);
  border-radius: 8px;
}
.hibi-memo::before {
  content: "観察メモ";
  position: absolute;
  top: -12px;
  left: 20px;
  padding: 2px 12px;
  background: var(--hibi-tape);
  color: var(--hibi-tape-text);
  font-family: var(--hibi-font-round);
  font-weight: 700;
  font-size: 13px;
  transform: rotate(-2deg);
}
.hibi-memo dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.hibi-memo dt { font-weight: 700; color: var(--hibi-forest); }
.hibi-memo dd { margin: 0; }

/************************************
** トップページの部品（ウィジェットの「カスタムHTML」に貼るHTML用）
************************************/
.hibi-section { margin: 0 0 56px; }
.hibi-section h2 {
  font-family: var(--hibi-font-round);
  font-weight: 700;
  color: var(--hibi-forest);
}

/* ヒーロー */
.hibi-hero { display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; }
.hibi-hero-text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.hibi-hero-eyebrow { margin: 0; font-family: var(--hibi-font-hand); font-size: 20px; color: #4D5E50; }
.hibi-hero-title {
  margin: 0;
  font-family: var(--hibi-font-round);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.45;
  color: var(--hibi-forest);
  text-wrap: balance;
}
.hibi-hero-lead { margin: 0; color: #4D5A50; }
.hibi-hero-photo { flex: 1.3 1 340px; min-width: 0; border-radius: 14px; overflow: hidden; background: var(--hibi-sage-light); min-height: 260px; }
.hibi-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* プロフィール（ノート風） */
.hibi-note {
  flex: 1 1 260px;
  min-width: 0;
  position: relative;
  box-sizing: border-box;
  padding: 32px 24px 24px 44px;
  background: var(--hibi-card) linear-gradient(#EEF0E8 1px, transparent 1px) 0 18px / 100% 30px;
  border: 1px solid var(--hibi-line);
  border-radius: 6px;
  box-shadow: 0 8px 20px -10px rgba(35, 59, 45, 0.25);
  font-family: var(--hibi-font-hand);
}
.hibi-note::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 36px;
  width: 72px;
  height: 22px;
  background: var(--hibi-tape);
  transform: rotate(4deg);
}
.hibi-note::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 16px;
  width: 10px;
  background: radial-gradient(circle, #E6E8DE 4.5px, transparent 5px) 0 0 / 10px 36px repeat-y;
}
.hibi-note p { margin: 0; }
.hibi-note-hello { font-size: 15px; color: #4D5E50; }
.hibi-note-name { font-weight: 600; font-size: 24px; color: var(--hibi-forest); margin-bottom: 12px !important; }
.hibi-note-body { font-size: 14px; line-height: 2.1; color: #3A463D; }
.hibi-note-sign { margin-top: 16px !important; font-size: 15px; color: var(--hibi-forest); text-align: right; }

/* ボタン */
.hibi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--hibi-forest);
  color: #FFFFFF !important;
  font-family: var(--hibi-font-round);
  font-weight: 700;
  text-decoration: none !important;
}
.hibi-btn:hover { background: var(--hibi-forest-dark); }
.hibi-btn-sub {
  background: var(--hibi-sage-light);
  color: var(--hibi-forest) !important;
  border: 1px solid #A9BFA6;
  border-radius: 8px;
}
.hibi-btn-sub:hover { background: #D7E3D3; }

/* マスキングテープの見出しラベル */
.hibi-tape {
  position: absolute;
  top: -13px;
  left: 28px;
  padding: 3px 14px;
  background: var(--hibi-tape);
  color: var(--hibi-tape-text);
  font-family: var(--hibi-font-round);
  font-weight: 700;
  font-size: 13px;
  transform: rotate(-2deg);
}

/* 今月の定点観測 */
.hibi-feature {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  padding: 36px 32px 28px;
  background: var(--hibi-card);
  border: 1px solid var(--hibi-line);
  border-radius: 14px;
}
.hibi-feature-body { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hibi-feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--hibi-muted); }
.hibi-feature-no { font-family: var(--hibi-font-mono); color: var(--hibi-alert); }
.hibi-stamp {
  display: inline-block;
  padding: 0 8px;
  border: 1.5px solid var(--hibi-alert);
  border-radius: 4px;
  color: var(--hibi-alert);
  font-weight: 700;
  transform: rotate(-1.5deg);
}
.hibi-feature-title { margin: 0 !important; padding: 0 !important; background: none !important; font-size: 22px; line-height: 1.5; text-wrap: balance; }
.hibi-feature-body p { margin: 0; font-size: 14px; color: #4D5A50; }
.hibi-feature-side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.hibi-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
  padding: 12px 16px;
  background: var(--hibi-sage-pale);
  border-radius: 8px;
  font-size: 13px;
}
.hibi-facts dt { color: var(--hibi-muted); }
.hibi-facts dd { margin: 0; font-family: var(--hibi-font-mono); color: var(--hibi-forest); }

/* 「最新の実験メモ」見出し（記事一覧の上に置く） */
.hibi-list-head { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.hibi-list-head h2 { margin: 0; padding: 0; background: none; border: 0; font-size: 24px; white-space: nowrap; }
.hibi-list-head::after { content: ""; flex: 1; height: 1px; background: #C9D3C4; }

/* カテゴリから探す＋今週の実験テーマ */
.hibi-bottom { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
.hibi-cats { flex: 999 1 520px; min-width: 0; padding: 28px; background: #E9EFE6; border-radius: 14px; }
.hibi-cats h2 { margin: 0 0 20px; padding: 0; background: none; border: 0; font-size: 20px; }
.hibi-cats ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hibi-cats a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--hibi-forest); }
.hibi-cats .fa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--hibi-sage);
  font-size: 28px;
}
.hibi-cats strong { font-family: var(--hibi-font-round); font-size: 14px; }
.hibi-cats small { font-size: 11px; line-height: 1.5; color: var(--hibi-muted); }

.hibi-theme {
  flex: 1 1 280px;
  min-width: 0;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 24px 24px;
  background: var(--hibi-card);
  border: 1px solid var(--hibi-line);
  border-radius: 6px;
}
.hibi-theme::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 28px;
  width: 60px;
  height: 20px;
  background: var(--hibi-tape);
  transform: rotate(5deg);
}
.hibi-theme-label { margin: 0; font-family: var(--hibi-font-round); font-weight: 700; font-size: 13px; color: #9A6B10; }
.hibi-theme h3 { margin: 0; padding: 0; border: 0; font-family: var(--hibi-font-round); font-size: 18px; line-height: 1.6; color: var(--hibi-forest); }
.hibi-theme p { margin: 0; font-size: 13px; color: #4D5A50; }
.hibi-theme a { margin-top: auto; font-size: 13px; font-weight: 700; }

/* 収益化ボックス（テンプレート配布・実験道具・メール通信） */
.hibi-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.hibi-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 24px 24px;
  background: var(--hibi-card);
  border: 1px solid var(--hibi-line);
  border-radius: 14px;
}
.hibi-box h3 { margin: 0; padding: 0; border: 0; font-family: var(--hibi-font-round); font-size: 18px; color: var(--hibi-forest); }
.hibi-box p { margin: 0; font-size: 13px; color: #4D5A50; }
.hibi-box .hibi-btn { margin-top: auto; }
.hibi-tools { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.hibi-tools li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--hibi-paper); border-radius: 6px; }
.hibi-tools small { color: var(--hibi-muted); font-size: 12px; }

/************************************
** フッター
************************************/
.footer {
  background: rgba(239, 243, 236, 0.85);
  border-top: 1px solid var(--hibi-line);
  color: var(--hibi-muted);
}
.footer a { color: var(--hibi-forest); white-space: nowrap; }
.footer .site-name-text { font-family: var(--hibi-font-round); color: var(--hibi-brown); }
.hibi-pr-note { font-size: 12px; color: var(--hibi-muted); }
/* フッターのウィジェットが左だけのときは、横幅いっぱい・中央寄せにする（中・右にウィジェットを置けば3列に戻る） */
.footer-center:not(:has(.widget)),
.footer-right:not(:has(.widget)) { display: none; }
.footer-widgets:not(:has(.footer-center .widget)):not(:has(.footer-right .widget)) .footer-left {
  width: 100%;
  float: none;
  text-align: center;
}
.footer-left .hibi-pr-note { margin-bottom: 4px; }
.footer-widgets .custom-html-widget p { font-size: 13px; }
.footer-widgets .custom-html-widget .hibi-pr-note { font-size: 12px; }

/************************************
** スマホ
************************************/
@media screen and (max-width: 834px) {
  .hibi-feature { padding: 32px 20px 24px; }
  .hibi-note { padding-left: 40px; }
  .hibi-cats { padding: 24px 20px; }
}
@media screen and (max-width: 480px) {
  .entry-card-title { font-size: 16px; }
  .hibi-hero-photo { min-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-card-wrap { transition: none; }
  .entry-card-wrap:hover { transform: none; }
}