/* =========================================================
   pop'n music アーティスト大パーティー！
   Direction: bold black outlines × solid pop colors (sticker style)
   ========================================================= */
:root {
  --ink: #141414;
  --ink-2: #262626;
  --white: #fff;
  --paper: #f7f5ef;
  --yellow: #ffe600;
  --red: #ff4b2b;
  --cyan: #2ec4f1;
  --green: #4fd36a;
  --pink: #ff3d8b;
  --navy: #1f2858;
  --gray: #6b6b6b;

  --line: 3px solid var(--ink);
  --radius: 20px;      /* rounded corners for cards / boxes */
  --radius-s: 8px;     /* small tags and badges */
  --font-head: "Montserrat", "LINE Seed JP", sans-serif;
  --font-body: "LINE Seed JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-display: "Dela Gothic One", "LINE Seed JP", sans-serif;   /* event name + date (single weight) */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  background: var(--yellow);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, dl, dd { margin: 0; }

.container { width: min(1080px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }

/* ===== Header: round menu button + white slide-in panel ===== */
.header { position: fixed; top: 16px; right: 16px; z-index: 100; }

.menu-btn {
  position: relative; z-index: 3;
  width: 52px; height: 52px; padding: 0;
  background: var(--white); border: 2px solid var(--ink); border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}
.menu-btn:hover { background: var(--yellow); }
.menu-btn__line {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin-left: -10px;
  margin-top: -1px;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.menu-btn__line:nth-child(1) { transform: translateY(-6px); }
.menu-btn__line:nth-child(3) { transform: translateY(6px); }
.menu-btn[aria-expanded="true"] .menu-btn__line:nth-child(1) { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__line:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__line:nth-child(3) { transform: rotate(-45deg); }

.gnav-backdrop {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(20, 20, 20, .3);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
}
.gnav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }

.gnav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column;
  width: min(320px, 100vw);
  padding: 96px 36px 28px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); border-left: 2px solid var(--ink);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s .3s;
}
.gnav.is-open { transform: none; visibility: visible; transition: transform .3s ease; }
/* simple list: English labels only, no dividers */
.gnav ul { display: flex; flex-direction: column; gap: 4px; }
.gnav a {
  display: inline-block; padding: 10px 0;
  color: var(--ink); text-decoration: none;
}
.gnav__en {
  font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.2;
  transition: background-size .2s;
  background: linear-gradient(transparent 60%, var(--yellow) 60%) no-repeat left / 0 100%;
}
.gnav a:hover .gnav__en,
.gnav a:focus-visible .gnav__en { background-size: 100% 100%; }

@media (max-width: 899px) {
  .header { top: 12px; right: 12px; }
  .menu-btn { width: 48px; height: 48px; }
  .gnav { padding: 84px 28px 24px; }
  .gnav__en { font-size: 24px; }
}

/* background: diagonal stripes, fixed behind all content (positioned siblings later in the DOM paint over it).
   One square tile holds two stripe pairs, so shifting it by one tile width loops seamlessly. */
.bg-pattern {
  --stripe: 120px;
  position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    var(--yellow) 25%, #fff9d6 25% 50%, var(--yellow) 50% 75%, #fff9d6 75%);
  background-size: var(--stripe) var(--stripe);
  animation: stripes 3s linear infinite;
}
@keyframes stripes { to { background-position: var(--stripe) 0; } }
@media (max-width: 767px) { .bg-pattern { --stripe: 80px; } }
@media (prefers-reduced-motion: reduce) { .bg-pattern { animation: none; } }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hero {
  /* logo alone in the centre: as large as width and height allow (1.676 = logo aspect) */
  --logo-w: min(1000px, 90vw, calc((100svh - 200px) * 1.676));
}
.hero__inner {
  position: relative; z-index: 2; flex: 1;
  display: grid; place-items: center;
  padding: 40px 16px;
}
.hero__logo { margin: 0; }
.hero__logo img {
  display: block; width: var(--logo-w);
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.12));
  animation: rise .7s cubic-bezier(.2, .9, .3, 1.2) both;
}
/* scroll cue: label + a line with a dot sliding down it */
.scroll-cue {
  position: absolute; left: 50%; bottom: 24px; z-index: 3;
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  animation: rise .7s .4s cubic-bezier(.2, .9, .3, 1.2) both;
}
.scroll-cue__text { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .2em; line-height: 1; padding-left: .2em; }
.scroll-cue__line {
  position: relative; width: 2px; height: 56px;
  background: rgba(20, 20, 20, .25); overflow: hidden;
}
.scroll-cue__line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background: var(--ink);
  animation: scrollCue 1.6s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes scrollCue { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
@media (max-width: 899px) { .scroll-cue { bottom: 16px; } .scroll-cue__line { height: 44px; } }

@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* stickers (used in other sections) */
.stk { position: absolute; pointer-events: none; z-index: 3; }
@keyframes wobble { 50% { translate: 0 -8px; } }


@media (max-width: 899px) {
  .hero { --logo-w: min(480px, 82vw); }
}

/* ===== KV visual (between hero and Event) ===== */
.kv-visual { position: relative; padding: 24px 16px 0; text-align: center; }
.kv-visual__fig { width: min(720px, 100%); margin: 0 auto; }
.kv-visual__fig img { display: block; width: 100%; height: auto; }
/* credit under the KV, right-aligned to the image */
.kv-visual__copy {
  margin-top: 6px; text-align: right;
  font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink);
}

