@charset "utf-8";

/* =========================================================
   採用情報ページ専用Style（recruit.css）
   -----------------------------------------------------------
   ・読み込み順： style.css → micro-interactions.css → kasou.css → recruit.css
   ・すべてのセレクタを body.page-recruit の中に閉じ込めているので、
     他ページの見た目には一切影響しません。
   ・色は style.css の --c-* トークン、罫線・イージングは
     micro-interactions.css の --line / --mi-ease を借りています
     （そちらが無くても動くよう、既定値つきの別名にしてあります）。
   ・ヒーロー下端の波の色は watashi.css（私たちについて）と同じ値です。
   ========================================================= */

.page-recruit{
  --rc-line:        var(--line,        rgba(30,58,138,.14));
  --rc-line-strong: var(--line-strong, rgba(30,58,138,.28));
  --rc-border:      var(--border, #d0dcea);
  --rc-tint:        var(--c-bg-section, #eef2f8);
  --rc-ease:        var(--mi-ease,     cubic-bezier(.2,0,0,1));
  --rc-ease-out:    var(--mi-ease-out, cubic-bezier(.16,1,.3,1));
  --rc-green:       #6cbf3f;   /* 波の緑（watashi.css の --t-green と同じ値） */
  --rc-cyan:        #2f9ad6;   /* 波の青（watashi.css の --t-cyan と同じ値） */
  --rc-dummy-line:  #8a97ad;   /* 仮枠の点線 */
  --rc-flow-gap:    clamp(16px, 2.6vw, 36px);
}

/* ヒーローの背景を固定ヘッダーの裏まで敷くため、main の上余白は消して
   ヒーロー側の padding-top で確保する（kasou.css の main#main の上書き） */
.page-recruit main#main{ padding-top: 0; }

/* ページ内リンクで飛んだ時、固定ヘッダーの下に隠れないように */
.page-recruit :where(section)[id]{
  scroll-margin-top: var(--header-h);
}

/* ヒーローの写真がヘッダーの裏（右上）まで来ていて、ナビの文字が写真に溶けて読みにくいので、
   ヘッダーは最初からスクロール後と同じ「白の半透明＋ぼかし」にする（値は style.css の header.scrolled と同じ）。
   メガメニューが開いている間は style.css の header.is-mega-open に任せるため :not() で外している */
.page-recruit header:not(.is-mega-open){
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(5px) saturate(1.3);
          backdrop-filter: blur(5px) saturate(1.3);
  border-bottom-color: var(--border);
}

/* 今いるページ（採用情報）のナビ項目は下線を出したままにする */
.page-recruit .dropmenu > li > a[aria-current="page"]::before{ transform: scaleX(1); }


/* =========================================================
   共通パーツ
   ========================================================= */
.page-recruit .rc-sec{
  padding-block: clamp(56px, 8vw, 96px);
  background: #fff;
}

/* セクション見出し（英字の小見出し＋h2＋緑→青の短い線） */
.page-recruit .rc-head{
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.page-recruit .rc-eyebrow{
  margin: 0 0 .35em;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1.4;
  color: var(--c-gold-text);
}
.page-recruit .rc-h2{
  margin: 0;
  color: var(--c-navy);
  font-size: clamp(1.625rem, 3vw, 2rem);
  line-height: 1.4;
  letter-spacing: .06em;
}
.page-recruit .rc-h2::after{
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: .55em auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rc-green), var(--rc-cyan));
}
.page-recruit .rc-head-note{
  margin: 1em 0 0;
  color: var(--c-note);
}

/* 写真の枠：.ph（プレースホルダー）でも <img> でも同じ大きさに収める */
.page-recruit .rc-env-photo > *,
.page-recruit .rc-voice-photo > *{
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  min-height: 0;
}
.page-recruit .rc-env-photo > img,
.page-recruit .rc-voice-photo > img{
  display: block;
  object-fit: cover;
}

/* ---------- 仮枠（原稿待ちの場所）----------
   点線の枠＋黄色の「仮枠」バッジ。原稿が入ったらクラスを外すだけで通常表示に戻る */
.page-recruit .rc-dummy{
  border: 1.5px dashed var(--rc-dummy-line) !important;
  box-shadow: none !important;
}
.page-recruit .rc-dummy-note{
  display: inline-flex;
  align-items: center;
  gap: .7em;
  max-width: 100%;
  margin: 1.1em 0 0;
  padding: .55em 1.1em;
  border: 1px dashed var(--rc-dummy-line);
  border-radius: 8px;
  background: #fff;
  color: var(--c-note);
  text-align: left;
  line-height: 1.7;
}
.page-recruit .rc-dummy-badge{
  flex: none;
  display: inline-block;
  padding: .1em .65em;
  border-radius: 4px;
  background: #fff3bf;
  color: var(--c-gold-text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.7;
}


/* =========================================================
   1. ヒーロー
   ========================================================= */
.page-recruit .rc-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(540px, 46vw, 680px);
  padding: calc(var(--header-h) + clamp(16px, 2.4vw, 32px)) 0 clamp(110px, 12vw, 170px);
  background: linear-gradient(168deg, #bcd9f1 0%, #d5e8f7 26%, #e9f2fa 52%, #ffffff 88%);
}

/* 右側の写真。左端はグラデーションに溶かす（「私たちについて」のヒーローと同じ手法） */
.page-recruit .rc-hero-media{
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(60%, 980px);
  pointer-events: none;
}
.page-recruit .rc-hero-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 角度を付けると写真の左下の端に縦の境目が見えるため、真横（90deg）で溶かす */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 16%, rgba(0,0,0,.5) 36%, rgba(0,0,0,.92) 58%, #000 72%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 16%, rgba(0,0,0,.5) 36%, rgba(0,0,0,.92) 58%, #000 72%);
}
/* 文字の下だけ明るく戻すベール（写真が暗くても本文のコントラストを保つ） */
.page-recruit .rc-hero::before{
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(233,242,250,.94) 0%,
    rgba(233,242,250,.88) 40%,
    rgba(233,242,250,.5) 54%,
    rgba(233,242,250,0) 68%);
}

