/* pages/contact.css — お問い合わせ（固定ページ contact）
   Figma: PORT：contact (node 1208:9733)

   構成：FV（写真＋タイトル）→ ベージュのフォーム帯。フォーム本体は Contact Form 7 の
   出力を Figma に合わせて整形する（.c-form__* は CF7 フォーム本文に置いた自前のHTML、
   .wpcf7-* は CF7 が生成する要素）。全寸法は rem（トークン）で比率縮小に追従させる。 */

/* ==========================================================================
   FV（写真＋タイトル）
   ========================================================================== */
.p-contact-fv {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 35.8125rem; /* Figma実測: 573px（固定高）*/
  overflow: clip;
  /* タイトルは「fixedヘッダー下端〜フォーム帯上端」の領域で上下中央寄せ
     （padding-top でヘッダー重なり分、padding-bottom でフォーム帯の重なり120pxを
     中央計算から除外）。下のフォーム帯は margin -120px で重ねる */
  padding-top: var(--layout-header-height);
  padding-bottom: var(--space-120);
  margin-bottom: calc(var(--space-120) * -1);
}

.p-contact-fv__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p-contact-fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 写真の上の文字を読めるようにする暗幕（Figma: 黒25%）*/
.p-contact-fv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.p-contact-fv__inner {
  position: relative; /* 背景より前面 */
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--layout-content-width);
  padding-inline: var(--layout-gutter);
}

.p-contact-fv__title {
  margin: 0;
  color: var(--color-text-invert); /* #efefef */
  font-size: var(--font-size-display); /* 56px */
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  text-align: center;
  text-shadow: var(--shadow-text-hero);
}

/* ==========================================================================
   フォーム帯（ベージュ・左上120角落とし）
   ========================================================================== */
.p-contact {
  position: relative; /* 配置済みのFV（写真）より前面に描き、角丸の重なりを見せる */
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block: var(--space-120);
  background: var(--color-tertiary-20); /* ベージュ #F4ECE2 */
  border-start-start-radius: var(--radius-2xl); /* 左上120 */
}

.p-contact__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  align-items: center;
  width: 100%;
  max-width: var(--layout-content-width); /* 1200px */
  padding-inline: var(--layout-gutter);
}

.p-contact__lead {
  width: 100%;
  max-width: 44.75rem; /* Figma: 716px */
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-h3); /* 18.29px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  text-align: center;
}

.p-contact__form {
  width: 100%;
  max-width: 60rem; /* Figma: 960px */
}

/* --- メッセージページ（完了 page-thanks.php / 404.php）専用 --------------
   フォームの代わりに見出し＋リード＋戻るボタンだけを載せる帯。
   セクションに .p-contact--message を付けて使う。 */
.p-contact__message-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-align: center;
}

.p-contact__message-action {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 「トップページへ戻る」（9文字）はボタンの Figma 固定幅 228px に収まらないため、
   ここでは内容幅にする（折り返し禁止・元の幅を下限に維持） */
.p-contact__message-action .c-button {
  width: auto;
  min-width: 14.25rem; /* Figma: 228px（c-button の基準幅） */
  white-space: nowrap;
}

/* メッセージページはコンテンツが少なく、縦長の画面ではフッターの下に body の
   白地が見えてしまう。ベージュ帯を伸縮させてフッターを常に画面下端に届かせる */
body:has(.p-contact--message) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body:has(.p-contact--message) #ic-main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.p-contact--message {
  flex: 1 0 auto;
  align-items: center; /* 伸びた帯の中でメッセージを上下中央に */
}

/* ==========================================================================
   フォーム本体（CF7 出力 ＋ 自前のHTML行）
   ========================================================================== */
.p-contact__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24); /* Figma: 行間24 */
}

/* --- 1行（ラベル列 ＋ 入力列）------------------------------------------- */
.c-form__row {
  display: flex;
  gap: var(--space-24);
  align-items: center;
  width: 100%;
}

.c-form__row--textarea {
  align-items: flex-start; /* テキストエリアは上揃え */
}

/* ラベル列（右寄せ・固定幅280）*/
.c-form__label {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-16);
  align-items: center;
  justify-content: flex-end;
  width: 17.5rem; /* Figma: 280px */
}

/* (任意)・(確認用) の注記付きラベルは、名前と注記の間隔が狭い（Figma: 8px。必須バッジ行は16px）*/
.c-form__label:has(> .c-form__badge:not(.c-form__badge--required)) {
  gap: var(--space-8);
}

