.js-animation.odd {
    opacity: 0;
    -webkit-transition: opacity 400ms linear 0ms, -webkit-transform 450ms ease-out 0ms;
    transition: opacity 400ms linear 0ms, -webkit-transform 450ms ease-out 0ms;
    -webkit-transition: opacity 400ms linear 0ms, -webkit-transform 450ms ease-out 0ms;
    -o-transition: opacity 400ms linear 0ms, transform 450ms ease-out 0ms;
    transition: opacity 400ms linear 0ms, transform 450ms ease-out 0ms;
    transition: opacity 400ms linear 0ms, transform 450ms ease-out 0ms, -webkit-transform 450ms ease-out 0ms;
    transition: opacity 400ms linear 0ms, transform 450ms ease-out 0ms, -webkit-transform 450ms ease-out 0ms;
    -webkit-transform: translate(15px, 0);
    -ms-transform: translate(15px, 0);
    transform: translate(15px, 0)
}

.js-animation.even {
    opacity: 0;
    -webkit-transition: opacity 400ms linear 0ms, -webkit-transform 450ms ease-out 0ms;
    transition: opacity 400ms linear 0ms, -webkit-transform 450ms ease-out 0ms;
    -webkit-transition: opacity 400ms linear 0ms, -webkit-transform 450ms ease-out 0ms;
    -o-transition: opacity 400ms linear 0ms, transform 450ms ease-out 0ms;
    transition: opacity 400ms linear 0ms, transform 450ms ease-out 0ms;
    transition: opacity 400ms linear 0ms, transform 450ms ease-out 0ms, -webkit-transform 450ms ease-out 0ms;
    transition: opacity 400ms linear 0ms, transform 450ms ease-out 0ms, -webkit-transform 450ms ease-out 0ms;
    -webkit-transform: translate(-15px, 0);
    -ms-transform: translate(-15px, 0);
    transform: translate(-15px, 0)
}

.js-animation.animated {
    opacity: 1;
    -webkit-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important
}

.cmHeroBox {
    width: 100%;
    position: relative;
}

.cmHero {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    line-height: 0;
}

.cmHero {
    overflow: hidden
}

@media screen and (min-width: 768px) {
    .cmHero {
        height: 41.143vw;
        max-height: 850px; /*min-height: 423px;        margin-top: 92px*/
    }
}

@media screen and (max-width: 767px) {
    .cmHero {
        height: 66.934vw; /*margin-top: 46px*/
    }
}

.tpHero_bg01, .tpHero_bg02, .tpHero_bg03, .tpHero_bg04, .tpHero_bg05, .tpHero_bg06, .tpHero_bg07 {
    position: absolute;
    visibility: hidden;
    z-index: 2
}

.tpHero_bg01::before, .tpHero_bg02::before, .tpHero_bg03::before, .tpHero_bg04::before, .tpHero_bg05::before, .tpHero_bg06::before, .tpHero_bg07::before {
    content: "";
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: -webkit-transform 5000ms linear 0ms;
    transition: -webkit-transform 5000ms linear 0ms;
    -o-transition: transform 5000ms linear 0ms;
    transition: transform 5000ms linear 0ms;
    transition: transform 5000ms linear 0ms, -webkit-transform 5000ms linear 0ms;
    pointer-events: none
}

.tpHero_bg01.current, .tpHero_bg02.current, .tpHero_bg03.current, .tpHero_bg04.current, .tpHero_bg05.current, .tpHero_bg06.current, .tpHero_bg07.current {
    visibility: visible;
    z-index: 5
}

.tpHero_bg01.prev, .tpHero_bg02.prev, .tpHero_bg03.prev, .tpHero_bg04.prev, .tpHero_bg05.prev, .tpHero_bg06.prev, .tpHero_bg07.prev {
    visibility: visible;
    z-index: 3
}

.tpHero_bg01 {
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    visibility: visible;
    z-index: 2;
    visibility: visible
}

@media screen and (min-width: 768px) {
    .tpHero_bg01 {
        padding: 24.143% 53.429%
    }
}

@media screen and (max-width: 767px) {
    .tpHero_bg01 {
        width: 148.125%;
        height: 100%
    }
}

.tpHero_bg01::before {
    background-image: url(../images/top-slide/001.jpg)
}

