@charset "utf-8";
/* ====================================================================================================

	css/contact.css

==================================================================================================== */

/* ----------------------------------------------------------------------------------------------------
	contact
---------------------------------------------------------------------------------------------------- */
#contact {
	}
	#contact .inner {
		text-align:left;
		}
		#contact .inner > p {
			text-align:left;
			}
		#contact .inner form {
			display:block;
			margin:50px 0 0 0;
			}
			#contact .inner form table {
				width:100%;
				text-align:left;
				}
				#contact .inner form table tbody {
					}
					#contact .inner form table tbody tr {
						border-top:1px solid #e5e5e5;
						}
					#contact .inner form table tbody tr:nth-of-type(1) {
						border:none;
						}
						#contact .inner form table tbody tr th,
						#contact .inner form table tbody tr td {
							vertical-align:top;
							letter-spacing:1px;
							padding:16px 0;
							}
						#contact .inner form table tbody tr th {
							width:23%;
							color:#0067c6;
							font-weight:700;
							padding:26px 0;
							}
						#contact .inner form table.confirmation tbody tr th,
						#contact .inner form table.confirmation tbody tr td {
							padding:26px 0 !important;
							}
							#contact .inner form table tbody tr th span.icon_required {
								float:right;
								color:#ffffff;
								font-size:12px;
								background:#de5253;
								margin:1px 20px 0 0;
								padding:0.25em 1em 0.3em 1em;
								}
						#contact .inner form table tbody tr td {
							background:#ffffff;
							}
							#contact .inner form table tbody tr td div:nth-of-type(1) {
								margin:0 0 15px 0;
								}

@media screen and (max-width:1040px) {
		#contact .inner > p {
			text-align:left;
			}
			#contact .inner form table {
				display:block;
				}
				#contact .inner form table tbody {
					display:block;
					width:100%;
					}
					#contact .inner form table tbody tr {
						display:flex;
						flex-direction:column;
						width:100%;
						border-top:2px solid #e5e5e5;
						}
						#contact .inner form table tbody tr th,
						#contact .inner form table tbody tr td {
							display:block;
							width:100%;
							border:none;
							}
						#contact .inner form table tbody tr th {
							padding:20px 0 20px 0;
							}
							#contact .inner form table tbody tr th span.icon_required {
								float:none;
								margin:0 0 0 20px;
								}
						#contact .inner form table tbody tr td {
							padding:0 0 25px 0;
							}
						#contact .inner form table.confirmation tbody tr th {
							padding:17px 0 5px 0 !important;
							}
						#contact .inner form table.confirmation tbody tr td {
							padding:0 0 17px 0 !important;
							}
						#contact .inner form table tbody tr:nth-of-type(1) th {
							border-top:none;
							}
						#contact .inner form table tbody tr:nth-last-of-type(1) td {
							border-bottom:none;
							}
}

@media screen and (max-width:640px) {
			#contact .inner > p a {
				color:#0066b0;
				text-decoration:underline;
				}
			#contact .inner > p a:hover {
				text-decoration:none;
				}
}

/* お申込み規約 */
.concent {
	width:100%;
	text-align:center;
	background:#efefef;
	border-radius:5px;
	margin:30px auto 50px auto !important;
	padding:15px !important;
	}
	.concent h3 {
		margin:15px 0 !important;
		padding:0 !important;
		}
	.concent ul {
		list-style:none;
		margin:0 !important;
		padding:0 !important;
		}
		.concent ul li {
			text-indent:-1em;
			margin:0 0 5px 0 !important;
   			padding:0 0 0 1em !important;
			}
		.concent ul li:before {
			content:"・";
			display:inline-block;
			width:1em;
			text-indent:0;
			margin:0 !important;
   			padding:0 !important;
			}
	.concent label,
	.concent label input {
		cursor:pointer;
		margin:15px 0 !important;
		}

/* お申込み規約 */
.back_link {
	text-align:center;
	margin:50px 0 0 0 !important;
	padding:0 !important;
	}


/* ----------------------------------------------------------------------------------------------------
	alert
---------------------------------------------------------------------------------------------------- */
.mailform_alert {
	width:100%;
	text-align:center !important;
	background:#e3fff2;
	border:solid 1px #bae4d1;
	margin:30px auto;
	padding:15px !important;
	}

@media screen and (max-width:1040px) {
.mailform_alert {
	text-align:center !important;
	}
}

@media screen and (max-width:640px) {
.mailform_alert {
	text-align:left !important;
	}
}

.mailform_alert.error {
	color:#ff5353 !important;
	font-weight:bold;
	background:#ffffff;
	border:solid 2px #ff5353;
	}
	.mailform_alert.error p {
		color:#ff5353;
		text-align:center;
		}