.c-form__label-text {
  color: var(--color-text);
  font-size: var(--font-size-h3); /* 18.29px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

/* 「必須」バッジ（濃色ピル）*/
.c-form__badge {
  flex-shrink: 0;
  color: var(--color-text);
  font-size: var(--font-size-body); /* 16px（任意・確認用の注記）*/
  font-weight: var(--font-weight-bold);
}

.c-form__badge--required {
  padding: var(--space-2) var(--space-16); /* Figma: py2 / px16 */
  background: var(--color-text); /* #3e3a39 */
  border-radius: var(--radius-full); /* rounded-50 → ピル */
  color: var(--color-white);
  line-height: var(--line-height-body);
}

/* 入力列 */
.c-form__field {
  flex: 1 0 0;
  min-width: 0;
}

/* --- テキスト・メール・電話 入力欄 ------------------------------------- */
.p-contact__form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.p-contact__form input[type="text"],
.p-contact__form input[type="email"],
.p-contact__form input[type="tel"],
.p-contact__form select,
.p-contact__form textarea {
  width: 100%;
  padding: var(--space-16);
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-3); /* 3px */
  box-shadow: var(--shadow-input);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-body); /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.p-contact__form input::placeholder,
.p-contact__form textarea::placeholder {
  color: var(--color-placeholder); /* #dedede */
  opacity: 1;
}

.p-contact__form textarea {
  height: 16.6875rem; /* Figma: 267px */
  resize: vertical;
  line-height: var(--line-height-body);
}

/* --- セレクト（対象施設）----------------------------------------------- */
.p-contact__form .c-form__field--select select {
  padding-block: var(--space-16);
  padding-inline: var(--space-16) var(--space-40); /* 左は他のinputと同じ16。右は矢印ぶん空ける */
  color: var(--color-gray-20); /* #333 */
  /* ネイティブの矢印を消し、Figma書き出しのシェブロン（Vector 1）を敷く */
  appearance: none;
  background-image: url("../../images/contact/select-arrow.svg");
  background-position: right var(--space-8) center; /* Figma: 右端から8px */
  background-size: 0.8384rem auto; /* Figma実寸: シェブロン12×6px＋線幅2px ＝ 13.41×8.12px */
  background-repeat: no-repeat;
}

/* --- ラジオ（お問い合わせ内容 / ご希望のサービス）---------------------- */
/* Figma: ラジオ列は左12/上下8のパディング。 */
.c-form__row--radio .c-form__field {
  display: flex;
  align-items: center;
  padding-block: var(--space-8);
  padding-left: var(--space-12); /* Figma実測: 12px */
}

/* 3等分グリッド：2つのラジオ行（お問い合わせ内容／ご希望のサービス）で列位置を揃える */
.p-contact__form .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24); /* 選択肢間24 */
  align-items: center;
}

.p-contact__form .wpcf7-list-item {
  margin: 0;
}

.p-contact__form .wpcf7-list-item label {
  display: flex;
  gap: var(--space-8); /* 丸とラベルの間8 */
  align-items: center;
  cursor: pointer;
}

.p-contact__form .wpcf7-list-item-label {
  color: var(--color-text);
  font-size: var(--font-size-h3); /* 18.29px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

/* ラジオボタン本体（Figma実測: 29pxの白丸＋内側影のみ。枠線なし。選択時に中心ドット）*/
.p-contact__form input[type="radio"] {
  flex-shrink: 0;
  width: 1.8125rem;  /* Figma: 29px */
  height: 1.8125rem;
  margin: 0;
  appearance: none;
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-radio); /* Figma: 内側影 blur 4px / 黒25% */
  cursor: pointer;
}

.p-contact__form input[type="radio"]:checked {
  /* 中心の塗りドット */
  background-image: radial-gradient(var(--color-text) 0 40%, transparent 45%);
}

.p-contact__form input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* --- 注記（プライバシーポリシー）--------------------------------------- */
.c-form__note {
  width: 100%;
  margin: 0;
  padding-block: var(--space-24);
  color: var(--color-text);
  font-size: var(--font-size-h5); /* 14.22px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  text-align: center;
}

.c-form__note a {
  color: inherit;
  text-decoration: underline;
}

/* --- プライバシーポリシー同意チェックボックス --------------------------- */
.c-form__consent {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 汎用の .wpcf7-form-control-wrap { width:100% } を打ち消し、中央寄せを効かせる */
.c-form__consent .wpcf7-form-control-wrap {
  width: auto;
}

/* チェックボックス本体（ラジオと同じ白地＋内側影。角丸のみ四角） */
.p-contact__form input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.8125rem;  /* ラジオと同寸: 29px */
  height: 1.8125rem;
  margin: 0;
  appearance: none;
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-radio);
  cursor: pointer;
}

