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



/*---------------wrapper----------------*/

body: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;
}
body:before {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: '';
    background-image: url(../img/task/backimg2.png);
    background-repeat: no-repeat;
    background-position: center -700px;
}
#container {
	z-index: 2;
}
#howto .logarea .nextarea .next_btn {
    background-image: url(../img/howto/next_btn.jpg);
}
#howto.next_off .logarea .nextarea .next_btn {
	background-image: url(../img/next_btn_gray.jpg);/*クリック後3秒間はクリック無効（背景グレーアウト）*/
}
.title {
	text-align: center;
	padding-top: 20px;
}
.ebisu1 {
	position: absolute;
	left: 60px;
	z-index: 1;
    width: 200px;
	bottom:  40px;
}
.ebisu2 {
	opacity: 0;
    position: absolute;
    left: 69px;
    z-index: 1;
    width: 180px;
    bottom: 40px;
}
.active4 .ebisu1 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.5s;
	animation-delay: 0s;
}
.active4 .ebisu2 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
.active5 .ebisu2 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.5s;
	animation-delay: 0s;
}
.active5 .ebisu1 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
.active14 .ebisu1 {
	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;
}
.active15 .ebisu2 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.5s;
	animation-delay: 0s;
}
.active15 .ebisu1 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0s;
}

