@charset "UTF-8";
/* =============================================================================
 * recruit.css ── 採用ページ（案Dのファーストビューを採用）
 * 白地 × 斜めの黄色い帯 × 特大ロゴ × 太い黒枠と落ち影。
 * 「勢い」を出しつつ、文字は常に白か黄色の面の上に置いて読みやすさを守る。
 * ========================================================================== */

/* ======================================================== ファーストビュー */
.rhero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--white);
  padding: calc(var(--hd) + clamp(18px, 4vw, 40px)) 0 clamp(44px, 7vw, 84px);
  display: flex; align-items: center;
  min-height: 92svh;
}
@media (min-width: 900px) { .rhero { min-height: calc(100svh - var(--hd)); } }

.rhero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rhero__band {
  position: absolute; left: -14%; right: -14%;
  top: 46%; height: clamp(260px, 42vw, 540px);
  rotate: -9deg;
  background: linear-gradient(100deg, var(--yellow) 0%, var(--yellow) 62%, var(--yellow-l) 100%);
}
.rhero__band::after {
  content: ""; position: absolute; inset: auto 0 -13px 0; height: 13px;
  background: var(--black); opacity: .9;
}
.rhero__band--thin {
  top: auto; bottom: 5%; height: clamp(22px, 3.6vw, 48px);
  background: var(--black); rotate: -9deg;
}
.rhero__band--thin::after { display: none; }
.rhero__dots {
  position: absolute; inset: -20%;
  background-image: radial-gradient(var(--black) 1.4px, transparent 1.5px);
  background-size: 19px 19px; opacity: .5;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 66%);
          mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 66%);
  animation: rDrift 46s linear infinite alternate;
  /* 大きな網点の面がゆっくり動くので、自前の層に載せて「合成だけ」で済ませる */
  will-change: transform;
}
@keyframes rDrift { to { transform: translate3d(-30px, 22px, 0); } }
@media (prefers-reduced-motion: reduce) { .rhero__dots { animation: none; } }

.rhero__in { position: relative; display: grid; gap: clamp(28px, 4vw, 54px); align-items: center; }
.rhero__left { position: relative; z-index: 3; min-width: 0; }
@media (min-width: 960px) {
  .rhero__in { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
  /* 見出しは画面幅ではなく左カラムの幅に合わせる。
     画面幅だけで決めると、1100px前後で「る。」だけ次の行へこぼれる */
  .rhero__ttl { font-size: clamp(30px, 4.3vw, 52px); }
}

/* ---- 斜め・特大の店名ロックアップ ---- */
.bm {
  display: inline-block; rotate: -8deg; transform-origin: left center;
  margin-bottom: clamp(16px, 2.4vw, 28px);
}
.bm__box {
  position: relative; display: inline-block;
  padding: clamp(10px, 1.4vw, 18px) clamp(16px, 2.2vw, 30px) clamp(12px, 1.6vw, 20px);
  background: var(--white);
  border: clamp(3px, .42vw, 5px) solid var(--black); border-radius: 5px;
  box-shadow: clamp(7px, 1vw, 13px) clamp(8px, 1.1vw, 15px) 0 var(--black);
}
.bm__box::before {
  content: ""; position: absolute; inset: clamp(5px, .7vw, 9px);
  border: 2px dashed rgba(15, 13, 11, .16); border-radius: 3px; pointer-events: none;
}
.bm__l1, .bm__l3 {
  display: block; font-family: var(--f-en); font-weight: 400;
  line-height: .8; letter-spacing: .005em;
  font-size: clamp(42px, 12vw, 96px); color: var(--black);
  text-shadow: clamp(3px, .42vw, 6px) clamp(3px, .42vw, 6px) 0 var(--yellow);
}
.bm__l2 {
  display: flex; align-items: center; gap: .5em;
  margin: clamp(3px, .5vw, 7px) 0;
  font-family: var(--f-en); font-weight: 400;
  font-size: clamp(15px, 3.4vw, 32px); letter-spacing: .1em; color: var(--black);
}
.bm__l2 i { flex: 1; height: clamp(3px, .42vw, 5px); background: var(--black); }
.bm__sub {
  position: absolute; right: clamp(-10px, -1vw, -4px); bottom: clamp(-16px, -1.6vw, -10px);
  rotate: 4deg;
  background: var(--yellow); border: 2.5px solid var(--black); border-radius: 999px;
  box-shadow: 3.5px 3.5px 0 var(--black);
  padding: .32em .9em;
  font-family: var(--f-jp); font-weight: 900; font-size: clamp(11px, 1.28vw, 16px);
  white-space: nowrap;
}
.bm__co {
  margin-bottom: clamp(10px, 1.4vw, 16px);
  font-weight: 900; font-size: clamp(10px, 1.05vw, 12.5px); letter-spacing: .18em;
}
.bm__co b { background: var(--black); color: var(--yellow); padding: .3em .65em; border-radius: 3px; letter-spacing: .12em; }

.rhero__ttl {
  font-family: var(--f-jp); font-weight: 900;
  font-size: clamp(27px, 6.6vw, 56px); line-height: 1.34; letter-spacing: .03em;
  color: var(--black); margin-bottom: clamp(12px, 1.8vw, 20px);
}
/* 1行を1かたまりとして扱う。途中で折り返すと、黄マーカーが行いっぱいに
   伸びて「文字と関係ない棒」に見えてしまう */
.rhero__ttl .l1, .rhero__ttl .l2 { display: block; white-space: nowrap; }
.rhero__ttl em { font-style: normal; position: relative; display: inline-block; }
.rhero__ttl em::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .03em; height: .24em;
  background: var(--yellow); z-index: -1;
  transform: scaleX(0); transform-origin: left;
  animation: rUnder .85s var(--ease) .45s forwards;
}
@keyframes rUnder { to { transform: scaleX(1); } }


