@charset "UTF-8";
/* =====================================================================
   飛栄建設 採用ページ (recruit) — 土台
   - Figma「採用TOP_水色POP」(幅 1800) から値を整理したデザイントークンと共通部品
   - 既存テーマの CSS と同居するため、クラスは rc- 接頭辞。全体を <div class="rc"> で包む
   - 既存の html{font-size:100px} の影響を受けないよう rem は使わず px と vw(clamp) で指定
   - 横幅: コンテンツ最大 1560px、左右 5%。文字: 1800px で Figma の値、下は clamp で縮む
   ===================================================================== */

/* 既存テーマは 768px 以上で body { min-width: 1080px } (タブレットは横スクロール)。採用ページだけ画面幅に収める */
body.recruit { min-width: 0; }
body.recruit .foot_pagelink { overflow-x: clip; } /* 既存フッターのページリンクが 768〜1079px で横にはみ出し、横スクロールを生むので採用ページだけ切る */

/* ---------- 1. トークン ---------- */
.rc {
  /* 色 */
  --rc-blue-deep: #11327d;   /* 濃紺: 見出し、CTA 背景、フッター */
  --rc-blue: #087fd1;        /* 青: 職種名、タグ、影 */
  --rc-navy: #26466d;        /* 紺: イラスト線 */
  --rc-red: #e8352d;         /* 赤: 見出しの丸、シェブロン */
  --rc-text: #333333;
  --rc-text-sub: #555555;
  --rc-bg: #f7f7f9;          /* 薄いグレーの帯 */
  --rc-line: #dddddd;
  --rc-grad: linear-gradient(90deg, #064b9b 0%, #087fd1 50%, #08aad3 100%);
  --rc-grad-red: linear-gradient(90deg, #e8352d 0%, #f05a32 50%, #f5823d 100%);
  --rc-stripe: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1.2px, transparent 1.2px 6.7px); /* グラデ帯・KV の円に重ねる斜めストライプ。Figma のパターン塗り (六角タイル 0.6 倍、8%) の描画を等倍で実測: 左下→右上の白線、間隔 6.7px */
  /* フォント */
  --rc-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --rc-font-en: "Roboto Condensed", "Arial Narrow", sans-serif; /* 装飾英字 (italic 700)。Figma 表記は Arimo だが字幅の狭い斜体だったので最も近い無料フォントに */
  --rc-font-hand: "Klee One", "Noto Sans JP", cursive; /* 署名 */
  /* 文字サイズ (Figma px → 1800px 基準の vw で縮む。最小値は SP の読みやすさで決めた) */
  --rc-fs-14: clamp(12px, 0.78vw, 14px);
  --rc-fs-16: clamp(14px, 0.89vw, 16px);
  --rc-fs-18: clamp(15px, 1vw, 18px);
  --rc-fs-20: clamp(15px, 1.11vw, 20px);
  --rc-fs-24: clamp(18px, 1.33vw, 24px);
  --rc-fs-32: clamp(22px, 1.78vw, 32px);
  --rc-fs-40: clamp(26px, 2.22vw, 40px);
  --rc-fs-48: clamp(28px, 2.67vw, 48px);
  --rc-fs-52: clamp(32px, 2.89vw, 52px);
  /* 余白 */
  --rc-sec-y: clamp(48px, 4.44vw, 80px);   /* セクション上下 (Figma 60〜80) */
  --rc-sec-y-sm: clamp(32px, 3.33vw, 60px);
  --rc-gap-lg: clamp(40px, 5.56vw, 100px); /* 2 カラム間 (Figma 100) */
  --rc-gap-md: clamp(32px, 3.33vw, 60px);  /* カラム間 (Figma 60) */
  --rc-gap: 30px;
  --rc-gap-sm: 20px;
  /* 形 */
  --rc-radius: 16px;
  --rc-max: 1560px;
  --rc-gutter: 5%;
  --rc-edge: max(5vw, (100vw - var(--rc-max)) / 2); /* 画面端からコンテナ端までの余白 (vw 基準なのでコンテナ内からでも使える) */
  --rc-header-h: 1rem; /* 既存の固定ヘッダー (html 100px 基準で 100px。SP は 0.6rem) */

  font-family: var(--rc-font);
  font-size: var(--rc-fs-16);
  font-weight: 500;
  line-height: 1.7;
  color: var(--rc-text);
  padding-top: var(--rc-header-h);
  overflow-x: clip;
}
.rc *, .rc *::before, .rc *::after { box-sizing: border-box; }
/* リセットは :where() で詳細度を 0 にし、部品側の指定 (.rc-xxx) が常に勝つようにする */
.rc :where(h1, h2, h3, h4, p, ul, figure) { margin: 0; padding: 0; text-align: left; } /* 既存の text-align: justify も打ち消す */
.rc :where(ul) { list-style: none; }
.rc :where(img) { display: block; max-width: 100%; height: auto; }
.rc :where(a) { color: inherit; text-decoration: none; transition: none; }
.rc :where(a):hover { opacity: 1; } /* 既存 a:hover{opacity:.5} を打ち消し、部品側で個別に */
.rc :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- 2. レイアウト ---------- */
.rc-inner { width: min(var(--rc-max), 100% - var(--rc-gutter) * 2); margin-inline: auto; }
.rc-section { position: relative; padding: var(--rc-sec-y) 0; }
.rc-section--sm { padding: var(--rc-sec-y-sm) 0; }
.rc-section--bg { background: var(--rc-bg); }
.rc-section--grad { background: var(--rc-grad); color: #fff; }
.rc-section--grad::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--rc-stripe); }
.rc-cols { display: flex; align-items: center; gap: var(--rc-gap-lg); }
.rc-cols--top { align-items: flex-start; }
.rc-cols > * { min-width: 0; }
.rc-stack { display: grid; gap: var(--rc-gap-sm); }
.rc-stack--lg { gap: var(--rc-gap); }

