@charset "UTF-8";

/* CSS Document */
#sec1 ol li {
	text-indent: -2em;
	padding: 0 0 0 2em;
	margin: 0 0 8px;
}

#sec1 ol li:before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	background: url(../guide/img/icn-number2206@2x.png) 0 0 no-repeat;
	background-size: 17px 102px;
	margin: 0 10px 0 0;
	vertical-align: middle;
}

.ltIE8 #sec1 ol li:before {
	background-image: url(../guide/img/icn-number2206.png);
}

#sec1 ol li.no2:before {
	background-position: 0 -17px;
}

#sec1 ol li.no3:before {
	background-position: 0 -34px;
}

#sec1 ol li.no4:before {
	background-position: 0 -51px;
}

#sec1 ol li.no5:before {
	background-position: 0 -68px;
}

#sec1 ol li.no6:before {
	background-position: 0 -85px;
}

.icon {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url(../guide/img/icn-mark_x2_2002.png) 0 0;
	background-size: 36px 12px;
}

.ltIE8 .icon {
	background-image: url(../guide/img/icn-mark_2002.png);
}

.icon.status2 {
	background-position: -12px 0;
}

.icon.status3 {
	background-position: -24px 0;
}

#sec3 {
	margin: 30px 0;
}

#sec3 p.-mark {
	position: relative;
	padding-left: 1.3em;
}

#sec3 p.-mark:before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url(../guide/img/icn-mark_x2_2002.png) 0 0;
	background-size: 36px 12px;
	position: absolute;
	top: 50%;
	left: 0;
	line-height: 1;
	margin-top: -0.6em;
}

#sec3 p.-mark.-tri:before {
	background-position: -12px 0;
}

#sec2 .table01 {
	margin: 13px 0 0;
	width: 530px
}

#sec2 th {
	font-size: 14px;
}

.animal {
	position: absolute;
	z-index: -1;
	right: 40px;
	top: 0;
	-webkit-transform: scale(0.3) translateX(-400px);
	transform: scale(0.3) translateX(-400px);
	-webkit-transition: right 0.8s, -webkit-transform 0.8s;
	transition: right 0.8s, transform 0.8s;
}

.animal.move {

	/*right:40px;*/
	-webkit-transform: scale(1) translateX(0);
	transform: scale(1) translateX(0);
}

.animal .fukidashi {
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: -105px;
	right: 68px;
	-webkit-transform-origin: right bottom;
	-webkit-transform: scale(0) translate(-20px, 20px);
	transform-origin: right bottom;
	transform: scale(0);
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: opacity 0.5s, transform 0.5s;
}

.animal .fukidashi.anime {
	-webkit-animation: moveFukidashi 3s ease-in-out infinite;
	animation: moveFukidashi 3s ease-in-out infinite;
}

@-webkit-keyframes moveFukidashi {
	from {
		-webkit-transform: translateY(0px);
	}

	50% {
		-webkit-transform: translateY(-15px);
	}

	to {
		-webkit-transform: translateY(0px);
	}

}

@keyframes moveFukidashi {
	from {
		transform: :translateY(0px);
	}

	50% {
		transform: translateY(-15px);
	}

	to {
		transform: :translateY(0px);
	}

}

.animal.on .fukidashi {
	opacity: 1;
	-webkit-transform: scale(1) translate(0);
	transform: scale(1);
}

.ball {
	position: absolute;
	z-index: 1;
	right: 50px;
	top: -823px;
}

.ball.on {
	right: 0;
	top: -50px;
	-webkit-animation: bounce 3s ease-in-out 1;
	animation: bounce 3s ease-in-out 1;
}

