@charset "UTF-8";

/* 共通の画像拡大。工事・不動産の表示サイズは変数で切り替える。 */
.re-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  padding: var(--lightbox-padding, 0);
}
.re-lightbox.open { display: flex; }
.re-lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--lightbox-width, 90%);
  max-height: var(--lightbox-height, 80%);
  border-radius: var(--lightbox-radius, 8px);
  box-shadow: var(--lightbox-shadow, 0 6px 20px rgba(0, 0, 0, 0.4));
  background: var(--lightbox-image-background, transparent);
}
.re-lightbox .re-close {
  position: absolute;
  top: var(--lightbox-close-top, 20px);
  right: var(--lightbox-close-right, 20px);
  background: var(--lightbox-close-background, none);
  border: none;
  color: #fff;
  font-size: var(--lightbox-close-size, 2.2rem);
  cursor: pointer;
}
:is(.kouji-page, .realestate-page) .re-lightbox {
  --lightbox-padding: 18px;
  --lightbox-width: min(1100px, 96vw);
  --lightbox-height: 88vh;
  --lightbox-radius: 10px;
  --lightbox-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  --lightbox-image-background: #111;
  --lightbox-close-top: 14px;
  --lightbox-close-right: 18px;
  --lightbox-close-background: rgba(255, 255, 255, 0.14);
  --lightbox-close-size: 26px;
  --lightbox-close-diameter: 42px;
}
:is(.kouji-page, .realestate-page) .re-lightbox .re-close {
  width: var(--lightbox-close-diameter);
  height: var(--lightbox-close-diameter);
  line-height: var(--lightbox-close-diameter);
  padding: 0;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
:is(.kouji-page, .realestate-page) .re-lightbox .re-close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.re-lightbox .re-close:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.65);
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .kouji-page .re-lightbox {
    --lightbox-padding: 10px;
    --lightbox-width: 96vw;
    --lightbox-height: 82vh;
    --lightbox-close-top: 10px;
    --lightbox-close-right: 10px;
    --lightbox-close-size: 24px;
    --lightbox-close-diameter: 40px;
  }
}
@media (max-width: 420px) {
  .realestate-page .re-lightbox {
    --lightbox-padding: 10px;
    --lightbox-width: 96vw;
    --lightbox-height: 82vh;
    --lightbox-close-top: 10px;
    --lightbox-close-right: 10px;
    --lightbox-close-size: 24px;
    --lightbox-close-diameter: 40px;
  }
}