html {
	touch-action: manipulation;
}

body { font-size: 0.9rem; }


* { box-sizing: border-box; }

* { font-family: "Noto Sans JP"; }

/* cellspacing=0 の設定 */
table {
	border-collapse: collapse;
}

/* cellpadding=0 & border=0 の設定 */
table th, table td {
	padding: 0px;
	border: 0px;
}

a {
	color: #004be0;
}

/* 見出しボックス */
.caption {
	background: #F0F3FA;
	color: #0075a9;
	padding: 4px;
	margin-bottom: 8px;
	width: 260px;
	text-align: center;
	font-weight: bold;
	border-left: 5px solid #84A0D7;
	border-bottom: 1px solid #84A0D7;
}

/* ----------------------------------------------
	タイトルバー
------------------------------------------------- */
.title_bar {
	background-color: #233B6C;
	color: white;
}

.title_logo {
/*	background-image: url(../image/map_logo-org.png);
	background-repeat: no-repeat;*/
/*	background-size: 140px 34px;*/
/*	padding-left: 141px; */
/*	font-size: 22px;*/
/*	width: 309px;*/
	height:34px

}

@media (max-width: 570px) {
.title_logo {
/*	background-image: url(../image/map_logo.png);
	background-size: 140px 34px;*/
/*	padding-left: 141px; */
/*	font-size: 18px;*/
	width: 140px;
	height:34px
}
}

.update_btn {
	text-align: center;
	background-color: red;
	color: white;
	cursor:pointer;
	white-space: nowrap;
}

.update_btn:active {
	color: black;
}

/* ハンバーガーボタン：ここで全体のサイズ */
.hamburger {
	position: relative;
	width: 20px;
	height: 16px;
/*	top: 10px;
	left: 10px;*/
	display: none;
}

/* 三本線 */
.hamburger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #FFF;
}

/* 三本線の上の部分 */
.hamburger span:nth-of-type(1) {
	top: 0;
}

/* 三本線の中心部分 */
.hamburger span:nth-of-type(2) {
	top: 7px;
}

/* 三本線の下の部分 */
.hamburger span:nth-of-type(3) {
	bottom: 0;
}

/* ハンバーガー三本線：棒の動きや傾き加減など */
.hamburger span {
	display: inline-block;
	transition: all .4s; /* クリックしてからの動作時間 */
	z-index: 10;
}

/* ここで数字を変えて傾きなどを調節 */
.hamburger.active span:nth-of-type(1) { /* 上の棒線 */
	transform: translateY(7px) rotate(-45deg);
	-webkit-transform: translateY(7px) rotate(-45deg);
}

.hamburger.active span:nth-of-type(2) { /* クリックしたら消える真ん中の棒線 */
	opacity: 0;
}

.hamburger.active span:nth-of-type(3) { /* 下の棒線 */
	transform: translateY(-7px) rotate(45deg);
	-webkit-transform: translateY(-7px) rotate(45deg);
}

/* pageTopボタン */
#pageTop {
  margin: 0 auto;
  width: 100%;
  position: relative;
}

#pageTop p {
  font-size: 0%;
  position: fixed;
  bottom: 10px;
  right: 10px;
}

#pageTop p a {
  display: block;
  text-align: center;
  /* transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}

/* フッター */
.copyright {
	padding: 2px;
	text-align: center;
	background-color: #233B6C;
	color: white;
}

/* コンテンツ領域 */
.content_div {
	width: 90%;
	margin:0 auto;
}

@media (max-width: 800px) {
.content_div {
	width: 100%;
}
}

/* ----------------------------------------------
	ドロップダウンメニュー
------------------------------------------------- */
/* メニューの一覧 */
.menu ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}

.menu li {
	padding: 0px;
	margin: 0px;
	list-style: none;
}

ul.menu {
	background-color: #233B6C;
	letter-spacing: -100px; /* inline-blockで要素を横並びにした時の隙間を無くす */
	padding: 0px;
	margin: 0px;
	border-top: 1px solid white;
}

/* メイン */
ul.menu li {
	position: relative;
	display: inline-block; /* これが無いと、子と孫の位置がかなりずれる */
	letter-spacing: normal; /* 上で指定したletter-spacingを元通りに */
	border-right: 1px solid white;
	width: calc(100% / 6);
}

ul.menu > li:last-child {
	border-right: none;
}

ul.menu a {
	display: block; /* リンクボタン全体をクリック出来るように */
	padding: 8px 15px; /* ここでメニューのサイズ */
	text-decoration: none;
	color: white;
}

ul.menu a:hover {
	background: rgba(192, 192, 192, 0.2); /* グレーの薄さ0.2 文字色はそのまま */
}

