@charset "UTF-8";
/* =========================================
   PHOTOGRAPHY ページ専用スタイル
   （共通: style.css / 下層共通: graphic.css）
========================================= */

/* ----- Hero：カラー写真のまま表示 ----- */
.page-hero__visual--photo img.photo-hero__img { filter: none; object-position: center 60%; }

/* ----- Gallery（写真を縦横比のまま並べる） ----- */
.photo-gallery { background: var(--c-white); }
.photo-gallery .filter { margin-bottom: 0; }

.photo-grid {
  columns: 3 260px;
  column-gap: 16px;
}
.photo-grid__item {
  break-inside: avoid;
  margin-bottom: 16px;
}
.photo-grid__item[hidden] { display: none; }
.photo-grid__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
  cursor: zoom-in;
}
.photo-grid__btn img {
  width: 100%;
  transition: transform .6s ease, opacity .3s;
}
.photo-grid__btn { position: relative; }
.photo-grid__btn:hover img,
.photo-grid__btn:focus-visible img { transform: scale(1.04); }

/* 拡大表示のタイトルも大きく */
.lightbox figcaption { flex-direction: column; align-items: center; gap: 8px; }
.lightbox .lightbox__title {
  font-family: var(--f-mincho);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: .14em;
}
.lightbox .lightbox__cat { font-size: 11px; letter-spacing: .2em; }

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .photo-grid { columns: 2 140px; column-gap: 10px; }
  .photo-grid__item { margin-bottom: 10px; }
}