/*
.categorynavi {
	overflow:hidden;
	white-space:nowrap;
	margin: 20px 0 10px;
}
.categorynavi .inner {
	display:inline-block;
	margin: 0 10px;
	overflow:hidden;
	vertical-align:middle;
	width: calc(100% - 60px);
}
.categorynavi button {
	border:none;
	background:none;
	color:var(--main-color);
	vertical-align:middle;
	padding:0;
	width:20px;
	text-align:left;
}
.categorynavi button:last-child {
	text-align:right;
}

.categorynavi ul {
	position:relative;
	display: inline-flex;
}
.categorynavi ul li {
	display:inline-block;
	padding:0 50px;
	flex-grow: 1;
	border-right: solid 1px;
	text-align: center;
}
.categorynavi ul li:first-child {
	padding-left: 0;
	text-align: left;
}
.categorynavi ul li:last-child {
	border-right: none;
	padding-right: 0;
	flex-grow: 0.5;
	text-align: right;
}

.categorynavi ul li a, .categorynavi ul li a:hover {
	color:inherit;
	text-decoration:none;
}
*/


.categorynavi {
	overflow:visible;
	white-space:nowrap;
	margin: 20px 0 10px;
}


.categorynavi .inner {
	display:inline-block;
	margin: 0 10px;
	overflow:hidden;
	vertical-align:middle;
	width: calc(100% - 60px);
}
.categorynavi button {
	border:none;
	background:none;
	color:var(--main-color);
	vertical-align:middle;
	padding:0;
	width:20px;
	text-align:left;
}
.naviContainer {
	display: inline-block;
}
nav {
	&.primary-navigation {
	  margin: 0 auto;
	  display: block;
	
	  text-align: center;
	  font-size: 16px;
  
	  ul li {
		list-style: none;
		margin: 0 auto;
		border-left: 0px solid #aa9d72;
		display: inline-block;
		padding: 0 15px;
		position: relative;
		text-decoration: none;
		text-align: center;
		font-family: var(--font-special);
		font-size: 1.1rem;
	  }
	  ul li:first-child {
		padding-left: 0;
	  }
  
	  li a {
		color: black;
	  }
  
	  li a:hover {
		color: #aa9d72;
	  }
  
	  li:hover {
		cursor: pointer;
	  }
  
	  ul li ul {
		visibility: hidden;
		opacity: 0;
		position: absolute;
  		padding-left: 0;
		left: 20px;
		display: none;
		background: white;
		z-index: 1;
	  }
  
	  ul li:hover > ul,
	  ul li ul:hover {
		visibility: visible;
		opacity: 1;
		display: block;
		min-width: 250px;
		text-align: left;
		padding-top: 20px;
		box-shadow: 0px 3px 5px -1px #ccc;
	  }
  
	  ul li ul li {
		clear: both;
		width: 100%;
		text-align: left;
		margin-bottom: 20px;
		border-style: none;
		display: block;
		padding: 0 10px;
	  }
  
	  ul li ul li a:hover {
			padding-left: 10px;
			border-left: 2px solid #aa9d72;
			transition: all 0.3s ease;
	  }
	}
  
	  a {
		  text-decoration: none;
		  &:hover {
			  color: #aa9d72;
		  }
	  }
  
	   ul li ul li a { transition: all 0.5s ease; }
   
   }