/* 夜tax LP「全国からのご依頼」の枠に「お仕事の種類別」を足す（2026-10-26）
   ・都道府県のボタンの下に、箱（3 色のドーナツ＋文言）とボタン「お仕事の種類別のご依頼を見る」
   ・ボタンは都道府県のボタンと同じ形（.nt-pref__open を使い回す）。窓も都道府県の窓の形（.nt-pref-dialog を使い回す）＝スマホは下から・641px〜は中央
   ・窓の中：横棒 1 本（3 色・幅は割合どおり・区切りに白線 2px）→ 枠 3 つ（上の太線がその色）→ 注記
   ・文字：箱の「水商売関係」の「水」「係」がページの Noto（絞り込み版）に無い＝箱は窓と同じ游ゴシック（字ごとに書体が混ざらないように）
   ・数字は 3 つだけ（約284件 35.5%／約55件 6.9%／約461件 57.6%・合計 800 件） */
.nighttax-profile-component .nt-job{--nj-ink:#2f3e58;--nj-pink:#c23a69;--nj-navy:#516c94;--nj-gray:#6b5f66;--nj-line:#ebced9;--nj-soft:#fff5f8}
.nighttax-profile-component .nt-job :where(p,ul,ol,li,h2,h3){margin:0;padding:0;list-style:none;letter-spacing:normal}

/* ── 箱（10-27 文言 v2：「お店での接客や派遣型のお仕事を中心に、ナイトワークで働く方から多くのご依頼をいただいています。」）──
   ・上段＝ドーナツ（割合と色は窓と同じ・元のまま）＋「お仕事の種類別」＋強調 2 行（ローズの太字）／下段＝残りの文を箱の幅いっぱいで 2 行
   ・意味は 1 つの文（上の p と下の p を続けて読む）。行の切れ目は span（block）で決める＝狭い画面でも語の途中で折れない
   ・文字は游ゴシック（「派」「遣」「型」もページの Noto（絞り込み版）に無い）。高さは固定しない */
.nighttax-profile-component .nt-job-box{margin:0 6.41%;padding:18px;border:1px solid #efd2e0;border-radius:13px;background:#fff}
html body .nighttax-profile-component .nt-job-box,html body .nighttax-profile-component .nt-job-box *{font-family:"Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif}
.nighttax-profile-component .nt-job-box__top{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;column-gap:14px}
.nighttax-profile-component .nt-job-box__donut{display:block;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#fff 0 50%,transparent 51%),conic-gradient(#c23a69 0 35.5%,#516c94 35.5% 42.4%,#e9a5bf 42.4% 100%)}
.nighttax-profile-component .nt-job-box__head{min-width:0}
.nighttax-profile-component .nt-job-box__label{margin:0 0 4px!important;font-size:13px;line-height:1.55;font-weight:500;color:#697184;letter-spacing:.02em}
.nighttax-profile-component .nt-job-box__lead{font-size:17px;line-height:1.7;font-weight:700;color:#c23a69}
.nighttax-profile-component .nt-job-box__body{margin-top:12px!important;font-size:15px;line-height:1.85;font-weight:500;color:#3b5577}
.nighttax-profile-component .nt-job-box__seg{display:block}
.nighttax-profile-component .nt-job__cta{margin-top:12px}
.nighttax-profile-component .nt-job__open{min-height:54px}
.nighttax-profile-component .nt-job__open[hidden]{display:none}
@media (max-width:345px){
  /* 320px：強調の 2 行目（12 字×15px＝180px）がドーナツの横にちょうど入る幅＝余白と間を 1〜2px 詰める（詰めないと「中心／に、」で折れた） */
  .nighttax-profile-component .nt-job-box{padding:16px 15px}
  .nighttax-profile-component .nt-job-box__top{grid-template-columns:54px minmax(0,1fr);column-gap:10px}
  .nighttax-profile-component .nt-job-box__donut{width:54px;height:54px}
  .nighttax-profile-component .nt-job-box__label{font-size:12px}
  .nighttax-profile-component .nt-job-box__lead{font-size:15px}
  .nighttax-profile-component .nt-job-box__body{font-size:14px}
}
/* 768px〜：下段の文を見出しの列にそろえる（ドーナツ 76px＋間 22px） */
@media (min-width:768px){
  .nighttax-profile-component .nt-job-box{padding:22px 26px}
  .nighttax-profile-component .nt-job-box__top{grid-template-columns:76px minmax(0,1fr);column-gap:22px}
  .nighttax-profile-component .nt-job-box__donut{width:76px;height:76px}
  .nighttax-profile-component .nt-job-box__lead{font-size:19px}
  .nighttax-profile-component .nt-job-box__body{padding-left:98px;font-size:16px}
}
/* 1024px〜：地図の箱と同じく中身を中央に（中身の幅は 560px まで） */
@media (min-width:1024px){
  .nighttax-profile-component .nt-job-box{margin:0 3.57%;padding:22px 28px}
  .nighttax-profile-component .nt-job-box__top,.nighttax-profile-component .nt-job-box__body{max-width:560px;margin-left:auto;margin-right:auto}
  .nighttax-profile-component .nt-job__cta{margin-top:14px}
}

/* ── 窓（形は .nt-pref-dialog のまま。中身だけ） ── */
.nighttax-profile-component .nt-job-dialog__body{gap:12px}
.nighttax-profile-component .nt-job-dialog__hint{margin:0!important}
/* 横棒：上に吹き出しの場所を空ける（カーソルで出す PC だけ） */
.nighttax-profile-component .nt-job-bar{position:relative;padding-top:2px}
@media (hover:hover) and (pointer:fine){.nighttax-profile-component .nt-job-bar{padding-top:36px}}
.nighttax-profile-component .nt-job-bar__track{display:flex;height:18px;border-radius:999px;overflow:hidden;background:#f7e6ea}
.nighttax-profile-component .nt-job-bar__seg{display:block;box-sizing:border-box;flex-grow:0;flex-shrink:0;height:100%;cursor:pointer;transition:opacity .15s}
.nighttax-profile-component .nt-job-bar__seg + .nt-job-bar__seg{border-left:2px solid #fff}
.nighttax-profile-component .nt-job-bar__seg.is-dim{opacity:.35}
.nighttax-profile-component .nt-job-bar__tip{position:absolute;top:0;z-index:3;padding:5px 10px;border-radius:8px;background:var(--nj-ink);color:#fff;font-size:12px;line-height:1.4;font-weight:700;white-space:nowrap;pointer-events:none;box-shadow:0 4px 10px rgba(47,62,88,.25)}
.nighttax-profile-component .nt-job-bar__tip[hidden]{display:none}
/* 枠 3 つ（button・上の太線がその色） */
.nighttax-profile-component .nt-job-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nighttax-profile-component .nt-job-card{-webkit-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-width:0;margin:0;padding:10px 2px 9px;border:1px solid var(--nj-line);border-top:4px solid var(--nt-job-c);border-radius:10px;background:#fff;color:var(--nj-ink);font-variant-numeric:tabular-nums;text-align:center;cursor:pointer;transition:opacity .15s,background-color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.nighttax-profile-component .nt-job-card:focus-visible{outline:3px solid var(--nj-ink);outline-offset:2px}
.nighttax-profile-component .nt-job-card.is-on{border-color:var(--nj-pink);border-top-color:var(--nt-job-c);background:var(--nj-soft)}
.nighttax-profile-component .nt-job-card.is-dim{opacity:.55}
.nighttax-profile-component .nt-job-card__name{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:2.6em;font-size:12px;line-height:1.3;font-weight:700;color:var(--nj-navy)}
.nighttax-profile-component .nt-job-card__l{display:block}
.nighttax-profile-component .nt-job-card__num{font-size:13px;line-height:1.25;font-weight:800;color:var(--nj-ink)}
.nighttax-profile-component .nt-job-card__num b{font-size:22px;font-weight:800}
.nighttax-profile-component .nt-job-card__num small{font-size:12px;font-weight:700}
.nighttax-profile-component .nt-job-card__pct{font-size:12px;line-height:1.5;color:var(--nj-gray)}
@media (max-width:350px){
  .nighttax-profile-component .nt-job-cards{gap:5px}
  .nighttax-profile-component .nt-job-card__name{font-size:11px}
  .nighttax-profile-component .nt-job-card__num b{font-size:19px}
}
/* 641px〜：中央の窓は 1 列で幅を狭く。枠の名前は 1 行 */
@media (min-width:641px){
  .nighttax-profile-component .nt-job-dialog{width:min(640px,calc(100vw - 32px))}
  .nighttax-profile-component .nt-job-card__name{flex-direction:row;flex-wrap:wrap;min-height:0}
  .nighttax-profile-component .nt-job-card__l{display:inline}
}
@media (min-width:1024px){
  .nighttax-profile-component .nt-job-dialog{width:min(720px,calc(100vw - 48px))}
  /* 都道府県の窓の body は PC で grid・align-items:start（左に地図・右に数字）＝そのままだと棒が中身の幅（4px）に縮んだ → 1 列で横いっぱい */
  .nighttax-profile-component .nt-job-dialog .nt-job-dialog__body{display:flex;flex-direction:column;align-items:stretch;gap:14px;overflow-y:auto;padding:22px 32px 24px}
  .nighttax-profile-component .nt-job-bar__track{height:20px}
  .nighttax-profile-component .nt-job-cards{gap:12px}
  .nighttax-profile-component .nt-job-card{padding:12px 6px 10px}
  .nighttax-profile-component .nt-job-card__name{font-size:13px}
  .nighttax-profile-component .nt-job-card__num b{font-size:26px}
  .nighttax-profile-component .nt-job-bar__tip{padding:6px 12px;font-size:13px}
}