/* =========================================================
Recruit Form
募集ページ専用
========================================================= */

.recruit-form{
	width:100%;
	max-width:1000px;
	margin:0 auto;
}

.txt-c{
	max-width:760px;

margin:0 auto 30px;

font-size:
clamp(
20px,
2.4vw,
34px
);

line-height:1.9;

letter-spacing:.06em;

font-family:
'Cormorant Garamond',
serif;

font-weight:400;

text-align:center;

color:#2f2f2f;}

.bd {
    padding-bottom: 10px;
	border-bottom: solid 1px #000;
	margin-bottom: 30px;
}

.li-asta {
    position: relative;
	list-style-type:none!important;
	padding-left: 1.5em;
}

.li-asta:before {
    content: "※";
    position: absolute;
    top: 0px;
    left: -1em;
	padding-left: 1em;
}


.about-link{

margin-top:40px;

display:inline-block;

}


.about-link a{

position:relative;

display:inline-block;

padding-bottom:10px;

font-size:13px;

letter-spacing:.18em;

color:var(--accent);

text-transform:uppercase;

}


.about-link a::before{

content:"";

position:absolute;

left:0;
bottom:0;

width:0;

height:1px;

background:var(--accent);

transition:
width .6s cubic-bezier(.19,1,.22,1);

}


.about-link a:hover::before{

width:100%;

}

/* =========================================================
Required
========================================================= */

.recruit-form-required{
	margin-bottom:40px;
	text-align:right;
	font-size:12px;
	letter-spacing:.08em;
	color:#777;
}

.recruit-form-required span{
	display:inline-block;
	margin-right:5px;
	color:#8b7355;
	font-size:16px;
}


/* =========================================================
Form Fields
========================================================= */

.recruit-form-fields{
	border-top:1px solid #d8d2ca;
}


/* =========================================================
Row
========================================================= */

.recruit-form-row{
	display:grid;
	grid-template-columns:260px minmax(0,1fr);
	border-bottom:1px solid #d8d2ca;
}


/* =========================================================
Label
========================================================= */

.recruit-form-label{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	gap:8px;
	padding:30px 35px;
	background:#faf9f7;
	border-right:1px solid #d8d2ca;
}


.recruit-form-label label{
	display:block;
	margin:0;
	font-family:
		"Noto Sans JP",
		sans-serif;
	font-size:14px;
	font-weight:500;
	letter-spacing:.08em;
	line-height:1.8;
	color:#333;
}


.recruit-form-required-mark{
	margin-right:5px;
	color:#8b7355;
	font-size:15px;
}


.recruit-form-sub-label{
	display:block;
	font-size:11px;
	letter-spacing:.08em;
	color:#999;
}


/* =========================================================
Input Area
========================================================= */

.recruit-form-input{
	padding:30px 40px;
	min-width:0;
}


/* =========================================================
Input
========================================================= */

.recruit-form input[type="text"],
.recruit-form input[type="email"],
.recruit-form input[type="tel"],
.recruit-form textarea{
	display:block;
	width:100%;
	max-width:100%;
	box-sizing:border-box;
	margin:0;
	padding:14px 16px;
	border:1px solid #d8d2ca;
	border-radius:0;
	background:#fff;
	color:#333;
	font-family:
		"Noto Sans JP",
		sans-serif;
	font-size:14px;
	line-height:1.8;
	letter-spacing:.04em;
	transition:
		border-color .3s ease,
		box-shadow .3s ease;
	-webkit-appearance:none;
}


.recruit-form input[type="text"]:focus,
.recruit-form input[type="email"]:focus,
.recruit-form input[type="tel"]:focus,
.recruit-form textarea:focus{
	outline:none;
	border-color:#8b7355;
	box-shadow:0 0 0 1px #8b7355;
}


.recruit-form textarea{
	min-height:180px;
	resize:vertical;
}


/* Placeholder */

.recruit-form input::placeholder,
.recruit-form textarea::placeholder{
	color:#b8b3ad;
	font-size:13px;
}


/* =========================================================
Name
========================================================= */

.recruit-form-input-group{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}


.recruit-form-input-caption{
	display:block;
	margin-bottom:8px;
	font-size:11px;
	letter-spacing:.08em;
	color:#999;
}


/* =========================================================
Checkbox
========================================================= */

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


.recruit-form-checkbox label{
	display:inline-flex;
	align-items:center;
	margin-right:30px;
	cursor:pointer;
	font-size:14px;
	letter-spacing:.06em;
}


.recruit-form-checkbox input[type="checkbox"]{
	width:18px;
	height:18px;
	margin:0 9px 0 0;
	accent-color:#8b7355;
}


/* =========================================================
Note
========================================================= */

.recruit-form-note{
	margin:12px 0 0;
	font-size:11px;
	line-height:1.8;
	letter-spacing:.04em;
	color:#888;
}


.recruit-form-note-top{
	margin:0 0 12px;
}


/* =========================================================
Buttons
========================================================= */

.recruit-form-actions{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:15px;
	margin:70px auto 70px;
}


.recruit-form-button{
	margin:0;
}


.recruit-form-button input,
.recruit-form-button button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:220px;
	height:60px;
	padding:0 35px;
	border:1px solid #8b7355;
	border-radius:0;
	background:#fff;
	color:#8b7355;
	font-family:
		"Noto Sans JP",
		sans-serif;
	font-size:12px;
	font-weight:500;
	letter-spacing:.15em;
	cursor:pointer;
	transition:
		background .3s ease,
		color .3s ease,
		border-color .3s ease;
}