.user3,
.user4,
.user6,
.user7,
.user8,
.user10 {
	opacity: 0;
	position: absolute;
	right: 130px;
	bottom: 10px;
	z-index: 1;
}
.user1,
.user2 {
	opacity: 0;
	position: absolute;
	right: 130px;
	bottom: 10px;
	z-index: 1;
}
.user9 {
	position: absolute;
	right: 130px;
	bottom: 10px;
	z-index: 1;
}
.user5,
.user11 {
	opacity: 0;
	position: absolute;
	right: 130px;
	bottom: 10px;
	z-index: 1;
}
.menulist {
	opacity: 0;
	width: 900px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.menulist p.menulist_annotation {
	font-size: 10px;
	position: absolute;
	bottom: -10px;
	right: 45px;
	margin: 0;
}
.menulist > figure {
	margin-bottom: 5px;
}
.menulist ul {
	margin: 0 0 0 50px;
	padding: 0;
}
.menulist ul li {
	opacity: 0;
	list-style: none;
	margin-bottom: 10px;
}
.menulist .menulist_title {
	opacity: 0;
}
.menulist ul figure {
	width: 787px;
	height: 44px;
	perspective: 500px;
	-webkit-perspective: 500px;
}
.menulist ul figure div {
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: 0.25s;
	-webkit-transition: 0.25s;
}
.menulist ul span {
    width: 787px;
    height: 44px;
    position: absolute;
    box-sizing: border-box;
    line-height: 50px;
    font-size: 17pt;
    text-transform: uppercase;
}
.menulist ul span:nth-child(1) {
    color: #fff;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}
.menulist ul span:nth-child(2) {
	color: #fff;
	background-color: #49C5D4;
	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 52px;
}
@media all and (-ms-high-contrast: none) {
	/*クイズパネルの回転挙動がおかしいためieのみアニメーション削除*/
	.menulist ul li {
		opacity: 1;
	}

	.menulist ul span:nth-child(2) {
		transform: none;
	}
}
.menulist ul li:nth-child(1) span:nth-child(2) {
	background-image: url(../img/howto/menulist1.jpg);
}
.menulist ul li:nth-child(2) span:nth-child(2) {
	background-image: url(../img/howto/menulist2.jpg);
}
.menulist ul li:nth-child(3) span:nth-child(2) {
	background-image: url(../img/howto/menulist3.jpg);
}

.chartwrap {
	position: absolute;
	top: 4%;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
}
.chart1 figure {
	position: absolute;
}
.chart1 figure img {
	vertical-align: middle;
}
.chart1 .chart1_a1 {
	opacity: 0;
	top: 100px;
	left: -800px;
}
.chart1 .chart1_a2 {
	opacity: 0;
	top: 100px;
	left: -800px;
}
.chart1 .chart1_b1 {
	opacity: 0;
	top: 185px;
	left: -800px;
}
.chart1 .chart1_c1 {
	opacity: 0;
	top: 270px;
	left: -800px;
}
.chart1 .chart1_c2 {
	opacity: 0;
	top: 270px;
	left: -800px;
}
.chart1 .chart1_cv1 {
	opacity: 0;
	top: 100px;
	left: -800px;
}
.chart1 .chart1_cv2 {
	opacity: 0;
	top: 185px;
	left: -800px;
}
.chart1 .chart1_cv3 {
	opacity: 0;
	top: 270px;
	left: -800px;
}
.chart1 .chart1_next1 {
	opacity: 0;
	top: 125px;
	left: -800px;
}
.chart1 .chart1_next2 {
	opacity: 0;
	top: 125px;
	left: -800px;
}
.chart1 .chart1_next3 {
	opacity: 0;
	top: 210px;
	left: -800px;
}
.chart1 .chart1_next4 {
	opacity: 0;
	top: 292px;
	left: -800px;
}
.chart1 .chart1_next5 {
	opacity: 0;
	top: 292px;
	left: -800px;
}

.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: 92px;
	height: 74px;
}
.chart1 .chart1_next1,
.chart1 .chart1_next2,
.chart1 .chart1_next3,
.chart1 .chart1_next4,
.chart1 .chart1_next5 {
	width: 35px;
	height: 27px;
}
.chart1 figure {
	width: 100%;
	height: auto;
}
.proof {
	opacity: 0;
	position: absolute;
	top: 120px;
	left: 50%;
	transform: translateX(-50%);
	width: 920px;
}
.proofwrap {
	position: relative;
}
.proofwrap .proof_1cv {
	opacity: 0;
	position: absolute;
	bottom: 86px;
	right: 122px;
}
.proofwrap .proof_tyokusetu {
	opacity: 0;
	position: absolute;
	bottom: 75px;
	right: 55px;
}
.proofwrap .proof_tyokusetu_100 {
	opacity: 0;
	position: absolute;
	bottom: 52px;
	right: 93px;
}
.proofwrap .proof_kansetu1 {
	opacity: 0;
	position: absolute;
	bottom: 86px;
	left: 20px;
}
.proofwrap .proof_kansetu2 {
	opacity: 0;
	position: absolute;
	bottom: 55px;
	left: 47px;
}
.proofwrap .proof_kansetu3 {
	opacity: 0;
	position: absolute;
	bottom: 59px;
	left: 102px;
}

.proofwrap .proof_rating1 {
	opacity: 0;
	position: absolute;
	bottom: 86px;
	left: 20px;
}
.proofwrap .proof_rating2 {
	opacity: 0;
	position: absolute;
	bottom: 53px;
	left: 47px;
}
.proofwrap .proof_rating3 {
	opacity: 0;
	position: absolute;
	bottom: -9px;
	left: 22px;
}

.costimg,
.cvdetails {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 28px;
}
.nest {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 43%;
	transform: translateX(-50%);
}
.blandlogo {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}


#body:after,
#body:before,
.title,
.messagearea p,
.commentwrap figure,
.personwrap figure,
.menulist,
.menulist .menulist_title,
.menulist ul li:not(:last-child),
.menulist ul li:last-child,
.menulist ul li figure div,
.menulist .menulist_annotation,
.chartwrap,
.chart1 figure,
.chart1 img,
.proof,
.proof figure,
.proofwrap {
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.active1 .menulist {
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active1 .user9 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active1 .user1 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.1s;
}
.active2 .user1 {
	opacity: 1;
}
.active3 .user1 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active3 .user2 {
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active3 .user2 {
	opacity: 1;
}
.active4 .user2 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active4 .user7 {
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active5 .user7 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active5 .user1 {
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active6 .user1 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active6 .user3 {
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active7 .user3 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active7 .user1 {
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active9 .user1 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.6s;
}
.active9 .user11 {
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active10 .user11 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.6s;
}
.active10 .user1 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active11 .user1 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active11 .user5 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active12 .user5 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active12 .user11 {
	opacity: 0;
	right: 110px;
	bottom: 10px;
	animation-name: fadein;
	animation-duration: 0.3s;
}
.active13 .user11 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active13 .user1 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
}
.element .logarea .messagearea p a {
	color: #0000db;
	text-decoration: underline;
}
.log1 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 2s;
}
.active1 .log1 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active1 .log2 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active2 .log2 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active2 .log3 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active3 .log3 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active3 .log4 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active4 .log4 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active4 .log5 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active5 .log5 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active5 .log6 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active7 .log6 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active7 .log7 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active9 .log7 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active9 .log8 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active10 .log8 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active10 .log9 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active11 .log9 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active11 .log10 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active12 .log10 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active12 .log11 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active13 .log11 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active13 .log12 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active14 .log12 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active14 .log13 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active15 .log13 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active15 .log14 {
	animation-name: log1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}



.active1 .title {
	animation-name: title;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}
.comment0 {
	opacity: 0;
	position: absolute;
	right: 380px;
	top: 250px;
	animation-name: fadein;
	animation-duration: 0.6s;
	animation-delay: 0.8s;
}
.comment1 {
	opacity: 0;
	position: absolute;
	right: 370px;
	top: 270px;
	animation-name: comment1;
	animation-duration: 1s;
	animation-delay: 2.5s;
}
.comment2 {
	opacity: 0;
	position: absolute;
	right: 370px;
	top: 270px;
}
.comment3 {
	opacity: 0;
	position: absolute;
	right: 370px;
	top: 270px;
	z-index: 2;
}
.comment3 a {
	position: absolute;
	right: 90px;
	bottom: 16px;
	text-decoration: underline;
	color: #3665ff;
}
.comment3 a:hover {
	cursor: default;
}
.comment4 {
	opacity: 0;
	position: absolute;
	right: 370px;
	top: 270px;
}
.comment5 {
	opacity: 0;
	position: absolute;
	right: 370px;
	top: 270px;
}
.comment6 {
	opacity: 0;
	position: absolute;
	right: 400px;
	top: 360px;
}
.comment7 {
	opacity: 0;
	position: absolute;
	right: 370px;
	top: 350px;
}
.comment8 {
	opacity: 0;
	position: absolute;
	right: 363px;
	top: 285px;
	z-index: 1;
}
.comment9 {
	opacity: 0;
	position: absolute;
	right: 380px;
	top: 360px;
}
.comment10 {
	opacity: 0;
	position: absolute;
	right: 380px;
	top: 335px;
}


.active1 .comment0 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active1 .comment1 {
	animation-name: fadein;
	animation-duration: 0.8s;
}
.active2 .comment1 {
	animation-name: fadeout;
	animation-duration: 0.8s;
}
.active2 .comment2 {
	animation-name: fadein;
	animation-duration: 0.8s;
	animation-delay: 2s;
}
.active3 .comment2 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active3 .comment3 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2s;
}
.active3 .comment3 a:hover {
	cursor: pointer;
}
.active4 .comment3 a:hover {
	cursor: default;
}
.active4 .comment3 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active4 .comment4 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2s;
}
.active5 .comment4 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active6 .comment5 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2s;
}
.active7 .comment5 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active9 .comment6 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2s;
}
.active10 .comment6 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active10 .comment7 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.6s;
}
.active11 .comment7 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active11 .comment8 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.6s;
}
.active12 .comment8 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active12 .comment9 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.6s;
}
.active13 .comment9 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active14 .comment9 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active14 .comment10 {
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.6s;
}
.active15 .comment10 {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
}



