@charset "utf-8";
/* メインビジュアル読み込み */
@import url("mv.css");

/* 共通 */


h2.section-title-v{
    writing-mode: vertical-lr;
    letter-spacing: 0.5em;
    border-bottom:none;
}

h2.section-title-v .ja{
  font-size:var(--font-xl);
  font-weight: 800;
}

h2.section-title-v .en{
  font-size:var(--font-md);
}


h2.section-title-h{
  border-bottom:5px double black;
  margin:1rem;
}

h2.section-title-h .ja{
  font-size:var(--font-lg);
  font-weight: 800;
  display:block;

}

h2.section-title-h .en{
  font-size:var(--font-md);
  
}



/* About */

#about {
 display:flex;
 justify-content:space-evenly;
}

#about .inner{
 display:flex;
 
}

#about .inner .text{
 width:400px;
}

#about .inner .about-img{
 width: 400px;
 position: relative;
 margin-left:1rem;
}

#about .inner .about-img .fade-img li {
 width: 100%;
 position:absolute;
 top:0rem;
 opacity: 0;
 animation: fade 15s infinite;
}

#about .inner .about-img .fade-img li img{
    width: 100%;
    height: 500px;
    object-fit: cover;
}

/*画像ぼかし*/
#about .inner .fade-img li::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow:inset 0px 0px 20px 20px var(--black);

}

#about .inner .about-img .fade-img li:nth-child(1) {
  animation-delay: 0s;
}
#about .inner .about-img .fade-img li:nth-child(2) {
  animation-delay: 5s;
}
#about .inner .about-img .fade-img li:nth-child(3) {
  animation-delay: 10s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/* menu */

#menu .menu-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:1rem;
 padding:1rem;
}

#menu .menu-grid li{
 width:100%;
  
}

#menu .menu-grid li img{
 width:100%;
 height:300px;
 object-fit:cover;
 margin-bottom:1rem;
 border-radius: 30px;
}




/*-------------------------------------------
スマートフォン
-------------------------------------------*/

@media screen and (max-width: 767px) {


/* 共通 */
h2.section-title-v{
  writing-mode: horizontal-tb;
  border-bottom:5px double black;
  margin-bottom:1rem;
}

h2.section-title-v .ja{
  font-size:var(--font-lg);
  font-weight: 800;
  display:block;
}

h2.section-title-v .en{
  font-size:var(--font-md);
}




/* About */

#about {
 display:flex;
 flex-direction: column-reverse;
}

#about .inner{
  display:flex;
  flex-direction:column-reverse;
}

#about .inner .text{
 width:100%;
 padding:1rem;

}

#about .inner .about-img{
 display:none;
}


/* menu */

#menu .menu-grid{
 grid-template-columns:repeat(1,1fr);
}

#menu .menu-grid li{
 margin-bottom: 2rem;
  
}


#menu .menu-grid li .text .title{
 font-size: var(--font-md);
}







/*-------------------------------------------
Footer（タブレット）
-------------------------------------------*/


}