@charset "utf-8";



/*最後消す*/

a:visited{

color:#0033FF;

}



*{

margin:0;

padding:0;

}

body  {

	font: 100% Verdana, Arial, Helvetica, sans-serif;

	font-size:100%;

	background: #ffffff url(/image/common/body_bg.gif) repeat-x;

	margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */

	padding: 0;

	text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */

	color: #000000;

}

#container { 

	width: 1000px;  /* これにより、幅がブラウザの幅の 80% のコンテナが設定されます */

	background: #FFFFFF;

	margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */

	

	text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */

}

.nostyle ul{

list-style:none;

}


#counter {
	background:#000;
	padding:5px;
	text-align:center;
	color:#fff;
	}


#counter img {
	vertical-align:middle;
	}





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

header Start

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



#header { 

	background: #DDDDDD; 

	padding: 0 0px;  /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */

} 

#header h1 {

	margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */

	padding: 10px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */

}

#headerNavigation{

border-bottom:#ccc solid 3px;

height:38px;

}



/*ナビゲーション*/

#headerNavigation li{

float:left;

list-style:none;

height:38px;

}

#headerNavigation li a{

display:block;

font-size:16px;

font-weight:700;

text-decoration:none;

color:#333;

height:10px;

padding-top:14px;

padding-bottom:14px;

text-align:center;

background:url(/image/common/navi/topnavi.png) no-repeat;

}

#headerNavigation li a span{

display:none;

}

#headerNavigation li a:visited{

display:block;

text-decoration:none;

color:#333;

}

/*ナビゲーション画像表示位置調整*/

#headerNavigation li a.menuTop{

width:147px;

background-position:0px 0px;

}

#headerNavigation li a.menuKurashi{

width:106px;

background-position:-147px 0px;

}

#headerNavigation li a.menuKenko{

width:133px;

background-position:-253px 0px;

}

#headerNavigation li a.menuTown{

width:121px;

background-position:-386px 0px;

}

#headerNavigation li a.menuShigoto{

width:135px;

background-position:-507px 0px;

}

#headerNavigation li a.menuKyouiku{

width:133px;

background-position:-642px 0px;

}

#headerNavigation li a.menuKanko{

width:92px;

background-position:-775px 0px;

}

#headerNavigation li a.menuKinkyu{

width:133px;

background-position:-867px 0px;

}





#headerNavigation li a:visited{

display:block;

text-decoration:none;

color:#333;

}



/*

ナビゲーションアクティブなメニューの画像位置調整

現在表示されているページのメニューを他と違う表示にするために、SELFを指定している。

ナビゲーション内のリストの一つ上の階層に、現在表示されているページが含まれるメニューのクラスを指定する。

*/

#headerNavigation .self_menuTop li a.menuTop{

width:147px;

background-position:0px -38px;

}

#headerNavigation .self_menuKurashi li a.menuKurashi{

width:106px;

background-position:-147px -38px;

}

#headerNavigation .self_menuKenko li a.menuKenko{

width:133px;

background-position:-253px -38px;

}

#headerNavigation .self_menuTown li a.menuTown{

width:121px;

background-position:-386px -38px;

}

#headerNavigation .self_menuShigoto li a.menuShigoto{

width:135px;

background-position:-507px -38px;

}

#headerNavigation .self_menuKyouiku li a.menuKyouiku{

width:133px;

background-position:-642px -38px;

}

#headerNavigation .self_menuKanko li a.menuKanko{

width:92px;

background-position:-775px -38px;

}

#headerNavigation .self_menuKinkyu li a.menuKinkyu{

width:133px;

background-position:-867px -38px;

}



/*ヘッダー内のテキストリンク、検索エリアの箇所*/

#header_top{

	background-color:#f2f5f7;

	height:33px;

	padding:5px;

}

#header_top div.title{

	font-size:80%;

	color:#333333;

	float:left;

	padding:5px 5px;

}



#header_top p.menu{

	padding:5px;

	font-size:90%;

	color:#333333;

	float:right;

}

#header_top form.subnavi_form{

	float:right;

	margin-top:4px;

}

