/* 遺言書作成支援サービス（DEMO）の共通スタイル。
   スマホ優先。外部フォント・外部CDNは読み込まない。
   本文16px以上、主な押下領域44px以上、色だけで状態を伝えない（IMPL-003 §6.7）。 */

:root {
  --ink: #1d2328;
  --ink-soft: #4a5560;
  --line: #d3dae0;
  --bg: #f7f9fa;
  --panel: #ffffff;
  --accent: #1f5f8b;
  --accent-ink: #ffffff;
  --warn-bg: #fdf4e3;
  --warn-line: #b8860b;
  --error-bg: #fdeeee;
  --error-line: #a32020;
  --ok-line: #2f6b3a;
  --focus: #b8560b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  z-index: 10;
  background: var(--panel);
  padding: 12px 16px;
  border: 2px solid var(--accent);
}

.demo-banner {
  background: var(--warn-bg);
  border-bottom: 3px solid var(--warn-line);
  color: var(--ink);
  padding: 12px 16px;
  font-weight: 700;
}

.demo-banner .demo-banner__detail {
  display: block;
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-soft);
}

/* 遠隔評価の共通表示（WILL-MVP-01-REMOTE-PILOT-IMPL-001。pilot 以外では出ない） */
.pilot-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
}

.pilot-bar__note {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

.pilot-bar__stop {
  margin: 0;
}

.pilot-stop-link {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--warn-line);
  border-radius: 6px;
  background: var(--warn-bg);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.pilot-stop-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 56px;
}

h1 {
  font-size: 24px;
  line-height: 1.45;
  margin: 8px 0 4px;
}

h2 {
  font-size: 19px;
  margin: 28px 0 8px;
}

.lead {
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 16px;
  margin: 0 0 20px;
}

.progress {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.question-text {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 20px;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 0 20px;
  padding: 12px 14px 16px;
}

legend {
  padding: 0 6px;
  font-weight: 700;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 2px 4px;
}

.choice input[type="radio"],
.choice input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

/* 丸印そのものは小さいので、label を行いっぱいに広げて押しやすくする。
   label と input は for / id で結び付けてあるため、行のどこを押しても選べる。 */
.choice label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-height: 44px;
  cursor: pointer;
}

/* 選択肢の補足は必ず見出しの下へ折り返す。横に並べると狭い画面で
   1 文字ずつに割れて読めなくなる。 */
.choice label .hint {
  flex: 1 0 100%;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.field {
  margin: 0 0 18px;
}

.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.field .hint {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 16px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--ink-soft);
  border-radius: 8px;
}

