@charset "utf-8";
/*-----------------------------------------------
 * FORM - CONTACT
-------------------------------------------------*/
#form{
	position: relative;
}
.contentInner{
	width: 100%;
	max-width: min(calc(1920 / var(--vw-min) * 100vw), 1920px);
	padding: 0 min(calc(96 / var(--vw-min) * 100vw), calc(96px * var(--max-percent)));
	margin-top: min(calc(24 / var(--vw-min) * 100vw), 40px);
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width:768px){
	#form{
		overflow: hidden;
	}
	.contentInner{
		padding: 0 calc(32 / var(--vw-min) * 100vw);
		margin-top: calc(48 / var(--vw-min) * 100vw);
		max-width: 100%;
	}
}


/*-----------------------------------------------
 * FORM - FORMAREA
-------------------------------------------------*/
.formArea{
	width: 100%;
	max-width: 1008px;
	margin: 0 auto;
	position: relative;
}
.formLists{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: min(calc(32 / var(--vw-min) * 100vw), 32px);
}
.formList{
	width: 100%;
	border-radius: min(calc(10 / var(--vw-min) * 100vw), 10px);
	border: 4px solid var(--color-yellow);
	display: flex;
	align-items: stretch;
	background-color: var(--color-yellow);
}
.formList__dt{
	width: min(calc(272 / var(--vw-min) * 100vw), 272px);
	flex-shrink: 0;
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	font-weight: 700;
	padding: min(calc(32 / var(--vw-min) * 100vw), 32px) min(calc(28 / var(--vw-min) * 100vw), 28px);
	letter-spacing: 0;
}
.--required .formList__dt--txt:after{
	content: '*';
	margin-left: 0.125em;
	color: #ff0000;
	font-weight: 900;
}
.formList__dd{
	width: 100%;
	position: relative;
}
.formList__dd > p{
	height: 100%;
}
.formList__dd .wpcf7-form-control-wrap{
	display: block;
	height: 100%;
}


@media screen and (max-width:768px){
	.formArea{
		max-width: 100%;
	}
	.formLists{
		gap: calc(32 / var(--vw-min) * 100vw);
	}
	.formList{
		border-width: calc(4 / var(--vw-min) * 100vw);
	}
	.formList__dt{
		width: calc(196 / var(--vw-min) * 100vw);
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding: calc(32 / var(--vw-min) * 100vw) calc(16 / var(--vw-min) * 100vw);
	}
}




.formList__dd input,
.formList__dd select,
.formList__dd textarea {
	display: block;
	width: 100%;
	border: unset;
	outline: none;
	background-color: #fff;
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	font-weight: 700;
	padding: min(calc(16 / var(--vw-min) * 100vw), 16px) min(calc(30 / var(--vw-min) * 100vw), 30px);
	border-radius: 0 min(calc(10 / var(--vw-min) * 100vw), 10px) min(calc(10 / var(--vw-min) * 100vw), 10px) 0;
}
.formList__dd input,
.formList__dd select {
	height: 100%;
}


/* select */
.formList__dd select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: min(calc(112 / var(--vw-min) * 100vw), 112px);
	position: relative;
}
.--select .formList__dd:before {
	content: '';
	position: absolute;
	top: 0;
	right: min(calc(32 / var(--vw-min) * 100vw), 32px);
	bottom: 0;
	width: min(calc(44 / var(--vw-min) * 100vw), 44px);
	height: min(calc(44 / var(--vw-min) * 100vw), 44px);
	-webkit-mask: url(../img/common/icon_arrow2.svg) no-repeat center / contain;
	mask: url(../img/common/icon_arrow2.svg) no-repeat center / contain;
	background-color: var(--color-yellow);
	margin: auto 0;
	z-index: 1;
	pointer-events: none;
}

/* textarea */
.formList__dd textarea {
	min-height: 100%;
	resize: none;
}

@media screen and (max-width:768px){
	.formList__dd input,
	.formList__dd select,
	.formList__dd textarea {
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding: calc(32 / var(--vw-min) * 100vw) calc(16 / var(--vw-min) * 100vw);
	}

	.formList__dd select {
		padding-right: calc(80 / var(--vw-min) * 100vw);
	}
	.--select .formList__dd:before {
		right: calc(20 / var(--vw-min) * 100vw);
		width: calc(32 / var(--vw-min) * 100vw);
		height: calc(32 / var(--vw-min) * 100vw);
	}
}




/**
* formBtn
**/
.formBtn__area{
	display: flex;
	justify-content: center;
	gap: min(calc(32 / var(--vw-min) * 100vw), 32px);
	margin-top: min(calc(56 / var(--vw-min) * 100vw), 56px);
}
.formBtn__area .com__link .wpcf7-spinner{
	display: none;
}
.formBtn__area .com__link--txt{
	height: min(calc(26 / var(--vw-min) * 100vw), 26px);
}
.formBtn__area .com__link--txt[data-txt="txt_shusei"],
.formBtn__area .com__link--txt[data-txt="txt_soushin"]{
	width: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: #000;
	transition: background-color .3s ease;
	pointer-events: none;
}
[data-txt="txt_shusei"]{
	-webkit-mask-image: url(../img/common/txt/txt_shusei.png);
	mask-image: url(../img/common/txt/txt_shusei.png);
}
[data-txt="txt_soushin"]{
	-webkit-mask-image: url(../img/common/txt/txt_soushin.png);
	mask-image: url(../img/common/txt/txt_soushin.png);
}

.formBtn__area input[type="submit"],
.formBtn__area input[type="reset"] {
	position: absolute;
	top: 0;
	left: 0;
	color: transparent;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: auto;
	cursor: pointer;
}
@media screen and (max-width:768px){
	.formBtn__area{
		gap: calc(12 / var(--vw-min) * 100vw);
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}

.wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output{
	background-color: #FFF;
	border-radius: 8px;
	padding: 1em;
	border-color: var(--color-yellow);
	font-weight: 700;
}

.wpcf7-not-valid-tip{
	display: inline-block;
	padding: 0.2em 0.5em;
	line-height: 1;
	background-color: #FFF;
	font-weight: 700;
	border: 2px solid var(--color-yellow);
	border-radius: 8px;
	position: absolute;
	bottom: -1em;
	left: 0.25em;
}



/**
* Animation
**/
/* faq__navList */
.formList,
.formBtn__area,
.cf-turnstile{
	opacity: 0;
	transform: translateY(min(calc(48 / var(--vw-min) * 100vw), 48px));
	transition: transform .6s cubic-bezier(.46,.21,.24,1) .125s, opacity .3s ease .125s;
}
.formBtn__area,
.cf-turnstile{
	transition-delay: .3s;
}
.--is-ani .formList,
.--is-ani .formBtn__area,
.--is-ani .cf-turnstile{
	opacity: 1;
	transform: translateX(0px);
}

.formList:nth-of-type(1){
	transition-delay: 0.050s;
}
.formList:nth-of-type(2){
	transition-delay: 0.100s;
}
.formList:nth-of-type(3){
	transition-delay: 0.150s;
}
.formList:nth-of-type(4){
	transition-delay: 0.200s;
}
.formList:nth-of-type(5){
	transition-delay: 0.250s;
}
.formList:nth-of-type(6){
	transition-delay: 0.300s;
}


.cf-turnstile{
	text-align: center;
	margin-top: min(calc(32 / var(--vw-min) * 100vw), 32px);
}