#header_top div.menu_text{

	font-size:90%;

	color:#333333;

	padding:5px;

	float:right;

}

#header_top p a{

	padding:5px 5px;

}

#header_top input.searchbox{

	width:100px;

}



#font-size {

	float:left;

	list-style: none;

}

#font-size li {

	float:left;

	line-height:21px;

}

#font-size a {

	display: block;

	width: 21px;

	height: 21px;

	text-indent: -9999px;

	overflow: hidden;

	background-position: 0 0;

	background-repeat: no-repeat;

}

#font-size .fontS a {

	background-image: url(/image/common/header/font_s.png);

	background-repeat: no-repeat;

}

#font-size .fontM a {

	background-image: url(/image/common/header/font_m.png);

	background-repeat: no-repeat;

}

#font-size .fontL a {

	background-image: url(/image/common/header/font_l.png);

	background-repeat: no-repeat;

}

#font-size .fontS a:hover,

#font-size .fontM a:hover, 

#font-size .fontL a:hover {

	background-position: left bottom;

}





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

header End

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

















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

レイアウトに関するID Start

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

#mainContent {

padding-top:0;

}

#TopLayout {

float:left;

width:777px;

}

#breadcrumbs{

padding-top:8px;

padding-bottom:8px;

font-size:90%;

}

#subTop {

/* sabTopの詳細はsub.css */

}



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

レイアウトに関するID End

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



















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

#fotter Start

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

#footer {

text-align:center;

margin:30px 0px 10px;

padding: 1px 0px 0; /* この余白は、その上に表示される div のエレメントの左揃えと一致します。 */

border-top:3px solid #003366; 

}

#footer .footernavi{

border-top:3px solid #999;

padding-top:0.7em;

padding-bottom:1.5em;

}

#footer .about{

width:33em;

margin:0 auto;

text-align:left;

}

#footer p.footerL {

float:left;

width:6em;

font-weight:700;

}

#footer p.footerR {

float:right;

padding-left:20px;

border-left:5px solid #ccc;

}

#footer .copyrights{



font-size:11px;

margin:11px 0 0;

}

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

#footer End

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













/* 再使用できる各種クラス */

.fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */

	float: right;

}

.fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */

	float: left;

}

.clearfloat { 

/* */

    height:0;

    font-size: 0px;

    line-height: 0px;

	clear:both;

}

a img{

border:0;

}











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

右側のナビゲーション Start

#sidebar1 は TOPページのレイアウトで使用

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

#sidebar1 {

	float: right; 

	width: 223px; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */

	background: #fff; /* 背景色は、列内のコンテンツの長さにわたって表示されます */

	padding: 15px 0; /* 上余白と下余白により、この div 内に視覚的なスペースが設定されます */

}

#sidebar1 h3, #sidebar1 p {

	margin-left: 10px; /* サイドバーに配置されるすべてのエレメントに左マージンと右マージンが設定されている必要があります */

	margin-right: 10px;

}

#sidebar1 .banner{

margin:10px 0px;

}

#sidebar1 .banner_medium img{

margin:0px 0px 3px ;

}





.town_info{

border:#bfccd9 2px solid;

background-color:#ffffff;

font-size:80%;

}

.town_info .midashi{

color:#003366;

font-weight:700;

margin-bottom:5px;

}

.town_info .midashi2{

margin-left:10px;

font-weight:700;

}

.town_info p{

font-size:90%;

margin-left:10px;

margin-bottom:10px;

}

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

右側のナビゲーション End

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













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

Tabに関わる設定 Start

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



#tabArea{

height:66px;

background:url(/image/index/bg_tab.png) repeat-x;

}

ul#tab{

list-style:none;

}

ul#tab li{

float:left;

display:block;

}

ul#tab li a{

display:block;

height:56px;

}

ul#tab li a span{

display:none;

}



ul#tab a.tab1{	width:238px; background:url(/image/common/tab1_on.jpg); clear:both;	}

ul#tab a.tab2{	width:233px; background:url(/image/common/tab2_on.jpg); clear:both;	}

ul#tab a.tab3{	width:239px; background:url(/image/common/tab3_on.jpg); clear:both;	}



ul#tab li.selected a.tab1{	width:238px; background:url(/image/common/tab1.jpg);}

