:root {
  --paper: #f7f2e8;
  --paper-soft: #fffdf8;
  --ink: #332820;
  --brown: #5a3018;
  --brand: #a4632e;
  --accent: #c87537;
  --beige: #e4d0a4;
  --line: rgba(90, 48, 24, 0.16);
  --shadow: 0 18px 50px rgba(65, 40, 20, 0.12);
  --radius: 12px;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  padding: 20px 24px;
}
.header-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.wordmark {
  color: #fff;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.header-nav { display: flex; gap: 10px; }
.header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
  background: rgba(50,30,15,.18);
}

.hero {
  min-height: 82svh;
  position: relative;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #4a2d1d;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(35,20,10,.22) 0%, rgba(35,20,10,.08) 34%, rgba(35,20,10,.72) 100%),
    url("assets/hero-meal.jpg") center 56% / cover no-repeat;
  transform: scale(1.01);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, var(--max));
  margin: 0 auto;
  padding: 150px 0 72px;
  color: #fff;
}
.hero-kicker {
  margin: 0 0 10px;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .18em;
}
.hero h1 {
  max-width: 780px;
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2.3rem, 7vw, 5.4rem);
  line-height: 1.18;
  letter-spacing: .03em;
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(0,0,0,.36);
}
.hero-copy {
  max-width: 660px;
  margin: 22px 0 0;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}
.button-primary { color: #fff; background: var(--brand); }
.button-light { color: var(--brown); background: rgba(255,253,248,.95); }

.section { padding: 90px 24px; }
.section-soft { background: var(--paper-soft); }
.container { width: min(100%, var(--max)); margin: 0 auto; }
.section-heading { margin-bottom: 38px; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.section-heading h2 {
  margin: 0;
  color: var(--brown);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.25;
  letter-spacing: .04em;
}
.lead { max-width: 760px; margin: 18px 0 0; font-size: 1.04rem; }

.intro-grid {
  display: grid;
  grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr);
  gap: clamp(30px,6vw,80px);
  align-items: center;
}
.brand-card {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.brand-card img { aspect-ratio: 4/3; object-fit: contain; }
.value-list { display: grid; gap: 22px; margin: 32px 0 0; }
.value-item { padding-top: 18px; border-top: 1px solid var(--line); }
.value-item strong { display: block; color: var(--brown); font-size: 1.08rem; }

.food-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: auto auto;
  gap: 18px;
}
.food-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #ddd0be;
}
.food-grid figure:first-child { grid-row: 1 / span 2; }
.food-grid img { width: 100%; height: 100%; object-fit: cover; }
.food-grid figure:first-child img { min-height: 620px; }
.food-grid figure:not(:first-child) img { min-height: 300px; }
.food-caption { margin-top: 24px; max-width: 760px; }

.menu-grid, .space-grid, .info-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
}
.menu-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.menu-card h3 {
  margin: 0 0 14px;
  color: var(--brown);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.5rem;
}
.menu-card img { border-radius: 8px; }
.notice { margin: 22px 0 0; font-size: .88rem; color: #6e5b4d; }

.space-grid figure, .info-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.space-grid img { aspect-ratio: 4/3; object-fit: cover; }
.space-copy { margin-top: 26px; max-width: 760px; }

.info-grid { align-items: start; }
.info-photo img { min-height: 520px; object-fit: cover; }
.shop-details { margin: 0; padding: 0; }
.shop-details div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.shop-details dt { color: var(--brown); font-weight: 800; }
.shop-details dd { margin: 0; }
.info-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.final-cta {
  padding: 90px 24px 110px;
  color: #fffaf2;
  background: var(--brown);
  text-align: center;
}
.final-cta p { margin: 0; font-size: .85rem; letter-spacing: .18em; }
.final-cta h2 {
  margin: 12px 0 28px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2rem,6vw,4rem);
  line-height: 1.3;
}
.footer {
  padding: 28px 24px 110px;
  color: #7b695c;
  background: var(--paper);
  font-size: .8rem;
  text-align: center;
}

.mobile-bar {
  position: fixed;
  z-index: 30;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: none;
  grid-template-columns: repeat(3,1fr);
  overflow: hidden;
  border: 1px solid rgba(90,48,24,.16);
  border-radius: 14px;
  background: rgba(255,253,248,.95);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.mobile-bar a {
  min-height: 54px;
  display: grid;
  place-items: center;
  color: var(--brown);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 900;
  border-right: 1px solid var(--line);
}
.mobile-bar a:last-child { border-right: 0; }

@media (max-width: 820px) {
  .site-header { padding: 16px 18px; }
  .header-nav { display: none; }
  .hero { min-height: 76svh; }
  .hero-inner { width: min(100% - 40px,var(--max)); padding-bottom: 54px; }
  .section { padding: 68px 20px; }
  .intro-grid, .menu-grid, .space-grid, .info-grid { grid-template-columns: 1fr; }
  .brand-card { max-width: 520px; margin: 0 auto; }
  .food-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .food-grid figure:first-child { grid-row: auto; }
  .food-grid figure:first-child img,
  .food-grid figure:not(:first-child) img,
  .info-photo img { min-height: 0; aspect-ratio: 4/3; }
  .menu-card { padding: 14px; }
  .shop-details div { grid-template-columns: 1fr; gap: 4px; }
  .mobile-bar { display: grid; }
  .footer { padding-bottom: 98px; }
}

@media (max-width: 430px) {
  .hero h1 { font-size: 2.25rem; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .final-cta h2 {
    white-space: nowrap;
    font-size: clamp(1.55rem, 7.2vw, 2.4rem);
    letter-spacing: 0.02em;
  }
}


.phone-dialog {
  width: min(92vw, 480px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--paper-soft);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(50, 30, 15, .28);
}

.phone-dialog::backdrop {
  background: rgba(35, 20, 10, .46);
  backdrop-filter: blur(3px);
}

.phone-dialog-inner {
  position: relative;
  padding: 34px;
  text-align: center;
}

.phone-dialog-inner .eyebrow {
  margin-bottom: 8px;
}

.phone-dialog-inner h2 {
  margin: 0;
  color: var(--brown);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.8rem;
  line-height: 1.35;
}

.phone-dialog-inner > p:not(.eyebrow):not(.phone-dialog-number):not(.phone-copy-status) {
  margin: 18px 0 0;
}

.phone-dialog-number {
  margin: 22px 0;
  color: var(--brown);
  font-size: clamp(1.8rem, 5vw, 2.35rem);
  font-weight: 900;
  letter-spacing: .04em;
}

.phone-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brown);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.phone-dialog-close:hover {
  background: rgba(90, 48, 24, .08);
}

.phone-copy-button {
  border: 0;
  cursor: pointer;
}

.phone-copy-status {
  min-height: 1.6em;
  margin: 10px 0 0;
  color: #6e5b4d;
  font-size: .86rem;
}

@media (max-width: 820px) {
  .phone-dialog {
    display: none;
  }
}