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

#hero{
	background: url("../img/index/hero_pc.jpg") no-repeat top center fixed;
	background-size: cover;
	height: calc(100vh - 54px);
}
#hero .inner{}
#hero h1{
    opacity: 0;
}

#news{
    margin-bottom: 80px;
}
#news .inner{
    background: #333;
    padding: 30px 30px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#news h2{
    color: #ef821f;
    width: 4em;
    border-right: 1px solid #ef821f;
}
#news ul{
    width: calc(100% - 5em);
}
#news ul li{}
#news ul li time{
    display: block;
    margin-right: 1em;
    color: #ccc;
}

#content.top-page{}

#business-wrap{
    background: url("../img/common/bo_01.png") no-repeat top center;
    margin-bottom: 80px;
    }
.business-box{
}
.business-box .inner{display: flex;flex-wrap: wrap;justify-content: flex-start;}
.business-box .inner .business-text{
    width: 50%;
}
.business-box .inner .business-text h2{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
}
.business-box .inner .business-text h2 span{
    font-size: 16px;
    display: block;
    color: #ef821f;
    margin-bottom: 10px;
}
.business-box .inner .business-text h3{
    padding: 0 40px 20px 40px;
}
.business-box .inner .business-text p{}
.business-box .inner .business-text p a{
    display: block;
    text-align: center;
    color: #fff;
    background: url("../img/common/icon_arrow.svg") no-repeat 95% 15px #007751;
    background-size: 30px;
    margin: 0 40px;
    padding: 20px 0;
}
.business-box .inner .business-img{
    width: 50%;
    border-bottom: 10px solid #ef821f;
}
.business-box .inner .business-img p{
    line-height: 0;
}

#company-wrap{
    background: url("../img/index/info_bg.jpg") no-repeat;
    background-size: 100% auto;
    padding: 80px 0;
    margin-bottom: 120px;
}
.company-box{}
.company-box .inner{}
.company-box .inner h2{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
    color: #fff;
}
.company-box .inner h2 span{
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

.company-box .inner ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 0;
    margin: 0 0 -120px 0;
}
.company-box .inner ul li{
    width: 49%;
    box-shadow: 0 10px 30px -20px rgba(53, 47, 47, 0.6);
}
.company-box .inner ul li p{}
.company-box .inner ul li h3{
    background: url("../img/common/icon_arrow.svg") no-repeat 95% 20px #007751;
    background-size: 30px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    line-height: 1em;
    padding: 15px 0;
}
.company-box .inner ul li h3 span{
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
    line-height: 1em;
}
.company-box .inner ul li a{
    color: #fff;
}

#recruit-wrap{
    margin-bottom: 80px;
}
.recruit-box .inner{display: flex;flex-wrap: wrap;justify-content: space-between;}
.recruit-box .inner .recruit-text{
    width: 50%;
}
.recruit-box .inner .recruit-text h2{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
}
.recruit-box .inner .recruit-text h2 span{
    font-size: 16px;
    display: block;
    color: #ef821f;
    margin-bottom: 10px;
}
.recruit-box .inner .recruit-text h3{
    padding: 0 40px 20px 40px;
}
.recruit-box .inner .recruit-text p{}
.recruit-box .inner .recruit-text p a{
    display: block;
    text-align: center;
    color: #fff;
    background: url("../img/common/icon_arrow.svg") no-repeat 95% 15px #007751;
    background-size: 30px;
    margin: 0 40px;
    padding: 20px 0;
}
.recruit-box .inner .recruit-img{
    width: 50%;
    border-bottom: 10px solid #ef821f;
}
.recruit-box .inner .recruit-img p{
    line-height: 0;
}




