/* v2 */
:root {
  --ranking-gold: #f6c400;
  --ranking-gold-soft: #fff3b0;
  --ranking-silver: #cfd9ff;
  --ranking-bronze: #ffc8b2;
  --ranking-cream: #efe0a7;
  --ranking-card: rgba(255, 255, 255, 0.82);
  --ranking-line: rgba(20, 24, 34, 0.07);
  --ranking-blue: #5b88f7;
  --ranking-green: #1f9d65;
  --ranking-red: #dc4c4c;
}

.ranking-page {
  max-width: 760px;
}

.ranking-hero {
  margin-bottom: 14px;
}

.ranking-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ranking-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: #9a7d22;
  letter-spacing: 0.06em;
}

.ranking-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ranking-chip {
  border: 1px solid #ece6c7;
  background: linear-gradient(180deg, #fffdfa 0%, #fff8de 100%);
}

.ranking-chip.is-active {
  box-shadow:
    8px 8px 20px rgba(24, 29, 39, 0.08),
    -8px -8px 20px rgba(255, 255, 255, 0.95);
}

.ranking-chip-link {
  text-decoration: none;
}

.ranking-summary-card,
.ranking-footnote-card,
.leaderboard-card {
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.78);
  background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(245,246,250,0.96) 100%);
  box-shadow:
    14px 14px 34px rgba(24, 29, 39, 0.08),
    -12px -12px 28px rgba(255,255,255,0.88);
}

.ranking-summary-card,
.ranking-footnote-card {
  padding: 16px;
  margin: 0 4px 14px;
}

.ranking-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ranking-summary-label {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
}

.ranking-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4ba 0%, #ffe98d 100%);
  color: #6e5600;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft-sm);
}

.ranking-criteria-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ranking-criteria-item {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--ranking-line);
  box-shadow: var(--shadow-soft-sm);
  font-size: 13px;
  font-weight: 700;
  color: #243047;
}

.ranking-summary-note,
.ranking-footnote-text {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.leaderboard-shell {
  margin: 0 4px 14px;
}

.leaderboard-card {
  position: relative;
  overflow: hidden;
  padding: 16px 14px 14px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.84) 25%, rgba(255,255,255,0.68) 50%, rgba(245,246,250,0.98) 100%),
    linear-gradient(180deg, #f7eec7 0%, #f5f6fa 100%);
}

.leaderboard-card::before,
.leaderboard-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: linear-gradient(180deg, #ffd71a 0%, #f0b800 100%);
  filter: drop-shadow(0 10px 18px rgba(184, 138, 0, 0.18));
}

.leaderboard-card::before {
  width: 74px;
  height: 74px;
  left: -18px;
  bottom: 92px;
  clip-path: polygon(50% 0%, 67% 33%, 100% 50%, 67% 67%, 50% 100%, 33% 67%, 0% 50%, 33% 33%);
  border-radius: 20px;
  opacity: 0.95;
}

.leaderboard-card::after {
  width: 64px;
  height: 64px;
  right: -14px;
  top: 100px;
  clip-path: polygon(50% 0%, 67% 33%, 100% 50%, 67% 67%, 50% 100%, 33% 67%, 0% 50%, 33% 33%);
  border-radius: 20px;
  opacity: 0.88;
}

.leaderboard-head,
.podium-stage-wrap,
.leaderboard-updated,
.ranking-list {
  position: relative;
  z-index: 1;
}

.leaderboard-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.leaderboard-title-wrap {
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.leaderboard-title {
  margin: 0;
  font-size: clamp(28px, 5vw, 34px);
  line-height: 1.1;
  font-weight: 900;
}

.leaderboard-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: #a0a6b3;
}

.podium-stage-wrap {
  position: relative;
  padding: 26px 0 0;
  min-height: 450px;
}

.podium-rays {
  position: absolute;
  inset: 0 0 auto 0;
  height: 260px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0) 0 36px, rgba(255,255,255,0.42) 37px, rgba(255,255,255,0) 38px),
    repeating-conic-gradient(
      from 0deg at 50% 42%,
      rgba(255,255,255,0.0) 0deg 9deg,
      rgba(255,255,255,0.42) 9deg 11deg
    );
  opacity: 0.45;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 42%, rgba(0,0,0,0) 76%);
}

.podium-stage {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  align-items: end;
  gap: 8px;
  min-height: 340px;
}

