@charset "utf-8";
/*--  index.html用style --*/
#visualBlock {
	width:100%;
/*min-height:auto;
	height:auto;*/
	border:1px solid #999;
}

#visualBlock img { width:100%; }

/*@media only screen and (max-width:768px){
	#visualBlock { 
		position:relative;
		z-index:-1;
	}
}*/

/*-- slider --*/
.slider { position:relative; }

.slidesjs-pagination {
	position:absolute;
	right:3em;
	bottom:.4em;
	list-style:none;
	z-index:100;
}

.slidesjs-pagination .slidesjs-pagination-item {
	display:inline-block;
	margin:2px;
}

.slidesjs-pagination .slidesjs-pagination-item a {
	display:block;
	padding:.5em;
	text-align:center;
	line-height:.8;
	background-color:#ccc;
	border:1px solid #666;
	cursor:pointer;
	opacity:.9;
	filter:alpha(opacity=90);
	-ms-filter:"alpha( opacity=90 )";
}

.slidesjs-pagination .slidesjs-pagination-item a.active {
	background-color:#fff;
}

.slidesjs-stop, .slidesjs-play {
	position:absolute;
	display:block;
	width:2.5em;
	padding:.5em 0;
	right:.2em;
	bottom:.5em;
	text-align:center;
	line-height:.8;
	background-color:#ccc;
	border:1px solid #666;
	cursor:pointer;
	z-index:200;
	opacity:.9;
	filter:alpha(opacity=90);
	-ms-filter:"alpha( opacity=90 )";
}

.slidesjs-previous, .slidesjs-next { display:none; }

/*@media only screen and (max-width:768px){
	.slidesjs-pagination, .slidesjs-stop, .slidesjs-play {
		display:none !important;
	}
}*/

#columnContainer {
	float:right;
	width:79%;
	max-width:740px;
}

#column_01 {
	float:left;
	width:71%;
	max-width:520px;
}

#column_02 {
	float:right;
	width:28%;
	max-width:200px;
}

#column_03 {
	float:left;
	width:21%;
	max-width:200px;
}

@media only screen and (max-width:768px){
	#columnContainer, #column_01, #column_02, #column_03 {
		float:none;
		width:100%;
		max-width:100%;
	}
	
	#columnContainer, #column_03 { padding:0 .5em; }
	
	#column_01, #column_02, #column_03 { margin-bottom:2rem; }
}

#column_01 .notice {
	border:1px solid #999;
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

#column_01 .notice h2 {
	padding:7px .5em;
	line-height:1;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#009933+0,00bb22+47,009933+100 */
	background: rgb(0,153,51); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,153,51,1) 0%, rgba(0,187,34,1) 47%, rgba(0,153,51,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,153,51,1) 0%,rgba(0,187,34,1) 47%,rgba(0,153,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,153,51,1) 0%,rgba(0,187,34,1) 47%,rgba(0,153,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009933', endColorstr='#009933',GradientType=0 ); /* IE6-9 */
	color:#fff;
	text-shadow:0 0 1px #00ac15;
	border-bottom:1px solid #999;
}

#column_01 .notice dl { padding:0 .5em; }

#column_01 .notice dt {
	float:left;
	width:9em;
}

#column_01 .notice dd {
	margin-bottom:.8em;
	padding-left:9em;
}

#column_01 .notice .genre {
	display:block;
	width:90%;
	margin-left:.2em;
	line-height:1.8;
}

