/* =============================================================
 * 病棟→訪問看護 年収差シミュレーター
 *
 * 配色トークンは既存の css/style.css と同じ値をここに再定義している。
 * 共有ファイルにすると片方の調整がもう片方の表示を壊すため、
 * 意図的に独立させている（既存の訪問リハツールには一切影響しない）。
 *
 * 白／薄グレー／薄緑／濃緑のみ。黄色・グラデーション・人物イラストは使わない。
 * ============================================================= */

:root {
  --ink:        #16232b;
  --ink-soft:   #42535c;
  --ink-weak:   #6b7a82;
  --line:       #e0e4e0;
  --line-soft:  #ecefea;
  --bg:         #ffffff;
  --surface:    #f8f8f4;
  --hero-bg:    #fcfbf7;
  --brand:      #0b6b62;
  --brand-ink:  #08514a;
  --brand-soft: #e6f2f0;
  --brand-line: #b9dbd6;
  /* マイナスは赤で見せる（本人の指示・2026-08-25）。
     色でだけ伝え、コピーには「損」を使わない。ASPの禁止表現のため。 */
  --minus-bg:   #fdeceb;
  --minus-line: #f2c8c3;
  --minus-ink:  #b3261e;
  --minus-bar:  #d4685c;
}

* { box-sizing: border-box; }

/* hidden を必ず効かせる。以降どのクラスに display を足しても壊れないように。 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
               Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
}

.container { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 16px; }

a { color: var(--brand-ink); }

.sp-only { display: inline; }

/* ---------- topbar ---------- */
.topbar { border-bottom: 1px solid var(--line); background: var(--bg); }
.topbar-home {
  display: inline-block; padding: 10px 0;
  font-size: 13px; font-weight: 700;
  color: var(--brand-ink); text-decoration: none; letter-spacing: .02em;
}

/* ---------- hero ---------- */
.hero {
  background: var(--hero-bg);
  border-bottom: 1px solid var(--line);
  padding: 22px 0 20px;
}
.hero-kicker {
  margin: 0 0 8px;
  font-size: 12.5px; font-weight: 700;
  color: var(--brand-ink); letter-spacing: .01em;
}
.hero h1 {
  margin: 0 0 10px;
  font-size: 25px; line-height: 1.4; letter-spacing: -.01em;
}
.hero .lead { margin: 0 0 6px; font-size: 14.5px; color: var(--ink-soft); }
.lead-sub { margin: 0; font-size: 13px; color: var(--ink-weak); }

/* ---------- section ---------- */
.sec { margin: 30px 0; }
.sec h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.45; letter-spacing: -.01em; }
.sec-note { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.card h3 { margin: 20px 0 10px; font-size: 15px; color: var(--brand-ink); }
.card h3:first-child { margin-top: 0; }

/* ---------- form ---------- */
.field { margin: 0 0 20px; padding: 0; border: 0; }
.field:last-child { margin-bottom: 0; }

.field > label,
.field > legend,
.inner-field > label {
  display: block; margin: 0 0 6px; padding: 0;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.inner-field { margin-bottom: 14px; }
.inner-field:last-child { margin-bottom: 0; }

.req {
  margin-left: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--brand-ink); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: 4px; padding: 1px 6px;
}
.hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-weak); }
.hint-top { margin: 0 0 10px; }
.sub-label { margin: 10px 0 5px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.sub { margin-top: 10px; }

.money { position: relative; display: block; }
.money input {
  width: 100%; height: 46px;
  padding: 0 40px 0 12px;
  font-size: 16px;         /* 16px 未満だと iOS で自動ズームされるので下げない */
  font-family: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; text-align: right;
}
.money input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.money input::placeholder { color: #a9b4ba; font-size: 12.5px; }
.money input.is-missing { border-color: var(--brand); background: var(--brand-soft); }
.unit {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--ink-weak); pointer-events: none;
}

.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.times { font-size: 14px; color: var(--ink-weak); }

.radios { display: flex; flex-wrap: wrap; gap: 6px; }
.radios-block { flex-direction: column; align-items: stretch; }
.radios label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; cursor: pointer;
  min-height: 40px;                 /* 指で押しやすい高さ */
}
.radios input { accent-color: var(--brand); margin: 0; width: 18px; height: 18px; }

.sel {
  width: 100%; height: 44px;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 0 10px;
}
.sel:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sel-wide { width: 100%; }

/* オンコールの3行 */
.oc-row {
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.oc-row:first-of-type { border-top: 0; padding-top: 0; }
.oc-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.oc-pair { margin-top: 8px; }

/* ---------- 比較ボタン ---------- */
.run-sec { margin: 26px 0; }
.run {
  display: block; width: 100%;
  font-family: inherit; font-size: 17px; font-weight: 700;
  color: #fff; background: var(--brand-ink);
  border: 0; border-radius: 10px; padding: 16px 14px; cursor: pointer;
}
.run:active { transform: translateY(1px); }
.run-msg {
  margin: 10px 0 0; padding: 10px 12px;
  font-size: 13px; line-height: 1.7;
  color: var(--brand-ink); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: 8px;
}
.reset-row { margin: 12px 0 0; text-align: right; }
.btn-ghost {
  font-family: inherit; font-size: 12.5px; color: var(--ink-weak);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 2px 0; cursor: pointer;
}

/* ---------- 結果 ---------- */
.sum-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-bottom: 14px; }
.sum-col { text-align: center; min-width: 0; }
.sum-label { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--ink-weak); }
.sum-yen {
  margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35;
  font-feature-settings: "tnum"; overflow-wrap: anywhere;
}
.sum-arrow { font-size: 16px; color: var(--ink-weak); }

