/**
 * Mobile Device Fix
 * スマホ実機とデスクトップのモバイルビューで表示が異なる問題を修正
 * iOS Safari、Android Chrome対応
 */

/* ===== 基本設定の強化 ===== */
html {
    -webkit-text-size-adjust: 100%; /* iOSでのテキスト自動拡大を防止 */
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden !important;
    width: 100%;
    min-width: 320px; /* 最小幅を設定 */
}

/* ===== 全ての要素のmax-width制限（PPAフックセクション除外） ===== */
*:not(.ppa-hook-section):not(.ppa-hook-section *) {
    max-width: 100%;
}

html,
body,
div,
section {
    max-width: none; /* これらの要素は例外 */
}

/* ===== iOS Safari対策 ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari専用 */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* iOSでの固定要素の問題を修正 */
    .header {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ===== 横スクロール完全防止 ===== */
@media (max-width: 576px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }
    
    *:not(.ppa-hook-section):not(.ppa-hook-section *) {
        box-sizing: border-box !important;
    }
    
    /* コンテナの確実な制限（PPAフックセクション除外） */
    .container:not(.ppa-hook-section .container),
    section:not(.ppa-hook-section),
    div:not(.ppa-hook-section):not(.ppa-hook-section *) {
        max-width: 100% !important;
    }
    
    /* 画像・動画の制限 */
    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* テーブルの制限 */
    table {
        max-width: 100% !important;
    }
    
    /* Flexbox要素の制限 */
    [style*="display: flex"],
    [style*="display:flex"],
    .flex,
    .d-flex {
        max-width: 100% !important;
    }
}

/* ===== モバイルデバイス特有の問題修正 ===== */
@media (max-width: 576px) {
    /* タップハイライトの最適化 */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* リンクとボタンのタップ領域 */
    a,
    button {
        -webkit-touch-callout: none;
        min-height: 44px; /* Appleのガイドライン */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* フォーム要素の調整 */
    input,
    textarea,
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 16px !important; /* iOSでのズーム防止 */
    }
    
    /* テキストの選択を最適化 */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    li {
        -webkit-user-select: text;
        user-select: text;
    }
}

/* ===== 高解像度ディスプレイ対応 ===== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    body {
        font-weight: 400; /* Retinaディスプレイで細く見える問題を防止 */
    }
}

/* ===== ランドスケープモード対応 ===== */
@media (max-width: 896px) and (orientation: landscape) {
    body {
        font-size: 14px;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ===== 小型スマホ対応（iPhone SE等） ===== */
@media (max-width: 375px) {
    body {
        font-size: 14px;
    }
    
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    h1 {
        font-size: 28px !important;
    }
    
    h2 {
        font-size: 24px !important;
    }
    
    h3 {
        font-size: 20px !important;
    }
}

/* ===== 超小型デバイス対応（320px） ===== */
@media (max-width: 320px) {
    body {
        font-size: 13px;
    }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ===== デバッグ用（開発時のみ） ===== */
/* 横スクロールの原因を特定する場合は、以下のコメントを外す */
/*
@media (max-width: 576px) {
    * {
        outline: 1px solid red !important;
    }
}
*/