@charset "utf-8";




/* -------------------------------------------------------------------------------- 
header
-------------------------------------------------------------------------------- */
header{
	width:96%;
	max-width:1345px;
	overflow:hidden;
	margin:0px auto;
	padding:27px 0px 28px 0px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
}
header .headerBlock{
	
}
.headerBlock .logo{
	width:19.85%;
	margin-right:5%;
	float:left;
}
.headerBlock .logo img{
	width:100%;
	height:auto;
}
.headerBlock .headerRight{
	width:75%;
	float:left;
}
.headerRight h1{
	color:#8f82bc;
	font-weight: 500;
}
.headerRight ul{
	overflow:hidden;
	padding:10px 0px 0px 0px;
}
.headerRight ul li{
	display:inline-block;
	margin-right:10px;
}
.headerRight ul li:last-child{
	margin-right:0px;
}
.headerRight ul li a{
	display:inline-block;
	background:url(../images/icon_triangle_red.png) left center no-repeat;
	padding:0px 0px 0px 13px;
}
.headerBlock .menu{display:none;}

@media screen and (max-width:800px){
	header{
		padding:15px 0px 8px 0px;
	}
	.headerBlock .logo{
		width:30%;
	}
	.headerBlock .headerRight{
		display:none;
	}
}
@media screen and (max-width:640px){
	body{
		padding:50px 0px 0px 0px;
	}
	header{
		width:100%;
		top:0px;
		left:0px;
		z-index:99999;
		position:fixed;
		background:#fff;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		padding:8px 2% 5px 2%;;
		box-shadow:1px 2px 2px #f5f5f5;
	}
	.headerBlock .menu{
		display:block;
		width:25%;
		float:right;
	}
	.headerBlock .menu img{
		width:100%;
		height:auto;
	}
	.spReservedFooter{
		display:none;
	}
}





/* -------------------------------------------------------------------------------- 
.footerBanner
-------------------------------------------------------------------------------- */
.footerBanner{
	padding:20px 0px;
	text-align: center;
	background:#fff;
}
.footerBanner img{
	margin:0px 15px;
}
@media screen and (max-width:640px){
	.footerBanner{
		width:96%;
		margin:0px auto;
		text-align: center;
	}
	.footerBanner img{
		max-width:100%;
		margin:0px 0px 5px 0px;
	}
}

/* -------------------------------------------------------------------------------- 
.reservedArea
-------------------------------------------------------------------------------- */
.reservedArea{
	position:fixed;
  z-index: 100;
	left:0px;
	width:100%;
	background:url(../images/bg_reserved.jpg);
	padding:25px 0px;
}
.reservedArea .reservedBlock{
	width:90%;
	max-width:1296px;
	margin:0px auto;
	padding:0px;
	background:#fff;
	/*overflow:hidden;*/
	position:relative;
}
.reservedArea .openClose{
	display:block;
	width:198px;
	height:45px;
	background:url(../images/reserved_open_close.png) center top no-repeat;
	position:absolute;
	right:0px;
	top:-64px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.reservedArea .openClose a{
	display:block;
	padding:8px 10px 0px 20px;
	font-size:15px;
	font-weight: 300;
	letter-spacing: .02em;
	color:#fff;
}
.reservedArea .openClose a.active{
	background:url(../images/icon_close.png) 90% 15px no-repeat;
}
.reservedArea .openClose a.noActive{
	background:url(../images/icon_open.png) 90% 15px no-repeat;
}
.reservedLeft{
	width:29.70%;
	float:left;
	padding:15px 10px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	overflow:hidden;
	background:#fff;
}
.reservedLeft .reservedTitle{
	padding:8px 0px 8px 0px;
	text-align:center;
	background:#a9a0c8;
	background-size:100% auto;
	color:#fff;
	font-size:18px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
}
.reservedLeft .iframe{
	padding:20px 0px 0px 0px;
}
.reservedLeft .iframe iframe{
	width:100%;
	min-height:300px;
}
.reservedRight{
	width:69.90%;
	float:right;
	overflow:hidden;
	padding:15px 10px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	overflow:hidden;
	background:#f5f5f5;
}
.reservedRight .reservedTitle{
	padding:8px 0px 8px 0px;
	text-align:center;
	background:#a9a0c8;
	background-size:100% auto;
	color:#fff;
	font-size:18px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
}
.reservedRight .reservedFlex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:87.96%;
	margin:0px auto;
	padding:20px 0px 0px 0px;
}
.reservedFlex::after{
  content:"";
  display: block;
  width:30%;
}
.reservedFlex .reservedSet{
	width:30%;
	padding-bottom:20px;
}
.reservedFlex .reservedSet:last-child, .reservedFlex .reservedSet:nth-of-type(4){
	padding-bottom:0px;
}
.reservedSet figure{
	background:#fff;
	text-align: center;
	margin-bottom:15px;
}
.reservedSet figure img{
	width:100%;
	max-width:246px;
	height:auto;
}
.resrvedSet a{
	display:block;
	text-align: center;
	padding:5px 0px;
}
.reservedSet a img{
	width:100%;
	max-width:246px;
}