textarea {
  min-height: 96px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 160px;
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  color: var(--accent-ink);
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 16px;
  font-family: inherit;
  color: var(--accent);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary.btn-strong {
  /* 主ボタンの次に大事な操作（1画面の主ボタンは1つ。UX-001 U8） */
  min-height: 48px;
  font-weight: 700;
  border-width: 2px;
}

.staff-row {
  /* 案内スタッフ（WILL-MVP-01-AI-G11-TRIAL-001）。顔と文字の間を十分に空け、狭い画面・拡大でも重ねない */
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.staff-avatar {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
}

.staff-text {
  flex: 1 1 12em;
  min-width: 0;
}

.staff-text p {
  margin: 0 0 6px;
}

.staff-name {
  font-weight: 700;
}

.sub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

.sub-actions__label {
  width: 100%;
  font-size: 16px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.error-summary {
  background: var(--error-bg);
  border: 2px solid var(--error-line);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 20px;
}

.error-summary h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.error-summary p {
  margin: 0 0 6px;
}

.error-summary .next-step {
  font-weight: 700;
}

.field-error {
  display: block;
  margin-top: 6px;
  margin-bottom: 12px;
  color: var(--error-line);
  font-weight: 700;
}

.field-error::before {
  content: "エラー：";
}

.notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 18px;
}

.notice::before {
  content: "お知らせ：";
  font-weight: 700;
}

.roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.roster-list li {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--panel);
}

.roster-list .label {
  color: var(--ink-soft);
  font-size: 16px;
}

.table-scroll {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  font-size: 16px;
}

.footnote {
  color: var(--ink-soft);
  font-size: 16px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .wrap {
    max-width: 820px;
    padding: 28px 24px 72px;
  }

  h1 {
    font-size: 28px;
  }
}

/* ---------------------------------------------------------------------------
   法務レビュー用の内部画面（WILL-MVP-01-IMPL-006）。
   既存の利用者向け画面のクラスは変更せず、ここから下だけを追記する。
   本文は16px以上、押下領域は44px以上、状態は色だけでなく文字でも示す。 */

.review-banner {
  background: var(--warn-bg);
  border-bottom: 3px solid var(--warn-line);
  color: var(--ink);
  padding: 12px 16px;
  margin: 0;
}

.review-banner__labels {
  display: block;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.review-banner__detail {
  display: block;
  font-size: 16px;
  color: var(--ink-soft);
}

.wrap--wide {
  max-width: 100%;
}

.breadcrumb {
  margin: 0 0 8px;
}

.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.page-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.breadcrumb a,
.card-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 本文へ移動（キーボード用）も 44px を確保する */
.review .skip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}

.review h3 {
  font-size: 17px;
  margin: 24px 0 8px;
}

.kv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

.kv dt {
  font-weight: 700;
  margin-top: 12px;
}

.kv dd {
  margin: 0;
  color: var(--ink);
}

.mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 16px;
  overflow-wrap: anywhere;
}

/* 内部画面では脚注も本文と同じ 16px にする（本文16px未満を作らない） */
.review .footnote {
  font-size: 16px;
}

.check-id {
  display: block;
  color: var(--ink-soft);
}

.counts {
  margin: 0 0 12px;
  padding-left: 1.4em;
}

.note-text {
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* 状態は色だけに頼らない：枠線の形と文字を必ず伴う */
.verdict {
  display: inline-block;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--panel);
}

.verdict--pass {
  border: 2px solid var(--ok-line);
  color: var(--ok-line);
}

.verdict--fail {
  border: 2px solid var(--error-line);
  color: var(--error-line);
}

.verdict--error {
  border: 2px dashed var(--error-line);
  color: var(--error-line);
}

.verdict--not_applicable {
  border: 2px dotted var(--ink-soft);
  color: var(--ink-soft);
}

/* 注意表示（A-03）。狭い幅でも横スクロールや折り畳みなしで全文を読めるよう縦に積む */
.notice-summary {
  margin-bottom: 16px;
}

.notice-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.notice-item {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 6px;
  margin: 0 0 8px;
  padding: 12px;
}

.notice-item p {
  margin: 0 0 4px;
}

