@charset "UTF-8";

/* グループ全体の余白 */
.menu-group {
  padding: 40px 40px 20px;
  border-bottom: 1px solid #e0e0e0;
  position: relative; /* ← 追加 */
}

/* グループの見出し（麺類・うどん・丼もの） */
.menu-group-title {
  font-family: serif;
  font-size: 28px;
  color: #8b2500;
  margin-bottom: 24px;
}

/* カードを横並びにするグリッド */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* 1枚のカード（画像＋名前） */
.menu-card {
  text-align: center;
}

/* カード内の画像 */
.menu-card img {
  width: 100%;        /* カードの幅いっぱいに広げる */
  height: 220px;       /* ← 高さを固定（数値はお好みで） */
  object-fit: contain; /* 画像全体が収まるように表示 */
  border-radius: 8px;
}

/* 画像の下のメニュー名 */
.menu-card .menu-name {
  font-size: 18px;
  margin-top: 8px;
  padding: 0;
  color: #333;
}

.menu-name {
  margin-bottom: 0; /* ← 追加 */
}

.menu-image-note {
  text-align: right;
  font-size: 20px;
  color: #999;
  padding: 0 8px 16px;
}

.menu-price {
  font-size: 16px;
  color: #8b2500;
  padding: 0;
  margin-top: 0;
  font-family: serif;
}

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {
  
  .menu-group {
    padding: 24px 16px;
  }

  .menu-grid {
  display: grid;                      /* グリッドレイアウトを使う */
  grid-template-columns: repeat(2, 1fr); /* 2列に均等に並べる */
  gap: 24px;                          /* カード同士の隙間 */
  }

  .menu-card img {
  width: 100%;        /* カードの幅いっぱいに広げる */
  height: 110px;       /* ← 高さを固定（数値はお好みで） */
  object-fit: contain; /* 画像全体が収まるように表示 */
  border-radius: 8px;
  }

  footer h2 {
    font-size: 10px; /* ← 数値でサイズ調整 */
  }
}