@charset "utf-8";

/**************************************************
 北九州上下水道局 トップページレイアウトスタイル
***************************************************/
/* グローバルメニュー */
div#gNavi ul li.top { background-image: url(/files/000188123.gif);}
div#gNavi ul li.menu01 { background-image: url(/files/000188124.gif); }
div#gNavi ul li.menu02 { background-image: url(/files/000188125.gif);}
div#gNavi ul li.menu03 { background-image: url(/files/000188126.gif);}
div#gNavi ul li.menu04 { background-image: url(/files/000188127.gif);}

/* コンテンツ */
#contents{
	margin: 30px auto;
}
/* メインビジュアル */
#mainVisualWrap{
	position: relative;
	background: url(/files/000188131.gif) center top repeat-x;
	margin-top: -27px;
	width: 100%;
	height: 356px;
}
#mainVisual{
	position: relative;
	min-width: 760px;
	max-width: 960px;
	margin: 0 auto;
	overflow: visible;
}
#mainVisual h2{
	position: absolute;
	left: 20px;
	top: 95px;
	width: 283px;
	text-align: left;
}
#mainVisual .topMainVisual{
	position: absolute;
	right: 0;
	top: 50px;
	min-width: 457px;
}
#mainVisual .topMainVisualInner .bx-viewport{
	position: relative;
	border: 5px solid #fff;
	border-radius: 5px;
	height: 252px;
	text-align: left;
	overflow: hidden;
}
.topMainVisual .topMainVisualInner ul.topGallery{ list-style:none; margin: 0; padding: 0; width: 740px; height: 240px; overflow: hidden;}
.topMainVisual .topMainVisualInner ul.topGallery li{ float: left; position: relative; display: block; width: 740px;height: 240px;}
.topMainVisual .topMainVisualInner .bx-controls{ position: relative; width: 100%; height: 35px; overflow: hidden;}
.topMainVisual .topMainVisualInner .bx-controls .bx-controls-auto{ position: absolute; top: 10px; right: 0;}
.topMainVisual .topMainVisualInner .bx-controls .bx-pager{ position: absolute; top: 10px; right: 65px; margin: 0; padding: 0;}
.topMainVisual .topMainVisualInner .bx-controls .bx-pager div{ float: left; margin-right: 3px;}
.topMainVisual .topMainVisualInner .bx-controls .bx-pager div a{ display: block; padding: 4px 6px;}
.topMainVisual .topMainVisualInner .bx-controls .bx-pager div.btnPrev{ margin-right: 10px;}
.topMainVisual .topMainVisualInner .bx-controls .bx-pager div.btnNext{ margin-left: 7px;}

#topBanner{
	position: relative;
	background-color: #f5fafb;
	width: 100%;
	padding: 20px 0;
	border-bottom: 1px solid #e3e3e3;
}
#topBanner ul{
	min-width: 760px;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
#topBanner ul li{
	display: block;
	float: left;
	width: 31%;
	text-align: left;
}
#topBanner ul li.topBanner01{
	width: 37.5%;
}

#topBanner ul li .topBanner{
	position: relative;
	width: 100%;
	height: 100%;
}

#topBanner ul li .topBanner .topBannerIn{
	position: relative;
	padding: 0 15px 0 100px;
	height: 100%;
	min-height: 85px;
	z-index: 998;
}
#topBanner ul li .topBanner .topBannerIn h2{
/* 	position: relative; */
/*	top: 10px; */
	background: url(/files/000188101.gif) left 0.5em no-repeat;
	padding: 2px 0 0 15px;
	color: #0e223b;
	font-size: 100%;
	letter-spacing: 2px;
}

#topBanner ul li .topBanner .topBannerIn p.tel{
	background: url(/files/000188106.gif) left 0.25em no-repeat;
	margin: 5px 0 0;
	padding-left: 25px;
	color: #263b53;
	font-size: 130%;
	letter-spacing: 1px;
}

#topBanner ul li .topBanner .topBannerIn p.cmt{
/* 	position: relative; */
/* 	top: 13px; */
  padding-top:3px;
	color: #263b53;
	line-height: 1.5;
	font-size: 90%;
}

#topBanner ul li.topBanner01 .topBannerIn{
	background: url(/files/000188141.jpg) left top no-repeat;
}
/* #topBanner ul li.topBanner01 .topBannerIn h2,
#topBanner ul li.topBanner01 .topBannerIn p.cmt{
	top: 0;
} */

#topBanner ul li.topBanner02 .topBannerIn{
	background: url(/files/000188142.jpg) left top no-repeat;
}

#topBanner ul li.topBanner03 .topBannerIn{
	background: url(/files/000188143.jpg) left top no-repeat;
}

#topBanner ul li .topBanner > a{
	background-color: #fff;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	z-index: 999;
	filter: alpha(opacity=0);
	opacity: 0;
}

#mainContents{
	margin-left: 250px;
	margin-right: 0;
}

.bannerBox p{
	margin-bottom: 15px;
}

.relatedLink{
	clear: both;
	background: url(/files/000188313.gif) repeat-y -48px;
	border: 1px solid #abbcc1;
	position:relative;
}
.relatedLink .relatedLinkHead{
	position:absolute;
	top:0;
	left:0;
	padding: 16px 15px 16px 12px;
	vertical-align: top;
}

.relatedLink .relatedLinkBody{
	padding: 10px 5px 5px 10px;
	margin-left:100px;
	vertical-align: middle;
	text-align: center;
}