@charset "utf-8";

.cloud_01 {
	z-index: 1020;
	width: 769px;
	bottom: 400px;
	margin-left: -2049px;
	-webkit-transform: translateZ(0px);
	-webkit-animation: cloud 120s -20s linear infinite;
	animation: cloud 120s -20s linear infinite;
}
.cloud_02 {
	z-index: 1030;
	width: 1095px;
	bottom: 430px;
	margin-left: -2375px;
	-webkit-transform: translateZ(0px);
	-webkit-animation: cloud 80s linear infinite;
	animation: cloud 80s linear infinite;
}
@-webkit-keyframes cloud {
	0% {-webkit-transform: translateX(0);}
	100% {-webkit-transform: translateX(3660px);}
}
@keyframes cloud {
	0% {transform: translateX(0);}
	100% {transform: translateX(3660px);}
}
.plane_01 {
	z-index: 1040;
	width: 68px;
	bottom: -40px;
	left: 50%;
	-webkit-transform: translateZ(0px);
	-webkit-animation: plane1 120s 20s linear infinite;
	animation: plane1 120s 20s linear infinite;
}
@-webkit-keyframes plane1 {
	0% {-webkit-transform: translate(-675px,0);}
	50% {-webkit-transform: translate(1350px,-1440px);}
	100% {-webkit-transform: translate(1350px,-1440px);}
}
@keyframes plane1 {
	0% {transform: translate(-675px,0);}
	50% {transform: translate(1350px,-1440px);}
	100% {transform: translate(1350px,-1440px);}
}
.plane_02 {
	z-index: 1050;
	width: 68px;
	bottom: -40px;
	left: 50%;
	-webkit-transform: translateZ(0px);
	-webkit-animation: plane2 120s 80s linear infinite;
	animation: plane2 120s 80s linear infinite;
}
@-webkit-keyframes plane2 {
	0% {-webkit-transform: translate(675px,0);}
	50% {-webkit-transform: translate(-1350px,-1440px);}
	100% {-webkit-transform: translate(-1350px,-1440px);}
}
@keyframes plane2 {
	0% {transform: translate(675px,0);}
	50% {transform: translate(-1350px,-1440px);}
	100% {transform: translate(-1350px,-1440px);}
}





.animation {
	width: 100%;
	height: 100%;
	margin-top: 40px;
}
.animation > * {
	position: absolute;
	left: 50%;
	-webkit-transform: translateZ(0px);
}





/* 列車、船
----------------------------------------------------------------------*/
#domestic .train {
	z-index: 2010;
	width: 517px;
	bottom: 383px;
	margin-left: -1867px;
}
#domestic.on .train {
	-webkit-animation: train 40s -10s linear infinite;
	animation: train 40s -10s linear infinite;
}
#overseas .train {
	z-index: 3010;
	z-index: 1500;
	width: 517px;
	bottom: 334px;
	margin-left: -405px;
}
#overseas.on .train {
	-webkit-animation: train 40s ease-in-out infinite;
	animation: train 40s ease-in-out infinite;
}
@-webkit-keyframes train {
	0% {-webkit-transform: translateX(0);}
	40% {-webkit-transform: translateX(0);}
	50% {-webkit-transform: translateX(2700px);}
	90% {-webkit-transform: translateX(2700px);}
	100% {-webkit-transform: translateX(0);}
}
@keyframes train {
	0% {transform: translateX(0);}
	40% {transform: translateX(0);}
	50% {transform: translateX(2700px);}
	90% {transform: translateX(2700px);}
	100% {transform: translateX(0);}
}
#domestic .ship {
	z-index: 2020;
	width: 338px;
	bottom: 147px;
	margin-left: 870px;
}
#domestic.on .ship {
	-webkit-animation: ship 50s ease-in-out infinite alternate;
	animation: ship 50s ease-in-out infinite alternate;
}
@-webkit-keyframes ship {
	0% {-webkit-transform: translateX(0);}
	30% {-webkit-transform: translateX(-410px);}
	40% {-webkit-transform: translateX(-390px);}
	50% {-webkit-transform: translateX(-410px);}
	60% {-webkit-transform: translateX(-390px);}
	70% {-webkit-transform: translateX(-410px);}
	100% {-webkit-transform: translateX(0);}
}
@keyframes ship {
	0% {transform: translateX(0);}
	30% {transform: translateX(-410px);}
	40% {transform: translateX(-390px);}
	50% {transform: translateX(-410px);}
	60% {transform: translateX(-390px);}
	70% {transform: translateX(-410px);}
	100% {transform: translateX(0);}
}





