/**
 * Fan Portal モバイル最適化CSS
 * 機能に影響を与えずに表示幅と余白を調整
 */

/* デスクトップ用のデフォルトスタイル */
.fp-after-content-wrapper {
    margin-top: 40px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* モバイル表示の最適化 */
@media screen and (max-width: 768px) {
    /* SWELLの親要素の幅制限を解除 */
    .l-mainContent__inner {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .post_content {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    
    /* 親要素の幅制限を解除 */
    .fp-after-content-wrapper {
        max-width: none !important;
    }
    /* 投票・クイズ・診断の結果エリアの余白調整 */
    .fp-poll-container,
    .fp-quiz-container,
    .fp-shindan-container {
        width: 100% !important;
        max-width: none !important;
        margin: 20px auto !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* 結果画面専用の調整 - 画面幅いっぱいに表示 */
    /* 親要素のコンテナも含めて幅を調整 */
    .l-main .fp-quiz-container,
    .l-main .fp-poll-container,
    .l-main .fp-shindan-container,
    .l-mainContent__inner .fp-quiz-container,
    .l-mainContent__inner .fp-poll-container,
    .l-mainContent__inner .fp-shindan-container {
        position: relative !important;
        width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        max-width: none !important;
        padding-left: 30px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* 結果表示部分の内部パディング調整 */
    .fp-quiz-result-static,
    .fp-poll-results-static,
    .fp-shindan-result-static,
    .fp-quiz-result,
    .fp-poll-results,
    .fp-shindan-results {
        padding: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* 関連コンテンツエリアの余白調整 */
    .fp-next-section {
        padding: 0 10px !important;
    }
    
    .fp-next-contents {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 30px 15px !important;
        box-sizing: border-box !important;
    }
    
    /* 関連コンテンツのグリッド調整 */
    .fp-next-contents > div:last-child {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    /* カード幅を最大化 */
    .fp-next-card {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* コメントセクションの余白調整 */
    .fp-comments-section {
        width: 100% !important;
        margin: 20px auto !important;
        padding: 15px !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
    
    /* カスタムHTML、掲示板、関連コンテンツも画面幅いっぱいに */
    .l-main .fp-bottom-custom-html,
    .l-main .fp-comments-section,
    .l-main .fp-next-section,
    .l-main .fp-after-content-wrapper,
    .l-mainContent__inner .fp-bottom-custom-html,
    .l-mainContent__inner .fp-comments-section,
    .l-mainContent__inner .fp-next-section,
    .l-mainContent__inner .fp-after-content-wrapper {
        position: relative !important;
        width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        max-width: none !important;
        padding-left: 30px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* カスタムHTMLエリアの余白調整 */
    .fp-bottom-custom-html {
        padding: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* 100vwで広げた要素の内部コンテンツを中央配置 */
    .fp-bottom-custom-html > *,
    .fp-comments-section > * {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: calc(100% - 20px) !important;
        width: 100% !important;
    }
    
    /* テーブルや特定要素の幅を最大化 */
    .fp-bottom-custom-html table,
    .fp-bottom-custom-html .wp-block-table,
    .fp-comments-section .fp-comment-list {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* チャートコンテナの幅調整 */
    .fp-chart-container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    
    /* メッセージコンテナの調整 */
    .fp-message-container {
        width: calc(100% - 20px) !important;
        left: 10px !important;
        right: 10px !important;
    }
    
    /* SWELL theme特有の調整 - 100vw技法を使用するため不要 */
    /* .post-content, .p-postContent内でも上記の100vw設定が優先される */
    
    /* 結果表示時の追加調整 */
    .fp-after-content-sections {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
    }
    
    /* フォーム要素の幅調整 */
    .fp-poll-form,
    .fp-quiz-form,
    .fp-shindan-form {
        width: 100% !important;
    }
    
    /* ボタンの幅調整 */
    .fp-submit-button,
    .fp-retry-button,
    .fp-share-buttons {
        width: 100% !important;
        max-width: none !important;
    }
}

/* さらに小さい画面用の調整 */
@media (max-width: 480px) {
    /* より狭い余白設定 */
    .fp-poll-container,
    .fp-quiz-container,
    .fp-shindan-container,
    .fp-next-contents,
    .fp-comments-section {
        width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding: 12px !important;
    }
    
    /* SWELL theme調整を強化 */
    .post-content .fp-poll-container,
    .post-content .fp-quiz-container,
    .post-content .fp-shindan-container,
    .p-postContent .fp-poll-container,
    .p-postContent .fp-quiz-container,
    .p-postContent .fp-shindan-container {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
    }
    
    /* タイトルや説明文のフォントサイズ調整 */
    .fp-poll-question,
    .fp-quiz-question,
    .fp-shindan-title {
        font-size: 16px !important;
    }
    
    .fp-poll-description,
    .fp-quiz-description,
    .fp-shindan-description {
        font-size: 14px !important;
    }
}