.notice-item__id {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.notice-item__meta {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* 期待集合の外の注意は破線、欠落は赤の二重線。色だけでなく線の形と文字で区別する */
.notice-item--outside {
  border-style: dashed;
}

.notice-item--missing {
  border: 3px double var(--error-line);
}

/* 正式レビュー待ち（B-04）。対象外と見分けられるよう二重線にする */
.verdict--pending_formal_review {
  border: 3px double var(--ink-soft);
  color: var(--ink);
}

/* 内部画面の表は本文と同じ 16px。横に広い表は表だけを横スクロールさせる。
   既存の利用者向け画面の表には影響させない（`.review` の中だけ） */
.review table caption {
  text-align: left;
  color: var(--ink-soft);
  font-size: 16px;
  padding-bottom: 6px;
}

.review table th,
.review table td {
  font-size: 16px;
  vertical-align: top;
}

.review table thead th {
  background: #eef2f5;
}

.review table a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.card-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.card-list li {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--panel);
}

.card-list__head {
  font-weight: 700;
  margin: 0 0 6px;
}

.card-list .label {
  color: var(--ink-soft);
  margin: 8px 0 2px;
}

@media (min-width: 900px) {
  .kv {
    grid-template-columns: 16em 1fr;
    column-gap: 16px;
  }

  .kv dt,
  .kv dd {
    margin-top: 8px;
  }
}

/* 狭い画面では、列をつぶして読めなくするより、表の枠の中で横へスクロールさせる。
   ページ自体は横スクロールしない（表は .table-scroll の中にある）。 */
@media (max-width: 899px) {
  .review .table-scroll table {
    min-width: max-content;
  }

  .review .table-scroll th,
  .review .table-scroll td {
    max-width: 18em;
  }

  /* 表の説明は横スクロールで隠れないよう、画面幅のまま左端へ留める */
  .review .table-scroll caption {
    position: sticky;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    padding-right: 32px;
  }
}

/* ---------------------------------------------------------------------------------
   WILL-MVP-01-IMPL-008：S-06〜S-08（判定の保存・最終確認・成果物一覧）
   文字は16px以上、押下領域は44px以上。状態は色だけでなく見出しの文字で区別する。
   --------------------------------------------------------------------------------- */

.result-block {
  border-left-width: 6px;
  border-left-style: solid;
}

.result-block--fix,
.result-block--stop {
  border-left-color: #a61b1b;
}

.result-block--ask,
.result-block--notice {
  border-left-color: #946200;
}

.result-block--ok {
  border-left-color: #1d6b3a;
}

.audit-id {
  color: var(--ink-soft);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 16px;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.confirm-item legend {
  font-size: 19px;
  font-weight: 700;
  padding: 0 4px;
}

.confirm-item h2 {
  font-size: 17px;
}

label.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

label.check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.document-list h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* ---------------------------------------------------------------------------------
   WILL-MVP-01-IMPL-009：S-05W 財産の渡し方の希望（割合の分数入力）
   文字は16px以上、押下領域は44px以上。区分は色ではなく見出しの文字で区別する。
   --------------------------------------------------------------------------------- */

.fraction-group {
  margin-top: 16px;
}

.fraction {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.fraction__part label {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.fraction__part input[type="text"] {
  width: 6em;
  min-height: 44px;
  font-size: 18px;
  text-align: center;
}

.fraction__of {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px;
}

.roster-list .doc-actions .btn-secondary,
.panel > .doc-actions .btn-secondary {
  min-height: 44px;
}

/* WILL-MVP-01-IMPL-010：保管の記録・見直し・削除の画面 */
.link-list {
  margin: 0 0 12px;
  padding-left: 1.2em;
}

.link-list li {
  margin: 6px 0;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.link-list .hint {
  display: block;
  color: var(--ink-soft);
  font-size: 16px;
}

/* WILL-MVP-01-IMPL-011：欄ごとの入力（G-00〜G-61）・未確定事項の一覧（OD-06）・相談用整理票（OD-07） */
.gfield {
  margin: 0 0 22px;
}

.gfield--error {
  border-color: var(--error-line);
  border-width: 2px;
}

.gfield legend .req,
.gfield legend .opt {
  font-weight: 400;
  font-size: 16px;
  margin-left: 4px;
}

.gfield .hint,
.doc-hint,
.field-status {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin: 4px 0 10px;
  overflow-wrap: anywhere;
}

.state-set {
  margin: 8px 0 12px;
  padding: 8px 10px 10px;
}

.state-set legend {
  font-weight: 400;
  font-size: 16px;
}

.summary-list {
  margin: 0;
}

.summary-list__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}

.summary-list dt {
  font-weight: 700;
  flex: 0 0 auto;
}

.summary-list dd {
  margin: 0;
  flex: 1 1 12em;
  overflow-wrap: anywhere;
}

/* 見出し（質問文）が長い一覧では、見出しを1行に取り、答えをその下に置く（狭い画面ではみ出さない） */
.summary-list--wrap dt {
  flex: 1 1 100%;
  overflow-wrap: anywhere;
}

.pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pending-item {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  overflow-wrap: anywhere;
}

.pending-item p {
  margin: 0 0 6px;
}

.pending-item .hint,
.heirs .hint,
.od-band .hint,
.od-list .hint {
  display: block;
  color: var(--ink-soft);
  font-size: 16px;
}

.pending-item__ref {
  color: var(--ink-soft);
  font-size: 16px;
}

.od-band {
  border: 2px solid var(--warn-line);
  background: var(--warn-bg);
}

.heir-group h3 {
  font-size: 17px;
  margin: 16px 0 6px;
}

.heir-group ul {
  margin: 0 0 8px;
  padding-left: 1.2em;
}

.heir-members {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.heir-member {
  border-top: 1px solid var(--line);
  padding: 10px 0;
  overflow-wrap: anywhere;
}

.heir-member--pending {
  border-left: 4px solid var(--warn-line);
  padding-left: 10px;
}

.heir-member__name {
  font-weight: 700;
  margin: 0 0 4px;
}

.heir-member__facts {
  margin: 0;
}

.heir-member__facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

.heir-member__facts dt {
  font-weight: 700;
  flex: 0 0 auto;
}

.heir-member__facts dd {
  margin: 0;
  flex: 1 1 12em;
}

.heir-member__fix {
  margin: 4px 0 0;
}

.heir-badge {
  display: inline-block;
  border: 2px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 4px;
}

.share-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.share-inputs input {
  width: 5em;
}

/* WILL-MVP-01-IMPL-012：G-70 内容確認・G-80 成果物（状態は記号＋文で示し、色だけに頼らない） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

details.block > summary {
  cursor: pointer;
  list-style-position: outside;
}

details.block > summary h2 {
  display: inline;
  font-size: 20px;
}

details.block > summary:focus-visible,
.artifact-fixes > summary:focus-visible {
  outline: 3px solid var(--focus, #1a4fb8);
  outline-offset: 2px;
}

.artifact-card {
  border: 2px solid var(--line);
  border-left-width: 8px;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  overflow-wrap: anywhere;
}

.artifact-card h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.artifact-card--ready {
  border-left-color: var(--ok-line);
}

.artifact-card--draft,
.artifact-card--partial_draft {
  border-left-color: var(--warn-line);
}

.artifact-card--blocked {
  border-left-color: #8b1a1a;
}

.artifact-state {
  font-size: 18px;
  margin: 0 0 6px;
}

.artifact-state__mark {
  display: inline-block;
  min-width: 1.4em;
  font-weight: 700;
}

.artifact-gate {
  border: 2px solid var(--warn-line);
  background: var(--warn-bg);
  padding: 4px 8px;
  border-radius: 4px;
}

.artifact-stale {
  display: inline-block;
  border: 2px solid #8b1a1a;
  color: #8b1a1a;
  padding: 0 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.artifact-fixes {
  margin: 8px 0;
}

.version-table {
  width: 100%;
  border-collapse: collapse;
}

.version-table caption {
  text-align: left;
  font-weight: 700;
  margin: 0 0 6px;
}

.version-table th,
.version-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  vertical-align: top;
  text-align: left;
}

@media print {
  .artifact-gate,
  .artifact-stale,
  .demo-banner {
    display: block !important;
    visibility: visible !important;
  }
}

/* WILL-MVP-01-OWNER-FIX-001：直す欄へ移ったとき・候補の仮の行・評価用見本の表示 */
.focus-target {
  outline: 3px solid #b35900;
  outline-offset: 2px;
}
.candidate-row--open {
  border-left: 4px solid #1a5fb4;
  padding-left: 0.6rem;
}
.candidate-form .field {
  margin-bottom: 0.4rem;
}
.eval-label {
  display: inline-block;
  border: 2px solid #a00;
  color: #a00;
  padding: 0.1rem 0.5rem;
  font-weight: bold;
}

/* CR-001 #6：「いる／いない」の選択に合わせて記入欄を出し分ける（JavaScript を使わない）。
   :has() に対応しないブラウザでは、この規則ごと無視され、記入欄は常に表示される（安全側） */
.reveal:has(.reveal-no:checked) .reveal-target,
.reveal:not(:has(.reveal-yes:checked, .reveal-no:checked)) .reveal-target { display: none; }
/* CR-001 #1：前の画面へ戻る */
.back-link { margin: 0.5rem 0 0; }
.back-link a { font-weight: bold; }
/* CR-001 #7・#8：保存済みの内容を表示だけにする */
.saved-readonly { border-left: 4px solid #0b5; padding: 0.4rem 0.8rem; background: #f4fbf6; white-space: pre-wrap; }
/* CR-001 #17：入力OK */
.input-ok { border: 2px solid #0b5; background: #f4fbf6; }
.input-open { border: 2px solid #c60; background: #fff8f0; }

/* S-01 最初のページ（代表者決定 2026-09-26「資料未確認でも完走・開始画面」§2）。
   大事な一文を最上部に大きく。試用上のお願い（注意の色）と、正式に使うときの案内（落ち着いた色）を見た目で分ける。 */
.s01 { max-width: 720px; margin: 0 auto; }
.s01-kicker { margin: 4px 0 2px; color: var(--ink-soft); font-size: 16px; font-weight: 700; }
.s01-key { font-size: clamp(24px, 6vw, 32px); line-height: 1.45; margin: 4px 0 12px; color: #12505b; }
.s01-lead { font-size: 17px; margin: 0 0 16px; }
.s01-trial { border: 2px solid var(--warn-line); background: var(--warn-bg); border-radius: 12px; padding: 14px 16px; margin: 18px 0 8px; }
.s01-trial h2 { margin: 0 0 6px; font-size: 18px; }
.s01-trial-key { margin: 0 0 8px; }
.s01-trial ul { margin: 0; padding-left: 1.3em; }
.s01-actions { margin: 16px 0 24px; }
.s01-actions .btn-primary { min-width: min(160px, 100%); }
.s01-how ul, .s01-formal ul { padding-left: 1.3em; }
.s01-formal { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 14px 16px; margin: 20px 0; }
.s01-formal h2 { margin: 0 0 6px; font-size: 18px; }
.s01-formal-scope { color: var(--ink-soft); font-size: 16px; margin: 0 0 8px; }
.s01-docs { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 8px; }
.s01-docs summary { cursor: pointer; font-weight: 700; min-height: 44px; padding: 10px 0; }
.s01-docs summary::after { content: "（開いて読む）"; font-weight: 400; color: var(--ink-soft); font-size: 16px; }
.s01-docs[open] summary::after { content: "（閉じる）"; }
.s01-docs summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.s01-docs-note { color: var(--ink-soft); font-size: 16px; margin: 6px 0 0; }

/* 入力内容の確認・いまの状態（代表者方針 2026-09-26・試用1回目 ③） */
.entered-list dd { overflow-wrap: anywhere; }
.entered-status { display: block; color: var(--ink-soft); font-size: 16px; }
.state-list { list-style: none; padding-left: 0; margin: 0; }
.state-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.state-list li:last-child { border-bottom: 0; }
.next-list { padding-left: 1.2em; }

/* 狭い画面・文字拡大（320px・200% など）で、長い見出し（「希望：土地（…）」など）がはみ出さないよう、見出しも折り返す */
.summary-list dt,
.heir-member__facts dt {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 文字拡大（200% など）で画面の幅が 160px 前後になっても、主なボタンがはみ出さないよう、最小幅を画面の幅までに抑え、文字を折り返す */
.btn-primary {
  min-width: min(160px, 100%);
  max-width: 100%;
  white-space: normal;
}