/* 人々
----------------------------------------------------------------------*/
#domestic .people_01 {
	z-index: 2140;
	width: 39px;
	bottom: 210px;
	margin-left: -69px;
}
#domestic.on .people_01 {
	-webkit-animation: people 2s 1000ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1000ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#domestic .people_02 {
	z-index: 2130;
	width: 38px;
	bottom: 210px;
	margin-left: -35px;
}
#domestic.on .people_02 {
	-webkit-animation: people 2s 1050ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1050ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#domestic .people_03 {
	z-index: 2120;
	width: 38px;
	bottom: 210px;
	margin-left: -5px;
}
#domestic.on .people_03 {
	-webkit-animation: people 2s 1100ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1100ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#domestic .people_04 {
	z-index: 2110;
	width: 38px;
	bottom: 210px;
	margin-left: 15px;
}
#domestic.on .people_04 {
	-webkit-animation: people 2s 1150ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1150ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#domestic .people_05 {
	z-index: 2100;
	width: 52px;
	bottom: 210px;
	margin-left: 41px;
}
#domestic.on .people_05 {
	-webkit-animation: people 2s 1200ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1200ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#overseas .people_01 {
	z-index: 3150;
	width: 60px;
	bottom: 111px;
	margin-left: 27px;
}
#overseas.on .people_01 {
	-webkit-animation: people 2s 1000ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1000ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#overseas .people_02 {
	z-index: 3140;
	width: 54px;
	bottom: 109px;
	margin-left: 70px;
}
#overseas.on .people_02 {
	-webkit-animation: people 2s 1200ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1200ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#overseas .people_03 {
	z-index: 3130;
	width: 53px;
	bottom: 108px;
	margin-left: 115px;
}
#overseas.on .people_03 {
	-webkit-animation: people 2s 1250ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1250ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#overseas .people_04 {
	z-index: 3120;
	width: 58px;
	bottom: 108px;
	margin-left: 158px;
}
#overseas.on .people_04 {
	-webkit-animation: people 2s 1300ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1300ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#overseas .people_05 {
	z-index: 3110;
	width: 32px;
	bottom: 109px;
	margin-left: 212px;
}
#overseas.on .people_05 {
	-webkit-animation: people 2s 1350ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1350ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
#overseas .people_06 {
	z-index: 3100;
	width: 42px;
	bottom: 109px;
	margin-left: 240px;
}
#overseas.on .people_06 {
	-webkit-animation: people 2s 1400ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
	animation: people 2s 1400ms cubic-bezier(0.250, 1.000, 1.000, 0.750) infinite;
}
@-webkit-keyframes people {
	0% {-webkit-transform: translateY(0);}
	5% {-webkit-transform: translateY(-20px);}
	10% {-webkit-transform: translateY(0);}
	100% {-webkit-transform: translateY(0);}
}
@keyframes people {
	0% {transform: translateY(0);}
	5% {transform: translateY(-20px);}
	10% {transform: translateY(0);}
	100% {transform: translateY(0);}
}





