/* ========================================================= */
/* 訪問サービス求人応募フォーム固有のスタイル (css/RecruitHomon.css) */
/* ========================================================= */
@charset "UTF-8";

/* 応募フォームヘッダーのセンタリング */
#apply-header h1 {
	text-align: center;
	font-size: 32px;
	margin-bottom: 10px;
}

/* 応募フォーム全体のラッパー */
#application-form {
	padding: 40px 0 80px;
	background-color: #f8f8f8; /* 背景色を付けてフォームエリアを区別 */
}

#application-form h2 {
	font-size: 28px;
	color: #00796b;
	border-bottom: 2px solid #e0f2f1;
	padding-bottom: 10px;
	margin-bottom: 40px;
	text-align: center;
}

.subtitle, .required-note {
	text-align: center;
	margin-bottom: 30px;
	font-size: 15px;
	color: #555;
}

/* 募集要項の再確認セクション */
#job-summary {
	padding: 30px 0;
	margin-bottom: 40px;
}

/* 「ご応募いただく前に、...」の段落をセンタリング */
#job-summary p {
	text-align: center;
	margin-bottom: 20px;
}

.summary-card {
	max-width: 600px;
	margin: 20px auto;
	padding: 25px;
	border: 2px solid #00796b;
	border-radius: 8px;
	background-color: #fff;
	text-align: center;
}

.summary-card p {
	margin: 5px 0;
	font-size: 16px;
}

.summary-card strong {
	color: #d32f2f; /* 強調色は赤系で目立たせる */
	font-weight: bold;
}

/* フォーム本体のスタイル */
.standard-form {
	max-width: 650px;
	margin: 0 auto;
	padding: 30px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.form-group {
	margin-bottom: 25px;
}

.form-group label {
	display: block;
	font-weight: bold;
	margin-bottom: 8px;
	color: #333;
	font-size: 14px;
}

/* 💡 追加: フォームの2カラム表示用 */
.form-group.half-width {
	width: 48%;
	float: left;
	margin-right: 4%;
}
/* 2の倍数番目 (右側の要素) のマージンを解除 */
.standard-form .form-group.half-width:nth-of-type(2n) {
	margin-right: 0;
}


/* 必須マークのスタイル */
.required {
	font-size: 12px;
	color: #d32f2f;
	background-color: #ffebee;
	padding: 3px 6px;
	margin-left: 10px;
	border-radius: 4px;
	font-weight: normal;
}

/* テキスト入力フィールド */
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="number"], /* 💡 修正: input[type="number"] (年齢) を追加 */
.form-group textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	transition: border-color 0.3s;
	font-size: 16px;
	line-height: 1.5;
}

.form-group input:focus,
.form-group textarea:focus {
	border-color: #00796b;
	outline: none;
	box-shadow: 0 0 5px rgba(0, 121, 107, 0.2);
}

.form-group textarea {
	resize: vertical;
	min-height: 120px;
}

/* ラジオボタンのグループ */
.radio-group input[type="radio"] {
	display: none;
}

.radio-group label {
	display: inline-block;
	padding: 10px 20px;
	margin-right: 15px;
	border: 1px solid #00796b;
	border-radius: 5px;
	cursor: pointer;
	background-color: #fff;
	color: #00796b;
	transition: background-color 0.2s, color 0.2s;
	font-weight: normal;
}

.radio-group input[type="radio"]:checked + label {
	background-color: #00796b;
	color: #fff;
	font-weight: bold;
	border-color: #00796b;
}

/* チェックボックス（プライバシーポリシー同意） */
.form-check-box {
	text-align: center;
	margin-top: 40px;
}

.form-check-box label {
	display: inline-block;
	font-weight: normal;
	cursor: pointer;
	padding-left: 5px;
	margin-bottom: 0;
	font-size: 15px;
}

.form-check-box input[type="checkbox"] {
	transform: scale(1.3);
	margin-right: 10px;
	vertical-align: middle;
}

.form-check-box a {
	color: #00796b;
	text-decoration: underline;
}

/* 送信ボタン */
.form-submit {
	text-align: center;
	margin-top: 50px;
}

.btn-submit {
	padding: 15px 40px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	background-color: #d32f2f; /* 目立つ色（赤系）でアクションを促す */
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.1s;
}

.btn-submit:hover {
	background-color: #c62828;
	transform: translateY(-1px);
}

/* ========================================================= */
/* 💡 追加: レイアウト調整用 (clearfix) */
/* ========================================================= */

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* ========================================================= */
/* エラー表示用スタイル (追加・修正) */
/* ========================================================= */

/* フィールドごとのエラーメッセージ */
.error-message {
	color: #d32f2f; /* 強調色（赤系）と合わせる */
	font-size: 0.9rem;
	margin-top: 5px;
	display: block;
	font-weight: bold;
}

/* メインエラーアラート (main-error-alert)
/* 中央配置と赤色で強調 */
.main-error-alert {
	text-align: center; /* 中央配置 */
	border: 2px solid #d32f2f;
	background-color: #ffebee; /* 必須マークと同じ薄い赤背景 */
	color: #d32f2f;
	padding: 15px;
	max-width: 650px; /* フォーム本体に合わせる */
	margin: 0 auto 30px; /* 中央配置と下の余白 */
	border-radius: 5px;
	font-weight: bold;
}

/* エラーがあるフィールドの枠を目立たせる (has-error) - ご要望に合わせて追加 */
.form-group.has-error input[type="text"],
.form-group.has-error input[type="tel"],
.form-group.has-error input[type="email"],
.form-group.has-error input[type="number"], /* 💡 修正: input[type="number"] (年齢) のエラー時スタイルを追加 */
.form-group.has-error textarea {
	border: 2px solid #d32f2f; /* 強調色（赤系）の太線 */
	background-color: #fef4f4; /* 薄い赤背景 */
}

/* ラジオボタンのエラー時の枠も対応（ラジオボタンのラベル全体を囲む）*/
.form-group.has-error .radio-group {
	padding: 5px;
	border: 1px dashed #d32f2f; /* 点線などで囲む */
	border-radius: 5px;
}

/* ========================================================= */
/* レスポンシブ対応 (モバイルファースト) */
/* ========================================================= */
@media (max-width: 600px) {

	/* フォームエリアのパディング調整 */
	#application-form {
		padding: 30px 0;
	}

	.standard-form {
		padding: 20px;
		margin: 0 10px;
	}

	#application-form h1 {
		font-size: 24px;
		margin-bottom: 20px;
	}

	#application-form h2 {
		font-size: 22px;
		margin-bottom: 30px;
	}

	/* 2カラム表示の解除 */
	.form-group.half-width {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	/* ラジオボタンの縦並び */
	.radio-group {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.radio-group label {
		display: block;
		width: 100%;
		margin-right: 0;
		text-align: center;
	}

	/* ボタンのサイズ調整 */
	.btn-submit {
		width: 100%;
		padding: 15px 0;
		font-size: 16px;
	}
}