@charset "UTF-8";
/* 更新履歴
 * [01]2020.09.08	M.Obara		警戒色変更
 * ===== 2021年度リプレース版
 * [A-01] 2022.03.22 市町村名欄の高さを修正（広島市区細分化により高さが足りなくなったため）
 *
 */
.switchContents.tab {
	padding-left:0;
}
.switchContents.tab li {
	height: 4rem;
	min-width: 14.5%;
	width: auto;
}
.switchContents.tab li span {
	line-height: 4rem;
}
.switchContents.tab li.br span {
	line-height: 1.5rem;
}
.switchContents.tab li.br span:first-child {
	padding-top: 0.6rem;
}

.grid.warnList {
	/* 注警報一覧 */
	height: 100%;
	position: relative;
}
.grid.warnList #fixedHeader {
	position: relative;
	width: 100%;
	height: auto;
	border-bottom: 1px solid #c3d0db;
}
.grid.warnList #fixedHeader table {
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}
.grid.warnList #fixedHeader table td, .grid.warnList #fixedHeader table th {
	border-bottom: none;
}
.grid.warnList #fixedHeader.fixedHead {
	position: fixed;
	top: 80px;
}
.grid.warnList #fixedHeader div {
	position: relative;
	background-color: #dde5ec;
}
.grid.warnList #fixedHeader i {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 2rem;
	height: 3rem;
	font-size: 2rem;
}
.grid.warnList #fixedHeader i.right {
	margin-right: 0.25rem;
}
.grid.warnList #fixedHeader i.left {
	margin-left: 0.25rem;
}
.grid.warnList table {
	margin: 0 auto;
}
.grid.warnList table th, .grid.warnList table td {
	margin: 0;
	padding: 0;
	height: 2.5rem;
}
.grid.warnList table img {
	vertical-align: middle;
	visibility: visible;
}
.grid.warnList table .cspan3 {
	width: 12rem;
}
.grid.warnList table .updateTime {
	height: 8rem;
}
.grid.warnList table .verticalWrite {
	width: 2.5rem;
	padding-left: 0.2rem;
	padding-right: 0.2rem;
}
.grid.warnList table .verticalWrite div {
	width: 1.9rem;
	height:200px;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
}
/*Android個別*/
html.android-view .grid.warnList table .cspan3 {
	width: 10rem;
}
html.android-view .grid.warnList table .verticalWrite {
	width: 2.3rem;
}
html.android-view .grid.warnList table .cspan-rest {
	width: 5.6rem;
}
.grid.warnList table .city {
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	width: 2.5rem;
}
.grid.warnList table tbody .sediment .notCovered, .grid.warnList table tbody .emargency .notCovered, .grid.warnList table tbody .alert .notCovered, .grid.warnList table tbody .warn .notCovered {
	background-color: #dadada !important;
}
.grid.warnList table thead .city {
	height: auto;
}
.grid.warnList table thead .city div {
	padding: 0 5px;
	width: 100%;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
}
.grid.warnList table thead .toTop {
	display: block;
	border: none;
	border-bottom: 1px solid #2474ba;
	color: #2474ba;
	margin: 1rem;
	margin-top: 0;
}
.grid.warnList table tbody .city {
	text-align: center;
}
/*土砂災害*/
.grid.warnList table tbody .sediment th, .grid.warnList table tbody .sediment td {
	background-color: #eeaeed;
}
.grid.warnList table tbody .sediment th.category {
	background-color: #aa00aa;
}
/*特別警報*/
.grid.warnList table tbody .emargency td {
	background-color: #dddcdd;
}
.grid.warnList table tbody .emargency th{
	background-color: #afafaf;
}
.grid.warnList table tbody .emargency th.category {
	background-color: #0c000c;
	color: #ffffff;
}
/*警報*/
.grid.warnList table tbody .alert td {
	background-color: #fed1d0;
}
.grid.warnList table tbody .alert th {
	background-color: #fac1c1;
}
.grid.warnList table tbody .alert th.category {
	background-color: #ff2800;
	color: #ffffff;
}
/*注意報*/
.grid.warnList table tbody .warn td {
	background-color: #ffffd8;
}
.grid.warnList table tbody .warn th {
	background-color: #ffffb2;
}
.grid.warnList table tbody .warn th.category {
	background-color: #f2e700;
}
/*対象外地域*/
.grid.warnList table tbody  td.bgNonData {
	background-color: #f2f2f2 !important;
}
/*ダミーセル*/
.grid.warnList table th.hiddenCel{
	background-color: #dde5ec !important;
	border-color: #dde5ec !important;
}
.grid.warnList table td.hiddenCel {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
}
#article .warnList button {
	margin-top: 0.4rem;
	padding: 0.75rem;
	position: absolute;
	right: 0.5rem;
	width: auto;
	height: auto;
	line-height: 1.7;
	font-size: 1.2rem;
}

/* スクロールテーブルの設定 */
#mainGrid {
	height: auto;
	position: relative;
}

#dummyGrid {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

#scrollGrid {
	z-index: 10;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/* 地域ごとのパーツはデフォルト非表示 */
#headerGrid tr,
#scrollGrid table{
	display:none;
}
/* 発表文表示モーダル設定 */
#weatherPopupBox .textBox {
	margin: 0.5rem;
	padding: 1rem;
	border-radius: 2px;
	max-height: 400px;
	background-color: #fff;
	overflow: auto;
	line-height: 2;
	font-size: 1.2rem;
	color: #000;
}
#weatherPopupBox .textBox h5 {
	display: inline-block;
	margin-bottom: 1rem;
	font-weight: bold;
	line-height: 1;
	font-size: 1.3rem;
}
#weatherPopupBox .textBox p {
	display: inline-block;
	margin-bottom: 1rem;
}

/* ここからスマホの向きによる例外設定 */
@media only screen and (orientation: portrait) {
	.grid.warnList #fixedHeader.fixedHead {
		top: 80px;
	}
	.grid.warnList table th, .grid.warnList table td {
		height: 2.5rem;
	}
	.grid.warnList table .cspan3 {
		width: 12rem;
	}
	/* .cspan3.width - (td.width*2) */
	.grid.warnList table .cspan-rest {
		width: 7rem;
	}

	.grid.warnList table .updateTime {
		height: 2.5rem;
	}
	.grid.warnList table .city {
		box-sizing: content-box;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		width: 2.5rem;
	}
	.grid.warnList table thead .city {
		height: 9rem;/*[A-01]*/
	}
	.grid.warnList table thead .city div {
		padding: 0 5px;
		height: 100%;
		width: inherit;
		writing-mode: vertical-rl;
		-webkit-writing-mode: vertical-rl;
		-moz-writing-mode: vertical-rl;
	}
}
@media only screen and (orientation: landscape) {
	.grid.warnList #fixedHeader.fixedHead {
		top: 40px;
	}
	.grid.warnList table th, .grid.warnList table td {
		height: 2.5rem;
	}
	.grid.warnList table .cspan3 {
		width: 13.33333rem;
	}
	/* .cspan3.width - (td.width*2) */
	.grid.warnList table .cspan-rest {
		width: 8.33333rem;
	}

	.grid.warnList table .updateTime {
		height: 2.5rem;
	}
	.grid.warnList table .city {
		box-sizing: content-box;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		width: 5rem;
	}
	.grid.warnList table thead .city {
		height: auto;
	}
	.grid.warnList table thead .city div {
		writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		-moz-writing-mode: horizontal-tb;
	}

	#weatherPopupBox {
		max-width: 400px;
		max-height: 300px;
	}
	#weatherPopupBox .textBox {
		max-height: 200px;
	}
}