@charset "UTF-8";

html {
	font-size: 4.2vw;
}

body {
	max-width: 480px;
}

h1 {
	font-size: 24px;
	overflow: hidden;
	line-height: 1.2em;
	padding: 10px 0px 0px 10px;
	width: calc(100% - 50px);
}

@media screen and (max-width: 350px) {
	h1 {
		font-size: 6.8vw;
	}
}

h2 {
	font-size: 110%;
}

hr {
	margin: 1vw 3vw 1vw 0vw;
}

a img {
	display: block;
}

#google_translate_element a img{
	display: inline-block;
}

#noscript {
	width: 960px;
	margin: 10px auto;
	color: black;
}


.pcitem {
	display: none !important;
	speak: none !important;
}

.spitem {
	display: block;
	speak: normal;
}


.box {
	margin: 2vw 0;
	border-width: 1px;
	border-style: solid;
}

.boxtitle {
	margin: 0px;
	padding: 3px;
}

.box > div > ul {
	padding-left: 2vw;
	list-style: none;
	margin: 2vw 0;
}


.font-small {
	font-size: 3vw;
}

.font-middle {
	font-size: 4.2vw;
}

.font-large {
	font-size: 5vw;
}


.outlink.font-small {
	width: 2vw !important;
	height: 2vw !important;
}

.outlink.font-middle {
	width: 3vw !important;
	height: 3vw !important;
}

.outlink.font-large {
	width: 4vw !important;
	height: 4vw !important;
}


#wrapper {
	width: 100%;
	margin: 0px;
	padding: 0px;
	height: auto;
	text-align: left;
}


#header {
	margin: 0px;
	padding: 0 0 0 0;
	width: 100%;
	height: auto;
	min-height: 30px;
}

#header-background {
	height: 40px;
	margin-bottom: -40px;
}


.headeritem {
	position: absolute;
	top: 2vw;
	right: 2vw;
}

.hum_unshown {
	display: none;
}

#hum_open {
	display: inline-block;
	width: 27px;
	height: 27px;
	vertical-align: middle;
	cursor: pointer;
	padding: 3px;
	position: relative;
}

#hum_openicon {

}

#hum_closetext {
	display: none;
}

#hum_openicon,
#hum_openicon:before,
#hum_openicon:after {
	position: absolute;
	height: 3px;
	width: 25px;
	max-width: 25px;
	max-height: 25px;
	border-radius: 3px;
	background: #0172C0;
	display: block;
	content: '';
}

#hum_openicon:before {
	bottom: -8px;
}

#hum_openicon:after {
	bottom: -16px;
}

#hum_close {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #555;
	opacity: 0;
	transition: 0.0s ease-in-out;
}

#hum_close > div {
	z-index: 999999;
	position: fixed;
}

#header_content {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	transform: translateY(-110%);
	padding: 10px 5px 15px 5px;
}

#hum_input:checked ~ #hum_close {
	display: block;
	opacity: .2;
}

#hum_input:checked ~ #hum_open {
	z-index: 99999;
	position: fixed;
	right: 2vw;
	top: 2vw;
	width: 20vw;
	height: 7vw;
	text-align: center;
}

#hum_closetext {
	border: 1px solid #cacaca;
	background: #fefefe;
	width: 100%;
	height: 100%;
	padding-top: 1vw;
}

#hum_input:checked ~ #hum_open #hum_closetext {
	display: block;
}

#hum_input:checked ~ #hum_open #hum_openicon {
	display: none;
}

#hum_input:checked ~ #header_content {
	transform: translateY(0%);
}


.headerlist > li {
	display: inline-block;
	list-style: none;
	height: 7vw;
	line-height: 7vw;
	vertical-align: middle;
}

.headeritem p {
	display: inline-block;
	margin: 0;
}

.headerlist {
	margin-top: 0px;
	padding-left: 5px !important;
	padding-right: 5px;
}

.headerlist > li span {
	display: inline-block;
	cursor: pointer;
	padding: 0 5px;
	border-width: 1px;
	border-style: solid;
	text-align: center;
	height: calc(7vw - 2px);
}

.headerlist > li a {
	text-decoration: none;
}

.headerlist {
	margin-bottom: 10px;
}
.fontsize-small, .fontsize-middle, .fontsize-large {
	width: 5vw;
}

.fontsize-small {
	font-size: 3vw;
}

.fontsize-large {
	font-size: 5vw;
	overflow: hidden;
}

.language > ul > li {
	margin-bottom: 2vw;
}


#main {
	width: 100%;
	padding: 0;
	height: 100%;
}


#center {
	width: 100%;
	height: 100%;
}


#notice-area > div ul {
	max-height: 20vw;
}

#notice-area > div {
	overflow-y: scroll;
}

#notice-list:last-child:after {
	content: '';
	display: block;
	height: 2vw;
}

