/**
 * Soft Beige Theme
 * 白とベージュを基調とした柔らかいカラーテーマ
 */

/* CSS Variables - カラーパレット */
:root {
    /* ベージュ系カラー */
    --color-beige-light: #FAF7F2;      /* 最も明るいベージュ（背景用） */
    --color-beige-soft: #F5F0E8;       /* ソフトベージュ */
    --color-beige: #EDE4D3;            /* メインベージュ */
    --color-beige-medium: #D4C4B0;     /* ミディアムベージュ */
    --color-beige-dark: #B8A088;       /* ダークベージュ */
    --color-beige-deep: #9B8B76;       /* ディープベージュ */
    
    /* ホワイト系 */
    --color-white-pure: #FFFFFF;       /* 純白 */
    --color-white-soft: #FEFEFE;       /* ソフトホワイト */
    --color-white-cream: #FBF9F5;      /* クリームホワイト */
    
    /* アクセントカラー（温かみのある色） */
    --color-accent-rose: #E8B4B8;      /* ローズベージュ */
    --color-accent-gold: #D4AF37;      /* ゴールド */
    --color-accent-sage: #A8B5A6;      /* セージグリーン */
    --color-accent-terra: #C89F9C;     /* テラコッタ */
    
    /* テキストカラー */
    --color-text-primary: #4A4036;     /* メインテキスト（濃いブラウン） */
    --color-text-secondary: #6B5D54;   /* サブテキスト */
    --color-text-light: #8B7D72;       /* 薄いテキスト */
    
    /* グレー系（ベージュ寄り） */
    --color-gray-warm: #ADA39A;        /* 温かみのあるグレー */
    --color-gray-light: #D1C9C3;       /* ライトグレー */
}

/* 全体の背景色 */
body {
    background-color: #e6dfd3 !important;
    color: var(--color-text-primary) !important;
}

/* ヘッダー */
.premium-header {
    background: linear-gradient(180deg, var(--color-white-pure) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-beige-soft);
}

/* ナビゲーションリンク */
.nav-link,
.menu-item a {
    color: var(--color-text-primary) !important;
}

.nav-link:hover,
.menu-item a:hover {
    color: var(--color-beige-dark) !important;
}

/* セクション背景 */
/* section-backgrounds.css で個別に制御 */
section:not(.page-hero) {
    background-color: transparent;
}

section.page-hero {
    background-color: #e6dfd3 !important;
}

/* カード */
.service-card,
.program-card,
.pricing-card,
.testimonial-card,
.blog-card,
.overview-card,
.concept-item,
.trainer-card {
    background: var(--color-white-pure) !important;
    border: 1px solid var(--color-beige-soft) !important;
    box-shadow: 0 4px 15px rgba(180, 164, 144, 0.08) !important;
}

.service-card:hover,
.program-card:hover,
.blog-card:hover,
.overview-card:hover {
    box-shadow: 0 8px 25px rgba(180, 164, 144, 0.15) !important;
    transform: translateY(-5px);
}

/* セクションラベル */
.section-label {
    color: var(--color-beige-dark) !important;
    opacity: 0.9;
}

/* セクションタイトル */
.section-title,
.display-heading,
.cards-title {
    color: var(--color-text-primary) !important;
}

/* サブタイトル */
.section-subtitle,
.subtitle-large {
    color: var(--color-text-secondary) !important;
}

/* ボタン - プライマリー */
.btn-primary {
    background: linear-gradient(135deg, var(--color-beige-medium) 0%, var(--color-beige-dark) 100%) !important;
    border: none !important;
    color: var(--color-white-pure) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-beige-dark) 0%, var(--color-beige-deep) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(180, 164, 144, 0.3) !important;
}

/* ボタン - アウトライン */
.btn-outline {
    border: 2px solid var(--color-beige-medium) !important;
    color: var(--color-beige-dark) !important;
    background: transparent !important;
}

