@charset "UTF-8";
/* ==========================================================================
   menu.css — menu.html 固有（料金表）
   移行前は「項目名」と「価格」を justify-content:space-between の flex で
   両端に寄せていた。ここでは <table> で同じ見た目を作っている。
   ========================================================================== */

.menu-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 96px;
  align-items: start;
  font-family: var(--font-mincho);
  color: var(--color-beige);
}

.menu-group__title {
  margin-bottom: 4px;
  color: var(--color-brown);
  font-family: var(--font-mincho);
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.menu-group__note {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.75;
}

.price-table { width: 100%; }
.price-table th,
.price-table td {
  padding: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  vertical-align: baseline;
}
.price-table th { text-align: left; }
.price-table td { padding-left: 24px; text-align: right; white-space: nowrap; }
.price-table .is-small { font-size: 12px; }

.menu-tax {
  width: min(90vw, var(--container));
  margin: 8px auto 0;
  color: var(--color-beige);
  font-family: var(--font-mincho);
  font-size: 1rem;
  text-align: right;
}

.menu-lead {
  margin-top: 32px;
  color: var(--color-beige);
  font-family: var(--font-mincho);
  font-size: 1rem;
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 700px) {
  .menu-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .menu-tax { text-align: center; }
}