@charset "UTF-8";

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

制作コンテンツ

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

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

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

.title {
    height: 477px;
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
}

.title-slide {
    height: 477px;
    animation: bgroop 90s linear infinite;
    width: 3042px;
    background: url(../images/slide.png) repeat;
    left: 0;
}

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

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

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

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

.link:hover,
.spot:hover {
    transform: translateX(4px);
    transition-duration: 1s;
    opacity: 0.7;
}

.link.link01:hover {
    transform: translateY(4px);
    transition-duration: 1s;
}

.parts01 {
    top: -150px;
    left: 30px;
}

.parts01.fade-in {
    transform: translateY(0);
    animation: textanimation 3s forwards;
    opacity: 0;
    animation-delay: 1.0s
}

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

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

.link01 {
    position: fixed;
    top: 25px;
    right: 50px;
    z-index: 99;
}

.link02 {
    position: fixed;
    top: 370px;
    right: 50px;
    z-index: 99;
}

.spot01 {
    top: 54px;
    right: -31px;
}

.spot02 {
    top: 75px;
    left: -51px;
}

.spot03 {
    top: 527px;
    left: 8px;
}

.spot04 {
    top: 512px;
    right: -1px;
}

.spot05 {
    top: 882px;
    right: 192px;
}

.spot06 {
    top: 882px;
    right: 47px;
}

.spot07 {
    top: 983px;
    right: 330px;
}

.spot08 {
    top: 983px;
    right: 210px;
}

.spot09 {
    top: 983px;
    right: 4px;
}

.spot10 {
    top: 1088px;
    right: 372px;
}

.spot11 {
    top: 1088px;
    right: 210px;
}

.spot12 {
    top: 983px;
    left: 182px;
}

.spot13 {
    top: 983px;
    left: 343px;
}

.spot14 {
    top: 1088px;
    left: 16px;
}

/* .spot15 {
    top: 1088px;
    left: 182px;
} */

.spot16 {
    top: 1088px;
    left: 343px;
}

.spot17 {
    top: 1088px;
    left: 182px;
}

.spot18 {
    top: 1188px;
    left: 182px;
}

.spot19 {
    top: 1188px;
    left: 343px;
}

.spot20 {
    top: 1188px;
    left: 16px;
}

.spot21 {
    top: 1289px;
    left: 16px;
}

.spot22 {
    top: 1289px;
    left: 182px;
}

.spot23 {
    top: 1188px;
    right: 172px;
}

.spot24 {
    top: 1188px;
    right: 32px;
}

.spot25 {
    top: 1289px;
    right: 331px;
}

.spot26 {
    top: 1289px;
    right: 183px;
}

.link03 {
    top: 1470px;
    left: 29px;
}

.link04 {
    top: 1470px;
    right: 30px;
}

.link05 {
    top: 1559px;
    left: 173px;
}

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