@import url('https://fonts.googleapis.com/css?family=Lato:400,500,700,900');
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
	font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #313131;
	background: #dee4e7;
}
#wrap{
	max-width: 1600px;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0px 1px 0px 0px #dddddd;
}
/*header*/
header{
	position:fixed;
	top:0;
	left:0;
	width: 100%;
	z-index: 10;
}
header .outer{
	max-width: 1600px;
	margin: 0 auto;
	background: #fff;
}
header .inner{
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 16px;
}
header ul{
	position: absolute;
	top: 40px;
	right: 15px;
}
header ul .tel{
	margin-right: 10px;
}
header ul li a{
	display:block;
	width:320px;
	box-sizing:border-box;
}
header ul .tel a{
	padding:12px 14px 4px 70px;
	background:url(../images/dummy_green.png) no-repeat 20px center/31px 41px #eceff1;
}
header ul .contact a{
	min-height: 72px;
	padding: 15px 37px 0 77px;
	color: #fff;
	background: url(../images/dummy_white.png) no-repeat 20px center/38px 28px #c62828;
}
header ul .tel span{
	display: block;
	color: #707070;
	font-size: 14px;
	font-weight: 400;
	line-height: 28px;
	font-family: 'Lato';
}
header ul li .green{
	color: #22b26a;
	font-size: 28px;
	font-weight: 900;
}
header ul .contact span{
	display: inline-block;
	margin-bottom: 10px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
/*main*/
main{
	margin-top: 95px;
	text-align: center;
	line-height: 1.67;
}
main #mv{
	position: relative;
	min-height: 464px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	font-family: 'Noto Sans Japanese', sans-serif;
	overflow: hidden;
}
main #mv .bg{
	position: absolute;
	left: 0;
	padding-top: 64px;
	width: 100%;
	height: 100%;
	background: url(../images/top.jpg) center;
	background-size: cover;
}
main #mv .inner{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0 24px;
	transform: translateY(-50%);
}
main #mv .inner .h{
	margin-bottom: 16px;
	font-size: 30px;
}
main #mv .inner h2{
	font-size: 36px;
	font-weight: 900;
}
/*lead-block*/
.lead-block{
	max-width: 980px;
	margin: 0 auto;
	padding: 60px 19px 40px;
	font-size: 20px;
	font-weight: 700;
}
.lead-block:after{
	content: "";
	display: block;
	width: 88px;
	height: 8px;
	margin: 30px auto 0;
	background: #42a5f5;
}
.lead-block h2{
	color: #0d47a1;
	font-size: 36px;
	font-weight: 900;
}
/*slide-area*/
#slide-area .guide{
	background: #0d47a1;
	padding: 15px 24px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	font-family: 'Noto Sans Japanese', sans-serif;
}
#slide-area .item{
	position: relative;
	min-height: 240px;
	overflow: hidden;
}
#slide-area .lead{
	min-height: 240px;
	background-color: rgba(13, 71, 161, 0.5);
}
#slide-area .lead p{
	color: #ffffff;
	font-size: 28px;
	font-weight: 900;
}
#slide-area .item-1 .lead{
	opacity: 0;
	position: absolute;
	top: 0;
	right: -50%;
	width: 50%;
	transform: skewX(45deg);
	transform-origin: 100% 0;
	transition: all 0.6s ease;
}
#slide-area .item-2 .lead{
	opacity: 0;
	position: absolute;
	top: 0;
	left: -50%;
	width: 50%;
	transform: skewX(-45deg);
	transform-origin: 0 0;
	transition: all 0.6s ease;
}
#slide-area .item-3 .lead{
	opacity: 0;
	position: absolute;
	top: 0;
	right: -50%;
	width: 50%;
	transform: skewX(45deg);
	transform-origin: 100% 0;
	transition: all 0.6s ease;
}
#slide-area .item-1 .on,
#slide-area .item-3 .on{
	opacity: 1;
	right: 0;
}
#slide-area .item-2 .on{
	opacity: 1;
	left: 0;
}
#slide-area .item-1 {
	background: url(../images/item1.jpg) no-repeat center;
	background-size: cover;
}
#slide-area .item-2 {
	background: url(../images/image1.jpg) no-repeat center;
	background-size: cover;
}
#slide-area .item-3 {
	background: url(../images/image2.jpg) no-repeat center;
	background-size: cover;
}
#slide-area .item-1 .lead p{
	padding: 77px 0 0 177px;
	text-align: left;
	transform: skewX(-45deg);
	transform-origin: 100% 0;
}
#slide-area .item-2 .lead p{
	padding: 102px 177px 0 0;
	text-align: right;
	transform: skewX(45deg);
	transform-origin: 0 0;
}
#slide-area .item-3 .lead p{
	padding: 102px 0 0 177px;
	text-align: left;
	transform: skewX(-45deg);
	transform-origin: 100% 0;
}

