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

/* =============================================
   GachiGear Club カスタムデザイン
   イメージ: ウォームベージュ × ダークグリーン
   ============================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* カラー変数 */
:root {
  --color-bg: #f2ede4;
  --color-surface: #faf7f2;
  --color-green: #2d4a1e;
  --color-green-light: #3d6128;
  --color-text: #2c2c2c;
  --color-text-muted: #6b6b6b;
  --color-border: #ddd8ce;
}

/* ベース */
body {
  background-color: var(--color-bg) !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  color: var(--color-text) !important;
}

/* ヘッダー */
#header {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

#site-name a,
#site-name {
  color: var(--color-green) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

#header-container {
  background-color: var(--color-surface) !important;
}

/* ナビゲーション */
#navi .navi-in > ul > li > a {
  color: var(--color-green) !important;
  font-weight: 500 !important;
  font-size: 0.85em !important;
  letter-spacing: 0.08em !important;
}

#navi .navi-in > ul > li > a:hover {
  color: var(--color-green-light) !important;
  text-decoration: underline !important;
}

/* メインコンテンツ背景 */
#main, .main, #contents, .contents {
  background-color: transparent !important;
}

/* 記事カード */
.card-wrap, .a-wrap {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease !important;
}

.card-wrap:hover, .a-wrap:hover {
  box-shadow: 0 4px 16px rgba(45, 74, 30, 0.12) !important;
}

.card-title, .card-title a {
  color: var(--color-text) !important;
  font-weight: 700 !important;
}

/* 記事本文エリア */
.article, .entry-content {
  background-color: var(--color-surface) !important;
  border-radius: 8px !important;
  padding: 2em !important;
}

/* 見出し */
.article h2 {
  border-left: 4px solid var(--color-green) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0.5em 0 0.5em 0.8em !important;
  background: transparent !important;
  color: var(--color-green) !important;
  font-weight: 700 !important;
}

.article h3 {
  border-left: 3px solid var(--color-green-light) !important;
  padding-left: 0.7em !important;
  background: transparent !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
}

/* リンク */
a {
  color: var(--color-green) !important;
}

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

/* ボタン */
.btn, .button, .wp-block-button__link,
.ranking-item-link-buttons a,
.btn-wrap a {
  background-color: var(--color-green) !important;
  color: #fff !important;
  border-radius: 40px !important;
  border: none !important;
  padding: 0.7em 1.8em !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  transition: background-color 0.2s ease !important;
}

.btn:hover, .button:hover, .wp-block-button__link:hover {
  background-color: var(--color-green-light) !important;
  color: #fff !important;
}

/* サイドバー */
#sidebar {
  background-color: transparent !important;
}

.widget {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  padding: 1.2em !important;
}

.widget-title, .widgettitle {
  color: var(--color-green) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid var(--color-green) !important;
  padding-bottom: 0.4em !important;
  margin-bottom: 0.8em !important;
}

/* カテゴリーラベル */
.cat-label, .cat-name {
  background-color: var(--color-green) !important;
  border-radius: 4px !important;
  font-size: 0.75em !important;
  letter-spacing: 0.06em !important;
}

/* フッター */
#footer {
  background-color: var(--color-green) !important;
  color: #e8f0e0 !important;
}

#footer a {
  color: #c8ddb8 !important;
}

/* パンくずリスト */
#breadcrumb {
  color: var(--color-text-muted) !important;
  font-size: 0.8em !important;
}

/* テーブル */
.article table {
  border-color: var(--color-border) !important;
}

.article table th {
  background-color: var(--color-green) !important;
  color: #fff !important;
}

/* Cocoon カラーボックス上書き */
.info-box {
  background-color: #eef4e8 !important;
  border-color: var(--color-green) !important;
}

.alert-box {
  background-color: #fdf3e7 !important;
  border-color: #c47a1a !important;
}

.point-box {
  background-color: #f0f7ec !important;
  border-color: var(--color-green-light) !important;
}

/* スクロールバー（Webkit） */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-green);
  border-radius: 3px;
}

/* レスポンシブ */
@media screen and (max-width: 834px) {
  .article {
    padding: 1.2em !important;
  }
}

@media screen and (max-width: 480px) {
  .article {
    padding: 1em !important;
    border-radius: 0 !important;
  }
}