@charset "utf-8";



#loading {
	position: fixed;
	inset: 0;
	width: 100svw;
	height: 100lvh;
	z-index: 99999;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background: #fff;
	color: #fff;

	opacity:0;
	pointer-events:none;
	transition:opacity 0.1s ease-out;
}
#loading.active{
	opacity:1;
	pointer-events:all;
}

.spinner {
	width: 48px;
	height: 48px;
	border: 4px solid rgba(0, 0, 0, 0.3);
	border-top-color: #000;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 12px;
}

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



.contactForm{
	width:640px;
	max-width:100%;
	margin:0 auto;
	padding:0;
	display:block;
	font-size:16px;
	line-height:1.75;
}
/*
.contactForm.mobile{
	width:86vw;
	font-size:max(3vw,16px);
}
*/

.contactProgress{
	width:100%;
	display:flex;
	margin-bottom:60px;
}
.contactProgress > div{
	width:33.33%;
	height:50px;
	background:#522e27;
	color:white;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	border-radius:3px;
	opacity:0.5;
}
.contactProgress > div:nth-child(1){
	clip-path:polygon(0% 0%,95% 0%,100% 50%,95% 100%,0% 100%);
}
.contactProgress > div:nth-child(2){
	clip-path:polygon(0% 0%,95% 0%,100% 50%,95% 100%,0% 100%,5% 50%);
}
.contactProgress > div:nth-child(3){
	clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%,5% 50%);
}
.contactProgress > div.active,
[data-phase="input"] .contactProgress > div:nth-child(1),
[data-phase="confirm"] .contactProgress > div:nth-child(2){
	opacity:1;
}


.contactRow{
	margin-bottom:30px;
}
.contactHeader{
	margin-bottom:10px;
	display:flex;
	justify-content:left;
	align-items:center;
}
.contactHeader .required{
	font-size:70%;
	line-height:1;
	display:inline-block;
	padding:0.2em 0.5em;
	background:#522e27;
	color:white;
	margin-left:10px;
	border-radius:3px;
}
.contactColmun{
	word-break:break-all;
}
.contactError{
	margin-top:0.3em;
	padding:0.5em 1em;
	background:#ffeeee;
	color:#cc3333;
}
.contactError:empty{display:none}
.contactError:blank{display:none}


.contactForm input[type="text"],
.contactForm input[type="email"],
.contactForm input[type="tel"],
.contactForm textarea,
.contactPulldown,
.contactAgreement label{
	appearance:none;
	width:100%;
	height:3em;
	padding:0 0.7em;
	font-size:inherit;
	line-height:1.65;
	border:1px solid #522e2744;
	border-radius:0.2em;
	outline-color:#522e27;
	margin:0;
}
.contactPulldown{
	width:fit-content;
	padding-right:2em;
	cursor:pointer;
	position:relative;
}
.contactPulldown::after{
	content:"";
	position:absolute;
	display:block;
	width:0.5em;
	height:0.5em;
	right:calc(3em * 0.5 - 0.5em * 0.5);
	top:calc(3em * 0.5 - 0.5em * 0.66);
	border-right:1px solid #522e27;
	border-bottom:1px solid #522e27;
	transform:rotate(45deg);
}
.contactPulldown select{
	appearance:none;
	width:auto;
	height:3em;
	font-size:inherit;
	border:none;
	outline-color:#522e27;
	background:none;
	cursor:pointer;
}
.contactForm input[type="tel"]{
	max-width:14em;
}
.contactForm input[type="text"]:not(:first-child),
.contactForm input[type="email"]:not(:first-child),
.contactForm input[type="tel"]:not(:first-child){
	margin-top:0.3em;
}
.contactForm textarea{
	height:10em;
	padding-top:0.5em;
	padding-bottom:0.5em;
}
.contactColumn:has(textarea){
	display:flex;
}
.contactForm input::placeholder,
.contactForm textarea::placeholder{
	color:#522e2755;
}
.contactForm input:disabled{
	display:none;
}
.contactAgreement p{
	margin:0;
	text-align:center;
}
.contactForm:not(.mobile) .contactAgreement p br{
	display:none;
}
.contactAgreement p a{
	text-decoration:underline;
	text-underline-offset:0.2em;
}
.contactAgreement label{
	display:flex;
	justify-content:center;
	align-items:center;
	cursor:pointer;
	position:relative;
	width:12em;
	height:3em;
	margin:1em auto 0;
	padding:0 0 0 40px;
}
.contactAgreement label span{
	display:block;
	width:100%;
	text-align:center;
	white-space:nowrap;
}
.contactAgreement input[type="checkbox"]{
	display:none;
}
.contactAgreement label::before,
.contactAgreement label::after{
	content:"";
	width:1.5em;
	height:1.5em;
	display:block;
	position:absolute;
	left:calc(2em - 1.5em * 0.5);
	top:calc(50% - 1.5em * 0.5);
}
.contactAgreement label::after{
	border-radius:2em;
	background:#f3f3f3;
}
.contactAgreement label:has(input:checked)::before{
	z-index:5;
	background:#522e27;
	clip-path: polygon(90% 0, 100% 0, 100% 100%, 50% 100%, 50% 90%, 90% 90%);
    transform: translate(-10%,-30%) rotate(45deg);
}
.contactAgreement .contactError{
	text-align:center;
}

