/*
Theme Name: Lightning Child Sample
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

:root {
    --aoki-main-green: #007A48;  /* 信頼感のある深い緑 */
    --aoki-accent-red: #E60012;  /* 目立たせたいパーツ用の赤 */
    --aoki-bg-light: #F8F9FA;    /* 柔らかい薄グレーの背景 */
}

/* 1. サイト全体の背景（!important で確実に上書き） */
body {
    background-color: var(--aoki-bg-light) !important;
    color: #333333;
}

/* 2. メインナビゲーションのホバー時（セレクタを強化） */
.vk-navbar .global-nav-list > li > a:hover,
.vk-navbar .global-nav-list > li > a:focus {
    color: var(--aoki-main-green) !important;
}

/* 3. ヘッダー全体（!important を追加して影を強制リセット） */
.site-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: none !important; 
}

/* 4. ロゴのサイズ感 */
.site-header-logo img {
    max-height: 50px !important;
    width: auto !important;
}

/* 5. お知らせ一覧の枠組み（セレクタを強化） */
.vk_posts .vk_post-loop-item {
    border-bottom: 1px dashed #cccccc !important;
    padding: 15px 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
}

/* ホバー時に少し浮き上がらせるリンク演出 */
.vk_posts .vk_post-loop-item:hover {
    opacity: 0.8 !important;
    padding-left: 5px !important;
    transition: all 0.3s ease;
}

/* 6. カテゴリタグ */
.vk_posts .vk_post-cat-labels .badge,
.vk_posts .vk_post-cat-labels a {
    background-color: var(--aoki-main-green) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    margin-right: 15px !important;
}

/* 7. 独自の丸角ボタン */
.aoki-btn {
    display: inline-block !important;
    background-color: var(--aoki-main-green) !important;
    color: #ffffff !important;
    padding: 12px 35px !important;
    font-weight: bold !important;
    border-radius: 30px !important; /* しっかり丸みをつける */
    border: 2px solid var(--aoki-main-green) !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    text-align: center;
}

/* ホバーした時に白背景になって文字が緑になるアニメーション */
.aoki-btn:hover {
    background-color: #ffffff !important;
    color: var(--aoki-main-green) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}