/* トップページ専用CSS */

#HeaderPane {
	margin-bottom: 5px;
}

#LeftPane {
	width:210px;
}

#ContentPane {
	width:570px;
	padding-right:10px;
	padding-left:10px;
}

#RightPane {
	width:150px;
}

.altLeftPane,
.altRightPane {		/* 代わりのアイテムは非表示 */
	display: none; 
	speak: auto;
}

/* くらしのできごと */

.kurashi {
	width: 570px;
	height: 156px;
	background:url("../../../Images/kurashi_dekigoto.jpg") no-repeat;
	margin-bottom: 5px;
}

.kurashi h2 {
	height: 25px;
	background: none;
	font-size: 105%;
	font-weight: bold;
	margin: 0;
	padding: 16px 0 0 40px;
}

.kurashi ul {
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 5px 12px 1px 13px;  /* 右を13→12に(Windows版Chrome対策) */
	width: 545px;  /* 544→545(Windows版Chrome対策) */
}

.kurashi ul li {
	float:left;
	margin:0;
	padding:0 5px 0 0;
}

.kurashi ul li img {
	width: 56px;
	height: 101px;
	margin:0;
	padding:0;
}

.kurashi ul .kurashi_listend {
	margin:0;
	padding:0;
}

/* くらしのガイド */

.info_headtitle {
	background:url(../../../secure/1025/main-guide-head.gif) no-repeat;
	height: 40px;
	width: 570px;
}

.info_headtitle h2 {
	background: none;
	color: #000000;
	font-size: 105%;
	margin: 0;
	padding: 13px 0 0 55px;
}

.info_headbottom {
	background:url(../../../Images/main_570_foot.gif) no-repeat;
/*	font-size:1px !important;*/
	height:6px;
	margin-bottom:5px;
	width:570px;
}

/* 市の人口 */
.poptable {
	padding: 0;
	margin: 0;
	text-align:left;
	font-size:92%;
}

.poptable table {
	width:136px;
	padding-bottom:5px;
}

.poptable .c1,
.poptable .c1e {
	font-weight:bold;
}

.poptable .c2,
.poptable .c2e {
	text-align: right;
}

.poptable div {
	padding-top:5px;
}

.poptable .quote {
	font-size: 80%;
}


/* ヨネギーズ */

.Item_tf_yonegi a {
	display:block;
}

.Item_tf_yonegi a:link,
.Item_tf_yonegi a:visited {
	text-decoration:none;
}

.Item_tf_yonegi a:hover {
	text-decoration:underline;
}

.Item_tf_yonegi a:active {
	text-decoration:none;
}

.Item_tf_yonegi {
	font-size: small;
	width:210px;
	margin: 0;
	padding: 0;
	margin-bottom:5px;
	float:left;
}

.Item_tf_yonegi .head {
	background:url("../../../Images/left-yonegi-head.gif") no-repeat left bottom;
	/*font-size:1px !important;*/
	margin:0;
	padding:0;
	height:6px;
	width:210px;
	float:left;
}

.Item_tf_yonegi .Content_nh {
	background:url("../../../Images/210_body.gif") repeat-y;
	height:auto;
	margin:0;
	padding:1px 7px;
	text-align:left;
	width:196px;
	float:left;
}

.Item_tf_yonegi .footer {
	background:url("../../../Images/210_foot.gif") no-repeat;
	/*font-size:1px !important;*/
	height:6px;
	margin:0;
	padding:0;
	width:210px;
	float:left;
}

