@charset "UTF-8";
/**
 * welcome-recpo.css
 * 「レクぽ」へようこそ！
 */
/** fade in welcom recpo!. */
@keyframes welcom-recpo {
	0.0% {
		opacity: 0;
	}
	100% {
		opacity: 1.0;
	}
}
/** moving welcom recpo!. */
@keyframes welcom-recpo-title {
	0.0% {
		top: 5.0em;
	}
	50.0% {
		top: 5.0em;
	}
	100% {
		top: 0;
	}
}
/** fade in welcom recpo!. */
@keyframes opacity {
	0.0% {
		opacity: 0;
	}
	100% {
		opacity: 1.0;
	}
}
/** floating down arrow animation. */
@keyframes fluffy {
	0.0% {
		transform: translateY(0);
	}
	50.0% {
		transform: translateY(24.0px);
	}
	100% {
		transform: translateY(0);
	}
}

html, body {
	font-size: 14.0px;
}
@media (min-width: 321.0px) {
	html, body {
		font-size: 16.0px;
	}
}
body {
	left: 0;
	max-width: 768.0px;
	overflow-y: scroll;
	position: fixed;
	right: 0;
}

/** for inline svg image. */
.image-inline {
	display: inline-block;
	top: -0.15em;
	position: relative;
	vertical-align: bottom;
}

/** floating down arrow. */
#fluffy {
	animation:
		opacity 1.0s ease 4.0s forwards,
		fluffy 2.0s ease 4.0s infinite;
	display: inline-block;
	opacity: 0;
}

/** welcome recpo!. */
#welcome-recpo {
	line-height: 1.6;
	min-height: 54.0vh;
	position: relative;
}
#welcome-recpo h2 {
	animation:
		opacity 1.0s ease 1.0s forwards,
		welcom-recpo-title 2.0s ease-in 2.0s forwards;
	font-size: 24.0px;
	font-weight: bold;
	margin: 0 0 1.0em 0;
	opacity: 0;
	position: relative;
	text-align: center;
	top: 5.0em;
}
#welcome-recpo > p {
	animation: welcom-recpo 3.0s ease 3.2s forwards;
	opacity: 0;
}
@media (min-width: 321.0px) {
	#welcome-recpo {
		min-height: 52.0vh;
	}
	#welcome-recpo h2 {
		font-size: 32.0px;
		margin: 1.0em 0 1.0em 0;
	}
}
@media (min-width: 768.0px) {
	#welcome-recpo {
		min-height: 52.0vh;
	}
	#welcome-recpo h2 {
		font-size: 52.0px;
	}
}
#welcome-recpo .image-inline {
	height: calc(1.0em * 1.6);
	margin-right: 0.25em;
}

/** five useful reasons. */
#five-reasons {
	font-size: 12.0px;
	overflow-x: hidden;
	position: relative;
}
#five-reasons h2 {
	font-size: 18.0px;
	margin: 0 0 3.0em 0;
	opacity: 0.0;
	text-align: center;
}
#five-reasons h2.active {
	opacity: 1 !important;
	transition: opacity 1.0s ease 0.4s;
}
@media (min-width: 321.0px) {
	#five-reasons {
		font-size: 14.0px;
	}
	#five-reasons h2 {
		font-size: 24.0px;
	}
}
@media (min-width: 768.0px) {
	#five-reasons {
		font-size: 16.0px;
	}
	#five-reasons h2 {
		font-size: 40.0px;
	}
}
#five-reasons h3 {
	font-size: 16.0px;
}
@media (min-width: 321.0px) {
	#five-reasons h3 {
		font-size: 24.0px;
	}
}
@media (min-width: 768.0px) {
	#five-reasons h3 {
		font-size: 28.0px;
	}
}

#five-reasons .reason {
	margin-bottom: 32.0px;
	position: relative;
}
#five-reasons .reason.active {
	left: 0 !important;
	transition: left 1.0s ease 0.0s;
}
#five-reasons .reason:nth-of-type(odd) {
	left: -110.0%;
}
#five-reasons .reason:nth-of-type(even) {
	left: 110.0%;
}

/** Let's start Recpo. */
#lets-start-recpo {
	opacity: 0;
}
#lets-start-recpo.active {
	opacity: 1;
	transition: opacity 2.0s ease 0.4s;
}
#lets-start-recpo .btn {
	font-size: 20.0px;
}
#lets-start-recpo .image-inline {
	height: 1.6em;
}
@media (min-width: 321.0px) {
	#lets-start-recpo .h2 {
		font-size: 28.0px;
	}
	#lets-start-recpo .btn {
		font-size: 24.0px;
	}
}
@media (min-width: 768.0px) {
	#lets-start-recpo .h2 {
		font-size: 48.0px;
	}
	#lets-start-recpo .btn {
		font-size: 32.0px;
	}
}