/* ============================================================
   style_contact.css   (Contact form 専用スタイル)
   ------------------------------------------------------------
   1. セクション全体
   2. 各フォーム項目
   3. 横並び row
   4. プルダウン
   5. チェックボックス
   6. 送信ボタン
   7. メッセージ表示
   8. レスポンシブ
============================================================ */

/* ------------------------------------------------------------
   1. セクション全体
------------------------------------------------------------ */
.contact {
 overflow: visible;
 scroll-margin-top: 120px;
 height: auto; /* コンテンツに合わせる */
}

/* フォームラッパ */
.contact__form {
 max-width: 800px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 30px;
 margin-top: 40px;
 padding-bottom: 40px;
}

.section-title-contact {
}

/* ------------------------------------------------------------
   2. 各フォーム項目
------------------------------------------------------------ */
.contact__form .form-group label {
 display: block;
 margin-bottom: 15px;
 font-size: 18px;
 font-weight: 500;
 color: #555;
}
/* 必須アスタリスク */
.form-group.required > label::after {
 content: " *";
 color: #e74c3c;
 margin-left: 4px;
}
/* input / textarea 共通 */
.contact__form .form-group input,
.contact__form .form-group textarea,
.contact__form select.form-select {
 width: 100%;
 padding: 12px 16px;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-size: 16px;
 transition: border-color 0.2s;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.contact__form .form-group input:focus,
.contact__form .form-group textarea:focus,
.contact__form select.form-select:focus {
 border-color: #ffcf00;
 outline: none;
}

/* ------------------------------------------------------------
   3. 横並び row  (会社名＋部署)
------------------------------------------------------------ */
.contact__form .form-row {
 display: flex;
 gap: 20px;
 flex-wrap: wrap; /* はみ出し防止 */
}

/* ------------------------------------------------------------
   4. プルダウン */
.contact__form select.form-select {
 background: #fff; /* iOS の透過防止 */
 -webkit-appearance: none; /* Safari デフォルト矢印削除 */
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 1l10 10L21 1' stroke='%23555' stroke-width='2' fill='none'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
 background-size: 12px 6px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------------------------
   5. チェックボックス (予約希望) */
.contact__form input[type="checkbox"] {
 margin-right: 6px;
 transform: scale(1.2);
 box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}

/* ------------------------------------------------------------
   6. 送信ボタン
------------------------------------------------------------ */
.contact__form button.button {
 align-self: center;
 background: #fbf151;
 color: #393939;
 padding: 12px 40px;
 font-size: 18px;
 font-weight: 700;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 width: 100%;
 transition: background 0.3s, transform 0.1s;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.contact__form button.button:hover {
 background: #e6b800;
 color: #fff;
}

.contact__form button.button:active {
 transform: scale(0.97);
}

/* ------------------------------------------------------------
   7. メッセージ表示
------------------------------------------------------------ */
.text-danger {
 font-size: 0.9rem;
 margin-top: 4px;
 display: block;
}

.alert.alert-success {
 margin-bottom: 1.5rem;
 background-color: #e6f9e9;
 color: #256029;
 border: 1px solid #bde5c4;
 padding: 12px 16px;
 border-radius: 4px;
}

.contact__form .checkbox-group {
 display: inline-flex;
 align-items: flex-start; /* テキスト頭と高さをそろえる */
 gap: 2px; /* ラベルと□の間隔。お好みで 4〜8px */
}

#NeedReservation {
 width: 95%;
}

#NeedReservation {
 width: 5%;
}

/* ------------------------------------------------------------
   8. レスポンシブ
------------------------------------------------------------ */

/* タブレット */
@media (max-width: 768px) {
 .contact {
  height: auto; /* コンテンツに合わせる */
 }
 .contact__form .form-row {
  flex-direction: column;
 }
 .contact__form {
  max-width: unset;
 }
}

/* スマホ */
@media (max-width: 600px) {
 .contact__form {
  margin: 0 10px;
  gap: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
 }
 .contact__form .form-group label {
  margin-bottom: 10px;
  font-size: min(17px, 4.53vw);
 }
 .contact__form .form-group textarea {
  height: 100vw;
 }
}