/* Que. 公式サイト スタイル v3
   基本の色・書体・余白は :root のトークンを参照する。
   レイアウトは flex のみ。例外はヘッダーの sticky と
   hero / live / disk の背景写真だけ。 */

/* ============================================================
   1. トークン
   ============================================================ */
:root {
  /* 色 */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-ink: #222222;
  --color-ink-soft: #666666;
  --color-ink-faint: #999999;
  --color-red: #C8161D;
  --color-panel: rgba(0, 0, 0, 0.76);
  --color-button: rgba(255, 255, 255, 0.2);
  --color-button-hover: rgba(255, 255, 255, 0.35);
  --color-text-dim: rgba(255, 255, 255, 0.82);
  --color-rule-dark: rgba(255, 255, 255, 0.3);
  --color-rule-light: #E5E5E5;

  /* 書体 */
  --font-sans: "Helvetica Neue", Helvetica, "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Arial, sans-serif;

  /* ウェイト（700 は使わない） */
  --weight-light: 300;
  --weight-regular: 400;

  /* 文字サイズ */
  --text-11: 11px;
  --text-14: 14px;
  --text-18: 18px;
  --text-20: 20px;
  --text-28: 28px;
  --text-50: 50px;
  --text-70: 70px;
  --text-120: 120px;

  /* 文字サイズ（768px 以下） */
  --text-36: 36px;
  --text-44: 44px;
  --text-64: 64px;

  /* 行送り */
  --leading-heading: 1.1;
  --leading-body: 1.9;
  --leading-meta: 1.5;

  /* 字間 */
  --tracking-meta: 0.4px;

  /* 余白（8px 刻み。ボタンの 10 / 20 と gap の 12 だけ例外） */
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* レイアウト */
  --layout-container: 1200px;
  --layout-gutter: 32px;
  --layout-gutter-narrow: 20px;
  --layout-header: 70px;
  --layout-hero: 640px;
  --layout-hero-narrow: 480px;
  --layout-line: 1px;

  /* 部品の固定幅 */
  --width-news-date: 120px;
  --width-live-date: 160px;
  --width-live-label: 110px;
  --width-bio-photo: 560px;
}

/* ============================================================
   2. 土台
   ============================================================ */
* {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
p {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-18);
  font-weight: var(--weight-light);
  line-height: var(--leading-meta);
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: var(--weight-light);
}

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

html { scroll-behavior: smooth; }

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px 20px;
  background: var(--color-white);
  color: var(--color-ink);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: 100%;
  max-width: var(--layout-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
}

/* ============================================================
   3. ヘッダー
   ============================================================ */
.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: var(--layout-line) solid var(--color-rule-light);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-height: var(--layout-header);
}

.site-header__side {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  min-width: 0;
}

.site-header__side--end {
  justify-content: flex-end;
}

.site-header__brand,
.site-header__x {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.site-nav {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-24);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-ink);
  font-size: var(--text-18);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-meta);
  line-height: var(--leading-meta);
  transition: color 160ms ease;
}

.site-nav__link:hover {
  color: var(--color-red);
}

/* ============================================================
   4. ボタン
   ============================================================ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  min-height: 48px;
  padding: var(--space-10) var(--space-20);
  background-color: var(--color-button);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  font-size: var(--text-14);
  font-weight: var(--weight-regular);
  line-height: var(--leading-meta);
  letter-spacing: 0.06em;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button:hover {
  background-color: var(--color-button-hover);
}

.button--primary { background: var(--color-white); color: var(--color-ink); border-color: var(--color-white); }
.button--primary:hover { background: #e8e8e8; border-color: #e8e8e8; }
.button--outline { background: transparent; border-color: rgba(255, 255, 255, 0.65); }
.button--outline:hover { background: rgba(255, 255, 255, 0.15); }

/* ============================================================
   5. セクション共通
   ============================================================ */
.section {
  padding-top: var(--space-96);
  padding-bottom: var(--space-96);
  scroll-margin-top: var(--layout-header);
}

.section--dark {
  background-color: var(--color-black);
}

.section--light {
  background-color: var(--color-white);
}

.section--photo {
  background-repeat: no-repeat;
  background-size: cover;
}

.section--live {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/live-20260527.jpg);
  background-position: center center;
}

.section--disk {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../assets/img/banner-blue.jpg);
  background-position: center bottom;
}

