@charset "utf-8";
/* -----------------------------
 contact.css
----------------------------- */

form p {
	margin-bottom: 5px;
}

.form {
	border-collapse: collapse;
}

.form caption {
	caption-side: bottom;
	text-align: left;
}

.form caption .required {
	display: inline-block;
	width: 20px;
	background-color: var(--color-impact);
	background-image: url(../../images/common/icon-check.png);
	background-position: 0px;
	background-repeat: no-repeat;
	background-size: 20px auto;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: bottom;
}

.form th {
	background-color: var(--color-impact);
	color: var(--text-color);
	text-align: center;
	font-weight: normal;
}

.form th.required {
	background-image: url(../../images/common/icon-check.png);
	background-position: 3px;
	background-repeat: no-repeat;
	background-size: 20px auto;
}

.form th.required span {
	display: none;
}

form p.btn button {
	position: relative;
	width: 200px;
	margin: 0px;
	padding: 0px;
	border: none;
	border-radius: 0px;
	background: none;
	background-color: var(--color-impact);
	font-size: x-large;
	color: var(--text-color);
	line-height: 2em;
}

.telephone {
	margin: 0px;
	margin-top: 50px;
	padding: 0px;
}

.telephone dt {
	margin: 0px;
	padding: 0px;
	text-align: center;
}

.telephone dd {
	margin: 0px;
	padding: 0px;
	text-align: center;
}

.telephone .link {
	font-size: x-large;
	line-height: 200%;
}

.telephone .link a {
	text-decoration: none;
}

/* -----------------------------
 PC
----------------------------- */
@media screen and (min-width:1000px) {
	.form {
		width: 100%;
	}

	.form tr {
		display: flex;
		justify-content: center;
		align-items: stretch;

		margin-bottom: 10px;
	}

	.form th {
		width: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form td {
		flex-grow: 1;
	}

	.form input,
	.form textarea {
		width: 100% !important;
		padding: 3px;
	}

	.form .textarea {
		flex-direction: column;
	}

	.telephone {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.telephone dt {
		flex-basis: calc(50% - 20px);
		margin: 0px 10px;
		text-align: right;
	}

	.telephone dd {
		flex-basis: calc(50% - 20px);
		margin: 0px 10px;
		text-align: left;
	}

	.telephone .link {
		padding-bottom: 10px;
		line-height: inherit;
	}
}

/* -----------------------------
 SP
----------------------------- */
@media screen and (max-width:999px) {
	article .content {
		padding-left: 0px;
		padding-right: 0px;
	}

	form p {
		margin: 0px 5px 5px;
	}

	.form {
		width: 100%;
	}

	.form caption {
		caption-side: bottom;
		padding: 0px 5px;
		text-align: left;
	}

	.form th {
		display: block;
		line-height: 200%;
	}

	.form td {
		display: block;
		margin-bottom: 20px;
	}
}