@charset "utf-8";

/*キービジュアル
******************************************************************/

.mainslider{
width:100%;
height:70vh;
}

.mainslider li{
  width:100%;
  height:70vh;
}

.mainvisual{
  position: relative;
  padding-top: 100px;
}

.icon-flex{
  position: absolute;
  bottom:0;
  right:10px;
  max-width:50px;
  height: auto;
  padding-bottom:10px;
}


#staff, #gallery{
  /*background:#d8d8d8;
  position:relative;
  z-index:-1;*/
}


/*PC版　---------------------------------------　　*/
@media screen and (min-width: 768px){

/*.main{
  margin-top:-135px;
  }*/

  .mainslider{
    width:100%;
    height:685px;
    height:500px;
    }

  .mainslider li{
    width:100%;
    height:685px;
    height:500px;
  }
  
.mainvisual{
  padding-top: 150px;
  max-width:1200px;
  margin:0 auto;
}




.icon-flex{
  max-width:98%;
  position: absolute;
  top:0;
  right:0;
  left:0;
  display: flex;
  height:100%;
  align-items: center;
  justify-content: space-between;
  margin:0 auto;
}


.pc-igicon .fa-instagram{
  color:#fff;
  margin-top:100px;
}

.icon-flex .scl-box{
align-self: flex-end;
}

}

/*スクロールアニメーション　***/

.scrolldown{
  color:#fff;
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  padding: 10px 10px 100px;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;

}
.scrolldown::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 90px;
  background: #fff;
}

.scrolldown::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}






/*コンセプト
******************************************************************/

.c-title{
  padding-left:55px;
  margin:-50px 0 40px;
}

.c-title::before{
content:"";
display: inline-block;
width:50px;
height:1px;
background:#7FCCBF;
position: absolute;
top:1.1rem;
left:0;
}

.concept-wrap{
  display: flex;
  flex-direction: column;
}

.c-txt{
  width:90%;
  padding-left:5%;
  font-size: 1.3rem;
  letter-spacing: 2px;
  line-height: 1.7;
  margin-bottom:30px;
}

.concept-wrap .c-image{
  width:80%;
  align-self: flex-end ;
}

.js-img-wrap.concept{
height:300px;
background:url('../img/c-img.jpg') no-repeat top center;
background-size:cover;
}

.js-img-wrap.concept:before{
  /*background:#BE7CB2;*/
}

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

  .c-title{
    padding-left:80px;
  }
  
  .c-title::before{
  width:70px;
  top:1.3rem;
  }
  
  .concept-wrap{
    display: flex;
    flex-direction:row;
  }
  
  .c-txt{
    width:55%;
    padding-left:0;
    font-size: 1.5rem;
    letter-spacing: 3px;
    line-height: 2;
  }
  
  .concept-wrap .c-image{
    width:50%;
    margin-top:100px;
  }

  .js-img-wrap.concept{
    height:420px;
    }


}


/*NEWS
******************************************************************/

.contents-wrap.news{
  border:1px solid #7FCCBF/*#BE7CB2*/;
  position: relative;
  width:90%;
}

.n-title{
  width:4em;
  position: absolute;
  right:0;
  left:0;
  top:-10px;
  margin:auto;
  text-align: center;
  background:#f0f0f0;
  }

.news-list{
  padding:10% 5% 5%;
}


.news-flexinner{
  display: flex;
  border-bottom:1px solid #d8d8d8;
  padding:4% 0;
  align-items: center;
}

.news-list li{

}

.news-list li a{
  display:block ;
}

.news-img{
  width:100px;
  margin-right:2%;
}
  
.news-txt{
  width:calc(100% - 100px);
  font-size:1.2rem;
  line-height:1.4;
}

.news-date{
  display: block;
  margin-top:3%;
  /* text-align: right; */
  font-size:1.1rem;
}

.news-list li:last-child .news-flexinner{
  border-bottom:0;
}

.news-list li:last-child .news-txt{
  padding-bottom:0;
}

