/* ==========================================
   モバイル横スクロール防止（完全版）
   ========================================== */

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* 全てのセクションで横はみ出し防止 */
.section,
.container,
.container-narrow,
.practice-detail,
.practice-section-light,
.practice-section-dark,
.team,
.mission,
.company,
.contact-section,
.hero,
.hero-content {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* 画像の横はみ出し防止 */
img {
    max-width: 100%;
    height: auto;
}

/* モバイル専用の厳密な制御 */
@media (max-width: 768px) {
    /* Practiceタイトルのアニメーション無効化 */
    .practice-main-title {
        transform: translateX(0) !important;
        opacity: 1 !important;
        animation: none !important;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: center !important;
    }
    
    /* Practice詳細セクションを確実に制限 */
    .practice-detail {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100%;
    }
    
    /* Practiceヘッダーを中央揃え */
    .practice-header {
        text-align: center !important;
    }
    
    /* Practice番号も中央揃え */
    .practice-num {
        text-align: center !important;
        display: block !important;
    }
    
    /* 全てのテキスト要素を制限 */
    .practice-lead,
    .practice-body,
    .practice-body p {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    
    /* ヒーローセクションも厳密に */
    .hero {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .hero-content {
        max-width: 90% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .hero-title-main,
    .hero-title-sub {
        text-align: center !important;
    }
}