/* =====================================================
   西井建築工務店 相談フォーム レスポンシブCSS
   PC・スマホ両対応
   ===================================================== */

/* ---- ベースリセット ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ---- フォームラッパー ---- */
.inner4 {
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
}

/* ---- テーブル全体 ---- */
table.ta1 {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table.ta1 tr {
  border-bottom: 1px solid #c8b97a;
}

/* ---- ラベル列（th） ---- */
table.ta1 th {
  background-color: #5c5c00;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  padding: 14px 12px;
  width: 160px;
  white-space: nowrap;
}

/* ---- 入力列（td） ---- */
table.ta1 td {
  background-color: #f5f0e0;
  padding: 14px 16px;
  vertical-align: top;
  line-height: 1.7;
}

/* ---- テキスト入力・セレクト共通 ---- */
table.ta1 input[type="text"],
table.ta1 input[type="email"],
table.ta1 input[type="tel"],
table.ta1 input[type="date"],
table.ta1 textarea,
input[name="captcha"] {
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  font-size: 16px;          /* iOS 自動ズーム防止 */
  line-height: 1.5;
  border: 1px solid #b0a060;
  border-radius: 4px;
  background-color: #ffffff;
  color: #333333;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

table.ta1 input[type="text"]:focus,
table.ta1 input[type="email"]:focus,
table.ta1 input[type="tel"]:focus,
table.ta1 input[type="date"]:focus,
table.ta1 textarea:focus,
input[name="captcha"]:focus {
  outline: none;
  border-color: #7a6d00;
  box-shadow: 0 0 0 3px rgba(122, 109, 0, 0.18);
}

/* ---- 日付入力 ---- */
table.ta1 input[type="date"] {
  max-width: 200px;
  cursor: pointer;
}

/* ---- テキストエリア ---- */
table.ta1 textarea {
  max-width: 100%;
  min-height: 180px;
  resize: vertical;
}

/* ---- 必須マーク ---- */
font[color="#ff0000"],
font[color="crimson"] {
  display: inline-block;
  font-size: 13px;
  margin-top: 4px;
  color: #cc0000 !important;
}

/* ---- キャプチャ入力 ---- */
input[name="captcha"] {
  max-width: 140px;
  text-align: center;
  letter-spacing: 4px;
  font-size: 18px;
  margin-bottom: 8px;
}

/* ---- 送信ボタン ---- */
input[type="submit"] {
  display: block;
  margin: 0 auto;
  padding: 14px 48px;
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  background-color: #5c5c00;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: background-color 0.2s, transform 0.1s;
}

input[type="submit"]:hover {
  background-color: #7a7a00;
}

input[type="submit"]:active {
  transform: scale(0.97);
}

/* =====================================================
   スマホ対応（768px 以下）
   ===================================================== */
@media (max-width: 768px) {

  .inner4 {
    padding: 10px 8px;
  }

  /* テーブルをブロック表示に切り替え */
  table.ta1,
  table.ta1 tbody,
  table.ta1 tr,
  table.ta1 th,
  table.ta1 td {
    display: block;
    width: 100%;
  }

  table.ta1 tr {
    margin-bottom: 2px;
  }

  table.ta1 th {
    text-align: left;
    padding: 10px 14px;
    font-size: 14px;
    white-space: normal;
  }

  table.ta1 td {
    padding: 12px 14px;
  }

  /* 入力欄をフル幅に */
  table.ta1 input[type="text"],
  table.ta1 input[type="email"],
  table.ta1 input[type="tel"],
  table.ta1 input[type="date"],
  table.ta1 textarea {
    max-width: 100%;
    font-size: 16px;   /* iOS ズーム防止を維持 */
    padding: 12px 14px;
  }

  table.ta1 textarea {
    min-height: 140px;
  }

  table.ta1 input[type="date"] {
    max-width: 100%;
  }

  input[name="captcha"] {
    max-width: 100%;
  }

  input[type="submit"] {
    width: 100%;
    padding: 16px;
    font-size: 16px;
  }
}

/* =====================================================
   超小型画面（480px 以下）
   ===================================================== */
@media (max-width: 480px) {
  table.ta1 th {
    font-size: 13px;
    padding: 8px 12px;
  }

  table.ta1 td {
    padding: 10px 12px;
  }
}