.section__title {
  margin-bottom: var(--space-48);
  color: var(--color-white);
  font-size: var(--text-50);
  line-height: var(--leading-heading);
  letter-spacing: -0.025em;
}

.section__title--ink {
  color: var(--color-ink);
}

/* ============================================================
   6. ヒーロー
   ============================================================ */
.hero {
  background-image: url(../assets/img/banner-blue.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  scroll-margin-top: var(--layout-header);
}

.hero__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--layout-hero);
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
  background: linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.62));
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  color: var(--color-white);
  font-size: clamp(88px, 11vw, 144px);
  letter-spacing: -0.055em;
  line-height: var(--leading-heading);
}

.hero__tagline {
  margin-top: var(--space-16);
  color: var(--color-text-dim);
  font-size: var(--text-18);
  letter-spacing: 0.16em;
}

.hero__release { margin-top: var(--space-16); color: var(--color-text-dim); font-size: var(--text-14); }
.hero__scroll { display: inline-flex; align-items: center; gap: var(--space-16); min-height: 44px; margin-top: var(--space-32); color: var(--color-text-dim); font-size: var(--text-11); letter-spacing: 0.14em; }
.hero__scroll:hover { color: var(--color-white); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-48);
}

/* ============================================================
   7. NEWS
   ============================================================ */
.news {
  border-top: var(--layout-line) solid var(--color-rule-dark);
}

.news__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-32);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: var(--layout-line) solid var(--color-rule-dark);
}

.news__date {
  flex: none;
  width: var(--width-news-date);
  color: var(--color-text-dim);
  font-size: var(--text-14);
  letter-spacing: var(--tracking-meta);
}

.news__text {
  color: var(--color-white);
  font-size: var(--text-18);
}

.news__text { flex: 1; min-width: 0; line-height: 1.8; }
.news__link { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-24); }
.news__link span { flex: none; color: var(--color-text-dim); }
.news__link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ============================================================
   8. LIVE
   ============================================================ */
.live-panel {
  display: flex;
  gap: var(--space-48);
  margin-bottom: var(--space-32);
  padding: var(--space-48);
  background-color: var(--color-panel);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.live-panel__date {
  flex: none;
  width: 128px;
}

.live-panel__label { margin-bottom: var(--space-16); color: var(--color-text-dim); font-size: var(--text-11); letter-spacing: 0.14em; }

.live-panel__day {
  color: var(--color-white);
  font-size: var(--text-50);
  line-height: var(--leading-heading);
}

.live-panel__year {
  margin-top: var(--space-8);
  color: var(--color-text-dim);
  font-size: var(--text-14);
  letter-spacing: var(--tracking-meta);
}

.live-panel__body {
  flex: 1 1 0%;
  min-width: 0;
}

.live-panel__venue {
  color: var(--color-white);
  font-size: var(--text-28);
  line-height: var(--leading-heading);
}

.live-panel__event {
  margin-top: var(--space-8);
  color: var(--color-white);
  font-size: var(--text-18);
}

.live-panel__meta {
  margin-top: var(--space-24);
}

.live-panel__meta-row {
  display: flex;
  gap: var(--space-16);
  font-size: var(--text-14);
  line-height: var(--leading-meta);
  margin-top: var(--space-8);
}

.live-panel__meta-label {
  flex: none;
  width: var(--width-live-label);
  color: var(--color-text-dim);
  letter-spacing: var(--tracking-meta);
}

.live-panel__meta-value {
  color: var(--color-white);
}

.live-panel__aside {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 160px;
}

.live-panel__aside .button { width: 100%; }
.flyer-link { width: 100%; color: var(--color-text-dim); font-size: var(--text-11); letter-spacing: 0.08em; }
.flyer-link img { width: 100%; }
.flyer-link > span { display: flex; justify-content: space-between; padding-top: var(--space-8); }
.flyer-link:hover { color: var(--color-white); }

.past {
  margin-top: var(--space-64);
}

.past__label {
  margin-bottom: var(--space-16);
  color: var(--color-text-dim);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-meta);
}

.past__list {
  border-bottom: var(--layout-line) solid var(--color-rule-dark);
}

.past__row {
  display: flex;
  gap: var(--space-24);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  border-top: var(--layout-line) solid var(--color-rule-dark);
  color: var(--color-text-dim);
  font-size: var(--text-14);
}

.past__date {
  flex: none;
  width: var(--width-news-date);
  letter-spacing: var(--tracking-meta);
}

