/* スマホ対応の最終調整 - 2025/01/07 */
/* このファイルは他のCSSより後に読み込むことで、確実にスマホ対応を適用 */

/* モバイル全般の調整 */
@media (max-width: 768px) {
    /* 記事内のHTMLで設定されているmax-widthを上書き */
    main {
        max-width: 100% !important;
        padding: 0.5rem !important;
    }
    
    /* bodyのオーバーフロー制御 */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* htmlも念のため */
    html {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* メインコンテナの調整 - 余白を最小化 */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;  /* 10px → 5px に削減 */
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 3カラムレイアウトを確実に縦並びに */
    .main-container {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* 左サイドバーは確実に非表示 */
    .left-sidebar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: hidden !important;
    }
    
    /* コンテンツエリアの幅を100%に - 余白を最小化 */
    .content-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;  /* パディングを完全に削除 */
        margin: 0 !important;
        order: 1 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 右サイドバーも幅100%に */
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 0 10px !important;
        margin: 20px 0 0 0 !important;
        order: 2 !important;
        position: static !important;
        box-sizing: border-box !important;
    }
    
    /* 記事コンテンツの調整 - 余白を最小化 */
    .single-post-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .single-post-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 8px !important;  /* 上下10px、左右8pxに削減 */
        margin: 5px 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;  /* モバイルでは角丸を削除 */
    }
    
    /* 記事内容のオーバーフロー対策 - パディング調整 */
    .post-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;  /* 記事本文のパディングも削除 */
        overflow-x: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }
    
    /* 記事内のpタグの余白調整 */
    .post-content p {
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }
    
    /* 記事内の見出しの余白調整 */
    .post-content h1,
    .post-content h2,
    .post-content h3,
    .post-content h4,
    .post-content h5,
    .post-content h6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 画像の最大幅制限 */
    .post-content img,
    .single-post-content img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* テーブルのレスポンシブ対応 */
    .post-content table {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }
    
    /* プレ要素のオーバーフロー対策 */
    .post-content pre,
    .post-content code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }
    
    /* 広告の調整 */
    .adsbygoogle {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* さらに小さい画面用の調整 */
@media (max-width: 480px) {
    .container {
        padding: 0 3px !important;  /* さらに削減 */
    }
    
    .content-area,
    .sidebar {
        padding: 0 !important;  /* パディング完全削除 */
    }
    
    .single-post-content {
        padding: 8px 5px !important;  /* 最小限のパディング */
    }
    
    .post-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    .post-content {
        font-size: 14px !important;
    }
}

/* 横向きモバイル対応 */
@media (max-width: 812px) and (orientation: landscape) {
    .main-container {
        flex-direction: column !important;
    }
    
    .content-area,
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* デバッグ用：問題がある場合はこのボーダーで要素の範囲を確認 */
/* 
@media (max-width: 768px) {
    * {
        border: 1px solid red !important;
    }
}
*/