@charset "UTF-8";

/*-------------------------
__contact_style
-------------------------*/

input{ margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}

.form_base .form_title{ display: flex; align-items: center; margin-bottom: 20px;}
.form_base .form_title h2{ font-size: 2.5em; line-height: 1.8; font-weight: 700;  margin:0 20px 0 0;}
.form_base .form_title h2 > span{ display: block; padding-left: 40px; box-sizing: border-box; position: relative;}
.form_base .form_title h2 > span:before{ content: ''; display: block; width: 30px; height: 30px; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.form_base #id_personal .form_title h2 > span:before{background-image: url(/contact/images/flower01.png);}
.form_base #id_propertydata .form_title h2 > span:before{background-image: url(/contact/images/flower02.png);}
.form_base .form_title .surely{ font-size: 1.5em; line-height: 1.5;}
#id_propertydata{ margin-bottom: 50px;}

.form_base label { display:inline-block; cursor: pointer}
.form_base table,
.form_base dl dd{ font-size: 1.5em; line-height: 1.4; border-spacing: 0 10px;}
.form_base table th,
.form_base table td {}
.form_base table th { text-align: center; background-color: #FFE6D9; width: 290px; box-sizing: border-box; font-weight: 700; border-radius: 20px;}
.form_base table td{ padding: 10px 15px; box-sizing: border-box;}
.surely .required,
.form_base table th .required { font-size: 0.8em; padding: 5px; box-sizing: border-box; border-radius: 5px; color: #fff; background-color: #b45c4c; margin-left: 5px; white-space:nowrap;}
.form_base dl dt{ background-color: #74011a; font-size: 2em; font-weight: 700; color: #fff; padding: 20px 30px; box-sizing: border-box; border-radius: 50vh; margin-bottom: 30px;}

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

.form_base .form_title{ margin-bottom: 15px;}
.form_base .form_title h2{ font-size: 2.1em; margin:0 15px 0 0;}
.form_base .form_title h2 > span{ padding-left: 30px;}
.form_base .form_title h2 > span:before{ width: 25px; height: 25px;}
.form_base .form_title .surely{ font-size: 1.4em;}
#id_propertydata{ margin-bottom: 40px;}

.form_base table,
.form_base dl dd{ font-size: 1.4em; line-height: 1.4;}    
.form_base table th { width: 180px;} 

}

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

.form_base .form_title{ display: block; margin-bottom: 10px;}
.form_base .form_title h2{ font-size: 1.9em; margin:0 0 10px 0;}
.form_base .form_title .surely{ font-size: 1.3em;}
#id_propertydata{ margin-bottom: 10px;}
.form_base table{ width: 100%;}
.form_base table th,
.form_base table td{ display: block; width: 100%; border-bottom: none; text-align: left;}
.form_base table th{ padding: 8px 15px;}
.form_base table td{ padding: 10px 10px 10px;}

}

.form_base input[type="text"],
.form_base input[type="password"],
.form_base textarea {
	-webkit-appearance: none;
	appearance: none;
	font-size: 16px;
	line-height: 1.4;
	/*width: 60%;*/
	margin: 4px 0;
	padding: 10px;
	border: 1px solid #999;
    background-color: #fff;
	box-sizing: border-box;
}
.form_base input[type="text"]:hover,
.form_base input[type="password"]:hover,
.form_base textarea:hover{
	border: 1px solid #666;
}
.form_base input[type="text"]:focus,
.form_base input[type="password"]:focus,
.form_base textarea:focus{
	background-color: #ffc;
	border: 1px solid #333;
}
.form_base input.text_name,
.form_base input.text_zip {
	width: 120px;
}
.form_base textarea {
	height: 8em;
	width: 100%;
}
.form_base select {
	font-size:14px;
}

/* 添付ファイル */
.form_base .in_file_wrap {
	position: relative;
}
.form_base .in_file {
	vertical-align: middle;
	display: inline-block;
	padding: 0 0 5px;
}
.form_base .in_file input {
	display: none;
}
.form_base .in_file input + span {
	vertical-align: middle;
	display: inline-block;
}
.form_base .in_file input + span span {
	vertical-align: middle;
	display: inline-block;
	transition: .3s;
}
.form_base .in_file input + span::before {
	content:"ファイルを選択";
	vertical-align: middle;
	display: inline-block;
	background: #EEE;
	border:1px solid #AAA;
	margin: 0 10px 0 0;
	padding: 4px 9px 2px 9px;
	border-radius: 3px;
	font-size:1em;
	line-height: 1;
	transition: .3s;
}
.form_base .in_file:hover input + span span {
	text-decoration: underline;
}
.form_base .in_file:hover input + span::before {
	color:#000;
	background: #DDD;
	border-color:#000;
}
.form_base .in_file_clear {
	position: absolute;
	top: 0;
	right: 0;
	appearance: none;
	vertical-align: middle;
	display: inline-block;
	background: #EEE;
	border: 1px solid #AAA;
	padding: 3px 9px;
	border-radius: 3px;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	transition: 0.3s;
}
.form_base .in_file_clear:hover {
	color:#000;
	background: #DDD;
	border-color:#000;
}
.form_base .in_file.ip_off input + span span{color:#666;}
.form_base .in_file.ip_off input + span span::after {
	content:"選択されていません";
}
.form_base .in_file.ip_off ~ .in_file_clear {
	display: none;
}

.form_base input[type="submit"],
.form_base input[type="button"] {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	border-radius: 0;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-transition: .3s;
	-ms-transition: .3s;
	transition: .3s;
}
.form_base input[type="submit"] {
	font-size: 15px;
	font-weight: bold;
	color:#fff;
	background-color: #666;
	border-radius: 6px;
}
.form_base input[type="button"] {
	font-size: 0.8em;
	font-weight: bold;
	color:#333;
	background-color: #ccc;
	margin: 0 0 0 5px;
	padding: 6px 10px;
	border: 1px solid #ccc;
}

@media screen and (min-width: 768px) {
	.form_base input[type="submit"]:hover {
		background-color: #21afef;
	}
	.form_base input[type="button"]:hover {
		background-color: #bbb;
		border: 1px solid #bbb;
	}
}

/*=改行・制限=*/
.form_base .nowrap{	
	white-space: nowrap;
}
/*=入力モード切替 ※IEのみ有効=*/
.form_base .ime_ac {ime-mode: active;}
.form_base .ime_dis {ime-mode: disabled;}

/*=左右寄せ= */
.form_base .align_l {text-align:left!important;}
.form_base .align_r {text-align:right!important;}
.form_base .align_c {text-align:center!important;}
/*上下位置*/
.form_base .align_t {vertical-align: top;}
.form_base .align_b {vertical-align: bottom;}

.form_base input[type="text"],
.form_base textarea {box-sizing:border-box;}
.form_base .min_w2em {min-width:2em;}
.form_base .min_w3em {min-width:3em;}
.form_base .min_w4em {min-width:4em;}
.form_base .min_w5em {min-width:5em;}
.form_base .min_w6em {min-width:6em;}
.form_base .min_w7em {min-width:7em;}
.form_base .min_w8em {min-width:8em;}
.form_base .min_w9em {min-width:9em;}
.form_base .min_w10em {min-width:10em;}

/* 字数幅 */
.form_base .w2em {width:2em;}
.form_base .w3em {width:3em;}
.form_base .w4em {width:4em;}
.form_base .w5em {width:5em;}
.form_base .w6em {width:6em;}
.form_base .w7em {width:7em;}
.form_base .w8em {width:8em;}
.form_base .w9em {width:9em;}
.form_base .w10em {width:10em;}
.form_base .w11em {width:11em;}
.form_base .w12em {width:12em;}
.form_base .w13em {width:13em;}
.form_base .w14em {width:14em;}
.form_base .w15em {width:15em;}
.form_base .w20em {width:20em;}
.form_base .w21em {width:21em;}
.form_base .w22em {width:22em;}
.form_base .w23em {width:23em;}
.form_base .w24em {width:24em;}
.form_base .w25em {width:25em;}
.form_base .w26em {width:26em;}
.form_base .w27em {width:27em;}
.form_base .w28em {width:28em;}
.form_base .w29em {width:29em;}
.form_base .w30em {width:30em;}

/* 0.5文字ずつ */
.form_base .w1_5em {width:1.5em;}
.form_base .w2_5em {width:2.5em;}
.form_base .w3_5em {width:3.5em;}
.form_base .w4_5em {width:4.5em;}
.form_base .w5_5em {width:5.5em;}
.form_base .w6_5em {width:6.5em;}
.form_base .w7_5em {width:7.5em;}
.form_base .w8_5em {width:8.5em;}
.form_base .w9_5em {width:9.5em;}

/* % */
.form_base .w20per {width:20%;}
.form_base .w25per {width:25%;}
.form_base .w30per {width:30%;}
.form_base .w40per {width:40%;}
.form_base .w50per {width:50%;}
.form_base .w60per {width:60%;}
.form_base .w70per {width:70%;}
.form_base .w80per {width:80%;}
.form_base .w90per {width:90%;}
.form_base .w100per {width:100%;}



/* ページ上部への表示の場合（ファイル容量） */
.form_base form > .err{
	line-height: 1.5;
	padding: 15px;
	border: 1px solid #F00;
	margin: 0 0 30px;
	background: #FFE4E4;
	border-radius: 5px;
}


span.input_example{ display: inline-block; font-size: 0.8em;}
/* ラジオボタン */
#content .form_base label.radio{display:inline-block;margin:0 10px 10px 0;position:relative;}
#content .form_base label.radio input{display:none;}
#content .form_base label.radio span{display:inline-block;padding:10px 15px 10px 45px;border-radius:8px;border:1px solid #DDD;cursor:pointer;transition:0.3s;background-color: #fff;}
#content .form_base label.radio span sup{display:inline-block;vertical-align:top;}
#content .form_base label.radio input + span::before{content:"";display:block;width:20px;height:20px;border-radius:40px;box-sizing:border-box;border:1px solid #AAA;position:absolute;top:12px;left:15px; background-color: #fff;}
#content .form_base label.radio input + span::after{transition:0.1s;opacity:0;content:"";display:block;width:10px;height:10px;border-radius:40px;position:absolute;top:17px;left:20px;background-color:#db8c79;}
#content .form_base label.radio input:checked + span{background-color:#f2d5ce;}
#content .form_base label.radio input:checked + span::after{opacity:1;}
/* チェックボックス */
#content .form_base .ck_list{display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}
#content .form_base .ck_list label.ck{margin-right:10px;}
label.ck{display:inline-block;vertical-align:middle;margin:0 10px 10px 0;position:relative;}
label.ck input{display:none;}
label.ck span{display:inline-block;vertical-align:middle;padding:10px 15px 10px 45px;border-radius:8px;border:1px solid #DDD;cursor:pointer;transition:0.3s;background-color: #fff;}
label.ck span sup{display:inline-block;vertical-align:top;}
label.ck input + span::before{content:"";display:inline-block;width:20px;height:20px;border-radius:5px;box-sizing:border-box;background-color:#FFF;border:1px solid #AAA;position:absolute;top:12px;left:15px;}
label.ck input + span::after{transition:0.1s;opacity:0;content:"";display:block;width:5px;height:15px;transform:rotate(40deg);border-bottom:3px solid #db8c79;border-right:3px solid #db8c79;position:absolute;top:12px;left:21px;}
label.ck input:checked + span{background-color:#f2d5ce;}
label.ck input:checked + span::after{opacity:1;}
/* セレクトボタン */
#content .form_base .select_box{display:inline-block;vertical-align:middle;margin-right:5px;overflow:hidden;box-sizing:border-box;position:relative;border:solid 1px #CCC; width: 100px;}
#content .form_base .select_box::after{content:"";display:inline-block;width:0;height:0;margin:auto;position:absolute;top:5px;bottom:0;right:10px;border:5px solid transparent;border-top:7px solid #bbb;}
#content .form_base select{ appearance: none; border-radius: 0; border: 0; width:100%;font-size:1em;line-height:2;padding:8px 1.5em 8px 8px;box-sizing:border-box;cursor:pointer;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#121212;background-color:#FFF;}
#content .form_base select::-ms-expand{display:none;}
#content .form_base select:not(:target){width:120% \9;}/*ie9対策*/
/*住所入力ボタン*/
#content .form_base #put_addr_button1a{ color: #fff; background-color: var(--c_brown); padding: 5px 10px; box-sizing: border-box; border-radius: 5px;}

.attention { color: #b45c4c; display: block; margin-bottom: 10px;}
/*送信ボタン*/
.agree_box{ text-align: center; margin-top: 50px;}
.agree_box .txt{ font-size: 1.7em; line-height: 1.8em; margin-bottom: 25px;}
.agree_box .txt a{ color: #FF7878; text-decoration: underline;}
.agree_box .item_wrap{ font-size: 1.4em; line-height: 1.7;}
.send_box{ text-align: center;}
.send_box input{ display: block; margin: 0 auto;}
.send_box input#to_conf_btn_df1{ margin:20px auto 40px; font-size: 2em; padding: 30px 50px; box-sizing: border-box; color: #fff; background-color: var(--c_brown); border-radius: 50vh; box-shadow: 5px 5px 15px 0px #AA8D87; font-weight: 700; cursor: pointer; border: none;}
.send_box input.reset{ font-size: 1.4em; padding: 15px 30px; box-sizing: border-box; color: var(--c_brown); background-color: #fff; border-radius: 50vh; border: 1px solid #ddd; cursor: pointer; margin: 0 auto;}


@media screen and (min-width:768px) {
/* ラジオボタン */
#content .form_base label.radio span{transition:all 0.3s;}
#content .form_base label.radio span:hover{border:1px solid #836650;}
/* チェックボックス */
label.ck span{transition:all 0.3s;}
label.ck span:hover{border:1px solid #836650;}
.send_box input#to_conf_btn_df1,
.send_box input.reset,
#content .form_base #put_addr_button1a{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
.send_box input#to_conf_btn_df1:hover,
.send_box input.reset:hover,
#content .form_base #put_addr_button1a:hover{ opacity: 0.5;}
.agree_box .txt a{ transition: .2s;}
.agree_box .txt a:hover{ opacity: 0.5;}
}

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

.form_base .w20em,
.form_base .w50per {width:100%;}
    
.form_base .w20per,
.form_base .w30per{width:50%;}
.agree_box{ margin-top: 30px;}
.agree_box .txt{ font-size: 1.4em; line-height: 1.7;}
/* ラジオボタン */
#content .form_base label.radio{margin-top:5px;margin-bottom:5px;}
#content .form_base label.radio input + span::before{top:10px;}
#content .form_base label.radio input + span::after{top:15px;}
/* チェックボックス */
#content .form_base .ck_list{display:block;}
/*#content .form_base .ck_list label.ck{width:100%;margin-right:0;}*/
label.ck{margin-top:5px;margin-bottom:5px;}
label.ck input + span::before{top:10px;}
label.ck input + span::after{top:10px;}

.send_box input#to_conf_btn_df1{ width: 100%; font-size: 2em; padding: 20px 20px; margin: 20px auto 30px;}
.send_box input.reset{ font-size: 1.3em; padding: 10px 20px;}
.form_base dl dt{ font-size: 1.5em; padding: 15px 20px; margin-bottom: 20px;}
.form_base table,
.form_base dl dd{ font-size: 1.4em; line-height: 1.4; margin: 0 0 15px;}

}

/*確認画面*/
#confirm{}
#confirm h1{ position: relative; padding: 1.5rem; text-align: center; font-size: 2.5em; line-height: 1.4em; font-weight: 700; margin-bottom: 40px;}
#confirm h1:before { position: absolute; bottom: 0; left: calc(50% - 30px); width: 60px; height: 5px; content: ''; border-radius: 3px; background: var(--c_brown);}
#confirm_send .transmit{ text-align: center; font-size: 1.7em; line-height: 1.4; margin: 40px 0;}
#confirm_send #submit_btn{ display: block; font-size: 2em; padding: 30px 50px; box-sizing: border-box; color: #fff; background-color: var(--c_brown); border-radius: 50vh; box-shadow: 5px 5px 15px 0px #AA8D87; font-weight: 700; cursor: pointer; margin: 0 auto 40px; border: none;}
#confirm_send #return_btn{ display: block; font-size: 1.4em; padding: 15px 30px; box-sizing: border-box; color: var(--c_brown); background-color: #fff; border-radius: 50vh; border: 1px solid #ddd; cursor: pointer; margin: 0 auto;}

/*完了画面*/
#thanks{ text-align: center;}
#thanks dl{ margin-bottom: 60px;}
#thanks dl dt{ font-size: 2em; line-height: 1.4; font-weight: 700; margin-bottom: 20px;}
#thanks dl dt span{ background:linear-gradient(transparent 40%, #ffd6d6 40%);}
#thanks dl dd{ font-size: 1.7em; line-height: 1.4;}
#thanks .thanks_under_box{}
#thanks .thanks_under_box .contact_tel{ max-width: 600px; margin: 0 auto; padding: 50px 30px; box-sizing: border-box; margin-bottom: 30px; background-color: #fff; border-radius: 20px;}
#thanks .thanks_under_box .contact_tel > p{ font-size: 1.7em; line-height: 1.5; margin-bottom: 25px;}
#thanks .thanks_under_box .contact_tel .tel_box{ text-align: center;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_number{ margin-bottom: 15px;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_number a{ font-size: 3.7em; color: var(--c_brown);}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_number a span{display: inline-block; padding-left: 40px; box-sizing: border-box; position: relative;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_number a span:before{ content: ''; display: block; width: 35px; height: 35px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-image: url("/images/ft_con_tel@2x.png"); background-repeat: no-repeat; background-size: 35px 35px;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_time{ font-size: 1.3em;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_time span{ display: inline-block; margin-right: 10px;}
#thanks .thanks_under_box .back_btn{ width: 260px; text-align: center; margin: 60px auto 0;}
#thanks .thanks_under_box .back_btn a{ display: block; color: var(--c_brown) !important; font-size: 1.8em; line-height: 60px; border-radius: 50vh; padding: 10px; box-sizing: border-box; background-color: #fff; text-decoration: none;}
#thanks .thanks_under_box .back_btn a span{ display: block; border: 2px dashed rgba(131, 102, 80, 0.4); border-radius: 50vh;}


@media screen and (max-width:999px) {
#thanks .thanks_under_box .contact_tel .tel_box{ width: 100%; text-align: center;}
#thanks .thanks_under_box .back_btn{ width: 230px; margin: 40px auto 0;}
#thanks .thanks_under_box .back_btn a{ font-size: 1.7em;}
}

@media screen and (min-width:768px) {
#confirm_send #submit_btn,
#confirm_send #return_btn,
#thanks .thanks_under_box .back_btn a{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#confirm_send #submit_btn:hover,
#confirm_send #return_btn:hover{ opacity: 0.5;}
#thanks .thanks_under_box .back_btn a:hover{ opacity: 0.7; transform: scale(1.05);}
}

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

/*確認画面*/
#confirm h1{ padding: 1rem 0; font-size: 1.8em; margin-bottom: 20px;}
#confirm h1:before { bottom: 0;}
#confirm_send .transmit{ font-size: 1.4em; line-height: 1.4; margin: 0 0 10px;}
#confirm_send #submit_btn{ width: 100%; font-size: 1.5em; padding: 20px 20px; margin: 20px auto 30px;}
#confirm_send #return_btn{ font-size: 1.3em; padding: 10px 20px;}

/*完了画面*/
#thanks dl{ margin-bottom: 30px; margin-top: 30px;}
#thanks dl dt{ font-size: 1.6em; margin-bottom: 15px;}
#thanks dl dd{ font-size: 1.3em; line-height: 1.4;}
#thanks .thanks_under_box .contact_tel{ padding: 20px; margin-bottom: 20px;}
#thanks .thanks_under_box .contact_tel > p{ font-size: 1.3em; margin-bottom: 15px;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_number{ margin-bottom: 15px;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_number a{ font-size: 2.7em;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_number a span{ padding-left: 30px; text-decoration: underline;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_number a span:before{ width: 25px; height: 25px; background-size: 25px 25px;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_time{ font-size: 1.2em;}
#thanks .thanks_under_box .contact_tel .tel_box .tel_box_time span{ display: block; margin-right: 0; margin-bottom: 5px;}
#thanks .thanks_under_box .contact_tel .tel_box a span{ padding-left: 40px;}
#thanks .thanks_under_box .contact_tel .tel_box a span:before{ width: 35px; height: 35px; background-size: 35px 35px;}
#thanks .thanks_under_box .back_btn{ width: 190px; margin: 30px auto 0;}
#thanks .thanks_under_box .back_btn a{ font-size: 1.5em; line-height: 50px; padding: 7px;}
}


#footer{ margin-top: 0;}
#footer .foot_inner{ padding: 130px 20px 50px;}

@media screen and (max-width:999px) {
#footer .foot_inner{ padding: 80px 40px 30px;}
}

@media screen and (max-width:767px) {
#footer .foot_inner{ padding: 60px 20px 60px;}
}

/* エラー表示 */
.form_base .err{ font-size:12px; display:block; color:#FF0000; vertical-align: middle; padding: 0!important; border-radius: 0!important; border: none; cursor: default; transition: 0; background-color: transparent;}
.form_base .ck_list .err{ position: absolute; top: -20px; left: 0; white-space: nowrap;}