/* lecture/lec05.html
-----------------------------------------------------------*/
#lec05 .g-contents #svgChart{
    width: 100%;
    height: 450px;
	padding: 8px;
	background: #fff;
}
#lec05 .g-contents #svgChart img{
	display: block;
}
#lec05 .g-contents #svgChart #svgChartInner {
    width: 100%;
    height: 100%;
	position: relative;
    overflow: hidden;
}

#lec05 .g-contents #svgChart #figBg img {display: block;}


#lec05 .g-contents #svgChart #arw01R.inviewShow{
	position: absolute;
    top: 51px;
    left: 296px;
    width: 79px;
    height: 120px;
    z-index: 2;
	opacity: 0;
	-webkit-animation-name: arw01;
    animation-name: arw01;
	animation-duration: 7.5s;
	animation-delay: 2s;
    animation-fill-mode: forwards;
}
#lec05 .g-contents #svgChart #arw01L.inviewShow{
	position: absolute;
    top: 120px;
    left: 208px;
    width: 75px;
    height: 83px;
    z-index: 2;
	opacity: 0;
	-webkit-animation-name: arw01;
    animation-name: arw01;
	animation-duration: 8.5s;
	animation-delay: 1s;
    animation-fill-mode: forwards;
}
@keyframes arw01 {
    0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 1;}
    60% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0;}
}


#lec05 .g-contents #svgChart #arw02.inviewShow{/*グレーの矢印*/
	position: absolute;
    top: 214px;
    left: 356px;
    width: 40px;
    height: 88px;
    z-index: 6;
    overflow: hidden;
}
#lec05 .g-contents #svgChart #arw02.inviewShow img{
	position: absolute;
    top: 88px;
    left: 0;
    width: 40px;
    height: 88px;
	-webkit-animation-name: arw02;
    animation-name: arw02;
	animation-duration: 3.5s;
	animation-delay: 5.0s;
    animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes arw02 {
	0%{opacity: 0;}
	20%{opacity: 1; top: 0px;}
	90%{opacity: 1; top: 0px;}
    100% {opacity: 0; top: 0px;}
}


#lec05 .g-contents #svgChart #arw03.inviewShow{
	position: absolute;
    top: 110px;
    left: 303px;
    width: 196px;
    height: 187px;
    z-index: 10;
    overflow: hidden;
}
#lec05 .g-contents #svgChart #arw03.inviewShow img{
	position: absolute;
	z-index: 10;
	-webkit-animation-name: arw03;
    animation-name: arw03;
	animation-duration: 1.5s;
	animation-delay: 9s;
    animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes arw03 {
    0% {
        opacity: 0;
        top: -187px;
        left: -196px;
    }
    100% {
        opacity: 1;
        top: 0px;
        left: 0px;
    }
}



#lec05 .g-contents #svgChart #homeAppliances.inviewShow{
	position: absolute;
    width: 183px;
    height: 99px;
    z-index: 10;
    top: 313px;
    left: 284px;
	z-index: 5;
}
#lec05 .g-contents #svgChart #homeAppliances.inviewShow svg{
	-webkit-animation-name: homeAppliances;
    animation-name: homeAppliances;
	animation-duration: 12s;
	animation-delay: 0s;
    animation-fill-mode: forwards;
	opacity: 0;
	stroke: #CECECE;
}
@keyframes homeAppliances {
    0% {
        opacity: 1;
    	stroke: #CECECE;
    }
    40% {
        opacity: 1;
    	stroke: #CECECE;
    }
    50% {
        opacity: 1;
        stroke: #9E9E9E;
    }
    100% {
        opacity: 1;
        stroke: #9E9E9E;
    }
}
#lec05 .g-contents #svgChart #cloud.inviewShow{
	position: absolute;
    z-index: 4;
    top: 226px;
    left: 288px;
    width: 158px;
    height: 116px;
	-webkit-animation-name: cloud;
    animation-name: cloud;
	animation-duration: 5.5s;
	animation-delay: 4.5s;
}
@keyframes cloud {
	0%{opacity: 0;}
	20%{opacity: 1;}
	90%{opacity: 1;}
	100%{opacity: 0;}
}

#lec05 .g-contents #svgChart #explosion.inviewShow{
	position: absolute;
    z-index: 6;
    top: 125px;
    left: 327px;
    width: 97px;
    height: 96px;
	-webkit-animation-name: explosion;
    animation-name: explosion;
	animation-duration: 2.5s;
	animation-delay: 6.5s;
	opacity: 0;
}
@keyframes explosion {
	0%{opacity: 0;}
	10%{opacity: 1;}
	90%{opacity: 1;}
	100%{opacity: 0;}
}
#lec05 .g-contents #svgChart #explosion.inviewShow .animate__bounceIn {
	animation-iteration-count: infinite;
}
#lec05 .g-contents #svgChart #mask.inviewShow{
	position: absolute;
    z-index: 5;
    top: 125px;
    left: 327px;
    width: 97px;
    height: 96px;
	border-radius: 50%;
	background: #fff;
	-webkit-animation-name: mask; 	
	animation-name: mask; 
	animation-duration: 2s;
	animation-delay: 9.0s;
}
@keyframes mask {
	0%{opacity: 0;} 	
	100%{opacity: 1;} 	
}

