海外旅行ページ

<title>世界の海外旅行ガイド</title>

<style>
    body {
        margin: 0;
        font-family: "Arial", "メイリオ", sans-serif;
        background: linear-gradient(135deg, #dff6ff, #ffffff);
        color: #333;
    }

    header {
        background: linear-gradient(135deg, #0077b6, #00b4d8);
        color: white;
        text-align: center;
        padding: 45px 20px;
    }

    header h1 {
        font-size: 38px;
        margin: 0 0 10px;
    }

    header p {
        font-size: 18px;
        margin: 0;
    }

    .container {
        max-width: 1000px;
        margin: 40px auto;
        padding: 0 20px;
    }

    .countries {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 20px;
    }

    .country-button {
        background: white;
        border: none;
        border-radius: 15px;
        padding: 25px 10px;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
        transition: 0.3s;
    }

    .country-button:hover {
        transform: translateY(-5px);
        background: #e8f9ff;
    }

    .flag {
        font-size: 45px;
        display: block;
        margin-bottom: 10px;
    }

    #result {
        display: none;
        margin-top: 40px;
        background: white;
        border-radius: 20px;
        padding: 35px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    #result h2 {
        color: #0077b6;
        font-size: 30px;
    }

    .info {
        background: #f1fbff;
        padding: 20px;
        border-radius: 12px;
        margin-top: 20px;
    }

    .info h3 {
        color: #0096c7;
    }

    .back-button {
        margin-top: 25px;
        padding: 12px 25px;
        border: none;
        border-radius: 25px;
        background: #0077b6;
        color: white;
        font-size: 16px;
        cursor: pointer;
    }

    .back-button:hover {
        background: #023e8a;
    }

    footer {
        margin-top: 50px;
        padding: 25px;
        background: #023e8a;
        color: white;
        text-align: center;
    }
</style>

🌎 世界の海外旅行ガイド

行ってみたい国を選んで、観光名所を探してみよう！

<h2>✈️ 国を選んでください</h2>

<div class="countries">

    <button class="country-button" onclick="showTravel('france')">
        <span class="flag">🇫🇷</span>
        フランス
    </button>

    <button class="country-button" onclick="showTravel('usa')">
        <span class="flag">🇺🇸</span>
        アメリカ
    </button>

    <button class="country-button" onclick="showTravel('italy')">
        <span class="flag">🇮🇹</span>
        イタリア
    </button>

    <button class="country-button" onclick="showTravel('egypt')">
        <span class="flag">🇪🇬</span>
        エジプト
    </button>

    <button class="country-button" onclick="showTravel('australia')">
        <span class="flag">🇦🇺</span>
        オーストラリア
    </button>

    <button class="country-button" onclick="showTravel('uk')">
        <span class="flag">🇬🇧</span>
        イギリス
    </button>

</div>

<div id="result">

    <h2 id="title"></h2>

    <div class="info">
        <h3>📍 おすすめ観光名所</h3>
        <p id="spot"></p>
    </div>

    <div class="info">
        <h3>📖 観光名所の紹介</h3>
        <p id="description"></p>
    </div>

    <div class="info">
        <h3>⭐ おすすめポイント</h3>
        <p id="recommendation"></p>
    </div>

    <button class="back-button" onclick="backToCountries()">
        ← 国選択に戻る
    </button>

</div>

🌎 World Travel Guide

楽しい海外旅行を計画しよう！