@charset "UTF-8";

/* ================================================================

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

================================================================ */

h1 {
    position: absolute;
    top: -1000px;
}

.inner {
    overflow: hidden;
}

.content-wrap01 {
    background: url(../images/content-wrap01.png) no-repeat top center;
    margin: 0 auto;
    max-width: 1600px;
    height: 1118px;
}

.slide-wrap {
    height: 220px;
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
}

.slide {
    height: 220px;
    animation: bgroop 60s linear infinite;
    width: 2000px;
    background: url(../images/slide.png) repeat;
    left: 0;
}

@keyframes bgroop {
    from {
        background-position: 2000px 0;
    }
    to {
        background-position: 0 0;
    }
}

.content-wrap02 {
    background: url(../images/content-wrap02.png) no-repeat top center;
    margin: 0 auto;
    max-width: 1600px;
    height: 762px;
}

.content {
    width: 1050px;
    margin: 0 auto;
    position: relative;
}

.parts,
.illustration,
.spot,
.article,
.link {
    position: absolute;
}

.text01 {
    top: 74px;
    left: 109px;
}

.text02 {
    top: 131px;
    left: 118px;
}

.text03 {
    top: 164px;
    left: 444px;
}

.text01.right {
    animation-delay: 1.0s
}

.text02.left {
    animation-delay: 1.7s
}

.text03.right {
    animation-delay: 2.4s
}

p.right {
    transform: translateX(0);
    animation: textanimation3 1s forwards;
    opacity: 0;
}

@keyframes textanimation3 {
    0% {
        transform: translateX(-5em);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

p.left {
    transform: translateX(0);
    animation: textanimation4 1s forwards;
    opacity: 0;
}

@keyframes textanimation4 {
    0% {
        transform: translateX(5em);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.text04 {
    top: 223px;
    left: -111px;
}

.content-wrap01 {
    position: relative;
    overflow: hidden;
}

/* 車の移動領域 */
.car-area {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 500px;

    overflow: hidden;
    pointer-events: none;
}

/* 車本体 */
.illustration01 {
    position: absolute;
    top: 185px;
    left: 100%;
    animation: carMove 15s linear infinite;
    will-change: left, transform;
}

/* 車の揺れ */
.illustration01 img {
    display: block;
    max-width: none;
    animation: shaking 0.4s steps(2, start) infinite;
}

/* 右端から左端へ移動 */
@keyframes carMove {
    0% {
        left: 100%;
        transform: translateX(0);
    }

    100% {
        left: 0;
        transform: translateX(-100%);
    }
}

@keyframes shaking {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(3px);
    }
}

@media screen and (max-width: 640px) {
    .illustration01 {
        animation-duration: 10s;
    }
}

.spot01 {
    top: 297px;
    left: 49px;
}

.article01 {
    top: 248px;
    right: 43px;
}

.article02 {
    top: 510px;
    right: 48px;
}

.illustration02 {
    top: 522px;
    left: 43px;
    transform-origin: center bottom;
    animation: pyonpyon 1.9s ease-in-out infinite;
}

@keyframes pyonpyon {
    0%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-3px);
    }

    60% {
        transform: translateY(-3px);
    }
}

.article03 {
    top: 687px;
    left: 48px;
}

.article04 {
    top: 878px;
    left: 186px;
}

.illustration03 {
    top: 947px;
    left: 63px;
    transform-origin: center center;
    animation: kururin 7s ease-in-out infinite;
}

@keyframes kururin {
    0% {
        transform: rotateY(0deg);
    }

    10% {
        transform: rotateY(360deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.article05 {
    top: 854px;
    right: 48px;
}

.article06 {
    top: 40px;
    left: 67px;
}

.illustration04 {
    top: 55px;
    left: 46px;
    transform-origin: center bottom;
    animation: yurayura 5s linear infinite;
}

.article07 {
    top: 36px;
    right: 62px;
}

.illustration05 {
    top: 429px;
    right: 66px;
    transform-origin: center bottom;
    animation: yurayura 5s linear infinite;
}

@keyframes yurayura {
    0% , 100%{
    transform: rotate(5deg);
    }
    50%{
    transform: rotate(-5deg);
    }
}

.link01 {
    top: 606px;
    left: 63px;
}

.link02 {
    top: 606px;
    right: 73px;
}

.link03 {
    top: 707px;
    left: 74px;
}

.link04 {
    top: 707px;
    right: 74px;
}

.spot img,
.link img {
    height: auto;
    transition: transform .6s ease;
}

.spot img:hover,
.link img:hover {
    transform: scale(1.05);
}

/* フェードイン・フェードアウト */

.fade-in {
    opacity: 0;
    transition-duration: 1200ms;
    transition-property: opacity, transform;
}

.fade-in-on {
    transform: scale(0.75);
}

.fade-in-left {
    transform: translate(-30px, 0);
}

.fade-in-right {
    transform: translate(30px, 0);
}

.fade-in-up {
    transform: translate(0, 30px);
}

.fade-in-down {
    transform: translate(0, -30px);
}

.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}

.fade-in-on.scroll-in {
    opacity: 1;
    transform: scale(1);
}

@media (max-width:640px) {
    .fade-in {
        opacity: 1;
        transition-duration: 1200ms;
        transition-property: opacity, transform;
    }

    .fade-in-on {
        transform: translate(0px, 0);
    }

    .fade-in-left {
        transform: translate(0px, 0);
    }

    .fade-in-right {
        transform: translate(0px, 0);
    }

    .fade-in-up {
        transform: translate(0px, 0);
    }

    .fade-in-down {
        transform: translate(0px, 0);
    }
}


/* PC、Tablet用CSSの記述 */
@media (min-width:768px){
}