/* ==========================================================================
   THE REVIEW BOOK 2026 — 追加スタイル
   現行 reviewbook.css への追記。
   現行ヘッダ・フッタと同じ言語：黒 #000 ／ 赤 #c1272d / 金 #ba9f53
   ========================================================================== */


/* ==========================================================================
   1. 共通：プレスバナー型 黒帯（カウントダウン／ページタイトル）
   ========================================================================== */

/* ---------- ページ全体の左右余白 ---------- */
body {
  background: #686868;
}

/* ---------- TOP lineup カード ボタン補正 ---------- */
/* 押しやすく：上下 padding を増やす＆line-height を統一して高さ揃え */
.to-detail-btn,
.to-base-btn,
.to-base-btn-end {
  padding: 1.25rem 1rem;
  line-height: 1.4rem;
}
/* 商品紹介ページ → 販売ページの間ぴったり */
.reviewbook-detail-box-white ~ .col-12.mt-3 {
  margin-top: 0;
}
/* カード内の p の最終要素は下マージン0（カード下の余白を py-3 で揃える） */
.reviewbook-detail-box-white p:last-child {
  margin-bottom: 0;
}
/* 行間を詰める（カードの3行ヘッダー） */
.reviewbook-detail-box-white .sale-genre { line-height: 1.3; }
.reviewbook-detail-box-white .sale-ttl { line-height: 1.25; }
.reviewbook-detail-box-white .sale-caution { line-height: 1.2; }

/* 購入ボタン派生：角四角バリアント */
.reviewbook-buy-btn.reviewbook-buy-btn--square {
  border-radius: 0 !important;
}
/* ヘッダーの「お問い合わせ」文字を黒に */
.contact-detail { color: #000; }
/* フッターのリンク下線をなくす */
.footer-content { text-decoration: none !important; }
/* 「プライバシーポリシー」が 18px で © 2026 S.I.J. INC. より目立っていた。
   隣に並ぶ著作権表示と同じ大きさに揃える（PC 14px / スマホ 12px）。
   .--home はボタン体裁のリンクなので対象外 */
.footer-reviewbook .footer-content:not(.--home) { font-size: inherit; }
/* 暫定ランキング下の「ランキングはこちら」ボタン用ラッパ（文字数に合わせて自動幅） */
.rb26-rank-cta-inline {
  text-align: center;
  margin: 1.5rem auto 0;
}
.rb26-rank-cta-inline .reviewbook-buy-btn {
  display: inline-block;
  width: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ---------- 投票締切カウントダウン ---------- */
.rb26-countdown {
  background: #303030;
  padding: 16px 1.5rem;
  border-top: 1px solid #303030;
  /* 親の .container を抜けて全幅にする。--rb3d-vw はスクロールバーを除いた
     実寸で、JS が html に載せる。JS が無ければコンテナ幅のまま。 */
  width: var(--rb3d-vw, 100%);
  /* 親が .row（flex）なので、.col-12 の flex-basis:100% が width を上書きする。
     max-width の頭打ちとあわせて解除する */
  max-width: var(--rb3d-vw, 100%);
  flex: 0 0 var(--rb3d-vw, 100%);
  margin-inline: calc(50% - var(--rb3d-vw, 100%) / 2);
}
.rb26-countdown-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.rb26-countdown .cd-deadline {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
}
.rb26-countdown .cd-en {
  font-family: 'League Gothic', 'Roboto', sans-serif;
  font-size: var(--fs-d3);
  letter-spacing: .3em;
  color: #ba9f53;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.rb26-countdown .cd-event {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  background: transparent;
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 0;
  border-radius: 0;
}
.rb26-countdown .cd-event-title {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-xl);
}
.rb26-countdown .cd-event-deadline {
  font-size: var(--fs-lg);
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}
.rb26-countdown .cd-event-deadline .rb26-days-num {
  font-size: var(--fs-d3);
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
/* 数字カード装飾を無効化（赤枠内では素のテキスト） */
.rb26-countdown .cd-event-deadline .cd-digit {
  background: transparent;
  color: inherit;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  font-size: inherit;
  min-width: 0;
  display: inline;
}
@media (max-width: 575px) {
  .rb26-countdown .cd-event {
    flex-direction: column;
    gap: .25rem;
    padding: .6rem 1rem;
  }
  .rb26-countdown .cd-event-title { font-size: var(--fs-lg); }
  .rb26-countdown .cd-event-deadline { font-size: var(--fs-md); }
  .rb26-countdown .cd-event-deadline .rb26-days-num { font-size: var(--fs-xl); }
}
.rb26-countdown .cd-event-dot {
  display: inline-block;
  width: .75rem;
  height: .75rem;
  background: #E02229;
  border-radius: 50%;
  position: relative;
  top: 2px;
  animation: rb26-blink 1.6s infinite ease-in-out;
}
@keyframes rb26-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.rb26-countdown .cd-jp {
  font-size: var(--fs-md);
  color: #fff;
  font-weight: 600;
  letter-spacing: .08em;
}
.rb26-countdown .cd-date {
  font-family: 'League Gothic', 'Roboto', sans-serif;
  font-size: var(--fs-d2);
  color: #fff;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}
.rb26-countdown .cd-days {
  display: inline-flex;
  align-items: baseline;
  color: #c1272d;
  font-family: 'League Gothic', 'Roboto', sans-serif;
  line-height: 1;
  gap: .15rem;
}
.rb26-countdown .cd-days b {
  display: inline-flex;
  gap: .3rem;
  align-items: stretch;
  font-weight: 400;
  min-width: 0;
  letter-spacing: normal;
}
.rb26-countdown .cd-days .cd-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #c1272d;
  font-family: 'League Gothic', 'Roboto', sans-serif;
  font-size: var(--fs-d1);
  font-weight: 700;
  line-height: 1;
  padding: .15rem .5rem;
  min-width: 1.4rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.rb26-countdown .cd-days-unit {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: #fff;
  letter-spacing: .04em;
}
.rb26-countdown .cd-meta {
  font-size: var(--fs-sm);
  color: #ba9f53;
  opacity: .85;
  letter-spacing: .04em;
}

@media (max-width: 991px) {
  .rb26-countdown { padding: 16px 1rem; }
  .rb26-countdown-inner { gap: 1rem; }
  .rb26-countdown .cd-en { font-size: var(--fs-xl); }
  .rb26-countdown .cd-meta { font-size: var(--fs-xs); }
}
@media (max-width: 575px) {
  .rb26-countdown { padding: 16px .8rem; }
  .rb26-countdown-inner { gap: .6rem 1rem; }
  .rb26-countdown .cd-en { font-size: var(--fs-lg); letter-spacing: .2em; }
  .rb26-countdown .cd-date { font-size: var(--fs-d3); }
  .rb26-countdown .cd-jp { font-size: var(--fs-sm); }
  .rb26-countdown .cd-meta {
    font-size: var(--fs-xs);
    flex-basis: 100%;
    text-align: center;
  }
}


/* ---------- 共通：ページタイトル黒帯（ranking / vote ページの上部） ---------- */
.rb26-pagetitle {
  background: #000;
  border-top: 4px solid #c1272d;
  padding: 2.2rem 1.5rem;
  text-align: center;
  color: #fff;
}
.rb26-pagetitle .pt-en {
  font-family: 'League Gothic', 'Roboto', sans-serif;
  font-size: var(--fs-lg);
  letter-spacing: .35em;
  color: #ba9f53;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.rb26-pagetitle .pt-ttl {
  font-size: var(--fs-d1);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin: 0;
  letter-spacing: .04em;
}
.rb26-pagetitle .pt-ttl .gold { color: #ba9f53; }
.rb26-pagetitle .pt-sub {
  margin-top: .8rem;
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, .75);
  letter-spacing: .05em;
}
.rb26-pagetitle .pt-cheer {
  margin-top: .4rem;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #ba9f53;
  letter-spacing: .08em;
}
@media (max-width: 768px) {
  .rb26-pagetitle .pt-cheer { letter-spacing: .05em; }
}
.rb26-pagetitle .pt-meta {
  margin-top: 1rem;
  display: inline-flex;
  gap: 1rem;
  font-size: var(--fs-sm);
  color: #ba9f53;
  flex-wrap: wrap;
  justify-content: center;
}
.rb26-pagetitle .pt-meta span {
  padding: .3rem .8rem;
  border: 1px solid rgba(186, 159, 83, .4);
}
@media (max-width: 768px) {
  .rb26-pagetitle { padding: 1.8rem 1rem; }
  .rb26-pagetitle .pt-en { font-size: var(--fs-md); letter-spacing: .25em; }
  .rb26-pagetitle .pt-ttl { font-size: var(--fs-d3); }
}


/* ==========================================================================
   2. 投票フェーズインジケーター（投票ページ・球団詳細ページ共通）
   ========================================================================== */
.rb26-phasebar {
  background: #f0ead9;
  border-bottom: 1px solid #d4c89a;
  padding: 1rem 1.5rem;
}
.rb26-phasebar-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  flex-wrap: wrap;
}
.rb26-phasebar-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  color: #888;
  padding: .4rem .8rem;
  background: #fff;
  border: 1px solid #d4c89a;
}
.rb26-phasebar-step.is-done {
  background: #ba9f53;
  color: #fff;
  border-color: #ba9f53;
}
.rb26-phasebar-step.is-active {
  background: #c1272d;
  color: #fff;
  border-color: #c1272d;
  font-weight: 600;
}
.rb26-phasebar-step .pb-num {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-lg);
  line-height: 1;
}
.rb26-phasebar-arrow {
  color: #d4c89a;
  font-size: var(--fs-xs);
}
@media (max-width: 768px) {
  .rb26-phasebar-step { font-size: var(--fs-xs); padding: .3rem .5rem; gap: .3rem; }
  .rb26-phasebar-step .pb-num { font-size: var(--fs-md); }
  .rb26-phasebar-arrow { display: none; }
}


/* ==========================================================================
   3. 投票ページ用：候補カード（選手／シーン）
   ========================================================================== */

/* ---------- 投票ページの本体ラップ ---------- */
.rb26-vote-page {
  background: #fafaf3;
  padding: 2rem 1rem 6rem;
}
.rb26-vote-page-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.rb26-vote-page-lead {
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 760px;
  font-size: var(--fs-md);
  line-height: 1.9;
  color: #333;
}
.rb26-vote-page-lead .red { color: #c1272d; font-weight: 600; }

/* ---------- 投票候補グリッド ---------- */
.rb26-vote-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 991px) { .rb26-vote-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .rb26-vote-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } }

/* ---------- 候補カード（共通） ---------- */
.rb26-vote-card {
  background: #fff;
  border: 2px solid #ddd;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.rb26-vote-card:hover {
  border-color: #ba9f53;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}
.rb26-vote-card.is-selected {
  border-color: #c1272d;
  box-shadow: 0 0 0 4px #c1272d, 0 6px 20px rgba(193, 39, 45, .25);
}
.rb26-vote-card.is-selected::after {
  content: "選択中";
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: #c1272d;
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 700;
  padding: .4rem .9rem;
  letter-spacing: .1em;
}
.rb26-vote-card .vc-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #f0ead9;
  object-fit: cover;
  display: block;
}
.rb26-vote-card .vc-body {
  padding: .8rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rb26-vote-card .vc-number {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-xl);
  color: #ba9f53;
  line-height: 1;
  margin-bottom: .3rem;
}
.rb26-vote-card .vc-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #000;
  line-height: 1.3;
  margin-bottom: .3rem;
}
.rb26-vote-card .vc-meta {
  font-size: var(--fs-xs);
  color: #888;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .rb26-vote-card .vc-name { font-size: var(--fs-md); }
  .rb26-vote-card .vc-number { font-size: var(--fs-lg); }
}

/* ---------- シーンカード（横長） ---------- */
.rb26-scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) { .rb26-scene-grid { grid-template-columns: 1fr; } }

.rb26-scene-card {
  background: #fff;
  border: 2px solid #ddd;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0;
}
.rb26-scene-card:hover {
  border-color: #ba9f53;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}
.rb26-scene-card.is-selected {
  border-color: #c1272d;
  border-width: 3px;
}
.rb26-scene-card.is-selected::after {
  content: "✓ 選択中";
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: #c1272d;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: .25rem .6rem;
  letter-spacing: .08em;
}
.rb26-scene-card .sc-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  background: #f0ead9;
  object-fit: cover;
  display: block;
}
.rb26-scene-card .sc-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rb26-scene-card .sc-date {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-lg);
  color: #c1272d;
  line-height: 1;
  letter-spacing: .05em;
  margin-bottom: .3rem;
}
.rb26-scene-card .sc-card {
  font-size: var(--fs-sm);
  color: #666;
  margin-bottom: .4rem;
}
.rb26-scene-card .sc-txt {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #000;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .rb26-scene-card { grid-template-columns: 110px 1fr; }
  .rb26-scene-card .sc-body { padding: .7rem; }
}

/* ---------- 選択ボックス見出し ---------- */
.rb26-vote-section-ttl {
  background: #000;
  color: #fff;
  padding: .8rem 1.2rem;
  margin: 2.5rem 0 1.2rem;
  border-left: 6px solid #ba9f53;
  font-size: var(--fs-md);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.rb26-vote-section-ttl .rb26-section-en {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-sm);
  color: #ba9f53;
  letter-spacing: .25em;
}
.rb26-vote-section-ttl .rb26-section-counter {
  font-size: var(--fs-sm);
  color: #ba9f53;
  font-weight: 400;
}

