@charset "utf-8";

/* ------------------------------------------------------------ contact */
sup{ padding: 0 5px; font-size: 1rem; color: #FF0000; vertical-align: middle; }
.contact { margin: 0 auto; padding: 100px 0 0; }
.contact-title{ padding: 0 0 30px; font-size: 26px; font-family: 'Noto-Sans-JP-Medium'; text-align: center; color: var(--main-color); }

#contact .intro { text-align: center; line-height: 2; margin: 0 auto 10px;}
#contact .caution {	font-size: 14px; text-align: center; margin: 0 auto 40px; }
#contact .form{ padding: 50px 0 85px; background: #F7F3EF; }
#contact .form-area{ width: 940px; margin: 0 auto; padding: 70px 85px 90px; background: #fff; }

#contact table{ width: 100%; max-width: 980px; margin: 0 auto; border-collapse: separate; border-spacing: 0 28px; }
#contact table tr th{ width: 260px; text-align: left; vertical-align: middle; padding: 0; font-size: 17px; font-family: 'Noto-Sans-JP-Medium'; }
#contact table tr.top th{ vertical-align: top; padding: 0; }
#contact table tr td{ padding: 0; vertical-align: middle; }
#contact table tr td .input,
#contact table tr td .select{ width: 100%; height: 55px; padding: 15px; box-sizing: border-box; border: 1px solid #d8d8d8; background: #F8F8F8; font-size: 15px; font-family: 'Noto-Sans-JP-Medium';}
#contact table tr td .select-wrap{ position: relative; width: 80%; }
#contact table tr td .select-wrap:after{ position: absolute; content: ""; right: 40px; top: 50%; transform: rotate(45deg) translate(0,-50%); width: 10px; height: 10px; border-bottom: 2px solid #707070; border-right: 2px solid #707070; }

#contact table tr td input::placeholder,
#contact table tr td textarea::placeholder{ color: #b8b8b8; }
#contact table tr td textarea{ min-height: 180px; padding: 14px 18px; border: 1px solid #d8d8d8; font-size: 16px; line-height: 1.9;width: 100%; }
#contact table tr td p{ margin: 0 0 12px; }
#contact table tr td .short{ width: 140px; margin: 0 0 0 10px; height: 60px; }
#contact table tr td .long{ width: 100%; height: 60px; }

.btns{ display: flex; justify-content: center; gap: 2%; padding-top: 60px; }
.btns .submit_btn{ display: flex; align-items: center; justify-content: center; width: 315px; height: 65px; border: none; border-radius: 999px; background: #6E6E6E; color: #fff; font-size: 17px; font-family: 'Noto-Sans-JP-Medium'; cursor: pointer; }
.btns .submit_btn:hover{ filter: brightness(1.03); color: #fff; }
.btns .submit_btn:active{ transform: translateY(1px); }

.btns .submit{ background: var(--main-color); color: #fff; }


/* ------------------------------------------------------------ error */
#error { padding: 100px 0; }
/* #error h3 { font-size: 32px; text-align: center; margin: 0 0 40px; padding: 0 0 30px;} */
#error .caution { font-size: 16px; text-align: center; margin: 0 0 40px;}
#error .alert span { display: block; text-align: center; margin: 0 0 20px;}

/* ------------------------------------------------------------ confirm */
#confirm { padding: 100px 0; }
/* #confirm h3 { font-size: 32px; text-align: center; margin: 0 0 40px; padding: 0 0 30px;} */
#confirm .caution { font-size: 16px; text-align: center; margin: 0 0 40px;}
#confirm table { width: 100%; }
#confirm table tr {	border-bottom: solid 1px #e5e5e5;}
#confirm table tr:first-of-type { border-top: solid 1px #e5e5e5;}
#confirm table tr th { width: 250px; line-height: 1.5; font-weight: bold; text-align: left; padding: 20px 0;}
#confirm table tr td { line-height: 1.5; padding: 20px 0;}


/* ------------------------------------------------------------ thanks */
#thanks { margin: 50px 0 100px; }
#thanks h3 { font-size: 32px; text-align: center; margin: 0 0 40px; padding: 0 0 30px; border-bottom: solid 1px #d4b77a; }
#thanks .caution { font-size: 16px; text-align: center; line-height: 1.7; margin: 0 0 30px; }
#thanks small { display: block; font-size: 14px; text-align: center; line-height: 2; margin: 0 0 40px; }




/* ------------------------------------------------------------ mobile */

@media only screen and (max-width:768px) {
	
/* ------------------------------------------------------------ fv */
	.contact { padding: 20px 0 0; }
	.contact-title{ padding: 0 0 20px; font-size: 21px; }
	
	#contact .intro{ font-size: 14px; line-height: 1.9; margin-bottom: 8px; padding: 0 16px; }
	#contact .caution{ font-size: 12px; margin-bottom: 24px; padding: 0 16px; }
	#contact .form{ padding: 40px 0 50px; }
	#contact .form-area{ width: calc(100% - 32px); margin: 0 auto; padding: 25px 18px 30px; border-radius: 14px; }
	
	#contact table{ border-spacing: 0 18px; }
	#contact table tr th{ width: 100%; display: block; font-size: 14px; margin-bottom: 6px; }
	#contact table tr td{ display: block; }
	#contact table tr td .input,
	#contact table tr td .select{ height: 48px; padding: 10px 12px; font-size: 14px; }
	#contact table tr td .select-wrap{ width: 100%; }
	#contact table tr td .select-wrap:after{ right: 16px; width: 8px; height: 8px; }
	#contact table tr td textarea{ min-height: 140px; font-size: 14px; padding: 12px; }
	#contact table tr td .short{ width: 120px; height: 48px; margin-left: 8px; }
	#contact table tr td .long{ height: 48px; }
	
	.btns{ padding-top: 30px; }
	.btns .submit_btn{ width: 100%; max-width: 280px; height: 45px; font-size: 15px; }


/* ------------------------------------------------------------ error */
	#error{ padding: 20px 0 50px; }
/* 	#error h3 { font-size: 22px; margin: 0 0 25px; padding: 0 0 20px; } */
	#error .caution { font-size: 14px; line-height: 1.7; margin: 0 0 40px; }
	#error .alert span { font-size: 14px; margin: 0 0 20px; }

/* ------------------------------------------------------------ confirm */
	#confirm{ padding: 20px 0 50px; }
/* 	#confirm h3 { font-size: 22px; margin: 0 0 25px; padding: 0 0 20px; } */
	#confirm .caution { font-size: 14px; line-height: 1.7; margin: 0 0 40px; }
	#confirm table { display: block; width: 100%; }
	#confirm table tbody { display: block; }
	#confirm table tr { display: block; }
	#confirm table tr th { display: block; width: 100%; font-size: 14px; padding: 15px 0 5px; }
	#confirm table tr td { display: block; font-size: 14px; line-height: 1.5; padding: 0 0 15px; }

	
/* ------------------------------------------------------------ thanks */
	#thanks { margin: 30px 0 70px; }
	#thanks h3 { font-size: 22px; margin: 0 0 25px; padding: 0 0 20px; }
	#thanks .caution { font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
	#thanks small { font-size: 12px; line-height: 2; text-align: left; margin: 0 0 30px; }
	
	
}