/**
 * レイアウト修正CSS
 * コンテンツの中央揃えと幅の一貫性を確保
 * 右へのズレと下に行くほど狭くなる問題を修正
 */

/* すべてのページで幅を100%に */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* body直下の要素も左右マージンをリセット */
body > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* WordPress特有のクラスもリセット */
#page,
#content,
.site,
.site-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* すべてのarticle要素 */
article {
    width: 100%;
    box-sizing: border-box;
}

/* メインコンテンツエリア */
#main-content,
.site-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* すべてのセクションは親要素の幅を100%使用 */
section,
.section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* コンテナは常に中央揃えで一定の最大幅 */
.container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* ヘッダー */
.site-header {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.site-header .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ヒーローセクション */
.hero-section {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.hero-section .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 各セクション内のグリッドレイアウト */
.section [style*="display: grid"],
.section [style*="display:grid"],
.section div[style*="grid-template"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* カード要素 */
.card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* カテゴリーセクションのネスト防止 - 直接の子要素のみターゲット */
.ai-articles-container > .category-section,
.ai-articles-container > [class*="article-section-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}

/* 記事コンテンツのネスト防止 - 直接の子要素のみターゲット */
.category-section > .article-content,
[class*="article-section-"] > [class*="article-content-"] {
    line-height: 1.8 !important;
    color: #374151 !important;
    font-size: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    writing-mode: horizontal-tb !important;
    box-sizing: border-box !important;
}

/* 内部にネストされた要素は独立して扱う */
.category-section .inner-section,
.article-content .inner-section {
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    margin: 20px 0 !important;
    padding: 15px !important;
}

.article-content .inner-content {
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* グリッドアイテムの幅を確保 */
.section [style*="display: grid"] > *,
.section [style*="display:grid"] > * {
    width: 100%;
    min-width: 0; /* グリッドアイテムがはみ出さないように */
    box-sizing: border-box;
}

/* テキストが中央揃えのdivも幅を保持 */
.section div[style*="text-align: center"],
.section div[style*="text-align:center"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* max-width指定のあるインライン要素を上書き */
.section [style*="max-width"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* インラインスタイルで指定されたdivも修正 */
.section > div,
.container > div {
    box-sizing: border-box !important;
}

/* 特定の幅指定があるdivをリセット */
div[style*="margin: 0 auto"],
div[style*="margin:0 auto"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* フッター */
.site-footer {
    width: 100%;
    box-sizing: border-box;
}

.site-footer .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* セクション内のmax-width指定要素を中央揃え強制 */
.section [style*="max-width: 800px"],
.section [style*="max-width:800px"],
.section [style*="max-width: 700px"],
.section [style*="max-width:700px"],
.hero-section [style*="max-width"] {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* フレックスボックスの中央揃え強制 */
[style*="display: flex"][style*="justify-content: center"],
[style*="display:flex"][style*="justify-content:center"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 全ての直接の子要素の位置をリセット */
.section > .container > div {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* すべてのdiv要素に幅制限を適用（ネスト対策） */
/* AI記事アーカイブページは除外 */
body:not(.page-template-page-ai-articles-archive-php) div {
    max-width: 100%;
    box-sizing: border-box;
}

/* AI記事コンテナ内のすべての要素をリセット */
/* AI記事アーカイブページは除外 */
body:not(.page-template-page-ai-articles-archive-php) .ai-articles-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* コンテンツ内のすべてのdiv（ネスト含む）を強制リセット */
/* AI記事アーカイブページは除外 */
body:not(.page-template-page-ai-articles-archive-php) .article-content div,
body:not(.page-template-page-ai-articles-archive-php) [class*="article-content-"] div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* たぬきチャットコンテナは例外 */
.tanuki-chat-container,
.tanuki-chat-container * {
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
}

/* たぬきアバターは固定サイズを維持 */
.tanuki-avatar,
.tanuki-message .tanuki-avatar {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* すべてのセクション内のdivを強制的に100%に（最優先） */
/* AI記事アーカイブページは除外 */
/* たぬきアバターは除外 */
body:not(.page-template-page-ai-articles-archive-php) .ai-articles-container div[style]:not(.tanuki-avatar):not(.tanuki-message):not(.tanuki-bubble) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* インラインスタイルで指定されていても強制上書き */
/* AI記事アーカイブページは除外 */
/* たぬきチャット要素は除外 */
body:not(.page-template-page-ai-articles-archive-php) .ai-articles-container [style*="width"]:not(.tanuki-avatar):not(.tanuki-message):not(.tanuki-bubble),
body:not(.page-template-page-ai-articles-archive-php) .ai-articles-container [style*="max-width"]:not(.tanuki-avatar):not(.tanuki-message):not(.tanuki-bubble),
body:not(.page-template-page-ai-articles-archive-php) .ai-articles-container [style*="margin"]:not(.tanuki-avatar):not(.tanuki-message):not(.tanuki-bubble) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* たぬきチャット関連は除外 */
.tanuki-chat-container [style*="width"],
.tanuki-chat-container [style*="max-width"],
.tanuki-message [style*="width"],
.tanuki-icon [style*="width"] {
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
}

/* container内のすべての要素 */
.container * {
    box-sizing: border-box !important;
}

/* レスポンシブ対応 */
@media (max-width: 1240px) {
    .container {
        max-width: 100% !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* モバイルでのカテゴリーセクション - 直接の子要素のみ */
    .ai-articles-container > .category-section,
    .ai-articles-container > [class*="article-section-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* モバイルでの記事コンテンツ - 直接の子要素のみ */
    .category-section > .article-content,
    [class*="article-section-"] > [class*="article-content-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* モバイルでのグリッドレイアウト調整 */
    .section [style*="display: grid"],
    .section [style*="display:grid"] {
        grid-template-columns: 1fr !important;
    }
    
    /* モバイルでmax-width要素のパディング調整 */
    .section [style*="max-width"],
    .hero-section [style*="max-width"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .section [style*="max-width"],
    .hero-section [style*="max-width"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* デバッグ用（確認後削除可能） */
/* 
.container {
    outline: 2px solid red;
}
.section {
    outline: 2px solid blue;
}
[style*="max-width"] {
    outline: 2px solid green;
}
*/