.active1 .menulist .menulist_title {
	text-align: center;
	animation-name: menulist3;
	animation-duration: 0.3s;
}
.active1 .menulist ul li {
	animation-name: menulist1;
	animation-duration: 0.3s;
}
.active1 .menulist ul li figure div {
	animation-name: menulist2;
	animation-duration: 0.3s;
}

@media all and (-ms-high-contrast: none) {
	/*ieではクイズパネルの回転ができないためアニメーション削除及び代替措置*/
	
	.active1 .menulist {
		opacity: 1;
	}
	.active1 .menulist .menulist_title {
		animation-name: none;
	}
	.active1 .menulist ul li {
		animation-name: none;
	}
	.active1 .menulist ul li figure div {
		animation-name: none;
	}
	
}/*ie措置　end*/


.active1 .menulist ul li:nth-child(1) figure div {
	animation-delay: 1.5s;
}
.active1 .menulist ul li:nth-child(2) figure div {
	animation-delay: 1.6s;
}
.active1 .menulist ul li:nth-child(3) figure div {
	animation-delay: 1.7s;
}
.active2 .menulist ul li:nth-child(3),
.active2 .menulist_annotation {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active2 .menulist ul li:nth-child(2) {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
	animation-delay: 0.6s;
}


.active5 .chart1 .chart1_a1 {
	animation-name: chart1;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active5 .chart1 .chart1_a2 {
	animation-name: chart2;
	animation-duration: 0.8s;
	animation-delay: 1.4s;
}
.active5 .chart1 .chart1_b1 {
	animation-name: chart3;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active5 .chart1 .chart1_c1 {
	animation-name: chart4;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
}
.active5 .chart1 .chart1_c2 {
	animation-name: chart5;
	animation-duration: 0.8s;
	animation-delay: 1.4s;
}
.active5 .chart1 .chart1_cv1 {
	animation-name: chart6;
	animation-duration: 0.8s;
	animation-delay: 2.2s;
}
.active5 .chart1 .chart1_cv2 {
	animation-name: chart7;
	animation-duration: 0.8s;
	animation-delay: 1.4s;
}
.active5 .chart1 .chart1_cv3 {
	animation-name: chart8;
	animation-duration: 0.8s;
	animation-delay: 2.2s;
}
.active5 .chart1 .chart1_next1 {
	animation-name: chart9;
	animation-duration: 0.8s;
	animation-delay: 1.0s;
}
.active5 .chart1 .chart1_next2 {
	animation-name: chart10;
	animation-duration: 0.8s;
	animation-delay: 1.8s;
}
.active5 .chart1 .chart1_next3 {
	animation-name: chart11;
	animation-duration: 0.8s;
	animation-delay: 1.0s;
}
.active5 .chart1 .chart1_next4 {
	animation-name: chart12;
	animation-duration: 0.8s;
	animation-delay: 1.0s;
}
.active5 .chart1 .chart1_next5 {
	animation-name: chart13;
	animation-duration: 0.8s;
	animation-delay: 1.8s;
}

/*active7*/

.active7 .chartwrap,
.active7 .menulist ul li:first-child {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active7 .menulist ul li:nth-child(2) {
	opacity: 0;
	position: absolute;
	top: 44px;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
.active7 .menulist ul li:nth-child(2) figure div {
	transform: rotateX(0);
	animation-name: menulist6;
	animation-duration: 0.3s;
	animation-delay: 0.6s;
}

@media all and (-ms-high-contrast: none) {
	/*ieではクイズパネルの回転ができないためアニメーション削除及び代替措置*/

	.active7 .menulist ul li:first-child {
		opacity: 0;
		animation-name: none;
	}
	.active7 .menulist ul li:nth-child(2) {
		opacity: 1;
		animation-name: none;
	}
	.active7 .menulist ul li:nth-child(2) figure div {
		transform: rotateX(0);
		animation-name: none;
	}
	
}/*ie措置　end*/



.active7 .proof {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.4s;
}
.active7 .proof_1cv {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2.4s;
}
.active7 .proof_tyokusetu {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 3.4s;
}
.active7 .proof_tyokusetu_100 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2.9s;
}


/*active6*/

.active6 .chart1 .chart1_a1 {
	opacity: 1;
	top: 100px;
	left: 240px;
	animation-name: chart_line1;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_a2 {
	opacity: 1;
	top: 100px;
	left: 380px;
	animation-name: chart_line2;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_b1 {
	opacity: 1;
	top: 185px;
	left: 240px;
	animation-name: chart_line3;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_c1 {
	opacity: 1;
	top: 270px;
	left: 240px;
	animation-name: chart_line4;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_c2 {
	opacity: 1;
	top: 270px;
	left: 380px;
	animation-name: chart_line5;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_cv1 {
	opacity: 1;
	top: 100px;
	left: 520px;
	animation-name: chart_line6;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_cv2 {
	opacity: 1;
	top: 185px;
	left: 380px;
	animation-name: chart_line7;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_cv3 {
	opacity: 1;
	top: 270px;
	left: 520px;
	animation-name: chart_line8;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_next1 {
	opacity: 1;
	top: 125px;
	left: 340px;
	animation-name: chart_line9;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_next2 {
	opacity: 1;
	top: 125px;
	left: 480px;
	animation-name: chart_line10;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_next3 {
	opacity: 1;
	top: 210px;
	left: 340px;
	animation-name: chart_line11;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_next4 {
	opacity: 1;
	top: 292px;
	left: 340px;
	animation-name: chart_line12;
	animation-duration: 0.8s;
	animation-delay: 0s;
}
.active6 .chart1 .chart1_next5 {
	opacity: 1;
	top: 292px;
	left: 480px;
	animation-name: chart_line13;
	animation-duration: 0.8s;
	animation-delay: 0s;
}

/*active8*/

.active8 .proofwrap .proof_tyokusetu,
.active8 .proofwrap .proof_tyokusetu_100,
.active8 .proofwrap .proof_1cv {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active8 .proofwrap .proof_kansetu1 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}
.active8 .proofwrap .proof_kansetu2 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.3s;
}
.active8 .proofwrap .proof_kansetu3 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2.3s;
}

/*active10*/

.active10 .proofwrap .proof_kansetu1,
.active10 .proofwrap .proof_kansetu2,
.active10 .proofwrap .proof_kansetu3 {
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active10 .proofwrap .proof_rating1 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}
.active10 .proofwrap .proof_rating2 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.3s;
}
.active10 .proofwrap .proof_rating3 {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 2.3s;
}

/*active11*/

.active11 .proofwrap {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
}
.active11 .costimg {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}

/*active12*/

.active12 .costimg,
.active12 .menulist ul li:nth-child(2) {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
.active12 .menulist ul li:nth-child(3) {
	opacity: 0;
	position: absolute;
	top: 44px;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
.active12 .menulist ul li:nth-child(3) figure div {
	transform: rotateX(0);
	animation-name: menulist6;
	animation-duration: 0.3s;
	animation-delay: 0.6s;
}


@media all and (-ms-high-contrast: none) {
	/*ieではクイズパネルの回転ができないためアニメーション削除及び代替措置*/

	.active12 .menulist ul li:nth-child(2) {
		opacity: 0;
		animation-name: none;
		transition: 0.3s;
	}
	.active12 .menulist ul li:nth-child(3) {
		opacity: 1;
		animation-name: none;
		transition: 0.3s;

	}
	.active12 .menulist ul li:nth-child(3) figure div {
		transform: rotateX(0);
		animation-name: none;
	}
	
}/*ie措置 end*/


.active12 .cvdetails {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 1.4s;
}

/*active13*/

.active13 .cvdetails {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
.active13 .nest {
	opacity: 0;
	animation-name: fadein;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}

/*active14*/

.active14 .nest {
	opacity: 1;
	animation-name: fadeout;
	animation-duration: 0.3s;
	animation-delay: 0s;
}
.active14 .blandlogo {
	opacity: 1;
	transition-delay: 0.3s;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}
.active14 .sliderside1,
.active14 .sliderside2 {
	opacity: 1;
	transition-delay: 0.3s;
	animation-duration: 0.3s;
}

/* ------------------------------
   loopSlider
------------------------------ */
.loopSliderWrap {
	top: 0;
	left: 0;
	height: 230px;
	overflow: hidden;
	position: absolute;
	width: 2000px;
}

.loopSlider {
	margin: 0 auto;
	width: 740px;
	height: 230px;
	text-align: left;
	overflow: hidden;
}

.loopSlider ul {
	height: 195px;
	overflow: hidden;
	width: 1000px;
	padding: 0;
}
.loopSlider ul:nth-of-type(1) {
	float: left;
}
.loopSlider ul:nth-of-type(2) {
	float: right;
}
.loopSlider ul li {
	width: 148px;
	height: 195px;
	float: left;
	display: inline;
	overflow: hidden;
}
.loopSlider a:hover {
	cursor: default;
}
.sliderside1 {
	opacity: 0;
	width: 40px;
	height: 230px;
	position: absolute;
	top: 90px;
	left: 124px;
}
.sliderside2 {
	opacity: 0;
	width: 40px;
	height: 230px;
	position: absolute;
	top: 90px;
	right: 124px;
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
.loopSliderWrap:after {
	content: "";
	display: none;
	clear: none;
}




@keyframes ebisu1 {
	0% { bottom: -360px; }
	100% { bottom: 60px; }
}
@keyframes ebisu2 {
	0% { left: 300px; }
	100% { left: 240px; }
}
@keyframes ebisu3 {
	0% {
		bottom: 60px;
		left: 240px;
	}
	100% {
		bottom: 35px;
		left: 350px;
	}
}
@keyframes ebisu4 {
	0% {
		bottom: 35px;
		left: 350px;
	}
	100% {
		bottom: 60px;
		left: 240px;
	}
}
@keyframes user0 {
	0% {
		opacity: 1;
		right: 185px; }
	30% {
		opacity: 0; }
	100% {
		opacity: 0;
		right: 300px; }
}
@keyframes user1 {
	0% { bottom: -360px; }
	100% { bottom: 65px; }
}
@keyframes user2 {
	0% { right: 300px; }
	100% {
		right: 215px;
		opacity: 0;
	}
}
@keyframes user3 {
	0% {
		right: 215px;
		bottom: 65px;
		opacity: 1
	}
	100% {
		right: 390px;
		bottom: 15px;
		opacity: 0;
	}
}
@keyframes user4 {
	0% {
		right: 390px;
		bottom: 15px;
		opacity: 1
	}
	100% {
		right: 215px;
		bottom: 65px;
		opacity: 0;
	}
}


@keyframes title {
	100% { opacity: 0; }
}

@keyframes chart1 {
	70% { opacity: 0; }
	100% {
		left: 240px;
		opacity: 1;
	}
}
@keyframes chart2 {
	70% { opacity: 0; }
	100% {
		left: 380px;
		opacity: 1;
	}
}
@keyframes chart3 {
	70% { opacity: 0; }
	100% {
		left: 240px;
		opacity: 1;
	}
}
@keyframes chart4 {
	70% { opacity: 0; }
	100% {
		left: 240px;
		opacity: 1;
	}
}
@keyframes chart5 {
	70% { opacity: 0; }
	100% {
		left: 380px;
		opacity: 1;
	}
}
@keyframes chart6 {
	70% { opacity: 0; }
	100% {
		left: 520px;
		opacity: 1;
	}
}
@keyframes chart7 {
	70% { opacity: 0; }
	100% {
		left: 380px;
		opacity: 1;
	}
}
@keyframes chart8 {
	70% { opacity: 0; }
	100% {
		left: 520px;
		opacity: 1;
	}
}
@keyframes chart9 {
	70% { opacity: 0; }
	100% {
		left: 340px;
		opacity: 1;
	}
}
@keyframes chart10 {
	70% { opacity: 0; }
	100% {
		left: 480px;
		opacity: 1;
	}
}
@keyframes chart11 {
	70% { opacity: 0; }
	100% {
		left: 340px;
		opacity: 1;
	}
}
@keyframes chart12 {
	70% { opacity: 0; }
	100% {
		left: 340px;
		opacity: 1;
	}
}
@keyframes chart13 {
	70% { opacity: 0; }
	100% {
		left: 480px;
		opacity: 1;
	}
}

@keyframes menulist1 {
	100% { opacity: 1; }
}
@keyframes menulist2 {
	100% { transform: rotateX(-90deg); }
}
@keyframes menulist3 {
	100% { opacity: 1; }
}
@keyframes menulist4 {
	100% { transform: rotateX(0); }
}
@keyframes menulist5 {
	100% { opacity: 0; }
}
@keyframes menulist6 {
	0% { transform: rotateX(0deg); }
	100% { transform: rotateX(-90deg); }
}


@keyframes chart_line1 {
	100% {
		top: 125px;
		left: 50px;
	}
}
@keyframes chart_line2 {
	100% {
		top: 125px;
		left: 190px;
	}
}
@keyframes chart_line3 {
	100% {
		top: 125px;
		left: 330px;
	}
}
@keyframes chart_line4 {
	100% {
		top: 125px;
		left: 470px;
	}
}
@keyframes chart_line5 {
	100% {
		top: 125px;
		left: 610px;
	}
}
@keyframes chart_line6 {
	100% {
		top: 125px;
		left: 750px;
	}
}
@keyframes chart_line7 {
	100% {
		top: 125px;
		left: 750px;
	}
}
@keyframes chart_line8 {
	100% { 
		top: 125px;
		left: 750px;
	}
}
@keyframes chart_line9 {
	100% {
		top: 150px;
		left: 149px;
	}
}
@keyframes chart_line10 {
	100% {
		top: 150px;
		left: 290px;
	}
}
@keyframes chart_line11 {
	100% {
		top: 150px;
		left: 430px;
	}
}
@keyframes chart_line12 {
	100% {
		top: 150px;
		left: 570px;
	}
}
@keyframes chart_line13 {
	100% {
		top: 150px;
		left: 710px;
	}
}





@media print {

}