@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ - daiki business blog フルリニューアル
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    3.0.0
*/

/* ── Google Fonts ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ── CSS 変数 ───────────────────────────────────────── */
:root {
  --c-primary:    #FF6B35;
  --c-primary-dk: #E55A22;
  --c-amber:      #F59E0B;
  --c-bg:         #FFFBF5;
  --c-bg-sub:     #FFF7ED;
  --c-card:       #FFFFFF;
  --c-text:       #1C1917;
  --c-text-sub:   #78716C;
  --c-border:     #FDE8D8;
  --c-shadow:     rgba(255,107,53,.10);
  --c-shadow-md:  rgba(255,107,53,.20);
  /* カテゴリ別カラー */
  --cat-income:   #3B82F6;
  --cat-sns:      #8B5CF6;
  --cat-biz:      #10B981;
  --cat-money:    #F59E0B;
  --cat-story:    #EF4444;
  /* レイアウト */
  --radius:       12px;
  --radius-sm:    6px;
  --radius-pill:  50px;
  --font:         'Noto Sans JP', sans-serif;
  --card-thumb-w: 200px;
}

/* ── ベース ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font) !important;
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  line-height: 1.85 !important;
  font-size: 15px !important;
}
a { color: var(--c-primary) !important; text-decoration: none !important; }
a:hover { color: var(--c-primary-dk) !important; }
img { max-width: 100%; height: auto; }

/* ── ヘッダー ────────────────────────────────────────── */
#header {
  background: linear-gradient(135deg, #FF6B35 0%, #FF9A56 50%, #FFB347 100%) !important;
  box-shadow: 0 4px 24px rgba(255,107,53,.30) !important;
  border-bottom: none !important;
}
#site-name a, #site-name, .site-name a {
  color: #FFF !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
}
#site-description, .site-description {
  color: rgba(255,255,255,.88) !important;
  font-size: .82rem !important;
}

/* ── ナビ ────────────────────────────────────────────── */
#navi { background: rgba(0,0,0,.12) !important; border-top: 1px solid rgba(255,255,255,.2) !important; }
.navi-in > ul > li > a {
  color: rgba(255,255,255,.95) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  padding: 13px 20px !important;
  transition: background .2s !important;
}
.navi-in > ul > li > a:hover {
  background: rgba(255,255,255,.2) !important;
  color: #FFF !important;
  border-radius: var(--radius-sm) !important;
}

/* ─────────────────────────────────────────────────────
   カテゴリナビグリッド（トップページ）
   ───────────────────────────────────────────────────── */
.cat-nav-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  margin: 24px 0 28px !important;
  padding: 0 !important;
}
.cat-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 8px !important;
  border-radius: var(--radius) !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.10) !important;
  min-height: 88px !important;
  color: #FFF !important;
}
.cat-nav-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
  color: #FFF !important;
}
.cat-nav-item.c-income  { background: var(--cat-income) !important; }
.cat-nav-item.c-sns     { background: var(--cat-sns) !important; }
.cat-nav-item.c-biz     { background: var(--cat-biz) !important; }
.cat-nav-item.c-money   { background: var(--cat-money) !important; }
.cat-nav-item.c-story   { background: var(--cat-story) !important; }
.cat-nav-icon { font-size: 1.6rem !important; margin-bottom: 6px !important; display: block !important; }
.cat-nav-label { font-size: .78rem !important; font-weight: 700 !important; line-height: 1.3 !important; display: block !important; }
.cat-nav-sub { font-size: .66rem !important; opacity: .85 !important; margin-top: 2px !important; display: block !important; }

/* ─────────────────────────────────────────────────────
   PickUp バナーセクション
   ───────────────────────────────────────────────────── */