/* ---------- 投票確定ボタン（固定下部） ---------- */
.rb26-vote-submit {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #d4c89a;
  padding: 1rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.rb26-vote-submit-status {
  font-size: var(--fs-md);
  color: #555;
}
.rb26-vote-submit-status b { color: #c1272d; }
.rb26-vote-submit-btn {
  background: #c1272d;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-md);
  padding: .9rem 2.5rem;
  border: none;
  cursor: pointer;
  letter-spacing: .08em;
  text-decoration: none;
  display: inline-block;
}
.rb26-vote-submit-btn:hover { background: #e02229; }
.rb26-vote-submit-btn:disabled,
.rb26-vote-submit-btn.is-disabled {
  background: #999;
  cursor: not-allowed;
}
@media (max-width: 768px) {
  .rb26-vote-submit-btn { padding: .8rem 1.6rem; }
}


/* ==========================================================================
   4. 球団詳細ページ用：投票暫定ランキング表示セクション
   ========================================================================== */
.rb26-current-rank {
  background: #f0e7ca;
  padding: 2.5rem 1rem;
  border-top: 1px solid #d4c89a;
  border-bottom: 1px solid #d4c89a;
}
.rb26-current-rank-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.rb26-current-rank-heading {
  text-align: center;
  margin-bottom: 2rem;
}
.rb26-current-rank-heading .crh-en {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-md);
  letter-spacing: .3em;
  color: #c1272d;
  font-weight: 600;
}
.rb26-current-rank-heading .crh-ttl {
  font-size: var(--fs-d3);
  line-height: 2.7rem;
  font-weight: 600;
  margin: .3rem 0 .5rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.rb26-current-rank-heading .crh-ttl::before,
.rb26-current-rank-heading .crh-ttl::after {
  content: "★";
  color: #c1272d;
  font-size: var(--fs-xl);
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.rb26-current-rank-heading .crh-meta {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.7;
  letter-spacing: .03em;
  max-width: 780px;
  margin: 0 auto;
  padding: 1rem 1.2rem;
  background: #fff8e1;
  border-left: 4px solid #ba9f53;
}
@media (max-width: 600px) {
  .rb26-current-rank-heading .crh-meta { font-size: var(--fs-md); padding: .8rem 1rem; }
}

.rb26-current-rank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) { .rb26-current-rank-grid { grid-template-columns: 1fr; gap: 1rem; } }

.rb26-rank-block {
  background: #fff;
  border: 1px solid #d4c89a;
  padding: 1.2rem;
}
.rb26-rank-block-head {
  border-bottom: 2px solid #ba9f53;
  padding-bottom: .6rem;
  margin-bottom: .8rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rb26-rank-block-head .rb-en {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: .22em;
  color: #c1272d;
}
.rb26-rank-block-head .rb-ttl {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: inherit;
}
.rb26-rank-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rb26-rank-list li {
  display: grid;
  grid-template-columns: 40px 50px 1fr;
  gap: .8rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px dotted #d4c89a;
}
.rb26-rank-list li:last-child { border-bottom: none; }
.rb26-rank-list .rl-rank {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-d3);
  color: #ba9f53;
  text-align: center;
  line-height: 1;
}
.rb26-rank-list .rl-rank.r1 { color: #c1272d; font-size: var(--fs-d3); }
.rb26-rank-list .rl-photo {
  width: 50px;
  height: 50px;
  background: #f0ead9;
  object-fit: cover;
  display: block;
}
.rb26-rank-list .rl-photo.is-scene { aspect-ratio: 4/3; height: auto; }
.rb26-rank-list .rl-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: #000;
  line-height: 1.4;
}
.rb26-rank-list .rl-meta {
  font-size: var(--fs-xs);
  color: #888;
  margin-top: .15rem;
}

.rb26-current-rank-cta {
  text-align: center;
  margin-top: 1.5rem;
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.rb26-current-rank-cta .btn-rank {
  display: inline-block;
  padding: .8rem 1.6rem;
  background: #fff;
  border: 1px solid #ba9f53;
  color: #000;
  font-weight: 600;
  font-size: var(--fs-md);
  text-decoration: none;
  transition: all .2s;
}
.rb26-current-rank-cta .btn-rank:hover {
  background: #ba9f53;
  color: #fff;
}
.rb26-current-rank-cta .btn-rank.is-primary {
  background: #c1272d;
  border-color: #c1272d;
  color: #fff;
}
.rb26-current-rank-cta .btn-rank.is-primary:hover {
  background: #e02229;
  border-color: #e02229;
}
.rb26-current-rank-note {
  text-align: center;
  margin-top: 1rem;
  font-size: var(--fs-xs);
  color: #888;
}


/* ==========================================================================
   5. ランキングページ本体（ranking/index.html / ranking/player.html）
   ========================================================================== */
.rb26-rank-page {
  background: #fafaf3;
  padding: 0 0 4rem;
}
.rb26-rank-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.rb26-rank-team-head {
  background: #fff;
  border-left: 8px solid #ba9f53;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.rb26-rank-team-head img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.rb26-rank-team-head .rth-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #000;
}
.rb26-rank-team-head .rth-meta {
  font-size: var(--fs-sm);
  color: #888;
  margin-top: .3rem;
}
.rb26-rank-team-head.is-fighters { border-left-color: #006298; }
.rb26-rank-team-head.is-buffaloes { border-left-color: #000121; }
.rb26-rank-team-head.is-hawks { border-left-color: #fbb910; }
.rb26-rank-team-head.is-marines { border-left-color: #000; }

.rb26-rank-subttl {
  background: #000;
  color: #fff;
  padding: .8rem 1.2rem;
  font-size: var(--fs-md);
  font-weight: 600;
  border-left: 6px solid #c1272d;
  margin: 2rem 0 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.rb26-rank-subttl .rs-en {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-sm);
  color: #ba9f53;
  letter-spacing: .22em;
}

.rb26-rank-fullist {
  background: #fff;
  border: 1px solid #d4c89a;
  padding: 1rem 1.2rem;
}
.rb26-rank-fullist-row {
  display: grid;
  grid-template-columns: 60px 90px 1fr;
  gap: 1rem;
  align-items: center;
  padding: .8rem 0;
  border-bottom: 1px dotted #d4c89a;
}
.rb26-rank-fullist-row:last-child { border-bottom: none; }
.rb26-rank-fullist-row .rr-rank {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.1rem;
  color: #ba9f53;
  text-align: center;
  line-height: 1;
}
.rb26-rank-fullist-row .rr-rank.r1 { color: #c1272d; font-size: 2.1rem; }
.rb26-rank-fullist-row .rr-rank.r2 { color: #ad9544; font-size: 2.1rem; }
.rb26-rank-fullist-row .rr-rank.r3 { color: #c47a32; font-size: 2.1rem; }
.rb26-rank-fullist-row .rr-photo {
  width: 90px;
  aspect-ratio: 1 / 1;
  background: #f0ead9;
  object-fit: cover;
  display: block;
}
.rb26-rank-fullist-row .rr-photo.is-scene {
  width: 120px;
  aspect-ratio: 4 / 3;
}
.rb26-rank-fullist-row .rr-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #000;
  line-height: 1.4;
}
.rb26-rank-fullist-row .rr-meta {
  font-size: var(--fs-sm);
  color: #555;
  margin-top: .3rem;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .rb26-rank-fullist-row { grid-template-columns: 40px 60px 1fr; gap: .6rem; padding: .6rem 0; }
  .rb26-rank-fullist-row .rr-photo { width: 60px; }
  .rb26-rank-fullist-row .rr-photo.is-scene { width: 80px; }
  .rb26-rank-fullist-row .rr-meta { font-size: var(--fs-xs); }
}


/* ==========================================================================
   6. その他汎用：トークン情報帯
   ========================================================================== */
.rb26-token-bar {
  background: #f0ead9;
  border-bottom: 1px solid #d4c89a;
  padding: .8rem 1.5rem;
  font-size: var(--fs-sm);
  color: #555;
  text-align: center;
}
.rb26-token-bar .tb-label {
  font-family: 'League Gothic', sans-serif;
  letter-spacing: .25em;
  color: #c1272d;
  margin-right: .8rem;
}
.rb26-token-bar code {
  font-family: 'Roboto', monospace;
  background: #fff;
  padding: .2rem .5rem;
  border: 1px solid #d4c89a;
  color: #000;
  margin: 0 .5rem;
}


/* ==========================================================================
   7. フェーズ進行ステータス（球団詳細ページ内）
   ========================================================================== */
.rb26-phase-status {
  background: #000;
  padding: 0;
  margin: 0;
}
/* 球団色バリアント */
.rb26-phase-status.is-fighters { background: #006298; }
.rb26-phase-status.is-buffaloes { background: #000019; }
.rb26-phase-status.is-hawks { background: #f9c81b; }
.rb26-phase-status.is-marines { background: #000000; }
.rb26-phase-status .phs-bar {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}
/* 矢印（▶）テキストは隠す（clip-path で chevron 化するため） */
.rb26-phase-status .phs-arrow { display: none; }
.rb26-phase-status .phs-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: .8rem calc(.6rem + 18px);
  border: none;
  background: #fff;
  color: #555;
  text-align: center;
  gap: .5rem;
  line-height: 1.1;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  margin-right: -10px;
}
.rb26-phase-status .phs-step:first-child {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  padding-left: 1.2rem;
}
.rb26-phase-status .phs-step:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
  padding-right: 1.2rem;
  margin-right: 0;
}
.rb26-phase-status .phs-label br { display: none; }

/* タブレット (576-991px): 横並び chevron 維持、step 内を縦並びに、label 2行表示 */
@media (min-width: 576px) and (max-width: 991px) {
  .rb26-phase-status .phs-step,
  .rb26-phase-status .phs-step:first-child,
  .rb26-phase-status .phs-step:last-child {
    flex-direction: column;
    flex-wrap: nowrap;
    white-space: normal;
    text-align: center;
    gap: .3rem;
    padding: 1rem calc(.5rem + 14px);
  }
  .rb26-phase-status .phs-label br { display: inline; }
  .rb26-phase-status .phs-num { font-size: var(--fs-md); }
  .rb26-phase-status .phs-label { line-height: 1.25; }
}

/* スマホ (≤575px): フェーズ進行ステータス自体を非表示 */
@media (max-width: 575px) {
  .rb26-phase-status { display: none; }
  /* 投票締切バー内の「●推し選手総選挙 開催中！」バッジを小さく */
  .rb26-countdown .cd-event {
    font-size: var(--fs-md);
    padding: .35rem .65rem;
    gap: .4rem;
  }
  .rb26-countdown .cd-event-dot {
    width: .55rem;
    height: .55rem;
  }
}
.rb26-phase-status .phs-step.is-active {
  background: #c1272d;
  border-color: #c1272d;
  color: #fff;
}
.rb26-phase-status .phs-step.is-done {
  background: #ba9f53;
  border-color: #ba9f53;
  color: #fff;
}
.rb26-phase-status .phs-step.is-future {
  background: #fff;
}
.rb26-phase-status .phs-num {
  font-family: 'Noto Sans JP', 'Roboto', sans-serif;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1;
}
.rb26-phase-status .phs-label {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.1;
}
.rb26-phase-status .phs-date {
  font-size: var(--fs-xs);
  opacity: .9;
  letter-spacing: .04em;
}
.rb26-phase-status .phs-arrow {
  color: #fff;
  align-self: center;
  font-size: var(--fs-xs);
}
/* アンカー化されたステップ */
.rb26-phase-status a.phs-step {
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}
.rb26-phase-status a.phs-step:hover {
  opacity: .9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(186, 159, 83, .2);
}
.rb26-phase-status a.phs-step.is-active:hover { background: #d63e44; }
.rb26-phase-status a.phs-step.is-done:hover { background: #cab164; }
@media (max-width: 575px) {
  .rb26-phase-status .phs-bar { gap: .25rem; }
  .rb26-phase-status .phs-arrow { display: none; }
  .rb26-phase-status .phs-step { padding: .4rem .3rem; }
  .rb26-phase-status .phs-num { font-size: var(--fs-md); }
  .rb26-phase-status .phs-label { font-size: var(--fs-sm); }
}


/* ==========================================================================
   8. ランキングブロック単独表示モード（フェーズ1 推し選手のみ等）
   ========================================================================== */
.rb26-rank-block-solo {
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e0d8be;
  padding: 1.5rem;
}
.rb26-rank-block-solo + .rb26-rank-block-solo { margin-top: 1.2rem; }
.rb26-rank-block-solo .rb26-rank-block-head {
  border-bottom: 2px solid #ba9f53;
  padding-bottom: .8rem;
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .rb26-rank-block-solo { padding: 1rem; }
}

/* ランキングブロック：見出し帯を球団カラーに（球団Ver・選手Ver 共通） */
.rb26-rank-block-solo .rb26-rank-block-head {
  margin: -1.5rem -1.5rem 1rem;
  padding: 1rem 1.5rem;
  border-bottom: none;
}
@media (max-width: 600px) {
  .rb26-rank-block-solo .rb26-rank-block-head {
    margin: -1rem -1rem .8rem;
    padding: .8rem 1rem;
  }
}
.rb26-ranking-team[data-team="fighters"] .rb26-rank-block-solo .rb26-rank-block-head {
  background: #006298;
  color: #fff;
}
.rb26-ranking-team[data-team="buffaloes"] .rb26-rank-block-solo .rb26-rank-block-head {
  background: #1f2348;
  color: #ba9f53;
}
.rb26-ranking-team[data-team="marines"] .rb26-rank-block-solo .rb26-rank-block-head {
  background: #1a1a1a;
  color: #fff;
}

/* 大型ランキング行（上位5名・横並び5列・写真上＋名前下） */
.rb26-rank-list-large {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .8rem;
}
.rb26-rank-list-large li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem .5rem;
  background: #fff;
  border: 1px solid #f0ead9;
  border-top: 4px solid #ba9f53;
  position: relative;
}
.rb26-rank-list-large li.r1 { border-top-color: #c1272d; }
.rb26-rank-list-large li.r2 { border-top-color: #ad9544; }
.rb26-rank-list-large li.r3 { border-top-color: #c47a32; }
.rb26-rank-list-large .rl-rank {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-d3);
  font-weight: 700;
  color: #ba9f53;
  line-height: 1;
  margin-bottom: .6rem;
}
.rb26-rank-list-large .rl-rank.r1 { color: #c1272d; }
.rb26-rank-list-large .rl-rank.r2 { color: #ad9544; }
.rb26-rank-list-large .rl-rank.r3 { color: #c47a32; }
.rb26-rank-list-large .rl-photo {
  width: 100%;
  max-width: 100%;
  height: auto;
  background: #f0ead9;
  display: block;
  margin-bottom: .8rem;
}
.rb26-rank-list-large .rl-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #000;
  line-height: 1.3;
}
.rb26-rank-list-large .rl-meta {
  font-size: var(--fs-md);
  color: #555;
  margin-top: .3rem;
}

/* タブレット：5列維持・写真小さく */
@media (max-width: 991px) {
  .rb26-rank-list-large { gap: .4rem; }
  .rb26-rank-list-large li { padding: .8rem .3rem; }
  .rb26-rank-list-large .rl-photo { max-width: 100%; margin-bottom: .5rem; }
  .rb26-rank-list-large .rl-rank { font-size: var(--fs-xl); }
  .rb26-rank-list-large .rl-name { font-size: var(--fs-md); }
  .rb26-rank-list-large .rl-meta { font-size: var(--fs-sm); }
}

/* ベストシーン版：写真を大きく見せる（1位フル幅・2-5位を 2x2 グリッド） */
.rb26-rank-list-large.is-scene-list {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.rb26-rank-list-large.is-scene-list li:first-child {
  grid-column: 1 / -1;
}
.rb26-rank-list-large.is-scene-list li {
  padding: 1rem .8rem;
}
.rb26-rank-list-large .rl-photo.is-scene {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.rb26-rank-list-large.is-scene-list li:first-child .rl-photo.is-scene {
  aspect-ratio: 16 / 9;
}
.rb26-rank-list-large.is-scene-list .rl-name {
  font-size: var(--fs-lg);
  margin-top: .6rem;
}
.rb26-rank-list-large.is-scene-list li:first-child .rl-name {
  font-size: var(--fs-xl);
}
.rb26-rank-list-large.is-scene-list .rl-meta {
  font-size: var(--fs-md);
  margin-top: .4rem;
  line-height: 1.5;
  color: #333;
}
.rb26-rank-list-large.is-scene-list li:first-child .rl-meta {
  font-size: var(--fs-md);
}
.rb26-rank-list-large.is-scene-list .rl-date {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-lg);
  color: #c1272d;
  letter-spacing: .05em;
  margin-top: .3rem;
  display: block;
}
@media (max-width: 575px) {
  .rb26-rank-list-large.is-scene-list { grid-template-columns: 1fr; gap: .8rem; }
  .rb26-rank-list-large.is-scene-list li,
  .rb26-rank-list-large.is-scene-list li:first-child {
    grid-column: auto;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .rb26-rank-list-large.is-scene-list li:first-child .rl-photo,
  .rb26-rank-list-large.is-scene-list .rl-photo {
    max-width: 100%;
    width: 100%;
    margin-bottom: .5rem;
  }
  .rb26-rank-list-large.is-scene-list li:first-child .rl-photo.is-scene { aspect-ratio: 16 / 10; }
  .rb26-rank-list-large.is-scene-list li:first-child .rl-rank { margin-right: 0; margin-bottom: .4rem; }
  .rb26-rank-list-large.is-scene-list li:first-child > div { flex: none; width: 100%; }
  .rb26-rank-list-large.is-scene-list .rl-name { font-size: var(--fs-md); }
  .rb26-rank-list-large.is-scene-list li:first-child .rl-name { font-size: var(--fs-lg); }
  .rb26-rank-list-large.is-scene-list .rl-meta { font-size: var(--fs-sm); }
}

/* ベストシーン版：6-10位の写真も拡大（横長3:2） */
.rb26-ranking-team[data-team] .rb26-rank-tail-list li:has(.rl-photo[src*="rb-scene-"]) {
  grid-template-columns: 44px 130px 1fr;
}
.rb26-rank-tail-list li:has(.rl-photo[src*="rb-scene-"]) .rl-photo {
  width: 130px;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (max-width: 600px) {
  .rb26-ranking-team[data-team] .rb26-rank-tail-list li:has(.rl-photo[src*="rb-scene-"]) {
    grid-template-columns: 38px 110px 1fr;
  }
  .rb26-rank-tail-list li:has(.rl-photo[src*="rb-scene-"]) .rl-photo {
    width: 110px;
  }
}

/* SP：1位横長＋2-5を2列 */
@media (max-width: 575px) {
  .rb26-rank-list-large { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .rb26-rank-list-large li:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    text-align: left;
    gap: .8rem;
  }
  .rb26-rank-list-large li:first-child .rl-photo {
    max-width: 100px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .rb26-rank-list-large li:first-child .rl-rank {
    margin-bottom: 0;
    margin-right: .3rem;
  }
  .rb26-rank-list-large li:first-child > div {
    flex: 1;
  }
  .rb26-rank-list-large .rl-photo { max-width: 100px; }
  .rb26-rank-list-large .rl-name { font-size: var(--fs-md); }
}

/* 圏内・圏外のカットライン */
.rb26-rank-cutline {
  margin: 1rem 0;
  padding: .5rem 0;
  border-top: 2px dashed #c1272d;
  border-bottom: 2px dashed #c1272d;
  background: rgba(193, 39, 45, .04);
  text-align: center;
}
.rb26-rank-cutline .rl-cutline-label {
  font-size: var(--fs-xs);
  color: #c1272d;
  font-weight: 600;
  letter-spacing: .08em;
}

/* 小型ランキング行（圏外プレビュー） */
.rb26-rank-list-small {
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: .75;
}
.rb26-rank-list-small li {
  display: grid;
  grid-template-columns: 40px 40px 1fr;
  gap: .6rem;
  align-items: center;
  padding: .35rem 0;
  border-bottom: 1px dotted #e0d8be;
}
.rb26-rank-list-small li:last-child { border-bottom: none; }
.rb26-rank-list-small .rl-rank {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-xl);
  color: #aaa;
  text-align: center;
  line-height: 1;
}
.rb26-rank-list-small .rl-rank.rl-rank-out { color: #aaa; }
.rb26-rank-list-small .rl-photo {
  width: 40px;
  aspect-ratio: 1 / 1;
  background: #f0ead9;
  object-fit: cover;
  display: block;
  filter: grayscale(.4);
}
.rb26-rank-list-small .rl-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #555;
  line-height: 1.3;
}
.rb26-rank-list-small .rl-meta {
  font-size: var(--fs-xs);
  color: #888;
  margin-top: .15rem;
}

/* ==========================================================================
   home_v3 専用パッチ: 商品が届くまでの流れ
   UA stylesheet の h4/p/ol 余白を打ち消す（Bootstrap reboot 相当）
   - h4/p の margin を0にして align-items:stretch を正しく効かせる
   - ol の margin-top を0にして縦の line(.line) が上に突き抜けないようにする
   - li 間隔を mb-4(1.5rem) → 0.75rem に半分化
   ※ 最後の li は HTML 側に stepsList-item クラスがないので .stepsList > li で当てる
   ========================================================================== */
.section-stepsFromVoteToOrder .stepsList { margin-top: 0; margin-bottom: 0; }
.section-stepsFromVoteToOrder .stepsList > li > h4,
.section-stepsFromVoteToOrder .stepsList > li > p { margin-top: 0; margin-bottom: 0; }
.section-stepsFromVoteToOrder .stepsList > li { margin-bottom: .75rem; }
.section-stepsFromVoteToOrder .stepsList > li:last-child { margin-bottom: 0; }

/* ==========================================================================
   home_v3 ranking ページ専用（player.html / index.html 共通）
   - 球団切替タブ（rb26-team-tabs）
   - 球団別ランキング表示エリア（rb26-ranking-team）
   - 6位以下リスト（rb26-rank-tail-block）
   - フッターCTA（rb26-rank-cta-footer）
   ========================================================================== */
.rb26-ranking-wrap {
  background: #f7f4ea;
  padding: 0 0 3rem;
}
.rb26-ranking-wrap-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- 球団切替タブ --- */
.rb26-team-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 200px));
  justify-content: center;
  gap: 0;
  padding: 2rem 0 .5rem;
}
.rb26-team-tabs .tab-btn {
  background: transparent;
  border: none;
  color: #1a1a1a;
  padding: .4rem .3rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  text-align: center;
  line-height: 1;
  outline: none;
  font-family: inherit;
  position: relative;
}
.rb26-team-tabs .tab-btn .tab-en { display: none; }
.rb26-team-tabs .tab-btn .tab-jp { display: none; }
.rb26-team-tabs .tab-btn:hover .tab-logo { opacity: .8; }
.rb26-team-tabs .tab-btn.is-active .tab-logo { opacity: 1; }

@media (max-width: 600px) {
  .rb26-team-tabs { gap: .35rem; padding: .6rem 0 .25rem; }
  .rb26-team-tabs .tab-btn { padding: .3rem .2rem .4rem; }
}

/* --- 球団別ランキング表示エリア --- */
.rb26-ranking-team { display: none; }
.rb26-ranking-team.is-active { display: block; }

.rb26-ranking-team-head {
  color: #fff;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.rb26-ranking-team-head.is-fighters { background: #006298; }
.rb26-ranking-team-head.is-buffaloes { background: #1f2348; color: #ba9f53; }
.rb26-ranking-team-head.is-hawks { background: #fdd000; color: #1a1a1a; }
.rb26-ranking-team-head.is-marines { background: #1a1a1a; }
.rb26-ranking-team-head .h-team {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-d3);
  letter-spacing: .12em;
  line-height: 1;
}
.rb26-ranking-team-head .h-meta {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-lg);
  letter-spacing: .08em;
  opacity: .95;
  font-weight: 500;
}

@media (max-width: 600px) {
  .rb26-ranking-team-head { padding: .8rem 1rem; margin: 1rem 0 .8rem; }
  .rb26-ranking-team-head .h-team { font-size: var(--fs-xl); }
  .rb26-ranking-team-head .h-meta { font-size: var(--fs-md); }
}

/* --- 6〜10位リスト --- */
.rb26-rank-tail-block {
  background: #fff;
  padding: 1.5rem;
  margin-top: 1rem;
  border: 1px solid #e0d8be;
}
.rb26-rank-tail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: -1.5rem -1.5rem 1rem;
  padding: 1rem 1.5rem;
  border-bottom: none;
  gap: .5rem;
  flex-wrap: wrap;
  color: #fff;
}
@media (max-width: 600px) {
  .rb26-rank-tail-head {
    margin: -1rem -1rem .8rem;
    padding: .8rem 1rem;
  }
}
.rb26-rank-tail-head .tail-ttl {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: .06em;
  color: inherit;
}
.rb26-rank-tail-head .tail-en {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-md);
  letter-spacing: .25em;
  color: rgba(255, 255, 255, .7);
}
.rb26-ranking-team[data-team="fighters"] .rb26-rank-tail-head { background: #006298; }
.rb26-ranking-team[data-team="buffaloes"] .rb26-rank-tail-head { background: #1f2348; color: #ba9f53; }
.rb26-ranking-team[data-team="buffaloes"] .rb26-rank-tail-head .tail-en { color: rgba(186, 159, 83, .7); }
.rb26-ranking-team[data-team="marines"] .rb26-rank-tail-head { background: #1a1a1a; }
.rb26-rank-tail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
@media (max-width: 600px) {
  .rb26-rank-tail-list { grid-template-columns: 1fr; gap: .55rem; }
  .rb26-rank-tail-block { padding: 1rem; }
}
.rb26-rank-tail-list li {
  display: grid;
  grid-template-columns: 44px 70px 1fr;
  gap: .7rem;
  align-items: center;
  padding: .55rem .7rem;
  background: #faf7eb;
  border: 1px solid #e8dfbe;
}
.rb26-rank-tail-list .rl-rank {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  line-height: 1;
  letter-spacing: .04em;
}
.rb26-rank-tail-list .rl-photo {
  width: 70px;
  height: auto;
  max-width: 100%;
  background: #f0ead9;
  display: block;
  object-fit: contain;
}
.rb26-rank-tail-list .rl-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
.rb26-rank-tail-list .rl-meta {
  font-size: var(--fs-md);
  color: #555;
  margin-top: .3rem;
  letter-spacing: .05em;
}
@media (max-width: 600px) {
  .rb26-rank-tail-list li { grid-template-columns: 38px 60px 1fr; gap: .6rem; padding: .5rem .6rem; }
  .rb26-rank-tail-list .rl-photo { width: 60px; }
  .rb26-rank-tail-list .rl-name { font-size: var(--fs-lg); }
  .rb26-rank-tail-list .rl-meta { font-size: var(--fs-sm); }
}

/* --- フッター CTA --- */
.rb26-rank-cta-footer {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.rb26-rank-cta-footer .cta-link {
  display: block;
  text-align: center;
  padding: 1.2rem 1rem;
  border: 2px solid #1a1a1a;
  border-radius: 50rem;
  color: #1a1a1a;
  text-decoration: none;
  background: #fff;
  transition: all .15s ease;
  line-height: 1.2;
}
.rb26-rank-cta-footer .cta-link.is-primary {
  background: #e02229;
  border-color: #e02229;
  color: #fff;
}
.rb26-rank-cta-footer .cta-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
}
.rb26-rank-cta-footer .cta-en { display: none; }
.rb26-rank-cta-footer .cta-jp {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .05em;
}
@media (max-width: 600px) {
  .rb26-rank-cta-footer { grid-template-columns: 1fr; gap: .6rem; margin-top: 1.5rem; }
  .rb26-rank-cta-footer .cta-link { padding: .9rem; }
  .rb26-rank-cta-footer .cta-jp { font-size: var(--fs-md); }
}

/* --- ranking ページ用：ランキング説明（球団タブの上） --- */
.rb26-ranking-intro {
  text-align: center;
  padding: 1.8rem 1rem .6rem;
}
.rb26-ranking-intro .ri-main {
  font-size: var(--fs-d3);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 .7rem;
  line-height: 1.5;
}
.rb26-ranking-intro .ri-main strong { color: #ba9f53; }
.rb26-ranking-intro .ri-cheer {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #ba9f53;
  margin: 0;
  letter-spacing: .04em;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .rb26-ranking-intro { padding: 1.2rem .5rem .3rem; }
  .rb26-ranking-intro .ri-main { font-size: var(--fs-lg); }
  .rb26-ranking-intro .ri-cheer { font-size: var(--fs-md); }
}

/* --- ranking ページ用：投票済みバッジ --- */
.rb26-vote-status {
  text-align: center;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px dashed #999;
  margin: 1rem 0 0;
  font-size: var(--fs-md);
  color: #555;
}
.rb26-vote-status.is-voted {
  background: #042a5b;
  color: #fff;
  border-color: #042a5b;
  font-weight: 700;
  letter-spacing: .05em;
}
.rb26-vote-status .vs-icon { margin-right: .35rem; }

/* --- ranking ページ用：「note」モック注釈 --- */
.rb26-ranking-note {
  text-align: center;
  font-size: var(--fs-xs);
  color: #999;
  margin-top: 1.2rem;
  letter-spacing: .05em;
}

/* --- 球団タブ：3列 / 2列 modifier（対象球団数に応じて） --- */
.rb26-team-tabs.is-three-cols { grid-template-columns: repeat(3, 1fr); }
.rb26-team-tabs.is-two-cols { grid-template-columns: repeat(2, minmax(0, 180px)); }
@media (max-width: 600px) {
  .rb26-team-tabs.is-two-cols { grid-template-columns: repeat(2, 1fr); }
}

/* --- 球団タブ：ロゴ画像 --- */
.rb26-team-tabs .tab-btn .tab-logo {
  display: block;
  height: 120px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  opacity: .5;
  transition: opacity .15s ease;
}
@media (max-width: 600px) {
  .rb26-team-tabs .tab-btn .tab-logo { height: 80px; }
}

/* --- 球団見出し：ロゴ画像とテキストの並び --- */
.rb26-ranking-team-head .h-team-wrap {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.rb26-ranking-team-head .h-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .rb26-ranking-team-head .h-logo { height: 34px; }
  .rb26-ranking-team-head .h-team-wrap { gap: .6rem; }
}

/* ==========================================================================
   TOP アーカイブ枠 — 年ボタン3個
   ========================================================================== */
.section-archives .archive-intro {
  color: #555;
  font-size: var(--fs-md);
  letter-spacing: .04em;
  margin: 0 0 1.2rem;
}
/* スマホで右（と左）にグレーの余白が出る件（8/15 トシ指摘）。

   原因は body の地色（#686868）が見えていること。
   `.container` は 576px 以上で max-width: 540px に固定されるので、
   横向きのスマホ（667・736・844・926px など）や小さめのタブレットでは
   中身が 540px の柱になり、その外側に body のグレーが出る。
   575px 以下は 100% 幅なので出ない＝「できることがある」の正体。

   PC の「グレーの地に載った1枚」は元からの意匠なので、そこは残す。
   スマホだけ全幅に戻す。

   ★横向きのスマホは 844×390・932×430 のように幅が 768px を超えるので、
     幅の区切りだけでは拾えない。画面の「高さ」で判定する。
     縦向きのタブレット（768×1024）や普通のPCは高さがあるので対象外。 */
@media (min-width: 576px) and (max-width: 767.98px),
       (max-width: 1024px) and (max-height: 500px) {
  .container {
    max-width: none;
  }
}

/* もう一つの経路：スクロールバーの溝にグレーが出る（8/17 トシのスクショで判明）。

   縦向き 430px でも右端に約5pxのグレーが残っていた。中身のはみ出しではない
   （scrollTo(200,0) しても scrollX は 0 のまま＝横スクロールは無い）。正体は
     innerWidth 435 − clientWidth 430 ＝ 5px
   のスクロールバーの取り分で、そこにキャンバスの地色が出ている。
   キャンバスの色は html が透明なら body から引き継がれるので、body のグレーが露出する。

   html に白を指定してこの引き継ぎを断つ。body の箱そのものは今までどおり
   グレーのままなので、PC の「グレーの地に載った1枚」は変わらない。 */
@media (max-width: 767.98px), (max-width: 1024px) and (max-height: 500px) {
  html {
    background-color: #fff;
  }
}

/* 「THE REVIEW BOOK アーカイブ」の帯は黒にする（8/15 トシ指定：全ページ共通）。
   bg-npb-b-main（#000121）は商品紹介の見出し帯などにも使われているので、
   クラス自体は書き換えずアーカイブの節だけに効かせる。 */
.section-archives h3.bg-npb-b-main {
  background-color: #000;
}

.archive-year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 200px));
  gap: 1rem;
  justify-content: center;
  padding: 0 1rem 2rem;
}
.archive-year-grid--single {
  grid-template-columns: minmax(0, 200px);
}
/* TOP のカードだけ囲みの罫線あり（8/15 トシ指定）。
   チームページはカードに表紙サムネが載るので罫線なしで形が分かるが、
   TOP は年号と SEASON だけなので、枠が無いと押せる場所に見えない。 */
.archive-year-grid--framed .archive-year-btn {
  border: 2px solid #1a1a1a;
}

/* 投票: クレジット掲載名入力 */
.rb26-credit-box {
  max-width: 640px;
  margin: 2rem auto 1rem;
  padding: 1.4rem 1.6rem;
  background: #fff;
  border: 1px solid #d4c89a;
  text-align: left;
}
.rb26-credit-box label {
  display: block;
  font-weight: bold;
  font-size: var(--fs-sm);
  margin-bottom: .6rem;
}
.rb26-credit-box .req {
  color: #c1272d;
  font-size: var(--fs-xs);
  margin-left: .5rem;
}
.rb26-credit-box input {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .9rem;
  font-size: var(--fs-md);
  border: 1px solid #b9b09a;
  border-radius: 3px;
  background: #fffdf6;
}
.rb26-credit-box input:focus {
  outline: 2px solid #ba9f53;
  border-color: #ba9f53;
}
.rb26-credit-box .note {
  font-size: var(--fs-xs);
  color: #888;
  line-height: 1.8;
  margin: .7rem 0 0;
}
.archive-year-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 8/13 トシ指定：数字の上の余白を下と同じに */
  padding: 1.4rem 0;
  overflow: hidden;
  /* 8/15 トシ指定：濃いグレーの地も囲みの罫線も無し。表紙画像を主役にして白地に置く */
  background: transparent;
  color: #000;
  text-decoration: none;
  border: none;
  transition: all .15s ease;
}
.archive-year-btn .ay-cover {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 1rem;
}
.archive-year-btn .ay-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ホバーは「金地に白文字」だったが、地も罫線も無くしたことで
   白地に白文字＝SEASON が消える状態になった（8/15）。
   平らな見た目に合わせて、持ち上げと年号の色替えだけにする */
.archive-year-btn:hover {
  background: transparent;
  text-decoration: none;
  transform: translateY(-2px);
}
.archive-year-btn:hover .ay-en { color: #ba9f53; }
.archive-year-btn .ay-en {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-d2);
  letter-spacing: .1em;
  line-height: 1;
  /* 8/15 トシ指定：年号は黒 */
  color: #000;
}
.archive-year-btn .ay-label {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-md);
  letter-spacing: .3em;
  color: #ba9f53;
  /* 8/13 トシ指定：数字との間を半分に（.3rem → .15rem） */
  margin-top: .15rem;
}
@media (max-width: 575px) {
  /* 8/15 トシ指定：スマホは縦に並べる。
     3列だと1枚あたり約100px で表紙が判別できなかった。
     1列にして幅は 280px までに抑える（画面いっぱいだと表紙が大きすぎる） */
  .archive-year-grid {
    grid-template-columns: minmax(0, 280px);
    gap: 1.2rem;
    padding: 0 1rem 1.5rem;
  }
  .archive-year-btn { padding: .9rem 0; }
  .archive-year-btn .ay-cover { margin-bottom: .7rem; }
  /* 3列だった頃は1枚 約100px 幅だったので文字を落としていた。
     縦1列（280px幅）になって小さすぎたので戻す（8/15 トシ指摘）。
     PC の 38.4px / 16px に対し、カード幅が 200px→280px なので
     年号は 32px あたりが釣り合う。ARCHIVE は PC と同じ 16px・字間も同じ */
  .archive-year-btn .ay-en { font-size: 2rem; }
  .archive-year-btn .ay-label { font-size: 1rem; letter-spacing: .3em; }
}

/* ==========================================================================
   ARCHIVE ページ — 年別・縦一覧
   ========================================================================== */
.archive-header {
  background: #1a1a1a;
  color: #fff;
  /* 8/13 トシ指定：さらに80%へ（1.8rem → 1rem） */
  padding: 1rem 1.5rem;
  text-align: center;
  border-top: 4px solid #c1272d;
  border-bottom: 4px solid #c1272d;
}
.archive-header .ah-en {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-d1);
  letter-spacing: .12em;
  color: #ba9f53;
  line-height: 1;
}
.archive-header .ah-jp {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .1em;
  margin-top: .5rem;
}
.archive-header .ah-sub {
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, .8);
  margin-top: .8rem;
}
@media (max-width: 575px) {
  .archive-header { padding: 2rem 1rem; }
  .archive-header .ah-en { font-size: var(--fs-d2); }
  .archive-header .ah-jp { font-size: var(--fs-md); }
  .archive-header .ah-sub { font-size: var(--fs-sm); }
}

.archive-team-block {
  /* 8/13 トシ指定：帯の上の余白を2倍に（前ブロックの下40px＋自分の上40px）。
     先頭の fighters だけはロゴエリアに密着させる（同日の別指定） */
  padding: 2.5rem 0;
  border-bottom: 1px solid #e0d8be;
}
.archive-team-block.is-fighters {
  padding-top: 0;
}
.archive-team-block:last-child { border-bottom: none; }
.archive-team-block .atb-head {
  display: flex;
  align-items: stretch;
  color: #fff;
  margin-bottom: 3rem;
  overflow: hidden;
}
.archive-team-block .atb-head .atb-logo {
  height: 90px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  padding: 0 1.6rem;
  box-sizing: content-box;
  display: block;
  margin: -.6rem 0;
}
.archive-team-block .atb-head .atb-team {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 8/13 トシ指定：高さを1.5倍に（0.5rem → 1.2rem） */
  padding: 1.2rem 1.5rem;
  font-size: 1.625rem; /* 8/13 トシ指定: 26px */
  font-weight: 700;
  letter-spacing: .06em;
}
.archive-team-block.is-fighters .atb-head .atb-team { background: #006298; }
/* 8/18 トシ指摘「チームカラーとちょっと違う」。サイト共通のバファローズ色は
   #000121（.bg-npb-b-main ＝ チームページの帯と同じ）。ここだけ #1f2348 という
   別の紺が入っていたので揃えた。 */
.archive-team-block.is-buffaloes .atb-head .atb-team { background: #000121; }
.archive-team-block.is-hawks .atb-head .atb-team { background: #fdd000; color: #1a1a1a; }
.archive-team-block.is-marines .atb-head .atb-team { background: #1a1a1a; }
@media (max-width: 575px) {
  .archive-team-block .atb-head .atb-logo { height: 40px; padding: .5rem 1rem; margin: 0; }
  .archive-team-block .atb-head .atb-team { padding: .8rem 1rem; font-size: 1.5rem; } /* スマホは24px（8/15。8/13は26px） */
}

.archive-cover-wrap {
  max-width: 480px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.archive-cover-wrap img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.archive-cover-wrap .cover-caption {
  text-align: center;
  font-size: var(--fs-sm);
  color: #555;
  margin-top: .8rem;
  letter-spacing: .05em;
}

/* ==========================================================================
   ARCHIVE 年別ページ — メイン画像 + 推し選手バージョン5枚
   ========================================================================== */
.archive-main-cover {
  max-width: 480px;
  margin: 0 auto 2.5rem;
  padding: 0 1rem;
  text-align: center;
}
.archive-main-cover img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.archive-main-cover .amc-caption {
  margin-top: .8rem;
  font-size: var(--fs-md);
  color: #555;
  letter-spacing: .05em;
}

.archive-player-covers {
  padding: 0 1rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.archive-player-covers .apc-heading {
  text-align: center;
  font-size: var(--fs-xl); /* PC 24px（8/13 トシ確認） */
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1.4rem;
  letter-spacing: .06em;
  padding-bottom: .7rem;
  /* 8/13 トシ指定：罫線は黒 */
  border-bottom: 2px solid #1a1a1a;
  display: inline-block;
  width: 100%;
}
.archive-player-covers .apc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: center;
}
.archive-player-covers .apc-item {
  position: relative;
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  max-width: 180px;
  aspect-ratio: 210 / 297;
  background: #ccc;
  /* 8/13 トシ指定：影なし */
  box-shadow: none;
}
.archive-player-covers .apc-item img { display: none; }
@media (max-width: 767px) {
  .archive-player-covers .apc-grid { gap: 1rem; }
  .archive-player-covers .apc-item { flex: 0 0 calc(33.333% - .7rem); max-width: 200px; }
}
@media (max-width: 575px) {
  .archive-main-cover { max-width: 90%; margin-bottom: 2rem; }
  .archive-player-covers .apc-grid { gap: .8rem; }
  .archive-player-covers .apc-item { flex: 0 0 calc(50% - .5rem); max-width: none; }
  .archive-player-covers .apc-heading { font-size: 1.3125rem; } /* スマホ 21px（8/13 トシ指定） */
}

/* ==========================================================================
   ARCHIVE 年別ページ — 推し選手 総選挙 全ランキング（リスト）
   ========================================================================== */
.archive-ranking {
  max-width: 640px;
  margin: 4.5rem auto 0;
  padding: 0 1rem;
}
.archive-ranking .ar-heading {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1.2rem;
  letter-spacing: .06em;
  padding-bottom: .7rem;
  /* 8/13 トシ指定：罫線は黒 */
  border-bottom: 2px solid #1a1a1a;
}
.archive-ranking .ar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #e0d8be;
}
.archive-ranking .ar-item {
  display: grid;
  grid-template-columns: 3.2rem 3rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1.2rem;
  border-bottom: 1px solid #f0ead9;
}
.archive-ranking .ar-item:last-child { border-bottom: none; }
.archive-ranking .ar-rank {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: #ba9f53;
  text-align: center;
}
.archive-ranking .ar-item.r1 .ar-rank { color: #c1272d; }
.archive-ranking .ar-item.r2 .ar-rank { color: #ad9544; }
.archive-ranking .ar-item.r3 .ar-rank { color: #c47a32; }
.archive-ranking .ar-num {
  color: #999;
  font-size: var(--fs-md);
  letter-spacing: .05em;
  text-align: center;
}
.archive-ranking .ar-name {
  font-weight: 700;
  color: #1a1a1a;
  font-size: var(--fs-lg);
  letter-spacing: .03em;
}
.archive-ranking .ar-empty {
  text-align: center;
  padding: 1.5rem;
  color: #999;
  background: #fff;
  border: 1px solid #e0d8be;
  margin: 0;
}
@media (max-width: 575px) {
  .archive-ranking .ar-item { padding: .7rem 1rem; grid-template-columns: 2.6rem 2.4rem 1fr; gap: .6rem; }
  .archive-ranking .ar-rank { font-size: var(--fs-md); }
  .archive-ranking .ar-num { font-size: var(--fs-sm); }
}

/* ==========================================================================
   ARCHIVE 年別ページ — 見出し順序反転 & 4球団ナビ
   ========================================================================== */
/* jp を主役に、en を控えめに */
.archive-header .ah-jp {
  font-size: var(--fs-d2);
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: 0;
}
.archive-header .ah-en {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-lg);
  letter-spacing: .25em;
  color: #ba9f53;
  line-height: 1;
  margin-top: .6rem;
}
@media (max-width: 575px) {
  .archive-header .ah-jp { font-size: var(--fs-xl); }
  .archive-header .ah-en { font-size: var(--fs-md); }
}

/* 4球団アンカーナビ */
.archive-team-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  /* 8/13 トシ指定：下のパディングは無し */
  padding: 1.25rem 1rem 0;
  background: #fff;
  max-width: 700px;
  margin: 0 auto;
}
.archive-team-nav .atn-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem;
  background: transparent;
  text-decoration: none;
  transition: all .15s ease;
}
.archive-team-nav .atn-item img {
  height: 100px;
  width: auto;
  object-fit: contain;
  display: block;
}
.archive-team-nav .atn-item:hover { transform: translateY(-2px); opacity: .7; }
@media (max-width: 575px) {
  .archive-team-nav { gap: 1rem; padding: 1rem .8rem; }
  .archive-team-nav .atn-item img { height: 68px; }
}

/* ==========================================================================
   HAWKS（黄色）背景の上のテキストは黒に統一（白文字は読みにくいため）
   ========================================================================== */
.bg-npb-h-main.text-white,
.bg-npb-h-main .text-white,
.bg-npb-h-sub.text-white,
.bg-npb-h-sub .text-white {
  color: #1a1a1a !important;
}

/* HAWKS スペシャルアイテムの内容 セクションのみ：黄色背景上の白文字を黒に（bg-gold 上の白なども対象） */
.section-specialContents .bg-npb-h-main .text-white,
.section-specialContents .bg-gold.text-white,
.section-specialContents .bg-gold .text-white {
  color: #1a1a1a !important;
}
/* ただし黒背景 (bg-npb-h-ttl) の中は白のまま維持 */
.section-specialContents .bg-npb-h-ttl.text-white,
.section-specialContents .bg-npb-h-ttl .text-white {
  color: #fff !important;
}

/* 球団別アーカイブページ内 他年切替リンク */
.archive-header .archive-year-switch {
  margin-top: 1rem;
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, .85);
  letter-spacing: .04em;
}
.archive-header .archive-year-switch .ay-switch {
  color: #ba9f53;
  font-weight: 700;
  text-decoration: none;
  margin: 0 .3rem;
  padding: .15rem .6rem;
  border: 1px solid rgba(186, 159, 83, .5);
  transition: all .15s ease;
}
.archive-header .archive-year-switch .ay-switch:hover {
  background: #ba9f53;
  color: #1a1a1a;
}

/* vote token-bar 内の変更不可注意 */
.rb26-token-bar .tb-caution {
  display: inline-block;
  margin-left: 1rem;
  padding: .2rem .6rem;
  background: #c1272d;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .05em;
  border-radius: 3px;
}
@media (max-width: 575px) {
  .rb26-token-bar .tb-caution {
    display: block;
    margin: .6rem auto 0;
    text-align: center;
    max-width: fit-content;
  }
}

/* ==========================================================================
   ARCHIVE ページ — 特典ステッカーシート
   ========================================================================== */
.archive-sticker {
  max-width: 360px;
  margin: 2rem auto 0;
  padding: 0 1rem;
  text-align: center;
}
.archive-sticker .ast-heading {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1.2rem;
  letter-spacing: .06em;
  padding-bottom: .7rem;
  /* 8/13 トシ指定：PCは1行に（.archive-sticker の幅制限で折返していた） */
  white-space: nowrap;
  /* 8/13 トシ指定：罫線は黒 */
  border-bottom: 2px solid #1a1a1a;
  /* 8/14 トシ指定：下線の長さを他の見出しに合わせる。
     inline-block + min-width:60% だと文字幅までしか伸びず短く見えていた */
  display: block;
}
.archive-sticker img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
@media (max-width: 575px) {
  .archive-sticker { max-width: 90%; margin-top: 1.5rem; }
  .archive-sticker .ast-heading { font-size: 1.3125rem; } /* スマホ21px（8/15。それまで16px） */
}

/* ARCHIVE — TOP10ランキング 1つおき球団カラー20% */
.archive-team-block.is-fighters .ar-list .ar-item:nth-child(even) {
  background: rgba(0, 98, 152, .2);
}
.archive-team-block.is-buffaloes .ar-list .ar-item:nth-child(even) {
  /* 帯と同じく #000121 の20%（8/18 に #1f2348 から揃えた） */
  background: rgba(0, 1, 33, .2);
}
.archive-team-block.is-hawks .ar-list .ar-item:nth-child(even) {
  background: rgba(253, 208, 0, .2);
}
.archive-team-block.is-marines .ar-list .ar-item:nth-child(even) {
  background: rgba(26, 26, 26, .2);
}

/* ARCHIVE 球団専用ページ — 年切替タブ */
.archive-year-tabs {
  display: flex;
  justify-content: center;
  gap: .8rem;
  padding: 1.5rem 1rem;
  background: #f6f6f6;
  border-bottom: 1px solid #e0d8be;
  flex-wrap: wrap;
}
.archive-year-tabs .ay-tab-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.6rem;
  background: #fff;
  color: #1a1a1a;
  text-decoration: none;
  border: 2px solid #e0d8be;
  transition: all .15s ease;
  min-width: 120px;
}
.archive-year-tabs .ay-tab-btn:hover {
  border-color: #ba9f53;
  transform: translateY(-2px);
  text-decoration: none;
  color: #1a1a1a;
}
.archive-year-tabs .ay-tab-btn.is-active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.archive-year-tabs .ay-tab-en {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-d2);
  letter-spacing: .1em;
  line-height: 1;
}
.archive-year-tabs .ay-tab-label {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: .25em;
  color: #ba9f53;
  margin-top: .3rem;
}
.archive-year-tabs .ay-tab-btn.is-active .ay-tab-label { color: #ba9f53; }
@media (max-width: 575px) {
  .archive-year-tabs { padding: 1rem .8rem; gap: .5rem; }
  .archive-year-tabs .ay-tab-btn { padding: .7rem 1rem; min-width: 90px; }
  .archive-year-tabs .ay-tab-en { font-size: var(--fs-d3); }
  .archive-year-tabs .ay-tab-label { font-size: var(--fs-xs); letter-spacing: .18em; }
}

/* rb-cta ボタン（rb26-rank-block-head の右側に配置） */
.rb26-rank-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
}
.rb26-rank-block-head .rb-cta {
  display: inline-block;
  padding: .55rem 1.2rem;
  font-size: var(--fs-md);
  font-weight: 700;
  background: #e02229;
  color: #fff;
  text-decoration: none;
  border-radius: 50rem;
  letter-spacing: .04em;
  transition: all .15s ease;
}
.rb26-rank-block-head .rb-cta:hover {
  background: #c1272d;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .rb26-rank-block-head .rb-cta { font-size: var(--fs-sm); padding: .45rem 1rem; }
}

/* rb-cta 複数ボタン並列 */
.rb-cta-group {
  display: inline-flex;
  gap: .5rem;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .rb-cta-group { width: 100%; }
  .rb-cta-group .rb-cta { flex: 1; text-align: center; }
}

/* 5選手決定ブロックの crh-meta は素のリードに戻す */
#players-decided .crh-meta {
  background: transparent;
  border-left: none;
  font-size: var(--fs-md);
  font-weight: 400;
  color: #444;
  padding: 0 1rem;
  line-height: 1.8;
  max-width: 780px;
}

/* ヘッダーのロゴを一回り小さく（2026-08-01 トシ指定「85%に」）。
   いまの見た目の 85%＝ 80% × 0.85 = 68%。
   .w-80 は共通のユーティリティ（reviewbook-grid.css）で他でも使われているので
   そちらは触らず、ヘッダーの中だけを上書きする。
   このファイルを読むページ（index / ranking / vote 各種）で一律に効く。 */
.header-reviewbook .content.w-80 {
  width: 68%;
}

/* ---- レビューブック一覧のカード（2026-08-02 トシ指定）--------------------

   直した問題は2つ。
     ① 窮屈  ボタン2つが隙間ゼロで貼り付き、カードの境界も無かった
     ② どの球団のボタンか分かりにくい

   ②の元凶は「画像・球団名・ボタン」を束ねる枠が無かったこと。
   左右2列で並ぶと、球団名とボタンの距離と、カードとカードの距離が
   ほぼ同じになり、ボタンがどちらに属するのか目で追えなかった。
   **枠で囲って内側を詰め、カード同士は離す**——この対比が効く。

   一度ボタン自体にも球団名を出したが、**枠で囲った時点で所属が明確になったため
   冗長としてトシ判断で外した**（8/02）。同じ文言のリンクが8本並ぶこと自体は
   読み上げでの区別がつかないままなので、そこを直すなら
   ボタンの見た目を変えずに aria-label を足すのが筋。 */
.rb26-lineup-item {
  position: relative;
  margin-bottom: 2.5rem;
  /* p-3（16px）だと枠線と中身が近すぎる。枠を描くぶん内側を広げる */
  padding: 2rem !important;
}

/* **カードの見た目は擬似要素で描く。**col そのものに背景と枠線を付けると、
   隣り合う 2 枚が col の境界で**間隔ゼロのまま接する**（実測 0px）。
   枠線が無かった頃は見えていなかっただけで、元から接していた。
   左右だけ内側へ寄せることで、列の割り付け（col-lg-5 ＋ auto マージン）を
   崩さずに間隔を作れる。**margin で寄せると auto マージンが壊れる。** */
.rb26-lineup-item::before {
  content: "";
  position: absolute;
  inset: 0 0.75rem;
  z-index: 0;
  background: #fff;
  border: 1px solid #e5e0d4;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rb26-lineup-item > * {
  position: relative;
  z-index: 1;
}

/* 内側の詰め。カード同士の 2.5rem に対して、
   中身どうしは近づけて「1つの塊」に見せる */
.rb26-lineup-item > img.w-100 {
  padding-top: 0 !important;
  padding-bottom: 0.75rem !important;
}

.rb26-lineup-item > .reviewbook-detail-box-white {
  padding-top: 0.25rem !important;
  padding-bottom: 1rem !important;
}

/* **ボタン間の余白を戻す。**
   既存の `.reviewbook-detail-box-white ~ .col-12.mt-3 { margin-top: 0 }` が
   mt-3 を潰していて、金と赤が線1本で貼り付いていた。
   一覧のカードの中だけ、その打ち消しをさらに打ち消す。 */
.rb26-lineup-item .reviewbook-detail-box-white ~ .col-12.mt-3 {
  margin-top: 0.75rem !important;
}

/* 末尾の空 .col-12 は余白調整用。カードの内側では不要 */
.rb26-lineup-item > .col-12.p-0.mt-3:empty {
  display: none;
}

/* 2列に並ぶ幅では、列の間も開ける */
@media (min-width: 992px) {
  .rb26-lineup-item {
    margin-bottom: 3rem;
  }
}

/* スマホでは一覧カードを全幅に（8/13 トシ指摘「4チームのエリアが小さい」）。
   col-10 + offset-1 のままだと 299px しかなく、下のインフォメーション
   （col-12 = 359px）より 60px も痩せて見える。幅をインフォ側にそろえ、
   内側の余白も 2rem → 1rem に。枠は擬似要素なのでそのまま追従する。 */
@media (max-width: 767px) {
  .rb26-lineup-item {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem !important;
  }
}

/* 販売期間の帯（v1）。カウントダウンと違い数字の強調が無いので、
   全文をタイトルと同じサイズでそろえる（8/13 トシ指定） */
.rb26-sale-band .cd-event-deadline {
  font-size: var(--fs-xl);
}
@media screen and (max-width: 767px) {
  /* スマホは1行に収める（8/13 トシ指定）。18px のままだと2語で 387px あり
     375px 幅を超えて折り返すため、幅に追従するサイズへ。
     3.9vw ＝ 375px で約14.6px、320px の小型機でも約12.5px で収まる */
  .rb26-sale-band .cd-event {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.6em;
    flex-wrap: nowrap;
  }
  .rb26-sale-band .cd-event-title,
  .rb26-sale-band .cd-event-deadline {
    font-size: clamp(11px, 3.9vw, 15px);
    white-space: nowrap;
  }
}

/* 販売期間の帯はヘッダー直下に置き、スクロールしても画面上部に残り続ける
   （8/13 トシ指定）。sticky が効かない祖先（overflow）が現れたら壊れるので注意 */
.rb26-sale-band {
  position: sticky;
  /* ヘッダーが固定（既存仕様）なので、その下に貼り付く。0 にすると
     ヘッダーの裏へ潜って上 60px が隠れる（実測で発覚） */
  top: 60px;
  z-index: 60;
}

/* スマホの固定まわり（8/13 トシ指定）
   ・販売期間の帯は貼り付けない（流れて消える）
   ・代わりにヘッダーを貼り付ける */
@media screen and (max-width: 767px) {
  .rb26-sale-band {
    position: static;
  }
}

/* ★ヘッダーは常に最前面に置く（8/17 トシ指摘「帯がヘッダーの上を通り過ぎる」）。
   .header-contents 側が `z-index: 3 !important` を持っているのに対し、
   販売期間の帯は z-index: 60。スマホでは帯が static（流れて消える）なので、
   スクロールすると**帯がヘッダーの前を横切っていた。**

   同じ理由で、この上にあった「スマホではヘッダーを sticky に」という指定も
   `position: fixed !important` に負けて一度も効いていなかった（実測で判明）。
   ヘッダーは全幅で fixed のままなので、貼り付ける必要はない。
   z-index だけを帯より上に引き上げる。 */
.header-reviewbook.header-contents {
  z-index: 100 !important;
}

/* スペシャルアイテム 特典1のポスター画像（8/15 トシ指定）。
   縦長（770×1089 ＝ A判）に差し替わった球団は w-100 のままだと列の幅いっぱいに
   伸びて、高さが特典2・3の1.6倍になっていた。特典3と同じ
   「中央に置いて幅いっぱいにしない」見せ方にそろえる。

   ★幅ではなく高さで枠を決める。
     幅で 57% と決め打ちすると、まだ横長画像（866×609）の球団で
     262×184 まで縮んで逆に小さくなる。枠の高さを与えて
     「はみ出さない範囲で目一杯」にすれば、縦長でも横長でも
     特典2・3と同じ高さに収まり、差し替え時に手を入れずに済む。

   高さの根拠：特典3の画像（900×807 の PNG）は透明の余白を含み、
   中身は実測で縦 90.2%（58〜786px）しか使っていない。
     見せたい高さ = 0.902 × (枠幅 × 807/900) = 0.809 × 枠幅
   枠は padding: .5rem を持つので、比は 1 / 0.809 ≒ 1.236 とする。 */
.rb26-benefit-poster-box {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.236;
}
.rb26-benefit-poster {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* アーカイブ帯の見出し（8/13 トシ指定：21px） */
.section-archives > h3 {
  font-size: 1.3125rem;
}

/* ============================================================================
   アーカイブ：年の切り替えは各球団ブロックの中でやる（8/13 トシ指定）

   タブの実体は「別の年ページの同じ球団へのアンカーリンク」。JS なしで、
   押すと archive/2024/index.html#fighters のように同じ球団の位置で開くので、
   ブロックの中で年が切り替わったように見える。
   ロッテは2025年からの発売なのでタブが1つしか出ない（構造がそのまま答えになる）。
   ============================================================================ */

/* タブは球団色の帯（.atb-team）の中・右端に置く。
   名前のセンタリングを崩さないよう絶対配置にしてある */
.archive-team-block .atb-head .atb-team {
  position: relative;
}
.atb-years {
  position: absolute;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  gap: 0.4rem;
}
@media (max-width: 640px) {
  /* 狭い画面では名前の下の行に降ろす */
  .archive-team-block .atb-head .atb-team {
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.8rem 1rem;
  }
  .atb-years {
    position: static;
    translate: none;
  }
}
.atb-years .ayt {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: #fff;
  font-family: 'League Gothic', 'Noto Sans JP', sans-serif;
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-decoration: none;
}
.atb-years .ayt:hover {
  background: rgba(255, 255, 255, 0.16);
}
.atb-years .ayt.is-current {
  background: #ba9f53;
  border-color: #ba9f53;
  color: #1a1a1a;
  font-weight: 600;
}

/* アンカー着地のとき、固定ヘッダーの下に頭が潜らないように */
.archive-team-block {
  scroll-margin-top: 76px;
}

/* ページ内アンカー（アーカイブの球団ロゴ等）はスライドで移動する（8/13 トシ指定）。

   ★html に直接ではなく .rb-smooth を介しているのは、年タブ（別ページの
     アンカーへ遷移）で開いた瞬間まで滑ってしまうため。ページを開いた時は
     その場に「切り替わった」ように瞬時に配置し、開いたあとのページ内
     クリックだけを滑らせる。クラスは読み込み後に JS が付ける。
   「視差効果を減らす」設定の人には即時ジャンプのままにする */
@media (prefers-reduced-motion: no-preference) {
  html.rb-smooth {
    scroll-behavior: smooth;
  }
}

/* ホークスの帯は黄色地なので、非選択タブの白文字・白枠が見えない（8/13 トシ指摘）。
   黒に反転する。選択中（ゴールド地に黒文字）は共通のままで読める */
.archive-team-block.is-hawks .atb-years .ayt {
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.5);
}
.archive-team-block.is-hawks .atb-years .ayt:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* 推し選手一覧の上の余白を、ステッカーシートの上余白（2rem）にそろえる（8/13）。
   総括本の一覧（1つ目）はブロック先頭なので対象外 */
.archive-player-covers + .archive-player-covers {
  margin-top: 2rem;
}

/* 「THE REVIEW BOOK」とは 等の説明文（8/13 トシ指定：スマホは 15px）。
   mt-3 の有無どちらの並びにも効かせる */
@media screen and (max-width: 767px) {
  p.p-2.p-md-0.text-left {
    font-size: 0.9375rem;
  }
}

/* .archive-sticker 配下の .apc-grid は .archive-player-covers .apc-grid とは別セレクタで
   flex が付いていなかった（block のまま3枚重なって見える不具合）。ここで明示する。
   figure のブラウザ既定マージン（margin: 1em 40px）もリセットしていなかった
   （左右40pxずつが effective width を圧迫し、73px まで潰れていた）。 */
.archive-sticker .apc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: center;
}
.archive-sticker .apc-item {
  margin: 0;
}

/* ステッカーシート＆A2ポスターの3枚組（8/14・2023年画像支給で構造変更）。
   .apc-item は 210:297（A4縦）固定なので、そのままだとステッカー（横長）と
   ポスターの実比率を潰す。ここだけ比率を外して実画像に合わせる。
   1枚目（ステッカー・横長）は2枚分の幅を取って主役に、
   2・3枚目（A2ポスター・縦）は残りを分け合う。 */
.archive-sticker .apc-grid {
  align-items: flex-start;
}
.archive-sticker .apc-item {
  aspect-ratio: auto;
  max-width: none;
  background: none;
}
.archive-sticker .apc-item img {
  width: 100%;
  height: auto;
  display: block;
}
.archive-sticker .apc-item--wide {
  flex: 1 1 100%;
}
/* PC・タブレットは3枚を1列に並べる（8/14 トシ指定）。
   .archive-sticker は元々1枚用に max-width: 360px だったので器ごと広げる。

   大きさは「高さ」でそろえる（8/14 トシ指定）。基準は推し選手カバーの表示高さで、
   あちらは max-width:180px × 実比率（297:420）＝ 約254px。
   幅を flex で分け合うと横長のステッカーだけ巨大になるため、
   高さを固定して幅は各画像の比率に任せる。 */
@media (min-width: 768px) {
  .archive-sticker {
    max-width: 1100px;
  }
  .archive-sticker .apc-grid {
    align-items: flex-end;
  }
  .archive-sticker .apc-item,
  .archive-sticker .apc-item--wide {
    flex: 0 0 auto;
    max-width: none;
  }
  /* 高さの基準（8/14 トシ指定：大きすぎたので約2/3）。
     幅は ステッカー1.42 : ポスター0.707 : 0.707 ＝ 高さの約2.5倍になるので、
     タブレット（内寸約643px）でも1行に収まる。上げるときは器の幅を超えないか確認。 */
  /* ポスターの高さ＝推し選手カバーの高さ（8/14 トシ指定）。
     カバーの高さは「5枚が器の幅を分け合った結果 × 比率1.414」で決まり、
     画面幅 768〜1068px の間で線形に変化し、それ以上は 255px で頭打ちになる。
       itemW = min(180px, (器幅 - 4×gap) / 5)
       高さ  = itemW × 1.414
     実測で 768px→169px / 1068px以上→255px。その傾きが 28.28vw - 47.4px。
     ★カバー側の max-width(180px) や gap(1.4rem) を変えたらこの式も引き直すこと。 */
  .archive-sticker {
    --rb-poster-h: clamp(169px, calc(28.28vw - 47.4px), 255px);
  }
  .archive-sticker .apc-item img {
    height: var(--rb-poster-h);
    width: auto;
  }
  /* ★ステッカーだけ小さくする（8/14 トシ指定）。
     実物はステッカーのほうがA2ポスターより小さいのに、高さをそろえると
     横長のぶん逆に大きく見える。ただし原寸比（約50%）だと小さすぎるので、
     見た目で差が分かる 72% にしてある。ポスター側の寸法は変えない。 */
  .archive-sticker .apc-item--wide img {
    height: calc(var(--rb-poster-h) * 0.72);
  }
}

/* 1枚だけの構成（ブックレット表紙）。高さを推し選手カバーにそろえる（8/14 トシ指定）。

   ★高さを直接指定してはいけない。推し選手カバーの高さは
     「5枚が器の幅を分け合った結果」で画面幅ごとに変わる（PC 254px / タブレット 169px）。
     固定値にすると片方で必ずずれる。
   そこで“5枚のうち1枚ぶんの幅”を同じ式で与える。画像の比率は同じ（297:420）なので、
   幅がそろえば高さも自動でそろう。 */
.apc-grid--single .apc-item,
.apc-grid--cover .apc-item {
  aspect-ratio: auto;
  background: none;
  /* 8/14 トシ指定：推し選手カバー1枚ぶんの 1.25 倍。
     2023の「ブックレット表紙」と 2024・2025の「総括本・球団バージョン」で共通。 */
  flex: 0 0 calc((100% - 4 * 1.4rem) / 5 * 1.25);
  max-width: 225px;
}
.apc-grid--single .apc-item img,
.apc-grid--cover .apc-item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  /* 推し選手カバーは3列（gap 1rem）。その 1.25 倍 */
  .apc-grid--single .apc-item,
  .apc-grid--cover .apc-item {
    flex: 0 0 calc((33.333% - .7rem) * 1.25);
    max-width: 250px;
  }
}
@media (max-width: 575px) {
  /* 同じく2列（gap .8rem） */
  .apc-grid--single .apc-item,
  .apc-grid--cover .apc-item {
    flex: 0 0 calc(50% - .5rem);
    max-width: none;
  }
}

/* 表紙一覧は既定で「画像が届くまでグレーの箱」を見せる作り（img は display:none）。
   実画像が入った年だけ .apc-grid--real を付けて解除する（8/14・2023年で使用）。
   2024・2025 はまだ仮画像なので、外すのは実物が届いてから。 */
.archive-player-covers .apc-grid--real .apc-item {
  aspect-ratio: auto;
  background: none;
}
.archive-player-covers .apc-grid--real .apc-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 2024・2025 のステッカーは1枚の <img> 直置き（2023 のように .apc-grid を持たない）。
   2023 のために器を 1100px へ広げた副作用で、width:100% が効いて巨大化していた
   （実測 1068×751px）。推し選手カバーと同じ高さにそろえる（8/14 トシ指定）。

   高さの式はポスターと同じ。カバーの高さは
     min(180px, (器幅 - 4×gap)/5) × 1.414 で決まり、
     768px→169px / 1068px以上→255px。その傾きが 28.28vw - 47.4px。
   ★2023 は .apc-grid 構造なのでこの指定の対象外（:not で除外している）。 */
@media (min-width: 768px) {
  .archive-sticker:not(:has(.apc-grid)) img {
    height: clamp(169px, calc(28.28vw - 47.4px), 255px);
    width: auto;
    margin-inline: auto;
  }
}

/* スマホではステッカーとポスターを 75% に縮める（8/15 トシ指定）。
   器（.archive-sticker）ごと縮めると見出しの罫線まで短くなるので画像側で絞る。
   2023 は3枚組（.apc-item）、2024・2025 は <img> 直置きで構造が違うため両方書く。

   ★ここは .apc-item--wide { flex: 1 1 100% } より後ろに置くこと。
     前に置くと同じ詳細度で負けて、ステッカーだけ全幅のまま残る。 */
@media (max-width: 767px) {
  .archive-sticker > img {
    width: 75%;
    margin-inline: auto;
  }
  /* nowrap は「PCで1行に」（8/13 トシ指定）のための指定。
     スマホで21pxにすると「ステッカーシート＆A2ポスター」が
     306pxの器に対して317px必要になりはみ出すので、ここでは折り返させる */
  .archive-sticker .ast-heading {
    white-space: normal;
  }
  .archive-sticker .apc-item,
  .archive-sticker .apc-item--wide {
    flex: 0 1 75%;
    max-width: 75%;
  }
}

/* アーカイブ1ページ化（8/14）。年の切り替えは球団ごとに独立。
   パネルは表示/非表示のみ。タブは <a> から <button> になったので、
   ボタンの既定スタイル（背景・枠・フォント）を打ち消す。 */
.atb-panel {
  display: none;
}
.atb-panel.is-active {
  display: block;
}
/* 年タブは別ページへの <a> だったが、1ページ化で <button> になった。
   ボタンの既定の見た目（枠・地色・システムフォント）だけ打ち消せば、
   色や形は上の .ayt の指定がそのまま効く */
.atb-years button.ayt {
  appearance: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

/* 文字と画像を選ばせない（8/17 トシ指定で入れ直し）。
   クラスは js/rb-no-copy.js が付ける＝JS を切っている人には普通に読める。

   ★入力欄だけは必ず戻すこと。ここを止めると注文番号やクレジット掲載名が
     入力できなくなる（旧実装が body 全体に onmousedown を掛けて壊していた箇所）。 */
.rb-no-copy body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* iOS の長押しメニュー */
}
.rb-no-copy input,
.rb-no-copy textarea,
.rb-no-copy select,
.rb-no-copy [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* 画像はドラッグでも持ち出せないようにする */
.rb-no-copy img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
/* ただしリンクやボタンの中の画像は押せないと困る */
.rb-no-copy a img,
.rb-no-copy button img,
.rb-no-copy label img {
  pointer-events: auto;
}

/* スマホ・タブレットのヘッダーロゴが小さい（8/17 トシ指摘）。
   実測 390px 幅で 117×19px しかなく、右側に120pxも空いていた。

   ロゴのリンクには .w-80（列の80%）が付いている。狭い画面ではそれを解いて
   列いっぱいに使い、列そのものも col-6 → 実質 col-8 相当まで広げる。
   「お問い合わせ」は ml-auto で右に寄っているので、押し出す心配はない。 */
@media (max-width: 1024px) {
  .header-reviewbook .col-6.col-md-3 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .header-reviewbook a.content.block.w-80 {
    width: 100%;
    /* 上限は「お問い合わせ」との間隔で決めた。240px だと 320px 幅の機種で
       間が 8px しか残らず詰まって見える（実測）。
       8/17 トシ指定「90%小さく」で 200px → 180px。 */
    max-width: 180px;
  }
}

/* ヘッダーの中身が上に寄っていた（8/17 トシ指摘）。
   .header-contents は height:60px（うち4pxは下の赤い罫）で固定されているが、
   中身は 50px しかなく上寄せだったため、黒い部分 56px の中で
   上8px / 下14px と天地が食い違っていた。

   中身の塊ごと中央に寄せる。ロゴもボタンも列の中では既に中央なので、
   これだけで両方そろう（ロゴ 上11/下11・ボタン 上15/下15）。 */
.header-reviewbook.header-contents {
  display: flex;
  align-items: center;
}
.header-reviewbook.header-contents > .container-fulid {
  width: 100%;
}

/* ページを開いた瞬間に中身が出る（8/17 トシ指定）。
   ふわっと現れて、少し下から上へ浮き上がる。最初の1回だけ。

   ★transform を掛けてよいのは .main-contents まで。
     .body-wrap に掛けると、その中の position:fixed のヘッダーが
     「祖先に transform があると fixed が効かなくなる」規則で崩れる。
     ヘッダーは別に、動きなしの淡い出現だけにしてある。

   JS は不要（CSS アニメーションは必ず走るので、途中で止まって
   真っ白のまま、という事故が起きない）。 */
@keyframes rb-intro-float {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rb-intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .main-contents {
    animation: rb-intro-float 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .header-reviewbook.header-contents {
    animation: rb-intro-fade 0.5s ease-out both;
  }
  /* フッターまで動かすと、開いた瞬間に画面外で無駄に動くだけなので触らない */
}

/* ホークスは球団カラーが黄（#fbb910）で、白文字がまったく読めない。
   帯は黒地に白文字、見出しは黒に置き換える（8/17 トシ指定・スクショ3枚）。
   対象は hawks のページだけ。他の3球団は球団カラーのまま。 */
.is-team-detail .bg-npb-h-main.about-ttl,
.is-team-detail header.bg-npb-h-ttl {
  background-color: #000 !important;
}
.is-team-detail .bg-npb-h-main.about-ttl,
.is-team-detail .bg-npb-h-main.about-ttl *,
.is-team-detail header.bg-npb-h-ttl,
.is-team-detail header.bg-npb-h-ttl * {
  color: #fff !important;
}
/* 「シーズン総括ブックレット『REVIEWページ』」など、球団色の見出しは黒に。
   ★これは**白地に載る見出し**の話。黒地の節（.bg-black の中）にも効いてしまい、
     「ファンと一緒に創る！」が黒地に黒で消えていた（8/27 トシ指摘・実測1.00:1）。
     黒地の中だけは除く。HTML 側もその見出しは text-white にしてある。 */
.is-team-detail h3.top-ttl.text-npb-h-main {
  color: #000 !important;
}
.is-team-detail .bg-black h3.top-ttl.text-npb-h-main {
  color: #fff !important;
}

/* 見出しの左右の赤い星をトル（8/17 トシ指定・ロッテのみ）。
   星は .crh-ttl の ::before / ::after で描いている。
   ★ロッテだけの指定にしてあるのは、v3 以降で日ハムとオリックスも
     同じ見出しを使うため（そちらは星を残す）。 */
.rb26-crh--nostar .crh-ttl::before,
.rb26-crh--nostar .crh-ttl::after {
  content: none;
}
.rb26-crh--nostar .crh-ttl {
  gap: 0;
}
/* 説明文のベタ塗りの枠もトル（8/17 トシ指定）。
   クリーム地（#fff8e1）と左の金の罫を外し、本文だけにする。 */
.rb26-crh--nostar .crh-meta {
  background: none;
  border-left: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ラインナップの選手名を一段小さく（8/17 トシ指定・ロッテのみ）。
   24px（--fs-xl）→ 18px（--fs-lg）。
   ★同じ部品（.rb26-rank-list-large）をランキングページも使っているので、
     ラインナップの器（.rb26-lineup）が付いているときだけに絞ってある。 */
.rb26-lineup .rb26-rank-list-large .rl-name {
  font-size: var(--fs-lg);
}
/* ポジションと背番号も一段下げる（8/17）。16px → 14px */
.rb26-lineup .rb26-rank-list-large .rl-meta {
  font-size: var(--fs-sm);
}

/* カードを90%にして、余ったぶんを左右の余白に回す（8/17 トシ指定）。
   列は 1fr のままなので、リスト自体を 90% にすれば
   カードは自動で 200px → 180px になり、左右に 5% ずつ余白が生まれる。
   （実測：箱の内寸 1050px → リスト 945px、左右に 52px ずつ） */
.rb26-lineup .rb26-rank-list-large {
  width: 90%;
  margin-inline: auto;
}
@media (max-width: 600px) {
  /* スマホは元から幅が足りないので、狭めない */
  .rb26-lineup .rb26-rank-list-large {
    width: 100%;
  }
}

/* ラインナップは1つの箱にまとめる（8/17 トシ指定）。
   推し選手5人と特別枠2人で箱を分けていたのをやめ、中で区切るだけにした。
   2つ目の見出しは箱の途中に立つので、上に余白と細い罫を持たせて段を作る。 */
.rb26-lineup .rb26-lineup-sep {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid #e0d8be;   /* 箱の枠と同じ色 */
}

/* 8/17：ラインナップの白い箱を一度なくしてみたが、トシ判断で戻した。
   外す場合は .rb26-lineup の background / border / padding を消すのに加えて、
   **見出しの margin: -1.5rem の打ち消しも必要**（でないと見出しだけ左右にはみ出す）。 */

/* ラインナップの見出しを中央に（8/17 トシ指定）。
   元は justify-content: space-between（左に題・右に英字やボタンを置く想定）だが、
   ラインナップには題しか入らないので左に寄っていた。 */
.rb26-lineup .rb26-rank-block-head {
  justify-content: center;
  text-align: center;
}

/* 見出しそのものを黒帯にする（8/17 トシ指定）。
   独立した区切り帯は不採用。題を黒地に載せて切り替わりを示す。 */
.rb26-crh--nostar .crh-ttl {
  display: block;
  background: #1a1a1a;
  color: #fff;
  padding: .9rem 1.2rem;
  margin: .3rem 0 1.2rem;
  line-height: 1.5;
}

/* 白い箱の外側の左右の余白を広げる（8/17 トシ指定）。
   節の横 padding 16px → 48px。箱が両側から32pxずつ内へ寄る。
   スマホは元から余裕がないので広げない。 */
.rb26-current-rank {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 600px) {
  .rb26-current-rank {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ============================================================================
   リーグ3連覇記念 特別セット（8/18）

   レギュラーシーズン優勝が条件の商品。7/24 に #v3set の枠だけ display:none で
   仕込んであったものを、**優勝前の「予告」段階**として起こす。

   予告を先に出すのは、通常版と2ヶ月ほど併売になるため。
   通常版の締切は12月10日、優勝が決まるのは10月前後。このセットには
   2026年版の総括本が含まれるので、**先に通常版を買った人が2冊持ちになる。**
   黙っていると「知っていたら待った」という苦情になるので、予告で先に知らせる。

   段階は3つ。
     予告 … いま。内容と注記だけ。価格・購入ボタンは出さない
     本番 … 優勝決定後。is-live を付けて価格と購入ボタンを出す
     撤収 … 逃した場合。#v3set を display:none に戻す
   ========================================================================== */
.rb26-v3set {
  /* 8/26：地の黒に去年の胴上げ写真を敷く（トシ支給 25douage.jpg）。
     ★黒を薄く重ねるだけでは足りない。白いユニフォームと客席が明るく、
       金色（#fdd000）の文字がその上で沈む。**下に #111 を敷いた上で黒を重ねる**。

     8/26 トシ「もう少し明るく」。同じ日に「3PEAT SPECIAL を外す」「品名を大きく」も
     入ったので、**小さい金文字が無くなり、明るくできる余地が生まれた**。
       画像側：飛んだ画素だけ軽く抑える（天井0.86・肩1.15＝見た目はほぼ元のまま）
       CSS側：黒 90% → 80%
       結果：写真の見えは 1.57倍明るい
     コントラスト（写真の一番明るい所での最悪値を実測）：
       白文字 4.7:1（基準4.5をクリア）
       金の品名 3.21:1 … 24px 太字＝「大きい文字」の基準3:1をクリア
       金の注意書きは小さいので、注意書きの後ろにだけ黒を重ねて確保している
     位置は center 35%＝胴上げの人が見出しの裏に来るあたり。
     ★写真を差し替えたら、同じようにハイライトを寝かせてから重ねる率を計算し直すこと。
       元画像をそのまま入れると金文字が沈む。 */
  background-color: #111;
  background-image:
    linear-gradient(rgba(0, 0, 0, .80), rgba(0, 0, 0, .80)),
    url(../img/rb26-hawks-v3-bg.jpg?v=20260826c);
  background-size: auto, cover;
  background-position: center, center 35%;
  background-repeat: repeat, no-repeat;
  border-top: 3px solid #fdd000;
  border-bottom: 3px solid #fdd000;
  padding: 2.8rem 1rem;
  text-align: center;
  color: #fff;
}
/* 8/27：支給画像が透過PNGになったため、絵の下の黒も外した。
   （以前は黒地で切り抜いた絵だったので、縁が浮かないよう塞いでいた） */
.rb26-v3set .v3-en {
  font-family: 'League Gothic', sans-serif;
  letter-spacing: .25em;
  color: #fdd000;
  font-size: var(--fs-sm);
}
/* 8/18 トシ指定「3連覇特別企画！ を前面で推す感じ」。
   題より先に、企画そのものの名札を立てる。金地に黒で、ページ内で一番強い面にする。 */
.rb26-v3set .v3-flag {
  display: inline-block;
  margin: .7rem 0 .2rem;
  padding: .34rem 1.1rem;
  background: #fdd000;
  color: #111;
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: .08em;
  line-height: 1.4;
}
/* 8/26 トシ「商品名をもっと目立たせて！！」。
   24〜28.8px（--fs-d3）だと品名の24pxとほぼ同じで、主役に見えていなかった。
   ページで一番大きい字にする。数字は --fs-num（56-96px）の一段下あたり。
   ★スマホで折り返せるよう、HTML に <br class="xxs-br"> が入っている。
     min は 1.75rem（28px）。**320px 端末（iPhone SE）で「リーグ3連覇達成記念」が
     使える幅 288px に収まる上限**がここ。1.9rem にすると 295px になって行が割れる。 */
/* 8/26：名札が「ペナントレース3連覇特別企画」に伸びて、320px 端末で2行に折れた。
   金の面が2段になると名札に見えないので、狭い画面だけ字と余白を詰めて1行に戻す。
   （14文字 × 18px ＋ 字間 .08em ＋ 左右余白 で 288px をわずかに超えていた） */
@media (max-width: 374.98px) {
  .rb26-v3set .v3-flag {
    padding: .3rem .8rem;
    font-size: var(--fs-md);
    letter-spacing: .03em;
  }
}

.rb26-v3set .v3-ttl {
  font-weight: 800;
  font-size: clamp(1.75rem, 1.05rem + 3.6vw, 3.4rem);
  line-height: 1.25;
  letter-spacing: .01em;
  padding: .1rem 0 0;
}
/* 「豪華BOX」だけ金にして着地点を作る。ここが商品名の山になる */
.rb26-v3set .v3-ttl-em {
  color: #fdd000;
}
/* 内訳が3つに増えたので、小見出しの前を少し空けて塊を分ける */
.rb26-v3set .v3-sub + .v3-list { margin-bottom: 1.4rem; }
.rb26-v3set .v3-list li b { color: #fdd000; font-weight: 700; }
/* 正式名称の前半（球団と年）。題の上に置き、上下2段で読むと正式名称になる。
   8/26 トシ「商品名をもっと目立たせて」で、ここも本文サイズから見出し級に上げた。 */
.rb26-v3set .v3-name {
  margin: 1.1rem auto .1rem;
  max-width: 34em;
  color: #fff;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.45;
}
/* 「発売予定」は題より弱く。確定した話ではないことを字面で示す */
.rb26-v3set .v3-lead {
  color: #fdd000;
  font-size: var(--fs-md);
  font-weight: 600;
  margin: .8rem 0 0;
}
.rb26-v3set .v3-body {
  max-width: 640px;
  margin: 1.8rem auto 0;
  text-align: left;
}
.rb26-v3set .v3-sub {
  color: #fdd000;
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  font-weight: 600;
  border-bottom: 1px solid rgba(253, 208, 0, .4);
  padding-bottom: .4rem;
  margin-bottom: .8rem;
}
.rb26-v3set .v3-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
}
.rb26-v3set .v3-list li {
  font-size: var(--fs-md);
  line-height: 1.8;
  padding-left: 1.1em;
  position: relative;
}
.rb26-v3set .v3-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #fdd000;
}
/* 8/26 トシ指定「他のパートの注釈と同じフォントに」。
   基準は .items-sample-caution（reviewbook.css）＝ --fs-sm ／ 行送り 1.6rem ／ ウェイト300。
   ここだけ --fs-xs で細く小さかったので合わせる。地が黒なので色だけは明るいまま。 */
.rb26-v3set .v3-note {
  max-width: 640px;
  margin: 1.6rem auto 0;
  text-align: left;
  color: #b9b9b9;
  /* 背景を明るくしたぶん、**小さい文字の後ろだけ**黒を足して読めるようにする。
     ここには金色の注意書き（.is-warn）が入るので、写真がそのまま透けると沈む。 */
  background: rgba(0, 0, 0, .5);
  padding: .9rem 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.6rem;
  font-weight: 300;
}
.rb26-v3set .v3-note p {
  margin: 0;
  /* ★親に指定しても効かない。グローバルの `p { font-size: var(--fs-md) }` が
     継承値に勝つので、p 自身に当てる必要がある（8/26 実測）。 */
  font-size: var(--fs-sm);
  line-height: 1.6rem;
  font-weight: 300;
}
/* 二重購入の注意だけは色を上げて拾わせる */
.rb26-v3set .v3-note .is-warn {
  color: #fdd000;
}
@media (max-width: 600px) {
  .rb26-v3set { padding: 2rem 1rem; }
  .rb26-v3set .v3-body,
  .rb26-v3set .v3-note { padding: 0 .2rem; }
}
/* 基準の .items-sample-caution はスマホで --fs-xs ／ 行送り1.08rem に落ちる。
   同じ見え方にするため、こちらも同じ幅・同じ値で落とす（8/26 実測で合わせた）。
   ★ここも p 自身に当てないと、グローバルの p 指定に負ける。 */
@media screen and (max-width: 767px) {
  .rb26-v3set .v3-note p {
    /* ★!important が要る。同じ幅で `p { line-height: 1.4rem !important }` が
       reviewbook.css に居て、詳細度では勝てない（基準の .items-sample-caution も
       同じ理由で !important を付けている）。8/26 に実測して判明。 */
    font-size: var(--fs-xs) !important;
    line-height: 1.08rem !important;
  }
}

/* --- 3連覇セット【優勝決定後の版】だけの追加分（8/18） -------------------
   予告版との違いは、絵と価格と購入ボタンが載ること。
   予告版には .is-live を付けないので、ここは効かない。 */
/* 主役＝スリーブケースと3冊。幅いっぱいに近い大きさで見せる */
.rb26-v3set.is-live .v3-hero {
  max-width: 900px;
  margin: 2.4rem auto 0;
}
/* ★この指定より後ろに .rb26-shot-placeholder の 4/3 があり、
   詳細度が同じだと後ろが勝つ。器を1つ挟んで詳細度を上げてある。 */
.rb26-v3set.is-live .v3-hero .rb26-shot-placeholder.v3-hero-shot {
  aspect-ratio: 16 / 9;
  font-size: var(--fs-sm);
}

/* 胴上げポスター3枚。A2 は縦（420:594）。3枚並ぶこと自体が
   「同じ光景が3回あった」という意味なので、狭い画面でも3列を崩さない */
.rb26-v3set.is-live .v3-posters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 900px;
  margin: 3rem auto 0;
}
.rb26-v3set.is-live .v3-posters .v3-poster .rb26-shot-placeholder {
  aspect-ratio: 420 / 594;
}
.rb26-v3set.is-live .v3-year {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-d3);
  letter-spacing: .1em;
  color: #fdd000;
  text-align: center;
  margin-top: .5rem;
  line-height: 1.2;
}
@media (max-width: 600px) {
  .rb26-v3set.is-live .v3-posters { gap: .5rem; }
  .rb26-v3set.is-live .v3-year { font-size: var(--fs-lg); }
}

/* カレンダーは添え物。写真と説明を横に並べる */
.rb26-v3set.is-live .v3-calendar {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1.6rem;
  align-items: center;
  max-width: 900px;
  margin: 3rem auto 0;
  text-align: left;
}
.rb26-v3set.is-live .v3-calendar .rb26-shot-placeholder.v3-cal-shot { aspect-ratio: 4 / 3; }
.rb26-v3set.is-live .v3-cal-text p {
  color: #cfcfcf;
  font-size: var(--fs-sm);
  line-height: 1.8;
  margin: 0;
}
@media (max-width: 767px) {
  .rb26-v3set.is-live .v3-calendar { grid-template-columns: 1fr; gap: 1rem; }
}
.rb26-v3set.is-live .v3-cap-center {
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.rb26-v3set.is-live .rb26-shot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #2a2a2a;
  border: 1px solid rgba(253, 208, 0, .35);
  color: #8f8f8f;
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
}
.rb26-v3set.is-live .v3-cap {
  color: #cfcfcf;
  font-size: var(--fs-xs);
  line-height: 1.7;
  margin: .6rem 0 0;
  text-align: left;
}
/* 価格と購入 */
.rb26-v3set.is-live .v3-buy {
  max-width: 640px;
  margin: 2rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(253, 208, 0, .3);
}
.rb26-v3set.is-live .v3-price {
  font-size: var(--fs-xl);
  font-weight: 700;
}
.rb26-v3set.is-live .v3-price b { font-size: var(--fs-d3); }
.rb26-v3set.is-live .v3-term {
  color: #cfcfcf;
  font-size: var(--fs-sm);
  margin-top: .4rem;
}
/* 未確定の値だと一目で分かる印。差し替え時に消す */
.rb26-v3set.is-live .v3-tbd {
  display: inline-block;
  margin-left: .6rem;
  padding: .1rem .5rem;
  background: #c1272d;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  vertical-align: middle;
}
.rb26-v3set.is-live .v3-btn {
  display: block;
  max-width: 420px;
  margin: 1.4rem auto 0;
  padding: 1rem 1.2rem;
  background: #fdd000;
  color: #1a1a1a;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}
.rb26-v3set.is-live .v3-btn:hover { background: #ffe14d; text-decoration: none; }
.rb26-v3set.is-live .v3-btn-note {
  color: #c1272d;
  font-size: var(--fs-xs);
  margin: .6rem 0 0;
  font-weight: 600;
}

/* --- 3連覇セット：ホークスページ側の入口バナー（8/18） --------------------
   ページの主役は通常版なので、ここは絵と一行だけ。中身は 3peat.html。

   ★文字は画像に焼き込まず HTML で持つ。焼き込むとスマホで小さくなって
     読めなくなり、後から文言も直せない（KV画像で実際に起きている）。 */
.rb26-v3banner {
  display: block;
  background: #111;
  border-top: 3px solid #fdd000;
  border-bottom: 3px solid #fdd000;
  color: #fff;
  text-decoration: none;
}
.rb26-v3banner:hover { text-decoration: none; color: #fff; }
.rb26-v3banner .v3b-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 21 / 9;
  background: #2a2a2a;
  color: #8f8f8f;
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
}
.rb26-v3banner .v3b-body {
  padding: 1.8rem 1rem 2.2rem;
  text-align: center;
}
.rb26-v3banner .v3b-ttl {
  font-size: var(--fs-d3);
  font-weight: 700;
  line-height: 1.5;
  padding: .3rem 0 0;
}
.rb26-v3banner .v3b-lead {
  color: #cfcfcf;
  font-size: var(--fs-md);
  line-height: 1.8;
  margin: .6rem 0 0;
}
.v3b-btn {
  display: inline-block;
  margin-top: 1.2rem;
  padding: .8rem 2rem;
  background: #fdd000;
  color: #1a1a1a;
  font-size: var(--fs-md);
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
}
.rb26-v3banner:hover .v3b-btn { background: #ffe14d; }
@media (max-width: 600px) {
  /* 21:9 はスマホだと帯が細くなりすぎるので、少し正方形寄りに */
  .rb26-v3banner .v3b-shot { aspect-ratio: 16 / 9; }
  .rb26-v3banner .v3b-body { padding: 1.4rem .8rem 1.8rem; }
}

/* --- 3連覇セットの詳細ページ（8/18） -------------------------------------- */
.rb26-3peat-back {
  padding: 1.2rem 1rem .4rem;
}
.rb26-3peat-back a {
  color: #1a1a1a;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.rb26-3peat-back a:hover { text-decoration: underline; }
.rb26-3peat-normal {
  padding: 2.5rem 1rem 3rem;
  text-align: center;
  background: #f0ead9;
}
.rb26-3peat-normal p {
  font-size: var(--fs-md);
  margin: 0;
}

/* --- 3連覇セット 詳細ページ：情報量を足した版（8/18） -------------------- */
.rb26-v3set.is-live .v3-sec {
  max-width: 900px;
  margin: 3.2rem auto 0;
  text-align: left;
}
.rb26-v3set.is-live .v3-h {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #fdd000;
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(253, 208, 0, .4);
  padding-bottom: .5rem;
  margin: 0 0 1.2rem;
  text-align: center;
}

/* 3つのシーズン */
.rb26-v3set.is-live .v3-seasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.rb26-v3set.is-live .v3-season {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(253, 208, 0, .25);
  padding: 1.2rem 1rem;
  text-align: center;
}
.rb26-v3set.is-live .v3-season-year {
  font-family: 'League Gothic', sans-serif;
  font-size: var(--fs-d3);
  color: #fdd000;
  letter-spacing: .1em;
  line-height: 1.2;
  margin-bottom: .6rem;
}
.rb26-v3set.is-live .v3-season ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rb26-v3set.is-live .v3-season li {
  font-size: var(--fs-sm);
  line-height: 1.6;
  padding: .4rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.rb26-v3set.is-live .v3-season li:first-child { border-top: 0; }
/* 日本一は一段強く */
.rb26-v3set.is-live .v3-season li.is-top {
  color: #fdd000;
  font-weight: 700;
}
@media (max-width: 600px) {
  .rb26-v3set.is-live .v3-seasons { grid-template-columns: 1fr; }
}

/* 仕様の説明 */
.rb26-v3set.is-live .v3-spec { margin-top: 1.4rem; }
.rb26-v3set.is-live .v3-spec dl {
  margin: 0 0 1.2rem;
  padding-left: 1rem;
  border-left: 3px solid #fdd000;
}
.rb26-v3set.is-live .v3-spec dt {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: .3rem;
}
.rb26-v3set.is-live .v3-spec dd {
  margin: 0;
  color: #cfcfcf;
  font-size: var(--fs-sm);
  line-height: 1.9;
}

/* 通常版との違い */
.rb26-v3set.is-live .v3-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.rb26-v3set.is-live .v3-table th,
.rb26-v3set.is-live .v3-table td {
  border: 1px solid rgba(255, 255, 255, .18);
  padding: .7rem .8rem;
  text-align: left;
  line-height: 1.6;
  vertical-align: top;
}
.rb26-v3set.is-live .v3-table thead th {
  background: rgba(253, 208, 0, .14);
  color: #fdd000;
  font-weight: 700;
  text-align: center;
}
.rb26-v3set.is-live .v3-table tbody th {
  background: rgba(255, 255, 255, .05);
  font-weight: 600;
  white-space: nowrap;
}
.rb26-v3set.is-live .v3-table td:last-child { color: #fff; }
@media (max-width: 600px) {
  .rb26-v3set.is-live .v3-table { font-size: var(--fs-xs); }
  .rb26-v3set.is-live .v3-table th,
  .rb26-v3set.is-live .v3-table td { padding: .5rem .4rem; }
}

/* カレンダーは2枚（開いた状態・畳んだ状態） */
.rb26-v3set.is-live .v3-calendar { margin-top: 1.4rem; }

/* ---------- リンク先が未確定のボタン ---------- */
/* 見た目はそのまま、クリックとホバーだけ殺す。
   URLが決まったら html 側で href を戻し、この class を外す */
.rb26-link-off {
  pointer-events: none;
  cursor: default;
}

/* ---------- TOP「THE REVIEW BOOKとは」の3枠コーナー ---------- */
/* まとめ注記の下の余白を半分に。row 直後の空きセルが効きすぎていた */
.rb26-about-cards + .col-12.py-2.py-md-3 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* スマホは3枚が縦一列になるので、3枚目だけに付いている mt-5 を外して
   カード間の余白を1→2枚目と同じにする（md 以上は2枚目の下に回るので必要） */
@media (max-width: 767.98px) {
  .rb26-about-cards > .mt-5 {
    margin-top: 0 !important;
  }
}

/* ---------- チームページ「スペシャルアイテムの内容」の品名 ---------- */
/* スマホで小さすぎるというトシ指摘（8/18）。1.4倍にする。
   18px（--fs-lg）→ 25.2px。行送りも同じ比で 1.8rem → 2.52rem。
   ベース側（reviewbook.css の max-width:767px）が !important 付きなので、
   こちらも !important でないと勝てない。読み込みは 2026 が後なので同点なら勝つ。
   小見出し（.benefits-sub-ttl）は指定どおり据え置き。 */
@media (max-width: 767px) {
  .benefits-main-ttl {
    font-size: 1.575rem !important;
    line-height: 2.52rem !important;
  }
}

/* ---------- 3連覇BOX の1枚画像（8/18） ---------- */
/* 文字より先に、まず箱を見せる。PC は横位置・スマホは縦位置を <picture> で出し分ける。
   枠の比率を先に決めておくので、本番画像に差し替えても組みが動かない。 */
.rb26-v3set .v3-shot {
  margin: 1.2rem auto 1.6rem;
  max-width: 800px;
}
.rb26-v3set .v3-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid rgba(253, 208, 0, .35);
}
.rb26-v3set .v3-shot figcaption {
  margin-top: .5rem;
  color: #9a9a9a;
  font-size: var(--fs-sm);
  line-height: 1.6rem;
  font-weight: 300;
  text-align: right;
}
@media (max-width: 767.98px) {
  .rb26-v3set .v3-shot { max-width: 100%; }
  .rb26-v3set .v3-shot img { aspect-ratio: 4 / 5; }
  .rb26-v3set .v3-shot figcaption { text-align: left; }
}

/* 【8/26 現在ページからは外してある】絵のすぐ下の断り。戻すときのために残す。
   他パートの注釈と同じ字（--fs-sm／300）で、右寄せ。
   ★p 自身に当てないと、グローバルの `p { font-size: var(--fs-md) }` に負ける。 */
.rb26-v3set .v3-items-note {
  max-width: 1000px;
  margin: .7rem auto 0;
  color: #9a9a9a;
  font-size: var(--fs-sm);
  line-height: 1.6rem;
  font-weight: 300;
  text-align: right;
}

/* 購入ボタンの席。優勝が決まるまでは行き先が無いので、押せる形にはしない。
   8/26 トシ指定で赤（--color-red ＝ #E02229・サイトの販売ボタンと同じ赤）。
   文字は白。**黒だと 4.39:1 で白の 4.79:1 より低く、赤も濁って見える**ため。
   ★優勝後はここに <a> の購入ボタンが入る。高さと余白はそのまま使える。 */
/* 8/26 トシ指定「購入ボタンと同じサイズで角R」。
   基準は .reviewbook-buy-btn ＋ .reviewbook-buy-btn--wrap（reviewbook.css）：
     幅 320px ／ 文字 --fs-lg(18px) ／ 太さ600 ／ 行送り1.2rem ／ 余白1.2rem
     ／ 角 50rem（＝完全な丸）／ 実測 320×58px
   同じ寸法にしておくと、優勝後に <a class="reviewbook-buy-btn"> へ
   そっくり差し替えても組みが1pxも動かない。 */
.rb26-v3set .v3-onsale {
  /* 8/26 トシ「サイズは大きくして」。形（丸・赤・白文字）は購入ボタンのまま、
     寸法だけ一回り上げる：320×58 → 480×74。
     文字は clamp で、375px 端末では 20px に落として1行に収める
     （24px のままだと 13文字＋余白で 357px になり、使える 343px を超える）。 */
  max-width: 480px;
  width: 100%;
  margin: 2.6rem auto 0;
  padding: 1.5rem 1.2rem;
  background: var(--color-red, #e02229);
  color: #fff;
  border-radius: 50rem;
  font-weight: 700;
  font-size: clamp(1.25rem, .82rem + 1.15vw, 1.5rem);
  line-height: 1.5rem;
  text-align: center;
  /* 押せる形なので、押せないことはカーソルで示す */
  cursor: default;
}
@media (max-width: 767.98px) {
  .rb26-v3set .v3-onsale {
    margin-top: 2rem;
    /* ★!important が要る。スマホ幅では `p { line-height: 1.4rem !important }` が
       効いて、指定した行送りが無視される（8/26 実測。今日3回目の同じ罠）。 */
    line-height: 1.5rem !important;
  }
  .rb26-v3set .v3-items-note { text-align: left; }
}

/* 8/18：縦の長さの主因は「図版」と「仕様」を縦に積んでいたこと。
   PC では横に並べる。あわせて本文欄の幅を 640 → 1000 に広げないと、
   2列にした瞬間に図版が小さくなって、中の文字が読めなくなる。 */
@media (min-width: 768px) {
  .rb26-v3set .v3-body {
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
    column-gap: 2rem;
  }
  .rb26-v3set .v3-body .v3-shot { margin: 0; max-width: 100%; }
}

/* 仕様。品名と絵は図版が持つので、ここは寸法と条件だけを行で並べる。
   小見出し＋箇条書きに戻すと縦に伸びるので、ラベルと本文を横に組む（8/18 トシ指定）。 */
.rb26-v3set .v3-spec {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}
.rb26-v3set .v3-spec > div {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: .2rem .9rem;
  padding: .7rem 0;
  border-top: 1px solid rgba(253, 208, 0, .22);
}
.rb26-v3set .v3-spec > div:last-child { border-bottom: 1px solid rgba(253, 208, 0, .22); }
.rb26-v3set .v3-spec dt {
  color: #fdd000;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  line-height: 1.7;
}
.rb26-v3set .v3-spec dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.rb26-v3set .v3-spec dd b { color: #fdd000; font-weight: 700; }
@media (max-width: 575.98px) {
  /* 幅が足りないとラベルの列が本文を潰すので、そこだけ縦に積む */
  .rb26-v3set .v3-spec > div { grid-template-columns: 1fr; gap: .15rem; }
}
/* 2列のときは仕様の欄が狭いので、ラベルを上に置いて本文に幅を渡す */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .rb26-v3set .v3-spec > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------- 3連覇BOX：セット内容の3点（8/26 ラフに沿って組み直し） ---------- */
/* ラフでは絵の中に文字が入っていたが、寸法と別送は取引条件なので文字で持つ。
   PCは3列。スマホは1点ずつ「絵・左／文字・右」に寝かせて縦を詰める
   （縦積みにすると絵だけで1点400px近く食う）。 */
.rb26-v3set .v3-items {
  list-style: none;
  max-width: 1000px;
  /* 8/26 トシ「画像の上の余白をもっと広く」。リードと商品のあいだを 1.6rem → 3.4rem。
     商品名を大きくしたぶん、見出しの塊と商品の塊が近すぎて詰まって見えていた。
     スマホは画面が狭いので 2.4rem に留める（下の 767.98px の指定） */
  margin: 3.4rem auto 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}
.rb26-v3set .v3-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  /* 8/27：支給画像が透過PNGになったので、地の黒を外した。
     背景（胴上げ写真とストロボ）が絵の抜けたところに透ける。
     ★cover ではなく contain。透過なので枠を埋める必要がなく、
       cover だと正方形からはみ出した商品が切れる。 */
  object-fit: contain;
}
.rb26-v3set .v3-item-ttl {
  margin: .7rem 0 .4rem;
  color: #fdd000;
  font-weight: 700;
  /* 8/26 トシ指定「本体・スペシャルアイテムをもっと大きく」。16px → 24px。
     ついでに **24px は「大きい文字」の扱いになり、コントラストの基準が
     4.5:1 → 3:1 に下がる**ので、背景の写真を明るくできる（下の背景の注記参照）。 */
  font-size: var(--fs-xl);
  letter-spacing: .04em;
  line-height: 1.35;
}
.rb26-v3set .v3-item-txt {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.rb26-v3set .v3-item-txt b { color: #fdd000; font-weight: 700; }

@media (min-width: 768px) {
  /* 3列。絵の下に品名と仕様 */
  .rb26-v3set .v3-items { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .rb26-v3set .v3-item { text-align: center; }
  .rb26-v3set .v3-item-txt { text-align: left; }
}
@media (max-width: 767.98px) {
  /* 絵を左に寝かせる。1点あたり縦 約120px に収まる */
  .rb26-v3set .v3-items { margin-top: 2.4rem; gap: 1rem; }
  .rb26-v3set .v3-item {
    display: grid;
    grid-template-columns: 34% 1fr;
    align-items: center;
    gap: .9rem;
    text-align: left;
  }
  .rb26-v3set .v3-item-ttl { margin: 0 0 .2rem; }
}

/* ---------- 背景のストロボ（8/26 トシ指定で作り直し） -------------------
   「カメラのストロボが連続で点滅している／位置はランダム」。
   ★擬似要素2枚にまとめて撒く方式はやめた。あれは1枚ぶんの粒が**同時に**
     瞬くので、画面全体が明滅して見える。スタジアムのフラッシュは
     1つずつ勝手なタイミングで光るので、粒を実体（span）にして
     1粒ずつ別の周期・別の遅れを持たせている。
   ・位置／大きさ／周期／遅れ は HTML の style に埋めてある（生成時に固定）
   ・1粒は「一瞬光ってすぐ消える」。点いている時間は周期の 7% ほど
   ・34粒 × 平均2.4秒 ＝ 1秒あたり約14回、どこかが光っている勘定
   ・pointer-events は切ってあるので、選択やクリックの邪魔をしない
   ・prefers-reduced-motion では光らせない（消さずに弱く点灯させる） */
.rb26-v3set {
  position: relative;
  overflow: hidden;
}
.rb26-v3set > * {
  position: relative;
  z-index: 1;
}
/* 粒の層だけは中身より後ろ */
.rb26-v3set > .v3-flash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.rb26-v3set .v3-flash span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  background: #fff;
  /* 光の芯は白、まわりに金の滲み。ストロボらしい硬い光にする */
  box-shadow:
    0 0 calc(var(--d) * 1.6) calc(var(--d) * .35) rgba(255, 236, 168, .95),
    0 0 calc(var(--d) * 3.4) calc(var(--d) * .7) rgba(253, 208, 0, .45);
  opacity: 0;
  animation: rb26-flash var(--t) linear var(--w) infinite;
}
/* 一瞬で立ち上がって、すっと落ちる。残りの時間は消えている */
@keyframes rb26-flash {
  0%   { opacity: 0;   transform: scale(.5); }
  1.5% { opacity: 1;   transform: scale(1.15); }
  4%   { opacity: .85; transform: scale(1); }
  8%   { opacity: 0;   transform: scale(.9); }
  100% { opacity: 0;   transform: scale(.5); }
}
@media (prefers-reduced-motion: reduce) {
  .rb26-v3set .v3-flash span { animation: none; opacity: .35; }
}