/**
 * File page-contact.css
 * Usage: page-contact.php（お問い合わせページ）のスタイル（モバイルファースト）。
 * Design: figma「まーける様 / お問い合わせ」281-4164
 *
 * デザイン実寸（1440px時）
 *   フォームカード 背景 #f5f5f5 / 角丸20px / 内側余白40px / 行間20px
 *   ラベル16px（［必須］は赤）/ 入力欄 幅280px・高さ32px・角丸2px・白背景
 *   注意書き14px（中央寄せ）/ 送信ボタン 幅240px
 *   カード左右に縦組みの「markeru」ロゴ（装飾）
 *
 * フォーム内部のクラス（bl_form_*）は CF7 側のマークアップに合わせている。
 * pages/contact-form-cf7.txt を参照。
*/

/* ================================================
  共通
================================================ */
.ly_contact {
  background: #fff;
  color: var(--c-dark);
  /* clip でないと <main> がスクロールコンテナになりホイールを奪う（main.css .ly_top 参照）*/
  overflow-x: hidden;
  overflow-x: clip;
}
/* コンテナ幅は他の下層ページと同じ（base.css の .ly_cont = 1120px）。
   デザインでもページタイトルは他ページと同じ 160px / 1120px のグリッド上にあり、
   フォーム（カード560px + 左右ロゴ55px + gap80px ≒ 830px）も 1080px の中に収まる。 */

/* ================================================
  ページヒーロー
================================================ */
.bl_contactHero {
  padding-block: 40px 8px;
}

/* ================================================
  フォームまわり
================================================ */
.bl_contactBody {
  padding-block: 40px 56px;
}
.bl_contactForm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
/* 左右の装飾ワードマーク：SPでは非表示。
   ワードマーク（約7:1）を90°回転させて縦組みにする。
   transform はレイアウトに影響しないため、枠は回転後の実寸（55×384）で確保する */
.bl_contactForm_side {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 384px;
  color: var(--c-dark);
}
.bl_contactForm_side svg {
  flex: none;
  display: block;
  width: 384px; /* 回転前の長辺 */
  height: auto;
  transform: rotate(-90deg);
}
.bl_contactForm_side__right svg {
  transform: rotate(90deg);
}

/* フォームカード */
.bl_contactForm_card {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px 20px;
  border-radius: 20px;
  background: var(--c-soft);
}
.bl_contactForm_missing {
  font-size: 0.875rem;
  line-height: 1.8;
  text-align: center;
}

/* ================================================
  フォーム本体（CF7）
================================================ */
.bl_form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* SP：ラベルの下に入力欄 */
.bl_form_row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bl_form_label {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #000;
}
.bl_form_req {
  color: red;
}
.bl_form_field {
  min-width: 0;
}

/* 入力欄。CF7 は入力要素を span.wpcf7-form-control-wrap で包む */
.bl_form_field .wpcf7-form-control-wrap {
  display: block;
}
.bl_form input[type='text'],
.bl_form input[type='email'],
.bl_form input[type='tel'],
.bl_form textarea {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-dark);
  transition: border-color 0.2s ease;
}
.bl_form input[type='text'],
.bl_form input[type='email'],
.bl_form input[type='tel'] {
  height: 32px;
}
.bl_form textarea {
  height: 80px;
  resize: vertical;
}
.bl_form input:focus-visible,
.bl_form textarea:focus-visible {
  outline: none;
  border-color: var(--c-dark);
}

/* reCAPTCHA の注意書き */
.bl_form_note {
  margin-top: 4px;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
  color: #000;
}
.bl_form_note a,
.bl_form_consent a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bl_form_note a:hover,
.bl_form_consent a:hover {
  opacity: 0.6;
}

/* プライバシーポリシー同意 */
.bl_form_consent {
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
  color: #000;
}
.bl_form_consent .wpcf7-list-item {
  margin: 0;
}
.bl_form_consent input[type='checkbox'] {
  width: 14px;
  height: 14px;
  margin-right: 2px;
  vertical-align: -1px;
  accent-color: var(--c-dark);
}

/* 同意チェックが入るまで送信ボタンが押せない理由を伝える一言 */
.bl_form_hint {
  margin-top: 4px;
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
  color: var(--c-muted);
}

/* 送信ボタン（el_moreBtn と同じ見た目 / 幅240px + 右に矢印） */
.bl_form_submit {
  position: relative;
  width: min(240px, 100%);
  margin: 4px auto 0;
  border: 1px solid var(--c-dark);
  border-radius: 8px;
  background: #fff;
  transition: background 0.3s ease, color 0.3s ease;
  color: var(--c-dark);
}
.bl_form_submit input[type='submit'] {
  display: block;
  width: 100%;
  padding: 20px 48px 20px 20px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
/* 矢印（クリックを妨げないよう pointer-events を切る） */
.bl_form_submit::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  pointer-events: none;
}
.bl_form_submit::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.bl_form_submit:hover {
  background: var(--c-dark);
  color: #fff;
}
/* 同意チェック未了で送信不可の間は、押せないことが見た目で分かるようにする
   （CF7本体が同意チェックボックス未チェックの間 submit を disabled にする仕様） */
.bl_form_submit:has(input:disabled) {
  opacity: 0.4;
}
.bl_form_submit:has(input:disabled):hover {
  background: #fff;
  color: var(--c-dark);
}
.bl_form_submit input[type='submit']:disabled {
  cursor: not-allowed;
}
/* 送信中スピナー */
.bl_form_submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: -32px;
  margin: 0;
  transform: translateY(-50%);
}

/* CF7 のバリデーション表示 */
.bl_form .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #d32f2f;
}
.bl_form input.wpcf7-not-valid,
.bl_form textarea.wpcf7-not-valid {
  border-color: #d32f2f;
}
.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  border-width: 1px;
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: center;
}

/* ================================================
  タブレット以上
================================================ */
@media screen and (min-width: 768px) {
  .bl_contactHero {
    padding-block: 60px 0;
  }
  .bl_contactBody {
    padding-block: 56px 80px;
  }
  .bl_contactForm_card {
    flex: 0 1 auto;
    width: min(560px, 100%);
    padding: 40px;
  }

  /* ラベル左・入力欄右の2カラム。入力欄の左端を揃える */
  .bl_form_row {
    display: grid;
    grid-template-columns: auto 280px;
    align-items: center;
    gap: 17px;
  }
  .bl_form_row__textarea {
    align-items: start;
  }
  .bl_form_label {
    white-space: nowrap;
  }
  /* 注意書き・同意・ボタンはカード幅いっぱいで中央寄せのまま */
  .bl_form_submit {
    margin-top: 0;
  }
}

/* ================================================
  PC（左右の装飾ロゴを表示）
================================================ */
@media screen and (min-width: 1200px) {
  .bl_contactForm {
    gap: 80px;
  }
  .bl_contactForm_side {
    display: flex;
  }
}