@charset "utf-8";

@import url("/common/css/reset.css");
@import url("/common/css/layout.css");

/* contact
────────────────────────────────────────*/

#contact{
	margin:0 0 30px;
}

#contact h1{
	background:url(../img/mainvisual.jpg) no-repeat center;
	background-size:100% auto;
	color:#FFF;
	font-size:36px;
	font-weight:bold;
	text-align:center;
	position:relative;
	padding:60px 10px;
}
#contact h1::before {
	background: -moz-linear-gradient(45deg, rgba(74,179,221,0.8) 0%, rgba(4,75,143,0.8) 100%);
	background: -webkit-linear-gradient(45deg, rgba(74,179,221,0.8) 0%,rgba(4,75,143,0.8) 100%);
	background: linear-gradient(45deg, rgba(74,179,221,0.8) 0%,rgba(4,75,143,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc4ab3dd', endColorstr='#cc044b8f',GradientType=1 );
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0; left:0;
	z-index:0;
}

#contact h1 span{
	position:relative;
	z-index:10;
}

#contact section{
	color:#FFF;
	padding:20px;
	height:100%;
	margin:30px 0 0;
	position:relative;
}

/* contact
────────────────────────────────────────*/

#contact article{
	margin:30px 10px 0;
	position:relative;
}

#contact article p.contact{
	color:#4ab3dd;
	font-size:24px;
}

#contact article p.contact a,
#contact article p.contact span{
	color:#333;
}

#contact article p:last-of-type {
	font-size:14px;
	padding-bottom:20px;
}


@media only screen and (min-width:640px) { 
	
	#contact article p.contact br{
		display:none;
	}
	
	#contact article p:last-of-type {
		width:100%;
		margin:1em 0 0;
	}

}

@media only screen and (min-width:1280px) { 

#contact article{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	width:1040px;
	margin:100px auto 0;
}

#contact article p{
	box-sizing:border-box;
	padding:0 40px;
	text-align:center;
}

#contact article p.contact a,
#contact article p.contact span{
	font-size:36px;
	text-decoration:none;
}

#contact article p:last-of-type {
	padding-bottom:40px;
}

}