@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Noto+Sans+JP:wght@700;900&display=swap');
body{font:normal 20px/1.6 Meiryo,Helvetica,arial,sans-serif;color:#333;margin:0;background: #c41315ff;}
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: 20px 0 10px;position: fixed-;top:0;left:0;width: 100%;z-index: 99;color: #fff;display: flex;align-items: center;justify-content: center;}
header h1{font-size:clamp(20px,7vw,50px); margin: 0;color: #fff;line-height: 1}
header span{letter-spacing: 4px;font-size: clamp(14px,5vw,25px);}
header > div{;max-width: 600px;width: 80%}
header img{display: block;margin: 0 auto;width: 100%}
/* .wrap{min-height: calc(100vh - 160px);padding-top: 160px;} */
section{padding: 20px;}
/* .ranking_section{background: url(images/bg.webp) center top / 100% auto no-repeat fixed;} */
.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;
}
.ranking_date.diaend{font-size: clamp(16px,3.8vw,38px);}
.latest_schedule{text-align: center;padding: 0px 0 0;max-width: 700px;width: 100%;margin: 0 auto}
.latest_schedule img{margin-bottom: 5px;}
.titleimg{margin: 40px 0 20px;text-align: center;}
.kishuwaku {background: #fff;margin: 15px 0 10px;border-radius: 8px;font-weight: bold;}
.kishuwaku.sugo{border-left:2px solid #111;border-right:2px solid #111;}
.kishuwaku.ura{border-left:2px solid #333;border-right:2px solid #333;}
.ranking_kikan{background: #000;text-align: center;color: #fff;font-weight: bold;margin-top: 15px;}
.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: #111;}
.ura .r_abajo strong{background: #333;}
.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_sugo.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;}
.banner{text-align: center;padding: 5px 0;}
.banner img{max-width: 90%;margin: 0 auto 10px;display: block;width: 600px;}
.shopmonth{text-align: center;}
.shopmonth img{max-width: 95%;width: 800px;}
.kishuwaku_past{display: grid;grid-template-columns: 3fr 1fr 2fr;text-align: center;font-weight:bold;background: #000;color:#fff;margin-bottom: 10px;}
.kishuwaku_past.gridB_4{grid-template-columns: 2.9fr 1fr 1.2fr 2.1fr;}
.kishuwaku_past.gridB_4 span{font-size: clamp(20px,3.8vw,38px);}
.past_ranking_title{text-align: center;padding: 50px 0 30px;}
.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;}
.kishuwaku_past > div{border-left: 2px solid #000;}
.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: #000;color: #999;font-size: clamp(9px,1vw,11px);display: block;width: 100%;letter-spacing: 3px;font-weight: normal;margin-top: 10px;}
.kishuwaku_past strong + div{padding-bottom: 10px;}
.ura .kishuwaku_past strong{background: #9245d8;color: #fff;display: block;}
.grad{position: relative;}
.grad::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to right, transparent, #000);
}
.saidai{position: relative;}
.saidai img.slot_comp{position: absolute;top:0;left:0;  animation: fadeInOut 4s ease-in-out infinite;opacity: 0;}
@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  50% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
.kishuwaku_past span{font-size: clamp(19px,3.5vw,48px);font-family: 'Oswald', sans-serif;}
.kishuwaku_past span.unit,.r_abajo strong + div span.unit{font-size: 16px ;}
.kishuwaku_past span.masomenos,.r_abajo strong + div span.masomenos{font-size: 19px;}
.kishuwaku_past div.saidai span{color: #ffd700;text-shadow: 0 0 15px rgba(255,215,0,0.3);}
.rank_badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.rank_1 {
  background: linear-gradient(135deg, #ffd700, #ffec80, #ffd700);
}
.rank_2 {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8, #c0c0c0);
}
.rank_3 {
  background: linear-gradient(135deg, #cd7f32, #e8a862, #cd7f32);
}
.past_ranking .raning_pc_grid{margin-bottom: 50px;}
.raning_pc_grid h3{color: #fff;text-align: center;}
.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;border-radius: 12px;}
.past_links{width: 600px;max-width: 100%;margin: 10px auto;text-align: center;}
.past_links a{display: block;font-weight: bold;text-decoration: none;color: #fff;font-size: clamp(20px,7vw,45px);border-bottom: 5px solid #d35e3a;margin: 20px 0;border-radius: 10px;padding:10px;}
.past_links a:hover,.past_links a.active{background: #fff;color: #333}
.future_schedule_grid > div div a ,.s_img a,.interview_label,.multi_writers span{background: #000;color: #fff;text-align: center;text-decoration: none;display: block;font-weight: bold;padding: 5px;border-radius: 5px;font-size: 14px}
img.twittericon{height:25px;vertical-align: middle;}
.s_img{margin: 30px auto 10px;text-align: center;width: 700px;max-width: 100%;}
.cta_btn{text-align: center;margin:  40px 0}
.cta_btn a{text-decoration: none;display: inline-block;background: linear-gradient(135deg, #D8A153, #753F26, #FEF6E3);color: #fff;font-weight: bold;padding: 20px 40px;font-size: 40px;border-radius: 50px}
.date_links{display: grid;grid-template-columns: repeat(4,1fr);grid-gap: clamp(10px,2vw,30px);margin: 20px auto;max-width: 1024px;}
.date_links a{background: #000;color: #fff;border: clamp(3px,1vw,6px) solid #fff;border-radius: 10px;text-align: center;text-decoration: none;font-weight: bold;font-size: clamp(20px,4vw,50px);padding: 10px 0}
.date_links a.endari{font-size:clamp(13px,3.1vw,38px); }
.multi_writers{display: flex;justify-content: center;padding:  0;margin-bottom: 5px;}
.multi_writers a,.multi_writers span{background: #000;color: #fff;text-decoration: none;border-radius: 5px;margin: 0 2px;font-size: 14px;flex:1;font-weight: bold;}
.multi_writers.morew a,
.multi_writers.morew span{font-size: 11px;}
.schedule_meta{margin-top: 5px;}
footer{background: #000;text-align: center;padding: 10px 0;color: #fff;font-size: 18px;}
footer a{text-decoration: none;color: #fff;}
@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%;}
   .raning_pc_grid.no_grid{grid-template-columns: 1fr;width: 700px;max-width: 100%;}
   .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;}
   /* .future_schedule_grid{display: grid;grid-template-columns: 1fr 1fr;grid-gap: 20px;} */
   .future_schedule_grid{display:flex;flex-wrap: wrap;justify-content: center;}
   .future_schedule_grid > div{width: 47%;margin: 10px}
   .logos{width:712px;margin: 0 auto;}
   .r_abajo strong + div{min-height: 75px;}
   .kishuwaku_past span.unit{font-size: 16px ;margin-bottom:-9px; }
   .banner{display: flex;justify-content: center;}
}
@media screen and (min-width: 0px) and (max-width: 720px) {
   body{font-size: 16px;}
   section{padding: 10px;}
   header{padding: 15px 0 10px;}
   header img{}
   /* .fv{padding-top: 36vh} */
   img.yokoku{width: 85%;}
   /* .wrap{padding-top: 110px;} */
   .ranking_date{width:100%}
   .ranking_section{background-size: 240% auto}
   .raning_pc_grid > div{margin: 30px 10px;}
   .future_schedule_grid > div{margin-bottom: 10px;}
   .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 ;margin-bottom: -3px;}
   .kishuwaku_past strong{font-size: clamp(9px,2vw,16px);}
   .kishuwaku_past span {font-size: clamp(19px,8vw,46px);}
   /* .kishuwaku_past > div > div{height: calc(100% - 18px);} */
   span.suuchi{font-size: 19px;}
   .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%;}
}