/* ============================================================
   店舗フローティングボタン
   ============================================================ */

/* フローティングバー分の下余白 */
body.single-service {
  padding-bottom: 84px;
}

.store-float-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .18);
}

.store-float-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px 12px;
  text-decoration: none;
  color: #fff;
  line-height: 1.3;
  gap: 3px;
  transition: opacity .2s;
}

.store-float-btn:hover {
  opacity: .85;
  color: #fff;
  text-decoration: none;
}

/* 電話 */
.store-float-btn--tel {
  background: #e6636f;
}

/* ネット予約 */
.store-float-btn--reserve {
  background: #f8910a;
}

/* LINE */
.store-float-btn--line {
  background: #06c755;
}

.store-float-btn__icon {
  font-size: 22px;
  line-height: 1;
}

.store-float-btn__label {
  font-size: 1rem;
  font-weight: 700;
}

.store-float-btn__tel {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .03em;
}

/* ============================================================
   #return_top を店舗ページのフローティングバー分だけ上にずらす
   ============================================================ */
body.single-service #return_top {
  bottom: 84px;
}

/* responsive.css で bottom:0 に上書きされる場合の保険 */
@media screen and (max-width: 900px) {
  body.single-service #return_top {
    bottom: 84px;
  }

  .store-float-btn__label {
    font-size: 0.8rem;
    font-weight: 700;
  }

  .store-float-btn__tel {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .03em;
  }

}
