@charset "utf-8";

.page-hero{
padding:28px 20px 24px;
border-radius:14px;
color:var(--color-white);
background:
radial-gradient(circle at 84% 18%,rgba(255,77,157,0.42) 0,rgba(255,77,157,0) 34%),
linear-gradient(135deg,#29213f 0,#181426 100%);
box-shadow:0 20px 50px rgba(15,12,26,0.25);
}

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

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

.page-hero_text{
margin-top:12px;
font-size:13px;
line-height:1.9;
color:rgba(255,255,255,0.82);
}

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

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

.ranking-type-tabs a{
min-height:44px;
padding:0 8px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border-radius:9px;
color:#777286;
font-size:12px;
font-weight:700;
}

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

.section_head{
margin-bottom:14px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
gap:6px;
}

.section_label{
margin-bottom:0;
color:var(--color-pink);
font-size:11px;
line-height:1;
letter-spacing:0.12em;
}

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

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

.ranking-tabs{
margin-bottom:16px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
}

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

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

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

.ranking-pickup_card{
position:relative;
display:block;
border-radius:14px;
background:var(--color-white);
box-shadow:var(--shadow-card);
overflow:hidden;
}

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

.ranking-pickup_image{
width:100%;
height:180px;
background:#1e1b2e;
overflow:hidden;
}

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

.ranking-pickup_body{
padding:18px;
}

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

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

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

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

.ranking-pickup_data{
margin-top:18px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
}

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

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

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

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

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

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

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

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

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

.ranking-item_link{
min-height:72px;
padding:12px;
display:grid;
grid-template-columns:38px 58px 1fr auto 14px;
align-items:center;
gap:10px;
}

.ranking-item_rank{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:7px;
color:var(--color-white);
background:var(--color-main);
font-size:16px;
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:58px;
height:44px;
display:block;
border-radius:7px;
background:#1e1b2e;
overflow:hidden;
}

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

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

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

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

.ranking-item_status{
display:none;
}

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

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

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