@charset "utf-8";
/* CSS Document */
.shop_gallery_list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0px;
	margin-bottom: -2%;
}
.shop_gallery_list li {
	/* opacity: 0; */
	position: relative;
	box-shadow: 0 0 5px 1px #e2e2e2;
	padding: 7px;
	background-color: #FFFFFF;
	margin: 0 2% 2% 0px;
	width: 23.5%;
}
.shop_gallery_list li:nth-of-type(4n) {
	margin-right: 0;
}
.shop_gallery_list li img{
	transition: all 300ms 0s ease;
	display: block;
	width: 100%;
	height: 100%;
	max-height: 168px;
	object-fit: cover;
}
.shop_gallery_list li:hover {
	z-index: 10;
	position: relative;
	transform:scale(1.2,1.2);
}
.shop_gallery_list li.bounce-in-top{
	opacity: 1;
}
.page_nation_nav {
	margin-top: 40px;
}
@media screen and (max-width: 760px) {
	.shop_gallery_list li img{
		max-height: 19vw;
		height: 19vw;
	}
}




	
/**
* ----------------------------------------
* animation bounce-in-top
* ---------------------------------------- */

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
			animation: bounce-in-top 1.1s both;
}
@-webkit-keyframes bounce-in-top {
0% {
	-webkit-transform: translateY(-500px);
			transform: translateY(-500px);
	-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
	opacity: 0;
}
38% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
	opacity: 1;
}
55% {
	-webkit-transform: translateY(-65px);
			transform: translateY(-65px);
	-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
}
72% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
}
81% {
	-webkit-transform: translateY(-28px);
			transform: translateY(-28px);
	-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
}
90% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
}
95% {
	-webkit-transform: translateY(-8px);
			transform: translateY(-8px);
	-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
}
100% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
}
}
@keyframes bounce-in-top {
0% {
	-webkit-transform: translateY(-500px);
			transform: translateY(-500px);
	-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
	opacity: 0;
}
38% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
	opacity: 1;
}
55% {
	-webkit-transform: translateY(-65px);
			transform: translateY(-65px);
	-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
}
72% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
}
81% {
	-webkit-transform: translateY(-28px);
			transform: translateY(-28px);
	-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
}
90% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
}
95% {
	-webkit-transform: translateY(-8px);
			transform: translateY(-8px);
	-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
}
100% {
	-webkit-transform: translateY(0);
			transform: translateY(0);
	-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
}
}



@media screen and (max-width: 760px) {
	.shop_gallery_list li {
		padding: 1vw;
	}
	
}