@charset "utf-8";
/* CSS Document */
 

.nav-toggle{
 display: none;
}

/*.navigation{
width: 100%;
font-size:0.9em;
background-color: transparent;
margin:0 10px;
-webkit-transform: translateX(0);
transform: translateX(0);
}*/

/*.navigation ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}
.navigation ul li a{
 padding: 0 1em;
 border-bottom: none;
}
.navigation ul li a:hover{
background-color:transparent;
}*/

@media screen and (max-width: 640px) {
 
.navigation{
 display: none;
	padding: 0;
	width: 100%;
	}
.flexbox.nav_flex{
		margin: 0;
		text-align: inherit;
	background-color: rgba(0,0,0,0.6);
	}	
 
/*OPEN時の動き*/
.navigation.active {
	 width: 100%;
	height: 100%;
	position: fixed;
	text-align: center;
}

	.inner.active{
		background-color: #fff;
	}
	
	
.nav-toggle {
    display: block;
    position: fixed; 
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
	top: 15px;
   right:30px;
}
 
.nav-toggle span {
    display: block;
    position: absolute;
    width: 40px;
    border-bottom: solid 4px #fff;
	background-color: rgba(53,53,53,0.7);
	transition: transform .3s;
}

.nav-toggle span:nth-child(1) {
    top:5px;
}
 .nav-toggle span:nth-child(2) {
    top: 18px;
}
 .nav-toggle span:nth-child(3) {
    top: 32px;
}
	
.nav-toggle.active span:nth-child(1) {
    top: 18px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
	transition: transform .3s;
}
 
/* 2番目と3番目のspanを45度に */
.nav-toggle.active span:nth-child(2),
.nav-toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	transition: transform .3s;
}
 		
	body.noscroll{
		overflow: hidden;
	}	
	
	
	
}