/* デザイン思考で相手を選ぶ（public/js/find.js、画面案）。トップの千人の顔の上で絞り込む。 */
/* 間隔の決まり（斉藤さん 2026-10-09「段と段の間が空きすぎ」「UXがそろっていない」）：相手探しの①②③とトップの人物紹介は、
   この3つの値だけを使う。段と段（地域・年代…、役の札、区切りの線と次へ）は --find-gap、選択肢どうしは --find-gap-s、
   見出しのまとまりと中身のあいだは --find-gap-l。壁の高さに合わせて引き伸ばさない。 */
:root {
  --find-gap: var(--space-3);
  --find-gap-s: var(--space-2);
  --find-gap-l: var(--space-5);
}
.find-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27rem;
  gap: var(--space-7);
  align-items: start;
  border-top: 1px solid var(--line);
}
.find-wall .fw-grid {
  grid-template-columns: repeat(40, minmax(0, 1fr));
  cursor: default;
}
.find-wall .fw-cap {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--type-note);
}
/* 選んだ顔（.pick）の拡大の倍率。canvas に描くときも、この値を読む（wall-lens.js）。 */
.find-grid {
  --pick-scale: 1.7;
}
.find-grid .fw-tile {
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.find-grid.narrowing .fw-tile {
  opacity: 0.12;
  filter: grayscale(1);
}
.find-grid.narrowing .fw-tile.on {
  opacity: 1;
  filter: none;
}
.find-grid.choosing .fw-tile.on:not(.pick) {
  opacity: 0.35;
}
.find-grid .fw-tile.pick {
  position: relative;
  z-index: 3;
  opacity: 1;
  filter: none;
  outline: 2px solid var(--fill);
  outline-offset: 1px;
  transform: scale(var(--pick-scale));
  transition: transform 0.25s ease-out;
}
/* iPhone and Safari: no fade across all the faces at once (find.js stillFaces). The chosen face still grows. */
.find-grid.find-grid-still .fw-tile:not(.pick) {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .find-grid .fw-tile {
    transition: none;
  }
  .find-grid {
    --pick-scale: 1;
  }
}

.find-panel {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding-top: var(--space-4);
}
/* 段の表示（Stepper）：丸 20px（数字は添え字の段）、名前は小さい字。いまの段は紺の塗りの丸と本文の色の名前。
   押せる段（通った段・一度行った先の段）は、名前を紺の字に（触れると下線）。まだ行っていない段は灰。 */
.find-steps {
  list-style: none;
  margin: 0 0 var(--find-gap-l);
  padding: 0;
  display: flex;
  gap: var(--space-5);
  font-size: var(--fs-note);
  line-height: var(--lh-control);
  color: var(--text-muted);
}
.find-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.find-steps span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-face);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-tag);
  line-height: 1;
}
.find-steps .now {
  color: var(--text);
}
.find-steps .now span {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--on-fill);
}
.find-steps .done span {
  border-color: var(--fill);
  color: var(--fill);
}
.find-head h2,
.find-intro h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-title);
  margin: 0;
}
.find-head p,
.find-intro p {
  /* 文節で折る（360px で「押すと／変えられます」と切れていた）。 */
  word-break: auto-phrase;
  margin: var(--find-gap-s) 0 var(--find-gap-l);
  color: var(--text-muted);
  font-size: var(--type-note);
}
.find-wait {
  color: var(--text);
  font-weight: 600;
}
.find-groups {
  display: flex;
  flex-direction: column;
  gap: var(--find-gap);
}
.find-group {
  display: flow-root;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
/* 段の名前は、その段の1行目の選択肢と同じ高さに（行の高さ＝選択肢の高さ）。 */
.find-group-label {
  float: left;
  width: 5.5rem;
  padding: 0;
  line-height: var(--find-chip-h, 2.125rem);
  font-size: var(--type-note);
  color: var(--text-muted);
}
/* 統計のない推計の段（④車とタイヤの「替えるとき」など）：段の名前の下に小さく「（推計）」。狭い画面は名前の横。 */
.find-group-note {
  display: block;
  margin-top: -0.375rem;
  line-height: 1.3;
  font-size: 0.75rem;
}
.find-opts {
  margin-left: var(--space-9);
  display: flex;
  flex-wrap: wrap;
  gap: var(--find-gap-s);
}
.find-opts > .find-chip {
  margin: 0;
}
.find-opts > .find-detail,
.find-opts > .find-empty {
  flex-basis: 100%;
}
/* 人数の桁が変わっても、選択肢の幅が変わらない（押すたびに折り返しが変わって段が動かないように）。
   3,000人では「1,554」のように4桁とカンマになるので、その分（3桁分のときは、999→1,040 で隣が1px動いた。2026-10-12）。 */
.find-chip .find-n {
  display: inline-block;
  min-width: 4.5ch;
}
.find-chip,
.find-cut {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-2) var(--space-2) 0;
  min-height: var(--find-chip-h, 2.125rem);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-note);
}
.find-chip[aria-pressed='true'],
.find-cut[aria-pressed='true'] {
  border-color: var(--fill);
  background: var(--fill-tint);
  color: var(--fill-text);
  font-weight: 600;
}
/* 選択肢と②の札は、押しても太字にしない（字の幅が変わって、横の選択肢や下の段が動くため。斉藤さん 2026-10-09「押すとずれる」）。 */
.find-chip[aria-pressed='true'],
.find-cut[aria-pressed='true'] {
  font-weight: inherit;
  box-shadow: inset 0 0 0 1px var(--fill);
}
.find-n {
  color: var(--text-muted);
  font-size: var(--fs-tag);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.find-cuts {
  display: grid;
  gap: var(--find-gap-s);
  margin: 0;
}
.find-cut {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2, 6px);
  text-align: left;
}
.find-cut strong {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: inherit;
}
.find-cut > span {
  color: var(--text-muted);
  font-size: var(--fs-note);
  font-weight: 400;
}
.find-summary {
  margin: 0 0 var(--find-gap-l);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-quiet);
  border-radius: var(--radius-2, 6px);
  font-size: var(--type-note);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
}
.find-foot {
  position: sticky;
  bottom: 0;
  margin-top: var(--find-gap-l);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--find-gap) 0;
}
.find-foot .primary {
  width: 100%;
  margin-top: var(--find-gap);
}
.find-count {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
}
.find-num {
  white-space: nowrap;
}
.find-count strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-head);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.find-count .find-of {
  font-size: var(--type-note);
  color: var(--text-muted);
  margin-right: var(--space-1);
}
.find-count .find-size {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: var(--fs-note);
}
.find-count em {
  flex-basis: 100%;
  font-style: normal;
  color: var(--warn-text);
  font-size: var(--fs-note);
}
.find-result .find-theme-line {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--type-note);
}
.find-side {
  margin: var(--space-1) 0 0;
  color: var(--fill-mark);
  font-size: var(--type-note);
  font-weight: 600;
}

@media (max-width: 900px) {
  .find-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .find-group-label {
    float: none;
    width: auto;
    padding: 0 0 var(--find-gap-s);
    line-height: inherit;
  }
  .find-group-note {
    display: inline;
    margin: 0 0 0 0.25em;
  }
  .find-opts {
    margin-left: 0;
  }
  .find-panel {
    position: static;
    max-height: none;
    overflow: visible;
    padding-bottom: var(--space-4);
  }
  /* スマホ：千人の顔を小さくして上に貼り付け、選ぶあいだも灯り方が見えるようにする。 */
  .find-wall {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
  }
  .find-wall .fw-grid {
    grid-template-columns: repeat(50, minmax(0, 1fr));
    gap: 1px;
    padding-top: 0;
  }
  .find-wall .fw-tile {
    border-radius: 1px;
  }
  .find-wall .fw-cap {
    display: none;
  }
  .find-grid {
    --pick-scale: 2;
  }
  .find-wall .fw-grid {
    padding: var(--space-2) var(--space-1);
  }
  .find-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-sticky);
  }
  .find-foot .primary {
    width: auto;
    margin: 0;
  }
  .find-count strong {
    font-size: var(--fs-head);
  }
  .find-count .find-size,
  .find-count em {
    font-size: var(--fs-tag);
  }
  .find-page {
    --find-chip-h: 2.75rem;
  }
  .find-page {
    padding-bottom: var(--space-9);
  }
}
@media (max-width: 420px) {
  .find-count .find-of {
    display: none;
  }
  .find-count strong {
    font-size: var(--fs-title);
  }
  /* 狭い帯：主役の横の余白を詰め、左の「日本の18歳以上なら約○万人」を1行に保つ */
  .find-foot .primary {
    --control-pad: var(--space-4);
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .find-wall .fw-grid {
    max-width: 32rem;
    margin: 0 auto;
  }
}
/* 3. 三つの分布：上に分布ごとの顔（おすすめに印、押すと選ぶ）、下に選んだ人と理由、下に貼り付く帯。 */
.find-dist {
  padding-bottom: var(--space-9);
}
.dist-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 0;
  margin-top: var(--find-gap-l);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dist-col {
  padding: var(--find-gap-l);
}
.dist-col + .dist-col {
  border-left: 1px solid var(--line);
}
.dist-col:first-child {
  padding-left: 0;
}
.dist-col:last-child {
  padding-right: 0;
}
/* 列の見出し：日本語の名前と、その横の同じ行に小さく英語名（docs/SCREEN-WORDS.md「理論の名前（英語）」）。
   入りきらない幅だけ、英語名が次の行に回る。 */
.dist-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
}
/* 段の見出し（列の名前・聞きたい人）は小見出しの段：17px・ゴシック600、英語名12px（Claude Design の画面デザイン） */
.dist-col h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: var(--lh-title);
  letter-spacing: 0;
  white-space: nowrap;
}
.dist-h .term-en {
  margin-left: 0;
  white-space: nowrap;
}
/* どれか1列でも英語名が名前の横に入らないとき、どの列も英語名を名前の下の行に置く（find.js alignDistCols） */
.dist-en-below .dist-h {
  flex-direction: column;
  align-items: flex-start;
}
.dist-learn {
  max-width: 48rem;
  margin-top: var(--space-2);
}
.dist-learn p {
  word-break: auto-phrase;
}
.dist-note {
  margin: var(--find-gap-s) 0 var(--find-gap);
  color: var(--text-muted);
  font-size: var(--type-note);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.dist-note span {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dist-faces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--find-gap-s);
}
.dist-face {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-face);
  background: none;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dist-face .portrait,
