@charset "utf-8";
 /* ================================================ CSS Information
 File Name:      page-home.css
 Author:         Akira Honda
 Last updated:   2015/07/29
 Style Info:     トップページの定義
 Root ID:        #home
 Notes:          
================================================================ */



/* ---------------------------------------------------

	スライダー

--------------------------------------------------- */
/*
.home-slider-wrap {
	position: relative;
	width: 100%;
	min-width: 1020px;
	height: 400px;
	overflow: hidden;
	}
	
	.home-slider-wrap img {
		display: block;
		float: left;
		width: 1020px;
		height: 400px;
	}
	
	.prev-next a {
		display: block;
		outline: none;
		position: absolute;
		top: 0;
		width: 50%;
		height: 400px;
		-webkit-transition: background-color .2s linear;
		   -moz-transition: background-color .2s linear;
				transition: background-color .2s linear;
		background-color: transparent;
		}
		.prev-next a:before {
			display: block;
			position: absolute;
			top: 50%;
			z-index: 100;
			width: 0;
			height: 0;
			opacity: 0;
			visibility: hidden;
			-webkit-transition: all .3s ease-in;
			   -moz-transition: all .3s ease-in;
					transition: all .3s ease-in;
			margin-top: -8px;
			border-width: 16px;
			border-style: solid;
			border-color: transparent;
			content: '';
		}
		#prev { left: -510px; }
		#next { right: -510px; }
		
		#prev:before {
			border-right-color: #44af35;
			right: 0;
			}
		#next:before {
			border-left-color: #44af35;
			left: 0;
			}
	
    */
    
    
		/* マウスオーバー */
	/*	.prev-next a:hover {
			background-color: rgba(255, 255, 255, 0.8);
		}
		.prev-next a:hover:before {
			opacity: 1;
			visibility: visible;
		}
		#prev:hover:before { right: 10px; }
		#next:hover:before { left:  10px; }*/
        
/***************bxslider*******************************/
.slider_container{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 400px;
        overflow: hidden;
}
 
.slider_wrap{
    width: 100%;
}
 
.slider_img{
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
}
 
/* bxsliderのスタイル */
.bx-wrapper{
    position: relative;
        box-shadow:0;
    border: none;
    background: #fff;
}
 
.bx-viewport{
    overflow: visible !important; /* これを追加しないとうまくいかない */
    width: 1020px !important;
    margin: 0 auto;
}
 
 
.bx-wrapper .bx-controls-direction a{
    outline: 0;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}
 
.bx-wrapper .bx-next{
    right: 5%;
    /* お好みの画像に変更してください */
    background: url(./image/slider_arrow_right.svg) no-repeat;
}
.bx-wrapper .bx-prev {
    left: 5%;
    /* お好みの画像に変更してください */
    background: url(./image/slider_arrow_left.svg) no-repeat;
}





 
.bx-wrapper .bx-pager{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100px;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}
 
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #fff;
    border-radius: 1000px;
    display: block;
    opacity: 0.5;
    text-indent: -9999px;
    width: 15px;
    height: 15px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    opacity: 1;
}

