@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/************************************
** Codex: ブログ収益化・読みやすさ改善CSS
** 2026-05-08 追加
************************************/

/* 全体：白基調で清潔感のある背景と読みやすい文字 */
body {
  background: #f7f9fb;
  color: #333;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0;
}

/* メイン本文：余白を広めにして読みやすく */
.main,
.content,
.article {
  background: #fff;
}

.entry-content {
  font-size: 16px;
  line-height: 1.95;
}

.entry-content p {
  margin: 0 0 1.6em;
}

/* 記事タイトル */
.entry-title {
  color: #223344;
  font-size: 1.65rem;
  line-height: 1.45;
  margin-bottom: 0.8em;
}

/* 見出し：H2は淡いブルーで区切りを明確に */
.entry-content h2 {
  margin: 2.8em 0 1.1em;
  padding: 0.75em 0.9em;
  border-left: 5px solid #7db7d8;
  background: #f1f8fb;
  color: #223344;
  font-size: 1.35rem;
  line-height: 1.5;
}

/* 見出し：H3は控えめな下線 */
.entry-content h3 {
  margin: 2.2em 0 1em;
  padding-bottom: 0.45em;
  border-bottom: 2px solid #d7eaf2;
  color: #2d4858;
  font-size: 1.18rem;
}

/* リンク色 */
a {
  color: #2f7fa8;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: #23627f;
}

