/**
 * Mobile Header & Hero Fix - STRONGEST VERSION
 * スマホ実機でのファーストビュー問題を確実に修正
 * - ヘッダーロゴが大きすぎる
 * - ヒーローセクションのテキストが隠れる
 */

/* ===== ヘッダーの最適化（最強設定） ===== */

/* 全デバイス共通 - ロゴを小さく */
.logo-image {
    max-height: 50px !important;
}

/* タブレット以下 */
@media (max-width: 768px) {
    /* ヘッダー全体を小さく */
    .header {
        padding: 8px 0 !important;
        min-height: auto !important;
    }
    
    .header-content {
        padding: 8px 0 !important;
        min-height: auto !important;
    }
    
    /* ロゴを小さく - 複数のセレクタで確実に */
    .logo-image,
    img.logo-image,
    .logo img,
    .header .logo img {
        height: 32px !important;
        max-height: 32px !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* モバイルメニューボタンも小さく */
    .mobile-menu-toggle {
        font-size: 20px !important;
        padding: 8px !important;
    }
}

/* スマホサイズ */
@media (max-width: 576px) {
    /* さらに小さく */
    .header {
        padding: 6px 0 !important;
    }
    
    .header-content {
        padding: 6px 0 !important;
    }
    
    /* ロゴをさらに小さく */
    .logo-image,
    img.logo-image,
    .logo img,
    .header .logo img {
        height: 28px !important;
        max-height: 28px !important;
    }
    
    .mobile-menu-toggle {
        font-size: 18px !important;
        padding: 6px !important;
    }
}

/* ===== ヒーローセクションの最適化（最強設定） ===== */

/* 全デバイス - ヒーローの基本設定 */
.hero {
    position: relative !important;
}

/* タブレット以下 */
@media (max-width: 768px) {
    .hero,
    section.hero,
    .hero-section {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 70px 20px 40px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    .hero-content {
        padding-top: 10px !important;
        width: 100% !important;
        margin-top: 0 !important;
        transform: none !important;
    }
    
    /* バッジを小さく */
    .hero-badge-simple {
        font-size: 12px !important;
        margin-bottom: 20px !important;
    }
    
    /* タイトルを調整 */
    .hero-title-new {
        font-size: 36px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }
    
    /* サブタイトル */
    .hero-subtitle-new {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 30px !important;
    }
    
    /* CTAボタン */
    .btn-hero-primary {
        padding: 18px 30px !important;
        font-size: 16px !important;
    }
    
    .btn-hero-text {
        font-size: 16px !important;
    }
    
    .btn-hero-note {
        font-size: 11px !important;
    }
    
    /* 統計情報 */
    .hero-stats-compact {
        margin-top: 30px !important;
        font-size: 13px !important;
    }
}

/* スマホサイズ */
@media (max-width: 576px) {
    .hero,
    section.hero,
    .hero-section {
        min-height: 0 !important;
        height: auto !important;
        padding: 60px 15px 30px !important;
    }
    
    .hero-content {
        padding-top: 5px !important;
        margin-top: 0 !important;
    }
    
    .hero-badge-simple {
        font-size: 11px !important;
        margin-bottom: 15px !important;
    }
    
    .hero-title-new {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }
    
    .hero-subtitle-new {
        font-size: 14px !important;
        margin-bottom: 25px !important;
    }
    
    .btn-hero-primary {
        padding: 16px 25px !important;
        font-size: 15px !important;
        width: 100% !important;
    }
    
    .btn-hero-text {
        font-size: 15px !important;
    }
    
    .btn-hero-note {
        font-size: 10px !important;
    }
    
    .hero-stats-compact {
        margin-top: 25px !important;
        font-size: 12px !important;
    }
}

/* ===== 小型スマホ（375px以下） ===== */
@media (max-width: 375px) {
    .header {
        padding: 6px 0 !important;
    }
    
    .logo-image {
        height: 28px !important;
    }
    
    .hero {
        padding: 65px 12px 25px !important;
    }
    
    .hero-title-new {
        font-size: 24px !important;
    }
    
    .hero-subtitle-new {
        font-size: 13px !important;
    }
    
    .btn-hero-primary {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }
}

/* ===== 超小型デバイス（320px） ===== */
@media (max-width: 320px) {
    .logo-image {
        height: 25px !important;
    }
    
    .hero {
        padding: 60px 10px 20px !important;
    }
    
    .hero-title-new {
        font-size: 22px !important;
    }
    
    .hero-subtitle-new {
        font-size: 12px !important;
    }
}

/* ===== iOS Safari特有の修正 ===== */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* iOSでのビューポートの高さ問題を修正 */
        .hero {
            min-height: calc(100vh - 60px) !important;
            max-height: none !important;
        }
    }
    
    @media (max-width: 576px) {
        .hero {
            min-height: calc(100vh - 50px) !important;
        }
    }
}

/* ===== ファーストビュー確実に見える設定 ===== */
@media (max-width: 768px) {
    /* ヘッダーとヒーローの組み合わせ */
    body {
        padding-top: 0 !important;
    }
    
    /* ヒーローコンテンツが確実に見える */
    .hero-content {
        position: relative !important;
        z-index: 2 !important;
        transform: translateY(0) !important;
    }
    
    /* 背景画像の調整 */
    .hero-image {
        background-position: center center !important;
    }
}

/* ===== 最終手段：超強力な上書き ===== */
@media (max-width: 768px) {
    /* ヒーローセクションの高さを確実に制御 */
    [class*="hero"] {
        min-height: 0 !important;
        height: auto !important;
    }
    
    /* ロゴサイズの確実な制御 */
    img[src*="logo"],
    img[alt*="ロゴ"],
    img[alt*="エムケイソルテック"] {
        max-height: 32px !important;
    }
}

@media (max-width: 576px) {
    img[src*="logo"],
    img[alt*="ロゴ"],
    img[alt*="エムケイソルテック"] {
        max-height: 28px !important;
    }
}