/******************************/
/** コンタクトフォームの装飾 **/
/******************************/
#cf7-area {
 	width:85%;
  	margin: 0 auto;
  	font-family: "遊ゴシック", "ヒラギノ角ゴ", "メイリオ", "MS Pゴシック", sans-serif;
	padding: 20px;
	border-radius: 10px;
	margin: auto;
}

/* トピック */
.form-topic {
	margin: 0;
	padding: 40px 0px 40px 0px;
}
.form-topic > p {
	margin: 0;
	padding: 20px;
}

/*　見出し　*/
.form-heading {
	width: 95%;
	background: #0693e3;
	border-radius: 2px;
	color: #ffffff;
	font-weight: bold;
	padding: 1em .8em;
	margin: 0 0 2em;
}

.form-heading p {
	margin: 0;
}

/* アイテムを左右で表示する */
.cf7-item {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0 0 0.5em;
}

/* 入力フォームのデザイン */
.cf7-contact-input  {
	border: 1px solid #dcdcdc !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
  	padding: 0 0 0 15px; /* 内側の余白 */
  	border-radius: 2px; /* 角を丸める */
  	transition: border-color 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
	height: 40px;
}

/* 入力フォーム(フォーカス)のデザイン */
.cf7-contact-input:focus {
  	border-color: #66afe9 !important;
  	box-shadow: 0 4px 10px rgba(102, 175, 233, 0.5) !important;
  	outline: none !important;
}


/* ドロップダウンのデザイン */
.cf7-contact-input-dropbox {
	color: black;
	height: 50px;
	padding: 0 0 0 15px;
}

/* テキストエリアの入力フォーム */
.cf7-contact-input-textarea {
	height: 200px !important;
	padding: 0.525em 0.3375em !important;
}

/* サブミットボタン */
.cf7-submit-botton {
	width: 200px !important;
  	background: #0693e3;
	border: none; /* 枠線を消す */
  	color: white; /* テキストの色 */
  	padding: 15px 30px; /* ボタンの内側余白 */
  	border-radius: 50px; /* 丸みを帯びたボタンにする */
  	font-size: 18px; /* フォントサイズ */
  	cursor: pointer; /* ホバー時にポインタに */
  	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
  	transition: transform 0.3s ease, box-shadow 0.3s ease; /* アニメーション */
}

.cf7-submit-botton:hover {
  	border-color: #66afe9 !important;
  	box-shadow: 0 4px 10px rgba(102, 175, 233, 0.5) !important;
  	outline: none !important;
}
.cf7-submit-section {
  	display: flex;
  	justify-content: center; /* 水平方向に中央揃え */
  	align-items: center; /* 垂直方向に中央揃え */
  	margin: 0;
}

/*　必須ラベル　*/
.cf7-req{
	font-size:.8em;
	padding: 4px 6px;
	background: #eb2a2a;
	color: #ffffff;
	margin-left: 10px;
	margin-right: 10px;
	display:inline-block;
}

/*　任意ラベル　*/
.cf7-opt{
	font-size:.8em;
	padding: 4px 6px;
	background: #afeeee;
	color: #ffffff;
	margin-left: 10px;
	margin-right: 10px;
	display:inline-block;
}

/* 汎用的なラベル　*/
.cf7-normal {
	color: #000000;
	display:inline-block;
}

/* CF7チェックボックスを縦並びに */
.wpcf7-list-item-label {
	color : #000000;
}
.wpcf7-checkbox .wpcf7-list-item {
	margin-top: 3px;
	display: block;
}

/* 住所などのマージン調整 */
.cf7-line-width-smaller {
	margin:0px;
}

/* 入力フォームの質問事項 */
.cf7-q {
	width: 40%;
	margin: 0 0 0 5px;
}

/* 入力フォームの回答パターン */
.cf7-a {
	width: 50% !important;
	color:black !important;
}

/* 入力フォームの回答パターン */
.cf7-a1 {
	width: 10% !important;
	color:black !important;
}

/* 入力フォームの回答パターン */
.cf7-a2 {
	width: 40% !important;
	color:black !important;
}

/* 入力フォームの回答パターン */
.cf7-a2-s {
	width: 15% !important;
	color:black !important;
}


/*********************************
 レスポンシブ設定
*********************************/

@media screen and (max-width:768px){
	.cf7-item {
		display: block;
	}
	
	.cf7-q {
		width: 95% !important;
		margin: 0;
		padding : 2 30 2 2 !important;
	}
	
	.cf7-a {
		width: 95% !important;
		margin: 0;
		padding : 2px;
	}

	.cf7-a1 {
		width: 95% !important;
		margin: 0;
		padding : 2px;
	}
	.cf7-a2 {
		width: 95% !important;
		margin: 0;
		padding : 2px;
	}
	.cf7-a2-s {
		width: 95% !important;
		margin: 0;
		padding : 2px;
	}
	
	.cf7-contact-input {
		margin-left: 0;
	}
	
	.cf7-upload{
	  width: 50%;
	}
	
	.cf7-submit{
		width: 90%;
	}

	
}