/*
 * 比較サイト（外構・エクステリアNavi）専用スタイル
 * hikaku-baseの土台（style.css）・部品（parts.css）の上に読み込む。
 * サイトのブランドカラー（グリーン）に合わせてアクセント色を上書きする。
 */
:root {
  --accent: #2f7d4f;
  /* キャッチコピー用の赤（2026-09-21）。
     ⛔ 真っ赤（#f00）は使わない。サイト内で既に使っている #c0392b（shop-review.css の必須バッジ）に合わせる。 */
  --copy-red: #c0392b;
  --accent-dark: #24603c;
  --accent-pale: #eaf3ec;
  --accent-light: #7bc687;
  --accent-gradient: linear-gradient(90deg, #eaf9c9, #7bc687);
}

/* ===== ヘッダーのロゴ画像 ===== */
.site-brand-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.site-brand-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
.site-brand-text { color: var(--text); }

/* ===== ボタン追加バリエーション（parts.cssの.btnを拡張） ===== */
.btn-outline {
  background: #fff;
  color: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: none;
}
.btn-outline:hover { background: var(--accent-pale); opacity: 1; }
.btn-small { padding: 9px 20px; font-size: 13px; }

/* ===== 共通セクション ===== */
.site-section { padding: 40px 0; }
.site-section-tinted { background: transparent; }
.section-heading {
  font-size: clamp(19px, 3vw, 24px); font-weight: 800; margin: 0 0 18px; color: var(--text);
  position: relative; padding-left: 16px;
}
.section-heading::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px;
  border-radius: 999px; background: var(--accent-gradient);
}
.section-heading-center { text-align: center; padding-left: 0; }
.section-heading-center::before { display: none; }
.section-heading-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.section-heading-row .section-heading { margin-bottom: 0; }
.section-heading-note { font-size: 13px; color: var(--muted); }

/* ===== ヒーロー(検索+写真) ===== */
.hero-search { padding: 32px 0 40px; background: linear-gradient(180deg, var(--accent-pale) 0%, transparent 60%); }
.hero-inner { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.hero-text { flex: 1 1 420px; min-width: 280px; }
.hero-badge {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent-dark);
  background: var(--accent-gradient); padding: 6px 14px; border-radius: 999px; margin: 0 0 14px;
}
.hero-heading { font-size: clamp(26px, 4.2vw, 40px); font-weight: 900; line-height: 1.4; margin: 0 0 14px; }
.hero-heading-accent { color: var(--accent); }
.hero-lead { font-size: 15px; color: var(--muted); max-width: 44ch; margin: 0 0 22px; }

.hero-photo { flex: 1 1 380px; min-width: 280px; }
.hero-photo img { width: 100%; height: 320px; object-fit: cover; border-radius: 14px; display: block; }
.hero-photo-mobile { display: none; }
.hero-top { display: contents; }

/* ===== トップページのヒーローを画面の端まで広げる（2026-08-30） =====
 * これまでは <main class="site-main"> の max-width:1160px と左右16pxの余白が効いていて、
 * ヒーローの背景が1128pxで止まり、左右に白い余白が出ていた。
 * ここでトップページだけ .site-main の横幅の制限を外して背景を全幅にする。
 * 中身の位置がズレないよう、.inner の左右余白を 16px → 32px にして
 * 従来の「site-main(16px) + inner(16px) = 32px」と同じ余白を .inner だけで作る。
 * ＝ 文字・ボタン・他のセクションの位置と幅は一切変わらない。
 * ⛔ 100vw は使わない（スクロールバーぶんはみ出して横スクロールが出るため）。 */
/* 2026-09-06 追記：上の余白（padding-top）もゼロにする。
 * 共通の .site-main は padding: 24px 16px 64px（スマホは padding-top:16px）。
 * トップだけ左右をゼロにしていたが「上」を消し忘れていたため、
 * 画面の端まで広がるはずのヒーローが24px下に押し下げられ、
 * ヘッダーとの間に白い帯が残っていた（PC24px／スマホ16px）。
 * .home .site-main は詳細度 0,2,0 で、@media 内の .site-main（0,1,0）より強い。
 * ＝スマホ幅の 16px も打ち消せる。
 * ⛔ 左右・下の余白と、トップ以外のページの余白は一切変えない。 */
