/* 黒いサイト用：join-form.css と同じ配色。サイトの style.css の後ろに読み込む */
.js{--js-bg:#101114;--js-ink:#fff;--js-accent:#6080ff;--js-muted:#aaadb6;--js-line:#3a3c43;--js-raise:#17191e;color:var(--js-ink);font-size:17px;line-height:1.8}
.js[hidden]{display:none}
.js .js-note{color:var(--js-muted);margin:0 0 24px}
.js .js-nums{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--js-line);border:1px solid var(--js-line)}
.js .js-num{background:var(--js-raise);padding:18px 16px;min-width:0}
.js .js-num b{display:block;font-size:40px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.js .js-num span{font-size:17px;color:var(--js-muted)}
.js .js-num em{display:block;font-style:normal;font-size:17px;color:var(--js-accent)}
.js .js-chart{margin:0 0 32px;border:1px solid var(--js-line);background:var(--js-raise);padding:12px}
.js .js-chart svg{display:block;width:100%;height:auto}
.js .js-legend{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0;padding:0;list-style:none;font-size:17px;color:var(--js-muted)}
.js .js-legend i{display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle}
.js .js-sub{font-size:18px;margin:0 0 12px}
.js .js-flow{list-style:none;margin:0;padding:0;border-top:1px solid var(--js-line)}
.js .js-flow li{display:grid;grid-template-columns:7.5em 1fr;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--js-line)}
.js .js-flow time{color:var(--js-muted);font-variant-numeric:tabular-nums}
.js .js-flow a{color:var(--js-accent)}
.js .js-flow .js-plan{opacity:.55}
.js .js-flow .js-tag{display:inline-block;margin-right:8px;padding:0 8px;border:1px solid var(--js-line);font-size:17px}
.js .js-num:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:720px){.js .js-num:last-child:nth-child(odd){grid-column:auto}.js .js-nums{grid-template-columns:repeat(5,1fr)}.js .js-num b{font-size:44px}}