@charset "UTF-8";

html{
   scroll-behavior: smooth;
   /*font-family: 'Actor', sans-serif;*/
font-family: 'sans-serif';
}

body{
  width: 98%;
  position: relative;
  z-index: 50;
  background-color: #fff;
}

header{
  width: 98%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 100;
  margin-top: -1%;

  background-color: rgba(255, 255, 255, 0.5);
}

nav{
  margin-left: -20%;
}


ul{
  display: flex;
  /*text-align: center;*/
  /*margin: 0 auto;*/
}

li{
  list-style: none;
  margin-left: 5%;

}

.logo{
  /*display: flex;*/
}

.logo h2{
  font-size: 5vw;
  color: rgba(0, 0, 0, 0.8);
  margin-top: -2%;
}

.logo img{
  width: 20vw;
  margin-top: 0%;
}

.for-hair{
  font-size: 2.5vw;
}

.navmenu a{
  font-size: 5vw;
  text-decoration: none;
  color: #333;
  display: block;
  border-radius: 3px;
  /*background-color: rgba(255, 255, 255, .5);
  box-shadow:0px 0px 10px 5px rgba(255, 255, 255, 1) inset;*/
}


.tophero img{
  width: 100%;
  margin-bottom: 0%;
  margin-top: 10%;
}

.shopname {/*---HELLO roze comentwrapper--------*/
  font-family: 'Actor', sans-serif;
  position: absolute;
  width: 90%;
  font-size: 10vw;
  color:  #fff;
  font-weight: bold;
  text-align: center;
  top: 0;
  transform: translate(5%,110%);
  background-color: rgba(112, 219, 207,.0);
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow:0px 0px 40px 20px rgba(0, 0, 0, 0.2) inset;
  border-radius: 20px;
  z-index: 50;
  border: solid 2px rgba(255, 255, 255, 0.5);
}

.roze{
  font-size: 10vw;
  /*color: #822424;*/
}

.small{
  font-size: 6vw;
  font-weight: normal;
  margin-top: -8%;
}

.reservewrapper{
  font-family: 'Joan', serif;
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
}
.reserve01{
  width: 40%;
  height: auto;
  background-color:rgba(255, 255, 255, 1);
  background-color: #adf57a;
  border-radius: 10px;
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .5);
}
.reserve01 a{
  color: #333;
  text-decoration: none;
  font-size: 3vw;
  padding: 2% 0;
  display: block;
}
.reserve02{
  width: 40%;
  background-color: rgba(217, 72, 72, 1);
  margin-left: 3%;
  border-radius: 10px;
  box-shadow: 5px 5px 10px 1px rgba(255, 255, 255, 1);
}
.reserve02 a{
  color: #fff;
  text-decoration: none;
  font-size: 3vw;
  padding: 2% 0;
  display: block;
}

.small01{
  font-size: 3vw;
}

.blog{
  width: 40%;
  height: auto;
  background-color:rgba(72, 156, 163, 1);
  border-radius: 3px;
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
  text-align: center;
  margin: 0 auto;
}
.blog a{
  color: #fff;
  text-decoration: none;
  font-size: 3vw;
  padding: 2% 0;
  display: block;

}

.snswrapper{
width: 30%;
display: flex;
margin-left: 35%;
}


.snswrapper a{
  width: 100%;
  margin-left: 10%;
  margin-right: 10%;
}

.calender iframe{
  margin-left: 5%;
}

.snswrapper2{
  display: flex;
  justify-content: center;
  gap:5%;
}
.snswrapper2 a{
text-align: center;

}

.snswrapper2 img{
  width: 30%;
}

.calendar{
  text-align: center;

}

/*----------menu----------------*/

.wrapper{
  margin-top: -15%;
}

.pricebord{
  font-family: 'sans-serif';
  width: 90%;
  padding: 0 2%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background-color: rgba(163, 79, 73, 0.2);
  box-shadow:0px 0px 30px 30px rgba(163, 79, 73, 0.2); inset;
  border-bottom:solid
  rgba(0, 0, 0, 0.5) 1px;
}
.pricebord p{
  font-size: 3vw;
  padding-top: 10%;
}

.pagename img{
  width: 30%;
}
.price p{
  font-size: 3.5vw;
}