/* 建物
----------------------------------------------------------------------*/
.build_01,
.build_02,
.build_03,
.build_04 {
	z-index: 2600;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
}
#domestic .build_01 {
	z-index: 2500;
	width: 106px;
	bottom: 130px;
	margin-left: -313px;
}
#domestic.on .build_01 {
	-webkit-animation: d_build 2s 2000ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
	animation: d_build 2s 2000ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
}
#domestic .build_02 {
	z-index: 2510;
	width: 118px;
	bottom: 130px;
	margin-left: -199px;
}
#domestic.on .build_02 {
	-webkit-animation: d_build 2s 2250ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
	animation: d_build 2s 2250ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
}
#overseas .build_01 {
	z-index: 3500;
	width: 53px;
	bottom: 231px;
	margin-left: -511px;
}
#overseas.on .build_01 {
	-webkit-animation: o_build 2s 2000ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
	animation: o_build 2s 4000ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
}
#overseas .build_02 {
	z-index: 3510;
	width: 47px;
	bottom: 224px;
	margin-left: -453px;
}
#overseas.on .build_02 {
	-webkit-animation: o_build 2s 2150ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
	animation: o_build 2s 4150ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
}
#overseas .build_03 {
	z-index: 3520;
	width: 25px;
	bottom: 224px;
	margin-left: -401px;
}
#overseas.on .build_03 {
	-webkit-animation: o_build 2s 2300ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
	animation: o_build 2s 4300ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
}
#overseas .build_04 {
	z-index: 3530;
	width: 65px;
	bottom: 224px;
	margin-left: -372px;
}
#overseas.on .build_04 {
	-webkit-animation: o_build 2s 4600ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
	animation: o_build 2s 4900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) infinite;
}
@-webkit-keyframes d_build {
	0% {-webkit-transform: scaleY(1);}
	20% {-webkit-transform: scaleY(1.5);}
	40% {-webkit-transform: scaleY(1);}
	100% {-webkit-transform: scaleY(1);}
}
@keyframes d_build {
	0% {transform: scaleY(1);}
	20% {transform: scaleY(1.5);}
	40% {transform: scaleY(1);}
	100% {transform: scaleY(1);}
}
@-webkit-keyframes o_build {
	0% {-webkit-transform: scaleY(1);}
	20% {-webkit-transform: scaleY(1.125);}
	40% {-webkit-transform: scaleY(1);}
	100% {-webkit-transform: scaleY(1);}
}
@keyframes o_build {
	0% {transform: scaleY(1);}
	20% {transform: scaleY(1.125);}
	40% {transform: scaleY(1);}
	100% {transform: scaleY(1);}
}





/* パラパラアニメ
----------------------------------------------------------------------*/
.flick_01,
.flick_02 {
	z-index: 3800;
	overflow: hidden;
}
.flick_01 img,
.flick_02 img {
	z-index: 3810;
	position: absolute;
	left: 0;
}
#domestic .flick_01 {
	width: 118px;
	height: 107px;
	bottom: 88px;
	margin-left: -623px;
}
#domestic.on .flick_01 img {
	-webkit-animation: flick 2s infinite;
	animation: flick 2s infinite;
}
#overseas .flick_01 {
	width: 209px;
	height: 227px;
	bottom: 26px;
	margin-left: -561px;
}
#overseas.on .flick_01 img {
	-webkit-animation: flick 2s infinite;
	animation: flick 2s infinite;
}
#overseas .flick_02 {
	width: 74px;
	height: 127px;
	bottom: 195px;
	margin-left: 530px;
}
#overseas.on .flick_02 img {
	-webkit-animation: flick 500ms infinite;
	animation: flick 500ms infinite;
}
@-webkit-keyframes flick {
	0% {top: 0;}
	25% {top: 0;}
	25.01% {top: -300px;}
	75% {top: -300px;}
	75.01% {top: 0;}
	100% {top: 0;}
}
@keyframes flick {
	0% {top: 0;}
	25% {top: 0;}
	25.01% {top: -300px;}
	75% {top: -300px;}
	75.01% {top: 0;}
	100% {top: 0;}
}





/* 出入りするパラパラアニメ
----------------------------------------------------------------------*/
.ppm_01 {
	z-index: 3996;
	width: 105px;
	height: 100px;
	bottom: 105px;
	margin-left: -313px;
	overflow: hidden;
}
.ppm_02 {
	z-index: 3998;
	width: 150px;
	height: 100px;
	bottom: 105px;
	margin-left: -199px;
	overflow: hidden;
}
.ppm_01 img{
	position: absolute;
	z-index: 3997;
	top: 0;
	left: 0;
}
.on .ppm_01 img  {
	-webkit-animation: ppm 5s infinite;
	animation: ppm 5s infinite;
}
.ppm_02 img{
	position: absolute;
	z-index: 3999;
	top: 0;
	left: 0;
}
.on .ppm_02 img {
	-webkit-animation: ppm 5s 2500ms infinite;
	animation: ppm 5s 2500ms infinite;
}
@-webkit-keyframes ppm {
	0% {top: 0;}
	25% {top: 0;}
	25.01% {top: -100px;}
	50% {top: -100px;}
	50.01% {top: -200px;}
	75% {top: -200px;}
	75.01% {top: -300px;}
	100% {top: -300px;}
}
@keyframes ppm {
	0% {top: 0;}
	25% {top: 0;}
	25.01% {top: -100px;}
	50% {top: -100px;}
	50.01% {top: -200px;}
	75% {top: -200px;}
	75.01% {top: -300px;}
	100% {top: -300px;}
}




