/* ============================================================
   RECRUIT — 本巣スタジオ 採用ページ
   TOP のトークン / base / layout / site をすべて継承し、ここには
   RECRUIT 固有の構図だけを書く。TOP・ABOUT のセクション CSS は読み込まない。

   Composition Engine（LOOP_LOG「Composition Engine」より）
     Section Frame（position:relative + min-height:NNvh）の中へ
     Main Actor / Counter Weight / Typography を個別に絶対配置する。
     余白は padding で作らず、Object を偏らせた結果として残す = Empty Plane。
     寸法は vw / vh 基準にして 1920 で縮こませない。
   ============================================================ */

/* ---------- 下層ページの土台（ABOUT と同一の型） ---------- */
.lp{ background: var(--white); }
.lp .hdr{ background: var(--off-white); color: var(--ink); box-shadow:0 1px 0 var(--hair); }
/* Mobile は Google 広告からの主要流入。追従バー（美容系LPの典型）を作らない代わりに、
   ヘッダー内の LINE を .cta と同じ語彙（角丸0・ヘアライン・小英字）で最小限だけ強める。 */
@media (max-width: 899px){
  .lp .hdr .tlink{ border:1px solid var(--hair-strong); padding: 10px 14px; opacity:1; }
  .lp .hdr .tlink:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }
}
code{ font-family: var(--ff-display); font-size: .92em; letter-spacing: 0; }

/* ============================================================
   01 FIRST VIEW
   Main Actor    = 条件（巨大和文）
   Counter Weight= 写真（Viewport 右端から --outer-lg・下端は Purple 面に切られる）
   Empty Plane   = 右上に集中
   ── reveal を掛けない。広告クリック直後に条件が見えない瞬間を作らないため。
   ============================================================ */
.rc-hero{ background: var(--off-white); position:relative; }

.rc-hero__claim{
  font-family: var(--ff-jp); font-weight:400;
  letter-spacing:-.04em; margin:0;
}
/* 数字だけ Display ファミリー（--fs-num と同じ扱い）。新しい語彙は足さない */
.rc-hero__n{
  font-family: var(--ff-display); font-weight:200;
  font-size:1.3em; letter-spacing:.01em; padding: 0 .04em;
}
.rc-hero__open{ color: var(--ink-70); }
.rc-hero__role{ color: var(--ink); }

@media (min-width: 900px){
  .rc-hero{ min-height: 96vh; }
  /* Alignment Line 1 = shell 左端 */
  .rc-hero__idx  { position:absolute; left: var(--pad); top: 15%; width: 24%; z-index:2; }
  .rc-hero__claim{ position:absolute; left: var(--pad); top: 21.5%; z-index:2;
                   font-size: clamp(52px, 5.4vw, 86px); line-height:1.24; }
  /* Alignment Line 2 = 内側へインデント（見出しより内側に落とす） */
  .rc-hero__sub  { position:absolute; left: calc(var(--pad) + 6%); top: 56%; z-index:2;
                   max-width: 32ch; display:grid; gap: 18px; font-size: var(--fs-lead); }
  .rc-hero__cta  { position:absolute; left: calc(var(--pad) + 6%); top: 78%; z-index:2; }
  /* Counter Weight：shell に収めず Viewport 端からの Outer Space で置く。
     下端は Frame を 7vh ほど超え、次の Purple 面に切られる（原理9：Viewport 外へ続く構図） */
  .rc-hero__fig  { position:absolute; right: var(--outer-lg); top: 20%;
                   width: 33vw; height: 84vh; z-index:1; margin:0; }
  .rc-hero__fig .ph{ width:100%; height:100%; }
}

@media (max-width: 899px){
  /* スクロール前に「週4日 / 月給30万円 / 本巣 / 正社員募集」の4点が入る。
     写真は右下から侵入させ、続きがあることだけを示す。 */
  .rc-hero{ padding: 92px var(--gut) 0; }
  .rc-hero__claim{ font-size: clamp(31px, 9.2vw, 42px); line-height:1.34; margin-top:18px; }
  .rc-hero__n{ font-size:1.24em; }
  .rc-hero__sub{ margin-top:26px; display:grid; gap:12px; font-size: var(--fs-lead); }
  .rc-hero__cta{ margin-top:30px; }
  .rc-hero__fig{ margin: 36px calc(var(--gut) * -1) 0 14%; }
  .rc-hero__fig .ph{ height: 40vh; }
}

/* ============================================================
   02 WHY NOW — Purple 全面（このページで1回だけ）
   C-3 の条件：写真が同居 / グラデ無し / 40%以上が空の色面 / 見出し+短文
   01 の写真が右だったので、ここは写真を左端へ振って Eye Flow を折り返す。
   ============================================================ */
