@charset "UTF-8";

/* ------------------------------------
  美肌堂 診断LP
  MV スプライトアニメーション
  Date: 2021-08-26
------------------------------------ */

.sec_hero_anim {
	display: block;
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.sec_hero_anim .hero_tit {
	display: none;
}

.sec_hero_anim .hero_animation {
	z-index: 1;
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-top: 167.1875%;
}

.sec_hero_anim .hero_animation .sprite_anim {
	background-size: auto 100%;
	background-position: left top;
	background-repeat: no-repeat;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.sec_hero_anim .cv_wrap {
	z-index: 3;
	position: absolute;
	left: 0;
	bottom: 70px;
	width: 100%;
	text-align: center;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

.sec_hero_anim .cv_btn_fuki {
	z-index: 10;
	position: relative;
	-webkit-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

.sec_hero_anim .cv_btn_fuki.show {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.sec_hero_anim .cv_btn {
	z-index: 20;
	position: relative;
}

@media screen and (min-width: 641px), print {

.sec_hero_anim .cv_btn_fuki img {
	height: 8.07692vh;
	width: auto;
	margin: 0 auto;
}

.sec_hero_anim .cv_btn img {
	height: 12.30769vh;
	width: auto;
}

}

@media screen and (max-width: 640px) {

.sec_hero_anim .cv_wrap {
	bottom: 5vw;
}

}