/* /css/form_style.css */
body {
	font-family: sans-serif;
	background-color: #f4f4f4;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	padding: 20px 0;
	box-sizing: border-box;
}
/* 各ページのコンテナ共通スタイル */
.form-container,
.confirm-container,
.message-box {
	background-color: #fff;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	width: 100%;
}
.form-container, .confirm-container {
	max-width: 600px;
}
.message-box {
	max-width: 600px;
	text-align: center;
}
h1 {
	text-align: center;
	color: #333;
	font-size: 1.8em;
}
/* --- 登録フォーム (register.php) --- */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 16px; }
.btn-submit { width: 100%; padding: 12px; background-color: #3498db; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
.btn-submit:hover { background-color: #2980b9; }
.error-list { list-style: none; padding: 15px; margin-bottom: 20px; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: 4px; }
.back-link { display: block; text-align: center; margin-top: 20px; }
/* --- 確認ページ (confirm.php) --- */
.confirm-container table { width: 100%; border-collapse: collapse; }
.confirm-container th, .confirm-container td { border: 1px solid #ddd; padding: 12px; text-align: left; word-break: break-all; }
.confirm-container th { background-color: #f9f9f9; width: 30%; }
.button-group { display: flex; justify-content: space-between; margin-top: 30px; }
.button-group .btn { padding: 12px 25px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; text-decoration: none; text-align: center; }
.button-group .btn-submit { background-color: #2ecc71; color: white; flex-grow: 1; margin-left: 10px;}
.button-group .btn-back { background-color: #95a5a6; color: white; flex-grow: 1; margin-right: 10px;}
/* --- 認証ページ (verify.php) --- */
.login-link { display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #3498db; color: white; text-decoration: none; border-radius: 4px; }
.optional-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 6px;
	font-size: 0.7em;
	font-weight: normal;
	background-color: #7f8c8d;
	color: white;
	border-radius: 4px;
	vertical-align: middle;
}
/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
	body { padding: 10px 0; }
	h1 { font-size: 1.5em; }
	.form-container, .confirm-container, .message-box {
		padding: 20px;
		margin: 0 10px;
	}
	/* 確認ページのテーブル */
	.confirm-container th, .confirm-container td { padding: 8px; }
	.confirm-container th { width: 100%; display: block; border-bottom: none; }
	.confirm-container td { width: 100%; display: block; }
	.confirm-container tr { display: block; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; }
	/* 確認ページのボタン */
	.button-group {
		flex-direction: column-reverse;
		gap: 15px;
	}
	.button-group .btn-submit, .button-group .btn-back {
		margin: 0;
	}
}
/* テキスト選択の無効化 */
.btn,
.btn-submit,
.btn-back,
.login-link,
label {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}