@charset "utf-8";

/* ==========================================================================
   店舗詳細ページ(single-company.php) 2026リニューアル
   デザインカンプ: assets/_design/single-subgenre.jpg
   配色変数・パーティクル・CTA は home.css を共用
   ========================================================================== */

/* 店舗のサブジャンルの色(--cc)。配色変数は各セクションで定義されているため、
   ラッパー直下のセクション/ダイアログ/他店舗カードに対して設定する */
.hs_shop_wrap > section, #shop_related .rel_coupon, #shop_related .near_shop { --cc: var(--c-orange); }
.hs_shop_wrap.cat-shopping  > section,  #shop_related .cat-shopping  { --cc: var(--c-pink); }
.hs_shop_wrap.cat-childcare > section, #shop_related .cat-childcare { --cc: var(--c-green); }
.hs_shop_wrap.cat-beauty    > section,    #shop_related .cat-beauty    { --cc: var(--c-blue); }
.hs_shop_wrap.cat-leisure   > section,   #shop_related .cat-leisure   { --cc: var(--c-purple); }
.hs_shop_wrap.cat-sports    > section,    #shop_related .cat-sports    { --cc: var(--c-yellow); }
.hs_shop_wrap.cat-study     > section,     #shop_related .cat-study     { --cc: var(--c-teal); }
.hs_shop_wrap.cat-other     > section,     #shop_related .cat-other     { --cc: var(--c-gray); }
.hs_shop_wrap.cat-pets      > section,      #shop_related .cat-pets      { --cc: var(--c-brown); }
.hs_shop_wrap.cat-relax     > section,     #shop_related .cat-relax     { --cc: var(--c-mint); }
.hs_shop_wrap.cat-nursing   > section,   #shop_related .cat-nursing   { --cc: var(--c-indigo); }
.hs_shop_wrap.cat-health    > section,    #shop_related .cat-health    { --cc: var(--c-lime); }
.hs_shop_wrap.cat-bridal    > section,    #shop_related .cat-bridal    { --cc: var(--c-magenta); }
.hs_shop_wrap.cat-trip      > section,      #shop_related .cat-trip      { --cc: var(--c-navy); }
.hs_shop_wrap.cat-life      > section,      #shop_related .cat-life      { --cc: var(--c-gold); }
.hs_shop_wrap.cat-car       > section,       #shop_related .cat-car       { --cc: var(--c-slate); }

/* 見出し・ボタン等の水色(カンプの「店舗紹介」「大きな地図で見る」等) */
.hs_shop_wrap > section { --c-sky: #2a9fd8; }

#shop_main .wrapper,
#shop_detail .wrapper,
#shop_related .wrapper {
  max-width: 1200px;
  width: 100%;
  padding: 0 10px;
  margin: auto;
  position: relative;
  z-index: 1;
}

.hs_shop_wrap { color: var(--c-text); }
.hs_shop_wrap svg { display: block; }

/* ジャンルバッジ(写真左上・クーポン・他店舗カードで共通) */
.hs_shop_wrap .shop_badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--cc);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* セクション見出し(ハピスマ会員限定クーポン/関連クーポン/近くのお店) */
.shop_sec_title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  text-align: center;
}
.shop_sec_title .deco { flex: 0 0 26px; width: 26px; height: 26px; }
.shop_sec_title .deco svg { width: 100%; height: 100%; }
.shop_sec_title .deco-r { transform: scaleX(-1); }
.shop_sec_title .pin { flex: 0 0 20px; width: 20px; height: 20px; color: var(--c-pink); }
.shop_sec_title .pin svg { width: 100%; height: 100%; }


/* ==========================================================================
   店舗情報+会員限定クーポン
   ========================================================================== */
#shop_main {
  padding: 22px 0 0;
}

.shop_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 34px;
  align-items: start;
}
.shop_primary { min-width: 0; }