/*service*/
#service .list-1{
	background: #062350;
}
#service .inner{
	max-width: 980px;
	margin: 0 auto;
	padding: 60px 0;
}
#service h3{
	margin-bottom: 24px;
	color: #fff;
	font-size: 36px;
	font-weight: 900;
}
#service .col-3 p{
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}
#service .col-3 .circle{
	position: relative;
	margin: 0 auto 24px;
	width: 168px;
	height: 168px;
	border-radius: 50%;
}
#service .col-3 .circle img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#service .col-3 ul{
	display: flex;
	margin-top: 36px;
}
#service .col-3 ul li{
	width: 33.3%;
	margin-right: 28px;
}
#service .col-3 ul li:last-child{
	margin-right: 0;
}
#service .list-1 .circle{
	background: #1565c0;
	opacity: 0;
	transform: translateY(-50px);
	transition: 0.75s ease;
}
#service .list-1 li:nth-child(2) .circle{
	transition-delay:0.1s;
}
#service .list-1 li:last-child .circle{
	transition-delay: 0.2s;
}
#service .list-1 .on{
	opacity: 1;
	transform: translateY(0);
}
#service .list-2{
	position: relative;
	padding-top: 34px;
	background: #0d47a1;
}
#service .list-2:before{
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -46px;
	border-left: 46px solid transparent;
	border-right: 46px solid transparent;
	border-top: 34px solid #062350;
}
#service .list-2 .circle{
	opacity: 0;
	transform: rotateY(-180deg);
	transition: 0.8s ease;
	background: #ffab00;
}
#service .list-2 li:nth-child(2) .circle{
	transition-delay: 0.1s;
}
#service .list-2 li:last-child .circle{
	transition-delay: 0.2s;
}
#service .list-2 .on{
	opacity: 1;
	transform: rotateY(0deg);
}
/*special*/
#special .lead-outer{
	padding: 0 24px 32px;
}
#special p{
	font-size: 18px;
	font-weight:700;
}
#special .h{
	display: inline-block;
	margin: 0 auto 17px;
	padding: 0 32px;
	border-radius: 8px;
	background-color: #42a5f5;
	color: #fff;
}
#special .item{
	position: relative;
	overflow: hidden;
}
#special .overlay{
	opacity: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	position: absolute;
	top: 200px;
	left: 0;
	width: 50%;
	height: 100%;
	background: rgba(245,247,251,0.5);
	text-align: left;
	transition: all 0.4s ease;
}
#special .item .overlay .inner{
	max-width: 560px;
	margin: 0 auto;
	box-sizing: border-box;
}
#special .item .hd{
	margin-bottom: 16px;
	color: #0d47a1;
	font-size: 32px;
	font-weight: 900;
	line-height: 1.5;
}
#special .item .img-container{
	display: flex;
	font-size: 0;
}
#special .item .img-container .img{
	width: 50%;
}
#special .item .overlay.on{
	opacity: 1;
	top: 0;
}
#special .item-2 .overlay{
	left: auto;
	right: 0;
}
/*contact*/
#contact{
	padding-bottom: 60px;
}
#contact ul{
	display: flex;
	max-width: 1280px;
	margin: 0 auto 60px;
}
#contact ul li{
	width: 33.3%;
	margin-right: 40px;
}
#contact ul li:last-child{
	margin: 0;
}
#contact ul li .box{
	max-width: 400px;
	margin-top: 20px;
	box-sizing: border-box;
}
#contact ul li .box span{
	font-family: 'Lato';
	color: #22b26a !important;
	font-size: 30px;
	font-weight: 900;
	line-height: 40px;
}
#contact ul li .box .note{
	color: #707070;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	font-family: 'Noto Sans Japanese', sans-serif;
}
#contact ul li:first-child .box{
	height: 160px;
	padding-top: 18px;
	border: 4px solid #22b26a;
	text-align: left;
	font-family: 'Lato', sans-serif;
}
#contact ul li:nth-child(2) .box{
	border: 4px solid #22b26a;
	line-height: 152px;
	font-family: 'Lato';
}
#contact ul li:nth-child(2) .box a{
	color: #22b26a;
	font-size: 24px;
	font-weight: 900;
}
#contact ul li:last-child .box a{
	display: block;
	background: #c62828;
	background-size: auto auto;
	background-size: 24px 18px;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 160px;
}
#contact ul li:last-child .box .ico{
	display: inline-block;
	width: 24px;
	margin-right: 10px;
	padding-left: 0;
}
#contact ul li:last-child .box .ico img{
	vertical-align: middle;
}
#contact .map-area .map a{
	margin-left: 30px;
}
#contact .map-area .map a:before{
	display: inline-block;
	content: "";
	padding-right: 2px;
	width: 0;
	height: 0;
}
#contact p{
	color: #313131;
	font-size: 20px;
	font-weight: 700;
}

