@charset "utf-8";

/*=========================================================
	[ contact.css ]
	design - content style
	date - creation:2013-03-01 // update:2013-05-14
=========================================================*/

/*=========================================================
	index
		1. content
=========================================================*/

/* 1. content
=========================================================*/
/* able setting
---------------------------------------------------------*/

.div-form.accept{display:block !important;}
#contactForm.accept{display:block !important;}
p#agreement-p{text-align:center;}
p#agreement-p label{display:block;padding:20px;float:none;width:250px;border:1px solid #ccc;margin:0 auto;}

#content a.sctble_display{
	margin-left:0;
}
#content a.sctble_display span{
	width:auto;
}

#contactHeader{
	width:880px;
	margin:10px auto;
}
#contactHeader dl{
	padding:10px 0 10px 210px;
	background:transparent url(../images/con_head_bg.gif) no-repeat 3px 100%;
	border-bottom:1px solid #00A26B;
	text-align:left;
	
}
#contactHeader dd{
	padding-left:20px;
	font-weight:bold;
	font-size:16px;
}

#houseListContact {
    border-top: 1px solid #999999;
    margin: 0 auto;
    padding-bottom: 20px;
    width: 780px;
}
#houseListContact table.houseTable {
    border-bottom: 1px solid #999999;
    width: 780px;
}
#content #houseListContact .houseListImgarea {
    border-bottom: medium none;
    padding: 1px 0 1px 7px;
    text-align: center;
    width: 124px;
}
#houseListContact .houseListImg span {
    border: 0 none;
    display: table-cell;
    height: 124px;
    padding: 0;
    vertical-align: middle;
    width: 124px;
}
#houseListContact .houseListImg span img {
    height: auto;
    max-width: 124px;
}
#contact #content table.houseTable{
	margin-bottom:20px;
}
#contact #content table.houseTable td{
	padding:0 3px;
	background-image:none;
}
#contact #content #houseListContact .houseListImgarea{
	background-image:none;
}
#contact #content #houseListContact .houseListInfoarea {
    border-bottom: 0 none;
    padding: 9px 0 9px 15px;
	background-image:none;
}
#houseListContact .housePrice, #houseListContact .houseRoom, .housePeriod {
    float: left;
    margin: 0 15px 5px 0;
    padding: 0 10px 5px 0;
    width: 170px;
}
.housePeriod {
    color: #FF3366;
    font-weight: bold;
    margin: 5px 15px 10px 0;
}
#houseListContact .housePrice {
    width: 200px;
	margin:0 15px 5px 0;
    color: #FF3366;
    font-weight: bold;
    font-size: 18px;
}
.tHouseContact{
    width: 100%;
}
#contact .tHouseContact th {
    background: none repeat scroll 0 0 #CEDFFF;
    font-weight: normal;
    text-align: center;
    width: 70px;
}
#contact .tHouseContact th,#contact .tHouseContact td {
    border: 1px solid #FFFFFF;
    padding: 3px;
	background-image:none;
}
#contact #houseListContact .houseIDhouseList {
    float: none;
	width:auto;
    margin-top: 10px;
}
#contact #houseListContact .houseIDhouseList th{
	padding:3px;
	width:70px;
	background-image:none;
	text-align:center;
}
#contact #houseListContact .houseIDhouseList td{
	padding:3px;
}

/* images
---------------------------------------------------------*/

#wrapper{
	overflow:hidden;
}

#content{
	overflow:hidden;
}

.hideImg div{
	position:absolute;
	z-index:100;
	width:auto;
}
#out01{
	top:530px;
	left:-83px;
}
#out02{
	top:340px;
	left:915px;
}
#out03{
	top:810px;
	left:915px;
}
#out04{
	top:610px;
	left:-45px;
}
#out05{
	top:580px;
	left:920px;
}
#out06{
	position:absolute;
	z-index:100;
	width:auto;
	top:400px;
	left:720px;
}

