@charset "UTF-8";
/* CSS Document */

.contents.contact {
	width: 100%;
	height: 100%;
	margin: 430px 0 0;
	padding: 0;
	float: left;
	background-color: #FFF;
}

.contents.contact .footprint01 {
	margin: 20px 0 0 20%;
	float: left;
}

.contents.contact .footprint02 {
	margin: 10px 0 0;
	float: left;
}

.contents.contact .intro {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	background: -webkit-linear-gradient(left, #FFF, #FFF 20%, #FCF9EB 20%, #FCF9EB 100%);
	background: -o-linear-gradient(left, #FFF, #FFF 20%, #FCF9EB 20%, #FCF9EB 100%);
	background: linear-gradient(to right, #FFF, #FFF 20%, #FCF9EB 20%, #FCF9EB 100%);
}

.contents.contact .intro br.mb { display: none; }

.contents.contact .intro .glid-left {
	width: 20%;
	margin: 0;
	padding: 0;
	float: left;
}

.contents.contact .intro .glid-mid {
	width: 60%;
	margin: 0 20% 0 0;
	padding: 0;
	float: right;
}

.contents.contact .intro h2 {
	width: 80%;
	margin: 0 10%;
	padding: 0;
	float: left;
	text-align: center;
	font-size: 150%;
	line-height: 1.3em;
}

.contents.contact .intro .message {
	width: 80%;
	margin: 50px 10%;
	padding: 0;
	float: left;
}



.contents.contact .phone {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.contents.contact .phone .backgr {
margin : 0 auto 40px;
width : 100%;
font-size : 165px;
text-align : center;
overflow : hidden;
z-index: 0;
}

.contents.contact .phone .backgr ul{
margin:0;
display : inline-block;
padding-left: 100%;
white-space : nowrap;
line-height : 1em;
animation : scrolltext 15s linear infinite;
}

.contents.contact .phone .backgr ul li{
display:inline;
margin:0 100px 0 0;
color: #F5F8FC;
font-weight: 700;
}

@keyframes scrolltext {
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

.contents.contact .phone h2 {
	width: 90%;
	top: -120px;
	margin: 0 5%;
	display: block;
	position: relative;
	font-size: 250%;
	text-align: center;
	z-index: 9;
}

.contents.contact .phone dl {
	width: 90%;
	margin: 0 5%;
	padding: 0;
	float: left;
}

.contents.contact .phone dl dt {
	width: 100%;
	margin: -50px 0 0;
	padding: 0;
	float: left;
	text-align: center;
	font-size: 120%;
	font-weight: 700;
	letter-spacing: 0;
	color: #333333;
}

.contents.contact .phone dl dd {
	width: 60px;
	height: 3px;
	margin: -20px auto 0;
	padding: 0;
	background-color: #333333;
}

.contents.contact .phone p {
	width: 600px;
	height: 2.5em;
	color: #FFF;
	line-height: 2.5em;
	font-size: 250%;
	font-weight: 700;
	text-align: center;
	margin: 0 auto;
	background: -webkit-linear-gradient(left, #D4FFEC, #97D2F2 15%, #4596FB 30%, #4596FB);
	background: -o-linear-gradient(left, #D4FFEC, #97D2F2 15%, #4596FB 30%, #4596FB);
	background: linear-gradient(to right, #D4FFEC, #97D2F2 15%, #4596FB 30%, #4596FB);
}


.contents.contact .kouji .footprint01 {
	width: 70%;
	float: left;
	margin: 100px 15% 0;
}

.contents.contact .kouji .footprint02 {
	width: 100%;
	float: left;
	margin: 100px 0 0;
}

.contents.contact .kouji .footprint03 {
	width: 70%;
	float: left;
	margin: 100px 15% 0;
	text-align: right;
}

.contents.contact .kouji .footprint04 {
	width: 100%;
	float: left;
	margin: 10px 0 0;
	text-align: right;
}

.contents.contact .kouji .footprint05 {
	width: 70%;
	float: left;
	margin: 100vh 15% 0;
}

.contents.contact .kouji .footprint06 {
	width: 70%;
	float: left;
	margin: 10px 15% 0;
}


/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 1100px */
/* **************************************************************** */
@media only screen and (max-width:1100px){

.contents.contact { margin: 500px 0 0; }

.contents.contact .intro .glid-left { width: 10%; }
.contents.contact .intro .glid-mid { width: 80%;margin: 0 10% 0 0; }

}


/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 980px */
/* **************************************************************** */
@media only screen and (max-width:980px){

.contents.contact .phone h2 { font-size: 4vw; }
.contents.contact .phone p { width: 80%;font-size: 5vw; }

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 780px */
/* **************************************************************** */
@media only screen and (max-width:780px){

.contents.contact .intro br.mb { display: block; }

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 580px */
/* **************************************************************** */
@media screen and (max-width:580px) {

.contents.contact { margin: 400px 0 0; }

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 480px */
/* **************************************************************** */

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

.contents.contact { letter-spacing: 0;margin: 85vw 0 0; }

}