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

	css/contact.css

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

/* ----------------------------------------------------------------------------------------------------
	layout
---------------------------------------------------------------------------------------------------- */
#mailform {
    border-top:5px solid #e0d7c4;
    }
    #mailform .inner.small {
        max-width:800px !important;
        margin:50px auto 100px auto !important;
        }
        #mailform .inner form {
            width:100%;
            }
            #mailform .inner form table {
                width:100%;
                margin:20px 0 0 0;
                }
                #mailform .inner form tbody {
                    }
                    #mailform .inner form tbody tr {
                        }
                        #mailform .inner form tbody tr th,
                        #mailform .inner form tbody tr td {
                            padding:15px 0;
                            }
                        #mailform .inner form tbody tr th {
                            width:32.5%;
                            padding:0 20px 0 0;
                            }

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

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

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

@media screen and (max-width:640px) {
.auto_jump {
	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_35p 		{ width:35%; }
.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_35p 		{ width:35%; }
.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_35p 		{ width:50%; }
.width_50p 		{ width:100%; }
.width_75p 		{ width:100%; }
.width_max 		{ width:100%; }
}

/* text系 */
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
	background:#ffffff;
	border:1px solid #cccccc;
	border-radius:3px;
	padding:calc(5px + (17px - clamp(15px,2.34375vw,17px))) 10px;
	}
select {
	background:#ffffff;
	border:1px solid #cccccc;
	border-radius:3px;
	padding:calc(clamp(12px,1.875vw,13px) + (17px - clamp(15px,2.34375vw,17px))) 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; }

@media screen and (max-width:640px) {
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
	padding:calc((5px + (17px - clamp(15px,2.34375vw,17px))) + (15px - clamp(12px,3.75vw,15px))) 10px;
	}
select {
	padding:calc((clamp(10px,3.125vw,12px) + (17px - clamp(15px,2.34375vw,17px))) + (15px - clamp(12px,3.75vw,15px))) 10px;
    }
}

/* radio系 */
ul.radio_group {
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	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 7px 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:#757166;
			border-color:#757166;
			box-shadow:inset 0 0 0 0.25em #ffffff;
			}

/* checkbox系 */
ul.checkbox_group {
	display:flex;
	flex-wrap:wrap;
	gap:5px 10px;
	padding:3px 0;
	list-style:none;
	}
	ul.checkbox_group li {
		}
		ul.checkbox_group li label {
			margin: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 7px 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:#757166;
			border-color:#757166;
			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;
	}
*/