@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){
  /*必要ならばここにコードを書く*/
}
/* ==========================================================
   Cocoon Child - ライト基調（Coin Mapブランド）追加CSS
   ========================================================== */

:root {
  --fin-bg: #ffffff;
  --fin-bg-alt: #f5f6f8;
  --fin-card: #ffffff;
  --fin-card-border: #e3e6eb;
  --fin-text: #12151c;
  --fin-text-sub: #5b6472;
  --fin-accent: #e8a83c;        /* オレンジ：背景・枠線・バッジ用 */
  --fin-accent-text: #b8791f;   /* オレンジ（濃）：文字・リンク用（可読性確保） */
  --fin-blue: #4c6fff;
  --fin-shadow: 0 2px 14px rgba(11, 14, 20, 0.06);
}

/* ---------- 全体 ---------- */
body,
#top-container,
#container {
  background-color: var(--fin-bg);
  color: var(--fin-text);
}

a {
  color: var(--fin-accent-text);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--fin-blue);
}

/* ---------- ヘッダー ---------- */
#header-container,
.l-header,
#navi,
.navi {
  background-color: var(--fin-bg-alt) !important;
  border-bottom: 1px solid var(--fin-card-border);
}

.site-name a,
.site-name-link {
  color: var(--fin-text) !important;
}

.header-navi-in a,
.navi a {
  color: var(--fin-text-sub) !important;
  transition: color 0.2s ease;
}

.header-navi-in a:hover,
.navi a:hover {
  color: var(--fin-accent-text) !important;
}

/* ---------- 見出し ---------- */
.article h1,
.article h2,
.article h3,
.article h4,
.entry-title {
  color: var(--fin-text) !important;
}

.article h2 {
  border-left: 4px solid var(--fin-accent);
  padding-left: 0.6em;
  background: none;
}

.article h3 {
  border-left: 3px solid var(--fin-blue);
  padding-left: 0.5em;
}

/* ---------- 本文カード ---------- */
.article,
.entry-content,
.author-box,
.related-entry-card-item,
.box-widget,
.widget {
  background-color: var(--fin-card);
  border: 1px solid var(--fin-card-border);
  border-radius: 10px;
  box-shadow: var(--fin-shadow);
  color: var(--fin-text);
}

.entry-content p,
.entry-content li {
  color: var(--fin-text) !important;
}

.entry-content a {
  color: var(--fin-accent-text) !important;
}

.entry-content table {
  color: var(--fin-text) !important;
}

.entry-content table th,
.entry-content table td {
  background-color: var(--fin-card) !important;
  border-color: var(--fin-card-border) !important;
  color: var(--fin-text) !important;
}

.entry-content blockquote {
  background-color: var(--fin-bg-alt) !important;
  color: var(--fin-text) !important;
  border-left: 4px solid var(--fin-blue) !important;
}

/* ---------- 記事一覧カード ---------- */
.entry-card,
.a-wrap {
  background-color: var(--fin-card);
  border: 1px solid var(--fin-card-border);
  border-radius: 12px;
  box-shadow: var(--fin-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.entry-card:hover,
.a-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px -12px rgba(232, 168, 60, 0.35);
}

.entry-card-title,
.a-wrap .a-title {
  color: var(--fin-text) !important;
}

.entry-card-snippet,
.entry-card-meta {
  color: var(--fin-text-sub) !important;
}

.cat-label,
.entry-category a {
  background-color: var(--fin-accent) !important;
  color: #ffffff !important;
  border-radius: 4px;
  font-weight: bold;
}

/* ---------- ボタン・ページネーション ---------- */
.cocoon-pagination a,
.sns-share a,
.btn,
input[type="submit"],
button {
  background-color: var(--fin-card);
  color: var(--fin-accent-text) !important;
  border: 1px solid var(--fin-accent);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.cocoon-pagination a:hover,
.sns-share a:hover,
.btn:hover,
input[type="submit"]:hover,
button:hover {
  background-color: var(--fin-accent);
  color: #ffffff !important;
}

.cocoon-pagination .current {
  background-color: var(--fin-blue);
  color: #ffffff !important;
  border-color: var(--fin-blue);
}

/* ---------- サイドバー・ウィジェット見出し ---------- */
.widget-title,
.box-title-h2,
.box-title-h3 {
  background-color: var(--fin-bg-alt) !important;
  color: var(--fin-text) !important;
  border-bottom: 2px solid var(--fin-blue);
  padding: 0.6em 0.8em;
}

/* ---------- サイドバー・ウィジェット本文（カテゴリー/アーカイブ/最新記事など） ---------- */
.widget_categories ul li a,
.widget_archive ul li a,
.widget_recent_entries ul li a,
.widget_recent_comments a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a,
.widget_block ul li a,
.widget_tag_cloud a,
.widget ul li a,
.widget a {
  color: var(--fin-text) !important;
}

.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_recent_entries 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 ul li a:hover,
.widget ul li a:hover {
  background-color: rgba(232, 168, 60, 0.08) !important;
  color: var(--fin-accent-text) !important;
}

.widget_categories ul li a .post-count,
.widget_archive ul li a .post-count {
  color: var(--fin-text-sub) !important;
}

/* ---------- フッター ---------- */
#footer,
.l-footer {
  background-color: var(--fin-bg-alt) !important;
  color: var(--fin-text-sub);
  border-top: 1px solid var(--fin-card-border);
}

#footer a,
.l-footer a {
  color: var(--fin-text-sub);
}

#footer a:hover,
.l-footer a:hover {
  color: var(--fin-accent-text);
}

/* ---------- テキスト選択・スクロールバー ---------- */
::selection {
  background: var(--fin-blue);
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--fin-bg-alt);
}

::-webkit-scrollbar-thumb {
  background: var(--fin-card-border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fin-accent);
}