/*
 * AIコンセプトテスト（public/js/wide.js、有料会員のマーケティング機能。スイッチが入っている人だけ）。survey.css の上に、ない形だけを足す。
 * 値はすべて kosei.css の名前。ボタンは parts.css・buttons.css の部品のまま。画面案は design/marketing/。
 */
.wide h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-5, 40px);
}
.wide section:first-of-type h2 {
  margin-top: var(--space-4);
}
.wide-count,
.wide-kind {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 400;
}
/* 1つか2つか */
.wide-seg {
  display: inline-flex;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
}
.wide-seg label {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  cursor: pointer;
  white-space: nowrap;
}
.wide-seg label + label {
  border-left: 1px solid var(--line-soft);
}
.wide-seg label {
  position: relative;
}
.survey-form .wide-seg input {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.wide-seg label:has(input:checked) {
  background: var(--brand-solid);
  color: var(--brand-on-solid);
  font-weight: 600;
}
.wide-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}
/* 確かめたいこと */
.wide-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-4);
}
.wide-check {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.wide-check input {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 2px 0 0;
  flex: none;
}
.wide-check > span {
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}
.wide-check-text {
  color: var(--text-muted);
  font-size: 0.875rem;
  word-break: auto-phrase;
}
.wide-check.is-fixed {
  cursor: default;
}
.wide-questions li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.wide-questions input {
  flex: 1;
}
.wide-from {
  flex: none;
  width: 5.5em;
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.wide-last {
  margin: var(--space-2) 0 0;
  line-height: 1.7;
  word-break: auto-phrase;
}
/* 結果：表が多いので、読む幅より広く */
.doc.wide.survey-result {
  max-width: 60rem;
}
.wide-cut-table tbody th {
  min-width: 11em;
}
.wide-one {
  grid-template-columns: 1fr;
}
.wide-done {
  margin: var(--space-3) 0 0;
}
.wide-found .survey-points p {
  font-weight: 600;
}
.wide .survey-points li {
  flex-wrap: wrap;
}
.survey-point-text {
  flex: 1 1 18rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.survey-point-text .small-button {
  min-height: 2.75rem;
  vertical-align: middle;
}
.wide .survey-who-faces {
  max-width: 100%;
  flex-wrap: wrap;
}
.wide-found .survey-quote {
  font-weight: 400;
}
.survey-bar.wide-bar-try,
.wide-stack .wide-bar-try,
.wide-legend .wide-bar-try {
  background: var(--brand-11);
}
.survey-bar.wide-bar-maybe,
.wide-stack .wide-bar-maybe,
.wide-legend .wide-bar-maybe {
  background: var(--brand-7);
}
.survey-bar.wide-bar-no,
.wide-stack .wide-bar-no,
.wide-legend .wide-bar-no {
  background: var(--paper-8);
}
.survey-bar.wide-bar-unsure,
.wide-stack .wide-bar-unsure,
.wide-legend .wide-bar-unsure {
  background: var(--paper-4);
}
.wide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}
.wide-chip {
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--paper-1);
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
}
.wide-chip.is-on {
  border-color: var(--brand-solid);
  background: var(--brand-solid);
  color: var(--brand-on-solid);
  font-weight: 600;
}
.wide-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.wide-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wide-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.wide-table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.6;
}
.wide-table th,
.wide-table td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  word-break: auto-phrase;
}
.wide-table thead th {
  padding-top: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}
.wide-table tbody th {
  font-weight: 600;
  min-width: 8em;
}
.wide-n {
  display: block;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}
