@charset "UTF-8";
/* ==========================================================================
   contact.css — お問い合わせ（09 contact.html） ページ固有スタイル（p-）
   参照カンプ：comps/pc/09_contact-1〜3_pc_01・02（PCのみ。SPカンプ無し）
   共通トークン＝base.css／共通c-・l-＝common.css。ここはページ固有のみ。
   ヒーロー大見出し＝common .c-heading--page／送信ボタン＝common .c-btn--arrow を使用。
   CF7前提：3フォーム＝独立フォーム、タブ切替はJS（common.js §8）。詳細は handoff_contact.md
   ========================================================================== */

/* ページスコープ変数（他ページ確定で base.css へ昇格）
   タブのアクティブ識別色＝TOP/features 踏襲（青は base の --c-blue） */
.p-contact {
  --ct-blue:  var(--c-blue); /* #2673BC 財務・M&A・事業承継等 */
  --ct-green: #8AC54B;        /* 金融機関様専用 */
  --ct-teal:  #1DA3A2;        /* リクルーティング */
  --ct-placeholder: rgba(0, 0, 0, .2); /* サンプル入力（プレースホルダ）文字色＝#000000 20% */
}

/* --------------------------------------------------------------------------
   ページヒーロー（大見出し＋パンくず。写真無し）
   -------------------------------------------------------------------------- */
.p-contact-hero { padding-block: var(--sp-6) var(--sp-5); }

.p-contact-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-contact-hero .c-breadcrumb { padding-block: var(--sp-3) 0; }

/* --------------------------------------------------------------------------
   フォーム本体：読み幅を内側に寄せる（カンプ：タイトル/罫線より内側）
   -------------------------------------------------------------------------- */
.p-contact-body { padding-block: var(--sp-4) var(--sp-8); }

.p-contact__inner {
  max-width: 1040px;
  margin-inline: auto;
}

/* 区切り線（タブ下・フォーム末尾。privacy 踏襲の #707070） */
.p-contact__rule {
  height: 0;
  border: 0;
  border-top: 1px solid var(--c-line);
}

.p-contact__rule--tabs { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   タブ（3種）：非アクティブ＝白地＋細枠／アクティブ＝識別色で塗り＋白文字
   -------------------------------------------------------------------------- */
.p-contact-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.p-contact-tab {
  /* #tab-recruit 等へアンカー遷移した際、固定ヘッダーに隠れないよう上へ約100px余白を取って着地 */
  scroll-margin-top: 100px;
  padding: 14px 28px;
  border: 1px solid var(--c-gray-light);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-text);
  font-size: var(--fs-base); /* 16px */
  font-weight: 500; /* Medium */
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ホバー＝選択時と同じ塗り（マウスオーバーで選択色をプレビュー） */
.p-contact-tab:hover,
.p-contact-tab.is-active {
  border-color: transparent;
  color: var(--c-white);
}

.p-contact-tab--biz:hover,
.p-contact-tab--biz.is-active     { background: var(--ct-blue); }
.p-contact-tab--bank:hover,
.p-contact-tab--bank.is-active    { background: var(--ct-green); }
.p-contact-tab--recruit:hover,
.p-contact-tab--recruit.is-active { background: var(--ct-teal); }

/* --------------------------------------------------------------------------
   パネル（フォーム）：選択タブのみ表示。JS未動作でも先頭のみ表示（他は hidden 属性）
   -------------------------------------------------------------------------- */
.p-contact-panels { margin-top: var(--sp-12); }

.p-contact-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   フォーム：ラベル（左）＋入力（右）の2カラム。入力は淡背景・枠線なし
   -------------------------------------------------------------------------- */
.p-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.p-contact-form__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-6);
  align-items: start;
}

.p-contact-form__labelwrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  padding-top: 15px; /* 入力欄1行目のテキストとベースラインを合わせる */
}

