.photo-wrapper {
  max-width: 300px;
  margin: 0 auto;
  padding: 10px;/*20px;*/
  perspective: 800px; /* ← 800px;立体効果のために追加 */
}

.photo-effect {
  width: 100%;
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  filter: saturate(1.1) brightness(1.05);
  transform: scale(1) rotateY(0deg) translateY(0);
  transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1),
              filter 1.4s ease-in-out,
              box-shadow 1.6s ease-in-out;
  transform-origin: center center;
}

.photo-effect:hover {
  transform: scale(1.15) rotateY(8deg) translateY(-10px);
  filter: grayscale(15%) sepia(25%) contrast(1.3) brightness(1.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* 少し“浮いている”アニメーションを追加（呼吸感） */
.photo-effect:hover {
  transform: scale(1.12) rotateY(4deg) translateY(-6px);
  filter: grayscale(5%) sepia(5%) contrast(1.0) brightness(1.05);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  animation: hoverFloat 2.0s ease-in-out infinite alternate;/*4s*/
}
/*grayscale(10%) sepia(20%) contrast(1.25) brightness(1.1)*/


@keyframes hoverFloat {
  0% { transform: scale(1.18) rotateY(10deg) translateY(-14px); }
  100% { transform: scale(1.12) rotateY(-10deg) translateY(-8px); }
}