/* ============================================================
   KABUKI contact.css（お問い合わせページ専用）
   Figma: node 367:2510（PC）/ 414:3008（SP）
   色・フォント値は必ず tokens.css の var() を参照する。
   tokens.css に無い値（淡色背景・区切り線・CF7 既定出力の上書き等）は
   var() から color-mix() で導出し、根拠をコメントで残す（company.css と同じ方針）。

   接頭辞は p-contact。CF7 の既定出力（wpcf7-*）はテーマ側の
   .p-contact-form__* ラッパー配下で上書きする。
   ============================================================ */

/* ================================================
   p-contact__hero
   Figma: node 367:2510 内 Frame 17（367:2514, y=93〜348）
   会社概要ヒーロー（白背景）と同一構造だが、Contact は黒背景・白文字
   （低解像度俯瞰スクリーンショットで確認。get_metadata は fills を返さないため
   背景色そのものは画面上の目視確認による判断）。
   ================================================ */
.p-contact__hero {
  background-color: var(--color-black);
  /* 2026-07-29 get_design_context で確認: node 367:2514 は bg-[#0d0d0d] のみで
     子要素が直接内包（Frame17 自体に text はぶら下がっていない）。黒背景は確定。 */
}

.p-contact__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 40px 32px;
}

@media (min-width: 768px) {
  .p-contact__hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding-block: 64px 56px;
  }
}

.p-contact__hero-heading-block {
  /* 2026-07-31 SOTA決定: 田中さん提案（Contactのみ「Contact」の右横に
     「お問い合わせ」を横並び）は不採用。全ページ縦積み（英語見出しの下に日本語、
     左揃え）で統一する。従来からメディアクエリでの上書きは存在せず、SP/PCとも
     このcolumn指定のみが効いていたため、意図を明示するため align-items を追加。 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.p-contact__hero-eyebrow {
  /* 2026-07-30 get_design_context（node 414:3014, SP frame内）実値: 14px-Bold。
     旧実装は要確認のままfs-16を据え置いていた（誤り）。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-contact__hero-eyebrow {
    /* get_design_context（node 367:2516）実値: 18px-Bold。PC のみ確認済みのため
       PC ブレークポイントでのみ上書き（SP は要確認・据え置き） */
    font-size: var(--fs-18);
  }
}

.p-contact__hero-title {
  /* 2026-07-30 get_design_context（node 367:2515 "Contact", SP frame内）実値:
     32px-Bold（Montserrat）。旧実装は推定でcalc(fs-32*1.5)=48pxとしていたが誤り
     （実測32pxそのもの）。PC側の96px（fs-48*2）は同ノードのPC側実測と一致済みのため
     変更なし。 */
  font-size: var(--fs-32);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-contact__hero-title {
    font-size: calc(var(--fs-48) * 2);
  }
}

.p-contact__hero-tagline {
  /* 2026-07-30 get_design_context（node 414:3015, SP frame内）実値: 14px-Bold
     （Noto Sans JP, leading 1.6）。旧実装はfs-16・weight未指定（＝normal）だった。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: var(--color-white);
  max-width: 420px;
}

@media (min-width: 768px) {
  .p-contact__hero-tagline {
    /* get_design_context（node 367:2518）実値: 22px-Bold（Noto Sans JP）。
       PC のみ確認済みのため PC ブレークポイントでのみ上書き（SP は要確認・据え置き） */
    font-size: var(--fs-22);
    font-weight: var(--fw-bold);
  }
}

/* ================================================
   p-contact__form-section
   Figma: node 367:2510 内「お問い合わせフォーム」見出し（367:2689, y=388）+
   フィールド群（367:2694 会社名 〜 367:2706 お問い合わせ内容, y=521〜1439）
   ================================================ */
.p-contact__form-section {
  background-color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-contact__form-section {
    padding-block: 56px;
  }
}

.p-contact__form-heading {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .p-contact__form-heading {
    font-size: var(--fs-32);
    margin-bottom: 32px;
  }
}

