/* =========================================================
   10/1 SHISHA NIGHT — くろねこ × Mirage de Medusa
   カジュアル / ネオン / 煙
   ========================================================= */

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

:root {
  --bg: #0a0512;
  --bg-2: #120829;
  --bg-3: #1a0c38;
  --paper: #f6f1ff;
  --muted: #a99cc4;
  --pink: #ff4fc3;
  --pink-soft: #ff8fd8;
  --violet: #8b4dff;
  --cyan: #46e6ff;
  --lime: #c6ff4f;
  --amber: #ffb648;
  --line: rgba(255, 255, 255, 0.14);

  --sans: 'Noto Sans JP', system-ui, sans-serif;
  --serif: 'Noto Serif JP', serif;
  --display: 'Archivo Black', 'Noto Sans JP', sans-serif;

  --shell: 1080px;
  --progress: 0;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.sn-shell { width: min(100% - 40px, var(--shell)); margin: 0 auto; }

/* ---------- 進捗バー ---------- */
.sn-progress {
  position: fixed; inset: 0 0 auto; z-index: 90;
  height: 3px; background: rgba(255, 255, 255, 0.08);
}
.sn-progress span {
  display: block; height: 100%;
  width: calc(var(--progress) * 100%);
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan));
}

/* ---------- ヘッダー ---------- */
.sn-header {
  position: fixed; inset: 3px 0 auto; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  width: min(100% - 40px, var(--shell));
  margin: 0 auto; padding: 14px 0;
}
.sn-header-brand img { width: 108px; height: auto; opacity: 0.9; }
.sn-header nav { display: flex; align-items: center; gap: 22px; }
.sn-header nav a { font-size: 0.82rem; font-weight: 700; color: var(--muted); transition: color 0.2s; }
.sn-header nav a:hover { color: var(--paper); }
.sn-header-cta {
  padding: 9px 18px; border-radius: 999px;
  background: var(--pink); color: #17061a !important;
  box-shadow: 0 0 22px rgba(255, 79, 195, 0.5);
}

/* =========================================================
   HERO
   ========================================================= */
.sn-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 118px 20px 60px;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, #2a1050 0%, transparent 60%),
    radial-gradient(90% 60% at 80% 40%, rgba(70, 230, 255, 0.14), transparent 60%),
    var(--bg);
}
.sn-hero-blobs { position: absolute; inset: 0; pointer-events: none; }
.sn-hero-blobs i {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55;
}
.sn-hero-blobs i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: 4vh; background: rgba(255, 79, 195, 0.5); }
.sn-hero-blobs i:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: 26vh; background: rgba(139, 77, 255, 0.5); }
.sn-hero-blobs i:nth-child(3) { width: 34vw; height: 34vw; left: 34vw; bottom: -14vh; background: rgba(70, 230, 255, 0.28); }

.sn-hero-grid {
  position: relative;
  width: min(100%, var(--shell));
  display: grid; grid-template-columns: 1fr;
  justify-items: center; align-items: center;
  gap: 4px;
}
.sn-hero-copy { position: relative; }
.sn-hero-sub {
  margin-top: 14px;
  font-size: 0.9rem; font-weight: 700; color: var(--muted);
}

.sn-hero-kicker {
  position: relative;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 14px;
}

/* コラボのロゴロックアップ（ヒーローの主役） */
.sn-lockup {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3.4vw, 26px);
  margin-bottom: 22px;
}
.sn-lockup-kuroneko {
  /* PNG内に余白があるぶん、Mirageより大きめに取って光学的に揃える */
  width: clamp(192px, 48vw, 300px); height: auto;
}
.sn-lockup-mirage {
  width: clamp(80px, 19vw, 116px); height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.sn-lockup-x {
  font-family: var(--display);
  font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  color: var(--pink);
  text-shadow: 0 0 18px rgba(255, 79, 195, 0.75);
}
.sn-hero-kicker b { color: var(--pink); margin: 0 4px; }

.sn-hero-title {
  position: relative;
  font-family: var(--display);
  font-size: clamp(3rem, 15vw, 7.4rem);
  line-height: 0.92; letter-spacing: -0.01em;
}
.sn-hero-title .sn-line-1 { display: block; color: var(--paper); }
.sn-hero-title .sn-line-2 {
  display: block;
  background: linear-gradient(95deg, var(--pink), var(--amber) 55%, var(--lime));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(255, 79, 195, 0.45));
}