.listspace {
	margin-right: 3px;
	background-color: #d3e7c3;
	padding: 0.4vw 1vw;
	color: #003F97;
}

#facebook-area  {
	margin: 2vw 0;
}


.simple-button {
	text-decoration: none;
	height: inherit;
	min-height: 0%;
}

.simple-button > .button-content {
	border: solid 2px #0172C0;
	color: white;
	background-color: #0172C0;
	height: 100%;
	text-align: left;
	line-height: 6vw;
	padding: 0 3%;
	display: table;
}

.simple-button > .button-content > * {
	display: table-cell;
	height: inherit;
	vertical-align: middle;
}

.simple-button .icon-box {
	height: inherit;
	width: 20%;
	padding: 1vw 0;
}

.simple-button .button-text {
	padding: 1vw 0;
	height: inherit;
	width: 68%;
	padding-left: 1vw;
}

.simple-button .icon-box > img {
	width: 100%;
	height: auto;
	max-height: inherit;
}

.simple-button .arrow-box {
	width: 6%;
	height: inherit;
	text-align: right;
}

.simple-button .arrow-box > img {
	width: 100%;
	height: auto;
}

#facebook-button {
	width: 100%;
}

#facebook-button .button-content {
	background: linear-gradient(180deg, #4e69a2, #3b5998);
	border: none;
	border-radius: 1vw;
	margin:0;
	padding:0;
	height: 11vw;
}

#facebook-button .button-text {
	width: 80%;
}

#facebook-button .icon-box {
	width: 10%;
}

#facebook-button .arrow-box {
	width: 3%;
	padding-right:1%;
}

#saigai-archive {
	margin: 2vw 0;
}

#saigai-archive .simple-button {
	width: calc(100% - 0.5vw);
}

#saigai-archive .button-content {
	padding-left: 1vw;
	height: 11vw;
	padding: 0;
}

#saigai-archive .simple-button .icon-box {
	width: 9%;
}

#gifu-homepage .button-content {
	width: 100%;
	border: none;
	text-align: center;
	margin:0;
	padding:0;
	font-weight: bold;
	font-size: 110%;
	height: 15vw;
	background: linear-gradient(90deg, #014199, #1eb2ee);
	text-shadow: 0 0 2vw #014199;
}

#gifu-homepage .arrow-box {
	padding-right: 3vw;
	width: 5%;
}

#gifu-homepage .simple-button {
	height: 15vw;
}


#evacuatebutton-area {
	margin: 2vw 0;
	display: flex;
	flex-direction: column;
}

#evacuatebutton-area .simple-button {
	float: left;
	width: 100%;
	margin: 1vw 0;
}

#evacuatebutton-area .icon-box {
	width: 10%;
}

#evacuatebutton-area .arrow-box {
	width: 3%;
}

#advisorylink-button .button-content {
	border: solid 2px #ee1e1e;
	color: #ee1e1e;
	background-color: white;
	font-size: 130%;
}

#shelterlink-button .button-content {
	border: solid 2px #0172C0;
	color: #0172C0;
	background-color: white;
}

#advisorylink-button {
	margin-right: 1.9vw;
}


#map-area {
	clear: both;
}

.item-name {
	display: inline-block;
	float: left;
	margin-left: auto;
	margin: 1vw 1vw;
}

#warnlist-link {
	display: inline-block;
	float: right;
	margin: 1vw 1vw 0 0;
}

/* #warnlist-link > a {
	padding-left: 4vw;
} */


.city-select {
	color: white;
	overflow: hidden;
	display: inline-block;
	text-align: center;
	padding-left: 0 !important;
	width: 100%;
	margin: 0 !important;
}

.city-select > li {
	width: 50%;
	height: 11vw;
	float: left;
	line-height: 11vw;
	background-color: #0172C0;
	margin: 0.3vw 0;
}

.city-select input, .city-select > li > a {
	display: none !important;
}

.city-select label {
	width: 100%;
	display: block;
	cursor: pointer;
}

.city-select ul {
	
	width: 50%;
	padding-left: 0;
}

.city-select input:checked ~ label {
	background-color: #014199;
}

.city-select input:checked ~ ul {
	display: block;
}

.city-select ul {
	position: absolute;
	display: none;
	padding-left: 0;
	list-style: none outside;
	width: calc(50% - 2vw);
	border: 1vw solid #0059b2;
	z-index: 99;
}

.city-select li {
	list-style-type: none;
	text-overflow: ellipsis;
}

.city-select li a {
	top:0;
	left:0;
	display: block;
	width: 100%;
	overflow: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.city-select li li {
	line-height: 9vw;
}

.city-select input:checked ~ label:after {
	content: '';
	position: fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	opacity: 0;
	z-index: 10;
	cursor: default;
}


#reloadbtn {
	float: right;
	height: 100%;
	margin: 1vw 0;
}