@media screen and (max-width:1150px){
	.reservedLeft{
		width:100%;
		float:none;
		padding:15px 10px;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		overflow:hidden;
		background:#fff;
	}
	.reservedLeft .iframe{
		padding:20px 0px 0px 0px;
	}
	.reservedLeft .iframe iframe{
		width:100%;
		min-height:200px;
	}
	.reservedRight{
		width:100%;
		float:none;
	}
	.reservedRight .reservedFlex{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width:87.96%;
		margin:0px auto;
		padding:20px 0px 0px 0px;
	}
	.reservedFlex::after{
	  content:"";
	  display: block;
	  width:30%;
	}
	.reservedFlex .reservedSet{
		width:30%;
		padding-bottom:20px;
	}	
	
}
@media screen and (max-width:640px){
	.openClose{display:none !important;}
	.reservedArea{
		position:relative;
		margin-top:60px 0px 0px 0px;
	}
	.reservedLeft{
		width:100%;
		float:none;
		padding:8px 10px;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		overflow:hidden;
		background:#fff;
	}
	.reservedLeft .reservedTitle{
		padding:4px 0px 4px 0px;
		text-align:center;
		background:#a9a0c8;
		background-size:100% auto;
		color:#fff;
		font-size:13px;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
	}
	.reservedRight{
		padding:8px 10px;
	}
	.reservedRight .reservedTitle{
		padding:4px 0px 4px 0px;
		font-size:13px;
	}
	.reservedRight .reservedFlex{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width:96%;
		margin:0px auto;
		padding:10px 0px 0px 0px;
	}
}





/* -------------------------------------------------------------------------------- 
footer
-------------------------------------------------------------------------------- */
footer{
	width:100%;
	padding:30px 0px 0px 0px;
	background:#676022;
}
footer .footerBlock{
	width:96%;
	max-width:1354px;
	margin:0px auto;
}
.footerBlock .footerLink{
	text-align: center;
}
.footerLink li{
	display:inline-block;
	margin:0px 12px;
	color:#fff;
	font-size:13px;
}
.footerLink li a{
	color:#fff;
}
.bannerLink{
	padding:30px 0px 30px 0px;
}
.bannerLink li{
	display:inline-block;
	width:12%;
	padding:0px 2px;
	color:#fff;
	font-size:13px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
}
.bannerLink li img{
	width:100%;
}
footer .copyright{
	text-align: center;
	padding:10px 0px 10px 0px;
	font-size:12px;
	background:#fff;
}

@media screen and (max-width:1000px){
	.bannerLink li{
		display:inline-block;
		width:24%;
		padding:0px 2px;
		color:#fff;
		font-size:13px;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
	}
}
@media screen and (max-width:640px){
	footer{
		padding-bottom:0px;
	}
	.bannerLink li{
		display:inline-block;
		width:23%;
		padding:0px 2px;
		color:#fff;
		font-size:13px;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
	}
}






/* page-top
----------------------------------------------------------------- */
#page-top {
	position: fixed;
	bottom:15px;
	right:15px;
	font-size: 77%;
	z-index:999999999;
}
#page-top a {
	width:52px;
	height:52px;
	display: block;
	background:url(../images/page_top.jpg) no-repeat !important;
}
#page-top a:hover {
	text-decoration: none;
}



/* -------------------------------------------------------------------------------- 
SP SmartPhone Css
-------------------------------------------------------------------------------- */
@media screen and (max-width:640px){
	/* page-top
	----------------------------------------------------------------- */
	#page-top {
		position: fixed;
		bottom:15px;
		right:15px;
		font-size: 77%;
		z-index:999999999;
	}
	#page-top a {
		width:52px;
		height:52px;
		display: block;
		background:url(../images/page_top.jpg) no-repeat !important;
		background-size:100% auto !important;
	}
	#page-top a:hover {
		text-decoration: none;
	}

	

}