ul#tab li.selected a.tab2{	width:233px; background:url(/image/common/tab2.jpg);}

ul#tab li.selected a.tab3{	width:239px; background:url(/image/common/tab3.jpg);}



.tabWindow{

width:777px;

/*background:url(/image/tab_bg.jpg) repeat-y;*/

}



/*.tabWindow .wrap{

background:url(/image/common/in_top.jpg) no-repeat 0px 0px;

border:4px solid #5da4ff;

border-top:none;

font-size:100%;

padding-top:10px;

}

*/



.photoBanner ul.floatLeft{

width:680px;

}



.tabWindow ul.floatLeft li{

float:left;

margin:3px 0 0;

padding:0 0 0 15px;

list-style:none;

background:url(/image/common/list_nakaguro.gif) no-repeat;

}





.tabWindow ul.floatLeft li.w1{

width:200px;

}

.tabWindow ul.floatLeft li.w2{

width:440px;

}

.photoBanner{

margin-top:20px;

}



.tabWindow .photoBanner ul.floatLeft li{

list-style:none;

background:none;

padding:0 10 0;

}



#tab1{

padding:0;

}

#tab2{

padding:5px 10px;

}

#tab3{

padding:5px 10px;

}



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

Tabに関わる設定 End

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















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

Tab1 Start

町民の皆様のページで使用

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



#tab1 #leftBox{

float:left;

width:220px;

padding:8px;

background:url(/image/index/bg_r.png) repeat-x;

background-color:#e0e4ed;

border:1px solid #999;

}

#tab1 #mainBox{

float:left;

width:523px;

padding-left:7px;

}



#tab1 .kinkyu{

border:1px solid #999;

padding:1px;

background:#fff;

}

#tab1 .kinkyu_text{

margin-top:1px;

border:#c76161 1px solid;

background-color:#fcd6d6;

padding:5px;

font-size:80%;

}

#tab1 .kinkyu_text p{

margin:6px 0;

line-height:130%;

}

a.arrow_1{

background:url(/image/common/navi/arrow.png) no-repeat 0px 2px;

padding:0px 3px 3px 18px;

}

a.arrow_2{

background:url(/image/common/navi/arrow.png) no-repeat 0px 2px;

padding:0px 3px 3px 25px;

}

#tab1 .townmenu ul{

list-style:none;

margin-top:10px;

border-top:1px solid #999;

}

#tab1 .townmenu li{

border-bottom:1px solid #999;

border-left:1px solid #999;

border-right:1px solid #999;

}

#tab1 .townmenu a{

display:block;

background:url(/image/common/navi/arrow.png) no-repeat 10px 16px;

padding:14px 8px 14px 35px;

font-size:14px;

background-color:#f4f6f9;

}

#tab1 .townmenu a:hover{

background-color:#fff;

}





#tab1 .lifestyle ul{

list-style:none;

margin-top:7px;

}

#tab1 .lifestyle li{

float:left;

border-left:1px solid #cccccc;

border-top:1px solid #cccccc;

padding:0;

margin:0;

line-height:0;

}

#tab1 .lifestyle li.rightborder{

border-right:1px solid #cccccc;

}





whatsnew .date{

color:#333;

padding-right:10px;

font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";

}





.information{

margin-top:10px;

background-color:#ffffe6;

border:2px solid #efefaf;

text-align:center;

font-size:80%;

padding:10px 5px;

}

.information strong.typeA{

color:#FF4400;

}

.information strong.typeB{

color:#990000;

}





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

Tab1 End

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



.cal{

background-color:#f5f5f5;

border:1px solid #d2d2d2;

}











.topList{

margin:20px 0px 20px;

width:710px;

}

.topList h2{

color:#003366;

padding:5px;

border-bottom:2px solid #003366;

font-size:14px;

margin:7px 0;

}

.topList h2 span{

border-left:4px solid #003366;

padding-left:10px;

}

.topList p{

line-height:130%;

}

.topList .date{

color:#333;

padding-right:10px;

font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";

}

.topList .text{



}

h3.ka{

background-color:#dfe6ec;

border-bottom:0px solid #003366;

color:#001133;

padding:5px;

font-size:14px;

margin:14px 0 7px;

}