.page-recruit .rc-hero-inner{
  position: relative;
  z-index: 3;
}

/* パンくず：kasou.css の帯の見た目を打ち消して、ヒーローの中に置く */
.page-recruit .rc-breadcrumb{
  background: transparent;
  border: 0;
  margin: 0 0 clamp(20px, 3vw, 36px);
}
.page-recruit .rc-breadcrumb ol{
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  color: #3b4a68;
}
.page-recruit .rc-breadcrumb [aria-current="page"]{ color: #3b4a68; }

.page-recruit .rc-hero-title{
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 .8em;
  color: var(--c-navy);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: .12em;
}
.page-recruit .rc-hero-title::after{
  content: "";
  width: 56px;
  height: 1px;
  background: var(--c-navy);
  opacity: .5;
}
.page-recruit .rc-hero-catch{
  margin: 0 0 .5em;
  color: #17356f;
  font-size: clamp(2.125rem, 4.6vw, 3.625rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: .05em;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.page-recruit .rc-hero-sub{
  display: inline-block;
  margin: 0 0 1.4em;
  padding: .45em 1.2em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--rc-line), 0 6px 16px rgba(21,42,84,.08);
  color: var(--c-navy);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 700;
  line-height: 1.6;
  word-break: auto-phrase;   /* SPで2行になる時は「…の方を／ご紹介ください！」と文節で折る */
}
.page-recruit .rc-hero-lead{
  max-width: 39em;
  word-break: auto-phrase;   /* 折り返す時は文節で（Chrome・Edge 119以降。未対応は通常の折り返し） */
  margin: 0 0 1.8em;
  color: #243a5e;
  line-height: 2;
}
.page-recruit .rc-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin: 0;
}
/* 下向き矢印（ページ内リンク）はホバーで下に動かす。
   micro-interactions.css の「右に滑る」より強い指定で上書き */
.page-recruit .btn .arrow.is-down{ font-weight: 400; }
.page-recruit .btn:hover .arrow.is-down{ transform: translateY(3px); }

/* 下端の波 */
.page-recruit .rc-hero-wave{
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  height: clamp(70px, 9vw, 130px);
}
.page-recruit .rc-hero-wave .w-fill{ fill: #fff; }
.page-recruit .rc-hero-wave .w-line{ fill: none; stroke-width: 5; stroke-linecap: round; }
.page-recruit .rc-hero-wave .w-green{ stroke: var(--rc-green); }
.page-recruit .rc-hero-wave .w-blue{  stroke: var(--rc-cyan); }


/* =========================================================
   2. ページ内目次
   ========================================================= */
.page-recruit .rc-toc{
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 0 0 8px;
}
.page-recruit .rc-toc ul{
  list-style: none;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.page-recruit .rc-toc a{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .5em 1.15em .5em 1.25em;
  border: 1px solid var(--rc-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--c-navy);
  font-weight: 700;
  line-height: 1.6;
  transition: background-color .22s var(--rc-ease), color .22s var(--rc-ease), border-color .22s var(--rc-ease);
}
/* 下向きの小さな矢印（＝ページ内を下に移動する合図） */
.page-recruit .rc-toc a::after{
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  transition: transform .25s var(--rc-ease-out);
}
.page-recruit .rc-toc a:hover{
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
  text-decoration: none;
}
.page-recruit .rc-toc a:hover::after{ transform: translateY(2px) rotate(45deg); }


/* =========================================================
   3. 働く環境
   ========================================================= */
.page-recruit .rc-env-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.page-recruit .rc-env-card{ margin: 0; }
.page-recruit .rc-env-photo{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--rc-tint);
  box-shadow: 0 1px 2px rgba(21,42,84,.12), 0 10px 26px rgba(21,42,84,.08);
}
.page-recruit .rc-env-card figcaption{
  display: flex;
  align-items: center;
  gap: .7em;
  margin-top: 1em;
  color: var(--c-navy);
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: left;
}
.page-recruit .rc-env-card figcaption::before{
  content: "";
  flex: none;
  width: 20px;
  height: 2px;
  background: var(--c-deco-gold);
}


/* =========================================================
   4. 先輩社員の声（仮枠）
   ========================================================= */
.page-recruit .rc-voice{ background: var(--rc-tint); }
.page-recruit .rc-voice-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.page-recruit .rc-voice-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rc-line);
  border-radius: 12px;
  background: #fff;
}
.page-recruit .rc-voice-photo{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rc-tint);
}
.page-recruit .rc-voice-body{ padding: 18px 22px 24px; }
.page-recruit .rc-voice-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .2em 1em;
  margin: 0 0 .5em;
  color: var(--c-note);
}
.page-recruit .rc-voice-title{
  margin: 0 0 .5em;
  font-size: 1.125rem;
  line-height: 1.55;
}
.page-recruit .rc-voice-text{ margin: 0; }


