/* =================================================================
   stores.css　店舗一覧（名刺のQRコードから開くページ）
   スマホでは1カラム、PC（幅900px以上）では2カラムで、カードの高さをそろえる
================================================================= */

.stores-page{
  --line:#e2ddd6;
  --inset:clamp(20px,4.5vw,40px);
  line-height:1.8;
}
.stores-main{
  max-width:calc(640px + var(--gutter)*2);
  margin:0 auto;
  padding:56px var(--gutter) 64px;
}

/* ---------- 上部 ---------- */
.stores-top{text-align:center;margin-bottom:36px}
.stores-top .logo{display:inline-block;line-height:0}
.stores-top .logo img{height:36px;width:auto}
.stores-top .company{margin-top:10px;font-size:13px;color:var(--gray);font-weight:500}
.stores-top h1{
  margin-top:28px;
  font-size:clamp(22px,5.4vw,28px);font-weight:900;line-height:1.5;letter-spacing:.03em;
}
.stores-top .lead{margin-top:10px;font-size:14px;color:var(--gray)}

/* 店舗へのジャンプ */
.jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px 0 8px;list-style:none}
.jump a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;text-decoration:none;
  padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);
  transition:border-color .2s;
}
.jump a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.jump a:hover{border-color:var(--ink)}

/* ---------- 店舗カード ---------- */
.store-list{list-style:none;display:grid;gap:24px;margin-top:36px;grid-auto-rows:1fr}
.store-card{
  display:flex;flex-direction:column;
  border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  scroll-margin-top:24px;background:var(--white);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.store-card .photo > img,.store-card .photo > picture{transition:opacity 1.2s ease,transform .8s var(--ease)}
/* ホバー：カードが少し浮き上がり、写真がゆっくり寄る */
@media(hover:hover){
  .store-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(35,32,29,.14);border-color:var(--c)}
  .store-card:hover .photo > img,.store-card:hover .photo > picture{transform:scale(1.05)}
}
.store-card .photo{aspect-ratio:3/2;background:var(--c)}
.store-body{flex:1;display:flex;flex-direction:column;padding:22px var(--inset) 24px}
.store-card .cat{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:var(--gray);
}
.store-card .cat::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.store-card .name{
  margin-top:6px;
  font-size:clamp(24px,6vw,30px);font-weight:900;line-height:1.35;letter-spacing:.02em;
}
.store-card .desc{margin-top:10px;font-size:14.5px;line-height:1.9}
.store-info{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:8px}
.store-info > div{display:grid;grid-template-columns:4.5em 1fr;gap:10px;font-size:14px;line-height:1.75}
.store-info dt{color:var(--gray);font-weight:500}

.store-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:20px}
.store-links a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:700;text-decoration:none;text-align:center;
  padding:14px 12px;border-radius:999px;min-height:50px;
  transition:background .2s,color .2s,transform .2s;
}
.store-links .map{grid-column:1 / -1;background:var(--ink);color:var(--white)}
.store-links .map:hover{transform:translateY(-2px)}
.store-links .site,.store-links .ig{border:1.5px solid var(--ink)}
.store-links .site:hover,.store-links .ig:hover{background:var(--ink);color:var(--white)}
.store-links svg{width:17px;height:17px;flex:0 0 auto}

/* PC：2列に並べて、カードの高さをそろえる（ボタンはカードの下端にそろう） */
@media(min-width:900px){
  .stores-main{max-width:calc(1040px + var(--gutter)*2)}
  .store-list{grid-template-columns:1fr 1fr;gap:20px}
  .store-card .photo{aspect-ratio:16/10}
  .store-card .name{font-size:26px}
  .store-card .desc{font-size:14px;line-height:1.85}
}

/* ---------- 下部 ---------- */
.stores-foot{text-align:center;margin-top:48px;font-size:12px;color:var(--gray)}
.stores-foot a{display:inline-block;margin-bottom:10px;font-weight:700;color:var(--ink)}