@charset "utf-8";

:root{ --header-height: clamp(60rem, calc( 100 / var(--inr) * 100vw ), 100rem); }

body.drawerExpanded{ overflow: hidden; }


/* inner */
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
.inr-narrow{ max-width: calc(var(--inr-narrow) * 1rem); }
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem); }
.inr-footer{ max-width: calc(var(--inr-footer) * 1rem); }




.sticky-form{ position: sticky; bottom: 0; z-index: 9; background:#000;
	.inr{ display: grid; gap: 10rem 20rem; padding: 20rem 0; }
	.tel{ margin-right: 50rem; font-size: 27rem; letter-spacing: -.02em; color: #fff; font-family: var(--font-gmk); }
	.tel .num {color: #ec9700; font-size: 28rem; margin-left:10rem; }
	.tel::selection{ background: #fff; color: var(--primary); }
	.input-group{ display: grid; grid-template-columns: 2fr 3fr 2fr; gap: 12rem; max-width: 754rem; }
	input, select{ margin: 0; min-width: 0; border: 0; }
	:where(input, select)::placeholder{ color: var(--gray); }
	:is(.name, .contact, .region){ width: 100%; height: 48rem; padding: 0 15rem; border-radius: 3rem; font-size: 18rem; }
	/*.region{ background: #fff url('/images/main/sticky-form-select-arrow.svg') no-repeat calc(100% - 16rem) 50% / 11rem; }*/
	.btn-group{ display: inline-flex; gap: 54rem; }
	.agreement-label{ display: inline-flex; align-items: center; gap: .4ch; font-size: 15rem; color: #fff; }
	.agreement-group{ contain: content; margin-right: 7rem; display: inline-block; width: 18rem; height: 18rem; border-radius: 50%; }
	.agreement{ display: block; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; accent-color: var(--black); }
	.agreement:not(:checked){ appearance: none; background: 0; border: 1px solid #fff; }
	.agreementCheckbox{ text-decoration: underline; text-underline-offset: 3px; }
	.submit{ width: 170rem; height: 50rem; background: #ffb412; border-radius: 3rem; font-size: 18rem; font-weight:600; color: #000; }
	@media(min-width:1280px){
		.inr{ grid-template-columns: auto 1fr auto; align-items: center;}
		.tel{ translate: 0 6%; }
	}
	@media(max-width:1279px) and (min-width:768px){
		.inr{ grid-template-columns: 1fr auto; align-items: center;  }
		.tel{ grid-column: 1/-1; }
	}
	@media(max-width:767px){
		.tel{font-size: 23rem;}
		.tel .num {font-size: 24rem;}
		.btn-group{ justify-content: space-between; gap: 0; }
	}
}