@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');

html {
    font-size: 62.5%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-y: scroll;
}

body {
    font-family: "Noto Sans JP", "メイリオ", sans-serif;
    letter-spacing: 0.08em;
    height: 100%;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
}

body.cloud-opening-start{
    
    animation-name: bodyScroll;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    
    overflow: hidden;
    height: 100vh;

}
@keyframes bodyScroll{
    0%{overflow: hidden;}
    99%{overflow: hidden;}
    100%{overflow: visible;}
}
body.okClicked{
    overflow: visible;
}


video {
    outline: none;
    border: none;
    padding: 10px;
    filter: drop-shadow(0px 0px #000);
}

video filter {
    filter: drop-shadow(0px 0px #000);
    filter: 0;
}


ol,
ul,
li,
dd,
dt,
dl,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
h9,
p,
span,
img,
video,
input,
form,
textarea,
table,
tr,
td {
    margin: 0px;
    padding: 0px;
    list-style-image: none;
    list-style-type: none;
    border: none;
}

canvas {
    margin: 0px;
    padding: 0px;
    border: none;
    vertical-align: bottom;
}

img {
    border: none;
}

a,li,span {
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
}

button:focus,
a:focus {
    outline: none;
    text-decoration: none;
    cursor: pointer;
}

img {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;

    image-rendering: crisp-edges;
    backface-visibility: hidden;
}

a,
img,
input,
svg{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}



/*ローダー*/
#loader-area {
    display: block;
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
}
#loader-text {
    font-family: 'Caveat', cursive, sans-serif;
    color: #333;
    font-size: 28px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.load-finished #loader-text {
    opacity: 0;
    transition-delay: 0.2s;
    transition-duration: 0s;
    visibility: hidden;
}
.cloud-opening-start #loader-area {
    opacity: 0;
    transition-delay: 0.4s;
    transition-duration: 2s;
    visibility: hidden;
}

/*はじめにお読みください*/
#first-rule-area {
    opacity: 0;
    visibility: hidden;
    
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 9999;
    transform: scale(0.95);
}
.load-finished #first-rule-area {
    transform: scale(1);
    transition-delay: 0.4s;
    transition-duration: 0.8s;
    transition-timing-function: ease-out;

    opacity: 1;
    visibility: visible;
}
.cloud-opening-start #first-rule-area {
    transition-duration: 0.4s;
    opacity: 0;
    visibility: hidden;
    
    pointer-events: none;
}

/*雲のオープニング*/
#opening-clouds-outer {
    display: block;
    position: fixed;
    background-color: rgba(255,255,255,1);
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 888888;
    
    opacity: 0;
}
.cloud-opening-start #opening-clouds-outer {
    animation-name: openingCloudsOuter;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-duration: 10s;
    transform-origin: center center;
    opacity: 0;
}
@keyframes openingCloudsOuter{
    0%{background-color: rgba(255,255,255,1) ; opacity: 0;}
    1%{background-color: rgba(255,255,255,1) ; opacity: 1;}
    7%{background-color: rgba(255,255,255,1) ; opacity: 1;}
    64%{background-color: rgba(255,255,255,0) ; opacity: 1;}
    65%{background-color: rgba(255,255,255,0) ; opacity: 1;}
    79%{background-color: rgba(255,255,255,0) ; opacity: 0;}
    100%{background-color: rgba(255,255,255,0) ; opacity: 0;}
}


#op-clouds-inner{
    position: fixed;
    top: -50vh;
    left: -50vw;
    width: 200vw;
    height: 200vh;
    opacity: 1;
/*    background: skyblue;*/

}
.cloud-opening-start #op-clouds-inner{
    animation-name: openingCloudsInner;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-duration: 9s;
    transform-origin: center center;
    transform: scale3d(1,1,1);
    opacity: 0;
    
}
@keyframes openingCloudsInner{
    0%{transform: scale3d(1,1,1); opacity: 0;}
    20%{transform: scale3d(1,1,1); opacity: 1;}
    65%{transform: scale3d(1,1,1); opacity: 1;}
    100%{transform: scale3d(2,2,1); opacity: 1;} 
}

.cloud-opening-start #opening-clouds-outer img {
/*#opening-clouds-outer img {*/
        display: block;
    position: fixed;
    height: auto;
    left: 50%;
    top: 50%;
    
    animation-name: openingClouds;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    margin-top: -100vh;    

}

/*横向きのときのみ*/
@keyframes openingClouds{
    0%{transform: translate3d(0vw,0vw,0px);}
    100%{transform: translate3d(-200vw,200vw,0px);}
}

.op-clouds-01{
    width: 420px;
    margin-left: 10vw;
    animation-duration: 40s;
    animation-delay: -2.5s;
    z-index: 100;
    

}
.op-clouds-02{
    width: 372px;
    margin-left: 90vw;
    animation-duration: 36s;
    animation-delay: -3s;
    z-index: 100;


}
.op-clouds-03{
    width: 386px;
    margin-left: 55vw;
    animation-duration: 24s;
    animation-delay: -3s;
    
    
    z-index: 110;
    

}
.op-clouds-04{
    width: 124px;
    margin-left: 100vw;
    animation-duration: 5s;
    animation-delay: 0s;
    
    
}
.op-clouds-05{
    width: 122px;
    margin-left: 20vw;
    animation-duration: 12s;
    animation-delay: -10s;
    
    }
.op-clouds-06{
    width: 216px;
    margin-left: 36vw;
    animation-duration: 15s;
    animation-delay: -1.5s;

}
.op-clouds-07{
    width: 203px;
    margin-left: 20vw;
    animation-duration: 50s;
    animation-delay: -7.5s;
}
.op-clouds-08{
    width: 190px;
    margin-left: -20vw;
    animation-duration: 5s;
    animation-delay: -2.5s;
}
.op-clouds-09{
    width: 150px;
    margin-left: 80vw;
    animation-duration: 20s;
    animation-delay: 0s;
}
.op-clouds-10{
    width: 325px;
    margin-left: 40vw;
    animation-duration: 30s;
    animation-delay: -9s;
    z-index: 90;
}
.op-clouds-11{
    width: 192px;
    margin-left: 80vw;
    animation-duration: 70s;
    animation-delay: -20s;
}
.op-clouds-12{
    width: 94px;
    margin-left: 0px;
    animation-duration: 50s;
    animation-delay: -10s;
}
.op-clouds-13{
    width: 152px;
    margin-left: 80vw;
    animation-duration: 7s;
    animation-delay: -1s;
    z-index: -1;
}
.op-clouds-14{
    width: 191px;
    margin-left: 85vw;
    animation-duration: 16s;
    animation-delay: -4s;
}
.op-clouds-15{

    width: 124px;
    margin-left: 100vw;
    animation-duration: 7s;
    animation-delay: 0s;
}

/*KVマップ*/

#kv-outer {

    /*    作業時のみ全てのプロパティをオフ　公開時はオン*/

    visibility: hidden;
    display: none;
    opacity: 0;
}

