/* 上位3件は概要としてまとめ、詳細ランキングと同じ読み順を保つ。 */
#heroOverview {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 20px;
}
#heroOverview .card-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
#heroOverview .card-heading h2 { font-size: 18px; line-height: 1.5; }
#heroOverview .card-heading time { margin: 0; font-size: 11px; white-space: normal; line-height: 1.5; }
#heroOverviewList { gap: 8px; }
#heroOverview .hero-ranking-row {
  grid-template-columns: 30px 38px minmax(0, 1fr) 86px;
  gap: 10px;
  min-height: 84px;
  padding: 12px 10px;
}
#heroOverview .hero-ranking-row > p { display: none; }
#heroOverview .rank-medal { width: 30px; height: 30px; font-size: 15px; }
#heroOverview .provider-logo { width: 36px; height: 34px; font-size: 12px; }
#heroOverview .ranking-provider { min-width: 0; font-size: 14px; line-height: 1.5; }
#heroOverview .ranking-provider strong { overflow-wrap: anywhere; }
#heroOverview .ranking-provider small { margin-top: 2px; font-size: 11px; line-height: 1.5; font-weight: 500; }
#heroOverview .ranking-score {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#heroOverview .ranking-score strong { font-size: 24px; white-space: nowrap; }
#heroOverview .ranking-score strong small { font-size: 12px; }
#heroOverview .ranking-score span { font-size: 10px; white-space: nowrap; }
#heroOverview .ranking-score i { width: 100%; height: 5px; }
#heroOverview .card-more { min-height: 40px; margin-top: 8px; font-size: 12px; }

/* 操作欄、サービス名、標本数の文字と余白をそろえる。 */
#ranking .card-heading h2 { font-size: 20px; line-height: 1.5; }
#ranking .card-heading time { font-size: 11px; line-height: 1.5; }
#ranking .ranking-periods { max-width: 620px; }
#ranking .ranking-filters { gap: 16px 24px; }
#ranking .ranking-list { gap: 8px; }
#ranking .hero-ranking-row { padding: 12px; }
#ranking .ranking-provider { min-width: 0; font-size: 14px; line-height: 1.5; }
#ranking .ranking-provider small { font-size: 11px; line-height: 1.6; }
#ranking .hero-ranking-row > p { font-size: 12px; line-height: 1.7; }
#ranking .ranking-sample { font-size: 11px; line-height: 1.6; }
#ranking .ranking-score strong { font-size: 24px; }
#ranking .ranking-credits .source-attribution { font-size: 11px; line-height: 1.6; }
#ranking .card-more { min-height: 44px; font-size: 12px; }

/* 予報の出典・発表時刻も本文として読める大きさにする。 */
#forecastBody .compare-provider > strong { font-size: 13px; }
#forecastBody .compare-issued, #forecastBody .compare-samples { font-size: 10px; line-height: 1.6; }
#forecastBody .compare-provider .source-attribution { font-size: 10px; line-height: 1.6; font-weight: 400; }
#forecastBody .compare-ranking-note { font-size: 11px; line-height: 1.7; }

/* 評価済みの比較カードは2列で並べ、説明と利用先のリンクを読みやすくする。 */
#serviceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#serviceGrid .service-card { padding: 20px; }
#serviceGrid .service-card-head > strong { font-size: 15px; }
#serviceGrid .service-card > p { font-size: 12px; line-height: 1.7; }
#serviceGrid .source-attribution { font-size: 11px; line-height: 1.7; }
#serviceGrid .source-services-title { font-size: 12px; }
#serviceGrid .source-service-chip { min-height: 36px; font-size: 12px; }
#serviceGrid .service-card > a { min-height: 40px; display: inline-flex; align-items: center; font-size: 12px; }

@media (max-width: 640px) {
  #heroOverview { padding: 16px 12px 10px; }
  #heroOverview .card-heading h2 { font-size: 15px; }
  #heroOverview .card-heading time { font-size: 10px; }
  #heroOverview .hero-ranking-row {
    grid-template-columns: 26px 30px minmax(0, 1fr) 72px;
    gap: 7px;
    min-height: 72px;
    padding: 8px;
  }
  #heroOverview .rank-medal { width: 26px; height: 26px; font-size: 13px; }
  #heroOverview .provider-logo { width: 30px; height: 30px; font-size: 10px; }
  #heroOverview .ranking-provider { font-size: 13px; }
  #heroOverview .ranking-provider small { font-size: 10px; }
  #heroOverview .ranking-score strong { font-size: 22px; }
  #heroOverview .ranking-score strong small { font-size: 10px; }
  #heroOverview .ranking-score span { font-size: 9px; }
  #ranking .card-heading h2 { font-size: 17px; }
  #ranking .ranking-periods { margin: 16px 0; }
  #ranking .ranking-periods button { min-height: 44px; font-size: 14px; }
  #ranking .ranking-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #ranking .ranking-filters label { min-width: 0; flex-direction: column; align-items: stretch; gap: 6px; font-size: 12px; }
  #ranking .ranking-filters select { width: 100%; min-width: 0; font-size: 14px; }
  #ranking .ranking-period-note { margin: 14px 0; font-size: 12px; line-height: 1.7; }
  #ranking .hero-ranking-row { grid-template-columns: 26px 30px minmax(0, 1fr) 72px; gap: 8px; padding: 12px 10px; }
  #ranking .ranking-provider { font-size: 13px; }
  #ranking .ranking-provider small { font-size: 10px; }
  #ranking .hero-ranking-row > p { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; }
  #ranking .ranking-score strong { font-size: 22px; }
  #ranking .ranking-score strong small { font-size: 10px; }
  #ranking .ranking-score span { font-size: 9px; }
  #serviceGrid { grid-template-columns: minmax(0, 1fr); }
  #serviceGrid .service-card { padding: 16px; }
  /* 常駐する窓口は小さくし、ランキングや比較表を覆う面積を減らす。 */
  body .feedback-widget-trigger { width: 48px; min-height: 48px; padding: 0; border-radius: 50%; font-size: 0; }
  body .feedback-widget-trigger::after { content: "要望"; font-size: 12px; }
  body .feedback-widget-trigger::after { content: "要望" / ""; }
}

@media (max-width: 360px) {
  .hero .hero-slogan { display: none; }
  #heroOverview .hero-ranking-row, #ranking .hero-ranking-row {
    grid-template-columns: 22px 26px minmax(0, 1fr) 68px;
    gap: 5px;
    padding-inline: 6px;
  }
  #heroOverview .ranking-provider, #ranking .ranking-provider { font-size: 12px; }
  #heroOverview .rank-medal, #ranking .rank-medal { width: 22px; height: 22px; }
  #heroOverview .provider-logo, #ranking .provider-logo { width: 26px; height: 28px; }
  #heroOverview .ranking-score strong, #ranking .ranking-score strong { font-size: 20px; }
}