@charset "UTF-8";
/* =====================================================
   ケアセンターさいさい浦和美園 お問い合わせページ専用スタイル
   contact_hpr.css ―― 2026 リニューアル
   （明るく・温かく・モダンに／どなたにも安心してご相談いただけるトーン）
   ヘッダー・フッター・ボタン・変数など複数ページ共通の
   スタイルは style_hpr.css に分離済み。このファイルは
   お問い合わせページ固有のセクション（ヒーロー・メールフォーム）
   のみを扱う。
   命名は他ページと衝突しないよう「hprc-」プレフィックスで統一
   （hpr-contact の略。トップページの hpr- 系／採用ページの hprr- 系
   ／応募ページの hpre- 系とは別の名前空間）。
===================================================== */

/* お問い合わせページ固有の色・寸法トークン（他ページの変数と
   干渉しないよう、すべて --hprc- プレフィックスを付与） */
:root{
  --hprc-form-line: #F0D3DE;
  --hprc-field-bg: #FFFFFF;
  --hprc-field-border: #EAD0DA;
  --hprc-field-focus: #C25276;
  --hprc-required-bg: linear-gradient(135deg, #EE7FA0, #C25276);
  --hprc-error: #D5495F;
}

/* =====================================================
   1. ヒーロー（お問い合わせ）
===================================================== */
.hprc-hero{
  position: relative;
  overflow: hidden;
  background: var(--hpr-grad-soft);
  padding-top: clamp(24px, 4vw, 52px);
  padding-bottom: clamp(28px, 4.5vw, 64px);
}
.hprc-hero__inner{
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3.5vw, 2.4rem);
  align-items: center;
}

/* ヒーロー内・テキストカード */
.hprc-hero__body{ position: relative; width: 100%; }
.hprc-hero__card{
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.6rem, 3.6vw, 2.6rem);
  box-shadow: var(--hpr-shadow-m);
  border: 1px solid rgba(255,255,255,.85);
  position: relative;
}
.hprc-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;
}
.hprc-hero__title{
  font-size: clamp(1.55rem, 4.4vw, 2.35rem);
  font-weight: 800;
  color: var(--hpr-color-main);
  margin: .25em 0 .5em;
  line-height: 1.4;
}
.hprc-hero__lead{
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  color: var(--hpr-color-text);
  margin: 0 0 1.2em;
  line-height: 1.85;
}
.hprc-hero__lead strong{ color: var(--hpr-color-main); font-weight: 800; }

/* ご相談内容の例（箇条書き） */
.hprc-hero__points{
  display: grid;
  gap: .5rem;
  margin: 0 0 1.6em !important;
}

.hprc-hero__points li{
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .6em .9em;
  background: var(--hpr-color-cream);
  border-radius: var(--hpr-radius-s);
  font-weight: 700;
  font-size: clamp(.9rem, 1.6vw, 1rem);
  color: var(--hpr-color-text);
}

.hprc-hero__points li::before{
  content: "";
  flex: none;
  width: 1.4em; height: 1.4em;
  border-radius: 50%;
  background: var(--hpr-grad-warm);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .95em no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .95em no-repeat;
}

/* ヒーロー・電話でのお問い合わせパネル（本ページの主役の一つ） */
.hprc-hero__phone{
  position: relative;
  width: 100%;
}
.hprc-callcard{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #7CC0A0 0%, #5FA684 100%);
  color: #fff;
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.6rem, 3.6vw, 2.2rem);
  box-shadow: 0 18px 40px rgba(95,166,132,.28);
  text-align: center;
}
.hprc-callcard::before,
.hprc-callcard::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  pointer-events: none;
}
.hprc-callcard::before{ width: 170px; height: 170px; top: -60px; right: -40px; }
.hprc-callcard::after{ width: 120px; height: 120px; bottom: -50px; left: -30px; }
.hprc-callcard__inner{ position: relative; z-index: 1; }
.hprc-callcard__ribbon{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .4em 1.1em;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .04em;
  margin-bottom: .8em;
}
.hprc-callcard__ribbon svg{ width: 1.1em; height: 1.1em; }
.hprc-callcard__title{
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 800;
  margin: 0 0 .5em;
  line-height: 1.55;
}
.hprc-callcard__num{
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: clamp(1.7rem, 5.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  line-height: 1.1;
  margin: .1em 0 .2em;
}
.hprc-callcard__num svg{ width: .82em; height: .82em; flex: none; }
.hprc-callcard__hours{
  font-size: .86rem;
  opacity: .95;
  margin: .2em 0 0;
}
.hprc-callcard__cta{
  margin-top: 1em;
}
.hprc-callcard__cta .hpr-btn{
  background: #fff;
  color: var(--hpr-color-accent) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}
@media (hover: hover){
  .hprc-callcard__cta .hpr-btn:hover{ transform: translateY(-3px); filter: brightness(1.02); box-shadow: 0 16px 30px rgba(0,0,0,.2); }
}

/* =====================================================
   2. メールフォーム（Contact Form 7）
===================================================== */
.hprc-form-section{
  position: relative;
  scroll-margin-top: calc(var(--hpr-header-h) + 8px);
}

/* セクションリード内の「必須」凡例バッジ */
.hprc-required-legend{
  display: inline-flex;
  align-items: center;
}
.hprc-required-legend em{
  font-style: normal;
  display: inline-flex;
  align-items: center;
  padding: .12em .7em;
  border-radius: 999px;
  font-size: .87em;
  font-weight: 400;
  letter-spacing: .06em;
  color: #fff;
  background: var(--hprc-required-bg);
  box-shadow: var(--hpr-shadow-s);
}
.hprc-form-wrap{
  max-width: 960px;
  margin-inline: auto;
}

/* CF7カード（フォーム全体を包む白いパネル） */
.hprc-form-card{
  background: #fff;
  border: 1px solid var(--hpr-color-line);
  border-radius: var(--hpr-radius-l);
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  box-shadow: var(--hpr-shadow-m);
  position: relative;
  overflow: hidden;
}
.hprc-form-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 6px;
  background: var(--hpr-grad-main);
}

