@charset "UTF-8";
/* ==================================================

[ PROJECT ] home

*/
.p-home-main {
	padding: 3rem 0 10rem 0;
}
.p-home-main img {
	display: block;
}
.p-home-main__outer {
	position: relative;
	margin: 0 auto;
	padding: 9rem 0 0 0;
	width: 80rem;
}
.p-home-main h1 {
	position: relative;
	margin-bottom: 8rem;
	width: 36.4rem;
}
.p-home-main h2 {
	position: relative;
	width: 51.2rem;
}
.p-home-main h2 em {
	display: block;
	margin-bottom: 2.5rem;
}
.p-home-main h2 span {
	display: block;
}
.p-home-main h2.sp {
	display: none;
}
.p-home-main__kv {
	position: absolute;
	top: 1rem;
	right: -16rem;
	width: 55rem;
	height: 100%;
}
.p-home-main__kv span {
	display: block;
}
.p-home-main__kv em {
	display: block;
	position: absolute;
	top: 0;
	left: -1rem;
}
.p-home-main__kv em img {
	opacity: 0.45;
}
.p-home-main__copy-en {
	margin-top: 5rem;
	width: 28.4rem;
}
.p-home-main__copy-en em,
.p-home-main__copy-en span {
	display: block;
}

.p-home-main__kv span img {
	transition: opacity 2.6s linear 0.4s, transform 2.6s ease 0.4s;
	transform: scale(0.84);
	opacity: 0;
}
.p-home-main__kv em {
	transition: opacity 1s linear 0.4s;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 40%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 40%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: auto 400%;
	mask-size: auto 400%;
}
.loaded .p-home-main__kv em {
	animation: main-anim 3s linear;
}
@keyframes main-anim {
  0% {
    -webkit-mask-position: 0 50%;
		mask-position: 0 50%;
  }
  100% {
    -webkit-mask-position: 0 0;
		mask-position: 0 0;
  }
}

@media screen and (min-width: 769px) {
	.p-home-main h2 em {
		transition: opacity 0.8s linear 1s, transform 0.8s ease 1s;
		transform: translateX(2rem);
		opacity: 0;
	}
}
@media screen and (max-width: 768px) {
	.p-home-main h2 em {
		transition: opacity 0.8s linear 1s, transform 0.8s ease 1s;
		transform: translateY(2rem);
		opacity: 0;
	}
}

.p-home-main__copy-en em {
	transition: opacity 0.8s linear 1s, transform 0.8s ease 1s;
	transform: translateX(2rem);
	opacity: 0;
}
.p-home-main h2 span,
.p-home-main__copy-en span {
	transition: opacity 0.8s linear 1.8s;
	opacity: 0;
}
.p-home-main h1 {
	transition: opacity 0.8s linear 2.4s, transform 0.8s ease 2.4s;
	transform: translateY(1rem);
	opacity: 0;
}

.loaded .p-home-main__kv span img {
	transform: scale(1);
	opacity: 1;
}
@media screen and (min-width: 769px) {
	.loaded .p-home-main h2 em {
		transform: translateX(0);
		opacity: 1;
	}
}
@media screen and (max-width: 768px) {
	.loaded .p-home-main h2 em {
		transform: translateY(0);
		opacity: 1;
	}
}
.loaded .p-home-main__copy-en em {
	transform: translateX(0);
	opacity: 1;
}
.loaded .p-home-main h2 span,
.loaded .p-home-main__copy-en span {
	opacity: 1;
}
.loaded .p-home-main__kv em {
	opacity: 1;
}
.loaded .p-home-main h1 {
	transform: translateY(0);
	opacity: 1;
}

@media screen and (max-width: 768px) {
	.p-home-main {
		padding: 0 0 5rem 0;
	}
	.p-home-main__outer {
		padding: 38rem 2rem 0 2rem;
		width: auto;
	}
	.p-home-main h1 {
		margin-bottom: 0;
		width: 100%;
	}
	.p-home-main h2 {
		position: absolute;
		top: 2rem;
		right: 2rem;
		flex-direction: row-reverse;
		width: auto;
	}
	.p-home-main h2 img {
		width: auto;
		height: 32.6rem;
	}
	.p-home-main h2 em {
		margin: 0 0 0 1.8rem;
	}
	.p-home-main h2.sp {
		display: flex;
	}
	.p-home-main h2.pc {
		display: none;
	}
	.p-home-main__kv {
		left: 0;
		right: -4rem;
		width: auto;
	}
	.p-home-main__kv span {
		position: absolute;
		top: -4.6rem;
		right: 0;
		width: 37rem;
	}
	.p-home-main__kv em {
		left: 0.6rem;
		width: 44rem;
	}
	.p-home-main__copy-en {
		position: absolute;
		top: 30rem;
		left: 2rem;
		margin: 0;
		width: 18.6rem;
	}
}