.diff-box {
  border-radius: 10px; padding: 14px 12px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
}
.diff-box.is-plus  { background: var(--brand-soft); border-color: var(--brand-line); }
.diff-box.is-minus { background: var(--minus-bg);   border-color: var(--minus-line); }
.diff-label { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.diff-yen {
  margin: 0; font-size: 29px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.02em; font-feature-settings: "tnum"; overflow-wrap: anywhere;
}
.diff-box.is-plus  .diff-yen { color: var(--brand-ink); }
.diff-box.is-minus .diff-yen { color: var(--minus-ink); }
.diff-month { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.sum-foot { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-weak); text-align: center; }

/* ---------- 内訳 ---------- */
.bd-list { margin: 0; padding: 0; list-style: none; }
.bd-list li { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.bd-list li:last-child { border-bottom: 0; }
.bd-head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.bd-name { font-size: 13.5px; color: var(--ink-soft); }
.bd-flag {
  display: inline-block; margin-left: 6px;
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 5px;
}
.bd-val {
  font-size: 14px; font-weight: 700;
  font-feature-settings: "tnum"; white-space: nowrap;
}
.bd-val.is-plus  { color: var(--brand-ink); }
.bd-val.is-minus { color: var(--minus-ink); }
.bd-val.is-zero  { color: var(--ink-weak); font-weight: 400; }

.bar-track { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.bar { display: block; height: 100%; border-radius: 3px; }
.bar-plus  { background: var(--brand); }
.bar-minus { background: var(--minus-bar); }
.bar-zero  { background: transparent; }

.bd-total { border-top: 2px solid var(--line) !important; margin-top: 4px; padding-top: 12px !important; }
.bd-total .bd-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.bd-total .bd-head { margin-bottom: 0; }
.bd-check { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-weak); }

.holiday-line { margin: 0; font-size: 15px; font-weight: 700; }

/* ---------- 未確認 ---------- */
.uk-list { margin: 0; padding: 0; list-style: none; }
.uk {
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.6;
}
.uk:last-child { border-bottom: 0; }
.uk-side {
  display: inline-block; margin-right: 8px; min-width: 40px; text-align: center;
  font-size: 11px; font-weight: 700; color: var(--brand-ink);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: 4px; padding: 1px 6px;
}

/* ---------- CTA ---------- */
.cta-sec { margin: 26px 0; }
.pr-label {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 700; color: var(--ink-weak); letter-spacing: .04em;
}
.cta {
  display: block; width: 100%;
  font-family: inherit; font-size: 17px; font-weight: 700;
  color: #fff; background: var(--brand);
  border: 0; border-radius: 10px; padding: 16px 14px; line-height: 1.45;
  cursor: pointer; transition: background .12s ease;
}
.cta:hover { background: var(--brand-ink); }
.cta:active { transform: translateY(1px); }
.cta-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-weak); }
.cta-status {
  margin: 8px 0 0; padding: 9px 11px;
  font-size: 13px; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}

/* ---------- 参考データの表 ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td {
  padding: 8px 10px; border-bottom: 1px solid var(--line-soft);
  text-align: right; white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { font-size: 12px; color: var(--ink-weak); background: var(--surface); }
.tbl-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-weak); }
.ref-tag {
  display: inline-block; margin-left: 6px;
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 6px;
}

/* ---------- 文章 ---------- */
.prose p { margin: 0 0 10px; font-size: 14px; line-height: 1.8; }
.prose p:last-child { margin-bottom: 0; }
.prose.small p, .prose.small li { font-size: 13px; }
.calc-formula {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px;
  font-size: 12.5px !important; line-height: 1.9 !important;
  overflow-x: auto;
}
.note-list { margin: 0; padding-left: 1.15em; }
.note-list li { margin-bottom: 8px; line-height: 1.75; font-size: 14px; }
.note-list li:last-child { margin-bottom: 0; }
.src-line { font-weight: 700; }

/* ---------- footer ---------- */
.site-foot {
  margin-top: 36px; padding: 18px 0 28px;
  border-top: 1px solid var(--line); background: var(--surface);
}
.site-foot p { margin: 0; font-size: 12.5px; color: var(--ink-weak); }

/* ---------- ほかの職種のツール（フッター内） ----------
   既存の訪問リハ側 css/style.css と同じ見た目にそろえてある。
   共有ファイルにはしない（片方の調整でもう片方が壊れるため）。 */