/* form
---------------------------------------------------------*/
#contactForm{
	width:848px;
	margin:20px auto 0;
	background:transparent url(../images/form_bg.gif) repeat-y 0 0;
	text-align:center;
}
#portal #contactForm{background: unset;}

#contactInner{
	margin:0 auto;
	padding:0 24px 65px;
	background:transparent url(../images/form_btm.gif) no-repeat 0 100%;
}
#portal #contactInner{background: unset;}

#contactForm h3{
	position:relative;
	overflow:hidden;
	height:0;
	margin:0;
	padding:164px 0 0 0;
	background:transparent url(../images/form_tit.jpg) no-repeat 0 0;
	line-height:2;
}

#contactForm h3.titleE{
	background:transparent url(../images/form_tit_e.jpg) no-repeat 0 0 !important;
}


#step{
	margin:15px 0 30px;
	text-align:center;
}
#infoList,#roomList,#areaList{
	width:755px;
	margin:5px auto 30px;
	padding-top:3px;
	background-image:url(../images/for_border1.gif);
	background-repeat:repeat-x;
	background-position:0 0;
}
#contactForm table{
}

#contactForm th,#contactForm td{
	background-image:url(../images/for_border1.gif);
	background-repeat:repeat-x;
	background-position:0 100%;
	text-align:left;
	font-weight:normal;
}
#contactForm table#btnArea th,#contactForm table#btnArea td{
	background:none;
}

#contactForm table th{
	width:150px;
	padding:10px 5px;
}
#contactForm table td{
	padding:10px 20px;
}
@media screen and (max-width: 600px) {
  #contactForm table td{
    padding:10px 5px;
  }
}
#infoList th{background-color:#FFCCFF;}
#roomList th{background-color:#D8FDCA;}
#areaList th{background-color:#C8E3FF;}

#contactForm table p{
	margin:5px 0;
	clear:both;
}

/* form object */
form input[type="text"]{
	padding:3px;
	border:1px solid #CECECE;
}

label{
	display:block;
	float:left;
	min-width:105px;
	padding:3px;
}
input,select{
	margin:0;
	vertical-align:middle;
}
label:hover{
	background:#FFCFCE;
}

#content a.sctble_display{
	width:12em;
}

div.sctble_mat a{
	display:block;
	float:left;
	min-width:90px;
}

#content #years01 a,
#content #years02 a,
#content #years03 a,
#content #years04 a,
#content #years05 a{
	width:7em;
}
#page01_mat a,
#page02_mat a,
#page03_mat a,
#page04_mat a,
#page05_mat a{
	min-width:60px;
}

#formPeople{
	position:relative;
}
#formNum{
	position:absolute;
	top:10px;
	left:-175px;
	width:155px;
	padding-right:24px;
	background:url(../images/form_num_bg.png) no-repeat 100% 50%;
}
#formNum p{
	padding:2px 5px;
	background:#FFCCFF;
	line-height:1.3;
	min-height:32px;
}
.fie-m{
	width:200px;
	margin-right:10px;
}
.fie-l{
	width:500px;
}
textarea.fie-l{
	width:100%;
}
@media screen and (max-width: 600px) {
  .fie-l{
    width:auto;
  }
}
.icoMust{
	display:block;
	float:right;
	width:34px;
	margin-left:5px;
}
.icoMustE{
	display:block;
	float:right;
	width:59px;
	margin-left:5px;
}
#contact .fcol-imortant{color:#FF3333;}
#contact .bgCol1{
	float:left;
	margin:10px 10px 0;
	padding:3px;
	background:#D8FDCA;
}
#contact .bgCol2{
	margin:5px 0 0;
	padding:3px;
	background:#FFCCFF;
}
#contact .bgCol2 strong{
	font-weight:bold;
	color:#FF0000;
}
#contact .bgCol3{
	margin:5px 0 0;
	padding:3px;
	background:#CAE4FF;
}
#contact .bgChecked{
	background:#FFCFCE;
}
#contact .bgCol2-number{
	float:left;
	width:180px;
	margin:10px 0 0 0;
	padding:8px 3px;
	background:#FFCCFF;
}
#contactForm table p.bgCol2-notes{
	clear:none;
	float:right;
	width:340px;
	margin-top:10px;
}
.tError{
	clear:both;
	margin:0 auto 5px;
	padding:15px 0 0;
	widgh:736px;
	height:45px;
	background:url(../images/error_bg.gif) no-repeat 50% 50%;
	text-align:center;
}
.tError span{
	padding-left:30px;
	background:url(../images/error_ico.gif) no-repeat 0 50%;
	font-size:18px;
	font-weight:bold;
	color:#FF3333;
}

