@charset "UTF-8";

/*************
contact
*************/

#contact01,
#contact02,
#contact03 {
	background-color: var(--bg2-color);
}
#contact01.section_padding,
#contact02.section_padding,
#contact03.section_padding {
	padding-top: 64px;
	padding-bottom: 64px;
}
.contact_h2 {
	font-size: 32px;
	font-weight: bold;
}
.form_item {
	margin-top: 40px;
}
.form_hd {
	font-size: 16px;
	font-weight: bold;
	display: block;
}

.form_hd_chech{
	font-size: 16px;
	font-weight: bold;
	display: block;
	margin-bottom: 16px;
}

.form_caution {
	font-size: 14px;
	margin-top: 8px;
}
span.must {
	display: inline-block;
	background-color: #d73333;
	color: #FFF;
	font-size: 12px;
	padding: 0 4px;
	margin-left: 8px;
	vertical-align: middle;
	letter-spacing: 0.05em;
}
.form_item input, select, textarea,.wpcf7-select {
	width: 100%;
	background-color: #FFF;
	border: 1px solid var(--gray-color);
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 15px;
}
::placeholder {
	color: var(--gray-light);
}
.select_wrap {
	/* position: relative;
	margin-top: 8px;
	width: 10%; */
}
select {
	margin-top: 0;
}
.select_wrap:after,.wpcf7-select:after {
	content: "";
	border-bottom: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(45deg);
	position: absolute;
	left: 135px;
    top: 28px;
    width: 12px;
    height: 12px;
}
textarea {
	height: 168px;
	resize: vertical;
}
.form_input_flex {
	display: flex;
	gap: 8px;
	width: 50%;
}

.text_link {
	text-decoration: underline;
}
.form_item input.width50 {width: 50%;}
.form_item input.width25 {width: 25%;}
.form_item input.width10 {width: 10%;}

input[type="checkbox"] {
	display: none;
}
.checkbox_box_flex {
	display: flex;
	gap: 2%;
	flex-wrap: wrap;
}
.checkbox_box {
	position: relative;
	padding-left: 25px;
	margin-top: 16px;
}
.checkbox_box.width32 {width: 32%;}

.form_checkbox_label {
	font-size: 16px;
	cursor: pointer;
}
.checkbox_check {
	position: absolute;
	top: 4px;
	left: 0;
	height: 17px;
	width: 17px;
	border: solid 2px var(--gray-color);
	background-color: #FFF;
	border-radius: 3px;
	box-sizing: border-box;
	cursor: pointer;
}
.checkbox_check:after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	width: 6px;
	height: 11px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}
.checkbox_box input:checked + .checkbox_check {
	background: var(--primary-color);
	border-color: var(--primary-color);
}
.checkbox_box input:checked + .checkbox_check:after {
	opacity: 1;
}
.radio_box_flex {
	display: flex;
	margin-top: 16px;
}
.form_radio_box.width50 {width: 50%;}
.form_radio_box.width25 {width: 25%;}
/* input[type="radio"] {
	display: none;
} */
.form_radio_box {
	position: relative;
	/* padding-left: 25px; */
}
.form_radio_label {
	font-size: 16px;
	cursor: pointer;
}
.radio_check {
	position: absolute;
	top: 4px;
	left: 0;
	height: 17px;
	width: 17px;
	border: solid 1px var(--gray-color);
	background-color: #FFF;
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
}
.radio_check:after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	opacity: 0;
	background-color: var(--primary-color);
}
.form_radio_label input:checked + .radio_check:after {
	opacity: 1;
}
.contact_btn_link {
	display: block;
	width: 100%;
	background-color: var(--primary-color);
	color: #FFF;
	font-weight: bold;
	border-radius: 50px;
	padding: 16px 32px;
	margin: 48px auto 0;
	max-width: 280px;
	text-align: center;
	transition: all .3s;
}
.contact_btn_link:hover {
	opacity: 0.7;
}




@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {
	#contact01.section_padding,
	#contact02.section_padding,
	#contact03.section_padding {
		padding-top: 32px;
		padding-bottom: 32px;
	}
	.form_item input.width50 {width: 100%;}
	.form_item input.width25 {width: 50%;}
	.form_item input.width10 {width: 25%;}

	.checkbox_box.width32 {width: 100%;}

	.form_input_flex {
		width: 100%;
	}
	.form_radio_box.width50 {width: 100%;}
	.form_radio_box.width25 {width: 100%;}

	.select_wrap {
		/* width: 25%; */
	}
	.radio_box_flex {
		flex-wrap: wrap;
		row-gap: 16px;
	}
}

/*************
confirm
*************/
#confirm01,
#confirm02,
#confirm03 {
	background-color: var(--bg2-color);
}
#confirm01.section_padding,
#confirm02.section_padding,
#confirm03.section_padding {
	padding-top: 64px;
	padding-bottom: 64px;
}
.preview_item {
	margin-top: 24px;
	padding-top: 24px;
	display: flex;
	border-top: 1px solid var(--gray-light);
}
.preview_item.last_preview_item {
	border-bottom: 1px solid var(--gray-light);
	padding-bottom: 24px;

}
.preview_item .form_hd {
	width: 300px;
}
.preview_item .form_preview {
	flex: 1;
}
.confirm_top_text {
	margin-top: 32px;
}

