@charset "utf-8";
/* ==========================================================================
  footerのモジュール
============================================================================= */
.l-safeArea {
	position: relative;
	z-index: 1;
}
.footer{
	background: var(--color-font);
	@media (max-width: 900px) {
		padding-top: max(var(--padding--6x-large),80px);
	}
	.l-container{
		max-width: 100%;
		position: relative;
		z-index: 2;
		@media (max-width: 900px) {
			display: block;
		}
	}
}

/* ==============================
// 上側
================================= */
.footer__top {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--gap--4x-large);
	border-bottom: 1px solid var(--color-font5);
	padding-bottom: var(--padding--6x-large);
	@media (max-width: 900px) {
		flex-direction: column;
		gap: max(var(--padding--x-large),40px);
		padding-bottom: max(var(--padding--x-large),40px);
	}
	div {
		height: auto;
	}
	.footer__top-left {
		width: calc(100% - 26% - var(--gap--4x-large));
		@media (max-width: 900px) {
			width: 100%;
			border-bottom: 1px solid var(--color-font5);
			padding-bottom: max(var(--padding--x-large),40px);
		}
	}
	.footer__nav {
		display: flex;
		justify-content: end;
		gap: calcClamp(38, 60);
		@media (max-width: 900px) {
			flex-direction: column;
			gap: 0;
		}
	}
	.footer__navList {
		display: flex;
		align-items: stretch;
		flex-wrap: wrap;
		gap: var(--gap--3x-large);
		@media (max-width: 900px) {
			gap: max(var(--gap--small),16px);
		}
	}
	.footer__navItem {
		height: auto;
		display: flex;
		@media (max-width: 900px) {
			width: 100%;
		}
	}
	.footer__navLink {
		display: flex;
		flex-direction: column;
		gap: var(--gap--small);
		line-height: 1;
		color: var(--color-bg);
		position: relative;
		&:hover {
			.footer__navText-jp {
				color: var(--color-bg);
			}
		}
	}
	.footer__navText {
		font-size: calcClamp(14, 24);
		transition:.3s;
		display: flex;
		flex-direction: column;
	}
	.footer__navText-en {
		font-size: max(var(--font-size--3x-large),40px);
		transition: color .3s ease;
	}
	.footer__navText-jp {
		color: var(--color-font3);
		font-size: max(var(--font-size--x-small),12px);
		transition:.3s;
	}
	.footer__top-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 26%;
		gap: max(var(--padding--x-large),40px);
		@media (max-width: 900px) {
			width: 80%;
		}
	}
	.footer__logoWrap {
		&:hover {
			.footer__logoText {
				color: var(--color-bg);
			}
		}
	}
	.footer__logoText {
		color: var(--color-font3);
		font-size: max(var(--font-size--x-small),12px);
		margin-bottom: max(var(--margin--x-small),8px);
		display: block;
		transition:.3s;
	}
	.footer__logo {
		width: 100%;
		transition:.3s;
		path {
			transition: fill .3s ease;
		}
	}
}

/* ==============================
// 下側
================================= */
.footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: max(var(--padding--x-large),40px) 0;
}
.footer__bottom-left {}
.footer__bottom-right {}
.footer__subLink {
	color: var(--color-font3);
	font-size: max(var(--font-size--x-small),10px);
	text-decoration: underline !important;
	&:hover {
		color: var(--color-bg);
	}
}
.footer__subText {
	color: var(--color-font3);
	font-size: max(var(--font-size--x-small),10px);
}
.footer__subCopy {
    color: var(--color-font3);
	font-size: max(var(--font-size--x-small),10px);
}