/* ============================================================
   10-base.css — リセット・共通部品（見出し・カード・チップ・ページャ・ボタン）
   ============================================================ */

/* このファイルに !important は無い。Cocoon の打ち消しは 60-cocoon.css にまとめてある。 */
.rl-shell { max-width: 1680px; margin: 0 auto; padding: 60px 32px 140px; color: var(--rl-text); font-family: var(--ff-body); font-size: var(--fs-base); line-height: 1.75; letter-spacing: var(--ls-normal); }
.rl-shell, .rl-shell *, .rl-shell *::before, .rl-shell *::after { box-sizing: border-box; }
.rl-tabs__btn { flex-shrink: 0; padding: 9px 20px; background: transparent; border: 1px solid var(--rl-line-pill); border-radius: 999px; color: var(--rl-text-2); font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: all .2s; }
.rl-tabs__btn:hover { border-color: var(--rl-text); color: var(--rl-text); }
.rl-tabs__btn[aria-selected="true"] { background: var(--rl-text); border-color: var(--rl-text); color: var(--rl-bg); }
.rl-card { display: flex; flex-direction: column; background: var(--rl-bg); border: 1px solid var(--rl-line); border-radius: 14px; padding: 14px; transition: border-color .25s, box-shadow .25s; }
.rl-card[hidden] { display: none; }
.rl-card:hover { border-color: #d8d8d8; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.rl-card__media { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; margin-bottom: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rl-card__media::-webkit-scrollbar { display: none; }
.rl-card__media-slide { flex: 0 0 100%; aspect-ratio: 1 / 1; background: var(--rl-bg-soft); border-radius: 16px; overflow: hidden; position: relative; scroll-snap-align: start; }
.rl-card__media-slide img { width: 100%; height: 100%; object-fit: contain; padding: 18px; display: block; transition: transform .4s ease; }
.rl-card__media-wrap { position: relative; margin-bottom: 12px; }
.rl-card__indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--rl-text-4); transition: all .3s; }
.rl-card__indicator.is-active { width: 24px; border-radius: 4px; background: var(--rl-text); }
@media (max-width: 900px) {
  .rl-shell { padding: 40px 20px 100px; }
  .rl-card { padding: 12px; border-radius: 12px; }
  .rl-card__media { margin-bottom: 12px; }
  .rl-card__media-slide { border-radius: 12px; aspect-ratio: 3 / 2; }
  .rl-card__media-slide img { padding: 10px; }
}
@media (max-width: 480px) {
  .rl-shell { padding: 32px 16px 80px; }
}
body { padding-top: 60px; }

/* ------------------------------------------------------------
   セクションの見出し（黒い帯に白い文字のラベル）
   ・.rl-sec-head > .rl-sec-title（英語 __en ＋ 日本語 __ja）＋ 右端の .rl-sec-link … トップ・一覧ページ
   ・.rl-bidx__ghead > .rl-ghub__key（＋ 英語 .rl-ghub__en）… 個別ページ（横線の型は 42-index.css）
   v5.1.0 で、あちこちにあった上書きを1つにまとめた。
   ------------------------------------------------------------ */
