@charset "utf-8";

.shop-card{
padding:15px;
border-radius:12px;
background:var(--color-white);
box-shadow:var(--shadow-card);
overflow:hidden;
}

/* 上部：左に画像、右に店舗情報 */
.shop-card_top{
display:grid;
grid-template-columns:80px minmax(0,1fr) 80px;
align-items:center;
gap:8px;
}

/* 正方形の店舗画像 */
.shop-card_image{
width:70px;
height:70px;
margin:0;
display:block;
border-radius:35px;
overflow:hidden;
}

.shop-card_image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:0.3s;
}

.shop-card_image:hover img{
transform:scale(1.05);
}

/* 画像右側の店舗情報 */
.shop-card_info{
flex:1;
min-width:0;
}

.shop-card_head{
display:flex;
align-items:center;
justify-content:flex-start;
flex-wrap:nowrap;
gap:5px;
}

.shop-card_area,
.shop-card_status{
display:inline-flex;
align-items:center;
height:28px;
padding:0 8px;
border-radius:14px;
font-size:10px;
line-height:1;
font-weight:700;
white-space:nowrap;
}

.shop-card_area{
color:var(--color-purple);
background:#f0edff;
}

.shop-card_status{
color:var(--color-white);
}

.shop-card_status.is-busy{
background:var(--color-pink);
}

.shop-card_status.is-normal{
background:var(--color-purple);
}

.shop-card_status.is-light{
background:#28b78d;
}

.shop-card_name{
margin:10px 0 0;
font-size:21px;
line-height:1.35;
color:var(--color-main);
overflow-wrap:anywhere;
}

.shop-card_kana{
margin:5px 0 0;
font-size:12px;
line-height:1.4;
color:var(--color-main);
overflow-wrap:anywhere;
}

.shop-card_forecast{
width:100%;
min-height:90px;
padding:10px 6px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:12px;
background:var(--color-pink);
text-align:center;
box-sizing:border-box;
}

.shop-card_forecast-label{
font-size:11px;
line-height:1.2;
color:#fff;
font-weight:700;
}

.shop-card_forecast-value{
margin:8px 0 0;
font-size:13px;
line-height:1;
color:#fff;
font-weight:700;
}

.shop-card_forecast-value strong{
font-size:38px;
font-weight: 600;
line-height:1;
color:#fff;
}

/* 来店予測・男女・カップル・不明 */
.shop-card_data{
margin-top:20px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:5px;
}

.shop-card_data div{
padding:10px 4px;
border-radius:9px;
background:#f7f7fb;
text-align:center;
}


.shop-card_data dt{
font-size:11px;
line-height:1;
color:#8f8aa3;
font-weight:700;
}

.shop-card_data dd{
margin-top:5px;
font-size:13px;
line-height:1;
color:var(--color-main);
font-weight:700;
}

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

.shop-card_data .shop-card_count-number{
font-size:22px;
line-height:1;
color:var(--color-pink);
}

.shop-card_meta{
margin-top:14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

.shop-card_update{
margin:0;
font-size:13px;
line-height:1.6;
color:var(--color-main);
font-weight:700;
}

.shop-card_favorite{
min-height:34px;
padding:0 13px;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
border:1px solid rgba(255,77,157,.3);
border-radius:17px;
color:var(--color-pink);
background:#fff5fa;
font:inherit;
font-size:11px;
line-height:1;
font-weight:700;
white-space:nowrap;
cursor:pointer;
transition:background .2s,color .2s,transform .2s;
}

.shop-card_favorite:hover{
transform:translateY(-1px);
background:#ffe8f3;
}

.shop-card_favorite:focus-visible{
outline:3px solid rgba(255,77,157,.25);
outline-offset:2px;
}

.shop-card_favorite.is-favorite{
color:#fff;
background:var(--color-pink);
}

.shop-card_maybe-visit{
width:100%;
min-height:38px;
margin-top:10px;
padding:8px 14px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
border:1px solid rgba(123,97,255,.3);
border-radius:19px;
color:var(--color-purple);
background:#f5f2ff;
font:inherit;
font-size:12px;
line-height:1;
font-weight:700;
cursor:pointer;
transition:background .2s,color .2s,transform .2s;
}

.shop-card_maybe-visit:hover{
transform:translateY(-1px);
background:#ebe5ff;
}

.shop-card_maybe-visit:focus-visible{
outline:3px solid rgba(123,97,255,.25);
outline-offset:2px;
}

.shop-card_maybe-visit.is-registered{
color:#fff;
background:linear-gradient(135deg,var(--color-purple),var(--color-pink));
}

.shop-card_maybe-visit:disabled{
cursor:wait;
opacity:.7;
}

.shop-card_maybe-visit strong{
font-size:15px;
}

.shop-card_note{
margin-top:10px;
font-size:13px;
line-height:1.8;
color:var(--color-main);
font-weight:700;
}

.shop-card_link{
width: 90%;
margin: 0px auto;
margin-top:15px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
color:var(--color-white);
background:var(--color-main);
font-size:12px;
line-height:1;
font-weight:700;
}

.shop-card_link:hover{
background:var(--color-pink);
}

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

.shop-card{
padding:18px;
}

.shop-card_top{
grid-template-columns:78px minmax(0,1fr) 76px;
align-items:start;
gap:9px;
}

.shop-card_image{
width:70px;
height:70px;
border-radius:35px;
}

.shop-card_head{
gap:5px;
}

.shop-card_area,
.shop-card_status{
height:24px;
padding:0 7px;
font-size:9px;
}

.shop-card_name{
margin-top:8px;
font-size:17px;
}

.shop-card_kana{
margin-top:3px;
font-size:10px;
}

.shop-card_forecast{
min-height:82px;
padding:7px 3px;
border-radius:10px;
}

.shop-card_forecast-label{
font-size:12px;
}

.shop-card_forecast-value{
margin-top:6px;
font-size:11px;
}

.shop-card_forecast-value strong{
font-size:40px;
font-weight: 600
}

.shop-card_data{
margin-top:10px;
grid-template-columns:repeat(4,1fr);
gap:5px;
}

.shop-card_data div{
padding:10px 3px;
}

.shop-card_data dt{
font-size:12px;
}

.shop-card_data dd{
font-size:12px;
}

.shop-card_data strong{
font-size:28px;
}

.shop-card_data .shop-card_count-number{
font-size:20px;
}

.shop-card_meta{
margin-top:12px;
gap:7px;
}

.shop-card_update{
font-size:12px;
}

.shop-card_favorite{
min-height:32px;
padding:0 10px;
border-radius:16px;
font-size:12px;
letter-spacing: 1px
}

.shop-card_maybe-visit{
min-height:36px;
margin-top:8px;
font-size:12px;
}

.shop-card_maybe-visit strong{
font-size:14px;
}

}