.recruit-form-button input:hover,
.recruit-form-button button:hover{
	background:#8b7355;
	border-color:#8b7355;
	color:#fff;
}


/* 確認 */

.recruit-form-button-confirm input{
	background:#8b7355;
	color:#fff;
}


.recruit-form-button-confirm input:hover{
	background:#6f5a44;
	border-color:#6f5a44;
}


/* 戻る */

.recruit-form-button-back input{
	border-color:#cfc8c0;
	color:#777;
}


.recruit-form-button-back input:hover{
	background:#f7f5f2;
	border-color:#cfc8c0;
	color:#555;
}


/* 送信 */

.recruit-form-button-submit input{
	background:#8b7355;
	color:#fff;
}


.recruit-form-button-submit input:hover{
	background:#6f5a44;
}


/* =========================================================
Notes
========================================================= */

.recruit-form-notes{
	margin-top:40px;
	padding:40px 0 0 0;
	border-top:1px solid #d8d2ca;
}


.recruit-form-section-heading{
	margin-bottom:35px;
}


.recruit-form-section-heading-en{
	display:block;
	margin-bottom:8px;
	font-family:
		"Playfair Display",
		serif;
	font-size:11px;
	font-weight:400;
	letter-spacing:.2em;
	color:#8b7355;
}


.recruit-form-section-heading h2{
	margin:0;
	font-family:
		"Noto Sans JP",
		sans-serif;
	font-size:20px;
	font-weight:500;
	letter-spacing:.1em;
	color:#333;
}


/* =========================================================
Note List
========================================================= */

.recruit-form-note-list{
	margin:0;
	padding:0;
	list-style:none;
}


.recruit-form-note-list li{
	position:relative;
	margin:0;
	padding:0 0 0 20px;
	font-size:13px;
	line-height:2;
	letter-spacing:.04em;
	color:#666;
}


.recruit-form-note-list li + li{
	margin-top:15px;
}


.recruit-form-note-list li::before{
	content:"";
	position:absolute;
	top:.9em;
	left:0;
	width:5px;
	height:5px;
	background:#8b7355;
	border-radius:50%;
}


/* =========================================================
TEL
========================================================= */

.recruit-form-tel{
	margin-top:25px !important;
}


.recruit-form-tel::before{
	display:none;
}


.recruit-form-tel span{
	margin-right:12px;
	font-family:
		"Playfair Display",
		serif;
	font-size:13px;
	letter-spacing:.15em;
	color:#8b7355;
}


.recruit-form-tel a{
	font-family:
		"Playfair Display",
		serif;
	font-size:20px;
	letter-spacing:.08em;
	color:#333;
	text-decoration:none;
}


.recruit-form-tel a:hover{
	color:#8b7355;
}


/* =========================================================
Mail
========================================================= */

.recruit-form-mail{
	margin-top:25px !important;
}


.recruit-form-mail::before{
	display:none;
}


.recruit-form-mail a{
	color:#8b7355;
	text-decoration:none;
	border-bottom:1px solid #cfc4b7;
	transition:border-color .3s ease;
}


.recruit-form-mail a:hover{
	border-color:#8b7355;
}


/* =========================================================
Responsive
========================================================= */

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

	.recruit-form{
		width:100%;
	}


	.recruit-form-required{
		margin-bottom:25px;
		font-size:11px;
	}


	/* Row */

	.recruit-form-row{
		display:block;
	}


	/* Label */

	.recruit-form-label{
		padding:18px 20px;
		border-right:none;
		border-bottom:1px solid #e5e1dc;
	}


	.recruit-form-label label{
		font-size:13px;
	}


	/* Input */

	.recruit-form-input{
		padding:20px;
	}


	/* Name */

	.recruit-form-input-group{
		grid-template-columns:1fr;
		gap:18px;
	}


	/* Checkbox */

	.recruit-form-checkbox{
		display:block;
	}


	.recruit-form-checkbox label{
		margin-right:20px;
		margin-bottom:10px;
	}


	/* Inputs */

	.recruit-form input[type="text"],
	.recruit-form input[type="email"],
	.recruit-form input[type="tel"],
	.recruit-form textarea{
		padding:12px 14px;
		font-size:13px;
	}


	/* Buttons */

	.recruit-form-actions{
		flex-direction:column;
		gap:10px;
		margin:50px auto 70px;
	}


	.recruit-form-button{
		width:100%;
	}


	.recruit-form-button input,
	.recruit-form-button button{
		width:100%;
		min-width:0;
		height:56px;
	}


	/* Notes */

	.recruit-form-notes{
		margin-top:55px;
		padding-top:40px;
	}


	.recruit-form-section-heading{
		margin-bottom:25px;
	}


	.recruit-form-section-heading h2{
		font-size:18px;
	}


	.recruit-form-note-list li{
		padding-left:16px;
		font-size:12px;
		line-height:1.9;
	}


	.recruit-form-note-list li + li{
		margin-top:12px;
	}


	.recruit-form-tel a{
		font-size:18px;
	}

}