/**********************
お問い合わせフォーム
***********************/
#contact {
	margin-bottom: 56px;
}

.page-mv {
	background-image: url('../img/contact/contact__mv.jpg');
}

#formWrap {
	margin: 0 auto 56px auto;
	color: #555;
	line-height: 120%;
	font-size: 17px;
}

#formWrap .required {
	display: inline-block;
	margin-right: 12px;
	padding: 2px 6px;
	width: 46px;
	text-align: center;
	font-size: 17px;
	color: #fff;
	background-color: #C30D23;
}

#formWrap .any {
	display: inline-block;
	margin-right: 20px;
	padding: 2px;
	width: 40px;
}

#formWrap .any {
	color: #000;
	background-color: #fff;
}

#formWrap textarea {
	resize: vertical;
}

#formWrap input,
#formWrap textarea {
	border: 1px solid #898989;
}

#formWrap input[type='text'],
#formWrap input[type='tel'],
#formWrap input[type='email'],
#formWrap textarea {
	padding: 10px 15px;
	width: 100%;
	font-size: 12px;
}

#formWrap input[type='text']::-webkit-input-placeholder, 
#formWrap input[type='tel']::-webkit-input-placeholder, 
#formWrap input[type='email']::-webkit-input-placeholder {
	color: rgb(179, 179, 179);
}

#formWrap input[type='text']::-moz-placeholder, 
#formWrap input[type='tel']::-moz-placeholder, 
#formWrap input[type='email']::-moz-placeholder {
	color: rgb(179, 179, 179);
}

#formWrap input[type='text']:-ms-input-placeholder, 
#formWrap input[type='tel']:-ms-input-placeholder, 
#formWrap input[type='email']:-ms-input-placeholder {
	color: rgb(179, 179, 179);
}

#formWrap input[type='text']::-ms-input-placeholder, 
#formWrap input[type='tel']::-ms-input-placeholder, 
#formWrap input[type='email']::-ms-input-placeholder {
	color: rgb(179, 179, 179);
}

#formWrap input[type='text']::-webkit-input-placeholder, #formWrap input[type='tel']::-webkit-input-placeholder, #formWrap input[type='email']::-webkit-input-placeholder {
	color: rgb(179, 179, 179);
}

#formWrap input[type='text']::-moz-placeholder, #formWrap input[type='tel']::-moz-placeholder, #formWrap input[type='email']::-moz-placeholder {
	color: rgb(179, 179, 179);
}

#formWrap input[type='text']:-ms-input-placeholder, #formWrap input[type='tel']:-ms-input-placeholder, #formWrap input[type='email']:-ms-input-placeholder {
	color: rgb(179, 179, 179);
}

#formWrap input[type='text']::-ms-input-placeholder, #formWrap input[type='tel']::-ms-input-placeholder, #formWrap input[type='email']::-ms-input-placeholder {
	color: rgb(179, 179, 179);
}

#formWrap input[type='text']::placeholder,
#formWrap input[type='tel']::placeholder,
#formWrap input[type='email']::placeholder {
	color: rgb(179, 179, 179);
}

.form-flex {
	display: flex;
	align-items: center;
}

.form-flex--baseline {
	align-items: baseline;
}

.form-flex-outer {
	padding: 12px 0;
	border-bottom: 1px solid #898989;
}

.form-flex-outer:last-of-type {
	border-bottom: none;
}

.form-flex__left {
	display: flex;
	align-items: center;
	width: 250px;
}

.form-flex__right {
	display: flex;
	align-items: center;
	-moz-column-gap: 20px;
	     column-gap: 20px;
	flex: 1;
}

.form-flex__name-flex {
	display: flex;
	align-items: center;
	-moz-column-gap: 10px;
	     column-gap: 10px;
}

.form-flex__name-label {
	display: inline-block;
	text-align: right;
	width: 40px;
}

.form-flex__name-flex input {
	flex: 1;
}

.submit-btn {
	background-color: #005BAB;
}

.back-btn {
	background-color: #898989;
}

.submit-btn,
.back-btn {
	margin: 30px auto 0 auto;
	padding: 5px 0;
	text-align: center;
	width: 300px;
	color: #fff;
}

.submit-btn input {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: none !important;
	background-color: unset;
}

.form-info-statement {
	font-size: 17px;
	margin-bottom: 51px;
	letter-spacing: -0.07em;
	line-height: 1.8em;
}

.contact-caution-txt {
	color: red;
}

/* エラー画面用 */
/* ************************************************************ */
.err-read {
	margin-bottom: 50px;
}

/* 確認画面用 */
/* ************************************************************ */
pre {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "myfontHiraW3", sans-serif !important;
}

.contact-confirm-msg {
	text-align: center;
	margin-bottom: 50px;
}

/* 完了画面用 */
/* ************************************************************ */
#contact-thanks {
	margin-bottom: 56px;
}

.contact-thanks-msg {
	text-align: center;
	margin-bottom: 50px;
	font-size: 16px;
	line-height: 1.8em;
}

.to-top-btn {
	display: block;
	margin: 0 auto;
	padding: 10px 20px;
	text-align: center;
	width: 200px;
	color: #fff;
	font-size: 16px;
	background-color: #005BAB;
}

