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



/*---------------wrapper----------------*/
#task:after {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: '';
    background-image: url(../img/common/backimg.png);
    background-repeat: no-repeat;
    background-position: center 270px;
}
#task:before {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 120px;
	left: 0;
	content: '';
    background-image: url(../img/task/backimg2.png);
    background-repeat: no-repeat;
    background-position: center -700px;
}
#task #container {
	z-index: 2;
}
#task .logarea .nextarea .next_btn {
    background-image: url(../img/task/next_btn.jpg);
}
#task.next_off .logarea .nextarea .next_btn {
	background-image: url(../img/next_btn_gray.jpg);/*クリック後3秒間はクリック無効（背景グレーアウト）*/
}
#task .title {
	text-align: center;
	padding-top: 20px;
}

.ebisu2 {
    position: absolute;
    left: 69px;
    z-index: 1;
    width: 180px;
    bottom: 40px;
}
.ebisu3 {
	opacity: 0;
    position: absolute;
    left: 100px;
    z-index: 1;
    width: 140px;
    bottom: 48px;
}

.active4 .ebisu2 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.5s;
	animation-delay: 0s;
}
.active4 .ebisu3 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0s;
}

.active6 .ebisu3 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.5s;
	animation-delay: 0s;
}
.active6 .ebisu2 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
.active10 .ebisu2 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.5s;
	animation-delay: 0s;
}
.active10 .ebisu3 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
.active14 .ebisu3 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.5s;
	animation-delay: 0s;
}
.active14 .ebisu2 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0s;
}

#task .user1 {
	position: absolute;
	right: 60px;
	bottom: 10px;
	z-index: 1;
}
#task .user5 {
	opacity: 0;
	position: absolute;
	right: 60px;
	bottom: 10px;
	z-index: 1;
}
#task .user2 {
	opacity: 0;
	position: absolute;
	right: 60px;
	bottom: 10px;
	z-index: 1;
}
#task .user3,
#task .user4,
#task .user6,
#task .user7,
#task .user8,
#task .user9 {
	opacity: 0;
	position: absolute;
	right: 60px;
	bottom: 10px;
	z-index: 1;
}
#task .quiz {
	position: absolute;
	top: 0;
	left: 56px;
}
#task .chart_list_title {
	position: absolute;
	top: 100px;
	left: 80px;
}
#task .chart1 {
	position: absolute;
	top: 12px;
	left: 10px;
}
#task .quiz > figure,
#task .chart_list_title > figure {
	margin-bottom: 5px;
}
#task .quiz ul,
#task .chart_list_title ul {
	margin: 0 0 0 50px;
	padding: 0;
}
#task .quiz ul li {
	opacity: 0;
	list-style: none;
	margin-bottom: 10px;
}
#task .chart_list_title ul li {
	list-style: none;
	margin-bottom: 4px;
}
#task .quiz .quiz_title {
	opacity: 0;
	margin-bottom: 8px;
	text-align: center;
}
.quiz ul figure,
.chart_list_title ul figure {
	width: 787px;
	height: 44px;
	perspective: 500px;
	-webkit-perspective: 500px;
}
.quiz ul figure div,
.chart_list_title ul figure div {
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: 0.25s;
	-webkit-transition: 0.25s;
}
.quiz ul span,
.chart_list_title ul span {
    position: absolute;
    box-sizing: border-box;
    line-height: 50px;
    font-size: 17pt;
    text-transform: uppercase;
}
.quiz ul span {
    width: 787px;
    height: 44px;
}
.chart_list_title ul span {
    width: 238px;
    height: 44px;
}
.quiz ul span:nth-child(1),
.chart_list_title ul span:nth-child(1) {
    color: #fff;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}
.quiz ul span:nth-child(2),
.chart_list_title ul span:nth-child(2) {
	color: #fff;
	background-color: #ff8522;
	transform: rotateX(90deg) translate3d(0, 0, 0);
	-webkit-transform: rotateX(90deg) translate3d(0, 0, 0);
    background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 44px;
}


@media all and (-ms-high-contrast: none) {
	/*ieではクイズパネルの回転ができないためアニメーション削除及び代替措置*/
	.quiz {
		opacity: 0;
	}
	#task .quiz ul li:nth-child(4){
		display: none;
	}
	.quiz ul figure {
		perspective: none;
		-webkit-perspective: none;
	}
	.quiz ul figure div {
		transform-style: flat;
		-webkit-transform-style: flat;
		transition: 0;
		-webkit-transition: 0;
	}
	.quiz ul span:nth-child(1) {
		transform: none;
		-webkit-transform: none;
	}
	.quiz ul span:nth-child(2) {
		transform: none;
		-webkit-transform: none;
	}
	.chart_list_title {
		opacity: 1;
	}
	.chart_list_title ul figure {
		perspective: none;
		-webkit-perspective: none;
	}
	.chart_list_title ul figure div {
		transform-style: flat;
		-webkit-transform-style: flat;
		transition: 0;
		-webkit-transition: 0;
	}
	.chart_list_title ul span:nth-child(1),
	.chart_list_title ul span:nth-child(2) {
		transform: none;
		-webkit-transform: none;
	}

}/*ie措置 end*/

.quiz ul li:nth-child(1) span:nth-child(2) {
	background-image: url(../img/task/quiz1_2.jpg);
}
.quiz ul li:nth-child(2) span:nth-child(2) {
	background-image: url(../img/task/quiz1_3.jpg);
}
.quiz ul li:nth-child(3) span:nth-child(2) {
	background-image: url(../img/task/quiz1_4.jpg);
}
.quiz ul li:nth-child(4) span:nth-child(2) {
	background-image: url(../img/task/quiz1_5.jpg);
}
.chart_list_title ul li:nth-child(1) span:nth-child(2) {
	background-image: url(../img/task/chart_list_title1.jpg);
}
.chart_list_title ul li:nth-child(2) span:nth-child(2) {
	background-image: url(../img/task/chart_list_title2.jpg);
}
.chart_list_title ul li:nth-child(3) span:nth-child(2) {
	background-image: url(../img/task/chart_list_title3.jpg);
}
.chart_list_title ul li:nth-child(4) span:nth-child(2) {
	background-image: url(../img/task/chart_list_title4.jpg);
}

