@charset "utf-8";

	.loop_wrap {
		display: flex;
		overflow: hidden;
	}
	.loop_wrap span {
		white-space: nowrap;
	}
	.ani_loop1 {
		animation: ani-loop1 60s -30s linear infinite;
	}
	.ani_loop2 {
		animation: ani-loop2 60s linear infinite;
	}
	@keyframes ani-loop1 {
		from { translate: 100% 0; }
		to { translate: -100% 0; }
	}
	@keyframes ani-loop2 {
		from { translate: 0 0; }
		to { translate: -200% 0; }
	}

	.thermo_merit::before {
		animation: merit-parallax linear both;
		animation-timeline: scroll();
	}
	@keyframes merit-parallax {
		from {
			translate: 0 -20rem;
		}
		to {
			translate: 0 0;
		}
	}

	#odometer.action {
		animation: scale-l .6s 2.2s ease-out forwards;
	}
	@keyframes scale-l {
		0%, 100% { scale: 1 1; }
		60% { scale: 1.5 1.5; }
	}

	/* キラキラアニメーション */
	@keyframes shining1 {
		0% { opacity: 0; }
		50% { opacity: 1; }
		100% { opacity: 0; }
	}
	@keyframes shining2 {
		0% { opacity: 1; }
		50% { opacity: 0; }
		100% { opacity: 1; }
	}
	@keyframes shining3 {
		0% { opacity: 0; }
		60% { opacity: 1; }
		100% { opacity: 0; }
	}
	@keyframes shining4 {
		0% { opacity: 1; }
		40% { opacity: 0; }
		100% { opacity: 1; }
	}

	/* 痛みレベル_びよ～ん */
	.pain_level::after {
		scale: 0 1;
	}
	#pain-level1.ani_active::after,
	#pain-level2.ani_active::after {
		animation: bg-w .5s cubic-bezier(.17, .67, .83, .67) forwards;
	}
	#pain-level2.ani_active::after {
		animation-delay: .3s;
	}
	@keyframes bg-w {
		from { scale: 0 1 ; }
		to { scale: 1 1; }
	}

	/* 矢印 */
	.swipe_r::after {
		animation: arrow-r 1.6s linear infinite;
	}
	@keyframes arrow-r {
		0%, 10%, 50%, 90%, 100% {
			right: 0;
		}
		30%, 70% {
			right: -4rem;
		}
	}