/* CSS Document */




/*============================================================================

	header

============================================================================*/
#header{
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	padding-left: 5%;
    z-index: 9999;
}
#header h1{
	position:relative;
	top: 22px;
	z-index: 9999;
}
@media screen and (max-width:640px) {
	#header{
		position: fixed;
		width: 300px;
		min-width: auto;
		padding-left: 3%;
	}
	#header h1{
		top: 13px;
		width: 200px;
	}
}





/*============================================================================

	nav

============================================================================*/
nav {
	position: absolute; /*HeightMin対策*/ 
	background: #FFF;
	width: 100%;
	min-width: 1280px;
	padding-top: 30px;
	z-index: 99;
}
nav ul{
	text-align: center;
}
nav li {
	position:relative;
	display: inline-block;
	margin: 0 20px;
	text-align: center;
	line-height: 1.8;
}
nav li a{
	color: #222;
}
nav li a span{
	display: block;
	color: #d3af4a;
	font-family: "Cormorant Garamond", serif;
  	font-optical-sizing: auto;
	font-size: 14px;
}

/*------------------------------ ホバーのボーダー ------------------------------*/
nav li a span::before{
    position: absolute;
	left: 0;
	right:0;
	bottom: -12px;
	width:100%;
	height:1px;
	margin:auto;
	background-color: #d3af4a;
	transition: 0.15s  ease-out;
	transform: scaleX(0);
	content: "";
	z-index: 1;
}
nav li a:hover span::before{
	transform: scaleX(1);
}



/*------------------------------ PC＊スクロール後設定 ------------------------------*/
nav.HeightMin{
	position: fixed;
	top: 0;
	left: 0;
	height:65px;
	padding-top: 15px;
	animation: DownAnime 0.5s forwards;
	font-size: 16px;
}
nav.HeightMin li a span{
	font-size: 12px;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-170px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}




@media screen and (max-width:640px) {
	nav {
		display:none;
	}

		.sp_navi {
			display:block;
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:62px;
			z-index: 9998;
		}
		.sp_navi dl{
		}
		.sp_navi dl dt {
			height: 62px;
			cursor:pointer;
			display:block;
		}
		.sp_navi dl dd {
			display:none;
			width: 94%;
			margin: auto;
			background-color: rgba(255,255,255,0.85);
		}
		.sp_navi ul{
			padding:4% 5%;
		}
		.sp_navi ul li {
			width: 100%;
			margin-bottom: 12px;
			padding-bottom: 10px;
			text-align: center;
			border-bottom: 1px solid #FFF;
		}
		.sp_navi ul li a {
			width:100%;
			color:#222;
			font-size: 16px;
			font-weight: 400;
			line-height: 1;
		}
		.sp_navi ul li a span{
			display: block;
			color: #d3af4a;
			font-family: "Cormorant Garamond", serif;
			font-optical-sizing: auto;
			font-size: 12px;
		}

		/*ボタンの動き*/
		.sp_navi dt a {
			display: block;
			width: 42px;
			height:42px;
			position: absolute;
			top:9px;
			right: 10px;
			z-index: 9999999;
			background: #d3af4a;
		}
		.sp_navi dt a span {
			display: block;
			background: #FFF;
			width: 24px;
			height: 2px;
			position: absolute;
			left: 9px;
			transition: all 0.4s;
			-webkit-transition: all 0.4s;
			-moz-transition: all 0.4s;
		}
		.sp_navi dt a span:first-child {
			top: 12px;
		}
		.sp_navi dt a span:nth-child(2) {
			margin-top: -1px;
			top: 50%;
		}
		.sp_navi dt a span:last-child {
			bottom: 12px;
		}
		.sp_navi dt a.active span:first-child {
			-webkit-transform: translateY(8px) rotate(45deg);
			-moz-transform: translateY(8px) rotate(45deg);
			-ms-transform: translateY(8px) rotate(45deg);
			transform: translateY(8px) rotate(45deg);
		}
		.sp_navi dt a.active span:nth-child(2) {
			opacity: 0;
		}
		.sp_navi dt a.active span:last-child {
			-webkit-transform: translateY(-8px) rotate(-45deg);
			-moz-transform: translateY(-8px) rotate(-45deg);
			-ms-transform: translateY(-8px) rotate(-45deg);
			transform: translateY(-8px) rotate(-45deg);
		}

}