@charset "utf-8";
/* ==========================================================================
   hamburgerのモジュール
============================================================================= */
.hamburger{
	position: relative;
	width: 90px;
	height: auto;
	aspect-ratio:1/1;
	border-radius: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap:calcClamp(6, 10);
	background-color: transparent;
	transition:.3s;
	border: 1px solid var(--color-font6);
	@media (max-width: 1300px) {
		width: 64px;
	}
	.hamburgerArea {
		width: 40px;
		height: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		transition:.3s;
	}
	.hamburgerArea span {
		position: absolute;
		transition:.3s;
		width: 100%;
		height: 2px;
		background-color: var(--color-font6);
		border-radius: 4px;
		
		&:nth-of-type(1) { top: 0;}
		&:nth-of-type(2) { top: 50%; margin-top: -1px;}
		&:nth-of-type(3) { bottom: 0;}
	}

	.is-spMenuActive &{
		.hamburgerArea span:nth-of-type(1) {
			-webkit-transform: translateY(7px) rotate(-40deg);
			transform: translateY(7px) rotate(-40deg);
			@media (max-width: 1300px) {
				-webkit-transform: translateY(7px) rotate(-40deg);
				transform: translateY(7px) rotate(-40deg);
			}
	
		}
		.hamburgerArea span:nth-of-type(2) {
			opacity: 0;
		}
		.hamburgerArea span:nth-of-type(3) {
			-webkit-transform: translateY(-7px) rotate(40deg);
			transform: translateY(-7px) rotate(40deg);
			@media (max-width: 1300px) {
				-webkit-transform: translateY(-7px) rotate(40deg);
				transform: translateY(-7px) rotate(40deg);
			}
		}

	}
}