.annotation {
	opacity: 0;
	font-size: 13px;
	position: absolute;
	left: 270px;
	bottom: 125px;
	margin: 0;
}
.report {
	width: 900px;
	position: absolute;
	top: 0;
	/*left: 50%;
	transform: translateX(-50%);*/
}
.report1 {
	opacity: 0;
	position: absolute;
	left: -800px;
}
.report2 {
	opacity: 0;
	position: absolute;
	top: 800px;
	left: 50%;
	transform: translateX(-50%);
}
.report3 {
	opacity: 0;
	position: absolute;
	right: -800px;
}
.report4 {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 114px;
	/*transform: translateX(-50%);*/
}
.chartwrap,
.baitaiwrap {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
}
.snswrap {
	position: absolute;
	top: 0;
	left: 130px;
	width: 763px;	
}
.charttitle {
	opacity: 0;
	width: 900px;
	position: absolute;
	top: 0;
	text-align: center;
}
.chart_list_title {
	opacity: 0;
	position: absolute;
	top: 85px;
	left: 125px;
}
.chart1 figure {
	position: absolute;
}
.chart1 figure img {
	vertical-align: middle;
}
.chart1 .chart1_a1 {
	opacity: 0;
	top: 0;
	left: -800px;
}
.chart1 .chart1_a2 {
	opacity: 0;
	top: 0;
	left: -800px;
}
.chart1 .chart1_b1 {
	opacity: 0;
	top: 104px;
	left: -800px;
}
.chart1 .chart1_c1 {
	opacity: 0;
	top: 208px;
	left: -800px;
}
.chart1 .chart1_c2 {
	opacity: 0;
	top: 208px;
	left: -800px;
}
.chart1 .chart1_cv1 {
	opacity: 0;
	top: 0;
	left: -800px;
}
.chart1 .chart1_cv2 {
	opacity: 0;
	top: 104px;
	left: -800px;
}
.chart1 .chart1_cv3 {
	opacity: 0;
	top: 208px;
	left: -800px;
}
.chart1 .chart1_next1 {
	opacity: 0;
	top: 29.5px;
	left: -800px;
}
.chart1 .chart1_next2 {
	opacity: 0;
	top: 29.5px;
	left: -800px;
}
.chart1 .chart1_next3 {
	opacity: 0;
	top: 133px;
	left: -800px;
}
.chart1 .chart1_next4 {
	opacity: 0;
	top: 238px;
	left: -800px;
}
.chart1 .chart1_next5 {
	opacity: 0;
	top: 238px;
	left: -800px;
}
.next_title {
	opacity: 0;
	position: absolute;
	top: 55px;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
	text-align: center;
}

.chart1 .chart1_a1,
.chart1 .chart1_a2,
.chart1 .chart1_b1,
.chart1 .chart1_c1,
.chart1 .chart1_c2,
.chart1 .chart1_cv1,
.chart1 .chart1_cv2,
.chart1 .chart1_cv3 {
	width: 115px;
	height: 92px;
}
.chart1 .chart1_next1,
.chart1 .chart1_next2,
.chart1 .chart1_next3,
.chart1 .chart1_next4,
.chart1 .chart1_next5 {
	width: 44px;
	height: 33px;
}
.chart1 figure {
	width: 100%;
	height: auto;
}
.snswrap .sns1 {
	opacity: 0;
	position: absolute;
	top: 92px;
	left: -800px;
}
.snswrap .sns2 {
	opacity: 0;
	position: absolute;
	top: 92px;
	left: -800px;
}
.snswrap .sns3 {
	opacity: 0;
	position: absolute;
	top: 92px;
	left: -800px;
}
.snswrap .sns4 {
	opacity: 0;
	position: absolute;
	top: 92px;
	left: -800px;
}
.snswrap .sns_right1 {
	opacity: 0;
	position: absolute;
	top: 125px;
	left: -800px;
}
.snswrap .sns_right2 {
	opacity: 0;
	position: absolute;
	top: 125px;
	left: -800px;
}
.snswrap .sns_right3 {
	opacity: 0;
	position: absolute;
	top: 125px;
	left: -800px;
}
.snswrap .sns_sub1 {
	opacity: 0;
	position: absolute;
	top: 75px;
	left: 14px;
	z-index: 1;
}
.snswrap .sns_sub2 {
	opacity: 0;
	position: absolute;
	top: 75px;
	left: 230px;
}
.snswrap .sns_sub3 {
	opacity: 0;
	position: absolute;
	top: 75px;
	left: 446px;
}
.snswrap .sns_subsub1 {
	opacity: 0;
	position: absolute;
	top: 156px;
	left: 30px;
}
.snswrap .sns_subsub2 {
	opacity: 0;
	position: absolute;
	top: 156px;
	left: 246px;
}
.baitaiwrap {
	text-align: center;
	opacity: 0;
}
.baitaiwrap .baitaiword1 {
	position: absolute;
	top: 147px;
	left: 535px;
}
.baitaiwrap .baitaiword2 {
	opacity: 0;
	position: absolute;
	top: 147px;
	left: 535px;
}
.baitaiwrap .baitai_element1,
.baitaiwrap .baitai_element_gray1 {
	position: absolute;
	top: 121px;
	left: 145px;
}
.baitaiwrap .baitai_element2,
.baitaiwrap .baitai_element_gray2 {
	position: absolute;
	top: 121px;
	left: 271px;
}
.baitaiwrap .baitai_element3,
.baitaiwrap .baitai_element_gray3 {
	position: absolute;
	top: 121px;
	left: 398px;
}
.baitaiwrap .baitai_element_gray1,
.baitaiwrap .baitai_element_gray2,
.baitaiwrap .baitai_element_gray3 {
	opacity: 0;
}
.baitaiwrap .baitai_right1 {
	opacity: 0;
	position: absolute;
	top: 48px;
	left: 185px;
	width: 27px;
}
.baitaiwrap .baitai_right2 {
	opacity: 0;
	position: absolute;
	top: 48px;
	left: 311px;
	width: 27px;
}
.baitaiwrap .baitai_right3 {
	opacity: 0;
	position: absolute;
	top: 48px;
	left: 437px;
	width: 27px;
}
.baitaiwrap .baitai_right4 {
	opacity: 0;
	position: absolute;
	top: 48px;
	left: 563px;
	width: 27px;
}

