@charset "UTF-8";
/* 採用サイト用トークン｜wire.css の派生（差分だけを上書きする）
   本番 recruit.re-bell.com の実測：インク #0B0B0D ／ アクセント #F25E5E を面で22回使用
   ART_DIRECTION：採用は「強さ」。美容室（抑制）・スタジオ（柔らかさ）と分ける */
:root{
  --ink:#0b0b0d;
  --band:#f0f0f0;
  --accent:#5a5a5a;    /* ワイヤーは墨のみ。本番は #F25E5E に置換する */
  --sec:clamp(72px,9.5vw,132px);
}
/* アクセントは面で使う（本番は赤。ワイヤーでは濃いグレーで位置だけ示す） */
.btn--accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.hdr .util{background:var(--accent);border-color:var(--accent)}
.sticky{background:var(--accent)}

/* 働き方を選ぶ＝4職種。応募者は「どの入り方をするか」を先に決める */
.tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tracks>a,.tracks>div{background:var(--paper);padding:clamp(22px,2.6vw,36px);min-width:0;
  display:block;text-decoration:none;color:inherit;position:relative}
.tracks .ph{border-radius:0}
.tracks .en{display:block;font-size:12px;color:var(--mut);margin-bottom:6px}
.tracks b{display:block;font-weight:400;font-size:19px;letter-spacing:-.01em;margin-bottom:10px}
.tracks .arrow{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px)}
@media(max-width:899px){.tracks{grid-template-columns:minmax(0,1fr)}}

/* キャリアの段＝社員→業務委託→フリーランス→店内独立（「次がある」の採用版） */
.career{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.career>div{border-right:1px solid var(--line);padding:0 clamp(14px,1.8vw,26px) 36px;min-width:0}
.career>div:last-child{border-right:none}
.career>div{padding-top:22px}
.career .st{font-family:'ShipporiMix',"Baskervville",serif;font-size:12px;letter-spacing:.06em;color:var(--mut)}
.career b{display:block;font-weight:400;font-size:16px;letter-spacing:-.01em;margin:6px 0 8px}
@media(max-width:899px){
  .career{grid-template-columns:minmax(0,1fr)}
  .career>div{border-right:none;border-bottom:1px solid var(--line);padding:20px 0!important}
  .career>div:last-child{border-bottom:none}
}
/* 数字（待遇・規模）
   ★レンジ（¥260,000〜550,000）は「大きな数字1つ」ではないので、
   　3枚のタイルに押し込むと折れて高さが揃わない（2026-08-21 実測で崩れを確認）。
   　ラベル左・数値右の行組みにし、数値は必ず1行に収める */
.figs{border-top:1px solid var(--ink)}
.figs .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,3vw,48px);
  align-items:baseline;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line)}
.figs dt{font-size:13px;color:var(--mut);letter-spacing:.02em}
.figs dd{font-family:'ShipporiMix',"Baskervville",serif;font-size:clamp(20px,2.4vw,30px);line-height:1.25;
  white-space:nowrap;letter-spacing:.01em;text-align:right}
.figs dd .unit{font-family:'ShipporiMix',"Noto Sans JP",sans-serif;font-size:max(12px,.5em);color:var(--mut);margin-left:.4em;letter-spacing:.02em}
.figs dd .tilde{font-size:.72em;margin:0 .18em;color:var(--mut)}
.figs .note{font-size:12px;color:var(--mut);font-family:'ShipporiMix',"Noto Sans JP",sans-serif;
  white-space:normal;text-align:right;display:block;margin-top:4px;line-height:1.7}
@media(max-width:599px){
  .figs .row{grid-template-columns:minmax(0,1fr);gap:6px}
  .figs dd{text-align:left;font-size:clamp(19px,6vw,26px)}
  .figs .note{text-align:left}
}
/* リール枠＝読ませるより見せる（縦動画資産が豊富） */
.reels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.reels .ph{aspect-ratio:9/16}
.reels>div:nth-child(even){margin-top:clamp(14px,2.4vw,28px)}
@media(max-width:899px){.reels{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 選考フロー */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.steps4>div{border-right:1px solid var(--line);padding:0 clamp(14px,1.8vw,24px) 32px;min-width:0}
.steps4>div:last-child{border-right:none}
.steps4>div{padding-top:20px}
@media(max-width:899px){
  .steps4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .steps4>div{padding-top:20px!important}
  .steps4>div:nth-child(2){border-right:none}
}

/* ── 2026-08-22 修正：注記のある行でラベル列が0pxに潰れるのを防ぐ ──
   原因＝.figs dd に white-space:nowrap を掛けたうえで列を `auto` にしていたため、
   dd の中の長い .note が max-content を要求し、minmax(0,1fr) の dt 側が0pxまで潰れた。
   実測（768/834/1024px）：「入店後 初月の売上基準」が1文字ずつ縦に並んだ。
   ★金額の nowrap は残す。潰れないように dt 側に最小幅を与え、dd 側の下限を0にする。 */
@media(min-width:600px){
  .figs .row{grid-template-columns:minmax(140px,1fr) minmax(0,auto)}
  .figs dd{min-width:0}
  .figs .note{max-width:min(46ch,100%);margin-left:auto}
}

/* 注記は最終行の1文字孤立を避ける（375px で実測） */
.figs .note{text-wrap:pretty}