.p-contact-form__label {
  font-size: var(--fs-base); /* 16px */
  font-weight: 500; /* Medium */
  line-height: 1.5;
}

.p-contact-form__sublabel {
  flex-basis: 100%;
  font-size: .8125rem; /* 13px */
  font-weight: 400;
  color: var(--c-text);
}

/* 必須バッジ（赤・角丸なし） */
.p-contact-form__req {
  flex-shrink: 0;
  padding: 3px 10px;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: .8125rem; /* 13px */
  font-weight: 700;
  line-height: 1.4;
}

.p-contact-form__field { min-width: 0; }

.p-contact-form__input {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 4px;
  background: var(--c-bg-tint);
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.6;
}

/* iPhone（iOS Safari）でキャレットが見えない件（49 §2 → 50 で原因確定）
   原因：CF7 が入力欄を包む span.wpcf7-form-control-wrap が display:inline（position:relative）のままで、
   中の input/textarea がブロック表示＝iOS Safari はこの組み合わせでキャレットを描画しない（実機＋Web インスペクタで確認）。
   対処：テキスト系入力欄（.p-contact-form__field 配下＝text/email/tel/textarea）を包む span だけブロック化。
   同意チェック（.p-contact-form__agree 配下の acceptance）は対象外＝文言との横並びを維持（下の agree 用ルールが担当）。
   郵便番号欄は input 自身の max-width（--zip）で幅が決まるため見た目は不変。
   ※49 §2 で入れた caret-color／text-spacing-trim:normal／user-select:text は原因ではなかったため撤去 */
.p-contact-form__field > .wpcf7-form-control-wrap { display: block; }

.p-contact-form__input::placeholder {
  color: var(--ct-placeholder); /* #000000 20% */
  font-size: var(--fs-base); /* 16px */
  font-weight: 400; /* Regular */
}

.p-contact-form__input:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

.p-contact-form__textarea {
  min-height: 240px;
  resize: vertical;
}

/* 住所：〒（小）＋都道府県市区（全幅）の縦積み */
.p-contact-form__field--address {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.p-contact-form__input--zip { max-width: 200px; }

.p-contact-form__help {
  margin-top: var(--sp-1);
  font-size: .875rem; /* 14px */
  color: var(--c-gray);
}

/* 各フォーム最上部（左端）に置く必須の案内文 */
.p-contact-form__reqnote {
  margin-top: var(--sp-4);    /* 32px：先頭項目の位置から少し下げる */
  margin-bottom: var(--sp-3); /* 24px：先頭項目との間隔 */
  font-size: .875rem; /* 14px */
  color: var(--c-gray);
}

/* --------------------------------------------------------------------------
   フォーム末尾：区切り線＋同意文＋チェック＋送信ボタン（中央寄せ）
   -------------------------------------------------------------------------- */
.p-contact-form__foot { margin-top: var(--sp-6); }

.p-contact-form__foot .p-contact__rule { margin-bottom: var(--sp-6); }

.p-contact-form__agreebox { text-align: center; }

.p-contact-form__note {
  font-size: var(--fs-base);
  line-height: 1.9;
}

.p-contact-form__note a {
  color: var(--c-blue);
  text-decoration: none; /* アンダーライン不要（色のみで区別） */
}

.p-contact-form__note a:hover { opacity: .7; }

.p-contact-form__agree {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-weight: 700;
  cursor: pointer;
}

.p-contact-form__agree input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-blue);
}

/* 同意ラベル末尾の必須表示（42 §6・FN 9/2）：「※」を廃止し、項目名横と同じ「必須」バッジ（.p-contact-form__req）を流用。
   バッジは CF7 フォーム本文（ID 45/46/47）内に配置。ここではテキストと同じ行に乗せる調整のみ */
