header {
	position: relative;
	padding-top: 0;
	padding-bottom: 0;
	.logo img {
		max-width: 200px;
	}
	.sp_menu {
		display: block;
		img {
			width: 3em;
			height: 3em;
		}
	}
	.header_menu {
		position: absolute;
		top: 100%;
		right: 0;
		background-color: #fff;
		flex-direction: column;
		gap: 0;
		align-items: stretch;
		transform: scaleY(0);
		transform-origin: top center;
		transition-property: transform;
		transition-duration: 0.3s;
		&.open {
			transform: scaleY(1);
		}
		.menu-item {
			&.contact {
				font-size: calc(18 / var(--root-font-size) * 1rem);
				a {
					padding: 0.5em 2em;
				}
			}
			&:not(.contact) {
				font-size: calc(20 / var(--root-font-size) * 1rem);
				a {
					border-top: 1px solid #ccc;
					padding: 0.5em 2em;
					display: block;
					text-align: center;
				}
			}
		}
	}
}

footer {
	&:after {
		height: 100%;
		background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,1));
	}
	.container {
		flex-direction: column;
	}
	.footer_menu {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-flow: row;
		gap: 1em;
	}
}