/* お問い合わせフォーム用style */

/* -----------------------------------------------------------
	form部品のリセット
----------------------------------------------------------- */
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form textarea{
	margin-right: 0;
	margin-left: 0;
	padding: 4px;
	border: 1px solid #ccc;
	border-radius: 0;
	outline: none;
	background: none;
	font-size: 15px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
textarea {
	width: 100%;
	height: 100px;
	overflow: auto;
}

/* button */
.contact_form input[type="submit"],
.contact_form input[type="reset"],
.contact_form input[type="button"],
.contact_form button {
	display: inline-block;
	margin: 0;
	padding: 10px 30px;
	border: 1px solid #999;
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	background: #efefef;
	color: #000;
	font-size: 16px;
	cursor: pointer;
}

/* ブラウザ対策
---------------------------------------------------------------------------- */
/* Firefox */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {}
/* IE */
input::-ms-clear {}
input::-ms-reveal {}
select::-ms-expand {
	display: none;
}
/* webkit */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {}
::-webkit-file-upload-button {}
/* iOS */
input[type="submit"]::-webkit-search-decoration,
input[type=reset]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-decoration {
	display: none;
}

/* 挙動
---------------------------------------------------------------------------- */
/* hover */
.contact_form input:hover,
.contact_form textarea:hover,
.contact_form select:hover {
	border-color: #ccc;
}

/* button */
.contact_form input[type="submit"]:hover,
.contact_form input[type="reset"]:hover,
.contact_form input[type="button"]:hover,
.contact_form button:hover {
	border-color: #3498db;
	background: #3498db;
	color: #fff;
}

/* focus */
.contact_form input:focus,
.contact_form textarea:focus {
	border-color: #ccc;
}
.contact_form input[type="submit"]:focus,
.contact_form input[type=reset]:focus,
.contact_form input[type="button"]:focus,
.contact_form input[type="search"]:focus {
	outline-offset: -2px;
}

/* disabled */
input:disabled,
input:disabled:hover,
textarea:disabled,
textarea:disabled:hover {
	border-color: #ccc;
	background: #eee;
	cursor: not-allowed;
}

/* バリデーション */
input:valid {}
input:invalid {}
input:required {}
/* placeholder */
input::-webkit-input-placeholder {}
input::-moz-placeholder {}
input:-ms-input-placeholder {}


/* -----------------------------------------------------------
	table
----------------------------------------------------------- */
.contact_form {
	box-sizing: border-box;
}
.contact_form th {
	background: initial;
	text-align: right;
	color: initial;
	border: 0;
	padding: 1.5em 2em;
	width: 25%;
}
.contact_form td {
	border: 0;
	padding: 1em 2em;
}
.hissu {
	color: #c00;
	margin-left: 0.25em;
}
@media screen and (max-width: 480px) {
	.contact_form th {
		width: 100%;
		text-align: left;
		padding-bottom: 0;
		padding-top: 0;
	}
	.contact_form tr:first-child th {
		padding-top: 2em;
	}
	.contact_form tr:last-child td {
		padding-bottom: 2em;
	}
	.contact_form td {
		width: 100%;
		padding-top: 0.5em;
	}

}

/* -----------------------------------------------------------
	input,selectbox,radio,checkbox
----------------------------------------------------------- */
.contact_form ::placeholder {
	opacity: 0.5;
}

.contact_form input[type=text],
.contact_form input[type=tel],
.contact_form input[type=email],
.contact_form textarea {
	padding: 0.75em;
	width: 100%;
}
.contact_form textarea {
	height: 10em;
}
@media screen and (max-width: 480px) {
	.contact_form textarea {
		height: 50svh;
	}
}

/* radio,checkbox */
.contact_form input[type=radio],
.contact_form input[type=checkbox] {
	position: absolute;
	white-space: nowrap;
	width: 1px;
	height: 1px;
	overflow: hidden;
	border: 0;
	padding: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%); 
	margin: -1px;
}

