@charset "UTF-8";
/* ==========================================================
   虹のコンキスタドール ONE-MAN LIVE
   「DIVER de FEVER!? 〜夢見心地♡カーニバル〜」特設サイト
   ========================================================== */

:root {
  --ink: #2E2470;
  --pink: #D61F7C;
  --pink-deep: #B0145F;
  --sky: #CFE0FF;
  --lavender-bg: #F1EEFF;
  --lavender: #B8A4FF;
  --bunting-pink: #FF7DBA;
  --yellow: #FFD84A;
  --gold: #F2C230;
  --t-pink: #FFD6EA;
  --t-blue: #D3ECFF;
  --t-gold: #FFEBA8;
  --t-lav: #E4DCFF;
  --white: #FFFFFF;

  --f-body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --f-pop: "Mochiy Pop One", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --f-display: "Abril Fatface", "Didot", "Bodoni MT", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:hover { color: var(--pink); }
a:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 999px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 8px; font-weight: 800;
}
.skip:focus { top: 12px; color: var(--white); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- HERO ---------- */
.hero { position: relative; background: var(--sky); padding-bottom: 72px; }
.bunting, .cloud-edge { display: block; width: 100%; }
.cloud-edge { position: absolute; left: 0; bottom: -1px; }

.nav {
  max-width: 1120px; margin: 0 auto; padding: 12px 24px 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
}
.nav__brand { display: block; padding: 4px 0; border-radius: 8px; }
.nav__brand img { height: 48px; width: auto; }
.nav__menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  font-family: var(--f-display); font-size: 18px;
}
.nav__menu a { display: block; padding: 10px 2px; text-decoration: none; }

.sparkle { position: absolute; pointer-events: none; }
.sparkle--1 { left: 9%; top: 190px; width: 34px; }
.sparkle--2 { left: 15%; top: 300px; width: 20px; }
.sparkle--3 { right: 10%; top: 150px; width: 40px; }
.sparkle--4 { right: 16%; top: 420px; width: 22px; }
@media (max-width: 640px) { .sparkle { display: none; } }

.hero__body {
  position: relative; max-width: 1120px; margin: 0 auto; padding: 24px 24px 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
}
.hero__title { margin: 0; width: 100%; display: flex; justify-content: center; }
.hero__logo { width: 100%; max-width: 760px; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero__logo { animation: none; } }

.hero__date { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero__day { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.hero__ymd { font-family: var(--f-display); font-size: clamp(52px, 8vw, 96px); line-height: 1; letter-spacing: .01em; }
.hero__dow {
  font-family: var(--f-pop); font-size: clamp(22px, 3vw, 32px); line-height: 1.5;
  background: var(--pink); color: var(--white); border-radius: 999px; padding: 2px 16px;
}
.hero__time { font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 26px); letter-spacing: .02em; }
.hero__venue { font-family: var(--f-pop); font-size: clamp(18px, 2.2vw, 24px); margin-top: 4px; }

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin-top: 8px; }
.badge {
  font-weight: 800; font-size: 16px; background: var(--yellow); color: var(--ink);
  padding: 8px 18px; border-radius: 8px; border: 2px solid var(--ink);
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 32px; border-radius: 999px;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  font-weight: 800; font-size: 17px; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--ink); color: var(--white); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn--shop { flex: 1 1 240px; max-width: 320px; min-height: 60px; font-size: 18px; }
.btn--shop:hover { background: var(--pink); color: var(--white); }
.btn svg { flex: none; }

/* ---------- SECTIONS ---------- */
.section { padding: 72px 24px 80px; }
.section__inner { margin: 0 auto; }
.section--info .section__inner { max-width: 960px; }
.section--ticket { background: var(--lavender-bg); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.section--ticket .section__inner,
.section--member .section__inner { max-width: 1120px; }
.section--movie { border-top: 2px solid var(--ink); padding-bottom: 88px; }
.section--movie .section__inner { max-width: 1200px; }
.section--notice { background: var(--sky); border-top: 2px solid var(--ink); padding-bottom: 88px; }
.section--notice .section__inner { max-width: 880px; }

.heading { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 40px; text-align: center; }
.heading__en { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 5vw, 56px); line-height: 1.1; }
.heading__ja { font-family: var(--f-pop); font-size: 15px; color: var(--pink); }
.section--notice .heading__ja { color: var(--pink-deep); }

