/*
 * お問い合わせ（/contact/・/contact-company/・/contact/complete/）。12-contact.md の実測値。
 * PC 本体 [0,122 1440×1107] pad 上下 80・縦 gap 40、入力部 700 幅・縦 gap 60。SP は 12 §4 流用案（本文 335・pad 左右 20）。
 * CF7 の既定 CSS（.wpcf7-*）を上書きしてサイトのフォームに揃える（04 §3.12）。
 */
.p-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 20px;
} /* SP の送信ボタン下は Figma 40（pp3 D3 C1） */
@media (min-width: 768px) { .p-contact { padding: 80px 20px; } }

/* ---------- 手順表示 §2.1（207×40、横 gap 8、矢印 24） ---------- */
.p-contact-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-contact-steps__item {
  display: flex;
  flex-direction: column; /* 日本語の下に英語（UX r4 L1）。高さ 40px のまま 19.6+14+枠 2 = 35.6px に収まる */
  flex: 0 1 207px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-secondary);
  border-radius: 4px;
  color: var(--jn-color-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
/* 会員登録の member-form.css の .c-progress__en と同じ指定（お問い合わせ画面では member-form.css を読まないため） */
.p-contact-steps .c-progress__en { font-size: 11px; font-weight: 400; line-height: 14px; letter-spacing: 0; }
.p-contact-steps__item.is-current { background: var(--jn-color-secondary); color: var(--jn-color-white); }
.p-contact-steps__sep { display: flex; flex: none; color: var(--jn-color-secondary); }
.p-contact-steps__arrow { width: 24px; height: 24px; }
/* SP の矢印は 16×16（06 3 段版 225:78290。pixel-triage A21） */
@media (max-width: 767px) { .p-contact-steps__arrow { width: 16px; height: 16px; } }

/* ---------- 入力部 §2.2（700 幅、縦 gap 60） ---------- */
.p-contact__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 700px;
}
@media (min-width: 768px) { .p-contact__body { gap: 60px; } }
.p-contact__heading { font-size: 18px; }
@media (min-width: 768px) { .p-contact__heading { font-size: 20px; } }
.p-contact__heading-en { display: block; margin-top: 2px; color: var(--jn-color-text); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.05em; }
.p-contact__pen { color: var(--jn-color-primary); }

.p-contact .wpcf7 { width: 100%; }
.p-contact .wpcf7-form { display: flex; flex-direction: column; gap: 40px; margin: 0; }
@media (min-width: 768px) { .p-contact .wpcf7-form { gap: 60px; } }
.p-contact .wpcf7-form > .hidden-fields-container,
.p-contact .wpcf7-form > div:first-child:empty { display: none; }

/* SP の項目間は 40（06 SP 中身 gap 40。pixel-triage A22） */
.p-contact__fields { display: flex; flex-direction: column; gap: 40px; }
/* Figma の行送りは 112（ラベル 22.4＋8＋欄 42＝72.4 なので gap は 39.6 で 112 に合わせる） */
@media (min-width: 768px) { .p-contact__fields { gap: 39.6px; } }
.p-contact__field { display: flex; flex-direction: column; gap: 8px; }
.p-contact__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--jn-color-text-strong);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
/* ラベルの英語併記（会員登録の .c-mf__en に揃える） */
.p-contact__label-en {
  color: var(--jn-color-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}
/* CF7 が無効なときの案内（template-parts/contact/form.php） */
.p-contact__unavailable {
  margin: 0;
  padding: 24px 16px;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-border);
  border-radius: 4px;
  color: var(--jn-color-text-strong);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  overflow-wrap: anywhere;
}
.p-contact__unavailable [lang="en"] { display: block; margin-top: 8px; color: var(--jn-color-text); font-size: 12px; line-height: 16.8px; }
.p-contact__badge {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 2px 8px;
  background: var(--jn-color-primary);
  border-radius: 4px;
  color: var(--jn-color-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.p-contact__badge--optional {
  padding: 1px 7px;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-primary);
  color: var(--jn-color-primary);
  font-weight: 500;
}

.p-contact .wpcf7-form-control-wrap { display: block; }
.p-contact .wpcf7-text,
.p-contact .wpcf7-email,
.p-contact .wpcf7-tel,
.p-contact .wpcf7-textarea {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 8px 16px;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-border);
  border-radius: 4px;
  color: var(--jn-color-text-strong);
  font: inherit;
  font-size: 16px;               /* SP でも 16px（iOS のズーム防止） */
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.p-contact .wpcf7-textarea { height: 200px; border-color: #DDDDDD; resize: vertical; }
/* SP はタップ領域 44px 以上（UX L8） */
@media (max-width: 767px) {
  .p-contact .wpcf7-text,
  .p-contact .wpcf7-email,
  .p-contact .wpcf7-tel { height: auto; min-height: 44px; }
}
.p-contact .wpcf7-form-control::placeholder { color: #CCCCCC; opacity: 1; }
.p-contact .wpcf7-form-control:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 1px; }
.p-contact .wpcf7-not-valid:not(.wpcf7-acceptance) { border-color: var(--jn-color-primary); background: var(--jn-color-primary-soft); }
.p-contact .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: var(--jn-color-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- 同意 §2.3（チェック 24、gap 10、16/28.8） ---------- */
.p-contact__consent { display: flex; justify-content: center; }
/* 同意の行は 679 幅・中央（12 §2.3 [380,1004 679×29]。pixel-triage A20） */
.p-contact__consent .wpcf7-form-control-wrap { display: block; max-width: 679px; }
.p-contact__consent .wpcf7-list-item { display: block; margin: 0; }
/* base.css の word-break: keep-all だと SP でリンク・読点ごとに細切れ（4 行）になる。Figma どおり通常の折返し（pixel-compare-b2 M9） */
.p-contact__consent .wpcf7-list-item-label { min-width: 0; word-break: normal; line-break: strict; }
.p-contact__consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--jn-color-text-strong);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.p-contact__consent input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2.4px 0 0;             /* 行高 28.8 の中央に 24 */
  appearance: none;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-border);
  border-radius: 2px;
  cursor: pointer;
}
.p-contact__consent input[type="checkbox"]:checked {
  background: var(--jn-color-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-color: var(--jn-color-secondary);
}
.p-contact__consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }
.p-contact__consent .wpcf7-not-valid input[type="checkbox"] { border-color: var(--jn-color-primary); }
.p-contact__consent a { color: var(--jn-color-contact); text-decoration: underline; text-underline-offset: 2px; }
.p-contact__consent .wpcf7-not-valid-tip { text-align: left; }

