@charset "UTF-8";

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

header {
  padding: 40px 40px 0;
}

main {
  padding: 0 40px 60px;
}

/* フォーム全体の箱 */
#contact {
  max-width: 600px;        /* フォームの最大幅。これ以上広がらない */
  margin: 40px auto;       /* 上下に余白、左右はautoで中央に配置 */
  background: #ffffff;     /* フォームの背景を白に */
  border-radius: 12px;     /* 角を丸くする */
  padding: 40px;           /* フォーム内側の余白 */
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* 薄い影をつけて浮いて見せる */
}

/* 「お問い合わせ」の見出し */
#contact h2 {
  font-size: 28px;
  color: #8b2500;          /* 他のページと合わせた見出しの色 */
  margin-bottom: 24px;
}

/* ラベル（お名前・電話番号など） */
#contact label {
  display: block;          /* ブロック要素にして1行で表示 */
  font-family: serif;
  font-size: 16px;
  color: #333;
  margin-top: 20px;
  margin-bottom: 6px;
}

/* 入力欄（テキスト・電話・メール） */
#contact input {
  width: 100%;             /* 横幅いっぱいに広げる */
  padding: 10px 12px;      /* 内側の余白で入力しやすくする */
  font-size: 16px;
  font-family: serif;
  border: 1px solid #ccc;  /* 薄いグレーの枠線 */
  border-radius: 6px;      /* 角を少し丸く */
  box-sizing: border-box;  /* paddingを含めた幅で計算する */
  background: #faf8f3;     /* サイト全体の背景色と合わせる */
}

/* テキストエリア（お問い合わせ内容） */
#contact textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  font-family: serif;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  background: #faf8f3;
  height: 150px;           /* テキストエリアの高さを固定 */
  resize: vertical;        /* 縦方向だけリサイズできるようにする */
}

/* フォーカス時（入力欄をクリックした時）の見た目 */
#contact input:focus,
#contact textarea:focus {
  outline: none;           /* デフォルトの青い枠を消す */
  border-color: #c8860a;   /* サイトのアクセントカラーの枠線に変える */
}

/* 送信ボタン */
#contact button[type="submit"] {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 14px;
  font-size: 18px;
  font-family: serif;
  background-color: #8b2500;  /* ボタンの背景色 */
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;            /* マウスをのせたら手のアイコンに */
  transition: background 0.2s; /* 色の変化をなめらかにする */
}

/* ボタンにマウスをのせた時 */
#contact button[type="submit"]:hover {
  background-color: #c0392b;  /* 少し明るい赤に変わる */
}

@media (max-width: 768px) {
  
  main {
    padding: 0 16px 40px;
  }
  
  #contact {
    padding: 24px 16px;
  }
}