@charset "utf-8";


/* =======================
　　　  PC・共通部分
======================= */


.floor_img_photo_imgwrapper {
    position: relative;
}

.has-slides {
    cursor: pointer;
}

.floor_img_photo_imgwrapper:after {
  position: absolute;
  width: 20px;
  height: 20px;
  font-weight: bold;
  font-size: 24px;
  color: #fff;
  display: none; /* 最初は非表示 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: width 0.3s ease, height 0.3s ease;
}
.table_zoom.floor_img_photo_imgwrapper:after {
  content: url(/common/img/price/zoom.png);
  bottom: 5px;
  right: 5px;
}
.img_zoom.floor_img_photo_imgwrapper:after {
  content: "+";
  bottom: 17px;
  right: 5px;
  background-color: #DE8600;

}

.floor_img_photo_imgwrapper.has-slides:after {
  display: flex;
}

.floor_img_photo_imgwrapper:hover.has-slides:after {
  width: 25px;
  height: 25px;
}


/* --- modal --- */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
}

.modal-slider {
  width: 90%;
  max-width: 1000px;
  margin: 60px auto;
}

.modal-slider img {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 24px;
  color: #fff;
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}


/* --- スライドショーが表示されない問題への対策 --- */

/* モーダル内のSlickスライダーのコンテナを確実に表示 */
#floorImageModal .modal-slider {
    visibility: visible;
    opacity: 1;
}

/* Slickスライダーの各スライド要素を強制的に表示 */
#floorImageModal .slick-slide {
    display: block !important; /* display:none; を上書き */
    float: left; /* 横並びにする */
    height: 100%;
    min-height: 1px;
    aspect-ratio: 16/9;
}

/* スライド内の画像コンテナのスタイル */
#floorImageModal .slick-slide div {
    width: 100%;
    height: 100%;
}

/* スライド内の画像のスタイル */
#floorImageModal .slick-slide img {
    width: 100%;
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
    object-fit: contain; /* アスペクト比を保ってコンテナに収める */
}


.modal-nav-slider {
  width: 80%;
  max-width: 600px; /* サムネイル全体の幅 */
  margin: 20px auto 0; /* メインスライダーとの間隔 */
}

/* サムネイルの各要素 */
.modal-nav-slider .slick-slide {
  margin: 0 5px; /* サムネイル間の余白 */
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.4; /* 選択されていないサムネイルは少し薄くする */
}

/* サムネイルの画像 */
.modal-nav-slider .slick-slide img {
  width: 100%;
  border: 2px solid transparent; /* 枠線用のスペースを確保 */
}

/* 現在選択されているサムネイル */
.modal-nav-slider .slick-current {
  opacity: 1; /* 選択されているものは濃くする */
  transform: scale(1.2); /* 少し大きくして目立たせる */
}