/* ---------- シーシャ + 煙 ---------- */
.sn-rig { position: relative; width: min(72vw, 330px); margin: 4px auto 0; }
.sn-pipe {
  position: relative; z-index: 2;
  width: 100%; height: auto;
  /* 写真の黒背景を背景と馴染ませ、紫の発光だけを残す */
  mix-blend-mode: screen;
  filter: saturate(1.12) contrast(1.06);
  /* 四辺をフェードさせて矩形の境界を消す（切り抜き風） */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 84%, transparent 99%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 84%, transparent 99%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

/* 煙：写真の炭（画像上端から約13%）を起点に、細い筋で立ち上げる */
.sn-smoke {
  position: absolute; left: 50%; top: 13%;
  width: 120px; height: 210px;
  transform: translate(-50%, -100%);
  pointer-events: none; z-index: 3;
  mix-blend-mode: screen;
  opacity: 0.72;
}
.sn-smoke i {
  position: absolute; left: 50%; bottom: 0;
  width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(226, 206, 255, 0.34) 45%,
    transparent 72%);
  filter: blur(6px);
  opacity: 0;
  animation: snPuff 6.5s linear infinite;
  animation-delay: calc(var(--i) * -0.81s);
}
@keyframes snPuff {
  0% { opacity: 0; transform: translate(0, 4px) scale(0.4); }
  14% { opacity: 0.75; }
  55% { opacity: 0.4; }
  100% { opacity: 0; transform: translate(var(--drift, 14px), calc(var(--rise, 190px) * -1)) scale(2.6); }
}
.sn-smoke i:nth-child(2n) { --drift: -20px; }
.sn-smoke i:nth-child(3n) { --drift: 26px; }
.sn-smoke i:nth-child(4n) { --drift: -8px; }

