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

/* ==========================================================
   【カスタマイズ】ダークエンジスキンの「緑色」を「ロイヤルネイビー」へ変更
   ベースカラー: #192f60 (Royal Navy)
   ========================================================== */

/* ----------------------------------------------------------
   1. 変数定義（ここを一括変更すれば色は変わります）
   ---------------------------------------------------------- */
:root {
  --my-nav-color: #192f60;         /* メイン：ロイヤルネイビー */
  --my-nav-color-light: rgba(25, 47, 96, 0.2); /* 薄い背景用 */
  --my-nav-color-hover: rgba(25, 47, 96, 0.4); /* ホバー時の少し濃い色 */
  --my-nav-shadow: #101d3b;        /* 影や濃い境界線用 */
}

/* ----------------------------------------------------------
   2. ヘッダーメニュー・ナビゲーション
   ---------------------------------------------------------- */
/* メニューホバー時の背景色 */
.navi .navi-in a:hover,
#menu-header .menu-item:hover > a,
#menu-header .menu-item > a:focus {
  background-color: var(--my-nav-color-light) !important;
  color: #fff !important;
}

/* スマホメニューなどでのアクセント */
.menu-drawer a:hover {
  background-color: var(--my-nav-color-light) !important;
}

/* ----------------------------------------------------------
   3. 記事カード・リスト（奇数・偶数行の背景装飾）
   ---------------------------------------------------------- */
/* カードの薄い背景色（緑→ネイビー） */
.entry-card-wrap.a-wrap:nth-child(odd):after,
.entry-card-wrap.a-wrap:nth-child(even):after {
  background-color: rgba(25, 47, 96, 0.08) !important;
}

/* カードホバー時の少し濃くなるエフェクト */
.a-wrap .blogcard:hover, 
.related-entry-card-wrap:hover, 
.pager-post-navi a.prev-post:hover, 
.pager-post-navi a.next-post:hover, 
.pager-post-navi.post-navi-square a:hover,
.widget-entry-cards .a-wrap:hover .widget-entry-card-content,
.widget-entry-cards .a-wrap:hover {
  background-color: var(--my-nav-color-light) !important;
}

/* ----------------------------------------------------------
   4. 見出し（H2, H3, H4, 目次）のデザイン変更
   ---------------------------------------------------------- */
/* 目次のグラデーション（赤×ネイビー） */
.toc-title {
  background-image: linear-gradient(135deg, rgba(132, 23, 47, 0.8), rgba(132, 23, 47, 0.8) 50%, rgba(25, 47, 96, 0.8) 50%, rgba(25, 47, 96, 0.8) 100%, transparent 0) !important;
}
.article .toc .toc-content {
  border-image: linear-gradient(to right, rgba(132, 23, 47, 0.6) 0%, rgba(25, 47, 96, 0.6) 100%) 1 !important;
}
.toc-content ul li a:hover, 
.toc-content ol li a:hover {
  background-color: rgba(25, 47, 96, 0.3) !important;
}

/* H3見出しの影アクセント */
.article h3::after {
  box-shadow: 2px 2px 0 var(--my-nav-color) !important;
}

/* H4, H5見出しの飾りアイコン */
.article h4::after,
.article h5::after {
  background: var(--my-nav-color) !important;
}

/* サイドバータイトル（H2, H3）の幾何学模様アクセント */
.sidebar h2::after, 
.sidebar h3::after {
  background-color: var(--my-nav-color) !important;
}

/* ----------------------------------------------------------
   5. ページネーション・ボタン類
   ---------------------------------------------------------- */
/* ページ送り番号の枠線・文字色 */
.pagination a:hover, 
.comment-page-link a:hover,
.pagination .current, 
.comment-page-link .current,
.pager-numbers .current {
  color: var(--my-nav-color) !important;
  border-color: var(--my-nav-color) !important;
}
/* ページ送りボタンの飾り（三角コーナー） */
.page-numbers::before {
  border-top: 1px solid var(--my-nav-color) !important;
  border-bottom: 1px solid var(--my-nav-color) !important;
}
.page-numbers::after {
  border-right: 1px solid var(--my-nav-color) !important;
  border-left: 1px solid var(--my-nav-color) !important;
}

/* トップへ戻るボタン */
.go-to-top-button {
  border: 2px outset var(--my-nav-color) !important;
  color: var(--my-nav-color) !important;
}

/* ----------------------------------------------------------
   6. ウィジェットリスト・カレンダー
   ---------------------------------------------------------- */
/* サイドバーのリストホバー色 */
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.widget_block .wp-block-archives li a:hover,
.widget_block .wp-block-categories li a:hover,
.widget_block .wp-block-latest-posts li a:hover {
  background-color: var(--my-nav-color-light) !important;
}

/* カテゴリーウィジェットのひし形アイコン */
.cat-item .cf::after {
  background-color: rgba(25, 47, 96, 0.6) !important;
}

/* カレンダーの日付 */
.wp-calendar-table td a, 
.slide-in-wp-calendar td a {
  background-color: rgba(25, 47, 96, 0.4) !important;
}
.wp-calendar-table td a:hover, 
.slide-in-wp-calendar td a:hover {
  background-color: rgba(25, 47, 96, 0.6) !important;
}

/* ----------------------------------------------------------
   7. フッターエリア（最下部・ストライプ背景）
   ---------------------------------------------------------- */


/* 最下部コピーライトエリア */
.footer-bottom.fnm-text-width .menu-footer li a:hover {
  color: var(--my-nav-color) !important;
}

/* フッターの斜めストライプ背景 */
.footer {
  background-image: repeating-linear-gradient(135deg, rgba(25, 47, 96, 0.2), rgba(25, 47, 96, 0.2) 20%, rgba(132, 23, 47, 0.2) 20%, rgba(132, 23, 47, 0.2) 80%, rgba(25, 47, 96, 0.2) 80%, rgba(25, 47, 96, 0.2));
}

/* ----------------------------------------------------------
   8. その他細かいパーツ（引用、コメントなど）
   ---------------------------------------------------------- */
/* 引用（Blockquote）のアイコン */
blockquote::before {
  color: rgba(25, 47, 96, 0.7) !important;
}