/*performance-area*/
#performance-area{
	padding-bottom: 60px;
	background: #f5f7f8;
}
#performance-area .top{
	display: inline-block;
	margin-bottom: 5px;
	padding: 0 24px;
	background: #4a75b9;
	border-radius: 8px;
	color: #fff;
}
#performance-area .inner{
	max-width: 980px;
	margin: 0 auto;
}
#performance-area .inner p{
	color: #313131;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 55px;
}
#performance-area .inner h3 {
	margin-bottom: 30px;
	color: #313131;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}
#performance-area .inner .min{
	font-size: 13px;
	font-weight: 400;
}
#performance-area .inner .client h4{
	background: #4a75b9;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	line-height: 48px;
}
#performance-area .inner .client ul{
	padding: 30px 0 40px 0;
	-webkit-column-count: 3;
	-webkit-column-gap: 28px;
	column-count: 3;
	column-gap: 28px;
	text-align: left;
}
#performance-area .inner .client ul li{
	margin-bottom: 8px;
	font-size: 14px;
}
#performance-area .inner .client .note{
	color: #0d47a1;
	margin-bottom: 0;
}

/*footer*/
footer{
	padding: 0 24px;
	background: #313131;
}
footer .inner{
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding: 30px 0;
}
footer .inner ul{
	max-width: 980px;
	margin: 0 auto;
}
footer .inner ul li{
	position: relative;
	display: inline-block;
	margin-right: 47px;
	padding-left: 15px;
	color: #fff;
	font-size: 13px;
}
footer ul li:first-child::before,
footer ul li:nth-child(2)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 50%;
}
footer ul li:first-child::after,
footer ul li:nth-child(2)::after{
	content: "";
	position: absolute;
	top: 3px;
	left: 5px;
	height: 0;
	width: 0;
	border: 3px solid transparent;
	border-left: 4px solid #313131;
}
footer ul li:nth-child(3)::before{
	content: "";
	position: absolute;
	top: 3px;
	left: 5px;
	height: 0;
	width: 0;
	border: 3px solid transparent;
	border-left: 4px solid #fff;
}
footer .inner .copy{
	position: absolute;
	top: 50%;
	right: 0;
	float: right;
	margin-top: -9px;
	color: #fff;
}
footer a{
	color: #fff;
}
/*bttop*/
.btTop{
	opacity: 0.6;
	position: fixed;
	z-index: 8000;
	bottom: -100px;
	right: 56px;
	width: 56px;
	height: 56px;
	background: #42a5f5;
	cursor: pointer;
	transition: all 0.3s ease;
}
.btTop.on{
	bottom: 56px;
}
.btTop:after{
	content: "";
	display: block;
	position: absolute;
	top: 38%;
	left: 32%;
	width: 16px;
	height: 16px;
	border-top: 4px solid #fff;
	border-left: 4px solid #fff;
	-webkit-transform-origin: center center;
	-webkit-transform: rotate(45deg);
	transform-origin: center center;
	transform: rotate(45deg);
}
/*img*/
img{
	max-width: 100%;
}
/*flex*/
.flex{
	display:flex;
}
.al-ce{
	align-items:center;
}
.ju-ce{
	justify-content:center;
}
/*font*/
.s12{
	font-size: 12px!important;
}
.s17{
	font-size: 17px !important;
	font-weight: 900 !important;
}
.s20{
	font-size: 20px!important;
}
.s30{
	font-size: 30px;
}
/*float*/
.fl_l{
	float: left;
}
.fl_r{
	float: right;
}

p.resizeimage img { width: 60%; }