@charset "UTF-8";
img{
  width: 100%;
}

header{
  height: 100%;
  overflow:hidden;
}
body{
  z-index: 0;
      font-family: 'Noto Sans JP', sans-serif;
      /* min-width: 1200px; */
      line-height: 2;
}
.big-img{
  height: 100%;
  overflow:hidden;
}
.main-nav{
  position: fixed;
  width: 100%;
  height: 100%;
padding-top: 200px;
background: #fff;
  z-index: 3;
  /* animation: animationfade 0.5s ease-in forwards; */
  opacity: 0;
}
.fade{
  opacity: 1;
}
.main-nav ul{
 /* transform: translateX(35px); */
  margin: 20px 300px;

}
.bottom {
  display: flex;
  justify-content: space-around;
}
.top {
  display: flex;
  justify-content: space-between;
}
.main-nav li{

}
/* .fadein{
  opacity: 0;
  top:-100%;
} */
/* @keyframes animationfade
{
100% {top:0;}
} */

.logo{
  margin-left: 30px;
  width: 150px;
  z-index: 4;
}
.black{
  position: fixed;
  filter: invert(100%);
}

.big-img{
position: absolute;
/* background-image: url(../img/back-beige.png); */
width: 100%;
height: 100%;

}
#slide{
  height: 100%;
  width: 100%;
  z-index: 1;
}
#slide li{
  position: absolute;
    width: 600px;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    clip-path:url(#myclip);
}
#slide li img{
  animation: animationZoom 5s ease-in forwards;
  height: 500px;
  object-fit: cover;

}
#mask{
  height: 0;

}
#myclip{
  position: absolute;
  width: 600px;
  top:50%;
  left: 50%;
  z-index: 0;
  /* transform: translate(-50%,-50%); */
}
.cls-1{
transform: translateX(70%);

}
.title{
  position: absolute;
  top:30%;
  transform: translateY(-50%);
  left: 51%;
  transform: translateX(-50%);
  width: 30%;
  z-index: 2;
}
.btn-trigger{
    position:fixed;
    width:40px;
    height:32px;
    top:50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

}
.btn-trigger span{
    position:absolute;
    left: 0;
    width:100%;
    height:4px;
    background-color:#fff;
    border-radius:4px;
}
.btn-trigger,.btn-trigger span{
    display:inline-block;
    transition:all .5s;
    -webkit-transition:all .5s;
    box-sizing:border-box;
}
.btn-trigger span:nth-of-type(1){
    top:0;
}
.btn-trigger span:nth-of-type(2){
    top:14px;
}
.btn-trigger span:nth-of-type(3){
    bottom:0;
}
.active{
    z-index:4;
}
.active span{
  background-color: #000;
}
.active span:nth-of-type(1){
    -webkit-transform:translateY(14px) rotate(-45deg);
    transform:translateY(14px) rotate(-45deg);

}
.active span:nth-of-type(2){
    opacity:0;
}
 .active span:nth-of-type(3){
    -webkit-transform:translateY(-14px) rotate(45deg);
    transform:translateY(-14px) rotate(45deg);
}
.button_black span{
  background-color: #000;
}
.sub{
  position: fixed;
  top:0;
  right:0;

  background: #333;
  padding: 20px 40px;
  transition: 0.5s;
  color: #fff;
  z-index: 4;
}

