@charset "UTF-8";
/*------------------------------------------------------------------
********************************************************************
 * ▼構成
 * ・ベースとなるCSS
 * ・スマホ用（@media screen and (max-width: 767px) {} ）
********************************************************************
--------------------------------------------------------------------*/

.form_box.confirm > .text_1{
	margin-bottom: 40px;
	text-align: center;
	font-size: 15px;
}
@media screen and (max-width: 767px) {
	.form_box.confirm > .text_1{
		margin-bottom: 20px;
		text-align: left;
	}
}

.form_item{
	display: flex;
}
@media screen and (max-width: 767px) {
	.form_item{
		flex-direction: column;
	}
}

.form_item .form_name{
	width: 240px;
	padding: 36px 0 25px;
	border-bottom: #0f1f3f 1px solid;
}
@media screen and (max-width: 767px) {
	.form_item .form_name{
		position: relative;
		width: 100%;
		padding: 17px 0;
		border-bottom: #bcc1ca 1px solid;
	}

	.form_item .form_name::after{
		content: '';
		position: absolute;
		left: 0;
		bottom: -1px;
		display: block;
		width: 30%;
		height: 1px;
		background-color: #0f1f3f;
	}
}

.form_box.confirm .form_name{
	padding-top: 25px;
}
@media screen and (max-width: 767px) {
	.form_box.confirm .form_name{
		padding-bottom: 10px;
	}
}

.form_item .form_name p{
	position: relative;
	width: 100%;
	font-size: 15px;
	font-weight: 500;
}
@media screen and (max-width: 767px) {
	.form_item .form_name p{
		font-size: 4.26vw;
	}
}

.form_item .form_name p.must::after{
	content: '必須';
	background-color: #385388;
}

.form_item .form_name p.optional::after{
	content: '任意';
	background-color: #979797;
}

.form_item .form_name p.must::after,
.form_item .form_name p.optional::after{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: block;
	width: 50px;
	padding: 1px 0 2px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
}
@media screen and (max-width: 767px) {
	.form_item .form_name p.must::after,
	.form_item .form_name p.optional::after{
		font-size: 3.46vw;
	}
}

.form_item .form_content{
	max-width: 660px;
	width: 100%;
	padding: 25px 0 25px 25px;
	border-bottom: #bcc1ca 1px solid;
}
@media screen and (max-width: 767px) {
	.form_item .form_content{
		padding: 20px 0 10px 0;
		border-bottom: none;
	}
}

.form_item .form_content .birthday{
	display: flex;
	gap: 10px;
}

.form_box.confirm .form_content{
	padding-top: 26px;
}
@media screen and (max-width: 767px) {
	.form_box.confirm .form_content{
		padding-top: 10px;
	}
}

form .error{
	margin-top: 5px;
	font-size: 15px;
	font-weight: 500;
	color: #eb4c2f;
}
@media screen and (max-width: 767px) {
	form .error{
		font-size: 3.72vw;
	}
}

.privacy_item .error{
	text-align: center;
}

.form_box .privacy_item{
	width: 100%;
	margin-top: 40px;
}
@media screen and (max-width: 767px) {
	.form_box .privacy_item{
		margin-top: 20px;
	}
}

.form_box .privacy_item .text_1{
	text-align: center;
	font-size: 13px;
	color: #1a1a1a;
}

.form_box .privacy_item .text_1 a{
	text-decoration: underline;
}

.form_box .privacy_item .text_2{
	margin-top: 15px;
	text-align: center;
}

.form_box input:not([type="checkbox"]),
.form_box select,
.form_box textarea{
	padding: 10px;
	background-color: #fff;
	border: #cdd6dd 1px solid;
	font-size: 16px;
}

.form_box input:not([type="checkbox"]),
.form_box select{
	width: 340px;
}
@media screen and (max-width: 767px) {
	.form_box input:not([type="checkbox"]),
	.form_box select{
		width: 100%;
	}
}

.form_box input[type="checkbox"]{
	appearance: none;
	cursor: pointer;
	position: relative;
	z-index: 1;
	width: 30px;
	height: 30px;
	margin-right: 15px;
	background-color: #fff;
	border: #d4d4d4 1px solid;
	border-radius: 4px;
	vertical-align: -8px;
}

.form_box input[type="checkbox"]:checked{
	border: #004bb1 1px solid;
}
 
.form_box input[type="checkbox"]:checked::before{
	content: '';
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-40%, -50%) rotate(50deg);
	z-index: 1;
	width: 8px;
	height: 14px;
	background-color: #fff;
	border-right: #004bb1 1px solid;
	border-bottom: #004bb1 1px solid;
}

.form_box select.birthday_year{
	display: inline-block;
	width: 100px;
}

.form_box select.birthday_month,
.form_box select.birthday_day{
	display: inline-block;
	width: 70px;
}

.form_box textarea{
	resize:vertical;
	width: 100%;
	min-height: 150px;
}

.form_box.confirm .submit_box{
	display: flex;
	justify-content: center;
	flex-direction: row-reverse;
	gap: 20px;
}
@media screen and (max-width: 767px) {
	.form_box.confirm .submit_box{
		gap: 16px;
	}
}

.form_box button[type="submit"]{
	cursor: pointer;
	display: block;
	width: 100%;
	padding: 15px;
	background-color: #0f1f3f;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	color: #fff;
}

.form_box.confirm button[type="submit"]{
	width: 340px;
}
@media screen and (max-width: 767px) {
	.form_box.confirm form{
		width: 50%;
	}
	.form_box.confirm button[type="submit"]{
		width: 100%;
	}
}

.form_box button[type="submit"].back{
	background-color: #979797;
	color: #fff;
}