/* ==========================================================================
   Contact Form (Contact Form 7)
   既存のContact Form 7が出力するHTMLに対して、サイトのデザイントーン
  （CSS Variables / スペーシング / .shimaoptics-renewal名前空間）を当てる。
   フォーム項目・バリデーション・送信処理・Turnstile等はCF7本体のまま、
   クラス名の変更は行っていない（grid-container / form-group / input-text は
   既存フォームの実クラス名、wpcf7-* はContact Form 7標準クラス）。
   ========================================================================== */
.shimaoptics-renewal .shimaoptics-renewal-contact-form {
  max-width: 640px;
  margin-inline: auto;
  padding-top: 180px;
  padding-bottom: var(--shimaoptics-renewal-space-xl);
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form {
  display: block;
}

/* ページ本文側（ブロックエディタ）の見出し・リード文を
   既存の .shimaoptics-renewal-section-heading（label/title）と同じ見た目に揃える */
.shimaoptics-renewal .shimaoptics-renewal-contact-form h2.wp-block-heading {
  margin: 0;
  font-size: var(--shimaoptics-renewal-font-size-14-222);
  line-height: 1.8;
  letter-spacing: 0.15em;
  font-weight: 400;
  text-align: center;
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form h1.wp-block-heading {
  margin: 0 0 16px;
  font-family: var(--shimaoptics-renewal-font-family-en);
  font-size: var(--shimaoptics-renewal-font-size-42-667);
  line-height: 1.6;
  font-weight: 200;
  letter-spacing: 0.05em;
  color: var(--shimaoptics-renewal-color-text);
  text-align: center;
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form .page-lead {
  text-align: center;
  padding-bottom: 64px;
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form .grid-container {
  display: flex;
  flex-direction: column;
  gap: var(--shimaoptics-renewal-space-md);
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--shimaoptics-renewal-space-xs);
  margin: 0;
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form .form-group label {
  font-size: var(--shimaoptics-renewal-font-size-14-222);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--shimaoptics-renewal-color-text);
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form input.input-text,
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form-control.wpcf7-text,
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form-control.wpcf7-email,
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form-control.wpcf7-tel,
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form-control.wpcf7-textarea {
  display: block;
  width: 100%;
  margin-top: var(--shimaoptics-renewal-space-xs);
  padding: var(--shimaoptics-renewal-space-sm);
  font-family: inherit;
  font-size: var(--shimaoptics-renewal-font-size-14-222);
  color: var(--shimaoptics-renewal-color-text);
  background-color: var(--shimaoptics-renewal-color-background);
  border: 1px solid var(--shimaoptics-renewal-color-border);
  border-radius: var(--shimaoptics-renewal-radius-sm);
  transition: border-color var(--shimaoptics-renewal-transition-base);
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form-control.wpcf7-textarea {
  min-height: 160px;
  resize: vertical;
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form input.input-text:focus,
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--shimaoptics-renewal-color-primary);
}

/* Turnstileウィジェットの表示位置調整（機能・設定には触れない）
   親要素がp/form-group/grid-containerのいずれでも中央に来るよう、
   ウィジェット自体をfit-content化してmargin-inline:autoで中央揃えにする */
.shimaoptics-renewal .shimaoptics-renewal-contact-form .cf-turnstile {
  width: fit-content;
  margin-top: var(--shimaoptics-renewal-space-xs);
  margin-inline: auto;
}

/* 送信ボタンを横位置中央に配置
   （単独の<p>に包まれて出力されるため、その<p>を中央揃えにする） */
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form p:has(> input.wpcf7-submit) {
  text-align: center;
}

/* .wpcf7-spinnerを絶対配置にして通常のレイアウト幅から外す。
   これをしないと、見えない状態でも幅を占有し続け、
   「ボタン＋スピナー」のまとまりが中央寄せの対象になるため、
   ボタン自体が中心から左にズレて見えてしまう。 */
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 100%;
  margin: 0 0 0 8px;
  transform: translateY(-50%);
}

/* 送信ボタン（既存の.shimaoptics-renewal-buttonと視覚的に揃える） */
.shimaoptics-renewal .shimaoptics-renewal-contact-form input.wpcf7-submit {
  position: relative; /* 隣接する.wpcf7-spinnerの配置基準にする（中央揃えのズレ対策） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  margin-top: var(--shimaoptics-renewal-space-sm);
  padding: var(--shimaoptics-renewal-space-sm) var(--shimaoptics-renewal-space-lg);
  border: none;
  border-radius: var(--shimaoptics-renewal-radius-sm);
  font-family: inherit;
  font-size: var(--shimaoptics-renewal-font-size-14-222);
  color: var(--shimaoptics-renewal-color-white);
  background-color: var(--shimaoptics-renewal-color-accent);
  cursor: pointer;
  transition: opacity var(--shimaoptics-renewal-transition-base);
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form input.wpcf7-submit:hover {
  opacity: 0.8;
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form input.wpcf7-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

/* バリデーションエラー表示（Contact Form 7標準クラス） */
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--shimaoptics-renewal-space-xs);
  font-size: var(--shimaoptics-renewal-font-size-12-8);
  color: #D64545;
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: #D64545;
}

/* 送信後メッセージ（Contact Form 7標準クラス：sent / invalid / spam / failed / aborted） */
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-response-output {
  margin-top: var(--shimaoptics-renewal-space-md);
  padding: var(--shimaoptics-renewal-space-sm) var(--shimaoptics-renewal-space-md);
  border: 1px solid var(--shimaoptics-renewal-color-border);
  border-radius: var(--shimaoptics-renewal-radius-sm);
  font-size: var(--shimaoptics-renewal-font-size-14-222);
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form.sent .wpcf7-response-output {
  color: var(--shimaoptics-renewal-color-text);
  border-color: var(--shimaoptics-renewal-color-primary);
  background-color: rgba(153, 209, 181, 0.15);
}

.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form.invalid .wpcf7-response-output,
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form.failed .wpcf7-response-output,
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form.aborted .wpcf7-response-output,
.shimaoptics-renewal .shimaoptics-renewal-contact-form .wpcf7-form.spam .wpcf7-response-output {
  color: #D64545;
  border-color: #D64545;
  background-color: rgba(214, 69, 69, 0.08);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .shimaoptics-renewal .shimaoptics-renewal-contact-form {
    /* --shimaoptics-renewal-space-xl と同じ縮小比率（80px→48px）を180pxにも適用 */
    padding-top: 108px;
  }

  .shimaoptics-renewal .shimaoptics-renewal-contact-form h1.wp-block-heading {
    font-size: var(--shimaoptics-renewal-font-size-25-6);
  }

  .shimaoptics-renewal .shimaoptics-renewal-contact-form .page-lead {
    padding-bottom: 32px;
  }

  .shimaoptics-renewal .shimaoptics-renewal-contact-form .grid-container {
    gap: var(--shimaoptics-renewal-space-sm);
  }
}

@media (max-width: 480px) {
  .shimaoptics-renewal .shimaoptics-renewal-contact-form input.wpcf7-submit {
    width: 100%;
    min-width: 0;
  }
}