/* ============================================================
   9. DISK
   ============================================================ */
.ep-panel {
  padding: var(--space-48);
  background-color: var(--color-panel);
}

.ep-panel__main {
  display: flex;
  gap: var(--space-48);
}

.ep-panel__figure {
  flex: none;
}

.ep-panel__body {
  flex: 1 1 0%;
  min-width: 0;
}

.ep-panel__title {
  color: var(--color-white);
  font-size: var(--text-50);
  line-height: var(--leading-heading);
}

.ep-panel__meta {
  margin-top: var(--space-16);
  color: var(--color-white);
  font-size: var(--text-20);
  letter-spacing: var(--tracking-meta);
  line-height: var(--leading-meta);
}

.ep-panel__tracks {
  margin-top: var(--space-16);
  color: var(--color-text-dim);
  font-size: var(--text-14);
  line-height: var(--leading-body);
}

.ep-panel__button {
  margin-top: var(--space-32);
}

.stream {
  margin-top: var(--space-48);
  padding-top: var(--space-16);
  border-top: var(--layout-line) solid var(--color-rule-dark);
}

.stream__label {
  color: var(--color-text-dim);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-meta);
  text-align: right;
}

.stream__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-32) var(--space-48);
  margin-top: var(--space-24);
}

.stream__link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 44px;
}

.stream__link:hover { opacity: 0.75; }

.stream__name {
  color: var(--color-white);
  font-size: var(--text-18);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-meta);
}

.stream__text {
  color: var(--color-white);
  font-size: var(--text-20);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-meta);
}

.single-list {
  display: flex;
  gap: var(--space-32);
  margin-top: var(--space-32);
}

.single-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0%;
  min-width: 0;
  padding: var(--space-32);
  background-color: var(--color-panel);
}

.single-panel > img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.single-panel__title {
  margin-top: var(--space-24);
  color: var(--color-white);
  font-size: var(--text-28);
  line-height: var(--leading-heading);
}

.single-panel__meta {
  margin-top: var(--space-8);
  color: var(--color-text-dim);
  font-size: var(--text-14);
  letter-spacing: var(--tracking-meta);
}

.single-panel__button {
  margin-top: auto;
  align-self: stretch;
}
.single-panel__meta { margin-bottom: var(--space-24); }

/* ============================================================
   10. BIO
   ============================================================ */
.section--shop {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/shop-background.webp);
  background-position: center center;
}

.shop-list {
  display: flex;
  gap: var(--space-32);
}

.shop-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0%;
  min-width: 0;
  padding: var(--space-32);
  background-color: var(--color-panel);
}

.shop-panel > img { width: 100%; height: 220px; object-fit: contain; }

.shop-panel__title {
  margin-top: var(--space-16);
  color: var(--color-white);
  font-size: clamp(20px, 2vw, 28px);
  line-height: var(--leading-meta);
}

.shop-panel__button {
  margin-top: auto;
  align-self: stretch;
}
.shop-panel__title { margin-bottom: var(--space-32); }

.bio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
}

.bio__figure {
  flex: 1 1 0%;
  min-width: 0;
  max-width: var(--width-bio-photo);
}

.bio__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.bio__body {
  flex: 1 1 0%;
  min-width: 0;
}

.bio__text {
  color: var(--color-ink-soft);
  font-size: var(--text-18);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

.bio__caption {
  margin-top: var(--space-24);
  color: var(--color-ink-soft);
  font-size: var(--text-11);
  line-height: var(--leading-meta);
}

/* ============================================================
   11. CONTACT
   ============================================================ */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact__title {
  color: var(--color-white);
  font-size: var(--text-70);
  line-height: var(--leading-heading);
}

.contact__lead {
  margin-top: var(--space-24);
  color: var(--color-text-dim);
  font-size: var(--text-14);
  letter-spacing: var(--tracking-meta);
}

.contact__mail {
  margin-top: var(--space-16);
  color: var(--color-white);
  font-size: var(--text-20);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.contact__mail:hover {
  color: var(--color-red);
}

.contact__social {
  display: flex;
  gap: var(--space-48);
  margin-top: var(--space-48);
}

.contact__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
}
.contact__social-link:hover { opacity: 0.75; }

/* ============================================================
   12. フッター
   ============================================================ */
.site-footer {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
  background-color: var(--color-white);
  border-top: var(--layout-line) solid var(--color-rule-light);
}

.site-footer__note {
  color: var(--color-ink-soft);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-meta);
  text-align: center;
}

