/* 役割別ガイド（site-admin.html・viewer.html）の共通スタイル。色・書体は index.html（サービスガイド）にそろえる */
html,body{margin:0;padding:0;background:#F6F6F4;color:#17171A;font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans CJK JP',Meiryo,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.8;}
*{box-sizing:border-box;}
a{color:#E8590C;text-decoration:none;}
a:hover{color:#B84205;text-decoration:underline;}
::selection{background:#E8590C;color:#fff;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
.in{max-width:880px;margin:0 auto;padding:0 24px;}
.hd{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid #E7E7E2;}
.hd .in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:16px;color:#17171A;letter-spacing:.02em;}
.brand:hover{color:#17171A;text-decoration:none;}
.brand sup{font-size:.5em;font-weight:500;line-height:0;}
.mark{display:grid;grid-template-columns:8px 8px;gap:3px;}
.mark i{width:8px;height:8px;border-radius:2.5px;background:#17171A;}
.mark i:nth-child(2){background:#E8590C;}
.badge{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;color:#E8590C;border:1px solid #F3C4AB;border-radius:99px;padding:2px 8px;background:#FFF6F1;font-weight:500;}
.hn{display:flex;gap:16px;font-size:13px;font-weight:500;}
.crumb{font-size:12px;color:#8A8A85;margin:28px 0 14px;}
.role-tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;font-weight:600;border-radius:99px;padding:3px 12px;}
.role-tag.admin{background:#17171A;color:#fff;}
.role-tag.viewer{background:#fff;color:#17171A;border:1px solid #17171A;}
h1{font-size:36px;font-weight:900;line-height:1.25;margin:12px 0 14px;letter-spacing:.01em;}
.lead{font-size:15.5px;margin:0 0 10px;}
.note{font-size:13px;color:#55554F;background:#fff;border:1px solid #E7E7E2;border-left:3px solid #E8590C;border-radius:8px;padding:10px 14px;margin:14px 0;}
.small{font-size:12px;color:#55554F;margin:8px 0 0;}
.toc{display:flex;flex-wrap:wrap;gap:6px 8px;margin:22px 0 8px;}
.toc a{font-size:12.5px;font-weight:500;color:#17171A;background:#fff;border:1px solid #E7E7E2;border-radius:99px;padding:5px 12px;}
.toc a:hover{border-color:#E8590C;color:#E8590C;text-decoration:none;}
section{background:#fff;border:1px solid #E7E7E2;border-radius:14px;padding:26px 28px;margin:18px 0;scroll-margin-top:72px;}
h2{font-size:22px;font-weight:900;line-height:1.4;margin:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
h2 .no{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:#fff;background:#E8590C;border-radius:6px;padding:1px 8px;}
h3{font-size:15px;font-weight:700;margin:20px 0 8px;}
h3.mt{margin-top:16px;}
p{margin:0 0 10px;font-size:14.5px;}
.pl{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;font-weight:600;color:#fff;background:#17171A;border-radius:4px;padding:1px 6px;vertical-align:2px;}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 4px;}
table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.6;}
th{text-align:left;font-size:12px;font-weight:700;color:#55554F;background:#F6F6F4;padding:9px 12px;border-bottom:1px solid #E7E7E2;white-space:nowrap;}
th small{font-weight:500;color:#8A8A85;}
td{padding:10px 12px;border-bottom:1px solid #EFEFEA;vertical-align:top;}
td.y,td.m,td.n{text-align:center;white-space:nowrap;font-weight:700;}
td.y{color:#1A7F37;}
td.m{color:#9A6700;font-weight:500;font-size:12.5px;}
td.n{color:#8A8A85;font-weight:500;font-size:12.5px;}
.steps{list-style:none;counter-reset:s;padding:0;margin:8px 0;}
.steps li{counter-increment:s;position:relative;padding:0 0 14px 44px;font-size:14.5px;}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;background:#17171A;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.steps li > b{display:block;font-size:15px;}
.steps li > span{display:block;color:#3A3A36;}
.dots{margin:6px 0 8px;padding-left:1.2em;font-size:14.5px;}
.dots li{margin:4px 0;}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin:8px 0;}
.card{border:1px solid #E7E7E2;border-radius:12px;padding:16px 18px;}
.card h3{margin:0 0 6px;}
.card.ok{border-top:3px solid #1A7F37;}
.card.ng{border-top:3px solid #E8590C;}
.faq dt{font-weight:700;font-size:14.5px;margin:14px 0 4px;}
.faq dt::before{content:"Q. ";color:#E8590C;}
.faq dd{margin:0;font-size:14px;color:#3A3A36;}
.ft{font-size:11.5px;color:#8A8A85;padding:24px 0 48px;line-height:1.9;}
@media (max-width:600px){
  .in{padding:0 16px;}
  h1{font-size:28px;}
  section{padding:20px 18px;}
  h2{font-size:19px;}
  .hn{gap:12px;font-size:12px;}
  th,td{padding:8px 9px;}
}
@media print{.hd,.toc{display:none}section{break-inside:avoid;border-color:#ccc}}