/* ========================================
   モバイル横スクロール修正用CSS
   ======================================== */

/* 全体的な横スクロール防止 */
@media (max-width: 768px) {
    /* ルートレベルでの横スクロール防止 */
    html {
        overflow-x: hidden;
        width: 100%;
    }
    
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    
    /* メインコンテナの制限 */
    #sections-container {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    /* 各セクションラッパーの制限 */
    .section-wrapper {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    /* 固定幅の要素を相対幅に変更 */
    div[style*="width:"], 
    div[style*="max-width:"] {
        max-width: 100% !important;
    }
    
    /* 画像とメディア要素の制限（Heroセクションの動画は除外） */
    img, video, iframe:not(.section-hero .video-background iframe) {
        max-width: 100% !important;
        height: auto;
    }
    
    /* Heroセクションの動画は独自のスタイルを維持 */
    .section-hero .video-background iframe {
        /* hero.cssのスタイルを優先 */
    }
    
    /* テーブルのレスポンシブ化 */
    table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
    }
    
    /* フレックスボックスの調整（講師セクションは除外） */
    .flex-container:not(.instructor-row),
    [class*="flex"]:not(.instructor-row):not(.instructors-wrapper) {
        flex-wrap: wrap;
    }
    
    /* グリッドレイアウトの調整 */
    .grid-container,
    [class*="grid"] {
        grid-template-columns: 1fr;
    }
    
    /* パディングとマージンの調整（講師セクションは除外） */
    section:not(.instructors-section) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 絶対位置要素の制限 */
    [style*="position: absolute"],
    [style*="position:absolute"] {
        max-width: 100vw !important;
    }
    
    /* ボタンとCTAの調整 */
    button, 
    .button, 
    .cta-button,
    [class*="btn"] {
        max-width: calc(100% - 30px);
        margin-left: auto;
        margin-right: auto;
    }
    
    /* カードレイアウトの調整 */
    .card,
    [class*="card"] {
        max-width: 100%;
        margin: 10px 0;
    }
    
    /* 横並びレイアウトの縦並び化（講師セクションは除外） */
    .row:not(.instructor-row):not(.row-1):not(.row-2):not(.row-3):not(.row-4),
    [class*="row"]:not(.instructor-row):not(.row-1):not(.row-2):not(.row-3):not(.row-4) {
        flex-direction: column;
    }
    
    /* 固定サイズのアイコン・ロゴの調整（ヘッダーのロゴは除外） */
    .icon,
    .logo:not(.logo-img),
    [class*="icon"],
    [class*="logo"]:not(.logo-img) {
        max-width: 60px;
        max-height: 60px;
    }
    
    /* ヘッダーのロゴは独自サイズを維持 */
    .logo-img {
        max-width: none;
        max-height: none;
    }
}

/* 小型モバイル用追加調整 */
@media (max-width: 480px) {
    section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* さらに小さい画面用の調整 */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* 長いテキストの折り返し */
    p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}