@charset "utf-8";
/* ==========================================================================
   スマホのハンバーガーボタン押下メニューのモジュール
============================================================================= */
.spMenu{
	position: fixed;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	top:0;
	left:0;
	width: 100%;
	background-color: var(--color-font);
	display: none;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
    overflow-x: hidden;
}
.spMenu .header__logo {
	&:hover {
		opacity: 1;
	}
	img{
		display: block;
		width: 180px;
		height: auto;
	}
}
.spMenuArea {
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	a{
		text-decoration: none;
	}
	.l-container{
		padding-top: 8vh;
		padding-bottom: 2.5rem;
		max-width: 100%;
		position: relative;
		z-index: 2;
		@media (max-width: 1300px) {
		padding-top: calc(80px + 8px);
		}
	}
}
.spMenu__header {
	height:var(--header--heightPc);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	z-index: 10;
	@media (max-width: 1300px) {
		height:var(--header--heightSp);
	}
	.l-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: calc(100% - (30px*2));
		padding-top: 0;
		padding-bottom: 0;
		@media (max-width: 900px) {
			max-width: calc(100% - (15px*2));
		}
	}
	.header__logo {
		svg {
			display: none;
			@media (max-width: 768px){
				display: block;
			}
		}
	}
}

.spMenu .footer__top-left {
	padding-top: max(var(--padding--x-large), 40px);
}

.is-spMenuActive{
	overflow: hidden;
	width: 100vw;
	.hamburger {
		border: 2px solid #fff;
		background-color: transparent;
	}
	.hamburgerArea span {
		background-color: #fff;
	}
	.hamburger__text span {
		color: #fff;
	}
	.hamburger .hamburger__text-menu {
		opacity: 0;
	}
	.hamburger .hamburger__text-clouse {
		opacity: 1;
	}
}