.cloud-opening-start #kv-outer {
    animation-name: mapOpening;
    animation-duration: 8.5s;
    animation-fill-mode: forwards;
    transform-origin: center center;
    animation-timing-function: ease-out;

    visibility: visible;
    display: block;
    opacity: 0;
}

@keyframes mapOpening {
    0% {        transform: translate3d(0px, -300px, 0px) ; opacity: 0;    }
    5% {        transform: translate3d(0px, -300px, 0px) ; opacity: 1;    }
    9.5% {        transform: translate3d(0px, -300px, 0px) ; opacity: 1;    }
    100% {        transform: translate3d(0px, 0px, 0px) ; opacity: 1;    }
}



.map-ui-outer {

    /*            background-image: url(../img/Virtual_Nerimaku-03-12colors.png);*/
    background-repeat: no-repeat;
    background-position: center top;
    display: block;
    margin-left: auto;
    margin-right: auto;

    overflow: hidden;
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    
    background-color: #fff;



}

#map-ui-inner {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;

    /*                background-color: rgba(255,0,0,0.1);*/
    /*                background-image: url(VR_Modal-001.png);*/
    transform-origin: center center;

}


.logo {
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left top;
    display: block;
    z-index: 1;
    position: absolute;
    transform-origin: left top;
    text-indent: -9999px;
    opacity: 0;
    
}

.cloud-opening-start h1.logo {
    
    
    animation-name: logoFadeIn;
    animation-duration: 0.8s;
    animation-delay: 7.5s;
    animation-fill-mode: forwards;
    
}
@keyframes logoFadeIn{
    0%{opacity: 0;}
    100%{opacity: 1;}
    
}


/* 各ゾーンのナビのトリガー */

.vr-nav-triger{
    display: block;

    z-index: 99999;

    position: absolute;
    left: 50%;
    top: 50%;
    transform:
        translateX(-60%) rotate(45deg) skew(calc((90deg - 135deg) / 2),
            calc((90deg - 135deg) / 2));
    /* calc((90deg - 欲しい角度) / 2) */
    
}
#vr-triger-toshimaen.vr-nav-triger{
    width: 350px;
    height: 350px;
    margin-top: -420px;
    margin-left: -0px;
    cursor: pointer;
    /*            background-color: rgba(128, 255, 128, 0.5);*/
}
#vr-triger-cinemastudio.vr-nav-triger{
    margin-top: -240px;
    margin-left: -420px;
    width: 350px;
    height: 350px;
    cursor: pointer;
    /*            background-color: rgba(255,128, 0, 0.5);*/
}
#vr-triger-history.vr-nav-triger{
    margin-top: -210px;
    margin-left: 330px;
    width: 280px;
    height: 280px;
    cursor: pointer;
    /*            background-color: rgba(255, 0, 255, 0.5);*/
}
#vr-triger-daikonbatake.vr-nav-triger{
    margin-top: 150px;
    margin-left: 30px;
    width: 320px;
    height: 320px;
    cursor: pointer;
/*                background-color: rgba(255, 128, 0, 0.5);*/
}



/* 各ゾーンのナビ */

#zone-nav {
    display: block;
    max-width: 3100px;
    width: 100%;
    height: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}


/*公開済みゾーンのデザイン ここから*/

.btn-close-zone-nav{
    position: absolute;
    top: -30px;
    right: -20px;
    display: block;
    background-image: url(../img/btn-close.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 72px auto;
    width: 100px;
    height: 100px;
    transform-origin: center center;
    cursor: pointer;

}
.btn-close-zone-nav:hover{
    transform: scale(1.1);
}



/*赤い矢印*/
.zone-modal-triger {
    opacity: 0;
    transform: translateY(-50px);
}
.zone-modal-triger.okClicked {
    opacity: 1;
    transform: translateY(0px);
    transition-delay: 0.6s;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
.zone-modal-triger img{
    display: block;
    position: absolute;
    width: 24px;
    height: auto;
    padding: 2px;
}
.zone-modal-triger.MouseOver img{
    transform: scale3d(1,1,1);

    animation-name: ModalTrigerMouseOver;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes ModalTrigerMouseOver{
    0%{transform: scale3d(1,1,1);}
    50%{transform: scale3d(1.2,1.2,1);}
    100%{transform: scale3d(1,1,1);}
}





#zone-nav li {
    width: 360px;
    height: 280px;
    z-index: 2000;
    position: absolute;
    display: block;
    visibility: hidden;

    opacity: 0;
    transition-duration: 0.1s;
    transform: scale3d(0.72,0.72,1);
    transform-origin: center center;

    background-image: url(../img/fukidashi-base.svg);
    background-size: 358px auto;
    background-repeat: no-repeat;

    overflow: visible;

}
#zone-nav li.ON  {
    transition-duration: 0.36s;
    visibility: visible;
    opacity: 1;
    transform: scale3d(1,1,1);
    transition-timing-function: cubic-bezier(.34,2.43,.81,.58);
}

#zone-nav li.zone-nav-toshimaen  { top: 4vw; left: 50%; margin-left: -180px; }
#zone-nav li.zone-nav-cinemastudio  { left: 3%; top: 21vw;}
#zone-nav li.zone-nav-history  { right: 3%;  top: 21vw;}
#zone-nav li.zone-nav-daikonbatake  { top: 55vw; left: 50%; margin-left: -180px; }



/* COMING SOON リンク　オフ*/
/*
#zone-nav li.zone-nav-cinemastudio a,
#zone-nav li.zone-nav-daikonbatake a
*/
#zone-nav li.zone-nav-history a
  { 
    pointer-events: none;
}







#zone-nav li .title {
    display: block;
    position: absolute;
    width: 189px;
    height: auto;

    left: 80px;
    top: -20px;

}
#zone-nav li.ON .title {
    animation-name: titleBound;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transform: translateY(-20px);
}

@keyframes titleBound{
    0%{transform: translateY(-8px);}
    10%{transform: translateY(-6px);}
    20%{transform: translateY(4px);}
    30%{transform: translateY(-2px);}
    40%{transform: translateY(-0px);}
    100%{transform: translateY(-0px);}
}

#zone-nav li .lead {
    display: block;
    position: absolute;
    width: 260px;
    height: auto;

    left: 48px;
    top: 42px;

    opacity: 0;
    transform: translateY(-5px);

}
#zone-nav li.ON .lead {
    opacity: 1;

    transition-delay: 0.2s;
    transition-duration: 0.4s;
    transform: translateY(-5px);

}
#zone-nav li .btn {
    display: block;
    position: absolute;
    width: 280px;
    height: 73px;
    overflow: hidden;

    left: 38px;
    bottom: 62px;

}
#zone-nav li .btn img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(0px);


}

#zone-nav li.zone-nav-toshimaen .btn:hover img  {
    transform: translateY(-73px);
}


#zone-nav li.ON .btn {
    animation-name: zoneBTNBound;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    transform: translateY(-0px);

}

@keyframes zoneBTNBound{
    0%{transform: scale(1);}
    20%{transform: scale(1);}
    50%{transform: scale(1.06);}
    80%{transform: scale(0.96);}
    100%{transform: scale(1);}
}