/* パンくず */
.shop_breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  padding: 0 14px;
  margin-bottom: 14px;
  font-size: 12px;
}
.shop_breadcrumb li {
  display: flex;
  align-items: center;
  color: #555;
}
.shop_breadcrumb li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 14px 0 12px;
  border-top: 1.5px solid #999;
  border-right: 1.5px solid #999;
  transform: rotate(45deg);
}
.shop_breadcrumb a,
.shop_breadcrumb span { color: #555; transition: color .2s; }
.shop_breadcrumb a:hover { color: var(--c-blue); }

/* 写真ギャラリー */
/* 正方形の枠。写真は切らずに全体を表示し(contain)、縦長・横長で空く部分は
   同じ写真を拡大してぼかした背景(::before。--bg はテンプレート/store.jsで設定)で埋める */
.shop_gallery_main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  background: #f4f1ec;
  box-shadow: 0 14px 28px -20px rgba(0,0,0,.45);
}
.shop_gallery_main::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: var(--bg, none) center / cover no-repeat;
  filter: blur(24px) saturate(1.1);
  opacity: .6;
}
.shop_gallery_main img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .25s;
}
.shop_gallery_main img.is-fading { opacity: 0; }
.shop_gallery_main .shop_badge {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  padding: 6px 20px;
  font-size: 14px;
}

.shop_gallery_thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.shop_gallery_thumbs li { flex: 0 0 88px; }
.shop_gallery_thumbs button {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
  cursor: pointer;
  opacity: .6;
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: opacity .2s, outline-color .2s;
}
.shop_gallery_thumbs button:hover { opacity: .9; }
.shop_gallery_thumbs button.is-current {
  opacity: 1;
  outline-color: var(--cc);
}
.shop_gallery_thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* 店名・概要 */
.shop_head { margin-top: 26px; }
.shop_name {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .04em;
}
.shop_lead {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.9;
  color: #444;
}

.shop_facts {
  display: flex;
  margin-top: 18px;
  padding: 12px 0;
  border-top: 1px solid #f3e7da;
  border-bottom: 1px solid #f3e7da;
  background: #fff;
}
.shop_facts li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 16px;
}
.shop_facts li + li { border-left: 1px solid #f3e7da; }
.shop_facts .ico { flex: 0 0 26px; width: 26px; height: 26px; }
.shop_facts .ico svg { width: 100%; height: 100%; }
.shop_facts .f1 .ico { color: var(--c-pink); }
.shop_facts .f2 .ico { color: var(--c-orange); }
.shop_facts .f3 .ico { color: var(--c-teal); }
.shop_facts .f4 .ico { color: var(--c-yellow); }
.shop_facts .txt { display: flex; flex-direction: column; min-width: 0; }
.shop_facts .label { font-size: 12px; font-weight: 700; line-height: 1.5; }
.shop_facts .value {
  font-size: 12px;
  line-height: 1.5;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 店舗情報+地図 */
.shop_info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  margin-top: 24px;
  padding: 28px 30px 26px;
  border: 1px solid #f6e4d8;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 26px -20px rgba(240,140,90,.5);
}
.shop_info.is-nomap { grid-template-columns: 1fr; }

.shop_info_list > div {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 13.5px;
  line-height: 1.7;
}
.shop_info_list > div + div { margin-top: 12px; }
.shop_info_list dt { flex: 0 0 20px; padding-top: 2px; color: var(--c-pink); }
.shop_info_list dt svg { width: 19px; height: 19px; }
/* 項目名はアイコンで表すため読み上げ用のみ */
.shop_info_list dt span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.shop_info_list dd { min-width: 0; overflow-wrap: anywhere; }
.shop_info_list a { color: var(--c-text); text-decoration: underline; text-decoration-color: #ccc; text-underline-offset: 3px; }
.shop_info_list a:hover { color: var(--c-sky); }

.shop_map { position: relative; display: flex; flex-direction: column; align-items: center; }
.shop_map_frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #eef1f3;
}
.shop_map_frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.shop_map_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 34px;
  margin-top: 14px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--c-sky);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 6px 14px -8px rgba(0,100,160,.6);
  transition: opacity .2s;
}
.shop_map_btn:hover { opacity: .85; }
.shop_info.is-nomap .shop_map { align-items: flex-start; }

