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

/************************************
** B.C.W ブランドカラー（ゴールド）アクセント
**   Brand: Beloved Car Wrapping
**   Base: dark / Accent: gold #b8975a
************************************/
:root {
  --bcw-gold: #b8975a;
  --bcw-gold-bright: #d4b07a;
  --bcw-ink: #0c0b09;
}

/* リンク色 */
a,
.article a {
  color: var(--bcw-gold);
}
a:hover,
.article a:hover {
  color: var(--bcw-gold-bright);
}

/* サイト名 */
.site-name-text,
.site-name-text-link,
.site-name-text-link:hover {
  color: var(--bcw-gold) !important;
}

/* 見出しアクセント */
.article h2 {
  border-left: 4px solid var(--bcw-gold);
  padding-left: 0.8em;
  border-bottom: none;
}
.article h3 {
  border-bottom: 1px solid var(--bcw-gold);
}

/* ボタン系 */
.btn-main,
.btn-link,
.btn-default,
.pagination .current,
.pagination a:hover,
.appeal .appeal-button,
.appeal-area .appeal-button,
.button-caption .button-caption-link,
.wp-block-button__link {
  background-color: var(--bcw-gold) !important;
  border-color: var(--bcw-gold) !important;
  color: var(--bcw-ink) !important;
}

/* タグ・カテゴリ */
.tag-link,
.cat-link {
  background-color: var(--bcw-gold) !important;
  border-color: var(--bcw-gold) !important;
  color: var(--bcw-ink) !important;
}

/* グローバルナビ ホバー */
.navi-in > .menu-header > .menu-item > a:hover,
.menu-mobile li.menu-item a:hover {
  color: var(--bcw-gold) !important;
}

/* フッター */
.footer .copyright a {
  color: var(--bcw-gold);
}

/* 引用 */
blockquote {
  border-left-color: var(--bcw-gold) !important;
}

/* マーカー */
mark,
.marker,
.marker-under {
  background: linear-gradient(transparent 60%, rgba(184, 151, 90, 0.4) 60%);
}

/* 投稿リスト・カードのホバー */
.entry-card:hover,
.related-entry-card:hover {
  box-shadow: 0 0 0 1px var(--bcw-gold);
}

/* ウィジェットタイトル */
.widget-sidebar .widget-sidebar-title {
  border-bottom: 1px solid var(--bcw-gold);
}

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

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

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