ピラティススタジオの予約システム

🧘‍♀️✨ピラティス予約✨🧘‍♂️
💪😊
🎉 🎈 🧚‍♂️✨
```html
<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-20px); }
      60% { transform: translateY(-10px); }
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .bounce {
      animation: bounce 2s infinite;
    }

    .rotate {
      animation: rotate 4s linear infinite;
    }

    .shake {
      @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
      }
      animation: shake 0.5s;
    }
  </style>
</head>
<body>
  <div style="width: 400px; height: 400px; margin: 0 auto; padding: 10px; box-sizing: border-box; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border: 2px solid #ced4da; border-radius: 10px; position: relative; overflow: hidden;">
    <div style="text-align: center; margin-bottom: 10px;">
      <span style="font-size: 2em;">🧘‍♀️✨ピラティス予約✨🧘‍♂️</span>
      <div style="font-size: 1.5em;" class="bounce">💪😊</div>
    </div>
    <div style="display: flex; flex-direction: column; gap: 10px;">
      <input type="text" id="name" placeholder="名前" style="padding: 8px; border: 1px solid #ced4da; border-radius: 5px;" />
      <input type="date" id="date" style="padding: 8px; border: 1px solid #ced4da; border-radius: 5px;" />
      <input type="time" id="time" style="padding: 8px; border: 1px solid #ced4da; border-radius: 5px;" />
      <select id="class" style="padding: 8px; border: 1px solid #ced4da; border-radius: 5px;">
        <option value="">クラス選択</option>
        <option value="morning">朝のクラス 🌅</option>
        <option value="afternoon">午後のクラス 🌞</option>
        <option value="evening">夜のクラス 🌙</option>
      </select>
      <button id="submit" style="padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 5px; font-size: 1em; cursor: pointer;">予約する 🚀</button>
    </div>
    <div id="message" style="text-align: center; margin-top: 10px; font-size: 1.2em;"></div>
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
      <span style="position: absolute; top: 10px; left: 10px; font-size: 1.5em;" class="rotate">🎉</span>
      <span style="position: absolute; bottom: 10px; right: 10px; font-size: 1.5em;" class="bounce">🎈</span>
      <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2em;">🧚‍♂️✨</span>
    </div>
  </div>

  <script>
    const submitBtn = document.getElementById('submit');
    const message = document.getElementById('message');
    const reservationForm = document.querySelector('div > div');

    submitBtn.addEventListener('click', () => {
      const name = document.getElementById('name').value.trim();
      const date = document.getElementById('date').value;
      const time = document.getElementById('time').value;
      const classType = document.getElementById('class').value;

      if (!name || !date || !time || !classType) {
        message.textContent = '全部入力してね！ 😅';
        message.style.color = 'red';
        submitBtn.classList.add('shake');
        setTimeout(() => submitBtn.classList.remove('shake'), 500);
        return;
      }

      message.textContent = `予約完了！🎉 ${name}さん、${date}の${time}に${classType}クラスですね！😊`;
      message.style.color = 'green';
      reservationForm.reset();

      // Add some emoji animations
      const emojis = ['🌟', '✨', '🎊', '💖', '🪄'];
      emojis.forEach((emoji, index) => {
        const span = document.createElement('span');
        span.textContent = emoji;
        span.style.position = 'absolute';
        span.style.top = `${Math.random() * 100}%`;
        span.style.left = `${Math.random() * 100}%`;
        span.style.fontSize = '1.5em';
        span.style.animation = `bounce 1s ease-in-out ${index * 0.2}s infinite`;
        document.querySelector('div[style*="position: relative"]').appendChild(span);
        setTimeout(() => {
          span.remove();
        }, 3000);
      });
    });
  </script>
</body>
</html>
```