/* =========================================================
   職員募集ページ固有CSS (p-recruit.css)
   参照: refs/recruit-full.png (InDesign原稿)
   共通の .spec-table/.spec-row/.pay-block/.benefits/.btn-pill を流用
   ========================================================= */

.rc{position:relative;overflow:hidden}
/* 原稿の本文は黒に近い濃色 (実測 #141413) → ページ固有のインク変数 */
.recruit{--rc-ink:#1A1A18}

/* ---- ページタイトル + リード ---- */
.rc-head{padding:30px 20px 6px;text-align:center}
/* タイトルは小塚ゴシック(角) Regular(400)・水色 #46BEDD (原稿実測一致) */
.page-title{
  font-family:var(--font-r);color:var(--aqua);
  font-size:24px;letter-spacing:.2em;font-weight:400;
  margin-bottom:16px;
}
/* リードは本文=小塚ゴシック・濃色(黒に近い)・行間やや詰め (原稿準拠) */
.rc-lead{
  font-family:var(--font-g);color:var(--rc-ink);font-weight:400;
  font-size:13.5px;line-height:1.95;letter-spacing:.04em;
}

/* ---- 募集要項 セクション ---- */
.rc-spec{position:relative;padding:8px 20px 14px;z-index:1}
/* sec-head=募集要項: 小塚ゴシック(角) Regular・水色 (原稿準拠) */
.rc-spec .sec-head{margin-top:6px;margin-bottom:8px;font-weight:400}
/* サブ=保育士・児童指導員募集中: 濃色(黒に近い)・中字 (原稿準拠) */
.rc-spec__sub{
  font-family:var(--font-g);color:var(--rc-ink);font-weight:400;
  font-size:15px;letter-spacing:.1em;margin-bottom:22px;
}

/* スペック表をコンテンツ幅に収める (装飾の木の内側) */
/* 原稿の罫線は暖色グレー1px (#C0BCB7)・縦罫線あり (実測 srgb146 / 表示192,188,183) */
.rc-spec .spec-table{position:relative;z-index:2;border-top-color:#C0BCB7}
.rc-spec .spec-row{border-bottom-color:#C0BCB7}
/* dt/dd の間に縦罫線 (原稿準拠): 行の高さ全体に渡す */
.rc-spec .spec-row{position:relative}
.rc-spec .spec-row::before{
  content:"";position:absolute;top:0;bottom:0;left:100px;
  width:1px;background:#C0BCB7;z-index:1;
}
/* dtラベルは水色 #46BEDD (原稿実測 srgb70,190,221) */
.rc-spec .spec-row dt{color:var(--aqua)}
/* dd本文は黒に近い濃色 (原稿実測 #141413) */
.rc-spec .spec-row dd{color:var(--rc-ink)}

/* 待遇行内の給与ブロック: 原稿はカード背景なしのプレーンテキスト */
.spec-row dd .pay-block{
  background:none;border-radius:0;padding:0;margin:0 0 18px;
}
.spec-row dd .pay-block:first-child{margin-top:2px}
.spec-row dd .pay-block h4{
  font-family:var(--font-g);color:var(--rc-ink);font-weight:700;
  font-size:14px;margin-bottom:7px;letter-spacing:.04em;
}
/* 本文は原稿どおり黒に近い濃色 (実測 #141413) */
.spec-row dd .pay-block p{color:var(--rc-ink);line-height:2.05}
/* 合計は強調色にせず本文色のまま (原稿準拠) */
.spec-row dd .pay-block .total{color:var(--rc-ink);font-weight:400}

/* 福利厚生: 原稿は罫線なし・ラベル固定幅+値のプレーン2列 */
.spec-row dd .benefits{margin-top:22px}
.spec-row dd .benefits .row{
  display:flex;justify-content:flex-start;
  border-bottom:none;padding:5px 0;
  color:var(--rc-ink);line-height:1.7;
}
.spec-row dd .benefits .row span:first-child{
  flex:0 0 auto;width:120px;color:var(--rc-ink);font-weight:400;
  letter-spacing:.02em;
}
.spec-row dd .benefits .row span:last-child{
  color:var(--rc-ink);font-weight:400;
}
/* 2文字ラベル(昇給/賞与)は文字間を空けて4文字ラベルと頭から揃える */
.spec-row dd .benefits .row span:first-child.kana2{
  display:inline-block;width:120px;
  text-align:justify;text-align-last:justify;text-justify:inter-character;
}
.spec-row dd .benefits .row span:first-child.kana2::after{
  /* justify用の不可視ストレッチ (約4文字幅で頭2文字を割付) */
  content:"";display:inline-block;width:46%;
}

/* ---- 装飾の木・葉 (左右マージンに配置) ----
   原稿配置: 左=葉(052-17)上→水色木(050-14)下 / 右=丸木(051-05)上→針葉(050-10)下 */
.rc-tree{position:absolute;pointer-events:none;z-index:0;opacity:.95}
/* SP: 表に被らないよう小さめ・端に寄せる */
.rc-tree.t-tl{width:44px;top:60px;left:-4px;animation:floaty 7s ease-in-out infinite}
.rc-tree.t-ml{width:42px;top:430px;left:-2px;animation:floaty 6.4s ease-in-out .5s infinite}
.rc-tree.t-tr{width:42px;top:90px;right:-4px;animation:floaty 6.6s ease-in-out .2s infinite}
.rc-tree.t-mr{width:42px;top:440px;right:-2px;animation:floaty 7s ease-in-out .7s infinite}

/* ---- 注記 + 第一CTA ---- */
/* 注記は原稿どおり dd列の左端から左揃え (中央寄せにしない) */
.rc-note{
  text-align:left;font-size:12px;color:var(--ink-soft);
  letter-spacing:.06em;margin:14px 0 4px;
}
.rc-cta{display:flex;justify-content:center;margin:26px 0 10px}
/* 原稿: フラットな水色ピル・影なし・テキスト中字・末尾に > を密着 */
.btn-pill.rc-entry{
  font-size:16px;padding:12px 44px;letter-spacing:.1em;
  font-weight:400;gap:0;
  background:var(--aqua-btn);box-shadow:none;
}
.btn-pill.rc-entry:hover{box-shadow:none;background:var(--aqua-btn-d)}
.btn-pill.rc-entry .gt{margin-left:.18em;font-weight:400}

/* =========================================================
   PC レイアウト (原稿 約1000pt 幅 忠実再現)
   ========================================================= */
@media (min-width:860px){
  .rc-head{padding:64px 30px 10px}
  /* 原稿実測(1389換算 glyph高34/字幅157)に合わせる: 中字・字間ほどほど */
  .page-title{font-size:36px;letter-spacing:.18em;margin-bottom:24px}
  /* リードは原稿実測(line1幅439/glyph高16)に合わせ濃色・行間詰め */
  .rc-lead{font-size:17.5px;line-height:1.95;letter-spacing:.13em}

  .rc .dots{max-width:880px;margin:30px auto 10px}

  .rc-spec{padding:24px 30px 40px;max-width:1160px;margin:0 auto}
  /* 募集要項=原稿実測(glyph高30/字幅137)に合わせる */
  .rc-spec .sec-head{font-size:33px;letter-spacing:.12em;margin-bottom:12px}
  .rc-spec__sub{font-size:19px;letter-spacing:.12em;margin-bottom:36px}

  /* 表幅は原稿実測比 (表 1498px / ページ 2202px ≒ 0.68) → 945px */
  .rc-spec .spec-table{max-width:945px;margin:10px auto 30px}

  /* dt列は原稿比率 (265px/1498px ≒ 0.177) → 168px。dd は縦罫線直後から */
  /* 本文サイズは原稿実測 (グリフ高27px@2202 / 1.585 ≒ 17px) */
  .rc-spec .spec-row{grid-template-columns:168px 1fr;padding:18px 6px;column-gap:0;align-items:center}
  .rc-spec .spec-row dt{font-size:16px;letter-spacing:.08em;padding-left:30px;align-self:center}
  .rc-spec .spec-row dd{font-size:16px;line-height:1.9;letter-spacing:.04em;padding-left:24px}
  /* 縦罫線をPCの dt/dd 境界 (padding6 + dt168) に合わせる */
  .rc-spec .spec-row::before{left:174px}

  /* 給与ブロックは縦・カードなしプレーン (原稿どおり待遇セル内) */
  .spec-row dd .pay-block{max-width:560px;margin:0 0 20px}
  .spec-row dd .pay-block:first-child{margin-top:4px}
  .spec-row dd .pay-block h4{font-size:16px;margin-bottom:8px}
  .spec-row dd .pay-block p{font-size:16px;line-height:1.95;letter-spacing:.02em}
  /* 基本給ブロックと左端を揃える: 基底PCの margin:14px auto による中央寄せを解除 */
  .spec-row dd .benefits{max-width:600px;margin:24px 0 0}
  .spec-row dd .benefits .row{font-size:16px;padding:4px 0}
  .spec-row dd .benefits .row span:first-child,
  .spec-row dd .benefits .row span:first-child.kana2{width:132px}

  /* 装飾の木: 原稿実測位置 (rc-spec top=430基準) */
  /* 左: 葉(052-17) 上 → 水色木(050-14) 下 */
  .rc-tree.t-tl{width:96px;top:150px;left:1.5%;}
  .rc-tree.t-ml{width:94px;top:660px;left:2%;}
  /* 右: 丸木(051-05) 上 → 針葉(050-10) 下 */
  .rc-tree.t-tr{width:90px;top:250px;right:1.5%;}
  .rc-tree.t-mr{width:90px;top:710px;right:2%;}

  /* 注記は dd列の左端に合わせて左揃え (表と同じ中央寄せ枠 + 左パディング) */
  .rc-note{
    font-size:14px;margin:20px auto 6px;
    max-width:945px;padding-left:204px;text-align:left;
  }
  .rc-cta{margin:44px 0 14px}
  /* 原稿: フラットな水色ピル・影なし・横長(幅515/高46@1389)・末尾 > 密着・中字 */
  .btn-pill.rc-entry{
    font-size:23px;line-height:1;padding:10px 116px;letter-spacing:.2em;
    font-weight:400;border-radius:30px;box-shadow:none;
  }
  .btn-pill.rc-entry .gt{margin-left:0;font-weight:400}
}

/* 超ワイドでも木が離れすぎないように上限 */
@media (min-width:1400px){
  .rc-tree.t-tl{left:2%}
  .rc-tree.t-ml{left:2.5%}
  .rc-tree.t-tr{right:2%}
  .rc-tree.t-mr{right:2.5%}
}

/* =========================================================
   SP専用(<860px): 表・本文に干渉する装飾木を非表示(先方指摘 2026-06-25)
   ========================================================= */
@media (max-width:859px){
  .rc-tree{display:none}
}