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

#hero{
	background: url("../img/company/hero_bg.jpg") no-repeat center center;
	background-size: cover;
	height: 300px;
}
#hero .inner{}
#hero h1{
    /* opacity: 0; */
    font-size: 32px;
    text-align: center;
    line-height: 1.4em;
    margin: 0;
    padding: 80px 0 0 0;
    font-weight: bold;
    color: #fff;
}

#content.company-page{
    padding: 40px 0 0 0;
}

#company-wrap{
    /* margin-bottom: 80px; */
}

#company-wrap h2{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
    width: 100%;
}
#company-wrap h2 span{
    font-size: 16px;
    display: block;
    color: #ef821f;
    margin-bottom: 10px;
}

.company-box{
	overflow: hidden;
	clear: both;
	margin-bottom: 0;
}

.company-box.representative{
	overflow: hidden;
	padding: 0 0 80px 0;
	margin-bottom: 20px;
	box-shadow: 0 10px 30px -20px rgba(53, 47, 47, 0.6);
}
.company-box.representative .representative-img{
    float: right;
    width: 20%;
}
.company-box.representative .representative-text{
    float: right;
    width: 80%;
    padding: 0 40px 0 0;
}
.company-box.representative .representative-text h3{font-size: 18px;margin-bottom: 10px;}
.company-box.representative .representative-text h4{line-height: 1.4em;padding: 0 0 10px 10px;}
.company-box.representative .representative-text p{width: 100px;float: right;}

.company-box.company{
	background: url("../img/company/overview_bg1.jpg") no-repeat bottom center;
	background-size: 100% auto;
	padding: 60px 0 80px 0;
}
.company-box.company dl{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.company-box.company dt{
    width: 20%;
    margin-bottom: 20px;
}
.company-box.company dd{
    width: 80%;
    margin-bottom: 20px;
}
.company-box.company dd p{}
.company-box.company dd p span{}
.company-box.company dd ul{
    margin-left: 20px;
}
.company-box.company dd li{
    list-style-type: square;
    position: relative;
    margin-top: 10px;
}
.company-box.company dd li:first-child{/* padding-left: 130px; *//* margin-top: 0; */}
.company-box.company dd li:first-child span{position: absolute;left: 0;}

.company-box.history{
	padding: 80px 0;
}
.company-box.history .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.company-box.history .history-text{
	width: 80%;
}
.company-box.history .history-img{
	width: 20%;
}
.company-box.history dl{
    width: 90%;
    margin: 0 0 20px 0;
    padding: 20px 20px;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-shadow: 0 10px 30px -20px rgba(53, 47, 47, 0.6);
}
.company-box.history dt{
    width: 20%;
    margin-bottom: 10px;
}
.company-box.history dd{
    width: 80%;
    margin-bottom: 10px;
}

.company-box.client{background: #f5f5f5;padding: 40px 0 80px 0;}
.company-box.client ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
.company-box.client ul li{width: calc(49% - 20px);list-style-type: square;margin-left: 20px;}

@media print, screen and (max-width: 767px){

.company-box{
	overflow: hidden;
	clear: both;
	margin-bottom: 0;
}

.company-box.representative{
	overflow: hidden;
	padding: 0 0 80px 0;
	margin-bottom: 20px;
	box-shadow: 0 10px 30px -20px rgba(53, 47, 47, 0.6);
}
.company-box.representative .representative-img{
    float: none;
    width: 70%;
    margin: 0 auto 4% auto;
}
.company-box.representative .representative-text{
    float: none;
    width: 90%;
    padding: 0 10px;
    margin: 0 auto;
}
.company-box.representative .representative-text h3{font-size: 18px;margin-bottom: 10px;}
.company-box.representative .representative-text h4{line-height: 1.4em;padding: 0 0 10px 10px;}
.company-box.representative .representative-text p{width: 100px;float: right;}

.company-box.company{
	background: url("../img/company/overview_bg1.jpg") no-repeat bottom center;
	background-size: 100% auto;
	padding: 60px 0 80px 0;
}
.company-box.company dl{
    width: 90%;
    margin: auto;
}
.company-box.company dt{
    width: 100%;
    margin-bottom: 2%;
}
.company-box.company dd{
    width: 100%;
    margin-bottom: 5%;
    border-bottom: 1px solid #ccc;
    padding: 0 5% 5% 5%;
}
.company-box.company dd p{}
.company-box.company dd p span{}
.company-box.company dd ul{
    margin-left: 20px;
}
.company-box.company dd li{
    list-style-type: square;
    position: relative;
    margin-top: 10px;
}
.company-box.company dd li:first-child{/* padding-left: 130px; *//* margin-top: 0; */}
.company-box.company dd li:first-child span{position: absolute;left: 0;}

.company-box.history{
	padding: 80px 0;
}
.company-box.history .inner{
    display: block;
    flex-wrap: wrap;
    justify-content: space-between;
}
.company-box.history .history-text{
	width: 90%;
	margin: 0 auto;
}
.company-box.history .history-img{
	width: 40%;
	float: right;
}
.company-box.history dl{
    width: 100%;
    margin: 0 auto 20px auto;
    padding: 20px 20px;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-shadow: 0 10px 30px -20px rgba(53, 47, 47, 0.6);
}
.company-box.history dt{
    width: 100%;
    margin-bottom: 2%;
}
.company-box.history dd{
    width: 90%;
    margin-bottom: 4%;
    margin-left: 5%;
}

.company-box.client{background: #f5f5f5;padding: 40px 0 80px 0;}
.company-box.client ul{display: block;width: 90%;margin: auto;}
.company-box.client ul li{width: 100%;list-style-type: square;margin-left: 5%;margin-bottom: 2%;}




	
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 .company-box{
}
#mission-wrap .company-box .inner{display: inherit;padding: 0 2% 0 2%;}
#mission-wrap .company-box h2{
	width: 80%;
	margin: 0 auto;
}
#mission-wrap .company-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{
}

}