.rhero__lead { max-width: 30em; font-size: clamp(13px, 1.08vw, 15.5px); line-height: 2.05; color: #332D26; }
.rhero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.6vw, 32px); }

/* ---- 写真クラスター ---- */
.rhero__vis {
  position: relative; z-index: 2;
  min-height: clamp(300px, 62vw, 520px);
  max-width: 540px; width: 100%; margin-inline: auto;
}
@media (min-width: 960px) { .rhero__vis { max-width: none; margin-inline: 0; } }

.hv {
  position: absolute; overflow: hidden;
  border: 3px solid var(--black); border-radius: 6px;
  box-shadow: 8px 9px 0 var(--black); background: var(--white);
}
.hv img { width: 100%; height: 100%; object-fit: cover; }
.hv--a { width: 60%; left: 2%; top: 0; aspect-ratio: 4 / 3;
  rotate: -4deg; z-index: 3; animation: hvIn .85s var(--bounce) .2s both, hvFloat 7.5s ease-in-out 1.05s infinite; }
.hv--b { width: 44%; right: 0; top: 24%; aspect-ratio: 3 / 4;
  rotate: 5deg; z-index: 4; animation: hvIn .85s var(--bounce) .34s both, hvFloat 9s ease-in-out 1.19s infinite; }
.hv--c { width: 46%; left: 8%; bottom: 0; aspect-ratio: 5 / 4;
  rotate: 3deg; z-index: 2; animation: hvIn .85s var(--bounce) .48s both, hvFloat 8.2s ease-in-out 1.33s infinite; }
@keyframes hvIn {
  from { opacity: 0; translate: 0 52px; scale: .86; }
  to   { opacity: 1; translate: 0 0;   scale: 1; }
}
@keyframes hvFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* 看板キャラクター。狭い画面では見出しの右上、広い画面では写真クラスターの
   手前に置く。どちらの幅でも「最初の1画面で必ず目に入る」ことを優先している */
