@charset "utf-8";
/***************************************************************
style.css
***************************************************************/

article {
	background:url(../img/common/body_back.png);
}

a#pagetop {
	display:block;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	width: 60px;
	height: 60px;
}

/*************
*　Button initialization
*******************************/
p.btn_read_more {
	clear:both;
	max-width:140px;
	max-height:30px;
	float:right;
}
	p.btn_read_more a {
		display:block;
		width:100%;
		height:100%;
	}


/*************
*　Header initialization
*******************************/ 
header {
	margin:0 auto;
}
	header > h1 {
		display:none;
	}
	header > p#logo-head {
	}

/*************
*　Navigation initialization
*******************************/ 
nav#sub_navi {
}
		
nav#main_navi {
	background-color:#640000;
	margin:0 auto;
}
		nav#main_navi > ul > li {
			height:60px;
			text-indent:-9987px;
		}
		nav#main_navi > ul > li a {
			height:60px;
			display:block;
		}
		nav#main_navi > ul > li#home {
			background:url(../img/navi/home.png) center bottom no-repeat;
		}
		nav#main_navi > ul > li#whsts {
			background:url(../img/navi/whsts.png) center bottom no-repeat;
		}
		nav#main_navi > ul > li#eat {
			background:url(../img/navi/eat.png) center bottom no-repeat;
		}
		nav#main_navi > ul > li#souvenir {
			background:url(../img/navi/souvenir.png) center bottom no-repeat;
		}
		nav#main_navi > ul > li#play {
			background:url(../img/navi/play.png) center bottom no-repeat;
		}
		nav#main_navi > ul > li#stay {
			background:url(../img/navi/stay.png) center bottom no-repeat;
		}
		nav#main_navi > ul > li#pottery {
			background:url(../img/navi/pottery.png) center bottom no-repeat;
		}
		nav#main_navi > ul > li#ceramics {
			background:url(../img/navi/ceramics.png) center bottom no-repeat;
		}
		nav#main_navi > ul > li#look {
			background:url(../img/navi/look.png) center bottom no-repeat;
		}
		
/*************
*　Bread Link initialization
*******************************/ 	
ul#breadcrumb {
	height:auto;
	margin:0 auto;
	padding:1rem 0;
	text-align:left;
	font-size:86%;
}
	ul#breadcrumb > li {
		float:left;
		padding:0 0.6rem;
	}
	ul#breadcrumb > li.go_sitemap {
		float:right;
	}
	ul#breadcrumb > li a {
	}
	
/*************
*　Content initialization
*******************************/ 
div#contents {
	margin:0 auto;
}

	div#contents h2 {
		font-weight:bold;
		font-size:180%;
		margin:0 0 2rem 0;
	}
		div#contents h2 > span {
			display:block;
			font-weight:normal;
			font-size:70%;
		}

	div#contents > section.news_frame {
		max-width:1200px;
		margin:2rem auto;
	}
			
		/****** news_box & list_box ******/
		section.news_frame h3 {
			padding:1rem 0.6rem;
			font-size:110%;
			text-align:left;
			font-weight:bold;
			background-color:#FFF;
		}
			section.news_frame h3 > span {
				display:block;
				text-align:right;
				font-size:70%;
				font-weight:normal;
			}
		section.news_frame h4 {
			text-align:left;
			padding:0 0.6rem 1rem 0.6rem;
			font-size:90%;
			background-color:#FFF;
		}

	p.calendar_link {
		margin:1rem 0 0.4rem 0;
		font-size:150%;
		font-weight:bold;
	}
		p.calendar_link > span {
			font-size:70%;
		}
		p.calendar_link > span a {
			text-decoration:none;
		}

	table.calendar_table {
		width:100%;
		border-top:1px solid #CCC;
		margin:0 0 1rem 0;
	}
		table.calendar_table th {
			text-align:center;
			font-size:100%;
			border-bottom:1px solid #CCC;
			padding:1rem 0;
		}
		table.calendar_table td {
			text-align:center;
			font-size:100%;
			color:#000;
			font-weight:bold;
			border-bottom:1px solid #CCC;
			padding:1rem 0;
		}
			table.calendar_table td span {
				font-size:70%;
				color:#999;
				display:block;
				padding:0.6rem 0 0 0;
			}
				table.calendar_table td a {
					display:block;
					width:100%;
					height:100%;
					text-decoration:none;
					color:inherit;
				}
				table.calendar_table td a:hover {
					border-radius:10px;
					opacity:0.5;
				}
			
			table.calendar_table td.silver {
				color:#999;
			}
			
			table.calendar_table td#l_m {
				text-align:center;
				color:inherit;
			}
			

		/****** information ******/
		section.bg_gray_box {
			background-color:#E8E7E2;
			padding:2rem 0;
		}

		ul.infomation_list {
			margin:2rem auto;
		}
			ul.infomation_list > li {
				padding:1rem;
			}

		/****** banner ******/
		ul.banner_list {
		}
			ul.banner_list > li {
				padding:0.6rem 0.2rem;
				margin:0 auto;
				float:left;
			}
		
/*************
*　Footer initialization
*******************************/ 
footer {
	padding:1rem 0;
}
	footer > address {
	}
p#copyright {
	padding:0.6rem 0;
}

			
/*************
*　Sitemap initialization
*******************************/
ul.sitemap_frame {
	margin:2rem auto 0 auto;
}
	ul.sitemap_frame > li {
		padding:0.6rem;
		text-align:left;
		font-size:90%;
		margin:0 0 2rem 0;
		list-style-position:inside;
		list-style-type:disc;
		color:#FFF;
	}
		ul.sitemap_frame li a {
			color:#FFF;
		}
		
		ul.sitemap_frame > li > ul {
			padding:0 0 0 1.2rem;
			margin:0.6rem 0;
		}
		ul.sitemap_frame > li > ul > li {
			font-size:90%;
			background:url(../img/common/arrow01.png) left center no-repeat;
			padding:0 0 0 14px;
		}

