/* mainの設定
------------------------------------------*/
#radar .box { padding-bottom: 30px; }
#radar .item-box:not(:last-child) { margin-bottom: 15px; }

.item-box { margin-left: 10px; margin-right: 10px; }

.item-box.bb { padding-bottom: 10px; border-bottom: 1px solid #eee; }
.item-box.bt { padding-top: 10px; border-top: 1px solid #eee; }
.item-box.btb { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }

/*====================================================================================
MAP用
====================================================================================*/
/*------------------------------------------
MAP基本
------------------------------------------*/
.map, .movie { margin-left: 0; margin-right: 0; position: relative; }
.map .map-box, .movie .map-box { position: relative;}
.map .map-box .info-weather.area, .movie .map-box .info-weather.area { position: absolute; top: 50%; left: 50%; }

/*------------------------------------------
MAP内パーツ
------------------------------------------*/
ul.info-weather.area li { position: absolute; }
ul.info-weather.area li a { display: block; width: 38px; background: rgba(255, 255, 255, 0.8); border: 1px solid #fff; border-radius: 4px; }
ul.info-weather.area figure { margin-left: auto; margin-right: auto; }
ul.info-weather.area span { display: block; font-size: 0.6rem; line-height: 110%; }
ul.info-weather.area .temp span { display: inline; color: #333; }
ul.info-weather.area .temp:after { display: none; }
ul.info-weather.area .areapoint { color: #000; }

/* マップ：日付 時刻 */
.map-box .time { position: absolute; background: rgba(0, 0, 0, 0.5); top: 5px; left: 5px; }
.map-box .time * { font-size: 1.2rem; font-weight: bold; color: #fff; line-height: 100%; padding: 5px; }

/* gps panel */
.map_gps_pannel {position: absolute;width: 60px;height: 60px;bottom: 10px;left: 18px;z-index: 899;}
.map_gps_btn {background-image: url('https://weathernews.jp/s/ski/img/btn_gps.png'); background-repeat: no-repeat;background-size: 40px 40px;width: 40px;height: 40px;}
.map_gps_txt {font-size: 13px; font-weight: 700; line-height: 1em; width: 100%; text-align: left; text-shadow: #fff 1px 1px 0, #fff -1px -1px 0,#fff -1px 1px 0, #fff 1px -1px 0,#fff 0px 1px 0, #fff  0-1px 0,#fff -1px 0 0, #fff 1px 0 0;}
.gps_working_btn, .loading {opacity: 0.3;}
.gps_working_txt {font-weight: bold;color: #00f;}
/* type panel */
.map_type_pannel {display:inline; position: absolute; width: 125px; bottom: 40px; right: 5px; z-index: 899; text-align: center;}
.toggle_tab{display:inline-block;width:50%;cursor:pointer}
#radar_type {width: 32px; vertical-align: bottom; border-radius: 50%; box-shadow: 2px 2px 2px #666666; padding: 2px; border: solid 2px #fff; }
#radar_type.nowcast {background-color: #CEF6D8;}
#radar_type.ameyuki {background-color: #E3CEF6;}
#radar_type_txt {font-size: 13px; font-weight: 700; line-height: 1.3em; width: 100%; text-shadow: #fff 1px 1px 0, #fff -1px -1px 0,#fff -1px 1px 0, #fff 1px -1px 0,#fff 0px 1px 0, #fff  0-1px 0,#fff -1px 0 0, #fff 1px 0 0;}
/* under map panel */
.under_map_panel1 {background: #333; text-align: center; height: 35px; width: 100%;padding-top:10px;}
#radar_legend {margin-top: 1px; height: 30px; width: 152px;}
.btn-tm {width: 45px; height: 28px; padding-top: 3px; box-sizing: border-box; border: solid 1px #fff; border-radius: 8px; overflow: hidden; background: #0c419a;}
#btn_tm_left.disabled,#btn_tm_right.disabled {color: #9F9F9F; background: #051A3E; font-weight: 300; }
#btn_prev {position: relative; left: 5px; width: 0px; height: 0px; border: 10px solid; border-color: transparent #fff transparent transparent; }
#btn_next {position: relative; left: 18px; width: 0px; height: 0px; border: 10px solid; border-color: transparent transparent transparent #fff; }
#btn_tm_left.disabled #btn_prev{position: relative; left: 5px; width: 0px; height: 0px; border: 10px solid; border-color: transparent #424242 transparent transparent; }
#btn_tm_right.disabled #btn_next{position: relative; left: 18px; width: 0px; height: 0px; border: 10px solid; border-color: transparent transparent transparent #424242; }
.under_map_panel2 {background: #333; text-align: center; width: 100%; padding-top:5px; padding-bottom:5px;}
ul.item-list {width: 100%; overflow: hidden; }
ul.item-list li {display:inline-block; text-align: center; vertical-align: middle; margin: 0 1px; }
#range_left {color: #fff; font-size: 12px; padding-right: 9px; line-height: 4em; }
#range_right {color: #ffa500; font-size: 12px; padding-left: 5px; line-height: 4em; }
#tm_position .ui-slider-handle {width:17px; height:20px; margin-top: -5px; background: #fff; }
.pos_icon {pointer-events: none;}

/*スライダーの色を実況と予想で変化させるための処理*/
#tm_position.ui-slider{background:linear-gradient(90deg,gray 0%,gray 50%,orange 50%,orange 100%);border:0px}
.map_bottom_text{width: 100%;position: absolute;bottom: 16px;z-index: 899;}
#radar_tm{width: 135px; line-height: 1.4em; background-color: rgba(0, 0, 0, 0.5); border-radius:15px; text-align: center; font-weight: bold; font-size: 16px; margin: 0 auto;z-index:10;}
#radar_tm.obs {color: #fff;}
#radar_tm.fcst {color: #ffa500;}
/*レンダリングのエッジをぼかさない様に*/
img.tiled-radar{
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
  image-rendering: -webkit-optimize-contrast; /* Safari (WebKit) */
  image-rendering: -moz-crisp-edges;          /* Firefox (Gecko) */
  image-rendering: -o-crisp-edges;            /* Opera 12.x */
  image-rendering: pixelated;                 /* Chrome 41+, Opera 29+ (CSS4) */
}
/*leaflet*/
.leaflet-control-attribution a{font-size: 11px;}

.mTB20 {margin-top: 20px; margin-bottom: 20px;}
.txt_icon {width:1.45em; margin-right: 2px; vertical-align: sub;}
.txt_head {margin:10px; color:#909090;}
.btn_banner {margin:0 auto 20px; max-width: 375px;}

.leaflet-tile-pane {z-index:1000;}
.leaflet-marker-pane {z-index:10000;}