/* =====================================================================
   ジャンプするボール（loader-jump v2）全ページ共通
   - トップページ：スライダーのローダー（css/slider-loader.css のオーバーレイの中）
   - 全ページ   ：右下の「TO HEADER」ボタン（footer.php / main.css の #page-top）
   使い方：<span class="loader"></span> を置く
   ===================================================================== */

/* ===== ここから loader-jump v2 ===== */

/* ---- 入れ物（円と影の置き場所） ---- */
.loader {
  display: block;       /* <span> で置いても大きさを持つように */
  position: relative;
  width: 20px;
  height: 24px;
  margin-top: 20px;     /* ジャンプの高さ(20px)と同じ */
}

/* ---- 影（円の下） ---- */
.loader::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 5px;
  border-radius: 50%;
  background: #000;
  filter: blur(1.5px);
  opacity: .45;         /* 影の濃さ（通常時）。元は .3 */
  animation: loader-shadow 1.1s infinite;
}

/* ---- 円 ---- */
.loader::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1c1d1d;
  transform-origin: center bottom;
  animation: loader-jump 1.1s infinite;
}

/* ---- 円の動き ---- */
@keyframes loader-jump {
  0%   { transform: translate(0, 0)     rotate(0deg)   scale(1, 1);      animation-timing-function: ease-in-out; }
  7%   { transform: translate(3px, 0)   rotate(0deg)   scale(1, 1); }
  19%  { transform: translate(-4px, 0)  rotate(0deg)   scale(1, 1); }
  31%  { transform: translate(4px, 0)   rotate(0deg)   scale(1, 1); }
  44%  { transform: translate(-3px, 0)  rotate(0deg)   scale(1, 1); }
  50%  { transform: translate(0, 0)     rotate(0deg)   scale(1, 1);      animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  60%  { transform: translate(0, -15px) rotate(-6deg)  scale(.78, 1.3);  animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  72%  { transform: translate(0, -20px) rotate(-15deg) scale(1.15, .82); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  80%  { transform: translate(0, -10px) rotate(-6deg)  scale(.88, 1.18); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  88%  { transform: translate(0, 0)     rotate(0deg)   scale(1.3, .55);  animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  94%  { transform: translate(0, 0)     rotate(0deg)   scale(.94, 1.08); animation-timing-function: ease-in-out; }
  100% { transform: translate(0, 0)     rotate(0deg)   scale(1, 1); }
}

/* ---- 影の動き ---- */
@keyframes loader-shadow {
  0%   { transform: translateX(0)    scaleX(1);    opacity: .45;  animation-timing-function: ease-in-out; }
  7%   { transform: translateX(3px)  scaleX(1); }
  19%  { transform: translateX(-4px) scaleX(1); }
  31%  { transform: translateX(4px)  scaleX(1); }
  44%  { transform: translateX(-3px) scaleX(1); }
  50%  { transform: translateX(0)    scaleX(1);    opacity: .45;  animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  60%  { transform: translateX(0)    scaleX(.55);  opacity: .21; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  72%  { transform: translateX(0)    scaleX(.36);  opacity: .1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  80%  { transform: translateX(0)    scaleX(.65);  opacity: .24; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  88%  { transform: translateX(0)    scaleX(1.3);  opacity: .65; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  94%  { transform: translateX(0)    scaleX(.98);  opacity: .45; }
  100% { transform: translateX(0)    scaleX(1);    opacity: .45; }
}

/* ---- 「動きを減らす」設定のときは止める ---- */
@media (prefers-reduced-motion: reduce) {
  .loader::before,
  .loader::after { animation: none; }
}

/* ===== ここまで loader-jump v2 ===== */