/* ==========================================================================
   contact.css — CONTACTページ固有スタイル

   下層見出しとフッターは既存共通を使用する。桁は c-lower-content--single、
   2カラムは c-lower-split（どちらも lower-page.css）が持つので、
   このファイルはCONTACT固有のフォームと組版だけを担当する。
   ========================================================================== */

.p-contact__intro {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-y-32) var(--space-x-32);
  min-width: 0;
  padding-right: 10%;
}

.p-contact__lead {
  font-family: var(--font-mincho-m);
  font-weight: normal;
  font-size: var(--fs-32);
  line-height: 2;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

.p-contact__note {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: 2;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  font-feature-settings: "palt" 1;
}

.p-contact__note span,
.p-contact__required {
  color: #d8000b;
}

.p-contact__star {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0 var(--space-x-40);
  overflow: hidden;
  pointer-events: none;
}

/* 濃さは img 側。星の SVG は不透明で、使う側ごとに決める。
   縁のぼかしは tokens.css の --star-mask-gradient（円形マスク）。
   ベタと渡りの比を変えるときは :root の --star-mask-solid を変える
   （要素側へ書いても効かない。理由は tokens.css の該当箇所） */
.p-contact__star img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-mask-image: var(--star-mask-gradient);
  mask-image: var(--star-mask-gradient);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.p-contact__form-wrap {
  min-width: 0;
}

.p-contact__field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-y-24) var(--space-x-24);
  min-width: 0;
  padding-block: var(--space-y-20);
  border: 0;
  background-image: var(--line-dash-x);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 1px;
}

.p-contact__field--choices {
  align-items: center;
}

/* 幅は文字基準（em）。--space-x-* の段に乗せると 1280px以下168px →
   1920px 240px と可変量が大きすぎる。最長の「お問い合わせ種別＋必須マーク」は
   どの幅でも 10.83em で一定なので、余裕を見て 12em を取る
   （1280px以下 154px / 1920px 180px） */
.p-contact__label {
  flex: 0 0 12em;
  width: 12em;
  padding-block: var(--space-y-16);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: 2;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

.p-contact__field--choices .p-contact__label {
  padding-block: 0;
}

.p-contact__required {
  margin-left: var(--space-x-4);
}

.p-contact__control {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: var(--space-y-16) var(--space-x-20);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background-color: #fff;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-15);
  line-height: 2;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

input.p-contact__control {
  height: calc(3 * var(--space-y-20));
}

.p-contact__control::placeholder {
  color: rgba(0, 0, 0, 0.3);
  opacity: 1;
}

/* rows="6" と同じ高さを下限として持つ。CF7 のショートコードへ移すと rows が
   落ちることがあるため、CSS 側にも同じ値を置く。
   1lh = line-height（2em）なので 6lh が6行ぶん。box-sizing が border-box なので
   上下 padding と枠線 1px×2 を足す */
.p-contact__textarea {
  min-height: calc(6lh + 2 * var(--space-y-16) + 2px);
  resize: vertical;
}

.p-contact__choices {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-y-24) var(--space-x-40);
  min-width: 0;
}

.p-contact__choice,
.p-contact__choices .wpcf7-list-item label,
.p-contact__consent,
.p-contact__consent-group .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-y-10) var(--space-x-10);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-15);
  line-height: 2;
  letter-spacing: 0.15em;
  color: var(--color-text);
  cursor: pointer;
  font-feature-settings: "palt" 1;
}

/* 寸法は px 固定。x と y のトークンは縮小率が違う（1280 で横 0.7 / 縦 0.8）ため、
   可変にすると正円・正方形が崩れる */
.p-contact__choice input,
.p-contact__choices .wpcf7-list-item input,
.p-contact__consent input,
.p-contact__consent-group .wpcf7-list-item input {
  appearance: none;
  display: grid;
  flex: 0 0 24px;
  place-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
  cursor: pointer;
}

.p-contact__choice input,
.p-contact__choices .wpcf7-list-item input[type="radio"] {
  border-radius: 50%;
}

.p-contact__choice input::before,
.p-contact__choices .wpcf7-list-item input[type="radio"]::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-brand);
  transform: scale(0);
  content: "";
}

.p-contact__choice input:checked::before,
.p-contact__choices .wpcf7-list-item input[type="radio"]:checked::before {
  transform: scale(1);
}

/* 1行のときは中央、折り返したら左揃え。fit-content が max-content と
   利用できる幅の小さいほうを取るので、この2つが1つの指定で両立する。
   flex ではなく block にするのは、本文とリンクが別々の flex アイテムとして
   畳まれて文章が分断されるため。white-space: nowrap も置かない
   （1行に収める指定は fit-content と両立せず、収まらないときに溢れる）*/
.p-contact__recaptcha {
  box-sizing: border-box;
  width: fit-content;
  margin-inline: auto;
  padding-block: var(--space-y-32);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-11);
  line-height: 1.75;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  text-align: left;
}

.p-contact__recaptcha a,
.p-contact__consent-note a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.p-contact__feedback {
  font-family: var(--font-jp);
  font-size: var(--fs-14);
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
}

