/* site-bgm — サイトに音楽をつけるウィジェット（ぞろ屋）
 *
 * 画像ボタン（ラジカセ・マイク等）を右下に固定表示する共通スタイル。
 * ・呼吸のようにゆっくり大小して「押せる」ことを誘う。再生中は速くなり音符がのぼる
 * ・ヒント文「クリックで音楽」⇄「クリックで停止」を自動で切り替える
 * ・鳴らせなかったとき（LINE等のアプリ内ブラウザ）は吹き出しで案内する
 * ・prefers-reduced-motion では動きを止める
 *
 * 調整はCSS変数でできる：
 *   --zbgm-height ボタンの高さ（既定 clamp(104px, 12vh, 148px)）
 *                 ※ 幅ではなく高さで決める。モチーフごとに縦横比が違う
 *                   （縦長のマイク・横長のカセット）ので、幅で揃えると
 *                   縦長のものだけ画面を占領してしまうため
 *   --zbgm-right  右からの距離／--zbgm-bottom 下からの距離
 *   --zbgm-note   音符の色（サイトのアクセント色に合わせる）
 *   --zbgm-hint   ヒント文の色（明るい背景のサイトでは暗い色にする）
 *   --zbgm-z      重なり順（既定 9990。チャットボタン等と重なるときに調整）
 */

/* このリセットを消さないこと。display を上書きする指定は hidden に勝ってしまう */
.zbgm[hidden] { display: none !important; }

/* ---- サイト側CSSからの防御 ----
   このボタンは「すでにあるサイト」に貼る。多くのサイトは button / span / img / em に
   強い指定を持っていて、それがボタンの中まで届く。実測で起きた事故2つを潰してある：
   ① `button span { background:#333; width:40px }` のような指定で、音符やヒント文が
      灰色の棒になる（2026-08-06 実測。過去の案件で吹き出しを <span> から <em> に替えた
      のと同じ型の事故。<em> だけ避けても span 側が残っていた）
   ② `img { max-width:100% }` と、こちらの width:fit-content な親が循環参照になり、
      待機の絵と演奏中の絵で幅が 1.4px ずれて、入れ替えの瞬間にボタンが動く
      （2026-08-06 実測 5.92px のガタつき）
   消さないこと。 */
.zbgm { overflow: visible; -webkit-appearance: none; appearance: none; line-height: 1; }
.zbgm__notes,
.zbgm__notes i,
.zbgm__hint {
  background: none;
  border: 0;
  width: auto;
  height: auto;
  min-width: 0;
  box-shadow: none;
}

.zbgm {
  position: fixed;
  right: var(--zbgm-right, clamp(14px, 2vw, 32px));
  bottom: var(--zbgm-bottom, clamp(14px, 2.6vh, 32px));
  z-index: var(--zbgm-z, 9990);
  display: block;
  /* 高さを揃えて、幅は絵の縦横比にまかせる（fit-content で絵に吸いつく） */
  height: var(--zbgm-height, clamp(104px, 12vh, 148px));
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35));
  animation: zbgm-breathe 2.6s ease-in-out infinite;
}
.zbgm:hover { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42)); }
.zbgm:active { transform: translateY(2px) scale(0.97); animation: none; }
.zbgm.is-on { animation-duration: 1.3s; }
.zbgm:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 12px; }

/* max-width: none が要（上の防御②）。サイト側の max-width:100% を残すと、
   fit-content な親との循環参照で2枚の幅がずれる */
.zbgm img { display: block; height: 100%; width: auto; max-width: none; min-width: 0; }
/* 再生中は画像がゆったり左右に揺れる */
.zbgm.is-on img {
  animation: zbgm-sway 2.6s ease-in-out infinite;
  transform-origin: 50% 88%;
}

/* ---- 2枚入れ替え ----
   待機の姿（--off）と演奏中の姿（--on）を .is-on で入れ替える。
   「いま鳴っている・もう一度押せば止まる」が一目でわかる。
   2枚は同じ切り取り枠で書き出してあるので、入れ替えてもガタつかない。
   ※ どちらの img にも loading="lazy" を付けないこと。演奏中の姿が
     初クリックまで読み込まれず、一瞬空白になる */
.zbgm.is-on .zbgm__pose--off { display: none; }
.zbgm:not(.is-on) .zbgm__pose--on { display: none; }

/* ヒント文（OFF:「クリックで音楽」／ON:「クリックで停止」。文言はHTML側が正）
   右下固定のときはボタンの右端に揃える。中央揃えにすると、細いモチーフ（縦長のマイク等）
   でヒント文がボタンより横に広くなり、画面の外へはみ出す（スマホで実測） */
.zbgm__hint {
  position: absolute;
  right: 0;
  top: -1.9em;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--zbgm-hint, #fff);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.zbgm__hint--on { display: none; }
.zbgm.is-on .zbgm__hint--off { display: none; }
.zbgm.is-on .zbgm__hint--on { display: block; }

/* 再生中だけ、ボタンから音符がのぼる（動きはCSSの仕事。画像に音符は焼かない） */
.zbgm__notes {
  position: absolute;
  left: 14%;
  top: 6%;
  pointer-events: none;
  opacity: 0;
  color: var(--zbgm-note, #e8b84b);
  font-size: 1rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.zbgm.is-on .zbgm__notes { opacity: 1; }
.zbgm__notes i {
  position: absolute;
  font-style: normal;
  opacity: 0;
  animation: zbgm-note-rise 3.6s linear infinite;
}
.zbgm__notes i:nth-child(2) { left: 1.1em; animation-delay: 1.2s; }
.zbgm__notes i:nth-child(3) { left: 0.4em; animation-delay: 2.4s; }

/* 鳴らせなかったときの案内（LINE等のアプリ内ブラウザ）。文言はHTML側が正。
   吹き出しは <em> を使うこと（サイト側CSSが .zbgm span を装飾していても巻き込まれない） */
.zbgm__bubble {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: 190px;
  padding: 8px 11px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
  text-align: left;
  color: #fff;
  background: #1c1c1e;
  border-radius: 10px;
}
.zbgm.is-fail .zbgm__bubble { display: block; }
.zbgm.is-fail .zbgm__hint { display: none; }

/* スマホ：小さくして下端の安全域をよける。
   常駐CTA・チャットボタンがあるサイトでは --zbgm-bottom をその高さぶん上げること
   （例：--zbgm-bottom: calc(100px + env(safe-area-inset-bottom, 0px));） */
@media (max-width: 980px) {
  .zbgm {
    height: var(--zbgm-height-sp, 88px);
    right: 12px;
    bottom: var(--zbgm-bottom-sp, calc(12px + env(safe-area-inset-bottom, 0px)));
  }
  .zbgm__hint { font-size: 10px; }
}

/* カタログ・ページ内埋め込み用（右下固定をやめてその場に置く）。
   画面端の心配がないので、ヒント文はボタンの中央に戻す */
.zbgm--inline {
  position: relative;
  right: auto;
  bottom: auto;
  margin: 0 auto;
}
.zbgm--inline .zbgm__hint {
  left: 50%;
  right: auto;
  translate: -50%;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .zbgm,
  .zbgm.is-on img,
  .zbgm__notes i { animation: none !important; }
}

@keyframes zbgm-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes zbgm-sway {
  0%, 100% { rotate: -1.1deg; }
  50% { rotate: 1.1deg; }
}
@keyframes zbgm-note-rise {
  0% { translate: 0 0; opacity: 0; }
  12% { opacity: 0.9; }
  100% { translate: 0.5em -2.6em; opacity: 0; }
}