@charset "utf-8";
/* CSS Document */
/* -- common ----------------------------------------------------*/
.page .top {
	position: relative;
	margin: 0 0 215px;
}
.page .top .bg{
    width: 60%;
    background: #568531;
    padding: 180px 0 0;
    position: absolute;
    bottom: -100px;
   	box-shadow: 15px 15px rgba(86, 133, 49, 0.5);
}
.page .top .bg ul{
	color: #fff;
	display: flex;
	z-index: 1;
	position: absolute;
	top: 100px;
	left: 20px;
	margin:0;
	padding:0;
}
.page .top .bg ul li{

}
.page .top .bg ul li:before{
	font-family: "Font Awesome 5 Free";
  	content: '\f105';
  	font-weight: 900;
  	padding: 0 5px;
}
.page .top .bg ul li a{
	display: inherit;
}
.page .top .bg ul li a:hover{
	color: #93A047;
}
.page .top .bg ul li:first-child:before{
	display: none;
}
.page .top .page-img .bg ul li{
	padding: 0 10px 0 0;
}
.page .top .bg-img{
	width: 100%;
	padding: 350px 0 0;
	position: relative;
}
.page .top .bg-img .text{
	width: 250px;
	height: 180px;
	background: rgba(86, 133, 49, 0.8);
	position: absolute;
	top: 50%;
	left: 0;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	margin:0;
	padding:0;
}
.page .top .bg-img .text h2{
	color: #fff;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 20%;
	-ms-transform: translate(-20%,-50%);
	-webkit-transform: translate(-20%,-50%);
	transform: translate(-20%,-50%);
	margin:0;
	padding:0;

}
.page .top .bg-img .text h2 span{
	display: block;
	font-size: 14px;
}
.page .content{
	margin: 200px 0 0;
	padding: 0 10px;

}
.page .content .h2-bg{
	background:#568531;
	padding: 15px 25px;
	transform: skewX( -25deg);
	-moz-transform: skewX( -25deg);
	-webkit-transform:skewX( -25deg);
	width: 95%;
	max-width: 1170px;
	margin: auto;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}
.page .content .h2-bg h2{
	transform: skewX( 25deg);
	-moz-transform: skewX( 25deg);
	-webkit-transform:skewX( 25deg);
}
.page .content .block{
	width: 100%;
    max-width: 1150px;
    margin: auto;
}
.page .content .block-w{
	width: 100%;
    max-width: 1200px;
    margin: auto;
}

/* -- company ----------------------------------------------------*/
.page .company .bg-img {
	background: url(../img/bg/company.jpg);
	background-position: center ;
	background-size: cover;
	background-repeat: no-repeat;
}
.page .company .content{
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 0 10px;
}
.page .company .content .box{
	margin: 50px auto 0;
}
.page .company .content .box .h2-bg#coh5{
	margin-top: 50px;
}
.page .company .content .box .flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 30px 0 0 ;
}
.page .company .content .box .flex .img{
	width: 15%;
}
.page .company .content .box .flex .img img{
	width: 100%;
}
.page .company .content .box .flex .img p{
	margin: 5px 0 0;
	line-height: 30px;
}
.page .company .content .box .flex .text{
	width: 80%;
	line-height: 30px;
}

.page .company .content .box ul{
	margin: 30px 0 0;
	line-height: 30px;
}
.page .company .content .box dl{
	display: flex;
	flex-wrap: wrap;
    margin: -1px auto 0;
    line-height: 30px;
}
.page .company .content .box dl.first{
	margin: 30px auto 0;
}
.page .company .content .box dl a:hover{
	color: #568531;
	text-decoration: underline;
}
.page .company .content .box dt{
	width: 25%;
	background: #F6F6F6;
	border: 1px solid #ccc;
	padding: 20px;
}
.page .company .content .box dd{
	width: 75%;
	border: 1px solid #ccc;
	padding: 20px;
	margin: 0 0 0 -1px;
}
.page .company .content .box .map{
    margin: 30px auto 0;
    height: 400px;
}
/* -- business ----------------------------------------------------*/
.page .business .bg-img {
	background: url(../img/bg/business.jpg);
	background-position: center ;
	background-size: cover;
	background-repeat: no-repeat;
}
.page .business .content {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 10px;
}
.page .business .flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.page .business .box{
	margin: 50px auto 0;
}
.page .business .flex .box{
	width: 48%;
}
.page .business .block-w .box[aria-hidden="true"]{
	visibility: hidden;
	pointer-events: none;
}
.page .business .flex .box.b01{
	margin: 0;
}
.page .business .flex .box.b01 .img{
	margin: 30px auto 0;
	width: 60%;

}