.p-contact__form {
  max-width: 670px; /* Figma: PC 入力欄実測幅 670px（Frame 397〜402） */
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-contact__form {
    /* 2026-07-29 get_metadata（node 367:2510）実測: ラベル列 x270〜入力列 x1170 = 900px
       （ラベル列230px + 入力列670px、列間の追加ガターなし） */
    max-width: 900px;
  }
}

/* ---- CF7 既定出力のリセット ---- */
.p-contact__form .wpcf7-form p {
  margin: 0;
}

.p-contact__form .wpcf7-form-control-wrap {
  display: block;
}

/* ---- フィールド共通 ---- */
.p-contact-form__field {
  /* 2026-07-30 get_metadata（node 414:3008, SP frame）実測: フィールド間隔20px
     （Frame403〜408の各y差分、5箇所とも一致）。旧実装は要確認のままcompany.css等と
     同じ24pxを据え置いていた。PC（min-width:768px）は40pxで別途上書きのため非破壊。 */
  margin-bottom: 20px;
}

.p-contact-form__label {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  margin-bottom: 8px;
}

.p-contact-form__required {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  /* get_design_context（node 414:2646 他 Tag インスタンス5点）実値: 10px-Bold。
     2026-07-29 tokens.css に --fs-10 追加のため反映。 */
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  line-height: 1;
  /* 2026-07-29 get_design_context で確認: 淡色バッジではなく塗り#DA0000+白文字の
     ソリッドピル（旧実装は反転していた。company.css の Hero 反転と同種の誤り） */
  color: var(--color-white);
  background-color: var(--color-red);
  border-radius: var(--radius-pill);
}

/* 任意バッジ（必須の赤ピルと対になる控えめなグレーピル。
   SOTA確定 2026-07-30: 会社名・メール確認を必須化し、電話番号のみ任意表示）。 */
.p-contact-form__optional {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-gray-text);
  background-color: var(--color-gray);
  border-radius: var(--radius-pill);
}

.p-contact-form__field input[type="text"],
.p-contact-form__field input[type="email"],
.p-contact-form__field input[type="tel"],
.p-contact-form__field textarea {
  width: 100%;
  padding: 16px 20px;
  font-size: var(--fs-16);
  font-family: var(--font-jp);
  color: var(--color-black);
  /* 2026-07-29 get_design_context 実値: #F7FBF9（tokens.css --color-bg-section） */
  background-color: var(--color-bg-section);
  border: 1px solid var(--color-gray);
  border-radius: 8px;
}

.p-contact-form__field input::placeholder,
.p-contact-form__field textarea::placeholder {
  color: var(--color-gray-text);
}

.p-contact-form__field input:focus,
.p-contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-black);
}

.p-contact-form__field--textarea textarea {
  min-height: 160px;
  resize: vertical;
}

/* 会社名フィールドの「個人の方は…」ヒント。
   2026-07-31 レビュー反映: PCの2カラム化（label 230px＋右カラム flex:1）を
   崩さないよう、入力欄とヒントを .p-contact-form__field-control でひとまとめにし、
   右カラム側の単一フレックス子要素として扱う（下記 768px ブロックで flex:1 を付与）。 */
.p-contact-form__hint {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-12);
  color: var(--color-gray-text);
}

/* お問い合わせ内容（最終フィールド）→ 同意チェックの間隔。
   SP の通常フィールドは 20px だが、Figma SP 実測（node 414:3008）は 40px。
   PC は .p-contact-form__field の 40px 一律が効くため非破壊。2026-07-30 SOTA確認で調整。 */
.p-contact-form__field--textarea {
  margin-bottom: 40px;
}

/* 種別（ラジオ）フィールドの直後には区切り線を挟むため、通常フィールドより
   広い間隔が必要。2026-07-30 get_metadata（SP node 414:3008）実測: ラジオ最終行
   下端(800)→区切り線(840)→会社名上端(880)で40px+40px=80px。通常フィールド間の
   20pxとは別に、ラジオフィールド自身のmargin-bottomを40pxに引き上げて再現する
   （区切り線側のpadding-top:40pxと合わせて計80px）。PC（40px一律）は元々合致
   済みのため非破壊。 */
