/* /locations/ in TOP's tone (owner, 2026-10-06). Loaded last, overrides only: TOP's section-head sizes and
   chevron links, the four places two by two on the web (no lone みなかみ row), the finder laid out with
   its words at left and its questions at right, ink step numbers (MUCHU only marks a chosen answer), and
   滞在をもっと見る as rows on phones instead of a sideways rail. */

/* Hero, as TOP and /about/ open (owner, 2026-10-06): one photograph of a place (長生村's lawn, domes and
   centre house — one image to keep up), the header transparent over it, the brush edge below. */
.locations-hero { position: relative; height: clamp(480px, 70svh, 620px); overflow: hidden; background: #0d0d0f; color: #fcfcfc; }
.locations-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 60%; }
.locations-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 42%) 0%, rgb(0 0 0 / 0%) 28%, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 78%) 100%); pointer-events: none; }
.locations-hero::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; height: 18px; background: #fcfcfc; pointer-events: none; -webkit-mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; }
.locations-hero-inner { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; width: min(calc(100% - 40px), var(--content, 1200px)); margin-inline: auto; padding-bottom: 44px; }
.locations-hero h1 { margin: 0; color: inherit; font-size: 34px; line-height: 1.35; font-weight: 700; }
.locations-hero-line { margin: 10px 0 0; font-size: 14px; line-height: 1.8; font-weight: 500; }
.locations-phrase { display: inline-block; }
.locations-index-page .locations-hero .finder-jump { min-height: 40px; margin-top: 8px; color: #fcfcfc; text-decoration: none; }
.locations-index-page .finder-jump .ic { width: 16px; height: 16px; }
.locations-index-page .locations-directory-page { padding-top: 48px; }
@media (min-width: 768px) {
  .locations-hero { height: min(70svh, 680px); min-height: 520px; }
  .locations-hero-inner { width: min(calc(100% - 96px), var(--content, 1200px)); padding-bottom: 64px; }
  .locations-hero h1 { font-size: 56px; line-height: 1.25; }
  .locations-hero-line { font-size: 17px; }
  .locations-index-page .locations-directory-page { padding-top: 72px; }
}

/* Photos 12px round, as on TOP. */
.locations-index-page .location-directory-media, .locations-index-page .locations-experience-link img { border-radius: 12px; }

/* The four places: stacked on phones, two by two from tablets up. */
@media (min-width: 768px) {
  .locations-index-page .location-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
}

/* Finder: ink numerals as TOP's steps; on the web the words at left, the questions and result at right. */
.locations-index-page .finder-question legend span { background: #2f2f2f; }
.locations-index-page .facility-finder { border-radius: 16px; }
.locations-index-page .facility-finder > h2 { font-size: 22px; line-height: 32px; }
@media (min-width: 768px) {
  .locations-index-page .facility-finder { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; column-gap: 48px; padding: 40px; }
  .locations-index-page .facility-finder > h2 { grid-column: 1; grid-row: 1; font-size: 28px; line-height: 40px; }
  .locations-index-page .finder-lead { grid-column: 1; grid-row: 2; }
  .locations-index-page .finder-form { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .locations-index-page .finder-result { grid-column: 2; grid-row: 4; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgb(47 47 47 / 16%); }
}

/* 滞在をもっと見る: TOP's section title; on phones three rows (photo, name, kinds) with a chevron, no rail. */
.locations-index-page .locations-support h2 { font-size: 22px; line-height: 32px; }
.locations-index-page .locations-experience-link h3 { display: inline-flex; align-items: center; gap: 2px; }
.locations-index-page .locations-experience-link h3::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url('/assets/icons/lucide/source/chevron-right.svg') center / contain no-repeat; mask: url('/assets/icons/lucide/source/chevron-right.svg') center / contain no-repeat; }
@media (max-width: 767px) {
  .locations-index-page .locations-experience-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 16px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; border-top: 1px solid rgb(47 47 47 / 9%); }
  .locations-index-page .locations-experience-grid > li { border-bottom: 1px solid rgb(47 47 47 / 9%); }
  .locations-index-page .locations-experience-link { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-content: center; padding: 12px 0; }
  .locations-index-page .locations-experience-link img { grid-row: 1 / 3; width: 96px; aspect-ratio: 4 / 3; border-radius: 10px; }
  .locations-index-page .locations-experience-link h3 { align-self: end; margin: 0; }
  .locations-index-page .locations-experience-names { align-self: start; margin-top: 2px; font-size: 13px; line-height: 20px; }
}
@media (min-width: 768px) {
  .locations-index-page .locations-support h2 { font-size: 28px; line-height: 40px; }
  .locations-index-page .locations-experience-link img { border-radius: 12px; }
}
.locations-index-page .finder-lead { text-wrap: pretty; }
/* The finder's answer on the web: a compact row card (photo, place), not a column-wide photograph. */
@media (min-width: 768px) {
  .locations-index-page .finder-result-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; border-radius: 12px; }
  .locations-index-page .finder-result-card img { height: 100%; aspect-ratio: 4 / 3; }
  .locations-index-page .finder-result-body { padding: 12px 20px; }
}
.locations-index-page .finder-phrase { display: inline-block; }
/* The hero runs under the transparent header. */
.locations-index-page { padding-top: 0; }
/* Each place's 「施設を見る >」 as TOP's links: ink and bold, not a grey caption. */
.locations-index-page .location-detail-action { color: #2f2f2f; font-size: 14px; line-height: 22px; font-weight: 700; }

/* Phones read each place in one line, as TOP's cards; the fuller introduction stays for wider screens. */
.locations-index-page .location-card-lead { display: none; }
@media (max-width: 767px) {
  .locations-index-page .location-card-lead { display: block; margin: 8px 0 0; color: rgb(47 47 47 / 85%); font-size: 15px; line-height: 24px; }
  .locations-index-page .location-directory-card:has(.location-card-lead) .location-card-description { display: none; }
  .locations-index-page .location-directory-grid { gap: 40px; }
}

/* 3つの質問 on the paper with hairlines (owner, 2026-10-06): the grey box ran straight into the grey
   滞在をもっと見る band; TOP alternates paper and grey. */
.locations-index-page .facility-finder { padding: 40px 0 8px; border-top: 1px solid rgb(47 47 47 / 12%); border-radius: 0; background: none; }
.locations-index-page .finder-result { border-top-color: rgb(47 47 47 / 12%); }
.locations-index-page .finder-result-card { box-shadow: 0 0 0 1px rgb(47 47 47 / 12%); }
.locations-index-page .finder-no-exact { background: #e7ecec; }
@media (min-width: 768px) {
  .locations-index-page .facility-finder { padding: 56px 0 16px; }
}

/* 3つの質問 as photo choices, one question at a time (owner, 2026-10-06: pills read cheap). Each answer is
   a photograph with its words; the chosen one keeps an ink ring. Script steps through the questions with
   a 1 / 3 count and dots; without it all three show with the submit button. */
.locations-index-page .finder-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.locations-index-page .finder-options label { display: grid; gap: 8px; cursor: pointer; }
.locations-index-page .finder-options span.finder-option-photo { display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: #e7ecec; transition: box-shadow var(--feedback-duration, 150ms) ease; }
.locations-index-page .finder-option-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.locations-index-page .finder-options span.finder-option-label { display: block; padding: 0; border: 0; border-radius: 0; background: none; color: #2f2f2f; font-size: 13px; line-height: 19px; font-weight: 700; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.locations-index-page .finder-options input:checked + .finder-option-photo { box-shadow: 0 0 0 3px #fcfcfc, 0 0 0 5px #2f2f2f; }
.locations-index-page .finder-options input:checked ~ .finder-option-label { background: none; color: #2f2f2f; }
.locations-index-page .finder-options input:focus-visible + .finder-option-photo { outline: 2px solid #2f2f2f; outline-offset: 4px; }
.locations-index-page .finder-question legend { font-size: 17px; line-height: 26px; margin-bottom: 14px; }
.locations-index-page .finder-question[hidden] { display: none; }
.locations-index-page .finder-progress { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.locations-index-page .finder-progress-count { font: 700 13px/1 var(--font-num, inherit); color: #2f2f2f; }
.locations-index-page .finder-progress-bar { display: flex; flex: 1; gap: 4px; max-width: 120px; }
.locations-index-page .finder-progress-bar i { flex: 1; height: 3px; border-radius: 2px; background: rgb(47 47 47 / 15%); }
.locations-index-page .finder-progress-bar i.is-on { background: #2f2f2f; }
.locations-index-page .finder-back { margin-left: auto; padding: 8px 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; }
.locations-index-page .finder-back[hidden] { display: none; }
.locations-index-page .finder-form.is-stepped .finder-question legend span { display: none; }
.locations-index-page .finder-form.is-stepped .finder-submit { display: none; }
.locations-index-page .finder-form.is-stepped { gap: 16px; }
/* Once answered, the result takes the questions' place. */
.locations-index-page .facility-finder.is-answered .finder-form { display: none; }
@media (min-width: 768px) {
  .locations-index-page .facility-finder.is-answered .finder-result { grid-row: 1 / span 3; margin-top: 0; padding-top: 0; border-top: 0; }
  .locations-index-page .finder-options { gap: 16px; }
  .locations-index-page .finder-options span.finder-option-photo { aspect-ratio: 4 / 3; }
  .locations-index-page .finder-options span.finder-option-label { font-size: 14px; }
}

/* Order (owner, 2026-10-06): the questions first, right under the hero — most visitors have not chosen
   yet — then すべての施設 for those who compare, under a hairline. */
.locations-index-page .facility-finder { margin-block: 0; padding: 40px 0 48px; border-top: 0; }
.locations-index-page .locations-directory-page { padding-top: 40px; border-top: 1px solid rgb(47 47 47 / 12%); }
.locations-index-page .locations-directory-head h2 { margin: 0 0 20px; font-size: 22px; line-height: 32px; font-weight: 700; }
@media (min-width: 768px) {
  .locations-index-page .facility-finder { padding: 64px 0 72px; }
  .locations-index-page .locations-directory-page { padding-top: 64px; }
  .locations-index-page .locations-directory-head h2 { margin-bottom: 32px; font-size: 28px; line-height: 40px; }
}

/* すべての施設 on the web as TOP's facility row (owner, 2026-10-06: two by two was far too large): four
   across from 1024px with TOP's one-line lead; tablets keep two by two with the fuller introduction. */
@media (min-width: 1024px) {
  .locations-index-page .location-directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
  .locations-index-page .location-card-lead { display: block; margin: 8px 0 0; color: rgb(47 47 47 / 85%); font-size: 14px; line-height: 22px; }
  .locations-index-page .location-directory-card:has(.location-card-lead) .location-card-description { display: none; }
  .locations-index-page .location-card-title-row { flex-wrap: wrap; row-gap: 2px; }
  .locations-index-page .location-card-facts { font-size: 13px; }
}
@media (min-width: 1024px) {
  .locations-index-page .location-directory-card .location-card-description { font-size: 14px; line-height: 22px; text-wrap: pretty; }
}
/* Where four columns leave no room beside the place name, the whole card is the link: the label goes. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .locations-index-page .location-detail-action { display: none; }
}
@media (max-width: 379px) {
  .locations-index-page .finder-options span.finder-option-label { font-size: 12px; line-height: 17px; letter-spacing: -.01em; }
}

/* Detail pass (owner, 2026-10-06). */
/* 1 · The finder's result speaks TOP's links: bold with a chevron, no underline; reasons dot in ink
   (MUCHU only marks a chosen answer). 「もう一度選ぶ」 is a quiet text button. */
.locations-index-page .finder-reasons li::before { background: #2f2f2f; }
.locations-index-page .finder-next a { gap: 2px; text-decoration: none; }
.locations-index-page .finder-retry { display: inline-flex; align-items: center; min-height: 40px; color: #2f2f2f; font-size: 14px; font-weight: 700; text-decoration: none; }
.locations-index-page .finder-retry::before { content: ""; width: 16px; height: 16px; margin-right: 4px; background: currentColor; -webkit-mask: url('/assets/icons/lucide/source/refresh-cw.svg') center / contain no-repeat; mask: url('/assets/icons/lucide/source/refresh-cw.svg') center / contain no-repeat; }
/* 2 · A place not yet open says so once: its line under the name, without two 「公開準備中」 fact rows. */
.locations-index-page .location-directory-card:has(.location-directory-photo.is-pending) .location-card-facts { display: none; }
/* 3 · On the web the finder is one column: title and line above, the questions below at a readable
   width, so no empty half beside them. */
@media (min-width: 768px) {
  .locations-index-page .facility-finder { display: block; }
  .locations-index-page .facility-finder > .finder-form, .locations-index-page .facility-finder > .finder-result { max-width: 720px; }
  .locations-index-page .facility-finder > .finder-form { margin-top: 28px; }
  .locations-index-page .facility-finder > .finder-lead { margin-top: 8px; }
  .locations-index-page .facility-finder.is-answered .finder-result { margin-top: 28px; }
}

/* Size order (owner, 2026-10-06): 滞在をもっと見る is secondary, so on the web its cards stay smaller than
   the places above: the same four columns, shorter 3:2 photos, three of them. */
@media (min-width: 1024px) {
  .locations-index-page .locations-experience-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .locations-index-page .locations-experience-link img { aspect-ratio: 3 / 2; }
  .locations-index-page .locations-experience-link h3 { font-size: 16px; line-height: 24px; }
  .locations-index-page .locations-experience-names { font-size: 13px; line-height: 20px; }
}
/* A place without photos yet takes a short band on phones, not a full photo's height of grey. */
@media (max-width: 767px) {
  .locations-index-page .location-directory-photo.is-pending { aspect-ratio: auto; height: 72px; font-size: 0; }
}
/* みなかみ before its own photographs: a stand-in photograph (data-dummy names the real shot). */
.location-directory-photo.is-dummy { overflow: hidden; }
.location-directory-photo.is-dummy img { display: block; width: 100%; height: 100%; object-fit: cover; }
.location-card-description { word-break: auto-phrase; text-wrap: pretty; }

/* Q2 and Q3 take several answers (みっくん FB 56, 2026-10-14): a quiet 「いくつでも」 beside the question, a 「次へ」
   button under the photos, and a result with every facility two or more answers agree on, then where each
   answer leads. */
.locations-index-page .finder-question legend small { margin-left: 8px; color: rgb(47 47 47 / 60%); font-size: 12px; line-height: 18px; font-weight: 500; }
.locations-index-page .finder-step-next { display: block; width: 100%; margin-top: 20px; padding: 13px 16px; border: 1px solid #2f2f2f; border-radius: 999px; background: #fcfcfc; color: #2f2f2f; font: inherit; font-size: 15px; line-height: 20px; font-weight: 700; cursor: pointer; }
.locations-index-page .finder-step-next:disabled { border-color: rgb(47 47 47 / 20%); color: rgb(47 47 47 / 40%); cursor: default; }
.locations-index-page .finder-picks { display: grid; gap: 24px; }
.locations-index-page .finder-leads { margin-top: 28px; }
.locations-index-page .finder-leads ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(47 47 47 / 12%); }
.locations-index-page .finder-leads li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgb(47 47 47 / 12%); font-size: 14px; line-height: 22px; }
.locations-index-page .finder-leads li > span:first-child { color: rgb(47 47 47 / 72%); }
.locations-index-page .finder-leads a { color: #2f2f2f; font-weight: 700; text-decoration: underline; text-decoration-color: rgb(47 47 47 / 30%); text-underline-offset: 3px; }
@media (min-width: 768px) {
  .locations-index-page .finder-step-next { width: auto; min-width: 240px; }
  .locations-index-page .finder-picks { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* 迷ったら、3つの質問で in the site's tone (owner, 2026-10-15: the content is right, the look was a stock
   quiz). Phones answer in photo rows like an app's onboarding; the web keeps three photos with the
   answer white on the photo, as /about/'s cards. No progress bars: the count and 戻る only. The buttons
   are the site's ink buttons. The result is a photograph with the place on it, its reasons as plain
   lines, and where each answer leads on the grey surface. */
.locations-index-page .finder-progress { gap: 8px; }
.locations-index-page .finder-progress-count { color: rgb(47 47 47 / 60%); font-size: 13px; letter-spacing: .04em; }
.locations-index-page .finder-back { display: inline-flex; align-items: center; min-height: 40px; padding: 0; color: #2f2f2f; font-size: 14px; font-weight: 700; text-decoration: none; }
.locations-index-page .finder-back::before { content: ""; width: 16px; height: 16px; margin-right: 2px; background: currentColor; -webkit-mask: url('/assets/icons/lucide/source/chevron-left.svg') center / contain no-repeat; mask: url('/assets/icons/lucide/source/chevron-left.svg') center / contain no-repeat; }
.locations-index-page .finder-question legend { font-size: 19px; line-height: 28px; }
.locations-index-page .finder-step-next { min-height: 48px; padding: 12px 24px; border: 0; border-radius: var(--radius-control, 8px); background: #2f2f2f; color: #fcfcfc; font-size: 15px; font-weight: 700; }
.locations-index-page .finder-step-next:disabled { border: 0; background: rgb(47 47 47 / 10%); color: rgb(47 47 47 / 40%); }

@media (max-width: 767px) {
  .locations-index-page .finder-options { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .locations-index-page .finder-options label { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px 16px 8px 8px; border-radius: 16px; background: #fcfcfc; box-shadow: 0 0 0 1px rgb(47 47 47 / 12%); transition: box-shadow var(--feedback-duration, 150ms) ease; }
  .locations-index-page .finder-options span.finder-option-photo { aspect-ratio: 4 / 3; border-radius: 10px; }
  .locations-index-page .finder-options span.finder-option-label { font-size: 15px; line-height: 22px; letter-spacing: 0; text-align: left; }
  .locations-index-page .finder-options input:checked + .finder-option-photo { box-shadow: none; }
  .locations-index-page .finder-options label:has(input:checked) { box-shadow: 0 0 0 2px #2f2f2f; }
}
@media (min-width: 768px) {
  .locations-index-page .finder-options label { position: relative; }
  .locations-index-page .finder-options span.finder-option-photo { position: relative; aspect-ratio: 4 / 3; }
  .locations-index-page .finder-options span.finder-option-photo::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 55%)); pointer-events: none; }
  .locations-index-page .finder-options span.finder-option-label { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; color: #fcfcfc; font-size: 15px; line-height: 22px; text-align: left; pointer-events: none; }
  .locations-index-page .finder-options input:checked ~ .finder-option-label { color: #fcfcfc; }
}

.locations-index-page .finder-result-label { font-size: 17px; line-height: 26px; }
.locations-index-page .finder-result-card { position: relative; display: block; border-radius: 12px; box-shadow: none; }
.locations-index-page .finder-result-card img { aspect-ratio: 3 / 2; height: auto; }
.locations-index-page .finder-result-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 55%)); pointer-events: none; }
.locations-index-page .finder-result-body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; gap: 0; padding: 0 20px 16px; color: #fcfcfc; }
.locations-index-page .finder-result-body small { color: rgb(252 252 252 / 85%); font-size: 13px; line-height: 20px; font-weight: 700; }
.locations-index-page .finder-result-body strong { font-size: 28px; line-height: 36px; }
.locations-index-page .finder-result-body .ic { width: 22px; height: 22px; }
.locations-index-page .finder-match { margin: 10px 0 0; color: rgb(47 47 47 / 60%); font-size: 13px; line-height: 20px; }
.locations-index-page .finder-reasons { gap: 4px; margin-top: 12px; }
.locations-index-page .finder-reasons li { padding-left: 0; color: rgb(47 47 47 / 85%); font-size: 15px; line-height: 1.8; word-break: auto-phrase; text-wrap: pretty; }
.locations-index-page .finder-reasons li::before { display: none; }
.locations-index-page .finder-unmet { margin-top: 8px; color: rgb(47 47 47 / 60%); }
.locations-index-page .finder-leads { margin-top: 32px; padding: 20px 20px 12px; border-radius: 16px; background: #e7ecec; }
.locations-index-page .finder-leads .finder-result-label { margin-bottom: 8px; font-size: 15px; line-height: 22px; }
.locations-index-page .finder-leads ul { border-top: 0; }
.locations-index-page .finder-leads li { padding: 8px 0; border-bottom: 0; }
.locations-index-page .finder-leads a { text-decoration: none; }
@media (min-width: 768px) {
  .locations-index-page .finder-result-card { display: block; }
  .locations-index-page .finder-result-card img { height: auto; aspect-ratio: 3 / 2; }
  .locations-index-page .finder-result-body { padding: 0 20px 16px; }
  .locations-index-page .finder-leads { padding: 24px 28px 16px; }
}