#other-tools-section { margin: 4px 0 16px; }
.other-tools-h { margin: 0 0 12px; font-size: 18px; line-height: 1.45; color: var(--ink); }
.tool-card {
  display: block;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
}
.tool-card:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.tool-card-tag {
  display: inline-block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-ink); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: 5px; padding: 2px 8px;
}
.tool-card-title {
  display: block; margin-bottom: 4px;
  font-size: 15.5px; font-weight: 700; line-height: 1.5; color: var(--brand-ink);
}
.tool-card-desc { display: block; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- PC ---------- */
@media (min-width: 768px) {
  .container { max-width: 760px; padding: 0 24px; }
  .other-tools-h { font-size: 20px; }
  .tool-card { padding: 16px 18px; }
  .sp-only { display: none; }
  .hero { padding: 34px 0 30px; }
  .hero h1 { font-size: 32px; }
  .hero .lead { font-size: 15.5px; }
  .sec { margin: 40px 0; }
  .sec h2 { font-size: 22px; }
  .card { padding: 20px; }
  .sum-yen { font-size: 22px; }
  .diff-yen { font-size: 36px; }
  .oc-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px 12px; align-items: center; }
  .oc-label { margin: 0; }
  .oc-pair { grid-column: 2; margin-top: 0; }
}

/* =============================================================
 * 1タップ比較まわり（2026-08-25 追加）
 * 上の既存ルールには手を入れていない。
 * ============================================================= */

:root {
  --fig-bg:   #f3efe4;
  --fig-line: #d8d2c2;
}

/* ---------- ヘッダー ---------- */
.hero-top { display: flex; align-items: flex-start; gap: 12px; }
.hero-words { flex: 1 1 auto; min-width: 0; }
.hero-figure {
  flex: 0 0 auto;
  width: 116px; height: auto;
  margin-top: 2px;
}
.hero h1 { margin-bottom: 8px; }
.hero .lead strong { color: var(--brand-ink); }