.site-footer__top { display: flex; justify-content: center; align-items: center; gap: var(--space-16); min-height: 44px; margin-bottom: var(--space-16); font-size: var(--text-11); letter-spacing: 0.12em; }

@media (min-width: 769px) and (max-width: 1024px) {
  .site-nav { gap: var(--space-20); }
  .site-nav__link { font-size: var(--text-14); }
  .live-panel, .ep-panel__main { gap: var(--space-24); }
  .live-panel { padding: var(--space-32); }
  .ep-panel__figure { width: 240px; }
  .live-panel__date { width: 110px; }
  .live-panel__aside { width: 130px; }
  .single-panel, .shop-panel { padding: var(--space-24); }
}

/* ============================================================
   13. 768px 以下
   横並びを縦積みにするときは flex-basis を auto に戻す
   ============================================================ */
@media (max-width: 768px) {
  :root { --layout-header: 108px; }
  .container {
    padding-left: var(--layout-gutter-narrow);
    padding-right: var(--layout-gutter-narrow);
  }

  .site-header__inner {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }

  .site-header__side {
    flex: 0 0 44px;
  }

  .site-header__side--end {
    flex-basis: 44px;
  }

  .site-nav {
    order: 3;
    flex: 0 0 100%;
    justify-content: space-between;
    gap: 0;
    min-width: 0;
  }

  .site-nav__link {
    font-size: 12px;
    padding: 4px;
  }

  .section {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
  }

  .section__title {
    margin-bottom: var(--space-32);
    font-size: var(--text-36);
  }

  .hero__panel {
    min-height: var(--layout-hero-narrow);
  }

  .hero__title {
    font-size: 88px;
  }
  .hero__tagline { font-size: var(--text-14); }
  .hero__actions { flex-direction: column; width: min(100%, 340px); gap: var(--space-12); margin-top: var(--space-32); }
  .hero__scroll { margin-top: var(--space-24); }
  .hero__panel { padding-top: var(--space-48); padding-bottom: var(--space-32); }

  .news__row {
    flex-direction: column;
    gap: var(--space-8);
  }

  .news__date,
  .news__text {
    flex: none;
    flex-basis: auto;
    width: 100%;
  }

  .live-panel {
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-24);
  }

  .live-panel__date,
  .live-panel__body,
  .live-panel__aside {
    flex: none;
    flex-basis: auto;
    width: 100%;
  }
  .live-panel__aside { align-items: flex-start; }
  .flyer-link { max-width: 240px; }
  .live-panel__aside .button { max-width: 240px; }
  .live-panel__meta-row { gap: var(--space-12); }
  .live-panel__meta-label { width: 92px; }
  .live-panel__meta-value { flex: 1; min-width: 0; }

  .past__row {
    flex-direction: column;
    gap: var(--space-8);
  }

  .past__date,
  .past__venue,
  .past__event {
    flex: none;
    flex-basis: auto;
    width: 100%;
  }

  .ep-panel {
    padding: var(--space-24);
  }

  .ep-panel__main {
    flex-direction: column;
    gap: var(--space-24);
  }

  .ep-panel__figure,
  .ep-panel__body {
    flex: none;
    flex-basis: auto;
    width: 100%;
  }

  .ep-panel__title {
    font-size: var(--text-36);
  }

  .stream__list {
    gap: var(--space-24);
  }

  .single-list {
    flex-direction: column;
    gap: var(--space-24);
  }

  .single-panel {
    flex: none;
    flex-basis: auto;
    width: 100%;
    padding: var(--space-24);
  }

  .bio {
    flex-direction: column;
    gap: var(--space-24);
  }

  .shop-list {
    flex-direction: column;
    gap: var(--space-24);
  }

  .shop-panel {
    flex: none;
    width: 100%;
    padding: var(--space-24);
  }

  .bio__figure,
  .bio__body {
    flex: none;
    flex-basis: auto;
    width: 100%;
  }

  .contact__title {
    font-size: var(--text-44);
  }

  .contact__social {
    gap: var(--space-32);
  }
}

@media (max-width: 360px) {
  .site-nav__link { font-size: 11px; letter-spacing: 0; padding: 2px; }
  .contact__social { gap: var(--space-20); }
  .ep-panel__title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a { transition: none !important; }
}