@charset "UTF-8";
/* CSS Document */

/*
	お問い合わせ
-----------------------------------------------------------------------------------------------*/
.pageContact .ctsArea{
	width: max(1060px, calc(1060 / var(--baseWidth) * 100vw));
}
#contactWrapper{
	display: flex;
	flex-direction: column;
}

/* タイトル
============================== */
.contactTit{
	margin-bottom: max(40px, calc(40 / var(--baseWidth) * 100vw));
	padding-bottom: max(20px, calc(20 / var(--baseWidth) * 100vw));
	font-size: max(3.0rem, calc(30 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	border-bottom: 1px solid var(--colorBlue);
}

/* テキストエリア
============================== */
.contactTxtArea{
	display: flex;
	flex-direction: column;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
	margin-bottom: max(50px, calc(50 / var(--baseWidth) * 100vw));
}
.contactTxtArea .midashi{
	color: var(--colorBlue);
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	text-align: center;
}
.contactTxtArea .center{
	text-align: center;
}

/* テキストボックス
============================== */
.contactTxtBox{
	padding: max(25px, calc(25 / var(--baseWidth) * 100vw)) max(40px, calc(40 / var(--baseWidth) * 100vw));
	background-color: var(--bgBlue);
	border-radius: max(10px, calc(10 / var(--baseWidth) * 100vw));
}
.contactLinkList{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 5px;
}


/*
	フォーム
-----------------------------------------------------------------------------------------------*/
.contactForm{
	border-top: 1px solid var(--colorGrey100);
}
.formRowArea{
	margin-bottom: max(50px, calc(50 / var(--baseWidth) * 100vw));
}
.formRow{
	display: grid;
	grid-template-columns: max(250px, calc(250 / var(--baseWidth) * 100vw)) 1fr;
	gap: max(40px, calc(40 / var(--baseWidth) * 100vw));
	padding: max(25px, calc(25 / var(--baseWidth) * 100vw)) 0;
	border-bottom: 1px solid var(--colorGrey100);
}

/* 見出し
============================== */
.formHead{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
}
.formHead .tit{
	font-size: max(1.6rem, calc(16 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
/* 必須マーク */
.required{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: max(50px, calc(50 / var(--baseWidth) * 100vw));
	height: max(20px, calc(20 / var(--baseWidth) * 100vw));
	color: var(--colorError);
	font-size: max(1.1rem, calc(11 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	line-height: 1.0;
	background-color: #fff;
	border: 1px solid var(--colorError);
	border-radius: 999px;
}

/* 内容
============================== */
.formBody{
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: max(10px, calc(10 / var(--baseWidth) * 100vw));
}
/* 入力フォーム */
.formBody input[type="text"],
.formBody input[type="email"],
.formBody input[type="tel"],
.formBody textarea{
	width: 100%;
	padding: max(15px, calc(15 / var(--baseWidth) * 100vw));
	font-size: max(1.5rem, calc(15 / var(--baseWidth) * 100vw));
	background-color: var(--bgGrey);
	border: 1px solid var(--colorGrey100);
}
.formBody textarea{
	height: max(200px, calc(200 / var(--baseWidth) * 100vw));
	resize: vertical;
}
.formBody label{
	display: flex;
	align-items: center;
	gap: max(8px, calc(8 / var(--baseWidth) * 100vw));
	line-height: 1.5;
	cursor: pointer;
}
.formBody input[type="radio"]{
	transform: scale(1.3);
}
/* 注釈 */
.txtNotes{
	font-size: max(1.4rem, calc(14 / var(--baseWidth) * 100vw));
}
/* エラーメッセージ */
.txtError{
	color: var(--colorError);
	font-size: max(1.4rem, calc(14 / var(--baseWidth) * 100vw));
}

/* 個人情報保護方針
============================== */
.contactAgree{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: max(25px, calc(25 / var(--baseWidth) * 100vw));
	margin-bottom: max(50px, calc(50 / var(--baseWidth) * 100vw));
	text-align: center;
}
.agreeCheck{
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.agreeCheck input[type="checkbox"]{
	transform: scale(1.3);
	transform-origin: center;
}
.agreeCheck .txt{
	font-weight: var(--fwBold);
	line-height: 1.0;
}


@media screen and (width <= 812px){
	/*
		お問い合わせ
	-----------------------------------------------------------------------------------------------*/
	.pageContact .ctsArea{
		width: 100%;
		max-width: 500px;
	}

	/* タイトル
	============================== */
	.contactTit{
		margin-bottom: 20px;
		padding-bottom: 10px;
		font-size: 2.0rem;
	}

	/* テキストエリア
	============================== */
	.contactTxtArea{
		gap: 15px;
		margin-bottom: 30px;
	}
	.contactTxtArea .midashi{
		font-size: 1.6rem;
		text-align: left;
	}
	.contactTxtArea .center{
		text-align: left;
	}

	/* テキストボックス
	============================== */
	.contactTxtBox{
		padding: 20px 25px;
		border-radius: 10px;
	}
	.contactLinkList{
		flex-direction: column;
		gap: 5px;
	}


	/*
		フォーム
	-----------------------------------------------------------------------------------------------*/
	.formRowArea{
		margin-bottom: 30px;
	}
	.formRow{
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 15px 0;
	}

	/* 見出し
	============================== */
	.formHead{
		justify-content: flex-start;
		gap: 5px;
	}
	.formHead .tit{
		font-size: 1.4rem;
	}
	/* 必須マーク */
	.required{
		min-width: 42px;
		height: 18px;
		font-size: 1.0rem;
	}

	/* 内容
	============================== */
	.formBody{
		gap: 10px;
	}
	/* 入力フォーム */
	.formBody input[type="text"],
	.formBody input[type="email"],
	.formBody input[type="tel"],
	.formBody textarea{
		padding: 12px;
		font-size: 1.4rem;
	}
	.formBody textarea{
		height: 150px;
	}
	.formBody label{
		gap: 5px;
	}
	.formBody input[type="radio"]{
		transform: scale(1.2);
	}
	/* 注釈 */
	.txtNotes{
		font-size: 1.2rem;
		line-height: 1.6;
	}
	/* エラーメッセージ */
	.txtError{
		font-size: 1.2rem;
	}

	/* 個人情報保護方針
	============================== */
	.contactAgree{
		gap: 15px;
		margin-bottom: 30px;
		text-align: left;
	}
	.agreeCheck{
		align-self: center;
		gap: 8px;
	}
	.agreeCheck input[type="checkbox"]{
		transform: scale(1.2);
	}
}