/* ---------- 冒頭の事実カード ---------- */
.fact-card {
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 26px;
}
.fact-lead { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-soft); }
.fact-main { margin: 0 0 8px; font-size: 16px; line-height: 1.7; font-weight: 700; }
.fact-main strong { font-size: 20px; color: var(--brand-ink); }
.fact-main em { font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.fact-sub { margin: 0 0 10px; font-size: 14.5px; line-height: 1.75; }
.fact-sub strong { color: var(--brand-ink); }
.fact-point {
  margin: 0 0 8px; padding-top: 10px;
  border-top: 1px solid var(--brand-line);
  font-size: 15px; line-height: 1.7; font-weight: 700;
}
.fact-note { margin: 0; font-size: 11.5px; color: var(--ink-weak); }

/* ---------- 夜勤回数のチップ ---------- */
.chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.chip {
  font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 62px; padding: 6px 2px;
  background: var(--bg); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.chip b { font-size: 21px; line-height: 1.2; color: var(--ink); }
.chip span { font-size: 11px; margin-top: 2px; }
.chip:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.chip.is-on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.chip.is-on b { color: #fff; }

/* ---------- 1タップの結果 ---------- */
.q-card { padding-bottom: 16px; }
.q-swap {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px; margin-bottom: 14px;
}
.q-side { text-align: center; min-width: 0; }
.q-label { margin: 0 0 3px; font-size: 11.5px; font-weight: 700; color: var(--ink-weak); }
.q-yen {
  margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3;
  font-feature-settings: "tnum"; overflow-wrap: anywhere;
}
.q-sub { margin: 3px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-weak); }
.q-arrow { font-size: 17px; color: var(--ink-weak); }

.q-verdict {
  margin: 12px 0 0; padding: 11px 12px;
  font-size: 14px; line-height: 1.7; font-weight: 700;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.q-fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--ink-weak); }

.q-own { margin-top: 12px; }
.q-own > summary {
  font-size: 12.5px; color: var(--ink-weak);
  cursor: pointer; padding: 4px 0;
}
.q-own[open] > summary { margin-bottom: 8px; }

/* ---------- オンコールの内訳（提示） ---------- */
.oc-facts { margin: 0; padding: 0; list-style: none; }
.oc-facts li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2px 10px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.ocf-name { font-size: 14px; font-weight: 700; }
.ocf-val { font-size: 12.5px; color: var(--ink-weak); grid-column: 1; }
.ocf-sum {
  grid-column: 2; grid-row: 1 / span 2;
  font-size: 15px; font-weight: 700; color: var(--brand-ink);
  font-feature-settings: "tnum"; white-space: nowrap; align-self: center;
}
.oc-total {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 2px solid var(--line);
  font-size: 14px; text-align: right;
}
.oc-total strong { font-size: 19px; color: var(--brand-ink); font-feature-settings: "tnum"; }
.oc-caution {
  margin: 12px 0 0; padding: 11px 12px;
  font-size: 13px; line-height: 1.75;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}

/* ---------- 詳細フォームの折りたたみ ---------- */
details.more {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  margin: 30px 0;
  background: var(--surface);
}
details.more > summary {
  padding: 15px 0; cursor: pointer; list-style: none;
  display: flex; flex-direction: column; gap: 3px;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary b {
  font-size: 15px; color: var(--brand-ink);
}
details.more > summary b::after { content: " ＋"; font-weight: 400; }
details.more[open] > summary b::after { content: " －"; }
details.more > summary span { font-size: 12.5px; color: var(--ink-weak); line-height: 1.6; }
details.more[open] { background: var(--bg); }
details.more[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }

/* ---------- PC ---------- */
@media (min-width: 768px) {
  .hero-figure { width: 150px; }
  .fact-main { font-size: 18px; }
  .fact-main strong { font-size: 24px; }
  .chips { grid-template-columns: repeat(7, 1fr); }
  .q-yen { font-size: 23px; }
}

/* ---------- 夜勤1回の手当（タップの次に聞く唯一の入力） ---------- */
.fee-ask {
  background: var(--bg);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.fee-ask > label {
  display: block; margin: 0 0 8px;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.fee-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-weak); }
.fee-note b { color: var(--brand-ink); }

/* マイナスの数字は赤。プラスは濃緑。符号も必ず併記している。 */
.q-yen.is-minus { color: var(--minus-ink); }

/* 答えの正確な額（大きい数字の下に小さく添える） */
.diff-exact { margin: 2px 0 0; font-size: 12px; color: var(--ink-weak); font-feature-settings: "tnum"; }

/* 未確認リストを「？」で軽く見せる */
.uk b { display: block; font-size: 14.5px; }
.uk-why { display: block; font-size: 12.5px; line-height: 1.6; color: var(--ink-weak); margin-top: 1px; }
.uk { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: start; }
.uk .uk-side { min-width: 24px; }
.uk b, .uk .uk-why { grid-column: 2; }

@media (min-width: 768px) {
  .howto { gap: 18px; padding: 14px; }
  .howto-res { font-size: 16px; }
}

/* =============================================================
 * H1の見せ方
 * 手動の <br> は端末幅によって変な位置で折り返すため使わない。
 * 前置きと問いを別の行にして、幅が変わっても同じ形で読ませる。
 * ============================================================= */
.hero h1 { margin: 0 0 10px; font-size: inherit; letter-spacing: -.01em; }
.h1-sub {
  display: block; margin-bottom: 1px;
  font-size: 15px; font-weight: 700; color: var(--ink-soft);
}
.h1-main {
  display: block;
  font-size: 27px; line-height: 1.3; font-weight: 700;
  color: var(--brand-ink);
  /* 日本語は単語の切れ目が無いので、途中で切らせない指定を添える */
  word-break: keep-all; overflow-wrap: break-word;
}
@media (min-width: 768px) {
  .h1-sub  { font-size: 17px; }
  .h1-main { font-size: 36px; }
}

/* =============================================================
 * ヘッダーの整え直し（2026-08-25）
 * 箱を重ねると安っぽくなるので、主役はH1ひとつだけにする。
 * 所要時間は hero-meta の小さなラベルで伝える。
 * ============================================================= */
.hero { padding: 26px 0 22px; }
.hero-kicker { margin-bottom: 10px; }
.hero h1 { margin: 0 0 12px; }
.h1-sub { font-size: 15px; margin-bottom: 3px; }
.h1-main {
  font-size: 32px; line-height: 1.22; letter-spacing: -.02em;
  color: var(--brand-ink);
}
.hero .lead { margin: 0 0 14px; font-size: 14.5px; }

/* 判定文をこのページの主役の一言として立てる */
.q-verdict {
  margin: 14px 0 0; padding: 13px 14px;
  font-size: 15px; line-height: 1.7; font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 0; border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0;
}

/* CTAの前に置く「なぜ確認する価値があるか」 */
.cta-reason {
  margin: 0 0 12px;
  font-size: 13.5px; line-height: 1.8; color: var(--ink-soft);
}

@media (min-width: 768px) {
  .hero { padding: 40px 0 34px; }
  .h1-sub  { font-size: 17px; }
  .h1-main { font-size: 44px; }
  .hero .lead { font-size: 16px; }
  .q-verdict { font-size: 16px; }
}

/* 判定文（主文＋補足の2行） */
.qv-main {
  margin: 0; font-size: 15.5px; line-height: 1.65; font-weight: 700; color: var(--ink);
}
.qv-sub {
  margin: 6px 0 0; font-size: 13px; line-height: 1.75; font-weight: 400; color: var(--ink-soft);
}
@media (min-width: 768px) {
  .qv-main { font-size: 17px; }
  .qv-sub  { font-size: 13.5px; }
}

/* =============================================================
 * ヘッダーを2色にする（2026-08-25）
 * 濃緑の面に白抜き。使う色は濃緑と白の2つ、
 * 「上がる？」だけ薄緑にして対比を作る。
 * グラデーションは使わない。
 * ============================================================= */
:root { --on-dark: #ffffff; --on-dark-soft: #bcdad5; }

.hero {
  background: var(--brand-ink);
  border-bottom: 0;
  color: var(--on-dark);
}
.hero-kicker { color: var(--on-dark-soft); }
.h1-sub      { color: var(--on-dark-soft); }
.h1-main     { color: var(--on-dark); }
.h1-main em  { font-style: normal; }
.h1-main .up   { color: var(--brand-line); }
.h1-main .down { color: var(--on-dark); }
.hero .lead  { color: var(--on-dark-soft); }

.hero-meta li {
  color: var(--on-dark-soft);
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
}
.hero-meta .is-primary {
  color: var(--brand-ink);
  background: var(--on-dark);
  border-color: var(--on-dark);
}

/* =============================================================
 * 事実カードの数字（2026-08-25 作り直し）
 * 数字を文の途中に置くと折り返しで左に落ち、目線が往復して疲れる。
 * ラベルを左・数字を右にそろえ、縦1列で読めるようにする。
 * ============================================================= */
.fact-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }

.fact-stats {
  background: var(--bg);
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.fs-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.fs-row:last-child { border-bottom: 0; }
.fs-label {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  line-height: 1.4;
}
.fs-label span {
  display: block; font-size: 11px; font-weight: 400; color: var(--ink-weak);
  margin-top: 1px;
}
.fs-num {
  font-size: 20px; font-weight: 700; white-space: nowrap;
  font-feature-settings: "tnum"; color: var(--ink-soft);
}
.fs-num.is-down { font-size: 24px; color: var(--minus-ink); }

.fact-point { margin: 0 0 8px; font-size: 15px; line-height: 1.75; font-weight: 700; padding-top: 0; border-top: 0; }

@media (min-width: 768px) {
  .fs-num { font-size: 22px; }
  .fs-num.is-down { font-size: 27px; }
  .fact-point { font-size: 16px; }
}

/* =============================================================
 * 視線を縦に通す（2026-08-25）
 *
 * ラベルを左・数字を右に置くと、行ごとに目が左右へ往復する。
 * ラベルは数字の上に小さく置き、どちらも左揃えにして、
 * 上から下へ読むだけで終わるようにする。
 * ============================================================= */

/* --- 事実カードの数字 --- */
.fact-stats { padding: 6px 14px; }
.fs-row {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.fs-row:last-child { border-bottom: 0; }
.fs-label {
  display: block; margin-bottom: 2px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.4;
}
.fs-label span {
  display: inline; margin: 0 0 0 4px;
  font-size: 11px; font-weight: 400; color: var(--ink-weak);
}
.fs-num {
  display: block; text-align: left;
  font-size: 22px; font-weight: 700; line-height: 1.25;
  font-feature-settings: "tnum"; color: var(--ink-soft);
}
.fs-num.is-down { font-size: 30px; color: var(--minus-ink); }

/* --- 夜勤 → オンコール の縦積み --- */
.q-swap { display: block; margin-bottom: 4px; }
.q-side { text-align: left; padding: 2px 0; }
.q-label { margin: 0 0 1px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.q-yen { font-size: 26px; line-height: 1.25; }
.q-sub { margin: 1px 0 0; }
.q-arrow {
  display: block; text-align: left; padding-left: 6px;
  font-size: 18px; line-height: 1.2; color: var(--brand-line);
}

/* --- オンコール内訳は1行に収める --- */
.oc-facts li { display: block; padding: 9px 0; }
.ocf-name { font-size: 14px; font-weight: 700; margin-right: 8px; }
.ocf-val  { font-size: 12.5px; color: var(--ink-weak); margin-right: 6px; }
.ocf-sum  {
  font-size: 14.5px; font-weight: 700; color: var(--brand-ink);
  font-feature-settings: "tnum"; white-space: nowrap;
}
.oc-total { text-align: left; }

/* --- 未確認リストも縦に --- */
.uk { display: block; }
.uk .uk-side { margin-bottom: 2px; }

@media (min-width: 768px) {
  .fs-num { font-size: 24px; }
  .fs-num.is-down { font-size: 34px; }
  .q-yen { font-size: 30px; }
}

/* =============================================================
 * 左端をひとつに揃える（2026-08-25）
 * 入れ子の箱に padding があると、読む行の左端が数十px ずれる。
 * わずかでも段差があると視線が左右に振れるので、
 * 結果ブロックの中は全部おなじ左端にそろえる。
 * 区切りは箱ではなく罫線で表す。
 * ============================================================= */
.fact-stats {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--brand-line);
  border-bottom: 1px solid var(--brand-line);
  border-radius: 0;
  padding: 2px 0;
  margin-bottom: 14px;
}

.uk-list { padding-left: 0; }
.uk { padding: 11px 0; margin-left: 0; }
.uk .uk-side { margin-left: 0; }
.uk b, .uk .uk-why { margin-left: 0; }

/* 判定文（このページの結論）は目立たせたいが、左に字下げすると
   そこだけ視線が右へ振れる。強調は上の罫線と文字の大きさで作り、
   左端はほかの行と同じ位置に置く。 */
.q-verdict {
  padding: 14px 0 0;
  border-left: 0;
  border-top: 2px solid var(--brand);
  border-radius: 0;
  background: transparent;
}

/* 答えの箱。中央揃えにすると、そこだけ文字の左端がずれて視線が振れる。
   箱をカードの内側 padding のぶんだけ外へ広げ、文字は他の行と同じ左端に置く。
   強調は背景色と文字の大きさで作る。 */
.diff-box {
  text-align: left;
  margin-left: -12px;
  margin-right: -12px;
  padding: 14px 12px;
}
.diff-label { margin-bottom: 1px; }
.diff-exact { margin-top: 2px; }
.diff-month { margin-top: 6px; }

@media (min-width: 768px) {
  .diff-box { margin-left: -14px; margin-right: -14px; padding: 16px 14px; }
}

/* =============================================================
 * ヘッダーのラベル（2026-08-25 作り直し）
 *
 * このページには .hero-meta の土台のCSSが無く、素の <ul> として
 * 箇条書きで表示されていた。前のページからHTMLだけを持ってきて
 * スタイルを持ってこなかったのが原因。ここで定義しなおす。
 *
 * 濃緑の面の上なので、白と薄緑の2つで組む。
 * 押せそうに見えすぎると誤解を生むので、影や矢印は付けない。
 * ============================================================= */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-meta li {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--brand-ink);
  background: var(--brand-line);
  border: 0;
  border-radius: 999px;
}
.hero-meta .is-primary {
  color: var(--brand-ink);
  background: var(--on-dark);
}

@media (min-width: 768px) {
  .hero-meta li { font-size: 14px; padding: 10px 20px; }
}

/* =============================================================
 * オンコール内訳の割合バー
 * 文字が3行並んでいるだけだと「待機が大半」という事実が読み取れない。
 * 行の下にバーを敷いて、長さで一目で分かるようにする。
 * バーは左端をそろえて置き、視線が縦に落ちるようにする。
 * ============================================================= */
.oc-facts li { padding: 11px 0; }
.ocf-track {
  display: flex; align-items: center; gap: 8px;
  margin-top: 7px;
}
.ocf-bar {
  display: block; height: 8px; border-radius: 4px;
  background: var(--brand-line); min-width: 4px;
}
.ocf-bar.is-lead { background: var(--brand); }
.ocf-pct {
  font-size: 11.5px; font-weight: 700; color: var(--ink-weak);
  font-feature-settings: "tnum"; white-space: nowrap;
}

.oc-point {
  margin: 10px 0 0; padding-top: 12px;
  border-top: 2px solid var(--brand);
  font-size: 14.5px; line-height: 1.7; font-weight: 700; color: var(--ink);
}

@media (min-width: 768px) {
  .oc-point { font-size: 15.5px; }
}

/* ヘッダー右下のマーク（訪問看護＝家＋脈）。
   装飾なので読み上げ対象から外し、クリックも拾わせない。
   主張させたくないので不透明度で沈める。 */
.hero .container { position: relative; }
.hero-mark {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 68px;
  height: auto;
  color: var(--on-dark);
  opacity: .15;
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-mark { width: 104px; bottom: 4px; opacity: .13; }
}

/* right:0 は .container の padding の外側を指すため、画面の端に張り付く。
   本文の左右端と同じ位置に置き直す。 */
.hero-mark { right: 16px; }
@media (min-width: 768px) { .hero-mark { right: 24px; } }

/* =============================================================
 * 見出しを見出しとして分からせる（2026-08-25）
 *
 * 左に縦線を入れると本文より文字が右へずれ、そこで視線が振れる。
 * 目印は「上」に置き、文字の左端は他の行とそろえたままにする。
 * ============================================================= */
.sec h2 {
  position: relative;
  margin: 0 0 10px;
  padding-top: 15px;
  font-size: 20px;
  line-height: 1.45;
  color: var(--brand-ink);
}
.sec h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: var(--brand);
}

/* カードの中の小見出しは、下の細い罫で区切る（こちらも字下げしない） */
.card h3 {
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--brand-ink);
}
.card h3:first-child { margin-top: 0; }

@media (min-width: 768px) {
  .sec h2 { font-size: 23px; padding-top: 17px; }
  .sec h2::before { width: 40px; }
  .card h3 { font-size: 16px; }
}

/* 見出しのすぐ下に本文が来ると詰まって見える。
   見出しと本文のあいだに、少し息継ぎを入れる。 */
.sec h2 { margin-bottom: 18px; }
.card h3 { margin-bottom: 16px; }

@media (min-width: 768px) {
  .sec h2 { margin-bottom: 22px; }
  .card h3 { margin-bottom: 18px; }
}

/* =============================================================
 * 日本語の折り返しを自然にする（2026-08-25）
 *
 * 実測すると、最終行に「ます」「た。」「金」だけが残る箇所が9つあった。
 * 日本語は単語の切れ目が無いので、ブラウザ既定だと文字数で機械的に折る。
 *
 *   text-wrap: balance     … 見出しの行の長さをそろえる（1文字だけ残さない）
 *   text-wrap: pretty      … 本文の最終行が極端に短くなるのを避ける
 *   word-break: auto-phrase … 文節の切れ目で折る（日本語向け）
 *
 * いずれも対応していないブラウザでは、単に無視されて従来の折り返しになる。
 * 表示が壊れることはない。
 * ============================================================= */
h1, h2,
.card h3,
.qv-main,
.fact-point,
.oc-point,
.fact-main {
  text-wrap: balance;
  word-break: auto-phrase;
}

p, li,
.sec-note,
.hint, .fee-note,
.cta-note, .cta-reason,
.tbl-note, .q-fine,
.uk b, .uk-why,
.qv-sub,
.oc-caution,
.fact-lead {
  text-wrap: pretty;
  word-break: auto-phrase;
}

/* 「参考値」のラベルが単独で最終行に落ちないよう、直前の文と離さない */
.ref-tag { margin-left: 6px; }

/* =============================================================
 * 読みやすさの底上げ（2026-08-25）
 *
 * 実測したところ、11px の文字が3か所、行間が 1.4〜1.65 と詰まった
 * 小さい文字が7か所あった。疲れた読者が読む前提なので、
 * 本文まわりは 12px 以上・行間 1.7 以上にそろえる。
 * 数字と見出しは詰めてよいので対象外。
 * ============================================================= */
.q-sub,
.ref-tag,
.uk-side {
  font-size: 12px;
  line-height: 1.7;
}

.q-fine {
  font-size: 12.5px;
  line-height: 1.8;
}

.hint,
.fee-note,
.uk-why,
.cta-note {
  line-height: 1.8;
}

.fs-label { line-height: 1.6; }
.uk b     { line-height: 1.7; }
.qv-main  { line-height: 1.72; }

/* =============================================================
 * PCでの1行の長さを抑える（2026-08-25）
 *
 * 1280px で実測すると、1行51文字の行が10本あった。
 * 日本語は1行35〜45字あたりが読みやすく、それを超えると
 * 行を目で追い直すのに負荷がかかる。
 *
 * 日本語では 1em がほぼ全角1文字なので、em で上限を決める。
 * カードや区切り線の幅は変えず、本文だけを絞る。
 * スマホでは1行25字前後なので、この指定は効かせない。
 * ============================================================= */
@media (min-width: 768px) {
  .sec-note,
  .fact-lead,
  .qv-main,
  .qv-sub,
  .oc-caution,
  .oc-point,
  .cta-reason,
  .cta-note,
  .hint,
  .fee-note,
  .q-fine,
  .tbl-note,
  .uk-why,
  .prose p,
  .note-list li {
    max-width: 40em;
  }
}

/* =============================================================
 * 夜勤手当とオンコールの比較バー（2026-08-25）
 *
 * 金額だけだと大小が頭に入りにくい。長いほうを100%にして
 * もう一方を比率で描き、回数を選び直すと幅が動くようにする。
 * 動きを減らす設定にしている人には、アニメーションを出さない。
 * ============================================================= */
.q-bar-track {
  height: 10px;
  margin: 6px 0 4px;
  background: var(--line-soft);
  border-radius: 5px;
  overflow: hidden;
}
.q-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 5px;
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
.q-bar-night  { background: var(--minus-ink); }
.q-bar-oncall { background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .q-bar { transition: none; }
}

/* CTAの上のマイクロコピー */
.cta-micro { margin: 0 0 12px; padding: 0; list-style: none; }
.cta-micro li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.cta-micro li:last-child { margin-bottom: 0; }
.cta-micro li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-line);
}

