:root {
  --ink:        #0a0907;
  --sumi:       #14110e;
  --kinari:     #e8e2d5;
  --kinari-dim: #b5ad9d;
  --kinari-mute:#7f7867;
  --kinari-faint:#5a5448;
  --hi:         #8b2820;
  --gold:       #b8985a;
  --line:       rgba(232,226,213,0.14);
  --line-soft:  rgba(232,226,213,0.07);
  --serif-jp:      "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
  --serif-jp-thin: "Noto Serif JP", "Yu Mincho", serif;
  --serif-en:      "Cormorant Garamond", "Times New Roman", serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif-jp-thin);
  font-weight: 300;
  background: var(--ink);
  color: var(--kinari);
  line-height: 2;
  letter-spacing: 0.04em;
}
a { color: var(--kinari); text-decoration: none; border-bottom: 1px solid var(--kinari-faint); transition: color .3s ease, border-color .3s ease; }
a:hover { border-color: var(--kinari-dim); }

/* ヘッダー */
.j-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.j-header a { border-bottom: none; }
.j-header__brand { font-family: var(--serif-jp); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.2em; }
.j-header__nav { font-family: var(--serif-en); font-style: italic; font-size: 0.75rem; letter-spacing: 0.35em; color: var(--kinari-dim); }

/* 本文 */
.j-main { max-width: 680px; margin: 0 auto; padding: 2.4rem 1.5rem 6rem; }
.j-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 0.5em; font-size: 0.72rem; line-height: 1.9; color: var(--kinari-mute); }
.j-breadcrumb li + li::before { content: "／"; margin-right: 0.5em; color: var(--kinari-faint); }
.j-breadcrumb a { color: var(--kinari-mute); border-bottom: none; }
.j-date { display: block; margin-top: 2.4rem; font-family: var(--serif-en); font-style: italic; font-size: 0.8rem; letter-spacing: 0.3em; color: var(--gold); }
.j-title {
  font-family: var(--serif-jp); font-weight: 500;
  font-size: clamp(1.35rem, 5vw, 1.85rem); line-height: 1.7; letter-spacing: 0.06em;
  margin: 0.6rem 0 2.2rem; text-wrap: balance;
}
.j-body p { font-size: 0.95rem; color: var(--kinari-dim); margin-bottom: 1.4rem; }
.j-body strong { color: var(--kinari); font-weight: 500; }
.j-body h2 {
  font-family: var(--serif-jp); font-weight: 500; font-size: 1.2rem; line-height: 1.8; letter-spacing: 0.08em;
  margin: 3.6rem 0 1.4rem; padding-top: 2.4rem; border-top: 1px solid var(--line);
}
.j-body h3 { font-family: var(--serif-jp); font-weight: 500; font-size: 1rem; letter-spacing: 0.06em; margin: 2.2rem 0 0.6rem; }
.j-body ul, .j-body ol { padding-left: 1.4em; margin-bottom: 1.4rem; color: var(--kinari-dim); font-size: 0.95rem; }
.j-body li { margin-bottom: 0.5rem; }
.j-lead { background: var(--sumi); border: 1px solid var(--line); padding: 1.6rem 1.4rem 0.6rem; margin: 1.8rem 0 1.6rem; }
.j-lead__label { font-family: var(--serif-jp); font-weight: 500; font-size: 0.95rem; color: var(--kinari); margin-bottom: 0.8rem !important; }
.j-lead ol li { color: var(--kinari); }
.j-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 1.6rem; font-size: 0.9rem; }
.j-table th, .j-table td { text-align: left; vertical-align: top; padding: 0.9rem 0.6rem; border-bottom: 1px solid var(--line); line-height: 1.9; }
.j-table tr:first-child th, .j-table tr:first-child td { border-top: 1px solid var(--line); }
.j-table th { width: 32%; font-family: var(--serif-jp); font-weight: 500; color: var(--kinari); }
.j-table td { color: var(--kinari-dim); }
/* 見出し行のある表（列ごとに項目がある表） */
.j-table--grid { font-size: 0.85rem; }
.j-table--grid th { width: auto; font-size: 0.78rem; color: var(--kinari-mute); padding: 0.7rem 0.5rem; }
.j-table--grid td { padding: 0.8rem 0.5rem; }
.j-table--grid td:first-child { font-family: var(--serif-jp); font-weight: 500; color: var(--kinari); white-space: nowrap; }
.j-table--grid td:nth-child(2), .j-table--grid td:nth-child(3) { white-space: nowrap; }
.j-lead .j-table { margin-bottom: 1rem; }
.j-table--price td:nth-child(3) { white-space: normal; }  /* こんな方に は折り返してよい */
/* スマホでは見出し行のある表を、1行＝1項目の2段表示にする（細い列で1〜2文字ずつ折り返すのを防ぐ）。
   HTML の表構造はそのままなので、検索エンジンからは表として読まれる */
