/* コンテナ全体の設定 */
#container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px; /* 要素間の間隔を広げる */
    padding: 20px; /* 全体に余白を追加 */
    background-color: #d3d3d3; /* 明るい背景色 */
}

/* 地図エリア */
#map {
    height: 800px;
    width: 45%;
    border: 2px solid #007bff; /* 青色の枠線で視覚的な強調 */
    border-radius: 8px; /* 角を丸くして柔らかい印象に */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

/* 履歴エリア */
#history {
    width: 50%;
    padding: 20px;
    background-color: #ffffff; 
    color: #333333; /* 濃い文字色でコントラストを確保 */
    overflow-y: auto;
    max-height: 800px;
    border-radius: 8px;
    border: 2px solid #cccccc; /* 視認性の高い枠線 */
    font-size: 1.2rem; /* 文字を大きくして読みやすく */
    line-height: 1.6; /* 行間を広げて視認性を向上 */
}

/* 各履歴エントリ */
.history-entry {
    background-color: #f8f9fa; /* 柔らかい背景色 */
    color: #333333; /* 濃い文字色 */
    padding: 15px; /* 内側の余白を広げる */
    margin-bottom: 15px; /* エントリ間の間隔を広げる */
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 明確な影を追加 */
    font-size: 1.2rem; /* 文字を大きく */
}

/* ポップアップウィンドウ */
.info-window {
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    width: 180px; /* 少し幅を広げる */
    border: 2px solid #007bff; /* 青色の枠線 */
    font-size: 1.1rem; /* 文字サイズを拡大 */
    color: #333333; /* 濃い文字色 */
}

/* メディアクエリ：画面サイズが小さい場合の調整 */
@media (max-width: 768px) {
    #container {
        flex-direction: column;
    }

    #map, #history {
        width: 100%;
        height: auto;
    }

    #map {
        height: 300px; /* スマホ向けの高さ調整 */
    }
}

h1
{
	color: #004b00;
  background-color: #f5f5dc;
}

body{
	background-color:#f5f5f5;
}
h2{
	color:#004b00;
}