@charset "utf-8";

.page-hero{
padding:48px 52px;
border-radius:17px;
color:var(--color-white);
background:
radial-gradient(circle at 82% 18%,rgba(255,77,157,0.42) 0,rgba(255,77,157,0) 34%),
linear-gradient(135deg,#29213f 0,#181426 100%);
box-shadow:0 24px 60px rgba(30,27,46,0.22);
}

.page-hero_label{
color:var(--color-pink);
font-size:12px;
line-height:1;
letter-spacing:0.14em;
}

.page-hero_title{
margin-top:14px;
font-size:42px;
line-height:1.35;
letter-spacing:0.04em;
}

.page-hero_text{
max-width:620px;
margin-top:14px;
font-size:14px;
line-height:1.9;
color:rgba(255,255,255,0.82);
}

.ranking-section{
margin-top:48px;
}

.ranking-type-tabs{
margin-bottom:28px;
padding:6px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
border-radius:14px;
background:#ece9f3;
}

.ranking-type-tabs a{
min-height:50px;
padding:0 20px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
color:#777286;
background:transparent;
font-size:14px;
font-weight:700;
}

.ranking-type-tabs a.is-active{
color:#fff;
background:linear-gradient(135deg,var(--color-pink),var(--color-purple));
box-shadow:0 9px 22px rgba(255,77,157,.2);
}

.section_head{
margin-bottom:24px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
}

.section_label{
margin-bottom:8px;
color:var(--color-pink);
font-size:12px;
line-height:1;
letter-spacing:0.14em;
}

.section_title{
font-size:28px;
line-height:1.35;
color:var(--color-main);
}

.section_time{
font-size:12px;
line-height:1;
color:#8f8aa3;
}

.ranking-tabs{
margin-bottom:24px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.ranking-tabs a{
height:42px;
padding:0 18px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
color:var(--color-main);
background:var(--color-white);
box-shadow:var(--shadow-card);
font-size:12px;
line-height:1;
}

.ranking-tabs a.is-active,
.ranking-tabs a:hover{
color:var(--color-white);
background:linear-gradient(135deg,var(--color-pink),var(--color-purple));
}

.ranking-pickup{
margin-bottom:24px;
}

.ranking-pickup_card{
position:relative;
display:grid;
grid-template-columns:420px 1fr;
min-height:300px;
border-radius:17px;
background:var(--color-white);
box-shadow:var(--shadow-card);
overflow:hidden;
}

.ranking-pickup_badge{
position:absolute;
top:20px;
left:20px;
z-index:2;
height:36px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
color:var(--color-white);
background:linear-gradient(135deg,#f6b93b,#ff4d9d);
font-size:13px;
line-height:1;
letter-spacing:0.04em;
}

.ranking-pickup_image{
background:#1e1b2e;
overflow:hidden;
}

.ranking-pickup_image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

.ranking-pickup_body{
padding:34px;
}

.shop-card_area{
display:inline-flex;
align-items:center;
height:28px;
padding:0 11px;
border-radius:14px;
font-size:11px;
line-height:1;
color:var(--color-purple);
background:#f0edff;
}

.ranking-pickup_name{
margin-top:20px;
font-size:34px;
line-height:1.25;
color:var(--color-main);
}

.ranking-pickup_kana{
margin-top:8px;
font-size:12px;
line-height:1;
color:#8f8aa3;
}

.ranking-pickup_text{
margin-top:18px;
font-size:14px;
line-height:1.9;
color:#8f8aa3;
}

.ranking-pickup_data{
margin-top:28px;
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:10px;
}

.ranking-pickup_data div{
padding:18px 8px;
border-radius:9px;
background:#f7f7fb;
text-align:center;
}

.ranking-pickup_data dt{
font-size:12px;
line-height:1;
color:#8f8aa3;
}

.ranking-pickup_data dd{
margin-top:9px;
font-size:13px;
line-height:1;
color:var(--color-main);
}

.ranking-pickup_data strong{
font-size:30px;
line-height:1;
color:var(--color-pink);
}

.ranking-pickup_data-access{
grid-template-columns:minmax(180px,260px);
}

.ranking-list{
display:grid;
gap:14px;
}

.ranking-item{
padding:0;
display:block;
border-radius:10px;
background:var(--color-white);
box-shadow:var(--shadow-card);
overflow:hidden;
}

.ranking-item-empty{
min-height:140px;
padding:30px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.ranking-item-empty p{
margin:0;
color:#817b94;
font-size:14px;
line-height:1.8;
}

.ranking-item_link{
min-height:92px;
padding:18px 20px;
display:grid;
grid-template-columns:48px 86px 1fr 86px auto 18px;
align-items:center;
gap:16px;
}

.ranking-list.is-access .ranking-item_link{
grid-template-columns:48px 86px 1fr auto 18px;
}

.ranking-item_rank{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
color:var(--color-white);
background:var(--color-main);
font-size:18px;
line-height:1;
}

.ranking-item_rank.is-gold{
background:linear-gradient(135deg,#f6b93b,#ff4d9d);
}

.ranking-item_rank.is-silver{
background:linear-gradient(135deg,#9aa0b5,#7b61ff);
}

.ranking-item_rank.is-bronze{
background:linear-gradient(135deg,#c8794a,#ff4d9d);
}

.ranking-item_image{
width:86px;
height:58px;
display:block;
border-radius:8px;
background:#1e1b2e;
overflow:hidden;
}

.ranking-item_image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

.ranking-item_text{
display:grid;
gap:6px;
}

.ranking-item_name{
font-size:16px;
line-height:1;
color:var(--color-main);
}

.ranking-item_kana{
font-size:11px;
line-height:1;
color:#8f8aa3;
}

.ranking-item_status{
height:28px;
padding:0 11px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:14px;
color:var(--color-white);
font-size:11px;
line-height:1;
white-space:nowrap;
}

.ranking-item_status.is-busy{
background:var(--color-pink);
}

.ranking-item_status.is-normal{
background:var(--color-purple);
}

.ranking-item_status.is-light{
background:#28b78d;
}

.ranking-item_count{
font-size:13px;
line-height:1;
color:var(--color-pink);
white-space:nowrap;
}

.ranking-item_count strong{
font-size:26px;
line-height:1;
}

.ranking-item_arrow{
font-size:26px;
line-height:1;
color:#b7b3c7;
}

@media screen and (max-width:1180px){

.ranking-pickup_card{
grid-template-columns:1fr;
}

.ranking-pickup_image{
height:280px;
}

.ranking-item_link{
grid-template-columns:48px 86px 1fr auto 18px;
}

.ranking-item_status{
display:none;
}
}