#task:after,
#task:before,
#task .title,
#task .commentwrap figure,
#task .quiz,
#task .quiz .quiz_title,
#task .quiz ul li:not(:last-child),
#task .quiz ul li:last-child,
#task .quiz ul li figure div,
#task .chart_list_title,
#task .chart_list_title ul li:not(:last-child),
#task .chart_list_title ul li:last-child,
#task .chart_list_title ul li figure div,
#task .annotation,
#task .personwrap figure,
#task .messagearea p,
#task .report figure,
.charttitle,
.chart_list_title,
.chart1 figure,
.chart1 img,
.snswrap figure,
.baitaiwrap figure {
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode:forwards;
}
#task.active7:before {
	opacity: 0;
	transition: 0.3s
}
#task.active3 .user1 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}

#task.active2 .ebisu {
	bottom: 40px;
	animation-name: ebisu2;
	animation-duration: 0.3s;
	animation-delay: 0s;
}

#task.active3 .user2 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}
#task.active3 .user2 {
	opacity: 1;
}
#task.active5 .user2 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active5 .user7 {
	right: 60px;
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active7 .user7 {
	animation-name: fadeout;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
#task.active7 .user1 {
	right: 60px;
	bottom: 10px;
	opacity: 0;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active7 .user5 {
	right: 60px;
	bottom: 10px;
	opacity: 1;
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .user5 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .user8 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
#task.active11 .user8 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .user3 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
#task.active13 .user3 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .user2 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
#task.active14 .user2 {
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0.1s;
}
#task.active14 .user3 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
#task.active15 .user3 {
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0.1s;
}
#task.active15 .user1 {
	opacity: 1;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
#task.active16 .user1 {
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0.1s;
}

#task.active16 .user7 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
#task.active17 .user7 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active17 .user5 {
	bottom: 10px;
	right: 60px;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
#task.active18 .user5 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active18 .user9 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
#task.active19 .user9 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active19 .user1 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
#task.active20 .user1 {
	opacity: 1;
}
#task.active21 .user1 {
	opacity: 1;

}


#task .log1 {
	animation-name: log1;
	animation-duration: 1s;
	animation-delay: 1.1s;
}
#task.active1 .log1 {
	animation-name: fadeout;
	animation-duration: 2s;
	animation-delay: 1.1s;
}
#task.active1 .log2 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active2 .log2 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active2 .log3 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active3 .log3 {
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active3 .log4 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active4 .log4 {
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active4 .log5 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active5 .log5 {
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active5 .log6 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active6 .log6 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active6 .log7 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active7 .log7 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active7 .log8 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active8 .log8 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active8 .log8_2 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active9 .log8_2 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active9 .log9 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active10 .log9 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active10 .log10 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active11 .log10 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active11 .log11 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active12 .log11 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active12 .log12 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active13 .log12 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active13 .log13 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active14 .log13 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active14 .log14 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active15 .log14 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active15 .log15 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active16 .log15 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active16 .log16 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active17 .log16 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active17 .log17 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active18 .log17 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active18 .log18 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active19 .log18 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active19 .log19 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active20 .log19 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active20 .log20 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active21 .log20 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active21 .log21 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active22 .log21 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
#task.active22 .log22 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}


#task.active1:after {
	animation-name: fadeout;
	animation-duration: 0.1s;
}
#task.active1:before {
	animation-name: backimg1;
	animation-duration: 0.4s;
	animation-delay: 0.3s;
}
#task.active1 .title {
	animation-name: title;
	animation-duration: 0.8s;
}
#task .comment1 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 300px;
	animation-name: comment1;
	animation-duration: 1s;
	animation-delay: 2.5s;
}
#task .comment2 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 300px;
}
#task .comment3 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 300px;
}
#task .comment4 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment5 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment6 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment7 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment8 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment9 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment10 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment11 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment12 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment13 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment14 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 330px;
}
#task .comment15 {
	opacity: 0;
	position: absolute;
	right: 325px;
	top: 320px;
}
#task .comment16 {
	opacity: 0;
	position: absolute;
	right: 300px;
	top: 320px;
}
#task .comment17 {
	opacity: 0;
	position: absolute;
	right: 310px;
	top: 330px;
	z-index: 3;
}
#task .comment18 {
	opacity: 0;
	position: absolute;
	right: 268px;
	top: 248px;
	z-index: 3;
}

