body {
    background-color: #ffffff; /* 背景を白に */
    border-top:6px solid #640125;
}
.pc-only{
    display:inline !important;
}
.sp-only{
    display:none !important;
}

footer {
    background-color:#640125;
    color:#fff;
    text-align:center;
    margin-top:40px;
}

/* マップコンテナ */
.map-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

/* マップ画像 */
.map-container img.map-bg {
    width: 100%;
    height: auto;
    display: block;
}

/* アイコン配置 */
.warning-icon {
    position: absolute;
    width: 18.0%;
    height: auto;
}

/* 各注意エリアの相対位置（%指定） */
.icon-1 { top: 59.38%; left: 0.2%; } /* 名蔵・崎枝 */
.icon-2 { top: 30.4%; left: 5.63%; } /* 川平・米原 */
.icon-3 { top: 80.40%; left: 2.40%; } /* バンナ公園 */
.icon-4 { top: 27.8%; left: 32.8%; } /* おもとトンネル */
.icon-5 { top: 6.25%; left: 37.4%; } /* 吹通川付近 */
.icon-6 { top: 71.63%; left: 71.65%; } /* 農研センター */
.icon-7 { top: 0.45%; left: 56.43%; } /* 平久保崎 */
.icon-8 { top: 46.50%; left: 75.50%; } /* 伊野田 */

/* .alert-danger を上書きする例 */
/* 必要に応じて、別クラス（.alert-underline など）を定義し、併用するのがおすすめ */
.alert-danger {
    display:inline-block;
    background-color: transparent !important; /* 赤背景を消す */
    color: #dc3545 !important;               /* テキストを赤色に（Bootstrap既定と同様） */
    border: none !important;                 /* デフォルトのボーダーを消す */
    border-bottom: 4px solid #dc3545 !important; /* 下線として赤色ボーダーを追加 */
    border-radius: 0 !important;             /* 角丸を消したい場合は0に設定 */
}
.forecast-container {
    display: flex; /* 横並びにする */
    justify-content: center; /* 中央揃え */
    gap: 10px; /* ボックス間の余白 */
    flex-wrap: wrap; /* 画面が狭いとき折り返す */
}

.forecast-box {
    width: 150px; /* 各ボックスの幅 */
    background: white;
    border-radius: 10px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-align: center;
}
.forecast-box img{
    width:100%;
}
.forecast-box .forecast-header {
    background-color: #2f5f9b;
    color: #fff;
    font-weight: bold;
    padding: 5px 0;
    font-size: 14px;
}
.forecast-box .forecast-weather {
    padding: 5px;
    font-size: 14px;
}
.forecast-box .txt{
    text-align:left;
    font-size:80%;
    height:80px;
}
.forecast-box .forecast-max {
    color: red;
    font-weight: bold;
    font-size: 16px;
    margin: 3px 0;
}
.forecast-box .forecast-min {
    color: blue;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}
.overall-status {
    position: absolute;
/*    top: 10px;*/
/*    left: 50px;*/
/*    padding: 20px;*/
/*    font-size: 24px;*/
    left: 10px;
    font-weight: bold;
    color: white;
    border-radius: 8px;
    text-align: center;
    color:#444;
}
.day-danger { background: #d80000; }
.day-warning { background: #de3a00; }
.day-info { background: #e1b900; }
.day-success { background: #788490; }

.level{
    color:#fff;
    padding:20px;
    font-size:30px;
}
/* 点滅アニメーション */
@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

/* 緊急レベル（速めに点滅） */
.level.flash-danger { 
    animation: flash 0.5s infinite alternate;
}

/* 他のレベル（通常の点滅） */
.level.flash {
    animation: flash 1s infinite alternate;
}

/* スマホ表示時（SP）では `.overall-status` を `.map-container` の上に移動 */
@media screen and (max-width: 768px) {
    .pc-only{
	display:none !important;
    }
    .sp-only{
	display:inline !important;
    }

    .forecast-box {
	width: 100px;
	padding:5px;
	font-size:80%;
    }
    .forecast-box .txt{
	margin-top:10px;
	text-align:left;
	height:70px;
    }
    
}