.genre_01 { background-color:#fc3; } /*-- 募集 --*/
.genre_02 { background-color:#cfc; } /*-- 税金・保険年金 --*/
.genre_03 { background-color:#9ff; } /*-- ごみ・くらし --*/
.genre_04 { background-color:#3cf; } /*-- 各種手続き --*/
.genre_05 { background-color:#fcc; } /*-- 子育て --*/


#kurashiNavi { background-color:#eee; }

#kurashiNavi h2 {
	padding:7px .5em;
	line-height:1;
}

#kurashiNavi ul {
	/*display:table;*/
	width:100%;
	padding:.5%;
	padding-right:0;
	list-style:none;
}

#kurashiNavi ul li a {
	display:block;
	float:left;
	width:16.473%;
	/*max-width:85px;*/
	/*min-height:108px;*/
	margin-right:1px;
	margin-bottom:1px;
	background-color:#06F;
}

#kurashiNavi a:hover img {
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter:"alpha( opacity=100 )";
}



@media only screen and (max-width:768px){
	#kurashiNavi { padding:0 9%; }
	
	#kurashiNavi ul {
		padding:0;
		padding-bottom:20px !important;
		padding-bottom:1.25rem !important;;
	}
	
	#kurashiNavi ul li a {
		width:24.62%;
		height:auto;
	}
}

#column_02 aside {}

#column_02 h3, #column_03 h3 {
	margin-bottom:.5rem;
	text-align:center;
}

#column_02 ul, #column_03 ul { list-style:none; }

.topBanner, #column_02 aside ul li, #advertising ul li {
	margin-bottom:10px;
	/* box-shadow */
	box-shadow:rgba(0, 0, 0, 0.0980392) 0px 1px 1px 1px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.0980392) 0px 1px 1px 1px;
	-moz-box-shadow:rgba(0, 0, 0, 0.0980392) 0px 1px 1px 1px;
}

#kouhou {	border:2px solid #959595; }

#kouhou div { padding-right:2px; }

#kouhou h4 {}

#kouhou li {
	margin:0 !important;
	line-height:1.4;
	box-shadow:none !important;
}

#kouhou li::before {
	display:inline-block;
	content: '\e800';
  font-family:'fontello';
	font-size:10px !important;
	font-size:.625rem !important;
	color:#3552c0;
  text-decoration:inherit;
  width:1em;
  margin-right:.2em;
  text-align:center;
}

#kouhou p {
	width:25%;
	padding-left:9px;
}

@media only screen and (max-width:768px){
	#kouhou {
		border:1px solid #e3e3e3;
		border-radius:5px;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,ffffff+47,f4f4f4+100 */
		background: rgb(244,244,244); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0%, rgba(255,255,255,1) 47%, rgba(244,244,244,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 47%,rgba(244,244,244,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 47%,rgba(244,244,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
		/* box-shadow */
		box-shadow:rgba(0, 0, 0, 0.0980392) 0px 1px 1px 1px;
		-webkit-box-shadow:rgba(0, 0, 0, 0.0980392) 0px 1px 1px 1px;
		-moz-box-shadow:rgba(0, 0, 0, 0.0980392) 0px 1px 1px 1px;
	}
	
	#kouhou div { width:70%; }
	
	#kouhou h4 {
		float:left;
		width:6em;
		line-height:3.2;
	}
	
	#kouhou ul { padding-top:.9em; }
	
	#kouhou p { width:12%; }
}


#topics {
	border:3px solid #093;
	border-top:none;
}

#topics h3 {
	padding:.2em 0;
	background-color:#093;
	color:#fff;
}

#topics figure, #topics p, #emergency p, #emergency ul { padding:0 .5em; }

#topics figure img { max-width:100%; }

#emergency {
	background-color:#fff6f3;
	border:3px solid #ff1493;
	border-top:none;
}

#emergency h3 {
	padding:.2em 0;
	background-color:#ff1493;
	color:#fff;
}

#emergency li {
	padding-left:1.2em;
	/*text-indent:-1em;*/
}

#emergency li:before {
	display:inline-block;
	/*margin-right:1em;*/
	content:"\e800";
  font-family:'fontello';
	text-indent:-1em;
	color:#3552c0;
}

#population {
	padding:10px;
	border:1px solid #000;
}

#population th, #population td {
	padding:.1em .4em;
	border:1px solid #000;
}

#twitter {
	text-align:center;
	border:1px dotted #666;
}

.switch { visibility:hidden; }

@media only screen and (max-width:768px){
	.PCOnly, #twitter, #population, #weather, #topics{ display:none; }
	
	#informationTool li { box-shadow:none !important; }
}