@charset "UTF-8";

/*------------------------------
TOP画像
-------------------------------*/

.toph1{
	text-indent: -5000px;
}


@media screen and (min-width: 1601px){
#topimg{
        width:100%;
        height: 890px;
        display: flex;
		position: absolute;
		top:0px;
        justify-content: center;
        align-items: center;
        background-size: cover;
        animation: img_anime 25s ease infinite;
		background-image: url(../top/topimg1.jpg),url(../top/topimg2.jpg);
    }
	
#topimg .logo{
	width: 382px;
	height: 232px;
	margin-top: 500px;
	margin-left: 70%;
}
#topimg .logo img{
		width: 100%;
		height: auto;
	}
.top-text{
	position: absolute;
	width: 157px;
	height: 375px;
	margin: 120px auto auto;
	animation: fadeout-anim 12s linear forwards;
	}
.top-text img{
		width: 100%;
		height: auto;
	}
.slide{
  width: 400px;
	height: 400px;
}
.slide img{
	width: 100%;
	height: auto;
}
	
.jigyou{
	text-align: center;
	color: #030303;
	font-family: "GenJyuuGothicL-Bold";
	font-size: 30px;
}
.jigyou .soudan{
	font-size: 15px;
	font-family: "GenJyuuGothicL-Medium";
	margin-left: 5px;
}
	
.jigyou .taiou{
	font-size: 22px;
	font-family: "GenJyuuGothicL-Bold";
}
}

@media screen and (min-width: 1101px) and (max-width: 1600px){
#topimg{
        width:100%;
        height: 600px;
        display: flex;
		position: absolute;
		top:0px;
        justify-content: center;
        align-items: center;
        background-size: 100% auto;
		background-position: center;
       animation: img_anime 25s ease infinite;
		background-image: url(../top/topimg1.jpg),url(../top/topimg2.jpg);
    }
#topimg .logo{
	width: 250px;
	height: 151px;
	margin-top: 400px;
	margin-left: 70%;
}
#topimg .logo img{
		width: 100%;
		height: auto;
	}
.top-text{
	position: absolute;
	width: 157px;
	height: 375px;
	margin: 120px auto auto;
	animation: fadeout-anim 12s linear forwards;
	}
	
.top-text img{
		width: 100%;
		height: auto;
	}
.slide{
  width: 300px;
	height: 300px;
}
.slide img{
	width: 100%;
	height: auto;
}
.jigyou{
	text-align: center;
	color: #030303;
	font-family: "GenJyuuGothicL-Bold";
	font-size: 30px;
}
.jigyou .soudan{
	font-size: 15px;
	font-family: "GenJyuuGothicL-Medium";
	margin-left: 5px;
}
	
.jigyou .taiou{
	font-size: 22px;
	font-family: "GenJyuuGothicL-Bold";
}
.flow{
		max-width: 900px;
		margin: 60px auto;
	}	

	
.flowimage{
	width: 900px;
	height: 167px;
	margin: 30px auto;
	}
	
	.flowimage .flow1{
		float: left;
		margin: 0;
	}
	.flowimage .flow2{
		float: right;
		margin: 0;
	}
}

@media screen and (min-width: 961px) and (max-width: 1100px){
#topimg{
        width:100%;
        height: 530px;
        display: flex;
		position: absolute;
		top:0px;
        justify-content: center;
        align-items: center;
        background-size: 100% auto;
	background-position: center;
        animation: img_anime 25s ease infinite;
	background-image: url(../top/topimg1.jpg),url(../top/topimg2.jpg);
    }
	
#topimg .logo{
	width: 200px;
	height: 120px;
	margin-top: 370px;
	margin-left: 70%;
}
#topimg .logo img{
		width: 100%;
		height: auto;
	}
.top-text{
	position: absolute;
	width: 126px;
	height: 300px;
	margin: 120px auto auto;
	animation: fadeout-anim 12s linear forwards;
	}
.top-text img{
		width: 100%;
		height: auto;
	}
