/* Salon de Beauté Shizuoka - 共通レイアウト（モバイルファースト・単一マークアップ） */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  background: var(--bg);
  color: var(--tx);
}
a { color: inherit; }
img { max-width: 100%; }

/* 画面には出さないが、文字としては読めるラベル。
   中身がアイコンだけのリンクは、読み上げにもクローラにも「空のリンク」に見え、
   代わりにリンク先URLが文言として扱われてしまう。それを防ぐために添える。 */
.sdb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 本文へ飛ぶリンク（キーボード操作用）。ふだんは隠し、フォーカスしたときだけ左上に出す（F14） */
.sdb-skip-link { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 8px 14px; background: #fff; color: var(--ink, #2a2522); border: 2px solid currentColor; border-radius: 8px; font-weight: 700; text-decoration: none; }
.sdb-skip-link:focus { top: 8px; }
main { display: block; padding-bottom: 40px; }
main:has(> .sdb-owner-cta:last-child) { padding-bottom: 0; }

.sdb-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ヘッダー */
.sdb-header {
  background: #fff;
  border-bottom: 1px solid var(--bd);
  position: sticky;
  top: 0;
  z-index: 10;
}
.sdb-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}
/* SP: ロゴ中央寄せ・拡大 + ハンバーガーメニュー */
.sdb-logo { display: block; width: 97px; height: 44px; }
.sdb-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.sdb-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--tx);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.sdb-menu-btn.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sdb-menu-btn.is-active span:nth-child(2) { opacity: 0; }
.sdb-menu-btn.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sdb-header-inner { justify-content: center; }
.sdb-logo-link { display: block; }

.sdb-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(46,40,32,.45);
  z-index: 30;
}
.sdb-nav.is-open { display: block; }
.sdb-nav-inner {
  position: relative;
  background: #fff;
  width: 82%;
  max-width: 320px;
  height: 100%;
  margin-left: auto;
  padding: 72px 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 16px rgba(0,0,0,.15);
}
.sdb-nav-logo { display: block; margin-bottom: 20px; }
.sdb-nav-logo img { display: block; width: 150px; height: 32px; }
.sdb-nav-inner a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  color: var(--tx);
  text-decoration: none;
  padding: 16px 4px;
  border-bottom: 1px solid var(--bd);
}
.sdb-nav-inner a i {
  font-size: 18px;
  color: var(--pk);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.sdb-nav-inner a:last-child { border-bottom: none; }
.sdb-nav-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--txm);
  cursor: pointer;
}
body.sdb-nav-open { overflow: hidden; }

/* パンくず */
.sdb-breadcrumb {
  font-size: 14px;
  color: var(--txm);
  padding: 16px 0;
}
.sdb-breadcrumb a { color: var(--txm); text-decoration: none; }
.sdb-breadcrumb a:hover { color: var(--pk); }
.sdb-breadcrumb span { margin: 0 6px; }

/* ヒーロー */
.sdb-hero {
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  padding: 24px 16px 18px;
  text-align: center;
  position: relative;
}
.sdb-hero--text-light {
  position: relative;
  color: #fff;
}
/* 背景のぼかし画像は専用ラッパーだけをoverflow:hiddenでクリップする。
   .sdb-hero自体をoverflow:hiddenにすると、検索サジェストのポップアップまで
   一緒に切り取られてしまうため分離している。 */
.sdb-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.sdb-hero--text-light .sdb-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center;
  filter: blur(3px);
  transform: scale(1.05);
}
.sdb-hero--text-light > * { position: relative; z-index: 1; }
.sdb-hero--text-light > .sdb-hero-bg { position: absolute; z-index: 0; }
.sdb-hero-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--tx);
  margin: 0 0 6px;
  line-height: 1.5;
}
.sdb-hero--text-light .sdb-hero-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.sdb-hero-sub {
  font-size: 13px;
  color: var(--txm);
  margin: 0 0 18px;
}
.sdb-hero--text-light .sdb-hero-sub { color: rgba(255,255,255,.95); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sdb-hero-search {
  display: flex;
  gap: 8px;
  margin: 0 auto 16px;
  max-width: 560px;
}
.sdb-search-wrap { position: relative; flex: 1; }
.sdb-search-input {
  flex: 1;
  height: 44px;
  background: #fff;
  border: 1.5px solid var(--bd);
  border-radius: 22px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  position: relative;
}
.sdb-suggest-list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(46,40,32,.12);
  overflow: hidden;
  z-index: 20;
  text-align: left;
}
.sdb-suggest-list.is-open { display: block; }
.sdb-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  color: var(--tx);
  border-bottom: 1px solid var(--bd);
}
.sdb-suggest-item:last-child { border-bottom: none; }
.sdb-suggest-item:hover, .sdb-suggest-item.is-active { background: var(--bg2); }
.sdb-suggest-item-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pks);
  color: var(--pk);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.sdb-suggest-item-text { min-width: 0; }