.rhero__gm {
  position: absolute; z-index: 8;
  top: calc(var(--hd) + 2px);
  right: 3vw;
  width: clamp(96px, 27vw, 152px); height: auto;
  border-radius: 50%;
  filter: drop-shadow(6px 7px 0 var(--black));
  animation: gmIn .8s var(--bounce) .15s both, hvFloat 6s ease-in-out 1s infinite;
}
@keyframes gmIn {
  from { opacity: 0; transform: scale(.5) rotate(-24deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
/* 広い画面でも右上のまま。下はジュワッチの定位置なので空けておく */
@media (min-width: 960px) {
  .rhero__gm { right: calc(var(--pad) - 10px); width: clamp(120px, 11vw, 168px); }
}


.rhero__gz { position: absolute; z-index: 5; }
.rhero__gz--1 { width: clamp(50px, 12vw, 92px); left: -4%; top: 36%; animation: hop 3.2s var(--ease) infinite; }
.rhero__gz--2 { width: clamp(38px, 9vw, 68px); right: 8%; top: -5%; animation: hop 3.9s var(--ease) infinite .7s; }
@keyframes hop {
  0%, 100% { translate: 0 0; rotate: -8deg; }
  50%      { translate: 0 -18px; rotate: 8deg; }
}

.rhero__scroll {
  position: absolute; left: 50%; translate: -50% 0; bottom: 12px; z-index: 5;
  display: grid; justify-items: center; gap: 6px;
  font-size: 9.5px; letter-spacing: .28em; color: var(--black);
}
.rhero__scroll i { display: block; width: 2px; height: 30px; background: rgba(15, 13, 11, .3); position: relative; overflow: hidden; }
.rhero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--black); animation: rSc 1.9s var(--ease) infinite; }
@keyframes rSc { 0% { translate: 0 -100%; } 60%, 100% { translate: 0 100%; } }
@media (max-width: 959px) { .rhero__scroll { display: none; } }


/* ================================================ 看板キャラクター「ジュワッチ」
 * Tシャツ用ロゴのイラストをベクターのまま使っている。
 * 手から餃子を撃ち出しているポーズなので、
 *   ・餃子が次々に飛んでいく（4つを時間差でループさせて“ビーム”に見せる）
 *   ・撃つたびに本体が small に反動する
 *   ・「ジュワッチ」の文字が跳ねる
 * の3つを重ねている。出入りは外側の .juwacchi__in だけが担当する。
 * ---------------------------------------------------------------------------- */
.juwacchi {
  position: fixed;
  /* 下部の操作バー(88)・ヘッダー(90)より奥。本文よりは手前。
     pointer-events:none なので、重なってもボタンは普通に押せる */
  z-index: 47;
  /* 画面に固定して出しっぱなしにするので、狭い画面では本文を覆いすぎない大きさに */
  width: clamp(132px, 24vw, 300px);
  line-height: 0;
  pointer-events: none;
  color: var(--black);
}
.jw {
  display: block; width: 100%; height: auto; overflow: visible;
  fill: currentColor;
  /* 体は白。線画の内側を白で敷いてあるので、どんな背景でも透けない。
     ここに filter を掛けると、中の餃子が動くたびに影を計算し直すことになり
     採用ページでいちばん重かったので、影は持たせない */
}
.jw-plate { fill: #fff; }

/* ---- 出入り：下・上・左・右の4方向。どこから出るかは JS が毎回選ぶ ----
   位置ごとに「隠れている状態」の逃がし方だけを決めて、
   出るときは is-in で素の位置（transform なし）へ戻す。 */
.juwacchi__in {
  position: relative;
  transition: transform .62s var(--bounce), opacity .3s ease;
}
.juwacchi--b { right: 0;     bottom: var(--bar); top: auto; left: auto; }
.juwacchi--r { right: 0;     bottom: auto; top: 42%;        left: auto; }
/* 左は本文とボタンの上に来るので、少し画面の外へ逃がして「のぞく」形にする */
.juwacchi--l { left: clamp(-44px, -4vw, -8px); bottom: var(--bar); top: auto; right: auto; }
.juwacchi--t { right: 24vw;  top: var(--hd); bottom: auto;  left: auto; }
/* 左と上は本文の真上に来るので、少し小ぶりにして覆う面積を抑える */
.juwacchi--l, .juwacchi--t { width: clamp(112px, 17vw, 214px); }

.juwacchi--b .juwacchi__in { transform: translateY(122%) rotate(6deg); }
.juwacchi--r .juwacchi__in { transform: translateX(122%) rotate(6deg); }
.juwacchi--l .juwacchi__in { transform: translateX(-122%) rotate(-6deg); }
.juwacchi--t .juwacchi__in { transform: translateY(-128%) rotate(-6deg); }
.juwacchi.is-in .juwacchi__in { transform: none; }

/* 左から出るときは、餃子が画面の外へ向いてしまうので左右を反転する。
   文字だけはもう一度反転して、読める向きに戻す。 */
.juwacchi--l .jw { transform: scaleX(-1); }
.juwacchi--l .jw-textwrap { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }

/* 引っ込んでいるあいだは中の動きも止める。
   SVGの中身の動きはGPUに逃がせないぶん、見えていない時間まで
   動かし続けると、それだけでブラウザが計算し続けることになる */
.juwacchi:not(.is-in) .jw-gz,
.juwacchi:not(.is-in) .jw-body,
.juwacchi:not(.is-in) .jw-text { animation-play-state: paused; }

/* ---- 餃子ビーム：4つを時間差で流して、途切れない筋にする ---- */
.jw-gz {
  transform-box: fill-box; transform-origin: center;
  animation: jwShot 1.15s linear infinite;
}
.jw-gz--g4 { animation-delay: 0s; }      /* 手のすぐ先 */
.jw-gz--g3 { animation-delay: .29s; }
.jw-gz--g2 { animation-delay: .58s; }
.jw-gz--g1 { animation-delay: .87s; }    /* いちばん遠い */
@keyframes jwShot {
  0%   { opacity: 0; transform: translate(30px, 5px) scale(.6); }
  14%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-42px, -7px) scale(1.24); }
}

