/* @charset "utf-8"; */

#alert_area{
	width: 100%;
  }
  
  #alert_area b{
	text-decoration: underline;
  }
  /* メッセージ */
  #alert_area .alert_msg{
	  width:85%;
	  margin: 40px auto;
  }
  
  #alert_area .alert_msg p.title_t{	/* 黒背景＋白文字 */
	color: #fff;
	background: rgb(12 0 12);
	  font-size: 130%;
	text-align: center;
	  margin: 40px auto 30px auto;
	  padding: 0.5em 0 0.4em 0;
  }
  
  #alert_area .alert_msg p.title_k{ /* 紫背景＋黒文字（白縁付き）*/
	color: #000;
	background: rgb(200 0 255);
	  font-size: 130%;
	text-align: center;
	  text-shadow:1px 1px 0px #FFF, -1px -1px 0px #FFF,
			   -1px 1px 0px #FFF,  1px -1px 0px #FFF,
				0px 1px 0px #FFF,  0px -1px 0px #FFF,
			   -1px 0px 0px #FFF,  1px  0px 0px #FFF;
	  letter-spacing: 0.1em;
	  margin: 40px auto 30px auto;
	  padding: 0.5em 0 0.4em 0;
  }
  
  
  /* [参考]部分レイアウト */
  #alert_area .wbgtmemo{
	  width: calc(70% - 8em);
	  font-size: 100%;
	  line-height: 1.5em;
	  border-radius: 5px;
	  border: 1px solid #c2c2c2;
	  margin: 1em auto 2em auto;
	  padding: 1em 4em;
  }
  
  #alert_area .wbgtmemo > p{
	  margin: 0em 0em 0em 3em;
  }
  
  /* ------------------------------
	 アラート地図
	 ------------------------------ */
  #alert_map_area{
	width: 100%;
	  text-align: center;
  }
  
#alert_map_area .history_button{
	align-items: center;
	display: flex;
	justify-content: space-between;
	font-size: 90%;
	margin: 20px 0px -50px 0px;
}

