/* ============================================================
 * スマホ追従広告
 *
 * 画面の下にせり上がるバナー。電話のときだけ出す。
 * 設定は管理画面「スマホ追従広告」。
 *
 * 旧サイトはカスタマイザーの追加CSSに書いてあり、
 * ステージングを作り直したときに消えて再現できなくなった。
 * テーマに置いてあれば deploy と一緒に運ばれる。
 *
 * !important 使用禁止
 * ============================================================ */

.sb-spad {
  position: fixed;
  inset-inline: 0;

  /* 箱は必ず下端に着ける。持ち上げない。
     逃げは内側の余白で作る（.sb-spad__link）。理由はそちらに書いた。 */
  inset-block-end: 0;
  /* ⚠ ヘッダー(100 / トップは 90)より下に置く。
     引き出しを開いたとき、覆いがこのバナーの上に来る必要がある。
     覆いはヘッダーの中にあるので、ヘッダーより上に置くと
     バナーだけが覆いを突き抜けて残る。 */
  z-index: 80;
  /* 初期は画面の外。JS が .is-shown を付けるとせり上がる。

     ⚠ 画面の外へ出すだけでは足りない。透明にもすること。

     iOS Safari の下のツールバーは半透明で、その裏に停めたバナーが
     色として透けて見える。実機で「隠しているのに出ている」ように見えた。
     はじめは位置の問題だと思って lvh / dvh で持ち上げたが、見当違いだった。

     visibility は使わない。opacity のフェードが見えないまま消える
     （このテーマで既に踏んでいる。実装ルール 4-8）。 */
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform .45s var(--sb-ease, ease),
    opacity .3s var(--sb-ease, ease);
  /* 隠れている間は押せないようにする。
     transform で外へ出しただけでは、指が届く実装系がある。 */
  pointer-events: none;
}

.sb-spad.is-shown {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sb-spad__link {
  display: block;
  line-height: 0;            /* img の下にできる隙間を消す */
  background: var(--sb-paper, #F1EEE7);
  border-block-start: 1px solid var(--sb-rule, rgba(16, 18, 20, .12));
}
.sb-spad__link:focus-visible {
  outline: 2px solid var(--sb-accent, #B8642A);
  outline-offset: -2px;
}

/* ⚠ .screen-reader-text は使わない。
   このテーマでは css/pages/home.css にしか定義が無く、
   他のページでは読み上げ用の文字がそのまま画面に出る。
   （header-home.php にも同じ注意書きがある） */
.sb-spad__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sb-spad__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* バナーのぶん、ページの末尾に逃げを作る。
   これが無いとフッターの最後の行がバナーに隠れる。
   出ていない間も確保しておく（高さが変わると読んでいる位置がずれる）。 */
.sb-has-spad #body_wrap {
  padding-block-end: var(--sb-spad-h, 4.5rem);
}

/* ⚠ 電話だけ。幅はサイト共通の線（768px）に合わせる。
   旧サイトは SWELL の .sp_only に頼っていたが、
   このテーマにそのクラスは無い。 */
@media (min-width: 768.02px) {
  .sb-spad { display: none; }
  .sb-has-spad #body_wrap { padding-block-end: 0; }
}

/* 動きを減らす設定では滑らせない。出る・出ないだけにする。 */
@media (prefers-reduced-motion: reduce) {
  .sb-spad { transition: none; }
}