.kansen-txt{
  font-size:1.2rem;
  line-height: 1.4;
  padding-bottom:4%;
  border-bottom:1px solid #d8d8d8;
}

.kansen-link{
  display: block;
  width:calc(8em + 5px);
  font-size:1.2rem;
  padding:2% 0;
  border-bottom:1px solid #231815;
}

.fa-caret-right{
  padding-left:5px;
}
  
  
  @media screen and (min-width: 768px){


      .n-title{
        width:5em;
        top:-15px;
        }

      .contents-wrap.news{
        width:70%;
      }

      .news-img{
        width:170px;
        margin-right:3%;
      }
        
      .news-txt{
        font-size:14px;
        width:calc(100% - 200px);
        line-height:1.6;
        padding-bottom:0;
      }

      .news-date{
        font-size:12px;
      }

      .news-flexinner{
        padding:2% 0;
      }

      .news-list li a{
        transition: .2s;
      }

      .news-list li a:hover{
        opacity: 0.8;
      }
    
      .kansen-txt{
        font-size:1.4rem;
        line-height: 1.6;
        text-align: center;
      }

      .kansen-link{
        font-size:1.3rem;
        padding:2% 0 0.2%;
        margin:0 auto;
      }
      
      .fa-caret-right{
        padding-left:5px;
      }
    
 
  }

/*ショップインフォ
******************************************************************/

.i-title{
  text-align: center;
  padding-bottom:55px;
  margin-bottom:40px;
}

.i-title::before{
content:"";
display: inline-block;
width:1px;
height:50px;
background:#BE7CB2/*#7FCCBF*/;
position: absolute;
top:1.1rem;
left:0;
right:0;
margin:15px auto 0;
}

.si-wrap{
  text-align: center;
}

.shop-name{
  text-align: center;
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:2rem;
  margin-bottom:30px;
  letter-spacing: 3px;
}

.info-txt{
  font-size:1.4rem;
  margin-bottom:50px;
}

.info-txt dt{
  font-weight: 600;
  letter-spacing: 3px;
  margin-bottom:5px;
}

.info-txt dd{
  margin-bottom:25px;
  letter-spacing: 1px;
  line-height: 1.5;
}

.txt-hosoku{
font-size:1.2rem;
color:#6e6e6e;
line-height: 1.5;
margin-top:5px;
}

.access-box{
  width:90%;
  margin:0 auto;
}

.js-img-wrap.map-img{
height:200px;
background:#fff url(../img/map2.png) no-repeat;
background-position: center center;
background-size:110%;
margin-bottom:10px !important;
}

.js-img-wrap.map-img:before{
  /*background:#7FCCBF;*/
}

.infolink-web{
 margin:10px 0 5px;
}

.infolink-web a{
  color:#231815;
  border:1px solid #231815;
  display: inline-block;
  font-size: 1.4rem;
  width:12em;
  text-align: center;
  padding:10px 0;
  border-radius: 20px;
  transition: .2s;
}

.infolink-web.parking  a{
  width:17em;
}

/* .co-news-link a{
  display: block;
  border:1px solid #231815;
  font-size: 1.4rem;
  padding:3%;
  margin-top:30px;
  background: hsl(0, 0%, 100%, 0.8)
}

.co-news-title{
  font-size:1.5rem;
  padding-bottom:10px;
  border-bottom:1px solid #ccc;
  text-align: left;
}

.co-news-txt{
  font-size:1.3rem;
  padding-top:10px;
  text-align: left;
  line-height: 1.4;
}

.co-news-link{
  font-size:1.3rem;
  margin-top:10px;
  text-align: right;
}

.co-news-link .fa-caret-right{
color:#231815;
margin-left:5px;
} */



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

  .i-title{
    padding-bottom:90px;
  }
  
  .i-title::before{
  height:70px;
  background:#BE7CB2/*#7FCCBF*/;
  margin:20px auto 0;
  }
  
.si-wrap{
  text-align: left;
  display: flex;
}

.info-box{
  width:50%;
}

.shop-name{
  text-align: left;
  font-size:2.4rem;
  margin-bottom:30px;
}

