/* =====================================================================
   ViVi Club — Webinar Funnel · Shared Design System
   LP (lp/index.html) / brand-dna.json から抽出した実トークンを継承。
   全ファネルページ (register / watch / replay / thanks) で共通使用。
   トーン: 煽らない・明朝で品格・実績と卒業生の声で語る。
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Shippori+Mincho:wght@400;500;600;700&display=swap');

:root{
  /* ---- palette (LP 継承) ---- */
  --white:#fcfdfd; --paper:#f4f1ec; --paper-2:#efeae3;
  --ink:#0b0b0b; --black:#040000;
  --muted:#6c6660; --muted-light:#79736a;
  --line:rgba(11,11,11,0.12); --line-soft:rgba(11,11,11,0.06);
  --line-white:rgba(255,255,255,0.15);
  --accent:#9a8156; --accent-soft:#bda478;
  --ease:cubic-bezier(0.22,1,0.36,1);

  /* ---- Fibonacci spacing scale (px) ---- */
  --s5:5px; --s8:8px; --s13:13px; --s21:21px; --s34:34px;
  --s55:55px; --s89:89px; --s144:144px;

  /* ---- golden / Fibonacci type scale (px) ---- */
  --t-cap:13px; --t-body:16px; --t-sub:20px; --t-h3:26px;
  --t-h2:34px; --t-h1:55px; --t-hero:68px;

  /* ---- line-heights ---- */
  --lh-tight:1.4; --lh-head:1.5; --lh-body:1.9; --lh-loose:2.0;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:'Shippori Mincho',serif;font-weight:400;
  font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

a{text-decoration:none;color:inherit}
img,video{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--white)}

/* ---------- layout primitives ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s21)}
.narrow{max-width:720px;margin:0 auto;padding:0 var(--s21)}
.section{padding:var(--s89) 0}
@media(min-width:768px){
  .wrap,.narrow{padding-left:var(--s34);padding-right:var(--s34)}
  .section{padding:var(--s144) 0}
}

/* ---------- eyebrow / heading ---------- */
.eyebrow{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:var(--t-sub);letter-spacing:0.16em;color:var(--accent);
  margin-bottom:var(--s21);display:flex;align-items:center;gap:var(--s13);
}
.eyebrow::before{content:'';width:var(--s34);height:1px;background:var(--accent);opacity:0.55}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{display:none}
.eyebrow--center::after{content:'';width:var(--s34);height:1px;background:var(--accent);opacity:0.55}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:'';display:block;width:var(--s34);height:1px;background:var(--accent);opacity:0.55}

.head{
  font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:var(--t-h2);line-height:var(--lh-head);letter-spacing:0.02em;
}
@media(min-width:768px){.head{font-size:var(--t-h1)}}
.head--lg{font-size:var(--t-h1)}
@media(min-width:768px){.head--lg{font-size:var(--t-hero)}}

.lead{font-size:var(--t-sub);line-height:var(--lh-body);color:var(--muted);margin-top:var(--s21)}
.cap{font-size:var(--t-cap);letter-spacing:0.08em;color:var(--muted-light)}
.center{text-align:center}

/* ---------- CTA (champagne-gold · shimmer · glow) ---------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s13);
  font-family:'Shippori Mincho',serif;font-weight:700;
  font-size:var(--t-body);letter-spacing:0.08em;color:#1c1306;
  background:linear-gradient(120deg,#c8a868 0%,#9a8156 40%,#b6985a 62%,#e7cf92 100%);
  background-size:220% 100%;background-position:0 0;
  padding:var(--s21) var(--s55);border:none;border-radius:2px;
  position:relative;overflow:hidden;cursor:pointer;line-height:var(--lh-head);
  text-align:center;transition:background-position .6s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 6px 24px rgba(154,129,86,0.28);
}
.cta:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 10px 34px rgba(154,129,86,0.4)}
.cta:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(0.4)}
.cta--ghost{
  background:none;color:var(--ink);box-shadow:none;
  border:1px solid var(--line);font-weight:500;letter-spacing:0.06em;
}
.cta--ghost:hover{transform:none;box-shadow:none;background:var(--paper)}
.cta--block{display:flex;width:100%}

/* ---------- card / panel ---------- */
.panel{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:3px;padding:var(--s34);
}
@media(min-width:768px){.panel{padding:var(--s55)}}