/******************************************************************************
***　[CASE] min-width 1200px
******************************************************************************/
@media screen and (min-width: 1200px) {


ul#bread_link {
	width:1200px;
}

/*************
*　Header initialization
*******************************/ 
	header > p#logo-head {
		float:left;
		width:280px;
		height:110px;
	}

/*************
*　Navigation initialization
*******************************/
p#menu_btn {
	display:none;
}

nav#sub_navi {
	float:right;
	position:relative;
	top:60px;
}
	nav#sub_navi > ul {
	}
		nav#sub_navi > ul > li {
			width:140px;
			min-height:30px;
			line-height:30px;
			float:left;
			background-color:#000;
			color:#FFF;
			margin:0 1rem 0 0;
		}
			nav#sub_navi > ul > li a {
				color:#FFF;
				text-decoration:none;
			}

nav#main_navi {
	clear:both;
	height:60px;
	margin:0 auto;
}
	nav#main_navi > ul {
		width:1200px;
		margin:0 auto;
	}
		nav#main_navi > ul > li {
			float:left;
		}
		nav#main_navi > ul > li#home {
			width:80px;
		}
		nav#main_navi > ul > li#whsts {
			width:140px;
		}
		nav#main_navi > ul > li#eat {
			width:140px;
		}
		nav#main_navi > ul > li#souvenir {
			width:140px;
		}
		nav#main_navi > ul > li#play {
			width:140px;
		}
		nav#main_navi > ul > li#stay {
			width:140px;
		}
		nav#main_navi > ul > li#pottery {
			width:140px;
		}
		nav#main_navi > ul > li#ceramics {
			width:140px;
		}
		nav#main_navi > ul > li#look {
			width:140px;
		}


		
.side-menu-btn {
	display:none;
}


/*************
*　Content initialization
*******************************/ 
div#contents {
	width:1200px;
}

}

/******************************************************************************
***　[CASE] max-width 1199px
******************************************************************************/
@media screen and (max-width: 1199px) {
	

/*************
*　Header initialization
*******************************/ 
	header > p#logo-head {
		max-width:280px;
		max-height:110px;
		margin:0 auto;
	}


/*************
*　Navigation initialization
*******************************/ 
p#menu_btn {
	max-width:100px;
	max-height:50px;
	float:left;
}

nav#sub_navi {
	display:none;
}

nav#main_navi {
	position:absolute;
	width:100%;
	height:auto;
	display:none;
	opacity: 0.9;
	z-index:2;
}
	nav#main_navi > ul > li {
		width:100%;
		height:60px;
	}
	nav#main_navi > ul > li a:hover {
		opacity:0.6;
		background-color:#FFF;
	}

/*************
*　Content initialization
*******************************/ 
div#contents {
	width:100%;
}

}

/******************************************************************************
***　[CASE] min-width 980px
******************************************************************************/
@media screen and (min-width: 980px) {
	

/*************
*　Content initialization
*******************************/ 

		/****** news_box ******/
		section.news_frame section.news_box {
			width:25%;
			float:left;
			padding:0 1rem 1rem 1rem;
		}
			section.news_box > p {
				width:100%;
				max-height:190px;
			}

		/****** list_box ******/
		section.news_frame section.list_box {
			width:100%;
			margin:0 0 2rem 0;
			max-height:120px;
			overflow:hidden;
		}
			section.list_box > p {
				width:30%;
				float:left;
				margin:0 1rem 0 0;
			}

		/****** calendar ******/
		div.calendar_frame {
			width:26%;
			float:left;
		}

		div.calendar_news {
			width:70%;
			float:right;
		}

		/****** information ******/
		ul.infomation_list {
			max-width:1200px;
		}
			ul.infomation_list > li {
				width:20%;
				float:left;
			}

		/****** banner ******/
		ul.banner_list {
			max-width:1200px;
			margin:4rem auto;
		}
			ul.banner_list > li {
				width:220px;
				height:60px;
			}
		
}

/******************************************************************************
***　[CASE] max-width 979px
******************************************************************************/
@media screen and (max-width: 979px) {
	
/*************
*　Navigation initialization
*******************************/ 
nav#sub_navi {
	clear:left;
}


/*************
*　Content initialization
*******************************/ 

		/****** news_box ******/
		section.news_frame section.news_box,
		section.news_frame section.list_box {
			width:96%;
			margin:0 auto 1rem auto;
			overflow:hidden;
		}
		section.news_frame p {
			width:30%;
			max-height:120px;
			float:left;
			margin:0 1rem 0 0;
		}

		/****** information ******/
		ul.infomation_list {
		}
			ul.infomation_list > li {
				width:33%;
				float:left;
			}

		/****** banner ******/
		ul.banner_list {
		}
			ul.banner_list > li {
				max-width:220px;
				height:auto;
			}


/*************
*　Sitemap initialization
*******************************/
ul.sitemap_frame {
	width:100%;
}
	ul.sitemap_frame > li {
		width:100%;
		clear:left;
	}
		ul.sitemap_frame > li > ul > li {
			float:left;
			margin:0 0.6rem 0.4rem 0;
		}


}


/******************************************************************************
***　[CASE] min-width720px
******************************************************************************/
@media screen and (min-width: 720px) {

}

/******************************************************************************
***　[CASE] max-width 679px
******************************************************************************/
@media screen and (max-width: 719px) {

}