/* weban.org — ツール・ドキュメント。濃紺の地に水色。等幅は JetBrains Mono（英数字だけ）＋本文ゴシック */
:root{
  --ink:#E6EDF3; --ink-2:#A9B7C6; --bg:#0E1726; --surface:#132036; --soft:#1A2A44; --line:#27395A;
  --brand:#4FC3F7; --brand-ink:#0B1422; --accent:#4FC3F7; --accent-ink:#0B1422; --pay:#E6EDF3;
  --cyan:#4FC3F7; --code:#0A111E; --green:#7EE2A8; --amber:#FFD27A;
  --f-n:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --f-m:var(--f-n);
  --r:8px; --r-lg:12px; --shadow:0 1px 0 rgb(255 255 255 / .03);
  color-scheme:dark;
}
body{background:var(--bg)}
a{color:var(--cyan)}
.logo__name{font-family:var(--f-m);font-weight:700;font-size:1.2rem;letter-spacing:.02em;display:flex;align-items:baseline;gap:2px}
.logo__an{color:var(--cyan)}
.logo__sub{color:var(--ink-2)}
.hd{background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:1px solid var(--line)}
.gnav a{color:var(--ink)}
.gnav a:hover{background:var(--soft)}
.menu{background:var(--surface);border-color:var(--line)}
.h2{font-weight:800;display:flex;align-items:baseline;gap:12px}
.h2__c{font-family:var(--f-m);font-size:.8em;color:var(--cyan)}
.btn{color:var(--brand-ink)}
.btn--ghost{border:1.5px solid var(--cyan);color:var(--cyan);background:transparent}

/* ヒーロー：左に見出し、右に暗い部屋の写真 */
.hero{background:radial-gradient(1200px 400px at 80% 0%,#16304F 0%,var(--bg) 60%)}
.hero__in{display:grid;grid-template-columns:1fr}
@media (min-width:1000px){.hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:460px}}
.hero__in>*{min-width:0}
.hero__text{padding:32px max(var(--gut),env(safe-area-inset-left)) 28px;display:flex;flex-direction:column;justify-content:center}
@media (min-width:1000px){.hero__text{padding:48px 40px 48px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}}
.hero__t{display:flex;flex-direction:column;align-items:flex-start;margin:0}
.hero__eyebrow{font-family:var(--f-b);font-weight:700;font-size:.85rem;color:var(--green);background:var(--code);border:1px solid var(--line);padding:4px 12px;border-radius:6px;max-width:100%}
.hero__eyebrow span{font-family:var(--f-m)}
.hero__main{align-self:stretch;margin-top:18px;font-weight:800;font-size:clamp(1.85rem,1.2rem + 2.5vw,2.9rem);line-height:1.3}
.hero__hl{color:var(--cyan)}
.hero__lead{margin-top:14px;color:var(--ink-2);max-width:34em}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero__photo{width:100%;min-height:220px;max-height:560px}
.hero__photo img{object-position:62% 40%}
@media (max-width:999px){.hero__photo{aspect-ratio:16/8}}

.sec__lead,.sec__src{color:var(--ink-2)}
.sec__src{font-size:.8rem}

/* 返信文の型：エディタ風の枠 */
.kata{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:1000px){.kata{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kata__i{margin:0;background:var(--code);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.kata__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dots file copy" "scene scene copy";align-items:center;column-gap:10px;padding:6px 8px 6px 12px;background:var(--soft);border-bottom:1px solid var(--line)}
.kata__dots{grid-area:dots}.kata__file{grid-area:file;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kata__scene{grid-area:scene}.kata__copy{grid-area:copy}
.kata__dots{display:flex;gap:5px}
.kata__dots i{width:10px;height:10px;border-radius:50%;background:#3A4E70}
.kata__file{font-family:var(--f-m);font-size:.75rem;color:var(--ink-2)}
.kata__scene{font-weight:800;font-size:.9rem;margin-right:auto}
.kata__copy{min-height:44px;padding:0 14px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--cyan);font-weight:700;font-size:.85rem;cursor:pointer}
.kata__copy:hover{border-color:var(--cyan)}
.kata__pre{margin:0;padding:16px;overflow-x:auto;font-family:var(--f-b);font-size:.9rem;line-height:1.85;white-space:pre-wrap;color:#D7E3EF;flex:1}
.kata__tip{padding:12px 16px 14px;border-top:1px dashed var(--line);font-size:.86rem;color:var(--ink-2)}
.kata__tl{display:block;font-family:var(--f-m);color:var(--green);font-size:.78rem;margin-bottom:2px}

/* 求人カード（濃紺の地） */
.job{background:var(--surface);border-color:var(--line);box-shadow:none}
.job:hover{box-shadow:0 0 0 1px var(--cyan)}
.job__comp,.job__where{color:var(--ink-2)}
.job__payv{color:var(--ink)}
.job__new{background:var(--cyan);color:var(--brand-ink)}
.job__tags li{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.job__point{background:var(--soft);color:var(--ink)}
.job__media--none{background:var(--soft);color:var(--ink-2)}
.chip{background:var(--surface);border-color:var(--line);color:var(--ink)}
.chip__n{background:var(--soft);color:var(--ink-2)}
.chip.is-on{background:var(--cyan);border-color:var(--cyan);color:var(--brand-ink)}
.chip.is-on .chip__n{background:rgb(11 20 34 / .18);color:var(--brand-ink)}
.faq__item{background:var(--surface);border-color:var(--line)}
.faq__item summary::after{border-color:var(--ink-2)}
.pager .current{background:var(--cyan);color:var(--brand-ink);border-color:var(--cyan)}

/* 本文 */
.guide__in{display:grid;gap:28px}
@media (min-width:1000px){.guide__in{grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start}.guide__side{position:sticky;top:96px}}
.guide__main{min-width:0;max-width:800px}
.guide__photo{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line)}
.prose h2{border-bottom:1px solid var(--line)}
.prose h2::before{content:"## ";font-family:var(--f-m);color:var(--cyan);font-size:.8em}
.prose th{background:var(--soft)}
.prose th,.prose td{border-color:var(--line)}
.prose td:first-child,.prose th:first-child{white-space:nowrap}
.prose code{font-family:var(--f-m);background:var(--code);border:1px solid var(--line);padding:1px 6px;border-radius:4px;font-size:.9em}
.prose blockquote{background:var(--code);border-left-color:var(--cyan)}
.terms a{border-color:var(--line);background:var(--surface);color:var(--ink)}
.ft{background:#08101C;border-top:1px solid var(--line)}
.referral__l{color:var(--ink-2)}
.empty{background:var(--surface)}
.skip{background:var(--cyan);color:var(--brand-ink)}