/* 1周年記念 宵宮歌会（event/）。ほかの下層ページより一段強い演出（金の額縁・舞う狐火・大きな数字）を、小さく上品に。
   画面幅の切り替えは site-responsive.css の「K3」の区切り */

/* ---- 最初の画面 ---- */
.event-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(96vh, 54rem);
  padding: 8.5rem var(--gutter) 5rem;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.event-hero-media {
  position: absolute;
  z-index: -3;
  inset: 0;
  margin: 0;
}
.event-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
  filter: saturate(.92) brightness(.62);
  transform: scale(1.04);
  animation: event-hero-drift 18s ease-in-out infinite alternate;
}
@keyframes event-hero-drift { to { transform: scale(1.1) translate(-1%, -1%); } }
.event-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgb(11 7 18 / .72), rgb(11 7 18 / .35) 70%, transparent),
    linear-gradient(0deg, var(--night) 0%, rgb(11 7 18 / .2) 38%, rgb(11 7 18 / .55) 100%);
  content: "";
}
/* 内側の細い金の額縁（角だけ少し濃く） */
.event-hero::after {
  position: absolute;
  z-index: -1;
  inset: clamp(5.4rem, 9vw, 6.4rem) clamp(.9rem, 2.4vw, 2rem) clamp(.9rem, 2.4vw, 2rem);
  border: 1px solid rgb(245 195 75 / .26);
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 1.6rem 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 0 / 1px 1.6rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 0 / 1.6rem 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 0 / 1px 1.6rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 1.6rem 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 1px 1.6rem no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 1.6rem 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 1px 1.6rem no-repeat;
  content: "";
  pointer-events: none;
}
.event-hero-lights { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.event-hero-lights i {
  position: absolute;
  bottom: -2rem;
  width: .5rem;
  height: .64rem;
  border-radius: 58% 42% 58% 42% / 68% 68% 32% 32%;
  background: radial-gradient(ellipse at 48% 64%, #effaff 0 14%, var(--kitsunebi) 34%, #4D8DFF 76%);
  box-shadow: 0 0 .9rem var(--kitsunebi);
  opacity: 0;
  animation: event-foxfire 13s linear infinite;
}
.event-hero-lights i:nth-child(1) { left: 12%; animation-delay: -1s; }
.event-hero-lights i:nth-child(2) { left: 24%; animation-delay: -7s; animation-duration: 16s; transform: scale(.7); }
.event-hero-lights i:nth-child(3) { left: 37%; animation-delay: -4s; }
.event-hero-lights i:nth-child(4) { left: 61%; animation-delay: -10s; animation-duration: 15s; }
.event-hero-lights i:nth-child(5) { left: 73%; animation-delay: -2.5s; transform: scale(.8); }
.event-hero-lights i:nth-child(6) { left: 86%; animation-delay: -8.5s; animation-duration: 17s; }
.event-hero-lights i:nth-child(7) { left: 94%; animation-delay: -12s; transform: scale(.6); }
.event-hero-lights i:nth-child(even) { background: radial-gradient(ellipse at 48% 64%, #fff6de 0 14%, var(--gold) 36%, var(--lantern) 76%); box-shadow: 0 0 .9rem var(--lantern); }
@keyframes event-foxfire {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: .85; }
  70% { opacity: .5; }
  100% { opacity: 0; translate: 1.6rem -92vh; }
}
.event-hero-inner { position: relative; display: grid; justify-items: center; max-width: 50rem; }
.event-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.4rem;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .3em;
}
.event-hero-kicker::before,
.event-hero-kicker::after { width: 2.6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); content: ""; }
.event-hero-kicker::after { transform: scaleX(-1); }
.event-hero-kicker span + span::before { margin-right: .9rem; color: rgb(245 195 75 / .5); content: "·"; }
.event-hero-title { display: grid; justify-items: center; gap: .3rem; margin: 0; font-family: var(--mincho); font-weight: 700; line-height: 1.1; }
.event-hero-title-small { color: var(--gold); font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: .4em; text-indent: .4em; }
.event-hero-title-main {
  font-size: clamp(3.3rem, 10vw, 7.4rem);
  letter-spacing: .14em;
  text-indent: .14em;
  text-shadow: 0 0 2.4rem rgb(255 178 94 / .35), 0 .4rem 2rem rgb(11 7 18 / .9);
}
.event-hero-subtitle { margin: 1.4rem 0 0; font-family: var(--mincho); font-size: clamp(1.05rem, 2.2vw, 1.4rem); letter-spacing: .12em; }
.event-hero-date {
  margin: 1.1rem 0 0;
  padding: .35rem 1.1rem;
  border-top: 1px solid rgb(245 195 75 / .35);
  border-bottom: 1px solid rgb(245 195 75 / .35);
  color: rgb(255 246 232 / .9);
  font-size: clamp(.84rem, 1.5vw, .98rem);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.event-status { margin-top: 2rem; min-height: 5rem; }
.event-status-fallback { margin: 0; color: var(--muted); }
.event-page .event-countdown { --part-countdown-num: clamp(2.2rem, 5vw, 3.4rem); display: grid; justify-items: center; }
.event-page .event-countdown .part-countdown__units { justify-content: center; gap: .6rem; }
.event-page .event-countdown .part-countdown__unit {
  min-width: 5.6rem;
  justify-content: center;
  padding: .6rem 1rem .5rem;
  border-color: rgb(245 195 75 / .45);
  background: linear-gradient(180deg, rgb(26 14 20 / .78), rgb(11 7 18 / .78));
  box-shadow: inset 0 0 1.4rem rgb(255 178 94 / .08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.event-page .event-countdown .part-countdown__label { color: rgb(255 246 232 / .78); letter-spacing: .3em; }
.event-page .event-countdown .part-countdown__after { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.event-status-now,
.event-status-after {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  letter-spacing: .08em;
}
.event-status-after { max-width: 34rem; color: var(--paper); line-height: 1.7; }
.event-status-live {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .12rem .7rem;
  color: #fff;
  background: var(--hi);
  font-family: var(--gothic);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
}
.event-status-live::before { width: .42rem; height: .42rem; border-radius: 50%; background: #fff; content: ""; animation: site-banner-pulse 1.6s ease-in-out infinite; }

/* ---- 目次（画面の上に貼りつく） ---- */
.event-index {
  position: sticky;
  z-index: 20;
  top: calc(var(--gnav-h, 4.5rem) + var(--site-banner-offset, 0px));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgb(11 7 18 / .9);
  -webkit-backdrop-filter: blur(.8rem);
  backdrop-filter: blur(.8rem);
}
.event-index ol {
  display: flex;
  justify-content: center;
  gap: .2rem;
  width: min(calc(100% - (var(--gutter) * 2)), var(--shell-max));
  margin: 0 auto;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
  counter-reset: event-index;
}
.event-index ol::-webkit-scrollbar { display: none; }
.event-index li { flex: none; counter-increment: event-index; }
.event-index a {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .85rem .8rem;
  color: rgb(255 246 232 / .78);
  font-size: .8rem;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.event-index a::before { color: rgb(245 195 75 / .6); content: counter(event-index, decimal-leading-zero); font-size: .62rem; letter-spacing: .1em; }
.event-index a:hover { color: var(--gold); }

/* ---- 章 ---- */
.event-section { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; scroll-margin-top: calc(var(--gnav-h, 4.5rem) + 3rem); }
.event-section + .event-section { border-top: 1px solid var(--line); }
.event-section:nth-of-type(even) { background: linear-gradient(180deg, rgb(59 32 56 / .16), transparent 70%); }
.event-heading { display: grid; gap: .6rem; margin-bottom: 2.4rem; }
.event-heading h2 { margin: 0; font-family: var(--mincho); font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.3; letter-spacing: .06em; }
.event-heading h2::after { display: block; width: 2.4rem; height: 1px; margin-top: 1rem; background: linear-gradient(90deg, var(--gold), transparent); content: ""; }
.event-heading .eyebrow { margin: 0; letter-spacing: .24em; }
.event-heading > p:last-child:not(.eyebrow) { max-width: 40rem; margin: 0; color: var(--muted); }

/* 概要 */
.event-about-layout,
.event-notes-layout { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.4fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.event-about-layout .event-heading,
.event-notes-layout .event-heading { margin-bottom: 0; }
.event-lead { margin: 0; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 2.1; }
.event-message {
  position: relative;
  margin: 2.4rem 0 0;
  padding: 1.6rem 1.8rem 1.4rem 2rem;
  border: 1px solid rgb(245 195 75 / .3);
  background: linear-gradient(135deg, rgb(245 195 75 / .08), rgb(143 216 255 / .03));
}
.event-message::before { position: absolute; top: -1px; bottom: -1px; left: -1px; width: 3px; background: linear-gradient(var(--gold), var(--lantern)); content: ""; }
.event-message blockquote { margin: 0; }
.event-message blockquote p { margin: 0; font-family: var(--mincho); font-size: clamp(1.08rem, 1.9vw, 1.3rem); line-height: 1.95; letter-spacing: .04em; }
.event-message figcaption { margin-top: .8rem; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .14em; }
.event-message figcaption::before { content: "— "; }

/* 日時と配信 */
.event-time-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.event-facts { margin: 0; border-top: 1px solid rgb(245 195 75 / .35); }
.event-fact { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.event-fact dt { color: var(--gold); font-size: .86rem; font-weight: 700; letter-spacing: .08em; }
.event-fact dd { margin: 0; }
.event-fact:nth-child(3) dd { font-family: var(--mincho); font-size: 1.5rem; line-height: 1.2; color: var(--gold); }
.event-time-side {
  display: grid;
  gap: 1rem;
  padding: 1.6rem;
  border: 1px solid rgb(245 195 75 / .4);
  background: linear-gradient(145deg, rgb(59 32 56 / .6), rgb(26 14 20 / .9));
}
.event-time-local { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; color: var(--kitsunebi); font-size: .88rem; }
.event-time-local span { padding: 0 .5rem; border: 1px solid rgb(143 216 255 / .35); font-size: .7rem; letter-spacing: .1em; }
.event-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.event-actions .button[hidden] { display: none; }
.event-ics {
  justify-self: start;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: none;
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.event-ics:hover { color: var(--gold); }
.event-ics[hidden] { display: none; }

/* 見方 */
.event-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.event-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgb(59 32 56 / .45), rgb(26 14 20 / .85));
}
.event-step-no { color: var(--gold); font-family: var(--mincho); font-size: 2.2rem; line-height: 1; }
.event-step p { margin: 0; line-height: 1.95; }

/* 出演 */
.event-cast-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.event-cast-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .4rem;
  padding: 2rem 1.3rem 1.6rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(59 32 56 / .55), rgb(26 14 20 / .9));
  text-align: center;
}
.event-cast-card > * { margin: 0; }
.event-cast-photo {
  width: 8.5rem;
  aspect-ratio: 1;
  margin-bottom: .8rem;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(245 195 75 / .7), 0 0 0 .45rem rgb(11 7 18 / .6), 0 0 0 calc(.45rem + 1px) rgb(245 195 75 / .2), 0 0 2.4rem rgb(255 178 94 / .18);
}
.event-cast-card.is-guest .event-cast-photo { box-shadow: 0 0 0 1px rgb(143 216 255 / .7), 0 0 0 .45rem rgb(11 7 18 / .6), 0 0 0 calc(.45rem + 1px) rgb(143 216 255 / .2), 0 0 2.4rem rgb(143 216 255 / .16); }
.event-cast-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.event-cast-card:nth-child(2) .event-cast-photo img { object-position: 50% 38%; }
.event-cast-role { padding: 0 .7rem; border: 1px solid currentColor; color: var(--gold); font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.event-cast-card.is-guest .event-cast-role { color: var(--kitsunebi); }
.event-cast-card h3 { font-family: var(--mincho); font-size: 1.35rem; letter-spacing: .06em; }
.event-cast-time { display: grid; color: var(--paper); font-size: .86rem; font-weight: 700; }
.event-cast-time span { color: var(--muted); font-size: .68rem; font-weight: 400; letter-spacing: .12em; }
.event-cast-note { margin-top: .4rem !important; color: var(--muted); font-size: .86rem; line-height: 1.8; }
.event-cast-links { margin-top: 1.5rem; }
.event-cast-links[hidden] { display: none; }

/* セットリスト */
.event-setlist-closed {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(2.2rem, 5vw, 3.4rem) 1.5rem;
  border: 1px dashed rgb(245 195 75 / .4);
  background: radial-gradient(ellipse at 50% 0%, rgb(255 178 94 / .1), transparent 65%);
  text-align: center;
}
.event-setlist-closed p { margin: 0; font-family: var(--mincho); font-size: clamp(1.05rem, 2vw, 1.25rem); letter-spacing: .06em; }
.event-setlist-mark {
  width: .8rem;
  height: 1.02rem;
  border-radius: 58% 42% 58% 42% / 68% 68% 32% 32%;
  background: radial-gradient(ellipse at 48% 64%, #fff6de 0 14%, var(--gold) 36%, var(--lantern) 76%);
  box-shadow: 0 0 1.2rem var(--lantern);
  transform: rotate(12deg);
  animation: k3-lantern-breathe 3.6s ease-in-out infinite alternate;
}
@keyframes k3-lantern-breathe { from { opacity: .55; } to { opacity: 1; } }
.event-setlist-note { margin: 0 0 1.2rem; color: var(--muted); }
.event-setlist-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(245 195 75 / .35); }
.event-song {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: .95rem .4rem;
  border-bottom: 1px solid var(--line);
}
.event-song-no { color: var(--gold); font-family: var(--mincho); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.event-song-body { display: grid; gap: .1rem; }
.event-song-title { font-family: var(--mincho); font-size: 1.12rem; }
.event-song-with { color: var(--kitsunebi); font-size: .78rem; letter-spacing: .04em; }
.event-song-memo { color: var(--muted); font-size: .84rem; }
.event-song.is-interlude { background: linear-gradient(90deg, rgb(245 195 75 / .1), transparent 80%); }
.event-song.is-interlude .event-song-title { color: var(--gold); }

/* グッズ */
.event-goods-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.event-goods-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); background: var(--lacquer); }
.event-goods-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.event-goods-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.85); }
.event-goods-status {
  position: absolute;
  top: .8rem;
  left: .8rem;
  padding: .12rem .6rem;
  border: 1px solid rgb(143 216 255 / .6);
  color: var(--kitsunebi);
  background: rgb(11 7 18 / .78);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.event-goods-body { display: grid; align-content: start; gap: .35rem; padding: 1.1rem 1.2rem 1.3rem; }
.event-goods-body > * { margin: 0; }
.event-goods-body h3 { font-family: var(--mincho); font-size: 1.15rem; line-height: 1.5; }
.event-goods-price { color: var(--gold); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.event-goods-price span { margin-left: .2rem; color: var(--muted); font-size: .72rem; font-weight: 400; }
.event-goods-note { color: rgb(255 246 232 / .82); font-size: .88rem; }
.event-goods-period { display: grid; margin-top: .4rem !important; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.event-goods-period span { color: var(--gold); font-size: .66rem; letter-spacing: .12em; }
.event-goods-shipping { margin: 1.2rem 0 0; color: var(--muted); font-size: .88rem; text-align: center; }
.event-goods-actions { margin-top: 1.5rem; }

/* 注意事項 */
.event-notes-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.event-notes-list li { position: relative; padding: .95rem 0 .95rem 1.4rem; border-bottom: 1px solid var(--line); line-height: 1.9; }
.event-notes-list li::before { position: absolute; top: 1.75rem; left: .2rem; width: .36rem; height: .36rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 .5rem var(--gold); content: ""; }

/* ページの終わり */
.event-end-links { justify-content: center; padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
.event-page .page-end-links { width: 100%; }
.event-page .page-end-links .page-end-link { min-width: 220px; }