@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
:root {
  --cf7-main: #86cfcf;
  --cf7-main-dark: #5fb5b5;
}

.cf7-form {
  max-width: 600px;
  margin: 0 auto;
}

.cf7-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

/* 入力欄共通 */
.cf7-form input[type="text"],
.cf7-form input[type="email"],
.cf7-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cf7-form textarea {
  min-height: 150px;
  resize: vertical;
}

/* フォーカス時にメインカラーを使用 */
.cf7-form input[type="text"]:focus,
.cf7-form input[type="email"]:focus,
.cf7-form textarea:focus {
  outline: none;
  border-color: var(--cf7-main);
  box-shadow: 0 0 0 3px rgba(134, 207, 207, 0.3);
}

/* 送信ボタン */
.cf7-form input[type="submit"] {
  display: inline-block;
  background-color: var(--cf7-main);
  color: #fff;
  border: none;
  padding: 12px 36px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cf7-form input[type="submit"]:hover {
  background-color: var(--cf7-main-dark);
}

/* 送信中のスピナー位置調整 */
.cf7-form .wpcf7-spinner {
  margin-left: 12px;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}