.p-contact-form__field--radio {
  margin-bottom: 40px;
}

/* ---- 2カラム化（ラベル列左・入力列右） ----
   2026-07-29 get_metadata（node 367:2510）実測:
   ラベル列 x270-500（230px）/ 入力列 x500-1170（670px）、列間の追加ガターなし。
   単一行フィールド（会社名・お名前・メール・メール確認・電話）はラベルが入力欄と
   垂直中央揃え（例: 会社名ラベル y845-871・入力欄 y825-891 で中心一致）。
   種別（ラジオ）・お問い合わせ内容（テキストエリア）は複数行ブロックのため
   ラベルは先頭揃え（例: 種別ラベル y521 は RadioGroup 1行目 y504-570 と中心が一致）。
   SP（〜767px）は1カラム縦積みを維持するため base の記述は変更しない。 */
@media (min-width: 768px) {
  .p-contact-form__field {
    display: flex;
    align-items: center;
    /* Figma実測: ラベル行間隔106px − 入力欄高さ66px = 40px */
    margin-bottom: 40px;
  }

  .p-contact-form__field--radio,
  .p-contact-form__field--textarea,
  .p-contact-form__field--with-hint {
    /* --with-hint（会社名）: 入力欄の下にヒント文が付くぶん高さが増えるため、
       他の単一行フィールドと同じ中央揃えではなく、ラベルを入力欄の先頭に揃える。 */
    align-items: flex-start;
  }

  .p-contact-form__field .p-contact-form__label {
    flex: 0 0 230px;
    width: 230px;
    margin-bottom: 0;
  }

  .p-contact-form__field > .wpcf7-form-control-wrap,
  .p-contact-form__field > .p-contact-form__radio-group,
  .p-contact-form__field > .p-contact-form__field-control {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ---- 種別（ラジオ・チップ2列） ---- */
.p-contact-form__radio-group .wpcf7-form-control.wpcf7-radio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .p-contact-form__radio-group .wpcf7-form-control.wpcf7-radio {
    grid-template-columns: 1fr 1fr;
    /* get_metadata 実測（RadioGroup インスタンス6点の座標差分）:
       行間 20px（y=590-570, 一部 22px の誤差あり）/ 列間 28px（x=848-820）。
       SP は未確認のため base の gap:12px は据え置き、PC のみ上書き。 */
    row-gap: 20px;
    column-gap: 28px;
  }
}

.p-contact-form__radio-group .wpcf7-list-item {
  margin: 0;
  display: block;
}

.p-contact-form__radio-group .wpcf7-list-item label {
  display: flex;
  align-items: center;
  /* 2026-07-30 get_design_context（RadioGroupコンポーネント, node 414:3193 SP側
     インスタンス）実値: gap 10px。旧実装は要確認のまま12pxを据え置いていた。 */
  gap: 10px;
  padding: 16px 20px;
  border: 1px solid var(--color-gray);
  border-radius: 8px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .p-contact-form__radio-group .wpcf7-list-item label {
    /* get_design_context（node 414:2818・414:2903 の2インスタンスで一致確認）実値:
       gap 10px / border-radius 5px。
       2026-07-30 再確認: get_metadata で RadioGroup 全6インスタンスの内側フレーム
       （Frame 381, x=15固定・hug幅）を比較すると、幅は278/252/252/250/170/122と
       テキスト長に応じてバラバラ（=右側は固定paddingではなく、320px固定ボックス内で
       左詰めhugした残り空間）。旧実装のpadding-right:39pxは最長テキスト
       「AI-Drivenデジタルマーケティング」チップの必要幅（278px相当）を下回り、
       実ブラウザでチップ内テキストが2行に折り返ってしまっていた（Figmaは1行）。
       右paddingを15pxに縮小し1行に収まるよう修正。 */
    gap: 10px;
    padding: 17px 15px 20px 15px;
    border-radius: 5px;
  }
}

.p-contact-form__radio-group input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-red);
}

