/* /locations/ 「迷ったら、3つの質問で」 (みっくん FB-38, assets/js/facility-finder.js). Option chips and a result
   card on the ASAMOYA band; MUCHU marks the question numbers and the chosen answer. */
.finder-jump { display: inline-flex; align-items: center; gap: 2px; margin-top: 12px; color: #2f2f2f; font-size: 14px; line-height: 22px; font-weight: 700; text-decoration: underline; text-decoration-color: rgb(47 47 47 / 30%); text-underline-offset: 4px; }
.finder-jump .ic { width: 16px; height: 16px; }

.facility-finder { margin-block: 48px; padding: 28px 20px; border-radius: 12px; background: #e7ecec; scroll-margin-top: calc(var(--header-height, 64px) + 16px); }
.facility-finder > h2 { margin: 0; font-size: 22px; line-height: 32px; font-weight: 700; }
.finder-lead { margin: 8px 0 0; color: rgb(47 47 47 / 85%); font-size: 14px; line-height: 22px; }
.finder-form { display: grid; gap: 24px; margin-top: 24px; }
.finder-question { margin: 0; padding: 0; border: 0; min-width: 0; }
.finder-question legend { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0; font-size: 15px; line-height: 22px; font-weight: 700; }
.finder-question legend span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d56e59; color: #fcfcfc; font: 700 12px/1 var(--font-num, inherit), var(--font-ja, sans-serif); }
.finder-options { display: flex; flex-wrap: wrap; gap: 8px; }
.finder-options label { position: relative; }
.finder-options input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.finder-options span { display: inline-block; padding: 9px 14px; border: 1px solid rgb(47 47 47 / 24%); border-radius: 999px; background: #fcfcfc; color: #2f2f2f; font-size: 14px; line-height: 20px; }
.finder-options input:checked + span { border-color: #d56e59; background: #d56e59; color: #fcfcfc; font-weight: 700; }
.finder-options input:focus-visible + span { outline: 2px solid #2f2f2f; outline-offset: 2px; }
.finder-submit { justify-self: stretch; }

.finder-result { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgb(47 47 47 / 16%); outline: none; }
.finder-no-exact { margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; background: rgb(252 252 252 / 72%); color: rgb(47 47 47 / 85%); font-size: 14px; line-height: 22px; }
.finder-result-label { margin: 0 0 12px; font-size: 14px; line-height: 22px; font-weight: 700; }
.finder-result-card { display: block; overflow: hidden; border-radius: 8px; background: #fcfcfc; color: #2f2f2f; text-decoration: none; }
.finder-result-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.finder-result-body { display: grid; gap: 2px; padding: 12px 16px 14px; }
.finder-result-body small { color: rgb(47 47 47 / 64%); font-size: 12px; line-height: 18px; }
.finder-result-body strong { display: inline-flex; align-items: center; gap: 2px; font-size: 20px; line-height: 28px; }
.finder-result-body .ic { width: 18px; height: 18px; }
.finder-reasons { display: grid; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.finder-reasons li { position: relative; padding-left: 18px; color: rgb(47 47 47 / 85%); font-size: 14px; line-height: 22px; }
.finder-reasons li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #d56e59; }
.finder-unmet { margin: 12px 0 0; color: rgb(47 47 47 / 72%); font-size: 13px; line-height: 21px; }
.finder-next { margin: 16px 0 0; font-size: 14px; line-height: 22px; }
.finder-next a { display: inline-flex; align-items: center; margin-left: 6px; color: #2f2f2f; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.finder-next .ic { width: 14px; height: 14px; }
.finder-retry { margin-top: 16px; padding: 0; border: 0; background: none; color: rgb(47 47 47 / 72%); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (min-width: 768px) {
  .facility-finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; margin-block: 72px; padding: 48px; }
  .facility-finder > h2, .finder-lead { grid-column: 1; }
  .finder-form { grid-column: 1; grid-row: 3; }
  .finder-result { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; border-top: 0; }
  .finder-submit { justify-self: start; min-width: 240px; }
}