/* 記事一覧カード：トップページ・関連記事を見やすく */
.a-wrap,
.entry-card-wrap,
.related-entry-card-wrap {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(25, 45, 65, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.a-wrap:hover,
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(25, 45, 65, 0.11);
}

.entry-card-title,
.related-entry-card-title {
  color: #223344;
  font-weight: 700;
  line-height: 1.55;
}

.entry-card-snippet,
.related-entry-card-snippet {
  color: #667;
  line-height: 1.7;
}

/* カテゴリラベル */
.cat-label {
  background: #e8f5ef;
  color: #2f6f58;
  border: none;
  border-radius: 4px;
  padding: 0.25em 0.55em;
}

/* 目次 */
.toc {
  border: 1px solid #dcebf1;
  border-radius: 8px;
  background: #fbfdfe;
  padding: 1.1em;
}

.toc-title {
  color: #223344;
  font-weight: 700;
}

/* ボタン */
.btn,
.wp-block-button__link,
.more-link {
  border-radius: 6px;
  background: #4f9fc4;
  color: #fff;
  padding: 0.75em 1.1em;
  font-weight: 700;
}

.btn:hover,
.wp-block-button__link:hover,
.more-link:hover {
  background: #3b87aa;
  color: #fff;
}

/* サイドバー：情報を整理して信頼感を出す */
.sidebar {
  font-size: 15px;
}

.sidebar .widget {
  margin-bottom: 1.6em;
  padding: 1.1em;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(25, 45, 65, 0.06);
}

.sidebar h3,
.widget-title {
  padding-bottom: 0.55em;
  border-bottom: 2px solid #d7eaf2;
  color: #223344;
  font-size: 1.05rem;
}

/* フッター */
.footer {
  background: #eef5f8;
  color: #334;
}

.footer a {
  color: #2f6f8f;
}

/* 広告エリア：本文と明確に分け、自然な余白を確保 */
.ad-area,
.google-auto-placed,
.adsbygoogle {
  margin: 1.8em auto;
  text-align: center;
}

.ad-label,
.sponsor-label {
  display: block;
  margin-bottom: 0.45em;
  color: #888;
  font-size: 12px;
  text-align: center;
}

/* 引用 */
blockquote {
  border-left: 4px solid #9bc7d8;
  background: #f6fafc;
  color: #445;
  padding: 1em 1.2em;
}

/* スマホ優先の調整 */
@media screen and (max-width: 834px) {
  body {
    font-size: 16px;
    line-height: 1.9;
  }

  .content,
  .main,
  .article {
    padding-left: 14px;
    padding-right: 14px;
  }

  .entry-title {
    font-size: 1.42rem;
    line-height: 1.45;
  }

  .entry-content h2 {
    font-size: 1.22rem;
    margin-top: 2.4em;
    padding: 0.7em 0.8em;
  }

  .entry-content h3 {
    font-size: 1.08rem;
  }

  .a-wrap,
  .entry-card-wrap,
  .related-entry-card-wrap {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(25, 45, 65, 0.07);
  }

  .sidebar .widget {
    box-shadow: none;
    border: 1px solid #e6eef2;
  }

  .ad-area,
  .google-auto-placed,
  .adsbygoogle {
    margin: 1.6em auto;
  }
}

/* 小さいスマホ：ボタンを押しやすく */
@media screen and (max-width: 480px) {
  .entry-title {
    font-size: 1.32rem;
  }

  .entry-content p {
    margin-bottom: 1.45em;
  }

  .btn,
  .wp-block-button__link,
  .more-link {
    display: block;
    width: 100%;
    text-align: center;
  }
}


/************************************
** Codex: 回遊しやすいブログデザイン強化CSS
** 2026-05-08 追加
************************************/

/* サイト全体：背景に薄い色を入れて、本文カードを読みやすく見せる */
body {
  background: linear-gradient(180deg, #f4f9fb 0%, #f8faf7 340px, #f7f9fb 100%);
  color: #2f3a43;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

/* ヘッダー：最初に何のブログか伝わるように余白と説明文を追加 */
.header,
.header-container,
#header {
  background: transparent;
}

.header-in,
.logo-header {
  padding-top: 28px;
  padding-bottom: 20px;
}

.site-name-text,
.logo-text,
.header .site-name a,
.header .logo a {
  color: #203545;
  font-weight: 800;
  letter-spacing: 0;
}

.header::after,
#header::after {
  content: "暮らし・仕事・学びを、あとで読み返せる形で整理するブログ";
  display: block;
  max-width: 980px;
  margin: -8px auto 18px;
  padding: 0 18px;
  color: #627381;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

/* グローバルメニュー：固定ページへの導線を押しやすく */
.navi,
#navi,
.navi-in,
.menu-header-container {
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #e6eff3;
  border-bottom: 1px solid #dfeaf0;
}

.navi-in > ul,
#navi .navi-in > ul,
.menu-header {
  justify-content: center;
  gap: 4px;
}

.navi-in a,
#navi a,
.menu-header a {
  color: #2f4858;
  font-weight: 700;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}

.navi-in a:hover,
#navi a:hover,
.menu-header a:hover {
  background: #e8f5ef;
  color: #25624d;
}

/* レイアウト：メインとサイドバーに余白を作る */
.content-in,
.wrap {
  gap: 28px;
}

.main {
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(39, 63, 82, 0.06);
}

/* トップの記事一覧：読みたくなるカード感を強める */
.entry-card-wrap,
.a-wrap {
  overflow: hidden;
  border: 1px solid #e8eef2;
  border-radius: 10px;
}

.entry-card-wrap + .entry-card-wrap,
.a-wrap + .a-wrap {
  margin-top: 18px;
}

.entry-card,
.related-entry-card {
  padding: 14px;
}

.entry-card-thumb,
.related-entry-card-thumb {
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #e9f6f1, #e8f2f8);
}

.entry-card-title {
  font-size: 1.08rem;
  line-height: 1.55;
  margin-bottom: 0.45em;
}

.entry-card-snippet {
  font-size: 0.93rem;
  color: #5d6d78;
}

.entry-card-meta,
.post-date,
.post-update {
  font-size: 0.82rem;
  color: #7a8a93;
}

/* カテゴリラベル：回遊導線として目に入りやすく */
.cat-label,
.entry-category a,
.category-button a {
  background: #e8f5ef;
  color: #2f6f58;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* 本文：読み物として疲れにくい文字組み */
.article,
.entry-content {
  color: #2f3a43;
}

.entry-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.entry-content p {
  line-height: 2;
  margin-bottom: 1.75em;
}

.entry-content strong {
  background: linear-gradient(transparent 62%, #dff3ea 62%);
  color: #213742;
  font-weight: 800;
}

/* H2：見出しをブログの区切りとして華やかに */
.entry-content h2 {
  position: relative;
  margin: 3.2em 0 1.25em;
  padding: 0.85em 1em 0.85em 1.15em;
  border-left: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #e7f5f9 0%, #f2fbf6 100%);
  color: #203545;
  font-size: 1.38rem;
  box-shadow: inset 0 0 0 1px #d8edf2;
}

.entry-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  bottom: 0.8em;
  width: 5px;
  border-radius: 999px;
  background: #5ba7c8;
}

.entry-content h2::after {
  content: "";
  position: absolute;
  left: 1.15em;
  right: 1.15em;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8ec9df, rgba(142, 201, 223, 0));
}

/* H3：本文中の小見出しを見つけやすく */
.entry-content h3 {
  position: relative;
  margin: 2.35em 0 1em;
  padding-left: 1.05em;
  border-bottom: 1px solid #dceaf0;
  color: #244456;
  font-size: 1.16rem;
}

.entry-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #8ac7a7;
}

/* リスト：箇条書きを読みやすく */
.entry-content ul,
.entry-content ol {
  margin: 1.2em 0 1.8em;
  padding: 1.05em 1.25em 1.05em 2.2em;
  border-radius: 8px;
  background: #fbfdfe;
  border: 1px solid #e5eef2;
}

.entry-content li + li {
  margin-top: 0.55em;
}

/* 目次：本文への入口として目立たせる */
.toc {
  margin: 2em auto;
  border: 1px solid #d5eaf1;
  border-radius: 10px;
  background: #fbfeff;
  box-shadow: 0 4px 18px rgba(39, 63, 82, 0.05);
}

.toc-title {
  color: #203545;
  font-size: 1rem;
}

/* 関連記事・人気記事：次の記事へ進みやすく */
.related-list,
.popular-entry-cards,
.new-entry-cards {
  margin-top: 1.4em;
}

.related-entry-card-wrap {
  border: 1px solid #e8eef2;
}

/* サイドバー：不要な空コメントを隠し、カテゴリを回遊導線に */
.widget_recent_comments {
  display: none;
}

.sidebar .widget_categories ul,
.widget_categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.sidebar .widget_categories li,
.widget_categories li {
  margin: 0;
}

.sidebar .widget_categories a,
.widget_categories a {
  display: inline-block;
  padding: 0.45em 0.75em;
  border-radius: 999px;
  background: #f0f8f4;
  color: #2f6f58;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.sidebar .widget_categories a:hover,
.widget_categories a:hover {
  background: #dff1e8;
}

/* アーカイブは情報量が多くなりやすいので控えめに */
.widget_archive li,
.widget_recent_entries li {
  line-height: 1.6;
  margin-bottom: 0.6em;
}

/* 広告：浮きすぎない枠と余白 */
.ad-area,
.google-auto-placed,
.adsbygoogle {
  max-width: 100%;
  padding: 0.6em 0;
}

/* フッター：固定ページ導線の終点として見やすく */
.footer,
.footer-bottom,
.footer-in {
  background: #edf6f8;
}

.footer a {
  font-weight: 700;
  text-decoration: none;
}

/* スマホ：最初の印象と読みやすさを優先 */
@media screen and (max-width: 834px) {
  .header-in,
  .logo-header {
    padding-top: 22px;
    padding-bottom: 14px;
  }

  .header::after,
  #header::after {
    margin-top: -4px;
    margin-bottom: 14px;
    font-size: 13px;
    text-align: center;
  }

  .navi-in > ul,
  #navi .navi-in > ul,
  .menu-header {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 8px 10px;
    gap: 8px;
  }

  .navi-in a,
  #navi a,
  .menu-header a {
    white-space: nowrap;
    padding: 0.55em 0.85em;
    background: #fff;
    border: 1px solid #e3edf1;
  }

  .main {
    border-radius: 0;
    box-shadow: none;
  }

  .entry-card,
  .related-entry-card {
    padding: 12px;
  }

  .entry-card-title {
    font-size: 1rem;
  }

  .entry-card-snippet {
    font-size: 0.9rem;
  }

  .entry-content {
    max-width: 100%;
  }

  .entry-content p {
    line-height: 1.95;
  }

  .entry-content h2 {
    font-size: 1.22rem;
    margin-top: 2.8em;
  }

  .entry-content h3 {
    font-size: 1.08rem;
  }

  .entry-content ul,
  .entry-content ol {
    padding: 0.95em 1em 0.95em 1.7em;
  }

  .widget_archive {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .header::after,
  #header::after {
    padding-left: 16px;
    padding-right: 16px;
  }

  .entry-card-wrap + .entry-card-wrap,
  .a-wrap + .a-wrap {
    margin-top: 14px;
  }

  .entry-content h2 {
    border-radius: 7px;
    padding: 0.8em 0.85em 0.8em 1em;
  }
}


/************************************
** Codex: 検索流入・カテゴリ回遊強化CSS
** 2026-05-08 追加
************************************/

/* ヘッダー下：検索で来た人にもブログ内容がすぐ伝わる説明 */
.header::after,
#header::after {
  content: "暮らし・仕事・学びを効率化するヒントを、あとで読み返しやすく整理しています";
  font-weight: 600;
}