/* ---------- ヒーロー数値 ---------- */
.sn-hero-facts {
  position: relative;
  display: flex; justify-content: center; gap: clamp(20px, 7vw, 54px);
  margin-top: 6px;
}
.sn-hero-facts b {
  display: block; font-family: var(--display);
  font-size: clamp(1.9rem, 7vw, 3rem); line-height: 1;
  background: linear-gradient(180deg, var(--paper), var(--pink-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sn-hero-facts span { font-size: 0.74rem; font-weight: 700; color: var(--muted); }

/* ---------- 日付チップ ---------- */
.sn-datechip {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 26px; padding: 12px 24px;
  border: 2px solid var(--paper); border-radius: 999px;
  transform: rotate(-2.5deg);
  background: rgba(10, 5, 18, 0.5);
}
.sn-datechip strong { font-family: var(--display); font-size: 2rem; line-height: 1; }
.sn-datechip strong small { font-size: 1.1rem; margin: 0 2px; color: var(--pink); }
.sn-datechip span { font-size: 0.68rem; font-weight: 700; line-height: 1.5; text-align: left; color: var(--muted); }

.sn-cta-main {
  position: relative;
  display: inline-block; margin-top: 26px;
  padding: 17px 34px; border-radius: 999px;
  font-weight: 900; font-size: 1rem;
  color: #17061a;
  background: linear-gradient(95deg, var(--lime), var(--cyan));
  box-shadow: 0 14px 40px rgba(70, 230, 255, 0.35);
  transition: transform 0.2s;
}
.sn-cta-main:hover { transform: translateY(-3px); }
.sn-cta-main b { color: #a8005f; }

/* =========================================================
   ティッカー
   ========================================================= */
.sn-ticker {
  overflow: hidden; padding: 14px 0;
  border-block: 2px solid var(--paper);
  background: var(--pink);
}
.sn-ticker-track {
  display: flex; align-items: center; gap: 22px;
  width: max-content;
  animation: snTicker 24s linear infinite;
}
.sn-ticker-track span {
  font-family: var(--display); font-size: 1.15rem; color: #17061a; white-space: nowrap;
}
.sn-ticker-track i { color: #17061a; font-size: 0.6rem; }
@keyframes snTicker { to { transform: translateX(-33.333%); } }

/* =========================================================
   共通パーツ
   ========================================================= */
section { position: relative; padding: clamp(66px, 11vw, 116px) 0; }

.sn-tag {
  display: inline-block; margin-bottom: 16px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--cyan);
}
.sn-tag-pink { color: var(--pink); }
.sn-tag-lime { color: var(--lime); }

.sn-h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.9rem, 6.4vw, 3.2rem);
  line-height: 1.34; letter-spacing: 0.01em;
  margin-bottom: 18px;
}
.sn-h2 em {
  font-style: normal;
  background: linear-gradient(95deg, var(--pink), var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sn-h2-big { font-size: clamp(2.4rem, 9vw, 4.4rem); }

.sn-lead { max-width: 46ch; color: var(--muted); font-size: 0.95rem; }
.sn-lead-wide { max-width: 60ch; }

/* リビール */
.sn-h2, .sn-lead, .sn-count, .sn-flavor, .sn-hap-card,
.sn-sess, .sn-person, .sn-price-card, .sn-board-wrap, .sn-tag {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.is-in { opacity: 1 !important; transform: none !important; }

/* =========================================================
   吸い放題
   ========================================================= */
.sn-unlimited { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }

.sn-count-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 40px;
}
.sn-count {
  padding: 26px 14px; border-radius: 20px; text-align: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.sn-count b {
  display: block; font-family: var(--display);
  font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1;
  color: var(--cyan);
}
.sn-count span { display: block; font-weight: 700; font-size: 0.9rem; margin-top: 4px; }
.sn-count small { display: block; font-size: 0.68rem; color: var(--muted); }
.sn-count-hot { border-color: var(--pink); background: rgba(255, 79, 195, 0.12); }
.sn-count-hot b { color: var(--pink); }

/* =========================================================
   4つの煙
   ========================================================= */
.sn-flavors { background: var(--bg-2); }

.sn-flavor-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-top: 40px;
}
.sn-flavor {
  position: relative; overflow: hidden;
  padding: 30px 24px 26px; border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.3s, border-color 0.3s;
}
.sn-flavor:hover { transform: translateY(-5px); }
.sn-flavor::after {
  content: ''; position: absolute; inset: auto -30% -60% -30%;
  height: 150px; border-radius: 50%;
  filter: blur(46px); opacity: 0.5;
}
.sn-f1::after { background: var(--pink); }
.sn-f2::after { background: var(--amber); }
.sn-f3::after { background: var(--cyan); }
.sn-f4::after { background: var(--lime); }
.sn-f1:hover { border-color: var(--pink); }
.sn-f2:hover { border-color: var(--amber); }
.sn-f3:hover { border-color: var(--cyan); }
.sn-f4:hover { border-color: var(--lime); }

.sn-flavor-no {
  font-family: var(--display); font-size: 0.8rem;
  color: var(--muted); letter-spacing: 0.1em;
}
.sn-flavor h3 {
  position: relative; z-index: 1;
  margin: 8px 0 12px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.1rem, 3.6vw, 1.5rem); line-height: 1.45;
}
.sn-flavor p { position: relative; z-index: 1; font-size: 0.86rem; color: var(--muted); }
.sn-flavor-mood {
  position: relative; z-index: 1;
  display: inline-block; margin-top: 14px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.7rem; font-weight: 700;
}

/* =========================================================
   ハプバならでは
   ========================================================= */
.sn-hap {
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 20% 0%, rgba(255, 79, 195, 0.2), transparent 60%),
    var(--bg-3);
}
.sn-hap-smoke { position: absolute; inset: 0; pointer-events: none; }
.sn-hap-smoke i {
  position: absolute; bottom: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 143, 216, 0.22), transparent 68%);
  filter: blur(34px);
  animation: snDrift 17s linear infinite;
}
.sn-hap-smoke i:nth-child(1) { left: 6%; animation-delay: 0s; }
.sn-hap-smoke i:nth-child(2) { left: 34%; animation-delay: -5s; }
.sn-hap-smoke i:nth-child(3) { left: 62%; animation-delay: -9s; }
.sn-hap-smoke i:nth-child(4) { left: 84%; animation-delay: -13s; }
@keyframes snDrift {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-560px) scale(1.7); }
}

