/* ------------------------------
   CssTemplate: default.css 
   ------------------------------
   Forecast Page Style
------------------------------ */

/*==================================================================
   forecast Page Style
==================================================================*/
/*---map_container---*/
.map_container{position:relative;width:100%;height:84.5rem;margin:5rem 0;
 background:url(./map_bg.png) center / 100% no-repeat;}
.map_container .map_pin{position:absolute;width:18.5rem;height:18.5rem;color:#231815;font-size:1.4rem;text-align:center;padding:1rem;background:#FFF;border:0.3rem solid var(--site-color);border-radius:1rem;cursor: pointer;}
.map_container .map_pin.hokkaido{top:1rem; left:27rem;}
.map_container .map_pin.tohoku{top:23.5rem; right:0;}
.map_container .map_pin.kanto{top:44rem; right:0;}
.map_container .map_pin.chubu{top:26.5rem;left:50%;transform:translateX(-50%);}
.map_container .map_pin.kinki{bottom:0; right:0; }
.map_container .map_pin.chugoku{top:34.5rem; left:0; }
.map_container .map_pin.shikoku{bottom:0;left:50%;transform:translateX(-50%);}
.map_container .map_pin.kyushu{bottom:0;left:0;}

.map_container .map_pin > .areaname{font-size:3rem; font-weight:bold;font-family:'Zen Maru Gothic';margin-bottom:0.5rem; }
.map_container .map_pin > ul.forecast{display:flex;gap:1rem;align-items: flex-start;opacity: 0;transition: opacity 0.6s ease-in-out;}
.map_container .map_pin > ul.forecast.loaded {opacity: 1;}
.map_container .map_pin > ul.forecast li > .date{display:block;font-size:2.4rem;color:#FFF;font-weight:bold;margin-bottom:0.5rem;background:var(--site-color);border-radius:3rem;}
.map_container .map_pin > ul.forecast li > .icon{display:block;width:80%;margin:0 auto;}

/*---box_mood---*/
dl.box_mood{font-family:'Zen Maru Gothic';border:0.4rem solid var(--site-color);border-radius:2rem;overflow: hidden;}
dl.box_mood > dt{color:#FFF;font-size:3.6rem;font-weight:bold;line-height:1.2;text-align:center;padding:1rem;background:var(--site-color)}
dl.box_mood > dd{background:#FFF;padding:2rem 1rem;}
dl.box_mood > dd ul.list_mood_explan{display:flex;justify-content: space-between;align-items: center;}
dl.box_mood > dd ul.list_mood_explan > li{flex:1;}
dl.box_mood > dd ul.list_mood_explan > li > .icon{display:block;width:6rem;margin:0 auto 0.8rem;}
dl.box_mood > dd ul.list_mood_explan > li > .explan{display:block;font-size:2.6rem;font-weight:bold;text-align:center;}

/*---overlay_forecast---*/
.overlay_forecast .inner{font-family:'Zen Maru Gothic';padding:5rem;border:0.4rem solid var(--site-color);max-height: 95vh;overflow-y: auto;}
.overlay_forecast .inner > h3{color:#231815;font-size:6rem;font-weight:bold;text-align:center;padding:0 0 2rem 0;margin-bottom:3rem;background:url(./ttl_bg01.png) center / 100% no-repeat;}
.overlay_forecast .inner .forecast_wrap{/*display:flex;align-items: center;justify-content: space-between;*/margin-bottom:3rem;}
.overlay_forecast .inner .forecast_wrap .box_mood{/*width:26rem;*/width:100%;margin-bottom:3rem;}
.overlay_forecast .inner .forecast_wrap .box_mood > dd{display:flex;justify-content: space-between;align-items: center;}
.overlay_forecast .inner .forecast_wrap .box_mood > dd img.icon{width:8.5rem;}
.overlay_forecast .inner .forecast_wrap .box_mood > dd > .icon{width:18rem;text-align:center;}
.overlay_forecast .inner .forecast_wrap .box_mood > dd > .text{width:calc(100% - 18rem);color:#231815;font-weight:bold;text-align:left;}
.overlay_forecast .inner .forecast_wrap .box_mood > dd > .text .label{font-size:4rem;font-weight:bold;line-height:1.2;}
.overlay_forecast .inner .forecast_wrap .box_mood > dd > .text .comment{font-weight:bold;}
.overlay_forecast .inner .forecast_wrap .tbl_forecast{/*width:calc(100% - 30rem);*/width:100%;border:none;border-collapse: collapse;}
.overlay_forecast .inner .forecast_wrap .tbl_forecast th,
.overlay_forecast .inner .forecast_wrap .tbl_forecast td{font-size:3.4rem;font-weight:bold;text-align:left;}
.overlay_forecast .inner .forecast_wrap .tbl_forecast td{text-align:right;}
.overlay_forecast .inner > p.comment{font-size:3.4rem;color:#231815;font-weight:bold;text-align:left;background:var(--site-bg-color);padding:2rem 3rem;border-radius:2rem;}
.overlay_forecast .inner > .close{position:absolute;top:0;right:2rem;color:var(--site-color);font-size:4rem;font-weight:bold;cursor: pointer;}
/* 指数別カラー設定 */
.overlay_forecast.mood-1 .js_label { color: #00bad8; }
.overlay_forecast.mood-2 .js_label { color: #00ce5b; }
.overlay_forecast.mood-3 .js_label { color: #ffca00; }
.overlay_forecast.mood-4 .js_label { color: #ff9000; }
.overlay_forecast.mood-5 .js_label { color: #ff616f; }

/*---overlay_loading（overlay_01ベース）---*/
.overlay_loading{font-family: 'Zen Maru Gothic';}
.overlay_loading .loading-text { color: #666;font-size: 2.4rem;font-weight: bold;}
.overlay_loading .loading-icon {
 position: relative;display: flex;justify-content: center;align-items: center;
 margin-bottom: 1rem;height: 6rem;}
.overlay_loading .loading-icon > img {
 height: 5rem;
 animation: float 0.5s ease-in-out infinite;}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
/* プロセスバー */
.overlay_loading .progress-bar {width: 20rem;height: 0.6rem;margin: 0.5rem auto 1.5rem;overflow: hidden;background: #e0e0e0;border-radius: 0.3rem;}
.overlay_loading .progress-fill {width: 0%;height: 100%;background: var(--site-color);border-radius: 0.3rem;transition: width ease-out;}
@keyframes progressFill {
    0% { width: 0%; }
    100% { width: 100%; }
}