@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('custom-style.css');

body {
  margin:0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
}
img{
  max-width: 100%;
}
.thumb.active > img{
  opacity:.7;
}
.wrapper{
  width:auto;
  padding:min(20px,4%);
}
#layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap:2%;
  width: 100%;
  max-width: 1800px;
  margin:min(50px,10%) auto;
}
#viewer {
  width: 100%;
  height:auto;
  aspect-ratio: 16/9;
  background: #000;
  box-shadow:6px 8px 15px rgba(0,0,0,.25);
  border-radius:10px;
  overflow: hidden;
}
#floorplan {
  flex: 0 1 36%;
  position: relative;
}
#viewarea{
  flex:1 0 60%;
}
.thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  gap: min(25px,2.5vw);
  margin:30px auto;
}
.thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
}
.thumb span{
  display: block;
  width: 100%;
  text-align: left;
  font-size:clamp(14px,calc(16 / 640 * 100vw),16px);
  margin-bottom: .3em;
}
.thumb img {
  cursor: pointer;
  border-left:4px solid #f04d32;
  box-shadow:6px 8px 15px rgba(0,0,0,.25);
}
.thumb img:hover {
  border-color: #f04d32;
}
img.flat-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hotspot {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  width:clamp(30px,calc(50 /640 * 100vw),50px);
  height: auto;
  aspect-ratio:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hotspot span {
  display: block;
  color: white;
  font-size:clamp(12px,calc(14 / 640 * 100vw),14px);
  text-align: center;
  position: relative;
  z-index: 5;
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
}
.hotspot:after{
  content:"";
  display: block;
  width:100%;
  height: 100%;
  background:rgba(240, 77, 50,.7);
  border:2px solid #f04d32;
  position: absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  z-index: 2;
  border-radius: 50%;
}
.active-hotspot:after{
  background:#a41e08;
  border:2px solid #a41e08;
}
.relative{
  position: relative;
}
#floorplan .relative > img{
  position: relative;
  z-index: 0;
}

@media screen and (max-width:1025px){
  #layout {
    display: block;
  }
  .sp_window{
    width: 100%;
  overflow-x: scroll;
  margin-bottom: 20px;
  }
  .thumbnails{
    width: max-content;
  display: flex;
  cursor: grab;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  align-items: flex-end;
  }
  .thumbnails:active {
  cursor: grabbing;
}
.thumb{
  flex:0 1 170px;
}
}