/* TOBIRA：ミニマルな販売オフィス。木のルーバー天井、ヘリンボーンの床、墨色の壁と家具、白い余白、細く太い英字の看板 */
:root {
  --bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #f6f3ee;
  --ink: #232323;
  --muted: #7b7670;
  --line: #e4dfd7;
  --accent: #232323;
  --accent-ink: #ffffff;
  --hot: #c2562f;
  --ok: #5f8a55;
  --badge: #b8875a;
  --pmark: #b8875a;
  --side-dark: #b8875a;
  --side-ink: #f3ece2;
  --side-pill: rgba(35, 35, 35, .88);
  --human-bg: #f6efe5;
  --human-line: #b8875a;
  --human-node: #e3c7a4;
  --bar-ink: #e3c7a4;
  --radius: 6px;
  --font-head: "Noto Sans JP", sans-serif;
  /* 墨色の壁に、木のルーバー（縦の細い板とすき間） */
  --side:
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 70%, rgba(0, 0, 0, .45)),
    repeating-linear-gradient(90deg, #b8875a 0 9px, #8f6440 9px 10px, #2a2622 10px 19px),
    #2a2622;
}
/* 床のヘリンボーン（とても薄く） */
body.resident {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23d8cdbf' stroke-width='1'><path d='M0 40 L40 0 M20 60 L60 20 M40 80 L80 40 M0 0 L40 40 M40 40 L80 80 M-20 20 L20 60'/></g></svg>") 0 0 / 80px 80px,
    #f4f2ee;
}
.r-side { border-radius: 6px; box-shadow: inset 0 18px 30px -18px rgba(255, 220, 170, .6), 0 24px 50px -16px rgba(0, 0, 0, .5); }
.r-ptag { border: 0; background: #f3ece2; color: #232323; font-family: "Oswald", sans-serif; font-weight: 700; letter-spacing: .2em; }
.r-menu a { color: #f3ece2; }
.r-menu a.on { background: #f3ece2; color: #232323; }
.r-menu a.on .ic { color: #b8875a; }
.r-pill { color: #f3ece2; }
.r-pill.dark { background: #b8875a; color: #fff; }
/* 見出し：太い英字の看板のように */
.r-head h1 { font-weight: 900; letter-spacing: .04em; }
.r-crumb::before { content: "REAL ESTATE OFFICE"; font-family: "Oswald", sans-serif; font-weight: 500; letter-spacing: .22em; color: #b8875a; margin-right: 8px; }
.r-card { border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 14px 26px -20px rgba(0, 0, 0, .45); }
.r-card h3 .ic, .r-note .ic { color: #b8875a; }
.r-kic { background: #232323; color: #e3c7a4; }
.r-lead { border-left: 5px solid #b8875a; }
.r-btn { border-radius: 4px; }
.r-btn.primary { background: #232323; color: #fff; }
.r-btn.primary .ic { color: #e3c7a4; }
.r-chat-head { background: #232323; color: #fff; box-shadow: inset 0 -4px 0 #b8875a; }
.r-chat-x { color: #fff; }

/* ── 不動産の仕組み ── */
.em-wrap { display: grid; gap: 16px; }
@media (min-width: 1180px) { .em-wrap { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.em-fig { margin: 0; padding: 16px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -28px rgba(0, 0, 0, .5); }
.em-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.em-cap b { font-size: 20px; font-weight: 900; letter-spacing: .04em; }
.em-cap span { font-size: 12px; color: var(--muted); }
.em-fig svg { display: block; width: 100%; height: auto; font-family: "Noto Sans JP", sans-serif; }
.em-box rect:first-child { fill: #f6f3ee; stroke: #cfc6ba; stroke-width: 2; transition: fill .2s, stroke .2s; }
.em-box { cursor: pointer; outline: none; }
.em-box:hover rect:first-child, .em-box:focus rect:first-child { stroke: #8f6440; }
.em-box.on rect:first-child { stroke: #232323; stroke-width: 3; }
.em-box.ours rect:first-child { fill: #fbf6ef; stroke: #b8875a; stroke-width: 3; }
.em-box.ours.on rect:first-child { stroke: #232323; }
.em-ribbon { fill: #232323; }
.em-ribbon-t { fill: #e3c7a4; font-size: 12px; font-weight: 700; }
.em-t { fill: #232323; font-size: 26px; font-weight: 900; letter-spacing: .04em; }
.em-t.sm { font-size: 22px; }
.em-s { fill: #7b7670; font-size: 16px; font-weight: 700; }
.em-sub { fill: #ece4d8; }
.em-subt { fill: #5a4632; font-size: 18px; font-weight: 700; }
.em-box[data-box="owner"] .em-t:first-of-type { font-size: 21px; }
.em-bldg rect { fill: #3b3733; }
.em-bldg .win { fill: #e3c7a4; opacity: .7; }
.em-arrow polygon { fill: #4a4540; }
.em-arrow text { fill: #fff; font-size: 15px; font-weight: 700; }
.em-arrow.work polygon { fill: #8f6440; }
.em-arrow.working polygon { fill: #b8875a; }
.em-ai { cursor: pointer; outline: none; }
.em-ai .ring { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 4 5; opacity: .7; }
.em-ai .dot { fill: var(--c); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.em-ai .mk { fill: #fff; font-size: 19px; font-weight: 900; }
.em-ai .tag { fill: #232323; }
.em-ai .tagt { fill: #fff; font-size: 12px; font-weight: 700; }
.em-ai.on .ring { stroke-dasharray: none; stroke-width: 4; opacity: 1; }
.em-ai.working .tag { fill: var(--c); }
.em-ai.working .tagt::after { content: ""; }
.em-ai.got .dot { animation: emGot 1.2s ease-out; }
@keyframes emGot { 0% { stroke-width: 3; } 30% { stroke-width: 10; stroke: #e3c7a4; } 100% { stroke-width: 3; } }
.em-side { display: grid; gap: 12px; }
.em-side h3 { margin: 6px 0 0; font-size: 15px; }
.em-card { padding: 16px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 16px 30px -24px rgba(0, 0, 0, .5); }
.em-k { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.em-ours { font-size: 11px; font-weight: 700; color: #e3c7a4; background: #232323; padding: 1px 8px; border-radius: 4px; }
.em-role { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.em-tb { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.em-tb th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 500; padding: 4px 4px 6px; border-bottom: 1px solid var(--line); }
.em-tb td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.em-tb .b { color: var(--muted); text-decoration: line-through; white-space: nowrap; }
.em-tb .n { color: #8f6440; font-weight: 800; }
.em-talk { margin-top: 12px; width: 100%; justify-content: center; }
.em-h { margin: 8px 0 6px; font-size: 12px; color: #8f6440; font-weight: 700; }
.em-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.em-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-weight: 700; cursor: pointer; }
.em-st { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.em-st.on { box-shadow: 0 0 0 2px #b8875a; }
.em-st div { display: grid; min-width: 0; }
.em-st b { font-size: 13px; }
.em-st small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .em-ai.got .dot { animation: none; } }