:root {
    /*--primary-color:;*/
    --background-color: #ECDCBF;
    --background-color-light: #ffeadb;
    --accent-color: #9B3B32;
    --wood-color: #6d2600;
    
    --accent-color-deep: #803028;
    --sub-color: #687786;
    --color-background: #f5e8d7; /* 色褪せた紙の色 */
    --color-paper: #fffdfa;
    --color-border: #8c7853;
    --color-text-main: #333;
    --color-text-label: #5a4a2c;
    --color-accent-red: #c0392b; /* 朱色 */
    --color-accent-red-dark: #a03024;
    
}




/* ツールチップの背景と枠線を透明にする */
.info-tooltip {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* 情報ボックス本体のスタイル */
.info-box {
    background-color: rgba(255, 255, 255, 1); /* 少しだけ透けた白 */
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #777;
    z-index: 500;
    position: relative;


}

/* 非表示にするためのクラス */
.info-hidden {
    display: none;
    /* opacity: 0; */ /* display: noneの代わり。アニメーションさせたい場合はこちら */
    /* pointer-events: none; */ /* opacityとセットで使う */
}

.hide-tooltips .leaflet-tooltip.info-tooltip {
    display: none;
}

.info-box p {
    font-size: 20px !important;
    font-weight: bold !important;
}

.info-sub-data {
    display: flex;
    justify-content: space-between;
}

/* Leaflet Zoom Control Retro Style */
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    background-color: #c0392b !important; /* --color-accent-red */
    color: #fffdfa !important; /* --color-paper */
    border: 2px solid #a03024 !important; /* --color-accent-red-dark */
    border-radius: 0 !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 26px !important;
    font-size: 1.5em !important;
    font-weight: bold !important;
}

.leaflet-control-zoom-in:hover, .leaflet-control-zoom-out:hover {
    background-color: #a03024 !important; /* --color-accent-red-dark */
}

.leaflet-control-zoom-in {
    border-bottom: 1px solid #a03024 !important;
}