@charset "UTF-8";

html, body {
	background: #fff;
}

#header {
	float: left;
}

#header h1 {
	margin: 0;
	padding: 0;
	font-size: 0.1rem;
}

#header h1 img {
	max-width: 340px;
	height: auto;
}

#nav {
	float: left;
}

#nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#nav ul li {
	box-sizing: border-box;
	float: left;
	margin-right: 0.3rem;
	line-height: 70px;
	margin-top: 5px;
	border-radius: 6px 6px 6px 6px;
}

#nav ul li.active {
	background: #222222;
}
#nav ul li.active a {
	color: #ffffff;
}

#nav ul li a {
	display: block;
	font-size: 36px;
	padding: 0 1rem;
	color: #060606;
}

#container {
	clear: both;
	margin-top: 0;
}

#container .index {
	display: block;
	margin: 1rem 2rem;
	padding: 1rem;
	background: #111111;
	cursor: pointer;
}

#container .index h2 {
	font-size: 1.5rem;
	margin: 0 0 10px 0;
	color: #ffffff;
	line-height: 1;
}

#container .index p {
	margin: 0;
	padding: 0;
	color: #aaaaaa;
}

#container .index span.go-next {
	float: right;
	font-size: 3rem;
	color: #FFF900;
}

#container .form-wrap {
	padding: 3rem;
}

#container h1 {
	color: #111111;
	background: #ffffff;
	margin: 1rem 0.5rem;
	padding: 0.5rem;
	font-size: 1.8rem;
}

#footer {
	clear: both;
	text-align: center;
	color: #333333;
	font-size: 0.8rem;
}

/*
 * map setting
 */

div#map {
	position: relative;
	background: #000;
	z-index: 1;
	margin: 0 auto;
}

div#map #open-search-panel {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 500;
	color: #fff;
	opacity: 1;
	background: #39f;
	border-radius: 4px;
}

div#map-content {
	width: 100%;
	height: 100%;
}

/*
 * module setting
 */

.back {
	float: right;
	cursor: pointer;
}

.table-wrap {
	margin: 1rem 2rem;
	background: #fff;
}

.list-item {
	clear: right;
	border-top: solid 1px #aaa;
	color: #111;
	margin-top: 0.3rem;
}

.list-item h4 {
	color: #111;
	font-weight: bold;
	font-size: 1.1rem;
	margin: 0.3rem;
	padding: 0;
}
.list-item p {
	margin: 0;
	padding: 0;
}
.list-item p.url {
	white-space: norwap;
	overflow: hidden;
}

.list-item p a {
	color: #1773a4;
	font-size: 0.8rem;
}
.list-item p a:hover {
	color: #0094c1;
}

.list-item .uk-button-primary {
    background-color: #39f;
    color: #fff;
	float: right;
}
.list-item .uk-button-primary:hover {
    background-color: #117be6;
    color: #fff;
	float: right;
}
.list-item .uk-button-primary:active, .list-item .uk-button-primary:visited {
    background-color: #39f;
    color: #fff;
	float: right;
}

.list-item .uk-button-default {
    background-color: #fff;
	border: solid 1px #ccc;
    color: #39f;
	margin-right: 0.2rem;
	float: right;
}
.list-item .uk-button-default:hover {
    background-color: #ddd;
    color: #fff;
	float: right;
}
.list-item .uk-button-default:active, .list-item .uk-button-default:visited {
    background-color: #fff;
    color: #fff;
	float: right;
}

.data-thumbnail {
	width: 64px;
	height: 64px;
	overflow: hidden;
	float: right;
	margin-top: 0.2rem;
}

/*
 * Color Setting
 */