.sdb-suggest-item-label { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdb-suggest-item-sub { font-size: 12px; color: var(--txl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdb-search-input input {
  border: none;
  outline: none;
  font-size: 14px;
  flex: 1;
  background: transparent;
}
.sdb-search-input i { font-size: 15px; color: var(--txl); }
.sdb-search-btn {
  background: var(--pk);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 0 20px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 14px;
}
.sdb-search-btn:hover { opacity: .9; }

/* チップ横スクロール */
.sdb-chip-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  justify-content: flex-start;
}
.sdb-chip-scroll::-webkit-scrollbar { display: none; }
.sdb-chip {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--txm);
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.sdb-chip:hover, .sdb-chip--on {
  background: var(--pk);
  color: #fff;
  border-color: var(--pk);
}

.sdb-chip.is-area-aoi { background: #E1F3E5; color: #2E8B4F; border-color: #C7E8CE; }
.sdb-chip.is-area-aoi:hover, .sdb-chip.is-area-aoi.sdb-chip--on { background: #2E8B4F; color: #fff; border-color: #2E8B4F; }
.sdb-chip.is-area-suruga { background: #DFEBFB; color: #2A6FC9; border-color: #C7DEF7; }
.sdb-chip.is-area-suruga:hover, .sdb-chip.is-area-suruga.sdb-chip--on { background: #2A6FC9; color: #fff; border-color: #2A6FC9; }
.sdb-chip.is-area-shimizu { background: #FCE6D4; color: #D2691E; border-color: #F7D3B0; }
.sdb-chip.is-area-shimizu:hover, .sdb-chip.is-area-shimizu.sdb-chip--on { background: #D2691E; color: #fff; border-color: #D2691E; }

.sdb-chip.is-genre-hair { background: #F7E1E8; color: #C0587A; border-color: #F0C9D6; }
.sdb-chip.is-genre-hair:hover, .sdb-chip.is-genre-hair.sdb-chip--on { background: #C0587A; color: #fff; border-color: #C0587A; }
.sdb-chip.is-genre-nail { background: #EFE0F5; color: #8E44AD; border-color: #E1C6EE; }
.sdb-chip.is-genre-nail:hover, .sdb-chip.is-genre-nail.sdb-chip--on { background: #8E44AD; color: #fff; border-color: #8E44AD; }
.sdb-chip.is-genre-esthe { background: #DAF3EE; color: #16A085; border-color: #BEE9DF; }
.sdb-chip.is-genre-esthe:hover, .sdb-chip.is-genre-esthe.sdb-chip--on { background: #16A085; color: #fff; border-color: #16A085; }
.sdb-chip.is-genre-headspa { background: #E1E7F1; color: #34568B; border-color: #C7D2E5; }
.sdb-chip.is-genre-headspa:hover, .sdb-chip.is-genre-headspa.sdb-chip--on { background: #34568B; color: #fff; border-color: #34568B; }
.sdb-chip.is-genre-eyelash { background: #F7ECD2; color: #B8860B; border-color: #EEDBA8; }
.sdb-chip.is-genre-eyelash:hover, .sdb-chip.is-genre-eyelash.sdb-chip--on { background: #B8860B; color: #fff; border-color: #B8860B; }
.sdb-chip.is-genre-datsumo { background: #F8DDDA; color: #C0392B; border-color: #F1C2BC; }
.sdb-chip.is-genre-datsumo:hover, .sdb-chip.is-genre-datsumo.sdb-chip--on { background: #C0392B; color: #fff; border-color: #C0392B; }
.sdb-chip.is-genre-relax { background: #E6ECDA; color: #556B2F; border-color: #D1DCBB; }
.sdb-chip.is-genre-relax:hover, .sdb-chip.is-genre-relax.sdb-chip--on { background: #556B2F; color: #fff; border-color: #556B2F; }

.sdb-genre-filter {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bd);
}

/* 絞り込みフォーム（検索・エリア一覧ページ） */
.sdb-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 28px;
}
.sdb-filter-bar select,
.sdb-filter-bar input[type="text"] {
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--tx);
  background: #fff;
  flex: 1;
  min-width: 140px;
}
.sdb-filter-bar .sdb-search-wrap { min-width: 140px; }
.sdb-filter-bar .sdb-search-wrap input[type="text"] { width: 100%; min-width: 0; }
.sdb-filter-bar button {
  background: var(--pk);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.sdb-filter-bar button:hover { opacity: .9; }

/* セクション共通 */
/* トップページ：サイト説明 */
.sdb-about { margin: 24px 0; }
.sdb-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(46,40,32,.1);
}

.sdb-about-main {
  background: #fff;
  padding: 32px 20px;
}
.sdb-about-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--pk);
  margin: 0 0 10px;
}
.sdb-about-logo { display: block; width: 150px; height: auto; margin: 0 0 18px; }
.sdb-about-text { font-size: 13px; color: var(--txm); line-height: 1.9; margin: 0 0 24px; }

.sdb-about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sdb-about-stat { border-top: 2px solid var(--pks); padding-top: 10px; }
.sdb-about-stat-num { font-size: 22px; font-weight: 700; color: var(--pk); margin: 0; line-height: 1.2; }
.sdb-about-stat-num span { font-size: 12px; font-weight: 600; margin-left: 2px; }
.sdb-about-stat-label { font-size: 11px; color: var(--txl); margin: 2px 0 0; }

.sdb-about-visual {
  position: relative;
  isolation: isolate;
  min-height: 260px;
}
.sdb-about-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center;
  filter: blur(3px);
  transform: scale(1.08);
  z-index: -2;
}
.sdb-about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(192,88,122,.55) 0%, rgba(46,40,32,.55) 100%);
  z-index: -1;
}
.sdb-about-visual-overlay { padding: 28px 20px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sdb-about-visual-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.85); margin: 0 0 10px; }
.sdb-about-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.sdb-about-area-dot { font-size: 12px; font-weight: 700; color: #fff; padding: 6px 14px; border-radius: 999px; }

.sdb-about-genres { display: flex; flex-wrap: wrap; gap: 10px; }
.sdb-about-genre-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  border: 2px solid rgba(255,255,255,.5);
}

.sdb-about-area-dot.is-area-aoi { background: #2E8B4F; }
.sdb-about-area-dot.is-area-suruga { background: #2A6FC9; }
.sdb-about-area-dot.is-area-shimizu { background: #D2691E; }

.sdb-about-genre-icon.is-genre-hair { background: #C0587A; }
.sdb-about-genre-icon.is-genre-nail { background: #8E44AD; }
.sdb-about-genre-icon.is-genre-esthe { background: #16A085; }
.sdb-about-genre-icon.is-genre-headspa { background: #34568B; }
.sdb-about-genre-icon.is-genre-eyelash { background: #B8860B; }
.sdb-about-genre-icon.is-genre-datsumo { background: #C0392B; }
.sdb-about-genre-icon.is-genre-relax { background: #556B2F; }

@media (min-width: 769px) {
  .sdb-about-grid { grid-template-columns: 1.1fr 0.9fr; }
  .sdb-about-main { padding: 48px; }
  .sdb-about-logo { width: 190px; margin-bottom: 20px; }
  .sdb-about-text { font-size: 15px; margin-bottom: 32px; }
  .sdb-about-stats { gap: 20px; }
  .sdb-about-stat-num { font-size: 28px; }
  .sdb-about-stat-label { font-size: 12px; }
  .sdb-about-visual-overlay { padding: 48px; }
  .sdb-about-genre-icon { width: 46px; height: 46px; font-size: 20px; }
}

.sdb-section { padding: 28px 0; }
.sdb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.sdb-section-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-bottom: 10px;
}
.sdb-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--pk);
}
.sdb-section-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--pks);
  color: var(--pk);
  font-size: 16px;
  flex-shrink: 0;
}
.sdb-section-head .sdb-section-title { margin: 0; }
.sdb-section-more {
  font-size: 15px;
  font-weight: 600;
  color: var(--pk);
  text-decoration: none;
}

/* サロンカード（グリッド共通：注目のサロン／エリア一覧／周辺のサロン） */
.sdb-shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.sdb-shop-card {
  display: flex;
  gap: 12px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s;
}
.sdb-shop-card:hover { box-shadow: 0 4px 16px rgba(46,40,32,.08); }
.sdb-shop-card-img {
  width: 72px;
  height: 72px;
  background: var(--bg2);
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txl);
  font-size: 22px;
  overflow: hidden;
}
.sdb-shop-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sdb-shop-card-body { flex: 1; min-width: 0; }
.sdb-shop-card-tags { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.sdb-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pks);
  color: var(--pk);
}
.sdb-tag.is-plain { background: var(--bg2); color: var(--txm); }
.sdb-tag.is-paid { font-weight: 600; }
.sdb-tag.is-area-aoi,
.sdb-tag.is-area-suruga,
.sdb-tag.is-area-shimizu,
.sdb-tag.is-genre-hair,
.sdb-tag.is-genre-nail,
.sdb-tag.is-genre-esthe,
.sdb-tag.is-genre-headspa,
.sdb-tag.is-genre-eyelash,
.sdb-tag.is-genre-datsumo,
.sdb-tag.is-genre-relax { color: #fff; font-weight: 700; }

.sdb-tag.is-area-aoi { background: #2E8B4F; }
.sdb-tag.is-area-suruga { background: #2A6FC9; }
.sdb-tag.is-area-shimizu { background: #D2691E; }

.sdb-tag.is-genre-hair { background: #C0587A; }
.sdb-tag.is-genre-nail { background: #8E44AD; }
.sdb-tag.is-genre-esthe { background: #16A085; }
.sdb-tag.is-genre-headspa { background: #34568B; }
.sdb-tag.is-genre-eyelash { background: #B8860B; }
.sdb-tag.is-genre-datsumo { background: #C0392B; }
.sdb-tag.is-genre-relax { background: #556B2F; }

.sdb-tag.is-origin-plant,
.sdb-tag.is-origin-petro,
.sdb-tag.is-origin-synthetic,
.sdb-tag.is-origin-semisynthetic,
.sdb-tag.is-origin-other,
.sdb-tag.is-use-hair,
.sdb-tag.is-use-skin,
.sdb-tag.is-use-face,
.sdb-tag.is-use-body,
.sdb-tag.is-use-other { color: #fff; font-weight: 700; }

.sdb-tag.is-origin-plant { background: #4E9B5A; }
.sdb-tag.is-origin-petro { background: #5A5A5A; }
.sdb-tag.is-origin-synthetic { background: #8E44AD; }
.sdb-tag.is-origin-semisynthetic { background: #C0872E; }
.sdb-tag.is-origin-other { background: #8A8072; }

.sdb-tag.is-use-hair { background: #C0587A; }
.sdb-tag.is-use-skin { background: #2A9D8F; }
.sdb-tag.is-use-face { background: #E07A5F; }
.sdb-tag.is-use-body { background: #3D5A80; }
.sdb-tag.is-use-other { background: #8A8072; }

.sdb-shop-card-name { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--tx); }
.sdb-shop-card-address { font-size: 12px; color: var(--txm); line-height: 1.6; margin: 0; }

/* 検索結果・エリア一覧のリスト表示（SPメイン設計） */
.sdb-shop-list { display: flex; flex-direction: column; gap: 10px; }
.sdb-shop-list-item {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.sdb-shop-list-item:hover { box-shadow: 0 4px 16px rgba(46,40,32,.08); border-color: var(--pk); }
.sdb-shop-list-item:active { transform: scale(.99); }
.sdb-shop-list-img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txl);
  font-size: 24px;
  overflow: hidden;
}
.sdb-shop-list-img img { width: 100%; height: 100%; object-fit: cover; }
.sdb-shop-list-main { flex: 1; min-width: 0; }
.sdb-shop-list-item .sdb-shop-list-name {
  font-size: 24px;
  font-weight: 700;
  margin: 4px 0 8px;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.sdb-shop-list-divider { border: none; border-top: 1px solid var(--bd); margin: 0 0 8px; }
.sdb-shop-list-item .sdb-shop-list-tel {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  margin: 0 0 4px;
}
.sdb-shop-list-item .sdb-shop-list-address {
  font-size: 12px;
  font-weight: 400;
  color: var(--txm);
  line-height: 1.5;
  margin: 0;
}
.sdb-shop-list-arrow { display: none; flex-shrink: 0; color: var(--txl); font-size: 18px; }

@media (min-width: 700px) {
  .sdb-shop-list-item { padding: 14px 18px; gap: 16px; }
  .sdb-shop-list-img { width: 80px; height: 80px; }
  .sdb-shop-list-item .sdb-shop-list-name { font-size: 24px; }
  .sdb-shop-list-item .sdb-shop-list-tel { font-size: 14px; }
  .sdb-shop-list-item .sdb-shop-list-address { font-size: 13px; }
  .sdb-shop-list-arrow { display: inline-flex; }
}

/* エリア×ジャンル検索結果ページの導入文 */
.sdb-search-intro { font-size: 15px; color: var(--txm); line-height: 1.8; margin: 0 0 24px; }
.sdb-search-intro p { margin: 0 0 12px; }
.sdb-search-intro p:last-child { margin-bottom: 0; }

/* 検索結果のグリッド表示（画像を上部に配置、3列） */
.sdb-search-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.sdb-search-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s;
}
.sdb-search-card:hover { box-shadow: 0 4px 16px rgba(46,40,32,.08); }
.sdb-search-card-img {
  width: 100%;
  height: 160px;
  background: var(--bg2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txl);
  font-size: 28px;
  overflow: hidden;
}
.sdb-search-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sdb-search-card-body { padding: 12px 14px 14px; }
.sdb-search-card-tel { font-size: 13px; color: var(--txm); margin-top: 6px; }
@media (min-width: 560px) and (max-width: 768px) {
  .sdb-search-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ページネーション */
.sdb-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.sdb-pagination a, .sdb-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  color: var(--txm);
  border: 1px solid var(--bd);
  background: #fff;
}
.sdb-pagination a:hover { border-color: var(--pk); color: var(--pk); }
.sdb-pagination .is-current { background: var(--pk); color: #fff; border-color: var(--pk); }
.sdb-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--txl); }

/* ジャンルグリッド */
.sdb-genre-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sdb-genre-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg2);
  border-radius: 10px;
  padding: 14px 6px;
  text-align: center;
  border: 1px solid var(--bd);
  text-decoration: none;
}
.sdb-genre-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center;
  opacity: .32;
  z-index: -1;
}
.sdb-genre-item:hover { border-color: var(--pk); }
.sdb-genre-item:hover::before { opacity: .46; }
.sdb-genre-icon { font-size: 20px; color: #fff; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(192,88,122,.85); }
.sdb-genre-label { font-size: 11px; font-weight: 700; color: #fff; display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(192,88,122,.85); }

/* コラム記事行 */
.sdb-article-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
  text-decoration: none;
}
.sdb-article-row:last-child { border-bottom: none; padding-bottom: 0; }
.sdb-article-thumb {
  width: 64px;
  height: 64px;
  background: var(--bg2);
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txl);
  overflow: hidden;
}
.sdb-article-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sdb-article-hero { border-radius: 12px; overflow: hidden; margin-bottom: 4px; }
.sdb-article-hero img { width: 100%; height: auto; max-height: 360px; object-fit: cover; display: block; }

/* 基本情報カードとチャートを並べる2カラムレイアウト */
.sdb-info-cols { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 8px 0 28px; align-items: start; }
.sdb-info-cols .sdb-basics-card { margin: 0; height: 100%; }
.sdb-score-col { display: flex; flex-direction: column; gap: 16px; }
.sdb-score-col .sdb-score-chart,
.sdb-score-col .sdb-profile-card { margin: 0; }
@media (min-width: 769px) {
  .sdb-info-cols { grid-template-columns: 1fr 1fr; }
}

/* 成分特性チャート（レーダー） */
.sdb-score-chart {
  background: #fff;
  border: 2px solid var(--pks);
  border-radius: 16px;
  padding: 12px 6px 4px;
  margin: 8px 0 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sdb-score-chart-title {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  margin: 0 0 4px;
}
.sdb-radar-svg { width: 100%; max-width: 100%; height: auto; margin: 0 auto; }
.sdb-radar-grid { fill: none; stroke: var(--bd); stroke-width: 1; }
.sdb-radar-axis { stroke: var(--bd); stroke-width: 1; }
.sdb-radar-data { fill: rgba(192, 88, 122, .35); stroke: var(--pk); stroke-width: 2; }
.sdb-radar-label { font-size: 10px; fill: var(--txm); font-weight: 600; }

.sdb-score-comments {
  width: 100%;
  text-align: left;
  margin: 12px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--bd);
}
.sdb-score-comment { font-size: 12px; color: var(--txm); margin: 0 0 6px; line-height: 1.5; }
.sdb-score-comment strong { color: var(--tx); }

/* 基本情報カード */
.sdb-basics-card {
  background: #fff;
  border: 2px solid var(--pk);
  border-radius: 16px;
  padding: 20px;
  margin: 24px 0 28px;
}
.sdb-basics-card-title { font-size: 14px; font-weight: 700; color: var(--tx); margin: 0 0 14px; }
.sdb-basics-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sdb-basics-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.sdb-basics-item {
  background: var(--bg);
  border-radius: 10px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
}
.sdb-basics-icon {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pk);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.sdb-basics-label { font-size: 12px; color: var(--txl); }
.sdb-basics-value { font-size: 16px; font-weight: 600; color: var(--tx); }


/* 成分プロフィール（チャートとは別角度の情報） */
.sdb-profile-card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 20px;
  margin: 0;
}
.sdb-profile-card-title { font-size: 14px; font-weight: 700; color: var(--tx); margin: 0 0 14px; }
.sdb-profile-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
}
.sdb-profile-row:last-child { border-bottom: none; padding-bottom: 0; }
.sdb-profile-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pks);
  color: var(--pk);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.sdb-profile-label { font-size: 11px; color: var(--txl); margin: 0 0 2px; }
.sdb-profile-value { font-size: 13px; font-weight: 600; color: var(--tx); margin: 0; line-height: 1.6; }

/* 本文内の重要ポイント強調 */
.sdb-article-body strong.sdb-mark {
  font-weight: 700;
  color: var(--tx);
  background: linear-gradient(transparent 65%, #FFE066 65%);
  padding: 0 2px;
}

/* 本文の見出しアイコン */
.sdb-article-body h3 { display: flex; align-items: center; gap: 8px; }
.sdb-h3-icon { font-size: 18px; }

.sdb-article-body { font-size: 15px; line-height: 2.5; color: var(--tx); }
.sdb-article-body h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 36px 0 16px;
  padding-bottom: 10px;
  color: var(--tx);
  border-bottom: 3px solid var(--pk);
  position: relative;
}
.sdb-article-body h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 56px;
  height: 3px;
  background: var(--tx);
}
.sdb-article-body h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 32px 0 14px;
  color: var(--tx);
  padding-bottom: 8px;
  border-bottom: 3px solid var(--pk);
}
.sdb-article-body p { margin: 0 0 30px; }
.sdb-article-body ul, .sdb-article-body ol { margin: 0 0 16px; padding-left: 1.4em; }
.sdb-article-body li { margin-bottom: 6px; }
.sdb-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.sdb-article-body table th,
.sdb-article-body table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd);
  vertical-align: top;
}
.sdb-article-body table th { width: 140px; color: var(--txm); font-weight: 500; background: var(--bg2); }
.sdb-article-tag {
  background: var(--pks);
  color: var(--pk);
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 4px;
}
.sdb-article-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  line-height: 1.4;
  margin: 2px 0 0;
}
.sdb-article-date { font-size: 11px; color: var(--txl); margin: 4px 0 0; }

/* オーナーCTA */
.sdb-owner-cta {
  background: var(--bg2);
  padding: 32px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sdb-owner-cta--text-light {
  position: relative;
  color: #fff;
}
.sdb-owner-cta--text-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center;
  filter: blur(3px);
  transform: scale(1.05);
  z-index: 0;
}
.sdb-owner-cta--text-light > * { position: relative; z-index: 1; }
.sdb-owner-cta-label {
  font-size: 11px;
  color: var(--pk);
  letter-spacing: .06em;
  margin: 0 0 6px;
}
.sdb-owner-cta--text-light .sdb-owner-cta-label { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sdb-owner-cta-title { font-size: 16px; font-weight: 600; color: var(--tx); margin: 0 0 8px; }
.sdb-owner-cta--text-light .sdb-owner-cta-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.sdb-owner-cta-text { font-size: 12px; color: var(--txm); margin: 0 0 16px; line-height: 1.7; }
.sdb-owner-cta--text-light .sdb-owner-cta-text { color: rgba(255,255,255,.95); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sdb-owner-cta-btn {
  display: inline-block;
  background: var(--pk);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.sdb-owner-cta-btn:hover { opacity: .9; }

/* ボトムナビ（モバイルのみ） */
.sdb-bottom-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid var(--bd);
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.sdb-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  font-size: 10px;
  color: var(--txl);
  text-decoration: none;
  gap: 2px;
}
.sdb-nav-item i { font-size: 18px; }
.sdb-nav-item--on { color: var(--pk); }

/* 店舗詳細ページ */
.sdb-shop-detail-photo {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(160deg, var(--bg2) 0%, var(--bg) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txl);
  font-size: 32px;
  margin: 16px 0 20px;
  overflow: hidden;
}
.sdb-shop-detail-photo.has-image { background: none; }
.sdb-shop-detail-photo img { width: 100%; height: 100%; object-fit: cover; }

.sdb-shop-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 8px;
}
.sdb-shop-detail-name { font-size: 22px; margin: 0 0 12px; color: var(--tx); }
.sdb-shop-detail-tags { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.sdb-info-table { border-collapse: collapse; width: 100%; }
.sdb-info-table th, .sdb-info-table td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 14px;
}
.sdb-info-table th { width: 100px; color: var(--txm); font-weight: 500; vertical-align: top; }
.sdb-info-table td { color: var(--tx); }
.sdb-info-table td a { color: var(--pk); text-decoration: none; }
/* 口コミが0件の店舗に出す1行の導線。
   「まだ口コミはありません」という定型文を約1,900ページに並べても中身は増えないので、
   投稿への入口だけ残している（2026-08-20） */
.sdb-review-invite {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--txm);
}
.sdb-review-invite a { color: var(--pk); }

/* ===== 店舗詳細: 評価カード / 営業時間 / 店舗情報（2026-07-31 スマホ基準で刷新） ===== */

/* Googleの評価。他社が集めた数字なので、自社の看板に見えない大きさに留め、
   出典を必ず併記する（2026-08-20 それまでは34pxで大きく出していた） */
.sdb-rating-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--txm);
  line-height: 1.6;
}
.sdb-rating-score {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.sdb-rating-stars { color: #E8A33D; font-size: 13px; line-height: 1; letter-spacing: 1px; }
.sdb-rating-source { font-size: 12px; color: var(--txl); }

/* 見出し付きの情報ブロック */
.sdb-detail-block { margin-top: 24px; }
.sdb-detail-block-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
}
.sdb-detail-block-title i { color: var(--pk); font-size: 19px; }

/* 営業時間: まず「今日どうなのか」を結論として見せ、曜日別は折りたたむ */
.sdb-hours-today {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 13px 15px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #fff;
}
.sdb-hours-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1;
}
.sdb-hours-status i { font-size: 15px; }
.sdb-hours-today.is-open { border-color: #8CBF8F; background: #F2F8F2; }
.sdb-hours-today.is-open .sdb-hours-status { background: #2F7A38; color: #fff; }
.sdb-hours-today.is-closed-now .sdb-hours-status { background: var(--bg2); color: var(--txm); }
.sdb-hours-today.is-closed-today .sdb-hours-status { background: var(--bg2); color: var(--txm); }
.sdb-hours-today-time { font-size: 15px; color: var(--txm); }
.sdb-hours-today-time strong {
  font-size: 19px;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

.sdb-hours-details { margin-top: 8px; }
.sdb-hours-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--pk);
  padding: 8px 2px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sdb-hours-details summary::-webkit-details-marker { display: none; }
.sdb-hours-details summary i { font-size: 16px; transition: transform .15s ease; }
.sdb-hours-details[open] summary i { transform: rotate(180deg); }
.sdb-hours-source { margin: 8px 2px 0; font-size: 11px; color: var(--txl); line-height: 1.5; }

/* 営業時間: 曜日と時間を左右に振り分け、今日を強調 */
.sdb-hours-list {
  list-style: none;
  margin: 0;
  padding: 4px 2px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.sdb-hours-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--bg2);
}
.sdb-hours-list li:last-child { border-bottom: none; }
.sdb-hours-day { color: var(--txm); display: flex; align-items: center; gap: 6px; }
.sdb-hours-time { color: var(--tx); font-variant-numeric: tabular-nums; text-align: right; }
.sdb-hours-list li.is-today { background: var(--pks); }
.sdb-hours-list li.is-today .sdb-hours-day,
.sdb-hours-list li.is-today .sdb-hours-time { color: var(--tx); font-weight: 700; }
.sdb-hours-list li.is-closed .sdb-hours-time { color: var(--txl); }
.sdb-hours-today-badge {
  background: var(--pk);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
}

/* 店舗情報: テーブルをやめ、スマホでは縦積みにする */
.sdb-info-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.sdb-info-row { padding: 12px 14px; border-bottom: 1px solid var(--bg2); }
.sdb-info-row:last-child { border-bottom: none; }
.sdb-info-row dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txm);
  margin: 0 0 4px;
}
.sdb-info-row dt i { color: var(--pk); font-size: 15px; }
.sdb-info-row dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tx); word-break: break-word; }
.sdb-info-link {
  color: var(--pk);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sdb-info-link i { font-size: 15px; }
.sdb-info-empty { color: var(--txl); font-size: 14px; }

/* 電話番号は発信導線なので大きく見せる */
.sdb-info-tel {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  color: var(--pk);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.sdb-info-note { display: block; margin-top: 2px; font-size: 11px; color: var(--txl); }

/* 住所の下に置く補助アクション（地図アプリで開く） */
.sdb-info-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 7px 12px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--bg);
  color: var(--txm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.sdb-info-action i { font-size: 15px; color: var(--pk); }

.sdb-shop-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 20px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: #FDF3E3;
  border: 1px solid #E8C98F;
  color: #6B4E1E;
  font-size: 13px;
  line-height: 1.6;
}
.sdb-shop-notice i { font-size: 17px; flex: 0 0 auto; margin-top: 1px; }

/* 画面が広いときは、店舗情報を項目名と値の2カラムに戻す */
@media (min-width: 600px) {
  .sdb-info-row {
    display: grid;
    grid-template-columns: 132px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 13px 16px;
  }
  .sdb-info-row dt { margin: 0; font-size: 13px; }
  .sdb-rating-score { font-size: 40px; }
  .sdb-rating-stars { font-size: 19px; }
}
.sdb-map-embed { border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; margin-top: 20px; }
.sdb-map-embed iframe { display: block; width: 100%; height: 260px; border: 0; }

.sdb-area-map {
  width: 100%;
  height: 340px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 12px;
  background: var(--bg2);
}
.sdb-area-map-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--txm);
  margin: 0 0 20px;
}
.sdb-area-map-note[hidden] { display: none; }
.sdb-area-map-note button {
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  color: var(--pk);
  font-size: 12px;
  padding: 5px 14px;
  cursor: pointer;
}
.sdb-area-map-note button:hover { border-color: var(--pk); }
.sdb-area-map-info { font-size: 13px; max-width: 220px; }
.sdb-area-map-info-name { font-weight: 700; margin: 0 0 4px; }
.sdb-area-map-info-name a { color: var(--tx); text-decoration: underline; }
.sdb-area-map-info-name a:hover { color: var(--pk); }
.sdb-area-map-info-address { font-size: 11px; color: var(--txm); margin: 0 0 6px; line-height: 1.6; }
.sdb-area-map-info-detail { color: var(--pk); font-size: 12px; font-weight: 600; }

/* 町ページ: ジャンル絞り込みチップ */
.sdb-town-genre-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sdb-town-genre-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  color: var(--tx);
  font-size: 13px;
  text-decoration: none;
}
.sdb-town-genre-chip:hover { border-color: var(--pk); }
.sdb-town-genre-chip.is-active { background: var(--pk); border-color: var(--pk); color: #fff; }
.sdb-town-genre-chip-count { font-size: 11px; opacity: .8; }

/* エリアページ: 町から探す */
.sdb-town-list-section { margin: 32px 0; }
.sdb-town-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.sdb-town-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: #fff;
  color: var(--tx);
  font-size: 13px;
  text-decoration: none;
}
.sdb-town-list-item:hover { border-color: var(--pk); }
.sdb-town-list-item-count { font-size: 11px; color: var(--txm); }

.sdb-side-card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 20px;
}
.sdb-side-card-label { font-size: 12px; color: var(--txl); margin-bottom: 4px; }
.sdb-side-card-tel {
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  text-decoration: none;
  display: block;
  margin-bottom: 16px;
}
.sdb-side-card-tel:hover { color: var(--pk); }
.sdb-side-card-note { font-size: 12px; color: var(--txl); line-height: 1.6; }
.sdb-side-card-btn {
  display: block;
  text-align: center;
  background: var(--pk);
  color: #fff;
  text-decoration: none;
  padding: 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.sdb-side-card-btn:hover { opacity: .9; }

.sdb-related-shops { padding: 32px 0 48px; border-top: 1px solid var(--bd); margin-top: 16px; }

/* 静的コンテンツページ（会社概要・規約・FAQ等） */
.sdb-page { padding: 8px 0 64px; max-width: 960px; margin: 0 auto; }
.sdb-page-title { font-size: 26px; margin: 0 0 24px; color: var(--tx); }
.sdb-page-lead { font-size: 16px; color: var(--txm); line-height: 1.8; margin: 0 0 32px; }
.sdb-page-notice {
  background: var(--bg2);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--txm);
  line-height: 1.8;
  margin-bottom: 32px;
}
.sdb-page h2 { font-size: 19px; margin: 32px 0 12px; color: var(--tx); }
.sdb-page p { font-size: 16px; color: var(--txm); line-height: 1.9; margin: 0 0 12px; }

/* ===== 一覧ページ下部: エリアの傾向 / よくある質問 ===== */
.sdb-insights, .sdb-faq { margin-top: 36px; }
.sdb-page .sdb-insights-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--tx);
}
.sdb-page .sdb-insights-title i { color: var(--pk); font-size: 20px; }

.sdb-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.sdb-insight-item {
  padding: 14px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.sdb-insight-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--pk);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sdb-insight-value small { font-size: 14px; margin-left: 2px; }
.sdb-insight-label { display: block; margin-top: 5px; font-size: 12px; color: var(--txm); line-height: 1.5; }
.sdb-insight-label small { font-size: 10px; color: var(--txl); }

.sdb-page .sdb-insights-subtitle { font-size: 14px; font-weight: 700; margin: 20px 0 8px; color: var(--tx); }
.sdb-insights-towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sdb-insights-towns a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 14px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  color: var(--tx);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.sdb-insights-towns a span { font-size: 11px; color: var(--txm); font-weight: 400; }

.sdb-faq-item {
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
}
.sdb-faq-item summary {
  cursor: pointer;
  padding: 14px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.6;
  list-style: none;
}
.sdb-faq-item summary::-webkit-details-marker { display: none; }
.sdb-faq-item summary::after { content: '＋'; float: right; color: var(--pk); font-weight: 700; margin-left: 8px; }
.sdb-faq-item[open] summary::after { content: '−'; }
.sdb-page .sdb-faq-item p {
  margin: 0;
  padding: 0 15px 15px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--txm);
}

@media (min-width: 600px) {
  .sdb-insights-grid { grid-template-columns: repeat(4, 1fr); }
  .sdb-page .sdb-insights-title { font-size: 19px; }
}

/* 一覧の店舗名は h3（一覧の見出し h2「サロン一覧」は隠し文字。F16）。色は以前の .sdb-page h2 と同じに保つ。
   カードの店名（h2）は .sdb-page h2 の汎用指定を受けるとレイアウトが崩れるため打ち消す。以前 p タグで同じ事故が起きている。 */
.sdb-page h2.sdb-shop-card-name { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.sdb-page h3.sdb-shop-list-name { font-size: 24px; font-weight: 700; margin: 4px 0 8px; color: var(--tx); }
@media (min-width: 769px) {
  .sdb-page h2.sdb-shop-card-name { font-size: 17px; }
}
.sdb-page table.sdb-plain-table { border-collapse: collapse; width: 100%; margin: 16px 0; }
.sdb-page table.sdb-plain-table th,
.sdb-page table.sdb-plain-table td {
  text-align: left;
  padding: 14px;
  border-bottom: 1px solid var(--bd);
  font-size: 15px;
  vertical-align: top;
}
.sdb-page table.sdb-plain-table th { width: 160px; color: var(--txm); font-weight: 500; background: var(--bg2); }
.sdb-page-list { font-size: 16px; color: var(--txm); line-height: 1.9; margin: 0 0 12px; padding-left: 1.4em; }
.sdb-page-list li { margin-bottom: 4px; }
.sdb-page-date { font-size: 14px; color: var(--txl); margin-top: 40px; }

/* 準備中ページ（マイページ等） */
.sdb-coming-soon { text-align: center; padding: 48px 16px 64px; }
.sdb-coming-soon i { font-size: 48px; color: var(--pk); margin-bottom: 16px; display: block; }
.sdb-coming-soon h1 { font-size: 22px; color: var(--tx); margin: 0 0 12px; }
.sdb-coming-soon p { font-size: 15px; color: var(--txm); line-height: 1.8; margin: 0 0 28px; }
.sdb-coming-soon-btn {
  display: inline-block;
  background: var(--pk);
  color: #fff;
  border-radius: 999px;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.sdb-coming-soon-btn:hover { opacity: .9; }

.sdb-faq-item { border-bottom: 1px solid var(--bd); padding: 16px 0; }
.sdb-faq-q { font-size: 14px; font-weight: 600; color: var(--tx); margin: 0 0 8px; }
.sdb-faq-q::before { content: 'Q. '; color: var(--pk); }
.sdb-faq-a { font-size: 13px; color: var(--txm); line-height: 1.8; margin: 0; }
.sdb-faq-a::before { content: 'A. '; color: var(--txl); }

.sdb-plan-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; }
.sdb-plan-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 24px; }
.sdb-plan-card.is-highlight { border-color: var(--pk); box-shadow: 0 4px 16px rgba(192,88,122,.12); }
.sdb-plan-name { font-size: 13px; color: var(--pk); font-weight: 600; margin: 0 0 6px; }
.sdb-plan-price { font-size: 24px; color: var(--tx); font-weight: 700; margin: 0 0 12px; }
.sdb-plan-price span { font-size: 12px; color: var(--txl); font-weight: 400; }
.sdb-plan-features { margin: 0; padding-left: 18px; font-size: 13px; color: var(--txm); line-height: 2; }

.sdb-contact-info { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 24px; margin-top: 24px; }
.sdb-contact-info dt { font-size: 12px; color: var(--txl); margin-top: 12px; }
.sdb-contact-info dt:first-child { margin-top: 0; }
.sdb-contact-info dd { font-size: 14px; color: var(--tx); margin: 4px 0 0; }

/* お問い合わせフォーム */
.sdb-form { margin-top: 24px; }
.sdb-form-row { margin-bottom: 20px; }
.sdb-form-row label { display: block; font-size: 14px; font-weight: 600; color: var(--tx); margin-bottom: 8px; }
.sdb-form-required { display: inline-block; font-size: 11px; font-weight: 600; color: #fff; background: var(--pk); border-radius: 4px; padding: 2px 6px; margin-left: 4px; vertical-align: middle; }
.sdb-form-row input[type="text"],
.sdb-form-row input[type="email"],
.sdb-form-row input[type="tel"],
.sdb-form-row select,
.sdb-form-row textarea {
  width: 100%;
  border: 1.5px solid var(--bd);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--tx);
  background: #fff;
}
.sdb-form-row input:focus,
.sdb-form-row select:focus,
.sdb-form-row textarea:focus { outline: none; border-color: var(--pk); }
.sdb-form-row textarea { resize: vertical; }
.sdb-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sdb-form-note { font-size: 13px; color: var(--txm); margin: 0 0 20px; }
.sdb-form-submit {
  display: inline-block;
  background: var(--pk);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 40px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.sdb-form-submit:hover { opacity: .9; }
.sdb-form-errors { background: #FBE4E1; border: 1px solid #E8A8A0; border-radius: 8px; padding: 16px 20px; margin: 16px 0; }
.sdb-form-errors ul { margin: 0; padding-left: 1.2em; }
.sdb-form-errors li { font-size: 14px; color: #B02A20; margin-bottom: 4px; }
.sdb-form-success {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #E1F3E5;
  border: 1px solid #B7DFC0;
  border-radius: 8px;
  padding: 20px;
  font-size: 15px;
  color: #256B3E;
  margin-top: 24px;
}
.sdb-form-success i { font-size: 22px; }

@media (min-width: 769px) {
  .sdb-plan-grid { grid-template-columns: repeat(3, 1fr); }
}

/* SP: ジャンルアイコン・コラムフィードを拡大 */
@media (max-width: 768px) {
  .sdb-genre-icon { font-size: 24px; width: 40px; height: 40px; margin-bottom: 6px; }
  .sdb-genre-item { padding: 18px 6px; }
  .sdb-article-thumb { width: 84px; height: 84px; }
  .sdb-article-thumb i { font-size: 24px; }
  .sdb-article-tag { font-size: 12px; padding: 3px 12px; }
  .sdb-article-title { font-size: 15px; }
  .sdb-article-date { font-size: 12px; }
  .sdb-article-row { padding: 16px 0; gap: 14px; }
}

/* ============================================
   タブレット・PC幅（769px以上）
============================================ */
@media (min-width: 769px) {
  main { padding-bottom: 64px; }
  .sdb-container { padding: 0 24px; }
  .sdb-header-inner { padding: 14px 24px; justify-content: space-between; }
  /* PCでは同じ要素をヘッダー内の横並びに戻す。出すリンクはSPと同じ */
  .sdb-nav { display: block; position: static; background: none; inset: auto; }
  .sdb-nav-inner {
    position: static; width: auto; max-width: none; height: auto;
    margin: 0; padding: 0; overflow: visible; box-shadow: none;
    flex-direction: row; align-items: center; gap: 28px;
  }
  .sdb-nav-inner a {
    font-size: 16px; color: var(--txm); padding: 0; border-bottom: none; gap: 6px;
  }
  .sdb-nav-inner a:hover { color: var(--pk); }
  .sdb-nav-inner a i { display: none; }
  .sdb-nav-close { display: none; }
  .sdb-nav-inner .sdb-header-mypage {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border: 1px solid var(--pk); border-radius: 999px;
    color: var(--pk); font-weight: 600;
  }
  .sdb-nav-inner .sdb-header-mypage i { display: inline; font-size: 18px; }
  .sdb-nav-inner .sdb-header-mypage:hover { background: var(--pks); }
  .sdb-logo { width: 133px; height: 60px; }
  .sdb-menu-btn { display: none; }

  .sdb-hero { padding: 64px 24px; }
  .sdb-hero-title { font-size: 30px; }
  .sdb-hero-sub { font-size: 16px; margin-bottom: 28px; }
  .sdb-hero-search { max-width: 680px; }
  .sdb-search-input { height: 56px; padding: 0 20px; }
  .sdb-search-input input { font-size: 16px; }
  .sdb-search-input i { font-size: 18px; }
  .sdb-search-btn { font-size: 16px; padding: 0 28px; }
  .sdb-chip-scroll { overflow-x: visible; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .sdb-chip { font-size: 14px; padding: 9px 20px; }

  .sdb-section { padding: 48px 0; }
  .sdb-section-title { font-size: 22px; }

  .sdb-shop-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .sdb-shop-card { flex-direction: column; padding: 16px; }
  .sdb-shop-card-img { width: 100%; height: 160px; margin-bottom: 8px; }
  .sdb-shop-card-name { font-size: 17px; }
  .sdb-shop-card-address { font-size: 14px; }
  .sdb-tag { font-size: 12px; padding: 4px 12px; }

  .sdb-search-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .sdb-genre-grid { grid-template-columns: repeat(4, 1fr); }
  .sdb-genre-label { font-size: 13px; }

  .sdb-owner-cta { padding: 56px 24px; }
  .sdb-owner-cta-title { font-size: 26px; }
  .sdb-owner-cta-text { font-size: 17px; line-height: 1.8; }

  .sdb-article-row { padding: 18px 0; gap: 16px; }
  .sdb-article-thumb { width: 88px; height: 88px; }
  .sdb-article-tag { font-size: 12px; }
  .sdb-article-title { font-size: 16px; }
  .sdb-article-date { font-size: 13px; }

  .sdb-bottom-nav { display: none; }

  .sdb-shop-detail-photo { height: 320px; font-size: 40px; }
  .sdb-shop-detail-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .sdb-shop-detail-name { font-size: 26px; }
  .sdb-side-card { position: sticky; top: 84px; }
  .sdb-map-embed iframe { height: 320px; }
}

/* AIサロン案内チャット */
.sdb-chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pk);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(46,40,32,.25);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 41;
}
.sdb-chat-fab:hover { opacity: .92; }
body:has(.sdb-bottom-nav) .sdb-chat-fab { bottom: 76px; }
body:has(.sdb-bottom-nav) .sdb-chat-panel { bottom: 144px; }

.sdb-chat-panel {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 88px;
  width: calc(100vw - 32px);
  max-width: 360px;
  height: min(520px, calc(100vh - 140px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(46,40,32,.25);
  flex-direction: column;
  overflow: hidden;
  z-index: 40;
}
.sdb-chat-panel.is-open { display: flex; }

.sdb-chat-header {
  background: var(--pk);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.sdb-chat-header-title { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 6px; }
.sdb-chat-header-sub { font-size: 13px; margin: 4px 0 0; opacity: .85; }
.sdb-chat-close { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }

.sdb-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
}
.sdb-chat-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.7;
}
.sdb-chat-msg a { color: inherit; text-decoration: underline; font-weight: 600; }
.sdb-chat-msg--bot { background: #fff; border: 1px solid var(--bd); color: var(--tx); align-self: flex-start; border-bottom-left-radius: 4px; }
.sdb-chat-msg--user { background: var(--pk); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }

.sdb-chat-quickreplies { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; }
.sdb-chat-chip {
  background: #fff;
  border: 1.5px solid var(--pk);
  color: var(--pk);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.sdb-chat-chip:hover { background: var(--pk); color: #fff; }

.sdb-chat-typing { display: inline-flex; gap: 4px; }
.sdb-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--txl); animation: sdbChatTyping 1s infinite ease-in-out; }
.sdb-chat-typing span:nth-child(2) { animation-delay: .15s; }
.sdb-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sdbChatTyping { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.sdb-chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--bd);
  background: #fff;
  flex-shrink: 0;
}
.sdb-chat-form input {
  flex: 1;
  border: 1.5px solid var(--bd);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 15px;
  font-family: inherit;
}
.sdb-chat-form input:focus { outline: none; border-color: var(--pk); }
.sdb-chat-form button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pk);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.sdb-chat-form button:hover { opacity: .9; }

@media (min-width: 769px) {
  .sdb-chat-fab { right: 32px; bottom: 32px; width: 60px; height: 60px; font-size: 26px; }
  .sdb-chat-panel { right: 32px; bottom: 108px; width: 380px; }
  body:has(.sdb-bottom-nav) .sdb-chat-fab { bottom: 32px; }
  body:has(.sdb-bottom-nav) .sdb-chat-panel { bottom: 108px; }
}

/* ログイン・マイページ */
.sdb-login-box {
  max-width: 420px;
  margin: 24px auto;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 36px 28px;
  text-align: center;
}
.sdb-login-icon { font-size: 44px; color: var(--pk); }
.sdb-login-title { font-size: 20px; margin: 8px 0 10px; }
.sdb-login-lead { font-size: 13px; color: var(--txm); line-height: 1.8; margin: 0 0 20px; }
.sdb-login-error {
  font-size: 13px;
  color: #B3261E;
  background: #FDEDEC;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 16px;
}
.sdb-login-buttons { display: flex; flex-direction: column; gap: 12px; }
.sdb-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}
.sdb-login-btn i { font-size: 20px; }
.sdb-login-btn.is-line { background: #06C755; color: #fff; }
.sdb-login-btn.is-line:hover { opacity: .9; }
.sdb-login-btn.is-google { background: #fff; color: var(--tx); border-color: var(--bd); }
.sdb-login-btn.is-google:hover { background: var(--bg2); }
.sdb-login-note { font-size: 11px; color: var(--txl); margin: 20px 0 0; line-height: 1.7; }
.sdb-login-note a { color: var(--pk); }

.sdb-mypage-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.sdb-mypage-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sdb-mypage-avatar.is-placeholder {
  background: var(--pks);
  color: var(--pk);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.sdb-mypage-profile-main { flex: 1; min-width: 0; }
.sdb-mypage-name { font-size: 16px; font-weight: 600; margin: 0 0 2px; }
.sdb-mypage-provider { font-size: 12px; color: var(--txm); margin: 0; }
.sdb-mypage-logout {
  font-size: 12px;
  color: var(--txm);
  text-decoration: none;
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}
.sdb-mypage-logout:hover { border-color: var(--pk); color: var(--pk); }
.sdb-mypage-menu { display: flex; flex-direction: column; gap: 10px; }
.sdb-mypage-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--tx);
}
.sdb-mypage-menu-item:hover { border-color: var(--pk); }
.sdb-mypage-menu-item > i:first-child { font-size: 22px; color: var(--pk); }
.sdb-mypage-menu-label { flex: 1; font-size: 14px; font-weight: 500; }
.sdb-mypage-menu-count { font-size: 13px; color: var(--txm); }

/* サロン詳細のお気に入りボタン */
.sdb-shop-detail-namerow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: space-between;
}
.sdb-shop-detail-namerow .sdb-shop-detail-name { flex: 1; min-width: 0; }
.sdb-fav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--txm);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.sdb-fav-btn:hover { border-color: var(--pk); color: var(--pk); }
.sdb-fav-btn.is-active { color: var(--pk); border-color: var(--pk); background: var(--pks); }

/* マイページ拡充（保存した検索条件・閲覧履歴・おすすめ・お気に入りメモ） */
.sdb-mypage-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  margin: 36px 0 14px;
}
.sdb-mypage-subtitle i { color: var(--pk); font-size: 20px; }
.sdb-mypage-note { font-size: 12px; color: var(--txm); margin: -6px 0 14px; }
.sdb-mypage-empty { font-size: 13px; color: var(--txm); line-height: 1.8; margin: 0; }
.sdb-mypage-more { font-size: 13px; margin: 12px 0 0; }
.sdb-mypage-more a { color: var(--pk); }
.sdb-mypage-viewed-at { font-size: 11px; color: var(--txm); margin-top: 6px; }

.sdb-saved-search-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sdb-saved-search-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.sdb-saved-search-chip > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 8px 14px;
  font-size: 13px;
  color: var(--tx);
  text-decoration: none;
}
.sdb-saved-search-chip > a:hover { color: var(--pk); }
.sdb-saved-search-chip > a i { color: var(--pk); }
.sdb-saved-search-del {
  border: none;
  background: none;
  color: var(--txm);
  font-size: 14px;
  padding: 8px 10px 8px 4px;
  cursor: pointer;
}
.sdb-saved-search-del:hover { color: var(--pk); }

.sdb-save-search-row { margin: -8px 0 20px; }
.sdb-save-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  color: var(--txm);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.sdb-save-search-btn:hover { border-color: var(--pk); color: var(--pk); }
.sdb-save-search-btn.is-saved { color: var(--pk); border-color: var(--pk); background: var(--pks); cursor: default; }
.sdb-save-search-btn i { font-size: 16px; }

.sdb-fav-card-wrap { display: flex; flex-direction: column; }
.sdb-fav-card-wrap .sdb-search-card { flex: 1; }
.sdb-fav-memo {
  margin-top: 6px;
  border: 1px dashed var(--bd);
  border-radius: 10px;
  background: var(--bg2);
  font-size: 12px;
}
.sdb-fav-memo-view {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
}
.sdb-fav-memo-view i { color: var(--pk); font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.sdb-fav-memo-view.is-empty { cursor: pointer; }
.sdb-fav-memo-view.is-empty .sdb-fav-memo-text { color: var(--txm); }
.sdb-fav-memo-text { flex: 1; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.sdb-fav-memo-edit-btn {
  border: none;
  background: none;
  color: var(--txm);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.sdb-fav-memo-edit-btn:hover { color: var(--pk); }
.sdb-fav-memo-form { padding: 8px 10px; }
.sdb-fav-memo-form textarea {
  width: 100%;
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 8px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
}
.sdb-fav-memo-actions { display: flex; gap: 8px; margin-top: 6px; }
.sdb-fav-memo-actions button {
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
  color: var(--txm);
}
.sdb-fav-memo-save { background: var(--pk) !important; border-color: var(--pk) !important; color: #fff !important; }
.sdb-fav-memo-save:disabled { opacity: .6; }

/* 店舗ページ: 口コミ */
.sdb-review-section { margin-top: 48px; }
.sdb-review-avg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  font-size: 16px;
  color: #E8A33D;
  font-weight: 600;
}
.sdb-review-avg-count { font-size: 12px; color: var(--txm); font-weight: 400; }
.sdb-review-form {
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  margin-bottom: 24px;
}
.sdb-review-form-title { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.sdb-review-stars { display: flex; gap: 2px; margin-bottom: 10px; }
.sdb-review-star {
  border: none;
  background: none;
  font-size: 26px;
  color: #D8D2C8;
  cursor: pointer;
  padding: 2px;
}
.sdb-review-star.is-active { color: #E8A33D; }
.sdb-review-form textarea {
  width: 100%;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.7;
  resize: vertical;
  box-sizing: border-box;
}
.sdb-review-error { font-size: 12px; color: #C0392B; margin: 8px 0 0; }
.sdb-review-form-actions { display: flex; gap: 10px; margin-top: 10px; }
.sdb-review-submit {
  border: none;
  border-radius: 999px;
  background: var(--pk);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 26px;
  cursor: pointer;
}
.sdb-review-submit:disabled { opacity: .6; }
.sdb-review-delete {
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  color: var(--txm);
  font-size: 13px;
  padding: 9px 18px;
  cursor: pointer;
}
.sdb-review-delete:hover { border-color: #C0392B; color: #C0392B; }
.sdb-review-form-note { font-size: 11px; color: var(--txm); margin: 10px 0 0; }
.sdb-review-login-cta { font-size: 13px; color: var(--txm); margin: 0 0 20px; }
.sdb-review-login-cta a { color: var(--pk); font-weight: 600; }
.sdb-review-list { display: flex; flex-direction: column; gap: 14px; }
.sdb-review-item {
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: #fff;
  padding: 16px 18px;
}
.sdb-review-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sdb-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sdb-review-avatar.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  color: var(--txm);
  font-size: 18px;
}
.sdb-review-author { font-size: 13px; font-weight: 600; margin: 0; }
.sdb-review-meta { font-size: 11px; color: var(--txm); margin: 2px 0 0; display: flex; align-items: center; gap: 8px; }
.sdb-review-item-stars { color: #E8A33D; font-size: 12px; }
.sdb-review-item-stars .ti-star { color: #D8D2C8; }
.sdb-review-body { font-size: 13px; line-height: 1.8; margin: 0; word-break: break-word; }

/* 店舗ページ: おすすめ商品（AF枠） */
.sdb-product-section { margin-top: 48px; }
.sdb-product-pr {
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--txm);
  border: 1px solid var(--bd);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}
.sdb-product-note { font-size: 12px; color: var(--txm); margin: -6px 0 16px; }
.sdb-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.sdb-product-card {
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sdb-product-img {
  height: 170px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txm);
  font-size: 34px;
  border-bottom: 1px solid var(--bg2);
}
.sdb-product-img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; box-sizing: border-box; }
.sdb-product-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.sdb-product-maker { font-size: 11px; color: var(--txm); margin: 0 0 2px; }
.sdb-product-name { font-size: 14px; font-weight: 600; margin: 0 0 6px; line-height: 1.5; }
.sdb-product-desc { font-size: 12px; color: var(--txm); line-height: 1.7; margin: 0 0 12px; flex: 1; }
.sdb-product-links { display: flex; gap: 8px; }
.sdb-product-link {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 0;
  text-decoration: none;
  color: #fff;
}
.sdb-product-link.is-rakuten { background: #BF0000; }
.sdb-product-link.is-amazon { background: #232F3E; }
.sdb-product-link:hover { opacity: .85; }

/* 有料プラン: サロンページ拡張表示 */
.sdb-shop-catch {
  font-size: 15px;
  font-weight: 600;
  color: var(--pk);
  margin: 4px 0 12px;
}
.sdb-shop-description {
  font-size: 13px;
  line-height: 1.9;
  color: var(--tx);
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 20px;
}
.sdb-side-card-booking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--pk);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  padding: 13px 0;
  text-decoration: none;
  margin-bottom: 14px;
}
.sdb-side-card-booking:hover { opacity: .9; }
.sdb-shop-gallery { margin-top: 48px; }
.sdb-shop-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.sdb-shop-gallery-item { margin: 0; }
.sdb-shop-gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.sdb-shop-gallery-item figcaption { font-size: 11px; color: var(--txm); margin-top: 5px; }
.sdb-shop-menu-section { margin-top: 48px; }
.sdb-shop-menu-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  overflow: hidden;
}
.sdb-shop-menu-table tr + tr { border-top: 1px solid var(--bg2); }
.sdb-shop-menu-table td { padding: 13px 16px; font-size: 13px; }
.sdb-shop-menu-name { font-weight: 600; }
.sdb-shop-menu-desc { display: block; font-size: 11px; color: var(--txm); font-weight: 400; margin-top: 3px; }
.sdb-shop-menu-price { text-align: right; white-space: nowrap; font-weight: 600; color: var(--pk); }
.sdb-shop-menu-note { font-size: 11px; color: var(--txm); margin: 10px 0 0; }
/* KITEKO 連携店舗のメニュー（カテゴリ見出し・割引前の価格） */
.sdb-shop-menu-category { font-size: 13px; font-weight: 700; margin: 14px 0 4px; padding-left: 8px; border-left: 3px solid var(--pk); }
.sdb-shop-menu-orig { font-size: 11px; color: var(--txm); margin-right: 4px; }
.sdb-shop-coupon-section { margin-top: 48px; }
.sdb-shop-coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sdb-shop-coupon {
  border: 1px dashed var(--pk);
  border-radius: 14px;
  background: var(--pks);
  padding: 16px 18px;
}
.sdb-shop-coupon-title { font-size: 14px; font-weight: 600; color: var(--pk); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.sdb-shop-coupon-desc { font-size: 12px; line-height: 1.7; margin: 0 0 6px; }
.sdb-shop-coupon-expires { font-size: 11px; color: var(--txm); margin: 0; }

/* 掲載プラン比較表 */
.sdb-plan-table-wrap { overflow-x: auto; margin: 0 0 24px; }
.sdb-plan-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--bd);
  font-size: 13px;
}
.sdb-plan-table th, .sdb-plan-table td { padding: 11px 14px; border: 1px solid var(--bg2); text-align: center; }
.sdb-plan-table th:first-child, .sdb-plan-table td:first-child { text-align: left; font-weight: 500; }
.sdb-plan-table thead th { background: var(--bg2); font-weight: 600; }
.sdb-plan-table .is-highlight { background: var(--pks); }
.sdb-plan-table .sdb-plan-price-cell { font-size: 16px; font-weight: 700; color: var(--pk); }
.sdb-plan-ok { color: var(--pk); font-weight: 700; }
.sdb-plan-no { color: var(--bd); }

/* プロフィール設定 */
.sdb-profile-lead { font-size: 13px; color: var(--txm); line-height: 1.9; margin: 0 0 20px; }
.sdb-profile-errors {
  border: 1px solid #E5B5AE;
  background: #FBF0EE;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.sdb-profile-errors p { font-size: 12px; color: #C0392B; margin: 0; display: flex; align-items: center; gap: 6px; }
.sdb-profile-form { display: flex; flex-direction: column; }
.sdb-profile-label { font-size: 13px; font-weight: 600; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.sdb-profile-required {
  font-size: 10px;
  color: #fff;
  background: var(--pk);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
}
.sdb-profile-optional {
  font-size: 10px;
  color: var(--txm);
  border: 1px solid var(--bd);
  border-radius: 4px;
  padding: 1px 6px;
}
.sdb-profile-input {
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.sdb-profile-help { font-size: 11px; color: var(--txm); margin: 6px 0 20px; }
.sdb-profile-birth { display: flex; gap: 8px; }
.sdb-profile-birth select {
  flex: 1;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.sdb-profile-submit {
  border: none;
  border-radius: 999px;
  background: var(--pk);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 0;
  cursor: pointer;
  margin-top: 8px;
}
.sdb-profile-submit:hover { opacity: .9; }

/* ---------- 店舗カードのリンク ----------
   カード全体を <a> で包むと、アンカーテキストに住所・電話・タグまで入ってしまう。
   検索エンジンから見ると「何のリンクか」がぼやけるため、リンクは店名だけに掛け、
   カード全体のクリックは擬似要素を広げて確保する。
   住所や電話はリンクの外に置いたまま、見た目と操作性は変えない。 */
.sdb-card-linkbox { position: relative; }
.sdb-card-link { text-decoration: none; color: inherit; }
.sdb-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* カード内に別のリンク（電話など）を置く場合は、擬似要素より前面に出す */
.sdb-card-linkbox a:not(.sdb-card-link) { position: relative; z-index: 2; }

/* ---------- 店舗ページの横リンク ----------
   同じ町・同じ区×ジャンルへの導線。店舗ページ同士が孤立すると、
   利用者もクローラも1店舗見たら戻るしかなくなる。 */
.sdb-crosslinks {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
.sdb-crosslink-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
.sdb-crosslink-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 8px;
}
.sdb-crosslink-list a {
  color: var(--tx);
  text-decoration: none;
  font-size: 14px;
}
.sdb-crosslink-list a:hover { color: var(--pk); text-decoration: underline; }
.sdb-crosslink-more {
  font-size: 13px;
  color: var(--pk);
  text-decoration: none;
}
.sdb-crosslink-more:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .sdb-crosslinks { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sdb-crosslink-list { grid-template-columns: 1fr 1fr; }
}

/* ===== 404ページ（2026-08-20） =====
   それまでは「店舗が見つかりません。」の1行だけを返しており、
   たどり着いた人がサイト内に戻る導線が1本も無かった。 */
.sdb-notfound {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 0 72px;
  text-align: center;
}
.sdb-notfound-title { font-size: 20px; margin: 0 0 12px; color: var(--tx); }
.sdb-notfound-text { font-size: 14px; color: var(--txm); margin: 0 0 28px; line-height: 1.9; }
.sdb-notfound-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  justify-content: center;
}
.sdb-notfound-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  color: var(--tx);
  text-decoration: none;
  font-size: 14px;
}
.sdb-notfound-links a:hover { border-color: var(--pk); color: var(--pk); }

/* ===== オーナー導線・自社ブランド枠・サロン事情（2026-08-20） ===== */

/* 掲載情報のすぐ下に置く編集ボタン */
.sdb-owner-claim {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--pks);
  border-radius: 14px;
  background: #fff;
  color: var(--tx);
  text-decoration: none;
}
.sdb-owner-claim:hover { border-color: var(--pk); background: var(--bg); }
.sdb-owner-claim > .ti { font-size: 22px; color: var(--pk); flex-shrink: 0; }
.sdb-owner-claim-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sdb-owner-claim-body strong { font-size: 14px; font-weight: 600; }
.sdb-owner-claim-body small { font-size: 11px; color: var(--txm); }
.sdb-owner-claim-arrow { color: var(--txl); flex-shrink: 0; }

/* オーナー申請ページの店舗表示 */
.sdb-claim-shop {
  margin: 16px 0 24px;
  padding: 16px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--bg);
}
.sdb-claim-shop-name { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--tx); }
.sdb-claim-shop-address, .sdb-claim-shop-tel { margin: 0; font-size: 13px; color: var(--txm); }
.sdb-claim-shop-link { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--pk); }
.sdb-form-hint { margin: 4px 0 0; font-size: 11px; color: var(--txm); line-height: 1.7; }

/* 自社ブランド枠。店舗情報より下に、1つだけ、控えめに */
.sdb-own-product {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 16px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--bg);
}
.sdb-own-product-img { flex-shrink: 0; width: 72px; height: 72px; }
.sdb-own-product-img img { width: 100%; height: 100%; object-fit: contain; }
.sdb-own-product-body { min-width: 0; }
.sdb-own-product-label { margin: 0 0 2px; font-size: 11px; color: var(--txm); }
.sdb-own-product-pr {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg2);
  font-size: 10px;
  color: var(--txl);
}
.sdb-own-product-name { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--tx); }
.sdb-own-product-desc { margin: 0 0 8px; font-size: 12px; color: var(--txm); line-height: 1.7; }
.sdb-own-product-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--pk);
  text-decoration: none;
}
.sdb-own-product-link:hover { text-decoration: underline; }

/* 掲載データから作る「その町のサロン事情」 */
.sdb-situation {
  margin: 20px 0;
  padding: 16px;
  border-left: 3px solid var(--pks);
  background: var(--bg);
  border-radius: 0 12px 12px 0;
}
.sdb-situation-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--tx);
}
.sdb-situation-text { margin: 0; font-size: 13px; color: var(--txm); line-height: 1.9; }
.sdb-situation-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 12px 0 0;
}
.sdb-situation-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: var(--tx);
  text-decoration: none;
}
.sdb-situation-links a:hover { border-color: var(--pk); color: var(--pk); }
.sdb-situation-links span { font-size: 11px; color: var(--txl); }

/* トップのヒーロー直下に置く掲載方針の一文 */
.sdb-hero-tagline {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.8;
  opacity: .9;
}

/* 404ページの区リンク */
.sdb-notfound-wards {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 16px 0 0;
}
.sdb-notfound-wards a {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--bg2);
  color: var(--txm);
  text-decoration: none;
  font-size: 13px;
}
.sdb-notfound-wards a:hover { color: var(--pk); }
/* 新デザイン（body.is-skin）に切り替える前の古いページでは、新しく足したメニュー2つを出さない（2026-10-08、段階リリース用） */
body:not(.is-skin) .sdb-nav-inner .is-skin-only { display: none; }