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

	css/contact.css

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

/* ----------------------------------------------------------------------------------------------------
	contact
---------------------------------------------------------------------------------------------------- */
.contact {
	}
	.contact .inner {
		text-align:left;
		}
		.contact .inner p.explanation_text {
			margin:30px 0 0 0;
			}
			.contact .inner p.explanation_text a {
				color:#15116f;
				font-weight:bold;
				}
		.contact .inner form {
			display:block;
			margin:30px 0 0 0;
			}
			.contact .inner form table {
				width:100%;
				text-align:left;
				background:#e0e1f2;
				}
				.contact .inner form table tbody {
					}
					.contact .inner form table tbody tr {
						}
						.contact .inner form table tbody tr th,
						.contact .inner form table tbody tr td {
							text-align:left;
							border:2px solid #7e7cb8;
							padding:20px;
							}
						.contact .inner form table tbody tr th {
							width:25%;
							min-width:250px;
							vertical-align:top;
							white-space:nowrap;
							background:#e0e1f2;
							padding:27px 20px;
							}
						.contact .inner form table.confirmation tbody tr th {
							padding:20px !important;
							}
							.contact .inner form table tbody tr th span.icon_required {
								display:inline-block;
								color:#ffffff;
								font-size:12px;
								background:#de5253;
								margin:0 10px 0 0;
								padding:0.25em 1em;
								}
						.contact .inner form table tbody tr td {
							background:#ffffff;
							}
						.contact .inner form table tbody tr td.form_parts_nothing {
							padding:27px 20px !important;
							}
							.contact .inner form table tbody tr td div:nth-of-type(1) {
								margin:0 0 15px 0;
								}

/* 個人情報の保護について */
			.contact .inner form .concent {
				width:100%;
				text-align:center;
				background:#efefef;
				border-radius:5px;
				margin:30px auto 0 auto !important;
				padding:15px !important;
				}
				.contact .inner form .concent h3 {
					font-size:17px;
					margin:15px 0 !important;
					padding:0 !important;
					}
				.contact .inner form .concent p {
					}
					.contact .inner form .concent p a {
						color:#15116f;
						text-decoration:underline;
						font-weight:bold;
						}
					.contact .inner form .concent p a:hover {
						text-decoration:none;
						}
				.contact .inner form .concent label,
				.contact .inner form .concent label input {
					font-weight:bold;
					margin:15px 0 !important;
					cursor:pointer;
					}
			.contact .inner form .concent + .button button:disabled {
				background:#cccccc !important;
				border:;
				}
			.contact .inner form .concent + .button button:disabled::before {
				border:2px solid #ffffff;
				}

.button {
	margin-top:30px !important;
	}

@media screen and (max-width:1060px) {

			.contact .inner form table {
				display:block;
				border:2px solid #7e7cb8;
				}
				.contact .inner form table tbody {
					display:block;
					width:100%;
					}
					.contact .inner form table tbody tr {
						display:flex;
						flex-direction:column;
						width:100%;
						}
						.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:10px 20px;
							}
						.contact .inner form table tbody tr td {
							border-top:2px solid #7e7cb8;
							border-bottom:2px solid #7e7cb8;
							}
						.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;
							}

}


/* ----------------------------------------------------------------------------------------------------
	alert
---------------------------------------------------------------------------------------------------- */
.mailform_alert {
	width:100%;
	text-align:center;
	background:#e3fff2;
	border:solid 1px #bae4d1;
	margin:30px auto;
	padding:15px !important;
	}
.mailform_alert.error {
	color:#ff5353 !important;
	font-weight:bold;
	background:#ffffff;
	border:solid 2px #ff5353;
	}
	.mailform_alert.error p {
		color:#ff5353;
		}

.mailform_setup_alert {
	width:100%;
	text-align:center;
	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;
		margin:0;
		padding:0;
		}


/* ----------------------------------------------------------------------------------------------------
	send end
---------------------------------------------------------------------------------------------------- */
/* send_ok */
.send_ok {
	text-align:center;
	}
	.send_ok img {
		margin:20px auto !important;
		padding:0 !important;
		}
	.send_ok h3 {
		font-size:25px;
		}
	.send_ok p {
		margin:10px 0 0 0 !important;
		padding:0 !important;
		}
		.send_ok p strong {
			color:#ff6b6b;
			font-size:25px;
			}

/* mailsend_box */
.mailsend_box {
	width:100%;
	max-width:1000px;
	background:#f2f2f2;
	margin:50px auto 50px auto !important;
	padding:30px !important;
	}
	.mailsend_box p {
		margin:0 !important;
		padding:0 !important;
		}
	.mailsend_box h4 {
		display:block;
		color:#ff6b6b;
		font-size:20px;
		font-weight:bold;
		text-align:center;
		background: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;
			}

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


/* ----------------------------------------------------------------------------------------------------
	form parts
---------------------------------------------------------------------------------------------------- */
textarea { resize:vertical; margin:0 0 -7px 0; }
.width_zip01 	{ width:calc(3em + 10px); }
.width_zip02 	{ width:calc(4em + 10px); }
.width_ss 		{ width:10%; }
.width_s 		{ width:25%; }
.width_m 		{ width:50%; }
.width_l 		{ width:75%; }
.width_ll 		{ 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;
	}

/* 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:#14116e;
			border-color:#14116e;
			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:#14116e;
			border-color:#14116e;
			color:#ffffff;
			}

/* 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;
	}
*/


@media screen and (max-width:1060px) {

.width_ss 		{ width:30%; }
.width_s 		{ width:40%; }
.width_m 		{ width:60%; }
.width_l 		{ width:75%; }
.width_ll 		{ width:100%; }

}

@media screen and (max-width:640px) {

.width_ss 		{ width:60%; }
.width_s 		{ width:60%; }
.width_m 		{ width:100%; }
.width_l 		{ width:100%; }
.width_ll 		{ width:100%; }

}