#task.active1 .comment1 {
	animation-name: comment2;
	animation-duration: 0.8s;
}
#task.active1 .comment2 {
	animation-name: comment1;
	animation-duration: 0.8s;
	animation-delay: 2.5s;
}
#task.active2 .comment2 {
	animation-name: comment2;
	animation-duration: 0.8s;
}
#task.active2 .comment3 {
	animation-name: comment1;
	animation-duration: 0.8s;
	animation-delay: 2s;
}
#task.active3 .comment3 {
	animation-name: comment2;
	animation-duration: 0.3s;
}
#task.active4 .comment4 {
	animation-name: comment1;
	animation-duration: 0.3s;
	animation-delay: 2s;
}
#task.active5 .comment4 {
	animation-name: comment2;
	animation-duration: 0.3s;
}
#task.active5 .comment5 {
	animation-name: comment1;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active6 .comment5 {
	animation-name: comment2;
	animation-duration: 0.3s;
}
#task.active8 .comment6 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2s;
}
#task.active9 .comment6 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active9 .comment7 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active11 .comment7 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active11 .comment8 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active12 .comment8 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active12 .comment9 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active13 .comment9 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active13 .comment10 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active14 .comment10 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active14 .comment11 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active15 .comment11 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active15 .comment12 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active16 .comment12 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active16 .comment13 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 4s;
}
#task.active17 .comment13 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active17 .comment14 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active18 .comment14 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active18 .comment15 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active19 .comment15 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active19 .comment16 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2s;
}
#task.active20 .comment16 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active20 .comment17 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.5s;
}
#task.active21 .comment17 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}

#task.active2 #container {
	transition: 0.3s;
	background-color: hsla(0,0%,100%,0.85);
}
#task.active2 .quiz ul li:not(:last-child) {
	animation-name: quiz1;
	animation-duration: 0.3s;
}
#task.active2 .quiz ul li:not(:last-child) figure div {
	animation-name: quiz2;
	animation-duration: 0.3s;
}
#task.active2 .quiz ul li:nth-child(1) figure div {
	animation-delay: 1.5s;
}
#task.active2 .quiz ul li:nth-child(2) figure div {
	animation-delay: 1.6s;
}
#task.active2 .quiz ul li:nth-child(3) figure div {
	animation-delay: 1.7s;
}
#task.active3 .quiz .quiz_title {
	animation-name: quiz3;
	animation-duration: 0.3s;
}
#task.active3 .quiz ul li:last-child {
	animation-name: quiz3;
	animation-duration: 0.3s;
}
#task.active3 .quiz ul li:last-child figure div {
	animation-name: quiz2;
	animation-duration: 0.3s;
}
#task.active3 .quiz ul li:nth-child(4) figure div {
	animation-delay: 1s;
}
#task.active4 .quiz ul li:nth-child(1) span:nth-child(1) {
	background-image: url(../img/task/quiz1_2_gray.jpg);
}
#task.active4 .quiz ul li:nth-child(2) span:nth-child(1) {
	background-image: url(../img/task/quiz1_3_gray.jpg);
}
#task.active4 .quiz ul li:nth-child(3) span:nth-child(1) {
	background-image: url(../img/task/quiz1_4_gray.jpg);
}
#task.active4 .quiz ul li:nth-child(1) figure div,
#task.active4 .quiz ul li:nth-child(2) figure div,
#task.active4 .quiz ul li:nth-child(3) figure div {
	transform: rotateX(90deg);
	animation-name: quiz4;
	animation-duration: 0.3s;
}
#task.active4 .quiz ul li:nth-child(1) figure div {
	animation-delay: 0s;
}
#task.active4 .quiz ul li:nth-child(2) figure div {
	animation-delay: 0s;
}
#task.active4 .quiz ul li:nth-child(3) figure div {
	animation-delay: 0s;
}
@media all and (-ms-high-contrast: none) {
	/*ieではクイズパネルの回転ができないためアニメーション削除及び代替措置*/
	#task.active2 .quiz {
		opacity: 1;
	}
	#task.active3 .quiz ul li:nth-child(4) {
		display: block;
	}
	#task.active4 .quiz ul li:nth-child(1),
	#task.active4 .quiz ul li:nth-child(2),
	#task.active4 .quiz ul li:nth-child(3) {
		opacity: 1;
	}
	#task.active2 .quiz ul li:not(:last-child) figure div,
	#task.active3 .quiz ul li:last-child figure div,
	#task.active4 .quiz ul li:nth-child(1) figure div,
	#task.active4 .quiz ul li:nth-child(2) figure div,
	#task.active4 .quiz ul li:nth-child(3) figure div {
		animation-name: none;
		transform: none;
	}
	#task.active4 .quiz ul li:nth-child(1) span:nth-child(2) {
		background-image: url(../img/task/quiz1_2_gray.jpg);
	}
	#task.active4 .quiz ul li:nth-child(2) span:nth-child(2) {
		background-image: url(../img/task/quiz1_3_gray.jpg);
	}
	#task.active4 .quiz ul li:nth-child(3) span:nth-child(2) {
		background-image: url(../img/task/quiz1_4_gray.jpg);
	}

}/*ie措置 end*/