#content ul.list-3,#content ul.list-4{
	margin:0;
	padding:0;
	list-style:none;
}
#content .list-3 li,#content .list-4 li{
	display:block;
	float:left;
	width:30%;
	margin:0;
	padding:0;
	font-size:120%;
}
#content .list-4 li{
	width:23%;
}
#tPolicy{
	width:731px;
	margin:10px auto;
	padding:12px;
	text-align:left;
	background:#F2F2F2;
}
#tPolicy dt{
	font-weight:bold;
}
#tPolicy dd{
	padding:10px 15px 0;
}

#contactForm #btnArea{
	clear:both;
	width:755px;
	margin:0 auto 20px;
}
#contactForm #btnArea ul{
	list-style:none;	
}
#contactForm #btnArea li{
	display:block;
	float:left;
	padding:0;
	text-align:left;
}
#contactForm #btnArea ul li#formBtnPrev{
	width:240px;
}
#contactForm #btnArea ul li#formBtnSubmit{width:301px;}

#contact table#btnArea th{
	width:68%;
}
#contact #btnArea td {
    padding: 10px 20px 10px 5px;
}
#contact table#btnArea th input {
    float: right;
}
#contact #btnArea .btnAreaTxt {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    line-height: 1.3;
    padding: 5px;
	font-size:11px;
}

#contact input {
    float: left;
    margin-right: 2px;
}
#contact label {
    margin-top: -2px;
}


/* end
---------------------------------------------------------*/
#contactEnd{
	width:755px;
	margin:50px auto 20px;
	text-align:left;
}
#contactEnd h4{
	overflow:hidden;
	height:0;
	padding:27px 0 0 0;
	border-bottom:2px solid #CCCCCC;
	background:url(../images/tit_notsend.png) no-repeat 0 0;
	line-height:2;
}
#contactEnd p{
	padding:0 0 10px 40px;
}
#contactEnd ol{
	position:relative;
	overflow:hidden;
	list-style:none;
}
#contactEnd ol li{
	float:left;
	width:220px;
	padding:0 15px;
	margin-left:-1px;
	display:block;
	border-left:1px solid #000000;
}
#contactEnd ol li img{
	display:block;
	margin:15px auto;
}
#contactEnd ol li span{
	display:block;
	margin-top:5px;
	padding:5px;
	background:url(../images/end_bg.gif) 0 0;
}

#sInfo {
	border:5px solid #FFDC73;
	padding:5px 5px 5px 100px;
	width:500px;
	margin:10px auto;
	text-align:left;
	background:url("/common/images/icon_sInfo.png") 30px center no-repeat;
}
#sInfo p{
}

.btnE:hover{
	filter: alpha(opacity=65);
	-moz-opacity:0.75;
	opacity:0.75;
}



.div-seminar{margin-bottom:20px;text-align:center;/*height:100px;*/}
.div-seminar img{height:100%;width:auto;}
.div-business{margin:0 auto 10px auto;max-width: 600px;}
.div-business a img{width:100%;height:auto;}