.home .site-main { max-width: none; padding-top: 0; padding-left: 0; padding-right: 0; }
.home .inner { padding-left: 32px; padding-right: 32px; }

.search-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; max-width: 460px; box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.search-card-label { font-weight: 700; font-size: 14px; color: var(--accent); margin-bottom: 12px; }
.search-card-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.search-select { flex: 1 1 160px; }
.search-select select {
  width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-soft); font-size: 14px; color: var(--text); font-family: inherit;
}

/* ===== 3ステップ ===== */
.steps-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.steps-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 24px 18px; text-align: center; }
.steps-number {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--accent-pale); color: var(--accent); font-weight: 900; margin-bottom: 12px;
}
.steps-title { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.steps-desc { font-size: 13px; color: var(--muted); margin: 0; }

/* ===== 人気エリア一覧(横スクロール) ===== */
.area-scroll-grid { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.area-scroll-card {
  flex: 1 1 0; min-width: 120px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text);
}
.area-scroll-card:hover { border-color: var(--accent); opacity: 1; }
.area-scroll-card-name { font-weight: 800; font-size: 14px; }
.area-scroll-card-count { font-size: 11px; color: var(--muted); }

/* ===== ランキングカード（parts.cssの.ranking-cardを拡張） ===== */
.ranking-card.is-featured { border: 2px solid var(--accent); }
.ranking-card-row { display: flex; gap: 16px; align-items: flex-start; }
.ranking-card-photo {
  flex: 0 0 92px; width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
  background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box;
}
.ranking-card-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ranking-card-body { flex: 1 1 auto; min-width: 0; }
.ranking-card-copy { font-size: 13px; color: var(--muted); margin: 6px 0; }
/* キャッチコピーを赤い太字にする（2026-09-21・れのぼ指示）。
   ⛔ エリアページ（body の .tax-area）だけに限定する。
      この class はトップページ（front-page.php）のランキングカードでも使っていて、
      今回の指示は「エリアページだけ」なので、素の .ranking-card-copy は触らない。
   ⛔ 文字は大きくしない（13px のまま）。⛔ 背景色・箱・左の縦線は付けない。 */
.tax-area .ranking-card-copy { font-weight: 700; color: var(--copy-red); }
.ranking-card-price { font-size: 13.5px; font-weight: 700; color: var(--accent); margin: 6px 0; }

/* ===== タグ ===== */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.tag-chip { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-pale); padding: 4px 12px; border-radius: 999px; }

/* ===== 都道府県チップ一覧 ===== */
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); text-decoration: none; }
.chip:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

/* ===== 選ばれる理由 ===== */
.reason-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.reason-card { text-align: center; padding: 24px 16px; }
.reason-card-icon {
  width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--accent-gradient); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900;
}
.reason-card-title { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.reason-card-desc { font-size: 12.5px; color: var(--muted); margin: 0; }
.cta-band {
  text-align: center; padding: 36px 20px; border-radius: 16px;
  background: linear-gradient(120deg, var(--accent-pale) 0%, var(--accent-light) 55%, var(--accent) 100%);
}
.cta-band-title { font-size: clamp(17px, 2.2vw, 22px); font-weight: 800; margin-bottom: 8px; color: var(--accent-dark); }
.cta-band-desc { font-size: 13px; color: var(--accent-dark); opacity: .85; margin: 0 0 16px; }
.cta-band-note { font-size: 12px; color: var(--accent-dark); opacity: .85; margin-top: 12px; }

/* ===== エリアページ見出し ===== */
.area-page-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--accent-pale); color: var(--accent);
  font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
/* バッジと更新日を並べる行（2026-09-07）。
   縦の余白はこの行が持つので、中のバッジ側の margin-bottom は消す。 */
