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

.from_lists {
	.from_list {
		border-bottom: 1px solid #ccc;
	}
	.from_question {
	}
	.from_question_inn {
	}
	.required {
		color: #fff;
		background: var(--color_pink);
		border-radius: 100px;
	}
	.from_answer {
	}
}

.from_btn {
	.from_btn_forward,
	.from_btn_back {
		display: block;
		text-align: center;
		border-radius: 100px !important;
		background-color: #fff !important;
	}
	.from_btn_forward {
		color: var(--color_lightblue) !important;
		border: 1px solid var(--color_lightblue) !important;
	}
	.from_btn_back {
		color: #555;
		border: 1px solid #555;
	}
}

.contact_notice {	
	.contact_notice_text {
		color: #555;
		border: 1px solid #bbb;
		border-radius: 5px;
	}
}

/* confirmで使用 */
.contact_preface {
	.contact_preface_text {
		font-weight: bold;
		text-align: center;
	}
	.contact_preface_text strong {
		color: var(--color_lightblue);
	}
}

/* completeで使用 */
.complete {
	.complete_title {
		font-weight: bold;
		text-align: center;
	}
	.complete_text {
	}
	.complete_btn {
		display: flex;
		justify-content: center;
		.complete_btn_link {
			color: var(--color_lightblue);
			text-align: center;
			border: 1px solid var(--color_lightblue);
			border-radius: 100px;
		}
	}
}


/* --------------------------------------------------
PC
-------------------------------------------------- */
@media screen and (min-width: 768px) {
	.from_lists {
		margin-bottom: 30px;
		.from_list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
		}
		.from_question {
			width: 30%;
			font-size: 14px;
		}
		.from_question_inn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;
		}
		.required {
			font-size: 12px;
			font-weight: normal;
			margin-left: 10px;
			padding: 0 12px;
		}
		.from_answer {
			width: 65%;
			font-size: 14px;
			textarea {
				height: 200px;
			}
		}
	}

	.from_btn {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		.from_btn_forward,
		.from_btn_back {
			width: 220px;
			font-size: 16px !important;
			margin: 0 10px;
			padding: 10px 0;
		}
		.from_btn_forward {
		}
		.from_btn_back {
		}
	}

	.contact_notice {
		.contact_notice_text {
			line-height: 1.7;
			margin-bottom: 30px;
			padding: 10px 20px;
		}
	}

	/* confirmで使用 */
	.contact_preface {
		.contact_preface_text {
			font-size: 20px;
			line-height: 1.4;
			margin-bottom: 20px;
		}
		.contact_preface_text strong {
			margin: 0 4px;
		}
	}

	/* completeで使用 */
	.complete {
		.complete_title {
			font-size: 32px;
			margin-bottom: 12px;
		}
		.complete_text {
			font-size: 15px;
			line-height: 1.7;
			padding: 0 30px;
		}
		.complete_btn {
			padding: 20px 0;
			.complete_btn_link {
				width: 220px;
				font-size: 16px;
				padding: 10px 0;
			}
		}
	}
}


/* --------------------------------------------------
スマホ
-------------------------------------------------- */
@media all and (max-width: 767px) {

	#Form input[type='text'],
	#Form textarea {
		width: 100%;
	}

	.from_lists {
		margin-bottom: 4vw;
		.from_list {
			padding: 4vw 2vw;
		}
		.from_question {
			font-size: 3.75vw;
		}
		.from_question_inn {
			display: flex;
			align-items: center;
			font-weight: bold;
		}
		.required {
			font-size: 2.5vw;
			margin-left: 2vw;
			padding: 0.25vw 3vw;
		}
		.from_answer {
		}
	}

	.from_btn {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		.from_btn_forward,
		.from_btn_back {
			width: 48%;
			font-size: 3.75vw !important;
			margin: 1%;
			padding: 3vw 0;
		}
		.from_btn_forward {
		}
		.from_btn_back {
		}
	}

	.contact_notice {
		padding: 0 2vw;
		.contact_notice_text {
			font-size: 3vw;
			line-height: 1.7;
			margin-bottom: 6vw;
			padding: 2vw 3vw;
		}
	}

	/* confirmで使用 */
	.contact_preface {
		.contact_preface_text {
			font-size: 5.25vw;
			line-height: 1.7;
			margin-bottom: 4vw;
		}
		.contact_preface_text strong {
			margin: 0 1vw;
		}
	}

	/* completeで使用 */
	.complete {
		.complete_title {
			font-size: 6.25vw;
			margin-bottom: 3vw;
		}
		.complete_text {
			font-size: 3.25vw;
			line-height: 1.7;
		}
		.complete_btn {
			padding: 7.5vw 0;
			.complete_btn_link {
				width: 48%;
				font-size: 3.75vw;
				padding: 3vw 0;
			}
		}
	}
}