.dist-face .initial {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-face);
  object-fit: cover;
}
.dist-face:hover {
  opacity: 1;
}
.dist-face.rec::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -1px;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-face);
  background: #d5aa16; /* ペルコモの印の金色（ロゴと同じ） */
  border: 2px solid var(--surface);
}
.dist-face.on {
  opacity: 1;
  outline: 2px solid var(--fill);
  outline-offset: 2px;
}
.dist-none {
  color: var(--text-muted);
  font-size: var(--type-note);
  margin: 0;
}
.dist-chosen-h {
  margin: var(--space-7) 0 var(--space-4);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: var(--lh-title);
  letter-spacing: 0;
}
.dist-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--find-gap);
}
.dist-card {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  /* 理由の長さが違っても、「外す」は並んだカードの下端にそろう（ux-audit C13）。 */
  grid-template-rows: 1fr auto;
  column-gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
@media (max-width: 700px) {
  .dist-card {
    padding: var(--space-4);
  }
}
.dist-card > .portrait,
.dist-card > .initial {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-face);
  object-fit: cover;
}
.dist-card h3 {
  margin: 0.125rem 0 0;
  font-size: var(--fs-lead);
  font-weight: 600;
}
.dist-card .voice-meta {
  margin: 0.125rem 0 0;
  font-size: var(--fs-tag);
}
.dist-role {
  margin: 0;
  color: var(--fill-mark);
  font-size: var(--fs-tag);
  font-weight: 600;
  word-break: auto-phrase;
}
.dist-role span {
  margin-left: var(--space-2);
  color: var(--text-muted);
  font-weight: 400;
}
.dist-why {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-note);
  line-height: 1.65;
  word-break: auto-phrase;
}
.dist-card > .small-button {
  grid-column: 2;
  justify-self: start;
  margin-top: var(--space-2);
}
.dist-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  /* 中身の左右は、ページの本文の端にそろえる（説明は左、主役は右） */
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-sticky);
}
.dist-bar p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.dist-bar p::before {
  content: '聞きたい人';
  margin-right: var(--space-2);
  color: var(--text-muted);
  font-size: var(--type-note);
}
.dist-bar strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-head);
  line-height: 1;
}
.dist-bar em {
  margin-left: var(--space-3);
  font-style: normal;
  color: var(--text-muted);
  font-size: var(--fs-note);
  word-break: auto-phrase;
}
.dist-bar .primary {
  flex-shrink: 0;
  white-space: nowrap;
}
/* スマホの帯は短く：続けて聞く道は、カードの7人目の前の一行が言う。 */
@media (max-width: 600px) {
  .dist-bar-more {
    display: none;
  }
}
/* 列の見出しの英語名が、狭い画面でも日本語の横に収まる大きさ。 */
@media (max-width: 480px) {
  .dist-col h2 {
    font-size: var(--fs-lead);
  }
}
@media (max-width: 374px) {
  .dist-col h2 {
    font-size: var(--fs-lead);
  }
}
/* 企画に書いた相手のうち、いまの条件で見つからなかった相手（find.js audienceGapHTML）：聞きたい人の見出しのすぐ下に、静かに一行 */
.dist-gap {
  margin: 0 0 var(--find-gap-s);
  color: var(--text-muted);
  font-size: var(--type-note);
}
/* 聞きたい人のカードで、7人目から前の一行：ここからは、第一印象の「別の人にも聞く」で続けて聞く人。 */
.dist-later {
  grid-column: 1 / -1;
  margin: var(--find-gap-s) 0 0;
  padding-top: var(--find-gap);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--type-note);
}
@media (max-width: 1100px) {
  .dist-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1023px) {
  .dist-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .dist-col,
  .dist-col:first-child,
  .dist-col:last-child {
    padding: var(--space-4) 0;
  }
  .dist-col + .dist-col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .dist-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .dist-bar {
    justify-content: space-between;
  }
  .dist-bar p {
    flex-wrap: wrap;
  }
  .dist-bar em {
    flex-basis: 100%;
    margin-left: 0;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .find-wall .fw-grid {
    max-width: 32rem;
    margin: 0 auto;
  }
}
/* 3. おすすめの相手：灯った順に、役割と選んだ理由。 */
.find-picks {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.find-picks li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  animation: find-in 0.35s ease-out;
}
.find-picks .portrait,
.find-picks .initial {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-face);
  object-fit: cover;
}
.find-picks h3 {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 600;
}
.find-picks .voice-meta {
  margin: 0.125rem 0 0;
  font-size: var(--fs-tag);
}
.find-pick-role {
  margin: 0;
  color: var(--fill-mark);
  font-size: var(--fs-tag);
  font-weight: 600;
}
.find-pick-why {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-note);
  line-height: 1.6;
  word-break: auto-phrase;
}
.find-foot .small-button {
  margin: var(--space-3) auto 0;
}
@keyframes find-in {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .find-picks li {
    animation: none;
  }
}
@media (max-width: 900px) {
  .find-foot .small-button {
    display: none;
  }
}

/* 「AIの使い方」の行が加わっても、右の選択肢が左の千人の顔より長くならないように（斉藤さん 2026-10-07「左右のデザインバランスを
   崩したくない」）：広い画面では選択肢を少し細くし、「千人中◯人」は顔の下に出す。スマホでは、これまでどおり下の帯に出す。 */
.find-count-wall {
  margin-top: var(--space-4);
}
@media (min-width: 901px) {
  .find-foot .find-count {
    display: none;
  }
  .find-foot .primary {
    margin-top: 0;
  }
  .find-page {
    --find-chip-h: 1.875rem;
  }
  .find-group .find-chip {
    padding: 0.125rem var(--find-chip-pad-x);
    font-size: var(--fs-note);
    gap: var(--space-2);
  }
  .find-group-label {
    width: 4.75rem;
  }
  .find-opts {
    margin-left: var(--space-8);
  }
}
@media (max-width: 900px) {
  .find-wall .find-count {
    display: none;
  }
}
/* 右は壁の高さに引き伸ばさず、上から詰めて並べる（斉藤さん 2026-10-09。2026-10-07 の「下の線をそろえる」で段の間に
   余りを配っていたのをやめた）。 */
@media (min-width: 901px) {
  .find-panel:has(.find-groups) {
    max-height: none;
  }
  .find-panel:has(.find-groups) .find-foot {
    position: static;
  }
}
/* 指で押す広い画面（iPad の横向きなど）：右の選択肢が画面の下まで続くので、「次へ」の帯を画面の下に貼り付ける
   （品質確認 2026-10-10：1024×768 で「相手を選ぶ」を押すと、「次へ」が画面の外だった）。 */
@media (min-width: 901px) and (pointer: coarse) {
  .find-panel:has(.find-groups) {
    overflow: visible;
  }
  .find-panel:has(.find-groups) .find-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
  }
  /* 選択肢の札も指で押せる高さに（PC の 30px のままだった） */
  .find-page {
    --find-chip-h: 2.75rem;
  }
}
@media (min-width: 901px) {
  /* 顔の段が右より短い幅（1024 など）でも、「千人中◯人」を左の下に置いて、右のボタンの下と線をそろえる */
  .find-wall:has(.find-count-wall) {
    display: flex;
    flex-direction: column;
  }
  .find-wall .find-count-wall {
    margin-top: auto;
    padding-top: var(--space-4);
  }
}
@media (min-width: 901px) {
  /* 画面が狭いと顔の段が低くなり、右の選択肢のほうが長くなって、余白が左に回っていた（2026-10-07、1280で確認）。
     顔のマスの高さに下限を置いて段の高さを保ち、余白はいつも右の行のあいだに入るようにする（1440 の見え方を、どの幅でも）。 */
  .find-wall {
    container-type: inline-size;
  }
  .find-wall .fw-grid {
    grid-auto-rows: max(20px, calc((100cqi - 78px) / 40));
  }
  .find-wall .fw-tile {
    aspect-ratio: auto;
  }
}
@media (min-width: 901px) and (max-width: 1179px) {
  .find-wall .fw-grid {
    grid-auto-rows: max(16px, calc((100cqi - 78px) / 40));
  }
}