#lec05 .g-contents #svgChart #text00{/*オゾン層*/
	position: absolute;
    width: 4em;
    height: 2em;
    top: 118px;
    left: 624px;
    z-index: 10;
}
#lec05 .g-contents #svgChart #text00:before{
	position: absolute;
	content: "";
	bottom: -55px;
	left: 49%;
	border-left: 1px solid #000;
	height: 55px;
}

#lec05 .g-contents #svgChart #text01.inviewShow{/*有害な紫外線*/
	position: absolute;
    width: 4em;
    height: 2.5em;
    z-index: 7;
    top: 76px;
    left: 377px;
    line-height: 1.05rem;
	-webkit-animation-name: text01;
    animation-name: text01;
	animation-duration: 5.5s;
	animation-delay: 2.5s;
	opacity: 0;
}
@keyframes text01 {
	0%{opacity: 0;}
	10%{opacity: 1;}
	90%{opacity: 1;}
	100%{opacity: 0;}
}
#lec05 .g-contents #svgChart #text02.inviewShow{/*塩素を含む冷媒（CFC、HCFC）*/
	position: absolute;
    width: 8em;
    height: 3em;
    z-index: 6;
    top: 258px;
    left: 522px;
    line-height: 1.05rem;
	-webkit-animation-name: text02;
    animation-name: text02;
	animation-duration: 5s;
	animation-delay: 4.5s;
	opacity: 0;
}
@keyframes text02 {
	0%{opacity: 0;}
	10%{opacity: 1;}
	90%{opacity: 1;}
	100%{opacity: 0;}
}
#lec05 .g-contents #svgChart #text02.inviewShow:before{
	position: absolute;
	top: 0.4em;
	left: -98px;
	content: "";
	border-top: 1px solid #000;
	width: 88px;
}
#lec05 .g-contents #svgChart #text03.inviewShow{/*塩素がオゾンと反応しオゾン層が破壊される*/
	position: absolute;
    width: 11em;
    height: 2.5em;;
    z-index: 8;
    top: 76px;
    left: 387px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: bold;
	-webkit-animation-name: text03;
    animation-name: text03;
	animation-duration: 1s;
	animation-delay: 9.5s;
}
@keyframes text03 {
	0%{opacity: 0;}
	100%{opacity: 1;}
}

#lec05 .g-contents #svgChart #text04.inviewShow{/*有害な紫外線が地球へ*/
	position: absolute;
    width: 8em;
    height: 2.6em;
    top: 204px;
    left: 460px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: bold;
	-webkit-animation-name: text04; 	
	animation-name: text04; 	
	animation-duration: 1s;
	animation-delay: 10.5s;
}
@keyframes text04 {
	0%{opacity: 0;}
	100%{opacity: 1;}
}