/* contact-foreign entry */
.contact-foreign.contact-input #contactForm h3.titleE {
  background-image:url('/contact_asset/images/form_tit_common.jpg') !important;
  height: auto;
  padding-top: 118px;
  font-size:24px;color:#000;
}
.contact-foreign.contact-input #swichmenu a.mr15 {
  display:block;
  float: left;
}
.contact-foreign.contact-input #swichmenu a.mr15 span{
  display:block;
  float:left;
  width:35px;
  height:24px;
}
.contact-foreign.contact-input #step {text-align: center;height: 25px;}
.contact-foreign.contact-input #step ul {text-align: center;}
.contact-foreign.contact-input #step ul li{display: inline-block;padding-left: 85px;height: 25px;line-height: 25px;background-position: left top;background-repeat: none;font-size:16px;line-height: 33px;margin-left: 20px; }
.contact-foreign.contact-input #step #step1{padding-left: 65px;background-image: url('/contact_asset/images/step1_input_common.gif');color:#f00;}
.contact-foreign.contact-input #step #step2{background-image: url('/contact_asset/images/step2_input_common.gif');}
.contact-foreign.contact-input #step #step3{background-image: url('/contact_asset/images/step3_input_common.gif');}

.contact-foreign.contact-input .required{padding: 2px 5px;color:#d00;background-color: #fff;border: 2px solid #d00;float: right;}
.contact-foreign.contact-input #contactInner h4{text-align: left;font-size: 22px;margin-left: 22px;}
.contact-foreign.contact-input #contactInner h4 span{font-size: 15px;margin-left: 40px;}
.contact-foreign.contact-input #btnConfirm{width:301px;height: 57px;color:#fff;background-image: url('/contact_asset/images/btn_confirmation_common.jpg');border: none;background-color: transparent;cursor: pointer;font-size: 22px;}

@media screen and (max-width: 800px) {
  .contact-foreign.contact-input #contactForm h3.titleE {
    background-image:none !important;
    padding-top: 20px;
  }
  
.div-seminar{margin-bottom:20px;text-align:center;height:auto;}
.div-seminar img{max-width:100%;}
  
}
/* congirm */
.contact-foreign.contact-confirm #contactForm h3.titleE{background-image:url('/contact_asset/images/form_tit_common.jpg') !important;height: auto;padding-top: 118px;font-size:24px;color:#000; }
.contact-foreign.contact-confirm #step {text-align: center;height: 25px;}
.contact-foreign.contact-confirm #step ul {text-align: center;}
.contact-foreign.contact-confirm #step ul li{display: inline-block;padding-left: 85px;height: 25px;line-height: 25px;background-position: left top;background-repeat: none;font-size:16px;line-height: 33px;margin-left: 20px; }
.contact-foreign.contact-confirm #step #step1{padding-left: 65px;background-image: url('/contact_asset/images/step1_confirm_common.gif');}
.contact-foreign.contact-confirm #step #step2{background-image: url('/contact_asset/images/step2_confirm_common.gif');color:#f00;}
.contact-foreign.contact-confirm #step #step3{background-image: url('/contact_asset/images/step3_input_common.gif');}

.contact-foreign.contact-confirm .required{padding: 2px 5px;color:#d00;background-color: #fff;border: 2px solid #d00;float: right;}
.contact-foreign.contact-confirm #contactInner h4{text-align: left;font-size: 22px;margin-left: 22px;}
.contact-foreign.contact-confirm #contactInner h4 span{font-size: 15px;margin-left: 40px;}
.contact-foreign.contact-confirm #btnBack{width:180px;height: 47px;color:#fff;background-image: url('/contact_asset/images/btn_prev_common.jpg');border: none;background-color: transparent;cursor: pointer;font-size: 18px;}
.contact-foreign.contact-confirm #btnSend{width:301px;height: 57px;color:#fff;background-image: url('/contact_asset/images/btn_confirmation_common.jpg');border: none;background-color: transparent;cursor: pointer;font-size: 22px;}
@media screen and (max-width: 800px) {
  .contact-foreign.contact-confirm #contactForm h3.titleE{
    background-image:none !important;
    padding-top: 20px;
  }
}

