:root { --ink:#1d2433; --sub:#5b6475; --line:#d5dbe5; --brand:#1f4e79; --bg:#f5f7fa; --soft:#eef3f9; --warn:#9a5b00; --warnbg:#fff4e0; --ok:#1e7a46; --okbg:#e8f5ee; --ng:#b00020; --ngbg:#fde8eb; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.6 "Yu Gothic UI","Yu Gothic",Meiryo,sans-serif; }
a { color:var(--brand); }
.topnote { background:#fff3c4; border-bottom:1px solid #e6c84a; text-align:center; font-size:12.5px; padding:3px; }
header { background:var(--brand); color:#fff; }
header .in { max-width:1150px; margin:0 auto; padding:10px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
header .brand { color:#fff; font-weight:bold; font-size:16px; text-decoration:none; } header span { font-size:13px; opacity:.9; }
header nav.top a { color:#fff; margin-left:16px; font-size:13px; text-decoration:none; } header nav.top a:hover { text-decoration:underline; }
.badge { background:#eb6834; color:#fff; border-radius:9px; padding:0 6px; font-size:11px; }
.alertbar { background:#fff4e0; border-bottom:1px solid #e6b45a; color:#5c3d00; text-align:center; padding:6px; font-size:13px; }
tr.newrow td { background:#fffaf0; }
.wrap { max-width:1150px; margin:0 auto; padding:14px 16px 40px; display:grid; grid-template-columns:220px 1fr; gap:16px; }
.wrap.single { grid-template-columns:1fr; }
nav.steps { position:sticky; top:12px; align-self:start; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px; }
nav.steps a { display:block; padding:6px 8px; border-radius:6px; margin:2px 0; font-size:13px; color:var(--ink); text-decoration:none; }
nav.steps a:hover { background:var(--soft); }
nav.steps a.on { background:var(--soft); color:var(--brand); font-weight:bold; }
nav.steps a.done::after { content:" ✓"; color:var(--ok); }
nav.steps a.go { margin-top:8px; background:var(--brand); color:#fff; text-align:center; font-weight:bold; }
nav.steps .n { display:inline-block; width:20px; height:20px; border-radius:50%; background:var(--brand); color:#fff; text-align:center; font-size:11.5px; line-height:20px; margin-right:6px; }
.navnote { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; color:var(--sub); font-size:12px; }
section { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 18px; margin-bottom:14px; }
h2 { font-size:16px; color:var(--brand); margin:0 0 4px; }
h2 .n { background:var(--brand); color:#fff; border-radius:50%; display:inline-block; width:24px; height:24px; text-align:center; line-height:24px; font-size:13px; margin-right:6px; }
.desc { color:var(--sub); font-size:12.5px; margin:0 0 10px; }
.sub2 { font-weight:bold; color:var(--brand); font-size:13.5px; margin:8px 0 4px; cursor:default; }
details summary.sub2 { cursor:pointer; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px 14px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin-top:6px; } .span2 { grid-column:span 2; }
label { display:block; font-size:12.5px; color:var(--sub); }
input, select, textarea { display:block; width:100%; margin-top:3px; border:1px solid #b8c2d0; border-radius:6px; padding:6px 9px; background:#fff; color:var(--ink); font:inherit; font-size:14px; }
input[type=checkbox], input[type=radio] { display:inline; width:auto; margin:0 5px 0 0; vertical-align:-2px; }
input[type=file] { display:inline-block; width:auto; border:0; padding:0; }
input:disabled { background:#f3f5f8; color:var(--sub); }
input.r { text-align:right; }
small { display:block; font-size:11.5px; color:var(--sub); margin-top:2px; }
.radio-line { display:block; font-size:13.5px; color:var(--ink); margin:3px 0; }
.req { color:var(--ng); font-size:11px; }
.drop { border:2px dashed #9fb3c8; border-radius:8px; padding:10px 12px; background:#fafcff; margin-bottom:8px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { border:1px solid var(--line); padding:4px 7px; text-align:left; vertical-align:middle; }
th { background:var(--soft); color:var(--brand); font-weight:bold; font-size:12.5px; }
table.compact td { padding:2px 4px; } table.compact input { margin:0; padding:4px 6px; font-size:13px; }
td.c { text-align:center; } tr.outrange td { background:var(--warnbg); }
.scroll { max-height:460px; overflow:auto; border:1px solid var(--line); border-radius:6px; }
.scroll table { border:0; } .scroll th { position:sticky; top:0; z-index:1; }
.plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.plan { border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.plan .t { font-weight:bold; font-size:14px; } .plan.a .t { color:#5b6475; } .plan.b .t { color:#2a78d6; } .plan.c .t { color:#eb6834; }
.pill { display:inline-block; border-radius:10px; padding:0 8px; font-size:11.5px; font-weight:bold; margin-left:6px; }
.pill.ok { background:var(--okbg); color:var(--ok); } .pill.warn { background:var(--warnbg); color:var(--warn); }
.check { background:var(--okbg); border-left:4px solid var(--ok); padding:8px 12px; border-radius:4px; font-size:13px; margin-top:10px; }
.check.muted { background:var(--soft); border-color:#9fb3c8; }
.msg { background:var(--okbg); color:var(--ok); padding:8px 12px; border-radius:6px; margin-bottom:8px; }
.err { background:var(--ngbg); color:var(--ng); padding:8px 12px; border-radius:6px; margin-bottom:8px; }
.warnbox { background:var(--warnbg); border-left:4px solid var(--warn); padding:8px 12px; border-radius:4px; margin-bottom:10px; font-size:13px; }
.warnbox ul { margin:4px 0; padding-left:1.3em; }
.muted { color:var(--sub); } .small { font-size:12px; } .warn { color:var(--warn); }
.bar { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.btn { display:inline-block; padding:8px 18px; border-radius:6px; border:1px solid #b8c2d0; background:#fff; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; text-decoration:none; }
.btn.primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.danger { color:var(--ng); border-color:#e3a5b0; }
.btn.small { padding:4px 12px; font-size:13px; }
.inline { display:inline; } td.actions { white-space:nowrap; } td.actions .btn { margin-right:4px; }
@media (max-width: 860px) { .wrap { grid-template-columns:1fr; } nav.steps { position:static; } .grid, .plans { grid-template-columns:1fr; } }
/* ログイン・利用者の管理（試作品②） */
header nav.top { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
header nav.top .who { margin-left:16px; font-size:12.5px; opacity:.85; }
.linkbtn { background:none; border:0; color:#fff; font:inherit; font-size:13px; margin-left:16px; cursor:pointer; padding:0; }
.linkbtn:hover { text-decoration:underline; }
.loginbox { max-width:420px; margin:40px auto; }
.loginbox label, .narrowform label { margin-bottom:10px; }
.narrowform { max-width:420px; }
.loginbox pre { background:#f3f5f8; padding:8px; border-radius:6px; white-space:pre-wrap; font-size:12px; }
.grid4 { display:grid; grid-template-columns:repeat(4, 1fr) auto; gap:10px; align-items:end; }
tr.disabled td { color:var(--sub); background:#f6f6f6; }
td.num { text-align:right; } .mono { font-family:Consolas, monospace; }
table.small td, table.small th { font-size:12px; }
@media (max-width:800px) { .grid4 { grid-template-columns:1fr; } }

/* ── K2 かんたん診断（RAKLUMO）で足したもの ── */
.brand small { font-size:12px; font-weight:normal; color:#fff; opacity:.85; margin-left:6px; }
.freefoot { max-width:1100px; margin:18px auto 24px; padding:0 16px; font-size:12px; color:#666; line-height:1.6; }
section.result { border:2px solid var(--brand); }
section.result h3 { margin:16px 0 6px; font-size:15px; }
details { margin-top:12px; }
details.notes ul { margin:6px 0 6px 18px; padding:0; line-height:1.7; }