@charset "UTF-8";
/* ==========================================================================
   採用情報ページ専用スタイル（p-recruit-）
   共通部品（c-）は common.css 側を使い、ここにはこのページ固有のものだけを書く。
   カンプ: Figma winjeLDXMguhfDP4yN4FVL / node-id 1282-4923（PC 1440px・全高 3158px）
   ※ 他6ページ（1259- 番台）と同じ改訂版の作り。ページMVに水色の背景帯は無い。
   このページだけ帯が「大角丸」ではなく上下が波形（recruit_wave.svg）になっている。
   ========================================================================== */

/* ==========================================================================
   1. ページMV
      カンプ y142–784。左に欧文＋ページタイトル＋リード、右に写真2枚、装飾円4つ。
   ========================================================================== */
.p-recruit-mv {
  padding-top: 73px;
  padding-bottom: 176px;
}

/* 欧文見出し（カンプ 48px・グラデ文字。他ページの 64px より小さい） */
.p-recruit-mv .c-page-mv-en {
  font-size: 3rem;
  line-height: 1;
}

/* 「採用情報」（カンプは Zen Maru の Medium・字送り0。他ページは Bold） */
.p-recruit-mv .c-page-mv-title {
  margin-top: 8px;
  font-weight: 500;
  letter-spacing: 0;
}

/* 「がちょう整骨院では現在スタッフを募集中です！」（カンプ 20px Zen Maru Bold） */
.p-recruit-mv-catch {
  margin-top: 14px;
  font-family: var(--font-ja);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}

/* リード3段落（カンプ 524px・16px・字送り .2em・段落間24px）
   カンプの line-height は 1.5 / 1.6 / 1.6 とばらついているので 1.5 に統一した */
.p-recruit-mv .c-page-mv-lead {
  max-width: 524px;
  margin-top: 24px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

.p-recruit-mv .c-page-mv-lead + .c-page-mv-lead { margin-top: 24px; }

/* 大きい写真（カンプ 529×297 @1023,298。右端 x=1440 で見切れる／影なし） */
.p-recruit-mv-photo {
  left: 71.0417%;
  top: 156px;
  width: 36.7361%;
  border-radius: var(--r-card) 0 0 var(--r-card);
  box-shadow: none;
}

/* MVの枠を1440pxで止めた（common.css の c-page-mv--article）ぶん、
   カンプで画面外に見切れていた右側112pxを切り落とす。
   このページの大きい写真だけ left 71.0417% ＋ width 36.7361% ＝ 107.78% と
   枠からはみ出す指定なので、1440px超ではそのままだと右の余白に飛び出してしまう。
   112px ÷ 写真幅529px = 21.17%（写真自身の幅に対する割合なので画面幅が変わっても同じ）。
   1440px以下は画面（html の overflow-x: hidden）側で切れるため指定不要 */
@media (min-width: 1440px) {
  .p-recruit-mv-photo { clip-path: inset(0 21.17% 0 0); }
}

/* 小さい写真（カンプ 248×139 @829,213。大きい写真より前面・硬い影あり） */
.p-recruit-mv-photo-sub {
  left: 57.5694%;
  top: 71px;
  width: 17.2222%;
  z-index: 2;
}

/* 装飾円（カンプの絶対y － 141.8px）。写真より前面で乗算合成（他ページと同じ） */
.p-recruit-mv .c-deco-circle {
  z-index: 3;
  mix-blend-mode: multiply;
}

.p-recruit-mv-c1 { left: 96px;   top: 110px; width: 145px; height: 145px; }
.p-recruit-mv-c2 { left: 1265px; top: 56px;  width: 122px; height: 122px; }
.p-recruit-mv-c3 { left: 828px;  top: 265px; width: 181px; height: 181px; }
.p-recruit-mv-c4 { left: 954px;  top: 382px; width: 109px; height: 109px; }

/* ==========================================================================
   2. WANTED（求める人物像はこんな人！）
      カンプ y784–1537 の水色02の帯。上下の境界が波形（幅1078×高さ88 @x182）。
      波は要素を増やさず ::before / ::after の background-image で敷く。
      上＝帯と同じ水色でページ背景に食い込ませ、下＝ページ背景色で帯を削る。
   ========================================================================== */
.p-recruit-wanted {
  position: relative;
  padding: 113px 0 242px;
  background: var(--c-blue02);
}

.p-recruit-wanted::before,
.p-recruit-wanted::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1078px;
  max-width: 75%;
  height: 88px;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* 上の波（帯の上へ 87px 飛び出す。1px は帯に重ねて隙間が出ないようにする） */
.p-recruit-wanted::before {
  top: -87px;
  background-image: url("/system_panel/uploads/images/recruit_wave.svg");
}

/* 下の波（ページ背景色で帯の下端を削る。1px はみ出させて隙間を防ぐ） */
.p-recruit-wanted::after {
  bottom: -1px;
  height: 89px;
  background-image: url("/system_panel/uploads/images/recruit_wave-bg.svg");
}

/* 写真＋テキストの2カラム（カンプ 373 ＋ 32 ＋ 608 ＝ 1013px を中央寄せ） */
.p-recruit-wanted-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 32px);
  max-width: 1013px;
  margin-left: auto;
  margin-right: auto;
}

