.md3-theme {
  --md-primary-container: #fce8e6;
  --md-on-primary-container: #c5221f;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-high: #e8eaed;
  --border-light: rgba(0, 0, 0, 0.08);
  --border-dark: #bdc1c6;
  --md-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  background-color: transparent;
}

/* === 電話番号リンク === */
.md3-phone-link {
  color: var(--text-main) !important; /* ブラウザ標準の青リンクになるのを防ぐ */
  text-decoration: none !important;   /* 下線を消す */
}

/* マウスが使える環境（主にPC）でのみホバーアクションを有効化 */
@media (hover: hover) {
.md3-phone-link:hover {
    color: var(--md-secondary) !important;
    text-decoration: underline !important;
  }
}

.md3-stepper-card {
  margin-bottom: 24px;
}

.md3-section-title .material-symbols-outlined {
  color: var(--md-secondary);
}

/* === 1. 上部固定インデックス (Sticky Filter Chips) === */
.md3-filter-bar {
  position: sticky;
  top: 80px; /* 固定ヘッダーの高さに合わせて調整 */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 16px 0;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-light);
  z-index: 10;
}

.md3-filter-title {
  font-size: var(--typescale-label);
  line-height: var(--typescale-label-line-height);
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.md3-filter-title .material-symbols-outlined { font-size: 16px; }

.md3-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.md3-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--md-surface-container);
  border: none;
  border-radius: var(--border-radius-md);
  color: var(--text-main) !important;
  font-size: var(--typescale-label);
  line-height: var(--typescale-label-line-height);
  font-weight: 700;
  transition: all 0.2s;
}

.md3-filter-chip:hover {
  background-color: var(--md-surface-container-high);
  color: var(--md-secondary) !important;
}

.md3-filter-badge {
  background-color: var(--md-surface);
  color: var(--text-muted);
  font-size: var(--typescale-label-small);
  line-height: var(--typescale-label-small-line-height);
  padding: 2px 6px;
  border-radius: var(--border-radius-full);
  font-weight: 700;
}

/* === 2. メインエリア & セクション === */
.md3-page-title {
  font-size: var(--typescale-headline);
  line-height: var(--typescale-headline-line-height);
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--text-main);
}

.md3-city-section { scroll-margin-top: 180px; margin-bottom: 56px; }

.md3-city-heading {
  font-size: var(--typescale-title);
  line-height: var(--typescale-title-line-height);
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.md3-city-heading .material-symbols-outlined { color: var(--text-muted); }

.md3-city-count {
  font-size: var(--typescale-label);
  line-height: var(--typescale-label-line-height);
  color: var(--text-muted);
  font-weight: 400;
  margin-left: auto;
}

/* === 3. 店舗カード (Filled Card / 枠線なし) === */
.md3-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
}

.md3-shop-card {
  display: flex;
  flex-direction: column;
  background-color: var(--md-surface-container-low); /* 薄いグレーの背景 */
  border: none;
  border-radius: var(--border-radius-lg);
  padding: 24px;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.md3-shop-card:hover {
  background-color: var(--md-surface);
  box-shadow: var(--md-elevation-3);
  transform: translateY(-2px);
}

.md3-shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.md3-shop-title {
  font-size: var(--typescale-title);
  line-height: var(--typescale-title-line-height);
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.md3-shop-title .material-symbols-outlined {
  color: var(--md-primary);
  font-size: 22px;
}

.md3-shop-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--typescale-label-small);
  line-height: var(--typescale-label-small-line-height);
  font-weight: 700;
  color: var(--md-secondary) !important;
  padding: 6px 8px;
  border-radius: var(--border-radius-sm);
  transition: background-color 0.2s;
}

.md3-shop-link:hover {
  background-color: rgba(26, 115, 232, 0.08);
}

.md3-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--typescale-label);
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: var(--typescale-label-line-height);
}

.md3-info-row .material-symbols-outlined {
  font-size: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 1px;
}

/* 取扱いメニューチップ (カード背景がグレーなので白抜き) */
.md3-menu-section {
  margin: 16px 0 20px;
  flex: 1;
}

.md3-menu-title {
  font-size: var(--typescale-label-small);
  line-height: var(--typescale-label-small-line-height);
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 10px 0;
}

.md3-menu-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.md3-menu-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background-color: var(--md-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-sm);
  color: var(--text-main) !important;
  font-size: var(--typescale-label-small);
  line-height: var(--typescale-label-small-line-height);
  font-weight: 700;
}

span.md3-menu-chip-empty {
  background-color: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--typescale-label-small);
  line-height: var(--typescale-label-small-line-height);
  padding: 0;
}

/* アクションボタン群 (1:1等幅) */
.md3-shop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto;
}

.md3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: var(--border-radius-full);
  font-size: var(--typescale-label);
  line-height: var(--typescale-label-line-height);
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-align: center;
}

.md3-btn-primary {
  background-color: var(--md-primary);
  color: #fff !important;
}

.md3-btn-primary:hover {
  background-color: var(--md-primary-hover);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.md3-btn-outlined {
  background-color: transparent;
  border: 1px solid var(--border-dark);
  color: var(--text-main) !important;
}

.md3-btn-outlined:hover {
  background-color: var(--md-surface);
  border-color: var(--text-main);
}

/* レスポンシブ */
@media (max-width: 737px) {
.md3-filter-bar { padding: 12px 0; top: 60px; }

.md3-filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }

.md3-filter-chip { flex-shrink: 0; }

.md3-shop-grid { grid-template-columns: 1fr; gap: 16px; }

.md3-shop-card { padding: 20px 16px; }
}

body.shop-select #main .md3-theme { padding: 8px 0 40px; text-align: left; min-width: 0; overflow-wrap: anywhere; }

.md3-theme .md3-city-section { scroll-margin-top: var(--shop-select-anchor-offset, 280px); }

.md3-theme a:focus-visible, .md3-theme button:focus-visible { outline: 3px solid var(--md-secondary); outline-offset: 3px; }

@media (min-width: 738px) {
body.shop-select .md3-filter-bar { top: 111px; }
}

@media (max-width: 737px) {
body.shop-select #main .md3-theme { padding: 16px 4% 32px; }
}