@charset 'utf-8';

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

header #header-container{
  position:fixed; 
  width: 100%;
  height: 10vh;
  background-color: #e6e0d4;
  margin:0;  
}

.petitLogo-menu{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:2%;
  width: 70px;

}
.petitLogo-menu img{
  max-width: 100%;
  
}



 .sns-navi a img{
  width: 50px;
  padding:10px;
  position:absolute;
  top:10%;  
  right:10%;
}

.menu-navi ul { 
  justify-content:center;
  left:40%;
  display:flex;
  width:80%;
  z-index:999;
}
.menu-navi ul li a{
  padding:15px;
  color:#333;
  font-family: "kurobara-gothic";
  font-size:2rem;
  line-height:80px;  
}




.navi-pen{
  position: absolute;
  top:30%;
  right:20%;
  z-index:-10;
}

/*---------------------Main-----------------------*/
.main-photo{
  width:80% ;
  display:block;
 margin: 0 auto;
  padding-top:150px;
}

.main-photo img{
  width:100%;
  height:auto;
  object-fit: cover;
}

.menu-link-container{
  width: 80%;
  height:auto;
  margin: 50px auto;
  
  flex-direction: row;
}

.menu-link-container ul{
  display:flex;
  justify-content: space-between;
}

.menu-link-container ul li{
  width: 20%;
  padding:8px;
 border-radius: 30px 30px 30px 30px;
 background-color: #9a6229;
 text-align: center;
 
}


.menu-link-container ul li a{  
 
  color:#fff;
  font-family: "kurobara-gothic";
}

.menu-link-container ul li a:hover{
  color:orange;
  cursor:pointer;

}


/*-------------Menu Section--------------*/

.menu-container{
  width: 90%;
  height: 100%;
  margin: 0 auto;
  background-color: #F1ECE3;
  
}

.addinfo{
  width: 80%;
  color:#9a6229;
 margin: 0 auto;
padding:20px;
}

.menu-container:nth-of-type(even){
  background-color: #f1fff1;
}

#menu-sections{
  width: 80%;
  margin:13vh auto 2vh auto;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
}

.menu-title{
  width: 100%;
  height: 10vh;
  position:relative;
}
.menu-title h3{
  font-family: "kurobara-gothic";
  position:absolute;
  left:15%;
  top:100%;
  
}

.circle{
  width: 100px;
  height: 100px;
 background-color:#F1ECE3 ;
  border-radius: 50%;
  position:absolute;
  top:50%;
  left:10%;
}
.circle:nth-of-child(even){
  background-color: #f1fff1;
}

.circle:nth-of-child(odd){
  background-color: #F1ECE3;
}

.box{
  width: 30%;
  text-align: center;
  height: 55vh;
  background-color: #fff;
  padding:1em;
  display:flex;
  flex-direction: column;
  margin-bottom: 20px;
 

}

.box figure {
 width: 95%;
 height: 40vh;
 margin: 0 auto;

}

.box figure img{
  object-fit:cover;
  max-width:100%;
  height: 40vh;
  margin: 0 auto;

}

figcaption{
  text-align: center;
  padding:2rem;
  line-height:1.5;

}

.add{
  width: 100%;
  text-align: left;
  padding-left:10%;
  padding-bottom:30px;
 
 

}


/*---------------ドリンクセクション---------------*/

#drink-section{
  display:flex;
  justify-content: space-around;
  width:100%;
  height:auto;
  margin-top:20vh;
  padding-bottom:50px;
  
}

#drink-section dl{
display: table;
  width: 100%;
}

.seasonal-drinks,
.drinks{
  width: 45%;
}

.circle:nth-of-type(4){
  background-color: #f1fff1;
}

#drink-section h3{
  display:block;
  text-align: center;
  background-color: #f1fff1;
  width: 100%;
}

.seasonal-drinks  h4,
.drinks  h4
{
  display: block;
  text-align: center;
  background-color: #f1fff1;
  width: 100%;
  padding:.5rem;
}

.seasonal-drinks dl,
.drinks dl{
  display:table;
  width: 100%;
  padding:1rem;
  border-bottom:1px dotted #9a6229;
}

.seasonal-drinks dt,
.drinks dt{
  display:table-cell;
}

.seasonal-drinks dd,
.drinks dd{
  display:table-cell;


  text-align:right;
}

@media screen and (max-width:768px){ 
  .menu-navi ul{
    align-items: center;
    justify-content: center;
   
  }
  .menu-navi ul li a{
    font-size: 1rem;
    padding:4px;
  }
 
  .petitLogo-menu{
   display:none;
  }

  .navi-pen{
    top:70%;
    z-index:-10;
  }

 .sns-navi{
  display:none;
}


  .menu-navi ul li a{
    font-size:1rem;    
    width:75% ;
  margin: 0 auto;  
  }



 /*------------------メニューレイアウト---------------------*/
.menu-link-container ul{
  flex-direction: column;
  width: 100%;
}

.menu-link-container ul li{
  text-align: center;
  width: 100%;
  padding:10px;
  margin: 10px;
}
 #menu-sections{
  flex-direction: column;
 }

 .pentext{
  position:absolute;
  top:70%;
 }

 .box{
  width: 98%;
 }

 .menu-container figcaption{
  padding:1rem;
 }

 #drink-section{
  flex-direction:column;
  width: 95%;
 }

 .drinks,
 .seasonal-drinks{
  width: 90%;
  margin: 0 auto;
 }

 .seasonal-drinks{
  margin-bottom:50px;
 }

}