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

/************************************
** カスタムスタイル（トップページ改善）
************************************/

/* === テーマカラー: 茶色 → モダンブルー系 === */

/* ヘッダー */
.header, #header {
  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.header .logo-text, .header a { color: #fff !important; }

/* ナビゲーション */
.navi, #navi, .mobile-menu-buttons {
  background: #0d47a1 !important;
}
.navi a, .navi .menu-item a { color: #fff !important; }
.navi a:hover, .navi .menu-item a:hover {
  background: rgba(255,255,255,0.15) !important;
}
.navi ul.sub-menu {
  background: #1565c0 !important;
}

/* フッター */
.footer, #footer, .footer-bottom, .footer-bottom-content {
  background: #0d47a1 !important;
  color: #fff !important;
}
.footer a { color: rgba(255,255,255,0.85) !important; }
.footer a:hover { color: #fff !important; }

/* 全体の背景 */
body.front-top-page, body.page {
  background: #f5f7fa !important;
}

/* メインコンテンツエリア */
.main {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* サイドバー */
.sidebar {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 20px !important;
}

/* 記事内h2: 茶色帯 → モダンデザイン */
.article h2 {
  background: none !important;
  border: none !important;
  border-bottom: 3px solid #1565c0 !important;
  color: #1a237e !important;
  padding: 0 0 12px 0 !important;
  font-size: 1.4em !important;
  margin-top: 2.5em !important;
  position: relative;
}
.article h2::before {
  content: '' !important;
  display: none !important;
}
.article h2::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 60px;
  height: 3px;
  background: #42a5f5;
}

/* h3 */
.article h3 {
  border-left: 4px solid #1565c0 !important;
  border-bottom: none !important;
  background: #f0f4ff !important;
  padding: 10px 14px !important;
  color: #1a237e !important;
}

/* 固定ページのh1タイトル非表示（ヒーロー内に表示するため） */
.page .entry-title {
  display: none !important;
}

/* 投稿日・更新日・シェアボタン（トップページのみ非表示） */
.page .date-tags,
.page .article-header .sns-share,
.page .article-footer .sns-share,
.page .article-footer .sns-follow,
.page .author-info {
  display: none !important;
}

/* サイドバー見出し */
.sidebar h2, .sidebar h3,
.widget_recent_entries .widgettitle,
.widget_categories .widgettitle,
.widget_archive .widgettitle {
  background: none !important;
  border-left: 4px solid #1565c0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  color: #1a237e !important;
  padding: 8px 14px !important;
  font-size: 1.05em !important;
}

/* 目次 */
.toc {
  background: #f0f4ff !important;
  border: 1px solid #bbdefb !important;
  border-radius: 12px !important;
  padding: 20px !important;
}
.toc-title {
  color: #1565c0 !important;
}
.toc a { color: #1a237e !important; }
.toc a:hover { color: #1565c0 !important; }

/* カードホバーエフェクト */
.entry-content a[style*="display:block"],
.entry-content a[style*="display:flex"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.entry-content a[style*="display:block"]:hover,
.entry-content a[style*="display:flex"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* 地域ボタンホバー */
.entry-content a[style*="border-radius:24px"]:hover,
.entry-content a[style*="border-radius:20px"]:hover {
  background: #1565c0 !important;
  color: #fff !important;
  transition: all 0.2s ease !important;
}

/* CTAボタンホバー */
.entry-content a[style*="border-radius:30px"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,109,0,0.4) !important;
  transition: all 0.2s ease !important;
}

/* ブログカード改善 */
.blogcard {
  border-radius: 12px !important;
  border-color: #e0e0e0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blogcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* ページネーション */
.pagination a, .pagination span {
  border-radius: 8px !important;
}
.pagination .current {
  background: #1565c0 !important;
  border-color: #1565c0 !important;
}

/* スクロールトップボタン */
.go-to-top-button {
  background: #1565c0 !important;
  border-radius: 50% !important;
}

/************************************
** レスポンシブデザイン
************************************/
@media screen and (max-width: 1023px) {
  .main { border-radius: 12px; }
  .sidebar { border-radius: 12px; margin-top: 20px; }
}

@media screen and (max-width: 834px) {
  .navi { display: none; }
}

@media screen and (max-width: 480px) {
  .article h2 { font-size: 1.2em !important; }
  .kpn-hero { padding: 28px 16px !important; }
  .kpn-hero h1 { font-size: 22px !important; }
}

/* === グリッド内カードの高さ均一化 === */
/* wpautopが<a>を<p>で囲むため、gridコンテナをflexboxに変換して対応 */
.entry-content div[style*="display:grid"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}
/* 各<p>（wpautopが追加）をグリッドアイテムとして扱う */
.entry-content div[style*="display:grid"] > p {
  margin: 0 !important;
  flex: 1 1 calc(50% - 14px);
  min-width: 260px;
  display: flex !important;
}
/* <a>カードを<p>の全高さに伸ばす */
.entry-content div[style*="display:grid"] > p > a,
.entry-content div[style*="display:grid"] > a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* flexカード（口コミ・レビュー）はrow方向を維持 */
.entry-content div[style*="display:grid"] > p > a[style*="display:flex"],
.entry-content div[style*="display:grid"] > a[style*="display:flex"] {
  flex-direction: row !important;
  align-items: center !important;
}
/* 目的で探すセクション（4カード）: 2x2均等グリッド */
.entry-content div[style*="minmax(240px"] > p {
  flex: 1 1 calc(50% - 14px) !important;
  min-width: 240px !important;
}

/* 統計セクション: wpautop対応 */
.kpn-stats > p {
  margin: 0 !important;
  display: contents !important;
}

/* 料金チャートセクション: wpautop対応 */
.entry-content div[style*="kpn-stats"] > p,
.entry-content div[style*="chart-bar"] > p {
  margin: 0 !important;
}

/* お悩みセクションのQ丸アイコン: wpautop flexカード対応 */
.entry-content div[style*="display:grid"] > p > a[style*="display:flex"] span[style*="border-radius:50%"],
.entry-content div[style*="display:grid"] > a[style*="display:flex"] span[style*="border-radius:50%"] {
  flex-shrink: 0 !important;
}

/* ランキングセクション: 1カラム縦並びを維持 */
.kpn-ranking {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
.kpn-ranking > p {
  margin: 0 !important;
  display: contents !important;
}
.kpn-ranking a {
  flex-direction: row !important;
}