/* ===================================
   Fan Portal 名言装飾修正CSS
   =================================== */

/* 1. 二重囲いの完全解消 */
/* メインコンテナのみに枠を設定 */
.fp-meigen-item {
    border: 1px solid #e0e0e0 !important;
    padding: 20px !important;
    background: #ffffff !important;
    margin-bottom: 30px !important;
    box-shadow: none !important;
    position: relative !important;
}

/* すべての子要素の枠を削除 */
.fp-meigen-item * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* blockquoteのデフォルトスタイル完全リセット */
.fp-meigen-item blockquote,
.fp-meigen-item .fp-quote {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-left: none !important;
    background: transparent !important;
}

/* SWELLの疑似要素も削除 */
.fp-meigen-item blockquote::before,
.fp-meigen-item blockquote::after,
.fp-meigen-item .fp-quote::before,
.fp-meigen-item .fp-quote::after {
    display: none !important;
    content: none !important;
}

/* テキスト部分の調整 */
.fp-meigen-item blockquote p {
    padding: 10px 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* 2. 順位のオレンジ色を青に変更 */
.rank-badge {
    color: #4a90e2 !important;
    background-color: transparent !important;
    font-weight: bold !important;
}

/* インラインスタイルのオレンジ色も強制変更 */
.fp-meigen-item span[style*="color"] {
    color: #4a90e2 !important;
}

/* 3. その他の要素の色統一 */
.fp-meigen-meta {
    margin: 15px 0 !important;
    color: #666 !important;
}

.character-name {
    color: #333 !important;
    font-weight: bold !important;
}

.fp-meigen-actions button {
    background: #4a90e2 !important;
    color: #fff !important;
    border: none !important;
}

.fp-meigen-actions button:hover {
    background: #357abd !important;
}

/* 4. ランキング内の特別対応 */
.fp-popular-list .fp-meigen-item {
    margin-bottom: 20px !important;
}

/* 入れ子構造の対策 */
.fp-meigen-item .fp-meigen-item {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* popular-item内の調整 */
.popular-item > .fp-meigen-item:first-of-type {
    border: none !important;
    padding: 0 !important;
}

.popular-item > .fp-meigen-item:last-of-type {
    border: 1px solid #e0e0e0 !important;
    padding: 20px !important;
}

/* 5. 画像サイズ制限 */
/* PC表示での画像サイズ制限 */
@media (min-width: 1200px) {
    .fp-meigen-container .fp-section-image,
    .fp-meigen-container .fp-character-image,
    .fp-character-group .fp-character-image {
        max-width: 400px !important;
        margin: 20px auto !important;
    }
    
    .fp-meigen-container .fp-section-image img,
    .fp-meigen-container .fp-character-image img,
    .fp-character-group .fp-character-image img {
        max-height: 500px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* タブレット表示での画像サイズ制限 */
@media (min-width: 768px) and (max-width: 1199px) {
    .fp-meigen-container .fp-section-image,
    .fp-meigen-container .fp-character-image,
    .fp-character-group .fp-character-image {
        max-width: 350px !important;
        margin: 20px auto !important;
    }
    
    .fp-meigen-container .fp-section-image img,
    .fp-meigen-container .fp-character-image img,
    .fp-character-group .fp-character-image img {
        max-height: 400px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* 6. レスポンシブ対応 */
@media (max-width: 768px) {
    .fp-meigen-item {
        padding: 15px !important;
    }
    
    .fp-meigen-item blockquote p {
        font-size: 14px !important;
    }
}

/* スマホ表示での画像サイズ制限 */
@media (max-width: 767px) {
    .fp-meigen-container .fp-section-image,
    .fp-meigen-container .fp-character-image,
    .fp-character-group .fp-character-image {
        max-width: 100% !important;
        margin: 15px auto !important;
    }
    
    .fp-meigen-container .fp-section-image img,
    .fp-meigen-container .fp-character-image img,
    .fp-character-group .fp-character-image img {
        max-height: 300px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
}