/* 下層ページ（店舗紹介・スタッフ・お知らせ・プライバシーポリシー） */
:root { --inset: clamp(10px, 1.6vw, 20px); --wrap: 1120px; --pad: clamp(20px, 5vw, 56px); }

/* ---------- 見出し写真 ---------- */
.p-hero { position: relative; height: clamp(380px, 62svh, 640px); overflow: hidden; }
.p-hero--compact { height: auto; min-height: 280px; }
.p-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,16,22,.6) 0%, rgba(11,16,22,.1) 30%, rgba(11,16,22,.25) 60%, rgba(11,16,22,.95) 100%);
}
.p-hero--compact .p-hero__shade { background: none; }
.p-hero__bar {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: calc(var(--inset) + clamp(14px, 2vw, 26px)) calc(var(--inset) + clamp(18px, 3vw, 40px)) 0;
}
.p-hero__bar .nav a { text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.p-hero__brand img { width: clamp(110px, 12vw, 150px); height: auto; }
.p-hero__title {
  position: absolute; left: calc(var(--inset) + var(--pad)); bottom: calc(var(--inset) + clamp(24px, 5vh, 56px));
}
.p-hero--compact .p-hero__title { position: relative; left: auto; bottom: auto; padding: 56px var(--pad) 40px; max-width: var(--wrap); margin: 0 auto; }
.p-hero__en { font-family: var(--serif-en); font-style: italic; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: .02em; }
.p-hero__ja { margin-top: 12px; font-family: var(--serif-ja); font-weight: 500; font-size: clamp(14px, 1.4vw, 16px); letter-spacing: .4em; color: var(--muted); }

/* ---------- 共通 ---------- */
.p-main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.p-main > section { padding: clamp(64px, 10vw, 120px) 0 0; }
.label {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif-en); font-size: 13px; letter-spacing: .3em; color: var(--brass);
}
.label::after { content: ''; flex: 0 0 48px; height: 1px; background: var(--brass); opacity: .7; }
.section-title { margin-top: 18px; font-family: var(--serif-ja); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: .14em; line-height: 1.6; }