.info-txt{
  width:100%;
  font-size:1.6rem;
  margin-bottom:50px;
}

.access-box{
  width:50%;
}

.js-img-wrap.map-img{
  width: 540px;
  height:297px;
  }

  /*画像サイズ*/
.js-img-wrap.map-img .js-image{
  padding-top: 297px;/*画像比率指定*/
}

.infolink-web a{
  font-size: 1.5rem;
  padding:12px 0;
  transition: .2s;
}

.infolink-web a:hover{
 background:#231815;
 color:#fff;
}

}


/*スタッフ
******************************************************************/

#staff{
  position: relative;
  padding-top:10px;
}

.bg100-gr{
  background:#d8d8d8;
  position: relative;
  /*z-index: -1;*/
}

.staff-wrap, .gallery-wrap{
  margin-top:86px;
  padding-bottom:96px;
  position: relative;
}

.st-title{
  text-align: right;
  padding-right:45px;
  top:-10px;
}

.st-title::before{
content:"";
display: inline-block;
width:1px;
height:290px;
background:#BE7CB2;
position: absolute;
right:110px;
top:-40px;
transform: rotate(45deg) ;
}


.staff-img1box{
  width:90%;
  margin:0 auto;
  z-index: 4;
}

.staff-txt{
  width:100%;
}

.staff-name span{
  display:block;
  font-size:1.6rem;
}

.staff-name{
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 3px;
  font-size:2.2rem;
  margin-top:12px;
}

.staff-txt{
  font-size:1.2rem;
  line-height:1.5;
  margin:10px auto 35px; 
}

/*画像サイズ*/
.js-img-wrap.staff1{
  width:100%;
  height:360px;
}

/* .staff-img2box{
  width:100%;
  height:430px;
  position: relative;
} */

/*画像サイズ*/
/* .js-img-wrap.staff2{
  width:80%;
  height:275px;
  position: absolute;
  right:0;
} */

/*画像サイズ*/
/* .js-img-wrap.staff3{
  width:50%;
  height:230px;
  position: absolute;
  top:200px;
  left:5%;
} */

.js-img-wrap.staff1 .js-image {
  padding-top: 360px;/*画像比率指定*/
}

/* .js-img-wrap.staff2 .js-image {
  padding-top: 275px;
} */

/* .js-img-wrap.staff3 .js-image{
  padding-top: 230px;
} */


.js-img-wrap.staff1:before, .js-img-wrap.staff2:before, .js-img-wrap.staff3:before {
  /*background:#BE7CB2;*/
}

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

.staff-wrap, .gallery-wrap{
  margin-top:86px;
  padding-bottom:96px;
  max-width:1200px;
  padding:100px 80px;
  margin:0 auto;
}

.st-title{
  max-width:1200px;
  margin:0 auto;
  padding-right:45px;
  top:-15px;

}

  .staff-flex{
  display: flex;
  /* justify-content: space-between; 3人の場合 */
  justify-content: center;

}

.staff-img1box {
 /* width:31%; 
 margin:0;
 3人の場合*/
 width:35%;
 margin:4%;
}

.staff-name span{
  font-size:1.3rem;
  margin-bottom:5px;
}

.staff-name{
  letter-spacing: 2px;
  font-size:2.2rem;
  margin-top:12px;
}

.staff-txt{
  width:100%;
  font-size:1.2rem;
  line-height:1.5;
}

/* .staff-img2box{
  width:50%;
  height:calc(360px + 240px);
  position: absolute;
  right:80px;
  top:220px;
  z-index: 2;
} */


/*画像サイズ*/
.js-img-wrap.staff1{
  width:100%;
  height:380px;
}

/*画像サイズ*/
/* .js-img-wrap.staff2{
  max-width:320px;
  height:320px;
  position: absolute;
  right:0;
} */

/*画像サイズ*/
/* .js-img-wrap.staff3{
  max-width:246px;
  height:310px;
  position: absolute;
  top:250px;
  left:inherit;
  right:250px;
} */