.p-contact-form__radio-group .wpcf7-list-item-label {
  font-size: var(--fs-16);
  color: var(--color-black);
}

/* チェック中のチップ強調（:has 対応ブラウザのみ。未対応でも機能上問題なし） */
.p-contact-form__radio-group .wpcf7-list-item:has(input:checked) label {
  border-color: var(--color-red);
  /* 2026-07-29 get_design_context 実値: #F7FBF9（tokens.css --color-bg-section） */
  background-color: var(--color-bg-section);
}

/* ---- 種別ブロックと以降のフィールドを分ける区切り線 ----
   2026-07-30 get_metadata（node 367:2510, PC）で確認: 種別ラジオグループの直後に
   横罫線 "Vector 84"（node 414:2747, y=784, width=900, height=0）が存在する。
   ラジオグループ最終行の下端（y=744）から40px、次フィールド（会社名, y=825）の
   上端まで41pxとほぼ均等な間隔で、フォーム全幅（ラベル列+入力列=900px）に渡る。
   2026-07-30 get_metadata（node 414:3008, SP）で同一の罫線が存在することを確認
   （node 702:3600 "Vector 84", y=840, width=353）。ラジオ最終行下端(800)から40px、
   次フィールド（会社名, y=880）上端まで40pxとPC同様の間隔。旧実装はPCのみに
   限定していたため、SPで区切り線が欠落していた（要修正の実バグ）。
   CF7 のフォーム構造（HTML）は変更せず、種別フィールドの直後にくる最初の
   フィールドに border-top を付与して再現する（ベース=SP・PC共通）。 */
.p-contact-form__field--radio + .p-contact-form__field {
  border-top: 1px solid var(--color-gray);
  padding-top: 40px;
}

/* ---- プライバシーポリシー同意 ---- */
.p-contact-form__acceptance {
  /* 同意チェック → 送信ボタンの間隔。Figma SP 実測（node 414:3008）は約 40px。
     PC も同傾向のため 40px に統一（旧 32px）。2026-07-30 SOTA確認で調整。 */
  margin-bottom: 40px;
}

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

.p-contact-form__acceptance label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-16);
  color: var(--color-black);
  cursor: pointer;
}

.p-contact-form__acceptance input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  /* 2026-07-29: get_design_context（node 414:2975/414:2976）実値は border 1px #0d0d0d,
     radius 2px（未チェック状態）。ネイティブ appearance:auto の checkbox は
     border/border-radius を無視する（Chrome）ため appearance:none にし、
     自前で枠線・角丸・チェックマークを描画する。 */
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  border: 1px solid var(--color-black);
  border-radius: 2px;
  background-color: var(--color-white);
  cursor: pointer;
}

.p-contact-form__acceptance input[type="checkbox"]:checked {
  background-color: var(--color-black);
  border-color: var(--color-black);
}

.p-contact-form__acceptance input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

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

.p-contact-form__acceptance a {
  color: var(--color-red);
  text-decoration: underline;
}

/* ---- 送信ボタン ---- */
.p-contact-form__submit {
  /* 2026-07-31 田中さんレビュー反映: 送信中に CF7 が自動挿入する
     .wpcf7-spinner がボタンの隣にフレックス子要素として並ぶと、
     「ボタン＋スピナー」全体が justify-content:center されてしまい
     ボタン自体が中心から左にズレて見える。position: relative にした上で
     幅をボタンに fit させ、スピナーは absolute で通常のフローから外し
     レイアウト幅の計算に含めないことで、ボタンを常に真の中央に保つ。 */
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

.p-contact-form__submit .wpcf7-form-control.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 197px;
  /* 2026-07-29 get_design_context（node 694:3551 "Button_ViewMore_CaseStudy"）実値:
     子要素は中央寄せテキストのみで矢印アイコンは存在せず、padding は四辺均等 20px。
     旧実装は矢印付き・非対称paddingだったため確定版に合わせ修正。 */
  padding: 20px;
  font-family: var(--font-jp);
  /* get_design_context 実値: 14px-Bold（Noto Sans JP） */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background-color: var(--color-black);
  /* get_design_context 実値: border 1px solid #E5E5E5 */
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.p-contact-form__submit .wpcf7-spinner {
  /* 通常のフロー（フレックス子要素としての幅）から外し、ボタン中央配置の
     計算に影響しないようにする。ボタンのすぐ右に絶対配置で表示。 */
  position: absolute;
  top: 50%;
  left: 100%;
  margin: 0 0 0 12px;
  transform: translateY(-50%);
}

/* ---- CF7 送信結果・バリデーションエラー ---- */
.p-contact__form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-14);
  color: var(--color-red);
}

