@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    2.0.0
*/

/* =========================================================
   いいログ カスタムスタイル（2026 リニューアル／ゼロベース再構築）

   旧・複数チュートリアル由来の混在CSS（グレー緑・ライム緑・水色・
   青が乱立）を全て破棄し、サムネイルと同じブランドパレットへ統一。

   Brand palette
     深緑  #2F5D50  key   … 見出し・グローバルナビ・ラベル
     藍    #3E5C76  link  … リンク・アクセント
     生成り #F7F5F0  bg    … ページ背景（白面を締めて温かみを出す）
     墨    #2B3A33  text  … 本文・見出し文字
     温灰  #6B7A72  muted … 日付・メタ・補助テキスト
   ========================================================= */

:root {
  --c-green:   #2F5D50;
  --c-green-d: #244a40;
  --c-indigo:  #3E5C76;
  --c-cream:   #F7F5F0;
  --c-ink:     #2B3A33;
  --c-muted:   #6B7A72;
  --c-line:    #E7E3DA;
  --c-card:    #FFFFFF;
  --c-soft:    #FBFAF7; /* ほんのり色づく白（ボックス・目次） */
}

/* ---------- 1. 全体トーン ---------- */
body.page-body { background-color: var(--c-cream); color: var(--c-ink); }
.article, .entry-content { line-height: 1.9; }
a { color: var(--c-indigo); }
a:hover { color: var(--c-green); }

/* Cocoon既定では header / main / sidebar / footer の4つの大きな帯が
   すべて白。これが「白すぎ」の主因。これらを cream（ページ背景）に
   馴染ませ、白は "意味のあるカード" だけに絞る。 */
.header-container,
.main,
.sidebar,
.footer { background-color: transparent; }

/* ヘッダー：帯状の水彩イラストを背景に敷く。上に薄いcreamのかすみを
   重ね、タイトル文字は白いにじみ影で浮かせて可読性を確保する。 */
.header-container {
  background-image:
    linear-gradient(rgba(247, 245, 240, .18), rgba(247, 245, 240, .46)),
    url("images/header-bg.png");
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--c-line);
}
.header-in { min-height: 300px; padding: 1.4em 1em; }
.site-name-text,
.site-name-text-link,
.tagline {
  color: var(--c-ink);
  text-shadow: 0 1px 10px rgba(255, 255, 255, .95), 0 0 5px rgba(255, 255, 255, .9);
}
.site-name-text { font-weight: 700; }
@media screen and (max-width: 834px) {
  .header-in { min-height: 190px; padding: 1em .8em; }
}

/* 単一記事・固定ページの本文は白カード化して読みやすく
   （一覧ページの .main は透明のまま → cream 地に記事カードが映える） */
.single .main,
.page .main {
  background-color: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
@media (max-width: 834px) {
  .single .main,
  .page .main { border-radius: 10px; }
}

/* サイドバーのウィジェットは白カード */
.sidebar .widget {
  background-color: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 1.2em 1.2em;
  margin-bottom: 1.6em;
}

/* ---------- 2. グローバルナビ ---------- */
#navi { background-color: var(--c-green); }
#navi .navi-in > ul li a {
  color: #fff;
  font-weight: 600;
  line-height: 1.3;
  padding: .9em 1.2em;
}
#navi .navi-in > ul li a:hover { background-color: var(--c-green-d); color: #fff; }
#navi .navi-in > ul > .menu-item-has-children > a::after { top: .8em; }
/* スマホ：メニューを横スクロール可能に */
@media screen and (max-width: 1030px) {
  .navi-in > .menu-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  #navi .navi-in > ul li a { font-size: .85em; padding: 1em 1.1em; }
  #navi .navi-in > ul > .menu-item-has-children > a::after { display: none; }
}

/* ---------- 3. 本文見出し h2〜h4 ---------- */
.article h2 {
  margin: 2.6em 0 1.2em;
  padding: .7em 1em;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--c-ink);
  background-color: #eef2f0;
  border-left: 8px solid var(--c-green);
  border-radius: 4px;
}
.article h2::before { content: none; background-image: none; }
.article h3 {
  margin: 2.2em 0 1em;
  padding: .3em 0 .3em .8em;
  font-size: 1.28rem;
  line-height: 1.55;
  color: var(--c-ink);
  border: none;
  border-left: 5px solid var(--c-green);
}
.article h4 {
  margin: 1.8em 0 1em;
  padding-bottom: .2em;
  font-size: 1.12rem;
  color: var(--c-ink);
  border-bottom: 2px dotted var(--c-line);
}
@media (max-width: 480px) {
  .article h2 { font-size: 1.25rem; padding: .6em .8em; }
  .article h3 { font-size: 1.12rem; }
  .article h4 { font-size: 1.03rem; }
}

