/* ============================
   フォーム共通（背景色など）
============================ */
body {
  background:#fff7fb;
  font-family:"Hiragino Sans", sans-serif;
  margin:0;
  padding:0;
}

/* ============================
   form-block（入力ブロック）
============================ */
.form-block {
  margin-bottom: 20px;
}

.form-block label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
}

.req {
  color: #e84a5f;
  font-size: 12px;
}

input[type=text],
input[type=email],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
}

/* 赤枠（エラー時） */
input.error,
textarea.error {
  border: 2px solid #c00 !important;
}

/* エラー文（JSで追加） */
.error-tooltip {
  color: #c00;
  font-size: 13px;
  margin-top: 4px;
  display: none;
}

/* ============================
   プライバシーボックス
============================ */
.privacy-box {
  background: #fff2f6;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #f7cde0;
  margin-bottom: 25px;
}

/* ============================
   ボタン
============================ */
.btn-area {
  text-align: center;
  margin-top: 30px;
}

button {
  padding: 12px 40px;
  border-radius: 30px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background: #e97aa3;
  color: white;
  transition: 0.3s;
}

button:hover {
  opacity: 0.7;
}

/* ============================
   モーダル背景
============================ */
.form-modal {
  display:none; /* JSでdisplay:flexに切り替わる */
  position:fixed;
  z-index:2000000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);

  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
}

/* ============================
   モーダル本体
============================ */
.form-modal-content {
  background:#fff;
  padding:20px;
  border-radius:12px;
  max-width:600px;
  width:90%;
  max-height:70vh;
  display:flex;
  flex-direction:column;
  font-size:14px;
  box-shadow:0 0 12px rgba(0,0,0,0.08);
}

/* タイトル */
.form-modal-title {
  text-align:center;
  margin-bottom:6px;
  font-size:18px;
  font-weight:bold;
}

/* 注意書き（必要なら使用） */
.form-notice {
  color:#d86aac;
  font-weight:bold;
  text-align:center;
  margin-bottom:8px;
  font-size:13px;
}

/* スクロール領域（予約フォームで使用） */
.form-modal-scroll {
  flex:1 1 auto;
  overflow-y:auto;
  border:1px solid #ccc;
  padding:10px;
  line-height:1.5;
  font-size:13px;
  margin-bottom:4px;
  background:#fff;
}

/* ============================
   モーダル内ボタン
============================ */
.form-modal-buttons {
  display:flex;
  justify-content:center;
  gap:120px;
  margin-top:0;
}

.form-modal-buttons button {
  padding:8px 24px;
  font-size:14px;
  border-radius:30px;
  background:#d86aac;
  color:#fff;
  border:none;
  cursor:pointer;
  transition:0.3s;
}

.form-modal-buttons button:hover {
  background:#b75892;
}

/* 戻るボタン（グレー） */
#closeConfirmModal {
  background:#ccc;
  color:#333;
}

#closeConfirmModal:hover {
  background:#b5b5b5;
}

/* ============================
   スマホ調整
============================ */
@media screen and (max-width:782px) {

  .form-modal-content {
    max-width:95%;
    max-height:80vh;
    padding:16px;
    font-size:13px;
    transform:translateY(-8%);
  }

  .form-modal-scroll {
    font-size:12px;
    padding:8px;
  }

  .form-modal-buttons {
    gap:70px;
  }

  .form-modal-buttons button {
    padding:8px 20px;
    font-size:13px;
  }

  button {
    width:100%;
    margin-top:10px;
  }
}