:root {
  font:16px/1.72 -apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color:#24312b; background:#edf3ef;
  --ink:#24312b; --deep:#244638; --accent:#3f7550; --gold:#966d25;
  --paper:#fff; --line:#cbd8d0; --muted:#5b6d63; --wash:#f4f8f5;
  --ok:#176747; --wait:#875817; --bad:#973a3a;
}
* { box-sizing:border-box; }
body { margin:0; overflow-x:hidden; }
h1,h2,h3,p,dl { margin:0; }
h1 { margin:8px 0; font-size:1.68rem; line-height:1.45; }
h2 { margin-bottom:18px; font-size:1.3rem; line-height:1.5; }
h3 { margin:14px 0 8px; font-size:1.08rem; }
p { margin:10px 0 16px; }
a { color:#2f6d43; text-underline-offset:4px; }
a,button,input,select,textarea,p,dt,dd,strong,span { overflow-wrap:anywhere; }
button,input,select,textarea { font:inherit; }
button,input,select,textarea,a { touch-action:manipulation; }
button { padding:10px 16px; border:1px solid var(--accent); border-radius:5px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; }
button.secondary { border-color:#80948a; background:#fff; color:var(--deep); }
button:disabled { cursor:not-allowed; opacity:.55; }
:focus-visible { outline:3px solid #dfaa38; outline-offset:3px; }
label { display:block; margin:12px 0 5px; font-size:.875rem; font-weight:700; }
input,select,textarea { width:100%; max-width:100%; min-width:0; padding:10px 12px; border:1px solid #9aafa3; border-radius:4px; background:#fff; color:var(--ink); }
textarea { min-height:88px; resize:vertical; }
.app { width:min(100%,1420px); margin:0 auto; padding:24px; }
.mast { position:relative; overflow:hidden; padding:24px 28px; border-radius:8px; background:var(--deep); color:#fff; }
.mast::after { position:absolute; inset:0; background:repeating-linear-gradient(120deg,transparent 0 82px,rgba(255,255,255,.04) 82px 126px); content:""; pointer-events:none; }
.mast > * { position:relative; z-index:1; }
.mast p { margin:0; }
.eyebrow { color:#dceee4; font-size:.875rem; letter-spacing:.08em; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:14px 0; }
.steps a { min-width:0; padding:10px; border:1px solid var(--line); border-radius:4px; background:#fff; font-size:.875rem; text-decoration:none; }
.steps a[aria-current="page"] { border-color:#6b9877; background:#e7f2e9; color:#275f38; font-weight:700; }
.toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:14px; margin:20px 0; }
.toolbar > div { flex:1 1 430px; min-width:0; }
.toolbar label,.toolbar p { margin:0 0 5px; font-size:.875rem; }
.toolbar p { margin:0; }
.message { position:sticky; top:5px; z-index:8; margin:12px 0; padding:13px 18px; border:1px solid #79aa8a; border-radius:5px; background:#e7f4eb; color:#225a3d; }
.message:empty { display:none; }
.message--error { border-color:#d29b96; background:#fff0ef; color:#8d332d; }
.layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.layout--wide { grid-template-columns:minmax(0,1.35fr) minmax(360px,.8fr); }
.layout > div { min-width:0; }
.panel { min-width:0; margin-bottom:20px; padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
.metric { min-width:0; padding:16px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.metric span,.metric small { display:block; color:var(--muted); font-size:.875rem; }
.metric strong { display:block; color:var(--deep); font-size:1.38rem; }
.cardgrid,.tree-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.card,.checkcard,.tree-card,.box-card { min-width:0; padding:17px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.card.selected,.tree-card.selected { border-color:#6b9877; background:#f5fbf5; }
.cardhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.cardhead strong { font-size:1.04rem; }
.status { display:inline-block; padding:3px 9px; border-radius:4px; background:#e8efeb; color:#43564c; font-size:.875rem; font-weight:700; }
.status.ok { background:#def1e7; color:var(--ok); }
.status.wait { background:#fff0d8; color:var(--wait); }
.status.bad { background:#f9e0e0; color:var(--bad); }
.kv { display:grid; grid-template-columns:minmax(120px,.75fr) minmax(0,1.55fr); gap:0 14px; margin:8px 0; }
.kv dt,.kv dd { margin:0; padding:9px 0; border-bottom:1px solid #e2e9e4; }
.kv dt { color:var(--muted); font-size:.875rem; font-weight:700; }
.fieldgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 15px; }
.fieldgrid > div { min-width:0; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:15px 0 7px; }
.notice { margin:14px 0; padding:14px 16px; border:1px solid #d4bf91; border-radius:5px; background:#fff9e9; }
.notice.error { border-color:#d4a39e; background:#fff0ef; color:#87332d; }
.notice.teal { border-color:#9bc3a3; background:#ecf6ed; }
.tasks { padding-left:22px; }
.tasks li { margin:8px 0; }
.empty { padding:18px; border:1px dashed #a9b8af; background:#fafcfb; color:var(--muted); text-align:center; }
.checkgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.checkcard strong { display:block; margin-bottom:6px; }
.tree-photo { overflow:hidden; margin:12px 0 16px; border:1px solid #b9c9bf; border-radius:5px; background:#f8f7f2; }
.tree-photo img { display:block; width:100%; aspect-ratio:3/2; object-fit:contain; background:#f8f7f2; }
.tree-photo figcaption { padding:7px 10px; background:#f1f5f2; color:var(--muted); font-size:.875rem; font-weight:700; }
.flowline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:18px 0 22px; }
.flowline > div { position:relative; min-width:0; padding:18px; border:1px solid var(--line); background:#fff; }
.flowline > div:not(:last-child)::after { position:absolute; top:50%; right:-19px; color:var(--gold); content:"→"; font-size:1.5rem; font-weight:700; transform:translateY(-50%); }
.flowline strong,.flowline span { display:block; }
.flowline span { margin-top:8px; }
.event { margin-bottom:10px; padding:12px 14px; border-left:4px solid #759b7d; background:#f5f8f5; }
.event span { display:block; color:var(--muted); font-size:.875rem; }
.small,.footer { color:var(--muted); font-size:.875rem; }
.footer { margin-top:24px; }
details { margin:10px 0; padding:10px 12px; border:1px solid var(--line); background:#fff; }
summary { cursor:pointer; font-weight:700; }

@media (max-width:1050px) {
  .layout,.layout--wide { grid-template-columns:1fr; }
  .checkgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .app { padding:14px; }
  .mast { padding:20px; }
  h1 { font-size:1.42rem; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metrics,.cardgrid,.tree-grid,.checkgrid,.flowline { grid-template-columns:1fr; }
  .flowline > div:not(:last-child)::after { display:none; }
  .panel { padding:16px; }
  .fieldgrid { grid-template-columns:1fr; }
  .kv { grid-template-columns:105px minmax(0,1fr); }
}