/* joinus ページだけの見た目。生成元 gen_site_w.py gen_joinus() */

.hero .hw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero .hv{overflow:hidden;border-radius:12px;background:var(--deep)}
.hero .hv img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero .catch{margin-top:1.2em;font:700 clamp(24px,3vw,40px)/1.45 var(--gt);letter-spacing:.01em}
.hero .lead{margin-top:.9em;max-width:38em;color:var(--ink2);font-size:clamp(15px,1.3vw,17px);line-height:1.9}
.jb p small{display:block;font:600 12px/1 var(--gt);letter-spacing:.12em;color:var(--ink3);margin:18px 0 6px}
.jb p:first-child small{margin-top:0}
.jb .nt{font-size:13.5px;line-height:1.9;color:var(--ink3);margin-top:8px}
.jb ul.rq{display:block;margin-top:0;padding-left:1.2em;list-style:disc}
.jb ul.rq li{font-size:14.5px;line-height:1.9;padding:2px 0;background:none;border-radius:0;color:var(--ink2)}
.cond{max-width:60em}
.cond > div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:12px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.cond dt{font:600 14px/1.8 var(--gt);color:var(--ink)}
.cond dd{font-size:15px;line-height:1.9;color:var(--ink2)}
.cond dd small{display:block;font-size:12.5px;line-height:1.8;color:var(--ink3);margin-top:4px}
.how{list-style:none;max-width:44em}
.how li{position:relative;padding:12px 0 12px 22px;font-size:15.5px;line-height:1.9;border-bottom:1px solid var(--line)}
.how li::before{content:"";position:absolute;left:0;top:1.35em;width:10px;height:2px;background:var(--acc)}
.how + p{margin-top:26px}
.intro p{max-width:42em;font-size:clamp(16.5px,1.6vw,20px);line-height:2.2}
.intro p + p{margin-top:1.4em}
.jobs{border-top:1px solid var(--line)}
.jb{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(16px,3vw,48px);padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--line)}
.jb .en{font:600 12px/1 var(--gt);letter-spacing:.16em;color:var(--acc)}
.jb b{display:block;margin-top:.6em;font:700 clamp(20px,2.2vw,28px)/1.4 var(--gt)}
.jb p{font-size:15.5px;line-height:2;color:var(--ink2)}
.jb ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.jb li{font-size:12.5px;padding:6px 10px;border-radius:4px;background:var(--paper2);color:var(--ink2)}
.jb .go{margin-top:8px;min-height:44px}
.pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;max-width:56em}
.pills span{font-size:14.5px;line-height:1.7;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
@media (max-width:820px){.pills{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.7vw,24px)}
.st{border-radius:12px;background:#f4f7fb;padding:clamp(24px,3vw,36px);border-top:2px solid var(--acc)}
.st .no{font:700 13px/1 var(--gt);letter-spacing:.16em;color:var(--acc);font-variant-numeric:tabular-nums}
.st b{display:block;margin-top:.8em;font:700 clamp(17px,1.7vw,21px)/1.6 var(--gt)}
.st p{margin-top:.6em;font-size:14.5px;line-height:2;color:var(--ink2)}
@media (max-width:820px){
  .jb,.cond > div{grid-template-columns:1fr}
  .toc{display:none}   /* スマホは目次を出さない＝本題（募集）が最初の画面に入る */
}