﻿.floating-banner {
    position: fixed; /* 追従 */
    z-index: 99999; /* 他の要素の下に隠れないように */
    bottom: 50px; /* バナーの上下の位置 */
    right: 0px; /* バナーの左右の位置 */
}
.pc {
    width: 200px; /* バナーの横幅を指定 */
}
.floating-banner:hover {
    opacity: .8; /* ホバーで少し透過 */
}
.sp {
    display: none; /* PCではスマホ用のバナーは非表示に */
}
@media screen and (max-width: 1050px) { /* タブレット用のブレイクポイントを指定 */
    .pc {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
}

@media screen and (max-width: 1000px) { /* スマホ用のブレイクポイントを指定 */
    .sp {
        display: inline-block; /* 消していたスマホ用のバナーを表示させる */
	width: 400px; /* バナーの横幅を指定 */
        
    }
    .floating-banner  {
        top: unset; /* PCで指定していた上下の位置指定をクリア */
    	z-index: 99999; /* 他の要素の下に隠れないように */
     	bottom: 50px; /* バナーの上下の位置 */
    	right: 0px; /* バナーの左右の位置 */
    }
}