/*
Theme Name: fusou-izumo
Author: kana
Description: 扶桑建設のテーマ
Version: 1.0
*/

/* --- ベース設定 --- */
body {
  font-family: "Shippori Mincho", serif;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
  color: #333;
  background: #fff;
}

main {
  padding: 1rem;
}

h1 {
  margin: 0 0 1rem;
  padding: 0 1rem;
}

h2 {
  margin: 0;
  padding: 0;
}

footer {
  padding: 0 1rem;
  font-size: 0.7rem;
}

/* --- 説明テキスト（冒頭文） --- */
main .form-text:first-child {
  margin-top: 0;
}

.form-text {
  max-width: 800px;
  margin: 4rem auto;
  font-size: 1rem;
  line-height: 1.9;
  color: #333;
}

/* --- フォーム本体 --- */
.mw_wp_form {
  max-width: 800px;
  margin: 2rem auto;
  /* padding: 2rem 1.5rem; */
}

/* --- 各項目（2カラム） --- */
.form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-top: 1px solid #e0e0e0;
}

.form-label {
  width: 30%;
  font-weight: bold;
  line-height: 1.6;
}

.form-input {
  width: 70%;
}

/* --- 入力欄共通 --- */
.form-input input[type="text"],
.form-input input[type="email"],
.form-input input[type="tel"],
.form-input select,
.form-input textarea {
  width: 100%;
  padding: 0.7em;
  font-size: 1rem;
  letter-spacing: 0.05em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.form-input textarea {
  min-height: 120px;
}

/* --- ラジオボタン整形 --- */
.mwform-radio-field {
  display: inline-block;
  margin-right: 1em;
}

.mwform-radio-field label {
  font-weight: normal;
}

/* --- 未入力フィールド強調 --- */
input:invalid, select:invalid, textarea:invalid {
  border: 2px solid #e60033;
  background-color: #fff0f0;
}
.mw_wp_form .error {
  /* color: #e60033; */
  font-size: 0.9em;
  margin-top: 0.5em;
}

/* --- 必須・任意バッジ --- */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-right: 0.5em;
  line-height: 1.4;
}

.badge.required {
  background: #2a4d77;
  color: #fff;
  font-weight: bold;
}

.badge.optional {
  background: #ccc;
  color: #333;
  font-weight: normal;
}

/* --- ボタン共通 --- */
.mw_wp_form input[type="submit"],
.mw_wp_form input[type="button"] {
  background: #2a4d77;
  color: white;
  padding: 0.8em 2em;
  font-family: "Shippori Mincho", serif;
  font-weight: bold;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.mw_wp_form input[type="submit"]:hover,
.mw_wp_form input[type="button"]:hover {
  background: #1f3c5c;
}

/* --- PC・スマホ共通：ボタン中央配置 --- */
.fixed-submit {
  text-align: center;
  margin-top: 2rem;
}
.fixed-submit input {
  width: 30%;
}

.fixed-submit input[type="submit"],
.fixed-submit input[type="button"] {
  display: inline-block;
  margin: 0 0.5rem;
}

/* --- 戻るボタンだけグレーに --- */
.mw_wp_form input[type="submit"][value="戻る"],
.mw_wp_form input[type="button"][value="戻る"] {
  background: #ccc;
  color: #333;
}

.mw_wp_form input[type="submit"][value="戻る"]:hover,
.mw_wp_form input[type="button"][value="戻る"]:hover {
  background: #aaa;
}

/* --- フォーカス時の強調（アクセシビリティ） --- */
form.mw_wp_form input:focus,
form.mw_wp_form textarea:focus,
form.mw_wp_form select:focus {
  border-color: #0073aa;
  outline: none;
  box-shadow: 0 0 3px rgba(0, 115, 170, 0.4);
}

/* --- レスポンシブ対応 --- */
@media screen and (max-width: 768px) {
  /* 全体の文字サイズを16px相当に統一 */
  .form-text,
  .form-label,
  .form-input,
  .form-input input[type="text"],
  .form-input input[type="email"],
  .form-input input[type="tel"],
  .form-input select,
  .form-input textarea,
  .mw_wp_form input[type="submit"],
  .mw_wp_form input[type="button"] {
    font-size: 1rem !important; /* = 16px */
  }

  .form-label,
  .form-input {
    width: 100%;
  }

  /* ラジオボタン項目を縦並び＋大きめ */
  .mwform-radio-field {
    display: block;
    /* margin-bottom: 1rem; */
    margin-right: 0;
  }

  .mwform-radio-field label {
    display: block;
    padding: 0.8em 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
  }

  .mwform-radio-field input[type="radio"] {
    margin-right: 0.5em;
    transform: scale(1.2); /* タップしやすく */
  }

  /* 2カラム→1カラム化 */
  .form-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* ボタン幅を100%に */
  .fixed-submit input {
    width: 100%;
    margin: 0.5rem 0 !important;
  }
}

/* --- 確認画面スタイル --- */
.mwform-confirm-table dt {
  font-weight: bold;
  margin-top: 1rem;
}

.mwform-confirm-table dd {
  margin-left: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}