.area-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.area-page-meta .area-page-badge { margin-bottom: 0; }
.area-page-updated {
  display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); color: var(--muted);
  font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
}
.area-page-updated time { color: var(--text); }
.area-page-h1 { font-size: clamp(24px, 4vw, 36px); line-height: 1.4; margin: 0 0 14px; font-weight: 800; }
.area-page-lead { font-size: 14px; line-height: 1.9; color: var(--muted); max-width: 720px; margin: 0 0 28px; }

/* ===== 市区町村グリッド ===== */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.city-chip {
  display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; text-decoration: none; color: var(--text); font-size: 14px; font-weight: 700;
}
.city-chip:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

/* ===== その他のおすすめ業者 ===== */
.other-shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.other-shop-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.other-shop-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.other-shop-card-photo { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 4px; box-sizing: border-box; }
.other-shop-card-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.other-shop-card-name { font-size: 15px; font-weight: 800; margin: 0; }
.other-shop-card-area { font-size: 12px; color: var(--muted); margin: 6px 0; }
/* ⛔ ランキング側と同じ（赤い太字）。この class はエリアページの一覧だけで使っている。 */
.other-shop-card-copy { font-size: 13px; font-weight: 700; color: var(--copy-red); margin: 6px 0 10px; }
.line-badge { background: var(--accent-pale); color: var(--accent); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }

/* ===== スマホ固定CTA ===== */
.sticky-mobile-cta { display: none; }

/* ===== 店舗詳細ページ ===== */
.shop-detail-photo { text-align: center; margin: 0 0 24px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.shop-detail-photo img { max-height: 220px; width: auto; max-width: 100%; object-fit: contain; }
.shop-detail-rating { margin: 8px 0 16px; }
.shop-detail-subheading { font-size: 15px; font-weight: 800; color: var(--accent); margin: 32px 0 12px; }
.shop-detail-catch { font-size: 15px; line-height: 1.8; color: var(--text); }
.shop-info-box { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin: 20px 0; }
.shop-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; }
.shop-info-item { display: flex; gap: 10px; align-items: flex-start; }
.shop-info-item i { color: var(--accent); margin-top: 3px; width: 16px; }
.shop-info-label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.shop-info-value { font-size: 14px; font-weight: 600; }
.case-study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.case-study-img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; background: var(--bg-soft); }
.review-list { display: flex; flex-direction: column; gap: 14px; }
.review-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; background: #fff; }
.review-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.review-card-author { font-size: 13px; font-weight: 700; }
.review-card-date { font-size: 12px; color: var(--muted); }
.review-card-body { font-size: 14px; color: var(--text); line-height: 1.8; }
.shop-cta-band { margin: 32px 0 12px; padding: 28px 20px; text-align: center; background: var(--accent-pale); border-radius: 14px; }
.shop-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.shop-cta-buttons .btn { width: min(320px, 100%); }
.shop-cta-note { font-size: 12px; color: var(--muted); margin-top: 14px; }

/* =============================================================
   スマホ対応（各カードを画像+テキストの横並びに統一し、
   2列グリッドは避けて縦積みリストにする）
   ============================================================= */
/* ===== 有料掲載枠と1位を金色にする（2026-08-30／伐採ナビからの横展開・A-10） =====
   面を金で塗ると安っぽくなるので、金は「枠線」と「見出しの帯（バッジ）」だけ。
   カード面はほぼ白のシャンパン色にする。
   一番上のカードは、有料枠でも1位でも常に金になる（テンプレート側で is-gold を付ける）。 */