/* CF7 が出力する制御要素の見た目調整 --------------------------- */
/* スクリーンリーダー用の応答領域はそのまま（非表示） */
.hprc-form-card .screen-reader-response{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* CF7フォーム内の余計な <p> のマージンを詰める */
.hprc-form-card .wpcf7-form p{ margin: 0; }

/* フォーム見出し（お問い合わせ 等） */
.hprc-form-card .entry_title{
  text-align: center;
  margin-bottom: clamp(1.4rem, 3.5vw, 2.2rem);
  padding-bottom: clamp(1.2rem, 3vw, 1.8rem);
  border-bottom: 2px dashed var(--hpr-color-line);
}
.hprc-form-card .entry_title h2{
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 800;
  color: var(--hpr-color-main);
  margin: 0 0 .6em;
  line-height: 1.4;
}
.hprc-form-card .entry_title h2::before{
  content: "";
  display: block;
  width: 2.6em;
  height: .28em;
  border-radius: 999px;
  background: var(--hpr-grad-warm);
  margin: 0 auto .6em;
}
.hprc-form-card .entry_title p{
  margin: .6em 0 0;
  font-size: clamp(.9rem, 1.5vw, .98rem);
  color: var(--hpr-color-text);
  opacity: .92;
}

/* CF7 応答メッセージ（送信結果） */
.hprc-form-card .wpcf7-response-output{
  margin: 0 0 1.4em !important;
  padding: .9em 1.1em;
  border-radius: var(--hpr-radius-s);
  border: 1px solid var(--hpr-color-line);
  font-size: .9rem;
  line-height: 1.7;
}
.hprc-form-card .wpcf7-response-output[aria-hidden="true"]{ display: none; }
.hprc-form-card .wpcf7 form.invalid .wpcf7-response-output,
.hprc-form-card .wpcf7 form.unaccepted .wpcf7-response-output,
.hprc-form-card .wpcf7 form.payment-required .wpcf7-response-output{
  border-color: #F3C9CD;
  background: #FCEEF0;
  color: var(--hprc-error);
}
.hprc-form-card .wpcf7 form.sent .wpcf7-response-output{
  border-color: #CDE7D8;
  background: #EAF6EF;
  color: var(--hpr-color-accent);
}

/* --- 入力テーブル：デスクトップは2カラム、モバイルは縦積み --- */
.hprc-form-card .entry_entry table{
  width: 100%;
  border-collapse: collapse;
}
.hprc-form-card .entry_entry tbody,
.hprc-form-card .entry_entry tr,
.hprc-form-card .entry_entry th,
.hprc-form-card .entry_entry td{
  display: block;
  width: 100%;
}
.hprc-form-card .entry_entry tr{
  padding: 1.1em 0;
  border-bottom: 1px solid var(--hprc-form-line);
}
.hprc-form-card .entry_entry tr:first-child{ padding-top: 0; }
.hprc-form-card .entry_entry tr:last-child{ border-bottom: none; padding-bottom: 0; }
.hprc-form-card .entry_entry th{
  text-align: left;
  padding: 0 0 .55em;
  width: 30% !important;
}

@media (max-width: 900px) {
  .hprc-form-card .entry_entry th{
    width: 100% !important;
  }
}

.hprc-form-card .entry_entry th p{
  display: flex;
  align-items: center;
  gap: .6em;
  font-weight: 600;
  color: var(--hpr-color-text);
  font-size: clamp(.98rem, 1.7vw, 1.06rem);
}

/* 必須バッジ */
.hprc-form-card .entry_entry th span{
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: .18em .8em;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: #fff;
  background: var(--hprc-required-bg);
  box-shadow: var(--hpr-shadow-s);
}
.hprc-form-card .entry_entry td{ padding: 0; }

/* 入力フィールド共通 */
.hprc-form-card .wpcf7-form-control-wrap{ display: block; }
.hprc-form-card input.wpcf7-text,
.hprc-form-card input.wpcf7-email,
.hprc-form-card textarea.wpcf7-textarea{
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  font-size: clamp(1rem, 1.6vw, 1.05rem);
  color: var(--hpr-color-text);
  background: var(--hprc-field-bg);
  border: 1.5px solid var(--hprc-field-border);
  border-radius: var(--hpr-radius-s);
  padding: .75em .95em;
  line-height: 1.6;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.hprc-form-card textarea.wpcf7-textarea{
  min-height: 10em;
  resize: vertical;
}
.hprc-form-card input.wpcf7-text::placeholder,
.hprc-form-card input.wpcf7-email::placeholder,
.hprc-form-card textarea.wpcf7-textarea::placeholder{
  color: #C4A9B3;
}
.hprc-form-card input.wpcf7-text:focus,
.hprc-form-card input.wpcf7-email:focus,
.hprc-form-card textarea.wpcf7-textarea:focus{
  outline: none;
  border-color: var(--hprc-field-focus);
  box-shadow: 0 0 0 3px rgba(194,82,118,.14);
  background: #fff;
}

/* CF7 バリデーションエラー表示 */
.hprc-form-card .wpcf7-not-valid{
  border-color: var(--hprc-error) !important;
  box-shadow: 0 0 0 3px rgba(213,73,95,.12) !important;
}
.hprc-form-card .wpcf7-not-valid-tip{
  display: block;
  color: var(--hprc-error);
  font-size: .82rem;
  font-weight: 700;
  margin-top: .45em;
}

/* 送信ボタン */
.hprc-form-card .entry_entry > p:last-child,
.hprc-form-submit-wrap{
  text-align: center;
  margin-top: clamp(1.6rem, 4vw, 2.4rem) !important;
}
.hprc-form-card input.wpcf7-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-width: min(340px, 100%);
  padding: 1.05em 2.4em;
  border: none;
  border-radius: 999px;
  background: var(--hpr-grad-main);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(194,82,118,.32);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
@media (hover: hover){
  .hprc-form-card input.wpcf7-submit:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(194,82,118,.4);
    filter: brightness(1.04);
  }
}
.hprc-form-card input.wpcf7-submit:disabled{
  opacity: .6;
  cursor: default;
}

/* CF7 送信スピナー */
.hprc-form-card .wpcf7-spinner{
  display: inline-block;
  background: var(--hpr-color-main-light);
  vertical-align: middle;
}

/* 送信ボタン下の補足（電話でもOK） */
.hprc-form-orcall{
  text-align: center;
  margin-top: 1.4em;
  font-size: .92rem;
  color: var(--hpr-color-text-soft);
}
.hprc-form-orcall a{
  color: var(--hpr-color-main);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* reCAPTCHA / プライバシー注記 */
.hprc-form-recaptcha{
  margin-top: clamp(1.4rem, 3.5vw, 2rem);
  text-align: center;
  font-size: .8rem;
  color: var(--hpr-color-text-soft);
  line-height: 1.8;
}
.hprc-form-recaptcha a{
  color: var(--hpr-color-main);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* CF7 が挿入する隠しフィールドのコンテナ */
.hprc-form-card .hidden-fields-container{ display: none; }

/* =====================================================
   タブレット (768px〜)
===================================================== */
@media screen and (min-width: 768px){
  .hprc-hero__inner{ flex-direction: row; align-items: stretch; }
  .hprc-hero__body{ flex: 1 1 58%; display: flex; }
  .hprc-hero__card{ width: 100%; }
  .hprc-hero__phone{ flex: 1 1 42%; display: flex; }
  .hprc-callcard{ width: 100%; display: flex; align-items: center; }
  .hprc-callcard__inner{ width: 100%; }

  /* テーブルを th / td 横並びの2カラムに戻す（可読性向上） */
  .hprc-form-card .entry_entry table,
  .hprc-form-card .entry_entry tbody{ display: table; width: 100%; }
  .hprc-form-card .entry_entry tr{ display: table-row; border-bottom: none; }
  .hprc-form-card .entry_entry th,
  .hprc-form-card .entry_entry td{
    display: table-cell;
    vertical-align: top;
    padding: 1.1em .4em;
    border-bottom: 1px solid var(--hprc-form-line);
  }
  .hprc-form-card .entry_entry tr:first-child th,
  .hprc-form-card .entry_entry tr:first-child td{ padding-top: 0; }
  .hprc-form-card .entry_entry tr:last-child th,
  .hprc-form-card .entry_entry tr:last-child td{ border-bottom: none; padding-bottom: 0; }
  .hprc-form-card .entry_entry th{
    width: 12em;
    padding-right: 1.2em;
  }
  .hprc-form-card .entry_entry th p{ padding-top: .6em; }
}

/* =====================================================
   デスクトップ (1024px〜)
===================================================== */
@media screen and (min-width: 1024px){
  .hprc-hero{ padding-top: clamp(36px, 3.5vw, 60px); padding-bottom: clamp(40px, 4vw, 72px); }
  .hprc-form-card .entry_entry th{ width: 13em; }
}