/* ---------- divider ---------- */
.rule{width:var(--s55);height:1px;background:var(--accent);opacity:0.6;margin:var(--s34) auto}

/* ---------- countdown ---------- */
.countdown{display:flex;gap:var(--s21);justify-content:center;margin:var(--s34) 0}
.countdown__unit{text-align:center;min-width:64px}
.countdown__num{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:var(--t-h1);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.countdown__label{font-size:var(--t-cap);letter-spacing:0.12em;color:var(--muted-light);margin-top:var(--s8)}

/* ---------- video frame (mockup-capable) ---------- */
.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:4px;overflow:hidden;
  background:linear-gradient(135deg,#161410 0%,#221d15 100%);
  border:1px solid var(--line-white);box-shadow:0 24px 60px rgba(4,0,0,0.4);
}
.video-frame video,.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* mockup placeholder shown until real recording is dropped in */
.video-mockup{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s21);text-align:center;
  color:rgba(255,255,255,0.82);padding:var(--s34);
}
.video-mockup__badge{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:var(--t-cap);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent-soft);border:1px solid var(--line-white);
  padding:var(--s5) var(--s13);border-radius:99px;
}
.video-mockup__play{
  width:84px;height:84px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.4);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);backdrop-filter:blur(2px);
}
.video-mockup__play::after{
  content:'';border-style:solid;border-width:14px 0 14px 24px;
  border-color:transparent transparent transparent rgba(255,255,255,0.9);
  margin-left:6px;
}
.video-mockup__note{font-size:var(--t-cap);color:rgba(255,255,255,0.5);max-width:380px;line-height:var(--lh-head)}
.video-mockup__time{font-family:'Cormorant Garamond',serif;font-size:var(--t-h3);color:rgba(255,255,255,0.9);font-variant-numeric:tabular-nums}

/* mock progress bar that advances with the simulated playhead */
.video-progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);transition:width 1s linear;z-index:2}

/* ---------- slot picker (register) ---------- */
.slots{display:grid;gap:var(--s13);margin:var(--s34) 0}
@media(min-width:560px){.slots{grid-template-columns:1fr 1fr 1fr}}
.slot{
  border:1px solid var(--line);border-radius:3px;background:var(--white);
  padding:var(--s21);cursor:pointer;text-align:center;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.slot:hover{border-color:var(--accent-soft);transform:translateY(-2px)}
.slot[aria-pressed="true"]{border-color:var(--accent);background:var(--paper);box-shadow:inset 0 0 0 1px var(--accent)}
.slot__day{font-weight:600;font-size:var(--t-h3)}
.slot__date{font-size:var(--t-cap);color:var(--muted);margin-top:var(--s5)}
.slot__time{font-family:'Cormorant Garamond',serif;font-size:var(--t-sub);color:var(--accent);margin-top:var(--s8)}

/* ---------- toast / sticky note ---------- */
.note-soft{
  background:var(--paper-2);border-left:2px solid var(--accent);
  padding:var(--s13) var(--s21);font-size:var(--t-cap);color:var(--muted);
  line-height:var(--lh-head);border-radius:0 2px 2px 0;
}

/* ---------- live badge ---------- */
.badge-live{
  display:inline-flex;align-items:center;gap:var(--s8);
  font-size:var(--t-cap);letter-spacing:0.14em;color:var(--accent);
  font-family:'Cormorant Garamond',serif;font-style:italic;
}
.badge-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#c0392b;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(var(--s21));transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .badge-live::before{animation:none}
  *{scroll-behavior:auto}
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-soft);padding:var(--s34) 0;text-align:center;color:var(--muted-light);font-size:var(--t-cap)}
.foot a{color:var(--muted);border-bottom:1px solid var(--line)}