#tab2_contents{

margin:20px 0px 20px;

width:710px;

}

#tab2_contents h2{

color:#003366;

padding:5px;

border-bottom:2px solid #003366;

font-size:14px;

margin:7px 0;

}

#tab2_contents h2{

color:#003366;

padding:5px;

border-bottom:2px solid #003366;

font-size:14px;

margin:7px 0;

}



#tab2_contents h3{

background-color:#dfe6ec;

border-bottom:0px solid #003366;

color:#001133;

padding:5px;

font-size:14px;

margin:14px 0 7px;

}



#tab2_contents h2 span{

border-left:4px solid #003366;

padding-left:10px;

}





#news{

width:350px;

float:left;

}

#free{

float:left;

width:330px;

padding:10px 10px 10px 15px;

}



#free h5{

padding:10px 0 5px;

}

/*jquery default*/

#tab1_2_contents{

display:block;

}

#tab2_2_contents{

display:none;

}











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

#what's new Start

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

#whatsnew{

/*width:270px;*/

width:496px;

border:2px solid #c6eaf4;

background:url(/image/common/new_bg.jpg) repeat-x #f7ffff;

padding:10px 10px;

margin-bottom:5px;

margin-right:5px;

font-size:90%;

min-height:110px;

float:left;

}

#whatsnew h2{

color:#003366;

padding:5px;

border-bottom:2px solid #003366;

font-size:14px;

}

#whatsnew h2 span{

border-left:4px solid #003366;

padding-left:10px;

}

#whatsnew p{

padding:0px 10px;

line-height:140%;

}

#whatsnew p span.date{

padding-right:8px;

}

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

#what's new End

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















#eventnews{

width:235px;

border:2px solid #ffe5e5;

background:url(/image/common/new_bg2.jpg) repeat-x #fff7f7;

padding:10px;

font-size:90%;

min-height:180px;

/*float:left;*/

}

#eventnews h2{

color:#CC3366;

padding:5px;

border-bottom:2px solid #CC3366;

font-size:14px;

}

#eventnews h2 span{

border-left:4px solid #003366;

padding-left:10px;

}

#eventnews p{

padding:5px 10px 3px;



}

#eventnews p span.date{

font-weight:700;

}





#chumoku{

width:235px;

border:2px solid #ffee99;

background:url(/image/common/new_bg3.jpg) repeat-x #ffffe7;

padding:10px;

font-size:90%;

min-height:180px;

/*float:left;*/

}

#chumoku h2{

color:#996600;

padding:5px;

border-bottom:2px solid #996600;

font-size:14px;

}

#chumoku h2 span{

border-left:4px solid #003366;

padding-left:10px;

}

#chumoku p{

padding:5px 10px 3px;



}

#chumoku p span.date{

font-weight:700;

}













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

観光される方へ ページ START

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

#photoArea{

background-color:#000;

color:#fff;

float:left;

padding:10px;

width:330px;

}

#photoArea p.title{

text-align:center;

font-size:80%;

padding-top:5px;

}

#mainBox_Kanko{

float:left;

width:400px;

padding:0px 0 0 10px;

}

h2.event{

margin-top:10px;

}

p.event{

font-size:80%;

}



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

観光される方へ ページ END

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





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

事業者ページ START

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

#mainBox_Jigyousya{

}

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

事業者ページ END

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







ul.floatLeft li{

float:left;

margin-top:3px;

margin-left:20px;

list-style-image:url(/image/common/list_nakaguro.gif);

}

ul.floatLeft li.w1{

width:210px;

}





/* ===== Clearfix ===== */

.clearfix:after {

	content: ".";

	display: block;

	height: 0;

	clear: both;

	visibility: hidden;

}

.clearfix { display: inline-block;}

/* Hides from IE-mac \*/

* html .clearfix { height: 1%;}

.clearfix { display: block;}

/* End hide from IE-mac */







/*LINK*/

a.title{

background:url("/img/arrowA.png") no-repeat 0 9px;

padding:3px 2px 3px 12px;

line-height:200%;

font-size:90%;

margin-left:4px;

}