@charset "UTF-8";
/* ==========================================================================
   追従CTA（.c-float-cta）のキャラクターアニメーション

   ・この機能に必要なスタイルはすべてこのファイルに閉じてある（common.css は触っていない）。
     やめる場合は各HTMLの <link> を外し、img の src を元の1枚画像に戻せば元通りになる。
       common_btn-line-mascot.png    → common_btn-line.png
       common_btn-reserve-mascot.png → common_btn-reserve.png

   ・元は「丸＋文字＋キャラ」が1枚のPNGだったので、キャラだけを動かすために2層に分けた。
       a.c-float-cta-btn … background-image = 丸＋文字（動かない）
       └ img             … キャラだけの透過PNG（これを動かす）
     文言は img の alt に残してあるので、要素数は元のまま（増えていない）。

   ・動かすのは transform だけ。float-cta.js は .c-float-cta の bottom を
     書き換えているが、こちらは内側の img に当てているので競合しない。

   ・寸法・振幅をすべて % で指定しているのが要点。% は要素（または親）のサイズ基準なので、
     PC 143px ／ タブレット 96px ／ SP 76px ／ SPメニュー内 80px の
     どのサイズでも同じ見え方に自動で揃う（メディアクエリでの書き分けが不要）。
   ========================================================================== */

/* 丸＋文字を a の背景に敷く。地色（--c-line-green / --c-reserve-blue）は
   common.css の background ショートハンドで既に入っているのでそのまま活かす */
.c-float-cta-btn {
  position: relative; /* キャラを絶対配置する基準 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   キャラの配置

   キャラ画像はキャラの外接矩形で切り出されている（円と同じ286px四方ではない）ため、
   元画像のどこに収まるかを % で指定する。数値は元の1枚画像（286×286）における
   キャラの位置を 286 で割ったもの。くちばしの重心を基準に照合して割り出した。

     LINE   … x=61  y=137  194×149
     ご予約 … x=38  y=154  214×132

   ※ キャラ画像を差し替えて位置がズレた場合は、この4つの数値だけを直せばよい。
   -------------------------------------------------------------------------- */
.c-float-cta-btn img {
  position: absolute;
  height: auto; /* common.css の height:100% を打ち消して縦横比を保つ */
}

.c-float-cta-btn--line img {
  left: 21.3287%;  /*  61 / 286 */
  top: 47.9021%;   /* 137 / 286 */
  width: 67.8322%; /* 194 / 286 */
  --k: 1.9195;     /* 286 / 149（円基準の振幅を画像基準に換算する係数） */
}

.c-float-cta-btn--reserve img {
  left: 13.2867%;  /*  38 / 286 */
  top: 53.8462%;   /* 154 / 286 */
  width: 74.8252%; /* 214 / 286 */
  --k: 2.1667;     /* 286 / 132 */
}

.c-float-cta-btn--line {
  background-image: url("/system_panel/uploads/images/common_btn-line-bg.png");
}

.c-float-cta-btn--reserve {
  background-image: url("/system_panel/uploads/images/common_btn-reserve-bg.png");
}

/* --------------------------------------------------------------------------
   常時の動き：待ち時間つきループ
   6秒のうち最初の約1秒だけ「ひょこっ、ひょこっ」と2回はねて、残り5秒は静止する。
   追従CTAは全ページで出しっぱなしなので、動き続けると本文を読む邪魔になる。
   -------------------------------------------------------------------------- */
.c-float-cta-btn img {
  animation: c-float-cta-peek 6s ease-in-out infinite;
}

/* 2つ同時に動くと機械的に見えるので、LINE側を少し遅らせる */
.c-float-cta-btn--line img {
  animation-delay: 0.4s;
}

/* 振幅は「円の高さに対する割合」で書き、--k で画像基準に換算している。
   こうしておくと、キャラ画像の切り出しサイズが変わっても --k を直すだけで
   見た目の動く量（円に対して6%）が変わらない */
@keyframes c-float-cta-peek {
  0%   { transform: translateY(0); }
  5%   { transform: translateY(calc(-6% * var(--k))); }
  10%  { transform: translateY(0); }
  14%  { transform: translateY(calc(-3% * var(--k))); }
  18%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   ホバー（PCのみ）：カーソルを乗せている間だけ軽く上下する
   hover: hover にしているので、タッチ端末では発火しない
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .c-float-cta-btn:hover img {
    animation: c-float-cta-hop 0.6s ease-in-out infinite;
    animation-delay: 0s;
  }
}

@keyframes c-float-cta-hop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-7% * var(--k))); }
}

/* --------------------------------------------------------------------------
   タップ中（SP）：ホバーの代わりの手応え。
   animation: none でループを止めると、下の transform がそのまま効く
   -------------------------------------------------------------------------- */
.c-float-cta-btn:active img {
  animation: none;
  transform: translateY(calc(2% * var(--k))) scale(0.94);
}

/* --------------------------------------------------------------------------
   SP（〜767px）：円が76pxと小さく、画面下の狭い範囲で2つ並ぶため、
   周期を8秒に伸ばして動く頻度を落とす
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .c-float-cta-btn img {
    animation-duration: 8s;
  }
}

/* --------------------------------------------------------------------------
   動きを減らす設定の端末では止める（common.css / top.css と同じ扱い）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .c-float-cta-btn img,
  .c-float-cta-btn:hover img,
  .c-float-cta-btn:active img {
    animation: none;
    transform: none;
  }
}