/* ============================================================
   安全ヨシ — 公式サイト
   方針：外部フォント・外部スクリプト・広告タグを読み込まない。
   色はアプリと同じ（lib/theme/app_theme.dart）。
   オレンジ #ff6a13 は面にだけ使い、上に載せる文字は黒（6.9:1）。
   白地の文字にオレンジを使うときは --orange-text（#b84400、白地 5.4:1）。
   背景は常に白（端末がダークモードでも白。2026-10-17 オーナー判断）。
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --paper:   #ffffff;
  --paper-2: #f3f3f1;
  --ink:     #0a0a0a;   /* アプリの AppColors.ink */
  --ink-2:   #3d3d3d;
  --muted:   #5f5f5f;   /* 白 6.4:1／paper-2 5.8:1 */
  --line:    rgb(10 10 10 / .12);
  --line-2:  rgb(10 10 10 / .28);

  --orange:      #ff6a13;  /* アプリの AppColors.accent。面だけに使う */
  --orange-ink:  #0a0a0a;  /* オレンジの上の文字 */
  --orange-text: #b84400;  /* 白地の文字用 */

  /* リスクレベル（アプリと同じ色。Ⅲ は白文字だと 4.0:1 なので黒文字） */
  --lv1: #237f52; --lv1-ink: #ffffff;
  --lv2: #f9a900; --lv2-ink: #111827;
  --lv3: #d05d29; --lv3-ink: #0a0a0a;
  --lv4: #9b2423; --lv4-ink: #ffffff;

  --plate:    #0a0a0a;   /* アイコンと同じ「黒い板に白い縁」 */
  --plate-fg: #ffffff;
  --plate-2:  #b8b8b4;   /* 板の上の補足（9.9:1） */

  --btn-bg: #0a0a0a; --btn-fg: #ffffff;

  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;

  --fs--1: .9375rem;   /* 15px 補足 */
  --fs-0:  1.0625rem;  /* 17px 本文 */
  --fs-1:  1.25rem;
  --fs-2:  1.5rem;
  --fs-3:  clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem);
  --fs-4:  clamp(2rem, 1.1rem + 4vw, 3.75rem);

  --s-1: .5rem; --s0: 1rem; --s1: 1.5rem; --s2: 2rem; --s3: 3rem; --s4: 4rem;
  --section: clamp(4.5rem, 9vw, 7.5rem);
  --gutter:  clamp(1rem, 4vw, 2.5rem);
  --max:     70rem;
  --prose:   42rem;
  --ease:    cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-0);
  line-height: 1.85;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}
h1 { font-weight: 900; }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-1); }
/* 見出しは句の途中で折らない：.nw で区切った句の間だけで改行する */
.nw { display: inline-block; white-space: nowrap; }
p  { margin: 0; text-wrap: pretty; overflow-wrap: anywhere; }
p + p { margin-top: 1em; }
a  { color: var(--orange-text); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--orange); color: var(--orange-ink); }
svg { display: block; }
strong, b { font-weight: 700; }
ul, ol { margin: 0; padding: 0; }

.wrap {
  max-width: var(--max); margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.skip {
  position: absolute; left: var(--gutter); top: -3rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .5rem .9rem; border-radius: .5rem;
  text-decoration: none; transition: top .2s;
}
.skip:focus { top: .75rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s1); min-height: 3.75rem; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink); text-decoration: none; font-weight: 900; font-size: 1.125rem; letter-spacing: .02em;
}
.brand .mark { width: 2rem; height: 2rem; border-radius: 22.5%; }
.site-nav { margin-left: auto; display: flex; gap: clamp(.9rem, 3vw, 1.75rem); }
.site-nav a {
  color: var(--ink-2); text-decoration: none; font-size: var(--fs--1); font-weight: 600;
  padding: .5rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange); }
@media (max-width: 26em) { .site-nav .opt { display: none; } }

