@charset "utf-8";
/*------------------
  common 
-------------------*/
.container {
  width: 90%;
}

#curry,
#side,
#drink {
  margin-bottom: 96px;
  position: relative;
  padding: 1em 1.5em;
  border-radius: 3px;
}

.main_menu_ttl {
  position: absolute;
  top: -1.9em;
  left: -2px;
  padding: 0.2em 0.8em;
  border-radius: 5px 5px 0 0;
  color: #fff;
  font-family: "Pacifico", serif;
  font-weight: 400;
  font-style: normal;
}

.menu_blk {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.menu_blk .menu_item {
  width: 30%;
  padding: 3% 0;
}

.menu_blk .menu_item .menu_ttl {
  font-size: 2.4rem;
  color: #fff;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
}

.menu_blk .menu_item .menu_price {
  font-size: 2.4rem;
  color: #fff;
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.menu_blk .menu_item img {
  width: 100%;
  border-radius: 4%;
  transition: all 0.3s;
}

.menu_blk .menu_item img:hover {
  opacity: 0.7;
  filter: brightness(110%);
}

/*------------------
   curry
-------------------*/
#curry {
  border: 2px solid var(--sub-bg-color);
  background-color: var(--sub-bg-color);
}

#curry .main_menu_ttl {
  font-size: 2.4rem;
  background-color: var(--sub-bg-color);
}


/*------------------
   side
-------------------*/
#side {
  border: 2px solid var(--sub-green);
  background-color: var(--sub-green);
}

#side .main_menu_ttl {
  background-color: var(--sub-green);
}

/*------------------
   drink
-------------------*/
#drink {
  border: 2px solid var(--sub-blue);
  background-color: var(--sub-blue);
}

#drink .main_menu_ttl {
  background-color: var(--sub-blue);
}

/*------------------
   modal
-------------------*/
.img-section {
  width: 80%;
  display: flex;
  position: relative;
  color: #fff;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
  background-color: var(--sub-green);
}

.img-section span {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0%;
  right: 0%;
  border: 2px solid var(--sub-bg-color);
  border-radius: 50%;
  background-color: var(--sub-bg-color);
}

.img-section span::before, .img-section span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 40%;
  width: 3px;
  height: 22px;
  background-color: #fff;
}

.img-section span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.img-section span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.img-section #popup {
  width: 45%;
  padding: 3%;
  border-radius: 10%;
}

.img-section .caption {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 2.4rem;
}

.img-section .caption .modal_ttl{
  font-size: 2.4rem;
}

.img-section .caption .modal_price {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-size: 2.4rem;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.img-section .caption .modal_txt{
  font-size: 2.4rem;
}
/*------------------
   sp
-------------------*/
@media screen and (max-width: 768px) {
  /*------------------
   menu
-------------------*/
  .menu_blk {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }  

  #curry .main_menu_ttl{
    font-size: 6.4rem;
  }

  .menu_blk .menu_item {
      width: 88%;
      padding: 3% 0;
  }

  .menu_blk .menu_item .menu_ttl{
    font-size: 6.4rem;
  }

  .menu_blk .menu_item .menu_price{
    font-size: 6rem;
  }
  
  /*------------------
   modal
-------------------*/
  .img-section {
    flex-direction: column;
    align-items: center;
  }

  .img-section #popup {
    width: 90%;
  }

  .img-section .caption {
    padding: 5%;
  }
  .img-section .caption .modal_ttl {
    font-size: 5.5rem;
    line-height: 2;
  }

  .img-section .caption .modal_price {
    font-size: 5.5rem;
    line-height: 2;
   }

  .img-section .caption .modal_txt {
    font-size: 5.5rem;
    line-height: 2;
  }

}