#alert_map_area .history_button button{
	border-radius: 3px;
	border: 1px solid #0c000b;
	padding: 0.3em 1em 0.2em 1em;
}

  #alert_map_area .update{
	  text-align: right;
	  font-size: 110%;
	  margin: 20px 0px 10px 0px;
  }
  
  #alert_map_area .map_area{
	  vertical-align: top;
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 1em;
  }
  
  #alert_map_area #td1{}
  #alert_map_area #td2{}
  
  #alert_map_area .mapsize_l{ width: 720px;}
  #alert_map_area .mapsize_s{ width: 270px;}
  
  #alert_map_area a{ text-decoration: none;}
  
  #alert_map_area .day{
	  width: 100%;
	  font-size: 140%;
	  border: 1px solid #767676;
	  margin: 0 0 -1px;
	  padding: 0.5em 0em 0.2em 0em;
  }
  
  #alert_map_area img{
	  max-width:100%;
	  border: 1px solid #767676;
  }
  
  /* 下絵地図 */
  #alert_map_area .map{
	  position: relative;
  }
  
  /*--- サンプル画像を重ねるための仮設定 ---*/
  /* 発表地域地図 */
  #alert_map_area img.alertmap{
	  position: absolute;
	  left: 0px;
	  top: 0px;
  }
  
  /* 凡例 */
  #alert_map_area span.b1,#alert_map_area span.p1,#alert_map_area span.r1,
  #alert_map_area span.b2,#alert_map_area span.p2,#alert_map_area span.r2{
	  position: absolute;
  }
  
  /* アラート名 [サイズ・位置]*/
  #alert_map_area span.b1,#alert_map_area span.p1,#alert_map_area span.r1{
	  width: 40%;
	  height: 4%;
	  left: 2%;
  }
  
  /* 発表状況 [サイズ・位置]*/
  #alert_map_area span.b2,#alert_map_area span.p2,#alert_map_area span.r2{
	  width: 14%;
	  height: 4%;
	  left: calc(2% + 40%);
  }
  
  #alert_map_area span.r2{
	  display: none;
  }
  
  #alert_map_area .mapsize_l span{
	  font-size: 14pt;
	  padding: 0.2em 0 0em 0;
  }
  #alert_map_area .mapsize_s span{
	  font-size: 6pt;
	  padding: 0.2em 0 0.2em 0;
  }

  /* アラートマップサイズ(iframe内作成向け) */
  #alert_map_area .mapsize_l img{
	width: 720px;
	height: 720px;
  }

  #alert_map_area .mapsize_l iframe{
	width: 722px; 
	height: 779px; 
	margin: 0 auto; 
	padding: 0;
  }
    
  /* 発表状況 ［位置］地図サイズ大/小 */
  #alert_map_area .mapsize_l{
	  span.b1, span.b2{ top: 2%;}
	  span.p1, span.p2{ top: calc(4% + 4%);}
	  span.r1, span.r2{ top: calc(6% + 8%);}
  }
  #alert_map_area .mapsize_s{
	  span.b1, span.b2{ top: 2%;}
	  span.p1, span.p2{ top: calc(5% + 4%);}
	  span.r1, span.r2{ top: calc(8% + 8%);}
  }
  
  /* バナー［黒］*/
  #alert_map_area span.b1{
	  color: rgb(255, 255, 255, 1);
	  background: rgb(12, 0, 12, 1); /* 黒 */
	  border: 1px solid rgb(12, 0, 12, 1);
  }
  
  /* バナー［紫］*/
  #alert_map_area span.p1{
	  color: rgb(12, 0, 12, 1); /* 黒 */
	  text-shadow:     1px 1px 0px #FFF, -1px -1px 0px #FFF,
			  -1px 1px 0px #FFF,  1px -1px 0px #FFF,
			   0px 1px 0px #FFF,  0px -1px 0px #FFF,
			  -1px 0px 0px #FFF,  1px  0px 0px #FFF;
	  background: rgb(200, 0, 255, 1); /* 紫 */
	  border: 1px solid rgb(200, 0, 255, 1); /* 紫 */
  }
  
  /* バナー［赤］*/
  #alert_map_area span.r1{
	  color: rgb(12, 0, 12, 1); /* 黒 */
	  text-shadow:     1px 1px 0px #FFF, -1px -1px 0px #FFF,
			  -1px 1px 0px #FFF,  1px -1px 0px #FFF,
			   0px 1px 0px #FFF,  0px -1px 0px #FFF,
			  -1px 0px 0px #FFF,  1px  0px 0px #FFF;
	  background: rgb(255, 40, 0, 1); /* 赤 */
	  border: 1px solid rgb(255, 40, 0, 1); /* 赤 */
  }
  #alert_map_area .mapsize_s span.r1{
	  font-size:5.5pt; /* TargetData2 赤 文字サイズ小 */
  }
  
  #alert_map_area span.b2,
  #alert_map_area span.p2,
  #alert_map_area span.r2{
	  color: rgb(12, 0, 12, 1); /* 黒 */
	  background: rgb(255, 255, 255, 1);
  }
  #alert_map_area span.b2{ border: 1px solid rgb(12, 0, 12, 1); /* 黒 */ }
  #alert_map_area span.p2{ border: 1px solid rgb(200, 0, 255, 1); /* 紫 */ }
  #alert_map_area span.r2{ border: 1px solid rgb(255, 40, 0, 1); /* 赤 */ }
  
  #alert_map_area	span.pre{
	  background: rgb(238, 238, 238, 1); /* 予定（灰色）*/
  }
  
  #alert_map_area .mapsize_s .map_overlay_text{
	font-size: 2rem;
}
  
  /* ------------------------------
	 表
	 ------------------------------ */
  #alert_monitor {
	  width: 100%;
	  margin: 0 auto　0px auto;
	  padding: 0;
  }
  
  #alert_monitor table {
	width: 100%;
	  border-collapse: collapse;
	  text-align:center;
  }
  
  #alert_monitor th,
  #alert_monitor td{
	  width: 20%;
	  font-weight: normal;
	  border: 1px solid rgb(130, 130, 130, 1);
	  padding: 0.2em 0 0.1em 0;
  }
  
  #alert_monitor th {
  }
  
  #alert_monitor th.day{
	  height: 1.5em;
	  font-size: 130%;
  }
  
  #alert_monitor th.title_p{ background: rgb(255, 248, 188, 1);}  /* #fff8bc 薄黄 */
  #alert_monitor th.title_t{ background: rgb(12, 0, 12, 0.2);}/* 薄灰 */
  #alert_monitor th.title_k{ background: rgb(200, 0, 255, 0.3);}/* 薄紫 */
  #alert_monitor td.nodata { background: rgb(12, 0, 12, 0.1);} /* 薄灰 */
  
  #alert_monitor td.t_on{
	  color: rgb(255, 255, 255, 1);
	  background: rgb(12, 0, 12, 1); /* 黒 */
  }
  #alert_monitor td.k_on {
	  color: rgb(255, 255, 255, 1);
	  background: rgb(200, 0, 255, 1); /* 紫 */
  }