@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- recruit :ページ共通枠（ヘッダーの逃げ／コンテンツ幅）
- recruit_head :ページタイトルの余白（h1本体は common.scss の .page_ttl）
- recruit_outline :募集要項（グレーのカード）
- recruit_outline_head :リード（見出し＋企業メッセージ＋写真）
- recruit_outline_list :項目一覧（PC 見出し＋内容の2カラム ／ SP 縦積み）
- recruit_contact :お問い合わせ（ベージュのカード）
-------------------------*/
/* ---- recruitページ用 変数 ---- */
/* 見出し */
/* 本文 */
/* 項目一覧の区切り線 */
/* 募集要項カード地 */
/* お問い合わせカード地 */
/* コンテンツ幅（Figma 1440 − 左右80） */
/* 左右の逃げ（Figma SP 375 − 左右20 = 335） */
/* カードの角丸 */
/* 既存PCヘッダー高さ（common.scss $hd_pc_h） */
/* 既存SPヘッダー高さ（common.scss $hd_sp_h） */
/* 募集要項カードの左右パディング（Figma 1280 −（本文枠1062）÷2 = 109）。
   中間幅はカード幅に比例（109 ÷ 1280 = 8.516%）させ、40を下限とする */
/* 項目一覧の見出し列幅（Figma Frame 703 = 218px）。本文枠1062に対する比率（20.53%）で縮め、140を下限とする */
/* 企業メッセージと写真の横並びは1181px以上。それより狭い幅は本文列が細くなり（1025pxで約390）、
   写真の下に大きな空白が残るため「写真 → 募集要項・企業メッセージ」の縦積みにする。
   境界は common.scss の狭いPC幅（hd_pc_narrow 1025〜1180）の上限に合わせる */
/* 写真のトリミング（Figma のマスク ＋ scaleMode: CROP / imageTransform）の再現。
   object-fit:cover で等比に枠を覆い、基準点（$x $y）を中心に $zoom 倍する。
   基準幅ではFigmaと同じ切り抜きになり、枠の比率が変わっても写真は変形しない */
/* 360px未満の小さな画面（common.scss の max-width: 359px と同じ境界） */
/* 本文の行送り。Figma直接値（18px / line-height 32.4px）。
   Figmaの Text Layout Box は行送りの上下余白を含まない実測値のため、
   CSSの line-height で生まれる余白分を前後の余白から差し引いて位置を合わせる。
   上 = 32.4 ÷ 2 − 18 × 0.297 ≒ 11px ／ 下 = 32.4 − 11 − 18 × 0.7357 ≒ 8px */
/*=======================================
　recruit
=======================================*/
/* 既存ヘッダーは position:absolute のため、ページ側で開始位置を確保する */
.recruit {
  padding-top: 105px;
  /* ヘッダーがハンバーガーへ切り替わる幅（xl）で高さも切り替わる */
}
@media screen and (max-width: 1024px) {
  .recruit {
    padding-top: 60px;
  }
}
.recruit .recruit__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/*=======================================
　recruit_head
=======================================*/
/* Figma PC : Frame 566（パンくず53）→ Frame 590（ttl 42 ＋ padding-bottom 80）
   Figma SP : contents-header（パンくず41.2 → gap 30 → ttl 23 → padding-bottom 30） */
/* 共通パーツ（common.scss の .page_breadcrumb / .page_ttl）は、CSSの行ボックスが
   Figmaのテキスト枠より高いぶんだけ文字が下がる。common.scss は既存ページと共用のため
   変更せず、このページ内だけで位置を補正する */
.recruit .page_breadcrumb {
  padding: 18.6px 0 19.4px; /* Figma 53px */
}
@media screen and (max-width: 768px) {
  .recruit .page_breadcrumb {
    padding: 13.6px 0 15.6px; /* Figma 41.2px */
  }
}

