/* 画像（変数）が縦長か横長かによってwを変更する
スクリプトはimg-resize.jsに記載 */
.form-field {
	position: relative;
	margin-bottom: 20px;
}

.form-field-label {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%) scale(0.9);
	color: #000;
	line-height: 1;
	z-index: 1;
	pointer-events: none;
	transition: top 0.2s ease, font-size 0.2s ease, padding 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.form-field .form-field-label {
	transform: translateY(0) scale(0.9);
	top: 18px;
}

.form-field-label--required::after {
	content: '※';
	color: #ED6C00;
	margin-left: 3px;
}

.form-field-input,
.form-field-textarea {
	width: 100%;
	background-color: #fff;
	color: #000;
	border: none;
	padding: 25px 20px 10px 20px;
	font-family: inherit;
	outline: none;
	display: block;
	transform: scaleY(0.9);
}

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

.form-field-input:focus,
.form-field-textarea:focus {
	outline: 2px solid #ED6C00;
	outline-offset: -2px;
	border-radius: 5px;
}

/* フォーカス時 or オートフィル時 or 入力済み */
.form-field-input:focus+.form-field-label,
.form-field-textarea:focus+.form-field-label,
.form-field.is-active .form-field-label {
	top: 9px;
	font-size: 9px;
	transform: translateY(0);
}

/* オートフィル検知用ダミーアニメーション */
@keyframes autofill-detected {
	from {}

	to {}
}

input:-webkit-autofill {
	animation-name: autofill-detected;
	animation-duration: 1ms;
	animation-fill-mode: both;
	animation-iteration-count: 1;
}


/* ↓ 確認画面 ↓  ******************************************************/
.confirm-wrap .form-field .form-field-label {
    color: #fff;
}

.confirm-wrap .form-field {
	position: relative;
	margin-bottom: 20px;
	border: solid 1px #fff;
	padding: 25px 20px 10px 20px;
}

.confirm-wrap .form-field .form-field-label {
    transform: translateY(0);
    top: 9px;
    font-size: 9px;
}

.confirm-wrap .form-field-label--required::after {
	content: none;
}