/* Masonryコンテナ */
.masonry-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding:0 0 0 10px;
    justify-content: center;
	width: calc(100% - 10px);
}

/* 各アイテム */
.masonry-item {
    width: calc(50% - 20px); /* モバイルデフォルト */
    opacity: 0;
    transition: all 0.5s ease;
	margin-bottom: 20px;
	transform: translateY(20px);
	
	
}

.masonry-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
	
	
	filter: grayscale(0);
	

}
.masonry-item a{
	display: block;
	width:100%;
	height: 100%;
	position: relative;
	box-shadow: 0 0 20px rgba(0,0,110,.1);

    transition: all 0.3s ease-in-out;
	transform: rotate3d(0,0,0,0);
}
.masonry-img:hover {
	filter: grayscale(1);
}


/* レスポンシブデザイン */
@media (min-width: 767px) {
	.masonry-container {
		padding:0 0 0 10px;
		width: calc(100% - 10px);
	}
	.masonry-item {
		width: calc(33.333% - 20px);
	}
}

@media (min-width: 1280px) {
    .masonry-item {
		width: calc(25% - 20px);
	}
	.masonry-item a::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		height: 100%;
		background: rgba(255,255,255,.0);
		pointer-events: none;
		transition: all 0.2s ease-in-out;
	}
	.masonry-item a:hover::after {
		background: rgba(0,0,230,0.46);
		mix-blend-mode: multiply;
	}

	/*.masonry-item:nth-child(4n) a:hover {
		transform: rotate3d(0.5,1,0,30deg);

	}
	.masonry-item:nth-child(4n+1) a:hover {
		transform: rotate3d(0.5,0,.1,10deg);

	}
	.masonry-item:nth-child(4n+2) a:hover {
		transform: rotate3d(0.5,1,.1,20deg);

	}
	.masonry-item:nth-child(4n+3) a:hover {
		transform: rotate3d(0,1,-.1,-30deg);

	}*/

}

@media (min-width: 1600px) {
    .masonry-item {
		width: calc(20% - 20px);
}
}

/* フェードインアニメーション */
.masonry-item.fadeAnime {
    opacity: 1;
	transform: translateY(0);
}