.text-white { color: #ffffff; }
.text-black { color: #060606; }

.bg-white { background: #ffffff; }
.bg-red { background: #ff0000; }
.bg-green { background: #00b10f; }
.bg-yellow { background: #fceb00; }

.border-red { border: solid 3px #ff0000; }
.border-green { border: solid 3px #00b10f; }
.border-yellow { border: solid 3px #fceb00; }
.border-gray { border: solid 3px #cccccc; }

.color-white { color: #ffffff; font-size: 1.2rem; margin-left: 2rem;}

.left-border-red { border-left: solid 6px #ff0000; }
.left-border-yellow { border-left: solid 6px #fceb00; }

/* notification-history-message */


.voice-tag {
	display: block;
	margin: 2px;
}


.search-wrap {
	margin: 2rem 2rem 1rem 2rem;
}

.keyword {
	width: 50%;
}

.search-ul ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.search-ul ul li {
	float: left;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

/* pagination */

.pagination-wrap {
	text-align: center;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 0.5rem 0 0 0;
    border-radius: 4px;
}

.pagination > li {
    display: inline;
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagination > li:last-child > a, .pagination > li:last-child > span {
    margin-right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #fff;
    text-decoration: none;
    background-color: #666;
    border: 1px solid #ddd;
}

.pagination a {
    text-decoration: none !important;
}

legend {
	color: #ccc !important;
	border-bottom: solid 1px #aaa;
}

p.common {
	margin: 0 2rem;
}

.layer-checkbox-inner {
	margin: 0.5rem 0;
}

.uk-offcanvas-bar {
	padding: 1rem;
	background: #f4f4f4;
}

.link-common.uk-close {
	color: #1773a4;
}

.link-common.uk-close:hover {
	color: #0094c1;
}

.search-main {
	color: #060606;
}

.search-main h3 {
	font-size: 1rem;
	color: #333;
	font-weight:bold;
	margin: 0;
	padding: 0;
}

#search-exec .uk-search-input {
    background-color: #fff;
    border-color: #ccc;
	color: #111;
}

#search-exec .uk-search-input::placeholder {
    background-color: #fff;
    border-color: #ccc;
	color: #aaa;
}

#search-exec .uk-select:not([multiple]):not([size]) {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

#search-exec .uk-select {
    background-color: #fff;
    border-color: #ccc;
	color: #111;
}

#search-exec .uk-button-primary {
    background-color: #39f;
    color: #fff;
	float: right;
}

#search-exec .uk-button-primary:hover {
    background-color: #117be6;
    color: #fff;
}

#search-exec {
	margin-top: 1rem;
}

.search-main .uk-search-default {
	width: 100%;
}

.search-main .uk-search-input {
	width: auto;
}

.map-marker {
	box-sizing: border-box;
  text-align: center;
  position: absolute;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;                    // icon color
  width: 28px;
  height: 28px;
  border-radius: 50%;             // make a circle
  line-height: 29pt;
  font-size: 16px;
  font-family: 'FontAwesome';     // anything goes
	border: solid 1px #111;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}

.map-marker.marker-color-ok {
	background: #09D297;
}

.map-marker.marker-color-help {
	background: #F4506E;
}

.panel-wrap {
	margin: 1rem;
}

p.note {
	clear: both;
	margin: 0 1rem;
}

.water {
	border: solid 5px #23b7ff;
}
.fire {
	border: solid 5px #ff2527;
}
.quake {
	border: solid 5px #ffe851;
}
.public {
	border: solid 5px #4dff5d;
}
.panel-box-left {
	display: block;
	box-sizing: border-box;
	background: #fafafa;
	float: left;
	width: 49%;
	font-size: 4rem;
	text-align: center;
	line-height: 9rem;
}

.panel-box-right {
	display: block;
	box-sizing: border-box;
	background: #fafafa;
	float: right;
	width: 49%;
	font-size: 4rem;
	text-align: center;
	line-height: 9rem;
}

.kana-index {
	margin-right: 1rem;
	font-size: 2rem;
}

.panel-box-mini {
	display: block;
	box-sizing: border-box;
	background: #fafafa;
	float: left;
	width: 49%;
	font-size: 2em;
	text-align: center;
	line-height: 4rem;
	margin-bottom: 1rem;
}

h4.kana {
	clear: both;
	margin: 1rem;
	color: #fff;
	font-size: 3rem;
}

.panel-box-mini:nth-child(even) {
	float: right;
}

.panel-box-list {
	display: block;
	box-sizing: border-box;
	background: #fafafa;
	font-size: 1.5rem;
	text-align: left;
	line-height: 1.9;
	padding: 1rem;
}

.text-wrap {
	padding: 1rem;
	background: #fafafa;
	box-sizing: border-box;
	border: solid 5px #333;
	margin: 1rem;
}

@media screen and (max-width: 840px) {
	#header h1 img {
		max-width: 200px;
		height: auto;
	}
	#nav ul li {
		box-sizing: border-box;
		float: left;
		margin-right: 0.3rem;
		line-height: 35px;
		margin-top: 5px;
		border-radius: 6px 6px 6px 6px;
	}
	#nav ul li a {
		display: block;
		font-size: 24px;
		padding: 0 1rem;
		color: #060606;
	}
	.border-red { border: solid 2px #ff0000; }
	.border-green { border: solid 2px #00b10f; }
	.border-yellow { border: solid 2px #fceb00; }
	.border-gray { border: solid 2px #cccccc; }
}