.p-contact-form__agree-text .p-contact-form__req {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

/* ハニーポット（53・inc/cf7-spam.php が挿入）：画面外に配置（display:none は使わない＝ボットが無視するため）。
   aria-hidden / tabindex=-1 / autocomplete=off は HTML 側 */
.p-contact-form__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile ウィジェット（53 §6・CF7 が出力する div.wpcf7-turnstile.cf-turnstile。中に Cloudflare の iframe）
   同意チェックの直下に詰まって出るため、チェックボックス同士の間隔（.p-contact-form__agree の margin-top＝--sp-3）と同じ余白を上に取る。
   左揃え（agreebox の text-align:center を継承しないよう明示）。テーマ色は inc/cf7-spam.php が data-theme="light" を付与 */
.p-contact-form .wpcf7-turnstile {
  margin-top: var(--sp-3);
  text-align: left;
}

.p-contact-form__submit {
  margin-top: var(--sp-8);
  text-align: center;
}

.p-contact-form__response {
  margin-top: var(--sp-4);
  text-align: center;
  color: var(--c-blue);
}

.p-contact-form__response:empty { margin-top: 0; }

/* ==========================================================================
   CF7 対応の追記（11_wp_phase2_cf7.md）。既存ルールは変更せずここで吸収する
   ========================================================================== */

/* 送信ボタン：CF7 の [submit] は <input>＝::after が描けないため、
   矢印・枠・塗りは ラッパー span（.c-btn--arrow）側が担い、input は透明な当たり面にする（11 §2-2） */
.p-contact-form__submit-btn { padding: 0; }

.p-contact-form__submit-btn input[type="submit"] {
  min-width: 280px;
  min-height: 54px; /* .c-btn の 56px − 上下ボーダー2px */
  padding: var(--sp-1) var(--sp-4);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--fs-base);
  letter-spacing: 0;
  cursor: pointer;
  outline: none; /* フォーカス表現は下記 :focus-within（塗り）で担保 */
}

/* キーボードフォーカス：:focus-visible は内側 input に付くため、ラッパーへ :focus-within で同じ見た目を再現 */
.p-contact-form__submit-btn:focus-within {
  opacity: 1;
  background-size: 100% 100%;
  color: var(--btn-text-hover);
}

.p-contact-form__submit-btn:focus-within::after {
  transform: translateY(-50%) translateX(14px);
}

/* CF7 の完了/エラーメッセージ枠：静的の .p-contact-form__response と同じ見た目（11 §4-2） */
.p-contact-form .wpcf7-response-output {
  margin: var(--sp-4) 0 0;
  padding: 0;
  border: 0;
  text-align: center;
  color: var(--c-blue);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  color: var(--c-accent);
}

/* 確認チェック追加（22 §A）でラベルが2つ並ぶため、各ラベルを1行ずつに（inline-flexだと横並びになる）。
   width: fit-content＝クリック領域は従来どおり文言ぶんのまま（行全体に広げない） */
.p-contact-form__agreebox .p-contact-form__agree {
  display: flex;
  width: fit-content;
}

/* CF7スピナー（span.wpcf7-spinner・24×24px）がflexレイアウト幅を取り、送信ボタンだけ他ボタン
   （280px）より横長になるため、絶対配置で幅から除外（23 §B。c-btn--arrow が position:relative）。
   位置＝ボタン内側の右端付近・垂直中央（25 §2。ボタン右外だとSPで画面外＝送信中に見えないため）。
   right: --sp-4(32px)＝矢印意匠（右端の内側25pxまで食い込む）より左・中央揃えテキストの右端
   （右から約60px）より右＝どちらとも重ならない位置 */
.p-contact-form__submit-btn .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: var(--sp-4);
  transform: translateY(-50%);
  margin: 0;
}

/* 送信中（form.submitting はCF7が付与）：ボタンを操作不能＋半透明の見た目に＝連打・二重送信の抑止（26 §A） */
.wpcf7-form.submitting .p-contact-form__submit-btn { pointer-events: none; }