#zone-nav li .nerimaru {
    display: block;
    position: absolute;
    width: 80px;
    height: auto;

    left: 43px;
    bottom: 130px;



}
#zone-nav li.ON .nerimaru {
    animation-name: nerimaruBound;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    transform: translateY(-0px);
}

@keyframes nerimaruBound{
    0%{transform: translateY(-0px);}
    20%{transform: translateY(-0px);}
    50%{transform: translateY(-10px);}
    80%{transform: translateY(3px);}
    100%{transform: translateY(-0px);}
}







.zone {
    position: absolute;
    top: 50%;
    left: 50%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
}

#zone-daikonbatake {
    z-index: 100;
    width: 376px;
    height: 200px;
    margin-left: -180px;
    margin-top: 200px;
    background-image: url(../img/bg-zone-daikonbatake.png);
    background-position: center bottom;
    /*              background-color: rgba(0,255,0,0.4);*/

    /*            opacity: 0.3;*/
}

#daikonbatake-people-A{
    position: absolute;
    top: 55px;
    left: 190px;
    width: 100px;
    height: 100px;
    display: block;
    overflow: hidden;


}
#daikonbatake-people-A img{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: auto;
    display: block;

    animation-name: daikonbatakePeopleA;
    animation-duration: 5s ;
    animation-iteration-count: infinite;
    animation-timing-function: steps(11);
    transform: translateY(0px);
}

@keyframes daikonbatakePeopleA {
    0% {transform: translateY(0px);}
    50% {transform: translateY(-1100px);}
    100% {transform: translateY(-1100px);}
}



#zone-shakujiikouen {
    z-index: 90;
    width: 459px;
    height: 300px;
    margin-left: -500px;
    margin-top: 16px;
    /*                background-color: rgba(0,255,0,0.4);*/
    background-image: url(../img/bg-zone-shakujiikouen-01.png);
    background-position: center center;

    /*            opacity: 0.3;*/
    
}



#zone-shakujiikouen .people-A img ,
#zone-shakujiikouen .people-B img {
    position: absolute;
    left: -34px;
    top: 16px;
    display: block;
    width: 500px;
    height: auto;

    animation-name: shakujiiPeople;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0;
}
#zone-shakujiikouen .people-A img:nth-child(1){animation-delay: -0.5s;}
#zone-shakujiikouen .people-A img:nth-child(2){animation-delay: 0s;}
#zone-shakujiikouen .people-B img:nth-child(1){animation-delay: -0.25s;}
#zone-shakujiikouen .people-B img:nth-child(2){animation-delay: 0.25s;}
@keyframes shakujiiPeople{
    0%{opacity: 0;}
    30%{opacity: 1;}
    70%{opacity: 1;}
    100%{opacity: 0;}
}


#zone-shakujiikouen .wave img {
    position: absolute;
    left: 10px;
    top: 31px;
    display: block;
    width: 440px;
    height: auto;

    animation-name: shakujiiWave;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0;
}
#zone-shakujiikouen .wave img:nth-child(2){animation-delay: 0.5s;}
@keyframes shakujiiWave{
    0%{opacity: 0;}
    15%{opacity: 0;}
    40%{opacity: 1;}
    60%{opacity: 1;}
    85%{opacity: 0;}
    100%{opacity: 0;}
}




#zone-museums {
    z-index: 80;
    width: 482px;
    height: 300px;
    margin-left: 14px;
    margin-top: 7px;
    /*                background-color: rgba(0,255,0,0.4);*/
    background-image: url(../img/bg-zone-museums-gym.png);
    background-position: center center;
}

#zone-city {
    z-index: 70;
    width: 328px;
    height: 300px;
    margin-left: -184px;
    margin-top: -118px;
    /*                                background-color: rgba(0,255,0,0.4);*/
    background-image: url(../img/bg-zone-city.png);
    background-position: center center;
}

#zone-history {
    z-index: 60;
    width: 456px;
    height: 350px;
    margin-left: 40px;
    margin-top: -228px;
    /*                background-color: rgba(0,255,0,0.4);*/
    background-image: url(../img/bg-zone-history-residential.png);
    background-position: center top;
    opacity: 1;
}


#zone-train {
    z-index: 50;
    width: 1000px;
    height: 490px;
    margin-left: -505px;
    margin-top: -323px;
    /*                                            background-color: rgba(255,0,0,1);*/
    background-image: url(../img/bg-zone-train.png);
    background-position: center center;
    overflow: hidden;
}
#train-trees {
    position: absolute;
    display: block;
    top: 2px;
    left: 0px;
    width: 1000px;
    height: auto;
}
.cloud-opening-start #zone-train {
    z-index: 50;
}

#train {
    display: block;
    width: 120px;
    height: 30px;
    /*                background-color: red;*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 390px;
    margin-top: -218px;

    /*                opacity: 0.5;*/

    animation-name: trainBaseLine;
    animation-duration: 15s;
    /*                animation-direction: alternate-reverse;*/
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translate3d(100px, -40px, 0px);

    animation-delay: -1s;
}

@keyframes trainBaseLine {
    0% {
        transform: translate3d(100px, -42px, 0px);
    }

    50% {
        transform: translate3d(-450px, 201px, 0px);
    }

    100% {
        transform: translate3d(-1000px, 443px, 0px);
    }
}

#train img {
    position: absolute;
    height: auto;

    animation-name: trainBounds;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translate3d(0px, 0px, 0px);
}

#train #train-01 {
    width: 54px;
    left: 0px;
    top: 0px;
    animation-delay: 0.0s;
}

#train #train-02 {
    width: 50px;
    left: 39px;
    top: -14px;
    animation-delay: 0.15s;
}

#train #train-03 {
    width: 52px;
    left: 73px;
    top: -30px;
    animation-delay: 0.3s;
}

@keyframes trainBounds {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    20% {
        transform: translate3d(0px, 0px, 0px);
    }

    30% {
        transform: translate3d(1px, 0px, 0px);
    }

    35% {
        transform: translate3d(1px, 0px, 0px);
    }

    40% {
        transform: translate3d(0px, 0px, 0px);
    }

    48% {
        transform: translate3d(0px, 0px, 0px);
    }

    50% {
        transform: translate3d(-0px, -1px, 0px);
    }

    58% {
        transform: translate3d(-0px, -1px, 0px);
    }

    60% {
        transform: translate3d(0px, 0px, 0px);
    }

    70% {
        transform: translate3d(0px, 0px, 0px);
    }

    80% {
        transform: translate3d(1px, 0px, 0px);
    }

    90% {
        transform: translate3d(1px, 0px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}


#zone-cinema-studio {
    z-index: 40;
    width: 342px;
    height: 350px;
    margin-left: -500px;
    margin-top: -206px;
    /*                                background-color: rgba(0,255,0,0.4);*/
    background-image: url(../img/bg-zone-cinema-studio.png);
    background-position: center top;

    /*            opacity: 0.3;*/

}
#zone-cinema-studio img.sub-tree {
    display: none;
    display: block;
    position: absolute;
    top: -24px;
    left: 160px;
    width: 55px;
}
.sub-tree-A-01{margin-left: -12px; margin-top: -10px;}
.sub-tree-A-02{margin-left: 10px; margin-top: 2px;}



