@charset 'UTF-8';

/* サケカウanimation */
.gradation {
	max-width: 750px;
	background: linear-gradient(to right, rgba(255, 69, 0, 0.1) 0%, rgba(255, 69, 0, 1) 30%, rgba(255, 69, 0, 1) 70%, rgba(255, 69, 0, 0.1) 100%);
}

.animation-sake-sa {animation: sake-sa 6s infinite;}
@keyframes sake-sa {
	0% {transform: translateX(0px);}
	50% {transform: translateX(-120px);}
	100% {transform: translateX(-120px);}
}

.animation-sake-ke {animation: sake-ke 6s infinite;}
@keyframes sake-ke {
	0% {transform: translateX(0px);}
	50% {transform: translateX(-40px);}
	100% {transform: translateX(-40px);}
}
	
.animation-sake-ka {animation: sake-ka 6s infinite;}
@keyframes sake-ka{
	0% {transform: translateX(0px);}
	50% {transform: translateX(40px);}
	100% {transform: translateX(40px);}
}

.animation-sake-u{animation: sake-u 6s infinite;}
@keyframes sake-u{
	0% {transform: translateX(0px);}
	50% {transform: translateX(120px);}
	100% {transform: translateX(120px);}
}
/* /サケカウanimation */


/* グラフ */
/* プライス */
.price-bg {
	background-position: center center;
	background-repeat: no-repeat;
}

.price {
	color: white;
	& p {
		text-align: center;
		margin-bottom: -15px;
		font-size: 1.5rem;
	}
	& span {
		font-size: 	3rem;
		margin-top: -20px;
	}
}

.justify-end-center {justify-content: end;}
@media screen and (max-width: 575px) {
.justify-end-center {justify-content: center;}
}
/* プライス */

.anime-graph-01 {
	animation: graph-01 10s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
@keyframes graph-01 {
	0% {opacity: 1;}
	47% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 0;}
}
.anime-graph-01-a {
	animation: graph-01-a 10s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
@keyframes graph-01-a {
	0% {left: 0%; opacity: 1;}
	47% {left: 100%; opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 0;}
}

.anime-graph-02 {
	animation: graph-02 10s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
@keyframes graph-02 {
	0% {opacity: 0;}

	53% {opacity: 0;}
	54% {opacity: 1;}
	100% {opacity: 1;}
}

.anime-graph-02-a {
	animation: graph-02-a 10s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
@keyframes graph-02-a {
	0% {opacity: 0;}
	50% {opacity: 0;}
	51% {opacity: 1;  transform: translateY(0px);}
	100% {opacity: 1; transform: translateY(-130px);}
}

/* 目隠し */
.graph-mask {
	width: 550px;
	height: 130px;
	background-color: #f2af0d;
}
/* /グラフ */


/* ドライブスルーanimation */
/* 車部分 */
.anime-drive_through-b {
	animation: drive_through-b 5s infinite;
	animation-fill-mode: forwards;
} 
@keyframes drive_through-b  {
	0% {transform: translateX(0); opacity: 0;}
	65% {transform: translateX(60%); opacity: 1; }
	100% {transform: translateX(60%); opacity: 1; }	
}
/* いらっしゃいませ部分 */
.anime-drive_through-c {
	animation: drive_through-c 5s infinite;
	animation-fill-mode: forwards;
} 
@keyframes drive_through-c  {
	0% {opacity: 0;}
	65% {opacity: 0; }	
	100% {opacity: 1; }
}
/* 満足価格部分 */
.anime-drive_through-d {
	animation: drive_through-c 5s infinite;
	animation-fill-mode: forwards;
} 
@keyframes drive_through-d {
	0% {opacity: 0;}
	65% {opacity: 0; }	
	100% {opacity: 1; }
}
/* /ドライブスルーanimation */