@charset "UTF-8";

body {
  margin: 0;
  padding: 0;
  min-width: 375px;
}

.Rankings {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.Rankings__list {
  display: grid;
  grid-template-columns: 64px 94px auto;
  grid-column-gap: 16px;
  align-items: center;
}

.Rankings__list:not(:last-of-type) {
  margin-bottom: 32px;
}

.Rankings__number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.Rankings__numberText {
  font-family: Roboto, sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #333;
}

.Rankings__numberText.-rank1 {
  color: #b1830a;
}

.Rankings__numberText.-rank2 {
  color: #848896;
}

.Rankings__numberText.-rank3 {
  color: #9a523c;
}

.Rankings__userIconLink {
  display: block;
  text-decoration: none;
}

.Rankings__userIconLink:hover {
  opacity: 0.6;
}

.Rankings__userIconContainer {
  max-height: 94px;
}

.Rankings__supporters .Rankings__userIconContainer {
  max-height: 32px;
}

.Rankings__userIcon {
  box-sizing: border-box;
  border: 2px solid #d8d8d8;
}

.Rankings__userIcon.-size94 {
  border-radius: 36px;
}

.Rankings__userIcon.-size32 {
  border-radius: 12px;
}

.-supporter1 .Rankings__userIconContainer {
  border-radius: 12px;
  padding: 0.25px;
  background-image: linear-gradient(135deg, #b1830a 0%, #ffdb7e 49.48%, #b1830a 100%);
}

.-supporter1 .Rankings__userIconContainer .Rankings__userIcon {
  border-color: transparent;
}

.-supporter2 .Rankings__userIconContainer {
  border-radius: 12px;
  padding: 0.25px;
  background-image: linear-gradient(135deg, #848896 0%, #d2d6e7 50%, #848896 100%);
}

.-supporter2 .Rankings__userIcon {
  border-color: transparent;
}

.-supporter3 .Rankings__userIconContainer {
  border-radius: 12px;
  padding: 0.25px;
  background-image: linear-gradient(135deg, #825445 0%, #d09b8b 50%, #825445 100%);
}

.-supporter3 .Rankings__userIcon {
  border-color: transparent;
}

.Rankings__headLine {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.Rankings__username {
  display: block;
  max-width: 420px;
  font-family: 'Hiragino Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.Rankings__username:hover {
  opacity: 0.6;
}

.Rankings__point {
  font-family: 'Hiragino Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #222;
  white-space: nowrap;
}

.Rankings__supportersContainer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.Rankings__supportersLabel {
  font-family: 'Hiragino Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #222;
  white-space: nowrap;
}

.Rankings__supporters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}