/* ============================================================
   茂原七夕まつり 怪談ライブ 2026 — LP CSS
   目的：集客 & 百物語投稿促進
   ルール：文字はみ出し禁止 / 要素重なり禁止 / スマホ最適化 / 余白広め
============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: 'Noto Sans JP', sans-serif;
  background: #060d1f;
  color: #dde6f5;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { text-decoration: none; color: inherit; }

strong { font-weight: 700; }

/* ---------- Utility ---------- */
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.sp-only { display: none; }
@media (max-width: 600px) { .sp-only { display: inline; } }


/* ============================================================
   SECTION 共通
============================================================ */
.section-dark   { background: #060d1f; padding: 96px 0; }
.section-deeper { background: #03080f; padding: 96px 0; }
.section-darker { background: #020508; padding: 96px 0; }

.sec-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #e8c56a;
  border: 1px solid rgba(232,197,106,0.35);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.sec-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 12px;
}

.sec-sub {
  font-size: 0.95rem;
  color: #7a8fa8;
  margin-bottom: 56px;
}


/* ============================================================
   SCROLL REVEAL
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   BUTTONS
============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #e84a7f, #b8304d);
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
  box-shadow: 0 4px 24px rgba(232,74,127,0.45);
  white-space: nowrap;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(232,74,127,0.65);
}
.btn-primary:active { transform: translateY(0); opacity: 0.9; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  background: transparent;
  color: #dde6f5;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,0.28);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 18px 40px;
  font-size: 1.05rem;
}


/* ============================================================
   01. HERO
============================================================ */
.hero-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 背景グラデーション */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 130% 70% at 50% 0%, #1e0b38 0%, #0a0520 40%, #060d1f 75%);
  z-index: 0;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, #060d1f);
  z-index: 2;
  pointer-events: none;
}

/* 星 Canvas */
.star-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 短冊 */
.tanzaku-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.tz {
  position: absolute;
  top: -80px;
  width: 36px;
  padding: 6px 0 10px;
  border-radius: 3px 3px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  transform-origin: top center;
  animation: tzSway 4s ease-in-out infinite alternate;
}
.tz::before {
  content: '';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 1.5px; height: 18px;
  background: rgba(255,255,255,0.25);
}

.tz-1 { left: 7%; background: linear-gradient(180deg,#e84a7f,#a0234a); animation-delay: 0s; animation-duration: 3.2s; }
.tz-2 { left: 17%; background: linear-gradient(180deg,#4a9fe8,#1e66a8); animation-delay: .6s; animation-duration: 4s; }
.tz-3 { right: 9%; background: linear-gradient(180deg,#e8c56a,#a07e30); animation-delay: 1s; animation-duration: 3.6s; }
.tz-4 { right: 20%; background: linear-gradient(180deg,#7c4ae8,#4a1ea0); animation-delay: 1.4s; animation-duration: 4.4s; }
.tz-5 { left: 42%; background: linear-gradient(180deg,#4ae87c,#1ea03c); animation-delay: .3s; animation-duration: 3.8s; }

@keyframes tzSway {
  from { transform: rotate(-6deg); }
  to   { transform: rotate(6deg); }
}

/* HEROコンテンツ */
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #e8c56a;
  border: 1px solid rgba(232,197,106,0.35);
  background: rgba(232,197,106,0.07);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.hero-eyebrow .fas { font-size: 0.6rem; }

.hero-title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 28px;
}
.hero-title-sub {
  display: block;
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.hero-title-main {
  display: block;
  font-size: clamp(3rem, 12vw, 6rem);
  color: #e84a7f;
  letter-spacing: -0.01em;
  text-shadow: 0 0 60px rgba(232,74,127,0.4);
}

.hero-copy {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  color: #b8cce0;
  line-height: 1.8;
  margin-bottom: 32px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: #c8d8ee;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 16px;
  border-radius: 100px;
  white-space: nowrap;
}
.meta-badge .fas, .meta-badge .far {
  font-size: 0.8rem;
  color: #e8c56a;
}
.meta-badge .fa-map-marker-alt { color: #e84a7f; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* スクロールヒント */
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.scroll-mouse {
  width: 24px; height: 40px;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-dot-inner {
  width: 4px; height: 8px;
  background: rgba(255,255,255,0.45);
  border-radius: 2px;
  animation: scrollDotAnim 1.6s ease-in-out infinite;
}
@keyframes scrollDotAnim {
  0%,100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(8px); opacity: 0.2; }
}

/* HERO フェードアニメ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up         { animation: fadeUp 0.8s ease both; }
.delay-1         { animation-delay: 0.18s; }
.delay-2         { animation-delay: 0.38s; }
.delay-3         { animation-delay: 0.58s; }
.delay-4         { animation-delay: 0.78s; }


/* ============================================================
   02. EVENT
============================================================ */
.event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-top: 48px;
}

/* 左列：日時・会場情報（2行分） */
.event-info-card {
  grid-row: 1 / 3;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.event-info-icon {
  width: 52px; height: 52px;
  background: rgba(232,197,106,0.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #e8c56a;
  flex-shrink: 0;
}

.event-dl { display: flex; flex-direction: column; gap: 18px; }
.event-dl-row { display: flex; flex-direction: column; gap: 4px; }
.event-dl-row dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #5a7090;
  text-transform: uppercase;
}
.event-dl-row dd {
  font-size: 1rem;
  color: #dde6f5;
  font-weight: 500;
  line-height: 1.5;
}

/* 右列：第1部・第2部 */
.event-part-card {
  border-radius: 18px;
  padding: 28px;
  border: 1px solid transparent;
  transition: transform 0.25s ease;
}
.event-part-card:hover { transform: translateY(-4px); }

.event-part1 {
  background: linear-gradient(135deg, rgba(232,197,106,0.08), rgba(232,197,106,0.03));
  border-color: rgba(232,197,106,0.2);
}
.event-part2 {
  background: linear-gradient(135deg, rgba(232,74,127,0.08), rgba(232,74,127,0.03));
  border-color: rgba(232,74,127,0.2);
}

.part-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.part-num {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 100px;
}
.event-part1 .part-num { background: rgba(232,197,106,0.2); color: #e8c56a; }
.event-part2 .part-num { background: rgba(232,74,127,0.2); color: #e84a7f; }

.part-time {
  font-size: 1.1rem;
  font-weight: 900;
  font-family: 'Noto Serif JP', serif;
  color: #fff;
}

.part-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.part-desc {
  font-size: 0.875rem;
  color: #7a8fa8;
  line-height: 1.75;
  margin-bottom: 14px;
}
.part-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.part-features li {
  font-size: 0.83rem;
  color: #b0c4d8;
  display: flex;
  align-items: center;
  gap: 7px;
}
.event-part1 .fa-check-circle { color: #e8c56a; }
.event-part2 .fa-check-circle { color: #e84a7f; }


/* ============================================================
   03. CAST
============================================================ */
.cast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.cast-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cast-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.cast-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 14px;
}
.ca-1 { background: rgba(232,74,127,0.18); color: #e84a7f; }
.ca-2 { background: rgba(232,197,106,0.18); color: #e8c56a; }
.ca-3 { background: rgba(106,176,232,0.18); color: #6ab0e8; }
.ca-4 { background: rgba(167,139,250,0.18); color: #a78bfa; }

.cast-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--c);
  color: var(--c);
  margin-bottom: 8px;
}

.cast-name {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 3px;
}
.cast-role {
  font-size: 0.75rem;
  color: #5a7090;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.cast-bio {
  font-size: 0.82rem;
  color: #7a8fa8;
  line-height: 1.7;
}


/* ============================================================
   04. WHY
============================================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
}

.why-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 32px 24px;
  transition: transform 0.25s;
}
.why-card:hover { transform: translateY(-4px); }

.why-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--ic);
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,0.08);
}

.why-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 10px;
}
.why-text {
  font-size: 0.875rem;
  color: #7a8fa8;
  line-height: 1.78;
}


/* ============================================================
   05. HYAKUMONOGATARI
============================================================ */
.section-hyaku {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}

.hyaku-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 70% at 50% 50%, rgba(20,5,40,0.95) 0%, #06080f 100%);
  z-index: 0;
}

.hyaku-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 蝋燭 */
.hyaku-candle {
  position: relative;
  width: 28px;
  margin-bottom: 32px;
}
.candle-body {
  width: 28px;
  height: 80px;
  background: linear-gradient(180deg, #f5e6cc, #d4b07a);
  border-radius: 4px 4px 3px 3px;
  box-shadow: 0 0 12px rgba(255,200,100,0.15);
}
.candle-flame {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flame-inner {
  width: 12px;
  height: 20px;
  background: radial-gradient(ellipse at 50% 80%, #fff5a0 0%, #ffb020 40%, #e84a7f 80%, transparent 100%);
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  animation: flameDance 1.5s ease-in-out infinite alternate;
  filter: blur(0.5px);
}
@keyframes flameDance {
  from { transform: scaleX(1) scaleY(1) rotate(-2deg); }
  to   { transform: scaleX(0.92) scaleY(1.07) rotate(2deg); }
}

.hyaku-label {
  margin-bottom: 14px;
}
.hyaku-label.sec-label {
  border-color: rgba(232,74,127,0.4);
  color: #e84a7f;
}

/* 百物語タイトル */
.section-hyaku .sec-title {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  margin-bottom: 40px;
}

.hyaku-desc {
  max-width: 540px;
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hyaku-desc p {
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  color: #a0b4cc;
  line-height: 1.95;
}
.hyaku-desc strong { color: #dde6f5; }

.hyaku-highlight {
  display: inline-block;
  background: rgba(232,74,127,0.1);
  border: 1px solid rgba(232,74,127,0.3);
  border-radius: 12px;
  padding: 16px 22px;
  font-size: 0.92rem !important;
  color: #d0b8d0 !important;
  line-height: 1.7 !important;
}
.hyaku-highlight .fas {
  color: #e84a7f;
  margin-right: 8px;
}
.hyaku-highlight strong { color: #f0a8c0; }


/* ============================================================
   06. TICKET
============================================================ */
.ticket-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 52px;
}

.ticket-card {
  border-radius: 20px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease;
  position: relative;
}
.ticket-card:hover { transform: translateY(-5px); }

.t1 {
  background: linear-gradient(160deg, rgba(232,197,106,0.09), rgba(232,197,106,0.02));
  border: 1px solid rgba(232,197,106,0.22);
}
.t2 {
  background: linear-gradient(160deg, rgba(232,74,127,0.1), rgba(232,74,127,0.02));
  border: 1px solid rgba(232,74,127,0.22);
}
.t-set {
  background: linear-gradient(160deg, rgba(167,139,250,0.1), rgba(232,74,127,0.05));
  border: 2px solid rgba(167,139,250,0.35);
}

.ticket-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ticket-num {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 100px;
}
.t1 .ticket-num { background: rgba(232,197,106,0.2); color: #e8c56a; }
.t2 .ticket-num { background: rgba(232,74,127,0.2);  color: #e84a7f; }

.ticket-time-tag {
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  color: #8a9ab8;
}

.ticket-name {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.ticket-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ticket-price {
  font-family: 'Noto Serif JP', serif;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
}
.t-set .ticket-price { color: #a78bfa; font-size: 2.4rem; }
.ticket-tax { font-size: 0.78rem; color: #5a7090; }

.ticket-price-strike {
  font-size: 1rem;
  color: #4a5a70;
  text-decoration: line-through;
}
.ticket-arrow { color: #7a8fa8; font-size: 0.85rem; }
.ticket-save {
  font-size: 0.72rem;
  font-weight: 700;
  background: #e84a7f;
  color: #fff;
  padding: 3px 9px;
  border-radius: 100px;
}

.ticket-note {
  font-size: 0.8rem;
  color: #5a7090;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ticket-set-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  background: linear-gradient(135deg, #a78bfa, #7c5ccc);
  color: #fff;
  border-radius: 100px;
  width: fit-content;
}
.ticket-set-desc {
  font-size: 0.85rem;
  color: #7a8fa8;
  margin-top: -6px;
}

/* VIPシートバッジ */
.ticket-vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 13px;
  border-radius: 100px;
  width: fit-content;
  background: linear-gradient(135deg, rgba(232,74,127,0.25), rgba(232,74,127,0.1));
  border: 1px solid rgba(232,74,127,0.5);
  color: #f09ab8;
}
.ticket-vip-badge-gold {
  background: linear-gradient(135deg, rgba(232,197,106,0.25), rgba(232,197,106,0.08));
  border-color: rgba(232,197,106,0.5);
  color: #e8c56a;
}
.ticket-vip-badge-purple {
  background: linear-gradient(135deg, rgba(167,139,250,0.25), rgba(167,139,250,0.08));
  border-color: rgba(167,139,250,0.5);
  color: #c4b0fa;
}
.ticket-vip-badge .fa-crown { font-size: 0.7rem; }

/* VIP説明文 */
.ticket-vip-desc {
  font-size: 0.8rem;
  color: #6a7a98;
  line-height: 1.65;
  margin-top: -6px;
}
.ticket-vip-desc strong { color: #b0c4d8; }

/* sec-sub内のVIPラベル強調 */
.vip-label {
  color: #e8c56a;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(232,197,106,0.12);
  border: 1px solid rgba(232,197,106,0.25);
  font-size: 0.9em;
  white-space: nowrap;
}

/* チケットボタン */
.ticket-btn {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  transition: opacity 0.2s, transform 0.2s;
  margin-top: auto;
}
.ticket-btn:hover { opacity: 0.85; transform: translateY(-2px); }
.t1-btn   { background: rgba(232,197,106,0.2); color: #e8c56a; border: 1px solid rgba(232,197,106,0.35); }
.t2-btn   { background: rgba(232,74,127,0.2);  color: #e84a7f; border: 1px solid rgba(232,74,127,0.35); }
.tset-btn { background: linear-gradient(135deg, #a78bfa, #7c5ccc); color: #fff; box-shadow: 0 4px 18px rgba(124,92,204,0.4); }


/* ============================================================
   07. TIMETABLE
============================================================ */
.timetable-wrap {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid rgba(255,255,255,0.08);
  padding-left: 0;
}

.tl-row {
  display: grid;
  grid-template-columns: 80px 4px 1fr;
  gap: 0 20px;
  padding: 20px 0 20px 0;
  align-items: flex-start;
  position: relative;
}

.tl-time {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #5a7090;
  text-align: right;
  padding-top: 2px;
  white-space: nowrap;
}

.tl-bar {
  width: 4px;
  min-height: 100%;
  border-radius: 2px;
  align-self: stretch;
  position: relative;
}
/* ドット */
.tl-bar::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #060d1f;
}

.tl-content {
  padding-bottom: 4px;
  padding-left: 4px;
}
.tl-title { font-weight: 700; color: #fff; font-size: 1rem; margin-top: 4px; }
.tl-content > p { font-size: 0.85rem; color: #7a8fa8; margin-top: 4px; }

.tl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 100px;
}

/* タイムラインの色テーマ */
.tl-bar-day      { background: rgba(255,255,255,0.12); }
.tl-bar-day::before { background: #2a3a50; }
.tl-tag-day      { background: rgba(255,255,255,0.08); color: #7a8fa8; }

.tl-bar-sunset   { background: linear-gradient(180deg,#e8c56a,#c0943a); }
.tl-bar-sunset::before { background: #e8c56a; }
.tl-tag-sunset   { background: rgba(232,197,106,0.15); color: #e8c56a; }

.tl-bar-p1       { background: linear-gradient(180deg,#e8c56a,#e8a030); }
.tl-bar-p1::before { background: #e8c56a; box-shadow: 0 0 8px #e8c56a; }
.tl-tag-p1       { background: rgba(232,197,106,0.2); color: #e8c56a; border: 1px solid rgba(232,197,106,0.4); }
.tl-row-p1 .tl-time { color: #e8c56a; }

.tl-bar-interval { background: rgba(255,255,255,0.1); }
.tl-bar-interval::before { background: #2a3a50; }
.tl-tag-interval { background: rgba(255,255,255,0.06); color: #5a7090; }

.tl-bar-p2       { background: linear-gradient(180deg,#e84a7f,#b02060); }
.tl-bar-p2::before { background: #e84a7f; box-shadow: 0 0 8px #e84a7f; }
.tl-tag-p2       { background: rgba(232,74,127,0.2); color: #e84a7f; border: 1px solid rgba(232,74,127,0.4); }
.tl-row-p2 .tl-time { color: #e84a7f; }

.tl-bar-end      { background: rgba(106,176,232,0.3); }
.tl-bar-end::before { background: #6ab0e8; }
.tl-tag-end      { background: rgba(106,176,232,0.1); color: #6ab0e8; }


/* ============================================================
   08. ACCESS
============================================================ */
.access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
  margin-bottom: 56px;
}

.access-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.25s;
}
.access-card:hover { transform: translateY(-4px); }

.access-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #e8c56a;
  margin: 0 auto 16px;
}
.access-card:nth-child(2) .access-icon { color: #6ab0e8; }
.access-card:nth-child(3) .access-icon { color: #a78bfa; }

.access-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.access-text {
  font-size: 0.9rem;
  color: #7a8fa8;
  line-height: 1.7;
}
.access-text strong { color: #dde6f5; }
.access-text span { font-size: 0.78rem; color: #5a7090; }

/* SNS */
.sns-wrap { text-align: center; }
.sns-lead {
  font-size: 0.88rem;
  color: #5a7090;
  margin-bottom: 16px;
}
.sns-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sns-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: opacity 0.2s, transform 0.2s;
}
.sns-btn:hover { opacity: 0.8; transform: translateY(-2px); }
.sns-x    { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: #dde6f5; }
.sns-ig   { background: rgba(225,48,108,0.1);   border-color: rgba(225,48,108,0.25); color: #e1306c; }
.sns-line { background: rgba(0,195,80,0.1);      border-color: rgba(0,195,80,0.25);  color: #06c755; }


/* ============================================================
   09. LAST CTA
============================================================ */
.section-lastcta {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
}

.lastcta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(232,74,127,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 15% 80%, rgba(100,60,180,0.1) 0%, transparent 65%),
    #060d1f;
  z-index: 0;
}

.lastcta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lastcta-star-wrap { margin-bottom: 20px; }
.lastcta-star {
  font-size: 2.5rem;
  color: #e8c56a;
  animation: starPulse 3s ease-in-out infinite;
  display: inline-block;
}
@keyframes starPulse {
  0%,100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50%      { transform: scale(1.15) rotate(20deg); opacity: 1; }
}

.lastcta-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 16px;
}
.lastcta-title em {
  font-style: normal;
  color: #e84a7f;
  display: block;
}

.lastcta-date {
  font-size: 0.95rem;
  color: #7a8fa8;
  margin-bottom: 44px;
}

.lastcta-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}


/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background: #020508;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 40px 0;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.footer-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #dde6f5;
}
.footer-org { font-size: 0.82rem; color: #5a7090; }
.footer-copy { font-size: 0.75rem; color: #3a4a60; }


/* ============================================================
   RESPONSIVE — TABLET (768px以下)
============================================================ */
@media (max-width: 768px) {

  .section-dark,
  .section-deeper,
  .section-darker { padding: 72px 0; }

  .sec-sub { margin-bottom: 40px; }

  /* EVENT */
  .event-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .event-info-card { grid-row: auto; }

  /* CAST */
  .cast-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* WHY */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* TICKET */
  .ticket-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* TIMETABLE */
  .tl-row { grid-template-columns: 68px 4px 1fr; gap: 0 14px; }
  .tl-time { font-size: 0.9rem; }

  /* ACCESS */
  .access-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }

}


/* ============================================================
   RESPONSIVE — MOBILE (480px以下)
============================================================ */
@media (max-width: 480px) {

  .container { padding: 0 20px; }

  .section-dark,
  .section-deeper,
  .section-darker { padding: 64px 0; }

  .section-hyaku { padding: 96px 0; }
  .section-lastcta { padding: 100px 0; }

  /* 短冊は中央付近だけ */
  .tz-1, .tz-4 { display: none; }

  /* HERO */
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn-primary,
  .hero-cta .btn-ghost { width: 100%; max-width: 320px; justify-content: center; }

  .hero-meta { gap: 8px; }
  .meta-badge { font-size: 0.78rem; padding: 6px 12px; }

  /* CAST */
  .cast-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cast-card { padding: 18px 14px; }

  /* WHY */
  .why-card { padding: 24px 18px; }

  /* TICKET セット割 */
  .ticket-price-wrap { gap: 5px; }
  .t-set .ticket-price { font-size: 2rem; }

  /* LAST CTA */
  .lastcta-cta { flex-direction: column; align-items: center; }
  .lastcta-cta .btn-primary,
  .lastcta-cta .btn-ghost { width: 100%; max-width: 320px; justify-content: center; }

  /* TIMETABLE */
  .tl-row { grid-template-columns: 58px 4px 1fr; gap: 0 10px; }
  .tl-time { font-size: 0.82rem; }
  .tl-tag { font-size: 0.7rem; padding: 2px 9px; }

}


/* ============================================================
   SCROLLBAR
============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #060d1f; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

::selection { background: rgba(232,74,127,0.28); color: #fff; }