#zone-cinema-studio .people-slide-A img,
#zone-cinema-studio .people-slide-B img{
    opacity: 0;
    animation-name: peopleSlide;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    position: absolute;
    left: 93px;
    top: 90px;
    display: block;
    width: 180px;
    height: auto;
}





#zone-cinema-studio .people-slide-A img:nth-child(1) {animation-delay: -2s;}
#zone-cinema-studio .people-slide-A img:nth-child(2) {animation-delay: 0s;}
#zone-cinema-studio .people-slide-A img:nth-child(3) {animation-delay: 2s;}
#zone-cinema-studio .people-slide-A img:nth-child(4) {animation-delay: 4s;}

#zone-cinema-studio .people-slide-B img:nth-child(1) {animation-delay: -1s;}
#zone-cinema-studio .people-slide-B img:nth-child(2) {animation-delay: 1s;}
#zone-cinema-studio .people-slide-B img:nth-child(3) {animation-delay: 3s;}
#zone-cinema-studio .people-slide-B img:nth-child(4) {animation-delay: 5s;}





#zone-museums .people-slide-A img,
#zone-museums .people-slide-B img{
    opacity: 0;
    animation-name: peopleSlide;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
#zone-museums div img {
    position: absolute;
    left: 215px;
    top: 45px;
    display: block;
    width: 220px;
    height: auto;
}

#zone-museums .people-slide-A img:nth-child(1) {animation-delay: 0s;}
#zone-museums .people-slide-A img:nth-child(2) {animation-delay: 1s;}
#zone-museums .people-slide-A img:nth-child(3) {animation-delay: 2s;}
#zone-museums .people-slide-A img:nth-child(4) {animation-delay: 3s;}

#zone-museums .people-slide-B img:nth-child(1) {animation-delay: 0.5s;}
#zone-museums .people-slide-B img:nth-child(2) {animation-delay: 1.5s;}
#zone-museums .people-slide-B img:nth-child(3) {animation-delay: 2.5s;}
#zone-museums .people-slide-B img:nth-child(4) {animation-delay: 3.5s;}

@keyframes peopleSlide{
    0%{opacity: 0;}
    35%{opacity: 0;}
    40%{opacity: 1;}
    60%{opacity: 1;}
    65%{opacity: 0;}
    100%{opacity: 0;}

}









#zone-toshimaen {
    z-index: 30;
    width: 671px;
    height: 348px;
    margin-left: -407px;
    margin-top: -398px;
    /*                                                background-color: rgba(0,255,0,0.4);*/
    background-image: url(../img/bg-zone-toshimaen-01.png);
    background-position: right top;
    /*            background-color: red;*/
}
#toshimaen-front {
    position: absolute;
    top: -5px;
    left: 0px;
    display: block;
    width: 671px;
    height: auto;
    
}
#zone-toshimaen img.sub-tree {
    display: none;
    display: block;
    position: absolute;
    top: 290px;
    left: 247px;
    width: 64px;
    height: auto;
}


/*としまえん入り口の人々*/
.toshimaen-people-slide-A img,
.toshimaen-people-slide-B img{
    opacity: 0;
    animation-name: TOSHIMAENpeopleSlide;
    animation-duration: 22s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.toshimaen-people-slide-A img,
.toshimaen-people-slide-B img {
    position: absolute;
    left: 72px;
    top: 148px;
    display: block;
    width: 312px;
    height: auto;
}
.toshimaen-people-slide-A img:nth-child(1) {animation-delay: 0s;}
.toshimaen-people-slide-A img:nth-child(2) {animation-delay: 4s;}
.toshimaen-people-slide-A img:nth-child(3) {animation-delay: 8s;}
.toshimaen-people-slide-A img:nth-child(4) {animation-delay: 12s;}
.toshimaen-people-slide-A img:nth-child(5) {animation-delay: 16s;}
.toshimaen-people-slide-A img:nth-child(6) {animation-delay: 20s;}

.toshimaen-people-slide-B img:nth-child(1) {animation-delay: 0s;}
.toshimaen-people-slide-B img:nth-child(2) {animation-delay: 4s;}
.toshimaen-people-slide-B img:nth-child(3) {animation-delay: 8s;}
.toshimaen-people-slide-B img:nth-child(4) {animation-delay: 12s;}
.toshimaen-people-slide-B img:nth-child(5) {animation-delay: 16s;}
.toshimaen-people-slide-B img:nth-child(6) {animation-delay: 20s;}

@keyframes TOSHIMAENpeopleSlide{
    0%{opacity: 0;}
    38%{opacity: 0;}
    45%{opacity: 1;}
    55%{opacity: 1;}
    62%{opacity: 0;}
    100%{opacity: 0;}

}



#flying-pirates {
    display: block;
    width: 200px;
    height: 160px;
    position: absolute;
    top: 13px;
    left: 439px;
    overflow: visible;

    /*                background-color: rgba(0,255,0,0.4);*/

}

#flying-pirates img {
    position: absolute;
    height: auto;
    display: block;
}

#flying-pirates-01 {
    width: 138px;
    left: -10px;
    top: -5px;
    /*                opacity: 0.0;*/

}

#flying-pirates-03 {
    width: 137px;
    left: -10px;
    top: -8px;

}

#flying-pirates-02 {
    left: 10px;
    top: 2px;
    width: 98px;



    animation-name: flyingpiratesRotate;
    animation-duration: 30s;
    /*                animation-direction: alternate-reverse;*/
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform: translate3d(0px, 0px, 0px);
    transform-origin: center top;
}

@keyframes flyingpiratesRotate {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(-80deg);
    }

    11% {
        transform: rotate(-80deg);
    }

    26% {
        transform: rotate(80deg);
    }

    27% {
        transform: rotate(80deg);
    }

    42% {
        transform: rotate(-80deg);
    }

    43% {
        transform: rotate(-80deg);
    }

    58% {
        transform: rotate(80deg);
    }

    59% {
        transform: rotate(80deg);
    }

    74% {
        transform: rotate(-80deg);
    }

    75% {
        transform: rotate(-80deg);
    }

    88% {
        transform: rotate(30deg);
    }

    88.5% {
        transform: rotate(30deg);
    }

    95% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


#zone-highway-01{
    z-index: 30;
    width: 300px;
    height: 530px;
    margin-left: 68px;
    margin-top: -401px;
    background-image: url(../img/bg-zone-highway-01.png);
    background-position: right top;
}
#zone-highway-02{
    z-index: 60;
    width: 268px;
    height: 200px;
    margin-left: 335px;
    margin-top: -318px;
    background-image: url(../img/bg-zone-highway-02.png);
    background-position: right top;

}



