@charset "UTF-8";
/* =====================================================
   ケアセンターさいさい浦和美園 採用情報ページ専用スタイル
   recruit_hpr.css ―― 2026 リニューアル
   （明るく・温かく・モダンに／若い求職者にも好印象）
   ヘッダー・フッター・ボタン・変数など複数ページ共通の
   スタイルは style_hpr.css に分離済み。このファイルは
   採用ページ固有のセクションのみを扱う。
   命名は他ページと衝突しないよう「hprr-」プレフィックスで統一
   （hpr-recruit の略。トップページの hpr- 系とは別名前空間）。
===================================================== */

/* 採用ページ固有の色トークン（他ページの変数と干渉しないよう
   すべて --hprr- プレフィックスを付与） */
:root{
  --hprr-warm-bg: linear-gradient(135deg, #FFF3EA, #FDEDF2);
  --hprr-warm-line: #F6D9BF;
  --hprr-th-bg: #FDEDF2;
  --hprr-th-bg-warm: #FFF0E2;
}

/* ---------- ヒーロー（採用） ---------- */
.hprr-hero{
  position: relative;
  overflow: hidden;
  background: var(--hpr-grad-soft);
  padding-top: clamp(24px, 4vw, 52px);
  padding-bottom: clamp(28px, 4.5vw, 60px);
}
.hprr-hero__inner{
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3.5vw, 2.4rem);
  align-items: center;
}
.hprr-hero__media{
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  aspect-ratio: 1024 / 672;
  border-radius: var(--hpr-radius-l);
  overflow: hidden;
  box-shadow: var(--hpr-shadow-m);
}
.hprr-hero__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
.hprr-hero__media-badge{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .5em 1em;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  color: var(--hpr-color-main);
  font-weight: 800;
  font-size: .82rem;
  box-shadow: var(--hpr-shadow-s);
}
.hprr-hero__media-badge svg{ width: 1.15em; height: 1.15em; }

