@charset 'utf-8';

@font-face {
  font-family: "kurobara-gothic";
  src:local("kurobara-gothic"); /* Typekitの指定 */
  font-display: swap; /* ←これを必ず入れる！ */
}

html{
  -webkit-text-size-adjust: 100%;
  font-family:'Arvo-regular.ttf', ’ヒラギノ角ゴProN’, '筑紫ゴシックPro B';
  font-size: 16px;
 
}

p{
  font-size: 1rem;
  }

h4{
  font-size: 1.5rem;
}
h3{
  font-size: 2rem;
}

h2{
  font-size: 3rem;
}

h1{
  font-size:4rem;
  font-family: "kurobara-gothic";
}

body{
  background-color: #ffefd5;
}

a{
  text-decoration: none;
}

a:hover img{
  opacity:0.5;

}

li{
  list-style: none;
}
img{
  max-width:100%;
  height: auto;
  display:block;
}
img-responsive{
  display:block;
  max-width: 100%;
  height: auto;
}

/*------header---logo animation---------*/
 #logoAnimation{
 width: 100%;
 height: 100vh;
 background-color:#da81b2;
 display:flex;
 align-items: center;
 justify-content: center;
 position:fixed;
 color:#333;
 z-index:9999;

}


#splash_logo {  
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

#splash_logo svg{
  width: 100%;
}

#Layer_1 path{
  fill-opacity:0;
  transition: fill-opacity .5s;
  fill:none;
  stroke:#333;
}

#Layer_1.done path{
  fill:#fff;
  fill-opacity: 1;
  stroke:none;
  
}

.fade-out-target{
  opacity:1;
  transition:opacity 1s ease-out;
}

.fade-out{
  opacity:0;
}
/*-------slider -------*/

.hero{
  width: 100%;
  height: 100vh;
  position:relative;
  top:0;
  left:0;
  z-index:0; 
  opacity:0;
  visibility:hidden;
  transition:opacity 1.5s ease-in-out;
}

.hero.loaded{
  opacity:1;
  visibility:visible;
}



 .logoTrans{
  position:absolute;
  width: 30%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  z-index: 999;
  visibility: hidden;
  transition:opacity 1s ease,
  visibility 1s ease;  
 }

 .logoTrans.show{
  opacity:1;
  visibility:visible;
 }


.item{
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100vh;
  opacity:0;
  animation: img-change 20s infinite;  
}

.item:nth-child(1){
  animation-delay:0s;
}

.item:nth-child(2){
  animation-delay:5s;
}

.item:nth-child(3){
  animation-delay:15s;
}



.item img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  filter:blur(2px); 
}


@keyframes img-change {
  0%{
    opacity:0;
    scale:.9;
  }
  10%{
    opacity:1;
  }
  20%{
    opacity:1;
  }
  30%{
    opacity:1;
  }
 40%{
    opacity:1;
  }
  100%{
    opacity:0;
    scale:1;
  }
}


/*------------ScrollDown------------*/

.scrolldown{
  position: absolute;
  right:10%;
  bottom:10%;
  height: 60px;
  animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
  0%{ bottom:1%}
  50%{bottom:3%}
  100%{bottom:1%}
}
.scrolldown span{
  position:absolute;
  left:-30px;
  bottom:20px;
  color:#fff;
  font-size: 1.5rem;
  letter-spacing:0.05em;
  -ms-writing-mode: tb-rl;
  writing-mode:vertical-rl;
}

.scrolldown::before{
  content:"";
  position: absolute;
  bottom:0;
  right:-6px;
  width: 1px;
  height: 20px;
  background: #fff;
  transform:skewX(-31deg);
}

.scrolldown::after{
  content:"";
  position: absolute;
  bottom:0;
  right:0;
  width: 1px;
  height: 50px;
  background: #fff;
}
/*----------side------------*/


  #side{  
  position:fixed;
  top:0;
  z-index:999; 
  left:0;
  width:5% ;
  height: 100vh;
  background-color:#e6e0d4;  
}

 #side-navigation{
  position:fixed;
  background:#e6e0d4;
  width: 100%;
  height: 100vh;
  top:0;
  left:-120%;
  transition:all .6s;
  z-index:999;
}
 #side-navigation.panelActive{
  left:0;  
}