.wide-num {
  white-space: nowrap;
}
.wide-only-sm {
  display: none !important;
}
.wide-voice {
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.wide-fix {
  font-size: 0.9375rem;
}
.wide-stack-cell {
  width: 30%;
}
.wide-stack {
  display: flex;
  height: 10px;
  margin-top: 7px;
  border-radius: 2px;
  overflow: hidden;
}
.wide-stack > span {
  width: var(--w);
}
.wide-stack-text {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.wide-cut-table tr.is-small .wide-stack {
  opacity: 0.45;
}
.wide-who {
  width: 1%;
  white-space: nowrap;
}
.wide-state {
  margin-right: var(--space-1);
  font-weight: 600;
}
/* 次の一歩 */
.wide-next-row h3,
.wide-next-cards h3 {
  margin: var(--space-2) 0 var(--space-1);
}
.wide-next-row p,
.wide-next-cards p {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  line-height: 1.7;
}
.wide-pick {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.wide-pick li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
}
.wide-pick .survey-person-text {
  flex: 1;
}
.wide-pick .secondary {
  flex: none;
}
.wide-next-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--paper-solid);
}
/* 企画を直す */
.wide-take {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  cursor: pointer;
}
.wide-take input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 3px 0 0;
  flex: none;
}
.wide-take > span {
  display: flex;
  flex-direction: column;
  line-height: 1.7;
}
.wide-take-text {
  font-weight: 600;
}
.wide-improve .survey-points li {
  align-items: center;
}
.wide-improve .survey-form {
  margin-top: var(--space-4);
}
/* 調査票 */
.wide-sheet-doc {
  max-height: none;
}
.wide-sheet-block + .wide-sheet-block {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
}
.wide-edit {
  padding: var(--space-1);
  border-radius: 4px;
  outline: 1px dashed transparent;
}
.wide-edit:hover,
.wide-edit:focus {
  outline-color: var(--line-soft);
}
.wide-edit p {
  margin: var(--space-1) 0;
}
@media (max-width: 700px) {
  .wide-checks,
  .wide-next-cards {
    grid-template-columns: 1fr;
  }
  .wide-seg {
    display: flex;
  }
  .wide-seg label {
    flex: 1;
    justify-content: center;
    padding: 0 var(--space-1);
  }
  .wide-from {
    display: none;
  }
  /* 表は1行ずつの塊に */
  .wide-table thead {
    display: none;
  }
  .wide-table,
  .wide-table tbody,
  .wide-table tr,
  .wide-table th,
  .wide-table td {
    display: block;
    width: auto;
  }
  .wide-table tr {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .wide-table th,
  .wide-table td {
    padding: 2px 0;
    border: 0;
  }
  .wide-table tbody th .wide-n {
    display: inline;
    margin-left: var(--space-1);
  }
  .wide-stops .wide-num {
    display: none;
  }
  .wide-table tbody th .wide-only-sm {
    display: inline !important;
  }
  .wide-who {
    white-space: normal;
  }
  .wide-pick li {
    flex-wrap: wrap;
  }
  .wide-pick .survey-person-text {
    flex: 1 1 calc(100% - 52px);
  }
  .wide-pick .secondary {
    margin-left: 52px;
  }
  .wide-table td[data-label]::before {
    content: attr(data-label) '：';
    color: var(--text-muted);
    font-size: 0.8125rem;
  }
}

.wide .survey-points,
.wide .wide-pick {
  padding-left: 0;
}
.wide h3 {
  font-weight: 600;
}
.wide .survey-plans h2 {
  margin: 0 0 var(--space-1);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
}
.wide-next-cards {
  margin-bottom: var(--space-5, 40px);
}
.wide-next-cards h3 {
  margin-top: 0;
}

.wide-q {
  margin: var(--space-2) 0 var(--space-1);
  font-weight: 600;
}
.wide-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: 0;
  padding-left: var(--space-2) !important;
  list-style: none;
}
.wide-opts li {
  white-space: nowrap;
}
.wide-opts li::before {
  content: '□ ';
  color: var(--text-muted);
}
.wide-then {
  padding-left: var(--space-2);
  color: var(--text-muted);
  word-break: auto-phrase;
}
.wide-count {
  font-family: var(--font-body, inherit);
}

/* 深掘り：続けて聞く問いの候補 */
.wide-suggest {
  margin: var(--space-1) 0 var(--space-2);
}
.wide-suggest p {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.wide-suggest .wide-chips {
  margin: 0;
}
/* 2〜3の案の色（今の AIでA/Bテストと同じ。案Cは3つの案を比べるときだけ） */
.survey-bar.wide-bar-C,
.wide-stack .wide-bar-C,
.wide-legend .wide-bar-C {
  background: var(--brand-12);
}
.survey-bar.wide-bar-A,
.wide-stack .wide-bar-A,
.wide-legend .wide-bar-A {
  background: var(--brand-9);
}
.survey-bar.wide-bar-B,
.wide-stack .wide-bar-B,
.wide-legend .wide-bar-B {
  background: var(--brand-6);
}
.survey-bar.wide-bar-neither,
.wide-stack .wide-bar-neither,
.wide-legend .wide-bar-neither {
  background: var(--paper-8);
}
.wide-next-lead {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
}
.wide-take-add {
  color: var(--text-muted);
  font-size: 0.875rem;
}
.wide-sheet-doc .wide-q {
  margin: var(--space-2) 0 var(--space-1);
  font-weight: 600;
}
.wide-sheet-doc .wide-opt,
.wide-sheet-doc .wide-li {
  margin: 2px 0;
  padding-left: var(--space-2);
}
.wide-sheet-doc:focus {
  outline: 2px solid var(--brand-7);
  outline-offset: 2px;
}
.wide-cut-table .small-button {
  white-space: nowrap;
}

.wide-sheet-doc h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--fs-body);
  font-weight: 700;
}
.wide-sheet-doc h3:first-child {
  margin-top: 0;
}

