/*
  ワイン会 LP の明るい版（象牙色の紙＋ワインレッド＋金の細線）の共通部品。
  会に依存しない見た目だけを置く。会ごとの色や表は各 LP の <style> に書く。

  使い方:
    <head> に Google Fonts の <link>（Cormorant Garamond / Shippori Mincho）を置き、
    このファイルを読んでから、会固有の <style> を書く（後に書いたほうが勝つ）。
    ワイン一覧の節には class="wine-band" を付ける（深い色の帯になる）。
    動きと折りたたみは event-light.js。

  前提にしているマークアップ:
    .wrap > .pad / .hero > img / .lead / section > .rule > span > em + i
    .facts > .fact > dt + dd / .sessions > .session > .s-label .s-time .s-seats .s-go
    .points / .flow > li > .t / .pair > .pair-head .wine .wine-sub .pair-hint
    .faq / .notes / .venue* / .cta-inline / .cta-sticky
*/

:root {
  --bg: #f6f1e9;
  --panel: #fffdf9;
  --ink: #2a1d21;
  --ink-dim: #76666a;
  --gold: #a8842f;
  --gold-dim: #c4a868;
  --red: #6b2631;
  --deep: #3a1820;
  --line: rgba(168, 132, 47, 0.32);
  --mincho: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'MS PMincho', serif;
  --latin: 'Cormorant Garamond', 'Times New Roman', serif;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 104px;
  /* 日本語の折り返し。行頭に「ー」「ン」「ォ」や句読点が来ないようにする（strict）。
     auto-phrase は対応ブラウザ（Chrome 119+）でだけ文節の切れ目で折る。
     効かないブラウザでも strict と pretty で崩れは減る */
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
/* 語のまとまり。中では折らず、まとまりの間でだけ折る */
.ph {
  display: inline-block;
}
/* 地名や銘柄など、途中で折りたくない語 */
.nw {
  white-space: nowrap;
}
img {
  display: block;
  max-width: 100%;
}
.wrap {
  max-width: 560px;
  margin: 0 auto;
}
.pad {
  padding: 0 24px;
}

/* ---- ヒーロー ---- */
/*
  ikebana-0905と同じ当て方。height: auto を必ず添える。
  img に width/height 属性を書いてあるため、これが無いと属性の高さが
  そのまま効いて縦に伸びる。属性は読み込み中のレイアウト崩れを防ぐために残す。
*/
.hero img {
  width: 100%;
  height: auto;
}

/* ---- 共通 ---- */
.rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-dim);
  margin: 0 0 22px;
}
.rule::before,
.rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.rule span {
  font-size: 11px;
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.lead {
  font-family: var(--mincho);
  font-size: 17px;
  line-height: 2.1;
  letter-spacing: 0.05em;
  margin: 40px 0 32px;
}
section {
  padding: 44px 0;
}
section + section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.facts {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  margin: 0 0 36px;
}
.fact {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 4px 16px;
  font-size: 15px;
  padding: 5px 0;
}
.fact dt {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.16em;
  padding-top: 4px;
}
.fact dd {
  margin: 0;
}
.price-num {
  font-family: var(--mincho);
  font-size: 26px;
}
.note-sm {
  font-size: 12px;
  color: var(--ink-dim);
}
.remaining {
  color: var(--gold);
  font-size: 13px;
}

.points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 20px;
  font-size: 15px;
}
.points li:last-child {
  margin-bottom: 0;
}
.points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 1px;
  background: var(--gold);
}
.flow {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow li {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 15px;
}
.flow li:last-child {
  border-bottom: 0;
}
.flow .t {
  color: var(--gold);
  font-family: var(--mincho);
}

/* ---- ワイン一覧（ペア表示） ----
   種類別に並べず、会の組み方（2本1組を9組＋軸の外に2本）のまま出す。
   この会は産地を巡るので、提供順（01〜15）と産地を出す。
   銘柄名だけ並べても、初めての人には何の会か伝わらない。 */
.wine-lead {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-dim);
  margin-bottom: 26px;
}
.pair {
  margin-bottom: 26px;
}
.pair:last-child {
  margin-bottom: 0;
}
.pair-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.pair-no {
  font-family: var(--mincho);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.pair-label {
  font-family: var(--mincho);
  font-size: 15px;
  letter-spacing: 0.16em;
  flex: 1;
}
/* 軸の外の2本は見出しが銘柄名になる。組の名前（「加糖」「樽」）は短いので
   0.16em が効くが、銘柄名に同じ字間をかけると間延びして読みにくい。 */
.pair-label.is-name {
  font-size: 14px;
  letter-spacing: 0.04em;
}
.pair-kind {
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.pair-hint {
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-dim);
  margin-top: 9px;
}
.solo-head {
  font-family: var(--mincho);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  text-align: center;
  margin: 36px 0 20px;
}
.wine {
  padding: 7px 0;
  font-size: 14px;
}
.wine-sub {
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.wine-loading {
  font-size: 13px;
  color: var(--ink-dim);
}

.faq dt {
  font-size: 15px;
  margin-top: 22px;
  padding-left: 1.4em;
  position: relative;
}
.faq dt::before {
  content: 'Q';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-family: var(--mincho);
}
.faq dt:first-of-type {
  margin-top: 0;
}
.faq dd {
  margin: 6px 0 0;
  padding-left: 1.4em;
  font-size: 14px;
  color: var(--ink-dim);
}
/* HTML に書いた注記は空白を詰める（pre-wrap だとソースの字下げがそのまま出る）。
   DB の文字列を JS で流し込む注記だけ .notes-db を足し、改行だけ残す */
.notes {
  font-size: 13px;
  color: var(--ink-dim);
}
.notes-db {
  white-space: pre-line;
}

/* ---- 部の選択 ---- */
.sessions {
  display: grid;
  gap: 12px;
}
.session {
  display: grid;
  grid-template-columns: 4.5em 1fr auto;
  align-items: center;
  gap: 4px 14px;
  padding: 16px 18px;
  border: 1px solid var(--gold);
  text-decoration: none;
  color: var(--ink);
  position: relative;
}
.session::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(201, 162, 39, 0.28);
  pointer-events: none;
}
.s-label {
  font-family: var(--mincho);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.s-time {
  font-family: var(--mincho);
  font-size: 17px;
  letter-spacing: 0.06em;
}
.s-go {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
}
/* 残席は時刻の下に小さく。行を増やさず収める */
.s-seats {
  grid-column: 2 / 4;
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.session.full {
  border-color: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.session.full .s-label,
.session.full .s-go {
  color: var(--ink-dim);
}
.flow .t2 {
  font-size: 11px;
  color: var(--ink-dim);
}

/* ---- CTA ---- */
.cta-inline {
  display: block;
  text-align: center;
  text-decoration: none;
  margin: 8px 0 0;
  padding: 17px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--mincho);
  font-size: 16px;
  letter-spacing: 0.14em;
  position: relative;
}
.cta-inline::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  pointer-events: none;
}
.cta-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: rgba(11, 9, 8, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.cta-sticky a {
  display: block;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  padding: 16px;
  background: var(--gold);
  color: #14100e;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  border-radius: 2px;
}
.cta-sticky .sub {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 7px;
  letter-spacing: 0.06em;
}
.soldout {
  background: #3a322c !important;
  color: var(--ink-dim) !important;
  pointer-events: none;
}
footer {
  padding: 40px 0 56px;
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
  letter-spacing: 0.06em;
}
footer a {
  color: var(--ink-dim);
}

/* ---- 明るい版 ---- */
section + section { border-top: 1px solid rgba(43, 34, 38, 0.07); }
.lead { color: var(--ink); }
.facts { background: var(--panel); border: 0; border-radius: 10px; padding: 20px 18px; }
.fact dt { color: var(--red); }
.remaining { color: var(--red); }
.points li::before { background: var(--red); }
.flow li { border-bottom: 1px dashed rgba(43, 34, 38, 0.12); }
.flow .t, .pair-no { color: var(--red); }
.session { background: #fff; border: 1px solid rgba(114, 47, 55, 0.28); border-radius: 10px; box-shadow: 0 1px 2px rgba(43, 34, 38, 0.05); }
.session::after { display: none; }
.s-label { color: var(--red); }
.s-go { background: var(--red); color: #fff; padding: 6px 12px; border-radius: 999px; }
.session.full { border-color: rgba(43, 34, 38, 0.1); background: var(--panel); }
.session.full .s-go { background: transparent; }
.cta-inline { color: var(--red); border-color: var(--red); border-radius: 999px; }
.cta-inline::after { display: none; }
.cta-sticky { background: rgba(255, 255, 255, 0.94); border-top: 1px solid rgba(43, 34, 38, 0.08); }
.cta-sticky a { background: var(--red); color: #fff; border-radius: 999px; }
.soldout { background: #ece6e2 !important; }
.hero { background: var(--bg); }

.venue { display: grid; gap: 12px; }
.venue img { width: 100%; height: auto; border-radius: 10px; }
.venue-main { aspect-ratio: 680 / 455; object-fit: cover; }
.venue-row { display: grid; grid-template-columns: 42% 1fr; gap: 16px; align-items: end; }
.venue-row > div { min-width: 0; }
.venue-name { font-family: var(--mincho); font-size: 20px; letter-spacing: 0.08em; margin: 0; }
.venue-kind { font-size: 11px; letter-spacing: 0.12em; color: var(--ink-dim); margin: 2px 0 12px; }
.venue-addr { font-size: 13px; line-height: 1.8; margin: 0; }
.venue-note { font-size: 13px; line-height: 1.9; color: var(--ink-dim); margin: 6px 0 0; }

.session .s-go { grid-column: 1 / -1; justify-self: stretch; text-align: center; padding: 10px 12px; margin-top: 8px; font-size: 13px; }
/* ---- 明るい版: 白ではなく「ラベルの紙」。象牙色の地＋ワインレッドの帯＋金の細線 ---- */
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ヒーロー: 深いワインレッドの台紙に、金の細枠で告知画像を収める */
.hero {
  background: radial-gradient(120% 80% at 50% 0%, #5a2430 0%, var(--deep) 60%, #241015 100%);
  padding: 18px 18px 26px;
  position: relative;
}
.hero img {
  border: 1px solid rgba(214, 180, 106, 0.6);
  outline: 1px solid rgba(214, 180, 106, 0.25);
  outline-offset: 5px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.hero::after {
  content: 'Salon de Vin  ×  CellarsClub';
  display: block;
  text-align: center;
  margin-top: 18px;
  font-family: var(--latin);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(234, 210, 160, 0.85);
}

.lead { font-size: 18px; text-align: center; margin: 44px 0 36px; }
.lead strong { font-weight: 600; color: var(--red); }
/* リード文は 1 文 1 ブロック。文の中は .ph（語のまとまり）の切れ目でだけ折る。
   <br> 任せにすると、字間の広い明朝では語の途中で折れる */
.lead .ls { display: block; }
.lead .ls + .ls { margin-top: 0.35em; }
@media (max-width: 420px) {
  .lead { font-size: 17px; letter-spacing: 0.03em; line-height: 1.95; }
}

/* 見出し: 英字のイタリックを添えて、ワインリストの体裁にする */
.rule { flex-direction: column; gap: 4px; margin: 0 0 28px; color: var(--ink); }
.rule::before, .rule::after { display: none; }
.rule span { font-family: var(--mincho); font-size: 19px; letter-spacing: 0.14em; white-space: normal; text-align: center; }
.rule em {
  display: block;
  font-family: var(--latin);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 2px;
}
.rule i {
  display: block;
  width: 36px;
  height: 1px;
  margin: 10px auto 0;
  background: var(--gold);
  transform-origin: center;
}

section { padding: 52px 0; }
section + section { border-top: 0; }

/* 要項: 紙のカードに金の二重罫 */
.facts {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px 20px;
  position: relative;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 30px -18px rgba(58, 24, 32, 0.35);
}
.facts::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(168, 132, 47, 0.16); pointer-events: none; }
.fact dt { color: var(--gold); font-family: var(--mincho); }
.price-num { font-family: var(--latin); font-size: 32px; font-weight: 500; color: var(--red); }

/* 部の選択 */
.session {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 10px 24px -18px rgba(58, 24, 32, 0.45);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.session:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(58, 24, 32, 0.55); }
.s-label { font-family: var(--mincho); }
.s-time { font-family: var(--latin); font-size: 22px; font-weight: 500; }
.s-go {
  background: linear-gradient(180deg, #7a2e3a, var(--red));
  border-radius: 2px;
  letter-spacing: 0.14em;
  position: relative;
  overflow: hidden;
}

.points li::before { background: var(--gold); }
.flow .t { font-family: var(--latin); font-size: 17px; color: var(--red); }

/* 帯: 「当日のワイン」は深い色の面に置き、ページに一度だけ夜を入れる。
   帯にする節に class="wine-band" を付ける */
.wine-band {
  background: var(--deep);
  color: #f3e9dc;
  margin: 0 -24px;
  padding: 56px 24px;
  --ink: #f3e9dc;
  --ink-dim: #c2b0a6;
  --line: rgba(214, 180, 106, 0.28);
}
.wine-band .rule em { color: #d9b86a; }
.wine-band .pair-no { color: #d9b86a; }

/* 会場 */
.venue img { border-radius: 2px; box-shadow: 0 14px 30px -20px rgba(58, 24, 32, 0.6); }
.venue-name { font-family: var(--latin); font-size: 26px; font-weight: 500; letter-spacing: 0.1em; }

/* 予約の節 */
section:has(#reserve) .lead { text-align: left; }
.cta-inline { border-radius: 2px; background: var(--panel); }
.cta-sticky { background: rgba(246, 241, 233, 0.9); border-top: 1px solid var(--line); }
.cta-sticky a {
  background: linear-gradient(180deg, #7a2e3a, var(--red));
  border-radius: 2px;
  letter-spacing: 0.16em;
  font-family: var(--mincho);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px -10px rgba(107, 38, 49, 0.8);
}
/* 金の光がゆっくり一度だけ横切る */
.cta-sticky a::after, .s-go::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 228, 170, 0.35), transparent);
  transform: skewX(-20deg);
  animation: sheen 6s ease-in-out 1.6s infinite;
}
@keyframes sheen { 0% { left: -60%; } 22%, 100% { left: 130%; } }

/* ---- 動き ---- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes slideup { from { transform: translateY(110%); } to { transform: none; } }

.hero img { animation: settle 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.hero::after { animation: rise 1s ease 0.6s both; }
.lead { animation: rise 1s ease 0.9s both; }
.cta-sticky { animation: slideup 0.8s cubic-bezier(.2, .7, .2, 1) 1.4s both; }

/* JS が付ける印。印が無ければ最初から見えている */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2, .7, .2, 1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
.js-reveal .rule i { transform: scaleX(0); transition: transform 1s ease 0.2s; }
.js-reveal .rule.in i { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .rule i { transform: none; }
}

/* ワイン一覧の折りたたみ: 各部の最初の3本だけ出し、残りはボタンで開く */
.wine-fold .pair.is-folded { display: none; }
.wine-more {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 6px 0 8px; padding: 13px;
  font: inherit; font-family: var(--mincho); font-size: 14px; letter-spacing: 0.12em;
  color: #ead2a0; background: transparent;
  border: 1px solid rgba(214, 180, 106, 0.45); border-radius: 2px; cursor: pointer;
}
.wine-more:focus-visible { outline: 2px solid #d9b86a; outline-offset: 3px; }
.wine-more .chev { display: inline-block; transition: transform 0.4s ease; }
.wine-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
.wine-fold .pair.is-opening { animation: rise 0.6s ease both; }

/* 会場をファーストビューの直下に。上下の余白を詰め、区切り線を消す */
.venue-top { padding: 4px 0 40px; }