/* 画像の枠。拠点の写真・ブランドの代表画像・イメージのイラストのどれが入っても、枠の寸法を同じにする（枠は常に出す・CLS を出さない）。
   app.css の後に読み込む（deps: vo-app）。上書きは詳細度を 1 段上げて、読み込み順に頼らない。 */

/* ---------- 拠点カード（一覧・検索・保存・近くの拠点） ---------- */
.vo-oc__photo { height: 200px; }
.vo-oc--compact .vo-oc__photo { height: 108px; }
.vo-oc__photo > .vo-oc__img { height: 100%; }
/* ブランドの代表画像（公式の OGP）は切り抜かず枠の中に全体を収める。枠の高さは写真と同じ */
.vo-oc__photo > .vo-oc__img.vo-oc__img--brand { height: 100%; aspect-ratio: auto; object-fit: contain; background: var(--surface); }
.vo-oc__photo > .vo-oc__img.vo-ph-img { object-fit: cover; background: #E9EFF7; }

/* ---------- 「イメージ」の表示（写真ではなく当サイトで用意したイラストであることを示す） ---------- */
.vo-ph__tag { position: absolute; right: 6px; bottom: 6px; z-index: 1; font-size: 10px; line-height: 1.5; letter-spacing: .02em; color: #FFFFFF; background: rgba(0, 0, 0, .6); padding: 1px 7px; border-radius: 4px; pointer-events: none; white-space: nowrap; }

/* ---------- 拠点ページの先頭 ---------- */
.vo-ohero__photo { height: 200px; }
.vo-ohero__photo > .vo-ohero__img { height: 100%; }
.vo-ohero__photo > .vo-ohero__img.vo-ohero__img--brand { height: 100%; aspect-ratio: auto; object-fit: contain; background: var(--surface); }
.vo-ohero__photo > .vo-ohero__img.vo-ph-img { object-fit: cover; background: #E9EFF7; }
@container vo (min-width: 1024px) {
  .vo-ohero__photo { height: 280px; }
  .vo-ohero__photo > .vo-ohero__img.vo-ohero__img--brand { height: 100%; max-width: none; }
}

/* ---------- 同じブランドの近隣拠点（横スクロールの小カード） ---------- */
.vo-sbc__photo { position: relative; display: block; height: 90px; }
.vo-sbc__photo > .vo-sbc__img { display: block; width: 100%; height: 100%; }
.vo-sbc__photo > .vo-sbc__img.vo-sbc__img--brand { height: 100%; aspect-ratio: auto; object-fit: contain; background: var(--surface); }
.vo-sbc__photo > .vo-sbc__img.vo-ph-img { object-fit: cover; background: #E9EFF7; }
.vo-sbc__photo .vo-ph__tag { right: 4px; bottom: 4px; font-size: 9px; padding: 0 5px; }

/* ---------- 比較の列見出し ---------- */
.vo-cp__photo { position: relative; display: block; }
.vo-cp__photo > .vo-cp__img { display: block; }
.vo-cp__photo > .vo-cp__img.vo-ph-img { background: #E9EFF7; }
.vo-cp__photo .vo-ph__tag { right: 4px; bottom: 4px; font-size: 9px; padding: 0 5px; }

/* ---------- 小さなサムネ（順位の行・診断の結果カード・保存の行）。「イメージ」の表示は出さない ---------- */
.vo-ph-img.vo-hub-rimg, .vo-ph-img.vo-rrow__img, .vo-ph-img.vo-sdc__img { object-fit: cover; background: #E9EFF7; }