.pickup-section {
  margin: 0 0 32px !important;
}
.pickup-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--c-primary) !important;
  color: #FFF !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  padding: 4px 16px 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  margin-bottom: 12px !important;
  letter-spacing: .04em !important;
}
.pickup-card {
  background: var(--c-card) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px var(--c-shadow-md) !important;
  border: 1px solid var(--c-border) !important;
  display: flex !important;
  gap: 0 !important;
  transition: transform .22s, box-shadow .22s !important;
}
.pickup-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 32px var(--c-shadow-md) !important;
}
.pickup-card-thumb { flex: 0 0 45% !important; }
.pickup-card-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.pickup-card-body { flex: 1 !important; padding: 24px 20px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.pickup-card-cat {
  display: inline-block !important;
  background: var(--c-primary) !important;
  color: #FFF !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: var(--radius-pill) !important;
  margin-bottom: 10px !important;
}
.pickup-card-title {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: var(--c-text) !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
}
.pickup-card-desc { font-size: .85rem !important; color: var(--c-text-sub) !important; line-height: 1.7 !important; margin-bottom: 16px !important; }
.pickup-btn {
  display: inline-block !important;
  background: linear-gradient(135deg, var(--c-primary), #FF3D57) !important;
  color: #FFF !important;
  padding: 10px 24px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  box-shadow: 0 4px 16px rgba(255,107,53,.35) !important;
  transition: transform .2s, box-shadow .2s !important;
  text-decoration: none !important;
  align-self: flex-start !important;
}
.pickup-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(255,107,53,.45) !important; color: #FFF !important; }

/* ─────────────────────────────────────────────────────
   セクションタイトル
   ───────────────────────────────────────────────────── */
.section-heading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: var(--c-text) !important;
  border-bottom: 2px solid var(--c-border) !important;
  padding-bottom: 12px !important;
  margin: 28px 0 18px !important;
}
.section-heading::before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 1.2em !important;
  background: var(--c-primary) !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────
   横並びカード（記事一覧）
   ───────────────────────────────────────────────────── */
/* COCOON の各種 post-list 系をすべて横並びに */
.post-list-item,
.popular-entry-card,
.recent-entry-card,
.related-entry-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: var(--c-card) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 12px var(--c-shadow) !important;
  border: 1px solid var(--c-border) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  transition: transform .22s, box-shadow .22s !important;
  text-decoration: none !important;
  color: var(--c-text) !important;
}
.post-list-item:hover,
.popular-entry-card:hover,
.recent-entry-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px var(--c-shadow-md) !important;
}

/* サムネイル（左側） */
.post-list-item .post-list-thumb,
.entry-card-thumb,
.popular-entry-card .popular-entry-card-thumb,
.recent-entry-card .recent-entry-card-thumb {
  flex: 0 0 var(--card-thumb-w) !important;
  width: var(--card-thumb-w) !important;
  min-height: 130px !important;
  overflow: hidden !important;
  background: var(--c-bg-sub) !important;
}
.post-list-item .post-list-thumb img,
.entry-card-thumb img,
.popular-entry-card .popular-entry-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .3s !important;
}
.post-list-item:hover .post-list-thumb img { transform: scale(1.05) !important; }

/* コンテンツ（右側） */
.post-list-item .post-list-content,
.entry-card-content,
.popular-entry-card .popular-entry-card-content,
.recent-entry-card .recent-entry-card-content {
  flex: 1 !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-width: 0 !important;
}

/* カード内 カテゴリバッジ */
.post-list-item .post-list-cat,
.post-category-label,
.cat-label {
  display: inline-block !important;
  background: var(--c-primary) !important;
  color: #FFF !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: var(--radius-pill) !important;
  margin-bottom: 6px !important;
  letter-spacing: .03em !important;
}
/* カテゴリ別カラー */
a[href*="income-options"]  .cat-label, .cat-2  { background: var(--cat-income)  !important; }
a[href*="sns-ai"]          .cat-label, .cat-3  { background: var(--cat-sns)     !important; }
a[href*="side-business"]   .cat-label, .cat-4  { background: var(--cat-biz)     !important; }
a[href*="money-mindset"]   .cat-label, .cat-5  { background: var(--cat-money)   !important; }
a[href*="story"]           .cat-label, .cat-6  { background: var(--cat-story)   !important; }

