/**入力系の枠線の色を変更 **/
.contents-box table.inquiry td select, 
.contents-box table.inquiry td input, 
.contents-box table.inquiry td textarea {
	border-color: #275e9d;
	border-width: 2px;
	/**
		-webkit-box-shadow: 0 4px #275e9d;
		box-shadow: 0 4px #275e9d;
		border-radius: 8px;
		**/
}
/**
	.contents-box table.inquiry td select:focus, 
	.contents-box table.inquiry td input:focus, 
	.contents-box table.inquiry td textarea:focus {
		background-color: #DAF7DC;
		border-color: #2B9439;
		-webkit-transform: translateY(4px);
		transform: translateY(4px);
		-webkit-box-shadow: none;
		box-shadow: none;
	}
		**/

/**cf7内のcssに書かれている項目左側のマージンを無効化**/
.wpcf7-list-item {
	margin: 0;
}

/**チェックボックスを1行2項目で並ぶように制御**/
span.wpcf7-form-control.wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

/** チェックボックス内のラベルを大きくしてボタン風に見せる**/
span.wpcf7-form-control.wpcf7-checkbox label{
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 16px;
	border: 1px solid #275e9d;
	border-radius: 8px;
	cursor: pointer;
	-webkit-box-shadow: 0 4px #275e9d;
	box-shadow: 0 4px #275e9d;
	gap: 10px;
	transition: 0.4s;
}

/**チェックボックスの画像制御**/
.wpcf7-checkbox.image-box .wpcf7-list-item-label::before {
	content: "";
	display: inline-block;
	height: 50px;
	width: 70px;
	margin-right: 10px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/**建物構造の選択肢の画像設定 --start **/
.construction_type .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::before {
	background-image: url('../images/form/01_mokuzo.png');
}
.construction_type .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::before {
	background-image: url('../images/form/02_tekkotsuzo.png');
}
.construction_type .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label::before {
	background-image: url('../images/form/03_rczo.png');
}
.construction_type .wpcf7-list-item:nth-child(4) .wpcf7-list-item-label::before {
	background-image: url('../images/form/04_other.png');
}
/**建物構造の選択肢の画像設定 --end **/

/**建物の種類の選択肢の画像設定 --start **/
.building_type .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::before {
	background-image: url('../images/form/05_ikkodate.png');
}
.building_type .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::before {
	background-image: url('../images/form/06_apart.png');
}
.building_type .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label::before {
	background-image: url('../images/form/07_building.png');
}
.building_type .wpcf7-list-item:nth-child(4) .wpcf7-list-item-label::before {
	background-image: url('../images/form/08_prefab.png');
}
.building_type .wpcf7-list-item:nth-child(5) .wpcf7-list-item-label::before {
	background-image: url('../images/form/09_naiso.png');
}
.building_type .wpcf7-list-item:nth-child(6) .wpcf7-list-item-label::before {
	background-image: url('../images/form/10_question.png');
}
/**建物の種類の選択肢の画像設定 --end **/

/**tabでの項目移動時及び、マウスカーソルが当たった場合の制御**/
.wpcf7-list-item:has(input:focus) label,
span.wpcf7-form-control.wpcf7-checkbox label:hover {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	-webkit-box-shadow: none;
	box-shadow: none;
}

/** チェックが入った場合の表示制御**/
.wpcf7-list-item:has(input:checked) label {
	border-color: #2B9439;
	background-color: #DAF7DC;
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	-webkit-box-shadow: none;
	box-shadow: none;
}

/**デフォルトのチェックボックスを見えないようにする制御**/
.wpcf7-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/**チェックボックス内のテキストの縦を中央揃え**/
.wpcf7-checkbox span.wpcf7-list-item-label {
	display: flex;
	align-items: center;
}

/**入力後の制御(テキスト項目 & セレクトボックス)**/
.wpcf7-form input.completed,
.wpcf7-form textarea.completed,
.wpcf7-form select.completed {
	border-color: #2B9439!important;
	background-color: #DAF7DC;
	/**
		-webkit-transform: translateY(4px);
		transform: translateY(4px);
		-webkit-box-shadow: none!important;
		box-shadow: none!important;
		**/
}

/**同意チェックの形式変更**/
.wpcf7-acceptance input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* 擬似チェックボックス */
.wpcf7-acceptance input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.wpcf7-acceptance .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid #275e9d;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	transition: all .2s ease;
	box-shadow: 0 0 0 3px transparent;
	margin: 0;
	margin-right: 10px;
}

/**
	.wpcf7-acceptance .wpcf7-list-item:hover {
		background: #DAF7DC;
		border-color: #2B9439;
	}
	**/

.wpcf7-acceptance .wpcf7-list-item:has(input:checked) {
	background: #DAF7DC;
	border-color: #2B9439;
}

.wpcf7-acceptance .wpcf7-list-item:has(input:checked)::after {
	content: "";
	position: absolute;
	width: 6px;
	height: 12px;
	border-right: 3px solid #222;
	border-bottom: 3px solid #222;
	transform: rotate(45deg);
}

/**個人情報の同意チェックとテキストの高さがズレるのを補正**/
p.pmark.center > label {
	display: flex;
	justify-content: center;
}

/**OK時のバッジレイアウト調整 **/
.field-badge.is-ok.completed {
	background-color: #2B9439;
	display: inline-block;
	text-align: center;
	line-height: unset;
}

/**送信ボタンのデザイン**/
button[type="submit"]#formbtn {
	position: relative;
	display: block;
	text-align: center;
	font-weight: bold;
	border-radius: 8px;
	line-height: 1.2;
	padding: 25px 10px;
	border: solid 1px;
	background: #E8E8E8;
	color: #7F7F7F;
	border-color: #7F7F7F;
	-webkit-box-shadow: 0 4px #7F7F7F;
	box-shadow: 0 4px #7F7F7F;
}

/**送信ボタンのデザイン(全て入力時)**/
button[type="submit"]#formbtn.completed {
	cursor: pointer;
	background: #FFA524;
	color: #000;
	border-color: #FFA524;
	-webkit-box-shadow: 0 4px #B86E04;
	box-shadow: 0 4px #B86E04;
	transition: 0.4s;
}

/**送信ボタンのデザイン(全て入力時 ボタンフォーカス時)**/
button[type="submit"]#formbtn.completed:focus,
button[type="submit"]#formbtn.completed:hover {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	-webkit-box-shadow: none;
	box-shadow: none;
}

/**フォーム送信時のスピナー表示**/
.spinner {
	display: none;
	width: 25px;
	height: 25px;
	margin-left: 8px;
	border: 4px solid #ccc;
	border-top-color: #2B9439;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

.form_submit.loading span.btn-text {
	display: none;
}

.form_submit.loading .spinner {
	display: inline-block;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@media(max-width:768px){
	/**チェックボックスの画像とテキストを縦積み。全般文字をセンタリング**/
	.wpcf7-checkbox span.wpcf7-list-item-label {
		flex-direction: column;
		text-align: center;
	}
	
	/**チェックボックスの画像とテキストをセンタリング**/
	span.wpcf7-form-control.wpcf7-checkbox label {
		justify-content: center;
	}
	
	/**チェックボックスの画像とテキスト用のスペースを削除**/
	.wpcf7-checkbox.image-box .wpcf7-list-item-label::before {
		margin-right: 0px;
	}
	
	p.pmark.center > label {
		display: block;
	}
}