﻿@charset "utf-8";  
/*------------------------------------------------------------ 
    service css
------------------------------------------------------------*/  

#mainContents{
	width:auto;
	padding:3.289473684210526% 2.5%;
	margin-bottom:30px;
	background:#F2F2F2 url(../img/main-bg.png) no-repeat 30% 0;
}

.inner{
	width:100%;
	max-width:960px;
	margin:0 auto;
}

#serviceHd{
	width:100%;
	text-align:center;
}

#serviceHd h2{
	font-size:350%;
	color:#020180;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:1px;
}

#serviceHd p{
	font-size:227%;
	letter-spacing:2px;
	margin-top:10px;
}


.section{
	width:100%;
	margin-top:40px;
}

.section h3{
	font-size:227%;
	letter-spacing:2px;
	padding-bottom:10px;
	margin-bottom:20px;
	border-bottom:4px solid #020180;
}

.txt01{
	width:55.2083%;
	line-height:2;
	font-size:117%;
	float:left;
}

.img01{
	width:36.4583%;
	float:right;
}

.txt02{
	line-height:2;
	font-size:117%;
	margin-bottom:20px;
}

.txt03{
	width:34.375%;
	float:left;
	overflow:hidden;
	letter-spacing: -.40em;
}

.txt03 li{
	display:inline-block;
	width:50%;
	letter-spacing: normal;
	font-size:117%;
	line-height:2;
}

.img02{
	width:64.79166666666667%;
	float:right;
}

.img03{
	width:30.79166666666667%;
	float:right;
}

#contact{
	margin-top:30px;
	width:100%;
	background:#fff;
	overflow:hidden;
	border:6px solid #020180;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#contactHd{
	width:290px;
	float:left;
	padding:30px 0 0 40px;
}

#contactHd h3{
	color:#020180;
	font-weight:bold;
	font-size:227%;
	margin-bottom:20px;
}

#contactHd p{
	font-size:117%;
}

#contactHd #tel{
	margin-top:10px;
	font-size:150%;
	font-weight:bold;

}

#contactHd #tel span{
	font-size:150%;
	font-weight:bold;
}

#to-contact{
	width:280px;
	height:55px;
	margin-top:5px;
}

#to-contact a{
	display:block;
	width:auto;
	padding-left:80px;
	height:100%;
	line-height:55px;
	color:#fff;
	background:#01017F url(../img/icon-mail.png) no-repeat 30px 50%;
}

#contact dl{
	padding-top:30px;
	margin-left:30px;
	float:left;
	font-size:117%;
}

#contact dd{
	line-height:1.6;
	margin-bottom:10px;
}

.img03{
	float:right;
	width:370px;
}

/* PC */
@media screen and (max-width: 1000px){

#contact{
	width:600px;
	margin:30px auto 0;
}

#contactHd{
	padding-bottom:40px;
}

.img03{
	width:100%;
	float:none;
}

}


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


#serviceHd h2{
	font-size:227%;
}

#serviceHd p,
.section h3,
#contactHd h3{
	font-size:175%;
}


.txt03,
.img02{
	width:100%;
	float:none;
}

.txt03 li{
	width:auto;
	margin-left:20px;
}

.img02{
	margin-top:20px;
}


#contact{
	width:auto;
}

#contactHd{
	float:none;
	padding-bottom:0px;
}

#contact dl{
	float:none;
	margin:0;
	padding:20px 40px;
}

}

/* SP */
@media screen and (max-width: 479px){

#serviceHd h2{
	font-size:200%;
}

#serviceHd p,
.section h3,
#contactHd h3{
	font-size:150%;
}


.txt01,
.img01{
	width:100%;
	float:none;
}

.img01{
	margin-top:20px;
}

#contact #tel{
	font-size:117%;
}

#to-contact{
	width:100%;
}

#contactHd{
	width:auto;
	padding:15px 15px 0;
}

#contact dl{
	padding:15px;
}

}

.square_btn{
	display: inline-block;
	padding: 1em 2em;
	text-decoration: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	background-image: -webkit-linear-gradient(#020180 0%, #67ceff 100%);
	background-image: linear-gradient(#020180 0%, #67ceff 100%);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	border-bottom: solid 3px #5e7fca;
  }

.square_btn:active{
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}
