@charset "utf-8";
#navi{
	float:right;
	width: auto;
	max-width:700px;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#navi #global-nav{
	width: 650px;
	height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
	#navi #global-nav ul.menu{
		float:left;
	  width: auto;
	  height: 100%;
	  display: -webkit-flex;
	  display: flex;
	  -webkit-align-items: center;
	  align-items: center;
	  -webkit-justify-content: space-between;
	  justify-content: space-between;
	}
		#navi #global-nav ul.menu li{
		  margin-right:35px;
		}
		#navi #global-nav ul.menu li.top{
		  visibility: hidden;
			display: none;
		}
			#navi #global-nav ul.menu li a{
			  font-size:14px;
				color:#fff;
			}
			#navi #global-nav ul.menu li a:hover{
			  font-size:14px;
				color:#d9bb7b;
			}
		#navi #global-nav .contact{
			width:130px;
			height:36px;
			position: relative;
			overflow: hidden;
		}
		#navi #global-nav .contact::before {
			content: '';
			position: absolute;
			top: 0;
			left: -260px;
			z-index: 0;
			width: 390px;
			height: 100%;
			background-image: linear-gradient(145deg, rgba(170, 148, 101, 1) 45.6%, rgba(204, 185, 146, 1) 53%, rgba(217, 204, 174, 1) 57%, rgba(189, 168, 125, 1) 61%, rgba(170, 148, 101, 1) 65%);
			transition: 0.2s linear;
			-webkit-transition: all 0.2s linear;
			-moz-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			-ms-transition: all 0.2s linear;
			transition: all 0.2s linear;
		}
		#navi #global-nav .contact:hover::before {
			left: 0;
		}
			#navi #global-nav .contact a{
				width:100%;
				height:100%;
				z-index: 10;
				color:#fff;
				font-size: 14px;
				overflow: hidden;
				position: relative;
				display: flex;
				-webkit-align-items: center;
				align-items: center;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-align-content: center;
				align-content: center;
				-webkit-justify-content: center;
				justify-content: center;
			}
				#navi #global-nav .contact a::after {
					content: "";
					display: inline-block;
					position: absolute;
					right: 8px;
					top: 50%;
					margin-top: -6px;
					background-image: url(../images/common/icon-arrow.svg);
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center top;
					width: 6px;
					height: 12px;
					z-index: 10;
					transition: 0.2s linear;
					-webkit-transition: all 0.2s linear;
					-moz-transition: all 0.2s linear;
					-o-transition: all 0.2s linear;
					-ms-transition: all 0.2s linear;
					transition: all 0.2s linear;
				}
					#navi #global-nav .contact a:hover::after {
						right: 3px;
					}

		#navi #global-nav ul.sublink{
			visibility: hidden;
			display: none;
		}

		#navi .calendar{
			width:26px;
			height:26px;
			position: absolute;
			top:12px;
			right:150px;
		}
			#navi .calendar img{
				width:100%;
				transition: 0.2s linear;
				-webkit-transition: all 0.2s linear;
				-moz-transition: all 0.2s linear;
				-o-transition: all 0.2s linear;
				-ms-transition: all 0.2s linear;
				transition: all 0.2s linear;
			}
			#navi .calendar:hover img{
				transform: scale(1.4);
			}
			#navi .calendar{
				width:26px;
				height:26px;
				position: absolute;
				top:12px;
				right:150px;
			}


/* ***********************************************************
* スマホ表示時
* *********************************************************** */
@media (max-width: 1000px) {
	#navi #global-nav {
		position:absolute;
		visibility: hidden;
		display: table;
		top: 54px;
		left:auto;
		right:-320px;
		width: 320px;
		height: auto;
		text-align: center;
		background-color: #fff;
		z-index: 100000;
		transition: 0.4s linear;
		-webkit-transition: all 0.4s linear;
		-moz-transition: all 0.4s linear;
		-o-transition: all 0.4s linear;
		-ms-transition: all 0.4s linear;
		transition: all 0.4s linear;
	}
	.open #navi #global-nav {
		visibility: visible;
		display: table;
		right:0;
	}
		#navi #global-nav ul.menu{
			float:none;
		  width: 260px;
		  height: auto;
		  display: -webkit-table;
		  display: table;
			margin:20px auto;
		}
			#navi #global-nav ul.menu li{
				margin:0;
				height:auto;
				border-bottom: 1px solid #3f3f41;
			}
				#navi #global-nav ul.menu li.top {
			    visibility: visible;
			    display: block;
				}
			#navi #global-nav ul.menu li a{
				width:100%;
				height:100%;
				padding:10px 0;
				color: #161515;
				display: flex;
				-webkit-align-items: center;
				align-items: center;
				transition: 0.2s linear;
				-webkit-transition: all 0.2s linear;
				-moz-transition: all 0.2s linear;
				-o-transition: all 0.2s linear;
				-ms-transition: all 0.2s linear;
				transition: all 0.2s linear;
			}
			#navi #global-nav ul.menu li a:hover{
				padding:10px 0 10px 15px;
			}


		#navi #global-nav .contact{
			width:260px;
			height:46px;
			margin:30px auto 0;
		}
		#navi #global-nav .contact::before {
			content: '';
			position: absolute;
			top: 0;
			left: -520px;
			z-index: 0;
			width: 780px;
		}

		#navi #global-nav ul.sublink{
			visibility: visible;
			display: flex;
	    align-items: center;
	    justify-content: space-between;
			width:260px;
			margin:10px auto 20px;
		}
			#navi #global-nav ul.sublink li{
				padding:0;
				color: #161515;
				display: flex;
				-webkit-align-items: center;
				align-items: center;
			}
			#navi #global-nav ul.sublink li a{
					width:100%;
					height:100%;
					padding:10px 0;
					color: #161515;
					font-size:12px;
					display: flex;
					-webkit-align-items: center;
					align-items: center;
				}

		#navi .calendar {
	    right: 70px;
		}
}

