/* ASHIBA：工事現場。打ちっぱなしのコンクリート、黒と黄色のトラ柄、単管の足場、ヘルメットのオレンジ */
:root {
  --bg: #e9e8e4;
  --surface: #f7f6f3;
  --surface-2: #efeee9;
  --ink: #1d1d1b;
  --muted: #6c6a64;
  --line: #d6d4cc;
  --accent: #1d1d1b;
  --accent-ink: #ffd400;
  --hot: #e2552d;
  --ok: #3e8e4f;
  --badge: #e2552d;
  --pmark: #ffd400;
  --side-dark: #ffd400;
  --side-ink: #f5f3ea;
  --side-pill: rgba(40, 40, 38, .92);
  --human-bg: #fff8cc;
  --human-line: #1d1d1b;
  --human-node: #ffd400;
  --bar-ink: #ffd400;
  --radius: 4px;
  --font-head: "Noto Sans JP", sans-serif;
  /* 黒い壁に、銀色の単管の足場（縦・横・すじかい） */
  --side:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='236' height='180'><g stroke='%23a9adb3' stroke-width='5' stroke-linecap='round' opacity='.55'><path d='M24 0 V180 M212 0 V180 M0 30 H236 M0 120 H236'/></g><g stroke='%23a9adb3' stroke-width='3' opacity='.3'><path d='M24 30 L212 120'/></g><g fill='%23d9dce0' opacity='.6'><circle cx='24' cy='30' r='6'/><circle cx='212' cy='30' r='6'/><circle cx='24' cy='120' r='6'/><circle cx='212' cy='120' r='6'/></g></svg>") 0 0 / 236px 180px,
    linear-gradient(180deg, #2a2a28, #1d1d1b);
}
body.resident {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.4  0 0 0 0 0.38  0 0 0 .09 0'/></filter><rect width='400' height='400' filter='url(%23c)'/><g fill='%23b9b7b0'><circle cx='40' cy='40' r='4'/><circle cx='240' cy='40' r='4'/><circle cx='40' cy='240' r='4'/><circle cx='240' cy='240' r='4'/></g></svg>") 0 0 / 400px 400px,
    #e9e8e4;
}
/* メニュー：上に黒と黄色のトラ柄 */
.r-side { border-radius: 4px; border-top: 16px solid transparent; border-image: repeating-linear-gradient(-45deg, #ffd400 0 14px, #1d1d1b 14px 28px) 16 0 0 0; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .55); }
.r-ptag { border: 0; background: #ffd400; color: #1d1d1b; font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: .16em; }
.r-menu a { color: #f5f3ea; }
.r-menu a.on { background: #ffd400; color: #1d1d1b; }
.r-menu a.on .ic { color: #1d1d1b; }
.r-pill { color: #f5f3ea; }
.r-pill.dark { background: #ffd400; color: #1d1d1b; font-weight: 800; }
.r-head h1 { font-weight: 900; letter-spacing: .02em; }
.r-crumb::before { content: "SITE OFFICE"; font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: .16em; color: #1d1d1b; background: #ffd400; padding: 0 6px; margin-right: 8px; }
.r-card { border-radius: 4px; box-shadow: 0 0 0 1px var(--line), 0 10px 20px -16px rgba(0, 0, 0, .5); }
.r-card h3 .ic, .r-note .ic { color: #e2552d; }
.r-kic { background: #1d1d1b; color: #ffd400; }
.r-lead { border-left: 8px solid transparent; border-image: repeating-linear-gradient(-45deg, #ffd400 0 8px, #1d1d1b 8px 16px) 0 0 0 8; }
.r-btn { border-radius: 4px; }
.r-btn.primary { background: #ffd400; color: #1d1d1b; box-shadow: 0 3px 0 #1d1d1b; }
.r-node.has .r-n { background: #ffd400; color: #1d1d1b; }
.r-chat-head { background: #1d1d1b; color: #ffd400; box-shadow: inset 0 -5px 0 #ffd400; }
.r-chat-x { color: #ffd400; }