.ranking-card.is-gold {
  border: 2px solid #AE8434;
  background: #FDFAF1;
}
.ranking-card.is-gold .ranking-badge,
.ranking-badge.is-1 {
  background: linear-gradient(135deg, #8E6A22 0%, #B8912F 55%, #D9BB63 100%);
  color: #fff;
}

/* ===== 店舗画像を正方形から横長（4:3）にして大きくする（A-11） =====
   このサイトの店舗画像は「ロゴ」で、縦横比がばらばら（1500x258・300x52・710x718 など）。
   そのため伐採ナビの object-fit:cover は使わず contain のままにする（cover だとロゴが切れる）。
   箱を横長に広げることで、横長のロゴが読める大きさで入るようにするのが目的。 */
.ranking-card-photo {
  flex: 0 0 220px; width: 220px; height: 165px;
}

/* ===== 対応可能な工事内容の比較表（A-13） =====
   全店舗で同じ5項目・同じ順番を ○／− で出す。縦に並べたときに比較できるようにするため。 */
.service-compare {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 12px;
}
.service-compare li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.5;
}
.service-compare-mark {
  flex: 0 0 16px;
  text-align: center;
  font-weight: 700;
}
.service-compare li.is-yes { color: var(--text); }
.service-compare li.is-yes .service-compare-mark { color: var(--accent); }
.service-compare li.is-no { color: #9aa3ab; }
.service-compare-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 6px 0 0;
  word-break: auto-phrase;
}

/* ===== 工事内容から探す（絞り込みリンク・A-13） ===== */
.service-filter-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.service-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}
.service-filter-chip:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.service-filter-count { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* ===== 店舗の紹介文（A-12） =====
   エリアページは地の文（箱にしない）。何社も縦に並ぶので、箱にすると箱だらけで読みにくい。
   店舗詳細ページだけ is-boxed を付けて、うすいグレーの箱にする。
   左線は使わず、背景色で「説明のかたまり」だと分かるようにしている。
   word-break:auto-phrase ＝ 日本語が文節の切れ目で折り返る。 */
.shop-intro { margin-top: 12px; }
.shop-intro.is-boxed { background: #F6F7F9; border-radius: 5px; padding: 12px 14px; }
.shop-intro-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* 「もっと見る」で開く部分（2026-08-30）
   続きのテキストはHTMLに最初から入っていて、ここで隠しているだけ。
   検索エンジンからは全文が見える。 */
.shop-intro-rest { display: none; }
.shop-intro.is-open .shop-intro-rest { display: inline; }
.shop-intro.is-open .shop-intro-ellipsis { display: none; }
/* 2026-08-30（れのぼ指示）「もっと見るのボックスはいらない。閉じるもいらない」
   ⇒ 箱に見える装飾（背景色・枠線・角丸・内側の余白）を全部外して、
      紹介文の続きとして地の文で読める形にする。伐採ナビと同じ形。
   ⇒ 開いたら「もっと見る」ごと消す。これで「閉じる」という文字はどこにも出ない。
   ⛔ 箱に見える装飾を戻さない。⛔ 左線は使わない。
   ※ ▼ だけは残す＝閉じているときに「続きがある」と分かる目印が必要なため
      （文字色と同じ小さな記号なので、箱にはならない）。伐採ナビも同じ判断。 */
.shop-intro-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.7;
  cursor: pointer;
}
.shop-intro-more::after { content: "▼"; font-size: 9px; line-height: 1; }
.shop-intro-more:hover { color: var(--accent); text-decoration: underline; }
/* 開いたら見出しごと消す。これで「閉じる」のラベルがそもそも存在しない。 */
.shop-intro.is-open .shop-intro-more { display: none; }

@media (max-width: 700px) {
  .steps-list { grid-template-columns: 1fr; gap: 10px; }
  .steps-item { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; }
  .steps-number { margin-bottom: 0; flex-shrink: 0; }
  .steps-text { min-width: 0; }
  .steps-title { margin-bottom: 2px; }

  .reason-list { grid-template-columns: 1fr; gap: 10px; }
  .reason-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; }
  .reason-card-icon { margin: 0; flex-shrink: 0; }
  .reason-card-text { min-width: 0; }
  .reason-card-title { margin-bottom: 2px; }

  .city-grid { grid-template-columns: 1fr; }
  .city-chip { justify-content: flex-start; text-align: left; }

  .other-shop-grid { grid-template-columns: 1fr; }

  /* ⛔ スマホはカードの中身を縦に積む（2026-09-07・れのぼ指示）。

     直す前＝.ranking-card-row が display:flex のままだったので、
     画面390pxのとき ロゴ92px ＋ すきま16px ＋ 本文198px の横2列になっていた。
     本文が198pxしか無いせいで、紹介文が1行10文字ほどで折り返し、
     「対応できる工事」のタグも2つずつで折り返していた。
     縦に積むと本文がカードの幅いっぱい（実測308px）使える。

     ⛔ display:block にする（flex-direction:column にしない）。
        縦のflexにすると .ranking-card-photo の flex-basis(92px) が「高さ」の指定に変わり、
        高さが 69px → 92px に伸びてロゴの箱の形が変わる。

     ロゴは左そろえ（display:block の初期値）。
        下に続く店名・タグ・紹介文がすべて左端から始まるので、
        ロゴも左に置くと視線が1本の縦線でそろう。中央に置くとそこだけ折れる。
     大きさは横並びのときと同じ 92×69px のまま（縦積みでも上に置くだけなので、大きくする理由が無い）。

     ⛔ エリアページ（body の .tax-area）だけに限定する。
        同じ .ranking-card-row はトップページ（front-page.php の上位3社）でも使っている。
        トップにも同じ横2列の状態はあるが、今回頼まれたのはエリアページなので巻き込まない。
        （トップも縦積みにするかは、れのぼが決める） */
  .tax-area .ranking-card-row { display: block; }

  /* スマホは横長（4:3）。92pxが文字を崩さない上限（伐採ナビの実測値） */
  .ranking-card-photo { width: 92px; height: 69px; flex: 0 0 92px; }
  /* 縦積みにした分の下の余白（flex の gap:16px が効かなくなるため）。上の限定と対にする。 */
  .tax-area .ranking-card-photo { margin: 0 0 12px; }

  /* タイトルと写真を横並びに(PC用の大きい写真は非表示) */
  .hero-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .hero-top-text { flex: 1 1 auto; min-width: 0; }
  .hero-photo-desktop { display: none; }
  .hero-photo-mobile { display: block; flex: 0 0 96px; min-width: 0; }
  .hero-photo-mobile img { width: 96px; height: 96px; border-radius: 10px; }

  .hero-heading { font-size: 24px; }
  .search-card-row { flex-direction: column; }
  .search-select { flex: 1 1 auto; }

  .site-section { padding: 28px 0; }

  /* エリアページ下部、常時お問い合わせできるよう固定CTAを表示 */
  .sticky-mobile-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: #fff; border-top: 1px solid var(--border); padding: 10px 16px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  }
  .site-main { padding-bottom: 90px; }
}