.tpHero_bg01.current::before {
    -webkit-transform: translate(6.417%, 0);
    -ms-transform: translate(6.417%, 0);
    transform: translate(6.417%, 0)
}

.tpHero_bg02 {
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

@media screen and (min-width: 768px) {
    .tpHero_bg02 {
        padding: 24.143% 54.429%
    }
}

@media screen and (max-width: 767px) {
    .tpHero_bg02 {
        width: 150.898%;
        height: 100%
    }
}

.tpHero_bg02::before {
    background-image: url(../images/top-slide/002.jpg)
}

.tpHero_bg02.current::before {
    -webkit-transform: translate(-8.137%, 0);
    -ms-transform: translate(-8.137%, 0);
    transform: translate(-8.137%, 0)
}

.tpHero_bg03 {
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

@media screen and (min-width: 768px) {
    .tpHero_bg03 {
        padding: 32.75% 50%
    }
}

@media screen and (max-width: 767px) {
    .tpHero_bg03 {
        width: 100%;
        height: 135.651%
    }
}

.tpHero_bg03::before {
    background-image: url(../images/top-slide/003.jpg)
}

.tpHero_bg03.current::before {
    -webkit-transform: translate(0, 26.282%);
    -ms-transform: translate(0, 26.282%);
    transform: translate(0, 26.282%)
}

.tpHero_bg04 {
    left: 50%;
    top: 0;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

@media screen and (min-width: 768px) {
    .tpHero_bg04 {
        padding: 30.608% 50%
    }
}

@media screen and (max-width: 767px) {
    .tpHero_bg04 {
        width: 100%;
        height: 126.776%
    }
}

.tpHero_bg04::before {
    background-image: url(../images/top-slide/004.jpg)
}

.tpHero_bg04.current::before {
    -webkit-transform: translate(0, -21.12%);
    -ms-transform: translate(0, -21.12%);
    transform: translate(0, -21.12%)
}

.tpHero_bg05 {
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

@media screen and (min-width: 768px) {
    .tpHero_bg05 {
        padding: 24.143% 54.786%
    }
}

@media screen and (max-width: 767px) {
    .tpHero_bg05 {
        width: 151.888%;
        height: 100%
    }
}

.tpHero_bg05::before {
    background-image: url(../images/top-slide/005.jpg)
}

.tpHero_bg05.current::before {
    -webkit-transform: translate(8.736%, 0);
    -ms-transform: translate(8.736%, 0);
    transform: translate(8.736%, 0)
}

.tpHero_bg06 {
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

@media screen and (min-width: 768px) {
    .tpHero_bg06 {
        padding: 24.143% 53.608%
    }
}

@media screen and (max-width: 767px) {
    .tpHero_bg06 {
        width: 148.62%;
        height: 100%
    }
}

.tpHero_bg06::before {
    background-image: url(../images/top-slide/006.jpg)
}

.tpHero_bg06.current::before {
    -webkit-transform: translate(-6.728%, 0);
    -ms-transform: translate(-6.728%, 0);
    transform: translate(-6.728%, 0)
}

.tpHero_bg06.prev {
    opacity: 0
}

.tpHero_bg07 {
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

@media screen and (min-width: 768px) {
    .tpHero_bg07 {
        padding: 24.143% 53.608%
    }
}

@media screen and (max-width: 767px) {
    .tpHero_bg07 {
        width: 148.62%;
        height: 100%
    }
}

.tpHero_bg07::before {
    background-color: #fff;
    background-image: url(../images/top-slide/006.jpg)
}

.tpHero_bg07.current::before {
    -webkit-transform: translate(-5.383%, 0);
    -ms-transform: translate(-5.383%, 0);
    transform: translate(-5.383%, 0);
    -webkit-transition: opacity 2000ms linear 0ms;
    -o-transition: opacity 2000ms linear 0ms;
    transition: opacity 2000ms linear 0ms;
    opacity: 0
}

.tpHero_bg07.prev {
    opacity: 0
}

.tpHero_text {
    display: block;
    position: absolute;
    z-index: 10;
    width: 30%;
    left: 3%;
    bottom: 8%;
}

@media screen and (max-width: 767px) {
    .tpHero_text {
        width: 50%;
    }
}