/* 役割: Appealギャラリーとライトボックスの表示。
 * 利用ページ: Appeal（日英）。
 * 関係する棚: メニュー・日英・フッター・共通土台。
 * 注意: 元の詳細度・!important・条件分岐を保持。生成位置はplacement.jsonの最終旧ブロック。
 */
.loma-gallery {
  width: 90%;
  max-width: 1280px;
  margin: 50px auto 100px
}
.gallery-heading {
  margin-bottom: 90px
}
.gallery-heading .en {
  font: 400 clamp(48px,5vw,70px)/1.2 Valky,serif;
  margin: 0 0 20px
}
.gallery-heading h1 {
  font-size: 20px;
  font-weight: 400
}
.space-set {
  margin: 0 0 160px;
  scroll-margin-top: 35px
}
.space-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: end;
  margin-bottom: 45px
}
.loma-gallery .space-copy .space-label {
  font: 400 clamp(40px,4.5vw,60px)/1.2 Valky,serif;
  margin: 0 0 25px
}
.space-copy h2 {
  font-size: clamp(26px,3vw,40px);
  font-weight: 400;
  line-height: 1.8;
  white-space: pre-line;
  margin: 0;
  letter-spacing: .06em
}
.space-copy .body {
  font-size: 17px;
  color: #aaa;
  line-height: 2.2;
  white-space: pre-line;
  margin: 0 0 8px
}
.space-hero {
  margin: 0 auto;
  width: 82%;
  max-width: 980px
}
.space-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: cover;
  background: #080808
}
.space-strip {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: #777 #191919;
  padding-bottom: 18px;
  outline-offset: 6px
}
.space-strip figure {
  flex: 0 0 30%;
  margin: 0;
  scroll-snap-align: start
}
.space-strip img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover
}
.space-strip:focus-visible {
  outline: 1px solid #fff
}
@media (max-width:767px) {
  .loma-gallery {
    width: calc(100% - 40px);
    margin-top: 35px
  }
  .gallery-heading {
    margin-bottom: 65px
  }
  .space-set {
    margin-bottom: 90px
  }
  .space-copy {
    display: block;
    margin-bottom: 28px
  }
  .loma-gallery .space-copy .space-label {
    font-size: clamp(30px,8vw,38px);
    margin-bottom: 18px
  }
  .space-copy h2 {
    font-size: 26px
  }
  .space-copy .body {
    font-size: 14px;
    line-height: 2;
    margin: 22px 0 0
  }
  .space-hero {
    width: 100%
  }
  .space-strip {
    gap: 16px;
    margin-top: 20px
  }
  .space-strip figure {
    flex-basis: 60%
  }
  .space-strip img {
    height: 115px
  }
}
.photo-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in
}
.photo-zoom:focus-visible {
  outline: 2px solid white;
  outline-offset: -3px
}
.photo-lightbox {
  border: 0;
  padding: 55px 20px 20px;
  background: #080808;
  color: white;
  max-width: 95vw;
  max-height: 95vh;
  width: 1200px
}
.photo-lightbox::backdrop {
  background: rgba(0,0,0,.88)
}
.photo-lightbox img {
  display: block;
  width: 100%;
  height: calc(85vh - 70px);
  object-fit: contain;
  cursor: zoom-out
}
.photo-close {
  position: absolute;
  right: 15px;
  top: 10px;
  border: 1px solid #888;
  background: #000;
  color: white;
  width: 38px;
  height: 38px;
  font: 28px/1 sans-serif;
  cursor: pointer
}
.photo-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px
}
.photo-progress {
  width: 90px;
  height: 2px;
  background: #333;
  margin-right: 12px;
  overflow: hidden
}
.photo-progress span {
  display: block;
  width: 50%;
  height: 100%;
  background: #ddd;
  transition: transform .15s
}
.photo-arrow {
  width: 48px;
  height: 48px;
  border: 1px solid #777;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: 24px/1 sans-serif;
  cursor: pointer
}
.photo-arrow:hover:not(:disabled) {
  background: #fff;
  color: #000
}
.photo-arrow:disabled {
  opacity: .25;
  cursor: default
}
.photo-arrow:focus-visible {
  outline: 2px solid white;
  outline-offset: 4px
}
.space-strip {
  margin-top: 18px
}
@media (max-width:767px) {
  .photo-controls {
    margin-top: 20px
  }
  .photo-arrow {
    width: 42px;
    height: 42px;
    font-size: 22px
  }
}
#loma-appeal-photo-lightbox .photo-lightbox-arrow {
  position: absolute;
  top: calc(50% + 17.5px);
  transform: translateY(-50%);
  z-index: 1;
  width: 48px;
  height: 48px;
  border: 1px solid #777;
  border-radius: 50%;
  background: rgba(8,8,8,.6);
  color: #fff;
  font: 24px/1 sans-serif;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer
}
#loma-appeal-photo-lightbox .photo-lightbox-prev {
  left: 26px
}
#loma-appeal-photo-lightbox .photo-lightbox-next {
  right: 26px
}
#loma-appeal-photo-lightbox .photo-lightbox-arrow:disabled {
  opacity: .3;
  cursor: default
}
@media (max-width:767px) {
  #loma-appeal-photo-lightbox .photo-lightbox-prev {
    left: 22px
  }
  #loma-appeal-photo-lightbox .photo-lightbox-next {
    right: 22px
  }
}
.loma-gallery .photo-index {
  margin: 12px 0 0;
  color: #888;
  font: 13px/1.8 yu-gothic-pr6n,sans-serif;
  letter-spacing: .08em
}
.loma-gallery .space-strip {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none
}
.loma-gallery .space-strip .photo-zoom {
  cursor: zoom-in
}
.loma-gallery .space-strip img {
  -webkit-user-drag: none;
  user-select: none
}
.loma-gallery .space-strip.is-pointer-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto
}
.loma-gallery .space-strip.is-pointer-dragging .photo-zoom {
  cursor: grabbing
}
@media (max-width:767px) {
  .loma-gallery .space-strip figure {
    min-width: 0
  }
}