/*==============================
        header
==============================*/
@charset "utf-8";

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	background-color:#FFFFFF;
	.header {
		width:100%;
		height:50px;
		display:grid;
		grid-template-columns:50px 1fr auto;
		align-items:center;
		.logo {
			order:1;
			margin:0 auto;
			a {
				display:block;
				width:min(60%,200px);
				margin:0 auto;
				/* transform:translateX(-25px); */
			}
			img {
				display:block;
			}
		}
		.lang {
			width:50px;
			order:2;
			display:flex;
			align-items:center;
			font-size:1.4rem;
			transform: translateX(-20px);
			li {
				&.current-lang {
					a {
						color:#cc0000;
					}
				}
				&:first-child {
					&::after {
						content:'|';
						margin:0 .25em;
					}
				}
			}
		}
		.spbtn {
			cursor:pointer;
			height:50px;
			position:relative;
			display:grid;
			align-content:center;
			justify-items:center;
			grid-row-gap:4px;
			&::before,&::after {
				content:'';
				width:40%;
				height:2px;
				background-color:#000000;
				transition:.3s;
			}
			span {
				width:40%;
				height:2px;
				background-color:#000000;
				transition:.3s;
			}
		}
	}
}

#sidebar {
	position:fixed;
	z-index:99;
	width:100%;
	max-width:300px;
	height:100vh;
	height:100dvh;
	left:0;
	top:0;
	background-color:#000000;
	transition:.3s;
	left:-310px;
	pointer-events:none;
	overflow-y: auto;
	.colorpalette {
		padding:100px 30px 30px;
		h2 {
			font-size:1.6rem;
			color:#FFFFFF;
			font-weight:500;
			margin-bottom:.5em;
		}
		ul {
			display:flex;
			flex-wrap:wrap;
			gap:5px;
			max-width: 230px;
			li {
				&.empty {
					pointer-events: none;
				}
				a {
					display:block;
					width:16px;
					height:16px;
					border-radius:50%;
					&:not(.allcolor) {
						box-shadow:0 0 1px #FFFFFF,
									0 0 2px #FFFFFF;
					}
					&.active {
						border:2px solid #ff0000;
					}
					&.allcolor {
						border:2px solid #FFFFFF;
						position:relative;
						overflow:hidden;
						&::before {
							content:'';
							display:block;
							width:2px;
							height:150%;
							background-color:#FFFFFF;
							position:absolute;
							top:50%;
							left:50%;
							transform:translate(-50%,-50%) rotate(45deg);
						}
					}
				}
			}
		}
	}
	.menu-gmenu-container,.menu-gmenu-en-container {
		padding:30px 30px 60px;
		.menu {
			font-size:1.5rem;
			display:grid;
			grid-gap:2em;
			li {
				a {
					color:#FFFFFF;
				}
			}
		}
	}
}
main {
	transition:.3s;
}
#header {
	.header {
		transition:.3s;
	}
}

body {
	&.menuopen {
		overflow:hidden;
		#header {
			.header {
				.spbtn {
					&::before {
						transform:translateY(6px) rotate(45deg);
					}
					&::after {
						transform:translateY(-6px) rotate(-45deg);
					}
					span {
						opacity:0;
					}
				}
			}
		}
		main {
			transform:translateX(300px);
			pointer-events:none;
			
		}
		#header {
			.header {
				transform:translateX(300px);
			}
		}
		#sidebar {
			pointer-events:all;
			left:0;
		}
	}
}

@media (hover:hover) {

#header {
	.header {
		.spbtn {
			&:hover {
				&::before {
					transform:translateY(-5px);
				}
				&::after {
					transform:translateY(5px);
				}
			}
		}
	}
}

body {
	&.menuopen {
		#header {
			.header {
				.spbtn {
					&:hover {
						&::before {
							transform:translateY(6px) rotate(30deg);
						}
						&::after {
							transform:translateY(-6px) rotate(-30deg);
						}
					}
				}
			}
		}
	}
}
	
}

@media screen and (max-width:1200px) {
}

@media screen and (max-width:1024px) {
}

@media screen and (max-width:768px) {

	#header {
		.header {
			.lang {
				transform: translateX(-10px);
			}
		}
	}
	
	#sidebar {
		max-width:100%;
		height:calc(100vh - 50px);
		height:calc(100dvh - 50px);
		top:50px;
		left:-101%;
		.colorpalette {
			padding:50px 30px 30px;
		}
	}

	body {
		&.menuopen {
			main {
				transform:translateX(0);
				
			}
			#header {
				.header {
					transform:translateX(0);
				}
			}
		}
	}


}