/* カード内 タイトル */
.post-list-item .post-list-title,
.entry-title, .card-title {
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  color: var(--c-text) !important;
  margin: 4px 0 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* カード内 「続きを読む」ボタン */
.post-list-item .post-list-content::after,
.daiki-readmore {
  content: "続きを読む →" !important;
  display: inline-block !important;
  background: linear-gradient(135deg, var(--c-primary), #FF3D57) !important;
  color: #FFF !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  border-radius: var(--radius-pill) !important;
  margin-top: auto !important;
  box-shadow: 0 3px 10px rgba(255,107,53,.30) !important;
  align-self: flex-start !important;
  transition: box-shadow .2s !important;
}

/* ─────────────────────────────────────────────────────
   記事ページ 本文
   ───────────────────────────────────────────────────── */
.article-body, .entry-content {
  font-size: 15px !important;
  line-height: 1.9 !important;
}

/* H2 */
.article-body h2, .entry-content h2 {
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-amber) 100%) !important;
  color: #FFF !important;
  padding: 13px 20px !important;
  border-radius: 8px !important;
  border-left: none !important;
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  margin: 2.8rem 0 1.2rem !important;
  box-shadow: 0 4px 14px rgba(255,107,53,.20) !important;
}
.article-body h2::before, .entry-content h2::before { display: none !important; }

/* H3 */
.article-body h3, .entry-content h3 {
  color: var(--c-primary) !important;
  border-left: 4px solid var(--c-primary) !important;
  border-bottom: 1px solid var(--c-border) !important;
  padding: 8px 0 8px 14px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 2rem 0 1rem !important;
  background: transparent !important;
}

/* 強調 */
.article-body strong, .entry-content strong {
  color: var(--c-primary) !important;
  font-weight: 700 !important;
}

/* 引用 */
.article-body blockquote, .entry-content blockquote {
  background: var(--c-bg-sub) !important;
  border-left: 4px solid var(--c-primary) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 16px 20px !important;
  color: var(--c-text-sub) !important;
  margin: 1.5rem 0 !important;
}

/* ─────────────────────────────────────────────────────
   サイドバー
   ───────────────────────────────────────────────────── */
.widget, .sidebar-widget {
  background: var(--c-card) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 12px var(--c-shadow) !important;
  border: 1px solid var(--c-border) !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}
.widget-title, .widgettitle, .sidebar-title {
  color: var(--c-primary) !important;
  font-weight: 900 !important;
  font-size: .95rem !important;
  border-bottom: 2px solid var(--c-primary) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}
.sidebar a { color: var(--c-text) !important; }
.sidebar a:hover { color: var(--c-primary) !important; }

/* ─────────────────────────────────────────────────────
   フッター
   ───────────────────────────────────────────────────── */
#footer, .site-footer {
  background: #1C1917 !important;
  color: rgba(255,255,255,.65) !important;
  border-top: 3px solid var(--c-primary) !important;
}
#footer a, .site-footer a { color: var(--c-amber) !important; }
#footer-copy, .copyright { color: rgba(255,255,255,.4) !important; font-size: .8rem !important; text-align: center !important; }

/* ─────────────────────────────────────────────────────
   スクロールトップ
   ───────────────────────────────────────────────────── */
#go-to-top, .go-to-top {
  background: var(--c-primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px var(--c-shadow-md) !important;
}

/* ─────────────────────────────────────────────────────
   タグ
   ───────────────────────────────────────────────────── */