/* サブメニュー(hover時) */
ul.menu li:hover > ul {
	display: block; /* ここで表示(hover時) */
}
 
/* サブメニュー */
ul.menu ul {
	display: none;
	position: absolute;
	width: 100%;
}

/* サブメニュー以降 */
ul.menu ul li {
	width: 100%;	/*205px;*/ /* 長さを指定しないと、文字が縦並びになる */
	background-color: white;
	border: 1px solid #233B6C;
	border-top: none;
}

ul.menu ul li a {
	color: #004be0;
}

/* 孫メニュー以降の表示について */
ul.menu ul ul {
	display: none;
	position: absolute;
	top: -1px; /* これがないと、項目の子メニューの真横に孫メニューが表示されない */
	left: 100%; /* 親要素から、左から右に100％ずらす */
}

@media (max-width: 1000px) {

.hamburger,
.hamburger span {
    display: inline-block;
}

/* メニュー部分 */
#nav {
    position: absolute;
    top: 0;
    width: 100%;
    display: none;
    /*transform: translateX(-100vw);*/ /* ここで要素を画面外に配置 */
    /*transition: all .2s;*/
}

#nav.active { /* アクティブ時 */
	display: block;
    /*transform: translateX(0%);*/ /* ここで要素を元の位置に */
    /*transition: all .2s;*/
}

ul.menu li {
    display: block;	/*initial;*/
    width: 100% !important;
	border-top: 1px solid white;
}

/* サブメニュー */
ul.menu ul {
    display: none;	/*initial;*/
    position: relative;	/*initial;*/
}

/* サブメニュー(hover時) */
ul.menu li:hover > ul {
	display: block; /* ここで表示(hover時) */
}

ul.menu ul li {
	width: 100%;
	background-color: white;
}

ul.menu ul li a {
	color: #004be0;
}

ul.menu ul ul {
    display: block;	/*initial;*/
    position: relative;	/*initial;*/
    top: 0;	/*initial;*/
    left: 0;	/*initial;*/
}

}

/* ----------------------------------------------
	タブメニュー
------------------------------------------------- */
.tabmenu {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.tabmenu input {
	display: none;
}

.tabmenu label {
	color: #004be0;
	background: white;
	border: 1px solid #ccc;
	border-bottom: none;
	/*margin-right: 1px;*/
	padding: 6px 16px;
	order: -1;
	cursor: pointer;
}

.tabmenu label:hover {
	background: rgba(192, 192, 192, 0.2);
}

@media (max-width: 800px) {
.tabmenu label {
	color: #004be0;
	background: white;
	border: 1px solid #ccc;
	border-bottom: none;
	/*margin-right: 1px;*/
	padding: 6px 6px;
	font-size:0.7rem;
	order: -1;
	cursor: pointer;
}

#tabContent_1 {
	font-size:0.7rem
}
#tabContent_2 {
	font-size:0.7rem
}
#tabContent_3 {
	font-size:0.7rem
}

}

.tabmenu > div {
	width: 100%;
	display: none;
	border: 1px solid #ccc;
	padding: 16px;
}

.tabmenu input:checked + label {
	background: #233B6C;
	color: white;
}

.tabmenu input:checked + label + div {
	display: block;
}

/* ----------------------------------------------
	一覧テーブル
------------------------------------------------- */
/* 警報・注意報テーブル */
.tbl-r05 th{
	padding: 2px 4px;
	border: 1px solid gray;
	background: #E0E7F5;	/*#C8D8DE;*/
	color: black;
	/*font-weight: normal;*/
}

.tbl-r05 td {
	padding: 2px 4px;
	border: 1px solid gray;
	text-align: center;
}

/* 公共交通・ライフラインのお知らせテーブル */
.tbl-r02 thead th {
	background: #E0E7F5;	/*#C8D8DE;*/
	color: black;
}

.tbl-r02 tbody th {
	font-weight: normal;
}

.tbl-r02 th {
	border: 1px solid gray;
	padding: 2px 4px;
}

.tbl-r02 td {
	border: 1px solid gray;
	padding: 2px 4px;
	width:70%;

}

