body {

  margin: 0;

  background:
    linear-gradient(
      to bottom,
      #1a1a1a,
      #111111
    );

  color: #f5f1e8;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

}
}



/* ロゴ */

.header {

  text-align: center;

  padding: 20px;

}

.logo {

  width: 100%;

  max-width: 700px;

  display: block;

  margin: 0 auto;

}


/* ナビ */

.menu-nav {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(15,15,15,0.92);

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

  padding: 15px;

  backdrop-filter: blur(6px);

}

.menu-nav a {

  color: #f5f1e8;

  text-decoration: none;

  border: 1px solid #8f734d;

  border-radius: 999px;

  padding: 10px 18px;

  transition: 0.3s;

}

.menu-nav a:hover {

  background: #8f734d;

  color: #111;

}



/* セクション */

.menu-section {

  max-width: 1200px;

  margin: 70px auto;

  padding: 0 20px;

}

.menu-section h2 {

  color: #fff;

  font-size: 2rem;

  margin-bottom: 30px;

  background: rgba(0,0,0,0.45);

  display: inline-block;

  padding: 10px 22px;

  border-radius: 12px;

}



/* グリッド */

.menu-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

}



/* カード */

.menu-item {

  background: rgba(10,10,10,0.82);

  border-radius: 20px;

  overflow: hidden;

  padding-bottom: 20px;

  box-shadow: 0 8px 25px rgba(0,0,0,0.35);

  text-align: center;

}



/* サムネイル */

.menu-image {

  width: 100%;

  max-width: 320px;

  aspect-ratio: 3 / 2;

  object-fit: contain;

  display: block;

  margin: 20px auto 10px;

  border-radius: 12px;

  cursor: pointer;

  transition: 0.3s;

  background: #111;

}

.menu-image:hover {

  opacity: 0.88;

}



/* テキスト */

.menu-item h3 {

  margin-top: 10px;

  font-size: 1.5rem;

}

.price {

  color: #d6b98c;

  font-size: 1.2rem;

}

.description {

  color: #ddd;

  padding: 0 20px;

  line-height: 1.8;

}



/* モーダル */

.modal {

  display: none;

  position: fixed;

  z-index: 9999;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.88);

  justify-content: center;

  align-items: center;

}

.modal-content {

  max-width: 92%;

  max-height: 92%;

  border-radius: 16px;

}



/* スマホ */

@media (max-width: 768px) {

  .menu-grid {

    grid-template-columns: 1fr;

  }

}