.slide{
  width: 300px;
	height: 300px;
}
.slide img{
	width: 100%;
	height: auto;
}
.jigyou{
	text-align: center;
	color: #030303;
	font-family: "GenJyuuGothicL-Bold";
	font-size: 27px;
}
.jigyou .soudan{
	font-size: 15px;
	font-family: "GenJyuuGothicL-Medium";
	margin-left: 5px;
}
	
.jigyou .taiou{
	font-size: 22px;
	font-family: "GenJyuuGothicL-Bold";
}

}
@media screen and (max-width: 960px){
#topimg{
        width:100%;
	min-width: 680px;
        height: 378px;
        display: flex;
		position: absolute;
		margin-top: 0px;
        justify-content: center;
        align-items: center;
        background-size: 100% auto;
	background-position: center;
        animation: img_anime 25s ease infinite;
	background-image: url(../top/topimg1.jpg),url(../top/topimg2.jpg);
    }
	

#topimg .logo{
	width: 160px;
	height: 96px;
	margin-top: 230px;
	margin-left: 70%;
}
#topimg .logo img{
		width: 100%;
		height: auto;
	}
.top-text{
	position: absolute;
	width: 126px;
	height: 300px;
	margin: 0px auto auto;
	animation: fadeout-anim 12s linear forwards;
	}
	.top-text img{
		width: 100%;
		height: auto;
	}
	
.slide{
  width: 200px;
	height: 200px;
}
.slide img{
	width: 100%;
	height: auto;
}
	

.jigyou{
	text-align: center;
	color: #030303;
	font-family: "GenJyuuGothicL-Bold";
	font-size: 23px;
}

.jigyou .soudan{
	font-size: 15px;
	font-family: "GenJyuuGothicL-Medium";
	margin-left: 5px;
}
	
.jigyou .taiou{
	font-size: 22px;
	font-family: "GenJyuuGothicL-Bold";
}
	
}



/*------------------------------
アニメーション
-------------------------------*/


  /* 背景画像アニメーション */
@keyframes img_anime {
	0% {background-image: url(../top/topimg1.jpg);}
	35% {background-image: url(../top/topimg1.jpg);}
	60% {background-image: url(../top/topimg2.jpg);}
	85% {background-image: url(../top/topimg2.jpg);}
	100% {background-image: url(../top/topimg1.jpg); }
          } 

  /* TOPのテキストフェードアウトアニメーション */		
@keyframes fadeout-anim {
	0%{opacity: 0;}
	35%{opacity: 0;}
	50%{opacity: 1;}
	75%{opacity: 1;}
	100% {opacity: 0;}
}

  /* スライドショー */
.slide-container {
    width: 100%;
    margin: 50px 0px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 30s infinite linear 1s;
}

@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}






.back-text{
	position: absolute;
}


.shinrai{
	font-family: "MPLUS1p-Medium";
	letter-spacing: 5px;
	font-size: 25px;
	text-align: center;
	margin-bottom: 40px;
}
.aisatsu{
	text-align: center;
	margin-bottom: 70px;
}

.sdgs{
	width: 200px;
	margin: 50px auto 80px;
}


.text{
	position: relative;
}



/*------------------------------
横文字フェードイン
-------------------------------*/
@media screen and (min-width: 961px){

.top-contents{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 0;
}

.back-text{
	width: 100%;
	height: auto;
	position: absolute;
}
.top-contents img{
	margin-top: 0px;
	margin-bottom: 0px;
}

/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;

  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.top-contents .fadeUpTrigger{
    opacity: 0;
}

.top-contents .fadeUpTrigger img{
	width: 173px;
	
}
}
	

@media screen and (min-width: 741px) and (max-width: 960px){

.top-contents{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 0;
}

.back-text{
	width: 30px;
	height: auto;
	position: absolute;
}
.back-text{
	width: 100%;
	height: auto;
	position: absolute;
}
.top-contents img{
	margin-top: 0px;
	margin-bottom: 0px;
}
/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;

  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.top-contents .fadeUpTrigger{
    opacity: 0;
}

.top-contents .fadeUpTrigger img{
	width: 173px;
	
}
}

