/* ##### GENERAL CLASS ##### */
*, *:after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
}

body {
	color: #13508f;
	line-height: 2.8em;
	overflow-x: hidden;
	font-size:62.5%;
	font-family:Avenir,"Open Sans","Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
a{color: #065b91; font-size:1.4em;text-decoration:none;}
a:focus {outline: none;	text-decoration: none;}
a:hover {text-decoration: none;}
.iconmg{margin-right:3px;	margin-left:3px;}
iframe {border: 0;}
.no-margin{ margin:0;}

h1, h2, h3, h4{
	font-weight:bold;
	margin:0;
	padding:0;
}
h2{font-family: 'Roboto', sans-serif;}
ul{ margin:0; padding:0}
p{font-size:1.4em;	line-height:2.2;	margin:20px 0;}
.fa-mr{	margin-right:6px;}
.fa-ml{	margin-left:6px;}
.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mt0{margin-top:0 !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}
.mt80{margin-top:80px !important;}
.mb0{margin-bottom:0 !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}
.pt0{padding-top:0 !important;}
.pb0{padding-bottom:0 !important;}
wd100{width:100% !important;}


.section-content {padding: 70px 0;}
.section-title div span {
	display: inline-block;
	color: #7C7C7C;
	text-transform: uppercase;
}
.section-title h1 {
	text-align:center;
}

.section-title h1, .section-title h2, .section-title h3 {
	color: #13508f;
	display: inline-block;
}

#btn_scroll {
	position: absolute;
	left: 70px;	
	bottom: 70px;		
}
.section-title h1 i {
	font-style: normal;
	display: block;
}

.clear {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
}
.img-center {
	margin-left: auto;
	margin-right: auto;
}
.element-line {	margin-top: 70px;}
.br-sp { display:none; }
.red{color:#c30d23;}



/* ##### HEADER ##### */
header{ width:100%; padding:0 20px;}
header p{ line-height:1.6;}
header #logo{float:left; padding:10px 0 6px;}
header .logotxt{ font-size:1.2em; margin:0 0 4px 0; color:#666;}
header #head-contact{ float:right; padding:16px 0 0;}
header .tel{ display:inline-block; vertical-align:bottom;}
header .tel .txt1{font-size:1.2em;margin:0 0 4px;}
header .tel .txt2{ font-size:2.8em; font-weight:bold; margin:0; line-height:1;}
header .tel .txt2 span{ font-size:0.6em; padding-right:10px}
header .tel-btn{ display:none;}
header .contact{display:inline-block; vertical-align:bottom; padding-left:20px;}
header .contact a{ background-color:#13508f; color:#fff;font-weight:bold; text-align:center; margin:0 ;
display:block; width:170px; height:44px; padding-top:9px; padding-left:20px;position:relative; 
border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow:0px 3px 0px 0px rgba(95,125,158,0.35);
-webkit-box-shadow:0px 3px 0px 0px rgba(95,125,158,0.35);
}
header .contact a{height:30px\9;}
header .contact a:not(:target) {height:44px;/* IE9,10 */}

header .contact a:before{ content:""; background:url("../img/c-btn-icon_s.png"); width:22px; height:16px; position:absolute; top:13px; left:24px;}
header .contact a:hover{ top:2px;
box-shadow:0px 1px 0px 0px rgba(95,125,158,0.35);
-webkit-box-shadow:0px 1px 0px 0px rgba(95,125,158,0.35);}

/* ##### HOME SECTION ##### */

#container{
	width:100%;
	height:auto;
	padding:0;
	margin:0;
	clear:both;
}
#mvArea{
	width:100%;
	height:550px;
	margin:0;
	padding:0;
	position:relative;
}
#mvArea h2{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:120px; text-align:center;}

section{ width:100%; margin:0; padding:0;}
.inner{ width:960px; margin:0 auto; padding:80px 0;}
h2{ font-size:3.2em;}
 .sub-ttl{ font-size:1.6em; margin:10px 0 40px;}
#greeting ul.inline-block{letter-spacing: -0.5em;}
#greeting ul.inline-block li{letter-spacing: normal;}
#greeting .l{ display:inline-block; vertical-align:top;width:210px; margin:0; padding:0;}
#greeting .r{ display:inline-block; vertical-align:top; width:750px; margin:0; padding:0;}
#greeting h3{ font-size:2.0em;}

#about{ text-align:center; background-color:#efefef;}

#reason{ text-align:center;}
#reason ul.inline-block{letter-spacing: -0.5em;}
#reason ul.inline-block li{letter-spacing: normal;display:inline-block; width:32%; vertical-align:top;}
#reason ul.inline-block li.li02{ margin:0 2%;}
#reason ul.inline-block li h3{ font-size:1.8em; margin:20px auto;}
#reason ul.inline-block li p{ text-align:left;}

#flow{ text-align:center; background:url("../img/bg_wave.png") repeat;}
#flow h2{color:#fff;}
#flow .sub-ttl{color:#fff;}
#flow .box{ background-color:#fff; width:100%; border:solid 2px #fff; display:table;
box-shadow:5px 5px 0px 0px rgba(12,58,116,0.90);
-webkit-box-shadow:5px 5px 0px 0px rgba(12,58,116,0.90);}
#flow .num{ display:table-cell; background-color:#13508f; color:#fff; font-size:3.2em;font-family: 'Roboto', sans-serif; width:96px; text-align:center; vertical-align:middle;}
#flow h3{ display:table-cell; font-size:2.0em;vertical-align:middle; width:240px; padding-left:50px; text-align:left;}
#flow .txt{ display:table-cell;vertical-align:middle; width:auto; text-align:left; padding:20px 15px;}
#flow .arrow{ text-align:center; margin:12px auto 0;}
#flow .txt a{ font-size:1em; text-decoration:underline;}
#flow .txt a:hover{ text-decoration:none;}