.recruit__head {
  padding-bottom: 81.6px;
}
@media screen and (max-width: 768px) {
  .recruit__head {
    padding-bottom: 26.3px;
  }
}
.recruit__head .page_ttl {
  margin-top: -0.6px; /* 42 ÷ 2 − 40 × 0.297 − Figma枠の上余白6.5 */
}
@media screen and (max-width: 768px) {
  .recruit__head .page_ttl {
    margin-top: 22.7px; /* Figma gap 30 − 33.6 ÷ 2 ＋ 32 × 0.297 */
  }
}

/*=======================================
　recruit_outline
=======================================*/
/* Figma PC : Frame 718 padding-bottom 100 ／ カード間 gap 60
   Figma SP : Frame 718 padding 30 20 60 ／ カード間 gap 40 */
.recruit-outline {
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .recruit-outline {
    padding: 30px 0 60px;
  }
}
.recruit-outline .recruit-outline__box {
  padding: 60px calc(clamp(40px, 8.516%, 109px) - 1px) 60px clamp(40px, 8.516%, 109px);
  border-radius: 20px;
  background: #F6F6F8;
}
@media screen and (max-width: 768px) {
  .recruit-outline .recruit-outline__box {
    padding: 40px 20px;
  }
}

/*=======================================
　recruit_outline_head
=======================================*/
/* Figma PC : Frame 701 横並び 517 + gap 28 + 517。Frame 700（517 × 400）は見出しを上端、
   　　　　　企業メッセージを下端（写真の下端）に揃える space-between
   Figma SP : Frame 701 縦積み gap 28（写真が上）→ 見出し → gap 40 → 企業メッセージ
   中間幅 : 1181px以上は横並びのまま、本文が写真より高くなる幅では写真を本文の高さまで伸ばす（切り抜き）。
   　　　　 1180px以下は縦積み */
.recruit-outline__head {
  display: flex;
  gap: 28px;
}
@media screen and (max-width: 1180px) {
  .recruit-outline__head {
    flex-direction: column;
  }
}
.recruit-outline__head .recruit-outline__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 0;
  min-width: 0;
  /* 30px / line-height 1 の行ボックス上余白（30 ÷ 2 − 30 × 0.297 ≒ 6px）を戻す */
  margin-top: -6px;
}
@media screen and (max-width: 1180px) {
  .recruit-outline__head .recruit-outline__intro {
    display: block;
    flex: 0 0 auto;
  }
}
.recruit-outline__head .recruit-outline__ttl {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: #1D1D1F;
}
.recruit-outline__head .recruit-outline__message {
  margin-top: 38px; /* Figma gap 40 − 見出しの行ボックス下余白 */
}
.recruit-outline__head .recruit-outline__message-ttl {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.45;
  color: #1D1D1F;
}
.recruit-outline__head .recruit-outline__message-txt {
  margin-top: 22px;
  margin-bottom: -8px;
  font-weight: 400;
  font-size: 18px;
  line-height: 32.4px;
  color: #666666;
}
.recruit-outline__head .recruit-outline__media {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 517/400;
  border-radius: 20px;
}
@media screen and (max-width: 1180px) {
  .recruit-outline__head .recruit-outline__media {
    order: -1; /* 縦積みは写真が先頭 */
    flex: 0 0 auto;
    aspect-ratio: 16/9;
  }
}
@media screen and (max-width: 640px) {
  .recruit-outline__head .recruit-outline__media {
    aspect-ratio: 295/228.24;
  }
}
.recruit-outline__head .recruit-outline__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(var(--rc-zoom, 1));
  --rc-zoom: 1.0806;
  object-position: 95.574% 62.426%;
  transform-origin: 95.574% 62.426%;
}
@media screen and (max-width: 640px) {
  .recruit-outline__head .recruit-outline__img {
    --rc-zoom: 1.2909;
    object-position: 83.654% 59.989%;
    transform-origin: 83.654% 59.989%;
  }
}