/* ---------- buttons ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: var(--s2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.5rem; padding: .75rem 1.4rem; border-radius: 999px;
  font-weight: 700; font-size: var(--fs-0); text-decoration: none; line-height: 1.4;
  border: 2px solid transparent;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { opacity: .88; }
.btn-ghost { color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
/* 公開前：押せないことが見て分かる表示（リンクにしない） */
.btn-soon { background: var(--paper-2); color: var(--ink); border: 2px dashed var(--line-2); cursor: default; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
@media (max-width: 30em) { .cta-row .btn { flex: 1 1 100%; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section); }
.hero .wrap { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 62em) { .hero .wrap { grid-template-columns: 1fr 29rem; } .hero .wrap > div:first-child { padding-top: var(--s2); } }
.hero .app-icon { width: 4.5rem; height: 4.5rem; border-radius: 22.5%; }
.hero h1 { font-size: var(--fs-4); line-height: 1.22; margin-top: var(--s1); }
.hero .lead { font-size: 1.125rem; color: var(--ink-2); max-width: 34em; margin-top: var(--s1); line-height: 1.9; }
.hero-note { margin-top: var(--s0); font-size: var(--fs--1); color: var(--muted); }

/* ---------- plate（アイコンと同じ札。見積もりの実演） ---------- */
.plate {
  background: var(--plate); color: var(--plate-fg);
  border-radius: 2rem; padding: .55rem;
  box-shadow: 0 0 0 1px var(--line);
}
.plate-inner {
  border: 3px solid var(--plate-fg); border-radius: 1.55rem;
  padding: clamp(1.1rem, 4vw, 1.6rem);
}
.plate h2, .plate h3 { font-size: var(--fs-1); font-weight: 800; }
.doc article .plate { margin-top: var(--s1); scroll-margin-top: 5rem; }
.doc article .plate h3 { margin: 0; color: var(--plate-fg); }
.plate .plate-note { margin-top: .35rem; font-size: var(--fs--1); color: var(--plate-2); line-height: 1.7; }
.plate fieldset { border: 0; margin: var(--s1) 0 0; padding: 0; min-width: 0; }
.plate legend { padding: 0; font-weight: 700; font-size: var(--fs-0); }
.plate legend small { font-weight: 400; font-size: var(--fs--1); color: var(--plate-2); margin-left: .5em; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .5rem; }
@media (max-width: 22em) { .seg { grid-template-columns: 1fr; } }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label {
  display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
  min-height: 2.75rem; padding: .55rem .75rem; border-radius: .75rem;
  border: 1px solid rgb(255 255 255 / .38); color: var(--plate-fg);
  font-size: var(--fs--1); font-weight: 600; line-height: 1.35; cursor: pointer;
  font-feature-settings: "palt" 1; white-space: nowrap;
}
.seg label .pt { font-weight: 800; font-variant-numeric: tabular-nums; }
.seg label:hover { border-color: var(--plate-fg); }
.seg input:checked + label { background: var(--plate-fg); color: #0a0a0a; border-color: var(--plate-fg); }
.seg input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }

.result {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center;
  margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid rgb(255 255 255 / .28);
}
.result .lv {
  width: 4.25rem; height: 4.25rem; border-radius: 1rem;
  display: grid; place-items: center; font-size: 2.25rem; font-weight: 900; line-height: 1;
  background: var(--lv-bg, var(--lv4)); color: var(--lv-fg, var(--lv4-ink));
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.result .sum { font-size: var(--fs--1); color: var(--plate-2); font-variant-numeric: tabular-nums; line-height: 1.5; }
.result .sum b { color: var(--plate-fg); font-size: 1.375rem; font-weight: 900; }
.result .title { font-weight: 800; line-height: 1.45; margin-top: .15rem; font-feature-settings: "palt" 1; }
.result .sub { font-size: var(--fs--1); color: var(--plate-2); line-height: 1.5; }
.result[data-lv="1"] { --lv-bg: var(--lv1); --lv-fg: var(--lv1-ink); }
.result[data-lv="2"] { --lv-bg: var(--lv2); --lv-fg: var(--lv2-ink); }
.result[data-lv="3"] { --lv-bg: var(--lv3); --lv-fg: var(--lv3-ink); }
.result[data-lv="4"] { --lv-bg: var(--lv4); --lv-fg: var(--lv4-ink); }
.plate-foot { margin-top: var(--s0); font-size: .8125rem; color: var(--plate-2); line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .result .lv { transition: none; } }

/* ---------- sections ---------- */
section { padding-block: var(--section); }
.section-head { max-width: var(--prose); margin-bottom: var(--s3); }
.section-head p { margin-top: var(--s0); color: var(--ink-2); }
/* 区切りは灰色の面ではなく線で（背景は白にそろえる）。黒い帯の前後は線が要らない */
main > section + section { border-top: 1px solid var(--line); }
main > .band, main > .band + section { border-top: 0; }

/* 流れ（順番があるので番号を使う） */
.flow { list-style: none; display: grid; counter-reset: step; border-top: 1px solid var(--line-2); }
.flow li {
  counter-increment: step; display: grid; gap: .6rem var(--s1); align-items: start;
  padding-block: var(--s1); border-bottom: 1px solid var(--line-2);
}
@media (min-width: 48em) {
  .flow li { grid-template-columns: 2.75rem 15rem minmax(0, 1fr); padding-block: var(--s2); }
  .flow h3 { padding-top: .3rem; }
}
.flow li::before {
  content: counter(step);
  width: 2.75rem; height: 2.75rem; border-radius: .7rem;
  display: grid; place-items: center;
  background: var(--orange); color: var(--orange-ink);
  font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.flow h3 { font-size: var(--fs-1); }
.flow p { color: var(--ink-2); font-size: var(--fs-0); line-height: 1.8; max-width: 38em; }
@media (min-width: 48em) { .flow p { padding-top: .2rem; } }

/* 端末の中だけ（黒い帯） */
.band { background: var(--plate); color: var(--plate-fg); }
.band .wrap { display: grid; gap: var(--s3); }
@media (min-width: 62em) { .band .wrap { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.band h2 { font-size: var(--fs-3); }
.band .section-head p { color: var(--plate-2); }
.band a { color: var(--plate-fg); }
.facts { list-style: none; display: grid; }
.facts li { padding: var(--s1) 0; border-top: 1px solid rgb(255 255 255 / .22); }
.facts li:last-child { border-bottom: 1px solid rgb(255 255 255 / .22); }
.facts b { display: block; font-size: var(--fs-1); font-weight: 800; }
.facts span { display: block; margin-top: .35rem; color: var(--plate-2); line-height: 1.8; }

/* 料金 */
.plans { display: grid; gap: var(--s1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.plan { padding: clamp(1.4rem, 3vw, 2rem); border-radius: 1.25rem; border: 1px solid var(--line-2); background: var(--paper); }
.plan.pro { border: 3px solid var(--ink); }
.plan h3 { font-size: var(--fs-1); }
.plan .price { font-size: var(--fs-3); font-weight: 900; margin-top: .25rem; line-height: 1.3; font-feature-settings: "palt" 1; }
.plan .price.tbd { font-size: var(--fs-1); }
.plan ul { list-style: none; margin-top: var(--s1); display: grid; gap: .55rem; }
.plan li { display: grid; grid-template-columns: 1.15rem 1fr; gap: .6rem; color: var(--ink-2); line-height: 1.7; }
.plan li svg { width: 1.15rem; height: 1.15rem; margin-top: .38rem; color: var(--ink); }
.plans-foot { margin-top: var(--s1); font-size: var(--fs--1); color: var(--muted); }
.plan .for { margin-top: .3rem; font-size: var(--fs--1); color: var(--muted); line-height: 1.6; }
.plan-biz { margin-top: var(--s2); padding: clamp(1.3rem, 3vw, 1.8rem); border-radius: 1.25rem; border: 1px dashed var(--line-2); background: var(--paper); }
.plan-biz h3 { font-size: var(--fs-1); }
.plan-biz p { margin-top: .6rem; color: var(--ink-2); line-height: 1.8; }

.closing p { color: var(--ink-2); max-width: var(--prose); margin-top: var(--s0); }

/* ---------- doc pages ---------- */
.doc-head { padding-block: clamp(2.25rem, 6vw, 4.5rem) var(--s2); border-bottom: 1px solid var(--line); }
.doc-head h1 { font-size: var(--fs-3); }
.doc-head .meta { margin-top: var(--s0); font-size: var(--fs--1); color: var(--muted); }
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-block: var(--s3) var(--section); }
@media (min-width: 62em) { .doc { grid-template-columns: 14rem minmax(0, var(--prose)); gap: var(--s4); } }
.toc { position: sticky; top: 5rem; align-self: start; font-size: var(--fs--1); }
.toc .k { font-weight: 700; color: var(--muted); margin-bottom: .4rem; }
.toc ol { list-style: none; border-left: 1px solid var(--line); }
.toc a { display: block; padding: .3rem 0 .3rem .9rem; color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.6; }
.toc a:hover { color: var(--ink); border-left-color: var(--line-2); }
.toc a[aria-current="location"] { color: var(--ink); border-left-color: var(--orange); }
@media (max-width: 61.99em) {
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: .2rem 1rem; border: 0; }
  .toc a { padding: .25rem 0; border: 0; margin: 0; }
}
.doc article h2 { font-size: var(--fs-2); margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.doc article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc article h3 { font-size: var(--fs-0); margin-top: var(--s1); }
.doc article h2 + *, .doc article h3 + * { margin-top: var(--s0); }
.doc article p + ul, .doc article p + ol, .doc article p + dl, .doc article p + .note,
.doc article ul + p, .doc article ol + p, .doc article dl + p, .doc article .note + p { margin-top: var(--s0); }
.doc article ul, .doc article ol { padding-left: 1.4em; }
.doc article li + li { margin-top: .35rem; }
.doc article ol.articles { padding-left: 1.8em; }
.summary { padding: clamp(1.2rem, 3vw, 1.75rem); border-radius: 1.25rem; background: var(--paper-2); }
.summary ul { padding-left: 1.2em; }
.spec { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0 var(--s2); border-top: 1px solid var(--line); }
.spec dt, .spec dd { margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); font-size: var(--fs--1); font-weight: 600; }
.spec dd { color: var(--ink-2); }
@media (max-width: 34em) { .spec { grid-template-columns: 1fr; } .spec dt { padding-bottom: 0; border: 0; } }
.note {
  padding: 1rem 1.15rem; border-radius: .75rem; border-left: 4px solid var(--orange);
  background: var(--paper-2); font-size: var(--fs--1); line-height: 1.8; color: var(--ink-2);
}
.note b { color: var(--ink); }

/* お問い合わせ */
.contact { padding: clamp(1.4rem, 3vw, 2rem); border-radius: 1.25rem; border: 1px solid var(--line-2); }
.contact .label { font-weight: 700; color: var(--muted); font-size: var(--fs--1); }
.contact .addr { font-size: clamp(1.1rem, .9rem + 1.2vw, 1.5rem); font-weight: 800; margin-top: .25rem; word-break: break-all; }
.contact .addr a { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.contact .small { margin-top: var(--s0); font-size: var(--fs--1); color: var(--muted); }

/* よくある質問 */
.faq { display: grid; gap: .5rem; }
details { border: 1px solid var(--line-2); border-radius: .9rem; background: var(--paper); }
details { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { details::details-content { transition: none; } }
summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 1.6rem; gap: var(--s0); align-items: center;
  padding: 1rem 1.15rem; font-weight: 700; line-height: 1.6; min-height: 3.5rem;
}
summary::-webkit-details-marker { display: none; }
summary .plus { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform .3s var(--ease); }
summary .plus svg { width: .8rem; height: .8rem; }
details[open] summary .plus { transform: rotate(45deg); background: var(--ink); color: var(--paper); border-color: var(--ink); }
details .body { padding: 0 1.15rem 1.15rem; color: var(--ink-2); }
details .body p + p { margin-top: .6em; }
@media (prefers-reduced-motion: reduce) { summary .plus { transition: none; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s3) var(--s4); font-size: var(--fs--1); color: var(--muted); }
.site-footer .wrap { display: grid; gap: var(--s1); }
@media (min-width: 48em) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: end; } }
.site-footer .brand { font-size: 1rem; }
.site-footer .brand .mark { width: 1.75rem; height: 1.75rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem var(--s1); }
.site-footer nav a { color: var(--ink-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .tag { margin-top: .5rem; }

/* ---------- 404 ---------- */
.lost { min-height: 65vh; display: grid; place-items: center; text-align: center; padding-block: var(--section); }
.lost .mark { width: 5.5rem; height: 5.5rem; margin-inline: auto; border-radius: 22.5%; }
.lost h1 { font-size: var(--fs-3); margin-top: var(--s1); }
.lost p { margin-top: var(--s0); color: var(--ink-2); }

/* ---------- print（規約・ポリシーを印刷する人向け。文字は真っ黒） ---------- */
@media print {
  :root { --paper: #fff; --paper-2: #fff; --ink: #000; --ink-2: #000; --muted: #000; --line: #999; --line-2: #999; }
  .site-header, .site-footer, .toc, .skip { display: none !important; }
  body { font-size: 10.5pt; line-height: 1.7; }
  .doc { display: block; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .summary, .note { border: 1px solid #999; }
  .example { background: #fff !important; border: 1px solid #999 !important; box-shadow: none !important; }
  .example p, .example li, .example b, .example .label, .example .say { color: #000 !important; }
  .example .say::before { display: none; }
}

/* ============================================================
   解説ページ（/guide/）
   ============================================================ */
.crumbs { font-size: var(--fs--1); color: var(--muted); margin-bottom: var(--s0); }
.crumbs a { color: var(--ink-2); }
.doc-head .lead { margin-top: var(--s0); color: var(--ink-2); max-width: var(--prose); line-height: 1.9; }

/* 手順（順番があるので番号） */
.steps { list-style: none; padding: 0 !important; counter-reset: st; display: grid; gap: var(--s1); margin-top: var(--s1); }
.steps > li { counter-increment: st; display: grid; grid-template-columns: 2.25rem 1fr; gap: .9rem; align-items: start; margin: 0 !important; }
.steps > li::before {
  content: counter(st); width: 2.25rem; height: 2.25rem; border-radius: .6rem;
  display: grid; place-items: center; background: var(--orange); color: var(--orange-ink);
  font-weight: 900; font-variant-numeric: tabular-nums;
}
.steps > li::before { grid-row: 1 / span 2; }
.steps > li > b, .steps > li > span { grid-column: 2; min-width: 0; }
.steps b { display: block; font-size: var(--fs-0); padding-top: .35rem; }
.steps span { display: block; color: var(--ink-2); margin-top: .15rem; }
.policy-steps { max-width: var(--prose); }

/* 表 */
.table-wrap { overflow-x: auto; margin-top: var(--s1); -webkit-overflow-scrolling: touch; }
.doc article .table-wrap + p, .doc article p + .table-wrap { margin-top: var(--s1); }
table.t { width: 100%; border-collapse: collapse; font-size: var(--fs--1); line-height: 1.7; }
table.t caption { text-align: left; font-weight: 700; color: var(--ink); padding-bottom: .5rem; font-size: var(--fs-0); }
table.t th, table.t td { text-align: left; vertical-align: top; padding: .65rem .75rem; border-bottom: 1px solid var(--line); }
table.t thead th { background: var(--paper-2); color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.t td.n, table.t th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; color: var(--ink); }
table.t td.k { white-space: nowrap; font-weight: 700; color: var(--ink); }
.lv-chip { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .4rem; border-radius: .5rem; font-weight: 900; }
.lv-chip.l1 { background: var(--lv1); color: var(--lv1-ink); }
.lv-chip.l2 { background: var(--lv2); color: var(--lv2-ink); }
.lv-chip.l3 { background: var(--lv3); color: var(--lv3-ink); }
.lv-chip.l4 { background: var(--lv4); color: var(--lv4-ink); }

/* 記入例：現場の黒板（2026-10-18）
   解説の説明（白地）と「安全ヨシでは」の黒い札と見分けがつくよう、濃い緑の黒板に木の枠で見せる。
   色は黒板の上だけで使う固定色。白地の背景の決まり（常に白）には関わらない。 */
.example {
  --board: #1f4a39; --chalk: #f1f4ee; --chalk-2: #c9d6cd; --chalk-y: #f4e49c; --frame: #7b5a3c;
  margin-top: var(--s1); padding: clamp(1.1rem, 3vw, 1.5rem); padding-bottom: calc(clamp(1.1rem, 3vw, 1.5rem) + .3rem);
  background: var(--board); color: var(--chalk);
  border: .5rem solid var(--frame); border-bottom-width: .85rem; border-radius: .6rem;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35), inset 0 0 2.5rem rgb(0 0 0 / .25);
}
.example .label { font-weight: 700; color: var(--chalk-y); font-size: var(--fs--1); letter-spacing: .04em; }
.example p, .example ul, .example ol { margin-top: .5rem; }
.example p, .example li { color: var(--chalk); }
.example b, .example strong { color: #fff; }
.example a { color: var(--chalk-y); }
.example .bad { color: var(--chalk-2); text-decoration: line-through; text-decoration-color: rgb(241 244 238 / .5); }
/* ◎ を付けて下線を引いた「危険のポイント」。チョークの線で引いたように見せる */
.example .mark-u { text-decoration: underline; text-decoration-color: var(--chalk-y); text-decoration-thickness: 2px; text-underline-offset: .3em; }
/* 唱和する文（〜 ヨシ！）。指差し呼称している人の線画を添えて、声に出す行だと分かるようにする */
.example .say {
  display: flex; align-items: center; gap: .75rem;
  font-weight: 800; color: #fff; margin-top: .75rem;
}
.example .say::before {
  content: ""; flex: none; width: 4rem; height: 4rem;
  background: url("/img/il/yoshi.png") center / contain no-repeat;
}

/* 安全ヨシでは（アイコンと同じ札） */
.app-box { margin-top: var(--s3); background: var(--plate); color: var(--plate-fg); border-radius: 1.6rem; padding: .5rem; box-shadow: 0 0 0 1px var(--line); }
.app-box-inner { border: 3px solid var(--plate-fg); border-radius: 1.2rem; padding: clamp(1.2rem, 4vw, 1.75rem); }
.doc article .app-box h2 { margin: 0; padding: 0; border: 0; color: var(--plate-fg); font-size: var(--fs-2); }
.app-box p, .app-box li { color: var(--plate-2); }
.app-box b, .app-box strong { color: var(--plate-fg); }
.app-box ul { margin-top: var(--s0); padding-left: 1.2em; }
.app-box li + li { margin-top: .45rem; }
.app-box .soon { display: inline-block; margin-top: var(--s1); padding: .55rem 1rem; border-radius: 999px; border: 2px dashed rgb(255 255 255 / .5); color: var(--plate-fg); font-weight: 700; }
.app-box a { color: var(--plate-fg); }

/* 出典 */
.sources { font-size: var(--fs--1); line-height: 1.75; overflow-wrap: anywhere; }
.doc article ol.sources { padding-left: 1.5em; }
.sources li + li { margin-top: .5rem; }
.disclaimer { margin-top: var(--s2); font-size: var(--fs--1); color: var(--muted); }

/* 解説の一覧 */
.guide-list { list-style: none; padding: 0 !important; display: grid; gap: var(--s0); margin-top: var(--s1); }
.guide-list li { margin: 0 !important; }
.guide-list a { display: block; padding: clamp(1.1rem, 3vw, 1.5rem); border: 1px solid var(--line-2); border-radius: 1.1rem; text-decoration: none; color: var(--ink); }
.guide-list a:hover { border-color: var(--ink); }
.guide-list b { display: block; font-size: var(--fs-1); font-weight: 800; }
.guide-list span { display: block; margin-top: .35rem; color: var(--ink-2); font-size: var(--fs-0); line-height: 1.8; }
.guide-list .later { padding: clamp(1.1rem, 3vw, 1.5rem); border: 1px dashed var(--line-2); border-radius: 1.1rem; color: var(--muted); }

table.t td.k .q { display: inline-block; margin-top: .2rem; font-weight: 400; color: var(--ink-2); white-space: normal; min-width: 7.5em; }

/* ============================================================
   やってみる形式（手順ごとに「やり方」と「アプリでの操作」を並べる）
   ============================================================ */
.wstep { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line-2); scroll-margin-top: 5rem; }
.wstep-head { display: flex; align-items: center; gap: .8rem; }
.wstep-head .badge {
  flex: none; min-width: 2.9rem; height: 2.9rem; padding: 0 .55rem; border-radius: .75rem;
  display: grid; place-items: center; background: var(--orange); color: var(--orange-ink);
  font-weight: 900; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.doc article .wstep h3 { margin: 0; font-size: var(--fs-1); line-height: 1.35; }
.wstep h3 small { display: block; font-size: var(--fs--1); font-weight: 600; color: var(--muted); margin-top: .1rem; }
.wstep > p, .wstep > ul, .wstep > ol { margin-top: var(--s0); }
.wstep .when { display: inline-block; margin-top: var(--s0); padding: .15rem .6rem; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: var(--fs--1); font-weight: 700; }

.app-step { margin-top: var(--s1); background: var(--plate); color: var(--plate-fg); border-radius: 1.15rem; padding: .4rem; box-shadow: 0 0 0 1px var(--line); }
.app-step-inner { border: 2px solid var(--plate-fg); border-radius: .85rem; padding: 1rem 1.15rem; }
.app-step .k { font-weight: 800; color: var(--plate-fg); font-size: var(--fs--1); }
.app-step p, .app-step li { color: var(--plate-2); font-size: var(--fs--1); line-height: 1.8; }
.app-step p + p, .app-step p + ol, .app-step p + ul { margin-top: .4rem; }
.doc article .app-step ol, .doc article .app-step ul { padding-left: 1.3em; }
.app-step li + li { margin-top: .3rem; }
.app-step b { color: var(--plate-fg); }
.tap { display: inline; padding: .05rem .4rem; border-radius: .35rem; background: rgb(255 255 255 / .16); color: var(--plate-fg); font-weight: 700; white-space: normal; }
.app-step a { color: var(--plate-fg); }

/* 流れの全体図（短いチップの列） */
.route { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s1); }
.route li { margin: 0 !important; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: var(--fs--1); font-weight: 700; }
.route li.on { background: var(--orange); border-color: var(--orange); color: var(--orange-ink); }
.soon-line { margin-top: var(--s2); font-weight: 700; }
.guide-list a.feature { border: 3px solid var(--ink); }

/* お問い合わせの項目 */
.inquiry { margin-top: var(--s1); display: grid; gap: var(--s1); }
.inquiry fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.inquiry legend, .inquiry .group-label, .inquiry label { font-weight: 700; color: var(--ink); }
.inquiry .req, .inquiry .opt { margin-left: .5em; font-size: .8125rem; font-weight: 700; padding: .05rem .45rem; border-radius: .35rem; vertical-align: .1em; }
.inquiry .req { background: var(--ink); color: var(--paper); }
.inquiry .opt { background: var(--paper-2); color: var(--muted); font-weight: 600; }
.inquiry .choices { display: grid; gap: .4rem; margin-top: .6rem; }
.inquiry .choices label { display: flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .5rem .9rem; border: 1px solid var(--line-2); border-radius: .75rem; font-weight: 600; cursor: pointer; }
.inquiry .choices label:has(input:checked) { border: 2px solid var(--ink); }
.inquiry .choices input { width: 1.2rem; height: 1.2rem; accent-color: var(--ink); }
.inquiry .field { display: grid; gap: .4rem; }
.inquiry .field-group { display: grid; gap: var(--s0); padding: var(--s1); border-radius: 1rem; background: var(--paper-2); }
.inquiry .group-label { margin: 0; }
.inquiry input[type="text"], .inquiry textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: .7rem; padding: .75rem .85rem; min-height: 3rem;
}
.inquiry textarea { line-height: 1.7; resize: vertical; }
.inquiry input::placeholder, .inquiry textarea::placeholder { color: var(--muted); }
.inquiry input:focus-visible, .inquiry textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.form-error { color: var(--lv4); font-weight: 700; }
button.btn { cursor: pointer; font-family: inherit; }
.inquiry .hint { font-size: .8125rem; color: var(--muted); line-height: 1.6; }

/* 衛生管理者の巡視記録（トップ） */
.section-head .eyebrow, .eyebrow { font-size: var(--fs--1); font-weight: 800; color: var(--orange-text); letter-spacing: .04em; margin-bottom: .4rem; }
.papers { list-style: none; padding: 0; display: grid; gap: var(--s1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.papers li { position: relative; padding: 1.25rem 1.3rem 1.2rem; border: 1px solid var(--line-2); border-radius: 1rem; background: var(--paper); border-top: 5px solid var(--orange); }
.papers b { display: block; font-size: var(--fs-0); font-weight: 800; color: var(--ink); line-height: 1.5; }
.papers b small { display: block; margin-top: .15rem; font-size: var(--fs--1); font-weight: 700; color: var(--muted); }
.papers span { display: block; margin-top: .5rem; color: var(--ink-2); font-size: var(--fs--1); line-height: 1.8; }
.papers em { display: inline-block; margin-top: .7rem; padding: .1rem .6rem; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-style: normal; font-size: var(--fs--1); font-weight: 700; }
.papers-notes { margin-top: var(--s2); padding-left: 1.3em; max-width: var(--prose); color: var(--ink-2); }
.papers-notes li + li { margin-top: .4rem; }
.papers-fine { margin-top: var(--s1); max-width: var(--prose); font-size: var(--fs--1); color: var(--muted); line-height: 1.8; }
table.size-table td b { display: block; margin-top: .55rem; font-size: .85em; color: var(--muted); }
table.size-table td b:first-child { margin-top: 0; }

/* ---------- トップ：困りごとから解説へ（2026-10-17） ---------- */
.problems { list-style: none; padding: 0; display: grid; gap: var(--s0); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.problems a { display: flex; flex-direction: column; height: 100%; padding: 1.2rem 1.3rem 1.1rem; border: 1px solid var(--line-2); border-radius: 1rem; text-decoration: none; color: var(--ink); }
.problems a:hover { border-color: var(--ink); }
.problems b { font-size: var(--fs-1); font-weight: 800; line-height: 1.5; }
.problems a > span:not(.ic) { margin-top: .45rem; color: var(--ink-2); line-height: 1.8; }
.problems small { margin-top: auto; padding-top: .9rem; font-size: var(--fs--1); font-weight: 700; color: var(--orange-text); }


/* ============================================================
   仕上げ（2026-10-17 夜。街クリニックのサイトを手本に）
   - ヒーローの下に、職場の線画を薄く敷く（街クリニックの町並みの線画にあたる）
   - アプリの画面を、スマホの枠の見本で見せる（画面はイメージ）
   - 区切りの見出しは中央。カードは細い線だけで、影は付けない（影はスマホの枠だけ）
   ============================================================ */
:root { --tint: #fff1e6; }  /* アイコンの下地だけに使う薄いオレンジ */
h1, h2, h3 { word-break: auto-phrase; }

.site-header .wrap { min-height: 4.25rem; }
.site-nav a { font-size: .9375rem; font-weight: 700; color: var(--ink); }

/* ヒーロー：線画のぶん、下を広く空ける */
.hero { position: relative; overflow: hidden; padding-bottom: calc(var(--section) + 5.5rem); }
.worksite {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6.5rem; pointer-events: none;
  background: var(--ink); opacity: .09;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 140" fill="none" stroke="%23000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E %3Cpath d="M0 138H720"/%3E %3Cpath d="M16 138V72H216V138M16 72V52L56 72V52L96 72V52L136 72V52L176 72V52L216 72"/%3E %3Cpath d="M188 61V20H202V68"/%3E %3Cpath d="M100 138V108H132V138M116 108V138"/%3E %3Crect x="30" y="88" width="18" height="14" rx="1"/%3E%3Crect x="60" y="88" width="18" height="14" rx="1"/%3E%3Crect x="152" y="88" width="18" height="14" rx="1"/%3E%3Crect x="182" y="88" width="18" height="14" rx="1"/%3E %3Cpath d="M246 138V64M301 138V64M356 138V64M246 64H356M246 92H356M246 118H356"/%3E %3Crect x="254" y="74" width="20" height="18"/%3E%3Crect x="278" y="80" width="16" height="12"/%3E%3Crect x="310" y="72" width="26" height="20"/%3E%3Crect x="256" y="102" width="30" height="16"/%3E%3Crect x="314" y="100" width="18" height="18"/%3E%3Crect x="336" y="106" width="14" height="12"/%3E %3Cpath d="M388 138L408 62L428 138M394 116H422M398 98H418M402 80H414M404 62H412"/%3E %3Crect x="456" y="46" width="90" height="92"/%3E %3Crect x="468" y="58" width="16" height="12"/%3E%3Crect x="493" y="58" width="16" height="12"/%3E%3Crect x="518" y="58" width="16" height="12"/%3E %3Crect x="468" y="82" width="16" height="12"/%3E%3Crect x="493" y="82" width="16" height="12"/%3E%3Crect x="518" y="82" width="16" height="12"/%3E %3Cpath d="M492 138V114H510V138"/%3E %3Cpath d="M568 138H600M572 138L584 104L596 138M577 124H591"/%3E %3Cpath d="M604 138L613 114L622 138M607 128H619"/%3E %3Cpath d="M676 138V94M676 54L700 94H652Z M676 68V80M676 86V87"/%3E %3C/svg%3E') bottom left / auto 100% repeat-x;
          mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 140" fill="none" stroke="%23000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"%3E %3Cpath d="M0 138H720"/%3E %3Cpath d="M16 138V72H216V138M16 72V52L56 72V52L96 72V52L136 72V52L176 72V52L216 72"/%3E %3Cpath d="M188 61V20H202V68"/%3E %3Cpath d="M100 138V108H132V138M116 108V138"/%3E %3Crect x="30" y="88" width="18" height="14" rx="1"/%3E%3Crect x="60" y="88" width="18" height="14" rx="1"/%3E%3Crect x="152" y="88" width="18" height="14" rx="1"/%3E%3Crect x="182" y="88" width="18" height="14" rx="1"/%3E %3Cpath d="M246 138V64M301 138V64M356 138V64M246 64H356M246 92H356M246 118H356"/%3E %3Crect x="254" y="74" width="20" height="18"/%3E%3Crect x="278" y="80" width="16" height="12"/%3E%3Crect x="310" y="72" width="26" height="20"/%3E%3Crect x="256" y="102" width="30" height="16"/%3E%3Crect x="314" y="100" width="18" height="18"/%3E%3Crect x="336" y="106" width="14" height="12"/%3E %3Cpath d="M388 138L408 62L428 138M394 116H422M398 98H418M402 80H414M404 62H412"/%3E %3Crect x="456" y="46" width="90" height="92"/%3E %3Crect x="468" y="58" width="16" height="12"/%3E%3Crect x="493" y="58" width="16" height="12"/%3E%3Crect x="518" y="58" width="16" height="12"/%3E %3Crect x="468" y="82" width="16" height="12"/%3E%3Crect x="493" y="82" width="16" height="12"/%3E%3Crect x="518" y="82" width="16" height="12"/%3E %3Cpath d="M492 138V114H510V138"/%3E %3Cpath d="M568 138H600M572 138L584 104L596 138M577 124H591"/%3E %3Cpath d="M604 138L613 114L622 138M607 128H619"/%3E %3Cpath d="M676 138V94M676 54L700 94H652Z M676 68V80M676 86V87"/%3E %3C/svg%3E') bottom left / auto 100% repeat-x;
}
@media (min-width: 62em) { .worksite { height: 8rem; } .hero { padding-bottom: calc(var(--section) + 7rem); } }
.kicker { font-size: var(--fs--1); font-weight: 800; color: var(--orange-text); margin-bottom: .9rem; }
.hero .kicker + h1 { margin-top: 0; }
.checks { list-style: none; padding: 0; display: grid; gap: .5rem; margin-top: var(--s2); font-weight: 700; }
.checks li { display: flex; align-items: center; gap: .65rem; line-height: 1.5; }
.checks li::before {
  content: ""; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--orange) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230a0a0a" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 12.5l4.5 4.5L19 7.5"/%3E%3C/svg%3E') center / .95rem no-repeat;
}

/* 区切りの見出しを中央に（本文は左揃えのまま） */
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center p { text-wrap: balance; }

/* 困りごとのカード：アイコンの下地＋困りごと＋説明＋行き先の解説 */
.problems { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--s1); }
.problems a { padding: 1.5rem 1.5rem 1.35rem; border: 1px solid var(--line-2); border-radius: 1.25rem; }
.problems .ic { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: var(--tint); color: var(--orange-text); margin-bottom: 1rem; }
.problems .ic svg { width: 1.65rem; height: 1.65rem; }
.problems small { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.problems a:hover small { text-decoration-thickness: 2px; }

/* 考え方の4つ：順番があるので番号。広い画面では横に並べる */
.policy-steps { max-width: none; gap: var(--s1); }
/* 4つを横1列にすると見出しが細切れになるので、広い画面でも 2×2 */
@media (min-width: 48em) { .policy-steps { grid-template-columns: repeat(2, 1fr); } }
.policy-steps > li { display: block; padding: 1.5rem 1.4rem; border: 1px solid var(--line-2); border-radius: 1.25rem; }
.policy-steps > li::before { display: grid; margin-bottom: .9rem; }
.policy-steps b { padding-top: 0; font-size: var(--fs-1); line-height: 1.5; }
.policy-steps > li > span { margin-top: .5rem; font-size: var(--fs--1); line-height: 1.85; }

/* アプリの紹介（トップ）・アプリのページのヒーロー：左に文、右にスマホ */
.showcase { display: grid; gap: var(--s3); align-items: center; }
@media (min-width: 62em) { .showcase { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s4); } }
.showcase h2 { font-size: var(--fs-3); }
.showcase .lead, .showcase > div > p:not(.kicker):not(.hero-note) { margin-top: var(--s1); color: var(--ink-2); line-height: 1.9; max-width: 34em; }
.showcase .app-icon { width: 4rem; height: 4rem; border-radius: 22.5%; margin-bottom: 1.25rem; }

/* スマホの枠（アプリの画面のイメージ。HTML で小さく描いたもの） */
.phone-fig { margin: 0; display: grid; justify-items: center; gap: .75rem; }
.phone-fig figcaption { font-size: .8125rem; color: var(--muted); }
.phone {
  width: 17.5rem; aspect-ratio: 9 / 18.5; border-radius: 2.6rem; padding: .65rem; background: #1a1a1a;
  box-shadow: 0 2rem 4rem -1.5rem rgb(10 10 10 / .45), inset 0 0 0 2px #333;
}
@media (min-width: 62em) { .phone { width: 19rem; } }
.phone-screen {
  position: relative; height: 100%; border-radius: 2rem; overflow: hidden; background: #f6f6f4;
  display: flex; flex-direction: column; gap: .55rem; padding: 2.4rem .8rem 0; font-size: .6875rem; line-height: 1.45; letter-spacing: 0; color: #0a0a0a;
}
.pa-greet { font-size: .6875rem; color: #5f5f5f; font-weight: 700; }
.pa-name { font-size: 1.125rem; font-weight: 900; margin: 0 !important; }
.pa-card { background: #fff; border-radius: .8rem; padding: .6rem .7rem; border: 1px solid #e6e6e3; }
.pa-h { font-weight: 800; font-size: .6875rem; color: #5f5f5f; }
.pa-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .3rem; text-align: center; }
.pa-stats b { display: block; font-size: 1.25rem; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pa-stats span { font-size: .625rem; color: #3d3d3d; font-weight: 700; }
.pa-weeks { display: flex; align-items: center; gap: .3rem; margin-top: .35rem !important; font-weight: 700; }
.pa-weeks i { width: 1.1rem; height: .45rem; border-radius: .25rem; background: #e6e6e3; }
.pa-weeks i.on { background: var(--orange); }
.pa-weeks span { margin-left: auto; font-size: .625rem; color: #3d3d3d; }
.pa-sec { font-weight: 900; font-size: .75rem; margin: .2rem 0 0 !important; }
.pa-risk { display: flex; align-items: center; gap: .55rem; background: #fff; border-radius: .8rem; padding: .5rem .6rem; border: 1px solid #e6e6e3; font-weight: 700; margin: 0 !important; }
.pa-risk small { display: block; font-size: .5625rem; color: #5f5f5f; font-weight: 600; }
.pa-risk .lv { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: .45rem; font-weight: 900; font-size: .75rem; }
.pa-risk .lv4 { background: var(--lv4); color: var(--lv4-ink); }
.pa-risk .lv3 { background: var(--lv3); color: var(--lv3-ink); }
.pa-fab { position: absolute; right: .8rem; bottom: 3.6rem; background: #0a0a0a; color: #fff; font-weight: 800; border-radius: 999px; padding: .45rem .85rem; font-size: .6875rem; box-shadow: 0 .4rem 1rem -.3rem rgb(0 0 0 / .4); }
.pa-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid #e6e6e3; padding: .55rem .2rem .9rem; text-align: center; font-size: .5625rem; font-weight: 700; color: #8a8a86; }
.pa-tabs .on { color: #0a0a0a; }
.pa-tabs .on::before { content: ""; display: block; width: 1.4rem; height: .2rem; border-radius: .1rem; background: var(--orange); margin: 0 auto .25rem; }

/* 見出しの句のまとまり：入る幅ならまとめて次の行へ、入らなければ中で折り返す（Safari でも文の途中で切れにくくする） */
.ph, .steps b .ph { display: inline-block; max-width: 100%; margin: 0; color: inherit; }
.section-head.center p.long { text-align: left; }
/* 中央の見出しの区切りでは、下に続く注意書きやボタンも中央の列にそろえる */
section:has(> .wrap > .section-head.center) :is(.papers-notes, .papers-fine) { margin-inline: auto; }
section:has(> .wrap > .section-head.center) .cta-row { justify-content: center; }

/* ---------- イラスト（iStock 標準ライセンス。2026-10-18） ----------
   絵柄はアイソメトリックの作業員シリーズ（作者 Mono）でそろえる。
   文章の邪魔をしないよう、見出しの横か段落の間に1枚ずつ。装飾なので alt は空。 */
.doc-head.has-il .wrap { display: grid; gap: var(--s1); align-items: center; }
.head-il { margin: 0; justify-self: center; width: min(10rem, 42%); order: 9; }
.head-il img, .il img, .sec-il img { display: block; width: 100%; height: auto; }
@media (min-width: 52rem) {
  .doc-head.has-il .wrap { grid-template-columns: minmax(0, 1fr) 16rem; column-gap: var(--s3); }
  .doc-head.has-il .wrap > :not(.head-il) { grid-column: 1; }
  .head-il { grid-column: 2; grid-row: 1 / span 4; width: 100%; }
}
.il { margin: var(--s1) auto 0; width: min(22rem, 85%); }
.il.slim { width: min(8.5rem, 40%); }
.il.mid { width: min(15rem, 66%); }
.il.wide { width: min(32rem, 100%); }
.sec-il { margin: 0 auto var(--s1); width: min(15rem, 60%); }
.hero-il { margin: 0; justify-self: center; width: min(15rem, 60%); }
.hero-il img { display: block; width: 100%; height: auto; }
@media (min-width: 62em) { .hero-il { width: 100%; max-width: 25rem; align-self: center; } }
@media print { .hero-il { display: none; } }
@media print { .head-il, .il, .sec-il { display: none; } }

/* ---------- 委員会の組み立て図（2026-10-18） ----------
   議長の下に事業者側と労働者側を左右に並べ、同じ人数であることを形で見せる。
   切り替えは JS を使わず radio と :has() で。安全衛生委員会のときだけ .cm-safe を出す。 */
.cm { margin: var(--s1) 0 0; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line-2); border-radius: 1rem; }
.cm-switch { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.cm-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cm-switch label { padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 700; font-size: var(--fs--1); cursor: pointer; }
.cm-switch input:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }
.cm-switch input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }
.cm ul { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .5rem; }
:is(.doc article, .doc-solo) .cm li { margin: 0; }
.cm-card { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; background: #fff; border: 1px solid var(--line-2); border-radius: .7rem; font-size: var(--fs--1); line-height: 1.45; }
.cm-ic { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); }
.cm-ic svg { width: 1.25rem; height: 1.25rem; fill: var(--ink-2); }
.cm-t { flex: 1; min-width: 0; }
.cm-t b { display: block; }
.cm-t small { display: block; color: var(--muted); font-size: .8125rem; }
.cm-card em { flex: none; font-style: normal; font-size: .75rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; background: var(--orange); color: var(--orange-ink); }
.cm-chair { max-width: 24rem; margin: var(--s1) auto 0; position: relative; padding-bottom: 1.25rem; }
.cm-chair .cm-card { border-width: 2px; border-color: var(--ink); }
.cm-chair::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 1.25rem; border-left: 2px solid var(--line-2); }
.cm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; border-top: 2px solid var(--line-2); padding-top: .9rem; margin-inline: 12%; }
.cm-col { margin-inline: -12%; padding: .75rem; border-radius: .9rem; }
.cm-cols .cm-col:first-child { margin-right: 0; }
.cm-cols .cm-col:last-child { margin-left: 0; }
.cm-emp { background: #f3f3f1; }
.cm-wkr { background: #fff1e8; }
:is(.doc article, .doc-solo) .cm .cm-h { margin: 0 0 .6rem; font-weight: 800; font-size: var(--fs-0); text-align: center; }
.cm-h small { display: block; font-weight: 600; font-size: .75rem; color: var(--muted); line-height: 1.5; }
.cm-more { justify-content: center; border-style: dashed; color: var(--muted); background: transparent; min-height: 2.6rem; }
.cm-sum { margin-top: var(--s1); text-align: center; font-size: var(--fs-0); }
.cm-sum b { font-size: 1.4em; }
.cm figcaption { margin-top: .5rem; text-align: center; font-size: var(--fs--1); color: var(--muted); text-wrap: balance; }
.cm .cm-safe, .cm .cm-n-a { display: none; }
.cm:has(#cm-a:checked) .cm-safe { display: flex; }
.cm:has(#cm-a:checked) .cm-n-a { display: inline; }
.cm:has(#cm-a:checked) .cm-n-e { display: none; }
@media (max-width: 30rem) {
  .cm-cols { margin-inline: 0; gap: .5rem; }
  .cm-col { margin-inline: 0 !important; padding: .5rem; }
  .cm-card { flex-wrap: wrap; gap: .35rem .5rem; padding: .5rem; }
  .cm-ic { display: none; }
}
/* 印刷：画面で選んでいる種類のまま刷る。切り替えは選んでいる側の名前だけ残す（2026-10-19 外部レビュー P0-01） */
@media print { .cm-switch input:not(:checked) + label { display: none; } .cm-switch input:checked + label { background: #fff; color: var(--ink); border-color: var(--ink); } }

/* ---------- 委員会チェッカー（2026-10-18） ---------- */
.ck { margin-top: var(--s1); padding: clamp(1rem, 3vw, 1.5rem); border-radius: 1rem; background: #fff1e8; border: 1px solid #f6c9ad; }
:is(.doc article, .doc-solo) .ck h3 { margin: 0; font-size: var(--fs-1); }
:is(.doc article, .doc-solo) .ck .ck-lead { margin-top: .4rem; color: var(--ink-2); font-size: var(--fs--1); }
.ck-form { display: grid; gap: .9rem; margin-top: var(--s0); }
.ck-f { display: grid; gap: .35rem; font-weight: 700; }
.ck-f small { display: block; font-weight: 400; font-size: .8125rem; color: var(--muted); line-height: 1.6; }
.ck-num { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.ck input, .ck select { font: inherit; font-size: 1rem; min-height: 2.9rem; padding: .5rem .75rem; border: 1px solid var(--line-2); border-radius: .6rem; background: #fff; color: var(--ink); max-width: 100%; }
.ck input { width: 8rem; }
.ck select { width: 100%; }
.ck-out { margin-top: var(--s1); padding: 1rem 1.1rem; background: #fff; border-radius: .8rem; border: 1px solid var(--line-2); }
:is(.doc article, .doc-solo) .ck-out p, :is(.doc article, .doc-solo) .ck-out ul { margin-top: .5rem; }
:is(.doc article, .doc-solo) .ck-out > :first-child { margin-top: 0; }
.ck-wait { color: var(--muted); }
.ck-v { font-size: var(--fs-1); font-weight: 900; }
.ck-v small { display: block; font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); }
.ck-none { color: var(--ink-2); }
.ck-note { font-size: var(--fs--1); color: var(--orange-text); font-weight: 700; }
.ck-count b { font-size: 1.5em; }
.ck-list { font-size: var(--fs--1); }
.ck-tips { margin-top: var(--s0); padding-top: .75rem; border-top: 1px dashed var(--line-2); font-size: var(--fs--1); }
:is(.doc article, .doc-solo) .ck-tips .ck-tips-h { margin: 0; font-weight: 800; }
.ck-tips-h small { margin-left: .5rem; font-weight: 600; color: var(--muted); }
.ck-cond { display: none; }
@media screen { :is(.doc article, .doc-solo) .ck-out > .ck-cond + * { margin-top: 0; } }
/* 印刷：入力欄は刷らず、入力した条件・判定・構成の例を刷る（2026-10-19 外部レビュー P0-01） */
@media print { .ck { background: #fff; border-color: #999; } .ck-form { display: none; } .ck-cond { display: block; } }

/* ---------- ツールへの案内・1カラムのページ（2026-10-18） ---------- */
.tool-cta { margin-top: var(--s1); }
.tool-cta a { display: block; padding: 1rem 1.15rem; border-radius: 1rem; background: #fff1e8; border: 1px solid #f6c9ad; color: var(--ink); text-decoration: none; }
.tool-cta a:hover { border-color: var(--orange); }
.tool-cta b { display: block; font-size: var(--fs-0); }
.tool-cta b::after { content: " →"; }
.tool-cta span { display: block; margin-top: .25rem; font-size: var(--fs--1); color: var(--ink-2); }
.doc-solo .ck { margin-top: 0; }
.doc-solo .papers-fine { margin-top: var(--s1); font-size: var(--fs--1); color: var(--muted); line-height: 1.8; }

/* ---------- 解説の一覧のグループと、前後のページ（2026-10-18） ----------
   テーマごとのページを読む順に行き来できるように。長い1ページにしない。 */
.guide-group { margin-top: var(--s3); font-size: var(--fs-2); }
.guide-group:first-of-type { margin-top: 0; }
.guide-group small { display: block; margin-top: .3rem; font-size: var(--fs--1); font-weight: 600; color: var(--muted); }
.pager .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s0); padding-block: 0 var(--section); max-width: calc(var(--prose) + 14rem + var(--s4) + 2 * var(--gutter)); }
.pager a { display: block; padding: 1rem 1.15rem; border: 1px solid var(--line-2); border-radius: 1rem; text-decoration: none; color: var(--ink); font-weight: 800; line-height: 1.5; }
.pager a:hover { border-color: var(--ink); }
.pager small { display: block; font-size: var(--fs--1); font-weight: 600; color: var(--muted); }
.pager .prev small::before { content: "← "; }
.pager .next { text-align: right; }
.pager .next small::after { content: " →"; }
.doc-solo ul { padding-left: 1.4em; }
.doc-solo li + li { margin-top: .35rem; }
@media print { .pager { display: none; } }
main:has(> .pager) > .doc { padding-bottom: var(--s3); }

/* 委員会: 調査審議事項と安全ヨシの対応表 */
table.t.cover td.c { text-align: center; font-weight: 900; white-space: nowrap; }
.note-s { font-size: var(--fs--1); color: var(--muted); }
table.t.cover td:first-child { min-width: 10em; }
table.t.cover td:last-child { min-width: 15em; }

/* KYT のイラストシート（黒板に貼った紙のように） */
.example .kyt-sheet { margin: .75rem 0 0; background: #fff; border-radius: .4rem; padding: .5rem; box-shadow: 0 2px 0 rgb(0 0 0 / .35); transform: rotate(-.4deg); }
.example .kyt-sheet img { display: block; width: 100%; height: auto; border-radius: .25rem; }
.example .kyt-sheet figcaption { margin-top: .4rem; font-size: var(--fs--1); color: var(--ink-2); line-height: 1.6; }
@media print { .example .kyt-sheet { box-shadow: none; transform: none; border: 1px solid #999; } }
.note.warn { margin-top: var(--s1); padding: 1rem 1.15rem; border-radius: .9rem; background: #fdecea; border: 1px solid #f2b8b5; }
.note.warn p { color: var(--ink); }
table.t.cost td:nth-child(2), table.t.cost td:nth-child(3) { min-width: 9em; }

/* 黒板の中の図（リスクアセスメントの見積もりの例：改善前と改善後。2026-10-19） */
.example .board-fig { margin: .9rem 0 0; }
.example .board-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .9rem; }
.example .board-pair .label { margin: 0 0 .35rem; }
.example .board-pair svg { display: block; width: 100%; height: auto; }
.bd-line { fill: none; stroke: var(--chalk); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bd-thin { stroke: var(--chalk-2); stroke-width: 1.2; opacity: .7; }
.bd-wall { stroke-width: 4; }
.bd-shelf { fill: rgb(241 244 238 / .1); stroke: var(--chalk-2); stroke-width: 1.6; }
.bd-y { stroke: var(--chalk-y); }
.bd-dash { stroke-dasharray: 3 5; stroke-width: 1.6; opacity: .85; }
.bd-danger { fill: #f2a39b; }
.bd-danger-s { stroke: #f2a39b; stroke-width: 2.6; }
.bd-lane { fill: rgb(244 228 156 / .22); }
.bd-fence { stroke: var(--chalk-y); stroke-width: 2.4; }
.bd-post { fill: var(--chalk-y); }
.bd-mirror { fill: rgb(241 244 238 / .25); stroke: var(--chalk-y); stroke-width: 2.6; }
.bd-text { fill: var(--chalk); font-size: 13px; font-weight: 700; }
.bd-small { font-size: 11px; }
.bd-dark { fill: #1f4a39; font-size: 16px; }
.bd-pink { fill: #f2a39b; }
.bd-yt { fill: var(--chalk-y); }
@media print {
  .bd-line, .bd-shelf, .bd-mirror, .bd-danger-s { stroke: #000 !important; }
  .bd-text, .bd-pink, .bd-yt, .bd-post { fill: #000 !important; } .bd-fence { stroke: #000 !important; }
  .bd-danger { fill: #999 !important; } .bd-dark { fill: #fff !important; }
  .bd-lane { fill: #eee !important; } .bd-shelf { fill: #fff !important; }
}

/* ---------- トップ：初めて任された方への3つの入口（2026-10-19 外部レビュー P1-01） ---------- */
.problems.first-3 a { border-width: 2px; border-color: var(--ink); }
.problems.first-3 .ic { background: var(--orange); color: var(--orange-ink); }

/* ---------- 準備チェックリストと相談シート（2026-10-19） ---------- */
.prep-print { margin-top: var(--s1); }
.prep, .sheet { margin-top: var(--s1); padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line-2); border-radius: 1rem; }
:is(.doc article) .prep-h { margin: 0; font-weight: 800; font-size: var(--fs-1); }
.prep-list { list-style: none; padding: 0 !important; margin: var(--s0) 0 0; counter-reset: prep; }
:is(.doc article) .prep-list > li { margin: 0; padding: .9rem 0; border-top: 1px solid var(--line); counter-increment: prep; }
.prep-ck { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-0); cursor: pointer; }
.prep-ck b::before { content: counter(prep) ". "; }
.prep input[type=checkbox], .sheet input[type=checkbox] { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .3rem; accent-color: var(--ink); }
:is(.doc article) .prep-rule, :is(.doc article) .prep-do { margin-top: .35rem; padding-left: 1.9rem; font-size: var(--fs--1); line-height: 1.75; }
.prep-rule span, .prep-do span { display: inline-block; margin-right: .5rem; padding: 0 .45rem; border-radius: .35rem; font-size: .75rem; font-weight: 800; }
.prep-rule span { background: var(--ink); color: #fff; }
.prep-do span { background: #fff1e8; color: var(--orange-text); border: 1px solid #f6c9ad; }
.prep-in { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; padding-left: 1.9rem; }
.prep-in label { display: flex; align-items: center; gap: .4rem; font-size: var(--fs--1); font-weight: 700; flex: 1 1 10rem; }
.prep-in label span { flex: none; white-space: nowrap; }
.prep input[type=text], .sheet input[type=text], .sheet textarea { font: inherit; font-size: 1rem; min-height: 2.6rem; padding: .35rem .6rem; border: 1px solid var(--line-2); border-radius: .5rem; background: #fff; color: var(--ink); width: 100%; min-width: 0; }
.sheet-row { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-top: .75rem; }
.sheet-f { display: grid; gap: .25rem; font-size: var(--fs--1); font-weight: 700; }
:is(.doc article) .sheet-h { margin-top: var(--s1); font-weight: 800; }
.sheet-cks { display: grid; gap: .4rem; margin-top: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.sheet-ck { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fs--1); }
.sheet-ck input[type=checkbox] { margin-top: .15rem; }
.sheet-q { padding-left: 1.4rem !important; margin-top: .5rem; }
:is(.doc article) .sheet-q li { margin-top: .6rem; font-size: var(--fs--1); }
.sheet-q span { display: block; margin-bottom: .3rem; }
.sheet textarea { margin-top: .5rem; resize: vertical; }
:is(.doc article, .doc-solo) .ck-next { padding: .6rem .8rem; border-radius: .6rem; background: #fff1e8; font-size: var(--fs--1); }
@media print {
  .prep-print { display: none; }
  .prep, .sheet { border: 0; padding: 0; }
  .prep, .sheet { break-before: page; }
  .prep-list > li { break-inside: avoid; }
  .prep input[type=text], .sheet input[type=text], .sheet textarea { border: 0; border-bottom: 1px solid #000; border-radius: 0; min-height: 1.8rem; }
  .sheet textarea { border: 1px solid #000; min-height: 6rem; }
  .prep-rule span { background: #fff; color: #000; border: 1px solid #000; }
  .prep-do span { background: #fff; color: #000; border: 1px solid #000; }
}