.js-img-wrap.staff1 .js-image {
  padding-top: 380px;/*画像比率指定*/
}

/* .js-img-wrap.staff2 .js-image {
  padding-top: 360px;
} */

/* .js-img-wrap.staff3 .js-image{
  padding-top: 310px;
} */

}


/*メニュー
******************************************************************/

.m-title{
width:4em;
text-align: center;
margin:0 auto 40px;
}

.m-title::before{
  content:"";
  display: inline-block;
  width:50px;
  height:1px;
  background:#BE7CB2/*#7FCCBF*/;
  position: absolute;
  top:1.1rem;
  left:-50px;
  }
 
  .m-title::after{
    content:"";
    display: inline-block;
    width:50px;
    height:1px;
    background:#BE7CB2/*#7FCCBF*/;
    position: absolute;
    top:1.1rem;
    right:-50px;
    }


.menulist{
  width:80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:0 auto;
  font-size:1.4rem;
  letter-spacing: 1px;
}
  
.menulist dt{
 width:40%;
 padding-bottom:10px;
 margin-bottom:30px;
 border-bottom:1px solid #ccc;
}

.menulist dd{
  width:60%;
  text-align: right;
  padding-bottom:10px;
  margin-bottom:30px;
  border-bottom:1px solid #ccc;
}

.menulist dd span{
  display: inline-block;
  font-size:1.2rem;
  color:#6e6e6e;
  margin-left:4px;
}

.kessai{
  width:90%;
  font-size:1.2rem;
  margin:0 auto;
  padding:15px 20px;
  line-height: 1.5;
  background:#fcfcfc;
}


@media screen and (min-width: 768px){
  .m-title{
    width:5em;
    margin:0 auto 80px;
    }

  .m-title::before{
    top:1.4rem;
    width:70px;
    }
   
    .m-title::after{
      top:1.4rem;
      width:70px;
      }
  
  .menulist{
    width:60%;
    font-size:1.6rem;
  }

  .menulist dt{
    margin-bottom:50px;
    border-bottom:1px solid #ccc;
   }
   
   .menulist dd{
     margin-bottom:50px;
     border-bottom:1px solid #ccc;
   }

  .menulist dd span{
    font-size:1.3rem;
  }

  .kessai{
    width:60%;
    font-size:1.4rem;
  }

}

/*ギャラリー 
******************************************************************/

.g-title{
  max-width:1200px;
  margin:0 auto;
  padding-left:45px;
  top:-10px;
}

.g-title::before{
content:"";
display: inline-block;
width:1px;
height:290px;
background:#7FCCBF/*#BE7CB2*/;
position: absolute;
left:110px;
top:-40px;
transform: rotate(-45deg) ;
}



.gallery-photo{
  display: flex;
  flex-wrap: wrap;
  width:90%;
  margin:0 auto;
}

.gallery-photo li{
  width:49%;
  margin:0 2% 2% 0;
}

.gallery-photo li:nth-child(even){
  margin:0 0 2% 0;
}



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

  .g-title{
    top:-15px;
  }

  .g-image{
   margin:0 10px;
    }

    .gallery-photo li{
      width:calc(94%/4);
    }

    .gallery-photo li:nth-child(even){
      margin:0 2% 2% 0;
    }

    .gallery-photo li:nth-child(4), .gallery-photo li:nth-child(8){
      margin:0 0 2% 0;
    }


}  




/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    width: 10px;
    height: 10px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 10px;
    height: 10px;
    border:1px solid #000;
    content: '';
    text-align: center;
    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/*video 
******************************************************************/
.video-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.video-wrap:before {
	content: "";
    display: block;
    padding-top: calc(100vh - 60px);
}
.video-wrap .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent url(../img/pattern.png)repeat top left;
}
.video-wrap video{
	max-height: initial;
    max-width: initial;
    min-height: 100vh;
    min-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}
.video-wrap img {
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 25%;
}

/*PC版*/
@media screen and (min-width: 768px){
  .video-wrap {
    width: 100%;
    height:80vh;
    overflow: hidden;
    position: relative;
  }



}