#side-navigation ul {  
  position:absolute;   
  transition:all .6s; 
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}


#side-navigation ul li{
  color:#05121e;
  padding:10px;
  font-family:"kurobara-gothic";
  font-size: 2rem;
}

/*----------Side hamburger menu-------------*/
 .petitLogo{
  width: 70px;
  position:absolute;
  top:10%;
  left:0%;
}
.petitLogo img{
  width: 100%;
}

#nav{
  position:relative;  
  top:30%;
  left:0%;
  cursor:pointer;
  width: 50px;
  height: 60px;
  border-radius: 5px;
}

 #nav span{
  position: absolute;
  display:inline-block;
  transition:all .4s;
  left:50%;
  transform:translateY(-50%);
  height: 2px;
  border-radius: 2px;
  background-color: #05121e;
  width: 50%;
}

 #nav span:nth-last-of-type(1){
 top:15px;
}

 #nav span:nth-last-of-type(2){
  top:23px;
}

 #nav span:nth-last-of-type(3){
  top:31px;
}

#nav.active span:nth-last-of-type(1){
  top:18px;
  left:18px;
  transform:translateY(6px) rotate(-45deg);
  width: 30%;
  z-index:2000;
 }

 #nav.active span:nth-last-of-type(2){
  opacity:0;
}
 #nav.active span:nth-last-of-type(3){
  top:30px;
  left:18px;
  transform:translateY(-6px) rotate(45deg);
  width: 30%;
  z-index:2000;
}



/*-------ABOUT-------------*/


section #ABOUT{ 
  width: 100vw;
  height: 100vh; 
}


/*--------------Sub-Title-----------*/
.sub-title{
 width: 30%;
 height: 30vh;
 margin: 40px auto;
 letter-spacing: 0.5rem;
 position:relative;
}

.sub-title h1{
  position: absolute;
  top:45%;
  left:50%;
  transform:translateX(-50%);
  
}

.sub-title h1::before,
.sub-title h1::after{   
  content:"";
  width:30px;
  height: 2px;
  border-top:2px solid #05121e;
  border-bottom:2px solid #05121e;
  display:inline-block; 
  position:absolute;
  top:50%;  
}

h1::before{
  left:-35px;
}

.warpt{
  position:absolute;
  display:block;
  top:40px;
  left:50%;  
  transform:translateX(-50%);
  text-align: center;  
}

.warpt img{
 max-width: 100%;
}

.pentext{
  position:absolute;
  top:5%;
  right:-48%;
  top:20%;
  opacity:1;
 
}

.pentext img{
  max-width: 100%;
}

.sub-title p{
  font-family:"kurobara-gothic";
  display: block;
  position: absolute;
  top:80%;
  left:50%;
  transform:translateX(-50%);
  font-family: "oculi-display", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;

}

/*-----------お店紹介スライダー-------------*/

.swiper {
  width: 60%;
  height: 80vh;
  overflow:hidden;
}

.swiper-slide img{
  width: 100%;
  object-fit: cover;
  filter:blur(1px);
  
}

/*--------------お店キャプション-------------------*/

.explication,
.explication2{
  width: 70%;
  height: 50vh;
  text-align: center;
  background-color:#f5f5f5;
  padding:30px;
  margin:20px auto;
  line-height: 1.5;
  font-family: "kurobara-gothic";
}

.explication h3{
  padding:20px;
}


.explication3 {
  width: 70%;
  height: 35vh;
  text-align:center;
  background-color: #f5f5f5;
  margin:30px auto;
  padding:30px;
  
}

.explication2 p,
.explication3 p{
  line-height: 2;
  font-family: "kurobara-gothic"!important;

}

a.event-button{
  display: block;          /* 枠や背景を持たせるため */
  background-color: #e6e0d4;
  border-radius: 50px;
  border: 3px double #564949;
  width: 80%;
  margin: 50px auto 0;
  padding: 15px;
  position: relative;
  z-index: 10;
  cursor: pointer;
  text-align: center;      /* テキストを中央揃え */
  text-decoration: none;   /* 下線消す */
  color: inherit;    
  font-size: 1.2rem;
  font-weight: bold;
  box-sizing: border-box;  /* Safari用 */
  -webkit-appearance: none; /* Safariリセット */      /* 文字色は親に合わせる */
}

