/*
Theme Name: Cocoon Child - 会計ソフト診断ナビ
Template: cocoon-master
Version: 1.1
*/

/* ============================================
   会計ソフト診断ナビ - メディアデザイン v1.1
   ============================================ */

:root {
  --primary: #1a56db;
  --primary-dark: #1e3a8a;
  --primary-light: #dbeafe;
  --accent: #f59e0b;
  --dark: #1e2a3b;
  --text: #1f2937;
  --text-sub: #6b7280;
  --bg: #f0f2f5;
  --white: #ffffff;
  --border: #e5e7eb;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.13);
}

/* ========== ベース ========== */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}

/* ========== ヘッダー全幅化（重要） ========== */
#header-container {
  max-width: 100% !important;
  width: 100% !important;
  background: var(--dark) !important;
  border-bottom: 4px solid var(--accent) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#header-container-in {
  background: transparent !important;
  max-width: 1140px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 32px !important;
  box-shadow: none !important;
  border: none !important;
}

#header {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.site-name-text,
.site-name-text a,
#header .site-name a,
#header a {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-decoration: none !important;
}

.tagline {
  color: rgba(255,255,255,0.5) !important;
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
}

/* ========== ナビ全幅化 ========== */
#navi-container {
  max-width: 100% !important;
  width: 100% !important;
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#navi {
  max-width: 1140px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 32px !important;
}

.navi-in > ul > li > a {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
  display: block !important;
}

.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  background: transparent !important;
}

/* ========== ヒーローエリア（トップページ用） ========== */
.home .content-wrap::before {
  content: '';
  display: block;
}

/* ========== コンテンツ ========== */
#container {
  background: var(--bg) !important;
}

.content-wrap {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 32px 32px 48px !important;
}

.main-wrap,
#main {
  background: var(--white) !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

/* ========== 記事ヘッダー ========== */
.entry-header {
  padding: 36px 40px 24px !important;
  border-bottom: 1px solid var(--border) !important;
}

.entry-content {
  padding: 32px 40px 48px !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: var(--text) !important;
}

/* ========== 記事タイトル ========== */
.entry-title {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--dark) !important;
  line-height: 1.4 !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 10px !important;
  letter-spacing: -0.02em !important;
}

/* ========== 見出し ========== */
.entry-content h2 {
  background: var(--dark) !important;
  color: #ffffff !important;
  padding: 12px 20px !important;
  border-radius: 4px !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  border-left: 5px solid var(--accent) !important;
  margin-top: 48px !important;
  margin-bottom: 22px !important;
}

.entry-content h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--dark) !important;
  border-left: 4px solid var(--primary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 4px 0 10px 14px !important;
  background: none !important;
  margin-top: 36px !important;
  margin-bottom: 16px !important;
}

.entry-content h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: var(--primary-light) !important;
  padding: 7px 14px !important;
  border-radius: 4px !important;
}

/* ========== テーブル ========== */
.entry-content table {
  border-collapse: collapse !important;
  width: 100% !important;
  font-size: 14px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  margin: 24px 0 !important;
}

.entry-content table th {
  background: var(--dark) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-align: center !important;
  border: none !important;
}

.entry-content table td {
  padding: 11px 16px !important;
  border: 1px solid var(--border) !important;
  text-align: center !important;
}

.entry-content table tr:nth-child(even) td {
  background: #f9fafb !important;
}

.entry-content table tr:hover td {
  background: var(--primary-light) !important;
}

/* ========== テキスト ========== */
.entry-content strong {
  color: var(--primary-dark) !important;
  font-weight: 700 !important;
}

.entry-content a {
  color: var(--primary) !important;
  text-underline-offset: 3px !important;
}

.entry-content hr {
  border: none !important;
  border-top: 2px dashed var(--border) !important;
  margin: 40px 0 !important;
}

/* ========== 記事カード（一覧） ========== */
.entry-card-wrap {
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
}

.entry-card-wrap:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.entry-card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  line-height: 1.55 !important;
}

.entry-summary {
  font-size: 12px !important;
  color: var(--text-sub) !important;
}

/* NO IMAGE サムネイルをすっきりさせる */
.no-image .entry-card-thumb {
  background: linear-gradient(135deg, #1e2a3b 0%, #1a56db 100%) !important;
}

.no-image .entry-card-thumb::after {
  color: rgba(255,255,255,0.4) !important;
}

/* ========== サイドバー ========== */
.sidebar-wrap {
  padding-left: 16px !important;
}

.sidebar .widget {
  background: var(--white) !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

.sidebar .widget_title,
.sidebar .widgettitle {
  background: var(--dark) !important;
  color: #ffffff !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--accent) !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.sidebar .widget > ul,
.sidebar .widget > div {
  padding: 12px 16px !important;
}

/* ========== フッター ========== */
#footer-container {
  max-width: 100% !important;
  width: 100% !important;
  background: var(--dark) !important;
  border-top: 4px solid var(--primary) !important;
  margin-top: 48px !important;
  padding: 0 !important;
}

#footer {
  background: transparent !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 36px 32px 20px !important;
  border: none !important;
  color: rgba(255,255,255,0.6) !important;
}

.footer-bottom-content,
.footer-bottom {
  color: rgba(255,255,255,0.35) !important;
  font-size: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  text-align: center !important;
}

#footer a,
#footer-container a {
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
}

#footer a:hover,
#footer-container a:hover {
  color: #ffffff !important;
}

/* ========== ブレッドクラム ========== */
.breadcrumb {
  font-size: 12px !important;
  color: var(--text-sub) !important;
  padding: 12px 0 !important;
  background: transparent !important;
}

/* ========== ページネーション ========== */
.pagination .current {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  border-radius: 4px !important;
}

.pagination a:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ========== スマホ ========== */
@media (max-width: 768px) {
  #header-container-in {
    padding: 16px 20px !important;
  }
  .content-wrap {
    padding: 20px 16px 40px !important;
  }
  .entry-header {
    padding: 24px 18px 18px !important;
  }
  .entry-content {
    padding: 24px 18px 32px !important;
  }
  .entry-title {
    font-size: 20px !important;
  }
  .entry-content h2 {
    font-size: 16px !important;
  }
  .entry-content h3 {
    font-size: 15px !important;
  }
}