/* 写真（カンプ 373×398。影は下方向だけの薄いもの） */
.p-recruit-wanted-photo {
  width: 100%;
  box-shadow: 0 8px 0 rgba(185, 217, 235, 0.2);
}

/* 「WANTED」の点線はカンプ 109px（共通部品の既定 75px より長い） */
.p-recruit-wanted-label { min-width: 109px; }

/* 本文3段落（カンプ 16px・字送り .2em・段落間16px） */
.p-recruit-wanted-text {
  margin-top: 16px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* ==========================================================================
   3. 募集要項
      カンプ y1696–2406 の白パネル（角丸32px・2px枠・硬い影）＋定義リスト8行。
      装飾円は上2つを ::before / ::after、下2つを div でまかなう。
   ========================================================================== */
.p-recruit-req {
  position: relative;
  padding-top: 159px;
}

/* 下側の装飾円（パネルの下端から CTA にかかる位置。セクション外にはみ出す）
   位置は .p-recruit-req の中で完結させる:
   ・左右は中央寄せのパネル（1080px）の左端を基準にする。
     パネル左端 = 50% - 540px なので、そこからの差分を足し引きしている。
     ウィンドウ左端からの絶対値（80px / 195px）だと、画面幅が変わると
     パネルとの位置関係がずれてしまう（1440px以外で崩れる）。
   ・上下はセクション下端（＝パネル下端。セクションに下paddingが無いので一致）
     を基準にする。top の固定値（860px / 946px）だと、中身の行数が変わって
     パネルの高さが変わったときにパネルから離れてしまう。 */
.p-recruit-req .c-deco-circle { mix-blend-mode: multiply; }

.p-recruit-req-c1 { left: calc(50% - 640px); top: 120px; width: 203px; height: 203px; }

.p-recruit-req-c2 { left: calc(50% - -510px); top: 267px; width: 107px; height: 107px; }


/* カンプ: パネル左端の 100px 左 ／ 円の下端がパネル下端の 163px 下 */
.p-recruit-req-c3 { left: calc(50% - 640px); bottom: -163px; width: 172px; height: 172px; }

/* カンプ: パネル左端の 15px 内側 ／ 円の下端がパネル下端の 191px 下 */
.p-recruit-req-c4 { left: calc(50% - 525px); bottom: -191px; width: 114px; height: 114px; }

/* パネル（カンプ 1080×710・地色は白90%・padding 64px・角丸32px・硬い影）
   l-inner の左右 padding 16px を挟むと 1048px になってしまうので、
   ラッパーを作らずパネル自身で 1080px を確保する（出張整体の白パネルと同じ手） */
.p-recruit-req-panel {
  width: calc(100% - 32px);
  max-width: var(--inner);
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.9);
  padding: 64px;
  box-shadow: 8px 8px 0 rgba(24, 61, 129, 0.25);
}

/* カンプは text-box-trim で行送りが切られているので line-height は 1 で合わせる */
.p-recruit-req-title {
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
}

