/* ==========================
  Floating Banner (clean)
  - PC: bottom-center 800px
  - SP: bottom-center 92vw (max 480px)
========================== */

/* scope reset (banner内のみ) */
.bl_floatingBanner,
.bl_floatingBanner * { box-sizing: border-box; }
.bl_floatingBanner img { border-style: none; vertical-align: bottom; display: block; width: 100%; height: auto; }
.bl_floatingBanner .close-btn {
  -webkit-appearance: none; appearance: none;
  border: 0; background: #fff; color: inherit; font: inherit;
  cursor: pointer;
}

/* base */
.bl_floatingBanner{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  width: 800px;                    /* ← PC幅 */
  max-width: min(92vw, 920px);
  z-index: 9999;
  right: auto;
}

/* transform干渉回避（本体には当てない） */
.bl_floatingBanner * { transform: none !important; }

/* close button (右上・1.5倍相当) */
.bl_floatingBanner .close-btn{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px; height: 36px;
  font-size: 24px; line-height: 36px;
  text-align: center;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  z-index: 10000;
}

/* 閉じた状態（JSが .js_close を付与） */
.bl_floatingBanner.js_close{ display: none !important; }

/* SP調整 */
@media (max-width: 768px){
  .bl_floatingBanner{
    bottom: 12px;
    width: 92vw;
    max-width: 480px;
  }
  .bl_floatingBanner .close-btn{
    top: -10px; right: -10px;
    width: 40px; height: 40px;
    font-size: 26px; line-height: 40px;
  }
}