/* =============================================================
 * 可読性の監査で見つかった不足の修正（2026-08-25）
 * すべて実測値にもとづく。色は増やしていない。
 * ============================================================= */

/* 1. --ink-weak は、置かれている4つの背景すべてで 4.5:1 を下回っていた
      （白 4.44 ／ surface 4.17 ／ brand-soft 3.87 ／ minus-bg 3.88）。
      該当は16か所、いずれも11〜13pxで「大きな文字」の緩和も使えない。
      同じ色相のまま暗くして、4か所すべてを一度に基準内へ入れる。 */
:root { --ink-weak: #5e6b72; }

/* 2. 入力欄のプレースホルダが 2.12:1。
      ここは「分からなければ空欄のままで大丈夫です」という
      操作の許しを伝える唯一の一文なので、読めないと離脱に直結する。 */
.money input::placeholder { color: #66727a; font-size: 13px; }

/* 3. 12px未満が5ルール残っていた（前回の底上げで3つしか拾えていなかった）。
      とくに .ocf-pct は「約71%」という結論そのものの数字。 */
.pr-label,
.chip span,
.fs-label span,
.fact-note { font-size: 12px; }
.ocf-pct   { font-size: 12.5px; }

/* 5. 見出しの余白が上下逆で、h3 が前の段落の締めくくりに見えていた
      （上22px / 下25px）。見出しは下の本文と結びつくべき。 */
.card h3 { margin-top: 32px; }
.card h3:first-child { margin-top: 0; }

/* 6. 箇条書きの項目間8pxが、行送り24.5pxに対して狭すぎた（1.33倍）。
      2〜3行の項目が7つ並ぶと一枚の壁に見える。 */
.note-list li { margin-bottom: 15px; }
.note-list li:last-child { margin-bottom: 0; }

/* 7. 判定の主文と補足のあいだが6px しかなく、答えの終わりが分からなかった。 */
.qv-sub { margin-top: 12px; }

/* 8. 読ませたい行（判定・要点・未確認の見出し）の行間が1.70〜1.72で、
      読み飛ばしてよい注記の1.80より狭いという逆転が起きていた。 */
.qv-main, .oc-point, .uk b { line-height: 1.8; }

/* 9. 矢印が 1.48:1。夜勤→オンコールの置き換わりを示す唯一の視覚要素なので、
      装飾ではなく意味を持つ。非テキストUIの基準3:1を満たす色にする。 */
.q-arrow { color: var(--brand); }

/* 4. 1行40字の上限が768px以上でしか効かず、640〜767px に穴があった
      （その帯では1行50字前後）。スマホでは実効幅のほうが常に狭いので、
      無条件に適用してもスマホの見た目は変わらない。 */
.sec-note, .fact-lead, .qv-main, .qv-sub,
.oc-caution, .oc-point, .cta-reason, .cta-note,
.hint, .fee-note, .q-fine, .tbl-note, .uk-why,
.prose p, .note-list li, .cta-micro li {
  max-width: 40em;
}

/* =============================================================
 * 比較バーの色（2026-08-25 修正）
 *
 * 行ごとに色を固定していたため、収入の多い「いまの夜勤手当」が赤、
 * 少ない「訪問看護のオンコール」が緑になり、意味が逆だった。
 *
 * いまの夜勤手当 … 比べる土台なので中立
 * オンコール    … 土台より多ければ緑、少なければ赤
 * ============================================================= */
.q-bar-night  { background: #9caaa5; }
.q-bar-oncall { background: #9caaa5; }
.q-bar-oncall.is-up   { background: var(--brand); }
.q-bar-oncall.is-down { background: var(--minus-ink); }

/* 質問の下に置く、協会の実測値の注記 */
.ref-inline { display: inline-block; margin-top: 6px; color: var(--ink-weak); }
.ref-inline strong { color: var(--ink-soft); }

/* =============================================================
 * 広告であることの表示（2026-08-25）
 *
 * 同じサイトのトップページは、冒頭に帯を出し、CTAの脇に
 * 「PR｜案件名」を枠付き16px太字で出している。
 * この看護ページだけが 11px の「PR」2文字で、自分のサイトの
 * 基準を下回っていたのでそろえる。
 * ============================================================= */
.pr-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.pr-label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* 年齢構成の注意書き */
.fact-warn {
  margin: 10px 0 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  max-width: 40em;
}

/* =============================================================
 * 「その手当は、何と引き換えでしたか」の節
 *
 * 体験談ではないので、引用符や吹き出しの見た目にはしない。
 * 短い断片を1行ずつ置いて、読み流せる速さにする。
 * ============================================================= */
.voice { background: var(--surface); }
.voice-line {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 40em;
}
.voice-point {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 2px solid var(--brand);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--ink);
  max-width: 40em;
}
.voice-close {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 40em;
}

@media (min-width: 768px) {
  .voice-line  { font-size: 15.5px; }
  .voice-point { font-size: 17.5px; }
}

/* スマホでは、答えを出すチップが最初の画面に少しでも見えている状態にしたい。
   ヘッダーの余白をわずかに詰めて、その分をチップに回す。 */
@media (max-width: 767px) {
  .hero { padding: 22px 0 18px; }
  .voice-line { margin-bottom: 6px; }
}

/* 心の声なので鉤括弧を付ける。誰かの発言の引用ではなく、
   読んでいる本人の頭の中の言葉、という位置づけ。
   括弧のぶん行頭がずれて見えないよう、ぶら下げて左端をそろえる。 */
.voice-line {
  text-indent: -1em;
  padding-left: 1em;
}

/* =============================================================
 * 心の声を主役にする（2026-08-25）
 *
 * 読者が自分のことだと気づくのは、この3行のほう。
 * 説明の一文は、そのあとに置く補足なので目立たせない。
 * ============================================================= */
.voice-line {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--ink);
}
.voice-line:last-of-type { margin-bottom: 0; }

.voice-point {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-soft);
}
.voice-point strong { font-weight: 400; }

@media (min-width: 768px) {
  .voice-line  { font-size: 18px; }
  .voice-point { font-size: 14px; }
}

/* 「夜勤手当は、そこに付いている金額です。」を小見出しにする。
   心の声の答えにあたる行なので、上に印を置いて見出しだと分かる形にする。
   ただし心の声より目立たせない（主役はあくまで上の3行）。
   .card h3 の下線と上余白は、ここでは打ち消す。 */
.voice-point {
  position: relative;
  margin: 20px 0 0;
  padding: 14px 0 0;
  border-top: 0;
  border-bottom: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--brand-ink);
}
.voice-point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand);
}