.page .business .flex .box.b01 .text{
	margin: 30px 0 0;
	line-height: 30px;
	padding: 0 10px;
}
.page .business .box.b02 .text,
.page .business .box.b04 .text{
	width: 100%;
	margin: 30px 0 0;
	line-height: 30px;
	padding: 0 10px;
}
.page .business .box.b02 .flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 50px 0 0;
	align-items: center;
}
.page .business .box.b02 .img{
	width: 40%;
}
.page .business .box.b02 .list{
	width: 50%;
}
.page .business .box.b02 .list dl{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 20px 0 0;
	font-weight: bold;
}
.page .business .box.b02 .list dt{
	color: #fff;
	width: 100px;
	padding: 8px 0;
	text-align: center;
	border-radius: 10px;
	margin: 0 10px 0 0;
	font-size: 16px;
}
.page .business .box.b02 .list dt.li01{
	background:#ABDF18;
}
.page .business .box.b02 .list dt.li02{
	background:#87C858;
}
.page .business .box.b02 .list dt.li03{
	background:#00BBE4;
}
.page .business .box.b02 .list dt.li04{
	background:#4FCCB4;
}
.page .business .box.b02 .safety{
	width: 100%;
	max-width: 810px;
	margin: 50px auto 0;
}
.page .business .box.b02 .safety .img{
	width: 18%;
}
.page .business .box.b02 .safety .text{
	width: 70%;
	line-height: 30px;
	margin: 0;
}
.page .business .box.b03 ul,
.page .business .box.b04 ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 30px 0 0;
}
.page .business .box.b03 ul li{
	width: 30%;
	line-height: 30px;
}
.page .business .box.b04 ul li{
	width: 50%;
}
.page .business .box.b04 ul li img{
	width: 60%;
	margin: auto;
}
.page .business .block-w .csr{
	margin: 30px 0 0;
	align-items: center;
}
.page .business .block-w .csr .img{
	width: 20%;
}
.page .business .block-w .csr .text{
	width: 70%;
	line-height: 30px;
}
.page .business .block-w .text02 ul{
	margin: 30px 0 0;
}
.page .business .block-w .text02 ul li{
	line-height: 30px;
}

.page .business .img.sdgs{
	width: 100%;
	max-width: 800px;
	margin: 80px auto 0;
}

