@charset "UTF-8";
/* =====================================================
   ケアセンターさいさい浦和美園 トップページ専用スタイル
   index_hpr.css ―― 2026 リニューアル（明るく・温かく・モダンに）
   ヘッダー・フッター・ボタンなど複数ページ共通のスタイルは
   style_hpr.css に分離済み。このファイルはトップページ固有の
   セクション（メインビジュアル〜お問い合わせ）のみを扱う。
   命名は「hpr-」プレフィックスで統一し、既存スタイルとの
   クラス名・変数名の衝突を避けています。
===================================================== */

/* ---------- ヒーロー ---------- */
/* 画像は他コンテンツと重ねず独立表示しつつ、コンテナ幅に収めて
   画面いっぱいに広がらないコンパクトなサイズに調整。
   タブレット以上では画像とテキストを横並びにして高さを抑え、
   バッジ・採用バナーまで含めて開いた瞬間に視界に収まるようにする。 */
.hpr-hero{
  position: relative;
  overflow: hidden;
  background: var(--hpr-grad-soft);
  padding-top: clamp(20px, 3.5vw, 36px);
  padding-bottom: clamp(20px, 3.5vw, 36px);
}
.hpr-hero__inner{
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1.5rem);
}
.hpr-hero__media{
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 1024 / 672;
  overflow: hidden;
  border-radius: var(--hpr-radius-l);
  box-shadow: var(--hpr-shadow-m);
}
.hpr-hero__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.hpr-hero__body{
  position: relative;
}
.hpr-hero__card{
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(4px);
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.3rem, 3.4vw, 2rem);
  box-shadow: var(--hpr-shadow-m);
  border: 1px solid rgba(255,255,255,.8);
  position: relative;
}
.hpr-hero__card::before{
  content: "";
  position: absolute;
  top: -12px; left: 24px;
  width: 44px; height: 44px;
  background: var(--hpr-grad-warm);
  border-radius: 16px;
  transform: rotate(-8deg);
  z-index: -1;
  opacity: .35;
}
.hpr-hero__title{
  font-size: clamp(1.32rem, 3.6vw, 1.9rem);
  font-weight: 800;
  color: var(--hpr-color-main);
  margin: .2em 0 .4em;
  line-height: 1.4;
}
.hpr-hero__lead{
  font-size: clamp(.88rem, 1.4vw, .98rem);
  margin: 0 0 1.1em;
  line-height: 1.7;
}
.hpr-hero__ctas{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.hpr-hero__ctas .hpr-btn{ padding: .75em 1.3em; font-size: .92rem; }

/* ヒーロー下：安心バッジ（3つの約束）―― 常に3列のコンパクトなチップ表示 */
.hpr-hero-badges{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: clamp(.9rem, 2.5vw, 1.3rem);
}
.hpr-hero-badge{
  background: #fff;
  border-radius: var(--hpr-radius-m);
  padding: .7rem .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  box-shadow: var(--hpr-shadow-s);
  border: 1px solid var(--hpr-color-line);
}
.hpr-hero-badge__icon{
  flex: none;
  width: 36px; height: 36px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.hpr-hero-badge__icon svg{ width: 55%; height: 55%; }
.hpr-hero-badge:nth-child(1) .hpr-hero-badge__icon{ background: var(--hpr-grad-main); }
.hpr-hero-badge:nth-child(2) .hpr-hero-badge__icon{ background: var(--hpr-grad-warm); }
.hpr-hero-badge:nth-child(3) .hpr-hero-badge__icon{ background: linear-gradient(135deg,#7CC0A0,#5FA684); }
.hpr-hero-badge__title{ font-weight: 800; font-size: .74rem !important; margin: 0; line-height: 1.3; }
.hpr-hero-badge__text{ display: none; }

/* 採用情報への誘導バナー ―― index_hpr_recruit.png をそのまま使用 */
.hpr-recruit-banner{
  display: block;
  border-radius: var(--hpr-radius-m);
  overflow: hidden;
  margin-top: clamp(.9rem, 2.5vw, 1.4rem);
  box-shadow: var(--hpr-shadow-s);
  transition: transform .25s ease, box-shadow .25s ease;
}

.hpr-recruit-banner:hover,
.hpr-recruit-banner:focus-visible{
  transform: translateY(-3px);
  box-shadow: var(--hpr-shadow-warm);
}

.hpr-recruit-banner img{ width: 100%; height: auto; display: block; }


.hpr-recruit-banner-sp { display:none !important; }

@media (max-width: 900px) {

.hpr-recruit-banner{
  display: block;
  border-radius: 0px !important;
  overflow: hidden;
  margin-top: clamp(.9rem, 2.5vw, 1.4rem);
  box-shadow: none !important;
  transition: none !important;
}

.hpr-recruit-banner-pc { display:none !important; }
.hpr-recruit-banner-sp { display:inline !important; }
}


/* ---------- 私たちが大切にしていること ---------- */
.hpr-mission{
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}

.hpr-mission__catch{
  color: var(--hpr-color-main);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  margin: 0 0 .6em;
  line-height: 1.4;
  position: relative;
  display: inline-block;
  width: 100%;
}

.hpr-mission__catch::after{
  content: "";
  display: block;
  width: 4em;
  height: .28em;
  border-radius: 999px;
  background: var(--hpr-color-warm-soft);
  margin-top: .25em;
}



.hpr-mission__cards{
  display: grid;
  gap: 1rem;
}
.hpr-mission-highlight{
  background: linear-gradient(135deg, #FFF3EA, #FDEDF2);
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: var(--hpr-shadow-s);
  border: 1px solid rgba(255,255,255,.9);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hpr-mission-highlight__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: .9rem;
}
.hpr-mission-highlight__icon svg{ width: 54%; height: 54%; }
.hpr-mission-highlight__title{
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  margin: 0 0 .4em;
  color: var(--hpr-color-text);
}
.hpr-mission-highlight p{ margin: 0; opacity: .9; }

/* ---------- 理念 ---------- */
.hpr-philosophy{
  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);
}
.hpr-philosophy::before,
.hpr-philosophy::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.hpr-philosophy::before{ width: 220px; height: 220px; top: -70px; right: -50px; }
.hpr-philosophy::after{ width: 160px; height: 160px; bottom: -60px; left: -40px; }
.hpr-philosophy__eyebrow{
  display: inline-block;
  color: #fff;
  opacity: 1;
  font-weight: 600;
  letter-spacing: .03em;
  font-size: 1.25rem;
  margin-bottom: 0px;
  position: relative;
}
.hpr-philosophy__kanji{
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: 800;
  margin: 0 0 .3em;
  position: relative;
  letter-spacing: .12em;
}
.hpr-philosophy__reading{
  display: block;
  font-size: clamp(.85rem, 1.4vw, 1rem);
  font-weight: 400;
  opacity: .9;
  margin-top: .4em;
  letter-spacing: .04em;
}
.hpr-philosophy__text{
  max-width: 48em;
  margin: 1.2em auto 0;
  opacity: .96;
  position: relative;
}

/* ---------- サービスカード ---------- */
.hpr-service-card{
  background: var(--hpr-color-base);
  border: 1px solid var(--hpr-color-line);
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--hpr-shadow-s);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover){
  .hpr-service-card:hover{ transform: translateY(-4px); box-shadow: var(--hpr-shadow-m); }
}
.hpr-service-card__cols{
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  margin-bottom: 1em;
}
.hpr-service-subhead{
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 .8em;
}
.hpr-service-subhead__icon{
  flex: none;
  width: 2.4em; height: 2.4em;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.hpr-service-subhead__icon svg{ width: 55%; height: 55%; }
.hpr-service-subhead__icon--pink{ background: var(--hpr-grad-main); }
.hpr-service-subhead__icon--green{ background: linear-gradient(135deg,#7CC0A0,#5FA684); }
.hpr-service-subhead h4{
  margin: 0;
  font-size: 1.12rem;
  color: var(--hpr-color-text);
  font-weight: 800;
}
.hpr-check-list li{
  position: relative;
  padding-left: 1.9em;
  margin-bottom: .55em;
}
.hpr-check-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--hpr-color-accent-soft) 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='%235FA684' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
.hpr-service-card__note{
  font-size: 1rem;
  opacity: 1;
  margin-top: .8em;
  padding-top: .8em;
  border-top: 1px dashed var(--hpr-color-line);
}
.hpr-service-card__title{
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--hpr-color-main);
  font-weight: 800;
  margin: 0 0 .7em;
  display: flex;
  align-items: center;
  gap: .6em;
}
.hpr-service-card__badge{
  width: 2.4em;
  height: 2.4em;
  border-radius: 14px;
  background: var(--hpr-color-bg-warm);
  color: var(--hpr-color-warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hpr-service-card__badge img{
 width: 70%;
 height: auto;
}


/* ---------- 3つのこと ---------- */
.hpr-values{
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  grid-template-columns: 1fr;
}
.hpr-value-card{
  background: #fff;
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  position: relative;
  box-shadow: var(--hpr-shadow-s);
  border: 1px solid var(--hpr-color-line);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.hpr-value-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 6px;
  background: var(--hpr-grad-warm);
}
@media (hover: hover){
  .hpr-value-card:hover{ transform: translateY(-5px); box-shadow: var(--hpr-shadow-m); }
}
.hpr-value-card__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: 18px;
  background: var(--hpr-grad-main);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: .9em;
  box-shadow: var(--hpr-shadow-s);
}
.hpr-value-card__num svg{ width: 1.4em; height: 1.4em; }
.hpr-value-card__title{
  font-size: clamp(1.08rem, 1.8vw, 1.22rem);
  font-weight: 800;
  margin: 0 0 .5em;
  color: var(--hpr-color-text);
}
.hpr-value-card p:last-child{ margin: 0; opacity: .9; }

/* ---------- 利用の流れ ---------- */
.hpr-flow{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  position: relative;
}

.hpr-flow-step{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  background: #fff;
  border-radius: var(--hpr-radius-m);
  padding: 1.3rem 1.5rem;
  box-shadow: var(--hpr-shadow-s);
  border: 1px solid var(--hpr-color-line);
  position: relative;
}

.hpr-flow-step__num{
  width: clamp(2.6rem, 5vw, 3.2rem);
  height: clamp(2.6rem, 5vw, 3.2rem);
  border-radius: 18px;
  background: var(--hpr-grad-main);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: var(--hpr-shadow-s);
  flex: none;
}

.hpr-flow-step__title{
  font-weight: 800;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  margin: .15em 0 .35em;
  color: var(--hpr-color-text);
}

.hpr-flow-step__text{ margin: 0; opacity: .9; }
.hpr-flow__cta{
  text-align: center;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

/* ---------- 対応エリア ---------- */
.hpr-area{
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.hpr-area__list{
  display: grid;
  gap: .7rem;
}
.hpr-area__list li{
  position: relative;
  padding: .8em 1em .8em 3em;
  background: #fff;
  border-radius: var(--hpr-radius-s);
  box-shadow: var(--hpr-shadow-s);
  font-weight: 700;
}
.hpr-area__list li::before{
  content: "";
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.3em;
  height: 1.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22s7-5.5 7-12a7 7 0 10-14 0c0 6.5 7 12 7 12z' fill='%235FA684'/%3E%3Ccircle cx='12' cy='10' r='2.4' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hpr-area__note{
  background: linear-gradient(135deg, #E4F1EA, #F1F8F4);
  border-radius: var(--hpr-radius-l);
  padding: 0.4rem 1.8rem 1.2rem;
  font-size: 1rem;
  border: 1px solid #DCEDE4;
}
.hpr-area__note-head{
  display: flex;
  align-items: center;
  gap: .5em;
  font-weight: 800;
  color: var(--hpr-color-accent);
  margin-bottom: .3em;
}
.hpr-area__note-head svg{ width: 1.3em; height: 1.3em; }

/* ---------- FAQ ---------- */
.hpr-faq{ display: flex; flex-direction: column; gap: 1rem; }
.hpr-faq-item{
  border: 1px solid var(--hpr-color-line);
  border-radius: var(--hpr-radius-m);
  overflow: hidden;
  background: var(--hpr-color-base);
  box-shadow: var(--hpr-shadow-s);
  transition: box-shadow .2s ease;
}
.hpr-faq-item[data-open="true"]{ box-shadow: var(--hpr-shadow-m); }
.hpr-faq-item__q{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  cursor: pointer;
  font-weight: 800;
  color: var(--hpr-color-text);
}

.hpr-faq-item__q-mark{
  flex: none;
  color: #fff;
  background: var(--hpr-grad-main);
  width: 2em;
  height: 2em;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 800;
}

.hpr-faq-item__q-text{ flex: 1; font-size: 1rem; font-weight: 600; }

.hpr-faq-item__icon{
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--hpr-color-bg-soft);
  position: relative;
}

.hpr-faq-item__icon::before,
.hpr-faq-item__icon::after{
  content: "";
  position: absolute;
  background: var(--hpr-color-main);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
  border-radius: 2px;
}
.hpr-faq-item__icon::before{ width: 45%; height: 2px; }
.hpr-faq-item__icon::after{ width: 2px; height: 45%; }
.hpr-faq-item__q[aria-expanded="true"] .hpr-faq-item__icon::after{ transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.hpr-faq-item__a{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.hpr-faq-item__a-inner{ overflow: hidden; }
.hpr-faq-item[data-open="true"] .hpr-faq-item__a{ grid-template-rows: 1fr; }
.hpr-faq-item__a p{
  margin: 0;
  padding: 0 1.4rem 1.3rem 4rem;
  opacity: .9;
  position: relative;
}
.hpr-faq-item__a p::before{
  content: "A";
  position: absolute;
  left: 1.4rem;
  top: -.1em;
  width: 2em; height: 2em;
  border-radius: 12px;
  background: var(--hpr-color-accent-soft);
  color: var(--hpr-color-accent);
  font-weight: 800;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover){
  .hpr-faq-item__q:hover{ background: var(--hpr-color-bg-soft); }
}

/* ---------- 代表メッセージ ---------- */
.hpr-message{
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.hpr-message__photo{
  position: relative;
  width: 100%;
  max-width: 260px;
  margin: 1.8rem auto 0;
}
.hpr-message__photo-deco{
  position: absolute;
  inset: -10px 10px 10px -10px;
  background: var(--hpr-grad-warm);
  border-radius: var(--hpr-radius-l);
  transform: rotate(-4deg);
  opacity: .55;
  z-index: 0;
}
.hpr-message__photo img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1080 / 1400;
  object-fit: cover;
  border-radius: var(--hpr-radius-l);
  box-shadow: var(--hpr-shadow-m);
  border: 4px solid #fff;
}
.hpr-message__quote{
  background: #fff;
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  position: relative;
  box-shadow: var(--hpr-shadow-s);
  border: 1px solid var(--hpr-color-line);
}
.hpr-message__quote::before{
  content: "\201C";
  position: absolute;
  top: .1em; left: .3em;
  font-size: 4rem;
  line-height: 1;
  color: var(--hpr-color-main-light);
  opacity: .4;
  font-family: Georgia, serif;
}
.hpr-message__quote p{ margin: 0 0 1em; position: relative; }
.hpr-message__signature{
  text-align: right;
  font-weight: 800;
  margin-top: 1.4em;
  font-size: 1.25rem; 
  color: var(--hpr-color-main);
}
.hpr-message__signature span{
  display: block;
  font-weight: 400;
  font-size: 1rem;
  opacity: 1;
  color: var(--hpr-color-text);
  letter-spacing: 0.2em;
}

.hpr-message__signature span em{
display: inline;
margin: 0px;
padding: 0px 0px 0px 0.5em;
box-sizing: border-box;
font-style: normal;
font-size: 1.25rem;
}

/* ---------- きっずさぽーと ---------- */
.hpr-kids{
  background: linear-gradient(135deg, #fff3e3 0%, #fff3e3 100%);
  color: #ff5500;
  border-radius: var(--hpr-radius-xl);
  padding: clamp(2rem, 5vw, 3.4rem);
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: solid 1px #f69d36;
  box-shadow: 0 18px 40px rgba(95,166,132,.24);
}
.hpr-kids::before,
.hpr-kids::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
}
.hpr-kids::before{ width: 200px; height: 200px; top: -60px; right: -40px; }
.hpr-kids::after{ width: 140px; height: 140px; bottom: -50px; left: -30px; }
.hpr-kids__inner{ position: relative; }
.hpr-kids__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: #ff5500;
  opacity: .95;
  font-weight: 500;
  letter-spacing: .03em;
  font-size: 1rem;
  margin-bottom: .7em;
}

.hpr-kids__eyebrow img{
width: 1.5em;
height: auto;
}

.hpr-kids__eyebrow svg{ width: 1.2em; height: 1.2em; }
.hpr-kids__title{
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 .6em;
}
.hpr-kids p{ opacity: .96; margin: 0; }

.hpr-kids__cta{ position: relative; }

.hpr-kids__span{
display: inline-block;
width: 220px;
margin: 30px 0px 0px 40px;
padding: 0px;
box-sizing: border-box;
text-align: center;
}

.hpr-kids__span img{
display: inline-block;
width: 100%;
height: auto;
}

@media (max-width: 900px) {

.hpr-kids__span{
display: inline-block;
width: 220px;
margin: 30px 0px 0px 0px;
padding: 0px;
box-sizing: border-box;
text-align: center;
}

.hpr-kids__span img{
display: inline-block;
width: 100%;
height: auto;
}

}



/* ---------- 採用情報 ---------- */
.hpr-recruit{
  background: linear-gradient(135deg, #FFF3EA, #FDEDF2);
  border-radius: var(--hpr-radius-xl);
  padding: clamp(2rem, 5vw, 3.4rem);
  box-shadow: var(--hpr-shadow-s);
  border: 1px solid rgba(255,255,255,.9);
}
.hpr-recruit__grid{
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
.hpr-recruit__list{
  display: grid;
  gap: .6rem;
}
.hpr-recruit__list li{
  position: relative;
  padding: .6em .6em .6em 2.6em;
  background: rgba(255,255,255,.75);
  border-radius: var(--hpr-radius-s);
  font-weight: 700;
}
.hpr-recruit__list li::before{
  content: "";
  position: absolute;
  left: .7em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4em;
  height: 1.4em;
  border-radius: 8px;
  background: var(--hpr-grad-warm) ;
  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;
}
.hpr-recruit__cta{ margin-top: 1.8rem; text-align: center; }
.hpr-recruit__note{ margin-top: 1.4rem; }

/* ---------- お問い合わせ・事業所情報 ---------- */
.hpr-contact{
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
.hpr-contact__panel{
  background: #fff;
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--hpr-shadow-s);
  border: 1px solid var(--hpr-color-line);
}
.hpr-contact__table{
  width: 100%;
  border-collapse: collapse;
}
.hpr-contact__table th,
.hpr-contact__table td{
  text-align: left;
  padding: .95em .6em;
  border-bottom: 1px solid var(--hpr-color-line);
  vertical-align: top;
}
.hpr-contact__table tr:last-child th,
.hpr-contact__table tr:last-child td{ border-bottom: none; }
.hpr-contact__table th{
  width: 7.5em;
  color: var(--hpr-color-main);
  font-weight: 800;
  white-space: nowrap;
}
.hpr-contact__ctas{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.4rem;
}
.hpr-contact__map{
  border-radius: var(--hpr-radius-l);
  overflow: hidden;
  border: 1px solid var(--hpr-color-line);
  aspect-ratio: 4 / 3;
  box-shadow: var(--hpr-shadow-s);
}
.hpr-contact__map iframe{ width: 100%; height: 100%; border: 0; }

/* =====================================================
   タブレット (768px〜) ―― トップページ固有セクションのレイアウト
===================================================== */
@media screen and (min-width: 768px){
  .hpr-hero__inner{
    flex-direction: row;
    align-items: center;
    gap: clamp(1.6rem, 4vw, 3rem);
  }
  .hpr-hero__media{
    flex: 0 0 42%;
    max-width: none;
    margin-inline: 0;
  }
  .hpr-hero__body{ flex: 1; }
  .hpr-hero-badge{ flex-direction: row; text-align: left; padding: .85rem 1rem; gap: .7rem; }
  .hpr-hero-badge__icon{ width: 42px; height: 42px; }
  .hpr-hero-badge__title{ font-size: 1rem !important; }
  .hpr-hero-badge__text{ display: block; font-size: .74rem; opacity: .8; margin: .1em 0 0; }
  .hpr-mission{ grid-template-columns: 1.05fr .95fr; }
  .hpr-service-card__cols{ grid-template-columns: 1fr 1fr; }
  .hpr-values{ grid-template-columns: repeat(3, 1fr); }
  .hpr-flow{ grid-template-columns: 1fr 1fr; }
  .hpr-area{ grid-template-columns: 1.1fr .9fr; }
  .hpr-area__list{ grid-template-columns: 1fr 1fr; }
  .hpr-message{ grid-template-columns: .75fr 1.25fr; }
  .hpr-message__photo{ max-width: 82%; margin: 2.2rem 0 0; }
  .hpr-kids{ grid-template-columns: 1.3fr .7fr; text-align: left; }
  .hpr-kids__eyebrow, .hpr-kids__cta{ justify-content: flex-start; }
  .hpr-recruit__grid{ grid-template-columns: 1fr 1fr; }
  .hpr-recruit__list{ grid-template-columns: 1fr; }
  .hpr-contact{ grid-template-columns: 1.05fr .95fr; }
  .hpr-contact__ctas{ flex-direction: row; }
  .hpr-contact__ctas .hpr-btn{ flex: 1; }
}

/* =====================================================
   デスクトップ (1024px〜) ―― トップページ固有セクションのレイアウト
===================================================== */
@media screen and (min-width: 1024px){
  .hpr-hero{ padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(28px, 3vw, 44px); }
  .hpr-flow{ grid-template-columns: repeat(5, 1fr); }
  .hpr-flow-step{ grid-template-columns: 1fr; text-align: center; align-content: start; }
  .hpr-flow-step__num{ margin: 0 auto; }
}