/* =========================================================
   5. 募集要項
   ========================================================= */
.page-recruit .rc-table-wrap{
  max-width: 880px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--rc-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(21,42,84,.08), 0 12px 32px rgba(21,42,84,.06);
}
.page-recruit .rc-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.8;
}
.page-recruit .rc-table td{ word-break: auto-phrase; }
.page-recruit .rc-table th,
.page-recruit .rc-table td{
  padding: 1.15em 1.6em;
  border-bottom: 1px solid var(--rc-border);
  text-align: left;
  vertical-align: top;
}
.page-recruit .rc-table tr:last-child > *{ border-bottom: 0; }
.page-recruit .rc-table th{
  width: 10em;
  background: var(--rc-tint);
  color: var(--c-navy);
  font-weight: 700;
  white-space: nowrap;
}
.page-recruit .rc-td-note{
  display: block;
  margin-top: .15em;
  color: var(--c-note);
}

/* 募集業種：6つをピル型で並べる */
.page-recruit .rc-jobs{
  list-style: none;
  margin: -.15em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.page-recruit .rc-jobs li{
  padding: .2em 1em;
  border: 1px solid var(--rc-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--c-navy);
  font-weight: 700;
  line-height: 1.7;
}


/* =========================================================
   6. 選考の流れ（仮枠）
   ========================================================= */
.page-recruit .rc-flow{ background: var(--rc-tint); }
.page-recruit .rc-flow-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rc-flow-gap);
}
.page-recruit .rc-flow-item{
  position: relative;
  padding: 28px 20px 26px;
  border: 1px solid var(--rc-line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
/* ステップ間の「›」 */
.page-recruit .rc-flow-item:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--rc-flow-gap) / -2);
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--c-navy);
  border-right: 2px solid var(--c-navy);
  opacity: .45;
  transform: translate(35%, -50%) rotate(45deg);
}
.page-recruit .rc-flow-icon{
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--rc-tint);
  color: var(--c-navy);
}
.page-recruit .rc-flow-icon svg{ width: 30px; height: 30px; }
.page-recruit .rc-flow-no{
  display: block;
  color: var(--c-gold-text);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.5;
}
.page-recruit .rc-flow-title{
  margin: .3em 0 .45em;
  font-size: 1.125rem;
}
.page-recruit .rc-flow-text{
  margin: 0;
  word-break: auto-phrase;   /* 折り返しは文節で（Chrome・Edge 119以降） */
}
.page-recruit .rc-flow-text a{
  text-decoration: underline;
  text-underline-offset: .2em;
}