.podium-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.podium-person.rank-1 {
  order: 2;
}

.podium-person.rank-2 {
  order: 1;
}

.podium-person.rank-3 {
  order: 3;
}

.podium-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
}

.podium-avatar-wrap {
  position: relative;
}

.podium-crown {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}

.podium-avatar {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft-sm);
}

.podium-person.rank-1 .podium-avatar {
  width: 88px;
  height: 88px;
  font-size: 38px;
}

.podium-name {
  font-size: 15px;
  font-weight: 800;
  color: #202532;
}

.podium-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #96a0b2;
  font-weight: 800;
}

.podium-score-icon {
  font-size: 13px;
}

.podium-block {
  width: 100%;
  border-radius: 18px 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 12px;
  text-align: center;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.45),
    0 16px 22px rgba(24, 29, 39, 0.07);
  cursor: pointer;
  border: none;
}

.podium-person.rank-1 .podium-block {
  height: 230px;
  background: linear-gradient(180deg, #f7c600 0%, #ffd531 38%, rgba(255, 213, 49, 0.22) 100%);
}

.podium-person.rank-2 .podium-block {
  height: 180px;
  background: linear-gradient(180deg, #cfdbff 0%, #dbe4ff 34%, rgba(219, 228, 255, 0.2) 100%);
}

.podium-person.rank-3 .podium-block {
  height: 150px;
  background: linear-gradient(180deg, #ffcbb4 0%, #ffd6c6 38%, rgba(255, 214, 198, 0.2) 100%);
}

.podium-rank-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.92);
}

/* 星3つを柔らかくカーブ配置 */
.podium-stars.curved {
  position: relative;
  width: 35px;
  height: 10px;
}

.podium-stars.curved .star {
  position: absolute;
  font-size: 10px;
  line-height: 1;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.podium-stars.curved .star-left {
  left: 0;
  top: 6px;
  transform: rotate(-16deg);
}

.podium-stars.curved .star-center {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.podium-stars.curved .star-right {
  right: 0;
  top: 6px;
  transform: rotate(16deg);
}

.podium-rank-number {
  font-size: 70px;
  font-weight: 900;
  line-height: 0.95;
}

.podium-person.rank-2 .podium-rank-number,
.podium-person.rank-3 .podium-rank-number {
  font-size: 50px;
}

.podium-laurel {
  font-size: 16px;
  line-height: 1;
}

.leaderboard-updated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 12px;
  color: #8e96a5;
  font-size: 13px;
  font-weight: 700;
}

.leaderboard-updated-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.76);
  box-shadow: var(--shadow-soft-sm);
  cursor: pointer;
}

.ranking-rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #434b5b;
  font-weight: 900;
  font-size: 15px;
}

.ranking-rank-icon {
  color: #b9bec8;
}

.ranking-main {
  min-width: 0;
}

.ranking-pref {
  font-size: 16px;
  font-weight: 800;
  color: #1b2230;
  line-height: 1.25;
}

.ranking-handle {
  margin-top: 2px;
  color: #8d95a4;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 900;
  color: #182131;
}

/* ===== ここを強化 ===== */
.ranking-modal {
  padding: 16px;
}

.ranking-modal .modal-card {
  width: min(94vw, 720px);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ranking-modal .modal-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: inherit;
  flex-shrink: 0;
  padding-bottom: 10px;
}

.ranking-modal .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.ranking-modal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.ranking-modal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(140, 150, 170, 0.35);
  border-radius: 999px;
}

.ranking-modal .modal-body::-webkit-scrollbar-track {
  background: transparent;
}
/* ===== ここまで ===== */

.ranking-modal-rank {
  margin: 0 0 4px;
  font-size: 12px;
  color: #9a7d22;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ranking-modal-summary {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.ranking-modal-summary-score {
  padding: 14px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff8de 0%, #fff1b8 100%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft-sm);
  text-align: center;
}

.ranking-modal-summary-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #8c6e00;
}

.ranking-modal-summary-score strong {
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
  color: #5d4700;
}

.ranking-modal-summary-comment {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--ranking-line);
  box-shadow: var(--shadow-soft-sm);
}

.modal-body-section-title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ranking-modal-summary-comment p,
.ranking-modal-source p {
  margin: 0;
  color: #1e2736;
  font-size: 14px;
  line-height: 1.8;
}

