@charset "UTF-8";
/* ===================================================================
   メニューページ（海都など）
   共通トークンは style.css、見出し帯は page.css を継承
   ・値段は載せません（改定が多いため）。写真と商品名だけ。
   =================================================================== */

.menu-page [hidden]{display:none !important;}

/* ============ ジャンルのジャンプボタン（上に貼り付く） ============ */
.menu-jump{
  /* ヘッダーは「--header-h ＋ 上の余白16px」の高さ。その真下に貼り付ける */
  position:sticky;top:calc(var(--header-h) + 16px);z-index:40;
  background:rgba(247,243,236,.95);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.menu-jump__inner{
  max-width:var(--maxw);margin:0 auto;padding:12px 32px;
  display:flex;align-items:center;gap:14px;
}
.menu-jump__label{
  flex:none;margin:0;font-family:var(--serif);font-weight:600;font-size:12.5px;
  letter-spacing:.12em;color:var(--ink-soft);
}
.menu-jump__list{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;}
.menu-jump__list a{
  display:inline-block;padding:6px 15px;
  border:1px solid var(--gold-soft);border-radius:999px;background:#fff;
  font-family:var(--serif);font-size:13px;letter-spacing:.06em;color:var(--ink);
  transition:background .28s var(--ease),border-color .28s,color .28s;
}
.menu-jump__list a:hover{background:var(--enji);border-color:var(--enji);color:#fff;}

/* ============ 前書き ============ */
.menu-lead{
  margin:clamp(30px,3.6vw,44px) 0 0;padding:clamp(18px,2.2vw,24px) clamp(18px,2.4vw,26px);
  background:#fff;border:1px solid var(--line);
}
.menu-lead p{margin:0 0 10px;font-size:13.5px;line-height:2;letter-spacing:.03em;color:#2f2a22;}
.menu-lead p:last-child{margin-bottom:0;}
.menu-lead__note{font-size:12.5px !important;color:var(--ink-soft) !important;}
.menu-lead a{color:var(--enji);border-bottom:1px solid currentColor;}

/* ============ ジャンルのかたまり ============ */
/* ジャンルのボタンを押したとき、見出しがヘッダーとジャンプ帯の下に来るようにする
   （ヘッダー 88+16 ＋ ジャンプ帯 63 ＋ 少し余白） */
.menu-sec{padding-top:clamp(46px,5.4vw,70px);scroll-margin-top:calc(var(--header-h) + 96px);}
.menu-sec__head{
  display:flex;align-items:baseline;gap:12px;margin:0 0 26px;
  font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.1vw,25px);
  letter-spacing:.16em;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:13px;
}
.menu-sec__mark{
  width:9px;height:9px;border-radius:50%;background:var(--enji);flex:none;transform:translateY(-3px);
}
.menu-sec__count{
  margin-left:auto;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);
}

/* ============ 商品カード ============ */
.menu-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,22px);
  margin:0;padding:0;list-style:none;
}
.menu-card{
  background:#fff;border:1px solid var(--line);
  padding:14px 12px 16px;text-align:center;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.menu-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(40,25,10,.12);border-color:var(--gold-soft);}
.menu-card figure{
  margin:0 0 12px;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;
}
.menu-card img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(40,25,10,.16));
}
.menu-card__name{
  margin:auto 0 0;font-family:var(--serif);font-weight:600;
  font-size:13px;line-height:1.65;letter-spacing:.02em;color:var(--ink);
}
/* 写真がまだ無いもの */
.menu-card--nophoto figure{
  background:var(--washi-deep);border:1px dashed var(--gold-soft);
  font-size:11px;color:var(--ink-soft);letter-spacing:.06em;
}
/* 黒背景のまま（切り抜き素材が無かったもの） */
.menu-card--dark figure{background:#111;border-radius:2px;overflow:hidden;}
.menu-card--dark img{width:100%;height:100%;object-fit:cover;filter:none;}

/* ============ 一番下の案内 ============ */
.menu-foot{
  margin:clamp(50px,6vw,80px) 0 0;padding:clamp(26px,3vw,36px);
  background:var(--washi-deep);text-align:center;
}
.menu-foot p{margin:0 0 16px;font-size:13.5px;line-height:2;letter-spacing:.03em;color:#2f2a22;}
.menu-foot p:last-child{margin-bottom:0;}

/* ============ タブレット ============ */
@media (max-width:1024px){
  .menu-grid{grid-template-columns:repeat(4,1fr);}
}

/* ============ スマホ ============ */
@media (max-width:768px){
  /* スマホではジャンプ帯を貼り付けない（画面が狭く、ヘッダーと重なるため） */
  .menu-jump{position:static;}
  .menu-jump__inner{flex-direction:column;align-items:flex-start;gap:8px;padding:11px 18px;}
  .menu-jump__list{gap:6px;}
  .menu-jump__list a{padding:6px 12px;font-size:12.5px;}
  .menu-sec{padding-top:38px;scroll-margin-top:calc(var(--header-h) + 28px);}
  .menu-sec__head{margin-bottom:18px;}
  .menu-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .menu-card{padding:11px 9px 13px;}
  .menu-card__name{font-size:12.5px;}
  .menu-lead{margin-top:24px;padding:16px;}
}