@charset "UTF-8";

#floormap .tab-nav {
  display: flex;
  justify-content : center;
  list-style: none;
  padding: 0;
  margin:0;
}
#floormap .tab-nav li img{
  width: auto;
  height: 100%;
}
#floormap .tab-nav li {
  height: 70px;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #111;
  border-bottom: none;
  background:#111;
  margin-right: 4px;
  color: #fff;
  border-radius: 0 20px 0 0;
}
#floormap .tab-nav li:nth-child(2) {
  background:#8FC31F;
}
/*
#floormap .tab-nav li.active {
  background: #fff;
  font-weight: bold;
  border-bottom: 2px solid #fff;
}
*/
#floormap .tab-container{
  /*max-width: 900px;*/
  margin-right: auto;
  margin-left: auto;
}
   
#floormap .tab-content {
  /*display: none;*/
  padding: 50px;
  background:url(../img/common/bg-bl-kira.jpg)no-repeat;
  background-size: cover;
  background-position: center;
  width: calc(100% - 100px);
}
#floormap .tab-content.bg-green {
  background:url(../img/common/bg-g-kira.jpg)no-repeat;
  background-size: cover;
  background-position: center;
}
#floormap .tab-content.active {
  display: block;
}
.tab-body{
  position: relative;
}
.tab-content{
  position: absolute;
  top: 0;
  left: 0;
}
.tab-content.active {
  z-index: 1;
}

#floormap .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

}
#floormap .outer {
   position: relative;
   width: clamp(300px, 100%, 600px);
   height: 400px;
   overflow: hidden;
   border: 3px solid #111;
   border-radius: 16px;
   background-color: #fff;
}
#floormap .panzoom {
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}
#floormap .panzoom .inner {
   position: relative;
}
#floormap .panzoom img {
   width: auto;
   height: auto;
   vertical-align: bottom;
}
#floormap .items {
   position: absolute;
   top: 0;
   left: 0;
}
#floormap .items .item1 {
   display: block;
   width: 100px;
   height: 100px;
   background-color: #f55;
}
#floormap .zoom {
   position: absolute;
   right: 10px;
   bottom: 10px;
}

#floormap .zoom > *:after{
  content: '';
  display: block;
  background-color: #8FC31F;
   width: 30px;
   height: 30px;
   position: absolute;
   z-index: -1;
   border-radius: 4px;
}
#floormap #zoom1.zoom > *:after{
  background-color: #111;
}
#floormap #zoom1.zoom > *{
   color: #fff;
}
#floormap .zoom > * {
   display: none;
   align-items: center;
   justify-content: center;
   margin: 2px;
   color: #111;
   font-weight: bold;
   font-size: 24px;
   line-height: 1;
   letter-spacing: 0;
   cursor: pointer;
   position: relative;
   z-index: 1;

}

#floormap .active .zoom > * {
  z-index: 2;
  display: flex;
}
#floormap .active .zoom div{
  background-color: #fff;
  z-index: 1;
}

#floormap .print {
   display: flex;
   
}
#floormap .print span,
#floormap .print p{
  color: #ddd;
  font-size: 12px;
  margin-top: 15px;
}
#floormap .zoom #zoomOut:after{
  top: 4px;
}

#floormap .zoom #zoomOut{
  margin-top: 10px;
  top: -4px;
  font-size: 30px;
}

.zoom div + div{
  bottom: 0;
}
.zoom div{
  background: #111;
  color: #fff;
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 0px;
  right: 0;
}

#floormap .tab-container{
  padding-bottom: 530px;
}


@media screen and (max-width: 1200px) {


}
@media screen and (max-width: 1023px) {

  #floormap .tab-container{
    padding-bottom: 65%;
  }



}
@media screen and (max-width: 767px) {

  #floormap .tab-container{
    padding-bottom: 125%;
  }
  #floormap .tab-nav li {
    height: 50px;
  }

}

@media screen and (max-width: 429px) {
  #floormap .tab-container{
    padding-bottom: 148%;
  }
}