@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:960px){
#contact {
	width: 100%;
}
	.contact--inner {
		width: 100%;
		padding-top: 82px;
	}
		.contact-main_image {
			width: 100%;
			height: 350px;
		}
			.contact-main_image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

		.form-container {
			width: 90%;
			max-width: 700px;
			padding: 70px 0px 120px;
			margin: auto auto;
		}
			.contact-heading {
				width: 100%;
				margin: auto auto 50px;
				font-family: lato, sans-serif;
				font-size: 20px;
				font-weight: 700;
				color: #6B0F2B;
				letter-spacing: 0em;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
				.contact-heading:before,
				.contact-heading:after {
					content: '';
					width: 40%;
					height: 1px;
					background-color: #6B0F2B;
				}

			.form-list-container {
				width: 100%;
			}
				.form-list {
					width: 100%;
					font-size: 15px;
				}
					.form-item {
						width: 100%;
						margin: auto auto 30px;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
					}
					.address-item {
						margin: auto auto 15px;
					}
						.form-item_heading {
							width: 200px;
							padding: 10px 0px;
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
							.form-item_heading label {
								margin-right: 15px;
							}
							.mandatory {
								display: inline-block;
								padding: 0px 5px;
								background-color: #6B0F2B;
								font-size: 10px;
								font-weight: 700;
								color: #ffffff;
							}

						.form-item_inputbox {
							width: calc(100% - 200px);
						}
				/* 入力ページ */
							.form-item_inputbox input[type=text],
							.form-item_inputbox textarea {
								width: 100%;
								padding: 10px 15px;
								border-radius: 5px;
								background-color: #F6F2F3;
								border: solid 1px #F6F2F3;
								outline: none;
							}
							::placeholder {
								color: #DDDCDC;
							}
							/* 旧Edge対応 */
							::-ms-input-placeholder {
								color: #DDDCDC;
							}
							/* IE対応 */
							:-ms-input-placeholder {
								color: #DDDCDC;
							}
							.form-item_inputbox input[type=text]:focus,
							.form-item_inputbox textarea:focus {
								border: solid 1px #811A39;
							}
							/* 住所 */
							.prefecture-box {
								width: 220px;
								position: relative;
							}
							.prefecture-box:after {
								content: "\f2ec";
								font-family: "Font Awesome 5 Pro";
								font-size: 8px;
								font-weight: 700;
								line-height: 1.0;
								color: #1A1311;
								position: absolute;
								top: 50%;
								right: 15px;
								transform: translate(0%,-50%) rotate(180deg);
								-webkit-transform: translate(0%,-50%) rotate(180deg);
								pointer-events: none;
							}
							.form-item_inputbox input[name=postal_code_1],
							.form-item_inputbox input[name=postal_code_2] {
								width: 100px;
							}
							.hyphen {
								display: inline-block;
								width: 20px;
								text-align: center;
							}
							button#zip-btn {
								margin-left: 15px;
								background: none;
								outline: none;
								border: none;
								font-size: 14px;
								text-decoration: underline;
								color: #1A1311;
								cursor: pointer;
							}
							select[name=address01] {
								width: 100%;
								padding: 10px 15px;
								border-radius: 5px;
								background-color: #F6F2F3;
								border: solid 1px #F6F2F3;
								outline: none;
							}
							select[name=address01]:invalid {
								color: #DDDCDC;
							}
							select[name=address01]:focus {
								border: solid 1px #811A39;
							}
							/* 電話番号 */
							.contact-note {
								font-size: 12px;
								color: #616161;
							}
							/*　お問い合わせ */
							.form-item_inputbox textarea {
								height: 300px;
							}

				/* 確認ページ */
					form.confirmation .form-item {
						margin: auto auto 30px;
					}
					form.confirmation .form-item.address-item {
						margin: auto auto 10px;
					}
						form.confirmation .form-item .form-item_heading {
							padding: 0px;
						}
							.form-item_inputbox p {
								width: 100%;
							}

				/* サブミットボタン */
				button[name=btn_confirm] {
					display: block;
					width: 300px;
					height: 56px;
					margin: auto auto;
					background-color: #811A39;
					border: none;
					outline: none;
					font-size: 14px;
					font-weight: 700;
					text-align: center;
					color: #ffffff;
					letter-spacing: 0.08em;
					cursor: pointer;
				}
				.submit-container {
					width: 100%;
					margin-top: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
					.submit-container input[name=btn_back],
					.submit-container input[name=btn_submit] {
						display: block;
						width: 300px;
						height: 56px;
						margin: 0px 10px;
						border: none;
						outline: none;
						font-size: 14px;
						font-weight: 700;
						text-align: center;
						color: #ffffff;
						letter-spacing: 0.08em;
						cursor: pointer;
					}
					.submit-container input[name=btn_back] {
						background-color: #8E8E8E;
					}
					.submit-container input[name=btn_submit] {
						background-color: #811A39;
					}

				/* 完了ページ */
				.done-body {
					width: 100%;
				}
					.done-body p.done-txt {
						width: 100%;
						margin: auto auto 80px;
						font-size: 15px;
						text-align: justify;
					}
					.done-body p.toplink {
						width: 100%;
						text-align: right;
					}
						.done-body p.toplink a {
							color: #1A1311;
							text-decoration: underline;
						}
}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
#contact {
	width: 100%;
}
	.contact--inner {
		width: 100%;
	}
		.contact-main_image {
			width: 100%;
			height: 180px;
		}
			.contact-main_image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

		.form-container {
			width: 90%;
			padding: 30px 0px 70px;
			margin: auto auto;
		}
			.contact-heading {
				width: 100%;
				margin: auto auto 30px;
				font-family: lato, sans-serif;
				font-size: 20px;
				font-weight: 700;
				color: #6B0F2B;
				letter-spacing: 0em;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
				.contact-heading:before,
				.contact-heading:after {
					content: '';
					width: 36%;
					height: 1px;
					background-color: #6B0F2B;
				}

			.form-list-container {
				width: 100%;
			}
				.form-list {
					width: 100%;
					font-size: 15px;
				}
					.form-item {
						width: 100%;
						margin: auto auto 30px;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
					}
					.address-item {
						margin: auto auto 15px;
					}
						.form-item_heading {
							width: 200px;
							padding: 10px 0px;
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
							.form-item_heading label {
								margin-right: 15px;
							}
							.mandatory {
								display: inline-block;
								padding: 0px 5px;
								background-color: #6B0F2B;
								font-size: 10px;
								font-weight: 700;
								color: #ffffff;
							}

						.form-item_inputbox {
							width: calc(100% - 200px);
						}
				/* 入力ページ */
							.form-item_inputbox input[type=text],
							.form-item_inputbox textarea {
								width: 100%;
								padding: 10px 15px;
								border-radius: 5px;
								background-color: #F6F2F3;
								border: solid 1px #F6F2F3;
								outline: none;
							}
							::placeholder {
								color: #DDDCDC;
							}
							/* 旧Edge対応 */
							::-ms-input-placeholder {
								color: #DDDCDC;
							}
							/* IE対応 */
							:-ms-input-placeholder {
								color: #DDDCDC;
							}
							.form-item_inputbox input[type=text]:focus,
							.form-item_inputbox textarea:focus {
								border: solid 1px #811A39;
							}
							/* 住所 */
							.prefecture-box {
								width: 220px;
								position: relative;
							}
							.prefecture-box:after {
								content: "\f2ec";
								font-family: "Font Awesome 5 Pro";
								font-size: 8px;
								font-weight: 700;
								line-height: 1.0;
								color: #1A1311;
								position: absolute;
								top: 50%;
								right: 15px;
								transform: translate(0%,-50%) rotate(180deg);
								-webkit-transform: translate(0%,-50%) rotate(180deg);
								pointer-events: none;
							}
							.form-item_inputbox input[name=postal_code_1],
							.form-item_inputbox input[name=postal_code_2] {
								width: 100px;
							}
							.hyphen {
								display: inline-block;
								width: 20px;
								text-align: center;
							}
							button#zip-btn {
								margin-left: 15px;
								background: none;
								outline: none;
								border: none;
								font-size: 14px;
								text-decoration: underline;
								color: #1A1311;
								cursor: pointer;
							}
							select[name=address01] {
								width: 100%;
								padding: 10px 15px;
								border-radius: 5px;
								background-color: #F6F2F3;
								border: solid 1px #F6F2F3;
								outline: none;
							}
							select[name=address01]:invalid {
								color: #DDDCDC;
							}
							select[name=address01]:focus {
								border: solid 1px #811A39;
							}
							/* 電話番号 */
							.contact-note {
								font-size: 12px;
								color: #616161;
							}
							/*　お問い合わせ */
							.form-item_inputbox textarea {
								height: 300px;
							}

				/* 確認ページ */
					form.confirmation .form-item {
						margin: auto auto 30px;
					}
					form.confirmation .form-item.address-item {
						margin: auto auto 10px;
					}
						form.confirmation .form-item .form-item_heading {
							padding: 0px;
						}
							.form-item_inputbox p {
								width: 100%;
							}

				/* サブミットボタン */
				button[name=btn_confirm] {
					display: block;
					width: 300px;
					height: 56px;
					margin: auto auto;
					background-color: #811A39;
					border: none;
					outline: none;
					font-size: 14px;
					font-weight: 700;
					text-align: center;
					color: #ffffff;
					letter-spacing: 0.08em;
					cursor: pointer;
				}
				.submit-container {
					width: 100%;
					margin-top: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
					.submit-container input[name=btn_back],
					.submit-container input[name=btn_submit] {
						display: block;
						width: 300px;
						height: 56px;
						margin: 0px 10px;
						border: none;
						outline: none;
						font-size: 14px;
						font-weight: 700;
						text-align: center;
						color: #ffffff;
						letter-spacing: 0.08em;
						cursor: pointer;
					}
					.submit-container input[name=btn_back] {
						background-color: #8E8E8E;
					}
					.submit-container input[name=btn_submit] {
						background-color: #811A39;
					}

				/* 完了ページ */
				.done-body {
					width: 100%;
				}
					.done-body p.done-txt {
						width: 100%;
						margin: auto auto 80px;
						font-size: 15px;
						text-align: justify;
					}
					.done-body p.toplink {
						width: 100%;
						text-align: right;
					}
						.done-body p.toplink a {
							color: #1A1311;
							text-decoration: underline;
						}
}

/* SP ================================================== */
@media all and (max-width:559px){
#contact {
	width: 100%;
}
	.contact--inner {
		width: 100%;
	}
		.contact-main_image {
			width: 100%;
			height: 180px;
		}
			.contact-main_image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

		.form-container {
			width: 90%;
			padding: 30px 0px 70px;
			margin: auto auto;
		}
			.contact-heading {
				width: 100%;
				margin: auto auto 30px;
				font-family: lato, sans-serif;
				font-size: 20px;
				font-weight: 700;
				color: #6B0F2B;
				letter-spacing: 0em;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
				.contact-heading:before,
				.contact-heading:after {
					content: '';
					width: 36%;
					height: 1px;
					background-color: #6B0F2B;
				}

			.form-list-container {
				width: 100%;
			}
				.form-list {
					width: 100%;
					font-size: 15px;
				}
					.form-item {
						width: 100%;
						margin: auto auto 30px;
					}
					.address-item {
						margin: auto auto 15px;
					}
						.form-item_heading {
							width: 100%;
							margin: 0px 0px 8px;
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
						.empty-heading {
							display: none;
						}
							.form-item_heading label {
								margin-right: 15px;
							}
							.mandatory {
								display: inline-block;
								padding: 0px 5px;
								background-color: #6B0F2B;
								font-size: 10px;
								font-weight: 700;
								color: #ffffff;
							}

						.form-item_inputbox {
							width: 100%;
						}
				/* 入力ページ */
							.form-item_inputbox input[type=text],
							.form-item_inputbox textarea {
								width: 100%;
								padding: 10px 15px;
								border-radius: 5px;
								background-color: #F6F2F3;
								border: solid 1px #F6F2F3;
								outline: none;
							}
							::placeholder {
								color: #DDDCDC;
							}
							/* 旧Edge対応 */
							::-ms-input-placeholder {
								color: #DDDCDC;
							}
							/* IE対応 */
							:-ms-input-placeholder {
								color: #DDDCDC;
							}
							.form-item_inputbox input[type=text]:focus,
							.form-item_inputbox textarea:focus {
								border: solid 1px #811A39;
							}
							/* 住所 */
							.prefecture-box {
								width: 180px;
								position: relative;
							}
							.prefecture-box:after {
								content: "\f2ec";
								font-family: "Font Awesome 5 Pro";
								font-size: 8px;
								font-weight: 700;
								line-height: 1.0;
								color: #1A1311;
								position: absolute;
								top: 50%;
								right: 15px;
								transform: translate(0%,-50%) rotate(180deg);
								-webkit-transform: translate(0%,-50%) rotate(180deg);
								pointer-events: none;
							}
							.form-item_inputbox input[name=postal_code_1] {
								width: 70px;
							}
							.form-item_inputbox input[name=postal_code_2] {
								width: 90px;
							}
							.hyphen {
								display: inline-block;
								width: 20px;
								text-align: center;
							}
							button#zip-btn {
								margin-left: 10px;
								background: none;
								outline: none;
								border: none;
								font-size: 14px;
								text-decoration: underline;
								color: #1A1311;
								cursor: pointer;
							}
							select[name=address01] {
								width: 100%;
								padding: 10px 15px;
								border-radius: 5px;
								background-color: #F6F2F3;
								border: solid 1px #F6F2F3;
								outline: none;
							}
							select[name=address01]:invalid {
								color: #DDDCDC;
							}
							select[name=address01]:focus {
								border: solid 1px #811A39;
							}
							/* 電話番号 */
							.contact-note {
								font-size: 12px;
								color: #616161;
							}
							/*　お問い合わせ */
							.form-item_inputbox textarea {
								height: 200px;
							}

				/* 確認ページ */
					form.confirmation .form-item {
						margin: auto auto 30px;
					}
					form.confirmation .form-item.address-item {
						margin: auto auto 0px;
					}
						form.confirmation .form-item .form-item_heading {
							padding: 0px 0px 5px;
							border-bottom: dotted 1px #811A39;
						}
							.form-item_inputbox p {
								width: 100%;
							}

				/* サブミットボタン */
				button[name=btn_confirm] {
					display: block;
					width: 100%;
					height: 56px;
					margin: 60px auto auto;
					background-color: #811A39;
					border: none;
					outline: none;
					font-size: 14px;
					font-weight: 700;
					text-align: center;
					color: #ffffff;
					letter-spacing: 0.08em;
					cursor: pointer;
				}
				.submit-container {
					width: 100%;
					margin-top: 60px;
					display: flex;
					flex-direction: column-reverse;
				}
					.submit-container input[name=btn_back],
					.submit-container input[name=btn_submit] {
						display: block;
						width: 100%;
						height: 56px;
						border: none;
						outline: none;
						font-size: 14px;
						font-weight: 700;
						text-align: center;
						color: #ffffff;
						letter-spacing: 0.08em;
						cursor: pointer;
					}
					.submit-container input[name=btn_back] {
						background-color: #8E8E8E;
					}
					.submit-container input[name=btn_submit] {
						margin-bottom: 15px;
						background-color: #811A39;
					}

				/* 完了ページ */
				.done-body {
					width: 100%;
				}
					.done-body p.done-txt {
						width: 100%;
						margin: auto auto 80px;
						font-size: 15px;
						text-align: justify;
					}
					.done-body p.toplink {
						width: 100%;
						text-align: right;
					}
						.done-body p.toplink a {
							color: #1A1311;
							text-decoration: underline;
						}
}