/**
 * サービスセクション画像 - モバイル専用最終修正
 * 画像サイズを適切に制限し、スクロールを確保
 */

/* ===== モバイル（768px以下）：画像サイズ制限 ===== */
@media (max-width: 768px) {
    /* サービスセクション全体 */
    .service {
        overflow: visible !important;
        position: relative !important;
    }
    
    /* コンテナ */
    .service .container {
        overflow: visible !important;
    }
    
    /* サービスコンテンツ */
    .service-content {
        display: block !important;
        width: 100% !important;
    }
    
    /* 画像ビジュアルエリア */
    .service-visual {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 25px 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    /* 画像コンテナ - 高さ制限 */
    .service-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 220px !important; /* 固定高さ */
        max-height: 220px !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        background: #f3f4f6 !important;
    }
    
    /* 画像本体 - object-fitで適切に表示 */
    .service-image img {
        width: 100% !important;
        height: 220px !important; /* 固定高さ */
        max-height: 220px !important;
        object-fit: cover !important; /* 画像を適切にトリミング */
        object-position: center !important;
        display: block !important;
        border-radius: 15px !important;
    }
    
    /* バッジ */
    .service-image-badge {
        position: absolute !important;
        bottom: 15px !important;
        left: 15px !important;
        z-index: 10 !important;
        font-size: 13px !important;
        padding: 10px 18px !important;
    }
    
    .service-image-badge i {
        font-size: 15px !important;
    }
}

/* ===== スマートフォン（576px以下）：さらに小さく ===== */
@media (max-width: 576px) {
    .service-image {
        height: 200px !important;
        max-height: 200px !important;
    }
    
    .service-image img {
        height: 200px !important;
        max-height: 200px !important;
    }
    
    .service-image-badge {
        bottom: 12px !important;
        left: 12px !important;
        font-size: 12px !important;
        padding: 8px 16px !important;
    }
    
    .service-image-badge i {
        font-size: 14px !important;
    }
}

/* ===== 小型スマートフォン（375px以下）：最小サイズ ===== */
@media (max-width: 375px) {
    .service-image {
        height: 180px !important;
        max-height: 180px !important;
    }
    
    .service-image img {
        height: 180px !important;
        max-height: 180px !important;
    }
    
    .service-image-badge {
        bottom: 10px !important;
        left: 10px !important;
        font-size: 11px !important;
        padding: 6px 14px !important;
    }
    
    .service-image-badge i {
        font-size: 13px !important;
    }
}

/* ===== スクロールの確保（最重要） ===== */
@media (max-width: 768px) {
    /* body全体 */
    body {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
    }
    
    /* サービスセクション */
    .service,
    .service .container,
    .service-content,
    .service-visual,
    .service-image {
        /* スクロールをブロックしない */
        pointer-events: auto !important;
        touch-action: auto !important;
        overflow: visible !important;
    }
    
    /* 画像自体はスクロールをブロックしない */
    .service-image img {
        pointer-events: none !important;
    }
    
    /* バッジもスクロールをブロックしない */
    .service-image-badge {
        pointer-events: none !important;
    }
}

/* ===== 疑似要素の削除 ===== */
@media (max-width: 768px) {
    .service-image::before,
    .service-image::after,
    .service-visual::before,
    .service-visual::after {
        content: none !important;
        display: none !important;
    }
}

/* ===== iOS Safari専用修正 ===== */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .service-image {
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
        }
        
        body {
            -webkit-overflow-scrolling: touch !important;
        }
    }
}