#zone-residential-01{
    z-index: 100;
    width: 274px;
    height: 230px;
    margin-left: -500px;
    margin-top: 165px;
    /*            background-color: rgba(255,0,0,1);*/
    background-image: url(../img/bg-zone-residential-01.png);
    background-position: right top;
    /*            opacity: 0.2;*/
}
#zone-residential-02{
    z-index: 110;
    width: 320px;
    height: 90px;
    margin-left: -372px;
    margin-top: 320px;
    background-image: url(../img/bg-zone-residential-02.png);
    background-position: center top;

}
#zone-residential-03{
    z-index: 110;
    width: 298px;
    height: 90px;
    margin-left: 75px;
    margin-top: 318px;
    background-image: url(../img/bg-zone-residential-03.png);
    background-position: center top;

}
#zone-residential-04{
    z-index: 100;
    width: 194px;
    height: 200px;
    margin-left: 307px;
    margin-top: 193px;
    background-image: url(../img/bg-zone-residential-04.png);
    background-position: center top;

}
#zone-residential-05{
    z-index: 35;
    width: 150px;
    height: 200px;
    margin-left: -500px;
    margin-top: -305px;
    background-image: url(../img/bg-zone-residential-05-01.png);
    background-position: center top;
}

#zone-residential-06{
    z-index: 10;
    width: 273px;
    height: 200px;
    margin-left: 228px;
    margin-top: -396px;
    background-image: url(../img/bg-zone-residential-06-01.png);
    background-position: left top;
}

.car-root-A {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 85;
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-top: 265px;
    animation-name: carRootA;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.32, .24, .64, .72);
    transform: translate3d(0px, 0px, 0px);
    margin-left: 158px;
    opacity: 0;
}

@keyframes carRootA {
    0% {
        transform: translate3d(290px, 135px, 0px);
        z-index: 106;
        opacity: 0;
    }

    1% {
        transform: translate3d(260px, 120px, 0px);
        z-index: 106;
        opacity: 1;
    }

    14% {
        transform: translate3d(-75px, -35px, 0px);
        z-index: 89;
        opacity: 1;
    }

    /* 第1コーナー */
    28% {
        transform: translate3d(-410px, -190px, 0px);
        z-index: 85;
    }

    32% {
        transform: translate3d(-410px, -240px, 0px);
        z-index: 65;
    }

    /* 第2コーナー */
    42% {
        transform: translate3d(-195px, -350px, 0px);
        z-index: 65;
    }

    45% {
        transform: translate3d(-150px, -350px, 0px);
        z-index: 65;
    }

    /* 第3コーナー */
    56% {
        transform: translate3d(20px, -268px, 0px);
        z-index: 65;
    }

    60% {
        transform: translate3d(20px, -232px, 0px);
        z-index: 75;
    }

    /* 第4コーナー */
    72% {
        transform: translate3d(-185px, -130px, 0px);
        z-index: 75;
    }

    74% {
        transform: translate3d(-185px, -115px, 0px);
        z-index: 81;
    }

    87% {
        transform: translate3d(60px, -3px, 0px);
        z-index: 81;
    }
    87.15% {
        transform: translate3d(64px, -2px, 0px);
        z-index: 101;
    }

    98.6% {
        transform: translate3d(290px, 100px, 0px);
        z-index: 101;
        opacity: 1;
    }

    100% {
        transform: translate3d(310px, 110px, 0px);
        z-index: 101;
        opacity: 0;
    }

}

.direction-root-A {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50px;
    height: 50px;
    animation-name: DirectionRootA;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
    transform: translate3d(0px, 0px, 0px);
}

@keyframes DirectionRootA {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    /* 第1コーナー */
    28% {
        transform: translate3d(0px, -50px, 0px);
    }

    29% {
        transform: translate3d(0px, -100px, 0px);
    }

    31% {
        transform: translate3d(0px, -150px, 0px);
    }

    32% {
        transform: translate3d(0px, -200px, 0px);
    }

    /* 第2コーナー */
    42% {
        transform: translate3d(0px, -250px, 0px);
    }

    43% {
        transform: translate3d(0px, -250px, 0px);
    }

    45% {
        transform: translate3d(0px, -300px, 0px);
    }

    46% {
        transform: translate3d(0px, -350px, 0px);
    }

    /* 第3コーナー */
    54% {
        transform: translate3d(0px, -350px, 0px);
    }

    55% {
        transform: translate3d(0px, -400px, 0px);
    }

    56% {
        transform: translate3d(0px, -450px, 0px);
    }

    59% {
        transform: translate3d(0px, -500px, 0px);
    }

    60% {
        transform: translate3d(0px, -550px, 0px);
    }

    /* 第4コーナー */
    70% {
        transform: translate3d(0px, -550px, 0px);
    }

    71% {
        transform: translate3d(0px, -500px, 0px);
    }

    72% {
        transform: translate3d(0px, -450px, 0px);
    }

    74% {
        transform: translate3d(0px, -400px, 0px);
    }

    75% {
        transform: translate3d(0px, -350px, 0px);
    }

    80% {
        transform: translate3d(0px, -350px, 0px);
    }

    100% {
        transform: translate3d(0px, -350px, 0px);
    }
}



/* ルートB */
.car-root-B {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 65;
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-top: 110px;
    animation-name: carRootB;
    animation-duration: 80s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.32, .24, .64, .72);
    transform: translate3d(40px, -160px, 0px);
    margin-left: -90px;
    opacity: 0;
}

@keyframes carRootB {
    0% {
        transform: translate3d(40px, -160px, 0px);
        z-index: 65;
        opacity: 0;
    }

    1% {
        transform: translate3d(40px, -160px, 0px);
        z-index: 65;
        opacity: 1;
    }

    5% {
        transform: translate3d(-130px, -60px, 0px);
        z-index: 65;
        opacity: 1;
    }

    6% {
        transform: translate3d(-130px, -50px, 0px);
        z-index: 71;
        opacity: 1;
    }

/*
    10% {
        transform: translate3d(-10px, -20px, 0px);
        z-index: 71;
        opacity: 1;
    }
*/

    /* 区庁舎ビル前 */
    10% {
        transform: translate3d(0px, 0px, 0px);
        z-index: 71;
        opacity: 1;
    }

    12.5% {
        transform: translate3d(0px, 0px, 0px);
        z-index: 71;
        opacity: 1;
    }

    15% {
        transform: translate3d(100px, -5px, 0px);
        z-index: 71;
        opacity: 1;
    }

    /* 生涯学習センター前 */
    20% {
        transform: translate3d(180px, -65px, 0px);
        z-index: 71;
        opacity: 1;
    }

    22.5% {
        transform: translate3d(180px, -65px, 0px);
        z-index: 71;
        opacity: 1;
    }

    25% {
        transform: translate3d(225px, -80px, 0px);
        z-index: 71;
        opacity: 1;
    }

    26% {
        transform: translate3d(225px, -100px, 0px);
        z-index: 65;
        opacity: 1;
    }

    30% {
        transform: translate3d(80px, -160px, 0px);
        z-index: 65;
        opacity: 1;
    }

    31% {
        transform: translate3d(40px, -160px, 0px);
        z-index: 65;
        opacity: 1;
    }

    36% {
        transform: translate3d(-130px, -60px, 0px);
        z-index: 65;
        opacity: 1;
    }

    37% {
        transform: translate3d(-130px, -50px, 0px);
        z-index: 81;
        opacity: 1;
    }
    
    /* 美術館前 停車*/
    44.5% {
        transform: translate3d(190px, 98px, 0px);
        z-index: 81;
        opacity: 1;
    }

    47% {
        transform: translate3d(190px, 98px, 0px);
        z-index: 81;
        opacity: 1;
    }
    51% {
        transform: translate3d(350px, 163px, 0px);
        z-index: 101;
        opacity: 1;
    }

    57% {
        transform: translate3d(600px, 280px, 0px);
        z-index: 101;
        opacity: 1;
    }
    60% {
        transform: translate3d(600px, 280px, 0px);
        z-index: 101;
        opacity: 0;
    }



    100% {
        transform: translate3d(40px, -160px, 0px);
        z-index: 65;
        opacity: 0;
    }
}

