.floating-banner {
    width: calc(100% / 3);
    /* 画面の1/3の幅 */
    position: fixed;
    /* 固定表示 */
    bottom: 16px;
    /* 画面下から16px */
    right: 16px;
    /* 画面の右から16px */
    z-index: 9999;
    /* 常に前面に出す */
    transition: 0.3s;
    /* ホバー時ゆっくり透過 */
    cursor: pointer;
    /* ホバー時カーソルがポインターに */
}
.floating-banner:hover {
    opacity: 0.8;
    /* ホバーで透過させる */
}
.floating-banner_img {
    width: 100%;
    /* 画像をfloating-bannerの幅に合わせる */
}

/* PC向け設定：画面幅481px以上 */
@media screen and (min-width: 481px) {
    .floating-banner {
        width: calc(100% / 6);
        /* 画面の1/6の幅 */
    }
}

/* スマホ向け設定：画面幅480px以下 */
@media screen and (max-width: 480px) {
    .floating-banner {
        width: calc(100% / 2); /* 画面の半分の幅に設定 */
        right: 0; /* 右側にピッタリくっつける */
        bottom: 8px; /* 画面下から８px */
    }
}
 
  
  /* ここから閉じるボタンの設定 */
  .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 0%;
    display: flex;
    align-items: center; /* バッテンを垂直方向に中央揃え */
    justify-content: center; /* バッテンを水平方向に中央揃え */
    cursor: pointer;
    font-size: 16px;
    line-height: 16px;
    padding-bottom: 1px; /* 必要に応じて微調整 */
}

.close-btn:hover {
    background-color: #555; /* ホバー時に少し明るいグレーに */
}