/* radio */
.contact_form label:has(input[type=radio]) {
	cursor: pointer;
	position: relative;
	padding-left: 30px;
	vertical-align: middle;
	margin-right: 1em;
	display: inline-block;
}
.contact_form label:has(input[type=radio])::before,
.contact_form label:has(input[type=radio])::after {
	content: "";
	display: block; 
	border-radius: 50%;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
}
.contact_form label:has(input[type=radio])::before {
	background-color: #fff;
	border: 1px solid #ccc;
	width: 20px;
	height: 20px;
	left: 5px;
}
.contact_form label:has(input[type=radio]:checked)::before {
	border-color: #3498db;
}
.contact_form label:has(input[type=radio])::after {
	background-color: #3498db;
	opacity: 0;
	width: 12px;
	height: 12px;
	left: 9px
}
.contact_form label:has(input[type=radio]:checked)::after { opacity: 1; }
@media screen and (max-width: 480px) {
	.contact_form label:has(input[type=radio]) {
		margin-bottom: 0.5em;
	}
}

/* chexkbox */
.contact_form input[type=checkbox] + label {
	cursor: pointer;
	position: relative;
	padding-left: 35px;
	vertical-align: middle;
}
.contact_form input[type=checkbox] + label::before,
.contact_form input[type=checkbox] + label::after {
	content: "";
	display: block; 
	position: absolute;
}
.contact_form input[type=checkbox] + label::before {
	background-color: #fff;
	border-radius: 0%;
	border: 1px solid #888;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	top: 50%;
	left: 5px;
}
.contact_form input[type=checkbox]:checked + label::before {
	border-color: #3498db;
}
.contact_form input[type=checkbox] + label::after {
	border-bottom: 2px solid #3498db;
	border-left: 2px solid #3498db;
	opacity: 0;
	height: 10px;
	width: 14px;
	transform: rotate(-45deg);
	top: calc(50% - 7px);
	left: 8px;
}
.contact_form input[type=checkbox]:checked + label::after { opacity: 1; }
.doui_check {
	margin-top: 2em;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.doui_check label {
	text-align: left;
}
.doui_check a {
	color: #3498db;
}
.doui_check a[target=_blank].no_icon_blank_link {
	padding: 0;
}
.doui_check a[href$=".pdf"].pdf_link {
	padding-right: 18px;
}
.doui_check a.no_icon_blank_link:after {
	width: 0;
	height: 0;
}
.doui_check a[href$=".pdf"].pdf_link:after {
	bottom: auto;
	top: calc(50% - 8px);
	right: 5px;
}

/* -----------------------------------------------------------
	btn(submit)
----------------------------------------------------------- */
.form_btn {
	text-align: center;
	margin-top: 4em;
	width: 100%;
}
.form_btn input[type=submit] {
	width: 100%;
	max-width: 400px;
	transition-duration: .5s;
	padding: 1em;
	box-sizing: border-box;
}

/* -----------------------------------------------------------
	message
----------------------------------------------------------- */
.contact_message {
	text-align: center;
	padding: 1em;
	background-color: #e7f6ff;
	margin-bottom: 2em;
}
.contact_message.error {
	background-color: #ffe3e3;
}
.contact_message p {
	font-size: 15px;
	text-align: center;
	margin-bottom: 0.5em;
}

a.link_return {
	display: inline-block;
	background-color: #3498db;
	color: #fff;
	padding: 0.5em 4em;
	border-radius: 2em;
}
#content_area a.link_return {
	text-decoration: none;
}
a.link_return:hover {
	opacity: 0.6;
	transition-duration: .5s;
}

.form_footer_coution {
	margin-top: 2em;
	text-align: center;
}
main .form_footer_coution p {
	display: inline-block;
	margin: 0 auto;
	font-size: 100%;
	background-color: #d0f265;
	padding: 1em 1.5em;
}