@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:    cocoon-master
Version:    1.1.3
*/





@media screen and (max-width: 768px) {
    /* スマホ表示時のヘッダー・フッターの背景色 */
    .header-container, #header,
    .footer, #footer, .footer-container, footer {
        background-color: #F0E6E4 !important;
    }

    .ranking-item-img-desc {
        flex-direction: column !important;
        align-items: center !important;
    }
    .ranking-item-image-tag {
        margin-bottom: 15px !important;
        justify-content: center !important;
        max-width: 220px !important; /* 画像の最大幅を制限 */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
    }
    .ranking-item-image-tag a {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .ranking-item-image-tag img {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    .ranking-item-description {
        width: 100% !important;
    }
    .rating-text-pc {
        display: none !important;
    }
    .rating-text-sp {
        display: inline-block !important;
    }
	
    /* フッター内の文字色を黒にする */
    .footer, #footer, .footer-container, footer,
    .footer *, #footer *, .footer-container *, footer * {
        color: #000000 !important;
    }
	
	/* スマホ表示時のヘッダーロゴのサイズ調整 */
    .header-container img, #header img, .logo img {
        max-width: 300px !important; /* お好みのサイズに調整してください (例: 120px〜180px) */
        width: 100% !important;
        height: auto !important;
    }
	

    /* スマホ表示のときのみ商品名を最大5行に制限して「...」で省略 */
    .ranking-item-name-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
    }

    /* ▼ 4位〜10位の順位数字を少し上に上げる調整（必要に応じて数値は微調整してください） */
    .n-crown span {
        margin-bottom: 8px !important;
    }
}

/* 商品名はみ出し制御（PC表示：4行まで） */
.ranking-item-name-text {
    overflow-wrap: anywhere;
    word-break: break-word;
    
    /* パソコン表示時は4行で「...」に省略（ソース上は全文保持） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* アピールエリアを強制非表示にする */
#appeal {
    display: none !important;
}