/**
 * セクション間の余白をモバイルで最適化
 * 問題セクション→サービスセクション→計算機セクション の間隔を自然に
 */

/* ===== モバイル（768px以下）：余白を大幅に削減 ===== */
@media (max-width: 768px) {
    /* 問題セクション（paddingはproblems-section.cssで管理） */
    
    /* 問題グリッド下のマージン削減 */
    .problems-grid {
        margin-bottom: 30px !important; /* 50px → 30px */
    }
    
    /* ソリューションボックス下の余白を削減 */
    .problems-solution {
        margin-bottom: 0 !important;
    }
    
    /* サービスセクション */
    .service {
        padding: 40px 20px !important; /* 上下の余白を削減 */
    }
    
    /* サービスコンテンツを1列に */
    .service-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* 計算機セクション */
    .quick-calculator {
        padding: 50px 20px !important;
    }
}

/* ===== スマートフォン（576px以下）：さらに削減 ===== */
@media (max-width: 576px) {
    /* 問題セクション（paddingはproblems-section.cssで管理） */
    
    .problems-grid {
        margin-bottom: 20px !important;
        gap: 20px !important;
    }
    
    /* サービスセクション */
    .service {
        padding: 30px 15px !important;
    }
    
    .service-content {
        gap: 25px !important;
    }
    
    /* サービス画像の下マージン削減 */
    .service-visual {
        margin-bottom: 0 !important;
    }
    
    .service-image {
        margin-bottom: 0 !important;
    }
    
    /* 計算機セクション */
    .quick-calculator {
        padding: 40px 15px !important;
    }
    
    .quick-calculator h2 {
        font-size: 24px !important;
        margin-bottom: 15px !important;
    }
    
    .quick-calculator > div.container > p {
        font-size: 15px !important;
        margin-bottom: 30px !important;
    }
}

/* ===== 小型スマートフォン（375px以下） ===== */
@media (max-width: 375px) {
    /* problems-sectionのpaddingはproblems-section.cssで管理 */
    
    .problems-grid {
        margin-bottom: 15px !important;
    }
    
    .service {
        padding: 25px 12px !important;
    }
    
    .quick-calculator {
        padding: 30px 12px !important;
    }
}

/* ===== 画像のスクロール問題修正は service-section-mobile-final.css に移動 ===== */

/* ===== 全体的なスクロール修正 ===== */
@media (max-width: 768px) {
    /* セクション全体でスクロール可能に */
    .problems-section,
    .service,
    .quick-calculator {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 画像周辺のコンテナ */
    .container {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }
}