```html
<!DOCTYPE html>
<html>
<head>
<title>時計ゲーム</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes resetRotation {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; position: relative; margin: auto;">
<div id="clock" style="width: 100%; height: 100%; border: 10px solid black; border-radius: 50%; position: relative; background: white;">
<div id="secondHand" style="width: 2px; height: 50%; background: red; position: absolute; top: 10%; left: 50%; transform-origin: bottom; transform: rotate(0deg);">
</div>
</div>
<div style="position: absolute; top: 420px; left: 50%; transform: translateX(-50%);">
<input type="text" id="durationInput" placeholder="秒数を入力" style="width: 200px; height: 30px; font-size: 16px; padding: 5px; text-align: center;">
<button id="start" style="background: blue; color: white; width: 100px; height: 40px; font-size: 16px; margin: 5px;">START▶</button>
<button id="stop" style="background: red; color: white; width: 100px; height: 40px; font-size: 16px; margin: 5px;">STOP■</button>
</div>
</div>
<script>
let secondHand = document.getElementById('secondHand');
let startButton = document.getElementById('start');
let stopButton = document.getElementById('stop');
let durationInput = document.getElementById('durationInput');
let animationDuration = 60; // Default duration in seconds
startButton.addEventListener('click', function() {
let inputVal = durationInput.value;
if (inputVal && !isNaN(inputVal)) {
animationDuration = parseFloat(inputVal);
}
secondHand.style.animation = `rotate ${animationDuration}s linear infinite`;
});
stopButton.addEventListener('click', function() {
secondHand.style.animation = '';
secondHand.style.transform = 'rotate(0deg)';
});
</script>
</body>
</html>
```
