@charset "utf-8";

/* 店舗一覧（/shop/・トップ） ------------- */
.shop-list {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:min(3vw,30px);
  > li {
    display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:.5em; min-width:0;
    padding:0 0 1em; background-color:var(--color-wht); box-shadow:var(--shadow1);
  }
  .name { padding:.5em; font-size:1.1em; line-height:1.4; text-align:center; color:var(--color-wht); background-color:var(--color-base); }
  .thumb img { width:100%; aspect-ratio:4 / 3; object-fit:cover; }
  .addr, .tel { margin-block:0; padding-inline:1em; font-size:.9em; line-height:1.5; }
  .tel a { font-weight:bold; }
  .link {
    display:grid; grid-template-columns:repeat(2, 1fr); gap:.5em; padding-inline:.75em;
    li { min-width:0; }
    a { display:block; padding:.5em 0; text-align:center; text-align:center; color:var(--color-wht); background-color:var(--color-tel); border-radius:5px;
      &.stock { background-color:var(--color-zaiko); }
    }
  }
}

/* 店舗詳細 ------------- */
.shop-lead { margin-top:1em; font-size:1.3em; font-weight:700; color:var(--color-base); }
.shop-text { margin-top:.5em; line-height:1.8; }

.shop-info-area {
  display:grid; gap:min(4vw,40px); margin-top:min(5%,40px);
}
.shop-slider { min-width:0; /* grid内でSwiperの幅がはみ出さないように */
  img { width:100%; aspect-ratio:4 / 3; object-fit:cover; }
  .shop-thumb {
    margin-top:6px;
    .swiper-slide { cursor:pointer; opacity:.5; transition:opacity .3s; }
    .swiper-slide-thumb-active { opacity:1; }
  }
  div[class*="swiper-button"] { color:var(--color-wht); }
}
.shop-info { border-top:1px solid var(--color-gry2);
  .data {
    div { display:grid; grid-template-columns:7em 1fr; border-bottom:1px solid var(--color-gry2); }
    dt { padding:.7em; font-weight:bold; background-color:var(--color-gry0); }
    dd { padding:.7em; line-height:1.6; }
    a { font-weight:bold; }
  }
  .reserve { margin-top:1.5em; text-align:center; }
}
.shop-access { margin-top:1em;
  div + div { margin-top:.75em; }
  dt { padding:.5em; background:var(--color-gry0); border-bottom:1px solid var(--color-gry2); }
  dd { padding:.75em .5em; }
}

.shop-flyer {
  display:flex; justify-content:center; gap:20px;
  li { flex:1; max-width:800px; }
  img { display:block; width:100%; height:auto; }
}
.shop-gmap iframe { display:block; width:100%; height:450px; }


/* PC ---------------------------------------------------------- */
:where(body.pc) {
  .shop-info-area { grid-template-columns:repeat(2, 1fr); }
}

/* スマホ ------------------------------------------------------ */
:where(body.sp) {
  .shop-list { grid-template-columns:repeat(2, 1fr);
    .link { padding-inline:.5em; a { font-size:.875em } }
  }
  .shop-info .data div { grid-template-columns:6.5em 1fr; }
  .shop-flyer { flex-direction:column; align-items:center; }
  .shop-gmap iframe { height:300px; }
}