.sub:hover{
  transform: rotateY(180deg);
  background: linear-gradient(45deg,#008080,#ffa500);
}
@keyframes animationZoom
{
100% {transform: scale(1.1);}
}
.main-content{
  margin: 100px 0;
  width: 100%;
}
.imgmask{
  position: absolute;

}
.bg1{
  background: rgba(220,220,220,.5);
}
.bg2{
  background: rgba(170,170,170,.5);
}
.concept{
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin: 0 150px;
}
.concept img{
  filter: grayscale(100%);
}
.paragrapf{
  margin: 50px;
}
.text{
  margin-top: 50px;
  margin-left: 50px;
  opacity: 0;
  transform: translateX(-20px);
}
.sub-title h2{
  font-size: 2.5rem;

}
.sub-title p,.sub-title h2{
  opacity: 0;
  transform: translateX(-20px);
}
.fadein{
  animation: animationfade 1s ease-in forwards;
}
@keyframes animationfade
{
100% {
  transform: translate(0);
  opacity: 1;
}
}
.main-title{
  position: relative;
  text-align: center;
  font-size: 3rem;
  top: 50px;
  opacity: 0;
}
.standard-sub{
  position: relative;
  text-align: center;
  font-size: 1.25rem;
  opacity: 0;
  top:35px;
}
.standard-sub span{
  opacity: 0;
  -webkit-transition: .3s linear;
  transition: .3s linear;
}
.main-title span{
  opacity: 0;
  -webkit-transition: .6s linear;
  transition: .6s linear;
}
/* .main-title .apper span{
  animation:text_anime 1s ease-out forwards;
} */
/* @keyframes text_anime {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
} */
#slide2{
  position: relative;
  overflow: hidden;
  height: 800px;
}
#slide2 ul{
  position: absolute;
  background: #808080;
  width: 3750px;
  display: flex;
  padding: 100px 0;
  z-index: -1;
}
.room-content li{
 width: 750px;
 float:left;
}
#slide2 img{
  height: 300px;
  width: 650px;
  margin: 0 50px;
  object-fit: cover;
}
.rotate{
  animation: rotate-anime 1s linear forwards;
}
@keyframes rotate-anime {
  0%{
    opacity: 0;
    transform: rotateY(90deg);
  }
  100%{
    transform: rotateY(0);
    opacity: 1;
  }
}
.room-intro{
  position: relative;
  top:-280px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 150px;
}
.allow-button{
  margin: 0 auto;

}
#nextbutton,#prevbutton{
  position: relative;
  width: 35px;
  top:-380px;
  margin: 0 40px;

}
.loadline{
  position: absolute;
  left: 50%;
  top:100%;
  transform: translate(-50%,-100%);
  background:rgba(255,255,255,5);
  width: 3px;
  height: 100px;
  z-index: 1;
  overflow: hidden;
}
.loadlinemask{
  position: absolute;
    background:rgba(0,0,0,.5);
  width: 3px;
  height: 100px;
  z-index: 2;
}
.preamble{
  margin: 25px 0;
}
.details h1{
  font-size: 1.5rem;
}
.room-info,.facility,.equipment{
  margin: 17px 0;
}
.room-intro{
  margin-bottom: 100px;
}
.form{
  cursor: hand;
  display: flex;
  border: 1px #ccc solid;
  width: 300px;
  padding:20px 0;
  margin-top: 40px;
}
.loadrow{

  height: 3px;
  width: 35px;
  background: linear-gradient(45deg,#008080,#ffa500);
    margin: auto 0;
    transform: translateX(-50%);
    z-index: 0;
    overflow: hidden;
}
.loadrow_mask{
  position: absolute;
    background:#ccc;
  width: 35px;
  height: 3px;
  z-index: 1;
}
.reserv h2{
font-size: 0.5rem;
}
.reserv h1{
  font-size: 1.25rem;
}
.reserv{
  line-height: 1.5;
  margin-right: 10px;
}
.arrow{
  background: #ddd;
  border-radius: 50%;
  margin: auto 0;
  margin-left: 130px;
  padding: 0 8px;
}
.terms{
  font-size: 0.5rem;
  margin: 10px 0;
}
.terms a{
  color: #ffa500;
  text-decoration: underline;
}
.room-skech{
  margin: 120px;
  margin-top:50px;
}
@media screen and (max-width:1024px){
  .concept img{
   transform: translateY(50%);
  }
  .sub-title p,.sub-title h2{
    text-align: center;
  }
  .text{
    margin-left: 10px;
    text-align: center;
    opacity: 0;
    transform: translateX(-20px);
  }
  .room-skech{
    margin: 30px;
    margin-top: 100px;
  }
  .concept{
    margin: 0 50px;
  }
.room-intro{
  margin: 0 50px;
}
.main-nav ul{
  margin: 20px 100px;
}

}
@media screen and (max-width:767px){
#myclip,#slide li{
    width: 400px;
  }
  #myclip{
    transform: translateX(-50%);
  }
  .title{
    width: 50%;
  }
  .concept{
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 30px;
  }
  .paragrapf{
    margin: 50px 0;
  }
  .concept img{
   transform: translateY(0);
  }
  .room-intro{
    display: grid;
    grid-template-columns: 1fr ;
    margin: 0 10px;
  }
  .main-nav ul{
    display: flex;
    flex-direction: column;
    margin: 0;
    text-align: center;
  }
  .main-nav li{
    margin: 10px
  }
  #slide2 ul{
    width: 2500px;
  }
  .room-content li{
    width: 500px;

   }
  #slide2 img{
    width: 400px;
  }
}
@media screen and (max-width:480px){
  #slide2{
    
  }
  #slide2 ul{
    width: 2000px;
  }
  .room-content li{
    width: 400px;

   }
  #slide2 img{
    width: 300px;
    height: 200px;
  }
  #nextbutton,#prevbutton{
    top:-480px;
  
  }
  #slide li{
width: 70%;
overflow: hidden;
  }
  #myclip{
   display: none;
  }
 
  
.logo{
  width: 100px;
 position:absolute;
 top:0;
 left:0;
 margin: 0;
}
.sub{
  padding: 10px 10px;
  font-size: 70%;
}
}