/* 記事HTML内のスタイルを上書きするための追加CSS - 2025/01/07 */
/* mobile-fix-20250107.cssの後に読み込む */

@media (max-width: 768px) {
    /* 記事内HTMLで定義されるスタイルを強制的に上書き */
    
    /* max-width制限を解除 */
    main,
    article,
    .post-content main,
    .post-content article,
    .single-post-content main,
    .single-post-content article {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* 記事内のセクション要素 */
    .post-content section,
    .single-post-content section,
    .post-content div,
    .single-post-content div {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* ブロック要素の余白調整 */
    .post-content .lead,
    .single-post-content .lead,
    .post-content .toc,
    .single-post-content .toc,
    .post-content blockquote,
    .single-post-content blockquote,
    .post-content .note,
    .single-post-content .note {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0.75rem !important;
    }
    
    /* テーブルの最適化 */
    .post-content table,
    .single-post-content table {
        font-size: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .post-content th,
    .single-post-content th,
    .post-content td,
    .single-post-content td {
        padding: 0.4rem !important;
    }
    
    /* リストの調整 */
    .post-content ul,
    .single-post-content ul,
    .post-content ol,
    .single-post-content ol {
        padding-left: 1.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 段落の最適化 */
    .post-content p,
    .single-post-content p {
        text-align: left !important; /* justifyを解除してモバイルで読みやすく */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 見出しの最適化 */
    .post-content h1,
    .single-post-content h1 {
        font-size: 1.5rem !important;
        padding-top: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .post-content h2,
    .single-post-content h2 {
        font-size: 1.3rem !important;
        padding-top: 0.5rem !important;
        margin: 2rem 0 1rem !important;
    }
    
    .post-content h3,
    .single-post-content h3 {
        font-size: 1.1rem !important;
        margin: 1.5rem 0 0.75rem !important;
    }
    
    /* パンくずリストの調整 */
    .breadcrumbs {
        padding: 0 5px !important;
        margin: 10px 0 !important;
        font-size: 0.75rem !important;
    }
    
    /* 投稿情報の調整 */
    .post-header {
        padding: 10px 5px !important;
    }
    
    .post-meta {
        font-size: 0.75rem !important;
        padding: 5px 0 !important;
    }
    
    /* 広告エリアの調整 */
    .article-end-ad,
    .left-sidebar-ad,
    .sidebar-ad {
        padding: 10px 5px !important;
        margin: 10px 0 !important;
    }
    
    /* 記事一覧の調整 */
    .post-item {
        margin: 10px 0 !important;
        padding: 10px 5px !important;
    }
    
    .post-excerpt {
        padding: 0 !important;
        margin: 10px 0 !important;
    }
}

/* 極小画面用（480px以下） */
@media (max-width: 480px) {
    /* さらに余白を削減 */
    main,
    article,
    .post-content main,
    .post-content article,
    .single-post-content main,
    .single-post-content article {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    /* ブロック要素の余白を最小化 */
    .post-content .lead,
    .single-post-content .lead,
    .post-content .toc,
    .single-post-content .toc,
    .post-content blockquote,
    .single-post-content blockquote,
    .post-content .note,
    .single-post-content .note {
        padding: 0.5rem !important;
    }
    
    /* フォントサイズの調整 */
    .post-content,
    .single-post-content {
        font-size: 0.875rem !important;
    }
    
    .post-content h1,
    .single-post-content h1 {
        font-size: 1.25rem !important;
    }
    
    .post-content h2,
    .single-post-content h2 {
        font-size: 1.1rem !important;
    }
    
    .post-content h3,
    .single-post-content h3 {
        font-size: 1rem !important;
    }
    
    /* テーブルをさらに最適化 */
    .post-content table,
    .single-post-content table {
        font-size: 0.7rem !important;
    }
    
    .post-content th,
    .single-post-content th,
    .post-content td,
    .single-post-content td {
        padding: 0.25rem !important;
    }
}

/* 横向きスマホ対応 */
@media (max-width: 812px) and (orientation: landscape) {
    .single-post-content {
        padding: 10px 15px !important;
    }
}

/* 投稿一覧ページの調整 */
@media (max-width: 768px) {
    /* 記事一覧アイテム */
    .post-item {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    /* 記事タイトル */
    .post-item .post-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 記事抜粋 */
    .post-excerpt {
        width: 100% !important;
        padding: 0 !important;
        font-size: 0.875rem !important;
    }
    
    /* ページネーション */
    .pagination {
        padding: 10px 5px !important;
        font-size: 0.875rem !important;
    }
    
    /* 続きを読むボタン */
    .read-more {
        display: inline-block !important;
        padding: 5px 10px !important;
        margin-top: 10px !important;
        font-size: 0.875rem !important;
    }
}

/* インラインスタイルの強制上書き */
@media (max-width: 768px) {
    /* style属性で設定されたmax-widthを上書き */
    [style*="max-width"] {
        max-width: 100% !important;
    }
    
    /* style属性で設定されたpaddingを調整 */
    .post-content [style*="padding"],
    .single-post-content [style*="padding"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* style属性で設定されたmarginを調整 */
    .post-content [style*="margin"],
    .single-post-content [style*="margin"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}