/* フロントエンド用のスタイル */

/* バナーの外側のラッパー */
.banner-display-wrapper {
    width: 100%;
    margin: 20px auto;
    padding: 0;
}

/* バナーのコンテナ */
.banner-display-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* バナー内の画像を自動調整 */
.banner-display-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* バナー内のリンク */
.banner-display-container a {
    display: block;
    text-decoration: none;
}

/* レスポンシブ対応: タブレット以下 */
@media screen and (max-width: 768px) {
    .banner-display-wrapper {
        margin: 15px auto;
    }
    
    .banner-display-container {
        width: 100% !important;
    }
}

/* レスポンシブ対応: スマートフォン */
@media screen and (max-width: 480px) {
    .banner-display-wrapper {
        margin: 10px auto;
    }
}

/* アフィリエイトコード内のiframe対応 */
.banner-display-container iframe {
    max-width: 100%;
    border: none;
}