@media (max-width: 600px) {
  .j-table--grid thead { display: none; }
  .j-table--grid, .j-table--grid tbody, .j-table--grid tr { display: block; width: 100%; }
  .j-table--grid tr { padding: 0.9rem 0.2rem; border-bottom: 1px solid var(--line); }
  .j-table--grid tr:first-child { border-top: 1px solid var(--line); }
  .j-table--grid tr:first-child td { border-top: 0; }
  .j-table--grid td { display: inline; padding: 0; border: 0; white-space: normal; }
  .j-table--grid td:nth-child(2)::before { content: "　"; }
  .j-table--grid td:nth-child(3)::before { content: "　"; }
  .j-table--course td:nth-child(3)::before { content: "　飲み放題"; }  /* コースの表だけ「付き／なし」の前に補う */
  /* 栄養の表：部位名を1段目、数値を2段目にし、数値の前に項目名を補う */
  .j-table--nutrition td:first-child { display: block; margin-bottom: 0.2rem; }
  .j-table--nutrition td:nth-child(2)::before { content: "エネルギー "; }
  .j-table--nutrition td:nth-child(3)::before { content: "　脂質 "; }
  /* 3列の価格表：3列目（こんな方に）を2段目に */
  .j-table--price td:nth-child(3) { display: block; margin-top: 0.3rem; line-height: 1.9; }
  .j-table--price td:nth-child(3)::before { content: none; }
  .j-table--grid td:nth-child(4) { display: block; margin-top: 0.3rem; line-height: 1.9; }
}
.j-faq { border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
.j-faq div { padding: 1.4rem 0.2rem; border-top: 1px solid var(--line); }
.j-faq dt { font-family: var(--serif-jp); font-weight: 500; font-size: 0.95rem; line-height: 1.9; color: var(--kinari); margin-bottom: 0.5rem; }
.j-faq dd { font-size: 0.9rem; line-height: 2; color: var(--kinari-dim); }
.j-cta { text-align: center; margin: 3.6rem 0 1rem; }
.j-cta a {
  display: inline-block; padding: 1.2rem 2.2rem; border: 1px solid var(--hi); background: var(--hi);
  font-family: var(--serif-jp); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.18em; color: var(--kinari);
}
.j-cta a:hover { background: transparent; }
.j-back { margin-top: 4rem; text-align: center; font-size: 0.85rem; }
/* 出典 */
.j-body .j-source { margin-top: -0.6rem; font-size: 0.72rem; line-height: 1.9; color: var(--kinari-mute); }
.j-source a { color: var(--kinari-mute); }

/* 一覧 */
.j-label { display: block; margin-top: 2.4rem; font-family: var(--serif-en); font-style: italic; font-size: 0.75rem; letter-spacing: 0.5em; color: var(--kinari-mute); }
.j-intro { font-size: 0.95rem; color: var(--kinari-dim); margin-bottom: 2.4rem; }
.j-list { list-style: none; border-bottom: 1px solid var(--line); }
.j-list li { border-top: 1px solid var(--line); }
.j-list a { display: block; padding: 1.8rem 0.2rem; border-bottom: none; }
.j-list__date { font-family: var(--serif-en); font-style: italic; font-size: 0.75rem; letter-spacing: 0.3em; color: var(--gold); }
.j-list__title { font-family: var(--serif-jp); font-weight: 500; font-size: 1.05rem; line-height: 1.8; letter-spacing: 0.05em; margin: 0.4rem 0 0.5rem; }
.j-list__excerpt { font-size: 0.88rem; line-height: 2; color: var(--kinari-dim); }
.j-list__more { display: inline-block; margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.15em; color: var(--kinari-mute); }

/* フッター（トップと同じ） */
.footer { padding: 3rem 1.5rem 2.5rem; text-align: center; border-top: 1px solid var(--line-soft); background: var(--ink); }
.footer__nav { margin-bottom: 1.4rem; }
.footer__nav a { font-family: var(--serif-en); font-style: italic; font-size: 0.72rem; letter-spacing: 0.4em; color: var(--kinari-dim); }
.footer__mark { font-family: var(--serif-en); font-style: italic; font-size: 0.7rem; letter-spacing: 0.4em; color: var(--kinari-mute); margin-bottom: 0.8rem; }
.footer__copy { font-family: var(--serif-en); font-size: 0.65rem; letter-spacing: 0.3em; color: var(--kinari-mute); opacity: 0.7; }
.footer__credit { margin-top: 1.4rem; font-family: var(--serif-en); font-size: 0.65rem; letter-spacing: 0.24em; color: var(--kinari-mute); opacity: 0.7; }
.footer__credit a { color: var(--kinari-dim); }

@media (min-width: 768px) {
  .j-header { padding: 1.6rem 3rem; }
  .j-main { padding: 3rem 1.5rem 8rem; }
}