@media screen and (max-width:1040px) {
	.mailform_alert.error p {
		text-align:center !important;
		}
}

@media screen and (max-width:640px) {
	.mailform_alert.error p {
		text-align:left !important;
		}
}

.mailform_setup_alert {
	width:100%;
	background:#ffffff;
	border:solid 1px #ff5353;
	margin:30px auto;
	padding:15px !important;
	}
	.mailform_setup_alert strong {
		display:block;
		font-size:20px;
		text-align:center;
		margin:0 0 10px 0;
		}
	.mailform_setup_alert p {
		color:#ff5353;
		text-align:center !important;
		white-space:pre-wrap;
		word-break:keep-all;
		margin:0;
		padding:0;
		}

@media screen and (max-width:1040px) {
	.mailform_setup_alert p {
		text-align:center !important;
		}
}

@media screen and (max-width:640px) {
	.mailform_setup_alert p {
		text-align:left !important;
		}
}


/* ----------------------------------------------------------------------------------------------------
	send end
---------------------------------------------------------------------------------------------------- */
/* send_ok */
.send_ok {
	width:100%;
	max-width:600px;
	text-align:center;
	margin:0 auto;
	}
	.send_ok img {
		margin:20px auto !important;
		padding:0 !important;
		}
	.send_ok h3 {
		color:#ff6b6b;
		font-size:clamp(20px,3.125vw,25px);
		text-align:center;
		}
	.send_ok p {
		text-align:left;
		margin:10px 0 0 0 !important;
		padding:0 !important;
		}
		.send_ok p {
			}

@media screen and (max-width:640px) {
	.send_ok p:nth-of-type(2) {
		text-align:left !important;
		}
		.send_ok p strong {
			font-size:clamp(20px,6.25vw,25px);
			}
}

/* mailsend_box */
.mailsend_box {
	width:100%;
	max-width:600px;
	background:#f5f7f6;
	margin:50px auto 50px auto !important;
	padding:30px !important;
	}
	.mailsend_box p {
		margin:0 !important;
		padding:0 !important;
		}
	.mailsend_box p:nth-of-type(2) {
		margin:10px 0 0 0 !important;
		padding:0 !important;
		}
	.mailsend_box h4 {
		display:block;
		color:#ff6b6b;
		font-size:20px;
		font-weight:bold;
		text-align:center;
		white-space:pre-wrap;
		word-break:keep-all;
		background:transparent url("../image/contents/contact/icon_mailplus.png") center top no-repeat;
		margin:0 0 15px 0 !important;
		padding:45px 0 0 0 !important;
		}
		.mailsend_box p strong {
			color:#ff6b6b;
			}

@media screen and (max-width:640px) {
.mailsend_box {
	padding:20px !important;
	}
}

/* jump_page_auto */
.jump_page_auto {
	width:100%;
	max-width:600px;
	text-align:left;
	margin:0 auto 50px auto !important;
	padding:0 !important;
	}

@media screen and (max-width:1040px) {
.jump_page_auto {
	text-align:left !important;
	}
}

@media screen and (max-width:640px) {
.jump_page_auto {
	text-align:left !important;
	}
}


/* ----------------------------------------------------------------------------------------------------
	form parts
---------------------------------------------------------------------------------------------------- */
.width_zip01 	{ width:calc(3em + 10px); }
.width_zip02 	{ width:calc(4em + 10px); }
.width_10p 		{ width:10%; }
.width_25p 		{ width:25%; }
.width_50p 		{ width:50%; }
.width_75p 		{ width:75%; }
.width_max 		{ width:100%; }

@media screen and (max-width:1040px) {
.width_10p 		{ width:30%; }
.width_25p 		{ width:40%; }
.width_50p 		{ width:60%; }
.width_75p 		{ width:75%; }
.width_max 		{ width:100%; }
}

@media screen and (max-width:640px) {
.width_10p 		{ width:60%; }
.width_25p 		{ width:60%; }
.width_50p 		{ width:100%; }
.width_75p 		{ width:100%; }
.width_max 		{ width:100%; }
}

/* text系 */
input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
	background:#ffffff;
	border:1px solid #cccccc;
	border-radius:3px;
	padding:10px;
	}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	border-color:#b9b9b9;
	}
textarea { resize:vertical; margin:0 0 -7px 0; }