.tag-cloud-link, .post-tag {
  background: var(--c-bg-sub) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text-sub) !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 12px !important;
  font-size: .78rem !important;
  transition: all .2s !important;
  display: inline-block !important;
  margin: 3px !important;
}
.tag-cloud-link:hover { background: var(--c-primary) !important; color: #FFF !important; border-color: var(--c-primary) !important; }

/* ─────────────────────────────────────────────────────
   スマホ対応
   ───────────────────────────────────────────────────── */
@media screen and (max-width: 834px) {
  .cat-nav-grid { grid-template-columns: repeat(3, 1fr) !important; }
  :root { --card-thumb-w: 130px; }
  .pickup-card { flex-direction: column !important; }
  .pickup-card-thumb { flex: 0 0 200px !important; }
}

@media screen and (max-width: 600px) {
  .cat-nav-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  #site-name a, #site-name { font-size: 1.1rem !important; }
  :root { --card-thumb-w: 110px; }
  .article-body h2, .entry-content h2 { font-size: 1.05rem !important; padding: 11px 14px !important; }
}

/* ─────────────────────────────────────────────────────
   グローバルナビ
   ───────────────────────────────────────────────────── */
#navi .navi-in > ul > li > a,
.header-menu .navi-in > ul > li > a {
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  padding: 0 12px !important;
  transition: color .2s !important;
}
#navi .navi-in > ul > li > a:hover {
  color: var(--c-primary) !important;
}
/* HPリンク（最後のアイテム）をオレンジに */
#navi .navi-in > ul > li:last-child > a {
  color: var(--c-primary) !important;
  border: 1.5px solid var(--c-primary) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 14px !important;
  margin-left: 6px !important;
}
#navi .navi-in > ul > li:last-child > a:hover {
  background: var(--c-primary) !important;
  color: #FFF !important;
}

/* ─────────────────────────────────────────────────────
   サイドバー共通
   ───────────────────────────────────────────────────── */
.sidebar-label {
  font-size: .78rem !important;
  font-weight: 800 !important;
  color: #A8A29E !important;
  letter-spacing: .12em !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
/* サイドバーカテゴリ一覧 */
.widget .wp-block-categories-list,
.widget .wp-block-categories {
  padding-left: 0 !important;
  list-style: none !important;
}
.widget .wp-block-categories-list li,
.widget .wp-block-categories li {
  border-bottom: 1px solid var(--c-border) !important;
}
.widget .wp-block-categories-list li a,
.widget .wp-block-categories li a {
  display: block !important;
  padding: 8px 4px 8px 0 !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  text-decoration: none !important;
  transition: color .2s !important;
}
.widget .wp-block-categories-list li a:hover,
.widget .wp-block-categories li a:hover {
  color: var(--c-primary) !important;
  padding-left: 4px !important;
}
/* サイドバー新着記事 */
.widget .wp-block-latest-posts__list {
  padding-left: 0 !important;
  list-style: none !important;
}
.widget .wp-block-latest-posts__list li {
  border-bottom: 1px solid var(--c-border) !important;
}
.widget .wp-block-latest-posts__list li a {
  display: block !important;
  padding: 8px 0 !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
  transition: color .2s !important;
}
.widget .wp-block-latest-posts__list li a:hover { color: var(--c-primary) !important; }

/* ─────────────────────────────────────────────────────
   フッター仕上げ
   ───────────────────────────────────────────────────── */
#footer-widget-area .widget-title,
#footer .widget-title {
  font-size: .78rem !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.5) !important;
  letter-spacing: .1em !important;
  border: none !important;
  background: none !important;
  padding: 0 0 8px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
#footer-nav .footer-nav-link {
  color: rgba(255,255,255,0.7) !important;
  font-size: .8rem !important;
}
#footer-nav .footer-nav-link:hover { color: var(--c-amber) !important; }

/* フッターコピーライト */
#copyright {
  font-size: .72rem !important;
  color: rgba(255,255,255,0.4) !important;
}

/* ─────────────────────────────────────────────────────
   記事内 CTAボックス（blog-cta-box）のレスポンシブ
   ───────────────────────────────────────────────────── */
.blog-cta-box a {
  display: inline-block !important;
  margin: 6px 4px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: .9rem !important;
  transition: opacity .2s !important;
}
.blog-cta-box a:hover { opacity: .85 !important; }
@media screen and (max-width: 600px) {
  .blog-cta-box a { display: block !important; margin: 6px 0 !important; }
}