/* 和醸ベルジャン
   夜のカウンター一色の世界。縦書きの扉（ヒーロー）→ 貸切のしくみ（灯りで席を示す）→ 使い方 → 秘密基地 → 価値 → コース → 会員 → FAQ → 予約 */
:root {
  --wood: #191512;        /* 胡桃材のカウンター */
  --wood-2: #221c17;      /* 一段明るい面 */
  --paper: #ece2cf;       /* 和紙の白 */
  --paper-dim: #b3a892;   /* 補足の文字 */
  --amber: #d6a058;       /* 琥珀のビール色 */
  --moss: #8a9673;        /* 店内の緑 */
  --line: rgba(236, 226, 207, .14);
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --latin: "Cormorant Garamond", "Times New Roman", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  background: var(--wood);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .04em;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(72px, 11vw, 132px); border-top: 1px solid var(--line); }
.band.alt { background: var(--wood-2); }
.photo { width: 100%; height: 100%; object-fit: cover; }

/* ヘッダー */
.top {
  position: sticky; top: 0; z-index: 5;
  background: rgba(25, 21, 18, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.logo { display: block; text-decoration: none; }
.logo img { height: 40px; width: auto; }
.top nav { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.top nav a.plain { text-decoration: none; color: var(--paper-dim); }
.top nav a.plain:hover { color: var(--paper); }
@media (max-width: 760px) { .top nav a.plain { display: none; } .logo img { height: 32px; } }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border: 1px solid var(--amber); color: var(--wood); background: var(--amber);
  font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-decoration: none;
  transition: background .25s, color .25s;
}
.btn:hover { background: transparent; color: var(--amber); }
.btn.small { padding: 8px 16px; font-size: 13px; }
.btn.ghost { background: transparent; color: var(--paper); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--amber); color: var(--amber); }

/* 見出し共通 */
.eyebrow { font-size: 12px; letter-spacing: .3em; color: var(--amber); margin: 0; }
h2 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.55; letter-spacing: .1em; margin: 10px 0 28px; text-wrap: balance;
}
.lead { max-width: 34em; color: var(--paper-dim); }

/* ヒーロー：縦書きの扉 */
.hero { position: relative; overflow: hidden; padding-block: clamp(64px, 10vw, 128px); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { object-position: 50% 60%; filter: blur(28px) saturate(1.1); transform: scale(1.15); }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(25, 21, 18, .96) 0%, rgba(25, 21, 18, .84) 50%, rgba(25, 21, 18, .55) 100%);
}
.hero .wrap { display: grid; grid-template-columns: auto 1fr minmax(220px, 340px); gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; z-index: 1; }
.hero h1 {
  writing-mode: vertical-rl; font-family: var(--serif); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.75; letter-spacing: .16em; margin: 0;
  height: 13.5em; text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
.hero h1 .accent { color: var(--amber); }
.hero-photo { margin: 0; aspect-ratio: 683 / 915; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.ph { display: inline-block; }
.hero .side { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.limited {
  display: inline-flex; align-items: baseline; gap: 14px; align-self: flex-start; margin: 0;
  border: 1px solid var(--amber); padding: 10px 18px; background: rgba(25, 21, 18, .6);
  font-family: var(--serif); font-weight: 700; letter-spacing: .2em; color: var(--amber);
}
.limited b { font-size: 26px; }
.tagline { font-family: var(--serif); font-size: 18px; letter-spacing: .14em; margin: 0; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--paper-dim); }
.facts li { display: flex; gap: 12px; }
.facts li::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--amber); margin-top: 1em; }
.facts strong { color: var(--paper); font-weight: 500; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero .cta span { font-size: 12px; color: var(--paper-dim); }
@media (max-width: 960px) {
  .hero-photo { display: none; }
  .hero .wrap { grid-template-columns: auto 1fr; }
  .hero-bg img { filter: none; transform: none; object-position: 50% 50%; }
}
@media (max-width: 760px) {
  .hero { padding-block: 0 56px; }
  .hero-bg { display: none; }
  .hero-photo { display: block; order: -1; aspect-ratio: 4 / 3; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); box-shadow: none; position: relative; }
  .hero-photo img { object-position: 50% 62%; }
  .hero-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, rgba(25, 21, 18, 0), var(--wood)); }
  .hero-bg::after { background: linear-gradient(180deg, rgba(25, 21, 18, .7) 0%, rgba(25, 21, 18, .92) 55%, rgba(25, 21, 18, .97) 100%); }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1 { writing-mode: horizontal-tb; height: auto; font-size: clamp(27px, 7.4vw, 34px); line-height: 1.6; letter-spacing: .08em; }
  .hero h1 br.v { display: none; }
}