.buttonWrapper {position: relative;}
div.wpcf7 .ajax-loader {position: absolute;top: 52px;}
.wpcf7 form.sent .wpcf7-response-output{font-size: 20px !important;margin-left: 0;margin-right: 0;}
.wpcf7-spinner{right: 0;left: 0;margin: 0.5em auto;width: 40px;height: 40px;}

/* conmplete */
.contact-foreign.contact-complete #contactForm h3.titleE{background-image:url('/contact_asset/images/form_tit_common.jpg') !important;height: auto;padding-top: 118px;font-size:24px;color:#000; }
.contact-foreign.contact-complete #step {text-align: center;height: 25px;}
.contact-foreign.contact-complete #step ul {text-align: center;}
.contact-foreign.contact-complete #step ul li{display: inline-block;padding-left: 85px;height: 25px;line-height: 25px;background-position: left top;background-repeat: none;font-size:16px;line-height: 33px;margin-left: 20px; }
.contact-foreign.contact-complete #step #step1{padding-left: 65px;background-image: url('/contact_asset/images/step1_confirm_common.gif');}
.contact-foreign.contact-complete #step #step2{background-image: url('/contact_asset/images/step2_complete_common.gif');}
.contact-foreign.contact-complete #step #step3{background-image: url('/contact_asset/images/step3_complete_common.gif');color:#f00;}
@media screen and (max-width: 800px) {
  .contact-foreign.contact-complete #contactForm h3.titleE{
    background-image:none !important;
    padding-top: 20px;
}





@media screen and (max-width: 800px) {
	
	#contactForm h3.titleE {
		background: none !important;
		padding:0;
	}

	#contactForm {
	  width: auto;
	  margin-top: 0;
	  margin-left: 0;
	  margin-right: 0;
	  padding: 0;
	  background: none;
	}
	#contactInner {
		padding:0;
		background: none;
	}
	  #contactInner p img,
	  #contactInner #step img {
		  width: 100%;
		  height: auto;
	  }
	#contactHeader {
	  width: auto;
	  margin-left: 10px;
	  margin-right: 10px;
	}
	  #contactHeader .locShopBox {
		  display: none;
	  }
	#houseListContact {
		width:auto;
	  margin-left: 0;
	  margin-right: 0;
	}
	#infoList, #roomList, #areaList {
		width:auto;
	  margin-left: 0;
	  margin-right: 0;
	}
	#contactForm table th {
		width: 70px;
	}
	#infoList th {font-size: 14px;letter-spacing:1px;}
	#tPolicy {
		width:auto;
	  margin-left: 10px;
	  margin-right: 10px;
	}
	#contactForm #btnArea {
		width:100%;
	  margin-left: 0;
	  margin-right: 0;
	}
	#contact table#btnArea tbody,
	#contact table#btnArea tr,
	#contact table#btnArea th,
	#contact table#btnArea td{
		display: block;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	#contact table#btnArea th {
		text-align: center;
	}
	#contact table#btnArea th input {
		float: none;
	}
	
	.fie-l {
		width:auto;
	}
	#bodycopy {
		width: 90% !important;
    resize: vertical;
	}
	
	#formBtnSubmit input[type=image]{
		width: 100%;
		height: auto;
		max-width: 301px;
	}
	
	#sInfo {
		width: auto;
		background-size: 25px auto;
		padding-left: 50px;
		background-position: 12px center;
	}
	#contactEnd {
		width:auto;
	}
	#contactEnd ol li {
		float: none;
		width: 100%;
		padding:0;
	}
	
	#houseListContact table.houseTable {
		width:auto;
	}

}