/* ハピスマ会員限定クーポン */
.shop_coupons {
  min-width: 0;
  scroll-margin-top: 90px;
}
.shop_coupons_title { margin-bottom: 14px; }

.shop_coupon {
  position: relative;
  padding: 22px 24px 22px;
  border: 1px solid #fbe2d6;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 30px -20px rgba(243,110,141,.55);
}
.shop_coupon + .shop_coupon { margin-top: 22px; }

.shop_coupon_badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.shop_coupon_no {
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--c-pink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
}

.shop_coupon_head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  min-height: 84px;
}
.shop_coupon_value {
  flex: 1;
  min-width: 0;
  color: var(--c-pink);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.shop_coupon_value .num { font-size: 1.6em; letter-spacing: 0; }
.shop_coupon_value.is-mid { font-size: 31px; }
.shop_coupon_value.is-long { font-size: 26px; line-height: 1.35; }
.shop_coupon_value.is-long .num { font-size: 1.45em; }
.shop_coupon_img {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 18px;
  overflow: hidden;
  background: #f6f2ec;
}
.shop_coupon_img img { width: 100%; height: 100%; object-fit: cover; }

.shop_coupon_info {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--c-cream2);
  font-size: 13px;
  line-height: 1.75;
  text-align: center;
}
.shop_coupon_info .note { font-size: 11.5px; color: #888; }


.shop_coupon_toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 190px;
  max-width: 100%;
  height: 30px;
  margin: 18px auto 0;
  border: 1px solid #cfcfcf;
  border-radius: 999px;
  background: #fff;
  color: var(--c-text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .2s;
}
.shop_coupon_toggle:hover { border-color: #999; }
.shop_coupon_toggle svg { width: 10px; height: 10px; transform: rotate(90deg); transition: transform .2s; }
.shop_coupon_toggle .close { display: none; }
.shop_coupon_toggle[aria-expanded="true"] .open { display: none; }
.shop_coupon_toggle[aria-expanded="true"] .close { display: inline; }
.shop_coupon_toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }

.shop_coupon_terms {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #f2f8fc;
}
.shop_coupon_terms[hidden] { display: none; }
.shop_coupon_terms .ttl {
  margin-bottom: 6px;
  color: var(--c-sky);
  font-size: 12.5px;
  font-weight: 700;
}
.shop_coupon_terms li {
  position: relative;
  padding-left: 1em;
  font-size: 12px;
  line-height: 1.9;
}
.shop_coupon_terms li::before { content: "・"; position: absolute; left: 0; }

.shop_coupon_empty {
  padding: 30px 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #eee;
  font-size: 14px;
  text-align: center;
  color: #666;
}


/* ==========================================================================
   店舗紹介 / 利用方法 / 注意事項
   ========================================================================== */
#shop_detail {
  padding: 44px 0 0;
}

.shop_boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.shop_boxes.is-nointro { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.shop_box {
  position: relative;
  padding: 26px 26px 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, #f3f9fd 0%, #eaf4fb 100%);
}
.shop_box_title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--c-sky);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .12em;
}
.shop_box_title .ico { flex: 0 0 28px; width: 28px; height: 28px; }
.shop_box_title .ico svg { width: 100%; height: 100%; }
.shop_box_title .ico-star { color: var(--c-yellow); }
.shop_box_title .ico-card { color: var(--c-pink); }

/* 店舗紹介(管理画面で入力された本文。他サイトからのコピーで見出しタグ等が混ざるため平準化) */
.shop_intro_body {
  position: relative;
  font-size: 13.5px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.shop_intro_body :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 .4em;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
}
.shop_intro_body p + p,
.shop_intro_body * + :is(h1, h2, h3, h4, h5, h6) { margin-top: .8em; }
.shop_intro_body img { max-width: 100%; height: auto; border-radius: 10px; }
.shop_intro_body a { color: var(--c-sky); text-decoration: underline; }
/* 長い本文は折りたたみ(store.jsが高さを見て付与) */
.shop_intro_body.is-collapsed {
  max-height: 250px;
  overflow: hidden;
}
.shop_intro_body.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(rgba(236,245,251,0), #ecf5fb);
}
.shop_readmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 150px;
  height: 32px;
  margin: 12px auto 0;
  border: 1px solid var(--c-sky);
  border-radius: 999px;
  background: #fff;
  color: var(--c-sky);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.shop_readmore svg { width: 10px; height: 10px; transform: rotate(90deg); }
