html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: #daf6f2;
}
.image-container,
.image-container-top {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

/* === 最短で確実に動かす：a 要素をアニメーション === */
.cta-floating{
  display: block;
  width: min(560px, 92vw);
  margin: 16px auto;
  animation: floaty 3.5s ease-in-out infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}
.cta-floating img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
}

@keyframes floaty{
  0%,100% { transform: translateY(0) rotate(0) scale(1); }
  50%     { transform: translateY(-10px) rotate(0.8deg) scale(1.01); }
}

/* 念のため：reduced-motionで止めない（動作確認が目的ならコメント解除しない） */
/*
@media (prefers-reduced-motion: reduce){
  .cta-floating, .cta-floating img { animation: none !important; }
}
*/