/*side_banner_sp.css - スマートフォン表示時のサイドバナー位置調整用CSS

/* 通常表示（PC）では元の位置に表示 */
.ec-layoutRole__right .top_side_banner,
.ec-layoutRole__left .top_side_banner {
    display: block;
}

/* PC表示ではSP用バナーを非表示 */
.sp-top-side-banner {
    display: none;
}



/* スマートフォン表示時の調整 */
@media screen and (max-width: 768px) {
    /* サイドバーの通常表示を非表示 */
    .ec-layoutRole__right .top_side_banner,
    .ec-layoutRole__left .top_side_banner {
        display: none;
    }
    
    /* SP用バナーを表示 */
    .sp-top-side-banner {
        display: block;
        width: 100%;
        padding: 20px;
    }
    
    /* new_item.twigの下にSP用バナーを配置するための調整 */
    .ec-newItemRole {
        margin-bottom: 0;
    }
    
    .ec-newItemRole + .sp-top-side-banner {
        margin-top: 30px;
    }
    
    /* SP用バナー内の画像スタイル調整 */
    .sp-top-side-banner img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

/* iPad用レスポンシブ対応 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* PC用バナーの画像サイズをiPadに最適化 */
    .ec-layoutRole__right .top_side_banner img,
    .ec-layoutRole__left .top_side_banner img {
        max-width: 200px !important;
        width: 100%;
        height: auto;
    }
    
    /* バナーコンテナの幅制限 */
    .ec-layoutRole__right .top_side_banner,
    .ec-layoutRole__left .top_side_banner {
        max-width: 220px;
        overflow: hidden;
    }
}

/* new_item.twigがない場合のフォールバック */
@media screen and (max-width: 767px) {
    .ec-layoutRole__main .sp-top-side-banner,
    .ec-layoutRole__mainWithColumn .sp-top-side-banner,
    .ec-layoutRole__mainBetweenColumn .sp-top-side-banner {
        display: block;
        margin-top: 30px;
    }
}