/* -------------------------------base(mobile)↓-------------------------------------- */
/* form start */
.form{
	margin-top: calc(calc(100 - 60) * var(--site-font-size-ratio));
	padding: 0 calc(15 * var(--site-font-size-ratio));
}
.form>fieldset>legend{
	font-size: calc(28 * var(--site-font-size-ratio));
	font-weight: 900;
	color: #FF4A4A;
	text-align: center;
}
.form>fieldset>div{
	margin-top: calc(calc(222 - 100 - 68) * var(--site-font-size-ratio));
	border-radius: calc(20 * var(--site-font-size-ratio));
	background-color: #ffffff;
	padding: calc(20 * var(--site-font-size-ratio)) calc(20 * var(--site-font-size-ratio)) calc(calc(202 + 700 - 802 - 60) * var(--site-font-size-ratio));
}
.form>fieldset>div>div{
	margin-bottom: calc(20 * var(--site-font-size-ratio));
}
.form>fieldset>div>div:has(.err){
	position: relative;
	margin-bottom: calc(50 * var(--site-font-size-ratio));
}
.form>fieldset>div>div:has(.err)::before{
	color: red;
	font-weight: 700;
	font-size: calc(12 * var(--site-font-size-ratio));
	letter-spacing: 0em;
	position: absolute;
	bottom: 0;
	transform: translateY(100%);
}
.form>fieldset>div>div.name:has(.err)::before{
	content: "お名前を入力してください！";
}
.form>fieldset>div>div.tel:has(.err)::before{
	content: "※半角数字10桁もしくは11桁で電話番号を入力してください。ハイフンは不要です。";
}
.form>fieldset>div>div.email:has(.err)::before{
	content: "正しいメールアドレスを入力してください！記号、スペースなど使用できない文字が含まれています。";
}
.form>fieldset>div>div.postal:has(.err)::before{
	content: "※半角数字7桁で郵便番号を入力してください。ハイフンは不要です。";
}
.form>fieldset>div>div.agree:has(.err)::before{
	content: "※チェックボックスにチェックを入れてください。";
}
.form>fieldset>div>div.services:has(.err)::before{
	content: "※ご希望のサービスを選択してください。";
}
.form>fieldset>div>div.services:has(.err_text)::before{
	content: "※ご要望等をご記入ください。";
}
.form>fieldset>div>div>label{
	font-size: calc(16 * var(--site-font-size-ratio));
	font-weight: 900;
	display: flex;
	align-items: flex-end;
	gap: calc(calc(97 - 35 - 48) * var(--site-font-size-ratio));
}
.form>fieldset>div>div>label::after{
	content: "必須";
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(44 * var(--site-font-size-ratio));
	height: calc(27 * var(--site-font-size-ratio));
	font-size: calc(14 * var(--site-font-size-ratio));
	background-color: #FF4A4A;
	color: #ffffff;
	font-weight: 400;
}
.form>fieldset>div>div.email>label::after,
.form>fieldset>div>div.postal>label::after,
.form>fieldset>div>div.province>label::after,
.form>fieldset>div>div.address>label::after{
	content: "任意";
	background-color: #9F9F9F;
}
.form>fieldset>div>div:last-of-type{
	font-size: calc(13 * var(--site-font-size-ratio));
	font-weight: 900;
}
.form>fieldset>div>div:last-of-type>label{
	display: inline;
	padding-right: calc(10 * var(--site-font-size-ratio));
}
.form>fieldset>div>div:last-of-type>label::after{
	content: none;
}
.form>fieldset>div>div:last-of-type>label>input[type='checkbox'],
.form>fieldset>div>div>div>label>input[type='checkbox']
{
	transform: scale(1.25);
}
.form>fieldset>div>div>div>label>input[type='checkbox']{
	margin-right: calc(3 * var(--site-font-size-ratio));
}
.form>fieldset>div>div:last-of-type>a{
	color: inherit;
}
.form>fieldset>div>div>input[type='text'],
.form>fieldset>div>div>input[type='tel'],
.form>fieldset>div>div>input[type='email'],
.form>fieldset>div>div>div>input[type='text']
{
	padding: calc(calc(359 - 349) * var(--site-font-size-ratio)) calc(calc(55 - 35) * var(--site-font-size-ratio));
	background-color: #F2F2F2;
	font-weight: 500;
	font-size: calc(13 * var(--site-font-size-ratio));
	color: #A3A3A3;
	border: none;
	width: 100%;
	height: calc(50 * var(--site-font-size-ratio));
	border-radius: calc(8 * var(--site-font-size-ratio));
	margin-top: calc(calc(34 - 27) * var(--site-font-size-ratio));
}
.form>fieldset>div>div>div>input[type='text']{
	font-size: calc(12 * var(--site-font-size-ratio));
}
.form>fieldset>div>div>input[type='text'].has-value,
.form>fieldset>div>div>input[type='tel'].has-value,
.form>fieldset>div>div>input[type='email'].has-value,
.form>fieldset>div>div>div>input[type='text'].has-value
{
	color: #000000;
}
.form>fieldset>div>div>div.postal-error{
	display: none;
	color: red;
	font-weight: 700;
	font-size: calc(10 * var(--site-font-size-ratio));
}
.form>fieldset>div>div>div{
	margin-top: calc(calc(778 - 734 - 27) * var(--site-font-size-ratio));
	display: flex;
	flex-wrap: wrap;
	gap: calc(10 * var(--site-font-size-ratio));
	justify-content: space-between;
}
.form>fieldset>div>div>div>label{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: calc(145 * var(--site-font-size-ratio));
	height: calc(33 * var(--site-font-size-ratio));
	border: calc(1 * var(--site-font-size-ratio)) solid #464646;
	border-radius: calc(8 * var(--site-font-size-ratio));
	padding-left:calc(4 * var(--site-font-size-ratio));
	font-size: calc(12.5 * var(--site-font-size-ratio));
	font-weight: 900;
}
.form>fieldset>div>div>div>label>span{
	color: #FF4A4A;
}
.form>fieldset>div>div>div>label:has(input[value='999999']){
	width: 100%;
}
.form>fieldset>div>div>div>label:has(input[value='999999'])>span{
	font-size: calc(9 * var(--site-font-size-ratio));
	color: inherit;
	font-weight: 700;
	padding-top: calc(5 * var(--site-font-size-ratio));
	padding-left: calc(5 * var(--site-font-size-ratio));
}
.form>fieldset>div>input[type='button']{
	background-color: #FF4A4A;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(295 * var(--site-font-size-ratio));
	height: calc(60 * var(--site-font-size-ratio));
	font-weight: 900;
	font-size: calc(18 * var(--site-font-size-ratio));
	line-height: calc(26 * var(--site-font-size-ratio));
	color: #ffffff;
	border-radius: 9999px;
	box-shadow: 0 calc(4 * var(--site-font-size-ratio)) calc(6 * var(--site-font-size-ratio)) 0 #00000016;
	border: none;
	position: relative;
	background-image: url(../images/circle.png);
	background-size: calc(17 * var(--site-font-size-ratio));
	background-position: top 50% right calc(15 * var(--site-font-size-ratio));
	background-repeat: no-repeat;
}
/* form end */
/* -------------------------------base(mobile)↑-------------------------------------- */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
	/* form start */
	.form{
		margin-top: calc(calc(150 - 90) * var(--site-font-size-ratio));
		padding: 0;
	}
	.form>fieldset>div{
		width: calc(1000 * var(--site-font-size-ratio));
		margin: calc(calc(262 - 150 - 82) * var(--site-font-size-ratio)) auto 0;
		padding: calc(calc(302 - 262) * var(--site-font-size-ratio)) calc(calc(280 - 220) * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div:has(.err){
		margin-bottom: calc(calc(499 - 310 - 137) * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div:has(.err)::before{
		font-size: calc(16 * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div{
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin-bottom: calc(calc(455 - 381 - 54) * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div>label{
		min-width: calc(190 * var(--site-font-size-ratio));
		margin-right: calc(calc(467 - 250 - 175) * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div>label{
		font-size: calc(18 * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div>div>label{
		width: calc(310 * var(--site-font-size-ratio));
		padding-left: calc(10 * var(--site-font-size-ratio));
		cursor: pointer;
	}
	.form>fieldset>div>div:has(input[name="user_service[]"])>label{
		font-size: calc(16 * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div>div>label>input[type='checkbox'] {
		margin-right: calc(20 * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div>input[name='user_postal']{
		width: calc(220 * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div>div.postal-error{
		font-size: calc(18 * var(--site-font-size-ratio));
		margin-left: calc(18 * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div>input[type='text'],
	.form>fieldset>div>div>input[type='tel'],
	.form>fieldset>div>div>input[type='email']
	{
		padding: calc(calc(391 - 381) * var(--site-font-size-ratio)) calc(calc(487 - 467) * var(--site-font-size-ratio));
		height: calc(60 * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div:last-of-type{
		justify-content: center;
		font-size: calc(14 * var(--site-font-size-ratio));
		margin-bottom: calc(calc(823 - 758 - 35) * var(--site-font-size-ratio));
	}
	.form>fieldset>div>div:last-of-type>label{
		min-width:auto;
		margin-right: 0;
	}
	.form>fieldset>div>div:last-of-type>label>input[type='checkbox']{
		transform: none;
	}
	.form>fieldset>div>input[type='button']{
		margin: auto;
		width: calc(340 * var(--site-font-size-ratio));
		height: calc(75 * var(--site-font-size-ratio));
		background-size: calc(20 * var(--site-font-size-ratio));
		background-position: top 50% right calc(18 * var(--site-font-size-ratio));
		cursor: pointer;
	}
	/* form end */
}
@media screen and (min-width: 1440px){
}
/* -----------------desktop(include ipad)↑-------------------- */