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


/*----------------------------------

防災ポータル

------------------------------------*/

/*防災ポータルタイトル*/
.Emergency_Prevent_Title h1 {
	color:#fff;
	background:url(../img/prevent/bousai_title_icon.png) no-repeat 20px 50%;
	background-color:#0074e0;
	border-radius:4px;
	text-align:center;
	font-size:3rem;
	line-height:2em;
	padding:10px 0;
}

@media screen and (max-width: 640px) {
	.Emergency_Prevent_Title h1 {
		font-size:2rem;
		background:url(../img/prevent/bousai_title_icon.png) no-repeat 10px 50%;
		background-color:#0074e0;
		background-size:30px 20px;
	}
}

/*----------------------------------

防災ポータル右カラム

------------------------------------*/

.Prevent_Right {
	max-width:73.97959%;
	width:73.97959%;
	float:right;
	margin-left:2.5510%;
	margin-top:25px;
}
@media screen and (max-width: 640px) {
	.Prevent_Right {
		float:none;
		max-width:100%;
		margin-left:0;
		width:100%;
	}

}
/*----------------------------------

災害ポータルコロナ個別記事遷移バナー

------------------------------------*/
.Coronavirus_Banner {
display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
margin:0 0 10px 0;
}
.Coronavirus_Banner li{width: 24%;text-align: center;margin:0 0.5% 0.5% 0.5%;}
.Coronavirus_Banner li.banner01{background:#f16600;}
.Coronavirus_Banner li.banner02{background:#00a06a;}
.Coronavirus_Banner li.banner03{background:#0074e1;}
.Coronavirus_Banner li.banner04{background:#e00024;}
.Coronavirus_Banner li.banner05{background:#d29101;}
.Coronavirus_Banner li.banner06{background:#d4085d;}
.Coronavirus_Banner li a{width: 100%;color:#fff;font-weight: bold;font-size: 16px; padding: 10px 0;text-decoration: none;display: block;}
@media screen and (max-width: 640px) {
.Coronavirus_Banner li{width: 49%;text-align: center;margin:0.5%;}
}

/*----------------------------------

緊急災害情報・お知らせ

------------------------------------*/


.Emergency_Disaster_Info {margin-bottom:30px;}
.Emergency_Disaster_Info h2 {
	color:#333;
	font-size:1.8rem;
	margin-bottom:15px;
	line-height:1.5em;
	float: left;
}

.Emergency_Disaster_Info h2:before {
	background :url(../img/prevent/emergency_disaster_icon.png) no-repeat 50% 50% ;
	content: '';
	display: inline-block;
	position: relative;
	top: 5px;
	right: 6px;
	width: 25px;
	height: 25px;
}
.Emergency_Disaster_List {
	background:url(../img/prevent/emergency_disaster_bg.jpg) repeat;
	padding:5px;
}
.Emergency_Disaster_List dl {
	margin:0;
	background-color:#fff;
}
.Emergency_Disaster_List dt {
	float: left;
	padding:10px;
}
.Emergency_Disaster_List dd {
	padding:10px;
	padding-left: 150px;
}
.Emergency_Disaster_List dd:not(:last-child) {
	border-bottom:1px solid #d1d1d1;
}
.Emergency_Disaster_List time {font-size:1.5rem;}
.Emergency_Disaster_List dd p {margin-top:5px;}
.Prevent_Cat_01 {background-color:#ffc07c;}
.Prevent_Cat_02 {background-color:#fdc7d0;}
.Prevent_Cat_03 {background-color:#e1c7fd;}
.Prevent_Cat_01,.Prevent_Cat_02,.Prevent_Cat_03 {
	padding: 2px 20px;
	margin-left:5px;
}
.Prevent_Cat_01 a,.Prevent_Cat_02 a,.Prevent_Cat_03 a {
	text-decoration:none;
	color:#333;
	font-size:1.4rem;
}

.Emergency_Title_Btn {
	float:right;
}
.Emergency_List {
	background-color:#fc2644;
	border-radius:2px;
	float:left;
	font-size:1.4rem;
	padding:3px 10px;
}
.Emergency_List a {
	color:#fff;
	text-decoration:none;
}
.Emergency_List dd {
	color:#fff;
	text-decoration:none;
}
.Emergency_List dd {
	display:block;
	padding:5px 15px;
}
@media screen and (max-width: 640px) {
	/*一覧を見るボタン*/
	.Emergency_List {
		background-color:#fff;
		border-radius:2px;
		float:left;
		margin-right: 5px;
		margin-top: 7px;
		font-size:1.4rem;
		padding:3px 5px;
	}
	.Emergency_List a {
		color:#0074e0;
		text-decoration:none;

	}
	.Emergency_Disaster_List dt {
		float: none;
		padding: 2px 10px;
	}
	.Emergency_Disaster_List dd {
		padding: 0 10px 5px;
	}
}

/*----------------------------------

災害情報、気象・雨量等の情報、河川情報、災害への備え

------------------------------------*/

/*見出し*/
.Disaster_Info_Link h2,
.Weather_Info h2,
.River_Info h2,
.Prepare_For_Disaster h2 {
	color:#333;
	font-size:1.8rem;
	line-height:1.5em;
	padding-bottom:15px;
	margin-top:30px;

}
.Disaster_Info_Link h2,
.Weather_Info h2,
.River_Info h2 {
	margin-bottom:15px;
}

.Prepare_For_Disaster h2 {margin-bottom:0px;}
.Disaster_Info_Link h2 {
	background: url(../img/prevent/disaster_info_bg.jpg) repeat-x bottom;
}
.Weather_Info h2,
.River_Info h2 {
	background: url(../img/prevent/weather_info_bg.jpg) repeat-x bottom;	
}

.Disaster_Info_Link h2:before,
.Weather_Info h2:before,
.River_Info h2:before,
.Prepare_For_Disaster h2:before {
	top: 5px;
	right: 6px;
	width: 25px;
	height: 25px;	
}
.Disaster_Info_Link h2:before {
	background :url(../img/prevent/disaster_info_icon.png) no-repeat 50% 50% ;
	content: '';
	display: inline-block;
	position: relative;
}

.Weather_Info h2:before {
	background :url(../img/prevent/weather_icon.png) no-repeat 50% 50% ;
	content: '';
	display: inline-block;
	position: relative;
}

.River_Info h2:before {
	background :url(../img/prevent/river_icon.png) no-repeat 50% 50% ;
	content: '';
	display: inline-block;
	position: relative;
}
.Prepare_For_Disaster h2:before {
	background :url(../img/prevent/prepare_icon.png) no-repeat 50% 50% ;
	content: '';
	display: inline-block;
	position: relative;
}

/*リンク箇所*/




.Disaster_Info_Link li,
.River_Info li {
	width:48.62069%;
	float:left;
	margin-right:2.75862%;
	text-align:center;
}
.Weather_Info li {
	width:31.49425%;
	float:left;
	margin-right:2.75862%;
	text-align:center;
}
.Disaster_Info_Link ul:after,
.Weather_Info ul:after,
.River_Info ul:after {
	display:block;
	content:"";
	clear:both;
}

.Disaster_Info_Link li:last-child ,
.Weather_Info li:last-child ,
.River_Info li:last-child  {
	margin-right:0;
}

.Disaster_Info_Link li {background-color:#fed7dd;}
.Weather_Info li,
.River_Info li {
	background-color:#f2f1f1;
}


.Disaster_Info_Link li a,
.Weather_Info li a,
.River_Info li a  {
	text-decoration:none;
	color:#003399;
}
.Disaster_Info_Link li p,
.Weather_Info li p,
.River_Info li p {
	padding:20px 5px;
	line-height:1.3em;
	box-sizing:border-box;
}
.Disaster_Info_Link li span,
.Weather_Info li span,
.River_Info li span {
	line-height:1.3em;
	font-size:1.4rem;
	color:#333;
	display:block;
	margin:0 5px 20px 5px;
}

.Disaster_Info_Link li:hover {background-color:#ffcad1;}
.Weather_Info li:hover,
.River_Info li:hover {	background-color:#c0d6eb;}


.Disaster_Info_Link li,
.Weather_Info li,
.River_Info li,
.Prepare_For_Disaster_Col dl {
	vertical-align:middle;
	align-items:center;	
}
.Disaster_Info_Link li,
.Weather_Info li,
.River_Info li {
	/*display:flex;
	justify-content:center;*/
}
@media screen and (max-width: 640px) {

	.Disaster_Info_Link li {
		float:none;
		width:100%;
		margin-right:2.75862%;
		padding-bottom:10px;
		margin-bottom:10px;
	}

	.Weather_Info ul {
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;
		display:-o-flex;
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content: space-between;
		align-items: stretch;
	}
	
	.Weather_Info li {
		vertical-align:middle;
		align-items:center;
	}
	
	.River_Info li {
		width:100%;
		margin-right:2.75862%;
		padding-bottom:10px;
		margin-bottom:10px;
	}
	.Disaster_Info_Link li p,
	.River_Info li p {padding:10px;}
	.Disaster_Info_Link li span,
	.River_Info li span {margin:0 5px 5px 5px;}
	.Weather_Info span {display:none!important;}
}
/*災害への備え*/
.Prepare_For_Disaster_Col {
	background-color:#fcf9d6;
	padding:20px 0;
	margin-bottom:100px;
}
.Prepare_For_Disaster_Col:after {
	clear:both;
	content:"";
	display:block;
}
.Prepare_For_Disaster dl {
	width:45.86207%;
	margin-right:2.75862%;
	float:left;
}
.Prepare_For_Disaster dl:first-child {margin-left:2.75862%;}

.Prepare_For_Disaster dt {
	background-color:#fcd941;
	padding:5px 10px;
	margin-bottom:10px;
}
.Prepare_For_Disaster dd {
	display:block;
	position:relative;
	padding-left:15px;
}
.Prepare_For_Disaster dd::before {
	content: '';
	width: 6px;
	height: 6px;
	border: 0px;
	border-top: solid 2px #fca641;
	border-right: solid 2px #fca641;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -4px;
}

@media screen and (max-width: 640px) {
	.Prepare_For_Disaster_Col {
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;
		display:-o-flex;
		display:flex;
		margin-bottom:0;
		padding:10px 0;
	}
	.Prepare_For_Disaster_Col dl {
		width:100%;
		float:none;
	}

}

/*----------------------------------

防災ポータル左カラム

------------------------------------*/


.Prevent_Left {
	max-width:23.46938%;
	float:left;
	margin-top:25px;
}

@media screen and (max-width: 640px) {
	.Prevent_Left {
		max-width:100%;
		float:none;
	}
}

/*----------------------------------

いざというとき

------------------------------------*/

.Case_Emergency h3 {
	background-color:#fc2644;
	color:#fff;
	padding:15px 10px;
	font-size:1.8rem;
}
.Case_Emergency li {
	background-color:#fed7dd;
	border-bottom:1px solid #fff;
}
.Case_Emergency li a {
	display:block;
	text-decoration:none;
	color:#303030;
	padding:20px 10px;
}
.Case_Emergency li:hover {background-color:#ffcad1;}
.Case_Emergency ul {margin-bottom:20px;}


/*----------------------------------

ハザードマップ

------------------------------------*/

.Hazard_Map h3 {
	background-color:#47c090;
	padding:15px 10px;
	color:#303030;
	font-size:1.8rem;
}
.Hazard_Map li {
	background-color:#f2f1f1;
	border-bottom:1px solid #fff;
}
.Hazard_Map li a {
	display:block;
	text-decoration:none;
	color:#303030;
	padding:20px 10px;
}
.Hazard_Map li:hover { background-color:#dcede6;}
.Hazard_Map ul {
	margin-bottom:20px;
}
@media screen and (max-width: 979px) {
	.Case_Emergency li a,
	.Hazard_Map li a {padding:15px 10px;}
}

/*----------------------------------

緊急メール

------------------------------------*/

.Mail_Banner {
	background-color:#0074e0;
	text-align:center;
	padding:15px 10px;
	margin-bottom:18px;
}
.Mail_Banner a {
	text-decoration:none;
	color:#fff;
}
.Mail_Banner:hover { background-color:#2d8ee8;}
.Mail_Banner h3:before {
	top: 5px;
	right: 6px;
	width: 25px;
	height: 25px;	
	background :url(../img/prevent/emergency_mail_icon.png) no-repeat 50% 50% ;
	content: '';
	display: inline-block;
	position: relative;
}
.Mail_Banner p {font-size:1.4rem;}

@media screen and (max-width: 979px) {
	.Mail_Banner {padding:10px;}
}

/*----------------------------------

AED、無線放送、停電情報

------------------------------------*/

.Aed_Banner,.Wireless_Banner,.Blackout_Banner {
	border:2px solid #ccc;
	padding:10px;
	text-align:center;
}
.Aed_Banner,.Wireless_Banner,.Blackout_Banner {margin-bottom:15px;}
.Aed_Banner img,.Wireless_Banner img,.Blackout_Banner img {float:left; margin:10px 10px 0 0;}
.Aed_Banner a,.Wireless_Banner a,.Blackout_Banner a {
	text-decoration:none;
	color:#303030;
}
.Aed_Banner:hover,.Wireless_Banner:hover,.Blackout_Banner:hover {
	background-color:#f1f1f1;}
.Aed_Banner h3,.Wireless_Banner h3,.Blackout_Banner h3 {
	font-size:1.8rem;
}
.Aed_Banner p,.Wireless_Banner p,.Blackout_Banner p {
	font-size:1.4rem;
}
.Aed_Banner:after,.Wireless_Banner:after,.Blackout_Banner::after {
	clear:both;
	content:"";
	display:block;
}

@media screen and (max-width: 979px) {
	.Aed_Banner img,.Wireless_Banner img,.Blackout_Banner img {float:none; margin:10px 10px 0 0;}
	.Blackout_Banner {margin-bottom:100px;}
}

@media screen and (max-width: 640px) {
	
	.Aed_Banner,.Wireless_Banner,.Blackout_Banner {
		text-align:left;
		padding:10px;
	}
	.Aed_Banner img,.Wireless_Banner img,.Blackout_Banner img {float:left;}
	.Blackout_Banner {margin-bottom:60px;}

}