/* =========================================================
   7. 応募方法（紺帯）
   ========================================================= */
.page-recruit .rc-oubo{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 96px);
  color: #fff;
  background:
    radial-gradient(110% 140% at 88% 0%, rgba(47,154,214,.28) 0%, rgba(47,154,214,0) 55%),
    linear-gradient(160deg, var(--c-navy) 0%, var(--c-bg-footer) 72%);
}
.page-recruit .rc-head.is-on-navy .rc-eyebrow{ color: var(--gold-light, #e6c96f); }
.page-recruit .rc-head.is-on-navy .rc-h2{ color: #fff; }

.page-recruit .rc-oubo-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 880px;
  margin-inline: auto;
}
.page-recruit .rc-oubo-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 30px 28px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}
.page-recruit .rc-oubo-label{
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 .7em;
  color: var(--gold-light, #e6c96f);
  font-weight: 700;
  letter-spacing: .08em;
}
.page-recruit .rc-oubo-to{
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.75;
}
.page-recruit .rc-oubo-tel{ margin: auto 0 0; }
.page-recruit .rc-oubo-tel a{
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  color: #fff;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.3;
  white-space: nowrap;
}
.page-recruit .rc-oubo-tel a:hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.page-recruit .rc-oubo-tel-pre{
  font-size: .5em;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .85;
}
.page-recruit .rc-oubo-btn{ margin: auto 0 0; }

/* 紺地の上なので白いボタンにする（光沢もネイビー寄りに） */
.page-recruit .rc-oubo .btn{
  background: #fff;
  border-color: #fff;
  color: var(--c-navy);
}
.page-recruit .rc-oubo .btn:hover{
  background: var(--rc-tint);
  border-color: var(--rc-tint);
  color: var(--c-navy);
}
.page-recruit .rc-oubo .btn::before{
  background: linear-gradient(100deg, transparent 0%, rgba(30,58,138,.14) 50%, transparent 100%);
}

/* 仮枠（採用エントリーフォーム）は2列ぶち抜きで、点線を白に */
.page-recruit .rc-oubo-card.rc-dummy{
  grid-column: 1 / -1;
  border-color: rgba(255,255,255,.5) !important;
  background: transparent;
}
.page-recruit .rc-oubo-soon{
  margin: 0;
  color: var(--c-note-on-navy);
}


/* =========================================================
   8. 関連ページ（kasou.css の .link-cards に写真の比率だけ足す）
   ========================================================= */
.page-recruit .link-card img{
  display: block;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
}


/* =========================================================
   スクロール登場アニメ（js/top2.js が [data-reveal] に .is-in を付ける）
   ── watashi.css と同じ見え方。詳細度は :where() で 0,1,0 に落として
      ホバーなどの指定に負けるようにしてある
   ========================================================= */
.js-anim :where(.page-recruit [data-reveal]){
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
  transition: opacity .8s var(--rc-ease-out), transform .8s var(--rc-ease-out), filter .8s var(--rc-ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-anim :where(.page-recruit [data-reveal].is-in){
  opacity: 1;
  transform: none;
  filter: none;
}


/* =========================================================
   レスポンシブ
   ========================================================= */

/* ---- ~1000px：ヘッダーをハンバーガーに切り替え【このページ独自・任意】----
   style.css はナビを 767px 以下でしか隠さないため、768〜1000px では
   ロゴの文字が縦に潰れる（kasou.html / shinbun.html でも同じ。実測は実装メモ参照）。
   他ページと完全に同じ挙動にしたい場合は、この @media ごと削除してください。 */
@media (max-width: 1000px){
  .page-recruit #g_navi{ display: none; }
  .page-recruit .hamburger{ display: flex; }
}

@media (max-width: 1000px){
  .page-recruit .rc-flow-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-recruit .rc-flow-item:nth-child(2)::after{ display: none; }   /* 折り返し位置の矢印は消す */
}

@media (max-width: 900px){
  .page-recruit .rc-hero-media{ width: 64%; }
  .page-recruit .rc-hero::before{
    background: linear-gradient(90deg,
      rgba(233,242,250,.95) 0%,
      rgba(233,242,250,.88) 46%,
      rgba(233,242,250,.3) 66%,
      rgba(233,242,250,0) 80%);
  }
  .page-recruit .rc-voice-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-recruit .rc-voice-card:last-child{ display: none; }            /* 仮枠は2枚で十分なので3枚目を隠す */
}

@media (max-width: 767px){
  /* ヒーロー：見出し → 写真 の縦積み。写真の下端に波を重ねる */
  .page-recruit .rc-hero{
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: calc(var(--header-h) + 12px) 0 0;
  }
  .page-recruit .rc-hero::before{ display: none; }
  .page-recruit .rc-hero-inner{ order: 1; }
  .page-recruit .rc-hero-media{
    order: 2;
    position: relative;
    width: 100%;
    height: clamp(200px, 56vw, 320px);
    margin-top: 28px;
  }
  .page-recruit .rc-hero-img{
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 22%, #000 45%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 22%, #000 45%);
  }
  .page-recruit .rc-hero-wave{ height: 52px; }
  .page-recruit .rc-hero-actions .btn{ flex: 1 1 12em; justify-content: center; }

  .page-recruit .rc-toc{ padding-top: 16px; }

  .page-recruit .rc-env-list{ grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .page-recruit .rc-voice-list{ grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .page-recruit .rc-voice-card:last-child{ display: flex; }

  .page-recruit .rc-oubo-grid{ grid-template-columns: 1fr; }
  .page-recruit .rc-oubo-card.rc-dummy{ grid-column: auto; }
}

@media (max-width: 640px){
  /* 募集要項：見出しセルを上、内容を下に */
  .page-recruit .rc-table th,
  .page-recruit .rc-table td{
    display: block;
    width: auto;
  }
  .page-recruit .rc-table th{
    padding: .6em 1.1em;
    border-bottom: 0;
  }
  .page-recruit .rc-table td{ padding: .8em 1.1em 1.1em; }
  .page-recruit .rc-jobs{ margin-top: 0; }

  /* 選考の流れ：1列にして、矢印は下向きに */
  .page-recruit .rc-flow-list{ grid-template-columns: 1fr; }
  .page-recruit .rc-flow-item{
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    align-items: start;
    padding: 20px 20px 22px;
    text-align: left;
  }
  .page-recruit .rc-flow-icon{
    grid-row: 1 / span 3;
    width: 56px;
    height: 56px;
    margin: 0;
  }
  .page-recruit .rc-flow-icon svg{ width: 26px; height: 26px; }
  .page-recruit .rc-flow-text{ word-break: normal; }   /* 左寄せの時は文節折りより詰めて流す方が読みやすい */
  .page-recruit .rc-flow-item:not(:last-child)::after,
  .page-recruit .rc-flow-item:nth-child(2)::after{
    display: block;
    top: auto;
    bottom: calc(var(--rc-flow-gap) / -2);
    right: auto;
    left: 50%;
    transform: translate(-50%, 35%) rotate(135deg);
  }
  .page-recruit .rc-oubo-card{ padding: 22px 22px 24px; }
}

@media (max-width: 420px){
  .page-recruit .rc-hero-catch{ font-size: 1.875rem; }
  .page-recruit .rc-hero-sub{ border-radius: 12px; }
  .page-recruit .rc-dummy-note{ align-items: flex-start; }
}


/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce){
  .js-anim :where(.page-recruit [data-reveal]){
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .page-recruit .rc-toc a,
  .page-recruit .rc-toc a::after{ transition: none; }
  .page-recruit .btn:hover .arrow.is-down,
  .page-recruit .rc-toc a:hover::after{ transform: none; }
  .page-recruit .rc-toc a:hover::after{ transform: rotate(45deg); }
}