/* ===== Banner (end of page) ===== */
.bnr { position: relative; padding: 8px 16px 40px; }
.bnr__link {
  display: block; width: min(600px, 100%); margin: 0 auto;
  overflow: hidden;
}
.bnr__link img { display: block; width: 100%; height: auto; }

/* ===== Sections ===== */
.section { position: relative; padding: 56px 0 64px; overflow: hidden; }
/* sections are transparent over the yellow body, so the light streaks show through everywhere */
.section--yellow { background: transparent; }
.section--yellow .sec-title__en::after { background: var(--white); }
@media (max-width: 767px) { .section { padding: 40px 0 48px; } }

/* section title: editorial style */
.sec-title {
  display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 4px 16px;
  margin-bottom: 56px; line-height: 1;
  isolation: isolate;
}
.sec-title__en {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(48px, 8vw, 96px); letter-spacing: .01em;
  position: relative;
}
.sec-title__en::after { /* accent bar */
  content: ""; position: absolute; left: -4px; right: -8px; bottom: 6px; height: 30%;
  background: var(--yellow); z-index: -1; transform: skewX(-18deg);
}
/* logo-style title image (replaces the text title) */
/* sized by height so the lettering matches across titles of different widths */
.sec-title--img img { display: block; width: auto; height: clamp(64px, 8vw, 104px); }


.note-center { text-align: center; margin-top: 24px; font-size: 14px; }

/* ===== Event ===== */
/* centered live-flyer card: Mimi & Nyami peek over the top edge */
#event .sec-title { margin-bottom: 160px; }

.event-flyer {
  position: relative;
  max-width: 920px; margin-inline: auto;
  padding: 0 56px 0;
  text-align: center;
  background: var(--white); border: var(--line); border-radius: var(--radius);
}
.event-flyer__illust {
  width: 300px; margin: -112px auto 0;
}

.event-flyer__title { padding: 18px 0 40px; }
.event-flyer__name {
  font-family: var(--font-display); font-size: clamp(44px, 6vw, 68px); font-weight: 400;
  line-height: 1.05; letter-spacing: 0;
}
.event-flyer__name span {
  display: block; margin-top: 10px;
  font-size: .55em; letter-spacing: .02em;
}

/* date full width, place / time side by side */
.event-spec {
  display: grid; grid-template-columns: 1fr 1fr; margin: 0;
  border-top: 2px dashed var(--ink);
}
.event-spec__item { padding: 32px 16px 36px; }
.event-spec__item--date { grid-column: 1 / -1; border-bottom: 2px dashed var(--ink); }
.event-spec__item + .event-spec__item:not(.event-spec__item--date):last-child { border-left: 2px dashed var(--ink); }
.event-spec dt {
  display: inline-flex; align-items: center; gap: 7px; padding: 1px 14px;
  font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.6;
  border: 2px solid var(--ink); border-radius: 999px;
}
.event-spec dd { margin: 14px 0 0; }

.event-date {
  display: flex; align-items: baseline; justify-content: center; gap: 0 6px;
  font-family: var(--font-display); font-size: clamp(64px, 9vw, 104px); font-weight: 400;
  line-height: 1; letter-spacing: .01em;
}
.event-date__year { font-size: .42em; }
.event-date__dow {
  align-self: center; margin-left: 10px; padding: 4px 10px;
  font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: .06em; line-height: 1.2;
  color: var(--white); background: var(--red); border: var(--line); border-radius: var(--radius-s);
  transform: rotate(-6deg);
}