#wrapper{position: static;}
#content{}
#mission-wrap{
	padding: 10px 0 100px 0;
	width: 100%;
}
#mission-wrap .business-box{
}
#mission-wrap .business-box .inner{
	display:flex;
	justify-content: space-between;
	padding: 100px 100px 0 100px;
}
#mission-wrap .business-box h2{width: 260px;}
#mission-wrap .business-box h3{text-align: right;margin-top: 20px;}
#mission-wrap .mission-btn{
	width: 400px !important;
	background: #000040 !important;
	position: relative !important;
	z-index: 2;
}
#mission-wrap .mission-btn .img{
	width:262px;
}
#mission-wrap .mission-btn h3{
	width:138px;
	padding: 40px 10px;
	line-height: 1.2em;
	font-size: 21px;
	text-align: center;
	margin: 0;
}
#mission-wrap .mission-btn h3 span{
	display: block;
	color: #666;
	font-size: 16px;
}
#mission-wrap .mission-btn h3:after{
	content:"";
	display:block;
	width: 20px;
	height: 20px;
	background: url("../img/common/icon_arrow1.png") no-repeat bottom;
	background-size: contain;
	margin: 20px auto 0 auto;
}
#mission-wrap .mission-btn a{
	color:#fff;
	display:flex;
	line-height: 0;
}
#mission-wrap .customer-box{
    margin: -40px 0 0 0;
}
#mission-wrap .customer-box .inner{overflow: hidden;}
#mission-wrap .customer-box .inner div.customer-bg{
	width:100%;
	position: absolute;
	background: #e7ecf6;
	right: 50%;
	padding: 50px 50px 50px 50px;
}
#mission-wrap .customer-box .inner div.customer-bg h2{
	float:right;
	display:block;
	color:#0068BB;
	width: 350px;
	font-size: 21px;
	margin-bottom: 10px;
}
#mission-wrap .customer-box .inner div.customer-bg h3{
	float:right;
	display:block;
	clear: both;
	width: 350px;
	line-height: 1.6em;
	padding-left: 10px;
}
#mission-wrap .customer-box .inner div.customer-btn{
	float:right;
	margin: 100px 50px 0 0;
}
#vision-wrap{
	background: url("../img/index/vision_bg.jpg") no-repeat bottom;
	background-size: cover;
	padding: 110px 0 100px 0;
}
#vision-wrap h2{width: 224px;margin: 0 auto;}
#vision-wrap h3{
	color: #fff;
	font-size: 32px;
	text-align: center;
	margin: 40px 0 40px 0;
}
#vision-wrap h4{
	color: #fff;
	font-size: 16px;
	margin-bottom: 40px;
	text-align: center;
}
#vision-wrap p{
}
#vision-wrap p a{
	display:block;
	width:50%;
	margin:0 auto;
	text-align:center;
	padding: 20px 20px 20px 20px;
	background: url("../img/common/icon_arrow2.png") no-repeat 95% #fff;
	background-size: 15px;
	color:#006ec4;
	
}
#works-wrap{
	background: url("../img/index/works_bg.jpg") no-repeat center;
	padding: 100px 0 100px 0;
	position: relative;
	overflow: hidden;
}
#works-wrap{
}
#works-wrap h2{width: 167px;margin: 0 auto;}
#works-wrap h3{text-align: center;margin: 20px 0 40px 0;}
#works-wrap h4{
}
#works-wrap .works-box{
	width:100%;
	position: absolute;
	background: #e7ecf6;
	left: 20%;
	padding: 40px 40px 40px 40px;
}
#works-wrap .works-box ul{display: flex;flex-wrap: wrap;justify-content: space-between;width: 720px;}
#works-wrap .works-box ul li{
	width: 210px;
	margin-bottom: 10px;
}
#works-wrap .works-box ul li{
}
#works-wrap .works-box ul li a{
	background: url("../img/common/icon_arrow2.png") no-repeat 190px;
	background-size: 10px;
	padding: 5px 20px 5px 5px;
	color: #333;
	display: block;
	border-bottom: 1px solid #666;
	font-size: 14px;
}
#works-wrap .works-btn{
	clear:both;
}
#works-wrap .works-btn a{
	display:block;
	width:50%;
	margin: 320px auto 0 auto;
	text-align:center;
	color: #fff;
	padding: 20px 20px 20px 20px;
	background: url("../img/common/icon_arrow1.png") no-repeat 95% #003295;
	background-size: 15px;
}
#office-wrap{
	background: url("../img/index/office_bg.jpg") no-repeat bottom;
	background-size: cover;
	background-attachment: fixed;
	padding: 100px 0 0px 0;
}
#office-wrap h2{width: 215px;margin: 0 auto;}
#office-wrap h3{line-height: 1em;padding: 20px 0px 20px 0;text-align: center;color: #fff;}
#office-wrap h3 span{
	display:block;
	font-size:12px
}
#office-wrap ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
#office-wrap ul li{width: 470px;background: #000040;line-height: 0;}