@media (max-width: 768px) {
	#navi #global-nav {
		position:absolute;
		visibility: hidden;
		display:none;
		top: 16.9vw;
		left:3vw;
		right:3vw;
		width: 94vw;
		height: auto;
		text-align: center;
		background-color: #fff;
		z-index: 100000;
	}
	.open #navi #global-nav {
		visibility: visible;
		display: table;
	}

	#navi #global-nav ul.menu{
		float:none;
	  width: 84vw;
	  height: auto;
	  display: -webkit-table;
	  display: table;
		margin:5vw auto 2vw;
	}
		#navi #global-nav ul.menu li{
			margin:0;
			height:13vw;
			border-bottom: 1px solid #3f3f41;
		}
		#navi #global-nav ul.menu li a{
			width:100%;
			height:100%;
		  font-size:4.6vw;
			padding:0 3vw;
			display: flex;
			-webkit-align-items: center;
			align-items: center;
		}

	#navi #global-nav .contact{
		width:60vw;
		height:14vw;
		margin:8vw auto 0;
	}
	#navi #global-nav .contact::before {
		left: -120vw;
		z-index: 0;
		width: 180vw;
	}
		#navi #global-nav .contact a{
			font-size:4.6vw;
		}
			#navi #global-nav .contact a::after {
				right: 4vw;
				margin-top: -2vw;
				width: 2vw;
				height: 4vw;
			}
				#navi #global-nav .contact a:hover::after {
					right: 3px;
				}

	#navi #global-nav ul.sublink{
		width:80vw;
		margin:5vw auto 8vw;
	}
		#navi #global-nav ul.sublink li a{
			padding:2vw 0;
			font-size:3.8vw;
		}


	#navi .calendar {
		right: 20vw;
		width: 9vw;
		height: 9vw;
		top: 3.3vw;
	}
}


/* ***********************************************************
* #nav-toggle
* *********************************************************** */
@media (min-width: 1001px) {
	#navi #nav-toggle {
		visibility: hidden;
	}
}
@media (max-width: 1000px) {
	#navi #nav-toggle {
		visibility:visible;
	}
}
@media (max-width: 1000px) {
	#navi #nav-toggle {
		display: block !important;
		position:absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
		cursor: pointer;
		padding: 0;
		z-index: 30001;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		background-color:transparent;
	}
	#navi #nav-toggle div {
		position: relative;
		margin-top:0;
		width: 100%;
		height: 100%;
		background-color: #aa9465;
	}
	#navi #nav-toggle span {
		display: block;
		position: absolute;
		height: 2px;
		width: 30px;
		background: #fff;
		right: 10px;
		top:0;
		zoom: 1;
	}
	#navi #nav-toggle span:nth-child(1) {top: 12px;}
	#navi #nav-toggle span:nth-child(2) {top: 23px;}
	#navi #nav-toggle span:nth-child(3) {top: 34px;}
		.open #navi #nav-toggle span:nth-child(1) {
			top: 22px;
			background:#fff;
			-webkit-transform: rotate(-135deg);
			transform: rotate(-135deg);
			zoom: 1;
		}
		.open #navi #nav-toggle span:nth-child(2) {
			top: 22px;
			background:#fff;
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
			zoom: 1;
		}
			.open #navi #nav-toggle span:nth-child(3) {
				background: transparent;
			}
}
@media (max-width: 768px) {
	#navi #nav-toggle {
		width: 15.6vw;
		height: 15.6vw;
	}
	#navi #nav-toggle span {
		height: 0.5vw;
		width: 7.8vw;
		right: 3.9vw;
	}
	#navi #nav-toggle span:nth-child(1) {top: 4.8vw;}
	#navi #nav-toggle span:nth-child(2) {top: 7.8vw;}
	#navi #nav-toggle span:nth-child(3) {top: 10.8vw;}
		.open #navi #nav-toggle span:nth-child(1) {
			top: 7.2vw;
		}
		.open #navi #nav-toggle span:nth-child(2) {
			top: 7.2vw;
		}
}
/* ---------- メニューここまで ---------- */


/* ***********************************************************
* パッド・スマホ表示時　オープン時　背景
* *********************************************************** */
.window-bg {
	content: "";
	display: block;
}
@media (max-width: 1000px) {
	.open .window-bg,
	.calendar-on .window-bg {
		background:rgba(0,0,0,0.4);
		z-index: 1000;
	  width: 100vw;
	  height: 100vh;
	  position: fixed;
	}
}