/* radio系 */
ul.radio_group {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	padding:4px 0;
	list-style:none;
	}
	ul.radio_group li {
		}
		ul.radio_group li label {
			margin:0 1.5em 0 0;
			}
		ul.radio_group li input[type="radio"] {
			position:absolute;
			opacity:0;
			z-index:-1; 
			}
		ul.radio_group li input[type="radio"]+label {
			display:block;
			font-family:inherit;
			margin-top:0.25em;
			margin-bottom:0.25em;
			cursor:pointer;
			}
		ul.radio_group li input[type="radio"]+label:before {
			content:"";
			display:inline-block;
			width:1.25em;
			height:1.25em;
			vertical-align:middle;
			background:#ffffff;
			border:2px solid #c8c8c8;
			border-radius:1.25em;
			margin:-5px 5px 0 0;
			-webkit-transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
			-o-transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
			transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
			}
		ul.radio_group li input[type="radio"]:hover+label:before {
			background-color:#c8c8c8;
			border-color:#c8c8c8;
			box-shadow:inset 0 0 0 0.25em #ffffff;
			}
		ul.radio_group li input[type="radio"]:checked+label:before {
			background-color:#0066b0;
			border-color:#0066b0;
			box-shadow:inset 0 0 0 0.25em #ffffff;
			}

/* checkbox系 */
ul.checkbox_group {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	padding:3px 0;
	list-style:none;
	}
	ul.checkbox_group li {
		}
		ul.checkbox_group li label {
			margin:0 1.5em 0 0;
			}
		ul.checkbox_group li input[type="checkbox"] {
			display:none;
			margin-top:-0.25em;
			}
		ul.checkbox_group li input[type="checkbox"]+label {
			display:inline-block;
			font-family:inherit;
			margin-top:0.25em;
			margin-bottom:0.25em;
			cursor:pointer;
			}
		ul.checkbox_group li input[type="checkbox"]+label:before {
			content:"";
			display:inline-block;
			width:1.25em;
			height:1.25em;
			color:transparent;
			font-size:1em;
			line-height:1.2em;
			text-align:center;
			vertical-align:middle;
			background:#ffffff;
			border:2px solid #c8c8c8;
			border-radius:3px;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			margin:-2px 5px 0 0;
			padding:0;
			-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s, background-color ease-in-out .15s;
			-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s, background-color ease-in-out .15s;
			transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s, background-color ease-in-out .15s;
			}
		ul.checkbox_group li input[type="checkbox"]:hover+label:before {
			color:#ffffff;
			background:#c8c8c8;
			}
		ul.checkbox_group li input[type="checkbox"]:checked+label:before {
			content:"✔";
			background:#0066b0;
			border-color:#0066b0;
			color:#ffffff;
			}

/* sendfile */
ul.sendfile_group {
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
	}
	ul.sendfile_group li {
		margin:20px 0 0 0;
		}
	ul.sendfile_group li:first-child {
		margin:0 !important;
		}

.sendfile_button {
	display:block;
	width:320px;
	box-sizing:border-box;
	border:solid 1px #cccccc;
	border-radius:5px;
	margin:20px 0 0 0 !important;
	padding:10px 10px 11px 60px !important;
	}
.sendfile_button:nth-of-type(1) { margin:0 !important; }
.sendfile_button.icon_img { background:transparent url("../image/contents/contact/icon_img.png") 20px center no-repeat; background-size:20px; }
.sendfile_button.icon_pdf { background:transparent url("../image/contents/contact/icon_pdf.png") 20px center no-repeat; background-size:20px; }
.sendfile_button.icon_doc { background:transparent url("../image/contents/contact/icon_doc.png") 20px center no-repeat; background-size:20px; }
.sendfile_button.icon_xls { background:transparent url("../image/contents/contact/icon_xls.png") 20px center no-repeat; background-size:20px; }
.sendfile_button.icon_ppt { background:transparent url("../image/contents/contact/icon_ppt.png") 20px center no-repeat; background-size:20px; }
	.sendfile_button span {
		font-size:11px;
		}

@media screen and (max-width:1040px) {
ul.sendfile_group {
	margin:0;
	}
.sendfile_button:nth-of-type(1) { margin:10px 0 0 0 !important; }
}

@media screen and (max-width:640px) {
.sendfile_button {
	width:100%;
	}
}

/* error系 */
/*
input[type="text"]:user-valid,
input[type="tel"]:user-valid,
input[type="email"]:user-valid,
input[type="radio"]:user-valid,
select:user-valid,
textarea:user-valid {
	background-color:#ffffff;
	}
input[type="text"]:user-invalid,
input[type="tel"]:user-invalid,
input[type="email"]:user-invalid,
input[type="radio"]:user-invalid,
select:user-invalid,
textarea:user-invalid {
	background-color:#f7d5d5;
	border-color:#de5253;
	}
*/