#contact-wrap{
	background: url("../img/index/contact_bg.png") no-repeat center center;
	background-size: cover;
	margin-top: -50px;
	padding: 100px 0 90px 0;
}
#contact-wrap h2{
    width: 199px;
    margin: 0 auto;
}
#contact-wrap h3{
    text-align: center;
    margin: 40px 0 40px 0;
}
#contact-wrap ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
#contact-wrap ul li{
	width: 470px;
	padding: 120px 0 40px 0;
	background: #fff;
	text-align: center;
}
#contact-wrap ul li:nth-child(1){
	background: url("../img/common/icon_tel.png") no-repeat center 20px #fff;
	background-size: auto 40%;
}
#contact-wrap ul li:nth-child(2){
	background: url("../img/common/icon_mail.png") no-repeat center 20px #fff;
	background-size: auto 40%;

}
#contact-wrap ul li a{font-size: 32px;color: #003295;}
#contact-wrap ul li p{font-size: 32px;color: #666;}

#map-wrap{}
#map-wrap iframe{
	width: 100%;
}


@media print, screen and (max-width: 767px){
    #hero{
        background: url("../img/index/hero_pc.jpg") no-repeat 10% center;
        background-size: cover;
        height: calc(100vh - 54px);
    }

#news ul li time{
    display: block;
}
#business-wrap{
    background: url("../img/common/bo_01.png") no-repeat top center;
    margin-bottom: 80px;
    }
.business-box{
}
.business-box .inner{display: block;flex-wrap: wrap;justify-content: flex-start;}
.business-box .inner .business-text{
    width: 100%;
}
.business-box .inner .business-text h2{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
}
.business-box .inner .business-text h2 span{
    font-size: 16px;
    display: block;
    color: #ef821f;
    margin-bottom: 10px;
}
.business-box .inner .business-text h3{
    padding: 0 40px 20px 40px;
}
.business-box .inner .business-text p{}
.business-box .inner .business-text p a{
    display: block;
    text-align: center;
    color: #fff;
    background: url("../img/common/icon_arrow.svg") no-repeat 95% 15px #007751;
    background-size: 30px;
    margin: 0 40px;
    padding: 20px 0;
}
.business-box .inner .business-img{
    width: 90%;
    margin: 4% auto 0 auto;
}
.business-box .inner .business-img p{
    line-height: 0;
}

#company-wrap{
    background-size: cover;
}
.company-box{}
.company-box .inner{}
.company-box .inner h2{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
    color: #fff;
}
.company-box .inner h2 span{
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

.company-box .inner ul{
    display: inline-block;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 0;
    margin: 0 0 -120px 0;
}
.company-box .inner ul li{
    width: 80%;
    margin: 0 auto 4% auto;
    box-shadow: 0 10px 30px -20px rgba(53, 47, 47, 0.6);
}
.company-box .inner ul li p{}
.company-box .inner ul li h3{
    background: url("../img/common/icon_arrow.svg") no-repeat 95% 20px #007751;
    background-size: 30px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    line-height: 1em;
    padding: 15px 0;
}
.company-box .inner ul li h3 span{
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
    line-height: 1em;
}
.company-box .inner ul li a{
    color: #fff;
}

#recruit-wrap{
    margin-bottom: 80px;
}
.recruit-box .inner{display: block;flex-wrap: wrap;justify-content: space-between;}
.recruit-box .inner .recruit-text{
    width: 100%;
}
.recruit-box .inner .recruit-text h2{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
}
.recruit-box .inner .recruit-text h2 span{
    font-size: 16px;
    display: block;
    color: #ef821f;
    margin-bottom: 10px;
}
.recruit-box .inner .recruit-text h3{
    padding: 0 40px 20px 40px;
}
.recruit-box .inner .recruit-text p{}
.recruit-box .inner .recruit-text p a{
    display: block;
    text-align: center;
    color: #fff;
    background: url("../img/common/icon_arrow.svg") no-repeat 95% 15px #007751;
    background-size: 30px;
    margin: 0 40px;
    padding: 20px 0;
}
.recruit-box .inner .recruit-img{
    width: 90%;
    margin: 4% auto 0 auto;
}
.recruit-box .inner .recruit-img p{
    line-height: 0;
}