/* ===== 対応できる工事（タグ型・2026-09-03）=====
   ○／−の比較リスト（.service-compare）に代わる表示。
   タグの角丸は 6px。カードの5pxとほぼそろえつつ、
   ほんの少しだけ丸みを強くして、押せそうなラベルに見せている。
   ⛔ カード・順位バッジ・写真枠には手を入れない（本番のままで正しい）。 */
.service-tags{ margin: 10px 0; }

.service-tags-label{
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  margin: 0 0 6px;
}

.service-tag-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.service-tag{
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 600;
  padding: 4px 12px;
  white-space: nowrap;
  border-radius: 6px;              /* ← 角丸はここだけ */
  background: #fff;
  border: 1px solid var(--accent);
  color: var(--accent-dark);
}

/* 対応していない工事＝グレーに落として、視線がアクセント色にだけ向くようにする */
.service-tag.is-no{
  border-color: var(--border);
  color: #a8b0b7;
  background: #fff;
}

@media (max-width: 600px){
  .service-tag{ font-size: 12px; padding: 4px 10px; }
}

/* ===== その他の一覧：紹介文を3行で折りたたむ（2026-09-03・れのぼ指示）=====
   対象は .other-shop-card の中だけ（エリアページの「その他のおすすめ…業者一覧」）。
   ランキング側の .shop-intro-more（150文字で切る従来の形）はそのまま残してある。

   ⛔ クランプは JS が .is-clamped を付けたときだけ効く。
      CSSだけで切ってしまうと、JSが動かない環境で続きが読めなくなるため。
   ⛔ 左線は使わない。開いているかどうかは文字（もっと見る／閉じる）と▼▲で示す。 */