@-webkit-keyframes bounce {
	from {
		right: 50px;
		top: -800px;
		-webkit-transform: rotate(-90deg);
	}

	44% {
		top: 90px;
		-webkit-transform: scaleY(1) rotate(-45deg);
	}

	50% {
		top: 100px;
		-webkit-transform: scaleY(0.7) rotate(-40deg);
	}

	54% {
		top: 90px;
		-webkit-transform: scaleY(1) rotate(-35deg);
	}

	80% {
		top: -90px;
		-webkit-transform: scaleY(1) rotate(-20deg);
	}

	to {
		right: 0px;
		top: -50px;
		-webkit-transform: scaleY(1) rotate(0deg);
	}

}

@keyframes bounce {
	from {
		right: 50px;
		top: -800px;
		transform: rotate(-90deg);
	}

	44% {
		top: 90px;
		transform: scaleY(1) rotate(-45deg);
	}

	50% {
		top: 100px;
		transform: scaleY(0.7) rotate(-40deg);
	}

	54% {
		top: 90px;
		transform: scaleY(1) rotate(-35deg);
	}

	80% {
		top: -90px;
		transform: scaleY(1) rotate(-20deg);
	}

	to {
		right: 0px;
		top: -50px;
		transform: scaleY(1) rotate(0deg);
	}

}

/* All SP & Tablet */
@media screen and (max-width:979px) {
	#sec1 ol li {
		text-indent: -1.8em;
		padding-left: 1.8em;
	}

	#sec1 ol li:before {
		width: 15px;
		height: 15px;
		background-size: 15px 90px;
		margin: 0 6px 0 0;
	}

	#sec1 ol li.no2:before {
		background-position: 0 -15px;
	}

	#sec1 ol li.no3:before {
		background-position: 0 -30px;
	}

	#sec1 ol li.no4:before {
		background-position: 0 -45px;
	}

	#sec1 ol li.no5:before {
		background-position: 0 -60px;
	}

	#sec1 ol li.no6:before {
		background-position: 0 -75px;
	}

	.icon {
		width: 9px;
		height: 9px;
		background-size: 29px auto;
	}

	.icon.status2 {
		background-position: -10px 0;
	}

	.icon.status3 {
		background-position: -20px 0;
	}

	#sec3 {
		margin: 24px 0;
	}

	#sec2 .table01 {
		margin: 10px 0 0;
		width: 100%;
	}

	#sec2 th {
		font-size: 13px;
	}

	.animal .image {
		width: 94px;
	}

	.animal .fukidashi {
		width: 88px;
	}

	.ball .image {
		width: 50px;
	}

	.animal {
		position: absolute;
		z-index: -1;
		right: 40px;
		top: 0px;
		-webkit-transform: scale(0.3);
		transform: scale(0.3);
		-webkit-transition: top 0.8s, -webkit-transform 0.8s;
		transition: top 0.8s, transform 0.8s;
	}

	.animal.move {
		right: 40px;
		top: -110px;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	.animal .fukidashi {
		top: -55px;
		right: 68px;
	}

}

/* All SP */
@media screen and (max-width:639px) {
	#sec1 ol li {
		text-indent: -1.4em;
		padding-left: 1.4em;
	}

	#sec3 {
		margin: 20px 0;
	}

	#sec2 .table01 {
		margin: 10px 0 0;
		width: 100%;
	}

	#sec2 th {
		font-size: 11px;
	}

	.area-wrapper {
		margin: 30px 0 0;
	}

	.animal .image {
		width: 75px;
	}

	.animal .fukidashi {
		width: 70px;
	}

	.ball {
		top: -1110px;
	}

	.ball .image {
		width: 40px;
	}

	#sec2 p {
		font-size: 12px;
	}

	.animal {
		position: absolute;
		z-index: -1;
		right: 40px;
		top: 0px;
		-webkit-transform: scale(0.3);
		transform: scale(0.3);
		-webkit-transition: top 0.8s, -webkit-transform 0.8s;
		transition: top 0.8s, transform 0.8s;
	}

	.animal.move {
		right: 40px;
		top: -90px;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	.animal .fukidashi {
		top: -70px;
		right: 35px;
	}

}