@charset "utf-8";
/**********************************************************************************/
.story .image {
    width: 1000px;
    height: 30px;
  
}

.story .letters {
    position: relative;
    width: 1000px;
    height : 2750px;
    animation: story_letters 1s linear 0s 1 normal;
  left : 10px;
  top : -70px;
}

.story .letters .link {
    display: block;
    transition: background 0s linear;
    -moz-transition: background 0s linear;
    -webkit-transition: background 0s linear;
    -o-transition: background 0s linear;
    -ms-transition: background 0s linear;
}

.story .letters .link:hover {
    animation: story_link 0s linear 0s 1 normal;
}

.story .letters .link1 {
    position: absolute;
    left : 295px;
    top : 150px;
    width : 297px;
    height : 119px;
    background-image : url(img/story/akane_base.png);
}

.story .letters .link1:hover {
    background-image : url(img/story/akane_ov.png);
}

.story .letters .link2 {
    position: absolute;
    left: 425px;
    top: 230px;
    width: 289px;
    height: 116px;
    background-image : url(img/story/touka_base.png);
}

.story .letters .link2:hover {
    background-image : url(img/story/touka_ov.png);
}

.story .letters .link3 {
    position: absolute;
    left: 450px;
    top: 390px;
    width: 290px;
    height: 113px;
    background-image : url(img/story/aiko_base.png);
}

.story .letters .link3:hover {
    background-image : url(img/story/aiko_ov.png);
}

.story .letters .link4 {
    position: absolute;
    left: 475px;
    top: 535px;
    width: 289px;
    height: 115px;
    background-image : url(img/story/midori_base.png);
}

.story .letters .link4:hover {
    background-image : url(img/story/midori_ov.png);
}

.story .letters .link5 {
    position: absolute;
    left: 475px;
    top: 770px;
    width: 288px;
    height: 118px;
    background-image : url(img/story/hakua_base.png);
}

.story .letters .link5:hover {
    background-image : url(img/story/hakua_ov.png);
}


.story .letters .link6 {
    position: absolute;
    left: 520px;
    top: 945px;
    width: 288px;
    height: 115px;
    background-image : url(img/story/asagi_base.png);
}

.story .letters .link6:hover {
    background-image : url(img/story/asagi_ov.png);
}

.story .letters .link7 {
    position: absolute;
    left: 535px;
    top: 1635px;
    width: 288px;
    height: 119px;
    background-image : url(img/story/kuroko_base.png);
}

.story .letters .link7:hover {
    background-image : url(img/story/kuroko_ov.png);
}

.story .letters .link8 {
    position: absolute;
    left: 135px;
    top: 1825px;
    width: 659px;
    height: 164px;
    background-image : url(img/story/suka_base.png);
}

.story .letters .link8:hover {
    background-image : url(img/story/suka_ov.png);
}


.story .letters .link9 {
    position: absolute;
    left: 315px;
    top: 1980px;
    width: 290px;
    height: 121px;
    background-image : url(img/story/sakura_base.png);
}

.story .letters .link9:hover {
    background-image : url(img/story/sakura_ov.png);
}


.story .letters .link10 {
    position: absolute;
    left: 425px;
    top: 2060px;
    width: 339px;
    height: 124px;
    background-image : url(img/story/ajisai_base.png);
}

.story .letters .link10:hover {
    background-image : url(img/story/ajisai_ov.png);
}



.story .letters .text {
    position: absolute;
    
    
    width: 968px;
    height : 2837px;
    background-image : url(img/story/text.png);
  
  left : 19px;
  top : 20px;
}
@keyframes story_letters {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes story_image {
    0% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes story_link {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}