.contactButtons{
	padding:0 5%;
	margin-top:4em;
	display:flex;
	justify-content:center;
	gap:4%;
}
.contactButtons button{
	width:48%;
	height:3em;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:100%;
	font-weight:bold;
	line-height:1;
	white-space:nowrap;
	border-radius:2em;
	cursor:pointer;
}
.contactButtonConfirm,.contactButtonSubmit{
	color:white;
	background:#522e27;
	border:1px solid #522e27;
}
.contactButtonBack{
	color:#666;
	background:#ccc;
	border:1px solid #ccc;
}


.contactForm.complete{
	padding-top:5em;
	padding-bottom:5em;
}
.contactCompleteTitle{
	margin:0;
	font-size:150%;
	font-weight:bold;
	color:#522e27;
	text-align:center;
}
.contactCompleteMessage{
	margin:2em 0 0 0;
	text-align:center;
}
.contactCompleteButton{
	margin:2em auto 0;
	width:12em;
	height:2.5em;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:100%;
	line-height:1;
	white-space:nowrap;
	border-radius:0.2em;
	background:#522e27;
	color:white;
	text-decoration:none;
}




.contactForm:not(.mobile) .contactAgreement label:hover{
	border-color:#522e27;
}
.contactForm:not(.mobile) .contactButtons button[type="submit"]:hover{
	background:white;
	color:#522e27;
}
.contactForm:not(.mobile) .contactButtons button[type="button"]:hover{
	opacity:0.7;
}
.contactForm:not(.mobile) .contactCompleteButton:hover{
	text-decoration:none;
	opacity:0.7;
}



.contactErrors{
	margin-top:60px;
	text-align:center;
	color:#cc3333;
}
.contactErrors:blank{display:none;}
.contactErrors:empty{display:none;}


[data-phase="input"] .forConfirm{display:none !important;}
[data-phase="confirm"] .forInput{display:none !important;}

[data-phase="confirm"] input,
[data-phase="confirm"] textarea,
[data-phase="confirm"] select{
	pointer-events:none;
	outline:none;
}
[data-phase="confirm"] input[type="text"],
[data-phase="confirm"] input[type="email"],
[data-phase="confirm"] input[type="tel"],
[data-phase="confirm"] textarea,
[data-phase="confirm"] .contactPulldown,
[data-phase="confirm"] label{
	border:none;
	background:#f3f3f3;
	pointer-events:none;
}
[data-phase="confirm"] .contactPulldown::after{
	content:none;
}