style.css

@charset "utf-8";

*, *::before, *::after {
	box-sizing: border-box;
}

/* body {
	font-family: 'Questrial', sans-serif;
} */

/* ヒーローテキスト */
main {
	z-index: 1;
	height: 100vh;
	/* background-image: url("/images/HeroBackground.png"); */
	flex-direction: column;
	align-items: center;
	/* font-family: 'Montserrat', sans-serif; */
	font-family: 'Michroma', sans-serif;
	font-weight: 300;
}

.textAnimation {
	color: #fff;
	font-size: 3em;
	letter-spacing: .7em;
	display: flex;
	justify-content: center;
	height: 100vh;
}

.textAnimation:not(:first-of-type) {
	margin-top: 20px;
}

@keyframes showTextFromBottom {
	0% {
		transform: translateY(100vh);
	}
	100% {
		transform: translateY(50vh)
	}
}

.textAnimation span {
	display: inline-block;
}

.textAnimation span#tAnmLast {
	margin-right: -.7em;
}

.textAnimation > span {
	overflow: hidden;
}

.textAnimation > span > span {
	transform: translateY(50vh);
	animation: showTextFromBottom cubic-bezier(0.075, 0.82, 0.165, 1) 1s backwards;
}

/* .textAnimation span:nth-of-type(odd) {
	animation: showTextFromTop ease-out 3s backwards;
}

.textAnimation span:nth-of-type(even) {
	animation: showTextFromBottom ease-out 3s backwards;
} */