/********************************************
 横幅が950px未満の時、右ペインを下に回り込み
********************************************/
@media only screen and (max-width: 949px) {

	#BaseTable,
	#HeaderPane,
	#Middle,
	#FooterPane {
		width: 790px;	/* 横幅を縮める */
	}

	#ContentPane {	/* 右側をカット */
		padding-right: 0;
	}

	#RightPane {	/* 横幅を主ペインと一致させて下に配置 */
		width: 570px;
	}

	.onlyRightPane {	/* 右ペイン専用アイテムは消す */
		display: none !important;
	}

	.altRightPane {		/* 代わりのアイテムを表示 */
		display: block;
	}

	.altTopMenu {	/* 代替えメニューの表示 */
		width: 100%;
		margin-bottom: 5px;
	}

	.altTopMenu ul {
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 100%;
		font-weight: bold;
	}

	.altTopMenu li {	/* 3段組 */
		display: block;
		margin: 0;
		padding: 0;
		float: left;
		width: 33.3%;
	}

	.altTopMenu li a {
		display: block;
		border: 1px solid #AAAAAA;
		margin: 0;
		padding: 5px 0;
		text-decoration: underline;
		text-align: center;
		text-shadow: 1px 1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px 1px 1px #FFFFFF, -1px -1px 1px #FFFFFF;
		background: -ms-linear-gradient( top, #FFFFFF, #CCDDFF );	/* IE */
		background: -moz-linear-gradient( top, #FFFFFF, #CCDDFF );	/* Mozilla */
		background: -webkit-gradient( linear, left top, left bottom, from(#FFFFFF), to(#CCDDFF) );	/* Webkit */
	}

	.altTopMenu .color2 li a {
		background: -ms-linear-gradient( top, #FFFFFF, #FFCCDD );	/* IE */
		background: -moz-linear-gradient( top, #FFFFFF, #FFCCDD );	/* Mozilla */
		background: -webkit-gradient( linear, left top, left bottom, from(#FFFFFF), to(#FFCCDD) );	/* Webkit */
	}

	.altTopMenu li a.selected,
	.altTopMenu .color2 li a.selected {
		background: none;
		background-color: #FFFFFF;
	}

}

/************************************
 横幅が820px未満の時、左ペインも削除
************************************/
@media only screen and (max-width: 819px) {

	#BaseTable,
	#HeaderPane,
	#Middle,
	#FooterPane {
		width: 570px;	/* 横幅を縮める */
	}

	#LeftPane {
		display: none !important;	/* 左ペインを非表示 */
	}

	.onlyLeftPane {	/* 左ペイン専用アイテムは消す */
		display: none !important;
	}

	.altLeftPane {		/* 代わりのアイテムを表示 */
		display: block;
	}

	#ContentPane {	/* 主ペインの横幅を詰める */
		padding-left: 0;
	}

	#RightPane {	/* 右ペインの横幅を詰める */
		position: relative;
		left: 0;
	}
}

/******************************************
 横幅が570px未満の時、完全リキッドに
*******************************************/
@media only screen and (max-width: 569px) {

	#BaseTable,
	#HeaderPane,
	#Middle,
	#FooterPane,
	#ContentPane,
	#RightPane {	/* 横幅を合わせる */
		width: 100%;
	}

	.altTopMenu li.onlyLiquid {	/* リキッド化のみ表示 */
		display: block;
	}

	/* くらしのできごと */

	.kurashi {
		width: 100%;
		height: auto;
		background-image: none;
		width: 100%;
	}

	.kurashi h2 {
		background-color: #EEEEEE;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		padding: 5px 0 2px 10px;
		height: auto;
	}

	.kurashi img {
		display: none;	/* 画像は見えなくする */
	}

	.kurashi ul {
		padding: 0;
		text-align: center;
		width: 100%;
	}

	.kurashi ul li {
		padding: 0;
		width: 33.3%;
	}

	.kurashi ul li a {
		display: block;
		height: auto;
		margin: 0;
		padding: 5px 0;
		text-align: center;
		color:#222222;
		font-weight: bold;
		text-shadow: 1px 1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px 1px 1px #FFFFFF, -1px -1px 1px #FFFFFF;
		border: 1px solid #AAAAAA;
		background: -ms-linear-gradient( top, #FFFFFF, #FFCCDD );	/* IE */
		background: -moz-linear-gradient( top, #FFFFFF, #FFCCDD );	/* Mozilla */
		background: -webkit-gradient( linear, left top, left bottom, from(#FFFFFF), to(#FFCCDD) );	/* Webkit */
	}

	.kurashi ul li a:before {
		content: attr(title);	/* タイトル要素をそのまま文字に */
	}

	/* くらしのガイド */
	.info_headtitle {
		background-image: none;
		height: auto;
		width: 100%;
		background-color: #EEEEEE;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.info_headtitle h2 {
		padding: 5px 0 2px 10px;
	}

	.info_headbottom {
		display: none;
	}

}

/*****************************************
 横幅が480px未満の時は、メニュー2段組 
*****************************************/
@media only screen and (max-width: 479px) {

	.altTopMenu li,
	.kurashi ul li {
		width: 50%;
	}

}