@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap');

html {
	font-family:'BIZ UDGothic', sans-serif;
}

body {
	margin:0;
}

input, textarea, select, option, button {
	box-sizing:border-box;
	color:inherit;
	font:inherit;
	max-width:100%;
}

textarea {resize:vertical;}

pre {
	font:inherit;
	margin:0;
	white-space:pre-wrap;
	max-width:100%;
}

/* ヘッダー */
header {
	display:flow-root;
	margin:0;
	padding:10px;
	position:relative;
}

[data-btn-type] {
	background-color:#eee;
	border:none;
	box-sizing:border-box;
	cursor:pointer;
	height:2em;
	padding:0 10px;
	min-width:150px;
}

/* メイン */
main {
	box-sizing:border-box;
	display:block;
	margin:0;
	padding:0;
	position:relative;
}

/* form */
.form_box {
	box-sizing:border-box;
	border:none;
	display:flow-root;
	display:block flow-root;
	margin:0 auto 20px;
	padding:0;
	width:600px;
	max-width:100%;
}

.form_item {
	box-sizing:border-box;
	margin:0;
	padding:10px;
	width:100%;
	max-width:100%;
}

.form_title {
	display:inline-block;
	display:inline flow-root;
	text-align:right;
}

.form_value {
	box-sizing:border-box;
}

@media not all and (max-width: 600px) {

	.form_item {
		align-items:baseline;
		display:inline-grid;
		display:inline grid;
		grid-template-columns:5em 1em 1fr;
	}

	.form_value {
		display:inline-block;
		display:inline flow-root;
	}

}

@media (max-width: 600px) {

	.form_item {
		display:block;
	}

	.form_value {
		display:block;
		display:block flow-root;
		padding:0.25em 0 0 2em;
	}

}

.btn_box {
	border:none;
	display:flex;
	padding:0;
}

@media (max-width: 600px) {

	.btn_box {
		flex-direction:column-reverse;
		gap:30px 0;
		text-align:center;
		margin:20px 0 0;
	}

}

@media not all and (max-width: 600px) {

	.btn_box {
		justify-content:space-around;
		margin:20px auto 0;
		max-width:900px;
	}

}

[type="email"] {
	width:30em;
}