@charset "utf-8";
/*===========================================================================

　お問い合わせフォームなど、フォームに関連する全てのスタイルをまとめます。
	
===========================================================================*/

/*　説明　*/
.form-intro {
	padding: var(--space-5);
	background-color: var(--color-bg-light);
}

/*　エラーメッセージ　*/
.form-error-summary {
	color: var(--color-error);
	text-align: left;
	font-weight: bold;
}

/*　必須項目　*/
.required-mark {
	display:inline-block;
	color:var(--color-error);
	font-size: 1.2rem;
	margin-left: var(--space-1);
	padding: var(--space-1) var(--space-2);
	font-weight:400;
	line-height:1;
	vertical-align: text-bottom;
}

/*　プライバシーポリシー　*/
.privacy-box{
	margin-top: var(--space-10);
	border: 1px solid var(--color-border);
	padding:var(--space-5);
	height:300px;
	overflow-y:scroll;
	font-size:1.4rem;
	}
.privacy-box__ttl{
	background-color:var(--color-bg-light);
	padding:var(--space-3);
	font-weight:700;
	margin-top: var(--space-5);
	margin-bottom: var(--space-5);
	}

/*
<input name="変数" id="変数" type="text" value="$FORM{'変数'}" placeholder="" class="form-input">
<textarea name="変数" id="変数" rows="6" class="form-textarea">$FORM{'変数'}</textarea>
<select name="変数" id="変数" class="form-select"><option value="">▼選択してください</option><option></option><option></option></select>
*/

.form-input,
.form-textarea,
.form-select {
	display: block;
	width: 100%;
	padding: var(--space-4);
	font-size: 1.6rem;
	font-family: inherit;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	background-color: #fff;
	transition: border-color 0.3s, box-shadow 0.3s;
	box-sizing: border-box;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.form-textarea {
	min-height: 120px;
	resize: vertical;
}

/*
ラジオボタン
<div class="form-choice-group">
	<div><input class="form-choice-input" type="checkbox" name="変数" value="内容" id="変数1"><label class="form-choice-label" for="変数1">内容</label></div>
	<div><input class="form-choice-input" type="checkbox" name="変数" value="内容" id="変数2"><label class="form-choice-label" for="変数2">内容</label></div>
</div>
チェックボックス
<div class="form-choice-group">
	<div><input class="form-choice-input" type="radio" name="変数" value="内容" id="変数1"><label class="form-choice-label" for="変数1">内容</label></div>
	<div><input class="form-choice-input" type="radio" name="変数" value="内容" id="変数2"><label class="form-choice-label" for="変数2">内容</label></div>
</div>
*/

.form-choice-group {
	display: flex;
	flex-direction: column;
	/*gap: var(--space-1);*/
}
.form-choice-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.form-choice-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
}
.form-choice-label::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid var(--color-border);
	background-color: #fff;
	transition: border-color 0.3s, background-color 0.3s;
}
.form-choice-input[type="radio"] + .form-choice-label::before {
	border-radius: 50%;
	}
	.form-choice-input[type="radio"]:checked + .form-choice-label::before {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
		box-shadow: inset 0 0 0 3px #fff;
	}
.form-choice-input[type="checkbox"] + .form-choice-label::before {
	border-radius: 4px;
	}
	.form-choice-input[type="checkbox"]:checked + .form-choice-label::before {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
		background-size: 100%;
	}
.form-choice-input:focus + .form-choice-label::before {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/*
ファイル選択
<div class="form-file-item">
	<input type="file" id="file-upload" name="file-upload" class="form-file-input">
	<label for="file-upload" class="form-file-label">ファイルを選択</label>
	<span class="form-file-name">選択されていません</span>
</div>
*/
.form-file-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.form-file-item:not(:last-child) {
	margin-bottom: var(--space-2);
}
.form-file-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.form-file-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	font-size: 1.6rem;
	color: var(--color-primary);
	background-color: #fff;
	border: 1px solid var(--color-primary);
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}
.form-file-label:hover {
	background-color: var(--color-primary);
	color: #fff;
}
.form-file-name {
	font-size: 1.4rem;
	color: #666;
}

/*
ボタン
<div class="form-button-group">
	<button type="submit" class="form-btn form-submit-btn">送信する</button>
	<button type="reset" class="form-btn form-reset-btn">リセット</button>
</div>
*/
.form-button-group {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-10);
}
.form-btn {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	max-width: 400px;
	padding: var(--space-5);
	font-size: 1.6rem;
	font-weight: 700;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.3s, border-color 0.3s, color 0.3s;
	text-align: center;
	font-family: inherit;
}
.form-submit-btn {
	color: #fff;
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
}
.form-submit-btn:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	transform: translateY(-2px);
}
.form-reset-btn {
	color: var(--color-text);
	background-color: var(--color-bg-light);
	border: 1px solid var(--color-border);
}
.form-reset-btn:hover {
	background-color: #e9e9e9;
	border-color: #ccc;
}