@media screen and (max-width: 660px) {
	.tbl-r05 {
		width: 90%;
	}
	.tbl-r05 .thead {
		display: none;
	}
	.tbl-r05 tr {
		width: 100%;
		border: 1px solid #E0E7F5;	/*#C8D8DE;*/
	}
	.tbl-r05 td {
		display: block;
		text-align: left;	/*right;*/
		border: none;
		padding: 0;
		border-bottom: 1px solid #ddd;
	}
	.tbl-r05 td:first-child {
		background: #E0E7F5;	/*#C8D8DE;*/
		color: black;
		font-weight: bold;
		text-align: center;
	}
	.tbl-r05 td:before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-align: right;
		width:40%;
		padding-right: 8px;
		color: black;
		background-color: white;
	}

	.tbl-r05 td:after {
		content: "";
		clear: both;
		display: block;
	}

	.tbl-r02 {
		width: 90%;
	}
	.tbl-r02 .thead {
		display: none;
	}
	.tbl-r02 tr {
		width: 100%;
		border: 1px solid #E0E7F5;	/*#C8D8DE;*/
	}
	.tbl-r02 th {
		display: block;
		border: none;
		background: #E0E7F5;	/*#C8D8DE;*/
		color: black;
		font-weight: bold;
	}
	.tbl-r02 td {
		display: block;
		border: none;
		width: 100%;

	}
}

/* ----------------------------------------------
	アラートメッセージボックス
------------------------------------------------- */

#alert_msg {
	color: red;
	cursor: pointer;
	text-align: left;
	margin-bottom: 8px;
	border-color: #FF0000;
	border-style: solid;
	border-width: 4px;
}

@media (max-width: 600px) {

	#alert_msg {
		color: red;
		cursor: pointer;
		text-align: left;
		margin-bottom: 8px;
		border-color: #FF0000;
		border-style: solid;
		border-width: 4px;
		font-size: 0.5rem;
	}

	#disinfo_title_frame {
		width:130px
	}
	#disinfo_title {
		width:130px
	}

}

/* ----------------------------------------------
	レイヤー切り替え
------------------------------------------------- */
/* レイヤースイッチ */
.layersw {
	width: 9em;
}

.layersw div {
	border: 1px solid #90B7D7;
	margin: 10px 6px;
}

.layersw input {
	display: none;
}

.layersw label {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 9em;
	height: 3em;
	cursor: pointer;
	color: #004be0;
}

.layersw label:hover {
	background: rgba(192, 192, 192, 0.2);
}

.layersw input:checked + label {
	background: #233B6C;
	color: white;
}

.layersw input:disabled + label {
	background: #ccc;
	color: gray;
}

.layersw input[readonly] + label {
	background: #ccc;
	color: gray;
}

@media screen and (max-width: 660px ), screen and (max-height: 660px ) {
	.tbl_map > tbody > tr > td {
		display: block;
	}

	.layersw {
		width: 100%;
	}
	.layersw div {
		display: inline-block;
		margin: 0px;
	}

.layersw label {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 6em;
	height: 4em;
	font-size:0.6rem;
	cursor: pointer;
}

#hazard {
	width: 12em;
}

.layersw div {
	font-size:0.6rem;
}

.layersw div select {
	font-size:0.6rem;
}

}

/* ----------------------------------------------
	ポップアップ
------------------------------------------------- */

#popup_overlay {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	opacity: .20;
	filter: alpha(opacity=20);
}

.popup {
	position: absolute;
	background-color: white;
	border: 1px solid gray;
}

.popup-header {
	padding: 2px 4px;
	background-color: #233B6C;
	color: white;
}

.popup-subheader {
	padding: 2px 4px;
	background-color: #E0E7F5;
	color: black;
}

.popup-contents {
	padding: 2px 4px;
}

.popup-closer {
	text-decoration: none;
	position: absolute;
	top: 4px;
	right: 4px;
}

.popup-closer div {
	width: 16px;
	height: 16px;
}

.popup-closer span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #FFF;

	display: inline-block;
}

.popup-closer span:first-child {
	top: 0;
	transform: translateY(7px) rotate(-45deg);
	-webkit-transform: translateY(7px) rotate(-45deg);
}
.popup-closer span:last-child {
	bottom: 0;
	transform: translateY(-7px) rotate(45deg);
	-webkit-transform: translateY(-7px) rotate(45deg);
}

/* ----------------------------------------------
	テーブルソート用
------------------------------------------------- */

.sortable .head {
	padding-right: 10px;
	background-image: url(../image/sort.gif);
	background-position: right 2px center;
	background-repeat: no-repeat;
	cursor:pointer;
}

.sortable .desc {
	padding-right: 10px;
	background-image: url(../image/desc.gif);
	background-position: right 2px center;
	background-repeat: no-repeat;
	cursor:pointer;
}

.sortable .asc {
	padding-right: 10px;
	background-image: url(../image/asc.gif);
	background-position: right 2px center;
	background-repeat: no-repeat;
	cursor:pointer;
}

.sortable .head:hover, .sortable .desc:hover, .sortable .asc:hover {color:red}