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

#alert_area{
  width: 100%;
}

#alert_area b{
  text-decoration: underline;
}
/* メッセージ */
#alert_area .alert_msg{
	width:95%;
	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: 576px;}
#alert_map_area .mapsize_s{ width: 216px;}

#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: 12pt;
	padding: 0.2em 0 0em 0;
}
#alert_map_area .mapsize_s span{
	font-size: 4.5pt;
	padding: 0.2em 0 0.2em 0;
}

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

#alert_map_area .mapsize_l iframe{
	width: 578px; 
	height: 629px; 
	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:4pt; /* 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: 98%;
	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); /* 紫 */
}