@charset "UTF-8";
@-webkit-keyframes bgFlow {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1500px 0;
    }
}
@keyframes bgFlow {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1500px 0;
    }
}
@-webkit-keyframes gatagata {
    0% {
        margin-bottom: 0;
    }
    100% {
        margin-bottom: -3px;
    }
}
@keyframes gatagata {
    0% {
        margin-bottom: 0;
    }
    100% {
        margin-bottom: -3px;
    }
}
@-webkit-keyframes busMoveRight {
    0% {
        right: 0;
    }
    100% {
        right: 93%;
    }
}
@keyframes busMoveRight {
    0% {
        right: 0;
    }
    100% {
        right: 93%;
    }
}
@-webkit-keyframes busMoveLeft {
    0% {
        right: 93%;
    }
    100% {
        right: 0;
    }
}
@keyframes busMoveLeft {
    0% {
        right: 93%;
    }
    100% {
        right: 0;
    }
}
.visual {
    position: relative;
    z-index: 2;
    margin-top: -27px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 32px, rgb(222, 239, 247) 32px);
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity;
    height: 82px;
}
.visual.isFadeIn {
    opacity: 1;
}
.visual_bg {
    content: "";
    transition-duration: 0.7s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    background-image: url(/img/bg-visual@2x.png);
    background-size: auto 100%;
    background-position: 0 bottom;
    background-repeat: repeat-x;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    transition-delay: .7s;
}
.visual_bg.isAnimated {
    -webkit-animation-name: bgFlow;
    animation-name: bgFlow;
    -webkit-animation-duration: 70s;
    animation-duration: 70s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
.visual.isFadeIn > .visual_bg {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.visual_inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    padding-bottom: 82px;
}
.visual_ship {
    position: absolute;
    z-index: 9;
    bottom: 0;
    left: 402px;
}
.visual_ship > img {}
.visual_bus {
    position: absolute;
    z-index: 10;
    bottom: -10px;
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
    width: 100%;
    left: 0;
    background-image: url(/img/bg-bus@2x.png);
    background-position: 0 center;
    background-repeat: repeat-x;
    background-size: auto 100%;
    height: 45px;
}
.visual_bus.isFadeIn {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.visual_bus.isAnimated {
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-name: gatagata, bgFlow;
    animation-name: gatagata, bgFlow;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 0.1s, 35s;
    animation-duration: 0.1s, 35s;
    -webkit-animation-direction: alternate, reverse;
    animation-direction: alternate, reverse;
    -webkit-animation-timing-function: steps(2), linear;
    animation-timing-function: steps(2), linear;
}
.visual_bus[data-move="right"] {
    -webkit-animation-name: busMoveRight;
    animation-name: busMoveRight;
}
.visual_bus[data-move="left"] {
    -webkit-animation-name: busMoveLeft;
    animation-name: busMoveLeft;
}
.visual_bus > img {
    display: block;
    transition-duration: .5s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}
.visual_bus > img.isMoving {
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
.visual_bus > img.isInvert {}
.visual_cloud {
    position: absolute;
    z-index: 9;
}
.visual_cloud > img {
    display: block;
}
.visual_grass {
    position: absolute;
    z-index: 9;
    bottom: 0;
    left: 37px;
    overflow: hidden;
}
.visual_grass > img {
    display: block;
    position: relative;
    z-index: 1;
    bottom: -17px;
}
@media screen and (max-width: 1259px) {
    .visual {
        margin-left: -100px;
    }
}
@media screen and (min-width:960px) {}
@media screen and (max-width:959px) {
    .visual {
        margin-left: 0;
        margin-top: -20px;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 23px, rgb(222, 239, 247) 23px);
    }
    .visual_inner {
        padding-bottom: 60px;
    }
    .visual_ship {}
    .visual_ship > img {}
    .visual_bus {}
    .visual_bus > img {}
    .visual_cloud {}
    .visual_cloud > img {}
    .visual_grass {}
    .visual_grass > img {}
    .slide_loading {}
    .slide_loading.isFadeOut {}
    .slide_loading > img {}
    .visual_bg {}
}
@media screen and (max-width:699px) {
    .visual {
        margin-top: -14px;
        -webkit-animation-duration: 32s;
        animation-duration: 32s;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 16px, rgb(222, 239, 247) 16px);
        height: 41px;
    }
    .visual_bg.isAnimated {
        -webkit-animation-duration: 140s;
        animation-duration: 140s;
    }
    .visual_inner {
        padding-bottom: 41px;
    }
    .visual_ship {}
    .visual_ship > img {}
    .visual_bus {
        bottom: -5px;
        height: 22.5px;
    }
    .visual_bus.isAnimated {
        -webkit-animation-duration: 0.1s, 70s;
        animation-duration: 0.1s, 70s;
    }
    .visual_bus > img {}
    .visual_cloud {}
    .visual_cloud > img {}
    .visual_grass {}
    .visual_grass > img {}
    .visual_bg {}
}