/* -- album ----------------------------------------------------*/
.page .album .bg-img {
	background: url(../img/bg/album.jpg);
	background-position: center ;
	background-size: cover;
	background-repeat: no-repeat;
}
.page .album #instafeed {
    overflow: hidden;
    width: 100%;
	max-width: 1600px;
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.page .album #instafeed .item{
    width: 19.5%;
    padding: 8px;
    /*background: rgba(86, 133, 49, 0.5);*/
    margin: 0 2px 50px;
}
.page .album #instafeed .item p{
	margin: 10px 0 0;
	padding: 0 10px;
}
.page .album #instafeed .item a {
    padding: 100% 0 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.page .album #instafeed .item a:hover{
	opacity: 0.5;
}
/* -- contact ----------------------------------------------------*/
.page .contact .bg-img {
	background: url(../img/bg/contact.jpg);
	background-position: center ;
	background-size: cover;
	background-repeat: no-repeat;
}
.page .contact .tel,
.page .contact .fax,
.page .contact .mail{
	width: 100%;
	max-width: 800px;
	margin: 30px auto 0;
	padding: 0 10px;
}
.page .contact .tel .line,
.page .contact .fax .line,
.page .contact .mail .line{
	border: 2px solid #568531;
	padding: 30px;
}
.page .contact .tel p,
.page .contact .fax p,
.page .contact .mail p{
	font-size: 16px;
	line-height: 30px;
	text-align: center;
}
.page .contact .tel a{
	text-align: center;
	font-size: 30px;
	margin: 20px 0 0;
	position: relative;
	padding: 0 0 0 40px;
}
.page .contact .tel a:after{
    content: "";
	background: url(../img/icon/phone.png);
    display: inline-block;
	width: 30px;
	height: 30px;
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
    position: absolute;
	top: 9px;
    right: 200px;
    left: 0;
    margin: auto;
}
.page .contact .fax .ft{
	text-align: center;
	font-size: 30px;
	margin: 20px 0 0;

}
.page .contact .mail a{
	text-align: center;
	font-size: 24px;
	margin: 20px 0 0;
	position: relative;

}
@media screen and (max-width:899px){
	.page .top{
		margin: 0;
	}
	.page .top .bg{
	    padding: 150px 0 0;
	    bottom: -70px;
			display: none;
	}
	.page .top .page-img{
		padding: 50% 0 0;
	}
	.page .content {
	    margin: 50px 0 0 !important;
	}

	.page .content .h2-bg{
		padding: 10px 25px;
		font-size: 16px;
	}
	.page .top .bg-img{
		padding: 250px 0 0;
	}
	.page .top .bg-img .text{
		width: 200px;
		height: 150px;
	}
/* -- company ----------------------------------------------------*/
	.page .company .content .box .flex .text{
		width: 100%;
	}
	.page .company .content .box .flex .img{
		width: 45%;
		margin: auto;
	}
	.page .company .content .box .flex .text{
		margin: 30px 0 0;
	}

	.page .company .content .box dt{
		width: 100%;
		padding: 10px;
	}
	.page .company .content .box dd{
		width: 100%;
		margin: -1px 0 0;
			padding: 10px;
	}
	.page .company .content .box .map{
	    height: 300px;
	}
/* -- business ----------------------------------------------------*/
	.page .business .flex .box{
		width: 100%;
	}
	.page .business .block-w .box[aria-hidden="true"]{
		display: none;
	}
	.page .business .flex .box.b01:last-child{
		margin: 30px 0 0;
	}
	.page .business .box.b03 ul li:first-child {
		margin: 0;
	}
	.page .business .box.b02 .img,
	.page .business .box.b02 .list,
	.page .business .box.b02 .safety .img,
	.page .business .box.b02 .safety .text,
	.page .business .box.b03 ul li,
	.page .business .box.b04 ul li,
	.page .business .block-w .csr .img,
	.page .business .block-w .csr .text{
		width: 100%;
	}
	.page .business .box.b02 .img img{
		width: 80%;
		margin: auto;
	}
	.page .business .box.b02 .list{
		margin: 30px 0 0;
	}
	.page .business .box.b02 .list dt{
		font-size: 14px;
	}
	.page .business .box.b02 .list dd {
		margin: 10px 0 0;
	}
	.page .business .box.b02 .safety .text{
		margin: 30px 0 0;
	}
	.page .business .box.b02 .safety .img img{
		width: 40%;
		margin: auto;
	}
	.page .business .box.b02 .safety .text li{
		margin: 10px 0 0;
	}
	.page .business .box.b03 ul li{
		margin: 30px 0 0;
	}
	.page .business .box.b04 ul li img{
		width: 100%;
	}
	.page .business .box.b04 ul li img:last-child{
		margin: 30px 0 0;
	}
	.page .business .block-w .csr .img img{
		width: 40%;
		margin: auto;
	}
	.page .business .block-w .csr .text{
		margin: 30px 0 0;
	}
	.page .business .img.sdgs {
	    margin: 30px auto 0;
	}
/* -- album ----------------------------------------------------*/
	.page .album #instafeed .item{
	    width: 48%;
	}
/* -- contact ----------------------------------------------------*/
	.page .contact .tel p,
	.page .contact .fax p,
	.page .contact .mail p{
		font-size: 14px;
	}
	.page .contact .tel a,
	.page .contact .fax .ft{
		font-size: 24px;
		margin: 10px 0 0;
	}
	.page .contact .mail a{
		font-size: 20px;
		margin: 10px 0 0;
	}
	.page .contact .tel a:after{
		width: 20px;
		height: 20px;
		top: 9px;
	    right: 160px;
	}


}