/* 煙
----------------------------------------------------------------------*/
#domestic .puff {
	z-index: 3900;
	bottom: 494px;
	margin-left: 448px;
}
#domestic .puff.alt {
	z-index: 3905;
	bottom: 371px;
	margin-left: 357px;
}
#overseas .puff {
	z-index: 3900;
	bottom: 626px;
	margin-left: 193px;
}
.puff img {
	position: absolute;
	opacity: 0;
	-webkit-transform: translateZ(0px);
}
.puff_01 {
	top: 108px;
	width: 12px;
}
#domestic .puff_01 {left: 1px;}
#overseas .puff_01 {left: 56px;}
.on .puff_01 {
	z-index: 3900;
	-webkit-animation: puff 7s linear infinite;
	animation: puff 7s linear infinite;
}
.on .alt .puff_01 {
	z-index: 3905;
	-webkit-animation: puff 7s 3500ms linear infinite;
	animation: puff 7s 3500ms linear infinite;
}
.puff_02 {
	top: 94px;
	width: 16px;
}
#domestic .puff_02 {left: 0;}
#overseas .puff_02 {left: 53px;}
.on .puff_02 {
	z-index: 3910;
	-webkit-animation: puff 7s 500ms linear infinite;
	animation: puff 7s 500ms linear infinite;
}
.on .alt .puff_02 {
	z-index: 3915;
	-webkit-animation: puff 7s 4000ms linear infinite;
	animation: puff 7s 4000ms linear infinite;
}
.puff_03 {
	top: 74px;
	width: 24px;
}
#domestic .puff_03 {left: 4px;}
#overseas .puff_03 {left: 41px;}
.on .puff_03 {
	z-index: 3920;
	-webkit-animation: puff 7s 1000ms linear infinite;
	animation: puff 7s 1000ms linear infinite;
}
.on .alt .puff_03 {
	z-index: 3925;
	-webkit-animation: puff 7s 4500ms linear infinite;
	animation: puff 7s 4500ms linear infinite;
}
.puff_04 {
	top: 42px;
	width: 36px;
}
#domestic .puff_04 {left: 2px;}
#overseas .puff_04 {left: 31px;}
.on .puff_04 {
	z-index: 3930;
	-webkit-animation: puff 7s 1500ms linear infinite;
	animation: puff 7s 1500ms linear infinite;
}
.on .alt .puff_04 {
	z-index: 3935;
	-webkit-animation: puff 7s 5000ms linear infinite;
	animation: puff 7s 5000ms linear infinite;
}
.puff_05 {
	top: 0;
	width: 54px;
}
#domestic .puff_05 {left: 15px;}
#overseas .puff_05 {left: 0;}
.on .puff_05 {
	z-index: 3940;
	-webkit-animation: puff 7s 2000ms linear infinite;
	animation: puff 7s 2000ms linear infinite;
}
.on .alt .puff_05 {
	z-index: 3945;
	-webkit-animation: puff 7s 5500ms linear infinite;
	animation: puff 7s 5500ms linear infinite;
}
@-webkit-keyframes puff {
	0% {opacity: 0;-webkit-transform: scale(0);}
	40% {opacity: 1;-webkit-transform: scale(1);}
	80% {opacity: 0;-webkit-transform: scale(2);}
	100% {opacity: 0;-webkit-transform: scale(0);}
}
@keyframes puff {
	0% {opacity: 0;transform: scale(0);}
	40% {opacity: 1;transform: scale(1);}
	80% {opacity: 0;transform: scale(2);}
	100% {opacity: 0;transform: scale(0);}
}





/* 観覧車
----------------------------------------------------------------------*/
#domestic .wheel {
	z-index: 2600;
	width: 152px;
	height: 152px;
	bottom: 346px;
	margin-left: -581px;
}
#domestic.on .wheel {
	-webkit-animation: wheel 90s linear infinite;
	animation: wheel 90s linear infinite;
}
@-webkit-keyframes wheel {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@keyframes wheel {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
#domestic .wheel div img {
	position: absolute;
	width: 15px;
	margin: -7px 0 0 -7px;
}
#domestic.on .wheel div img {
	-webkit-animation: gondola 90s linear infinite;
	animation: gondola 90s linear infinite;
}
@-webkit-keyframes gondola {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(-360deg);}
}
@keyframes gondola {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}