/* ========================================
   HERO EXTENDED STYLES - ヒーローセクション拡張スタイル
   sections.cssの基本ヒーロースタイルを拡張・上書き
   ======================================== */

/* ========== メインヒーロー拡張スタイル ========== */
/* ⚠️ 注意: sections.cssの基本スタイルを拡張・上書きします */

/* ヒーローコンテンツ - レイアウト改良版 */
.hero-content {
    text-align: center;
    max-width: 1200px; /* 900px → 1200px に拡大（文字改行を防ぐ） */
    margin: 0 auto;
    position: relative;
    padding: 0 30px; /* 20px → 30px に拡大（左右の余白を確保） */
    
    /* 🔧 【追加】文字重なり防止のための設定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* 要素間の最小間隔を確保 */
}

/* ヒーロータイトル - 文字重なり対策版 */
.hero-title {
    font-size: 3.2rem; /* 3.5rem → 3.2rem に調整（文字サイズを少し小さく） */
    font-weight: 700;
    margin-bottom: 30px; /* 20px → 30px に拡大（サブタイトルとの距離を確保） */
    color: #1a1a1a;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    animation: fadeInUp 1s ease-out;
    white-space: nowrap; /* normal → nowrap に変更（改行を防ぐ） */
    text-align: center; /* 中央揃えを明示 */
    line-height: 1.2; /* 行間を調整 */
}

/* ヒーローサブタイトル - 読みやすさ改良版 */
.hero-subtitle {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6; /* 1.8 → 1.6 に調整（行間を少し狭く） */
    animation: fadeInUp 1s ease-out 0.3s both;
    white-space: normal; /* nowrap → normal に変更（改行を許可） */
    text-align: center; /* 中央揃えを明示 */
    max-width: 600px; /* 🔧 【追加】最大幅を設定して読みやすく */
    margin-left: auto; /* 中央配置 */
    margin-right: auto; /* 中央配置 */
}

/* ヒーローボタン - レイアウト改良版 */
.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out 0.6s both;
}

/* ========== レスポンシブ対応ヒーロースタイル ========== */

/* 480px以下での基本レスポンシブ対応 */
@media (max-width: 480px) {
    /* ヒーローセクション全体 */
    .hero-section {
        height: 100vh;
        padding: 200px 15px 0 15px; /* ロゴ分の適切な上部余白 */
        display: flex;
        flex-direction: column; /* 基本スタイルを上書き */
        align-items: center;
        justify-content: flex-start; /* center → flex-start に変更 */
        box-sizing: border-box;
    }
    
    /* PC版・モバイル版サブタイトル切り替え */
    .hero-subtitle {
        display: none; /* PC版を非表示 */
    }
    
    .hero-subtitle-mobile {
        display: block; /* モバイル版を表示 */
    }
    
    /* ヒーローコンテンツ - モバイル最適化 */
    .hero-content {
        max-width: 100%;
        width: 100%;
        padding: 0;
        margin: 0 auto; /* 複雑なマージンを削除、シンプルに */
        gap: 18px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: auto;
    }
    
    /* ヒーロータイトル - モバイル版 */
    .hero-title {
        font-size: 1.8rem;
        margin-bottom: 15px; /* 20px → 15px に縮小（要素を上に） */
        line-height: 1.4;
        padding: 0 15px; /* 5px → 15px に拡大（中央寄せ改善） */
        white-space: normal;
    }
    
    /* ヒーローサブタイトル - モバイル版 */
    .hero-subtitle {
        font-size: 1.05rem;
        line-height: 1.5;
        margin-bottom: 20px;
        padding: 0 15px;
        animation: fadeInUp 1s ease-out 0.3s both; /* アニメーション追加 */
    }
    
    /* ヒーローボタン - モバイル版 */
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        align-items: center;
        margin-top: 15px; /* 20px → 15px に縮小（要素を上に） */
        padding: 0 15px; /* パディング追加（中央寄せ改善） */
        box-sizing: border-box;
    }
    
    .hero-buttons .btn {
        width: 90%; /* 85% → 90% に拡大（中央寄せ改善） */
        max-width: 320px; /* 300px → 320px に拡大 */
        padding: 16px 20px;
        font-size: 0.95rem;
        border-radius: 25px;
        text-align: center;
        display: block;
        font-weight: 600;
        transition: all 0.3s ease;
        margin: 0 auto; /* 中央寄せを明示 */
    }
    
    .hero-buttons .btn-primary {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        box-shadow: 0 4px 15px rgba(0,123,255,0.3);
    }
    
    .hero-buttons .btn-secondary {
        background: transparent;
        color: #007bff;
        border: 2px solid #007bff;
    }
}

/* 480*1040サイズ専用調整（縦長画面） */
@media (max-width: 480px) and (min-height: 1000px) {
    .hero-section {
        padding: 180px 15px 0 15px; /* シンプルに調整 */
        justify-content: flex-start; /* 確実に上寄せ */
    }
}

/* ========== 追加のレスポンシブ対応 ========== */

/* タブレット・中間サイズ対応 */
@media (min-width: 481px) and (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
        max-width: 500px;
    }
    
    .hero-content {
        padding: 0 25px;
        gap: 15px;
    }
}

/* 大画面対応 */
@media (min-width: 1400px) {
    .hero-title {
        font-size: 3.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
        max-width: 700px;
    }
    
    .hero-content {
        max-width: 1400px;
    }
}

/* ========== PC版・モバイル版切り替え（デフォルト状態） ========== */

/* PC版サブタイトル（デフォルト表示） */
.hero-subtitle {
    display: block; /* PC版を表示 */
    animation: fadeInUp 1s ease-out 0.3s both;
}

/* モバイル版サブタイトル（デフォルト非表示） */
.hero-subtitle-mobile {
    display: none; /* モバイル版を非表示 */
}