/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
}

#map-container {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え（高さが必要なら追加） */
    width: 100%; /* 幅をページいっぱいに */
    height: 90vh; /* 画面の80%の高さ */
    margin: 0 auto; /* 上下0、左右自動で中央配置 */
    padding-bottom:50px;
}

/* マップのサイズ調整 */
#map {
    width: 90%;  /* 画面幅の80%を使う */
    height: 100%; /* 親要素の高さを継承 */
    border-radius: 8px; /* 角を少し丸く */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 影をつける */
}

#tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
}

.tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
}

.data-title-section{
    padding-top:100px;
}

.data-title-section p{
    margin-bottom:5px;
}

.data-title-section {
    margin-bottom: 20px; /* タイトルと上の線の間隔を広げる */
}

.data-title-section p:first-of-type {
    border-top: 1px solid #ccc; /* 最初のpタグの上に線 */
    padding-top: 15px; /* 余白を広げる */
    margin-top: 20px; /* タイトルとの間隔を広げる */
}


.data-title-section p,
.data-title-section a {
    font-size: 16px; /* pタグとaタグのフォントサイズを統一 */
}


.data-explain {
    max-width: 800px;  /* 任意の幅に調整 */
    margin: 0 auto;    /* 中央寄せ */
    padding: 10px 20px;
    text-align: left;
}