.ranking-metric-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-metric-item {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--ranking-line);
  box-shadow: var(--shadow-soft-sm);
}

.ranking-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ranking-metric-name {
  font-size: 14px;
  font-weight: 800;
  color: #1d2432;
}

.ranking-metric-score {
  font-size: 14px;
  font-weight: 900;
  color: #182131;
}

.ranking-metric-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #ef4444 0%,
    #ef4444 25%,
    #f97316 25%,
    #f97316 50%,
    #facc15 50%,
    #facc15 75%,
    #22c55e 75%,
    #22c55e 100%
  );
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.45),
    inset 0 -1px 2px rgba(0,0,0,0.06);
}

.ranking-metric-bar-fill {
  position: absolute;
  inset: 0 0 0 auto;
  width: calc(100% - var(--score, 0%));
  background: rgba(237, 240, 246, 0.92);
  border-radius: 0 999px 999px 0;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.65);
}

.ranking-metric-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.32) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
}

.ranking-metric-comment {
  margin: 0;
  font-size: 13px;
  color: #5f6776;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .podium-stage-wrap {
    min-height: 324px;
  }

  .podium-stage {
    gap: 6px;
  }

  .podium-avatar {
    width: 66px;
    height: 66px;
    font-size: 29px;
    border-radius: 20px;
  }

  .podium-person.rank-1 .podium-avatar {
    width: 76px;
    height: 76px;
    font-size: 33px;
  }

  .podium-name {
    font-size: 14px;
  }

  .podium-person.rank-1 .podium-block {
    height: 150px;
  }

  .podium-person.rank-2 .podium-block {
    height: 112px;
  }

  .podium-person.rank-3 .podium-block {
    height: 98px;
  }

  .podium-rank-number {
    font-size: 46px;
  }

  .podium-person.rank-2 .podium-rank-number,
  .podium-person.rank-3 .podium-rank-number {
    font-size: 42px;
  }

  .ranking-modal-summary {
    grid-template-columns: 1fr;
  }

  .ranking-row {
    grid-template-columns: 46px 1fr auto;
    padding: 12px;
  }

  .ranking-modal {
    padding: 10px;
  }

  .ranking-modal .modal-card {
    width: min(96vw, 720px);
    max-height: 84vh;
    border-radius: 22px;
  }

  .ranking-modal .modal-head {
    padding-bottom: 8px;
  }

  .ranking-modal .modal-body {
    padding-right: 2px;
  }
}

@media (max-width: 420px) {
  .leaderboard-title {
    font-size: 25px;
  }

  .leaderboard-subtitle {
    font-size: 12px;
  }

  .podium-score {
    font-size: 12px;
  }

  .ranking-pref {
    font-size: 15px;
  }

  .ranking-total {
    font-size: 15px;
  }

  .podium-crown{
    width:30px;
    top:-12px;
  }

  .ranking-modal .modal-card {
    max-height: 75vh;
  }
}

/* ===== 一覧の特徴文 ===== */
.ranking-row-highlight {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: #8b93a7;
  font-weight: 600;
}

/* ===== モーダルAIコメント ===== */
.ranking-ai-block {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(18, 24, 40, 0.08);
  border-radius: 18px;
  background: #fff;
}

.ranking-ai-block:first-child {
  margin-top: 0;
}

.ranking-ai-block-title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #7a8398;
}

.ranking-ai-block-title--strong {
  color: #17a05d;
}

.ranking-ai-block-title--weak {
  color: #de5a52;
}

.ranking-ai-bullet-list {
  margin: 0;
  padding-left: 18px;
}

.ranking-ai-bullet-list li {
  margin: 0 0 8px;
  color: #2c3448;
  line-height: 1.7;
}

.ranking-ai-bullet-list li:last-child {
  margin-bottom: 0;
}

.ranking-ai-bullet-list span {
  color: #8b93a7;
}

.ranking-ai-reason-text {
  margin: 0;
  color: #2c3448;
  line-height: 1.8;
}

/* ===== スコアカード ===== */
.ranking-metric-card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(18, 24, 40, 0.08);
  border-radius: 20px;
  background: #fff;
}

.ranking-metric-card:first-child {
  margin-top: 0;
}

.ranking-metric-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ranking-metric-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #1d2433;
}

.ranking-metric-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #8b93a7;
  font-weight: 700;
}