/**** for smartphone *****/
@media screen and (max-width: 400px) {
  .fie-m{
    width:auto;
  }
	#contact input[type=text]{float:left}
	#content .list-3 li, #content .list-4 li{display:block;float:none;width:100%;}
#agreement>p{padding:10px 10px !important;font-size:12px !important;line-height:1.6em !important;}
#houseListContact{padding:0;text-align:left;}
#houseListContact p{text-align:left !important;}
#houseListContact table{display:table;}
#houseListContact table tr td{display: table-cell;}
#contact #content #houseListContact .houseListInfoarea{padding:5px 0 5px 0;}
#contact #content #houseListContact .houseListInfoarea table{display:block;clear:both;}
#contact #content #houseListContact .houseListInfoarea table tbody{display:block;}
#contact #content #houseListContact .houseListInfoarea table tbody tr{display:block;}
#contact #content #houseListContact .houseListInfoarea table tbody tr td{display:block;width:100%;}
#contact #content #houseListContact .houseListInfoarea table tbody tr th{display:block;width:100%;}
#contact #content #houseListContact .houseListInfoarea .housePrice{width:100%;padding:0;margin:0;font-size:14px;font-weight:normal;text-align:left;}
#contact #content #houseListContact .houseListInfoarea .housePrice span{float:none;}
#contact #content #houseListContact .houseListInfoarea .houseRoom{width:100%;padding:0;float:none;margin:0;font-size:14px;display:block;font-weight:normal;text-align:right;}

#btnConfirm{height:auto !important;}
#content h4{margin:10px auto !important;font-size:18px !important;}
#content h4 spam{margin:5px auto !important;font-size:14px !important;}
#contactForm #infoList table{display:block;}
#contactForm #infoList table tbody{display:block;}
#contactForm #infoList {margin:0;}
#contactForm #infoList table tr{display:block;width:100%;}
#contactForm #infoList table th{display:block;width:100%;}
#contactForm #infoList table th br{display:none;}
#contactForm #infoList table td{display:block;width:100%;padding-top:3px;}
#contactForm #infoList table td input[type='text']{float:none;width:100%;font-size:16px;}
#contactForm #infoList table td textarea{float:none;width:100% !important;font-size:16px;}
#contactForm #infoList table td.purpose {display: flex;justify-content: flex-start;flex-wrap: wrap;}
#contactForm #infoList table td.purpose input{width:auto;}
#contactForm #infoList table td.fee {display:flex;justify-content:space-between;}
#contactForm #infoList table td.fee select{width:6.5em;font-size:16px;}
#contactForm #infoList table td.term p{display:flex;justify-content:space-between;}
#contactForm #infoList table td.term p select{width:7.5em;font-size:16px;}
#contactForm #infoList table td.count select{width:4.5em;font-size:16px;}
#contactForm #infoList table td ul{display:flex;flex-wrap:wrap;justify-content: space-between;}
#contactForm #infoList table td ul li{flex-basis:50%;}
#contactForm #infoList table td ul li input{width:auto;}
#contactForm #roomList table{display:block;}
#contactForm #roomList table tbody{display:block;}
#contactForm #roomList .tb{width:100%;}
#contactForm #roomList table tr{display:block;width:100%;}
#contactForm #roomList table th{display:block;width:100%;}
#contactForm #roomList table th br{display:none;}
#contactForm #roomList table td{display:block;width:100%;padding-top:3px;}
#contactForm #roomList table td input{float:none;width:100%;font-size:16px;}
#contactForm #roomList table td textarea{float:none;width:100% !important;font-size:16px;}
#contactForm #roomList table td input#rent{width:calc( 100% - 1.6em );display:inline}
#contactForm #roomList table td input#deposit{width:calc( 100% - 1.6em );display:inline}
#contactForm #roomList table td ul{display:flex;flex-wrap:wrap;justify-content: space-between;}
#contactForm #roomList table td ul li{flex-basis:50%;}
#contactForm #roomList table td ul li input{width:auto;}
#contactForm #roomList table td.fee {display:flex;justify-content:space-between;}
#contactForm #roomList table td.fee select{width:6.5em;font-size:16px;}
#contactForm #roomList table td.count select{width:3.5em;font-size:16px;}
#btnConfirm{width:80% !important;}

#tPolicy{margin:0;}
#tPolicy div{font-size:smaller;}

.contact-foreign.contact-input #step ul li{margin-left:5px;font-size:14px;    padding-left: 80px;}

}