/* Reset */

body,
h1, h2, h3, h4, h5	{ margin:0; padding:0; }

/*
960px =  8columns * 120px (10px + 100px + 10px)
960px = 12columns *  80px (10px +  60px + 10px)
960px = 16columns *  60px (10px +  40px + 10px)
*/
.grid1,	.grid2,	.grid3,	.grid4,	
.grid5,	.grid6,	.grid7,	.grid8,	
.grid9,	.grid10,.grid11,.grid12,
.grid13,.grid14,.grid15,.grid16		{ float:left; margin:10px; display:inline; }	/* IE6 Hack [margin x 2] display:inline; */

.grid1	{ width: 60px; }	.h1		{ height: 60px; }
.grid2	{ width:140px; }	.h2		{ height:140px; }
.grid3	{ width:220px; }	.h3		{ height:220px; }
.grid4	{ width:300px; }	.h4		{ height:300px; }
.grid5	{ width:380px; }	.h5		{ height:380px; }
.grid6	{ width:460px; }	.h6		{ height:460px; }
.grid7	{ width:540px; }	.h7		{ height:540px; }
.grid8	{ width:620px; }	.h8		{ height:620px; }
.grid9	{ width:700px; }	.h9		{ height:700px; }
.grid10	{ width:780px; }	.h10	{ height:780px; }
.grid11	{ width:860px; }	.h11	{ height:860px; }
.grid12	{ width:940px; }	.h12	{ height:940px; }

.grid,
.grid1 p,	.grid2 p,	.grid3 p,	.grid4 p,	.grid5 p,
.grid6 p,	.grid7 p,	.grid8 p,	.grid9 p,	.grid10 p,
.grid11 p,	.grid12 p,	.grid13 p,	.grid14 p,	.grid15 p,
.grid16 p	{ margin:10px; }

