@charset "utf-8";
.fadeIn {
	opacity: 0;
	transition: .6s;
	-webkit-transition: .6s;
}
.fadeIn.run {
	opacity: 1;
}
.fadeIn_up {
	opacity: 0;
	transform: translate(0, 30px);
	-webkit-transform: translate(0, 30px);
	transition: .6s;
	-webkit-transition: .6s;
}
.fadeIn_up.run {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
}
.fadeIn_down {
	opacity: 0;
	transform: translate(0, -30px);
	-webkit-transform: translate(0, -30px);
	transition: .6s;
	-webkit-transition: .6s;
}
.fadeIn_down.run {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
}
.fadeIn_right {
	opacity: 0;
	transform: translate(30px, 0px);
	-webkit-transform: translate(30px, 0px);
	transition: .6s;
	-webkit-transition: .6s;
}
.fadeIn_right.run {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
}
.fadeIn_left {
	opacity: 0;
	transform: translate(-30px, 0px);
	-webkit-transform: translate(-30px, 0px);
	transition: .6s;
	-webkit-transition: .6s;
}
.fadeIn_left.run {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
}

/* その他アニメーション */
.fadeIn_up_m {
	margin-top: 30px;
	transition: fadeInUp 1s both;
	-webkit-transition: margin-top 1s, opacity 1s;
	opacity: 0;
}
.run.fadeIn_up_m {
	margin-top: 0px;
	opacity: 1;
}

.introduction__contents__item__image_01__wrap ,
.introduction__contents__item__image_02__wrap ,
.introduction__contents__item__image_03__wrap ,
.introduction__contents__item__image_04__wrap {
	position: relative;
}
.introduction__contents__item__image_01__wrap::before ,
.introduction__contents__item__image_02__wrap::before ,
.introduction__contents__item__image_03__wrap::before ,
.introduction__contents__item__image_04__wrap::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--color--red);
	-webkit-transition: background-color 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
	transition: background-color 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.bl.introduction__contents__item__image_01__wrap::before ,
.bl.introduction__contents__item__image_02__wrap::before ,
.bl.introduction__contents__item__image_03__wrap::before ,
.bl.introduction__contents__item__image_04__wrap::before {
	background: var(--color--black);
}
.run .introduction__contents__item__image_01__wrap::before,
.run .introduction__contents__item__image_02__wrap::before,
.run .introduction__contents__item__image_03__wrap::before,
.run .introduction__contents__item__image_04__wrap::before {
	animation: removeCover 0.5s linear both;
}

@keyframes removeCover {
	0% {
	  height: 100%;
	}
  
	100% {
	  height: 0;
	}
}

/* hero */
		.hero__steam_logo {
			opacity: 0;
			transition: 01s cubic-bezier(0.25, 0.1, 0.25, 1);
			transition-delay: 1s;
		}
		.loaded .hero__steam_logo {
			opacity: 1;
		}
		.hero__copy {
			opacity: 0;
			transition: 01s cubic-bezier(0.25, 0.1, 0.25, 1);
			transition-delay: 1s;
		}
		#ja .hero__copy ,
		#zh .hero__copy {
			margin-top: 1.5vw;
		}
		#en .hero__copy {
			margin-left: -1.5vw;
		}
		.loaded .hero__copy {
			opacity: 1;
		}
		#ja .loaded  .hero__copy ,
		#zh .loaded  .hero__copy {
			margin-top: 0vw;
		}
		#en .loaded  .hero__copy {
			margin-left: 0vw;
		}

/* PC ================================================== */
@media all and (min-width:992px){
/* hero */
		.hero__image {
			opacity: 0;
			transition: 01s cubic-bezier(0.25, 0.1, 0.25, 1);
		}
		.loaded .hero__image {
			opacity: 1;
		}
		.hero__logo {
			margin-top: 2vh;
			opacity: 0;
			transition: 01s cubic-bezier(0.25, 0.1, 0.25, 1);
			transition-delay: 1s;
		}
		.loaded .hero__logo {
			margin-top: 0vh;
			opacity: 1;
		}
		.hero__steam {
			margin-bottom: -2vh;
			opacity: 0;
			transition: opacity 01s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s, margin-bottom 01s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s, transform .4s;
		}
		.loaded .hero__steam {
			margin-bottom: 0vh;
			opacity: 1;
		}
		.hero__steam:hover {
			transform: scale(1.08);
		}
		.hero__lily_v_video {
			margin-bottom: -2vh;
			opacity: 0;
			transition: opacity 01s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s, margin-bottom 01s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s, transform .4s;
		}
		.loaded .hero__lily_v_video {
			margin-bottom: 0vh;
			opacity: 1;
			transform: scale(1);
		}
		.hero__lily_v_video:hover {
			transform: scale(1.08);
		}
}

/* Tablet ================================================== */
@media all and (max-width:991px){
/* hero */
		.hero__image {
			opacity: 0;
			transition: 01s cubic-bezier(0.25, 0.1, 0.25, 1);
		}
		.loaded .hero__image {
			opacity: 1;
		}
		.hero__logo {
			margin-bottom: -1.5vh;
			opacity: 0;
			transition: 01s cubic-bezier(0.25, 0.1, 0.25, 1);
			transition-delay: 1s;
		}
		.loaded .hero__logo {
			margin-bottom: 0vh;
			opacity: 1;
		}
		.hero__steam {
			margin-bottom: -2vh;
			opacity: 0;
			transition: opacity 01s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s, margin-bottom 01s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s, transform .4s;
		}
		.loaded .hero__steam {
			margin-bottom: 0vh;
			opacity: 1;
		}
		.hero__steam:hover {
			transform: translate(50%,50%) scale(1.08);
		}

/* introduction */
.introduction__contents__item__txt_01,
.introduction__contents__item__txt_02 {
	text-shadow:
	0px 0px 14px var(--color--red),
	-3px -3px 14px var(--color--red),
	-3px 3px 14px var(--color--red),
	3px -3px 14px var(--color--red),
	3px 3px 14px var(--color--red);
	-webkit-transition: text-shadow 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
	transition: text-shadow 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.bl.introduction__contents__item__txt_01,
.bl.introduction__contents__item__txt_02 {
	text-shadow:
	0px 0px 14px var(--color--black),
	-3px -3px 14px var(--color--black),
	-3px 3px 14px var(--color--black),
	3px -3px 14px var(--color--black),
	3px 3px 14px var(--color--black);
}
}

/* SP ================================================== */
@media all and (max-width:575px){
/* introduction */
.introduction__contents__item__txt_01,
.introduction__contents__item__txt_02 {
	text-shadow:
	0px 0px 10px var(--color--red),
	-3px -3px 10px var(--color--red),
	-3px 3px 10px var(--color--red),
	3px -3px 10px var(--color--red),
	3px 3px 10px var(--color--red);
	-webkit-transition: text-shadow 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
	transition: text-shadow 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.bl.introduction__contents__item__txt_01,
.bl.introduction__contents__item__txt_02 {
	text-shadow:
	0px 0px 10px var(--color--black),
	-3px -3px 10px var(--color--black),
	-3px 3px 10px var(--color--black),
	3px -3px 10px var(--color--black),
	3px 3px 10px var(--color--black);
}
}