.tax{
  width: 94%;
  text-align: right;
  font-size: 12px;
  color: #666;
}

.title {
  font-family: 'Actor', sans-serif;
  font-size: 5vw;
  text-align: center;
  padding: 0 2%;
  margin-top: 10%;
}

.title h2{
  font-family: 'Actor', sans-serif;
  font-size: 7vw;
  color: #555;
}

.title h3{
  font-family: 'Actor', sans-serif;
  font-size: 5vw;
  color: #fff;
  background-color: #333;
}

.title h4{
  font-size: 2vw;
  color: #555;
}

.title p{
  margin: 5% 2%;
   letter-spacing: 0.2em;
  font-size: 1.5vw;
  text-align: left;
  background-color: rgba(224, 237, 123, .8);
  box-shadow:0px 0px 50px 50px rgba(224, 237, 123, .8); inset;
border-radius: 30%;
}

.title img{
  /*width: 60vw;*/
  width: 100%;
margin-bottom: 0%;
margin-top: 0%;
 transform: rotate( 0deg );

}

.eg{
  font-size: 2.5vw;
  color: #999;
  color: rgba(163, 79, 73, 0.8);
}

.careitemwrapper{
  display: flex;
  margin: 0 auto;
  justify-content: center;
  background-color: #333;
}
.careitem {
  padding: 5%;
  text-align: center;
}

.link img{
  width: 20%;
  margin-top: 10%;
  padding: 2%;
  border: solid 0px;
  border-radius: 10px;
  box-shadow:3px 5px 5px 3px #888;
}

.linkwrapper{
  text-align: center;
}



.hearcatalogimage {
  display: flex;
  margin: 0 auto;

}

.hearcatalogimage img{
  width: 32%;
  margin-left: 1%;
  margin-top: 0%;

}

/*--------info-----------*/






.stylist{
  display: flex;
  margin: 0 auto;
  margin-bottom: 2%;
}




.flleecomentbox{
  width: 98%;
  height: 60vw;
  margin: 0 auto;
  background-color: #333;
  color: #fff;
margin-bottom: 10%;
}


.mapwrapper{
  width: 100%;
  margin-bottom: 10%;
}

.mapwrapper iframe{
  padding-left: 2%;

}

.addresscoment{
  width: 98%;
  color: #333;
  margin: 0 auto;
  background-color: rgba(112, 219, 207, 1);
  padding: 2%;
  margin-bottom: 10%;
}






.topbuttonwrapper a{
  position: fixed;
  bottom: 3%;
  right: 3%;


  text-decoration: none;
  background-color: rgba(255, 0, 0, 0.6);
  border: 1px solid #888;
  color: #fff;
  font-size: 5vw;
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 100;
}

.coment01 {
  color: #888;
  text-align: center;
}


.coment02{
  font-size: 14px;
  padding-left: 3%;
}





/*------info---------*/



.infotop {
/*  width: 100%;
  height: 90vw;*/

  /*background-image: url(images/top02.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;*/
}

.infotop h2{
  font-family: sans-serif;
  margin: 0;
  color: rgba(255, 255, 255, 1);
  font-size: 8vw;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translate(0%,10%);
  padding: 8% 1%;
}

.stylist{
  /*display: flex;*/
  margin: 0 auto;
  margin-bottom: 2%;
}



.staffcontainer{
  width: 100%;
}

.staffname h4{
  width: 98%;
  font-size: 1.8vw;
  background-color: #333;
  color: #fff;
  margin: 0;
  padding: 1% 0;
  font-weight: normal;
  margin: 0 auto;
}

.staffwrapper{
  margin: 0 auto;
  display: flex;
  width: 98%;
  height: 40vw;
}

.staffcoment{
  width: 70%;
  background-color: #333;
  margin: 0;
}

.staffcoment p{
  font-size: 2.5vw;
  padding: 5% 5%;
  color: #fff;
  margin: 0;
}