.p-contact__error {
  margin-top: var(--space-y-32);
  color: #d8000b;
}

.p-contact__success {
  margin-top: var(--space-y-32);
  color: var(--color-brand);
}

.p-contact__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-y-32) var(--space-x-32);
  margin-top: var(--space-y-64);
}

.p-contact__consent-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-y-16) var(--space-x-16);
}

.p-contact__consent-note {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-15);
  line-height: 2;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

/* 中央揃えは見出しだけ。本文は複数行に折り返すので左揃えのまま */
.p-contact__consent-title {
  text-align: center;
}

.p-contact__consent-note > p:not(.p-contact__consent-title) {
  font-size: var(--fs-13);
}

.p-contact__consent input {
  border-radius: 4px;
}

.p-contact__consent {
  line-height: 1.7333;
}

.p-contact__consent input::before {
  width: 14px;
  height: 9px;
  border-bottom: 3px solid var(--color-brand);
  border-left: 3px solid var(--color-brand);
  transform: translateY(-2px) rotate(-45deg) scale(0);
  content: "";
}

.p-contact__consent input:checked::before {
  transform: translateY(-2px) rotate(-45deg) scale(1);
}

.p-contact__submit {
  display: flex;
  align-items: center;
  gap: var(--space-y-16) var(--space-x-16);
  width: var(--space-x-280);
  min-height: var(--space-y-80);
  padding: var(--space-y-16) var(--space-x-36) var(--space-y-16) var(--space-x-40);
  border-radius: 64px;
  background-color: var(--color-brand);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: 1.7;
  letter-spacing: 0.15em;
  color: #fff;
  text-align: left;
  font-feature-settings: "palt" 1;
  /* 同意チェックの切り替えで色が飛ばないよう繋ぐ。押せない状態への
     出入りだけの尺なので、ホバーの --dur とは別に短く取る */
  transition: background-color 0.15s var(--ease);
  /* 膜（::before）を角丸で切る。outline は要素自身のものなので切られない */
  position: relative;
  overflow: hidden;
  /* 白い膜の、透明へ落ちる先端の長さ。膜の幅は 100% + この値 */
  --submit-veil-edge: 80px;
}

/* ホバーで左から右へ流れる白い膜。伸縮させず位置だけ動かすので、先端の
   ぼけ幅は最後まで変わらない。右端まで送り切ると先端が枠外へ出て、
   ボタンは一様な白になる */
.p-contact__submit::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + var(--submit-veil-edge));
  background-image: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.15) var(--submit-veil-edge)
  );
  /* 自分の幅ぶん左へ逃がす＝枠の外 */
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
}

/* 文字と矢印は c-view-more の一式を借りる。箱・重なり・入れ替えの再生規則は
   c-view-more__text / __arrow が持ち、再生の合図は text-swap-hover.js が
   ボタンへ付ける is-text-swap-playing。ここで足すのは、この場所でしか要らない
   幅の伸びと、押せない状態のフェードだけ */
.p-contact__submit-text {
  flex: 1 1 auto;
  transition: opacity 0.15s var(--ease);
}

.p-contact__submit-arrow {
  transition: opacity 0.15s var(--ease);
}

/* 差し替えるのは絵柄だけ（c-back-to-list / c-load-more と同じ作り）*/
.p-contact__submit-arrow::before,
.p-contact__submit-arrow::after {
  -webkit-mask-image: url("../../img/icon-submit-arrow.svg");
  mask-image: url("../../img/icon-submit-arrow.svg");
}

/* 同意にチェックが入るまで押させない。送信自体は required（CF7 化後は CF7 の
   検証）が止めるが、押せる見た目のままだと理由が伝わらないので状態を先に出す。
   CF7 では name が privacy_consent[] になり、チェックボックスの周りに span が
   増えるため、名前は前方一致で、位置関係は :has() の子孫として見る */
.p-contact__actions:has(input[name^="privacy_consent"]:not(:checked)) .p-contact__submit {
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.p-contact__actions:has(input[name^="privacy_consent"]:not(:checked)) .p-contact__submit-text,
.p-contact__actions:has(input[name^="privacy_consent"]:not(:checked)) .p-contact__submit-arrow {
  opacity: 0.5;
}

.p-contact__control:focus-visible {
  border-color: var(--color-brand);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--color-brand);
}

.p-contact__choice input:focus-visible,
.p-contact__consent input:focus-visible {
  border-color: var(--color-brand);
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--color-brand);
}

.p-contact__submit:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

@media (hover: hover) {
  /* 先端のぼけ幅が右の枠外へ出る位置まで送る */
  .p-contact__submit:hover::before {
    transform: translateX(0);
  }

}