.shop_readmore[aria-expanded="true"] svg { transform: rotate(-90deg); }

/* 利用方法 */
.shop_steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.shop_steps li + li { margin-top: 14px; }
.shop_steps .num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-pink);
  color: #fff;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}
.shop_howto_note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
}
.shop_howto_note .card {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-pink);
  box-shadow: 0 6px 14px -10px rgba(0,0,0,.35);
}
.shop_howto_note .card svg { width: 100%; height: 100%; }
.shop_howto_note p {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1.5px dashed #f7a9bb;
  border-radius: 16px;
  background: #fff;
  color: var(--c-pink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}
.shop_howto_note small {
  display: block;
  margin-top: 4px;
  color: var(--c-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}

/* 注意事項 */
.shop_caution_list li {
  position: relative;
  padding-left: 1em;
  font-size: 13px;
  line-height: 1.8;
}
.shop_caution_list li + li { margin-top: 6px; }
.shop_caution_list li::before { content: "・"; position: absolute; left: 0; }


/* ==========================================================================
   同じジャンルのクーポン / 近くのおすすめのお店
   ========================================================================== */
#shop_related {
  padding: 44px 0 60px;
}

.shop_related_row {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 20px;
}
.shop_related_row.is-single { grid-template-columns: minmax(0, 1fr); }

.shop_panel {
  min-width: 0;
  padding: 20px 44px 22px;
  border: 1px solid #efefef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 26px -22px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}
.shop_panel .shop_sec_title { margin-bottom: 14px; }

.shop_carousel { position: relative; flex: 1; }
.shop_carousel .swiper { overflow: hidden; padding: 4px 2px 14px; }
.shop_carousel .swiper-slide { height: auto; }
.shop_carousel_nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-pink);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -4px rgba(243,110,141,.8);
  transition: opacity .2s;
}
.shop_carousel_nav svg { width: 12px; height: 12px; }
.shop_carousel_nav.prev { left: -38px; }
.shop_carousel_nav.prev svg { transform: scaleX(-1); }
.shop_carousel_nav.next { right: -38px; }
.shop_carousel_nav.swiper-button-disabled { opacity: .3; cursor: default; }
.shop_carousel_nav.swiper-button-lock { display: none; }

/* 関連クーポン */
.rel_coupon {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 14px 14px 16px;
  border: 1px solid #fbe2d6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 20px -16px rgba(243,110,141,.7);
  text-align: center;
  transition: transform .2s;
}
.rel_coupon:hover { transform: translateY(-3px); }
.rel_coupon .shop_badge { align-self: flex-start; padding: 4px 14px; font-size: 12px; }
.rel_coupon_shop {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}
.rel_coupon_value {
  margin-top: 4px;
  color: var(--c-pink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.rel_coupon_value .num { font-size: 1.5em; }
.rel_coupon_value.is-long { font-size: 17px; }
.rel_coupon_more { margin-top: 4px; font-size: 11px; color: #888; }
.rel_coupon_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  margin-top: auto;
  border-radius: 999px;
  background: var(--c-pink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
/* 高さを揃えたカード内でボタンを下端に置き、直前の要素との余白を確保する */
.rel_coupon > :nth-last-child(2) { margin-bottom: 14px; }

/* 近くのおすすめのお店 */
.near_shop {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 20px -18px rgba(0,0,0,.5);
  transition: transform .2s;
}
.near_shop:hover { transform: translateY(-3px); }
.near_shop_img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #f4f1ec;
}
.near_shop_img img { width: 100%; height: 100%; object-fit: cover; }
.near_shop_img .shop_badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 12px;
  font-size: 11.5px;
}
.near_shop_name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 10px 10px 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.near_shop_area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
  padding: 8px 10px 12px;
  color: var(--c-sky);
  font-size: 12.5px;
  font-weight: 700;
}
.near_shop_area svg { width: 14px; height: 14px; }

.shop_more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 250px;
  max-width: 100%;
  height: 36px;
  margin: 12px auto 0;
  border: 1.5px solid #8fcdee;
  border-radius: 999px;
  background: #fff;
  color: var(--c-sky);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: background .2s;
}
.shop_more svg { width: 10px; height: 10px; }
.shop_more:hover { background: #f0f8fd; }



/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media all and (max-width: 1100px) {
  .shop_grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; }
  /* サイドバーが狭くなるため、クーポン名が1文字だけ次の行に落ちないよう縮める */
  .shop_coupon_value { font-size: 34px; }
  .shop_coupon_value.is-mid { font-size: 26px; }
  .shop_coupon_value.is-long { font-size: 22px; }
  .shop_facts li { padding: 2px 10px; gap: 8px; }
  .shop_info { grid-template-columns: 1fr; }
  .shop_map_frame { aspect-ratio: 16 / 9; }

  .shop_boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop_boxes .shop_intro { grid-column: 1 / -1; }

  .shop_related_row { grid-template-columns: minmax(0, 1fr); }
}

