@charset "utf-8";
/*************************************/
/* HTML tag styles                   */ 
/*************************************/

*{
padding:0;
margin:0;
}

* html body {     
    background: url(null) fixed;     
}  

body{ 
	margin:0;
	padding:0;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fildset,input,textarea,p,blockquote,table,th,td,address{
margin:0;
padding:0;
color:#333;
font-size:14px;
font-weight:normal;
font-style:normal;
line-height:180%;
font-family:Verdana, Roboto, "Avenir,Arial",'メイリオ',meiryo,sans-serif;
max-height: 999999px; 
}

table{
border-collapse:collapse;
border-spacing:0;
}

textarea,input{margin:0;padding:0}

caption,th{text-align:left}
td,th{vertical-align: top}

fieldset,img,abbr{border:none}
li{list-style-type:none}
hr{display:none}

a,a:link{
    color:#333333;text-decoration:none;
    transition: 0.3s;}
a:hover{
    opacity: 0.7;
    text-decoration:none;}

strong{font-weight:bold}

img{vertical-align:bottom}

body{-webkit-text-size-adjust: 100%;}

h2.category{
	font-size:228%;
	color:#E15527;
	line-height:120%;
}

h2.category span{
	font-size:50%;}

.inner{
	width: 1200px;
	margin: 0 auto;}

.linkHover{
    transition: 0.3s;
}

.linkHover:hover{
    opacity: 0.7;
} 

/********************* <dl id="serviceItem"> *********************/

#serviceItem{
	display: flex;
	justify-content: space-between;
	width: 1200px;
	padding: 20px;
	border-top: 1px dotted #376CAC;}

#serviceItem:last-child{ 
	border-bottom: 1px dotted #376CAC;
	margin-bottom: 80px;}

#serviceItem{
    align-items: center;
    box-sizing: border-box;
    width: 100%;}

#serviceItem dt,
#serviceItem dd{
	box-sizing: border-box;
	text-align: left;}

#serviceItem dd:last-child{ 
	padding-left: 40px;
	border-right: none;}

#serviceItem dt{ 
	width: 20%;
    box-sizing: border-box;
	padding: 40px 40px 40px 0;
    font-weight: bold;}
    #serviceItem dd{ 
	width: 15%;
	padding: 40px;
    box-sizing: border-box;
}
#serviceItem dd.cont{ 
	width: 60%;
	padding: 40px;
	border-left: 1px dotted #376CAC;
	border-right: 1px dotted #376CAC;}



/*************************************/
/* layout Divs                       */ 
/*************************************/

#wrapper{
	width: 100%;
	margin: 0 auto;
	padding:0;
	text-align:center;
}


#main{
	text-align: left;
    margin-bottom: 80px;}


/*************************************/
/* ヘッダー　*/ 
/*************************************/

#head{
	background-color: #fff;
	background: url(../img/common/background.jpg) 50% bottom repeat-x;}

#head .inner{
	position: relative;
	height: 170px;}

#head .logoArea{
	position: absolute;
	top: 20px;
	left: 0;}

#head .gnavi{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1200px;}

#head .gnavi ul{
	width: 100%;
	display: flex;
	justify-content: space-between;}

#head .gnavi ul li{
	width: 25%;
	text-align: center;
	border-left: 1px dotted #ccc;
	border-bottom: 5px #f0f0f0 solid;
    transition: 0.3s;}

#head .gnavi ul li:hover{
	border-bottom: 5px #376CAC solid;}

#head .gnavi ul li:last-child{ 
	border-right: 1px dotted #ccc;}

#head .gnavi ul li a{ 
	display: block;
	width: 100%;
	padding: 5px 0;}

#head .gnavi ul li span{ color: #376CAC;}
	
#head .infoCont{
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 20px;
	right: 0;}

#head .infoCont p{
	text-align: left;
	margin: 0 20px 0 0;}

#head .infoCont .contact{ 
	background: url(../img/common/mailBg.jpg) left 50% no-repeat;}

#head .infoCont .este{
	position: relative;
	background: url(../img/common/esteBg.jpg) left 50% no-repeat;}

#head .infoCont .contact a{
	padding: 10px 20px 10px 60px;
	display: block;
	color: #fff;
	font-size: 140%;
	line-height: 150%;}

#head .infoCont .este span{
	display: block;
	background:url(../img/common/freeIcon.png) 50% 50% no-repeat;
	width: 63px;
	height: 58px;
	position: absolute;
	top:-30px;
	right: -40px;
	text-indent: -9999px;}
	
#head .infoCont p strong{ font-size: 190%;}
#head .infoCont p span{ 
	font-size: 95%;
	line-height: 200%;}

#head .infoCont .contact:last-child{ margin-right: 0;}

/*************************************/
/* フッター */ 
/*************************************/

#footer{ 
	border-top: 1px dotted #376CAC;
	padding-top: 40px;
	width: 100%;}

#footer .inner{
	height: 60px;}

#footer .contactArea{
	display: flex;
	justify-content: space-between;
	width: 1200px;
	margin: 0 auto;}

#footer .contactArea p{
	text-align: center;
	font-size: 120%;
	width: 373px;
    border: 1px solid #376CAC;
    padding: 20px 0;
	background: url(../img/common/triangleIcon02.jpg) bottom 1px right 1px no-repeat;}

#footer .contactArea p strong{
	color: #376CAC;
	font-size: 170%;}

#footer .contactArea .mail{
	text-align: center;
	font-size: 140%;
	padding: 79px 0 20px 0;
	background: url(../img/common/footMail.jpg)  top 32px left 50% no-repeat,
 				url(../img/common/triangleIcon02.jpg) bottom 1px right 1px no-repeat;}

#footer .contactArea .official{ 
	background: url(../img/common/footEsti.jpg) top 20px left 50% no-repeat,
				url(../img/common/triangleIcon02.jpg) bottom 1px right 1px no-repeat;}

#footer .pageTopArea{
	margin-bottom: 40px;
	background-color: #376CAC;}

#footer .pageTopArea ul{
	display: flex;
	justify-content: center;}

#footer  .pageTopArea ul li{
	padding: 20px 100px 15px 20px;
	background: url(../img/common/icon.jpg) top 45% left no-repeat;}

#footer  .pageTopArea ul li a{ color: #fff;}

#footer .tellArea a img{ margin-bottom: 40px;}

#copyright{
	color:#fff;
	background-color:#333;
	margin: 0 auto;
	padding: 10px 0;
	text-align:center;}
	
#copyright p{
    margin: 0;
    padding: 0;
    color:#fff;}