@charset "UTF-8";

/* =========================================
   HERO (ファーストビュー)
========================================= */
.hero {
    position: relative;
    min-height: 100dvh; /* スマホのブラウザUIを考慮 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light, #f5f3ef); /* クリーンな背景 */
    overflow: hidden;
    padding: 120px 20px 80px;
}

/* クリーンな背景に、赤のうっすらとしたオーラだけを残す */
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 70%;
    height: 100%;
    background: radial-gradient(circle, rgba(211, 47, 47, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.hero-inner {
    max-width: 880px;
    text-align: center;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ▼ ロゴ ▼ */
.hero-logo {
    display: inline-block;
    margin-bottom: 30px;
}
.hero-logo img {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08));
}

/* ▼ 文字を途中で改行させない魔法のクラス ▼ */
.keep-all {
    display: inline-block;
}

/* ▼ キャッチコピー（PCは前の上品なサイズに戻す） ▼ */
.hero-catch {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(16px, 3.5vw, 24px); /* 大きすぎない上品なサイズに */
    color: var(--text);
    margin-bottom: 24px;
    letter-spacing: 0.1em;
    line-height: 1.8;
    font-weight: 700; /* 900(極太)から700(太字)に戻して品よく */
}

.hero-catch .line-gold {
    display: inline-block;
    border-bottom: 3px solid var(--accent);
    padding-bottom: 2px;
}

/* ▼ メインタイトル ▼ */
.hero-title {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(28px, 6vw, 54px);
    font-weight: 900;
    color: var(--primary);
    line-height: 1.4;
    margin-bottom: 24px;
    letter-spacing: 0.05em;
}

.hero-title .accent { 
    color: var(--accent); 
}

/* ▼ サブテキスト ▼ */
.hero-sub {
    font-size: clamp(14px, 3.5vw, 16px);
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.9;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
}


/* =========================================
   ▼▼▼ CTAボタンエリア ▼▼▼
========================================= */
.hero-cta-wrap {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
}

/* 1. メインボタン（無料カウンセリング） */
.cta-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 20px 48px;
    background: linear-gradient(135deg, var(--accent) 0%, #a52020 100%); 
    color: var(--white);
    text-decoration: none;
    border-radius: 50px; 
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(211, 47, 47, 0.35); 
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-btn:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 12px 35px rgba(211, 47, 47, 0.5); 
}

/* キラッと光るアニメーション */
.cta-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    animation: shiny 4s infinite; 
}

@keyframes shiny {
    0% { left: -60%; }
    20% { left: 120%; }
    100% { left: 120%; }
}

/* 2. サブボタン（S-Classを詳しく見る） */
.cta-btn.outline {
    background: var(--white);
    color: var(--accent);
    border: 2px solid var(--accent);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cta-btn.outline:hover {
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 8px 25px rgba(211, 47, 47, 0.3);
}

.cta-btn.outline::after { 
    display: none; 
}

/* ▼ 注釈テキスト ▼ */
.cta-note {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-mute);
    font-weight: 700;
}

/* =========================================
   ▼▼▼ 実績バッジ ▼▼▼
========================================= */
.hero-meta {
    margin-top: 40px;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-meta span {
    background: var(--white);
    border: 1px solid rgba(211, 47, 47, 0.15);
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-meta span::before { 
    content: '★'; 
    color: var(--accent); 
    font-size: 14px;
}

/* =========================================
   ▼▼▼ スマホ用レスポンシブ (600px以下) ▼▼▼
========================================= */
@media (max-width: 600px) {
    .hero {
        padding: 100px 16px 60px;
    }
    
    /* SP: 太すぎた文字を 700(太字) に落としてシュッとさせる */
    .hero-catch {
        font-size: clamp(15px, 4.5vw, 18px); 
        line-height: 1.6;
        margin-bottom: 20px;
        font-weight: 700; 
    }

    .hero-title {
        font-size: clamp(22px, 6.5vw, 28px); 
        line-height: 1.5;
        margin-bottom: 20px;
        font-weight: 700; /* 極太(900)から太字(700)へ軽減 */
    }
    
    .hero-sub {
        font-size: clamp(13px, 3.5vw, 15px);
        line-height: 1.9;
        margin-bottom: 32px;
        font-weight: 500;
    }

    /* ボタンを縦並び */
    .hero-cta-wrap {
        flex-direction: column;
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        gap: 12px;
    }
    
    .cta-btn {
        width: 100%;
        text-align: center;
        padding: 18px 20px;
        font-size: 15px;
    }
    
    .hero-meta {
        gap: 12px;
    }
    
    .hero-meta span {
        font-size: 11px;
        padding: 8px 16px;
    }
}