@charset "utf-8";
/* =========================
   Aoi-sha / menu.css (polished)
   ========================= */
/* ===== Category nav ===== */
.menu-nav {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.menu-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.menu-nav__link:hover {
  transform: translateY(-1px);
  background: rgba(74, 55, 47, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
/* ===== Grid cards ===== */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
/* 共通style.cssの menu-card を活かしつつ中身を整える */
.menu-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: var(--radius-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
/* 画像：カード内で統一感が出る比率 + 余白設計 */
.menu-card__media {
  margin-top: auto;
  margin-bottom: 12px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.03);
}
.menu-card__media .image-frame {
  width: 100%;
  height: 100%;
}
.menu-card__name {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.menu-card__desc {
  margin: 0 0 14px;
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.7;
  text-wrap: pretty;
}
/* 価格帯の見やすさ：下に“揃えて”整列 */
.menu-card__meta {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.menu-card__price {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.menu-card__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.menu-card--stack {
  display: flex;
  flex-direction: column;
}
/* ===== List (Beans etc.) ===== */
.menu-list {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 10px 18px;
}
.menu-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
  margin: 0;
}
.menu-line:first-child {
  border-top: none;
}
.menu-line dt {
  font-weight: 800;
}
.menu-line dd {
  margin: 0;
  color: var(--text-sub);
  font-weight: 900;
  letter-spacing: 0.02em;
}
/* ===== Responsive ===== */
@media (max-width: 1024px) {
  /* 3→2に落ちる前に余白を確保 */
  .menu-grid {
    gap: 16px;
  }
}
#beans .section-head {
  margin-bottom: 12px;
}
#beans .menu-line dd {
  font-weight: 500;
}
#beans {
  padding-bottom: 96px;
}
/* ===== Beans: PCで横幅が広すぎるのを抑える ===== */
@media (min-width: 901px) {
  /* Beansの箱だけ細身にする（視線移動を短く） */
  #beans .menu-list {
    max-width: 760px;
  }
  /* 右の価格が遠いので、内側余白も少し詰める */
  #beans .menu-list {
    padding: 10px 16px;
  }
  /* 行の間隔も少しだけ詰めて“締まる” */
  #beans .menu-line {
    padding: 12px 0;
  }
  /* 価格を読みやすく（少しだけ） */
  #beans .menu-line dd {
    letter-spacing: 0.01em;
  }
  #beans .menu-list {
    max-width: none;
  }
  #beans .beans-wrap {
    max-width: 760px;
    margin: 0 auto;
  }
}
@media (max-width: 900px) {
  .menu-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* カテゴリナビを触りやすく */
  .menu-nav__link {
    padding: 10px 14px;
  }
}
@media (max-width: 520px) {
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .menu-card {
    padding: 12px;
  }
  .menu-card__name {
    font-size: 15px;
  }
}