/* --- 中間層 + SP 共通（max-width: 1023px）---------------------------------
   リードとフォームの2カラムをやめる。右カラムのフォームは
   ラベル126px（3 × --space-x-60）＋入力欄という固定の内訳を持つので、
   カラム幅が半分になると入力欄が280px台まで痩せ、プレースホルダが切れる
   （調査は docs/tablet-audit.md の V-6）。
   1カラムにすれば1023pxで入力欄が771px、768pxでも530px取れる。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-contact__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-y-120) var(--space-x-120);
  }

  /* 右カラムを見込んだ右余白。1列では不要 */
  .p-contact__intro {
    padding-right: 0;
  }

  /* 星は右カラムのフォームと横に並べるための装飾。1列では置き場所が無い */
  .p-contact__star {
    display: none;
  }
}

/* ==========================================================================
   SP

   下層で唯一、実際に横スクロールが出ていた箇所。原因は入力行で、
   ラベル126px（3 × --space-x-60）と `width: 100%` の入力欄が同じ行に並び、
   合計がカラム幅の倍になっていた。行を縦積みにして解く。

   Contact Form 7 が後から差し込む前提のマークアップは変えない（静的段階では
   JSによるバリデーションを実装しない方針のまま）。余白は決定14に従う。
   ========================================================================== */
@media (max-width: 767px) {
  .p-contact__layout {
    gap: var(--space-y-48) var(--space-x-48);
  }

  /* 1カラム化は中間層と共通（上の1023pxブロック）。ここは組版だけ */
  .p-contact__intro {
    gap: var(--space-y-24) var(--space-x-24);
  }

  .p-contact__star {
    padding: 0 var(--space-x-40);
  }

  /* ラベルを入力欄の上へ */
  .p-contact__field {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-y-16) var(--space-x-16);
    padding-block: var(--space-y-24);
  }

  .p-contact__field--choices {
    align-items: stretch;
  }

  .p-contact__label {
    flex: 0 0 auto;
    width: auto;
    padding-block: 0;
  }

  /* iOS Safariの入力フォーカス時の自動拡大を防ぐ */
  .p-contact__control {
    font-size: 16px;
  }

  .p-contact__choices {
    gap: var(--space-y-16) var(--space-x-24);
  }

  /* チェックと文言が同じ行だと、折り返した2行目がチェックの下へ潜る */
  .p-contact__consent {
    align-items: flex-start;
  }

  /* 流し込みへ戻すのは中間層と共通（上の1023pxブロック）。ここは余白だけ */
  .p-contact__recaptcha {
    padding-block: var(--space-y-24);
  }

}

/* CF7 markup bridge
   - テキスト／テキストエリア: form-control-wrap が flex 子になると
     input の width:100% がラッパーの縮み幅にしか効かない
   - ラジオ: CF7 既定の list-item margin と label 前後の半角スペース、
     および gap: inherit（親に gap が無い）で HTML 原本とずれる */
.p-contact__field > .wpcf7-form-control-wrap {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.p-contact__field > .wpcf7-form-control-wrap .p-contact__control {
  width: 100%;
}

.p-contact__choices .wpcf7-radio,
.p-contact__choices .wpcf7-form-control-wrap {
  display: contents;
}

.p-contact__choices .wpcf7-list-item {
  display: inline-flex;
  margin: 0;
}

/* CF7 ラジオは必須のため「未選択」をデフォルトにし、見た目だけ隠して任意扱いにする。
   visibility:hidden だと flex 上に空きが残るので display:none にする */
.p-contact__choice:has(input[name="referral_source"][value="未選択"]),
.p-contact__choices .wpcf7-list-item:has(input[name="referral_source"][value="未選択"]) {
  display: none;
}

.p-contact__choices .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-y-10) var(--space-x-10);
}

/* CF7 既定: label テキスト前後に content:" " が入る。flex gap と二重になる */
.p-contact__choices .wpcf7-list-item-label::before,
.p-contact__choices .wpcf7-list-item-label::after,
.p-contact__consent-group .wpcf7-list-item-label::before,
.p-contact__consent-group .wpcf7-list-item-label::after {
  content: none;
}

.p-contact__consent .wpcf7-form-control-wrap,
.p-contact__consent .wpcf7-acceptance,
.p-contact__consent .wpcf7-list-item {
  display: contents;
}

/* バリデーションエラー */
.p-contact__control.wpcf7-not-valid,
.p-contact__choices .wpcf7-list-item input.wpcf7-not-valid,
.p-contact__consent input.wpcf7-not-valid {
  border-color: #d8000b;
}

.p-contact__control.wpcf7-not-valid:focus-visible {
  border-color: #d8000b;
  box-shadow: inset 0 0 0 1px #d8000b;
}

.p-contact__choices .wpcf7-list-item input.wpcf7-not-valid:focus-visible,
.p-contact__consent input.wpcf7-not-valid:focus-visible {
  border-color: #d8000b;
  box-shadow: inset 0 0 0 1px #d8000b;
}

.p-contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-y-8);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-13);
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #d8000b;
}

/* 送信失敗時の先頭エラーへ戻す着地用（固定ヘッダー分） */
.p-contact__field,
.p-contact__consent {
  scroll-margin-top: calc(var(--header-height, 80px) + var(--space-y-24));
}

.p-contact-form .wpcf7-response-output {
  display: none;
}