@charset "utf-8";


/*PC・タブレット・スマホ共通設定
---------------------------------------------------------------------------*/
.floating-banner {
    position: fixed; /* 追従 */
    z-index: 99999; /* 他の要素の下に隠れないように */
    top: 80px; /* バナーの上下の位置 */
    right: 40px; /* バナーの左右の位置 */
}
.pc {
    width: 300px; /* バナーの横幅を指定 */
}
.floating-banner:hover {
    opacity: .8; /* ホバーで少し透過 */
}
.sp {
    display: none; /* PCではスマホ用のバナーは非表示に */
}
@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
    .pc {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
}

@media screen and (max-width: 960px) { /* スマホ用のブレイクポイントを指定 */
    .sp {
        display: inline-block; /* 消していたスマホ用のバナーを表示させる */
        width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
    }
    .floating-banner  {
        top: unset; /* PCで指定していた上下の位置指定をクリア */
        right: 0; /* 左右の隙間が空かないように */
        top: 0; /* 画面の最下部にぴったりくっつくように指定 */
    }
}