#contact{ float:left; width:50%; text-align:center;}
#company{ float:right; width:50%; background-color:#003062; text-align:center;}
#company h2{ color:#fff;}
#company p{ color:#fff;}
.half{ padding:80px 0;}

#contact .txt{ margin:30px auto;}
#contact .tel{ font-size:2.8em; font-weight:bold; margin:0 auto; line-height:1; position:relative; width:398px; padding:16px 0; border-bottom:#13508f solid 2px; border-top:#13508f solid 2px;}
#contact .tel a{ font-size:1.0em;}
#contact .tel span{ font-size:0.6em; padding-right:10px}
#contact .tel:before{ content:""; background:url("../img/tel-icon.png"); width:33px; height:27px; position:relative; display:inline-block; margin:0 12px 0 0; top: 3px;}
#contact .c-btn a{ background-color:#13508f; color:#fff;font-weight:bold; text-align:center; margin:30px auto; font-size:1.8em;
display:block; width:398px; height:84px; padding-top:24px; padding-left:20px;position:relative;
border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow:0px 6px 0px 0px rgba(95,125,158,0.35);
-webkit-box-shadow:0px 6px 0px 0px rgba(95,125,158,0.35);}
#contact .c-btn a{height:60px\9;}
#contact .c-btn  a:not(:target) {height:84px;/* IE9,10 */}
#contact .c-btn a:before{ content:""; background:url("../img/c-btn-icon.png"); width:31px; height:23px; position:relative; display:inline-block; margin:0 12px 0 0; top: 4px;}
#contact .c-btn a:hover{ top:5px;
box-shadow:0px 1px 0px 0px rgba(95,125,158,0.35);
-webkit-box-shadow:0px 1px 0px 0px rgba(95,125,158,0.35);}

#company dl{ margin:30px auto; padding:0; text-align:center; color:#fff; width:340px; font-size:1.4em;}
#company dt{ clear:both; float:left; width:100px; padding:5px 0; margin:0; text-align:left;}
#company dd{ float:left; width:240px; padding:5px 0; margin:0; text-align:left;}

#maps{ clear:both;}
.maplink{width:100%;text-align:right;margin:0; padding-right:20px;}
a.maplink:hover{ text-decoration:underline;}


