@charset "UTF-8";
img.sample {
  filter: blur(4px) brightness(0.9);
}
img.sample {
  width: min(320px, calc(320 / 640 * 100vw));
}

/* CSS */
.card {
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
}
.card__img {
  display: block;
  width: min(320px, calc(320 / 640 * 100vw));
  height: min(200px, calc(200 / 640 * 100vw));
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* hover で拡大＋彩度UP */
.card:hover .card__img {
  transform: scale(1.05);
  filter: saturate(1.4) brightness(1.05);
}

/* キャプションにぼかし背景を付けたいとき */
.card__caption {
  position: relative;
  padding: 8px 12px;
  background: rgba(0,0,0,0.5);
  color: white;
  margin-top: -36px;
  backdrop-filter: blur(6px); /* 背景をぼかす（対応ブラウザで有効） */
}

.gallery__img {
  width: min(180px, calc(180 / 1000 * 100vw));
  transition: filter 0.3s ease, transform 0.3s ease;
  filter: grayscale(100%) brightness(0.8) contrast(0.9);
  transform: scale(1);
  margin-right: 8px;
}
.gallery__img:hover {
  filter: none;
  transform: scale(1.03);
}
@media screen and (max-width: 768px) {
  .gallery__img {
    width: calc(140 / 640 * 100vw);
  }
}

.frosted-wrap {
  position: relative;
  width: min(320px, calc(320 / 640 * 100vw));
  margin: 0 auto;
}
.frosted-wrap img {
  width: 100%;
  border-radius: 10px;
}
.frosted {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 80%;
  height: 80%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); /* Safari 用 */
  border: 1px solid rgba(255,255,255,0.12);
  padding: 16px;
  border-radius: 10px;
}

.filter-sample{
  width:320px;
  height:200px;
  object-fit:cover;
  transition: filter 0.3s ease;
  filter: brightness(0.8) grayscale(20%) saturate(1.0);
}
.filter-sample:hover {
  filter: brightness(1) grayscale(0) saturate(1.1);
}