.staffimage01{
  width: 30%;
  height: 40vw;
  background-image: url(images/staff01.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.staffimage02{
  width: 30%;
  height: 40vw;
  background-image: url(images/staff02.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.staffimage03{
  width: 30%;
  height: 40vw;
  background-image: url(images/staff03.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.staffimage04{
  width: 30%;
  height: 40vw;
  background-image: url(images/staff04.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}




.recruitcoment{
  color: #333;
  text-align: center;

}

.recruitcoment h4{
  background-color: #333;
  text-align: center;
  font-size: 3.5vw;
  color: #fff;
  margin: 0;
}
.recruitcoment h5{
font-size: 2vw;
}
.recruitcoment p{
font-size: 2vw;

background-color: rgba(112, 219, 207, .2);
box-shadow:0px 0px 30px 30px rgba(112, 219, 207, .2); inset;
}







.mapwrapper{
  width: 100%;
  margin-bottom: 10%;
}

.mapwrapper iframe{
  padding-left: 2%;

}

.addresscoment{
  font-family: 'Joan', serif;
  font-size: 2vw;
  width: 96%;
  color: #333;
  margin: 0 auto;
  /*background-color: rgba(112, 219, 207, 1);
  background-color:#333;*/
  background-color: rgba(112, 219, 207, .2);
  box-shadow:0px 0px 30px 30px rgba(112, 219, 207, .2); inset;

  padding: 2%;
  margin-bottom: 10%;
}




.topbuttonwrapper a{
  position: fixed;
  bottom: 3%;
  right: 1%;

  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid #888;
  color: #fff;
  font-size: 5vw;
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 100;
}

.coment01{
  font-size: 14px;
}

.coment02{
  font-size: 14px;
  padding-left: 3%;
}










.footerwrapper{
  width: 100%;
  margin-top: 0%;
  padding: 1px;
  background-color: #111;
  color: #fff;
  text-align:center;
}

.footerwrapper h1{
  font-size: 2vw;
}

.footerwrapper p{
  font-family: 'Joan', serif;
  font-size: 12px;
}

.footerwrapper a{
  font-size: 12px;
color: #fff;
}



/*------- slide ----------*/

.hero-slide__img {
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-name: slideAnime;
  animation-timing-function: ease;
  display: block;
  min-height: 50vw;
  object-fit: cover;
  opacity: 0;
  width: 100%;
  margin-top: 9%;
}

.hero-slide__item:nth-of-type(1) .hero-slide__img {
  animation-delay: 0s;
}

.hero-slide__item:nth-of-type(2) .hero-slide__img {
  animation-delay: 3s;
}

.hero-slide__item:nth-of-type(3) .hero-slide__img {
  animation-delay: 6s;
}

@keyframes slideAnime {
  0% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  33% {
    opacity: 1;
  }

  49% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateX(-10%);
  }
}

/* ------ hero erea ------- */

.sitenav{
  width: 100%;
  margin-bottom: 5%;
  font-size: 2.2vw;
  font-weight: bold;
  margin: 0 0 10% 0;
  background-color: rgba(0, 0, 0, .5);
  box-shadow:0px 0px 10px 5px rgba(255, 255, 255, 1) inset;
  text-align: center;
}



.sitenav a{
  padding: 1% 3%;
  text-decoration: none;
  background-color:rgba(72, 156, 163, 1);
  background-color: #adf57a;
  color: #333;
  margin: 0 1.5%;

  border-radius: 2px;


}




.hotpepper2{
  background-color: rgba(217, 72, 72, 1);
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  margin:5% 5%;
  padding: 1% 5%;

}

.reservetel{
  background-color:#333;
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  margin:5% 5%;
  padding: 1% 5%;
}


.hero {
  height: 83vw;
  overflow: hidden;
  position: relative;
}

.hero__inner {
  margin: 0 auto;
  width: 1100px;
}

/* ------ hero title ------- */
.hero__title h2{
  font-family: sans-serif;
  font-size: 8vw;
  color: rgba(255, 255, 255, 1);
  left: 0;
  position: absolute;
  right: 0;
  top:0;
  transform: translate(0%,20%);
  width: 100%;
  /*background-color: rgba(0, 0, 0, 0.3);*/
  padding:1%;
}

.hero-slide__item {
  bottom: 0;
  height: 100%;
  position: absolute;
  right: -10%;
  width: 110%;
}


/*-------- slide end--------------*/




























@media screen and (min-width: 1000px) {

  html{
    width: 70%;
     scroll-behavior: smooth;
     /*font-family: 'Actor', sans-serif;*/
  font-family: 'sans-serif';
  margin: 0 auto;
  }

  body{
    width: 98%;
    position: relative;
    z-index: 50;
    background-color: #fff;
  }

  header{
    width: 70%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 100;
    margin-top: -1%;

    background-color: rgba(255, 255, 255, 0.5);
  }

  nav{
    margin-left: -20%;
  }


  ul{
    display: flex;
    /*text-align: center;*/
    /*margin: 0 auto;*/
  }

  li{
    list-style: none;
    margin-left: 5%;

  }

  .logo{
    display: flex;
  }


  .logo img{
    width: 15vw;

    margin-top: 0%;
  }

  .for-hair{
    font-size: 2.5vw;
  }

  .navmenu a{
    font-size: 3vw;
    text-decoration: none;
    color: #333;
    display: block;
    border-radius: 3px;
    /*background-color: rgba(255, 255, 255, .5);
    box-shadow:0px 0px 10px 5px rgba(255, 255, 255, 1) inset;*/
  }


  .tophero img{
    width: 100%;
    margin-bottom: 0%;
    margin-top: 10%;
  }

  .shopname {/*---HELLO roze comentwrapper--------*/
    font-family: 'Actor', sans-serif;
    position: absolute;
    width: 70%;
    font-size: 7vw;
    color:  #fff;
    font-weight: bold;
    text-align: center;
    top: 0;
    transform: translate(20%,70%);
    background-color: rgba(112, 219, 207,.0);
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow:0px 0px 40px 20px rgba(0, 0, 0, 0.2) inset;
    border-radius: 20px;
    z-index: 50;
    border: solid 2px rgba(255, 255, 255, 0.5);
  }

  .roze{
    font-size: 7vw;
    /*color: #822424;*/
  }

  .small{
    font-size: 4vw;
    font-weight: normal;
    margin-top: -8%;
  }

  .reservewrapper{
    font-family: 'Joan', serif;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
  }
  .reserve01{
    width: 40%;
    height: auto;
    background-color:rgba(255, 255, 255, 1);
    background-color: #adf57a;
    border-radius: 10px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .5);
  }
  .reserve01 a{
    color: #333;
    text-decoration: none;
    font-size: 3vw;
    padding: 2% 0;
    display: block;
  }
  .reserve02{
    width: 40%;
    background-color: rgba(217, 72, 72, 1);
    margin-left: 3%;
    border-radius: 10px;
    box-shadow: 5px 5px 10px 1px rgba(255, 255, 255, 1);
  }
  .reserve02 a{
    color: #fff;
    text-decoration: none;
    font-size: 3vw;
    padding: 2% 0;
    display: block;
  }

  .small01{
    font-size: 3vw;
  }

  .blog{
    width: 40%;
    height: auto;
    background-color:rgba(72, 156, 163, 1);
    border-radius: 3px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
    text-align: center;
    margin: 0 auto;
  }
  .blog a{
    color: #fff;
    text-decoration: none;
    font-size: 3vw;
    padding: 2% 0;
    display: block;

  }

  .snswrapper{
  width: 30%;
  display: flex;
  margin-left: 35%;
  }


  .snswrapper a{
    width: 100%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .calender iframe{
    margin-left: 5%;
  }

  .snswrapper2{
    display: flex;
    justify-content: center;
    gap:5%;
  }
  .snswrapper2 a{
  text-align: center;

  }

  .snswrapper2 img{
    width: 30%;
  }

  .calendar{
    text-align: center;

  }

  /*----------menu----------------*/

  .wrapper{
    margin-top: -15%;
  }

  .pricebord{
    font-family: 'sans-serif';
    width: 90%;
    padding: 0 2%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    background-color: rgba(163, 79, 73, 0.2);
    box-shadow:0px 0px 30px 30px rgba(163, 79, 73, 0.2); inset;
    border-bottom:solid
    rgba(0, 0, 0, 0.5) 1px;
  }
  .pricebord p{
    font-size: 1.8vw;
    padding-top: 10%;
  }

  .pagename img{
    width: 30%;
  }
  .price p{
    font-size: 2vw;
  }

  .tax{
    width: 94%;
    text-align: right;
    font-size: 12px;
    color: #666;
  }

  .title {
    font-family: 'Actor', sans-serif;
    font-size: 5vw;
    text-align: center;
    padding: 0 2%;
    margin-top: 10%;
  }

  .title h2{
    font-family: 'Actor', sans-serif;
    font-size: 4vw;
    color: #555;
  }

  .title h3{
    font-family: 'Actor', sans-serif;
    font-size: 3vw;
    color: #fff;
    background-color: #333;
  }

  .title p{
    width: 80%;
    font-size: 14px;
    text-align: left;
    padding-left: 4%;
    margin-bottom: 4%;
  }

  .title img{
    width: 60vw;
  margin-bottom: 0%;
  margin-top: 0%;
   transform: rotate( 0deg );

  }

  .eg{
    font-size: 2.5vw;
    color: #999;
    color: rgba(163, 79, 73, 0.8);
  }

  .careitemwrapper{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    background-color: #333;
  }
  .careitem {
    padding: 5%;
    text-align: center;
  }





  /*--------info-----------*/






  .stylist{
    display: flex;
    margin: 0 auto;
    margin-bottom: 2%;
  }




  .flleecomentbox{
    width: 98%;
    height: 60vw;
    margin: 0 auto;
    background-color: #333;
    color: #fff;
  margin-bottom: 10%;
  }


  .mapwrapper{
    width: 100%;
    margin-bottom: 10%;
  }

  .mapwrapper iframe{
    padding-left: 2%;

  }

  .addresscoment{
    width: 98%;
    color: #333;
    margin: 0 auto;
    background-color: rgba(112, 219, 207, 1);
    padding: 2%;
    margin-bottom: 10%;
  }






  .topbuttonwrapper a{
    position: fixed;
    bottom: 3%;
    right: 3%;


    text-decoration: none;
    background-color: rgba(255, 0, 0, 0.6);
    border: 1px solid #888;
    color: #fff;
    font-size: 3vw;
    padding: 10px 20px;
    border-radius: 20px;
    z-index: 100;
  }

  .coment01 {
    color: #888;
    text-align: center;
  }


  .coment02{
    font-size: 14px;
    padding-left: 3%;
  }





  /*------info---------*/



  .infotop {
  /*  width: 100%;
    height: 90vw;*/

    /*background-image: url(images/top02.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;*/
  }

  .infotop h2{
    font-family: sans-serif;
    margin: 0;
    color: rgba(255, 255, 255, 1);
    font-size: 5vw;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: translate(0%,10%);
    padding: 8% 1%;
  }

  .stylist{
    /*display: flex;*/
    margin: 0 auto;
    margin-bottom: 2%;
  }



  .staffcontainer{
    width: 100%;
  }

  .staffname h4{
    width: 98%;
    font-size: 1.8vw;
    background-color: #333;
    color: #fff;
    margin: 0;
    padding: 1% 0;
    font-weight: normal;
    margin: 0 auto;
  }

  .staffwrapper{
    margin: 0 auto;
    display: flex;
    width: 98%;
    height: 40vw;
  }

  .staffcoment{
    width: 70%;
    background-color: #333;
    margin: 0;
  }

  .staffcoment p{
    font-size: 2.5vw;
    padding: 5% 5%;
    color: #fff;
    margin: 0;
  }

  .staffimage01{
    width: 30%;
    height: 40vw;
    background-image: url(images/staff01.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .staffimage02{
    width: 30%;
    height: 40vw;
    background-image: url(images/staff02.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .staffimage03{
    width: 30%;
    height: 40vw;
    background-image: url(images/staff03.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .staffimage04{
    width: 30%;
    height: 40vw;
    background-image: url(images/staff04.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }




  .recruitcoment{
    color: #333;
    text-align: center;

  }

  .recruitcoment h4{
    background-color: #333;
    text-align: center;
    font-size: 3.5vw;
    color: #fff;
    margin: 0;
  }
  .recruitcoment h5{
  font-size: 2vw;
  }
  .recruitcoment p{
  font-size: 2vw;

  background-color: rgba(112, 219, 207, .2);
  box-shadow:0px 0px 30px 30px rgba(112, 219, 207, .2); inset;
  }







  .mapwrapper{
    width: 100%;
    margin-bottom: 10%;
  }

  .mapwrapper iframe{
    padding-left: 2%;

  }

  .addresscoment{
    font-family: 'Joan', serif;
    font-size: 2vw;
    width: 96%;
    color: #333;
    margin: 0 auto;
    /*background-color: rgba(112, 219, 207, 1);
    background-color:#333;*/
    background-color: rgba(112, 219, 207, .2);
    box-shadow:0px 0px 30px 30px rgba(112, 219, 207, .2); inset;

    padding: 2%;
    margin-bottom: 10%;
  }




  .topbuttonwrapper a{
    position: fixed;
    bottom: 3%;
    right: 1%;

    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #888;
    color: #fff;
    font-size: 2vw;
    padding: 10px 20px;
    border-radius: 20px;
    z-index: 100;
  }

  .coment01{
    font-size: 14px;
  }

  .coment02{
    font-size: 14px;
    padding-left: 3%;
  }










  .footerwrapper{
    width: 100%;
    margin-top: 0%;
    padding: 1px;
    background-color: #111;
    color: #fff;
    text-align:center;
  }

  .footerwrapper h1{
    font-size: 2vw;
  }

  .footerwrapper p{
    font-family: 'Joan', serif;
    font-size: 12px;
  }

  .footerwrapper a{
    font-size: 12px;
  color: #fff;
  }































  /*------- slide ----------*/

  .hero-slide__img {
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-name: slideAnime;
    animation-timing-function: ease;
    display: block;
    min-height: 50vw;
    object-fit: cover;
    opacity: 0;
    width: 100%;
    margin-top: 9%;
  }

  .hero-slide__item:nth-of-type(1) .hero-slide__img {
    animation-delay: 0s;
  }

  .hero-slide__item:nth-of-type(2) .hero-slide__img {
    animation-delay: 3s;
  }

  .hero-slide__item:nth-of-type(3) .hero-slide__img {
    animation-delay: 6s;
  }

  @keyframes slideAnime {
    0% {
      opacity: 0;
    }

    16% {
      opacity: 1;
    }

    33% {
      opacity: 1;
    }

    49% {
      opacity: 0;
    }

    100% {
      opacity: 0;
      transform: translateX(-10%);
    }
  }

  /* ------ hero erea ------- */

  .sitenav{
    width: 100%;
    margin-bottom: 5%;
    font-size: 1.5vw;
    font-weight: bold;
    margin: 0 0 10% 0;
    background-color: rgba(0, 0, 0, .5);
    box-shadow:0px 0px 10px 5px rgba(255, 255, 255, 1) inset;
    text-align: center;
  }



  .sitenav a{
    padding: 1% 3%;
    text-decoration: none;
    background-color:rgba(72, 156, 163, 1);
    background-color: #adf57a;
    color: #333;
    margin: 0 1.5%;

    border-radius: 2px;


  }

  .hearcatalogimage {
    display: flex;
    justify-content: center;
    gap:1%;
    margin-bottom: 10%;
    margin-top: -10%;
  }

  .hearcatalogimage img{
    width: 32%;
  }

























  .hotpepper2{
    background-color: rgba(217, 72, 72, 1);
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    margin:5% 5%;
    padding: 1% 5%;

  }

  .reservetel{
    background-color:#333;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    margin:5% 5%;
    padding: 1% 5%;
  }


  .hero {
    height: 83vw;
    overflow: hidden;
    position: relative;
  }

  .hero__inner {
    margin: 0 auto;
    width: 1100px;
  }

  /* ------ hero title ------- */
  .hero__title h2{
    font-family: sans-serif;
    font-size: 5vw;
    color: rgba(255, 255, 255, 1);
    left: 0;
    position: absolute;
    right: 0;
    top:0;
    transform: translate(0%,20%);
    width: 100%;
    /*background-color: rgba(0, 0, 0, 0.3);*/
    padding:1%;
  }

  .hero-slide__item {
    bottom: 0;
    height: 100%;
    position: absolute;
    right: -10%;
    width: 110%;
  }


  /*-------- slide end--------------*/


}