/* ##### FOOTER ##### */
footer {
	color:#ffffff;
	background-color:#001a35;
	padding:20px;
	display:table;
	width:100%;
}
footer .l{ display:table-cell; vertical-align:bottom; width:60%;}
footer .l .txt{ margin:0 0 10px;}
footer .l .address{ margin:0; line-height:1.5; padding-top:10px;}
footer .l .tel-txt{font-family: 'Roboto', sans-serif;}
footer .l .tel-num{font-family: 'Roboto', sans-serif; font-size:1.8em; padding-right:16px;}
footer .r{ display:table-cell; vertical-align:bottom; text-align:right; width:40%;}
footer .r p{ margin:0;}
.br-sp{ display:none;}

@media (max-width: 960px) {
	.inner{ width:100%; padding:80px 20px;}
	img{ width:100%; height:auto;}
	
	header .contact span{ display:none;}
	header .contact a { width:50px;}
	header .contact a:before { left:14px;}
	#mvArea h2 img{ max-width:812px;}
	h1 img{ max-width:280px}
	footer h2 img{ max-width:254px}
	.arrow img{ max-width:44px;}
	#mvArea h2 { width:80%;}

	#greeting .l{width:25%;}
	#greeting .r{width:75%;}
	
	#contact .tel{ width:340px;}
	#contact .c-btn a{ width:340px; }

	footer .l{ display: block; width:100%;}
	footer .r{ display: block; width:100%; text-align:center; margin-top:20px;}
}
@media (max-width: 768px) {
	header { padding:0 10px;}
	.inner{ width:100%; padding:40px 10px;}

	#greeting .l{ display:block; width:100%; text-align:center;}
	#greeting .r{ display:block; width:100%; margin-top:20px;}
	#about p{text-align:left;}

	#reason ul.inline-block li{display:block; width:100%;}
	#reason ul.inline-block li.li02{ margin:0;}
	
	#flow .num{ display:block; width:100%; margin:0;}
	#flow h3{ display:block;width:100%; text-align:center; padding-left:0; margin-top:30px;}
	#flow .txt{ display:block;width:100%; padding:0 15px;}

	#contact{ float:none; width:100%; padding:0 20px;}
	#company{ float:none; width:100%; padding:0 20px;}
	#contact .tel{ width:100%; max-width:340px;}
	#contact .c-btn a{ width:100%; max-width:340px; font-size: 1.6em; padding-left:0;}

	header #head-contact{ padding-right:10px;}
	header .contact{ padding-left:10px;}
	header .contact a:before{ top:0; left:0; right:0; bottom:0; margin:auto;}	
	header .tel{ display:none;}
	header .tel-btn{display:inline-block; vertical-align:bottom; padding-left:20px;}
	header .tel-btn a{ background-color:#13508f; color:#fff;font-weight:bold; text-align:center; margin:0 ;
	display:block; width:50px; height:44px; padding-top:9px; position:relative; 
	border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow:0px 3px 0px 0px rgba(95,125,158,0.35);
	-webkit-box-shadow:0px 3px 0px 0px rgba(95,125,158,0.35);
	}
	header .tel-btn a{height:30px\9;}
	header .tel-btn a:not(:target) {height:44px;/* IE9,10 */}
	
	header .tel-btn a:before{ content:""; background:url("../img/tel-icon_s.png"); width:22px; height:18px; position:absolute; 
	top:0; left:0; right:0; bottom:0; margin:auto;}	
}
@media (max-width: 480px) {
	.br-sp{ display:block;}
	header #logo{ width:65%;}
	header .logotxt{ display:none;}
	header h1{ padding-top:6px;}
	header #head-contact{ text-align:right; padding:10px 0;width:35%;}
	header .contact{ padding-left:5px;}
	header .tel-btn{ padding-left:5px;}
	header .tel-btn a{ width:40px; height:38px;}
	header .contact a{ width:40px; height:38px;}
	header .tel-btn a:not(:target) {height:38px;/* IE9,10 */}
	header .contact a:not(:target) {height:38px;/* IE9,10 */}
	#mvArea{ height:450px;}
	#mvArea h2 { width: 90%;}
	#company dl{ width:100%;}
	#company dt{ width:30%}
	#company dd{ width:70%;}
	footer .l .txt{ font-size:1.1em;}
	footer .l .address{ margin:20px 0 0; line-height:1.4;}
	footer .l .tel-num{font-size:1.4em;adding-right:0;}
}