/* ------------------------------------------- */
/* ST Advanced Contact Form - Final Design
/* ------------------------------------------- */

.sacf-form--new-design {
  font-family: inherit;
  max-width: 800px;
  max-width: 100%;
  margin: 0 auto;
  /* 1. フォーム全体の枠線を削除 */
  /* border: 1px solid #ccc; */
}

/* --- スマホ表示 (デフォルトは1カラム) --- */
.sacf-form--new-design .sacf-form__item {
  /* 2. 各項目の区切り線を削除 */
  /* border-bottom: 1px solid #ddd; */
  padding: 20px 15px;
}

.sacf-form--new-design .sacf-form__label {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  display: block;
}

.sacf-form--new-design .sacf-form__label-tag {
  background-color: #c7243a;
  color: #fff;
  padding: 3px 10px;
  margin-right: 10px;
  font-size: 14px;
}
.sacf-form--new-design .sacf-form__label-tag--optional {
  background-color: #888;
}

/* 4. 入力欄の枠線を濃く太く */
.sacf-form--new-design .sacf-form__control input[type="text"],
.sacf-form--new-design .sacf-form__control input[type="email"],
.sacf-form--new-design .sacf-form__control input[type="tel"],
.sacf-form--new-design .sacf-form__control input[type="number"],
.sacf-form--new-design .sacf-form__control textarea,
.sacf-form--new-design .sacf-form__control select {
  width: 100%;
  padding: 12px;
  border: 2px solid #555; /* 色を濃く(#555)、太さを2pxに */
  border-radius: 0;
  font-size: 16px;
  box-sizing: border-box;
}

.sacf-form--new-design .sacf-form__control p {
  font-size: 18px;
  font-weight: bold;
}

.sacf-form--new-design .sacf-checkbox-label {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
  font-size: 18px;
}
.sacf-form--new-design .sacf-checkbox-label input[type="checkbox"] {
  margin-right: 8px;
  width: 20px;
  height: 20px;
}

.sacf-form--new-design .sacf-form__submit {
  text-align: center;
  padding: 30px 0;
}
.sacf-form--new-design .sacf-form__submit button {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 15px 60px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

/* --- PC表示 (768px以上で2カラムに) --- */
@media (min-width: 768px) {
  .sacf-form--new-design .sacf-form__item {
    display: flex;
    align-items: center;
    padding: 0;
  }
  .sacf-form--new-design .sacf-form__item--textarea {
    align-items: flex-start;
  }
  .sacf-form--new-design .sacf-form__label {
    width: 35%;
    padding: 25px;
    margin-bottom: 0;
    /* 3. ラベル右の区切り線を削除 */
    /* border-right: 1px solid #ddd; */
  }

  .sacf-form--new-design .sacf-form__item--textarea .sacf-form__label {
    padding-top: 25px;
  }
  .sacf-form--new-design .sacf-form__control {
    width: 65%;
    padding: 20px 25px;
  }
}

/* --- 送信後のメッセージのスタイル調整 --- */

.sacf-response-output {
  margin-bottom: 20px;
  padding: 25px; /* パディングを少し大きく */
  border-radius: 5px;
  text-align: center;
  font-size: 20px; /* 文字サイズを大きく */
  font-weight: bold; /* 太字に */
  line-height: 1.6; /* 行間を調整 */
}

/* 成功メッセージの色（任意） */
.sacf-response-output.success {
  background-color: #eaf5e9; /* 薄い緑色の背景 */
  color: #3c763d; /* 濃い緑色の文字 */
  border: 1px solid #d6e9c6;
}

/* エラーメッセージの色（任意） */
.sacf-response-output.error {
  background-color: #f2dede; /* 薄い赤色の背景 */
  color: #a94442; /* 濃い赤色の文字 */
  border: 1px solid #ebccd1;
}

.sacf-response-output p {
  margin: 0;
}