@charset "UTF-8";
/* =====================================================================
   STANCER 店舗検索ページ リデザイン (モバイル最優先 / カード型)
   既存 style.css・originalstyle.css の後に読み込む。
   すべて .shop-c 配下にスコープし、店舗データの ::before(ブランド)
   ::after(取扱商品) 表示は維持したままレイアウトのみ刷新する。
   ===================================================================== */

:root {
  --stc-navy: #132D8A;
  --stc-blue: #036EB8;
  --stc-sky:  #00A0E9;
  --stc-ink:  #231815;
  --stc-line: #e4e7ee;
  --stc-bg:   #f5f7fb;
  --stc-radius: 14px;
}

/* ---- 全体: 固定960pxをやめ、画面幅に追従させる ---- */
.shop-c.container { width: 100%; max-width: 1100px; padding: 0 16px; }
.shop-c { background: var(--stc-bg); }
.shop-c .main { margin-bottom: 40px; }

/* ====================== エリアタブ (固定ナビ) ====================== */
.region-tabs {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 12px; margin: 0 -16px 4px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--stc-line);
  scrollbar-width: none;
}
.region-tabs::-webkit-scrollbar { display: none; }
.region-tabs a {
  flex: 0 0 auto;
  padding: 8px 14px; border-radius: 999px;
  background: #eef1f7; color: var(--stc-navy);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  text-decoration: none; transition: background .2s, color .2s;
}
.region-tabs a:hover, .region-tabs a:active { background: var(--stc-navy); color: #fff; opacity: 1; }

/* ====================== 検索バー ====================== */
.shop-search {
  position: sticky; top: 52px; z-index: 25;
  background: var(--stc-bg); padding: 12px 0 8px; margin: 0 0 8px;
}
.shop-search__field { position: relative; max-width: 520px; margin: 0 auto; }
.shop-search__field::before {
  content: "🔍"; position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%); font-size: 16px; opacity: .6;
}
.shop-c .search-0 .search-box,
.shop-search__field .search-box {
  width: 100%; max-width: none;
  padding: 13px 16px 13px 44px; font-size: 16px;
  border: 1.5px solid var(--stc-line); border-radius: 999px;
  background: #fff; box-shadow: 0 2px 8px rgba(20,45,138,.06);
}
.shop-search__field .search-box:focus {
  border-color: var(--stc-blue);
  box-shadow: 0 4px 14px rgba(3,110,184,.18);
}
.search-count { max-width: 520px; margin: 8px auto 0; font-size: 13px; color: #667; text-align: center; }
.search-empty { display: none; text-align: center; padding: 30px 10px; color: #889; }
.search-empty.show { display: block; }

/* ====================== エリア見出し ====================== */
.shop-c .shop-h2 {
  padding: 14px 18px; margin: 28px 0 16px;
  border: none; border-left: 6px solid var(--stc-navy);
  background: linear-gradient(90deg, #eef2fb, #f7f9fe);
  border-radius: 10px; font-size: 1.25rem; color: var(--stc-navy);
}
.shop-c .shop-h3 {
  padding: 0 0 6px; margin: 22px 0 12px;
  border-bottom: 2px solid var(--stc-blue);
  font-size: 1.05rem; color: var(--stc-blue);
}
.shop-c .table0 { border: none; margin: 0; }
.shop-c .table0 td { border: none; padding: 0; }

/* ====================== 店舗カード ====================== */
.shop-c .table {
  display: block; border: none; margin: 0 0 8px;
  font-size: 15px; line-height: 1.5;
}
/* tbody をグリッド化して各行(tr)を列に並べる
   (table直接の display:grid だと自動生成 tbody が唯一の item になり1列化するため) */
.shop-c .table tbody {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
/* ヘッダ行(店名/住所/電話)は隠す */
.shop-c .table tr.pc0, .shop-c .table tr:first-child th { display: none; }

.shop-c .table tr {
  display: flex; flex-direction: column; gap: 6px;
  height: auto !important;
  background: #fff; border: 1px solid var(--stc-line);
  border-radius: var(--stc-radius); padding: 16px 16px 14px;
  box-shadow: 0 1px 5px rgba(20,45,138,.05);
  transition: box-shadow .2s, transform .2s;
}
.shop-c .table tr:hover { box-shadow: 0 6px 18px rgba(20,45,138,.12); transform: translateY(-2px); }

.shop-c .table td {
  display: block; width: auto !important; border: none !important;
  padding: 0; text-align: left;
}
/* 店名セル(1列目): ブランド::before と 取扱::after はそのまま生きる */
.shop-c .table td:first-child {
  font-weight: 700; font-size: 1.08rem; color: var(--stc-ink);
  line-height: 1.45;
}
.shop-c .table td:first-child img { width: 26px !important; height: auto; vertical-align: middle; margin-right: 2px; }
.shop-c .table td:first-child .bold {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--stc-blue); background: #eaf4fb;
  padding: 1px 8px; border-radius: 6px; margin-left: 2px;
}
/* 住所セル */
.shop-c .table td.table-b { color: #555; font-size: 14px; }
.shop-c .table td.table-b::before { content: " "; }
/* 電話セル: タップしやすいボタンに */
.shop-c .table td:last-child { margin-top: 4px; }
.shop-c .table td:last-child a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--stc-navy); color: #fff !important;
  font-weight: 700; font-size: 14px; text-decoration: none !important;
}
.shop-c .table td:last-child a::before { content: "📞"; }
.shop-c .table td:last-child a:hover { background: var(--stc-blue); opacity: 1; }

/* ====================== 凡例カード ====================== */
.shop-c .shop1 ul {
  background: #fff; border: 1px solid var(--stc-line);
  border-radius: 12px; padding: 14px 18px; margin: 10px 0;
}
.shop-c .shop1 ul li { padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.shop-c .shop1 ul li img { width: 26px; }
.shop-c .shop1 .bold { color: var(--stc-navy); font-size: 1rem; }

/* ====================== 地図 / 現在地ボタン ====================== */
.shop-c .block01 { position: relative; margin: 8px 0 16px; }
.shop-c #map, .shop-c #gmap { height: 56vh; border-radius: 14px; overflow: hidden; }
.shop-c .button {
  position: absolute; top: 12px; left: 12px;
  width: auto; height: auto; padding: 11px 18px;
  border-radius: 999px; background: var(--stc-navy); color: #fff;
  font-weight: 700; font-size: 14px; box-shadow: 0 3px 10px rgba(0,0,0,.2);
  display: inline-flex; align-items: center; gap: 6px;
}
.shop-c .button::before { content: ""; }
.shop-c .button:hover { background: var(--stc-blue); opacity: 1; }

/* 旧・日本地図の画像エリアナビ(PC専用/座標固定)は新タブで置き換えるため隠す */
.shop-c section.block .pc { display: none; }

/* ====================== レスポンシブ(タブレット/PC) ====================== */
@media screen and (min-width: 600px) {
  .shop-c .table tbody { grid-template-columns: 1fr 1fr; }
  .region-tabs a { font-size: 15px; }
}
@media screen and (min-width: 960px) {
  .shop-c .table tbody { grid-template-columns: 1fr 1fr 1fr; }
  .shop-c #map, .shop-c #gmap { height: 60vh; }
}

/* =====================================================================
   サイト共通チャーム (全ページ統一) — ナビ・言語選択・フッター
   画像レイアウト(960pxコンテナ・絶対配置)には触れない。
   ===================================================================== */

/* PCナビをピル型に統一 */
.nav {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin: 16px 0 22px; padding: 6px 2px 10px;
  border-bottom: 2px solid var(--stc-line);
}
.nav__item { list-style: none; }
.nav__link {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  color: var(--stc-navy); font-weight: 700; font-size: 15px; line-height: 1;
  transition: background .2s, color .2s;
}
.nav__link:hover { background: var(--stc-navy); color: #fff; opacity: 1; }
/* 現在ページ(shop)のリンクを強調 */
.shop-c .nav__link[href$="shop.html"] { background: #eef1f7; }

/* 言語選択をピル型に */
.selected-language {
  display: inline-block; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  background: #eef1f7; color: var(--stc-navy);
  font-size: 13px; font-weight: 700;
}
.language-options { margin-top: 4px; }
.language-options a, .language-option a { color: var(--stc-navy); font-weight: 600; }

/* フッターの余白を整える */
.footer { padding: 24px 0; color: #889; font-size: 13px; text-align: center; }