@charset "utf-8";


/*=============================================
	
	CONTACT
	
==============================================*/
@media screen and (min-width: 768px) {
	#contact_layout {
		background: #F9F9F9;
		padding: 60px 0;
	}
	#contact_layout p.sub_title {
		font-size: 15px;
		margin: 0 0 20px;
		text-align: center;
		color: #FFF;
	}
	#contact_layout h3 {
		font-size: 24px;
		margin: 0 0 40px;
		text-align: center;
		color: #FFF;
	}
	
	#contact_layout div.formArea {
		background: #FFF;
		padding: 60px 60px;
	}
	#contact_layout div.formArea p.lead {
		font-size: 12px;
		text-align: center;
		margin: 0 0 30px;
	}
	#contact_layout div.formArea .flow {
		margin: 0 0 40px;
	}	
	#contact_layout div.formArea .flow > li {
	    width: 32.3%;
	    padding-left: 3%;
	    position: relative;
	    height: 48px;
	    line-height: 48px;
	    text-align: center;
	    background: #E7E3E3;
	    display: inline-block;
	    counter-increment: flow;
	    box-sizing: border-box;
	    font-weight: 600;
	    font-size: 13px;
	    float: left;
	    margin-right: 1%;
	}
	
	#contact_layout div.formArea .flow > li.now {
	    background: #739d8b;
	    color: #fff;
	}
		
	#contact_layout div.formArea .flow > li + li:before {
	    content: "";
	    position: absolute;
	    top: 50%;
	    left: 0px;
	    margin-top: -24px;
	    border: 24px solid transparent;
	    border-left: 14px solid #fff;
	}
	
	#contact_layout div.formArea .flow > li:after {
	    content: "";
	    position: absolute;
	    top: 50%;
	    right: -38px;
	    margin-top: -24px;
	    border: 24px solid transparent;
	    border-left: 14px solid #E7E3E3;
	    z-index: 1;
	}
	
	#contact_layout div.formArea .flow > li:last-child:after {
	    display: none;
	}
	
	#contact_layout div.formArea .flow > li.now:after {
	    border-left-color: #739d8b;
	}
	
	
	#contact_layout div.formArea dl.ly_input  {
		border-top: 1px solid #CCC;
		padding: 30px 0 20px;
	} 
	#contact_layout div.formArea dl.ly_input dt {
		float: left;
		width: 30%;
		font-size: 12px;
	}
	#contact_layout div.formArea dl.ly_input dt span {
		background: #C13D4C;
		padding: 2px 8px;
		color: #FFF;
		font-size: 10px;
	}
	#contact_layout div.formArea dl.ly_input dd {
		float: right;
		width: 65%;
	}	
	#contact_layout div.formArea dl.ly_input dd input, #contact_layout div.formArea dl.ly_input dd textarea {
		border: 1px solid #CCCCCC;
		background: #FCFCFC;
		width: 98%;
		font-size: 14px;
		padding: 8px 1%;
		margin: 0 0 8px;
	}	
	#contact_layout div.formArea dl.ly_input dd span {
		font-size: 11px;
		color: #999;
	}	
	
	#contact_layout div.formArea div.btn_attention_wrap {
		padding: 40px 40px;
		background: #E4E7EA;
	}
	#contact_layout div.formArea div.btn_attention_wrap p.attention {
		font-size: 12px;
		line-height: 2.0em;
		margin: 0 0 30px;
	}	
	#contact_layout div.formArea div.btn_attention_wrap .btn_blue a {
		max-width: 560px;
		padding: 18px 60px;
		font-size: 15px;
	}
	#contact_layout div.formArea div.btn_attention_wrap ul{
		width: 640px;
		margin: 0 auto;
	}	
	#contact_layout div.formArea div.btn_attention_wrap ul li{
		float: right;
		width: 320px;
	}	
	#contact_layout div.formArea div.btn_attention_wrap ul li:last-child {
		float: left;
	}
	
	#contact_layout .btn_big01 {
		margin: 0 auto 0;
	}
	
	
}
@media screen and (max-width: 767px) {
	#contact_layout {
		background: #F9F9F9;
		padding: 10vh 0;
	}
	#contact_layout p.sub_title {
		font-size: 1.5em;
		margin: 0 0 1.0em;
		text-align: center;
		color: #FFF;
	}
	#contact_layout h3 {
		font-size: 2.4em;
		margin: 0 0 1.0em;
		text-align: center;
		color: #FFF;
	}
	
	#contact_layout div.formArea {
		background: #FFF;
		padding: 2.0em 2.0em;
	}
	#contact_layout div.formArea p.lead {
		font-size: 1.2em;
		text-align: center;
		margin: 0 0 2.0em;
	}
	#contact_layout div.formArea .flow {
		margin: 0 0 2.8em;
	}	
	#contact_layout div.formArea .flow > li {
	    width: 32.3%;
	    padding-left: 3%;
	    position: relative;
	    height: 48px;
	    line-height: 48px;
	    text-align: center;
	    background: #E7E3E3;
	    display: inline-block;
	    counter-increment: flow;
	    box-sizing: border-box;
	    font-weight: 600;
	    font-size: 1.1em;
	    float: left;
	    margin-right: 1%;
	}
	
	#contact_layout div.formArea .flow > li.now {
	    background: #739d8b;
	    color: #fff;
	}
		
	#contact_layout div.formArea .flow > li + li:before {
	    content: "";
	    position: absolute;
	    top: 50%;
	    left: 0px;
	    margin-top: -24px;
	    border: 24px solid transparent;
	    border-left: 14px solid #fff;
	}
	
	#contact_layout div.formArea .flow > li:after {
	    content: "";
	    position: absolute;
	    top: 50%;
	    right: -38px;
	    margin-top: -24px;
	    border: 24px solid transparent;
	    border-left: 14px solid #E7E3E3;
	    z-index: 1;
	}
	
	#contact_layout div.formArea .flow > li:last-child:after {
	    display: none;
	}
	
	#contact_layout div.formArea .flow > li.now:after {
	    border-left-color: #739d8b;
	}
	
	
	#contact_layout div.formArea dl.ly_input  {
		border-top: 1px solid #CCC;
		padding: 3.0em 0 2.8em;
	} 
	#contact_layout div.formArea dl.ly_input dt {
		font-size: 1.2em;
		margin: 0 0 0.4em;
	}
	#contact_layout div.formArea dl.ly_input dt span {
		background: #C13D4C;
		padding: 2px 8px;
		color: #FFF;
		font-size: 10px;
	}
	#contact_layout div.formArea dl.ly_input dd {
	
	}	
	#contact_layout div.formArea dl.ly_input dd input, #contact_layout div.formArea dl.ly_input dd textarea {
		border: 1px solid #CCCCCC;
		background: #FCFCFC;
		width: 98%;
		font-size: 1.2em;
		padding: 8px 1%;
		margin: 0 0 1.2em;
	}	
	#contact_layout div.formArea dl.ly_input dd span {
		font-size: 1.1em;
		color: #999;
	}	
	
	#contact_layout div.formArea div.btn_attention_wrap {
		padding: 3.0em;
		background: #E4E7EA;
	}
	#contact_layout div.formArea div.btn_attention_wrap p.attention {
		font-size: 1.2em;
		line-height: 2.0em;
		margin: 0 0 2.6em;
	}	
	#contact_layout div.formArea div.btn_attention_wrap ul li a {
		padding: 0.8em 6%;
		font-size: 1.1em;
	}
	#contact_layout div.formArea div.btn_attention_wrap ul{
		margin: 0 auto 0;
	}	
	#contact_layout div.formArea div.btn_attention_wrap ul li{
		width: 100%;
		margin: 0 0 1.6em;
	}	
	#contact_layout div.formArea div.btn_attention_wrap ul li:last-child {
		margin: 0 0 0;
	}
	#contact_layout div.formArea div.btn_attention_wrap ul li 	.btn_white.btn_icon01 a::after {
		left: 24px;
		top:40%;
		-webkit-transform:rotate(225deg) translateY(-60%);
		-moz-transform:rotate(225deg) translateY(-60%);
		transform:rotate(225deg) translateY(-60%);
	}
	#contact_layout .btn_big01 {
		margin: 0 auto 0;
	}
}