.btn-outline:hover {
    background: var(--color-beige-medium) !important;
    color: var(--color-white-pure) !important;
}

/* 価格表示 */
.price-amount {
    color: var(--color-beige-dark) !important;
}

/* バッジ */
.pricing-badge,
.program-badge,
.trainer-badge {
    background: linear-gradient(135deg, var(--color-accent-rose) 0%, var(--color-accent-terra) 100%) !important;
    color: var(--color-white-pure) !important;
}

/* コンセプトアイコン */
.concept-icon {
    background: linear-gradient(135deg, var(--color-beige-medium) 0%, var(--color-beige-dark) 100%) !important;
    color: var(--color-white-pure) !important;
}

/* CTAセクション */
.cta-section {
    background: linear-gradient(135deg, var(--color-beige-medium) 0%, var(--color-beige-dark) 100%) !important;
}

.cta-section .cta-title,
.cta-section .cta-description {
    color: var(--color-white-pure) !important;
}

/* アクセスセクション */
.access-section {
    background: var(--color-beige-light) !important;
}

.access-details {
    background: var(--color-white-pure) !important;
    border: 1px solid var(--color-beige-soft) !important;
}

/* フッター */
footer {
    background: #666666 !important;
    background: linear-gradient(180deg, #777777 0%, #555555 100%) !important;
    color: #ffffff !important;
}

/* プログラムセクション */
.programs-section {
    background: var(--color-beige-light) !important;
}

/* 料金セクション */
.pricing-section {
    background: var(--color-white-cream) !important;
}

/* お客様の声セクション */
.testimonials-section {
    background: var(--color-beige-light) !important;
}

/* ブログセクション */
.blog-section {
    background: var(--color-white-cream) !important;
}

.blog-category {
    background: linear-gradient(135deg, var(--color-beige-medium) 0%, var(--color-beige-dark) 100%) !important;
}

/* フォーム要素 */
input,
textarea,
select {
    background: var(--color-white-pure) !important;
    border: 1px solid var(--color-beige-soft) !important;
    color: var(--color-text-primary) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-beige-medium) !important;
    box-shadow: 0 0 0 3px rgba(212, 196, 176, 0.1) !important;
}

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

a:hover {
    color: var(--color-beige-deep) !important;
}

.service-link,
.program-link,
.blog-link {
    color: var(--color-beige-dark) !important;
}

/* モバイルメニュー */
.mobile-menu {
    background: var(--color-white-cream) !important;
}

.mobile-menu-item a {
    color: var(--color-text-primary) !important;
}

/* プログレスバー */
.header-progress .progress-bar {
    background: linear-gradient(90deg, var(--color-beige-medium) 0%, var(--color-beige-dark) 100%) !important;
}

/* スクロールインジケーター（ヒーローセクション） */
.scroll-indicator {
    color: var(--color-white-pure) !important;
}

/* トレーナーセクション */
.trainer-section {
    background: var(--color-white-cream) !important;
}

/* フィーチャーセクション（暗い背景を明るく） */
.features-section {
    background: linear-gradient(rgba(237, 228, 211, 0.9), rgba(237, 228, 211, 0.9)), 
                url('https://images.unsplash.com/photo-1540497077202-7c8a3999166f?w=1920&h=600&fit=crop') center/cover fixed !important;
}

.features-section .section-title,
.features-section .section-subtitle,
.features-section .feature-item h3,
.features-section .feature-item p {
    color: var(--color-text-primary) !important;
}

.feature-icon {
    background: var(--color-white-pure) !important;
    border: 2px solid var(--color-beige-medium) !important;
    color: var(--color-beige-dark) !important;
}

/* テキストシャドウを削除（明るい背景用） */
.section-title,
.cards-title,
.feature-item h3 {
    text-shadow: none !important;
}

/* グラデーションオーバーレイ調整 */
.hero-background::before {
    background: linear-gradient(
        180deg, 
        rgba(0, 0, 0, 0.2) 0%, 
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.4) 100%
    ) !important;
}