/* 全ページ共通：先頭へ戻る FAB（画像 app_top_fab.png・挙動は common/js/top_button.js） */

.app_top_fab {
  position: fixed;
  /* 右下に固定（top/left は inset で明示的に auto） */
  inset: auto 16px calc(16px + env(safe-area-inset-bottom, 0px)) auto;
  z-index: 1001;
  width: 45px;
  height: 45px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: block;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease;
}

.app_top_fab__img {
  display: block;
  width: 45px;
  height: 45px;
  object-fit: contain;
  pointer-events: none;
}

/* 下部タブバーがある画面（sp_tabbar）ではその上に配置 — 45px タブ + 16px 余白 */
body.app:has(.sp_tabbar) .app_top_fab {
  inset: auto 16px calc(72px + env(safe-area-inset-bottom, 0px)) auto;
}

/* ログイン等（base_auth）：フッター電話の上に被らないよう少し上げる場合は必要に応じて調整 */
body.auth .app_top_fab {
  inset: auto 16px calc(16px + env(safe-area-inset-bottom, 0px)) auto;
  z-index: 1100;
}