<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スロットゲーム</title>
    <style>
        .slot { display: inline-block; width: 50px; height: 50px; border: 1px solid #000; text-align: center; font-size: 24px; }
        button { margin-top: 20px; }
    </style>
</head>
<body>
    <div>
        <div class="slot" id="slot1"></div>
        <div class="slot" id="slot2"></div>
        <div class="slot" id="slot3"></div>
    </div>
    <button onclick="spin()">回す</button>
    <script>
        function spin() {
            const symbols = ['🍒', '🍋', '🍊', '🍉', '⭐', '🍀'];
            document.getElementById('slot1').innerText = symbols[Math.floor(Math.random() * symbols.length)];
            document.getElementById('slot2').innerText = symbols[Math.floor(Math.random() * symbols.length)];
            document.getElementById('slot3').innerText = symbols[Math.floor(Math.random() * symbols.length)];
        }
    </script>
</body>
</html>