/* 定義リスト（カンプ 718px・見出し欄 120px ＝ col-2 の 16.67%） */
.p-recruit-req-table {
  width: 100%;
  max-width: 718px;
  margin: 25px auto 0;
}

.p-recruit-req-row { padding: 16px 0; }

/* 行間の罫（カンプは 0.5px #7a8ba9。1行目の上・8行目の下には罫が無い） */
.p-recruit-req-row + .p-recruit-req-row { border-top: 1px solid #7a8ba9; }

.p-recruit-req-label > p {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-recruit-req-value > p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================================
   4. CTA（ご応募お待ちしております！）
      カンプ y2516–2642。共通部品 c-cta を使うが、ボタンは1つだけ。
   ========================================================================== */
.p-recruit-cta {
  margin-top: 106px;
  padding-top: 0;
  padding-bottom: 80px;
}

/* カンプの見出しは Noto Bold 36px・行送り1.6・字送り0（他ページの c-cta は Zen Maru） */
.p-recruit-cta .c-cta-title {
  font-family: var(--font-base);
  line-height: 1.6;
  letter-spacing: 0;
}

.p-recruit-cta .c-cta-btns { margin-top: 16px; }

/* ボタン（カンプ 236×52・padding 10px 48px） */
.p-recruit-cta .c-btn {
  min-height: 52px;
  padding: 10px 48px;
}

/* グースケ（カンプ 118×138 @1008,2510） */
.p-recruit-cta .c-cta-mascot {
  width: 118px;
  right: 134px;
  bottom: 74px;
}

/* ==========================================================================
   5. レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
      カンプが無いのでこちら側で設計した値
   ========================================================================== */
@media (min-width: 992px) {
  /* 写真の列はカンプどおり固定幅。テキスト列が残りを伸縮する */
  .p-recruit-wanted-media { flex: none; width: 373px; }
  .p-recruit-wanted-body { flex: 1 1 0; min-width: 0; margin-left: 32px; }
}

@media (max-width: 991.98px) {
  /* 波は画面幅に合わせて縮める（帯の左右余白ぶんだけ内側に置く） */
  .p-recruit-wanted::before,
  .p-recruit-wanted::after { max-width: 84%; height: 48px; }
  .p-recruit-wanted::before { top: -47px; }
  .p-recruit-wanted::after { height: 49px; }

  .p-recruit-wanted { padding: 72px 16px 96px; }
  .p-recruit-wanted-photo { max-width: 373px; }
  .p-recruit-wanted-media { margin-bottom: 24px; }

  .p-recruit-req { padding-top: 56px; }
  .p-recruit-req::before,
  .p-recruit-req::after,
  .p-recruit-req .c-deco-circle { display: none; }
  .p-recruit-req-panel { box-shadow: 4px 4px 0 rgba(24, 61, 129, 0.25); }
  .p-recruit-req-title { font-size: 1.5rem; }

  .p-recruit-cta {
    margin-top: 56px;
    padding-bottom: 56px;
  }
  .p-recruit-cta .c-cta-mascot { width: 118px; }
}

@media (max-width: 767.98px) {
  /* MV: 767px以下はカンプ 1396-21350 の記事型SPレイアウト（common.css の c-page-mv--article）。
     768〜991px はPCと同じ表示にするため、タブレット向けの指定は置かない */
  .p-recruit-mv { padding-bottom: 56px; }
  .p-recruit-mv-catch { font-size: 1.125rem; }
  /* 水色の円が2つあり両方 --blue なので、2つ目だけ下の位置に振り分ける */
  .c-page-mv.c-page-mv--article .p-recruit-mv-c2 { left: 188px; top: 691px; width: 61px; height: 61px; }

  .p-recruit-wanted { padding: 56px 16px 72px; }
  .p-recruit-wanted-text { font-size: 0.9375rem; letter-spacing: 0.06em; }

  .p-recruit-req-panel{ padding:30px 20px; }
  .p-recruit-req-table { margin-top: 24px; }
  .p-recruit-req-row { padding: 12px 0; flex-direction: column; }
  .p-recruit-req-label > p,
  .p-recruit-req-value > p { font-size: 0.9375rem; }
  .p-recruit-req-label ,
  .p-recruit-req-value { max-width: 100%; }
}