/* 英数字だけJalnanGothicに。unicode-rangeが無いと、このフォントに含まれる仮名まで奪われる */
@font-face {
  font-family: 'JalnanGothic';
  src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/gccompany/JalnanGothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027;
}

:root {
  --pink: #ff0066;
  --black: #000;
  --white: #fff;
  --gray: #666;
  --line: #152ea6;
  --inner: 900px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
p, ol, ul, h2 { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* header */
.menu-btn {
  position: fixed; top: 16px; left: 50%; z-index: 20;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.menu-btn span {
  position: absolute; top: 50%; left: 10px; right: 10px;
  height: 2px; margin-top: -1px; background: var(--white);
  transition: transform .3s, opacity .2s;
}
.menu-btn span:nth-child(1) { transform: translateY(-11px); }
.menu-btn span:nth-child(3) { transform: translateY(11px); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
.nav {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  background: rgba(0, 0, 0, .92);
  font-size: 30px; letter-spacing: .1em;
  opacity: 0; visibility: hidden; transition: .3s;
}
.nav.is-open { opacity: 1; visibility: visible; }
.nav a:hover { color: var(--pink); }

/* hero */
.hero { position: sticky; top: 0; background: var(--black); }
.hero img { width: 100%; max-height: 100vh; object-fit: cover; }
.hero-title { display: none; }
.content { position: relative; }
.hero-arrow {
  position: absolute; bottom: 30px; left: 50%;
  width: 32px; height: 32px; margin-left: -16px;
}
.hero-arrow::before, .hero-arrow::after {
  content: ""; position: absolute; left: 6px;
  width: 19px; height: 19px;
  border-top: 2px solid var(--pink); border-left: 2px solid var(--pink);
  transform: rotate(45deg);
  animation: arrow-bounce 1.6s ease-in-out infinite;
}
.hero-arrow-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 4px; padding-left: .3em;
  font-family: "JalnanGothic", "hiragino-kaku-gothic-pron", sans-serif;
  color: var(--pink); font-size: 11px; line-height: 1; letter-spacing: .3em;
}
.hero-arrow::before { top: 6px; }
.hero-arrow::after { top: 15px; }
@keyframes arrow-bounce {
  0%, 100% { translate: 0 0; opacity: 1; }
  50%      { translate: 0 -8px; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-arrow::before, .hero-arrow::after { animation: none; }
}


/* section */
.sec > *, .footer > * { position: relative; z-index: 6; }
.sec {
  width: calc(100% - 32px); max-width: var(--inner);
  margin: 20px auto 0;
  padding: 64px 24px;
  border: 1px solid var(--line);
  text-align: center;
}
.sec-pink { background: var(--pink); }
.sec-black { background: var(--black); }
.sec-title, .nav { font-family: "JalnanGothic", "hiragino-kaku-gothic-pron", sans-serif; }
.sec-title { font-size: 18px; line-height: 1; font-weight: normal; letter-spacing: .05em; margin-bottom: 58px; }

/* release */
.sp { display: none; }
.pc { display: inline; }
.release-copy { font-size: clamp(20px, 3.6vw, 40px); line-height: 1.25; letter-spacing: -.06em; -webkit-text-stroke: .6px currentColor; margin-bottom: 40px; padding-left: .3em; }
.item { margin: 0 auto 40px; }
.badge {
  display: inline-block; background: var(--black);
  font-size: 14px; line-height: 1.6;
  letter-spacing: .4em; padding: 0 1.2em 0 1.6em; margin-bottom: 14px;
}
.item img { width: 100%; max-width: 330px; margin: 0 auto 16px; }
.item-name { font-size: 26px; line-height: 1.3; }
.item-info { font-size: 14px; font-weight: 300; }
.item-info small { font-size: .75em; }
.item-credit { margin: -12px 0 14px; font-size: 12px; font-weight: 300; letter-spacing: .05em; }
.release-date {
  font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: 700; font-stretch: condensed;
  font-size: clamp(40px, 9.5vw, 50px); line-height: 1; letter-spacing: -.01em;
}

/* track list */
.tracks { max-width: 760px; margin: 0 auto; text-align: left; }
.tracks { columns: 2; column-gap: 40px; max-width: none; padding-left: 40px; }
.tracks li { display: flex; gap: 12px; margin-bottom: 20px; break-inside: avoid; }
.tracks li:nth-child(4) { margin-bottom: 0; }
.tracks li:nth-child(5) { break-before: column; -webkit-column-break-before: always; }
.tracks li:last-child { margin-bottom: 0; }
.tracks .no { color: var(--pink); font-size: 17px; line-height: 1.3; padding-top: 2px; }
.tracks .t { font-size: 22px; line-height: 1.2; }
.tracks .c { font-size: 13px; font-weight: 300; line-height: 1.4; margin-top: 2px; }
.tracks .c b { font-weight: 600; white-space: nowrap; }
.tracks .c .r { white-space: nowrap; }
.tracks .c small { font-size: .75em; }
.disc-title {
  display: flex; align-items: center; gap: 20px;
  max-width: 760px; margin: 0 auto 32px;
  font-family: "JalnanGothic", "hiragino-kaku-gothic-pron", sans-serif; font-weight: normal;
  color: var(--pink); font-size: 18px; line-height: 1; letter-spacing: .08em;
}
.disc-title::before, .disc-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.disc2 { max-width: 760px; margin: 56px auto 0; }
.disc2 .disc-title { margin-bottom: 20px; }
.disc-only {
  display: inline-block; border: 1px solid var(--pink);
  font-size: 12px; line-height: 1.6; letter-spacing: .3em;
  padding: 3px 1em 3px 1.3em; margin-bottom: 14px;
}
#tracklist { padding-top: 45px; }
#tracklist .sec-title { margin-bottom: 46px; }
.disc2-body { font-size: 18px; line-height: 1.5; }

.note, .notes { font-family: "hiragino-kaku-gothic-pron", sans-serif; font-size: 11px; font-weight: 300; line-height: 1.6; letter-spacing: 0; }
.note { margin-top: 8px; }
.notes { text-align: left; }
.notes li { padding-left: 1em; text-indent: -1em; }
.link { text-decoration: underline; word-break: break-all; }

/* present */
.present {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px;
  max-width: 760px; margin: 0 auto;
}
.present li { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; background: var(--white); color: var(--black); padding: 20px 20px 30px; }
.present .shop { align-self: center; }
.present .shop.shop-s { font-size: 15px; line-height: 1.6; }
.present .shop .nw { white-space: nowrap; }
.present .shop { color: var(--pink); font-size: 18px; margin-bottom: 20px; }
.present .ph {
  aspect-ratio: 1; display: grid; place-items: center;
  width: 100%; background: #d9d9d9; color: #888; font-size: 16px; margin: 0 auto 16px;
}
.present .gift { align-self: end; font-size: 19px; }
.present .gift-s { font-size: 15px; line-height: 1.5; }
.present .gift-s .nw { white-space: nowrap; }
.present .order { justify-self: center; margin-top: 16px; padding: 10px 2.4em; background: var(--pink); color: var(--white); font-size: 14px; line-height: 1.4; letter-spacing: .1em; transition: opacity .2s; }
.present .order:hover { opacity: .75; }
.present-lead { max-width: 760px; margin: 0 auto 40px; font-size: 16px; line-height: 1.7; }
.present li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 24px); }
#present .notes { max-width: 760px; margin: 40px auto 0; }

/* event */
.event-head { max-width: 760px; margin: 0 auto 56px; }
.event-lead {
  display: inline-block; border: 1px solid var(--pink);
  font-size: 14px; line-height: 1.6; letter-spacing: .3em;
  padding: 4px 1.2em 4px 1.5em; margin-bottom: 36px;
}
.event-sub { color: var(--pink); font-size: 15px; line-height: 1.5; letter-spacing: .05em; margin-bottom: 20px; }
.event-catch-main { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.25; letter-spacing: .04em; }
.event-catch-main span { display: block; }
.event-catch-main .pink { color: var(--pink); }
.event-catch-main span:last-child { margin-top: -.06em; }
.event-catch-main .small { margin-bottom: 4px; font-size: .55em; letter-spacing: .1em; }
.event-intro { font-size: 15px; font-weight: 300; line-height: 1.9; }
.event-intro::before { content: ""; display: block; width: 40px; height: 2px; margin: 28px auto; background: var(--pink); }
.event-box { max-width: 760px; margin: 0 auto; text-align: left; }
.event-box dt { background: var(--pink); font-size: 15px; padding: 4px 12px; text-align: center; }
.event-box dd { margin: 0 0 32px; padding: 16px 4px 0; font-size: 14px; font-weight: 300; line-height: 1.8; }
.event-box dd:last-child { margin-bottom: 0; }
.event-box dd > * + * { margin-top: 12px; }
.event-box .em { font-size: 18px; font-weight: 600; }
.event-info { border-collapse: collapse; }
.event-info th { font-weight: 600; text-align: left; padding: 2px 1.5em 2px 0; white-space: nowrap; vertical-align: top; }
.event-info td { padding: 2px 0; }

/* live */
.live-img { margin: 0 auto 48px; width: 100%; max-width: 760px; }
.live-text { margin-bottom: 48px; font-size: 18px; line-height: 1.4; }
.live-text:last-child { margin-bottom: 0; }
.live-text .lead { font-size: 25px; }
.live-text p:not(.lead) { font-weight: 300; }
.live-text p + p:not(.lead) { margin-top: 12px; }
.live-schedule .label { font-size: 14px; letter-spacing: .2em; margin-bottom: 20px; }
.live-schedule .show + .show { margin-top: 28px; }
.live-schedule p.place { font-size: 22px; font-weight: 600; line-height: 1.4; }
.live-schedule .time { margin-top: 6px; font-size: 14px; opacity: .75; }
.movie { max-width: 760px; margin: 0 auto; aspect-ratio: 16 / 9; }
.movie iframe { display: block; width: 100%; height: 100%; border: 0; }

/* footer */
.footer {
  width: calc(100% - 32px); max-width: var(--inner);
  margin: 20px auto 0; padding: 32px 24px 28px;
  border: 1px solid var(--line); border-bottom: 0;
  background: var(--gray); text-align: center;
}
.site-link { font-family: "Times New Roman", serif; font-weight: normal; font-size: 18px; }
.sns { display: flex; justify-content: center; gap: 16px; margin: 10px 0 8px; }
.sns img { width: 26px; }
.copy { font-size: 10px; font-weight: 300; letter-spacing: .08em; }

/* SP */
@media (max-width: 767px) {
  .hero img { height: 100vh; height: 100svh; max-height: none; object-fit: cover; object-position: 50% 50%; }
  .hero-title { display: block; position: fixed; z-index: 9; width: auto; height: 35svh; pointer-events: none; }
  .hero-title-wild { top: 3.4svh; right: 0; }
  .hero-title-card { bottom: 3.4svh; left: calc(1vw + 2px); }
  .sec, .footer { margin-top: 8px; }
  .sec { padding: 48px 16px; }
  .sec-title { margin-bottom: 42px; }
  #tracklist { padding-top: 35px; }
  #tracklist .sec-title { margin-bottom: 36px; }
  .present { grid-template-columns: 1fr; max-width: 280px; gap: 32px; }
  .present li:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
  .present-lead { font-size: 14px; text-align: left; margin-bottom: 32px; }
  .present .shop { font-size: 16px; }
  .present .shop.shop-s { font-size: 14px; }
  .disc-title { font-size: 16px; gap: 14px; margin-bottom: 24px; }
  .disc2 { margin-top: 40px; }
  .disc2-body { font-size: 16px; }
  .pc { display: none; }
  .event-head { margin-bottom: 40px; }
  .event-lead { margin-bottom: 28px; }
  .event-sub { font-size: 13px; margin-bottom: 16px; }
  .event-catch-main { font-size: min(25px, 6.3vw); letter-spacing: -.02em; }
  .event-catch-main .pink { white-space: nowrap; }
  .event-catch-main .small { font-size: .6em; }
  .event-intro { font-size: 13px; text-align: left; }
  .event-intro::before { margin: 24px auto; }
  .event-box dd { font-size: 13px; }
  .note, .notes { font-size: 10px; }
  .sp { display: inline; }
  .release-copy { font-size: 31px; }
  .item-name { font-size: 18px; }
  .tracks { columns: auto; padding-left: 0; text-align: center; }
  .tracks li { flex-direction: column; align-items: center; gap: 0; margin-bottom: 0; }
  .tracks li + li { margin-top: 24px; }
  .tracks .dot { display: none; }
  .tracks .no { font-size: 15px; line-height: 1; letter-spacing: .1em; padding-top: 0; margin-bottom: 6px; }
  .tracks .t { font-size: 20px; }
  .tracks .c { font-size: 11px; line-height: 1.5; margin-top: 4px; }
  .live-text { font-size: 15px; }
  .live-text .lead { font-size: 20px; }
  .live-text .link { font-size: 13px; }
  .live-schedule .label { font-size: 12px; margin-bottom: 16px; }
  .live-schedule .show + .show { margin-top: 24px; }
  .live-schedule .place { font-size: 18px; }
  .live-schedule .time { font-size: 13px; }
}