/* ── 業者カード一覧のラッパー（幅を絞って視線を集める）───── */
.c-company-list {
  max-width: var(--width-cards);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.c-company-list__more {
  max-width: var(--width-cards);
  margin: var(--spacing-xl) auto 0;
  text-align: center;
}

/* ── 業者カード（共通）──────────────────────────────
   カード自体はリンクではない（中のCTAとタイトルリンクが押せる範囲）。
   そのため hover での浮き上がりは付けず、影の変化だけに留める。
   カードごと持ち上げると「カードが押せる」と誤解させ、
   実際に押せるボタンとの主従が曖昧になるため。 */
.c-company-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* 375px では左右padding 24px を取ると、バッジ・ロゴを引いた社名欄が
     141px しか残らず社名が細切れに折り返す。スマホは16pxに詰める */
  padding: var(--spacing-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base);
}
.c-company-card:hover { box-shadow: var(--shadow-card-hover); }
@media (min-width: 768px) {
  .c-company-card { padding: var(--spacing-xl); }
}

/* 1位強調スタイル（オレンジのアクセントを1位だけ少し強める） */
.c-company-card--rank1 {
  border: 2px solid var(--color-secondary);
  background: linear-gradient(var(--color-secondary-pale), var(--color-bg-white) 96px);
  box-shadow: var(--shadow-card-hover);
  position: relative;
}
.c-company-card--rank1::before {
  content: '★ 編集部おすすめ No.1';
  position: absolute;
  top: 0;
  /* カードの内側paddingと左端を揃える */
  left: var(--spacing-md);
  transform: translateY(-50%);
  background: var(--color-secondary-dark);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.04em;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .c-company-card--rank1::before { left: var(--spacing-xl); }
}

/* ヘッダー部（バッジ + ロゴ + 名前 + 星）
   スマホでは横に3つ並ぶので、gapとバッジを詰めて社名欄の幅を確保する */