.sn-hap-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 42px;
}
.sn-hap-card {
  padding: 28px 24px; border-radius: 22px;
  border: 1px solid rgba(255, 143, 216, 0.34);
  background: rgba(10, 5, 18, 0.5);
  backdrop-filter: blur(6px);
}
.sn-hap-card b {
  font-family: var(--display); font-size: 0.82rem; color: var(--pink);
}
.sn-hap-card h3 {
  margin: 10px 0 12px;
  font-family: var(--serif); font-weight: 700;
  font-size: 1.22rem; line-height: 1.45;
}
.sn-hap-card p { font-size: 0.85rem; color: var(--muted); }
.sn-hap-note { margin-top: 26px; font-size: 0.74rem; color: var(--muted); }

/* =========================================================
   3部構成
   ========================================================= */
.sn-sessions { background: var(--bg-2); }

.sn-sess-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 42px;
}
.sn-sess {
  display: flex; flex-direction: column;
  padding: 28px 24px; border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.sn-sess-top {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.sn-sess-top span { font-family: var(--display); font-size: 0.72rem; color: var(--cyan); letter-spacing: 0.08em; }
.sn-sess-top time { font-family: var(--display); font-size: 1.32rem; }
.sn-sess h3 { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.45; }
.sn-sess-by { margin-top: 10px; font-size: 0.76rem; font-weight: 700; color: var(--pink); }
.sn-sess-secret { margin-top: 12px; font-size: 0.84rem; color: var(--muted); }
.sn-sess ul { margin-top: 14px; list-style: none; display: grid; gap: 7px; }
.sn-sess li {
  position: relative; padding-left: 18px;
  font-size: 0.84rem; color: var(--paper);
}
.sn-sess li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--pink);
}

/* =========================================================
   スタッフ
   ========================================================= */
.sn-staff { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }

.sn-staff-grid {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 36px;
}
.sn-person {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px 10px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.sn-person:hover {
  transform: translateY(-3px);
  border-color: var(--pink);
  background: rgba(255, 79, 195, 0.1);
}
.sn-person img {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.18);
}
.sn-person h3 { font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.sn-person p { font-size: 0.68rem; font-weight: 700; color: var(--cyan); }
.sn-person span { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--muted); }
.sn-staff-note { margin-top: 20px; font-size: 0.76rem; color: var(--muted); }

/* =========================================================
   料金
   ========================================================= */
.sn-price { background: var(--bg); }

.sn-price-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  margin-top: 40px;
}
.sn-price-card {
  position: relative;
  padding: 32px 28px; border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.sn-price-best {
  border-color: var(--lime);
  background: linear-gradient(160deg, rgba(198, 255, 79, 0.13), rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 40px rgba(198, 255, 79, 0.16);
}
.sn-badge {
  position: absolute; top: -13px; left: 28px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--lime); color: #17061a;
  font-size: 0.68rem; font-weight: 900;
}
.sn-price-label { font-size: 0.74rem; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; }
.sn-price-card h3 { margin: 4px 0 18px; font-family: var(--serif); font-weight: 700; font-size: 1.24rem; }
.sn-price-main {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-family: var(--display); font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: 1;
  color: var(--lime);
}
.sn-price-main small { font-size: 0.5em; }
.sn-price-main em {
  font-family: var(--sans); font-style: normal;
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
}
.sn-price-sub {
  margin-top: 10px; font-size: 0.82rem; color: var(--muted);
  text-decoration: line-through; text-decoration-color: rgba(255, 79, 195, 0.7);
}
.sn-price-benefit {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(198, 255, 79, 0.28);
  color: var(--lime);
  font-size: 0.76rem;
  font-weight: 700;
}
.sn-price-note { margin-top: 22px; font-size: 0.74rem; color: var(--muted); }

/* =========================================================
   来店予告ボード
   ========================================================= */
.sn-board { background: linear-gradient(180deg, var(--bg), var(--bg-3)); }

.sn-board-wrap {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 20px; margin-top: 40px; align-items: start;
}

.sn-board-form {
  padding: 28px 26px; border-radius: 24px;
  border: 1px solid rgba(255, 79, 195, 0.36);
  background: rgba(10, 5, 18, 0.6);
}
.sn-field { margin-bottom: 18px; }
.sn-field label {
  display: block; margin-bottom: 9px;
  font-size: 0.8rem; font-weight: 700;
}
.sn-field label b {
  margin-left: 7px; padding: 2px 8px; border-radius: 4px;
  background: var(--pink); color: #17061a;
  font-size: 0.62rem;
}
.sn-field label span {
  margin-left: 7px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--muted);
  font-size: 0.62rem; font-weight: 700;
}
.sn-field input, .sn-field textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--paper);
  font-family: var(--sans); font-size: 0.95rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.sn-field textarea { resize: vertical; min-height: 86px; line-height: 1.8; }
