@charset "utf-8";
/* salon-review.css — サロンの「口コミ」タブ専用 */

/* 空白の無い長い英数字（店名・クーポン名・URL など）でも枠からはみ出さず折り返す（中の共通部品にも継承される） */
.p-review { overflow-wrap: anywhere; }

/* ---------- 評価サマリー（総合 / 項目別 / 点数の内訳） ---------- */
.p-review-summary { display: grid; grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--c-border); background: #fff; }
.p-review-summary__total { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 12px; background: var(--c-bg-soft); text-align: center; }
.p-review-summary__label { color: var(--c-heading); font-size: 12px; font-weight: bold; }
.p-review-summary__avg { margin-top: 2px; color: var(--c-star-num); font-family: var(--font-latin); font-size: 44px; font-weight: bold; line-height: 1.15; letter-spacing: .01em; }
.p-review-summary__stars { font-size: 20px; line-height: 1; }
.p-review-summary__count { margin-top: 8px; color: #555; font-size: 12px; }
.p-review-summary__count b { margin-right: 1px; color: var(--c-text); font-size: 15px; }

.p-review-summary__block { min-width: 0; padding: 14px 20px 14px; border-left: 1px solid var(--c-border-light); }
.p-review-summary__title { margin-bottom: 8px; color: var(--c-heading); font-size: 12px; font-weight: bold; }
.p-review-summary__items > div, .p-review-summary__dist > div { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 12px; }
.p-review-summary__items dt { flex: 0 0 7.5em; color: #555; }
.p-review-summary__dist dt { flex: 0 0 2.4em; color: #555; font-family: var(--font-latin); font-weight: bold; white-space: nowrap; }
.p-review-summary__items dd, .p-review-summary__dist dd { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.p-review-summary__items dd b { flex: 0 0 2.6em; font-family: var(--font-latin); font-size: 14px; text-align: right; }
.p-review-summary__n { flex: 0 0 3.6em; color: #555; font-size: 11px; text-align: right; white-space: nowrap; }
.p-review-summary__star { margin-right: 1px; color: var(--c-star); }

/* 横バー: 塗り = 星の色、下地 = 同じ色相の淡色 */
.p-review-meter { flex: 1; min-width: 0; height: 8px; overflow: hidden; border-radius: 4px; background: #f6ecd9; }
.p-review-meter > span { display: block; height: 100%; border-radius: 4px; background: var(--c-star); }

.p-review-notes { margin: 8px 0 18px; }

/* ---------- 絞り込み ---------- */
.p-review-anchor { scroll-margin-top: 12px; }
.p-review-filter .c-filter__label { flex-basis: 84px; }
.p-review-filter .c-filter__body { gap: 4px 20px; }
.p-review-filter__star { margin-right: 1px; color: var(--c-star); }
.p-review-filter__zero { color: #b5aca3; }
.p-review-filter__zero .p-review-filter__star { color: inherit; }
.p-review-filter__zero small { color: inherit; }
.p-review-filter .c-filter__body .is-current { padding: 1px 9px; border-radius: 11px; background: var(--c-primary); color: #fff; }
.p-review-filter .c-filter__body .is-current small, .p-review-filter .c-filter__body .is-current .p-review-filter__star { color: inherit; }

.p-review-cond { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; font-size: 12px; }
.p-review-cond__label { color: var(--c-sub); }
.p-review-cond a { margin-left: 4px; }

.p-review-list { transition: opacity .12s; }
.p-review-list.is-loading { opacity: .5; pointer-events: none; }

@media (max-width: 767px) {
  .p-review-summary { grid-template-columns: minmax(0, 1fr); border-radius: 6px; overflow: hidden; }
  .p-review-summary__total { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 10px; padding: 12px; text-align: left; }
  .p-review-summary__label { flex: 1 1 100%; font-size: 13px; }
  .p-review-summary__avg { margin-top: 0; font-size: 38px; }
  .p-review-summary__count { margin: 0 0 0 auto; font-size: 13px; }
  .p-review-summary__block { padding: 12px; border-left: 0; border-top: 1px solid var(--c-border-light); }
  .p-review-summary__title { font-size: 13px; }
  .p-review-summary__items > div, .p-review-summary__dist > div { font-size: 13px; }
  .p-review-summary__n { font-size: 12px; }
  .p-review-notes { margin-bottom: 16px; }

  .p-review-anchor { scroll-margin-top: 58px; }
  .p-review-filter .c-filter__body { gap: 8px 18px; }
  .p-review-cond { font-size: 13px; }
}