/* ---------- 4. 記事一覧（1カラム・横型カード） ---------- */
/* サムネ左＋タイトル/抜粋右の横型カードを縦に積む。
   ・1画面に複数記事が並ぶ → 読者が興味のある記事を見つけやすい（回遊↑・離脱↓）
   ・抜粋を3行まで見せる → 内容が伝わりクリック動機になる（が全文は見せず続きを読ませる）
   ・カテゴリラベル＋日付 → ナビゲーションと鮮度の手がかり
   ・1カラムなので行ごとの高さズレが原理的に起きない
   （Cocoonの .list は既定で flex-column＝縦積み。列幅の指定は不要） */
.list { row-gap: 1.5em; }
.entry-card-wrap {
  display: block;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background-color: var(--c-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.entry-card-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
  background-color: var(--c-card);
}
/* 記事内部を横並び（サムネ左／本文右）に。高さは自動で揃う */
.entry-card { display: flex; align-items: stretch; }
.entry-card-thumb {
  width: 280px;
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
}
.entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.entry-card-content {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 1.1em 1.4em;
  display: flex;
  flex-direction: column;
}
.entry-card-title {
  margin: 0 0 .5em;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
  color: var(--c-ink);
}
.entry-card-snippet {
  margin: 0;
  padding: 0;
  border: none;
  font-size: .92rem;
  line-height: 1.75;
  text-align: left;
  color: var(--c-muted);
  /* 抜粋は最大3行でクランプ（読ませすぎず、続きを読ませる） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 日付などのメタ情報はカードの一番下に固定 */
.entry-card-meta { margin-top: auto; padding-top: .7em; }
.entry-card-meta,
.entry-card-wrap .post-date,
.entry-card-wrap .post-update { color: var(--c-muted); font-size: .8rem; }

/* モバイル：サムネを上に積む縦型カードへ切り替え */
@media screen and (max-width: 600px) {
  .entry-card { flex-direction: column; }
  .entry-card-thumb { width: 100%; }
  .entry-card-thumb img { aspect-ratio: 16 / 9; height: auto; }
  .entry-card-content { padding: 1em 1.1em 1.1em; }
  .entry-card-title { font-size: 1.1rem; }
}

/* カテゴリラベル */
.cat-label, .eye-catch .cat-label {
  margin: .5em;
  padding: .15em .7em;
  border: none;
  border-radius: 6px;
  font-size: .7em;
  color: #fff;
  background-color: var(--c-green);
}

/* ---------- 5. 目次 ---------- */
.toc {
  padding: 1.2em 1.4em;
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-green);
  border-radius: 6px;
  box-shadow: none;
  background-color: var(--c-soft);
}
.toc-title { color: var(--c-green); font-weight: 700; }
.toc-content ol li { border-bottom: 1px dashed var(--c-line); list-style: none; }
.toc-content ol li a { color: var(--c-ink); }
.toc-content ol li a:hover { color: var(--c-green); }

/* ---------- 6. ブログカード（本文内リンク） ---------- */
.blogcard {
  border: 1px solid var(--c-line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.blogcard:hover { background-color: var(--c-soft); }
.blogcard-title { color: var(--c-ink); font-weight: 700; }
.blogcard-snippet { color: var(--c-muted); }

/* ---------- 7. 各種ボックス ---------- */
.blank-box {
  padding: 1.2em 1.4em;
  border: 1px dashed var(--c-green);
  border-radius: 8px;
  background-color: var(--c-soft);
  line-height: 1.9;
}
.secondary-box { background-color: #f4f4f2; }

/* ---------- 8. サイドバー プロフィール（シンプル・オンブランド） ---------- */
.sidebar .author-box { border: none; text-align: center; }
.sidebar .author-thumb img { border-radius: 50%; }
.sidebar .author-name a { color: var(--c-ink); font-weight: 700; text-decoration: none; }
.sidebar .author-description {
  text-align: justify;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--c-ink);
}

/* ---------- 9. その他 ---------- */
.comment-notes { display: none; } /* 「メールアドレスが公開されることは〜」を非表示 */