.p-contact__form .wpcf7-response-output {
  margin-top: 24px;
  padding: 16px 20px;
  font-size: var(--fs-14);
  border: 1px solid var(--color-gray);
  border-radius: 8px;
}

.p-contact__form .wpcf7-form.sent .wpcf7-response-output {
  color: var(--color-black);
  border-color: var(--color-black);
}

.p-contact__form .wpcf7-form.invalid .wpcf7-response-output,
.p-contact__form .wpcf7-form.failed .wpcf7-response-output,
.p-contact__form .wpcf7-form.spam .wpcf7-response-output {
  color: var(--color-red);
  border-color: var(--color-red);
}

/* ================================================
   p-contact__other（その他のご連絡方法・黒帯）
   Figma: node 367:2510 内 Frame 509（471:2420, y=1870〜2101）/
   SP: 414:3008 内 Group 145（471:2421, y=1919〜2208）
   ================================================ */
.p-contact__other {
  background-color: var(--color-black);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-contact__other {
    padding-block: 56px;
  }
}

.p-contact__other-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 549px; /* Figma 実測（Frame 509 幅549px） */
  margin-inline: auto;
  text-align: center;
}

.p-contact__other-heading {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

.p-contact__other-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-contact__other-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-white);
}

.p-contact__other-icon svg {
  width: 100%;
  height: 100%;
}

.p-contact__other-label {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

.p-contact__other-email {
  font-size: var(--fs-18);
  color: var(--color-white);
}

/* PC（KABUKI_Contact_PC）で get_design_context により確認した値のみ上書き。
   SP（414:3008）は今回未確認のため base 値を据え置く。 */
@media (min-width: 768px) {
  .p-contact__other-heading {
    /* get_design_context（node 400:1645）実値: 32px-Bold（旧実装は24pxで反転） */
    font-size: var(--fs-32);
    /* Figma: 見出し→アイコン行の間隔は40px、アイコン行→メールの間隔は20px
       （2段のflexで別gapを持つ構造）。既存HTMLはフラットな3兄弟+一律gap:20pxの
       ため、見出しにのみ margin-bottom を足して40pxを再現（構造・クラスは不変）。 */
    margin-bottom: 20px;
  }

  .p-contact__other-item {
    /* get_design_context（node 414:3007）実値: gap 14px */
    gap: 14px;
  }

  .p-contact__other-icon {
    /* get_design_context（node 414:2998）実値: 48x48（旧実装は32x32） */
    width: 48px;
    height: 48px;
  }

  .p-contact__other-label {
    /* get_design_context（node 414:2987）実値: 20px-Bold（旧実装は16px） */
    font-size: var(--fs-20);
  }

  .p-contact__other-email {
    /* get_design_context（node 414:2990）実値: Montserrat Bold 48px, lh 1.5。
       font-family/weight/line-height は .u-font-en 併用で対応（page-contact.php）。
       旧実装は18px・欧文フォント未指定だった。
       親 .p-contact__other-inner の max-width:549px は Figma実測だが、48px化した
       結果このメールアドレス（22文字）は549px内に収まらず、Figmaのスクリーン
       ショットでは1行表示のため nowrap で折り返しを防止（中央寄せのまま549pxを
       超えて広がる＝視覚的にはFigmaと一致。SPでは base の18pxのまま・nowrap無し
       なので折り返し発生の懸念なし）。 */
    font-size: var(--fs-48);
    white-space: nowrap;
  }
}