@media screen and (max-width: 740px){

.top-contents{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 0;
}

.back-text{
	width: 50px;
	height: auto;
	position: absolute;
}
.top-contents img{
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;

  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.top-contents .fadeUpTrigger{
    opacity: 0;
}

.top-contents .fadeUpTrigger img{
	width: 173px;
	
}
}
/*------------------------------
各ページへのリンク
-------------------------------*/
@media screen and (min-width: 961px){	
.top-link{
	width: 900px;
	height: 588px;
	margin: 0px auto;
	position: relative;
}
.top-link a:hover{
	opacity: 70%;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}
.top-link .service{
	width: 688px;
	height: 79px;
	background-image:url("../top/top-service.png");
	background-size:900px 279px;
	background-repeat: no-repeat;
	padding-left: 212px;
	padding-top: 200px;
	margin-bottom: 30px;
	
}
.top-link .company{
	width: 207px;
	height: 89px;
	background-image:url("../top/top-company.png");
	background-size:432px 279px;
	background-repeat: no-repeat;
	padding-left: 225px;
	padding-top: 210px;
	float: left;
}

.top-link .recruit{
	width: 250px;
	height: 89px;
	background-image:url("../top/top-recruit.png");
	background-size:432px 279px;
	background-repeat: no-repeat;
	padding-left: 182px;
	padding-top: 210px;
	float: right;
}
}

@media screen and (min-width: 741px) and (max-width: 960px){
.top-link{
	width: 700px;
	height: 458px;
	margin: 0px auto;
	position: relative;
}
.top-link a:hover{
	opacity: 70%;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}
.top-link .service{
	width: 520px;
	height: 67px;
	background-image:url("../top/top-service.png");
	background-size:700px 217px;
	background-repeat: no-repeat;
	padding-left: 180px;
	padding-top: 150px;
	margin-bottom: 20px;
	
}
.top-link .company{
	width: 156px;
	height: 57px;
	background-image:url("../top/top-company.png");
	background-size:336px 217px;
	background-repeat: no-repeat;
	padding-left: 180px;
	padding-top: 160px;
	float: left;
}

.top-link .recruit{
	width: 191px;
	height: 57px;
	background-image:url("../top/top-recruit.png");
	background-size:336px 217px;
	background-repeat: no-repeat;
	padding-left: 145px;
	padding-top: 160px;
	float: right;
}
}

@media screen and (max-width: 740px){
.top-link{
	width: 600px;
	height: 534px;
	margin: 0px auto;
	position: relative;
}
	.top-link a{
		color: #fff;
	}
.top-link a:hover{
	opacity: 70%;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}
.top-link .service{
	width: 460px;
	height: 51px;
	background-image:url("../top/top-service.png");
	background-size:600px 186px;
	background-repeat: no-repeat;
	padding-left: 140px;
	padding-top: 135px;
	margin-bottom: 20px;
	
}
.top-link .company{
	width: 139px;
	height: 51px;
	background-image:url("../top/top-company.png");
	background-size:289px 186px;
	background-repeat: no-repeat;
	padding-left: 150px;
	padding-top: 135px;
	float: left;
}

.top-link .recruit{
	width: 169px;
	height: 51px;
	background-image:url("../top/top-recruit.png");
	background-size:289px 186px;
	background-repeat: no-repeat;
	padding-left: 120px;
	padding-top: 135px;
	float: right;
}	
}


/*------------------------------
産業廃棄物ご依頼の流れ
-------------------------------*/
@media screen and (min-width: 961px){		

.flow{
	width: 900px;
	height: 230px;
	margin: 60px auto;
	position: relative;
	}	

	
.flowimage{
	width: 900px;
	height: 167px;
	margin: 30px auto;
	}
	
	.flowimage .flow1{
		float: left;
		margin: 0;
	}
	.flowimage .flow2{
		float: right;
		margin: 0;
	}
}


@media screen and (max-width: 960px){		

.flow{
	width: 90%;
	min-width: 600px;
	height: auto;
	margin: 60px auto;
	position: relative;
	}	
.flow p{
		text-align: center;
		color: #fff;
		font-size: 20px;
		font-family: "Yu Gothic Bold";
		width: 100%;
		height: 37px;
		background-color: #0082CB;
	line-height: 180%;
	}
	
.flowimage{
	width: 600px;
	height: 380px;
	margin: 30px auto;
	}
	
	.flowimage .flow1{
		float: left;
		margin-bottom: 15px;
	}
	.flowimage .flow2{
		float: right;
	}
	.flowimage img{
		width: 500px;
		height: 185px;
		
	}
}


/*------------------------------
price
-------------------------------*/
@media screen and (min-width: 961px){

	.price{
		width: 900px;
		margin: 20px auto;
		position: relative;
		overflow: hidden;
	}
	.price h2{
		font-size: 80px;
		text-align: center;
		color: #0082cb;
		font-family: "FuturaNewBook";
		font-weight: 700;
		letter-spacing: 12px;
		line-height: 70%;
	}
	.price h2 span{
		font-size: 18px;
		text-align: center;
		color: #030303;
		font-family: "Yu Gothic Bold";
	}
	
	
	.price-box{
		width: 920px;
		display: flex;
		margin-top: 30px;
	}
	.price-box .box{
		border: 1px solid #0081CA;
		margin-right: 20px;
		width: 33%;
	} 
	.price-box .box p{
		padding: 10px 25px;
	}
	.price-box .box .price-title{
		text-align: center;
		color: #0081CA;
		font-family: "Yu Gothic Bold";
		border-bottom: 1px solid #0081CA;
	}
	.price-box .box .price-text{
		font-size: 13px;
		line-height: 160%;
	}
	.price .fukidashi{
		width: 900px;
		height: 165px;
		background-image:url("../top/fukidashi.png");
		background-size: 900px 195px;
		background-repeat: no-repeat;
		margin: 50px auto;
		text-align: center;
		font-family: "Yu Gothic Bold";
		font-size: 18px;
		line-height: 180%;
		padding-top: 30px;
	}
	.fukidashi .question{
		width: 900px;
		height: 165px;
		background-image:url("../top/question.png");
		background-size: 67px 90px;
		background-repeat: no-repeat;
		background-position: 10% 10px;
	}
}

@media screen and (max-width: 960px){

	.price{
		width: 600px;
		margin: 20px auto;
		position: relative;
		overflow: hidden;
	}
	
	.price h2{
		font-size: 80px;
		text-align: center;
		color: #0082cb;
		font-family: "FuturaNewBook";
		letter-spacing: 12px;
		line-height: 70%;
	}
	.price h2 span{
		font-size: 18px;
		text-align: center;
		color: #030303;
		font-family: "Yu Gothic Bold";
	}
	.price-box{
		width: 600px;
		height: auto;
		margin: 30px auto;
	}
	.price-box .box{
		border: 1px solid #0081CA;
		margin:20px auto;
		width: 550px;
	} 
	.price-box .box p{
		padding: 10px 25px;
	}
	.price-box .box .price-title{
		text-align: center;
		color: #0081CA;
		font-family: "Yu Gothic Bold";
		border-bottom: 1px solid #0081CA;
	}
	.price-box .box .price-text{
		font-size: 16px;
		line-height: 160%;
	}
	.price .fukidashi{
		width: 600px;
		height: 188px;
		background-image:url("../top/fukidashi-sp.png");
		background-size: 600px 188px;
		background-repeat: no-repeat;
		margin: 50px auto;
		text-align: center;
		font-family: "Yu Gothic Bold";
		font-size: 18px;
		line-height: 180%;
		padding-top: 30px;
	}

	.fukidashi .question{
		width: 600px;
		height: 188px;
		background-image:url("../top/question-sp.png");
		background-size: 67px 90px;
		background-repeat: no-repeat;
		background-position: 10% 10px;
	}
		
}


/*------------------------------
contact
-------------------------------*/
@media screen and (min-width: 961px){
	.contact-top{
		width: 100%;
		height: 440px;
		background: linear-gradient(180deg, #fff 0px, #fff 33px, #CBDFE2 33px, #CBDFE2 440px);
		text-align: center;
	}
	.contact-top h2{
		font-size: 80px;
		text-align: center;
		color: #0082cb;
		font-family: "FuturaNewBook";
		font-weight: 700;
		letter-spacing: 12px;
		line-height: 50%;
	}
	.contact-top h2 span{
		font-size: 18px;
		text-align: center;
		color: #030303;
		font-family: "Yu Gothic Bold";
	}

	.contact-means{
		width: 90%;
		max-width: 1000px;
		height: 180px;
		margin: 20px auto;
		font-family: "MPLUS1p-Medium";
	}
	.contact-tel{
		float: left;
		width: 49%;
		max-width: 497px;
		height: 150px;
		background-color: #fff;
		padding-top: 30px;
}
	.contact-tel a{
		font-size: 24px;
	}
	.contact-means p,.contact-means a{
		color: #0081CA;
	}
	.contact-mail{
		float: right;
		width: 49%;
		max-width: 497px;
		height: 140px;
		background-color: #fff;
		padding-top: 40px;
	}
	.contact-mail a:hover{
		opacity: 70%;
		-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}
	.contact-mail img{
		margin: 10px auto;
	}
	.contact-means .text-15{
		font-size: 15px;
	}
	.contact-means .text-18{
		font-size: 18px;
	}
	.contact-means .text-13{
		font-size: 13px;
	}
	.contact-means hr{
		border: 0.5px solid #0081CA;
		width: 330px;
		margin: 10px auto;
	}
	.text-22{
		font-size: 22px;
		font-family: "MPLUS1p-Medium";
		margin-top: 25px;
	}
}


@media screen and (max-width: 960px){
	.contact-top{
		width: 100%;
		height: 750px;
		background: linear-gradient(180deg, #fff 0px, #fff 33px, #CBDFE2 33px, #CBDFE2 440px);
		text-align: center;
	}
	.contact-top h2{
		font-size: 80px;
		text-align: center;
		color: #0082cb;
		font-family: "FuturaNewBook";
		letter-spacing: 12px;
		line-height: 50%;
	}
	.contact-top h2 span{
		font-size: 18px;
		text-align: center;
		color: #030303;
		font-family: "Yu Gothic Bold";
	}
	.contact-means{
		width: 500px;
		height: 400px;
		margin: 20px auto;
		font-family: "MPLUS1p-Medium";
	}
	.contact-tel{
		width: 500px;
		height: 180px;
		margin: 20px auto;
		background-color: #fff;
		padding-top: 30px;
}
	.contact-tel a{
		font-size: 35px;
		line-height: 140%;
	}
	.contact-means p,.contact-means a{
		color: #0081CA;
	}
	.contact-mail{
		width: 500px;
		height: 130px;
		margin: 20px auto;
		background-color: #fff;
		padding-top: 30px;
	}
	.contact-mail img{
		margin: 10px auto;
	}
	.contact-means .text-15{
		font-size: 22px;
	}
	.contact-means .text-18{
		font-size: 24px;
	}
	.contact-means .text-13{
		font-size: 18px;
	}
	.contact-means hr{
		border: 0.5px solid #0081CA;
		width: 420px;
		margin: 10px auto;
	}
	.text-22{
		font-size: 28px;
		font-family: "MPLUS1p-Medium";
		margin-top: 25px;
	}
	
}

.map{
		width: 100%;
		height: 400px;
		margin: 0px auto;
	}
	.map iframe{
		width: 100%;
		height: 400px;
	}