/* ===============================================
  SKS お問い合わせフォーム スタイル (レスポンシブ対応版)
 =============================================== */

/* フォーム全体のラッパー */
.sks-contact-form-wrapper {
  max-width: 768px; /* PCでの最大幅 */
  margin: 40px auto;
  padding: 40px; /* PCでの余白 */
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* フォームの各項目（ラベルと入力欄のグループ） */
.sks-contact-form-wrapper .form-group {
  margin-bottom: 25px;
}

/* ラベル */
.sks-contact-form-wrapper .form-group label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  font-size: 15px;
}

/* 必須マーク (*) */
.sks-contact-form-wrapper .form-group .required {
  color: #e44d26;
  margin-left: 5px;
  font-weight: normal;
}

/* 入力欄（input, textarea共通） */
.sks-contact-form-wrapper input[type="text"],
.sks-contact-form-wrapper input[type="email"],
.sks-contact-form-wrapper textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  color: #555;
  background-color: #fff;
  box-sizing: border-box; /* paddingとborderを幅に含める */
  transition: border-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none; /* スマホでのデフォルトスタイルをリセット */
  appearance: none;
}

/* 入力欄がフォーカスされた時のスタイル */
.sks-contact-form-wrapper input[type="text"]:focus,
.sks-contact-form-wrapper input[type="email"]:focus,
.sks-contact-form-wrapper textarea:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* 送信ボタン */
.sks-contact-form-wrapper .form-submit button {
  display: inline-block;
  width: 100%;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #0073aa;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
  -webkit-appearance: none;
  appearance: none;
}

/* 送信ボタンのホバー（マウスオーバー）時 */
.sks-contact-form-wrapper .form-submit button:hover {
  background-color: #005a87;
}

/* 送信ボタンのクリック時 */
.sks-contact-form-wrapper .form-submit button:active {
  transform: translateY(1px);
}

/* --- メッセージ表示用のスタイル --- */

/* エラーメッセージ全体 */
.sks-form-errors {
  padding: 15px;
  margin-bottom: 25px;
  border: 1px solid #d9534f;
  background-color: #f2dede;
  color: #a94442;
  border-radius: 5px;
}
.sks-form-errors p {
  margin-top: 0;
  font-weight: bold;
}
.sks-form-errors ul {
  margin-bottom: 0;
  padding-left: 20px;
}

/* 送信成功メッセージ */
.sks-form-success {
  padding: 20px;
  text-align: center;
  border: 1px solid #4cae4c;
  background-color: #dff0d8;
  color: #3c763d;
  border-radius: 5px;
}

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

/* 画面幅が768px以下の場合に適用（タブレットやスマートフォン） */
@media (max-width: 768px) {
  /* フォーム全体の余白を調整 */
  .sks-contact-form-wrapper {
    margin: 20px 15px; /* 上下のマージンを減らし、左右も少し空ける */
    padding: 25px; /* 内側の余白を減らす */
  }

  /* ラベルや入力欄の文字サイズを少し調整 */
  .sks-contact-form-wrapper .form-group label,
  .sks-contact-form-wrapper input[type="text"],
  .sks-contact-form-wrapper input[type="email"],
  .sks-contact-form-wrapper textarea {
    font-size: 14px;
  }

  /* 送信ボタンの文字サイズも調整 */
  .sks-contact-form-wrapper .form-submit button {
    font-size: 15px;
    padding: 14px 20px;
  }
}