@charset "UTF-8";
/* CSS Document */
#wrap {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0;
}

#visual img { line-height:0;}

@media only screen and (min-width: 768px) {
}

#visual { width:100%;text-align:center; margin:60px 0 0;padding:0;
	/*min-height:300px;*/
	line-height:0;
	position:relative;
}
.ccopy{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:9;
	display:flex;
	justify-content: center;
	align-items:center;
}
.ccopyBox{
	background-color:#FFF;
	padding:10px;
}
#visual .ccopyBox p{
	margin-bottom:0;
}
.vlinkBlock{
	position:absolute;
	top:-8px;
	left:-10px;
	width:100%;
	height:100%;
	z-index:9;
	display:flex;
	justify-content: flex-end;
	align-items:flex-end;
}
.vlinkBox{
	display:flex;
	justify-content: end;
	width:100%;
}
#visual .vlinkBox p{
	line-height:1.8;
	margin-bottom:0;
	width:30%;
}
.vlinkBox a{
	display:block;
}
.vlinkBox a:hover{
	text-decoration:none;
	opacity:0.5;
}
@media only screen and (min-width: 768px) {
#visual { text-align:center; margin:140px auto 0;}
.ccopyBox{
	padding:30px 20px;
}
#visual .ccopyBox p{
	font-size:28px;
}
.vlinkBlock{
	top:0;
	left:0px;
}
.vlinkBox{
	width:auto;
	margin-bottom:30px;
}
#visual .vlinkBox p{
	width:300px;
	margin-right:30px;
}
}
@media only screen and (max-width: 767px) {
.ccopyBox{
	width:20%;
	margin-bottom: 15px;
}
}
.titBox{
	max-width: 682px;
	margin:0 auto 56px;
}
.titBox h2{
	font-size:20px;
	font-weight:bold;
	color:#1F6DB2;
	text-align:center;
	margin-bottom:15px;
	padding-bottom:15px;
	border-bottom:1px solid #000;
}
.titBox p.subtit{
	font-size:14px;
	font-weight:bold;
	color:#000;
	text-align:center;
}
@media only screen and (min-width: 768px) {
.titBox h2{
	font-size:28px;
 }
.titBox p.subtit{
	font-size:18px;
}
}


#news{
	background-color:#FFF;
}
#news .container {
	max-width: 936px;
}
.NewsBox{
	border-bottom:1px solid #000;
	padding-bottom:16px;
	margin-bottom:16px;
}

.NewsBox p{
	margin-bottom:0;
}
.NewsBox a{
	text-decoration:none;
}
.NewsBox a:hover{
	text-decoration:underline;
}
.NewsBox .cat_new{
	background-color:#CE5B58;
	color:#FFF;
	margin:0 5px;
	padding:1px 6px;
}
.NewsBox .topics{
	background-color:#326DAC;
	color:#FFF;
	margin:0 5px;
	padding:1px 6px;
}
.NewsBox .event{
	background-color:#59A268;
	color:#FFF;
	margin:0 5px;
	padding:1px 6px;
}
.NewsBox .letter{
	background-color:#D46933;
	color:#FFF;
	margin:0 5px;
	padding:1px 6px;
}
.NewsBox .senba_lake{
	background-color:#6EA9DA;
	color:#FFF;
	margin:0 5px;
	padding:1px 6px;
}
@media only screen and (min-width: 768px) {
.NewsBox{
	padding-bottom:20px;
	margin-bottom:20px;
}

}

#business{
	padding:0;
}
.businessBlock{
background: url(../images/top/img_business.jpg) no-repeat center center;
    min-height: 300px;
    background-size: cover;
	padding:40px 0;
}
.businessBox{
	width:90%;
	margin:0 auto;
	align-items:center;
}
.businessBlock p.copy{
	font-size:20px;
	font-weight:bold;
	color:#000;
	text-align:center;
	margin-bottom:15px;
}
.businessBlock p.copy2{
	text-align:center;
	margin-bottom:15px;
}
#business .LinkBlock{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
    justify-content: center;
	margin-bottom:30px;
}
#business .LinkBox{
	margin:0 auto 0px;
	width:80%;
}
#business .LinkBox a{
	display:flex;
	color:#FFF;
	padding: 0;
	align-items:center;
	text-decoration:none;
	line-height:1.2;
}
#business .LinkBox a:hover{
	text-decoration:none;
	opacity:0.7;
}
#business .LinkBox .water a{
background-image: url(../images/business/ic_water.png);
}
#business .LinkBox .air a{
background-image: url(../images/business/ic_air.png);
}
#business .LinkBox .work a{
background-image: url(../images/business/ic_work.png);
}
#business .LinkBox .soil a{
background-image: url(../images/business/ic_soil.png);
}
#business .LinkBox .ecw a{
background-image: url(../images/business/ic_ecw.png);
}
#business .LinkBox .life a{
background-image: url(../images/business/ic_life.png);
}
#business .LinkBox .monitoring a{
background-image: url(../images/business/ic_monitoring.png);
}
#business .LinkBox .carbon a{
background-image: url(../images/business/ic_carbon.png);
}
#business .LinkBox .others a{
background-image: url(../images/business/ic_others.png);
}
#business .LinkBox .freon a{
background-image: url(../images/business/ic_freon.png);
}
#business p.mark{
	text-align:right;
	margin-right:52px;
}

