@charset "UTF-8";

/* --------------------------------------------------
map
-------------------------------------------------- */
#map{
  width: 100%;
  min-width: 1200rem;
  position: relative;
}

#map #bg{
	width:100%;
	height:100%;
	background-image:url("../img/map/bg.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
  position: fixed;
	left:0;
	top:0;
	z-index:1;
}

#map_inner{
	width:100%;
	height:calc(100vh - 40rem);
	min-height:1000rem;
	position:relative;
	z-index:1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#map_inner #map_block #title p{
	color:#fff100;
	text-align:center;
	font-size:56rem;
	font-weight:500;
	position:relative;
	line-height:1.0;
	padding-top:20rem;
}

#map_inner #map_block #title span{
	display:block;
	color:#fff;
	text-align:center;
	font-size:20rem;
	font-weight:500;
	position:relative;
	line-height:1.0;
}

/* --------------------------------------------------
slider
-------------------------------------------------- */
.gallery{
  width: 100%;
  min-width: 1200rem;
    margin:0 auto 0;
}

.main{
    display:flex;
    align-items:center;
    justify-content:center;
}

.main_img{
    position:relative;
    width:600rem;
    height:600rem;
    margin:0;
    padding:0;
    list-style:none;
}

.main_img li{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
}

.main_img li:first-child{
    display:block;
}

.main_img img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.thumb{
    display:flex;
    justify-content:center;
    margin:30rem 0 0;
    padding:0;
    list-style:none;
}

.thumb li{
		width:110rem;
		height:110rem;
    position:relative;
    cursor:pointer;
}

.thumb img{
    display:block;
}

.thumb li::after{

    content:"";
    position:absolute;
    inset:0;

    background:url(../img/map/cursor_pc.png) center center / contain no-repeat;

    opacity:0;
    transition:.3s;
    pointer-events:none;

}

.thumb li.active::after{
    opacity:1;
}

/* --------------------------------------------------
animation
-------------------------------------------------- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#map_inner #title,
#map_inner .gallery .main,
ul.thumb li{
	opacity:0;
}

.is-loaded #map_inner #title{
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 1.4s forwards;
}

.is-loaded #map_inner .gallery .main{
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 1.8s forwards;
}

.is-loaded ul.thumb li {
  animation: scaleIn 0.6s cubic-bezier(.05,.53,.29,.88) forwards;
}

.is-loaded ul.thumb li:nth-child(1)  { animation-delay: 2.25s; }
.is-loaded ul.thumb li:nth-child(2)  { animation-delay: 2.3s;  }
.is-loaded ul.thumb li:nth-child(3)  { animation-delay: 2.35s; }
.is-loaded ul.thumb li:nth-child(4)  { animation-delay: 2.4s;  }
.is-loaded ul.thumb li:nth-child(5)  { animation-delay: 2.45s; }
.is-loaded ul.thumb li:nth-child(6)  { animation-delay: 2.5s;  }
.is-loaded ul.thumb li:nth-child(7)  { animation-delay: 2.55s; }
.is-loaded ul.thumb li:nth-child(8)  { animation-delay: 2.6s;  }
.is-loaded ul.thumb li:nth-child(9)  { animation-delay: 2.65s; }
.is-loaded ul.thumb li:nth-child(10) { animation-delay: 2.7s;  }
.is-loaded ul.thumb li:nth-child(11) { animation-delay: 2.75s; }
.is-loaded ul.thumb li:nth-child(12) { animation-delay: 2.8s;  }
.is-loaded ul.thumb li:nth-child(13) { animation-delay: 2.85s; }
.is-loaded ul.thumb li:nth-child(14) { animation-delay: 2.9s;  }
.is-loaded ul.thumb li:nth-child(15) { animation-delay: 2.95s; }
.is-loaded ul.thumb li:nth-child(16) { animation-delay: 3.0s;  }
.is-loaded ul.thumb li:nth-child(17) { animation-delay: 3.05s; }