@charset "utf-8";
/* 写真ビューア（T119）。モデルハウス詳細・施工事例詳細で共通に使う。
   大きな 1 枚を主役にして、右（スマホは下）にサムネイルを並べる。
   クラスは ph- 接頭辞。既存の .system-* / .gallery-list には触れない */

.ph-shots { display: grid; grid-template-columns: 1fr 232px; gap: 12px; margin: 0 0 20px; }
.ph-shots-stage { position: relative; grid-column: 1; background: #efece7; overflow: hidden; }
.ph-shots-link { display: block; }
/* 次の写真を待っている間は、今の写真をうっすら残す（白く抜けないように） */
.ph-shots-img { display: block; width: 100%; height: 480px; object-fit: cover; transition: opacity 0.15s; }
.ph-shots.is-loading .ph-shots-img { opacity: 0.5; }
.ph-shots-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.86); color: #3a2d20; font-size: 16px; line-height: 44px; text-align: center; cursor: pointer; }
.ph-shots-arrow:hover { background: #fff; }
.ph-shots-prev { left: 14px; }
.ph-shots-next { right: 14px; }
.ph-shots-counter { position: absolute; right: 14px; bottom: 12px; margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(20, 12, 6, 0.62); color: #fff; font-size: 12px; letter-spacing: 0.06em; }
/* サムネイル。多いときはこの枠の中でスクロールする */
.ph-shots-thumbs { grid-column: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; max-height: 480px; overflow-y: auto; }
.ph-shots-thumbs li { margin: 0; }
.ph-shot { display: block; width: 100%; padding: 0; border: 2px solid transparent; background: none; line-height: 0; cursor: pointer; }
.ph-shot img { display: block; width: 100%; height: 76px; object-fit: cover; }
.ph-shot.is-current { border-color: #602600; }
.ph-shot:hover { border-color: #c9a063; }
.ph-shots-caption { grid-column: 1 / -1; margin: 0 0 18px; color: #6b5a48; font-size: 13px; line-height: 1.6; min-height: 1.6em; }

@media screen and (max-width: 767px) {
  .ph-shots { grid-template-columns: 1fr; gap: 8px; }
  .ph-shots-stage { grid-column: 1; }
  .ph-shots-img { height: 260px; }
  .ph-shots-arrow { width: 38px; height: 38px; line-height: 38px; }
  .ph-shots-thumbs { grid-column: 1; grid-template-columns: repeat(4, 1fr); max-height: 164px; }
  .ph-shot img { height: 70px; }
  .ph-shots-caption { margin-bottom: 14px; font-size: 12px; }
}