@charset "UTF-8";

/* 全体ボックス */
div.wpcf7 {
  background:#fafafa;
  border:1px solid #ddd;
  padding:20px;
  border-radius:10px;
  margin:0 0 30px 0;
}

/* pタグは触らない（重要） */
/* div.wpcf7 p は削除する */

/* 入力欄 */
div.wpcf7 input,
div.wpcf7 textarea {
  border:1px solid #ccc;
  padding:8px;
  font-size:14px;
  width:100%; /* ←これ重要 */
  box-sizing:border-box;
}

/* テキストエリア */
div.wpcf7 textarea {
  height:200px;
}

/* 送信ボタン */
div.wpcf7 input.wpcf7-submit {
  cursor:pointer;
  color:#fff;
  font-weight:bold;
  font-size:14px;
  width:200px;
  height:45px;
  line-height:45px; /* 文字の行の高さ */
  margin:30px auto 0;
  align-items:center;
  justify-content:center;
  display:flex;
  border-radius:5px;
  background:#333;
  border:1px solid #666;
}

/* ホバー */
div.wpcf7 input.wpcf7-submit:hover {
  background:#006080;
  border:1px solid #006080;
}

/* フォーカス */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border:1px solid #009de1;
}

/* エラー */
.wpcf7 .wpcf7-not-valid {
  background: #ffb6c1;
}

/* メッセージ */
.wpcf7 .wpcf7-response-output {
  margin-top:10px;
  padding:10px;
  border-radius:4px;
}

/* 必須 */
.wpcf7 .required {
  color:#f00;
}