🌴アメダスデータ🌞

南国市日章のデータを取得します！
☀️
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>南国市日章のアメダスデータ</title>
    <style>
        @keyframes bounce {
            0%   { transform: translateY(0); }
            50%  { transform: translateY(-20px); }
            100% { transform: translateY(0); }
        }

        @keyframes rotate {
            0%   { transform: rotate(0); }
            50%  { transform: rotate(180deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to   { transform: translateX(0); }
        }
    </style>
</head>
<body>
    <div style="width: 100%; max-width: 400px; height: 100%; max-height: 400px; margin: auto; border: 2px solid #4CAF50; padding: 20px; box-sizing: border-box; overflow: hidden;">
        <h1 style="text-align: center; color: #FF6347;">🌴アメダスデータ🌞</h1>
        <p style="text-align: center; color: #FF6347;">南国市日章のデータを取得します！</p>
        
        <div style="text-align: center;">
            <input type="date" id="startDate" style="padding: 10px; margin: 5px;">
            <input type="date" id="endDate" style="padding: 10px; margin: 5px;">
            <button onclick="fetchData()" style="padding: 10px; background-color: #FF4500; color: #FFFFFF; border: none; cursor: pointer;">🚀検索🌟</button>
            
            <div id="emojiButton" onclick="animateSun()" style="display: inline-block; padding: 10px; background-color: #FFD700; border-radius: 50%; margin-top: 15px;">
                ☀️
            </div>
        </div>
        
        <div id="results" style="margin-top: 20px; height: 250px; overflow-y: scroll; border: 1px solid #FFD700; padding: 10px; box-sizing: border-box;"></div>
    </div>
    
    <script>
        function fetchData() {
            document.getElementById('results').innerHTML = "📅データ取得中...";
            // 実際にはAPIを呼んでデータを取得します。

            setTimeout(() => {
                let data = [
                    { date: '2023-03-20', temp: 15, rain: 5, sunshine: 0 },
                    { date: '2023-04-15', temp: 18, rain: 6, sunshine: 2 },
                    { date: '2023-05-10', temp: 19, rain: 8, sunshine: 1 },
                ];
                
                let filteredData = data.filter(d => (d.temp >= 10 && d.temp <= 20) && ((d.rain >= 4) || (d.sunshine <= 1)));
                let results = filteredData.map(d => `📅 ${d.date} - 気温: ${d.temp}℃, 降水量: ${d.rain}mm, 日照時間: ${d.sunshine}時間`).join('<br>');

                document.getElementById('results').innerHTML = results ? results : "❌ 該当するデータはありませんでした。";
            }, 1000);
        }

        function animateSun() {
            let sun = document.getElementById('emojiButton');
            sun.style.animation = "rotate 1s linear 1";

            setTimeout(() => {
                sun.style.animation = '';
            }, 1000);
        }

        document.getElementById('results').onclick = function (event) {
            if (event.target.matches('div')) {
                event.target.style.animation = "bounce 0.5s linear 1";
                setTimeout(() => {
                    event.target.style.animation = '';
                }, 500);
            }
        }
    </script>
</body>
</html>
```