/* 半透明はラッパー自身の opacity ではなく白50%のオーバーレイ（::before）で表現。
   理由：opacity だと子要素のスピナーまで薄くなる（0.75×0.5＝実効0.375）ため、
   スピナーをオーバーレイの手前（z-index）に置いて視認性を維持する＝A-2の「スピナー側を除外」 */
.wpcf7-form.submitting .p-contact-form__submit-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-white);
  opacity: .5;
}

.wpcf7-form.submitting .p-contact-form__submit-btn .wpcf7-spinner { z-index: 1; }

/* 送信完了時（22 §B→23 §C）：is-sent は common.js §15 が成功時のみ付与。
   フォーム全体（応答欄含む）を隠し、完了は .p-contact-complete ブロック側で表示する */
.wpcf7-form.is-sent > * { display: none; }

/* 送信完了ブロック（23 §C）：カンプに無い要素＝既存トークン・既存ボタン意匠のみで構成。
   見出しは単独和文見出しの既存コンポーネントが無い（c-heading__ja は英字とセットの16pxラベル）ため、
   和文見出しトークン --fs-2xl（28→36px＝h2相当）を参照した最小定義 */
.p-contact-complete {
  padding-block: var(--sp-8);
  text-align: center;
}

.p-contact-complete__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
}

.p-contact-complete__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg); /* 18px＝現行メッセージ（16px）より一段上げ */
  /* 43a：改行は br.u-pc-only（テンプレート／JS変換）で制御＝pre-line は廃止（SPで強制改行させない） */
}

.p-contact-complete__btn { margin-top: var(--sp-6); }

/* 完了メッセージ内の改行（メッセージ設定の \n）を反映（wpcf7_autop 無効でも改行が生きるように） */
.p-contact-form .wpcf7-response-output { white-space: pre-line; }

/* 各項目のエラーメッセージ（wpcf7-not-valid-tip）：アクセント色に統一 */
.p-contact-form .wpcf7-not-valid-tip {
  margin-top: 4px;
  color: var(--c-accent);
  font-size: var(--fs-sm);
}

/* 同意チェック：CF7 acceptance のラップspanを挟んでも既存の並びを維持 */
.p-contact-form__agree .wpcf7-form-control-wrap,
.p-contact-form__agree .wpcf7-acceptance,
.p-contact-form__agree .wpcf7-list-item,
.p-contact-form__agree .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
}

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

.p-contact-form__agree .wpcf7-acceptance input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-blue);
}

/* ==========================================================================
   SP（〜767px）：カンプ支給無し。privacy/features の縮退ルールで展開
   ・タブは縦積み全幅／フォームは1カラム（ラベル上・入力下）
   ========================================================================== */
@media (max-width: 767px) {
  /* 同意チェック2項目（Hiroshi指示・2026-09-02）：SPはラベル文言を左揃え（agreebox の text-align:center を継承しない）。
     1つ目の文言は CF7 本文側の br.u-sp-only で「〜ことを／確認しました 必須」に固定 */
  .p-contact-form__agreebox .p-contact-form__agree { text-align: left; }
  .p-contact-form__agreebox .p-contact-form__agree-text {
    text-align: left;
    line-height: 1.5; /* 2行になる確認文言の行間を詰める（本文1.8→1.5＝28.8→24px。Hiroshi指示） */
  }

  .p-contact-hero { padding-block: var(--sp-4) var(--sp-3); }

  .p-contact-body { padding-block: var(--sp-2) var(--sp-6); }

  .p-contact__inner { max-width: none; }

  .p-contact-tabs { flex-direction: column; gap: var(--sp-2); }
  .p-contact-tab { width: 100%; }

  .p-contact-panels { margin-top: var(--sp-8); }

  .p-contact-form { gap: var(--sp-5); }

  .p-contact-form__row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .p-contact-form__labelwrap { padding-top: 0; }

  .p-contact-form__input--zip { max-width: 160px; }
}