/* ================= TRACK PAGE ================= */

.track-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* ===== HEADER ===== */

.track-header.center {
  padding: 120px 1.5rem 60px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.track-jacket {
  width: 480px;
  max-width: 70vw;
  height: auto;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.track-title {
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

/* ================= SECTION BASE ================= */

.track-section {
  padding: 4rem 1.5rem;
}

.track-section h2 {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  opacity: 0.6;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

/* ================= LYRICS (WHITE FIELD) ================= */

.track-section.lyrics {
  background: #fff;
  color: #000;
}

#lyrics pre {
  max-width: 640px;              /* 読み幅を制御 */
  margin: 0 auto;

  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1.75;

  white-space: pre-wrap;
  word-break: break-word;

  color: #111;
}

.track-section.lyrics h2 {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
}

/* ================= NOTES (BLACK FIELD) ================= */

.track-section.notes {
  background: #000;
  color: #fff;
  border-top: 1px solid #222;
  padding-bottom: 7rem;

}
.track-section.notes h2 {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.track-section.notes .track-text {
  max-width: 640px;
  margin: 0 auto;

  font-size: 1.05rem;
  line-height: 1.9;
  opacity: 0.9;

  white-space: normal;
}

.track-section.notes p {
  margin-bottom: 1.5em;
}

.track-section.notes p:last-child {
  margin-bottom: 0;
}

/* ================= NAV ARROWS ================= */

.nav-arrow {
  position: fixed;
  top: 55%;
  transform: translateY(-50%);

  font-size: 2.6rem;
  font-weight: 400;
  font-family: inherit;

  color: rgba(255,255,255,0.55);
  text-decoration: none;

  z-index: 1500;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-arrow.prev { left: 14px; }
.nav-arrow.next { right: 14px; }

.nav-arrow:hover {
  opacity: 0.9;
}

.nav-arrow.prev:hover {
  transform: translate(-2px, -50%);
}

.nav-arrow.next:hover {
  transform: translate(2px, -50%);
}

/* タッチ領域拡張（見た目は変えない） */
.nav-arrow::before {
  content: "";
  position: absolute;
  inset: -20px -30px;
}

/* ================= MOBILE ================= */

@media (max-width: 700px) {
  .track-header.center {
    padding: 100px 1.2rem 50px;
  }

  #lyrics pre,
  .track-section.notes .track-text {
    max-width: 100%;
  }

  .nav-arrow {
    top: auto;
    bottom: 18px;
    font-size: 2.4rem;
  }

  .nav-arrow.prev { left: 18px; }
  .nav-arrow.next { right: 18px; }
}