/* NAMI：黒地に、太い白のリボンの波。大きな明朝の英字、モノクロの紙の質感、ところどころに色の入った多面体のかけら */
:root {
  --bg: #111111;
  --surface: #1b1b1b;
  --surface-2: #232323;
  --ink: #f2f0ea;
  --muted: #9b978e;
  --line: #2e2e2e;
  --accent: #f2f0ea;
  --accent-ink: #111111;
  --hot: #ff5a5f;
  --ok: #2ec4b6;
  --badge: #ff5a5f;
  --pmark: #ff5a5f;
  --side-dark: #f2f0ea;
  --side-ink: #111111;
  --side-pill: rgba(255, 255, 255, .92);
  --human-bg: rgba(255, 255, 255, .06);
  --human-line: rgba(255, 255, 255, .5);
  --human-node: #f2f0ea;
  --bar-ink: #f2f0ea;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 30px -14px rgba(0, 0, 0, .8);
  --font-head: "Shippori Mincho", serif;
  /* メニュー：白い紙に、黒い波のリボン */
  --side:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='236' height='520'><path d='M-20 80 C 60 0, 160 0, 150 110 S 20 230, 90 300 S 260 360, 200 460 S 40 560, 60 600' fill='none' stroke='%23111' stroke-width='26' stroke-linecap='round' opacity='.07'/></svg>") 0 0 / 236px 520px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .08 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
    #f2f0ea;
}
body.resident {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
    #111111;
}
.r-side { border-radius: 4px; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .9); }
.r-ptag { border: 0; background: #111; color: #f2f0ea; font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: .3em; font-size: 14px; }
.r-menu a.on { background: #111; color: #f2f0ea; }
.r-menu a.on .ic { color: #ff5a5f; }
.r-pill.dark { background: #111; color: #f2f0ea; }
.r-head h1 { font-family: "Shippori Mincho", serif; font-weight: 600; letter-spacing: .08em; }
.r-crumb::before { content: "SNS MARKETING SCHOOL"; font-family: "Cormorant Garamond", serif; letter-spacing: .3em; color: #f2f0ea; margin-right: 8px; }
.r-card { box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.r-card h3 .ic, .r-note .ic { color: #ff5a5f; }
.r-kic { background: #f2f0ea; color: #111; }
.r-lead { border-left: 3px solid #f2f0ea; }
.r-btn { color: var(--ink); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.r-btn.primary { background: #f2f0ea; color: #111; }
.r-btn.primary .ic { color: #ff5a5f; }
.r-node.human, .r-node.human .who, .r-legend .human::before { color: #111; }
.r-node.human small { color: rgba(17, 17, 17, .7); }
.r-node.has .r-n { background: #f2f0ea; color: #111; }
.r-wf-bar { background: #000; box-shadow: inset 0 0 0 1px #333; }
.r-ava { box-shadow: 0 0 0 2px #1b1b1b; }
.toast { background: #f2f0ea; color: #111; }
.r-msg p { color: var(--ink); }
.r-chat-head { background: #111; color: #f2f0ea; box-shadow: inset 0 -3px 0 #f2f0ea; }
.r-chat-x { color: #f2f0ea; }
textarea, input { color: var(--ink); }
.r-rules textarea, .r-chat-ask input { background: var(--surface-2); }
.wait .r-state { background: rgba(255, 90, 95, .18); }
.r-flow li.human, .r-kcol.human { background: rgba(255, 255, 255, .05); }

/* ── 会員サイト ── */
.nm-site { display: grid; gap: 16px; }
.nm-hero { position: relative; overflow: hidden; min-height: 300px; padding: 18px 26px 26px; border-radius: 6px; background: radial-gradient(70% 90% at 30% 20%, #2a2a2a, #0c0c0c); box-shadow: inset 0 0 0 1px #2a2a2a; }
.nm-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.nm-wave path { fill: none; stroke: #f2f0ea; stroke-width: 54; stroke-linecap: round; opacity: .95; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)); }
.nm-gem { position: absolute; width: 80px; height: 80px; clip-path: polygon(50% 0, 100% 30%, 86% 88%, 22% 100%, 0 40%); box-shadow: inset 0 0 0 2px #fff; }
.nm-gem.g1 { right: 7%; top: 18%; background: conic-gradient(from 30deg, #ff5a5f, #7b61ff, #2ec4b6, #ffb800, #ff5a5f); transform: rotate(12deg); }
.nm-gem.g2 { left: 4%; bottom: 14%; width: 62px; height: 62px; background: linear-gradient(135deg, #ffb800 0 30%, #2ec4b6 30% 60%, #ff5a5f 60%); transform: rotate(-18deg); }
.nm-gem.g3 { right: 30%; bottom: 8%; width: 34px; height: 34px; background: linear-gradient(135deg, #7b61ff, #ff5a5f); }
.nm-nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-family: "Cormorant Garamond", serif; font-size: 12.5px; letter-spacing: .2em; color: #cfccc4; }
.nm-nav b { margin-right: auto; display: grid; font-size: 28px; font-weight: 600; letter-spacing: .12em; color: #fff; line-height: 1; }
.nm-nav b small { font-size: 9px; letter-spacing: .24em; color: #9b978e; }
.nm-hello { position: relative; margin-top: 18px; }
.nm-big { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(40px, 6vw, 76px); line-height: .95; letter-spacing: .04em; color: #fff; mix-blend-mode: difference; }
.nm-sub { margin: 14px 0 0; font-size: 15px; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.nm-sub b { margin-left: 10px; font-size: 12px; padding: 2px 10px; border-radius: 99px; background: #ff5a5f; }
.nm-ring { position: absolute; right: 26px; bottom: 22px; width: 116px; height: 116px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, #111 79%, transparent 80% 100%), conic-gradient(#ff5a5f calc(var(--p) * 1%), #3a3a3a 0); }
.nm-ring b { font-family: "Cormorant Garamond", serif; font-size: 36px; color: #fff; line-height: 1; }
.nm-ring b small { font-size: 16px; }
.nm-ring span { font-size: 10.5px; color: #cfccc4; }
.nm-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.nm-card { position: relative; padding: 16px 16px 18px; border-radius: 6px; background: #1b1b1b; box-shadow: inset 0 0 0 1px #2e2e2e; }
.nm-card h3 { margin: 4px 0 8px; font-family: "Shippori Mincho", serif; font-size: 18px; font-weight: 600; }
.nm-card p { margin: 0 0 6px; font-size: 13px; color: #cfccc4; }
.nm-k { font-size: 11px !important; letter-spacing: .14em; color: #9b978e !important; margin-top: 26px !important; }
.nm-by { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 99px; background: #262626; font-size: 10.5px; cursor: pointer; box-shadow: inset 0 0 0 1px #333; }
.nm-by em { font-style: normal; color: #cfccc4; }
.nm-by.working { box-shadow: inset 0 0 0 1px var(--c); }
.nm-by.working em::before { content: "作業中・"; color: var(--c); font-weight: 700; }
.nm-by.got { animation: nmGot 1.2s ease-out; }
@keyframes nmGot { 0% { box-shadow: 0 0 0 0 var(--c); } 100% { box-shadow: 0 0 0 12px transparent; } }
.nm-btn { margin-top: 6px; padding: 10px 18px; border: 0; border-radius: 99px; background: #f2f0ea; color: #111; font-weight: 800; cursor: pointer; }
.nm-state { font-size: 11.5px !important; color: #9b978e !important; margin-top: 8px !important; }
.nm-meter { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nm-meter li { display: grid; grid-template-columns: 96px auto; gap: 2px 8px; align-items: center; font-size: 13px; }
.nm-meter i { font-style: normal; justify-self: start; font-size: 11px; font-weight: 800; padding: 1px 10px; border-radius: 99px; }
.nm-meter i.good { background: #2ec4b6; color: #062320; }
.nm-meter i.ok { background: #ffb800; color: #2a1d00; }
.nm-meter small { grid-column: 1 / -1; color: #9b978e; font-size: 11.5px; }
.nm-note { margin-top: 10px !important; font-size: 12px !important; border-left: 2px solid #ff5a5f; padding-left: 8px; }
.nm-arc { font-size: 12px !important; color: #7b61ff !important; }
.nm-ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nm-ch button { width: 100%; display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font-size: 13px; border-bottom: 1px solid #2a2a2a; }
.nm-ch i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #555; }
.nm-ch button.done i { background: #ff5a5f; box-shadow: none; }
.nm-ch button.done span { color: #9b978e; }
.nm-ch small { color: #9b978e; font-size: 11px; }
.nm-post { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #2a2a2a; }
.nm-post b { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.nm-post b small, .nm-post > div > small { color: #9b978e; font-size: 11px; font-weight: 400; }
.nm-post p { margin: 2px 0; font-size: 12.5px; }
.nm-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, #ff5a5f, #7b61ff); color: #fff; font-size: 13px; }
.nm-join { background: linear-gradient(135deg, #f2f0ea, #e3dfd5); }
.nm-join h3, .nm-join p { color: #111 !important; }
.nm-join .nm-k { color: #6b675f !important; }
@media (max-width: 760px) { .nm-ring { position: relative; right: auto; bottom: auto; margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .nm-by.got { animation: none; } }

/* ── 受講生カルテ（アカウント診断） ── */
.nm-kt { --kt: #ff5a5f; }
.nm-kt .kt-card, .nm-kt .kt-list button, .nm-kt .kt-by { background: #1b1b1b; box-shadow: inset 0 0 0 1px #2e2e2e; }
.nm-kt .kt-list button.on { box-shadow: inset 0 0 0 2px #ff5a5f; }
.nm-kt .kt-head h3 { font-family: "Shippori Mincho", serif; font-weight: 600; }
.nm-kt .kt-k { font-family: "Cormorant Garamond", serif; letter-spacing: .2em; color: #9b978e; }
.nm-kt .kt-av { background: linear-gradient(135deg, #ff5a5f, #7b61ff); }
.kt-risk { position: absolute; right: 10px; top: 12px; width: 8px; height: 8px; border-radius: 50%; }
.kt-risk.r1 { background: #2ec4b6; } .kt-risk.r2 { background: #ffb800; } .kt-risk.r3 { background: #ff5a5f; box-shadow: 0 0 8px #ff5a5f; }
.kt-big { font-family: "Cormorant Garamond", serif; font-size: 44px; font-weight: 600; line-height: 1; color: #fff; }
.kt-big small { font-size: 16px; margin-left: 2px; }
.kt-big em { margin-left: 12px; font-family: "Noto Sans JP", sans-serif; font-style: normal; font-size: 13px; font-weight: 800; color: #2ec4b6; }
.nm-kt .kt-line { color: #9b978e; }
.kt-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kt-nums li { display: grid; padding: 10px; border-radius: 10px; background: #232323; }
.kt-nums b { font-family: "Cormorant Garamond", serif; font-size: 28px; color: #fff; line-height: 1.1; }
.kt-nums span { font-size: 11px; color: #9b978e; }
.kt-gauge { --p: 0; position: relative; width: 170px; height: 90px; margin: 6px auto 8px; overflow: hidden; display: grid; place-items: end center; }
.kt-gauge::before { content: ""; position: absolute; left: 0; top: 0; width: 170px; height: 170px; border-radius: 50%; background: conic-gradient(from -90deg, #2ec4b6 0, #ffb800 90deg, #ff5a5f 180deg, transparent 180deg); -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 73%); mask: radial-gradient(closest-side, transparent 72%, #000 73%); opacity: .35; }
.kt-gauge::after { content: ""; position: absolute; left: 83px; bottom: 0; width: 4px; height: 76px; border-radius: 4px; background: #fff; transform-origin: 50% 100%; transform: rotate(calc(-90deg + var(--p) * 1.8deg)); box-shadow: 0 0 8px #fff; }
.kt-gauge b { position: relative; z-index: 1; font-family: "Cormorant Garamond", serif; font-size: 30px; color: #fff; line-height: 1; margin-bottom: -4px; }
.kt-rl { text-align: center; font-weight: 800; }
.kt-rl.r1 { color: #2ec4b6; } .kt-rl.r2 { color: #ffb800; } .kt-rl.r3 { color: #ff5a5f; }
.kt-tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #2e2e2e; display: grid; gap: 10px; }
.kt-tl li { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.kt-tl li::before { content: ""; position: absolute; left: -21px; width: 12px; height: 12px; border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 0 3px #1b1b1b; }
.kt-tl .st { font-size: 11px; color: #9b978e; }
.kt-tl i { font-style: normal; font-size: 11px; font-weight: 800; padding: 0 10px; border-radius: 99px; }
.kt-tl i.good { background: #2ec4b6; color: #062320; } .kt-tl i.ok { background: #ffb800; color: #2a1d00; }
.kt-next { padding: 8px 10px; border-left: 3px solid #ff5a5f; background: #232323; border-radius: 0 8px 8px 0; }
.nm-kt .kt-ask { color: #f2f0ea; background: rgba(255, 90, 95, .16); }