/* ========================================
   KVアニメーション
======================================== */
/*オープニングアニメーション*/
:root {
	--move: 8.6rem;
}

@media (max-width: 768px) {
	:root {
		--move: 5.8rem;
	}
}
/*ロゴマーク表示*/
.logo_mark_wrap {
	opacity: 0;
}
.logo_mark_wrap.animated {
	animation: 1.6s logoMarkFadeIn ease forwards;
}
.logo_mark {
	width: 10rem;
}

@keyframes logoMarkFadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*ロゴテキスト表示*/
.logo_text_wrap {
	overflow: hidden;
	position: relative;
	margin-top: 10px;
}

.logo_text_wrap::before {
	background: #fff;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0),
		rgb(255, 255, 255) 20%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	left: -24%;
	z-index: 1;
}
.logo_text_wrap.animated::before {
	animation: 1.1s ShowLogoText cubic-bezier(0.82, 0.03, 0.39, 0.93) forwards;
	animation: 1.1s ShowLogoText ease-in-out forwards;
}

.logo_text {
	width: 19rem;
}

@keyframes ShowLogoText {
	100% {
		transform: translateX(100%);
		/* transform: translateX(var(--move) - 24%); */
	}
}
/*ロゴをテキスト表示とともに左にずらす*/
.loader_container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 3rem;
	gap: 1rem;
	transform: translateX(var(--move));
}
.loader_container.animated {
	animation: 1.1s loaderSlideLeft ease-in-out forwards;
}

@keyframes loaderSlideLeft {
	from {
		transform: translateX(var(--move));
	}
	to {
		transform: translateX(0);
	}
}
/*オープニング背景非表示*/
.loader {
	width: 100%;
	height: 100lvh;
	display: grid;
	place-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	background-color: #fff;
}
.loader.animated {
	animation: 1.2s loaderAnimation forwards ease-in-out;
}
@keyframes loaderAnimation {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*画像がふわっとしたから出てくるアニメーション*/
.kv_images_item_left,
.kv_images_item_right {
	transform: translateY(100%);
}
.kv_images_item_left.animated,
.kv_images_item_right.animated {
	/* animation: slideInFromLower 1.2s forwards cubic-bezier(0.35, 0.22, 0, 0.99);
	animation: slideInFromLower 1.2s forwards cubic-bezier(0.57, 0.14, 0, 0.99); */
	animation: 1.5s slideInFromLower forwards
		cubic-bezier(0.59, -0.19, 0.06, 0.99);
}

.kv_images_item.left img {
	transform-origin: top 80%;
}

.kv_images_item.right img {
	transform-origin: top 20%;
	animation-delay: 0.1s;
}

@keyframes slideInFromLower {
	from {
		transform: translateY(100%) scale(0.6);
	}
	to {
		transform: translateY(0) scale(1);
	}
}

/*テキストが外側からふわっと表示されるアニメーション*/
.kv_title_right {
	opacity: 0;
}
.kv_title_right.animated {
	animation: 1s fadeInFromLeft forwards cubic-bezier(0.57, 0.14, 0, 0.99);
}
.kv_title_left {
	opacity: 0;
}
.kv_title_left.animated {
	animation: 1s fadeInFromRight forwards cubic-bezier(0.57, 0.14, 0, 0.99);
}

@keyframes fadeInFromRight {
	from {
		transform: translateX(24%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fadeInFromLeft {
	from {
		transform: translateX(-24%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/*上からヘッダーがふわっと出てくるアニメーション*/
.header_wrap {
	opacity: 0;
}
.header_wrap.animated {
	animation: 1.5s fadeInFromTop forwards cubic-bezier(0.57, 0.14, 0, 0.99);
}
@keyframes fadeInFromTop {
	from {
		transform: translateY(-20%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/*下からフローティングテキストがふわっと表示するアニメーション*/
.kv_doco .flow_text {
	opacity: 0;
}
.kv_doco .flow_text.animated {
	animation: 1.5s fadeInFromBottom forwards cubic-bezier(0.57, 0.14, 0, 0.99);
}
@keyframes fadeInFromBottom {
	from {
		transform: translateY(30%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@media screen and (max-width: 767px) {
	.logo_mark {
		width: 6.5rem;
	}
	.logo_text {
		width: 12.37rem;
	}
}

/* ========================================
   共通アニメーション
======================================== */
.fadeIn {
	opacity: 0;
	animation: 1.6s fadeIn var(--delay, 0s) forwards
		cubic-bezier(0.39, 0.07, 0.47, 0.98);
	animation-play-state: paused;
}
.fadeIn.show {
	/* showクラスが付いたときにアニメーションが開始される */
	animation-play-state: running;
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.fadeInUp {
	opacity: 0;
	animation: 1s fadeInUp var(--delay, 0s) forwards
		cubic-bezier(0.57, 0.14, 0, 0.99);
	animation-play-state: paused;
	animation: 1s fadeInUp var(--delay, 0s) forwards
		cubic-bezier(0.53, 0, 0.27, 1.03);
	animation-play-state: paused;
}
.fadeInUp.show {
	/* showクラスが付いたときにアニメーションが開始される */
	animation-play-state: running;
}
@keyframes fadeInUp {
	from {
		transform: translateY(2.2rem);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.fadeInRight {
	opacity: 0;
	animation: 1s fadeInRight var(--delay, 0s) forwards
		cubic-bezier(0.57, 0.14, 0, 0.99);
	animation-play-state: paused;
}
.fadeInRight.show {
	/* showクラスが付いたときにアニメーションが開始される */
	animation-play-state: running;
}
@keyframes fadeInRight {
	from {
		transform: translateX(-2rem);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.fadeInLeft {
	opacity: 0;
	animation: 1s fadeInLeft var(--delay, 0s) forwards
		cubic-bezier(0.57, 0.14, 0, 0.99);
	animation-play-state: paused;
}
.fadeInLeft.show {
	/* showクラスが付いたときにアニメーションが開始される */
	animation-play-state: running;
}
@keyframes fadeInLeft {
	from {
		transform: translateX(2rem);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.scroll_guide {
	animation: scrollGuide 3s ease infinite;
}

@keyframes scrollGuide {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}

/*========================================
    GSAPアニメーション
========================================*/
.concept_head_wrapper {
	width: 100%;
	height: 350vh;
	position: relative;
	/* display: flex;
	align-items: flex-end; */
}

.concept_head_container {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* リサイズ時の安定性のため */
	will-change: transform;
}

.concept_head_mask {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	display: grid;
	place-content: center;
}

.concept_head_img {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	object-fit: cover;
	/* パフォーマンス向上 */
	will-change: transform;
}

.overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	z-index: 1;
}

.concept_head {
	margin: auto;
	position: relative;
	z-index: 10;
	opacity: 0;
	width: fit-content;
	height: fit-content;
	/* テキストの初期位置 */
	transform: translateY(0);
}

@media screen and (max-width: 767px) {
	.concept_head_mask {
		aspect-ratio: 2 / 3;
	}
	.concept_head_mask img {
		aspect-ratio: 3 / 2;
	}
}