@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　floormap
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.page-ttl{
  background-image:url(../../asset/img/kobe/gallery/bg_ttl_sp.jpg);
}



/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* space
-----------------------------------------------------------------*/
.space{
  overflow:hidden;
  padding: 30px 0;
}
.space h2{
  padding: 10px 0 17px;
  background:#231815;
  color: #FFF;
  text-align:center;  
}
.space h2 span{
    display: block;
}
.space h2 .ja{
  font-size: 1.1rem;
}
.space h2 .en{
  font-size: 2rem;
  font-weight: 700;
  font-family: din-2014, sans-serif;
}
.space .layout-box{
  width: calc(100% + 2px);
  margin-left: -1px;  
}
.space-box+.space-box{
  margin-top: 0;  
}
.space-box table{
  border-collapse:collapse;
  width: 100%;  
}
.space-box table img{
  max-width: none;
  width: 100%;  
}
.space-box table .booth img{
  height: 83.6vw;  
}
.space-box table .booth2 img{
  height: 62.2vw;  
}
.space-box table td{
  box-sizing:border-box;
  border:1px solid #FFF;
  border-top: 0;
  
  line-height:0;
  padding-top: 1px;
}
.space-box table a{
  display: block;
  position: relative;
  color: #FFF;  
}
.space-box table .txt{
    position: absolute;
    left: 0;
    top:50%;
    width: 100%;
    text-align:center;
    transform: translateY(-50%);
    line-height:1;
}
.space-box table .ttl{
  font-size: 1.4rem;
  font-weight: bold;  
}
.space-box table .txt small{
  display:block;
  margin-top: 3px;
  font-size: 1.2rem;  
}
.space-box table .btn{
  max-width: 140px;
  margin: 10px auto 0;
  padding: 0.8em;
  border-radius: 20px;
  border:1px solid #FFF;
  background:url(../../asset/img/osakaumeda/floormap/arw_modal_btn.svg) no-repeat right 12px center;
  background-size:18px auto;
  font-size: 1rem;
}

.space-modal-cont{
  padding: 15px 15px 20px;
  background: #FFF;
  text-align:center;  
}
.space-modal-cont .space-pic-list{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;   
}
.space-modal-cont .space-pic-list li{
  position: relative; 
  width: 100%;  
	border: 5px solid #ffffff;
}
.space-modal-cont .space-pic-list li > img{
  width: 100%;  
}

.space-modal-cont .space-pic-list li .caption{
  position: absolute;
  right: 0;  
  top: 0;
  padding: 2px 5px;
  background: rgba(0,0,0,.6);
  font-size: 1rem;
  color: #FFF;
}
.space-modal-cont h3{
  margin: 15px 0 5px;
  font-size: 1.6rem;
  font-weight:bold;  
}
.space-modal-cont .txt{
  margin-bottom: 10px;
  font-size: 1.2rem;
  text-align:left;
}
.space-modal-cont .btn-close{
  width: 7em;
  margin: 5px auto;
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
  cursor: pointer;  
}

.space-modal{
  display: none;  
}
.space-modal-box{
  max-width: 335px;
  margin: 0 auto;  
}

.slick-prev, .slick-next {
    bottom: auto;
    top: auto;
    bottom: -15px;
    display: block;
    width: 16px;
    height: 40px;
    z-index: 100;
    border-radius: 0;
}
.slick-prev{
  left: 5px;
  transform: translate(0, 100%);
  background:url(../../asset/img/osakaumeda/floormap/btn_prev.svg) no-repeat center center;
  background-size: 100% auto;
}
.slick-next{
  right: 5px;
  transform: translate(0, 100%);
  background:url(../../asset/img/osakaumeda/floormap/btn_next.svg) no-repeat center center;
  background-size: 100% auto;  
}
.modaal-wrapper .modaal-close{
  opacity: 0;  
}

.p_footer{
  margin-top: -2px;  
}

/*--------------------------------------------------------------------------
   PC
---------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  .page-ttl{
    background-image:url(../../asset/img/kobe/gallery/bg_ttl_pc.jpg);
  }


/* space
-----------------------------------------------------------------*/
  .space {
    padding: 100px 0 55px;
  }
  .space h2{
    display: flex;
    align-items: center;
    height: 15.4vw;
    padding: 0 15%;
  }
  .space h2 .ja{
    font-size: 1.4rem;
  }
  .space h2 .en{
    margin-right: 10%;
    font-size: 4rem; 
  }
  .space .layout-box{
     display: flex; 
  }
  .space-box{
    width: 50%; 
  }
  .space-box+.space-box{
    margin-top: 0;
    margin-left: -1px;  
  }
  .space-box table .booth img{
    height: 41.3vw;  
  }
  .space-box table .booth2 img{
    height: 31vw;  
  }
  .space-box table .ttl{
    font-size: 1.8rem;  
  }
  .space-box table .txt small{
    display:inline;
    margin-top: 0;
    font-size: 1.4rem;  
  }
  .space-box table .btn{
    max-width: 164px;
    margin: 15px auto 0;
    background-size:20px auto;
    font-size: 1.1rem;
    transition: .3s;
  }
  .space-box table a:hover .btn{
    background-image:url(../../asset/img/osakaumeda/floormap/arw_modal_btn_bk.svg);
    background-color: #FFF;
    color: #231815;
  }
  
  .space-modal-cont{
    max-width:960px;
    margin: 0 auto;
    padding: 35px 35px 45px;
  }
  .space-modal-cont .space-pic-list{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;   
  }
  .space-modal-cont .space-pic-list li{
    position: relative; 
    width: 100%;  
  }
  .space-modal-cont .space-pic-list._multiple li{
    width: 50%;
		border: 5px solid #ffffff;
  }
  .space-modal-cont .space-pic-list._multiple._col2{
    margin-top: 25%;  
  }
  .space-modal-cont .space-pic-list li .caption{
    position: absolute;
    right: 0;  
    top: 0;
    padding: 2px 5px;
    background: rgba(0,0,0,.6);
    font-size: 1rem;
    color: #FFF;
  }
  .space-modal-cont h3{
    margin: 20px 0 15px;
    font-size: 2.4rem;  
  }
  .space-modal-cont .txt{
    margin-bottom: 40px;
    font-size: 1.6rem;
    text-align:center;
  }
  .space-modal-cont .btn-close{
    width: 7em;
    margin: 30px auto 15px;
    font-size: 1.8rem;
  }

  .space-modal-box{
    max-width: 728px;  
  }

}

@media screen and (min-width: 768px) {
  
  .space-modal-box{
    max-width: none;  
  }

  .slick-prev, .slick-next {
      bottom: -30px;
      width: 61px;
      height: 117px;
  }
  .slick-prev{
    bottom: 50%;
    left: -20px;
    transform: translate(-100%, 50%);
    background:url(../../asset/img/osakaumeda/floormap/btn_prev.svg) no-repeat center center;
    background-size: 100% auto;
  }
  .slick-next{
    bottom: 50%;
    right: -20px;
    transform: translate(100%, 50%);
    background:url(../../asset/img/osakaumeda/floormap/btn_next.svg) no-repeat center center;
    background-size: 100% auto;  
  }
  
    
}