.ranking-metric-score {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 900;
  color: #1d2433;
}

.ranking-score-bar {
  margin-top: 12px;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #ef5350 0%,
      #ef5350 25%,
      #fb8c00 25%,
      #fb8c00 50%,
      #f6c400 50%,
      #f6c400 75%,
      #38c172 75%,
      #38c172 90%,
      #dcefe9 90%,
      #dcefe9 100%
    );
}

.ranking-score-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  mix-blend-mode: multiply;
}

.ranking-metric-text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #6d768a;
}
/* ===========================
   記事セクション（H2・FAQ）
   =========================== */
.ranking-article {
  margin: 0 4px 12px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(180deg,rgba(255,255,255,0.88) 0%,rgba(245,246,250,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow: 14px 14px 34px rgba(24,29,39,0.06),-12px -12px 28px rgba(255,255,255,0.88);
}

.ranking-article-h2 {
  font-size: 16px;
  font-weight: 900;
  color: #131722;
  margin: 0 0 10px;
  line-height: 1.4;
  letter-spacing: -.3px;
}

.ranking-article-h3 {
  font-size: 14px;
  font-weight: 800;
  color: #2a3348;
  margin: 16px 0 6px;
  line-height: 1.4;
}

.ranking-article-p {
  font-size: 13px;
  color: #4a5568;
  line-height: 1.75;
  margin: 0 0 10px;
}

.ranking-article-p:last-child { margin-bottom: 0; }

.ranking-faq-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(20,24,34,0.07);
}

.ranking-faq-item:last-child { border-bottom: none; padding-bottom: 0; }

.ranking-faq-q {
  font-size: 13px;
  font-weight: 800;
  color: #131722;
  margin: 0 0 6px;
  line-height: 1.5;
}

.ranking-faq-q::before {
  content: "Q. ";
  color: #b91c1c;
}

.ranking-faq-a {
  font-size: 12px;
  color: #4a5568;
  line-height: 1.7;
  margin: 0;
}

.ranking-faq-a::before {
  content: "A. ";
  color: #1d6a40;
  font-weight: 800;
}

/* =============================================
   メタ情報行（更新日・出典・品質チェック）
   ============================================= */
.ranking-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(20,24,34,.07);
  font-size: 11px;
}

.ranking-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #7f8694;
}

.ranking-meta-label {
  font-weight: 800;
  color: #9a7d22;
}

.ranking-meta-ok {
  color: #14a85a;
  font-weight: 700;
}

/* =============================================
   注意書き（免責・中立性表明）
   ============================================= */
.ranking-disclaimer {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,248,220,.65);
  border: 1px solid rgba(200,160,40,.2);
  border-radius: 10px;
  font-size: 11px;
  color: #7a6010;
  line-height: 1.65;
}

.ranking-disclaimer-label {
  font-weight: 800;
  margin-right: 4px;
}

/* =============================================
   関連ランキングリンク
   ============================================= */
.ranking-related {
  margin: 16px 14px 0;
}