.direction-root-B {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50px;
    height: 50px;
    animation-name: DirectionRootB;
    animation-duration: 80s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
    transform: translate3d(0px, -550px, 0px);
    opacity: 1;
}

@keyframes DirectionRootB {
    0% {
        transform: translate3d(0px, -550px, 0px);
    }

    5% {
        transform: translate3d(0px, -500px, 0px);
    }

    5.5% {
        transform: translate3d(0px, -450px, 0px);
    }

    6.25% {
        transform: translate3d(0px, -400px, 0px);
    }

    7% {
        transform: translate3d(0px, -350px, 0px);
    }

    8% {
        transform: translate3d(0px, -350px, 0px);
    }

    9.5% {
        transform: translate3d(0px, -300px, 0px);
    }

    12% {
        transform: translate3d(0px, -300px, 0px);
    }

    12.5% {
        transform: translate3d(0px, -250px, 0px);
    }

    14% {
        transform: translate3d(0px, -250px, 0px);
    }

    14.5% {
        transform: translate3d(0px, -200px, 0px);
    }

    15.5% {
        transform: translate3d(0px, -150px, 0px);
    }

    17.5% {
        transform: translate3d(0px, -200px, 0px);
    }

    24% {
        transform: translate3d(0px, -200px, 0px);
    }

    24.5% {
        transform: translate3d(0px, -150px, 0px);
    }

    25% {
        transform: translate3d(0px, -100px, 0px);
    }

    25.5% {
        transform: translate3d(0px, -50px, 0px);
    }

    26% {
        transform: translate3d(0px, -0px, 0px);
    }

    30% {
        transform: translate3d(0px, -650px, 0px);
    }

    30.5% {
        transform: translate3d(0px, -600px, 0px);
    }

    31% {
        transform: translate3d(0px, -550px, 0px);
    }

    35.5% {
        transform: translate3d(0px, -500px, 0px);
    }

    36% {
        transform: translate3d(0px, -450px, 0px);
    }

    37% {
        transform: translate3d(0px, -400px, 0px);
    }

    37.5% {
        transform: translate3d(0px, -350px, 0px);
    }

    100% {
        transform: translate3d(0px, -350px, 0px);
    }

}



/* ルートC */
#car-root-C-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 560px;
    margin-left: -505px;
    margin-top: -400px;
    overflow: hidden;
}
.car-root-C {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 40;
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-top: 226px;
    margin-left: -590px;

    animation-name: carRootC;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.32, .24, .64, .72);
    transform: translate3d(0px, -0px, 0px);
    opacity: 1;

}
@keyframes carRootC {
    0% {transform: translate3d(0px, 0px, 0px); z-index: 40; }
    50% {transform: translate3d(1100px, -482px, 0px); z-index: 40; }
    51% {transform: translate3d(1150px, -490px, 0px); z-index: 41; }
    100% {transform: translate3d(0px, 20px, 0px);  z-index: 41; }
}

.direction-root-C {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50px;
    height: 50px;
    animation-name: DirectionRootC;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
    transform: translate3d(0px, -200px, 0px);

}

@keyframes DirectionRootC {
    0% {transform: translate3d(0px, -200px, 0px); }
    50% {transform: translate3d(0px, -200px, 0px); }
    51% {transform: translate3d(0px, -550px, 0px); }
    100% {transform: translate3d(0px, -550px, 0px);
    }
}



/* ルートD */
.car-root-D {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 40;
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-top: -150px;
    margin-left: -590px;

    animation-name: carRootD;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.32, .24, .64, .72);
    transform: translate3d(0px, -0px, 0px);
    opacity: 1;

}
@keyframes carRootD {
    0% {transform: translate3d(136px, -172px, 0px);  z-index: 34; opacity: 0; }
    2% {transform: translate3d(142px, -167px, 0px);  z-index: 34; opacity: 1; }
    26% {transform: translate3d(238px, -130px, 0px); z-index: 34; opacity: 1; }
    35% {transform: translate3d(238px, -103px, 0px); z-index: 39; opacity: 1; }
    83% {transform: translate3d(0px, 0px, 0px); z-index: 39; opacity: 1; }
    84% {transform: translate3d(0px, 0px, 0px); z-index: 39; opacity: 0; }
    100% {transform: translate3d(0px, 0px, 0px); z-index: 39; opacity: 0; }
}

.direction-root-D {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50px;
    height: 50px;
    animation-name: DirectionRootD;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
    transform: translate3d(0px, -200px, 0px);

}

@keyframes DirectionRootD {
    0% {transform: translate3d(0px, -350px, 0px); }
    2% {transform: translate3d(0px, -350px, 0px); }
    24.5% {transform: translate3d(0px, -400px, 0px); }
    26% {transform: translate3d(0px, -450px, 0px); }
    33.5% {transform: translate3d(0px, -500px, 0px); }
    35% {transform: translate3d(0px, -550px, 0px); }
    83% {transform: translate3d(0px, -550px, 0px); }
    100% {transform: translate3d(0px, -550px, 0px);}
}
.car-root-D.truck-01, .car-root-D.truck-01 .direction-root-D { animation-delay: -5s; }
.car-root-D.sedan-01, .car-root-D.sedan-01 .direction-root-D { animation-delay: -3s; }
.car-root-D.bus-01, .car-root-D.bus-01 .direction-root-D { animation-delay: 0s; }



/* ルートE */
.car-root-E {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 40;
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-top: -420px;
    margin-left: 190px;

    animation-name: carRootE;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.32, .24, .64, .72);
    transform: translate3d(0px, -0px, 0px);
    opacity: 0;
    
/*    background: red;*/

}
@keyframes carRootE {
    0% {transform: translate3d(0px, -0px, 0px);  z-index: 34; opacity: 0; }
    2% {transform: translate3d(20px, 10px, 0px);  z-index: 34; opacity: 1; }
    
    /* 大通り　一時停止 */
    20% {transform: translate3d(190px, 80px, 0px); z-index: 34; opacity: 1; }

    /* 大通りに入る */
    29.4% {transform: translate3d(190px, 80px, 0px); z-index: 39; opacity: 1; }
    33.4% {transform: translate3d(220px, 80px, 0px); z-index: 39; opacity: 1; }
    
    43% {transform: translate3d(300px, 35px, 0px); z-index: 39; opacity: 1; }
    45% {transform: translate3d(320px, 25px, 0px); z-index: 39; opacity: 0; }
    100% {transform: translate3d(0px, 0px, 0px); z-index: 39; opacity: 0; }
}

