@charset "UTF-8";
/* =====================================================
   ケアセンターさいさい浦和美園 採用情報ページ 追加スタイル
   recruit_hpr_etc.css ―― 「子育て中のスタッフを応援！」
   セクション専用の追記スタイル。
   既存の recruit_hpr.css / style_hpr.css には手を入れず、
   このファイルだけで完結させる。
   変数・クラス名は他と衝突しないよう「hprk-」プレフィックスで
   統一（hpr-recruit-kids の略。既存の hpr- / hprr- とは別名前空間）。
===================================================== */

/* 子育て応援セクション固有トークン（すべて --hprk- プレフィックス。
   既存の --hpr- / --hprr- 変数とは干渉しない） */
:root{
  --hprk-green:        #5FA684;
  --hprk-green-dark:   #4C8A6C;
  --hprk-green-soft:   #E4F1EA;
  --hprk-green-line:   #CFE6DA;
  --hprk-grad-green:   linear-gradient(135deg, #7CC0A0 0%, #5FA684 100%);
  --hprk-card-bg:      #ffffff;
  --hprk-badge-bg:     linear-gradient(135deg, #F7B77E 0%, #EE7FA0 100%);
  --hprk-shadow-green: 0 14px 30px rgba(95, 166, 132, .24);
}

/* ---------- セクション全体レイアウト ---------- */
.hprk-support{
  position: relative;
}
.hprk-support__card{
  background: var(--hprk-card-bg);
  border: 1px solid var(--hprk-green-line);
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.6rem, 3.6vw, 2.8rem);
  box-shadow: var(--hpr-shadow-s);
  position: relative;
  overflow: hidden;
}
/* カード上端の緑ライン（働き方カードと同じ意匠） */
.hprk-support__card::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 6px;
  background: var(--hprk-grad-green);
}

/* ---------- ヘッダー（アイコン＋バッジ＋見出し） ---------- */
.hprk-support__head{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.hprk-support__icon{
  flex: none;
  width: 64px; height: 64px;
  border-radius: 20px;
  background: var(--hprk-grad-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--hprk-shadow-green);
  transform: rotate(-4deg);
}
.hprk-support__icon svg{ width: 54%; height: 54%; }


.hprk-support__heading{
  flex: 1;
  min-width: 220px;
}

@media (max-width: 900px) {
.hprk-support__heading{
    flex-basis: 100%;
}
}

.hprk-support__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--hprk-green-dark);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: clamp(.72rem, 1vw, .85rem);
  margin: 0 0 .35em;
}
.hprk-support__eyebrow::before{
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--hprk-green);
  opacity: .7;
}
.hprk-support__title{
  margin: 0;
  font-size: clamp(1.32rem, 3vw, 1.9rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--hpr-color-text);
}
.hprk-support__title .hprk-accent{
  color: var(--hprk-green-dark);
}



/* 「無料」バッジ */
.hprk-support__badge{
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--hprk-badge-bg);
  color: #fff;
  box-shadow: var(--hpr-shadow-warm);
  transform: rotate(6deg);
}

@media (max-width: 900px) {
.hprk-support__badge{
margin-left: auto;
position: absolute;
top: 24px;
right: 24px;
}
}


.hprk-support__badge b{
  font-size: 1.35rem;
  font-weight: 400;
}

.hprk-support__badge span{
  font-size: .87rem;
  font-weight: 400;
  letter-spacing: .04em;
}




.hprk-support__img{
width: 100%;
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-align: center;
}

.hprk-support__img_a{
width: 60%;
margin: 20px 0px 0px 0px;
padding: 0px;
box-sizing: border-box;
display: inline-block;
}

.hprk-support__img_a img{
width: 100%;
height: auto;
}


.hprk-support__img_b{
width: 40%;
margin: 0px 0px 20px 0px;
padding: 0px;
box-sizing: border-box;
display: inline-block;
}

.hprk-support__img_b img{
width: 100%;
height: auto;
}



@media (max-width: 900px) {


.hprk-support__img_a{
width: 80%;
margin: 0px 0px 0px 0px;
padding: 0px;
box-sizing: border-box;
display: inline-block;
}

.hprk-support__img_a img{
width: 100%;
height: auto;
}


.hprk-support__img_b{
width: 60%;
margin: 0px 0px 0px 0px;
padding: 0px;
box-sizing: border-box;
display: inline-block;
}

.hprk-support__img_b img{
width: 100%;
height: auto;
}


}


/* ---------- 本文 ---------- */
.hprk-support__text{
  margin: 0 0 1.4rem;
  line-height: 1.95;
}

/* ---------- 無料利用ハイライトボックス ---------- */
.hprk-support__highlight{
  display: flex;
  align-items: flex-start;
  gap: .8em;
  background: linear-gradient(135deg, #E4F1EA, #F1F8F4);
  border: 1px solid var(--hprk-green-line);
  border-radius: var(--hpr-radius-m);
  padding: 1em 1.2em;
  margin: 0 0 1.6rem;
}
.hprk-support__highlight-icon{
  flex: none;
  width: 2.1em; height: 2.1em;
  border-radius: 11px;
  background: var(--hprk-grad-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hprk-support__highlight-icon svg{ width: 60%; height: 60%; }
.hprk-support__highlight p{
  margin: 0;
  font-size: clamp(.95rem, 1.7vw, 1.05rem);
}
.hprk-support__highlight strong{
  color: var(--hprk-green-dark);
  font-weight: 600;
}
.hprk-support__facility{
  font-weight: 600;
  color: var(--hpr-color-main);
}

/* ---------- CTA（学童ホームページへのリンク） ---------- */
.hprk-support__cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.hprk-support__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 1em 2.1em;
  border-radius: 999px;
  background: var(--hprk-grad-green);
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(.9rem, 1.2vw, 1.5rem);
  border: 2px solid transparent;
  box-shadow: var(--hprk-shadow-green);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  white-space: nowrap;
  letter-spacing: .02em;
  margin-inline: auto;    
}
.hprk-support__link svg{ width: 1.2em; height: 1.2em; flex: none; }
@media (hover: hover){
  .hprk-support__link:hover{
    transform: translateY(-3px);
    filter: brightness(1.05);
    box-shadow: 0 18px 36px rgba(95,166,132,.30);
  }
}
.hprk-support__note{
  margin: 0;
  font-size: .84rem;
  color: var(--hpr-color-text-soft);
}

/* =====================================================
   タブレット (768px〜)
===================================================== */
@media screen and (min-width: 768px){
  .hprk-support__card{ padding: clamp(2.2rem, 4vw, 3.2rem); }
  .hprk-support__text{ font-size: 1.05rem; }
}

/* =====================================================
   モーションを抑える設定への配慮
===================================================== */
@media (prefers-reduced-motion: reduce){
  .hprk-support__link{ transition: none; }
}