@charset "UTF-8";

/*
	common
-----------------------------------------------------------------------------------------------*/
.anm {
	opacity: 0;
}
/* ふわっと */
.fadeIn.anmStart{
	animation: fadeIn 1s ease .1s forwards;
}
@keyframes fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/* 下から */
.fadeUp.anmStart{
	animation: fadeUp .1s ease .1s forwards;
}
@keyframes fadeUp{
	from{
		opacity: 0;
		transform: translateY(20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 上から */
.fadeDown.anmStart{
	animation: fadeDown .1s ease .1s forwards;
}
@keyframes fadeDown{
	from{
		opacity: 0;
		transform: translateY(-20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 右から */
.fadeRight.anmStart{
	animation: fadeRight .1s ease .1s forwards;
}
@keyframes fadeRight{
	from{
		opacity: 0;
		transform: translateX(-20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/* 左から */
.fadeLeft.anmStart{
	animation: fadeLeft .1s ease .1s forwards;
}
@keyframes fadeLeft{
	from{
		opacity: 0;
		transform: translateX(20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/* 回転 */
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
/* blur */
@keyframes blur {
	0% {filter: blur(0px);}
	100% {filter: blur(8px);}
}
/* scale */
@keyframes scale {
	0% {transform: scale(0);}
	5% {transform: scale(0.5);}
	10% {transform: scale(0.9);}
	15% {transform: scale(1.08);}
	20% {transform: scale(1.1);}
	30% {transform: scale(1.05);}
	50% {transform: scale(1.01);}
	70% {transform: scale(1.02);}
	100% {transform: scale(1);}
  }


/*
	kv
-----------------------------------------------------------------------------------------------*/
.kv__ico,
.kv__img{
	transform: scale(0);
}
.kv__ico.active{
	animation: scale .1s ease-in-out 1s forwards;
}
.kv__img.active{
	animation: scale .1s ease-in-out 1s forwards;
}
/* delay */
.kv__catchImg01.anmStart{
	animation-delay: 0.1s;
}
.kv__catchImg02.anmStart{
	animation-delay: 0.1s;
}
.kv__list li.anmStart{
	animation-delay: 0.1s;
}
.kv__btmArea .cta__btnArea li.anmStart{
	animation-delay: 0.1s;
}

/*
	measures
-----------------------------------------------------------------------------------------------*/
.measures__img{
	transform: scale(0);
}
.measures__img.active{
	animation: scale .1s ease-in-out .1s forwards;
}

/*
	risk
-----------------------------------------------------------------------------------------------*/
[class^="risk__listItm"]{
	transform: scale(0);
}
[class^="risk__listItm"].active{
	animation: scale .1s ease-in-out .1s forwards;
}


/*
	prevent
-----------------------------------------------------------------------------------------------*/
.prevent__item{
	transform: scale(0);
}
.prevent__item.active{
	animation: scale .1s ease-in-out .1s forwards;
}

/*
	solution
-----------------------------------------------------------------------------------------------*/
.solution__img{
	transform: scale(0);
}
.solution__img.active{
	animation: scale .1s ease-in-out .1s forwards;
}

/*
	spec
-----------------------------------------------------------------------------------------------*/
.specEtc__listImg img{
	transform: scale(0);
}
.specEtc__listImg.active img{
	animation: scale .1s ease-in-out .1s forwards;
}

/*
	faq
-----------------------------------------------------------------------------------------------*/
.faq__item{
	transform: scale(0);
}
.faq__item.active{
	animation: scale .1s ease-in-out .1s forwards;
}

/*
	CTA
-----------------------------------------------------------------------------------------------*/
.cta__item{
	transform: scale(0);
}
.cta__item.active{
	animation: scale .1s ease-in-out .1s forwards;
}

/*
	price
-----------------------------------------------------------------------------------------------*/
.price__ico{
	transform: scale(0);
}
.price__ico.active{
	animation: scale .1s ease-in-out .1s forwards;
}

/*
	flow
-----------------------------------------------------------------------------------------------*/
.flow__img{
	transform: scale(0);
}
.flow__img.active{
	animation: scale .1s ease-in-out .1s forwards;
}

/*
	about
-----------------------------------------------------------------------------------------------*/
#about.active::before{
	content: "";
	width: 102%;
	height: 100%;
	background: url("../images/bg_about_pc.png") no-repeat center center / cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
}
@media screen and (max-width:812px){
	#about.active::before{
		background: url("../images/bg_about_sp.png") no-repeat center center / cover;
	}
}