@charset "utf-8";

.hamburger {
	display: none;
	width: 70px;
	height: auto;
	border-radius: 100vh;
	aspect-ratio: 1/1;
	text-align: center;
	background-color: #E18173;
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
	margin-left: 16px;
}

.hamburger__button {
	display: block;
	position: relative;
	width: 45px;
	height: 25px;
	background-color: transparent;
	border: 0
}

.hamburger__button span {
	position: absolute;
	transition: all .4s;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #fff;
	border-radius: 4px
}

.hamburger__button span:nth-of-type(1) {
	top: 0
}

.hamburger__button span:nth-of-type(2) {
	top: 50%;
	margin-top: -1px
}

.hamburger__button span:nth-of-type(3) {
	bottom: 0
}

.is-spMenuActive .hamburger__button span span:nth-of-type(1) {
	-webkit-transform: translateY(12px) rotate(-30deg);
	transform: translateY(12px) rotate(-30deg)
}

.is-spMenuActive .hamburger__button span span:nth-of-type(2) {
	opacity: 0
}

.is-spMenuActive .hamburger__button span span:nth-of-type(3) {
	-webkit-transform: translateY(-12px) rotate(30deg);
	transform: translateY(-12px) rotate(30deg)
}

.hamburger__img {
	display: block;
	width: 38px
}

/* =========================
	@media 1200px
========================= */
@media screen and (max-width:1200px) {
	.hamburger {
		width: 70px;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap
	}

	.hamburger__button {
		display: block;
		position: relative;
		width: 35px;
		height: 18px
	}

	.is-spMenuActive .hamburger__button span:nth-of-type(1) {
		-webkit-transform: translateY(8px) rotate(-40deg);
		transform: translateY(8px) rotate(-40deg)
	}

	.is-spMenuActive .hamburger__button span:nth-of-type(2) {
		opacity: 0
	}

	.is-spMenuActive .hamburger__button span:nth-of-type(3) {
		-webkit-transform: translateY(-8px) rotate(40deg);
		transform: translateY(-8px) rotate(40deg)
	}

	.hamburger__img {
		display: block;
		width: 35px
	}
}

/* =========================
	@media 768px
========================= */

@media screen and (max-width:768px) {
	.hamburger {
		width: 50px;
	}
	.hamburger__button {
		display: block;
		position: relative;
		width: 25px;
		height: 18px
	}

	.is-spMenuActive .hamburger__button span:nth-of-type(1) {
		-webkit-transform: translateY(8px) rotate(-40deg);
		transform: translateY(8px) rotate(-40deg)
	}

	.is-spMenuActive .hamburger__button span:nth-of-type(2) {
		opacity: 0
	}

	.is-spMenuActive .hamburger__button span:nth-of-type(3) {
		-webkit-transform: translateY(-8px) rotate(40deg);
		transform: translateY(-8px) rotate(40deg)
	}
}