header{
}
header #hero{
}
header #hero h2{width: 80%;margin: 0 auto;}
header #hero h3{text-align: center;}
header #hero{
}
header #hero .inner{position: relative;}
header #news{}
header #news{}
header #news{}
header #news{}
header #news{
    width: 100%;
}
header #news .inner{
}
header #news .inner h2{width: 30%;}
header #news .inner ul{
	width: 70%;
}
header #news .inner ul li{
}
header #news .inner ul li time{
}

#wrapper{position: static;}
#content{}
#mission-wrap{
	width: 100%;
	padding: 5% 0 10% 0;
}
#mission-wrap .business-box{
}
#mission-wrap .business-box .inner{display: inherit;padding: 0 2% 0 2%;}
#mission-wrap .business-box h2{
	width: 80%;
	margin: 0 auto;
}
#mission-wrap .business-box h3{
    text-align: center;
    margin-top: 2%;
    margin-bottom: 6%;
}
#mission-wrap .mission-btn{
	width: 90% !important;
	margin: 0 auto;
}
#mission-wrap .mission-btn .img{width: 60%;}
#mission-wrap .mission-btn h3{width: 40%;padding: 4% 0 0 0;}
#mission-wrap .mission-btn h3 span{
}
#mission-wrap .mission-btn h3:after{
}
#mission-wrap .mission-btn a{
}
#mission-wrap .customer-box{margin: -5% 0 0 0;}
#mission-wrap .customer-box .inner{
    padding: 0 2% 0 2%;
}
#mission-wrap .customer-box .inner div.customer-bg{width: 100%;position: relative;right: 0;padding: 10% 10% 10% 10%;overflow: hidden;}
#mission-wrap .customer-box .inner div.customer-bg h2{width: 100%;text-align: center;}
#mission-wrap .customer-box .inner div.customer-bg h3{width: 100%;padding: 0;}
#mission-wrap .customer-box .inner div.customer-btn{float: none;margin: -5% auto 0 auto;}
#vision-wrap{padding: 10% 2%;}
#vision-wrap h2{width: 60%;}
#vision-wrap h3{font-size: 28px;line-height: 1.4em;margin: 4% 0 4% 0;}
#vision-wrap h4{margin-bottom: 4%;}
#vision-wrap p{
}
#vision-wrap p a{width: 80%;}
#works-wrap{
}
#works-wrap{padding: 10% 2%;}
#works-wrap h2{
    width: 40%;
}
#works-wrap h3{
    margin: 2% 0 4% 0;
}
#works-wrap h4{
}
#works-wrap .works-box{
	width:100%;
	padding: 5%;
	position: relative;
	left: 0;
}
#works-wrap .works-box ul{
	width: 100%;
}
#works-wrap .works-box ul li{
}
#works-wrap .works-box ul li{width: 100%;}
#works-wrap .works-box ul li a{background: url(../img/common/icon_arrow2.png) no-repeat 95%;background-size: 10px;}
#works-wrap .works-btn{
}
#works-wrap .works-btn a{margin: 5% auto 0 auto;width: 80%;}
#office-wrap{padding: 10% 2%;}
#office-wrap h2{
    width: 60%;
}
#office-wrap h3{
    padding: 2% 0 4%;
}
#office-wrap ul{
    width: 90%;
    margin: 0 auto;
}
#office-wrap ul li{
	width: 100%;
	margin-bottom: 4%;
}

#contact-wrap{margin-top: 0;padding: 10% 2%;}
#contact-wrap h2{width: 60%;}
#contact-wrap h3{margin: 4% 0 4% 0;}
#contact-wrap ul{
    width: 90%;
    margin: auto;
}
#contact-wrap ul li{
	margin-bottom: 4%;
	width: 100%;
}
#contact-wrap ul li:nth-child(1){
}
#contact-wrap ul li:nth-child(2){

}
#contact-wrap ul li a{
}
#contact-wrap ul li p{
}

}