@charset "UTF-8";
/* ══ 求人ページ ══
   front/templates/default/recruit.html だけが読み込む。
   他のページには影響しない。

   色は front.css の変数から取っているので、店舗の custom.css で
   :root の --color-* を差し替えれば、このページも一緒に変わる。
   入力欄は共通の .f-contact-form / .f-form-* をそのまま使っている。 */

/* ── ページ上部の画像 ─────────────────────
   縦横比を決め打ちしない。求人バナーは横長・縦長どちらも来るので、
   高さだけ上限を付けて、元の比率のまま収める。 */
.f-rc-hero{margin:0 auto 16px;text-align:center}
.f-rc-hero img{max-width:100%;max-height:420px;width:auto;height:auto;
  border-radius:var(--radius);display:block;margin:0 auto}

.f-rc-lead{font-size:13px;line-height:1.95;color:var(--color-text-2);margin:0 0 16px}

/* ── タブ（女性／男性 など）─────────────── */
.f-rc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.f-rc-tab{
  flex:0 0 auto;text-decoration:none;font-size:13px;font-weight:700;
  color:var(--color-primary);background:var(--color-bg-card);
  border:2px solid var(--color-primary);border-radius:var(--radius-sm);
  padding:7px 18px;
}
.f-rc-tab:hover{background:var(--color-primary-pale)}
.f-rc-tab.on{background:var(--color-primary);color:#fff}

/* ── ブロック ────────────────────────────── */
.f-rc-block{margin-bottom:26px}
.f-rc-bimg{margin-bottom:10px;text-align:center}
.f-rc-bimg img{max-width:100%;max-height:320px;width:auto;height:auto;
  border-radius:var(--radius-sm);display:block;margin:0 auto}

/* 赤帯の見出し。現行サイトと同じく、幅いっぱいの帯にする。 */
.f-rc-title{
  font-size:15px;font-weight:800;line-height:1.5;
  color:#fff;background:var(--color-primary);
  border-radius:var(--radius-sm);padding:9px 14px;margin:0 0 12px;
}

/* ── 表 ──────────────────────────────────
   狭い画面では見出しを上に積む。横に並べたままだと、
   「勤務時間」の4文字で1行の半分を使ってしまう。 */
.f-rc-tblwrap{overflow-x:auto}
.f-rc-tbl{width:100%;border-collapse:collapse;background:var(--color-bg-card);
  border:1px solid var(--color-primary)}
.f-rc-tbl th,.f-rc-tbl td{
  border:1px solid var(--color-primary);
  padding:11px 14px;font-size:13px;line-height:1.9;vertical-align:top;
}
.f-rc-tbl th{
  width:150px;white-space:nowrap;text-align:center;font-weight:700;
  color:var(--color-primary);background:var(--color-primary-pale);
}
.f-rc-tbl td{color:var(--color-text);word-break:break-word}
@media(max-width:600px){
  .f-rc-tbl,.f-rc-tbl tbody,.f-rc-tbl tr,.f-rc-tbl th,.f-rc-tbl td{display:block;width:auto}
  .f-rc-tbl tr{border-bottom:1px solid var(--color-primary)}
  .f-rc-tbl tr:last-child{border-bottom:0}
  .f-rc-tbl th{border:0;text-align:left;padding:8px 12px 4px;font-size:12px}
  .f-rc-tbl td{border:0;padding:0 12px 10px}
}

.f-rc-note{font-size:12px;line-height:1.95;color:var(--color-text-2);margin:10px 0 0}

/* ── 応募フォーム ───────────────────────── */
.f-rc-form{margin-top:30px;padding-top:22px;border-top:1px solid var(--color-border-light)}

/* 迷惑送信よけの空欄。テンプレート側にも同じ指定を直接書いてある。
   このCSSが読めなかったときでも隠れているようにするため。ここは念のため。 */
.f-rc-form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}