@charset "shift_jis";
main {width: 100%;margin: 0;}
.ranking {
  width: 100%;max-width: 440px;height: auto;
  margin: 0 auto;
}
/*
.page {
  width: 210mm;height: 297mm;
  margin: 0 auto;
  page-break-after: always;
}
.page > div {height: 297mm;}
.page:last-of-type {page-break-after: auto;}
@media screen and (max-width: 999px){
  .page {
    width: 100%;max-width: 210mm;height: auto;
  }
  .page > div {height: auto;}
}*/

.page {
  width: 100%;height: auto;
  margin: 0 auto;
}
/* ranking title */
.ranking .page:nth-of-type(2) .ranking_title h2,
.ranking .page:nth-of-type(3) .ranking_title h2 {
}
/* bg */
.ranking .page:first-of-type .ranking_list {
  background: url("../../temp5/img/ranking/ranking1.webp") no-repeat;
  background-position: center top;
  background-size: cover;
}
.ranking .spacer {
  width: 100%;height: 4px;
  margin: 10px 0;
  background: repeating-linear-gradient(45deg, #daaf08 0, #fee9a0 50%, #daaf08 100%);
  display: block;
}
.ranking .page:nth-of-type(2) > div {
  background: url("../../temp5/img/ranking/ranking2.webp") no-repeat;
  background-position: center top;
  background-size: cover;
}
.ranking .page:nth-of-type(3) > div {
  background: url("../../temp5/img/ranking/ranking3.webp") no-repeat;
  background-position: center top;
  background-size: cover;
}

/* ranking list */
.ranking .page .ranking_list {padding-bottom: 20px;}
.ranking_list ul {
  width: 100%;max-width: 400px;
  margin: 0 auto;padding-top: 16px;
  gap: 2%;
}
.ranking_list li {
  width: calc( 98% / 2 );
  margin-bottom: 2%;
}
.ranking .page:first-of-type .ranking_list li:first-of-type {
  width: 100%;
}
.ranking .page:nth-of-type(2) .ranking_list li:first-of-type,
.ranking .page:nth-of-type(3) .ranking_list li:first-of-type {
  width: 100%;
}
/*
.ranking .page:nth-of-type(2) .ranking_list li:first-of-type,
.ranking .page:nth-of-type(3) .ranking_list li:first-of-type {
  border: solid 2px #efd26d;
}
.ranking .page:nth-of-type(2) .ranking_list li:nth-of-type(2),
.ranking .page:nth-of-type(3) .ranking_list li:nth-of-type(2) {
  border: solid 2px #b3b3b3;
}
.ranking .page:nth-of-type(2) .ranking_list li:nth-of-type(3),
.ranking .page:nth-of-type(3) .ranking_list li:nth-of-type(3) {
  border: solid 2px #fa6833;
}
*/
figure {
  position: relative;
}
.ranking_list .rank {
  width: 30%;
  position: absolute;top: 0;left: 0;
}
.ranking_list li:nth-of-type(n+4) .rank {
  width: 20%;
  position: absolute;top: 2%;left: 3%;
}
figcaption {
  width: 100%;
  padding: .6em;
  position: absolute;bottom: 1em;
  background: rgba(255, 255, 255, .7);
}

.updown {
  width: 40px;height: 40px;
  display: inline-block;
  border-radius: 50%;
  font-size: 10px;color: white;
  position: absolute;bottom: 20%;right: 4%;
}
.ranking .page:first-of-type .ranking_list li:first-of-type .updown {
  width: 60px;height: 60px;
  font-size: 14px;
  position: absolute;bottom: 12%;right: 4%;
}
.updown span {
  width: 100%;
  display: inline-block;
  line-height: 1em;
  transform: translateY(-50%);
}
.updown.up {
  background: #e7000d;
}
.updown.up span {
  position: absolute;top: 38%;left: 0;
}
.updown.up span::before {
  content: "��";
  display: block;
}
.updown.down {
  background: #019fe8;
}
.updown.down span {
  position: absolute;top: 60%;left: 0;
}
.updown.down span::after {
  content: "��";
  display: block;
}
.updown.keep {
  background: #00a199;
}
.updown.keep span {
  position: absolute;top: 50%;left: 0;
}
@media screen and (min-width: 1000px){

}
@media print {
  .head-wrap, .bottom-menu, footer{display: none;}
}