@charset "UTF-8";
/* ==========================================================
   repertoire.css — 楽譜カタログ（曲リスト）ページ
   portal.css / company.css の上に読み込む。クラス名は rp- プレフィックス
   配色 : 水色 #00c0df / 黄色 #fcee21 / クリーム #f7f3dd / テキスト #231815
   ========================================================== */

/* ---------- 収録数 ---------- */
.rp-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 24px;
}
.rp-stats__item {
  text-align: center;
  line-height: 1;
}
.rp-stats__num {
  font-size: 64px;
  font-weight: 700;
  color: #00c0df;
  font-variant-numeric: tabular-nums;
}
.rp-stats__unit {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
}
.rp-lead {
  text-align: center;
  line-height: 2;
}

/* ---------- 新着 ---------- */
.rp-new {
  background: #fff;
  border-left: 6px solid #fcee21;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 32px;
}
.rp-new__title {
  font-weight: 700;
  margin-bottom: 8px;
}
.rp-new__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 14px;
}
.rp-new__song {
  font-weight: 700;
}

/* ---------- 検索・タグ ---------- */
.rp-tools {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f7f3dd;
  padding: 12px 0;
}
.rp-search {
  width: 100%;
  font-size: 16px; /* iOSでズームさせない */
  padding: 12px 16px;
  border: 2px solid #00c0df;
  border-radius: 999px;
  background: #fff;
  outline: none;
}
.rp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.rp-tag {
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border: 1px solid #00c0df;
  border-radius: 999px;
  background: #fff;
  color: #231815;
  cursor: pointer;
}
.rp-tag span {
  margin-left: 6px;
  opacity: 0.6;
}
.rp-tag.is-active {
  background: #00c0df;
  color: #fff;
  font-weight: 700;
}
.rp-result {
  min-height: 1.6em;
  margin: 8px 0;
  font-size: 14px;
  font-weight: 700;
}

/* ---------- 曲リスト ---------- */
.rp-list {
  columns: 3 280px;
  column-gap: 24px;
}
.rp-artist {
  break-inside: avoid;
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.rp-artist__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 2px solid #00c0df;
}
.rp-artist__count {
  flex-shrink: 0;
  font-size: 12px;
  background: #fcee21;
  border-radius: 999px;
  padding: 1px 8px;
}
.rp-artist__songs {
  list-style: none;
}
.rp-song {
  font-size: 14px;
  padding: 3px 0 3px 14px;
  position: relative;
}
.rp-song::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00c0df;
}
.rp-loading,
.rp-empty {
  text-align: center;
  padding: 32px 0;
}

@media (max-width: 767px) {
  .rp-stats { gap: 32px; }
  .rp-stats__num { font-size: 48px; }
  .rp-lead { text-align: left; }
}

/* ==========================================================
   トップページの紹介ブロック（front-page.php #repertoire）
   ========================================================== */
.rp-home {
  background: #f7f3dd;
  padding: 80px 20px;
}
.rp-home__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.rp-home__lead {
  margin-top: 24px;
  line-height: 2;
}
.rp-home__count {
  font-size: 1.6em;
  font-weight: 700;
  color: #00c0df;
  margin: 0 2px;
}
.rp-home__artists {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 32px;
}
.rp-home__artist {
  background: #fff;
  border: 1px solid #00c0df;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
}
.rp-home__artist--etc {
  border-style: dashed;
  color: #a39567;
}
.rp-home__more {
  display: inline-block;
  background: #00c0df;
  color: #fff;
  font-weight: 700;
  padding: 14px 40px;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.rp-home__more:hover {
  opacity: 0.8;
}
@media (max-width: 767px) {
  .rp-home { padding: 56px 16px; }
  .rp-home__lead { text-align: left; }
  .rp-home__artist { font-size: 13px; }
}