.rc-why{
  position:relative; z-index:2;           /* 01 の写真のはみ出しをこの面で切る */
  background: var(--brand-purple); color: var(--white); overflow:hidden;
}
.rc-why .display{ color: var(--white); }
.rc-why__h{ font-family: var(--ff-jp); font-weight:400;
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.rc-why__body .body{ color: var(--white-70); max-width: none; }
.rc-why__body .body + .body{ margin-top: var(--tx-p); }
.rc-why__fig .ph img{ filter: saturate(.55) contrast(1.10) brightness(.92); }

@media (min-width: 900px){
  .rc-why{ min-height: 104vh; }
  /* Counter Weight：左の Viewport 端へベタ付け（FB-EDGE 左） */
  .rc-why__fig  { position:absolute; left:0; top: 12%; width: 32vw; height: 72vh; z-index:1; }
  .rc-why__fig .ph{ width:100%; height:100%; }
  .rc-why__in   { position:absolute; inset:0; z-index:2; }
  .rc-why__in .idx{ position:absolute; left: 40vw; top: 9%; width: 22%; }
  .rc-why__en   { position:absolute; left: 40vw; top: 13%; }
  .rc-why__h    { position:absolute; left: 40vw; top: 46%;
                  font-size: clamp(28px, 2.6vw, 38px); }
  /* Alignment Line 3：見出しより内側 */
  .rc-why__body { position:absolute; left: 45vw; top: 63%; max-width: 34ch; }
}

@media (max-width: 899px){
  .rc-why{ padding: var(--sec-open-t) var(--gut) var(--sec-open-b); }
  .rc-why__fig{ margin: 0 18% var(--tx-l) calc(var(--gut) * -1); }
  .rc-why__fig .ph{ height: 44vh; }
  .rc-why__en{ margin-top: var(--tx-s); }
  .rc-why__h{ margin-top: var(--tx-m); }
  .rc-why__body{ margin-top: var(--tx-m); }
}

/* ============================================================
   03 WORKING STYLE — 数字が主役。カード化しない
   ============================================================ */
.rc-terms__nums{ display:grid; gap: 48px; margin-top: 64px; }
.rc-terms__v{
  font-family: var(--ff-jp); font-weight:400; letter-spacing:-.04em;
  font-size: clamp(28px, 3.1vw, 44px); line-height:1.2; margin-top: 14px;
}
.rc-terms__n{
  font-family: var(--ff-display); font-weight:200;
  font-size: 1.95em; letter-spacing:.01em; padding: 0 .05em;
}
.rc-terms__cap{ font-size: var(--fs-label); letter-spacing:.06em; color: var(--ink-45); margin-top: 14px; }

/* 罫線だけで組む。枠・角丸・影・背景色は使わない */
.rc-terms__list{ display:grid; margin-top: 72px; }
.rc-terms__list > li{
  border-top:1px solid var(--hair); padding: 20px 0;
  font-size: var(--fs-lead); letter-spacing: var(--ls-body);
}

@media (min-width: 900px){
  /* 2つの数字を同じ高さに並べない（対にして中央へ寄せない） */
  .rc-terms__nums{ grid-template-columns: 40% 1fr; column-gap: 88px; }
  .rc-terms__nums > *:nth-child(2){ margin-top: 56px; }
  .rc-terms__list{ grid-template-columns: 1fr 1fr; column-gap: 88px; }
  .rc-terms__list > li:nth-last-child(-n+2){ border-bottom:1px solid var(--hair); }
}
@media (max-width: 899px){
  .rc-terms__nums{ margin-top: 44px; gap: 36px; }
  .rc-terms__list{ margin-top: 48px; }
  .rc-terms__list > li:last-child{ border-bottom:1px solid var(--hair); }
}

/* ============================================================
   04 LESSON — 大写真 + 対角構図
   ============================================================ */
.rc-lesson__body .body + .body{ margin-top: var(--tx-p); }

@media (min-width: 900px){
  .rc-lesson__o{ position:relative; min-height: 84vh; }
  /* Main Actor：Viewport 端から --outer-lg。shell の外へ出して 1920 で縮こませない */
  .rc-lesson__main{
    position:absolute; top:0; right: calc(var(--outer-lg) - var(--pad));
    width: min(58vw, 1040px); height: 58vh; z-index:1; margin:0;
  }
  .rc-lesson__main .ph{ width:100%; height:100%; }
  .rc-lesson__label{ position:absolute; left:0; top: 3%;  width: 22%; z-index:3; }
  .rc-lesson__en   { position:absolute; left:0; top: 12%; z-index:3; }
  /* 写真の下端より下へ落として、左右並列ではなく対角にする */
  .rc-lesson__body { position:absolute; left: 5%; top: 68%; max-width: 32ch; z-index:3; }
}
@media (max-width: 899px){
  .rc-lesson__main{ margin: 0 calc(var(--gut) * -1) var(--tx-l) 0; }
  .rc-lesson__main .ph{ height: 52vh; }
  .rc-lesson__en{ margin-top: var(--tx-s); }
  .rc-lesson__body{ margin-top: var(--tx-m); }
}

/* ============================================================
   05 THE WORK — 実務。番号 + 罫線
   ============================================================ */
.rc-work__list{ margin-top: 56px; }
.rc-work__list > li{
  border-top:1px solid var(--hair); padding: 24px 0;
  display:grid; grid-template-columns: 88px 1fr; gap: 24px; align-items:baseline;
}
.rc-work__list > li:last-child{ border-bottom:1px solid var(--hair); }
.rc-work__num{
  font-family: var(--ff-display); font-weight:200; font-size: calc(var(--fs-num) * .58);
  line-height:1; color: var(--ink-45); letter-spacing:.02em;
}
.rc-work__t{ font-size: var(--fs-lead); }
@media (max-width: 899px){
  .rc-work__list{ margin-top: 40px; }
  .rc-work__list > li{ grid-template-columns: 56px 1fr; gap:16px; padding:20px 0; }
}

/* ============================================================
   06 TERMS — 求人票。カードではなく罫線の帳票として組む
   ============================================================ */
.rc-cond__list{ margin-top: 56px; }
.rc-cond__list > div{
  border-top:1px solid var(--hair); padding: 22px 0;
  display:grid; gap: 8px; align-items:baseline;
}
.rc-cond__list > div:last-child{ border-bottom:1px solid var(--hair); }
.rc-cond__list dt{
  font-family: var(--ff-display); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform:uppercase; color: var(--ink-45);
  font-family: var(--ff-jp); text-transform:none; letter-spacing:.06em;
}
.rc-cond__list dd{ margin:0; font-size: var(--fs-lead); }
.rc-cond__note{ font-size: var(--fs-label) !important; color: var(--ink-45); letter-spacing:.04em; }
.rc-cond__list .is-tbd{ color: var(--ink-45); }
.rc-cond__dev{ margin-top: 36px; }
.rc-cond__cta{ margin-top: var(--tx-l); }
@media (min-width: 900px){
  .rc-cond__list > div{ grid-template-columns: 168px minmax(200px, 460px) 1fr; gap: 32px; }
}

/* ============================================================
   07 THE PERSON — 見出しだけ右へ寄せて全体を非対称にする
   ============================================================ */
.rc-who__list{ margin-top: 56px; }
.rc-who__list > li{
  border-top:1px solid var(--hair); padding: 22px 0; font-size: var(--fs-lead);
}
.rc-who__list > li:last-child{ border-bottom:1px solid var(--hair); }
.rc-who__note{ margin-top: 36px; color: var(--ink-70); }
@media (min-width: 900px){
  .rc-who__head{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; }
  /* 見出しだけを右へ寄せて非対称にする。リストは全幅へ戻す。
     リストまで右へ寄せると左半分が丸ごと空になり、
     「大きな空白の反対側に Visual Mass を置く」(PDP 原理2)が成立しなかった。 */
}

/* ============================================================
   08 CONTACT — TOP FINAL CTA の型を継承（Purple は 02 で使い切っている）
   ============================================================ */
.rc-cta{
  position:relative; min-height: 92vh; display:flex; align-items:center;
  color: var(--white); overflow:hidden;
}
.rc-cta__bg{ position:absolute; inset:0; z-index:0; }
.rc-cta__in{ position:relative; z-index:2; width:100%; }
.rc-cta__grid{ display:grid; gap: 48px; }
.rc-cta__en{ margin-top: 28px; }
.rc-cta__h{ font-size: clamp(24px, 2.2vw, 32px); line-height:1.5; letter-spacing: var(--ls-h2); }
.rc-cta__body{ margin-top: var(--tx-m); color: var(--white-70); max-width: 40ch; }
/* 太字にせず、下線で「送るべき言葉」だけを示す */
.rc-cta__body strong{ font-weight:400; color: var(--white); border-bottom:1px solid var(--hair-light); }
.rc-cta__btn{ margin-top: var(--tx-l); }
.rc-cta__dev{ margin-top: 28px; border-left:0; border-top:1px solid var(--hair-light); padding:14px 0 0; }
@media (min-width: 900px){
  .rc-cta__grid{ grid-template-columns: 1fr 42%; gap: 80px; align-items:end; }
}
@media (max-width: 899px){
  .rc-cta{ min-height: auto; padding-block: var(--sec-open-t) var(--sec-open-b); }
}