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

	
#decarbonization_animetion_illust{
	position: relative;
	top: 0px;
	z-index: 10;
	width: 100%;
	max-width: 850px;
    margin: 100px 0;
	overflow: hidden;
}

.decarbonization_animetion{
	padding: 0px 20px;
}
	
.decarbonization_animetion h1{
	letter-spacing: 12px;
	line-height: 2;
	font-size: 3rem;
	margin-right: 80px;
	color: #06c;
}

.text{
	position: absolute;
	top: 23%;
    left: 50%;
    height: auto;
	z-index: 100;
	width: 80%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	margin: 0;
	padding: 70px;
}

.background-pc{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.background-pc img{
	border-radius: 20px;
	width: 100%;
}

.background-sp{
	display: none;
}

.bike {
	position: absolute;
	top: 66%;
	width: 17%;
}

.walk {
	position: absolute;
	top: 67%;
	width: 12%;
}

.walk-02 {
	position: absolute;
	top: 65%;
	width: 8%;
}

.carbon{
	position: absolute;
	top: 48%;
	width: 12%;
}

.bus {
	position: absolute;
	top: 75%;
    left: -200px;
    width: 25%;
}

.tax{
	position: absolute;
	top: 85%;
    left: -200px;
    width: 25%;
}

.bus-02 {
	position: absolute;
	top: 75%;
    left: -200px;
    width: 20%;
}

.tax-02{
	position: absolute;
	top: 75%;
    left: -200px;
    width: 20%;
}

.cloud{
	position: absolute;
	top: 0%;
    left: -200px;
    width: 80%;
	opacity: .6;
}

.anime-carbon-bike img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 10s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-walk img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 15s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-walk-02 img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 16s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-walk-03 img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 23s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon img{
	  animation-name: animation-carbon;
	  animation-duration: 15s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-02 img{
	  animation-name: animation-carbon-02;
	  animation-duration: 10s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}


.anime-co2-bus img{
	  animation-name: animation-co2;
	  animation-duration: 10s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-co2-tax img{
	  animation-name: animation-co2;
	  animation-duration: 15s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-co2-bus-02 img{
	  animation-name: animation-co2;
	  animation-duration: 16s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-co2-tax-02 img{
	  animation-name: animation-co2;
	  animation-duration: 23s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-cloud img{
	  animation-name: animation-cloud;
	  animation-duration: 80s;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;
}

@keyframes animation-cloud{
	0% {
		transform: translateX(0px);
	}
	
	100% {
		transform: translateX(1300px);
	}
}

@keyframes animation-carbon-walk{
	0% {
		transform: translateX(0);
		opacity: 0;
	}
	
	20%{
		opacity: 0;
	}
	
	25%{
		opacity: 1;
	}
	
	100% {
		transform: translateX(1300px);
		opacity: 1;
	}
}

@keyframes animation-carbon{
	0% {
		opacity: 0;
		transform: translate(0,10px) scale(1);
	}
	
	50%{
		opacity: 0;
		transform: translate(655px,10px) scale(1);
	}
	
	51%{
		opacity: 1;
		transform: translate(665px,0px) scale(1.1);
	}
	
	52%{
		opacity: 1;
		transform: translate(675px,0px) scale(.8);
	}
	
	53%{
		opacity: 1;
		transform: translate(685px,0px) scale(1);
	}
	
	100% {
		opacity: 1;
		transform: translate(1300px,0);
	}
}

@keyframes animation-carbon-02{
	0% {
		opacity: 0;
		transform: translate(0,10px) scale(1);
	}
	
	35%{
		opacity: 0;
		transform: translate(505px,10px) scale(1);
	}
	
	36%{
		opacity: 1;
		transform: translate(515px,0px) scale(1.1);
	}
	
	37%{
		opacity: 1;
		transform: translate(525px,0px) scale(.8);
	}
	
	38%{
		opacity: 1;
		transform: translate(535px,0px) scale(1);
	}
	
	97% {
		opacity: 1;
		transform: translate(1300px,0);
	}
	
	100% {
		opacity: 1;
		transform: translate(1300px,0);
	}
}



@keyframes animation-co2{
	0%{
		transform: translateX(0);
		opacity: 1;
	}
	
	18%{
		opacity: 1;
	}
	
	22%{
		opacity: 0;
	}
	
	100%{
		transform: translateX(1300px);
		opacity: 0;
	}
}	
	

	
@media screen and (min-width: 768px) and (max-width: 1300px){
	
	#decarbonization_animetion_illust{
	position: relative;
	top: 0px;
	z-index: 10;
	width: 100%;
	max-width: 500px;
    margin: 100px 0;
	overflow: hidden;
}
	
.decarbonization_animetion h1{
	letter-spacing: 12px;
	line-height: 2;
	font-size: 2rem;
	margin-right: 0px;
	color: #06c;
}
}

@media screen and (max-width: 767px) {
	
.decarbonization_animetion{
	display: block;
	position: relative;
    padding: 50px 0px 0px 0px;
}
	
#decarbonization_animetion_illust{ 
	position: relative;
	top: 0px;
	z-index: 10;
	width: 100%;
	max-width: 1000px;
    margin: 0 0 100px 0;
	overflow: hidden;
}
	
.decarbonization_animetion h1{
	letter-spacing: 6px;
    line-height: 1.8;
    font-size: 1.5rem;
    color: #06c;
    position: absolute;
    z-index: 100;
	width: 100%;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
}


.text{
	position: absolute;
	top: 23%;
    left: 50%;
    height: auto;
	z-index: 100;
	width: 80%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	margin: 0;
	padding: 100px;
}

.background-pc{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.background-pc img{
	width: 100%;
	border-radius: 0px;
}

.background-sp{
	display: none;
}

.bike {
	position: absolute;
	top: 66%;
	width: 17%;
}

.walk {
	position: absolute;
	top: 67%;
	width: 12%;
}

.walk-02 {
	position: absolute;
	top: 65%;
	width: 8%;
}

.carbon{
	position: absolute;
	top: 48%;
	width: 12%;
}

.bus {
	position: absolute;
	top: 75%;
    left: -200px;
    width: 25%;
}

.tax{
	position: absolute;
	top: 85%;
    left: -200px;
    width: 25%;
}

.bus-02 {
	position: absolute;
	top: 75%;
    left: -200px;
    width: 20%;
}

.tax-02{
	position: absolute;
	top: 75%;
    left: -200px;
    width: 20%;
}

.cloud{
	position: absolute;
	top: 0%;
    left: -200px;
    width: 80%;
	opacity: .6;
}

.anime-carbon-bike img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 13s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-walk img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 18s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-walk-02 img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 19s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-walk-03 img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 26s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon img{
	  animation-name: animation-carbon;
	  animation-duration: 18s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-02 img{
	  animation-name: animation-carbon-02;
	  animation-duration: 13s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}


.anime-co2-bus img{
	  animation-name: animation-co2;
	  animation-duration: 13s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-co2-tax img{
	  animation-name: animation-co2;
	  animation-duration: 18s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-co2-bus-02 img{
	  animation-name: animation-co2;
	  animation-duration: 19s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-co2-tax-02 img{
	  animation-name: animation-co2;
	  animation-duration: 26s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-cloud img{
	  animation-name: animation-cloud;
	  animation-duration: 80s;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;
}

@keyframes animation-cloud{
	0% {
		transform: translateX(0px);
	}
	
	100% {
		transform: translateX(1000px);
	}
}

@keyframes animation-carbon-walk{
	0% {
		transform: translateX(0px);
		opacity: 0;
	}
	
	24%{
		opacity: 0;
	}
	
	27%{
		opacity: 1;
	}
	
	100% {
		transform: translateX(1000px);
		opacity: 1;
	}
}

@keyframes animation-carbon{
	0% {
		opacity: 0;
		transform: translate(0,10px) scale(1);
	}
	
	50%{
		opacity: 0;
		transform: translate(485px,10px) scale(1);
	}
	
	51%{
		opacity: 1;
		transform: translate(495px,0px) scale(1.1);
	}
	
	52%{
		opacity: 1;
		transform: translate(505px,0px) scale(.8);
	}
	
	53%{
		opacity: 1;
		transform: translate(515px,0px) scale(1);
	}
	
	100% {
		opacity: 1;
		transform: translate(1000px,0);
	}
}

@keyframes animation-carbon-02{
	0% {
		opacity: 0;
		transform: translate(0,10px) scale(1);
	}
	
	50%{
		opacity: 0;
		transform: translate(515px,10px) scale(1);
	}
	
	51%{
		opacity: 1;
		transform: translate(525px,0px) scale(1.1);
	}
	
	52%{
		opacity: 1;
		transform: translate(535px,0px) scale(.8);
	}
	
	53%{
		opacity: 1;
		transform: translate(545px,0px) scale(1);
	}
	
	100% {
		opacity: 1;
		transform: translate(1000px,0);
	}
}



@keyframes animation-co2{
	0%{
		transform: translateX(0);
		opacity: 1;
	}
	
	22%{
		opacity: 1;
	}
	
	25%{
		opacity: 0;
	}
	
	100%{
		transform: translateX(1000px);
		opacity: 0;
	}
}	

}


@media screen and (max-width: 480px) {
	
#co2{
	position: relative;
	top: 0px;
	z-index: 10;
	width: 100%;
	max-width: 1000px;
    margin: 40px auto;
	overflow: hidden;
}



.text{
	position: absolute;
	top: 23%;
    left: 50%;
    height: auto;
	z-index: 100;
	width: 100%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	margin: 0;
	padding: 20px;
}

.background-sp{
	display: block;
	width: 100%;
	margin: 0 auto;
}

.background-sp img{
	width: 100%;
}

.background-pc{
	display: none;
}

.bike {
	position: absolute;
	top: 66%;
	width: 28%;
}

.walk {
	position: absolute;
	top: 67%;
	width: 19%;
}

.walk-02 {
	position: absolute;
	top: 55%;
	width: 15%;
}

.carbon{
	position: absolute;
	top: 50%;
	width: 17%;
}

.bus {
	position: absolute;
	top: 75%;
    left: -200px;
    width: 35%;
}

.tax{
	position: absolute;
	top: 85%;
    left: -200px;
    width: 35%;
}

.bus-02 {
	position: absolute;
	top: 65%;
    left: -200px;
    width: 30%;
}

.tax-02{
	position: absolute;
	top: 65%;
    left: -200px;
    width: 30%;
}

.cloud{
	position: absolute;
	top: 10%;
    left: -200px;
    width: 100%;
	opacity: .6;
}

.anime-carbon-bike img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 12s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-walk img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 15s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-walk-02 img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 16s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-walk-03 img{
	  animation-name: animation-carbon-walk;
	  animation-duration: 23s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon img{
	  animation-name: animation-carbon;
	  animation-duration: 12s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-carbon-02 img{
	  animation-name: animation-carbon-02;
	  animation-duration: 15s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}


.anime-co2-bus img{
	  animation-name: animation-co2;
	  animation-duration: 12s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-co2-tax img{
	  animation-name: animation-co2;
	  animation-duration: 15s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-co2-bus-02 img{
	  animation-name: animation-co2;
	  animation-duration: 16s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-co2-tax-02 img{
	  animation-name: animation-co2;
	  animation-duration: 23s;
	  animation-timing-function: linear;
	  animation-delay: 0s;
	  animation-iteration-count: infinite;
}

.anime-cloud img{
	  animation-name: animation-cloud;
	  animation-duration: 60s;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;
}

@keyframes animation-cloud{
	0% {
		transform: translateX(0px);
	}
	
	100% {
		transform: translateX(500px);
	}
}

@keyframes animation-carbon-walk{
	0% {
		transform: translateX(0px);
		opacity: 0;
	}
	
	20%{
		opacity: 0;
	}
	
	25%{
		opacity: 1;
	}
	
	100% {
		transform: translateX(500px);
		opacity: 1;
	}
}

@keyframes animation-carbon{
	0% {
		opacity: 0;
		transform: translate(0,10px) scale(1);
	}
	
	40%{
		opacity: 0;
		transform: translate(215px,10px) scale(1);
	}
	
	41%{
		opacity: 1;
		transform: translate(220px,0px) scale(1.1);
	}
	
	42%{
		opacity: 1;
		transform: translate(225px,0px) scale(.8);
	}
	
	43%{
		opacity: 1;
		transform: translate(230px,0px) scale(1);
	}
	
	100% {
		opacity: 1;
		transform: translate(500px,0);
	}
}

@keyframes animation-carbon-02{
	0% {
		opacity: 0;
		transform: translate(0,10px) scale(1);
	}
	
	40%{
		opacity: 0;
		transform: translate(210px,10px) scale(1);
	}
	
	41%{
		opacity: 1;
		transform: translate(215px,0px) scale(1.1);
	}
	
	42%{
		opacity: 1;
		transform: translate(220px,0px) scale(.8);
	}
	
	43%{
		opacity: 1;
		transform: translate(225px,0px) scale(1);
	}
	
	100% {
		opacity: 1;
		transform: translate(500px,0);
	}
}



@keyframes animation-co2{
	0%{
		transform: translateX(0);
		opacity: 1;
	}
	
	18%{
		opacity: 1;
	}
	
	23%{
		opacity: 0;
	}
	
	100%{
		transform: translateX(1000px);
		opacity: 0;
	}
}	

}