@charset "UTF-8";

#pageHeader {
	hgroup::before {
		background-color: var(--color-orange);
		background-image: url(../images/icon_mail.svg);
		@media screen and (min-width:769px), print{
			background-size: 44px auto;
		}
		@media screen and (max-width:768px){
			background-size: 22px auto;
		}
	}
}
#contents { color: var(--color-brown); }

#formInner {
	max-width: 980px;
	margin-inline: auto;
	.caution { color: var(--color-orange); }
	.message {
		margin-top: 1em;
		strong { color: var(--color-orange); }
	}
	#confTitle { font-weight: 700; }
	#formWrap {
		border-top: 1px solid var(--color-brown);
		dl {
			border-bottom: 1px solid var(--color-brown);
			.require { color: var(--color-orange); }
		}
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		textarea {
			width: 100%;
			border: none;
			vertical-align: top;
			box-sizing: border-box;
			border: 1px solid var(--color-beige);
			background-color: var(--color-beige);
			&:focus {
				border-color: var(--color-orange);
			}
		}
		textarea { resize: vertical; }
	}
	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		input:not([type="hidden"]), a {
			color: #fff;
			padding: 0;
			border: none;
			cursor: pointer;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			&[type="reset"], &[type="button"], &:is(a) { background-color: var(--color-brown); }
			&[type="submit"] { background-color: var(--color-orange); }
		}
	}
}
@media screen and (min-width:769px), print{
	#formInner {
		padding-inline: 25px;
		#confTitle {
			font-size: 30px;
			margin-bottom: 30px;
		}
		#mainText {
			font-size: 20px;
			font-weight: 700;
			line-height: 49px;
		}
		.caution {
			font-size: 16px;
			margin-top: 30px;
		}
		#formWrap {
			margin-top: 90px;
			dl {
				display: flex;
				font-size: 16px;
				padding-inline: 35px 25px;
				dt {
					width: 240px;
					padding-top: 44px;
				}
				dd {
					width: calc(100% - 240px);
					padding-block: 20px;
				}
			}
			&.confirm dd {
				min-height: 24px;
				padding-block: 44px;
			}
			input[type="text"],
			input[type="email"],
			input[type="tel"],
			textarea {
				padding: 27px;
				border-radius: 10px;
			}
			textarea { height: 200px; }
		}
		.buttons {
			padding-block: 60px 20px;
			li + li { margin-left: 40px; }
			input:not([type="hidden"]), a {
				font-size: 24px;
				border-radius: 20px;
				&[type="reset"], &[type="button"], &:is(a) {
					width: 240px;
					height: 80px;
					&:hover {
						color: var(--color-brown);
						background-color: var(--color-beige);
					}
				}
				&[type="submit"] {
					width: 400px;
					height: 120px;
					&:hover {
						color: var(--color-orange);
						background-color: var(--color-beige);
					}
				}
			}
		}
	}
}
@media screen and (max-width:768px){
	#formInner {
		padding-inline: 20px;
		#confTitle {
			font-size: 20px;
			margin-bottom: 11px;
		}
		#mainText {
			font-size: 14px;
			line-height: 38px;
		}
		.caution {
			font-size: 10px;
			margin-top: 11px;
		}
		#formWrap {
			margin-top: 63px;
			dl {
				font-size: 12px;
				padding-inline: 10px;
				padding-bottom: 15px;
				dt { padding-block: 8px; }
			}
			input[type="text"],
			input[type="email"],
			input[type="tel"],
			textarea {
				padding: 15.5px;
				border-radius: 5px;
			}
			textarea { height: 150px; }
		}
		.buttons {
			font-size: 14px;
			margin-top: 33px;
			flex-direction: column-reverse;
			li { margin-bottom: 22px; }
			input:not([type="hidden"]), a {
				border-radius: 10px;
				margin-inline: auto;
				&[type="reset"], &[type="button"], &:is(a) {
					width: 150px;
					height: 40px;
				}
				&[type="submit"] {
					width: 230px;
					height: 60px;
				}
			}
		}
	}
}