/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 16 2026 | 11:57:59 */
/* =======================================
   Contact Form 7 スタイリッシュデザイン
======================================= */

/* フォームの基本設定 */
.cf7 {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 0;
}

/* リストのデフォルト余白をリセット */
.cf7__list {
  margin: 0;
  padding: 0;
}

/* 項目名（ラベル部分） */
.cf7__list dt {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* 必須・任意のバッジ */
.cf7__required,
.cf7__optional {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 12px;
  font-size: 12px;
  border-radius: 4px;
  color: #fff;
  line-height: 1;
  letter-spacing: 1px;
}

/* 必須は赤、任意はグレー */
.cf7__required {
  background-color: #e53e3e;
}
.cf7__optional {
  background-color: #a0aec0;
}

/* 入力エリアのコンテナ */
.cf7__list dd {
  margin: 0 0 30px 0; /* 左のデフォルト余白を消し、下に余白を設ける */
}

/* 入力フィールド共通スタイル */
.cf7__list input[type="text"],
.cf7__list input[type="email"],
.cf7__list input[type="tel"],
.cf7__list select,
.cf7__list textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  background-color: #f8fafc;
  font-size: 16px; /* スマホでの自動ズーム防止 */
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* フォーカス時（入力中）のスタイル */
.cf7__list input[type="text"]:focus,
.cf7__list input[type="email"]:focus,
.cf7__list input[type="tel"]:focus,
.cf7__list select:focus,
.cf7__list textarea:focus {
  outline: none;
  border-color: #c53030; /* サイトカラーに合わせて赤系に */
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.15);
}

/* テキストエリアの高さ調整 */
.cf7__list textarea {
  min-height: 200px;
  resize: vertical;
}

/* 送信ボタンのレイアウト */
.cf7__button {
  text-align: center;
  margin-top: 40px;
}

/* 送信ボタンのデザイン */
.cf7__button input[type="submit"] {
  background-color: #c53030; /* ヘッダーの赤に合わせて統一感を出す */
  color: #fff;
  padding: 16px 80px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  -webkit-appearance: none; /* iOS特有のボタン装飾をリセット */
}

/* 送信ボタンのホバー（マウスオーバー）時 */
.cf7__button input[type="submit"]:hover {
  background-color: #9b2c2c;
  transform: translateY(-2px); /* 少し上に浮き上がるエフェクト */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}