@charset "UTF-8";

main {
	counter-reset: section;
	margin: 110px auto 0;
	width: 90%;
	max-width: 880px;

	>h2 {
		color: #0661B5;
		font-size: 38px;
		letter-spacing: .11em;
		line-height: 1.15;
		text-align: center;
	}

	>p {
		font-weight: 500;
		font-size: 16px;
		line-height: 2.31;
		margin-top: 40px;
		text-align: center;
	}
}

/* =================================
	プライバシーポリシー
================================= */
.bl_form_privacy_scroll {
	background: #fff;
	border: 1px solid #B8B8B8;
	border-radius: 5px;
	max-height: 230px;
	overflow-y: auto;
	padding: 24px;

	section {
		>div {
			margin: 30px 0 0 42px;
		}

		.col {
			margin-top: 30px;

			p {
				display: flex;
			}
		}
	}

	p,
	li {
		font-weight: 500;
		font-size: 16px;
		line-height: 1.43;
	}

	h2 {
		font-size: 23px;
		display: flex;
		gap: 25px;
		counter-increment: section;
		margin-top: 44px;

		&::before {
			content: counter(section);
		}
	}
}

.privacy-list {
	counter-reset: list;

	>li {
		counter-increment: list;
		position: relative;
		padding-left: 1em;
		margin-top: 1em;

		&::before {
			content: counter(list) ".";
			position: absolute;
			left: 0;
		}
	}
}

.privacy-sub-list {
	counter-reset: sub-list;
	margin-top: 1em;

	>li {
		counter-increment: sub-list;
		position: relative;
		padding-left: 1em;

		&::before {
			content: "（" counter(sub-list) "）";
			position: absolute;
			left: -1.2em;
		}
	}
}

/* チェック */
.bl_form_consent {
	margin-top: 20px;

	input[type="checkbox"] {
		display: none;
	}

	input[type="checkbox"]:checked+.wpcf7-list-item-label:after {
		width: 10px;
		height: 15px;
		transform: translateY(-50%) rotate(45deg);
		top: 12px;
		left: 10px;
		border: none;
		border-right: 2px solid #0661B5;
		border-bottom: 2px solid #0661B5;
		content: '';
		display: block;
		position: absolute;
		transition: .1s;
	}

	.wpcf7-list-item {
		position: relative;
		margin: 0;
	}

	.wpcf7-list-item-label {
		display: flex;
		align-items: center;
		gap: 15px;

		&::before {
			content: "";
			display: block;
			background: #fff;
			border: 1px solid #C1C1C1;
			width: 28px;
			height: 28px;
		}
	}
}



/* =================================
	フォーム 入力
================================= */

/* 未選択を削除 */
#career-sheet-method-area .wpcf7-list-item:has(input[value="未選択"]) {
	display: none;
}

.wpcf7-spinner {
	display: none;
}

.wpcf7-list-item {
	margin: 0;
}

.ly_form {
	padding-top: 80px;
}

.bl_form_group {
	font-weight: 500;
	display: flex;
	flex-flow: column;
	margin-top: 23px;

	&:has(.bl_form_radio) {
		gap: 11px;
	}

	.bl_form_label {
		font-size: 16px;
		line-height: 2.31;
		letter-spacing: .03em;
		display: flex;
		align-items: center;
		gap: 11px;
	}

	/* ラジオボタン */
	.bl_form_radio_wrap {
		display: flex;
		flex-wrap: wrap;
		gap: 5px 25px;

		div {
			display: flex;
			align-items: center;
			gap: 9px;

			a {
				color: #0661B5;
				text-decoration: underline;
			}
		}
	}

	.bl_form_radio {
		display: flex;
		flex-wrap: wrap;
		gap: 5px 25px;

		input {
			display: none;
		}

		.wpcf7-list-item-label {
			display: flex;
			align-items: center;
			gap: 7px;
			font-size: 16px;
			line-height: 2.31;
			letter-spacing: .03em;
			position: relative;

			&::before {
				content: "";
				border: 1px solid #1F1F1F;
				border-radius: 50%;
				width: 18px;
				height: 18px;
			}

			&::after {
				content: "";
				background: #0661B5;
				border-radius: 50%;
				opacity: 0;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 5px;
				width: 8px;
				height: 8px;
			}
		}
	}

	input[type="radio"]:checked+.wpcf7-list-item-label::after {
		opacity: 1;
	}

	/* 生年月日 */
	.bl_form_birthday {
		display: flex;
		align-items: center;
		gap: 23px;

		div {
			display: flex;
			align-items: center;
			gap: 12px;
		}
	}

	/* キャリアシート */

	.file-upload-btn {
		border: 1px solid #0661B5;
		border-radius: 115px;
		color: #0661B5;
		cursor: pointer;
		display: block;
		font-size: 16px;
		line-height: 1.875;
		padding: 16px 25px;
		width: 100%;
		max-width: 336px;
	}

	.sheet-2 {
		margin-top: 23px;
	}

	/* 元のファイル選択ボタンを非表示 */
	.bl_form_input_wrap input[type="file"] {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		overflow: hidden;
	}
}

