@charset "utf-8";

/* tableStyle01
---------------------------------------- */
.tableStyle01 th {
	color: #3cb4f0;
}

/* tableStyle02
---------------------------------------- */
.tableStyle02 input,
.tableStyle02 textarea {
	padding: 0.3em;
	line-height: 2em;
	box-sizing: border-box;
}

.tableStyle02 th {
	font-weight: 700;
}

.formText {
	margin-bottom: 2em;
}

#contactForm tr th .requiredIcon {
	position: relative;
}

#contactForm tr th .requiredIcon::after {
	position: absolute;
	content: "必須";
	display: inline-block;
	background-color: rgb(222, 5, 23);
	color: rgb(255, 255, 255);
	top: 50%;
	transform: translateY(-50%);
	right: -4.8rem;
	font-size: 0.8em;
	line-height: 1;
	padding: 0.6rem;
}

.contactType {
	padding: 0.5em;
	background-color: #fff;
	cursor: pointer;
}

.buttonWrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 2em;
	/* text-align: center; */
}

.buttonWrapper > * + * {
	margin-bottom: 2em;
}

a.formButton {
	font-weight: 700;
	padding: 1.5em 2em;
	background-color: #006ab8;
	color: #fff;
	max-width: 280px;
	width: 100%;
	display: inline-block;
	position: relative;
	transition: opacity 0.3s;
	text-align: center;
	text-decoration: none;
	order: -1;
}

a.formButton::before {
	content: "";
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	width: 7px;
	height: 7px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 1em;
	transform: rotate(45deg);
}

a.backButton {
	font-weight: 700;
	padding: 1.5em 2em;
	background-color: #757575;
	color: #fff;
	max-width: 280px;
	width: 100%;
	display: inline-block;
	position: relative;
	transition: opacity 0.3s;
	text-align: center;
	text-decoration: none;
}

a.backButton::before {
	content: "";
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	width: 7px;
	height: 7px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 1em;
	transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
	:is(a.formButton, a.backButton):hover {
		opacity: 0.7;
	}
}

#contactForm .error {
	display: block;
	color: #cc3300;
}

/*===============================================
●画面の横幅が729px以下(スマホ)
===============================================*/
@media screen and (max-width: 729px) {
	/* tableStyle01
	---------------------------------------- */
	.tableWrapper {
		/* padding: 0.85em; */
		/* border: #eee 5px solid; */
	}
	.tableStyle01 th,
	.tableStyle01 td,
	.tableStyle02 th,
	.tableStyle02 td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.tableStyle01 td,
	.tableStyle02 td {
		padding: 1em 0;
		margin-bottom: 1em;
		border-bottom: #aaa 1px dotted;
	}
	.tableStyle01 tr:last-child td,
	.tableStyle02 tr:last-child td {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none;
	}
	.tableStyle02 {
		margin-bottom: 1em;
	}
	.tableStyle02 th {
		font-weight: bold;
	}
	.tableStyle02 input,
	.tableStyle02 textarea {
		width: 100% !important;
	}
	.btnTable {
		width: 80%;
		margin: 0 auto;
	}
	.btnTable td {
		display: block;
		width: 100%;
		margin-bottom: 0.85em;
	}
}

/*===============================================
●画面の横幅が730px以上(PC・タブレット)
===============================================*/
@media screen and (min-width: 730px) {
	/* tableWrapper
	---------------------------------------- */
	.tableWrapper {
		/* padding: 1.5em; */
		/* border: #eee 10px solid; */
	}
	.buttonWrapper {
		flex-direction: row;
	}
	.buttonWrapper > * + * {
		margin-left: 2em;
		margin-bottom: 0;
	}
	a.formButton {
		order: initial;
	}
	:is(.tableStyle01 tr, .tableStyle02 tr):not(:last-child) {
		border-bottom: #aaa 1px dotted;
	}
	.tableStyle01 th,
	.tableStyle01 td,
	.tableStyle02 th,
	.tableStyle02 td {
		font-size: calc(16 / 14 * 1em);
		line-height: 1.5em;
		padding: 1em 0;
		vertical-align: top;
	}
	.tableStyle01 th {
		width: 8em;
		white-space: nowrap;
	}
	.tableStyle02 th {
		width: 19em;
		white-space: nowrap;
	}
	.tableStyle02 {
		margin-bottom: 1.5em;
	}
	.tableStyle02 th,
	.tableStyle02 td {
		vertical-align: middle;
	}
	.btnTable {
		width: 440px;
		margin: 2em auto 0;
	}
	.btnTable .btn02 {
		margin-right: 40px;
	}
}

/*===============================================
●画面の横幅が840px以上(PC)
===============================================*/
@media screen and (min-width: 840px) {
	/* tableWrapper
	---------------------------------------- */
	.tableWrapper {
		/* padding: 2.5em; */
		/* border: #eee 10px solid; */
	}
}