@media (max-width: 1020px) {
.slider_container{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

.bx-viewport{
    overflow:hidden !important; /* これを追加しないとうまくいかない */
}
 

}

/***************swiper*******************************/
/*
.slider {
  width: 100%;
  margin: auto;
}
.slideritem {
 width: 1020px;
 height: 400px;
  background: #fff;
  position:relative;
  margin-bottom: 10px;

}
.slick-slide {
  /*間を開ける*/
 /* margin: 0;
}
/*.slick-slide:not(.slick-center) {
  /*左右のslide要素のCSSを変更する*/
/*  opacity: 1;
}
/*.slideritem p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 20px;
  font-weight: bold;
  height: 20px;
  text-align: center;
}

@media (min-width: 1px) and (max-width: 750px){
  .slideritem {
  height: 100px;
}
}

*/
/* ---------------------------------------------------

	グリーンツール紹介

--------------------------------------------------- */

.home-intro {
	margin: 60px 0 0;
	text-align: center;
}
	.home-intro h2 {
		margin: 0;
		font-size: 42px;
		font-size: 4.2rem;
		letter-spacing: 0.07em;
	}
	.home-intro h2 + p {
		font-size: 27px;
		font-size: 2.7rem;
	}
	
	.home-intro h2 + p strong {
		color: #f79300;
	}
	
	/* オーバーレイ本体 */
	.overlay {
		display: table;
		position: absolute;
		z-index: 300;
		width: 100%;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all .2s ease-in;
		   -moz-transition: all .2s ease-in;
				transition: all .2s ease-in;
		background: rgba( 0, 0, 0, .7 );
		}
		.overlay .comment {
			display: table-cell;
			color: #fff;
			text-align: center;
			vertical-align: middle;
		}
		li:hover .overlay {
			opacity: 1;
			visibility: visible;
		}
	/* End / .overlay */
	

	.home-intro .feature {
		overflow: hidden;
		margin: 70px 0 0;
		padding: 0 0 120px;
		background: #000;
		}
		.home-intro .feature li {
			position: relative;
			margin-right: 17px;
		}
		.home-intro .feature li:last-child { margin-right: 0; }
		.home-intro .feature .overlay {
			top: 5px;
			left: 5px;
			width: 180px;
			height: 160px;
			line-height: 1.55;
			font-size: 19px;
			font-weight: normal;
		}




/* ---------------------------------------------------

	新着情報

--------------------------------------------------- */

.home-news {
	padding: 64px 0;
	background: #e6e6e6;
	font-size: 14px;
	font-size: 1.4rem;
	}
	.home-news .content {
		position: relative;
		width: 1020px;
		margin: 0 auto;
		padding: 60px 120px;
		background: #fff;
	}
	
	.home-news h2 {
		margin: 0;
		padding: 0 0 13px;
		border-bottom: 2px solid #000;
	}
	
	.home-news .home-more-link {
		position: absolute;
		width: 3em;
		top: 75px;
		right: 120px;
		line-height: 1;
		text-align: right;
		}
		.home-news .home-more-link a {
			display: inline-block;
		}
		.home-news .home-more-link a:before {
			display: block;
			position: absolute;
			top: 50%;
			left: -8px;
			z-index: 10;
			width: 14px;
			height: 14px;
			margin-top: -7px;
			content: url('../img/home/news-icon-linkbox.png');
		}
	
	.home-news dl {
		margin: .6em 0 0;
		}
		.home-news dd {
			margin: -2.125em 0 .6em;
			padding: 0 0 .6em 8em;
			border-bottom: 1px solid #b3b3b3;
		}
		.home-news dd span {
			min-width: 100px;
			max-width: 8em;
			line-height: 20px;
			font-size: 12px;
			font-size: 1.2rem;
			text-align: center;
			font-weight: bold;
			color: #fff;
			display: inline-block;
			margin-right: 0.5em;
		}
		.home-news dd span.new {
			background: #f00;
			min-width: auto;
			margin: 0 0 0 1em;
			padding: 0 0.5em;
			border-radius: 50px;
		}
	.home-news dl + p {
		text-align: center;
		margin-top: 60px; }


/* ---------------------------------------------------

	バナー

--------------------------------------------------- */
	.home-bnr {
		padding: 105px 0 0;
	}
	.home-bnr .contents {
		width: 94%;
		max-width: 1470px;
		margin: 0 auto;
	}
	.home-bnr-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.home-bnr-list-item {
		flex: 0 1 calc((100% - 20px) / 2);
	}
	.home-bnr-list-item img {
		width: 100%;
		display: block;
	}
	.home-bnr-list-item a:hover {
		opacity: 0.7;
	}

/* ---------------------------------------------------

	SDGs

--------------------------------------------------- */
	.home-sdgs {
		width: 100%;
		text-align: center;
		padding: 105px 0 0;
		overflow: hidden;
		}
		
		.home-sdgs .contents {
			margin-bottom: 50px;
		}
		
		.home-sdgs-title {
			position: relative;
		}
		
		.home-sdgs-title h2 {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}
		
		.home-sdgs-slider {
			display:flex;
			width:100%;
			height: 82px;
			overflow: hidden;
		}
			
		.home-sdgs-gazou {
			display:flex;
			animation-name: loop;
			animation-duration: 20s;
			animation-iteration-count: infinite;
			animation-fill-mode: backwards;
			animation-timing-function: linear;
		}
		.home-sdgs-gazou img {
			width: 100%;
			object-fit: cover;
		}
		
		@keyframes loop {
			0% {
				transform: translateX(0%);
			}
			to {
				transform: translateX(-100%);
			}
		}


/* ---------------------------------------------------

	リサイクル

--------------------------------------------------- */

.home-recycle {
	width: 100%;
	text-align: center;
	}
	
	/* VIEW MORE 本体 */
	.more-blk_btn {
		display: table;
		width: 100%;
		height: 350px;
		background-color: #354e65;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		text-align: center;
		}
		.more-blk_btn .inner {
			display: table-cell;
			vertical-align: middle;
			}
	/* End / .more-blk_btn */
	
	.home-recycle h2 {
		margin: 0;
		padding: 38px 0 50px;
		background: #006837;
	}
	
	.home-recycle .reading-txt {
		padding: 56px 0 100px;
		background: #44af35;
		}
		.home-recycle .reading-txt p {
			line-height: 46px;
			margin: 0 0 50px;
			color: #fff;
			font-size: 23px;
			font-size: 2.3rem;
		}
		.home-recycle .more-blk_btn { background-image: url(../img/home/recycle-more-bgimg.jpg); }
	
	

/* ---------------------------------------------------

	事業案内

--------------------------------------------------- */

.home-business {
	/**padding-top: 130px;**/
	padding-top: 80px;
	text-align: center;
	}
	.home-business .content {
		position: relative;
		width: 1020px;
		margin: 0 auto;
		letter-spacing: -.4em;
	}
	
	.home-business article {
		display: inline-block;
		width: 310px;
		margin: 0 45px 65px 0;
		font-size: 14px;
		font-size: 1.4rem;
		text-align: left;
		vertical-align: top;
		letter-spacing: normal;
		}
		.home-business article:nth-child(3n) { margin-right: 0; }
		.home-business article h3 {
			margin: 0;
			font-size: 30px;
			font-size: 3rem;
			text-align: center;
		}
	
		.home-business .photo {
			position: relative;
			margin: -5px 0 10px;
			}
			.home-business .photo img { border: 5px solid #ccc; }
			.home-business .photo .overlay {
				top: 0;
				left: 0;
				width: 310px;
				height: 180px;
				line-height: 1.55;
				font-size: 19px;
				font-weight: normal;
			}
			.home-business .photo:hover .overlay {
				opacity: 1;
				visibility: visible;
			}
		
		.home-business .txt {
			line-height: 1.75;
			margin: 0;
		}
		
		.home-business .txt strong {
			color: #f79300;
		}
	
	.home-business .more-blk_btn {
		margin-top: 95px;
		background-image: url(../img/home/business-more-bgimg.jpg);
	}
	
	.home-business {
		background: url(../img/home/business-bg.png) no-repeat center top, #000;
		padding-bottom: 50px;
	}
	
	.home-business-item {
		letter-spacing: 0;
		display: grid;
		grid-template-columns: auto 1fr auto;
		text-align: left;
		column-gap: 30px;
		margin: 80px 0;
		color: #fff;
	}
	
	.home-business-item .photo {
		grid-row: 1 / 4;
	}
	
	.home-business-item h4 {
		font-size: 3rem;
		line-height: 1.0;
		margin: 0 0 15px;
		display: flex;
		align-items: center;
		column-gap: 5px;
		grid-column: 2 / 4;
	}
	.home-business-item h4:after {
		content: "";
		flex-grow: 1;
		height: 1px;
		background: currentColor;
	}
	
	.home-business-item > div:not(.photo) {
		margin-top: auto;
	}
	
	.home-business-item > div:not(.photo) a {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background: #fff;
		width: 132px;
		height: 32px;
		margin-left: auto;
		text-decoration: none;
		font-size: 1.4rem;
	}
	.home-business-item > div:not(.photo) a:before {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 10px 10px;
		border-color: transparent transparent #4d4d4d transparent;
		position: absolute;
		right: 3px;
		bottom: 3px;
	}
	
@media (max-width: 1020px) {
	/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */

	.home-business .content {
		position: relative;
		width: 96%;
		margin: 0 auto;
		letter-spacing: -.4em;
	}
	
	.home-business article {
		display: inline-block;
		width: 30%;
		margin: 0 3% 65px 0;
		font-size: 14px;
		font-size: 1.4rem;
		text-align: left;
		vertical-align: top;
		letter-spacing: normal;
		}	
	
	
}