/* ラジオ選択時のテキスト */
.bl_form_note {
	font-weight: 500;
	margin: 20px 0;
}

/* 入力 */
input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
	background: #fff;
	border: 1px solid #B8B8B8;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .03em;
	line-height: 1.875;
	padding: 16px 20px;
	resize: vertical;
	width: 100%;
}

/* 必須 */
.required {
	background: #EF5A39;
	border-radius: 4px;
	color: #fff;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .05em;
	line-height: 1;
	padding: 4px 8px;
}

/* =================================
	フォーム 確認
================================= */
.bl_formConfirm {
	.bl_form_group {
		border-bottom: 1px solid #B8B8B8;
		margin-top: 16px;
		padding-bottom: 19px;
	}

	p {
		font-weight: 500;
		font-size: 16px;
		line-height: 2.31;
	}

	.agree {
		margin-top: 25px;
	}
}


/* =================================
	ボタン
================================= */

/* 共通 */
.input_btn,
.back_btn,
.submit_btn {
	overflow: hidden;
	position: relative;

	input {
		background: transparent;
		border: none;
		cursor: pointer;
		outline: none;
		font-weight: 500;
		font-size: 22px;
		letter-spacing: .03em;
		line-height: 1;
		text-align: left;
		position: relative;
		z-index: 1;
	}

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: linear-gradient(90deg, #0661B5, #FCDFC8);
		transform: translateX(-100%);
	}

	&.is-hover::before {
		animation: arrowIn .8s ease forwards;
	}

	&.is-leave::before {
		animation: arrowOut .8s ease forwards;
	}
}

@keyframes arrowIn {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes arrowOut {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(100%);
	}
}

/* 確認 */
.input_btn {
	background: #0661B5;
	border-radius: 50px;
	margin: 80px auto 0;
	width: max-content;

	input {
		color: #fff;
		padding: 35px 47px;
		width: 424px;
	}

	&::after {
		content: "";
		background-image: url(../images/common/arrow-blue.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-color: #fff;
		background-size: 15px auto;
		border-radius: 30px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 47px;
		transition: .3s;
		width: 46px;
		height: 26px;
	}

}

/* 戻る */
.bl_form_button.col {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin-top: 80px;

	input {
		padding: 35px 42px;
		width: 370px;
	}
}

.back_btn {
	background: #fff;
	border: 1px solid #0661B5;
	border-radius: 170px;
	width: 100%;
	max-width: 370px;

	input {
		color: #0661B5;
	}

	&::after {
		content: "";
		background-image: url(../images/common/arrow-white.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-color: #0661B5;
		background-size: 15px auto;
		border-radius: 30px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 47px;
		transition: .3s;
		width: 46px;
		height: 26px;
	}

	&:hover {
		input {
			color: #fff;
		}

		&::after {
			background-image: url(../images/common/arrow-blue.svg);
			background-color: #fff;
		}
	}
}

/* 送信 */
.submit_btn {
	background: #0661B5;
	border-radius: 170px;
	width: 100%;
	max-width: 370px;

	input {
		color: #fff;
	}

	&::after {
		content: "";
		background-image: url(../images/common/arrow-blue.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-color: #fff;
		background-size: 15px auto;
		border-radius: 30px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 47px;
		transition: .3s;
		width: 46px;
		height: 26px;
	}
}

@media screen and (max-width: 900px) {

	.input_btn,
	.bl_form_button.col {
		input {
			padding: 30px 33px;
			width: 345px;
		}
	}

	.input_btn {
		margin-top: 50px;

		&::after {
			background-size: 18px auto;
			right: 16px;
			width: 50px;
			height: 30px;
		}
	}

	.bl_form_button.col {
		align-items: center;
		flex-flow: column;
		gap: 18px;
	}
}

/* =================================
	sp
================================= */
@media screen and (max-width: 767px) {
	main {
		margin-top: 50px;

		h2 {
			font-size: 28px;
		}

		>p {
			line-height: 1.875;
			margin-top: 48px;
		}
	}

	.ly_form {
		padding-top: 50px;
	}

	.bl_form_group {
		.bl_form_birthday {
			flex-wrap: wrap;

			div:nth-child(2),
			div:nth-child(3) {
				width: 45%;
			}
		}
	}

	.bl_form_consent {
		.wpcf7-list-item-label {
			gap: 8px;
		}
	}
}