#task.active9 .chart_list_title ul li figure div {
	animation-name: quiz2;
	animation-duration: 0.3s;
}
#task.active9 .chart_list_title ul li:nth-child(1) figure div {
	animation-delay: 1.5s;
}
#task.active9 .chart_list_title ul li:nth-child(2) figure div {
	animation-delay: 1.6s;
}
#task.active9 .chart_list_title ul li:nth-child(3) figure div {
	animation-delay: 1.7s;
}
#task.active9 .chart_list_title ul li:nth-child(4) figure div {
	animation-delay: 1.8s;
}
#task.active10 .chart_list_title ul li:nth-child(1) span:nth-child(1) {
	background-image: url(../img/task/chart_list_title1_gray.jpg);
}
#task.active10 .chart_list_title ul li:nth-child(2) span:nth-child(1) {
	background-image: url(../img/task/chart_list_title2_gray.jpg);
}
#task.active10 .chart_list_title ul li:nth-child(3) span:nth-child(1) {
	background-image: url(../img/task/chart_list_title3_gray.jpg);
}
#task.active10 .chart_list_title ul li:nth-child(1) figure div,
#task.active10 .chart_list_title ul li:nth-child(2) figure div,
#task.active10 .chart_list_title ul li:nth-child(3) figure div {
	transform: rotateX(-90deg);
	animation-name: quiz4;
	animation-duration: 0.3s;
}
#task.active10 .chart_list_title ul li:last-child {
	transition: 0.3s;
	transition-delay: 1.3s;
}
@media all and (-ms-high-contrast: none) {
	/*ieではクイズパネルの回転ができないためアニメーション削除及び代替措置*/
	#task.active9 .chart_list_title ul li figure div {
		animation-name: none;
		animation-duration: 0;
	}
	#task.active9 .chart_list_title ul li:nth-child(1) figure div,
	#task.active9 .chart_list_title ul li:nth-child(2) figure div,
	#task.active9 .chart_list_title ul li:nth-child(3) figure div,
	#task.active9 .chart_list_title ul li:nth-child(4) figure div {
		animation-delay: 0;
	}
	#task.active10 .chart_list_title ul li:nth-child(1) span:nth-child(2) {
		background-image: url(../img/task/chart_list_title1_gray.jpg);
	}
	#task.active10 .chart_list_title ul li:nth-child(2) span:nth-child(2) {
		background-image: url(../img/task/chart_list_title2_gray.jpg);
	}
	#task.active10 .chart_list_title ul li:nth-child(3) span:nth-child(2) {
		background-image: url(../img/task/chart_list_title3_gray.jpg);
	}
	#task.active10 .chart_list_title ul li:nth-child(1) figure div,
	#task.active10 .chart_list_title ul li:nth-child(2) figure div,
	#task.active10 .chart_list_title ul li:nth-child(3) figure div {
		transform: rotateX(0);
		animation-name: none;
		animation-duration: 0;
	}
	#task.active10 .chart_list_title ul li:last-child {
		margin-top: 0px;
		transition: 0;
		transition-delay: 0;
	}

}/*ie措置 end*/

#task.active2 .annotation {
	animation-name: fadein;
	animation-duration: 0.3s;
}

/*active7*/

#task.active7 .annotation {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active7 .quiz {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active7 .report4 {
	animation-name: report4;
	animation-duration: 2s;
	width: 787px;
}

/*active8*/

#task.active8 .report4 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}

