@charset "UTF-8";
/* =============================================================
   niau group 採用サイト ｜ pages.css
   ページ固有の並び。共通部品は components.css に置く
   ============================================================= */

/* ── トップ（index.html）────────────── */

/* 実像の数字は帯の上に置く。帯は全幅にしない */
.top-salon .figs{margin-top:clamp(28px,3.4vw,44px)}

/* 技術の見せ方：2枚だが幅を揃えない（不規則グリッド） */
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pick>*{min-width:0}
.pick .ph{aspect-ratio:4/3;margin-bottom:10px}
@media (max-width:699px){.pick{grid-template-columns:minmax(0,1fr)}}

/* 「その先」＝ THERE IS A NEXT
   ★2026-08-21 岩田さん指示：段差をつけない。同じ高さで並べる。 */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--ink)}
.next>div{border-right:1px solid var(--line);padding:28px clamp(16px,2vw,28px) 40px;min-width:0}
.next>div:last-child{border-right:none}
.next .en{display:block;font-family:var(--ff-en);font-size:14px;
  letter-spacing:.06em;color:var(--mut);margin-bottom:4px}
.next b{display:block;font-weight:400;font-size:17px;letter-spacing:-.01em;margin-bottom:10px}
@media (max-width:899px){
  .next{grid-template-columns:minmax(0,1fr)}
  .next>div{border-right:none;border-bottom:1px solid var(--line);padding:24px 0}
  .next>div:last-child{border-bottom:none}
}

/* 見出しの上に置く小さなラベル */
.eyebrow{display:block;font-family:var(--ff-en);font-size:12px;
  letter-spacing:.12em;color:var(--mut);margin-bottom:14px}

/* 未確定の値であることを画面に残す（本番公開前に消す or 実値へ差し替える） */
.tbd{
  display:inline-block;border:1px dashed var(--line-2);color:var(--mut);
  font-size:11px;letter-spacing:.04em;padding:2px 8px;margin-left:6px;
  white-space:nowrap;
}
/* ★inline-block の直後には折返し点ができる。句点をそこに置くと次行へ孤立する
   （2026-06-06 limmil FV の実害と同型）。バッジは必ず文末＝句点の後ろに置くこと。 */

/* ── 職種別LP（lp/*.html）で使う ────────── */
.lp{--lp-pad:clamp(20px,5vw,40px);max-width:760px;margin-inline:auto;
  padding-inline:var(--lp-pad)}
.lp .section{padding-block:clamp(68px,8.5vw,104px)}
/* 帯はLPの左右パディング分だけ外へ出す */
.lp .band{margin-inline:calc(var(--lp-pad) * -1);padding-inline:var(--lp-pad)}

/* -------------------------------------------------------------
   職種別LP の部品（ワイヤー _v3_flow/wf/k_lp_*.html から移植）
   ------------------------------------------------------------- */

/* 3つの働き方（業務委託・フリーランス・店内独立） */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.ways>div{background:var(--paper);padding:24px 18px 28px;min-width:0}
.ways .rate{font-family:var(--ff-en);font-size:clamp(28px,4vw,42px);line-height:1.1;display:block}
.ways .rate .u{font-family:var(--ff-body);font-size:max(12px,.34em);color:var(--mut);margin-left:.3em}
.ways b{display:block;font-weight:400;font-size:16px;margin:10px 0 8px}
@media (max-width:640px){.ways{grid-template-columns:minmax(0,1fr)}}

/* 3つの財布（対面・サブスク・チケット）／育て方の3本柱／復職の支援 */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.trio>div{background:var(--paper);padding:22px 18px 26px;min-width:0}
.trio .n{font-family:var(--ff-en);font-size:13px;color:var(--mut)}
.trio b{display:block;font-weight:400;font-size:16px;margin:8px 0}
@media (max-width:640px){.trio{grid-template-columns:minmax(0,1fr)}}

/* 4段の理由（初月から売れる仕組み） */
.reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.reasons>div{background:var(--paper);padding:20px 16px 24px;min-width:0}
.reasons .st{font-family:var(--ff-en);font-size:13px;color:var(--mut)}
.reasons b{display:block;font-weight:400;font-size:15px;margin:8px 0 6px}
@media (max-width:860px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.reasons{grid-template-columns:minmax(0,1fr)}}

/* ── 手取りの可変シミュレーター（業務委託LP）──────────
   ★数値は現行サイトの実測値のみ。計算は Python で検算済み。
     フリーランスの材料費だけ未確定なのでラジオで両方を出せるようにしている。 */
.sim{border:1px solid var(--line);padding:clamp(26px,4vw,44px);margin-top:28px}
.sim__in{margin-top:24px}
.sim__in label{display:block;font-size:12px;color:var(--mut);letter-spacing:.04em}
.sim__in output{display:block;font-family:var(--ff-en);
  font-size:clamp(30px,5vw,44px);line-height:1.2;margin:4px 0 14px}
.sim__in input[type=range]{width:100%;height:48px;accent-color:var(--accent-cta);cursor:pointer}
.sim__scale{display:flex;justify-content:space-between;font-size:11px;color:var(--mut)}
.sim__opt{margin-top:22px;padding:16px 18px;border:1px solid var(--line);min-width:0}
/* ★<legend> は WebKit で親幅を超える（実測 375px で43px超過）。
   float+width:100% に落として通常のブロックとして流す。 */
.sim__opt legend{float:left;width:100%;padding:0;margin-bottom:10px}
.sim__opt::after{content:"";display:table;clear:both}
.sim__opt .lbl{font-size:12px;color:var(--mut)}
.sim__opt label{font-size:13px;display:inline-flex;align-items:center;gap:8px;min-height:32px}
.sim__rows{margin:26px 0 0;border-top:1px solid var(--line)}
.sim__rows .r{display:grid;grid-template-columns:132px minmax(0,1fr) auto;
  gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.sim__rows .nm{font-size:13px}
.sim__rows i{display:block;height:14px;background:var(--line-2);
  transition:width .18s ease-out;min-width:1px}
.sim__rows .v{font-family:var(--ff-en);font-size:clamp(17px,2.2vw,24px);
  white-space:nowrap;text-align:right}
.sim__rows .sub{grid-column:1/-1;font-size:11.5px;color:var(--mut);line-height:1.8;margin-top:-6px}
.sim__rows .r.is-best i{background:var(--ink)}
.sim__rows .r.is-neg .v{color:var(--mut)}
@media (max-width:599px){
  .sim__rows .r{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .sim__rows i{grid-column:1/-1;order:3}
  .sim__rows .sub{order:4}
}
.sim__note{margin-top:18px;font-size:12.5px;color:var(--mut);line-height:1.9;
  text-align:left;text-wrap:pretty}
.sim__note b{color:var(--ink)}
/* シミュレーターの節は操作UIなので余白を厚くする */
.lp .section.simsec{padding-block:clamp(120px,13vw,160px)}

/* 募集要項＝職安法の明示事項。飾りを足す場所ではないが、求職者が最も読む区画なので
   余白を厚くして読みやすくする（2026-08-21 実測で文字密度が基準を超えたための対処） */
.lp .section.reqsec{padding-block:clamp(104px,12vw,144px)}

/* 短い言い切りの節（絞込・宣言）は面積が小さく文字密度が上がりやすい。
   飾りを足すのではなく余白で持たせる（2026-08-21 実測での対処） */
.lp .section.airy{padding-block:clamp(104px,12vw,144px)}