/* ---- 撃つたびの反動 ---- */
.jw-body {
  transform-box: fill-box; transform-origin: 62% 92%;
  animation: jwRecoil 1.15s ease-out infinite;
}
@keyframes jwRecoil {
  0%        { transform: translateX(0) rotate(0deg); }
  7%        { transform: translateX(6px) rotate(1.4deg); }
  32%, 100% { transform: translateX(0) rotate(0deg); }
}

/* ---- 「ジュワッチ」の文字が跳ねる ---- */
.jw-text {
  transform-box: fill-box; transform-origin: 70% 50%;
  animation: jwText 1.15s var(--bounce) infinite;
}
@keyframes jwText {
  0%        { transform: scale(1) rotate(0deg); }
  9%        { transform: scale(1.16) rotate(-2.5deg); }
  38%, 100% { transform: scale(1) rotate(0deg); }
}

/* prefers-reduced-motion でも止めない。
   キャラクターが動くことがこのページの主題そのもので、止めると
   「置物が置いてあるだけ」になってしまうため（案Dと同じ判断）。 */

/* ================================================================= 働く魅力 */
.sec--merit { background: var(--paper); }
.merits { display: grid; gap: 16px; }
.merit {
  position: relative; min-width: 0;
  background: var(--white);
  border: 2.5px solid var(--black); border-radius: 14px;
  box-shadow: 6px 7px 0 var(--black);
  padding: clamp(20px, 2.8vw, 30px);
}
.merit__no {
  display: inline-block; margin-bottom: 12px;
  font-size: clamp(28px, 3.6vw, 42px); color: var(--yellow);
  -webkit-text-stroke: 2px var(--black); paint-order: stroke fill;
}
.merit__ttl { font-family: var(--f-jp); font-weight: 900; font-size: clamp(15.5px, 1.6vw, 19px); line-height: 1.5; margin-bottom: 10px; }
.merit p { font-size: 13.5px; color: #4A4136; }
@media (min-width: 820px) { .merits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================================================================= 募集職種 */
.jobs { display: grid; gap: 14px; }
/* 3枚が横に並ぶので、文章の長さが違っても「くわしく」の位置がそろうよう、
   縦のフレックスにして最後の1つだけ下へ寄せる */
.job {
  min-width: 0; background: var(--white);
  border: 2.5px solid var(--black); border-radius: 14px;
  box-shadow: 5px 6px 0 var(--yellow-d);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex; flex-direction: column; gap: 10px;
}
.job__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.job__ttl { font-family: var(--f-jp); font-weight: 900; font-size: clamp(16px, 1.8vw, 20px); }
.job__type {
  background: var(--black); color: var(--yellow);
  font-size: 11px; font-weight: 700; padding: .3em .8em; border-radius: 999px;
}
.job__body { font-size: 13.5px; color: #4A4136; }
.job__go {
  align-self: flex-start; margin-top: auto; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-jp); font-weight: 900; font-size: 13px; color: var(--amber-t);
  border-bottom: 2px solid var(--yellow); padding-bottom: 2px;
}
.job__go:hover .ar { transform: translateX(.3em); }
.job__go .ar { transition: transform .25s var(--ease); }
@media (min-width: 820px) { .jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =================================================================== 人 */
.sec--staff { background: var(--black); color: var(--white); }
.sec--staff .sec__no { color: var(--yellow); }
.sec--staff .sec__no::before { background: var(--yellow); }
.staff { display: grid; gap: 16px; }
.staff__i {
  min-width: 0; background: var(--ink);
  border: 2.5px solid var(--yellow); border-radius: 14px;
  overflow: hidden; box-shadow: 6px 7px 0 var(--yellow-d);
}
.staff__body { padding: clamp(14px, 2vw, 20px); }
.staff__role { display: inline-block; background: var(--yellow); color: var(--black); font-size: 11px; font-weight: 900; padding: .25em .75em; border-radius: 999px; margin-bottom: 8px; }
.staff__name { font-family: var(--f-jp); font-weight: 900; font-size: clamp(15px, 1.6vw, 18px); }
.staff__cm { margin-top: 8px; font-size: 13px; color: #C6BCAB; }
@media (min-width: 620px)  { .staff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .staff { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ================================================================ 応募の流れ */
.sec--flow { background: var(--paper); }
.flow { display: grid; gap: 12px; }
.flow__i {
  position: relative; min-width: 0;
  background: var(--white); border: 2.5px solid var(--black); border-radius: 14px;
  padding: clamp(16px, 2.2vw, 24px);
}
.flow__no {
  display: inline-block; font-size: clamp(22px, 2.6vw, 30px);
  color: var(--yellow); -webkit-text-stroke: 2px var(--black); paint-order: stroke fill;
  margin-bottom: 8px;
}
.flow__i h3 { font-family: var(--f-jp); font-weight: 900; font-size: 15px; margin-bottom: 6px; }
.flow__i p { font-size: 13px; color: #4A4136; }
@media (min-width: 760px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==================================================================== FAQ */
.faq { display: grid; gap: 10px; }
.faq__i {
  background: var(--white); border: 2.5px solid var(--black); border-radius: 12px;
  overflow: hidden;
}
.faq__i summary {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 46px 15px 16px; cursor: pointer; list-style: none;
  font-family: var(--f-jp); font-weight: 900; font-size: 14px; line-height: 1.6;
  position: relative;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2.5px solid var(--black); border-bottom: 2.5px solid var(--black);
  rotate: 45deg; transition: rotate .25s var(--ease);
}
.faq__i[open] summary::after { rotate: -135deg; margin-top: -2px; }
.faq__q, .faq__mark {
  flex: none; display: grid; place-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--yellow); border: 2px solid var(--black);
  font-family: var(--f-en); font-size: 13px;
}
.faq__a { display: flex; gap: 12px; padding: 0 16px 16px; }
.faq__mark { background: var(--black); color: var(--yellow); border-color: var(--black); }
.faq__a p { font-size: 13.5px; color: #4A4136; padding-top: 2px; }

/* ================================================================== 応募CTA */
.sec--entry { background: var(--yellow); border-top: 3px solid var(--black); }
.entry { text-align: center; display: grid; justify-items: center; gap: 6px; }
.entry__gm { width: clamp(78px, 12vw, 122px); filter: drop-shadow(5px 6px 0 var(--black)); border-radius: 50%; margin-bottom: 10px; }
.entry__ttl { font-family: var(--f-jp); font-weight: 900; font-size: clamp(21px, 3.4vw, 36px); line-height: 1.4; }
.entry__lead { font-size: 13.5px; color: #3B2E10; margin-top: 8px; }
.entry__btns { display: grid; gap: 10px; margin-top: 22px; width: min(420px, 100%); }
@media (min-width: 640px) { .entry__btns { grid-auto-flow: column; width: auto; } }


/* =============================================================================
 * 給与まわり（仲間募集ページのカード）
 * -----------------------------------------------------------------------------
 * 応募をやめる理由の1位は「いくらもらえるか分からない」なので、
 * カードの中でいちばん強い要素にしている。
 * 数字は欧文フォント（Anton）だと「円」が別の字形に落ちて不揃いになるため、
 * 和文の太字（--f-jp）で通す。
 * ========================================================================== */
.job__pay {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px;
  background: var(--wash);
  border-left: 5px solid var(--yellow);
  border-radius: 0 9px 9px 0;
  padding: 9px 13px;
}
.job__pay-l {
  font-family: var(--f-jp); font-weight: 900; font-size: 11px;
  letter-spacing: .06em; color: var(--amber-t);
}
.job__pay-v {
  font-family: var(--f-jp); font-weight: 900;
  font-size: clamp(18px, 2.5vw, 24px); line-height: 1.25;
  letter-spacing: .01em; color: var(--black);
}
.job__mini {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 12.5px; color: #4A4136;
}
.job__mini span {
  flex: none;
  background: var(--black); color: var(--yellow);
  font-family: var(--f-jp); font-weight: 900; font-size: 10px;
  padding: .25em .6em; border-radius: 4px;
}

/* -------------------------------------------- 全職種に共通する待遇（名前だけ）
   ここで説明まで書くと、この下のスタッフ・応募の流れ・FAQ まで
   たどり着かなくなる。名前だけ見せて、くわしくは募集要項ページへ送る。 */
.wel-strip {
  margin-top: clamp(24px, 3.4vw, 40px);
  background: var(--black); color: var(--white);
  border-radius: 16px;
  padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.8vw, 30px);
  display: grid; gap: 14px; justify-items: start;
}
.wel-strip__ttl {
  font-family: var(--f-jp); font-weight: 900; font-size: 13px;
  letter-spacing: .04em; color: var(--yellow); white-space: nowrap;
}
.wel-strip__list { display: flex; flex-wrap: wrap; gap: 8px; }
.wel-strip__list li {
  border: 2px solid var(--yellow); border-radius: 999px;
  padding: .3em .95em;
  font-family: var(--f-jp); font-weight: 900; font-size: 12px; line-height: 1.6;
}
.wel-strip .btn { justify-self: stretch; }
@media (min-width: 900px) {
  .wel-strip { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; }
  .wel-strip .btn { justify-self: end; }
}


/* =============================================================================
 * 募集要項ページ（jobs.php）
 * -----------------------------------------------------------------------------
 * 仲間募集ページが白地なのに対して、こちらは見出しだけ黒地にする。
 * 「勢いを見せる面」と「条件を確かめる面」を、開いた瞬間に区別してもらうため。
 * ========================================================================== */
.jhead {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--black); color: var(--white);
  padding: calc(var(--hd) + clamp(30px, 6vw, 62px)) 0 clamp(30px, 5vw, 54px);
}
/* 仲間募集ページと同じ斜めの帯。2枚が地続きに見えるようにする */
.jhead::before {
  content: ""; position: absolute; z-index: -1;
  left: -14%; right: -14%; bottom: -34%;
  height: clamp(120px, 22vw, 240px);
  rotate: -9deg;
  background: linear-gradient(100deg, var(--yellow) 0%, var(--yellow-d) 100%);
  opacity: .22;
}
.jhead__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-jp); font-weight: 900; font-size: 12.5px;
  color: var(--yellow);
  padding: 6px 0; margin-bottom: 10px;
}
.jhead__back:hover { text-decoration: underline; text-underline-offset: 4px; }
.jhead__no {
  font-size: clamp(10px, 1.05vw, 12.5px); letter-spacing: .26em;
  color: var(--yellow); margin-bottom: 10px;
}
.jhead__ttl {
  font-family: var(--f-jp); font-weight: 900;
  font-size: clamp(28px, 7.4vw, 56px); line-height: 1.24; letter-spacing: .02em;
}
.jhead__lead {
  margin-top: 14px; max-width: 34em;
  font-size: clamp(13px, 1.08vw, 15px); color: #CFC5B4; line-height: 2;
}

/* ---- 職種と給与の早見。目次も兼ねる ---- */
.paynav { display: grid; gap: 10px; margin-top: clamp(22px, 3vw, 32px); }
@media (min-width: 760px) { .paynav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.paynav a {
  height: 100%;
  display: grid; align-content: start; gap: 4px;
  background: var(--white); color: var(--black);
  border: 2.5px solid var(--black); border-radius: 12px;
  box-shadow: 5px 5px 0 var(--yellow);
  padding: 13px 42px 14px 15px;
  position: relative;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.paynav a:hover  { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--yellow); }
.paynav a:active { transform: translate(2px, 2px);   box-shadow: 2px 2px 0 var(--yellow); }
.paynav__job { font-family: var(--f-jp); font-weight: 900; font-size: 13.5px; line-height: 1.5; }
.paynav__pay {
  font-family: var(--f-jp); font-weight: 900;
  font-size: clamp(17px, 2.2vw, 22px); line-height: 1.3;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
}
.paynav__pay i {
  font-style: normal; font-size: 10.5px; letter-spacing: .06em;
  background: var(--yellow); border-radius: 4px; padding: .2em .5em;
}
.paynav__go {
  position: absolute; right: 14px; top: 50%; translate: 0 -50%;
  font-size: 12px; color: var(--amber-t);
}

/* ------------------------------------------------------------ 職種ごとの条件 */
.sec--jd { background: var(--white); }
.sec--jd .wrap { display: grid; gap: clamp(20px, 3.2vw, 34px); }
.jd__empty {
  background: var(--wash); border: 2.5px dashed var(--black); border-radius: 14px;
  padding: clamp(22px, 3vw, 34px); text-align: center;
  font-family: var(--f-jp); font-weight: 900; font-size: 14px;
}

.jd {
  min-width: 0;
  background: var(--white);
  border: 3px solid var(--black); border-radius: 18px;
  box-shadow: 8px 10px 0 rgba(15, 13, 11, .82);
  padding: clamp(20px, 3vw, 36px);
  display: grid; gap: clamp(16px, 2.2vw, 22px); align-content: start;
  /* ヘッダの下に隠れないように、リンクで飛んだときの余白を確保する */
  scroll-margin-top: calc(var(--hd) + 18px);
}
@media (min-width: 940px) {
  .jd {
    grid-template-columns: minmax(0, 344px) minmax(0, 1fr);
    grid-template-areas: "head spec" "pay spec" "act spec";
    column-gap: clamp(26px, 3.2vw, 46px);
  }
  .jd__head { grid-area: head; }
  .jd__pay  { grid-area: pay; }
  .jd__spec { grid-area: spec; }
  .jd__act  { grid-area: act; align-self: end; }
}

.jd__type {
  display: inline-block; margin-bottom: 9px;
  background: var(--black); color: var(--yellow);
  font-family: var(--f-jp); font-weight: 900; font-size: 11px;
  padding: .32em .9em; border-radius: 999px;
}
.jd__ttl {
  font-family: var(--f-jp); font-weight: 900;
  font-size: clamp(19px, 2.6vw, 28px); line-height: 1.38;
  padding-bottom: 11px; border-bottom: 3px solid var(--yellow);
}
.jd__body { margin-top: 12px; font-size: 13.5px; color: #4A4136; }

/* ---- 給与。このページでいちばん強い面 ---- */
.jd__pay {
  background: var(--yellow);
  border: 2.5px solid var(--black); border-radius: 13px;
  box-shadow: 4px 5px 0 var(--black);
  padding: clamp(13px, 1.8vw, 18px) clamp(15px, 2vw, 20px);
  display: grid; gap: 4px; align-content: start;
}
.jd__pay-l {
  justify-self: start;
  background: var(--black); color: var(--yellow);
  font-family: var(--f-jp); font-weight: 900; font-size: 11px;
  letter-spacing: .08em; padding: .28em .8em; border-radius: 999px;
}
/* 「1,100円 〜 1,400円」がぎりぎり1行に収まる大きさ。
   これ以上大きくすると、末尾の「円」だけが次の行へこぼれる */
.jd__pay-v {
  font-family: var(--f-jp); font-weight: 900;
  font-size: clamp(22px, 3vw, 29px); line-height: 1.28; letter-spacing: 0;
  color: var(--black);
}
.jd__pay-n { font-size: 12.5px; line-height: 1.85; color: #3B2E10; }

/* ---- 条件の表。店舗ページの表と同じ組み方でそろえる ---- */
.jd__spec {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.jd__spec > div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 1px; }
@media (min-width: 480px) { .jd__spec > div { grid-template-columns: 7.4em minmax(0, 1fr); } }
.jd__spec dt {
  background: var(--wash); padding: 11px;
  font-family: var(--f-jp); font-weight: 900; font-size: 11.5px; line-height: 1.6;
  color: var(--amber-t);
}
.jd__spec dd {
  background: var(--white); padding: 11px 13px; margin: 0;
  font-size: 13px; line-height: 1.85; overflow-wrap: anywhere;
}

.jd__act { display: grid; gap: 9px; justify-items: stretch; }
.jd__act .btn { width: 100%; }
.jd__actnote { font-size: 11.5px; color: var(--muted); line-height: 1.7; }

/* ------------------------------------------------------------ 待遇・福利厚生 */
.sec--wel { background: var(--paper); }
.wels { display: grid; gap: 12px; }
@media (min-width: 560px)  { .wels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .wels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.wel {
  min-width: 0;
  background: var(--white);
  border: 2.5px solid var(--black); border-radius: 14px;
  box-shadow: 5px 6px 0 var(--yellow-d);
  padding: clamp(16px, 2.2vw, 22px);
  display: grid; align-content: start; gap: 8px;
}
.wel__ico {
  display: grid; place-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--yellow); border: 2.5px solid var(--black);
  font-family: var(--f-jp); font-weight: 900; font-size: 19px; line-height: 1;
  color: var(--black);
}
.wel__ttl { font-family: var(--f-jp); font-weight: 900; font-size: 14.5px; line-height: 1.5; }
.wel__note { font-size: 12.5px; line-height: 1.85; color: #4A4136; }

/* ---------------------------------------------------------------- 注意書き */
.sec--jnote { background: var(--paper); padding-top: 0; }
.jnote__links {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px;
}
.jnote__links a {
  font-family: var(--f-jp); font-weight: 900; font-size: 13px; color: var(--amber-t);
  border-bottom: 2px solid var(--yellow); padding-bottom: 2px;
}