.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: 260px; padding: 16px 22px;
  border: 1px solid var(--line);
  font-family: var(--serif-ja); font-weight: 600; font-size: 15px; letter-spacing: .18em;
  transition: background .3s, color .3s, border-color .3s;
}
.btn small { font-family: var(--serif-en); font-weight: 600; font-size: 12px; letter-spacing: .12em; opacity: .8; margin-left: 6px; }
.btn:hover { border-color: var(--brass); }
.btn--primary { border-color: var(--brass); background: rgba(194,162,115,.14); }
.btn--primary:hover { background: var(--brass); color: #17120a; }

/* ---------- コンセプト ---------- */
.concept__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 6vw, 88px); margin-top: 28px; align-items: start; }
.concept__title { font-family: var(--serif-ja); font-weight: 500; font-size: clamp(20px, 2.3vw, 30px); text-wrap: balance; line-height: 1.8; letter-spacing: .12em; }
.concept__body p { font-size: 15px; line-height: 2.2; letter-spacing: .06em; color: #ddd7cc; }
.concept__body p + p { margin-top: 1.4em; }

/* ---------- 店内の写真 ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 1vw, 14px); }
.gallery__item { aspect-ratio: 4 / 5; overflow: hidden; background: #111820; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.gallery__item:hover img { transform: scale(1.03); }

/* ---------- 営業時間とアクセス ---------- */
.access__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); margin-top: 32px; }
.info__row { display: grid; grid-template-columns: 6.5em 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(194,162,115,.28); }
.info__row:last-child { border-bottom: 1px solid rgba(194,162,115,.28); }
.info dt { font-family: var(--serif-ja); font-size: 14px; letter-spacing: .16em; color: var(--brass); }
.info dd { font-size: 15px; line-height: 1.9; letter-spacing: .05em; }
.info dd a { border-bottom: 1px solid var(--line); }
.hours { border-collapse: collapse; }
.hours th { text-align: left; font-weight: 400; padding: 2px 24px 2px 0; white-space: nowrap; color: var(--muted); }
.hours td { font-family: var(--serif-en); font-size: 17px; letter-spacing: .05em; padding: 2px 0; }
.hours .is-closed td { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.info__note { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.map { display: flex; flex-direction: column; gap: 10px; }
.map iframe {
  width: 100%; aspect-ratio: 4 / 3; border: 0; background: #111820;
  /* 地図を店の色調になじませる */
  filter: grayscale(1) invert(.9) contrast(.9) brightness(.95);
}
.map__link { align-self: flex-end; font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.map__link:hover { color: var(--paper); }

/* ---------- スタッフ ---------- */
.staff__list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: 40px; }
.member__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #111820; --inset: 8px; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.9); }
.member__role { margin-top: 20px; font-family: var(--serif-en); font-size: 13px; letter-spacing: .24em; color: var(--brass); text-transform: uppercase; }
.member__name { margin-top: 6px; font-family: var(--serif-ja); font-weight: 500; font-size: 22px; letter-spacing: .2em; }
.member__bio { margin-top: 14px; font-size: 14px; line-height: 2; letter-spacing: .04em; color: #ddd7cc; }
.staff__empty { margin-top: 28px; color: var(--muted); }

/* ---------- 本文（お知らせ・プライバシーポリシー） ---------- */
.prose { max-width: 760px; font-size: 15px; line-height: 2.1; letter-spacing: .04em; color: #ddd7cc; }
.prose__date { font-family: var(--serif-en); color: var(--brass); letter-spacing: .12em; margin-bottom: 20px; }
.prose > * + * { margin-top: 1.3em; }
.prose h2, .prose h3 { font-family: var(--serif-ja); font-weight: 500; color: var(--paper); letter-spacing: .1em; margin-top: 2.2em; }
.prose a { color: var(--brass-hi); text-decoration: underline; text-underline-offset: 3px; }
.prose img { height: auto; }

/* ---------- 予約導線 ---------- */
.cta { text-align: center; padding-bottom: clamp(64px, 10vw, 120px) !important; }
.cta .label { justify-content: center; }
.cta .label::before { content: ''; flex: 0 0 48px; height: 1px; background: var(--brass); opacity: .7; }
.cta__title { margin-top: 18px; font-family: var(--serif-ja); font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: .16em; }
.cta__lead { margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.9; }
.cta__actions { margin-top: 28px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- フッター ---------- */
.site-foot {
  border-top: 1px solid rgba(194,162,115,.28);
  padding: 48px var(--pad) 36px;
  display: grid; justify-items: center; gap: 22px; text-align: center;
}
.site-foot__brand img { width: 170px; height: auto; }
.site-foot__addr { font-size: 13px; line-height: 1.9; color: var(--muted); letter-spacing: .05em; }
.site-foot__copy { font-size: 11.5px; color: #7d786f; letter-spacing: .06em; display: flex; gap: 18px; }

/* ---------- スマホ ---------- */
@media (max-width: 900px) {
  .p-hero { height: clamp(320px, 52svh, 520px); }
  .p-hero__bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* 縦積みのメニューが写真の明るい所に重なるので、上部を深めに暗くする */
  .p-hero__shade { background: linear-gradient(180deg, rgba(11,16,22,.82) 0%, rgba(11,16,22,.55) 28%, rgba(11,16,22,.15) 50%, rgba(11,16,22,.95) 100%); }
  .concept__grid, .access__grid { grid-template-columns: 1fr; }
  .staff__list { grid-template-columns: 1fr; gap: 48px; }
  .member { display: grid; grid-template-columns: 42% 1fr; column-gap: 18px; align-items: start; }
  .member__photo { grid-row: span 4; }
  .member__role { margin-top: 0; font-size: 11.5px; letter-spacing: .18em; }
  .member__name { font-size: 19px; letter-spacing: .14em; }
  .member__bio { grid-column: 1 / -1; margin-top: 16px; }
  .btn { width: 100%; min-width: 0; }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .info__row { grid-template-columns: 1fr; gap: 6px; }
}