@charset "UTF-8";

.data {
	width:96%;
	max-width:1030px;
	margin:0 auto 120px;
	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);
	/*aspect-ratio: 5/7;*/
	border-top:10px solid #1570d9;
	border-radius:10px;
	background:#fff;
	text-align:center;
	box-sizing:border-box;
	padding:30px 0 50px;
}
.data_item_front h5 {
	font-size:27px;
	margin-bottom:20px;
}
.data_item_front img {
	width:80%;
	max-width:220px;
	margin-bottom:10px;
}
.data_item_front p {
	font-size:21px;
	font-weight:bold;
	line-height:1.4em;
}
.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: cover;
	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 screen and (max-width:1024px) {
	.data_item_front h5 {
		font-size:23px;
	}
	.data_item_front p {
		font-size:19px;
	}
	.data_item_front {
		padding:3vw 0 4vw;
	}
	.data_item_front h5 {
		margin-bottom:2vw;
	}
	.data_item_front img {
		margin-bottom:1vw;
	}
}
@media (max-width: 810px) {
	.data_item_front h5 {
		font-size:21px;
	}
	.data_item_front p {
		font-size:17px;
	}
}
@media (max-width: 768px) {
	.data {
		margin-bottom:50px;
		grid-template-columns: repeat(2, 3fr);
		max-width:660px;
		gap:20px;
	}
}
@media (max-width: 540px) {
	.data {
		gap:2vw;
	}
}
@media (max-width: 480px) {
	.data_item_front h5 {
		font-size:4vw;
	}
	.data_item_front p {
		font-size:3.5vw;
	}
	.data_item_front {
		border-top:7px solid #1570d9;
		border-radius:7px;
	}
}
/*@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%;
	}
}