@media all and (max-width: 768px) {
  #shop_main { padding-top: 16px; }

  /* 1カラム: 写真 → 店名 → クーポン → 店舗情報 の順に並べ替え
     (.shop_primary の箱を消し、子要素を .shop_grid の直接の並び替え対象にする) */
  /* PC用の align-items:start が残ると各ブロックが内容幅に縮んで左寄せになるため、横幅いっぱいに広げて左右中央に揃える */
  .shop_grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .shop_primary { display: contents; }
  .shop_breadcrumb { order: 1; padding: 0 4px; }
  .shop_gallery    { order: 2; }
  .shop_head       { order: 3; }
  .shop_coupons    { order: 4; margin-top: 30px; }
  .shop_info       { order: 5; }

  .shop_gallery_main { border-radius: 20px; }
  .shop_gallery_thumbs { gap: 8px; }
  .shop_gallery_thumbs li { flex: 1 1 0; max-width: 88px; }

  .shop_head { margin-top: 20px; }
  .shop_name { font-size: 25px; }

  .shop_info { margin-top: 30px; padding: 22px 20px; }

  #shop_detail { padding-top: 36px; }
  .shop_boxes,
  .shop_boxes.is-nointro { grid-template-columns: minmax(0, 1fr); }
  .shop_box { padding: 22px 20px; }

  #shop_related { padding: 36px 0 44px; }
  .shop_panel { padding: 18px 16px 20px; }
  .shop_carousel .swiper { overflow: visible; }
  .shop_carousel { overflow: hidden; margin: 0 -16px; padding: 0 16px; }
  .shop_carousel_nav { display: none; }
}

@media all and (max-width: 520px) {
  .shop_name { font-size: 22px; }
  .shop_lead { font-size: 13.5px; }

  .shop_facts { flex-wrap: wrap; padding: 4px 0; }
  .shop_facts li { flex: 1 1 50%; padding: 10px 8px; }
  .shop_facts li + li { border-left: 0; }
  .shop_facts li:nth-child(even) { border-left: 1px solid #f3e7da; }
  .shop_facts li:nth-child(n+3) { border-top: 1px solid #f3e7da; }
  .shop_facts.count1 li { flex-basis: 100%; }

  .shop_coupon { padding: 20px 18px; }
  .shop_coupon_value { font-size: 34px; }
  .shop_coupon_value.is-mid { font-size: 28px; }
  .shop_coupon_value.is-long { font-size: 23px; }
  .shop_coupon_img { flex-basis: 70px; width: 70px; height: 70px; }

  .shop_box_title { font-size: 18px; }
  .shop_sec_title { font-size: 16px; gap: 6px; }
  .shop_sec_title .deco { flex-basis: 22px; width: 22px; height: 22px; }

}