@media (min-width: 768px) {
  .voice-point { font-size: 15.5px; margin-top: 24px; }
}

/* スマホでは、答えを出すチップが最初の画面に見えている状態を保ちたい。
   意味を削らずに済む余白から詰める。 */
@media (max-width: 767px) {
  .sec { margin: 26px 0; }
  .voice { padding: 14px; }
  .voice-line { margin-bottom: 10px; }
  .voice-point { margin-top: 16px; padding-top: 12px; }
  .sec h2 { margin-bottom: 15px; }
}

/* 小見出しを枠の外に出したので、カードとの間隔を取り直す。
   .card h3 の指定（枠内の見出し用）はここでは効かせない。 */
.voice { margin-bottom: 0; }
.voice-point {
  margin-top: 22px;
  padding-top: 13px;
}
@media (max-width: 767px) {
  .voice-point { margin-top: 18px; }
}

/* 「夜勤手当は、そこに付いている金額です。」は h3 なので、
   ページ内のほかの小見出し（.card h3）と同じ文字サイズにそろえる。
   上の印だけは、枠の外に単独で置く行なので h2 と同じ形にする。 */
.voice-point {
  font-size: 15.5px;
}
.voice-point::before {
  width: 34px;
  height: 4px;
}

@media (min-width: 768px) {
  .voice-point { font-size: 16px; }
  .voice-point::before { width: 40px; }
}