/* ---------- 3. タイポグラフィ ---------- */
.rc-text { font-size: var(--rc-fs-16); font-weight: 500; line-height: 1.7; color: var(--rc-text-sub); }
.rc-text--dark { color: var(--rc-text); font-weight: 400; }
.rc-ttl { font-weight: 700; line-height: 1.4; color: var(--rc-text); }
.rc-ttl--24 { font-size: var(--rc-fs-24); letter-spacing: .04em; }
.rc-ttl--32 { font-size: var(--rc-fs-32); }
.rc-grad-text { background: var(--rc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.rc-en { /* 背景に敷く装飾英字 */
  font-family: var(--rc-font-en); font-style: italic; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  background: var(--rc-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .14; pointer-events: none; user-select: none; white-space: nowrap;
}
.rc-hand { font-family: var(--rc-font-hand); font-weight: 400; color: #000; }

/* 見出しセット: 赤丸 + 日本語ラベル + 英字(または日本語)見出し */
.rc-heading { display: grid; gap: 8px; justify-items: start; }
.rc-heading__sub { display: flex; align-items: center; font-size: var(--rc-fs-20); font-weight: 500; letter-spacing: .04em; line-height: 1.2; color: var(--rc-text); }
.rc-heading__sub--blue { color: var(--rc-blue-deep); }
.rc-heading__ttl { font-weight: 700; line-height: 1.2; background: var(--rc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.rc-heading__ttl--en { font-size: var(--rc-fs-52); }      /* NEWS / ABOUT US / RELATIONSHIP */
.rc-heading__ttl--xl { font-size: var(--rc-fs-48); }      /* 募集要項・エントリー */
.rc-heading__ttl--lg { font-size: var(--rc-fs-40); }      /* 代表メッセージ */
.rc-heading__ttl--md { font-size: var(--rc-fs-32); }      /* CTA */
.rc-dot { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: #ed5d57; margin-right: 10px; } /* Figma: 赤 #e8352d に白 20% を重ねた色 */
.rc-line-after::after { /* 見出し末尾の横線 (代表メッセージ、囲みの見出し) */
  content: ""; display: inline-block; vertical-align: middle; width: 2.5em; height: 2px; margin-left: .5em; background: currentColor;
}
.rc-heading__ttl.rc-line-after::after { background: var(--rc-blue); }

/* 採用トップ: 薄い装飾英字だけを静かにリビール */
.rc-motion-ready .rc-deco-reveal {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .5s ease, clip-path .8s cubic-bezier(.77, 0, .175, 1);
}
.rc-motion-ready .rc-about__en.rc-deco-reveal.is-visible {
  opacity: .14;
  clip-path: inset(0);
}
.rc-motion-ready .rc-ceo__en.rc-deco-reveal.is-visible {
  opacity: .1;
  clip-path: inset(0);
}
@media (prefers-reduced-motion: reduce) {
  .rc-motion-ready .rc-deco-reveal {
    transition: none;
  }
  .rc-motion-ready .rc-about__en.rc-deco-reveal { opacity: .14; clip-path: none; }
  .rc-motion-ready .rc-ceo__en.rc-deco-reveal { opacity: .1; clip-path: none; }
}

/* ---------- 4. 部品 ---------- */
/* ボタン: 塗り (赤→橙グラデ) / 線 (濃紺) */
.rc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 252px; padding: 20px 40px 20px 52px; border-radius: 50px;
  font-size: 18px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  transition: opacity .5s;
}
.rc .rc-btn--primary { color: #fff; background: var(--rc-grad-red); } /* .rc a{color:inherit} より詳細度を上げる */
.rc .rc-btn--outline { color: var(--rc-blue-deep); background: #fff; border: 2px solid var(--rc-blue-deep); font-weight: 500; }
.rc-btn--sm { min-width: 0; padding: 14px 28px 14px 36px; font-size: 16px; }
.rc-btn:hover { opacity: .5; }
.rc-btn__arrow { position: relative; width: 24px; height: 24px; flex: none; }
.rc-btn__arrow::before { content: ""; position: absolute; left: 5px; top: 50%; width: 14px; height: 2px; background: currentColor; transform: translateY(-50%); }
.rc-btn__arrow::after { content: ""; position: absolute; right: 5px; top: 50%; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.rc-btn--primary .rc-btn__arrow::before { height: 3px; }

/* ラベルタグ (正社員) */
.rc-tag { display: inline-block; padding: 0 8px; border: 1px solid var(--rc-blue); font-size: var(--rc-fs-16); font-weight: 500; line-height: 1.7; color: var(--rc-blue); vertical-align: middle; }

/* 白カード / 薄グレー囲み */
.rc-card { background: #fff; border-radius: var(--rc-radius); color: var(--rc-text); } /* グラデ帯 (白文字) の上でも本文色に戻す */
.rc-card--bg { background: var(--rc-bg); }
.rc-card--pad { padding: 30px 40px; }

/* 角丸写真 */
.rc-photo { border-radius: var(--rc-radius); overflow: hidden; background: #d9d9d9; }
.rc-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 5. レスポンシブ共通 ---------- */
@media (max-width: 1100px) {
  .rc-cols, .rc-cols--top { flex-direction: column; align-items: stretch; gap: var(--rc-gap-md); }
}
@media (max-width: 767px) {
  .rc { --rc-header-h: 0.6rem; }
  .rc-ttl--32 { font-size: 20px; }
  .rc-btn { min-width: 0; width: 100%; padding: 16px 32px 16px 40px; font-size: 16px; }
  .rc-card--pad { padding: 24px 20px; }
  .rc-dot { width: 10px; height: 10px; margin-right: 8px; }
}

/* =====================================================================
   KV (Figma 42:2554, 1800x790)
   ===================================================================== */
.rc-kv {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  height: min(43.8889vw, 790px);
}
.rc-kv__photo, .rc-kv__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-kv__photo img { object-fit: cover; object-position: 50% 42%; } /* kv-main.jpg は左に背景を延長済みで人物が右 7 割の位置にある */
.rc-kv__stage {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: min(100%, 1800px);
  height: 100%;
  transform: translateX(-50%);
}
.rc-kv__circle { /* Figma: ellipse 1443x1354 at (-584,-631)。グラデ + 斜めストライプ */
  position: absolute; z-index: 1; left: -32.4%; top: -79.9%; width: 80.2%; aspect-ratio: 1443 / 1354;
  border-radius: 50%;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 1.2px, transparent 1.2px 8.9px), var(--rc-grad); /* Figma の2枚重ね相当から3枚重ね相当へ。見た目上の縦横ピッチ約 12.6px */
}
.rc-kv__copy { position: absolute; z-index: 2; left: 5.5%; top: 5.5%; width: 22.4%; margin: 0; }
.rc-kv__smiley { position: absolute; z-index: 2; left: 29.4%; top: 32.5%; width: 8.2%; }
.rc-kv__lead {
  position: absolute; z-index: 2; left: 9.6%; top: 66.6%;
  font-size: clamp(13px, 1.22vw, 22px); font-weight: 700; line-height: 1.82; letter-spacing: .04em;
}
.rc-kv__en { /* 写真の上に重ねる白の袋文字 (Figma: 白ストローク 3px、中はほぼ透明)。SVG + feMorphology で輪郭だけ描く */
  position: absolute; z-index: 1; right: 6.6667%; top: 79%; width: 55.5%; height: auto; overflow: visible; /* 1800px 枠内の 1560px コンテンツ端に揃える */
  font-family: var(--rc-font-en); font-style: italic; font-weight: 700; font-size: 156px; /* viewBox 1000x170 内の単位 */
}
.rc-kv__en-fill { fill: rgba(255, 255, 255, .15); }
.rc-kv__en-line { fill: rgba(255, 255, 255, .92); }
.rc-kv__label {
  position: absolute; z-index: 2; right: 6.6667%; top: 72.9%;
  display: inline-flex; align-items: center; /* Figma: 枠線・角丸なし。データ上の白ストロークは非表示。余白は不要なので外した */
  font-size: clamp(14px, 1.67vw, 30px); font-weight: 500; line-height: 1.25; letter-spacing: .04em; white-space: nowrap; /* Figma は 700 だが指示で 500 に */
}
.rc-kv__label .rc-dot { margin-right: 20px; }
@media (max-width: 1100px) {
  .rc-kv__label .rc-dot { margin-right: 12px; }
}
@media (max-width: 767px) {
  /* SP: 円は筆文字だけを受け、写真 (人物) を右中段に見せる。下部は暗いグラデを敷いてリード文を読ませる */
  .rc-kv { height: auto; aspect-ratio: 375 / 600; }
  .rc-kv__stage { inset: 0; width: 100%; height: 100%; transform: none; }
  .rc-kv__photo img { object-position: 27% 30%; }
  .rc-kv__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 42%, rgba(6, 40, 100, .72) 100%); }
  .rc-kv__circle { left: -75%; top: -62%; width: 150%; aspect-ratio: 1; }
  .rc-kv__copy { left: 5%; top: 3%; width: 46%; }
  .rc-kv__smiley { left: 51%; top: 19%; width: 15%; }
  .rc-kv__lead { left: 6%; top: auto; bottom: 17%; font-size: 14px; line-height: 1.8; }
  .rc-kv__en { right: auto; left: 2%; top: auto; bottom: 0; width: 94%; }
  .rc-kv__en-line { fill: rgba(255, 255, 255, .75); }
  .rc-kv__label { right: 5%; top: auto; bottom: 11%; font-size: 14px; }
  .rc-kv__label .rc-dot { margin-right: 8px; }
}

/* =====================================================================
   NEWS (Figma 42:2583)
   ===================================================================== */
.rc-news { padding: 40px 0; }
.rc-news__inner { display: flex; align-items: center; gap: clamp(40px, 6.67vw, 120px); }
.rc-news__list { flex: 1; max-width: 900px; }
.rc-news__list li { display: flex; align-items: baseline; gap: 30px; padding: 20px 0; font-size: var(--rc-fs-16); line-height: 1.7; color: var(--rc-text); } /* Figma: 項目の上下 20、罫線を挟んで項目間 40、セクション全体 214 */
.rc-news__list li + li { border-top: 1px solid var(--rc-line); }
.rc-news__list time { flex: none; }
@media (max-width: 767px) {
  .rc-news { padding: 32px 0; }
  .rc-news__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rc-news__list { max-width: none; width: 100%; }
  .rc-news__list li { flex-direction: column; gap: 2px; padding: 12px 0; }
  .rc-news__list time { font-size: var(--rc-fs-14); color: var(--rc-text-sub); }
}

/* =====================================================================
   ABOUT US (Figma 42:2606)
   ===================================================================== */
.rc-about { --rc-about-y: clamp(48px, 5.56vw, 100px); padding-top: var(--rc-about-y); padding-bottom: var(--rc-about-y); } /* 左カラムの上下余白 100 (Figma 80/60 から変更) */
.rc-about__inner { display: flex; align-items: stretch; gap: var(--rc-gap-md); }
.rc-about__text { flex: 1 1 0; max-width: 800px; display: grid; gap: 30px; align-content: start; }
.rc .rc-about__items { display: grid; gap: var(--rc-gap-md); } /* .rc ul のリセットより詳細度を上げる */
.rc-about__item { position: relative; display: grid; gap: 10px; padding-right: 20px; }
.rc-about__item > * { position: relative; z-index: 1; }
.rc-about__en { position: absolute; right: 0; top: -0.15em; z-index: 0; font-size: clamp(48px, 4.44vw, 80px); }
/* 写真 2 列: 左列は上へ、右列は下へ流れる */
/* 列は絶対配置にして、セクションの高さは左のテキスト側だけで決める (画像 2 周分の高さを漏らさない) */
.rc-about__photos { flex: none; position: relative; width: clamp(280px, 38.9vw, 700px); overflow: hidden;
  margin-top: calc(-1 * var(--rc-about-y)); margin-bottom: calc(-1 * var(--rc-about-y)); } /* 右列はセクションの上下余白を打ち消して天地いっぱいに。上下はそのまま切る */
.rc-about__col { position: absolute; top: 0; bottom: 0; width: calc(50% - 10px); }
.rc-about__col:nth-child(1) { left: 0; }
.rc-about__col:nth-child(2) { right: 0; }
.rc-about__track { display: grid; gap: 5px; animation: rc-about-up 48s linear infinite; }
.rc-about__col:nth-child(2) .rc-about__track { animation-name: rc-about-down; }
.rc-about__track .rc-photo { aspect-ratio: 340 / 466; }
@keyframes rc-about-up   { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 2.5px)); } }
@keyframes rc-about-down { from { transform: translateY(calc(-50% - 2.5px)); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .rc-about__track { animation: none; } }
@media (max-width: 1100px) {
  .rc-about__inner { flex-direction: column; }
  .rc-about__text { max-width: none; }
  .rc-about__photos { width: 100%; height: 420px; margin-top: 0; margin-bottom: calc(-1 * var(--rc-about-y)); } /* 縦積みでは下端だけ余白を打ち消す */
  .rc-about__col { width: calc(50% - 5px); }
  .rc-about__photos .rc-photo { border-radius: 8px; }
  .rc-about__track { gap: 10px; }
  @keyframes rc-about-up   { to { transform: translateY(calc(-50% - 5px)); } }
  @keyframes rc-about-down { from { transform: translateY(calc(-50% - 5px)); } }
}
@media (max-width: 767px) {
  .rc-about__photos { height: 360px; }
}

/* =====================================================================
   誘導バナー CTA (Figma 42:2776)
   ===================================================================== */
.rc-cta__card { position: relative; display: flex; align-items: center; gap: var(--rc-gap); padding: 0 40px; }
.rc-cta__text { flex: 1 1 0; max-width: 526px; padding: 36px 0; display: grid; gap: var(--rc-gap); }
.rc-cta__heading { gap: 10px; }
.rc-cta__photo { flex: none; position: relative; width: clamp(240px, 35.7vw, 642px); align-self: stretch; } /* 写真は絶対配置にして、カードの高さは文章側で決める */
.rc-cta__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } /* 後列の顔が切れないよう上寄せ */
.rc-cta__btns { flex: none; display: grid; gap: var(--rc-gap-sm); }
@media (max-width: 1100px) {
  .rc-cta__card { flex-wrap: wrap; padding: 0 30px 30px; }
  .rc-cta__text { flex: 1 1 100%; max-width: none; padding: 30px 0 0; }
  .rc-cta__photo { flex: 1 1 300px; width: auto; align-self: auto; aspect-ratio: 642 / 232; }
  .rc-cta__photo img { position: static; border-radius: 8px; aspect-ratio: 642 / 232; }
  .rc-cta__btns { flex: 1 1 252px; }
}
@media (max-width: 767px) {
  .rc-cta__card { padding: 0 20px 24px; gap: 20px; }
  .rc-cta__text { padding-top: 24px; }
  .rc-cta__photo, .rc-cta__photo img { aspect-ratio: 16 / 9; }
}

/* =====================================================================
   RELATIONSHIP (Figma 42:2648)
   ===================================================================== */
.rc-rel { overflow: hidden; padding-top: clamp(48px, 5.56vw, 100px); padding-bottom: clamp(48px, 5.56vw, 100px); } /* 上下余白 100 (Figma 80 から変更) */
.rc-rel__symbol { position: absolute; right: calc(var(--rc-edge) - 80px); top: 34px; width: clamp(285px, 40.7vw, 732px); height: auto; pointer-events: none; } /* コンテナ右端から 80px 外側へ張り出す。透明度は SVG 側に 5% が入っている */
.rc-rel__inner { position: relative; display: grid; gap: var(--rc-sec-y); }
.rc-rel__main { display: flex; align-items: center; gap: var(--rc-gap-lg); }
.rc .rc-rel__photo { /* 画面左端まで広げる (Figma: x=0〜895)。コンテナ内の幅 775 + 左余白。.rc figure のリセットより詳細度を上げる */
  flex: none; width: calc(clamp(320px, 43vw, 775px) + var(--rc-edge)); margin-left: calc(-1 * var(--rc-edge));
  aspect-ratio: 895 / 517; border-radius: 0 var(--rc-radius) var(--rc-radius) 0;
}
.rc-rel__text { flex: 1 1 0; max-width: 620px; display: grid; gap: var(--rc-gap); }
.rc-rel__box { display: flex; align-items: center; gap: var(--rc-gap-lg); }
.rc-rel__illust { flex: none; } /* 大きさは img の width/height 属性 (234x211) のまま */
.rc-rel__box-text { flex: 1; display: grid; gap: 16px; }
.rc-rel__box-ttl { color: var(--rc-blue-deep); }
.rc-rel__box-ttl::after { width: 5em; }
@media (max-width: 1100px) {
  .rc-rel__main { flex-direction: column; align-items: stretch; }
  .rc .rc-rel__photo { width: 100%; margin-left: 0; aspect-ratio: 16 / 9; border-radius: var(--rc-radius); }
  .rc-rel__text { max-width: none; }
  .rc-rel__box { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* =====================================================================
   代表メッセージ (Figma 42:2753)
   ===================================================================== */
.rc-ceo { overflow: hidden; }
.rc-ceo__en { /* Figma: -90° 回転 (下から上に読む縦置き)。左上を軸に回し、元の幅の分だけ戻して左上角を (left, top) に合わせる */
  position: absolute; left: var(--rc-edge); top: 63px; font-size: clamp(56px, 5.67vw, 102px); opacity: .1;
  transform-origin: 0 0; transform: rotate(-90deg) translateX(-100%);
}
.rc-ceo__smiley { position: absolute; right: 3.3%; top: 46%; width: clamp(160px, 17.3vw, 312px); height: auto; opacity: .15; pointer-events: none; }
.rc-ceo__inner { position: relative; display: flex; align-items: center; gap: var(--rc-gap-lg); }
.rc-ceo__text { flex: 1 1 0; max-width: 525px; margin-left: clamp(0px, 15.9vw, 286px); display: grid; gap: 40px; }
.rc-ceo__text .rc-heading__ttl { white-space: nowrap; }
.rc-ceo__body { display: grid; gap: var(--rc-gap-sm); }
.rc .rc-ceo__name { text-align: right; font-size: var(--rc-fs-20); }
.rc .rc-ceo__photo { flex: none; width: clamp(240px, 20.2vw, 364px); margin-right: 30px; } /* 影 30px 分。.rc figure のリセットより詳細度を上げる */
.rc-ceo__photo img { width: 100%; border-radius: var(--rc-radius); box-shadow: 30px 30px 0 var(--rc-blue); }
@media (max-width: 1100px) {
  .rc-ceo__inner { flex-direction: column-reverse; align-items: flex-start; gap: var(--rc-gap-md); }
  .rc-ceo__text { max-width: none; margin-left: 0; }
  .rc-ceo__text .rc-heading__ttl { white-space: normal; }
  .rc .rc-ceo__photo { width: 60%; max-width: 364px; margin: 0 30px 0 auto; }
  .rc-ceo__en { top: 24px; }
  .rc-ceo__smiley { top: 24px; right: 0; }
}
@media (max-width: 767px) {
  .rc .rc-ceo__photo { width: 62%; margin-right: 20px; }
  .rc-ceo__photo img { box-shadow: 16px 16px 0 var(--rc-blue); }
  .rc-ceo__en { font-size: 44px; top: 16px; left: 16px; } /* 右寄せの写真と重ならない幅 (2 行 = 88px) に */
}

/* =====================================================================
   募集要項・エントリー (Figma 42:2932)
   ===================================================================== */
.rc-entry { padding-bottom: var(--rc-sec-y-sm); } /* 背景は白、カードを薄グレーに (代表メッセージの帯と反転) */
.rc-entry__inner { display: flex; align-items: flex-start; gap: var(--rc-gap-lg); }
.rc-entry__text { flex: none; width: clamp(280px, 29.3vw, 528px); display: grid; gap: var(--rc-gap); }
.rc-jobs { flex: 1; display: grid; gap: var(--rc-gap-sm); }
.rc-job { overflow: hidden; }
.rc-job__row { width: 100%; display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) 16px; align-items: center; gap: 40px; padding: 30px; text-align: left; transition: opacity .5s; }
.rc-job__name { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--rc-fs-24); font-weight: 700; line-height: 1.7; color: var(--rc-blue); } /* 職種名の下に雇用形態ラベルを縦に並べる */
.rc-job__summary { font-size: var(--rc-fs-16); font-weight: 400; line-height: 1.7; color: var(--rc-text); }
.rc-job__arrow { justify-self: end; width: 10px; height: 10px; border-top: 2px solid var(--rc-red); border-right: 2px solid var(--rc-red); transform: rotate(45deg); }
.rc .rc-job__row:hover { opacity: .5; }
.rc-job__row:focus-visible { outline: 3px solid rgba(8, 127, 209, .35); outline-offset: -3px; }
.rc-job--empty { padding: 30px; }
@media (max-width: 1100px) {
  .rc-entry__inner { flex-direction: column; }
  .rc-entry__text { width: auto; }
  .rc-jobs { width: 100%; }
  .rc-job__row { grid-template-columns: minmax(0, 1fr) 16px; gap: 12px 20px; }
  .rc-job__name { grid-column: 1; grid-row: 1; }
  .rc-job__summary { grid-column: 1; grid-row: 2; }
  .rc-job__arrow { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 767px) {
  .rc-job__row { gap: 12px 16px; padding: 20px; }
  .rc-job__name .rc-tag { font-size: 13px; }
}

/* =====================================================================
   募集要項 詳細 (single-job.php)
   ===================================================================== */
.rc-job-detail { background: #fff; }
.rc-job-detail__hero { position: relative; overflow: hidden; padding: clamp(52px, 5.56vw, 100px) 0 clamp(64px, 6.67vw, 120px); background: linear-gradient(115deg, #f7fbff 0%, #edf8fd 55%, #e5f7fb 100%); }
.rc-job-detail__hero::before { content: ""; position: absolute; inset: 0; background-image: var(--rc-stripe); opacity: .35; pointer-events: none; }
.rc-job-detail__hero::after { content: ""; position: absolute; right: var(--rc-edge); top: 50%; width: min(46vw, 771px); aspect-ratio: 771 / 438; background: url("../img/corp-symbol-job.svg") center / contain no-repeat; transform: translateY(-50%); pointer-events: none; }
.rc-job-detail__hero-inner { position: relative; z-index: 1; }
.rc-job-detail__hero-copy { position: relative; z-index: 1; width: min(780px, 70%); }
.rc-job-detail__name { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px; /* 雇用形態ラベルを上、職種名を下に縦並び。DOM は職種名が先なので column-reverse で見た目だけ入れ替え */ margin: 0; font-size: 48px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; color: var(--rc-blue-deep); }
.rc-job-detail__name .rc-tag { padding: 3px 12px; border-color: rgba(8, 127, 209, .45); border-radius: 4px; background: rgba(255, 255, 255, .72); font-size: 14px; letter-spacing: .04em; }
.rc-job-detail__catch { margin-top: 28px; font-size: var(--rc-fs-24); font-weight: 700; line-height: 1.5; color: var(--rc-blue); }
.rc-job-detail__catch + .rc-job-detail__summary { margin-top: 16px; }
.rc-job-detail__summary { max-width: 680px; margin-top: 28px; font-size: var(--rc-fs-18); font-weight: 500; line-height: 1.9; color: var(--rc-text); }
.rc-job-detail__body { padding-top: clamp(64px, 6.67vw, 120px); padding-bottom: clamp(64px, 6.67vw, 120px); }
.rc-job-detail__inner { width: min(1120px, 90%); display: grid; gap: clamp(64px, 6.67vw, 120px); }
.rc-job-detail__section-title { position: relative; z-index: 1; margin: 0; font-size: 28px; font-weight: 700; line-height: 1.4; color: var(--rc-blue-deep); }
.rc-job-detail__persona { display: grid; gap: 20px; }
.rc-job-detail__persona-body { position: relative; z-index: 1; max-width: 820px; margin: 4px 0 0; font-size: var(--rc-fs-18); font-weight: 500; line-height: 2; color: var(--rc-text); }
.rc .rc-job-detail__persona-points { display: grid; gap: 10px; padding-left: 1.4em; list-style: disc; font-size: var(--rc-fs-16); line-height: 1.8; color: var(--rc-text); }
.rc-job-detail__persona-points li::marker { color: var(--rc-blue); }
.rc-job-detail__requirements { display: grid; gap: 30px; }
.rc-job-detail__table-wrap { overflow: hidden; border: 1px solid #e8edf3; border-radius: 20px; background: #fff; box-shadow: 0 16px 48px rgba(17, 50, 125, .06); }
.rc-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.rc-table th, .rc-table td { padding: 28px 32px; border-bottom: 1px solid #e8edf3; text-align: left; vertical-align: top; line-height: 1.9; }
.rc-table tr:last-child th, .rc-table tr:last-child td { border-bottom: 0; }
.rc-table th { width: 260px; font-weight: 700; color: var(--rc-blue-deep); background: #f4f9fc; }
.rc-table td { color: var(--rc-text); font-weight: 400; }
.rc-job-detail__btns { display: flex; align-items: center; flex-direction: column; gap: 100px; }
.rc-job-detail__btns .rc-btn { min-width: 270px; }
.rc-job-detail__btns .rc-job-detail__back-btn { min-width: 220px; padding: 12px 28px; border-width: 1px; border-color: #b8bec8; font-size: 14px; }
@media (max-width: 900px) {
  .rc-job-detail__hero-copy { width: 84%; }
}
@media (max-width: 767px) {
  .rc-job-detail__hero { padding: 32px 0 56px; }
  .rc-job-detail__hero::after { right: -18vw; top: auto; bottom: 24px; width: 78vw; transform: none; }
  .rc-job-detail__hero-copy { width: 100%; }
  .rc-job-detail__name { gap: 12px; font-size: 32px; }
  .rc-job-detail__name .rc-tag { font-size: 12px; }
  .rc-job-detail__summary { margin-top: 20px; line-height: 1.8; }
  .rc-job-detail__inner { width: 90%; gap: 64px; }
  .rc-job-detail__section-title { font-size: 22px; }
  .rc-job-detail__persona { gap: 14px; }
  .rc-job-detail__persona-body { line-height: 1.9; }
  .rc-job-detail__requirements { gap: 22px; }
  .rc-job-detail__table-wrap { border-radius: 14px; }
  .rc-table { font-size: 14px; }
  .rc-table, .rc-table tbody, .rc-table tr, .rc-table th, .rc-table td { display: block; width: auto; }
  .rc-table th { padding: 13px 18px; border-bottom: 0; }
  .rc-table td { padding: 18px 18px 24px; }
  .rc-table tr:last-child th { border-bottom: 0; }
  .rc-job-detail__btns { width: 100%; }
  .rc-job-detail__btns .rc-btn { width: 100%; }
  .rc-job-detail__btns .rc-job-detail__back-btn { width: min(220px, 80%); }
}