.ranking-page {
  --rank-ink: #222222;
  --rank-muted: #686868;
  --rank-line: #dddddd;
  --rank-soft: #f5f5f2;
  --rank-accent: #bd563c;
  --rank-green: #245f50;
  margin: 0;
  color: var(--rank-ink);
  background: #ffffff;
}
.ranking-header { width: min(1080px, calc(100% - 64px)); min-height: 84px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rank-line); }
.ranking-header nav { display: flex; gap: 20px; }
.ranking-header nav a { font-size: 12px; font-weight: 800; text-decoration: none; }
.ranking-page main { overflow: hidden; }
.ranking-intro,
.ranking-order,
.ranking-action { width: min(900px, calc(100% - 64px)); margin: 0 auto; }
.ranking-intro { padding: 92px 0 88px; }
.ranking-intro h1 { max-width: 840px; margin: 0 0 28px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(54px, 8vw, 88px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.ranking-intro p { max-width: 680px; margin: 0; color: var(--rank-muted); font-size: 19px; line-height: 1.6; }
.ranking-order { padding: 88px 0; border-top: 1px solid var(--rank-line); }
.ranking-page h2 { margin: 0 0 42px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 5vw, 56px); font-weight: 400; line-height: 1.06; letter-spacing: -.04em; }
.ranking-order ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rank-line); }
.ranking-order li { padding: 24px 0; display: grid; grid-template-columns: 44px 1fr; gap: 20px; border-bottom: 1px solid var(--rank-line); }
.ranking-order li > span { width: 34px; height: 34px; display: grid; place-items: center; color: #ffffff; background: var(--rank-accent); border-radius: 50%; font-size: 12px; font-weight: 900; }
.ranking-order h3 { margin: 0 0 7px; font-size: 18px; }
.ranking-order p { margin: 0; color: var(--rank-muted); font-size: 14px; line-height: 1.6; }
.ranking-boundary { padding: 82px max(32px, calc((100vw - 900px) / 2)); color: #ffffff; background: var(--rank-green); }
.ranking-boundary > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ranking-boundary p { margin: 0; padding: 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; font-size: 14px; }
.ranking-action { padding: 88px 0 100px; text-align: center; }
.ranking-action p { color: var(--rank-muted); }
.ranking-action a { display: inline-block; margin-top: 14px; color: var(--rank-ink); font-size: 13px; font-weight: 850; text-decoration: none; }
.ranking-footer { padding: 34px max(32px, calc((100vw - 1080px) / 2)); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; color: #ffffff; background: var(--rank-ink); }
.ranking-footer a { color: #ffffff; font-size: 12px; }
.ranking-footer p { margin: 0; color: #aaaaaa; text-align: center; font-size: 11px; }
.ranking-footer a:last-child { justify-self: end; }
@media (max-width: 640px) {
  .ranking-header,
  .ranking-intro,
  .ranking-order,
  .ranking-action { width: calc(100% - 36px); }
  .ranking-header nav a:first-child { display: none; }
  .ranking-boundary > div { grid-template-columns: 1fr; }
  .ranking-footer { grid-template-columns: 1fr; text-align: center; }
  .ranking-footer a:last-child { justify-self: center; }
}