@charset "utf-8";

/* ==========================================================================
   Color Variables (色の変数管理)
   ========================================================================== */
:root {
    /* ------------------------------
       メインカラー・基本カラー
    ------------------------------ */
    /* テーマのメインカラー（強調部分やボタン、リンクなどに使用） */
    --blog-primary: #7CBE36;
    
    /* ページ全体の基本背景カラー */
    --blog-bg: #F5F7E2;

    /* ------------------------------
       テキストカラー
    ------------------------------ */
    /* 基本のテキストカラー（見出しや本文） */
    --blog-text: #333;
    
    /* サブテキストカラー（日付、抜粋、サブタイトルなど少し控えめな文字） */
    --text-muted: #666;
    
    /* 薄いテキストカラー（パンくずリスト、画像なし時のテキストなど） */
    --text-light: #999;

    /* 白文字（ボタンやバッジのテキストなど） */
    --text-white: #fff;
    
    /* ------------------------------
       ボタンカラー
    ------------------------------ */
    /* ボタンの背景カラー */
    --btn-bg: #7CBE36;
    
    /* ボタンのテキストカラー */
    --btn-text: #fff;
    
    /* ------------------------------
       背景カラー（パーツ別）
    ------------------------------ */
    /* ボックスやカードの背景カラー（白） */
    --box-bg: #fff;
    
    /* トップニュースエリアの背景カラー */
    --top-news-bg: #F5F7E2;
    
    /* ヒーローエリア（最上部画像）の背景カラー */
    --hero-bg: #333;
    
    /* ヒーローエリアのオーバーレイ（半透明の黒で画像を暗くする用） */
    --hero-overlay-bg: rgba(0, 0, 0, 0.4);
    
    /* 画像がない場合のプレースホルダー背景 */
    --no-image-bg: #f0f0f0;
    
    /* サムネイル画像の背景（画像が読み込まれるまでの背景色など） */
    --thumb-bg: #eee;
    
    /* ------------------------------
       ボーダー・影のカラー
    ------------------------------ */
    /* 基本ボーダーカラー（区切り線など） */
    --blog-border: #e0e0e0;

    /* 薄いボーダーカラー（見出しの下線など） */
    --border-light: #ddd;

    /* 影のカラー（サイドバーのウィジェットなどのドロップシャドウ） */
    --shadow-color: #ddd;
}