/**
 * MW WP Form Integration Styles - Exact styles from MES_LP/index.css
 *
 * このファイルはMES_LP/index.cssのフォームスタイルを
 * MW WP Form用に適用するための調整を含みます。
 */

/* ===================================
   MW WP Formのデフォルトスタイルリセット
   =================================== */

/* MW WP Formが追加するデフォルトマージンを削除 */
.mw_wp_form {
  margin: 0;
  padding: 0;
}

/* MW WP Formのp要素のマージンをリセット */
.mw_wp_form p {
  margin: 0 !important;
  padding: 0 !important;
  display: inline;
}

/* MW WP Formが挿入する余計な要素を無効化 */
.contact-form__header p,
.contact-form__field p,
.contact-form__label p,
.contact-form__input-wrapper p,
.inquiry-form__field p,
.inquiry-form__label p,
.inquiry-form__input-wrapper p,
.form-field p,
.form-label-wrapper p,
.form-input-wrapper p {
  display: contents !important;
}

/* brタグも無効化 */
.mw_wp_form br {
  display: none !important;
}

/* ===================================
   ヒーローセクションレイアウト調整
   =================================== */

/* ヒーローコンテナのフレックス調整 */
.hero__container {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1200px;
}

/* ヒーローコンテンツのレイアウト調整 */
.hero__content {
  flex: 1 1 350px;
  min-width: 0;
}

/* ===================================
   ヒーローセクション用フォーム（.contact-form-wrapper内）
   MES_LP/index.cssからコピー
   =================================== */

/* フォームラッパー背景とレイアウト */
.contact-form-wrapper {
  background-color: var(--color1, #ffffff);
  border-radius: var(--br-12, 12px);
  padding: 32px 48px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  flex: 1 1 400px;
  min-width: 320px;
  max-width: 500px;
  box-sizing: border-box;
}

/* フィールド */
.contact-form-wrapper .form-field {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 16px;
}

/* フィールド間のスペース調整 */
.contact-form-wrapper .form-field-wrapper {
  display: flex;
  flex-direction: column;
  /* gap: 16px; */
}

.contact-form-wrapper .form-field--checkbox {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-16, 16px);
}

/* ラベル */
.contact-form-wrapper .form-label-wrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-0, 0);
}