.button_wrap {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 48px;
}
.back_btn {
	display: block;
	width: 100%;
	background-color: var(--primary-color);
	color: #FFF;
	font-weight: bold;
	border-radius: 50px;
	padding: 16px 32px;
	margin: 0;
	max-width: 280px;
	text-align: center;
	transition: all .3s;
}
.back_btn:hover {
	opacity: 0.7;
}
.submit_btn {
	display: block;
	width: 100%;
	background-color: var(--primary-color);
	color: #FFF;
	font-weight: bold;
	border-radius: 50px;
	padding: 16px 32px;
	margin: 0;
	max-width: 280px;
	text-align: center;
	transition: all .3s;
}
.submit_btn:hover {
	opacity: 0.7;
}
@media screen and (max-width: 768px) {
	.preview_item {
		flex-direction: column;
	}
	.preview_item .form_hd {
		width: auto;
	}
	.preview_item .form_preview {
		margin-top: 16px;
	}
}

/*************
complete
*************/
#complete01,
#complete02,
#complete03 {
	background-color: var(--bg2-color);
}
#complete01.section_padding,
#complete02.section_padding,
#complete03.section_padding {
	min-height: calc(100vh - 642px);
	padding-top: 64px;
	padding-bottom: 64px;
}
.complete_text {
	margin-top: 32px;
	line-height: 2;
}

@media screen and (max-width: 1024px) {
	#complete01.section_padding,
	#complete02.section_padding,
	#complete03.section_padding {
	min-height: calc(100vh - 453px);
}
}
@media screen and (max-width: 768px) {
	#complete01.section_padding,
	#complete02.section_padding,
	#complete03.section_padding {
	min-height: calc(100vh - 480px);
}
}

#contact{
	border-top: none!important;
	padding-top: 25px!important;
    padding-bottom: 25px!important;
}

.wpcf7-radio{
	display: grid;
	grid-template-columns: 25% 25% auto;
	gap: 14px;
}


.wpcf7-list-item.first {
  margin: 0;
}
.wpcf7-list-item-label {
  cursor: pointer;
  display: flex;
  align-items: center;
}
/* デフォルトのボタン */
input[type="radio"] {
  opacity: 0; /* デフォルトのボタンを非表示 */
  position: absolute;
}
/* チェック前のボタン */
.form_radio_box .wpcf7-list-item-label::before {
	border: solid 2px var(--gray-color);
	background-color: #FFF;
  border-radius: 100%; /* ラジオボタンっぽく丸くする */
  content: "";
  height: 22px;
  margin-bottom: auto;
  margin-right: .5em;
  margin-top: auto;
  transition: background-color .5s; /* 色をじんわり変化させる */
  width: 22px;
  min-width: 22px;
}
/* チェック後のボタン */
input[type="radio"]:checked + .wpcf7-list-item-label::before {
	background: var(--primary-color); /* チェック後の中心の色 */
  box-shadow: inset 0 0 0 3px #fff; /* 中心の色のスタイル */
}


.wpcf7-checkbox{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	gap: 14px;
}
.wpcf7-form-control-wrap {
	display: block;
  }
  span.wpcf7-list-item {
	margin: 0 30px 0 0; /* 項目右側の余白設定と、デフォルトの左側の余白を打ち消す */
	position: relative;
  }
  .wpcf7-list-item-label {
	cursor: pointer; /* labelにhoverした時にカーソルを表示させる */
	font-size: 16px; /* 項目のフォントサイズ */
  }
  input[type="checkbox"] {
	opacity: 0; /* デフォルトのチェックボックスを見えなくする */
	position: absolute;
  }
  .wpcf7-list-item-label::before {
	/* チェックボックスのデザイン */
	border: solid 2px var(--gray-color);
    background-color: #FFF;
	content: "";
	display: inline-block;
	height: 17px;
	margin-right: 10px;
	position: relative;
	top: -1px;
	vertical-align: middle;
	width: 17px;
	min-width: 17px;
	transition: background-color .5s; /* 色をじんわり変化させる */

  }
  input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
	/* チェックアイコン */
	background: url(../img/check.png) no-repeat center;
	background-size: contain;
	content: "";
	height: 17px;
	left: 1px;
	position: absolute;
	top: 2px;
	width: 17px;
	min-width: 17px;

  }
  input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
	/* チェックしたボックスの背景色を設定 */
	background: var(--primary-color);
  }
  .select_wrap{
	position: relative;
  }
	.select_wrap .wpcf7-form-control-wrap{
		margin-top: 8px;
		width: 160px;
	}
  @media screen and (max-width: 768px) {
	.wpcf7-checkbox,.wpcf7-radio{
		grid-template-columns: 1fr;
	}


}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
	border: none!important;
	text-align: center;
	color: #dc3232!important;
}

.wpcf7-spinner{
	display: none!important;
}

.wpcf7 form.sent .wpcf7-response-output{
	display: none!important;
}