/**
 * 追従バナー(複数対応版)
 * 単一版 .following-link-wrapper のスタイル(app.css)を踏襲。
 * 内側の .following-link / __title / __image / __close-button は既存スタイルを継承する。
 */

.following-links-wrapper {
  position: fixed;
  z-index: 10;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  opacity: 1;
  visibility: visible;
}

.following-links-wrapper.is-hidden {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.25s ease, visibility 0.25s ease;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* 表示位置(単一版の modifier と同じ4パターン) */
.following-links-wrapper--top_left {
  left: 0;
  top: 0;
}

.following-links-wrapper--top_right {
  right: 0;
  top: 0;
}

.following-links-wrapper--bottom_left {
  left: 0;
  bottom: 0;
}

.following-links-wrapper--bottom_right {
  right: 0;
  bottom: 0;
}

@media screen and (min-width: 768px) {
  .following-links-wrapper--top_left,
  .following-links-wrapper--top_right {
    top: 16%;
  }

  .following-links-wrapper--bottom_left,
  .following-links-wrapper--bottom_right {
    bottom: 16%;
  }
}

/* バナー1枚分の箱(単一版では wrapper が持っていた枠線・背景をitemへ) */
.following-links__item {
  position: relative;
  border: 1px solid #303192;
  background-color: #fff;
}

.following-links__item.is-hidden {
  display: none;
}

/* 画像の上限サイズ(複数版だけ・2026-09-15追加)
 * app.css の既定(スマホ180px・PC300px)より小さくする。
 * 登録画像が上限より大きいときは縦横比を保って縮む。小さいときは原寸のまま。
 * 旧単一版(.following-link-wrapper)には効かない。 */
.following-links__item .following-link__image img {
  max-width: 130px;
  max-height: 130px;
}

@media screen and (min-width: 768px) {
  .following-links__item .following-link__image img {
    max-width: 200px;
    max-height: 200px;
  }
}