#menu *{
  	text-decoration: none;
  	user-select: none;
}
#menu{
  	display: none;
  	margin-right: calc(-1 * 100vw + 100%);
}
.menu-open #menu{
  	display: block;
  	position: fixed;
  	width: 100vw;
  	height: 100dvh;
  	z-index: 998;
  	background-color: var(--color-bg);
  	padding: calc(var(--size-mt) + 50px) var(--size-lr) var(--size-mb);
}
.home-page.menu-open #menu{
  	padding-top: calc(var(--size-mt) + 110px);
}

.menu-open #menu > div{
  	min-height: 100%;
  	display: flex;
    flex-direction: column;
    justify-content: space-between;
  	transform-origin: left;
  	transform-origin: top left;
}
	.menu-container-1{
		display: flex;
	    flex-direction: column;
	}
		.menu-2{
		  	/*display: flex;
    		flex-wrap: wrap;
    		justify-content: flex-start;
    		column-gap: 2vw;*/
		}
	.menu-container-2{
	  	display: flex;
	    justify-content: space-between;
      	align-items: flex-end;
	}
		.menu-3{
		  	display: flex;
    		flex-direction: column;
		}

#menu *{
	font-family: Gilroy;
  	font-weight: 800;
  	letter-spacing: 0.05em;
  	text-transform: uppercase;
  	transition: color 300ms;
}
	#menu img{	  	
    	width: 2.5vw;
      	transform: translateY(0.5vw);
      	margin: 0 0.8vw;
      	display: inline;
	}
	#menu a:hover{
  		color: var(--color-red);
	}
	.menu-1 *{
	  	font-size: 4.15vw;
      	line-height: 110%;
	}
	.menu-2 *{
	  	font-size: 4.15vw;
      	line-height: 110%;
      	color: var(--color-3);
	}
		#menu .menu-2 .a-1:hover{
		  	color: var(--color-yellow);
		}
		#menu .menu-2 .a-2:hover{
		  	color: var(--color-green);
		}
		#menu .menu-2 .a-3:hover{
		  	color: var(--color-cyan);
		}
		#menu .menu-2 .a-4:hover{
		  	color: var(--color-orange);
		}
		#menu .menu-2 .a-5:hover{
		  	color: var(--color-blue);
		}
	.menu-3 *{
	  	font-size: 3.1vw;
      	line-height: 110%;
	}
	.menu-4 *{
	  	font-size: 4.15vw;
    	line-height: 110%;
      	color: var(--color-red);
	}

@media screen and (max-width: 999px){
  	.menu-open #menu > div{
    	justify-content: flex-start;
  	}
  		.menu-container-1 .menu-2{
          	display: flex;
    		flex-direction: column;
  		}
  			.menu-container-1 .menu-2 img, .menu-container-1 .menu-2 br{
  			  	display: none !important;
  			}
  		.menu-container-2{
    		flex-direction: column;
    		align-items: flex-start;
  		}
  	#menu div *{
    	font-size: 5vw;
      	line-height: 135%;
  	}
  	.menu-open #footer{
    	position: fixed;
      	bottom: 0;
      	left: 0;
      	width: 100vw;
  	}
}
@media screen and (max-width: 695px){
  	.home-page.menu-open #menu{
    	padding-top: calc(var(--size-mt) + 140px);
  	}
}
@media screen and (max-width: 499px){
  	.menu-open #menu{
  		padding-top: calc(var(--size-mt) + 90px);
	}
}