/* info */
.info {
  margin: 0; border: 2px solid var(--ink); border-radius: 24px; overflow: hidden;
  background: var(--white); box-shadow: 8px 8px 0 var(--lavender);
}
.info__row { display: flex; flex-wrap: wrap; border-bottom: 2px dashed var(--lavender); }
.info__row:last-child { border-bottom: 0; }
.info dt { flex: 1 1 160px; padding: 20px 28px; font-weight: 800; background: var(--lavender-bg); }
.info dd { flex: 999 1 420px; margin: 0; padding: 20px 28px; font-weight: 700; }

/* tickets */
.ticket-lead { margin: -24px 0 40px; text-align: center; font-weight: 800; font-size: 18px; }
.tickets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }
.ticket {
  position: relative; flex: 1 1 300px; max-width: 352px; min-height: 176px;
  display: flex; border: 2px solid var(--ink); border-radius: 18px;
}
.ticket--1f { background: var(--t-pink); }
.ticket--2f { background: var(--t-blue); }
.ticket--niji { background: var(--t-gold); }
.ticket__stub {
  flex: 0 0 92px; display: flex; align-items: center; justify-content: center;
  border-right: 3px dotted var(--ink);
  font-family: var(--f-display); font-size: 44px; line-height: 1;
}
.ticket--niji .ticket__stub { font-family: var(--f-pop); font-size: 34px; }
.ticket__body { flex: 1 1 auto; padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ticket__name { margin: 0; font-family: var(--f-pop); font-weight: 400; font-size: 20px; }
.ticket__price { font-family: var(--f-display); font-size: 40px; line-height: 1.1; }
.ticket__note { font-size: 13px; font-weight: 700; }
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: 80px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--lavender-bg); border: 2px solid var(--ink);
}
.ticket::before { top: -13px; clip-path: inset(50% 0 0 0); }
.ticket::after { bottom: -13px; clip-path: inset(0 0 50% 0); }

.conditions {
  list-style: none; margin: 40px auto 0; padding: 0; max-width: 760px;
  display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: center; font-weight: 700; font-size: 15px;
}
.shops { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.shops__title { margin: 0; font-family: var(--f-pop); font-weight: 400; font-size: 20px; }
.shops__list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.shops__list li { display: contents; }

/* members */
.members {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 20px 16px;
}
.members li {
  border: 2px solid var(--ink); border-radius: 14px; padding: 22px 12px; text-align: center;
  font-family: var(--f-pop); font-size: 18px; line-height: 1.5;
}
.members li:nth-child(4n+1) { background: var(--t-pink); }
.members li:nth-child(4n+2) { background: var(--t-gold); }
.members li:nth-child(4n+3) { background: var(--t-blue); }
.members li:nth-child(4n+4) { background: var(--t-lav); }
.members-note { margin: 24px 0 0; text-align: center; font-size: 14px; }

/* movie */
.movie {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--sky); border: 2px solid var(--ink); border-radius: 28px;
  box-shadow: 10px 10px 0 var(--bunting-pink);
}
.movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .movie { border-radius: 16px; box-shadow: 6px 6px 0 var(--bunting-pink); } }

/* notice */
.notice { background: var(--white); border: 2px solid var(--ink); border-radius: 24px; padding: 32px clamp(20px, 4vw, 44px); }
.notice__list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.9; }
.notice__id { margin-top: 24px; border: 2px dashed var(--pink); border-radius: 16px; padding: 20px 24px; background: #FFF2F8; }
.notice__id h3 { margin: 0 0 8px; font-family: var(--f-pop); font-weight: 400; font-size: 17px; }
.notice__id ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.9; }
.notice__last { margin: 24px 0 0; padding-left: 1.2em; font-size: 15px; line-height: 1.9; }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ink); color: var(--white); padding: 48px 24px 56px;
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.footer__logo { width: 220px; max-width: 70%; }
.footer__name { font-family: var(--f-pop); font-size: 16px; }
.sns { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sns a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 2px solid var(--white); border-radius: 999px; color: var(--white);
  font-weight: 800; font-size: 15px; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.sns a:hover { background: var(--white); color: var(--ink); }
.footer a:focus-visible { outline-color: var(--yellow); }
.footer__top { color: var(--white); font-size: 14px; font-weight: 700; padding: 10px 4px; }
.footer__top:hover { color: var(--yellow); }
.footer__copy { margin: 8px 0 0; font-size: 12px; opacity: .85; }

/* ---------- SMALL SCREENS ---------- */
@media (max-width: 480px) {
  .nav { justify-content: center; }
  .nav__brand img { height: 40px; }
  .nav__menu { justify-content: center; gap: 0 14px; font-size: 16px; }
  .hero { padding-bottom: 56px; }
  .section { padding: 56px 20px 64px; }
  .info dt { padding: 14px 20px 4px; }
  .info dd { padding: 4px 20px 16px; }
}