.p-contact__form input[type="checkbox"]:checked {
  background-image: url("../../images/contact/check.svg");
  background-position: center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}

.p-contact__form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* --- 送信ボタン --------------------------------------------------------- */
.c-form__submit {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* CF7 の wpautop がボタンを <p> で包むため、その <p> を幅の担い手にする
   （包まれない場合も input 側の width で成立する）。 */
.c-form__submit > p {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 35rem; /* Figma: 560px */
  margin: 0;
}

/* 送信中スピナーはレイアウトに影響させない（ボタン幅を食わないよう絶対配置）*/
.p-contact__form .wpcf7-spinner {
  position: absolute;
  right: 0;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}

.p-contact__form .wpcf7-submit {
  width: 100%;
  max-width: 35rem; /* Figma: 560px */
  height: 4rem; /* Figma: 64px */
  padding-inline: var(--space-24);
  background: var(--color-text); /* #3e3a39 */
  border: 0;
  border-radius: var(--radius); /* 8px */
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--font-size-h2-lead); /* 25.6px */
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition:
    translate var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease,
    opacity var(--transition-fast) ease;
}

/* 統一hover演出（tokens.css 参照）：浮き上がり＋浮き影 */
.p-contact__form .wpcf7-submit:hover {
  opacity: 0.85;
  translate: 0 var(--hover-lift);
  box-shadow: var(--shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .p-contact__form .wpcf7-submit { transition: none; }
}

/* --- CF7 のバリデーション・メッセージ ---------------------------------- */
.p-contact__form .wpcf7-not-valid-tip {
  margin-top: var(--space-4);
  color: var(--color-service-job); /* ローズ系を警告色に流用 */
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
}

.p-contact__form input.wpcf7-not-valid,
.p-contact__form textarea.wpcf7-not-valid,
.p-contact__form select.wpcf7-not-valid {
  box-shadow: var(--shadow-input), 0 0 0 var(--border-width) var(--color-service-job);
}

.p-contact__form .wpcf7-response-output {
  margin: var(--space-24) 0 0;
  padding: var(--space-16);
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius-3);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.p-contact__form .wpcf7-spinner {
  margin: 0 auto;
}

/* ==========================================================================
   SP（狭幅：ラベルを上に積む）
   ========================================================================== */
@media (max-width: 767px) { /* 767px */
  .c-form__row,
  .c-form__row--textarea {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .c-form__label {
    width: 100%;
    justify-content: flex-start;
  }

  /* 縦積みでは flex: 1 0 0（基準高さ0）のままだと入力列が潰れて
     中身がはみ出す（ラジオがラベルに重なる）ため、高さを内容基準に戻す */
  .c-form__field {
    flex: none;
    width: 100%;
  }
}

/* SP追加：FVタイトル縮小・ラジオ行と送信ボタンの調整 */
@media (max-width: 767px) {
  /* SPは固定高をやめ、従来の「上240相当＋タイトル＋下176相当」と同じ高さを min-height で維持
     （padding はヘッダー除外の中央寄せに使うため、高さはここで担保する） */
  .p-contact-fv {
    min-height: calc(var(--space-240) + var(--font-size-h1) * var(--line-height-body) + var(--space-176));
  }

  /* リード文：左寄せ・改行なしで自然に折り返す */
  .p-contact__lead { text-align: left; }
  .p-contact__lead br { display: none; }

  /* 「必須」バッジ：最小サイズに */
  .c-form__badge--required { font-size: var(--font-size-h6); }

  /* セレクト：SPはシェブロンを右端から16pxに */
  .p-contact__form .c-form__field--select select {
    background-position: right var(--space-16) center;
  }

  /* iOS Safari のフォーカス時自動ズーム対策：フォーム部品は実寸16px未満にしない。
     16px は iOS の仕様上の閾値のため生pxで書く（border:1px と同種の機能上の例外） */
  .p-contact__form input[type="text"],
  .p-contact__form input[type="email"],
  .p-contact__form input[type="tel"],
  .p-contact__form select,
  .p-contact__form textarea {
    font-size: max(16px, var(--font-size-body));
  }

  .p-contact-fv__title { font-size: var(--font-size-h1); }

  .c-form__row--radio .c-form__field {
    padding-left: 0;
  }

  .p-contact__form .wpcf7-radio { gap: var(--space-16); }

  .p-contact__form .wpcf7-submit { font-size: var(--font-size-h2-xs); }
}