#task.active8 .chart1 .chart1_a1 {
	animation-name: chart1;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active8 .chart1 .chart1_a2 {
	animation-name: chart2;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active8 .chart1 .chart1_b1 {
	animation-name: chart3;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active8 .chart1 .chart1_c1 {
	animation-name: chart4;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active8 .chart1 .chart1_c2 {
	animation-name: chart5;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active8 .chart1 .chart1_cv1 {
	animation-name: chart6;
	animation-duration: 0.8s;
	animation-delay: 1.4s;
}
#task.active8 .chart1 .chart1_cv2 {
	animation-name: chart7;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active8 .chart1 .chart1_cv3 {
	animation-name: chart8;
	animation-duration: 0.8s;
	animation-delay: 1.4s;
}
#task.active8 .chart1 .chart1_next1 {
	animation-name: chart9;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active8 .chart1 .chart1_next2 {
	animation-name: chart10;
	animation-duration: 0.8s;
	animation-delay: 1s;
}
#task.active8 .chart1 .chart1_next3 {
	animation-name: chart11;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active8 .chart1 .chart1_next4 {
	animation-name: chart12;
	animation-duration: 0.8s;
	animation-delay: 0.4s;
}
#task.active8 .chart1 .chart1_next5 {
	animation-name: chart13;
	animation-duration: 0.8s;
	animation-delay: 1s;
}

/*active9*/

#task.active9:after {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1s;
}
#task.active9 #container {
	transition: 3s;
    background-color: hsla(0,0%,100%,0);
}

#task.active9 .chart1 .chart1_a1 {
	opacity: 1;
	left: 189px;
	animation-name: contraction1;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_a2 {
	opacity: 1;
	left: 367px;
	animation-name: contraction2;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_b1 {
	opacity: 1;
	left: 189px;
	animation-name: contraction3;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_c1 {
	opacity: 1;
	left: 189px;
	animation-name: contraction4;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_c2 {
	opacity: 1;
	left: 367px;
	animation-name: contraction5;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_cv1 {
	opacity: 1;
	left: 545px;
	animation-name: contraction6;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_cv2 {
	opacity: 1;
	left: 367px;
	animation-name: contraction7;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_cv3 {
	opacity: 1;
	left: 545px;
	animation-name: contraction8;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_next1 {
	opacity: 1;
	left: 314px;
	animation-name: contraction9;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_next2 {
	opacity: 1;
	left: 491px;
	animation-name: contraction10;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_next3 {
	opacity: 1;
	left: 314px;
	animation-name: contraction11;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_next4 {
	opacity: 1;
	left: 314px;
	animation-name: contraction12;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active9 .chart1 .chart1_next5 {
	opacity: 1;
	left: 491px;
	animation-name: contraction13;
	animation-duration: 0.8s;
	animation-delay: 0s;
}

/*active11*/

#task.active11 .chart1 .chart1_a1 {
	opacity: 1;
	transform: scale(0.64);
	top: 68px;
	left: 255px;
	animation-name: chart_line1;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_a2 {
	opacity: 1;
	transform: scale(0.64);
	top: 68px;
	left: 371px;
	animation-name: chart_line2;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_b1 {
	opacity: 1;
	transform: scale(0.64);
	top: 136px;
	left: 255px;
	animation-name: chart_line3;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_c1 {
	opacity: 1;
	transform: scale(0.64);
	top: 203px;
	left: 255px;
	animation-name: chart_line4;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_c2 {
	opacity: 1;
	transform: scale(0.64);
	top: 203px;
	left: 371px;
	animation-name: chart_line5;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_cv1 {
	opacity: 1;
	transform: scale(0.64);
	top: 68px;
	left: 487px;
	animation-name: chart_line6;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_cv2 {
	opacity: 1;
	transform: scale(0.64);
	top: 136px;
	left: 371px;
	animation-name: chart_line7;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_cv3 {
	opacity: 1;
	transform: scale(0.64);
	top: 203px;
	left: 487px;
	animation-name: chart_line8;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_next1 {
	opacity: 1;
	transform: scale(0.64);
	top: 98px;
	left: 349px;
	animation-name: chart_line9;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_next2 {
	opacity: 1;
	transform: scale(0.64);
	top: 98px;
	left: 465px;
	animation-name: chart_line10;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_next3 {
	opacity: 1;
	transform: scale(0.64);
	top: 166px;
	left: 349px;
	animation-name: chart_line11;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_next4 {
	opacity: 1;
	transform: scale(0.64);
	top: 233px;
	left: 349px;
	animation-name: chart_line12;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active11 .chart1 .chart1_next5 {
	opacity: 1;
	transform: scale(0.64);
	top: 233px;
	left: 465px;
	animation-name: chart_line13;
	animation-duration: 0.8s;
	animation-delay: 0s;
}

/*active13*/

#task.active13 .chart1 .chart1_a1 {
	opacity: 1;
	transform: scale(1);
	top: 92px;
	left: 0px;
	animation-name: table_chart1;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_a2 {
	opacity: 1;
	transform: scale(1);
	top: 92px;
	left: 179px;
	animation-name: table_chart2;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_b1 {
	opacity: 1;
	transform: scale(1);
	top: 92px;
	left: 358px;
	animation-name: table_chart3;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_c1 {
	opacity: 1;
	transform: scale(1);
	top: 92px;
	left: 537px;
	animation-name: table_chart4;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_c2 {
	opacity: 1;
	transform: scale(1);
	top: 92px;
	left: 716px;
	animation-name: table_chart5;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_cv1 {
	opacity: 1;
	transform: scale(1);
	top: 92px;
	left: 895px;
	animation-name: table_chart6;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_cv2 {
	opacity: 1;
	transform: scale(1);
	top: 92px;
	left: 895px;
	animation-name: table_chart7;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_cv3 {
	opacity: 1;
	transform: scale(1);
	top: 92px;
	left: 895px;
	animation-name: table_chart8;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_next1 {
	opacity: 1;
	transform: scale(1);
	top: 122px;
	left: 125px;
	animation-name: table_chart9;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_next2 {
	opacity: 1;
	transform: scale(1);
	top: 122px;
	left: 304px;
	animation-name: table_chart10;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_next3 {
	opacity: 1;
	transform: scale(1);
	top: 122px;
	left: 483px;
	animation-name: table_chart11;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_next4 {
	opacity: 1;
	transform: scale(1);
	top: 122px;
	left: 662px;
	animation-name: table_chart12;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active13 .chart1 .chart1_next5 {
	opacity: 1;
	transform: scale(1);
	top: 122px;
	left: 841px;
	animation-name: table_chart13;
	animation-duration: 0.8s;
	animation-delay: 0s;
}

/*active14*/

#task.active14 .chart1 .chart1_a1 {
	opacity: 1;
	transform: scale(1);
	top: 0px;
	left: 60px;
	animation-name: chart_line1;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_a2 {
	opacity: 1;
	transform: scale(1);
	top: 0px;
	left: 239px;
	animation-name: chart_line2;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_b1 {
	opacity: 1;
	transform: scale(1);
	top: 102px;
	left: 60px;
	animation-name: chart_line3;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_c1 {
	opacity: 1;
	transform: scale(1);
	top: 204px;
	left: 60px;
	animation-name: chart_line4;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_c2 {
	opacity: 1;
	transform: scale(1);
	top: 204px;
	left: 239px;
	animation-name: chart_line5;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_cv1 {
	opacity: 1;
	transform: scale(1);
	top: 0px;
	left: 419px;
	animation-name: chart_line6;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_cv2 {
	opacity: 1;
	transform: scale(1);
	top: 102px;
	left: 239px;
	animation-name: chart_line7;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_cv3 {
	opacity: 1;
	transform: scale(1);
	top: 204px;
	left: 419px;
	animation-name: chart_line8;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_next1 {
	opacity: 1;
	transform: scale(1);
	top: 30px;
	left: 185px;
	animation-name: chart_line9;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_next2 {
	opacity: 1;
	transform: scale(1);
	top: 30px;
	left: 364px;
	animation-name: chart_line10;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_next3 {
	opacity: 1;
	transform: scale(1);
	top: 132px;
	left: 185px;
	animation-name: chart_line11;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_next4 {
	opacity: 1;
	transform: scale(1);
	top: 234px;
	left: 185px;
	animation-name: chart_line12;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
#task.active14 .chart1 .chart1_next5 {
	opacity: 1;
	transform: scale(1);
	top: 234px;
	left: 364px;
	animation-name: chart_line13;
	animation-duration: 0.8s;
	animation-delay: 0s;
}


#task.active9 .charttitle {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}
#task.active9 .chart_list_title {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}
#task.active11 .charttitle {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
}
#task.active11 .chart_list_title {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
}

#task.active16 .chartwrap {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

#task.active16 .snswrap .sns1 {
	animation-name: sns1;
	animation-duration: 0.8s;
	animation-delay: 0.3s;
}
#task.active16 .snswrap .sns2 {
	animation-name: sns2;
	animation-duration: 0.8s;
	animation-delay: 0.7s;
}
#task.active16 .snswrap .sns3 {
	animation-name: sns3;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active16 .snswrap .sns4 {
	animation-name: sns4;
	animation-duration: 0.8s;
	animation-delay: 1.5s;
}
#task.active16 .snswrap .sns_right1 {
	animation-name: sns5;
	animation-duration: 0.8s;
	animation-delay: 0.5s;
}
#task.active16 .snswrap .sns_right2 {
	animation-name: sns6;
	animation-duration: 0.8s;
	animation-delay: 0.9s;
}
#task.active16 .snswrap .sns_right3 {
	animation-name: sns7;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
}
#task.active16 .snswrap .sns_sub1 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-delay: 3s;
}
#task.active16 .snswrap .sns_sub2 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-delay: 3s;
}
#task.active16 .snswrap .sns_sub3 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-delay: 3s;
}
#task.active17 .snswrap .sns_subsub1 {
	animation-name: fadein;
	animation-duration: 0.8s;
}
#task.active17 .snswrap .sns_subsub2 {
	animation-name: fadein;
	animation-duration: 0.8s;
}
#task.active18 .snswrap {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
#task.active18 .baitaiwrap {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
#task.active19 .baitaiwrap .baitai_element1,
#task.active19 .baitaiwrap .baitai_element2,
#task.active19 .baitaiwrap .baitai_element3 {
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
#task.active19 .baitaiwrap .baitai_element_gray1,
#task.active19 .baitaiwrap .baitai_element_gray2,
#task.active19 .baitaiwrap .baitai_element_gray3 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
#task.active19 .baitaiwrap .baitai_right1 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}
#task.active19 .baitaiwrap .baitai_right2 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-delay: 0.6s;
}
#task.active19 .baitaiwrap .baitai_right3 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-delay: 0.9s;
}
#task.active19 .baitaiwrap .baitai_right4 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-delay: 1.2s;
}
#task.active19 .baitaiwrap .baitaiword1 {
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
#task.active19 .baitaiwrap .baitaiword2 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
#task.active21 .baitaiwrap {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
#task.active21 .next_title {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
}


@keyframes ebisu1 {
	0% { bottom: -360px; }
	100% { bottom: 40px; }
}


@keyframes comment1 {
	100%{ opacity: 1; }
}
@keyframes comment2 {
	100% { opacity: 0; }
}

@keyframes backimg1 {
	100% { background-position: center 60px; }
}
@keyframes title {
	100% { opacity: 0; }
}
@keyframes quiz1 {
	100% { opacity: 1; }
}
@keyframes quiz2 {
	100% { transform: rotateX(-90deg); }
}
@keyframes quiz3 {
	100% { opacity: 1; }
}
@keyframes quiz4 {
	100% { transform: rotateX(0); }
}


@keyframes report1 {
	0% {
		top: 0px;
		left: -800px; }
	20% {
		top: 0px;
		left: 0px;
		opacity: 1;
	}
	90% {
		top: 0px;
		left: 0px;
		opacity: 1;
	}
	100% {
		top: -500px;
		left: 0px;
		opacity: 0;
	}
}
@keyframes report2 {
	0% { top: 800px; }
	20% {
		top: 0px;
		opacity: 1;
	}
	90% {
		top: 0px;
		opacity: 1;
	}
	100% {
		top: -500px;
		opacity: 0;
	}
}
@keyframes report3 {
	0% {
		top: 0px;
		right: -800px;
	}
	20% {
		top: 0px;
		right: 0px;
		opacity: 1;
	}
	90% {
		top: 0px;
		right: 0px;
		opacity: 1;
	}
	100% {
		top: -500px;
		right: 0px;
		opacity: 0;
	}
}
@keyframes report4 {
	20% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	90% {
		top: 0;
		opacity: 1;
	}
	100% {
		top: 0px;
		opacity: 1;
	}
}


@keyframes chart1 {
	70% { opacity: 0; }
	100% {
		left: 189px;
		opacity: 1;
	}
}
@keyframes chart2 {
	70% { opacity: 0; }
	100% {
		left: 367px;
		opacity: 1;
	}
}
@keyframes chart3 {
	70% { opacity: 0; }
	100% {
		left: 189px;
		opacity: 1;
	}
}
@keyframes chart4 {
	70% { opacity: 0; }
	100% {
		left: 189px;
		opacity: 1;
	}
}
@keyframes chart5 {
	70% { opacity: 0; }
	100% {
		left: 367px;
		opacity: 1;
	}
}
@keyframes chart6 {
	70% { opacity: 0; }
	100% {
		left: 545px;
		opacity: 1;
	}
}
@keyframes chart7 {
	70% { opacity: 0; }
	100% {
		left: 367px;
		opacity: 1;
	}
}
@keyframes chart8 {
	70% { opacity: 0; }
	100% {
		left: 545px;
		opacity: 1;
	}
}
@keyframes chart9 {
	70% { opacity: 0; }
	100% {
		left: 314px;
		opacity: 1;
	}
}
@keyframes chart10 {
	70% { opacity: 0; }
	100% {
		left: 491px;
		opacity: 1;
	}
}
@keyframes chart11 {
	70% { opacity: 0; }
	100% {
		left: 314px;
		opacity: 1;
	}
}
@keyframes chart12 {
	70% { opacity: 0; }
	100% {
		left: 314px;
		opacity: 1;
	}
}
@keyframes chart13 {
	70% { opacity: 0; }
	100% {
		left: 491px;
		opacity: 1;
	}
}
@keyframes contraction1 {
	100% { 
		transform: scale(0.64);
		top: 68px;
		left: 355px;
	}
}
@keyframes contraction2 {
	100% { 
		transform: scale(0.64);
		top: 68px;
		left: 471px;
	}
}
@keyframes contraction3 {
	100% { 
		transform: scale(0.64);
		top: 136px;
		left: 355px;
	}
}
@keyframes contraction4 {
	100% { 
		transform: scale(0.64);
		top: 203px;
		left: 355px;
	}
}
@keyframes contraction5 {
	100% { 
		transform: scale(0.64);
		top: 203px;
		left: 471px;
	}
}
@keyframes contraction6 {
	100% { 
		transform: scale(0.64);
		top: 68px;
		left: 587px;
	}
}
@keyframes contraction7 {
	100% { 
		transform: scale(0.64);
		top: 136px;
		left: 471px;
	}
}
@keyframes contraction8 {
	100% { 
		transform: scale(0.64);
		top: 203px;
		left: 587px;
	}
}
@keyframes contraction9 {
	100% { 
		transform: scale(0.64);
		top: 98px;
		left: 449px;
	}
}
@keyframes contraction10 {
	100% { 
		transform: scale(0.64);
		top: 98px;
		left: 565px;
	}
}
@keyframes contraction11 {
	100% { 
		transform: scale(0.64);
		top: 166px;
		left: 449px;
	}
}
@keyframes contraction12 {
	100% { 
		transform: scale(0.64);
		top: 233px;
		left: 449px;
	}
}
@keyframes contraction13 {
	100% { 
		transform: scale(0.64);
		top: 233px;
		left: 565px;
	}
}

@keyframes chart_line1 {
	100% {
		transform: scale(1);
		top: 92px;
		left: 0px;
	}
}
@keyframes chart_line2 {
	100% {
		transform: scale(1);
		top: 92px;
		left: 157px;
	}
}
@keyframes chart_line3 {
	100% {
		transform: scale(1);
		top: 92px;
		left: 314px;
	}
}
@keyframes chart_line4 {
	100% {
		transform: scale(1);
		top: 92px;
		left: 471px;
	}
}
@keyframes chart_line5 {
	100% {
		transform: scale(1);
		top: 92px;
		left: 628px;
	}
}
@keyframes chart_line6 {
	100% {
		transform: scale(1);
		top: 92px;
		left: 785px;
	}
}
@keyframes chart_line7 {
	100% {
		transform: scale(1);
		top: 92px;
		left: 785px;
	}
}
@keyframes chart_line8 {
	100% { 
		transform: scale(1);
		top: 92px;
		left: 785px;
	}
}
@keyframes chart_line9 {
	100% {
		transform: scale(1);
		top: 122px;
		left: 117px;
	}
}
@keyframes chart_line10 {
	100% {
		transform: scale(1);
		top: 122px;
		left: 274px;
	}
}
@keyframes chart_line11 {
	100% {
		transform: scale(1);
		top: 122px;
		left: 431px;
	}
}
@keyframes chart_line12 {
	100% {
		transform: scale(1);
		top: 122px;
		left: 588px;
	}
}
@keyframes chart_line13 {
	100% {
		transform: scale(1);
		top: 122px;
		left: 745px;
	}
}

@keyframes table_chart1 {
	100% {
		top: 0px;
		left: 160px;
	}
}
@keyframes table_chart2 {
	100% {
		transform: scale(1);
		top: 0px;
		left: 339px;
	}
}
@keyframes table_chart3 {
	100% {
		transform: scale(1);
		top: 102px;
		left: 160px;
	}
}
@keyframes table_chart4 {
	100% {
		transform: scale(1);
		top: 204px;
		left: 160px;
	}
}
@keyframes table_chart5 {
	100% {
		transform: scale(1);
		top: 204px;
		left: 339px;
	}
}
@keyframes table_chart6 {
	100% {
		transform: scale(1);
		top: 0px;
		left: 519px;
	}
}
@keyframes table_chart7 {
	100% {
		transform: scale(1);
		top: 102px;
		left: 339px;
	}
}
@keyframes table_chart8 {
	100% { 
		transform: scale(1);
		top: 204px;
		left: 519px;
	}
}
@keyframes table_chart9 {
	100% {
		transform: scale(1);
		top: 30px;
		left: 285px;
	}
}
@keyframes table_chart10 {
	100% {
		transform: scale(1);
		top: 30px;
		left: 464px;
	}
}
@keyframes table_chart11 {
	100% {
		transform: scale(1);
		top: 132px;
		left: 285px;
	}
}
@keyframes table_chart12 {
	100% {
		transform: scale(1);
		top: 234px;
		left: 464px;
	}
}
@keyframes table_chart13 {
	100% {
		transform: scale(1);
		top: 234px;
		left: 285px;
	}
}

@keyframes sns1 {
	70% { opacity: 0; }
	100% {
		left: 0px;
		opacity: 1;
	}
}
@keyframes sns2 {
	70% { opacity: 0; }
	100% {
		left: 216px;
		opacity: 1;
	}
}
@keyframes sns3 {
	70% { opacity: 0; }
	100% {
		left: 432px;
		opacity: 1;
	}
}
@keyframes sns4 {
	70% { opacity: 0; }
	100% {
		left: 648px;
		opacity: 1;
	}
}
@keyframes sns5 {
	70% { opacity: 0; }
	100% {
		left: 146px;
		opacity: 1;
	}
}
@keyframes sns6 {
	70% { opacity: 0; }
	100% {
		left: 363px;
		opacity: 1;
	}
}
@keyframes sns7 {
	70% { opacity: 0; }
	100% {
		left: 580px;
		opacity: 1;
	}
}



@media print {

}