.page-numbers { display: inline-block; padding: 8px 14px; margin: 0 2px; background: var(--rl-bg); border: 1px solid #e8e8e8; border-radius: 999px; color: var(--rl-text-2); font-family: var(--ff-mono); font-size: var(--fs-sm); text-decoration: none; transition: all .2s; }
.page-numbers:hover { border-color: var(--rl-text); color: var(--rl-text); }
.page-numbers.current { background: var(--rl-text); border-color: var(--rl-text); color: var(--rl-bg); }
.page-numbers.dots { border: 0; background: transparent; color: var(--rl-text-3); }
.rl-card__srchint { position: absolute; bottom: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(0,0,0,.06); border-radius: 999px; box-shadow: 0 1px 5px rgba(0,0,0,.12); color: var(--rl-text); font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.rl-card__srchint:hover { background: var(--rl-bg); transform: translateY(-1px); }
.rl-card__srchint svg { width: 14px; height: 14px; }
.mygear-btn { text-decoration: none; }
@media (max-width: 600px) {
  .rl-shell { padding: 32px 18px 72px; }
}
.comment-author { display: flex; align-items: center; gap: 10px; }
.comment-author img.avatar { width: 36px; height: 36px; border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 600; font-size: var(--fs-sm); color: var(--rl-text); }
.comment-author .says { display: none; }
.comment-metadata { font-size: var(--fs-xs); color: var(--rl-text-3); margin: 3px 0 6px 46px; }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-content { margin-left: 46px; font-size: var(--fs-base); color: var(--rl-text-2); line-height: 1.85; word-break: break-word; }
.comment-content a { color: var(--rl-text); }
.comment-content p { margin: 0 0 8px; }
.reply { display: none; }
.comment-respond textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--rl-line); border-radius: 12px; background: #fafafa; font-family: var(--ff-body); font-size: var(--fs-base); color: var(--rl-text); }
.comment-respond textarea:focus { outline: none; border-color: #b9b9b9; background: var(--rl-bg); box-shadow: 0 0 0 3px rgba(0,0,0,.045); }
.comment-form-comment { margin: 0 0 12px; }
.comment-respond .form-submit { margin: 0; }
.comment-respond .form-submit .submit { display: inline-block; padding: 12px 28px; border-radius: 999px; background: #1a1a1a; color: var(--rl-bg); border: 0; cursor: pointer; font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600; }
.comment-respond .form-submit .submit:hover { background: #000; }
.yt-form { max-width: 720px; }
.yt-form .form-submit { display: none; }
.yt-add { display: flex; align-items: flex-start; max-width: 720px; }
.yt-add__avatar { border-radius: 50%; flex: 0 0 auto; }
.yt-add__avatar--ph { background: var(--rl-bg-alt); }
.yt-add__box { flex: 1; min-width: 0; }
.yt-add__input { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; font-family: var(--ff-body); color: var(--rl-text); }
.yt-add__input:focus { outline: none; }
.yt-add__input::placeholder { color: var(--rl-text-3); }
.yt-add__actions { justify-content: flex-end; gap: 8px; margin-top: 10px; }
.yt-add__actions.is-show { display: flex; }
.yt-add__submit { background: #1a1a1a; color: var(--rl-bg); border: 0; cursor: pointer; padding: 9px 20px; border-radius: 999px; font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600; }
.yt-add__submit:hover { background: #000; }
.yt-add--guest { text-decoration: none; align-items: center; }
.yt-list { list-style: none; margin: 8px 0 0; padding: 0; max-width: 760px; }
.yt-c { list-style: none; gap: 14px; margin: 0 0 22px; }
.yt-c__avatar { flex: 0 0 auto; }
.yt-c__avatar img.avatar { width: 40px; height: 40px; border-radius: 50%; }
.yt-c__body { flex: 1; min-width: 0; }
.yt-c__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yt-c__name { font-size: var(--fs-sm); font-weight: 600; color: var(--rl-text); }
.yt-c__time { font-size: var(--fs-xs); color: var(--rl-text-3); }
.yt-c__text { font-size: var(--fs-base); color: var(--rl-text); line-height: 1.7; margin: 3px 0 6px; word-break: break-word; }
.yt-c__text p { margin: 0 0 6px; }
.yt-c__text a { color: var(--rl-accent); }
.yt-c__actions { display: flex; align-items: center; gap: 6px; }
.yt-c__actions .comment-reply-link { display: inline-block; margin-left: 4px; padding: 6px 12px; border-radius: 999px; color: var(--rl-text); text-decoration: none; font-size: var(--fs-xs); font-weight: 600; }
.yt-c__actions .comment-reply-link:hover { background: var(--rl-bg-soft); }
.comment-respond { max-width: 760px; }
.yt-add__input { border: 1px solid var(--rl-line); border-bottom: 1px solid var(--rl-line); background: #fafafa; }
.yt-add__input:focus { border-color: #b9b9b9; border-bottom-color: #b9b9b9; border-bottom-width: 1px; background: var(--rl-bg); box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
html, body { overflow-x: clip; }
.yt-add { gap: 12px; margin: 4px 0 22px; }
.yt-add img.avatar, .yt-add__avatar { width: 36px; height: 36px; }
.yt-add__input { padding: 9px 14px; border-radius: 10px; font-size: var(--fs-sm); line-height: 1.5; }
.yt-add__input:focus { border-radius: 10px; }
.rl-card { min-width: 0; }
.rl-card__media { min-width: 0; }
.yt-c__badge { font-size: var(--fs-2xs); font-weight: 600; color: var(--rl-bg); background: var(--rl-text); padding: 1px 8px; border-radius: 999px; line-height: 1.6; }
.yt-add__replycancel { display: inline-block; margin: 6px 0 0; font-size: var(--fs-xs); color: var(--rl-text-3); text-decoration: none; }
.yt-add__replycancel:hover { color: var(--rl-text); text-decoration: underline; }
.yt-c__avatar { position: relative; }
.yt-c__heart.is-on svg { fill: #e0245e; stroke: #e0245e; }
.yt-add__actions { display: flex; }
.yt-c { display: block; }
.yt-c__row { display: flex; gap: 14px; }
.yt-c__heart { display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer; padding: 5px 7px; border-radius: 999px; color: var(--rl-text-3); }
.yt-c__heart:hover { background: var(--rl-bg-soft); color: #e0245e; }
.yt-c__heart-empty { display: inline-flex; }
.yt-c__heart-on { display: none; }
.yt-c__heart.is-on .yt-c__heart-empty { display: none; }
.yt-c__heart.is-on .yt-c__heart-on { display: inline-flex; }
.yt-c__hearted { display: inline-flex; align-items: center; padding: 5px 7px; }
.yt-c__replies-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 54px; background: none; border: 0; cursor: pointer; color: var(--rl-accent); font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600; padding: 6px 10px; border-radius: 999px; }
.yt-c__replies-toggle:hover { background: rgba(29,78,216,.06); }
.yt-c__replies-toggle svg { width: 18px; height: 18px; transition: transform .15s; }
.yt-c__replies-toggle.is-open svg { transform: rotate(180deg); }
.yt-list .children { list-style: none; margin: 8px 0 0 54px; padding: 0; }
.yt-list .children.is-collapsed { display: none; }
.yt-list .children > li.yt-c { margin-bottom: 16px; }
.yt-list .children .yt-c__avatar img.avatar { width: 32px; height: 32px; }
.yt-posted { max-width: 760px; margin: 0 0 18px; padding: 12px 16px; background: #e7f4ea; color: #1f6b34; border-radius: 12px; font-size: var(--fs-sm); }
.yt-c__heart svg, .yt-c__hearted svg { width: 16px; height: 16px; }
.yt-c__heart.is-on { color: #e0617a; }
.yt-c__hearted { color: #e0617a; }
.yt-c__heart:not(.is-on) { color: var(--rl-text-3); }
.yt-c__heart:not(.is-on):hover { color: #e0617a; }
.mygear-il { color: var(--rl-accent, #2563eb); text-decoration: none; border-bottom: 1px solid rgba(37,99,235,.28); }
.mygear-il:hover { border-bottom-color: currentColor; }
/* バンドのページの「メンバー5人・機材54点」 */
#mygear-gear-app { transition: opacity .18s ease; }
#mygear-gear-app.is-swapping { opacity: .45; pointer-events: none; }
.rl-shell--index .rl-tabs__btn { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--rl-bg); border: 1px solid #e4e4e2; font-family: var(--ff-body); font-size: 13px; font-weight: 500; color: #46463f; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.rl-shell--index .rl-tabs__btn span { font-size: 11px; color: #bdbdb6; font-variant-numeric: tabular-nums; }
.rl-shell--index .rl-tabs__btn:hover { border-color: var(--rl-text); color: var(--rl-text); background: var(--rl-bg); }
.rl-shell--index .rl-tabs__btn[aria-selected="true"] { background: var(--rl-text); border-color: var(--rl-text); color: var(--rl-bg); }
.rl-shell--index .rl-tabs__btn[aria-selected="true"] span { color: rgba(255,255,255,.6); }
.rl-shell--index .rl-card { background: var(--rl-bg); border: 1px solid #ececec; border-radius: 16px; padding: 16px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.rl-shell--index .rl-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.07); transform: translateY(-2px); }
@media (max-width: 600px) {
  .rl-shell--index .rl-tabs__btn { font-size: 12.5px; padding: 6px 12px; }
  .rl-shell--index .rl-card:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-shell--index .rl-card:hover { transform: none; }
}
body, body input, body button, body textarea, body select { font-family: var(--ff-body); }
.rl-shell--index .rl-card { border-color: #d9d9d3; }
.rl-shell--index .rl-card:hover { border-color: #b4b4ad; }
.yt-add__input { min-height: 0; height: 38px; }
.rl-shell--mypage { max-width: 920px; }
.mygear-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 13px 32px; border-radius: 999px; background: var(--rl-text); border: 0; color: var(--rl-bg); cursor: pointer; font-family: var(--ff-display); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; transition: background .16s ease, transform .16s ease; }
.mygear-btn:hover { background: #2a2a2a; transform: translateY(-1px); }
@media (max-width: 600px) {
  .mygear-btn { width: 100%; }
}
@keyframes mygearRise {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.yt-c__del { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; margin-left: -2px; background: none; border: 0; cursor: pointer; color: #c8c8c2; border-radius: 50%; opacity: .55; transition: color .15s ease, background .15s ease, opacity .15s ease; }
.yt-c__del svg { width: 14px; height: 14px; display: block; }
.yt-c__del:hover { color: #b5433c; background: #faf2f1; opacity: 1; }
.yt-c__del:disabled { opacity: .3; cursor: default; }
.yt-c__row:hover .yt-c__del { opacity: 1; }
.mygear-gear-data { display: none; }

/* ---- v5.0.0：パンくず（ページ上部の「いまどこにいるか」。前の「← Artists」などの戻るリンクの代わり） ---- */
.rl-crumbs { margin: 0 0 30px; font-family: var(--ff-body); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: #6b6b65; }
.rl-crumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.rl-crumbs__item { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; line-height: 1.6; }
.rl-crumbs__item + .rl-crumbs__item::before { content: "›"; margin: 0 8px; color: #b4b4ad; }
.rl-crumbs__item a { color: #6b6b65; text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.rl-crumbs__item a:hover { color: var(--rl-text); text-decoration: underline; text-underline-offset: 3px; }
.rl-crumbs__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rl-text-2); }
@media (max-width: 900px) {
  .rl-crumbs { margin-bottom: 22px; }
}
.rl-crumbs--on-dark { margin-bottom: 18px; color: rgba(255,255,255,.62); }
.rl-crumbs--on-dark .rl-crumbs__item a { color: rgba(255,255,255,.72); }
.rl-crumbs--on-dark .rl-crumbs__item a:hover { color: #fff; }
.rl-crumbs--on-dark .rl-crumbs__item span { color: rgba(255,255,255,.9); }
.rl-crumbs--on-dark .rl-crumbs__item + .rl-crumbs__item::before { color: rgba(255,255,255,.36); }
@media (max-width: 900px) {
  .rl-crumbs--on-dark { margin-bottom: 14px; }
}