/* 貸切のしくみ */
.how-head { display: grid; grid-template-columns: 1fr 300px; gap: clamp(28px, 5vw, 64px); align-items: end; margin-bottom: 40px; }
.how-head figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.how-head figcaption { font-size: 12px; color: var(--paper-dim); margin-top: 8px; }
.how-head .lead { margin: 0; }
@media (max-width: 760px) { .how-head { grid-template-columns: 1fr; } .how-head figure { aspect-ratio: 4 / 3; } }
.steps { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.steps li { padding: 28px 24px 28px 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.steps .n { font-family: var(--latin); font-style: italic; font-size: 34px; color: var(--amber); line-height: 1; }
.steps h3 { font-family: var(--serif); font-size: 19px; letter-spacing: .1em; margin: 0; line-height: 1.6; }
.steps p { margin: 0; color: var(--paper-dim); font-size: 14px; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* 灯りで席を示す */
.lamps { border: 1px solid var(--line); padding: clamp(22px, 4vw, 40px); display: grid; gap: 26px; background: var(--wood); }
.lamps-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.lamps-head h3 { font-family: var(--serif); font-size: 20px; letter-spacing: .1em; margin: 0; }
.lamps-head output { font-family: var(--serif); font-size: 15px; color: var(--paper-dim); }
.lamps-head output b { font-size: 30px; color: var(--amber); font-weight: 800; margin-right: 4px; }
.row { display: grid; grid-template-columns: repeat(14, 1fr); gap: clamp(4px, 1vw, 10px); }
.seat { display: grid; justify-items: center; gap: 8px; }
.seat i {
  display: block; width: 100%; max-width: 34px; aspect-ratio: 1 / 1.1; border-radius: 50% 50% 46% 46%;
  border: 1px solid var(--line); background: transparent; transition: background .3s, box-shadow .3s, border-color .3s;
}
.seat.on i { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 18px rgba(214, 160, 88, .55); }
.seat.kept i { border-color: rgba(214, 160, 88, .45); background: rgba(214, 160, 88, .08); }
.seat span { font-size: 10px; color: var(--paper-dim); font-variant-numeric: tabular-nums; }
.counter-line { height: 6px; background: linear-gradient(90deg, #5a4330, #7a5b40, #5a4330); border-radius: 2px; }
.lamps label { font-size: 13px; color: var(--paper-dim); display: grid; gap: 10px; }
.lamps input[type=range] { width: 100%; accent-color: var(--amber); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--paper-dim); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); }
.legend .a { background: var(--amber); border-color: var(--amber); }
.legend .b { background: rgba(214, 160, 88, .08); border-color: rgba(214, 160, 88, .45); }
.lamps .note { margin: 0; font-family: var(--serif); font-size: 16px; letter-spacing: .08em; }

/* こんな夜に */
.scenes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.scene { background: var(--wood); padding: clamp(24px, 3.4vw, 36px); display: grid; gap: 10px; align-content: start; min-width: 0; }
.scene .who { font-size: 12px; letter-spacing: .26em; color: var(--moss); margin: 0; }
.scene h3 { font-family: var(--serif); font-size: 20px; line-height: 1.6; letter-spacing: .08em; margin: 0; }
.scene p { margin: 0; color: var(--paper-dim); font-size: 14px; }
@media (max-width: 680px) { .scenes { grid-template-columns: 1fr; } }

/* 秘密基地 */
.base { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.base .copy p { margin: 0 0 1.2em; max-width: 30em; }
.base-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.base-photos figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.compare { border: 1px solid var(--line); margin: 0; }
.compare div { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 14px 20px; font-size: 14px; }
.compare div + div { border-top: 1px solid var(--line); }
.compare dt { color: var(--paper-dim); }
.compare dd { margin: 0; }
@media (max-width: 760px) { .base { grid-template-columns: 1fr; } }

/* 価値 */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); }
.value { display: grid; gap: 14px; align-content: start; min-width: 0; }
.value figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.value h3 { font-family: var(--serif); font-size: 19px; letter-spacing: .14em; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--amber); }
.value p { margin: 0; color: var(--paper-dim); font-size: 14px; }
@media (max-width: 760px) { .values { grid-template-columns: 1fr; } }

/* コース */
.dishes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 12px; }
.dishes figure { margin: 0; aspect-ratio: 1; overflow: hidden; }
.dishes-cap { font-size: 12px; color: var(--paper-dim); margin: 0 0 36px; }
@media (max-width: 600px) { .dishes { grid-template-columns: repeat(2, 1fr); } }
.courses { display: grid; border-top: 1px solid var(--line); }
.course { display: grid; grid-template-columns: 15em 1fr auto; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.course h3 { font-family: var(--serif); font-size: 21px; letter-spacing: .1em; margin: 0; line-height: 1.5; }
.course h3 small { display: block; font-family: var(--sans); font-size: 12px; color: var(--moss); letter-spacing: .2em; font-weight: 500; }
.course p { margin: 0; color: var(--paper-dim); font-size: 14px; min-width: 0; }
.price { font-family: var(--serif); font-weight: 700; font-size: 22px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.course p.price { color: var(--paper); }
.price small { font-size: 12px; font-weight: 500; color: var(--paper-dim); margin-left: 4px; }
.course.feature h3 { color: var(--amber); }
@media (max-width: 760px) { .course { grid-template-columns: 1fr; gap: 8px; } }
.fee { margin-top: 28px; font-size: 13px; color: var(--paper-dim); }

/* 会員 */
.member { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: center; border: 1px solid var(--line); padding: clamp(24px, 4vw, 40px); }
.member h3 { font-family: var(--serif); font-size: 22px; letter-spacing: .1em; margin: 8px 0; }
.member p { margin: 0; color: var(--paper-dim); max-width: 32em; }
.member > div { min-width: 0; flex: 1 1 320px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative;
  font-family: var(--serif); font-size: 17px; letter-spacing: .06em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; position: absolute; right: 4px; top: 20px; color: var(--amber); }
.faq details[open] summary::after { content: "－"; }
.faq details p { margin: 0 0 22px; color: var(--paper-dim); font-size: 14px; max-width: 40em; }
.faq strong { color: var(--paper); font-weight: 500; }

/* Instagram（夜の記録） */
.insta { padding-block: clamp(56px, 8vw, 96px); }
.insta-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-bottom: 24px; }
.insta-head h2 { margin-bottom: 0; font-size: clamp(22px, 2.8vw, 28px); }
.insta-link { font-family: var(--latin); font-style: italic; font-size: 18px; color: var(--amber); text-decoration: none; letter-spacing: .06em; }
.insta-link:hover { text-decoration: underline; }
.insta-feed { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.insta-feed a { display: block; overflow: hidden; aspect-ratio: 1; }
.insta-feed img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .3s; }
.insta-feed a:hover img { transform: scale(1.05); opacity: .85; }
.insta-feed.live { display: block; }
@media (max-width: 600px) { .insta-feed { grid-template-columns: repeat(3, 1fr); } }

/* 予約 */
.reserve .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.reserve h2 { font-size: clamp(28px, 4vw, 42px); }
.info { margin: 0; display: grid; border-top: 1px solid var(--line); }
.info div { display: grid; grid-template-columns: 6.5em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.info dt { color: var(--paper-dim); }
.info dd { margin: 0; min-width: 0; }
.tel { font-family: var(--serif); font-size: 18px; letter-spacing: .1em; text-decoration: none; }
.reserve .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
@media (max-width: 760px) { .reserve .grid { grid-template-columns: 1fr; } }

footer { border-top: 1px solid var(--line); padding-block: 36px; font-size: 12px; color: var(--paper-dim); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
footer a { color: var(--paper-dim); }

/* 会員ページ（member/） */
.m-hero { position: relative; overflow: hidden; padding-block: clamp(72px, 12vw, 140px); }
.m-hero-bg { position: absolute; inset: 0; z-index: 0; }
.m-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25, 21, 18, .95) 0%, rgba(25, 21, 18, .82) 55%, rgba(25, 21, 18, .6) 100%); }
.m-hero .wrap { position: relative; z-index: 1; }
.m-hero h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.6; letter-spacing: .12em; margin: 12px 0 24px; }
.m-hero .lead { color: var(--paper); }
.m-fee { font-size: 13px; color: var(--paper-dim); margin: 18px 0 0; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.plan { background: var(--wood); padding: clamp(24px, 3.4vw, 36px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.plan.feature { background: #241d16; }
.plan-en { font-family: var(--latin); font-style: italic; font-size: 20px; color: var(--amber); margin: 0; line-height: 1; }
.plan h3 { font-family: var(--serif); font-size: 21px; letter-spacing: .1em; margin: 0; }
.plan .price { margin: 0; }
.plan ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--paper-dim); flex: 1; align-content: start; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--amber); margin-top: 1em; }
.plan .btn { justify-content: center; }
.plans-note { margin-top: 20px; font-size: 13px; color: var(--paper-dim); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
.m-terms { border: 1px solid var(--line); padding: clamp(22px, 4vw, 36px); max-width: 780px; }
.m-terms h3 { font-family: var(--serif); font-size: 19px; letter-spacing: .1em; margin: 0 0 14px; }
.m-terms ul { margin: 0 0 24px; padding-left: 1.2em; color: var(--paper-dim); font-size: 14px; display: grid; gap: 6px; }
.m-links { margin: 20px 0 0; font-size: 13px; }
.m-links a, .legal a { color: var(--paper-dim); }

/* 特定商取引法に基づく表記（tokusho/） */
.legal h1 { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 32px); letter-spacing: .1em; margin: 10px 0 32px; }
.legal dl { margin: 0; border-top: 1px solid var(--line); max-width: 860px; }
.legal dl div { display: grid; grid-template-columns: 11em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.legal dt { color: var(--paper-dim); }
.legal dd { margin: 0; min-width: 0; }
@media (max-width: 640px) { .legal dl div { grid-template-columns: 1fr; gap: 4px; } }