/* 会社のとき（find.js companyChipsHTML）：業種の大分類を一つ選ぶと、その下に中の細かい業種が人数つきで出る。 */
.find-detail {
  margin: 0.125rem 0 var(--space-2);
  padding: var(--space-2) 0 0.125rem var(--space-3);
  border-left: 2px solid var(--fill-line);
}
.find-detail-h {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-tag);
  color: var(--text-muted);
}
.find-detail .find-chip {
  font-size: var(--fs-note);
}
@media (min-width: 901px) {
  /* 会社のときは選択肢が多いので、右は切らずに全部を縦に並べ、ページが下に伸びる（斉藤さん 2026-10-09）。
     左の顔はそのまま上に置き、「千人中◯人」は顔のすぐ下に。次へのボタンは選択肢の最後に。 */
  .find-layout:has(.find-panel-company .find-groups) {
    align-items: start;
  }
  .find-panel.find-panel-company:has(.find-groups) {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .find-panel.find-panel-company:has(.find-groups) .find-groups {
    flex: none;
    justify-content: flex-start;
  }
  .find-layout:has(.find-panel-company) .find-wall .find-count-wall {
    margin-top: 0;
  }
}
/* 段の表示：名前は1行、番号の丸はつぶさない。番号だけの段も、押す幅は44px（品質確認 2026-10-10：22px だった）。 */
.find-steps li,
.find-step-name {
  white-space: nowrap;
}
.find-steps span {
  flex: none;
}
.find-step-go {
  min-width: 2.75rem;
  justify-content: center;
}
/* 段が1行に入らないときだけ、fit.js が段階を付ける（幅の数字では決めない）：fit-tight（間を詰める。番号だけの段も押す幅は44px）
   → fit-now（いまの段のほかは番号だけ）→ fit-none（全部番号だけ）。名前は読み上げに残す。 */
.find-steps.fit-tight,
.find-steps.fit-now,
.find-steps.fit-none {
  gap: var(--space-1);
}
.find-steps.fit-now li:not(.now) .find-step-name,
.find-steps.fit-none .find-step-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* 今の選び方では誰もいない選択肢は、静かに（押せない）。選んである場合は外せるように押せる。 */
.find-chip:disabled {
  opacity: 1;
  color: var(--text-faint);
  border-color: var(--line-soft);
  background: transparent;
}
.find-chip:disabled .find-n {
  color: var(--text-faint);
}
.find-chip:disabled:hover {
  color: var(--text-faint);
}
/* 役の列に、この規模の人がいなかったときの一行 */
.dist-widened {
  margin: calc(var(--find-gap-s) - var(--find-gap)) 0 var(--find-gap);
  color: var(--text-muted);
  font-size: var(--fs-tag);
  word-break: auto-phrase;
}
/* 会社のときの役の列は、列が細くなりすぎないように（説明の一行が折れない幅）：4つは1440未満で2×2、3つ以上は狭い幅で1列。 */
@media (max-width: 1439px) {
  .find-dist-company .dist-cols-n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .find-dist-company .dist-cols-n4 .dist-col:nth-child(2) {
    padding-right: 0;
  }
  .find-dist-company .dist-cols-n4 .dist-col:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .find-dist-company .dist-cols-n4 .dist-col:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 1279px) {
  .find-dist-company .dist-cols-n3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .find-dist-company .dist-cols-n3 .dist-col {
    padding: var(--space-4) 0;
  }
  .find-dist-company .dist-cols-n3 .dist-col + .dist-col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 1023px) {
  .find-dist-company .dist-cols-n3,
  .find-dist-company .dist-cols-n4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .find-dist-company .dist-cols-n3 .dist-col,
  .find-dist-company .dist-cols-n4 .dist-col {
    padding: var(--space-4) 0;
  }
  .find-dist-company .dist-cols-n3 .dist-col + .dist-col,
  .find-dist-company .dist-cols-n4 .dist-col + .dist-col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
/* 2 の役：この規模にいないとき、3 で広げる人数を、数字の場所に静かに */
.find-n.find-n-wide {
  white-space: nowrap;
}
.find-cut:disabled {
  opacity: 1;
  color: var(--text-faint);
  border-color: var(--line-soft);
  background: transparent;
}
.find-cut:disabled > span,
.find-cut:disabled .find-n {
  color: var(--text-faint);
}

.find-step-name {
  font-style: normal;
}

/* 理論の英語名（public/js/terms.js enTag）：見出し・役の名前の下に、小さく薄く。 */
.find-en {
  margin: 0.125rem 0 0;
  line-height: 1.3;
}
.find-en .term-en {
  margin-left: 0;
}

/* 3：段の行（いまの段を灯す）、長い列の「ほかの◯人も見る」、数字を割らない、カードの1行を単語の途中で折らない。 */
.find-dist .find-steps {
  margin: var(--find-gap) 0 var(--find-gap);
}
.dist-more {
  align-self: center;
  white-space: nowrap;
}
/* 企画の一行は、画面の題の上に小さい字で（作業の帯の下の「企画：…」と同じ形） */
.find-dist .find-theme-line {
  margin: 0;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--text-muted);
}
.find-nw {
  white-space: nowrap;
}
.dist-card .voice-meta,
.dist-why {
  word-break: auto-phrase;
}
.find-summary {
  word-break: auto-phrase;
}

/* 選べるものが一つも残らない段の一行 */
.find-empty {
  margin: var(--space-2) 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--type-note);
}


/* ①②③の段の表示：通った段と今の段は押せる（その段に戻る。斉藤さん 2026-10-09）。一度行った先の段も押せる（下の .ahead）。
   まだ行っていない段は押せない。 */
.find-step-go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.find-steps .done .find-step-name {
  color: var(--fill);
}
.find-step-go:hover .find-step-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.find-step-go:focus-visible {
  outline: 2px solid var(--fill);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}
/* 前の段で選んだ条件：段の表示の下に、静かな一行（箱にしない）。 */
.find-chosen {
  margin: 0 0 var(--find-gap-l);
  color: var(--text-muted);
  font-size: var(--type-note);
  word-break: auto-phrase;
}
.find-steps + .find-chosen {
  margin-top: calc(var(--find-gap-s) - var(--find-gap-l));
}
/* 相手探しの検索の下にも、トップと同じ例の行（PC で検索の欄・3つの欄・壁の位置をトップとそろえるため）。スマホではこれまでどおり出さない。 */
@media (max-width: 700px) {
  .find-hero .examples {
    display: none;
  }
}
@media (max-width: 900px), (pointer: coarse) {
  .find-step-go {
    min-height: 2.75rem;
  }
}
/* 画面の高さが低いとき（スマホの横向きなど）は、顔の帯を上に貼り付けない。貼り付けると、下の帯とのあいだに選択肢が
   ほとんど見えなかった（品質確認 2026-10-09 H1）。縦のスマホでも低い画面では、顔の帯を細くする。 */
@media (max-width: 900px) and (max-height: 560px) {
  .find-wall {
    position: static;
  }
}
@media (max-width: 900px) and (min-height: 561px) and (max-height: 700px) {
  .find-wall .fw-grid {
    grid-template-columns: repeat(67, minmax(0, 1fr));
  }
}
/* 一度行った先の段（③まで行ってから①に戻ったときの②・③）：通った段と同じ見た目で、押すと進む（本番の確認 2026-10-10）。
   いまの選択では進めないとき（②で何も選んでいない）は、押せない形。 */
.find-steps .ahead span {
  border-color: var(--fill);
  color: var(--fill);
}
.find-steps .ahead .find-step-go:not(:disabled) .find-step-name {
  color: var(--fill);
}
.find-step-go:disabled {
  cursor: default;
  opacity: 0.6;
}
.find-step-go:disabled:hover .find-step-name {
  text-decoration: none;
}

/* ①②の段の表示は、③と同じ左上（トップの大見出しの場所）。大見出しは見えないまま場所を取り、検索の欄と下の壁は
   トップと同じ位置・同じ幅のまま（押しても動かさない）。スマホでは段の表示の高さだけ。 */
.find-hero-steps {
  position: relative;
  min-width: 0;
}
.find-hero-sizer {
  visibility: hidden;
}
.find-hero-now {
  position: absolute;
  inset: 0 0 auto;
}
.find-hero-now .find-steps {
  margin: 0;
}
.find-hero-now .find-chosen {
  margin: var(--space-2) 0 0;
}
/* ②で選んだ条件の一行：PC は段の表示の下、スマホは選ぶ欄の上（上の検索と壁を、①と②で動かさないため） */
.find-chosen-panel {
  display: none;
}
/* 900px 以下では壁が上の細い帯に変わる（トップと同じ壁ではない）ので、見えない大見出しの場所は取らない */
@media (max-width: 900px) {
  .find-hero-sizer {
    display: none;
  }
  .find-hero-now {
    position: static;
  }
}
@media (max-width: 700px) {
  .find-hero-now .find-steps {
    margin-top: var(--space-1);
  }
  .find-hero-now .find-chosen {
    display: none;
  }
  .find-chosen-panel {
    display: block;
  }
  .find-hero-steps {
    justify-self: stretch;
    text-align: left;
  }
  .find-hero-sizer {
    display: none;
  }
  .find-hero-now {
    position: static;
  }
}