/* 保存したテストの札：コンセプトテスト・A/Bテスト */
.wide-tag {
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 1px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
/* ③の入口：コンセプトテストと A/Bテストを続けて並べる */
.find-survey.find-concept + .find-survey {
  margin-top: calc(-1 * var(--space-2));
}
/* 当てはまる人が少ないとき（SMALL 未満）の③の案内：ボタンのない、一文だけの箱 */
.find-survey.find-few {
  display: block;
}
/* 対話の画面の横：同じ条件の人たちに聞く道（pool.js）。上限を超えるときの一言は、ボタンの下に */
.side-many {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
}
/* 「調査票を作る」と「Webアンケートで調査する」を並べる（狭いときは折り返す） */
.wide-next-cards .wide-card-go {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

/* 届け方プラン（wide.js reachPageHTML）：上にまとめ（4つの箱と答えた人の言葉）、下に段ごとに開く人数の表 */
.doc.wide.wide-reach {
  max-width: 60rem;
}
.wide-reach-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.wide-reach-boxes {
  display: grid;
  gap: var(--space-3);
}
/* 見て → 信じて → 買う：3つの段を矢印でつなぐ（reach.json の summary の step） */
.wide-reach-boxes .wide-reach-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.wide-reach-step {
  position: relative;
}
.wide-reach-step + .wide-reach-step::before {
  content: '▶';
  position: absolute;
  left: calc(var(--space-4) / -2 - 0.5em);
  top: 50%;
  color: var(--brand-solid);
  font-size: 0.875rem;
  transform: translateY(-50%);
}
.wide-reach-stepname {
  display: inline-block;
  margin-bottom: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--brand-solid);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}
.wide-reach-box {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.wide-reach-box h3 {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
}
.wide-reach-box ol,
.wide-reach-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wide-reach-box li,
.wide-reach-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 4px 0;
}
.wide-reach-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
}
.wide-reach-list {
  max-width: 36rem;
}
.wide-reach-num {
  white-space: nowrap;
}
.wide-reach-num .wide-n {
  display: inline-block;
  min-width: 3.2em;
  margin-left: var(--space-1);
  text-align: right;
}
.wide-reach-words {
  margin-top: var(--space-4);
}
.wide-reach-quote {
  margin: 0 0 var(--space-2);
}
.wide-reach-quote cite {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-style: normal;
}
.wide-reach-quote cite .person-meta {
  display: block;
}
.wide-reach-basis {
  margin: var(--space-3) 0 var(--space-4);
}
.wide-reach-head {
  border-bottom: 1px solid var(--line-soft);
}
.wide-reach-head summary {
  padding: var(--space-3) 0;
  font-weight: 600;
  cursor: pointer;
}
.wide-reach-foot {
  margin-top: var(--space-4);
}
.wide-reach-foot p {
  margin: 0 0 var(--space-1);
}
@media (max-width: 900px) {
  .wide-reach-boxes .wide-reach-flow {
    grid-template-columns: 1fr;
  }
  .wide-reach-step + .wide-reach-step::before {
    content: '▼';
    left: 50%;
    top: calc(var(--space-4) / -2 - 0.5em);
    transform: translateX(-50%);
  }
}
/* PDFで保存：この1枚だけを印刷する（wide.js printReach） */
@media print {
  html[data-reach-printing] .header,
  html[data-reach-printing] footer,
  html[data-reach-printing] .skip,
  html[data-reach-printing] .wide-reach-save,
  html[data-reach-printing] #toast {
    display: none !important;
  }
}