/* =====================================================
   contact.css - お問い合わせページ用のスタイル定義
   ===================================================== */

/* ===== スマホファースト基本レイアウト ===== */
.contact-container {
  max-width: 1100px;             /* 幅は画面いっぱいに広げる */
  margin: 0 auto;              /* 横中央寄せ */
  padding: 40px 16px;          /* スマホ用はコンパクトな余白 */
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* 日本語に合うフォント */
  padding-top: 0;              /* ヘッダーとの距離調整 */
  background-color: #fff;

/*  text-align: center;  */        /* 中央揃え */

  color: /*#1a3d2f*/ #444444;
}

/* ===== タイトル（h2） ===== */
.contact-container h2 {
  text-align: center;          /* 中央揃え */
  font-size: 1.6rem;           /* スマホ向けフォントサイズ */
  margin-bottom: 30px;         /* 下余白 */
  color: #2d5936;              /* 深い緑 */

 /* border-bottom: 2px solid #006400;
  display: inline-block; */  /* 中央下に下線を引くため */

}

/* ===== ページ冒頭の説明文 ===== */
.contact-container p {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 20px;
  color: #444;                 /* 読みやすい濃さ */
}

/* ===== 連絡先情報セクション ===== */
.contact-info {
  background-color: /*#f8f8f8*/ #ECFAE5;   /* 薄いグレー背景 */
  padding: 5px 20px 20px 20px;
  border-radius: 8px;
  margin: 0 auto;

  width: 80%;
}

.contact-info h3 {
  font-size: 1.1rem;
  margin: 0 auto;
  color: /*#1a3d2f*/ #444444;
}

.contact-info p {
  margin: 6px 0;
  font-size: 1rem;
  color: #333;
}

/* ===== お問い合わせフォーム見出し ===== */

.contact-form {
  width: 80%;
  margin: 0 auto;
/*  background-color: #ECFAE5; 
  padding: 10px 20px;
  border-left: 5px solid #4caf50;  左側に緑のライン 
*/
}

.contact-form h3 {
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 16px;
  color: #1a3d2f;
  padding-left: 10px;
}

/* ===== フォーム全体縦並び ===== */
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== ラベル ===== */
.contact-form label {
  font-weight: bold;
  color: #333;
}

/* ===== 入力欄共通 ===== */
.contact-form input,
.contact-form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* ===== フォーカス時の強調 ===== */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #4caf50;
  outline: none;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

/* ===== テキストエリアは縦リサイズのみ ===== */
.contact-form textarea {
  resize: vertical;
}

/* ===== 送信ボタン ===== */
.contact-form button {
  background-color: #4caf50;
  color: white;
  font-weight: bold;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* ===== ホバー時の色変化 ===== */
.contact-form button:hover {
  background-color: #388e3c;
}

/* ===== 送信成功メッセージ ===== */
.success-message {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-left: 5px solid #66bb6a;
  padding: 15px 20px;
  border-radius: 6px;
  margin-bottom: 30px;
  font-weight: bold;
  text-align: center;
}

/* ===== プレースホルダーの装飾（必要なら） ===== */
.placeholder {
  color: #777;
  font-style: italic;
}

/* ===== PC用スタイル（画面幅901px以上） ===== */
@media (min-width: 901px) {
  .contact-container {
    max-width: 1100px;         /* PCは最大幅800px */
    padding: 60px 40px 80px;       /* 余白は広め */
  }

  .contact-container h2 {
    font-size: 2rem;          /* 大きめタイトル */
    margin-bottom: 40px;
  }

  .contact-form h3,
  .contact-info h3 {
    font-size: 1.3rem;        /* 見出し大きめ */
    margin-bottom: 20px;
  }

  .contact-info {
    margin-bottom: 40px;
  }

  .contact-form form {
    gap: 16px;
  }
}