/*=======================================
　recruit_outline_list
=======================================*/
/* Figma PC : Frame 715（区切り線から上下30pxの余白で1行）
   Figma SP : 見出しと内容を縦積み（gap 15） */
/* FigmaのTEXT枠は「1行目のキャップ上端〜最終行のベースライン」で、
   CSSの行ボックスより上下が狭い。差分をネガティブマージンで打ち消すと、
   Figmaの余白値（上下30px）をそのままpaddingへ書ける */
.recruit-outline__list {
  /* Figma gap 60（SP 40）。企業メッセージの本文は行送りの下余白を差し引き済み */
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .recruit-outline__list {
    margin-top: 40px;
  }
}
.recruit-outline__list .recruit-outline__row {
  display: flex;
  align-items: flex-start;
  /* 下は区切り線の1px分を差し引く（Figmaの線は高さを持たない） */
  padding: 30px 0 29px;
  border-top: 1px solid #D9D9DC;
}
@media screen and (max-width: 768px) {
  .recruit-outline__list .recruit-outline__row {
    display: block;
  }
}
.recruit-outline__list .recruit-outline__row:last-child {
  padding-bottom: 0;
}
.recruit-outline__list .recruit-outline__label {
  flex-shrink: 0;
  width: clamp(140px, 20.53%, 218px);
  margin-top: -4px; /* 20 ÷ 2 − 20 × 0.297 */
  margin-bottom: -1px; /* 20 − 4 − Figma枠15 */
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .recruit-outline__list .recruit-outline__label {
    width: auto;
  }
}
.recruit-outline__list .recruit-outline__data {
  flex: 1 1 auto;
  min-width: 0;
  text-wrap: pretty;
  margin-top: -11px;
  margin-bottom: -8px;
  font-weight: 400;
  font-size: 18px;
  line-height: 32.4px;
  color: #666666;
}
@media screen and (max-width: 768px) {
  .recruit-outline__list .recruit-outline__data {
    /* Figma gap 15 − 本文の行送り上余白 */
    margin-top: 4px;
  }
}

/*=======================================
　recruit_contact
=======================================*/
/* Figma PC : Frame 717（1280 × padding 60 0 / gap 20 / radius 20 / #F8F3EA）
   Figma SP : 335 × padding 45 20 / gap 20 */
/* FigmaのTEXT枠はキャップ高基準のため、各文字サイズの行ボックス上下余白を
   padding・marginから差し引いて位置を合わせる */
.recruit-contact {
  /* Figma カード間 gap 60 */
  margin-top: 60px;
  padding: 54px 0 57px;
  border-radius: 20px;
  background: #F8F3EA;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .recruit-contact {
    margin-top: 40px;
    padding: 41px 20px 43px;
  }
}
.recruit-contact .recruit-contact__lead {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: #666666;
}
@media screen and (max-width: 768px) {
  .recruit-contact .recruit-contact__lead {
    margin: -5px 0;
    font-size: 20px;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}
.recruit-contact .recruit-contact__dept {
  margin-top: 14.9px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #666666;
}
@media screen and (max-width: 768px) {
  .recruit-contact .recruit-contact__dept {
    margin-top: 15.9px;
    font-size: 14px;
  }
}
.recruit-contact .recruit-contact__tel {
  margin-top: 10.9px;
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .recruit-contact .recruit-contact__tel {
    margin: 8.5px 0 -4.5px;
    font-size: 30px;
    line-height: 1.3;
  }
}
@media screen and (max-width: 359px) {
  .recruit-contact .recruit-contact__tel {
    font-size: clamp(24px, 8.4vw, 30px);
  }
}
.recruit-contact .recruit-contact__tel-link {
  color: inherit;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .recruit-contact .recruit-contact__tel-link:hover {
    opacity: 0.6;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .recruit-contact .recruit-contact__tel-link:hover {
    opacity: 0.6;
  }
}
.recruit-contact .recruit-contact__tel-num {
  white-space: nowrap;
}