/* CMS が /feedback/（口コミ一覧と投稿フォーム）に足す部品。PublicSite がテーマ CSS と public-site.css の後に読み込む（2026-10-13 ユーザー指示）。
   1) 投稿フォームの星の入力を 0.5 刻みに
      ReviewService::formStars() が出す 10 個のラジオ（DOM 順 5.0, 4.5, …, 0.5）を、テーマ（feedback.css の .stars）と同じ row-reverse で左から 1〜5 の星に並べる。
      .5 のラベル（.bw-stars__half）は負のマージンで同じ星（DOM で 1 つ前の .bw-stars__full）にぴったり重ね、clip-path で左半分だけを見せて押せるようにする
      （clip-path で切った外側はクリックが通らないので、星の右半分を押すと下の .bw-stars__full＝整数の値になる）。
      選んだ値から下の星が塗られる（input:checked ~ label）のはテーマと同じ仕組み。マウスを載せた星までを塗って予告し、選んだ値は右に数字で出す（:has() が使える環境）。
      ラジオは display:none ではなく見えない 1px にして、未選択のまま送信したときのブラウザの案内（required）とキーボード操作（←→で 0.5 ずつ）が効くようにする。
   2) 一覧の上の全体の評価（.bw-rating--summary）。星と数字は public-site.css の .bw-rating を土台に大きさだけ変える。値は公開中の口コミの平均を 0.5 刻みに丸めたもの */

/* ---- 星の入力 ---------------------------------------------------------------------- */
.stars.bw-stars{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px}
.stars.bw-stars .bw-stars__row{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;position:relative;margin:0;padding:0}
.stars.bw-stars input[type='radio']{display:block;position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
.stars.bw-stars label{box-sizing:border-box;width:40px;margin:0;padding:0;text-align:center;font-size:32px;line-height:1.25;color:rgba(0,0,0,0);-webkit-text-stroke:1px #15a043;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.stars.bw-stars label.bw-stars__half{margin-right:-40px;-webkit-clip-path:inset(0 50% 0 0);clip-path:inset(0 50% 0 0)}
.stars.bw-stars input[type='radio']:checked~label{color:#15a043}
.stars.bw-stars input[type='radio']:focus-visible+label{outline:2px solid #15a043;outline-offset:2px;border-radius:4px}
/* マウスを載せた星まで塗る（載せている間は選択済みの塗りを消し、載せた位置までを塗る）。タッチ端末では押した時点で選ぶだけ */
@media (hover:hover){
  .stars.bw-stars .bw-stars__row:hover input[type='radio']:checked~label{color:rgba(0,0,0,0)}
  .stars.bw-stars .bw-stars__row:hover input[type='radio']~label:hover,.stars.bw-stars .bw-stars__row:hover input[type='radio']~label:hover~label{color:#15a043}
}
/* 選んだ値（0.5 刻み）。未選択のときは空のまま幅だけ確保して、選んでも星の位置が動かないようにする */
.stars.bw-stars .bw-stars__value{display:inline-block;min-width:2.4em;font-size:20px;font-weight:700;line-height:1;color:#15a043;font-style:normal}
.stars.bw-stars .bw-stars__value::after{content:""}
.stars.bw-stars:has(#blog_star50:checked) .bw-stars__value::after{content:"5.0"}
.stars.bw-stars:has(#blog_star45:checked) .bw-stars__value::after{content:"4.5"}
.stars.bw-stars:has(#blog_star40:checked) .bw-stars__value::after{content:"4.0"}
.stars.bw-stars:has(#blog_star35:checked) .bw-stars__value::after{content:"3.5"}
.stars.bw-stars:has(#blog_star30:checked) .bw-stars__value::after{content:"3.0"}
.stars.bw-stars:has(#blog_star25:checked) .bw-stars__value::after{content:"2.5"}
.stars.bw-stars:has(#blog_star20:checked) .bw-stars__value::after{content:"2.0"}
.stars.bw-stars:has(#blog_star15:checked) .bw-stars__value::after{content:"1.5"}
.stars.bw-stars:has(#blog_star10:checked) .bw-stars__value::after{content:"1.0"}
.stars.bw-stars:has(#blog_star05:checked) .bw-stars__value::after{content:"0.5"}
@media screen and (max-width:700px){
  .stars.bw-stars label{width:44px;font-size:36px}
  .stars.bw-stars label.bw-stars__half{margin-right:-44px}
}

/* ---- 一覧の上の全体の評価 ---------------------------------------------------------------- */
.bw-rating-summary{margin:0 0 20px;text-align:center}
#feedback .bw-rating--summary{justify-content:center;margin:0;font-size:15px;color:#7b7b7b}
#feedback .bw-rating--summary .bw-rating__stars{font-size:26px;letter-spacing:2px;line-height:1.1}
#feedback .bw-rating--summary .bw-rating__score{font-size:22px;color:#405442}