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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ===== カラー変数 ===== */
:root {
  --gold: #c9a84c;
  --gold-light: #e0c070;
  --bg-base: #111318;
  --bg-surface: #1a1d24;
  --bg-card: #1e2128;
  --text-primary: #f0ece4;
  --text-secondary: #999;
  --border: #2a2d34;
}
/* ===== サイト全体カラー ===== */

body, #container, #main {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
}

#header {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--gold)33;
}

#footer {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border);
  color: var(--text-secondary) !important;
}
/* ===== h2,3デザイン追加===== */

h2 {
  border-left: 3px solid var(--gold);
  padding-left: 12px;
  font-size: 1.35rem;
  margin-top: 2.8rem;
  color: var(--text-primary) !important;
}

h3 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  font-size: 1.15rem;
  color: var(--gold-light) !important;
}
/* ===== カードをダーク、フォバーエフェクト　===== */

.a-wrap, .card-thumb-wrap {
  background: var(--bg-card) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: 8px !important;
  transition: transform 0.2s ease,
    border-color 0.2s ease;
}
.a-wrap:hover {
  transform: translateY(-4px);
  border-color: var(--gold)66 !important;
}

.entry-card-title {
  color: var(--text-primary) !important;
}

.card-content {
  background: var(--bg-card) !important;
}
a {
  color: var(--gold) !important;
  text-decoration: none;
}

a:hover {
  color: var(--gold-light) !important;
}

.btn, .more-link, .wp-block-button__link {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
  border-radius: 4px !important;
  letter-spacing: .06em;
  transition: background 0.2s;
}

.btn:hover, .more-link:hover {
  background: var(--gold) !important;
  color: var(--bg-base) !important;
}
.site-name a, #site-name a {
  color: var(--gold) !important;
  font-family: Georgia, serif;
  letter-spacing: .1em;
}

#navi .menu > li > a {
  color: #aaa !important;
  font-size: 13px;
  letter-spacing: .06em;
  transition: color 0.2s;
}

#navi .menu > li > a:hover,
#navi .menu > li.current-menu-item > a {
  color: var(--gold) !important;
}

#navi {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}