.sn-field input:focus, .sn-field textarea:focus {
  outline: none; border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 79, 195, 0.2);
}
.sn-field ::placeholder { color: #6c6188; }

.sn-genders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sn-genders button {
  padding: 12px 4px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  color: var(--muted);
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700;
  transition: all 0.2s;
}
.sn-genders button:hover { color: var(--paper); border-color: rgba(255, 255, 255, 0.4); }
.sn-genders button.is-on {
  color: #17061a; border-color: transparent;
  background: linear-gradient(95deg, var(--pink), var(--violet));
  box-shadow: 0 0 18px rgba(255, 79, 195, 0.45);
}

.sn-submit {
  width: 100%; padding: 17px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(95deg, var(--lime), var(--cyan));
  color: #17061a;
  font-family: var(--sans); font-size: 1rem; font-weight: 900;
  box-shadow: 0 12px 34px rgba(70, 230, 255, 0.3);
  transition: transform 0.2s, filter 0.2s;
}
.sn-submit:hover:not(:disabled) { transform: translateY(-2px); }
.sn-submit:disabled { cursor: not-allowed; filter: grayscale(0.5) brightness(0.8); }
.sn-submit.is-loading { cursor: progress; }
.sn-submit.is-done { background: linear-gradient(95deg, #3ee07f, var(--cyan)); }
.sn-form-note { margin-top: 14px; font-size: 0.7rem; color: var(--muted); line-height: 1.75; }
.sn-form-note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.sn-board-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sn-board-head h3 { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.sn-board-head span { font-family: var(--display); font-size: 0.92rem; color: var(--cyan); }

.sn-list { max-height: 520px; overflow-y: auto; }
.sn-item { padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.sn-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sn-item-head strong { font-family: var(--serif); font-weight: 700; font-size: 0.98rem; }
.sn-item-head time { margin-left: auto; font-size: 0.72rem; color: var(--muted); }
.sn-item-comment { margin-top: 7px; font-size: 0.86rem; color: var(--muted); word-break: break-word; }

.sn-gtag {
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.66rem; font-weight: 700;
}
.sn-g-male { color: var(--cyan); }
.sn-g-female { color: var(--pink); }
.sn-g-couple { color: var(--violet); }
.sn-g-group { color: var(--lime); }

.sn-list-empty { padding: 36px 0; text-align: center; color: var(--muted); font-size: 0.86rem; }

/* =========================================================
   FINAL
   ========================================================= */
.sn-final {
  overflow: hidden; text-align: center;
  background: radial-gradient(90% 70% at 50% 100%, rgba(139, 77, 255, 0.36), transparent 62%), var(--bg);
}
.sn-final-smoke { position: absolute; inset: auto 0 0; height: 300px; pointer-events: none; }
.sn-final-smoke i {
  position: absolute; bottom: -70px;
  width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%);
  filter: blur(36px);
  animation: snDrift 15s linear infinite;
}
.sn-final-smoke i:nth-child(1) { left: 12%; }
.sn-final-smoke i:nth-child(2) { left: 46%; animation-delay: -6s; }
.sn-final-smoke i:nth-child(3) { left: 76%; animation-delay: -11s; }

.sn-final .sn-tag { color: var(--muted); }
.sn-final-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin-top: 26px;
}
.sn-btn {
  padding: 16px 30px; border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 700; font-size: 0.92rem;
  transition: transform 0.2s, border-color 0.2s;
}
.sn-btn:hover { transform: translateY(-2px); border-color: var(--paper); }
.sn-btn-primary {
  border-color: transparent; color: #17061a;
  background: linear-gradient(95deg, var(--lime), var(--cyan));
  font-weight: 900;
  box-shadow: 0 12px 34px rgba(70, 230, 255, 0.3);
}

/* =========================================================
   フッター
   ========================================================= */
.sn-footer {
  padding: 54px 20px 108px; text-align: center;
  border-top: 1px solid var(--line);
}
.sn-footer-logos {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 16px;
}
.sn-footer-logos img:first-child { width: 110px; height: auto; opacity: 0.8; }
.sn-footer-logos img:last-child { width: 44px; height: 44px; border-radius: 8px; opacity: 0.85; }
.sn-footer-logos span { color: var(--muted); }
.sn-footer p { font-family: var(--display); font-size: 0.86rem; }
.sn-footer small { display: block; margin-top: 10px; font-size: 0.7rem; color: var(--muted); }

/* =========================================================
   モバイル固定バー
   ========================================================= */
.sn-mobile-bar { display: none; }

/* =========================================================
   レスポンシブ
   ========================================================= */
/* デスクトップ：コピー左 / シーシャ右の2カラム */
@media (min-width: 901px) {
  .sn-hero { padding-block: 140px 70px; }
  .sn-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    justify-items: start; text-align: left;
    gap: 30px;
  }
  .sn-hero-title { font-size: clamp(4rem, 7.4vw, 7rem); }
  .sn-rig { width: min(100%, 300px); margin: 0; justify-self: center; }
  .sn-hero-facts { justify-content: flex-start; width: min(100%, var(--shell)); margin-top: -10px; }
  .sn-datechip, .sn-cta-main { align-self: flex-start; }
  .sn-hero > .sn-datechip, .sn-hero > .sn-cta-main { margin-left: max(0px, calc((100% - var(--shell)) / 2)); }
}

@media (max-width: 900px) {
  .sn-hap-cards, .sn-sess-grid, .sn-staff-grid { grid-template-columns: 1fr; }
  .sn-board-wrap { grid-template-columns: 1fr; }
  .sn-count-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sn-header nav a:not(.sn-header-cta) { display: none; }
  .sn-header { padding: 10px 0; }
  .sn-header-brand img { width: 88px; }

  .sn-hero { padding: 88px 20px 44px; }
  .sn-hero-title { font-size: clamp(2.7rem, 13vw, 4rem); }
  .sn-hero-sub { font-size: 0.8rem; margin-top: 10px; }
  .sn-rig { width: min(52vw, 190px); margin-top: 0; }
  .sn-smoke { width: 84px; height: 124px; --rise: 114px; }
  .sn-smoke i { width: 20px; height: 20px; margin-left: -10px; filter: blur(5px); }
  .sn-hero-facts { margin-top: 14px; }
  .sn-datechip { margin-top: 20px; }
  .sn-cta-main { margin-top: 20px; padding: 15px 28px; font-size: 0.94rem; }

  .sn-price-grid { grid-template-columns: 1fr; }
  .sn-flavor-grid { grid-template-columns: 1fr; }

  .sn-list { max-height: 420px; }

  .sn-mobile-bar {
    position: fixed; inset: auto 0 0; z-index: 85;
    display: grid; grid-template-columns: auto 1fr; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 5, 18, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .sn-mobile-bar a:first-child {
    display: grid; place-items: center;
    padding: 0 18px; border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.76rem; font-weight: 700;
  }
  .sn-mobile-bar a:last-child {
    display: grid; place-items: center;
    padding: 11px; border-radius: 999px;
    background: linear-gradient(95deg, var(--lime), var(--cyan));
    color: #17061a;
  }
  .sn-mobile-bar small { font-size: 0.62rem; font-weight: 700; }
  .sn-mobile-bar strong { font-size: 0.92rem; font-weight: 900; }
}

@media (max-width: 420px) {
  .sn-genders { grid-template-columns: repeat(2, 1fr); }
  .sn-hero-facts { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-smoke i, .sn-hap-smoke i, .sn-final-smoke i, .sn-coal, .sn-ticker-track {
    animation: none;
  }
  .sn-smoke i { opacity: 0.35; }
}