@charset "UTF-8";
/* CSS Document */
#smile {
	position:relative;
	width: 100%;
}
#smile .cont01,#smile .cont02{
  position: relative;
}

#smile .cont01 .cont01_01{
	position: absolute;
	top: 7%;
	left:0;
	right: 0;
	margin: auto;
	width: 86%;
	transition: .6s;
	z-index: 1;
}
#smile .cont01 .cont01_01.trigger{
	transform: scale(0);
	opacity: 0;
}
#smile .cont01 .cont01_01.trigger.move{
	transform: scale(1);
	opacity: 1;
}
#smile .cont01 .cont01_02{
	position: absolute;
	top: 17%;
	left:0;
	right: 0;
	margin: auto;
	width: 85%;
	transition: 3.2s;
	animation-timing-function: cubic-bezier(1, .5, .5, .3);
	z-index: 1;
}
#smile .cont01 .cont01_02.trigger{
	clip-path: inset(0% 0% 100% 0%);
}
#smile .cont01 .cont01_02.trigger.move{
	clip-path: inset(0%);
}
#smile .cont01 .cont01_03{
	position: absolute;
	top: 54%;
	left:2%;
	margin: auto;
	width: 25%;
	transition: .6s;
	animation-timing-function:ease-in-out;
	z-index: 2;
}
#smile .cont01 .cont01_03.trigger{
	transform: scale(0);
}
#smile .cont01 .cont01_03.trigger.move{
	transform: scale(1);
}
#smile .cont01 .cont01_04{
	position: absolute;
	right: 2%;
	bottom: 4%;
	margin: auto;
	width: 28%;
	transition: .6s;
	animation-timing-function:ease-in-out;
	z-index: 2;
}
#smile .cont01 .cont01_04.trigger{
	transform: scale(0);
}
#smile .cont01 .cont01_04.trigger.move{
	transform: scale(1);
}