.c-company-card__header {
  display: flex;
  align-items: flex-start;
  /* 社名欄が下限を割ったら折り返す（下の __info の flex-basis と対になっている） */
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
@media (min-width: 768px) {
  .c-company-card__header {
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
}
.c-company-card--rank1 .c-company-card__header { margin-top: var(--spacing-xs); }
.c-company-card__rank { flex-shrink: 0; }
/* スマホのランクバッジは一回り小さく。サムネイルを広げたぶんここを詰めて社名欄を守る。
   バッジと画像は重ねない（重なると順位も画像も読みにくくなる） */
.c-company-card__rank .c-rank-badge { width: 36px; height: 36px; }
@media (min-width: 768px) {
  .c-company-card__rank .c-rank-badge { width: 46px; height: 46px; }
}

/* ロゴ：比率がバラバラでも破綻しないよう contain。
   白地＋余白＋細枠で、どんな色のロゴでも輪郭が立つようにする。引き伸ばさない。

   ★ 枠だけ広げても中身は大きくならない ★
   2026-09-07 の実測では 3社とも 150x150（WordPress の thumbnail・ハードクロップ）が
   72px 枠に入っており、padding 4px を引いた実効 64px しか見えていなかった。
   テンプレート側を 'medium'（長辺300・切り抜き無し）へ上げたうえでこの枠を広げている。
   contain のままなので横長のロゴを正方形に押し込んで切り落とすことはない。 */
.c-company-card__logo,
.c-company-card__logo-placeholder {
  width: var(--company-logo-sp);
  height: var(--company-logo-sp);
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
}
.c-company-card__logo {
  object-fit: contain;
  /* 枠の内側の余白。広い枠で 8px も取ると画像本体が痩せるので 4px のまま据え置く */
  padding: var(--spacing-xs);
}
.c-company-card__logo-placeholder {
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  line-height: 1;
}
.c-company-card__logo-placeholder .c-icon-svg { width: 44px; height: 44px; }
@media (min-width: 768px) {
  .c-company-card__logo,
  .c-company-card__logo-placeholder {
    width: var(--company-logo-pc);
    height: var(--company-logo-pc);
  }
  .c-company-card__logo-placeholder .c-icon-svg { width: 56px; height: 56px; }
}

/* ★ 社名欄が狭いときは1行下へ回す ★
   2026-09-07 の実測: 375px でサムネイルを 116px へ広げたところ、社名欄が 143px しか
   残らず「関西クリーンサービス」が **関西クリー / ンサービス** と語の途中で折り返した。
   評価の注記も2行になっていた。日本語は空白が無いので、CSS では折り返し位置を選べない。
   幅を足すしかないが、サムネイルを縮めると今回の改善が打ち消される。

   そこで header を折り返し可能にし、社名ブロックに「これ以上狭いなら下へ回る」下限を持たせる。

   下限は 216px。社名は 18px（スマホ）なので、最長クラスの「不用品回収ポケット奈良」11文字で
   約 198px 要る。ここを 168px にしたところ **414px で残り 182px のまま横に並び、
   社名が2行になった**（2026-09-07 実測）。198px + 余白で 216px を下限にする。
     - 〜420px … 残りが 216px を割るので社名は**カード幅いっぱいの行**へ回り、1行に収まる
     - 420px〜 … 残り 216px 以上あるのでサムネイルの右に並んだまま1行に収まる
   カード内の順序（順位 → 画像 → 社名 → 評価）は変わらない。 */
.c-company-card__info { flex: 1 1 216px; min-width: 0; }
.c-company-card__name {
  font-size: var(--fs-company);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
  line-height: var(--lh-heading);
}
.c-company-card__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.c-company-card__score {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans-en);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary-dark);
  background: var(--color-secondary-pale);
  font-size: var(--fs-meta);
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-sm);
}
.c-company-card__review-count {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

/* キャッチコピー */
.c-company-card__catch {
  font-size: var(--fs-meta);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

/* 編集部サマリー（company_editor_summary の1文。業者詳細にも出ている確認済みの文言）*/
.c-company-card__summary {
  font-size: var(--fs-meta);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

/* 特徴タグ一覧 */
.c-company-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

/* ── 比較情報 ──────────────────────────────────────
   3社で同じ項目を同じ順に置くための表。値が無い項目は行ごと出さない
   （空欄を並べるより、その社が公開していないことが分かるほうが誠実）。
   原文は業者詳細ページの「基本情報」にあり、ここはその抜粋である。 */
.c-company-card__specs {
  display: grid;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  /* PCは2列。項目数が3〜4なので、縦に伸ばすより横に並べたほうが見比べやすい */
  .c-company-card__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spacing-lg);
  }
}
.c-company-card__spec {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: var(--spacing-sm);
  align-items: start;
  font-size: var(--fs-caption);
  line-height: 1.6;
}
.c-company-card__spec dt {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}
.c-company-card__spec dd {
  margin: 0;
  color: var(--color-text-primary);
  /* 長い値でカードが伸びないよう2行で止める。原文は業者詳細ページにある */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* エリア */
.c-company-card__area {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

/* アクションゾーン：料金＋CTAを視覚的にひとまとまりにして比較しやすくする */
.c-company-card__action {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
}
.c-company-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}
.c-company-card__price-value {
  font-family: var(--font-sans-en);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-cta);
}

/* CTA部：主（赤・見積もり）と従（緑アウトライン・詳細）の主従を、
   色と面積の両方で付ける。従来の従は文字リンクで、
   カード内で最も見落とされていた導線だった。 */
.c-company-card__cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
@media (min-width: 768px) {
  /* PCは横並び。主を広く（2）、従を狭く（1）して優先順位を面積で示す */
  .c-company-card__cta { flex-direction: row; align-items: stretch; }
  .c-company-card__cta > .c-btn--primary { flex: 2; }
  .c-company-card__cta > .c-company-card__detail-btn { flex: 1; }
}
/* 従ボタン：白地・緑枠・緑文字 */
.c-company-card__detail-btn {
  min-height: var(--tap-min);
  background: var(--color-bg-white);
  white-space: nowrap;
}

/* アーカイブ・タクソノミー用レイアウト（rank badge + body）*/
.c-company-card__body {
  flex: 1;
  min-width: 0;
}
.c-company-card:has(.c-company-card__body) {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

/* top3 ハイライト（アーカイブページ用）*/
.c-company-card--top3 {
  border-color: var(--color-secondary);
}

/* 注意事項（A-2対応：スコアの出典明示）
   重要な注釈なので12px未満にしない */
.c-company-card__score-note {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: var(--spacing-xs);
}