@charset "UTF-8";

.data {
	width:96%;
	max-width:1030px;
	margin:0 auto 70px;
	display: grid;
	grid-template-columns: repeat(3, 2fr);
	gap: 15px;
}

.data_item {
	width:330px;
	position: relative;
}
.data_item img {
	max-width:100%;
}
.data_item > div {
	transition: transform 0.3s;

	backface-visibility: hidden;
}

.data_item_front {
	transform: perspective(2000px) rotateY(180deg);
}

.data_item.-play .data_item_front {
	transform: perspective(2000px) rotateY(360deg);
}

.data_item_back {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background-image: url(../item/data_00.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transform: perspective(2000px) rotateY(0deg);
}

/*.data_item_back::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 80px;
	left: 50%;
	width: 160px;
	height: 160px;
	margin-left: -80px;
	background-image: url(../item/data_00.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.data_item_back.-rotate::after {
	transform: rotate(90deg);
}*/

.data_item.-play .data_item_back {
	transform: perspective(2000px) rotateY(180deg);
}
@media screen and (max-width:1100px) {
	.data {
		gap:2%;
	}
	.data_item {
		width:100%;
	}
}
@media (max-width: 768px) {
	.data {
		margin-bottom:50px;
	}
}
@media (max-width: 640px) {
	.data {
		grid-template-columns: repeat(2, 3fr);
		gap: 14px;
	}
}
@media (max-width: 480px) {
	.data {
		margin-bottom:35px;
	}
}
/*@media screen and (max-width:640px) {
	.data {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.data_item {
	}

	.data_item > div {
	}

	.data_item_front {
	}

	.data_item.-play .data_item_front {
	}

	.data_item_back {
	}

	.data_item_back::after {
		bottom: 40px;
		width: 80px;
		height: 80px;
		margin-left: -40px;
	}

	.data_item_back.-rotate::after {
	}

	.data_item.-play .data_item_back {
	}
}*/














@keyframes fuwafuwa {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: rotateX(12deg) rotateZ(12deg) rotateY(-7deg) translateY(-2%);
	}
}

@keyframes bgloop {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 1160px 0;
	}
}

@keyframes wave-blue {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: 1054px;
	}
}

@keyframes wave-brown {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: -1317px;
	}
}

@keyframes wave-green {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: -996px;
	}
}

@keyframes wave-orange {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: -1194px;
	}
}

@keyframes wave-red {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: 1356px;
	}
}

@keyframes wave-yellow {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: -1336px;
	}
}

@keyframes hero_bg {
	0% {
		background-position: 0 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}