.h0,
.h1,	.h2,	.h3,	.h4,	
.h5,	.h6,	.h7,	.h8,	
.h9,	.h10,	.h11,	.h12,	
.h13,	.h14,	.h15,	.h16	{ margin:9px; color:#666; background-color:#f6f7f8; border:1px solid #ccc; }

.zero		{ margin:0; padding:0; }
.zero li	{ margin-left:1.0em; }





/* Outline for Kushiro Tourism Association */

body	{ background:#6389cb url(./bg.jpg) no-repeat 50% 0% fixed; }

h1,h2,h3,h4,h5	{ margin:0; padding:0; }
/*
h1	{ margin-top:20px; }
h2	{ height:61px; margin:0; padding:9px 0 0 30px;
	color:#fff; text-align:left; letter-spacing:0.1em;
	border:none; background:transparent url(./bg_h.jpg) no-repeat left top;
}
h3	{ margin-bottom:1em; padding:5px 13px; color:#fff; background-color:#789; border:2px solid #ddd; }
h4	{ margin-bottom:1em; padding:5px 13px; color:#333; border-left:6px solid #ccc; }
h5	{ color:#333; font-size:1.2em; }
*/
h1	{ margin:0 10px; padding:10px 0 0 20px; height:100px;
	font-size:36px; font-family:san-serif;
	background:transparent url(./bg_h.jpg) no-repeat 0% 0%;
}
h3,h4	{ padding:6px 6px; color:#333; border-bottom:2px dotted #ccc; }

a, a:link	{ color:#36c; text-decoration:none; }
a:visited	{ color:#36c; text-decoration:none; }
a:active	{ color:#93c; text-decoration:none; }
a:hover		{ color:#93c; text-decoration:none; }

.cbox	{ height:100px; margin-bottom:20px; padding:9px; border:1px solid #ccc; }
.cbox span	{ font-size:0.8em; }

.b		{ font-weight:bold; }
.bb		{ color:#000; font-size:1.2em; font-weight:bold; }
.s		{ font-size:0.8em; }

.title_l	{ color:#900; font-size:2.4em; font-weight:bold; }
.title_m	{ color:#900; font-size:1.4em; font-weight:bold; }
.title_s	{ color:#900; font-size:1.0em; font-weight:bold; }

.topimage	{ clear:both; text-align:center; }
.top_msg	{ margin:0; padding:10px 20px; background:#ffe url(bg_main.gif) no-repeat center bottom; }
.top_msg h2	{ padding:0; color:#600; background-color:transparent; }

.information{ clear:both; height:200px; margin:20px 0; border:1px solid #ccc; background-color:#f8f8f8; }

.banner		{ clear:both; height:140px; margin:0; text-align:center; border:1px solid #ccc; background-color:#f8f8f8; }

.gbox		{ margin:0; padding:8px; text-align:center; border:1px solid #ccc; background-color:#f8f8f8; }

.link		{ padding: 4px 0px 4px 30px; background: url(btn_arrow_r.gif) no-repeat 0% 50%; }
.caution	{ color:#d00; font-size:0.8em; }

.clear		{ clear:both; }



/*--------*/
table.solid		{ margin:10px; font-family:Arial; border-collapse:collapse; background-color:#fff; border:1px solid #abc; }
table.solid tr	{ font-size:1.0em; line-height:1.3; }
table.solid th	{ padding:0.5em 0.8em; vertical-align:top; color:#333; background-color:#eee; border:1px solid #abc; }
table.solid td	{ padding:0.5em 0.8em; text-align:left; vertical-align:top; border:1px solid #abc; }
table.solid .ng	{ color:#666; text-decoration:line-through; background-color:#f8f8f8; }
table.solid .ec	{ white-space:nowrap; text-align:center; background-color:#f0f0f0; }
table.solid .dc	{ white-space:nowrap; text-align:center; background-color:#ddd; }
table.solid .e	{ white-space:nowrap; background-color:#cde; color:#000; }
table.solid .d	{ white-space:nowrap; background-color:#eee; }
table.solid .l	{ text-align:left;  }
table.solid .r	{ text-align:right; }

table.simple		{ margin:10px; font-family:Arial; border-collapse:collapse; }
table.simple tr		{ font-size:1.0em; line-height:1.3; }
table.simple th		{ padding:0.5em 0.8em; vertical-align:top; }
table.simple td		{ padding:0.5em 0.8em; vertical-align:top; }
table.simple .e		{ white-space:nowrap; background-color:#cde; color:#000; }
table.simple .d		{ white-space:nowrap; background-color:#eee; }
table.simple .l		{ text-align:left;  }
table.simple .r		{ text-align:right; }
table.simple .c		{ text-align:center; }


/*-- インフォメーション --*/
.t_info		{ margin:10px; color:#666; background:url(./bg_information.jpg) no-repeat 0% 0%; }
.t_info ul	{ margin:60px 24px 0px 16px; padding:0px; /*height:180px; overflow:auto;*/ }
.t_info li	{ margin:0 0 8px; padding-bottom:8px; padding-left:20px; text-align:left; list-style-type:none;
	border-bottom:1px dotted #ccc; background:transparent url(./arrow.gif) no-repeat left 2px;
	height:1.1em; overflow:hidden;
}
.t_info .date	{ padding:0 0.5em; color:#090; font-size:13px; font-weight:normal; font-family:Arial; }
.t_info .ctg	{ padding:0.3em 0; color:#ccc; font-size:13px; font-weight:normal; font-family:Arial; text-align:right; }
.t_info .ttle	{ margin:0; color:#036; font-size:1.0em; font-weight:bold; }
.t_info .cmt	{ display:block; font-size:0.9em; }
.t_info .cmt img	{ margin:1em 0; border-width:0; }

/*-- イベント --*/
.t_event	{ margin:10px; color:#666; background:url(./bg_event.jpg) no-repeat 0% 0%; }
.t_event ul	{ margin:60px 24px 0px 16px; padding:0px; /*height:180px; overflow:auto;*/ }
.t_event li	{ margin:0 0 8px; padding-bottom:8px; padding-left:20px; text-align:left; list-style-type:none;
	border-bottom:1px dotted #ccc; background:transparent url(./arrow.gif) no-repeat left 2px;
	height:1.1em; overflow:hidden;
}
.t_event .date	{ padding:0 0.5em; color:#090; font-size:13px; font-weight:normal; font-family:Arial; }
.t_event .ctg	{ padding:0.3em 0; color:#ccc; font-size:13px; font-weight:normal; font-family:Arial; text-align:right; }
.t_event .ttle	{ margin:0; color:#036; font-size:1.0em; font-weight:bold; }
.t_event .cmt	{ display:block; font-size:0.9em; }
.t_event .cmt img	{ margin:1em 0; border-width:0; }

/*-- コンベンション --*/
.t_conven	{ margin:10px; color:#666; background:url(./bg_conven.jpg) no-repeat 0% 0%; }
.t_conven ul	{ margin:60px 24px 0px 16px; padding:0px; /*height:180px; overflow:auto;*/ }
.t_conven li	{ margin:0 0 8px; padding-bottom:8px; padding-left:20px; text-align:left; list-style-type:none;
	border-bottom:1px dotted #ccc; background:transparent url(./arrow.gif) no-repeat left 2px;
	height:1.1em; overflow:hidden;
}
.t_conven .date	{ padding:0 0.5em; color:#090; font-size:13px; font-weight:normal; font-family:Arial; }
.t_conven .ctg	{ padding:0.3em 0; color:#ccc; font-size:13px; font-weight:normal; font-family:Arial; text-align:right; }
.t_conven .ttle	{ margin:0; color:#036; font-size:1.0em; font-weight:bold; }
.t_conven .cmt	{ display:block; font-size:0.9em; }
.t_conven .cmt img	{ margin:1em 0; border-width:0; }

/*-- ブログ --*/
.t_blog	{ margin:10px; color:#666; background:url(./bg_blog.jpg) no-repeat 0% 0%; }
.t_blog ul	{ margin:60px 24px 0px 16px; padding:0px; /*height:180px; overflow:auto;*/ }
.t_blog li	{ margin:0 0 8px; padding-bottom:8px; padding-left:20px; text-align:left; list-style-type:none;
	border-bottom:1px dotted #ccc; background:transparent url(./arrow.gif) no-repeat left 2px;
	height:1.1em; overflow:hidden;
}
.t_blog .date	{ padding:0 0.5em; color:#090; font-size:13px; font-weight:normal; font-family:Arial; }
.t_blog .ctg	{ padding:0.3em 0; color:#ccc; font-size:13px; font-weight:normal; font-family:Arial; text-align:right; }
.t_blog .ttle	{ margin:0; color:#036; font-size:1.0em; font-weight:bold; }
.t_blog .cmt	{ display:block; font-size:0.9em; }
.t_blog .cmt img	{ margin:1em 0; border-width:0; }

/*-- インフォメーション --*/
.info		{ margin:10px 10px; padding:0; }
.info ul	{ margin:0; padding:0; }
.info li	{ margin:0 0 8px; padding-bottom:8px; padding-left:24px; text-align:left; list-style-type:none;
	border-bottom:1px dotted #ccc; background:transparent url(./arrow.gif) no-repeat left 2px; }
.info li li	{ padding-left:18px; border:none; background:transparent url(./arrow13.gif) no-repeat left 2px; }
.info .ctg	{ float:right; display:inline; padding:0.2em 0; color:#ccc; font-size:13px; font-weight:normal; font-family:Arial; }
.info .date	{ color:#090; }
.info .ttl	{ margin:0; color:#036; font-size:1.0em; font-weight:bold; }
.info .cmt	{ display:block; margin-top:0.3em; font-size:0.9em; }
.info .cmt img	{ margin:1em 0; border-width:0; }

.headline		{ margin:10px 10px; padding:0; }
.headline ul,
.headline li	{ margin:0; padding:0; line-heigh:1.5em; }
.headline .ctg	{ float:right; display:inline; padding-left:1em; color:#ccc; font-size:13px; font-weight:normal; font-family:Arial; }
.headline .date	{ color:#090; }
.headline a		{ font-weight:bold; }
.headline li	{ height:3.0em; /* height:4.5em; */
	margin-bottom:1em; padding-left:24px;
	color:#999; text-align:left; overflow:hidden;
	background:transparent url(./images/arrow.gif) no-repeat left 2px; }

/*--------*/
.pagelink	{ clear:both; padding:24px 6px; font-size:14px; line-height:1.0; text-align:center; }
.pagelink .blank,
.pagelink .self,
.pagelink a.plink	{ margin:0 3px; padding:3px 6px; text-decoration:none; border:1px solid #ccc; background-color:#fff; }
.pagelink .blank	{ color:#999; }
.pagelink .self		{ color:#c00; font-weight:bold; padding:4px 6px; }
.pagelink a.plink:visited	{ color:#00f; text-decoration:none; }
.pagelink a.plink:hover		{ color:#fff; background-color:#36c; }





.arrow	{ padding-left:20px; background:transparent url(./arrow.gif) no-repeat 0% 50%; }
.pdf	{ padding-left:20px; padding-bottom:3px; background:transparent url(./icon/pdf.gif) no-repeat left 0; }
.pdfb	{ padding-right:20px; padding-bottom:3px; background:transparent url(./icon/pdf.gif) no-repeat right 0; }
.gmap	{ padding-left:24px; padding-bottom:3px; background:url(./gmap20.gif) no-repeat 0% 0%; }

.date	{ color:#090; font-family:arial; }
.url	{ color:#090; font-family:arial; }

.bnr	{ margin-bottom:20px; text-align:center; }

.catgy	{ padding-right:20px; }

.l	{ text-align:left;  }
.r	{ text-align:right; }
.c	{ text-align:center; }

/*----画像サムネイル表示----*/
.phbox_r, .phbox_nr,
.phbox_l, .phbox_nl,
.phbox_c, .phbox_nc	{ padding:6px; text-align:center; color:#666; font-size:0.8em; line-height:1.6; }

.phbox_r, .phbox_nr { float:right; margin:6px; }
.phbox_l, .phbox_nl	{ float:left;  margin:6px; }
.phbox_c, .phbox_nc	{ margin:20px 0; }

.phbox_r, .phbox_l, .phbox_c	{ background-color:#fff; border:2px solid #ddd; }

.phbox_r  img, .phbox_l  img, .phbox_c  img	{ border:0px solid #ccc; }
.phbox_nr img, .phbox_nl img, .phbox_nc img	{ border:0px solid #ccc; }




/* CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法 http://www.css-lecture.com/ */
/* 外部リンク要素  */
a[href^="http"]		{ padding: 4px 20px 4px 0; background: url(./icon/external.gif) no-repeat 100% 50%; }
* html a.external	{ padding: 4px 20px 4px 0; background: url(./icon/external.gif) no-repeat 100% 50%; }
/* mailto要素 ---- */
a[href ^="mailto:"]	{ padding: 4px 20px 4px 0; background: url(./icon/mailto.gif) no-repeat 100% 50%; }
* html a.mailto		{ padding: 4px 20px 4px 0; background: url(./icon/mailto.gif) no-repeat 100% 50%; }
/* pdf要素 ---- */
a[href$=".pdf"]	{ padding: 4px 20px 4px 0; background: url(./icon/pdf.gif) no-repeat 100% 50%; }
* html a.pdf	{ padding: 4px 20px 4px 0; background: url(./icon/pdf.gif) no-repeat 100% 50%; }
/* doc要素 ---- */
a[href$=".doc"]	{ padding: 4px 20px 4px 0; background: url(./icon/doc.gif) no-repeat 100% 50%; }
* html a.doc	{ padding: 4px 20px 4px 0; background: url(./icon/doc.gif) no-repeat 100% 50%; }
/* xls要素 ---- */
a[href$=".xls"]	{ padding: 4px 20px 4px 0; background: url(./icon/xls.gif) no-repeat 100% 50%; }
* html a.xls	{ padding: 4px 20px 4px 0; background: url(./icon/xls.gif) no-repeat 100% 50%; }
/* zip要素 ---- */
a[href$=".zip"]	{ padding: 4px 20px 4px 0; background: url(./icon/zip.gif) no-repeat 100% 50%; }
* html a.zip	{ padding: 4px 20px 4px 0; background: url(./icon/zip.gif) no-repeat 100% 50%; }

/* IE-6要素 ----------------------------------------------------------- */
* html a	{
	behavior: expression(
	this.className += this.getAttribute("href").match(/^http.*/) ? " external" : "",
	this.className += this.getAttribute("href").match(/^mailto.*/) ? " mailto" : "",
	this.className += this.getAttribute("href").match(/\.pdf$/) ? " pdf" : "",
	this.className += this.getAttribute("href").match(/\.doc$/) ? " doc" : "",
	this.className += this.getAttribute("href").match(/\.xls$/) ? " xls" : "",
	this.className += this.getAttribute("href").match(/\.zip$/) ? " zip" : "",
	this.style.behavior = "none"
	);
}

/* use this class to make sure that images won't get iconized */
#gmap a,
.imageLink {
	padding-right: 0px !important;
	background: none !important;
}





/*----------*/
#search			{ float:left; margin-bottom:15px; padding:5px; border:1px solid #abc; }
#search form	{ margin:0; padding:0; }
.searchField	{ margin:0; padding:0; width:280px; height:30px; font-size:18px; border:none; }
.searchButton	{ margin:0; padding:0; vertical-align:bottom; }

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


#wrapper	{ width:980px; margin:25px auto; padding:0; background-color:#fff; border:0px solid #36c; }


#header		{ width:940px; margin:20px auto 0; padding:0; /*background: url(./bg_header.jpg) no-repeat center top;*/ }
#header h2	{ float:left; margin:0; padding:0; }
#header .logo a		{ display:block; width:370px; height:50px; margin:20px 0 0; text-indent:-9999px; background:url(./logo.jpg) no-repeat 0% 0%; }
#header .inquiry a	{ float:right; width:290px; height:110px; text-indent:-9999px; background:url(./inquiry.jpg) no-repeat left 40px; }


#pankz		{ width:920px; margin:0px auto 0px; padding:10px; color:#666; font-size:10px; line-height:1.0; border:0px solid #ccc; }


#container	{ width:960px; margin:0 auto; padding:0; color:#444; font-size:0.9em; line-height:1.5; }


#main		{ float:left;  width:620px; margin:10px; padding:0 0 20px; border:0px solid #ccc; }


#sidebar	{ float:right; width:300px; margin:10px 9px; padding:0 0 20px; border:1px solid #ccc; }
/*
#sidebar a	{ padding:0px !important; color:#fff; background: none; }
#sidebar img	{ border: none; }
*/

#footer	{
	clear:both; margin:0; padding:10px 0 0;
	color:#ccc; font-size:12px; font-family:Arial; text-align:center;
/*	line-height:39px;
	background:transparent url(./bg_footer.jpg) repeat-x 0% 0%;
	border-top:1px dotted #ccc;
*/
}
#footer a	{ padding:0px !important; color:#fff; background:none; }
#footer address	{ margin-top:20px; padding:10px 20px; line-height:1.5; background-color:#666; }
#footer ul	{ margin:0; padding:0; }
#footer li	{ float:left; margin:0 10px; padding:0; list-style-type:none; color:#666; text-align:center; text-decoration:none; }
#footer .backs	{ float:right; margin-right:20px; padding:5px; font-size:10px; background-color:#666; }





#ctrl	{ margin:0; padding:10px 0; font-size:0.8em; text-align:right; }

#tab	{ margin:0; padding:0; float:right; }
#tab ul { margin:0; padding:0; }
#tab li	{ margin:0; padding:0; float:left; list-style:none; }
#tab a	{ display:block; width:140px; height:40px; text-indent:-9999px; }
#tab a	{ color:#ccc; background:url(tab140x40.jpg) no-repeat 0px 0px; }
/*
#tab a	{ display:block; padding:13px 26px; font-size:14px; line-height:1.0; text-align:center; }
#tab a			{ color:#fff; background-color:#999; border-left:1px solid #fff; }
#tab a:hover	{ color:#fff; background-color:#f90; text-decoration:none; }
*/
#tab .tab01 a	{ background-position:    0px 0px; }
#tab .tab02 a	{ background-position: -140px 0px; }
#tab .tab03 a	{ background-position: -280px 0px; }

#tab .tab01 a:hover	{ background-position:    0px -50px; }
#tab .tab02 a:hover	{ background-position: -140px -50px; }
#tab .tab03 a:hover	{ background-position: -280px -50px; }

#nav	{ margin:0; padding:0; height:50px; background-color:#333; border-top:1px solid #999; }
#nav ul { margin:0; padding:0; }
#nav li	{ margin:0; padding:0; float:left; list-style:none; }
#nav a	{ display:block; width:150px; height:50px; text-indent:-9999px; }
#nav a	{ color:#ccc; background:url(menu160x50.jpg) no-repeat 0px 0px; }
/*
#nav a	{ display:block; width:150px; padding:18px 0; font-size:14px; line-height:1.0; text-align:center; }
#nav a			{ color:#ccc; background-color:#333; border-right:1px solid #666; }
#nav a:hover	{ color:#fff; background-color:#f90; text-decoration:none; }
*/
#nav .navi01 a			{ width:150px; background-position:    0px 0px; }
#nav .navi02 a			{ width:160px; background-position: -150px 0px; }
#nav .navi03 a			{ width:160px; background-position: -310px 0px; }
#nav .navi04 a			{ width:160px; background-position: -470px 0px; }
#nav .navi05 a			{ width:160px; background-position: -630px 0px; }
#nav .navi06 a			{ width:150px; background-position: -790px 0px; }

#nav .navi01 a:hover	{ background-position:    0px -50px; }
#nav .navi02 a:hover	{ background-position: -150px -50px; }
#nav .navi03 a:hover	{ background-position: -310px -50px; }
#nav .navi04 a:hover	{ background-position: -470px -50px; }
#nav .navi05 a:hover	{ background-position: -630px -50px; }
#nav .navi06 a:hover	{ background-position: -790px -50px; }

* html #nav ul { line-height: 0; } /* IE6 "fix" */
#nav ul a { zoom: 1; } /* IE6/7 fix */



#submenu	{ margin:0; padding:10px; height:310px; background:transparent url(./bg_submenu.jpg) no-repeat 0% 0%; }

#submenu ul { margin:0; padding:0; list-style:none; }
#submenu li	{ margin:5px; padding:0; float:left; }
#submenu a	{ margin:0; padding:10px 0; width:128px; height:40px; display:block; font-size:14px; line-height:1.5; text-align:center; }
#submenu a			{ color:#fff; background-color:#574; }
#submenu a:hover	{ color:#fff; background-color:#9c6; text-decoration:none; }



#submen2	{ margin:0; padding:10px; }
#submen2 ul	{ margin:0; padding:0; list-style:none; }
#submen2 li	{ margin:10px 0; padding:0; }
#submen2 a	{ display:block; margin:0; padding:10px 0; font-size:14px; line-height:1.5; text-align:center; }
#submen2 a			{ color:#fff; background-color:#574; }
#submen2 a:hover	{ color:#fff; background-color:#9c6; text-decoration:none; }