@charset "utf-8";
/* ==== motion ==== */

.hero_catch1,
.hero_catch2,
.hero_catch4 {
    opacity: 0;
    transition: opacity 0.5s linear;
}
.hero_catch3 {
    opacity: 0;
    transform: scale(2);
    transition: opacity 0.3s linear, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero_catch2 {
	transition-delay: 0.3s;	
}
.hero_catch3 {
	transition-delay: 1s;	
}


.hero_catch4 {
	transition-delay: 0.6s;	
}
@media(max-width: 959px) {
.hero_catch3 {
	transition-delay: 0.6s;	
}
.hero_catch4 {
	transition-delay: 0.8s;	
}
}

.mainStart .hero_catch1,
.mainStart .hero_catch2,
.mainStart .hero_catch4 {
    opacity: 1;
}
.mainStart .hero_catch3 {
    opacity: 1;
    transform: scale(1);
}

.cover_txt {
	display: inline-block;
	position: relative;	
}
.cover_txt::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #111;
	transform-origin: right center;
	will-change: transform;
	transform: scaleX(1);
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.coverActive .cover_txt::after {
    transform: scaleX(0);
}


.fadeObj,
.fadeObjEx {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 0.5s linear, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.fadeActive {
    opacity: 1;
    transform: scale(1);
}
.fadeActiveEx {
    opacity: 1;
    transform: scale(1);
}

.fadeInObj {
    opacity: 0;
    transition: opacity 0.5s linear;
}
.fadeInActive {
    opacity: 1;
}



.bounceObj {
    opacity: 0;
}
.bounceIn {
    animation: bounceIn 0.3s forwards;
	animation-delay: 0.5s;
}

.howto_flex .flow_item:nth-of-type(2) {
	transition-delay: 0.2s;	
}
.howto_flex .flow_item:nth-of-type(3) {
	transition-delay: 0.4s;	
}
.howto_flex .flow_item:nth-of-type(4) {
	transition-delay: 0.6s;	
}




@keyframes bounceIn {
    from,20%,40%,60%,80%,to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}


@keyframes figureMask {
0% {
	-webkit-mask-position: 0 800px;
	mask-position: 0px 800px;
}
100% {
	mask-position: 0px 0;
	-webkit-mask-position: 0px 0;
}
}

@keyframes figureMaskSP {
0% {
	-webkit-mask-position: 0 500px;
	mask-position: 0px 500px;
}
100% {
	mask-position: 0px 0;
	-webkit-mask-position: 0px 0;
}
}

@keyframes foldIn {
0% {
	opacity: 0;
	transform: rotateX(150deg) scaleY(0);
}
100% {
	opacity: 1;
	transform: rotateX(0deg) scaleY(1);
}
}