.shop-intro.is-clamp.is-clamped .shop-intro-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* ボタンはテキストリンク調。カードの主役は店名とタグなので、そこより目立たせない。
   上下左右に余白を持たせてスマホで押しやすくし、
   左の余白ぶんだけ戻して文字の頭が本文とそろうようにしている。 */
.shop-intro-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 0 -8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.7;
  cursor: pointer;
}
.shop-intro-toggle::after { content: "▼"; font-size: 9px; line-height: 1; }
.shop-intro.is-expanded .shop-intro-toggle::after { content: "▲"; }
/* 状態・反応は背景色で見せる（枠線は付けない） */
.shop-intro-toggle:hover { color: var(--accent); background: var(--accent-pale); }
.shop-intro-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== エリアページの業者一覧だけ、ロゴの枠線を消す（2026-09-06） =====
   ロゴの外側に出ていた細いグレーの線の正体は、
   ロゴを入れている箱（.ranking-card-photo / .other-shop-card-photo）の
   border: 1px solid var(--border) ＝ #e3e6ea。
   画像そのものには枠線は付いていない（実測で確認済み）。

   同じクラスをトップ（front-page.php）・工事内容ページ（taxonomy-service.php）・
   店舗ページでも使っているので、
   エリアページの body クラス .tax-area で限定して打ち消す。

   border を 0 にすると box-sizing: border-box のせいで
   中のロゴが左右2px・上下2px ぶん大きくなってしまうので、
   太さは 1px のまま色だけ透明にする。
   ＝箱の大きさ・余白・ロゴの表示サイズ・並びは一切変わらない。 */
.tax-area .ranking-card-photo,
.tax-area .other-shop-card-photo { border-color: transparent; }

/* =============================================================
   エリアページの店舗カード：スマホの画像を大きくする（2026-09-21・れのぼ指示）
   =============================================================
   ⛔ 対象はエリアページ（body の .tax-area）だけ・スマホ幅（700px以下）だけ。
      パソコン幅の見た目とトップページ（front-page.php）は1pxも変えない。
      ⛔ .tax-area を外さない＝同じ .ranking-card-row / .other-shop-card-photo は
         トップページと工事内容ページ（taxonomy-service.php）でも使っている。

   参考にしたのは「近くのメンズエステランキング」（menesthe.heteml.net）。
   2026-09-21 に実ブラウザ375px幅で実測した出し方：
     ・カード幅345px（左右の余白15px）・角丸4px
     ・画像はカードの一番上に横いっぱい（341×199px＝縦横比 684/400）
     ・画像とテキストは縦に積む（横並びにしない）
     ・画像は object-fit: cover でトリミング
     ・カード1枚の高さ583px ＝ 画面812pxに約1.4枚

   ⛔ 参考サイトの「cover でトリミング」だけは真似していない。
      参考サイトの画像は店舗の写真だが、このサイトの画像は業者のロゴで、
      縦横比が 0.75 〜 8.11 までばらばら（164枚を実測）。cover にすると
      ロゴの文字が切れる。縦横比を保つ contain のまま、箱だけを横いっぱいにする。
   ⛔ 画像を拡大しない（max-width / max-height のまま＝ img に width:100% を書かない）。
      配信しているのは WordPress の medium（長辺300px）なので、
      引き伸ばすとロゴの文字がぼやける。
   ⛔ 箱の高さは固定する（height を auto にしない）。
      画像は遅延読み込みなので、高さが後から決まると
      読み込んだ瞬間に下の内容がずれる（レイアウトシフト）。 */
