body{font:normal 20px/1.6 Meiryo,Helvetica,arial,sans-serif;color:#333;margin:0;}
ul,li{margin:0;padding:0;list-style:none;}
a{color:#;}
*{box-sizing: border-box;}
img{vertical-align:bottom;max-width:100%;}
header{background: #000;text-align: center;padding: 40px 0;position: fixed;top:0;left:0;width: 100%;z-index: 99;}
header img{height: 34px;}
.wrap{min-height: calc(100vh - 70px);padding-top: 112px;background: url(images/bg_content.webp) center top / 100% auto;}
section{padding: 20px;}
.ranking_section{background: url(images/bg_fv.webp) center top / 100% auto no-repeat;}
.logos{text-align: center;}
img.logo{width: 100%;}
img.yokoku{width: 70%;}
.ranking_date{text-align: center;font-size: 40px;color: #fff;font-weight: bold;margin:20px auto 20px;width: 60%;
     background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1), var(--g-color-2) var(--g-position-2), var(--g-color-3) var(--g-position-3));
     --g-color-0: rgba(0, 0, 0, 0);
     --g-position-0: 1%;
     --g-color-1: #000000;
     --g-position-1: 35%;
     --g-color-2: rgb(0, 0, 0);
     --g-position-2: 65%;
     --g-color-3: rgba(0, 0, 0, 0);
     --g-position-3: 100%;
     --g-color-4: rgba(0, 0, 0, 0);
     --g-position-4: 100%;
     --g-color-5: rgba(0, 0, 0, 0);
     --g-position-5: 100%;
     --g-color-6: rgba(0, 0, 0, 0);
     --g-position-6: 100%;
     --g-color-7: rgba(0, 0, 0, 0);
     --g-position-7: 100%;
     --g-color-8: rgba(0, 0, 0, 0);
     --g-position-8: 100%;
     --g-color-9: rgba(0, 0, 0, 0);
     --g-position-9: 100%;
     --g-color-10: rgba(0, 0, 0, 0);
     --g-position-10: 100%;
     --g-color-11: rgba(0, 0, 0, 0);
     --g-position-11: 100%;
     --g-angle: 90deg;
}
.kishuwaku {background: #fff;margin: 15px 0 10px;border-radius: 8px;font-weight: bold;}
.kishuwaku.ura{border-left:2px solid #9245d8;border-right:2px solid #9245d8;}
.kishuwaku.sugo{border-left:2px solid #ffb100;border-right:2px solid #ffb100;}
.r_arriba{display: grid;grid-template-columns: 1fr 2.5fr 0.7fr;background: #000;color: #fff;text-align: center;border-radius: 8px 8px 0 0}
.r_arriba strong{display: block;font-size: 35px;line-height: 0.8;width: 100%;}
.r_arriba span{display: block;width: 100%;}
.r_abajo{display: grid;text-align: center;border-radius: 0 0 8px 8px}
.r_abajo:hover span.suuchi{color: #f00}
span.suuchi{font-size: 30px;}
.grid1{grid-template-columns: 1fr;}
.grid2{grid-template-columns: 1fr 1fr;}
.grid3{grid-template-columns: 1fr 1fr 1fr;}
.r_abajo strong{color: #fff;display: block;letter-spacing: 4px;width: 100%;font-size: min(1.8vw,20px);}
.sugo .r_abajo strong{background: #ffb100;}
.ura .r_abajo strong{background: #9245d8;}
.r_rank{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;align-content: center;border-radius: 10px 0 0 0}
.r_rank_juni::before,
.r_rank_juni::after
{content:'';width:20px;height: 20px;display: inline-block;background:url(images/rank_sugo.png) center center / 100% auto no-repeat;margin:0 3px;}
.ura .r_rank_juni::before,
.ura .r_rank_juni::after{background:url(images/rank_ura.png) center center / 100% auto no-repeat;}
.r_push{display: flex;align-items: center;justify-content: center;border-radius: 0 10px 0 0}
.r_push img{width: 80%; transition: transform .3s ease;}
.r_push img:hover{transform: scale(1.2);}
.r_img img{width: 100%}
.r_abajo > div:nth-child(2){border-left: 3px solid #ffb100;border-right: 3px solid #ffb100;}
.ura .r_abajo > div:nth-child(2){border-left: 3px solid #9245d8;border-right: 3px solid #9245d8;}
.r_abajo strong + div{display: flex;justify-content: center;align-items: center;align-content: center;font-size: min(1.8vw,38px);flex-wrap: wrap;height:calc(100% - 30px);}
.ura .r_abajo.grid2 > div:nth-child(2){border-right-width: 0;}
.r_ruikei_saishu > div{width: 100%;line-height:1.2;}
span.unit{font-size: 16px !important;margin-bottom:-7px; }
.banner{text-align: center;padding: 5px 0}
.banner img{max-width: 90%;margin: 0 auto;display: block;width: 600px;}
.kishuwaku_past{display: grid;grid-template-columns: 2fr 1.2fr 2fr;text-align: center;font-weight:bold;background: #fff;margin-bottom: 10px;}
.past_ranking_title{text-align: center;}
.past_ranking h2{text-align: center;color: #fff;margin: 20px 0 10px;font-size: 23px;letter-spacing: 2px;}
.kishuwaku_past > div > div{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;height:calc(100% - 32px);}
.kishuwaku_past > div:nth-child(2){border-left: 2px solid #ffb100;border-right: 2px solid #ffb100;}
.ura .kishuwaku_past > div:nth-child(2){border-left: 2px solid #9245d8;border-right: 2px solid #9245d8;}
.kishuwaku_past img{object-fit: cover;height: 100%;width: 100%}
.kishuwaku_past strong{background: #ffb100;color: #000;display: block;width: 100%;letter-spacing: 3px;}
.ura .kishuwaku_past strong{background: #9245d8;color: #fff;display: block;}
.kishuwaku_past span{font-size: 25px;}
.past_ranking .raning_pc_grid{margin-bottom: 50px;}
.store_section{padding: 50px 0 80px;background: #eee;}
.store_section h3{text-align: center;font-weight: normal;font-size: 30px;letter-spacing: 2px;}
.store_section h3 span{font-size: 14px;display: block;font-weight: bold;letter-spacing: 0;}
.store_section table{background: #fff;width: 100%;border-collapse: collapse;font-weight: bold;}
.store_section table th{background: #777;color: #fff;text-align: left;}
.store_section table th,
.store_section table td{padding: 5px 10px;border-bottom: 1px solid #ddd}
.store_section img{margin-bottom: 10px;}
iframe{width: 100%}
.store_sns{text-align: center;margin: 20px 0}
.store_sns img{width: 50px;margin: 0 10px;}
footer{background: #000;text-align: center;padding: 10px 0;color: #fff;font-size: 12px;}
@media screen and (min-width: 721px) {
   .fv{padding-top: 75vh}
   section{max-width: 1400px;margin: 0 auto;}
   .raning_pc_grid{display: grid;grid-template-columns: 1fr 1fr;max-width: 1400px;grid-gap: 50px;margin: 0 auto;max-width: 95%;}
   .store_grid{display: grid;grid-template-columns: 1fr 1fr;max-width: 1200px;grid-gap: 20px;margin: 0 auto;max-width: 95%;}
   .sotore_info{display: grid;grid-template-columns: 1fr 2fr;margin: 0 auto;grid-gap: 20px;}
   .logos{width:712px;margin: 0 auto;}
   .r_abajo strong + div{min-height: 75px;}
}
@media screen and (min-width: 0px) and (max-width: 720px) {
   body{font-size: 16px;}
   section{padding: 10px;}
   header{padding: 20px 0;}
   header img{height: 30px;}
   .fv{padding-top: 36vh}
   img.yokoku{width: 85%;}
   .wrap{padding-top: 70px;}
   .ranking_date{width:100%}
   .ranking_section{background-size: 240% auto}
   .raning_pc_grid > div{margin-top: 30px;}
   .r_arriba{font-size: 12px;}
   .r_arriba strong{font-size: 20px;}
   .r_abajo strong{font-size: 16px;}
   .r_abajo strong + div{font-size: 16px;height:calc(100% - 26px);}
   span.unit{font-size: 11px !important;}
   .kishuwaku_past span.unit{font-size: 13px !important;}
   span.suuchi{font-size: 19px;}
   .kishuwaku_past strong{font-size: 13px;}
   .past_ranking h2{font-size: 16px;}
   .store_section{padding: 15px;text-align: center;}
   .store_section table{text-align: left;margin: 20px auto;}
   .sotore_info img{width: 50%;}
}