/* ================================================== */
/* ==================== Animation ==================== */
/* ================================================== */
:root {
	--ts_set05: all 0.5s ease-out 0s;
	--ts_set10: all 1s ease-out 0s;

	--active-ani_x: move_x ease-out both ;
	--active-ani_y: move_y ease-out both ;
	--active-ani_-x: move_-x ease-out both ;
	--active-ani_-y: move_-y ease-out both ;
}
.active {
	opacity: 1 !important;
	transform: unset;
}
@keyframes move_x{
	0%{
		opacity: 0;
		transform:translateX(5em);
	} 100% {
		opacity: 1;
		transform:translateX(0);}
}
@keyframes move_-x{
	0%{
		opacity: 0;
		transform:translateX(-5rem);
	} 100% {
		opacity: 1;
		transform:translateX(0);}
}
@keyframes move_y{
	0%{
		opacity: 0;
		transform:translateY(5rem);
	} 100% {
		opacity: 1;
		transform:translateY(0);}
}
@keyframes move_-y{
	0%{
		opacity: 0;
		transform:translateY(-5rem);
	} 100% {
		opacity: 1;
		transform:translateY(0);}
}
@keyframes scale_y{
	0%{
		opacity: 0;
		transform:scale(0.2);
		transform-origin: bottom center;
	} 80% {
		opacity: 1;
		transform:scale(1.1);}
	100%{
		transform:scale(1);}
}
@keyframes scale_-y{
	0%{
		opacity: 0;
		transform:scale(0.2);
		transform-origin: top center;
	} 80% {
		opacity: 1;
		transform:scale(1.1);}
	100%{
		transform:scale(1);}
}


.active {
	animation: var(--active-ani);
}

h1 {
	animation: move_y 1s ease-out both 0s;
}
h1 picture {
	animation: move_-x 1s ease-out both 2s;
}
.deco::before {
	animation: move_-y 1s ease-out both 1s;
}
.deco::after {
	animation: move_y 1s ease-out both 1.5s;
}
#top1 {
	animation: top1 1s ease-out both 2.5s;
}
#top2 {
	animation: top2 1s ease-out both 3s;
}
#top3 {
	animation: top3 1s ease-out both 1.8s;
}
#top4 {
	animation: top4 1s ease-out both 2s;
}
#top_ring {
	animation: scale_-y 1s ease-out both 1.5s;
}
#top_num {
	animation: move_-x 1s ease-out both 1.5s;
}

@keyframes top1{
	0%{
		opacity: 0;
		transform:scale(0);
		transform-origin: center;}
	80%{
		opacity: 1;
		transform:scale(1.2);}
	100%{
		transform:scale(1);}
}
@keyframes top2{
	0%{
		opacity: 0;
		translate: 10rem 0;
		rotate: 5deg;
		scale: 1;
	} 20% {
		opacity: 1;
		rotate: -5deg;
	} 40% {
		rotate: 5deg;
	} 60% {
		rotate: -5deg;
	} 80% {
		rotate: 5deg;
	} 100% {
		transform: 0 0;
	}
}
@keyframes top3{
	0%{
		translate: -25% -20%;
		opacity: 0;
	} 100% {
		translate: 0 0;
		opacity: 1;
	}
}
@keyframes top4{
	0%{
		opacity: 0;
	} 100% {
		opacity: 1;
	}
}


#point h3,
#point p,
#countermeasure h2,
#countermeasure h4,
#countermeasure h3,
#countermeasure ul li,
#countermeasure p,
#confirmation h2,
#confirmation p,
#confirmation div,
#confirmation a,
#others h2,
#others p,
.btn2
{
	animation: var(--active-ani_x);
}
#point li img:first-of-type {
	animation: var(--active-ani_-x);
}

#point li,
.btn,
.yt_box
{
	animation: var(--active-ani_y);
}
.yt_title {
	animation: var(--active-ani_y);
	animation-name: scale_y;
}

/*@supports (animation-timeline: view(block)) {*/

#point h3,
#point li,
#point p,
#countermeasure h2,
#countermeasure h4,
#countermeasure h3,
#countermeasure ul li,
#countermeasure p,
#confirmation h2,
#confirmation p,
#confirmation div,
#confirmation a,
#others h2,
#others p,
.btn,
.btn2,
.yt_title,
.yt_box
{
	animation-timeline: view(block);
	animation-range: entry 0% cover 25%;
}

#point li:nth-of-type(1) img:first-of-type {
	animation-timeline: view(block);
	animation-range: entry 0% cover 25%;
}
#point li:nth-of-type(2) ,
#point li:nth-of-type(2) img:first-of-type {
	animation-timeline: view(block);
	animation-range: entry 5% cover 30%;
}
#point li:nth-of-type(3) ,
#point li:nth-of-type(3) img:first-of-type {
	animation-timeline: view(block);
	animation-range: entry 10% cover 35%;
}

#others .btn2 {
	animation-timeline: view(block);
	animation-range: entry 0% cover 15%;
}

/*}*/

/* ================================================== */
/* ==================== 900px以上 ==================== */
/* ================================================== */
@media (min-width: 900px) {

.deco::before {
	animation: move_-x 1s ease-out both 1s;
}
.deco::after {
	animation: move_x 1s ease-out both 1.5s;
}
#top_num {
	animation: move_y 1s ease-out both 1s;
}

}

/* ================================================== */
/* ==================== 1300px以上 ==================== */
/* ================================================== */
@media (min-width: 1300px) {

@keyframes to_top1{
	0%{
		rotate: 0deg;
	} 100% {
		rotate: 360deg;
	}
}
#to_top::before {
	animation: to_top1 20s linear infinite 0s;
}

@keyframes to_top2{
	0%{
		rotate: -3deg;
	} 100% {
		rotate: 3deg;
	}
}
#to_top::after {
	animation: to_top2 2s ease-in-out infinite alternate ;
	transform-origin: top center;
}

#to_top.end::after {
	background: url("../img/to_top2.png") no-repeat;
	background-position: center;

	animation: unset ;
}


}