.contact-form-wrapper .form-label-text {
  position: relative;
  font-size: var(--fs-18, 18px);
  line-height: 100%;
  font-family: var(--font-noto-sans-jp);
  color: var(--color3, #38b6ff);
  text-align: left;
  font-weight: 700;
}

.contact-form-wrapper .form-required {
  position: relative;
  font-size: var(--fs-12, 12px);
  line-height: 100%;
  font-weight: 900;
  font-family: var(--font-noto-sans-jp);
  color: var(--color1, #ffffff);
  text-align: left;
}

/* 入力フィールドラッパー */
.contact-form-wrapper .form-input-wrapper {
  align-self: stretch;
  border-radius: var(--br-12, 12px);
  background-color: var(--color1, #ffffff);
  border: var(--border-1, 1px solid #ddd);
  display: flex;
  align-items: center;
  padding: 12px var(--padding-20, 20px);
}

/* 入力フィールド */
.contact-form-wrapper .form-input-field {
  width: 100%;
  border: 0;
  outline: 0;
  font-weight: 500;
  font-family: var(--font-noto-sans-jp);
  font-size: var(--fs-18, 18px);
  background-color: transparent;
  height: 24px;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 100%;
  text-align: left;
  color: var(--neutral9);
  padding: 0;
}

.contact-form-wrapper .form-input-field::placeholder {
  color: #b0b0b0;
  opacity: 0.7;
}

.contact-form-wrapper .form-input-field--email,
.contact-form-wrapper .form-input-field--tel {
  min-width: 108px;
}

/* チェックボックス */
.contact-form-wrapper .form-checkbox,
.contact-form-wrapper .mwform-checkbox-field input[type="checkbox"] {
  margin: 0;
  height: var(--height-18, 18px);
  width: var(--width-18, 18px);
  position: relative;
  border: var(--border-1, 1px solid #ddd);
  box-sizing: border-box;
}

/* チェックボックスのコンテナ */
.contact-form-wrapper .mwform-checkbox-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.contact-form-wrapper .mwform-checkbox-field label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* MW WP Formのチェックボックスラベル */
.contact-form-wrapper .mwform-checkbox-field-text {
  margin-left: 8px;
  font-size: 14px;
  color: var(--color3, #38b6ff);
  font-family: var(--font-noto-sans-jp);
  display: inline-block;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap;
}

/* 送信ボタンラッパー */
.contact-form-wrapper .form-submit-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 送信ボタン（MW WP Formのinput[type="submit"]用） */
.contact-form-wrapper .form-submit-button,
.contact-form-wrapper input[type="submit"] {
  cursor: pointer;
  border: 0;
  padding: var(--padding-24, 24px) var(--padding-48, 48px);
  width: 100%;
  max-width: 320px;
  box-shadow: var(--shadow-drop, 8px 8px 32px rgba(0, 0, 0, 0.25));
  border-radius: var(--br-12, 12px);
  background-color: var(--color3, #38b6ff);
  color: var(--color1, #ffffff);
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 100%;
  font-family: var(--font-noto-sans-jp);
  font-weight: 700;
  text-align: center;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.contact-form-wrapper .form-submit-button:hover,
.contact-form-wrapper input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 12px 12px 40px rgba(0, 0, 0, 0.3);
}

/* ===================================
   問い合わせセクション用フォーム（.inquiry-form-wrapper内）
   MES_LP/index.cssからコピー
   =================================== */

/* フォームラッパー背景 */
.inquiry-form-wrapper {
  background-color: var(--color1, #ffffff);
  border-radius: var(--br-24, 24px);
  padding: 100px 80px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* フィールド */
.inquiry-form-wrapper .form-field {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 24px;
}

/* フィールド間のスペース調整 */
.inquiry-form-wrapper .form-field-wrapper {
  display: flex;
  flex-direction: column;
}

.inquiry-form-wrapper .form-field--checkbox {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-16, 16px);
}

/* ラベル */
.inquiry-form-wrapper .form-label-wrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-0, 0);
}

.inquiry-form-wrapper .form-label-text {
  position: relative;
  font-size: var(--fs-18, 18px);
  line-height: 100%;
  font-family: var(--font-noto-sans-jp);
  color: var(--color3, #38b6ff);
  text-align: left;
  font-weight: 700;
}

.inquiry-form-wrapper .form-required {
  position: relative;
  font-size: var(--fs-12, 12px);
  line-height: 100%;
  font-weight: 900;
  font-family: var(--font-noto-sans-jp);
  color: var(--color, #ff4444);
  text-align: left;
}

/* 入力フィールドラッパー */
.inquiry-form-wrapper .form-input-wrapper {
  align-self: stretch;
  min-height: 45px;
  border-radius: var(--br-12, 12px);
  background-color: var(--color1, #ffffff);
  border: var(--border-1, 1px solid #ddd);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 20px var(--padding-20, 20px);
}

/* 入力フィールド */
.inquiry-form-wrapper .form-input-field {
  width: 100%;
  border: 0;
  outline: 0;
  font-weight: 500;
  font-family: var(--font-noto-sans-jp);
  font-size: var(--fs-18, 18px);
  background-color: transparent;
  height: 24px;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 100%;
  text-align: left;
  color: var(--neutral9);
  padding: 0;
}

.inquiry-form-wrapper .form-input-field::placeholder {
  color: #b0b0b0;
  opacity: 0.7;
}

.inquiry-form-wrapper .form-input-field--email,
.inquiry-form-wrapper .form-input-field--tel {
  min-width: 108px;
}

/* チェックボックス */
.inquiry-form-wrapper .form-checkbox,
.inquiry-form-wrapper .mwform-checkbox-field input[type="checkbox"] {
  margin: 0;
  height: var(--height-18, 18px);
  width: var(--width-18, 18px);
  position: relative;
  box-sizing: border-box;
}

/* チェックボックスのコンテナ */
.inquiry-form-wrapper .mwform-checkbox-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.inquiry-form-wrapper .mwform-checkbox-field label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* MW WP Formのチェックボックスラベル */
.inquiry-form-wrapper .mwform-checkbox-field-text {
  margin-left: 8px;
  font-size: 14px;
  color: var(--color3, #38b6ff);
  font-family: var(--font-noto-sans-jp);
  display: inline-block;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap;
}

/* 送信ボタンラッパー */
.inquiry-form-wrapper .form-submit-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-20, 20px) var(--padding-0, 0) var(--padding-0, 0);
  width: 100%;
}

/* 送信ボタン（MW WP Formのinput[type="submit"]用） */
.inquiry-form-wrapper .form-submit-button,
.inquiry-form-wrapper input[type="submit"] {
  cursor: pointer;
  border: 0;
  padding: var(--padding-24, 24px) var(--padding-48, 48px);
  background-color: var(--color3, #38b6ff);
  width: 100%;
  max-width: 320px;
  box-shadow: var(--shadow-drop, 8px 8px 32px rgba(0, 0, 0, 0.25));
  border-radius: var(--br-12, 12px);
  color: var(--color1, #ffffff);
  font-size: 20px;
  letter-spacing: 0.05em;
  line-height: 100%;
  font-family: var(--font-noto-sans-jp);
  font-weight: 700;
  text-align: center;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.inquiry-form-wrapper .form-submit-button:hover,
.inquiry-form-wrapper input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 12px 12px 40px rgba(0, 0, 0, 0.3);
}

/* ===================================
   ヒーローセクション内のフォームヘッダー
   =================================== */

/* ヒーローセクションのフォームヘッダースタイル */
.contact-form-wrapper .hero-form-header {
  display: block;
  margin-bottom: 24px;
}

.contact-form-wrapper .contact-form__header {
  display: block;
}

.contact-form-wrapper .contact-form__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--neutral9, #1a1a1a);
  text-align: center;
  margin-bottom: 16px;
  font-family: var(--font-noto-sans-jp);
}

.contact-form-wrapper .contact-form__divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color3, #38b6ff), transparent);
  margin: 16px 0;
}

/* inquiry-form-wrapperではヘッダーを非表示 */
.inquiry-form-wrapper .hero-form-header,
.inquiry-form-wrapper .contact-form__header {
  display: none !important;
}

/* ===================================
   エラーメッセージスタイル
   =================================== */

.mwform-error {
  color: #d32f2f;
  font-size: 14px;
  margin-top: 8px;
  font-weight: 500;
  display: block;
}

.mw_wp_form .error input,
.mw_wp_form input.error {
  border-color: #d32f2f !important;
  background-color: #fff5f5 !important;
}

/* ===================================
   読み込み中の状態
   =================================== */

.mw_wp_form.mwform-loading {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
}

.mw_wp_form.mwform-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--color3, #38b6ff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ===================================
   完了メッセージ
   =================================== */

.mwform-complete-message {
  text-align: center;
  padding: 60px 20px;
  max-width: 600px;
  margin: 0 auto;
}

.mwform-complete-message h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral9, #1a1a1a);
  margin-bottom: 24px;
}

.mwform-complete-message p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--neutral8, #4a4a4a);
  margin-bottom: 16px;
}

.mwform-complete-message .back-to-top {
  display: inline-block;
  margin-top: 32px;
  padding: 12px 40px;
  background: linear-gradient(135deg, var(--color3, #38b6ff), var(--color5, #2196f3));
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(56, 182, 255, 0.3);
}

/* トップへ戻るボタンのホバーエフェクト */
.mwform-complete-message .back-to-top:hover {
  background: linear-gradient(135deg, var(--color5, #2196f3), var(--color3, #38b6ff));
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(56, 182, 255, 0.5);
}

/* 波紋エフェクト */
.mwform-complete-message .back-to-top::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.mwform-complete-message .back-to-top:hover::before {
  width: 200px;
  height: 200px;
}

/* アクティブ状態 */
.mwform-complete-message .back-to-top:active {
  transform: translateY(0) scale(1.02);
  transition: all 0.1s ease;
}

/* ヒーローセクションでは「トップへ戻る」ボタンを非表示 */
.contact-form-wrapper .mwform-complete-message .back-to-top {
  display: none;
}

/* ===================================
   レスポンシブ対応
   =================================== */

/* タブレット（1024px以下） */
@media (max-width: 1024px) {
  .inquiry-form-wrapper {
    padding: 72px 60px;
  }
}

/* 小さいタブレット（768px以下） */
@media (max-width: 768px) {
  /* ヒーローコンテナをブロック表示 */
  .hero__container {
    flex-direction: column;
    gap: 24px;
  }

  /* ヒーローセクションのフォームを非表示 */
  .contact-form-wrapper {
    display: none !important;
  }

  /* エラーメッセージ */
  .mwform-error {
    font-size: 12px;
    margin-top: 6px;
  }

  /* 問い合わせセクション入力フィールド */
  .inquiry-form-wrapper .form-input-wrapper {
    padding: 10px var(--padding-16, 16px);
    min-height: auto;
  }

  /* 問い合わせセクションのレスポンシブ調整 */
  .inquiry-form-wrapper {
    padding: 56px 24px;
    margin: 0 20px;
  }
}

/* モバイル（480px以下） */
@media (max-width: 480px) {
  .inquiry-form-wrapper {
    padding: 80px 16px;
    margin: 0 0px;
  }

  /* フィールド間のスペースを狭めて、スクロールなしで送信ボタンまで見えるように */
  .inquiry-form-wrapper .form-field {
    margin-bottom: 8px;
  }
}