#reloadbtn > input {
	font-size: 4vw;
	width: 100%;
}


#map-area {
	border: none !important;
}

#map-area img {
	width: 100%;
	height: auto;
}

#warnmap {
	display: inline-block;
}

#syutten > span:after {
	content: "\A";
	white-space: pre;
	margin-bottom: 1vw;
}


#warning-level, #warning-info {
	border-collapse: collapse;
	margin: 1vw 0;
	table-layout: fixed;
	word-wrap: break-word;
	overflow-wrap: break-word;
	width: 100%;
}

#warning-level td {
	border: 1px solid black;
	padding-left: 0.5vw;
	vertical-align: middle;
}

#warning-info td {
	border: 1px solid #bfbfbf;
	text-align: center;
	vertical-align: middle;
}


#warning-level th {
	border: 1px solid black;
	padding-left: 0.5vw;
	vertical-align: middle;
}

#warning-info th {
	border: none;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}

#warning-level td p {
	margin: 0;
	display: flex;
}

#warnlevel-5 {
	background-color: #0C000C;
	color: white;
}

#warnlevel-4 {
	background-color: #AA00AA;
	color: white;
	font-weight: bold;
}

#warnlevel-3 {
	background-color: #FF2800;
	color: white;
	font-weight: bold;

}

#warnlevel-2 {
	background-color: #F2E700;
	color: black;
}

#warnlevel-1 > td:nth-child(1) {
	background-color: #FFFFFF;
	color: black;
}

td.level4-warning {
	text-align: center!important;
	color: #AA00AA;
	font-weight: bold;
	padding: 10px 0;
	background:#bfbfbf;
}

td.level4-warning > div {
    background-image: linear-gradient(135deg,transparent 40%,#AA00AA 50%,transparent 60%), linear-gradient(225deg,transparent 40%,#AA00AA 50%,transparent 60%);
    background-size: 18px 9px;
    background-position: 0px 60%,9px 60%;
    background-repeat: repeat-x;
}

#warning-level tr:nth-child(1){
	background-color: #E8F7FD;
	color: #003d78;
}

.warn-color:before {
	content: '';
	border: 0.5vw solid black;
	height: 3vw;
	width:  3vw;
	display: inline-block;
	margin: auto 2px auto 2px;
	flex-shrink: 0;
}

.strongtxt {
	font-size: 105%;
}

.strongtxt:lang(ja) {
	font-size: 150%;
}

#warning-info tr td:nth-child(1) {
	width: 28%;
}

#warning-info tr td:nth-child(2) {
	width: 42%;
}

#warning-info tr td:nth-child(3) {
	width: 30%;
}



#guideline-link {
	text-align: left;
	text-indent: -2em;
	padding-left: 2em;
}

#guideline-link:before {
	content: "　";
	margin: 0 1vw 0.7vw 1vw;
	background: url("./arrow.gif");
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
	display: inline-block;
	height: 3vw;
	width: 3vw;
}


#linkbutton-area {
	margin: 2vw;
}

#linkbutton-area a {
	text-decoration: none;
	margin-bottom: 2vw;
}

.linklist {
	padding-left: 2vw;
	list-style: none;
	margin: 0.8em 0 0 0;
}

.linklist > li:after {
	content: "";
	display: inline-block;
	margin-top: 0.8em;
}

.linklist > li {
	line-height: 1.5em;
	margin: 1em 0;
	text-indent: -1.1rem;
	padding-left: 1rem;
}

.arrowlist a {
	margin-left: 1vw;
}

.linklist > li:before {
	content: '・';
	font-size: 1rem !important;
}

.arrowlist > li:before {
	content: "　";
	margin: 0 0.5vw;
	background: url("./arrow.gif");
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
	display: inline-block;
	height: 3vw;
	width: 3vw;
}


.outlink {
	height: 3vw !important;
	width: 3vw !important;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 3px;
}


.twitter-timeline {
	width: 100% !important;
}

.twitter-area {
	margin: 2vw 0;
}

#link-area {
	text-align: center;
}

#banner-wrap {
	margin: 0 2vw;
	display: block;
}

#banner {
	max-width: 234px;
	height: auto;
	display: block;
	margin: 2vw auto;
}

#banner > img {
	width: 100%;
	height: auto;
}


#footer {
	clear: both;
	height: 90px;
	width: 100%;
	color: white;
	text-align: center;
	vertical-align: middle;
}

#footer1 {
	padding: 3vw 0;
	margin-top: 5vw;
}


#footer2 {
	padding: 1vw 0;
}

#footer2 > div, #siteinfo > b {
	margin: 2vw 0;
	font-weight: bold;
}

#footer2 > div > a > span {
	margin: 0 10px;
	
}

#footer2 a {
	color: white;
	word-break: keep-all;
	display: inline-block;
	width: 100%;
}