/* フローティングバナーの基本スタイル */
#floating-banner {
  position: fixed;
  bottom: 50px;
  right: 0;
  z-index: 9999;   /* 他の要素よりも高く設定 */
  width: 200px;
  background: #3498db;
  color: #fff;
  /* 上下のパディングを半分（10px）、左右はそのまま（20px）に調整 */
  padding: 3px 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s ease, opacity 0.5s ease;
  cursor: pointer;
  /* 角を丸くする */
  border-radius: 10px;
  
  /* 初期状態は非表示 */
  opacity: 0;
  pointer-events: none;
}

/* スクロール後に表示するためのクラス */
#floating-banner.show {
  opacity: 1;
  pointer-events: auto;
}

/* バナーが折りたたまれている状態（画面右端に隠れる）
   ※幅250pxの場合、40pxだけ見せるため translateX(210px) */
#floating-banner.collapsed {
  transform: translateX(200px);
}

/* バナーが展開された状態 */
#floating-banner.expanded {
  transform: translateX(0);
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
  #floating-banner {
    width: 200px;
    bottom: 100px;
    /* 上下のパディングは約半分（8px）、左右は15pxに調整（元15px→15pxの場合など、必要に応じ調整してください） */
    padding: 8px 15px;
  }
  /* 幅200pxの場合、40pxだけ表示するなら translateX は 200 - 40 = 160px */
  #floating-banner.collapsed {
    transform: translateX(150px);
  }
}

/* CSS */
.banner-link {
  text-decoration: none; /* 下線を消す */
  display: inline-block; /* aタグ内のブロック要素の表示崩れ防止 */
}

a.banner-link,
a.banner-link:link,
a.banner-link:visited,
a.banner-link:hover,
a.banner-link:active {
    text-decoration: none !important;
}

  .no-underline {
    text-decoration: none;
  }

/* リンク全体をブロック表示にする */
.floating-banner-link {
  display: block;
  text-decoration: none; /* 下線を消す */
}

/* すべてのリンク状態で下線が表示されないように指定 */
.floating-banner-link:link,
.floating-banner-link:visited,
.floating-banner-link:hover,
.floating-banner-link:active {
  text-decoration: none;
}