/* メニュー：カテゴリを先に見せ、固定ページは後ろの信頼導線にする */
.navi-in .menu-item-object-category,
#navi .menu-item-object-category,
.menu-header .menu-item-object-category {
  order: 1;
}

.navi-in .menu-item-object-page,
#navi .menu-item-object-page,
.menu-header .menu-item-object-page {
  order: 2;
}

.navi-in .menu-item-object-category > a,
#navi .menu-item-object-category > a,
.menu-header .menu-item-object-category > a {
  background: #e8f5ef;
  color: #245f4a;
  border: 1px solid #cfe8dc;
}

.navi-in .menu-item-object-category > a:hover,
#navi .menu-item-object-category > a:hover,
.menu-header .menu-item-object-category > a:hover {
  background: #d9f0e5;
  color: #1f513f;
}

.navi-in .menu-item-object-page > a,
#navi .menu-item-object-page > a,
.menu-header .menu-item-object-page > a {
  color: #596b76;
  font-size: 0.92em;
}

/* トップページ：初訪問者向けの読み始め案内 */
.home .main::before,
.front-top-page .main::before {
  content: "まずは気になるテーマからどうぞ。家事効率化・ガジェット・ポイ活・学び直しなど、毎日を少しラクにする記事をまとめています。";
  display: block;
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid #d8edf2;
  border-radius: 10px;
  background: linear-gradient(90deg, #f0f9fb 0%, #f4fbf6 100%);
  color: #2f4858;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
}

/* 記事カード：検索から来た人が概要を拾いやすいように説明文を読みやすく */
.entry-card-snippet,
.related-entry-card-snippet {
  display: block;
  color: #51636f;
  font-size: 0.94rem;
  line-height: 1.75;
}

.entry-card-title,
.related-entry-card-title {
  color: #1f3340;
}

/* ページ送り：次ページ回遊を目立たせる */
.pagination a,
.pagination .current,
.pager-post-navi a {
  border-radius: 999px;
  border: 1px solid #d5e8ef;
  background: #fff;
  color: #2f6f8f;
  font-weight: 700;
}

.pagination a:hover,
.pager-post-navi a:hover {
  background: #e8f5ef;
  color: #245f4a;
}

/* 検索フォーム：来訪者がサイト内検索しやすい見た目 */
.search-edit,
.search-field,
input[type="search"] {
  border: 1px solid #d6e6ed;
  border-radius: 999px;
  background: #fff;
  padding: 0.7em 1em;
}

.search-submit,
button[type="submit"] {
  border-radius: 999px;
}

/* カテゴリーページ：カテゴリ説明を読みやすく */
.archive-title,
.category-title {
  color: #203545;
  font-weight: 800;
}

.archive-description,
.category-description {
  margin: 0 0 1.5em;
  padding: 1em 1.1em;
  border-radius: 8px;
  background: #fbfdfe;
  border: 1px solid #e4eef2;
  color: #51636f;
  line-height: 1.8;
}

/* スマホ：メニューが長くなってもカテゴリを探しやすく */
@media screen and (max-width: 834px) {
  .home .main::before,
  .front-top-page .main::before {
    margin: 0 0 16px;
    padding: 15px 16px;
    font-size: 14px;
  }

  .navi-in .menu-item-object-page > a,
  #navi .menu-item-object-page > a,
  .menu-header .menu-item-object-page > a {
    font-size: 0.86em;
  }
}