@charset "UTF-8";
/* =========================================================
   追従バナー「お近くの取扱店を探す」 follow-banner.css
   - 使用ページ: ishimakura TOP / katarakune / yokorakune,
                 newmine cosmetics, nishikawa_suiminlabo mattress
   - すべて .fb-banner 配下にスコープ（既存ページへ影響させない）
   - ページ別の値は HTML 側の style 属性で CSS 変数として指定
       --fb-z         : z-index（ヘッダー・ポップアップより下）
       --fb-pill-left : ヘッダー帯が無い場合（cosmetics SP）の丸型ボタン左余白（既定 4vw）
   - JS が自動で入れる値
       --fb-top       : ヘッダー下端の位置
       --fb-pill-top / --fb-pill-right
                      : data-fb-avoid の要素（ハンバーガー）に合わせた丸型ボタン位置
       --fb-corner-bottom / --fb-corner-right
                      : PC 右下配置時、data-fb-corner-avoid の要素の上に逃がす位置
       --fb-corner-width
                      : 横長（corner-h）時のボタン幅＝避ける要素の幅
   - 表示モード（JS がクラスを切り替え）
       data-fb-pc-min 以上の幅 … .fb-banner--corner（PC：画面右下の縦長ボタン・縦書き）
         ＋ data-fb-corner-match="width" で避ける要素の表示中 … .fb-banner--corner-h（横長・同幅）
       それ未満でヘッダー高さ 0 … .fb-banner--no-header（cosmetics SP：ハンバーガー横）
       それ以外           … ヘッダー直下の帯
   ========================================================= */

.fb-banner {
  position: fixed;
  top: var(--fb-top, 0px);
  left: 0;
  right: 0;
  z-index: var(--fb-z, 99);
  margin: 0;
  padding: 0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  font-family: inherit;
  /* 非表示時はヘッダーの裏に隠れる位置へ */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.fb-banner.is-show {
  transform: translateY(0);
  visibility: visible;
  transition: transform .3s ease, visibility 0s linear 0s;
}
.fb-banner,
.fb-banner *,
.fb-banner *::before,
.fb-banner *::after {
  box-sizing: border-box;
}

.fb-banner__link,
.fb-banner__link:link,
.fb-banner__link:visited,
.fb-banner__link:hover,
.fb-banner__link:active {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 480px;
  height: 48px;
  margin: 0 auto;
  padding: 0 44px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #707070;
  font-family: inherit;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.fb-banner__link::before,
.fb-banner__link::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
/* 家アイコン（参考ページ SP 版と同じく左から 16%） */
.fb-banner__link::before {
  left: 16%;
  width: 20px;
  height: 17px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 25.5"%3E%3Cpath fill="%23707070" d="M12 25.5v-9h6v9h7.5v-12H30L15 0 0 13.5h4.5v12z"/%3E%3C/svg%3E');
}
/* 右矢印（参考ページ SP 版と同じく右から 11%） */
.fb-banner__link::after {
  right: 11%;
  width: 7px;
  height: 14px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 43"%3E%3Cpath fill="%23707070" d="M.75 42.71 21.96 21.5.75.29.04.99 20.55 21.5.04 42.01z"/%3E%3C/svg%3E');
}
@media (hover: hover) {
  .fb-banner__link:hover {
    opacity: .7;
  }
}
.fb-banner__link:focus-visible {
  outline: 2px solid #707070;
  outline-offset: -4px;
}

/* PC */
@media screen and (min-width: 768px) {
  .fb-banner__link,
  .fb-banner__link:link,
  .fb-banner__link:visited,
  .fb-banner__link:hover,
  .fb-banner__link:active {
    height: 52px;
    font-size: 16px;
  }
}

/* ---------------------------------------------------------
   ヘッダー帯が無い場合（高さ0。cosmetics SP）
   JS が .fb-banner--no-header を付与 → 画面上部に丸型ボタン
   cosmetics SP は画面幅比例（html font-size: 2.66667vw）のため、
   375px 幅での寸法を基準に vw で指定（1px = 0.26667vw）
     高さ 40px / 文字 13px / 角丸 20px / 左余白 15px など
   --------------------------------------------------------- */
.fb-banner.fb-banner--no-header {
  top: var(--fb-pill-top, 5.0667vw);
  left: var(--fb-pill-left, 4vw);
  right: var(--fb-pill-right, 20vw);
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translateY(-2.1333vw);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.fb-banner.fb-banner--no-header.is-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}
.fb-banner.fb-banner--no-header .fb-banner__link {
  max-width: none;
  height: 10.6667vw;
  padding: 0 9.0667vw;
  border-radius: 5.3333vw;
  box-shadow: 0 .5333vw 2.1333vw rgba(0, 0, 0, .18);
  font-size: 3.4667vw;
}
.fb-banner.fb-banner--no-header .fb-banner__link::before {
  left: 3.7333vw;
  width: 4.5333vw;
  height: 3.7333vw;
}
.fb-banner.fb-banner--no-header .fb-banner__link::after {
  right: 4vw;
  width: 1.6vw;
  height: 3.2vw;
}

/* ---------------------------------------------------------
   PC：画面右下の縦長ボタン（data-fb-pc-min 以上の幅で JS が付与）
   --------------------------------------------------------- */
.fb-banner.fb-banner--corner {
  top: auto;
  left: auto;
  right: var(--fb-corner-right, 24px);
  bottom: var(--fb-corner-bottom, 24px);
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, bottom .3s ease, visibility 0s linear .3s;
}
.fb-banner.fb-banner--corner.is-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease, bottom .3s ease, visibility 0s linear 0s;
}
.fb-banner.fb-banner--corner .fb-banner__link {
  /* 縦書きの縦長ボタン（参考ページ PC 版の縦タブに準拠：アイコン＋縦書きテキスト） */
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  max-width: none;
  width: 52px;
  height: auto;
  padding: 52px 0 24px;
  border-radius: 26px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .12em;
}
.fb-banner.fb-banner--corner .fb-banner__link::before {
  top: 22px;
  left: 50%;
  width: 20px;
  height: 17px;
  transform: translateX(-50%);
}
.fb-banner.fb-banner--corner .fb-banner__link::after {
  display: none;
}

/* PC 右下・横長（data-fb-corner-match="width" かつ避ける要素の表示中に JS が付与）
   避ける要素（newmine のリンゴ酸バナー）と同じ幅にそろえる */
.fb-banner.fb-banner--corner.fb-banner--corner-h .fb-banner__link {
  -webkit-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb;
  width: var(--fb-corner-width, 244px);
  height: 56px;
  padding: 0 34px 0 44px;
  border-radius: 28px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .05em;
}
.fb-banner.fb-banner--corner.fb-banner--corner-h .fb-banner__link::before {
  top: 50%;
  left: 18px;
  width: 20px;
  height: 17px;
  transform: translateY(-50%);
}
.fb-banner.fb-banner--corner.fb-banner--corner-h .fb-banner__link::after {
  display: block;
  top: 50%;
  right: 18px;
  width: 7px;
  height: 14px;
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .fb-banner,
  .fb-banner.is-show,
  .fb-banner.fb-banner--no-header,
  .fb-banner.fb-banner--no-header.is-show,
  .fb-banner.fb-banner--corner,
  .fb-banner.fb-banner--corner.is-show {
    transition: none;
  }
}

@media print {
  .fb-banner {
    display: none;
  }
}