@media screen and (max-width:1221px) {
	#contact {
		margin-bottom: calc((56 / 1220) * 100vw);
	}

	#formWrap {
		margin: 0 auto calc((56 / 1220) * 100vw) auto;
		font-size: clamp(12px, calc((17 / 1220) * 100vw), 17px);
	}

	#formWrap .required {
		margin-right: calc((12 / 1220) * 100vw);
		padding: calc((2 / 1220) * 100vw) calc((6 / 1220) * 100vw);
		width: calc((46 / 1220) * 100vw);
		min-width: 40px;
		font-size: clamp(12px, calc((17 / 1220) * 100vw), 17px);
	}

	#formWrap .any {
		margin-right: calc((20 / 1220) * 100vw);
		padding: calc((2 / 1220) * 100vw);
		width: calc((40 / 1220) * 100vw);
		min-width: 36px;
	}

	#formWrap input[type='text'],
	#formWrap input[type='tel'],
	#formWrap input[type='email'],
	#formWrap textarea {
		padding: calc((10 / 1220) * 100vw) calc((15 / 1220) * 100vw);
		width: 100%;
		font-size: clamp(10px, calc((12 / 1220) * 100vw), 12px)
	}

	.form-flex {
		padding: calc((12 / 1220) * 100vw) 0;
	}

	.form-flex__left {
		width: calc((250 / 1220) * 100vw);
		min-width: 180px;
	}

	.form-flex__right {
		-moz-column-gap: calc((20 / 1220) * 100vw);
		     column-gap: calc((20 / 1220) * 100vw);
	}

	.form-flex__name-flex {
		-moz-column-gap: calc((10 / 1220) * 100vw);
		     column-gap: calc((10 / 1220) * 100vw);
	}

	.form-flex__name-label {
		width: calc((40 / 1220) * 100vw);
		min-width: 35px;
	}

	.submit-btn,
	.back-btn {
		margin: calc((30 / 1220) * 100vw) auto 0 auto;
		padding: calc((5 / 1220) * 100vw) 0;
		width: calc((300 / 1220) * 100vw);
		min-width: 150px;
	}

	.form-info-statement {
		font-size: clamp(13px, calc((17 / 1220) * 100vw), 17px);
		margin-bottom: calc((51 / 1220) * 100vw);
	}

	/* エラー画面用 */
	/* ************************************************************ */
	.err-read {
		margin-bottom: calc((50 / 1220) * 100vw);
	}

	/* 確認画面用 */
	/* ************************************************************ */
	.contact-confirm-msg {
		margin-bottom: calc((50 / 1220) * 100vw);
	}


	/* 完了画面用 */
	/* ************************************************************ */
	#contact-thanks {
		margin-bottom: calc((56 / 1220) * 100vw);
	}

	.contact-thanks-msg {
		margin-bottom: calc((50 / 1220) * 100vw);
	}

	.to-top-btn {
		padding: calc((10 / 1220) * 100vw) calc((20 / 1220) * 100vw);
		width: calc((200 / 1220) * 100vw);
		min-width: 150px;
	}
}

@media screen and (max-width:480px) {
	#contact {
        margin-bottom: 20px;
    }

	.page-mv {
		background-image: url('../img/contact/contact__mv--sp.jpg');
		background-position: center;
	}
	
	#formWrap {
        margin-bottom: 50px;
        font-size: 13px;
    }

	#formWrap input[type='text'], 
	#formWrap input[type='tel'], 
	#formWrap input[type='email'], 
	#formWrap textarea {
        padding: 1px 5px 3px 5px;
        width: 100%;
        font-size: 13px;
    }

	#formWrap input[type='text'], 
	#formWrap input[type='tel'], 
	#formWrap input[type='email'] {
		height: 17px;
	}

	#formWrap textarea {
		height: 120px;
	}

	.form-flex {
        padding: 4px 0;
    }

	.form-info-statement {
		font-size: 13px;
		margin-bottom: 6px;
	}

	#formWrap .required {
        margin-right: 3px;
        padding: 0 2px 1px 2px;
        width: 30px;
        min-width: auto;
        font-size: 12px;
    }
	
	#formWrap .any {
		margin-right: 3px;
		padding: 0 2px;
        width: 31px;
        min-width: auto;
    }

	.form-flex-outer {
		padding: 2px 0;
		border-bottom: none;
	}

	.form-flex-outer:last-of-type {
		border-bottom: none;
		margin-top: 12px;
	}

	.form-flex__right {
        width: 100%;
    }

	.form-flex--sp-col {
		flex-direction: column;
		row-gap: 8px;
	}

	.form-flex--sp-col .form-flex__left {
		margin-right: auto;
	}

	.form-flex__name-label {
        min-width: 26px;
    }

	#contact-confirm .form-flex__left {
        width: 50%;
        min-width: 150px;
    }

	#contact-confirm .form-flex__right p {
		overflow-wrap: anywhere;
	}

	.contact-confirm-msg {
        margin-top: 30px;
        margin-bottom: 30px;
    }

	.submit-btn, 
	.back-btn {
        margin-top: 13px;
        padding: 0;
        width: 150px;
        height: 35px;
		font-size: 15px;
    }

    .back-btn {
        display: block;
        margin-top: 30px;
    }

    #contact-thanks {
        margin-bottom: 20px;
    }

	.contact-thanks-msg {
		font-size: 14px;
	}

	.to-top-btn {
		display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        width: 150px;
        height: 35px;
        min-width: auto;
        font-size: 15px;
    }

	
}