/**
 * Mobile Force Fix - 強制的にモバイル表示を修正
 * スマホ実機で確実に正しく表示されるための最強設定
 */

/* ===== 最優先：横幅の完全制御（スマホ実機対応強化） ===== */
html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== 全要素の横幅制限（最強） ===== */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* ===== モバイル専用の強制設定（実機対応強化） ===== */
@media (max-width: 768px) {
    /* 全てのdiv、section、articleの横幅を制限（PPAフックセクション除外） */
    div:not(.ppa-hook-section):not(.ppa-hook-section *),
    section:not(.ppa-hook-section),
    article:not(.ppa-hook-section):not(.ppa-hook-section *),
    main:not(.ppa-hook-section):not(.ppa-hook-section *),
    header:not(.ppa-hook-section):not(.ppa-hook-section *),
    footer:not(.ppa-hook-section):not(.ppa-hook-section *),
    nav:not(.ppa-hook-section):not(.ppa-hook-section *),
    aside:not(.ppa-hook-section):not(.ppa-hook-section *) {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* コンテナの確実な制限（PPAフックセクション除外） */
    .container:not(.ppa-hook-section .container) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 選ばれる理由セクションのコンテナとセクション全体に40px余白を強制 */
    /* NOTE: reasons-sectionは専用CSS (reasons-clean.css) で管理 */
    
    /* 全てのセクションの横幅制限（主要セクション除外：専用CSSで管理） */
    section:not(.ppa-hook-section):not(.problems-section):not(.reasons-section):not(.reason-details-section):not(.service):not(.comparison-section):not(.misconception-section):not(.simulation-reference):not(.support-section):not(.warranty):not(.case-studies):not(.faq):not(.process):not(.contact):not(.cta-section) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 画像・動画・iframe */
    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* テーブル */
    table {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* グリッドとフレックス */
    [class*="grid"],
    [class*="flex"],
    [style*="display: grid"],
    [style*="display: flex"] {
        max-width: 100% !important;
    }
    
    /* NOTE: reasons-gridは専用CSS (reasons-clean.css) で管理 */
}

/* ===== モバイル（576px以下）の徹底対策（実機対応） ===== */
@media (max-width: 576px) {
    /* ビューポート幅を超える要素を強制的に収める（PPAフックセクション除外） */
    *:not(.ppa-hook-section):not(.ppa-hook-section *) {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 例外：html、body、比較表のラッパー */
    html,
    body {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* 比較表は横スクロール可 */
    .comparison-table-wrapper {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* ヘッダー */
    .header,
    .header-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ナビゲーション */
    .nav-menu {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ヒーローセクション */
    .hero,
    .hero-content {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 全てのカード */
    [class*="card"],
    [class*="-card"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* グリッドを1列に強制 */
    [class*="grid"]:not(.comparison-table-wrapper *) {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* フッター */
    .footer,
    .footer-content {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* パディングの調整（PPAフックセクション除外） */
    .container:not(.ppa-hook-section .container):not(.reasons-section .container) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* NOTE: reasons-sectionは専用CSS (reasons-clean.css) で管理 */
    
    /* テキストのオーバーフロー対策 */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    a,
    li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: keep-all !important;
        max-width: 100% !important;
    }
    
    /* Flexboxの子要素 */
    [style*="display: flex"] > *,
    [class*="flex"] > * {
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    
    /* アイコンは例外 */
    i,
    .icon,
    [class*="icon"] {
        flex-shrink: 0 !important;
    }

    /* NOTE: reasons-gridは専用CSS (reasons-clean.css) で管理 */
}

/* ===== 小型スマホ（375px以下）===== */
@media (max-width: 375px) {
    .container:not(.ppa-hook-section .container) {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* NOTE: reasons-sectionは専用CSS (reasons-clean.css) で管理 */
    
    body {
        font-size: 14px !important;
    }
    
    h1 {
        font-size: 26px !important;
    }
    
    h2 {
        font-size: 22px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }

    /* NOTE: reasons-gridは専用CSS (reasons-clean.css) で管理 */
}

/* ===== 超小型デバイス（320px） ===== */
@media (max-width: 320px) {
    .container:not(.ppa-hook-section .container) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* NOTE: reasons-sectionは専用CSS (reasons-clean.css) で管理 */
    
    body {
        font-size: 13px !important;
    }

    /* NOTE: reasons-gridは専用CSS (reasons-clean.css) で管理 */
}

/* ===== iOS Safari専用の修正 ===== */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 固定ヘッダーのちらつき防止 */
    .header {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
}

/* ===== タッチデバイス用の最適化 ===== */
@media (hover: none) and (pointer: coarse) {
    /* タッチデバイスでのみ適用 */
    a,
    button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    input,
    textarea,
    select {
        font-size: 16px !important; /* ズーム防止 */
    }
}

/* ===== デバッグ用（問題がある場合は有効化） ===== */
/*
@media (max-width: 576px) {
    * {
        outline: 1px solid red !important;
        position: relative !important;
    }
    
    *::before {
        content: attr(class) !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        background: rgba(255, 0, 0, 0.8) !important;
        color: white !important;
        font-size: 10px !important;
        padding: 2px !important;
        z-index: 10000 !important;
    }
}
*/