.event-spec__venue { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; line-height: 1.4; }
.event-spec__times {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 400; line-height: 1.3;
}
.event-spec__times span { display: inline-flex; align-items: center; gap: 8px; }
.event-spec__times b { font-family: var(--font-body); font-size: 13px; font-weight: 700; }
.event-spec__note { margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--gray); }

/* streaming: centered group, set off by a solid rule */

@media (max-width: 899px) {
  .event-flyer { padding: 0 32px; }
}
@media (max-width: 599px) {
  #event .sec-title { margin-bottom: 120px; }
  .event-flyer { padding: 0 18px; }
  .event-flyer__illust { width: 230px; margin-top: -86px; }
  .event-flyer__title { padding: 14px 0 30px; }
  .event-flyer__name { font-size: clamp(30px, 9.5vw, 46px); }
  .event-spec { grid-template-columns: minmax(0, 1fr); }
  .event-spec__item { padding: 24px 4px 26px; }
  .event-spec__item + .event-spec__item:not(.event-spec__item--date):last-child { border-left: 0; border-top: 2px dashed var(--ink); }
  .event-date { font-size: clamp(40px, 12.5vw, 64px); }   /* Dela is wide: scale with the screen */
  .event-date__dow { font-size: 13px; margin-left: 6px; }
  .event-spec__venue { font-size: clamp(18px, 5.6vw, 22px); }
  .event-spec__times { font-size: clamp(20px, 6.4vw, 26px); gap: 4px 14px; }
  .event-spec__note { font-size: 11px; }
}

/* ===== Line Up ===== */
.lineup {
  position: relative;
  background: var(--white);
  border: var(--line); border-radius: var(--radius);
  padding: 64px 48px 28px;   /* bottom = gap above "and more…" so it sits centered */
  text-align: center;
}
.lineup-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0;
  font-size: clamp(18px, 2.5vw, 26px); font-weight: 900; line-height: 1.7;
}
.lineup-group + .lineup-group { margin-top: 28px; padding-top: 28px; border-top: 1px solid #ddd8c9; }
.lineup-row li { padding: 0 .55em; }
.lineup-row li:not(:last-child)::after { content: "/"; margin-left: 1.1em; color: var(--red); font-weight: 700; }
.lineup__more { margin-top: 28px; padding-top: 28px; border-top: 1px solid #ddd8c9; font-family: var(--font-head); font-size: clamp(16px, 2vw, 20px); font-weight: 700; color: var(--gray); }

.lineup__icon { position: absolute; z-index: 2; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.4)); }
.lineup__icon--des { width: 100px; left: -52px; top: -52px; transform: rotate(-8deg); }
.lineup__icon--pon { width: 120px; right: -20px; top: 38%; transform: rotate(8deg); }
.lineup__icon--wac { width: 130px; right: 40px; bottom: -60px; transform: rotate(6deg); }
@media (max-width: 767px) {
  .lineup { padding: 56px 16px 28px; }
  .lineup__icon--des { width: 78px; left: -8px; top: -38px; }
  .lineup__icon--pon { width: 64px; right: -8px; top: auto; bottom: -30px; }
  .lineup__icon--wac { width: 68px; right: auto; left: -8px; bottom: -34px; }
  #lineup .note-center { margin-top: 60px; }   /* clear the corner icons */
  /* SP: one name per line (縦書き) */
  .lineup-row { flex-direction: column; }
  .lineup-row li:not(:last-child)::after { content: none; }
}

/* ===== Ticket ===== */
.stk--apple1 { width: 150px; right: 3%; top: 70px; transform: rotate(12deg); z-index: 0; }
.stk--apple2 { width: 120px; left: 2%; bottom: 60px; transform: rotate(-10deg); z-index: 0; }
@media (max-width: 767px) {
  .stk--apple1 { width: 58px; top: 14px; right: 10px; }   /* above the title row, clear of the text */
  .stk--apple2 { display: none; }
}


.tickets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 767px) {
  .tickets { grid-template-columns: 1fr; gap: 24px; }
  .ticket__head { padding: 12px 16px; }
  .ticket__name { font-size: 34px; }
  .ticket__name::after { font-size: 12px; margin-left: 6px; }
  .ticket__body { padding: 14px 16px 20px; gap: 20px; }
  .ticket__bonus { margin-top: -12px; }
  .ticket__price { font-size: 38px; }
}

.ticket {
  --tc: var(--red);
  display: flex; flex-direction: column;
  background: var(--white);
  border: var(--line); border-radius: var(--radius);
  overflow: hidden;   /* clip the coloured head to the rounded corners */
}
.ticket--svip { --tc: var(--red); }
.ticket--s    { --tc: var(--cyan); }
.ticket--a    { --tc: var(--green); }
.ticket--b    { --tc: var(--pink); }