.ranking-related-title {
  font-size: 13px;
  font-weight: 800;
  color: #131722;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ranking-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.ranking-related-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 6px;
  background: linear-gradient(180deg,#fff 0%,#f4f6fa 100%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  box-shadow: 4px 4px 10px rgba(24,29,39,.06),-4px -4px 10px rgba(255,255,255,.9);
  text-decoration: none;
  color: #131722;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  transition: transform .15s;
}

.ranking-related-card:active {
  transform: translateY(1px);
}

.ranking-related-icon {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 380px) {
  .ranking-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================
   冒頭「このランキングで分かること」カード
   ============================================= */
.ranking-intro-card {
  margin: 16px 14px 0;
  padding: 16px;
  background: linear-gradient(135deg, #fff1f2 0%, #fef7f7 100%);
  border: 1px solid rgba(185,28,28,.18);
  border-radius: 16px;
}

.ranking-intro-title {
  font-size: 13px;
  font-weight: 900;
  color: #b91c1c;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ranking-intro-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ranking-intro-list li {
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.ranking-intro-list li::before {
  content: "✓";
  color: #b91c1c;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

/* =============================================
   人気バッジ
   ============================================= */
.ranking-hot-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* =============================================
   都道府県クイックリンク
   ============================================= */
.ranking-pref-section {
  margin: 16px 14px 0;
}

.ranking-pref-title {
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ranking-pref-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.ranking-pref-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  min-height: 40px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  text-decoration: none;
  text-align: center;
  transition: background .12s, border-color .12s, color .12s;
}

.ranking-pref-card:hover {
  background: #fff1f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* =============================================
   LIVE / Shorts CTA
   ============================================= */
.ranking-live-cta {
  margin: 16px 14px 0;
  padding: 18px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

.ranking-live-cta-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.ranking-live-cta-title {
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 6px;
}

.ranking-live-cta-desc {
  font-size: 12px;
  color: #475569;
  line-height: 1.7;
  margin: 0 0 14px;
}

.ranking-live-cta-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ranking-live-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .12s;
}
.ranking-live-btn:active { transform: translateY(1px); }

.ranking-live-btn-primary {
  background: #0f172a;
  color: #fff;
  box-shadow: 0 3px 10px rgba(15,23,42,.18);
}

.ranking-live-btn-secondary {
  background: #fff;
  color: #0f172a;
  border: 1.5px solid #e2e8f0;
}

/* =============================================
   関連ランキング（説明付き強化版）
   ============================================= */
.ranking-related-v2 {
  margin: 16px 14px 0;
}

.ranking-related-v2-title {
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ranking-related-card-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 13px;
  text-decoration: none;
  color: #0f172a;
  margin-bottom: 8px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}

.ranking-related-card-v2:last-child { margin-bottom: 0; }

.ranking-related-card-v2:hover {
  transform: translateY(-1px);
  border-color: #fca5a5;
  box-shadow: 0 4px 16px rgba(185,28,28,.07);
}

.ranking-related-v2-icon { font-size: 22px; flex-shrink: 0; }

.ranking-related-v2-body { flex: 1; min-width: 0; }

.ranking-related-v2-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}

.ranking-related-v2-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

.ranking-related-v2-arrow {
  font-size: 14px;
  color: #b91c1c;
  font-weight: 800;
  flex-shrink: 0;
}

/* =============================================
   ランキング一覧：カテゴリ・人気ラベル
   ============================================= */
.ranking-panel-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: #b91c1c;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 4px 4px;
}

.ranking-panel-desc {
  font-size: 12px;
  color: #64748b;
  margin: 4px 4px 14px;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .ranking-pref-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ===== LLMO ranking-faq (AI向けFAQ・可視) ===== */
.ranking-faq-card{background:#fff;border:1px solid #e8edf3;border-radius:16px;padding:20px;margin:16px 0;box-shadow:0 2px 10px rgba(20,40,80,.04)}
.ranking-faq-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ranking-faq-item{border:1px solid #eef2f7;border-radius:10px;padding:12px 14px;background:#fbfcfe}
.ranking-faq-item>summary{cursor:pointer;font-weight:700;color:#1f2d3d;list-style:none}
.ranking-faq-item>summary::-webkit-details-marker{display:none}
.ranking-faq-item>summary::before{content:"＋";margin-right:8px;color:#2e7cf6;font-weight:700}
.ranking-faq-item[open]>summary::before{content:"－"}
.ranking-faq-item>p{margin:10px 0 2px;color:#46566a;line-height:1.7;font-size:.95rem}


/* ===== LLMO ranking-fulllist (全順位の静的テキスト・AI可読) ===== */
.ranking-fulllist{background:#fff;border:1px solid #e8edf3;border-radius:16px;padding:18px 20px;margin:16px 0;box-shadow:0 2px 10px rgba(20,40,80,.04)}
.ranking-fulllist>summary{cursor:pointer;font-weight:700;color:#1f2d3d;list-style:none}
.ranking-fulllist>summary::-webkit-details-marker{display:none}
.ranking-fulllist>summary::before{content:"＋";margin-right:8px;color:#2e7cf6;font-weight:700}
.ranking-fulllist[open]>summary::before{content:"－"}
.ranking-fulllist-caption{color:#6b7a90;font-size:.82rem;margin:8px 0 4px}
.ranking-fulllist ol{margin:8px 0 0;padding-left:0;list-style:none;counter-reset:rk}
.ranking-fulllist li{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;border-bottom:1px solid #f0f3f8;color:#33425a}
.ranking-fulllist li .rk-name{font-weight:600}
.ranking-fulllist li .rk-score{color:#6b7a90;font-variant-numeric:tabular-nums}

/* LLMO-v2-css:start */
/* ===== LLMO v2 比較パーツ(中立・データメディア基調) ===== */
.v2-block{display:flex;flex-direction:column;gap:18px;margin:16px 0}
.v2-sec{background:#fff;border:1px solid #e8edf3;border-radius:16px;padding:18px;box-shadow:0 2px 10px rgba(20,40,80,.04)}
.v2-h2{font-size:1.05rem;margin:0 0 14px;color:#15294a;font-weight:800}
.v2-top3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.v2-top3-card{border:1px solid #eef2f7;border-radius:14px;overflow:hidden;background:#fbfcfe;display:flex;flex-direction:column}
.v2-top3-thumb{height:150px;background-size:cover;background-position:center}
.v2-top3-thumb--blank{background:linear-gradient(135deg,#dfe8f5,#eef3fa)}
.v2-top3-body{padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.v2-top3-rank{font-weight:800;color:#2e7cf6;font-size:.9rem}
.v2-top3-name{font-weight:800;font-size:1.05rem;color:#1f2d3d}
.v2-top3-score{color:#6b7a90;font-size:.82rem}
.v2-top3-strength{color:#33425a;font-size:.82rem;line-height:1.5;margin-top:2px}
.v2-next{display:flex;flex-wrap:wrap;gap:10px}
.v2-next-btn{flex:1 1 30%;min-width:150px;text-align:center;padding:12px 14px;border-radius:12px;background:#f2f7ff;border:1px solid #d6e4fb;color:#1f5fd0;font-weight:800;text-decoration:none;font-size:.92rem}
.v2-next-btn:hover{background:#e7f0ff}
.v2-purpose-table{width:100%;border-collapse:collapse;font-size:.92rem}
.v2-purpose-table caption{text-align:left;font-weight:800;color:#15294a;margin-bottom:10px;font-size:1.05rem}
.v2-purpose-table th,.v2-purpose-table td{border:1px solid #eef2f7;padding:9px 10px;text-align:left}
.v2-purpose-table thead th{background:#f6f9fd;color:#46566a;font-size:.8rem}
.v2-purpose-table tbody th{background:#fbfcfe;white-space:nowrap}
.v2-purpose-table tbody th a{color:#1f5fd0;text-decoration:none;font-weight:700}
.v2-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.v2-card{border:1px solid #eef2f7;border-radius:14px;padding:12px;background:#fbfcfe;display:flex;flex-direction:column;gap:8px}
.v2-card-head{display:flex;align-items:center;gap:8px}
.v2-card-rank{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px;background:#2e7cf6;color:#fff;font-weight:800;font-size:.85rem}
.v2-card-ic{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#eef3fa;flex:none}
.v2-card-ic--blank{display:inline-block}
.v2-card-name{font-weight:800;color:#1f2d3d;flex:1}
.v2-card-score{font-weight:800;color:#2e7cf6;font-variant-numeric:tabular-nums}
.v2-card-strength{margin:0;color:#46566a;font-size:.85rem;line-height:1.5}
.v2-card-links{display:flex;gap:8px;margin-top:auto}
.v2-card-links a{flex:1;text-align:center;padding:7px;border-radius:9px;font-size:.8rem;font-weight:700;text-decoration:none;border:1px solid #d6e4fb;color:#1f5fd0;background:#f2f7ff}
.v2-note{color:#8d95a4;font-size:.78rem;margin:10px 0 0;line-height:1.5}
.v2-card-more{margin-top:10px}
.v2-card-more>summary{cursor:pointer;list-style:none;text-align:center;padding:11px;border-radius:12px;background:#f2f7ff;border:1px solid #d6e4fb;color:#1f5fd0;font-weight:800;font-size:.92rem}
.v2-card-more>summary::-webkit-details-marker{display:none}
.v2-card-more>summary::after{content:"　▼"}
.v2-card-more[open]>summary::after{content:"　▲"}
.v2-card-more[open]>summary{background:#e7f0ff}
.v2-insights{background:#f6f9fd;border:1px solid #e3ecf7;border-radius:12px;padding:12px 14px;margin:0 0 10px}
.v2-insights-h{margin:0 0 8px;font-weight:800;color:#15294a;font-size:.92rem}
.v2-insights ul{margin:0;padding-left:1.1em;color:#33425a;line-height:1.75;font-size:.9rem}
.v2-insights li{margin:2px 0}
.v2-insights-tap{margin:0;color:#6b7a90;font-size:.85rem;line-height:1.6}
/* ネイティブ順位(表彰台+一覧)を非表示。詳細モーダルは残すためDOMは保持 */
.rank-v2-page .podium-stage-wrap,.rank-v2-page #rankingList,.rank-v2-page .leaderboard-updated{display:none!important}
.v2-card-detail,.v2-top3-detail{cursor:pointer;border:1px solid #d6e4fb;background:#f2f7ff;color:#1f5fd0;font-weight:700;border-radius:9px;padding:7px 8px;font-size:.8rem}
.v2-card-detail{flex:1}
.v2-top3-detail{margin-top:8px;width:100%}
.v2-card-detail:hover,.v2-top3-detail:hover{background:#e7f0ff}
@media(max-width:560px){.v2-top3-grid{grid-template-columns:1fr}.v2-card-grid{grid-template-columns:1fr}.v2-next-btn{flex:1 1 100%}.v2-top3-thumb{height:200px}}
/* LLMO-v2-css:end */

/* ===== 議事録リサーチ SaaS 誘導バナー（集客ページ→gikai／有料転換・答弁変化実例） ===== */
.gikai-funnel-wrap { max-width: 1100px; margin: 0 auto; padding: 14px 16px 4px; }
.gikai-funnel {
  border-radius: 18px;
  background: linear-gradient(160deg, #fff 0%, #fbe7f2 100%);
  border: 1.5px solid #c2185b;
  box-shadow: 0 12px 30px rgba(194,24,91,.14);
  padding: clamp(18px, 3.5vw, 26px) clamp(18px, 3.5vw, 30px);
}
.gikai-funnel-body { min-width: 0; }
.gikai-funnel-badge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 800; color: #a0186a;
}
.gikai-funnel-badge .gf-paid {
  font-size: .72rem; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #e0559b, #c2185b);
  border-radius: 999px; padding: 3px 10px;
}
.gikai-funnel-badge .gf-tags {
  font-size: .72rem; font-weight: 800; color: #7a4dd0;
  background: #f1ecfb; border: 1px solid #ddd0f5;
  border-radius: 999px; padding: 3px 10px;
}
.gikai-funnel-title {
  margin-top: 10px; font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 900; color: #111318; line-height: 1.4;
}
.gikai-funnel-sub { margin-top: 6px; font-size: .92rem; line-height: 1.7; color: #3b4049; }

.gf-examples { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.gf-ex {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  background: #fff; border: 1px solid #f3c6dc; border-radius: 12px; padding: 9px 12px;
}
.gf-ex-ward { font-size: .9rem; font-weight: 900; color: #111318; }
.gf-ex-th { font-size: .72rem; font-weight: 800; color: #a0186a; background: #fdeef5; border-radius: 999px; padding: 2px 8px; }
.gf-chain { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.gf-chain i { font-style: normal; font-size: .72rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #fdeef5; color: #a0186a; border: 1px solid #f3c6dc; }
.gf-chain i.on { background: linear-gradient(180deg, #e0559b, #c2185b); color: #fff; border-color: transparent; }
.gf-chain i.dn { background: #eef1f5; color: #64748b; border-color: #dbe2ea; }
.gf-chain b { color: #c2185b; font-weight: 900; }

.gf-q { margin-top: 12px; font-size: .95rem; font-weight: 800; color: #a0186a; }
.gf-see { margin-top: 8px; font-size: .84rem; line-height: 1.7; color: #3b4049; }

.gikai-funnel-ctas { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.gikai-funnel-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 22px; border-radius: 999px;
  background: linear-gradient(180deg, #e0559b, #c2185b); color: #fff;
  font-size: 1rem; font-weight: 800; text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(194,24,91,.28);
}
.gikai-funnel-cta:hover { filter: brightness(1.04); }
.gikai-funnel-cta.ghost { background: #fff; color: #c2185b; border: 1.5px solid #c2185b; box-shadow: none; }
.gikai-funnel-cta.ghost:hover { background: #fdf2f8; }
.gf-note { margin-top: 11px; font-size: .74rem; line-height: 1.6; color: #64748b; }
@media (max-width: 560px) {
  .gf-chain { margin-left: 0; flex-basis: 100%; }
  .gikai-funnel-cta { width: 100%; }
}