@charset "utf-8";

* {
	box-sizing: border-box;
}

html,body {
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mainBg {
	background-color: #fafafa;
	flex: 1;
}

/* main */
main {
	padding: 16px 16px 64px;
	max-width: 1080px;
	margin: 0 auto;
}

/* title */
main .title p {
	margin: 0;
	color: #666;
	margin-top: 8px;
}

main .title h2 {
	margin: 38px 0 0;
	font-size: 2rem;
}


/* breadcrumb */
.breadcrumb ul{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	color: #666;
}

.breadcrumb li {
	display: inline;
}

.breadcrumb li:after {
	content: '>';
	padding: 0 0.2em;
	font-size: 0.7rem;
}

.breadcrumb li:last-child:after {
	content: '';
}

.breadcrumb a {
	text-decoration: none;
	color: inherit;
}

/* contactCard */
.contactCard {
	background-color: #fff;
	border-radius: 10px;
	padding: 12px 16px 24px 16px;
	margin-top: 48px;
	box-shadow: 0 0 2px rgb(0 0 0 / 0.2);
}

.contactCard .caption {
	font-weight: bold;
	color: #222;
	margin-top: 18px;
}

.contactCard input,
.contactCard textarea {
	padding-block: 10px;
	padding-inline: 14px;
	border-radius: 10px;
	border: 1px solid #e5e7eb;
	width: 100%;
	margin-top: 18px;
}

.illigalName,
.illigalEmail,
.illigalSubject,
.illigalDescription {
	margin-top: 18px;
}

.hide {
	display: none;
}

.name {
	max-width: 300px;
}

.email,
.subject {
	max-width: 600px;
}

.description {
	resize: none;
}

.clear {
	background-color: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
}

.confirm {
	background-color: rgb(57, 57, 255);
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 10px 12px;
	color: #fff;
	margin-left: 4px;
	cursor: pointer;
}

.buttonArea {
	text-align: right;
	margin: 18px 10px 0 0;
}

.colorRed {
	color: red;
}


@media (min-width: 900px) {
	.inputRow {
		display: flex;
		margin-top: 12px;
	}

	.caption {
		width: 150px;
	}

	.contactCard input,
	.contactCard textarea {
		flex: 1;
	}

	.illigalName,
	.illigalEmail,
	.illigalSubject,
	.illigalDescription {
		margin-left: 6px;
	}
}