.ticket__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: var(--tc);
  border-bottom: var(--line);
}
.ticket__name {
  font-family: var(--font-head); font-weight: 800; font-size: 42px; line-height: 1; color: var(--white);
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
  letter-spacing: .02em;
}
.ticket__name::after {
  content: "TICKET"; margin-left: 10px;
  font-size: 14px; letter-spacing: .1em; -webkit-text-stroke: 4px var(--ink);
}
.ticket__seat {
  font-size: 14px; font-weight: 900; color: var(--white); background: var(--ink);
  padding: 4px 12px; line-height: 1.4; white-space: nowrap; border-radius: var(--radius-s);
}
/* equal visible spacing (~26px) above the price, between items and below the button.
   Top padding is smaller to offset the empty space above the price digits. */
.ticket__body { padding: 19px 22px 26px; display: flex; flex-direction: column; gap: 26px; flex: 1; text-align: center; }
.ticket__price { font-family: var(--font-head); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: .01em; }
.ticket__price span { font-family: var(--font-body); font-weight: 700; font-size: 15px; margin-left: 6px; }
/* badge on its own line, bonus items stacked and centred below it */
.ticket__bonus { margin-top: -12px; font-size: 15px; line-height: 1.6; display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* two separate bonus items, each in its own soft chip */
.ticket__bonus-list { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ticket__bonus-list li {
  padding: 6px 14px; line-height: 1.5;
  background: var(--paper); border: 2px solid #e6dfc8; border-radius: var(--radius-s);
}
.nowrap { white-space: nowrap; }
.ticket__bonus b { font-size: 13px; color: var(--ink); background: var(--yellow); padding: 0 10px; border: 2px solid var(--ink); border-radius: var(--radius-s); }
.ticket .btn { margin-top: auto; }

.btn {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--font-head); font-weight: 800; font-size: 17px; letter-spacing: .06em;
  color: var(--white); background: var(--ink);
  border: var(--line); border-radius: 999px;
  padding: 12px 20px;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--yellow); color: var(--ink); }
.btn--disabled { background: #d8d8d8; color: #fff; border-color: #d8d8d8; cursor: default; pointer-events: none; }

/* ===== Goods ===== */
.soon { text-align: center; padding: 20px 0; }
.soon__icon { width: 110px; margin: 0 auto 12px; animation: wobble 3s ease-in-out infinite; }
.soon__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(36px, 6vw, 60px); color: var(--ink); line-height: 1.2; }

/* ===== Access ===== */
.access { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.access__venue { font-family: var(--font-head); font-weight: 800; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.3; }
.access__addr { margin-top: 8px; }
.access__label {
  display: inline-block; margin: 24px 0 10px;
  font-size: 14px; color: var(--white); background: var(--ink); padding: 2px 12px; border-radius: var(--radius-s);
}
.access__route li { position: relative; padding-left: 1.3em; }
.access__route li::before { content: ""; position: absolute; left: 0; top: .7em; width: 9px; height: 9px; background: var(--red); transform: rotate(45deg); }
.access__caution { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-top: 10px; }
.access__map { border: var(--line); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: #eee; }
.access__map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 899px) {
  .access { grid-template-columns: 1fr; gap: 28px; }
}

.notice {
  margin-top: 80px;
  background: var(--paper);
  border: var(--line); border-radius: var(--radius);
  padding: 44px 48px;
}
.notice__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(18px, 2.6vw, 24px); }
.notice__must { color: var(--red); margin: 4px 0 20px; }
.notice__list { font-size: 14px; font-weight: 500; line-height: 1.85; }
.notice__list li { position: relative; padding: 12px 0 12px 1.4em; border-top: 1px solid #ddd8c9; }
/* bullet centred on the first text line: li padding-top + half a line - half the dot */
.notice__list li::before {
  content: ""; position: absolute; left: .35em; top: calc(12px + .925em - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
}
.notice__list a { color: var(--red); }
.notice__head { display: block; font-weight: 900; }
@media (max-width: 767px) { .notice { padding: 32px 18px; margin-top: 56px; } }

/* ===== Footer ===== */
/* same flat yellow as the page (transparent, streaks show through) — copyright only */
.footer {
  position: relative;
  padding: 24px 16px 32px; text-align: center;
}
.footer__copy { margin: 0; font-size: 12px; font-weight: 500; color: var(--ink); }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .3, 1); }
.reveal.is-in { opacity: 1; transform: none; }

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