@media (max-width: 700px) {
  /* ランキングのカード：ロゴを92×69pxから幅いっぱい×120pxへ */
  .tax-area .ranking-card-photo {
    flex: none;
    width: 100%;
    height: 120px;
    margin: 0 0 12px;
  }

  /* その他のおすすめ業者一覧：ロゴを44×44pxから幅いっぱい×96pxへ。
     見出し行は元から display:flex + flex-wrap:wrap なので、
     ロゴを width:100% にすると自動で1行目に落ちて、
     店名とLINEバッジが2行目に並ぶ（＝参考サイトと同じ縦積み）。
     ⛔ display:block にしない（店名とLINEバッジが縦に割れる）。 */
  .tax-area .other-shop-card-photo {
    width: 100%;
    height: 96px;
  }
  /* 長い会社名で横スクロールが出ないようにする（flex の既定 min-width:auto 対策） */
  .tax-area .other-shop-card-name { flex: 1 1 auto; min-width: 0; }
}

/* =============================================================
   対応できる工事のタグ：対応しているものを薄い緑で塗る（2026-09-21・れのぼ指示）
   =============================================================
   直す前は、対応している側も背景が白だったので、
   対応していない側（グレーの枠・グレーの文字・白背景）と見分けがつきにくかった。

   ⛔ 白い文字は選ばない。薄い緑（--accent-pale #eaf3ec）の上に白を置くと読めない。
      濃い緑（--accent-dark #24603c）のままにする。
   ⛔ 対応していないタグ（.is-no）の色は1つも変えない＝見分けがつくことが目的。
   ⛔ 文字は大きくしない。⛔ 左に縦線（border-left）は付けない。

   ⛔ .tax-area で限定する（エリアページだけ）。
      .service-tag はトップページ（front-page.php）と
      工事内容ページ（taxonomy-service.php）でも使っていて、
      2026-09-21 の依頼はエリアページの店舗カードだったため、そこは巻き込まない。 */
.tax-area .service-tag { border-radius: 5px; }
.tax-area .service-tag.is-yes {
  /* 2026-09-21 直し：#eaf3ec（rgb 234,243,236）は実機で見るとほぼ白で、
     対応していないタグ（白背景）と見分けがつかなかった。
     #c7e4d1（rgb 199,228,209）に濃くする。白との差は 129（合計値・前は52）。
     文字 #24603c とのコントラスト比は 5.49:1 ＝ 4.5:1 以上あるので読みやすさは落ちていない。
     ⛔ 対応していないタグ（.is-no）は1つも変えない。⛔ 文字サイズも角丸5pxもそのまま。 */
  background: #c7e4d1;
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* =============================================================
   エリアページの店舗ロゴ：枠の中でできるだけ大きく出す（2026-09-21・れのぼ指示の直し）
   =============================================================
   直す前は img に max-width/max-height だけを当てていたので、
   「元画像より大きくしない」が常に効き、枠（292×120px）に対して
   ロゴが 100×100px（枠の29%）しか使えていない業者があった。

   ここでは「枠いっぱいまで広げる。ただし元画像の1.5倍を超えない」にする。
   上限は PHP 側が画像1枚ごとに --logo-cap-w / --logo-cap-h（元画像×1.5）で渡す。
   ⛔ 元画像が小さい業者を、無理に引き伸ばしてぼやけさせないための上限＝1.5倍。
      スマホの画素密度は2〜3倍なので、1.5倍までなら端末側の再描画に吸収される。
   ⛔ 上限の値を持っていない画像（メタ情報が無いもの）には .hikaku-logo-fit が付かず、
      これまでどおり「元画像より大きくしない」のまま出る。
   ⛔ object-fit は contain のまま（cover にするとロゴの文字が切れる）。
   ⛔ .tax-area ＋ 700px以下に限定する（トップページと工事内容ページは1pxも変えない）。 */
@media (max-width: 700px) {
  .tax-area .ranking-card-photo img.hikaku-logo-fit,
  .tax-area .other-shop-card-photo img.hikaku-logo-fit {
    width: min(100%, var(--logo-cap-w));
    height: min(100%, var(--logo-cap-h));
    object-fit: contain;
  }
}