.direction-root-E {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50px;
    height: 50px;
    animation-name: DirectionRootE;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
    transform: translate3d(0px, -200px, 0px);

}

@keyframes DirectionRootE {
    0% {transform: translate3d(0px, -350px, 0px); }
    2% {transform: translate3d(0px, -350px, 0px); }
    24.5% {transform: translate3d(0px, -400px, 0px); }
    26% {transform: translate3d(0px, -450px, 0px); }
    33.5% {transform: translate3d(0px, -500px, 0px); }
    35% {transform: translate3d(0px, -550px, 0px); }
    83% {transform: translate3d(0px, -550px, 0px); }
    100% {transform: translate3d(0px, -550px, 0px);}
}
.car-root-E.sedan-01, .car-root-E.sedan-01 .direction-root-E { animation-delay: 0s; }
.car-root-E.truck-01, .car-root-E.truck-01 .direction-root-E { animation-delay: 9s; }




/* ルートF */
.car-root-F {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 40;
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-top: 150px;
    margin-left: -530px;

    animation-name: carRootF;
    animation-duration: 70s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.32, .24, .64, .72);
    transform: translate3d(0px, -0px, 0px);
    opacity: 1;

}
@keyframes carRootF {
    0% {transform: translate3d(0px, -0px, 0px);  z-index: 95; opacity: 1; }
    
    /* 公園と畑の交差点*/
    9% {transform: translate3d(290px, 125px, 0px);  z-index: 95; opacity: 1; }
    12% {transform: translate3d(290px, 125px, 0px);  z-index: 95; opacity: 1; }
    12.5% {transform: translate3d(300px, 130px, 0px);  z-index: 100; opacity: 1; }

    /* 畑のコーナー*/
    20% {transform: translate3d(500px, 240px, 0px);  z-index: 105; opacity: 1; }
    
    /*　大通りに入る*/
    28% {transform: translate3d(707px, 150px, 0px);  z-index: 105; opacity: 1; }
    34% {transform: translate3d(712px, 150px, 0px);  z-index: 105; opacity: 1; }
    36.5% {transform: translate3d(707px, 125px, 0px);  z-index: 89; opacity: 1; }
    
    /* 大通りの第1コーナー*/
    47% {transform: translate3d(270px, -90px, 0px);  z-index: 89; opacity: 1; }
    49% {transform: translate3d(270px, -120px, 0px);  z-index: 51; opacity: 1; }
    
    /* 大通りの第2コーナー*/
    55% {transform: translate3d(500px, -235px, 0px);  z-index: 51; opacity: 1; }
    56% {transform: translate3d(530px, -235px, 0px);  z-index: 61; opacity: 1; }

    /*　右の住宅街に入る*/
    64% {transform: translate3d(720px, -140px, 0px);  z-index: 71; opacity: 1; }
    69% {transform: translate3d(860px, -140px, 0px);  z-index: 71; opacity: 1; }
    
    76% {transform: translate3d(1000px, -80px, 0px);  z-index: 71; opacity: 1; }
    78% {transform: translate3d(1040px, -60px, 0px);  z-index: 71; opacity: 0; }

    
    100% {transform: translate3d(0px, -0px, 0px);  z-index: 95; opacity: 0; }
}



.direction-root-F {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50px;
    height: 50px;
    animation-name: DirectionRootF;
    animation-duration: 70s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
    transform: translate3d(0px, -350px, 0px);

}

@keyframes DirectionRootF {
    0% {transform: translate3d(0px, -350px, 0px); }
    /* 公園と畑の交差点*/
    9% {transform: translate3d(0px, -350px, 0px); }
    12% {transform: translate3d(0px, -350px, 0px); }
    
    /* 畑のコーナー*/
    20% {transform: translate3d(0px, -250px, 0px); }
    21% {transform: translate3d(0px, -200px, 0px); }

    /*　大通りに入る*/
    28% {transform: translate3d(0px, -200px, 0px); }
    33.5% {transform: translate3d(0px, -200px, 0px); }
    34% {transform: translate3d(0px, -150px, 0px); }
    34.5% {transform: translate3d(0px, -100px, 0px); }
    36% {transform: translate3d(0px, -50px, 0px); }
    36.5% {transform: translate3d(0px, -0px, 0px); }
    
    /* 大通りの第1コーナー*/
    46% {transform: translate3d(0px, -50px, 0px); }
    47% {transform: translate3d(0px, -100px, 0px); }
    48% {transform: translate3d(0px, -150px, 0px); }
    49% {transform: translate3d(0px, -200px, 0px); }

    /* 大通りの第2コーナー*/
    54% {transform: translate3d(0px, -200px, 0px); }
    55% {transform: translate3d(0px, -250px, 0px); }
    56% {transform: translate3d(0px, -300px, 0px); }
    57% {transform: translate3d(0px, -350px, 0px); }

    /*　右の住宅街に入る*/
    63% {transform: translate3d(0px, -300px, 0px); }
    64% {transform: translate3d(0px, -250px, 0px); }

    69% {transform: translate3d(0px, -300px, 0px); }
    70% {transform: translate3d(0px, -350px, 0px); }
    100% {transform: translate3d(0px, -350px, 0px);}
}
.car-root-F.sedan-01, .car-root-F.sedan-01 .direction-root-F { animation-delay: 0s; }
.car-root-F.truck-01, .car-root-F.truck-01 .direction-root-F { animation-delay: 20s; }




.car-bounds {
    width: 100%;
    height: auto;
    animation-name: carBounds;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translate3d(0px, 0px, 0px);
}