/* 選択肢（.find-chip）は札（Chip）の形（parts.css .chip と同じ）：見える丸は 32px・13px、押せる範囲は 44px。
   選んだ札は淡い面＋紺の枠＋紺の字。押しても太さと幅は変えない（横の札や下の段を動かさない）。 */
.find-page {
  --find-chip-h: 2rem;
  /* 札の左右の余白（この札の種類の値はここ1か所）。字と枠のあいだの余裕は残し、短い札の3枚・5枚の箱が1行に2〜3枚ずつ収まるように
     （12px では、3枚が 373px で欄の 372px に 1px 入らず、縦1列になっていた。統括5 2026-10-27） */
  --find-chip-pad-x: var(--space-2);
}
.find-chip,
.find-group .find-chip,
.find-detail .find-chip {
  position: relative;
  isolation: isolate;
  min-height: var(--tap);
  margin-block: calc((2rem - var(--tap)) / 2);
  padding: 0 var(--find-chip-pad-x);
  border: 0;
  background: none;
  font-size: var(--fs-note);
  line-height: 1;
  color: var(--text);
}
.find-chip::before {
  content: '';
  position: absolute;
  inset: calc((var(--tap) - 2rem) / 2) 0;
  z-index: -1;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: background-color var(--quick) var(--ease);
}
.find-chip:hover:not(:disabled) {
  color: var(--text);
}
.find-chip:hover:not(:disabled)::before {
  background: var(--surface-quiet);
}
.find-chip[aria-pressed='true'] {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--fill);
}
.find-chip[aria-pressed='true']::before {
  background: var(--chosen-bg);
  border-color: var(--fill);
}
.find-chip[aria-pressed='true'] .find-n {
  color: var(--fill);
}
.find-chip:focus-visible {
  outline: none;
}
.find-chip:focus-visible::before {
  outline: 2px solid var(--fill-text);
  outline-offset: 2px;
}
.find-chip:disabled {
  border: 0;
  background: none;
}
.find-chip:disabled::before {
  border-color: var(--line-soft);
  background: transparent;
}
/* 札の行と行のあいだは、見える丸のあいだで --space-3（押せる範囲は重ねない） */
.find-opts {
  gap: var(--space-3) var(--find-gap-s);
}

/* 広い画面の相手選び：縮図の全員（3,000人）を壁に並べ、右の棚と高さをそろえる（斉藤さん 2026-10-12、案B）。3,000人を50列×60段。1024px から。 */
@media (min-width: 1024px) {
  .find-grid.find-grid-all {
    grid-template-columns: repeat(50, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 2px;
  }
  .find-grid-all .fw-tile {
    aspect-ratio: 1;
    height: auto;
    border-radius: 2px;
  }
}
/* 細かい業種は、たたんでおく。開く言葉は下線付きの小さな言葉（札にしない）。 */
.find-more {
  flex: 0 0 100%;
  width: 100%;
  align-self: start;
}
.find-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-note);
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
  list-style: none;
  cursor: pointer;
}
.find-more > summary::-webkit-details-marker {
  display: none;
}
.find-more > summary::after {
  content: ' ▾';
  text-decoration: none;
}
.find-more[open] > summary::after {
  content: ' ▴';
}
.find-more > summary:hover {
  color: var(--text);
}
.find-more > summary:focus-visible {
  outline: 2px solid var(--fill-text);
  outline-offset: 2px;
}
/* 広い画面（壁が3,000人のとき）：右の欄は壁の高さに引き伸ばさず、「次へ」の段は選択肢の直下に置く（斉藤さん 2026-10-12。
   下の線をそろえると、選択肢が少ない段でボタンが選択肢から約550px離れていた）。右は壁より短くてよい。選択肢が長くて
   画面の下にはみ出すときは、「次へ」は画面の下に貼り付いて見えている。 */
@media (min-width: 1024px) {
  .find-layout:has(.find-grid-all) .find-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .find-layout:has(.find-grid-all) .find-panel .find-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
  }
}
/* スマホの③：顔は6列のマスに並べ、たたんだ列は2段ちょうど（12人）にする（格子に端数を出さない）。開く言葉は次の段に。 */
@media (max-width: 700px) {
  .dist-faces {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .dist-face {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .dist-more {
    grid-column: 1 / -1;
    justify-self: start;
  }
  /* 聞きたい人のカード：「外す」は名前の行の右に置き、カードを低くする（縦に長くなりすぎない） */
  .dist-card {
    position: relative;
    grid-template-rows: auto;
  }
  .dist-card > .small-button {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    margin-top: 0;
  }
  /* 「使いにくい事情がある人」が「人」だけ次の行に落ちないよう、名前は一続きに（おすすめは次の行に回ってよい） */
  .dist-card .dist-role {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-2);
    white-space: nowrap;
    padding-right: 3.5rem;
  }
  .dist-card .dist-role span {
    margin-left: 0;
  }
}
/* ③の列は、どの列も中身の幅を同じにする（両端の列だけ広く、同じ16人が8人ずつ2段の列と7・7・2の列に分かれていた。
   格子に端数を出さない）。列の間の線は、間の真ん中に引く。 */
@media (min-width: 1024px) {
  .dist-cols {
    column-gap: calc(2 * var(--find-gap-l));
  }
  .dist-col,
  .dist-col:first-child,
  .dist-col:last-child {
    padding: var(--find-gap-l) 0;
  }
  .dist-col + .dist-col {
    position: relative;
    border-left: 0;
  }
  .dist-col + .dist-col::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--find-gap-l));
    border-left: 1px solid var(--line);
  }
}

/* 顔の壁の枠（wall-lens.js）：トップから引くあいだ、大きく描いた壁が枠の外に出ない。選んだ顔の拡大（.pick）は少し外まで見せる。 */
.find-wall .fw-view {
  overflow: clip;
  overflow-clip-margin: 8px;
}
/* スマホ（900px 以下）：トップから引くあいだも、選択肢の丸を1pxも動かさない。大きく描いた壁が枠の外の広さ（ページの
   高さやスクロールの位置）に響かないよう、枠の中だけに閉じ込める（overflow: clip に加えて、どのブラウザーでも効く
   contain: paint）。この幅では拡大は効かないので、枠の外に描くものはない。 */
@media (max-width: 900px) {
  .find-wall .fw-view {
    contain: paint;
  }
}

/* 顔の並びは canvas の1枚の絵に描く（wall-lens.js drawFind、2026-10-15）。選ぶたびに3,000個の顔を描き直すと、
   CPU を4倍遅くした Chromium で次の選択肢が出るまで12〜14秒かかった。ページの顔（.fw-tile）は見えない形で残す
   （人数・名前・data-id・読み上げのため）。見えないので、移り変わりもぼかしも付けない（灯り方は canvas が同じ値で描く）。
   canvas は枠より 8px 広い：選んだ顔の拡大と枠が、端でも切れないように（overflow-clip-margin と同じ幅）。 */
.find-wall .fw-view > .find-grid.fw-drawn {
  opacity: 0;
}
.find-grid.fw-drawn .fw-tile {
  transition: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  outline: none !important;
}
.find-wall .fw-view > .fw-canvas {
  display: block;
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  pointer-events: none;
}
/* ②（会社）：ほかの規模の人を足すかを聞く一行（find.js widenHTML、2026-10-17：黙って人数を増やさない）。 */
.find-widen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 0.75rem); margin: var(--space-3, 0.75rem) 0 0; font-size: 0.875rem; line-height: 1.6; }
.find-widen button { flex: none; }

/* もっと絞る（2026-10-17、find.js extraHTML）：基本の6つの下に一本の線と見出し。開くとテーマの行が並び、
   行を開くと段（名前は札の上）と札。選んだ条件は、閉じていても見出しのすぐ下に、×付きの札で並ぶ。 */