/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Tablets
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width: 959px) {
    #lec05 .g-contents #svgChart #svgChartInner{
		margin-left: -10%;
		width: 110%;
	}
    #lec05 .g-contents #svgChart #figBg img{
		width: auto;
		height: 434px;
	}

}
@media screen and (max-width: 768px) {
    #lec05 .g-contents #svgChart #svgChartInner{
		margin-left: -15%;
		width: 115%;
	}
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width: 767px) {

	#lec05 .g-contents #svgChart{
    	height: auto;
		padding: 4px;
	}
    #lec05 .g-contents #svgChart #svgChartInner{
		margin-left: 0%;
		width: 100%;
	}
	#lec05 .g-contents #svgChart #figBg img{
		width: 120%;
		height: auto !important;
		margin-left: -10%;
	}
	#lec05 .g-contents #svgChart #arw01R.inviewShow{
	    top: calc(51 / 944 * 100vw);
    	left: calc(296 / 944 * 80vw);
    	width: calc(79 / 944 * 120vw);
    	height: calc(120 / 944 * 120vw);
	}
	#lec05 .g-contents #svgChart #arw01L.inviewShow{
		top: calc(120 / 944 * 100vw);
		left: calc(208 / 944 * 65vw);
		width: calc(75 / 944 * 120vw);
		height: calc(83 / 944 * 120vw);
	}
	#lec05 .g-contents #svgChart #arw02.inviewShow{/*グレーの矢印*/
    	top: calc(214 / 944 * 105vw);
    	left: calc(356 / 944 * 85vw);
    	width: calc(40 / 944 * 115vw);
    	height: calc(88 / 944 * 115vw);
	}
	#lec05 .g-contents #svgChart #arw02.inviewShow img{
		width: calc(40 / 944 * 115vw);
    	height: calc(88 / 944 * 115vw);
	}
	@keyframes arw02 {
		0%{opacity: 0; top: calc(88 / 944 * 100vw);}
		20%{opacity: 1; top: 0px;}
		90%{opacity: 1; top: 0px;}
    	100% {opacity: 0; top: 0px;}
	}

	#lec05 .g-contents #svgChart #arw03.inviewShow{
		top: calc(110 / 944 * 100vw);
    	left: calc(303 / 944 * 75vw);
    	width: calc(196 / 944 * 115vw);
    	height: calc(187 / 944 * 115vw);
	}
	@keyframes arw03 {
    	0% {
        	opacity: 0;
        	top: calc(-187 / 944 * 100vw);
        	left: calc(-196 / 944 * 100vw);
    	}
	    100% {
    	    opacity: 1;
        	top: 0px;
        	left: 0px;
    	}
	}

	#lec05 .g-contents #svgChart #homeAppliances.inviewShow{
	    top: calc(313 / 944 * 108vw);
    	left: calc(284 / 944 * 80vw);
	    width: calc(183 / 944 * 115vw);
    	height: calc(99 / 944 * 115vw);
	}
	#lec05 .g-contents #svgChart #cloud.inviewShow{
	    top: calc(226 / 944 * 108vw);
    	left: calc(288 / 944 * 75vw);
    	width: calc(158 / 944 * 115vw);
    	height: calc(116 / 944 * 115vw);
	}
	#lec05 .g-contents #svgChart #explosion.inviewShow{
	    top: calc(125 / 944 * 105vw);
    	left: calc(327 / 944 * 80vw);
    	width: calc(97 / 944 * 115vw);
    	height: calc(96 / 944 * 115vw);
	}
	#lec05 .g-contents #svgChart #mask.inviewShow{
	    top: calc(125 / 944 * 105vw);
    	left: calc(327 / 944 * 80vw);
    	width: calc(97 / 944 * 115vw);
    	height: calc(96 / 944 * 115vw);
	}



	#lec05 .g-contents #svgChart #text00{/*オゾン層*/
	    top: calc(118 / 944 * 125vw);
    	left: calc(624 / 944 * 100vw);
    	width: calc(100 / 944 * 115vw);
    	height: calc(20 / 944 * 115vw);
		display:block;
		font-size: 10px;
		transform: scale(0.8);
		transform-origin:0 0;
	}
		#lec05 .g-contents #svgChart #text00:before{
		bottom: -37px;
		left: 27%;
		height: calc(55 / 944 * 120vw);
	}
	#lec05 .g-contents #svgChart #text01.inviewShow{/*有害な紫外線*/
    	top: calc(76 / 944 * 100vw);
	    left: calc(377 / 944 * 90vw);
	    width: calc(150 / 944 * 115vw);
    	height: calc(75 / 944 * 115vw);
		display:block;
		font-size: 10px;
		transform: scale(0.8);
		transform-origin:0 0;
		line-height: 1.25;
	}
	#lec05 .g-contents #svgChart #text02.inviewShow{/*塩素を含む冷媒（CFC、HCFC）*/
	    top: calc(258 / 944 * 110vw);
    	left: calc(522 / 944 * 90vw);
    	width: calc(200 / 944 * 115vw);
    	height: calc(75 / 944 * 115vw);
		display:block;
		font-size: 10px;
		transform: scale(0.8);
		transform-origin:0 0;
		line-height: 1.25;
	}
	#lec05 .g-contents #svgChart #text02.inviewShow:before{
		top: calc(10 / 944 * 100vw);
		left: calc(-98 / 944 * 110vw);
		width: calc(88 / 944 * 115vw);
	}
	#lec05 .g-contents #svgChart #text03.inviewShow{/*塩素がオゾンと反応しオゾン層が破壊される*/
		top: calc(76 / 944 * 100vw);
    	left: calc(387 / 944 * 75vw);
    	width: calc(250 / 944 * 115vw);
    	height: calc(75 / 944 * 115vw);
		font-size: 10px;
	}
	#lec05 .g-contents #svgChart #text04.inviewShow{/*有害な紫外線が地球へ*/
	    top: calc(204 / 944 * 110vw);
    	left: calc(460 / 944 * 95vw);
    	width: calc(250 / 944 * 115vw);
    	height: calc(75 / 944 * 115vw);
		font-size: 10px;
	}






}