.hprr-hero__body{ position: relative; width: 100%; }
.hprr-hero__card{
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.5rem, 3.6vw, 2.4rem);
  box-shadow: var(--hpr-shadow-m);
  border: 1px solid rgba(255,255,255,.85);
  position: relative;
}
.hprr-hero__card::before{
  content: "";
  position: absolute;
  top: -14px; left: 26px;
  width: 50px; height: 50px;
  background: var(--hpr-grad-warm);
  border-radius: 18px;
  transform: rotate(-8deg);
  z-index: -1;
  opacity: .4;
}
.hprr-hero__title{
  font-size: clamp(1.5rem, 4.4vw, 2.3rem);
  font-weight: 800;
  color: var(--hpr-color-main);
  margin: .25em 0 .6em;
  line-height: 1.35;
}
.hprr-hero__points{
  display: grid;
  gap: .55rem;
  margin: 0 0 1.1em;
}
.hprr-hero__points li{
  position: relative;
  padding: .55em .7em .55em 2.7em;
  background: var(--hpr-color-cream);
  border-radius: var(--hpr-radius-s);
  font-weight: 700;
  font-size: clamp(.92rem, 1.6vw, 1.02rem);
}
.hprr-hero__points li::before{
  content: "";
  position: absolute;
  left: .7em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
  border-radius: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4 4 10-10' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--hpr-grad-warm);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78%, cover;
}
.hprr-hero__lead{
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  font-weight: 800;
  color: var(--hpr-color-text);
  margin: 1em 0 1em;
  line-height: 1.6;
}
.hprr-hero__note{
  display: flex;
  align-items: center;
  gap: .6em;
  background: linear-gradient(135deg, #E4F1EA, #F1F8F4);
  border: 1px solid #DCEDE4;
  border-radius: var(--hpr-radius-m);
  padding: .8em 1em;
  margin: 0 0 1.3em;
  font-size: .92rem;
}
.hprr-hero__note-icon{
  flex: none;
  width: 2em; height: 2em;
  border-radius: 11px;
  background: linear-gradient(135deg,#7CC0A0,#5FA684);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hprr-hero__note-icon svg{ width: 60%; height: 60%; }
.hprr-hero__note strong{ color: var(--hpr-color-accent); }
.hprr-hero__ctas{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.hprr-hero__ctas .hpr-btn{ padding: .8em 1.4em; }

/* ---------- 働き方カード ---------- */
.hprr-style-grid{
  display: grid;
  gap: clamp(1.1rem, 3vw, 1.8rem);
  grid-template-columns: 1fr;
}
.hprr-style-card{
  background: #fff;
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.6rem, 3.2vw, 2.2rem);
  text-align: center;
  box-shadow: var(--hpr-shadow-s);
  border: 1px solid var(--hpr-color-line);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.hprr-style-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 6px;
  background: var(--hpr-grad-warm);
}
@media (hover: hover){
  .hprr-style-card:hover{ transform: translateY(-5px); box-shadow: var(--hpr-shadow-m); }
}
.hprr-style-card__icon{
  width: 64px; height: 64px;
  border-radius: 20px;
  background: var(--hpr-grad-warm);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--hpr-shadow-warm);
  margin-bottom: 1rem;
}
.hprr-style-card__icon svg{ width: 52%; height: 52%; }
.hprr-style-card__icon--pink{ background: var(--hpr-grad-main); box-shadow: var(--hpr-shadow-m); }
.hprr-style-card__icon--green{ background: linear-gradient(135deg,#7CC0A0,#5FA684); box-shadow: 0 14px 30px rgba(95,166,132,.24); }
.hprr-style-card__title{
  font-size: clamp(1.12rem, 2.1vw, 1.32rem);
  font-weight: 800;
  color: var(--hpr-color-main);
  margin: 0 0 .5em;
}
.hprr-style-card__text{ margin: 0; opacity: .92; }
.hprr-style-lead{
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 800;
  color: var(--hpr-color-text);
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
}
.hprr-style-lead::after{
  content: "";
  display: block;
  width: 3em;
  height: .28em;
  border-radius: 999px;
  background: var(--hpr-color-warm-soft);
  margin: .5em auto 0;
}

/* ---------- スタッフ・採用担当者の声 ---------- */
.hprr-voices{
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  grid-template-columns: 1fr;
}
.hprr-voice-card{
  background: #fff;
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  box-shadow: var(--hpr-shadow-s);
  border: 1px solid var(--hpr-color-line);
  position: relative;
}
.hprr-voice-card::before{
  content: "\201C";
  position: absolute;
  top: .05em; right: .35em;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--hpr-color-main-light);
  opacity: .35;
  font-family: Georgia, serif;
}
.hprr-voice-card--warm{ border-color: var(--hprr-warm-line); }
.hprr-voice-card__tag{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em 1.1em;
  border-radius: 999px;
  background: var(--hpr-grad-main);
  color: #fff;
  font-weight: 800;
  font-size: .88rem;
  margin-bottom: 1em;
  box-shadow: var(--hpr-shadow-s);
}
.hprr-voice-card__tag svg{ width: 1.2em; height: 1.2em; }
.hprr-voice-card__tag--warm{ background: var(--hpr-grad-warm); box-shadow: var(--hpr-shadow-warm); }
.hprr-voice-card__text{ margin: 0; position: relative; z-index: 1; }

/* ---------- 募集要項ナビ（正社員／パート） ---------- */
.hprr-jobnav{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  max-width: 520px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.hprr-jobnav a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 1em 1.2em;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--hpr-color-main-light);
  color: var(--hpr-color-main);
  font-weight: 800;
  box-shadow: var(--hpr-shadow-s);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  position: relative;
}
.hprr-jobnav a::after{
  content: "";
  width: .5em; height: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -.15em;
}
.hprr-jobnav a em{ font-style: normal; }
@media (hover: hover){
  .hprr-jobnav a:hover{
    background: var(--hpr-grad-main);
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: var(--hpr-shadow-m);
  }
}

/* ---------- 募集要項カード＋テーブル ---------- */
.hprr-job{
  background: #fff;
  border: 1px solid var(--hpr-color-line);
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: var(--hpr-shadow-s);
  scroll-margin-top: calc(var(--hpr-header-h) + 16px);
}
.hprr-job + .hprr-job{ margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.hprr-job--warm{ border-color: var(--hprr-warm-line); }
/* ナビから飛んできた際の一瞬のハイライト（recruit_hpr.js から付与） */
.hprr-job--flash{
  animation: hprr-flash 1.2s ease;
}
@keyframes hprr-flash{
  0%   { box-shadow: 0 0 0 0 rgba(244,161,91,.55); }
  30%  { box-shadow: 0 0 0 6px rgba(244,161,91,.28); }
  100% { box-shadow: var(--hpr-shadow-s); }
}
@media (prefers-reduced-motion: reduce){
  .hprr-job--flash{ animation: none; }
}
.hprr-job__head{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8em;
  padding-bottom: 1rem;
  margin-bottom: .5rem;
  border-bottom: 2px dashed var(--hpr-color-line);
}
.hprr-job__badge{
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: .4em 1.1em;
  border-radius: 999px;
  background: var(--hpr-grad-main);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: var(--hpr-shadow-s);
}
.hprr-job__badge--warm{ background: var(--hpr-grad-warm); box-shadow: var(--hpr-shadow-warm); }
.hprr-job__title{
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 800;
  color: var(--hpr-color-text);
}
.hprr-job__table{
  width: 100%;
  border-collapse: collapse;
}
.hprr-job__table th,
.hprr-job__table td{
  text-align: left;
  vertical-align: top;
  padding: 1em .5em;
  border-bottom: 1px solid var(--hpr-color-line);
}
.hprr-job__table tr:last-child th,
.hprr-job__table tr:last-child td{ border-bottom: none; }
.hprr-job__table th{
  width: 8.5em;
  color: var(--hpr-color-main);
  font-weight: 800;
  white-space: nowrap;
}
.hprr-job--warm .hprr-job__table th{ color: var(--hpr-color-warm); }
.hprr-job__label{ font-weight: 800; color: var(--hpr-color-text); }
.hprr-job__pay{
  display: inline-block;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  color: var(--hpr-color-main);
  background: var(--hpr-color-bg-soft);
  padding: .1em .6em;
  border-radius: 10px;
}
.hprr-job--warm .hprr-job__pay{ color: var(--hpr-color-warm); background: var(--hpr-color-bg-warm); }
.hprr-job__link{
  color: var(--hpr-color-main);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.hprr-job__apply{
  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--hpr-color-line);
}

/* ---------- 応募・お問い合わせ CTA ---------- */
.hprr-entry{
  background: var(--hpr-grad-main);
  color: #fff;
  border-radius: var(--hpr-radius-xl);
  padding: clamp(2.2rem, 5vw, 3.8rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--hpr-shadow-m);
}
.hprr-entry::before,
.hprr-entry::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.hprr-entry::before{ width: 220px; height: 220px; top: -70px; right: -50px; }
.hprr-entry::after{ width: 160px; height: 160px; bottom: -60px; left: -40px; }
.hprr-entry__inner{ position: relative; z-index: 1; }
.hprr-entry__eyebrow{
  font-weight: 800;
  letter-spacing: .18em;
  font-size: .82rem;
  opacity: .9;
  margin: 0 0 .6em;
}
.hprr-entry__title{
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 800;
  margin: 0 0 .5em;
  line-height: 1.45;
}
.hprr-entry__lead{
  max-width: 50em;
  margin: 0 auto 1.6em;
  opacity: .96;
}
.hprr-entry__ctas{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
}
.hprr-entry__place{
  margin: 1.6em 0 0;
  font-size: .84rem;
  opacity: .85;
}

/* =====================================================
   タブレット (768px〜)
===================================================== */
@media screen and (min-width: 768px){
  .hprr-hero__inner{ flex-direction: row; align-items: center; }
  .hprr-hero__media{ flex: 0 0 44%; max-width: none; margin-inline: 0; }
  .hprr-hero__body{ flex: 1; }
  .hprr-style-grid{ grid-template-columns: repeat(3, 1fr); }
  .hprr-voices{ grid-template-columns: 1fr 1fr; }
  .hprr-job__table th{ width: 10em; }
  .hprr-job__apply{ flex-direction: row; justify-content: center; }
  .hprr-job__apply .hpr-btn{ flex: 1; max-width: 320px; }
  .hprr-entry__ctas .hpr-btn{ min-width: 260px; }
}

/* =====================================================
   デスクトップ (1024px〜)
===================================================== */
@media screen and (min-width: 1024px){
  .hprr-hero{ padding-top: clamp(36px, 3.5vw, 60px); padding-bottom: clamp(40px, 4vw, 72px); }
  .hprr-hero__media{ flex-basis: 46%; }
}