@charset "utf-8";
*{
  margin: 0;
  padding: 0;
  font-family: "Shippori Mincho B1", serif;
  font-size: 1vw;
  color: black;
  box-sizing: border-box;
}
img {
  display: block;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
#loadingWrap {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #F0F5F5;
  top: 0;
  z-index: 10000;
}
#loadingWrap.hideLoadingWrap {
  transition: opacity 1s;
  opacity: 0;
}
header {
  width: 100%;
  height: 100vh;
  background-image: url("mainPhoto.jpg");
  background-size: cover;
  background-position: center center;
  background-color: #F0F5F5;
}
main {
  background-color: #F0F5F5;
}
footer {
  background-color: #B6B6B8;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
  #headerInner {
    width: 84%;
    height: 113px;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
  }
  #tel {
    float: left;
    width: 18%;
    height: 62px;
  }
  #telText {
    font-size: 0.8vw;
  }
  #telNumber {
    font-size: 2vw;
    font-weight: 800;
  }
  #headerInner nav {
    float: left;
    width: 60%;
    margin-left: 7%;
    margin-top: 2.5%;
    font-size: 1.2vw;
  }
  #headerInner nav ul {
    display: flex;
    justify-content: space-between;
  }
  #headerInner nav li:hover {
    font-style: oblique;
  }
  #headerInner a {
    display: block;
  }
  #reserve {
    float: left;
    width: 7vw;
    height: 7vw;
    font-size: 1.2vw;
    margin-left: 6.2%;
    border-radius: 50%;
    background-color: #FFF100;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #mainText {
    z-index: 11000;
    width: 25%;
    height: 18vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7vh;
    position: relative;
    opacity: 0;
    transform: translateY(100%);
    animation: fadeInFromBottom 1s forwards;
  }
  @keyframes fadeInFromBottom {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  #mainText p {
    font-size: 1.4vw;
    font-weight: 500;
    text-align: center;
  }
  #mainText h1 {
    font-family: HGS行書体;
    font-size: 5vw;
    text-align: center;
    margin-top: 1vh;
  }
  h2 {
    display: block;
    font-size: 2.5vw;
    text-align: center;
    padding-top: 3%;
    margin-bottom: 3%;
  }
  #dinner {
    width: 100%;
    height: 84vh;
  }
  #dinnerPhoto {
    width: 57%;
    height: 100%;
    background-image: url(../../images/sushi.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
  }
  .textbox {
    width: 43%;
    height: 100%;
  }
  #dinner .textbox {
    float: right;
  }
  h3 {
    display: block;
    font-size: 2.5vw;
    writing-mode: vertical-rl;
    margin-left: 40%;   
    margin-right: 40%;
    margin-bottom: 25%;
  }
  #dinnerText {
    width: 64%;
    height: 70%;
    padding-top: 22%;
    margin-left: auto;
    margin-right: auto;
  }
  .textbox p {
    text-align: center;
  }
  #bath {
    width: 100%;
    height: 84vh;
  }
  #bathPhoto {
    width: 57%;
    height: 100%;
    background-image: url(../../images/bath@2x.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
  }
  #bath .textbox {
    float: left;
  }
  #bathText {
    width: 64%;
    height: 70%;
    padding-top: 22%;
    margin-left: auto;
    margin-right: auto;
  }
  #guestroom {
    width: 100%;
    height: 84vh;
  }
  #roomPhoto {
    width: 57%;
    height: 100%;
    background-image: url(../../images/room@2x.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
  }
  #guestroom .textbox {
    float: right;
  }
  #roomText {
    width: 64%;
    height: 70%;
    padding-top: 22%;
    margin-left: auto;
    margin-right: auto;
  }
  #appo {
    width: 85%;
    height: 16vh;
    left: 8%;
    bottom: 0;
    background-color: #fff;
    border-radius: 8vh;
    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: 1s;
    position: fixed;
   }
   #appo.look{
    opacity: 1;
    transition: 1s;
    position: fixed;
   }

   #appoInner {
    width: 77%;
    height: 11vh;
    display: flex;
    justify-content: space-between;
    padding-top: 2.5%;
    margin-left: auto;
    margin-right: auto;
   }
   #appoInner p {
    font-size: 1.3vw;
    font-family: メイリオ;
   }
   #check_in {
    width: 20%;
    height: 1.1vh;
   }
   #date-picker {
    width: 100%;
    background-color: #E9EBEB;
    text-align: center;
    letter-spacing: 0.3vw;
    font-size: 1.3vw;
    font-family: メイリオ;
   }
   #date-picker::placeholder {
    text-align: center;
    font-family: メイリオ;
   }
   #night {
    width: 10%;
    height: 1.1vh;
   }
   #n_select {
    width: 100%;
    background-color: #E9EBEB;
    font-size: 1.3vw;
    font-family: メイリオ;
    text-align: center;
   }
   #number {
    width: 10%;
    height: 1.1vh;
   }
   #num_select {
    width: 100%;
    background-color: #E9EBEB;
    font-size: 1.3vw;
    font-family: メイリオ;
    text-align: center;
   }
   #room {
    width: 10%;
    height: 1.1vh;
   }
   #room_select {
    width: 100%;
    background-color: #E9EBEB;
    font-size: 1.3vw;
    font-family: メイリオ;
    text-align: center;
   }
   #search {
    width: 17%;
    height: 80%;
    background-color: #DD6B3D;
    border: none;
    font-size: 1.4vw;
    font-weight: bold;
    font-family: メイリオ;
    margin-top: 2%;
   }
  
  footer {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footerInner {
    width: 75%;
    height: 58%;
    
  }
  #footerLogo {
    width: 22%;
    height: 43%;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 5%;
  }
  #footerLogo img {
    display: block;
    width: 100%;
    height: 100%;
  }
  #footerLogo a {
    display: block;
    width: 100%;
    height: 100%;
  }
  #footerlist ul {
    display: flex;
    justify-content: space-between;
  }
  #footerlist ul li {
    background-image: url(../images/footerPoint.png);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 4%;
  }
  #footerInner address {
    text-align: center;
    font-style: normal;
  }
  #footerInner small {
    display: block;
    margin-top: 8%;
    text-align: center;
    font-size: 0.8em;
  }






}