@keyframes carBounds {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    25% {
        transform: translate3d(0px, 0px, 0px);
    }

    30% {
        transform: translate3d(0px, 0.06em, 0px);
    }

    35% {
        transform: translate3d(0px, 0.06em, 0px);
    }

    50% {
        transform: translate3d(0px, 0px, 0px);
    }

    60% {
        transform: translate3d(0px, 0px, 0px);
    }

    70% {
        transform: translate3d(-0px, -0.06em, 0px);
    }

    75% {
        transform: translate3d(-0px, -0.06em, 0px);
    }

    80% {
        transform: translate3d(-0px, -0px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}



.car-root-A.bus-01,
.car-root-A.bus-01 .direction-root-A {
    animation-delay: -20s;
}

.car-root-A.bus-02,
.car-root-A.bus-02 .direction-root-A {
    animation-delay: 0s;
}

.car-root-B.bus-03,
.car-root-B.bus-03 .direction-root-B {
    animation-delay: 5.5s;
}

.car-root-A.sedan-01,
.car-root-A.sedan-01 .direction-root-A {
    animation-delay: -7s;
}

.car-root-A.sedan-02,
.car-root-A.sedan-02 .direction-root-A {
    animation-delay: -15s;
}

.car-root-A.sedan-03,
.car-root-A.sedan-03 .direction-root-A {
    animation-delay: -25s;
}

.car-root-A.truck-01,
.car-root-A.truck-01 .direction-root-A {
    animation-delay: -10s;
}

.car-root-A.truck-02,
.car-root-A.truck-02 .direction-root-A {
    animation-delay: -12s;
}



.car-root-C.truck-03, .car-root-C.truck-03 .direction-root-C { animation-delay: -35s; }
.car-root-C.truck-04, .car-root-C.truck-04 .direction-root-C { animation-delay: -25s; }
.car-root-C.truck-05, .car-root-C.truck-05 .direction-root-C { animation-delay: -15s; }
.car-root-C.truck-06, .car-root-C.truck-06 .direction-root-C { animation-delay: -5s; }
.car-root-C.sedan-04, .car-root-C.sedan-04 .direction-root-C { animation-delay: -30s; }
.car-root-C.sedan-05, .car-root-C.sedan-05 .direction-root-C { animation-delay: -20s; }
.car-root-C.sedan-06, .car-root-C.sedan-06 .direction-root-C { animation-delay: -10s; }
.car-root-C.sedan-07, .car-root-C.sedan-07 .direction-root-C { animation-delay: -8s; }
.car-root-C.sedan-08, .car-root-C.sedan-08 .direction-root-C { animation-delay: -12s; }
.car-root-C.sedan-09, .car-root-C.sedan-09 .direction-root-C { animation-delay: -18s; }
.car-root-C.bus-04, .car-root-C.bus-04 .direction-root-C { animation-delay: -0s; }
.car-root-C.bus-05, .car-root-C.bus-05 .direction-root-C { animation-delay: -20s; }





.clouds {
    display: block;
    position: absolute;
    width: auto;
    z-index: 200;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    top: 50%;
    left: 50%;
    opacity: 0.96;
}

.cloud-opening-start .cloud-RightTop-01,
.cloud-opening-start .cloud-RightTop-02{
    margin-top: -500px;
    animation-name: cloudsRightTop;
}
.cloud-opening-start .cloud-RightTop-01{
    margin-left: 100px;
    height: 55px;
    animation-delay: 10s;
    animation-duration: 26s;
}
.cloud-opening-start .cloud-RightTop-02{
    margin-left: 0px;
    height: 65px;
    animation-delay: 17s;
    animation-duration: 32s;
}
@keyframes cloudsRightTop {
    0% {
        transform: translate3d(0px, 0px, 0px) ;
        opacity: 0;
    }
    1% {
        transform: translate3d(20px, 10px, 0px) ;
        opacity: 0.96;
    }

    60% {
        transform: translate3d(500px, 230px, 0px) ;
        opacity: 0.96;
    }
    61% {
        transform: translate3d(520px, 240px, 0px) ;
        opacity: 0;
    }
    100% {
        transform: translate3d(0px, 0px, 0px) ;
        opacity: 0;
    }
}


.cloud-opening-start .cloud-LeftBottom-01,
.cloud-opening-start .cloud-LeftBottom-02{
    animation-name: cloudsRightTop;
}
.cloud-opening-start .cloud-LeftBottom-01{
    margin-top: 100px;
    margin-left: -650px;
    height: 100px;
    animation-delay: 10s;
    animation-duration: 30s;
}
.cloud-opening-start .cloud-LeftBottom-02{
    margin-top: 200px;
    margin-left: -600px;
    height: 28px;
    animation-delay: 15s;
    animation-duration: 24s;
}
@keyframes cloudsRightTop {
    0% {
        transform: translate3d(0px, 0px, 0px) ;
        opacity: 0;
    }
    1% {
        transform: translate3d(20px, 10px, 0px) ;
        opacity: 0.96;
    }

    60% {
        transform: translate3d(600px, 280px, 0px) ;
        opacity: 0.96;
    }
    61% {
        transform: translate3d(620px, 290px, 0px) ;
        opacity: 0;
    }
    100% {
        transform: translate3d(0px, 0px, 0px) ;
        opacity: 0;
    }
}







#cork-screw {
    display: block;
    position: absolute;
    top: 0%;
    left: 50%;

    margin-left: -105px;
    margin-top: -10px;

    width: 300px;
    height: 130px;

    background-size: 100% auto;
    background-repeat: no-repeat;
}
#cork-screw-rail,
#cork-screw-forests {
    position: absolute;
    width: 310px;
    height: auto;
    left: -13px;
    top: 4px;
}

#cork-screw-coasters {
    width: 270px;
    height: 150px;
    display: block;
    overflow: hidden;
    position: relative;
}
#cork-screw-coasters .coaster {
    width: 32px;
    display: block;
    position: absolute;
    top: 46px;
    left: -15px;
    transform-origin: right top;


}
#cork-screw-coasters img {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    
    width: auto;
    height: 30px;
    

    transform-origin: center bottom;
}

#cork-screw-01 {
    margin-left: 6px;
}
#motionPath-01{
    display: none;
}




#ElDorado  {
    width: 110px;
    height: auto;
    position: absolute;
    top: 110px;
    left: 306px;
    display: block;
    
}
#ElDorado img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}
#ElDorado div {
    position: absolute;
    top: 30px;
    left: 5px;
    width: 99px;
    height: 52px;
    overflow: hidden;
    image-rendering: crisp-edges;
    backface-visibility: hidden;

/*    background-color: rgba(255,0,0,0.3);*/

}
#ElDorado div img {
    position: absolute;
    top: 0px;
    left: 0px;
    animation-name: ElDoradoObjects;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translate3d(0px,0px,0px);
    image-rendering: crisp-edges;
    backface-visibility: hidden;
}
#ElDorado-01 img {animation-delay: -4s;}
#ElDorado-02 img {animation-delay: -2s;}
#ElDorado-03 img {animation-delay: 0s;}

@keyframes ElDoradoObjects{
    0%{transform: translate3d(35px,-25px,0px) scale3d(-1,1,1); opacity: 0;}
    9.9%{transform: translate3d(40px,-20px,0px) scale3d(-1,1,1); opacity: 1;}
    10%{transform: translate3d(40px,-20px,0px) scale3d(1,1,1);}
    50%{transform: translate3d(0px,-5px,0px) scale3d(1,1,1);}
    80%{transform: translate3d(-40px,-20px,0px) scale3d(1,1,1);}
    80.1%{transform: translate3d(-40px,-20px,0px) scale3d(-1,1,1);}
    95%{transform: translate3d(-35px,-25px,0px) scale3d(-1,1,1); opacity: 1;}
    100%{transform: translate3d(-35px,-25px,0px) scale3d(-1,1,1); opacity: 0;}
}

@media (orientation: portrait) {
    #footer-clouds {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 25px;
        margin-top: 380px;
        margin-left: -500px;
        background-image: url(../img/footer-clouds.png);
        background-size: auto 25px;
        background-repeat: repeat-x;
        background-position: bottom;
        z-index: 99999;
    }
}