.find-extra {
  margin-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.find-extra-head,
.find-theme-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.find-extra-head {
  min-height: 3rem;
}
.find-extra-h {
  flex: none;
  font-size: var(--fs-body);
  font-weight: 600;
}
.find-extra-hint {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--fs-note);
  white-space: nowrap;
}
.find-mark {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.375rem 0.25rem auto;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
}
[aria-expanded='true'] > .find-mark {
  margin-bottom: -0.25rem;
  transform: rotate(-135deg);
}
.find-extra-head:hover .find-extra-h,
.find-theme-head:hover .find-theme-name {
  color: var(--fill);
}
.find-extra-head:focus-visible,
.find-theme-head:focus-visible,
.find-extra-clear:focus-visible {
  outline: 2px solid var(--fill-text);
  outline-offset: 2px;
}
/* 選んだ条件：選んだ札と同じ色（淡い面＋紺の枠）で、数字の代わりに×。見える丸は 32px、押せる範囲は 44px。 */
.find-extra-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--find-gap-s);
  margin: 0 0 var(--space-3);
}
.find-tag {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  margin-block: calc((2rem - var(--tap)) / 2);
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--fill);
  font-size: var(--fs-note);
  line-height: 1;
  cursor: pointer;
}
.find-tag::before {
  content: '';
  position: absolute;
  inset: calc((var(--tap) - 2rem) / 2) 0;
  z-index: -1;
  background: var(--chosen-bg);
  border: 1px solid var(--fill);
  border-radius: var(--radius-pill);
}
.find-tag-x {
  position: relative;
  width: 1rem;
  height: 1rem;
}
.find-tag-x::before,
.find-tag-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.625rem;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.find-tag-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.find-tag:hover::before {
  background: var(--fill-tint);
}
.find-tag:focus-visible {
  outline: none;
}
.find-tag:focus-visible::before {
  outline: 2px solid var(--fill-text);
  outline-offset: 2px;
}
.find-extra-clear {
  min-height: var(--tap);
  margin-block: calc((2rem - var(--tap)) / 2);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-note);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.find-extra-clear:hover {
  color: var(--text);
}
/* テーマの行：細い線で区切る一覧（箱にしない）。開いた行の中は、段の名前を札の上に。 */
.find-themes {
  border-top: 1px solid var(--line-soft);
}
.find-theme {
  border-bottom: 1px solid var(--line-soft);
}
.find-theme-name {
  font-size: var(--fs-note);
}
.find-theme.open .find-theme-name {
  font-weight: 600;
}
.find-theme-n {
  color: var(--fill);
  font-size: var(--fs-tag);
}
/* 開いた行の段は、基本の6つと同じ形（段の名前を左に、札の列を同じ線に）。スマホでは名前が札の上。 */
.find-theme-body {
  display: flex;
  flex-direction: column;
  gap: var(--find-gap);
  padding: var(--space-1) 0 var(--space-5);
}
/* 広い画面：もっと絞るを開いて右が長くなったら、顔の壁は画面に貼り付けて、下の札を押しても灯り方が見えるように。 */
@media (min-width: 901px) {
  .find-layout:has(.find-extra.open) .find-wall,
  .find-layout:has(.find-extra-chosen) .find-wall {
    position: sticky;
    top: var(--space-4);
    align-self: start;
  }
}
/* 押せない札（いまの条件で0人）は、字も薄く。.find-group .find-chip の字の色が :disabled より強く、字だけ濃く残っていた。 */
.find-chip:disabled,
.find-group .find-chip:disabled,
.find-detail .find-chip:disabled {
  color: var(--text-faint);
  cursor: default;
}
/* 選んだ札は紺の塗りに白い字（人数も白）。塗りは compact.css（共通の札の決め方の所）。選んだ条件の札も同じ。 */
.find-chip[aria-pressed='true'],
.find-group .find-chip[aria-pressed='true'],
.find-detail .find-chip[aria-pressed='true'],
.find-chip[aria-pressed='true']:hover:not(:disabled),
.find-chip[aria-pressed='true'] .find-n,
.find-tag {
  color: var(--on-fill);
}
.find-tag::before,
.find-tag:hover::before {
  background: var(--fill);
  border-color: var(--fill);
}
/* 選んだ条件の札：指を置いても字は白のまま（390 で、押した直後に指の下に来た札の字が紺になって消えていた）。 */
.find-tag:hover,
.find-tag:focus,
.find-tag:active {
  color: var(--on-fill);
}

/* ことばで探す（find-words.js、2026-10-18）：相手探しのパネルのいちばん上の入力欄と、近い6人のカード */
.find-words {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.find-words label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
}
.find-words .searchbox {
  display: flex;
  gap: var(--space-2);
}
.find-words input {
  flex: 1;
  min-width: 0;
}
.find-words-note {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--type-note);
}
.niche-line {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-note);
  line-height: 1.65;
  word-break: auto-phrase;
}
.niche-yes,
.niche-no {
  display: block;
  font-size: var(--fs-tag);
  font-weight: 600;
}
.niche-yes {
  color: var(--fill-mark);
}
.niche-no {
  color: var(--text-muted);
}
.niche-card.off {
  opacity: 0.55;
}
.niche-back {
  margin-top: var(--space-3);
}
.find-words-result .dist-cards {
  margin-top: var(--space-5);
}
/* いちばん下のカードが、下の固定の帯（聞きたい人・この人たちに聞く）に隠れないように */
.find-words-result {
  padding-bottom: calc(var(--space-9) + 6rem);
}
/* 4人のときは2列（3列だと1人だけ余る）。狭い幅は、いつもの列のまま */
@media (min-width: 1101px) {
  .find-words-result .dist-cards.niche-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ③の顔のそばに出る、その人の1枚（find.js showPeek）。白い地に細い線、影はごく淡く。字は下のカードと同じ。 */
.dist-peek {
  position: absolute;
  z-index: 60;
  max-width: min(20rem, calc(100vw - 16px));
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-2, 6px);
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
  font-size: var(--fs-note);
  line-height: 1.5;
  pointer-events: none;
  word-break: auto-phrase;
}
.dist-peek[hidden] {
  display: none;
}
.dist-peek strong {
  display: block;
  font-weight: 600;
}
.dist-peek-meta {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-tag);
}
.dist-peek-why {
  display: block;
  margin-top: var(--space-1);
}
/* 「この人たちに聞く」がつながらなかったときの一文（find.js askErrorHTML）：ボタンの左に。狭い幅は、ボタンの上の段に */
.dist-bar .dist-bar-error {
  margin: 0 0 0 auto;
}
@media (max-width: 700px) {
  .dist-bar:has(.dist-bar-error) {
    flex-wrap: wrap;
  }
  .dist-bar .dist-bar-error {
    flex-basis: 100%;
    order: -1;
    margin: 0;
  }
}

/* 「届けたい相手」の見出しと、その横の〔個人向け〕〔会社向け〕（①と、トップの右の見出し。斉藤さん・統括 2026-10-20）。 */
.find-head-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.find-head-row h2 {
  margin: 0;
}
.buyer-switch {
  flex: none;
}

/* 相手だけを書いたとき、6人に聞く前に「何を聞いてみますか？」を書く欄（find.js askProductHTML）。カードの上、見出しのすぐ下 */
.ask-product {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-5);
  max-width: 44rem;
}
.ask-product label {
  font-weight: 600;
}
.ask-product textarea {
  width: 100%;
  resize: vertical;
}

/* 相手を選ぶ画面の新しい形（public/js/find.js find-new、新しいトップから来たとき）：3,000人の壁を背景に、紺のカードを
   真ん中に。上に5つの札（4枚のカードと価値観）、問い、人数、選ぶ項目、次へ（斉藤さん 2026-10-24。細部はあとで詰める） */
.find-new {
  --fn-navy: #16233f;
  --fn-gold: #f2c14e;
  --fn-sub: #aab3c5;
}
.find-new .find-hero { display: none; }
.find-new .find-layout { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 0; border: 0; margin: 0 calc(50% - 50vw); width: 100vw; min-height: 100svh; padding: 128px 24px 56px; overflow: hidden; }
/* 顔の並びは画面いっぱいの背景。拡大して描く canvas は枠の外に 8px ずつ出る（.fw-canvas の inset: -8px）ので、ここで切る
   （外の .find-layout に任せると、欄の中身が 8px 切れているように測られた。B1 の saito-review 2026-10-27） */
/* 背景の顔の並びは、どの幅でも壁いっぱいに：列の数は wall-balance.js が壁の高さから決める（前の流れのスマホの幅の、上に置く細い帯の
   決まり＝幅 32rem・50列は掛けない） */