.english p{
  font-family: "kurobara-gothic";
  color:#948c8c;
  padding-top:20px;
  line-height: 1;
 
}

.menu-image{
  width: 100%;   
  
}
.menu-image img{
  width: 100%;
  object-fit:cover;
  
}


/*--------------Evnet Slider---------------*/

.yoga{
  width: 50%;
  height: auto;
  margin: 30px auto;
  overflow:hidden;
 
}

.yoga img{
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
  
}
/*--------------INFO------------------*/

#INFO{
  background-color:#e6e0d4;
  width:100vw;
  height: auto;
}
.info-container{
  display: flex;
  justify-content: center;
  margin: 50px auto;
  padding: 30px;
}

.cafename h3{
  margin-top:50px;
  font-family:"kurobara-gothic", sans-serif;
  
}

.cafeLogo{
  width: 50%;
  height: auto;
  margin: 40px auto;
 
}


.cafeLogo img{
  width: 100%;
}

.cafeInfo{
  border-left:solid 2px #c4bdbd;
  padding:30px;
  font-family: "kurobara-gothic";
  
}

.cafeInfo p{
  padding:.8rem;
  
}

.bold{
  font-weight:bold;
  border-bottom:dotted 2px  #c4bdbd;
  padding-bottom:.1em;
  margin-top:1.5rem;

}
#map {
  text-align: center;
 
  
}

#map iframe{
  margin-bottom: 50px;
  max-width: 100%;
}

#footer{
  width: 100%;
  height: 50vh;
}

#footer h3{
  font-family: "kurobara-gothic";
  padding:30px;
  text-align: center;
}

#footer img{
  width: 20%;
  display: block;
  margin: 30px auto;
}


.sns-contact p{
 text-align: center;
 font-size:1.5rem;
 font-family: "kurobara-gothic";
}

.sns-contact a img{
  text-align: center;
}

#footer .sns-contact a img{
  width:50px;
}

.tel{
  text-align: center;
  padding:20px;
  font-family: "kurobara-gothic";
}

.copyright{
  text-align: center;
  font-family: "kurobara-gothic";
  padding:20px;
}
/*-----------SP レスポンシブ対応-------------------------------*/
@media screen and (max-width:768px){

  .logoTrans{
    width: 60%;
  }

  #splash_logo{
    display:block;
    margin: 0 auto;
    width: 50%;
  }

 body #side{
    display:none;
  }

 
h1{
  font-size: 1.5rem;
}

h2{
  font-size: 1rem;

}

h3{
  font-size:1rem;
}

h4{
  font-size:1rem;
}

p{
  font-size:0.8rem;
  letter-spacing: 0.3em;
}

body .petitLogo{
  visibility: hidden;
  opacity:0;
}
.scrolldown{
  right:50%;
}


.sub-title{
  margin:10px auto;
}

.warpt{
  width: 150%;
  top:0%;
}

.sub-title h1{
  top:30%;
}
.sub-title .pentext{  
  top:12%; 
  right:-100%;
  width: 100%;
 }

 .pentext img{
  max-width: 100%;
 }

 .swiper{
  width: 100%;
  height: auto;
 
 }

 .sp-english{
  display:none;
 }

 .english{
  padding-bottom:0;
 }
 .explication,
 .explication2{ 
  background-color: #f5f5f5;
  width: 95%;
  height: 60vh;
 }

 .explication3 {
  background-color:#f5f5f5;
  width: 95%;
  height: 35vh;
  line-height: 1;
 }

 .explication3 p{
  padding:10px;
  
 } 

 .event-button a{
  padding:0px;
 }


 .info-container{
  padding:10px;
 }

 .cafeInfo{
  padding:15px;
 }

 .yoga{
  width: 90%;
  height: auto;
 }

 .yoga img{
  max-width: 100%;
  object-fit: cover;
 }

 .info-container{
  flex-direction:column;
 }

 .cafename {
 text-align: center;
 }
 
 #footer img{
  width: 70%;
 }

 }