@charset "utf-8";
/* ===================================================
	Inquiry CSS
====================================================== */
/* ---------------------------------------------------
	Main title
------------------------------------------------------ */
.box_maintit{ background-image: url("../../img/inquiry/main_img.jpg");}
.box_maintit .tit{ width: 500px; height: 144px;}

@media screen and (max-width: 600px) {
.box_maintit .tit{ width: 300px; height: 86px; top: 74px; bottom: inherit;}
}


/* ---------------------------------------------------
	Section lead
------------------------------------------------------ */
#sec_lead{ padding: 40px 0 0; text-align: center;}
#sec_lead h2{ font-size: 26px; line-height: 1.8; color: #286c35; padding: 0 0 30px;}
#sec_lead p{ font-size: 15px; line-height: 2;}
#sec_lead .flow{ width: 1100px; margin: 90px auto 60px; display: flex; justify-content: center; border-top: solid 1px #c4c4c4;}
#sec_lead .flow li{ position: relative; padding: 16px 70px 0; font-size: 15px; line-height: 1; letter-spacing: 0.07em; width: 5em; text-align: center;}
#sec_lead .flow li::before{ content: ""; border: solid 1px #c4c4c4; background: #fff; border-radius: 16px; width: 16px; height: 16px; position: absolute; top: -10px; left: 50%; margin: 0 0 0 -8px;}
#sec_lead .flow li.current{ font-weight: bold;}
#sec_lead .flow li.current::before{ background: #286c35; border: solid 1px #286c35;}

@media screen and (max-width: 600px) {
#sec_lead{ padding: 40px 4% 0; text-align: left;}
#sec_lead h2{ font-size: 20px; line-height: 1.5; padding: 0 0 10px;}
#sec_lead p{ font-size: 14px; line-height: 1.7; padding: 0; text-align: left;}
#sec_lead .flow{ width: 100%; margin: 30px 0 40px;}
#sec_lead .flow li{ padding: 16px 10px 0; font-size: 13px;}
}


/* ---------------------------------------------------
	Form area
------------------------------------------------------ */
#form_area{ width: 1100px; margin: 0 auto 100px;}
#form_area a{ color: #286c35; text-decoration: underline;}
#form_area a:hover{ color: #286c35; text-decoration: none;}
#form_area .note{ padding: 0 0 15px 0;}
#form_area .must,
#form_area .free{ font-size: 12px; line-height: 1; padding: 3px 8px; margin: 0 5px 0 0; display: inline-block;}
#form_area .must{ background-color: #bc1118; color: #fff;}
#form_area dl{ width: 100%; display: table; border-bottom: solid 1px #c4c4c4;}
#form_area dl:first-of-type{ border-top: solid 1px #c4c4c4;}
#form_area dt,
#form_area dd{ display: table-cell; font-size: 15px; line-height: 1.8; box-sizing: border-box; vertical-align: middle;}
#form_area dt{ width: 30%; padding: 25px 40px 25px 0; text-align: right; position: relative; background: #e4f2e1;}
#form_area dt .must,
#form_area dt .free{ display: block; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto 0; height: 1em;}
#form_area dt .free{ background-color: #ccc;}
#form_area dd{ width: 70%; padding: 25px 0 25px 25px;}
#form_area dd .box_check .wpcf7-list-item{ margin: 0; display: block;}
#form_area dd input[type="text"],
#form_area dd input[type="email"],
#form_area dd input[type="tel"]{ width: 60%; padding: 10px; border: solid 1px #a8a7a7; border-radius: 0; outline: none; background: #fff; }
#form_area dd .zip input[type="text"]{ width: 15%; }
#form_area dd textarea { width: 90%; appearance: none; resize: vertical; padding: 10px; border: solid 1px #a8a7a7; outline: none; background: #fff; }
#form_area dd .tit{ padding: 20px 0 0;}
#form_area dd select{ width: 20%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:0; border: solid 1px #a8a7a7; padding:10px 30px 10px 10px; background:url("../../img/inquiry/ico_select1.png") no-repeat right 5px center; background-size:20px; }
#form_area dd select::-ms-expand { display: none;}
#form_area dd input[type="checkbox"]{ padding: 0; vertical-align: text-top; margin: 5px 5px 0 0;}
#form_area .agree .wpcf7-list-item{ margin: 0 !important;}
#form_area .wpcf7-response-output{ text-align: center; padding: 15px 0; margin: 0 0 20px;}
#form_area .box_btns{ display: block; align-items: center; margin: 20px 0 0; }

#form_area .box_btns .btn1{ display: block; width: 300px; margin: 0 auto; position: relative; text-align: center;}
#form_area .box_btns .btn1 input[type="submit"]{ width: 100%; font-size: 18px; color: #fff; text-align: center; padding: 20px 0; border-radius: 40px; background: #529b44; margin: 25px auto 0; position: relative; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; outline:none; z-index: 1; transition: all 0.5s ease-out;}
#form_area .box_btns .btn1::before,
#form_area .box_btns .btn1::after{ content: ""; display: block; background: #fff; width: 20px; height: 1px; position: absolute; top: 58px; right: 10px; z-index: 2;}
#form_area .box_btns .btn1::after{ transform: rotate(45deg); transform-origin: right bottom; width: 10px;}
#form_area .box_btns .btn1 input[type="submit"]:hover{ color: #fff; text-decoration: none; background-color:#6DB85E;}



.wpcf7 .ajax-loader{ margin: 15px auto 0 !important;}

@media screen and (max-width: 600px) {
#form_area{ width: 92%; margin: 0 auto 50px;}
#form_area .note{ padding: 0 0 10px 0;}
#form_area dl{ width: 100%; display: block;}
#form_area dt,
#form_area dd{ display: block; font-size: 14px; line-height: 1.7;}
#form_area dt{ width: 100%; padding: 10px 0 10px 60px; text-align: left;}
#form_area dt .must,
#form_area dt .free{ left: 10px;}
#form_area dd{ width: 100%; padding: 10px;}
#form_area dd input[type="text"],
#form_area dd input[type="email"],
#form_area dd input[type="tel"]{ width: 90%; padding: 10px; }
#form_area dd .zip input[type="text"]{ width: 70px; }
#form_area dd textarea { width: 90%; padding: 10px; }
#form_area dd .tit{ padding: 10px 0 0;}
#form_area dd select{ width: 100px;}
#form_area .box_agree p{ padding: 0 0 10px;}
#form_area .wpcf7-response-output{ padding: 10px; margin: 0 0 20px;}
#form_area .box_btns .btn1{ width: 92%;}
}