<!-- start Simple Custom CSS and JS -->
<style type="text/css">
.masonry-root {
  width: min(1200px, 100%);
  margin: 0 auto;
  position: relative;
}

/* data-srcのほうは見せない */
.masonry-src {
  display: none;
}

/* 実際に描画される要素 */
.masonry-item {
  position: absolute;
  box-sizing: border-box;
  opacity: 0.3;
  --tx: 0px;
  --ty: 0px;
  transform: translate(var(--tx), var(--ty)) scale(1);
	/*
  transform: translate(var(--tx), var(--ty)) scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
	*/
  transition: opacity 0.8s ease;
}

.masonry-item.visible {
  opacity: 1;
  transform: translate(var(--tx), var(--ty)) scale(1);
}

.masonry-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}</style>
<!-- end Simple Custom CSS and JS -->