.find-new .find-wall { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.find-new .find-wall .find-grid { grid-template-columns: repeat(var(--wall-cols, 50), minmax(0, 1fr)); grid-auto-rows: auto; max-width: none; margin: 0; }
.find-new .find-wall .fw-tile { aspect-ratio: 1; }
.find-new .find-wall .fw-cap { display: none; }
/* 顔の並びは画面にとどまる背景：札の箱だけが上を動き、箱が伸びても（くわしくのテーマを開いても）並びを伸ばさない。下に顔のない帯も、
   並びの組み変えも、同じ顔の繰り返しもない（統括5 2026-10-28）。sticky が効くよう、外の箱はスクロールの箱にしない（overflow: clip） */
.find-new .find-layout { overflow: clip; }
.find-new .find-wall .fw-view { position: sticky; top: 0; height: 100svh; }
/* 壁の下の端は白へぼかす：箱が終わると枠が外れ、壁が最後だけ上へ動き、いちばん下の顔の行が途中で切れて見えた（saito-review 2026-10-28）。
   ぼかす幅は、箱の下端から壁の下端までの距離（枠が外れて動く量。wall-balance.js が --wall-fade に入れる） */
.find-new .find-wall .fw-view { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--wall-fade, 0px)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--wall-fade, 0px)), transparent); }
.find-new .find-panel { position: relative; top: auto; z-index: 2; width: min(740px, 100%); max-height: none; overflow: visible; background: var(--fn-navy); color: #fff; border-radius: 32px; padding: 32px 40px 28px; box-shadow: 0 24px 64px rgba(10, 18, 36, .35); font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', system-ui, sans-serif; }
.find-new .find-panel .mincho { font-family: 'Top Hero Mincho Full', 'Top Hero Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-weight: 800; }
.find-new .find-panel .find-wait { color: #fff; }
.fn-tags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fn-tags.fn-tags-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.fn-tag button { width: 100%; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; font: inherit; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--on-navy-sub, #c9d0dc); cursor: pointer; }
/* 同じ行の段は、値が2行に折り返したものに合わせて同じ高さに（大きさをそろえる。T の saito-review 2026-10-27） */
.fn-tag button { height: 100%; }
.fn-tag button:disabled { cursor: default; }
/* 並べ方を決めるために、段のいちばん狭い幅（値を語の切れ目で折り返したとき）を測るあいだだけ（find.js balanceChoices） */
.fn-tags.fn-tags-measure { display: flex; flex-wrap: wrap; }
.fn-tags.fn-tags-measure > li { width: min-content; grid-column: auto !important; }
.fn-tags.fn-tags-measure .fn-tag span { white-space: nowrap; }
/* 値を1行にしたときの幅を測るあいだ（fn-tags-wide）と、1行に並べると決めたとき（fn-tags-one）：値は折らない */
.fn-tags.fn-tags-wide { display: flex; flex-wrap: wrap; }
.fn-tags.fn-tags-wide > li { width: max-content; grid-column: auto !important; }
.fn-tags.fn-tags-wide .fn-tag b,
.fn-tags.fn-tags-one .fn-tag b,
.fn-tags.fn-tags-wide .fn-tag span { white-space: nowrap; }
/* 選んだ値は「…」で切らない：幅が足りなければ文節で折り返す（screen-review「…で切って逃げない」） */
.fn-tag span { font-size: 12px; white-space: nowrap; }
/* 「子どもがいる ほか1」は、折れるなら語のあいだ（「ほか1」の前）で折れる */
/* 値の字の固まり（「子育て中（0〜2歳）」と「ほか4」）は、固まりの中では折り返さない。段の並べ方（find.js balanceChoices）が、いちばん長い固まりが
   入る幅で行を分ける（固まりの中で折れて、値が2〜3行になっていた。saito-review #1） */
.fn-tag b i { display: inline-block; max-width: 100%; font-style: normal; white-space: nowrap; }
.fn-tag b { max-width: 100%; min-height: 1.4em; font-size: 12.5px; line-height: 1.35; font-weight: 700; text-align: center; word-break: auto-phrase; text-wrap: balance; }
.fn-tag.done button { background: rgba(242, 193, 78, .14); border-color: var(--fn-gold); color: #e6d3a3; }
.fn-tag.done b { color: var(--fn-gold); }
.fn-tag.now button { background: #fff; border-color: #fff; color: var(--fn-navy); }
.fn-tag.now span { font-weight: 700; }
.fn-tag.now b { color: #5b6475; font-weight: 500; }
.fn-plan { margin: 22px 0 0; text-align: center; font-size: 13px; color: #c9d0dc; word-break: auto-phrase; }
/* 2行に入らない長い企画（find.js newPlanHTML、fit.js の data-fit-rows）：2行で止め、その下に「全文を見る」。開いたら全文 */
.fn-plan .fn-plan-more { display: none; }
.fn-plan.fn-plan-long .fn-plan-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fn-plan.fn-plan-long .fn-plan-q { display: block; }
.fn-plan.fn-plan-long .fn-plan-more { display: inline-flex; align-items: center; min-height: var(--tap); color: #fff; font-size: 13px; }
.fn-buyer { display: flex; justify-content: center; margin-top: 10px; }
.fn-buyer-wait { margin: 6px 0 0; min-height: 1.5em; line-height: 1.5; text-align: center; font-size: 12px; color: var(--fn-sub); }
.find-new .find-panel .buyer-switch { gap: 6px; }
.find-new .find-panel .buyer-switch button { min-height: 36px; padding: 0 16px; border-radius: 980px; font-size: 13px; color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.find-new .find-panel .buyer-switch button[aria-pressed='false']:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.find-new .find-panel .buyer-switch button[aria-pressed='true'],
.find-new .find-panel .buyer-switch button[aria-pressed='true']:hover { background: var(--fn-gold); color: var(--fn-navy); box-shadow: none; font-weight: 700; }
/* 指で押すとき（狭い幅か、指の端末）は、指の下限（--tap）。タブレットで 36px のままだった（q2-m7） */
@media (max-width: 759px), (pointer: coarse) { .find-new .find-panel .buyer-switch button { min-height: var(--tap); } }
/* 会社向けの①②も紺のカードの中：止まる足元の地を紺に（白い帯が出ていた） */
.find-new .find-panel .find-foot { background: var(--fn-navy); border-top-color: rgba(255, 255, 255, .14); }
.fn-q { margin: 6px 0 0; text-align: center; font-size: 32px; letter-spacing: .04em; color: #fff; }
.find-new .find-panel .fn-count { margin: 8px 0 0; text-align: center; color: #c9d0dc; }
.fn-note { margin: 10px 0 0; text-align: center; font-size: 13px; color: #c9d0dc; }
.find-new .find-panel .find-groups { margin-top: 18px; }
.find-new .find-panel .find-group-label, .find-new .find-panel .find-n, .find-new .find-panel .find-group-note { color: var(--fn-sub); }
/* 選択肢は1段に1行（斉藤さん 2026-10-24「二行にしたくない。とにかくデザインにはこだわりたい」）：段の名前は選択肢の上に小さく
   置いて、選択肢に面の幅を全部渡す。札は小さく詰め、人数は細く小さく */
.find-new .find-panel .find-groups { gap: 14px; }
.find-new .find-panel .find-group { margin: 0; }
.find-new .find-panel .find-group-label { float: none; width: auto; margin: 0 0 6px; line-height: 1.4; font-size: 12px; letter-spacing: .08em; text-align: left; }
.find-new .find-panel .find-opts { margin-left: 0; gap: 5px; }
/* 一つの見出しの下の小さな段（暮らしの「働き方」の本人・夫婦）：小見出しを札の左に、1行目の札の中ほどにそろえる（札の押せる高さは44px） */
.find-new .find-panel .fn-row { display: flex; align-items: flex-start; gap: 8px; }
.find-new .find-panel .fn-row + .fn-row { margin-top: 5px; }
.find-new .find-panel .fn-row-sub { flex: none; min-width: 2.4em; line-height: 44px; font-size: 12px; letter-spacing: .08em; color: var(--fn-sub); }
.find-new .find-panel .fn-row .find-opts { flex: 1; min-width: 0; }
/* 札の箱は、どの行も横いっぱい（find.js balanceChoices が、行の分け方と札ごとの幅を決めて付ける）。前の流れの箱も同じ */
.find-panel .find-opts.fn-fill, .find-panel .find-detail.fn-fill { display: flex; flex-wrap: wrap; }
.find-panel .find-opts.fn-fill > .find-chip, .find-panel .find-detail.fn-fill > .find-chip { flex: none; min-width: 0; max-width: none; justify-content: center; }
/* 札の箱の中の、札でないもの（細かい業種の段・その見出し・空の一文）は、1行を占める（find.js balanceChoices は札だけを並べる） */
.find-panel .find-opts.fn-fill > :not(.find-chip), .find-panel .find-detail.fn-fill > :not(.find-chip) { flex-basis: 100%; }
/* 細かい業種の段の札も、札の箱と同じ間（並べる幅を間で計算するので、札の外の余白は使わない） */
.find-panel .find-detail.fn-fill { gap: var(--find-gap-s); }
.find-panel .find-detail.fn-fill > .find-chip { margin: 0; }
.find-new .find-panel .find-detail.fn-fill { gap: 5px; }
/* スマホは札に幅を全部渡す：小見出しは札の上に（左に置くと、最後の札が1つだけ次の行に落ちた） */
@media (max-width: 759px) {
  .find-new .find-panel .fn-row { display: block; }
  .find-new .find-panel .fn-row-sub { display: block; line-height: 1.4; margin: 0 0 2px; font-size: var(--fs-tag); }
}
.find-new .find-panel .find-chip { --find-chip-h: 2rem; margin: 0; gap: 5px; padding: 0 9px; font-size: 13.5px; }
.find-new .find-panel .find-chip .find-n { min-width: 3.4ch; font-size: 0.75rem; opacity: .85; }
.find-new .find-panel .find-chip { color: #fff; }
.find-new .find-panel .find-chip::before { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .26); }
.find-new .find-panel .find-chip:hover:not(:disabled) { color: #fff; }
.find-new .find-panel .find-chip:hover:not(:disabled)::before { background: rgba(255, 255, 255, .16); }
.find-new .find-panel .find-chip[aria-pressed='true'] { color: var(--fn-navy); box-shadow: none; }
.find-new .find-panel .find-chip[aria-pressed='true']::before { background: var(--fn-gold) !important; border-color: var(--fn-gold) !important; }
.find-new .find-panel .find-chip[aria-pressed='true'] .find-n { color: var(--fn-navy); }
/* 選んだ札に指・マウスを置いたままでも、金の地に紺の字（上の :hover の白い字に負けない。screen-review「選んだ印」） */
.find-new .find-panel .find-chip[aria-pressed='true']:hover:not(:disabled) { color: var(--fn-navy); }
.find-new .find-panel .find-chip:disabled { opacity: .4; }
.find-new .find-panel .find-cut { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: #fff; }
.find-new .find-panel .find-cut[aria-pressed='true'] { background: var(--fn-gold); border-color: var(--fn-gold); color: var(--fn-navy); box-shadow: none; }
.find-new .find-extra, .find-new .find-theme, .find-new .find-chosen-panel { color: #fff; border-color: rgba(255, 255, 255, .14); }
.find-new .find-extra-head, .find-new .find-theme-head { color: #fff; }
.find-new .find-panel .fn-foot { position: static; background: none;  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: flex-end; }
.find-new .find-panel .fn-foot .primary { background: var(--fn-gold); color: var(--fn-navy); border: 0; border-radius: 980px; min-height: 52px; padding: 0 34px; font-weight: 700; }
.find-new .find-panel .fn-foot .primary:disabled { opacity: .45; }
@media (max-width: 759px) {
  .find-new .find-layout { padding: 150px 0 0; min-height: 0; }
  .find-new .find-panel { width: 100%; border-radius: 26px 26px 0 0; padding: 22px 16px 24px; }
  /* スマホの札は2段：上に2つ（選んだ値が長い「どんな人」「暮らし」）、下に3つ。どの段も端まで埋まり、値を切らない */
  .fn-tags { gap: 4px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fn-tags > li { grid-column: span 2; }
  .fn-tags > li:nth-child(-n + 2) { grid-column: span 3; }
  .fn-tags.fn-tags-6 > li { grid-column: auto; }
  .fn-tag button { min-height: 46px; border-radius: 10px; }
  .fn-tag span { font-size: 12px; }
  .fn-tag b { font-size: 12px; }
  /* 見出しは「〜人？」の問い（斉藤さん 2026-10-25）：どの段も同じ大きさで、いちばん長い問い（17字）が紺の箱の中に1行で入る組み */
  .fn-q { font-size: 19px; letter-spacing: 0; white-space: nowrap; }
  .find-new .find-panel .fn-foot .primary { width: 100%; }
}
.find-new .find-panel .fn-count { justify-content: center; }
.find-new .find-panel .fn-count .find-of, .find-new .find-panel .fn-count .find-size { color: var(--fn-sub); }
.find-new .find-panel .fn-count strong { font-family: 'Top Hero Mincho Full', 'Top Hero Mincho', serif; font-weight: 800; color: var(--fn-gold); font-size: 30px; }
.find-new .find-panel .fn-count .find-size { text-align: center; }
/* 少ない・0人のときの次の一手（条件を一つ外すと増えます）は、紺の地で読める金の字に。白地用の --warn-text のままでは見えず、0人で止まった（A1 2026-10-26） */
.find-new .find-panel .fn-count .find-count-warning { color: var(--fn-gold); }
/* その一言の行は、出ていないときも一行ぶん取っておく：人数が減って出たとたんに、下の札や「次へ」が押し下げられていた
   （斉藤さん 2026-10-09「押すと項目が上下にずれる」。前のトップの壁の人数と同じ。compact.css find-count-wall。C1 2026-10-28） */
.find-new .find-panel .fn-count .find-count-warning { display: block; min-height: 1lh; }
.find-new .find-panel .find-cut > span { color: #c9d0dc; }
.find-new .find-panel .find-cut[aria-pressed='true'] > span { color: var(--fn-navy); }
.find-new .find-panel .find-cut .find-n { color: var(--fn-sub); }
.find-new .find-panel .find-cut[aria-pressed='true'] .find-n { color: var(--fn-navy); }
.find-new .find-panel .find-summary { background: rgba(255, 255, 255, .06); color: #c9d0dc; }
.find-new .find-panel .find-cuts { margin-top: 14px; display: grid; gap: 8px; }
.find-new .find-panel .find-cut:not([aria-pressed='true']) { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .22) !important; }
.find-new .find-panel .find-cut strong { color: #fff; font-weight: 700; }
.find-new .find-panel .find-cut[aria-pressed='true'] strong { color: var(--fn-navy); }
/* 選んだ人のカードの「プロフィールを詳しく見る」（人物紹介、person.js detail）：「外す」の横に並ぶ（斉藤さん 2026-10-24） */
.dist-card > .dist-deep { grid-row: 2; grid-column: 2; justify-self: end; align-self: end; }

/* ③おすすめの相手の新しい見た目（新しいトップから来たとき、find-new-dist）：中身と並びはそのまま。上を紺の帯にして明朝の見出し、
   顔は金の輪、聞きたい人のカードはトップの角の丸み、下の帯は紺に金のボタン（斉藤さん 2026-10-24。細部はあとで詰める） */
.find-new-dist {
  --fn-navy: #16233f;
  --fn-gold: #f2c14e;
}
.find-new-dist .pc-head {
  margin-top: var(--space-4);
  padding: 36px 0 30px;
  background: var(--fn-navy);
  /* 紺は画面の端まで（中身の字は本文の端にそろえたまま） */
  box-shadow: 0 0 0 100vmax var(--fn-navy);
  clip-path: inset(0 -100vmax);
  color: #fff;
}
.find-new-dist .pc-head h1 {
  font-family: 'Top Hero Mincho Full', 'Top Hero Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
}
.find-new-dist .pc-head .pc-lead { color: #c9d0dc; }
.find-new-dist .dist-face.rec::after { background: var(--fn-gold); }
.find-new-dist .dist-face.on { outline: 3px solid var(--fn-gold); }
.find-new-dist .dist-card { border-radius: 20px; }
.find-new-dist .dist-card > .portrait,
.find-new-dist .dist-card > .initial { border-radius: 50%; border: 3px solid var(--fn-gold); background: #fff; }
.find-new-dist .dist-role { color: #9a7413; }
.find-new-dist .dist-bar { background: var(--fn-navy); border-top: 0; color: #fff; }
.find-new-dist .dist-bar p::before, .find-new-dist .dist-bar em { color: #c9d0dc; }
.find-new-dist .dist-bar strong { color: var(--fn-gold); font-family: 'Top Hero Mincho Full', 'Top Hero Mincho', serif; font-weight: 800; }
/* 形と色は主役の決まりのまま（css/tone.css。角・枠を変えていたのをやめた：ボタンは3つの形だけ、button-consistency C1 2026-10-28） */
.find-new-dist .dist-bar .primary { padding-inline: 28px; }
/* 届けたい相手の見出しの下の一言と、その下の選ぶ項目の間を空ける（斉藤さん 2026-10-24「ボタンがくっついている」） */
.find-head .find-pick-hint { margin: var(--space-2) 0 var(--space-5); color: var(--text-muted); font-size: var(--type-note); }
.find-new .find-panel .find-pick-hint { margin: 10px 0 0; text-align: center; color: #c9d0dc; font-size: 13px; }

/* くわしく（新しい流れの4枚目、find.js detailHTML）：メディアのテーマを上に開き、ほかのテーマは中身が分かる札で並べる */
.find-new .find-panel .fn-detail { display: flex; flex-direction: column; gap: 14px; }
.find-new .find-panel .fn-detail-h { margin: 4px 0 -4px; font-size: 13px; font-weight: 700; color: var(--fn-gold); letter-spacing: .06em; text-align: left; }
/* テーマの札は、広い画面では1段にそろえて並べ（端数を作らない）、狭い画面では1列 */
.find-new .find-panel .fn-themes { display: grid; grid-template-columns: repeat(var(--fn-theme-cols, 5), minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; }
@media (max-width: 759px) { .find-new .find-panel .fn-themes { grid-template-columns: 1fr; } }
.find-new .find-panel .fn-theme { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 64px; padding: 10px 12px; text-align: left; font: inherit; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; cursor: pointer; }
.find-new .find-panel .fn-theme:hover { border-color: var(--fn-gold); }
.find-new .find-panel .fn-theme[aria-expanded='true'] { border-color: var(--fn-gold); background: rgba(242, 193, 78, .12); }
.find-new .find-panel .fn-theme b { font-size: 14px; white-space: nowrap; }
/* 題は1行（並べ方は題が入る幅で決める。find.js fitThemeItems）。1列に並べても入りきらないほど狭いときだけ、折り返す */
.find-new .find-panel .fn-theme.fn-theme-wrap b { white-space: normal; }
.find-new .find-panel .fn-theme span { font-size: 12px; line-height: 1.5; color: var(--fn-sub); word-break: auto-phrase; text-wrap: balance; }
/* 説明の段の名前は途中で折らない（名前と名前のあいだで折る）。区切りの「・」は前の名前の終わりに付く（find.js themeItemsHTML） */
.find-new .find-panel .fn-theme-items i { font-style: normal; white-space: nowrap; }
.find-new .find-panel .fn-theme-items u { text-decoration: none; }
.find-new .find-panel .fn-theme em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--fn-gold); }
/* ③の上（新しい流れ）：①②と同じ札を紺の帯に並べ、どの札からでも選び直す */
.fn-steps3 { margin: 4px 0 0; padding: 10px; border-radius: 16px; background: var(--fn-navy, #16233f); }
.fn-tags.fn-tags-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 759px) { .fn-tags.fn-tags-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fn-steps3 { margin-bottom: 12px; }
.fn-steps3 .fn-tag.now button:disabled { opacity: 1; background: #fff; border-color: #fff; color: var(--fn-navy, #16233f); }

/* ③（新しい流れ）：見出しと札の並びを紺の帯に、縦を詰める。聞きたい人のカードは小さく、「外す」は右上（斉藤さん 2026-10-24） */
.find-new-dist .pc-head { padding: 22px 0 18px; margin-top: 0; }
.find-new-dist .pc-head h1 { margin: 0 0 14px; font-size: 26px; }
.find-new-dist .pc-head .fn-steps3 { margin: 0; padding: 0; background: none; }
.find-new-dist .dist-cols { margin-top: 12px; }
.find-new-dist .dist-chosen-h { margin: 18px 0 10px; }
.find-new-dist .dist-cards { gap: 12px; }
.find-new-dist .dist-card { position: relative; grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; padding: 14px 16px 12px; }
.find-new-dist .dist-card > .portrait, .find-new-dist .dist-card > .initial { width: 2.75rem; height: 2.75rem; }

.find-new-dist .dist-card h3 { padding-right: 52px; font-size: 16px; }
/* 選んだ理由は「…」で切らず、全部見せる */
.find-new-dist .dist-card .dist-why { margin-top: 4px; font-size: 12.5px; line-height: 1.6; }


.find-new-dist .pc-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.find-new-dist .pc-head-row h1 { margin: 0; }
/* 見出しはどの幅でも1行：スマホは短い題 */
.find-new-dist .pc-head-row .pc-learn[open] { flex-basis: 100%; }
.find-new-dist .pc-head-row .pc-learn p { color: #c9d0dc; }
.find-new-dist .dist-card { padding: 10px 14px 10px; }
.find-new-dist .dist-card h3 { padding-right: 0; }

@media (max-width: 759px) {
  .find-new-dist .pc-head-row { flex-wrap: wrap; }
  .find-new-dist .dist-card .dist-why { padding-right: 0; }
}

/* 右上に「プロフィールを詳しく見る」と「外す」（斉藤さん 2026-10-24「外すの場所を右上にして、ボックスを小さく」）。どの幅でも
   カードのいちばん上の段に置き、名前の行とは重ねない。押せる範囲は44px（見える枠は parts.css の ::before） */
.find-new-dist .dist-card { align-content: start; }
.find-new-dist .dist-card .dist-acts { position: static; grid-column: 1 / -1; grid-row: 1; justify-self: end; display: flex; gap: 6px; margin: -8px -6px -4px 0; }
.find-new-dist .dist-card > .portrait, .find-new-dist .dist-card > .initial, .find-new-dist .dist-card > div:not(.dist-acts) { grid-row: 2; }
/* 字の大きさは文字だけのボタンの決まり（13px）のまま（12px にしていたのをやめた：button-consistency C1 2026-10-28） */
.find-new-dist .dist-card .dist-acts .small-button { padding: 0 10px; margin: 0; }
.find-new-dist .dist-card h3 { padding-right: 0; }

/* 新しい流れの紺の箱の〔次へ〕は、箱の中の下に置く。901〜1200px と指で触る画面では、旧い流れの下に貼り付ける形（compact.css の
   .find-layout .find-panel .find-foot、position: fixed !important）が効いて、箱の外の右下に出ていた（どの段でも。1024 で確かめた） */
@media (min-width: 901px) and (max-width: 1200px), (min-width: 901px) and (pointer: coarse) {
  .find-new .find-layout .find-panel .fn-foot {
    position: static !important;
    width: auto;
  }
}

/* 0人・少ないときの「外すと増える条件」（find.js relaxHTML）：選んだ条件の札と同じ形に、外すと何人になるか。紺のカードでは白い字に */
.find-relax { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--find-gap-s); margin: 8px 0 0; }
.find-relax-n { font-size: var(--fs-tag); opacity: .8; }
.find-new .find-panel .find-relax .find-tag { color: #fff; }
.find-new .find-panel .find-relax .find-tag::before { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .4); }
.find-new .find-panel .find-relax .find-tag:hover::before { background: rgba(255, 255, 255, .14); }
.find-new .find-panel .find-foot:has(.fn-count) { display: block; }
.find-new .find-panel .find-foot .fn-count { display: flex; margin: 0 0 8px; }
.find-new .find-panel .find-foot:has(.fn-count) .primary { width: 100%; margin-top: 8px; }
/* 紺のカードの中の失敗の一言：紺の地で読める白い字（灰の字では読めなかった） */
.find-new .find-panel .flow-error { color: #fff; }
.find-new .find-panel .find-intro { color: #fff; }
.find-new .find-panel .find-intro p { color: var(--fn-sub); }
/* 会社向けの①②（紺のカード）：見出しの下の一言・選んだ条件の行・「細かい業種で選ぶ」を、紺の地で読める灰に（B1・B2 の通し） */
.find-new .find-panel .find-head p,
.find-new .find-panel .find-chosen,
.find-new .find-panel .find-more > summary { color: var(--fn-sub); }
.find-new .find-panel .fn-foot:has(.find-relax) { flex-direction: column; align-items: stretch; }
/* ③の「何を聞いてみますか？」が空のまま聞こうとしたときの一言：押したあとの変化として目に入る、紺の太字に（薄い灰の小さな字では気づかれなかった） */
.ask-product .flow-error { color: var(--brand-12, #16233f); font-weight: 700; }

/* 相手を選ぶカードを閉じる「×」（find.js closeHTML）：画面の右上。①・②・③のどれでも同じ所で、下へ読み進めても上に貼り付いて
   残る（カードの上に置くと、②へ送ったときや③を読み進めたときに画面の外に出た。saito-review 2026-10-29）。押す所は指の下限。
   白い丸に紺の×（顔の壁の上でも、紺のカードや帯の上でも読める形）。下の中身は押し下げない */
/* 「×」の上の余白がページの外へ抜けて、ページごと押し下げないように */
.find-new, .find-new-dist { display: flow-root; }
.find-new > .find-close,
.find-new-dist > .find-close {
  position: sticky;
  top: 8px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin: var(--find-close-top, 8px) 8px calc(-1 * var(--tap) - var(--find-close-top, 8px)) auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #16233f;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(10, 18, 36, .22);
  cursor: pointer;
}
.find-new > .find-close:hover,
.find-new-dist > .find-close:hover { background: #f2c14e; }
/* ①に企画の欄が先に来るとき（find.js cardsOf planFirst）は、企画の一文がカードの見出し（問いの代わり）。問いと同じ明朝・白で、
   長い企画は2行で止める組みのまま（fn-plan-long） */
.fn-plan.fn-plan-big { margin-top: 18px; font-size: 24px; line-height: 1.5; letter-spacing: .02em; color: #fff; font-weight: 700; }
.fn-plan.fn-plan-big .fn-plan-more { font-family: var(--font-sans, inherit); font-weight: 500; }
@media (max-width: 759px) { .fn-plan.fn-plan-big { font-size: 18px; letter-spacing: 0; } }
/* ③の見出しは、右上の「×」の下に字が入らないよう、その分を空ける */
.find-new-dist .pc-head h1 { padding-right: calc(var(--tap) + 8px); }

/* 紺の窓（find.js autoPanelHTML。斉藤さん 2026-11-01 承認、2026-11-02 改訂）：企画の一文・個人向け／会社向け・人数の下に、
   AI が選んだ条件の札（金の地、紺の字。表示だけで押せない。中央にそろえ、折り返す）、主役の「この中の6人に聞く →」
   （いままでの「次へ」と同じ金の大きなボタン。窓の幅いっぱい）、その下に小さく太字の「もっと詳しく選ぶ」 */
.find-new .find-panel .fn-auto-count { margin-top: 18px; }
.fn-auto-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.fn-auto-tags li { padding: 6px 16px; border-radius: 980px; background: var(--fn-gold); color: var(--fn-navy); font-size: 14px; font-weight: 700; line-height: 1.5; }
.fn-auto-go { display: flex; justify-content: center; margin-top: 30px; }
.find-new .find-panel .fn-auto-go .primary { width: 100%; background: var(--fn-gold); color: var(--fn-navy); border: 0; border-radius: 980px; min-height: 52px; padding: 0 34px; font-weight: 700; font-size: 16px; }
.find-new .find-panel .fn-auto-go .primary:disabled { opacity: .6; }
.fn-auto-more { margin: 10px 0 0; text-align: center; }
.find-new .find-panel .fn-auto-more .link { min-height: var(--tap); padding: 0 12px; color: #fff; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.find-new .find-panel .fn-auto-more .link:disabled { opacity: .5; }
@media (max-width: 759px) {
  .fn-auto-tags { margin-top: 22px; gap: 8px; }
  .fn-auto-tags li { padding: 6px 14px; }
  .fn-auto-go { margin-top: 24px; }
}