/* ---------- 送信ボタン §2.4（艶ボタン 400×56、18/19.8 ls0.9） ---------- */
.p-contact__submit.c-btn-gloss {
  position: relative;
  align-self: center;
  width: 400px;
  max-width: 100%;
}
.p-contact__submit-btn {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 20px;
  background: var(--jn-gloss);
  border: 0;
  border-radius: var(--jn-radius-pill);
  color: var(--jn-color-white);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.p-contact__submit-btn:disabled { cursor: progress; opacity: 0.7; }
/* スピナーはボタンの内側右（外に出すと SP で横スクロールが出る: 375 幅で scrollWidth 393 を実測） */
.p-contact__submit .wpcf7-spinner { position: absolute; top: 50%; right: 16px; margin: -12px 0 0; }

.p-contact .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--jn-color-secondary);
  border-radius: 4px;
  color: var(--jn-color-text-strong);
  font-size: 14px;
  line-height: 1.6;
}
.p-contact .wpcf7 form.init .wpcf7-response-output,
.p-contact .wpcf7 form.resetting .wpcf7-response-output,
.p-contact .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.p-contact .wpcf7 form.invalid .wpcf7-response-output,
.p-contact .wpcf7 form.unaccepted .wpcf7-response-output,
.p-contact .wpcf7 form.failed .wpcf7-response-output,
.p-contact .wpcf7 form.spam .wpcf7-response-output {
  background: var(--jn-color-primary-soft);
  border-color: var(--jn-color-primary);
  color: var(--jn-color-primary);
}
/* 送信が長引いたとき・同じ内容の再送を止めたときの案内（page-contact.js が .jn-notice を付ける。失敗ではないので中立色） */
.p-contact .wpcf7 form.jn-notice .wpcf7-response-output {
  display: block;
  background: none;
  border-color: var(--jn-color-secondary);
  color: var(--jn-color-text-strong);
}
/* 案内中はボタンが押せる状態に戻っているので、スピナーを止める（CF7 の form.submitting では visible のまま。UX r3 H1） */
.p-contact .wpcf7 form.jn-notice .wpcf7-spinner { visibility: hidden; }

