/* ==========================================================================
   MENU(下層ページ)
   ========================================================================== */
.menu-page {
  background: var(--color-bg);
  padding: 64px 24px;
}

.menu-page__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.menu-page__title {
  text-align: left;
}

.menu-list {
  margin-top: 40px;
}

.menu-category {
  margin-top: 40px;
}

.menu-category:first-child {
  margin-top: 0;
}

.menu-category__label {
  padding: 8px 20px;
  background: var(--color-pink-soft);
  font-family: var(--font-maru);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.menu-category__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.menu-category__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
}

.menu-item__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.menu-item__name,
.menu-item__price {
  font-family: var(--font-maru);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--color-text);
  white-space: nowrap;
}

.menu-item__note {
  margin-top: 6px;
  font-family: var(--font-maru);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

/* デスクトップ: Figma実測値通りの配置(2列組・帯タイトル・価格右寄せ) */
@media (min-width: 861px) {
  .menu-page {
    padding-top: max(64px, 12.15vw);
    padding-bottom: max(64px, 8.5vw);
    padding-left: 0;
    padding-right: 0;
  }

  .menu-page__inner {
    max-width: max(760px, 84.93vw);
    margin: 0;
    padding-left: max(60px, 16.81vw);
  }

  .menu-list {
    margin-top: max(48px, 5.42vw);
  }

  .menu-category {
    margin-top: max(40px, 4.86vw);
  }

  .menu-category__label {
    height: 42px;
    padding: 0 20px;
    display: flex;
    align-items: center;
  }

  .menu-category__grid {
    margin-top: max(24px, 2.99vw);
    grid-template-columns: repeat(2, 1fr);
    column-gap: max(48px, 6.88vw);
    row-gap: max(24px, 2.99vw);
  }

  .menu-category__col {
    gap: max(20px, 2.5vw);
  }
}

/* スマホ幅: 項目名+価格が幅に収まらない場合は2行に折り返す(価格は右寄せのまま)
   + メニュー項目同士・カテゴリータイトル上の間隔を広げる */
@media (max-width: 680px) {
  .menu-item__row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* 項目名が単体でも幅に収まらないほど長い場合、右マージンが崩れて
     画面端まではみ出してしまうため、名前側は折り返しを許可する
     (価格側は引き続き改行しない) */
  .menu-item__name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }

  .menu-item__name,
  .menu-item__price {
    line-height: 1.3;
  }

  .menu-item__price {
    flex: none;
    margin-left: auto;
  }

  .menu-category {
    margin-top: 64px;
  }

  .menu-category__grid {
    gap: 40px;
  }

  .menu-category__col {
    gap: 32px;
  }
}