@charset "UTF-8";

/* ==================================
   menu.html（中身）
   ================================== */
.menu-wrapper{
  padding: 0 5%;
}

.menu-wrapper h2{
  display: flex;
  justify-content: center;
}

.menu-wrapper h2 img{
   width: min(600px, 80vw);  /* ←ここを変えるだけ */
  height: auto;
}

.sasie{
  width: 2em;
  height: auto; 
}
.menu-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 768px){
  .menu-grid{
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 40px;
  }
}

.menu-block h3{
  display: flex;
  align-items: center;
  border-bottom: 2px solid #333;
  padding-bottom: 4px;
  margin-bottom: 8px;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
}

.kitukesi, .clock{
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* 補足テキスト */
/* メニュータイトル・価格を同じサイズに */
.menuttl,
.tb .price span {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  display: block;
}

/* 補助テキスト cap はタイトルの半分 */
.cap {
  font-size: clamp(0.6rem, 1vw, 0.8rem);
  display: block;
}


.menuttl .cap{
  margin-top: 2px;
}

.menu-subtitle .cap{
  margin-left: 0.5em;
}

/* 価格表 */
.tb{
  display: flex;
  align-items: start;
  column-gap: 8px;
  margin: 1em 0;
}

.menuttl{
  margin: 0;
  flex: 0 0 auto;
}

.tb .hr{
  flex: 1 1 auto;
  border-bottom: 1px dotted #333;
  height: 1px;
  margin: 0.7em 0.5em;
}

.tb .price{
  flex: 0 0 auto;
  text-align: right;
  margin-left: 0;
}

@media (max-width: 767px){
  .menu-wrapper{ padding: 0 1.5rem; }
  .tb{ column-gap: 6px; }

  .menuttl .cap,
  .menu-subtitle .cap{
    display: none;
  }
}