/* ---------- 完了 §3.12.1（12 §4 流用案） ---------- */
.p-contact-complete__text { color: var(--jn-color-text-strong); font-size: 16px; line-height: 1.8; letter-spacing: 0.05em; }
.p-contact-complete__text p { margin: 0; }
.p-contact-complete__text .p-contact-complete__en { margin-top: 4px; color: var(--jn-color-text); font-size: 14px; line-height: 1.6; }
.p-contact-complete__sub-en { font-size: 14px; font-weight: 400; }
.p-contact-complete__sub { gap: 0.3em; }
.p-contact-complete__actions { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.p-contact-complete__top.c-btn-gloss { width: 400px; }
.p-contact-complete__top .c-btn-gloss__label { font-size: 18px; }
.p-contact-complete__sub {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--jn-color-contact);
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 確認表示（assets/js/page-contact-confirm.js。Figma に確認フレームが無いので会員登録の確認 page-register.css .p-register__confirm の型） ---------- */
/* 手順表示 SP: 各 101×40、矢印 16×16、gap 0（225:78276。3×101＋2×16＝335） */
@media (max-width: 767px) {
  .p-contact-steps { gap: 0; }
  .p-contact-steps__item { flex-basis: 101px; }
}
.p-contact.is-confirm .p-contact__fields,
.p-contact.is-confirm .p-contact__consent { display: none; }
/* 入力表示で出ていた CF7 の入力エラー文は確認表示では出さない（送信後の通信失敗・案内は出す） */
.p-contact.is-confirm .wpcf7 form.invalid .wpcf7-response-output,
.p-contact.is-confirm .wpcf7 form.unaccepted .wpcf7-response-output,
.p-contact.is-confirm .wpcf7 form.spam .wpcf7-response-output { display: none; }
.p-contact-confirm[hidden], .p-contact__back[hidden] { display: none; }
.p-contact-confirm { display: flex; flex-direction: column; gap: 24px; }
.p-contact-confirm__lead { margin: 0; color: var(--jn-color-text-strong); font-size: 16px; line-height: 1.8; letter-spacing: 0.05em; }
.p-contact-confirm__lead-en { display: block; margin-top: 4px; color: var(--jn-color-text); font-size: 14px; line-height: 1.6; letter-spacing: 0; }
.p-contact-confirm__list { margin: 0; border-top: 1px solid var(--jn-color-border); }
.p-contact-confirm__row { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--jn-color-border); }
.p-contact-confirm__label { color: var(--jn-color-text-strong); font-size: 14px; font-weight: 500; line-height: 1.6; }
.p-contact-confirm__label-en { display: block; color: var(--jn-color-text); font-size: 12px; font-weight: 400; line-height: 1.4; }
.p-contact-confirm__value { margin: 0; color: var(--jn-color-text-strong); font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-contact-confirm__empty { color: var(--jn-color-text-muted); }
@media (min-width: 768px) {
  .p-contact-confirm__row { flex-direction: row; gap: 24px; }
  .p-contact-confirm__label { flex: 0 0 240px; }
  .p-contact-confirm__value { flex: 1 1 auto; min-width: 0; }
}
/* 「修正する」（page-register.css .p-register__back と同じ型。タップ領域 44px 以上） */
.p-contact__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 44px;
  min-height: 44px;
  margin-top: -16px; /* フォームの縦 gap（40/60）から詰めて送信ボタンの直下に置く */
  padding: 0 12px;
  background: none;
  border: 0;
  color: var(--jn-color-text);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
@media (min-width: 768px) { .p-contact__back { margin-top: -36px; } }
/* PC の確認表示は縦を詰め、1440×900 で「送信する」「修正する」が一覧と同じ画面に収まるようにする（UX r4 L4。入力表示の gap 60 はそのまま） */
@media (min-width: 768px) {
  .p-contact.is-confirm .wpcf7-form { gap: 32px; }
  .p-contact.is-confirm .p-contact__back { margin-top: -8px; } /* 送信ボタンとの間は入力表示と同じ 24px */
  .p-contact-confirm__row { padding: 12px 0; }
}
.p-contact__back:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }
.p-contact__back:disabled { cursor: progress; opacity: 0.5; }
.p-contact__heading:focus { outline: none; }
.p-contact__heading:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 4px; }

/* お問い合わせ PC の左右あしらい（ティールの霞。Figma 12 `232:73590` / `232:73603`、y=213（ページ上端）から、本体下端で切れる。#00CAC2 実効 15%）。
   素材は検索結果（page-job-archive.css の .p-job-archive::before）と同じ。横位置は Figma 画素で合わせて左 x=-104・右 x=1184（検索結果より 13 左）。.p-contact の上端は 122 なので top 91。
   確認表示・完了表示で本体が伸びても続くよう 980 刻みで繰り返し、はみ出しはこのラッパで clip。SP は Figma に無いため出さない（pp forms H1） */
@media (min-width: 1200px) {
  .p-contact { position: relative; isolation: isolate; overflow: clip; }
  .p-contact::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 91px;
    left: 0;
    width: 100%;               /* 1440 固定の箱だと広い画面で箱の端で霞が縦に切れる（先方指摘 TOP⑦ の横展開）。位置は中央基準 */
    height: 2811px;             /* 980×2＋851 */
    background:
      url("../img/deco-kasumi-teal.svg") calc(50% - 656.5px) 0 / 335px 980px repeat-y,
      url("../img/deco-kasumi-teal.svg") calc(50% + 631.5px) 0 / 335px 980px repeat-y;
    pointer-events: none;
  }
}

/* ハイコントラスト表示（forced-colors）では背景画像のレ点が消えるので、チェック済みの箱だけ色を固定する（UX pp1 M2） */
@media (forced-colors: active) {
  .p-contact__consent input[type="checkbox"]:checked { forced-color-adjust: none; }
}
/* SP（767 以下）は、英語を「/」ごと 1 塊にして「/」だけの行を作らない。inline-block で落ちる先頭の空白は margin で補う。同意文の長い英語は対象外（14 幅点検） */
@media (max-width: 767px) {
  .p-contact__label-en { display: inline-block; margin-inline-start: .3em; }
  .p-contact__consent .p-contact__label-en { display: inline; margin-inline-start: 0; }
}