.bt_d{
	text-align:right;
	transition: all 1s;
}
.bt_d:hover{
	transform: translate(15px,0);
}
@media only screen and (min-width: 768px) {
.businessBlock{
    min-height: 600px;
	padding:112px 0;
}
.businessBox{
	width:705px;
	margin:0 auto 50px;
}
.businessBlock p.copy{
	font-size:28px;
 }
#business .LinkBlock{
	margin-bottom:40px;
}
#business .LinkBox{
	margin:0 0 18px;
	width:25%;
	padding:0 12px;
}
#business .LinkBox:nth-child(n+5){
	margin:0 0 18px;
	width:26%;
	padding:0 12px;
}
#business p.mark{
	text-align:right;
	margin-top:-30px;
	margin-right:0;
}
}

#public{
}
.publicBlock{
}
.publicBlock .container{
	padding:0;
}
.publicBox{
	width:90%;
	margin:0 auto;
	align-items:center;
}
.publicBlock p.copy{
	font-size:20px;
	font-weight:bold;
	margin-bottom:15px;
}
.publicBlock p.copy2{
	margin-bottom:15px;
}
.pubImg{
	margin-bottom:15px;
}
@media only screen and (min-width: 768px) {
#public{
}
.publicBlock{
background: url(../images/top/img_public.jpg) no-repeat center center;
    background-size: cover;
    min-height: 800px;
	padding:50px 0 80px;
	color:#FFF;
}
.publicBox{
	width:555px;
	margin:0 0 50px auto;
}
.publicBlock p.copy{
	font-size:28px;
 }
.pubImg{
	display:none;
}
}
@media only screen and (max-width: 767px) {
.publicBlock{
	text-align:center;
}
}

#kids{
background: url(../images/top/img_kids_bg.png) no-repeat center center;
    background-size: cover;
	min-height:630px;
}
.kidsBox{
	display:flex;
	justify-content: center;
	align-items:center;
	min-height:330px;
background: url(../images/top/img_kids.png) no-repeat center center;
    background-size: contain;
}
.kidsBox p{
	font-size:20px;
	margin-bottom:0;
}
@media only screen and (min-width: 768px) {
#kids{
	padding:0px 0;
	min-height:1000px;
}
.kidsBox{
	height:530px;
}
.kidsBox p{
	font-size:24px;
}
}

#recruit{
}
#recruit a{
	text-decoration:none;
}
#recruit a:hover{
	opacity:0.5;
}
.recruitBlock{
}
.recruitBox{
	width:100%;
	text-align:center;
	color:#FFF;
	background-color:#1F6DB2;
	padding:16px;
}
#wrap .recruitBox p{
	font-size:20px;
	margin-bottom:0;
}
.recImg{
	margin-bottom:0;
	line-height:0;
}
#recruit .pubImg{
	margin-bottom:0;
	line-height:0;
}

@media only screen and (min-width: 768px) {
#recruit{
}
.recruitBlock{
background: url(../images/top/img_recruit.jpg) no-repeat center center;
    min-height: 600px;
    background-size: cover;
	display:flex;
	justify-content: center;
	align-items:center;
}
.recruitBox{
	width:260px;
	padding:32px;
}
#wrap .recruitBox p{
	font-size:24px;
}
.recImg{
	display:none;
}
}

#about{
	background-color:#E5EFEE;
	background-image: url(../images/about/img_c01.png),url(../images/about/img_c02.png),url(../images/about/img_c03.png);
  background-size: 22% auto,24% auto,24% auto;
  background-position: left 12% bottom 30px,right 5% top 28%,left 2% top 4%;
  background-repeat: no-repeat,no-repeat,no-repeat;
  padding-bottom:50px;
}
#about .container {
	max-width: 986px;
}
.aboutBlock{
	display:flex;
	justify-content: center;
	align-items:center;
}
.aboutBox{
	width:90%;
}
.aboutBlock p.copy{
	font-size:20px;
	font-weight:bold;
	color:#000;
	text-align:center;
	margin-bottom:15px;
}
.aboutBlock p.copy2{
	text-align:center;
	margin-bottom:15px;
}
@media only screen and (min-width: 768px) {
#about{
  background-size: 12% auto,17% auto,14% auto;
  background-position: left 25% bottom 30px,right 5% center,left 10% top 10%;
  padding-bottom:110px;
}
.aboutBox{
	width:360px;
}
.aboutBlock p.copy{
	font-size:28px;
	line-height:1.4;
 }
}

#banner{
	padding-bottom:50px;
}
#bannerBlock{
	display: flex;
	flex-wrap: wrap;
}
.bnBox{
	margin:0 1% 10px;
	padding:0px;
	width:48%;
	line-height:0;
	border:2px solid #1E6EB4;
	display: flex;
	align-items:center;
	text-align:center;
}
.bnBox a{
	text-decoration:none;
  color:#1F6DB2;
}
.bnBox a:hover{
	opacity:0.7;
}

@media only screen and (min-width: 768px) {
#banner{
	padding-bottom:110px;
}
.bnBox{
	margin:0 1% 10px;
	padding:0px;
	width:18%;
}
}





.slide-items {
  width: 100%;
  height: 100%;
  overflow:hidden;
}

.slide-items img {
  width: 100%;
  object-fit: cover;
}